@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{ position: relative;}
.wrapper section:not(.slideshow):not(.copyright){ position: relative; width: 100%; padding: 6.25vw; overflow: hidden;}

.inner{ position: relative; display: grid;}
.inner .inner-title{ display: flex; flex-flow: column nowrap; font-weight: bold;}
.inner .inner-title .en{ font-size: 2rem; line-height: 1.25; color: var(--primary); white-space: nowrap;}
.inner .inner-title .cn{ font-size: 1.5rem; line-height: 2; white-space: nowrap;}

.inner a.details{ display: flex; align-items: center; gap: .5rem; color: var(--primary);}
.inner a.details span{ font-size: 1rem; line-height: 1.25; font-weight: bold;}
.inner a.details i{ font-size: 1rem; line-height: 1;}

header{ position: fixed; z-index: 9; top: 0; right: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 2.5vw 5vw; transition: .35s;}
header .logo{ width: 28.75rem; height: 5rem;}
header .logo a{ display: block; width: 100%; height: 100%; -webkit-mask-position: left center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: auto 100%; background: white;}

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

nav .menu{ display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: 3rem; height: 3rem; cursor: pointer;}
nav .menu .ico{ position: relative; width: 2.25rem; height: 1.125rem;}
nav .menu .ico i{ position: absolute; width: 1.5rem; height: .125rem; border-radius: var(--rounded); background: var(--white);}
nav .menu .ico i:first-child{ top: 0; left: 0; transform: rotate(0); transition: top .1s, width .1s .1s, transform .3s .2s;}
nav .menu .ico i:last-child{ bottom: 0; left: 0; transform: rotate(0); transition: bottom .1s, width .1s .1s, transform .3s .2s;}
nav .menu .ico i:nth-child(2){ top: 0; bottom: 0; right: 0; margin: auto; background: var(--primary); transition: .3s;}

header.mini{ padding: 1.25vw 2.5vw; background: white; box-shadow: 0 0 1rem rgba(0, 0, 0, .05);}
header.mini .logo a{ background: var(--primary);}
header.mini nav a{ color: var(--text)!important;}
header.mini nav a.on:after{ background: var(--primary);}
header.mini nav .menu .ico i{ background: var(--text);}
header.mini nav .menu .ico i:nth-child(2){ background: var(--primary);}

header.open{ box-shadow: none; background: none;}
header.open .logo a{background: white;}
header.open nav a{ opacity: 0; pointer-events:none}
header.open nav .menu i{ width: 100%; background: white!important;}
header.open nav .menu i:first-child{ top: calc(50% - .0625rem); transform: rotate(40deg);}
header.open nav .menu i:last-child{ bottom: calc(50% - .0625rem); transform: rotate(-40deg);}
header.open nav .menu i:nth-child(2){ width: 0;}

header.close nav .menu i:first-child{ top: 0; width: 1.5rem; transform: rotate(0); transition: transform .3s, width .1s .3s, top .1s .4s;}
header.close nav .menu i:last-child{ bottom: 0; width: 1.5rem; transform: rotate(0); transition: transform .3s, width .1s .3s, bottom .1s .4s;}
header.close nav .menu i:nth-child(2){ width: 1.5rem; transition: .4s .3s;}

.container{ transition: .35s;}

section.slideshow{ width: 100vw; height: 100vh;}
section.slideshow:after{ content: 'scroll down'; position: absolute; right: calc(50% - .75rem); bottom: 5vw; z-index: 1; font-size: 0.75rem; line-height: 2; text-transform: uppercase; writing-mode: vertical-rl; color: white;}
section.slideshow .cover{ position: relative; z-index: 0; width: 100%; height: 100%; overflow: hidden;}
section.slideshow .cover img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: 3s;}
section.slideshow .font{ position: absolute; top: 37.5%; left: 6.25vw; z-index: 1; font-weight: bold; line-height: 1.5; text-transform: uppercase; text-shadow: 0.5rem 0.5rem 0.5rem rgb(0 0 0 / 30%);}
section.slideshow .font .cn{ font-size: 2.5rem; color: white;}
section.slideshow .font .en{ font-size: 1.25rem; color: rgba(255, 255, 255, .5);}
section.slideshow .font .learn{ display: flex; justify-content: center; align-items: center; gap: .5rem; width: 10.5rem; height: 2.5rem; border: 1px solid white; margin-top: 4rem; font-size: 1rem; line-height: 1; color: white; text-transform: none;}

section.slideshow .font .cn,
section.slideshow .font .en,
section.slideshow .font .learn{ transform: translateY(10rem); opacity: 0; transition: 2s 1s;}

section.slideshow .swiper-slide-active .cover img{ transform: scale(1);}
section.slideshow .swiper-slide-active .font .cn,
section.slideshow .swiper-slide-active .font .en,
section.slideshow .swiper-slide-active .font .learn{ transform: translateY(0); opacity: 1;}

section.slideshow .swiper-pagination{ position: absolute; z-index: 1; bottom: 5vw; left: 5vw; display: flex; align-items: center; width: auto; font-size: 2rem; font-weight: bold; line-height: 1; color: white;}
section.slideshow .swiper-pagination b{ font-size: 3rem; color: var(--primary);}
section.slideshow .swiper-pagination i{ width: 4rem; height: 2px; margin: 0 .5rem; background: white;}
section.slideshow .swiper-control{ position: absolute; top: 50%; right: 6.25vw; z-index: 1; display: flex; align-items: center; gap: .55rem;}
section.slideshow .swiper-control div{ display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem; color: white; opacity: 0.5; cursor: pointer;}
section.slideshow .swiper-control div i{ font-size: 1.5rem; line-height: 1;}
section.slideshow .swiper-control b{ width: 2px; height: 1rem; background: white; opacity: 0.1;}
section.slideshow .phone{ position: absolute; right: 5vw; bottom: 5vw; z-index: 1; display: flex; align-items: center; grid-gap: .5rem; font-size: 1rem; line-height: 1.25; font-weight: bold; color: white;}
section.slideshow .phone i{ font-size: 1.5rem; line-height: 1;}
section.slideshow .phone a{ color: white;}

section.service{ padding: 3.125vw 6.25vw!important; background: var(--gray);}
section.service .inner{ grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw;}
section.service .inner .inner-title{ grid-column: span 2;}
section.service .inner .inner-content{ grid-column: span 10; display: flex; justify-content: space-between;}
section.service .inner .inner-content .itm{ display: grid; grid-template-columns: 1fr auto; grid-gap: .5rem 1.5rem; line-height: 1.5; font-weight: bold; text-transform: uppercase;}
section.service .inner .inner-content .itm b{ grid-row: span 2; align-self: center; width: 4.5rem; font-size: 3rem; line-height: 1; text-align: right; color: var(--primary);}
section.service .inner .inner-content .itm span{ font-size: 1.25rem; align-self: end;}
section.service .inner .inner-content .itm i{ font-size: 0.75rem; font-style: normal; color: var(--desc);}

section.about:after{ content: ''; position: absolute; top: 0; left: 0; z-index: -1; width: 33.75vw; height: 100%; background: var(--gray);}
section.about .inner{ grid-template-columns: repeat(12,1fr); grid-template-rows: auto 1fr auto; grid-gap: 0 2.5vw;}
section.about .inner-title{ position: absolute; right: 0; grid-column: 11/13; align-items: end;}
section.about .inner-cover{ position: relative; grid-column: span 5; grid-row: span 3; width: 100%; overflow: hidden;}
section.about .inner-cover .cover{ position: relative; width: 100%; height: 0; padding-bottom: 100%;}
section.about .inner-cover .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
section.about .inner-cover .slogan{ position: absolute; top: 0; left: 0; z-index: 1; width: 4rem; height: 100%; padding: 4rem 0; font-size: 1rem; line-height: 2; writing-mode: vertical-rl; background: var(--gray);}
section.about .inner-content{ grid-column: 6/13; padding: 4rem 0;}
section.about .inner-content .caption{ line-height: 1.5; font-weight: bold;}
section.about .inner-content .caption .cn{ font-size: 1.25rem; color: var(--primary);}
section.about .inner-content .caption .en{ font-size: 0.75rem; color: var(--desc);}
section.about .inner-content .content{ font-size: 1rem; line-height: 2; color: var(--text); text-align: justify;}
section.about .inner-content .content p{ padding-top: 2rem; text-indent: 2em;}
section.about a.details{ grid-column: 6/8; height: 1.25rem;}
section.about .inner-number{ grid-column: 6/13; display: flex; justify-content: space-between; width: calc(100% + 8.75vw); padding: 2.5vw 6.25vw 2.5vw 2.5vw; margin-left: -2.5vw; background: var(--primary);}
section.about .inner-number .itm{ display: grid; grid-template-columns: 1fr auto; grid-gap: .5rem 1rem; align-items: center; color: white; line-height: 1.25;}
section.about .inner-number .itm b{ font-size: 2.5rem;}
section.about .inner-number .itm i{ font-size: 0.875rem; font-style: normal;}
section.about .inner-number .itm span{ grid-column: span 2; font-size: 1.125rem;}
section.about .inner-control{ position: absolute; bottom: 0; left: 0; z-index: 2; display: flex; width: 8rem; height: 4rem;}
section.about .inner-control div{ display: flex; justify-content: center; align-items: center; width: 4rem; height: 4rem; font-size: 1rem; line-height: 1; cursor: pointer;}
section.about .inner-control .prev{ background: white;}
section.about .inner-control .next{ background: var(--gray);}

section.case:after{ content: ''; position: absolute; top: 0; right: 0; z-index: -1; width: 66.25vw; height: 100%; background: var(--gray);}
section.case .inner{ grid-template-columns: repeat(12,1fr); grid-gap: 4rem 2.5vw;}
section.case .inner .inner-title{ grid-column: span 6;}
section.case .inner .details{ grid-column: 11/13; justify-self: end;}
section.case .inner .inner-content{ position: relative; z-index: 0; grid-column: span 12; width: calc(100% + 6.25vw); }
section.case .inner .inner-content:after{ content: ''; position: absolute; top: 0; left: -6.25vw; z-index: 1; width: 3.75vw; height: 100%; background: white;}
section.case .inner .inner-content .swiper-slide{ width: 22.5vw; padding-right: 2.5vw;}
section.case .inner .inner-content .itm{ display: flex; flex-flow: column nowrap; transition: .5s;}
section.case .inner .inner-content .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 3 * 2); overflow: hidden; background: linear-gradient(#FAFBFE,#F2F3F5);}
section.case .inner .inner-content .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
section.case .inner .inner-content .itm .info{ position: relative; display: flex; flex-flow: column nowrap; gap: 1rem; padding: 1.25vw; line-height: 2; overflow: hidden;}
section.case .inner .inner-content .itm .info:before{ content: ''; position: absolute; top: 0; right: 0; z-index: -1; width: 100%; height: calc(2.25rem + 2.5vw); background: white; transition: .5s;}
section.case .inner .inner-content .itm .info:after{ content: ''; position: absolute; bottom: 0; left: 0; z-index: 1; width: 0; height: 2px; background: var(--primary); transition: .5s;}
section.case .inner .inner-content .itm .info .tit{ font-size: 1.125rem; font-weight: bold;}
section.case .inner .inner-content .itm .info .line{ width: 1.125rem; height: 2px; background: var(--primary); opacity: 0; transition: .5s;}
section.case .inner .inner-content .itm .info .desc{ font-size: 0.875rem; opacity: 0; transition: .5s;}
section.case .inner .inner-content .itm .info .details{ font-size: 1rem; font-weight: bold; line-height: 1.25; color: var(--primary); margin-top: 1rem; opacity: 0; transition: .5s;}

section.case .inner .inner-content .swiper-slide-active .itm{ box-shadow: 0 0 1rem rgba(0, 0, 0, .05);}
section.case .inner .inner-content .swiper-slide-active .itm .info:before{ height: 100%; }
section.case .inner .inner-content .swiper-slide-active .itm .info:after{ width: 100%; transition: .5s .5s;}
section.case .inner .inner-content .swiper-slide-active .itm .info .line,
section.case .inner .inner-content .swiper-slide-active .itm .info .desc,
section.case .inner .inner-content .swiper-slide-active .itm .info .details{ opacity: 1;}

section.case .inner .inner-control{ position: absolute; bottom: 0; left: calc(27.5vw - 4rem); z-index: 2; display: flex; width: 8rem; height: 4rem;}
section.case .inner .inner-control div{ display: flex; justify-content: center; align-items: center; width: 4rem; height: 4rem; font-size: 1rem; line-height: 1; cursor: pointer;}
section.case .inner .inner-control .prev{ background: var(--gray);}
section.case .inner .inner-control .next{ background: white;}

section.case .inner .inner-pagination{ position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; display: flex; justify-content: center; align-items: center; gap: 11px; width: 50%; height: 4rem; margin: auto;}
section.case .inner .inner-pagination span{ width: 11px; height: 11px; border: 1px solid var(--primary); margin: 0; background: var(--primary); opacity: 1;}
section.case .inner .inner-pagination span.swiper-pagination-bullet-active{ background: none;}

section.news:after{ content: ''; position: absolute; top: 0; left: 0; z-index: -1; width: 33.75vw; height: 100%; background: var(--gray);}
section.news .inner{ grid-template-columns: repeat(12,1fr); grid-gap: 4rem 2.5vw;}
section.news .inner .inner-title{ grid-column: 7/9;}
section.news .inner .details{ grid-column: 11/13; justify-self: end;}
section.news .inner .inner-slide{ position: relative; z-index: 0; grid-column: span 6; grid-row: 1/3; width: 100%; overflow: hidden;}
section.news .inner .inner-slide .itm{ display: grid; height: 100%;}
section.news .inner .inner-slide .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9);}
section.news .inner .inner-slide .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
section.news .inner .inner-slide .itm .content{ align-self: end; display: grid; grid-template-columns: repeat(6,1fr); grid-gap: 2.5vw;}
section.news .inner .inner-slide .itm .content .date{ grid-column: span 1; display: flex; flex-flow: column nowrap; line-height: 1.5; font-weight: bold;}
section.news .inner .inner-slide .itm .content .date .md{ font-size: 1.5rem; color: var(--primary);}
section.news .inner .inner-slide .itm .content .date .y{ font-size: 0.875rem; color: var(--info)}
section.news .inner .inner-slide .itm .content .info{ grid-column: span 5; display: flex; flex-flow: column nowrap; gap: 1rem; line-height: 2;}
section.news .inner .inner-slide .itm .content .info .tit{ font-size: 1.125rem; font-weight: bold;}
section.news .inner .inner-slide .itm .content .info .line{ width: 1.125rem; height: 2px; background: var(--primary);}
section.news .inner .inner-slide .itm .content .info .desc{ font-size: 0.875rem;}
section.news .inner .inner-content{ grid-column: span 6; display: grid; grid-gap: 1.5rem;}
section.news .inner .inner-content i{ width: 100%; height: 1px; background: var(--border);}
section.news .inner .inner-content .itm{ display: grid; grid-template-columns: repeat(6,1fr); grid-gap: 2.5vw;}
section.news .inner .inner-content .itm .date{ grid-column: span 1; display: flex; flex-flow: column nowrap; line-height: 1.5; font-weight: bold;}
section.news .inner .inner-content .itm .date .md{ font-size: 1.5rem; color: var(--primary);}
section.news .inner .inner-content .itm .date .y{ font-size: 0.875rem; color: var(--info)}
section.news .inner .inner-content .itm .info{ grid-column: span 5; display: flex; flex-flow: column nowrap; gap: 1rem; line-height: 2;}
section.news .inner .inner-content .itm .info .tit{ font-size: 1.125rem; font-weight: bold;}
section.news .inner .inner-content .itm .info .line{ width: 1.125rem; height: 2px; background: var(--primary);}
section.news .inner .inner-content .itm .info .desc{ font-size: 0.875rem; height: 3.5rem;}

section.news .inner .inner-control{ position: absolute; bottom: 0; left: 0; z-index: 2; display: flex; width: 6rem; height: 3rem;}
section.news .inner .inner-control div{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; font-size: 1rem; line-height: 1; cursor: pointer;}
section.news .inner .inner-control .prev{ background: var(--primary);}
section.news .inner .inner-control .prev i{ color: white;}
section.news .inner .inner-control .next{ background: white;}

section.news .inner .inner-pagination{ position: absolute; right: 100%; top: calc(42.5vw / 16 * 9 + 1rem); z-index: 1; display: flex; justify-content: flex-end; align-items: center; gap: 11px; width: 42.5vw; height: 11px; }
section.news .inner .inner-pagination span{ width: 11px; height: 11px; border: 1px solid var(--primary); margin: 0; background: var(--primary); opacity: 1;}
section.news .inner .inner-pagination span.swiper-pagination-bullet-active{ background: none;}

section.billing{ background: url('../img/billing.webp') center center no-repeat; background-size: cover;}
section.billing .inner{ grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw;}
section.billing .inner .font{ grid-column: 8/13; display: flex; flex-flow: column nowrap; gap: 1rem; padding: 2.5rem; background: var(--primary);}
section.billing .inner .font .cn{ display: flex; flex-flow: column nowrap; font-weight: bold; line-height: 1.5; color: white;}
section.billing .inner .font .cn b{ font-size: 1.5rem;}
section.billing .inner .font .cn span{ font-size: 2rem;}
section.billing .inner .font .line{ width: 2rem; height: 2px; margin-bottom: 1rem; background: white;}
section.billing .inner .font .en{ font-size: 0.75rem; font-weight: bold; color: white; opacity: 0.2;}
section.billing .inner .font .learn{ position: absolute; top: 0; bottom: 0; right: 2.5rem; display: flex; justify-content: center; align-items: center; gap: .5rem; width: 10.5rem; height: 2.5rem; margin: auto; font-size: 1rem; line-height: 1; color: white; text-transform: none;}

section.product:before{ content: ''; position: absolute; top: 0; right: 0; z-index: -1; width: 66.25vw; height: 50%; background: var(--gray);}
section.product:after{ content: ''; position: absolute; bottom: 0; left: 0; z-index: -1; width: 33.75vw; height: 50%; background: var(--gray);}
section.product .inner{ grid-template-columns: repeat(12,1fr); grid-gap: 4rem 2.5vw;}
section.product .inner .inner-title{ grid-column: span 6;}
section.product .inner .details{ grid-column: 11/13; justify-self: end;}
section.product .inner .inner-cate{ grid-column: span 2; display: flex; flex-flow: column nowrap; align-items: flex-start; gap: .5rem;}
section.product .inner .inner-cate a{ position: relative; font-size: 1rem; font-weight: bold; line-height: 3; color: var(--info)}
section.product .inner .inner-cate a:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--primary);}
section.product .inner .inner-cate a.on{ color: var(--primary);}
section.product .inner .inner-cate a.on:after{ width: 100%;}
section.product .inner .inner-content{ grid-column: span 10; width: calc(100% + 6.25vw); overflow: hidden;}
section.product .inner .inner-content .swiper-slide{ width: 29vw; padding-right: 2.5vw;}
section.product .inner .inner-content .itm{ display: flex; flex-flow: column nowrap;}
section.product .inner .inner-content .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 4 * 3); overflow: hidden; background: var(--gray);}
section.product .inner .inner-content .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: contain;}
section.product .inner .inner-content .itm .info{ padding-top: 1rem; line-height: 2;}
section.product .inner .inner-content .itm .info .cate{ font-size: 0.875rem;}
section.product .inner .inner-content .itm .info .tit{ font-size: 1.125rem; font-weight: bold;}

section.product .inner .inner-control{ position: absolute; top: 1.25vw; left: calc(27.5vw - 4rem); z-index: 2; display: flex; width: 8rem; height: 4rem;}
section.product .inner .inner-control div{ display: flex; justify-content: center; align-items: center; width: 4rem; height: 4rem; font-size: 1rem; line-height: 1; cursor: pointer;}
section.product .inner .inner-control .prev{ background: var(--gray);}
section.product .inner .inner-control .next{ background: white;}

section.product .inner .inner-pagination{ position: absolute; bottom: 4.75rem; left: 0; font-size: 2rem; line-height: 1; font-weight: bold; width: 12.5vw;}
section.product .inner .inner-pagination b{ color: var(--primary)}

section.link{ background: var(--gray);}
section.link .inner{ grid-gap: 4rem 2.5vw;}
section.link .inner .inner-content{ display: grid; grid-template-columns: repeat(6,1fr); grid-gap: 2.5vw;}
section.link .inner .inner-content a{ display: flex; justify-content: center; align-items: center; width: 100%; height: 4rem; background: linear-gradient(#fff,#fff); font-size: 1rem; line-height: 1.5; font-weight: 700;}

section.contact{ background: var(--dark);}
section.contact .inner{ grid-template-columns: repeat(12,1fr); grid-template-rows: auto 1fr; grid-gap: 2rem 2.5vw;}
section.contact .inner .inner-title{ grid-column: 1/3;}
section.contact .inner .inner-title .en{ color: white;}
section.contact .inner .inner-title .cn{ color: white;}
section.contact .inner .details{align-items: start; grid-column: 1/3; color: white;}
section.contact .inner .inner-content{ grid-column: 3/13; grid-row: 1/3; display: grid; grid-template-columns: repeat(10,1fr); grid-auto-flow: column; grid-gap: 2rem 2.5vw;}
section.contact .inner .inner-content .map{ grid-column: 1/3; grid-row: 1/4; display: flex; width: calc(100% + 2.5vw); margin-left: -2.5vw;}
section.contact .inner .inner-content .map img{ width: calc(100% - 3rem); height: 100%; object-fit: cover;}
section.contact .inner .inner-content .map a{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 100%; background: var(--primary);}
section.contact .inner .inner-content .map a b{ font-size: 1rem; line-height: 2; writing-mode: vertical-rl; color: white;}
section.contact .inner .inner-content .itm{ grid-column: span 2; display: grid; grid-gap: 0.5rem; font-weight: bold;}
section.contact .inner .inner-content .itm.address{ grid-column: span 8;}
section.contact .inner .inner-content .itm.qrcode{ grid-column: span 1; grid-row: 2/4;}
section.contact .inner .inner-content .itm.qrcode b{text-align: center;}
section.contact .inner .inner-content .itm.quick{ display: flex; align-items: flex-end; font-weight: normal; gap: 2rem;}
section.contact .inner .inner-content .itm.quick a{ display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem;}
section.contact .inner .inner-content .itm.quick a i{ font-size: 2rem; line-height: 1; color: white;}
section.contact .inner .inner-content .itm b{ font-size: 1rem; line-height: 2; color: white;}
section.contact .inner .inner-content .itm span{ font-size: 1rem; line-height: 1.25; color: var(--desc);}
section.contact .inner .inner-content .itm .cover{ position: relative; align-self: end; width: 100%; height: 0; padding-bottom: 100%;}
section.contact .inner .inner-content .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
section.contact .inner .inner-content .name{ position: absolute; top: 0; right: 0; line-height: 1.5; font-weight: bold; text-align: right;}
section.contact .inner .inner-content .name .cn{ font-size: 1.5rem; color: white;}
section.contact .inner .inner-content .name .en{ font-size: 0.875rem; color: white; opacity: 0.5;}

section.copyright{ width: 100%; padding: 1.5rem 6.25vw; font-size: 0.875rem; line-height: 1.5; color: white; background: var(--black);}
section.copyright:after{ content: '百航科技 - 专业网络品牌设计'; float: right;}
section.copyright a{ color: white;}

footer{ transition: .35s;}

.menubox{ position: fixed; top: 0; right: 0; z-index: 8; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background: rgba(14,35,92,.95); transform: scale(1.1); opacity: 0; visibility: hidden; transition: .5s;}
.menubox .grid{ display: grid; grid-auto-flow: column; grid-gap: 5vw; width: 80vw;}
.menubox .grid .navigation{ position: relative; display: grid; grid-gap: 2rem;}
.menubox .grid .navigation:before{ content: 'Navigation'; font-size: 2rem; line-height: 1; text-transform: uppercase; font-weight: bold; color: white;}
.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>a{ font-size: 1rem; color: white; white-space: nowrap;}
.menubox .grid .navigation ul li .sub{ display: grid; grid-auto-flow: column; grid-gap: 1.5rem; 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:before{ content: 'Contact Us'; font-size: 2rem; line-height: 1; text-transform: uppercase; font-weight: bold; color: white;}
.menubox .grid .contact .itm{ display: grid; grid-gap: 0.5rem; line-height: 1.5;}
.menubox .grid .contact .itm b{ font-size: 1rem; color: var(--primary);}
.menubox .grid .contact .itm span{ display: flex; align-items: center; gap: .5rem; font-size: 1.25rem; color: white; white-space: nowrap;}
.menubox .grid .contact .itm span i{ font-size: 1.5rem;}
.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;}

/* subpage */
.banner{ position: relative; width: 100%; height: 25vw;}
.banner.mini{ height: calc(4rem + 5vw); background: var(--dark);}
.banner .inner{ position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: calc(4rem + 7.5vw) 6.25vw 0;}
.banner .inner .slogan{ font-size: 2rem; line-height: 1.5; font-weight: bold; color: white;}
.banner .inner .catename{ display: flex; flex-flow: column nowrap; align-items: flex-end; font-weight: bold; color: white;}
.banner .inner .catename .en{ font-size: 2rem; line-height: 1.25;}
.banner .inner .catename .cn{ font-size: 1.5rem; line-height: 2;}
.banner .inner .catename .strip{ width: 1.5rem; height: 2px; margin-top: 1rem; background: white;}
.banner img{ position: absolute; top: 0; right: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;}

.column{ display: grid; grid-gap: 2.5vw; width: 100%; padding: 2.5vw 6.25vw 6.25vw;}
.column .line{ width: 100%; height: 1px; background: var(--border);}

.location{ position: relative; display: flex; justify-content: space-between; align-items: center;}
.location .bread{ display: flex; align-items: center; font-size: 0.875rem; line-height: 2;}
.location .bread i{ font-size: 1rem; line-height: 1; color: var(--primary);}
.location .bread span{ padding: 0 .5rem;}
.location .bread span:after{ content: ':';}
.location .bread a{ color: var(--text);}
.location .bread a:after{ content: '>'; padding: 0 .5rem;}
.location .bread b{ font-weight: normal;}

.location .category{ position: absolute; right: 0; display: grid; grid-auto-flow: column; grid-gap: 4rem;}
.location .category a{ position: relative; font-size: 1rem; line-height: 3; font-weight: bold;}
.location .category a.on{ color: var(--primary);}
.location .category a.on:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--primary);}

.article{ display: grid; grid-gap: 2.5vw;}
.article .article-title{ display: grid; grid-gap: 1rem; line-height: 1.5;}
.article .article-title .title{ font-size: 1.5rem; font-weight: bold; color: var(--text);}
.article .article-title .info{ justify-self: start; display: grid; grid-auto-flow: column; grid-gap: 2rem; font-size: 0.875rem; color: var(--info); text-transform: uppercase;}
.article .article-title .desc{ position: relative; padding: 1.5rem; margin-top: 1rem; font-size: 0.875rem; color: var(--desc); background: var(--gray);}
.article .article-title .desc:after{ content: 'description'; position: absolute; top: 0; bottom: 0; right: 0; height: 3rem; margin: auto; font-size: 3rem; line-height: 1; font-weight: bold; text-transform: uppercase; color: var(--border);}

.article .article-content p{ font-size: 1rem; line-height: 2; text-align: justify;}
.article .article-content p:not(:last-child){ margin-bottom: 2rem;}
.article .article-content img{ max-width: 100%;}

.goods{ display: grid; grid-template-columns: repeat(12,1fr); align-items: start; grid-gap: 2.5vw;}
.goods .goods-cover{ grid-column: span 4; position: relative; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden;}
.goods .goods-cover .thumbnail{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; overflow: hidden;}
.goods .goods-cover .thumbnail .swiper-slide{ background: var(--gray);}
.goods .goods-cover .thumbnail .swiper-slide img{ width: 100%; height: 100%; object-fit: contain;}
.goods .goods-info{ grid-column: span 8; display: grid; grid-gap: 2.5vw;}
.goods .goods-info .title{ display: grid; grid-gap: 1rem; line-height: 1.5;}
.goods .goods-info .title .caption{ font-size: 1.5rem;}
.goods .goods-info .title .cate{ font-size: .875rem; text-transform: uppercase;}
.goods .goods-info .content p{ font-size: 1rem; line-height: 2; text-align: justify;}
.goods .goods-info .content p:not(:last-child){ margin-bottom: 2rem;}
.goods .goods-info .content img{ max-width: 100%;}

.goods .goods-info .arrow{ display: flex; justify-content: flex-end; align-items: center; width: 100%;}
.goods .goods-info .arrow a{ display: grid; grid-auto-flow: column; align-items: center; grid-gap: 1rem; font-size: 1rem; line-height: 2; color: var(--text);}
.goods .goods-info .arrow a:after{ content: '\e62d'; font-family: 'neko'; color: var(--desc);}
.goods .goods-info .arrow a i{ width: 1px; height: 1rem; background: var(--border);}

.column .artarrow{ display: flex; justify-content: space-between; align-items: center; width: 100%;}
.column .artarrow a{ display: grid; grid-auto-flow: column; align-items: center; grid-gap: 1rem; font-size: 1rem; line-height: 2; color: var(--text);}
.column .artarrow a.prev:before{ content: '\e62c'; font-family: 'neko'; color: var(--desc);}
.column .artarrow a.next:after{ content: '\e62d'; font-family: 'neko'; color: var(--desc);}
.column .artarrow a i{ width: 1px; height: 1rem; background: var(--border);}

.list-news{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 2.5vw;}
.list-news .itm{ display: grid; grid-auto-flow: column; grid-gap: 1rem; padding: 1.5rem; background: var(--gray);}
.list-news .itm .date{ line-height: 1.5; font-weight: bold;}
.list-news .itm .date .md{ font-size: 1.5rem; color: var(--primary); white-space: nowrap;}
.list-news .itm .date .y{ font-size: 0.875rem; color: var(--info);}
.list-news .itm .info{ display: grid; grid-gap: 1.5rem;}
.list-news .itm .info .tit{ font-size: 1.125rem; line-height: 2; font-weight: bold; color: var(--text);}
.list-news .itm .info .strip{ width: 1.125rem; height: 2px; background: var(--primary);}
.list-news .itm .info .desc{ font-size: 0.875rem; line-height: 2; color: var(--desc);}

.list-recruit{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 2.5vw;}
.list-recruit .itm{ display: grid; grid-auto-flow: column; grid-gap: 1rem; align-items: start; padding: 1.5rem; background: var(--gray);}
.list-recruit .itm .info{ position: relative; display: grid; grid-gap: 1.5rem;}
.list-recruit .itm .info:after{ content: attr(data-num); position: absolute; top: 0; right: 0; font-size: 1.5rem; font-weight: bold; line-height: 1.5; color: var(--primary);}
.list-recruit .itm .info .tit{ font-size: 1.25rem; line-height: 2; font-weight: bold; color: var(--text);}
.list-recruit .itm .info .strip{ width: 1.25rem; height: 2px; background: var(--primary);}
.list-recruit .itm .info .con{ font-size: 1rem; line-height: 2; color: var(--text);}
.list-recruit .itm .info .con br{ display: none;}
.list-recruit .itm .info .con p:not(:first-child){ margin-top: 0.5em;}

.list-product{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 2.5vw;}
.list-product .itm{ display: grid; grid-gap: 1.5rem;}
.list-product .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 4 * 3); background: var(--gray);}
.list-product .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: contain;}
.list-product .itm .info{ display: flex; justify-content: space-between; align-items: center; line-height: 1.5;}
.list-product .itm .info .tit{ font-size: 1.125rem; font-weight: bold; color: var(--text);}
.list-product .itm .info .cate{ font-size: .875rem; color: var(--desc);}
.list-product .itm .strip{ width: 100%; height: 1px; background: var(--border);}

.list-case{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 2.5vw;}
.list-case .itm{ position: relative; display: grid;}
.list-case .itm:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--primary);}
.list-case .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100%/3*2); background: var(--gray);}
.list-case .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.list-case .itm .info{ display: grid; grid-gap: 1rem; padding: 1.5rem; line-height: 2; background: var(--gray);}
.list-case .itm .info .tit{ font-size: 1.125rem; font-weight: bold; color: var(--text);}
.list-case .itm .info .strip{ width: 1.125rem; height: 2px; background: var(--primary);}
.list-case .itm .info .desc{ font-size: .875rem; color: var(--desc);}
.list-case .itm .info .details{ margin-top: 1rem; font-size: 1rem; line-height: 1.25; font-weight: bold; color: var(--primary);}

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

.column-contact{ position: relative; z-index: 2; display: grid; grid-gap: 2.5vw; width: 100%; padding: 0 6.25vw 6.25vw; margin-top: -6.25vw;}

#map{ width: 100%; height: 25vw; background: var(--gray);}

.list-contact{ display: grid; grid-auto-flow: column; grid-template-rows: repeat(2,1fr); grid-gap: 2rem;}
.list-contact .name{ display: grid; line-height: 1.5; font-weight: bold;}
.list-contact .name .cn{ font-size: 1.5rem; color: var(--primary);}
.list-contact .name .en{ font-size: 0.875rem; color: var(--desc);}
.list-contact .itm{ display: grid; grid-gap: .5rem; font-size: 1rem; font-weight: bold;}
.list-contact .itm b{ line-height: 2; color: var(--primary);}
.list-contact .itm span{ line-height: 1.25; color: var(--desc);}
.list-contact .quick{ display: grid; grid-auto-flow: column; justify-self: start; align-self: end; grid-gap: 2rem;}
.list-contact .quick a{ display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem;}
.list-contact .quick a i{ font-size: 2rem; line-height: 2;}
.list-contact .qrcode{ justify-self: end; grid-row: span 2; grid-gap: 1.5rem; display: grid;}
.list-contact .qrcode b{ font-size: 1rem; line-height: 2; color: var(--primary);text-align: center;}
.list-contact .qrcode img{ width: 6rem; height: 6rem;}

.aboutbox{ position: relative; display: grid; grid-gap: 6.25vw;}
.aboutbox:before{ content: '2022'; position: absolute; top: -6.25vw; left: -6.25vw; z-index: -1; font-size: 16rem; line-height: 1; font-weight: bold;  writing-mode: vertical-rl; color: var(--gray);}
.aboutbox .info{ display: grid; grid-gap: 2rem;}
.aboutbox .info .title{ line-height: 1.5; font-weight: bold;}
.aboutbox .info .title .cn{ font-size: 1.5rem; color: var(--primary);}
.aboutbox .info .title .en{ font-size: 0.875rem; color: var(--desc)}
.aboutbox .info .skrip{ width: 1.5rem; height: 2px; background: var(--primary);}
.aboutbox .info .content p{ font-size: 1rem; line-height: 2; text-align: justify; text-indent: 2em;}
.aboutbox .info .content p:not(:last-child){ margin-bottom: 2rem;}
.aboutbox .number{ display: flex; justify-content: space-between; align-items: center;}
.aboutbox .number .itm{ display: grid; grid-template-columns: 1fr auto; grid-gap: .5rem 1rem; align-items: center; line-height: 1.25;}
.aboutbox .number .itm b{ font-size: 2.5rem; color: var(--primary);}
.aboutbox .number .itm i{ font-size: 0.875rem; font-style: normal;}
.aboutbox .number .itm span{ grid-column: span 2; font-size: 1.125rem; font-weight: bold;}
.aboutbox .cover{ width: 100%; height: 25vw;}
.aboutbox .cover img{ width: 100%; height: 100%; object-fit: cover;}

.about-grid{ display: grid; grid-template-columns: repeat(2,1fr); width: 100vw; margin: 3.75vw -6.25vw 0; overflow: hidden;}
.about-grid .grid{ display: grid; grid-gap: 4rem; grid-template-rows: auto 1fr; width: 100%; padding: 6.25vw; overflow: hidden;}
.about-grid .grid .title{ position: relative; display: flex; flex-flow: column nowrap; font-weight: bold;}
.about-grid .grid .title .en{ font-size: 2rem; line-height: 1.25; color: var(--primary); white-space: nowrap;}
.about-grid .grid .title .cn{ font-size: 1.5rem; line-height: 2; white-space: nowrap;}
.about-grid .grid .title a.details{ position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .5rem; color: var(--primary);}
.about-grid .grid .title a.details span{ font-size: 1rem; line-height: 1.25; font-weight: bold;}
.about-grid .grid .title a.details i{ font-size: 1rem; line-height: 1;}

.about-grid .grid.speech{ background: url('../img/slo.webp') right 1.5rem top 1.5rem no-repeat var(--primary); background-size: 30vw auto;}
.about-grid .grid.speech .title .en,
.about-grid .grid.speech .title .cn{ color: white;}
.about-grid .grid.speech .content{ font-size: 1rem; line-height: 2; color: white;}
.about-grid .grid.speech .content P{ text-indent: 2em;}
.about-grid .grid.speech .content P:not(:first-child){ margin-top: 2em;}

.about-grid .grid.culture{align-items: start;}
.about-grid .grid.culture .content{ display: grid; grid-gap: 2.5vw; align-items: start;}
.about-grid .grid.culture .content .itm{ display: grid; line-height: 1.5;}
.about-grid .grid.culture .content .itm .cn{ font-size: 1.25rem; font-weight: bold; color: var(--text);}
.about-grid .grid.culture .content .itm .en{ font-size: .75rem; color: var(--primary);}
.about-grid .grid.culture .content .itm .con{ margin-top: 0.5rem; font-size: 1rem; line-height: 2;}

.about-grid .grid.honor{ grid-column: span 2; position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; background: url('../img/honor.webp') right top no-repeat; background-size: 50vw auto;}
.about-grid .grid.honor:after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: linear-gradient( 27deg, white, #CAD8FF);}
.about-grid .grid.honor .title{ grid-column: span 8;}
.about-grid .grid.honor .content{ grid-column: span 6;}
.about-grid .grid.honor .content.honor{ grid-column: span 8; display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 2.5vw;}
.about-grid .grid.honor .content .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 80 * 113);}
.about-grid .grid.honor .content .itm .cover img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.about-grid .grid.honor .content p{ font-size: 1rem; line-height: 2; text-indent: 2em;}
.about-grid .grid.honor .content p:not(:first-child){ margin-top: 2em;}
.about-grid .grid.honor .more{ grid-column: span 8;}
.about-grid .grid.honor .more a.details{ display: flex; justify-content: center; align-items: center; gap: .5rem; width: 10rem; height: 3rem; color: white; background: var(--primary);}
.about-grid .grid.honor .more a.details span{ font-size: 1rem; line-height: 1.25; font-weight: bold;}
.about-grid .grid.honor .more a.details i{ font-size: 1rem; line-height: 1;}

.about-grid .grid.advan{ grid-column: span 2; display: grid; padding-bottom: 0;}
.about-grid .grid.advan .content{ display: grid; grid-gap: 2.5vw;}
.about-grid .grid.advan .content .itm{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw;}
.about-grid .grid.advan .content .itm .info{ grid-column: span 7; display: grid; grid-gap: 1rem; align-self: start;}
.about-grid .grid.advan .content .itm .info .tit{ font-size: 1.25rem; font-weight: bold; color: var(--text);}
.about-grid .grid.advan .content .itm .info .strip{ width: 1.25rem; height: 2px; background: var(--primary);}
.about-grid .grid.advan .content .itm .info .con{ font-size: 1rem; line-height: 2;}

.about-grid .grid.advan .content .itm .cover{ grid-column: span 5; position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 3);}
.about-grid .grid.advan .content .itm .cover img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.login-view{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; align-items: center; padding: 0 6.25vw; width: 100vw; height: 100vh; background: url('../img/login-bg.webp') center center no-repeat var(--dark); background-size: cover;}

.login-form{ grid-column: 5 / 9; position: relative; display: grid; grid-gap: 1.5rem; padding: 5vw;}
.login-form:after{ content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; border-radius: 1rem; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px);}
.login-form *{ position: relative; z-index: 1;}
.login-form .caption{ display: grid; line-height: 1.5; font-weight: 600; color: white;}
.login-form .caption .en{ font-size: 2rem;}
.login-form .caption .cn{ font-size: 2rem; text-align: right;}
.login-form .caption .slogan{ grid-column: span 2; font-size: 0.875rem; line-height: 2; font-weight: normal;}
.login-form label{ position: relative; display: grid; grid-gap: 1.5rem;}
.login-form label.half{ grid-template-columns: 2fr 1fr;}
.login-form label.half img{ width: 100%; height: 2.5rem; border-radius: var(--rounded); object-fit: cover;}
.login-form label span{ position: absolute; z-index: 1; display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; font-size: 1.25rem; line-height: 1; font-family: 'neko'; color: var(--dark);}
.login-form label input{ position: relative; z-index: 0; display: flex; align-items: center; width: 100%; height: 2.5rem; border-radius: var(--rounded); border: none; background: white; font-size: 0.875rem; line-height: 1.25; text-indent: 2.5rem; color: var(--info);}
.login-form label button{ display: flex; justify-content: center; align-items: center; width: 100%; height: 3rem; border: none; margin-top: 1rem; background: var(--primary); font-size: 1rem; line-height: 2; color: white; cursor: pointer;}

.login-view~footer{ position: absolute; bottom: 0; left: 0; width: 100%;}
.login-view~footer section.copyright{ background: none;}

.user-info{ display: grid; grid-gap: 1.25vw;}
.user-info .caption{ font-size: 1.5rem; font-weight: bold; color: var(--primary);}
.user-info .content{ display: flex; justify-content: space-between; align-items: center;}
.user-info .content .info{ font-size: 1rem; line-height: 1.5; font-weight: bold;}
.user-info .content .info i{ font-size: 1.25rem; color: var(--primary);}
.user-info .content .control{ display: grid; grid-auto-flow: column; grid-gap: 1rem; align-items: center;}
.user-info .content .control a{ padding: .25rem 1.25rem; font-size: .875rem; line-height: 2; color: white; background: var(--dark);}

.download-list{ display: grid; grid-gap: 1.25vw;}
.download-list .caption{ font-size: 1.5rem; font-weight: bold; color: var(--primary);}
.download-list .content{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 2.5vw;}
.download-list .content .itm{ display: grid; grid-template-columns: 1fr auto; grid-gap: 1rem; padding: 1.5rem; line-height: 1.5; background: var(--gray);}
.download-list .content .itm .tit{ font-size: 1rem; font-weight: bold;}
.download-list .content .itm .date{ font-size: 0.875rem; color: var(--desc);}
.download-list .content .itm .btn{ grid-column: 2/3; grid-row: 1/3; display: grid; justify-items: center; cursor: pointer;}
.download-list .content .itm .btn i{ font-size: 2.5rem; line-height: 1; color: var(--primary);}
.download-list .content .itm .btn a{ font-size: .75rem; color: var(--primary);}

.modify-box{ display: grid; grid-gap: 1.25vw;}
.modify-box .caption{ font-size: 1.5rem; font-weight: bold; color: var(--primary);}
.modify-box .content{ display: flex; gap: 1rem;}
.modify-box .content input{ width: 15rem; padding: .5rem 1rem; border: 1px solid var(--border); background: var(--border); border-radius: 0; font-size: 1rem; line-height: 1.5; }
.modify-box .content button,
.modify-box .content a{ padding: 0 1rem; border-radius: 0; font-size: 1rem; line-height: 2.5; color: white; background: var(--dark); cursor: pointer;}
.modify-box .content a{ background: var(--desc);}