@charset "utf-8";

@media (max-width: 1024px) {
/* sub */
	#sub_layout{margin-bottom: 80px;}
	.sub-visual{height: 300px;}
	.sub-visual .sv-tbx{padding-top: 80px;}
	.sub-visual .sv-tbx .sv-tit{font-size: clamp(24px, 4.8vw, 50px); }
	.lnb-wrap{margin-top: 0;}
	.lnb-wrap .lnb ul > li > a{font-size: 16px; line-height: 1.5; height: 50px;}
	.sub-tit{margin-top: 60px; margin-bottom: 40px;}
	.sub-tit h4{font-size: clamp(24px, 4.2vw, 45px); line-height: 1.5; margin-bottom: 10px;}
	.sub-tit p{font-size: 16px; line-height: 1.5;}
	.s11 .arti1{height: auto; padding: 40px 20px;}
	.s11 .arti1 .tbx strong{font-size: clamp(24px, 4.2vw, 46px); line-height: 1.5; margin-bottom: 10px;}
	.s11 .arti1 .tbx p{font-size: 16px; line-height: 1.5;}
	.s11 .arti2 .box > *{width: 100%;}
	.s11 .arti2 .box > figure{padding-right: 0; width: 100%; padding-left: 10px !Important;}
	.s11 .arti2 .box > figure img{width: 100%;}
	.s11 .arti2 .box > .tbx{margin-top: 20px; padding-left: 30px;}
	.s11 .arti2:before{left: 0;}
	.s11 .arti2 .box:not(:last-child):after{width: 20px; background-size: contain; left: 8px;}
	.s11 .arti2 .box:nth-child(even) > figure{padding-left: 0;}
	.s11 .arti2 .box:nth-child(even) > .tbx{padding-right: 30px; text-align: left; padding-left: 20px;}
	.s11 .arti2{margin-top: 50px;}
	.s11 .arti2 .box > .tbx b{font-size: clamp(22px, 3.8vw, 34px); line-height: 1.5; margin: 10px 0 15px;}
	.s11 .arti2 .box > .tbx p{font-size: 16px; line-height: 1.5; word-break: keep-all;}
	.s11 .arti2 .box > .tbx p br{display: none;}
	.s12 .arti1 iframe{height: 45vw;}
	.s12 .arti2{margin-top: 20px;}
	.s12 .arti2 ul > li{font-size: 16px; line-height: 1.5; }
	.s12 .arti2 ul > li span{width: 60px;}
	.s12 .arti2 ol{margin-top: 20px;}
	.s12 .arti2 ol > li > a{width: 130px; height: 40px; font-size: 16px;}
	.s51 .arti1{gap:40px}
	.s51 .arti1 ul{gap:40px; padding: 0 40px;}
	.s51 .arti1 ul > li{height: auto; flex:1 1 40%; padding: 30px 10px;}
	.s51 .arti1 ul > li .step{width: 60px; height: 60px;}
	.s51 .arti1 ul > li .step small{font-size: 12px;}
	.s51 .arti1 ul > li .step big{font-size: 20px;}
	.s51 .arti1 ul > li figure img{max-width:55px}
	.s51 .arti1 ul > li p{font-size: 18px;}
	.s51 .arti1 ul > li:not(:last-child):after{width: 40px; right: -50px;}
	.s51 .arti1 ul.re {flex-direction: row;}
	.s51 .arti1 ul.re > li:not(:last-child):after{left:auto; right: -50px; rotate: 0deg;}  
	.s51 .arti1 ul:first-child > li:last-child:after {    rotate: 00deg; margin-left: 0; right: -50px; left: auto; top: 0; width: 40px;}
	.s52-tab{border-bottom: 1px solid #ddd;}
	.s52-tab > li{flex: 50%; height: 45px; font-size: 14px; border: 1px solid #ddd; border-right: 0 !important; border-bottom: 0 !important;}  
	.s52-tab > li:nth-child(2n+2) {border-right: 1px solid #ddd !important;}
	.s5-col2{gap:20px}
	.s5-col2 > li .tbx p{font-size: 18px;}
	

}

@media (max-width: 480px) {
	.lnb-wrap .lnb ul > li > a{font-size: 14px;}
	.s51 .arti1 ul{padding: 0 20px;}
	
	
	.lnb-wrap .lnb ul > li{flex:33.33%}



}