@charset "utf-8";

.exer1-t-bg {background-image:url('/images/sub/top-bg-exer1.png')}
.exer2-t-bg {background-image:url('/images/sub/top-bg-exer2.png')}
.treat1-t-bg {background-image:url('/images/sub/top-bg-treat1.png')}

.imgList  { margin-top:3%; text-align: center; overflow: hidden; display: flex; width: 100%; justify-content: center; flex-wrap: wrap; }
.imgList.start  {justify-content: flex-start; }
.imgList li { display: inline-block; *zoom:1; *display: inline; background: #fff; margin: 10px; border:1px solid #e9e9e9  }
.imgList li img { width:100%}
.imgList li dl dt { color:#fff; font-size: 1.25em; background: #8fc41e;   font-family: 'GmarketSans';  font-weight: 500;   line-height: 1.5em; padding:0.5em 0 0.2em;}
.imgList li dl dt.bg1 {background: #8fc41e !important;  }
.imgList li dl dt.bg2 {background: #21a359 !important;  }
.imgList li dl dd {line-height:1.6em; padding:1.3em; word-break: keep-all;}
.imgList li:nth-child(even) dl dt { background:#21a359; }

.imgList.w1 li { width: 464px; max-width:100% } 
.imgList.w2 li { width: 464px; max-width:50% } 
.imgList.w3 li { width: 430px; max-width:33% } 
.imgList.w4 li { width: 330px; max-width:25% } 


@media all and (max-width:1305px) {
	.imgList.w3 li { width: 340px;} 
	.imgList.w4 li { width: 340px;  max-width:33% } 

}
@media all and (max-width:1173px) {
	.imgList.w3 li { width: 450px; max-width:50%} 
	.imgList.w4 li { width: 450px;  max-width:50% } 
}
@media all and (max-width:1022px) {
	.imgList.w2 li { width: 380px; max-width:40% } 
	.imgList.w3 li { max-width:40%} 
	.imgList.w4 li { max-width:40% } 
}
@media all and (max-width:640px) {
	.imgList.w1 li { max-width:60% } 
	.imgList.w2 li { max-width:44% } 
	.imgList.w3 li { max-width:44%} 
	.imgList.w4 li { max-width:44% } 
}

.tit{text-align: left; font-size: 2em; font-weight: 600; margin-top: 2em; color: #222; margin-bottom: 30px; border-bottom: 1px dashed #ccc; padding-bottom: 1em;}

.imgList2{}
.imgList2 li{margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dashed #ccc; display: flex; justify-content: space-between; align-items: center;}
.imgList2 li .img{max-width: 38%;}
.imgList2 li .img img{max-width: 100%;}
.imgList2 li .txt{max-width: 58%;}
.imgList2 li .txt h4{font-size: 2em; font-weight: 400; color: #444; line-height: 1.4em;}
.imgList2 li .txt h3{background-color: #8FC41E; color: #fff; display: inline-block; padding: 10px; font-size: 2.25em; letter-spacing: 0; margin-top: 5px;}
.imgList2 li .txt p{ font-size: 1.125em; font-weight: 300; margin-top: 20px; line-height: 1.8em; color: #666;}

@media all and (max-width:676px){
    .tit{text-align: center;}
    .imgList2{margin-top: 20px; margin-bottom: 20px;}
    .imgList2 li{flex-direction: column;}
    .imgList2 li .img{order: 2; max-width: 100%; margin-top: 25px;}
    .imgList2 li .img img{max-width: 50vw;}
    .imgList2 li .txt{max-width: 100%; text-align: center;}
}


.orderList2 { overflow: hidden; padding-top: 4%; display: flex; flex-wrap: wrap;}
.orderList2 > li { counter-increment: number; line-height: 1.5em; margin: 0 0 15px 0; padding-bottom: 15px; font-size: 1.25em; color:#535353; border-bottom: 1px solid #e5e5e5; overflow: hidden; width: 50%;}
.orderList2 > li:before { content: counter(number, decimal) ; background:url("/images/sub/orderBG.png") no-repeat; text-align:center; color:#fff; font-size:1.125em; 
						 width:40px; height:45px; line-height:45px; display:inline-block; margin-right:18px; }
/*.orderList2 > li:last-child { margin-bottom: 0; }*/
.orderList2 > li p { width: calc(100% - 58px); float: right; color:#535353; line-height: 45px; font-family: 'Noto Sans Korean' !important; font-weight:400; }

@media screen and (max-width:1300px) {
.orderList2 > li { line-height: 2.8vw;  }
.orderList2 > li:before { width: 3vw; height: 3.8vw; line-height: 3.5vw; background-size: 100%; margin-right: 1vw; }
.orderList2 > li p { width: calc(100% - 3.5vw); float: right;  line-height: 2.8vw; }
}
@media all and (max-width:767px){
    .orderList2 > li:before{width: 5vw; height: 5.8vw; line-height: 5.8vw;}
}
@media all and (max-width:480px){
    .orderList2 > li:before{width: 7vw; height: 7.8vw; line-height: 7.8vw;}
}


.page-bg {padding:5%; background-size: cover; background-position: center; text-align: left; }
.page-bg .w50 { max-width: 50%; }

.exer6-bg { background-image:url("/images/sub/exer6-bg2.png"); }
.exer7-bg { background-image:url("/images/sub/exer7-bg.png"); }
.treat1-bg { background-image:url("/images/sub/treat1-bg.png"); }
.treat2-bg { background-image:url("/images/sub/treat2-bg.png"); }


.s-title1 h3 {font-size:2.3em; color:#222; line-height:1.2em; margin-bottom: 1em;    }

@media all and (max-width:1280px) {
   .page-bg  { background-position: 70% center; }
   .page-bg .w50 { max-width: 60%; }
}
@media all and (max-width:976px) {
   .page-bg  { background-position: 60% center; }
   .page-bg .w50 { max-width: 70%; }
}
@media all and (max-width:767px) {
   .page-bg  { background-position: 80% center; }
   .page-bg .w50 { max-width: 100%; }
   .page-bg.exer6-bg { background-position: left center; }
}

.numList { overflow: hidden; }
.numList li  { position: relative; counter-increment: number; line-height: 1.4em; font-size: 1.125em; padding: 0.8em 0;
                     background:url("/images/sub/dotline.png") repeat-x bottom;  }
.numList li::before {  content: counter(number, decimal-leading-zero); color:#fff; width: 34px; line-height: 34px; display: inline-block; margin-right: 0.5em;
                                 background:#578e21; border-radius: 7px; text-align: center;  font-size: 0.83em; font-weight: 700; vertical-align: middle; }
.numList li:nth-child(even)::before {background:#10a766;}
.numList li p { display: inline-block; max-width: calc(100% - 37px - 0.5em); vertical-align: middle; }

.numList .od-tit { color:#4b4b4b; font-weight: 600;}

@media all and (max-width:1024px) {
   .numList li { font-size: 1.05em; }
   .numList li:before { width: 32px; line-height: 32px; }
}
@media all and (max-width:767px) {
   .numList li { font-size: 1em; }
   .numList li:before { width: 30px; line-height: 30px; font-size: 0.78em; }
}
@media all and (max-width:480px) {
   .numList li:before { width: 24px; line-height: 24px; }
}

.colList {overflow:hidden; display: flex; flex-wrap: wrap; justify-content: center;}
.colList li {float:left; border:1px solid #e3e3e3}
.colList li img {width:100%;}
.colList li dl {background:#FFF;}
.colList li dl dt {margin-top:-30px;  font-size:1.3em; font-weight:500; padding:0.5em 2em 0.5em 2em; background:#10a766 ; color:#fff; display:inline-block}
.colList li dl dd {padding:30px; line-height:1.6em; font-weight:300 }

.colList.col4 li {width:calc(25% - 30px); margin:0 15px;}
.colList.col3 li {width:calc(33.3333% - 30px); margin:0 15px;}
.colList.col2 li {width:calc(50% - 30px); margin:0 15px;}

@media screen and (max-width:1024px){
	.colList.col3 li {width:100%; margin:0 0 30px ; overflow:hidden}
	.colList.col3 li img {width:340px; float:left}
	.colList.col3 li dl  {width:calc(100% - 340px); float:left}
	.colList.col2 li {width:100%; margin:0 30px; overflow: hidden;}
	.colList li dl dt {margin-top:0;}
}
@media screen and (max-width:640px){
	
	.colList.col4 li {width:calc(50% - 30px); margin:0 6px 10px;}
	.colList.col3 li {width:100%; margin:0 0 20px ;}
	.colList.col3 li img {width:100%; float:left}
	.colList.col3 li dl  {width:100%; float:left}
	.colList.col2 li {width:100%; margin:0 0 20px;}

	.colList li dl dt {margin-top:-30px;}

}

table.tb1{width: 100%; margin-top: 2em; border-top: 3px solid #578e21; font-size: 1.125em; color: #666;}
table.tb1 thead th{padding:1em 0; color: #333; font-weight: 600; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; color: #578e21}
table.tb1 thead th:last-child{border-right: 0; }
table.tb1 tbody th{padding:1em; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; font-size: .875em;}
table.tb1 tbody th h3{line-height: 1.4em; color: #222; font-size: 1.375em;}
table.tb1 tbody td{padding:1em 1em; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd;}
table.tb1 tbody td p{margin: 0.5em 0;}
table.tb1 tbody td p::before{content: '·'; padding-right: 5px;}