@charset "utf-8";

@media (max-width: 1600px) {
/* s41 */
	.s41 .arti5-wrap{height: auto; padding: 12vw 0px;}

}

@media (max-width: 1320px) {
/* s23 */
	.s23 .article-box > .flex-box .box .tbx p{word-break: keep-all;}
	.s23 .article-box > .flex-box .box .tbx p br{display: none;}
	
/* s41 */	
	.s41 .arti5 ul > li .tbx	{margin-top: 20px;}
	.s41 .arti5 ul > li .tbx p{word-break: keep-all;}
	.s41 .arti5 ul > li .tbx p br{display: none;}
}

@media (max-width: 1024px) {

/* sub-common */
	.speed-box ul > li{font-size: 14px;}
	.speed-box ul > li:not(:last-child):after{width: 16px; height: 16px; margin: 0 5px;}
	.sv-arti{padding-top: 50px;}
	.sv-arti .tit{gap:10px;}
	.sv-arti .tit b{font-size: clamp(22px, 6.6vw, 50px);}
	.sv-arti .tit p{font-size: 16px;	}

	.visual-box{gap:10px;}
	.visual-box b{font-size: clamp(24px, 6vw, 50px);}
	.visual-box p{font-size: 18px; line-height: 1.5;}
	
/* s11 */
	.s11 .arti1-wrap{padding-top: 250px; padding-bottom: 150px;}
	.s11 .arti1 .tit{gap:20px;}
	.s11 .arti1 .tit b{font-size: clamp(22px, 6.6vw, 50px);}
	.s11 .arti1 .tit p{font-size: clamp(16px, 3vw, 22px);}
	.s11 .arti1 .flex-box{margin-top: 80px; gap:50px;}
	.s11 .arti1 .flex-box .text b{font-size: clamp(22px, 5.2vw, 40px); padding-bottom: 10px;}
	.s11 .arti1 .flex-box .text p{font-size: 16px; line-height: 1.5; margin-top: 20px;}
	.s11 .arti1 ul{margin-top: 30px; gap:15px; flex-direction: column;} 
	.s11 .arti1 ul > li{padding: 30px 20px;}
	.s11 .arti1 ul > li .tbx strong{font-size: 20px;}
	.s11 .arti1 ul > li .tbx b{font-size: 18px; line-height: 1.5;}
	.s11 .arti1 ul > li .tbx p{font-size: 16px; line-height: 1.5;}
	.s11 .arti2{margin-top: 60px; margin-bottom: 60px;}
	.s11 .arti2 ul{flex-wrap:wrap; gap:10px;  align-items: stretch;}
	.s11 .arti2 ul > li{flex:1 1 40%; padding: 20px; border: 1px solid #ddd !important; border-radius: 10px; gap:10px;}
	.s11 .arti2 ul > li .tbx{gap:10px;}
	.s11 .arti2 ul > li .tbx b{font-size: 20px;}
	.s11 .arti2 ul > li .tbx p{font-size: 16px; line-height: 1.5;}
	.s11 .arti3{padding-top: 60px;}	
	.s11 .arti3 .history-box{margin-left: 0; margin-top: 50px;}
	.s11 .arti3 .tit-box h3{font-size: clamp(22px, 5.2vw, 40px);}
	.s11 .arti3 .tit-box .his-controll-box{gap:15px}
	.s11 .arti3 .tit-box .his-controll-box .num-box{font-size: 16px;}
	.s11 .arti3 .tit-box .his-controll-box .btn-box{gap:6px;}
	.s11 .arti3 .tit-box .his-controll-box .btn-box > *{width: 40px; height: 40px;}
	.s11 .arti3 .history-box .item b{font-size: 20px;}
	.s11 .arti3 .history-box .item p{font-size: 16px; line-height: 1.5;}
	.s11 .arti3 .history-box .dot-box span:last-child{display: none; }
	.s11 .arti3 .history-box .dot-box span:first-child{flex:50%;}
	.s11 .arti4-wrap{padding: 60px 0 150px; margin-top: 60px;		}
	.s11 .arti4{flex-direction: column;  gap:50px}
	.s11 .arti4 .lbx h3{font-size: clamp(22px, 5.2vw, 40px);}
	.s11 .arti4 .lbx p{font-size: clamp(16px, 3.2vw, 20px); margin: 5px 0 10px;}
	.s11 .arti4 .lbx .link-box > a{width: auto; padding: 15px 20px; height: auto; font-size: 16px;}
	.s11 .arti4 .rbx ul{gap:20px;}
	.s11 .arti4 .rbx ul > li span{font-size: 20px; width: 80px;}
	.s11 .arti4 .rbx ul > li p{font-size: 18px;}

/* s12 */
	.s12 .visual-box{margin-top: 50px; height: auto; padding: 12vw 20px;}
	.s12 .arti2 dl{padding: 40px 0; gap:20px;}
	.s12 .arti2 dl dt{width: 150px; }
	.s12 .arti2 dl dt span{height: 100px; padding: 10px;}
	.s12 .arti2 dl dd ul{gap:10px;}
	.s12 .arti2 dl dd ul > li{font-size: 16px; height: 40px;}

/* s13 */
	.s13{margin-bottom: 150px;;}
	.s13 .arti3 ol > li > a{width: auto; padding: 0 20px; height: 40px; font-size: 16px; gap:10px}
	.s13 .arti3 ul > li{font-size: 16px; gap:15px;}
	.s13 .arti3 ol{margin-top: 30px; gap:10px;}
	
/* s21 */	
	.s2{margin-bottom: 150px;}
	.s2-arti2-wrap{margin-top: 60px; padding: 60px 20px;}
	.s2-arti2{gap:40px;}
	.s2-arti2 .tit {gap:20px; padding-bottom: 40px;}
	.s2-arti2 .tit h4{font-size: clamp(22px, 5.2vw, 40px);}
	.s2-arti2 .tit p{font-size: 16px; line-height: 1.5; word-break: keep-all;}
	.s2-arti2 .tit p br{display: none;}
	.s2-arti2 .btn-wrap p{font-size: 18px; line-height: 1.5; margin-bottom: 20px;}
	.s2-arti2 .btn-wrap ul{gap:15px;}
	.s2-arti2 .btn-wrap ul > li > a{width: auto; padding: 0 20px; height: 50px; gap:10px; font-size: 16px;}
	.s2-arti3-wrap{height: auto; padding: 12vw 20px;}
	.s2-arti3 .tit{gap:20px;}
	.s2-arti3 .tit h4{font-size: clamp(22px, 5.2vw, 40px);}
	.s2-arti3 .tit p{font-size: 18px; line-height: 1.5;}
	.s2-arti4{margin-top: 60px; margin-bottom: 60px;}
	.s2-arti4 .tit h4{font-size: clamp(22px, 4.8vw, 38px);}
	.s2-arti4 ul:after{display: none;}
	.s2-arti4 ul{gap:0px; margin-top: 30px;}
	.s2-arti4 ul > li{flex:100%; padding: 20px 0px !important; border-bottom: 1px solid #ddd;}
	.s2-arti4 ul > li:last-child{border-bottom: 0;}
	.s2-arti4 ul > li i{width: 100px; height: 100px; padding: 10px;}
	.s2-arti4 ul > li .tbx{padding-left: 20px; font-size: 16px; line-height: 1.5; word-break: keep-all;}
	.s2-arti4 ul > li .tbx br{display: none;}
	.s2-arti5 .item{gap:40px; flex-direction: column;}
	.s2-arti5 .item figure{max-width:100%; width: 100%;}
	.s2-arti5 .item figure img{border-radius: 60px;	}
	.s2-arti5 .item .tbx{padding-top: 20px;}
	.s2-arti5 .item .tbx small{font-size: 16px; margin-bottom: 10px;}
	.s2-arti5 .item .tbx h5{font-size: clamp(22px, 4.6vw, 35px);}
	.s2-arti5 .item .tbx > p{font-size: 18px; line-height: 1.5;}
	.s2-arti5 .item .tbx > ul > li{font-size: 16px; line-height: 1.5;}
	.s2-arti5 .controll-box{position: static;}
	.s2-arti5 .item .tbx > ul > li{word-break: keep-all;}
	.s2-arti5 .item .tbx > ul > li br{display: none;}
	.s2-arti5 .controll-box .num-box{font-size: 16px;}
	.s2-arti5 .controll-box .btn-box{gap:10px;}
	.s2-arti5 .controll-box .btn-box > *{width: 40px; height: 40px;}
	.s2-arti6-wrap{padding: 12vw 0 ;}
	.s2-arti6 .flex-box{flex-direction: column; gap:40px}
	.s2-arti6 .flex-box > *{width: 100%;}
	
	.s2-arti6 .flex-box .lbx h4{font-size: clamp(22px, 4.6vw, 35px);}
	.s2-arti6 .flex-box .lbx p{font-size: 16px; margin-top: 5px; margin-bottom: 20px;}
	.s2-arti6 .flex-box .lbx .link-box > a{display: inline-flex;	width: auto; padding: 0 20px; height: 40px; font-size: 18px; gap:10px}
	.s2-arti6 .flex-box .rbx > p b{font-size: 20px;}
	.s2-arti6 .flex-box .rbx > p{font-size: 18px;}
	.s2-arti6 .flex-box .rbx ul > li{height: 60px; font-size: 20px;}
	
	.s2-arti6 ol{margin-top: 40px;}
	.s2-arti6 ol > li{flex:50%;}
	.s2-arti6 ol > li i img{max-width:15vw}
	.s2-arti6 ol > li .tbx{padding-top: 10px; margin-top: 10px;}
	.s2-arti6 ol > li .tbx p{font-size: 20px;}
	.s2-arti6 ol > li .tbx span{font-size: 16px; line-height: 1.5;}
	.s2-arti6 ol > li .tbx:after{width: 26px; height: 26px;border-radius: 50%; right: -13px;}
	.s2-arti7{margin-top: 60px; gap:60px;}
	.s2-arti7 .box h4{font-size: clamp(22px, 4.6vw, 35px); margin-bottom: 20px;}
	.s2-arti7 .box .table-wrap:after{display: block; content: '* 가로로 스크롤해 확인 해주세요.'; padding: 15px 0; color: #666;}  
	.s2-arti7 .box .table-wrap tr > *{font-size: 16px;}	
	.s2-arti7 .box > .p-box{font-size: 16px; line-height: 1.5;}
	.s2-arti7 .box > .p-box ul > li {text-indent: -11px;margin-left: 12px;}

/* s23 */	
	.s23 .sv-arti{padding-top: 40px; margin-bottom: 40px;}
	.s23 .article-box > .img-box{height: auto; padding: 12vw 20px; margin-bottom: 50px;}
	.s23 .article-box > .img-box .tbx{font-size: clamp(22px, 4.6vw, 35px);}
	.s23 .article-box > .tit{gap:10px}
	.s23 .article-box > .tit h5{font-size: clamp(22px, 4.6vw, 35px); line-height: 1.5; word-break: keep-all;}
	.s23 .article-box > .tit h5 br{display: none;}
	.s23 .article-box > .tit p{font-size: 18px; line-height: 1.5; word-break: break-all;}
	.s23 .article-box > .tit p br{display: none;}
	.s23 .article-box > .flex-box .box .tbx{margin-top: 20px;}
	.s23 .article-box > .flex-box .box .tbx b{font-size: 24px;}
	.s23 .article-box > .flex-box .box .tbx p{font-size: 16px; line-height: 1.5;}
	.s23 .arti3{margin-top: 60px;}
	
/* s31 */	
	.s31-sv-arti .visual-box{margin-top: 40px; margin-bottom: 50px; height: auto; padding: 12vw 20px;}
	.real-cont{margin-bottom: 150px;}

/* s41 */
	.s41 .arti1 .visual-box{margin-top: 40px; height: auto; padding: 12vw 20px; }
	.s41 .arti2{margin-top: 60px; margin-bottom: 100px;}
	.s41 .arti2 .tit b{font-size: clamp(22px, 4.6vw, 35px)}
	.s41 .arti2 .tit p{font-size: 18px; line-height: 1.5; margin: 15px 0 10px; word-break: keep-all;}
	.s41 .arti2 .tit p br{display: none;}
	.s41 .arti2 .tit span{font-size: 16px;}	
	.s41 .arti2 ul{margin-top: 60px; flex-direction: column;	} 
	.s41 .arti2 ul > li:before{left: 50%; bottom: -26px; top: auto; rotate:90deg; margin-left: -24px; }
	.s41 .arti2 ul > li:after{left: 50%; bottom: -52px; right: auto; top: auto; margin-left: -1px;}
	.s41 .arti2 ul > li{padding: 30px 20px; gap:15px;}
	.s41 .arti2 ul > li span{font-size: 16px; height: 30px;}
	.s41 .arti2 ul > li .tbx b{font-size: 20px;}
	.s41 .arti2 ul > li .tbx p{font-size: 16px; line-height: 1.5;}
	.s41 .arti3 .visual-box{margin-top: 40px; height: auto; padding: 12vw 20px;}
	.s41 .arti3 .visual-box ul > li{flex:1 1 30%; width: auto; padding: 0 15px;}

	.s41 .arti4 dl{flex-direction: column; padding: 20px 0; gap:20px;} 
	.s41 .arti4 dl dt{width: 100%; font-size: clamp(22px, 4.2vw, 32px)}
	.s41 .arti4 dl dd{gap:20px;}
	.s41 .arti4 dl dd i{width: 100px; height: 100px; padding: 10px;}
	.s41 .arti4 dl dd .tbx{padding-top: 0;}
	.s41 .arti4 dl dd .tbx b{font-size: 20px;}
	.s41 .arti4 dl dd .tbx p{font-size: 16px; line-height: 1.5;}
	.s41 .arti4 dl dd .tbx p.p2{font-size: 14px; line-height: 1.5;}
	.s41 .arti5 .tit b{font-size: clamp(22px, 4.6vw, 35px);}
	.s41 .arti5 ul{margin-top: 30px;}
	
	.s41 .arti5 ul > li{flex:100% !important; padding: 30px 20px;}
	.s41 .arti5 ul > li .tbx b{font-size: 20px;}
	.s41 .arti5 ul > li .tbx p{font-size: 16px; line-height: 1.5;}
	.s41 .arti5 ul > li i{width: 80px; height: 80px; padding: 10px;}
	
}

@media (max-width: 800px) {
	.s2-arti7 .box .table-wrap {width: 100%; overflow-y: auto;}
	.s2-arti7 .box .table-wrap table{width: 800px;}
	.s2-arti7 .box .table-wrap table colgroup{display: none;}
	.s2-arti7 .box .table-wrap table.top-title tr > th{font-size: 16px; height: 50px; }
	.s2-arti7 .box .table-wrap tr > td{height: 60px; padding: 10px;}
	.s2-arti7 .box .table-wrap table.left-title tr > th{font-size: 16px; padding: 10px;}
	.s23 .article-box > .flex-box{margin-top: 30px; gap:20px; flex-direction: column;}
	.s23 .article-box > .flex-box .box{padding: 30px 20px;}
	.s23 .article-box > .flex-box .box i{width: 80px; height: 80px; }
	.s23 .article-box > .flex-box .box .tbx{margin-top: -20px;}
	.s23 .article-box.arti3 .ul-box ul{gap:20px;}
	.s23 .article-box.arti3 .ul-box ul > li{flex:1 1 40%}
	

}

@media (max-width: 640px) {
/* s12 */
	.s12 .arti2 dl:first-child{padding-top: 0;}
	.s12 .arti2 dl{flex-direction: column;}
	.s12 .arti2 dl dt{width: 100%;}

/* s13 */	
	.s13 .arti2{margin-top: 40px;}
	.s13 .arti2 .map-box .root_daum_roughmap .wrap_map{height: 400px !Important;}
	
/* s21 */	
	.s2-arti4 ul > li i{width: 80px; height: 80px;}
	.s2-arti5-wrap{padding: 60px 0 50px;}
	
}


@media (max-width: 480px) {
/* s11 */
	.s11 .arti2 ul > li{flex:100%;}
	
/* s23 */
	.s23 .article-box.arti3 > .tit ul{margin-top: 30px; gap:10px;}
	.s23 .article-box.arti3 > .tit ul > li{width: auto; flex:1;}
	.s23 .article-box.arti3 > .tit ul > li .cnt{height: auto; padding: 10px;}
	.s23 .article-box.arti3 .ul-box ul > li{flex:100%}	
}