@charset "UTF-8";
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* box__stronghold */
/* width: var(--main-width);
max-width: var(--main-max-width);
padding: 0 var(--main-padding-side);
margin: 0 auto; */

.box__stronghold {
    --max-info-size: min(100%, 1920px);
    --arc-size: 21%;
    padding-bottom: calc(var(--section-vside) * 1.5);
    margin-top: calc(-1 * var(--max-info-size) * 0.07);
}

.box__vision .box__container,
.box__stronghold .box__container {
    width: 100%;
    max-width: initial;
    padding: 0;
}

.box__vision .box__container .box__body .body__pic,
.box__stronghold .box__container .box__body .body__info {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;

    left: 50%;
    transform: translateX(-50%);
    padding: calc(var(--max-info-size) * 0.2) 0;
}

.box__vision .box__container .box__body .body__pic::before,
.box__stronghold .box__container .box__body .body__info::before {
    content: "";
    position: absolute;
    /* width: 100%; */
    width: 100vw;
    height: 100%;
    clip-path: polygon(0% 0%, 100% 30%, 100% 100%, 0% 70%);
    background: linear-gradient(-60deg, #17EAB7 0%, #33B2C1 32%, #664BD2 67%, #8C00DF 100%, #8C00DF 100%);

    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.box__stronghold .box__container .box__body .body__info  > div {
    position: relative;
    width: calc(var(--main-width) * 0.52 + var(--main-padding-side) * 2);
    max-width: 1075px;
    padding: 0 var(--main-padding-side);
    margin: 0 auto;
    color: #fff;
}

.box__stronghold .box__container .box__body .body__info .info__title {
    margin-bottom: calc(var(--fsize) * 0.8);
    margin-top: calc(-1 * (var(--fsize) + var(--fsize) * 0.4));
}

.box__stronghold .box__container .box__body .body__info .info__title::before {
    content: "";
    position: absolute;
    aspect-ratio: 267 / 283;
    width: var(--arc-size);
    top: calc(var(--fsize) * -2.5);
    left: calc(var(--fsize) * -2.5);
    background: url(../images/about/about-stronghold-info-mark-up.png) no-repeat;
    background-position: center;
    background-size: cover;
}

.box__stronghold .box__container .box__body .body__info .info__detail::after {
    content: "";
    position: absolute;
    aspect-ratio: 267 / 283;
    width: var(--arc-size);
    bottom: calc(var(--fsize) * -4.5);
    right: calc(var(--fsize) * -5.5);;
    background: url(../images/about/about-stronghold-info-mark-down.png) no-repeat;
    background-position: center;
    background-size: cover;
}

/* box__vidoe */
.box__video {
    margin-top: max(-12%, -200px);
    padding: 0 0 var(--section-vside) 0;
    display: none;
}

.box__video .box__container {
    width: 100%;
    max-width: initial;
    padding: 0;
}

.box__video .box__container .box__body .body__con {
    position: relative;
    width: var(--main-width);
    max-width: var(--main-max-width);
    padding: 0 var(--extra-side);
    margin: 0 auto;

    display: flex;
}

.box__video .box__container .box__body .body__con .embed-responsive {
    border-radius: var(--border-radius-lm);
}

/* box__lp_to_rt */
.box__lp_to_rt {
    padding: 0 0 var(--section-vside) 0;
}

.box__lp_to_rt .box__container {
    width: 100%;
    max-width: initial;
    padding: 0;
}

.box__lp_to_rt .box__container .box__body .body__con {
    --pic-w: 43%;
    --space: 3%;
    position: relative;
    width: var(--main-width);
    max-width: var(--main-max-width);
    padding: 0 var(--extra-side);
    margin: 0 auto;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.box__lp_to_rt.is-reverse .box__container .box__body .body__con {
    flex-direction: row-reverse;
}

.box__lp_to_rt .box__container .box__body .body__con .con__pic {
    position: relative;
    width: var(--pic-w);
    aspect-ratio: 610 / 400;
    border-radius: var(--border-radius-lm);
    overflow: hidden;
}

.box__lp_to_rt .box__container .box__body .body__con .con__detail {
    width: calc(100% - var(--pic-w) - var(--space));
}


/* box__advantages */
.box__advantages .box__container {
    width: 100%;
    max-width: initial;
    padding: 0;
}

.box__advantages .box__container .box__body .body__con {
    position: relative;
    width: calc(var(--main-width) - var(--extra-side) * 2);
    max-width: calc(var(--main-max-width) - var(--extra-side) * 2);
    padding: 0 var(--extra-side);
    margin: 0 auto;

    aspect-ratio: 1440 / 1010;

    background: url(../images/about/about-advantages-bg.svg) no-repeat;
    background-position: center;
    background-size: 100%;

    display: flex;
    justify-content: center;

    z-index: 1;
}

.box__advantages .box__container .box__body .body__con::before {
    content: "";
    position: absolute;
    width: 31%;
    aspect-ratio: 526 / 570;
    right: -16%;
    top: -16%;

    background: url(../images/about/about-advantages-cross.png) no-repeat;
    background-position: center;
    background-size: 100%;
}

.box__advantages .box__container .box__body .body__con::after {
    content: "";
    position: absolute;
    /* width: 51%; */
    width: 68%;
    aspect-ratio: 983 / 897;
    left: -8%;
    bottom: -16%;

    background: url(../images/about/about-advantages-man.png) no-repeat;
    background-position: center;
    background-size: 100%;
}

.box__advantages .box__container .box__body .body__con .con__title {
    position: relative;
    width: 65%;
    /* padding-top: calc(var(--fsize) * 6.5); */
    padding-top: 23%;
    color: #fff;
}

.box__advantages .box__container .box__body .body__deco {
    position: relative;
    width: calc(var(--main-width));
    /* max-width: 1920px; */
    max-width: var(--main-max-width);
    padding: 0 var(--extra-side);

    left: 50%;
    transform: translateX(-50%);

    margin-bottom: 3%;
}

.box__advantages .box__container .box__body .body__deco .deco__img {
    --size: min(28%, 400px);
    position: relative;
    width: var(--size);
    aspect-ratio: 550 / 422;
    left: calc(var(--size) * -0.5);
    margin-top: 10%;
}


.box__advantages .box__container .box__body .body__list {
    position: relative;
    width: var(--main-width);
    max-width: var(--main-max-width);
    padding: 0 var(--extra-side);

    margin: 0 auto;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    
}

.box__advantages .box__container .box__body .body__list .list__item {
    width: 49%;
    margin-bottom: 2%;
    color: #fff;
    perspective: 1000px;
}

.box__advantages .box__container .box__body .body__list .list__item .item__inner {
    position: relative;
    width: 100%;
    aspect-ratio: 700 / 385;
    
    transition: transform 0.5s;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
}

/* is-fliped */
.box__advantages .box__container .box__body .body__list .list__item .item__inner.is-fliped {
    transform: rotateY(180deg);
}

.box__advantages .box__container .box__body .body__list .list__item .item__inner.is-fliped .inner__back .back__btn .btn__more {
    transform: scale(-1);
}

.box__advantages .box__container .box__body .body__list .list__item .item__inner .inner__back,
.box__advantages .box__container .box__body .body__list .list__item .item__inner .inner__front {
    pointer-events: auto;
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    /* padding: 6% 7% 6% 5%; */
    padding: 6% 6%;
    backface-visibility: hidden;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    
    background: var(--color-purple);
    border-radius: var(--border-radius-lm);
    overflow: hidden;
}

/* front */
.box__advantages .box__container .box__body .body__list .list__item .item__inner .inner__front .front__detail .detail__title {
    margin-bottom: calc(var(--fsize) * 0.8);
}


.box__advantages .box__container .box__body .body__list .list__item .item__inner .inner__back .back__btn,
.box__advantages .box__container .box__body .body__list .list__item .item__inner .inner__front .front__btn {
    position: relative;
    display: flex;
    width: 100%;
}

.box__advantages .box__container .box__body .body__list .list__item .item__inner .inner__back .back__btn .btn__more,
.box__advantages .box__container .box__body .body__list .list__item .item__inner .inner__front .front__btn .btn__more {
    pointer-events: none;
    width: 6.5%;
}

.box__advantages .box__container .box__body .body__list .list__item .item__inner .inner__back .back__btn .btn__more > img,
.box__advantages .box__container .box__body .body__list .list__item .item__inner .inner__front .front__btn .btn__more > img {
    width: 100%;
    height: auto;
}

/* back */
.box__advantages .box__container .box__body .body__list .list__item .item__inner .inner__back {
    transform: rotateY(180deg);
}

.box__advantages .box__container .box__body .body__list .list__item .item__inner .inner__back .back__con {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.box__advantages .box__container .box__body .body__list .list__item .item__inner .inner__back .back__con .con__icon {
    width: 18%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 50%;
    background-color: #fff;

    margin-right: 6%;
}

.box__advantages .box__container .box__body .body__list .list__item .item__inner .inner__back .back__con .con__detail {
    flex: 1;
    text-align: justify;
}

.box__advantages .box__container .box__body .body__list .list__item .item__inner .inner__front.icon-down {
    background: var(--color-purple) url(../images/about/about-advantages-panel-bg-1.svg) no-repeat;
    background-position: bottom right;
    background-size: 23%;
}
.box__advantages .box__container .box__body .body__list .list__item .item__inner .inner__front.icon-up {
    background: var(--color-purple) url(../images/about/about-advantages-panel-bg-2.svg) no-repeat;
    background-position: bottom right;
    background-size: 23%;
}
.box__advantages .box__container .box__body .body__list .list__item .item__inner .inner__front.icon-a {
    background: var(--color-purple) url(../images/about/about-advantages-panel-bg-3.svg) no-repeat;
    background-position: bottom right;
    background-size: 23%;
}
.box__advantages .box__container .box__body .body__list .list__item .item__inner .inner__front.icon-cross {
    background: var(--color-purple) url(../images/about/about-advantages-panel-bg-4.svg) no-repeat;
    background-position: bottom right;
    background-size: 23%;
}

/* box__vision */
.box__vision {
    --max-info-size: min(100%, 1920px);
    padding: 0 0 calc(var(--section-vside) * 3) 0;
}

.box__vision .box__container .box__body .body__pic {
    --left-off: 0%;
    padding: calc(var(--max-info-size) * 0.1) calc(var(--extra-side) * 1.2);
    max-width: var(--main-max-width);
}


.box__vision .box__container .box__body .body__pic .pic__img {
    position: relative;
    aspect-ratio: 16 / 8;
    border-radius: var(--border-radius-lm);
    overflow: hidden;
    transform: rotate(-8deg);
    left: calc(var(--left-off));
}

.box__vision .box__container .box__body .body__pic::after {
    content: "";
    position: absolute;
    width: 26%;
    aspect-ratio: 0.88;
    top: 70%;
    left: calc(2% + var(--left-off));
    background: url(../images/about/about-stronghold-deco.png) no-repeat;
    background-position: center;
    background-size: 100%;
}
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
@media screen and (min-width:320px) {
    /* box__stronghold */
    .box__stronghold {
        --arc-size: 19%;
        margin-top: calc(-1 * var(--max-info-size) * 0.07);
    }

    .box__stronghold .box__container .box__body .body__info {
        padding: calc(var(--max-info-size) * 0.3) 0;
    }

    .box__vision .box__container .box__body .body__pic {
        padding: calc(var(--max-info-size) * 0.005) 0;
    }

    .box__vision .box__container .box__body .body__pic::before,
    .box__stronghold .box__container .box__body .body__info::before {
        clip-path: polygon(0% 0%, 100% 10%, 100% 100%, 0% 90%);
    }

    .box__stronghold .box__container .box__body .body__info  > div {
        width: calc(var(--main-width) * 1 + 0);
        padding: 0 calc(var(--main-padding-side) * 2);
    }

    .box__stronghold .box__container .box__body .body__info .info__title {
        margin-bottom: calc(var(--fsize) * 0.8);
        margin-top: 0;
        margin-right: 0;
        margin-left: 0;
    }

    .box__stronghold .box__container .box__body .body__info .info__title::before {
        top: calc(var(--fsize) * -3.8);
        left: calc(var(--fsize) * 0);
    }

    .box__stronghold .box__container .box__body .body__info .info__detail::after {
        bottom: calc(var(--fsize) * -6);
        right: calc(var(--fsize) * 0);
    }

    /* box__video */
    .box__video .box__container .box__body .body__con {
        padding: 0 var(--main-padding-side);
    }

    .box__video .box__container .box__body .body__con .embed-responsive {
        border-radius: var(--border-radius-sl);
    }

    /* box__lp_to_rt */
    .box__lp_to_rt .box__container .box__body .body__con {
        --pic-w: 100%;
        padding: 0 var(--main-padding-side);
        flex-direction: column;
        justify-content: initial;
        align-items: initial;
    }

    .box__lp_to_rt .box__container .box__body .body__con .con__pic {
        border-radius: var(--border-radius-sl);
    }

    .box__lp_to_rt .box__container .box__body .body__con .con__detail {
        margin-top: calc(var(--fsize) * 1.5);
        width: calc(100%);
    }

    .box__lp_to_rt.is-reverse .box__container .box__body .body__con {
        flex-direction: column;
    }


    /* box__advantages */
    .box__advantages .box__container .box__body .body__con {
        width: calc(var(--main-width));
        padding: 0 0;

        aspect-ratio: 375 / 603;
        background: url(../images/about/about-advantages-bg-s.svg) no-repeat;
        background-position: center;
        background-size: 100%;
    }

    .box__advantages .box__container .box__body .body__con::before {
        width: 47%;
    }

    .box__advantages .box__container .box__body .body__con::after {
        width: 112%;
        left: -12%;
        bottom: -18%;
    }

    .box__advantages .box__container .box__body .body__con .con__title {
        width: 80%;
    }

    .box__advantages .box__container .box__body .body__deco {
        padding: 0 0;
        margin-bottom: 6%;
        margin-top: 8%;
    }

    .box__advantages .box__container .box__body .body__deco .deco__img {
        width: 62%;
        left: 0;
        margin-top: 25%;
    }

    .box__advantages .box__container .box__body .body__list {
        padding: 0 var(--main-padding-side);
    }

    .box__advantages .box__container .box__body .body__list .list__item {
        width: 100%;
        margin-bottom: 5%;
    }

    .box__advantages .box__container .box__body .body__list .list__item .item__inner {
        /* aspect-ratio: 500 / 385; */
        aspect-ratio: 500 / 400;
    }

    .box__advantages .box__container .box__body .body__list .list__item .item__inner .inner__back,
    .box__advantages .box__container .box__body .body__list .list__item .item__inner .inner__front {
        border-radius: var(--border-radius-m);
    }

    /* box__vision */
    .box__vision {
        padding: calc(var(--section-vside) * 1) 0 calc(var(--section-vside) * 4) 0;
    }

    .box__vision .box__container .box__body .body__pic {
        --left-off: -8%;
    }

    .box__vision .box__container .box__body .body__pic::after {
        width: 35%;
        top: 80%;
        left: calc(0% + var(--left-off));
    }

    .box__vision .box__container .box__body .body__pic .pic__img {
        border-radius: var(--border-radius-sl);
    }
}
/* text-title-s */
@media screen and (min-width:360px) {}
@media screen and (min-width:390px) {}
@media screen and (min-width:414px) {}
@media screen and (min-width:500px) {}
@media screen and (min-width:600px) {
    /* box__stronghold */
    .box__stronghold .box__container .box__body .body__info .info__title::before {
        top: calc(var(--fsize) * -5);
    }

    .box__stronghold .box__container .box__body .body__info .info__detail::after {
        bottom: calc(var(--fsize) * -8);
    }

    .box__advantages .box__container .box__body .body__con {
        /* width: calc(var(--main-width) - var(--extra-side) * 2); */
        width: calc(var(--main-width));
        padding: 0 var(--extra-side);

        aspect-ratio: 1440 / 1010;
        background: url(../images/about/about-advantages-bg.svg) no-repeat;
        background-position: center;
        background-size: 100%;
    }

    .box__advantages .box__container .box__body .body__con::before {
        width: 31%;
    }

    .box__advantages .box__container .box__body .body__con::after {
        width: 68%;
        left: -7%;
        bottom: -16%;
    }

    .box__advantages .box__container .box__body .body__con .con__title {
        width: 65%;
    }

    .box__advantages .box__container .box__body .body__deco {
        padding: 0 var(--main-padding-side);
        margin-bottom: 3%;
        margin-top: 0%;
    }

    .box__advantages .box__container .box__body .body__deco .deco__img {
        width: var(--size);
        left: calc(var(--size) * -0.5);
        margin-top: 10%;
    }

    .box__vision {
        padding: calc(var(--section-vside) * 2) 0 calc(var(--section-vside) * 7) 0;
    }
}

@media screen and (min-width:1024px) {
    /* box__stronghold */
    .box__stronghold {
        --arc-size: 21%;
        margin-top: calc(-1 * var(--max-info-size) * 0.07);
    }

    .box__stronghold .box__container .box__body .body__info {
        padding: calc(var(--max-info-size) * 0.2) calc(var(--extra-side) * 1.8);
    }

    .box__vision .box__container .box__body .body__pic {
        padding: calc(var(--max-info-size) * 0.1) calc(var(--extra-side) * 1.2);
    }

    .box__vision .box__container .box__body .body__pic::before,
    .box__stronghold .box__container .box__body .body__info::before {
        clip-path: polygon(0% 0%, 100% 20%, 100% 100%, 0% 80%);
    }

    .box__stronghold .box__container .box__body .body__info  > div {
        width: calc(var(--main-width) * 0.65 + var(--main-padding-side) * 2);
        padding: 0 var(--main-padding-side);
    }

    .box__stronghold .box__container .box__body .body__info .info__title {
        margin: 0 auto;
        margin-bottom: calc(var(--fsize) * 0.8);
        margin-top: calc(-1 * (var(--fsize) + var(--fsize) * 0.4));
    }

    .box__stronghold .box__container .box__body .body__info .info__title::before {
        top: calc(var(--fsize) * -2.5);
        left: calc(var(--fsize) * -2.5);
    }

    .box__stronghold .box__container .box__body .body__info .info__detail::after {
        bottom: calc(var(--fsize) * -4.5);
        right: calc(var(--fsize) * -5.5);
    }

    /* box__video */
    .box__video .box__container .box__body .body__con {
        padding: 0 var(--extra-side);
    }

    .box__video .box__container .box__body .body__con .embed-responsive {
        border-radius: var(--border-radius-lm);
    }

    /* box__lp_to_rt */
    .box__lp_to_rt .box__container .box__body .body__con {
        --pic-w: 43%;
        padding: 0 var(--extra-side);
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .box__lp_to_rt .box__container .box__body .body__con .con__pic {
        border-radius: var(--border-radius-lm);
    }

    .box__lp_to_rt .box__container .box__body .body__con .con__detail {
        margin-top: 0;
        width: calc(100% - var(--pic-w) - var(--space));
    }

    .box__lp_to_rt.is-reverse .box__container .box__body .body__con {
        flex-direction: row-reverse;
    }

    /* box__advantages */
    .box__advantages .box__container .box__body .body__con {
        width: calc(var(--main-width) - var(--extra-side) * 2);
        padding: 0 var(--extra-side);
    }

    .box__advantages .box__container .box__body .body__deco {
        padding: 0 var(--extra-side);
    }

    .box__advantages .box__container .box__body .body__list {
        padding: 0 var(--extra-side);
    }

    .box__advantages .box__container .box__body .body__list .list__item {
        width: 49%;
        margin-bottom: 2%;
    }

    .box__advantages .box__container .box__body .body__list .list__item .item__inner {
        aspect-ratio: 700 / 385;
    }

    .box__advantages .box__container .box__body .body__list .list__item .item__inner .inner__back,
    .box__advantages .box__container .box__body .body__list .list__item .item__inner .inner__front {
        border-radius: var(--border-radius-lm);
    }

    /* box__vision */
    .box__vision {
        padding: 0 0 calc(var(--section-vside) * 3) 0;
    }

    .box__vision .box__container .box__body .body__pic {
        --left-off: 0%;
    }

    .box__vision .box__container .box__body .body__pic::after {
        width: 26%;
        top: 70%;
        left: calc(2% + var(--left-off));
    }

    .box__vision .box__container .box__body .body__pic .pic__img {
        border-radius: var(--border-radius-lm);
    }
}
@media screen and (min-width:1280px) {
    /* box__stronghold */
    .box__stronghold {
        margin-top: calc(-1 * var(--max-info-size) * 0.12);
    }

    .box__stronghold .box__container .box__body .body__info  > div {
        width: calc(var(--main-width) * 0.52 + var(--main-padding-side) * 2);
    }

    .box__vision .box__container .box__body .body__pic::before,
    .box__stronghold .box__container .box__body .body__info::before {
        clip-path: polygon(0% 0%, 100% 25%, 100% 100%, 0% 75%);
    }
}

@media screen and (min-width: 1440px) {
}
@media screen and (min-width: 1680px) {}
@media screen and (min-width: 1920px) {
    .box__stronghold {
        margin-top: calc(-1 * var(--max-info-size) * 0.1);
    }

    .box__stronghold .box__container .box__body .body__info .info__title::before {
        top: calc(var(--fsize) * -4);
    }

    .box__stronghold .box__container .box__body .body__info .info__detail::after {
        bottom: calc(var(--fsize) * -8);
    }

    /* box__advantages */
    .box__advantages .box__container .box__body .body__deco {
        padding: 0 0;
    }

}

@media screen and (min-width: 2560px) {}