@charset "utf-8";

/**
 * 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:15px;z-index:90;
    width:92%;
    min-width:320px;
    margin: 0 4%;
    display: flex;
    justify-content: center;
}

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

/* 몬디액션 */
.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%);
}



/* 시나리오 CSS버전
.chat_banner_warp .inner .scenario_wrap .mask ul {
    position: absolute;left:0;top:0;z-index: 1;
}

.chat_banner_warp .inner .scenario_wrap .mask.slideup ul {
    animation: slideup 10s ease-in-out infinite forwards;
}

.chat_banner_warp .inner .scenario_wrap .mask ul li span {
    position: relative;
    display: inline-block;
    padding:0 10px 0 0;
}
.chat_banner_warp .inner .scenario_wrap .mask ul li 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: cover;
    transform: translateY(-50%);
}
.chat_banner_warp .inner .scenario_wrap strong {color: #5776da;}

@keyframes slideup{
    0% {top : 0}
    39% {top : 0}
    40% {top : -19px}
    59% {top : -19px}
    60% {top : -38px}
    79% {top : -38px}
    99% {top : -38px}
    100% {top : -38px}
}
 */








/* 트리거 슬라이드 */
.chat_banner_warp .inner .trigger_warp {display: flex;align-items: center;height: 53px;}
.chat_banner_warp .inner .trigger_warp .slide_trigger {position: relative;margin:0 0 0 10px;}
.chat_banner_warp .inner .trigger_warp .slide_trigger .swiper-wrapper {position: relative;}
.chat_banner_warp .inner .trigger_warp .slide_trigger .swiper-wrapper .swiper-slide {
    width: auto;
}
.chat_banner_warp .inner .trigger_warp .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_warp .slide_trigger .swiper-wrapper .swiper-slide a > span {
    position: relative;
    display: inline-block;
    padding-right: 10px;
}
.chat_banner_warp .inner .trigger_warp .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%);

}