/* basic style */
*{margin: 0; padding: 0; box-sizing: border-box;}
body{font-family: 'Pretendard', 'Marck Script', cursive, sans-serif;}
html, body{width: 100%; height: 100%; background-color: #000;}
#wrap{width: 100%; overflow: hidden;}


/* logo */
nav{
    position: fixed !important;
    top: 0;
    width: 100%; 
    height: 10vh;
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    padding: 0vw 3vw; 
    z-index: 9999;
    background: transparent;
    mix-blend-mode: normal;
    isolation: isolate;
}
.left-nav h1, .right-nav h2{color: #fff;}
.left-nav{
    font-size: 1rem;
    overflow: hidden;
    cursor: pointer;
}
.right-nav{
    font-size: 1rem;
    overflow: hidden;
    cursor: pointer;
}
.right-nav:hover .logo1{margin-top: -3vh;}


/* page1 */
#page1{
    position: relative;
    height: 100vh;
    width: 100%;
    background-color: #000;
    overflow: hidden;
}
#page1 .bg{
    position: absolute;
    inset: 0;
    background-image: url(image/galaxy-watch-8-bg.jpg);
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    will-change: opacity;
}
#page1 .title{
    position: absolute;
    left: 50%;
    bottom: 13%;
    transform: translateX(-65%);
    font-size: 18vw;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    z-index: 2;
}
#page1 .sd{
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    color: #c4f870;
    font-weight: 300;
    font-size: 20px;
    animation: blink 2s ease-in-out infinite;
    z-index: 3;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
#page1 .sd.stop-blink{animation: none !important;}
.page1-element{
    padding: 10.4vw 0;
    width: 100%;
    height: 30vh;
    color: #ff6308;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transform: translateX(35%);
}
.page1-element p{
    position: absolute;
    text-transform: uppercase;
    line-height: 2vw;
    font-size: 2.5vw;
    font-weight: 500;
}
.page1-element-border{
    width: 27vw;
    height: 8.5vw;
    padding: 3vw 2vw;
    transform-origin: center;
    border: 0.069vw solid #ff6308;
    border-radius: 50%;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.3s;
    position: absolute;
    z-index: 9999;
    will-change: transform;
}
.page1-element-border:hover{transform: rotate(-20deg) scale(1.05);}


/* page2 */
#page2 {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#page2 video {
    height: 100vh;
    object-fit: cover;
    width: 20%;
}


/* page3 */
#page3{
    position: relative;
    height: 120vh;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: #000000;
}
#page3 .page3-bg {
    position: absolute;
    width: 80%;
    height: 100%;
    object-fit: cover;
    /* transform: translate(-50%, -50%); */
    object-fit: contain;
    z-index: 0;
    opacity: 0.7;
    -webkit-mask-image: 
        linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%), /* 좌우 */
        linear-gradient(to bottom, black 0%, black 85%, transparent 100%);                  /* 하단 */
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    -webkit-mask-composite: destination-in; 
    mask-image: 
        linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%),
        linear-gradient(to bottom, black 0%, black 85%, transparent 100%);
    mask-repeat: no-repeat;
    mask-size: cover;
    mask-composite: intersect;
}
#page3 > *:not(.page3-bg) {
    position: relative;
    z-index: 1;
}
#page3 .page3-text{
    position: absolute;
    top: -30%;
    width: 100%;
    height: 45vh;
    padding: 15px 40px;
    display: flex;
    align-items: end;
    justify-content: space-between;
}
#page3 .page3-text p{
    font-weight: 200;
    font-size: 17px;
    color: #fff;
}
#page3 .page3-text #line1{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 80px);
    height: 1px;
    background-color: #ffffff60;
}
#page3 .page3-text #line2{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 20%;
    background-color: #ffffff60;
}
#page3 .page3T1{
    font-size: clamp(24px, 5vw, 50px);
    color: #A9ABB5;
    font-weight: 500;
    line-height: 1;
}
#page3 .page3T2{
    font-size: clamp(48px, 13vw, 130px); 
    letter-spacing: clamp(-1px, -0.6vw, -5px); 
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 50px;
    z-index: 3;
}
#page3 img{
    position: absolute;
    bottom: 7%;
    height:37%;
}
/* page3 시계 */
.clock{
    width: 350px;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background: #020202;
    border: 4px solid #020202;
    border-radius: 50%;
    box-shadow: 
        0 -15px 20px rgba(255, 255, 255, 0.15),
        0 15px 20px rgba(255, 255, 255, 0.15),
        0 0 25px rgba(255, 255, 255, 0.2);
}
.clock:before{
    content: '';
    position: absolute ;
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    z-index: 1000;
}
.clock .hour, .clock .min, .clock .sec {position: absolute;}
.clock .hour, .hr{
    width: 160px;
    height: 160px;
}
.clock .min, .mn{
    width: 190px;
    height: 190px;
}
.clock .sec, .sc{
    width: 230px;
    height: 230px;
}
.hr, .mn, .sc{
    display: flex;
    justify-content: center;
    position: absolute;
    border-radius: 50%;
}
.hr:before{
    content: '';
    position: absolute;
    width: 8px;
    height: 80px;
    background: #dfdfdf;
    z-index: 10;
    border-radius: 6px 6px 0 0;
}
.mn:before{
    content: '';
    position: absolute;
    width: 4px;
    height: 90px;
    background: #d6d6d6;
    z-index: 10;
    border-radius: 6px 6px 0 0;
}
.sc:before{
    content: '';
    position: absolute;
    width: 2px;
    height: 150px;
    background: rgb(121, 15, 15);
    z-index: 12;
    border-radius: 6px 6px 0 0;
}


/* page4 vertical */
#page4{
    position: relative;
    height: 100vh; 
    width: 100%;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}
#page4 .item{
    width: 90%;
    height: 90%;
    background: #fff;
    border-radius: 20px; 
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
    position: absolute;
    inset: 0;
    margin: 30px auto 0;
    overflow: hidden;
    display: flex;
}
#page4 .item_content{
    width: 50%;
    height: 100%;
    background: #fff;
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
#page4 .item_content h2{
    font-size: 64px;
    line-height: 1.2;
}
#page4 .item_content P{
    font-size: 14px;
    margin-top: 20px;
    color: #A9ABB5;
}
#page4 .item_media{
    width: 50%; 
    height: 100%;
    object-fit: cover; 
}


/* page5 */
#page5{
    height: 30vh;
    width: 100%;
    padding: 0 40px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
#elem1{
    position: relative;
    width: 100%;
    height: 30%;
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding: 20px 0;
}
#elem1 h4{
    color: #ffffff79;
    font-size: 16px;
    font-weight: 400;
}
#line5{
    height: 1px;
    width: 100%;
    background-color: #ffffff60;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}
#line5-vt{
    height: 100%;
    width: 1px;
    background-color: #ffffff60;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}
#line5-h{
    height: 1px;
    width: 100%;
    background-color: #ffffff60;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}


/* page6 */
#page6{
    height: 50vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
}
#slide6{
    display: inline-flex;
    gap: 24px;
    white-space: nowrap;
    will-change: transform;
    animation: slide6 20s linear infinite;
}
#slide6 p{
    font-size: 18vw;
    color: #494A4F;
    font-weight: 600;
    margin: 0;
}
@keyframes slide6{
    0%   { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 12px)); }
}


/* page8 */
#page8{
    height: 110vh;
    width: 100%;
    background: url(image/ai-lifestyle.jpg) no-repeat center / cover;
    position: relative;
    overflow: hidden;
}
#page8 p{
    color: #fff;
    font-size: 80px;
    font-weight: 600;
    position: relative;
    z-index: 2;
    text-align: left;   
    margin-left: 80px;  
    margin-top: 120px; 
}
#page8 img{
    width: 20%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    /* transform: translate(-50%, -50%); */
    z-index: 3;
    opacity: 0;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.7));
}


/* page9 */
#page9{
    position: relative;
    padding: 20px;
    padding-top: 200px;
    background-color: #151519;
    padding-bottom: 300px;
    overflow: hidden;
}
#page9 p{
    font-size: clamp(28px, 8vw, 130px); 
    letter-spacing: clamp(-1px, -0.4vw, -3px); 
    line-height: 1;
    color: #fff;
    font-weight: 500;
}
#page9 .over{
    position: absolute;
    height: 100%;
    width: 100%;
    right: 0;
    background-color: rgba(21, 21, 25, 0.511);
}
#page9 div{
    position: relative;
    display: flex;
    align-items:start;
    overflow: hidden;
    padding-bottom: 5px;
}
#page9 #ig91{
    position: absolute;
    top: 10%;
    left: 52%;
    width: 20%;
    z-index: 99;
    mix-blend-mode: difference;
}
#page9 #ig92{
    position: absolute;
    bottom: 17%;
    right: 0;
    width: 30%;
    z-index: 99;
}
#page9 #ig93{
    position: absolute;
    bottom: -2%;
    left: 35%;
    width: 20%;
}
#page9 #ig94{
    position: absolute;
    top: 27%;
    right: 10%;
    width: 10%; 
    z-index: 100;
}
#page9 #box-1{
    position: absolute;  
    width: 10%;        
    aspect-ratio: 1/1;  
    bottom: 10%;
    left: 80%;
    border-radius: 50%;
    background: #FF10F0;
    z-index: 100;
}


/* page11 */
#page11{
    position: relative;
    height: 110vw;
    width: 100%;
    background-image: url(https://selemen.liqium.com/img/bg1.jpg);
    background-size:cover;
    background-position: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
#page11 h2{
    font-size: clamp(24px, 8vw, 70px); 
    margin-top: clamp(40px, 15vw, 250px);
    color: #fff;
    font-weight: 600;
}
#page11 h3{
    font-size: clamp(8px, 2vw, 14px);
    font-weight: 200;
    color: #fff;
}
#page11 h4{
    font-size: clamp(10px, 2.5vw, 18px);
    color: #fff;
    margin-top: 20px;
    font-weight: 300;
}
#page11 img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}
#ii1, #ii2, #ii3{
    position: absolute;
    background-color: #151519;
    background-size: cover;
    background-position: center;
    display: flex;
    padding: 60px 30px;
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
    overflow: hidden;
    transition: background-color 1s ease;
}
#ii1{top: 20%; left: 0%; width: 25%; height: 50%;}
#ii2{top: 30%; left: 30%; width: 40%; height: 60%;}
#ii3{top: 50%; right: 0; width: 27%; height: 45%;}
#ii1::before, #ii1::after,
#ii2::before, #ii2::after{
    content: '';
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 1.2s ease, filter 1s ease;
}
#ii3::before, #ii3::after {
    content: '';
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;   
    transition: opacity 1.2s ease, filter 1s ease;
}
#ii1::before{ 
    background-image: url(image/front-White.png); opacity: 1; z-index: 0; 
}
#ii1::after{ 
    background-image: url(image/front-White2.png); opacity: 0; z-index: 0;
    transform: scale(1.1);  
}
#ii2::before{ 
    background-image: url(image/side-White2.png); opacity: 1; z-index: 0; 
}
#ii2::after{ 
    background-image: url(image/side-White1.png); opacity: 0; z-index: 0;
    transform: scale(0.9); 
}
#ii3::before{ 
    background-image: url(image/front-color1.png); opacity: 1; z-index: 0; 
}
#ii3::after{ 
    background-image: url(image/front-color2.png); opacity: 0; z-index: 0; 
}
#ii1:hover{background-image: url(image/background4.png);}
#ii2:hover{background-image: url(image/background5.png);}
#ii3:hover{background-image: url(image/background6.png);}
#ii1:hover::before, 
#ii2:hover::before,
#ii3:hover::before{ 
    opacity: 0; 
    filter: blur(0px); 
}
#ii1:hover::after,  
#ii2:hover::after,
#ii3:hover::after{ 
    opacity: 1; 
    filter: blur(0.1px); 
}
/* cursor */
#page11{position: relative;}
#page11 .cursor{
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}
#page11 .cursor-ball{
    width: 40px;
    height: 40px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    opacity: 0;         
    transition: opacity 0.2s ease;
    pointer-events: none;
}


/* page12 - horizontal */
#page12{
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
#page12 .item{
    width: 90%;
    height: 90%;
    background: #fff;
    border-radius: 20px; 
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
    position: absolute;
    top: 50%;
    left: 80px;
    transform: translateY(-50%);
    overflow: hidden;
}
#page12 .item_content {
    position: absolute;
    top: 45%;
    left: 10%;  
    transform: translateY(-30%);
    width: 32%;   
    text-align: left;
    z-index: 1;
}
#page12 .item_content h2{
    font-size: 64px;
    line-height: 1.2;
}
#page12 .item_content P{
    font-size: 14px;
    margin-top: 30px;
    color: #A9ABB5;
    width: 70%;   
}
#page12 .item_media {
    position: absolute;
    top: 50%;
    left: 70%; 
    transform: translate(-50%, -50%);
    width: 45%;     
    height: auto;
    object-fit: contain;
    z-index: 0;
}


/* page14 */
#page14{
    position: relative;
    height: 50vh;
    width: 100%;
    display: flex;
    align-items: end;
    color: #fff;
    padding: 20px;
}
#line14{
    width: 100%;
    height: 1px;
    background-color: #ffffff60;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#line14-v{
    width: 1px;
    height: 30%;
    background-color: #ffffff60;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,0);
}


/* page15 */
#page15{
    height: 100vh;
    width: 100%;
}
#page15 p{
    font-size: clamp(22px, 6.5vw, 70px); 
    margin: 0 4vw 0 8vw;;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}
#page15 .smooth-content{
    overflow: visible;
    width: 100%;
    height: 200vh;
}
#page15 .img-group{
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
    width: 75%;
    top: 75vh;
    left: 50%;
    transform: translate(-50%, -50%);
}
#page15 .img-group img{
    width: 100%; 
    height: auto;
    object-fit: contain;
    margin: 0 30px;
}


/* footer */
#footer{
    position: relative;
    height: 100vh;
    width: 100%;
    padding: 0 40px;
    display: flex;
    justify-content: end;
    flex-direction: column;
    overflow: visible;
}
#footer #bottom{
    height: 60px;
    width: 100%;
    border-top: 1px solid #ffffff5f;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#footer #bottom h3{
    font-weight: 300;
    color: #ffffff81;
}
#footer #bottom h3 span{color: #ffffffde;}
#foot{
    width: 100%;
    display: flex;
    align-items: end;
    overflow: hidden;    
}
#foot h2{
    font-size: 25vw;
    font-weight: 500;
    color: #ffffff20;
    letter-spacing: -10px;
    line-height: 1.1;
}
#fl{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 40%;
    background-color: #ffffff60;
}
span{display: inline-block;}


/* 스크롤바-바탕이 검은색이라 흰색으로 변경 */
.c-scrollbar {width: 10px;}
.c-scrollbar_thumb {
    background-color: #fff;
    border-radius: 4px;
}


/* ---------모바일---------- */
@media (max-width: 768px){
    /* nav */
    nav{position: relative !important;}

    /* 전체 */
    #page1,
    #page2,
    #page3,
    #page4,
    #page8,
    #page9,
    #page12,
    #page15,
    #footer {
        height: 100svh;
    }
    #page11{height: 70svh;}
    
    /* page1 */
    #page1 .title{
        transform: translate(-130px, -300px);  
        /* position: relative; */
    }
    
    /* page4 */
    #page4 .item{
        display: flex;
        flex-direction: column;
        height: 90vh;
        border-radius: 20px;
        overflow: hidden;
    }
    #page4 .item_content{
        flex: 0 0 50%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px;
    }
    #page4 .item_media{
        flex: 0 0 50%;
        width: 100%;
        height: 50%;
        object-fit: cover;
        display: block;
    }
    #page4 .item_content h2{
        font-size: clamp(22px, 7vw, 32px);
    }
    #page4 .item_content p{
        font-size: clamp(12px, 3.5vw, 14px);
        width: 90%;
    }

    /* page6 */
    #page6{height: 10vh;}

    /*page8 */
    #page8{
        height: 60vh;
        background-size: 150%;
        background-position: center center;
        background-repeat: no-repeat;
    }
    #page8 p{
        font-size: clamp(28px, 8vw, 80px);
        margin-left: 8vw;
        margin-top: 12vw;
    }

    /* page9 */

    /* page11 */
    #ii1, #ii2, #ii3{padding: 40px 15px;}
    #page11 h4{margin-top: 10px;}
    #page11 h4 br{display: none;}
    #page11 [id^="ii"] h3,
    #page11 [id^="ii"] h4{
        opacity: 0;
        transition: opacity .35s ease;
        pointer-events: none;
        position: relative;
        z-index: 1;
    }
    #page11 [id^="ii"].show-text h3,
    #page11 [id^="ii"].show-text h4{
        opacity: 1 !important;
        pointer-events: auto;
        z-index: 2;
    }
    #page11 [id^="ii"].show-text::before,
    #page11 [id^="ii"].show-text::after{
        opacity: 0 !important;
        display: none !important;
    }
    #page11 [id^="ii"]:hover{ background-image: none !important; }
    #page11 [id^="ii"]:hover::before,
    #page11 [id^="ii"]:hover::after{ opacity: 1 !important; filter: none !important; }
    #page11 [id^="ii"]{ cursor: pointer; touch-action: manipulation; }

    /* page12 */
    #page12{ overflow: visible; }
    #page12 .item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: auto;  
        min-height: 70vh;
        border-radius: 20px;
        overflow: hidden;
        margin-left: -65px;
    }
    #page12 .item_content{
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        width: 85%;
        flex: 0 0 auto;
        padding: 20px;
        margin: 40px auto 20px;
    }
    #page12 .item_content h2{font-size: clamp(18px, 5.5vw, 24px);}
    #page12 .item_content p{
        font-size: clamp(12px, 3vw, 14px);
        width: 85%;
    }
    #page12 .item_media{
        position: relative;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        flex: 0 0 auto;
        width: 80%;
        max-height: 220px;
        object-fit: cover;
        margin: 20px 0 40px;
        display: block;
    }

    /* page3 */
    #page3 .page3T1{ margin-top: 8vh; }
    #page3 .clock{ transform: scale(0.5);}
    #page3 .clock-box{ margin-top: -12vh; }

    /* page15 */
    #page15{height: 80vh !important;} 
    #page15 .smooth-content{ height: auto !important; }
    #page15 .img-group{
        width: 100%;
        height: 20vh;  
    }   
    #page15 .img-group img{
        width: 15%;
        height: auto;
        object-fit: contain;
        margin: 0 5px; 
    }

    /* footer */
    #footer{height: 70vh; padding: 0 10px;}
    #foot{overflow: visible; justify-content: center;}
    #foot h2{
        font-size: 13svh;
        letter-spacing: -5px;
        color: #ffffffc0;
        margin-bottom: 13svh;
        white-space: nowrap;
        overflow: visible;
    }
    #foot h2 span{
        transform: none !important;
        display: inline; 
    }
    #fl{height: 50%;}
}

/* page2 */
/* #page2 video{ 
    width: clamp(50%, 60vw, 100%); 
    height: 100%; 
    object-fit: cover; 
} */