@import url(https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,500);
@import url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);
@import url(http://cdn.jsdelivr.net/font-notosans-kr/1.0.0-v1004/NotoSansKR-2350.css);
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
@import url(https://cdn.jsdelivr.net/xeicon/2/xeicon.min.css);


*{margin:0; padding:0; box-sizing:border-box;letter-spacing:-0.07em;color:inherit;}
img {border:0; vertical-align:top;}
a {border:0; text-decoration:none;}
ul, li {list-style:none;}
html,body {}
body {font-family: 'NotoSansKR','Noto Sans Korean','Noto Sans KR','Nanum Gothic','Roboto',sans-serif; color:#505050; margin: 0 auto}
div {display:block;}
.clearfix {content:"";clear:both;}
h1,h2,h3 {font-weight:200;line-height:1.2}
h4,h5 {font-weight:300;line-height:1.4}
b {letter-spacing:inherit;font-weight:600}
.inner {width:1200px;margin:auto;clear:both}
.inner2 {width:1100px;margin:auto;clear:both}
.c_main {color:#0072bc !important}
.c_sub1 {color:#444f5c !important}
.c_sub2 {color:#62687d !important}
.c_lightgray {color:#c0c0c0 !important}
.c_gray {color:#808080 !important}
.c_white {color:#fff !important}
.c_black {color:#303030 !important}

h1 {font-size:50px;line-height:1.15}
h2 {font-size:40px;line-height:1.15}
h3 {font-size:30px;}
h4 {font-size:24px;}
h5 {font-size:20px;line-height:1.5}
p {font-size:17px;font-weight:300;line-height:1.7;color:inherit;word-break:keep-all }
p.small {font-size:15px;}
.font36 {font-size: 36px;}
.roboto {font-family: "Roboto";}
.loose {letter-spacing: 0.2em;}
.thin {font-weight: 100 !important;}

span {color:inherit}

.float {float:left;}
.float_r {float:right !important;}
.center {text-align:center !important;}
.left {text-align:left !important;}
.right {text-align:right !important;}


hr {width:100%;height:1px;background:#d0d0d0;border:0;}


/* 폭 설정 */
.half {width:50% !important}
.col6 {width:16.66% !important;}
.col5 {width:20% !important;}
.col4 {width:25% !important;}
.col3 {width:33.33% !important;}
.col3x2 {width:66.66% !important;}
.w30 {width:30% !important;}
.w40 {width:40% !important;}
.w48 {width:48% !important;}
.w55 {width:55% !important;}
.w60 {width:60% !important;}
.w70 {width:70% !important;}
.w75 {width:75% !important;}
.w80 {width:80% !important;}

.w90 {width:90% !important;}
.w100 {width:100% !important;}
.w600 {width:600px !important;}



/* 마진,패딩 설정 */
.mg0 {margin-left:0 !important;margin-right:0 !important}
.pd0 {padding-left:0 !important;padding-right:0 !important}

.mt0 {margin-top:0px !important;}
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}
.mt40 {margin-top:40px;}
.mt50 {margin-top:50px;}
.mt60 {margin-top:60px;}
.mt70 {margin-top:70px;}
.mt80 {margin-top:80px;}
.mt90 {margin-top:90px;}
.mt100 {margin-top:100px;}
.mt120 {margin-top:120px;}
.mt130 {margin-top:130px;}

.mb0 {margin-bottom:0px !important;}
.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom:20px;}
.mb30 {margin-bottom:30px;}
.mb40 {margin-bottom:40px;}
.mb50 {margin-bottom:50px;}
.mb60 {margin-bottom:60px;}
.mb70 {margin-bottom:70px;}
.mb80 {margin-bottom:80px;}
.mb90 {margin-bottom:90px;}
.mb100 {margin-bottom:100px;}
.mb120 {margin-bottom:120px;}
.mb130 {margin-bottom:130px;}


.pl02 {padding-left:2%}
.pl03 {padding-left:3%}
.pl04 {padding-left:4%}
.pl05 {padding-left:5%}
.pl08 {padding-left:8%}
.pl10 {padding-left:10%}
.pl15 {padding-left:15%}
.pl20 {padding-left:20%}
.pl25 {padding-left:25%}
.pl30 {padding-left:30%}
.pl35 {padding-left:35%}

.pr02 {padding-right:2%}
.pr03 {padding-right:3%}
.pr04 {padding-right:4%}
.pr05 {padding-right:5%}
.pr08 {padding-right:8%}
.pr10 {padding-right:10%}
.pr15 {padding-right:15%}
.pr20 {padding-right:20%}
.pr25 {padding-right:25%}
.pr30 {padding-right:30%}
.pr35 {padding-right:35%}

.pt60 {padding-top:60px;}
.pb60 {padding-bottom:60px;}

.pl50 {padding-left:50px;}
.pr50 {padding-right:50px;}
.pd50 {padding:0 50px;}
.pd15 {padding:0 15px;}



/* 컬럼 설정 */
.flex {display: flex;}
.col {flex: 1;}


/* 공통 */
#wrap {width:100%; min-width:1200px; margin:auto; position:relative; height:100%;}

a.logo {width:278px;height:73px;display:block;text-indent:-3333px;background-image:url(images/logo.png);background-size:contain;background-repeat:no-repeat;}


#header {width:100%; height:200px; float: left;}
#header > .inner {position:relative; height: 130px;}
#header .logo {position:absolute;top:27px;left:50%;margin-left:-152.5px;}
#header .tel {position:absolute; right:0; top: 38px;}
#header .tel h3 {}


#header #gnb {width:100%;border-top:1px #d0d0d0 solid;border-bottom: 1px #d0d0d0 solid;height:70px;position:relative;top:0;}
#header #gnb ul {}
#header #gnb ul > li {float:left;line-height:68px;text-align:center;/*margin:0 18px;*/ width: 23%;}
#header #gnb ul > li.menu{width: 8%;} 
#header #gnb ul > li p {line-height:68px;}
#header #gnb ul > li p a {display:block;font-size:20px;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}
#header #gnb ul > li p a.on,#header #gnb ul > li p a:hover {font-weight:bold;color: #0072bc;}
#header #gnb .subnav { margin:auto;
width:220px;
 clear:both;
 display: none;
 position: absolute;
  z-index:100;
  text-align:left;
  top:68px;

  font-size:15px;
  margin-left: 30px;
  background-color:#fff;
  border-bottom:1px #d0d0d0 solid;
 }
#header #gnb .subnav dl { border-left:1px #e0e0e0 solid; padding-left:30px;}
#header #gnb .subnav dl:first-child {border-left:0;}
#header #gnb .subnav dd {line-height:30px;}

#header #gnb .subnav a:hover {color:#0072bc;}
#header #gnb .subnav a {display:block;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}

#header #gnb .menu p.topnav i {font-size: 40px;line-height: 68px;}
#header #gnb .menu .subnav {width:100%;left:0;padding:30px 0;margin-left: 0;}
#header #gnb .menu .subnav .inner > div {padding-left:50px;}
#header #gnb .menu .subnav .flex {padding-left: 180px !important;}
#header #gnb .menu .subnav .flex dl {padding-left:20px;}
#header #gnb .menu .subnav .flex dl.first {padding-left:0px;}
#header #gnb .menu .subnav .flex dd.big_title {font-size:20px;line-height: 35px;font-weight: 600;}



/* 공통 하단 */
#footer {width:100%; margin:auto; position:relative; float:left; background-color: #f0f0f0;}
#footer .inner{padding: 75px 0px; color: #505050;}
#footer .inner .top > .float{width: 360px; display: inline-block;  }
#footer .inner .top > .float .txt{padding-left: 78px; margin-top: 10px; line-height: 1.8;}
#footer .inner .top > .float .txt span{}

#footer .inner .top > .float_r{width: 740px; height: 300px;}
#footer .inner .top > .float_r ul {width: 100%; height: 100%;}
#footer .inner .top > .float_r ul li{float: left; width: 25%;}
#footer .inner .top > .float_r ul li dl dd a{line-height: 1.9; -webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out;	}
#footer .inner .top > .float_r ul li dl dd a:hover{font-weight: bold;}




/* 메인 */
#main {width:100%; min-width:1200px; float:left; position:relative; display:inline-block}


#main .flexslider {height:722px;}
#main .main_sl1 {width:100%;height:722px;background:url(images/main_sl1.jpg) center top no-repeat;}
#main .main_sl1 > .inner {height: inherit; background:url(images/main_sl_txt1.png) center top no-repeat;}
#main .main_sl2 {width:100%;height:722px;background:url(images/main_sl2.jpg) center top no-repeat;}


#main #m_cont {width: 100%; margin: 0 auto; display: inline-block; padding: 70px 0;}
#main #m_cont .inner h2{text-align: center;}

#main #m_cont ul.main_btn2{height: 458px; margin-top: 15px; clear: both; width: 100%;  }
#main #m_cont ul.main_btn2 li {float: left; height: 100%; width: 390px; margin-right: 15px;}
#main #m_cont ul.main_btn2 li:last-child {margin-right: 0px;}
#main #m_cont ul.main_btn2 li a{display: block; width: 100%; height: 100%;}



#main #customer {width: 100%; margin: 0 auto; display: inline-block; padding:0px 0px 70px;}

#main #customer .inner .float.board{border: 1px solid #e0e0e0; width: 580px; height: 450px;}
#main #customer .inner .float.board > .board_output {width: 100%; height: 50%; padding: 50px; }

#main #customer .inner .float.board .board_output h2 span i{font-weight: thin; color: #909090;}
#main #customer .inner .float.board hr{width: 83%; margin: 0 auto;}

#main #customer .inner .float_r.main_map {background: url(images/main_map.png)center no-repeat; width: 580px; height: 450px; position: relative;}
#main #customer .inner .float_r.main_map .map_btm{position: absolute; bottom: 0px; padding: 0px !important }



/* 서브 */
#sub {width:100%; display:inline-block; float: left;}
#sub .subtop {width:100%;height:359px;padding-top:105px;background:url(images/subtop_bg.jpg) center; text-align:center; position: relative;}

#sub .snb {width:1200px; background-color: #fff; height: 70px; line-height: 70px; position: absolute; left: 50%; margin-left: -600px; bottom: 0; border-radius: 20px 20px 0 0; overflow: hidden;}
#sub .snb li {float:left;}
#sub .snb li a {display:block;font-size:20px;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}
#sub .snb li a.on,#sub .snb li a.on:hover {background-color:#0072bc;color:#fff;font-weight: 600;}
#sub .snb li a:hover {background-color:#f0f0f0;}


#sub #content {width:100%; display:inline-block; margin-top:100px; margin-bottom:100px; }
#sub #content.mg0 {margin:0;}
#sub #content .paragraph {width:100%;display:inline-block; position:relative;}
#sub #content .row {width:100%; display:inline-block; position:relative;}
#sub #content .paragraph .temp {width: 100%; min-height: 600px; background-color: #f5f5f5; padding: 200px 0;}
#sub #content .paragraph h2.subject {background: url(images/h2_subject.png) left center no-repeat; padding-left: 35px; margin-bottom: 30px; font-weight: 600; color:#333;}
#sub #content .paragraph h3.title {background: url(images/h3_title.png) left center no-repeat; padding-left: 35px; margin-bottom: 8px; font-weight: 600;}
#sub #content .paragraph h3.title.c_green {margin-bottom: 20px;}

/*인사말*/
#sub #content.sub1_1 {}

/*올소치과 특별함*/
#sub #content .paragraph.bg_sky{padding:90px 0px; background-color: #f3fafe; text-align: center;}

/*오시는 길*/
#sub #content .paragraph .inner.sub1_6_bg{background: url(images/sub1_6_bg.jpg)center no-repeat; height: 612px; position: relative;} 
#sub #content .paragraph .inner.sub1_6_bg .map1_6{position: absolute; left:0;  bottom: 0;}



/* 테이블 설정 */
#sub #content .paragraph table.basic {width:100%;border-top:2px #333 solid;border-collapse:collapse;}
#sub #content .paragraph table.basic td,#sub #content .paragraph table.basic th {padding:10px 25px; border-bottom:1px #d0d0d0 solid; border-left:1px #d0d0d0 solid;}
#sub #content .paragraph table.basic th {background-color: #f5f5f5;}
#sub #content .paragraph table.basic th h5 {font-weight: 600;}
#sub #content .paragraph table.basic .bg_gray {background-color:#f5f5f5;}
#sub #content .paragraph table.basic .first { border-left: 0; }
#sub #content .paragraph table.basic td.price {text-align:right; }
#sub #content .paragraph table.basic td.price p {letter-spacing: 0;}
#sub #content .paragraph table.basic td.price p:before {content:"\20A9"; font-weight:100;font-size:15px;padding-top:6px; margin-right:10px;}
/* 필수/권장 아이콘 */
.surely{display: inline-block;background-color: #0072bc; color:#fff; padding:0 5px; margin: 2px 2px 0 0; border-radius: 5px;}
.recom{display: inline-block;background-color: #2fbaf2; color:#fff; padding:0 5px; margin: 2px 2px 0 0; border-radius: 5px;}



/* 탭 */
#sub #content .tabs {width:100%;text-align:center;float:left;}
#sub #content .tabs ul {}
#sub #content .tabs li {line-height:50px;border-bottom:1px #e0e0e0 solid;}
#sub #content .tabs li a {display: block; height: inherit;}
#sub #content .tabs li.active a {background-color: #888; color: #fff;}
#sub #content .tab_content {width:100%;padding-top:35px;padding-bottom:80px;display:inline-block;}



/* 게시판 */
#sub #content .board_box {width:100%;display:inline-block;font-size:17px;line-height:1.7;min-height:500px}



@media screen and (max-width:320px) {
     body {zoom:50%;}
 }
 @media screen and (min-width:321px) and (max-width:359px) {
     body {zoom:50%;}
 }
 @media screen and (min-width:360px) and (max-width:374px) {
     body {zoom:56.2%;}
 }
 @media screen and (min-width:375px) and (max-width:375px) {
     body {zoom:58.5%;}
 }
 @media screen and (min-width:376px) and (max-width:479px) {
     body {zoom:64.6%;}
 }
 @media screen and (min-width:480px) and (max-width:639px) {
     body {zoom:75%;}
 }
  /* 아이패드(1024X768)보다 큰 스크린 사이즈와 해상도를 갖는 모든 기기에서의 해상도 설정
 @media all and (min-width: 640px) {
     body {width:640px; margin:0 auto;}
  */
  @media all and (min-width: 640px) {
     body {zoom:100%; margin:0 auto;}
 }






/*모바일에서 바뀌는 css*/
@media only screen and (max-width:640px) and (min-width:320px){
    #wrap,#header,#footer,#main,#sub {
        max-width: 640px; min-width: 320px;
    }
	.inner,#sub .snb,#sub #content,#sub #content ul.tabs  {
		width:  600px;
	}
	.pc_show{
		display: none !important;
	}
	#header{
		height: 100px; margin-top: 20px; 
	}
	#header .inner a.logo{
		top: 0px;
	}
	#header .menu {
		float:right; margin-top:15px;
	}
	#header .menu i {
		font-size:55px; color:#0072bc; font-weight: 600;
	}
	#main .flexslider {
		height:603px;
	}
	#main .main_sl1 {
		height:603px; background:url(images_m/main_sl1.jpg) center top no-repeat;
	}
	#main .main_sl2 {
		height:603px; background:url(images_m/main_sl2.jpg) center top no-repeat;
	}
	#main .main_sl3 {
		height:603px; background:url(images_m/main_sl3.jpg) center top no-repeat;
	}
	#main .main_sl4 {
		height:603px; background:url(images_m/main_sl4.jpg) center top no-repeat;
	}
	#main .paragraph{
		padding: 80px 0px;
	}
	.flex-control-nav{
		z-index: 1000 !important; bottom: 182px !important;
	}
	#main #m_cont ul.main_btn2{
		height: 330px; margin-top: 10px;
	}
	#main #m_cont ul.main_btn2 li{
		width: 193px; margin-right: 10px;
	}
	#main #customer .inner .board.float{
		width: 600px;
	}
	#main #customer .inner .main_map.float_r{
		width: 600px;
		height: 555px;
		background-color: #eee8e8;
		margin-top: 20px;
	}
	#footer .inner{
		padding: 50px 0px;
	}
	#footer .inner .top > .float{
		text-align: center;
		float:none !important;
		width: 600px;
	}
	#footer .inner .top > .float .logo{
		position: absolute;
		left: 50%;
		margin-left: -146px;
	}
	#footer .inner .top > .float .txt{
		padding-left: 0px;
		margin-top: 90px;
		margin-bottom: 20px;
	}
	#sub {
		float: none !important;
	}
	#sub .snb{
		margin-left: -300px;
	}
	#sub .snb.double {
		height: 140px;
	}
	#sub #content {
		display: block;
		margin: 80px auto;
	}
	.gallery{
		padding: 50px !important;
	}
	#sub #content .paragraph .row.gallery .pika-stage{
		height: 330px !important
	}
	
	#sub #content .paragraph .inner.sub1_6_bg{
		background: url(images_m/sub1_6_bg.jpg)center no-repeat; height:1236px;
	}
	#sub #content .paragraph .inner.sub1_6_bg .map1_6{
		top: 0;
	}
	#sub #content.sub1_1{
		width: 640px !important;
	}
}


/*PC에서 바뀌는 css*/
@media only screen and (min-width: 641px) {
/*    #wrap,#header,#footer,#main,#sub {
        min-width: 1200px;
    }
	.inner{
		1200px;
	}*/
	.m_show{
		display: none !important;
	}
	
}