/* 轮播图 */
.roasting{
    width: 100%;height: 780px;background-image:url('/static/assets/images/lbt.png');
    background-repeat:no-repeat;
    background-position:center center;
    background-color: black;
}

/* 快速导航 */


.quick-nav .nav{
    border-left: 1px solid #E1E1E1;
    display: flex;
    height: 150px;
}

.quick-nav .nav a{
    flex: 1;
    border-right: 1px solid #E1E1E1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4A4A4A;   
    fill: #4A4A4A;
}

.quick-nav .nav a .right{
    margin-left: 20px
}

.quick-nav .nav a .right .title{
   margin: 0px;
   color: #4A4A4A;
   font-size: 25px;
   line-height:1;
}
.quick-nav .nav a .right .en_desc{
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing:1px;
 }

.quick-nav .nav a:hover{
    background-color: #363C44;
    color: #FFFFFF;
    fill: #FFFAFA;
    cursor: pointer;
}

.quick-nav .nav a:hover .title,.quick-nav .nav a:hover .en_desc{
    color: #FFFFFF;
}


/* 产品分类 */

.product-classify{
    border-top: 1px solid #E1E1E1;
    background-image:url('/static/assets/images/product-bg.png');
    background-repeat:no-repeat;
    background-position:center center;
}
.product-classify .container{
    flex-direction:column;
    align-items: center;
    display: flex
}

.product-classify .nav{
    width: 100%;
}

.product-classify .nav a{
    background-color: #fff;
    width: 260px;
    height: auto;
    float: left;
    margin-left:60px; 
    border-radius: 10px;
    text-align: center;cursor: pointer
}

.product-classify .nav a.dual{
    background-color: #EFEFEF;
}

.product-classify .nav a>.icon{
    margin-top: 55px;
    width: 118px;
    height: 118px;
    display:inline-block;
    border-radius: 100%;
    border: 5px solid #353236
}
.product-classify .nav a>.icon>svg{
    margin-top: 24px;
}

.product-classify .nav a>.icon.small>svg{
    margin-top: 5px;
}

.product-classify .nav a>.title{
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
    margin-top: 30px;
    letter-spacing:1.2px;
}

.product-classify .nav a>.desc{
    text-align: left;
    padding: 0px 20px 20px 20px;
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing:1.2px;
    height: 90px;
}

.product-classify .nav a>.op{
    background-color: #DB0202;
    height: 60px;
    line-height: 60px;
    color: #fff;
    border-radius: 0px 0px 10px 10px;
}

.product-classify .nav a:hover,.product-classify>.nav a.dual:hover{
    background-color: #575C63
}
.product-classify .nav a:hover>.icon{
    border: 5px solid #FFFAFA
}
.product-classify .nav a:hover>.icon>svg{
    fill: #FFFAFA;
}

.product-classify .nav a:hover>.title{
    color: #FFFAFA;
}
.product-classify .nav a:hover>.desc{
    color: #C0C3C5;
}
.product-classify .nav a:hover>.op{
    background: red
}

.product-classify .nav a:first-child{
    margin-left:0px; 
}


/* 核心技术 */
.technique{
    background-image:url('/static/assets/images/technique_bg.png');
    background-repeat:no-repeat;
    background-position:top center;
}

.technique .container{
    flex-direction:column;
    align-items: center;
    display: flex
}

.technique .nav{
    width: 100%;
}


.technique .nav a{
    background-color: #323336;
    width: 280px;
    height: auto;
    float: left;
    margin-left:33px; 
    border-radius: 10px;
    text-align: center;cursor: pointer;
    fill: #FFFAFA;
}

.technique .nav a:first-child{
    margin-left:0px; 
}

.technique .nav a.dual{
    background-color: #F20522;
}

.technique .nav a>.icon{
    margin-top: 55px;
    width: 110px;
    height: 110px;
    display:inline-block;
    border-radius: 100%;
    border: 5px solid #fff
}
.technique .nav a>.icon>svg{
    margin-top: 20px;
}

.technique .nav a>.icon.small>svg{
    margin-top: 5px;
}

.technique .nav a>.title{
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    margin-top: 30px;
    letter-spacing:1.2px;
    color: rgba(255, 255, 255, 0.9)
}

.technique .nav a>.desc{
    text-align: left;
    padding: 0px 30px 30px 30px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing:1.2px;
    height: 130px;
}



/* 新闻中心 */

.news{
    background-image:url('/static/assets/images/product-bg.png');
    background-repeat:no-repeat;
    background-position:top center;
}

.news .container{
    flex-direction:column;
    align-items: center;
    display: flex
}

.news .block-cont{
    width: 100%;
    display: flex;
}

.news .preview{
    flex: 0 0 570px;
    height: 360px;
    overflow: hidden;
    background: #424141;
    color: white;
    position: relative;
}
.news .preview>.img{
    width: 570px;
    height: 360px;
    position: absolute;
}
.news .preview>.title{
    position: absolute;
    bottom: 120px;
    left: 30px;
    color: white;
    font-size: 22px
}

.news .preview>.time{
    position: absolute;
    bottom: 100px;
    left: 30px;
    font-size: 18px;
    letter-spacing: 1.5
}

.news .preview>.desc{
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.8);
    padding: 25px;
    -webkit-margin-after:0;
}

.news .list{
    flex: 1 1 auto;
    background: rgba(255, 255, 255, 0.8);
    padding: 40px;
    height: 360px;
    position: relative;
}
.news .list>ul{
    padding: 0px;
}

.news .list>ul>li{
    border-bottom: 1px dashed #D3D3D3;
    padding: 12px 0px 12px 0px 
}
.news .list>ul>li:last-child{
    border-bottom:none;
}
.news .list>ul>li>a.title{
    color: #4A4A4A;
    font-size: 14px;
    font-weight: 600;
}
.news .list>ul>li>a.title:hover{
    color: red
}
.news .list>ul>li>.time{
    color: #9B9B9B;
    float: right;
}

.news .list>.more{
    width: 24px;
    height: 24px;
    line-height: 24px;
    display: block;
    color: #9B9B9B;
    text-align: center;
    background-color: #D8D8D8;
    border-radius: 100%;
    position: absolute;
    top: calc(50% - 12px);
    right: -12px;
}
.news .list>.more:hover{
    background-color:red;
    color: white
}

/* 他说 */
.hesay{
    background-image:url('/static/assets/images/hesay.png');
    background-position:center center;
    overflow: hidden;
}

.hesay .container{
    flex-direction:column;
    align-items: center;
    display: flex
}

.hesay .type>a{
    display: inline-block;
    background: #000;
    padding: 10px 40px 10px 40px;
    color: #fff;
    border-radius: 5px;
    margin: 5px;
    font-size: 14px;
    font-weight: 900;
}

.hesay .type>a.active{
    position: relative;
    background: #F20522;
}

.hesay .type>a:hover{
    background: #C90404;
}
.hesay .type>a.active::after{
    display:block;
    content:'';
    width: 1px;
    height: 45px;
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    bottom: -45px;
    left: 50% 
}


.hesay .block-cont{
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    border-radius: 5px;
    width: 1014px;
    margin-top: 40px;
}
.hesay .block-cont .info{
    flex: 0 0 226px;
    height: 226px;
    border-radius: 5px 0px 0px 5px;
    position: relative;
    overflow: hidden
}
.hesay .block-cont .info>.img{
    position: absolute;
}
.hesay .block-cont .info>.name{
    font-size: 20px;
    position: absolute;
    color: #fff;
    margin: 0px;
    left:30px;
    bottom: 55px
}
.hesay .block-cont .info>.desc{
    position: absolute;
    color: #fff;
    left:30px;
    bottom: 30px
}

.hesay .block-cont>.desc{
    padding: 40px 40px 40px 40px;
}
.hesay .block-cont>.desc>h1{
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: #AAAAAA;
}

.hesay .block-cont>.desc>p{
    color: #7A7A7A;
    font-weight: 500;
    letter-spacing: 1.2px
}



/* 区块标题 */
.block-title{
    text-align: center;
    width: 500px;
    flex: 1;
}
.block-title>.title{
    font-size: 36px;
    font-weight: 500;
    color: #4A4A4A
}
.block-title>.title.white{
    font-size: 36px;
    font-weight: 500;
    color: #E1E1E1
}

.block-title>.title>.en{
    margin-left: 10px;
    color: red
}
.block-title>.title.white>.en{
    color: #E1E1E1
}
.block-title>.desc{
    font-size: 12px;
    color: #7C777E;
    letter-spacing:1.5px;
}

.block-title>.desc.white{
    color: #E1E1E1
}