@charset "UTF-8";

@media only screen and (min-width:1080px){
    #service ul {
        width:1080px;
        margin-bottom:100px;
    }
    #service ul li{
        width:240px;
        height:120px;
        margin:0 40px 40px 0;
    }
    #service ul li:nth-child(4n){
        margin-right:0;
    }
    #service ul li a{
        height:120px;
    }
    #service ul li a img{
        /*margin-top:19px;*/
    }
    #service ul li a p{
        font-size:21px;
    }
    
    #fancybox-content div img{
        width:20%;
        height:auto;
        margin-top:100px;
        margin-bottom:20px;
    }
    .wrapimgBoxIn {
        width:800px;
        height:400px;
    }
    .wrapimgBoxIn .icon{
        margin-top:45px;
    }
    .wrapimgBoxIn p{
        text-align:center;
    }
    .wrapimgBoxIn h3{
        font-size:26px;
        margin-bottom: 35px;
    }
}

@media only screen and (min-width:751px) and (max-width:1079px){
    #service ul {
        width:100%;
        margin-bottom:100px;
    }
    #service ul li{
        width:30%;
        height: 14.5VW;
        margin:0 4% 4VW 0;
    }
    #service ul li:nth-child(3n){
        margin-right:0;
    }
    #service ul li:nth-child(4n){
        margin-right:4%;
    }
    #service ul li a{
        height:100px;
    }
    #service ul li a img{
        width: 100%;
        height: auto;
    }
    
    .wrapimgBoxIn {
        width:600px;
        height:300px;
    }
    .wrapimgBoxIn .icon{
        margin-top:45px;
    }
    .wrapimgBoxIn p{
        text-align:center;
    }
    .wrapimgBoxIn h3{
        font-size:26px;
        margin-bottom: 35px;
    }
    #fancybox-content div img {
        margin-top: 70px;
    }
}

@media only screen and (max-width:750px){
    #service ul {
        width:100%;
        margin-bottom:100px;
    }
    #service ul li{
        width:48%;
        height:24VW;
        margin:0 4% 4VW 0;
    }
    #service ul li:nth-child(2n){
        margin-right:0;
    }
    #service ul li a{
        height:100px;
    }
    #service ul li a img{
        width: 100%;
        height: auto;
    }
    #service ul li a p{
        font-size:16px;
    }
    
    #fancybox-content div img{
        width:45%;
        height:auto;
        margin-top:10px;
        margin-bottom:20px;
    }
    .wrapimgBoxIn .icon{
        margin-top:45px;
    }
    .wrapimgBoxIn p{
        text-align:center;
        width:70%;
        margin:0 auto;
        padding-bottom:10px;
    }
    .wrapimgBoxIn p br{
        display:none;
    }
    .wrapimgBoxIn h3{
        font-size:21px;
        margin-bottom: 0px;
    }

}

#service ul li{
    float:left;
    text-align: center;
}
#service ul li a{
    box-sizing:border-box;
    display: block;
    width:100%;
    background-color: #FFF;
    color:#000;
}

#service ul li a .icon,
.wrapimgBoxIn .icon{
    width:50px;
    height:50px;
    margin:10px auto 0px;
}
.wrapimgBoxIn h3{
    text-align:center;
    font-family: "Arial Black", sans-serif;
    font-weight:100;
}

#service ul li a:hover{
    text-decoration: none;
    color:#FFF;
}
#service ul li a p{
    text-align:center;
    font-family: "Arial Black", sans-serif;
    font-weight:100;
}
/*#service ul li:nth-child(1) a,*/
#inline-content01{
    border:4px solid #248baa;
}
#service ul li:nth-child(1) a .icon,
#inline-content01 .icon{
    background:url("../image/icons.png") left top no-repeat;
}
#service ul li:nth-child(1) a:hover{
    background-color: #248baa;
}
#service ul li:nth-child(1) a:hover .icon{
    background:url("../image/icons.png") left top -50px no-repeat;
}
/*#service ul li:nth-child(2) a,*/
#inline-content02{
    border:4px solid #9f583e;
}
#service ul li:nth-child(2) a .icon,
#inline-content02 .icon{
    background:url("../image/icons.png") left -50px top no-repeat;
}
#service ul li:nth-child(2) a:hover{
    background-color: #9f583e;
}
#service ul li:nth-child(2) a:hover .icon{
    background:url("../image/icons.png") left -50px top -50px no-repeat;
}
/*#service ul li:nth-child(3) a,*/
#inline-content03{
    border:4px solid #646a58;
}
#service ul li:nth-child(3) a .icon,
#inline-content03 .icon{
    background:url("../image/icons.png") left -100px top no-repeat;
}
#service ul li:nth-child(3) a:hover{
    background-color: #646a58;
}
#service ul li:nth-child(3) a:hover .icon{
    background:url("../image/icons.png") left -100px top -50px no-repeat;
}
/*#service ul li:nth-child(4) a,*/
#inline-content04{
    border:4px solid #ffc716;
}
#service ul li:nth-child(4) a .icon,
#inline-content04 .icon{
    background:url("../image/icons.png") left -150px top no-repeat;
}
#service ul li:nth-child(4) a:hover{
    background-color: #ffc716;
}
#service ul li:nth-child(4) a:hover .icon{
    background:url("../image/icons.png") left -150px top -50px no-repeat;
}
/*#service ul li:nth-child(5) a,*/
#inline-content05{
    border:4px solid #6d3c82;
}
#service ul li:nth-child(5) a .icon,
#inline-content05 .icon{
    background:url("../image/icons.png") left -200px top no-repeat;
}
#service ul li:nth-child(5) a:hover{
    background-color: #6d3c82;
}
#service ul li:nth-child(5) a:hover .icon{
    background:url("../image/icons.png") left -200px top -50px no-repeat;
}
/*#service ul li:nth-child(6) a,*/
#inline-content06{
    border:4px solid #f75c2f;
}
#service ul li:nth-child(6) a .icon,
#inline-content06 .icon{
    background:url("../image/icons.png") left -250px top no-repeat;
}
#service ul li:nth-child(6) a:hover{
    background-color: #f75c2f;
}
#service ul li:nth-child(6) a:hover .icon{
    background:url("../image/icons.png") left -250px top -50px no-repeat;
}
/*#service ul li:nth-child(7) a,*/
#inline-content07{
    border:4px solid #113985;
}
#service ul li:nth-child(7) a .icon,
#inline-content07 .icon{
    background:url("../image/icons.png") left -300px top no-repeat;
}
#service ul li:nth-child(7) a:hover{
    background-color: #113985;
}
#service ul li:nth-child(7) a:hover .icon{
    background:url("../image/icons.png") left -300px top -50px no-repeat;
}
/*#service ul li:nth-child(8) a,*/
#inline-content08{
    border:4px solid #e16b8c;
}
#service ul li:nth-child(8) a .icon,
#inline-content08 .icon{
    background:url("../image/icons.png") left -350px top no-repeat;
}
#service ul li:nth-child(8) a:hover{
    background-color: #e16b8c;
}
#service ul li:nth-child(8) a:hover .icon{
    background:url("../image/icons.png") left -350px top -50px no-repeat;
}

#fancybox-overlay {
    background-color: rgb(0,0,0)!important;
    opacity: 0.7!important;
}
#fancybox-left-ico, #fancybox-right-ico {
    width: 20px;
    height: 30px;
}
#fancybox-left-ico {
    background-image: url('../image/fancybox/ctrl.png');
    background-position: 0px 0px;
    left: 20px;
}
#fancybox-right-ico {
    background-image: url('../image/fancybox/ctrl.png');
    background-position: -20px 0px;
    left: auto;
    right: 20px;
}
#fancybox-close {
    bottom: -30px;
    right: 0px;
    left:auto;
    width: 23px;
    height: 23px;
    background: 
    transparent url('../image/fancybox/ctrl.png') -40px 0px;
}
#wrapimgBox {
    display:none;
}

#fancybox-content div{
    text-align:center;
}