@charset "utf-8";

@import url("https://fonts.googleapis.com/earlyaccess/notosanskr.css");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700"); #bna a {text-decoration: none; cursor: pointer; color: none; }
#bna .choice_surgery label {cursor:pointer;} 
#bna a:hover {opacity:0.8;text-decoration: none;} 
#bna h1,#bna h2,#bna h3,#bna h4 {font-size: none;}
.color-blue{color:#223179;}
.color-pink{color:#f173ac;} 
#icon1, #icon2, #icon3, #icon4 { cursor: pointer; }
#bna { position:absolute; width:500px; height:auto;float:left; } 
#bna img { position:absolute;}
#bna img.dnone {display:none;} 
#bna_side img { position:absolute;}
#bna_side img.dnone {display:none;} 
#bna_side {display:none;} 
#list_main img { width: 135px; height: 145px; text-decoration:none; }
#bna_contents { position:relative; width: 850px; height:675px;margin : 0 auto;}
#bna_contents .list a{ text-decoration:none;}
#bna_detail img { width: 300px; height: 450px; } body {
background:url(//eng.idhospital.com/wp-content/themes/zeein/assets/img/bna/bna_bg_new.jpg)no-repeat center center fixed ;   
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;		
}
#bna_contents{
width: 911px;
height: 674px;
margin: 2% auto;
background: #fff;
border: 10px solid #f19ec2;
box-shadow: inset 0px 0px 20px 10px #ededed;
}
.logo img{display:block; margin:7% auto;} 
.mainMsg {color:#223179; font-size:2em; text-align:center; font-weight:bold; } 
.mainMsg span {color:#f173ac; } 
.list_main {width:850px; margin:10px auto;} 
.list_main li {width:158px; height:139px; border-radius:20px; background:linear-gradient(to bottom, #74acff 0%, #438eff 100%); float:left; overflow:hidden; color:#fff;font-size:1.5em;font-weight:bold;text-align:center;margin:6px; display:table;
padding-top: 15px;} 
.list_main li.bg-orange {background:linear-gradient(to bottom, #feba6a 0%, #fe9315 100%);}
.list_main li a {display:table-cell; vertical-align:middle;color:#fff;} 
.list_main li a:hover {text-decoration:none;} 
.list_main li a > img {position: relative;width: 60px !important;height: 60px !important;} 
.list_main li .s-icon { width: 60px;height: 60px;margin: 0 auto;} 
.list_main li .s-icon-over { opacity: 0; bottom: 60px; }
.list_main li .s-icon-over:hover { opacity: 1; }
.s-title a {position: relative;height: 69px;width: 158px;text-align: center;vertical-align: middle; padding-bottom:10px }
.topbar {width:100%; height:68px; display:block; background: linear-gradient(to bottom, #dadada 0%, #eaeaea 100%); position:relative;}
.topbar .homeBtn {width:44px; position:relative; left:0px; top:0px; display:inline-block;} 
.topbar .homeBtn img {width:44px; position: absolute; left: 20px; top: -5px;}
.topbar .sub_logo {width: 55px; position: absolute; left: 46%; top: 9px;} 
.topbar .listViewBtn {position: absolute;top: 11px;right: 20px;background: linear-gradient(to bottom, #4c6d90 0%, #083368 100%);color: #fff;padding: 10px 20px;border-radius: 10px;box-shadow: 1px 1px 1px #afafaf;font-weight:500;} 
.sub_title {display:block; text-align:center;} 
.sub_title .st_blue {color: #223179; font-size: 1.5em; text-align: left; font-weight: bold; margin: 1.5rem 0rem 0rem 0rem;} 
.sub_title .st_blue span {color:#5eccfd;} 
.sub_title .st_pink {font-size:1.2em; color:#f173ac;font-weight:bold; text-align: left;margin: 0.2rem 0rem 0rem 0rem;} 
.sub_title .st_blue.align-center{text-align:center;}
.sub_title .st_pink.align-center{text-align:center;}
.sliderInner{margin: 10px 20px; width:855px; height:440px;overflow-y: scroll; } 
.sliderInner a img {margin-bottom:3px;} 
.bnaMain {border: 0px solid #ccc;width: 100%; display: block;}
.bnaMain .bna_before_part {position:absolute; width:452px; float:left;} 
.bnaMain .sub_title {position:absolute; left:430px; width:418px; padding-bottom: 10px;} 
.bnaMain .choice_surgery {position: absolute;left:430px; top:170px;width:418px; height:210px; float:right; padding-bottom: 10px;} 
.bnaMain .detail_surgery {position:absolute; left:430px; top:440px; width:418px; height:260px; float:right; padding-bottom: 0px;display:block;} 
.bna_before_part p {width:82%; height:auto;position:absolute;top:10px;z-index:9999; text-align:center; font-weight:bold;} 
.bna_before_part p .frontBtn_before, .bna_before_part p .sideBtn_before {
background: #666666;
color: #fff;
padding: 3px 7px 5px 7px;
border-radius: 5px;
box-shadow: 1px 1px 1px #afafaf;
font-size:0.8rem;
} 
.bna_before_part p .btn_pink {background-color: #f54a94; text-decoration:none;}
.bna_before_part p .btn_blue {background-color: #4291f7; text-decoration:none;}
.bna_before_part p a#frontBtn:hover {background: #f54a94;color: #fff;opacity:0.8;text-decoration:none;} 
.bna_before_part p a#sideBtn:hover {background: #4291f7;color: #fff;opacity:0.8;text-decoration:none;} 
.bna_before_part #bna {width:100%; height:auto;position:relative;padding: 10px 10px;} 
.bna_before_part #bna_side {width:100%; height:auto;position:relative;padding: 10px 10px;} 
#bna_contents .bna_after_part img {width:50%;height:auto; }
#bna_contents .bna_after_part {position: absolute; left: 15px; bottom: 15px; width: 119px; height:77; border: 2px solid #f2a5c5;} 
#bna > img {width: 82%; height: auto;}
#bna_side > img {width: 82%; height: auto;}
.detail_surgery .st_blue {color: #223179; font-size: 1em; text-align: left; font-weight: bold; border-top:1px solid #ccc; display: block; padding:5px 0;margin:0 0 0 0; } 
.detail_surgery a{color: #fff;padding: 5px 10px;font-size: 0.9em;margin:2px 0px;display:inline-block;}
.detail_surgery a.de_face{background: #f073ab;}
.detail_surgery a.de_orthognathic{background: #2cb4ff;}
.detail_surgery a.de_nose{background: #f2cc2d;}
.detail_surgery a.de_eye{background:  #fd921e;}
.detail_surgery a.de_anti_aging{background: #ae53f9;}
.detail_surgery a.de_petit{background: #ff465b;}
.detail_surgery a.de_arms{background: #f073ab;}
.detail_surgery a.de_belly{background: #2cb4ff;}
.detail_surgery a.de_thigh{background: #f2cc2d;}
.detail_surgery a.de_calves{background:  #fd921e;}
.choice_surgery label {width: 120px;height: 110px;background: #fff;display: inline-block;display:table;float:left; overflow:hidden;position:relative;margin:4px;} 
.choice_surgery label span {font-size: 1.5em;text-align: center;font-weight: bold;display:table-cell;vertical-align:middle;}
.choice_surgery label.face {border: 5px solid #f073ab;}
.choice_surgery label.face span{color:#f073ab;}
.choice_surgery label.orthognathic {border: 5px solid #2cb4ff;}
.choice_surgery label.orthognathic span {color:#2cb4ff;}
.choice_surgery label.nose {border: 5px solid #f2cc2d;}
.choice_surgery label.nose span {color:#f2cc2d;}
.choice_surgery label.eye {border: 5px solid #fd921e;}
.choice_surgery label.eye span{color:#fd921e;}
.choice_surgery label.anti_aging {border: 5px solid #ae53f9;}
.choice_surgery label.anti_aging span {color:#ae53f9;} 
.choice_surgery label.petit {border: 5px solid #ff465b;}
.choice_surgery label.petit span {color:#ff465b;} 
.choice_surgery .raBtn {position:absolute;top:0px; left:50px;} 
.choice_surgery .raBtn img {position:absolute; top:0px; left:0px;} 
.choice_surgery .raBtn img.ra_on{display:none;} 
.choice_surgery .raBtn .ck-1{position: absolute;display: inline-block;top: 15px;left: -32px;}
.choice_surgery .raBtn .ck-2{position: absolute;display: inline-block;top:15px;left: 106px;}
.choice_surgery .raBtn .ck-3{position: absolute;display: inline-block;top:15px;left: 247px;}
.choice_surgery .raBtn .ck-4{position: absolute;display: inline-block;top:145px;left: -32px;}
.choice_surgery > img {width:135px;} 
.raBtn img {display:none;} .choice_surgery div.ck-face {background:#f073ab;} 
.choice_surgery div.ck-orthognathic {background:#2cb4ff;} 
.choice_surgery div.ck-nose {background:#f2cc2d;} 
.choice_surgery div.ck-eye {background:#fd921e;} 
.choice_surgery div.ck-anti_aging {background:#ae53f9;} 
.choice_surgery div.ck-petit {background:#ff465b;} 
.choice_surgery div.ck-arms{background: #f073ab;}
.choice_surgery div.ck-belly{background: #2cb4ff;}
.choice_surgery div.ck-thigh{background: #f2cc2d;}
.choice_surgery div.ck-calves{background:  #fd921e;}
.content {display:block;} 
#bna_detail {width:100%; height:100%; background:rgba(0,0,0,0.8);display:block; position:absolute; top:0px; left:0px; z-index:99999; display:none;} 
#bna_detail_inner {background-color:#fff; width:788px; height:573px; margin : 5% auto; position: relative;} 
#bna_detail .closeBtnB {position: absolute; top: -10px; right: 15px; font-size: 3em; font-weight: bold;} 
#bna_detail .detail_before, #bna_detail .detail_after {width:320px; height:490px;margin-top:60px;font-size:1.5em; font-weight:bold; text-align:center; }
#bna_detail .detail_before{ float:left; margin-left:7%; color:#4c4c4c;}
#bna_detail .detail_after {float:right; margin-right:7%; color:#ff469a;}
.ck-1, .ck-2, .ck-3, .ck-4, .ck-5, .ck-6  {width:10px; height:10px;border-radius: 20px;}
.cs_inner_01, .cs_inner_02, .cs_inner_03, .cs_inner_04, .cs_inner_05, .cs_inner_06 {width:130px;display:inline-block; position:relative;} 
.cs_inner_04, .cs_inner_05, .cs_inner_06{padding-top:5px;} 
.cs_inner_01 img, .cs_inner_02 img, .cs_inner_03 img, .cs_inner_04 img, .cs_inner_05 img, .cs_inner_06 img {width:98%;} 
.cs_inner_01 .ck-1, .cs_inner_02 .ck-2, .cs_inner_03 .ck-3{position:absolute; top:14px; left:16.45px;} 
.cs_inner_04 .ck-4, .cs_inner_05 .ck-5, .cs_inner_06 .ck-6{position:absolute; top:19px; left:16.45px;} 
@media screen and (max-width:1024px){
.site-header .top-menu-wrap {height: 0px;} 
.site-header .top-menu-wrap .clearfix {display:none;} 
.mode-pc, .snsmobile, .swiper-container-bottom-quick {display:none;}
.site-header .main-navigation-zeein {margin-top: 0rem;display: none;}
.site-header {height: 60px;}
.hidden-sm-up {display:block !important;} 
.page-template-default .div-scroll-warp{display:none;} 
#bna_contents {background: none; width: 98%;height: 600px;margin-top:8%; } 
#bna_contents .bna_after_part{left: 13px; bottom: 16px;background: #fff;} 
.list_main {width: 660px;} 
.list_main li {width: 120px; height: 139px;} 
.sliderInner {width: 664px;height: 355px;margin: 10px auto;overflow:auto;  -webkit-overflow-scrolling: touch;	}
.sliderInner a img {width:126px;} 
.site-header .site-branding {top: 0.5rem !important;}
body{background: none; background-color: #f3f3f3;min-height: auto;} 
body.page .site-content, body.single .site-content{margin-top: 0px;}
.container {width: 100%;} 
.site-header .main-navigation-zeein-mobile .primary-mobile-container {margin-top: 60px;}
.logo img {display: block; margin: 3% auto;}
.list_main li {height: 100px;}
.list_main li a > img {position: relative;width: 50px !important;height: 50px !important;} 
.list_main li .s-icon { width: 50px;height: 50px;margin: 0 auto;} 
.list_main li .s-icon-over { opacity: 0; bottom: 50px; }
.list_main li .s-icon-over:hover { opacity: 1; }
.s-title a {position: relative;height: 59px;width: 158px;text-align: center;vertical-align: middle; padding-bottom:10px }
#bna > img {width: 71%; height:auto;}	 
#bna_side > img {width: 71%; height:auto;}	 
.bnaMain .sub_title {position:absolute; left:380px; width:550px; padding-bottom: 10px;} 
.bnaMain .choice_surgery {position: absolute;left:380px; top:170px;width:550px; height:260px; float:right; padding-bottom: 10px;} 
.bnaMain .detail_surgery {position:absolute; left:380px; top:270px; width:550px; height:260px; float:right; padding-bottom: 15px;display:block;} 
.cs_inner_01, .cs_inner_02, .cs_inner_03, .cs_inner_04, .cs_inner_05, .cs_inner_06 {width: 80px;} 
.ck-1, .ck-2, .ck-3, .ck-4, .ck-5, .ck-6 {width: 6px;height: 6px;border-radius: 20px;}
.cs_inner_01 .ck-1, .cs_inner_02 .ck-2, .cs_inner_03 .ck-3 {position: absolute; top: 9px;left: 10px;}
.cs_inner_04 .ck-4, .cs_inner_05 .ck-5, .cs_inner_06 .ck-6 {position: absolute;top: 14px;left: 10px;}
#bna_detail_inner{height: 520px; margin: 5% auto;} 
#bna_detail img {width: 280px;height: 410px;}
} 
@media screen and (max-width:768px){
.bna_before_part #bna {padding: 15px 15px;} 
.bna_before_part #bna_side {padding: 15px 15px;} 
.bnaMain .sub_title {position:absolute; left:390px; width:330px; padding-bottom: 10px;} 
.bnaMain .choice_surgery {position: absolute;left:390px; top:170px;width:330px; height:210px; float:right; padding-bottom: 10px;} 
.bnaMain .detail_surgery {position:absolute; left:390px; top:400px; width:310px; height:200px; float:right; padding-bottom: 0px;display:block;} 
.cs_inner_01, .cs_inner_02, .cs_inner_03, .cs_inner_04, .cs_inner_05, .cs_inner_06 {width: 100px;} 
.ck-1, .ck-2, .ck-3, .ck-4, .ck-5, .ck-6 {width: 7px;height: 7px;border-radius: 20px;}
.cs_inner_01 .ck-1, .cs_inner_02 .ck-2, .cs_inner_03 .ck-3 {position: absolute; top: 11.6px;left: 12.8px;}
.cs_inner_04 .ck-4, .cs_inner_05 .ck-5, .cs_inner_06 .ck-6 {position: absolute;top: 16.6px;left: 12.8px;}
#bna_contents .bna_after_part{left: 25px; } 
#bna_contents{margin: 3% auto;margin-top: 11%;} 
#bna_detail_inner{width:90%;} 
#bna_detail .detail_before{margin-left: 2%;}
#bna_detail .detail_after{margin-right: 2%;} 
#bna_detail .detail_before, #bna_detail .detail_after {width: 300px; height: 450px;} 
} 
@media screen and (max-width:480px){
.topbar {height:42px;}
.swiper-container-bottom-quick {display:block;}
body{background: none; background-color: #f3f3f3;min-height: auto;} 
#bna_contents {background: none;border: 0px solid #f19ec2;box-shadow: none; margin: 0 auto; margin-top: 15%; height:400px;}
#bna_contents .bna_after_part {left: 5px;top: 80%;background: #fff;font-size: 0.8em;width: 130px;padding: 2px 7px;}
.logo {margin-top: 35%;} 
.logo img {width: 70px;} 
.mainMsg{font-size: 1.3em;}
.list_main {width: 350px; margin:10px auto;}
.list_main li {width: 60px; height: 60px; border-radius: 5px; font-size: 0.8em;margin: 4.8px;} 
.list_main li a > img {position: relative;width: 45px !important;height: 45px !important;} 
.list_main li .s-icon { width: 45px;height: 45px;margin: 0 auto;} 
.list_main li .s-icon-over { opacity: 0; bottom: 45px; }
.list_main li .s-icon-over:hover { opacity: 1; }
.s-title a {position: relative;height: 40px;width: 158px;text-align: center;vertical-align: middle; padding-bottom:5px }
.topbar{background: none;}
.topbar .topbar_sub_logo{display:none;} 
.topbar .homeBtn img {width: 35px;left: 2px;}
.sub_title .st_blue {font-size: 0.9em; margin: 0.5rem 0rem 0rem 0rem;} 
.sub_title .st_pink {font-size: 0.8em; margin: 0rem 0rem 0rem 0rem;} 
.sliderInner a img {width:62.5px;}
.sliderInner{width: 91.5%;height: 345px;}
.topbar .listViewBtn {top: 15px;right: 5px;padding: 5px 10px;} 
.bna_before_part #bna {padding: 20px 5px;}	
.bna_before_part #bna_side {padding: 20px 5px;}	
.bnaMain .sub_title {position:absolute; left:54%; width:167px; padding-bottom: 10px; padding-top:10px} 
.bnaMain .choice_surgery {position: absolute;left:54%; top:115px;width:157px; height:130px; float:right; padding-bottom: 10px;} 
.bnaMain .detail_surgery {position:absolute; left:54%; top:230px; width:157px; height:130px; float:right; padding-bottom: 0px;display:block;} 
.bnaMain .detail_surgery .st_blue {color: #223179; font-size: 0.8em;} 
.detail_surgery a {padding: 2px 5px;font-size: 0.6em;} 
.detail_surgery a{margin: 0px 0px;} 
.cs_inner_01, .cs_inner_02, .cs_inner_03, .cs_inner_04, .cs_inner_05, .cs_inner_06 {width: 50px;} 
.ck-1, .ck-2, .ck-3, .ck-4, .ck-5, .ck-6 {width: 4px;height: 4px;border-radius: 20px;}
.cs_inner_01 .ck-1, .cs_inner_02 .ck-2, .cs_inner_03 .ck-3 {position: absolute; top: 5.5px;left: 6.1px;}
.cs_inner_04 .ck-4, .cs_inner_05 .ck-5, .cs_inner_06 .ck-6 {position: absolute;top: 10.5px;left: 6.1px;}
.bnaMain .bna_before_part{width: 100%;}
#bna > img {width: 50%; height:auto;}
#bna_side > img {width: 50%; height:auto;}
#bna_detail .detail_before, #bna_detail .detail_after {height: auto;width: 150px; margin-top: 0px;}
#bna_detail img {height: 230px;}
#bna_detail_inner {height: 340px; margin: 14% auto;} 
#bna_detail .closeBtnB {position: relative; top: auto;right: auto;text-align: center;}
#bna_detail .detail_before {margin-left: 4%;}
#bna_detail .detail_after {margin-right: 4%;}
.bnaMain{height:auto;} 
} 
@media screen and (max-width:350px){
.topbar {height:42px;}
.topbar .homeBtn {top:5px;}
.topbar .listViewBtn {top: 20px;}
#bna_contents .bna_after_part {left: 5px;top: 320px;background: #fff;font-size: 0.8em;width: 130px;padding: 2px 7px;}
.list_main {width: 300px; margin:10px auto;}
.list_main li {width: 50px; height: 50px; border-radius: 5px; font-size: 0.7em;margin: 4.8px;} 
.sub_title .st_blue {font-size: 0.8em; margin: 0.5rem 0rem 0rem 0rem;} 
.sub_title .st_pink {font-size: 0.7em; margin: 0rem 0rem 0rem 0rem;} 
.sliderInner a img {width:52.5px;}
.bnaMain .sub_title {position:absolute; left:54%; width:147px; padding-bottom: 10px;} 
.bnaMain .choice_surgery {position: absolute;left:54%; top:105px;width:147px; height:100px; float:right; padding-bottom: 10px;} 
.bnaMain .detail_surgery {position:absolute; left:54%; top:205px; width:140px; height:130px; float:right; padding-bottom: 0px;display:block;} 
.bnaMain .detail_surgery .st_blue {color: #223179; font-size: 0.8em;} 
#bna_detail .detail_before, #bna_detail .detail_after {width: 130px;height: auto; margin-top: 0px;}
.detail_surgery a {padding: 2px 5px;font-size: 0.6em;} 
.detail_surgery a{margin: 0px 0px;} 
.cs_inner_01, .cs_inner_02, .cs_inner_03, .cs_inner_04, .cs_inner_05, .cs_inner_06 {width: 45px;} 
.ck-1, .ck-2, .ck-3, .ck-4, .ck-5, .ck-6 {width: 3px;height: 3px;border-radius: 20px;}
.cs_inner_01 .ck-1, .cs_inner_02 .ck-2, .cs_inner_03 .ck-3 {position: absolute; top: 5px;left: 6px;}
.cs_inner_04 .ck-4, .cs_inner_05 .ck-5, .cs_inner_06 .ck-6 {position: absolute;top: 10px;left: 6px;}
}