wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww/*------------------------------------------------------
· Innoteco Temporary Page Ver 1.0
· Type : contents.css
· Author : Albatrosss Pictures Kim Hyun Gyu
· Data : 2005.05.14
· Copyright @ 2005 Innoteco Temporary Page all rights reserved
---------------------------------------------------------
· SUMMARY:
0) Common
0) Responsive Area
1) Header
2) Aside
3) Main
9) Footer
---------------------------------------------------------*/

@charset "utf-8";

/* #################################### 00.Common #################################### */
.video-poster-common {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.ratio-video-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.ratio-video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

/* #################################### 01.Header #################################### */
.header-common {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.header-logo {
    left: var(--header-wrap-padding);
    width: auto;
    height: var(--header-logo-size);
}

.header-logo a {
    display: block;
    width: auto;
    height: 100%;
}

.header-logo img {
    width: auto;
    height: 100%;
}

.header-gnb {
    left: 50%;
    transform: translate(-50%, -50%);
}

.header-gnb ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: var(--header-gnb-gap);
}

.header-gnb li {
    font-size: var(--header-gnb-size);
    font-weight: var(--header-gnb-weight);
    cursor: pointer;
}

.header-side-wrap {
    right: var(--header-wrap-padding);
    width: auto;
    height: var(--header-side-wrap-size);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--header-side-wrap-gap);
}

.header-side-common {
    position: relative;
    width: var(--header-side-wrap-size);
    height: 100%;
    cursor: pointer;
}

.header-side-search-icon,
.header-side-nation-icon {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.header-side-search-icon i,
.header-side-nation-icon i {
    font-size: var(--header-side-icon-size);
    color: var(--header-side-icon-color);
}

.header-side-search {
    /* display: none; */
}

.header-side-menuBtn {
    display: none;
}

.header-side-menuBtn span {
    position: absolute;
    width: var(--header-side-hambuger-size);
    height: var(--header-side-hambuger-size);
    background: var(--header-side-hambuger-color);
    border-radius: 50%;
}

.header-side-menuBtn span:nth-child(2) {
    left: 0;
    top: 0;
    background: var(--header-side-hambuger-pointColor);
}

.header-side-menuBtn span:nth-child(3) {
    right: 0;
    top: 0;
}

.header-side-menuBtn span:nth-child(4) {
    left: 0;
    bottom: 0;
}

.header-side-menuBtn span:nth-child(5) {
    right: 0;
    bottom: 0;
}

/* #################################### 02.Aside #################################### */
.aside-common {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    backdrop-filter: var(--aside-blind-blur);
}

.aside-blind {
    width: 100%;
    height: 100%;
    background: var(--aside-blind-bgColor);
}

.aside-gnb,
.aside-search,
.aside-nation {
    width: 100%;
    height: 100%;
    overflow: hidden;
}












.aside-gnb {
    display: none;
    z-index: var(--aside-gnb-zIndex);
    left: 0;
    top: var(--header-wrap-height);
    width: 100%;
    height: auto;
    transform: translate(0, 0);;
}

.aside-gnb ul {
    width: 100%;
    height: auto;
}

.aside-gnb li {
    text-align: center;
    border-bottom: 1px solid #2c2c2c;
    background: #000;
    font-size: 1.125rem;
    font-weight: 200;
    padding: 1.4375rem 0;
}

.aside-gnb li:first-child {
    border-top: 3px solid var(--signature-color);
}

.aside-gnb li:last-child {
    cursor: pointer;
    border: none;
}





















.aside-search {
    display: none;
    z-index: var(--aside-search-zIndex);
}

.aside-nation {
    display: none;
    z-index: var(--aside-nation-zIndex);
}

.aside-nation-list-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--aside-nation-width);
    height: var(--aside-nation-height);
    background: var(--aside-nation-bgColor);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: var(--aside-nation-contents-gap);
}

.aside-nation h1,
.aside-nation-list,
.aside-nation-list ul,
.aside-nation-list li {
    width: 100%;
    height: auto;
}

.aside-nation h1 {
    font-size: var(--aside-nation-title-size);
}

.aside-nation-list p {
    font-size: var(--aside-nation-font-size);
    margin-top: var(--aside-nation-font-margin);
}

.aside-nation-list li:nth-child(2) {
    margin-top: var(--aside-nation-nation-gap);
}

.aside-nation a {
    display: block;
    width: 100%;
    height: auto;
}

.aside-nation h1,
.aside-nation a {
    text-align: center;
}

.aside-nation img {
    width: 30%;
    height: auto;
}

.video-poster-nation {
    background: var(--aside-nation-video-poster);
    background-size: cover;
}

.aside-nation-close {
    position: absolute;
    left: 50%;
    top: var(--aside-nation-close-pos);
    transform: translateX(-50%);
    width: var(--aside-nation-close-pos);
    height: var(--aside-nation-close-pos);
    cursor: pointer;
}

.aside-nation-close span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: var(--aside-nation-close-height);
    background: var(--aside-nation-close-color);
}

.aside-nation-close span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}

.aside-nation-close span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* #################################### 03.Main #################################### */
.inno-1-wrap {
    position: relative;
    width: 100%;
    height: 100svh;
}

.inno-1-frame {
    position: relative;
    width: 100%;
    height: 100%;
}

.inno-1-frame::after {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    bottom: var(--main-video-frame-blind-pos);
    width: 100%;
    height: var(--main-video-frame-blind-height);
    background: var(--main-video-frame-blind-bgColor);
}

.ratio-video-main {
    opacity: 0;
}

.video-poster-main {
    background: var(--main-video-poster-main);
    background-size: cover;
}

.video-screen {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--main-video-screen-color);
    opacity: var(--main-video-screen-opacity);
}

.video-timeline-wrap {
    position: absolute;
    left: var(--header-wrap-padding);
    top: 50%;
    transform: translateY(-50%);
    width: var(--main-video-timeline-size);
    height: var(--main-video-timeline-height);
    z-index: 1;
}

.video-timeline-load {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-timeline-load span {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: auto;
    top: 0;
    margin: 0 auto;
    width: 1px;
    height: 100%;
    background: var(--main-mouse-line-base-color);
}

.video-timeline-load span:nth-child(3) {
    height: 0;
    background: var(--signature-color);
}

.video-timeline-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: var(--main-video-timeline-size);
}

.video-timeline-icon p {
    position: absolute;
    left: var(--main-video-timeline-font-pos);
    top: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    width: var(--main-video-timeline-font-frame);
    height: 100%;
    font-size: var(--main-video-timeline-font-size);
    font-weight: var(--main-video-timeline-font-weight);
}

.video-timeline-icon span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: var(--main-video-timeline-icon-size);
    height: 100%;
    border-radius: 100px;
    opacity: 0;
    background: var(--signature-color);
}

.inno-1-contents {
    position: absolute;
    right: 0;
    bottom: var(--main-video-subtitle-pos);
    width: 100%;
    height: auto;
    padding: 0 var(--header-wrap-padding);
    z-index: 1;
}

.inno-1-contents h1 {
    text-align: var(--main-video-title-align);
    font-size: var(--main-video-title-font-size);
    font-weight: var(--main-video-title-font-weight);
    opacity: 0;
}

.inno-1-contents-title {
    width: 100%;
    height: var(--main-video-subtitle-frame);
    margin-top: var(--main-video-subtitle-gap);
}

.inno-1-contents-title ul {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: var(--main-video-title-align);
}

.inno-1-contents-title li {
    position: absolute;
    right: 0;
    top: 0;
    font-size: var(--main-video-subtitle-font-size);
    font-weight: var(--main-video-subtitle-font-weight);
    word-break: keep-all;
    opacity: 0;
}

.inno-1-mouse-animate {
    position: absolute;
    bottom: var(--header-wrap-padding);
    right: var(--header-wrap-padding);
    width: var(--main-mouse-width);
    height: var(--main-mouse-height);
    z-index: 1;
}

.inno-1-mouse-line {
    position: relative;
    width: 100%;
    height: var(--main-mouse-line-height);
}

.inno-1-mouse-line span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: auto;
    top: 0;
    margin: 0 auto;
    top: var(--main-mouse-line-point-size);
    width: 1px;
    height: 100%;
    background: var(--main-mouse-line-base-color);
}

.inno-1-mouse-line span:nth-child(2) {
    height: 20%;
    background: var(--main-mouse-line-point-color);
}

.inno-1-mouse-icon {
    position: absolute;
    left: 50%;
    bottom: var(--main-mouse-icon-pos);
    transform: translateX(-50%);
}

.inno-1-mouse-icon i {
    font-size: var(--main-mouse-icon-size);
}















/* #################################### 09.Footer #################################### */
.footer-logo {
    width: auto;
    height: clamp(3.125rem, 3.125vw, 7.5rem);
}

.footer-logo a {
    width: 100%;
    height: 100%;
}

.footer-logo img {
    width: auto;
    height: 100%;
}

footer p {
    width: 100%;
    height: auto;
    text-align: right;
    font-size: clamp(1.5rem, 1.5625vw, 3.75rem);
    font-weight: 300;
    color: #747474;
}
















/* **************************************************************
    0) Responsive Area
************************************************************** */
@media all and (max-width: 1440px) {
    .header-gnb {
        display: none;
    }

    .header-side-menuBtn {
        display: block;
    }
}

@media all and (max-width: 640px) {
    footer p {
        margin-top: 1.25rem;
        text-align: center;
    }

    footer p span {
        display: block;
    }
}

@media all and (max-width: 550px) {
    .inno-1-contents-title ul li span {
        display: block;
    }
}