@charset "utf-8";

/* 260623 수정 */
@media (max-width: 1600px) {
.s1 .arti1 .s1-gall > li .tbx b.nowrap{white-space: normal;}

@media (max-width: 1500px) {
/* s1-10 */
	.sub-flex{gap:0 40px;}
	.sub-left{max-width:280px;}
	.sub-left > div ul > li > a{font-size: 16px;}
}

@media (max-width: 1400px) {
/* s1101 */
	.sub-left{max-width:100%; }
	.sub-left .dep3 > ul{display: flex; flex-wrap:wrap; flex-direction: row; gap:0px; padding: 5px; border-radius: 5px;}
	.sub-left .dep3 > ul > li{flex:1 1 20%;}
	.sub-left > div ul > li > a{border-radius: 5px; display: flex; align-items:center; justify-content: center; height: 100%; padding: 10px;}
	.sub-flex .sub-cnt{padding-top: 60px;}

/* s32 */
	.s32 .arti3 .box figure{max-width:45vw}
	
	.sub-left > div ul{display: flex; flex-wrap:wrap; flex-direction: row; gap:0px; padding: 5px; border-radius: 5px}
	.sub-left > div ul > li{flex:1 1 20%;}

	
/* s33 */
	.s3-arti1 .lbx{max-width:280px;}
	.s3-arti1{gap:80px;}
	.s33 .arti2-wrap{height: auto; padding: 12vw 0;}
	
	.s342 .arti1{gap:80px;}
	.s342 .arti1 .lbx{max-width:280px;}
	
	
}

@media (max-width: 1024px) {
	#sub_layout{margin-top: 100px;}
	.speed-box > ul > li{font-size: 16px;}
	.speed-box > ul > li img{width: 25px;}
	.speed-box > ul > li:not(:last-child):after{margin: 0 5px;}
	.sub-tit{margin-top: 60px; margin-bottom: 40px; font-size: clamp(22px, 4.8vw, 50px);}
	.sub-tit i{width: 6vw;}
	.sub-visual{height: 50vw;}
	.sub-menu{margin-top: 0; border-top: 0; padding: 0; margin-bottom: 40px;}
	.sub-name{font-size: clamp(22px, 4.2vw, 46px); margin-bottom: 30px;}
	.sub-name span{font-size: clamp(16px, 3vw, 32px); line-height: 1.2;}
	.sub-name span:before{height: 20px; margin: 0 20px;}
	.lnb {position: relative; z-index: 100; padding: 0 20px;  background: linear-gradient(90deg, #00CAFF -32.16%, #0048B3 102.16%); backdrop-filter: blur(5px);}
	.lnb b{position: relative; display: block; padding: 0px 0px; font-size: 18px; color: #fff; font-weight: 500; height: 50px; line-height: 50px; cursor: pointer;}
	.lnb b:after{position: absolute; content: ''; width: 36px; height: 50px; background: url(../img/sub/lnb-arr-m.png) center no-repeat; right: 0px; top: 0; transition:.3s;}
	.lnb b.on:after{rotate:-180deg;}
	.lnb > ul{flex-direction: column; position: absolute; left: 0; top: 50px; width: 100%; background: #fff; z-index: 10; display: none;}
	.lnb > ul > li:after{display: none;}
	.lnb > ul > li:not(:last-child):before{display: none;}
	.lnb > ul > li > a{font-size: 16px; line-height: 40px; text-align: left; height: auto; justify-content: flex-start; padding: 0 20px; border: none !important; border-bottom: 1px solid #ddd !important; color: #333;} 
	.lnb > ul > li.current > a{color: rgba(0,46,79,0.95); background: #fff;border-bottom: 1px solid #ddd !important;} 
	.dep4 > li > a{height: 40px; font-size: 16px;}
	.dep4 > li.current > a{}
	.sub_3_4_1 .dep4{margin-bottom: 60px;}
	
	
	
/* s11 */
	
	.s1 .arti1 .s1-gall > li figure > span{font-size: 16px; gap:10px; height: 50px; width: 200px;} 
	
/* s1101 */	
	.s110 {padding: 0;}

/* s31 */
	.s3-arti1,
	.s31 dl{gap:40px;}
	.s3-arti1 .rbx b br{display: none;}
	.s3-arti1 .lbx strong,
	.s31 dl dt strong,
	.s31 .arti3 .tit b,
	.s342 .arti1 .lbx b{font-size: clamp(22px, 3.8vw, 40px);}
	.s3-arti1 .rbx{padding-top: 0; padding-bottom: 120px;}	
	.s3-arti1 .rbx b,
	.s31 dl dd b,
	.s342 .arti1 .rbx p{font-size: clamp(18px, 3vw, 32px)}
	.s342 .arti1 .rbx p{margin-bottom: 40px;}
	.s342 .arti1 .rbx p br{display: none;	}
	
	.s3-arti1 .rbx p,
	.s31 dl dd p,
	.s31 .arti3 .tit p{font-size: 16px; line-height: 1.5;}
	.s3-arti1 .rbx big{font-size: 13vw; line-height: 1;}
	.s31 .arti3-wrap{margin-top: 60px; padding-top: 60px; padding-bottom: 16vw;}
	.s31 .arti3-wrap big img{width: 100vw;}
	.s31 .arti3 figure{margin-top: 60px;}
	.s31 .arti4{margin-top:60px;}
	.s31 .arti4 .img-box{margin-top: 60px;}
	.s31 .arti4 .img-box .ceo figure{padding: 40px; box-sizing: border-box;}
	.s31 .arti4 .img-box .ceo figure,
	.s31 .arti4 .img-box .ceo{width: 180px; height: 180px;}
	.s31 .arti4 .img-box .ceo span{width: 180px; height: 180px;}
	.s31 .arti5-wrap{margin-top: 60px;}
	.s31 .arti5{height: auto; padding: 12vw 20px;}
	.s31 .arti5 p{font-size: clamp(20px, 3.2vw, 36px); line-height: 1.5;} 
	.s31 .arti5 .link-flex > a{width: 220px; height: 40px; font-size: 16px; padding: 10px 20px;}
	
	#sub_layout.sub_3_1_{margin-bottom: 0px;}
/* s32 */
	.s32 .arti2-wrap{height: auto; padding: 12vw 0;}
	.s32 .s3-arti1 .rbx{padding-top: 0; padding-bottom: 120px;;}
	.s32 .arti2 > ul{gap:0 4vw}
	.s32 .arti2 > ul > li:not(:last-child):after{right: -2vw;}	
	.s32 .arti2 > ul > li .box .tbx .num{font-size: clamp(20px, 3.8vw, 40px); line-height: 1.5; align-items:center;}  	
	.s32 .arti2 > ul > li .box .tbx .num b,
	.s32 .arti2 > ul > li .box .tbx .num span{font-size: clamp(22px, 5.8vw, 60px); }
	.s32 .arti2 > ul > li .box .tbx p{font-size: 18px; line-height: 1.5; align-items:center;}
	
	.s32 .arti3{margin-top: 60px;}
	.s32 .arti3 .box{flex-direction: column; gap:40px}
	.s32 .arti3 .box figure{max-width:100%;}
	.s32 .arti3 .box figure img{width: 100%;}
	.s32 .arti3 .box figure span{font-size: 30px;}
	.s32 .arti3 .box .tbx{padding-top: 0;}
	.s32 .arti3 .box .tbx b{font-size: clamp(20px, 3.2vw, 36px); line-height: 1.5;}
	.s32 .arti3 .box .tbx p{font-size: 16px; line-height: 1.5;}
	.s32 .arti3 .box .tbx p br{display: none;}
	.s32 .arti3 .box .tbx ul{margin-top: 20px; margin-left: 20px; gap:5px;}
	.s32 .arti3 .box .tbx ul > li.w11{width: 100%;}
	.s32 .arti3 .box .tbx ul > li{font-size: 16px; line-height: 1.5;}
		
	.s3-arti1,
	.s342 .arti1{flex-direction: column; gap:40px}
	.s33 .s3-arti1 .rbx,
	.s342 .arti1 .rbx{padding-top: 0;}
	.s342 .arti1 .rbx{margin-top: 0;}
	.s33 .arti3{gap:60px; margin-top: 60px;}
	.s33 .arti3 .flex{flex-direction: column; gap:60px; }
	.s33 .arti3 .flex .box .tit span{font-size: 16px;}
	.s33 .arti3 .flex .box .tit p{font-size: clamp(20px, 3.2vw, 36px); line-height: 1.5;}
	.s33 .arti3 .flex .box figure img{width: 100%;}
	.s33 .arti3 .flex .box figure .link-box > a{width: auto; font-size: 16px; height: 40px; padding: 10px 20px;}
	.s33 .arti3 .flex .box .tbx .check p{font-size: 18px; line-height: 1.5;}
	.s33 .arti3 .flex .box .tbx .check i{width: 26px; height: 26px; position: relative; top: -3px;}
	.s33 .arti3 .flex .box .tbx .txt > p{font-size: 16px; line-height: 1.5; height: auto;}
	.s33 .arti3 .flex .box .tbx .txt > p br{display: none;}
	.s33 .arti3 .flex .box .tbx .txt ul{margin-left: 25px; gap:5px;}
	.s33 .arti3 .flex .box .tbx .txt ul > li{font-size: 16px; line-height: 1.5;}
	
	.sub-left .quick-sticky h3{font-size: clamp(22px, 3.8vw, 40px); margin-bottom: 20px;}
	.s341 .history-wrap{gap:40px;}
	.s341 .history-wrap .box .tit b{font-size: clamp(22px, 4.8vw, 50px);}
	.s341 .history-wrap .box .tit span{font-size: clamp(16px, 2.2vw, 22px)}
	.s341 .history-wrap .box .cnt{padding-left: 0;}
	.s341 .history-wrap .box .cnt .years{width: 100px; padding-bottom: 40px;}
	.s341 .history-wrap .box .cnt .years b{font-size: 20px;}
	.s341 .history-wrap .box .cnt .years:after{top: 4px;}
	.s341 .history-wrap .box .cnt .years:before{top: 20px;}
	.s341 .history-wrap .box .cnt .txt{padding-left: 10px; padding-top: 2px; padding-bottom: 50px;}
	.s341 .history-wrap .box .cnt .txt ul{gap:5px;}
	.s341 .history-wrap .box .cnt .txt ul > li{font-size: 16px; line-height: 1.5;}
	.s341 .history-wrap .box figure{padding-left: 0;}

	
	
	
	
}

@media (max-width: 640px) {
.dep4 {margin-bottom: 30px;}

/* s11 */
	.s1 .arti1 .s1-gall{gap:50px 0; margin-left: -20px;}
	.s1 .arti1 .s1-gall > li{margin-left: 20px; width: calc(50% - 20px); }
	.s1 .arti1 .s1-gall > li figure figcaption{font-size: 14px;}
	.s1 .arti1 .s1-gall > li .tbx{padding: 0;}
	.s1 .arti1 .s1-gall > li .tbx b{font-size: 18px;}
	.s1 .arti1 .s1-gall > li .tbx p br{display: none;}
	.s1 .arti1 .s1-gall > li .tbx p{font-size: 16px; line-height: 1.5;     display: block;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    overflow: visible;   text-overflow: initial; }
	
	.s32 .arti3 .box .tbx p .m-br{display: block !important;}
/* s1101 */
	.sub-left > div ul > li > a{font-size: 14px;}
	.sub-left .dep3 > ul > li{flex:1 1 50%}
	.sub-name span:before{height: 16px; margin: 0 15px; margin-top: 2px;}
	.sub-left > div ul > li{flex:1 1 20%; }
	.sub-left > div ul > li > a{font-size: 12px; padding: 10px 5px;}
	
/* s31 */	
	.s31 .arti4 .img-box .ceo figure{padding: 20px; box-sizing: border-box;}
	.s31 .arti4 .img-box .ceo figure,
	.s31 .arti4 .img-box .ceo{width: 120px; height: 120px;}
	.s31 .arti4 .img-box .ceo span{width: 120px; height: 120px;}
	
/* s32 */	
	.s32 .arti2 > ul{flex-direction: column; gap:40px;}
	.s32 .arti2 > ul > li:not(:last-child):after{right: auto; left: 0; top: auto; bottom: -20px; width: 100%; height: 1px;	}
	.s32 .arti2 > ul > li .box i{width: 15vw; margin: 0 auto;}
	.s32 .arti2 > ul > li .box .tbx .num b{margin-right: 3px;}
	.s32 .arti2 > ul > li .box .tbx .num span{margin-left: 5px;}
	
	.s341{max-width:100%; overflow: hidden;}
	.sub_1_10_10{max-width:100%; overflow: hidden;}

}

@media (max-width: 480px) {
	.speed-box > ul > li{font-size: 12px;}
	.speed-box > ul > li:not(:last-child):after{width: 20px; height: 20px; background-size: 18px;}

}