body, html { background-color:#040C12; color:#fff; }
body:not(.done) { position:fixed; overflow:hidden; }
body.done #opening { display:none; }

/*common*/
.wrapper { padding:0 0 40px; overflow:hidden; }
.common-title {
    font-size: 85px;
    font-weight: bold;
    color: var(--bg-color-main, #040C12);
    text-shadow: -2px -2px 0 white, 2px -2px 0 white, -2px  2px 0 white, 2px  2px 0 white;
}
.common-title .fill { text-shadow: none; color:var(--color-white, #fff); }

/*common*/
section { width:100%; max-width: 1600px; margin:0 auto; padding:0 0 100px; }

/*nav*/
.navbar { position:sticky; top:0; z-index:90; }
.navbar .logo-wrapper { display:flex; align-items:center; justify-content:space-between; padding:23px 36px; height: 66px; background-color:var(--bg-color-main, #333); }
.navbar .logo { color:var(--color-white, #fff); }
.navbar .logo img { max-width:92px; }
.navbar .menu { position:relative; display: flex; flex-direction: column; justify-content: space-around; width: 30px; height: 20px; cursor:pointer; }
.navbar .menu .menu-line { position:absolute; display: block; width: 100%; height: 2px; background-color: var(--color-white, #fff); transition:all .3s; }
.navbar .menu .menu-line:nth-child(1){ width:20px; top:0; right:0; }
.navbar .menu .menu-line:nth-child(2){ top:50%; left:0; transform:translateY(-50%); }
.navbar .menu .menu-line:nth-child(3){ width:20px; top:100%; left:0; }
.navbar .menu:hover .menu-line:nth-child(1) { right:10px; }
.navbar .menu:hover .menu-line:nth-child(3) { left:10px; }

/*fixed-menu*/
.fixed-menu { position:fixed; top:10px; right:-100%; width:50vw; height:calc(100% - 20px); background-color:var(--color-white, #fff); border-radius:20px; padding:35px; z-index:100; transition:all .3s; }
.fixed-menu.active { right:10px; }
.fixed-menu * { color:var(--bg-color-main, #040C12); }
.fixed-menu .close-btn img { margin-left:auto; width:15px; cursor:pointer; }
.fixed-menu .fixed-menu-cover { display:flex; flex-direction: column; justify-content: space-between; padding:60px 0 0; height:calc(100% - 30px); }
.fixed-menu .menu-item + .menu-item { margin:25px 0 0; }
.fixed-menu .menu-item a { position:relative; font-size:55px; font-weight:700; color:var(--bg-color-main, #040C12); padding:0 0 5px; }
.fixed-menu .menu-item a:after {content:''; display:block; position:absolute; bottom:0; left:0; width:0; height:2px; background-color:var(--bg-color-main, #040C12); transition:all .3s; }
.fixed-menu .menu-item a:hover:after { width:100%; }
.fixed-menu .foot-menu { display:flex; align-items:flex-end; justify-content: space-between; }
.fixed-menu .foot-menu .mail a { font-size:18px; text-decoration:underline; color:#101010; }
.fixed-menu .foot-menu .copy { margin:4px 0 0; }
.fixed-menu .foot-menu .get-in-touch { display:flex; justify-content: center; align-items: center; width:160px; height:160px; border-radius:50%; background-color:#000; }
.fixed-menu .foot-menu .get-in-touch a { font-size:20px; color:var(--color-white, #fff); text-align:center; }

/*button*/
.type-border { border-radius:25px; border:1px solid var(--color-white, #fff); max-width:125px; width:100%; padding:6px 24px; font-size:16px; text-align:center; color:var(--color-white, #fff); }

/*footer*/
.floating-button { position:fixed; bottom:20px; right:20px; z-index:20;  }
.floating-button a { position:relative;  width:120px; height:120px; display:flex; justify-content: center; align-items: center; }
.floating-button a svg {  animation:loopRotate 10s infinite linear; }
.floating-button a .floating-circle { position:absolute; top:50%; left:50%; width:120px; height:120px; background:#fff; display: flex; justify-content: center; align-items: center; text-align:center; border-radius:50%; transition:all .3s; transform:translate(-50%, -50%) scale(0); }
.floating-button a:hover .floating-circle { transform:translate(-50%, -50%) scale(1); color:#000; z-index:2; }
.footer { max-width:1600px; margin:0 auto; padding:0 0 35px; }
.footer .copy { font-size:25px; font-weight:500; }

@keyframes loopRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/*marquee*/
.marquee {
    display: flex;
    max-width:100%;
    overflow: hidden;
    color: white;
    padding: 10px 0;
    position: relative;
    white-space: nowrap;
    gap:0 50px;
}
/* 애니메이션 적용할 요소 */
.marquee-content { display: flex;
    gap: 50px; /* 요소 간 간격 */
    min-width: 100%; /* 요소 크기와 상관없이 유지 */
    flex-shrink: 0; /* 크기가 줄어들지 않도록 설정 */
    animation: marquee-animation 20s linear infinite; }
.marquee-content .common-title { font-size:10vw; }
/* 애니메이션 */
@keyframes marquee-animation {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(calc(-100% - 50px));
    }
}


/* etc */
.etc-mo { display:none; }

/*반응형*/
@media (max-width: 1640px) {
    /*공통*/
    section { max-width:100%; padding:0 24px; }
    /*푸터*/
    .footer { max-width:100%; padding:24px; }
}

@media (max-width: 1084px) {
    /* header */
    .navbar .logo-wrapper { padding:14px 24px; }
    /*사이드메뉴*/
    .fixed-menu { width:100%; padding:20px 20px 50px 30px; border-radius:0; }
    .fixed-menu.active { right:0; }
    .fixed-menu .menu-item a { font-size:40px; }
    .fixed-menu .foot-menu .get-in-touch { width:100px; height:100px; }
    .fixed-menu .foot-menu .get-in-touch a { font-size:14px; }
    .fixed-menu .foot-menu .mail a { font-size:13px; }
    .fixed-menu .foot-menu .copy { font-size:12px; }
    /*공통*/
    .common-title { font-size:35px; text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white; }

    .marquee,
    .marquee-content { gap:20px; }
    .marquee-content .common-title { text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white; }
    /*푸터 */
    .footer .copy { font-size:13px; }
    .floating-button a,
    .floating-button a:hover .floating-circle { width:80px; height:80px; }
    .floating-button a:hover .floating-circle .text { font-size:12px; }


    /* etc */
    .etc-mo { display:block; }
}