@charset "UTF-8";

.wrap-rolling {position: relative; background:linear-gradient(to right, #0059BE, #0080B8);}
.wrap-rolling .frame {position: relative; max-width:128rem; width:100%; margin:0 auto;}
.wrap-rolling .slider {overflow: hidden;}
.wrap-rolling .slider li {position: relative; text-align: center;}
.wrap-rolling .slider li:first-child::before{content:''; position: absolute; top:2rem; left:0; width:1px; height: calc(100% - 4rem); background:rgba(255,255,255,0.1);}
.wrap-rolling .slider li::after {content:''; position: absolute; top:2rem; right:0; width:1px; height: calc(100% - 4rem); background:rgba(255,255,255,0.1);}
.wrap-rolling .img-box {position: relative;}
.wrap-rolling .img-box::after {content:''; position: absolute; right:-.8rem; top:-.7rem; width:2rem; height:2rem; background:rgba(124,213,255, .5); border-radius:50%; opacity:0; transition: .5s;}
.wrap-rolling li a:hover .img-box::after {opacity:1;}
.wrap-rolling .text {min-height:4rem; margin-top: 1rem;line-height: 2.2rem; }
.wrap-rolling .text span { background-image: linear-gradient(#7CD5FF, #7CD5FF); background-repeat: no-repeat; background-position: left 0 bottom 0; background-size: 0 1px; transition: background-size .5s; font-family:pmGOV; font-size: 1.5rem; color:#fff;}
.wrap-rolling li a {display: flex; flex-direction: column; align-items: center; justify-content: center; padding:2rem 1rem; min-height:15rem;}
.wrap-rolling li a:hover .text span {background-size:100% 1px; color: #7CD5FF}
.wrap-rolling li a:hover {background:rgba(13,60,155, 0.5); box-shadow: inset 0rem 1rem 1rem rgba(1,20,57,0.3);}
.wrap-rolling .control button {display: none; position: absolute; width:4rem; height:4rem; border:1px solid #fff; border-radius:50%; text-indent: -9999rem;}
.wrap-rolling .prev {left:0; top:50%; margin-top:-2rem; background:url(../images/ic-prev.png) no-repeat center / cover;}
.wrap-rolling .next {right:0; top:50%; margin-top:-2rem; background:url(../images/ic-next.png) no-repeat center / cover;}

@media screen and (max-width:1200px) {
    .wrap-rolling .slider {margin:0 9rem;}
    .wrap-rolling li a:hover {background:unset; box-shadow: unset;}
    .wrap-rolling .control button {display: block; margin-left:2rem; margin-right:2rem;}
}
@media screen and (max-width:767px) {
    .wrap-rolling {background:#005EBE;}
    .wrap-rolling .slider {margin:0 7.4rem;}
    .wrap-rolling li a {min-height:8rem; padding:1.5rem 1rem;}
    .wrap-rolling .img-box {display: none;}
    .wrap-rolling .text {margin-top: 0; align-content: center;}
    .wrap-rolling .text span {display: inline;}
    .wrap-rolling .control button {width:3.2rem; height:3.2rem;}
}