@charset "utf-8";

body{scrollbar-width: none;}
body::-webkit-scrollbar {display: none;}
.c-scrollbar{z-index: 99;}
.op_effect{opacity: 0; transform: translateY(70px); transition: all 1s;}
.op_effect.is-inview{opacity: 1; transform: translateY(0);}

/* 가운데 영역 */
.container{width: 1480px; margin: 0 auto;}

.op_effect2{animation: op_effect 1s both;}

@keyframes op_effect{

    0%{opacity: 0; transform: translateY(50px);}
    100%{opacity: 1; transform: translateY(0);}

}

#wrap{min-width: 1920px;}

/* section1 */
#section1{position: relative;}
#section1.active .main_img{clip-path: inset(0 0 0 0);}
.main_img{height: 100vh; clip-path: inset(0 0 100% 0); transition: all 1.3s; overflow: hidden;}
.main_img img{display: block; width: 100%; height: 100%; object-fit: cover; /*transform: scale(1.5);*/}
.main_tit{width: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); text-align: center;}
.main_tit h2{margin-bottom: 20px; font-family: 'Noto Serif KR', serif; font-weight: 500;  font-size: 0; color: #fff; letter-spacing: -2px;}
.main_tit h2 span{padding: 0 6px;}
.main_tit h2 em{display: inline-block; font-size: 60px;}
.main_tit h2 em.op_effect2:nth-child(1){animation-delay: inherit;}
.main_tit h2 em.op_effect2:nth-child(2){animation-delay: .1s;}
.main_tit h2 em.op_effect2:nth-child(3){animation-delay: .2s;}
.main_tit h2 em.op_effect2:nth-child(4){animation-delay: .3s;}
.main_tit h2 em.op_effect2:nth-child(5){animation-delay: .4s;}
.main_tit h2 em.op_effect2:nth-child(6){animation-delay: .5s;}
.main_tit h2 em.op_effect2:nth-child(7){animation-delay: .6s;}
.main_tit h2 em.op_effect2:nth-child(8){animation-delay: .7s;}
.main_tit h2 em.op_effect2:nth-child(9){animation-delay: .8s;}
.main_tit h2 em.op_effect2:nth-child(10){animation-delay: .9s;}
.main_tit h2 em.op_effect2:nth-child(11){animation-delay: 1s;}
.main_tit h2 em.op_effect2:nth-child(12){animation-delay: 1.1s;}
.main_tit h2 em.op_effect2:nth-child(13){animation-delay: 1.2s;}
.main_tit h2 em.op_effect2:nth-child(14){animation-delay: 1.3s;}
.main_tit h2 em.op_effect2:nth-child(15){animation-delay: 1.4s;}
.main_tit h2 em.op_effect2:nth-child(16){animation-delay: 1.5s;}
.main_tit h2 em.op_effect2:nth-child(17){animation-delay: 1.6s;}
.main_tit h2 em.op_effect2:nth-child(18){animation-delay: 1.7s;}
.main_tit h2 em.op_effect2:nth-child(19){animation-delay: 1.8s;}
.main_tit h2 em.op_effect2:nth-child(20){animation-delay: 1.9s;}
.main_tit h2 em.op_effect2:nth-child(21){animation-delay: 2s;}
.main_tit h2 em.op_effect2:nth-child(22){animation-delay: 2.1s;}
.main_tit h2 em.op_effect2:nth-child(23){animation-delay: 2.2s;}
.main_tit h2 em.op_effect2:nth-child(24){animation-delay: 2.3s;}
.main_tit h2 em.op_effect2:nth-child(25){animation-delay: 2.4s;}
.main_tit h2 em.op_effect2:nth-child(26){animation-delay: 2.5s;}
.main_tit h2 em.op_effect2:nth-child(27){animation-delay: 2.6s;}
.main_tit h2 em.op_effect2:nth-child(28){animation-delay: 2.7s;}
.main_tit h2 em.op_effect2:nth-child(29){animation-delay: 2.8s;}
.main_tit h2 em.op_effect2:nth-child(30){animation-delay: 2.9s;}

#section1 .main_tit .text{overflow: hidden;}
#section1 .main_tit .text span{display: block; font-size: 23px; color: #fff; animation-delay: .2s; font-weight: 300;}
/*
#section1 .slide.slick-active img{transform: scale(1); transition: all 3.5s;}
*/
#section1 .control_wrap{position: absolute; top:50%; left:0; right:0;}
#section1 .control_wrap .container{position: relative;}
#section1 .control_wrap .control{position: absolute; right:0;}
#section1 .control button{display: block; padding: 83px 83px 0 0;}
#section1 .control button:hover{}
#section1 .control button.next{margin-bottom: 8px; background: url(../images/main/main1/btn.png)no-repeat;}
#section1 .control button.prev{background: url(../images/main/main1/btn_prev.png)no-repeat; transition-delay: .15s;}
#section1 .count_wrap{position: absolute; top:50%; left:0; right:0;}
#section1 .count_wrap .container{position: relative;}
#section1 .count_wrap .count{position: absolute; top: 187px; right:26px; font-size: 15px; color: #fff; transition-delay: .3s; font-weight: 300;}
#section1 .count_wrap .count em{position: relative; margin-right: 11px; font-weight: 400;}
#section1 .count_wrap .count em::after{content: '/'; position: absolute; top: 0; right:-10px; color: #fff; font-weight: 400;}
#section1 .scroll{position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; padding-bottom: 189px;}
#section1 .scroll::after{content: ''; position: absolute; left: 5px; bottom: 0; width: 1px; height: 173px; background-color: rgba(255,255,255, 45%);}
#section1 .scroll img{display: block;}

/* header */
#header .introduce,
#header .community,
#header .reservation,
#header .skin{font-weight: 500!important;}
#header .logo{margin-right: 13px;}
#header{position: fixed; top:0; left:0; right:0; display: flex; height: 108px; padding: 0 49px 0 70px; background-color: #fff; z-index: 9;}
#header .header{flex:1; display: flex; align-items: center;}
#header nav{width: 853px; flex-shrink: 1;}
#header .logo a,
#header .logo img{display: block;}
#header .depth1{display: flex;}
#header .depth1 li a{display: block; padding: 0 20px; font-weight: 500; color: #131313; font-size: 21px; font-family: 'Noto Sans KR', sans-serif; font-weight: 700; white-space: nowrap;}
#header .box{display: flex; align-items: center;}
#header .box .link_wrap{margin-right: 63px; font-family: 'Noto Sans KR', sans-serif;}
#header .box .link_wrap > a{position: relative; display: block; height: 100%; padding: 0 0 0 28px; color: #272727; font-weight: 700;}
#header .box .link_wrap > a:hover{}
#header .box .link_wrap > a:hover::after{animation: effect .5s alternate infinite;}
#header .sns_link{position: absolute; top:50%; transform: translateY(-50%); right:67px; display: flex; align-items: center; gap: 0 10px;}
#header .sns_link li a{display: block; transition: all .3s;}
#header .sns_link li a:hover{transform: translateY(-8px);}
#header .menu_wrap{display: none; position: relative;}
#header .menu_wrap .menu{position: relative; padding: 92px 0 0; height: 570px;}
#header .menu_wrap{ position: fixed; left:0; right:0; top:109px; background-color: rgba(69,75,110,95%);  line-height: 1;}
#header .menu_wrap ul.depth01{display: flex; justify-content: center; gap: 0 15px;}
#header .menu_wrap ul.depth01 > li{flex: 1;}
#header .menu_wrap ul.depth01 > li:nth-child(4){margin-right: 50px;}
#header .menu_wrap ul.depth01 li h2 a{width: 152px; padding: 0 0 24px 0; display: block; font-size: 18px; color: #fff; font-weight: 700; border-bottom: 2px solid #797e9f;}
#header .menu_wrap ul.depth02{padding: 22px 0 0;}
#header .menu_wrap ul.depth02 li{margin-bottom: 9px;}
#header .menu_wrap ul.depth02 li h3 a{display: block; font-size: 18px; color: #a9b0db; font-weight: 500; line-height: 26px;}
#header .menu_wrap .center_link{display: flex; gap: 0 35px; position: absolute; left:0; bottom: 114px;}
#header .menu_wrap .center_link li h2 a{display: block; color: #a9b0db; font-weight: 700; font-size: 16px;}
#header .menu_wrap .login{display: flex; gap: 0 35px; position: absolute; right:0; bottom: 114px;}
#header .menu_wrap .login li a{display: block; color: #a9b0db; font-weight: 700; font-size: 16px;}
#header .menu_wrap a:hover{transform: translateX(12px); transition: all .5s;}
#header .menu_wrap .depth01 li h2 a:hover{transform: none;}
#header .menu_wrap .depth01 li h2 a:hover span{display: block; transform: translateX(12px); transition: all .5s;}

@keyframes effect{ 
    0% {
        top: 50%;
    }

    100% {
        top: 60%;
    }
}

#header .box .link_wrap > a::after{content: ''; padding: 7px 8px 0 0; position: absolute; top: 52%; right:27px; transform: translateY(-50%); background: url(../images/common/arrow1.png)no-repeat; transition: all .3s;}
#header .box .link_wrap > a.active::after{transform: translateY(-50%) rotate(180deg); animation: effect .5s alternate infinite;}
#header .box .link_wrap{position: relative; width: 156px; height: 38px; line-height: 36px; border-radius: 50px; border: 1px solid #888;}
#header .box .link_wrap .link{display: none; padding: 8px 0; position: absolute; left:0; right:0; top:42px; background-color: #f0f0f0; border-radius: 5px; z-index: 99;}
#header .box .link_wrap .link a{display: block; padding: 0 0 0 28px; color: #272727; font-weight: 700;}
#header .box .link_wrap .link a:hover{text-decoration: underline;}
#header .box .login_wrap{margin-right: 33px;}
#header .box .login_wrap a{display: block; transition: all .3s;}
#header .box .login_wrap a:hover{transform: translateY(-5px);}
#header .box .login_wrap a img{display: block;}
#header .box .sitemap{padding: 20px 43px 0 0; background: url(../images/common/sitemap.png)no-repeat; transition: all .3s;}
#header .box .sitemap:hover{transform: translateY(-5px);}

/* 외과센터 */
#wrap.st1 #header .menu_wrap{background-color: rgba(111,84,71,95%);}
#wrap.st1 .menu_wrap .center_link li h2 a,
#wrap.st1 .menu_wrap .login li a,
#wrap.st1 #header .menu_wrap ul.depth02 li h3 a{color: #c7b2aa;}
#wrap.st1 #header .menu_wrap ul.depth01 li h2 a{width: auto; border-bottom: 2px solid #c7b2aa;}
#wrap.st1 .menu_wrap ul.depth01 > li:nth-child(3){margin-right: 77px;}
#wrap.st1 .menu_wrap ul.depth01 > li:nth-child(4){margin-right: 0;}
#wrap.st1 #header .menu_wrap .menu{width: 1070px; margin: 0 auto;}

/* 내과센터 */
#wrap.st3 #header .box .link_wrap{margin-right: 187px;}
#wrap.st3 #header .menu_wrap{background-color: rgba(68,111,116,95%);}
#wrap.st3 .menu_wrap .center_link li h2 a,
#wrap.st3 .menu_wrap .login li a,
#wrap.st3 #header .menu_wrap ul.depth02 li h3 a{color: #b2dee2;}
#wrap.st3 #header .menu_wrap ul.depth01 li h2 a{width: auto; border-bottom: 2px solid #608183;}
#wrap.st3 #header .menu_wrap .menu{width: 890px; margin: 0 auto;} 
#wrap.st3 .menu_wrap ul.depth01 > li:nth-child(2){margin-right: 77px;}
#wrap.st3 .menu_wrap ul.depth01 > li:nth-child(4){margin-right: 0;}

/* 척추관절센터 */
#wrap.st4 #header .box .link_wrap{margin-right: 90px;}
#wrap.st4 #header .menu_wrap{background-color: rgba(70,64,100,95%);}
#wrap.st4 .menu_wrap .center_link li h2 a,
#wrap.st4 .menu_wrap .login li a,
#wrap.st4 #header .menu_wrap ul.depth02 li h3 a{color: #dfd4ef;}
#wrap.st4 #header .menu_wrap ul.depth01 li h2 a{width: auto; border-bottom: 2px solid #6a5f79;}
#wrap.st4 #header .menu_wrap .menu{width: 1210px; margin: 0 auto;} 
#wrap.st4 .menu_wrap ul.depth01 > li:nth-child(2){margin-right: 0;}
#wrap.st4 .menu_wrap ul.depth01 > li:nth-child(4){margin-right: 77px;}

/* 피부성형센터 */
#wrap.st5 #header .container{width: 1230px;}
#wrap.st5 .menu_wrap{background-color: rgba(124,69,94,95%)}
#wrap.st5 #header .menu_wrap ul.depth01 > li:nth-child(2){margin-right: 78px;}
#wrap.st5 #header .menu_wrap ul.depth01 > li:nth-child(4){margin-right: 0;}
#wrap.st5 #header .menu_wrap ul.depth01 > li:nth-child(1){width: 488px; flex: none;}
#wrap.st5 .menu_wrap .center_link li h2 a,
#wrap.st5 .menu_wrap .login li a,
#wrap.st5 #header .menu_wrap ul.depth02 li h3 a{color: #e3b2c9;}
#wrap.st5 #header .menu_wrap ul.depth01 li h2 a{width: auto; border-bottom: 2px solid #8e5771;}
#wrap.st5 #header .menu_wrap ul.depth02.st > li{flex:none; width: 119px;}
#wrap.st5 #header .menu_wrap ul.depth02.st > li:nth-child(5){margin: -47px 0 0 122px;}
#wrap.st5 #header .menu_wrap ul.depth02.st > li:nth-child(6){margin: -78px 0 0 118px;}
#wrap.st5 #header .menu_wrap ul.depth02.st{display: flex; gap: 0; flex-wrap: wrap; justify-content: space-between;}
#wrap.st5 #header .menu_wrap ul.depth02.st li h3{margin-bottom: 17px;}
#wrap.st5 #header .menu_wrap ul.depth02.st li h3 a{color: #fff;}
#wrap.st5 #header .menu_wrap ul.depth03 li{ margin-bottom: 16px;}
#wrap.st5 #header .menu_wrap ul.depth03 li h4 a{display: inline-block; font-size: 18px; color: #e3b2c9;}
#wrap.st5 #header .menu_wrap ul.depth03 li h4 a:hover{transform: translateX(12px); transition: all .5s;}
#wrap.st5 #header .box .link_wrap{margin-right: 159px;}
#wrap.st5 #header .menu_wrap .center_link{bottom: 70px;}

/* footer */
#footer{position: relative; padding: 130px 0 140px; line-height: 1.5; background-color: #27272c;}
#footer .footer{position: relative;}
#footer .footer_top{position: relative; gap: 0 235px; padding-bottom: 61px; display: flex; font-family: 'Noto Serif KR', serif; border-bottom: 2px solid #58585a;}
#footer .footer_top h3{font-size: 23px; color: #cec4b9; font-weight: 400;}
#footer .footer_top .footer_top_left .number{display: block; margin-bottom: 37px; font-family: 'Constantia'; font-size: 72px; color: #fff; font-weight: 400;}
#footer .footer_top .footer_top_left .kakao_wrap{display: flex; gap: 0 30px; align-items: center;}
#footer .footer_top .footer_top_left .kakao_wrap span{font-size: 20px; color: #fff;}
#footer .footer_top .footer_top_left .kakao_wrap span strong{font-weight: 400; color: #ffd800;}
#footer .footer_top .footer_top_left .kakao_wrap a{display: block; width: 152px; height: 55px; line-height: 55px; border-radius: 5px; background-color: #ffd800; font-weight: 700; color: #2c2c2c; text-align: center; font-family: 'Noto Sans KR', sans-serif;} 
#footer .footer_top .footer_top_right h3{margin-bottom: 17px;}
#footer .footer_top .footer_top_right dl{display: flex; gap: 0 30px;}
#footer .footer_top .footer_top_right dl dd span{padding-left: 14px;}
#footer .footer_top .footer_top_right dl dd em{font-weight: 500;}
#footer .footer_top .footer_top_right .footer_time_list li{font-size: 22px; color: #fff;}
#footer .footer_top .footer_top_right .footer_time_list li:last-child{margin-top: 10px; font-size: 17px;}
#footer .footer_top .footer_top_right .footer_time_list li span{font-size: 16px;}
#footer .footer_top .footer_sns{display: flex; gap: 0 40px; position: absolute; bottom: 64px ; right:6px;}
#footer .footer_top .footer_sns li a{display: block; transition: all .3s;}
#footer .footer_top .footer_sns li a:hover{transform: translateY(-7px);}           
#footer .footer_top .footer_sns li a.insta{padding: 25px 25px 0 0; background: url(../images/common/insta.jpg)no-repeat;}
#footer .footer_top .footer_sns li a.kakaotalk{padding: 22px 24px 0 0; background: url(../images/common/kakaotalk.jpg)no-repeat;}
#footer .footer_top .footer_sns li a.naverblog{padding: 22px 24px 0 0; background: url(../images/common/naverblog.jpg)no-repeat;}
#footer .footer_top .footer_sns li a.youtube{padding: 18px 26px 0 0; background: url(../images/common/youtube.jpg)no-repeat;}
#footer .footer_bottom{position: relative; padding: 40px 0 0; display: flex; justify-content: space-between;}
#footer .footer_bottom address{font-size: 15px; color: #fff; font-weight: 300; line-height: 30px;}
#footer .footer_bottom .footer_link{display: flex; gap: 0 30px; padding-top: 7px;}
#footer .footer_bottom .footer_link li a{display: block; font-size: 15px; font-weight: 300; color: #7b7b7b; transition: all .3s;} 
#footer .footer_bottom .footer_link li a:hover{color: #fff;}
#footer .footer_bottom .footer_link li a.policy{color: #fff;}
#footer .footer_bottom .copyright{position: absolute; top:77px; right:0; font-weight: 200; color:#7b7b7b; font-size: 14px;}
#footer .consulting{width: 274px; height: 83px; padding: 0 54px; display: flex; align-items: center; position: absolute; left: 50%; transform: translateX(-50%); top:-83px; border-radius: 20px 20px 0 0; background-color: #40466a; font-family: 'Noto Serif KR', serif; color: #fff; font-size: 22px; transition: all .3s;}
#footer .consulting span{position: relative; padding-right: 35px;}
#footer .consulting span::after{content: ''; position: absolute; top: 50%; transform: translateY(-50%); right:0; padding: 26px 24px 0 0; background: url(../images/common/consulting.png)no-repeat; animation: icon_effect .8s infinite alternate;}

@keyframes icon_effect{

    0%{transform: translateY(-50%) rotate(0);}
    100%{transform: translateY(-50%) rotate(30deg);}

}

/* 퀵메뉴 */
aside.close .quick_box{bottom: 137px;}
aside.close .quick_menu{opacity: 1; z-index: 99;}
aside.close .quick_box{padding: 0; height: 0;}
aside .quick_box{padding: 16px 19px 22px; width: 100%; height: 100%; position: absolute; bottom: 0; background-color: #a38964; border-radius: 50px; transition: all .7s; overflow: hidden; z-index: 9;}
aside{position: fixed; top:288px; right:38px; width: 106px; height: 533px; line-height: 1; z-index: 9999; }
aside .quick_box .top{position: relative; margin-bottom: 26px; display: block; padding:24px 0 19px; text-align: center; color: #fff; font-size: 12px; border-bottom: 1px solid #b3a187; font-family: 'Constantia';}
aside .quick_box .top::after{content: ''; width: 7px; height: 15px; position: absolute; left: 50%; transform: translateX(-50%); top:0; background: url(../n_images/common/top.png)no-repeat;}
aside .quick_box .quick_wrap{margin-bottom: 15px; height: 374px; padding:0 0 20px;   border-bottom: 2px solid #b3a187; }
aside .quick_box .quick_wrap li{margin-bottom: 33px;}
aside .quick_box .quick_wrap li:last-child{margin-bottom: 0;}
aside .quick_box .quick_wrap li a{position: relative; display: block;}
aside .quick_box .quick_wrap li a::after{content: ''; position: absolute; top:0; left:50%; transform: translateX(-50%);}
aside .quick_box .quick_wrap li a.icon1{padding-top: 46px;}
aside .quick_box .quick_wrap li a.icon1::after{width: 35px; height: 35px; background: url(../n_images/common/icon_01.png)no-repeat}
aside .quick_box .quick_wrap li a.icon2{padding-top: 46px;}
aside .quick_box .quick_wrap li a.icon2::after{width: 37px; height: 35px; background: url(../n_images/common/icon_02.png)no-repeat;}
aside .quick_box .quick_wrap li a.icon3{padding-top: 46px;}
aside .quick_box .quick_wrap li a.icon3::after{width: 37px; height: 36px; background: url(../n_images/common/icon_03.png)no-repeat;}
aside .quick_box .quick_wrap li a.icon4{padding-top: 48px;}
aside .quick_box .quick_wrap li a.icon4::after{width: 29px; height: 38px; background: url(../n_images/common/icon_04.png)no-repeat;}
aside .quick_box .quick_wrap li a span{display: block; text-align: center; color: #fff; font-weight: 500; font-size: 15px;}
aside .quick_box .close{ position: relative; display: block; padding-top: 17px; font-size: 11px; font-family: 'Constantia'; color: #070707;text-align: center;}
aside .quick_box .close::after{content: ''; position: absolute; top:0; left:50%; transform: translateX(-50%); width: 12px; height: 11px; background: url(../n_images/common/close.png)no-repeat;}
aside .quick_menu{opacity: 0; display: block; width: 137px; height: 137px; border-radius: 50%; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; background-color: #000; box-shadow: 30px 30px 42px rgba(0,0,0,.2); transition: all .5s;}
aside .quick_menu::after{content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 99px; height: 100px; background: url(../n_images/common/quick_text.png)no-repeat center; }
aside .quick_menu::before{content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: url(../n_images/common/quick_icon.png)no-repeat; }

/* 검색창 */
#consulting_wrap{position: absolute; bottom: 0; left:0; right:0; line-height: 1;}
#consulting_wrap .consulting_wrap{display: none; padding: 50px 0 0 130px; height: 245px; background-color: #3b4164;}
#consulting_wrap .consulting_wrap span{display: block; margin-bottom: 30px; font-size: 18px; font-weight: 400; color: #fff; font-family: 'Noto Serif KR', serif;}
#consulting_wrap .search_wrap{ display: flex; align-items: center; gap: 0 15px;}
#consulting_wrap .search_wrap > div{}
#consulting_wrap .search_wrap select,
#consulting_wrap .search_wrap input
{padding-left: 22px; width: 258px; height: 55px;  background-color: #fff; font-size: 18px; color: #646464;}
#consulting_wrap .search_wrap input::placeholder{color: #646464;}
#consulting_wrap .search_wrap select{-webkit-appearance:none; -moz-appearance:none; 
appearance:none; background: #fff url(../n_images/common/arrow2.png)no-repeat 230px center;}
#consulting_wrap .search_agree_box label{position: relative; padding-left: 30px; font-size: 15px; color: #9096b8; font-family: 'Noto Serif KR', serif; cursor: pointer;}
#consulting_wrap .search_agree_box label::before{content: ''; position: absolute; left:0; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; background-color: #fff;}
#consulting_wrap .search_agree_box input:checked + label::before{content: '\2713';text-align: center;}
#consulting_wrap .search_wrap a{width: 152px; height: 55px; line-height: 55px; background-color: #000; display: block; text-align: center; color: #fff; border-radius: 7px; font-weight: 700; font-size: 19px;}
.readonly{background: #eee;}

#inner_bg{position: absolute; top:0; left:0; right:0; bottom: 0; background-color: rgba(0,0,0.9); z-index: 9999;}
#inner_bg_layer{ position: absolute; left: 0; top: 0; width: 100% }
#inner_bg_frame_area{position: relative; width: 885px; margin: 0 auto; margin-top: -9999px }