@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
*{font-family: 'Pretendard-Regular','Roboto','sans-serif';}

body{
    -ms-overflow-style: none;
}
::-webkit-scrollbar {
    display: none;
}


ul.coordinate{
    top: calc(100% / 2 - 60px);
    position: fixed;
    height: auto;
    right: 1rem;
    z-index:20;
}

.coordinate li button{
    list-style-type: none;
    width: 1.4rem;
    height: 1.4rem;
    background-color: rgba(12,54,126,1.0);
    border-radius: 1.4rem;
    margin: 0.8rem 0.6rem;
    transition: 0.3s ease;
}
.coordinate li button:hover{background-color: rgba(135,109,55,0.6);}
.coordinate li.active button{background-color: rgba(135,109,55,1.0);}
.coordinate li.active button:hover {
    background-color: rgba(135, 109, 55, 1.0);
    cursor:default;
}

section{
    width: 100%;
    height: 100vh;
    background:#e3ebf8;
    box-sizing:border-box;
}

#sec1.section{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow:hidden;
}

.section_inner{
    /*position:absolute;
    z-index:1;
    left:0;*/
    color:#ffffff;
    text-align:center;
    width:100%;
    font-size:200%;
    font-family:monospace;
    font-weight:bold;
}

#sec1 .section_text {
    position: absolute;
    z-index: 2;
    width: 100vw;
    height: 100vh;
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
}

#sec1 .section_text div{flex:1;}

#sec1 .section_text div.text_title h2 {
    font-size: 8rem;
    /*margin-top:540px;*/
    margin-top:40vh;
}

#sec1 .section_text div.text_det{
    padding-top:8rem;
    box-sizing:border-box;
    font-weight:500;
}

.highlight {
    font-weight: 700;
    font-size:1.2em;
}

#sec1 .section_text div.text_det p{
    font-size:3rem;
}

#sec1 .section_video{
    /*width:inherit;
    height: inherit;*/
    width:100vw;
    height:100vh;
}

#sec1 video {
    width: 100vw;
    display: block;
    /*scale:1.6;*/
    transform:scale(calc(100%*1.4));
}

.video_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* 50% black overlay */
    z-index: 1;
}

/*#
sec1{background-color: rgb(255, 153, 153);}
#sec2{background-color: rgb(153, 204, 255);}
#sec3{background-color: rgb(255, 153, 102);}
#sec4{background-color: rgb(105, 153, 102);}
#sec5{background-color: rgb(255, 123, 102);}
*/

/* ************************************************************************************************ */
/* 모바일 세로 */
@media screen and (max-width:1279px){
    /* 모바일 내 섹션 크기 수정 */
    section#sec2{height:auto;}
    section#sec3{height:auto;}
    section#sec4{height:auto;}

    ul.coordinate{
        scale:0.6;
        right:0.4rem;
        opacity:0.6;
    }

    #sec1 video {
        scale:5;
    }

    #sec1 .section_text{
        top:0;
        margin-top:32vh;
        display:flow;
    }

    #sec1 .section_text div.text_title h2{
        font-size:2.8rem;
        margin-top:0;
    }

    #sec1 .section_text div.text_det{
        padding-top:10vh;
    }

    #sec1 .section_text div.text_det p{
        font-size:1.6rem;
    }
}


/* ************************************************************************************************ */
/* 화면 세로 크기 지원 */
@media screen and (min-height:800px) and (max-height:1000px){
    #sec1 .section_text div.text_title h2{
        font-size:6rem;
        margin-top:40vh;
    }
    #sec1 .section_text div.text_det{
        padding-top:2rem;
    }
    #sec1 .section_text div.text_det p{
        font-size:2rem;
    }
}
