@charset "UTF-8";

.page {
    padding: 5% 0;
}

.page .unit_Title {
    margin-bottom: 3rem;
}


.page.p1 {
    padding-top: 0;
    background: -webkit-linear-gradient(top, #dfe5e8 0%, #dfe5e8 15%, #ffffff 15%, #ffffff 100%);
    background: -o-linear-gradient(top, #dfe5e8 0%, #dfe5e8 15%, #ffffff 15%, #ffffff 100%);
    background: linear-gradient(to bottom, #dfe5e8 0%, #dfe5e8 15%, #ffffff 15%, #ffffff 100%);

}

.page.p1 .pageBox {
    align-items: flex-end;
}

.page.p1 .Img {
    display: flex;
}

.page.p1 .Img .innerImg {
    width: 50%;
    padding-top: 100%;
    margin: 1px;
}

.page.p1 .Img .innerImg:nth-child(1) .image {
    background-size: 200%;
    background-position: left bottom;

}

.page.p1 .Img .innerImg:nth-child(2) {
    background-size: 300%;
    transform: translateY(-15%);
}

@media(max-width: 991px) {
    .page.p1 {
        padding-top: 10%;
        background: -webkit-linear-gradient(top, #dfe5e8 0%, #dfe5e8 80%, #ffffff 80%, #ffffff 100%);
        background: -o-linear-gradient(top, #dfe5e8 0%, #dfe5e8 80%, #ffffff 80%, #ffffff 100%);
        background: linear-gradient(to bottom, #dfe5e8 0%, #dfe5e8 80%, #ffffff 80%, #ffffff 100%);
    }

    .page.p1 .Img {
        padding-top: 10%;
        padding-left: 15%;
        padding-right: 0;
    }
}


.page.p2 {

    background: -webkit-linear-gradient(top, #dfe5e8 0%, #dfe5e8 80%, transparent 80%, transparent 100%);
    background: -o-linear-gradient(top, #dfe5e8 0%, #dfe5e8 80%, transparent 80%, transparent 100%);
    background: linear-gradient(to bottom, #dfe5e8 0%, #dfe5e8 80%, transparent 80%, transparent 100%);

}


.page.p2 .pageBox {
    align-items: center;
}

.page.p2 .Img {
    padding-right: 10%;

}

.page.p2 .Img .innerImg {
    padding: 0;
    height: 90vh;

}

.page.p2 .Img:after {
    content: '';
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(../images/about/about_img_03.jpg);
    background-position: center;
    width: 30%;
    padding-top: 50%;
    background-size: cover;
    box-shadow: inset 4px 8px 18px 0px rgba(0, 0, 0, 0.8);

}

@media(max-width:991px) {
    .page.p2 {
        background: #fff;
    }
    .page.p2 .Img {
        padding-right: 30%;
    }
    .page.p2 .Img:after{
        right: 15%;
    }

    .page.p2 .Img .innerImg {
        height: 60vh;
    }




}