@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);

/* common Set */

#bna a {text-decoration: none; cursor: pointer; color: none; /*cursor:url('/bna/images/cursorimg.png'), auto;*/}
#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; }

/*contents*/
body {
	background:url('/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;line-height:1;
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%;/*height: 488px;*/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 {width:10px; height:10px;border-radius: 20px;}*/
.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 .closeBtnB {position: absolute; top: -10px; right: 15px; font-size: 3em; font-weight: bold;} 
#bna_detail .detail_before, #bna_detail .detail_after {width:300px; 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;}
#bna_detail_inner {background-color:#fff; width:788px; height:573px; margin : 5% auto; position: relative;} 

.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:97%;} 
.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;}
	.site-header .site-branding {top: 0.5rem !important;}
	.site-header .main-navigation-zeein-mobile .primary-mobile-container {margin-top: 60px;}
	/*.site-header .site-branding a {width: 160px !important;height: 33px; margin-top: 5px;}*/
	.hidden-sm-up {display:block !important;} 
	.page-template-default .div-scroll-warp{display:none;} 
	#bna_contents {background: none; width: 98%;height: 560px;margin-top:8%; } 
	#bna_contents .bna_after_part{left: 13px; bottom: 16px;background: #fff;}
	.list_main {width: 660px;} 
	.list_main li {width: 120px; 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 }

	.sliderInner {width: 664px;height: 345px;margin: 25px auto;overflow:auto;  -webkit-overflow-scrolling: touch;	}
	.sliderInner a img {width:126px;} 
	body{background: none; background-color: #f3f3f3;min-height: auto;} 
	body.page .site-content, body.single .site-content{margin-top: 0px;}
	.container {width: 100%;} 
	.logo img {display: block; margin: 3% auto;}
	.bna_before_part p {width:70%; top:10px;} 
	.bna_before_part p .frontBtn_before, .bna_before_part p .sideBtn_before { padding: 1px 5px 2px 5px;} 
	#bna > img {width: 65%; height:auto;}	 
	#bna_side > img {width: 65%; height:auto;}	 
	.bnaMain .sub_title {position:absolute; left:360px; width:550px; padding-bottom: 10px;} 
	.bnaMain .choice_surgery {position: absolute;left:360px; top:170px;width:550px; height:260px; float:right; padding-bottom: 10px;} 
	.bnaMain .detail_surgery {position:absolute; left:360px; 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: 8.8px;left: 10px;}
	.cs_inner_04 .ck-4, .cs_inner_05 .ck-5, .cs_inner_06 .ck-6 {position: absolute;top: 13.8px;left: 10px;}
	#bna_detail img {width: 240px;height: 350px;}
	#bna_detail .detail_before, #bna_detail .detail_after {width: 260px; height: 350px;} 
	#bna_detail_inner{width:80%;height: 450px; margin: 5% auto;} 
} 

@media screen and (max-width:768px){
	.site-header .site-branding {top: 1rem !important;}
	body{background: none; background-color: #f3f3f3;min-height: auto;} 
	.bna_before_part p {width:70%; top:15px;} 
	.bna_before_part p .frontBtn_before, .bna_before_part p .sideBtn_before { padding: 1px 5px 2px 5px;} 
	.bna_before_part #bna {padding: 15px 15px;} 
	.bna_before_part #bna_side {padding: 15px 15px;} 
	.bnaMain .sub_title {position:absolute; left:340px; width:350px; padding-bottom: 10px;} 
	.bnaMain .choice_surgery {position: absolute;left:340px; top:160px;width:350px; height:210px; float:right; padding-bottom: 10px;} 
	.bnaMain .detail_surgery {position:absolute; left:340px; top:360px; width:330px; 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: 11px;left: 12.2px;}
	.cs_inner_04 .ck-4, .cs_inner_05 .ck-5, .cs_inner_06 .ck-6 {position: absolute;top: 16px;left: 12.2px;}
	#bna_contents .bna_after_part{left: 25px; background: #fff;} 
	#bna_contents{background: none; margin-top: 12%;} 
	#bna_detail_inner{width:90%;} 
	#bna_detail .detail_before{margin-left: 5%;}
	#bna_detail .detail_after{margin-right: 5%;} 
	#bna_detail .detail_before, #bna_detail .detail_after {width: 260px; height: 350px;} 
} 

@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:450px;}
	#bna_contents .bna_after_part {left: 5px;top: 74%;background: #fff;font-size: 0.8em;width: 112px;height:86px;}
	.logo {margin-top: 25%;} 
	.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: 30px;left: 2px;}
	.topbar .listViewBtn {top: 15px;right: 5px;padding: 5px 10px;} 
	.sub_title .st_blue {font-size: 0.9em; margin: 0rem 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;margin: 5px auto;}
	.bna_before_part p {width:55%; top:3px;} 
	.bna_before_part p .frontBtn_before, .bna_before_part p .sideBtn_before { padding: 1px 5px 2px 5px;} 
	.bna_before_part #bna {padding: 5px 5px;}	
	.bna_before_part #bna_side {padding: 5px 5px;}	
	.bnaMain .sub_title {position:absolute; left:54%; width:167px; padding-bottom: 10px; padding-top:10px} 
	.bnaMain .choice_surgery {position: absolute;left:54%; top:100px;width:157px; height:130px; float:right; padding-bottom: 10px;} 
	.bnaMain .detail_surgery {position:absolute; left:54%; top:210px; width:157px; height:130px; float:right; padding-bottom: 0px;display:block;} 
	.bnaMain .detail_surgery .st_blue {color: #223179; font-size: 0.8em;} 
	.bnaMain .bna_before_part{width: 100%;}
	.bnaMain{height:auto;} 
	.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.4px;left: 5.7px;}
	.cs_inner_04 .ck-4, .cs_inner_05 .ck-5, .cs_inner_06 .ck-6 {position: absolute;top: 10.4px;left: 5.7px;}
	#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: 320px; 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%;}
} 

@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: 300px;background: #fff;font-size: 0.8em;width: 80px;height:62px;}
	.list_main {width: 300px; margin:10px auto;}
	.list_main li {width: 50px; height: 50px; border-radius: 5px; font-size: 0.7em;margin: 4.8px;} 

	.list_main li a > img {position: relative;width: 40px !important;height: 40px !important;} 

	.list_main li .s-icon { width: 40px;height: 40px;margin: 0 auto;} 
	.list_main li .s-icon-over { opacity: 0; bottom: 40px; }
	.list_main li .s-icon-over:hover { opacity: 1; }

	.s-title a {position: relative;height: 30px;text-align: center;vertical-align: middle; padding-bottom:0px }

	.sub_title .st_blue {font-size: 0.8em; margin: 0rem 0rem 0rem 0rem;} 
	.sub_title .st_pink {font-size: 0.7em; margin: 0rem 0rem 0rem 0rem;} 
	.sliderInner a img {width:52.5px;}
	.bna_before_part p {top:5px;} 
	.bna_before_part #bna {padding: 10px 5px;}	
	.bna_before_part #bna_side {padding: 10px 5px;}	
	.bnaMain .sub_title {position:absolute; left:54%; width:147px; padding-bottom: 10px;} 
	.bnaMain .choice_surgery {position: absolute;left:54%; top:95px;width:147px; height:100px; float:right; padding-bottom: 10px;} 
	.bnaMain .detail_surgery {position:absolute; left:54%; top:190px; 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;}
	#bna_detail img {width: 110px;height: 160px;}
	#bna_detail_inner {height: 260px; margin: 10% auto;} 
	#bna_detail .closeBtnB {position: relative; top: auto;right: auto;text-align: center;}
	#bna_detail .detail_before {margin-left: 2%;}
	#bna_detail .detail_after {margin-right: 2%;}
	.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;}
}