/*common css*/
/* *{box-sizing: border-box !important;} */
.section {position: relative;}
.section h3 {font-size:4.2rem; line-height:1.3;}
.section p {font-size:1.8rem; line-height: 1.3}


/*visual*/
.visual{
    overflow: hidden; height: 660px; background: #000;
}
.visual .swiper-container{
    height: 100%;
    -webkit-transition: all ease-in-out .6s; transition: all ease-in-out .6s;
}
.visual .swiper-wrapper { height: 100%; }
.visual .swiper-slide { overflow: hidden; height: 100%; }
.visual .background{
    height: 660px;
    -webkit-transition: all ease-in-out 1s; transition: all ease-in-out 1s;
    -webkit-transform: scale(1.1); transform: scale(1.1);
}
.visual .background--1 { background-image: url('/child/img/visual/v1.jpg'); }
.visual .background--2 { background-image: url('/child/img/visual/v2.jpg'); }
.visual .background--3 { background-image: url('/child/img/visual/v3.jpg'); }

.visual .context {

    display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2;
    position: absolute; top:0; left: 0; right: 0;
    margin: auto; max-width: 1200px; width: 100%; height: 100%; color: #fff;
    transition: all 1s ease; opacity:0; top:80px;

}

.visual .context h1 {

    font-size: 4.6rem; font-weight:700;

}

.swiper-slide-active .context {

    top:0; opacity: 1;

}

/* .swiper-slide-active .context h1 {

    top: auto; opacity: 1;

} */

/*position: relative; top:; opacity:1; transition:all 0.3s;
animation:sliding 1s; animation-fill-mode: forwards;*/

/* @keyframes sliding {

    0%{top:50px; opacity:0;}
    100%{top:0; opacity:1;}

} */


.visual .context p {margin-top:30px; font-size:2.6rem; font-weight:500;}


.scroll-down {

    position: absolute; bottom:50px; left:50%; transform: translateX(-50%); color:#fff; z-index:6;

}

.scroll-down::before {
    content: ""; width:1px; height:50px; background-color:rgba(255,255,255,.3); display: block;
    position:absolute; bottom: -50px; left:50%; transform: translateX(-50%);
}

.scroll-down::after {content:""; background:url('/child/img/main/scroll_vg.png') no-repeat center; display:block; width:45px; height:53px; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);}

.scroll-down .text {font-size:14px; color:rgba(255,255,255,.6); font-weight:900;}

@media(max-width:1024px){
    .visual { height: 460px; }
}
@media(max-width:768px){
    .visual { height: 340px; }
}
@media(max-width:500px){
    .visual { height: 240px; }
}




/*business css*/
.section--business {background:url('/child/img/main/pattern.png') no-repeat center; padding:190px 0px 160px; width:auto;}

.business--tit h3 {color:#212121; position:relative;}
.business--tit h3::before {content: "BUSINESS"; color: #f9f9f9; font-size:6rem; position: absolute; z-index:-2; bottom:20px; left:0;}
.business--tit p {color:#777; padding-top:20px;}

.business--icon {padding-top:120px;}
.business--icon ul {display:flex; text-align: center; justify-content: space-around; align-items:center;}
.business--icon span,strong {display:block;}
.business--icon span {margin-top:20px; font-weight: 500; color:#1a62e6; font-size:1.8rem;}
.business--icon strong {font-weight:700; font-size:2rem; color:#444;}



/*technical css*/
.section--technical::after {content:""; width:100%; height:720px; background-color:#f9f9f9; display:block; position: absolute; left:0; top:60px; z-index:-20;}
.technical--tit {position:relative; padding:60px 40px;}
.technical--tit::before { content: ''; position: absolute; top: 0; left:0; width: calc(100% + (50vw - 600px)); height: 100%; background:linear-gradient(45deg, #4e74f1 10%, #00e0ea 60%); color: white; z-index: -10;}
.technical--tit::after { content:""; background: url('/child/img/main/pattern1.png') no-repeat right; position: absolute; right:0; top:48px; z-index:1; display:block; width:100%; height:100%; z-index: -10;}
.technical--tit h3, .technical--tit p {color:#fff;}
.technical--tit h3::before {content: "TECHNICAL"; font-size:6rem; color:#3667ec; position: absolute; z-index:-9; letter-spacing:-0.04em; line-height:1; top:28px;}
.technical--tit p {padding-top:20px;}

.technical-wrap {padding-bottom:160px;}
.technical-wrap ul {display:flex; flex-wrap: wrap; justify-content: space-around; padding:60px 60px 0px;}
.technical-wrap li {width:calc(25% - 20px); margin:10px; border:1px solid #ededed;}
.technical-wrap img {width:100%; height:100%; display:block;}


/*brand css*/
.section--brand::after {content: ""; display:block; width:100%; height:670px; background-color:#f9f9f9; position: absolute; bottom:0px; left:0; z-index:-30;}

.brand--tit {position:relative; padding:60px 40px;}
.brand--tit::before { content: ''; position: absolute; top: 0; left: calc(-50vw + 600px); width: calc(50vw - 170px); height: 100%; background:linear-gradient(45deg, #1c58e5 20%, #4e74f1 60%); color: white; z-index: -10;}
.brand--tit::after { content:""; background: url('/child/img/main/pattern2.png') no-repeat left; position: absolute; left:calc(-50vw + 600px); top:0; z-index:1; display:block; width:100%; height:100%; z-index: -10;}
.brand--tit h3, .brand--tit p {color:#fff;}
.brand--tit h3::before {content: "PARTNERS"; font-size:6rem; color:#3667ec; position: absolute; z-index:-9; letter-spacing:-0.04em; line-height:1; top:28px;}
.brand--tit p {padding-top:20px;}

.brand-wrap {padding:60px 0px 80px;}

.btn-wrap {position: absolute; right:0; bottom:0;}
.btn-wrap button {width:50px; height:50px; transition:all 0.3s ease; background-color: #205ae6; position: relative; cursor:pointer;}
.btn-wrap img {display: block; margin: auto; }
.section--brand li {border:1px solid #ededed; box-sizing: border-box;}
.section--brand li img {display: block;}

/*
.brand-wrap {position: relative;}
.brand-wrap .swiper-slide {border:1px solid #ededed;}
.brand-wrap .swiper-slide img {width:100%; height:100%; display:block;}
.brand-wrap .swiper-container {padding:60px 0px 80px;}

.btn-wrap {position: absolute; right:0; bottom:0;}
.btn-wrap button {width:50px; height:50px; transition:all 0.3s ease; background-color: #205ae6; position: relative;}

.btn-wrap img {width:13px; height:20px; display:block; margin:auto;} */

/* .btn-wrap .prev::before {content:""; background:url('/child/img/main/prev-arrow.png') no-repeat center; position: absolute; top:0; left:0;} */