@charset "utf-8";
/* commmon */
body{ background: url('../images/container.webp') var(--light); background-attachment: fixed;}
html.active{ overflow: hidden;}
ol,ul{list-style:none}
.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;}

header{ position: fixed; z-index: 99; top: 0; right: 0; display: flex; justify-content: space-between; align-items: center; width: 100vw; padding: 2.5vw; transition: all 1s cubic-bezier(0.45, 0.2, 0.1, 1);}
header .logo{ width: 12vw; height: 3vw; background: #fff; -webkit-mask: url('../images/logo.png') center center no-repeat; -webkit-mask-size: auto 100%; transition: all 1s cubic-bezier(0.45, 0.2, 0.1, 1);}
header .menu{ display: flex; flex-flow: column wrap; justify-content: space-between; align-items: start; width: 2.5vw; height: 2.5vw; cursor: pointer; overflow: hidden;}
header .menu .ico{ display: flex; flex-flow: column wrap; justify-content: space-between; width: 100%; height: calc( 2.5vw - 0.625rem * 2 ); overflow: hidden;}
header .menu .ico i{ width: 100%; height: 2px; background: #d0a16d; transition: all 1s cubic-bezier(0.45, 0.2, 0.1, 1);}
header .menu .ico i:nth-child(2){ margin-left: -.5rem;}
header .menu .ico i:nth-child(3){ margin-left: -1rem;}
header .menu span{ font-size: .75rem; line-height: 1; text-transform: uppercase; color: #d0a16d; white-space: nowrap; text-align: justify; text-align-last: justify; transition: all 1s cubic-bezier(0.45, 0.2, 0.1, 1);}

header .menu.close .ico{ position: relative;}
header .menu.close .ico i:nth-child(2){ display: none;}
header .menu.close .ico i{ margin: auto !important; transform: rotateZ(45deg); position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}
header .menu.close .ico i:nth-child(3){ transform: rotateZ(-45deg);}
header .menu.close span{ display: none;}
header .menu.close:after{ content: attr(data-ac); font-size: .75rem; line-height: 1; text-transform: uppercase; text-align: justify; text-align-last: justify; color: #fff; white-space: nowrap; transition: all 1s cubic-bezier(0.45, 0.2, 0.1, 1);}


header.color{ padding: 1.25vw;}
header.color .logo{ opacity: 0;}
header.color .menu .ico i{ background: var(--secondary);}
header.color .menu span{ color: var(--secondary);}
header.color .menu.close:after{ color: var(--secondary);}

.container{ position: relative; width: 100%;}
.row{ position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 1.25vw; padding: 5vw 6.25vw;}

/* index */
.index{ position: relative; width: 100%; height: 100vh;}

.index .slide{ position: relative; z-index: 0;}
.index .slide .itm{ position: relative; overflow: hidden; }
.index .slide .itm .thumb{ position: relative; width: 100%; height: 100vh; overflow: hidden;}
.index .slide .itm .thumb .img{ width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; transform: scale(1); transition: 5s ;}
.index .slide .itm.slick-animate .thumb .img{ transform: scale(1.12);}
.index .slide .itm .media{ position: relative; width: 100%; height: 100vh; overflow: hidden;}
.index .slide .itm .media video{ position: absolute; z-index: 0 !important; top: 0; left: 50%; transform: translateX(-50%); min-width: 100%; min-height: 100%; }

.index .slide .itm .info{ position: absolute; top: 50%; left: 45%; transform: translate(-15%,-75%); }
.index .slide .itm .info img{ height: 19vw; opacity: 0; transition: 1s;}
.index .slide .itm.slick-animate .info img{ opacity: 1;}

.index .slide-num{ position: absolute; z-index: 1; top: 50%; right: 2.5vw; color: var(--light); transform: (-50%);}
.index .slide-num b{ font-size: 4.5rem;}
.index .slide-num span{ font-size: 2.25rem;}
.index .slide-num span:before{ content: '/';}

.index .slide-arrow{ position: absolute; z-index: 3; right: 0; bottom: 2.5vw; left: 0; display: flex; justify-content: center; align-items: center; margin: auto; cursor: pointer; }
.index .slide-arrow .arrow{ position: relative; width: 2.5rem; height: 2.5rem; overflow: hidden; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.index .slide-arrow .arrow:before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 1.5rem; height: 1.5rem; margin: auto; border-top: 3px solid var(--light); border-right: 3px solid var(--light); border-radius: 4px; transform: rotate(45deg);}
.index .slide-arrow .prev:before{ transform: rotate(-135deg);}
.index .slide-arrow .ico{ display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; margin: 0 1rem; border-radius: 50%; border: 2px solid var(--light); animation: rotate 4s linear infinite;}
.index .slide-arrow .ico i{ font-size: 1.5rem; line-height: 1; color: var(--light)}
.index .slide-arrow .ico img{ width:1.5rem; line-height: 1;}
.index .design{ position: absolute; z-index: 1; top: 50%; left: 2.5vw; font-size: 0.875rem; writing-mode: vertical-lr; color: var(--light); transform: translateY(-50%);}
.index .design:after{ content: ''; position: absolute; top: 0; bottom: 0; left: -2.5vw; width: 2vw; height: 1px; margin: auto; background: var(--light);}

.index .scroll{ position: absolute; z-index: 1; bottom: 0; left: 2.5vw; display: flex; flex-direction: column; align-items: center;}
.index .scroll span{ font-size: 1rem; line-height: 1.5; writing-mode: vertical-lr; color: var(--light)}
.index .scroll i{position: relative; z-index: 1; display: block; width: 1px; height: 6rem; margin-top: .5rem; background: var(--light); overflow: hidden;}
.index .scroll i:before{ content: ''; position: absolute; top: -100%; right: 0; left: 0; z-index: 2; width: 1px; height: 6rem; background: var(--secondary); animation: up 2s infinite; }
@keyframes up{ from { top: -100%; } to { top: 100%; } }


.index .convenient{ position: absolute; z-index: 4; right: 2.5vw; bottom: 2.5vw; display: flex; flex-direction: column; align-items: flex-end;}
.index .convenient .itm{ display: flex; align-items: flex-start; overflow: hidden; margin-top: 2vw; }
.index .convenient .itm .ico{ position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1.25; color: var(--light);}
.index .convenient .itm .ico i{ font-size: 1.75rem;}
.index .convenient .itm .ico .cn{ font-size: 1rem; transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1);}
.index .convenient .itm .ico .en{ font-size: 0.625rem; transition: all .3s cubic-bezier(0.45, 0.2, 0.1, 1);}


/* about */
.about{ position: relative; }
.about:before{ content: ''; position: absolute; z-index: -1; bottom: 0; left: 0; display: block; width: 50%; height: 50%; opacity: .6; -webkit-mask: url('/public/static/index/img/about-l.webp') left bottom no-repeat; -webkit-mask-size: 80% auto; animation: mountain 12s linear infinite;}
.about:after{ content: ''; position: absolute; z-index: -1; bottom: 0; right: 0; display: block; width: 50%; height: 50%; opacity: .6; mask: url('/public/static/index/img/about-r.webp') right 5vw no-repeat; mask-size: 80% auto; -webkit-mask: url('/public/static/index/img/about-r.webp') right bottom 5vw no-repeat; -webkit-mask-size: 80% auto; animation: mountain 12s linear infinite;}
@keyframes mountain{ 
  0% { background: #D26866;} 
  25% { background: #38A192;} 
  50% { background: #BC9863;} 
  75% { background: #327A90;} 
  100% { background: #D26866;}
}

.about .about-sub{ position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1.5; cursor: pointer;}
.about .about-sub:after{ content: ''; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 1px; height: 15%; margin: auto; background: var(--tertiary); transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.about .about-sub i{ font-size: 4rem; line-height: 1; color: var(--secondary); transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.about .about-sub .line{ opacity: 0; width: 1px; height: 5vw; margin: 1rem 0 1.5rem;}
.about .about-sub .cn{ margin-bottom: 0.5rem; font-size: 1.25rem; font-weight: 700; color: var(--primary); transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.about .about-sub .en{ font-size: 0.875rem; color: var(--tertiary); transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}

.about .about-info{ grid-column: span 8; display: grid; grid-gap: 1.25vw; text-align: center;}
.about .about-info .logo svg{ height: 7.5rem;}
.about .about-info .title{ font-size: 2.5rem; font-weight: 900; color: var(--primary)}
.about .about-info .info{ margin-bottom: 1.25vw; font-size: 1.25rem; font-weight: 500; color: var(--primary)}
.about .about-info .title-en{ font-size: 1.5rem; color: var(--tertiary)}
.about .about-info .info-en{ font-size: 0.625rem; color: var(--tertiary)}

.about .about-cate{ grid-column: span 3; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;}
.about .about-cate:after{ content: ''; position: absolute; z-index: -1; top: -4.5rem; right: 0; bottom: 0; left: 0; display: block; width: 0; height: 0; margin: auto; border-radius: 50%; mix-blend-mode: multiply; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.about .about-cate i{ font-size: 6rem; color: var(--primary); transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.about .about-cate .cn{ font-size: 1.5rem; font-weight: 700; line-height: 2; color: var(--secondary); transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.about .about-cate .en{ font-size: 1rem; line-height: 1.5; color: var(--tertiary); transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}

/* number */
.row.number{ display: grid; grid-template-columns: repeat(4,1fr); justify-items: center;}
.number .itm{ display: flex; flex-direction: column; font-weight: 700;}
.number .itm .caption{ font-size: 1.125rem; color: var(--light)}
.number .itm .number{ font-size: 2.5rem; line-height: 5rem; color: var(--secondary)}
.number .itm .number i{ padding-left: 0.5em; font-size: .875rem; font-style: normal; color: var(--light)}

/* advantage */
.advantage{ display: block;overflow: hidden; background: url('../images/advantage-l.webp') left bottom no-repeat, url('../images/advantage-m.webp') right center no-repeat, url('../images/advantage-r.webp') right bottom no-repeat; background-size: 12% auto, 16% auto, 15% auto;}
.advantage .thumblist .slick-list{ overflow: visible;}
.advantage .thumblist .itm{ position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 1.25vw;}
.advantage .thumblist .itm .cover{ position: relative; grid-column: span 7; height: 50vw}
.advantage .thumblist .itm .cover:after{ content: ''; position: absolute; z-index: 0; top: 10px; right: 5px; display: block; width: 100%; height: calc( 100% + 11px); background: url('../images/mask.svg') center center no-repeat; background-size: auto 100%;}

.advantage .thumblist .itm .cover .thumb{ position: relative; z-index: 1; width: 100%; height: 100%; -webkit-mask: url('../fonts/advantage.svg') center center no-repeat; -webkit-mask-size: auto 100%; background-position: center center; background-repeat: no-repeat; background-size: auto 100%;}
.advantage .thumblist .itm .info{ position: absolute; top: 0; right: 0; width: 50%; line-height: 2;}
.advantage .thumblist .itm .info .logo img{ width: auto; height: 4rem;}
.advantage .thumblist .itm .info .title{ font-size: 2.5rem; font-weight: 700; color: #166d3a; text-align: right;}
.advantage .thumblist .itm .info .caption{ font-size: 1.75rem; font-weight: 700; color: #166d3a}
.advantage .thumblist .itm .info .content{ font-size: 1rem; color: var(--secondary)}
.advantage .thumblist .itm .info-en{ position: absolute; bottom: 0; left: 0; width: 33%;}
.advantage .thumblist .itm .info-en .title{ position: relative; font-size: 1.5rem; color: #166d3a}
.advantage .thumblist .itm .info-en .title:before{ content: ''; position: absolute; top: 50%; left: -6.5vw; display: block; width: 6.5vw; height: 1px; background: var(--primary);}
.advantage .thumblist .itm .info-en .caption{ font-size: 1rem; color: var(--secondary)}
.advantage .thumblist .itm .info-en .content{ font-size: .625rem; color: var(--tertiary)}

.advantage .taglist{ position: absolute; right: 6.5vw; bottom: 5vw; display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 2.5vw; width: 36%; justify-items: end;}
.advantage .taglist .itm{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 86%; height: 16vw; padding: 1.25vw; box-shadow: -8px 8px 16px -8px rgba(7,57,55,.1); cursor: pointer;}
.advantage .taglist .itm:after{ content: ''; position: absolute; z-index: -1; top: 0; right: 0; width: 100%; height: 100%; background: url('../fonts/ac-bg.svg') center top no-repeat var(--secondary); background-size: 100% auto; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.advantage .taglist .itm .cn{ font-size: 1.25rem; writing-mode: vertical-lr; letter-spacing: .5em; color: var(--light); transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.advantage .taglist .itm .ico{ text-align: center;}
.advantage .taglist .itm .ico i{ font-size: 4rem; line-height: 1; color: var(--light); transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.advantage .taglist .itm .ico span{ font-size: 0.625rem; line-height: 1.5; color: var(--light); white-space: nowrap; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}

.advantage .taglist .itm.active:after{ background: url('../fonts/ac-bg-h.svg') center top no-repeat #fff; background-size: 100% auto}
.advantage .taglist .itm.active .cn{ color: #166d3a}
.advantage .taglist .itm.active .ico i{ color: var(--secondary)}
.advantage .taglist .itm.active .ico span{ color: var(--tertiary)}

/* video */
.video{ grid-row-gap: 3rem; color: var(--light);}
.video .slogan{ grid-column: span 5; font-size: 1.125rem; font-weight: 700; line-height: 2;}
.video .button{ grid-column: span 12; display: grid; flex-direction: column; justify-content: center; align-items: center; text-align: center; line-height: 1.5;}
.video .button i{ font-size: 4rem;}
.video .button .cn{ font-size: 2rem; font-weight: 700;}
.video .button .en{ font-size: 1rem;}
.video .slogan-en{ grid-column: 8/13; font-size: 0.875rem; line-height: 1.5; text-align: right;}

/* products */
.row.products{ display: block; padding: 0; background: url('../images/products-l.webp') left top no-repeat, url('/public/static/index/img/products-r.webp') right bottom no-repeat; background-size: 35% auto;}
.products .content{ position: relative; width: 100%; height: 100%;}
.products .content .itms .product{ width: 100%; padding: 5vw 6.25vw;}
.products .content .itms .product .itm{ display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; }
.products .content .itms .product .itm .info{ grid-column: 3/5; display: grid; grid-gap: 1.5rem; line-height: 1.5;}
.products .content .itms .product .itm .info h1{ font-size: 2rem; color: #166d3a}
.products .content .itms .product .itm .info h6{ font-size: 1rem; color: var(--tertiary)}
.products .content .itms .product .itm .info h2{ margin-bottom: 6rem; font-size: 1.5rem; color: var(--secondary)}
.products .content .itms .product .itm .info h5{ font-size: 1rem; font-weight: 300; color: var(--tertiary)}
.products .content .itms .product .itm .info h5:first-of-type:before{ content: '[ 产品规格 ]\A'; white-space: pre;}
.products .content .itms .product .itm .info h5:last-of-type:before{ content: '[ 产品分类 ]\A'; white-space: pre;}
.products .content .itms .product .itm .thumb{ position: relative; grid-column: 5/9; width: 87%; height: 0; padding-bottom: 100%;margin-left:6%}
.products .content .itms .product .itm .thumb img{ position: absolute; top: 0; right: 0; bottom: 0; left:0; display: block; max-width: 90%; max-height: 90%; margin: auto;}
.products .content .itms .product .itm .buy{ grid-column: 9/11; display: flex; justify-content: center; align-items: center;}
.products .content .itms .product .itm .buy a{ width: 100%; font-size: 1rem; line-height: 3; text-align: center; color: var(--light); background: var(--secondary); transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}

.products .content .itms .list{ width: 100%; display: grid; grid-template-columns: repeat(5,1fr); }
.products .content .itms .list .itm{ display: flex; justify-content: center; align-items: center; height: 10rem; cursor: pointer;}
.products .content .itms .list .itm .thumb{ position: relative; width: 6rem; height: 6rem; overflow: hidden; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.products .content .itms .list .itm .thumb img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; max-width: 100%; max-height: 100%; margin: auto;}
.products .content .itms .list .itm .info{ display: flex; flex-direction: column; padding-left: 1.5rem; line-height: 1.5;}
.products .content .itms .list .itm .info span{ font-size: 1rem; color: var(--dark); transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.products .content .itms .list .itm .info i{ margin-top: 1em; font-size: .875rem; font-style: normal; color: var(--dark); transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.products .content .itms .list .itm.active span{ font-weight: 700; color: #166d3a}
.products .content .itms .list .itm.active i{ font-weight: 700; color: #166d3a}

.products .content .itms .logo{ position: absolute; top: 5vw; left: 6.25vw; width: 12vw; height: 3vw;}
.products .content .itms .logo img{ display: block; width: auto; height: 100%;}

.products .content .itms .current{ position: absolute; top: 50%; left: 6.25vw; transform: translateY(-50%); color: #166d3a;}
.products .content .itms .current i{ font-size: 3rem; color: #166d3a}
.products .content .itms .current .cn{ font-size: 1.25rem; line-height: 3rem; writing-mode: vertical-lr; letter-spacing: .5em;}
.products .content .itms .current .en{ margin-top: 1em; font-size: 0.625rem; line-height: 3rem; writing-mode: vertical-lr;}

.products .content .itms .arrow{ position: absolute; top: 50%; display: flex; align-items: center; padding: 0 .5em; font-size: 1rem; line-height: 1.5; text-transform: uppercase; color: #166d3a; cursor: pointer; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.products .content .itms .arrow i{ font-size: 2rem; }
.products .content .itms .arrow.prev{ left: 0;}
.products .content .itms .arrow.next{ right: 0;}

.products .category{ position: absolute; top: 5vw; right: 6.25vw; display: flex; height: calc( 50% - 5vw); }
.products .category .itm{ display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 0 1rem; border-right: 1px solid var(--tertiary); cursor: pointer; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.products .category .itm .font{ display: flex; flex-flow: row nowrap;}
.products .category .itm .font .en{ font-size: 0.625rem; color: var(--tertiary); writing-mode: vertical-lr; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.products .category .itm .font .cn{ font-size: 1.25rem; letter-spacing: .5em; color:#166d3a; writing-mode: vertical-lr;}
.products .category .itm i{ font-size: 3rem; color: var(--secondary)}
.products .category .itm.active{/* display: none;*/}

/* billing */
.billing{ display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--light);}
.billing .logo{ width: 16rem; height: 4rem; background: #fff; -webkit-mask: url('../images/logo.png') center center no-repeat; -webkit-mask-size: auto 100%;}
.billing .logo img{ display: block; width: auto; height: 100%;}
.billing .cn{ font-size: 2.5rem; font-weight: 900; letter-spacing: .5em;}
.billing .en{ font-size: 1rem;}

/* news */
.news{ background: url('../images/news-t.webp') center top no-repeat; background-size: 58% auto;}
.news .title{ grid-column: span 12; display: flex; justify-content: space-between; font-weight: 700;}
.news .title .cn{ position: relative; font-size: 2rem; line-height: 2; color: var(--primary)}
.news .title .cn:first-letter{ color: var(--secondary)}
.news .title .cn:after{ content: ''; position: absolute; left: 0; bottom: 0; width: 2rem; height: 2px; background-color: var(--secondary); }
.news .title .en{ font-size: 1.5rem; line-height: 1.5; color: var(--primary); text-align: right;}
.news .title .en span{ display: block;}
.news .title .en span:first-letter{ color: var(--secondary);}
.news .itm{ grid-column: span 12; display: grid; grid-template-columns: repeat(12,1fr); grid-column-gap: 1.25vw; align-items: end; margin-top: 3rem;}
.news .itm .thumb{ position: relative; z-index: 1; grid-column: 1/6; width: 100%; height: 0; padding-bottom: calc( 100% / 21 * 9 ); overflow: hidden;}
.news .itm .thumb .img{ position: absolute!important; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 100%; margin: auto; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.news .itm .info{ position: relative; z-index: 0;  grid-column: 4/13; display: grid; grid-template-columns: 1fr 2.5fr 1fr; grid-template-areas: 'a b c'; grid-gap: 1.25vw; padding: 1.75rem 0; background: #fff; margin-top: -8.5rem; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.news .itm .info:after{ content: ''; position: absolute; z-index: 0; top: -6.66666vw; right: 0; width: 13.33333vw; height: 6.66666vw; background: var(--primary); -webkit-mask: url('../images/news.webp') right bottom no-repeat; -webkit-mask-size: 100% 100%; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.news .itm .info .font{ grid-area: b; line-height: 2;}
.news .itm .info .font h1{ font-size: 1.5rem; color: var(--primary); transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.news .itm .info .font h5{ font-size: 1rem; font-weight: 400; color: var(--dark); transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.news .itm .info .font span{ display: block; margin-top: 1em; font-size: 1rem; color: var(--primary); transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.news .itm .info .date{ grid-area: c; display: flex; justify-content: center; align-items: center;}
.news .itm .info .date .box{ display: flex; flex-direction: column; padding: 1rem 1.25rem; border: 2px solid var(--primary); line-height: 1.5; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.news .itm .info .date .box b{ font-size: 1.25rem; color:var(--primary); transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.news .itm .info .date .box span{ font-size: 1.25rem; color:var(--primary); transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.news .itm:nth-child(odd) .thumb{ grid-column: 8/13; }
.news .itm:nth-child(odd) .info{ grid-column: 1/10;}
.news .itm:nth-child(odd) .info:after{ right: auto; left: 0;}
.news .itm:nth-child(odd) .info .date{ grid-area: a; }
.news .banner{ grid-column: span 12; display: flex; justify-content: space-between; align-items: center; height: 8rem; padding: 0 1.5rem; margin-top: 3rem; background: url('../images/banner.webp') center center no-repeat; background-size: cover;}
.news .banner .en{ font-size: 0.625rem; line-height: 2; color: var(--light); text-transform: uppercase; letter-spacing: .5em;}
.news .banner .cn{ font-size: 2.5rem; line-height: 2; color: var(--light); font-weight: 900; letter-spacing: .5em;}
.news .banner .logo{ width: 8rem; height: 2rem; background: #fff; -webkit-mask: url('../images/logo.svg') center center no-repeat; -webkit-mask-size: auto 100%;}

/* commercial */
.commercial{ height: 33.33333vw; background: url('../images/commercial.webp') center center no-repeat; background-size: cover;}

/* environment */
.environment{ grid-template-rows: repeat(2,1fr); background: url('../images/environment-b.webp') center bottom no-repeat; background-size: 100% auto;}
.environment .title{ position: relative; grid-column: span 3; grid-row: span 2; display: flex; flex-flow: column nowrap; align-items: start; padding: 4rem 3rem; background: url('../images/env.jpg') center center no-repeat; background-size: cover; writing-mode: vertical-lr;}
.environment .title .cn{ font-size: 2rem; font-weight: 700; letter-spacing: .5em; writing-mode: vertical-lr; color: var(--light)}
.environment .title .cn:first-letter{ color: var(--secondary)}
.environment .title .en{ position: relative; font-size: 1.5rem; font-weight: 700; writing-mode: vertical-lr; color: var(--light)}
.environment .title .en:first-letter{ color: var(--secondary)}
.environment .title .en:after{ content: ''; position: absolute; bottom: -6rem; left: 50%; width: 1px; height: 4rem; background: var(--tertiary);}
.environment .title .logo{ position: absolute; bottom: 4rem; left: 3rem; width: 12rem; height: 3rem; background: #fff; -webkit-mask: url('../images/logo.png') center center no-repeat; -webkit-mask-size: auto 100%;}
.environment .itm{ position: relative; grid-column: span 3; background: #000;}
.environment .itm .thumb{ position: relative; z-index: 12; width: 100%; height: 100%; overflow: hidden;}
.environment .itm .thumb:after{ content: ''; position: absolute; z-index: 2; top: 0; right: 0; width: 100%; height: 100%; background:#166d3a; opacity: 0; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.environment .itm .thumb .img{ position: absolute!important; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 100%; margin: auto; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.environment .itm:nth-child(2) .thumb{ width: 100%; height: 0; padding-bottom: 75%;}
.environment .itm:last-child{ grid-column: span 6;}

/* map */
.row.map{ display: flex; justify-content: center; align-items: center; padding: 0; background: url('../images/map-bg.jpg') center center no-repeat; background-size: cover;}
.map a{ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2.5rem 4.5rem 4rem; background: url('../images/map.webp') center top no-repeat #166d3a; line-height: 1.5;}
.map a i{ font-size: 4rem; color: var(--light)}
.map a .cn{ font-size: 1.5rem; color: var(--light)}
.map a .en{ font-size: 1rem; color: var(--light)}
/* footer */
footer{ position: relative; padding: 5vw 6.25vw 0; background: url('../images/footer-l.webp') left bottom 4rem no-repeat, url('/public/static/index/img/footer-r.webp') top right no-repeat #1b1b1b; background-size: 27.1875% auto, 51% auto; overflow: hidden;}
footer:after{ content: ''; position: absolute; bottom: 4rem; left: 0; width: 100%; height: 1px; background: var(--secondary); opacity: 0.1;}
footer .foot{ display: grid; grid-template-columns: repeat(12,1fr); grid-column-gap: 1.25vw; grid-row-gap: 2.5vw; padding-bottom: 5vw;}
footer .foot .logo{ grid-column: span 12; display: flex; }
footer .foot .logo a{ width: 16rem; height: 4rem; background: #fff; -webkit-mask: url('../images/logo.png') center center no-repeat; -webkit-mask-size: auto 100%;}
footer .foot .contact{ grid-column: span 3; color: var(--light)}
footer .foot .contact h1{ margin-bottom: 1rem; font-size: 1.5rem; line-height: 2; color: var(--secondary)}
footer .foot .contact h5{ font-size: 1rem; font-weight: 300; line-height: 2;}
footer .foot .contact-en{ grid-column: span 5; color: var(--light)}
footer .foot .contact-en h1{ margin-bottom: 1rem; font-size: 1.5rem; line-height: 2; color: var(--secondary)}
footer .foot .contact-en h5{ font-size: 0.875rem; font-weight: 300; line-height: 2rem;}
footer .foot .qrcode{ grid-column: span 2; display: flex; flex-direction: column; align-items: center;}
footer .foot .qrcode img{ width: 7.5rem; height: 7.5rem;}
footer .foot .qrcode span{ font-size: 1rem; font-weight: 700; color: var(--light); text-align: center;}
footer .foot .social{ grid-column: span 2; display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 1.25vw;}
footer .foot .social .itm{ display: flex; flex-direction: column; text-align: center;}
footer .foot .social .itm i{ font-size: 3rem; color: var(--secondary)}
footer .foot .social .itm .cn{ font-size: 1rem; line-height: 1.5; color: var(--light)}
footer .foot .social .itm .en{ font-size: .75rem; line-height: 2; color: var(--tertiary)}
footer .copyright{ display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; line-height: 4rem; color: var(--light)}
/*footer .copyright:after{ content: '百航科技 - 网络品牌设计';}*/
footer .gotop{ position: absolute; top: 0; right: 0; left: 0; writing-mode: vertical-lr; display: flex; justify-content: center; align-items: center; width: 3rem; padding: 2em 0; margin: auto; font-size: .875rem; color: var(--light); opacity: 0; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}

/* navigation */
.navigation{ position: fixed; z-index: 9; top: 0; right: 0; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background: var(--primary); transform: translateY(-100vh); transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1);}
.navigation .content{ display: flex; justify-content: space-between; align-items: start; width: 100%; padding: 5vw 6.25vw}
.navigation ul{ position: relative; list-style: none; padding-left: 5rem; transform: translateY(-100vh); opacity: 0; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1) .3s;}
.navigation ul:before{ content: 'Navigation'; position: absolute; top: 0; left: 0; display: block; font-size: 1.5rem; font-weight: 900; text-transform: uppercase; color: var(--secondary); writing-mode: vertical-lr; letter-spacing: .25em;}
.navigation ul li{ margin-bottom: 1rem; }
.navigation ul li a{ display: block; font-size: 1.5rem; line-height: 1.5; font-weight: 700; color: var(--light)!important}
.navigation ul li a .en{ text-transform: uppercase; font-size: 1rem;}
.navigation ul li a:hover{ color: var(--secondary)!important}
.navigation dl{ position: relative; color: var(--light); padding-left: 5rem; transform: translateY(-100vh); opacity: 0; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1) .4s;}
.navigation dl:before{ content: 'ContactUs'; position: absolute; top: 0; left: 0; display: block; font-size: 1.5rem; font-weight: 900; text-transform: uppercase; color: var(--secondary); writing-mode: vertical-lr; letter-spacing: .25em;}
.navigation dl dt{ font-size: 2rem; line-height: 1; font-weight: 900; padding-bottom: 2rem;}
.navigation dl dd{ font-size: 1rem; line-height: 2.5; font-weight: 500;}
.navigation .qrcode{ position: relative; padding-left: 5rem; transform: translateY(-100vh); opacity: 0; transition: all .5s cubic-bezier(0.45, 0.2, 0.1, 1) .5s;}
.navigation .qrcode:before{ content: 'ContactUs'; position: absolute; top: 0; left: 0; display: block; font-size: 1.5rem; font-weight: 900; text-transform: uppercase; color: var(--secondary); writing-mode: vertical-lr; letter-spacing: .25em;}
.navigation .qrcode img{ width: 120px; height: 120px; background: var(--light);}

.navigation.active{ transform: translateY(0);}
.navigation.active ul,
.navigation.active dl,
.navigation.active .qrcode{ opacity: 1; transform: translateY(0);}

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





.yctips{background: url("../images/yctipsbgs.jpg") no-repeat center;background-size: cover;padding: 10vw 0;display: flex;align-items: center;justify-content: space-between;}
.yctips-l{box-sizing: border-box;padding-left: 12.5vw;}
.yctips-l h1{font-size: 50px;color: #fff;font-weight: normal;line-height: 1.2;}
.yctips-l h1 span{display: block;}
.yctips-l p{font-size: 18px;color: #fff;line-height: 30px;padding: 35px 0;}
.yctips-l p span{display: block;}
/*.yctips-l a{display: block;width: 50px;height: 50px;line-height: 50px;border-radius: 50%;text-align: center;font-size: 22px;color: #fff;background: #2f388f;margin-top: 70px;}*/
.yctips-l a{display: inline-block; margin-top: 40px;}
.yctips-r{width: 50%;position: relative;background: url("../images/yctipsri.jpg") no-repeat center;background-size: cover;padding: 75px 0;}
.yctips-r img{position: absolute;left: 3vw;top: 50%;margin-top: -17vw;height: 34vw;}
.yctips-r p{padding-left: 14vw;font-size: 26px;color: #d4d7cc}

@media screen and (max-width: 1580px){
    .yctips-l{padding-left: 8vw;}
}
@media screen and (max-width: 1000px){
    .yctips{display: block;padding-bottom: 100px;}
    .yctips-l{padding: 0 6vw;box-sizing: border-box}
    .yctips-l h1{font-size: 30px;}
    .yctips-l p{font-size: 14px;padding: 20px 0;}
    .yctips-l a{margin-top: 0px;}
    .yctips-l a img{width: 180px; height: auto;}
    .yctips-r{width: 100%;margin-top: 40px;padding: 40px 0;}
    .yctips-r p{padding-left: 6vw;width: 50%;}
    .yctips-r img{left: auto;right: 18vw;height: 68vw;margin-top: -34vw;}
}   
@media screen and (max-width: 1240px){
    .yctips-l h1{font-size: 40px;}
    .yctips-r p{font-size: 18px;}
}




.syno{position: relative;}
.syno-t{background: url("../images/synobgs.jpg") no-repeat center;background-size: cover;display: flex;box-sizing: border-box;justify-content: space-between;padding: 8.3vw 12.5vw 4.1vw 42vw;}
.syno-t img{display: block;height: 22.4vw;}
.syno-b{box-sizing: border-box;padding: 4.1vw 12.5vw 4.1vw 42vw;}
.syno-b ul{display: flex;justify-content: space-between;}
.syno-b li{}
.syno-b li h1{font-size: 16px;color: #999999;font-weight: normal;}
.syno-b li p{display: flex;align-items: center;padding-top: 10px;}
.syno-b li p span{font-size: 36px;color: #16161b;font-family: "go"}
.syno-b li p i{font-size: 14px;color: #fff;width: 30px;height: 30px;line-height: 30px;border-radius: 50%;background: #166d3a;text-align: center;font-weight: bold;margin-left: 5px;}
.syno-kx{position: absolute;left: 12.5vw;/*bottom: 0;*/bottom: 4vw;width: 24.5vw;}
.syno img{max-width: 100%}

@media screen and (max-width: 1580px){
.syno-t{padding-left: 40vw;padding-right: 8vw;}
.syno-kx{left: 8vw;}
}
@media screen and (max-width: 1000px){
	    .syno-t{padding-left: 6vw;padding-right: 6vw;}
    .syno-t img{height: 40vw;}
    .syno-kx{display: none;}
    .syno-b{padding: 10vw 6vw;}
    .syno-b li h1{font-size: 14px;}
    .syno-b li p span{font-size: 20px;}
    .syno-b li p i{font-size: 12px;width: 25px;height: 25px;line-height: 25px;}
}





.news{display: flex;justify-content: space-between;padding-top: 100px;margin-top: 8vw; margin-bottom: 8vw;}
.news-l{height: 400px;background: url("../images/newsbg.jpg") no-repeat center;background-size: cover;width: 50%;position: relative;}
.news-l-in{position: absolute;left: 12.5vw;top: -100px;background: #166d3a;display: flex;justify-content: space-around;width: 60%;padding: 30px 0;}
.news-l-in h1{font-size: 40px;color: #fff;font-weight: normal;}
.news-l-in p{font-size: 18px;color: #fff;line-height: 30px;}
.news-r{width: 50%;padding: 0 6.25vw;box-sizing: border-box;position: relative;}
.swiper-news{overflow: hidden;}
.swiper-news .swiper-slide a{display: block;}
.swiper-news .news-date{width: 100px;border-radius: 50%;height: 100px;border: 1px solid #d7dad0;display: flex;justify-content: center;flex-direction: column;color: #16161b;font-family: "go";text-align: center;}
.swiper-news .news-date p{font-size: 20px;}
.swiper-news .news-date h1{font-size: 20px;font-weight: normal;}
.swiper-news .news-date h1 span{border-top:1px solid #16161b;padding-top: 5px;display: inline-block;margin-top: 5px;}
.swiper-news .news-name{font-size: 30px;color: #16161b;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;line-height: 40px;height: 80px;text-align: justify;margin-top: 30px;transition: .5s;}
.swiper-news .news-msg{ color: #000;font-size: 16px; overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3; -webkit-box-orient: vertical;line-height: 26px;height: 78px;text-align: justify;margin-top: 30px;}

.swiper-news .swiper-slide:hover .news-name{color: #166d3a}

.swiper-news .swiper-slide{width:45%; float: left; margin:7% 2.5% 0 2.5%}
.news-pag{width: 100%;left: 0;bottom: 10px;}
.news-pag .swiper-pagination-bullet{width: 8px;height: 8px;border: 1px solid #d4d7cc;opacity: 1;background: none;margin: 0 5px;}
.news-pag .swiper-pagination-bullet-active{background: #d4d7cc}


@media screen and (max-width: 1000px){
   .news{display: block;}
   .news-l{width: 100%;height: 200px;}
   .news-l-in{top:-60px;}
   .news-l-in h1{font-size: 20px;}
   .news-l-in p{font-size: 14px;line-height: 1.4;}
   .news-r{width: 100%;padding: 10vw 6vw;}
   .swiper-news .news-name{font-size: 18px;line-height: 25px;height:50px;margin-top: 20px;}
   .swiper-news .news-msg{margin-top: 15px;}
}

@media screen and (max-width: 1240px){
    .news-l-in{width: 80%;}

    .news-l{height: 330px;}
    .swiper-news .news-name{font-size: 24px;line-height: 30px;height: 60px;}
    .swiper-news .news-msg{font-size: 14px;line-height: 22px;height: 66px;}	
}

@media screen and (max-width: 1420px){
    .news-l-in h1{font-size: 30px;}
}

@media screen and (max-width: 1580px){
    .news-l-in{left: 8vw;}
}




/*厂容厂貌*/

.anli .title{ grid-column: span 12; display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 50px;}
.anli .title .cn{ position: relative; font-size: 2rem; line-height: 2; color: #fff}
.anli .title .cn:first-letter{ color: var(--secondary)}
.anli .title .cn:after{ content: ''; position: absolute; left: 0; bottom: 0; width: 2rem; height: 2px; background-color: var(--secondary); }
.anli .title .en{ font-size: 1.5rem; line-height: 1.5; color: #fff; text-align: right;}
.anli .title .en span{ display: block;}
.anli .title .en span:first-letter{ color: var(--secondary);}


.anli{background: url("../images/yctipsbgs.jpg"); padding: 5vw}
.anli .anli-cont{/*padding-right: 60px;*/position: relative;z-index: 3}
.anli .anli-bg{position: absolute;width: 50%;top:0;right: 0;height: 100%;background: #324870}
.anli .swiper-anlipic,.anli .swiper-anliinfo{overflow: hidden}
.anli .swiper-anlipic{float: left;width: 60%;}
.anli .swiper-anlipic .swiper-slide{overflow: hidden;}
.anli .swiper-anlipic a{height: 500px;display: block;background: url(../images/anlipic.jpg) no-repeat center;background-size: cover;transition: .3s;}

.anli .anli-right{float: right;width: 30%;position: relative;z-index: 11}
.anli .anli-right:after{content: "";display: block;width: 240px;height: 2px;background: #ebd1ae;position: absolute;left: -300px;top:70px;}
.anli .swiper-anliinfo{width: 100%;}
.anli .swiper-anliinfo a{display: block;}
.anli .swiper-anliinfo h1{font-size: 100px;color:#fff;font-family: "myfont";font-style: italic}
.anli .swiper-anliinfo h2{font-size: 2rem;color:#fff;margin: 30px 0;}
.anli .swiper-anliinfo .anli-info{font-size: 1rem;color:#fff;}
.anli .swiper-anliinfo .anli-info p{padding:2px 0;}

.anli .anli-contr{margin-top: 60px;position: relative;box-sizing: border-box;padding-top: 25px;}
.anli .anli-pacont{float: left;padding-top:8px;}
.anli .anli-sa,.anli .anli-la{display: inline-block;vertical-align: middle;padding:0 15px;font-size: 24px;color: #ebd1ae;font-family: "myfont"}
.anli .anli-pag{position: static;height: 2px;width: 200px;background: #745d42;display: inline-block;vertical-align: middle;}
.anli .anli-pag .swiper-pagination-progressbar{background: #ebd1ae}

.anli .anli-btns{width: 120px;float: right;}
.anli .anli-btns div{width: 50px;height: 50px; background: url(../images/swpre.png) no-repeat center;float: left;cursor: pointer;}
.anli .anli-btns .anli-nex{background-image: url(../images/swnex.png);float: right}
.anli .anli-btns div span{display: block; width: 46px;height: 46px;border-radius: 50%;border: 2px solid #d3bc9c;opacity: 0;transition: .3s;}
.anli .anli-btns div:hover span{opacity: 1}
.cl{ clear: both; height: 0; overflow: hidden;}



@media screen and (max-width: 1840px){
    /*.wcont{padding-left: 200px;}*/

    .anli .anli-contr{margin-top: 40px;}
}
@media screen and (max-width: 1580px){

    /*案例*/
    .anli .swiper-anlipic a{height: 400px;}
    .anli .swiper-anliinfo h1{font-size: 70px;}
    .anli .swiper-anliinfo h2{margin: 20px 0;}
}

@media screen and (max-width: 1420px){

    /*案例*/
    .anli .anli-contr{margin-top: 15px;}


}
@media screen and (max-width: 1260px){
    ::-webkit-scrollbar {width: 0;}
   

    /*案例*/
    .anli .swiper-anlipic{width: 50%;}
    .anli .anli-pag{width: 120px;}
    .anli .anli-right{width: 45%;}
    .anli .anli-right:after{left: -200px;}
    .anli .swiper-anliinfo h1{line-height: 60px;height: 60px;}
    .anli .swiper-anlipic a{height: 260px;}


}
.menu .phone-btn{display: none}
.jianjie .jianjie-l .jianjie-l-enjj span{display: none}
@media screen and (max-width: 960px){
    /*.section{overflow: hidden}*/
   
    /*案例*/
    .anli{height: auto !important;display: block}
    /*.anli .anli-cont{padding-right: 40px;}*/
    .anli .swiper-anlipic a{height: 200px;}
    .anli .anli-contr{margin-top: 5px;padding-top: 10px;}
    .anli .anli-pacont{float: none;}
    .anli .anli-btns{float: none;margin-top: 20px;}

  
}

@media screen and (max-width: 700px){
  

    /*案例*/

    .anli .anli-bg{display: none;}
    /*.anli .anli-cont{padding-right: 20px;}*/
    .anli .anli-contr{display: none;}
    .anli .swiper-anlipic{width: 100%;float: none;}
    .anli .anli-right{float: none;width: 100%;padding-top: 20px;}
    .anli .anli-right:after{display: none;}
    .anli .swiper-anliinfo h1{font-size: 50px;height: auto;line-height: normal}
    .anli .swiper-anliinfo h2{font-size: 16px;}


}