.main {padding-bottom:100px; width:100%; display:inline-block;  }
.main_con {width:100%;  margin:0 auto; font-size:16.5px;  font-weight:300; line-height:1.4; }
section + section {margin-top:120px}

@media all and (max-width:900px) {
  .main_con {font-size:15px}
 
}



h3 {font-size:2em}


 hr.main_hr {height:110px}
.tit {text-align:center; }
.basic_t {font-size:17px; line-height:1.5; font-weight:300;  color:#333}


.vi * {transition: all 0.3s ease;}
.vi {position:relative; background-color:#ddd;  width:100%; border-bottom:1px solid #ddd; height:800px}
.vi iframe {height:100%; width:100%}
 
.section1 .in {position:Relative;  align-items:flex-start}
.section1 .right_t {width:45%; margin-left:auto; margin-top:50px; position:relative}
.section1 .bg_t {font-size:120px; position:absolute; color:#ddd; opacity:.4; font-weight:900; letter-spacing:-3px; left:-100px; z-index:-9; bottom:-150px;   font-family: 'Roboto';}
.section1 .right_t .t1 {color:var(--main_c); font-weight:600; font-family: 'Roboto'; margin-top:15px}
.section1 .right_t  h3 {margin-top:10px; }
.section1 .right_t  p.basic_t {margin-top:15px}
.section1 .right_t div.link {width:170px; padding:20px;  border:2px solid var(--main_c); display:inline-block; margin-right:10px}
.section1 .right_t div.link h3 {font-weight:600;  font-size:23px;  color:var(--main_c);}
.section1 .right_t div.link  p.t {color:#444; margin-top:5px; font-weight:300;}
.section1 .right_t div.link p.arrow_r {font-size:20px; color:var(--main_c)}
.section1 .right_t .mark {display:flex; justify-content: flex-end;   align-items: center; }

@media all and (max-width:900px) {
		.basic_t {font-size:15px;  }
		.section1 .right_t div.link {width:35vw; padding:10px}
		.section1 .right_t {width:100%}

}


.section2 {margin-top:20px; position:relative}
.section2 .in {position:Relative; background-color:#FBF8F2; color:#333;  }
.section2 .left_area {width:50%; margin-left:auto; position:relative; padding:95px 55px;}
.section2 .left_area h3 {color:#000}
.section2 .left_area a {width:160px; line-height:67px; font-weight:500;  font-size:20px;  text-align:center; color:#005468;  border:2px solid #005468; display:inline-block;  margin-right:10px}
.section2 .img_bg {background:url('/common/img/program_img.png') no-repeat bottom;  position:relative; z-index:9; background-size:cover; width:60%}
.section2 .img1 {position:absolute; right:580px; z-index:99; bottom:-110px;}
.section2 .img2 {position:absolute; right:375px; z-index:9; bottom:-70px;}


@media all and (max-width:900px) {
		.section2 .in {flex-wrap:wrap; gap:40px }
		.section2 .img_bg {height:300px; width:100%;  order:1}
		.section2 .left_area {width:100%; order:2; padding:0}
		.section2 .img1 {display:none}
		.section2 .img2  {display:none}
}



.section3 {display:flex; box-sizing:border-box; height:560px; position:relative; width:100%; overflow:hidden; margin-top:150px}
.section3 .flex {margin-top:90px}
.section3 .bg_t {font-size:105px; position:absolute; color:#ddd; opacity:.4; font-weight:900; letter-spacing:-3px; left:-10px; z-index:-9; bottom:100px;   font-family: 'Roboto';}
.section3 .left_area {width:24%; padding-left:5%;   flex-shrink:0; margin-top:130px;   position:relative}
.section3 .left_area h3 {margin-top:30px}
.section3 .left_area a {width:220px; line-height:65px; font-weight:600;  font-size:20px;  text-align:center; color:#005468;  border:2px solid #005468; display:inline-block; margin-right:10px; margin-top:25px}


.section3 .line {
	position:absolute; width:100%; height:100%;  margin-top:0; box-sizing:border-box; left:-50%;  top:0; z-index:-9;
	border: 27px solid transparent;
	border-radius: 300px;
	background-image: linear-gradient(#fff, #fff), linear-gradient(to right, var(--main_c) 0%, #016982 29%, var(--main_c) 67%, #016982 100%);
	background-origin: border-box;
	background-clip: content-box, border-box;
	animation: rotate_image 6s linear infinite;transform-origin: 50% 50%;


}

.section3 iframe {margin-top:15px}

@media all and (max-width:900px) {
		.section3 {height:auto; flex-wrap:wrap;   width:100%; }
		.section3 .left_area {width:100%; margin-top:30px; padding-left:3%}
		.section3 iframe {height:40vw; margin-top:-30px}
		.section3 .bg_t {display:none}
       .section3 .line  {width:140%; height:400px}
}


 
.section4 {position:Relative; margin-top:90px}
.section4 ul.flex {width:100%; gap:30px}
.section4  * { transition: all 0.3s ease;}
.section4 ul.flex li {width:100%;  border-radius:20px; padding:0;  }
.section4 ul.flex li img {width:100%;   }
 
.section4 ul.flex li .img {position:relative; height:300px; overflow:hidden; cursor:pointer; }
.section4 ul.flex li div.img_bg {width:100%; height:100%; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);   }

.boasection4rd ul.flex li span {color:var(--main_c);  display:inline-block; font-size:16px}
.section4 ul.flex li h5 {font-size:1.1em; font-weight:500;  margin:10px 0 5px 0 }
.section4 ul.flex li a h5 {color:#333}
.section4 ul.flex li p.date {font-size:14px; margin-top:4px; letter-spacing:0; color:#555; font-weight:300}
.section4 ul.flex li .text { box-sizing:border-box; }
 
.section4  ul li:hover h5 {text-decoration:underline}