/* Visual */
.visual { position: relative; height: calc(100vh - 130px); padding: 90px 0 0; }
.visual-wrap { position: relative; }
.visual-slide,
.visual-slide .slick-list,
.visual-slide .slick-list .slick-track { height: 100%; }
.visual-slide .slick-dots li { margin: 0 3px; width: 50px; height: 3px; background: rgba(255,255,255,.5); }
.visual-slide .slick-dots li.slick-active { background: rgba(255,255,255,1); }
.slide-btn-wrap { z-index: 2; position: absolute; bottom: 190px; left: 0; right: 0; margin: auto; max-width: 1050px; width: 100%; padding-left: 55px; font-size: 0; }
.visual-slide .slick-prev { z-index: 2; left: 60px; width: 75px; height: 75px; background: url('/renewal/img/renewal/slide-prev.png') no-repeat center; }
.visual-slide .slick-next { z-index: 2; right: 60px; width: 75px; height: 75px; background: url('/renewal/img/renewal/slide-next.png') no-repeat center; }
._v { height: 100%; }
._v .centre,
._v .centre .inner { display: block; }
._v .centre { position: relative; z-index: 2; }
.v-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
._v.on .v-bg{
    -webkit-transition: linear 6s;
    transition: linear 6s;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
._v.bg-on .v-bg{
    -webkit-transition: linear 6s;
    transition: linear 6s;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
._v .text-wrap { padding: 110px 0 0; text-align: center; }
.visual .visual-slide { background: url('/renewal/img/main/v1.jpg') no-repeat center / cover; }
._v h3 {
    line-height: 64px; font-size: 53px; font-weight: 200; color: #111111;
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    opacity: 0;
}
._v .color-point { color: #0490b5 !important; }
._v .color-blue { color: #3458cc !important; }
._v.on h3 {
    -webkit-transition: cubic-bezier(0.52, 0.03, 0.48, 1) .6s .5s;
    transition: cubic-bezier(0.52, 0.03, 0.48, 1) .6s .5s;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
}
.smo { display: none; }
@media (max-width: 1024px){
    .visual { padding: 30px 0 0; height: 500px !important; }
    .slide-btn-wrap { display: none; }
    .visual-slide .slick-dots { bottom: 25px; }
    .visual-slide .slick-dots li { width: 30px; height: 5px; }
    ._v .text-wrap { padding: 80px 0 0 0; }
    ._v { height: 300px; }
    ._v h3 { line-height: 40px; font-size: 34px; }
    ._v p { display: none; margin-top: 10px; line-height: 24px; font-size: 16px; }
}

@media (max-width: 768px){
    .visual { padding-top: 50px; }
    ._v { height: 270px; }
    ._v .text-wrap { padding: 45px 0 0 0; }
    ._v h3 { line-height: 30px; font-size: 24px; }
}
@media (max-width: 520px){
    .visual { height: 360px !important; }
}
@media (max-width: 375px){
    .visual { height: 320px !important; }
}
@media(max-width:345px){
    .smo { display: block; }
}


/* Section Box */
.section-box:after { content: ''; display: block; clear: both; }
.section-box {
    position: absolute; bottom: 165px; left: 0; right: 0; margin: auto; max-width: 1080px; width: 100%;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0;
    -webkit-animation: fade-up .6s ease .6s forwards;
    animation: fade-up .6s ease .6s forwards;
}
@keyframes -webkit-fade-up {
    from {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }
}
@keyframes fade-up {
    from {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }
}

.sbox { float: left; display: block; height: 210px; background: #fff; -webkit-transition: all ease .1s; transition: all ease .1s; }
.sbox h4 { font-size: 23px; color: #fff; }
.sbox p { margin: 7px 0 26px; line-height: 22px; font-size: 15px; color: rgba(255,255,255,.6); }
.sbox em { display: inline-block; padding: 0; width: 88px; line-height: 30px; height: 30px; font-style: normal; font-size: 15px; color: #fff; background: url('/renewal/img/icon/a-link.png') no-repeat left bottom; }
.sbox em:after { content: none; }
.sb1 { padding: 34px 42px; width: 30%; background: rgba(0,135,170,.95); }
.sb2 { padding: 34px 42px; width: 30%; background: rgba(68,102,200,.95); }
.sb3 { width: 40%; }
.box-l { float: left; width: 50%; height: 100%; border-right: 1px solid #e5e5e5; }
.box-r { float: left; width: 50%; height: 100%; }
.box-l a { display: block; width: 100%; height: 100%; -webkit-transition: all ease .1s; transition: all ease .1s; }
.s-ul { padding: 0 25px; }
.s-ul li { border-bottom: 1px solid #e5e5e5; }
.s-ul li:last-child { border-bottom: none; }
.s-ul li a { display: block; position: relative; padding: 0 10px 0 32px; line-height: 44px; font-size: 15px; -webkit-transition: all ease .1s; transition: all ease .1s; }
.s-ul li a:after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; margin: auto; width: 7px; height: 13px; background: url('/renewal/img/main/s-link.png') no-repeat right center; }
.s-li1 { background: url('/renewal/img/main/s-li1.png') no-repeat left center; }
.s-li2 { background: url('/renewal/img/main/s-li2.png') no-repeat left center; }
.s-li3 { background: url('/renewal/img/main/s-li3.png') no-repeat left center; }

@media(min-width:1025px){
    .sb1:hover { background: rgba(6,146,182,.95); }
    .sb2:hover { background: rgba(55,100,230,.95); }
    .box-l a:hover { background-color: #f9f9f9; }
    .s-ul li a:hover { background-color: #f9f9f9; }
}
@media (max-width:1024px) {
    .section-box { position: static; animation-delay: 0s; }
    .section-box-wrap { display: flex; flex-wrap: wrap; }
    .sb1 { order: 2; padding: 20px 24px 24px; width: 50%; }
    .sb2 { order: 1; padding: 20px 24px 24px; width: 50%; }
    .sb3 { order: 3; width: 100%; }
    .sbox { height: auto; }
    .sbox h4 { font-size: 18px; }
    .sbox p { margin: 7px 0 16px; font-size: 14px; }
    .sbox em { font-size: 14px; }
    .s-ul li a { font-size: 14px; }
    .box-l img { width: auto; height: 100px; }
}
@media (max-width:550px) {
    .sb1 { width: 100%; }
    .sb2 { width: 100%; }
    .sb3 { width: 100%; height: auto; }
    .box-l { width: 100%; height: 145px; border-right: none; border-bottom: 1px solid #e5e5e5; }
    .box-r { width: 100%; height: 180px; }
}