@charset "utf-8";

@media (max-width: 1200px) {
/* s11 */
	.s11 .arti1 .gray-box{padding: 0 50px;}
	.s11 .arti1 .gray-box dt{padding-right: 50px;}

/* s13 */	
	.s13 .arti1{gap:40px;}
	.s13 .arti1 > .lbx .tbx b{font-size: 30px;}
	.s13 .arti1 > .lbx .tbx p{font-size: 18px; line-height: 1.5;}
	.s13 .arti1 > .rbx ul > li{padding-left: 60px;}
	.s13 .arti1 > .rbx ul > li:before{width: 50px; top: 24px;}
	.s13 .arti1 > .rbx ul > li:after{width: 12px; height: 12px; top: 18px;}
	.s13 .arti1 > .rbx ul > li b{font-size: 32px;}
	.s13 .arti1 > .rbx ul > li .box{font-size: 20px;}
}
@media (max-width: 1024px) {

/* s11 */
	.s11 .arti1 .gray-box{flex-direction: column; padding: 30px; height: auto;}
	.s11 .arti1 .gray-box dt{font-size: 30px; margin-bottom: 5px; padding: 0;		}
	.s11 .arti1 .gray-box dt:after{display: none;}
	.s11 .arti1 .gray-box dd{padding-left: 0px; font-size: 18px; line-height: 1.5; word-break: keep-all;}
	.s11 .arti1 .gray-box dd br{display: none;}
	.s11 h4{font-size: 28px; margin-bottom: 30px;}
	.s11 .arti2 > ul > li .tbx .line{height: 60px; font-size: 20px;}
	.s11 .arti2 > ul > li:nth-child(2) .tbx .line:before, .s11 .arti2 > ul > li:nth-child(2) .tbx .line:after{width: 60px; height: 60px; left: -30px;}
	.s11 .arti2 > ul > li:nth-child(2) .tbx .line:after{right: -30px; left: auto;}
	.s11 .arti2 > ul > li .tbx > p{font-size: 18px;}
	.s11 .arti2 > ul > li i{width: 100px; height: 100px;}
	.s11 .arti3{margin-top: 50px;}
	.s11 .arti3 ul > li{padding: 30px; gap:20px; flex:100%;}
	.s11 .arti3 ul > li span{height: 30px; font-size: 16px;}
	.s11 .arti3 ul > li p{font-size: 18px ;line-height: 1.5;}
	
/* s12 */	
	.s12 .arti1{flex-direction: column-reverse; align-items: flex-start; gap:40px;}
	.s12 .arti1 .lbx{max-width:100%; display: flex; flex-direction: column;}
	.s12 .arti1 .lbx figure{width: 100%;}
	.s12 .arti1 .lbx img{ width: 100%; max-width:100%;}
	.s12 .arti1 .lbx p{font-size: 20px;}
	.s12 .arti1 .lbx p sign{font-size: 24px;}
	.s12 .arti1 .rbx h5{font-size: 28px; line-height: 1.5; margin-bottom: 20px;}
	.s12 .arti1 .rbx .p-box p{font-size: 18px; line-height: 1.5;}

/* s13 */	
	.s13 .arti1{flex-direction: column; display: block;}
	.s13 .arti1 > .lbx{max-width:100%; margin-bottom: 50px;}
	.s13 .arti1 > .lbx figure{margin-bottom: 30px;}
	.s13 .arti1 > .lbx figure img{width: 100%;}
	.s13 .arti1 > .rbx ul > li .box span{width: 40px; text-align: left;}
	
/* s21 */	
	.s2 .arti1{height: 200px; margin-bottom: 50px;}
	.s2 .arti1 > .tbx{z-index: 1;}
	.s2 .arti1 > .tbx p{font-size: 22px; line-height: 1.5;}
	.s2 .arti1:after{background-size: contain; width: 100px; height: 150px; bottom: -80px; right: 0px;}
	.s2 .arti2 .box .cnt .dot-ul > li{align-items:flex-start;}
	.s2 .arti2 .box .cnt .dot-ul > li span{align-items:flex-start;}
	.s2 .arti2 .box .tit{font-size: 26px; gap:5px;}
	.s2 .arti2 .box .cnt{padding-left: 34px;}
	.s2 .arti2 .box .cnt .dot-ul > li{font-size: 18px; flex-wrap:wrap;}
	.s2 .arti2 .box .cnt .dot-ul > li:before{width: 6px; height: 6px; top: 10px;}
	.s2 .arti2 .box .cnt .dot-ul > li span{line-height: 1.5; }
	.s2 .arti2 .box .cnt .dot-ul > li span o{width: 24px; height: 24px; font-size: 12px; line-height: 24px;}
	.s2 .arti2 .box .cnt .flex-box.col2 > li{padding: 20px; gap:10px;}
	.s2 .arti2 .box .cnt .flex-box.col2 > li span{width: 30px; height: 30px; line-height: 30px; font-size: 16px;}
	.s2 .arti2 .box .cnt .flex-box.col2 > li p{font-size: 18px; line-height: 1.5;}
	
}

@media (max-width: 640px) {
/* s11 */
	.s11 .arti2 > ul{flex-direction: column; gap:0px;}
	.s11 .arti2 > ul > li{border-bottom: 1px solid #ddd; padding: 50px 0 50px;}
	.s11 .arti2 > ul > li:last-child{border-bottom: 0;}
	.s11 .arti2 > ul > li .tbx .line{	border-radius: 50px !important;}
	.s11 .arti2 > ul > li i{margin-bottom: 40px; }
	.s11 .arti2 > ul > li i:after{height: 30px; bottom: -40px;}
	.s11 .arti2 > ul > li .tbx{padding-top: 20px;}
	.s11 .arti2 > ul > li .tbx > p{margin-top: 30px;}
	.s11 .arti2 > ul > li:first-child{padding-top: 0;}
	.s11 .arti2 > ul > li:nth-child(2){position: relative;}
	.s11 .arti2 > ul > li:nth-child(2) .tbx .line{position: static;}
	.s11 .arti2 > ul > li:nth-child(2) .tbx .line:before, .s11 .arti2 > ul > li:nth-child(2) .tbx .line:after{left: 50%; 	translate:-50% 0;	 top: -80px; width: 100%; border-radius: 0px;		display: none;}
	.s11 .arti2 > ul > li:nth-child(2) .tbx .line:after{top: auto; bottom: 0px;}
	
/* s12 */	
	.s12 .arti1 .rbx h5{font-size: 26px; line-height: 1.5;}
	.s12 .arti1 .rbx .p-box p{font-size: 16px; line-height: 1.5; word-break: keep-all; }
	.s12 .arti1 .rbx .p-box p br{display: none;}
	.s12 .arti1 .lbx p{font-size: 18px;}
	.s12 .arti1 .lbx p sign{font-size: 22px;}
	

}

@media (max-width: 480px) {
/* s12 */
	.s12 .arti1 .lbx figure:after{display: none;}

/* s13 */
	.s13 .arti1 > .lbx .tbx b{font-size: 24px;}
	.s13 .arti1 > .lbx .tbx p{font-size: 16px; line-height: 1.5;}
	.s13 .arti1 > .rbx ul > li b{font-size: 26px;}
	.s13 .arti1 > .rbx ul > li:before{top: 21px;}
	.s13 .arti1 > .rbx ul > li:after{top: 15px;}
	.s13 .arti1 > .rbx ul > li .box{font-size: 16px; }
	
/* s21 */	
	.s2 .arti1 > .tbx p{font-size: 18px; word-break: keep-all; padding: 0 20px;}
	.s2 .arti1 > .tbx p br{display: none;}
	.s2 .arti2{gap:50px;}
	.s2 .arti2 .box .cnt{padding-left: 0; }
	.s2 .arti2 .box .tit{font-size: 23px;}
	.s2 .arti2 .box .cnt .dot-ul > li{padding-left: 14px; }
	.s2 .arti2 .box .cnt .dot-ul > li:before{left: 0;}
	.s2 .arti2 .box .cnt .flex-box.col2 > li{flex:100%;}
	.s2 .arti2 .box .cnt .flex-box.col5 > li{flex:100%; height: auto; padding: 20px;}
	.s2 .arti2 .box .cnt .flex-box.col5 > li span{font-size: 16px; width: 30px; height: 30px; line-height: 30px;}
	.s2 .arti2 .box .cnt .flex-box.col5 > li p{font-size: 20px;}
	.s2 .arti2 .box .cnt .flex-box.col5 > li i{width: 100px; height: 100px;}
}