/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@font-face {
    font-family: 'Noto Sans Bold';
    src: url('/Noto_Sans_CJKkr/NotoSansCJKkr-Bold.otf') format('truetype');
}

/* 모바일 웹 주소창 제거 (최소 높이 고정) */

body {
    min-height: 640px;
}

body[orient="portrait"] {
    min-height: 640px;
}

body[orient="landscape"] {
    min-height: 480px;
}

/* 모바일 웹 주소창 제거 (최소 높이 고정) */


html {
    font-family: 'Noto Sans Bold', sans-serif;
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    color: #707070;
}

.green {
    color: #3eb370;
}

.deepGreen {
    color: #175f42;
}

@-webkit-keyframes rightThree {
    0% {
        right: -200%
    }

    50% {
        right: -100%
    }

    100% {
        right: 0
    }
}

@keyframes rightThree {
    0% {
        right: -200%
    }

    50% {
        right: -100%
    }

    100% {
        right: 0
    }
}

@-webkit-keyframes bottomThree {
    0% {
        bottom: -200%
    }

    50% {
        bottom: -100%
    }

    100% {
        bottom: 0
    }
}

@keyframes bottomThree {
    0% {
        bottom: -200%
    }

    50% {
        bottom: -100%
    }

    100% {
        bottom: 0
    }
}


@-webkit-keyframes leftThree {
    0% {
        left: -200%
    }

    50% {
        left: -100%
    }

    100% {
        left: 0
    }
}


@keyframes leftThree {
    0% {
        left: -200%
    }

    50% {
        left: -100%
    }

    100% {
        left: 0
    }
}

@-webkit-keyframes leftFour {
    0% {
        left: -300%
    }

    33% {
        left: -200%
    }

    66% {
        left: -100%;
    }

    100% {
        left: 0
    }
}

@keyframes leftFour {
    0% {
        left: -300%
    }

    33% {
        left: -200%
    }

    66% {
        left: -100%;
    }

    100% {
        left: 0
    }
}

@-webkit-keyframes leftFive {
    0% {
        left: -400%
    }

    25% {
        left: -300%
    }

    50% {
        left: -200%
    }

    75% {
        left: -100%
    }

    100% {
        left: 0
    }
}

@keyframes leftFive {
    0% {
        left: -400%
    }

    25% {
        left: -300%
    }

    50% {
        left: -200%
    }

    75% {
        left: -100%
    }

    100% {
        left: 0
    }
}

@-webkit-keyframes leftSix {
    0% {
        left: -500%
    }

    20% {
        left: -400%
    }

    40% {
        left: -300%
    }

    60% {
        left: -200%
    }

    80% {
        left: -100%
    }

    100% {
        left: 0
    }
}

@keyframes leftSix {
    0% {
        left: -500%
    }

    20% {
        left: -400%
    }

    40% {
        left: -300%
    }

    60% {
        left: -200%
    }

    80% {
        left: -100%
    }

    100% {
        left: 0
    }
}


/* Desktop : 1080px 이상 */

@media (min-width: 1080px) {
    div {
        line-height: 1.6;
    }

    br.mobile {
        display: none;
    }

    header {
        height: 5.833vw;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10;
    }

    .mobileToggle {
        display: none;
    }

    header .logo {
        font-size: 0;
    }

    header .logo a {
        display: inline-block;
        width: 6.250vw;
        height: 2.703vw;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        z-index: 20;
    }

    header .logo a .imgBox {
        width: 100%;
        height: 100%;
        background-image: url(../image/230607_C_WHDev_Image/230607_C_WHDev_Image-desktop_1_v0.1.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    header .headerMenu {
        width: 100%;
        height: 100%;
    }

    header div {
        display: inline-block;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
    }
    
    header div a {
        color: #005836;
        font-size: 1.666vw;
        display: inline-block;
        width: 12.5vw;
        height: 2.5vw;
        line-height: 2.5vw;
        text-align: center;
    }

    header .storyBtn {
        left: 8.333vw;
    }
    header .goalsBtn {
        left: 22.50vw;
    }
    header .shopBtn {
        right: 22.50vw;
    }

    header .promiseBtn {
        right: 8.333vw;
    }

    main section {
        background: #f5f2e9;
        padding-top: 5.833vw;
        padding-left: 8.333vw;
        padding-right: 8.333vw;
        color: #707070;
    }
    
    main section#main {
        height: 100vh;
        position: relative;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        overflow: hidden;
    }

    main #main .bgImgBox {
        width: 600%;
        height: 100%;
        position: absolute;
        top: 0;
        left: -500%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;

        -webkit-animation-name: leftSix;

                animation-name: leftSix;
        -webkit-animation-delay: 2s;
                animation-delay: 2s;
        -webkit-animation-duration: 36s;
                animation-duration: 36s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    } 

    main #main .bgImgBox .imgBox {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
    }

    main #main .bgImgBox .one {
        background-color: #3eb370;
    }

    main #main .bgImgBox .two {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_1_1.png);
    }

    main #main .bgImgBox .three {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_1_2.png);
    }

    main #main .bgImgBox .four {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_1_3.png);
    }

    main #main .bgImgBox .five {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_1_4.png);
    }

    main section#main > .imgBox{
        width: 26.666vw;
        height: 11.375vw;
        position: absolute;
        top: 50%;
        left: 8.333vw;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
        z-index: 7;
        background-image: url(../image/230607_C_WHDev_Image/230607_C_WHDev_Image-desktop_2_v0.1.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    main section#main .scroll {
        position: absolute;
        left: 50%;
        bottom: 4.583vw;
        -webkit-transform: translate(-50%);
            -ms-transform: translate(-50%);
                transform: translate(-50%);
        z-index: 7;
    }

    main section#main .scroll a {
        display: block;
        width: 12.5vw;
        height: 5.416vw;
    }

    main section#main .scroll a .button{
        display: block;
        width: 2.916vw;
        height: 5.416vw;
        background: #fff;
        border-radius: 2vw;
        position: absolute;
        left: 50%;
        -webkit-transform: translate(-50%);
            -ms-transform: translate(-50%);
                transform: translate(-50%);
    }

    main section#main .scroll a .button::after {
        content: "";
        display: block;
        width: 1.25vw;
        height: 1.25vw;
        background: #005836;
        border-radius: 50%;
        position: absolute;
        top: 60%;
        left: 50%;
        -webkit-transform: translate(-50%);
            -ms-transform: translate(-50%);
                transform: translate(-50%);
    }

    main section#story .line1 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1.666vw;
        height: 40.833vw;
    }

    main section#story .line1 .storyBox1 {
        -webkit-box-flex: 3.764;
            -ms-flex-positive: 3.764;
                flex-grow: 3.764;
        position: relative;
        padding: 0 2.5vw;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }

    main section#story .line1 .storyBox1 .txt1 {
        font-size: 3.333vw;
        position: absolute;
        top: 1.666vw;
    }

    main section#story .line1 .storyBox1 .txt2 {
        font-size: 1.666vw;
        position: absolute;
        bottom: 4.479vw;
    }

    main section#story .line1 .storyBox2 {
        -webkit-box-flex: 2.764;
            -ms-flex-positive: 2.764;
                flex-grow: 2.764;
        position: relative;
        overflow: hidden;
    }

    main section#story .line1 .storyBox2 .storyBox2Belt {
        width: 300%;
        height: 36.666vw;
        position: absolute;
        top: 0;
        left: -200%;
        overflow: hidden;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 18s;
                animation-duration: 18s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main section#story .line1 .storyBox2 .storyBox2Belt .imgBox {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
    }

    main section#story .line1 .storyBox2 .storyBox2Belt .one {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_2_1.png);
    }

    main section#story .line1 .storyBox2 .storyBox2Belt .two {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_2_2.png);
    }

    main section#story .line1 .storyBox3 {
        -webkit-box-flex: 4.764;
            -ms-flex-positive: 4.764;
                flex-grow: 4.764;
        position: relative;
    }

    main section#story .line1 .storyBox3 .txt1 {
        font-size: 1.666vw;
        position: absolute;
        top: 10.416vw;
        right: 2.5vw;

    }

    main section#story .line1 .storyBox3 .txt2 {
        color: #fff;
        background: #3eb370;
        width: 26.666vw;
        height: 20.833vw;
        position: absolute;
        bottom: 0;
        right: 0;
        overflow: hidden;
    }

    main section#story .line1 .storyBox3 .txt2BoxBelt {
        width: 300%;
        height: 100%;
        position: absolute;
        top: 0;
        right: -200%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 24s;
                animation-duration: 24s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;

    }

    main section#story .line1 .storyBox3 .txt2BoxBelt .txt2Box {
        width: 100%;
        height: 100%;
        padding: 2.5vw;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        position: relative;
    }

    main section#story .line1 .storyBox3 .txt2BoxBelt .txt2Box .txt2BoxTitle {
        font-size: 3.333vw;
    }

    main section#story .line1 .storyBox3 .txt2BoxBelt .txt2Box .txt2BoxContent {
        font-size: 1.666vw;
        position: absolute;
        bottom: 4.0625vw;
    }

    main section#story .line2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1.666vw;
        height: 46.666vw;
    }

    main section#story .line2 .storyBox4 {
        -webkit-box-flex: 2;
            -ms-flex-positive: 2;
                flex-grow: 2;
        position: relative;
    }

    main section#story .line2 .storyBox4 .txt1 {
        width: 100%;
        height: 12.5vw;
        overflow: hidden;
        position: relative;
    }

    main section#story .line2 .storyBox4 .txt1 .txt1BoxBelt {
        width: 300%;
        height: 100%;
        position: absolute;
        top: 0;
        left: -200%;
        
        display: -webkit-box;
        
        display: -ms-flexbox;
        
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;
        
        -webkit-animation-delay: 2s;
        
                animation-delay: 2s;
        -webkit-animation-duration: 48s;
                animation-duration: 48s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main section#story .line2 .storyBox4 .txt1 .txt1BoxBelt .txt1BoxTitle {
        width: 100%;
        height: 100%;
        font-size: 3.333vw;
        background: #3eb370;
        color: #fff;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding: 3.75vw 2.5vw;
    }

    main section#story .line2 .storyBox4 .txt2 {
        font-size: 3.333vw;
        position: absolute;
        top: 16.666vw;
        left: 2.5vw;
    }
    main section#story .line2 .storyBox4 .txt3 {
        font-size: 1.666vw;
        position: absolute;
        top: 23.333vw;
        left: 2.5vw;
    }

    main section#story .line2 .storyBox5 {
        -webkit-box-flex: 3;
            -ms-flex-positive: 3;
                flex-grow: 3;
        position: relative;
    }

    main section#story .line2 .storyBox5 .storyBox5Wrapper {
        width: 40.833vw;
        height: 38.333vw;
        position: absolute;
        bottom: 0;
        right: 0;
        overflow: hidden;
    }

    main section#story .line2 .storyBox5 .storyBox5Wrapper .storyBox5Belt {
        width: 500%;
        height: 100%;
        position: absolute;
        top: 0;
        left: -400%;
        
        display: -webkit-box;
        
        display: -ms-flexbox;
        
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;
        
        -webkit-animation-delay: 2s;
        
                animation-delay: 2s;
        -webkit-animation-duration: 30s;
                animation-duration: 30s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main section#story .line2 .storyBox5 .storyBox5Wrapper .storyBox5Belt .imgBox {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
    }

    main section#story .line2 .storyBox5 .storyBox5Wrapper .storyBox5Belt .one {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_3_1.png);
    }

    main section#story .line2 .storyBox5 .storyBox5Wrapper .storyBox5Belt .two {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_3_2.png);
    }

    main section#story .line2 .storyBox5 .storyBox5Wrapper .storyBox5Belt .three {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_3_3.png);
    }

    main section#story .line2 .storyBox5 .storyBox5Wrapper .storyBox5Belt .four {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_3_4.png);
    }

    main section#story .storyWord {
        text-align: center;
        font-size: 3.333vw;
        padding: 8.333vw 2.5vw 3.4375vw;
    }

    main section#goals {}
    main section#goals .goalsTitleWrapper {
        width: 100%;
        height: 13.333vw;
        overflow: hidden;
        position: relative;
    }

    main section#goals .goalsTitleWrapper .goalsTitleBelt {
        width: 100%;
        height: 300%;
        position: absolute;
        bottom: -200%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 24s;
                animation-duration: 24s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main section#goals .goalsTitleWrapper .goalsTitleBelt .goalsTitle {
        width: 100%;
        height: 100%;
        color: #fff;
        background: #3eb370;
        text-align: center;
        font-size: 3.333vw;
        line-height: 13.333vw;
    }

    main section#goals .line1 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1.666vw;
    }

    main section#goals .line1 .goalsBox1 {
        -webkit-box-flex: 2;
            -ms-flex-positive: 2;
                flex-grow: 2;
        height: 33.333vw;
        position: relative;
    }

    main section#goals .line1 .goalsBox1 .goalsBox1Wrapper {
        width: 47.916vw;
        height: 25vw;
        position: absolute;
        bottom: 0;
        left: 0;
        overflow: hidden;
    }
    
    main section#goals .line1 .goalsBox1 .goalsBox1Wrapper .goalsBox1Belt {
        width: 500%;
        height: 100%;
        position: absolute;
        left: -400%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 35s;
                animation-duration: 35s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main section#goals .line1 .goalsBox1 .goalsBox1Wrapper .goalsBox1Belt .imgBox {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
    }

    main section#goals .line1 .goalsBox1 .goalsBox1Wrapper .goalsBox1Belt .one {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_4_1.png);
    }

    main section#goals .line1 .goalsBox1 .goalsBox1Wrapper .goalsBox1Belt .two {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_4_2.png);
    }

    main section#goals .line1 .goalsBox1 .goalsBox1Wrapper .goalsBox1Belt .three {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_4_3.png);
    }

    main section#goals .line1 .goalsBox1 .goalsBox1Wrapper .goalsBox1Belt .four {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_4_4.png);
    }

    main section#goals .line1 .goalsBox2 {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        height: 33.333vw;
        position: relative;
    }

    main section#goals .line1 .goalsBox2 .txt1 {
        font-size: 3.333vw;
        position: absolute;
        top: 17.083vw;
        left: 2.5vw;
    }

    main section#goals .line1 .goalsBox2 .txt2 {
        font-size: 1.666vw;
        position: absolute;
        top: 23.75vw;
        left: 2.5vw;
    }

    main section#goals .line2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1.666vw;
    }

    main section#goals .line2 .goalsBox3 {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        height: 37.5vw;
        position: relative;
    }

    main section#goals .line2 .goalsBox3 .txt1 {
        font-size: 3.333vw;
        position: absolute;
        top: 21.25vw;
        left: 2.5vw;
    }

    main section#goals .line2 .goalsBox3 .txt2 {
        font-size: 1.666vw;
        position: absolute;
        top: 27.916vw;
        left: 2.5vw;
    }

    main section#goals .line2 .goalsBox4 {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        height: 37.5vw;
        position: relative;
    }

    main section#goals .line2 .goalsBox4 .goalsBox4Wrapper {
        width: 100%;
        height: 29.166vw;
        position: absolute;
        bottom: 0;
        overflow: hidden;
    }
    
    main section#goals .line2 .goalsBox4 .goalsBox4Wrapper .goalsBox4Belt {
        width: 500%;
        height: 100%;
        position: absolute;
        left: -400%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 30s;
                animation-duration: 30s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main section#goals .line2 .goalsBox4 .goalsBox4Wrapper .goalsBox4Belt .imgBox {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
    }

    main section#goals .line2 .goalsBox4 .goalsBox4Wrapper .goalsBox4Belt .one {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_5_1.png);
    }

    main section#goals .line2 .goalsBox4 .goalsBox4Wrapper .goalsBox4Belt .two {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_5_2.png);
    }

    main section#goals .line2 .goalsBox4 .goalsBox4Wrapper .goalsBox4Belt .three {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_5_3.png);
    }

    main section#goals .line2 .goalsBox4 .goalsBox4Wrapper .goalsBox4Belt .four {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_5_4.png);
    }


    main section#goals .line2 .goalsBox5 {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        height: 37.5vw;
        position: relative;
    }

    main section#goals .line2 .goalsBox5 .goalsBox5Wrapper {
        width: 19.583vw;
        height: 20.416vw;
        position: absolute;
        top: 0;
        right: 0;
        overflow: hidden;
    }
    
    main section#goals .line2 .goalsBox5 .goalsBox5Wrapper .goalsBox5Belt {
        width: 300%;
        height: 100%;
        position: absolute;
        right: -200%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 18s;
                animation-duration: 18s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main section#goals .line2 .goalsBox5 .goalsBox5Wrapper .goalsBox5Belt .imgBox {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
    }

    main section#goals .line2 .goalsBox5 .goalsBox5Wrapper .goalsBox5Belt .one {
        background-color: #3eb370;
    }

    main section#goals .line2 .goalsBox5 .goalsBox5Wrapper .goalsBox5Belt .two {
        background-image: url(../image/230607_C_WHDev_Image/230607_C_WHDev_Image-desktop_4_v0.1.png);
    }


    main section#goals .line3 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1.666vw;
    }

    main section#goals .line3 .goalsBox6 {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        height: 41.666vw;
        position: relative;
    }

    main section#goals .line3 .goalsBox6 .goalsBox6Wrapper {
        width: 100%;
        height: 8.333vw;
        position: absolute;
        top: 8.333vw;
        overflow: hidden;
    }
    main section#goals .line3 .goalsBox6 .goalsBox6Wrapper .goalsBox6Belt {
        width: 300%;
        height: 100%;
        position: absolute;
        left: -200%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 48s;
                animation-duration: 48s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main section#goals .line3 .goalsBox6 .goalsBox6Wrapper .goalsBox6Belt .goalsBox6Title {
        width: 100%;
        height: 100%;
        color: #fff;
        background: #3eb370;
        font-size: 3.333vw;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding: 1.666vw 2.5vw;
    }

    main section#goals .line3 .goalsBox6 .txt1 {
        font-size: 3.333vw;
        position: absolute;
        top: 25.416vw;
        left: 2.5vw;
    }
    main section#goals .line3 .goalsBox6 .txt2 {
        font-size: 1.666vw;
        position: absolute;
        top: 32.083vw;
        left: 2.5vw;
    }

    main section#goals .line3 .goalsBox7 {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        height: 41.666vw;
        position: relative;
    }

    main section#goals .line3 .goalsBox7 .goalsBox7Wrapper {
        width: 33.75vw;
        height: 33.3333vw;
        position: absolute;
        bottom: 0;
        right: 0;
        overflow: hidden;
    }

    main section#goals .line3 .goalsBox7 .goalsBox7Wrapper .goalsBox7Belt {
        width: 500%;
        height: 100%;
        position: absolute;
        left: -400%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 45s;
                animation-duration: 45s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main section#goals .line3 .goalsBox7 .goalsBox7Wrapper .goalsBox7Belt .imgBox {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
    }

    main section#goals .line3 .goalsBox7 .goalsBox7Wrapper .goalsBox7Belt .one {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_6_1.png);
    }

    main section#goals .line3 .goalsBox7 .goalsBox7Wrapper .goalsBox7Belt .two {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_6_2.png);
    }

    main section#goals .line3 .goalsBox7 .goalsBox7Wrapper .goalsBox7Belt .three {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_6_3.png);
    }

    main section#goals .line3 .goalsBox7 .goalsBox7Wrapper .goalsBox7Belt .four {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_6_4.png);
    }

    main section#goals .line4 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1.666vw;
    }

    main section#goals .line4 .goalsBox8 {
        -webkit-box-flex: 2;
            -ms-flex-positive: 2;
                flex-grow: 2;
        height: 29.166vw;
        position: relative;
    }

    main section#goals .line4 .goalsBox8 .goalsBox8Wrapper {
        width: 100%;
        height: 20.833vw;
        position: absolute;
        bottom: 0;
        overflow: hidden;
    }

    main section#goals .line4 .goalsBox8 .goalsBox8Wrapper .goalsBox8Belt {
        width: 500%;
        height: 100%;
        position: absolute;
        left: -400%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 60s;
                animation-duration: 60s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main section#goals .line4 .goalsBox8 .goalsBox8Wrapper .goalsBox8Belt .imgBox {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
    }


    main section#goals .line4 .goalsBox8 .goalsBox8Wrapper .goalsBox8Belt .one {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_7_1.png);
    }

    main section#goals .line4 .goalsBox8 .goalsBox8Wrapper .goalsBox8Belt .two {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_7_2.png);
    }

    main section#goals .line4 .goalsBox8 .goalsBox8Wrapper .goalsBox8Belt .three {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_7_3.png);
    }

    main section#goals .line4 .goalsBox8 .goalsBox8Wrapper .goalsBox8Belt .four {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_7_4.png);
    }

    main section#goals .line4 .goalsBox9 {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        height: 29.166vw;
        position: relative;
    }
    main section#goals .line4 .goalsBox9 .txt1 {
        font-size: 3.333vw;
        position: absolute;
        top: 12.916vw;
        left: 2.5vw;
    }

    main section#goals .line4 .goalsBox9 .txt2 {
        font-size: 1.666vw;
        position: absolute;
        top: 19.588vw;
        left: 2.5vw;
    }

    main section#goals .goalsBox10 {
        height: 8.333vw;
        position: relative;
    }

    main section#goals .goalsBox10 .imgBox {
        width: 12.5vw;
        height: 2.5vw;
        position: absolute;
        bottom: 0;
        left: 50%;
        -webkit-transform: translate(-50%);
            -ms-transform: translate(-50%);
                transform: translate(-50%);
        background-image: url(../image/230607_C_WHDev_Image/230607_C_WHDev_Image-desktop_5_v0.1.png);
        background-repeat: no-repeat;
        background-size: cover;
    }

    main section#shop {}
    main section#shop .line1 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1.666vw;
    }

    main section#shop .line1 .shopBox1 {
        -webkit-box-flex: 17;
            -ms-flex-positive: 17;
                flex-grow: 17;
        height: 37.5vw;
        position: relative;
        background: #3eb370;
        color: #fff;
    }

    main section#shop .line1 .shopBox1 .txt1 {
        font-size: 3.333vw;
        position: absolute;
        top: 4.1666vw;
        left: 7.083vw;

    }

    main section#shop .line1 .shopBox1 .txt2 {
        font-size: 1.666vw;
        line-height: 2;
        position: absolute;
        top: 21.25vw;
        left: 7.083vw;
    }

    main section#shop .line1 .shopBox1 .txt3 {
        font-size: 1.25vw;
        color: #707070;
        position: absolute;
        top: 31.25vw;
        left: 7.083vw;
    }

    main section#shop .line1 .shopBox2 {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        height: 37.5vw;
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: space-evenly;
            -ms-flex-pack: space-evenly;
                justify-content: space-evenly;
        gap: 1.666vw;
    }

    main section#shop .line1 .shopBox2 > * {
        -ms-flex-item-align: center;
            -ms-grid-row-align: center;
            align-self: center;
    }

    main section#shop .line1 .shopBox2 .title {
        font-size: 1.666vw;
    }

    main section#shop .line1 .shopBox2 a {
        display: inline-block;
        width: 8.333vw;
        height: 6.666vw;
        font-size: 0;
        background-repeat: no-repeat;
        background-size: contain;
    }

    main section#shop .line1 .shopBox2 a:nth-of-type(1) {
        background-image: url(../image/230607_C_WHDev_Image/230607_C_WHDev_Image-desktop_6-1_v0.1.png);
    }

    main section#shop .line1 .shopBox2 a:nth-of-type(2) {
        background-image: url(../image/230607_C_WHDev_Image/230607_C_WHDev_Image-desktop_6-2_v0.1.png);
    }

    main section#shop .line1 .shopBox2 a:nth-of-type(3) {
        background-image: url(../image/230607_C_WHDev_Image/230607_C_WHDev_Image-desktop_6-3_v0.1.png);
    }

    main section#shop .line1 .shopBox2 a:nth-of-type(4) {
        background-image: url(../image/230607_C_WHDev_Image/230607_C_WHDev_Image-desktop_6-4_v0.1.png);
    }

    main section#shop .shopBox3 {
        width: 100%;
        height: 41.666vw;
        position: relative;
    }
    
    main section#shop .shopBox3 .imgBox {
        width: 40.8333vw;
        height: 13.0885vw;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        background-image: url(../image/230607_C_WHDev_Image/230607_C_WHDev_Image-desktop_7_v0.1.png);
        background-size: contain;
        background-repeat: no-repeat;
    }


    main section#promise {
        padding-bottom: 5.833vw;
    }

    main section#promise .promiseTitleWrapper {
        width: 100%;
        height: 13.333vw;
        overflow: hidden;
        position: relative;
    }

    main section#promise .promiseTitleWrapper .promiseTitleBelt {
        width: 100%;
        height: 300%;
        position: absolute;
        bottom: -200%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 24s;
                animation-duration: 24s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main section#promise .promiseTitleWrapper .promiseTitleBelt .promiseTitle {
        width: 100%;
        height: 100%;
        color: #fff;
        background: #3eb370;
        text-align: center;
        font-size: 3.333vw;
        line-height: 13.333vw;
    }

    main section#promise .line1 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1.666vw;
    }

    main section#promise .line1 .promiseBox1 {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        height: 45.833vw;
        position: relative;
    }

    main section#promise .line1 .promiseBox1 .imgBox {
        width: 100%;
        height: 37.5vw;
        position: absolute;
        bottom: 0;
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_8.png);
        background-repeat: no-repeat;
        background-size: cover;
    }

    main section#promise .line1 .promiseBox2 {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        height: 45.833vw;
        position: relative;
    }

    main section#promise .line1 .promiseBox2 .txt1 {
        font-size: 1.666vw;
        position: absolute;
        top: 24.166vw;
        left: 2.5vw;
    }

    main section#promise .line1 .promiseBox2 .txt2 {
        font-size: 1.25vw;
        position: absolute;
        top: 28.333vw;
        left: 2.5vw;
    }

    main section#promise .line1 .promiseBox3 {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        height: 45.833vw;
        position: relative;
    }

    main section#promise .line1 .promiseBox3 .imgBox {
        width: 100%;
        height: 29.166vw;
        position: absolute;
        top: 8.333vw;
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_9.png);
        background-repeat: no-repeat;
        background-size: cover;
    }

    main section#promise .line2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1.666vw;
    }

    main section#promise .line2 .promiseBox4 {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        height: 24.1666vw;
        position: relative;
    }

    main section#promise .line2 .promiseBox4 .txt1 {
        font-size: 1.666vw;
        position: absolute;
        top: 3.333vw;
        left: 2.5vw;
    }

    main section#promise .line2 .promiseBox4 .txt2 {
        font-size: 1.25vw;
        position: absolute;
        top: 7.5vw;
        left: 2.5vw;
    }

    main section#promise .line2 .promiseBox5 {
        -webkit-box-flex: 2;
            -ms-flex-positive: 2;
                flex-grow: 2;
        height: 24.1666vw;
        position: relative;
    }

    main section#promise .line2 .promiseBox5 .imgBox {
        width: 47.9166vw;
        height: 100%;
        position: absolute;
        right: 0;
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_10.png);
        background-repeat: no-repeat;
        background-size: cover;
    }

    main section#promise .line3 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1.666vw;
    }

    main section#promise .line3 .promiseBox6 {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        height: 41.6666vw;
        position: relative;
    }

    main section#promise .line3 .promiseBox6 .imgBox {
        width: 100%;
        height: 26.666vw;
        position: absolute;
        top: 8.333vw;
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_11.png);
        background-repeat: no-repeat;
        background-size: cover;
    }

    main section#promise .line3 .promiseBox7 {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        height: 41.6666vw;
        position: relative;
    }

    main section#promise .line3 .promiseBox7 .txt1 {
        font-size: 1.666vw;
        position: absolute;
        top: 21.666vw;
        left: 2.5vw;
    }

    main section#promise .line3 .promiseBox7 .txt2 {
        font-size: 1.25vw;
        position: absolute;
        top: 25.833vw;
        left: 2.5vw;
    }

    main section#promise .line3 .promiseBox8 {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        height: 41.6666vw;
        position: relative;
    }

    main section#promise .line3 .promiseBox8 .txt1 {
        font-size: 1.666vw;
        position: absolute;
        top: 3.333vw;
        left: 2.5vw;
    }

    main section#promise .line3 .promiseBox8 .txt2 {
        font-size: 1.25vw;
        position: absolute;
        top: 7.5vw;
        left: 2.5vw;
    }

    main section#promise .line3 .promiseBox8 .promiseBox8PrideWrapper {
        width: 100%;
        height: 16.666vw;
        position: absolute;
        bottom: 0;
        overflow: hidden;
    }

    main section#promise .line3 .promiseBox8 .promiseBox8PrideWrapper .promiseBox8PrideBelt {
        width: 300%;
        height: 100%;
        position: absolute;
        right: -200%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 48s;
                animation-duration: 48s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main section#promise .line3 .promiseBox8 .promiseBox8PrideWrapper .promiseBox8PrideBelt .promiseBox8Pride {
        width: 100%;
        height: 100%;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding: 5.8854vw 2.5vw;
        font-size: 3.333vw;
        color: #fff;
        background: #3eb370;
    }

    main section#promise .line4 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1.666vw;
    }

    main section#promise .line4 .promiseBox9 {
        -webkit-box-flex: 2;
            -ms-flex-positive: 2;
                flex-grow: 2;
        height: 42.9166vw;
        position: relative;
    }

    main section#promise .line4 .promiseBox9 .imgBox {
        width: 100%;
        height: 34.4791vw;
        position: absolute;
        bottom: 0;
        background-image: url(../image/230515_C_WHDev_Image-desktop-certification/230515_C_WHDev_Image-desktop-certification_v0.1.png);
        background-repeat: no-repeat;
        background-size: cover;
    }

    main section#promise .line4 .promiseBox10 {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        height: 42.9166vw;
        position: relative;
    }

    main section#promise .line4 .promiseBox10 .txt1 {
        font-size: 1.666vw;
        position: absolute;
        top: 29.583vw;
        left: 2.5vw;
    }

    main section#promise .line4 .promiseBox10 .txt2 {
        font-size: 1.25vw;
        position: absolute;
        top: 33.75vw;
        left: 2.5vw;
    }

    main section#promise .line5 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1.666vw;
    }

    main section#promise .line5 .promiseBox11 {
        -webkit-box-flex: 1.5;
            -ms-flex-positive: 1.5;
                flex-grow: 1.5;
        height: 29.166vw;
        position: relative;
    }

    main section#promise .line5 .promiseBox11 .txt1 {
        font-size: 1.666vw;
        position: absolute;
        top: 18.333vw;
        left: 2.5vw;
    }

    main section#promise .line5 .promiseBox11 .txt2 {
        font-size: 1.25vw;
        position: absolute;
        top: 21.666vw;
        left: 2.5vw;
    }

    main section#promise .line5 .promiseBox12 {
        -webkit-box-flex: 2;
            -ms-flex-positive: 2;
                flex-grow: 2;
        height: 29.166vw;
        position: relative;
    }

    main section#promise .line5 .promiseBox12 .promiseBox12Wrapper {
        width: 100%;
        height: 20.833vw;
        position: absolute;
        bottom: 0;
        overflow: hidden;
    }

    main section#promise .line5 .promiseBox12 .promiseBox12Wrapper .promiseBox12Belt {
        width: 400%;
        height: 100%;
        position: absolute;
        left: -300%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 64s;
                animation-duration: 64s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main section#promise .line5 .promiseBox12 .promiseBox12Wrapper .promiseBox12Belt .imgBox {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
    }

    main section#promise .line5 .promiseBox12 .promiseBox12Wrapper .promiseBox12Belt .one {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_12_1.png);
    }

    main section#promise .line5 .promiseBox12 .promiseBox12Wrapper .promiseBox12Belt .two {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_12_2.png);
    }

    main section#promise .line5 .promiseBox12 .promiseBox12Wrapper .promiseBox12Belt .three {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-desktop_12_3.png);
    }

    main section#promise .line5 .promiseBox13 {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        height: 29.166vw;
        position: relative;
    }

    main section#promise .line5 .promiseBox13 .greenBox {
        width: 5.416vw;
        height: 5.416vw;
        background: #3eb370;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    
    aside {
        position: fixed;
        bottom: 5.84vw;
        right: 8.33vw;
        z-index: 10;
    }

    aside a .imgBox {
        width: 5.4166vw;
        height: 5.4166vw;
        background-image: url(../image/230607_C_WHDev_Image/230607_C_WHDev_Image-desktop_8-2_v0.1.png);
        background-repeat: no-repeat;
        background-size: cover;
    }

    footer {
        background: #fff;
    }

    footer .footerTitle {
        width: 100%;
        height: 20.833vw;
        background: #3eb370;
        line-height: 20.833vw;
        text-align: center;
        color: #fff;
        font-size: 3.333vw;
    }

    footer .footerContent {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        position: relative;
        color: #707070;
    }

    footer .footerContent .left {
        width: 28.75vw;
        height: 25vw;
        position: relative;
    }

    footer .footerContent .left .txt1 {
        font-size: 3.333vw;
        position: absolute;
        top: 2.5vw;
    }

    footer .footerContent .left .txt2 {
        font-size: 0.8333vw;
        line-height: 2;
        position: absolute;
        bottom: 1.25vw;
    }

    footer .footerContent .right {
        width: 21.666vw;
        height: 25vw;
        position: relative;
    }

    footer .footerContent .right .txt1 {
        font-size: 1.25vw;
        position: absolute;
        top: 2.5vw;
    }

    footer .footerContent .right .txt2 {
        font-size: 2.5vw;
        position: absolute;
        top: 4.583vw;
    }

    footer .footerContent .right .link {
        font-size: 1.25vw;
        position: absolute;
        top: 10vw;
    }

    footer .footerContent .right .link a {
        display: inline-block;
        line-height: 2;
    }

    footer .footerContent .right .txt3 {
        font-size: 0.8333vw;
        color: #1e3264;
        position: absolute;
        bottom: 1.25vw;
    }


}

















/* Mobile : 1080px 미만 */













@media (max-width: 1079px) {
    div {
        line-height: 1.4;
    }

    br.desktop {
        display: none;
    }

    header {
        height: 13.333vw;
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10;
    }

    header .mobileToggle {
        height: 5.555vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        position: absolute;
        top: 50%;
        left: 4.444vw;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
        cursor: pointer;
    }

    header .mobileToggle > div {
        width: 6.666vw;
        height: 1.388vw;
        background: #005836;
        border-radius: 1.388vw;
    }

    header h1 {
        font-size: 0;
    }

    header h1 a {
        width: 42.222vw;
        height: 6.666vw;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        font-size: 0;
        z-index: 20;
    }

    header h1 a .imgBox {
        width: 100%;
        height: 100%;
        background-image: url(../image/230607_C_WHDev_Image/230607_C_WHDev_Image-mobile_2_v0.1.png);
        background-repeat: no-repeat;
        background-size: cover;
    }

    header .headerMenu {
        position: absolute;
        top: 13.333vw;
        left: 0;
        right: 0;
        background: #3eb370;
        padding: 2vw 0;
        display: none;
    }

    header .active {
        display: block;
    }

    header .headerMenu div a {
        display: inline-block;
        height: 11.2222vw;
        line-height: 17.2222vw;
        padding-left: 8.888vw;
        width: 100%;
        height: 100%;
        color: #005836;
        font-size: 5.5555vw;
    }

    main {

    }

    main #main {
        width: 100vw;
        height: 100vh;
        background: #3eb370;
    }

    main section#main {
        height: 100vh;
        position: relative;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        overflow: hidden;
    }

    main #main .bgImgBox {
        width: 600%;
        height: 100%;
        position: absolute;
        top: 0;
        left: -500%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;

        -webkit-animation-name: leftSix;

                animation-name: leftSix;
        -webkit-animation-delay: 2s;
                animation-delay: 2s;
        -webkit-animation-duration: 36s;
                animation-duration: 36s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    } 

    main #main .bgImgBox .imgBox {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
    }

    main #main .bgImgBox .one {
        background-color: #3eb370;
    }

    main #main .bgImgBox .two {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_1_1.png);
    }

    main #main .bgImgBox .three {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_1_2.png);
    }

    main #main .bgImgBox .four {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_1_3.png);
    }

    main #main .bgImgBox .five {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_1_4.png);
    }

    main section#main > .imgBox{
        width: 42.222vw;
        height: 18vw;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        background-image: url(../image/230607_C_WHDev_Image/230607_C_WHDev_Image-mobile_3_v0.1.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    main #main .scroll {
        position: absolute;
        left: 50%;
        bottom: 11.111vw;
        -webkit-transform: translate(-50%);
            -ms-transform: translate(-50%);
                transform: translate(-50%);
    }

    main #main .scroll a {
        display: block;
        width: 42.222vw;
        height: 17.777vw;
    }

    main #main .scroll a .button {
        display: block;
        width: 10vw;
        height: 17.777vw;
        background: #fff;
        border-radius: 5vw;
        position: absolute;
        left: 50%;
        -webkit-transform: translate(-50%);
            -ms-transform: translate(-50%);
                transform: translate(-50%);
    }

    main #main .scroll a .button::after {
        content: "";
        display: block;
        width: 4.444vw;
        height: 4.444vw;
        background: #005836;
        border-radius: 50%;
        position: absolute;
        top: 60%;
        left: 50%;
        -webkit-transform: translate(-50%);
            -ms-transform: translate(-50%);
                transform: translate(-50%);
    }

    main section {
        padding-top: 13.333vw;
        background: #f5f2e9;
        color: #707070;
    }

    main #story {}

    main #story .line1 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    main #story .line1 .storyBox1 {
        height: 82.222vw;
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
        position: relative;
    }

    main #story .line1 .storyBox1 .txt1 {
        font-size: 8.888vw;
        position: absolute;
        top: 6.666vw;
        left: 8.888vw;
    }

    main #story .line1 .storyBox1 .txt2 {
        font-size: 5.555vw;
        position: absolute;
        top: 26.666vw;
        left: 8.888vw;
    }

    main section#story .line1 .storyBox2 {
        height: 113.333vw;
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
        position: relative;
        overflow: hidden;
    }

    main section#story .line1 .storyBox2 .storyBox2Belt {
        width: 300%;
        height: 100vw;
        margin: 6.6666vw 0;
        position: absolute;
        top: 0;
        left: -200%;
        overflow: hidden;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 18s;
                animation-duration: 18s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main section#story .line1 .storyBox2 .storyBox2Belt .imgBox {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
    }

    main section#story .line1 .storyBox2 .storyBox2Belt .one {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_2_1.png);
    }

    main section#story .line1 .storyBox2 .storyBox2Belt .two {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_2_2.png);
    }

    main #story .line1 .storyBox3 {
        height: 97.777vw;
        -webkit-box-ordinal-group: 4;
            -ms-flex-order: 3;
                order: 3;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
    }

    main #story .line1 .storyBox3 .txt1 {
        font-size: 5.555vw;
        height: 25.556vw;
        padding-top: 6.666vw;
        padding-left: 8.888vw;
    }

    main #story .line1 .storyBox3 .txt2 {
        height: 66.666vw;
        color: #fff;
        position: relative;
        overflow: hidden;
    }

    main #story .line1 .storyBox3 .txt2 .txt2BoxBelt {
        width: 300%;
        height: 53.333vw;
        position: absolute;
        top: 6.666vw;
        right: -200%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 24s;
                animation-duration: 24s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main #story .line1 .storyBox3 .txt2 .txt2BoxBelt .txt2Box {
        width: 100%;
        height: 100%;
        padding: 2.5vw;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        position: relative;
        background: #3eb370;
    }

    main #story .line1 .storyBox3 .txt2 .txt2BoxBelt .txt2Box .txt2BoxTitle {
        font-size: 8.888vw;
        position: absolute;
        top: 8.888vw;
        left: 8.888vw;
    }

    main #story .line1 .storyBox3 .txt2 .txt2BoxBelt .txt2Box .txt2BoxContent {
        font-size: 5.555vw;
        position: absolute;
        top: 26.666vw;
        left: 8.888vw;
    }

    main #story .line2 .storyBox4 {}
    main #story .line2 .storyBox4 .txt1 {
        height: 35.555vw;
        overflow: hidden;
        position: relative;
    }

    main #story .line2 .storyBox4 .txt1 .txt1BoxBelt {
        width: 300%;
        height: 22.222vw;
        position: absolute;
        top: 6.666vw;
        left: -200%;
                
        display: -webkit-box;
                
        display: -ms-flexbox;
                
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;
        
        -webkit-animation-delay: 2s;
        
                animation-delay: 2s;
        -webkit-animation-duration: 48s;
                animation-duration: 48s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main #story .line2 .storyBox4 .txt1 .txt1BoxBelt .txt1BoxTitle {
        width: 100%;
        height: 100%;
        color: #fff;
        background: #3eb370;
        font-size: 8.888vw;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding: 4.444vw 8.888vw;
    }

    main #story .line2 .storyBox4 .txt2 {
        font-size: 8.888vw;
        padding-top: 6.666vw;
        padding-left: 8.888vw;
    }
    main #story .line2 .storyBox4 .txt3 {
        font-size: 5.555vw;
        padding-top: 6.666vw;
        padding-left: 8.888vw;
        padding-bottom: 7.222vw;;
    }

    main #story .line2 .storyBox5 {
        height: 102.222vw;
        position: relative;
    }

    main #story .line2 .storyBox5 .storyBox5Wrapper {
        width: 100%;
        height: 88.888vw;
        position: absolute;
        top: 6.66vw;
        overflow: hidden;
    }

    main section#story .line2 .storyBox5 .storyBox5Wrapper .storyBox5Belt {
        width: 500%;
        height: 100%;
        position: absolute;
        top: 0;
        left: -400%;
        
        display: -webkit-box;
        
        display: -ms-flexbox;
        
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;
        
        -webkit-animation-delay: 2s;
        
                animation-delay: 2s;
        -webkit-animation-duration: 30s;
                animation-duration: 30s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main section#story .line2 .storyBox5 .storyBox5Wrapper .storyBox5Belt .imgBox {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
    }
    
    main section#story .line2 .storyBox5 .storyBox5Wrapper .storyBox5Belt .one {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_3_1.png);
    }

    main section#story .line2 .storyBox5 .storyBox5Wrapper .storyBox5Belt .two {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_3_2.png);
    }

    main section#story .line2 .storyBox5 .storyBox5Wrapper .storyBox5Belt .three {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_3_3.png);
    }

    main section#story .line2 .storyBox5 .storyBox5Wrapper .storyBox5Belt .four {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_3_4.png);
    }

    main #story .storyWord {
        height: 53.333vw;
        font-size: 8.888vw;
        padding-top: 20vw;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        text-align: center;
    }

    main #goals {}

    main #goals .goalsTitleWrapper {
        width: 100%;
        height: 48.888vw;
        overflow: hidden;
        position: relative;
    }

    main #goals .goalsTitleWrapper .goalsTitleMobileWrapper {
        width: 100%;
        height: 35.555vw;
        position: absolute;
        top: 6.666vw;
        overflow: hidden;
    }

    main #goals .goalsTitleWrapper .goalsTitleMobileWrapper .goalsTitleBelt {
        width: 100%;
        height: 300%;
        position: absolute;
        bottom: -200%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 24s;
                animation-duration: 24s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main #goals .goalsTitleWrapper .goalsTitleMobileWrapper .goalsTitleBelt .goalsTitle {
        width: 100%;
        height: 100%;
        font-size: 8.888vw;
        line-height: 35.555vw;
        color: #fff;
        background: #3eb370;
        text-align: center;
    }

    main #goals .line1 {}
    main #goals .line1 .goalsBox1 {
        height: 82.222vw;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        position: relative;
    }
    
    main #goals .line1 .goalsBox1 .goalsBox1Wrapper {
        width: 100%;
        height: 68.888vw;
        position: absolute;
        top: 6.666vw;
        overflow: hidden;
    }
    
    main section#goals .line1 .goalsBox1 .goalsBox1Wrapper .goalsBox1Belt {
        width: 500%;
        height: 100%;
        position: absolute;
        left: -400%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 35s;
                animation-duration: 35s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main section#goals .line1 .goalsBox1 .goalsBox1Wrapper .goalsBox1Belt .imgBox {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
    }

    main section#goals .line1 .goalsBox1 .goalsBox1Wrapper .goalsBox1Belt .one {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_4_1.png);
    }

    main section#goals .line1 .goalsBox1 .goalsBox1Wrapper .goalsBox1Belt .two {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_4_2.png);
    }

    main section#goals .line1 .goalsBox1 .goalsBox1Wrapper .goalsBox1Belt .three {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_4_3.png);
    }

    main section#goals .line1 .goalsBox1 .goalsBox1Wrapper .goalsBox1Belt .four {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_4_4.png);
    }

    main #goals .line1 .goalsBox2 {
        height: 46.666vw;
    }

    main #goals .line1 .goalsBox2 .txt1 {
        font-size: 8.888vw;
        padding-top: 6.666vw;
        padding-left: 8.888vw;
    }

    main #goals .line1 .goalsBox2 .txt2 {
        font-size: 5.555vw;
        padding-top: 6.666vw;
        padding-left: 8.888vw;
    }

    main #goals .line2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    main #goals .line2 .goalsBox3 {
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
    }

    main #goals .line2 .goalsBox3 .txt1 {
        font-size: 8.888vw;
        padding-top: 6.666vw;
        padding-left: 8.888vw;
    }

    main #goals .line2 .goalsBox3 .txt2 {
        font-size: 5.555vw;
        padding-top: 6.666vw;
        padding-left: 8.888vw;
    }

    main #goals .line2 .goalsBox4 {
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
        height: 97.777vw;
        position: relative;
    }

    main #goals .line2 .goalsBox4 .goalsBox4Wrapper {
        width: 100%;
        height: 84.444vw;
        position: absolute;
        top: 6.666vw;
        overflow: hidden;
    }
    
    main section#goals .line2 .goalsBox4 .goalsBox4Wrapper .goalsBox4Belt {
        width: 500%;
        height: 100%;
        position: absolute;
        left: -400%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 30s;
                animation-duration: 30s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main section#goals .line2 .goalsBox4 .goalsBox4Wrapper .goalsBox4Belt .imgBox {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
    }

    main section#goals .line2 .goalsBox4 .goalsBox4Wrapper .goalsBox4Belt .one {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_5_1.png);
    }

    main section#goals .line2 .goalsBox4 .goalsBox4Wrapper .goalsBox4Belt .two {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_5_2.png);
    }

    main section#goals .line2 .goalsBox4 .goalsBox4Wrapper .goalsBox4Belt .three {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_5_3.png);
    }

    main section#goals .line2 .goalsBox4 .goalsBox4Wrapper .goalsBox4Belt .four {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_5_4.png);
    }

    main #goals .line3 {
        position: relative;
    }

    main #goals .line3 .goalsBox6 {
        height: 166.666vw;
        position: relative;
    }

    main #goals .line3 .goalsBox6 .goalsBox6Wrapper {
        width: 100%;
        height: 35.555vw;
        position: relative;
        overflow: hidden;
    }

    main #goals .line3 .goalsBox6 .goalsBox6Wrapper .goalsBox6MobileWrapper {
        width: 100%;
        height: 22.222vw;
        position: absolute;
        top: 6.666vw;
        overflow: hidden;
    }

    main #goals .line3 .goalsBox6 .goalsBox6Wrapper .goalsBox6MobileWrapper .goalsBox6Belt {
        width: 300%;
        height: 100%;
        position: absolute;
        left: -200%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 48s;
                animation-duration: 48s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main #goals .line3 .goalsBox6 .goalsBox6Wrapper .goalsBox6MobileWrapper .goalsBox6Belt .goalsBox6Title {
        width: 100%;
        height: 100%;
        color: #fff;
        background: #3eb370;
        font-size: 8.888vw;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding: 4.444vw 8.888vw;
    }

    main #goals .line3 .goalsBox6 .txt1 {
        font-size: 8.888vw;
        padding-top: 91.111vw;
        padding-left: 8.888vw;
    }
    main #goals .line3 .goalsBox6 .txt2 {
        font-size: 5.555vw;
        padding-top: 2.5vw;
        padding-left: 8.888vw;
    }

    main #goals .line3 .goalsBox7 {
        position: absolute;
        top: 35.555vw;
        width: 100%;
        height: 84.444vw;
    }

    main section#goals .line3 .goalsBox7 .goalsBox7Wrapper {
        width: 100%;
        height: 71.111vw;
        position: absolute;
        top: 6.666vw;
        overflow: hidden;
    }

    main section#goals .line3 .goalsBox7 .goalsBox7Wrapper .goalsBox7Belt {
        width: 500%;
        height: 100%;
        position: absolute;
        left: -400%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 45s;
                animation-duration: 45s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main section#goals .line3 .goalsBox7 .goalsBox7Wrapper .goalsBox7Belt .imgBox {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
    }

    main section#goals .line3 .goalsBox7 .goalsBox7Wrapper .goalsBox7Belt .one {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_6_1.png);
    }

    main section#goals .line3 .goalsBox7 .goalsBox7Wrapper .goalsBox7Belt .two {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_6_2.png);
    }

    main section#goals .line3 .goalsBox7 .goalsBox7Wrapper .goalsBox7Belt .three {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_6_3.png);
    }

    main section#goals .line3 .goalsBox7 .goalsBox7Wrapper .goalsBox7Belt .four {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_6_4.png);
    }

    main #goals .line4 .goalsBox8 {
        height: 46.666vw;
        position: relative;
    }

    main section#goals .line4 .goalsBox8 .goalsBox8Wrapper {
        width: 100%;
        height: 33.333vw;
        position: absolute;
        top: 6.666vw;
        overflow: hidden;
    }

    main section#goals .line4 .goalsBox8 .goalsBox8Wrapper .goalsBox8Belt {
        width: 500%;
        height: 100%;
        position: absolute;
        left: -400%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 60s;
                animation-duration: 60s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main section#goals .line4 .goalsBox8 .goalsBox8Wrapper .goalsBox8Belt .imgBox {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
    }

    main section#goals .line4 .goalsBox8 .goalsBox8Wrapper .goalsBox8Belt .one {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_7_1.png);
    }

    main section#goals .line4 .goalsBox8 .goalsBox8Wrapper .goalsBox8Belt .two {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_7_2.png);
    }

    main section#goals .line4 .goalsBox8 .goalsBox8Wrapper .goalsBox8Belt .three {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_7_3.png);
    }

    main section#goals .line4 .goalsBox8 .goalsBox8Wrapper .goalsBox8Belt .four {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_7_4.png);
    }

    main #goals .line4 .goalsBox9 {
        height: 46.666vw;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding: 6.666vw 8.888vw;
    }

    main #goals .line4 .goalsBox9 .txt1 {
        font-size: 8.888vw;
        padding-bottom: 2.5vw;
    }

    main #goals .line4 .goalsBox9 .txt2 {
        font-size: 5.555vw;
    }

    main #goals .goalsBox10 {
        height: 26.666vw;
        margin-top: 4.444vw;
        position: relative;
    }

    main #goals .goalsBox10 .imgBox{
        width: 42.222vw;
        height: 13.333vw;
        position: absolute;
        bottom: 0;
        left: 50%;
        -webkit-transform: translate(-50%);
            -ms-transform: translate(-50%);
                transform: translate(-50%);
        background-image: url(../image/230607_C_WHDev_Image/230607_C_WHDev_Image-mobile_5_v0.1.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    main #shop {}
    main #shop .line1 {}
    main #shop .line1 .shopBox1 {
        height: 131.111vw;
        color: #fff;
        background: #3eb370;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding-top: 6.666vw;
        padding-left: 8.888vw;
    }

    main #shop .line1 .shopBox1 .txt1 {
        font-size: 8.888vw;
    }

    main #shop .line1 .shopBox1 .txt2 {
        font-size: 5.555vw;
        padding-top: 6.666vw;
        line-height: 2;
    }
    main #shop .line1 .shopBox1 .txt3 {
        font-size: 4.444vw;
        color: #707070;
        padding-top: 6.666vw;
    }


    main #shop .line1 .shopBox2 {
        height: 46.666vw;
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding-top: 22.222vw;
        -ms-flex-pack: distribute;
            justify-content: space-around;
    }

    main #shop .line1 .shopBox2 .title {
        font-size: 5.555vw;
        position: absolute;
        top: 6.666vw;
        left: 50%;
        -webkit-transform: translate(-50%);
            -ms-transform: translate(-50%);
                transform: translate(-50%);
    }

    main #shop .line1 .shopBox2 a {
        display: inline-block;
        width: 17.777vw;
        height: 17.777vw;
        font-size: 0;
        background-repeat: no-repeat;
        background-size: contain;
    }

    main section#shop .line1 .shopBox2 a:nth-of-type(1) {
        background-image: url(../image/230607_C_WHDev_Image/230607_C_WHDev_Image-mobile_6-1_v0.1.png);
    }

    main section#shop .line1 .shopBox2 a:nth-of-type(2) {
        background-image: url(../image/230607_C_WHDev_Image/230607_C_WHDev_Image-mobile_6-2_v0.1.png);
    }

    main section#shop .line1 .shopBox2 a:nth-of-type(3) {
        background-image: url(../image/230607_C_WHDev_Image/230607_C_WHDev_Image-mobile_6-3_v0.1.png);
    }

    main section#shop .line1 .shopBox2 a:nth-of-type(4) {
        background-image: url(../image/230607_C_WHDev_Image/230607_C_WHDev_Image-mobile_6-4_v0.1.png);
    }

    main #shop .shopBox3 {
        height: 100vw;
        position: relative;
    }

    main #shop .shopBox3 .imgBox {
        width: 80vw;
        height: 26.111vw;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        background-image: url(../image/230607_C_WHDev_Image/230607_C_WHDev_Image-mobile_7_v0.1.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    
    main #promise {
        padding-bottom: 13.333vw;
    }

    main #promise .promiseTitleWrapper {
        width: 100%;
        height: 48.888vw;
        overflow: hidden;
        position: relative;
    }

    main #promise .promiseTitleWrapper .promiseTitleMobileWrapper {
        width: 100%;
        height: 35.555vw;
        position: absolute;
        top: 6.666vw;
        overflow: hidden;
    }

    main #promise .promiseTitleWrapper .promiseTitleMobileWrapper .promiseTitleBelt {
        width: 100%;
        height: 300%;
        position: absolute;
        bottom: -200%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 24s;
                animation-duration: 24s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main #promise .promiseTitleWrapper .promiseTitleMobileWrapper .promiseTitleBelt .promiseTitle {
        width: 100%;
        height: 100%;
        color: #fff;
        background: #3eb370;
        text-align: center;
        font-size: 8.888vw;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        line-height: 35.555vw;
    }

    main #promise .line1 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    main #promise .line1 .promiseBox1 {
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
        height: 102.222vw;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding-top: 6.666vw;
    }

    main #promise .line1 .promiseBox1 .imgBox {
        width: 71.111vw;
        height: 88.888vw;
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_8.png);
        background-repeat: no-repeat;
        background-size: cover;
    }

    main #promise .line1 .promiseBox2 {
        -webkit-box-ordinal-group: 4;
            -ms-flex-order: 3;
                order: 3;
        height: 44.444vw;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding-top: 6.666vw;
        padding-left: 8.888vw;
    }

    main #promise .line1 .promiseBox2 .txt1 {
        font-size: 5.555vw;
        margin-bottom: 2.222vw;
    }

    main #promise .line1 .promiseBox2 .txt2 {
        font-size: 4.444vw;
    }

    main #promise .line1 .promiseBox3 {
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
        margin-top: 44.444vw;
        height: 93.333vw;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        position: relative;
    }

    main #promise .line1 .promiseBox3 .imgBox {
        width: 71.111vw;
        height: 80vw;
        position: absolute;
        top: 6.666vw;
        right: 0;
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_9.png);
        background-repeat: no-repeat;
        background-size: cover;
    }

    main #promise .line2 {
        position: relative;
    }

    main #promise .line2 .promiseBox4 {
        position: absolute;
        top: -182.222vw;
        padding-top: 6.666vw;
        padding-left: 8.888vw;
    }

    main #promise .line2 .promiseBox4 .txt1 {
        font-size: 5.555vw;
        margin-bottom: 2.222vw;
    }

    main #promise .line2 .promiseBox4 .txt2 {
        font-size: 4.444vw;
    }

    main #promise .line2 .promiseBox5 {
        height: 80vw;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding-top: 6.666vw;
    }

    main #promise .line2 .promiseBox5 .imgBox {
        width: 71.111vw;
        height: 66.666vw;
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_10.png);
        background-repeat: no-repeat;
        background-size: cover;
    }

    main #promise .line3 {
        position: relative;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding: 44.444vw 0 35.555vw;
    }

    main #promise .line3 .promiseBox6 {
        height: 84.444vw;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        position: relative;
    }

    main #promise .line3 .promiseBox6 .imgBox {
        width: 71.111vw;
        height: 71.111vw;
        position: absolute;
        top: 6.666vw;
        right: 0;
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_11.png);
        background-repeat: no-repeat;
        background-size: cover;
    }

    main #promise .line3 .promiseBox7 {
        height: 44.444vw;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding-top: 6.666vw;
        padding-left: 8.888vw;
    }

    main #promise .line3 .promiseBox7 .txt1 {
        font-size: 5.555vw;
        margin-bottom: 2.222vw;
    }

    main #promise .line3 .promiseBox7 .txt2 {
        font-size: 4.444vw;
    }

    main #promise .line3 .promiseBox8 {
        position: absolute;
        top: 6.666vw;
        left: 8.888vw;
    }

    main #promise .line3 .promiseBox8 .txt1 {
        font-size: 5.555vw;
        margin-bottom: 2.222vw;
    }

    main #promise .line3 .promiseBox8 .txt2 {
        font-size: 4.444vw;
    }

    main #promise .line3 .promiseBox8 .promiseBox8PrideWrapper {
        width: 100vw;
        height: 35.555vw;
        position: absolute;
        top: 166.666vw;
        left: -9vw;
        overflow: hidden;
    }

    main #promise .line3 .promiseBox8 .promiseBox8PrideWrapper .promiseBox8PrideBelt {
        width: 300%;
        height: 22.222vw;
        position: absolute;
        top: 6.666vw;
        right: -200%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 48s;
                animation-duration: 48s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main #promise .line3 .promiseBox8 .promiseBox8PrideWrapper .promiseBox8PrideBelt .promiseBox8Pride {
        width: 100%;
        height: 100%;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding: 4.444vw 8.888vw;
        font-size: 8.888vw;
        color: #fff;
        background: #3eb370;
    }

    main #promise .line4 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    main #promise .line4 .promiseBox9 {
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
    }

    main #promise .line4 .promiseBox9 .imgBox {
        height: 260vw;
        background-image: url(../image/230516_C_WHDev_Image-mobile-certification/230516_C_WHDev_Image-mobile-certification_v0.1.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    main #promise .line4 .promiseBox10 {
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
        height: 44.444vw;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding-top: 6.666vw;
        padding-left: 8.888vw;
    }

    main #promise .line4 .promiseBox10 .txt1 {
        font-size: 5.555vw;
        margin-bottom: 2.222vw;
    }

    main #promise .line4 .promiseBox10 .txt2 {
        font-size: 4.444vw;
    }

    main #promise .line5 .promiseBox11 {
        height: 44.444vw;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding-top: 6.666vw;
        padding-left: 8.888vw;
    }

    main #promise .line5 .promiseBox11 .txt1 {
        font-size: 5.555vw;
        margin-bottom: 3.055vw;
    }

    main #promise .line5 .promiseBox11 .txt2 {
        font-size: 4.444vw;
    }

    main #promise .line5 .promiseBox12 {
        height: 80vw;
        position: relative;
    }

    main section#promise .line5 .promiseBox12 .promiseBox12Wrapper {
        width: 100%;
        height: 66.666vw;
        position: absolute;
        top: 6.666vw;
        overflow: hidden;
    }

    main section#promise .line5 .promiseBox12 .promiseBox12Wrapper .promiseBox12Belt {
        width: 400%;
        height: 100%;
        position: absolute;
        left: -300%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;

        -webkit-animation-delay: 2s;

                animation-delay: 2s;
        -webkit-animation-duration: 64s;
                animation-duration: 64s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    main section#promise .line5 .promiseBox12 .promiseBox12Wrapper .promiseBox12Belt .imgBox {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
    }

    main section#promise .line5 .promiseBox12 .promiseBox12Wrapper .promiseBox12Belt .one {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_12_1.png);
    }

    main section#promise .line5 .promiseBox12 .promiseBox12Wrapper .promiseBox12Belt .two {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_12_2.png);
    }

    main section#promise .line5 .promiseBox12 .promiseBox12Wrapper .promiseBox12Belt .three {
        background-image: url(../image/230605_C_WHDev_Image/230605_C_WHDev_Image-mobile_12_3.png);
    }

    main #promise .line5 .promiseBox13 {
        height: 31.111vw;
        position: relative;
    }

    main #promise .line5 .promiseBox13 .greenBox {
        width: 17.777vw;
        height: 17.777vw;
        position: absolute;
        bottom: 0;
        right: 4.444vw;
        background: #3eb370;
    }

    aside {
        position: fixed;
        bottom: 13.333vw;
        right: 4.444vw;
        z-index: 10;
    }

    aside a .imgBox {
        width: 17.777vw;
        height: 17.777vw;
        background-image: url(../image/230607_C_WHDev_Image/230607_C_WHDev_Image-mobile_8-2_v0.1.png);
        background-repeat: no-repeat;
        background-size: cover;
    }

    footer {}
    footer .footerTitle {
        height: 44.444vw;
        background: #3eb370;
        color: #fff;
        font-size: 8.888vw;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding: 8.888vw;
        text-align: center;
    }

    footer .footerContent {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding-top: 13.333vw;
        padding-left: 8.888vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
        color: #707070;
    }

    footer .footerContent .right {
        position: relative;
    }
    footer .footerContent .right .txt1 {
        font-size: 4.444vw;
    }
    footer .footerContent .right .txt2 {
        font-size: 6.666vw;
    }

    footer .footerContent .right .link {
        padding-top: 4.444vw;
        padding-bottom: 51.111vw;
    }

    footer .footerContent .right .link a {
        font-size: 4.444vw;
        line-height: 3;
    }

    footer .footerContent .right .txt3 {
        position: absolute;
        top: 188.888vw;
        color: #1e3264;
        font-size: 3.333vw;
    }

    footer .footerContent .left {
        padding-bottom: 15vw;
    }

    footer .footerContent .left .txt1 {
        font-size: 8.888vw;
        padding-bottom: 4.444vw;
    }

    footer .footerContent .left .txt2 {
        font-size: 3.333vw;
        line-height: 2;
    }
}