@charset "utf-8";
html,
body{ overflow-x: hidden;}

html.fix{ height: 100%; overflow: hidden;}
html.fix .container,
html.fix footer{ filter: blur(5px)}

.ell{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.clamp{ display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden;}

.wrapper section:not(.slideshow){ position: relative; width: 100%; padding: 6.25vw; overflow: hidden;}

.video{ position: fixed; z-index: 7; left: 0; bottom: 5vw; cursor: pointer; transform: translateX(calc(-16vw - 3rem)); transition: .5s;}
.video .font{ position: absolute; top: 0; right: -3rem; display: flex; justify-content: center; align-items: center; width: 3rem; height: 100%; background: var(--primary); font-size: 1.125rem; line-height: 1.25; font-weight: bold; color: white;}
.video .ico{ position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; padding-left: 0.25rem; margin: auto; border-radius: var(--rounded); font-size: 1.5rem; line-height: 1; font-family: 'fal'; color: white; background: black; opacity: 0.8;}
.video .cover{ position: relative; z-index: 0; width: 16vw; height: 9vw; border: .5rem solid var(--primary);}
.video .cover img{ width: 100%; height: 100%; object-fit: cover;}

.video.vis{ transform: translateX(-16vw);}

.media{ width: 100%; height: 100%; margin: auto;}
.media video{ display: block; width: 100% !important; height: 100% !important;}

.menu{ position: fixed; z-index: 10; top: calc(50% - 2rem); right: 2.5vw; display: grid; grid-auto-flow: column; align-items: center; grid-gap: .5rem; height: 4rem; margin: auto; line-height: 1; color: white; cursor: pointer; transition: .5s;}
.menu span{ font-size: 1.5rem; font-family: 'fal';}
.menu span:first-child:after{ content: '\f0c9';}
.menu b{font-weight: 500;}
.menu b:last-child:after{ content: 'Menu';}

.menu.mini{ color: var(--primary); top: 1.25vw;}
.menu.open{ color: white}
.menu.open span:first-child:after{ content: '\f00d';}
.menu.open b:last-child:after{ content: 'Close';}

.logo{ display: flex; justify-content: center; align-items: center;}
.logo a{ display: grid; grid-auto-flow: column; align-items: center; grid-gap: 0.5rem;}
.logo a img{ width: auto; height: 4rem; transition: .5s;}
.logo a .caption{ position: relative;}
.logo a .caption:after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../img/logo-c-b.svg') left center no-repeat; background-size: auto 100%; opacity: 0; transition: .3s;}
.logo a .caption img{ opacity: 1; transition: .3s;}

header{ position: fixed; z-index: 9; top: 0; right: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 2.5vw; transition: .5s;}
header:after{ content: ''; position: absolute; z-index: -1; top: 0; right: 0; width: 100%; height: 100%; -webkit-user-select: none;}
header .quick{ display: grid; grid-auto-flow: column; align-items: center; grid-gap: 2rem; font-size: 1.5rem; font-weight: 300; font-family: 'fal'; color: white; transition: .3s;}

nav{ display: grid; grid-auto-flow: column; align-items: center; grid-gap: 2rem;}
nav a{ position: relative; font-size: 1rem; line-height: 3; font-weight: 700; color: white; transition: .3s;}
nav a:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: white; transition: .3s;}
nav a.act{ color: white;}
nav a.act:after{ width: 100%;}

header.mini{ padding: 1.25vw 2.5vw; background: white; box-shadow: 0 .5rem .5rem rgba(0, 0, 0, 0.03);}
header.mini .logo .caption img{ opacity: 0;}
header.mini .logo .caption:after{ opacity: 1;}
header.mini .quick{ color: var(--primary); margin-right: 7rem;}
header.mini nav a{ color: var(--info);}
header.mini nav a:after{ background: var(--primary);}
header.mini nav a.act{ color: var(--primary);}

header.open{ background: none!important;}
header.open .logo .caption img{ opacity: 1;}
header.open .logo .caption:after{ opacity: 0;}
header.open nav{ display: none;}
header.open .quick{ color: white;}

.inner{ position: relative; display: grid; grid-template-columns: repeat(12,1fr); align-items: start; grid-gap: 2.5vw;}
.inner .inner-title{ grid-column: span 2; display: grid; grid-gap: 1rem;}
.inner .inner-title .caption{ position: relative; display: grid; justify-items: start; grid-gap: 0.5rem; line-height: 1.5;}
.inner .inner-title .caption .en{ font-size: 1.25rem; font-weight: 500; white-space: nowrap; color: var(--desc); opacity: 0.5;}
.inner .inner-title .caption .cn{ font-size: 1.5rem; font-weight: 700; white-space: nowrap; color: transparent; background: linear-gradient(to right, var(--primary) 50%, var(--text) 50%); -webkit-background-clip: text;}
.inner .inner-title .strip{ width: 1.5rem; height: 2px; background: var(--primary);}
.inner .inner-title .slogan{ display: grid; grid-gap: 0.5rem; line-height: 1.5;}
.inner .inner-title .slogan .cn{ font-size: 1rem; line-height:2; font-weight: 700; color: var(--text); white-space: nowrap;}
.inner .inner-title .slogan .en{ font-size: .75rem; color: var(--desc); }
.inner .inner-title a.more{ position: relative; display: flex; justify-content: space-between; align-items: center; width: 10rem; height: 2.5rem; padding: 0 1rem; font-size: 0.87rem; line-height: 1.5; color: white;}
.inner .inner-title a.more:before,
.inner .inner-title a.more:after{ content: ''; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; background: var(--primary); transition: .3s;}
.inner .inner-title a.more:after{ width: 0; background: var(--text);}
.inner .inner-title a.more span{ position: relative; z-index: 1; transition: .3s;}
.inner .inner-title a.more span:last-child{ font-family: 'fal';}
.inner .inner-content{ grid-column: span 10; display: grid; grid-gap: 2.5vw;}

section.slideshow{ position: relative; width: 100vw; height: 100vh;}
section.slideshow:before,
section.slideshow:after{ content: '';}
section.slideshow .slogan-c{ position: absolute; z-index: 3; top: 35%; left: 6.25vw; display: grid; grid-gap: 2rem; color: white; cursor: pointer; text-shadow: .25rem .25rem .5rem rgba(0, 0, 0, 0.3);}
section.slideshow .slogan-c:after{ content: ''; position: absolute; z-index: 0; top: -2vw; right: -2vw; width: calc(100% + 8.25vw); height: calc(100% + 4vw); background: black; opacity: 0; transition: .3s .2s;}
section.slideshow .slogan-c .en{ position: relative; z-index: 1; display: flex; font-size: 0.75rem; line-height: 1.5; font-family: 'Roboto Mono'; letter-spacing: .1875em; overflow: hidden;}
section.slideshow .slogan-c .en span{ opacity: 0; transition: all .5s 1.25s;}
section.slideshow .slogan-c .strip{ position: relative; z-index: 1; width: 0; height: 1px; background: white; transition: all .3s 1.25s;}
section.slideshow .slogan-c .cn{ position: relative; z-index: 1; display: flex; font-size: 3rem; line-height: 1; font-weight: 700; overflow: hidden;}
section.slideshow .slogan-c .cn span{ transform: translateY(100%); transition: all .5s 1.25s;}
section.slideshow .slogan-c .details{ position: relative; z-index: 1; justify-self: start; display: flex; padding-top: 7rem; overflow: hidden;}
section.slideshow .slogan-c .details a{ display: grid; grid-auto-flow: column; align-items: center; justify-content: center; grid-gap: 1.5rem; width: 0; height: 2.75rem; border: 1px solid white; border-color: transparent; line-height: 1.5; color: white; white-space: nowrap; transition: all .5s 1.25s;}
section.slideshow .slogan-c .details a b{ font-weight: 400; font-size: 1rem;}
section.slideshow .slogan-c .details a span{ font-size: 0.75rem; font-family: 'fal';}
section.slideshow .slogan-e{ position: absolute; z-index: 3; right: 6.25vw; bottom: 25%;}
section.slideshow .slogan-e .en{ display: flex; text-align: right; font-size: 0.75rem; line-height: 2; font-style: italic; font-weight: 500; letter-spacing: .5em; text-transform: uppercase; color: white; overflow: hidden;}
section.slideshow .slogan-e .en span{ transform: translateY(100%); transition: all .5s 1.25s;}
section.slideshow .cover{ position: relative; z-index: 0; width: 100%; height: 100%; overflow: hidden;}
/* section.slideshow .cover:after{ content: ''; position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: 100%; background: black; opacity: 0.6; mix-blend-mode: overlay; -webkit-user-select: none; transition: .3s .2s;} */
section.slideshow .cover img{ position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 100%; transform: scale(1.25); transition: 5s;}

section.slideshow .swiper-slide-active .slogan-c .en span{ opacity: 1;}
section.slideshow .swiper-slide-active .slogan-c .strip{ width: 3.5rem;}
section.slideshow .swiper-slide-active .slogan-c .cn span{ transform: translateY(0);}
section.slideshow .swiper-slide-active .slogan-c .details a{ width: 11rem; border-color: white;}
section.slideshow .swiper-slide-active .slogan-e .en span{ transform: translateY(0);}

section.slideshow .swiper-slide-active .cover img{ transform: scale(1);}

section.slideshow .swiper-pagination{ position: absolute; z-index: 1; top: calc(35% + 13.25rem + 1px); bottom: auto; left: 6.25vw; display: flex; overflow: hidden;}
section.slideshow .swiper-pagination .pagination{ display: grid; grid-auto-flow: column; align-items: center; grid-gap: .5rem; width: auto; opacity: 0; transform: translateX(-100%); transition: all .3s;}
section.slideshow .swiper-pagination span{ position: relative; width: 1rem; height: 1rem; border: 2px solid white; background: none; opacity: 1; border-color: transparent;}
section.slideshow .swiper-pagination span:after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 0.5rem; height: 0.5rem; margin: auto; border-radius: var(--rounded); background: white;}
section.slideshow .swiper-pagination span.swiper-pagination-bullet-active{ border-color: white;}

section.slideshow .swiper-pagination.act .pagination{ opacity: 1; transform: translateX(0);}

section.slideshow .swiper-number{ position: absolute; z-index: 1; bottom: 2.5vw; left: 2.5vw; font-size: 1rem; line-height: 1.5; color: white;}
section.slideshow .swiper-number b{ font-weight: 400;}

section.slideshow .swiper-control{ position: absolute; z-index: 1; bottom: 2.5vw; left: 7vw; display: grid; grid-auto-flow: column; align-items: center; grid-gap: 1.5rem; font-size: .75rem; line-height: 2; text-transform: uppercase; color: white;}
section.slideshow .swiper-control span{ font-family: 'fal';}
section.slideshow .swiper-control b{ font-weight: 500;}
section.slideshow .swiper-control .strip{ width: 1px; height: 0.375rem; background: white; opacity: 0.3;}
section.slideshow .swiper-control .prev,
section.slideshow .swiper-control .next{ display: grid; grid-auto-flow: column; grid-gap: 1.5rem; cursor: pointer; opacity: 1; transition: .3s;}

section.slideshow:before,
section.slideshow:after,
section.slideshow .line{ position: absolute; z-index: 2; top: 0; right: 0; left: 0; width: 1px; height: 100%; margin: auto; background: white; opacity: .1;}
section.slideshow:before{ right: auto; left: 25vw;}
section.slideshow:after{ right: 25vw; left: auto;}

section.slideshow .scroll{ position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; display: grid; grid-gap: 1.5rem; justify-items: center; width: 1.5rem; margin: auto; cursor: pointer;}
section.slideshow .scroll span{ font-size: 0.75rem; line-height: 2; text-transform: uppercase; color: white; writing-mode: vertical-rl;}
section.slideshow .scroll i{ position: relative; width: 1px; height: 6rem; background: white; overflow: hidden; transition: .5s;}
section.slideshow .scroll i:after{ content: ''; position: absolute; top: -2rem; right: 0; left: 0; width: 1px; height: 2rem; background: var(--primary); animation: up 1.5s linear infinite;}
@keyframes up{ from { top: -2rem; } to { top: 100%; } }

section.slideshow .design{ position: absolute; z-index: 1; right: 2.5vw; bottom: 2.5vw; font-size: 0.75rem; line-height: 2; font-style: italic; text-transform: uppercase; color: white;}
section.slideshow .design:before{ content: '';}

section.news{ background: var(--gray);}
section.news .inner-content{ width: 100%; overflow: hidden;}
section.news .inner-content .swiper{ width: 100%;}
section.news .inner-content .swiper .swiper-slide{ display: grid; grid-gap: 2.5vw; width: 25vw; padding-right: 2.5vw;}
section.news .inner-content a{ position: relative; display: grid; grid-auto-flow: column; justify-content: start; align-items: center; grid-gap: 1.5rem; width: 100%; height: 100%; padding: 1.5rem; background: white; overflow: hidden;}
section.news .inner-content a:after{ content: ''; position: absolute; z-index: 0; bottom: 0; left: 0; width: 100%; height: 0; background: var(--primary); transition: .3s;}
section.news .inner-content a .date{ position: relative; z-index: 1; display: grid; align-items: center; line-height: 1.5; text-align: center; padding: 2px 4px 4px; border-radius: 4px; background: var(--gray);}
section.news .inner-content a .date .dot{ display: flex; justify-content: space-around; padding-bottom: 2px;}
section.news .inner-content a .date .dot i{ position: relative; width: 6px; height: 6px; border-radius: 3px; background: white; transition: .3s;}
section.news .inner-content a .date .dot i:after{ content: ''; position: absolute; bottom: 3px; left: 1px; width: 4px; height: 10px; border-radius: 2px; background: var(--primary); transition: .3s;}
section.news .inner-content a .date span{ font-size: 0.75rem; font-weight: 500; color: white; border-radius: 4px 4px 0 0; background: var(--primary); transition: .3s;}
section.news .inner-content a .date b{ font-size: .875rem; font-weight: 500; color: var(--primary); padding: 0 4px; border-radius: 0 0 4px 4px; background: white; transition: .3s;}
section.news .inner-content a .strip{ position: relative; z-index: 1; width: 1px; height: 2rem; background: var(--border); transition: .3s;}
section.news .inner-content a .info{ position: relative; z-index: 1; display: grid; grid-gap: 1rem; line-height: 1.5; overflow: hidden;}
section.news .inner-content a .info .tit{ font-size: 1rem; font-weight: 500; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: var(--text); transition: .3s;}
section.news .inner-content a .info .more{ justify-self: start; display: grid; grid-auto-flow: column; align-items: center; grid-gap: 2em;; font-size: 0.875rem; color: var(--desc); transition: .3s;}
section.news .inner-control{ grid-column: span 2; position: absolute; z-index: 1; bottom: 0; display: flex;}
section.news .inner-control div{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; font-size: 1rem; font-weight: 300; font-family: 'fal'; color: white; background: var(--primary); cursor: pointer; transition: .3s;}
section.news .inner-control div.prev{ opacity: 0.5;}

section.about{ background: url('../img/about-bg.webp') right bottom no-repeat;}
section.about .inner{ grid-template-columns: repeat(12,1fr); justify-items: start;}
section.about .inner .cover{ grid-column: 8 / 13; grid-row: 1 / 5; position: relative; width: 100%; height: 100%;}
section.about .inner .cover:before{ content: ''; position: absolute; z-index: 0; bottom: 0; right: -2.5vw; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); background: white; box-shadow: 0 .5rem .5rem rgba(0, 0, 0, 0.03);}
section.about .inner .cover:after{ content: 'Be Responsible Municipal Administration Build Happy Enterprise'; position: absolute; z-index: 1; bottom: 0; right: 0; font-size: 0.75rem; line-height: 3rem; font-style: italic; color: var(--desc);}
section.about .inner .cover .swiper{ position: absolute; z-index: 1; bottom: 3rem; left: 0; width: 100%;}
section.about .inner .cover .thumb{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9);}
section.about .inner .cover .thumb img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
section.about .inner .cover .control{ position: absolute; z-index: 2; bottom: 0; left: 0; display: flex;}
section.about .inner .cover .control div{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; font-size: 1rem; font-weight: 300; font-family: 'fal'; color: white; background: var(--primary); cursor: pointer; transition: .3s;}
section.about .inner .cover .control div.prev{ opacity: 0.5;}
section.about .inner .logo{ grid-column: span 7;}
section.about .inner .info{ grid-column: span 7; font-size: 1rem; line-height: 2;}
section.about .inner .info p{ display: none;}
section.about .inner .info p:nth-of-type(1),
section.about .inner .info p:nth-of-type(2){ display: block;}
section.about .inner .info p:nth-of-type(2){ padding-top: 2rem;}
section.about .inner .more{ grid-column: span 7; position: relative; display: grid; grid-auto-flow: column; grid-gap: 2em; font-size: 1rem; line-height: 2; color: var(--primary);}
section.about .inner .more:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--primary); transition: .3s;}
section.about .inner .more span{ transition: .3s;}
section.about .inner .cate{ grid-column: span 7; display: grid; grid-template-columns: repeat(4,1fr); width: 100%; background: white; box-shadow: 0 .5rem .5rem rgba(0, 0, 0, 0.03);}
section.about .inner .cate a{ position: relative; display: grid; align-items: center; grid-gap: 0 1rem; padding: 2rem 0; line-height: 1.5;}
section.about .inner .cate a:after{ content: ''; position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 100%; background: var(--primary); transition: .3s;}
section.about .inner .cate a .ico{ position: relative; z-index: 1; grid-row: 1 / 3; justify-self: end; font-size: 2rem; line-height: 1; font-weight: 300; color: var(--primary); transition: .3s;}
section.about .inner .cate a .cn{ position: relative; z-index: 1; grid-column: 2 / 3; font-size: 1rem; font-weight: 500; color: var(--text); transition: .3s;}
section.about .inner .cate a .en{ position: relative; z-index: 1; grid-column: 2 / 3; font-size: 0.75rem; color: var(--desc); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; transition: .3s;}

section.field{ background: url('../img/field-bg.webp') center center no-repeat; background-size: cover;}
section.field .inner-content{ grid-template-columns: repeat(6,1fr);}
section.field .inner-content a{ position: relative; display: grid; width: 100%; height: 0; padding-bottom: 200%;}
section.field .inner-content a .info{ position: absolute; z-index: 1; top: 0; right: 0; display: flex; flex-flow: column nowrap; gap: 0.5rem; width: 100%; height: 100%; padding: 1.875rem; color: white;}
section.field .inner-content a .info:before{ content: 'View More'; position: absolute; z-index: 0; top: 50%; right: 50%; margin: auto; transform: translate(50%,-50%); font-size: 1rem; line-height: 1.5; text-decoration: underline; opacity: 0; transition: .3s;}
section.field .inner-content a .info:after{ content: ''; position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; background: linear-gradient( rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%); transition: .3s;}
section.field .inner-content a .info .cn{ position: relative; z-index: 1; font-size: 1.25rem; line-height: 1.5; white-space: nowrap;}
section.field .inner-content a .info .num{ position: relative; z-index: 1; font-size: 1.25rem; line-height: 1.5; opacity: 1; transition: .3s;}
section.field .inner-content a .info .ico{ position: absolute; z-index: 1; bottom: 1.875rem; left: 1.875rem; font-size: 2rem; line-height: 1; font-weight: 300; opacity: 1; transition: .3s;}
section.field .inner-content a .info .en{ position: absolute; z-index: 1; right: 1.875rem; bottom: 1.875rem; font-size: 0.75rem; line-height: 2; writing-mode: vertical-rl; opacity: 1; transition: .3s;}
section.field .inner-content a .cover{ position: absolute; z-index: 0; top: 0; right: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
section.field .inner-content a .cover img{ width: 100%; height: 100%; object-fit: cover; transition: .3s;}

section.engineering .inner-title{ grid-column: 11 / 13; position: absolute; z-index: 1; justify-self: end; justify-items: end; text-align: right;}
section.engineering .inner-title .caption{ justify-items: end;}
section.engineering .inner-content{ grid-column: span 12; position: relative; z-index: 0; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw;}
section.engineering .inner-content .swiper-cover{ grid-column: span 10; overflow: hidden;}
section.engineering .inner-content .swiper-cover .swiper-slide{ width: calc(100% + 2.5vw); padding-right: 2.5vw;}
section.engineering .inner-content .swiper-cover .itm{ display: grid; grid-template-columns: repeat(10,1fr); grid-gap: 2.5vw; align-items: start; background: white;}
section.engineering .inner-content .swiper-cover .itm .cover{ grid-column: span 7; position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); overflow: hidden;}
section.engineering .inner-content .swiper-cover .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; transition: .3s;}
section.engineering .inner-content .swiper-cover .itm .info{ grid-column: span 3; display: grid; grid-gap: 1rem; padding: 6rem 0;}
section.engineering .inner-content .swiper-cover .itm .info .ico{ font-size: 2rem; line-height: 1; font-weight: 300; font-family: 'fal'; color: var(--primary);}
section.engineering .inner-content .swiper-cover .itm .info .tit{ position: relative; font-size: 1.25rem; font-weight: 700; color: var(--text);}
section.engineering .inner-content .swiper-cover .itm .info .tit:before{ content: ''; position: absolute; top: 0; left: -2.5vw; bottom: 0; width: 2vw; height: 1px; margin: auto; background: var(--primary);}
section.engineering .inner-content .swiper-cover .itm .info .strip{ width: 1.25rem; height: 2px; background: var(--primary);}
section.engineering .inner-content .swiper-cover .itm .info .cate{ font-size: 0.875rem; color: var(--desc);}
section.engineering .inner-content .swiper-cover .itm .info .more{ position: relative; display: flex; justify-content: space-between; align-items: center; width: 10rem; height: 2.5rem; padding: 0 1rem; margin-top: 2rem; font-size: 0.87rem; line-height: 1.5; color: white;}
section.engineering .inner-content .swiper-cover .itm .info .more:before,
section.engineering .inner-content .swiper-cover .itm .info .more:after{ content: ''; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; background: var(--primary); transition: .3s;}
section.engineering .inner-content .swiper-cover .itm .info .more:after{ width: 0; background: var(--text);}
section.engineering .inner-content .swiper-cover .itm .info .more span{ position: relative; z-index: 1; transition: .3s;}
section.engineering .inner-content .swiper-cover .itm .info .more span:last-child{ font-family: 'fal';}
section.engineering .inner-content .swiper-thumb{ grid-column: 8 / 13; position: absolute; z-index: 0; bottom: 2.5vw; width: calc(100% + 6.25vw); margin-right: -6.25vw; overflow: hidden;}
section.engineering .inner-content .swiper-thumb .swiper-slide{ width: calc(10rem + 1.25vw); padding-right: 1.25vw;}
section.engineering .inner-content .swiper-thumb .itm{ display: grid;}
section.engineering .inner-content .swiper-thumb .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); overflow: hidden;}
section.engineering .inner-content .swiper-thumb .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; transition: .3s;}
section.engineering .inner-content .swiper-pagination{ grid-column: 11 / 13; position: absolute; z-index: 0; right: 0; bottom: calc(10rem / 16 * 9 + 10vw ); font-size: 1.5rem; line-height: 1; font-weight: 500; text-align: right; color: var(--primary);}
section.engineering .inner-content .swiper-pagination .swiper-pagination-total{ color: var(--text);}
section.engineering .inner-content .swiper-control{ grid-column: 11 / 13; position: absolute; z-index: 2; right: 0; bottom: calc(10rem / 16 * 9 + 5vw); display: flex;}
section.engineering .inner-content .swiper-control div{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; font-size: 1rem; font-weight: 300; font-family: 'fal'; color: white; background: var(--primary); cursor: pointer; transition: .3s;}
section.engineering .inner-content .swiper-control div.prev{ opacity: 0.5;}

section.number-ad{ display: grid; grid-template-columns: repeat(12,1fr); align-items: center; grid-gap: 2.5vw; background: url('../img/number-bg.webp') center center no-repeat; background-size: cover;}
section.number-ad .slogan{ grid-column: span 4; display: grid; grid-gap: 1rem; line-height: 1.5;}
section.number-ad .slogan .cn{ font-size: 1.5rem; font-weight: 700; color: var(--primary);}
section.number-ad .slogan .strip{ width: 1.5rem; height: 2px; background: var(--primary);}
section.number-ad .slogan .en{ font-size: 0.75rem; color: var(--desc);}
section.number-ad .slogan a.more{ position: relative; display: flex; justify-content: space-between; align-items: center; width: 10rem; height: 2.5rem; padding: 0 1rem; margin-top: 2rem; font-size: 0.87rem; line-height: 1.5; color: white;}
section.number-ad .slogan a.more:before,
section.number-ad .slogan a.more:after{ content: ''; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; background: var(--primary); transition: .3s;}
section.number-ad .slogan a.more:after{ width: 0; background: var(--text);}
section.number-ad .slogan a.more span{ position: relative; z-index: 1; transition: .3s;}
section.number-ad .slogan a.more span:last-child{ font-family: 'fal';}
section.number-ad .num{ grid-column: span 8; display: flex; justify-content: space-between; align-items: center;}
section.number-ad .num .itm{ display: grid; align-items: center; grid-gap: .5rem;}
section.number-ad .num .itm span{ grid-column: 1 / 3; font-size: 1rem; line-height: 1.5; font-weight: 500;}
section.number-ad .num .itm em{ grid-column: 1 / 3; width: 1rem; height: 2px; background: var(--primary);}
section.number-ad .num .itm b{ font-size: 2.5rem; line-height: 1; font-weight: 400; color: var(--primary);}
section.number-ad .num .itm i{ font-size: .875rem; line-height: 1; font-style: normal; color: var(--desc);}

section.party{ background: url('../img/party-bg.webp') left bottom no-repeat;}
section.party .inner-title .caption{ position: relative; display: grid; justify-items: start;}
section.party .inner-title .caption .cn{ position: relative; background: linear-gradient(to right, var(--secondary) 50%, var(--text) 50%); -webkit-background-clip: text;}
section.party .inner-title .caption .cn:before{ content: ''; position: absolute; top: 0; bottom: 0; left: -2rem; width: 1.5rem; height: 1.5rem; margin: auto; background: url('../img/party-i.webp') center center no-repeat; background-size: cover;}
section.party .inner-title .slogan .cn .swiper{ width: 100%; height: 1.5rem;}
section.party .inner-title .slogan .cn .swiper .swiper-slide{ height: 1.5rem; cursor: default;}
section.party .inner-title .strip{ background: var(--secondary);}
section.party .inner-content{ grid-template-columns: repeat(10,1fr);}
section.party .inner-content .graphic{ grid-column: span 7; position: relative; width: 100%; overflow: hidden;}
section.party .inner-content .graphic a{ display: grid; grid-template-columns: repeat(7,1fr); grid-gap: 2.5vw; align-items: start; background: var(--gray);}
section.party .inner-content .graphic a .cover{ grid-column: span 5; position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); overflow: hidden;}
section.party .inner-content .graphic a .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
section.party .inner-content .graphic a .info{ grid-column: span 2; display: grid; grid-gap: 1rem; justify-items: start; width: calc(100% + 2.5vw); margin-left: -2.5vw; padding: 2rem;}
section.party .inner-content .graphic a .info .date{ position: relative; z-index: 1; display: grid; align-items: center; line-height: 1.5; text-align: center; padding: 2px 4px 4px; border-radius: 4px; background: white;}
section.party .inner-content .graphic a .info .date .dot{ display: flex; justify-content: space-around; padding-bottom: 2px;}
section.party .inner-content .graphic a .info .date .dot i{ position: relative; width: 6px; height: 6px; border-radius: 3px; background: white; transition: .3s;}
section.party .inner-content .graphic a .info .date .dot i:after{ content: ''; position: absolute; bottom: 3px; left: 1px; width: 4px; height: 10px; border-radius: 2px; background: var(--secondary); transition: .3s;}
section.party .inner-content .graphic a .info .date span{ font-size: .75rem; font-weight: 500; color: white; border-radius: 4px 4px 0 0; background: var(--secondary); transition: .3s;}
section.party .inner-content .graphic a .info .date b{ font-size: .875rem; font-weight: 500; color: var(--secondary); padding: 0 4px; border-radius: 0 0 4px 4px; background: var(--gray); transition: .3s;}
section.party .inner-content .graphic a .info .tit{ font-size: 1rem; line-height: 1.5; font-weight: 500; color: var(--text); display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden;}
section.party .inner-content .graphic a .info .desc{ font-size: 0.875rem; line-height: 2; color: var(--desc); display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden;}
section.party .inner-content .graphic a .info .more{ position: relative; justify-self: start; display: grid; grid-auto-flow: column; align-items: center; grid-gap: 2em; margin-top: 1rem; font-size: 0.875rem; color: var(--desc);}
section.party .inner-content .graphic a .info .more:after{ content: ''; position: absolute; bottom: -.5rem; left: 0; width: 0; height: 1px; background: var(--secondary); transition: .3s;}
section.party .inner-content .graphic a .info .more span{ transition: .3s;}
section.party .inner-content .graphic .swiper-pagination{ position: absolute; z-index: 1; bottom: 2.5rem; left: calc(35vw + 2rem); display: grid; grid-auto-flow: column; grid-gap: .5rem; width: auto;}
section.party .inner-content .graphic .swiper-pagination span{ width: 0.5rem; height: 0.5rem; border-radius: 0; margin: 0; background: var(--border); opacity: 1;}
section.party .inner-content .graphic .swiper-pagination span.swiper-pagination-bullet-active{ background: var(--secondary);}
section.party .inner-content .graphic .swiper-control{ position: absolute; z-index: 1; right: 0; bottom: 0; display: flex;}
section.party .inner-content .graphic .swiper-control div{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; font-size: 1rem; font-weight: 300; font-family: 'fal'; color: white; background: var(--secondary); cursor: pointer;}
section.party .inner-content .graphic .swiper-control div.prev{ opacity: 0.5;}

section.party .inner-content .list{ grid-column: span 3; display: grid; grid-gap: 1.25vw;}
section.party .inner-content .list a{ position: relative; display: grid; grid-auto-flow: column; justify-content: start; align-items: center; grid-gap: 1.5rem; width: 100%; padding: 0 1.5rem; background: var(--gray); overflow: hidden;}
section.party .inner-content .list a:after{ content: ''; position: absolute; z-index: 0; bottom: 0; left: 0; width: 100%; height: 0; background: var(--secondary); transition: .3s;}
section.party .inner-content .list a .date{ position: relative; z-index: 1; display: grid; align-items: center; line-height: 1.5; text-align: center; padding: 2px 4px 4px; border-radius: 4px; background: white;}
section.party .inner-content .list a .date .dot{ display: flex; justify-content: space-around; padding-bottom: 2px;}
section.party .inner-content .list a .date .dot i{ position: relative; width: 6px; height: 6px; border-radius: 3px; background: white; transition: .3s;}
section.party .inner-content .list a .date .dot i:after{ content: ''; position: absolute; bottom: 3px; left: 1px; width: 4px; height: 10px; border-radius: 2px; background: var(--secondary); transition: .3s;}
section.party .inner-content .list a .date span{ font-size: .75rem; font-weight: 500; color: white; border-radius: 4px 4px 0 0; background: var(--secondary); transition: .3s;}
section.party .inner-content .list a .date b{ font-size: .875rem; font-weight: 500; color: var(--secondary); padding: 0 4px; border-radius: 0 0 4px 4px; background: var(--gray); transition: .3s;}
section.party .inner-content .list a .strip{ position: relative; z-index: 1; width: 1px; height: 2rem; background: var(--border); transition: .3s;}
section.party .inner-content .list a .info{ position: relative; z-index: 1; display: grid; grid-gap: 1rem; line-height: 1.5; overflow: hidden;}
section.party .inner-content .list a .info .tit{ font-size: 1rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: var(--text); transition: .3s;}
section.party .inner-content .list a .info .more{ justify-self: start; display: grid; grid-auto-flow: column; align-items: center; grid-gap: 2em; font-size: 0.875rem; color: var(--desc); transition: .3s;}

section.party .inner-control{ grid-column: span 2; position: absolute; z-index: 1; bottom: 0; display: flex;}
section.party .inner-control div{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; font-size: 1rem; font-weight: 300; font-family: 'fal'; color: white; background: var(--secondary); cursor: pointer; transition: .3s;}
section.party .inner-control div.prev{ opacity: 0.5;}

footer{ display: grid; grid-gap: 4rem; padding: 4rem 6.25vw; background: url('../img/footer.webp') right 6.25vw center no-repeat #0A224D;}
footer .strip{ width: 100%; height: 1px; background: white; opacity: 0.05;}
footer .service{ display: flex; justify-content: space-between; align-items: center;}
footer .service .logo a img{ height: 3rem;}
footer .service .adv{ display: grid; grid-auto-flow: column; grid-gap: 4rem;}
footer .service .adv .itm{ display: grid; align-items: center; grid-gap: 0 1rem;}
footer .service .adv .itm .ico{ grid-row: span 2; font-size: 2.5rem; font-weight: 300; line-height: 1; color: var(--secondary);}
footer .service .adv .itm .cn{ grid-column: 2 / 3; font-size: 1rem; font-weight: 500; color: white; white-space: nowrap;}
footer .service .adv .itm .en{ grid-column: 2 / 3; font-size: 0.875rem; color: var(--desc); white-space: nowrap;}
footer .content{ display: flex; justify-content: space-between; align-items: flex-start;}
footer .content .title{ display: grid; grid-gap: 1rem;}
footer .content .title .caption{ position: relative; display: grid; justify-items: start; grid-gap: 0.5rem; line-height: 1.5;}
footer .content .title .caption .en{ font-size: 1.25rem; font-weight: 500; white-space: nowrap; color: var(--desc); opacity: 0.5;}
footer .content .title .caption .cn{ font-size: 1.5rem; font-weight: 700; white-space: nowrap; color: transparent; background: linear-gradient(to right, var(--primary) 50%, white 50%); -webkit-background-clip: text;}
footer .content .title .strip{ width: 1.5rem; height: 2px; background: white; opacity: 1;}
footer .content .title .quick{ display: grid; grid-auto-flow: column; grid-gap: 1.5rem; padding-top: 2rem;}
footer .content .title .quick a{ font-size: 1.5rem; line-height: 1; font-weight: 300; color: white;}
footer .content .sitemap{ display: grid; grid-auto-flow: column; align-items: start; grid-gap: 4rem;}
footer .content .sitemap .itm{ display: grid; grid-gap: .5rem; line-height: 2;}
footer .content .sitemap .itm b a{ font-size: 1rem; color: white;}
footer .content .sitemap .itm i{ width: 1rem; height: 2px; background: var(--primary);}
footer .content .sitemap .itm span{ display: grid;}
footer .content .sitemap .itm span a{ font-size: 0.875rem; color: var(--desc);}
footer .content .contact{ display: grid; grid-gap: 1rem;}
footer .content .contact .ico{ font-size: 1.5rem; line-height: 1; font-weight: 300; font-family: 'fal'; color: var(--primary);}
footer .content .contact .tit{ line-height: 1.5;}
footer .content .contact .tit .cn{ font-size: 1rem; font-weight: 500; color: white;}
footer .content .contact .tit .en{ font-size: 0.75rem; color: var(--desc);}
footer .content .contact .con{ color: white;}
footer .content .contact .con b{ font-size: 1.5rem; line-height: 1;}
footer .content .contact .con span{ font-size: 1rem; line-height: 1.5;}
footer .content .qrcode{ display: grid; grid-gap: .5rem; justify-items: center; text-align: center; font-size: 0.75rem; line-height: 1.5; font-weight: 500; color: white;}
footer .cpy{ display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; line-height: 1.5; color: white;}
footer .cpy:after{ content: '百航科技 - 专业网络品牌设计';}
footer .cpy a{ color: white;}

.menubox{ position: fixed; top: 0; right: 0; z-index: 8; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background: rgba(10,34,77,.95); transform: scale(1.1); opacity: 0; visibility: hidden; transition: .5s;}
.menubox .grid{ display: grid; grid-auto-flow: column; grid-gap: 5vw; width: 100%; padding: 0 6.25vw;}
.menubox .grid .navigation{ position: relative; display: grid; grid-gap: 2rem;}
.menubox .grid .navigation ul{ display: grid; grid-gap: 1rem; justify-items: start;}
.menubox .grid .navigation ul li{ position: relative; display: flex; flex-flow: column nowrap; line-height: 1.5;}
.menubox .grid .navigation ul li:before{ content: attr(data-num); position: absolute; left: -1.5rem; font-size: .75rem; font-weight: 500; line-height: 1.5rem; font-style: italic; color: var(--primary);}
.menubox .grid .navigation ul li>a{ font-size: 1rem; color: white; white-space: nowrap;}
.menubox .grid .navigation ul li .sub{ display: grid; grid-auto-flow: column; grid-gap: 2rem; padding-top: 0.5rem;}
.menubox .grid .navigation ul li .sub a{ font-size: .875rem; line-height: 1.5; color: var(--desc); white-space: nowrap;}
.menubox .grid .contact{ align-self: start; display: grid; grid-gap: 2vw;}
.menubox .grid .contact .itm{ display: grid; line-height: 1.5;}
.menubox .grid .contact .itm .cn{ font-size: 1rem; color: var(--primary);}
.menubox .grid .contact .itm .en{ font-size: .75rem; font-style: normal; color: white; opacity: 0.5;}
.menubox .grid .contact .itm .con{ padding-top: 1rem; font-size: 1rem; color: white; white-space: nowrap;}
.menubox .grid .contact .itm .con b{ font-size: 1.25rem;}
.menubox .grid .contact .itm .con span{ font-size: 1rem;}
.menubox .grid .copyright{ align-self: end; text-align: right; font-size: .75rem; line-height: 1.5; color: white;}

.menubox.open{ transform: scale(1); opacity: 1; visibility: visible;}

/* sub */
.sub .banner{ position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 30vw; padding: 0 6.25vw;}
.sub .banner img{ position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.sub .banner .catename{ position: relative; z-index: 1; display: grid; grid-gap: 1rem; font-weight: 500; line-height: 1.5; text-transform: uppercase; color: white;}
.sub .banner .catename .en{ font-size: 1.25rem;}
.sub .banner .catename .strip{ width: 2rem; height: 2px; background: white;}
.sub .banner .catename .cn{ font-size: 2.5rem;}
.sub .banner .slogan{ position: relative; z-index: 1; font-size: 2rem; line-height: 1.5; font-weight: 500; color: white;}

.sub .purity{ width: 100%; height: calc(4rem + 5vw); background: #0A224D;}

.sub .category{ display: flex; justify-content: center; align-items: center; width: 100%; padding: 1.75rem 6.25vw; background: white; box-shadow: 0 .5rem .5rem rgba(0, 0, 0, 0.03); font-size: 1.125rem;}
.sub .category a{ position: relative; line-height: 2; font-weight: 500; color: var(--text); margin: 0 2em;}
.sub .category a:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--primary);}
.sub .category a.act{ color: var(--primary);}
.sub .category a.act:after{ width: 100%;}

.sub .pagenumber{ position: relative; display: grid; grid-auto-flow: column; justify-content: center; grid-gap: 1.5rem; width: 100%;}
.sub .pagenumber span,
.sub .pagenumber a{ justify-self: center; display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; font-size: 1rem; line-height: 1; color: var(--text); background: var(--gray); cursor: pointer;}
.sub .pagenumber span:not(.prev):not(.next){ color: white; background: var(--primary);}
.sub .pagenumber .prev,
.sub .pagenumber .next{ position: absolute; width: 6rem; font-family: 'fal'; font-weight: 300;}
.sub .pagenumber .prev{ left: 0;}
.sub .pagenumber .next{ right: 0;}
.sub .pagenumber span.prev,
.sub .pagenumber span.next{ color: var(--desc);}

.sub .column{ display: grid; align-items: start; width: 100%;}

.sub a.more{ position: relative; display: flex; justify-content: space-between; align-items: center; width: 10rem; height: 2.5rem; padding: 0 1rem; font-size: 0.87rem; line-height: 1.5; color: white;}
.sub a.more:before,
.sub a.more:after{ content: ''; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; background: var(--primary); transition: .3s;}
.sub a.more:after{ width: 0; background: var(--text);}
.sub a.more span{ position: relative; z-index: 1; transition: .3s;}
.sub a.more span:last-child{ font-family: 'fal';}

.sub .title{ display: flex; justify-content: space-between; align-items: center;}
.sub .title .caption{ display: grid; grid-gap: 0.5rem; line-height: 1;}
.sub .title .caption .en{ font-size: 1rem; color: var(--desc);}
.sub .title .caption .cn{ font-size: 1.5rem; font-weight: 500; color: var(--text);}
.sub .title .caption .strip{ width: 1.5rem; height: 2px; margin-top: 0.5rem; background: var(--primary);}

.sub .about-col{ display: grid; grid-gap: 2.5vw; padding: 5vw 6.25vw;}
.sub .about-video{ position: relative; display: grid; justify-content: center; align-content: center; justify-items: center; grid-gap: 0.5rem; height: 20vw; overflow: hidden; cursor: pointer;}
.sub .about-video:after{ content: ''; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: black; opacity: 0.4; transition: .5s;}
.sub .about-video .ico{ position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; width: 5rem; height: 5rem; padding-left: 0.5rem; border-radius: var(--rounded); font-size: 2.5rem; line-height: 1; font-family: 'fal'; color: white; background: black; opacity: 0.8; transition: .5s;}
.sub .about-video .cover{ position: absolute; z-index: 0; width: 100%; height: 100%;}
.sub .about-video .cover img{ width: 100%; height: 100%; object-fit: cover;}

.sub .about-intro .content{ position: relative;}
.sub .about-intro .content:after{ content: ''; position: absolute; top: 0; right: 37.5vw; display: block; width: 6rem; height: 6rem; background: url('../img/logo-i.svg') center center no-repeat; background-size: 100%;}
.sub .about-intro .content p:not(:last-child){ margin-bottom: 1.5rem; font-size: 1rem; line-height: 2; text-align: justify;}
.sub .about-intro .content .cover{ float: right; width: 35vw; height: 19.6875vw; margin-left: 2.5vw;}

.sub .about-number{ grid-template-columns: repeat(12,1fr); background: var(--gray);}
.sub .about-number .title{ grid-column: span 2;}
.sub .about-number .content{ grid-column: span 10; display: flex; justify-content: space-between; align-items: center;}
.sub .about-number .content .itm{ display: grid; align-items: center; grid-gap: .5rem;}
.sub .about-number .content .itm span{ grid-column: 1 / 3; font-size: 1rem; line-height: 1.5; font-weight: 500;}
.sub .about-number .content .itm em{ grid-column: 1 / 3; width: 1rem; height: 2px; background: var(--primary);}
.sub .about-number .content .itm b{ font-size: 2.5rem; line-height: 1; font-weight: 400; color: var(--primary);}
.sub .about-number .content .itm i{ font-size: .875rem; line-height: 1; font-style: normal; color: var(--desc);}

.sub .about-leader{ grid-template-columns: repeat(12,1fr);}
.sub .about-leader .title{ grid-column: span 5;}
.sub .about-leader .cover{ grid-column: span 5; grid-row: 2 / 3; position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); overflow: hidden;}
.sub .about-leader .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.sub .about-leader .content{ grid-column: span 7; grid-row: 1 / 3;}
.sub .about-leader .content p:not(:first-child){ margin-top: 1.5rem; font-size: 1rem; line-height: 2;}
.sub .about-leader .content p:first-child{ font-size: 1.5rem; font-weight: 700;}

.sub .about-culture{ background: var(--gray);}
.sub .about-culture .content{ display: grid; grid-template-columns: repeat(4,1fr); background: url('../img/about-c.webp') center center no-repeat; background-size: cover;}
.sub .about-culture .content .blank{ width: 100%; height: 0; padding-bottom: calc(100% / 2);}
.sub .about-culture .content .blank-b{ width: 100%; height: 0; padding-bottom: calc(100% / 3 * 2);}
.sub .about-culture .content .itm{ display: grid; justify-items: center; align-content: center; grid-gap: 0.5rem; background: rgba(42,109,228,.5); line-height: 1.5; text-align: center; color: white; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); cursor: default;}
.sub .about-culture .content .itm .cap{ font-size: 1.5rem;}
.sub .about-culture .content .itm .strip{ width: 1.25rem; height: 2px; background: white; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);}
.sub .about-culture .content .itm .con{ font-size: 1.125em;}

.sub .about-org .content img{ width: 100%;}

.sub .engineering-col{ display: grid; grid-gap: 5vw 2.5vw; padding: 5vw 6.25vw;}
.sub .engineering-col .row{ display: grid; grid-gap: 2.5vw;}
.sub .engineering-col .row .title{ display: grid; grid-template-columns: auto 1fr auto auto; grid-auto-flow: column; align-items: start; grid-gap: 2rem; padding: 2rem; background: var(--gray);}
.sub .engineering-col .row .title .number{ font-size: 3rem; line-height: 1; font-weight: 700; color: var(--primary);}
.sub .engineering-col .row .title .caption{ justify-self: start; grid-gap: 0; line-height: 2;}
.sub .engineering-col .row .title .caption .cn{ font-size: 1.25rem; line-height: 1.5; font-weight: 500; color: var(--primary);}
.sub .engineering-col .row .title .caption .en{ font-size: 0.75rem; color: var(--desc);}
.sub .engineering-col .row .title .caption .slogan{ font-size: 0.875rem; color: var(--desc); margin-top: 0.5rem;}
.sub .engineering-col .row .title .ico{ justify-self: end; align-self: center; font-size: 2rem; line-height: 1; font-weight: 300; font-family: 'fal'; color: var(--primary);}
.sub .engineering-col .row .title a.more{ justify-self: end; align-self: center;}

.sub .engineering-col .row .content{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 2.5vw;}
.sub .engineering-col .row .content .itm{ display: grid; grid-gap: 1rem;}
.sub .engineering-col .row .content .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9)}
.sub .engineering-col .row .content .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.sub .engineering-col .row .content .itm .info{ display: flex; justify-content: space-between; align-items: center; width: 100%; overflow: hidden;}
.sub .engineering-col .row .content .itm .info span{ width: calc(100% - 2rem); font-size: 1rem; line-height: 1.5; font-weight: 500; color: var(--text); text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.sub .engineering-col .row .content .itm .info:after{ content: '\f178'; font-size: 1rem; line-height: 1.5; font-weight: 300; font-family: 'fal'; color: var(--desc);}

.sub .honor-row{ position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 5vw 2.5vw; align-items: start; width: 100%; padding: 5vw 6.25vw; overflow: hidden;}
.sub .honor-row:after{ content: ''; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: var(--gray);}
.sub .honor-row .col{ position: relative; display: grid; grid-gap: 2.5vw;}
.sub .honor-row .col.font{ grid-column: span 3;}

.sub .honor-row .col.tab{ grid-column: span 9; display: grid; grid-template-columns: 4rem auto; grid-gap: 0; align-items: center; height: 100%; overflow: hidden;}

.sub .honor-row .col .title{ position: relative;}
.sub .honor-row .col .content{ width: 100%;}
.sub .honor-row .col .content p{ font-size: 1.0rem; font-weight: 800; font-family: serif; line-height: 1.25;}

.sub .honor-row .col .tab-nav .itm{ position: relative; z-index: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 14rem; font-size: 1.5rem; line-height: 1.25; font-weight: bold; color: white; background: #ddd; cursor: pointer;}
.sub .honor-row .col .tab-nav .itm.act{ z-index: 1; background: var(--primary);}
.sub .honor-row .col .tab-con{ height: 100%; background: white; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1); overflow: hidden;}
.sub .honor-row .col .tab-con .swiper-slide{ display: flex; align-items: center; }
.sub .honor-row .col .tab-con .swiper-slide .list{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 2.5vw; width: 100%; padding: 2.5vw;}
.sub .honor-row .col .tab-con .swiper-slide .itm{ display: flex; padding-right: 2.5vw; transform-style: preserve-3d; perspective: 50vw; perspective-origin: 50% 50%; position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 192 * 135); transition: .8s;}
.sub .honor-row .col .tab-con .swiper-slide .itm .cover{ position: absolute; z-index: 1; width: 100%; height: 100%; overflow: hidden; background: var(--gray); transform: rotateY(180deg); opacity: 0; transition: .8s;}
.sub .honor-row .col .tab-con .swiper-slide .itm .cover img{ width: 100%; height: 100%; object-fit: contain;}
.sub .honor-row .col .tab-con .swiper-slide .itm .info{ position: absolute; z-index: 2; display: flex; flex-flow: column; width: 100%; height: 100%; overflow: hidden; background: var(--gray); background-size: cover; display: flex; justify-content: center; align-items: center; transition: .8s;}
.sub .honor-row .col .tab-con .swiper-slide .itm .info i{ font-style: normal; font-size: 2.5rem; color: var(--primary);}
.sub .honor-row .col .tab-con .swiper-slide .itm .info span{ width: 70%; font-size: 1rem; line-height: 1.5; text-align: center; color: var(--text);}
.sub .honor-row .col .tab-con .swiper-slide .itm:hover{ transform: rotateY(180deg);}
.sub .honor-row .col .tab-con .swiper-slide .itm:hover .cover{ z-index: 2; box-shadow: 0 8px 16px rgba(10,34,77, .2); opacity: 1;}
.sub .honor-row .col .tab-con .swiper-slide .itm:hover .info{ z-index: 1; box-shadow: none;}

.sub .honor-row .col .tab-con p{ font-size: 1.25rem; font-weight: 900; font-family: serif; line-height: 2;}

.sub .party-col{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 5vw 2.5vw; align-items: start; padding: 5vw 6.25vw;}
.sub .party-col .row{ grid-column: span 12; display: grid; grid-gap: 2.5vw;}
.sub .party-col .party-union{ grid-column: span 8;}
.sub .party-col .party-typical{ grid-column: span 4; grid-row: span 2;}
.sub .party-col .party-spir{ grid-column: span 8;}
.sub .party-col .title .caption .strip{ background: var(--secondary);}
.sub .party-col .title a.more:before{ background: var(--secondary);}

.sub .party-col .headlines{ display: grid; grid-template-columns: repeat(8,1fr); grid-gap: 2.5vw; align-items: start; background: var(--gray);}
.sub .party-col .headlines .cover{ grid-column: span 5; position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); overflow: hidden;}
.sub .party-col .headlines .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.sub .party-col .headlines .info{ grid-column: span 3; display: grid; grid-gap: 1rem; justify-items: start; width: calc(100% + 2.5vw); margin-left: -2.5vw; padding: 2rem;}
.sub .party-col .headlines .info .date{ position: relative; z-index: 1; display: grid; align-items: center; line-height: 1.5; text-align: center; padding: 2px 4px 4px; border-radius: 4px; background: white;}
.sub .party-col .headlines .info .date .dot{ display: flex; justify-content: space-around; padding-bottom: 2px;}
.sub .party-col .headlines .info .date .dot i{ position: relative; width: 6px; height: 6px; border-radius: 3px; background: white; transition: .3s;}
.sub .party-col .headlines .info .date .dot i:after{ content: ''; position: absolute; bottom: 3px; left: 1px; width: 4px; height: 10px; border-radius: 2px; background: var(--secondary); transition: .3s;}
.sub .party-col .headlines .info .date span{ font-size: .75rem; font-weight: 500; color: white; border-radius: 4px 4px 0 0; background: var(--secondary); transition: .3s;}
.sub .party-col .headlines .info .date b{ font-size: .875rem; font-weight: 500; color: var(--secondary); padding: 0 4px; border-radius: 0 0 4px 4px; background: var(--gray); transition: .3s;}
.sub .party-col .headlines .info .tit{ font-size: 1rem; line-height: 1.5; font-weight: 500; color: var(--text); display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden;}
.sub .party-col .headlines .info .desc{ font-size: 0.875rem; line-height: 2; color: var(--desc); display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden;}
.sub .party-col .headlines .info .more{ position: relative; justify-self: start; display: grid; grid-auto-flow: column; align-items: center; grid-gap: 2em; margin-top: 1rem; font-size: 0.875rem; color: var(--desc);}
.sub .party-col .headlines .info .more:after{ content: ''; position: absolute; bottom: -.5rem; left: 0; width: 0; height: 1px; background: var(--secondary); transition: .3s;}
.sub .party-col .headlines .info .more span{ transition: .3s;}

.sub .party-col .graphic{ display: grid;}
.sub .party-col .graphic .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9);}
.sub .party-col .graphic .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.sub .party-col .graphic .font{ position: relative; display: grid; grid-template-columns: 1fr auto auto; justify-content: start; align-items: center; grid-gap: 1.75rem; width: 100%; padding: .875rem 0; overflow: hidden;}
.sub .party-col .graphic .font:after{ content: ''; position: absolute; z-index: 0; bottom: 0; left: 0; width: 100%; height: 0; background: var(--primary); transition: .3s;}
.sub .party-col .graphic .font .date{ position: relative; z-index: 1; display: grid; align-items: center; line-height: 1.5; text-align: center; padding: 2px 4px 4px; border-radius: 4px; background: white;}
.sub .party-col .graphic .font .date .dot{ display: flex; justify-content: space-around; padding-bottom: 2px;}
.sub .party-col .graphic .font .date .dot i{ position: relative; width: 6px; height: 6px; border-radius: 3px; background: white; transition: .3s;}
.sub .party-col .graphic .font .date .dot i:after{ content: ''; position: absolute; bottom: 3px; left: 1px; width: 4px; height: 10px; border-radius: 2px; background: var(--secondary); transition: .3s;}
.sub .party-col .graphic .font .date span{ font-size: .75rem; font-weight: 500; color: white; border-radius: 4px 4px 0 0; background: var(--secondary); transition: .3s;}
.sub .party-col .graphic .font .date b{ font-size: .875rem; font-weight: 500; color: var(--secondary); padding: 0 4px; border-radius: 0 0 4px 4px; background: var(--gray); transition: .3s;}
.sub .party-col .graphic .font .strip{ position: relative; z-index: 1; width: 1px; height: 1.25rem; background: var(--border); transition: .3s;}
.sub .party-col .graphic .font .info{ position: relative; z-index: 1; display: grid; grid-gap: .5rem; line-height: 1.5; overflow: hidden;}
.sub .party-col .graphic .font .info .tit{ font-size: 1rem; font-weight: 500; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: var(--text); transition: .3s;}
.sub .party-col .graphic .font .info .more{ justify-self: start; display: grid; grid-auto-flow: column; align-items: center; grid-gap: 2em;; font-size: 0.875rem; color: var(--desc); transition: .3s;}

.sub .party-col .itm{ position: relative; display: grid; grid-auto-flow: column; justify-content: start; align-items: center; grid-gap: 2rem; width: 100%; padding: 1.5rem 2rem; background: var(--gray); overflow: hidden;}
.sub .party-col .itm:after{ content: ''; position: absolute; z-index: 0; bottom: 0; left: 0; width: 100%; height: 0; background: var(--secondary); transition: .3s;}
.sub .party-col .itm .date{ position: relative; z-index: 1; display: grid; align-items: center; line-height: 1.5; text-align: center; padding: 2px 4px 4px; border-radius: 4px; background: white;}
.sub .party-col .itm .date .dot{ display: flex; justify-content: space-around; padding-bottom: 2px;}
.sub .party-col .itm .date .dot i{ position: relative; width: 6px; height: 6px; border-radius: 3px; background: white; transition: .3s;}
.sub .party-col .itm .date .dot i:after{ content: ''; position: absolute; bottom: 3px; left: 1px; width: 4px; height: 10px; border-radius: 2px; background: var(--secondary); transition: .3s;}
.sub .party-col .itm .date span{ font-size: .75rem; font-weight: 500; color: white; border-radius: 4px 4px 0 0; background: var(--secondary); transition: .3s;}
.sub .party-col .itm .date b{ font-size: .875rem; font-weight: 500; color: var(--secondary); padding: 0 4px; border-radius: 0 0 4px 4px; background: var(--gray); transition: .3s;}
.sub .party-col .itm .strip{ position: relative; z-index: 1; width: 1px; height: 2rem; background: var(--border); transition: .3s;}
.sub .party-col .itm .info{ position: relative; z-index: 1; display: grid; grid-gap: 1rem; line-height: 1.5; overflow: hidden;}
.sub .party-col .itm .info .tit{ font-size: 1rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: var(--text); transition: .3s;}
.sub .party-col .itm .info .more{ justify-self: start; display: grid; grid-auto-flow: column; align-items: center; grid-gap: 2em; font-size: 0.875rem; color: var(--desc); transition: .3s;}

.sub .party-col .spec{ position: relative; width: 100%;}
.sub .party-col .spec .cover{ position: relative; z-index: 0; width: 100%; height: 0; padding-bottom: calc(100% / 2); margin-bottom: 1.625rem;}
.sub .party-col .spec .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.sub .party-col .spec .info{ position: absolute; z-index: 1; bottom: -1.625rem; right: 0; left: 0; width: 90%; margin: auto; padding: .875rem 1rem; background: var(--gray);}
.sub .party-col .spec .info .tit{font-size: 1rem; font-weight: 500; line-height: 1.5; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: var(--text); text-align: center; transition: .3s;}

.sub .party-col .party-work .content{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 1.25vw 2.5vw;} 
.sub .party-col .party-work .content .headlines{ grid-column: span 8; grid-row: span 3;}
.sub .party-col .party-work .content .itm{ grid-column: span 4;}
.sub .party-col .party-union .content{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 1.25vw 2.5vw;}
.sub .party-col .party-union .content .graphic{ grid-row: span 3;}
.sub .party-col .party-typical .content{ display: grid; grid-gap: 1.25vw;}
.sub .party-col .party-spir .content{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 1.25vw 2.5vw;}
.sub .party-col .party-special .content{ width: calc(100% + 2.5vw); margin-right: -2.5vw; overflow: hidden;}
.sub .party-col .party-special .swiper-slide{ width: 30vw; padding-right: 2.5vw;}

.sub .resources-col{ display: grid; grid-gap: 5vw; padding: 5vw 6.25vw;}
.sub .resources-col .list{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 2.5vw;}
.sub .resources-col .list .itm{ display: grid; grid-gap: 0.5rem; padding: 1.5rem 2rem; background: var(--gray); line-height: 2;}
.sub .resources-col .list .itm .title{ display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;}
.sub .resources-col .list .itm .title .caption{ flex-shrink: 0; font-size: 1.25rem; font-weight: 500; color: var(--text);}
.sub .resources-col .list .itm .title .wage{ font-size: 1rem; color: var(--primary);}
.sub .resources-col .list .itm .desc{ font-size: .875rem; color: var(--desc); display:-webkit-box; -webkit-line-clamp: 4; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden;}
.sub .resources-col .list .itm .more{ justify-self: start; display: grid; grid-auto-flow: column; grid-gap: 2em; align-items: center; margin-top: 1.5rem; font-size: .875rem; line-height: 1.5; color: var(--desc);}

.sub .news-col{ display: grid; grid-gap: 5vw; padding: 5vw 6.25vw;}
.sub .news-col .list{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 2.5vw;}
.sub .news-col .list .slide-news{ grid-column: span 3; position: relative; width: 100%; overflow: hidden;}
.sub .news-col .list .slide-news a{ display: grid; grid-template-columns: repeat(2,1fr); align-items: start; background: var(--gray);}
.sub .news-col .list .slide-news a .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); overflow: hidden;}
.sub .news-col .list .slide-news a .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.sub .news-col .list .slide-news a .info{ display: grid; grid-gap: 1.5rem; justify-items: start; padding: 2.5vw;}
.sub .news-col .list .slide-news a .info .date{ position: relative; z-index: 1; display: grid; align-items: center; line-height: 1.5; text-align: center; padding: 2px 4px 4px; border-radius: 4px; background: var(--gray);}
.sub .news-col .list .slide-news a .info .date .dot{ display: flex; justify-content: space-around; padding-bottom: 2px;}
.sub .news-col .list .slide-news a .info .date .dot i{ position: relative; width: 6px; height: 6px; border-radius: 3px; background: white; transition: .3s;}
.sub .news-col .list .slide-news a .info .date .dot i:after{ content: ''; position: absolute; bottom: 3px; left: 1px; width: 4px; height: 10px; border-radius: 2px; background: var(--primary); transition: .3s;}
.sub .news-col .list .slide-news a .info .date span{ font-size: 0.75rem; font-weight: 500; color: white; border-radius: 4px 4px 0 0; background: var(--primary); transition: .3s;}
.sub .news-col .list .slide-news a .info .date b{ font-size: .875rem; font-weight: 500; color: var(--primary); padding: 0 4px; border-radius: 0 0 4px 4px; background: white; transition: .3s;}
.sub .news-col .list .slide-news a .info .tit{ margin-top: 0.5rem; font-size: 1.25rem; line-height: 1.5; font-weight: 500; color: var(--text); display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden;}
.sub .news-col .list .slide-news a .info .desc{ font-size: 1rem; line-height: 2; color: var(--desc); display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden;}
.sub .news-col .list .slide-news a .info .more{ position: relative; justify-self: start; display: grid; grid-auto-flow: column; align-items: center; grid-gap: 2em; width: 10rem; height: 2.5rem; padding: .5rem 1rem; margin-top: 1.5rem; font-size: 0.875rem; color: white; background: var(--primary);}
.sub .news-col .list .slide-news a .info .more:after{ content: ''; position: absolute; bottom: -.5rem; left: 0; width: 0; height: 1px; background: var(--primary); transition: .3s;}
.sub .news-col .list .slide-news a .info .more span{ transition: .3s;}
.sub .news-col .list .slide-news .swiper-control{ position: absolute; z-index: 1; right: 0; bottom: 0; display: flex;}
.sub .news-col .list .slide-news .swiper-control div{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; font-size: 1rem; font-weight: 300; font-family: 'fal'; color: white; background: var(--primary); cursor: pointer;}
.sub .news-col .list .slide-news .swiper-control div.prev{ opacity: 0.5;}

.sub .news-col .list .itm{ position: relative; display: grid; grid-auto-flow: column; justify-content: start; align-items: center; grid-gap: 2rem; width: 100%; padding: 1.5rem 2rem; background: var(--gray); overflow: hidden;}
.sub .news-col .list .itm:after{ content: ''; position: absolute; z-index: 0; bottom: 0; left: 0; width: 100%; height: 0; background: var(--primary); transition: .3s;}
.sub .news-col .list .itm .date{ position: relative; z-index: 1; display: grid; align-items: center; line-height: 1.5; text-align: center; padding: 2px 4px 4px; border-radius: 4px; background: var(--gray);}
.sub .news-col .list .itm .date .dot{ display: flex; justify-content: space-around; padding-bottom: 2px;}
.sub .news-col .list .itm .date .dot i{ position: relative; width: 6px; height: 6px; border-radius: 3px; background: white; transition: .3s;}
.sub .news-col .list .itm .date .dot i:after{ content: ''; position: absolute; bottom: 3px; left: 1px; width: 4px; height: 10px; border-radius: 2px; background: var(--primary); transition: .3s;}
.sub .news-col .list .itm .date span{ font-size: 0.75rem; font-weight: 500; color: white; border-radius: 4px 4px 0 0; background: var(--primary); transition: .3s;}
.sub .news-col .list .itm .date b{ font-size: .875rem; font-weight: 500; color: var(--primary); padding: 0 4px; border-radius: 0 0 4px 4px; background: white; transition: .3s;}
.sub .news-col .list .itm .strip{ position: relative; z-index: 1; width: 1px; height: 2rem; background: var(--border); transition: .3s;}
.sub .news-col .list .itm .info{ position: relative; z-index: 1; display: grid; grid-gap: 1rem; line-height: 1.5; overflow: hidden;}
.sub .news-col .list .itm .info .tit{ font-size: 1rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: var(--text); transition: .3s;}
.sub .news-col .list .itm .info .more{ justify-self: start; display: grid; grid-auto-flow: column; align-items: center; grid-gap: 2em; font-size: 0.875rem; color: var(--desc); transition: .3s;}

.sub .project-col{ display: grid; grid-gap: 5vw; padding: 5vw 6.25vw;}
.sub .project-col .list{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 2.5vw;}
.sub .project-col .list .slide-project{ grid-row: span 3; position: relative; width: 100%; overflow: hidden;}
.sub .project-col .list .slide-project a{ display: grid; align-items: start; background: var(--gray);}
.sub .project-col .list .slide-project a .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); overflow: hidden;}
.sub .project-col .list .slide-project a .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.sub .project-col .list .slide-project a .info{ display: grid; grid-gap: 1.5rem; justify-items: start; padding: 2.5vw;}
.sub .project-col .list .slide-project a .info .date{ position: relative; z-index: 1; display: grid; align-items: center; line-height: 1.5; text-align: center; padding: 2px 4px 4px; border-radius: 4px; background: var(--gray);}
.sub .project-col .list .slide-project a .info .date .dot{ display: flex; justify-content: space-around; padding-bottom: 2px;}
.sub .project-col .list .slide-project a .info .date .dot i{ position: relative; width: 6px; height: 6px; border-radius: 3px; background: white; transition: .3s;}
.sub .project-col .list .slide-project a .info .date .dot i:after{ content: ''; position: absolute; bottom: 3px; left: 1px; width: 4px; height: 10px; border-radius: 2px; background: var(--primary); transition: .3s;}
.sub .project-col .list .slide-project a .info .date span{ font-size: 0.75rem; font-weight: 500; color: white; border-radius: 4px 4px 0 0; background: var(--primary); transition: .3s;}
.sub .project-col .list .slide-project a .info .date b{ font-size: .875rem; font-weight: 500; color: var(--primary); padding: 0 4px; border-radius: 0 0 4px 4px; background: white; transition: .3s;}
.sub .project-col .list .slide-project a .info .tit{ font-size: 1.25rem; line-height: 1.5; font-weight: 500; color: var(--text); display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden;}
.sub .project-col .list .slide-project a .info .desc{ font-size: 1rem; line-height: 2; color: var(--desc); display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden;}
.sub .project-col .list .slide-project a .info .more{ justify-self: start; display: grid; grid-auto-flow: column; align-items: center; grid-gap: 2em; font-size: 0.875rem; color: var(--primary); transition: .3s;}
.sub .project-col .list .slide-project .swiper-control{ position: absolute; z-index: 1; right: 0; bottom: 0; display: flex;}
.sub .project-col .list .slide-project .swiper-control div{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; font-size: 1rem; font-weight: 300; font-family: 'fal'; color: white; background: var(--primary); cursor: pointer;}
.sub .project-col .list .slide-project .swiper-control div.prev{ opacity: 0.5;}

.sub .project-col .list .itm{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 2.5vw; align-items: center; background: var(--gray);}
.sub .project-col .list .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); overflow: hidden;}
.sub .project-col .list .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.sub .project-col .list .itm .info{ position: relative; z-index: 1; display: grid; grid-gap: 1rem; margin-left: -1.5rem; padding-right: 1.5rem; line-height: 1.5; overflow: hidden;}
.sub .project-col .list .itm .info .tit{ font-size: 1rem; font-weight: 500; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: var(--text); transition: .3s;}
.sub .project-col .list .itm .info .desc{ font-size: .875rem; line-height: 2; color: var(--desc); display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden;}
.sub .project-col .list .itm .info .more{ justify-self: start; display: grid; grid-auto-flow: column; align-items: center; grid-gap: 2em; font-size: 0.875rem; color: var(--primary); transition: .3s;}

.sub .tech-col{ display: grid; grid-gap: 5vw; padding: 5vw 6.25vw;}
.sub .tech-col .list{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 2.5vw;}
.sub .tech-col .list .itm{ position: relative; background: var(--gray);}
.sub .tech-col .list .itm:after{ content: attr(data-date); position: absolute; right: 1.5rem; bottom: 1.5rem; font-size: 0.875rem; line-height: 1.5; color: var(--desc);}
.sub .tech-col .list .itm .info{ position: relative; z-index: 1; display: grid; grid-gap: 1rem; padding: 1.5rem; line-height: 1.5; overflow: hidden;}
.sub .tech-col .list .itm .info .tit{ font-size: 1rem; font-weight: 500; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: var(--text); transition: .3s;}
.sub .tech-col .list .itm .info .desc{ font-size: .875rem; line-height: 2; color: var(--desc); display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden;}
.sub .tech-col .list .itm .info .more{ justify-self: start; display: grid; grid-auto-flow: column; align-items: center; grid-gap: 2em; font-size: 0.875rem; color: var(--primary); transition: .3s;}

.sub .educ-col{ display: grid; grid-gap: 5vw; padding: 5vw 6.25vw;}
.sub .educ-col .list{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 2.5vw;}
.sub .educ-col .list .itm{ display: grid; background: var(--gray);}
.sub .educ-col .list .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); overflow: hidden;}
.sub .educ-col .list .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.sub .educ-col .list .itm .info{ position: relative; z-index: 1; display: grid; grid-gap: 1rem; padding: 1.5rem; line-height: 1.5; overflow: hidden;}
.sub .educ-col .list .itm .info .tit{ font-size: 1rem; font-weight: 500; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: var(--text); transition: .3s;}
.sub .educ-col .list .itm .info .desc{ font-size: .875rem; line-height: 2; color: var(--desc); display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden;}
.sub .educ-col .list .itm .info .more{ justify-self: start; display: grid; grid-auto-flow: column; align-items: center; grid-gap: 2em; font-size: 0.875rem; color: var(--primary); transition: .3s;}

.sub .column .channel-col{ padding: 5vw 6.25vw;}
.sub .column .channel-col .channel p{ font-size: 1.125rem; line-height: 2; text-align: justify;}
.sub .column .channel-col .channel p:not(:last-child){ padding-bottom: 1.125rem;}
.sub .column .channel-col .channel img{ max-width: 100%;}

.sub .column .article-col{ padding: 5vw 6.25vw;}
.sub .column .article-col .article{ display: grid; grid-gap: 1.875rem;}
.sub .column .article-col .article .info{ display: flex; font-size: 0.875rem; line-height: 2; color: var(--info);}
.sub .column .article-col .article .info span:not(:last-child){ margin-right: 4em;}
.sub .column .article-col .article .title{ font-size: 1.25rem; line-height: 1.5; font-weight: bold; color: var(--text);}
.sub .column .article-col .article .desc{ padding: 1.25rem; font-size: 0.875rem; line-height: 2; color: var(--desc); background: #F8F9FC;}
.sub .column .article-col .article .content{ font-size: 1rem; line-height: 2; color: var(--text); text-align: justify;}
.sub .column .article-col .article .content p:not(:last-child){ margin-bottom: 1em;}
.sub .column .article-col .article .content img{ max-width: 100%; height: auto !important;}
.sub .column .article-col .article .line{ width: 100%; height: 1px; background: #eee;}
.sub .column .article-col .article .arrow{ display: flex; justify-content: space-between; align-items: center; font-size: 1rem; line-height: 2; color: var(--info);}
.sub .column .article-col .article .arrow a{ color: var(--info)}
.sub .column .article-col .article .arrow a:last-child{ text-align: right;}
.sub .column .article-col .article .arrow a:first-child:before{ content: '上一篇: \A'; white-space: pre-line;}
.sub .column .article-col .article .arrow a:last-child:before{ content: '下一篇: \A'; white-space: pre-line;}

.sub .column .list-col{ display: grid; grid-gap: 5vw; padding: 5vw 6.25vw;}
.sub .column .list-col .list-page{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 2.5vw;}
.sub .column .list-col .list-page .itm{ display: grid; grid-gap: 1rem;}
.sub .column .list-col .list-page .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 3 * 2); background: var(--gray);}
.sub .column .list-col .list-page .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: contain;}
.sub .column .list-col .list-page .itm .info{ display: flex; justify-content: space-between; align-items: center; width: 100%; overflow: hidden;}
.sub .column .list-col .list-page .itm .info span{ width: calc(100% - 2rem); font-size: 1rem; line-height: 1.5; font-weight: 500; color: var(--text); text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.sub .column .list-col .list-page .itm .info:after{ content: '\f178'; font-size: 1rem; line-height: 1.5; font-weight: 300; font-family: 'fal'; color: var(--desc);}