@charset "utf-8";

#industries{ margin: 0 auto;}
#industries>.display{margin: 100px auto;}
#industries>.display .tab-nav{width: 120px; float: left; text-align: left;}
#industries>.display .tab-nav>ul{display: block;margin:  0 auto;}
#industries>.display .tab-nav>ul>li{position: relative;display: block;}
#industries>.display .tab-nav>ul>li>a{ position: relative; display: block;padding: 15px 20px;font-size: 1.8rem; color: #333;transition: all .35s;}
#industries>.display .tab-nav>ul>li>a:after{position: absolute;z-index: 1; left: 0; top: 50%; transform: translateY(-50%); width: 8px;height: 8px; background: #666; content: '';transition: all .35s;}
#industries>.display .tab-nav>ul>li>a:hover:after{background: #d70d19;}
#industries>.display .tab-nav>ul>li.active>a{color: #d70d19;}
#industries>.display .tab-nav>ul>li.active>a:after{background: #d70d19;}

#industries>.display .tab-box{position: relative; float: right; width: 80%; }
#industries>.display .tab-box .tab-item {display: none; width: 100%; }
#industries>.display .tab-box .tab-item .box{width: 40%;text-align: left; padding: 50px 0; box-sizing: border-box;}
#industries>.display .tab-box .tab-item .box>.title{ padding-bottom: 30px;}
#industries>.display .tab-box .tab-item .box>.title>span{ font-size: 2.4rem; font-family: Arial; color: #d70d19; text-transform: capitalize;}
#industries>.display .tab-box .tab-item .box>.title>h3{display: block;padding: 10px 0; font-size: 3.6rem; font-weight: normal; color: #18181b;}
#industries>.display .tab-box .tab-item .box>.intro{ text-align: left; font-size: 1.6rem; line-height: 2.8rem; color: #333;}
#industries>.display .tab-box .tab-item .box>.intro>p{margin-bottom: 20px;}
#industries>.display .tab-box .tab-item .img{width: 40%; text-align: right; padding-right: 30px; box-sizing: border-box;}
#industries>.display .tab-box .tab-item .img>img{max-width: 100%;height: auto;}
#industries>.display .tab-box .tab-item .detail{ clear: both; margin: 0 auto;}
#industries>.display .tab-box .tab-item .detail>.item{ margin-bottom: 30px;}
#industries>.display .tab-box .tab-item .detail>.item>.tit{ text-align: left;}
#industries>.display .tab-box .tab-item .detail>.item>.tit>span{display: inline-block; padding: 10px 0; position: relative; font-size: 1.6rem; font-weight: bold; color: #333;}
#industries>.display .tab-box .tab-item .detail>.item>.tit>span:after{position: absolute;z-index: 12; left: 0;bottom: 0; width: 50px;height: 2px; background: #d70d19; content: '';}
#industries>.display .tab-box .tab-item .detail>.item>.con{ padding: 30px 0; text-align: left; font-size: 1.4rem; line-height: 3rem; color: #666;}

#industries>.display .tab-box .current{display: block;}




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


    #industries>.display .tab-box .tab-item .box{width: 50%;}
}


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


    #industries>.display .tab-box .tab-item .box{width: 100%; float: none;padding-top: 20px;}
    #industries>.display .tab-box .tab-item .img{width: 100%; float: none; text-align: left; padding-right: 0}
    #industries>.display .tab-box .tab-item .detail{padding-top: 50px;}

}


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


    #industries>.display .tab-nav{width: 100%; float: none;}
    #industries>.display .tab-nav>ul>li{ display: block;float: left;margin-right: 2%; margin-bottom: 2%; width: 23.5%;box-sizing: border-box; text-align: center; background: #fff;  }
    #industries>.display .tab-nav>ul>li:nth-child(4n){margin-right: 0;}
    #industries>.display .tab-nav>ul>li>a{font-size: 1.6rem;}
    #industries>.display .tab-nav>ul>li>a:after{display: none;}
    #industries>.display .tab-nav>ul>li>a.active{ background: #d70d19; color: #fff;}

    #industries>.display .tab-box{float: none; width: 100%;}



}


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

    #industries>.display{margin: 0 auto; padding: 30px 0;}
    #industries>.display .tab-nav>ul>li{ width: 32%;}
    #industries>.display .tab-nav>ul>li>a{font-size: 1.4rem;}
    #industries>.display .tab-nav>ul>li:nth-child(4n){margin-right: 2%;}
    #industries>.display .tab-nav>ul>li:nth-child(3n){margin-right: 0;}

    #industries>.display .tab-box .tab-item .box{padding-top: 50px;}
    #industries>.display .tab-box .tab-item .box>.title>span{ font-size: 2rem;}
    #industries>.display .tab-box .tab-item .box>.title>h3{font-size: 3rem;}
    #industries>.display .tab-box .tab-item .box>.intro{ font-size: 1.4rem; line-height: 2.4rem; }


}


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

    #industries>.display .tab-box .tab-item .box>.title>span{ font-size: 1.8rem;}
    #industries>.display .tab-box .tab-item .box>.title>h3{font-size: 2.4rem;}

}