﻿.banner{position:relative;}
.banner-title {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    color: #fff;
}
.idea {
    padding: 0 25%;
    position: relative;
    margin: 13rem 0;
}
.engTitle {
    font-size: 1.25rem;
    text-transform: uppercase;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}
.chTitle {
    font-weight: bold;
    font-size: 2.5rem;
}
.introduct{
    font-size:6rem;
    font-weight:bold
}
.green{color:#007765}
.yellow{color:#fcc9a4}
.desc {
    font-size: 1rem;
    margin-top: 2rem;
}
.idea .num,.products .num {
    position: absolute;
    transform: rotate(90deg);
    transform-origin: left top;
    left: 16.66%;
    top: 5px;
    font-size:.6rem
}
.company {
    display: flex;
    justify-content: space-between;
    padding: 7rem 0;
    background: -webkit-linear-gradient(left, transparent 33.33%, #007765 33.33%);
    color: #fff;
    position:relative;
    z-index:1
}
.company-intro-s {
    font-weight: bold;
    margin: 2rem 0 -1.5rem;
}
.company>div{width:50%}
.company .company-content{padding:6rem 10%}
.company .num{margin-bottom:2rem}
.history {
    padding: 20rem 25% 15rem;
    background: #f2f2f2;
    margin-top: -8rem;
}
.history-item{display:flex;padding-top:5rem}
.history-item-date {
    width: 16.66%;
    color: #007765;
    font-weight: bold;
    position:relative
}
.history-item-con{width:83.33%;line-height:0;position:relative}
.history-item-con img{width:17rem;margin:1rem 1rem 0 0}
.nowrap{white-space:nowrap}
.history-item-con::before, .history-item-con::after {
    content: "";
    width: 1px;
    position: absolute;
    left: -40px;
    background: #4d4d4d
}
.history-item-con::before{height:5rem;bottom:calc(100% + 2px)}
.history-item-con::after{height: calc(100% - 15px);bottom:0}
.history-item-date::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    background: #4d4d4d;
    right: 36px;
    border-radius: 50%;
    top: 3px;
}
.products {
    padding: 10rem 0;
}
.products-head {
    padding: 0 calc(25% + 5px);
    margin-bottom: 3rem;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    position:relative
}
.swiper-assembly{ padding: 0 calc(25% + 5px);}
.more__link-swiper {
    border: 1px solid #000;
    display: inline-block;
    padding: 0 0.5rem 0 0.75rem;
    color: #000;
    padding: 15px 10px;
}
.more__link-swiper .buttonIn{width:30px}
.more__link-swiper:active,.more__link-swiper:focus{outline:none}
.more__link-prev{transform: rotate(180deg);margin-right:1rem}
.product-name {
    font-size: 1rem;
    margin-top: 1rem;
    color: #000;
    text-align: right;
}
.products .num {top:0}

.enterprise{display:flex;}
.enterprise-i{position:relative;width:calc(100% / 3);line-height:0}
.enterprise-i-c {
    position: absolute;
    color: #fff;
    text-align: center;
    height: 100%;
    width: 100%;
    padding-top: 45%;
}
.enterprise .enterprise-i-t {
    font-weight: bold;
    margin: 3rem 0 1rem;
    font-size: 2rem;
    line-height:1
}
.enterprise-i p{line-height:2}
.enterprise-i .hide-o{opacity:0;}
.enterprise-i-c *{transition:all .3s ease}
.delay-1{transition-delay:.1s}
.delay-2{transition-delay:.08s}
.delay-3{transition-delay:.14s}
.delay-4{transition-delay:.18s}
.delay-5{transition-delay:.22s}
.delay-6{transition-delay:.26s}
.enterprise-i:hover>.enterprise-i-c *{transform:translateY(-20px);opacity:1}
.idea .img-fill{margin-top:6rem}
.enterprise-i:hover .enterprise-i-c{background:rgba(0,0,0,.6)}
.enterprise-i-c{transition:background .15s linear}