@media screen and (min-width: 1110px) {
    .bg {
        background-image: url("../img/bg02.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100vw 100vh;
        width: 100%;
        height: 900px;
    }

    .title {
        max-width: 90%;
        margin: 0 auto;
        padding: 25% 0;
    }

    .title-h1 {
        max-width: 65%;
        color: #fff;
        font-size: 4vw;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -.01em;
    }

    .title-h1 span {
        opacity: 0;
        -webkit-transition: opacity .3s cubic-bezier(.41, .09, .58, 1);
        transition: opacity .3s cubic-bezier(.41, .09, .58, 1);

    }

    .content {
        position: relative;
    }

    .content-bg {
        position: relative;
        width: 100%;
    }

    .bg01 {
        position: relative;
        width: 100%;
        margin-top: -255px;
        z-index: 2;
    }

    .bg02 {
        width: 100%;
        margin-top: -260px;
        z-index: 2;

    }

    .bg3-container {
        position: relative;
        width: 100%;
        overflow: hidden;
        margin-top: -320px;
        z-index: 1;
    }

    .bg03 {
        width: 110%;
        margin-left: -5%;
    }

    .home-container {
        position: absolute;
        color: #fff;
        left: 0;
        top: -80px;
        z-index: 88;
        padding: 0px 8% 0 5%;
    }

    .home-title h2 {
        margin-bottom: 4vw;
        font-size: 2.5vw;
        font-weight: 400;
        line-height: 1.38;
        letter-spacing: -.01em;
    }

    .text {
        font-size: 1.8055555556vw;
        line-height: 1.38;
        font-weight: 400;
        letter-spacing: -.01em;
        margin-bottom: 3vw;
    }

    .vision-container {
        position: relative;
        width: 90%;
        margin: -6vw auto 0px;
        color: #490e6f;

    }

    .value-container {
        position: relative;
        width: 90%;
        margin: 2vw auto 0px;
        color: #490e6f;
    }

    h2 {
        margin-bottom: 2vw;
        font-size: 35px;
        font-weight: 400;
        line-height: 1.38;
    }

    .vision-content {
        margin: 1.4vw 0;
        font-size: 1.25vw;
        font-weight: 400;
        letter-spacing: -.01em;
        line-height: 1.55
    }

    .value-text {
        width: 90%;
        margin: 0 auto;
        color: #490e6f;
    }

    .value-item-container {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 20px;
    }

    .value-img {
        display: block;
        width: 15%;
    }

    .value-bg {
        margin-left: 50px;
        width: 150px;
        height: 150px;
        background-color: #490e6f;
        overflow: hidden;

    }

    .value-bg-1 {
        /* border-top-left-radius: 90px 72px;
        border-top-right-radius: 89px 45px;
        border-bottom-right-radius: 95px 107px;
        border-bottom-left-radius: 59px 100px; */
        border-top-left-radius: 50px 50px;
        border-top-right-radius: 50px 50px;
        border-bottom-right-radius: 50px 50px;
        border-bottom-left-radius: 50px 50px;
    }

    .value-bg-2 {
        border-top-left-radius: 50px 50px;
        border-top-right-radius: 50px 50px;
        border-bottom-right-radius: 50px 50px;
        border-bottom-left-radius: 50px 50px;
    }

    .value-bg-3 {
        border-top-left-radius: 50px 50px;
        border-top-right-radius: 50px 50px;
        border-bottom-right-radius: 50px 50px;
        border-bottom-left-radius: 50px 50px;
    }

    .value-bg-4 {
        border-top-left-radius: 50px 50px;
        border-top-right-radius: 50px 50px;
        border-bottom-right-radius: 50px 50px;
        border-bottom-left-radius: 50px 50px;
    }

    .value-bg-5 {
        border-top-left-radius: 50px 50px;
        border-top-right-radius: 50px 50px;
        border-bottom-right-radius: 50px 50px;
        border-bottom-left-radius: 50px 50px;
    }

    .value-bg-6 {
        border-top-left-radius: 50px 50px;
        border-top-right-radius: 50px 50px;
        border-bottom-right-radius: 50px 50px;
        border-bottom-left-radius: 50px 50px;
    }

    .value-bg img {
        margin: 25px 25px;
        width: 100px;
        height: 100px;
    }

    .value-item {
        width: 70%;
    }

    h3 {
        font-size: 1.25vw;
        font-weight: 600;
        letter-spacing: -.01em;
        line-height: 1.55;
        margin-bottom: 1.3888888889vw;
    }

    .value-item-text {
        font-size: 1.25vw;
        font-weight: 400;
        letter-spacing: -.01em;
        line-height: 1.55;
    }

    .goals-container {
        position: relative;
        margin-bottom: 100px;
    }

    .goals-container h2 {
        width: 90%;
        margin: 0 auto 40px;
        color: #490e6f;
    }

    .goals-title h2 {
        color: #fff;
    }

    .goals-text {
        font-size: 1.8055555556vw;
        line-height: 1.38;
        font-weight: 400;
        color: #fff;
    }

    .swiper-slide {
        color: #fff;
        width: 900px !important;
        height: 25vw;
        padding: 2.7vw 2.9vw 2.8vw 2.7vw;
        background-color: #490e6f;
        border-radius: 5px;
        margin: 0 30px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .swiper-button-prev {
        width: 50px !important;
        height: 50px !important;
        position: absolute;
        top: 110%;
        left: 80%;
        z-index: 88;
    }

    .swiper-button-next {
        width: 50px !important;
        height: 50px !important;
        position: absolute;
        top: 110%;
        left: 84%;
        z-index: 88;
    }

    .swiper-button-prev:after,
    .swiper-rtl .swiper-button-next:after {
        content: "";
        width: 50px;
        height: 50px;
        background-image: url("../img/icon-left.png");
        background-size: 50px 50px;

    }

    .swiper-button-next:after,
    .swiper-rtl .swiper-button-prev:after {
        content: "";
        width: 50px;
        height: 50px;
        background-image: url("../img/icon-right.png");
        background-size: 50px 50px;
    }
}

@media screen and (max-width: 1110px) and (min-width: 768px) {
    .bg {
        background-image: url("../img/bg02.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100vw 100vh;
        width: 100%;
        height: 500px;
    }

    .title {
        max-width: 90%;
        margin: 0 auto;
        padding: 25% 0;
    }

    .title-h1 {
        max-width: 65%;
        color: #fff;
        font-size: 4vw;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -.01em;
    }

    .title-h1 span {
        opacity: 0;
        -webkit-transition: opacity .3s cubic-bezier(.41, .09, .58, 1);
        transition: opacity .3s cubic-bezier(.41, .09, .58, 1);

    }

    .content {
        position: relative;
    }

    .content-bg {
        position: relative;
        width: 100%;
    }

    .bg01 {
        position: relative;
        width: 100%;
        margin-top: -255px;
        z-index: 2;
    }

    .bg02 {
        width: 100%;
        margin-top: -260px;
        z-index: 2;

    }

    .bg3-container {
        position: relative;
        width: 100%;
        overflow: hidden;
        margin-top: -320px;
        z-index: 1;
    }

    .bg03 {
        width: 110%;
        margin-left: -5%;
    }

    .home-container {
        position: absolute;
        color: #fff;
        left: 0;
        top: -150px;
        z-index: 88;
        padding: 0px 8% 0 5%;
    }

    .home-title h2 {
        margin-bottom: 4vw;
        font-size: 2.5vw;
        font-weight: 400;
        line-height: 1.38;
        letter-spacing: -.01em;
    }

    .text {
        font-size: 1.8055555556vw;
        line-height: 1.38;
        font-weight: 400;
        letter-spacing: -.01em;
        margin-bottom: 3vw;
    }

    .vision-container {
        position: relative;
        width: 90%;
        margin: 30px auto 0px;
        color: #490e6f;

    }

    .value-container {
        position: relative;
        width: 90%;
        margin: 2vw auto 0px;
        color: #490e6f;
    }

    h2 {
        margin-bottom: 2vw;
        font-size: 35px;
        font-weight: 400;
        line-height: 1.38;
    }

    .vision-content {
        margin: 1.4vw 0;
        font-size: 1.5vw;
        font-weight: 400;
        letter-spacing: -.01em;
        line-height: 1.55
    }

    .value-text {
        width: 90%;
        margin: 0 auto;
        color: #490e6f;
    }

    .value-item-container {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 20px;
    }

    .value-img {
        display: block;
        width: 15%;
    }

    .value-bg {
        width: 100px;
        height: 100px;
        background-color: #490e6f;
        overflow: hidden;

    }

    .value-bg-1 {
        /* border-top-left-radius: 90px 72px;
        border-top-right-radius: 89px 45px;
        border-bottom-right-radius: 95px 107px;
        border-bottom-left-radius: 59px 100px; */
        border-top-left-radius: 25px 25px;
        border-top-right-radius: 25px 25px;
        border-bottom-right-radius: 25px 25px;
        border-bottom-left-radius: 25px 25px;
    }

    .value-bg-2 {
        border-top-left-radius: 25px 25px;
        border-top-right-radius: 25px 25px;
        border-bottom-right-radius: 25px 25px;
        border-bottom-left-radius: 25px 25px;
    }

    .value-bg-3 {
        border-top-left-radius: 25px 25px;
        border-top-right-radius: 25px 25px;
        border-bottom-right-radius: 25px 25px;
        border-bottom-left-radius: 25px 25px;
    }

    .value-bg-4 {
        border-top-left-radius: 25px 25px;
        border-top-right-radius: 25px 25px;
        border-bottom-right-radius: 25px 25px;
        border-bottom-left-radius: 25px 25px;
    }

    .value-bg-5 {
        border-top-left-radius: 25px 25px;
        border-top-right-radius: 25px 25px;
        border-bottom-right-radius: 25px 25px;
        border-bottom-left-radius: 25px 25px;
    }

    .value-bg-6 {
        border-top-left-radius: 25px 25px;
        border-top-right-radius: 25px 25px;
        border-bottom-right-radius: 25px 25px;
        border-bottom-left-radius: 25px 25px;
    }

    .value-bg img {
        margin: 10px 10px;
        width: 80px;
        height: 80px;
    }

    .value-item {
        width: 70%;
    }

    h3 {
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -.01em;
        line-height: 1.55;
        margin-bottom: 1.3888888889vw;
    }

    .value-item-text {
        font-size: 18px;
        font-weight: 400;
        letter-spacing: -.01em;
        line-height: 1.55;
    }

    .goals-container {
        position: relative;
        margin-bottom: 100px;
    }

    .goals-container h2 {
        width: 90%;
        margin: 0 auto 40px;
        color: #490e6f;
    }

    .goals-title h2 {
        color: #fff;
    }

    .goals-text {
        font-size: 1.8055555556vw;
        line-height: 1.38;
        font-weight: 400;
        color: #fff;
    }

    .swiper-slide {
        color: #fff;
        width: 600px !important;
        height: 30vw;
        padding: 2.7vw 2.9vw 2.8vw 2.7vw;
        background-color: #490e6f;
        border-radius: 5px;
        margin: 0 30px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .swiper-button-prev {
        width: 50px !important;
        height: 50px !important;
        position: absolute;
        top: 110%;
        left: 70%;
        z-index: 88;
    }

    .swiper-button-next {
        width: 50px !important;
        height: 50px !important;
        position: absolute;
        top: 110%;
        left: 84%;
        z-index: 88;
    }

    .swiper-button-prev:after,
    .swiper-rtl .swiper-button-next:after {
        content: "";
        width: 50px;
        height: 50px;
        background-image: url("../img/icon-left.png");
        background-size: 50px 50px;

    }

    .swiper-button-next:after,
    .swiper-rtl .swiper-button-prev:after {
        content: "";
        width: 50px;
        height: 50px;
        background-image: url("../img/icon-right.png");
        background-size: 50px 50px;
    }
}

@media screen and (max-width: 768px) {
    .bg {
        background-image: url("../img/bg02.png");
        background-position: center center;
        background-position: left top;
        background-size: cover;
        width: 100%;
        height: 500px;
    }

    .title {
        max-width: 94%;
        margin: 0 auto;
        padding: 30% 0;
    }

    .title-h1 {
        max-width: 85%;
        color: #fff;
        font-size: 24px;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -.01em;
    }

    .title-h1 span {
        opacity: 0;
        -webkit-transition: opacity .3s cubic-bezier(.41, .09, .58, 1);
        transition: opacity .3s cubic-bezier(.41, .09, .58, 1);

    }

    .content {
        position: relative;
    }

    .content-bg {
        position: relative;
        width: 100%;
        /* overflow: hidden; */
    }

    .bg01 {
        position: relative;
        width: 500%;
        margin-top: -67vw;
        z-index: 2;
        margin-left: -400%;
    }

    .bg02 {
        position: relative;
        width: 100%;
        margin-top: -143px;
        z-index: 2;
        height: 500px;
    }

    .bg3-container {
        position: relative;
        width: 100%;
        overflow: hidden;
        margin-top: -46vw;
        z-index: 1;
    }


    .bg03 {
        width: 110%;
        margin-left: -5%;
    }


    .home-container {
        position: absolute;
        color: #fff;
        left: 0;
        top: -100px;
        z-index: 88;
        padding: 0px 8% 0 5%;
        /* background-color: #350a50; */
    }

    .home-title h2 {
        margin-bottom: 4vw;
        font-size: 24px;
        font-weight: 400;
        line-height: 1.38;
        letter-spacing: -.01em;
    }

    .text {
        font-size: 18px;
        line-height: 1.38;
        font-weight: 400;
        letter-spacing: -.01em;
        margin-bottom: 3vw;
    }

    .vision-container {
        position: relative;
        width: 90%;
        margin: 30px auto 0px;
        color: #490e6f;

    }

    .value-container {
        position: relative;
        width: 90%;
        margin: 40px auto 40px;
        color: #490e6f;
    }

    h2 {
        margin-bottom: 2vw;
        font-size: 35px;
        font-weight: 400;
        line-height: 1.38;
    }

    .vision-content {
        margin: 1.4vw 0;
        font-size: 18px;
        font-weight: 400;
        letter-spacing: -.01em;
        line-height: 1.55
    }

    .value-text {
        width: 90%;
        margin: 0 auto;
        color: #490e6f;
    }

    .value-item-container {
        /* display: flex;
        align-items: center;
        justify-content: space-around; */
        margin-bottom: 20px;
    }

    .value-img {
        display: block;
        width: 15%;
    }

    .value-bg {
        width: 100px;
        height: 100px;
        background-color: #490e6f;
        overflow: hidden;

    }

    .value-bg-1 {
        /* border-top-left-radius: 90px 72px;
    border-top-right-radius: 89px 45px;
    border-bottom-right-radius: 95px 107px;
    border-bottom-left-radius: 59px 100px; */
        border-top-left-radius: 25px 25px;
        border-top-right-radius: 25px 25px;
        border-bottom-right-radius: 25px 25px;
        border-bottom-left-radius: 25px 25px;
    }

    .value-bg-2 {
        border-top-left-radius: 25px 25px;
        border-top-right-radius: 25px 25px;
        border-bottom-right-radius: 25px 25px;
        border-bottom-left-radius: 25px 25px;
    }

    .value-bg-3 {
        border-top-left-radius: 25px 25px;
        border-top-right-radius: 25px 25px;
        border-bottom-right-radius: 25px 25px;
        border-bottom-left-radius: 25px 25px;
    }

    .value-bg-4 {
        border-top-left-radius: 25px 25px;
        border-top-right-radius: 25px 25px;
        border-bottom-right-radius: 25px 25px;
        border-bottom-left-radius: 25px 25px;
    }

    .value-bg-5 {
        border-top-left-radius: 25px 25px;
        border-top-right-radius: 25px 25px;
        border-bottom-right-radius: 25px 25px;
        border-bottom-left-radius: 25px 25px;
    }

    .value-bg-6 {
        border-top-left-radius: 25px 25px;
        border-top-right-radius: 25px 25px;
        border-bottom-right-radius: 25px 25px;
        border-bottom-left-radius: 25px 25px;
    }

    .value-bg img {
        margin: 10px 10px;
        width: 80px;
        height: 80px;
    }

    .value-item {
        width: 100%;
    }

    h3 {
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -.01em;
        line-height: 1.55;
        margin-bottom: 1.3888888889vw;
    }

    .value-item-text {
        font-size: 18px;
        font-weight: 400;
        letter-spacing: -.01em;
        line-height: 1.55;
    }

    .goals-container {
        position: relative;
        margin-bottom: 100px;
    }

    .goals-container h2 {
        width: 90%;
        margin: 0 auto 40px;
        color: #490e6f;
    }

    .goals-title h2 {
        color: #fff;
    }

    .goals-text {
        font-size: 18px;
        line-height: 1.38;
        font-weight: 400;
        color: #fff;
    }

    .swiper-slide {
        color: #fff;
        width: 90% !important;
        height: 300px;
        padding: 2.7vw 2.9vw 2.8vw 2.7vw;
        background-color: #490e6f;
        border-radius: 5px;
        margin: 0 5% 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .swiper-button-prev {
        width: 50px !important;
        height: 50px !important;
        position: absolute;
        top: 110%;
        left: 70%;
        z-index: 88;
    }

    .swiper-button-next {
        width: 50px !important;
        height: 50px !important;
        position: absolute;
        top: 110%;
        left: 84%;
        z-index: 88;
    }

    .swiper-button-prev:after,
    .swiper-rtl .swiper-button-next:after {
        content: "";
        width: 50px;
        height: 50px;
        background-image: url("../img/icon-left.png");
        background-size: 50px 50px;

    }

    .swiper-button-next:after,
    .swiper-rtl .swiper-button-prev:after {
        content: "";
        width: 50px;
        height: 50px;
        background-image: url("../img/icon-right.png");
        background-size: 50px 50px;
    }
}