/* 
.visual .swiper { position: relative; height: 940px; } 
.visual .swiper .brand-text { position: absolute; text-align: center; z-index: 99; top: 40%; width: 100%; } */

/* main 
.visual { position: relative; overflow: hidden; height: 85vh; } 
.visual .txt { position: absolute; left:50%; top: 50%; width: 100%; max-width: 1400px; text-align: left; z-index: 3; transform:translate(-50%, -80%) } 
.visual .txt h3 { font-family:var(--font-play); font-size: 75px; font-weight: 700; color: #fff; letter-spacing: 5px; line-height: 1; } 
.visual .txt p { margin: 40px 0 0;  font-size: 18px; font-weight: 500; color: #fff; } 
.visual .control-box { position: absolute; left:50%; top: 65%; width: 100%; max-width: 1400px; text-align: left; z-index: 3; transform:translate(-50%, -80%)  } 
.visual .control-box .control { width: 240px; display: flex; align-items: center; justify-content: space-between; } 
.visual .control-box .control .progress-bar { width: 100%; height: 2px; background-color: rgba(255,255,255, 50%); } 
.visual .control-box .control .progress-inner { display: block; min-width: 100%; height: 100%; background-color: #fff; transform: scaleX(0); transform-origin: 0%; animation-play-state: paused; } 
.visual .control-box .control .progress-inner.active { animation-name: progress; animation-fill-mode: both; }
@keyframes progress { 100% { transform: scaleX(1); } }  
.visual .control-box .control .video-play { color: #fff; font-size: 22px; cursor: pointer; } 

.mouse-box { position: absolute; bottom: 50px; left: 50%; width: 50px; transform: translateX(-50%); height: 50px; z-index: 9 } 
.mouse-box .mouse { margin: 0 auto; height: 44px; width: 30px; border-radius: 22px; -webkit-transform: none; transform: none; border: 2px solid #fff } 
.mouse-box .mouse .wheel { height: 8px; width: 2px; display: block; margin: 8px auto; background-color: #fff; -webkit-animation: mouse-wheel 0.8s linear infinite; animation: mouse-wheel 0.8s linear infinite; position: relative } 
@keyframes mouse-wheel { 0% { top: 1px } 25% { top: 2px } 50% { top: 3px } 75% { top: 2px } 100% { top: 1px } } 

.visual-swiper { height: 85vh; overflow: hidden; } 
.visual-swiper .swiper-slide { height: 100%; } 
.swiper-slide video { width:100%; height: 100%; object-fit: cover; z-index: 2; }

@media (max-width: 1020px) { 
	.visual .txt { padding: 0 20px; }
	.visual .txt h3 { font-size: 38px; } 
	.visual .txt p { font-size: 14px; display: none;}
    .visual .control-box { padding: 0 20px; }
	.visual .control-box .control { width: 150px; top: 60%; } 
	.visual .control-box .control .video-play { font-size: 16px; padding: 15px; } 

	.mouse-box .mouse { height: 26px; width: 16px; border-radius: 8px; } 
	.mouse-box .mouse .wheel { height: 5px; width: 2px; display: block; margin: 3px auto; } 
} 

*/

.visual { position: relative; overflow: hidden; height: 96vh; display: flex; align-items: end; } 
/*.visual::after { content: url("/assets/img/visual-bottom.svg"); width: 250px; height: 250px; position: absolute; bottom: 0; right: 0; z-index: 2; } */
.visual .txt {position: absolute;left: 45px;right: 45px;bottom: 110px;text-align: left;z-index: 3;font-family: var(--title-font);} 
.visual .txt p {margin: 0 0 15px;font-size: 26px;font-weight: 400;color: #fff;text-align: left;} 
.visual .txt h3 {font-size: 66px;font-weight: 700;color: #fff;letter-spacing: 5px;line-height: 1;text-align: left;letter-spacing: -1px;padding: 0 0 40px;border-bottom: 1px solid rgba(255,255,255,.6);margin: 0 0 40px;} 
.visual .txt em {display: block;font-style: normal;font-size: 22px;color: #fff;font-weight: 300;}
.visual .control-box { position: absolute; left: 50%; top: 60%; width: 100%; max-width: 1400px; text-align: left; z-index: 3; transform: translate(-50%, -80%); display: none; justify-content: center; } 
.visual .control-box .control { width: 240px; display: flex; align-items: center; justify-content: space-between; } 
.visual .control-box .control .progress-bar { width: 100%; height: 2px; background-color: rgba(255, 255, 255, 50%); } 
.visual .control-box .control .progress-inner { display: block; min-width: 100%; height: 100%; background-color: #fff; transform: scaleX(0); transform-origin: 0%; animation-play-state: paused; } 
.visual .control-box .control .progress-inner.active { animation-name: progress; animation-fill-mode: both; } 
@keyframes progress { 100% { transform: scaleX(1); } 
 } 
.visual .control-box .control .video-play { color: #fff; font-size: 22px; cursor: pointer; } 

/*.mouse-box { position: absolute; bottom: 50px; left: 50%; width: 50px; transform: translateX(-50%); height: 50px; z-index: 9; } 
.mouse-box .mouse { margin: 0 auto; height: 44px; width: 30px; border-radius: 22px; -webkit-transform: none; transform: none; border: 2px solid #fff; } 
.mouse-box .mouse .wheel { height: 8px; width: 2px; display: block; margin: 8px auto; background-color: #fff; -webkit-animation: mouse-wheel 0.8s linear infinite; animation: mouse-wheel 0.8s linear infinite; position: relative; } 
@keyframes mouse-wheel { 
 0% { top: 1px; } 
25% { top: 2px; } 
50% { top: 3px; } 
75% { top: 2px; } 
100% { top: 1px; } 
 } 
*/
.visual-swiper { height: 96vh; overflow: hidden; } 
.visual-swiper .swiper-slide { height: 100%; } 
.swiper-slide video { width:100%; height: 100%; object-fit: cover; z-index: 2; }

@media (max-width: 1230px) { 
.visual { height: auto; } 
.visual::after { display: none;} 
.visual .txt { padding: 0 20px; display: none; } 
.visual .txt h3 { font-size: 20px; } 
.visual .txt p { font-size: 14px; display: none; } 
.swiper-slide video { width: 200%; max-height: 100%; transform: translate(-25%, 0); } 
.visual .control-box { position: absolute; left: 50%; top: 85%; width: 100%; max-width: 1400px; text-align: left; z-index: 3; transform: translate(-50%, -80%); display: flex; justify-content: center; } 
.visual .control-box .control { width: 150px; bottom: 10%; } 
.visual .control-box .control .video-play { font-size: 16px; padding: 15px; } 
.mouse-box { bottom: 0; display: none; } 
.mouse-box .mouse { height: 26px; width: 16px; border-radius: 8px; } 
.mouse-box .mouse .wheel { height: 5px; width: 2px; display: block; margin: 3px auto; } 
 } 


/* main-title */
.pott1 { color: var(--bs-primary); }
.pottM {font-weight: 700;}

.main-btn1 {margin-bottom: 60px;}
.main-btn1 > a {display: inline-block;width: 208px;height: 53px;line-height: 53px;background: #0f2538 url(/assets/img/arrow_right_white.svg) 85% center no-repeat;background-size: 7px;border-radius: 30px;color: #fff;text-align: left;box-sizing: border-box;padding: 0 0 0 40px;font-size: 17px;font-weight: 400;}
.main-btn1 > a.blue {background: #1a517f url(/assets/img/arrow_right_white.svg) 85% center no-repeat;background-size: 7px;}
.main-btn1 > a.green {background: #5d7f1a url(/assets/img/arrow_right_white.svg) 85% center no-repeat;background-size: 7px;}


.main-title1 {font-family: var(--title-font);} 
.main-title1 strong {display: block;font-size: 24px;font-weight: 400;line-height: 100%;margin-bottom: 20px;}
.main-title1 p {font-size: 58px;font-weight: 800;line-height: 80px;margin: 0 0 40px;}
.main-title1 em {display: block;font-style: normal;font-family: var(--body-font);line-height: 34px;font-size: 19px;margin: 0 0 30px;}

.main-title2 {font-family: var(--title-font);font-size: 48px;color: #0f2538;font-weight: 700;letter-spacing: -1px;} 
.main-title2 strong {display: block;margin: 30px 0 90px;font-family: var(--body-font);font-size: 20px;line-height: 32px;font-weight: 500;letter-spacing: -1px;}

.main-title3 { text-align: center; padding: 80px 0 60px;} 
.main-title3 img {width: 53px;} 
.main-title3 span { display: block; color: #99989c; font-size: 20px; margin-top: 15px;}

@media (max-width: 980px) { 
	.main-btn1 {margin-bottom: 40px;}
	.main-title1 strong {font-size: 19px;margin-bottom: 14px;}
	.main-title1 p {font-size: 36px;line-height: 46px;margin: 0 0 20px;}
	.main-title1 em {font-size: 15px;line-height: 26px;letter-spacing: -1px;}
	.main-btn1 > a {font-size: 16px;}


	.main-title2 {font-size: 29px;} 
	.main-title2 strong {font-size: 19px;letter-spacing: -1px;line-height: 28px;margin: 10px 0 25px;}

}


/* main1 */
.main1 {margin: 0; height: 937px; padding: 100px 0; } 
@media (max-width: 980px) { 
	.main1 { margin: 0; height: auto; padding: 10px 0 40px; } 
}

/* main2 */
.main2 {padding:145px 0 0;text-align:center;} 
@media (max-width: 980px) { 
.main2 {padding:65px 0 0;}
}

/* main3 */
.main3 {padding: 145px 0 100px;text-align: center;background: url(/assets/img/course_bg.jpg);}
.bgc1 {background-color:#1a517f;}

.course {width: 1440px;margin: 60px auto 0;list-style: none;padding: 0;text-align: left;}
.course > li {background: #fff;border-radius: 30px;overflow: hidden;box-shadow: 0 0 9px 4px rgba(0, 0, 0, .1);margin-bottom: 20px;}
.course dl {margin: 0;}
.course dl:after {content:'';display: block;clear: both;}
.course dl > dt {float: left;padding: 90px 0 0 65px;}
.course dl > dd {float: right;margin: 0;}

@media (max-width: 1460px) {
	.course {width:96%;}
	.course dl > dt {width:36%;}
	.course dl > dd {width:64%;height: 450px;}
	.course dl > dd > img {height: 100%;object-fit: cover;}
}

@media (max-width: 1024px) {
	.main3 {padding: 65px 0 50px;background-position: center;}
	.course {width:92%;margin: 30px auto 0;}
	.course dl > dt {float: none;width: 100%;padding: 45px 0 0 0;text-align: center;}
	.course dl > dd {float: none;width: 100%;height: 260px;}
	.course dl > dd > img {width: 100%;}
}


/* main4 */
.main4 {height: 300px;background: url(/assets/img/location_bg.jpg) no-repeat;}
.mainwrap {position: relative;width: 860px;height: 100%;margin: 0 auto;}
.location_tit {position: absolute;left: 0;top: 50%;transform: translate(0, -50%);}
.location_ob {position: absolute;right: 0;top: 50%;transform: translate(0, -50%);}

@media (max-width: 980px) {
.main4 {height: 150px;}
.mainwrap {width: 92%;}
.location_tit {width: 268px;}
.location_ob {height:128px;right:30px}
}


@media (max-width: 620px) {
.main4 {height: 150px;}
.mainwrap {width: calc(100% - 40px);}
.location_tit {top: 43px;transform: translate(0, 0);width: 240px;}
.location_ob {height:82px;}
}

@media (max-width: 480px) {
.location_ob {display: none;}
}

@media (max-width: 1230px) { 
	.main2 { margin: 0 0 80px; } 
	.main2::before {display: none;} 
	.main2::after {display: none;} 

} 

@media (max-width: 1230px) { 
	.main2 { margin: 0; } 
	.main2::before {display: none;} 
	.main2::after {display: none;} 

}