@charset "utf-8";

#industries{margin: 0 auto;}
#industries .wrap{margin: 0 auto; padding: 100px 0;}

#industries .theme{ margin: 0 auto;}
#industries .theme>.title{display: block; text-align: left; margin: 0 auto;}
#industries .theme>.title>h3{ position: relative; padding-bottom: 20px; display: block; font-size: 3.2rem; color: #333;}
#industries .theme>.intro{ width: 70%; margin: 0 auto; padding: 30px 0; text-align: center;font-size: 1.6rem; color: rgba(255,255,255,.5); line-height: 2.4rem;}

#industries .container{margin: 0 auto; padding: 50px 0;}
#industries .container>.lists{margin: 0 auto;}
#industries .container>.lists>ul{margin: 0 auto;}
#industries .container>.lists>ul>li{ position: relative; z-index: 10; display: block; float: left; width: 48.5%; margin-bottom: 3%; background: #fff; box-shadow: 0 2px 16px rgba(0,0,0,.1); overflow: hidden; box-sizing: border-box; transition: all .35s;}
#industries .container>.lists>ul>li:after{position: absolute; z-index: 1; right: 8px; bottom: 8px; opacity: 0; width: 0; height: 0; content: ''; border-bottom: 14px solid #cc151e; border-left: 14px solid transparent; -webkit-transition: all .35s; transition: all .35s;}
#industries .container>.lists>ul>li:nth-child(even){ float: right;}
#industries .container>.lists>ul>li a{display: block;zoom: 1; position: relative; text-align: left;}
#industries .container>.lists>ul>li a:before, #industries .container>.lists>ul>li a:after { content: ""; display: table; }
#industries .container>.lists>ul>li a:after { clear: both; }
#industries .container>.lists>ul>li a>.img{ position: relative; overflow: hidden; width: 45%; float: left; text-align: left;}
#industries .container>.lists>ul>li a>.img>img{transition: all 1s;}
#industries .container>.lists>ul>li a>.box{ position: relative; width: 55%; height: 100%; float: right; z-index: 10; box-sizing: border-box; padding: 50px 50px 0 50px; overflow: hidden;transition: all .35s;}
#industries .container>.lists>ul>li a>.box>.ico{ position: relative;}
#industries .container>.lists>ul>li a>.box>.ico>img{ width: 50px;height: auto;filter:grayscale(100%); opacity: .3; transition: all .35s;}
#industries .container>.lists>ul>li a>.box>.title{ padding: 10px 0; position: relative; font-size: 1.8rem;line-height: 2rem; color: #000; transition: all .35s;}
#industries .container>.lists>ul>li:hover{ box-shadow: 0 2px 16px rgba(40,27,110,.3);}
#industries .container>.lists>ul>li a:hover .img>img{ transform: scale(1.1);}
#industries .container>.lists>ul>li:hover:after{opacity: 1; }
#industries .container>.lists>ul>li:hover .box>.title{color: #281b6e;}
#industries .container>.lists>ul>li:hover .box>.ico>img{filter:grayscale(0);opacity: 1;}


#industries .view{margin: 0 auto;}
#industries .view>.title{ font-size: 3.6rem; font-weight: bold; line-height: 4rem; color: #000; margin:  0 auto; text-align: center;}
#industries .view>.layout{margin: 0 auto; padding: 50px 0;}
#industries .view>.layout .details{ width: 100%; float: none; text-align: left;}
#industries .view>.layout .details>.content{ margin: 0 auto;padding: 30px 0; text-align: left; font-size: 1.6rem; color: #333; line-height: 2.4rem;}
#industries .view>.layout .details>.content>p{margin-bottom: 20px;}
#industries .view>.layout .details>.share .social-share .social-share-icon { width: 30px;height: 30px; line-height: 30px; font-size: 1.4rem;}
#industries .view>.layout .details>.share .social-share .social-icon-facebook{ background: #44619D; border-color: #44619D; color: #fff;}
#industries .view>.layout .details>.share .social-share .social-icon-X{ background: #000; border-color: #000; color: #fff;}
#industries .view>.layout .details>.share .social-share .social-icon-google{ background: #db4437; border-color: #db4437; color: #fff;}
#industries .view>.layout .details>.share .social-share .social-icon-linkedin{ background: #0077B5; border-color: #0077B5; color: #fff;}
#industries .view>.layout .img{ display:none;  width: 35%; box-sizing: border-box; text-align: left;}


@media only screen and (max-width: 1460px){

    #industries .container>.lists>ul>li a>.box>.title{ font-size: 1.6rem;}


    #industries .view>.title{ font-size: 3rem;}


}



@media only screen and (max-width: 1280px){

    #industries .theme>.title>h3 {font-size: 2.8rem;}


    #industries .container>.lists>ul>li a>.box>.ico>img { width: 42px;}

    #industries .view>.title{ font-size: 2.8rem;}


}

@media only screen and (max-width: 1200px){

    #industries .container>.lists>ul>li a>.box { padding: 30px 30px 0 30px; }


}

@media only screen and (max-width: 1080px){



    #industries .container>.lists>ul>li{ float: none; width: 100%; }
    #industries .container>.lists>ul>li:nth-child(even){ float: none;}
    #industries .container>.lists>ul>li a>.img{ width: 35%;}
    #industries .container>.lists>ul>li a>.box{ width: 65%; padding: 80px 80px 0 80px;}


}


@media only screen and (max-width: 860px){

    #industries .theme>.title>h3 { font-size: 2.4rem;}

    #industries .container>.lists>ul>li a>.box { padding: 50px 50px 0 50px; }

    #industries .view>.title{ font-size: 2.4rem; line-height: 3rem;}
    #industries .view>.layout .details { width: 100%; float: none;}
    #industries .view>.layout .details>.content{ font-size: 1.4rem;line-height: 2rem;}
    #industries .view>.layout .img { width: 100%; float: none; text-align: center;}
    #industries .view>.layout .img>img{max-width: 100%;height: auto;}



}



@media only screen and (max-width: 640px){

    #industries .wrap{padding: 50px 0;}

    #industries .theme>.title>h3 { font-size: 2rem;}

    #industries .container>.lists>ul>li a>.box { padding: 30px 30px 0 30px; }
    #industries .container>.lists>ul>li a>.box>.title { font-size: 1.4rem;}


    #industries .view>.title{ font-size: 2rem; line-height: 2.4rem;}

}


@media only screen and (max-width: 520px){


    #industries .container>.lists>ul>li a>.img{width: 50%;;}
    #industries .container>.lists>ul>li a>.box{width: 50%;}
    #industries .container>.lists>ul>li a>.box>.ico>img { width: 28px;}
    #industries .container>.lists>ul>li a>.box>.title {font-size: 1.2rem; line-height: 1.6rem;}
}


