@charset "utf-8";
 
/* 가운데 영역 */
.container{padding: 0 20px;}

.op_effect{animation: op_effect 1s both;}

@keyframes op_effect{

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

}


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

/* header */
#header .logo{margin-right: 10px;}
#header{position: fixed; top:0; left:0; right:0; display: flex; height: 55px; padding: 0 20px; background-color: #fff; z-index: 999;}
#header .header{flex:1; display: flex; align-items: center;}
#header nav{width: 853px; flex-shrink: 1;}
#header .logo a{display: block; padding: 17px 87px 0 0; background-image: url(../n_images/common/logo.png); background-repeat: no-repeat; background-size: auto 100%;}
#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;}
#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 3px; color: #272727; font-weight: 700; font-size: 13px; border-bottom: 2px solid #272727;}
#header .mobile_menu_btn{padding: 13px 22px 0 0; position: absolute; top: 50%; right:20px; transform: translateY(-50%); background-image: url(../n_images/common/mobile_menu_btn.png); background-repeat: no-repeat; background-size: auto 100%;}
#header .mobile_menu{position: fixed; width: 100%; top:0; right:-3000px; bottom: 0; background-color: #fff; overflow: auto;}
#header .mobile_menu .login{padding: 0 20px; display: flex; align-items: center; gap: 0 40px; height: 61px; }
#header .mobile_menu .login li a{position: relative; display: block;  font-size: 15px; font-weight: 500; color: #141414;}
#header .mobile_menu .login li a::before{content: ''; position: absolute; top:0; left:0; background-repeat: no-repeat; background-size: auto 100%;}
#header .mobile_menu .login li a.login_icon{padding-left: 29px;}
#header .mobile_menu .login li a.login_icon::before{top: 1px; padding: 21px 21px 0 0; background-image: url(../n_images/common/login.png);}
#header .mobile_menu .login li a.join{padding-left: 32px;}
#header .mobile_menu .login li a.join::before{top: 2px; padding: 18px 24px 0 0; background-image: url(../n_images/common/join.png);}
#header .mobile_menu .mobile_link02{display: flex; align-items: center; height: 98px; border-top: 1px solid #e6e6e6;}
#header .mobile_menu .mobile_link02 li{flex: 1;}
#header .mobile_menu .mobile_link02 li:last-child a{border-right: 0;}
#header .mobile_menu .mobile_link02 li a{position: relative; padding: 63px 0 0; display: block; height: 97px; border-right: 1px solid #e6e6e6; border-bottom: 1px solid #f9f9f9;}
#header .mobile_menu .mobile_link02 li a span{display: block; font-size: 15px; color: #141414; line-height: 1;  text-align: center;}
#header .mobile_menu .mobile_link02 li a::after{content: ''; position: absolute; top:0; left: 50%; transform: translateX(-50%); background-size: auto 100%; background-repeat: no-repeat;}
#header .mobile_menu .mobile_link02 li a.icon1::after{top: 21px; padding: 33px 34px 0 0; background-image: url(../n_images/common/m_icon1.png);}
#header .mobile_menu .mobile_link02 li a.icon2::after{top: 23px; padding: 32px 34px 0 0; background-image: url(../n_images/common/m_icon2.png);}
#header .mobile_menu .mobile_link02 li a.icon3::after{top: 22px; padding: 33px 34px 0 0; background-image: url(../n_images/common/m_icon3.png);}
#header .mobile_menu .mobile_link02 li a.icon4::after{top: 21px; padding: 33px 26px 0 0; background-image: url(../n_images/common/m_icon4.png);}
#header .mobile_menu nav{width: auto; border-top: 7px solid #f3f3f3;}
#header .mobile_menu .m_depth1 li h2 a{position: relative; padding: 19px 20px; display: block; height: 68px; border-bottom: 1px solid #eee; font-size: 20px; font-weight: 700; color: #141414;}
#header .mobile_menu .m_depth1 li h2 a::after{content: ''; width: 16px; height: 10px; position: absolute; top: 32px; right:20px; background: url(../n_images/common/m_arrow1.png)no-repeat;}
#header .mobile_menu .m_depth1 li h2 a.active::after{transform: rotate(180deg);}
#header .mobile_menu .mobile_menu_close{position: absolute; top:24px; right:20px; width: 14px; height: 15px; background: url(../n_images/common/m_close.png)no-repeat;}
#header .mobile_menu .m_depth2{display: none; flex-wrap: wrap;padding: 23px 0 9px; border-bottom: 1px solid #eee;}
#header .mobile_menu .m_depth2.active{display: flex; }
#header .mobile_menu .m_depth2 li{width: 43%; margin-bottom: 15px;}
#header .mobile_menu .m_depth2 li h3 a{padding: 0 0 0 20px; display: block; font-weight: 500; font-size: 15px; color: #141414; word-break: keep-all;}
#header .box .link_wrap > a::after{content: ''; padding: 7px 8px 0 0; position: absolute; top: 52%; right:3px; transform: translateY(-50%); background: url(../n_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: 100px; height: 18px; line-height: 16px;}
#header .box .link_wrap .link li{margin-bottom: 5px;}
#header .box .link_wrap .link li:last-child{margin-bottom: 0;}
#header .box .link_wrap .link{display: none; padding: 8px 0; position: absolute; left:0; right:0; top:22px; background-color: #f0f0f0; border-radius: 5px; z-index: 99;}
#header .box .link_wrap .link a{display: block; padding: 0 0 0 3px; color: #272727; font-weight: 700; font-size: 13px;}
#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(../n_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;}

/* footer */
#footer{position: relative; padding: 60px 0 50px; background-color: #27272c;}
#footer .footer{position: relative;}
#footer .footer_top{position: relative; padding-bottom: 50px; font-family: 'Noto Serif KR', serif; }
#footer .footer_top::after{content: ''; position: absolute; left: -100%; right: -100%; bottom: 0; border-bottom: 1px solid #58585a;}
#footer h3{font-size: 16px; color: #cec4b9; font-weight: 400; font-family: 'Noto Serif KR', serif;}
#footer .footer_top .footer_top_left .number{display: block; margin-bottom: 32px; font-family: 'Constantia'; font-size: 36px; color: #fff; font-weight: 400; line-height: 1;}
#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 20px;}
#footer .footer_top .footer_top_right dl dt{flex-shrink: 0; font-size: 13px;}
#footer .footer_top .footer_top_right dl dd{font-size: 13px;}
#footer .footer_top .footer_top_right dl dd span{font-size: 9px;}
#footer .footer_top .footer_top_right .footer_time_list li{padding-left: 24px; position: relative; margin-bottom: 5px; color: #fff; letter-spacing: 1px; } 
#footer .footer_top .footer_top_right .footer_time_list li::before{content: ''; position: absolute; top:3px; left:0; width: 12px; height: 13px; background: url(../n_images/common/time_icon.png)no-repeat;}
#footer .footer_top .footer_top_right .footer_time_list li:last-child{margin-bottom: 0; margin-top: 10px; font-size: 10px;}
#footer .footer_top .footer_top_right .footer_time_list li:last-child::before{display: none;}
#footer .footer_sns{position: relative;}
#footer .footer_sns::after{content: ''; position: absolute; left: -100%; right: -100%; bottom: 0; border-bottom: 1px solid #323232;}
#footer .footer_sns .rayout_box{ height: 54px; display: flex; align-items: center; justify-content: space-between;}
#footer .footer_sns .sns{display: flex; gap: 0 13px; }
#footer .footer_sns .sns li a{display: block; background-repeat: no-repeat; background-size: auto 100%;}         
#footer .footer_sns .sns li a.facebook{padding: 16px 9px 0 0; background-image: url(../n_images/common/facebook.jpg);}
#footer .footer_sns .sns li a.kakaotalk{padding: 15px 18px 0 0; background-image: url(../n_images/common/kakaotalk.jpg);}
#footer .footer_sns .sns li a.naverblog{padding: 15px 18px 0 0; background-image: url(../n_images/common/naverblog.jpg);}
#footer .footer_sns .sns li a.youtube{padding: 11px 18px 0 0; background-image: url(../n_images/common/youtube.jpg);}
#footer .footer_sns .site{margin-top: -3px; position: relative; width: 123px;}
#footer .footer_sns .site > a{position: relative; display: block;  font-size: 12px; color: #a2a2a2;}
#footer .footer_sns .site > a::after{content: ''; position: absolute; top:7px; right:0; width: 11px; height: 6px; background: url(../n_images/common/footer_icon.png)no-repeat; }
#footer .footer_sns .site > a.active::after{transform: rotate(180deg);}
#footer .footer_sns .site .view{display: none; position: absolute; top: 26px; left:0; right:0; padding: 5px 0; background-color: #555; z-index: 9; border-radius: 7px;}
#footer .footer_sns .site .view li{margin-bottom: 3px;}
#footer .footer_sns .site .view li:last-child{margin-bottom: 0;}
#footer .footer_sns .site .view a{padding-left: 5px; display: block;  font-size: 12px; color: #a2a2a2;}
#footer .footer_center{position: relative; padding: 26px 0 0;}
#footer .footer_center::after{content: ''; position: absolute; left: -100%; right: -100%; bottom: 0; border-bottom: 1px solid #323232;}
#footer .footer_center h3{margin-bottom: 12px;}
#footer .footer_center address{padding-left: 13px; position: relative; margin-bottom: 30px; font-size: 12px; color: #fff; font-weight: 200; line-height: 18px;}
#footer .footer_center address::before{content: ''; width: 9px; height: 11px; position: absolute; top:4px; left:0; background: url(../n_images/common/address_icon.png)no-repeat;}
#footer .footer_center address span{font-weight: 400; margin-right: 13px;}
#footer .footer_center .map{margin-bottom: 46px;}
#footer .footer_center .map img{display: block; margin: 0 auto;}
#footer .footer_center .footer_link{padding-bottom: 20px; display: flex; gap: 0 30px; padding-top: 7px; overflow: auto;}
#footer .footer_center .footer_link li a{display: block; font-size: 12px; font-weight: 200; color: #7b7b7b; white-space: nowrap;} 
#footer .footer_center .footer_link li a.policy{color: #fff;}
#footer .footer_bottom {padding: 18px 0 0;}
#footer .footer_bottom span{padding: 0 5px;}
#footer .footer_bottom .copyright{ font-weight: 300; color:#636363; font-size: 12px;}
#footer .footer_bottom address{font-size: 12px; color: #a4a4a4; line-height: 24px;}

/* 퀵메뉴 */
aside.active{z-index: 1;}
aside{position: fixed; bottom:180px; right:20px; z-index: 9999;}
aside .top{display: block; margin-bottom: 25px; padding: 10px 20px 0 0; background-repeat: no-repeat; background-image: url(../n_images/common/top.png); background-size: auto 100%; background-position-x: center;}
.quick_bg{display: none; position: fixed; top:0; left:0; right:0; bottom: 0; background-color: rgba(0,0,0,.8); z-index: 999;}
aside .quick_menu{position: relative; display: block; padding: 65px 65px 0 0; background-image: url(../n_images/common/quick.png); background-repeat: no-repeat; background-size: auto 100%; }
aside .quick_content {display: none; padding: 20px 20px 0; position: fixed; top:351px; left:0; right:0;  height: 315px; background-color: #fff; border-radius: 20px 20px 0 0;}
aside .quick_content .quick_link li{margin-bottom: 10px;}
aside .quick_content .quick_link li:last-child{margin-bottom: 0;}
aside .quick_content .quick_link li a{display: flex; justify-content: center; align-items: center; height: 50px; border: 1px solid #ebebeb;}
aside .quick_content .quick_link li a span{position: relative; padding-left: 24px; font-weight: 500; font-size: 13px; color: #141414;}
aside .quick_content .quick_link li a span::before{content: ''; position: absolute; top:0; left:0; background-repeat: no-repeat; background-size: auto 100%;}
aside .quick_content .quick_link li a.consulting01 span{padding-left: 24px;}
aside .quick_content .quick_link li a.consulting01 span::before{top: 1px; padding: 18px 19px 0 0; background-image: url(../n_images/common/consulting01.png);}
aside .quick_content .quick_link li a.consulting02 span{padding-left: 21px;}
aside .quick_content .quick_link li a.consulting02 span::before{top: 2px; padding: 16px 16px 0 0;
background-image: url(../n_images/common/consulting02.png);}
aside .quick_content .quick_link li a.reservation span{padding-left: 21px;}
aside .quick_content .quick_link li a.reservation span::before{top: 1px; padding: 15px 15px 0 0;
background-image: url(../n_images/common/reservation.png);}
aside .quick_content .quick_link li a.call {background-color: #181818;}
aside .quick_content .quick_link li a.call span{padding-left: 37px; color: #fff;}
aside .quick_content .quick_link li a.call span::before{padding: 23px 24px 0 0;
background-image: url(../n_images/common/call.png);}


#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 }