@charset "utf-8";


#intro1 {text-align:center; background:url('/images/sub/intro1-bg.png')no-repeat; background-position:top center}

#intro1 h3 {font-size:3.125em; color:#222; padding:2.1em 0 0.4em;  line-height:1.2em;  font-family: 'SeoulHangangM'; letter-spacing:-0.02em}
#intro1 .t1 {font-size: 1.25em; line-height:1.8em; font-family: 'Pretendard-Regular';}

.intro1-img {padding-top:4em;}
.intro1-img ul {overflow:hidden}
.intro1-img ul li {width:calc(25% - 10px); margin:5px; float:left}
.intro1-img ul li img {width:100%;}

@media all and (max-width:976px) {
	#intro1 {background-size:80% auto}
}
@media all and (max-width:568px) {
	.intro1-img ul li {width:calc(50% - 10px)}
}



#intro2 {overflow:hidden}
#intro2 .img {background:url('/images/sub/intro2-img2.png')no-repeat bottom center; height:800px; width:40%; float:left; background-size: cover;}
#intro2 .cont {width:55%; height:800px; padding-left:7%;  float:left; overflow:hidden; background:url('/images/sub/intro2-cont-bg.png')no-repeat; background-position:right bottom}
#intro2 .cont .cont-tit {padding:1em 0 4em}
#intro2 .cont .cont-tit dl {padding-bottom:2em;  border-bottom:7px solid #edf2f7}
#intro2 .cont .cont-tit dl dt {font-size: 1.333em; line-height:1.5em;  color:#90c51f;font-family: 'Pretendard-Bold'; }
#intro2 .cont .cont-tit dl dd {font-size: 3.667em; color:#222; line-height:1.2em; font-family: 'Pretendard-Bold'; }
#intro2 .cont .cont-tit dl dd .f-l {font-family: 'Pretendard-Light';}
#intro2 .cont .txt {width:50%; float:left}
#intro2 .cont .txt .s-tit {margin-bottom:1.5em; font-size:1.333em; color:#21a359; font-family: 'Pretendard-Bold'; display:inline-block;  border-bottom:2px solid #21a359}
#intro2 .cont .txt ul li {padding-bottom:0.75em; font-size:1.2em; color:#686868; word-break: keep-all;}

@media all and (max-width:1280px) {
	#intro2 .img {height:750px; background-size:auto 100%;}
	#intro2 .cont {height:750px}
	#intro2 .cont .txt:nth-child(3){padding-left: 25px;}
}
@media all and (max-width:976px) {
	#intro2 .img {height:650px;}
	#intro2 .cont {height:650px; background-size:38% auto}
}
@media all and (max-width:767px) {
	#intro2 .img {width:100%; height:90vw}
	#intro2 .cont {margin-top:3em; padding:0 5%; width:100%; height:auto; background-size:30% auto;}
}

.BG{background-color: #f5f5f3; padding: 5em 0;}
.tbc{display: flex; justify-content: space-around; align-items: center;}
.tbc .img{}
.tbc > .img img{width: 100%;}
.tbc .txt{min-width:40vw;}
.tbc .txt h4{font-size: 1.75em; font-weight: 300; color: #444;}
.tbc .txt h3{font-size: 2.5em; font-weight: 700; color: #212121; line-height: 1.6em;}
.tbc .txt p{margin-top: 10px; font-weight: 300; font-size: 1.125em; color: #666; line-height: 1.8em;}
.tbc .txt .img{margin-top: 3em;}

@media all and (max-width:767px){
    .tbc{flex-direction: column;}
    .tbc .txt{text-align: center; width: 100%;}
    .tbc .txt .img{text-align: center; margin: 0 auto; margin-top: 2em; max-width: 140px;}
    .tbc .txt .img img{max-width: 100%;}
    .tbc > .img{margin-top: 3em;}
}


.history{padding-top: 7em;}
.history h3{text-align: center; font-size: 2.4em; font-weight: 400;}
.history h3 span{color: #90c51f; font-weight: 600;}
.history ul{display: flex; flex-wrap: wrap; margin-top: 4em;}
.history ul li{width: 32.333333%; margin: 1% 0.5%;}
.history ul li .img{}
.history ul li .img img{max-width: 100%;}
.history ul li p{text-align: center; background-color: #525050; color: #fff; padding: 15px 10px; font-size: 1.125em; line-height: 1.5em; height: 100px; display: flex; justify-content: center; align-items: center;}

@media all and (max-width:767px){
    .history ul li{width: 49%;}
    .history ul li p{height: 80px;}
    .history ul li p br{display: none;}
}

@media all and (max-width:480px){
    .history ul li{width: 100%;}
    .history ul li p{height: 60px;}
}


#intro3 {height:900px; padding:3.5em 7em;  background:#ecebf0 url('/images/sub/intro3-bg.png') no-repeat left top;}
#intro3 .cont {width:50%; float:right}

#intro3 .csHour {margin:10px 0; padding:2em 4em; background:rgba(255,255,255,0.85); border-radius:30px; }
#intro3 .csHour .tit {padding-bottom:1.5em}
#intro3 .csHour .tit h4 {font-size: 1.85em; line-height:1.5em;  color:#90c51f; font-family: 'Pretendard-Bold';}
#intro3 .csHour .tit .t1 {color:#555; font-size:1em; line-height: 1.2em; opacity:.7}

#intro3 .hour { font-size: 1.25em;  }
#intro3 .hour dl { overflow: hidden; color:#333; }
#intro3 .hour dl dt,
#intro3 .hour dl dd {  float: left; margin-bottom: 0.7em;   }
#intro3 .hour dl dt { width: 100px; font-weight:600 }
#intro3 .hour dl dd { width: calc(100% - 100px); letter-spacing: 0; }

#intro3 .tel dl dt {  font-size:2.0em; padding-bottom:5px; line-height:1.2em; font-family: 'Pretendard-Bold';}
#intro3 .tel dl dd {font-size:1.3em; line-height:1.2em;}

@media all and (max-width:1280px) {
	#intro3 {height:880px;  padding:3.5em; }
	#intro3 .cont {width:47%;}
}
@media all and (max-width:1150px) {
	#intro3 {background-position:13% top;  }
}
@media all and (max-width:976px) {
	#intro3 {height:880px; }
	#intro3 .cont {width:57%;}
	#intro3 .hour dl dt { width: 80px; }
	#intro3 .hour dl dd { width: calc(100% - 80px); }
}
@media all and (max-width:767px) {
	#intro3 {height:auto; background-position:left top; background-size:auto 60%; padding:55vw 3em 115vw;}
	#intro3 .cont {width:100%;}
}
@media all and (max-width:568px) {
		#intro3 {padding:55vw 3em 130vw;}
}
@media all and (max-width:480px) {
		#intro3 {padding:55vw 3em 145vw;}
}

#sMap { position: relative; overflow: hidden; /*z-index:-1  */}
#sMap .root_daum_roughmap .wrap_map  { height: 550px !important; }
.wrap_controllers  { display: none; }
.map_border {  display: none;}

@media all and (max-width:976px) {

#sMap .root_daum_roughmap .wrap_map  { height: 55vw !important; }
.locaInfo dl { padding: 5% 0 5% 100px; background-size: 80px; font-size: 1.3em; }

}

.tb-style1 { width: 100%;  border-top: 2px solid #8fc320; text-align: center;  min-width: 1240px;}
.tb-style1 th {font-size: 1.1em; width: 20%; background: rgba(205,226,169, 0.2); color:#212121; text-align: center;}
.tb-style1 td {font-size: 1.1em; color:#686868}
.tb-style1 th, .tb-style1 td { padding: 1em 0.5em; border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;}
.tb-style1 td:last-child {border-right: 0;}
.br0{border-right: 0 !important;}
.tb-scroll .ca_mo{display: none !important;}
@media all and (max-width:1239px){
    .tb-scroll .ca_mo{display: block !important;}
    .tb-scroll{width: 100%; overflow-x: scroll; }
}
@media all and (max-width:480px) {
	.tb-style1 th { width: 30%;}
}







#top-img {width:100%; height:420px; border-top-right-radius:60px; border-bottom-left-radius:60px;  background-position:left center; background-repeat:no-repeat; background-size:cover; position:relative}
#top-img:before {content:'BONES ORTHOPEDIC CLINIC'; font-size:3.3em; opacity:.3; color:#FFF; font-family: 'Vitro_core'; position:absolute; right:0.5em; top:0.7em;  }
#top-img .top-cont {width:93%; max-width:898px; height:330px; padding:4em 5em; color:#FFF; background:url('/images/sub/top-cont-bg.png') no-repeat; background-size:cover; position:absolute; right:0; bottom:0}
#top-img .top-cont h3 {font-size:2.5em; padding-bottom:0.8em;  line-height:1.2em;  font-family: 'Daehan-Bold';}

@media all and (max-width:1399px) {
	#top-img .top-cont { max-width:700px;}
}
@media all and (max-width:1080px) {
	#top-img {margin-bottom:230px}
	#top-img .top-cont { max-width:unset;  bottom:unset; top:80%}
}
@media all and (max-width:976px) {
	#top-img {margin-bottom:190px}
	#top-img .top-cont { height:290px;}
}
@media all and (max-width:767px) {
	#top-img {margin-bottom:170px}
	#top-img:before {font-size:4vw;  right:1em}
	#top-img .top-cont { height:270px; }
}
@media all and (max-width:640px) {
	#top-img {margin-bottom:40vw}
	#top-img .top-cont { height:52vw;}
}
@media all and (max-width:568px) {
	#top-img {width:95%; margin-bottom:40vw; height:70vw;}
	#top-img:before {right:2em}
	#top-img .top-cont { width:98%; height:56vw;  padding:3em; right:-5%; }
}


.clinic1-t-bg {background-image:url('/images/sub/top-bg-clinic1.png')}
.clinic2-t-bg {background-image:url('/images/sub/top-bg-clinic2.png')}
.clinic3-t-bg {background-image:url('/images/sub/top-bg-clinic3.png')}
.clinic4-t-bg {background-image:url('/images/sub/top-bg-clinic4.png')}
.clinic5-t-bg {background-image:url('/images/sub/top-bg-clinic5.png')}
.clinic6-t-bg {background-image:url('/images/sub/top-bg-clinic6.png')}
.clinic7-t-bg {background-image:url('/images/sub/top-bg-clinic7.png')}
.clinic8-t-bg {background-image:url('/images/sub/top-bg-clinic8.png')}

.top-cont-list {}
.top-cont-list li {margin-bottom:1em; border-bottom:1px dotted rgba(255,255,255,0.3); position:relative}
.top-cont-list li:last-child {margin-bottom:0;}
.top-cont-list li:before {content:''; width:16px; height:15px; background:url('/images/sub/top-cont-icon.png') no-repeat; position:absolute; left:0; top:8px;}
.top-cont-list li p {padding-left:25px; font-size:1.25em; line-height:1.2em; padding-bottom:0.6em;}






.s-section {padding: 7% 0 0 0;}
.s-section.bg {background:#fdfcf9}

@media screen and (max-width:976px) {
   .s-section  { padding: 8% 0; }
}
@media screen and (max-width:568px) {
   .s-section  { padding: 10% 0; }
}




.s-Title {text-align:center;}
.s-Title h3 {font-size:2.8em; padding:10px 0 0.7em; font-family: 'Vitro_core'; color:#222; line-height:1.4em; letter-spacing:0 }
.s-Title h3.st {font-size:2.3em; }
.s-Title .t1 {font-size:1.2em; line-height:1.4em; padding-bottom:0.5em; color:#666}
.s-Title .t1 b{color: #333;}
.s-Title p.t2{font-size: 1.2em; font-weight: 300; color: #666; line-height: 1.6em; padding: 30px; border: 2px dashed #eee;}
.s-Title p span{font-weight: 600; color: #333;}


.cause {padding-top:5em;}
.symptom {padding-top:5em;}


.halfCont { position: relative; width: 100%; overflow: hidden; display: table; }
.halfCont > div { position: relative; display: table-cell; vertical-align: middle;}
.halfCont .img { width: 40%;  }
.halfCont .img img { width: 100%;}
.halfCont .cont {  width: 60%;  position: relative; padding: 0 5%; background: #fff; }
.halfCont .cont.bdBox { border-width: 6px; padding: 0 4%;  border:10px solid rgba(223,238,195,0.5)}
.halfCont .cont.bdBox h4{font-size: 2em; font-weight: 400; color: #444; line-height: 1.4em;}
.halfCont .cont.bdBox h3{background-color: #8FC41E; color: #fff; display: inline-block; padding: 10px; font-size: 2.25em; letter-spacing: 0; margin-top: 5px;}

@media all and (max-width:1280px) {
  .halfCont  { background: #fff; }
  .halfCont .cont { padding: 3% 5%; }
  .halfCont .cont.bdBox { padding: 3% 4%; }

  .halfCont.mbdBox { border: 6px solid #ebeef8; }
  .halfCont.mbdBox .cont.bdBox { border-width: 0; }
}
@media all and (max-width:976px) {
  .halfCont { display: block;  margin: 0 auto;  }
  .halfCont > div { display: block; width: 100%; }
  .halfCont .img { width:100%;  }
  .halfCont .cont {  width: 100%; padding: 5% !important; }
}


.orderList { }
.orderList li { position: relative; counter-increment: number; border-bottom: 1px dashed #e0e4f3; padding: 0.8em 0;  }
.orderList li::before { content: counter(number, decimal-leading-zero); display: inline-block; vertical-align: middle;
                              color:#10a766; font-size: 1.8em; font-weight: 900; padding-right: 0.7em; max-width: 18%;   font-family: 'Daehan-Bold' }
.orderList li p::before { content:''; width: 1px; height: 20px; position: absolute; left: 0; top: 50%; margin-top: -10px;
                                        background: #e0e4f3; display: block; }
.orderList li p { display: inline-block; vertical-align: middle; font-size: 1.125em;  position: relative; padding-left: 1.2em;  max-width: 80%; color:#555 }


.checkList { }
.checkList ul {overflow: hidden; } 
.checkList ul li {padding: 1.5em 0;  line-height: 1.2em; width: 48.5%; border-radius: 50px; border:5px solid rgba(223,238,195,0.5);  display: inline-block; position: relative; margin:2px 6px; background:#FFF url('/images/sub/check_bg.png') no-repeat 20px center;}
.checkList ul li p {float: left;  padding-left: 55px; font-size: 1.125em; color:#555}

.checkList dl  {padding-left:70px}
.checkList dl dt {display:inline-block; width:60px; float:left; font-size:1.4em; padding-top:0.5em; font-weight:600}
.checkList dl dd {display:inline-block; width:calc(100% - 60px); float:left;  font-size: 1.125em; color:#555; line-height:1.3em;}
@media screen and (max-width:1060px) {	
	.checkList ul {width:80%; margin:0 auto;}
	.checkList ul li { width:calc(100% - 10px); }
}
@media screen and (max-width:780px) {	
		.checkList ul {width:96%;}
}

.checkList2 { }
.checkList2 ul {overflow: hidden; margin-top: 2em;} 
.checkList2 ul li {padding: 1.5em 0;  line-height: 1.2em; width: 100%; border-radius: 50px; border:5px solid rgba(223,238,195,0.5);  display: inline-block; position: relative; margin:2px 6px; background:#FFF url('/images/sub/check_bg.png') no-repeat 20px center;}
.checkList2 ul li p {float: left;  padding-left: 55px; font-size: 1.125em; color:#555}

.checkList2 dl  {padding-left:70px}
.checkList2 dl dt {display:inline-block; width:200px; float:left; font-size:1.4em;  font-weight:600}
.checkList2 dl dd {display:inline-block; width:calc(100% - 200px); float:left;  font-size: 1.125em; color:#555; line-height:1.3em;}
@media screen and (max-width:1060px) {	
	.checkList2 ul {width:80%; margin:0 auto;}
	.checkList2 ul li { width:calc(100% - 10px); }
}
@media screen and (max-width:780px) {	
		.checkList2 ul {width:96%;}
    .checkList2 dl dd{width: 100%; margin-top: 10px;}
}

.checkList3 ul{ display: flex; margin-top: 2em; counter-reset: section;}
.checkList3 li{width: 23%; margin: 0 1%; text-align: center; display: flex; justify-content: center; align-items: center; padding: 6em 2em 2em; background: linear-gradient(to right, #8AB525, #6AAC36); border-radius: 15px; position: relative;}
.checkList3 li::before{counter-increment: section;
    content: "0" counters(section, "."); position: absolute; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.5);  font-size: 4em; font-family: 'Vitro_core'; top: 35px;}
.checkList3 li p{font-size: 1.25em; font-weight: 800; line-height: 1.5em; color: #fff;}

@media all and (max-width:640px){
    .checkList3 ul{flex-wrap: wrap;}
    .checkList3 li{width: 48%; margin-bottom: 2%;}
    .checkList3 li::before{top: 30px; font-size: 3em;}
}


.blog-btn {text-align:center; margin-top:4em}
.blog-btn a {display:inline-block;  text-align:center; padding:2em 5em; border-top-left-radius:30px;  border-top-right-radius:30px;  background: linear-gradient( -45deg, #50bc79, #0a3885 );}
.blog-btn a p {font-size:1.35em; color:#FFF; font-weight:400; font-family: 'Daehan-Bold';}
.blog-btn a:hover p {color:#FFFF00} 

.diag{margin-top: 5em; padding: 3em; border: 1px solid #ddd; background-color: #fbfbfb;}
.diag ul{display: flex; justify-content: space-between; margin-top: 2em;}
.diag ul li{border: 1px solid #ddd; width: 31.33333%; text-align: center; border-top: 3px solid #1e702f; border-radius: 15px; background-color: #fff; box-shadow: 2px 3px 10px rgba(0,0,0,0.05); border-top-left-radius: 0; border-top-right-radius: 0;}
.diag ul.w2 li{width: 48%;}
.diag ul li h3{border-bottom: 1px dashed #ccc; font-size: 2em; padding: 1em 0; color: #1E702F; letter-spacing: 0;}
.diag ul li p{padding: 20px 30px; font-size: 1.125em; color: #666; line-height: 1.8em;}

ol.cont{max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between;}
ol.cont li{width: 49%; text-align: center; margin-bottom: 20px; border: 1px dashed #ccc; padding: 2em 3em; align-items: center; background-color: #fff;}
ol.cont li h4{ font-size: 2em; color: #58a56d; line-height: 1em;}
ol.cont li h4::after{content: ''; display: block; height: 4px; width: 60px; background-color: #58a56d; margin: 0 auto; margin-top: 10px;}
ol.cont li p{margin-top: 20px; font-size: 1.125em; font-weight: 300; color: #666; line-height: 1.8em;}

@media all and (max-width:1060px){
    .diag ul{flex-wrap: wrap;}
    .diag ul li{width: 48%; margin-bottom: 2em}
}
@media all and (max-width:640px){
    .diag{padding: 2em;}
    .diag ul li{width: 100% !important; border-radius: 10px;}
    .diag ul li p{padding: 15px;}
    
    ol.cont{flex-wrap: wrap;}
    ol.cont li{width: 100%;}
}


.list_box{padding-top: 5em;}
.list_box ul{display: flex; margin-top: 3em;}
.list_box ul.center{justify-content: center;}
.list_box ul li{width: 23%; margin: 0 1%; text-align: center;}
.list_box ul li .img{border: 1px solid #e3e3e3;}
.list_box ul li .img img{ width: 100%;}
.list_box ul li p{font-size: 1.25em; font-weight: 300; background-color: #4b9544; color: #fff; padding: 15px 0;}
.list_box ul li:nth-child(even) p{background-color: #74A731;}

@media screen and (max-width:780px) {	
    .list_box ul.center{justify-content: flex-start}
    .list_box ul{ flex-wrap: wrap;}
    .list_box ul li{width: 48%;}
    .list_box ul li:nth-child(1),
    .list_box ul li:nth-child(2){margin-bottom: 1em;}
    .list_box ul li:nth-child(even) p{background-color: #4b9544}
    .list_box ul li:nth-child(2) p,
    .list_box ul li:nth-child(3) p{background-color: #74A731;}
}


.tit_img{margin-bottom: 1.5em;text-align: center;}
.tit_img img{ max-width: 100%;}

.sub_tit{display: inline-block; text-align: center; font-size: 1.5em; letter-spacing: -0.05em; border: 1px dashed #50ab45; padding: 10px; color: #50AB45; margin-bottom: 2em;}

.tip{font-size: 1.125em; color: #666; display: inline-block; margin-top: 20px; border: 1px dashed #ccc; padding: 2em;}
.tip b{font-weight: 600; font-size: 1.25em; color: #222; margin-right: 10px;}


#clinicBox {overflow:hidden; margin-top: 5em;}
#clinicBox .clinic-bg {width:50%; height:380px; float:left; background-repeat:no-repeat; background-position:center; background-size:cover;position:relative; }
#clinicBox .clinic-bg p {font-size:2.3em; text-align:right; position:absolute; opacity:.3; right:10px; bottom:-70px; line-height:0.9em; color:#c7c7c7;  font-weight: 800; letter-spacing:0.03em; font-family: 'Montserrat', sans-serif; text-transform:uppercase }
#clinicBox .clinic-cont {width:50%; height:400px; float:left;  margin-top:70px; background:#f5f5f3 url('/images/sub/clinic-cont-bg.png') no-repeat right center; background-size:auto 100%; display:table; }
#clinicBox .clinic-cont .in-cont {display:table-cell; vertical-align:middle; box-sizing:border-box; text-align:center; color:#fff;}
#clinicBox .clinic-cont .eng {padding-bottom:4em; font-size:0.9375em;  color:#139250;  opacity:.5; letter-spacing:0; text-transform:uppercase;   font-family: 'Montserrat', sans-serif;font-weight:700; }
#clinicBox .clinic-cont h3 {font-size:3em; font-weight:700; color:#222; font-family: 'GmarketSans'; letter-spacing:-0.02em; padding-bottom:0.2em; line-height:1.2em;  }
#clinicBox .clinic-cont p.t1 {font-size:1.125em; line-height:1.7em; font-weight:500; padding: 0 50px; margin-top: 20px; color: #666;}

.clinic1-1 {background-image:url('/images/sub/clinic1-1-bg.png')}
.clinic1-2 {background-image:url('/images/sub/clinic1-2-bg.png')}
.clinic1-3 {background-image:url('/images/sub/clinic1-3-bg.png')}
.clinic1-4 {background-image:url('/images/sub/clinic1-4-bg.png')}
.clinic1-5 {background-image:url('/images/sub/clinic1-5-bg.png')}
.clinic1-6 {background-image:url('/images/sub/clinic1-6-bg.png')}

@media all and (max-width:930px) {
	#clinicBox .clinic-bg {width:100%;  height:45vw}
	#clinicBox .clinic-bg p { bottom:0;  color:#FFF; }
	#clinicBox .clinic-cont {width:100%;  margin-top:0; height:auto; padding:5% 0;}
}
@media all and (max-width:480px) {
	#clinicBox .clinic-cont .line { height:20px;}
	#clinicBox .clinic-bg p {font-size:2.0em;}
	#clinicBox .clinic-cont .eng {padding-bottom:2em;}
	#clinicBox .clinic-cont h3 {font-size:2.8em; }
}

.partner{background-color: #f5f5f3; padding: 4rem 0; margin-top: 2rem;}
.partner .s-inner{display: flex;}
.partner li{ width: 24%; margin: 0 .5%; text-align: center; border: 1px solid #ddd; padding: 2em; background-color: #fff;}
.partner li .img{height: 120px; display: flex; justify-content: center; align-items: center;}
.partner li .img img{max-width: 100%;}
.partner li h3{padding-top: 20px; margin-top: 10px; border-top: 1px dashed #ccc;}
.partner li p{color: #777}

@media all and (max-width:999px){
    .partner .s-inner{flex-wrap: wrap;}
    .partner li{width: 49%; margin-bottom: 1%;}
    .partner li .img{height: 90px;}
}