@charset "utf-8";


/* 모바일 스와이프 바운스 스크롤(끌어당기기) 때 보이는 배경 색상 추가 용도 */
body{background: #000;}


/* app */
#app{width: 100%; overflow: hidden;}


/* skip-navigation */
#skip-navigation{
    position: absolute; z-index: 9999; left: 0; right: 0; top: 0;
    & *{list-style: none; margin: 0; padding: 0;}
    & a{display: block; width: 1px; height: 1px; overflow: hidden; color: #fff; white-space: nowrap; text-align: center;}
    & a:focus,
    & a:active{width: 100%; height: auto; padding: 0.5rem; background: #000;}
}


/* inner */
.inner{
    position: relative; width: auto; padding: 0 100px;

    @media (width <= 1800px){
        padding: 0 40px;
    }
    @media (width <= 1280px){
        padding: 0 20px;
    }
    @media (width <= 860px){

    }
    @media (width <= 640px){

    }
}


/* hedaer */
#header{
    position: fixed; z-index: 11; top: 0; left: 0; width: 100%; color: var(--white); padding: 56px 0 56px;
    &:before{
        content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
        backdrop-filter: blur(2px);
        mask: linear-gradient(black, rgba(0,0,0,0.7), transparent);
        background: linear-gradient(180deg,rgba(0, 13, 18, 1) -200%, rgba(0, 13, 18, 0.3) 10%, rgba(0, 13, 18, 0) 100%);
    }
    & > .inner{display: flex; flex-wrap: wrap; align-items: center;}
    & .logo{
        & a{display: block;}
        & a img{display: block;}
    }
    & .nav{
        margin-left: auto;
        & .d1{
            display: flex; flex-wrap: wrap; gap: 40px; font-weight: var(--fwm);
            & > li{}
            & > li > a{display: block; font-size: 19px; font-weight: var(--fwm); text-transform: uppercase;}
            & > li > a span{}
        }
    }

    @media (width <= 1280px){
        padding: 30px 0;
        & .logo{
            & a img{width: auto; height: 22px;}
        }
        & .nav{
            & .d1{
                & > li > a{font-size: 17px;}
            }
        }
    }
    @media (width <= 640px){
        padding: 20px 0;
        & .logo{
            & a img{height: 17px;}
        }
        & .nav{
            & .d1{
                gap: 10px; padding: 7px 0 0;
                & > li > a{font-size: 13px;}
            }
        }
    }
    @media (width <= 460px){
        & .nav{
            & .d1{
                gap: 8px;
            }
        }
    }
}


/* footer */
#footer{
    padding: 74px 0; background: var(--black); color: var(--white); font-size: 15px;
    & > .inner{}
    & .f-top{
        padding: 0 0 33px;
        & .f-tit{font-size: 30px; font-weight: var(--fwm); line-height: 1.2;}
        & .f-info{
            display: flex; flex-direction: column; gap: 5px; padding: 33px 0 0;
            & > li{}
            & .d2{
                display: flex; flex-wrap: wrap; gap: 19px;
                & > li{display: flex; flex-wrap: wrap; gap: 0.6em;}
                & > li .name{}
                & > li .desc{}
                & > li .desc a{display: block;}
            }
        }
        & .f-copyright{padding: 6px 0 0; font-weight: var(--fwm); color: #737373;}
    }
    & .f-bot{
        padding: 32px 0 0; border-top: 1px solid var(--gray4);
        & .f-sns{
            display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 40px;
            & > li{}
            & > li a{display: block; font-size: 19px; font-weight: var(--fwm); line-height: 1.211;}
        }
    }

    @media (width <= 1600px){
        
    }
    @media (width <= 1280px){
        padding: 50px 0; font-size: 14px;
        & .f-top{
            padding: 0 0 20px;
            & .f-tit{font-size: 26px;}
            & .f-info{
                padding: 20px 0 0;
            }
        }
        & .f-bot{
            padding: 20px 0 0;
        }
    }
    @media (width <= 640px){
        padding: 30px 0; font-size: 13px;
        & .f-top{
            & .f-tit{font-size: 20px;}
        }
        & .f-bot{
            & .f-sns{
                & > li a{font-size: 15px;}
            }
        }
    }
}


/* aside */
#aside{
    opacity: 0; visibility: hidden; pointer-events: none; transition: 0.5s 0.3s;
    position: fixed; z-index: 10; top: 50%; transform: translateY(-50%); right: 50px;
    & .btn-full-video{
        position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; cursor: pointer;

        & .txt{
            position: absolute; bottom: 100%; left: 0; right: 0; height: 118px; align-content: center; text-align: left;
            display: block; writing-mode: vertical-rl; font-size: 14px; font-weight: var(--fwsb); color: #fff;
            clip-path: inset(100% 0 0 0); transition: 0.3s;
        }
        & .ico{
            position: relative; display: block; font-size: 0; width: 32px; height: auto; aspect-ratio: 1; background: #fff;
            &:before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("/assets/site/img/common/ico-full-video.svg") no-repeat center;}
        }

        &:hover .txt{clip-path: inset(0 0 0 0);}
    }

    /* &.delayedShow{opacity: 1; visibility: visible; pointer-events: initial;} */

    @media (max-width: 640px){
        top: auto; transform: none; right: 20px; bottom: 20px;
    }
}


/* full-video-wrap */
.full-video-wrap{
    opacity: 0; visibility: hidden; pointer-events: none;
    position: fixed; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%) scaleX(0.7);
    width: 100%; max-width: 1200px; height: auto; overflow: hidden; background: #f5f5f5;

    & .full-video-window{

        & .window-top{
            padding: 0 10px; height: 40px; align-content: center; background: #2d2d2d;
            & .btn-wrap{
                display: flex; flex-wrap: wrap; justify-content: flex-end;

                & .btn{padding: 0 13px; line-height: 22px; font-size: 11px; font-weight: var(--fwr); color: #fff; border-radius: 5px; box-shadow: inset 0 0 0 1px #fff; transition: 0.2s;}
                & .btn:hover{background: #fff; color: #000;}
            }
        }
        & .video-frame{
            position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #f5f5f5;

            & video{display: block; width: 100%; height: 100%; object-fit: cover;}
            & iframe{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; /* ◀ 원본 영상 비율 */ object-fit: cover;}
        }
    }

    &.on{z-index: 12; opacity: 1; visibility: visible; pointer-events: initial; transform: translate(-50%, -50%) scaleX(1); transition: 0.3s;}

    @media (width <= 1280px){
        max-width: none; width: 100%;
    }

    @media (pointer: coarse) and (orientation: landscape) {
        /* 터치디스플레이 + 기기 가로모드인 경우에만 적용 */
        width: 100vw; height: 100vh;
    }
}