.banner {
	position:relative;
	height:calc(100vh - 60px);
	background-color:#F5F5F7;
}
.ban-img {
	position:absolute;
	right:7.3%;
	width:60%;
	top:50%;
	transform:translateY(-50%);
	background-color:#F5F5F7;
	overflow:hidden;
	transition:all .5s;
}
.ban-img img {
	width:100%;
	height:auto;
	mix-blend-mode:multiply;
}
.ban-video{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
}
.ban-video video{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-color: transparent;
}
.ban-text {
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	width:100%;
	overflow:hidden;
	z-index:2;
	text-align:left;
}
.ban-cn {
	line-height:1.5;
	margin:0 0 .3rem;
	font-weight:bold;
}
.ban-en {
	line-height:1.3;
	margin:0 0 .4rem;
}
.ban-des {
	width:50%;
	max-width:636px;
	color:#313142;
	line-height:32px;
	min-height:96px;
}
.ban-more {
	display:block;
}
.ban-more a {
	display:block;
	width:214px;
	color:#FFFFFF;
	line-height:50px;
	background-color:#000000;
	border-radius:25px;
}
.banner .swiper-pagination {
	position:absolute;
	left:0;
	right:0;
	bottom:5%;
}
.box-bg {
	padding:100px 0;
}
.box1-bg {
	padding:110px 0 120px;
	overflow:hidden;
}
.box1-tab {
	gap:10px;
	color:#0A6EC8;
	line-height:1.5;
}
.box1-tab li {
	display:block;
	width:180px;
	cursor:pointer;
}
.box1-tab li span {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	height:64px;
	border:1px solid #000000;
	border-radius:6px;
	transition:all .3s;
}
.box1-tab li span img {
	width:auto;
	max-height:14px;
}
.box1-tab li span img:first-child {
	;
}
.box1-tab li span img:nth-child(2) {
	display:none;
}
.box1-tab li span p {
	margin-top:4px;
}
.box1-tab li.active span {
	background:#000000;
}
.box1-tab li.active span img:first-child {
	display:none;
}
.box1-tab li.active span img:nth-child(2) {
	display:block;
}
.box1-tab li.active p {
	color:#FFFFFF;
}
.box1-tab li:hover span {
	background-color:#000000;
}
.box1-tab li:hover span img:first-child {
	display:none;
}
.box1-tab li:hover span img:nth-child(2) {
	display:block;
}
.box1-tab li:hover p {
	color:#FFFFFF;
}
.box1-swiper {
	position:relative;
	margin:20px 0 0;
	background-color:#FFFFFF;
}
.box1-swiper .swiper-container {
	overflow:visible;
}
.box1-swiper .swiper-slide {
	width:95%;
	max-width:1426px;
}
.box1-item {
	position:relative;
	border-radius:.2rem;
	transition:all .3s;
}
.box1-img {
	padding-bottom:47.68%;
	border-radius:.2rem;
}
.box1-img .imgBg {
	height:100%;
}
.box1-text {
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	padding:.4rem .6rem;
}
.box1-tag {
	margin-bottom:.3rem;
}
.box1-tag img {
	height:30px;
	max-height:.5rem;
}
.box1-name {
	line-height:1.2;
	margin-bottom:1.5rem;
	letter-spacing:.6em;
	font-weight:bold;
}
.box1-more {
	position:relative;
	display:flex;
	align-items:center;
	justify-content:space-between;
	width:300px;
	max-width:80%;
	line-height:50px;
	padding:0 16px 0 22px;
	border-radius:6px;
	background-color:rgba(255,255,255,.11);
	z-index:1;
	font-weight:300;
	letter-spacing:.5em;
	overflow:hidden;
	transition:all .3s;
}
.box1-more i {
	display:block;
	width:14px;
	height:23px;
	background:url(../images/icon-more-white.png) right center no-repeat;
	background-size:contain;
}
.box1-more:hover {
	background-color:var(--main-color);
}
.box1-item:hover {
	box-shadow:0px 0px .3rem rgba(0,0,0,0.4);
}
.box2-bg {
	position:relative;
	padding:135px 0 188px;
	background-color:#F5F5F7;
	overflow:hidden;
	z-index:1;
}
.box2-swiper {
	position:relative;
	z-index:1;
}
.box2-swiper .swiper-container {
	overflow:visible;
}
.box2-btn span {
	margin-top:.27rem;
}
.box2-btn span.swiper-button-lock {
	margin-top:0;
}
.box2-link {
	display:block;
	border-radius:.2rem;
	transition:all .3s;
}
.box2-img {
	padding-bottom:130.15%;
	border-radius:.2rem;
	overflow:hidden;
	;
}
.box2-img:hover .imgBg {
	transform:scale(1.05);
}
.box2-text {
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	padding:0 .4rem .2rem;
}
.box2-title {
	letter-spacing:.2em;
	margin-bottom:.1rem;
}
.box2-brief {
	letter-spacing:.2em;
	font-weight:300;
	margin-bottom:.5rem;
}
.box2-con {
	line-height:2;
	padding:.3rem;
	border-radius:.2rem;
	background-color:rgba(255,255,255,.1);
	backdrop-filter:blur(10px);
	display:none;
}
.box2-con p{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.box2-con a{
    color: #FFFFFF;
    transition: all .3s;
}
.box2-con a:hover{
    text-decoration: underline;
}
.box2-more {
	display:flex;
	align-items:center;
	justify-content:space-between;
	width:120px;
	font-size:14px;
	line-height:34px;
	color:#FFFFFF;
	padding:0 12px;
	margin-top:.4rem;
	border-radius:3px;
	border:1px solid #FFFFFF;
	transition:all .3s;
}
.box2-more i {
	display:block;
	width:7px;
	height:11px;
	background:url(../images/icon-more-white.png) right center no-repeat;
	background-size:contain;
}
.box2-more:hover {
	background-color:var(--main-color);
	border-color:var(--main-color);
}
.box2-arrow {
	display:block;
	width:100px;
	height:35px;
	margin:0 auto;
	background:url(../images/icon-up.png) center bottom no-repeat;
	background-size:20px auto;
	cursor:pointer;
}
.box2-arrow.active {
	background-image:url(../images/icon-down-blue.png);
}
.box2-link:hover {
	box-shadow:0px 0px .3rem rgba(0,0,0,0.4);
}
.box3-bg {
	position:relative;
	padding-bottom:120px;
	background-color:#F5F5F7;
	overflow:hidden;
	z-index:1;
}
.box2-bg + .box3-bg {
	padding-top:0;
}
.box3-swiper .swiper-container {
	overflow:visible;
}
.box3-swiper .swiper-slide{
    height: auto;
}
.box3-link {
    height: 100%;
	background-color:#FFFFFF;
	border-radius:.2rem;
	overflow:hidden;
	transition:all .3s;
}
.box3-img {
	flex-shrink:0;
	width:60.94%;
	max-width:546px;
	overflow:hidden;
}
.box3-img .imgBg {
	height:100%;
	transition:all 1s;
}
.box3-text {
	flex:auto;
	padding:.4rem;
	box-shadow:10px 17px 50px 0px rgba(0,0,0,0.1);
	overflow:hidden;
}
.box3-time {
	color:#747474;
	line-height:1;
	margin-bottom:.2rem;
}
.box3-name {
	position:relative;
	line-height:1.25;
	-webkit-line-clamp:4;
	margin-bottom:.4rem;
	transition:all .3s;
}
.box3-con {
	color:#747474;
	line-height:1.6;
	-webkit-line-clamp:2;
}
.box3-link:hover {
    transform: translateY(-5px);
	box-shadow:0px 0px .3rem rgba(0,0,0,0.2);
}
.box3-link:hover .box3-img .imgBg {
	transform:scale(1.05);
}
.box3-link:hover .box3-name {
	color:var(--main-color);
}
.box3-btn span {
	margin-top:.4rem;
}
.box3-btn span.swiper-button-lock {
	margin-top:0;
}
.box4-bg {
	position:relative;
	height:100vh;
	background:url(../images/index/box4-bg.png) center center no-repeat;
	background-size:cover;
	z-index:1;
	overflow:hidden;
}
.box4-bg .wrap {
	position:relative;
	height:100%;
}
.box4-tag {
	position:absolute;
	left:0;
	top:150px;
	width:223px;
	line-height:42px;
	background:#000000;
	border-radius:6px;
	overflow:hidden;
	z-index:1;
}
.box4-tag a {
	display:block;
	color:#FFFFFF;
	transition:all .3s;
}
.box4-tag a:hover {
	background-color:var(--main-color);
}
.box4-box {
	white-space:nowrap;
	height:100%;
}
.box4-left {
	flex-shrink:0;
	white-space:normal;
	width:46%;
	max-width:686px;
	width:100%;
	max-width:100%;
	color:#313142;
	margin-right:35%;
	color:rgba(26,26,26,.2);
	font-weight:bold;
	display:flex;
}
.box4-slogan {
	max-width:686px;
	max-width:700px;
	max-width:100%;
	margin-left:auto;
}
.box4-slogan p {
	position:relative;
}
.box4-slogan p::before {
	display:block;
	content:attr(data-note);
	color:#313142;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	will-change:transform,opacity;
	animation-name:aniClip;
	animation-duration:1s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	animation-play-state:paused;
	animation-delay:calc(var(--go) * -1s);
	animation-timing-function:linear;
}
.box4-title {
	flex-shrink:0;
	color:#313142;
	text-align:center;
	margin-right:30%;
}
.box4-title p {
	font-weight:100;
	opacity:.8;
}
.box4-title h2 {
	font-weight:normal;
}
.box4-history {
	flex-shrink:0;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	width:50vw;
	height:50%;
}
.box4-history:nth-of-type(2n+1) {
	justify-content:flex-start;
}
.box4-year {
	width:fit-content;
	font-size:100px;
	line-height:0.8;
	margin-bottom:.1rem;
	font-family:Arial;
	font-weight:bold;
	background:linear-gradient(140deg,#0A6FCB 34.47265625%,#6AADEA 100%);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}
.box4-name {
	line-height:1.5;
	margin-bottom:.12rem;
	font-weight:bold;
}
.box4-con {
	white-space:normal;
	color:#4B4B4C;
	line-height:1.5;
	max-width:470px;
}
.box4-bot {
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	transform:translateY(85%);
	width:60%;
	max-width:856px;
	margin:0 auto;
}
.box4-arrow {
	position:absolute;
	left:0;
	right:0;
	top:0;
	transform:translateY(-50%);
	width:15%;
	max-width:116px;
	margin:0 auto;
	animation:aniWalk .7s ease-in-out infinite alternate;
}
.box4-arrow img {
	width:100%;
	height:auto;
}
.box4-circle {
	border-radius:50%;
}

@media (max-width:1600px) {
    .box4-year{ 
        font-size: 5.2vw;
    }
    
}
@media (max-width:1400px) {
    .box-bg {
	    padding:1.1rem 0;
    }
    .box2-bg {
        padding:1.2rem 0 1.6rem;
    }
    .box1-tab li {
        width:140px;
    }
    .box1-more {
        width:240px;
    }
    .box1-more i {
        width:10px;
    }
    .box4-tag {
        top:12%;
    }

}
@media (max-width:1200px) {
    .box1-name {
        margin-bottom:1rem;
    }
    .box2-text {
        padding:.2rem;
    }
    .box2-more {
        margin-top:.2rem;
    }
    .box3-text {
        padding:.3rem;
    }
}
@media (max-width:991px) {
    .ban-img {
        top:10%;
        transform:translateY(0);
        width:80%;
        right:10%;
    }
    .ban-text {
        top:20%;
        text-align:center;
    }
    .ban-des {
        line-height:24px;
        min-height:0;
        width:100%;
        max-width:100%;
        margin:.3rem 0;
    }
    .ban-more a {
        width:120px;
        line-height:42px;
        margin:0 auto;
    }
    .box1-tab li {
		flex: auto;
        width:auto;
    }
    .box1-tab li span {
        padding:0 .2rem;
    }
    .box1-tab li span img {
        max-width:40px;
    }
    .box1-name {
        margin-bottom:.6rem;
    }
    .box1-tag {
        margin-bottom:.2rem;
    }
    .box1-tag img {
        height:20px;
    }
    .box1-more {
        width:180px;
        line-height:42px;
    }
}
@media (max-width:767px) {
    .box1-text {
        padding:.3rem;
    }
    .box4-tag {
        left:.3rem;
        max-width:2.4rem;
    }
    .box4-left {
        margin-right:15%;
    }
    .box4-bot {
        width:100%;
    }
        
}
@media (max-width:640px) {
    .box1-tab li span {
        height:50px;
    }
    .box1-img {
        padding-bottom:65%;
    }
    .box1-more {
        width:140px;
        line-height:38px;
        padding:0 .1rem 0 .2rem;
        letter-spacing:.3em;
    }
    .box1-more i {
        width:8px;
    }
    .box3-img {
        width:50%;
    }
    .box3-name {
        -webkit-line-clamp:3;
        margin-bottom:.2rem;
    }    
}
@media (max-width:460px) {

}