<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/*------------------------------------------------------
Â· Innoteco Temporary Page Ver 1.0
Â· Type : custom.css
Â· Author : Albatrosss Pictures Kim Hyun Gyu
Â· Data : 2005.05.14
Â· Copyright @ 2005 Innoteco Temporary Page all rights reserved
---------------------------------------------------------
Â· SUMMARY:
0) Responsive Area
1) Import Font
2) Basic Set
3) Header
4) Aside
5) GNB
6) Footer
7) Main
---------------------------------------------------------*/

@charset "utf-8";

/* #################################### 01.Import Font #################################### */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

:root {
    /* #################################### 02.Basic Set #################################### */
    --base-color-black: #000;
    --base-color-white: #fff;
    --base-color-darkGrey: #1f1f1f;
    --base-color-lightGrey: #d1d1d1;
    --signature-color: #e4312a;
    --signature-color-gradient: linear-gradient(180deg, var(--signature-color), transparent);

    --font-size-base: 16px;
    --font-weight-base: 300;
    --font-color-base: var(--base-color-white);
    --font-family-base: "Pretendard Variable", sans-serif;

    --background-color-base: var(--base-color-black);

    --pointer-basic-color: #fff;
    --pointer-basic-size: 12px;

    /* #################################### 03.Header #################################### */
    --header-wrap-height: clamp(6.625rem, 5.4688vw, 13.125rem);
    --header-wrap-padding: clamp(1.375rem, 2.3438vw, 5.625rem);
    --header-wrap-bgColor-basic: transparent;
    --header-wrap-bgColor-scroll: #000;
    --header-wrap-zIndex: 9;

    --header-logo-size: calc(var(--header-wrap-height) / 2.7);

    --header-side-wrap-size: calc(var(--header-wrap-height) / 3.7);
    --header-side-wrap-gap: clamp(0.875rem, 0.9375vw, 2.25rem);
    --header-side-icon-size: clamp(1.875rem, 1.4063vw, 3.375rem);
    --header-side-icon-color: #fff;

    --header-side-hambuger-size: calc(var(--header-side-wrap-size) / 2.5);
    --header-side-hambuger-color: #fff;
    --header-side-hambuger-pointColor: var(--signature-color);

    /* #################################### 04.Aside #################################### */
    --aside-blind-blur: blur(10px);
    --aside-blind-bgColor: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.7), transparent);

    --aside-nation-width: clamp(11.875rem, 15.625vw, 37.5rem);
    --aside-nation-height: 55%;
    --aside-nation-bgColor: linear-gradient(180deg, transparent, rgba(228, 49, 42, 0.3), transparent);
    --aside-nation-contents-gap: clamp(1.625rem, 1.7969vw, 4.3125rem);
    --aside-nation-title-size: clamp(1.25rem, 1.1719vw, 2.8125rem);
    --aside-nation-font-size: clamp(1.125rem, 0.8594vw, 2.0625rem);
    --aside-nation-font-margin: clamp(0.25rem, 0.3906vw, 0.9375rem);
    --aside-nation-nation-gap: var(--aside-nation-contents-gap);
    --aside-nation-video-poster: url(../img/nation_video_poster.jpg) center center no-repeat;
    --aside-nation-close-pos: clamp(6.25rem, 4.6875vw, 11.25rem);
    --aside-nation-close-width: clamp(5.625rem, 4.6875vw, 11.25rem);
    --aside-nation-close-height: 1px;
    --aside-nation-close-color: #fff;
    --aside-nation-zIndex: 10;

    --aside-search-zIndex: 11;

    --aside-gnb-video-poster: url(../img/gnb_video_poster.jpg) center center no-repeat;
    --aside-gnb-zIndex: 12;

    /* #################################### 05.GNB #################################### */
    --header-gnb-gap: clamp(2.25rem, 1.7188vw, 4.125rem);
    --header-gnb-size: clamp(1rem, 0.8594vw, 2.0625rem);
    --header-gnb-weight: 500;

    /* #################################### 06.Footer #################################### */

    /* #################################### 07.Main #################################### */
    --main-video-frame-blind-pos: -5px;
    --main-video-frame-blind-height: clamp(9.375rem, 15.625vw, 37.5rem);
    --main-video-frame-blind-bgColor: linear-gradient(180deg, transparent, #000);

    --main-video-poster-main: url(../img/main_video_poster.jpg) center center no-repeat;
    --main-video-screen-color: #000;
    --main-video-screen-opacity: 0.6;

    --main-video-timeline-height: 50%;
    --main-video-timeline-size: clamp(1.125rem, .9766vw, 2.3125rem);
    --main-video-timeline-font-frame: clamp(9.375rem, 9.7656vw, 23.4375rem);
    --main-video-timeline-font-size: clamp(.9375rem, .7813vw, 1.875rem);
    --main-video-timeline-font-weight: 500;
    --main-video-timeline-font-pos: clamp(1.5rem, 1.2891vw, 3.125rem);
    --main-video-timeline-icon-size: 3px;

    --main-video-title-align: right;

    --main-video-title-font-size: clamp(1.25rem, 1.4063vw, 3rem);
    --main-video-title-font-weight: 100;

    --main-video-subtitle-gap: clamp(0.4375rem, 0.3906vw, 0.9375rem);
    --main-video-subtitle-frame: clamp(3rem, 3.0859vw, 7.375rem);
    --main-video-subtitle-font-size: clamp(2.375rem, 2.5vw, 6rem);
    --main-video-subtitle-font-weight: 200;

    --main-video-subtitle-pos-gap: 15%;
    --main-video-subtitle-pos: clamp(calc(5rem + var(--main-video-subtitle-pos-gap)), calc(4.6875vw + var(--main-video-subtitle-pos-gap)), calc(11.25rem + var(--main-video-subtitle-pos-gap)));

    --main-mouse-width: clamp(1.875rem, 1.9531vw, 4.6875rem);
    --main-mouse-height: clamp(5rem, 4.6875vw, 11.25rem);

    --main-mouse-line-base-color: #6e6e6e;
    --main-mouse-line-point-color: var(--signature-color);
    --main-mouse-line-point-size: 0;
    --main-mouse-line-height: clamp(calc(100% - 2.5rem), calc(100% - 2.1484vw), calc(100% - 5.625rem));

    --main-mouse-icon-size: clamp(2.5rem, 2.1484vw, 5.625rem);
    --main-mouse-icon-pos: calc(100% - var(--main-mouse-icon-size));
}

/* **************************************************************
    0) Responsive Area
************************************************************** */
@media all and (max-width: 550px) {
    :root {
        --main-video-subtitle-frame: 5.875rem;
        --main-video-timeline-height: 33%;
    }
}

@media all and (max-width: 320px) {
    :root {
        --main-video-title-font-size: clamp(1rem, 1.4063vw, 3rem);
        --main-video-subtitle-frame: 4.8125rem;
        --main-video-subtitle-font-size: clamp(1.875rem, 2.5vw, 6rem);
    }
}</pre></body></html>