/* Visual */
.visual{overflow:hidden; height:880px; background:#fff;  position: relative;}

.visual .swiper-container{
    height: 100%; position: relative;
    /* -webkit-transition: all ease-in-out .6s; transition: all ease-in-out .6s; */
    opacity: 0;
}
.visual .swiper-wrapper { height:100%; }
.visual .swiper-slide { overflow:hidden; height:100%;}
.visual .swiper-slide .background{
    height: 880px;
    /*transition-property: transform;
    transition-timing-function: linear;
    transition-delay: 1s;
    transition-duration: 0s;
    transform: scale(1.1);*/
}

/* .visual .swiper-slide.swiper-slide-active .background {
    transition-delay: 0s;
    transition-duration: 4s;
    transform: scale(1);
} */

.visual .background--1 { background: url('/child/img/visual/v1.jpg') no-repeat center / cover; }
.visual .background--2 { background: url('/child/img/visual/v2.jpg') no-repeat center / cover; }
.visual .background--3 { background: url('/child/img/visual/v3.jpg') no-repeat center / cover; }
.visual .swiper-container-initialized { opacity: 1; }
.swiper.swiper-container-initialized,
.swiper.swiper-container-initialized .swiper-pagination{
 -webkit-transform: none; transform: none; opacity: 1;
}

.visual .context {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    -webkit-box-align: center; -ms-flex-align: center;
    -webkit-box-pack: center; -ms-flex-pack: center;
    z-index: 2; position: absolute;
    top: 180px; left:0; right: 0; opacity:1;
    /* transition:all 1s ease 0.6s; */
    max-width: 1200px; width:100%; margin:0 auto;
    padding:100px 0px;
    align-items: flex-start;
}

.visual .context::before {
    content:""; display: block; background-color:rgba(2,35,69,.4);
    position: absolute; top:0; left:calc(-50vw + 600px);
    width:0; height:100%; z-index:-1; transition:all 1s ease 1s;
}


.visual .context h1 {position: relative; font-size:7.2rem; font-weight:600; color:#fff; margin:20px 0px 60px; line-height:1; top:0px; opacity:1;}
.visual .context p { position: relative;font-size:2.8rem; color:#dddddd; line-height:1; opacity:1; top:0px; margin-top:60px;}
/* .visual .context h1 {transition:all 1s ease 0.8s; position: relative; font-size:7.2rem; font-weight:600; color:#fff; margin:20px 0px 60px; line-height:1; top:40px; opacity:0;}
.visual .context p {transition:all 0.8s ease 0.3s; position: relative;font-size:2.8rem; color:#dddddd; line-height:1; opacity:0; top:40px; margin-top:60px;} */
.visual .context .more-button {
    max-width:180px; width:100%; background-color:#0455a9; color:#fff;
    padding:10px 30px; position: relative;
}
.visual .context .more-button i {
    background:url("/child/img/icon/more-btn.svg") no-repeat center;
    width:25px; height:6px; display: block;
    transition: all 0.3s ease; position: relative; right:-10px;
}

.visual .swiper-slide-active .context::before {width:calc(50vw + 250px);}

.visual-en{font-family: 'Saira', sans-serif !important;}
.visual-en .swiper-slide-active .context::before{width: 75vw}

/* .visual .swiper-slide-active .context {opacity:1;}
.visual .swiper-slide-active .context  h1 {top:0; opacity:1;}
.visual .swiper-slide-active .context p {top:0; opacity:1;} */

.visual .swiper-pagination{
    height: 4px; position: relative;
    left:0; top:0;
}

.visual .swiper-pagination.swiper-pagination-bullets {z-index: 2; position:relative; text-align: center; font-size: 0; height:100%; margin:0px -5px;}

.visual .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet{
    margin: 0 5px; width:10px; height:10px; background-color:transparent; border-radius:50%;
    border:1px solid #fff;
    -webkit-transition: all ease .2s; transition: all ease .2s; opacity:1; position: relative;
}

.visual .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active {
    width:40px; background-color:#fff;  border-radius:20px;
}


@media (min-width:1201px) {

    .visual .context .more-button:hover {background-color:#0c4c8e;}
    .visual .context .more-button:hover i {right:-20px;}

}


@media (max-width:1200px) {

    .visual {height:600px;}
    .visual .context::before {left: calc(-50vw + 500px);}
    .visual .swiper-slide .context {
        padding:60px 40px; top:50%; transform: translateY(-50%);
        max-width:960px;
    }

    .visual .context::before {left:0;}


}

@media (max-width:1024px) {

    .visual {height:460px;}
    .visual .swiper-slide .context {max-width:none; width:auto; margin:0 10px;}
    .visual .context::before {width:100%;}
    .visual .context p {font-size:2rem; margin-top:40px;}
    .visual .context h1 {font-size:4rem; margin:20px 0px 40px;}
    .visual .context .more-button {max-width:150px; padding:10px 20px; font-size:1.3rem;}

}

@media (max-width:768px) {

    .visual .context p {font-size:1.8rem; margin-top:30px;}
    .visual .context h1 {font-size:2.8rem;}



}

@media (max-width:480px) {


    .visual {height:360px;}
    .visual .swiper-slide .context {padding:40px 0px;}
    .visual .context::before {display:none;}


}

/*section*/
.section {padding:130px 0px; text-align: center; font-size:1.8rem;}
.section-title {font-size: 5.6rem; font-weight:700; color:#222; line-height:1;}
.section-subtitle {font-size:1.8rem; color:#033c77; font-weight:400; margin-top:10px;}
.section-subtitle::after {
    content:""; display: block; width:30px; height:2px;
    background-color:#033c77; margin:30px auto 40px;
}
.section-title-en::after {
    content:""; display: block; width:30px; height:2px;
    background-color:#033c77; margin:30px auto 40px;
}


/*intro*/
.section--intro .lists {display: flex; margin-top:80px; align-items: center;}
.section--intro .lists img {display: block; margin:0 auto;}
.section--intro .lists strong {font-size:2.8rem; font-weight:700; color:#222; padding-right:15px;}
.section--intro-en .lists strong {font-size: 2.4rem}
.section--intro .lists li {width:33.3333%; padding:20px 80px; border-right:1px solid #e0e0e0;}
.section--intro .lists li:last-child {border-right:0px;}
.section--intro .lists li .icon-title {display: inline-flex; align-items: center; justify-content: center; margin-top:20px; position: relative; padding-bottom:5px;}
.section--intro .lists li .arrow {font-size:0; font-style: normal; background:url("/child/img/main/arrow.svg") no-repeat center; width:12px; height:20px;}
.section--intro .lists li .icon-title::after {content:""; display: block; height:4px; width:0; background-color:#033c77; position: absolute; left:0; bottom:0; transition:all 0.3s ease;}


/*ability*/
.section--ability {
    background:#033c77 url('/child/img/main/section-ability-background.png') no-repeat center;
}
.section--ability p {color:#fff;}
.section--ability img {display: block;}
.section--ability .section-title {color:#fff;}
.section--ability .section-subtitle {color:#afd5fd;}
.section--ability .section-subtitle::after {background-color: #fff;}
.section--ability .section-title-en::after {background-color: #fff; margin: 40px auto;}
.section--ability ul {display: flex; justify-content: center; margin:80px -10px 0;}
.section--ability li {width:33.3333%; padding:0px 10px; display: flex;}
.section--ability li a { display:flex; flex-direction: column;}
.section--ability .thumb-img {
    width:100%; padding-top:calc(288/384*100%);
    background-repeat:no-repeat; background-position: center;
    background-size: cover; z-index:2;
}
.section--ability .thumb-box {text-align: left; flex-grow:1; position: relative;display: flex;}
.section--ability .thumb-box::before{content:"";display: block; width:5%; height:100%; background-color:#999; position: relative; left:0; top:-20px;}
.section--ability .thumb-box p {color:#6e6e6e; font-size:1.8rem;}
.section--ability .thumb-box .thumb-title {font-size:2.8rem; font-weight:700; color:#222; line-height:1; margin-bottom:20px;}
.section--ability .thumb-box div { padding:40px 40px 60px;background-color: #fff; width:100%; position: relative;}
.section--ability .thumb-box div::after {
    content:""; display:block; width:48px; height:48px; border:1px solid #ccc; position: absolute; right:0; bottom:0;
    background:#fff url("/child/img/main/plus.png") no-repeat center;
    transition:all 0.3s ease;
}
.section--ability .box-blue::before{background-color:#1a4663;}
.section--ability .box-darkblue::before{background-color:#162435;}
.section--ability .box-gray::before{background-color:#ceced2;}


@media (min-width:1201px) {

    .section--intro .lists li a:hover strong {color:#033c77;}
    .section--intro .lists li a:hover .icon-title::after {width:100%;}
    .section--intro .lists li a:hover .arrow {background-image:url("/child/img/main/arrow-on.svg");}


    .section--ability li a:hover .thumb-box div::after {

        background:#222 url("/child/img/main/plus-on.png") no-repeat center;
        border-color:#222;

    }

}


@media (max-width:1200px) {

}

@media (max-width:1024px) {

    .section {padding:80px 0px; font-size:1.6rem;}
    .section-title {font-size:3.8rem;}
    .section-subtitle::after {margin:20px auto 30px;}

    /*intro*/
    .section--intro .lists {margin-top:50px;}
    .section--intro .lists li {padding:20px 50px;}
    .section--intro .lists strong {font-size:2rem; padding-right:10px;}
    .section--intro .lists li .arrow {height:16px;}

    /*ability*/
    .section--ability ul { margin-top:50px;}
    .section--ability .thumb-box div {padding:30px 30px 50px;}
    .section--ability .thumb-box .thumb-title {font-size:2rem;}
    .section--ability .thumb-box p {font-size:1.6rem;}


}

@media (max-width:768px) {

    .section {font-size:1.4rem;}
    .section-title {font-size:2.6rem;}
    .section-subtitle {font-size:1.6rem;}

    /*intro*/
    .section--intro .lists li {padding:20px 0px;}
    .section--intro .lists strong {font-size:1.8rem; padding-right:10px;}

    /*ability*/
    .section--ability ul {flex-wrap: wrap;}
    .section--ability .thumb-box::before {display: none;}
    .section--ability .thumb-box .thumb-title {font-size:1.6rem;}
    .section--ability .thumb-box p {font-size:1.4rem;}

}

@media (max-width:680px){


    /*ability*/
    .section--ability ul {margin-bottom:-30px;}
    .section--ability li {width:100%; padding-bottom:30px;}
    .section--ability li a {width:100%;}
    .section--ability .thumb-box div::after {width:42px; height:42px;}


}

@media (max-width:480px) {

    .section--intro .lists {flex-wrap:wrap; margin-top:30px;}
    .section--intro .lists li {width:100%; border-right:none;}

}