@charset "utf-8";

:root {
    /* #################################### Basic Set #################################### */
    --base-color-black: #000;
    --base-color-white: #fff;
    --base-color-darkGrey: #303030;
    --base-color-lightGrey: #c0c0c0;
    --signature-color: #0080FF;
    --signature-color-yellow: #ffd800;
    --signature-color-bg: rgb(59, 72, 144);
    --signature-color-bg-black: rgb(26, 26, 26);
    --point-color-red: rgba(255, 34, 0, 0.87);
    --signature-color-yellow: #fbff00;
    --sub-bg-color-black: #0c0a0a;
    --impact-color: radial-gradient(var(--signature-color) 70%, transparent);

    --table-border-color: rgba(255, 255, 255, 0.3);

    --font-size-base: 16px;
    --font-weight-base: 300;
    --font-color-base: var(--base-color-black);
    --font-KR-base-1: "Pretendard Variable", sans-serif;
    --font-KR-base-2: "Pretendard Variable", sans-serif;
    --font-KR-base-3: "Pretendard Variable", sans-serif;
    --font-KR-base-4: "Pretendard Variable", sans-serif;
    --font-EN-base-1: "Pretendard Variable", sans-serif;

    --background-color-base: var(--base-color-white);
    /* --background-color-base: red; */

    --basic-wrap-width: 85%;

    --all-sec-margin: 0 120px;
    --all-sec-margin-position: 120px;
    --all-sec-margin_mo: 0 20px;
    --all-sec-margin-position-mo: 20px;

    

    --sec-top-bottom-margin: 100px;

    --max-width: 1920px;

    --header-hover-bg: rgba(0, 0, 0, 0.7);



    /* #################################### Effect Set #################################### */
    --main-effect-filter-set: blur(15px) grayscale(0.7);
    --main-effect-filter-blur: blur(15px);
    --main-effect-opacity: 0;

    /* #################################### Loading #################################### */
    --loading-bg-filter-set: grayscale(1) blur(50px);

    --loading-mark-size: 15rem;
    --loading-mark-border: 4px solid #fff;
    --loading-mark-logo-size: clamp(7.375rem, 6vw, 8.25rem);
    --loading-mark-text-marginTop: 0.9375rem;
    --loading-mark-text-size: clamp(1.25rem, 2vw, 1.375rem);
    --loading-mark-text-weight: 400;
    --loading-mark-text-spacing: 2px;
    --loading-mark-text-color: #fff;

    --loading-line-weight: 4px;
    --loading-line-bg-height: 50%;
    --loading-line-bg-color: #fff;
    --loading-line-active-height: 23%;
    --loading-line-active-color: linear-gradient(to top, transparent, var(--signature-color) 50%, transparent);

    /* #################################### Header #################################### */
    --header-wrap-bgColor-basic: transparent;
    --header-gnb-color-base-basic: #fff;
    --header-right-search-color-basic: #fff;
    --header-right-language-list-border-basic: 1px solid #d8d8d8;
    --header-right-language-font-color-basic: #000;

    --header-wrap-bgColor-scroll: #fff;
    --header-gnb-color-base-scroll: var(--base-color-darkGrey);
    --header-right-search-color-scroll: var(--base-color-darkGrey);

    --header-wrap-height: 9.0625rem;
    --header-wrap-sub-scroll-top-height: 3.125rem;
    --header-wrap-sub-scroll-bottom-height: 5.0625rem;
    --header-wrap-sub-scroll-height: calc(var(--header-wrap-sub-scroll-top-height) + var(--header-wrap-sub-scroll-bottom-height));
    --header-wrap-init-pos: calc(var(--header-wrap-height) - (var(--header-wrap-height) * 2));
    --header-wrap-gap: 60px;

    --header-gnb-wrap-size: 32px;
    --header-gnb-size: 0.1875rem;
    --header-gnb-width-base: 75%;
    --header-gnb-width-point: 100%;
    --header-gnb-borderRadius: 100px;
    --header-gnb-color-point: var(--signature-color);

    --header-gnb-full-bgColor: rgba(0, 0, 0, 0.9);
    --header-gnb-full-bgPoint-color: linear-gradient(to left, transparent, rgba(0, 160, 174, 0.3), transparent);
    --header-gnb-full-common-pos: 90px;
    --header-gnb-full-top-pos: 11%;
    --header-gnb-full-middle-pos: 43%;
    --header-gnb-full-middle-width: 21.25rem;
    --header-gnb-full-middle-height: 55%;
    --header-gnb-full-bottom-pos: 86%;
    --header-gnb-full-logo-size: 8.75rem;
    --header-gnb-full-video-width: 100%;
    --header-gnb-full-video-height: 90%;
    --header-gnb-full-language-space: 0.5rem;
    --header-gnb-full-language-font-size: clamp(1rem, 1vw, 1.125rem);
    --header-gnb-full-language-font-weight: 500;
    --header-gnb-full-language-font-spacing: 0.0625rem;
    --header-gnb-full-language-font-color: #6e6e6e;
    --header-gnb-full-language-active-weight: 600;
    --header-gnb-full-language-active-color: #fff;
    --header-gnb-full-language-hover-weight: 600;
    --header-gnb-full-language-hover-color: var(--signature-color);
    --header-gnb-full-language-hover-effect: underline;
    --header-gnb-full-search-icon-size: 1.25rem;
    --header-gnb-full-search-icon-color: #fff;
    --header-gnb-full-search-icon-hoverColor: var(--signature-color);
    --header-gnb-full-location-font-size: 0.875rem;
    --header-gnb-full-location-font-weight: 200;
    --header-gnb-full-location-font-color: #fff;
    --header-gnb-full-location-font-margin: 0.3125rem;
    --header-gnb-full-location-gap: 1.875rem;
    --header-gnb-full-number-font-size: 2.125rem;
    --header-gnb-full-number-font-weight: 600;
    --header-gnb-full-menu-wrap-gap: 23%;
    --header-gnb-full-menu-wrap-pos: calc(var(--header-gnb-full-middle-width) + var(--header-gnb-full-menu-wrap-gap));
    --header-gnb-full-menu-wrap-width: calc(100% - var(--header-gnb-full-menu-wrap-pos));
    --header-gnb-full-menu-gap: clamp(3.75rem, 4vw, 5.1875rem);
    --header-gnb-full-menu-frame-width: calc(100% - var(--header-gnb-full-menu-frame-pos));
    --header-gnb-full-menu-frame-pos: 122px;
    --header-gnb-full-menu-frame-gap: 1.4375rem;
    --header-gnb-full-menu-1depth-paddingRight: 22px;
    --header-gnb-full-menu-1depth-font-size: clamp(1.625rem, 4.5vw, 1.875rem);
    --header-gnb-full-menu-1depth-font-weight: 600;
    --header-gnb-full-menu-1depth-font-spacing: 0.0625rem;
    --header-gnb-full-menu-1depth-font-color: #fff;
    --header-gnb-full-menu-1depth-border: 1px solid transparent;
    --header-gnb-full-menu-1depth-circle-size: 0.625rem;
    --header-gnb-full-menu-1depth-circle-stroke: 2px solid #fff;
    --header-gnb-full-menu-1depth-hover-circle: 2px solid var(--signature-color);
    --header-gnb-full-menu-1depth-hover-border: 1px solid #fff;
    --header-gnb-full-menu-2depth-gap: 1.25rem;
    --header-gnb-full-menu-2depth-font-size: clamp(1.25rem, 1vw, 1.375rem);
    --header-gnb-full-menu-2depth-font-weight: 300;
    --header-gnb-full-menu-2depth-font-color: #fff;
    --header-gnb-full-close-size: clamp(3.125rem, 22vw, 6.25rem);
    --header-gnb-full-close-thick: 1px;
    --header-gnb-full-close-color: #fff;

    --header-search-full-top-marginTop: 10vh;
    --header-search-full-logo-size: clamp(8.25rem, 10vw, 15.625rem);
    --header-search-full-logo-margin: 0 auto;
    --header-search-full-title-margin: 2.5rem;
    --header-search-full-title-font-size: clamp(1.875rem, 8.5vw, 4.375rem);
    --header-search-full-title-font-weight: 300;
    --header-search-full-title-padding: 0 10%;
    --header-search-full-form-padding: 13px;
    --header-search-full-form-border: 1px solid #585858;
    --header-search-full-form-placholder-size: clamp(1.25rem, 1vw, 1.5rem);
    --header-search-full-form-placholder-weight: 700;
    --header-search-full-form-placholder-color: var(--base-color-black);
    --header-search-full-form-hover-border: 1px solid var(--signature-color);
    --header-search-full-btn-size: 3.125rem;
    --header-search-full-btn-margin: 45px auto 0 auto;
    --header-search-full-btn-color: #4a4a4a;
    --header-search-full-btn-icon-size: 1.25rem;
    --header-search-full-btn-icon-color: #fff;
    --header-search-full-form-width: 500px;
    --header-search-full-form-pos: 60%;
    --header-search-full-close-color: #000;

    --header-logo-wrap-width: clamp(9.375rem, 6vw, 11.25rem);

    --header-right-wrap-width: 5.125rem;
    --header-right-wrap-height: 2.25rem;

    --header-right-search-size: 1.75rem;
    --header-right-global-size: 1.8125rem;

    --header-right-language-pos: 55px;
    --header-right-language-width: 5.3125rem;
    --header-right-language-height: 8.4375rem;
    --header-right-language-padding: 0.3125rem 1rem;
    --header-right-language-borderRadius: 7px;
    --header-right-language-bgColor: #fff;
    --header-right-language-boxShadow: 1px 1px 11px rgba(0, 0, 0, 0.25);
    --header-right-language-arrow-size: auto 0.3125rem;
    --header-right-language-font-size: 1.125rem;
    --header-right-language-font-color: #000;
    --header-right-language-font-weight: 600;
    --header-right-language-font-spacing: 0.0625rem;

    /* #################################### Sub Header #################################### */
    --sub-header-scroll-height: 69px;
    --sub-header-scroll-bgColor: #fff;

    --sub-header-bottom-height: 450px;
    --sub-header-bottom-bgColor: #fff;

    --sub-header-location-width: 75%;
    --sub-header-location-height: 5.25rem;
    --sub-header-location-marginTop: -3px;
    --sub-header-location-weight: 6px;
    --sub-header-location-bg-color: #9bd6d8;
    --sub-header-location-gap: 1.4375rem;
    --sub-header-location-menu-padding: 26px 18px;
    --sub-header-location-menu-font-size: clamp(1.125rem, 4vw, 1.25rem);
    --sub-header-location-menu-font-weight: 500;

    --sub-header-marker-height: calc(100% - var(--sub-header-location-height));
    --sub-header-marker-graphic-size: 6.875rem;
    --sub-header-marker-graphic-marginTop: 81px auto 0 auto;
    --sub-header-marker-title-marginTop: 50px;
    --sub-header-marker-title-font-size: clamp(1.5rem, 2vw, 1.875rem);
    --sub-header-marker-title-font-weight: 700;
    --sub-header-marker-circle-stroke-width: 2px;
    --sub-header-marker-circle-r-size: calc((100% / 2) - 2px);
    --sub-header-marker-icon-size: 1.625rem;
    --sub-header-marker-icon-pos: 10px;
    --sub-header-marker-line-width: 1px;
    --sub-header-marker-line-color: linear-gradient(to bottom, transparent, var(--signature-color) 300%);
    --sub-header-marker-point-size: 6px;
    --sub-header-marker-point-color: var(--signature-color);

    --sub-header-visual-common-height: calc(100% - var(--sub-header-bottom-height));

    --sub-header-fixedBg-overview: url(../img/sub_1_1_bgcover.jpg) center center no-repeat;
    --sub-header-fixedBg-mission: url(../img/sub_1_2_bgcover.jpg) center center no-repeat;
    --sub-header-fixedBg-history: url(../img/sub_1_3_bgcover.jpg) center center no-repeat;
    --sub-header-fixedBg-brand: url(../img/sub_1_4_bgcover.jpg) center center no-repeat;
    --sub-header-fixedBg-location: url(../img/sub_1_5_bgcover.jpg) center center no-repeat;
    --sub-header-fixedBg-applications_home: url(../img/sub_2_1_bgcover.jpg) center center no-repeat;
    --sub-header-fixedBg-applications_car: url(../img/sub_2_2_bgcover.jpg) center center no-repeat;
    --sub-header-fixedBg-ir_receiver: url(../img/sub_3_1_bgcover.jpg) center center no-repeat;
    --sub-header-fixedBg-optical_sensor: url(../img/sub_3_2_bgcover.jpg) center center no-repeat;
    --sub-header-fixedBg-fiber_optic: url(../img/sub_3_3_bgcover.jpg) center center no-repeat;
    --sub-header-fixedBg-car_led: url(../img/sub_3_4_bgcover.jpg) center center no-repeat;
    --sub-header-fixedBg-car_pressure: url(../img/sub_3_5_bgcover.jpg) center center no-repeat;
    --sub-header-fixedBg-finance: url(../img/sub_4_1_bgcover.jpg) center center no-repeat;
    --sub-header-fixedBg-announcement: url(../img/sub_4_2_bgcover.jpg) center center no-repeat;
    --sub-header-fixedBg-technology: url(../img/sub_5_1_bgcover.jpg) center center no-repeat;
    --sub-header-fixedBg-quality: url(../img/sub_5_2_bgcover.jpg) center center no-repeat;
    --sub-header-fixedBg-qna: url(../img/sub_5_3_bgcover.jpg) center center no-repeat;
    --sub-header-fixedBg-visit: url(../img/sub_5_4_bgcover.jpg) center center no-repeat;
    --sub-header-fixedBg-search: url(../img/sub_6_bgcover.jpg) center center no-repeat;
    --sub-header-fixedBg-title-pos: 15%;
    --sub-header-fixedBg-title-size: clamp(2.375rem, 5vw, 3.75rem);
    --sub-header-fixedBg-title-weight: 200;
    --sub-header-fixedBg-title-color: #fff;
    --sub-header-fixedBg-logo-pos: var(--sub-header-fixedBg-title-pos);
    --sub-header-fixedBg-logo-size: 10.375rem;

    --sub-header-visual-Bg-color: #000;
    --sub-header-visual-Bg-init-scale: scale(2);
    --sub-header-visual-Bg-init-opacity: 0.3;
    --sub-header-visual-Bg-img-overview: url(../img/sub_1_1_cover.jpg) center center no-repeat;
    --sub-header-visual-Bg-img-mission: url(../img/sub_1_2_cover.jpg) center center no-repeat;
    --sub-header-visual-Bg-img-history: url(../img/sub_1_3_cover.jpg) center center no-repeat;
    --sub-header-visual-Bg-img-brand: url(../img/sub_1_4_cover.jpg) center center no-repeat;
    --sub-header-visual-Bg-img-location: url(../img/sub_1_5_cover.jpg) center center no-repeat;
    --sub-header-visual-Bg-img-applications_home: url(../img/sub_2_1_cover.jpg) center center no-repeat;
    --sub-header-visual-Bg-img-applications_car: url(../img/sub_2_2_cover.jpg) center center no-repeat;
    --sub-header-visual-Bg-img-product: url(../img/sub_3_1_cover.jpg) center center no-repeat;
    --sub-header-visual-Bg-img-finance: url(../img/sub_4_1_cover.jpg) center center no-repeat;
    --sub-header-visual-Bg-img-announcement: url(../img/sub_4_2_cover.jpg) center center no-repeat;
    --sub-header-visual-Bg-img-technology: url(../img/sub_5_1_cover.jpg) center center no-repeat;
    --sub-header-visual-Bg-img-quality: url(../img/sub_5_2_cover.jpg) center center no-repeat;
    --sub-header-visual-Bg-img-qna: url(../img/sub_5_3_cover.jpg) center center no-repeat;
    --sub-header-visual-Bg-img-visit: url(../img/sub_5_4_cover.jpg) center center no-repeat;
    --sub-header-visual-Bg-img-search: url(../img/sub_6_cover.jpg) center center no-repeat;

    --sub-header-video-scroll-bg: #000;
    --sub-header-video-scroll-opacity: 0.7;
    --sub-header-video-basic-1: 0.06;
    --sub-header-video-basic-2: 0.1;
    --sub-header-video-basic-3: 0.1;
    --sub-header-video-basic-4: 0.05;
    --sub-header-video-basic-bs-color: #000;
    --sub-header-video-basic-bs-opacity: 0.7;

    --sub-header-title-size: clamp(2.625rem, 5vw, 4.125rem);
    --sub-header-title-weight: 500;
    --sub-header-title-color: #fff;
    --sub-header-title-spacing: 1px;

    /* #################################### Main #################################### */

    /* Intro */
    --intro-bgColor: #fff;
    --intro-circle-size: 15.625rem;
    --intro-circle-stroke-width: 2.5rem;
    --intro-circle-gap: 0.625rem;
    --intro-circle-symbol-size: 10.625rem;
    --intro-circle-symbol-pos: 2.5rem;
    --intro-circle-symbol-pos-show: calc((var(--intro-circle-symbol-pos) * 2) - (var(--intro-circle-symbol-pos) * 4));

    --intro-text-size: clamp(3.125rem, 3.5vw, 5rem);
    --intro-text-1-pos: -4vh;
    --intro-text-2-spacing: 0.4375rem;
    --intro-text-effect-color: #fff;

    /* Main Visual #Video */
    --main-video-poster-1: url(../img/poster_main_1.jpg) center center no-repeat;
    --main-video-screen-height: 300px;
    --main-video-screen-color: linear-gradient(to bottom, #000 7%, transparent);
    --main-video-screen-opacity: 0.4;

    --main-text-width: 85%;
    --main-text-pos-left: calc((100% - var(--basic-wrap-width)) / 2);
    --main-text-pos-bottom: 20%;
    --main-text-set-font-size: clamp(3.75rem, 4vw, 6rem);
    --main-text-set-font-color: #fff;
    --main-text-set-font-weight: 600;

    --main-timeline-wrap-pos: 10%;
    --main-timeline-wrap-width: var(--basic-wrap-width);
    --main-timeline-wrap-height: 19px;
    --main-timeline-line-size: 1px;
    --main-timeline-line-color: #fff;
    --main-timeline-line-opacity: 0.5;
    --main-timeline-mark-size: var(--main-timeline-wrap-height);
    --main-timeline-mark-borderRadius: 300px;
    --main-timeline-mark-border: 3px solid var(--signature-color);
    --main-timeline-mark-inner-size: calc(var(--main-timeline-wrap-height) - 12px);
    --main-timeline-mark-outline-color: transparent;
    --main-timeline-mark-inner-color: #fff;

    --main-scrolldown-wrap-pos: 20px;
    --main-scrolldown-wrap-size: 2.5rem;
    --main-scrolldown-gradient-pos: -70%;
    --main-scrolldown-gradient-size: 70%;
    --main-scrolldown-gradient-opacity: 0.7;
    --main-scrolldown-gradient-color: linear-gradient(to bottom, transparent, var(--signature-color) 50%, transparent);
    --main-scrolldown-text-size: 0.75rem;
    --main-scrolldown-text-weight: 500;
    --main-scrolldown-text-spacing: 0.1875rem;
    --main-scrolldown-text-color: #272727;
    --main-scrolldown-icon-borderRadius: 100px;
    --main-scrolldown-icon-space: 5px;
    --main-scrolldown-icon-frame-pos: -200px;
    --main-scrolldown-icon-frame-opacity: 0.4;
    --main-scrolldown-icon-body-width: 1px;
    --main-scrolldown-icon-body-height: 150px;
    --main-scrolldown-icon-body-bg: linear-gradient(to top, #fff, transparent);
    --main-scrolldown-icon-point-size: 4px;
    --main-scrolldown-icon-point-color: #fff;
    --main-scrolldown-icon-arrow-size: 17px;

    /* Main Visual #Common */
    --main-visual-common-copy-wrap-size: 75%;
    --main-visual-common-copy-font-size: clamp(50px, 4.5vw, 106px);
    --main-visual-common-copy-font-weight: 600;
    --main-visual-common-copy-font-whitespace: nowrap;
    --main-visual-common-copy-second-marginTop: 4px;
    --main-visual-common-copy-connect-line-size: 1px;
    --main-visual-common-copy-connect-line-width: 100%;

    /* Main Visual #1 */
    --main-visual-1-left-bgColor: #212121;
    --main-visual-1-right-bgColor: #fff;

    --main-visual-1-circle-size: 20vw;
    --main-visual-1-circle-fill-color: transparent;
    --main-visual-1-circle-stroke-size: 3vw;
    --main-visual-1-circle-effect-size: 50vw;

    --main-visual-1-copy-left-color: #fff;
    --main-visual-1-copy-right-color: #000;

    --main-visual-1-hand-left-width: 36%;
    --main-visual-1-hand-left-pos-top: 50%;
    --main-visual-1-hand-left-pos-left: calc(var(--main-visual-1-hand-left-width) - (var(--main-visual-1-hand-left-width) * 2));
    --main-visual-1-hand-left-pos-left-move: 7%;

    --main-visual-1-hand-right-width: 31%;
    --main-visual-1-hand-right-pos-top: 50%;
    --main-visual-1-hand-right-pos-right: calc(var(--main-visual-1-hand-right-width) - (var(--main-visual-1-hand-right-width) * 2));
    --main-visual-1-hand-left-pos-right-move: 12%;

    /* Main Visual #Bridge */
    --main-visual-bridge-circle-fill-img: url(../img/main_bridge_img.jpg) center center no-repeat;
    --main-visual-bridge-circle-fill-size: 30vw;
    --main-visual-bridge-circle-fill-opacity: 0.2;

    --main-visual-bridge-circle-color-size: 31.25rem;

    --main-visual-bridge-circle-grey-size: 43.75rem;
    --main-visual-bridge-circle-grey-stroke-color: #e7e7e7;

    --main-visual-bridge-stroke-size: 1px;

    --main-visual-bridge-text-pos: 10%;
    --main-visual-bridge-text-title-size: clamp(2.5rem, 3vw, 4.375rem);
    --main-visual-bridge-text-title-weight: 500;
    --main-visual-bridge-text-link-size: 1.25rem;
    --main-visual-bridge-text-link-weight: 500;
    --main-visual-bridge-text-link-spacing: 4px;
    --main-visual-bridge-text-link-transform: uppercase;
    --main-visual-bridge-text-icon-size: 1.3125rem;

    --main-visual-bridge-link-margin: 1.875rem 0 0 0;
    --main-visual-bridge-link-icon-gap: 0.5rem;

    --main-visual-bridge-circle-left-movePOS: center 100px;
    --main-visual-bridge-circle-right-movePOS: center 500px;
    --main-visual-bridge-circle-right-scale: 3;

    /* Main Visual #2 */
    --main-visual-2-intro-img-height: 50%;
    --main-visual-2-intro-img-top-bg: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../img/main_point_intro_1.jpg) center center;
    --main-visual-2-intro-img-bottom-bg: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../img/main_point_intro_2.jpg) center center;
    --main-visual-2-intro-img-point-1: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../img/main_point_1.jpg) center center;
    --main-visual-2-intro-img-point-2: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../img/main_point_2.jpg) center center;
    --main-visual-2-intro-img-point-3: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../img/main_point_3.jpg) center center;

    --main-visual-2-text-company-font-size: clamp(2.125rem, 11vw, 7.4375rem);
    --main-visual-2-text-company-font-weight: 700;
    --main-visual-2-text-company-whitespace: nowrap;
    --main-visual-2-text-company-font-fill-color: transparent;
    --main-visual-2-text-company-font-stroke: 1px #fff;
    --main-visual-2-text-company-align: center;
    --main-visual-2-text-company-left-pos-top: 25%;
    --main-visual-2-text-company-right-pos-top: 75%;
    --main-visual-2-text-company-complete-pos-top: 50%;
    --main-visual-2-text-company-complete-font-fill-color: #fff;
    --main-visual-2-text-company-complete-font-stroke: 0;

    --main-visual-2-text-copy-font-size: clamp(3.125rem, 4vw, 5.625rem);
    --main-visual-2-text-copy-font-weight: 500;
    --main-visual-2-text-copy-font-color: #fff;
    --main-visual-2-text-copy-align: center;
    --main-visual-2-text-copy-pos-set: -6vh;

    /* Main Visual #3 */
    --main-visual-3-bg: #fff url(../img/main_slide_bg.jpg) center center no-repeat;

    --main-visual-3-slide-title-pos-top: 22%;
    --main-visual-3-slide-title-pos-left: calc((100% - 85%) / 2);
    --main-visual-3-slide-title-width: var(--basic-wrap-width);
    --main-visual-3-slide-title-height: 12.0625rem;
    --main-visual-3-slide-title-font-size: clamp(3.375rem, 4vw, 4.375rem);
    --main-visual-3-slide-title-font-weight: 700;
    --main-visual-3-slide-title-second-marginTop: 35px;
    --main-visual-3-slide-title-second-font-size: 2.875rem;
    --main-visual-3-slide-title-second-font-top-color: #505050;
    --main-visual-3-slide-title-second-font-weight: 300;

    --main-visual-3-slide-graphic-home-size: 46vw;
    --main-visual-3-slide-graphic-home-pos-top: 51%;
    --main-visual-3-slide-graphic-LED-size: 46vw;
    --main-visual-3-slide-graphic-LED-pos-top: 56%;
    --main-visual-3-slide-graphic-pressure-size: 56vw;
    --main-visual-3-slide-graphic-pressure-pos-top: 56%;
    --main-visual-3-slide-graphic-marker-size: 5rem;
    --main-visual-3-slide-graphic-marker-border: 1px solid #fff;
    --main-visual-3-slide-graphic-marker-circle-bgColor: #fff;
    --main-visual-3-slide-graphic-LED-marker-1-pos-left: 42%;
    --main-visual-3-slide-graphic-LED-marker-1-pos-top: 28%;
    --main-visual-3-slide-graphic-LED-marker-2-pos-left: 48%;
    --main-visual-3-slide-graphic-LED-marker-2-pos-top: 54%;
    --main-visual-3-slide-graphic-pressure-marker-1-pos-left: 11%;
    --main-visual-3-slide-graphic-pressure-marker-1-pos-top: 36%;
    --main-visual-3-slide-graphic-pressure-marker-2-pos-left: 41%;
    --main-visual-3-slide-graphic-pressure-marker-2-pos-top: 58%;
    --main-visual-3-slide-graphic-pressure-marker-3-pos-left: 41%;
    --main-visual-3-slide-graphic-pressure-marker-3-pos-top: 87%;
    --main-visual-3-slide-graphic-pressure-marker-4-pos-left: 88%;
    --main-visual-3-slide-graphic-pressure-marker-4-pos-top: 36%;
    --main-visual-3-slide-graphic-pressure-marker-5-pos-left: 60%;
    --main-visual-3-slide-graphic-pressure-marker-5-pos-top: 23%;
    --main-visual-3-slide-graphic-home-marker-1-pos-left: 15%;
    --main-visual-3-slide-graphic-home-marker-1-pos-top: 29%;
    --main-visual-3-slide-graphic-home-marker-2-pos-left: 15%;
    --main-visual-3-slide-graphic-home-marker-2-pos-top: 66%;
    --main-visual-3-slide-graphic-home-marker-3-pos-left: 22%;
    --main-visual-3-slide-graphic-home-marker-3-pos-top: 86%;
    --main-visual-3-slide-graphic-home-marker-4-pos-left: 49%;
    --main-visual-3-slide-graphic-home-marker-4-pos-top: 91%;
    --main-visual-3-slide-graphic-home-marker-5-pos-left: 62%;
    --main-visual-3-slide-graphic-home-marker-5-pos-top: 82%;
    --main-visual-3-slide-graphic-home-marker-6-pos-left: 83%;
    --main-visual-3-slide-graphic-home-marker-6-pos-top: 86%;
    --main-visual-3-slide-graphic-home-marker-7-pos-left: 83%;
    --main-visual-3-slide-graphic-home-marker-7-pos-top: 62%;
    --main-visual-3-slide-graphic-home-marker-8-pos-left: 85%;
    --main-visual-3-slide-graphic-home-marker-8-pos-top: 21%;
    --main-visual-3-slide-graphic-home-marker-9-pos-left: 49%;
    --main-visual-3-slide-graphic-home-marker-9-pos-top: 57%;

    --main-visual-3-slide-product-pos-right: calc((100% - var(--basic-wrap-width)) / 2);
    --main-visual-3-slide-product-width: 22.5rem;
    --main-visual-3-slide-product-height: 85%;
    --main-visual-3-slide-product-bgColor: rgba(255, 255, 255, 0.7);
    --main-visual-3-slide-product-padding: 2%;
    --main-visual-3-slide-product-text-size: clamp(1.3125rem, 3vw, 1.5rem);
    --main-visual-3-slide-product-text-weight: 600;
    --main-visual-3-slide-product-text-padding: 0 0.625rem 0.75rem 0.625rem;
    --main-visual-3-slide-product-text-border-bottom: 1px solid var(--signature-color);
    --main-visual-3-slide-product-text-margin-top: 2.25rem;
    --main-visual-3-slide-product-text-align: center;

    --main-visual-3-slide-mouse-main-horizental-width: 16.25rem;
    --main-visual-3-slide-mouse-main-horizental-height: 8.125rem;
    --main-visual-3-slide-mouse-main-horizental-stroke-size: 5rem;
    --main-visual-3-slide-mouse-main-horizental-stroke-width: 2px;
    --main-visual-3-slide-mouse-main-horizental-stroke-gap: 10px;
    --main-visual-3-slide-mouse-main-horizental-center-width: 8.125rem;
    --main-visual-3-slide-mouse-main-horizental-center-border: 1px solid #bcbcbc;
    --main-visual-3-slide-mouse-main-horizental-icon-size: 2.5rem;
    --main-visual-3-slide-mouse-main-horizental-icon-color: #bcbcbc;

    --main-visual-3-slide-mouse-product-horizental: ;

    --main-visual-3-slide-mouse-product-vertical-width: 3.5625rem;
    --main-visual-3-slide-mouse-product-vertical-height: 8.875rem;
    --main-visual-3-slide-mouse-product-vertical-space: 0.9375rem;
    --main-visual-3-slide-mouse-product-vertical-bgColor: rgba(0, 0, 0, 0.5);
    --main-visual-3-slide-mouse-product-vertical-icon-size: 1.4375rem;
    --main-visual-3-slide-mouse-product-vertical-icon-color: #bcbcbc;

    /* Main Visual #4 */
    --main-visual-4-markColor: #ebebeb;
    --main-visual-4-bgColor: #000;

    --main-visual-4-video-screen-bgColor: rgba(0, 0, 0, 0.5);
    --main-video-poster-2: url(../img/poster_main_2.jpg) center center no-repeat;

    --main-visual-4-text-width: 30%;
    --main-visual-4-text-pos: -5vh;

    --main-visual-4-text-font-size: clamp(4.5rem, 6vw, 5.1875rem);
    --main-visual-4-text-font-weight: 600;
    --main-visual-4-text-font-color: #fff;

    /* #################################### Sub #################################### */
    /* Init Set */
    --sub-contents-wrap-setPOS: 100vh;
    --sub-contents-wrap-paddingTop: 11.875rem;
    --sub-contents-wrap-paddingBottom: 7.125rem;
    --sub-contents-wrap-color: #fff;
    --sub-contents-divide-last-line: 1px solid #dcdcdc;

    /* Overview */
    --sub-overview-effect-1-size: 25vw;
    --sub-overview-effect-1-init-left: -10vw;
    --sub-overview-effect-1-init-top: 126px;
    --sub-overview-effect-1-border: 1px solid #e9e9e9;

    --sub-overview-effect-2-size: 45vw;
    --sub-overview-effect-2-init-right: -14vw;
    --sub-overview-effect-2-init-bottom: -208px;
    --sub-overview-effect-2-bgColor: #f1f1f1;

    --sub-overview-h1-size: clamp(2.125rem, 2vw, 2.875rem);
    --sub-overview-h1-weight: 500;

    --sub-overview-h2-size: clamp(1.25rem, 1vw, 1.625rem);
    --sub-overview-h2-weight: 400;
    --sub-overview-h2-spacing: 5px;
    --sub-overview-h2-marginBottom: 8px;

    --sub-overview-p-size: clamp(1.1875rem, 2vw, 1.375rem);
    --sub-overview-p-weight: 400;
    --sub-overview-p-lineHeight: 1.5;
    --sub-overview-p-marginTop: 40px;

    --sub-overview-1-width: 85%;
    --sub-overview-1-height: clamp(31.25rem, 40vw, 62.5rem);
    --sub-overview-1-bgColor: #000;
    --sub-overview-1-img: url(../img/sub_1_1_1.jpg) center center no-repeat;
    --sub-overview-1-img-opacity: 0.4;
    --sub-overview-1-text-color: #fff;
    --sub-overview-1-text-padding: 0 10%;
    --sub-overview-1-h1-size: clamp(3.75rem, 9vw, 11.25rem);
    --sub-overview-1-h1-weight: 700;
    --sub-overview-1-h1-spacing: 0.5rem;
    --sub-overview-1-h1-pos: translateY(-50%);
    --sub-overview-1-h1-mix: overlay;
    --sub-overview-1-p-size: clamp(1.5rem, 3vw, 3.125rem);
    --sub-overview-1-p-weight: 200;
    --sub-overview-1-p-pos: translateY(72%);
    --sub-overview-1-p-lineHeight: 1.2;

    --sub-overview-2-width: 70%;
    --sub-overview-2-wrap-gap: 210px;
    --sub-overview-2-height: 330px;
    --sub-overview-2-gap: 90px;
    --sub-overview-2-bgColor: #fff;
    --sub-overview-2-margin: 170px auto;
    --sub-overview-2-img-size: 40%;
    --sub-overview-2-img-top: url(../img/sub_1_1_2.jpg) center center no-repeat;
    --sub-overview-2-img-bottom: url(../img/sub_1_1_3.jpg) center center no-repeat;

    --sub-overview-3-height: 1000px;
    --sub-overview-3-paddingTop: 103px;
    --sub-overview-3-img: url(../img/sub_1_1_4.jpg) center center no-repeat;
    --sub-overview-3-gradient-height: 60%;
    --sub-overview-3-gradient-color: linear-gradient(to top, transparent, #fff 60%);
    --sub-overview-3-paddingSide: 10%;

    --sub-overview-circle-top-movePOS: center 80px;
    --sub-overview-circle-top-scale: 1.5;
    --sub-overview-circle-bottom-movePOS: 20px center;
    --sub-overview-circle-bottom-color: #f1fafc;

    /* Misson&Vision */
    --sub-mv-wrap-width: 85%;
    --sub-mv-wrap-bgColor: #212121;

    --sub-mv-1-frame-height: 600px;
    --sub-mv-1-frame-bgColor: #000;
    --sub-mv-1-left-bg: url(../img/sub_1_2_1.jpg) center center no-repeat;
    --sub-mv-1-left-opacity: 0.55;
    --sub-mv-1-right-bg: url(../img/sub_1_2_2.jpg) center center no-repeat;
    --sub-mv-1-right-opacity: 0.72;
    --sub-mv-1-text-color: #fff;
    --sub-mv-1-text-padding: 0 5vw;
    --sub-mv-1-text-mixblend: difference;
    --sub-mv-1-text-left-padding: 5vw 60px 0 5vw;
    --sub-mv-1-text-right-padding: 5vw 5vw 0 60px;
    --sub-mv-1-text-h1-size: 3.25rem;
    --sub-mv-1-text-h1-weight: 700;
    --sub-mv-1-text-h1-spacing: 3px;
    --sub-mv-1-text-h2-size: 1.125rem;
    --sub-mv-1-text-h2-weight: 200;
    --sub-mv-1-text-h2-spacing: 1px;
    --sub-mv-1-text-h3-size: 2.5rem;
    --sub-mv-1-text-h3-weight: 300;
    --sub-mv-1-text-h3-spacing: 1px;
    --sub-mv-1-text-h3-marginTop: 41px;
    --sub-mv-1-bottom-wrap-padding: 60px 5vw;
    --sub-mv-1-bottom-text-size: 1.875rem;
    --sub-mv-1-bottom-text-weight: 100;
    --sub-mv-1-bottom-text-color: #fff;
    --sub-mv-1-bottom-text-lineHeight: 1.2;
    --sub-mv-1-effect-size: 11.5625rem;
    --sub-mv-1-effect-pos-bottom: 90px;

    --sub-mv-2-wrap-width: 85%;
    --sub-mv-2-wrap-margin: 14vh auto 0 auto;
    --sub-mv-2-h1-size: 2.875rem;
    --sub-mv-2-h1-weight: 700;
    --sub-mv-2-h1-marginTop: 4px;
    --sub-mv-2-h2-size: 1.125rem;
    --sub-mv-2-h2-weight: 400;
    --sub-mv-2-h2-spacing: 2px;
    --sub-mv-2-h3-size: 1.75rem;
    --sub-mv-2-h3-weight: 300;
    --sub-mv-2-h3-marginTop: 36px;
    --sub-mv-2-p-size: 1.75rem;
    --sub-mv-2-p-weight: 700;
    --sub-mv-2-p-color: #dfdfdf;
    --sub-mv-2-list-wrap-marginTop: 51px;
    --sub-mv-2-list-gap: 80px;
    --sub-mv-2-list-contents-width: 33.33%;
    --sub-mv-2-list-contents-img-size: 300px;
    --sub-mv-2-list-contents-1-bg: url(../img/sub_1_2_3.jpg) center center no-repeat;
    --sub-mv-2-list-contents-2-bg: url(../img/sub_1_2_4.jpg) center center no-repeat;
    --sub-mv-2-list-contents-3-bg: url(../img/sub_1_2_5.jpg) center center no-repeat;

    --sub-mv-3-wrap-marginTop: 14vh;
    --sub-mv-3-wrap-height: 700px;
    --sub-mv-3-wrap-bg: url(../img/sub_1_2_6.jpg) center center no-repeat;
    --sub-mv-3-wrap-screen-color: #fff;
    --sub-mv-3-wrap-screen-opacity: 0.7;
    --sub-mv-3-wrap-h1-size: 5rem;
    --sub-mv-3-wrap-h1-spacing: 0.625rem;
    --sub-mv-3-wrap-p-size: 2.375rem;
    --sub-mv-3-wrap-p-marginTop: 20px;

    /* History */
    --sub-history-wrap-width: 90%;

    --sub-history-title-paddingLeft: 7.5%;
    --sub-history-title-h1-size: clamp(1.5rem, 2.5vw, 4rem);
    --sub-history-title-h1-weight: 300;
    --sub-history-title-h1-marginTop: 8px;
    --sub-history-title-h2-size: clamp(1.0625rem, 1.3vw, 1.875rem);
    --sub-history-title-h2-weight: 700;
    --sub-history-title-h2-spacing: 3px;
    --sub-history-title-h2-color: #cecece;

    --sub-history-list-h2-space: 110px;
    --sub-history-list-bg-width: 80%;
    --sub-history-list-bg-bgColor: #f9f9f9;
    --sub-history-list-paddingLeft: 7.5%;
    --sub-history-list-h1-width: 60%;
    --sub-history-list-h1-size: 1.625rem;
    --sub-history-list-h1-spacing: 4px;
    --sub-history-list-h1-color: var(--signature-color);
    --sub-history-list-h1-border: 1px solid #d5d5d5;
    --sub-history-list-h1-padding: 14px;
    --sub-history-list-frame-marginTop: 40px;
    --sub-history-list-frame-detail-width: 60%;
    --sub-history-list-frame-detail-title: 26.5625rem;
    --sub-history-list-frame-detail-h2-size: 1.75rem;
    --sub-history-list-frame-detail-h2-weight: 300;
    --sub-history-list-frame-detail-contents-gap: 12px;
    --sub-history-list-frame-detail-contents-marginTop: 14px;
    --sub-history-list-frame-detail-contents-title-width: 5.75rem;
    --sub-history-list-frame-detail-contents-title-size: clamp(1rem, 1vw, 1.25rem);
    --sub-history-list-frame-detail-contents-title-weight: 500;
    --sub-history-list-frame-detail-contents-title-color: var(--signature-color);
    --sub-history-list-frame-detail-contents-title-paddingLeft: 13px;
    --sub-history-list-frame-detail-contents-bullet-size: 0.5rem;
    --sub-history-list-frame-detail-contents-bullet-color: 2px solid var(--signature-color);
    --sub-history-list-frame-detail-contents-info-size: clamp(1rem, 1vw, 1.25rem);
    --sub-history-list-frame-detail-contents-info-weight: 400;
    --sub-history-list-frame-detail-icon-wrap-size: 7.5rem;
    --sub-history-list-frame-detail-icon-wrap-bgColor: var(--signature-color);
    --sub-history-list-frame-detail-icon-wrap-marginTop: 110px;
    --sub-history-list-frame-detail-icon-color: #fff;
    --sub-history-list-frame-detail-icon-start-size: 2rem;
    --sub-history-list-frame-detail-icon-growth-size: 2rem;
    --sub-history-list-frame-detail-icon-leaf-size: 2.75rem;
    --sub-history-list-frame-detail-img-width: 40%;
    --sub-history-list-frame-detail-img-height: 17.1875rem;
    --sub-history-list-frame-detail-img-start: url(../img/sub_1_3_1.jpg) center center no-repeat;
    --sub-history-list-frame-detail-img-growth: url(../img/sub_1_3_2.jpg) center center no-repeat;
    --sub-history-list-frame-detail-img-leaf: url(../img/sub_1_3_3.jpg) center center no-repeat;

    --sub-history-list-growth-wrap-space: 250px;

    /* CI */
    --sub-ci-wrap-width: 85%;

    --sub-ci-title-span-marginTop: 5px;
    --sub-ci-title-height: 6.75rem;
    --sub-ci-title-logo-width: 9.6875rem;
    --sub-ci-title-logo-url: url(../img/sub_1_4_1.svg) center center no-repeat;

    --sub-ci-title-h2-size: clamp(1.375rem, 2vw, 1.625rem);
    --sub-ci-title-h2-weight: 800;
    --sub-ci-title-h2-width: 7.5rem;

    --sub-ci-common-info-width: calc(100% - var(--sub-ci-title-h2-width));

    --sub-ci-h1-size: 3.125rem;
    --sub-ci-h1-weight: 300;
    --sub-ci-h1-paddingLeft: 30px;

    --sub-ci-p-size: clamp(1.125rem, 1vw, 1.5rem);
    --sub-ci-p-weight: 400;
    --sub-ci-p-border: 1px solid #dcdcdc;
    --sub-ci-p-paddingLeft: 50px;

    --sub-ci-slogan-wrap-height: 16.125rem;
    --sub-ci-slogan-wrap-marginTop: clamp(7.0625rem, 11vw, 14.6875rem);
    --sub-ci-slogan-text-width: 30.75rem;
    --sub-ci-slogan-text-paddingLeft: 43px;
    --sub-ci-slogan-text-border: 1px solid #dcdcdc;
    --sub-ci-slogan-img-width: 31.25rem;
    --sub-ci-slogan-frame-width: calc(100% - var(--sub-ci-slogan-img-width));

    --sub-ci-identi-wrap-marginTop: 145px;
    --sub-ci-identi-list-wrap-width: calc(100% - 120px);
    --sub-ci-identi-list-wrap-marginTop: 76px;
    --sub-ci-identi-list-wrap-marginLeft: 120px;
    --sub-ci-identi-list-contents-width: 22%;
    --sub-ci-identi-list-contents-height: clamp(8rem, 8vw, 11.9375rem);
    --sub-ci-identi-list-contents-img-width: 50%;
    --sub-ci-identi-list-contents-1-border: 1px solid #dcdcdc;
    --sub-ci-identi-list-contents-1-bgColor: #fff;
    --sub-ci-identi-list-contents-2-border: 1px solid #dcdcdc;
    --sub-ci-identi-list-contents-2-bg: url(../img/sub_1_4_4.svg) left top repeat;
    --sub-ci-identi-list-contents-3-bgColor: #313131;
    --sub-ci-identi-list-contents-4-bg: url(../img/sub_1_4_5.svg) left top repeat;
    --sub-ci-identi-btn-wrap-marginTop: 62px;
    --sub-ci-identi-btn-wrap-gap: clamp(1.125rem, 1.4vw, 2.25rem);
    --sub-ci-identi-btn-wrap-width: 10.375rem;
    --sub-ci-identi-btn-wrap-height: 3.75rem;
    --sub-ci-identi-btn-wrap-border: 1px solid #dcdcdc;
    --sub-ci-identi-btn-wrap-borderRadius: 0.5625rem;
    --sub-ci-identi-btn-hover-wrap-color: var(--signature-color);
    --sub-ci-identi-btn-hover-wrap-border: 1px solid var(--signature-color);
    --sub-ci-identi-btn-font-size: clamp(1rem, 1vw, 1.125rem);
    --sub-ci-identi-btn-font-weight: 700;
    --sub-ci-identi-btn-font-hover-color: #fff;

    --sub-ci-color-wrap-marginTop: 169px;
    --sub-ci-color-wrap-paddingBottom: 114px;
    --sub-ci-color-contents-wrap-height: 22.5rem;
    --sub-ci-color-contents-wrap-marginTop: 76px;
    --sub-ci-color-contents-pantone-wrap-width: 45%;
    --sub-ci-color-contents-pantone-left-width: 75%;
    --sub-ci-color-contents-pantone-left-padding: 47px 0 47px 47px;
    --sub-ci-color-contents-pantone-left-bgColor: var(--signature-color);
    --sub-ci-color-contents-pantone-left-h3-size: clamp(1.5rem, 2vw, 1.875rem);
    --sub-ci-color-contents-pantone-left-h3-color: #fff;
    --sub-ci-color-contents-pantone-left-p-size: clamp(1rem, 1vw, 1.25rem);
    --sub-ci-color-contents-pantone-left-p-color: #fff;
    --sub-ci-color-contents-pantone-left-info-title-width: clamp(5.5rem, 5vw, 7.25rem);
    --sub-ci-color-contents-pantone-left-info-title-weight: 600;
    --sub-ci-color-contents-pantone-left-info-hspace: 18px;
    --sub-ci-color-contents-pantone-left-info-vspace: 4px;
    --sub-ci-color-contents-pantone-right-wrap-width: 25%;
    --sub-ci-color-contents-pantone-right-font-size: clamp(1rem, 1vw, 1.25rem);
    --sub-ci-color-contents-pantone-right-font-weight: 400;
    --sub-ci-color-contents-pantone-right-font-color: #fff;
    --sub-ci-color-contents-pantone-right-info-count: 6;
    --sub-ci-color-contents-pantone-right-info-height: calc(100% / var(--sub-ci-color-contents-pantone-right-info-count));
    --sub-ci-color-contents-pantone-right-info-paddingRight: 21px;
    --sub-ci-color-contents-pantone-right-info-1-bg: rgba(0, 160, 174, 1);
    --sub-ci-color-contents-pantone-right-info-2-bg: rgba(0, 160, 174, 0.8);
    --sub-ci-color-contents-pantone-right-info-3-bg: rgba(0, 160, 174, 0.6);
    --sub-ci-color-contents-pantone-right-info-4-bg: rgba(0, 160, 174, 0.4);
    --sub-ci-color-contents-pantone-right-info-5-bg: rgba(0, 160, 174, 0.2);
    --sub-ci-color-contents-pantone-right-info-6-bg: rgba(0, 160, 174, 0);
    --sub-ci-color-contents-pantone-right-info-6-border-color: 1px solid var(--signature-color);
    --sub-ci-color-contents-pantone-right-info-6-text-color: var(--signature-color);

    --sub-ci-gradient-wrap-width: 50%;
    --sub-ci-gradient-wrap-paddingLeft: 5%;
    --sub-ci-gradient-wrap-border: 1px solid #dcdcdc;
    --sub-ci-gradient-top-height: 180px;
    --sub-ci-gradient-top-img-size: 236px;
    --sub-ci-gradient-top-img-border: 1px solid #dcdcdc;
    --sub-ci-gradient-top-bar-wrap-width: calc(100% - var(--sub-ci-gradient-top-img-size));
    --sub-ci-gradient-top-bar-wrap-gap: 18px;
    --sub-ci-gradient-top-bar-width: 70%;
    --sub-ci-gradient-top-bar-height: 50px;
    --sub-ci-gradient-top-bar-color: linear-gradient(to left, var(--signature-color), transparent);
    --sub-ci-gradient-top-text-wrap-width: 70%;
    --sub-ci-gradient-top-text-paddingTop: 10px;
    --sub-ci-gradient-top-text-font-weight: 500;
    --sub-ci-gradient-top-text-arrow: url(../img/icon_arrow_4.svg) top center no-repeat;
    --sub-ci-gradient-top-text-1-pos: 0;
    --sub-ci-gradient-top-text-2-pos: 59%;
    --sub-ci-gradient-top-text-3-pos: 94%;
    --sub-ci-gradient-bottom-wrap-height: 54px;
    --sub-ci-gradient-bottom-wrap-gap: 70px;
    --sub-ci-gradient-bottom-h3-size: clamp(1.125rem, 1vw, 1.25rem);
    --sub-ci-gradient-bottom-h3-weight: 400;
    --sub-ci-gradient-bottom-h4-size: clamp(1.875rem, 2vw, 2.25rem);
    --sub-ci-gradient-bottom-h4-weight: 700;
    --sub-ci-gradient-bottom-info-marginTop: 9px;
    --sub-ci-gradient-bottom-info-h3-size: clamp(1rem, 1vw, 1.125rem);
    --sub-ci-gradient-bottom-info-h3-weight: 600;
    --sub-ci-gradient-bottom-info-h3-width: 7.1875rem;
    --sub-ci-gradient-bottom-info-h3-paddingLeft: 33px;
    --sub-ci-gradient-bottom-info-icon-size: 1.25rem;
    --sub-ci-gradient-bottom-info-icon-top-color: #fff;
    --sub-ci-gradient-bottom-info-icon-top-border: 1px solid #dcdcdc;
    --sub-ci-gradient-bottom-info-icon-bottom-color: var(--signature-color);
    --sub-ci-gradient-bottom-info-icon-bottom-text-size: clamp(1rem, 1vw, 1.125rem);
    --sub-ci-gradient-bottom-info-icon-bottom-text-weight: 600;
    --sub-ci-gradient-bottom-info-icon-bottom-text-space: 10px;
    --sub-ci-gradient-bottom-info-icon-bottom-text-baseWeight: 300;

    /* Location */
    --sub-location-wrap-width: 85%;
    --sub-location-wrap-paddingBottom: 114px;

    --sub-location-title-size: clamp(1.6875rem, 8vw, 14.375rem);
    --sub-location-title-weight: 700;
    --sub-location-title-color: #b5b5b5;
    --sub-location-sub-title-size: clamp(1.25rem, 3vw, 3.4375rem);
    --sub-location-sub-title-weight: 500;

    --sub-location-list-wrap-gap: 150px;
    --sub-location-list-wrap-marginTop: clamp(7.5rem, 9vw, 13.25rem);
    --sub-location-list-frame-width: calc((100% - var(--sub-location-list-wrap-gap)) / 2);
    --sub-location-list-frame-height: 30.9375rem;
    --sub-location-list-frame-top-height: 28.125rem;
    --sub-location-list-frame-top-h3-size: clamp(1.0625rem, 1vw, 1.5rem);
    --sub-location-list-frame-top-h3-weight: 700;
    --sub-location-list-frame-top-h3-height: 2.875rem;
    --sub-location-list-frame-top-bar-pos: -2px;
    --sub-location-list-frame-top-bar-width: 9.0625rem;
    --sub-location-list-frame-top-bar-weight: 4px;
    --sub-location-list-frame-top-bar-color: var(--signature-color);
    --sub-location-list-frame-top-map-wrap-height: calc(100% - var(--sub-location-list-frame-top-h3-height));
    --sub-location-list-frame-text-height: 45px;
    --sub-location-list-frame-text-size: clamp(1rem, 1.5vw, 20px);
    --sub-location-list-frame-text-weight: 400;
    --sub-location-list-frame-text-marginTop: 10px;
    --sub-location-list-frame-empty-logo-width: 11.3125rem;
    --sub-location-list-frame-empty-icon-marginTop: 2rem;
    --sub-location-list-frame-empty-icon-size: 2.625rem;
    --sub-location-list-frame-empty-icon-color: #b7b7b7;
    --sub-location-list-frame-empty-text-size: 1.0625rem;
    --sub-location-list-frame-empty-text-spacing: 0.25rem;
    --sub-location-list-frame-empty-text-marginTop: 10px;
    --sub-location-list-frame-empty-bgColor: #f9f9f9;

    /* Business */
    --sub-business-wrap-width: 85%;
    --sub-business-wrap-paddingBottom: 190px;

    --sub-business-title-wrap-width: 25.9375rem;
    --sub-business-title-wrap-paddingTop: 26px;
    --sub-business-title-wrap-border: 1px solid var(--signature-color);
    --sub-business-title-size: clamp(1.25rem, 1vw, 1.625rem);
    --sub-business-title-weight: 300;
    --sub-business-title-color: #8f8f8f;
    --sub-business-title-marginTop: 4px;
    --sub-business-subtitle-size: clamp(2.5rem, 3vw, 3.75rem);
    --sub-business-subtitle-weight: 600;
    --sub-business-subtitle-marginTop: 36px;
    --sub-business-img-home-width: calc(100% - var(--sub-business-title-wrap-width) - 340px);
    --sub-business-img-car-width: calc(100% - var(--sub-business-title-wrap-width) - 70px);

    /* Product */
    --sub-product-wrap-width: 85%;
    --sub-product-wrap-paddingBottom: 190px;

    --sub-product-title-top-wrap-height: 3.75rem;
    --sub-product-title-top-wrap-bgImg: url(../img/sub_3_title_cover.gif) left top repeat;
    --sub-product-title-bottom-wrap-height: 4rem;
    --sub-product-title-bottom-wrap-bgImg: url(../img/sub_3_1_title_cover.jpg) center center no-repeat;
    --sub-product-title-bottom-wrap-marginTop: 46px;
    --sub-product-title-h1-size: clamp(2rem, 2vw, 2.75rem);
    --sub-product-title-h1-weight: 200;
    --sub-product-title-h1-backBg: #fff;
    --sub-product-title-h1-padding: 0 3.125rem;
    --sub-product-title-h2-size: clamp(1.25rem, 2vw, 1.5625rem);

    /* Finance */
    --sub-finance-wrap-width: 85%;
    --sub-finance-wrap-paddingBottom: 190px;

    /* Announcement&Technology */
    --sub-commonboard-wrap-width: 85%;
    --sub-commonboard-wrap-paddingBottom: 190px;

    /* Quality */
    --sub-quality-video-logo-size: clamp(9.25rem, 13vw, 18.75rem);
    --sub-quality-video-logo-pos: clamp(2.375rem, 4vw, 6.125rem);
    --sub-quality-video-logo-blend: difference;
    --sub-quality-video-height: clamp(31.25rem, 36vw, 56.25rem);
    --sub-quality-video-marginTop: 156px;
    --sub-quality-video-screen: rgba(0, 0, 0, 0);
    --sub-quality-video-poster: url(../img/poster_quality.jpg) center center no-repeat;
    --sub-quality-video-scroll-text-height: clamp(3.125rem, 7vw, 10.3125rem);
    --sub-quality-video-scroll-text-init-pos: -100%;
    --sub-quality-video-scroll-text-size: clamp(3.25rem, 8vw, 11.125rem);
    --sub-quality-video-scroll-text-weight: 500;
    --sub-quality-video-scroll-text-color: #fff;
    --sub-quality-video-scroll-text-spacing: 1px;

    --sub-quality-title-h1-size: clamp(1rem, 1vw, 1.5rem);
    --sub-quality-title-h1-weight: 300;
    --sub-quality-title-h1-spacing: 2px;
    --sub-quality-title-h2-size: clamp(1.875rem, 2vw, 3.125rem);
    --sub-quality-title-h2-weight: 600;
    --sub-quality-title-h2-marginTop: 60px;
    --sub-quality-title-h2-paddingTop: 25px;
    --sub-quality-title-line-width: 170px;
    --sub-quality-title-line-height: 1px;
    --sub-quality-title-line-color: var(--signature-color);

    --sub-quality-contents-wrap-width: 85%;
    --sub-quality-contents-wrap-marginTop: 120px;
    --sub-quality-contents-2-wrap-paddingBottom: 114px;
    --sub-quality-contents-title-width: 9.875rem;
    --sub-quality-contents-title-h1-size: clamp(1.25rem, 1vw, 1.5rem);
    --sub-quality-contents-title-h1-weight: 300;
    --sub-quality-contents-title-h1-spacing: 2px;
    --sub-quality-contents-title-h2-size: clamp(2.125rem, 2vw, 2.625rem);
    --sub-quality-contents-title-h2-weight: 700;
    --sub-quality-contents-title-h2-marginTop: 3px;
    --sub-quality-contents-info-wrap-width: calc(100% - 12vw - var(--sub-quality-contents-title-width));
    --sub-quality-contents-info-text-size: clamp(1rem, 1vw, 1.25rem);
    --sub-quality-contents-info-text-weight: 400;
    --sub-quality-contents-info-text-marginTop: 24px;
    --sub-quality-contents-info-text-paddingLeft: 21px;
    --sub-quality-contents-info-text-border: 1px solid #dcdcdc;
    --sub-quality-contents-info-text-span-marginTop: 4px;
    --sub-quality-contents-info-text-span-bigMargin: 20px;
    --sub-quality-contents-info-img-height: 220px;
    --sub-quality-contents-info-img-1-bg: url(../img/sub_5_2_1.jpg) center center no-repeat;
    --sub-quality-contents-info-img-2-bg: url(../img/sub_5_2_2.jpg) center center no-repeat;

    /* Q&A */
    --sub-quality-video-wrap-opacity: 0.1;

    --sub-quality-tab-menu-wrap-width: 45.6875rem;
    --sub-quality-tab-menu-wrap-height: 10.625rem;
    --sub-quality-tab-menu-wrap-gap: 17px;
    --sub-quality-tab-menu-contents-width: 25%;
    --sub-quality-tab-menu-contents-bgColor: #efefef;
    --sub-quality-tab-menu-contents-hoverColor: var(--signature-color);
    --sub-quality-tab-menu-contents-icon-size: clamp(2rem, 2vw, 2.375rem);
    --sub-quality-tab-menu-contents-icon-color: #afafaf;
    --sub-quality-tab-menu-contents-icon-hoverColor: #fff;

    --sub-quality-title-warp-height: 15.625rem;
    --sub-quality-title-warp-marginTop: 97px;
    --sub-quality-title-warp-marginBottom: 190px;
    --sub-quality-title-h1-size: clamp(1.125rem, 1vw, 1.25rem);
    --sub-quality-title-h1-weight: 600;
    --sub-quality-title-h1-marginTop: 12px;
    --sub-quality-title-h1-hoverColor: #fff;
    --sub-quality-title-wrap-marginTop: 90px;
    --sub-quality-title-wrap-init-width: 50%;
    --sub-quality-title-wrap-base-width: 100%;
    --sub-quality-title-img-screen-color: #000;
    --sub-quality-title-img-screen-opacity: 0.6;
    --sub-quality-title-img-product: url(../img/sub_5_3_1_1_bridge.jpg) center center no-repeat;
    --sub-quality-title-img-gear: url(../img/sub_5_3_1_2_bridge.jpg) center center no-repeat;
    --sub-quality-title-img-note: url(../img/sub_5_3_1_3_bridge.jpg) center center no-repeat;
    --sub-quality-title-img-person: url(../img/sub_5_3_1_4_bridge.jpg) center -89px no-repeat;
    --sub-quality-title-sub-h1-size: clamp(2.0625rem, 2vw, 2.5rem);
    --sub-quality-title-sub-h1-weight: 800;
    --sub-quality-title-sub-h1-color: #fff;
    --sub-quality-title-sub-h1-frameSize: 21.875rem;
    --sub-quality-title-sub-h1-background: #13575d;
    --sub-quality-title-sub-h2-size: clamp(1.25rem, 1vw, 1.5rem);
    --sub-quality-title-sub-h2-weight: 300;
    --sub-quality-title-sub-h2-color: #fff;
    --sub-quality-title-sub-h2-pos-left: 48%;
    --sub-quality-title-sub-h2-pos-top: 152px;

    /* Visit */
    --sub-visit-title-h1-size: clamp(1rem, 1vw, 1.5rem);
    --sub-visit-title-h1-weight: 300;
    --sub-visit-title-h1-color: #fff;
    --sub-visit-title-h1-spacing: 2px;
    --sub-visit-title-h2-size: 2.625rem;
    --sub-visit-title-h2-weight: 600;
    --sub-visit-title-h2-color: #fff;
    --sub-visit-title-h2-marginTop: 60px;
    --sub-visit-title-h2-paddingTop: 25px;
    --sub-visit-title-line-width: 170px;
    --sub-visit-title-line-height: 1px;
    --sub-visit-title-line-color: var(--signature-color);
    --sub-visit-tab-bg: url(../img/sub_5_4_bg.jpg) center center no-repeat;

    /* Formail */
    --sub-formail-visit-marginTop: 150px;
    --sub-formail-visit-padding: 90px;
    --sub-formail-visit-inputTextarea-placeholder-color: #fff;
    --sub-formail-visit-btn-input-font-color: #000;
    --sub-formail-visit-btn-input-font-bgColor: #fff;
    --sub-formail-visit-alert-font-color: #fff;

    --sub-formail-wrap-width: 731px;

    --sub-formail-contents-frame-marginTop: 64px;
    --sub-formail-contents-h1-size: clamp(1.375rem, 1vw, 1.625rem);
    --sub-formail-contents-h1-border: 3px solid var(--signature-color);
    --sub-formail-contents-h1-space: 15px;
    --sub-formail-contents-h1-color: #fff;
    --sub-formail-contents-h1-paddingLeft: 35px;
    --sub-formail-contents-h1-backgroundURL: url(../img/sub_5_3_bullet.svg) left 2px no-repeat;
    --sub-formail-contents-h1-backgroundSize: 24px;

    --sub-formail-contents-inputTextarea-size: clamp(1rem, 1vw, 1.125rem);
    --sub-formail-contents-inputTextarea-weight: 300;
    --sub-formail-contents-inputTextarea-color: #000;
    --sub-formail-contents-inputTextarea-placeholder-weight: 400;

    --sub-formail-contents-input-border: 1px solid #dcdcdc;
    --sub-formail-contents-input-border-focus: 1px solid var(--signature-color);
    --sub-formail-contents-input-padding: 14px;
    --sub-formail-contents-input-marginTop: 43px;
    --sub-formail-contents-input-bg: transparent;

    --sub-formail-contents-textarea-marginTop: 43px;
    --sub-formail-contents-textarea-padding: 14px;
    --sub-formail-contents-textarea-border: 1px solid #dcdcdc;
    --sub-formail-contents-textarea-border-focus: 1px solid var(--signature-color);
    --sub-formail-contents-textarea-bg: transparent;

    --sub-formail-contents-btn-wrap-gap: 35px;
    --sub-formail-contents-btn-input-font-size: clamp(1.125rem, 1vw, 1.25rem);
    --sub-formail-contents-btn-input-font-weight: 700;
    --sub-formail-contents-btn-input-font-color: #fff;
    --sub-formail-contents-btn-input-font-padding: 21px 28px;
    --sub-formail-contents-btn-input-font-bgColor: #282828;
    --sub-formail-contents-btn-input-hover-bgColor: var(--signature-color);
    --sub-formail-contents-btn-input-hover-textColor: #fff;

    --sub-formail-contents-alert-pos-right: 14px;
    --sub-formail-contents-alert-pos-bottom: -27px;
    --sub-formail-contents-alert-font-size: 0.875rem;
    --sub-formail-contents-alert-font-weight: 500;
    --sub-formail-contents-alert-font-color: #e40606;

    --sub-formail-contents-calendar-pos-right: 12px;
    --sub-formail-contents-calendar-pos-bottom: 16px;

    /* #################################### Footer #################################### */
    --footer-bgColor: #fff;
    --footer-info-wrap-gap: 3.125rem;
    --footer-info-logo-size: 8.5rem;
    --footer-info-font-size: 0.875rem;
    --footer-info-font-weight: 500;
    --footer-info-title-size: 1.125rem;
    --footer-info-title-weight: 700;
    --footer-info-menu-gap: 1.125rem;
    --footer-info-menu-padding: 0.8125rem 1.375rem;
    --footer-info-menu-bgColor: #fff;
    --footer-info-menu-border: 1px solid var(--base-color-lightGrey);
    --footer-info-menu-pointBg-pos: -0.6875rem;
    --footer-info-menu-pointBg-size: 1.875rem;
    --footer-info-menu-pointBg-bgColor: #fff;
    --footer-info-menu-circle-pos: -0.25rem;
    --footer-info-menu-circle-size: 0.875rem;
    --footer-info-menu-circle-border: 4px solid var(--signature-color);
    --footer-info-menu-hover-border: 1px solid transparent;
    --footer-info-menu-hover-text-color: #fff;
    --footer-info-menu-font-weight: 700;
    --footer-info-menu-font-color: #3833838;
    --footer-info-company-margin: 1.875rem;
    --footer-info-detail-margin: 0.625rem;
    --footer-info-copy-margin: 1.875rem;
    --footer-info-copy-weight: 700;
    --footer-gnb-wrap-gap: 3.75rem;
    --footer-gnb-wrap-width: 6.875rem;
    --footer-gnb-1depth-padding: 0.9375rem;
    --footer-gnb-1depth-border: 1px solid var(--base-color-lightGrey);
    --footer-gnb-1depth-font-size: 1.25rem;
    --footer-gnb-1depth-font-weight: 700;
    --footer-gnb-1depth-hover-border: 1px solid var(--signature-color);
    --footer-gnb-2depth-wrap-margin: 1.875rem;
    --footer-gnb-2depth-menu-margin: 0.625rem;
    --footer-gnb-2depth-font-size: 0.9375rem;
    --footer-gnb-2depth-font-weight: 400;
}

/* **************************************************************
    ### Responsive Area
************************************************************** */
@media all and (max-width: 1840px) {
    :root {
        /* #################################### Main #################################### */
        --main-visual-bridge-text-title-size: clamp(2.5rem, 5vw, 4.375rem);
        --main-visual-bridge-circle-fill-size: 35vw;
        --main-visual-bridge-text-pos: auto;
    }
}

@media all and (max-width: 1600px) {
    :root {
        /* #################################### History #################################### */
        --sub-history-list-frame-detail-width: 100%;
        --sub-history-list-frame-detail-list-width: calc(100% - var(--sub-history-list-frame-detail-title));
        --sub-history-list-frame-detail-img-marginLeft: 26%;
        --sub-history-list-frame-detail-img-marginTop: 90px;
        --sub-history-list-frame-detail-img-width: calc(100% - var(--sub-history-list-frame-detail-img-marginLeft));
        --sub-history-list-frame-detail-img-height: 19.6875rem;

        /* #################################### CI #################################### */
        --sub-ci-identi-list-contents-width: 48%;
        --sub-ci-identi-list-contents-height: clamp(7.5625rem, 15vw, 13.0625rem);

        /* #################################### Footer #################################### */
        --footer-wrap-gap: 56px;
        --footer-gnb-wrap-gap: 90px;
        --footer-info-wrap-width: calc(100% - var(--footer-info-logo-size) - var(--footer-info-wrap-gap));
        --footer-logo-wrap-paddingTop: 56px;
        --footer-logo-wrap-border: 1px solid #e2e2e2;
        --footer-info-copy-size: 1.25rem;
    }
}

@media all and (max-width: 1580px) {
    :root {
        /* #################################### CI #################################### */
        --sub-ci-color-contents-wrap-height: auto;
        --sub-ci-color-contents-pantone-wrap-width: 100%;
        --sub-ci-gradient-wrap-width: 100%;
        --sub-ci-gradient-wrap-border: none;
        --sub-ci-color-contents-common-wrap-height: 18.75rem;
        --sub-ci-gradient-wrap-paddingLeft: 0;
        --sub-ci-gradient-wrap-marginTop: 55px;
        --sub-ci-gradient-top-bar-width: 90%;
        --sub-ci-gradient-top-text-wrap-width: 90%;
    }
}

@media all and (max-width: 1526px) {
    :root {
        /* #################################### Full GNB #################################### */
        --header-gnb-full-padding-common: 7.5%;
        --header-gnb-full-close-top-pos: 58px;
        --header-gnb-full-menu-gap: 3.5rem;
        --header-gnb-full-middle-width: 16.25rem;
        --header-gnb-full-middle-height: auto;
        --header-gnb-full-middle-pos-bottom: 80px;
        --header-gnb-full-middle-bgColor: rgba(0, 0, 0, 0.5);
        --header-gnb-full-middle-padding: 18px 32px;
        --header-gnb-full-middle-width: 85%;
        --header-gnb-full-logo-size: 11.875rem;
        --header-gnb-full-logo-pos-top: 100px;
        --header-gnb-full-menu-width: 85%;
        --header-gnb-full-menu-height: 58%;
        --header-gnb-full-menu-max-height: calc(100% - var(--header-gnb-full-logo-pos-top) - 47px - var(--header-gnb-full-middle-pos-bottom) - 55px - 100px);
        --header-gnb-full-menu-padding: 4.5rem;
        --header-gnb-full-menu-last-padding: 72px;
        --header-gnb-full-menu-background: rgba(0, 0, 0, 0.3);
        --header-gnb-full-menu-borderRadius: 20px;
        --header-gnb-full-menu-frame-pos: 0;
    }
}

@media all and (max-width: 1480px) {
    :root {
        /* #################################### Quality #################################### */
        --sub-quality-contents-title-width: 100%;
        --sub-quality-contents-info-wrap-width: 90%;
        --sub-qu