/* Written By MJS */

*{-webkit-text-size-adjust:none}
body,form,div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,fieldset,th,td,input,textarea,button,select{margin:0;padding:0;font-family:'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;font-weight:normal}
body{-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
li{list-style:none}
a{border:0;padding:0;margin:0;text-decoration:none;color:#333}
ol,ul,dl{list-style:none}
img{float:left;border:0;padding:0;margin:0;}
legend,caption{display:none}
table{border-collapse:collapse;border-spacing:0}
input{vertical-align:middle;padding:0;border:0;margin:0;}
select{padding:0;border:0;margin:0;}

body{min-width:320px;max-width:1000px;height:100%;margin:0 auto;}





/*================================== 상단 ==================================*/
#main-navbar{position:relative;float:left;z-index:10;width:100%;background:#fff;}
#toggle-sidebar{float:left;width:13%;padding:4% 0 0 3%;cursor:pointer;}
a.call{float:left;width:13%;padding:4% 3% 0 0;}


/* 로고 */
.logo{position:relative;float:left;width:40%;padding:4% 0;margin:0 14%;}
.logo a{float:left;width:100%;}
.logo a img{float:left;width:100%;}


#main-sidebar{position:fixed;top:0;bottom:0;background:#e5e5e5;}
#main-sidebar .close-sb{height:48px;line-height:48px;background:#333;padding:0 0 0 3%;border-bottom:1px solid #000;font-size:18px;color:#fff;cursor:pointer;}
#main-sidebar ul li > a{display:block;height:18px;line-height:18px;padding:12px 0 12px 5%;border-bottom:1px solid #ccc;font-size:16px;font-weight:600;color:#555;}
#main-sidebar ul li > a:hover{background:#333;border-bottom:1px solid #010101;color:#fff;}
#main-sidebar ul li li > a{display:block;padding:8px 0 8px 5%;background:#f7f7f7;border-bottom:1px solid #dedee0;font-size:13px;color:#555;}
#main-sidebar ul li li > a .class_point1{width:30px;display:inline-block;line-height:18px;font-size:10px;font-weight:600;color:white;background:red;text-align:center;padding:0;margin:0;margin-right:4px;}
#main-sidebar ul li li > a .class_point2{width:30px;display:inline-block;line-height:18px;font-size:10px;font-weight:600;color:white;background:green;text-align:center;padding:0;margin:0;margin-right:4px;}





/*================================== 메인 ==================================*/
/* 메인 비치는 뒷배경 */
.main_back_bg{position:fixed;left:50%;top:0;width:1080px;height:720px;margin-left:-540px;background:url(../img/back_bg.jpg) repeat-y;background-size:100%;z-index:-1px;}
.main_back_bg2{position:fixed;left:50%;top:0;width:1080px;height:720px;margin-left:-540px;background:url(../img/back_bg.jpg) repeat-y;filter:alpha(opacity=90);opacity: 0.1;-moz-opacity:0.1;background-size:100%;z-index:-1px;}


/* 메인 슬라이드 */
.promotion{position:relative;float:left;margin:0;padding:0;min-width:320px;max-width:1080px;width:100%;overflow-x:hidden;}
.slidings{margin:0;padding:0;}
#promotionBanner{margin:0;padding:0;}
.wrap{margin:0;padding:0;}
figure{margin:0;padding:0;}
#promotionBannerPagination{margin:0;padding:0;}
.pagination{margin:0;padding:0;}


/* 오시는길~치료전후 */
.icon4_bn{position:relative;float:left;width:100%;background:#fff;padding:30px 0;}
.icon4_bn ul{float:left;width:100%;}
.icon4_bn ul li{float:left;width:24.6%;text-align:center;border-right:1px solid #ccc;}
.icon4_bn ul li a{float:left;width:100%;text-align:center;}
.icon4_bn ul li a img{float:left;width:70%;margin:0 15%;}
.icon4_bn ul li a p{float:left;width:100%;line-height:100%;font-size:13px;font-weight:600;color:#000;text-align:center;margin-top:4%;}


/* 임플란트~일반치료 */
.icon_w{position:relative;float:left;width:100%;padding:30px 0;background:url(../img/bg_black.png) repeat;overflow:hidden;}
.icon_txt{float:left;width:100%;line-height:26px;font-size:28px;font-weight:400;letter-spacing:-2px;text-align:center;color:#fff;margin-bottom:5%;}
.icon_txt b{float:left;width:100%;font-size:18px;font-weight:bold;font-weight:1000;letter-spacing:0;}
.icon{float:left;width:100%;}
.icon ul{float:left;width:90%;margin:0 5%;}
.icon ul li{float:left;width:22%;margin:0 1%;background:url(../img/icon_bg_on.png) no-repeat;background-size:100%;}
.icon ul li a{float:left;width:100%;}
.icon ul li a img{float:left;width:100%;}
.icon ul li b{float:left;width:100%;line-height:100%;font-size:14px;font-weight:600;text-align:center;letter-spacing:-1px;color:#fff;margin-top:10px;}


/* 치료전후 */
.gallery{position:relative;float:left;width:92%;padding:30px 4%;background:#003a67;}
.gallery_title{position:relative;float:left;width:100%;line-height:22px;font-size:22px;font-weight:600;text-align:center;color:#fff;margin-bottom:4%;}
.gallery ul{position:relative;float:left;width:102%;margin-left:-1%;}
.gallery ul li{float:left;width:48%;margin:0 1%;}
.gallery ul li a{float:left;width:100%;}
.gallery ul li a img{float:left;width:100%;}
a.more{position:absolute;right:4%;top:30px;line-height:22px;font-size:13px;font-weight:600;color:#fff;}

.before_img2{float:left;width:50%;}
.before_img2 img{float:left;width:100%;height:122px;}
.before_img2 p{float:left;width:100%;line-height:28px;font-size:12px;font-weight:600;text-align:center;color:#fff;background:#002949;}
.after_img2{float:left;width:50%;}
.after_img2 img{float:left;width:100%;height:122px;}
.after_img2 p{float:left;width:100%;line-height:28px;font-size:12px;font-weight:600;text-align:center;color:#fff;background:#1b96e4;}





/* 병원둘러보기 */
#view{position:relative;float:left;width:100%;padding:30px 0;background:url(../img/bg_black.png) repeat;overflow:hidden;}
.view_txt{float:left;width:80%;margin:0 10%;}
.view_btn{float:left;width:30%;margin:6%  35% 0 35%;}


/* 공지사항~온라인상담 */
#tab{position:relative;float:left;width:100%;background:#fff;overflow:hidden;}
ul.tabs{float:left;width:100%;height:42px;}
ul.tabs li{float:left;width:50%;height:42px;line-height:42px;background:#ccc;overflow:hidden;position:relative;}
ul.tabs li a{float:left;width:100%;height:42px;line-height:42px;text-align:center;font-size:15px;font-weight:600;color:#777;}
ul.tabs li.active a{color:#333;background:#fff;}
.tab_container{float:left;width:100%;}
.tab_content{float:left;width:92%;padding:4%;}
ul.board{float:left;width:100%;}
ul.board li{float:left;width:100%;line-height:24px;}
ul.board li a{float:left;width:68%;padding-left:2%;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;background:url(../img/bullet1.png) no-repeat 0 50%;font-family:'gulim' !important;}
ul.board li a:hover{text-decoration:underline;}
ul.board li span{float:left;width:30%;font-size:12px;text-align:right;color:#898989;font-family:'gulim' !important;}








/*================================== 하단 ==================================*/
.f_info{position:relative;float:left;width:100%;}
.f_info img{position:relative;float:left;width:100%;}
.f_info ul{position:relative;float:left;width:100%;}
.f_info ul li{float:left;width:33.3333%;}
.f_info ul li a{float:left;width:100%;}


#footer{position:relative;float:left;width:100%;background:#666;}
.copy{position:relative;float:left;width:100%;padding-top:4%;color:#f6f6f6;font-size:11px;}
.copy p{text-align:center;}


/* 버튼 style */
#button{position:relative;float:left;width:100%;background:#666;padding:4% 0 6% 0;text-align:center;color:#fff;}
.btn{margin:1%;padding:2% 4%;font-size:14px;color:#fff;border:none;background:#999;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
behavior:url(ie-css3.htc);}





/*================================== 서브 ==================================*/
#sub_content{position:relative;float:left;width:100%;height:auto;min-width:320px;background:#f4f4f4;border-top:1px solid #aaa;}

/* 서브 메뉴 */
.sub_title{position:relative;float:left;width:92%;padding:4%;}
.sub_title h3{float:left;width:100%;font-size:20px;line-height:100%;letter-spacing:-1px;font-weight:600;text-align:center;color:#000;}

.sub_menu{float:left;width:92%;padding:0 4%;}
.sub_menu select{float:left;width:100%;height:30px;line-height:30px;font-size:14px;font-weight:600;padding:0 1%;margin:1% 0;background:#fff;border:1px solid #ccc;}
.sub_menu select option{float:left;width:100%;line-height:30px;font-size:14px;font-weight:bold;color:#555;}
.sub_menu select option.on{font-weight:bold;color:#000;}

.page_content{position:relative;float:left;width:92%;padding:10% 4%;margin-top:4%;background:#fff;}






/*=================================== 서브 내용 style ===================================*/
/* 서브 타이틀 */
.stitle1{float:left;width:97%;padding-left:2%;height:37px;letter-spacing:-1px;margin:8% 0 4% 0;border-left:4px solid #136bb0;}
.stitle1 b{float:left;width:100%;line-height:20px;font-size:18px;color:#136bb0;}
.stitle1 b span{color:#4e9e00;}
.stitle1 p{float:left;width:100%;line-height:10px;font-size:10px;color:#b8b8b8;margin-top:7px;}


.simg{position:relative;float:left;width:100%;margin-top:8%;}


/* 오시는길 */
.cont{border:1px solid #e0e0e0;border-top:none;}



/* 소아치료 */
#tab_dental{position:relative;float:left;width:100%;margin-top:5%;}
ul.tabs2{position:relative;float:left;width:100%;margin-bottom:5%;}
ul.tabs2 li{position:relative;float:left;width:33.333%;background:#eee;overflow:hidden;}
ul.tabs2 li a{float:left;width:100%;height:40px;line-height:20px;text-align:center;font-size:14px;letter-spacing:-1px;font-weight:600;color:#555;}
ul.tabs2 li.active2 a, ul.tabs2 li.active2 a:hover{color:#fff;background:#555;}
.tab_container2{float:left;width:100%;background:#fff;}
.tab_content2{float:left;width:100%;}


/* 치료전후 사진 */
.before_after{position:relative;float:left;width:100%;}
.before_after ul{float:left;width:102%;margin:-1% 0 0 -1%;}
.before_after ul li{float:left;width:48%;margin:1%;}
.before_after ul li b{float:left;width:100%;line-height:18px;font-size:13px;margin-top:3%;text-align:center;}
.before_after ul li a{float:left;width:100%;}
.before_img{float:left;width:50%;}
.before_img img{float:left;width:100%;}
.before_img p{float:left;width:100%;line-height:30px;font-size:13px;font-weight:600;text-align:center;color:#fff;background:#777;}
.after_img{float:left;width:50%;}
.after_img img{float:left;width:100%;}
.after_img p{float:left;width:100%;line-height:30px;font-size:13px;font-weight:600;text-align:center;color:#fff;background:#043e8d;}


/* 페이징 */
.paging_w{position:relative;float:left;width:100%;height:20px;margin-top:5%;}
.paging{text-align:center;}
.paging ul{display:inline-block;zoom:1;*display:inline;}
.paging ul li{float:left;margin:0 2px;}
.paging ul li a{float:left;text-align:center;height:20px;line-height:20px;font-size:12px;background:#fff;border:1px solid #ccc;color:#888;padding:0 6px;}
.paging ul li a.on{background:#555;border:1px solid #555;color:#fff;font-weight:600;}


/* 디테일페이지 */
.detail{position:relative;float:left;width:100%;}
.dtl_title{position:relative;float:left;width:100%;}
.dtl_title p{float:left;width:92%;line-height:20px;font-size:16px;font-weight:600;color:#fff;background:#555;padding:3% 4%;}
.dtl_title span{float:left;width:92%;line-height:100%;font-size:12px;text-align:right;background:#f6f6f6;padding:3% 4%;border-bottom:1px solid #ccc;}

.dtl_cont{position:relative;float:left;width:100%;margin:5% 0;}
.dtl_cont img{position:relative;margin-bottom:5%;text-align:center;}

.btn_w{position:relative;float:left;width:100%;text-align:center;}
input.btn{display:inline-block;width:40%;height:46px;line-height:100%;font-size:16px;font-weight:600;background:#aaa;text-align:center;color:#fff;border:2px solid #898989;margin:0 2%;}
input:hover.btn{background:#333;border:2px solid #000;}
input.btn2{display:inline-block;width:40%;height:46px;line-height:100%;font-size:16px;font-weight:600;background:#d24545;text-align:center;color:#fff;border:2px solid #b31515;margin:0 2%;}
input:hover.btn2{background:#fff;color:#d24545;border:2px solid #d24545;}







/* 이미지크기 제멋대로일때 조정해주는 style */
@media screen and (min-width:0) and (max-width:420px) {
.before_img2 img,.after_img2 img{height:70px;}

.before_after ul li{height:130px;}
.before_after ul li a{height:100px;}
.before_img img,.after_img img{height:70px;}
}

@media screen and (min-width:421px) and (max-width:767px) {
.before_img2 img,.after_img2 img{height:100px;}

.before_after ul li{height:160px;}
.before_after ul li a{height:130px;}
.before_img img,.after_img img{height:100px;}
}

@media screen and (min-width:768px) and (max-width:1023px) {
.before_img2 img,.after_img2 img{height:120px;}

.before_after ul li{height:180px;}
.before_after ul li a{height:150px;}
.before_img img,.after_img img{height:120px;}
}

@media screen and (min-width:1024px) and (max-width:1920px) {
.before_img2 img,.after_img2 img{height:160px;}

.before_after ul li{height:220px;}
.before_after ul li a{height:190px;}
.before_img img,.after_img img{height:160px;}
}