@charset "utf-8";

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(font/NotoSansKR-Thin.woff) format('woff'), url(font/NotoSansKR-Thin.otf) format('opentype');} 
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(font/NotoSansKR-Light.woff) format('woff'), url(font/NotoSansKR-Light.otf) format('opentype');} 
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(font/NotoSansKR-Regular.woff) format('woff'), url(font/NotoSansKR-Regular.otf) format('opentype');} 
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(font/NotoSansKR-Medium.woff) format('woff'), url(font/NotoSansKR-Medium.otf) format('opentype');} 
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(font/NotoSansKR-Bold.woff) format('woff'), url(font/NotoSansKR-Bold.otf) format('opentype');} 
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(font/NotoSansKR-Black.woff) format('woff'), url(font/NotoSansKR-Black.otf) format('opentype');}

@font-face {font-family: 'Roboto';font-style: normal;font-weight: 100;src: url(font/Roboto-Thin.ttf) format('truetype')} 
@font-face {font-family: 'Roboto';font-style: normal;font-weight: 300;src: url(font/Roboto-Light.ttf) format('truetype')} 
@font-face {font-family: 'Roboto';font-style: normal;font-weight: 400;src: url(font/Roboto-Regular.ttf) format('truetype')}
@font-face {font-family: 'Roboto';font-style: normal;font-weight: 500;src: url(font/Roboto-Medium.ttf) format('truetype')} 
@font-face {font-family: 'Roboto';font-style: normal;font-weight: 700;src: url(font/Roboto-Bold.ttf) format('truetype')} 
@font-face {font-family: 'Roboto';font-style: normal;font-weight: 900;src: url(font/Roboto-Black.ttf) format('truetype')} 

	/* fadeInUp */
.fadeInUp {
    opacity: 0;
}
.fadeInUp.loaded {
    opacity: 1;
    animation-fill-mode: both;
    animation-duration: 1s;
    animation-name: fadeInUp;
}
@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(100px)}100%{opacity:1;-webkit-transform:translateY(0)}}


/* 초기화 */
html {overflow-y:scroll;overflow-x: hidden; scroll-behavior: smooth; }
body {margin:0;padding:0;font-size:0.75em;font-family: "Pretendard Variable", Pretendard, -apple-system, 'Noto Sans KR', 'Malgun Gothic',BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;background:#fff}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em;font-family:'Noto Sans KR', 'Malgun Gothic', dotum, sans-serif;}
input, button {margin:0;padding:0;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}
textarea, select {font-size:1em;font-family:'Noto Sans KR', 'Malgun Gothic', dotum, sans-serif;}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}
*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}
input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
-webkit-box-shadow:0 0 5px #9ed4ff;
-moz-box-shadow:0 0 5px #9ed4ff;
box-shadow:0 0 5px #9ed4ff;
border:1px solid #558ab7 !important;
}
.desktop_only{display:none !important;}
.placeholdersjs {color:#aaa !important}
    
/* 전역 설정 */
.section{padding:100px 0;}
.viewport {width:100%;padding:0 6.4%;overflow:hidden;}
.gradient{background-clip: text;-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;background-image: linear-gradient(99deg, #667EEA 0%, #A65AF5 51%, #992593 100%)}
h3.title {text-align: center;font-size:7vw;font-weight:800;line-height:1.35;}

.wrap_header {position: fixed;top: 0px;z-index: 30;width: 100%;height:50px;background:#FEFEFE;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);}
.wrap_header .viewport {display: flex;align-items: center;justify-content: space-between;height:100%;}
.logo_thesalon{width:23.46%;}
.logo_thesalon svg{width:100%;}
.wrap_header .btn_join{display:inline-block;margin: 0 35px 0 15px;border-radius: 20px;background:#992593;padding:6px 13px;color:#fff;font-size:13px;font-weight:600;}
.body_intro .btn_join{display:none;}

.navi_btn{position:absolute;right:0;top:0;width:56px;height:50px;border:none;background:none;outline:none;}
.navi_btn span{position:absolute;width:20px;height:3px;background-color:#000;/* right:6.4%; */right: 24px;transition: transform .5s ease;}
.navi_btn .line1{top:17px;}
.navi_btn .line2{top:24px;/* width:13px;transition: transform .1s ease; */}
.navi_btn .line3{bottom:16px;}
.navi_btn.navi_on span{background-color:#000;}
.navi_btn.navi_on .line1{transform: translateY(5px) rotate(45deg);}
.navi_btn.navi_on .line2{transform: scaleX(0);}
.navi_btn.navi_on .line3{transform: translateY(-9px) rotate(-45deg);}

.mobile_navi{display:none;position: absolute;z-index: 29;width: 100%;padding:20px 6.4%;background: #fff;box-shadow: 0 15px 11px 0px rgba(0, 0, 0, 0.1);}
.mobile_navi a{display:block; width:100%;padding:12px 0;font-size:13px;font-weight:600;color:#000;}

/* 인트로 */
.intro_00 {margin:80px 0 150px;}
.intro_00 .title {margin:30px 0; font-size:8vw;font-weight:800;line-height:1.3;text-align:center;color:#33353A;}
.intro_go_banner{margin: 30px auto;display: flex;justify-content: center;flex-direction: column;width: 85%;}
.intro_go_banner a{position:relative;margin-bottom:26px;overflow:hidden;display:block;width:100%;border-radius:20px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);border:0 solid #fff;transition:all .2s ease-in-out;}
.intro_go_banner a:hover{border:5px solid #fff;box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);}
.intro_go_banner .flag{position:absolute; top:15px; left:15px; display:block;padding:8px 17px;border-radius:20px;background:#992593;color:#fff;font-size:14px;font-weight:700;}
.intro_go_banner h2{position:absolute; top:35%; left:0; display:block;width:100%; text-align:center;color:#fff;font-size:7vw;font-weight:800;line-height:1.4;}
.intro_go_banner img{width:100%;border-radius:20px;}

/* 광고주 */
.section_00{text-align:center;color:#343434;}
.section_00 .title{font-size:7.4vw;font-weight:800;line-height:1.4;}
.section_00 .description{margin-top: 15px;font-size:16px;font-weight:500;}
.btn_start{margin:50px auto 0;display: inline-block;border-radius: 30px;background:#992593;padding:17px 9.8%;color:#fff;font-size:16px;font-weight:700;box-shadow: 0 3px 15px rgba(0, 0, 0, 0.25);}
.btn_start strong{font-weight:800;}
.wrap_video{overflow:hidden;margin-top:60px;padding-left:20px}
.wrap_video img{width:200%;}
.video_01{float:left;width:36.73%;}
.video_02{float: left;margin-left: 17px;width:57.34%}
.video_01 video{width:100%;}
.video_02 video{margin-top: 15px;width: 166%;box-shadow: 0 0 20px rgba(0, 0, 0, 0.16);border-radius:10px;}

.section_01{background:#F8F7F7;color:#000;}
.section_01 .title{text-align: center;font-size:7vw;font-weight:800;line-height:1.3;}
.section_01 .description{margin-top:45px;font-size:18px;font-weight:600;line-height:1.6;}
.section_01 .list{display: flex;flex-direction: column;}
.section_01 .item{margin: 22px 0;width:100%;height:290px;padding:32px;border-radius:15px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);}
.section_01 .txt{}
.section_01 .txt .gradient{font-weight:900;}
.section_01 .item_01{background:url(../images/sec01_bg01.svg) 90% bottom no-repeat #fff;background-size: 47.7%;}
.section_01 .item_02{background:url(../images/sec01_bg02.svg) 80% bottom no-repeat  #fff;background-size: 47.7%;}
.section_01 .item_03{text-align:right;background:url(../images/sec01_bg03.svg) 18% bottom no-repeat  #fff;background-size:72.7%}
.section_01 .item_04{text-align:right;background:url(../images/sec01_bg04.svg) 0 bottom no-repeat  #fff;background-size: 68.7%;}

.section_02 .description{margin-top:100px;}
.section_02 .item{margin-bottom:50px;display:flex;flex-direction: column;}
.section_02 .item:last-child{margin-bottom:0;}
.section_02 .area_txt{width:486px;}
.section_02 h4{font-size:6.7vw;font-weight:700;line-height:1.38;}
.section_02 .txt{margin-top:15px;font-size:4.7vw;font-weight:500;line-height:1.57}
.section_02 .area_img{width: 100%;margin-top: 30px;}
.section_02 .area_img img{width:100%;}

.section_03{background:#F8F7F7;color:#000;text-align:center;}
.section_03 .viewport{padding-bottom: 50px;}
.section_03 .description{margin-top:78px;}
.swiper-container-1{position: relative;}
.section_03 .swiper-container-1 .swiper-pagination{bottom: -37px;}
.section_03 .list{display:flex;justify-content: space-between;}
.section_03 .item{width:84%;padding: 44px 33px 70px;background:#fff;border-radius:15px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);}
.section_03 .item:first-child{ margin-left:6.4%;}
.section_03 .item:last-child{margin-right:6.4%;padding-bottom:50px;}
.section_03 .area_txt{width: 100%;}
.section_03 dt{text-align:left;font-size:4vw; font-weight:500;}
.section_03 .txt{margin-top:33px;font-size:4.8vw;font-weight:600;line-height:1.57}
.section_03 .area_img{margin-top:33px;}
.section_03 .area_img img{width:90%;}
.section_03 .item:last-child .area_img img{width:60%;}


.section_04{background:#151516;color:#fff;text-align:center;}
.section_04 .txt {margin-top:28px;font-size:7vw;font-weight:800;line-height: 1.5;}
.section_04 .txt_02 {margin-top:60px;}
.section_04 .txt_06 {margin-top: 20px;}
.section_04 .txt_06 strong {font-size: 8.5vw;font-weight: 900;letter-spacing: -0.0825em;}

.section_05{/* padding:192px 0 166px; */background:url(../images/section05_bg@2x.png) center 0 no-repeat;background-size:cover;}
.section_05 .title{text-align:left;color:#fff;}
.section_05 .txt{margin-top:28px;font-size: 4.8vw;font-weight: 500;color: #fff;}
.wrap_partner{margin-top:50px;}
.swiper-container-2 .swiper-wrapper{align-items: center;}
.swiper-container-2 .swiper-slide{text-align:center;}
.btn_download{margin:50px auto 0 ; display: block;width:70%;text-align:center;padding:17px 0;color:#fff;font-size:20px;font-weight:700;border-radius: 30px;background:#992593;box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-150px * 3));
  }
}
.slider_partner {
 /*  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125); */
  height: 70px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.slider_partner::before, .slider_partner::after {
  /* background: linear-gradient(to right, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 100%); */
  content: "";
  height: 70px;
  position: absolute;
  width: 150px;
  z-index: 2;
}
.slider_partner::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.slider_partner::before {
  left: 0;
  top: 0;
}
.slider_partner .slide-track {
  animation: scroll 40s linear infinite;
  display: flex;align-items:center;
  width: calc(150px * 6);
}
.slider_partner .slide {
  height: 70px;
  width: 150px;
    display: flex;align-items: center;
    justify-content: center;
}


.section_06 .list{margin-top:45px;display:flex;flex-direction: column;}
.section_06 .item{margin-bottom:65px;width:100%;background:#fff;border-radius:15px;}
.section_06 .item img{width:100%;box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);}
.section_06 .item .txt{margin-top:20px;font-size:5vw;font-weight:600;}
.section_06 .item .txt em{font-size:4.2vw;font-weight:400;font-style: normal;line-height: 1.7;}

.section_07{overflow: hidden;background:#F8F7F7;}
.section_07 .title{text-align:left;}
.viewport-section_07{margin-left: 6.4%;overflow: hidden;}
.section_07 .swiper-container{position: relative;margin-top:45px;}
.section_07 .swiper-slide{width:281px;}
.section_07 .area_img{position: relative;}
.section_07 .layer_info{position: absolute;top: 22px;left: 20px;}
.section_07 .flag_info{margin-left:8px;padding: 5px 13px;background: rgba(0,0,0,.5);color: #fff;font-style: normal;font-size: 12px;font-weight: 600;border-radius: 15px;border: 1px solid #fff}
.section_07 .swiper-slide .thumb_img{width: 100%;border-radius:20px;}
.section_07 .subject{margin-top:20px;font-size:20px;font-weight:600}
.section_07 .description{margin-top:14px;font-size:16px;font-weight:500;line-height:1.5}
.section_07 .swiper-pagination{display:none; bottom: -37px;}


.section_last{background:url(../images/section_last_bg.png) center 0 no-repeat;background-size:cover;color:#fff;text-align:center;}
.section_last .title{font-size:7.8vw;}
.section_last .txt{margin-top:34px;font-size:4.1vw;font-weight:500;}
.section_last .wrap_btn{margin-top:50px;display:flex;justify-content:space-between;}
.section_last .btn_ask{display: inline-block;width: 37.69%;height: 45px;line-height: 45px;border-radius: 30px;background: #fff;color: #000;font-size: 3.8vw;font-weight: 700;box-shadow: 0 3px 15px rgba(0, 0, 0, 0.7);}
.section_last .btn_start{margin:0;padding:0;display: inline-block;width: 58%;height: 45px;line-height: 45px;border-radius: 30px;font-size: 3.8vw;}

.section_footer{margin:40px auto 0;width:100%;padding:0 6.4%;}
.footer_menu a{margin-top:15px;display:block;font-size:16px;font-weight:700;color:#656565;}
.footer_address{margin:34px 0 0;font-style: normal;font-size:13px;font-weight:400;color:#656565;}
.footer_address span{margin:0 25px 10px 0;display:block;}
.section_footer .copyright{margin:15px 0 35px;}


.contact_pop_cover{position:fixed;top: 0;left: 0;right:0;bottom:0;z-index:1000;background-color: rgba(0,0,0,0.68);display:none;}
.contact_pop{position: fixed;z-index:1001;left: 0;top: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.68);display:none;}
.contact_pop .inner{overflow-y: scroll;width:100%;height:100%;padding:50px 4.9919% 100px;}
.contact_pop .container{width:100%;background-color:#fff;border-radius:5px;padding:20px;position:relative;}
.contact_pop .contact_pop_close{position:absolute;top: -36px;right: -6px;width:40px;height:40px;background:url(../images/btn_pop_close.svg);background-size:100%;border:none;}
.sound_only{font-size:0;}

.contact_pop .title{text-align:center;font-size:18px;color:#424242;}
.contact_pop .form_wrap{margin-top: 20px;}
.contact_pop .form_wrap .form_con + .form_con{margin-top:10px;}
.contact_pop .form_wrap .form_con:after{content:'';display:block;clear:both;}
.contact_pop .form_wrap .form_con li{float:Left;}
.contact_pop .form_wrap .form_con li + li{margin-top: 10px;}
.contact_pop .form_wrap .form_con li.con1{width:100%;}
.contact_pop .form_wrap .form_con li.con2{width:100%;}
.contact_pop .form_wrap .form_con li.con3{width:100%;}
.contact_pop .form_wrap .form_con .tt{/* font-size:15px */font-size:13px;;color:#424242;font-weight:600;margin-bottom:5px;}
.contact_pop .form_wrap .form_con .input{width:100%;height:35px;padding-left:5px;border:1px solid #424242;font-size:13px;color:#636363;}

.contact_pop .form_wrap .form_con textarea{width:100%;height:120px;border:1px solid #424242;font-size:13px;color:#636363;padding:5px;resize:none;}
.contact_pop .form_wrap .form_check{margin-top:20px;display: flex;align-items: center;}
.contact_pop .form_wrap .form_check input{float:left;}
.contact_pop .form_wrap .form_check label{display:block;margin-left:10px;font-size:12px;color:#636363;letter-spacing:-0.0825em}

.contact_pop .form_wrap .submit{display:block;width:100%;border:none;background-color:#6E2679;height:50px;font-size:20px;color:#fff;text-align:center;font-weight:500;margin-top:35px;}


.download_pop{position: fixed;z-index:1001;left: 0;top: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.68);display:none;}
.download_pop .inner{overflow-y: scroll;width:100%;height:100%;padding:50px 4.9919% 100px;}
.download_pop .container{width:100%;background-color:#fff;border-radius:5px;padding:20px;position:relative;}
.download_pop .download_pop_close{position:absolute;top: -36px;right: -6px;width:40px;height:40px;background:url(../images/btn_pop_close.svg);background-size:100%;border:none;}
.download_pop .title{text-align:center;font-size:18px;color:#424242;}
.download_pop .form_wrap{margin-top: 20px;}
.download_pop .form_wrap .form_con + .form_con{margin-top:10px;}
.download_pop .form_wrap .form_con:after{content:'';display:block;clear:both;}
.download_pop .form_wrap .form_con li{float:Left;}
.download_pop .form_wrap .form_con li + li{margin-top: 10px;}
.download_pop .form_wrap .form_con li.con1{width:100%;}
.download_pop .form_wrap .form_con li.con2{width:100%;}
.download_pop .form_wrap .form_con li.con3{width:100%;}
.download_pop .form_wrap .form_con .tt{/* font-size:15px */font-size:13px;;color:#424242;font-weight:600;margin-bottom:5px;}
.download_pop .form_wrap .form_con .input{width:100%;height:35px;padding-left:5px;border:1px solid #424242;font-size:13px;color:#636363;}
.download_pop .form_wrap .form_con textarea{width:100%;height:120px;border:1px solid #424242;font-size:13px;color:#636363;padding:5px;resize:none;}
.download_pop .form_wrap .form_check{margin-top:20px;display: flex;align-items: center;}
.download_pop .form_wrap .form_check input{float:left;}
.download_pop .form_wrap .form_check label{display:block;margin-left:10px;font-size:12px;color:#636363;letter-spacing:-0.0825em;word-break:keep-all;}
.download_pop .form_wrap .noti_comm{margin-top:10px;word-break:keep-all;}
.download_pop .form_wrap .noti_comm span{color:red;}
.download_pop .form_wrap .submit{display:block;width:100%;border:none;background-color:#6E2679;height:50px;font-size:20px;color:#fff;text-align:center;font-weight:500;margin-top:35px;}



.download_info_app_wrap{display:none;overflow-y: scroll;position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(110,38,121,0.8);z-index:1009;}
.download_info_app_wrap .inner{width:100%;height:100%;display: flex;flex-direction: column;justify-content: flex-start;}
.download_info_app_wrap .content_box{    display: flex;align-items: center;justify-content: center;height: 100%;width:100%;margin:60px auto;border-radius:5px;}
.download_info_app_wrap .content_box .__inner{position:relative;display: flex;flex-direction: column;width: 96%;height: 237px;border-radius: 10px;background: #fff;justify-content: flex-start;align-items: center;}
.download_info_app_wrap .btn_close{position:absolute;top: -51px;right: -8px;}
.download_info_app_wrap .btn_close img{width:50px;height:50px;}
.download_info_app_wrap .content_box .__inner h3 {font-size: 18px;font-weight: 500;text-align:center;padding:50px 0 20px;}
.download_info_app_wrap .inner li {float:left;padding-bottom:30px;} 
.download_info_app_wrap .inner li img{width:100%;}
.download_info_app_wrap a.btn_app{display: flex;align-items: center;justify-content: center;margin:5px; color: #fff;background-color: #000;padding: 10px 20px;font-weight: 700;font-size: 16px;line-height: 30px;border-radius: 50px;}
.download_info_app_wrap a.iphone:before{content:'';display:block;clear:both;width: 26px;height: 33px;background: url(../images/logo_apple.svg) 0 0 no-repeat;margin-right:10px;background-size:100%;}
.download_info_app_wrap a.android:before{content:'';display:block;clear:both;width: 26px;height: 25px;background: url(../images/logo_android.svg) 0 0 no-repeat;margin-right:15px; background-size:100%;}

.clogin_mobile_wrap{display:none;overflow-y: scroll;position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(110,38,121,0.8);z-index:1009;}
.clogin_mobile_wrap .inner{width:100%;height:100%;display: flex;flex-direction: column;justify-content: flex-start;}
.clogin_mobile_wrap .content_box{display: flex;align-items: flex-start;justify-content: center;height: 100%;width:100%;margin:60px auto;border-radius:5px;}
.clogin_mobile_wrap .content_box .__inner{position:relative;display: flex;flex-direction: column;width: 96%;height: 147px;border-radius: 10px;background: #fff;justify-content: flex-start;align-items: center;}
.clogin_mobile_wrap .btn_close{position:absolute;top: -51px;right: 12px;}
.clogin_mobile_wrap .btn_close img{width:30px;height:30px;}
.clogin_mobile_wrap .content_box .__inner h3 {font-size: 18px;font-weight: 500;line-height: 1.5;text-align:center;padding:50px 0 20px;}
.clogin_mobile_wrap .inner li {float:left;padding-bottom:30px;} 
.clogin_mobile_wrap .inner li img{width:100%;}
.clogin_mobile_wrap a.btn_app{display: flex;align-items: center;justify-content: center;margin:5px; color: #fff;background-color: #000;padding: 10px 20px;font-weight: 700;font-size: 16px;line-height: 30px;border-radius: 50px;}
.clogin_mobile_wrap a.iphone:before{content:'';display:block;clear:both;width: 26px;height: 33px;background: url(../images/logo_apple.svg) 0 0 no-repeat;margin-right:10px;background-size:100%;}
.clogin_mobile_wrap a.android:before{content:'';display:block;clear:both;width: 26px;height: 25px;background: url(../images/logo_android.svg) 0 0 no-repeat;margin-right:15px; background-size:100%;}


/* quick 고정 */
.body_intro .side_quick { bottom: 80px;display:none;}
.side_quick {
	position: fixed;
	bottom: 80px;
    right: 17px;
	width: 172px;
	text-align: center;
	z-index: 9999999;
}
.side_quick .menu-list {margin-bottom: 12px; position: relative; z-index: 200; }
.side_quick .menu-list .inner {position: relative;}
.side_quick .menu-list .btn-floating {
	position: relative;
	font-size: 0;
	display: block;
	width: 55px; height: 55px;
	border-radius: 50%;
	background: linear-gradient(99deg, #667EEA 0%, #A65AF5 51%, #992593 100%);
	background-size: cover;
	overflow: hidden;
	z-index: 2;
}
.side_quick .menu-list .btn-floating span {
	position: relative;
	display: block;
	height: 100%;
	background-image: url('../images/btn_quick.svg');
	background-size: cover;
	transition: transform .35s;
	font-size: 0;
}
.side_quick .menu-list .on .btn-floating span {transform: rotate(135deg);}
.side_quick .menu-list .inner,
.side_quick .menu-list ul {
	display: flex;
	align-items: flex-end;
	flex-direction: column-reverse;
}
.side_quick .menu-list li {
	position: relative;
	opacity: 1;
	margin-bottom: 12px;
}
.side_quick .menu-list li a {
	position: absolute;
	top: 0; right: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
	border-radius: 64px;
	background: #fff;
	background-repeat: no-repeat;
	background-size: 100%;
	font-size: 0;text-indent:-9999px;
	transition: width .35s;
}
.side_quick .menu-list li a:before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	background-repeat: no-repeat;
	background-size: auto 100%;
	z-index: 1;
}
.side_quick .menu-list li,
.side_quick .menu-list li a,
.side_quick .menu-list li a:before {
	width: 172px; 
	height: 64px; 
	box-sizing: border-box;
	transition: all 0.3s;
}
.side_quick .menu-list li a:hover,
.side_quick .menu-list li a:before {width: 172px;}

.side_quick .menu-list li.menuAr a {padding: 0;}
.side_quick .menu-list li.menuAr a:hover {width: 64px;}

.side_quick .menu-list li.menu01 a:before {background: 0 0 url('../images/quick_15off.svg') no-repeat;}
/* .side_quick .menu-list li.menu01 a {background: linear-gradient(to right, #FF7A00 80%, #EA002C);} */

.side_quick .menu-list li.menu02 a:before {background: 0 0 url('../images/quick_chatbot.svg?1') no-repeat;}
/* .side_quick .menu-list li.menu02 a {background: linear-gradient(to right, #EA002C 80%, #FF7A00);} */

.button-child > p {
	font-size:14px;
	font-weight: 700;
	color:#fff;
	margin-left:10px;
	z-index: 10;
}
.button-child > p > span {
	display:block;
	font-size:10px;
	font-weight: 400;
}

  .side_quick .menu-list .menu01 a {
	border: 1px solid #992593;
}
.side_quick .menu-list .menu02 a {
border: 1px solid #667EEA;
}
.side_quick .menu-list .menu03 a {
	display: none;
}
.side_quick .menu-list .on .menu01 a {
	display: flex;
}
.side_quick .menu-list .on .menu02 a {
	display: flex;
}
.side_quick .menu-list .on .menu03 a {
	display: flex;
}

/* quick 열고닫기 버전*/
.body_intro .floating-sticky { bottom: 80px;}
.floating-sticky {
	position: fixed;
	bottom: 80px;
    right: 17px;
	width: 172px;
	text-align: center;
	z-index: 9999999;
}
.floating-sticky .menu-list {margin-bottom: 12px; position: relative; z-index: 200; }
.floating-sticky .menu-list .inner {position: relative;}
.floating-sticky .menu-list .btn-floating {
	position: relative;
	font-size: 0;
	display: block;
	width: 55px; height: 55px;
	border-radius: 50%;
	background: linear-gradient(99deg, #667EEA 0%, #A65AF5 51%, #992593 100%);
	background-size: cover;
	overflow: hidden;
	z-index: 2;
}
.floating-sticky .menu-list .btn-floating span {
	position: relative;
	display: block;
	height: 100%;
	background-image: url('../images/btn_quick.svg');
	background-size: cover;
	transition: transform .35s;
	font-size: 0;
}
.floating-sticky .menu-list .on .btn-floating span {transform: rotate(135deg);}
.floating-sticky .menu-list .inner,
.floating-sticky .menu-list ul {
	display: flex;
	align-items: flex-end;
	flex-direction: column-reverse;
}
.floating-sticky .menu-list li {
	position: relative;
	opacity: 0;
	margin-bottom: -64px;
	transition: margin .5s, opacity .5s;
}
.floating-sticky .menu-list .on li {
	opacity: 1;
	margin-bottom: 12px;
}
.floating-sticky .menu-list li a {
	position: absolute;
	top: 0; right: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
	border-radius: 64px;
	background: #fff;
	background-repeat: no-repeat;
	background-size: 100%;
	font-size: 0;text-indent:-9999px;
	transition: width .35s;
}
.floating-sticky .menu-list li a:before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	background-repeat: no-repeat;
	background-size: auto 100%;
	z-index: 1;
}
.floating-sticky .menu-list li,
.floating-sticky .menu-list li a,
.floating-sticky .menu-list li a:before {
	width: 172px; 
	height: 64px; 
	box-sizing: border-box;
	transition: all 0.3s;
}
.floating-sticky .menu-list li a:hover,
.floating-sticky .menu-list li a:before {width: 172px;}

.floating-sticky .menu-list li.menuAr a {padding: 0;}
.floating-sticky .menu-list li.menuAr a:hover {width: 64px;}

.floating-sticky .menu-list li.menu01 a:before {background: 0 0 url('../images/quick_15off.svg') no-repeat;}
/* .floating-sticky .menu-list li.menu01 a {background: linear-gradient(to right, #FF7A00 80%, #EA002C);} */

.floating-sticky .menu-list li.menu02 a:before {background: 0 0 url('../images/quick_chatbot.svg?1') no-repeat;}
/* .floating-sticky .menu-list li.menu02 a {background: linear-gradient(to right, #EA002C 80%, #FF7A00);} */

.button-child > p {
	font-size:14px;
	font-weight: 700;
	color:#fff;
	margin-left:10px;
	z-index: 10;
}
.button-child > p > span {
	display:block;
	font-size:10px;
	font-weight: 400;
}

  .floating-sticky .menu-list .menu01 a {
	display: none;border: 1px solid #992593;
}
.floating-sticky .menu-list .menu02 a {
	display: none;border: 1px solid #667EEA;
}
.floating-sticky .menu-list .menu03 a {
	display: none;
}
.floating-sticky .menu-list .on .menu01 a {
	display: flex;
}
.floating-sticky .menu-list .on .menu02 a {
	display: flex;
}
.floating-sticky .menu-list .on .menu03 a {
	display: flex;
}

/* .floating-sticky .btn-gotop {
	width: 54px; height: 54px;
	background: #000;
	border-radius: 4px;
	display: none;
}
.floating-sticky .btn-gotop.show {display: inline-block;}
.floating-sticky .btn-gotop span {
	position: relative;
	display: block;
	height: 100%;
	background: url('') no-repeat 50% 50%;
	font-size: 0;
} */

@media(min-width:900px){
	/* 채팅창 위치 */
	typebot-bubble::part(bot) {
	  right: 210px;
	  bottom: 60px;
	}
}

typebot-bubble::part(button) {
  display:none;
}

typebot-bubble::part(preview-message) {
max-width: 256px;
right:85px;
bottom:94px;
}
.close_chat{position: fixed;
    right: 170px;
    bottom: 750px;
    z-index: 42424243;}
.close_chat .btn{
width: 50px;
    height: 50px;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 50%;
    font-size: 0;}
	.close_chat .btn:after{content:'';display:inline-block;content: "\00d7"; font-size:40px;}

@media(max-width:899px){
	.close_chat{
		right: 19px;
		bottom: 19px;
		}
	.close_chat .btn{
	width: 50px;
		height: 50px;
		background: #fff;
		border: 1px solid #dedede;
		border-radius: 50%;
		font-size: 0;}
		.close_chat .btn:after{content:'';display:inline-block;content: "\00d7"; font-size:33px;}

}

.btn-gotop{position: fixed;
    bottom: 18px;
    right: 20px;
    width: 50px;
    height: 50px;
    line-height: 46px;
    border: 2px solid rgba(51, 51, 51, 0.2);
    color: rgba(51, 51, 51, 0.7);
    text-align: center;
    font-size: 15px;
    z-index: 99999;
    background: rgba(255,255,255,0.5);}

.fa-arrow-up:before {
    content: "\f062";
}
.btn-gotop:hover {
    border-color: rgba(51, 51, 51, 0);
    background: rgba(51, 51, 51, 0.5);
    color: #fff;
}