@charset "utf-8";
@keyframes next_b{ 
  0% { transform: translate(-2rem,1.5px) rotate(-15deg); opacity: 0; } 
  60% { transform: translate(0rem,1.5px) rotate(-15deg); opacity: 0.5; } 
  80% { transform: translate(0rem,1.5px) rotate(-15deg); opacity: 0.5; } 
  100% { transform: translate(.5rem,1.5px) rotate(-15deg); opacity: 0;}
}
@keyframes next_a{ 
  0% { transform: translate(-2rem,-1.5px) rotate(15deg); opacity: 0; } 
  60% { transform: translate(0rem,-1.5px) rotate(15deg); opacity: 0.5; } 
  80% { transform: translate(0rem,-1.5px) rotate(15deg); opacity: 0.5; } 
  100% { transform: translate(.5rem,-1.5px) rotate(15deg); opacity: 0;}
}
@keyframes prev_b{ 
  0% { transform: translate(2rem,1.5px) rotate(15deg); opacity: 0; } 
  60% { transform: translate(0rem,1.5px) rotate(15deg); opacity: 0.5; } 
  80% { transform: translate(0rem,1.5px) rotate(15deg); opacity: 0.5; } 
  100% { transform: translate(-.5rem,1.5px) rotate(15deg); opacity: 0;}
}
@keyframes prev_a{ 
  0% { transform: translate(2rem,-1.5px) rotate(-15deg); opacity: 0; } 
  60% { transform: translate(0rem,-1.5px) rotate(-15deg); opacity: 0.5; } 
  80% { transform: translate(0rem,-1.5px) rotate(-15deg); opacity: 0.5; } 
  100% { transform: translate(-.5rem,-1.5px) rotate(-15deg); opacity: 0;}
}
@keyframes next_l{ 
  0% { transform: translate(1.5px,-2rem) rotate(15deg); opacity: 0;} 
  60% { transform: translate(1.5px,0rem) rotate(15deg); opacity: 0.5; } 
  80% { transform: translate(1.5px,0rem) rotate(15deg); opacity: 0.5; } 
  100% { transform: translate(1.5px,.5rem) rotate(15deg); opacity: 0;}
}
@keyframes next_r{ 
  0% { transform: translate(-1.5px,-2rem) rotate(-15deg); opacity: 0; } 
  60% { transform: translate(-1.5px,0rem) rotate(-15deg); opacity: 0.5; } 
  80% { transform: translate(-1.5px,0rem) rotate(-15deg); opacity: 0.5; } 
  100% { transform: translate(-1.5px,.5rem) rotate(-15deg); opacity: 0;}
}
@keyframes prev_l{ 
  0% { transform: translate(1.5px,2rem) rotate(-15deg); opacity: 0; } 
  60% { transform: translate(1.5px,0rem) rotate(-15deg); opacity: 0.5; } 
  80% { transform: translate(1.5px,0rem) rotate(-15deg); opacity: 0.5; } 
  100% { transform: translate(1.5px,-.5rem) rotate(-15deg); opacity: 0;}
}
@keyframes prev_r{ 
  0% { transform: translate(-1.5px,2rem) rotate(15deg); opacity: 0; } 
  60% { transform: translate(-1.5px,0rem) rotate(15deg); opacity: 0.5; } 
  80% { transform: translate(-1.5px,0rem) rotate(15deg); opacity: 0.5; } 
  100% { transform: translate(-1.5px,-.5rem) rotate(15deg); opacity: 0;}
}

/* header */
.header{ position: fixed; z-index: 9; top: 0; right: 0; display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: center; width: 15vw; height: 100vh;}
.header:before{ content: ''; position: absolute; z-index: 0; top: 0; left: 0; width: 1px; height: 100%; background: var(--tertiary); opacity: 1;}
.header:after{ content: ''; position: absolute; z-index: 0; top: 0; left: 0; width: 1px; height: 100%; background: var(--primary); opacity: 0; transition: all .5s;}

.header .menu{ position: relative; z-index: 1; width: 100%; height: 10vw;}
.header .menu i{ position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; width: 5rem; height: 1px; margin: auto; background: var(--primary); overflow: hidden; transition: transform .5s;}
.header .menu i:first-of-type{ transform: translateY(-.25rem);}
.header .menu i:first-of-type:after{ content: ''; position: absolute; top: 0; left: 0; width: 1.5rem; height: 1px; background: var(--primary); transition: all .85s cubic-bezier(.19,1,.22,1) .25s;}
.header .menu i:last-of-type{ transform: translateY(.25rem);}
.header .menu i:last-of-type:after{ content: ''; position: absolute; top: 0; right: 0; width: 1.5rem; height: 1px; background: var(--primary); transition: all .85s cubic-bezier(.19,1,.22,1) .25s;}
.header .menu:after{ content: '菜单'; position: absolute; top: 60%; right: 0; left: 0; text-align: center; font-size: 0.875rem; line-height: 1; color: var(--primary);}

.header .menu.close i:first-of-type{ transform: translateY(0) rotate(30deg);}
.header .menu.close i:last-of-type{ transform: translateY(0) rotate(-30deg);}

.header .logo{ position: relative; z-index: 1; width: 4rem; height: 16rem; -webkit-mask: url('../img/logo-sub.webp') center center no-repeat; -webkit-mask-size: 100% auto; background: var(--primary); transition: all .5s;}
.header .quick{ position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,1fr); padding: 1.25vw; justify-items: center; align-items: center; width: 100%; height: 10vw;}
.header .quick a i{ font-size: 1.75rem; color:var(--primary); transition: all .5s;}

.header.hover:after{ width: 100%; opacity: 1; right: 0; left: auto;}
.header.hover .menu i{ background: #fff;}
.header.hover .logo{ background: #fff;}
.header.hover .quick a i{ color: #fff; opacity: 0.3;}
.header.hover .menu i:first-of-type:after{ left: 100%;}
.header.hover .menu i:last-of-type:after{ right: 100%;}
.header.hover .menu:after{ color: white}

.header.active{ background: #111;}
.header.active:before{ opacity: 0;}
.header.active:after{ opacity: 0;}
.header.active .menu i{ background: #fff;}
.header.active .logo{ background: #fff;}
.header.active .quick a i{ color: #fff; opacity: 0.3;}
.header.active .menu i:first-of-type:after{ left: 100%;}
.header.active .menu i:last-of-type:after{ right: 100%;}
.header.active .menu:after{ content: '关闭'; color: white}
@keyframes shake-bottom{0%,100%{transform:rotate(0deg);transform-origin:50% 100%}10%{transform:rotate(2deg)}20%,40%,60%{transform:rotate(-4deg)}30%,50%,70%{transform:rotate(4deg)}80%{transform:rotate(-2deg)}90%{transform:rotate(2deg)}}

/* navigation */
.navigation{ position: fixed; z-index: 8; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background: #111; transform: translateX(100vw); opacity: 0; transition: all .5s;}
.navigation.active{ transform: translateX(0); opacity: 1;}
.navigation .list-nav{ display: flex; flex-flow: column-reverse nowrap; height: 100%; writing-mode: vertical-rl;}
.navigation .list-nav a{ position: relative; font-weight: 700; display: flex; justify-content: flex-start; padding-top: 12rem; cursor: pointer; writing-mode: vertical-rl;}
.navigation .list-nav a:after{ content: ''; position: absolute; top: 0; right: 0; left: 0; display: block; width: 1px; height: 0; margin: auto; background: #fff; transition: all .5s;}
.navigation .list-nav a .cn{ padding-top: 2.5rem; font-size: 2rem; line-height: 6; letter-spacing: 1em; writing-mode: vertical-rl; color: #fff; transition: all .5s;}
.navigation .list-nav a .en{ position: absolute; right: 0; top: 12rem; font-size: 4rem; line-height:2; writing-mode: vertical-rl; color: rgba(255,255,255,.05); transition: all .5s;}

/* watermark */
.watermark{ position: fixed; z-index: -1; top: 0; right: 0; width: 100vh; height: 100vh; background: url('../img/wm.svg') right center no-repeat; background-size: auto 100%;}

/* wrapper */
.wrapper{ position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; align-items: center; padding: 0 1.25vw; width: 85vw; height: 100vh; margin-right: 15vw; overflow: hidden;}

.wrapper .title{ position: absolute; z-index: 0; top: 0; left: 0; display: flex; align-items: center; width: 100%; height: 100%; opacity: 0.05;}
.wrapper .title .cn{ position: absolute; width: 100%; height: 100%;}
.wrapper .title .cn span{ position: absolute; z-index: 0; font-size: 6rem; line-height: 1; font-weight: 900; color: var(--primary)}
.wrapper .title .cn span:nth-child(1){ top: 4rem; left: 4rem;}
.wrapper .title .cn span:nth-child(2){ top: 4rem; right: 4rem;}
.wrapper .title .cn span:nth-child(3){ bottom: 4rem; left: 4rem;}
.wrapper .title .cn span:nth-child(4){ bottom: 4rem; right: 4rem;}
.wrapper .title .en{ padding-left: 4rem; font-size: 12rem; line-height: 1; text-transform: uppercase; font-weight: 900; color: var(--primary);}

.wrapper .slogan{ position: relative; z-index: 1; grid-column: 1 / 5;}
.wrapper .slogan .cn{ font-size: 3rem; line-height: 1.5; font-weight: 900; color: var(--secondary)}
.wrapper .slogan .cn span{ display: block; }
.wrapper .slogan .cn span:last-child{ padding-left: 2.5em;}
.wrapper .slogan .en{ position: relative; margin-top: -3.5rem; left: 3.5rem; font-size: 0.625rem; line-height: 1; writing-mode: vertical-rl; text-transform: uppercase; color: var(--tertiary)}

.wrapper .copyright{ position: absolute; right: 0; bottom: 0; font-size: .75rem; line-height: 1.5; font-weight: 700; color: var(--primary); text-align: right;}

.wrapper .content{ position: relative; z-index: 1; grid-column: 5 / 13; display: grid; grid-template-columns: repeat(8,1fr); grid-gap: 2.5vw;}

/* news */
.list-news{ grid-column: 1 / 9; position: relative; width: 100%; height: 100vh; overflow: hidden;}
.list-news:after{ content: 'Scroll'; position: absolute; z-index: 0; top: 50%; right: 0; font-size: 6rem; line-height: 1; font-weight: 900; color: var(--secondary); text-transform: uppercase; writing-mode: vertical-rl; transform: translateY(-50%); opacity: 0.1;}
.list-news .itm{ display: grid; grid-template-columns: repeat(8,1fr); grid-gap: 2.5vw; align-items: center; outline: none; cursor: pointer;}
.list-news .itm .box{ grid-column: 2 / 8; position: relative; display: grid; grid-gap: 2rem; outline: none;}
.list-news .itm .box .date{ font-size: 1rem; line-height: 1.5; font-weight: 900; color: var(--secondary); opacity: 0; transform: translateY(2rem); transition: all .4s .6s;}
.list-news .itm .box .tit{ font-size: 2rem; line-height: 1.5; font-weight: 900; color: var(--primary); opacity: 0; transform: translateY(2rem); display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden; transition: all .4s .7s;}
.list-news .itm .box .desc{ font-size: 1.125rem; line-height: 2; font-weight: 500; color: var(--tertiary); opacity: 0; transform: translateY(2rem); display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden; transition: all .4s .8s;}
.list-news .itm .box .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 25%; background-position: center center; background-repeat: no-repeat; background-size: cover; opacity: 0; transform: translateY(2rem); transition: all .4s .9s;}
.list-news .itm .box .thumb .mask{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--primary); opacity: 0; transition: all .5s;}
.list-news .itm .box .thumb .mask:before{ content: ''; position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 4rem; height: 1px; margin: auto; background: #fff;}
.list-news .itm .box .thumb .mask:after{ content: ''; position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 1px; height: 4rem; margin: auto; background: #fff;}

.list-news .arrows{ position: absolute; z-index: 6; right: 0; left: 0; width: 10vw; height: 2.5vw; margin: auto; cursor: pointer;}
.list-news .arrows:before,
.list-news .arrows:after{ content: ''; position: absolute; top: 50%; display: block; width: 5vw; height: 2px; background: var(--secondary); opacity: 1; transition: all .5s;}
.list-news .arrows:before{ right: 50%;}
.list-news .arrows:after{ left: 50%;}
.list-news .arrows.prev{ top: 5vw;}
.list-news .arrows.next{ bottom: 5vw;}
.list-news .arrows.prev:before{ animation: prev_l 2s infinite linear;}
.list-news .arrows.prev:after{ animation: prev_r 2s infinite linear;}
.list-news .arrows.next:before{ animation: next_l 2s infinite linear;}
.list-news .arrows.next:after{ animation: next_r 2s infinite linear;}

.list-news .pagination{ position: absolute; z-index: 6; left: 0; width: 3rem!important;}
.list-news .pagination span{ display: flex!important; justify-content: center; align-items: center; width: 3rem; height: 3rem; font-size: 2rem; font-weight: 700; color: var(--primary); background: none;}
.list-news .pagination span.swiper-pagination-bullet-active-main:after{ content: ''; position: absolute; right: 0; bottom: 0; left: 0; width: 80%; height: 3px; margin: auto; background: var(--primary);}

.list-news .itm.swiper-slide-active .box .date{ opacity: 1; transform: translateY(0);}
.list-news .itm.swiper-slide-active .box .tit{ opacity: 1; transform: translateY(0);}
.list-news .itm.swiper-slide-active .box .desc{ opacity: 1; transform: translateY(0);}
.list-news .itm.swiper-slide-active .box .thumb{ opacity: 1; transform: translateY(0);}

/* album */
.list-album{ grid-column: 1 / 9; position: relative; width: 40vw;}
.list-album .itm{ width: 64.58333%; padding: 5vw 0;}
.list-album .itm .box{ display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; width: 100%; height: 100%; transition: all .5s;}
.list-album .itm .box .thumb{ position: relative; z-index: 0; width: 100%; height: 0; padding-bottom: 75%; background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden; transition: all .5s;}
.list-album .itm .box .thumb:after{ content: ''; position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: 100%; background: inherit; transition: all .5s;}
.list-album .itm .box .thumb .mask{ position: absolute; z-index: 3; top: 0; right: 0; width: 100%; height: 100%; background: rgba(9,59,57,.8); opacity: 0; transition: all .5s;}
.list-album .itm .box .thumb .mask:before,
.list-album .itm .box .thumb .mask:after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 3rem; height: 3rem; margin: auto; background: #fff;}
.list-album .itm .box .thumb .mask:before{ height: 1px;}
.list-album .itm .box .thumb .mask:after{ width: 1px;}
.list-album .itm .box .info{ display: grid; grid-gap: 1rem; width: 100%; padding: 1.25vw 0; font-weight: 700; text-align: center; transition: all .5s;}
.list-album .itm .box .info .tit{ font-size: 1.5rem; line-height: 1.5; color: var(--primary); transition: all .5s;}
.list-album .itm .box .info .cate{ font-size: 1rem; line-height: 1; color: var(--tertiary); text-transform: uppercase; transition: all .5s;}

.list-album .itm.swiper-slide-next .box{ align-items: start;}
.list-album .itm.swiper-slide-next .box{ padding-left: 1.25vw;}
.list-album .itm.swiper-slide-next .box .thumb{ width: 50%; padding-bottom: 37.5%;}
.list-album .itm.swiper-slide-next .box .thumb:after{ filter: blur(2px); opacity: 1; }
.list-album .itm.swiper-slide-next .box .thumb .mask{ background: rgba(0,0,0,.8); opacity: 1;}
.list-album .itm.swiper-slide-next .box .thumb .mask:before,
.list-album .itm.swiper-slide-next .box .thumb .mask:after{ display: none;}
.list-album .itm.swiper-slide-next .box .info{ opacity: 0;}

.album-arrows{ position: absolute; z-index: 6; top: 0; bottom: 0; width: 2.5vw; height: 10vw; margin: auto; outline: none; cursor: pointer;}
.album-arrows:before,
.album-arrows:after{ content: ''; position: absolute; left: 50%; display: block; width: 2px; height: 5vw; background: var(--secondary); opacity: 1; transition: all .5s;}
.album-arrows:before{ top: 0;}
.album-arrows:after{ bottom: 0;}
.album-arrows.prev{ left: 0;}
.album-arrows.next{ right: 0;}
.album-arrows.prev:before{ animation: prev_b 2s infinite linear;}
.album-arrows.prev:after{ animation: prev_a 2s infinite linear;}
.album-arrows.next:before{ animation: next_b 2s infinite linear;}
.album-arrows.next:after{ animation: next_a 2s infinite linear;}

.album-pagination{ position: absolute; z-index: 6; bottom: 0; left: 7.08333vw; width: calc( 50% - 1.25vw)!important; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;}
.album-pagination span{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; font-size: 1.5rem; font-weight: 700; color: var(--primary); outline: none; background: none;}
.album-pagination span.swiper-pagination-bullet-active-main:after{ content: ''; position: absolute; right: 0; bottom: 0; left: 0; width: 80%; height: 3px; margin: auto; background: var(--primary);}

.ablum-cate{ position: absolute; top: 5vw; left: 0; display: flex; flex-flow: column nowrap;}
.ablum-cate a{ position: relative; margin: .5em 0; font-size: 1.125rem; font-weight: 700; line-height: 2.5; color: var(--tertiary); transition: all .5s;}
.ablum-cate a:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--primary); opacity: 0; transition: all .5s;}

.ablum-cate a.on{ color: var(--primary)}
.ablum-cate a.on:after{ width: 100%; opacity: 1;}

/* dark */
.dark{ background: var(--primary);}

.dark .header:before{ opacity: .1;}
.dark .header .menu i{ background: #fff;}
.dark .header .logo{ background: #fff;}
.dark .header .quick a i{ color: #fff; opacity: 0.3;}
.dark .wrapper .title .cn span{ color: #fff}
.dark .wrapper .title .en{ color: #fff}

.dark .wrapper .copyright{ color: #fff;}

.product-title{ position: absolute; bottom: 70%; left: 4rem; display: grid;}
.product-title .ico{ grid-row: 1 / 3; display: flex; justify-content: center; align-items: center; line-height: 1.25; padding-right: 1em;}
.product-title .ico i{ font-size: 4.5rem; color: #fff}
.product-title .cn{ grid-column: 2 / 3; display: flex; align-items: center; font-size: 3rem; line-height: 1; font-weight: 700; color: #fff;}
.product-title .en{ grid-column: 2 / 3; display: flex; align-items: center; font-size: 1rem; line-height: 1; font-weight: 700; color: #fff;}

.product-cate{ display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-end;}
.product-cate a{ position: relative; padding: .5em 0; font-size: 1.125rem; line-height: 2; font-weight: 700; color: var(--tertiary); white-space: nowrap;}
.product-cate a:after{ content: ''; position: absolute; z-index: 0; bottom: 0; right: 0; width: 0; height: 2px; background: var(--tertiary); transition: all .5s;}
.product-cate a.on{ color: var(--secondary)}
.product-cate a.on:after{ width: 100%; background: var(--secondary);}

.product-arrows{ display: flex; flex-flow: column nowrap; justify-content: space-around; align-items: center;}
.product-arrows .next{ display: none; position: relative; writing-mode: vertical-rl; font-size: 1.125rem; font-weight: 700; color: #fff; cursor: pointer;}
.product-arrows .next:before{ content: '下一类：';}
.product-arrows .prev{ display: none; position: relative; writing-mode: vertical-rl; font-size: 1.125rem; font-weight: 700; color: #fff; cursor: pointer;}
.product-arrows .prev:before{ content: '上一类：';}

.rice .grains.next{ display: block;}
.grains .deep.next{ display: block;}
.deep .mushroom.next{ display: block;}
.mushroom .rice.next{ display: block;}

.rice .mushroom.prev{ display: block;}
.grains .rice.prev{ display: block;}
.deep .grains.prev{ display: block;}
.mushroom .deep.prev{ display: block;}

.list-product{ grid-column: span 3; width: 100%; height: 100vh; overflow: hidden;}
.list-product .itm{ position: relative; display: flex; width: 100%; height: auto; padding: 1.25vw 0;}
.list-product .itm .box{ position: relative; width: 100%; height: 0; padding-bottom: 100%;}
.list-product .itm .box .thumb{ position: absolute; z-index: 0; width: 100%; height: 100%; background: #fff; overflow: hidden; transition: all .5s;}
.list-product .itm .box .thumb .img{ position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; width: 80%; height: 80%; margin: auto; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: all .5s;}
.list-product .itm .box .thumb .mask{ position: absolute; z-index: 3; top: 0; right: 0; width: 100%; height: 100%; background: rgba(207,161,109,.8); opacity: 0; transition: all .5s;}
.list-product .itm .box .thumb .mask:before,
.list-product .itm .box .thumb .mask:after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 3rem; height: 3rem; margin: auto; background: #fff;}
.list-product .itm .box .thumb .mask:before{ height: 1px;}
.list-product .itm .box .thumb .mask:after{ width: 1px;}
.list-product .itm .box .info{ position: absolute; z-index: 3; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; padding: .75em; font-size: 1.5rem; line-height: 2; font-weight: 700; color: #fff; opacity: 0; transition: all .5s; }

.list-contact{ grid-column: 1 / 4; align-self: center; display: flex; flex-flow: column nowrap; justify-content: space-between;}
.list-contact a{ padding: 3rem 0;}
.list-contact a i{ font-size: 3rem; line-height: 1; color: #fff;}
.list-contact a .cn{ font-size: 1rem; line-height: 1.25; color: #fff;}
.list-contact a .en{ font-size: 1.125rem; line-height: 1.25; color: #fff;}

@keyframes wobble-hor-top{0%,100%{transform:translateX(0);transform-origin:50% 50%}15%{transform:translateX(-30px) rotate(6deg)}30%{transform:translateX(15px) rotate(-6deg)}45%{transform:translateX(-15px) rotate(3.6deg)}60%{transform:translateX(9px) rotate(-2.4deg)}75%{transform:translateX(-6px) rotate(1.2deg)}}

.contact-map{ grid-column: 4 / 9; width: calc( 100% + 1.25vw); height: 100vh; margin-right: -1.25vw; background: #f5f5f5;}

/* about */
.container-about{ position: relative; width: 85vw; height: 100vh; margin-right: 15vw; overflow: hidden;}

.container-about .title{ position: absolute; z-index: 0; top: 0; left: 0; display: flex; align-items: center; width: 100%; height: 100%; opacity: 0.05;}
.container-about .title .cn{ position: absolute; width: 100%; height: 100%;}
.container-about .title .cn span{ position: absolute; z-index: 0; font-size: 6rem; line-height: 1; font-weight: 900; color: var(--primary)}
.container-about .title .cn span:nth-child(1){ top: 4rem; left: 4rem;}
.container-about .title .cn span:nth-child(2){ top: 4rem; right: 4rem;}
.container-about .title .cn span:nth-child(3){ bottom: 4rem; left: 4rem;}
.container-about .title .cn span:nth-child(4){ bottom: 4rem; right: 4rem;}
.container-about .title .en{ padding-left: 4rem; font-size: 12rem; line-height: 1; text-transform: uppercase; font-weight: 900; color: var(--primary);}

.container-about .arrows{ position: absolute; z-index: 3; top: 0; bottom: 0; width: 2.5vw; height: 10vw; margin: auto; outline: none; cursor: pointer;}
.container-about .arrows:before,
.container-about .arrows:after{ content: ''; position: absolute; left: 50%; display: block; width: 2px; height: 5vw; background: var(--secondary); opacity: 1; transition: all .5s;}
.container-about .arrows:before{ top: 0;}
.container-about .arrows:after{ bottom: 0;}
.container-about .arrows.prev{ left: 1.25vw;}
.container-about .arrows.next{ right: 1.25vw;}
.container-about .arrows.prev:before{ animation: prev_b 2s infinite linear;}
.container-about .arrows.prev:after{ animation: prev_a 2s infinite linear;}
.container-about .arrows.next:before{ animation: next_b 2s infinite linear;}
.container-about .arrows.next:after{ animation: next_a 2s infinite linear;}

.about-swiper{ width: 100%; height: 100%;}

.about-row{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; align-items: center; width: 100%; height: 100%; padding: 0 1.25vw;}
.about-row .slogan{ position: relative; z-index: 1; grid-column: 1 / 5; display: flex; justify-content: flex-end;}
.about-row .slogan .grid{ display: grid;}
.about-row .slogan .grid .cn{ font-size: 3rem; line-height: 1.5; font-weight: 900; color: var(--secondary); white-space: nowrap;}
.about-row .slogan .grid .en{ font-size: 0.625rem; line-height: 1; text-transform: uppercase; color: var(--tertiary)}
.about-row .slogan .grid .copyright{ margin-top: 8rem; font-size: .75rem; line-height: 1.5; font-weight: 700; color: var(--primary); text-align: right;}

.about-row .caption{ grid-column: span 1; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; writing-mode: vertical-rl;}
.about-row .caption .cn{ font-size: 2rem; line-height: 1; font-weight: 700; writing-mode: vertical-rl; color: var(--primary)}
.about-row .caption .en{ padding-top: 1.5rem; font-size: 1.125rem; line-height: 1; font-weight: 700; writing-mode: vertical-rl; color: var(--secondary); text-transform: uppercase;}

.about-row .content{ grid-column: 6 / 12;}

/* profile */
.profile .caption{ grid-column: 2 / 9; align-self: end; flex-flow: column nowrap; align-items: start; writing-mode: horizontal-tb;}
.profile .caption .cn,
.profile .caption .en{ writing-mode: horizontal-tb;}
.profile .content{ position: relative; top: 0; z-index: 2; grid-column: 2 / 9; align-self: start; display: grid; grid-gap: 2rem; padding: 2rem; background: rgba(255,255,255,.9); transition: all .5s;}
.profile .content h1{ font-size: 2.5rem; line-height: 1; color: var(--primary); transition: all .5s;}
.profile .content p{ font-size: 1.125rem; line-height: 2; color: #222; display:-webkit-box; -webkit-line-clamp: 5; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden; transition: all .5s;}
.profile .content a{ font-size: 1.125rem; line-height: 2.5; color: var(--secondary); transition: all .5s;}
.profile .cover{ position: absolute; z-index: 1; right: 10rem; top: 0; bottom: 0; width: 40%; height: 0; padding-bottom: 40%; margin: auto; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.profile .cover:before{ content: ''; position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: 100%; background: inherit;}
.profile .cover:after{ content: ''; position: absolute; z-index: 0; top: 1.5rem; right: 1.5rem; width: 100%; height: 100%; background: var(--primary); opacity: .08;}

/* culture */
.list-culture{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 2.5vw; align-items: center;}
.list-culture .itm{ position: relative; padding: 6.5rem 2rem; display: grid; grid-gap: 2rem; background: #fff; box-shadow: 0 16px 16px -8px rgba(9,59,57,.08); cursor: pointer; transition: all .5s;}
.list-culture .itm .tit{ font-size: 1.5rem; color: var(--secondary); font-weight: 700; transition: all .5s;}
.list-culture .itm .tit b{ font-size: 3rem;}
.list-culture .itm .slo .cn{ font-size: 1.5rem; line-height: 1.5; color: #222; font-weight: 700; transition: all .5s;}
.list-culture .itm .slo .en{ font-size: 0.625rem; line-height: 2; color: #999; text-transform: uppercase; transition: all .5s;}
.list-culture .itm .mask{ position: absolute; z-index: 0; top: 1rem; right: 1rem; font-size: 3rem; font-weight: 700; line-height: 1; color: var(--secondary); writing-mode: vertical-rl; text-transform: uppercase; opacity: .1;}
.list-culture .itm:last-child{ grid-column: 2 / 3; grid-row: 1 / 3;}

/* quali */
.list-quali{ height: 100vh; overflow: hidden;}
.list-quali .itm{ width: 100%; height: auto; padding: 1.25vw 0;}
.list-quali .itm .box{ display: grid; grid-template-columns: repeat(6,1fr); grid-gap: 2.5vw;}
.list-quali .itm .box .thumb{ position: relative; z-index: 0; grid-column: 1 / 5; width: 100%; height: 0; padding-bottom: 75%; background-position: center center; background-repeat: no-repeat; background-size: contain; background-color: #fff; overflow: hidden; }
.list-quali .itm .box .thumb:after{content: ''; position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: 100%; background: inherit; filter: blur(2px); transition: all .5s;}
.list-quali .itm .box .thumb .mask{ position: absolute; z-index: 3; top: 0; right: 0; width: 100%; height: 100%; background: rgba(255,255,255,.8); opacity: 1; transition: all .5s;}
.list-quali .itm .box .info{ grid-column: 5 / 7; display: grid; grid-gap: 1.5rem; width: calc( 100% + 2.5vw); padding: 2rem; margin-left: -2.5vw; background: #fff; opacity: 0; transition: all .5s;}
.list-quali .itm .box .info i{ align-self: end; font-size: 4rem; line-height: 1; color: var(--primary)}
.list-quali .itm .box .info span{ align-self: start; font-size: 1.5rem; line-height: 1.5; font-weight: 700; color: #222;}

.list-quali .itm.swiper-slide-active .box{ box-shadow: 0 16px 24px -8px rgba(9,59,57,.08);}
.list-quali .itm.swiper-slide-active .box .thumb:after{ filter: blur(0);}
.list-quali .itm.swiper-slide-active .box .thumb .mask{ opacity: 0;}
.list-quali .itm.swiper-slide-active .box .info{ opacity: 1;}

/* join */
.join .content .thumb{ width: 100%; height: 0; padding-bottom: 45%; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.join .content .info{ padding: 2rem; font-size: 1.125rem; line-height: 2; font-weight: 700; color: #222; background: #fff;}

/* commodity */
.container-commodity{ position: relative; width: 85vw; height: 100vh; margin-right: 15vw; overflow: hidden;}

.container-commodity .arrows{ position: absolute; z-index: 2; top: 0; bottom: 0; width: 2.5vw; height: 10vw; margin: auto; outline: none; cursor: pointer;}
.container-commodity .arrows:before,
.container-commodity .arrows:after{ content: ''; position: absolute; left: 50%; display: block; width: 2px; height: 5vw; background: var(--tertiary); opacity: 1; transition: all .5s;}
.container-commodity .arrows:before{ top: 0;}
.container-commodity .arrows:after{ bottom: 0;}
.container-commodity .arrows.prev{ left: 1.25vw;}
.container-commodity .arrows.next{ right: 1.25vw;}
.container-commodity .arrows.prev:before{ animation: prev_b 2s infinite linear;}
.container-commodity .arrows.prev:after{ animation: prev_a 2s infinite linear;}
.container-commodity .arrows.next:before{ animation: next_b 2s infinite linear;}
.container-commodity .arrows.next:after{ animation: next_a 2s infinite linear;}

.commodity-swiper{ width: 100%; height: 100%;}

.commodity-row{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; align-items: center; width: 100%; height: 100%; padding: 0 1.25vw; }

.commodity-row .info{ position: relative; z-index: 1; grid-column: 2 / 6; display: grid; grid-gap: 1rem; font-size: 1.5rem; line-height: 1.5; font-weight: 700;}
.commodity-row .info .cate{ line-height: 2.5; color: #8E0000}
.commodity-row .info .tit{ font-size: 4rem; color: var(--primary)}
.commodity-row .info .slo{ color: var(--secondary)}
.commodity-row .info .spec{ color: var(--tertiary)}
.commodity-row .info .price{ font-size: 3rem; color: var(--primary)}
.commodity-row .info .price:before{ content: '¥'; padding-right: 0.5em;}

.commodity-row .cover{ position: absolute; top: 0; right: 0; z-index: 0; display: grid; grid-template-columns: repeat(11,1fr); grid-gap: 2.5vw; align-items: center; width: 100%; height: 100%; padding: 0 1.25vw;}
.commodity-row .cover .list-cover{ position: relative; grid-column: 4 / 9; width: 100%; border-radius: 50%; overflow: hidden;}
.commodity-row .cover .list-cover:after{ content: ''; position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; border-radius: 50%; background: var(--light);}
.commodity-row .cover .list-cover .itm{ position: relative; z-index: 0; width: 100%; height: 0; padding-bottom: 100%; }
.commodity-row .cover .list-cover .itm .box{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(6,1fr); grid-gap: 2.5vw; align-items: center;}
.commodity-row .cover .list-cover .itm .box .thumb{ position: relative; grid-column: 2 / 6; width: 100%; height: 0; padding-bottom: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain;}

.commodity-row .cover .list-cover .arrow{ position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);}
.commodity-row .cover .list-cover .arrow.prev{ left: 1rem; opacity: 0;}
.commodity-row .cover .list-cover .arrow.next{ right: 1rem;}
.commodity-row .cover .list-cover .arrow i{ font-size: 3rem; line-height: 1; color: var(--secondary)}

.commodity-row .buy{ position: relative; z-index: 1; grid-column: 10 / 12; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.commodity-row .buy:before{ content: '在线购买'; position: relative; z-index: 1; font-size: 1.25rem; line-height: 2.5; font-weight: 700; color: var(--secondary); transition: all .5s;}
.commodity-row .buy:after{ content: ''; position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; transition: all .5s;}
.commodity-row .copyright{ position: absolute; z-index: 0; top: 4rem; right: 4rem; font-size: .75rem; line-height: 1.5; font-weight: 700; color: var(--primary); text-align: right;}
.commodity-row .copyright a{ color: var(--primary)!important}
.commodity-row .copyright:last-child{ top: auto; bottom: 4rem;}

.commodity-row .view{ position: absolute; right: 0; bottom: 2rem; left: 0; display: flex; flex-flow: column wrap; justify-content: center; align-items: center; cursor: pointer;}
.commodity-row .view span{ font-size: 1.5rem; line-height: 1; color: var(--primary); font-weight: 700; opacity: 0; transition: all .5s;}
.commodity-row .view i{ font-size: 3rem; line-height: 1; color: var(--secondary); animation: c_d 2s infinite linear;}
@keyframes c_d{ 
  0% { position: relative; top: 0; opacity: 0; } 
  50% { position: relative; top: 0.5rem; opacity: 1;} 
  100% {position: relative; top: 1rem; opacity: 0;}
}
.commodity-row .back{ position: absolute; right: 0; top: 2rem; left: 0; display: flex; flex-flow: column wrap; justify-content: center; align-items: center; cursor: pointer;}
.commodity-row .back span{ font-size: 1.5rem; line-height: 1; color: var(--primary); font-weight: 700; opacity: 0; transition: all .5s;}
.commodity-row .back i{ font-size: 3rem; line-height: 1; color: var(--secondary); animation: c_u 2s infinite linear;}
@keyframes c_u{ 
  0% { position: relative; bottom: 0; opacity: 0; } 
  50% { position: relative; bottom: 0.5rem; opacity: 1;} 
  100% {position: relative; bottom: 1rem; opacity: 0;}
}
.commodity-row .commodity{ grid-column: 2 / 12; display: grid; grid-template-columns: repeat(10,1fr); grid-gap: 2.5vw;}
.commodity-row .commodity .commodity-info{ grid-column: 1 / 4;}

.commodity-row .commodity .commodity-info .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 100%;}
.commodity-row .commodity .commodity-info .thumb .box{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 80%; height: 80%; margin: auto; background-position: center center; background-repeat: no-repeat; background-size: contain;}

.commodity-row .commodity .commodity-info .content{ display: grid; grid-gap: .5rem; padding: 2rem; font-size: 1.125rem; line-height: 1.5; font-weight: 700;}
.commodity-row .commodity .commodity-info .content .cate{ line-height: 2.5; color: #8E0000}
.commodity-row .commodity .commodity-info .content .tit{ font-size: 2rem; color: var(--primary)}
.commodity-row .commodity .commodity-info .content .slo{ color: var(--secondary)}
.commodity-row .commodity .commodity-info .content .spec{ color: var(--tertiary)}
.commodity-row .commodity .commodity-info .content .price{ font-size: 2rem; color: var(--primary)}
.commodity-row .commodity .commodity-info .content .price:before{ content: '¥'; padding-right: 0.5em;}

.commodity-row .commodity .commodity-content{ position: relative; grid-column: 4 / 11; padding: 2rem; }
.commodity-row .commodity .commodity-content .title{ font-size: 2rem; line-height: 2; font-weight: 700; color: var(--primary)}
.commodity-row .commodity .commodity-content .content{ position: absolute; z-index: 6; top: 7rem; width: calc( 100% - 4rem ); height: calc(100% - 9rem); overflow-y: scroll; font-size: 1.125rem; line-height: 2;}
.commodity-row .commodity .commodity-content .content .img{ display: inline-block; max-width: 100%; }

.wrapper-article{ width: 85vw; height: 100vh; margin-right: 15vw; overflow: hidden;}

.wrapper-article .article{ position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-template-rows: 4rem auto auto 8rem 2.25rem; grid-gap: 2rem 2.5vw; width: 100%; height: 100%; padding: 4rem 1.25vw;}
.wrapper-article .article .article-arrows{ grid-column: 1 / 2; grid-row: 1 / 6; display: flex; align-items: center; justify-content: center;}
.wrapper-article .article .article-arrows.last{ grid-column: 12 / 13;}

.wrapper-article .article .article-arrows .arrows{ position: relative; width: 2.5vw; height: 10vw; margin: auto; outline: none; cursor: pointer;}
.wrapper-article .article .article-arrows .arrows:before,
.wrapper-article .article .article-arrows .arrows:after{ content: ''; position: absolute; left: 50%; display: block; width: 2px; height: 5vw; background: var(--tertiary); opacity: 1; transition: all .5s;}
.wrapper-article .article .article-arrows .arrows:before{ top: 0;}
.wrapper-article .article .article-arrows .arrows:after{ bottom: 0;}
.wrapper-article .article .article-arrows .arrows.prev:before{ animation: prev_b 2s infinite linear;}
.wrapper-article .article .article-arrows .arrows.prev:after{ animation: prev_a 2s infinite linear;}
.wrapper-article .article .article-arrows .arrows.next:before{ animation: next_b 2s infinite linear;}
.wrapper-article .article .article-arrows .arrows.next:after{ animation: next_a 2s infinite linear;}

.wrapper-article .article .article-info,
.wrapper-article .article .article-title,
.wrapper-article .article .article-content,
.wrapper-article .article .article-banner,
.wrapper-article .article .copyright{ grid-column: 2 / 12;}

.wrapper-article .article .article-info{ display: flex; flex-flow: column nowrap; font-size: 1rem; line-height: 2; color: var(--secondary)}
.wrapper-article .article .article-title{ font-size: 2rem; line-height: 1.5; font-weight: 700; color: var(--primary)}
.wrapper-article .article .article-content{ font-size: 1.125rem; line-height: 2; color: #222; overflow-x: hidden; overflow-y: auto;}
.wrapper-article .article .article-content img{ display: inline-block; max-width: 100%;}
.wrapper-article .article .article-banner{width: 100%; height: 8rem; background: url('../img/news-banner.webp') center center no-repeat; background-size: cover;}
.wrapper-article .article .copyright{ font-size: .75rem; line-height: 1.5; font-weight: 700; color: var(--primary);}