@charset "utf-8";
.wrapper{ position: relative; width: 100%;}

.wrapper-title{ position: relative; height: 20vw; background: url('../img/footer-r.webp') center top no-repeat var(--primary);}
.wrapper-title .thumb{ position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%;}
.wrapper-title .slogan{ display: flex; flex-flow: column wrap; justify-content: center; align-items: center; width: 100%; height: 100%; color: var(--light);}
.wrapper-title .slogan .cn{ font-size: 2.5rem; font-weight: 700;letter-spacing: .5em;}
.wrapper-title .slogan .en{ font-size: .75rem; letter-spacing: .5em;}
.wrapper-title .title{ position: absolute; z-index: 1; right: 0; bottom: 0; width: 100%; padding: 2.5vw 6.25vw; text-align: right; color: var(--light); font-weight: 700;}
.wrapper-title .title .cn{ font-size: 2rem;}
.wrapper-title .title .en{ font-size: 1.5rem;}

.wrapper-location{ display: flex; padding: 1.25vw 6.25vw; background: #fff;}
.wrapper-location:before{ content: '当前位置：';}
.wrapper-location a{ font-size: 1rem; color:var(--dark)}
.wrapper-location a:after{ content: '>'; padding: 0.5em}
.wrapper-location a:last-child:after{ display: none;}

.wrapper-content{ display: grid; grid-gap: 2.5vw; padding: 2.5vw 6.25vw;}

/* news */
.topic-news{ width: 100%; overflow: hidden;}
.topic-news .list{ width: 100%;}
.topic-news .list .itm{ position: relative; display: grid; grid-template-columns: repeat(2,1fr);}
.topic-news .list .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 50%; background-position: center center; background-repeat: no-repeat; background-size: cover; transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1);}
.topic-news .list .itm .thumb:after{ content: ''; position: absolute; z-index: 0; top: 0; right: 0; display: block; width: 0; height: 100%; background: var(--primary); opacity: .5; transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1);}
.topic-news .list .itm .info{ position: relative; display: grid; align-content: start; grid-gap: 1.5rem; padding: 3rem 3.5rem; background: #fff;}
.topic-news .list .itm .info:after{ content: ''; position: absolute; z-index: 0; top: 0; left: 0; display: block; width: 0; height: 100%; background: var(--primary); transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1);}
.topic-news .list .itm .info .date{ font-size: 1.5rem; line-height: 1.5; font-weight: 700; color: var(--secondary);}
.topic-news .list .itm .info .title{ font-size: 1.75rem; line-height: 1.5; font-weight: 700; color: var(--primary); display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; word-break:break-word; overflow: hidden;}
.topic-news .list .itm .info .desc{ font-size: 1rem; line-height: 1.5; color: #666; display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient:vertical; word-break:break-word; overflow: hidden;}
.topic-news .list .itm .info .detail{ position: absolute; bottom: 3rem; left: 3.5rem; font-size: 1.125rem; line-height: 1.5; color: var(--primary); transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1);}
.topic-news .list .itm .info .date,
.topic-news .list .itm .info .title,
.topic-news .list .itm .info .desc{ position: relative; z-index: 1; transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1);}

.topic-news .list .slick-arrow{ position: absolute; z-index: 2; bottom: 0; display: flex! important; justify-content: center; align-items: center; width: 3rem; height: 100%; font-size: 1.5rem; line-height: 1; font-family: 'lqsp'; cursor: pointer; transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1);}
.topic-news .list .slick-prev{ left: 50%;}
.topic-news .list .slick-prev:after{ content: '\e60d'; color: #fff;}
.topic-news .list .slick-next{ right: 0;}
.topic-news .list .slick-next:after{ content: '\e60f'; color: #fff;}

.list-news{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 2.5vw; width: 100%;}
.list-news .itm{ overflow: hidden;}
.list-news .itm .info{ display: grid; grid-gap: 2rem; justify-items: start; padding: 2rem; background: #fff; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.list-news .itm .info .date{ font-size: 1rem; line-height: 1.5; color: #999;}
.list-news .itm .info .title{ font-size: 1.5rem; line-height: 1.5; font-weight: 700; color: var(--primary); display:-webkit-box; -webkit-line-clamp: 1; -webkit-box-orient:vertical; word-break:break-word; overflow: hidden;}
.list-news .itm .info .desc{ font-size: 1rem; line-height: 1.5; color: #666; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; word-break:break-word; overflow: hidden;}
.list-news .itm .info .detail{ font-size: 1rem; line-height: 1.5; color: var(--primary);}
.list-news .itm .info.hover{ position: absolute; background: var(--primary);}
.list-news .itm .info.hover .date{ color: var(--light)}
.list-news .itm .info.hover .title{ color: var(--light)}
.list-news .itm .info.hover .desc{ color: var(--light)}
.list-news .itm .info.hover .detail{ color: var(--light)}
.list-news .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 50%; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-size: cover; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1)}
.list-news .itm .thumb:before{ content: ''; position: absolute; z-index: 1; top: 0; left: 3rem; display: block; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent;  border-top: 12px solid #fff; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.list-news .itm .thumb:after{ content: ''; position: absolute; z-index: 1; bottom: 0; right: 3rem; display: block; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent;  border-bottom: 12px solid var(--primary); opacity: 0; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}

.list-news .button{ position: relative; display: flex; flex-flow: column nowrap; width: 100%; height: 100%; font-size: 2rem; line-height: 2;text-align: center; text-transform: uppercase; overflow: auto; background: #fff;}
.list-news .button .ico{ position: relative; z-index: 1; transform: scale(0); height: 0; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.list-news .button .ico i{ font-size: 5vw; line-height: 1; color: var(--light); transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.list-news .button .cn{ position: relative; z-index: 1; font-weight: 700; color: var(--secondary)}
.list-news .button .en{ position: relative; z-index: 1; font-size: 1rem; color: var(--tertiary);}

.list-news .button .next,
.list-news .button .prev{ position: relative; display: flex; flex-flow: column wrap; justify-content: center; align-items: center; width: 100%; height: 50%; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1); overflow: hidden;}
.list-news .button .next:after,
.list-news .button .prev:after{ content: ''; position: absolute; z-index: 0; top: 0; right: 0; left: 0; display: flex; justify-content: center; align-items: flex-start; width: 1px; height: 20%; margin: auto; background: var(--tertiary); transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.list-news .button .next:after{ top: auto; bottom: 0;}


/* album */
.list-album{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 2.5vw;}
.list-album .itm{ position: relative; overflow: hidden;}
.list-album .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 75%; overflow: hidden;}
.list-album .itm .thumb .img{position: absolute!important; top: 0; right: 0; width: 100%; height: 100%; transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1);}
.list-album .itm .info{ position: relative; display: grid; grid-template-rows: repeat(2,1fr); padding: 1vw 1.25vw; background: #fff; transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1)}
.list-album .itm .info .cn{ display: flex; justify-content: center; align-items: center; font-size: 1.25rem; line-height: 1.5; color: var(--primary); transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1)}
.list-album .itm .info .cate{ display: flex; justify-content: center; align-items: center; font-size:0.75rem; color: var(--tertiary); line-height: 1; transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1)}


/* products */
.products-content{ padding: 5vw 6.25vw; display: grid; grid-gap: 5vw;}

.products-column{ display: grid; grid-template-columns: repeat(12,1fr); grid-template-areas: 'a b c d e f g h i j k l'; grid-gap: 2.5vw; align-items: start; width: 100%;}
.products-column .title{ grid-area: a / a / a / b; position: relative; display: grid; grid-gap: 1.25vw; height: 0; padding: 2rem 2rem calc(((150% + 1.25vw) * 0.75) + 10vw - 2rem ); line-height: 1.5; color: var(--light); font-weight: 700; background: var(--primary);}
.products-column .title .cn{ font-size: 2rem;}
.products-column .title .en{ font-size: 1rem; word-break: keep-all;}
.products-column .title .ico{ position: absolute; z-index: 0; bottom: 2rem; left: 2rem; font-weight: 300;}
.products-column .title .ico i{ font-size: 6rem; line-height: 1;}

.products-column .content{ grid-area: a / c / a / l; display: grid; grid-template-columns: repeat(10,1fr); grid-template-areas: 'a b c d e f g h i j' 'k l m n o p q r s t'; grid-column-gap: 2.5vw;}

.products-column .content .category{ grid-column: span 9; display: flex; height: 10vw; justify-content: flex-end; align-items: center;}
.products-column .content .category a{ margin-left: 4em; border-bottom: 1px solid transparent; font-size: 1.125rem; font-weight: 300; line-height: 2; color: var(--primary); transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1)}

.products-column .content .list{ grid-column: span 9; display: grid; grid-template-columns: repeat(9,1fr); grid-gap: 2.5vw;}
.products-column .content .itm{ grid-column: span 3;}
.products-column .content .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden;}
.products-column .content .itm .thumb:after{ content: ''; position: absolute; z-index: -1; top: 0; right: 0; width: 100%; height: 75%; background: #F3F5F5; transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1)}
.products-column .content .itm .thumb img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; max-width: 75%; max-height: 75%; margin: auto; transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1)}
.products-column .content .itm .info{ position: relative; display: grid; grid-gap: 1rem; padding: 1rem 0; text-align: center; font-weight: 700; line-height: 1.5; color: var(--primary); transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1)}
.products-column .content .itm .info:after{ content: ''; position: absolute; z-index: 0; bottom: 0; right: 0; width: 100%; height: 0; background: var(--secondary); transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1)}
.products-column .content .itm .info .tit{ position: relative; z-index: 1; font-size: 1.125rem;}
.products-column .content .itm .info .line{ position: relative; z-index: 1; width: 2rem; height: 1px; margin: auto; background: #d8d8d8; transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1)}
.products-column .content .itm .info .price{ position: relative; z-index: 1; font-size: 1rem;}
.products-column .content .itm .info .price:before{ content: '¥';}

.products-column .content .more{ position: relative; grid-area: a / j / k /t; display: flex; justify-content: center; align-items: center; font-size: 1rem; color: var(--secondary); writing-mode: vertical-lr; overflow: hidden;}
.products-column .content .more:after{ content: ''; position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; width: 1rem; height: 1px; margin: auto; background: var(--secondary); transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1)}
.products-column .content .more:before{ content: ''; position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; width: 1px; height: 1rem; margin: auto; background: var(--secondary); opacity: 0; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1)}
.products-column .content .more .font{ position: relative; z-index: 1; margin: 2em 0; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1)}

.products-column:nth-child(even) .title{ grid-area: a / k / a / l;}
.products-column:nth-child(even) .content{ grid-area: a / a / a / j;}
.products-column:nth-child(even) .content .category{ justify-content: flex-start;}
.products-column:nth-child(even) .content .category a{ margin-left: 0; margin-right: 4em;}
.products-column:nth-child(even) .content .more{ grid-area: a / a / k / k;}

/* product */
.list-category{ display: flex; justify-content: center; align-items: center;}
.list-category a{ padding: .25em 1em; margin: 0 .75em; font-size: 1.125rem; line-height: 2; font-weight: 700; color: var(--dark); transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1)}
.list-category a.on{ color: var(--light); background: var(--secondary);}

.list-product{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 2.5vw;}
.list-product .itm{ width: 100%; }
.list-product .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden;}
.list-product .itm .thumb:after{ content: ''; position: absolute; z-index: -1; top: 0; right: 0; width: 100%; height: 75%; background: #F3F5F5; transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1)}
.list-product .itm .thumb img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; max-width: 75%; max-height: 75%; margin: auto; transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1)}
.list-product .itm .info{ position: relative; display: grid; grid-gap: 1rem; padding: 1rem 0; text-align: center; font-weight: 700; line-height: 1.5; color: var(--primary); transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1)}
.list-product .itm .info:after{ content: ''; position: absolute; z-index: 0; bottom: 0; right: 0; width: 100%; height: 0; background: var(--secondary); transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1)}
.list-product .itm .info .tit{ position: relative; z-index: 1; font-size: 1.125rem;}
.list-product .itm .info .line{ position: relative; z-index: 1; width: 2rem; height: 1px; margin: auto; background: #d8d8d8; transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1)}
.list-product .itm .info .price{ position: relative; z-index: 1; font-size: 1rem;}

/* pagination */
.pagination{ display: flex; justify-content: center; align-items: center;}
.pagination a{ position: relative; padding: .65em 1em; margin: 0 .25em; font-size: 1.5rem; line-height: 1.5; font-weight: 900; color: var(--dark); transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1)}
.pagination a i{ font-size: 1.5rem;}
.pagination a:before{ content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; display: block; width: 100%; height: 1px; margin: auto; background: var(--primary); opacity: 0; transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1) }
.pagination a:after{ content: ''; position: absolute; z-index: -1; right: 0; bottom: 0; left: 0; display: block; width: 80%; height: 1px; margin: auto; background: var(--secondary); opacity: 0; transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1);}
.pagination a.on{ color: var(--secondary)}
.pagination a.on:after{ opacity: 1;}
.pagination a.dis{ color: var(--tertiary)}
.pagination a.on:before,
.pagination a.dis:before{ display: none;}

/* contact */
#map{ width: 100%; height: 30vw; background: #000;}

.list-contact{ display: grid; grid-template-columns: repeat(4,1fr); width: 100%;}
.list-contact .itm{ position: relative; display: grid; grid-gap: 1rem; justify-items: center; align-items: center; width: 100%; padding: 2.5vw 0; line-height: 1;}
.list-contact .itm:before{ content: ''; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; width: 0; height: 0; margin: auto; background: var(--primary); transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1);}
.list-contact .itm:not(:last-child):after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; display: block; width: 1px; height: 30%; margin: auto; background: var(--tertiary); opacity: 1; transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1);}
.list-contact .itm i{ font-size: 3rem; line-height: 4.5rem; color: var(--secondary); transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1);}
.list-contact .itm .en{ font-size: 1rem; color: var(--tertiary); transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1);}
.list-contact .itm .cn{ font-size: 1.125rem; font-weight: 700; color: var(--primary); transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1);}
.list-contact .itm .hover{ font-size: 1.5rem; font-weight: 700; line-height: 4.125rem; color: var(--light); transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1);}

.list-qrcode{ display: grid; grid-template-columns: repeat(2,1fr); justify-items: center; align-items: center; width: 100%;}
.list-qrcode .itm{ display: grid; grid-gap: 1rem; text-align: center;}
.list-qrcode .itm img{ width: 180px; height: 180px;}
.list-qrcode .itm span{ font-size: 1.125rem; line-height: 1.5; font-weight: 700; color: var(--primary)}

/* about */
.about-content{ display: grid; grid-gap: 5vw; padding: 5vw 0;}

.about-profile{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; padding: 0 6.25vw;}
.about-profile:after{ content: 'About Us'; justify-self: end; align-self: end; grid-column: 12 / 13; font-size: 4.5rem; line-height: 1; color: var(--primary); font-weight: 700; writing-mode: vertical-lr;}
.about-profile .title{ grid-column: 2 / 10; font-weight: 700; align-self: end; color: var(--primary)}
.about-profile .title .cn{ font-size: 2rem;}
.about-profile .title .cn::first-letter{ color: var(--secondary)}
.about-profile .title .en{ font-size: 1rem;}
.about-profile .title .en::first-letter{ color: var(--secondary)}

.about-profile .content{ grid-column: 2 / 10; display: flex; flex-flow: column wrap;}
.about-profile .content h1{ font-size: 2.5rem; line-height: 1.5; padding-bottom: .5em; color: var(--primary)}
.about-profile .content p{ font-size: 1.25rem; line-height: 2; color: var(--dark);}
.about-profile .content a.more{ font-size: 1.25rem; line-height: 1.5; margin-top: 3em; color: var(--secondary);}

.about-profile .flag{ grid-row: 1 / 3; grid-column: 10 / 12; display: flex; flex-flow: column wrap; justify-content: center; align-items: center; height: calc( 100% + 5vw); padding: 1vw 0 5vw; margin-top: -5vw; background: var(--primary);}
.about-profile .flag i{ font-size: 8rem; color: var(--light);}
.about-profile .flag .caption{ font-size: 3rem; font-weight: 700; color: var(--light); writing-mode: vertical-lr;}

.about-data{ position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; align-items: center; padding: 0 6.25vw;}
.about-data .thumb{ position: absolute; z-index: 0; left: 0; top: 0; width: 50%; height: 100%; }
.about-data .info{ position: relative; z-index: 1; grid-column: 5 / 12; display: grid; grid-template-columns: repeat(7,1fr); grid-gap: 2.5vw; padding: 2.5vw 0; margin: 5vw 0; background: #fff;}
.about-data .info:after{ content: '绿泉数据'; position: absolute; z-index: 0; top: 1.25vw; right: 1.25vw; display: block; width: 2.5em; font-size: 1.5rem; line-height: 1.25; font-weight: 700; letter-spacing: .25em; color: var(--secondary)}
.about-data .info .caption{ grid-column: span 2; display: flex; justify-content: center; align-items: center; font-size: 4.5rem; font-weight: 700; writing-mode: vertical-lr; color: var(--primary)}
.about-data .info .list{ grid-column: span 5; display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr);}
.about-data .info .list .itm{ display: flex; flex-direction: column; justify-content: center; font-weight: 700; padding-left: 20%;}
.about-data .info .list .itm .cap{ font-size: 1.125rem; color: var(--primary)}
.about-data .info .list .itm .num{ font-size: 2.5rem; line-height: 5rem; color: var(--secondary)}
.about-data .info .list .itm .num i{ padding-left: 0.5em; font-size: .875rem; font-style: normal; color: var(--primary)}

.about-culture{ position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; padding: 0 6.25vw 2.5vw;}
.about-culture:after{ content: 'Company Culture'; justify-self: end; grid-column: 12 / 13; font-size: 4.5rem; line-height: 1; color: var(--primary); font-weight: 700; writing-mode: vertical-lr;}
.about-culture .info{ grid-column: 2 / 7; display: flex; flex-flow: column wrap; justify-content: space-around;}
.about-culture .info .title{ font-weight: 700; color: var(--primary)}
.about-culture .info .title .cn{ font-size: 2rem;}
.about-culture .info .title .cn::first-letter{ color: var(--secondary)}
.about-culture .info .title .en{ font-size: 1rem;}
.about-culture .info .title .en::first-letter{ color: var(--secondary)}
.about-culture .info .itm{ line-height: 2;}
.about-culture .info .itm h2{ font-size: 1.5rem; color: var(--secondary)}
.about-culture .info .itm h4{ font-size: 1.25rem; color: var(--primary)}

.about-culture .thumb{ position: relative; grid-column: 7 / 12; width: 100%; height: 0; padding-bottom: 100%;}
.about-culture .thumb:after{ content: ''; position: absolute; z-index: -1; top: 2.5vw; left: -2.5vw; display: block; width: 100%; height: 100%; background: var(--tertiary);}
.about-culture .thumb .img{ position: absolute!important; z-index: 0; top: 0; right: 0; width: 100%; height: 100%;}

.about-qual{ position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; padding: 5vw 6.25vw; background: var(--primary);}
.about-qual .title{ grid-column: 2 / 12; display: flex; justify-content: space-between; align-items: center; font-weight: 700;}
.about-qual .title .cn{ font-size: 2rem; color: var(--light)}
.about-qual .title .more{ font-size: 1rem; color: var(--light); text-transform: uppercase;}
.about-qual .content{ grid-column: 2 / 12; display: grid; grid-template-columns: auto 1fr 1fr 1fr 1fr; grid-gap: 2.5vw;}
.about-qual .content:before{ content: 'Company\AQualification'; white-space: pre; font-size: 2rem; line-height: 1.5; font-weight: 700; color: var(--light); writing-mode: vertical-lr;}
.about-qual .content .itm{ }
.about-qual .content .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 100%; background: var(--light);}
.about-qual .content .itm .thumb img{ position: absolute!important; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; max-width: 80%; max-height: 80%; margin: auto;}

.about-envir{ position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; padding: 0 6.25vw; grid-auto-flow: row dense;}
.about-envir .content{ grid-column: 2 / 11; display: grid; grid-template-columns: repeat(9,1fr); grid-gap: 2.5vw;}
.about-envir .content .itm{ grid-column: span 3; overflow: hidden;}
.about-envir .content .itm .thumb{ width: 100%; height: 0; padding-bottom: 75%; overflow: hidden;}
.about-envir .content .itm .thumb .img{ position: absolute!important; z-index: 0; top: 0; right: 0; width: 100%; height: 100%;}
.about-envir .title{ grid-column: 11 / 13; font-weight: 700; line-height: 1; display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 2.5vw; justify-items: end;}
.about-envir .title .cn{ font-size: 2rem; color: var(--primary); writing-mode: vertical-lr;}
.about-envir .title .en{ font-size: 3rem; color: var(--primary); writing-mode: vertical-lr;}

.about-join{  position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; padding: 0 6.25vw;}
.about-join:after{ content: ''; position: absolute; z-index: -1; width: 100%; height: 65%; background: var(--primary);}
.about-join .title{ grid-column: 2 / 12; padding-top: 2.5vw; font-weight: 700; text-align: center; line-height: 1.5;}
.about-join .title .en{font-size: 4rem; color: var(--light); text-transform: uppercase; }
.about-join .title .cn{ font-size: 2rem; color: var(--light) }
.about-join .content{ grid-column: 2 / 12; padding: 2.5vw; font-size: 1.5rem; line-height: 1.75; text-align: center; font-weight: 700; color: var(--primary); background: #fff;}
.about-join .content img{ display: block; width: 100%; height: 20vw; margin-bottom: 1.25vw;}

.article-wrap{ display: grid; grid-gap: 2.5vw; width: 100%; padding: 2.5vw; background: #fff;}
.article-wrap .article-title .title{ font-size: 2rem; font-weight: 700; line-height: 1.5; color: var(--dark)}
.article-wrap .article-title .info{ padding-top: 1em; font-size: 1rem; line-height: 2; color: var(--tertiary)}
.article-wrap .article-content{ font-size: 1.25rem; line-height: 2; color: #333}
.article-wrap .article-content img{ display: inline-block; max-width: 100%;}
.article-wrap .article-arrow{ display: grid; grid-template-columns: repeat(2,1fr); font-size: 1.125rem; background: var(--light);}
.article-wrap .article-arrow a{ color: var(--dark); padding: 2.5vw;}
.article-wrap .article-arrow a:first-child:before{ content: '上一篇:\A'; color: var(--secondary); white-space: pre;}
.article-wrap .article-arrow a:last-child:before{ content: '下一篇:\A'; color: var(--secondary); white-space: pre;}


.commodity-wrap{ display: grid; grid-template-columns: 1fr 2fr; grid-gap: 2.5vw; align-items: start;}
.commodity-wrap .commodity-cover{ width: 100%;}
.commodity-wrap .commodity-cover .cover{ position: relative; width: 100%; height: 0; padding-bottom: 100%; background: #F3F5F5;}
.commodity-wrap .commodity-cover .cover img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0;  display: block; max-width: 60%; max-height: 60%; margin: auto;}
.commodity-wrap .commodity-cover .info{ display: grid; grid-gap: 1rem; padding: 1.5rem; background: #fff;}
.commodity-wrap .commodity-cover .info .title{ grid-column: span 2; font-size: 1.5rem; line-height: 1.5; font-weight: 700; color: var(--primary)}
.commodity-wrap .commodity-cover .info .cate{ grid-column: 1 / 2; font-size: .875rem; line-height: 1.5; color: var(--secondary)}
.commodity-wrap .commodity-cover .info .cate:before{ content: '[ 产品分类 ]\A'; white-space: pre; color: var(--tertiary); font-size: 0.75rem;}
.commodity-wrap .commodity-cover .info .spec{ grid-column: 2 / 3; font-size: .875rem; line-height: 1.5; color: var(--secondary)}
.commodity-wrap .commodity-cover .info .spec:before{ content: '[ 产品规格 ]\A'; white-space: pre; color: var(--tertiary); font-size: 0.75rem;}
.commodity-wrap .commodity-cover .info .price{ grid-column: 3 / 4; grid-row: 1 / 3; display: flex; justify-content: center; align-items: center; font-size: 2rem; font-weight: 900; color: var(--secondary)}
.commodity-wrap .commodity-cover .info .price:before{ content: '¥'; padding-right: 0.25em; font-size: 1.5rem;}
.commodity-wrap .commodity-content{ padding: 1.5rem; background: #fff;}
.commodity-wrap .commodity-content .caption{ font-size: 1.5rem; line-height: 1.5; font-weight: 700; padding-bottom: 0.5em; border-bottom: 1px solid var(--tertiary);}
.commodity-wrap .commodity-content .content{ padding-top: 1.5rem;}
.commodity-wrap .commodity-content .content img{ display: inline-block; max-width: 100%;}