@charset "utf-8";




/* ======================================================
   .msec-visual
=========================================================*/
.msec-visual {position: relative;}
.msec-visual .img {background: url("../images/Main/mvisual-01.jpg") no-repeat center center #02121b;  width: 100%; height:412px; }
.msec-visual .txt {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; width: 600px;}
.msec-visual .txt .txt1 {font-size:40px; color: #fff; line-height: 110%; word-break: keep-all; font-weight: 500;}
.msec-visual .txt .txt1:nth-child(2) {position: relative; left: 11%;}
.msec-visual .txt span.num {font-size: 32px;position:relative; top: -15px; left: -10px;}
.msec-visual .txt span.small {font-size: 24px;position:relative; top: -5px; left: 15px;}
.msec-visual .txt .txt2 {font-size: 18px; color: #fff; line-height: 130%; margin-top: 30px; word-break: keep-all;}

	@media only screen and (max-width: 768px) {
		.msec-visual .txt {width: 90%; }
		.msec-visual .txt .txt1 {font-size: 28px;}
		.msec-visual .txt span.num { font-size: 21px;}
		.msec-visual .txt span.small { font-size: 16px;}
		.msec-visual .txt .txt2 {font-size: 14px;}
	
	}


/* ======================================================
   .msec-cont
=========================================================*/
.msec-cont {display: flex ;flex-wrap: wrap;}
section {position: relative;}
section:nth-child(odd) {width: 65%; }
section:nth-child(even) {width: 33%; margin-left: 2%;}
section p {font-size: 14px; color: #686868;}
section .con {padding: 15px 5px; box-sizing: border-box;}


.title { height: 50px; color: #047282;  display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #047282}
.title span {font-size: 18px; font-weight: 600; margin-bottom: 5px;}
.title span.more {color: #696969; font-size: 12px; margin-bottom: 0;}

	@media only screen and (max-width: 768px) {
		.msec-cont {flex-direction: column;}
		section {width: 100%!important; margin-left: 0!important }
	
	}




/* ======================================================
   .section1
=========================================================*/
.section1 .con {padding: 15px 5px; display: inline-block;}
.section1 .con .img {width: 44%; float: left; overflow: hidden;}
.section1 .con .img img {width: 100%;}
.section1 .con .txt {width: 54%; float: right;}
.section1 .con .txt p {word-break: keep-all; font-size: 14px;}
.section1 .btn-apply {width: 96px; height: 25px; background: #2296b6; border-radius: 10px; float: right; margin-top: 20px;}
.section1 .btn-apply a {display: block; color: #fff; text-align: center;}


	@media only screen and (max-width: 768px) {
		.section1 .con .img {width: 100%; float: none; margin-bottom: 10px;}	
		.section1 .con .txt {width: 100%; float: none;}	
	
	}



/* ======================================================
   .section2
=========================================================*/
.section2 {}
.section2 ul li {display: flex; align-items: center; justify-content: space-between; width: 100%; position: relative; box-sizing: border-box;}
.section2 ul li:before {content: ""; width: 2px; height: 2px; background: #7e7e7e; position: absolute; top: 50%; left: -5px; transform: translateY(-50%); }
.section2 ul li p {font-size: 14px; color: #696969; width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 28px;}
.section2 ul li span.date {display: inline-block;  font-size: 14px; color: #696969; width: 25%; line-height: 28px; text-align: right;}


/* ======================================================
   .section3
=========================================================*/
.section3 .img {border: 1px solid #b2b2b2; border-radius: 10px; margin: 20px auto 0 ; padding: 34px 0; box-sizing: border-box;}
.section3 ul {display: flex; justify-content: space-around; align-items: center; }
.section3 ul li {width: 150px; height: 150px; display: flex; align-items: center;}
.section3 ul li:nth-child(1) {background: url("../images/Main/edu1.png") no-repeat center center; background-size: contain; color: #ed7d31;}
.section3 ul li:nth-child(2) {background: url("../images/Main/edu2.png") no-repeat center center; background-size: contain; color: #70ad47;}
.section3 ul li:nth-child(3) {background: url("../images/Main/edu3.png") no-repeat center center; background-size: contain; color: #5b9bd5;}
.section3 ul li span {margin-left: 35px; font-size: 18px; font-weight: 500;}
.section3 ul li:nth-child(1) span {}
.section3 ul li:nth-child(2) span {}
.section3 ul li:nth-child(3) span {}

.section3 .txt {background: #fff; width: 300px; height: 70px; position: absolute; top: 70%; left: 5%; }
.section3 .txt p {line-height: 150%;}

	@media only screen and (max-width: 768px) {
		.section3 .img {padding: 20px;}
		.section3 ul li {width: 25vw; height: 25vw;}
		.section3 ul li span {margin-left: 0; margin: auto; font-size: 14px;}
		.section3 .txt {width: 100%; height: auto; position: relative; top: 0; left: 0; margin-top: 20px;}
	
	}

/* ======================================================
   .section4
=========================================================*/
.section4 ul {}
.section4 ul li {margin-top: 10px;}
.section4 ul li img {width: 100%;}
.section4 ul li .txt {position: absolute; top: 0; left:0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center;}
.section4 ul li p.txt1 {font-size: 20px; color: #fff;}
.section4 ul li p.txt2 {font-size: 14px; color: #000; font-weight: 500;}

.section4 ul li:nth-child(1) p.txt1 {text-align: center;}
.section4 ul li:nth-child(1) p.txt2 {text-align: center;}
.section4 ul li:nth-child(2) p.txt1 {margin-left: 15%;}
.section4 ul li:nth-child(2) p.txt2 {margin-left: 5%;}
.section4 ul li:nth-child(3) p.txt1 {text-align: right; margin-right: 10%;}
.section4 ul li:nth-child(3) p.txt2 {text-align: right; margin-right: 10%;}


/* ======================================================
   .section5
=========================================================*/
.section5 ul {display: flex; justify-content: space-between;}
.section5 ul li {display: flex; flex-direction: column; width: 49%;}
.section5 ul li img {width: 100%; height: 200px; object-fit: cover; margin: 10px 0;}
.section5 ul li p:first-child {text-align: left;}
.section5 ul li p {text-align: center;}

	@media only screen and (max-width: 768px) {
		.section5 ul li img {height: 30vw;}
	
	}


/* ======================================================
   .section6
=========================================================*/
.section6 p:first-child {text-align: left;}
.section6 p {text-align: center;}
.section6 img {width: 100%; height: 200px; object-fit: cover; margin: 10px 0;}

	@media only screen and (max-width: 768px) {
	
		.section6 img {height: auto;}
	}