/*------------------------------------------------------
· Innoteco Temporary Page Ver 1.0
· Type : main.css
· Author : Albatrosss Pictures Kim Hyun Gyu
· Data : 2005.05.14
· Copyright @ 2005 Innoteco Temporary Page all rights reserved
---------------------------------------------------------
· SUMMARY:
0) Responsive Area
1) Intro
2) Section #01
3) Section #02
4) Section #03
5) Section #04
6) Section #05
7) Section #06
---------------------------------------------------------*/

@charset "utf-8";

/* #################################### 01.Intro #################################### */
.inno-intro-wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100svh;
    background: var(--base-color-black);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    z-index: 99;
}

.inno-intro-frame {
    position: absolute;
    width: 100%;
    height: auto;
    filter: blur(10px);
    opacity: 0;
}

.inno-intro-1 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
}

.inno-intro-text-1,
.inno-intro-text-frame h2 {
    font-size: var(--intro-1-text-common-font-size);
    font-weight: var(--intro-1-text-common-weight);
}

.inno-intro-text-2-wrap,
.inno-intro-text-3-wrap {
    position: relative;
    width: auto;
    height: var(--intro-1-text-roll-set-height);
    overflow: hidden;
}

.inno-intro-text-frame {
    position: relative;
    width: 100%;
    height: auto;
}

.inno-intro-text-frame h2 {
    width: 100%;
    height: var(--intro-1-text-roll-set-height);
    font-weight: var(--intro-1-text-import-set-weight);
    text-align: center;
    padding: var(--intro-1-text-import-set-padding);
}

.inno-intro-text-2-wrap::after {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    margin: 0 auto;
    width: var(--intro-1-text-import-set-line-width);
    height: var(--intro-1-text-import-set-line-height);
    background: var(--signature-color);
}

.inno-intro-text-3-wrap .inno-intro-text-frame h2 {
    text-align: left;
    padding: 0;
    font-weight: 100;
}

.inno-intro-2 {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.inno-intro-symbol-frame {
    position: relative;
    width: var(--intro-2-symbol-size);
    height: var(--intro-2-symbol-size);
}

.inno-intro-symbol-set {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.inno-intro-symbol-set img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
}

.inno-intro-symbol-back {
    z-index: 1;
}

.inno-intro-symbol-roll {
    height: 0;
    overflow: hidden;
    z-index: 2;
}

.inno-intro-symbol-text {
    margin-top: var(--intro-2-text-margin);
}

.inno-intro-symbol-text p {
    text-align: center;
    font-size: var(--intro-2-text-font-size);
    font-weight: var(--intro-2-text-font-weight);
}


/* #################################### 02.Section #01 #################################### */
.inno-1-wrap {
    position: relative;
    width: 100%;
    height: 100svh;
    overflow: hidden;
}

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

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

.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);
    bottom: 0;
    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;
    top: 0;
    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: calc((var(--main-video-timeline-size) / 2) - var(--main-video-timeline-size));
    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;
    left: 0;
    top: var(--main-video-subtitle-pos);
    transform: translateY(-50%);
    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;
    top: var(--main-mouse-icon-wrap-pos);
    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);
}


/* #################################### 03.Section #02 #################################### */
.inno-line-frame {
    position: relative;
    width: 100%;
    height: auto;
    top: -1px;
    padding-bottom: var(--main-common-contents-space);
}

.inno-line-frame::before {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: var(--main-video-frame-blind-height);
    background: var(--gradient-basic-color-reverse);
    z-index: 1;
}

.inno-line-frame-set {
    position: relative;
    width: calc(100% - (var(--header-wrap-padding) * 2));
    height: auto;
    margin: 0 auto;
}

.inno-line-set {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: auto;
    z-index: -2;
}

.inno-line-set span {
    width: var(--main-bg-line-size);
    height: 0;
    background: var(--main-bg-line-color);
}

.inno-line-set-active {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--main-bg-line-size);
    height: var(--main-acitve-line-height);
    background: var(--gradient-active-color);
    z-index: -1;
}

.inno-2-wrap {
    position: relative;
    width: calc(100% - (var(--header-wrap-padding) * 2));
    height: var(--main-section-02-wrap-height);
    margin: var(--main-common-contents-space) auto 0 auto;
}

.inno-2-background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.inno-2-background::after {
    display: block;
    content: '';
    position: absolute;
    top: var(--main-section-02-bg-blind-pos);
    right: var(--main-section-02-bg-blind-pos);
    width: var(--main-section-02-bg-blind-size);
    height: var(--main-section-02-bg-blind-size);
    border-radius: 1000px;
    backdrop-filter: blur(12px);
}

.inno-2-background-redCicle {
    position: absolute;
    top: 0;
    right: var(--main-section-02-bg-circle-pos);
    width: var(--main-section-02-bg-redCircle-size);
    height: auto;
}

.inno-2-background-lineCicle {
    position: absolute;
    left: var(--main-section-02-bg-circle-pos);
    bottom: 0;
    width: var(--main-section-02-bg-lineCircle-size);
    height: auto;
}

.inno-2-background-redCicle img,
.inno-2-background-lineCicle img {
    width: 100%;
    height: auto;
}

.inno-2-contents-wrap {
    position: relative;
    width: var(--main-section-02-contents-wrao-width);
    height: 100%;
    margin: 0 auto;
}

.inno-2-contents-left,
.inno-2-contents-right {
    position: absolute;
    width: var(--main-section-02-contents-width);
    height: auto;
    z-index: 1;
}

.inno-2-contents-left-img,
.inno-2-contents-right-img {
    position: relative;
    width: 100%;
    height: var(--main-section-02-contents-img-height);
    overflow: hidden;
    border-radius: var(--main-section-02-contents-borderRadius);
}

.inno-2-contents-left-img img,
.inno-2-contents-right-img img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: auto;
    height: 100%;
}

.inno-2-contents-left h1,
.inno-2-contents-right p {
    position: relative;
    left: 0;
    opacity: 1; /* 0 */
}

.inno-2-contents-left h1 span,
.inno-2-contents-right p span {
    display: block;
    margin-top: var(--main-section-02-contents-text-margin);
}

.inno-2-contents-left {
    left: 0;
    top: 0;
}

.inno-2-contents-right {
    right: 0;
    bottom: 0;
}

.inno-2-contents-left-img {
    margin-top: var(--main-section-02-contents-img-margin);
}

.inno-2-contents-right-img {
    margin-bottom: var(--main-section-02-contents-img-margin);
}

.inno-2-contents-left h1 {
    font-size: var(--main-section-02-contents-title-font-size);
    font-weight: var(--main-section-02-contents-title-font-weight);
    top: 0; /* Set 185px */
}

.inno-2-contents-right p {
    font-size: var(--main-section-02-contents-text-font-size);
    bottom: 0; /* Set 185px */
}


/* #################################### 04.Section #03 #################################### */
.inno-3-wrap {
    position: relative;
    width: var(--main-section-03-wrap-width);
    height: auto;
    margin: var(--main-common-contents-space) auto 0 auto;
    z-index: 1;
}

.video-poster-main-slide {
    background: var(--main-section-03-video-poster);
    background-size: cover;
    z-index: -1;
}

.innno-3-img {
    position: relative;
    width: var(--main-section-03-img-width);
    height: var(--main-section-03-img-height);
    overflow: hidden;
    border-radius: var(--main-section-03-img-border-radius);
}

.innno-3-img ul {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.innno-3-img li {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.innno-3-img li:nth-child(1) {
    background: var(--main-section-03-img-01);
    background-size: cover;
}

.innno-3-img li:nth-child(2) {
    background: var(--main-section-03-img-02);
    background-size: cover;
}

.innno-3-img li:nth-child(3) {
    background: var(--main-section-03-img-03);
    background-size: cover;
}

.innno-3-info {
    position: absolute;
    right: 0;
    top: 0;
    width: var(--main-section-03-top-wrap-width);
    height: var(--main-section-03-top-wrap-height);
    background: var(--main-section-03-top-wrap-bgColor);
    border-radius: var(--main-section-03-top-wrap-border-radius);
    padding: var(--main-section-03-top-wrap-padding);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--main-section-03-top-wrap-gap);
}

.inno-3-title-wrap {
    width: var(--main-section-03-top-title-wrap);
    height: auto;
}

.inno-3-title-sub {
    width: 100%;
    height: var(--main-section-03-top-title-sub-height);
    overflow: hidden;
}

.inno-3-title-sub h2 {
    font-size: var(--main-section-03-top-title-sub-font-size);
    font-weight: var(--main-section-03-top-title-sub-font-weight);
    color: var(--main-section-03-top-title-sub-font-color);
}

.inno-3-title-main {
    position: relative;
    width: 100%;
    height: var(--main-section-03-top-title-main-height);
    overflow: hidden;
}

.inno-3-title-main h1 {
    font-size: var(--main-section-03-top-title-main-font-size);
    font-weight: var(--main-section-03-top-title-main-font-weight);
}

.inno-3-title-sub li,
.inno-3-title-main li,
.inno-3-text-wrap li {
    font-size: 0;
}

.inno-3-text-wrap { 
    position: relative;
    width: var(--main-section-03-top-title-text-wrap-width);
    height: auto;
    padding-left: var(--main-section-03-top-title-text-wrap-padding-left);
}

.inno-3-text-wrap::before,
.inno-3-text-wrap::after {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    width: var(--main-section-03-top-title-text-dote-size);
    height: var(--main-section-03-top-title-text-dote-size);
    border-radius: 100px;
    background: var(--signature-color);
}

.inno-3-text-wrap::before {
    top: var(--main-section-03-top-title-text-dote-pos-1);
}

.inno-3-text-wrap::after {
    top: var(--main-section-03-top-title-text-dote-pos-2);
}

.inno-3-text-wrap p {
    font-size: 20px;
    font-weight: 200;
    line-height: 30px;
}

.ratio-video-main-slide {
    position: absolute;
    right: 0;
    top: var(--main-section-03-video-pos-top);
    width: auto;
    height: var(--main-section-03-video-height);
}

.ratio-video-main-slide video {
    position: relative;
    top: 0;
    left: 0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    width: auto !important;
    height: 100% !important;
    mix-blend-mode: color;
}

.innno-3-slide-info {
    position: relative;
    width: 100%;
    height: var(--main-section-03-bottom-height);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--main-section-03-bottom-margin-top);
}

.innno-3-slide-info-procress {
    width: var(--main-section-03-bottom-procress-width);
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.innno-3-slide-info-num-active {
    position: relative;
    width: var(--main-section-03-bottom-procress-num-width);
    height: var(--main-section-03-bottom-procress-num-height);
    overflow: hidden;
}

.innno-3-slide-info-num-active ul {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
}

.innno-3-slide-info-num-active li {
    font-size: var(--main-section-03-bottom-procress-num-font-size);
    font-weight: var(--main-section-03-bottom-procress-num-font-weight);
    color: var(--main-section-03-bottom-procress-num-font-color);
}

.innno-3-slide-info-num-active span {
    color: var(--main-section-03-bottom-procress-active-num-color);
}

.innno-3-slide-info-procress-check {
    width: var(--main-section-03-bottom-procress-info-wrap);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.innno-3-slide-info-text {
    position: relative;
    width: 100%;
    height: 24px;
    margin-bottom: 7px;
    overflow: hidden;
}

.innno-3-slide-info-text ul {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.innno-3-slide-info-text li {
    font-size: var(--main-section-03-bottom-procress-info-text-font-size);
    font-weight: var(--main-section-03-bottom-procress-info-text-font-weight);
}

.innno-3-slide-info-text li:first-child {
    margin-top: 0;
}

.innno-3-slide-info-bar {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.innoteco-arrow_1,
.innoteco-pause_1 {
    font-size: var(--main-section-03-bottom-procress-icon-size);
    cursor: pointer;
}

.innoteco-arrow_1.on,
.innoteco-pause_1.on {
    color: var(--signature-color) !important;
}

.innoteco-arrow_1 {
    margin-right: var(--main-section-03-bottom-procress-icon-gap);
}

.innno-3-slide-info-bar-progress {
    position: relative;
    width: var(--main-section-03-bottom-procress-bar-width);
    height: var(--main-section-03-bottom-procress-bar-height);
    background: var(--main-section-03-bottom-procress-bar-bg-color);
}

.innno-3-slide-info-bar-progress::after {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: var(--main-section-03-bottom-procress-bar-active-color);
}

.innno-3-slide-info-bar-num p {
    font-size: var(--main-section-03-bottom-procress-total-num);
}

.innno-3-btn {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--main-section-03-bottom-procress-btn-gap);
}

.innno-3-btn-common {
    width: var(--main-section-03-bottom-procress-btn-size);
    height: var(--main-section-03-bottom-procress-btn-size);
    border-radius: 100px;
    display: flex;
    border: var(--main-section-03-bottom-procress-btn-border);
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.innno-3-btn-common  i {
    font-size: var(--main-section-03-bottom-procress-btn-icon-size);
}


/* #################################### 05.Section #04 #################################### */
.inno-4-wrap {
    position: relative;
    width: 100%;
    height: 100svh;
    margin-top: var(--main-common-contents-space);
}

.inno-4-wrap::before,
.inno-4-wrap::after {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 60%;
    z-index: 1;
}

.inno-4-wrap::before {
    top: -30%;
    background: linear-gradient(0deg, transparent, #000, transparent);
}

.inno-4-wrap::after {
    bottom: 0;
    background: linear-gradient(180deg, transparent, #000);
}

.inno-4-plus {
    position: relative;
    width: 100%;
    height: 100%;
}

.inno-4-plus span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: block;
    width: 1px;
    height: clamp(30px, 3.5156vw, 8.4375rem);
    background: #fff;
}

.inno-4-plus span:nth-child(2) {
    transform: rotate(90deg);
}

.inno-4-esgBg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../img/main_value.jpg) center center no-repeat;
    background-size: cover;
}

.inno-4-video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .3;
    z-index: 1;
}

.inno-4-text {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    width: clamp(240px, 37.5vw, 90rem);
    height: clamp(200px, 11.7188vw, 28.125rem);
    z-index: 2;
}

.inno-4-text-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%; /* Set Point */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.inno-4-text-title h1 {
    font-size: clamp(20px, 3.125rem, 4.6875rem);
    font-weight: 100;
    word-spacing: clamp(16px, 1.0938vw, 2.625rem);
}

.inno-4-text h1 span {
    display: block;
}

.inno-4-text-left,
.inno-4-text-right {
    position: absolute;
    bottom: 0;
    top: 0;
    margin: auto 0;
    width: clamp(200px, 11.7188vw, 28.125rem);
    height: 100%;
    border-radius: 300px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, .65);
    transform: scale(1);
}

.inno-4-text p {
    font-size: clamp(20px, 1.2109vw, 2.875rem);
    font-weight: 600;
}

.inno-4-text-left {
    left: 0;
}

.inno-4-text-right {
    right: 0;
}

.inno-4-slogan {
    position: absolute;
    left: 50%;
    top: 66%;
    transform: translate(-50%, -50%);
    width: clamp(200px, 36.7188vw, 88.125rem);
    height: auto;
    z-index: 2;
    overflow: hidden;
}

.inno-4-slogan ul {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
}

.inno-4-slogan li {
    position: relative;
    font-size: clamp(60px, 2.8906vw, 6.9375rem);
    font-weight: 600;
}


/* #################################### 06.Section #05 #################################### */
.inno-5-wrap {
    position: relative;
    width: calc(100% - 250px);
    height: auto;
    padding-top: var(--main-common-contents-space);
    margin-left: 250px;
}

.inno-5-wrap::before {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 20%;
    z-index: -1;
    background: linear-gradient(0deg, transparent, #000);
}

.inno-5-youtube {
    margin: 200px auto 0 auto;
    width: 72%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.inno-5-youtube-btn-wrap {
position: relative;
    width: 21%;
    height: 40svh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    overflow: hidden;
}

.inno-5-youtube-btn-bg {
    position: relative;
    width: 100%;
    height: 100%;
    background: url(../img/youtube_more.jpg) center center no-repeat;
    background-size: cover;
    opacity: 0;
}

.inno-5-youtube-btn-bg::after {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(10px);
}

.inno-5-youtube-btn-plus {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 95px;
    height: 95px;
    border-radius: 500px;
    border: 4px solid #fff;
    cursor: pointer;
    z-index: 1;
}

.inno-5-youtube-btn-plus span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: block;
    width: 60%;
    height: 4px;
    background: #fff;
}

.inno-5-youtube-btn-plus span:nth-last-child(2) {
    transform: rotate(90deg);
}

.inno-5-youtube-btn-roll {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    opacity: 0;
}

.inno-5-youtube-logo {
    width: 50%;
    height: auto;
    margin: 0 auto;
}

.inno-5-youtube-logo img {
    width: 100%;
    height: auto;
}

.inno-5-youtube-btn-roll p {
    font-size: 19px;
    font-weight: 200;
    text-align: center;
    margin-top: 10px;
}

.inno-5-youtube-btn-roll span {
    font-weight: 600;
}

.inno-5-youtube-video {
    width: 75%;
    height: auto;
}

.inno-5-youtube-video iframe {
    width: 100%;
    height: auto;
    border-radius: 30px;
    aspect-ratio: 16 / 9;
}


/* #################################### 07.Section #06 #################################### */
.inno-6-wrap {
    position: relative;
    width: 100%;
    height: 100svh;
    margin-top: var(--main-common-contents-space);
}

.inno-6-icon-wrap {
    position: relative;
    width: 27vw;
    height: 27vw;
    margin: 3% auto 0 auto;
}

.inno-6-icon-symbol,
.inno-6-icon-center {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 46%;
    height: 46%;
}

.inno-6-icon-center::before {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 70%;
    height: 70%;
    background: rgba(0, 0, 0, .85);
    backdrop-filter: blur(10px);
    border-radius: 500px;
}

.inno-6-icon-symbol img,
.inno-6-icon-center img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.inno-6-icon-symbol img {
    width: 100%;
    height: auto;
}

.inno-6-icon-center img {
    width: 25%;
    height: auto;
}

.inno-6-icon-circle-stroke,
.inno-6-icon-circle-svg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 90%;
    height: 90%;
}

.inno-6-icon-circle-stroke {
    width: 90%;
    height: 90%;
    border: 1px solid #1e1e1e;
    border-radius: 1000px;
}

.inno-6-icon-circle-svg svg {
    width: 100%;
    height: 100%;
}

.inno-6-icon-circle-svg circle {
    fill: none;
    stroke: var(--signature-color);
    stroke-width: 3px;
    r: calc((100% / 2) - (1px / 2) - 1px);
}

.inno-6-text {
    position: absolute;
    left: 0;
    top: 60%;
    transform: translateY(-50%);
    width: 100%;
    height: 211px;
    overflow: hidden;
    z-index: -1;
}

.inno-6-text p {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 176px;
    font-weight: 900;
    color: #202020;
    white-space: nowrap;
    text-transform: uppercase;
}

.inno-6-img {
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    width: 42%;
    height: auto;
}

.inno-6-img img {
    width: 100%;
    height: auto;
}

.inno-6-slogan {
    position: absolute;
    left: 0;
    bottom: 10%;
    width: 100%;
    height: 78px;
    overflow: hidden;
}

.inno-6-slogan ul {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
}

.inno-6-slogan li {
    font-size: 65px;
    font-weight: 200;
    margin-bottom: 20px;
    text-align: center;
}

.inno-6-slogan li:nth-child(2) {
    font-weight: 600;
}




/* **************************************************************
    0) Responsive Area
************************************************************** */
@media all and (max-width: 700px) {
    .inno-intro-1 {
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
    }

    .inno-intro-text-2-wrap {
        margin: var(--intro-1-text-mobile-margin);
    }
}

@media all and (max-width: 620px) {
    .inno-intro-symbol-text {
        width: 70%;
    }

    .inno-intro-symbol-text p {
        line-height: var(--intro-2-line-height);
    }
}