﻿@import url('css2-Anton_Poppins_swap.css'); 
.fp-tableCell{vertical-align:baseline}

.solution_index_2 dl{float:left}
.solution_index_2 div{float:right;background-image:url(../image/solu_ind_4.jpg)}

.solu_cus p{text-align:center}
.solu_cus img{margin:3.5rem auto;width:100%;max-width:900px;height:auto}

.solu_details ul{display:flex;margin:30px 0 10px;width:100%;justify-content:space-between}
.solu_details ul li{overflow:hidden;width:45%;height:100px;border-radius:4px;}
.solu_details ul li img{width:100%}
.solu_details dl{margin-bottom:20px;width:100%;line-height:2rem;font-size: 1rem;}
.solu_details dl dt{font-size:1.1rem;font-family:Poppins}
.solu_details dl dd{word-wrap:break-word}
.solu_details .solu_details_button{display:flex;flex-wrap:wrap;justify-content:space-between}
.solu_details .solu_details_video,.solu_details a{display:inline-block;padding:.5rem 2rem;border-radius:4px;background:#77b917;color:#fff;cursor:pointer}
.solu_details a.solu_details_contact{right:16%;left:auto}

.solu_artic_pro{padding:6rem 0; position:relative}
.solu_artic_pro.feed:before{display:block; content:""; width:285px; height:504px;position:absolute; left:0; top:7rem;background:url(../image/solu_feedartic_chicken.jpg) no-repeat;z-index:-1}
.solu_artic_pro.feed:after{display:block; content:""; width:379px; height:318px;position:absolute; right:0; bottom:7rem;background:url(../image/solu_feedartic_pig.jpg) no-repeat;z-index:-1}
.solu_artic_pro.wood{background:url(../image/solu_woodartic_probg.jpg) no-repeat 50% 7rem;}
.solu_artic_pro p{ padding:0 10%}
.solu_artic_pro ul{display:flex; flex-wrap:wrap; justify-content:space-around}
.solu_artic_pro ul li{width:32%; min-width:300px; margin-top:3rem}
.solu_artic_pro ul li img{width: 100%;height:auto}

.solu_case{position:relative;width:100%;background:#222326;overflow: hidden;}
.solu_case .bd{height:100%}
.solu_case .bd>div{width:100%;height:100%}
.solu_case dl{width:100%;color:#fff;display: flex;flex-wrap: wrap;justify-content: space-around;}
.solu_case dd,.solu_case dt{width:50%;min-width:300px;}
.solu_case dd{box-sizing:border-box;padding:1rem }
.solu_case img{width:100%;height:auto}
.solu_case h4{color:#fff;font-size:2.5rem;line-height:3.5rem;font-family:Poppins}
.solu_case h4:after{background:#fff}
.solu_case span{display:block;margin:1rem 0;font-size:1.5rem;font-family:Poppins;opacity:.5}
.solu_case p{color:#fff;}
.solu_case p+a{margin:2rem 0 0;}
.solu_case p+a:hover{box-shadow:none;}
.solu_case p a{border-bottom:1px dashed;color:#fff}
.solu_case .next,.solu_case .prev,.solu_tl .next,.solu_tl .prev{position:absolute;top:50%;right:10px;display:block;width:40px;height:40px;text-align:center;font-weight:700;font-size:30px;line-height:40px;opacity:.5;transition:all .2s;transform:scale(1,1.5);transform:translateY(-50%)}
.solu_case .next:hover,.solu_case .prev:hover,.solu_tl .next:hover,.solu_tl .prev:hover{color:#fff;opacity:1}
.solu_case .prev,.solu_tl .prev{left:10px}
.solu_case .next,.solu_case .prev,.solu_tl .next,.solu_tl .prev{right:30px;color:#fff;font-size:60px;opacity:.7}
.solu_case .next:hover,.solu_case .prev:hover,.solu_tl .next:hover,.solu_tl .prev:hover{opacity:1}
.solu_case .prev,.solu_tl .prev{left:10px}
.solu_tl{position:relative;padding:180px 0;width:100%;background:#1b2f3c}
.solu_tl .wrap{margin:0 auto;width:1300px}
.solu_tl .tls{display:flex;width:100%;justify-content:space-between}
.solu_tl .tls_bottom{margin:0 auto;width:960px}
.solu_tl dl{width:260px}
.solu_tl dl *{transition:all .2s}
.solu_tl dl dt{overflow:hidden;margin-bottom:10px;width:100%;height:160px;border:2px solid #fff}
.solu_tl dl dt img{width:100%}
.solu_tl dl dd{color:#fff}
.solu_tl dl:hover dt{border-color:#77b917}
.solu_tl dl:hover dt img{transform:scale(1.05)}
.linerrr{position:relative;overflow:hidden;margin:20px 0;width:100%;height:100px}
.linerrr span{position:absolute;display:block;width:100%;text-align:center;text-align:center;font-size:106px;font-family:Poppins;line-height:100px;opacity:.1}
.linerrr i,.linerrr:before{position:absolute;top:50%;z-index:0;display:block;width:100%;height:1px;background:#fff;content:""}
.linerrr i{width:50%;background:#77b917}
.linerrr ul{position:absolute;top:30px;z-index:999;display:flex;width:100%;height:40px;justify-content:space-around}
.linerrr li{display:block;width:40px;height:40px;border:1px solid #fff;border-radius:50%;background:#f5f5f5;color:grey;text-align:center;font-style:normal;line-height:40px;transition:all .2s}
.linerrr li.on{background:#77b917;color:#fff}
.customer_guide{padding:5rem 0;width:100%;background:url(../image/bg_cguide.jpg) no-repeat center;background-size: cover;}
.customer_guide .container{position:relative;height:700px}
.customer_guide h5,.customer_guide span{display:block;color:#fff;font-size:1.8rem;font-family:Poppins}
.customer_guide .formula{float:right;box-sizing:border-box;padding:50px 60px 0 140px;width:44%;min-width:300px;height:700px;background:rgba(0,0,0,.7)}
.customer_guide .formula span{margin:2rem 0}
.customer_guide .formula p{margin:30px 0 20px;color:#fff}
.customer_guide .formula a{display:inline-block;padding:5px 20px;border:1px solid #fff;border-radius:4px;color:#fff;transition:all .2s}
.customer_guide .formula a:hover{border-color:#77b917;background:#77b917}
.customer_guide .cgimg{position:absolute;top:55px;right:420px;width:790px;height:590px;background:url(../image/cgimg.jpg) no-repeat}
.customer_guide .cgimg span{position:absolute;bottom:0;display:block;width:100%;background:rgba(0,0,0,.7);text-align:center;line-height:75px}
.customer_guide .cgimg a{display:block;color:#fff}
.customer_guide .cgimg a:hover{color:#77b917;transition:all .2s}
.solu_more{width:100%;display: flex;flex-wrap: wrap;justify-content: space-around;}
.solu_more dl{position:relative;float:left;overflow:hidden;width:50%;height:100%;transition:all .2s}
.solu_more dl *{transition:all .2s}
.solu_more dl img{width: 100%;}
.solu_more dl:first-child:hover dt{left:-100%;opacity:.2}
.solu_more dl:last-child:hover dt{left:200%;opacity:.2}
.solu_more dt{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:.5}
.solu_more dd{position:absolute;top:50%;left:0;width:100%;text-align:center}
.solu_more a{padding:5px 20px;border:1px solid #fff;border-radius:4px;color:#fff;font-size:1.8rem;font-family:Poppins}
.solu_more a:hover{border-color:#77b917;background:#77b917}

.configlist .item{width: 49%; margin-bottom: 25px; border: 1px solid #ccc; border-radius: 10px; padding: 20px; box-sizing: border-box;}
.configlist .item img{width: 100%; height: auto;}
.configlist .item .img{position: relative; margin-bottom: 20px;}
.configlist .item .img .img1 img{height: auto;}
.configlist .item .img2{position: absolute;top: 0; left: 0; opacity: 0;transition: opacity .3s;}
.configlist .item:hover .img2{opacity: 1; transition: opacity .3s;}
.configlist .item h3{position: absolute; bottom:0; width: 100%; text-align: center; font-size: 1.1rem; padding: 9px 0;background:url(../image/bg_triangle_left.png) left no-repeat,url(../image/bg_triangle_right.png) right no-repeat,rgba(0,0,0,.6);}
.configlist .item h3 a{color: #fff;}
.configlist .item p{color: #808080; line-height: 1.5rem; margin-bottom: 20px;}
.configlist .item .button{text-align: center;}
.configlist .item .button a{display: inline-block; width: 160px; padding: 10px 0; text-align: center; border: 1px solid #032e67; border-radius: 50px;}
.configlist .item .button a.button2{background-color: #032e67; color: #fff;}
.configlist .item .button a:hover{box-shadow: 0 1px 5px 1px #666;}
.configlist .item:hover{box-shadow: 0 0 5px 1px #032e67;}

.mask{position:fixed;top:0;left:0;z-index:19960426;display:none;width:100%;height:100%;background:rgba(0,0,0,.5)}
.mask .container{position:absolute;top:50%;left:50%;overflow-y:scroll;height:60vh;background:#fff;transform:translate(-50%,-50%)}
.mask i.close{position:absolute;top:50px;right:50px;display:block;width:50px;height:50px;color:red;text-align:center;font-size:40px;line-height:50px;cursor:pointer;transition:all .2s}
.mask i.close:hover{color:#fff}
@media screen and (max-width:1300px) {
    .solu_tl{display: none;}
    .customer_guide .container{height:auto;display: flex;flex-wrap: wrap;justify-content: space-around;}
    .customer_guide .formula{padding:1rem;height: auto;}
    .customer_guide .cgimg{width: 56%;min-width:300px;position: relative;top: unset;right: unset;}
}
@media screen and (max-width:1024px) {
    .solu_case dl:nth-child(2){display: none;}   
}

@media screen and (max-width:812px) {
    .configlist .item{width: 100%;}
    .configlist .item .img2{opacity: 1;width: 50%; top: unset; left: unset; bottom: 0; right: 0;}
    .configlist .item h3{background: none; bottom: -50px; padding: 0;}
    .configlist .item h3 a{color: #333;}
    .configlist .item .txt{padding-top: 40px;}
    .configlist .item .button a{width: 40%;}
}
@media screen and (max-width:800px) {
    .solu_more dl{width: 100%;}
  .customer_guide .cgimg{display:none}
  .solu_case{padding:5rem 0}
    }
@media screen and (min-width:769px){
    .solu_cus{margin-top:5rem}
    .solution_list dl:hover{box-shadow:0 2px 5px 5px #ccc;transform:translateY(-10px)}
    
}
