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


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

#service .title{ display: none; position: relative; text-align: center; margin: 0 auto;}
#service .title>h3{ position: relative;z-index: 20; font-size: 3.6rem; padding:30px 0 20px 0; font-weight: bold;}
#service .layout{margin: 0 auto; padding: 50px 0; }
#service .layout>.lists{margin: 0 auto; }
#service .layout>.lists>ul{margin: 0 auto;}
#service .layout>.lists>ul>li{display: block;margin-bottom: 10%; position: relative; box-sizing: border-box; transition: all .35s; }
#service .layout>.lists>ul>li .img{ position: relative; width: 40%; height: 100%; float: left; 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: 50px 100px; }
#service .layout>.lists>ul>li .box>.tit{ position: relative; font-size:3.6rem; font-weight: bold; color: #333; padding: 10px 0; margin: 0 auto; transition: all .35s;}
#service .layout>.lists>ul>li .box>.txt{ margin: 20px auto; font-size: 1.6rem; font-weight: 200; color: #666; line-height: 2.4rem;}
#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);}


@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; background: #00a2f5; }


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

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


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

    #service .layout>.lists>ul>li .box{padding: 40px 80px;}
    #service .layout>.lists>ul>li .box>.txt{ font-size: 1.4rem; line-height: 2rem;}

}


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


    #service .layout>.lists>ul>li .img{  width: 45%;}
    #service .layout>.lists>ul>li .box{ width: 55%; padding: 20px 60px; }
    #service .layout>.lists>ul>li .box>.tit{ font-size: 3.2rem;}


}

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

    #service .layout>.lists>ul>li .img{  width: 50%;}
    #service .layout>.lists>ul>li .box{ width: 50%; padding: 10px 0 0 60px; }
    #service .layout>.lists>ul>li:nth-child(even) .box{ padding: 10px 60px 0 0; }
}

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

    #service .layout>.lists>ul>li{margin-bottom: 30px;}
    #service .layout>.lists>ul>li .img{ float: none; width: 100%;}
    #service .layout>.lists>ul>li .box{ float: none; width: 100%;padding: 20px 0; }
    #service .layout>.lists>ul>li .box>.tit{ font-size: 2.8rem;}
    #service .layout>.lists>ul>li:nth-child(even) .box{ padding: 20px 0; }


}


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

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


}


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

    #service{ padding: 60px 0;}

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