@charset "utf-8";

/* CSS Document */



@import url('https://fonts.font.im/css?family=Aldrich');



#service{margin: 0 auto; padding: 75px 0;}

#service .title{ position: relative; text-align: center; margin: 0 auto;}

#service .title>h3{ position: relative;z-index: 20; font-size: 4rem; padding:30px 0 20px 0; font-weight: bold; color: #333;}

#service .title>h3:after{position: absolute;z-index: 1; left: 50%; bottom: 0;width:50px;height: 4px; background: #005d8a; transform: translateX(-50%); content: '';}

#service .title>h4{position: absolute;z-index: 1; left: 50%; top: 0; width: 100%; font-size: 6rem; color: #f3f3f3; transform: translateX(-50%); text-transform: uppercase;}

#service .layout{margin: 0 auto; padding: 100px 0; }

#service .layout>.lists{margin: 0 auto; }

#service .layout>.lists>ul{margin: 0 auto;}

#service .layout>.lists>ul>li{padding:20px; display: block;margin-bottom: 3%; position: relative; box-sizing: border-box; background: #f6f6f6; transition: all .35s; }

#service .layout>.lists>ul>li .img{ position: relative; width: 40%; height: 100%; float: left; background:#000; overflow: hidden;  text-align:center;}

#service .layout>.lists>ul>li .img>img{ width: 576px;height: 390px; transition: all .8s;}

#service .layout>.lists>ul>li .box{ width: 60%; float: right;text-align: left; box-sizing: border-box;padding: 6%; }

#service .layout>.lists>ul>li .box>.num{text-align: center;}

#service .layout>.lists>ul>li .box>.num>span{ font-family: 'Aldrich', sans-serif; font-size: 5rem; color: #005d8a;}

#service .layout>.lists>ul>li .box>.tit{ position: relative; font-size:2.8rem; font-weight: bold; color: #333; text-align: center; padding: 10px 0; text-overflow:ellipsis; white-space: nowrap; overflow: hidden; transition: all .35s;}

#service .layout>.lists>ul>li .box>.tit:after{position: absolute;z-index: 1; left: 50%; bottom: 0; transform: translateX(-50%); width: 30px; height: 1px; background: #005d8a; content: '';}

#service .layout>.lists>ul>li .box>.txt{ width:86%; margin: 20px auto; text-align: center; font-size: 1.6rem; color: #666; line-height: 3rem;}

#service .layout>.lists>ul>li:nth-child(even) .img{ float: right;}

#service .layout>.lists>ul>li:nth-child(even) .box{float: left;}

#service .layout>.lists>ul>li:hover .img>img{ transform: scale(1.06);}

#service .layout>.lists>ul>li:hover{background: #fff;box-shadow: 0 0 16px rgba(0,0,0,.1);}





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





    #service .layout>.lists>ul>li .img>span{position: absolute;z-index: 50; left: 0;bottom: 10%;opacity: 0; width: 100%; text-align: center; font-size: 1.6rem; }





}

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



    #service .layout>.lists>ul>li .box {padding: 5%; }

    #service .layout>.lists>ul>li .box>.txt{ width:100%; font-size: 1.5rem;}

    #service .layout>.lists>ul>li .box>.tit{ font-size:2.4rem;}







}

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



    #service .layout>.lists>ul>li .box{padding: 40px;}

    #service .layout>.lists>ul>li .box>.num>span{ font-size: 4rem; }

    #service .layout>.lists>ul>li .box>.txt{ font-size: 1.4rem; line-height: 2.4rem;}







}





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



    #service .title>h3{ font-size: 3.2rem;}

    #service .title>h4{font-size: 4.5rem;}





    #service .layout>.lists>ul>li .img{  width: 45%;}

    #service .layout>.lists>ul>li .box{ width: 55%; }



}



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



    #service .layout>.lists>ul>li .img{  width: 50%;}

    #service .layout>.lists>ul>li .box{ width: 50%; padding: 20px; }

    #service .layout>.lists>ul>li .box>.tit{ font-size: 2rem;}

}



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



    #service .title>h3{ font-size: 2.8rem;}

    #service .title>h4{font-size: 4rem;}



    #service .layout>.lists>ul>li .img{ float: none; width: 100%;}

    #service .layout>.lists>ul>li .box{ float: none; width: 100%; padding: 40px; }

    #service .layout>.lists>ul>li .box>.txt{width: 86%;}





}





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



    #service .layout{ padding: 50px 0; }

    #service .layout>.lists>ul>li .box{ padding: 30px 20px; }

    #service .layout>.lists>ul>li .box>.num>span {font-size: 3rem;}

    #service .layout>.lists>ul>li .box>.txt{width: 100%;}


    #service .layout>.lists>ul>li .img>img{ width: 100%; height: 185px; transition: all .8s;}


}





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



    #service{ padding: 60px 0;}

    #service .title>h3{ font-size: 2.4rem; padding: 15px 0;}

    #service .title>h4{font-size: 2.4rem;}









}