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


#service{margin: 0 auto; padding-top: 60px;}
#service>.title{ text-align: center; margin: 0 auto;padding: 50px 0;}
#service>.title>h3{ font-size: 4rem; font-weight: normal; color: #333; margin: 0 auto;}

#service>.content{margin: 0 auto; padding: 50px 0 100px 0;}
#service>.content .box{width: 55%; box-sizing: border-box; padding: 30px 100px 30px 0;}
#service>.content .box>.tit{ padding: 30px 0; font-size: 3rem; color: rgba(1,83,139,1);}
#service>.content .box>.txt{ font-size: 1.6rem; color: #333; line-height: 2.8rem;}
#service>.content .box>.txt>p{ margin-bottom: 20px;}
#service>.content .img{width: 45%; text-align: left;}
#service>.content .img>img{width: 100%; height: auto;}

#service>.idea{ background:url("../image/service_bg.jpg") no-repeat; background-size: cover; margin: 0 auto; padding: 80px 0;}
#service>.idea>.title{ text-align: center; margin: 0 auto; padding-top: 50px;}
#service>.idea>.title>h3{ font-size: 4rem; font-weight: normal; color: #333; margin: 0 auto;}
#service>.idea>.box{margin: 0 auto; max-width: 1300px; padding: 80px 0;}
#service>.idea>.box>.item{ float: left; width: 48%; padding: 50px 0; text-align: left; transition: all .5s;}
#service>.idea>.box>.item:nth-child(even){float: right;}
#service>.idea>.box>.item>.icon{width: 100px;}
#service>.idea>.box>.item>.icon>img{width: 100%;height: auto;}
#service>.idea>.box>.item>.con{width: 80%; padding:10px 30px;box-sizing: border-box;}
#service>.idea>.box>.item>.con>.tit{font-size: 2rem; color: rgba(1,83,139,1);}
#service>.idea>.box>.item>.con>.txt{ margin: 10px 0; font-size: 2.4rem; color: #999;}


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

    #service>.content .box{padding: 10px 100px 10px 0;}
    #service>.content .box>.tit{ padding: 20px 0; font-size: 2.4rem;}

}

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

    #service>.content .box>.txt{ font-size: 1.4rem; line-height: 2.4rem;}
    #service>.idea>.box>.item>.con>.txt{ font-size: 2.2rem;}
}

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

    #service>.content .box>.tit{ font-size: 2rem;}

    #service>.idea>.box>.item{text-align: center;}
    #service>.idea>.box>.item>.icon{float: none; margin: 0 auto;}
    #service>.idea>.box>.item>.con{ float: none; width: 100%; padding:10px 0;}
    #service>.idea>.box>.item>.con>.txt{ font-size: 2rem;}

}

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

    #service>.content .box{width: 100%; float: none; padding: 0; }
    #service>.content .img{width: 100%; float: none;}

}



@media only screen and (max-width: 980px) {
    #service{padding-top: 30px;}
    #service>.title{padding: 10px 0;}
    #service>.title>h3{ font-size: 3.2rem;}

    #service>.idea>.title{ padding-top: 30px;}
    #service>.idea>.title>h3{ font-size: 3.2rem;}
    #service>.idea{padding: 30px 0;}


}

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

    #service>.idea>.box{padding: 30px 0;}
    #service>.idea>.box>.item>.icon{width: 80px;}
    #service>.idea>.box>.item>.con>.tit{font-size: 1.8rem;}
    #service>.idea>.box>.item>.con>.txt{ height: 56px; font-size: 1.8rem;}

}


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

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

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

    #service>.idea>.box>.item{ padding: 30px 0;}
    #service>.idea>.box>.item>.con>.tit{font-size: 1.6rem;}
    #service>.idea>.box>.item>.con>.txt{ height: 46px; font-size: 1.6rem;}

}

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

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

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

}