@charset "utf-8";
.pT3{ padding-top:30px; }
/*unitTop*/
.unitTop{position: relative; width: 100%; height: 0; padding-bottom: 52%; display: block; color:#fff; text-align: center;  margin: 0 0 50px;}
.unitTop.sty01{background: url(../images/img/bn_1440x750_03.jpg) no-repeat; background-size:cover; }
.unitTop.sty02{background: url(../images/img/bn_1440x750_04.jpg) no-repeat; background-size:cover; }
.unitTop.sty03{background: url(../images/img/bn_1440x750_05.jpg) no-repeat; background-size:cover; }
.unitTop.sty04{background: url(../images/img/bn_1440x750_06.jpg) no-repeat; background-size:cover; }
.unitTop.sty05{background: url(../images/img/bn_1440x750_07.jpg) no-repeat; background-size:cover; }
.unitTop .titBox{ position: absolute; top:50%; left: 50%; width:770px; height: 250px; margin: -125px -385px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(0,0,0,.0); border-left:8px solid rgba(255,255,255,.5);border-right:8px solid rgba(255,255,255,.5);border-bottom:8px solid rgba(255,255,255,.5); transition: all .3s; }
.unitTop .titBox div{ position: absolute; top:-36px; left:-8px; width:calc(100% + 16px); display: flex; align-items: center;}
.unitTop .titBox h2{  word-break: keep-all; padding: 0 10px; font-size: 64px; line-height: 100%; text-shadow: 0 0 15px rgba(0,0,0,.3);}
.unitTop .titBox span{  flex:1 1 40%; height: 8px; display: inline-block; background: rgba(255,255,255,.5);}
.unitTop .titBox p{ font-size: 40px; font-weight: 400; line-height: 100%; text-shadow: 0 0 15px rgba(0,0,0,.3); letter-spacing: 3px; margin: 5px 0;}
.unitTop .titBox p.B{ font-weight: 600;}

/*spNav*/
.spNav{position: relative; width:100%; height: 150px; display: block; margin:80px 0 0;  color:#fff;background: linear-gradient(to right, #94c7e4 0%, #a0d5d5 60%); }
.spNav ul{ position: absolute; top:-50px; left: 50%; margin: 0 -450px; width: 900px; display: flex; justify-content:space-around; align-items: stretch; }
.spNav ul li{position: relative;cursor: pointer; display: flex; justify-content: center; flex-direction: column; align-items: center;text-align: center; font-size: 20px;font-weight:400; text-shadow: 0 0 5px rgba(0,0,0,.2);}
.spNav ul li::before{content:''; width:120px; height: 120px; display: block; margin: 0 auto 10px; border-radius:99em; background-color: #007d7d;background-size:85px auto; transition: all .3s;}
.spNav ul li:hover::before{background-color: #d56133;}
.spNav ul li img{ position: absolute; top:20px; left: 50%; margin: 0 -45px; width:90px; height: auto;}
.spNav.top{margin:0;  height: auto; padding: 15px 0;}
.spNav.top ul{ position: static; margin: 0 auto;}
.spNav.top ul li::before{ margin: 0 auto 5px; }
.spNav.top ul li span{line-height: 1.1; height: 45px;display: flex; align-items: center; width: 100px;justify-content: center;}
@media screen and (max-width: 900px) {
    /*unitTop*/
    .unitTop .titBox{ width:500px; height: 250px; margin: -125px -250px; }

    /*spNav*/
    .spNav ul{left: 0; margin: 0;padding: 0 10px ; width:100%;  }
    .spNav ul li::before{width:100px; height: 100px;background-color: #007d7d;background-size:80px auto; }
    .spNav ul li img{ position: absolute; top:15px; left: 50%; margin: 0 -40px; width:80px; height: auto;}
}



@media screen and (max-width: 767px) {
    /*unitTop*/
    .unitTop{width:100%; height: 0; padding-bottom: 78%; }
    .unitTop.sty01{background: url(../images/img/bn_1440x750_03.jpg) center top no-repeat; background-size:auto 100%;}
    .unitTop.sty02{background: url(../images/img/bn_1440x750_04.jpg) center top no-repeat; background-size:auto 100%;}
    .unitTop .titBox{ position: absolute; top:45px; left: 15px; width:calc(100% - 30px); height:calc(100% - 60px); margin: 0;  }
    .unitTop .titBox div{ position: absolute; top:-19px;}
    .unitTop .titBox h2{ font-size: 30px;}
    .unitTop .titBox p{ font-size: 20px;}
    /*spNav*/
    .spNav{height: auto; display: block; margin: 0 ; padding: 25px 10px 10px;}
    .spNav ul{ position: static;  flex-wrap: wrap;  padding: 0;}
    .spNav ul li{ font-size: 15px;  width: 33%; margin: 0 0 10px;}
    .spNav ul li::before{ width:80px; height: 80px; background-size:65px auto;  margin: 0 0 5px;}
    .spNav ul li img{  top:10px; left: 50%; margin: 0 -33px; width:66px; height: auto;}
    .spNav.top ul li span{height: 30px;}
    .spNav.top{padding: 20px 0 15px 0; margin:0 0 20px; }
}