body {font-family:'NotoKr', sans-serif;letter-spacing: -0.7px;max-width: 1024px;margin: 0 auto}
.rp_img {width: 100%;height: auto}
.hf_img {width: 50%;height: auto}
.d_b {display: block}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}

#header {position:fixed;width: 100%;max-width:1024px;height:60px;background: #333;z-index:9999}
#header #mn_btn {position: absolute;top: 20px;left:15px;cursor: pointer}
#header #mn_btn span {position: absolute;width:28px;height:2px;background: #fe9d33;display: block;-webkit-transition: .3s;transition: .3s}
#header #mn_btn span:nth-child(1) {top:0}
#header #mn_btn span:nth-child(2) {top:9px}
#header #mn_btn span:nth-child(3) {top:18px}
#header h1 {position: absolute;top:15px;left: 50%;transform: translateX(-50%);width: 35%;}
#header h1:before {content: '';display: inline-block;height: 100%;vertical-align: middle}
#header h1 a {display: inline-block;vertical-align: middle}
#header h1 a img {width:100%}
#header .top_tel {position: absolute;width: 35px;height: 35px;top: 12px;right: 10px}

#nav {overflow: scroll;position: fixed;top: 0;padding-top: 60px;background: #fff;height: 100%;z-index:9998;-webkit-box-sizing: border-box;box-sizing: border-box;margin-left: -365px;-webkit-transition: margin .4s;transition: margin .4s;display: none}
#nav .nav_con > li {}
#nav .nav_con > li h3 {color: #333;font-weight: 400;font-size: 16px;display: block;border-top: 1px solid #ccc;padding: 12px 0 12px 15px;-webkit-transition: background .3s , color .3s;transition: background .3s , color .3s;cursor: pointer}
#nav .nav_con > li.on h3 {background: #fe9d33;color: #fff}
#nav .nav_con > li:last-child {border-bottom: 10px solid #fe9d33}
#nav .nav_con .sm_mn {border-top: 1px solid #ccc;background: #efefef;;display: none;}
#nav .nav_con .sm_mn li {}
#nav .nav_con .sm_mn li a {color: #383838;padding: 10px 0 10px 15px;display: block;font-size: 14px;border-bottom: 1px solid #fff}
#nav .nav_con .sm_mn li:last-child a {border-bottom: 0}
#head_wrap.on #nav {margin-left: 0;max-width: 360px;min-width: 280px;width: 70%;}
#head_wrap.on .dark_bg {position: fixed;width: 100%;height: 100%;-webkit-transition: .4s;transition: .4s;background: rgba(0,0,0,0.7);z-index:9991;}
#head_wrap.on #mn_btn span:nth-child(1) {top:8px;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
#head_wrap.on #mn_btn span:nth-child(2) {-webkit-transform: rotate(90deg);transform: rotate(90deg);opacity: 0}
#head_wrap.on #mn_btn span:nth-child(3) {top:8px;-webkit-transform: rotate(135deg);transform: rotate(135deg);}
#nav .menuNo, #m_snb .menuNo {display:none}

.footerTop img {width:100%}

#footer {background: #333;}
#footer .ft1 {}
#footer .ft1 a {float:left;width:25%;text-align:center}
#footer .ft1 a img {width:100%;}
#footer .ft2 {text-align: center;padding:30px 15px}
#footer .ft2 a img {width:40%;margin-bottom: 20px;}
#footer .ft2 p {font-size: 13px;line-height: 20px;color: #fff;word-break: keep-all}
#footer .ft2 p a{color:#eee;font-size: 12px;letter-spacing: 0;}
#footer .ft2 p.copy {padding: 10px 0 8px}
#footer .ft2 #made_core {margin-top: 5px;font-size: 12px;letter-spacing: 0;}
#footer .ft2 #made_core i {font-style:normal}

/*메인슬라이드*/
.main_pg #vis {height:100vh}
.main_pg #vis .swiper-slide {overflow: hidden}
.main_pg #vis .control {position: absolute;left: 50%;bottom: 35px;transform:translateX(-50%);z-index: 9;}
.main_pg #vis .control img {width:30px;cursor:pointer}
.main_pg #vis .swiper-slide .wrap {position:relative;width:100%;height:100%;margin: 0 auto;padding-top:120px}
.main_pg #vis .swiper-slide .wrap img {width:100%}
.main_pg #vis .sw1 {background: url('../images/visual/01/bg.jpg') no-repeat center;background-size:cover;height:100%}
.main_pg #vis .sw1 .sw_a {opacity: 0;animation:none}
.main_pg #vis .sw1 .wrap div {position:relative;}
.main_pg #vis .sw1 .wrap div .sw_a3 {position:absolute;top:0;left:0;}
.main_pg #vis .sw1 .wrap div .sw_a3_2 {position:absolute;top:0;left:0;}
.main_pg #vis .sw1 .sw_a4 {padding-top:35px}
.main_pg #vis .sw1 .wrap .sw_a5 {position:absolute;bottom:0;left:0;width:50%;}
.main_pg #vis .sw1 .wrap .sw_a6 {position:absolute;bottom:0;right:0;width:50%}

.main_pg #vis .sw1.on .sw_a1 {animation: vis_ani1_1 .5s .3s 1 ease forwards;}
.main_pg #vis .sw1.on .sw_a2 {animation: vis_ani1_1 .5s .6s 1 ease forwards;}
.main_pg #vis .sw1.on .sw_a3 {animation: vis_ani1_2 .5s 1s 1 ease forwards}
.main_pg #vis .sw1.on .sw_a3_2 {animation: vis_ani1_3 .5s 1.3s 1 ease forwards;}
.main_pg #vis .sw1.on .sw_a4 {animation: vis_ani1_4 .5s 1.7s 1 ease forwards;}
.main_pg #vis .sw1.on .sw_a5 {animation: vis_ani1_2 .5s 2s 1 ease forwards;}
.main_pg #vis .sw1.on .sw_a6 {animation: vis_ani1_2 .5s 2.3s 1 ease forwards;}

@keyframes vis_ani1_1 {
    0% {transform:translateY(-20%);opacity: 0}
    100% {transform:translateY(0);opacity: 1}
}
@keyframes vis_ani1_2 {
    0% {opacity: 0}
    100% {opacity: 1}
}
@keyframes vis_ani1_3 {
    0% {top:30px;opacity: 0}
    100% {top:0;opacity: 1}
}
@keyframes vis_ani1_4 {
    0% {transform:translateY(20%);opacity: 0}
    100% {transform:translateY(0);opacity: 1}
}



.main_pg #vis .sw2 {background: url('../images/visual/02/bg.jpg') no-repeat center;background-size:cover;height:100%}
.main_pg #vis .sw2 .sw_a {opacity: 0;animation:none}
.main_pg #vis .sw2 .visInner {position:relative;opacity: 0;animation: none}
.main_pg #vis .sw2 .sw_a.sw_a4, .main_pg #vis .sw2 .sw_a.sw_a5 {position: absolute;top: 0;left: 0;}

.main_pg #vis .sw2.on .sw_a1 {animation: vis_ani2_1 .5s .3s 1 ease forwards;}
.main_pg #vis .sw2.on .sw_a2 {animation: vis_ani2_2 .5s .6s 1 ease forwards;}
.main_pg #vis .sw2.on .sw_a3 {animation: vis_ani2_3 .5s .9s 1 ease forwards;}
.main_pg #vis .sw2.on .visInner {animation: vis_ani1_2 .5s 1.2s 1 ease forwards;}
.main_pg #vis .sw2.on .visInner .sw_a4 {animation: vis_ani2_3 .5s 1.2s 1 ease forwards;}
.main_pg #vis .sw2.on .visInner .sw_a5 {animation: vis_ani2_1 .5s 1.5s 1 ease forwards;}


@keyframes vis_ani2_1 {
    0% {transform:translateX(-20px);opacity: 0}
    100% {transform:translateX(0);opacity: 1}
}
@keyframes vis_ani2_2 {
    0% {transform:translateX(20px);opacity: 0}
    100% {transform:translateX(0);opacity: 1}
}
@keyframes vis_ani2_3 {
    0% {transform:translateY(-20px);opacity: 0}
    100% {transform:translateY(0);opacity: 1}
}




.main_pg {background: #ffffff;}
.main_pg .cont01 img, .main_pg .contVideo img {width:100%}
.main_pg #cont02 {background-color:#efefef;padding-bottom:20px}
.main_pg #cont02 .swiper-slide img {width:100%}
.main_pg #cont02 .swiper-pagination {bottom:15px}
.main_pg #cont02 .swiper-pagination .swiper-pagination-bullet {border-radius: 0;}
.main_pg .cont03 img {width:100%}
.main_pg .cont03 .selfie_wrap {width:100%}
.main_pg .cont03 .selfie_wrap a {float:left;width:33.333%}
.main_pg .cont03 .selfie_wrap a > img{width: 142px; height: 142px;}
.main_pg .cont04 img {width:100%;margin-bottom:10px}
.main_pg .cont04 a:last-child img {margin-bottom:0}
.main_pg .cont05 > a {float:left;width:50%}
.main_pg .cont05 > a img {width:100%}


#sub_con_right {padding: 0 10px}
#sub_con_left {display: none;}
.sp_title {padding-top: 70px;padding-bottom: 20px}
.sp_title img,
#sub_con_right img {max-width: 100%;height: auto}
.inte_slider {position: relative}
#inte_prev {position: absolute;left: 0;top: 50%;transform: translateY(-50%);z-index: 100;}
#inte_next {position: absolute;right: 0;top: 50%;transform: translateY(-50%);z-index: 100;}
#sub_contents #inte_prev img {width: 40px !important}
#sub_contents #inte_next img {width: 40px !important}
#sub_contents #gallery .bx-viewport {height:auto !important}
#inte_pager>li {float: left;width: 24%;margin-right: 1.33%;margin-bottom: 1%;}
#inte_pager>li:nth-child(4n) {margin-right: 0}
.root_daum_roughmap {width: 100%!important}
.pg_slider {width: 100%!important;margin-bottom: 15px}
.text_hidden {overflow: hidden;visibility: hidden;position: absolute;width: 0;height: 0;font-size: 0;line-height: 0;}
#sub_con_right>img {margin-bottom: 15px}

.login {padding: 10px}
.login a {color: #444;margin-right: 10px;font-size: 13px}
.login a:before {content: '·';margin-right: 3px}


#wrap #snb {display: none;}
.s_top_bnr {padding-top: 0px; padding-bottom: 20px;}
.s_top_bnr img{max-width: 100%}


/* common tab */
.comPgTabMn {margin: 0 0 20px}
.comPgTabMn:after {content: '';display: block;clear: both}
.comPgTabMn ul.tabs {float: left;width: 100%}
.comPgTabMn ul.tabs li {float: left;text-align:center;cursor: pointer;overflow: hidden;position: relative;height: 45px;line-height: 45px;color: #333;font-size: 14px;font-weight: 500;border: 1px solid #dedede;border-left: 0;box-sizing: border-box;letter-spacing:-1px}

/* 스페셜 클래스는 인베드 된 tabs 만 조작하기 위한 특별 클래스 입니다.. 다른 곳에 뒤죽박죽 쓰인 클래스 때문에 부득이 하게 개별 처리 함. table-cell은 width %가 
 * 적용이 안되어 글씨 크기가 긴경우 width가 늘어나고 부모 넓이보다 커지면 개행 되기 때문에 float 와 동일한 효과를 볼 수 있습니다. 시간상 모든 tabs를 동일 적용할 수 없어 별도로... 적용
 *  */
.comPgTabMn ul.tabs.special li {float: none; display:table-cell; text-align:center; vertical-align:middle; word-break:keep-all; cursor: pointer;overflow: hidden;position: relative; font-size:16px !important; height: 45px; line-height: normal; color: #333; font-weight: 500;border: 1px solid #dedede;border-left: 0;box-sizing: border-box}

.comPgTabMn ul.tabs li:first-child {border-left: 1px solid #dedede}
.comPgTabMn ul.tabs li.active {background: #3d3d3d;color: #fff}
.comPgTabMn .tab_container {clear: both;float: left}
.comPgTabMn .tab_content {display: none;}
.comPgTabMn .tab_content img {width: 98%;height: auto} /* img_ct 와 동일하게 width 맞춰줘야 함... 그래야 모바일에서 이미지 정상 노출.*/
.comPgTabMn .tab_container .tab_content ul {width:100%}
.comPgTabMn.index2 ul.tabs li {width: 50%;box-sizing:border-box}
.comPgTabMn.index3 ul.tabs li {width: /*332px*/50%;box-sizing:border-box}
.comPgTabMn.index4 ul.tabs li {width: /*249px*/33.3333%;box-sizing:border-box}
.comPgTabMn.index5 ul.tabs li {width: 50%;box-sizing:border-box}
/* real type index count 4 */
.comPgTabMn.index-4 ul.tabs li {width: 25%;box-sizing:border-box}
/*.comPgTabMn.index4 ul.tabs li:first-child {width: 248px}*/


/*모바일 팝업 크기조절*/
.darkBg {display:block;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7)}
.hd_pops {top:100px !important;left:1% !important;width:98%;height:auto;}
.hd_pops .hd_pops_con {width:100% !important;height:auto !important}
.hd_pops .hd_pops_con img {width:100%}



/*하단 빠른상담신청폼*/
#onlineBlock {display:block;width:100%;height:110px;background-color:#333}
#kakaoForm {position: fixed;bottom: 0;left: 0;z-index: 999;background-color:#f7f7f7;padding:5px 10px}
#kakaoForm .sjt {display:none}
#kakaoForm .form #kForm_name {width:}
#kakaoForm #kForm .form {float:left;width:79.5%}
#kakaoForm #kForm .submit_wrap {float:right;width:19.5%;margin-top: 6px;height: 72px;
display: inline-block;background-color:#f170aa;text-align:center;line-height: 70px;font-size: 14px;}
#kakaoForm .form tbody th {display:none}
#kakaoForm .form input {border: 1px solid #666;height: 28px;font-size: 13px;padding-left: 5px;}
#kakaoForm #kForm .form tr {display:inline-block}
#kakaoForm .form input.phone {width:}

#kakaoForm .form td {display:block}
#kakaoForm .form .onlineName {width:34%;margin-right:2%}
#kakaoForm .form .onlineName input {width:100%}
#kakaoForm .form .onlineTel {width:64%}
#kakaoForm .form .onlineTel i {display: inline-block;width: 1%;}
#kakaoForm .form .onlineTel select, #kakaoForm .form .onlineTel input {height: 28px;width:31%;background-color: #fff;border: 1px solid #666;}
#kakaoForm .form .onlineCont {width:100%;margin-top: 8px;}
#kakaoForm .form .onlineCont td {display:block}
#kakaoForm .form .onlineCont textarea {width: 100%; height: 35px; display: block;padding: 5px;font-size: 13px;font-family: 'NotoKR';}
#kakaoForm #kForm .submit_wrap .submit {background: none;border: none;color: #fff;}
#kakaoForm .onlineCheck {padding-left:3px}
#kakaoForm .onlineCheck input {margin-right:3px}


/*탑버튼*/
.topBtn {width:55px;height:55px;background-color:#fe9d33;position:fixed;right:2.5%;bottom:5%;box-shadow:3px 3px 5px rgba(0,0,0,0.25);border-radius: 50px;text-align: center;line-height: 50px;z-index: 99;}
.topBtn img {height: 30px;margin: 0 auto;}


/*모바일 상세페이지*/
#sub_container #contents {display:none}
#sub_container #contents.in {display:block}
#contents_m img {width:100%}
#contents_m #sub_top_m {position: relative;width: 100%;}
#contents_m #sub_top_m .subTitleText {opacity: 0;position: absolute;top: 0;left:0;width:100%;animation: subtop_ani1 .8s .3s 1 linear forwards;}
@keyframes subtop_ani1 {
    0% {transform:translateX(-50px);opacity:0}
    100% {transform:translateY(0);opacity:1}
}
#contents_m #sub_top_m.no .subTitleText {opacity: 0;position: absolute;top:50%;transform:translateY(-50%);left:0;animation: subtop_ani2 .8s .3s 1 linear forwards;}
@keyframes subtop_ani2 {
    0% {width:0;opacity:0}
    100% {width:100%;opacity:1}
}
#contents_m #sub_top_m.bn .subTitleText {opacity:0;position: absolute;top: 50%;left:0;transform:translateY(-50%);animation: subtop_ani4 .8s .3s 1 linear forwards}
@keyframes subtop_ani4 {
    0% {width:100%;opacity:0}
    50% {width:110%;opacity:1}
    100% {width:100%;opacity:1}
}
#contents_m #sub_top_m.bd .subTitleText {animation: subtop_ani3 .8s .3s 1 linear forwards}
@keyframes subtop_ani3 {
    0% {opacity:0}
    100% {opacity:1}
}
#contents_m #sub_top_m.sk .subTitleText {top:50%;transform:translateY(-50%);animation: subtop_ani2 .8s .3s 1 linear forwards}

/*필러,보톡스 등*/
#contents_m .clickNav {margin-top: 10px; margin-left: 4px;}
#contents_m .clickNav li {float:left;width:25%;border:1px solid #ccc;margin-left: -1px;margin-top: -1px;}
#contents_m .clickNav li a {display:block;width:100%;height:40px;line-height:40px;text-align:center;font-size:13px;color:#222;cursor:pointer}
#contents_m .clickNav li a.on {background-color:#f76b16;color:#fff}
#contents_m .clickImg {padding-bottom:35px}
#contents_m .clickImg img {display:none}
#contents_m .clickImg img.clickImg01 {display:block}

#contents_m .regio_tab {width:70%;margin:0 auto}
#contents_m .regio_tab li {float:left;width:50%;border:1px solid #222;margin-left:-1px}
#contents_m .regio_tab li a {width:100%;display:block;height:35px;line-height:35px;text-align:center;color:#222;cursor:pointer}
#contents_m .regio_tab li a.on {background-color:#f76b16;color:#fff}
#contents_m .tab_cont1 .clickNav li {width:33.333%}
#contents_m .tab_cont2 {padding-bottom:35px}

#contents_m .regio_area {width:100%;margin:0}
#contents_m .regio_area.ba_regio_area .regio_tab {width:90%;padding-top:0;height:auto}
#contents_m .regio_area.ba_regio_area .regio_tab li {width:25%}
#contents_m .regio_area.ba_regio_area .regio_tab li a {border:none;font-size:14px;letter-spacing: -1px;}
#contents_m .regio_area .tab_cont {display:none}
#contents_m .regio_area .tab_cont.tab_cont1 {display:block}