@charset "UTF-8";

/* CSS RESET */
* {padding:0px; margin:0px; -webkit-font-smoothing:antialiased;}
*:focus {outline:none;}
html {height:100%; overflow:hidden;}
html, body {-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; font-size:62.5%; color:#171010;}

/* scroll smooth 관련 */
html.lenis { height: auto; overflow:visible; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
    font-size:1.6rem;
    font-family: 'Pretendard', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-thumb {
    outline: none;
    border-radius: 10px;
    border: 4px solid transparent;
    box-shadow: inset 6px 6px 0 rgba(34, 34, 34, 0.15);
}

::-webkit-scrollbar-thumb:hover {
    border: 4px solid transparent;
    box-shadow: inset 6px 6px 0 rgba(34, 34, 34, 0.3);
}

::-webkit-scrollbar-track {
    box-shadow: none;
    background-color: transparent;
}

header, main, footer, section, aside, article {display:block;}
input, textarea, button, select {font-family:inherit; outline:none; font-size:inherit; border-radius:0;}
a {text-decoration:none; color:inherit; outline:none;}
ul, ol, li, dl, dd, dt {list-style: none;}
img {vertical-align: bottom;}
button, input[type=button], input[type=submit], input[type=reset] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius:0; border:0 none; background:none; cursor:pointer;}

[data-clipboard] {display:inline-block; padding-right:25px; background: url(./../images/icon_clipboard.svg) no-repeat right center; background-size:contain; cursor: pointer;}
#loading {position:fixed; top:0; left:0; width:100%; height:100%; background:#171010; z-index:1000;}
#loading .count {display:block; position:absolute; font-family: 'Faktum Wide'; font-size:800; font-size:100px; color:#fff; right:32px; bottom:32px;}
#loading .loadingbar {display:block; position:absolute; left:0; bottom:0; height:8px; background:#fff;}

.btn_back {position:fixed; top:10px; left:20px; z-index:11; width:78px; height:78px; font-size:0; mix-blend-mode:difference;}
.btn_back img {display:block; margin:0 auto;}

/* 레이아웃 */
.wrapper {position:relative; max-width:1920px; margin:0 auto;}

/* header */
.header {display:flex; box-sizing: border-box; position:fixed; left:0; top:0; width:100%; height:98px; padding:10px 20px; z-index:10;}

.header_logo {display:flex; align-items:stretch; position:fixed; top:10px; left:20px; height:78px; z-index:11; mix-blend-mode: difference;}
.header_logo a {display:flex; align-items:center; gap:2px; font-size:0;}
.header_logo span {display:inline-block; overflow:hidden; vertical-align:top;}
.header_logo img {display:block; width:100%; object-fit:cover;}

.header .gnb {display:flex; box-sizing:border-box; gap:30px; height:100%; margin-left:auto; padding:10px 0;}
.header .gnb a {display:flex; align-items: center; box-sizing:border-box; height:100%; font-family: 'Neue Montreal';}
.header .gnb a.contact {position:relative; width:165px; padding:0 20px; border-radius:50px; background:#fff;}
.header .gnb a.contact::after {content:''; display:block; position:absolute; right:22px; width:16px; height:16px; background:url(./../images/icon_arrow_right.svg) no-repeat center; background-size:contain;}
.header .btn_gnb {display:none; width:60px; height:60px;}
.header .btn_gnb img {display:block; width:19px; margin:0 auto;}

.gnb_mobile {display:none; box-sizing:border-box; position:fixed; top:0; left:0; width:100%; height:100%; padding:160px 16px 0; background:#171010; z-index:99;}
.gnb_mobile .btn_gnb_close {position:absolute; right:0; top:0; width:60px; height:60px;}
.gnb_mobile .btn_gnb_close img {display:block; margin:0 auto;}
.gnb_mobile a {display:block; width:fit-content; font-family: 'Faktum Wide'; font-weight:500; font-size:48px; color:#F9F5EF; letter-spacing: -1px;}
.gnb_mobile a.active {font-weight:700; text-decoration: underline;}
.gnb_mobile .copyright {position:absolute; left:16px; bottom:40px;}
.gnb_mobile .copyright span {display:block; font-family: 'Faktum Wide'; font-size: 11px; color: #F9F5EF; text-transform: uppercase;}
.gnb_mobile .copyright_logo {width:78px;}
.gnb_mobile .copyright_logo img {display:block; width:100%;}
.gnb_mobile .slogan {margin-top:7px;}
.gnb_mobile .txt {font-weight:700;}
.gnb_mobile .txt span {display:inline; font-family: 'Pretendard';}

.footer {overflow:hidden; box-sizing:border-box; position:relative; height:100vh; padding:215px 20px 0; background: #F9F5EF; z-index:1;}
.footer .credits {position:relative; overflow:hidden; height:160px; margin:0 -20px; white-space:nowrap; font-size:0;}
.footer .credits p {position:absolute; top:0; left:0; font-size:0; white-space: nowrap;}
.footer .credits span {display:inline-block; padding-right:30px; font-size: 128px; font-family: 'Faktum Wide'; line-height: 160px; letter-spacing: -6.4px; text-transform: uppercase; }
.footer .mail {display:inline-block; margin-top:30px; padding:10px 20px; border:1px solid #171010; border-radius:50px; font-family: 'Neue Montreal'; font-size:32px; font-weight:800; text-transform: uppercase;}
.footer .tel {display: inline-block; margin-top: 20px; padding: 10px 20px; border: 1px solid #171010; border-radius: 50px; font-family: 'Neue Montreal'; font-size: 32px;}
.footer_info {margin-top:50px; padding-top:65px; border-top:1px solid #171010;}
.footer_info .copyright {font-family: 'Faktum Wide'; font-size:16px; font-weight:600; text-transform: uppercase;}
.footer_info .copy {font-family: 'Pretendard'; font-weight:700;}
.footer_info .corp {font-weight:700;}
.footer_info address {margin-top:60px; font-family:'Neue Montreal'; font-size:16px; font-style:normal;}

/* 공통요소 */
.ico_circle { display:block; width: 100%; height: 100%; background: url(./../images/mobile/icon_about_rotate_01.png) no-repeat center; background-size: contain; animation: rotate 8s linear infinite; }
.btn_top {position:absolute; bottom:100px; right:20px; width:43px; height:43px; background:url(./../images/icon_top_arrow.svg) no-repeat center; background-size:contain; z-index:10;}
.video_sec {display: flex; justify-content: center; align-items: center; overflow: hidden; box-sizing: border-box; width: 100%; height: 100vh;}
.video_sec video { min-width: 100%; min-height: 100%; object-fit: cover; }
.vod-desktop {display:none;}
.break-mobile {display:block;}


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

/* 비디오 로드 관련하여, 모바일 우선 접근하도록 min-width 사용 */
@media all and (min-width:769px) {
    .vod-desktop {display:flex;}
    .vod-mobile {display:none;}

}


/* 768해상도 아래는 모바일로 */
@media all and (max-width:768px) {
    .btn_back {top:0; left:0; width:60px; height:60px;}

    .header_logo {top:0; left:0; height:60px;}
    .header_logo a {padding-left: 16px;}
    .header_logo .lg1 img {width:55px;}
    .header_logo .lg2 img {width:16px;}
    .header_logo .lg3 img {width:17px;}
    .header_logo span.lg4 {display:none;}

    .header {position:fixed; height:60px; padding:0; mix-blend-mode: difference;}
    .header .gnb {display:none;}
    .header .btn_gnb {display:block; margin-left:auto;}

    .footer {height:auto; padding:116px 15px 60px;}
    .footer .credits {height:40px; margin:0 -15px;}
    .footer .credits span {font-size:33px; line-height:normal; font-weight:700; letter-spacing: -1px;}
    .footer .mail {margin-top:25px; padding:10px 15px; font-size:20px; font-weight:800;}
    .footer .tel {margin-top:15px; padding:10px 15px; font-size:20px; font-weight:530;}
    .footer_info {margin-top:45px; padding-top:45px;}
    .footer_info .copyright {font-size:14px;}
    .footer_info address {margin-top:25px; font-size:14px;}
    .btn_top {right:17px; bottom:70px;}

    .video_sec {height:auto;}
    .ico_circle {background-image: url(./../images/mobile/icon_about_rotate_01.png); animation-duration: 4s;}
}