@charset "utf-8";
body{ width: 100%;}

.wrapper{ width: 100%; overflow: hidden;}

header,.container,footer{ width: 100%;}

header{ position: fixed; display: flex; justify-content: space-between; align-items: center; padding: 1.875vw 6.25vw; z-index: 9; transition: .35s!important}

header .logo{ width: auto; height: 3.375rem;}
header .logo a{ display: block; width: 100%; height: 100%;}
header .logo a img{ display: block; width: 100%; height: 3.375rem;}

header .nav{ display: grid; grid-auto-flow: column; grid-gap: 2em; font-size: 1.125rem; font-weight: bold;}
header .nav a{ color: white;}
header .nav a.on{ color: var(--primary);}

header .store{ display: grid; grid-auto-flow: column; align-items: center; grid-gap: 1rem; height: 3rem; padding: 0 1.5rem; border-radius: var(--rounded); background: #e8f6ff;}
header .store strong{ font-size: 1.125rem;}
header .store span{ position: relative; display: flex; justify-content: center; align-items: center; cursor: pointer;}
header .store span>img{ width: 100%; height: 100%;}
header .store span b{ position: absolute; top: 2rem; width: 5.625vw; height: 5.625vw; border-radius: 1rem; background: #000; opacity: 0; visibility: hidden}
header .store span b.is-visible{ opacity: 1; visibility: visible;}
header .store span b img{ width: 100%; height: 100%; object-fit: cover;}
header .store i{ width: 2px; height: 1rem; background: var(--primary);}

header .menu{ position: absolute; top: 0; bottom: 0; right: 5vw; width: 2.5rem; height: 2.5rem; margin: auto; display: none; background: var(--primary); transition: .35s}
header .menu i{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 1.5rem; height: 2px; margin: auto; background: white; transition: transform .35s;}
header .menu i:first-child{ transform: translateY(-5px); }
header .menu i:nth-child(2){ width: 1rem; transform: translateX(-.25rem);}
header .menu i:last-child{ transform: translateY(5px); }
header .menu.act i:first-child{ transform: translateY(0) rotate(45deg);}
header .menu.act i:nth-child(2){ opacity: 0;}
header .menu.act i:last-child{ transform: translateY(0) rotate(-45deg);}

header.full{ padding: 1vw; background: white;}
header.full .nav a{ color: black;}
header.full .nav a.on{ color: var(--primary);}
header.full .menu{ right: 1vw;}

footer{ display: grid; grid-gap: 8rem; padding: 5.625vw 6.25vw 3.75vw; background: url('../img/footer.webp') no-repeat center top / cover;}
footer .link{ display: flex; justify-content: space-between; align-items: center;}
footer .link .logo{}
footer .link .logo a{ display: grid; grid-gap: 1rem;}
footer .link .logo a img{ width: auto; height: 3.375rem;}
footer .link .logo a span{ font-size: 1.5rem; font-weight: bold; color: var(--primary);}
footer .navigation{ display: grid; grid-auto-flow: column; grid-gap: 2em; font-size: 1.125rem;}
footer .store{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 1rem;}
footer .store::before{ content: '全平台购水'; grid-column: span 3; font-size: 1.125rem; font-weight: bold;}
footer .store .itm{ position: relative; display: flex; justify-content: center; align-items: center; width: 3.75rem; height: 3.75rem; border-radius: var(--rounded); background: white; box-shadow: 0 6px 13px rgba(0, 0, 0, .05); cursor: pointer;}
footer .store .itm b{ position: absolute; top: 3.75rem; width: 5.625vw; height: 5.625vw; border-radius: 1rem; background: #000; opacity: 0; visibility: hidden}
footer .store .itm b.is-visible{ opacity: 1; visibility: visible;}
footer .store .itm b img{ width: 100%; height: 100%; object-fit: cover;}
footer .contact{ justify-content: start; margin-bottom: 8rem; display: grid; grid-gap: 1rem;}
footer .contact .telephone{ font-size: 1.5rem; line-height: 2rem; font-weight: bold; padding-left: 2rem; background: url('../img/telephone.webp') no-repeat left center / auto 2rem;}
footer .contact .line{ width: 100%; height: 1px; background: #a6bdd2;}
footer .contact .address{ font-size: 1rem; line-height: 2; padding-left: 2rem; background: url('../img/address.webp') no-repeat left center / auto 2rem;}
footer .copyright{ display: flex; justify-content: space-between; align-items: center; width: 100%; height: auto; padding: 1em 1.5rem; border-radius: 5px; background: white; font-size: 1rem;}
footer .copyright::after{ content: '百航科技-专业网络品牌设计'; color: var(--info);}

section.row{ width: 100%; height: 100%;}
section.row .column{ width: 100%; padding: 0 6.25vw;}
section.row .column .caption{ display: flex; justify-content: center; align-items: center; width: 100%;}
section.row .column .caption .en{ position: relative; z-index: 0; font-size: 9.375rem; line-height: 1; text-transform: uppercase; color: transparent; background-clip: text; background-image: linear-gradient(to bottom, #f0f0f0, #fff);}
section.row .column .caption .cn{ position: absolute; z-index: 1; font-size: 1.875rem; font-weight: bold;}

section.row.slide{ position: relative; width: 100%; height: 56.25vw; background: #000;}
section.row.slide::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 5.625vw; background: url('../img/slide.webp') no-repeat center bottom / 100% auto; z-index: 1;}
section.row.slide .swiper{ position: relative; width: 100%; height: 100%; z-index: 0;}
section.row.slide .itm{ width: 100%; height: 100%;}
section.row.slide .itm .cover{ position: absolute; top: 0; right: 0; width: 100%; height: 100%;}
section.row.slide .itm .cover img{ width: 100%; height: 100%; object-fit: cover; transition:1s linear 2s; transform:scale(1.1,1.1);}
section.row.slide .swiper-slide-active .itm img,section.row.slide .swiper-slide-duplicate-active .itm img{transition:6s linear;transform:scale(1,1);}
section.row.slide .swiper-page{ position: absolute; bottom: 6.25vw; display: grid; grid-auto-flow: column; justify-content: start; grid-gap: 0.5rem; padding: 0 6.25vw;}
section.row.slide .swiper-page span{ display: flex; justify-content: center; align-items: center; width: 2.75rem; height: 3.375rem; background: url('../img/water_s.webp') no-repeat center center / cover; font-size: 1.125rem; color: #536489; cursor: pointer;}
section.row.slide .swiper-page span.active{ background: url('../img/water_b.webp') no-repeat center center / cover; font-size: 1.875rem; color: white;}
section.row.slide .mouse{ position: absolute; bottom: 6.25vw; right: 6.25vw; display: flex; justify-content: center; align-items: center; width: 1rem; height: 2rem; border: 2px solid white; border-radius: var(--rounded); color: white; font-size: 0.75rem;}

section.row.about{ position: relative; padding: 6.25vw 0;}
section.row.about::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 68.5vw; background: url('../img/about.webp') white no-repeat center top / 100% 68.5vw; z-index: 0;}

section.row.about .column{ position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; align-items: center;}
section.row.about .column .slogan{ grid-column: span 2;}
section.row.about .column .slogan .cover{ position: relative; width: 100%; height: 0; padding-bottom: 200%;}
section.row.about .column .slogan .cover img{ position: absolute; width: 100%; height: 100%;}

section.row.about .column .infor{ grid-column: span 4; display: grid; grid-gap: 3.5vw;}
section.row.about .column .infor .content h1{ font-size: 1.875rem;}
section.row.about .column .infor .content h5{ font-size: 1.125rem; font-weight: normal;}
section.row.about .column .infor .line{ width: 100%; height: 1px; background: #baafdd;}
section.row.about .column .infor .number{ display: grid; grid-template-columns: repeat(2,1fr);}
section.row.about .column .infor .number .itm{ display: grid; justify-content: start; align-items: baseline;}
section.row.about .column .infor .number .itm strong{ font-size: 4.5rem; line-height: 1;}
section.row.about .column .infor .number .itm i{ font-size: 1.875rem; font-style: normal;}
section.row.about .column .infor .number .itm span{ grid-column: span 2; font-size: 1.125rem; font-weight: bold;}

section.row.about .column .infor .more{ display: grid; justify-content: start;}
section.row.about .column .infor .more a{ font-size: 0.875rem; line-height: 2; text-transform: uppercase; padding: 0 2em; border: 2px solid #000; border-radius: var(--rounded);}

section.row.about .column .intro{ grid-column: span 6; display: grid; grid-gap: 2.5vw;}
section.row.about .column .intro .cover{ position: relative; width: 100%; height: 0; padding-bottom: 50%; border-radius: 1vw; overflow: hidden; cursor: pointer;}
section.row.about .column .intro .cover:before{ content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); opacity: 0; z-index: 1;}
section.row.about .column .intro .cover::after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 3rem; height: 3rem; margin: auto; background: url('../img/play.webp') no-repeat center center / cover; opacity: 0; z-index: 2;}
section.row.about .column .intro .cover img{ position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 0;}
section.row.about .column .intro .cover:hover::before,
section.row.about .column .intro .cover:hover::after{ opacity: 1;}

section.row.about .column .intro .content{ display: grid; grid-gap: 2rem;}
section.row.about .column .intro .content p{ font-size: 1.125rem; line-height: 1.75;}

section.row.recommend{ position: relative; background: url('../img/recommend.webp') no-repeat center bottom / 100% auto;}
section.row.recommend::after{ content: ''; position: absolute; bottom: -2.5vw; left: 0; width: 100%; height: 2.5vw; background: white; z-index: 0;}

section.row.recommend .column{ position: relative; z-index: 1;}

section.row.recommend .column .content{ width: 100%; padding: 12.5vw 0 3.75vw; background: url('../img/product.webp') no-repeat center top / 100% auto;}
section.row.recommend .column .content .swiper{ width: 100%; height: 30vw; -webkit-box-reflect: below 0 linear-gradient( rgba(0,0,0,0.0) 90%, rgba(0,0,0,.3) 100%);}
section.row.recommend .column .content .itm{ display: grid; grid-template-columns: 1fr 30vw 1fr; width: 100%; height: 100%;}
section.row.recommend .column .content .itm .info{ display: flex; flex-flow: column nowrap; justify-content: center; align-items: center;}
section.row.recommend .column .content .itm .info .tit{ font-size: 1.5rem; font-weight: bold; color: var(--secondary);}
section.row.recommend .column .content .itm .info .ml{ display: flex; justify-content: center; align-items: center; width: 14.375rem; height: 11.375rem; padding-bottom: 4.5rem; font-size: 2.25rem; color: var(--secondary); background: url('../img/ml.webp') no-repeat center center/cover;}
section.row.recommend .column .content .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden;}
section.row.recommend .column .content .itm .cover img{ position: absolute; width: 100%; height: 100%; object-fit: cover;}

section.row.recommend .column .arrow{ display: grid; grid-auto-flow: column; justify-content: center; align-items: center; grid-gap: 1.25vw; font-size: 2rem;}
section.row.recommend .column .arrow .prev{ display: flex; justify-content: center; align-items: center; width: 3.75vw; height: 3.75vw; border-radius: var(--rounded); border: 3px solid var(--secondary); color: var(--secondary); cursor: pointer;}
section.row.recommend .column .arrow .next{ display: flex; justify-content: center; align-items: center; width: 3.75vw; height: 3.75vw; border-radius: var(--rounded); background: linear-gradient(#d091f4,#602afd); box-shadow: 0 1vw 1.5625vw rgba(96, 42, 253, .16); color: white; cursor: pointer;}

section.row.advantage{ position: relative; bottom: -2.5vw; width: 100%; height: 56.25vw; z-index: 0;}
section.row.advantage::before{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 35vw; background: url('../img/advantage/before.webp') no-repeat center center / cover; z-index: 2;}
section.row.advantage::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../img/advantage/after.webp') no-repeat center center / cover; z-index: 0;}

section.row.advantage .column{ position: relative; z-index: 1; height: 100%;}

section.row.advantage .column .content{ position: absolute; top: 14.375vw; display: grid; justify-items: start; width: 28vw;}
section.row.advantage .column .content h1{ font-size: 1.25rem;}
section.row.advantage .column .content p{ font-size: 1rem; line-height: 1.75; text-align: justify;}
section.row.advantage .column .content a{ font-size: 0.875rem; line-height: 2; text-transform: uppercase; padding: 0 2em; border: 2px solid #000; border-radius: var(--rounded); margin-top: 2.5vw;}

section.row.advantage .column .bottle{ position: absolute; top: 0; right: calc(50% - 16.25vw); z-index: 0; display: flex; justify-content: center; align-items: center; width: 32.5vw; height: 45vw; background: url('../img/advantage/bottle.webp') no-repeat center center / cover;}
section.row.advantage .column .bottle img{ width: 13.4375vw; height: 13.4375vw;}

section.row.advantage .column .number{ position: absolute; top: 14.375vw; right: 3.125vw; display: flex; justify-content: flex-end; align-items: flex-start; width: 35vw; height: 27.5vw; z-index: 0;}
section.row.advantage .column .number i{ width: 6.25vw; height: 13.4375vw; z-index: 0;}
section.row.advantage .column .number i:nth-of-type(1){ margin-top: 6.5vw; margin-right: 0.5vw; background: url('../img/advantage/2.webp') no-repeat center center / cover; z-index: 2;}
section.row.advantage .column .number i:nth-of-type(2){ margin-top: 5vw; margin-right: 0.5vw; background: url('../img/advantage/6.webp') no-repeat center center / cover;}
section.row.advantage .column .number i:nth-of-type(3){ margin-top: 3.5vw; background: url('../img/advantage/9.webp') no-repeat center center / cover;}
section.row.advantage .column .number i:nth-of-type(4){ margin-top: 2.5vw; background: url('../img/advantage/1.webp') no-repeat center center / cover;}
section.row.advantage .column .number b{ position: absolute; bottom: 0; right: 0; width: 35vw; height: 16.875vw; background: url('../img/advantage/clouds.webp') no-repeat center center / cover; z-index: 1;}
section.row.advantage .column .number span{ position: absolute; top: 0; font-size: 0.875rem; font-weight: bold;}
section.row.advantage .column .number strong{ position: absolute; top: 1.25rem; font-size: 1.125rem;}

section.row.news{ position: relative; z-index: 1;}
section.row.news .column{ display: grid; background: linear-gradient( transparent 0, transparent 2.5vw, white 2.5vw, white);}
section.row.news .column .caption{ padding-top: 2.5vw; border-radius: 1vw 1vw 0 0; background: white;}
section.row.news .column .content{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 4vw; align-items: start; padding: 0 2.5vw; background: white;}
section.row.news .column .content .itm{ display: grid; grid-gap: 1.5rem; justify-items: start;}
section.row.news .column .content .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); overflow: hidden;}
section.row.news .column .content .itm .cover img{ position: absolute; width: 100%; height: 100%; object-fit: cover;}
section.row.news .column .content .itm .date{ border-radius: var(--rounded); background: var(--secondary); font-size: 0.875rem; line-height: 2; color: white; padding: 0 1em; margin-top: 1em;}
section.row.news .column .content .itm .info{ display: grid; grid-gap: 0.5em;}
section.row.news .column .content .itm .info h1{ font-size: 1.5rem; line-height: 1.25; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
section.row.news .column .content .itm .info p{ font-size: .875rem; display:-webkit-box; -webkit-line-clamp: 4; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden;}

section.row.news .column .more{ display: grid; justify-content: center; padding: 5vw 0; background: white;}
section.row.news .column .more a{ font-size: 0.875rem; line-height: 2; text-transform: uppercase; padding: 0 2em; border: 2px solid #000; border-radius: var(--rounded);}

.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; z-index: 999; display: flex; justify-content: center; align-items: center;}
.modal video { width: 80vw; height: 54vw;}
.modal.is-open { opacity: 1; visibility: visible;}
.modal .close-btn { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; cursor: pointer; z-index: 10;}

#map-nav { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; z-index: 999; display: flex; justify-content: center; align-items: center;}
#map-nav video { width: 80vw; height: 54vw;}
#map-nav.is-open { opacity: 1; visibility: visible;}
#map-nav .close-btn { position: absolute; top: 5vw; right: 5vw; display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; background: var(--primary); font-size: 2.5rem; font-weight: normal; color: white; cursor: pointer; z-index: 10;}
#map-nav .map-nav-con{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
#map-nav .map-nav-con .nav{ display: grid; grid-gap: 5vw;}
#map-nav .map-nav-con .nav a{ font-size: 1.25rem; color: white;}

/* sub */
.row.banner{ width: 100%; height: 48.75vw;}
.row.banner img{ display: block; width: 100%; height: 100%; object-fit: cover;}

.location{ display: flex; align-items: center; padding: 1em 0; border-bottom: 1px solid #f4f4f4; font-size: 0.875rem; line-height: 2;}
.location a{ color: var(--info);}
.location a::after{ content: '>'; margin: 0 .5em;}
.location span{ color: var(--text);}

.row.content .column{ display: grid; grid-gap: 5vw 6.25vw; padding: 3.75vw 6.25vw 6.25vw;}

.list-news{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 5vw 6.25vw;}
.list-news .itm{ display: grid; grid-gap: 1.5rem; justify-items: start;}
.list-news .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); overflow: hidden;}
.list-news .itm .cover img{ position: absolute; width: 100%; height: 100%; object-fit: cover;}
.list-news .itm .date{ border-radius: var(--rounded); background: var(--secondary); font-size: 0.875rem; line-height: 2; color: white; padding: 0 1em; margin-top: 1em;}
.list-news .itm .info{ display: grid; grid-gap: 0.5em;}
.list-news .itm .info h1{ font-size: 1.5rem; line-height: 1.25; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.list-news .itm .info p{ font-size: .875rem; display:-webkit-box; -webkit-line-clamp: 4; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden;}

.pagination{ display: grid; grid-auto-flow: column; justify-content: center; grid-gap: 1rem;}
.pagination span,
.pagination a{ display: flex; justify-content: center; align-items: center; width: 3.75rem; height: 3.75rem; border-radius: var(--rounded); background: #f2f2f2; font-size: 1.125rem; color: var(--text);}
.pagination .on{ background: var(--secondary); color: white;}
.pagination a:hover{ background: var(--secondary); color: white;}

.contact-grid{ display: flex; flex-wrap: wrap; gap: 4.5vw 0; justify-content: space-between;}
.contact-grid .itm{ display: grid; grid-auto-flow: column; justify-content: start; align-items: center; grid-gap: 0 1rem;}
.contact-grid .itm .ico{ grid-row: span 2;}
.contact-grid .itm .ico img{ height: 3rem;}
.contact-grid .itm .cap{ font-size: 0.875rem;}
.contact-grid .itm .con{ font-size: 1.125rem; font-weight: bold;}
.contact-grid .map{ grid-column: span 3; display: flex; align-items: center; justify-content: center; width: 100%;}
.contact-grid .map img{ width: 100%; height: 100%;}

.product-grid{ position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw;}
.product-grid:before{ content: ''; position: absolute; top: 0; left: 0; width: 72.5vw; height: 32.5vw; border-radius: 1vw; overflow: hidden; background: url('../img/product/bg.webp') no-repeat center center / cover;}
.product-grid .swiper{ grid-column: span 12; width: 100%;}

.product-grid .itm{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw;}
.product-grid .itm .cover{ grid-column: span 10; display: grid; grid-template-columns: repeat(10,1fr); grid-gap: 2.5vw; align-items: end; height: 32.5vw;}
.product-grid .itm .cover .thumb{ grid-column: 4/8; position: relative; width: 100%; height: 0; padding-bottom: 100%; }
.product-grid .itm .cover .thumb img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.product-grid .itm .info{ grid-column: span 2; display: grid; justify-items: center; align-content: space-between;}
.product-grid .itm .info .caption{ display: grid; justify-items: center;}
.product-grid .itm .info .caption .tit{ font-size: 1.5rem; font-weight: bold; color: var(--secondary);}
.product-grid .itm .info .caption .ml{ align-self: start; display: flex; justify-content: center; align-items: center; width: 14.375rem; height: 11.375rem; padding-bottom: 4.5rem; font-size: 2.25rem; color: var(--secondary); background: url('../img/ml.webp') no-repeat center center/cover;}
.product-grid .itm .info .link{ display: grid; grid-gap: 0.5rem;}
.product-grid .itm .info .link span{ position: relative; display: flex; justify-content: center; align-items: center; width: 8rem; height: 8rem; background: url('../img/product/o.webp') no-repeat center center / cover;}
.product-grid .itm .info .link span b{ position: absolute; top: 1rem; right: 100%; width: 6rem; height: 6rem; border-radius: 1rem; background: #000; opacity: 0; visibility: hidden}
.product-grid .itm .info .link span b.is-visible{ opacity: 1; visibility: visible;}
.product-grid .itm .info .link span b img{ width: 100%; height: 100%; object-fit: cover;}
.product-grid .itm .info .link b{ position: absolute;}

.product-grid .arrow{ grid-column: span 10; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; justify-content: space-between; align-items: center; margin: 2.5vw 0;}
.product-grid .arrow .prev,
.product-grid .arrow .next{ display: flex; align-items: center; gap: 2rem}
.product-grid .arrow .prev{ grid-column: span 3;}
.product-grid .arrow .next{ justify-content: end; grid-column: 8 / 11;}
.product-grid .arrow .prev i,
.product-grid .arrow .next i{ display: flex; justify-content: center; align-items: center; width: 6rem; height: 6rem; border-radius: var(--rounded); font-size: 2rem;}
.product-grid .arrow .prev i{ border: 3px solid var(--secondary); color: var(--secondary); cursor: pointer;}
.product-grid .arrow .next i{ background: linear-gradient(#d091f4,#602afd); box-shadow: 0 1vw 1.5625vw rgba(96, 42, 253, .16); color: white; cursor: pointer;}
.product-grid .arrow .prev span,
.product-grid .arrow .next span{ display: grid; font-size: 1.125rem; font-weight: bold;}
.product-grid .arrow .prev span::before{ content: '上一个'; font-size: 0.875rem; font-weight: normal; color: var(--info);}
.product-grid .arrow .next span::before{ content: '下一个'; font-size: 0.875rem; font-weight: normal; color: var(--info);}

.about-grid{ position: relative; display: grid; grid-gap: 2.5vw;}
.about-grid .content{ position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 4vw 2.5vw;}
.about-grid .content .cover{ grid-column: span 10; position: relative; width: 100%; height: 32.5vw; border-radius: 1vw; overflow: hidden;}
.about-grid .content .cover:before{ content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); z-index: 1;}
.about-grid .content .cover::after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 3rem; height: 3rem; margin: auto; background: url('../img/play.webp') no-repeat center center / cover; z-index: 2;}
.about-grid .content .cover img{ position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 0;}
.about-grid .content .number{ grid-column: span 2; display: grid; align-content: center; justify-content: center; grid-gap: 5vw;}
.about-grid .content .number .itm{ display: grid; justify-content: start; align-items: baseline;}
.about-grid .content .number .itm strong{ font-size: 4.5rem; line-height: 1;}
.about-grid .content .number .itm i{ font-size: 1.875rem; font-style: normal;}
.about-grid .content .number .itm span{ grid-column: span 2; font-size: 1.125rem; font-weight: bold;}
.about-grid .content .infor{ grid-column: span 10;}
.about-grid .content .infor h1{ font-size: 1.5rem;}
.about-grid .content .infor h5{ font-size: 1.125rem; font-weight: normal;}
.about-grid .content .other{ grid-column: span 12; display: flex; width: 100%; height: 32.5vw; border-radius: 1vw; background: #4f9be1;}
.about-grid .content .other .left{ width: 57.5%; padding: 2.5vw; border-radius: 1vw; background: url('../img/about/left.webp') no-repeat right center / cover;}
.about-grid .content .other .left h1{ padding: 2.5vw 0; font-size: 2rem; text-align: center;}
.about-grid .content .other .right{ width: 42.5%; padding: 5vw 4vw; background: url('../img/about/right.webp') no-repeat right center / auto 100%;}
.about-grid .content .other .right p{ margin-bottom: 1.5rem; font-size: 1.125rem; text-align: justify; color: white;}

.about-grid .swiper{ grid-column: span 12; width: 100%;}
.about-grid .swiper .swiper-slide{ width: 57.5vw; height: 32.5vw;}
.about-grid .swiper .swiper-slide .itm{ position: relative; width: 100%; height: 100%; border-radius: 1vw; overflow: hidden; background: #f4f4f4;}
.about-grid .swiper .swiper-slide .itm::after{ content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .4); opacity: 1; transition: .3s; z-index: 2;}
.about-grid .swiper .swiper-slide.swiper-slide-active .itm::after{ opacity: 0; }
.about-grid .swiper .swiper-slide .itm .thumb{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.about-grid .swiper .swiper-slide .itm .thumb img{ width: 100%; height: 100%; object-fit: cover;}
.about-grid .swiper .swiper-slide .itm .info{ position: absolute; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 5rem; font-size: 1.5rem; color: white; background: linear-gradient(rgba(79,155,225,0),rgba(79,155,225,.8));}

.about-grid .arrow.prev,
.about-grid .arrow.next{ position: absolute; top: calc(50% - 2.125rem); display: flex; align-items: center; justify-content: center; width: 4.25rem; height: 4.25rem; border-radius: var(--rounded); border: 3px solid white; font-size: 2rem; color: white; cursor: pointer; z-index: 9;}
.about-grid .arrow.prev{ left: 6.25vw;}
.about-grid .arrow.next{ right: 6.25vw;}

.resource-bg{background: url('../img/resource.webp') no-repeat center bottom / 100% auto;}
.resource-grid{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; padding-bottom: 55vw;}
.resource-grid .info{ grid-column: span 4;}
.resource-grid .info h1{ font-size: 3.75rem; line-height: 1;}
.resource-grid .info h3{ font-size: 1.5rem;}
.resource-grid .info .line{ width: 100%; height: 1px; margin: 1rem 0; background: #efefef;}
.resource-grid .info p{ font-size: 1rem; line-height: 2;}
.resource-grid .desc{ grid-column: 7 / 13;}
.resource-grid .desc h1{ font-size: 1.875rem;}
.resource-grid .desc p{ font-size: 1rem; line-height: 1.75; text-align: justify;}

.row.banner.banner_oth{ height: 6.5625vw;}
.article-grid{ display: grid; grid-gap: 2.5vw;}
.article-grid .article-title h1{ font-size: 1.875rem;}
.article-grid .article-title h5{ display: grid; grid-auto-flow: column; justify-content: start; grid-gap: 2em; font-size: 0.875rem; font-weight: normal;}
.article-grid .article-content{ overflow: hidden;}
.article-grid .article-content p{ font-size: 1.125rem; line-height: 1.75; min-height: 1.75em;}
.article-grid .article-content img{ max-width: 100%;}
.article-grid .article-line{ width: 100%; height: 1px; border-bottom: 1px solid var(--border);}
.article-grid .article-arrow{ display: flex; align-items: center; justify-content: space-between;}
.article-grid .article-arrow .prev,
.article-grid .article-arrow .next{ display: flex; align-items: center; gap: 2rem}
.article-grid .article-arrow .prev{ grid-column: span 3;}
.article-grid .article-arrow .next{ justify-content: end; grid-column: 8 / 11;}
.article-grid .article-arrow .prev i,
.article-grid .article-arrow .next i{ display: flex; justify-content: center; align-items: center; width: 5rem; height: 5rem; border-radius: var(--rounded); font-size: 2rem;}
.article-grid .article-arrow .prev i{ border: 3px solid var(--secondary); color: var(--secondary); cursor: pointer;}
.article-grid .article-arrow .next i{ background: linear-gradient(#d091f4,#602afd); box-shadow: 0 1vw 1.5625vw rgba(96, 42, 253, .16); color: white; cursor: pointer;}
.article-grid .article-arrow .prev span,
.article-grid .article-arrow .next span{ display: grid; font-size: 1.125rem; font-weight: bold;}
.article-grid .article-arrow .prev span::before{ content: '上一个'; font-size: 0.875rem; font-weight: normal; color: var(--info);}
.article-grid .article-arrow .next span::before{ content: '下一个'; font-size: 0.875rem; font-weight: normal; color: var(--info); text-align: right;}