#mainview{width:100%;z-index: 0;}
#mainview ul {height:40vw;}
#mainview ul li{background:  url('/images/mainview.png') 0 0 no-repeat;height:auto;position: absolute;width: 100%;height:46vw;background-size: cover}
#mainview ul li:nth-child(2){background:  url('/images/mainview2.png') 0 0 no-repeat;background-size: cover}
#mainview ul li:nth-child(3){background:  url('/images/mainview3.png') 0 0 no-repeat;background-size: cover}
#mainview ul li:nth-child(4){background:  url('/images/mainview4.png') 0 0 no-repeat;background-size: cover}
#mainview ul li:nth-child(5){background:  url('/images/mainview5.png') 0 0 no-repeat;background-size: cover}
#mainview ul li:nth-child(6){background:  url('/images/mainview6.png') 0 0 no-repeat;background-size: cover}
#mainview ul li p{position: absolute;font-family: 'Rouge Script', cursive;width:6vw;text-align: center;opacity: 0}
#mainview ul li p.copy01{top:30vw;left:10vw;}
#mainview ul li p.copy02{top:3vw;left:34vw;}
#mainview ul li p.copy03{top:19vw;right:46.5vw;}
#mainview ul li p.copy04{top:30vw;right:28vw;}
#mainview ul li p.copy05{top:3vw;right:15vw;}
#mainview ul li p span{position: absolute;text-align: center;display: block;width: 100%;z-index: 2;margin-top:2vw;color:#fff;font-size:2.2vw;padding-left: 0.2vw;line-height: 100%;}
@media all and (-ms-high-contrast:none){
#mainview ul li p svg{display: table;height:6vw }
#mainview ul li p span{vertical-align: middle;display: table-cell;height:6vw }
}
#mainview ul li p svg{opacity: 0.7;width:6vw;}
#mainview ul li p svg .st01{fill: #ff7a81;}
#mainview ul li p svg .st02{fill: #41c9c9;}
#mainview ul li p svg .st03{fill: #ff7e2f;}
#mainview ul li p svg .st04{fill: #7a9d4d;}
#mainview ul li p svg .st05{fill: #3782c6;}
/*
#mainview ul li:nth-child(2) p,
#mainview ul li:nth-child(3) p,
#mainview ul li:nth-child(4) p,
#mainview ul li:nth-child(5) p,
#mainview ul li:nth-child(6) p{width:12vw !important;}
#mainview ul li:nth-child(2) p.copy01,
#mainview ul li:nth-child(3) p.copy02,
#mainview ul li:nth-child(4) p.copy03,
#mainview ul li:nth-child(5) p.copy04,
#mainview ul li:nth-child(6) p.copy05{top:4.5vw !important;right:12vw !important;left:auto !important;}
#mainview ul li:nth-child(2) p svg,
#mainview ul li:nth-child(3) p svg,
#mainview ul li:nth-child(4) p svg,
#mainview ul li:nth-child(5) p svg,
#mainview ul li:nth-child(6) p svg{width:12vw !important;}
#mainview ul li:nth-child(2) p svg .st01,
#mainview ul li:nth-child(3) p svg .st02,
#mainview ul li:nth-child(4) p svg .st03,
#mainview ul li:nth-child(5) p svg .st04,
#mainview ul li:nth-child(6) p svg .st05{width:9vw !important;}
#mainview ul li:nth-child(2) p span,
#mainview ul li:nth-child(3) p span,
#mainview ul li:nth-child(4) p span,
#mainview ul li:nth-child(5) p span,
#mainview ul li:nth-child(6) p span{font-size:5vw !important;padding-left: 0.2vw !important;margin-top:3.5vw !important;}
*/
#mainview img{width:100%;}
#mainview p.read{font-size:2vw;position: absolute;top:24.5vw;left:20vw;line-height: 140%;color:#fff;text-shadow: 0px 0px 10px #000,0px 0px 20px #000;letter-spacing: 0.1em}
#mainview p.read2{font-size:1.6vw;position: absolute;top:33.5vw;left:20vw;line-height: 140%;color:#fff;text-shadow: 0px 0px 10px #000,0px 0px 20px #000;letter-spacing: 0.05em}
#mainview p.fadeIn span{display: none;}

#contents {position: relative;}

#contents #service {margin-bottom: 100px;}
#contents #service div{float:left;text-align: center;padding-bottom: 25px;border-right: solid 1px #ccc;}
#contents #service div.service01{border-right: solid 1px #ccc !important;}
#contents #service div.service02 {border-right: none;}
#contents #service div.service04,
#contents #service div.service03{border-right: none;width:489px !important; }
#contents #service div.service01 span,
#contents #service div.service03 span{width:489px !important; }
#contents #service div.service04,
#contents #service div.service05,
#contents #service div.service02{width:489px;overflow: hidden;}
#contents #service div.service04 span,
#contents #service div.service05 span,
#contents #service div.service02 span{width:490px;}
#contents #service div span{display: block;margin-bottom: 5px;overflow: hidden;width:490px;height:260px;}
#contents #service div.service01 span{width:490px;}
#contents #service div span img{-moz-transition: -moz-transform 0.3s linear;-webkit-transition: -webkit-transform 0.3s linear;-o-transition: -o-transform 0.5s linear;-ms-transition: -ms-transform 0.3s linear;transition: transform 0.3s linear;width:100%;}
#contents #service div span img:hover{-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-o-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);}
#contents #service div h3{font-size:20px;padding:20px 0 12px;font-weight: bold ;}
#contents #service div h3 span{font-size:75%;display: block;border:none;margin-top: 10px;height: auto !important;}
#contents #service div p{font-size:14px;line-height: 160%;padding: 0 10px 15px;box-sizing: content-box}
#contents #service div a.btn{display: inline-block;width:200px;text-align: center;padding:12px 0;color:#fff;border-radius: 3px;line-height: 100% !important}
#contents .service01 h3{color: #ff7e2f}
#contents .service02 h3{color: #7a9d4d}
#contents .service03 h3{color: #3782c6}
#contents .service04 h3{color: #ff1b29}
#contents .service05 h3{color: #00913a}
#contents .service01 a{background: #ff7e2f}
#contents .service02 a{background: #7a9d4d}
#contents .service03 a{background: #3782c6}
#contents .service04 a{background: #ff1b29}
#contents .service05 a{background: #00913a}
#contents .service01 span{border-bottom: solid 3px #ff7e2f}
#contents .service02 span{border-bottom: solid 3px #7a9d4d}
#contents .service03 span{border-bottom: solid 3px #3782c6;}
#contents .service04 span{border-bottom: solid 3px #ff1b29;}
#contents .service05 span{border-bottom: solid 3px #00913a;}

.gradarea {border-bottom:none !important;}
.gradarea dl{float:left;margin: 10px 0;margin-right:41px;background: #fff;width:469px;height:94px;display: table;}
.gradarea dl:nth-child(2n){margin-right:0;}
.gradarea dl dt,
.gradarea dl dd{display: table-cell;vertical-align: middle;}
.gradarea dl dt{width:94px;}
.gradarea dl dt img{width:94px;}
.gradarea dl dt img.logo{opacity: 0.25}
.gradarea dl dd{padding:0 20px;}
.gradarea dl dd span{vertical-align: middle;}
.gradarea dl dd span.cat{text-align: center;display:inline-block;margin-left: 10px;}
.gradarea dl dd span.cat a{color:#fff;background: #d1b23a;font-size:11px;display:inline-block;width:73px;padding:1px 0;}
.gradarea dl dd span.copy{display:block;padding-top:5px;line-height: 120%;font-size:15px;}
.gradarea .btn{padding:30px 0 10px;}