/* Common */
.app--main #contents{
    padding:0;
}

.main-section .container {
    position: relative;
    z-index:2;
}

@media (min-width:576px){

}
@media (min-width:768px){

}
@media (min-width:1024px){

}
@media (min-width:1200px){

}


/*Intro*/
.main-section--intro p {
    line-height:1.3;
    font-weight:700;
}
.main-section--intro .intro-imgs {
    position: relative;
    width:100%;
    height:240px;
    border-radius:20px;
    overflow: hidden;
    padding-top:0px;
}

.main-section--intro .imgs-txt {
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    padding:30px 10%;
    z-index:2;
    color:#fff;
    display:flex;
    align-items: flex-end;
}

.main-section--intro .imgs-thumb {
    position: absolute;
    width:100%;
    height:100%;
    top:50%;
    left:50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index:1;
}

@media (min-width:576px){

}
@media (min-width:768px){

}
@media (min-width:1024px){
    .main-section--intro .intro-imgs {
        padding-top: calc(360/1800*100%);
    }
}
@media (min-width:1200px){

    .main-section--intro .intro-imgs {
        width:calc(100vw - 10%);
        min-width:1400px;
        left:50%;
        -ms-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

}

/*Technologies*/
.main-section--technologies {
    position: relative;
}
.main-section--technologies::after {
    content:"";
    display:block;
    width:100%;
    height:0;
    padding-top:calc(600/1920*100%);
    position: absolute;
    top:-4%;
    left:0;
    background-image:linear-gradient(to top, #fff 45%, #eff9ff 75%);
    z-index:0;
}

.main-section--technologies .items-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.main-section--technologies h2 {
    line-height: 1.3;
}
.main-section--technologies .items-left {
    width:100%;
    position: relative;
    top:0;
    left:0;
    max-height:230px;
    margin-bottom:30px;
    transition:top .6s ease;
}

.main-section--technologies .items-left {
    color:#404040;
    font-weight:300;
}

.main-section--technologies .items-left a {
    display: flex;
    align-items: center;
}

.main-section--technologies .items-left span {
    display: block;
}

.main-section--technologies .items-left span.main-arrow {
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/res/images/main/main-arrow.png');
    width:19px;
    height:11px;
    margin-left:20px;
    transition:all .3s ease;
}

.main-section--technologies .items-right {
    width:100%;
}

.main-section--technologies .items-right .right-box {
    display: flex;
    flex-wrap: wrap;
    margin:-8px;
}
.main-section--technologies .items-right ul {
    flex:1 1 100%;
}
.main-section--technologies .items-right li {
    padding:8px;
}

.main-section--technologies .items-right a {
    display: block;
    position: relative;
    width:100%;
    height:240px;
    padding-top:0;
    overflow: hidden;
    border-radius:20px;
    background-color:#000;
}

.main-section--technologies .items-right a::after{
    content: "";
    display:block;
    width:100%;
    height:250px;
    position: absolute;
    left:0;
    bottom:0;
    background-image:linear-gradient(to top, rgba(0,0,0,.7) 45%, transparent 80%);
    z-index:1;
}

.main-section--technologies .items-right .thumb-txt {
    position: absolute;
    padding:5%;
    top:0;
    left:0;
    right:0;
    bottom: 0;
    width:100%;
    height:100%;
    z-index:2;
    color:#fff;
    display:flex;
    align-items: flex-end;
    justify-content: space-between;
}

.main-section--technologies .items-right .thumb-arrow {
    width:50px;
    height:50px;
    border-radius:50%;
    background-color: rgba(255,255,255,.2);
    position: relative;
    display:none;
    transition:all .3s ease;
}

.main-section--technologies .items-right .thumb-arrow::before{
    content:"";
    display:block;
    width:9px;
    height: 13px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('/res/images/main/technologies-arrow.png');
    position: absolute;
    top:50%;
    left:50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin-bottom:12px;
}

.main-section--technologies .items-right .thumb {
    position: absolute;
    width:100%;
    height:100%;
    top:50%;
    left:50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index:1;
}


@media (min-width:600px) {

    .main-section--technologies .items-right ul {
        flex: 1 1 50%;
    }

    .main-section--technologies .items-right ul:first-child {
        margin-top:100px;
    }

}

@media (min-width:768px) {



}

@media (min-width:1024px) {

    .main-section--technologies .items-wrap.on {
        justify-content: flex-end;
    }

    .main-section--technologies .items-wrap.on .items-left  {
        position: fixed;
    }

    .main-section--technologies .items-left {
        width:400px;
    }


    .main-section--technologies .items-left a:hover span.main-arrow {
        margin-left:30px;
    }

    .main-section--technologies .items-right {
        width:calc(100% - 400px);
    }

    .main-section--technologies .items-right .right-box {
        margin:-12px -18px;
    }

    .main-section--technologies .items-right li {
        padding:12px 18px;
    }

    .main-section--technologies .items-right a {
        height:0;
        padding-top:calc(613/440*100%);
    }

    .main-section--technologies .items-right a:hover .thumb-arrow {
        background-color:#0d81ff;
    }

    .main-section--technologies .items-right .thumb-txt {
        padding:9%;
    }

    .main-section--technologies .items-right .thumb-arrow {
        display:block;
    }


}

@media (min-width:1200px) {

    .main-section--technologies .items-right .right-box {
        margin:-25px -30px;
    }

    .main-section--technologies .items-right li {
        padding:25px 35px;
    }


}

@media only screen and (min-width: 1025px) and (max-width: 1200px) {



    .main-section--technologies .items-wrap.on .items-left {
        top:80px;
        left:13px;
    }

}

@media only screen and (min-width: 1201px) and (max-width: 1401px) {

    .main-section--technologies .items-wrap.on .items-left {
        top:120px;
        left:13px;
    }

}


@media (min-width:1400px) {

    .main-section--technologies .items-wrap.on .items-left  {
        top:120px;
        left:50%;
        padding:0;
        width:auto;
        margin-left:-700px;
    }

}


/*Location*/
.main-section--location {
    border-top:1px solid #e0e0e0;
}

.main-section--location .location-info {
    /* display: flex;
    flex-wrap: wrap; */
    margin:-10px -30px;
}

.main-section--location .location-info li {
    width:100%;
    padding:10px 30px;
}
.main-section--location .location-info p {
    color:#404040;
}
.main-section--location .location-info .info-tit {
    color:#161616;
    font-weight:500;
}

.main-section--location .location-maps {
    position:relative;
    /* width:100vw; */
    height:260px;
    left:50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

@media (min-width:1024px){

    .main-section--location .location-info li {
        width:auto;
    }

    .main-section--location .location-maps {
        height:530px;
    }

}