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

* {
    color: #1f1f1f;
    margin: 0;
    padding: 0;
}
body {
    font-family: "Pretendard", sans-serif;
    overflow-x: hidden;

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

/*!* 아래의 모든 코드는 영역::코드로 사용 *!*/
/**::-webkit-scrollbar {*/
/*    width: 3px;  !* 스크롤바의 너비 *!*/
/*}*/

/**::-webkit-scrollbar-thumb {*/
/*    position: relative;*/
/*    height: 30%; !* 스크롤바의 길이 *!*/
/*    background-color: #FF553E; !* 스크롤바의 색상 *!*/
/*}*/

/**::-webkit-scrollbar-track {*/
/*    background-color: rgba(0, 0, 0, 0);!*스크롤바 뒷 배경 색상*!*/
/*}*/
.clear {
    clear: both;
}
#wrap {
    width: 100%;
}

header {
    top: 0;
    left: 0;
    position: fixed;
    /*border: solid 1px red;*/
    width: 100%;
    color: #1f1f1f;
    z-index: 1;

    transition: ease .5s;
}
header.active {
    background: rgb(255, 255, 255, .85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px); /*Safari 전용 blur*/
}
nav {
    /*border: solid 1px blue;*/
    font-family: 'Pretendard', sans-serif;
    width: 90%;
    height: 60px;
    margin: 0 auto;
}


#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: 60px;
}


.nav_menu {
    display: inline-block;
    list-style-type: none;
    float: right;
    line-height: 60px;
}
.nav_menu li {
    margin-left: 50px;
    display: inline-block;
    vertical-align: center;
}



.nav_menu button {
    font-size: 1em;
    font-weight: 200;
    position: relative; /* absolute 위치 설정을 위한 상대적 위치 설정 */
    border: none;
    background: none;
}
.nav_menu button:hover {
    font-weight: 700;
    color: #FF553E;
}
.nav_menu button:hover::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 2px; /* border-bottom의 두께 */
    background-color: #FF553E;
    animation: slideIn 0.5s ease; /* slideIn 애니메이션을 0.5초 동안 적용 */
}
.nav_menu button:active {
    opacity: .5;
}
.typewriter p {
    font-weight: 600;
    color: #FF553E;

}






/*본 콘텐츠 진입*/
:root {
    --ti-cursor-font-weight: 100;
    --ti-cursor-transform: translateX(0);
    --ti-cursor-color: rgba(255, 255, 255, .4);
}

section#intro {
    /*border: solid 1px red;*/
    position: fixed;
    top: 0;
    width: 100vw;
    /*height: calc(100% + 40vh);*/
    height: 100vh;
    letter-spacing: -3px;
    z-index: -9;
    opacity: 1;

    background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 80%);

    /*background-image: url("../sources/intro_bg.png");*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
    /*background-position-y: center;*/
}
article#intro_bg {
}
article#intro_container {
    /*border: solid 1px red;*/
    /*display: flex;*/
    align-items: center;
    /*justify-content: center;*/
    width: 90%;
    height: 100vh;
    margin: 0 auto;
    padding-top: 28vh;
}
article#intro_container p {
    font-size: clamp(1rem, 1rem + 1.7vw, 1rem + 2.5vw);
    font-weight: 100;
    color: white;
}
article#intro_container .intro_type, .intro_last {
    font-size: clamp(2rem, 2rem + 5vw, 2rem + 12vw);
    font-weight: 800;
    color: #FF553E;
}



.main_img {
    position: fixed;
    top: 0;
    left: 0;
    /*
    background: linear-gradient(to right,
            rgb(255, 255, 255, .9), rgb(255, 255, 255, .5)), url("../sources/test2.png");
     */
    /*background-image: url("../sources/test2.jpg");*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;

    width: 100%;
    height: 100%;
    z-index: -10;
    opacity: .8;
    /*backdrop-filter: blur(20px);*/
    /*transition: ease .5s;*/
}
.main_img video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center top;
    display: block;
}


/*SECTOR1*/
section#sector1_contents {
    display: flex;
    position: sticky;
    top: 0%;
    width: 100%;
    transition: top 0.3s ease; /* top 속성에 대한 변화를 0.3초 동안 부드럽게 처리 */

    /*border: solid 1px blue;*/
    margin-top: 100vh;
    /*
    background: linear-gradient(to right,
    rgb(255, 255, 255, 1) 60%, rgb(255, 255, 255, .8) 100%);
    backdrop-filter: blur(5px);
     */
    background: white;
    padding: 5rem 0;
    z-index: -1;
}
article#sector1 {
    display: flex;
    width: 90%;
    /*border: solid 1px blue;*/
    margin: 0 auto;
}
#sec1_logo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*border: solid 1px red;*/
}
#sec1_logo img {
    float: right;
    width: 25em;
    align-items: center;
    /*display: block;*/
}
#sec1_logo p {
    margin-top: 2.25em;
    /*display: flex;*/
    font-size: 1.55rem;
    font-weight: 200;
    line-height: 1.25;


    /*border: solid 1px red;*/
}
#sec1_logo span {
    font-weight: 800;
    font-size: 2.42rem;
}







/*SECTOR 2*/
#sec2_bg {
    /*border: solid 1px blue;*/
    width: 100%;
    height: 100%;
    padding-bottom: 20rem;
    background: white;
    background: linear-gradient(to right,
    rgb(255, 255, 255, 1) 30%, rgb(255, 255, 255, .7)100%), url("../sources/test3.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
section#sector2 {
    /*border: solid 1px red;*/
    display: block;
    width: 90%;
    margin: 0 auto;
    padding-top: 15rem;
}
.red {
    font-weight: 500;
    color: #FF553E;
}
.underline {
    width: 100%;
    margin-top: 15px;
    border-bottom: solid .5px #FFAFAF;
}


.typewriter h1 {
    display: inline-block;
    opacity: 0;
    font-size: 4.5vw;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .025em solid #FF553E; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
}

.subtitle {
    font-weight: 300;
    font-size: 20px;
    line-height: 1.75rem;
    word-break: keep-all;
}
.typewriter.active h1 {
    opacity: 1;
    animation:
            typing 1.5s steps(14, end),
            blink-caret 1.25s step-end infinite;
}
.typewriter.active p {
    animation: proj_bg .75s ease 0s 1 normal none;
}
.typewriter.active .subtitle {
    animation: subtitle_bg 2.5s ease 0s 1 normal none;
}

.source {
    font-weight: 200;
    font-size: 12px;
    color: darkgray;
}#sector2 img {
    margin: 60px 0 0 150px;
    height: 17vw;
 }


/* reset */
ul { list-style: none; }
div, ul, li { margin: 0; padding: 0; }

/* 그래프 */
.graphWrap {
    position: relative;
    width: 700px;
    height: 250px;
    margin-top: 10vh;
    border-left: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
}
#graph_title {
    position: absolute;
    top: -40px;
    font-size: 24px;
    font-weight: 600;
}
.graphWrap .graph > div {
    position: absolute;
    bottom: 0;
    height: 50px;
}
.graphWrap .graph > div#item1 {
    top: 60px;
    background: linear-gradient(90deg, rgba(255,175,175,1) 0%, rgba(255,203,203,1) 100%);
    border-radius: 0 10px 10px 0;
}
.graphWrap .graph > div#item2 {
    top: 150px;
    background: linear-gradient(90deg, rgba(255,85,62,1) 0%, rgba(255,131,115,1) 100%);
    border-radius: 0 10px 10px 0;
}
#item1 p {
    opacity: 0;
    position: absolute;
    font-weight: 100;
    font-size: 15px;
    top: -20px;
    margin-left: 5px;
}
#item2 p {
    opacity: 0;
    position: absolute;
    font-weight: 600;
    font-size: 15px;
    top: -20px;
    margin-left: 5px;
    color: #FF553E;
}
#item1.active p {
    animation: graphText .75s ease .75s 1 normal forwards;
}
#item2.active p {
    animation: graphText .75s ease .75s 1 normal forwards;
}

/* 애니메이션 */
.p-100{
    width: 355px;
}
.p-50 {
    width: 590px;
}
.p-100.active {
    animation:p-100 2s;
}
.p-50.active {
    animation: p-50 2s;
}

#hor_value {
    color: #aaaaaa;
    position: absolute;
    top: 260px;
    margin-left: 15px;
    font-size: 14px;
    font-weight: 200;
    word-spacing: 11px;
}

@keyframes p-100{from{width:0}to{width: 355px}}
@keyframes p-50{from{width:0}to{width: 590px}}



/*SECTOR3*/
#sec3_bg {
    /*border: solid 1px blue;*/
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: 20rem;
    background: rgba(255, 255, 255, 1);
    /*background: linear-gradient(0deg,*/
    /*            rgba(31,31,31,1) 70%,*/
    /*            rgba(255,255,255,1) 100%);*/
    background: linear-gradient(180deg, rgba(255,255,255,1) 55%, rgba(255,179,179,1) 100%);
}
#sector3 {
    /*border: solid 1px red;*/
    width: 90%;
    margin: 0 auto;
    padding-top: 10rem;

}
/*.sector3 p {*/
/*    font-weight: 600;*/
/*    color: #FF553E;*/
/*}*/
/*.sector3.active p {*/
/*    animation: proj_bg .75s ease 0s 1 normal none;*/
/*}*/

.bubble_container {
    /*border: solid 1px red;*/
    /*display: block;*/
    margin-top: 5em;
    width: 100%;
}
.speech-bubbleL {
    position: relative;
    /*border: solid .5px gray;*/
    width: 55%;
    padding: 2em 1em;
    background: rgb(255, 255, 255, .9);
    border-radius:1.5rem;
    color:#1f1f1f;
    font-size: 1.5em;
    font-weight: 700;
    text-align: center;
    margin: 2em 0;

    box-shadow:
            1.5px 1.1px 5.3px rgba(0, 0, 0, 0.024),
            3.2px 2.3px 14.9px rgba(0, 0, 0, 0.034),
            5.9px 4.2px 30.9px rgba(0, 0, 0, 0.045),
            14px 10px 57px rgba(0, 0, 0, 0.07);
}
.speech-bubbleL.active {
    animation: bubbleAniL 1s ease 0s 1 normal forwards;
}
.speech-bubbleR {
    position: relative;
    /*border: solid .5px gray;*/
    width:55%;
    padding: 2em 1em;
    background: rgb(255, 255, 255, .9);
    border-radius:1.5rem;
    color:#1f1f1f;
    font-size: 1.5em;
    font-weight: 700;
    text-align: center;
    margin: 2em 0;
    float: right;

    box-shadow:
            1.5px 1.1px 5.3px rgba(0, 0, 0, 0.024),
            3.2px 2.3px 14.9px rgba(0, 0, 0, 0.034),
            5.9px 4.2px 30.9px rgba(0, 0, 0, 0.045),
            14px 10px 57px rgba(0, 0, 0, 0.07);
}
.speech-bubbleR.active {
    animation: bubbleAniR 1s ease 0s 1 normal forwards;
}
.speech-bubbleL.bottom-left:after {
    content:'';
    position:absolute;
    left:35px;
    bottom:-15px;
    /*border-left:1px solid transparent;*/
    border-right:25px solid transparent;
    border-top:15px solid white;



}
.speech-bubbleR.bottom-right:after {
    content:'';
    position:absolute;
    right:35px;
    bottom:-15px;
    border-left:25px solid transparent;
    /*border-right:25px solid transparent;*/
    border-top:15px solid white;

}
.small {
    font-size: .6em;
    font-weight: 300;
    color: gray;
}



/*SECTOR3_2*/
#sec3_2_bg {
    /*border: solid 1px blue;*/
    width: 100%;
    height: 100%;
    padding: 15rem 0 3rem 0;
    background: #fff;
}
section#sector3_2 {
    position: relative;
    width: 90%;
    margin: 0 auto;
    padding-top: 10rem;
}
#img_container {
    /*border: solid 1px red;*/
    width: 89%;
    margin: 0 auto;
}
#img_container img {
    /*border: solid 1px blue;*/
    width: 100%;
    object-fit: cover;
    margin: 5vh auto;
    opacity: 0;
}
#img_container img.active {
    opacity: 1;
    animation: personaAni 1s ease 0s 1 normal forwards;
}





/*SECTOR4*/
#sec4_bg {
    /*border: solid 1px blue;*/
    width: 100%;
    height: 100%;
    margin: 15rem 0 30rem 0;
    /*background: white;*/
}
section#sector4 {
    width: 90%;
    margin: 0 auto;
    padding-top: 10rem;
}
section#sector4 p {
    font-weight: 600;
    color: #FF553E;
}
.naming {
    /*border: solid 1px red;*/
    width: 100%;
    text-align: center;
    opacity: 0;
    transition: ease 2s;
    transition-delay: .15s;
}
.naming.active {
    opacity: 1;
}
.naming img {
    /*border: solid 1px red;*/
    display: block;
    width: 25%;
    margin: 0 auto;
    opacity: .95;
}
.main {
    color: rgba(255, 255, 255, .95);
    font-family: 'SUIT', sans-serif;
    font-size: 10em;
    font-weight: 900;
    line-height: .7em;
    text-shadow: 0 0 30px rgba(0, 0, 0, .3);
}
.naming_small {
    /*border: solid 1px red;*/
    display: block;
    color: rgba(255, 255, 255, .95);
    font-size: 1.5em;
    font-weight: 100;
    text-shadow: 0 0 10px rgba(0, 0, 0, .4);
    margin-bottom: 1em;
}
.naming_sub {
    display: block;
    /*border: solid 1px red;*/
    color: rgba(255, 255, 255, .95);
    width: 100%;
    text-align: center;
    margin-top: 3em;
    font-size: 1.5em;
    font-weight: 200;
    word-break: keep-all;
    opacity: 0;
    text-shadow: 0 0 10px rgba(0, 0, 0, .4);
    transition: ease 1s;
    transition-delay: .15s;
}
.naming_sub.active {
    opacity: 1;
}



/*SECTOR4-2*/
section#sec4-2_bg {
    border: solid 0 rgba(0, 0, 0, 0.01);
    width: 100%;
    height: 100%;
    background: #fff;
}
section#sector4-2 {
    /*border: solid 1px red;*/
    width: 90%;
    margin: 0 auto;
    /*padding-top: 30vh;*/
}
article#sector4-2Vid div {
    /*border: solid 1px red;*/
    margin-top: 15vh;
    padding-top: 56.25%;
    position: relative;
    left: 50%;
    transform: translateX(-35%);
}



/*SECTOR5*/
#sec5_bg {
    /*border: solid 1px blue;*/
    width: 100%;
    height: 100%;
    background: #fff;
}

section#sector5 {
    width: 90%;
    margin: 0 auto;
    padding-top: 50vh;
}
.bi_ani video {
    width: 100%;
    margin-top: 4em;
    object-fit: cover;
}



/*SECTOR6*/
#sec6_bg {
    width: 100%;
    /*border: solid 1px blue;*/
    background: white;
}
section#sector6 {
    width: 90%;
    margin: 0 auto;
    padding: 30rem 0;
}

.color_container {
    margin-top: 5em;
    width: 100%;
    height: 10em;
    display: flex;
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    /*justify-content: space-between;*/
}
.color1 {

    width: 25%;
    background: #FF553E;
    padding: 1em 2em;
    color: white;
    font-weight: 300;
}
.color2 {
    width: 25%;
    background: #FFAFAF;
    padding: 1em 2em;
    font-weight: 300;
}
.color3 {
    width: 25%;
    background: #F8EC23;
    padding: 1em 2em;
    font-weight: 300;
}
.color4 {
    width: 25%;
    background: #1f1f1f;
    padding: 1em 2em;
    color: white;
    font-weight: 300;
}
.fontcolor {
    /*border: solid 1px red;*/
    width: 100%;
    margin: 3rem auto;
    opacity: 0;
}
.fontcolor img {
    width: 100%;
    object-fit: cover;
}
.fontcolor.active {
    animation: fontcolorAni 1s ease 0.2s 1 normal forwards;
}



/*SECTOR7*/
#sec7_bg {
    width: 100%;
    height: 100%;
    background: white;
}
section#sector7 {
    width: 90%;
    height: 100%;
    padding-bottom: 40vh;
    margin: 0 auto;
    /*border: solid 1px red;*/
}
section#sector7 #text {
    /*border: solid 1px red;*/
    margin: 3vh 0;
    width: 30%;
    font-weight: 300;
    word-break: keep-all;

    column-count: 2;
    column-gap: 2em;
}
article#symbol_container {
    /*border: solid 1px red;*/
    width: 100%;
    margin: 0 auto;
    position: relative;
}
article#symbol_container img {
    /*border: solid 1px red;*/
    display: block;
    width: 76%;
    margin: 0 auto;
    object-fit: cover;
}
section#sector7 img {
    width: 100%;
    object-fit: cover;
}
.left_sub {
    position: absolute;
    width: 33%;
    top: 50%;
    z-index: 1;
    padding-bottom: 10px;
    border-bottom: solid 1px #FF553E;
    font-weight: 600;
}
.right_sub {
    position: absolute;
    width: 30%;
    top: 25%;
    right: 3%;
    z-index: 1;
    text-align: right;
    font-weight: 600;
    border-top: solid 1px #F8EC23;
    padding-top: 10px;
}
.symbol {
    position: relative;
    /*border: solid 1px red;*/
    width: 25%;
    margin: 0 auto;
    padding-top: 5em;
}
.symbol img {

    width: 100%;
    object-fit: cover;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, .05));
}
.symbol_sub {
    display: block;
    margin-top: 5em;
    /*border: solid 1px red;*/
    width: 100%;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 300;
}
.bold {
    font-weight: 600;
}

.typo {
    /*border: solid 1px red;*/
    margin-top: 15em;
    width: 30%;
    float: right;
}
.typo img {
    width: 100%;
    object-fit: cover;
}
.typo_sub {
    display: block;
    margin-top: 25em;
    /*border: solid 1px red;*/
    width: 100%;
    font-size: 1.25rem;
    font-weight: 300;
}
section#sector7 img.active {
    animation: personaAni 1s ease 0s 1 normal forwards;
}



/*SECTOR8*/
section#sec8_bg {
    /*border: solid 1px red;*/
    padding-top: 35vh;
    width: 100%;
    height: 100%;
    background: #fff;
}
section#sector8 {
    /*border: solid 1px blue;*/
    width: 90%;
    height: 100vh;
    padding-bottom: 10vh;
    margin: 0 auto;
}
#horizon_container {
    display: flex;
    margin-top: 5vh;
    width: 270vw;
    transform: translateX(17.5vw);
    transition: ease .75s;
}
#navigation {
    margin-top: 3.5vh;
    /*border: solid 1px red;*/

}
#navigation ul {
    /*border: solid 1px red;*/
    text-align: center;
    width: 665px;
    /*width: 535px;*/
    margin: 0 auto;
    border: solid .5px rgba(0, 0, 0, .2);
    border-radius: 50rem;
}
#navigation li {
    display: inline;
    list-style-type: none;
}
#navigation li button {
    font-family: 'Pretendard', sans-serif;
    font-size: 1.05rem;
    font-weight: 200;
    width: 8rem;
    border-radius: 50rem;
    padding: .75rem 1rem;
    border: none;
    background: none;
    margin: .25rem 0;
    transition: ease .1s;
}
#navigation li button:hover {
    background: rgba(255, 85, 62, .9);
    color: #fff;
    font-weight: 400;
}
#navigation li button:active {
    opacity: .5;
}
#navigation li button.current {
    background: rgba(255, 85, 62, .9);
    color: #fff;
    font-weight: 400;
}
.box_common {
    display: flex;
    /*border: solid .25px rgba(0, 0, 0, .1);*/
    border-radius: .75rem;
    background: rgba(255, 255, 255, .95);
    box-shadow:
            1.1px 1.1px 2.3px rgba(0, 0, 0, 0.028),
            3.6px 3.6px 5.6px rgba(0, 0, 0, 0.042),
            8.2px 8.2px 10.8px rgba(0, 0, 0, 0.052),
            16.6px 16.6px 19.4px rgba(0, 0, 0, 0.06),
            32.5px 32.5px 35.6px rgba(0, 0, 0, 0.066),
            75px 75px 80px rgba(0, 0, 0, 0.07)
;
    /*position: absolute;*/
    width: 50vw;
    height: 40vh;
    margin: 0 2vw;
    float: left;
    filter: blur(10px);
    transform: scale(.75);
    opacity: .15;


    transition: ease .5s;
}
.box_common.active {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
}
.text {
    width: 95%;
    text-align: center;
    padding: 0 1rem;
    top: 12%;
    position: absolute;
}
.text p {
    display: block;
    /*border: solid 1px red;*/
    /*position: absolute;*/
    width: 100%;
    margin: 4vh 0 3vh 0;
    color: #FF553E;
    font-size: 4vw;
    font-weight: 900;


}
.text span {
    /*border: solid 1px red;*/
    /*top: 100%;*/
    display: block;
    width: 80%;
    font-weight: 300;
    font-size: 1.25rem;
    line-height: 2rem;
    word-break: keep-all;
    margin: 0 auto;

    vertical-align: middle;
}
.imgbox {
    height: 100%;
}
.imgbox img {
    height: 20%;
    margin: 1.75em;
    object-fit: cover;
}


#progress_bar_container {
    margin: 3vw auto;
    width: 30%;
    height: 5px;
    border-radius: 100px;
    background-color: #fff;
    /*box-shadow: 0 0 10px rgba(0, 0, 0, .1);*/
    position: relative;
    overflow: hidden;
    opacity: .75;
}
#progress_bar {
    width: 100%;
    height: 100%;
    border-radius: 100px;
    background-color: #FF553E;
    position: absolute;
    animation: progress 5s linear infinite;
}



/*SECTOR9*/
section#sec9_bg {
    /*background-image: url("../temp/fn.jpg");*/
    /*background-size: cover;*/
    /*border: solid 1px red;*/
    width: 100%;
    background: #fff;

}
section#sector9 {
    width: 100%;
    height: 100%;
    /*border: solid 1px blue;*/
    margin: 0 auto;
    padding-top: 15vh;
}
section#sec9_bg img {
    /*border: solid 1px red;*/
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/
    /*z-index: -10;*/
}
section#sector9 .typewriter p {
    /*border: solid 1px red;*/
    z-index: 1;
    width: 90%;
    margin: 5vh auto;
}




/*SECTOR10*/
section#sector10_contents {
    display: flex;
    position: sticky;
    top: 0%;
    width: 100%;
    transition: top 0.3s ease; /* top 속성에 대한 변화를 0.3초 동안 부드럽게 처리 */

    /*border: solid 1px blue;*/
    /*margin-top: 100vh;*/
    /*
    background: linear-gradient(to right,
    rgb(255, 255, 255, 1) 60%, rgb(255, 255, 255, .8) 100%);
    backdrop-filter: blur(5px);
     */
    background: white;
    padding: 5rem 0;
    z-index: -1;


}
article#sector10 {
    display: flex;
    width: 90%;
    /*border: solid 1px blue;*/
    margin: 0 auto;
}
#sec10_logo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*border: solid 1px red;*/
}
#sec10_logo img {
    /*border: solid 1px red;*/
    float: right;
    width: 15vw;
    /*height: 100%;*/
    align-items: center;
    /*display: block;*/
}
#sec10_logo p {
    /*margin-top: 2.25em;*/
    /*display: flex;*/
    font-size: 1.55rem;
    font-weight: 200;
    line-height: 1.25;


    /*border: solid 1px red;*/
}
#sec10_logo span {
    font-weight: 800;
    font-size: 2.42rem;
}





/*SECTOR END*/
section#sec_end_bg {
    width: 100%;
    height: 100vh;

    background: url("../sources/blend.png");
    background-size: cover;
    /*mix-blend-mode: screen;*/
    /*z-index: 1;*/
}
.mockup {
    /*display: inline;*/
    width: 100%;
    height: 100vh;
    background: url("../sources/Mockup2.png");
    background-size: cover;
    position: relative;
}

section#sector_end {
    /*display: inline-block;*/
    width: 100%;
    height: 10em;
    z-index: -4;
}
#textbox {
    position: absolute;
    /*border: solid 1px red;*/
    text-align: center;
    width: 500px;
    height: 150px;
    top: 50%;
    left: 50%;
    margin: 0 auto;
    transform: translate(-50%, -50%);
    /*z-index: 10;*/

    background: #fff;
    box-shadow:
            1.3px 1.4px 4.2px rgba(0, 0, 0, 0.17),
            6.7px 7.2px 12.1px rgba(0, 0, 0, 0.167),
            20.8px 22.3px 29px rgba(0, 0, 0, 0.147),
            70px 75px 89px rgba(0, 0, 0, 0.104)
;
}
#textbox p {

}
.end_small {
    font-size: 1em;
}




/*FOOTER*/
footer {
    /*border: solid 1px red;*/
    /*position: fixed;*/
    /*top: 50%;*/
    width: 100%;
    height: 30em;
    background: #1f1f1f;
    color: #fff;
    font-weight: 300;
    z-index: -1;

}
footer #footer_container {
    position: relative;

    /*border: solid 1px red;*/
    width: 90%;
    height: 23.5em;
    margin: 0 auto;
    padding: 2em 0;
}
footer #logo {
    /*position: fixed;*/
    /*display: block;*/

    width: 100%;
    height: 2.5em;
}
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.5em;
}

footer #info {
    /*border: solid 1px red;*/
    position: absolute;
    bottom: 0;
    left: 0;
}
footer #info p {
    color: #fff;
    font-weight: 100;
    font-size: .8em;
}

#person_box {
    display: flex;
    margin-top: 1.5vh;
}
#person_box .teamperson {
    /*border: solid 1px blue;*/
    width: 12em;
    height: 7em;
    margin-right: 2em;
    border-right: solid .5px rgba(255, 255, 255, .5);
}
.part {
    color: #fff;
    font-size: 1.25em;
    font-weight: 600;
}
.name {
    color: #fff;
    font-size: 1em;
    font-weight: 300;
    margin-top: .3em;
}
.mail a {
    display: block;
    color: #aaa;
    text-decoration: none;
    font-weight: 100;
    font-size: .85em;
    padding-top: 2em;
}

footer #download {
    position: absolute;
    left: 0;
    /*top: 9vmin;*/
    /*bottom: 9vmin;*/
}
footer #download button {
    border: none;
    background: #fff;
    padding: .75vmin 1.5vmin;
    margin-top: 2vmin;
    /*border-radius: 2px;*/
}
footer #download button a {
    font-family: 'Pretendard', sans-serif;
    font-weight: 300;
    font-size: 1.2vmin;
    text-decoration: none;
}
footer #download button:hover {
    opacity: .8;
}
footer #download button:active {
    opacity: .5;
}

footer #badge {
    position: absolute;
    /*border: solid 1px red;*/
    width: 100%;
    height: 2.8em;
    float: right;
    right: 0;
    bottom: 0;
    /*vertical-align: bottom;*/
}
footer #badge img {
    height: 100%;
    object-fit: cover;
    float: right;
    margin-left: 15px;
}


/*혹시라도 이 코드를 보고 계신다면 부끄러운 감정을 감출 수 없을 것 같습니다*/