@charset "utf-8";
.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;}
section{width: 100%;/* padding: 6.25vw; */}

.inner{ position: relative;}
.inner .inner-title{ position: relative; font-weight: bold; line-height: 1.25; text-transform: uppercase;}
.inner .inner-title .en{ font-size: 3rem; color: var(--primary)}
.inner .inner-title .en b{ color: var(--secondary);}
.inner .inner-title .cn{ font-size: 2rem; color: var(--text)}
.inner .inner-title .slogan{ z-index: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; font-size: 1.125rem; font-weight: normal; color: var(--desc);}
.inner .inner-title .more{ position: absolute; top: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; width: 12rem; height: 2.5rem; padding: 0 .75rem; margin: auto; background: var(--primary); transition: .35s;}
.inner .inner-title .more:after{ content: '\e664'; font-family: 'neko'; font-size: 1rem; line-height: 1; color: white;}
.inner .inner-title .more span{ font-size: 1rem; line-height: 1; color: white; text-transform: uppercase;}
.inner .inner-more{ position: relative; top: 0; display: flex; justify-content: space-between; align-items: center; width: 12rem; height: 2.5rem; padding: 0 .75rem; background: var(--primary); transition: .35s;}
.inner .inner-more:after{ content: '\e664'; font-family: 'neko'; font-size: 1rem; line-height: 1; color: white;}
.inner .inner-more span{ font-size: 1rem; line-height: 1; color: white; text-transform: uppercase;}

/* header */
header{ position: fixed; z-index: 9; top: 0; left: 0; display: flex; justify-content: space-between; width: 100%; padding: 3rem 6.25vw; transition: .3s;}
header .logo{ width: auto; height: 3.5rem; overflow: hidden;}
header .logo a{ position: relative; display: block;}
header .logo a img.w{ z-index: 1; position: relative; display: block; width: auto; height: 3.5rem; transition: .3s;}
header .logo a img.d{ z-index: 0; position: absolute; top: 0; left: 0; width: auto; height: 3.5rem; opacity: 0; transition: .3s;}

header .nav{ display: flex; justify-content: center; align-items: center;}
header .nav a{ padding: 0 1em; font-size: 1.25rem; line-height: 1.5; font-weight: bold; color: white;}

header .hotline{ display: flex; align-items: center; gap: 0.5rem; color: white;}
header .hotline i{ font-size: 1.5rem; line-height: 1;}
header .hotline span{ font-size: 1rem; line-height: 1.5;}

header.color{ padding: 1rem 6.25vw; background: white; }
header.color .logo a img.w{ opacity: 0;}
header.color .logo a img.d{ opacity: 1;}

header.color .nav a{ color: var(--text);}
header.color .hotline{ color: var(--primary);}

header .toggle{ position: relative; z-index: 10; display: none; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem;}
header .toggle .ico{ position: relative; width: 2.25rem; height: 1.125rem;}
header .toggle .ico i{ position: absolute; width: 1.5rem; height: .125rem; border-radius: var(--rounded); background: white;}
header .toggle .ico i:first-child{ top: 0; left: 0; transition: top .1s, transform .3s .1s;}
header .toggle .ico i:last-child{ bottom: 0; left: 0;  transition: bottom .1s, transform .3s .1s;}
header .toggle .ico i:nth-child(2){ top: 0; bottom: 0; right: 0; margin: auto; transition: .3s;}


header .toggle.active .ico i{ left: 0.375rem; background: var(--primary);}
header .toggle.active .ico i:first-child{ top: .5rem; transform: rotate(45deg);}
header .toggle.active .ico i:last-child{ bottom: .5rem; transform: rotate(-45deg);}
header .toggle.active .ico i:nth-child(2){ width: 0;}
header .toggle.active span:before{ content: 'close';}

header .toggle.close .ico i:first-child{ top: 0; transform: rotate(0); transition: transform .3s, top .1s .3s;}
header .toggle.close .ico i:last-child{ bottom: 0; transform: rotate(0); transition: transform .3s, bottom .1s .3s;}

header .menu{ position: fixed; z-index: 9; top: 0; right: 0; display: none; width: 100vw; height: 100vh; padding: 6rem 5vw; overflow: hidden; background: white;}
header .menu .navlist{ width: 100%;}
header .menu .navlist dl dt{ position: relative; padding: .75rem 0 .75rem 1.5em; margin: 0;}
header .menu .navlist dl dt:before{ content: attr(data-num); position: absolute; top: 0; left: 0; display: flex; align-items: center; height: 100%; font-size: 1rem; line-height: 1.5; color: var(--primary)}
header .menu .navlist dl dt:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--border);}
header .menu .navlist dl dt a{ position: relative; display: inline-block; font-size: 1.25rem; line-height: 2; font-weight: bold; color: var(--text); transition: .3s;}
header .menu .navlist dl dt a:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--primary); transition: .3s;}
header .menu .navlist dl dd{ display: flex; flex-flow: row wrap; grid-gap: 1rem; padding: 1rem;}
header .menu .navlist dl dd a{ display: inline-block; font-size: 1.25rem; line-height: 1.5; color: var(--info); transition: .3s;}


/* slideshow */

.slideshow{ position: relative; width: 100%; height: 50.625vw; padding: 0; overflow: hidden;}
.slideshow .itm{ width: 100%; height: 100%; overflow: hidden;}
.slideshow .itm .info{ position: absolute; z-index: 1; top: 0; right: 0; display: flex; flex-flow: column nowrap; justify-content: center; width: 100%; height: 100%; padding: 6.25vw; background: url('../img/cover.svg');}
.slideshow .itm .info .slogan{display: grid;grid-gap: 1.5rem;color: white;margin-bottom: 3rem;text-align: center;text-shadow: 2px 2px 2px #000000;}
.slideshow .itm .info .slogan .cn{font-size: 3rem;line-height: 1.5;font-weight: bolder;/* letter-spacing: .5rem; */}
.slideshow .itm .info .slogan .en{ font-size: 1rem; line-height: 1.5; text-transform: uppercase;}
.slideshow .itm .info .more{display: flex;justify-content: space-between;align-items: center;width: 8rem;height: 2.5rem;/* text-align: center; */padding: 0.75rem;font-size: 1rem;line-height: 1;color: #2b2b2b;text-transform: uppercase;background: #e6ccaa;font-weight: bold;}

.slideshow .itm img{ position: relative; z-index: 0; width: 100%; height: 50.625vw; object-fit: cover; transform: scale(1); transition: 4s;}
.slideshow .itm.swiper-slide-active img{ transform: scale(1.1);}

.slideshow .swiper-control{ position: absolute; z-index: 2; bottom: 0; left: 0; display: flex; justify-content: space-between; align-items: center; width: 48.75vw; padding: .75rem 1.875vw .75rem 6.25vw; background: white;}

.slideshow .swiper-control .swiper-number{ display: flex; align-items: center; gap: .25rem;}
.slideshow .swiper-control .swiper-number b{ font-size: 4.5rem; line-height: 1; color: var(--primary);}
.slideshow .swiper-control .swiper-number i{ font-size: 2.25rem; line-height: 1; color: var(--desc);}
.slideshow .swiper-control .swiper-number span{ font-size: 2.25rem; line-height: 1; color: var(--desc);}

.slideshow .swiper-control .swiper-button{ display: flex; justify-content: space-around; align-items: center; gap: 4rem; text-transform: uppercase;}
.slideshow .swiper-control .swiper-button div{ display: flex; justify-content: center; align-items: center; gap: 0.5rem; cursor: pointer; transition: .35s;}
.slideshow .swiper-control .swiper-button div i{ font-size: 1.5rem; transition: .3s;}
.slideshow .swiper-control .swiper-button div span{ font-size: 1rem; line-height: 1.5;}

.slideshow .scroll{ position: absolute; z-index: 3; bottom: 4rem; right: 6.25vw; display: flex; flex-direction: column; align-items: center;}
.slideshow .scroll span{ font-size: .75rem; line-height: 1.5; writing-mode: vertical-lr; text-transform: uppercase; color: white;}
.slideshow .scroll i{position: relative; z-index: 1; display: block; width: 1px; height: 4rem; margin-bottom: 1rem; background: white; overflow: hidden;}
.slideshow .scroll i:before{content: '';position: absolute;top: -100%;right: 0;left: 0;z-index: 2;width: 1px;height: 6rem;background: #63b622;animation: up 2s infinite;}
@keyframes up{ from { top: -100%; } to { top: 100%; } }


/* services */
.business{ background: url('../img/business-bg.png') top center no-repeat; background-size: 100% auto;}
.business .inner{ position: relative; display: grid; grid-template-columns: 7fr 5fr; grid-gap: 0 2.5vw;}
.business .inner-unit{ grid-row: 2/3;}
.business .inner-unit .info{ padding-top: 3rem;}
.business .inner-unit .info p{ font-size: 1.125rem; line-height: 2;}
.business .inner-unit .info a.more{ position: relative; top: 0; display: flex; justify-content: space-between; align-items: center; width: 12rem; height: 2.5rem; padding: 0 .75rem; margin-top: 4rem; background: var(--primary); transition: .35s;}
.business .inner-unit .info a.more:after{ content: '\e664'; font-family: 'neko'; font-size: 1rem; line-height: 1; color: white;}
.business .inner-unit .info a.more span{ font-size: 1rem; line-height: 1; color: white; text-transform: uppercase;}
.business .inner-cover{ position: relative; grid-column: 2/3; grid-row: 1/3; width: 100%; overflow: hidden;}
.business .inner-cover img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.business .inner-list{ grid-column: 1/3; display: grid; grid-template-columns: repeat(4,1fr); margin-top: 4rem; box-shadow: 0 .5rem 1rem rgb(230 204 170); background: white;}
.business .inner-list .itm{ position: relative; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 3rem 2rem; transition: .35s;}
.business .inner-list .itm:nth-child(2n){ background: var(--gray);}
.business .inner-list .itm b{ position: absolute; top: 3rem; left: 2rem; z-index: 0; font-size: 4.5rem; line-height: 1; color: var(--border); transition: .35s;}
.business .inner-list .itm .font{ z-index: 1; display: grid; grid-gap: .5rem; line-height: 1.5; text-transform: uppercase;}
.business .inner-list .itm .font span{ font-size: 1.25rem; font-weight: bold; color: var(--text); transition: .35s;}
.business .inner-list .itm .font i{ width: 1.25rem; height: 2px; background: var(--primary); transition: .35s;}
.business .inner-list .itm .font em{ font-size: 1rem; font-style: normal; font-family: 'Samsung Sharp Sans'; color: var(--desc); transition: .35s;}
.business .inner-list .itm .ico{ font-size: 4.5rem; line-height: 1; color: var(--primary); transition: .35s;}


/* about */
.about{ background: url('../img/about-bg.png') top center no-repeat; background-size: 100% auto; padding: 6.25vw 6.25vw 0vw; position: relative; z-index: 1;}
.about .inner{ position: relative; display: grid; grid-template-columns: 7fr 5fr; grid-gap: 0 2.5vw;}
.about .inner-title .en{ color: white;}
.about .inner-title .en b{ color: white;}
.about .inner-title .cn{ color: white;}
.about .inner-unit{ grid-row: 2/3;}
.about .inner-unit .info{ padding-top: 3rem;}
.about .inner-unit .info p{ font-size: 1.125rem; line-height: 2; color: white; display:-webkit-box; -webkit-line-clamp: 6; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden;}
.about .inner-unit .info a.more{ position: relative; top: 0; display: flex; justify-content: space-between; align-items: center; width: 12rem; height: 2.5rem; padding: 0 .75rem; margin-top: 4rem; border: 1px solid white; transition: .35s;}
.about .inner-unit .info a.more:after{ content: '\e664'; font-family: 'neko'; font-size: 1rem; line-height: 1; color: white;}
.about .inner-unit .info a.more span{ font-size: 1rem; line-height: 1; color: white; text-transform: uppercase;}
.about .inner-unit .number{ display: flex; justify-content: space-between; align-items: center; padding-top: 4rem;}
.about .inner-unit .number .itm{ display: flex; flex-flow: column nowrap; color: white;}
.about .inner-unit .number .itm .num{ display: flex; align-items: baseline;}
.about .inner-unit .number .itm .num b{ font-size: 3rem; line-height: 1;}
.about .inner-unit .number .itm .num i{ font-size: 1rem; line-height: 1; font-style: normal; padding-left: 0.5rem;}
.about .inner-unit .number .itm span{ font-size: 1.25rem; line-height: 1.5; padding-top: 0.5rem;}
.about .inner-cover{ position: relative; grid-column: 2/3; grid-row: 1/3;}
.about .inner-cover img{ position: absolute; width: 100%; height: 100%; object-fit: cover;}
.about .inner-list{ grid-column: 1/3; display: grid; grid-template-columns: repeat(5,1fr); margin-top: 6rem; box-shadow: 0 0 2rem rgba(0,0,0,.05); background: white;}
.about .inner-list .itm{ position: relative; top: 0; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 3rem 0; transition: .35s;}
.about .inner-list .itm:not(:last-child):after{ content: ''; position: absolute; top: 0; right: -1px; bottom: 0; margin: auto; width: 2px; height: 3rem; background: var(--border);}
.about .inner-list .itm i{ font-size: 4rem; line-height: 1; color: var(--primary);}
.about .inner-list .itm em{ font-size: 1rem; line-height: 1.5; font-style: normal; font-family: 'Samsung Sharp Sans'; color: var(--desc); text-transform: uppercase; margin-top: .625rem;}
.about .inner-list .itm span{ font-size: 1.25rem; line-height: 1.5; font-weight: bold; color: var(--text);}

/* workshop */
.workshop{ background: url('../img/workshop-bg.png') top center no-repeat; background-size: 100% auto; position: relative; z-index: 0; padding-top: calc(6.25vw + 7rem); margin-top: -7rem;}
.workshop .inner-title{ position: absolute; width: 100%; text-align: right;}
.workshop .inner-list{ position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 0 2.5vw;}
.workshop .inner-list .cover-swiper{ z-index: 0; grid-column: 1/11; overflow: hidden;}
.workshop .inner-list .cover-swiper .itm{ display: grid; grid-template-columns: repeat(10,1fr); grid-gap: 0 2.5vw;}
.workshop .inner-list .cover-swiper .itm .cover{ position: relative; grid-column: span 7; width: 100%; height: 0; padding-bottom: calc(100%/16*9);}
.workshop .inner-list .cover-swiper .itm .cover img{ position: absolute; top: 0; right: 0; display: block; width: 100%; height: 100%; object-fit: cover;}
.workshop .inner-list .cover-swiper .itm .info{ grid-column: span 3; display: flex; flex-flow: column nowrap; gap: .5rem; padding: 6.25vw 0;}
.workshop .inner-list .cover-swiper .itm .info span{ font-size: 1.25rem; line-height: 1.5; font-weight: bold;}
.workshop .inner-list .cover-swiper .itm .info i{ font-size: 0.875rem; line-height: 1.5; font-style: normal; color: var(--primary);}

.workshop .inner-list .thumb-swiper{ z-index: 1; position: absolute; bottom: 3rem; grid-column: 7/13; width: 100%; overflow: hidden;}
.workshop .inner-list .thumb-swiper .swiper-slide{ width: 30%;}
.workshop .inner-list .thumb-swiper .itm{ position: relative; display: flex; width: 100%; height: 0; padding-bottom: calc(100%/16*9);}
.workshop .inner-list .thumb-swiper .itm img{ position: absolute; top: 0; right: 0; display: block; width: 100%; height: 100%; object-fit: cover;}

.workshop .inner-list .control{ position: absolute; top: 0; bottom: 0; left: 0; grid-column: 8/10; display: flex; height: 3rem; margin: auto;}
.workshop .inner-list .control .prev,
.workshop .inner-list .control .next{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; cursor: pointer;}
.workshop .inner-list .control .prev{ background: var(--primary);}
.workshop .inner-list .control .next{ background: var(--secondary);}
.workshop .inner-list .control .prev i,
.workshop .inner-list .control .next i{ font-size: 1.5rem; line-height: 1; color: white;}

.workshop .inner-list .number{ position: absolute; top: 0; bottom: 0; right: 0; grid-column: 11/13; display: flex; align-items: center; height: 5vw; gap: .25rem; margin: auto;}
.workshop .inner-list .number b{ font-size: 4.5rem; line-height: 1; color: var(--primary);}
.workshop .inner-list .number i{ font-size: 2.25rem; line-height: 1; color: var(--desc);}
.workshop .inner-list .number span{ font-size: 2.25rem; line-height: 1; color: var(--desc);}

/* case */
.case{ background: url('../img/case-bg.png') top center no-repeat; background-size: cover;}
.case .inner{ display: grid; grid-gap: 2.5vw;}
.case .inner-title .control{ position: absolute; top: 0; right: 0; bottom: 0; display: flex; height: 3rem; margin: auto;}
.case .inner-title .control .prev,
.case .inner-title .control .next{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; cursor: pointer;}
.case .inner-title .control .prev{ background: var(--primary);}
.case .inner-title .control .next{ background: var(--secondary);}
.case .inner-title .control .prev i,
.case .inner-title .control .next i{ font-size: 1.5rem; line-height: 1; color: white;}
.case .inner-list{ width: calc(100% + 6.25vw); overflow: hidden;}
.case .inner-list .swiper-slide{ width: 37.5vw; padding-right: 2.5vw;}
.case .inner-list .itm{ display: grid; grid-gap: 1.5rem; width: 100%;}
.case .inner-list .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100%/16*9); overflow: hidden;}
.case .inner-list .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; transition: .35s;}
.case .inner-list .itm .info{ display: grid; grid-gap: 0.5rem;}
.case .inner-list .itm .info span{ font-size: 1.125rem; line-height: 1.5; font-weight: bold;}
.case .inner-list .itm .info i{ font-size: 1rem; line-height: 1.5; font-style: normal; color: var(--primary); text-transform: uppercase;}

/* news */
.news{ background: url('../img/news-bg.png') top center no-repeat; background-size: cover;}
.news .inner{ display: grid; grid-gap: 2.5vw;}
.news .inner-list{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 0 2.5vw;}
.news .inner-list .big-list{ width: 100%; height: 100%; overflow: hidden;}
.news .inner-list .big-list .itm{ position: relative; top: 0; display: grid; height: 100%; grid-template-rows: auto 1fr; transition: .35s;}
.news .inner-list .big-list .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100%/2); overflow: hidden;}
.news .inner-list .small-list{ display: grid; grid-template-rows: repeat(3,1fr); grid-gap: 2.5vw 0;}
.news .inner-list .small-list .itm{ position: relative; top: 0; display: grid; grid-template-columns: repeat(6,1fr); grid-gap: 2.5vw; transition: .35s;}
.news .inner-list .small-list .itm .cover{ position: relative; grid-column: span 2; width: 100%; height: 0; padding-bottom: calc(100%/4*3); overflow: hidden;}
.news .inner-list .big-list .itm .cover img,
.news .inner-list .small-list .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; transition: .35s;}
.news .inner-list .big-list .itm .info{ position: relative; align-self: end;}
.news .inner-list .small-list .itm .info{ position: relative; grid-column: span 4; width: calc(100%+1.25vw); margin-left: -1.25vw;}
.news .inner-list .big-list .itm .info:after,
.news .inner-list .small-list .itm .info:after{ content: 'details'; position: absolute; top: 0; right: 0; font-size: 1rem; line-height: 3.5; color: var(--primary); text-transform: uppercase;}
.news .inner-list .big-list .itm .info .date,
.news .inner-list .small-list .itm .info .date{ display: grid; text-transform: uppercase;}
.news .inner-list .big-list .itm .info .date .md,
.news .inner-list .small-list .itm .info .date .md{ font-size: 2rem; line-height: 1;}
.news .inner-list .big-list .itm .info .date .y,
.news .inner-list .small-list .itm .info .date .y{ font-size: 1rem; line-height: 1.5;}
.news .inner-list .big-list .itm .info .title,
.news .inner-list .small-list .itm .info .title{ font-size: 1.125rem; line-height: 1.5; font-weight: bold; margin: 1.5rem 0 1rem;}
.news .inner-list .big-list .itm .info .desc,
.news .inner-list .small-list .itm .info .desc{ font-size: 1rem; line-height: 1.5; color: var(--desc); text-align: justify;}

.news .inner-control{ display: flex;}
.news .inner-control .prev,
.news .inner-control .next{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; font-size: 1.5rem; line-height: 1; color: white; cursor: pointer;}
.news .inner-control .prev{ background: var(--primary);}
.news .inner-control .next{ background: var(--secondary);}
.news .inner-control .prev i,
.news .inner-control .next i{ font-size: 1.5rem; line-height: 1; color: white;}

/* contact */
.contact{ background: url('../img/contact-bg.png') top center no-repeat; background-size: cover;}
.contact .inner{ display: grid; grid-gap: 2.5vw;}
.contact .inner-unit{ display: grid; grid-template-columns: 8fr 3fr 1fr; grid-gap: 0 2.5vw;}
.contact .inner-unit .map{ width: 100%; height: 100%; overflow: hidden;}
.contact .inner-unit .list{ width: calc(100% + 2.5vw); margin-left: -2.5vw; background: white;}
.contact .inner-unit .list .itm{ position: relative; display: grid; grid-template-columns: 2rem auto; grid-template-rows: 2rem auto; grid-gap: .5rem; padding: 3rem;}
.contact .inner-unit .list .itm:not(:last-child):after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--border);}
.contact .inner-unit .list .itm i{ font-size: 2rem; line-height: 1; color: var(--primary);}
.contact .inner-unit .list .itm b{ grid-column: 2/3; font-size: 1.25rem; line-height: 1.5; color: var(--text);}
.contact .inner-unit .list .itm span{ grid-column: 2/3; grid-row: 2/3; font-size: 1rem; line-height: 1.5; color: var(--info)}
.contact .inner-unit .code{ display: flex; flex-flow: column nowrap; justify-content: space-around; width: calc(100% + 2.5vw); margin-left: -2.5vw; background: var(--primary);}
.contact .inner-unit .code .itm{ display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; line-height: 1.5; color: #fff;}
.contact .inner-unit .code .itm img{ width: 6rem; height: 6rem; object-fit: cover; background: white;}
.contact .inner-unit .code .itm canvas{ width: 6rem !important; height: 6rem !important;}
.contact .inner-unit .code .itm span{ padding-top: 0.5rem; font-size: 1rem;}
.contact .inner-unit .code .itm i{ font-size: 0.625rem; font-style: normal;}
.contact .inner-unit .code .itm b{ padding-top: 0.5rem; font-size: 1rem;}

/* footer */
footer{ padding: 0 6.25vw; background: var(--text);}
footer .inner{ position: relative; display: grid; }
footer .inner .top{ position: absolute; z-index: 3; top: 0; right: 0; left: 0; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; cursor: pointer;}
footer .inner .top i{ display: flex; justify-content: center; align-items: center; width: 1.5rem; height: 1.5rem; font-size: 1rem; line-height: 1; background: white;}
footer .inner .top span{ font-size: 0.75rem; line-height: 2; color: white;}
footer .inner .unit{ display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 4rem 0;}
footer .inner .unit .logo{ width: auto; height: 3.5rem; overflow: hidden;}
footer .inner .unit .logo a{ position: relative; display: block;}
footer .inner .unit .logo a img{ z-index: 1; position: relative; display: block; width: auto; height: 3.5rem; transition: .3s;}
footer .inner .unit .slogan{ display: grid; grid-gap: .5rem; text-align: right; color: white;}
footer .inner .unit .slogan .en{ font-size: 0.75rem; line-height: 1.5; text-transform: uppercase;}
footer .inner .unit .slogan .cn{ font-size: 1.5rem; line-height: 1; font-weight: normal;}
footer .inner .list{ display: flex; justify-content: space-between; margin-bottom: 4rem;}
footer .inner .list ul{ display: grid; grid-template-columns: auto auto auto; grid-gap: 2.5vw; color: white}
footer .inner .list ul:last-child{ grid-template-columns: auto auto;}
footer .inner .list ul li{ display: flex; flex-flow: column nowrap; grid-gap: 0.5rem;}
footer .inner .list ul li b{ font-size: 1.125rem; font-weight: normal;}
footer .inner .list ul li span{ font-size: 1rem; color: var(--info)}
footer .inner .list ul li img{ width: 6rem; height: 6rem; object-fit: cover;}
footer .inner .line{ width: 100%; height: 1px; background: white; opacity: 0.1;}
footer .inner .cpy{ display: flex; justify-content: space-between; align-items: center; padding: 1.125rem 0; font-size: 0.875rem; line-height: 1.5; color: white;}
footer .inner .cpy:after{ content: '百航科技 - 专业网络品牌设计'; font-size: 0.875rem; line-height: 1.5; color: white;}
footer .inner .cpy a{ color: white;}


/* sub */

  /* common */
  .head{ position: relative; height: 9.5rem; background: var(--text);}
  .head:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--border);}

  .col-cover{ position: relative; z-index: 0; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; width: 100%; height: 25vw; padding: 2rem 6.25vw 0; background: var(--black); line-height: 1.5; color: white}
  .col-cover:before{ content: ''; position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: 100%; background: url('../img/cover.svg');}
  .col-cover .caption{ text-align: right;}
  .col-cover .caption .cn{ position: relative; z-index: 2; font-size: 1.5rem;}
  .col-cover .caption .en{ position: relative; z-index: 2; font-size: 4rem; font-weight: bold; text-transform: uppercase;}
  .col-cover .slogan{ position: relative; z-index: 2; font-size: 1.5rem; }
  .col-cover img{ position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}

  .column{ display: grid; grid-gap: 2.5vw; padding: 5vw 6.25vw; background: var(--gray);}

  .column .category{ display: flex; flex-flow: row wrap; align-items: center; width: 100%; padding: 2rem; background: white;}
  .column .category:before{ content: 'Category'; margin-right: 1em; font-size: 1.5rem; line-height: 1.5; text-transform: uppercase; font-weight: bold;}
  .column .category a{ position: relative; padding: .5em 0; margin: 0 1em; font-size: 1.25rem; line-height: 1.5; font-weight: bold; color: var(--text);}
  .column .category a:after{ content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 0; height: 2px; background: var(--primary); transition: .3s;}
  .column .category a.on{ color: var(--primary)}
  .column .category a.on:after{ width: 100%;}

  .pagination{ display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;}
  .pagination span,
  .pagination a{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; margin: 0 .5rem; background: var(--deep); font-size: 1rem; line-height: 1.5; color: white; font-family: 'neko','Oswald';}
  .pagination span{background: var(--primary);}
  .pagination span.prev,
  .pagination span.next{ background: var(--border);}
  
  /* workshop */
  .list-workshop{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 2.5vw;}
  .list-workshop .itm{ position: relative; top: 0; background: white; transition: .35s;}
  .list-workshop .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100%/16*9); overflow: hidden;}
  .list-workshop .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; transition: .35s;}
  .list-workshop .itm .info{ position: relative; display: grid; grid-gap: 0.5rem; padding: 1rem;}
  .list-workshop .itm .info:after{ content: '\e664'; position: absolute; top: 0; right: 1rem; bottom: 0; height: 1.5rem; margin: auto; font-family: 'neko'; font-size: 1.5rem; line-height: 1; color: var(--primary);}
  .list-workshop .itm .info span{ font-size: 1.125rem; font-weight: bold; line-height: 1.5; color: var(--text); transition: .35s;}
  .list-workshop .itm .info i{ font-size: 0.875rem; line-height: 1.5; font-style: normal; color: var(--desc);}

  /* equipment */
  .list-equipment{ display: grid; grid-gap: 2.5vw; grid-template-columns: repeat(3,1fr);}
  .list-equipment .itm{ position: relative; top: 0; width: 100%; height: 0; padding-bottom: calc(100%/4*3); transition: .35s;}
  .list-equipment .itm img{ position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
  .list-equipment .itm .info{ position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; display: grid; padding: 1.5rem;}
  .list-equipment .itm .info:before{ content: ''; position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: 100%; background: white; transition: .35s;}
  .list-equipment .itm .info:after{ content: ''; position: absolute; z-index: 0; bottom: 0; left: 0; width: 100%; height: 0; background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1)); transition: .35s;}
  .list-equipment .itm .info span{ z-index: 2; font-size: 1.125rem; line-height: 1; color: var(--text); transition: .35s;}
  .list-equipment .itm .info em{ z-index: 2; font-size: 0.75rem; line-height: 1; color: var(--desc); font-family: 'Samsung Sharp Sans'; font-style: normal; padding: .5rem 0 0; transition: .35s;}
  .list-equipment .itm .info i{ z-index: 2; font-size: 0.75rem; line-height: 1.5; font-style: normal; color: var(--info); height: 0; overflow: hidden; transition: .35s;}

  /* news */
  .list-news{ display: grid; grid-gap: 2.5vw; grid-template-columns: repeat(2,1fr);}
  .list-news .itm{ position: relative; top: 0; display: grid; grid-gap: 1rem; padding: 2rem; background: white; transition: .35s;}
  .list-news .itm .day{ position: absolute; z-index: 1; top: 2rem; right: 2rem; font-size: 3.5rem; line-height: 1; color: var(--primary); transition: .35s;}
  .list-news .itm .my{ position: relative; z-index: 1; font-size: 1rem; color: var(--info); transition: .35s;}
  .list-news .itm .tit{ position: relative; z-index: 1; font-size: 1.25rem; font-weight: bold; color: var(--text); transition: .35s;}
  .list-news .itm .line{ position: relative; z-index: 1; width: 1.25rem; height: 2px; background: var(--primary); transition: .35s;}
  .list-news .itm .desc{ position: relative; z-index: 1; font-size: 1rem; line-height: 1.5; color: var(--desc); -webkit-line-clamp: 2; transition: .35s;}

  /* case */
  .list-case{ display: grid; grid-gap: 2.5vw; grid-template-columns: repeat(2,1fr);}
  .list-case .itm{ position: relative; top: 0; display: grid; grid-template-columns: 3fr 2fr; background: white; transition: .35s;}
  .list-case .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100%/16*9); overflow: hidden; transition: .35s;}
  .list-case .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; transition: .35s;}
  .list-case .itm .info{ display: flex; flex-flow: column nowrap; justify-content: center; gap: .5rem; padding: 2rem; transition: .35s;}
  .list-case .itm .info span{ font-size: 1.125rem; line-height: 1.5; font-weight: bold; color: var(--text); transition: .35s;}
  .list-case .itm .info em{ font-size: 0.75rem; line-height: 1; font-family: 'Samsung Sharp Sans'; font-style: normal; color: var(--desc); transition: .35s;}
  .list-case .itm .info i{ font-size: 0.825rem; line-height: 1.5; font-style: normal; color: var(--info); transition: .35s;}
  .list-case .itm .info b{ font-size: .875rem; line-height: 1.5; color: var(--primary); text-align: right; text-transform: uppercase; padding-top: 1rem; transition: .35s;}
  .list-case .itm .info b:after{ content: '\e664'; font-family: 'neko'; font-size: 1rem; padding-left: 1rem; transition: .35s;}

  /* contact */
  .col-contact{ position: relative; z-index: 1; display: grid; grid-template-columns: 8fr 3fr 1fr; grid-gap: 0 2.5vw; width: 87.5vw; margin: -5vw auto 5vw;}
  .col-contact .map{ width: 100%; height: 100%; overflow: hidden;}
  .col-contact .list{ width: calc(100% + 2.5vw); margin-left: -2.5vw; background: white;}
  .col-contact .list .itm{ position: relative; display: grid; grid-template-columns: 2rem auto; grid-template-rows: 2rem auto; grid-gap: .5rem; padding: 3rem;}
  .col-contact .list .itm:not(:last-child):after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--border);}
  .col-contact .list .itm i{ font-size: 2rem; line-height: 1; color: var(--primary);}
  .col-contact .list .itm b{ grid-column: 2/3; font-size: 1.25rem; line-height: 1.5; color: var(--text);}
  .col-contact .list .itm span{ grid-column: 2/3; grid-row: 2/3; font-size: 1rem; line-height: 1.5; color: var(--info)}
  .col-contact .code{ display: flex; flex-flow: column nowrap; justify-content: space-around; width: calc(100% + 2.5vw); margin-left: -2.5vw; background: var(--primary);}
  .col-contact .code .itm{ display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; line-height: 1.5; color: #fff;}
  .col-contact .code .itm img{ width: 6rem; height: 6rem; object-fit: cover; background: white;}
  .col-contact .code .itm canvas{ width: 6rem !important; height: 6rem !important;}
  .col-contact .code .itm span{ padding-top: 0.5rem; font-size: 1rem;}
  .col-contact .code .itm i{ font-size: 0.625rem; font-style: normal;}
  .col-contact .code .itm b{ padding-top: 0.5rem; font-size: 1rem;}


  /* about */
  .col-about{ background: var(--gray);}
  .col-about .row .title{ position: relative; font-weight: bold; line-height: 1.25; text-transform: uppercase;}
  .col-about .row .title .en{ font-size: 3rem; color: var(--primary)}
  .col-about .row .title .en b{ color: var(--secondary);}
  .col-about .row .title .cn{ font-size: 2rem; color: var(--text);}
  .col-about .row .title a.more{ position: absolute; top: 0; right: 0; bottom: 0; height: 1.25rem; margin: auto; font-size: 1.25rem; line-height: 1; color: var(--primary);}
  .col-about .row .title a.more:after{ content: ' +';}

  .profile .row{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw;}
  .profile .row .title{ grid-column: 1/8;}
  .profile .row .content{ grid-column: 1/8;}
  .profile .row .content p{ font-size: 1rem; line-height: 2; text-align: justify;}
  .profile .row .number{ grid-column: 1/8; display: flex; justify-content: space-between; align-items: center; padding-top: 4rem;}
  .profile .row .number .itm{ display: flex; flex-flow: column nowrap;}
  .profile .row .number .itm .num{ display: flex; align-items: baseline;}
  .profile .row .number .itm .num b{ font-size: 3rem; line-height: 1; color: var(--primary);}
  .profile .row .number .itm .num i{ font-size: 1rem; line-height: 1; font-style: normal; padding-left: 0.5rem; color: var(--text);}
  .profile .row .number .itm span{ font-size: 1.25rem; line-height: 1.5; font-weight: bold; padding-top: 0.5rem; color: var(--text);}
  .profile .row .cover{ grid-column: 8/13; grid-row: 1/4;}
  .profile .row .cover video{ width: 100%; height: 100%;}
  .profile .row .cover img{ width: 100%; height: 100%; object-fit: cover;}

  .culture{ background: white;}
  .culture .row{ display: grid; grid-gap: 2.5vw;}
  .culture .row .content{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 2.5vw;}
  .culture .row .content .itm{ display: flex; flex-flow: column; gap: .5rem;}
  .culture .row .content .itm b{ font-size: 1.25rem; line-height: 1.5; font-weight: bold;}
  .culture .row .content .itm i{ width: 1.25rem; height: 2px; background: var(--primary);}
  .culture .row .content .itm span{ font-size: 1rem; line-height: 2; color: var(--info);}

  .style .row{ display: grid; grid-gap: 2.5vw;}
  .style .content{ width: 100%; overflow: hidden;}
  .style .content .list{ width: 100%; overflow: hidden;}
  .style .content .list .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100%/3*2);}
  .style .content .list .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}

  .organization{ background: white;}
  .organization .content img{ width: 100%; height: auto; object-fit: cover;}

  .honor .row{ display: grid; grid-gap: 2.5vw;}
  .honor .content{ width: 100%; overflow: hidden;}
  .honor .content .list{ width: 100%; overflow: hidden;}
  .honor .content .list .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100%/3*2);}
  .honor .content .list .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}

  /* article */
  .column-page{ display: grid; grid-gap: 2.5vw; width: 100%; padding: 5vw 6.25vw; background: var(--gray);}

  .location{ display: flex; justify-content: flex-end; align-items: center; width: 100%; padding:.75rem 1.875rem; background: white; font-size: 0.8125rem; line-height: 2; color: var(--info)}
  .location:before{ content: '当前位置：';}
  .location a:not(:last-child){ font-size: 0.8125rem; line-height: 2; color: var(--info)}
  .location a:not(:last-child):after{ content: '>'; padding: 0 .5em;}
  .location a:last-child{ color: var(--primary)}

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

  /* channel */
  .channel{ padding: 2rem; background: white;}
  .channel p{ font-size: 1.125rem; line-height: 2; text-align: justify;}
  .channel p:not(:last-child){ padding-bottom: 1.125rem;}
  .channel img{ max-width: 100%;}