@charset "utf-8";
/* CSS Document */

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

#service{margin: 0 auto; padding: 150px 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: #c7000c; 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{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: 100%;height: auto; 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: #c7000c;}
#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: #c7000c; 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%;}

}


@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;}




}