/*------------------------------------------------------
· Innoteco Temporary Page Ver 1.0
· Type : header.css
· Author : Albatrosss Pictures Kim Hyun Gyu
· Data : 2005.05.14
· Copyright @ 2005 Innoteco Temporary Page all rights reserved
---------------------------------------------------------
· SUMMARY:
0) Responsive Area
1) Mouse Pointer
2) Header
3) Aside
4) Quick Menu
5) Footer
6) Roll Set
---------------------------------------------------------*/

@charset "utf-8";

/* #################################### 01.Mouse Pointer #################################### */
.mouse-pointer {
    width: var(--pointer-basic-size);
    height: var(--pointer-basic-size);
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    background: var(--pointer-basic-color);
    z-index: 99;
}

/* #################################### 02.Header #################################### */
header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: var(--header-wrap-height);
    z-index: var(--header-wrap-zIndex);
    background: rgba(0,0,0, .5);
    background: var(--header-wrap-bgColor-basic);
}

.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-gnb li a {
    transition: all .3s;
}

.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 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;
}

.header-side-menuBtn span:nth-child(6),
.header-side-menuBtn span:nth-child(7),
.header-side-menuBtn span:nth-child(8) {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 0;
    height: var(--header-side-hambuger-roll-height);
    border-radius: 0;
    opacity: 0;
}

.header-side-menuBtn span:nth-child(6),
.header-side-menuBtn span:nth-child(8) {
    background: var(--base-color-white);
}

.header-side-menuBtn span:nth-child(7) {
    background: var(--signature-color);
}




/* #################################### 03.Aside #################################### */
aside{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: var(--aside-height);
    backdrop-filter: var(--aside-blind-blur);
    overflow: hidden;
    z-index: 11;
}

aside::before {
    display: block;
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: var(--aside-blind-bgColor);
}

.aside-common {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.aside-common-close {
    position: absolute;
    cursor: pointer;
}

.aside-common-close span {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: var(--aside-close-size);
}

.aside-common-close-roll-left,
.aside-common-close-basic-left {
    transform: rotate(45deg);
}

.aside-common-close-roll-right,
.aside-common-close-basic-right {
    transform: rotate(-45deg);
}

.aside-common-close span:nth-child(2) {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: var(--aside-close-center-size);
    height: var(--aside-close-center-size);
    background: var(--signature-color);
    border-radius: 100px;
    opacity: 0;
    z-index: 1;
}

.aside-common-close-basic-left,
.aside-common-close-basic-right {
    background: var(--base-color-white);
    width: 100%;
}

.aside-common-close-roll-left,
.aside-common-close-roll-right {
    background: var(--signature-color);
}

.aside-gnb-pc {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.aside-gnb-frame {
    position: relative;
    width: var(--aside-gnb-pc-frame-width);
    height: var(--aside-gnb-pc-frame-height);
}

.aside-gnb-pc-close {
    top: 0;
    right: 0;
    width: var(--aside-gnb-pc-close-size);
    height: var(--aside-gnb-pc-close-size);
    cursor: pointer;
    z-index: 1;
}

.aside-gnb-pc-title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: var(--aside-gnb-pc-title-height);
    overflow: hidden;
}

.aside-gnb-pc-title-frame {
    position: relative;
    left: 0;
    top: 100%;
}

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

.aside-gnb-pc-menu {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: var(--aside-gnb-pc-menu-height);
    overflow: auto;
    z-index: 1;
}

.aside-gnb-pc-menu > ul {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    padding-left: var(--aside-gnb-pc-menu-frame-space);
}

.aside-gnb-pc-menu > ul > li {
    position: relative;
    width: var(--aside-gnb-pc-menu-list-width);
    height: 100%;
    padding-top: var(--aside-gnb-pc-menu-list-space-min);
    padding-left: var(--aside-gnb-pc-menu-list-space-common);
}

.aside-gnb-pc-menu-icon {
    position: absolute;
    left: var(--aside-gnb-pc-menu-icon-pos-left);
    top: 0;
    width: var(--aside-gnb-pc-menu-icon-size);
    height: var(--aside-gnb-pc-menu-icon-size);
    background: var(--signature-color);
    border-radius: 100px;
}

.aside-gnb-pc-menu > ul > li::before {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: var(--aside-gnb-pc-menu-line-pos-top);
    width: var(--aside-gnb-pc-menu-line-width);
    height: var(--aside-gnb-pc-menu-line-bg-height);
    background: var(--aside-gnb-pc-menu-list-border-color);
}

.aside-gnb-pc-menu > ul > li > a {
    font-size: var(--aside-gnb-pc-menu-1depth-font-size);
    font-weight: var(--aside-gnb-pc-menu-1depth-font-weight);
}

.aside-gnb-pc-menu > ul > li > ul {
    margin-top: var(--aside-gnb-pc-menu-2depth-wrap-marginTop);
}

.aside-gnb-pc-menu > ul > li > ul > li {
    margin-top: var(--aside-gnb-pc-menu-2depth-marginTop);
}

.aside-gnb-pc-menu > ul > li > ul > li:first-child {
    margin: 0;
}

.aside-gnb-pc-menu > ul > li > ul > li > a {
    font-size: var(--aside-gnb-pc-menu-2depth-font-size);
}

.aside-gnb-pc-sub-menu {
    position: absolute;
    left: 0;
    top: var(--aside-gnb-pc-sub-menu-pos-top);
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--aside-gnb-pc-sub-menu-space);
    z-index: 1;
}

.aside-gnb-pc-sub-menu-common {
    width: var(--aside-gnb-pc-sub-menu-size-common);
    height: var(--aside-gnb-pc-sub-menu-size-common);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    background: var(--aside-gnb-pc-sub-menu-bg);
    border-radius: 100px;
    cursor: pointer;

}

.aside-gnb-pc-sub-menu-common,
.aside-gnb-pc-sub-menu-common i,
.aside-gnb-pc-sub-menu-common p {
    transition: all .5s;
}

.aside-gnb-pc-sub-menu-home i {
    font-size: var(--aside-gnb-pc-sub-menu-icon-home);
}

.aside-gnb-pc-sub-menu-search i {
    font-size: var(--aside-gnb-pc-sub-menu-icon-search);
}

.aside-gnb-pc-sub-menu-lang {
    width: auto;
    padding: var(--aside-gnb-pc-sub-menu-lang-padding);
}

.aside-gnb-pc-sub-menu-lang p {
    font-size: var(--aside-gnb-pc-sub-menu-text-size);
    font-weight: var(--aside-gnb-pc-sub-menu-text-weight);
    text-align: center;
    letter-spacing: var(--aside-gnb-pc-sub-menu-text-space);
}

.aside-gnb-pc-logo {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
}

.aside-gnb-pc-logo a {
    width: var(--aside-gnb-pc-logo-size);
    height: auto;
}

.aside-gnb-pc-logo img {
    width: 100%;
    height: auto;
}

.aside-nation-pc {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.aside-nation-pc-frame {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: var(--aside-nation-width);
    height: var(--aside-nation-height);
    background: var(--aside-nation-bgColor);
    gap: var(--aside-nation-contents-gap);
}

.aside-nation-pc-close {
    top: var(--aside-nation-close-pos);
    width: var(--aside-nation-close-size);
    height: var(--aside-nation-close-size);
}

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

.aside-nation-pc-list {
    width: var(--aside-nation-frame-width);
    height: auto;
}

.aside-nation-pc-list li {
    width: 100%;
    height: auto;
    margin-top: var(--aside-nation-nation-gap);
}

.aside-nation-pc-list li:first-child {
    margin-top: 0;
}

.aside-nation-pc-list img {
    width: 100%;
    height: auto;
}

.aside-nation-pc-list p {
    font-size: var(--aside-nation-font-size);
    font-weight: var(--aside-nation-font-weight);
    text-align: center;
    margin-top: var(--aside-nation-font-margin);
}

.aside-quick-pc {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.aside-quick-pc-frame {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    width: var(--aside-quick-frame-width);
    height: auto;
}

.aside-quick-menu-frame {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--aside-quick-left-space);
    margin-top: var(--aside-quick-left-top-margin);
}

.aside-quick-pc-left h1 {
    font-size: var(--aside-quick-title-font-size);
}

.aside-quick-pc-left h1 span {
    color: var(--signature-color);
}

.aside-quick-menu-align {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    gap: var(--aside-quick-left-content-margin);
    z-index: 1;
}

.aside-quick-menu-dark,
.aside-quick-menu-light,
.aside-quick-menu-music-btn ul li,
.aside-quick-menu-insta,
.aside-quick-menu-youtube {
    cursor: pointer;
}

.aside-quick-menu-align p,
.aside-quick-menu-align h2,
.aside-quick-menu-align li {
    font-size: var(--aside-quick-left-menu-font-size);
    font-weight: var(--aside-quick-left-menu-font-weight);
}

.aside-quick-menu-align p,
.aside-quick-menu-align h2,
.aside-quick-menu-align li,
.aside-quick-menu-align i {
    color: var(--aside-quick-left-menu-font-color);
}

.aside-quick-menu-music-btn i {
    font-size: 11px;
    color: var(--signature-color);
}

.innoteco-mode_dark_1 {
    font-size: var(--aside-quick-left-menu-icon-dark-size);
}

.innoteco-mode_light_1 {
    font-size: var(--aside-quick-left-menu-icon-light-size);
}

.innoteco-music_1 {
    font-size: var(--aside-quick-left-menu-icon-music-size);
}

.aside-quick-menu-align .innoteco-music_1,
.aside-quick-menu-music-title h2 {
    color: var(--aside-quick-left-menu-title-music-color);
}

.aside-quick-menu-music-btn {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--aside-quick-left-menu-title-music-gap);
}

.aside-quick-pc-right {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--aside-quick-right-space);
}

.aside-quick-close {
    position: relative;
    width: var(--aside-quick-right-close-size);
    height: var(--aside-quick-right-close-size);
    z-index: 1;
}

/* #################################### 04.Quiick Menu #################################### */
.quick-menu-wrap {
    position: fixed;
    right: var(--header-wrap-padding);
    bottom: var(--header-wrap-padding);
    width: clamp(20px, 1.9531vw, 4.6875rem);
    height: clamp(20px, 5.5469vw, 13.3125rem);
    z-index: 99;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.quick-menu-basic-wrap {
    position: relative;
    width: 100%;
    height: 58%;
    border-radius: 42px;
    overflow: hidden;
    cursor: pointer;
}

.quick-menu-basic-wrap::before {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--quick-btn-1depth-bgColor);
    backdrop-filter: blur(10px);
}

.quick-menu-basic-wrap span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 100px;
}

.quick-menu-basic-wrap span:nth-child(2) {
    top: 33%
}

.quick-menu-basic-wrap span:nth-child(3) {
    background: var(--signature-color);
}

.quick-menu-basic-wrap span:nth-child(4) {
    top: 67%;
}

.quick-menu-top-wrap, 
.quick-menu-trigger-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: clamp(20px, 1.9531vw, 4.6875rem);
    border-radius: 8px;
    border: 1px solid #313131;
    cursor: pointer;
}

.quick-menu-top-wrap::before,
.quick-menu-trigger-wrap::before {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 80%;
    height: 80%;
    border-radius: 5px;
    background: rgba(0,0,0, .75);
    backdrop-filter: blur(10px);
    z-index: -1;
}

.quick-menu-top-wrap {
    top: 10px;
    bottom: auto;
}


.quick-menu-top-circle {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.quick-menu-top-circle svg {
    width: 100%;
    height: 100%;
}

.quick-menu-top-circle circle {
    fill: none;
    stroke: url(#gradient_intro_quick_top);
    stroke-width: 3px;
    r: calc((60% / 2) - (3px / 2) - 3px);
}

.quick-menu-top-arrow {
    position: absolute;
    left: 50%;
    top: 50%; /* set 20% */
    transform: translate(-50%, -50%);
}

.quick-menu-top-arrow i {
    font-size: clamp(20px, 1.1719vw, 2.8125rem);
    color: #fff;
}
    
.quick-menu-trigger-wrap {
    top: auto;
    bottom: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}




/* #################################### 05.Footer #################################### */
footer {
    position: relative;
    width: 100%;
    height: var(--footer-height);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
    overflow: hidden;
    z-index: 1;
}

.ratio-video-footer {
    position: absolute;
    left: 0;
    top: 0;
}

.ratio-video-footer::after {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--footer-video-blind);
}

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

.footer-common-set {
    position: relative;
    width: var(--footer-section-width);
    height: 100%;
    padding: var(--footer-section-padding);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-left-wrap {
    background: var(--signature-color);
}

.footer-left-logo-wrap {
    width: var(--footer-logo-size);
}

.footer-left-logo-wrap a {
    display: block;
    width: 100%;
    height: auto;
}

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

.footer-left-menu-wrap li {
    font-size: var(--footer-section-01-menu-font-size);
}

.footer-left-menu-wrap li:nth-child(2) {
    margin-top: var(--footer-section-01-menu-margin-top);
}

.footer-left-copyright-wrap p {
    font-size: var(--footer-section-01-copyright-font-size);
    font-weight: var(--footer-section-01-copyright-font-weight);
}

.footer-left-copyright-wrap span {
    display: block;
}

.footer-center-wrap {
    background: var(--footer-section-02-background);
}

.footer-center-wrap h1 {
    font-size: var(--footer-section-02-title-font-size);
    font-weight: var(--footer-section-02-title-font-weight);
}

.footer-center-wrap p {
    font-size: var(--footer-section-02-info-font-size);
    color: #797979;
}

.footer-center-wrap p span {
    display: block;
    margin-top: var(--footer-section-02-info-space);
}

.footer-right-wrap h1,
.footer-right-wrap p,
.footer-right-wrap .footer-right-menu {
    position: relative;
}

.footer-right-wrap {
    background: var(--footer-section-03-background);
}

.footer-right-wrap h1 {
    width: 100%;
    font-size: var(--footer-section-03-title-font-size);
    font-weight: var(--footer-section-03-title-font-weight);
    text-align: center;
}

.footer-right-menu {
    width: 100%;
    height: auto;
}

.footer-right-menu ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--footer-section-03-btn-space);
}

.footer-right-menu li {
    position: relative;
    width: var(--footer-section-03-btn-width);
    height: var(--footer-section-03-btn-height);
    border: var(--footer-section-03-btn-border);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    border-radius: var(--footer-section-03-btn-border-radius);
}

.footer-right-menu li::before {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: var(--footer-section-03-btn-in-size);
    height: var(--footer-section-03-btn-in-size);
    backdrop-filter: var(--footer-section-03-btn-in-blur);
    border-radius: var(--footer-section-03-btn-in-border-radius);
}

.footer-right-menu li a {
    position: relative;
    width: var(--footer-section-03-btn-text-size);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    font-size: var(--footer-section-03-btn-text-font-size);
}

.footer-right-menu span {
    font-size: var(--footer-section-03-btn-icon-size);
    color: var(--footer-section-03-btn-icon-color);
}

.footer-right-menu li:nth-child(2) span {
    font-size: var(--footer-section-03-btn-icon-set-size);
}

.footer-right-wrap > p {
    width: 100%;
    height: auto;
    text-align: center;
    font-size: var(--footer-section-03-text-font-size);
    font-weight: var(--footer-section-03-text-font-weight);
    color: var(--footer-section-03-text-font-color);
}




/* #################################### 06.Roll Set #################################### */
nav li.roll a {
    color: var(--signature-color);
}

.aside-gnb-pc-sub-menu-common.roll {
    background: rgba(228, 49, 42, .5);
}

.aside-quick-mode-roll i {
    color: var(--signature-color);
}

.aside-quick-mode-roll p {
    color: var(--aside-quick-left-menu-roll-color);
}

.aside-quick-music-roll {
    color: var(--signature-color) !important;
}

.footer-left-menu-wrap li.roll a {
    text-decoration: underline;
    font-weight: 600;
}



/* **************************************************************
    0) Responsive Area
************************************************************** */

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

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

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