@charset "utf-8";

/*te_ts_iframe*/
.te_ts_chatArea{ display:block; width:100%; height: 100%; bottom: 0px; right: 0; position:fixed; z-index:10000;}
.te_ts_iframe { width: 100%; height: 100%; position: relative; overflow: hidden; }
.te_ts_iframe iframe { top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: auto;}

/*預設泡泡框*/
.te_ts_default_wrapper{ display: block; position: fixed; bottom: 0; right: 0; z-index: 100000; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -sand-box-sizing: border-box;}
.te_ts_bubble{ display: block; width: 68px; height: 68px; position: absolute; right: 10px; bottom: 15px;background: rgba(255,255,255,0.75); box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
cursor: pointer;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;}
.te_ts_bubble *{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -sand-box-sizing: border-box;}
.te_ts_bubble .title{ display: none;}
.te_ts_default_wrapper .msg{ font-family: arial, "微軟正黑體"; width: 200px; text-align: right; position: absolute; right: 82px; bottom: 30px; /*pointer-events: none; z-index: 1;*/}
.te_ts_default_wrapper .msg>a { display: inline-block; cursor: pointer;}
.te_ts_default_wrapper .msg span.marketing{ display: inline-block; padding: 0 8px; height: 32px; line-height: 32px; font-size: 13px; color: #333; background: #fff; box-shadow: 0px 0px 10px rgba(0,0,0,0.35);
   /*white-space:normal; overflow : hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box;
    -webkit-line-clamp: 1; -line-clamp: 1; -webkit-line-clamp: 1;*/
border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;}
    .te_ts_default_wrapper .msg .info {
        display: inline-block;
        padding: 8px;
        color: #333;
        font-size: 13px;
        line-height: 1.5;
        text-align: left;
        width: 100%;
        position: absolute;
        right: 0;
        bottom: -50%;
        background: #fff;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.35);
        border-radius: 16px;
        -moz-border-radius: 16px;
        -webkit-border-radius: 16px;
    }
[class*='te_ts_icon']{ display: inline-block; width: 24px; height: 24px; vertical-align: middle; background: url(../Images/te_ts_icon.png) no-repeat 80px 80px; background-size: 48px;}
[class*='te_ts_icon_close']{ background-position: 0px 0px; }
.te_ts_default_wrapper .msg .info .te_ts_icon_close { margin:-6px; float: right;
-webkit-transform: scale(0.5);
    transform: scale(0.5);}
.te_ts_default_wrapper .te_ts_remind_unmber{ display: inline-block; min-width: 18px; line-height: 18px; font-size: 12px; text-align: center; font-style: normal; color: #fff; background: #c43b42; position: absolute; top: 10px; right: 6px; z-index: 1;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;}
.te_ts_bubble .pic,
.te_ts_bubble .pic img{ width: 68px; height: 68px; overflow: hidden;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;}

.te_ts_bubble.transparent{background: none;border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;box-shadow:none;}
.te_ts_bubble.transparent .pic,
.te_ts_bubble.transparent .pic img{border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;}

[class*='te_ts_spinner']{ margin: 0 auto; margin-top: 16px; display: block; width: 35px; height: 35px; text-align: center; background: url(../Images/te_ts_chat_icon.png) no-repeat ; background-size: 70px;}
[class*='te_ts_spinner'].ani_paused > div { animation-play-state: paused;}/*動畫暫停*/
[class*='te_ts_spinner01'] { background-position: -35px 1px; padding-top: 5px;}
[class*='te_ts_spinner02'] { background-position: -35px -35px; padding-top: 8px;}


/*預設動畫效果01*/
.te_ts_spinner01{ padding-top: 7px; }
.te_ts_spinner01 > div {
  width: 4px;
  height: 4px;
  background-color: #fff;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 0s infinite ease-in-out backwards;
  animation: sk-bouncedelay 0s infinite ease-in-out backwards;
}

.te_ts_spinner01.ani_move > div{
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s; /* 動畫執行期間的秒數。*/
}

.te_ts_spinner01 .rect1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.te_ts_spinner01 .rect2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.5) }
  40% { -webkit-transform: scale(1.25) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  } 40% {
    -webkit-transform: scale(1.25);
    transform: scale(1.25);
  }
}


/*預設動畫效果02*/

.te_ts_spinner02 > div {
  background-color: #fff;
  height: 60%;
  width: 2px;
  display: inline-block;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;

  -webkit-animation: sk-stretchdelay 0s infinite ease-in-out ;
  animation: sk-stretchdelay 0s infinite ease-in-out ;
}

.te_ts_spinner02.ani_move > div{
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s; /* 動畫執行期間的秒數。*/
}

.te_ts_spinner02 .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.te_ts_spinner02 .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.te_ts_spinner02 .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.te_ts_spinner02 .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}


.te_ts_bubble.dark [class*='te_ts_spinner']{ background-position-x: 0; }
.te_ts_bubble.dark .te_ts_spinner01 > div,
.te_ts_bubble.dark .te_ts_spinner02 > div { background-color: #aaa;}

@media only screen and (min-width: 960px) {

    .te_ts_bubble.mini{ padding: 0 16px; display: inline-block; width: auto; height: 36px; bottom: 0; white-space:nowrap;
    border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;}/*泡泡框在電腦版縮小的時候*/
    .te_ts_bubble.mini .pic,
    .te_ts_bubble.mini [class*='te_ts_spinner']{ display: none;}
    .te_ts_bubble.mini .title{ display: inline-block; color: #000; line-height: 36px; font-size: 14px; font-style: normal; white-space:nowrap;}
    .dark.mini .title{ display: inline-block; color: #fff; font-weight: bold; margin-right: 4px;}
    .te_ts_bubble.mini .te_ts_remind_unmber{ position: relative; right: auto; top: auto; }


    .te_ts_chatArea{ max-width: 350px;}
    .te_ts_chatArea{ height:auto;}
    .te_ts_iframe { height: 580px; max-height: 100%;}


}