@charset "utf-8";

/* 챗봇 */
.chatting_wrap .chat_nopen {position:relative; width:145px; height:60px; background:url("/subscribe/images/product/bg_chatting.png") 0 0 no-repeat; background-size:145px 60px;}
.chatting_wrap .chat_nopen ul li a {position:absolute; left:15px; display:block;}
.chatting_wrap .chat_nopen ul li:nth-child(1) a {bottom:13px;}
.chatting_wrap .chat_nopen ul li:nth-child(2) a {bottom:15px;}
.chatting_wrap .chat_nopen ul li a img {width:88px;}

/* 채팅유도 모션관련 */
.chatting_sol_wrap {position:fixed; width:84px; height:84px; right:20px; bottom:60px; z-index:93; opacity:0;}/* 171201 z-index 수정 100-> */   /* 180322 right:28px */
.ani_wrap {position:relative; width:84px; height:84px;}
.ani_wrap .chat_mond {position:relative; z-index:10;}
.ani_wrap .chat_mond div {position:absolute;}
.chat_step02,.chat_step03,.chat_step04,.txt_chat01,.txt_chat01,.txt_chat_last {display:none;}
.chat_bubble {transition:all 0.5s; position:absolute; right:79px; bottom:27px; border-radius:20px 20px 0 20px; padding:10px 15px; width:42px; min-height:22px; background:#6071c5; z-index:9; display:none; opacity:0;}
.chat_bubble > span {font-size:12px; color:#fff !important; line-height:1.8; white-space:nowrap;}
.chat_bubble:before {content:""; position:absolute; display:block; width:9px; height:9px; bottom:-9px; right:20px;}

.chat_bubble.chatt_type {background:rgba(0, 0, 0, .85);}    /* background:#6071c5; */
.chat_bubble.now_type {background:rgba(0, 0, 0, .85);}      /* background:#f3a85a; */
.chat_bubble.nuts_type {background:rgba(0, 0, 0, .85);}     /* background:#69b169; */
.chat_bubble.now_type2 {background:rgba(0, 0, 0, .85);}     /* background:#fc7276; */

.txt_chat_last {transition:all 0.5s; position:absolute; right:79px; bottom:27px; border-radius:20px 20px 0 20px; padding:10px 15px; width:42px; min-height:22px; background:rgba(0, 0, 0, .85); z-index:9; display:none; opacity:0; box-shadow:3px 10px 18px rgba(0, 0, 0, 0.2);}
.txt_chat_last > span {display:none; font-size:13px; color:#fff !important; line-height:1.8; white-space:nowrap;}
.txt_chat_last em {display:inline-block; margin-left:10px; width:10px; height:7px; background:url("/subscribe/images/common/chattbot/ico_bubble_arrow.png") no-repeat; background-size:10px 7px;}
.txt_chat_last:before {content:""; position:absolute; display:block; width:9px; height:9px; bottom:-9px; right:20px;}

.chat_bubble.chatt_type + .txt_chat_last {background:rgba(0, 0, 0, .85);}   /* background:#6071c5; */
.chat_bubble.now_type + .txt_chat_last {background:rgba(0, 0, 0, .85);}     /* background:#f3a85a; */
.chat_bubble.nuts_type + .txt_chat_last {background:rgba(0, 0, 0, .85);}    /* background:#69b169; */
.chat_bubble.now_type2 + .txt_chat_last {background:rgba(0, 0, 0, .85);}    /* background:#fc7276; */

.dot_wrap {position:relative; height:22px;}
.chat_dot {display:inline-block; margin:0px 3px 0 3px;}
.chat_dot img {width:4px;}

.chat_dot01 {-webkit-animation-name:chat_ani_dot; animation-name:chat_ani_dot; -webkit-animation-duration:1.5s; animation-duration:1.5s; -webkit-animation-timing-function:linear; animation-timing-function:linear; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; -webkit-animation-direction:normal; animation-direction:normal;}
.chat_dot02 {-webkit-animation-name:chat_ani_dot; animation-name:chat_ani_dot; -webkit-animation-delay:0.5s; animation-delay:0.5s; -webkit-animation-duration:1.5s; animation-duration:1.5s; -webkit-animation-timing-function:linear; animation-timing-function:linear; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; -webkit-animation-direction:normal; animation-direction:normal;}
.chat_dot03 {-webkit-animation-name:chat_ani_dot; animation-name:chat_ani_dot; -webkit-animation-delay:1s; animation-delay:1s; -webkit-animation-duration:1.5s; animation-duration:1.5s; -webkit-animation-timing-function:linear; animation-timing-function:linear; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; -webkit-animation-direction:normal; animation-direction:normal;}

@keyframes chat_ani_dot {
    0%,100% {transform:scale(0.7,0.7);}
    50% {transform:scale(1.4,1.4);}
;}
@-webkit-keyframes chat_ani_dot {
    0%,100% {-webkit-transform:scale(0.7,0.7);}
    50% {-webkit-transform:scale(1.4,1.4);}
;}

.chat_mond .chat_mondi_con {position:absolute; right:-4px; top:-1px; width:73px; height:73px; overflow:hidden; background:rgba(255, 255, 255, 0);border-radius:50%; text-align:center; z-index:1;}
.chat_mond .chat_mondi_con + img {position:absolute; right:-10px; top:-2px;}
.chat_mond .chat_mondi_con .chat_mondi_con_img {opacity:0; margin:0 0 1px;}
.chat_mond .chat_mondi_con .chat_mondi_con_img img {width:95%; margin-top:8px;}
.chat_mond .chat_mondi_con .chat_mondi_con_txt {height:73px; display:table; width:100%; text-align:center;}
.chat_mond .chat_mondi_con .chat_mondi_con_txt div {display:table-cell; height:73px; width:100%; position:static; vertical-align:middle; font-size:13px; color:#fff; font-weight:700;line-height: 1.4;}
.chat_mond .chat_mondi_con > div {position:static; color:#fff; font-size:13px; opacity:0; float:inherit;}
.chat_mondi_tooltip_pa {visibility:hidden;}
.chat_mond.chat_mondi_tooltip {position:fixed; overflow:hidden; right:86px; bottom:69px; z-index:101;}
.chat_mond.chat_mondi_tooltip span {display:block; width:auto; height:73px; overflow:hidden; transform-origin:right; float:right;}
.chat_mond.chat_mondi_tooltip span img {width:auto; height:73px;}

.chatting_bot_wrap {position:fixed; left:15%; top:20%; width:70%; -webkit-transition:all 0.2s ease; transition:all 0.2s ease; -webkit-transform:scale(0,0); transform:scale(0,0); opacity:0; visibility:hidden;}
.chatting_bot_wrap.on {-webkit-transform:scale(1,1); transform:scale(1,1); opacity:1; visibility:visible; z-index:94;}/* 171221 */
.chatting_bot_wrap .chatting_quiz {width:100%; height:100%; position:relative;}
.chatting_bot_wrap .chatting_quiz a {display: block;}
.chatting_bot_wrap .chatt_btn_box  {position:absolute; top:0; right:0; z-index:100;}
.chatting_bot_wrap .chatt_btn_box a.chatting_quiz_close {display:block; padding:1.5rem;}
.chatting_bot_wrap .chatt_btn_box a.chatting_quiz_close span {display:block; width:15px; height:15px; background:url("/subscribe/images/common/btn_close03.png") no-repeat; background-size:15px; text-indent:-999em;}











/**
 * COPYRIGHT (c) MERITZ SHOP 2020
 * Author      : BHY
 * Date        : 2020-06
 * version     : Mobile-Version 1.0
 * Description : mstore chatting banner & chatbot CSS
 */

 /* 채팅배너 */
.chat_banner_warp {
    position:fixed;bottom:75px;z-index:99;
    width:92%;
    min-width:320px;
    margin: 0 4%;
    display: flex;
    justify-content: center;
    line-height: 1.4;
}

/* 랜딩페이지 하단 포지션 */
.chat_banner_warp.tmPos {
    bottom: 15px;
}

/* 몬디액션 */
.chat_banner_warp .mondi_wrap {
    position: absolute;left:13px;top:-32px;z-index:3;
    width: 60px;height:70px;
    overflow: hidden;
    background: url("/subscribe/images/common/scenario/bg_mondi_circle.png") no-repeat;
    background-size: cover;
}
.chat_banner_warp .mondi_wrap .mondi_action {
    position: absolute;left:7px;top:9px;z-index:10;
    width: 45px;height:51px;
}
.chat_banner_warp .mondi_wrap .mondi_action .mondi_body {
    position: absolute;left:0;top:0;z-index:2;
    width: 45px;height:51px;
    background: url("/subscribe/images/common/scenario/bg_mondi_body.png") no-repeat;
    background-size: cover;
}
.chat_banner_warp .mondi_wrap .mondi_action .mondi_arm {
    display: block;
    position: absolute;left:0;top:31px;z-index:1;
    width: 16px;height:10px;
    background: url("/subscribe/images/common/scenario/bg_mondi_arm.png") no-repeat;
    background-size: cover;
}

.chat_banner_warp .mondi_wrap .dot {
    position: absolute;left:0;top:0;z-index:9;
    width: 60px;height:70px;
    overflow: hidden;
    background: url("/subscribe/images/common/scenario/bg_mondi_circle.png") no-repeat;
    background-size: cover;
}
.chat_banner_warp .mondi_wrap .dot span {
    display: block;
    position: absolute;top:26px;z-index: 1;
    width: 8px;height:8px;
    background-color: #fff;
    border-radius: 10px;
    opacity: 0;
}
.chat_banner_warp .mondi_wrap .dot span:nth-child(1) {left: 10px;}
.chat_banner_warp .mondi_wrap .dot span:nth-child(2) {left: 26px;}
.chat_banner_warp .mondi_wrap .dot span:nth-child(3) {left: 42px;}


/* 몬디팔을 흔든다. */
.chat_banner_warp .mondi_wrap.active .mondi_action .mondi_arm {
    animation: mondiMove 10s ease-in-out infinite alternate;
    transform-origin: 100% 50%;
}
/* 몬디가 없어진다. */
.chat_banner_warp .mondi_wrap.active .mondi_action {
    animation: zindexMondi 10s ease-in-out 3.5s infinite forwards;
}
/* 첫번째 점이 나타난다. */
.chat_banner_warp .mondi_wrap.active .dot span:nth-child(1) {
    animation : dot_1 10s ease-in-out 3.5s infinite forwards;
}
/* 두번째 점이 나타난다. */
.chat_banner_warp .mondi_wrap.active .dot span:nth-child(2) {
    animation : dot_2 10s ease-in-out 3.6s infinite forwards;
}
/* 세번째 점이 나타난다. */
.chat_banner_warp .mondi_wrap.active .dot span:nth-child(3) {
    animation : dot_3 10s ease-in-out 3.7s infinite forwards;
}
/* 모든점이 사라진다. */
.chat_banner_warp .mondi_wrap.active .dot {
    animation: zindexDot 10s ease-in-out 4s infinite forwards;
}

@keyframes mondiMove{
    0% {transform: rotate(0deg);}
    5% {transform: rotate(-20deg);}
    10% {transform: rotate(0deg);}
    15% {transform: rotate(-20deg);}
    20% {transform: rotate(0deg);}
    25% {transform: rotate(-20deg);}
    30% {transform: rotate(0deg);}
    35% {transform: rotate(-20deg);}
    40% {transform: rotate(0deg);}
    45% {transform: rotate(-20deg);}
    50% {transform: rotate(0deg);}
    55% {transform: rotate(-20deg);}
    60% {transform: rotate(0deg);}
    65% {transform: rotate(-20deg);}
    70% {transform: rotate(0deg);}
    75% {transform: rotate(-20deg);}
    80% {transform: rotate(0deg);}
    85% {transform: rotate(-20deg);}
    90% {transform: rotate(0deg);}
    95% {transform: rotate(-20deg);}
    100% {transform: rotate(0deg);}
}
@keyframes zindexMondi {
    0% {z-index: 10; opacity: 1;}
    20% {z-index: 10; opacity: 1;}
    25% {z-index: 10; opacity: 0;}
    30% {z-index: 8; opacity: 0;}
    100% {z-index: 8;}
}
@keyframes dot_1 {
    0% {opacity: 0 }
    25% {opacity: 0 }
    28% {opacity: .25 }

    38% {opacity: 0 }
    41% {opacity: 0 }
    44% {opacity: .25 }

    54% {opacity: 0 }
    100% {opacity: 0 }
}
@keyframes dot_2{
    0% {opacity: 0 }
    28% {opacity: 0 }
    31% {opacity: .5 }

    41% {opacity: 0 }
    44% {opacity: 0 }
    47% {opacity: .5 }

    57% {opacity: 0 }
    100% {opacity: 0 }
}
@keyframes dot_3{
    0% {opacity: 0 }
    31% {opacity: 0 }
    34% {opacity: 1 }

    44% {opacity: 0 }
    47% {opacity: 0 }
    50% {opacity: 1 }

    60% {opacity: 0 }
    100% {opacity: 0 }
}
@keyframes zindexDot {
    0% {z-index: 9; opacity: 1; }
    60% {z-index: 9; opacity: 1;}
    65% {z-index: 9; opacity: 0;}
    70% {z-index: 9; opacity: 0;}
    75% {z-index: 7; opacity: 0;}
    100% {z-index: 7; opacity: 0; }
}


/* 배너내부 */
.chat_banner_warp .inner {
    width:100%;height: 45px;
    overflow: hidden;
    border:2px solid #6e8be8;
    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, .2), 0 2px 4px 0 rgba(0, 0, 0, .2);
    transition: .2s height;
}
.chat_banner_warp .inner.open {
    height: 100px;
}




/* 시나리오 */
.chat_banner_warp .inner .scenario_wrap {
    display: flex;
    align-items: center;
    height:45px;
    padding-left: 78px;
    color: #333;
    background-color: #f5f8ff;
}
.chat_banner_warp .inner .scenario_wrap .mask {
    position: relative;
    width:100%;
    height:20px;
    overflow: hidden;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

/* 시나리오 슬라이드 */
.scenario_wrap .mask .swiper-container {position: relative;}
.scenario_wrap .mask .swiper-container .swiper-wrapper {height:19px;}
.scenario_wrap .mask .swiper-container .swiper-wrapper .swiper-slide {

}
.scenario_wrap .mask .swiper-container .swiper-wrapper .swiper-slide span {
    position: relative;
    display: inline-block;
    padding:0 10px 0 0;
    width: 92%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}
.scenario_wrap .mask .swiper-container .swiper-wrapper .swiper-slide span:after {
    display: block;content: '';
    position: absolute;right:0;top:50%;z-index:1;
    width: 6px;height:9px;
    background: url("/subscribe/images/common/scenario/ico_txt_arrow.png") no-repeat;
    background-size: 6px 9px;
    transform: translateY(-50%);
}

/* 트리거 슬라이드 */
.chat_banner_warp .inner .trigger_code {display: flex;align-items: center;height: 53px;}
.chat_banner_warp .inner .trigger_code .slide_trigger {position: relative;margin:0 0 0 10px;}
.chat_banner_warp .inner .trigger_code .slide_trigger .swiper-wrapper {position: relative;}
.chat_banner_warp .inner .trigger_code .slide_trigger .swiper-wrapper .swiper-slide {
    width: auto;
}
.chat_banner_warp .inner .trigger_code .slide_trigger .swiper-wrapper .swiper-slide a {
    display: block;
    font-size: 12px;
    padding:6px 10px 6px 10px;
    color:#6e8be8;
    border:1px solid #6e8be8;
    border-radius: 50px;
}
.chat_banner_warp .inner .trigger_code .slide_trigger .swiper-wrapper .swiper-slide a > span {
    position: relative;
    display: inline-block;
    padding-right: 10px;
}
.chat_banner_warp .inner .trigger_code .slide_trigger .swiper-wrapper .swiper-slide a > span:after {
    display: block;content: '';
    position: absolute;right:0;top:50%;z-index:1;
    width: 6px;height:9px;
    background: url("/subscribe/images/common/scenario/ico_trigger_arrow.png") no-repeat;
    background-size: cover;
    transform: translateY(-50%);

}