@charset "UTF-8";
/*index.html에 선언된 스타일시트*/
/* 파기된 프로젝트 */

@font-face {
    font-family: 'TmoneyRoundWindRegular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/TmoneyRoundWindRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'TmoneyRoundWindExtraBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/TmoneyRoundWindExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}




:root {
    --ti-cursor-font-weight: .5px;
    --ti-cursor-transform: translateX(-1.5rem);
    --ti-cursor-color: rgba(0, 0, 0, .6);
     --ti-cursor-line-height: 5px;
     --ti-cursor-height: 5px;

    /*공통수치 통합관리*/
    --union-line-height: 1.35;


    /*컬러 관리*/
    --background: #000000;
    --systemColor: #ffffff;
    --systemColorD: rgba(0, 0, 0, 0.85);
    --systemColorLD: rgba(0, 0, 0, .6);
    --sectorTitleColor: rgba(255, 255, 255, 0.8);
    --pinkL: #F4AFDD;
    --pinkD: #CF8AB8;
    --pinkUD: #B06E9A;
    --yellowL: #F7DC75;
    --yellowD: #D3BA59;
    --yellowUD: #C29D13;
    --blueL: #BCD1EB;
    --blueD: #98B1D1;
    --blueUD: #7A96B8;
    --greenL: #9EB366;
    --greenD: #829945;
    --greenUD: #6E8630;
    --ivory: #EDE7D9;



    /*--background: #FAF4E5;*/
    /*--systemColor: #000;*/
    /*--systemColorD: rgba(255, 255, 255, 0.85);*/
    /*--systemColorLD: rgba(255, 255, 255, .6);*/
    /*--sectorTitleColor: rgba(0, 0, 0, 0.8);*/



/*    글꼴크기 관리*/
/*    --text-xlarge: 6vmin;*/
/*    --text-large: 4.65vmin;*/
/*    --text-medium: 3.5vmin;*/
/*    --text-regular: 3vmin;*/
/*    --text-semi-medium: 2.6vmin;*/
/*    --text-small: 2.4vmin;*/
/*    --text-extra-small: 1.7vmin;*/
    /* rem 환산 */
    /*--text-xlarge: 3.7rem;*/
    /*--text-large: 3.0375rem;*/
    /*--text-medium: 2.3rem;*/
    /*--text-regular: 2rem;*/
    /*--text-semi-medium: 1.755rem;*/
    /*--text-small: 1.32rem ;*/
    /*--text-extra-small: 1.1475rem;*/
/*    vw 환산*/
    --text-xlarge: 3vw; /* 6.000vw * 0.5625 */
    --text-large: 2.3vw; /* 4.650vw * 0.5625 */
    --text-medium: 1.6vw; /* 3.500vw * 0.5625 */
    --text-regular: 1.3vw; /* 3.000vw * 0.5625 */
    --text-semi-medium: 1.5vw; /* 2.600vw * 0.5625 */
    --text-small: 1vw; /* 2.400vw * 0.5625 */
    --text-extra-small: 0.75vw; /* 1.700vw * 0.5625 */
   
}


/*@media screen and (max-width: 1526px) {*/
/*    :root {*/
/*        --text-xlarge: 3rem;*/
/*        --text-large: 2.6rem;*/
/*        --text-medium: 2rem;*/
/*        --text-regular: 1.5rem;*/
/*        --text-semi-medium: 1.1rem;*/
/*        --text-small: .9rem ;*/
/*        --text-extra-small: .7rem;*/
/*    }*/
/*}*/




/* 공통 스타일 (가로/세로 스크롤바에 적용) */
::-webkit-scrollbar {
    width: 1px; /* 세로 스크롤바 너비 */
    height: 1px; /* 가로 스크롤바 높이 */
}



*,
*::before,
*::after {
    color: var(--systemColor);
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {
    width: 100%;
    background: var(--background);
    /* font-family: "Pretendard", sans-serif; */
    font-family: "NanumSquareRound", sans-serif;
    /* font-family: "TmoneyRoundWindExtraBold", sans-serif; */

    overflow-x: hidden;
    word-break: keep-all;
    letter-spacing: -.05em;
    line-height: var(--union-line-height);
    /*padding: 20px;*/

    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;

    overflow-y: auto;
    -ms-overflow-style: none; /* IE 및 Edge용 */
    scrollbar-width: none; /* Firefox용 */
}


#wrap {
    /* border: solid 5px red; */
    /*max-width: 1920px;*/
    width: 100%;
    margin: 0 auto;
}



/*header > nav*/
header {
    display: block;
    /*background: #fff;*/
    position: fixed;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    /* border: solid 1px red; */
    border-radius: 50px;
    width: 680px;
    color: #1f1f1f;
    z-index: 5;
    transition: ease 0.25s;
}
header.active {
    background: rgb(255, 255, 255, .15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(20px); /*Safari 전용 blur*/
    border: solid .5px rgba(255, 255, 255, .35);
    box-shadow:
            1.4px 1.5px 3.3px rgba(0, 0, 0, 0.055),
            4.7px 5.1px 11.2px rgba(0, 0, 0, 0.064),
            21px 23px 50px rgba(0, 0, 0, 0.07);
}
nav {
    /* border: solid 1px blue; */
    width: 95%;
    /* height: 100%; */
    margin: 0 auto;
    /* padding-top: 10px; */
}

/*#nav_logo_black {*/
/*    display: none;*/
/*    place-items: center;*/
/*    float: left;*/
/*    !*border: solid 1px green;*!*/
/*    !*height: 60px;*!*/
/*}*/
#nav_logo_white {
    display: flex;
    place-items: center;
    float: left;
    /*border: solid 1px green;*/
    height: 50px;
    margin-top: 3px;
    margin-right: 1.1rem;
    opacity: .8;
}

.nav_menu {
    /*border: solid 1px red;*/
    /*display: inline-block;*/
    list-style-type: none;
    /*margin-right: 1rem;*/
    line-height: 50px;
    display: flex;
    margin-top: 5px;
}
.nav_menu li {
    /*margin-left: 50px;*/
    /*display: ;*/
    vertical-align: center;
    margin: 0 auto;
    justify-content: space-between;
}

.nav_menu a {
    font-family: "TmoneyRoundWindExtraBold", sans-serif;
    text-decoration: none;
    color: #fff;
    font-size: 1em;
    font-weight: 500;
    position: relative;
    border: none;
    background: none;
    opacity: .85;

    /* 기본 패딩과 배경, border-radius 설정 */
    padding: 16px 25px;
    border-radius: 50px;
    transition: background .1s, color .1s; /* 색상 변경 애니메이션 추가 */
}

.nav_menu a:hover {
    color: var(--systemColorLD);
    background: rgba(255, 255, 255, .85);
}
.nav_menu a:active {
    opacity: .5;
}

main {
    display: block;
}






/*UNION*/
.clear {
    clear: both;
}

.sectorTitle {
    display: inline-block;
    margin: 0 1rem 2rem 0;
    opacity: 0;
}
.sectorTitleYellow {
    display: inline-block;
    margin: 0 1rem 2rem 0;
    opacity: 0;
}
.sectorTitleblue {
    display: inline-block;
    margin: 0 1rem 2rem 0;
    opacity: 0;
}
.sectorTitleGreen {
    display: inline-block;
    margin: 0 1rem 2rem 0;
    opacity: 0;
}
.sectorTitle p {
    font-family: "Pretendard", sans-serif;
    font-weight: 600;
    display: inline-block;
    color: rgba(0, 0, 0, .7);
    font-size: var(--text-small);
    background: var(--pinkL);
    padding: 5px 20px;
    border-radius: 50px;
}
.sectorTitleYellow p {
    font-family: "Pretendard", sans-serif;
    font-weight: 600;
    display: inline-block;
    color: rgba(0, 0, 0, .7);
    font-size: var(--text-small);
    background: var(--yellowL);
    padding: 5px 20px;
    border-radius: 50px;
}
.sectorTitleYellow.active {
    animation: proj_bg .75s ease 0s 1 both;
}

.sectorTitleBlue p {
    font-family: "Pretendard", sans-serif;
    font-weight: 600;
    display: inline-block;
    color: rgba(0, 0, 0, .7);
    font-size: var(--text-small);
    background: var(--blueL);
    padding: 5px 20px;
    border-radius: 50px;
}
.sectorTitleGreen p {
    font-family: "Pretendard", sans-serif;
    font-weight: 600;
    display: inline-block;
    color: rgba(0, 0, 0, .7);
    font-size: var(--text-small);
    background: var(--greenL);
    padding: 5px 20px;
    border-radius: 50px;
}
.sectorTitleGreen.active {
    animation: proj_bg .75s ease 0s 1 both;
}
.sectorTitleBlue.active {
    animation: proj_bg .75s ease 0s 1 both;
}

.sectorTitle.active {
    animation: proj_bg .75s ease 0s 1 both;
}
.sectorTitle.sub.active {
    animation: proj_bg .75s ease .1s 1 both;
}
.sectorTitle.active .subtitle {
    animation: subtitle_bg 2.5s ease 0s 1 both;
}


.main_img {
    /*position: fixed;*/
    position: absolute;
    top: 0;
    left: 0;


    width: 100%;
    /* height: 100%; */
    z-index: -10;
    /*opacity: .8;*/
}
.main_img img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
}
.main_img video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*backdrop-filter: blur(0) brightness(.85);*/
    background: rgb(2,0,36);
    background: linear-gradient(0deg, rgba(2,0,36,0) 50%, rgba(0,0,0,0.6) 100%);
}

.pink {
    color: var(--pinkL);
}
.yellow {
    color: var(--yellowL);
}
.blue {
    color: var(--blueL);
}

.bold {
    font-weight: 900;
}

.main_title {
    font-family: "TmoneyRoundWindExtraBold", sans-serif;
    font-weight: 800;;
    font-size: var(--text-large);
    opacity: 0;
}
.main_subtitle {
    /* border: solid 1px red; */
    width: 55%;
    font-size: var(--text-semi-medium);
    opacity: 0;
}





/*INTRO*/
section#intro {
    /*border: solid 1px red;*/
    /*position: fixed;*/
    top: 0;
    width: 100vw;
    height: 100vh;
    letter-spacing: -3px;
    z-index: -9;
    opacity: 1;
    /*background-image: url("../sources/temp/dev_intro2.png");*/
    background-position: center;
    background-size: contain;
    /*filter: brightness(0.6);*/
}

article#intro_bg {
    background: url('../sources/main_bg.png');
    background-size: cover;
    background-position: top;
}

article#intro_container {
    /*border: solid 1px red;*/
    /*display: flex;*/
    align-items: center;
    width: 90%;
    height: 100vh;
    margin: 0 auto;
    /*padding-top: 28vh;*/
}
.logo_container {
    width: 700px;
    height: 350px;
    /*background-image: url("../sources/logomotion_white.png");*/
    background-size: cover;

    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);

    animation: logoMotion 3s steps(23) forwards;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;

    filter: drop-shadow(2px 2px 25px rgba(0, 0, 0, .35));
}
@keyframes logoMotion {
    100% { background-position: -16100px 0; }
}

.text-pop-up-top {
    -webkit-animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}










/*SECTOR01*/
#sec1_bg {
    /* border: solid 1px blue; */
    width: 100%;
    height: 100vh;
    background: var(--background);
    /*background-image: url("../sources/bgSymbols.png");*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}
section#sector1 {
    position: relative;

    /* border: solid 1px red; */
    display: block;
    width: 90%;
    margin: 0 auto;
    padding-top: 15rem;
}

.sec1img {
    margin-top: 6rem;
    background: url("../sources/sec1_kids.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: solid 1.8vmin var(--pinkL);
    border-radius: 7vmin;
    width: 75%;
    aspect-ratio: 1/.4;
    float: right;
    opacity: 0;
}
.sec1img.active {
    animation: big-small .75s cubic-bezier(0, 0.03, 0.12, 1.01) forwards;
}

.main_title.active {
    animation: proj_bg .5s .15s cubic-bezier(0, 0.03, 0.12, 1.01) forwards;
}
.main_subtitle.active {
    animation: subtitle_bg .75s .3s cubic-bezier(0, 0.03, 0.12, 1.01) forwards;
}






/* SECTOR 02 */
#sec2_bg {
    /* border: solid 1px blue; */
    width: 100%;
    height: 100%;
    background: var(--background);
    /*background-image: url("../sources/bgSymbols.png");*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}
section#sector2 {
    position: relative;

    /* border: solid 1px red; */
    display: block;
    width: 90%;
    margin: 0 auto;
    padding-top: 15rem;
}

.sec2flexbox1 {
    /* border: solid 1px red; */
    width: 70%;
    display: flex;
    justify-content: space-between;
    float: right;
    margin: 4rem 0 2rem 0;
}
.sec2FlexContainer {
    /* border: solid 10px #fff; */
    border-radius: 40px;
    background: var(--pinkL);
    width: 32.5%;
    aspect-ratio: 1 / 1;
}
.sec2FlexContainer .main {
    /* display: flex; */
    /* border: solid 1px blue; */
    width: 90%;
    height: 73%;
    align-items: center;
    padding-top: 2rem;
    margin: 0 auto;
    /* font-weight: 800; */
    color: var(--systemColorD);
    font-size: var(--text-medium);
}
.sec2FlexContainer .sub {
    padding-top: 2rem;
    color: var(--systemColorD);
    width: 90%;
    margin: 0 auto;
    font-size: var(--text-extra-small);
}
.sec2FlexContainer.one {
    background: var(--blueL);
}
.sec2FlexContainer.three {
    background: var(--greenL);
}


.sec2flexbox2 {
    /* border: solid 1px red; */
    width: 60%;
    display: flex;
    flex-direction: row; /* 가로 배치 */
    align-items: flex-start; /* 요소들을 위쪽에 정렬 */
    justify-content: space-between;
    float: right;
    margin:0 15rem 3rem 0;
}


article#search_bar {
    background: #fff;
    width: 60vmin;
    aspect-ratio: 1 / .12;
    border-radius: 2.5vmin;
    /* float: right; */
    margin-top: 4rem;
}

article#search_bar .search_img {
     /*border: solid 1px blue;*/
    margin: 2vh 0 0 1.45vw;

}
.search_bar_svg {
    margin-top: 3rem;
    width: 140%;
    transform-origin: 50% 50%;
    transform: translateX(-17%);
}
article#search_bar p {
    /*border: solid 1px red;*/
    display: inline-block;
    color: var(--systemColorD);
    font-size: var(--text-semi-medium);
    /*height: 100%;*/
    padding: 0 0 0 1vmax;
}
.search_bar span {
    /* border: solid 1px red; */
    font-size: var(--text-medium);
}
article#search_bar span {
    font-size: var(--text-large);
    margin: 3rem 0 0 1.4rem;
}

.news {
    margin-top: 5rem;
    transform: translateX(-390px);
    width: 140%;
}

.rect {
    opacity: 0;
}
.rect.one.active {
    animation: dissolve 1s ease forwards;
}
.rect.two.active {
    animation: dissolve 1s .05s ease forwards;
}
.rect.three.active {
    animation: dissolve 1s .1s ease forwards;
}
.rect.four.active {
    animation: dissolve2 1s .5s ease forwards;
}
.rect.five.active {
    animation: dissolve3 1s 1s ease forwards;
}



@keyframes dissolve {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes dissolve2 {
    0% {opacity: 0;}
    100% {opacity: .76;}
}
@keyframes dissolve3 {
    0% {opacity: 0;}
    100% {opacity: .35;}
}










  /* SECTOR 03 */
  #sec3_bg {
    /* border: solid 1px blue; */
    width: 100%;
    height: 100%;
    background: var(--background);
    /*background-image: url("../sources/bgSymbols.png");*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}
section#sector3 {
    position: relative;

    /* border: solid 1px red; */
    display: block;
    width: 90%;
    margin: 0 auto;
    padding-top: 20rem;
}


.dogRabbit_step {
    /*border: solid 1px red;*/
    display: flex;
    width: 15vmin;
    aspect-ratio: 1 / 1;
    background: url("../sources/stepAni/dograbbit_step.webp");
    background-size: cover;
    float: right;
    /*margin-right: 25vmin;*/
    /*transform: translate(-30rem, 3rem);*/

    animation: dogRabbit 1.5s steps(10) infinite alternate;
}
@keyframes dogRabbit {
    100% {background-position: calc(15vmin * 10) 0}
}



article#sec2_flexbox {
    /*border: solid 1px red;*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 70%;
    float: right;
    margin-top: 5rem;
    gap: 1vmax;
}
.sec2Flex {
    /* border: solid 1px blue; */
    width: 30vmax;
    aspect-ratio: 1 / 1;
    gap: 1vmax;

    text-align: center;
    transform-style: preserve-3d;
    opacity: 0;
}
.sec2Flex.one.active {
    animation: slide_in_left .75s cubic-bezier(0.38, 0.08, 0.03, 0.88) forwards;
    /*opacity: 1;*/
}
.sec2Flex.two.active {
    animation: slide_in_left .75s cubic-bezier(0.38, 0.08, 0.03, 0.88) .15s forwards;
    /*opacity: 1;*/
}
.sec2Flex.three.active {
    animation: slide_in_left .75s cubic-bezier(0.38, 0.08, 0.03, 0.88) .3s forwards;
    /*opacity: 1;*/
}

.sec2Flex.one {
    background: var(--blueL);
    border-radius: 4vmin;
    border: solid 1vmin #fff;
    aspect-ratio: 1 / 1;
}
.sec2Flex.two {
    background: var(--yellowL);
    border-radius: 4vmin;
    border: solid 1vmin #fff;
    aspect-ratio: 1 / 1;
}
.sec2Flex.three {
    background: var(--pinkL);
    border-radius: 4vmin;
    border: solid 1vmin #fff;
    aspect-ratio: 1 / 1;
}

.symbol_top {
    /*border: solid 1px red;*/
    display: flex;
    justify-content: center;
    align-items: center;
    height:65%;
    /*text-align: center;*/
    transform: perspective(1000px) translateZ(50px);

}
.symbol_top svg {
    width: 55%;
    height: 55%;
    opacity: 0;
}
.symbol_top svg.active {
    animation: FadeInBottom .5s forwards .5s;
}
.leaf {
    animation: leafMoving 1.5s infinite alternate;
    transform-origin: 60px 40px;

}
@keyframes leafMoving {
    0% {}
    100% {transform: rotate(-20deg);}
}
.leaf2 {
    animation: leaf2Moving 1.5s infinite alternate;
    transform-origin: 30px 60px;
    /*transform: perspective(1000px) translateZ(100px);*/

}
@keyframes leaf2Moving {
    0% {}
    100% {transform: rotate(5deg) translateY(40px);}
}


.toy1 {
    animation: toyMoving .75s infinite alternate cubic-bezier(0, 0.48, 0.58, 1);
}
.toy2 {
    animation: toy2Moving .75s .1s infinite alternate cubic-bezier(0, 0.48, 0.58, 1);
}
.toy3 {
    animation: toy3Moving .75s .2s infinite alternate cubic-bezier(0, 0.48, 0.58, 1);
}
@keyframes toyMoving {
    0% {}
    100% {transform: translateY(-50px)}
}
@keyframes toy2Moving {
    0% {}
    100% {transform: translateY(-30px)}
}
@keyframes toy3Moving {
    0% {}
    100% {transform: translateY(-10px)}
}

.text_bottom {
    /*border: solid 1px blue;*/
    height: 35%;
    transform: perspective(1000px) translateZ(20px);

}
.text_bottom p {
    color: var(--systemColorD);
    font-weight: 800;
    font-size: var(--text-medium);
    margin-bottom: .75rem;
}
.text_bottom span {
    color: var(--systemColorD);
    font-weight: 600;
    font-size: var(--text-small);
}
article#sec2_result {
    /* border: solid 1px red; */
    display: block;
    width: 70%;
    aspect-ratio: 1 / .5;
    float: right;
}
article#sec2_result .plus_icon {
    /*border: solid 1px red;*/
    /* text-align: center; */
    margin: 6rem 0 2rem 0;
}
article#sec2_result .plus_icon img {
    opacity: 0;

}
article#sec2_result .plus_icon img.active {
    animation: rotate 1s ease 0s 1 normal forwards;
}
@keyframes rotate {
    0% {
        opacity: 0;
        transform: rotate(-540deg) scale(0);
    }

    100% {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

article#sec2_result p {
    /* text-align: center; */
    font-size: var(--text-semi-medium);
    font-weight: 300;
    opacity: 0;
}
article#sec2_result p.active{
    -webkit-animation: tracking-in-expand-fwd-top 0.8s .5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-expand-fwd-top 0.8s .5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@keyframes tracking-in-expand-fwd-top {
    0% {
        letter-spacing: -.5em;
        transform: translateZ(-700px) translateY(-300px);
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }
    40% {
        opacity: 0.4;
    }
    100% {
        transform: translateZ(0) translateY(0);
        opacity: 1;
    }
}

article#summary {
    /* border: solid 1px red; */
    display: inline-block;
    width: 100%;
    margin-top: 13rem;
}
article#summary .summary_flexbox {
    display: flex;
    width: 100%;
    margin-bottom: 8rem;
    opacity: 1;
}
.summary_flexbox.active {
    animation: slide_in_left .75s cubic-bezier(0, 0.03, 0.12, 1.01) forwards;
}

.textFlex {
    /*border: solid 1px blue;*/
    width: 35%;
}
.textFlex p {
    font-size: var(--text-semi-medium);
    color: #fff;

}
.textFlex .sub {
    margin-bottom: .5rem;
}

.imgFlex {
     /*border: solid 1px blue;*/
    width: 65%;
}
.imgFlex img {
    width: 100%;
}
.imgFlex2 {
    width: 65%;
}
.imgFlex2 img {
    width: 70%;
    padding-left: .9rem;
}








/* SECTOR 04 */
#sec4_bg {
    /* border: solid 1px blue; */
    width: 100%;
    height: 100%;
    /* background: var(--background); */
    /*background-image: url("../sources/bgSymbols.png");*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}
section#sector4 {
    /* border: solid 1px red; */
    display: block;
    width: 90%;
    margin: 0 auto;
    padding-top: 20rem;
}

article.survey.active {
    animation: FadeInBottom .75s cubic-bezier(0, 0.03, 0.12, 1.01) forwards;
}
.result {
    margin: 7rem 0 17rem 0;
    font-weight: 800;
    font-size: var(--text-semi-medium);
}

.result_box {
    margin: -7rem 0 20rem 0;
}
.result_box p {
    display: inline-block;
    font-size: var(--text-xlarge);
    font-weight: 900;
}

.highlight-animation {
    position: relative;
    display: inline-block;
    font-size: var(--text-xlarge);
    /* font-weight: 500; */
    color: var(--yellowL); /* 초기 텍스트 색상 */
    transition: color 0.5s .5s ease; /* 텍스트 색상 전환 */
}

/* 형광펜 효과 스타일 */
.highlight-animation::before {
    content: '';
    position: absolute;
    left: -2%;
    /*bottom: -4%;*/
    width: 102%;
    height: 100%;
    background-color: var(--yellowL); /* 형광펜 색상 */
    border-radius: 100px;
    padding: 1vw 2vw;
    z-index: -1; /* 텍스트 뒤에 위치 */
    transform: scaleX(0); /* 초기 상태: 숨김 */
    transform-origin: left; /* 왼쪽에서 시작 */
    transition: transform .75s .5s ease; /* 애니메이션 설정 */
}

/* 호버 시 애니메이션 효과 */
.highlight-animation.active {
    color: black; /* 텍스트 색상 변경 */
}

.highlight-animation.active::before {
    transform: scaleX(1); /* 형광펜이 왼쪽에서 오른쪽으로 */
}

article.survey {
    margin-bottom: 8rem;
    opacity: 0;
}
.stepAni_inline {
     /*border: solid 1px red;*/
    display: inline;
    width: 8vw;
    aspect-ratio: 1 / 1 ;
    background-image: url("../sources/stepAni/rami_jump_step.webp");
    background-size: cover;

    position: absolute;
    left: 48vw;
    top: -2vh;
    /*transform: translate(-1.5vw, 2vh);*/

    animation: rami_step 1s steps(8) infinite alternate;
}
.stepAni2_inline {
    /*border: solid 1px red;*/
    display: inline;
    width: 8vw;
    aspect-ratio: 1 /1 ;
    background: url('../sources/stepAni/poki_step.webp');
    background-size: cover;

    position: absolute;
    right: 0vw;
    top: -2vh;
    /*transform: translate(-1.5vw, 5vh);*/

    right: 0;

    animation: poki_step 1.5s steps(12) infinite;
}

.stepAni {
    /* border: solid 1px red; */
    display: inline-block;
    width: 8vw;
    aspect-ratio: 1 / 1;
    background-image: url("../sources/stepAni/maru_fork_step.webp");
    background-size: cover;

    /* margin: -3rem -4rem -1.5rem -.75rem; */
    transform: translate(-8vw, -3vh);

    animation: stepAni 1s steps(10) infinite alternate;
}
.stepAni2 {
    /* border: solid 1px red; */
    display: inline-block;
    width: 8vw;
    aspect-ratio: 1 / 1;
    background-image: url("../sources/stepAni/rami_step.webp");
    background-size: cover;

    transform: translate(-20.5vw, -3vh);

    animation: rami_step 1s steps(8) infinite alternate;
}
@keyframes stepAni {
    100% { background-position: calc(8vw * 10) 0; }
}

@keyframes rami_step {
    100% { background-position: calc(8vw * 8) 0; }
}
@keyframes poki_step {
    100% { background-position: calc(8vw * 12) 0; }
}

.planet {
    position: absolute;
    transform: translate(6rem, -17rem);
    z-index: -3;
    opacity: .5;
}
/* .planet {
    display: inline-block;
    width: 15rem;
    aspect-ratio: 1 / 1;
    background: url('../sources/stepAni/saturn.webp');
    background-size: cover;

    animation: planet 2s steps(15) infinite alternate;
}
@keyframes planet {
    100% { background-position: calc(15rem * 15) 0;}
} */
.stars1 {
    position: absolute;
    transform: translate(0, -37.5rem);
    z-index: -3;
}
.stars2 {
    position: absolute;
    transform: translate(17rem, -12rem);
    z-index: 0;
    scale: .75;
}
.stars3 {
    position: absolute;
    transform: translate(82rem, -1.5rem);
    z-index: -3;
    scale: .75;
}

.stars1.active {
    animation: dissolve 1s ease forwards;
}
.stars2.active {
    animation: dissolve 1s ease forwards;
}
.stars3.active {
    animation: dissolve 1s ease forwards;
}







/* SECTOR 05 */
#sec5_bg {
    /* border: solid 1px blue; */
    width: 100%;
    background: #EEF6FF;
    /*background-image: url("../sources/bgSymbols.png");*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    margin-top: 20rem;
    padding-bottom: 10rem;
    /* border-radius: 600px 600px 0 0; */
}
section#sector5 {
    /* border: solid 1px red; */
    display: block;
    width: 90%;
    margin: 0 auto;
    padding-top: 10rem;
}

article.introduce {
    /* border: solid 1px red; */
    width: 55%;
    margin: 0 auto;
    text-align: center;
}
article.introduce .chars_container {
    /*border: solid 1px blue;*/
    width: 60%;
    aspect-ratio: 1 / 1; /* 1:1 비율로 정사각형 */
    margin: 0 auto;
}
article.introduce img {
    width: 56%;
    margin: 4rem 0 0 0;
}
article.introduce p {
    margin-top: 4rem;
    font-weight: 600;
    font-size: var(--text-medium);
    color: var(--pinkL);
}

article.service_goal {
    margin-top: 15rem;
}

.sec5_flex_container {
    /* border: solid 1px red; */
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.sec5Flex {
    /* border: solid 1px blue; */
    width: 49%;
    aspect-ratio: 1 / .55;
    border-radius: 2.5rem;
    position: relative;
}
.sec5Flex p {
    position: absolute;
    font-family: "TmoneyRoundWindRegular", sans-serif;
    /* border: solid 1px red; */
    font-size: var(--text-medium);
    margin: 2rem;
    bottom: 0;
}
.tmoney {
    font-family: "TmoneyRoundWindExtrabold", sans-serif;
}
.sec5Flex.one {
    background: url("../sources/service_goal_1.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0;
}
.sec5Flex.two {
    background: url("../sources/service_goal_2.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0;
}

.sec5Flex.one.active {
    animation: scale-in-ver-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.sec5Flex.two.active {
    animation: scale-in-ver-bottom .5s .15s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes scale-in-ver-bottom {
    0% {
      -webkit-transform: scaleY(0);
              transform: scaleY(0);
      -webkit-transform-origin: 0% 100%;
              transform-origin: 0% 100%;
      opacity: 1;
    }
    100% {
      -webkit-transform: scaleY(1);
              transform: scaleY(1);
      -webkit-transform-origin: 0% 100%;
              transform-origin: 0% 100%;
      opacity: 1;
    }
  }
  



.about1 {
    font-size: var(--text-medium);
    font-weight: 900;
    margin-top: 8rem;
}
.about2 {
    font-size: var(--text-semi-medium);
    font-weight: 500;
    color: var(--systemColorD);
    width: 60%;
}
.about2 strong {
    color: var(--blueUD);
}










/* SECTOR 06 */
#sec6_bg {
    /* border: solid 1px blue; */
    width: 100%;
    height: 100%;
    background: var(--background);
    /*background-image: url("../sources/bgSymbols.png");*/
}
section#sector6 {
    /* border: solid 1px red; */
    /* display: block; */
    width: 90%;
    margin: 0 auto;
    padding-top: 30rem;
}

article.logo_box {
    /* border: solid 1px red; */
    /* position: absolute; */
    /* width: 70%; */
    margin: 0 auto;
    text-align: center;

    margin-top: 8rem;


    gap: 20px; /* 좌우 여백 조정 */
    color: #fff; /* 텍스트 색상 설정 */
    padding: 20px;
}
.biglogo {
    width: 50vw;
    animation: fly 2s ease-in-out infinite;

}
@keyframes fly {
    0% {transform: translateY(0);}
    50% {transform: translateY(35px);}
    100% {transform: translateY(0);}
}
/* .biglogo.active {
    animation: fly 1s infinite alternate forwards, big-small .5s ease forwards;
} */
article.logo_box p {
    margin: 8rem 0  25rem 0;
    font-size: var(--text-semi-medium);
    opacity: 0;
    line-height: 1.5;
}
article.logo_box p.active {
    animation: FadeInBottom .75s ease forwards;
}

article.sec6_flexbox {
    /* border: solid 1px red; */
    display: flex;
    flex-direction: column; /* 세로로 배치 */
    gap: 10px; /* 아이템 간의 간격 */
    width: 100%; /* 컨테이너 너비 */
  }
  
  .row {
    display: flex;
    gap: 10px; /* 각 행 내의 간격 */
  }
  
  .sec6Flex {
    /* border: solid 1px red; */
    flex: 1; /* 각 아이템이 균등한 너비를 가짐 */
    /* background-color: lightblue; */
    /* display: flex; */
    width: 30%;
    /* align-items: center; */
    /* justify-content: center; */
    margin-bottom: 4rem;
  }

article.sec6_flexbox p {
    font-family: "TmoneyRoundWindExtrabold", sans-serif;
    font-size: var(--text-small);
    margin-bottom: 2rem;
    opacity: 0;
}
article.sec6_flexbox img.logo {
    margin-right: 1.5rem;
    opacity: 0;
}
article.sec6_flexbox img.color {
    margin-right: .5rem;
    opacity: 0;
}
.rainbowlogo {
    opacity: 0;
}

.sec6_flexbox p.active {
    animation: scale-in-ver-bottom 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.logo.one.active {
    animation: slide_in_left .75s ease forwards;
}
.logo.two.active {
    animation: slide_in_left .75s .1s ease forwards;
}
.rainbowlogo.active {
    animation: slide_in_right .75s ease forwards;
}

.typeface.active {
    animation: slide_in_left .75s ease forwards;
}

.color.one.active {
    animation: color1 .75s .6s ease forwards;
}
.color.two.active {
    animation: color2 .75s .7s ease forwards;
}
.color.three.active {
    animation: color2 .75s .8s ease forwards;
}
.color.four.active {
    animation: color2 .75s .9s ease forwards;
}


@keyframes color1 {
    0% {opacity: 0; transform: translateX(-100px);}
    100% {opacity: 1; transform: translateX(0px);}
}
@keyframes color2 {
    0% {opacity: 0; transform: translateX(-200px);}
    100% {opacity: 1; transform: translateX(0px);}
}







.union_icon {
    /* border: solid 1px blue; */
    position: absolute;
    margin: 0 auto;
    /* top: 1000px; */
    right: 50vw;
    /* z-index: -1; */
    /* transform-origin: 50%, 50%; */
}
.icon1 {
    position: absolute;
    width: 150px;
    top: -450px;
    left: -700px;
    opacity: 0;
    animation: updown 1.5s cubic-bezier(0.25, 0.03, 0.66, 0.93) infinite alternate;
;
}
.icon2 {
    position: absolute;
    width: 320px;
    top: -100px;
    left: -850px;
    opacity: 0;
    animation: updownrotate 1.5s cubic-bezier(0.25, 0.03, 0.66, 0.93) infinite alternate;

}

/* .right_icon {
    border: solid 1px red;
    position: absolute;
    margin: 0 auto;
    left: 330px;
    /* width: 100%;
} */
.icon3 {
    position: absolute;
    width: 220px;
    top: -430px;
    left: 600px;
    opacity: 0;
    animation: updown 1.5s cubic-bezier(0.25, 0.03, 0.66, 0.93) infinite alternate;

}
.icon4 {
    position: absolute;
    width: 200px;
    top: -40px;
    left: 620px;
    opacity: 0;
    animation: updown 1.5s cubic-bezier(0.25, 0.03, 0.66, 0.93) infinite alternate;

}
@keyframes updown {
    0% {transform: translateY(0);}
    100% {transform: translateY(12.5px);}
}
@keyframes updownrotate {
    0% {transform: translateY(0) rotate(0);}
    100% {transform: translateY(12.5px) rotate(7deg);}
}

.icon1.active {
    animation: updown 1.5s cubic-bezier(0.25, 0.03, 0.66, 0.93) infinite alternate, icon1 1s ease forwards;
}
.icon2.active {
    animation: updownrotate 1.5s .15s cubic-bezier(0.25, 0.03, 0.66, 0.93) infinite alternate, icon2 1s .1s ease forwards;
}
.icon3.active {
    animation: updown 1.5s .3s cubic-bezier(0.25, 0.03, 0.66, 0.93) infinite alternate, icon3 1s .2s ease forwards;
}
.icon4.active {
    animation: updown 1.5s .45s cubic-bezier(0.25, 0.03, 0.66, 0.93) infinite alternate, icon4 1s .3s ease forwards;
}
@keyframes icon1 {
    0% {opacity: 0; top: 0; left: 0;}
    100% {opacity: .75; top: -450px; left: -700px}
}
@keyframes icon2 {
    0% {opacity: 0; top: 0; left: 0;}
    100% {opacity: .75; top: -100px; left: -850px}
}
@keyframes icon3 {
    0% {opacity: 0; top: 0; left: 0;}
    100% {opacity: .75; top: -430px; left: 600px}
}
@keyframes icon4 {
    0% {opacity: 0; top: 0; left: 0;}
    100% {opacity: .75; top: -40px; left: 620px}
}







/* SECTOR 07 */
#sec7_bg {
    /* border: solid 1px blue; */
    width: 100%;
    height: 100%;
    background: var(--background);
    /*background-image: url("../sources/bgSymbols.png");*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}
section#sector7 {
     /*border: solid 1px red;*/
    display: block;
    width: 90%;
    height: 110%;
    margin: 0 auto;
    padding-top: 8rem;


    flex-wrap: nowrap;
    white-space: nowrap;

    overflow-x: auto; /* 가로 스크롤 활성화 */

}


.scroll-container {
     /*border: solid 1px red;*/
    /*width: 100%; !* div 전체 너비 설정 *!*/
    height: 20rem;




    /* overflow-x: scroll; */
    white-space: nowrap; /* 내부 요소가 가로로 나열되도록 설정 */

    margin-top: 6rem;
    transition: .5s ease-in-out;
}
.scroll-container.active {
    transform: translateX(-35rem);}

.scroll-content {
    display: inline-flex; /* 가로로 나열하기 위해 flex 사용 */

}



.card {
    display: inline-block;
    width: 35rem;
    margin-right: 1rem;
    /* overflow: hidden; */
    /* overflow: visible; */

}
.card-top-pink {
    /* border: solid 1px red; */
    background-color: #fde4f4;
    padding: 2rem;
    border-radius: 2.5rem 2.5rem 0 0 ;
    height: 11rem;
    display: flex;
    align-items: center;
    position: relative;
}
.card-top-yellow {
    /* border: solid 1px red; */
    background-color: #FFF4C7;
    padding: 2rem;
    border-radius: 2.5rem 2.5rem 0 0 ;
    height: 11rem;
    display: flex;
    align-items: center;
    position: relative;
}
.card-top-blue {
    /* border: solid 1px red; */
    background-color: #CCDCEF;
    padding: 2rem;
    border-radius: 2.5rem 2.5rem 0 0 ;
    height: 11rem;
    display: flex;
    align-items: center;
    position: relative;
}
.card-top-green {
    /* border: solid 1px red; */
    background-color: #C1CDA1;
    padding: 2rem;
    border-radius: 2.5rem 2.5rem 0 0 ;
    height: 11rem;
    display: flex;
    align-items: center;
    position: relative;
}

.char-img-bibi {
    /* display: flex; */
    /* border: solid 1px red; */
    position: absolute;
    width: 27rem;
    aspect-ratio: 1 / 1;
    background: url("../sources/stepAni/bibi_hellocut_step.webp");
    background-size: cover;
    filter: brightness(1.2);
    /* z-index: 0; */
    right: 0;
    transform: translate(1.5rem, -6rem);

    animation: bibiHello 1.5s steps(14) infinite alternate;
}
@keyframes bibiHello {
100% { background-position: calc(27rem * 14) 0; }
}

.char-img-rami {
    /* display: flex; */
    /* border: solid 1px red; */
    position: absolute;
    width: 27rem;
    aspect-ratio: 1 / 1;
    background: url("../sources/stepAni/rami_hello_step.webp");
    background-size: cover;
    filter: brightness(1.2);
    /* z-index: 0; */
    right: 0;
    transform: translate(1.5rem, -5rem);

    animation: ramiHello 1.5s steps(8) infinite alternate;
}
@keyframes ramiHello {
    100% { background-position: calc(27rem * 8) 0; }
}


.char-img-poki {
    /* display: flex; */
    /* border: solid 1px red; */
    position: absolute;
    width: 30rem;
    aspect-ratio: 1 / 1;
    background: url("../sources/stepAni/poki_hello_step.webp");
    background-size: cover;
    filter: brightness(1.2);
    /* z-index: 0; */
    right: 0;
    transform: translate(1.5rem, -5.5rem);

    animation: pokiHello 2s steps(13)  reverse infinite;
}
@keyframes pokiHello {
    100% { background-position: calc(30rem * 13) 0; }
}

.char-img-maru {
    /* display: flex; */
    /* border: solid 1px red; */
    position: absolute;
    width: 27rem;
    aspect-ratio: 1 / 1;
    background: url("../sources/stepAni/maru_hello_step.webp");
    background-size: cover;
    filter: brightness(1.2);
    /* z-index: 0; */
    right: 0;
    transform: translate(1.5rem, -5rem);

    animation: maruHello 2s steps(12) reverse infinite;
}
@keyframes maruHello {
    100% { background-position: calc(27rem * 12) 0; }
}




.card-title svg {
    /* border: solid 1px red; */
    width: 6.3rem;
    /*margin-bottom: -5.5em;*/
    /* z-index: -4; */
}
.card-bottom {
    position: relative;
    width: 35rem;
    background-color: #ffffff;
    padding: 1.5rem;
    /* text-align: center; */
    border-radius: 0 0 2.5rem 2.5rem;

    z-index: 0;
}
.card-text {
    font-size: var(--text-small);
    font-weight: 700;
    color: #d889b6;
}


article.btn_slide {
    /* border: solid 1px red; */
    /*margin-top: 8rem;*/
    text-align: center;
    opacity: .2;
}

article.btn_slide button {
    background: none;
    border: none;
    padding: .5rem 2rem;
}
article.btn_slide button:active {
    opacity: .25;
}





/* SECTOR 7-2 */
section#sector7-2 {
    /* border: solid 1px red; */
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('../sources/eatopia_bg.webp');
    background-size: cover;
    background-position: top;
}
section#sector7-2 p {
    width: 100%;
    text-align: center;
    font-size: var(--text-semi-medium);
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
}







/* SECTOR 08 */
#sec8_bg {
    /* border: solid 1px blue; */
    width: 100%;
    height: 100%;
    background: var(--background);
    /*background-image: url("../sources/bgSymbols.png");*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    margin-top: 10rem;
}
section#sector8 {
    /* border: solid 1px red; */
    display: block;
    width: 90%;
    /* height: 100vh; */
    margin: 0 auto;
    /*padding-top: 8rem;*/
}
.subtitle {
    /* border: solid 1px red; */
    margin-bottom: 10rem;
}
.subtitle img {
    opacity: 0;
}
.subtitle.active img {
    animation: big-small .75s ease forwards;
}

.subtitle video {
    display: block;
    width: 100%;
    /* height: 500px; */
    top: 0;
    left: 0;
    /* margin: 3rem 0 10rem 0; */
    border-radius: 3rem;
}

.viewing_box {
     /*border: solid 1px red;*/
    width: 70%;
    margin-top: 4vh;

    /*float: right;*/
}
.viewing_box p {
    display: inline-block;
    margin-bottom: 1vh;
    font-size: var(--text-large);
    font-weight: 800;
    opacity: 0;
}
.viewing_box span {
    /*border: solid 1px red;*/
    /*bottom: 40%;*/
    font-size: var(--text-small);
    position: absolute;
    margin: 4rem 0 0 4rem;
    opacity: 0;
}
.viewing_box img {
    display: flex;
    /*border: solid 1px red;*/
    width: 100%;
    margin-top: 3rem;
    opacity: 0;
}

.viewing_box p.active {
    animation: slide_in_right .75s ease forwards;
}
.viewing_box span.active {
    animation: slide_in_right .75s ease forwards;
}
.viewing_box img.active {
    animation: big-small .75s ease forwards;
}


article.feature_vid {
    display: block;
    margin-top: 20rem;

    width: 100%;
}

.textbox {
    display: flex;
    flex-direction: column;
    gap: 3vh;
    /*border: solid 1px red;*/
    width: 30%;
    /*right: 0;*/
    float: right;
    /*position: absolute;*/
    margin-top: -50vh;
    padding-left: 2vw;
}
.sec8Title {
    font-size: var(--text-semi-medium);
    color: var(--blueL);
    font-weight: 700;
    margin-bottom: .7rem;
}
.sec8Subtitle {
    font-size: var(--text-small);
    font-weight: 300;
}

.tBox {
    opacity: 0;
}
.tBox.active {
    animation: slide_in_left .75s forwards;
}








/* SECTOR 09 */
#sec9_bg {
    /* border: solid 1px blue; */
    width: 100%;
    height: 150vh;
    background: var(--background);
    /*background-image: url("../sources/service_splash.webp");*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    
    margin-top: 15rem;
}

section#sector9 {
    /* border: solid 1px red; */
    display: block;
    width: 90%;
    /* height: 200vh; */
    margin: 0 auto;
    padding-top: 8rem;
}
section#sector9 img {
    /*border: solid 1px red;*/
    display: block;
    width: 75%;
    margin: 0 auto;
    animation: updown2 1.5s ease-in-out infinite alternate;
}
@keyframes updown2 {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-30px);
    }

}


section#sector9 p {
    font-size: var(--text-large);
    text-align: center;
    font-weight: 900;
    transform: translateY(-5vw);
}









/* SECTOR 10 */
#sec10_bg {
    /* border: solid 1px blue; */
    width: 100%;
    height: 150vh;
    background: var(--background);
    
}

section#sector10 {
    /* border: solid 1px red; */
    display: block;
    width: 90%;
    /* height: 200vh; */
    margin: 0 auto;
    padding-top: 8rem;
}

article.center_box {
    width: 100%;
    /* text-align: center;
    align-items: center; */
}
article.center_box .first_step {
    font-size: var(--text-medium);
    font-weight: 800;
    margin-bottom: 2rem;
    opacity: 0;
}
article.center_box span {
    font-size: var(--text-small);
    opacity: 0;
}

article.center_box .first_step.active {
    animation: big-small .75s ease forwards;
}
article.center_box span.active {
    animation: big-small .75s ease forwards;
}



article.sec10_uiContainer {
     /*border: solid 1px red;*/
    margin-top: 3rem;
    display: flex;
}
.sec10Flexbox {
    display: flex;
     /*border: solid 1px blue;*/
     gap: 4vw;
    height: 36vw;
    justify-content: space-between;
    align-items: center;
}
.sec10Flexbox.one {
    width: 30%;
    opacity: 0;
}
.sec10Flexbox.two {
    width: 15%;
    opacity: 0;
    /*border: solid 1px red;*/
}
.sec10Flex.two img {
    float: left;
}
.sec10Flexbox.three {
    width: 15%;
    opacity: 0;
}
.sec10Flexbox.four {
    width: 15%;
    opacity: 0;
}
.sec10Flexbox.five {
    width: 15%;
    opacity: 0;
}
.sec10Flexbox img {
    height: 100%;
}
.sec10Flexbox video {
    width: 98%;
    border-radius: 2vw;
}

.sec10Flexbox.one.active {
    animation: slide_in_left .75s ease forwards;
}
.sec10Flexbox.two.active {
    animation: slide_in_left 1s .2s ease normal forwards;
}
.sec10Flexbox.three.active {
    animation: slide_in_left 1s .3s ease normal forwards;
}
.sec10Flexbox.four.active {
    animation: slide_in_left 1s .4s ease normal forwards;
}
.sec10Flexbox.five.active {
    animation: slide_in_left 1s .5s ease normal forwards;
}
@keyframes horizontalL {
	0% {
        opacity: 0;
		transform: scaleX(0);
		transform-origin: 0% 0%;
	}

	100% {
        opacity: 1;
		transform: scaleX(1);
		transform-origin: 0% 0%;
	}
}









/* SECTOR 11 */
#sec11_bg {
    /* border: solid 1px blue; */
    width: 100%;
    height: 150vh;
    background: var(--background);
    
}

section#sector11 {
    /* border: solid 1px red; */
    display: block;
    width: 90%;
    /* height: 200vh; */
    margin: 0 auto;
    padding-top: 8rem;
}

article.center_box {
    width: 100%;
    /* text-align: center;
    align-items: center; */
}
article.center_box .first_step {
    font-size: var(--text-medium);
    font-weight: 800;
    margin-bottom: 2rem;
    opacity: 0;
}
article.center_box span {
    font-size: var(--text-small);
    opacity: 0;
}

article.center_box .first_step.active {
    animation: big-small .75s ease forwards;
}
article.center_box span.active {
    animation: big-small .75s ease forwards;
}



article.sec11_uiContainer {
    width: 100%;
    /* border: solid 1px red; */
    margin-top: -13vw;
}
article.sec11_uiContainer img {
    width: 100%;
}

article.sec11_uiContainer img.active {
    animation: centerSpread .75s ease 0s 1 normal forwards;
}
@keyframes centerSpread {
	0% {
		transform: scaleX(0);
	}

	100% {
		transform: scaleX(1);
	}
}

.sec11-ui1-1 {
    margin-top: 25rem;
}
.sec11-ui1-2 {
    width: 27%;
    display: inline-block;
    position: absolute;
    z-index: 1;
    border-radius: 3.5vw;
    border: solid .8vw #fff;
    align-items: center;
    justify-content: center;
    left: 50%;
    transform: translateX(-50%);
}



.sec11_bottom {
    float: right;
    margin-right: 3rem;
    font-size: var(--text-small);
}
.second_step {
    font-size: var(--text-medium);
    font-weight: 800;
    margin-bottom: 2rem;
    /* opacity: 0; */
}

.sec11_bottom2 {
    /*float: right;*/
    margin-right: 3rem;
    font-size: var(--text-small);
}












/* SECTOR 12 */
#sec12_bg {
    /* border: solid 1px blue; */
    width: 100%;
    height: 350vh;
    background: url('../sources/sec12_bg.webp');
    background-size: cover;
    background-position: top;
    
}

section#sector12 {
    /* border: solid 1px red; */
    display: block;
    width: 100%;
    /* height: 200vh; */
    margin: 0 auto;
    position: relative;
    padding-top: 50rem;
}

.sec12_ui1 {
    position: absolute;
    width: 100%;
    margin: 0 auto;
    align-items: center;
    vertical-align: center;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 7rem;

}



section#sector12 p.active {
    animation: slide_in_right .75s ease forwards;
}

.eatopia {
    font-size: var(--text-large);

    font-weight: 800;
}


article.sec12_container1 {
    /*border: solid 1px red;*/
    position: absolute;
    right: 18%;
    margin-top: 10rem;
    /*float: right;*/
}

article.vid_flex{
    display: flex;
    justify-content: space-between;
}
.vidFlex {
    /*border: solid 1px red;*/
    width: 50%;
}





/* section#sector12 img.active {
    animation: tppSpread .75s ease 0s 1 normal forwards;
} */
@keyframes tppSpread {
	0% {
        opacity: 0;
		transform: scaleY(0);
		transform-origin: 100% 0%;
	}

	100% {
        opacity: 1;
		transform: scaleY(1);
		transform-origin: 100% 0%;
	}
}






/* SECTOR 13 */
#sec13_bg {
    /* border: solid 1px blue; */
    width: 100%;
    height: 100vh;
    background: url('../sources/sec13_bg.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    
}
#sec13_bg img {
    /*border: solid 1px red;*/
    position: relative;
    display: inline-block;
    /* top: 1rem; */
    margin-top: -10vw;
}

section#sector13 {
    /* border: solid 1px red; */
    display: block;
    width: 90%;
    /* height: 200vh; */
    margin: 0 auto;
}
.rightbox {
    /* width: 100%; */
    float: right;
    width: 70%;
}
.rightbox img {
    /* border: solid 1px red; */
    /* margin-right: 3 3rem; */
    width: 55%;
    opacity: 0;
    margin-right: 1.5vw;
}
.rightbox video {
    border-radius: 3vw;
    border: solid .8vw var(--blueUD);
    /*height: 20%;*/
    width: 28%;
    margin-top: -10vw;
}
.rightbox img.active {
    animation: slide_in_right .75s ease forwards;
}









/* SECTOR 14 */
#sec14_bg {
    /* border: solid 1px blue; */
    width: 100%;
    height: 100%;
    background: var(--background);
    /*background-image: url("../sources/bgSymbols.png");*/
}
section#sector14 {
    /* border: solid 1px red; */
    /* display: block; */
    width: 90%;
    margin: 0 auto;
    padding-top: 30rem;
}

article.sec14_flexbox {
     /*border: solid 1px red;*/
    width: 100%;
    /*height: 53vw;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sec14Flex {
     /*border: solid 1px blue;*/
    height: 100%;
}
.sec14Flex img {
    width: auto;
    height: 45vw;
}

.sec14Flex .one {
    max-height: 60%;
    opacity: 0;
}
.sec14Flex .two {
    width: 100%;
    opacity: 0;
}

.sec14Flex.one .active {
    animation: slide_in_left .75s ease forwards;
}
.sec14Flex.two .active {
    animation: big-small .75s ease forwards;
}


/* 컨테이너 설정 */
.container {
    display: flex;
    margin-top: 20vw;
  }
  
  /* 왼쪽 영역 */
  .left {
    flex: 0.25; /* 왼쪽 영역을 좁게 설정 */
     /*border: solid 1px red;*/
  }
  
  /* 오른쪽 영역 */
  .right {
    display: flex;
    flex: 0.8;
  }
  
  /* 오른쪽 첫 번째(좁은) 열 */
  .narrow-column {
    flex: 0.4; /* 첫 번째 열을 좁게 설정 */
    display: flex;
    flex-direction: column;
  }
  
  .narrow-column .top-item {
    flex: 1;
     /*border: solid 1px red;*/
  }
  
  .narrow-column .bottom-item {
    flex: 1;
     /*border: solid 1px red;*/
  }
  
  /* 오른쪽 두 번째(넓은) 열 */
  .wide-column {
    flex: 1; /* 두 번째 열을 넓게 설정 */
    display: flex;
    flex-direction: column;
  }
  
  .wide-column .top-item {
    flex: 1;
     /*border: solid 1px red;*/
  }
  
  .wide-column .bottom-item {
    flex: 1;
     /*border: solid 1px red;*/
  }


.sectorSubtitle {
    font-size: var(--text-medium);
    font-weight: 800;
    opacity: 0;
}
.sectorSubtitle.active {
    animation: slide_in_right .75s ease forwards;
}
.sectorDes {
    font-size: var(--text-small);
    margin-top: 1.5rem;
    opacity: 0;
}
.sectorDes.active {
    animation: slide_in_right .75s ease forwards;

}

.sec14ui4-1 {
    display: inline-block;
    /*margin-top: 4rem;*/
    width: 48%;
    opacity: 0;
    margin-right: .7vw;
}
.sec14ui4-1.active {
    animation: slide_in_right .75s ease forwards;
}
.sec14ui4-2 {
    /*margin-top: 4rem;*/
    width: 45%;
    /*float: right;*/
    border-radius: 4.5rem;
    border: solid .8vw #fff;
    opacity: 0;
}
.sec14ui4-2.active {
    animation: slide_in_right .75s .15s ease forwards;
}

.sec14ui5-1 {
    margin-top: 4rem;
    width: 30vw;
    opacity: 0;
}
.sec14ui5-1.active {
    animation: slide_in_right .75s .15s ease forwards;
}

.sec14ui5-2 {
    opacity: 0;
}
.sec14ui5-2.active {
    animation: slide_in_left .75s .15s ease forwards;
}

.bottomBox {
    /* border: solid 1px blue; */
    position: absolute;
    bottom: 0;
    margin-bottom: 2.1rem;
}












/* SECTOR 15 */
#sec15_bg {
    /* border: solid 1px blue; */
    width: 100%;
    background: var(--background);
    /*background-image: url("../sources/bgSymbols.png");*/
}
section#sector15 {
    /* border: solid 1px red; */
    /* display: block; */
    width: 90%;
    /* height: 400px; */
    margin: 0 auto;
    padding-top: 15rem;
}


article.sec15_flexbox {
    /* border: solid 1px red; */
    display: flex;
    justify-content: center;
    width: 85%;
    height: 80vh;
    gap: 1rem;
    align-items: flex-end;
    margin: 0 auto;
    position: relative;

}
.sec15Flex {
    /* border: solid 1px blue; */
    /* width: 19%; */
    bottom: 0;
    /* align-items: flex-end;  */
    opacity: 0;
}
.sec15Flex img {
    width: 100%;
    /* height: 100%; */
    object-fit: cover;

}

.sec15Flex .one {
    width: 18.75%;
}
.sec15Flex .two {
    width: 18.75%;
}
.sec15Flex .three {
    width: 23%;
}
.sec15Flex .four {
    width: 18.75%;
}
.sec15Flex .five {
    width: 18.75%;
}

.transp img {
    opacity: .35;
}


article.text_flexbox {
    /* border: solid 1px red; */
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 90%;
    height: 80vh;
    align-items: center;
    z-index: 2;
}

.textFlex.one p {
    text-align: right;
    font-size: var(--text-large);
    font-weight: 900;
}
.textFlex.two p {
    font-size: var(--text-large);
    font-weight: 900;
}


.particle {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: .35;
    margin-top: 8rem;
    opacity: 0;
}


.particle.active {
    animation: big-small-trans 1s .5s ease forwards;
}
@keyframes big-small-trans {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: .25;
        transform: scale(1);
    }

}
.textFlex2 {
    opacity: 0;
}

.textFlex.one.active {
    animation: slide_in_right .75s 1s ease forwards;
}
.textFlex.two.active {
    animation: slide_in_left .75s 1s ease forwards;
}


.sec15Flex.three.active {
    animation: scale .75s ease forwards;
}
@keyframes scale {
    0% {
        opacity: 0;
        transform: scale(0);
        transform-origin: 50% 100%;
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
    
}


.sec15Flex.one.active {
    animation: slide_in_right .75s .4s ease forwards;
}
.sec15Flex.two.active {
    animation: slide_in_right .75s .5s ease forwards;
}


.sec15Flex.four.active {
    animation: slide_in_left .75s .5s ease forwards;
}
.sec15Flex.five.active {
    animation: slide_in_left .75s .4s ease forwards;
}

.objective {
    width: 100%;
    text-align: center;
    margin-top: 5rem;
    font-size: var(--text-semi-medium);
}







section#sector_end {
    margin-top: 20rem;
    margin-bottom: 20rem;
    width: 100%;
    height: 70rem;
    background: url("../sources/footer_img.webp");
    background-size: cover;
    background-position: center;
}












/*FOOTER*/
footer {
    /*border: solid 1px red;*/
    position: relative;

    width: 90%;
    margin: 3vw auto;
    align-content: center;
    height: 60vh;
    background: var(--background);
    color: #fff;
    font-weight: 300;




}
footer #footer_container {
    /*position: relative;*/

    /*border: solid 1px red;*/
    width: 90%;
    height: 32vw;
    margin: 0 auto;
    padding: 2vw 0;
}
footer #logo {

    width: 100%;
    height: 2.5vw;
}
footer #logo img {
    height: 100%;
    object-fit: cover;
}
footer #logo p {
    display: inline-block;
    color: white;
    margin-left: 1em;
    height: 100%;
    vertical-align: middle;
}

footer #team {
    /*border: solid 1px red;*/
    margin-top: 7vh;
    width: 100%;
}
footer #team .title {
    color: #fff;
    font-weight: 800;
    font-size: 1.25em;
}

footer #info {
    /*border: solid 1px ;*/
    position: absolute;
    bottom: 0;
    right: 0;
}
footer #info p {
    /*border: solid 1px red;*/
    color: #fff;
    font-weight: 100;
    font-size: .75vw;
    text-align: right;
}

article#team {
    /* border: solid 1px red; */
    width: 85%;
    aspect-ratio: 1 /.18;
    margin: 0 auto;
    display: flex;
    gap: 2vw;
}
.person {
    /* border: solid 1px blue; */
    width: 100%;
    text-align: center;
    margin-top: 4vh;
}
.person img {
   width: 80%;
   margin: 0 auto;
   text-align: center;
   margin-bottom: .5vw;
}
.name {
    font-size: var(--text-semi-medium);
    color: var(--pinkL);
    font-weight: 700;
}
.person small {
    font-weight: 100;
    font-size: var(--text-small);
}
.email {
    font-size: .85vw;
}



footer #download {
    position: absolute;
    left: 0;
    bottom: 0;

}
footer #download button {
    border: none;
    background: white;
    padding: .65vw 1.5vw;
    margin-top: 2vw;
    border-radius: 50px;
}
footer #download button a {
    font-family: 'NanumSquareRound', sans-serif;
    font-weight: 700;
    font-size: .9vw;
    color: var(--systemColorD);
    text-decoration: none;
}
footer #download button:hover {
    opacity: .8;
}
footer #download button:active {
    opacity: .5;
}


article#footer_logo {
    /*border: solid 1px red;*/
    width: 100%;
    display: inline;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin: 0 auto;
    text-align: center;
    transform: translate(-50%, 0);
}











/*!* Responsive adjustments for various viewport widths *!*/

/*!* General adjustments for screens smaller than 1024px *!*/
/*@media screen and (max-width: 1024px) {*/
/*    :root {*/
/*        --text-xlarge: 2.5rem;*/
/*        --text-large: 2.1rem;*/
/*        --text-medium: 1.7rem;*/
/*        --text-regular: 1.4rem;*/
/*        --text-semi-medium: 1rem;*/
/*        --text-small: 0.85rem;*/
/*        --text-extra-small: 0.65rem;*/
/*    }*/

/*    !*header {*!*/
/*    !*    width: 90%;*!*/
/*    !*    padding: 1rem;*!*/
/*    !*}*!*/

/*    !*.nav_menu {*!*/
/*    !*    flex-direction: column;*!*/
/*    !*    gap: 1rem;*!*/
/*    !*}*!*/

/*    .sec2flexbox1, .sec2flexbox2 {*/
/*        flex-direction: column;*/
/*        width: 100%;*/
/*    }*/

/*    #wrap {*/
/*        padding: 1rem;*/
/*    }*/

/*    .main_img img, .main_img video {*/
/*        width: 100%;*/
/*        height: auto;*/
/*    }*/
/*}*/

/*!* Additional adjustments for screens smaller than 768px *!*/
/*@media screen and (max-width: 768px) {*/
/*    :root {*/
/*        --text-xlarge: 2rem;*/
/*        --text-large: 1.8rem;*/
/*        --text-medium: 1.5rem;*/
/*        --text-regular: 1.2rem;*/
/*        --text-semi-medium: 0.9rem;*/
/*        --text-small: 0.7rem;*/
/*        --text-extra-small: 0.55rem;*/
/*    }*/

/*    body {*/
/*        flex-direction: column;*/
/*    }*/

/*    .sec5_flex_container {*/
/*        flex-direction: column;*/
/*        gap: 1rem;*/
/*    }*/

/*    .sec10Flexbox {*/
/*        width: 100%;*/
/*    }*/

/*    .sec15Flex img {*/
/*        width: 100%;*/
/*    }*/

/*    .textFlex {*/
/*        font-size: var(--text-small);*/
/*    }*/

/*    .logo_container {*/
/*        width: 80%;*/
/*        height: auto;*/
/*    }*/

/*    article.sec11_uiContainer img {*/
/*        width: 100%;*/
/*    }*/
/*}*/

/*!* Mobile adjustments for screens smaller than 480px *!*/
/*@media screen and (max-width: 480px) {*/
/*    :root {*/
/*        --text-xlarge: 1.7rem;*/
/*        --text-large: 1.5rem;*/
/*        --text-medium: 1.2rem;*/
/*        --text-regular: 1rem;*/
/*        --text-semi-medium: 0.8rem;*/
/*        --text-small: 0.6rem;*/
/*        --text-extra-small: 0.5rem;*/
/*    }*/


/*    header {*/
/*        width: 95%;*/
/*    }*/

/*    .nav_menu {*/
/*        gap: 0.5rem;*/
/*    }*/
/*    .nav_menu li {*/
/*        display: none;*/
/*    }*/

/*    #sec2_flexbox {*/
/*        flex-direction: column;*/
/*        align-items: center;*/
/*        width: 100%;*/
/*    }*/
/*    .sec2Flex {*/
/*        width: 85%;*/
/*    }*/

/*    header, .main_title, .main_subtitle {*/
/*        text-align: center;*/
/*        font-size: var(--text-semi-medium);*/
/*    }*/

/*    .main_img img, .main_img video {*/
/*        width: 100%;*/
/*        height: auto;*/
/*    }*/

/*    .textFlex {*/
/*        text-align: center;*/
/*        font-size: var(--text-small);*/
/*    }*/
/*}*/