/*------------------------------------------------------
· Innoteco Temporary Page Ver 1.0
· Type : custom.css
· Author : Albatrosss Pictures Kim Hyun Gyu
· Data : 2005.05.14
· Copyright @ 2005 Innoteco Temporary Page all rights reserved
---------------------------------------------------------
· SUMMARY:
0) Responsive Area
1) Import Font
2) Basic Set
3) Header
4) Quick Btn
5) Aside
6) GNB
7) Footer
8) Intro
9) Main
10) Sub
---------------------------------------------------------*/

@charset "utf-8";

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

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

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

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

    --pointer-basic-color: var(--base-color-white);
    --pointer-basic-size: 12px;

    --gradient-basic-color: linear-gradient(180deg, transparent, #000);
    --gradient-basic-color-reverse: linear-gradient(180deg, #000, transparent);
    --gradient-active-color: linear-gradient(180deg, #000, transparent, var(--signature-color), transparent);



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

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

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

    --header-side-hambuger-size: calc(var(--header-side-wrap-size) / 2.5);
    --header-side-hambuger-color: var(--base-color-white);
    --header-side-hambuger-pointColor: var(--signature-color);
    --header-side-hambuger-roll-height: clamp(.125rem, .1172vw, .25rem);



    /* #################################### 04.Quick Btn #################################### */
    --quick-btn-1depth-bgColor: rgba(0, 0, 0, .75);



    /* #################################### 05.Aside #################################### */
    --aside-height: 0;
    --aside-height-quick: clamp(200px, 11.7188vw, 28.125rem);

    --aside-blind-blur: blur(10px);
    --aside-blind-bgColor: rgba(0, 0, 0, 0.55);

    --aside-close-size: 1px;
    --aside-close-center-size: 9%;

    --aside-gnb-pc-frame-width: 80%;
    --aside-gnb-pc-frame-height: 75%;
    --aside-gnb-pc-menu-frame-space: calc(var(--aside-gnb-pc-menu-icon-size) / 2);
    --aside-gnb-pc-close-size: 6.25rem;
    --aside-gnb-pc-title-height: 7.1875rem;
    --aside-gnb-pc-title-size: 5rem;
    --aside-gnb-pc-menu-height: clamp(20px, 11.7188vw, 28.125rem);
    --aside-gnb-pc-menu-list-space-common: clamp(20px, 2.1094vw, 4.6875rem);
    --aside-gnb-pc-menu-list-space-min: clamp(20px, 1.1719vw, 2.8125rem);
    --aside-gnb-pc-menu-list-border-color: #707070;
    --aside-gnb-pc-menu-list-count: 6;
    --aside-gnb-pc-menu-list-gap: 5%;
    --aside-gnb-pc-menu-list-width: calc((100% - (var(--aside-gnb-pc-menu-list-gap) * (var(--aside-gnb-pc-menu-list-count) - 1))) / var(--aside-gnb-pc-menu-list-count));
    --aside-gnb-pc-menu-icon-pos-left: -6px;
    --aside-gnb-pc-menu-icon-size: 15px;
    --aside-gnb-pc-menu-line-pos-top: 10%;
    --aside-gnb-pc-menu-line-width: 1px;
    --aside-gnb-pc-menu-line-bg-height: 100%;
    --aside-gnb-pc-menu-line-roll-height: 0;
    --aside-gnb-pc-menu-1depth-font-size: clamp(20px, 1.25vw, 3rem);
    --aside-gnb-pc-menu-1depth-font-weight: 600;
    --aside-gnb-pc-menu-2depth-wrap-marginTop: clamp(20px, 2.6563vw, 6.375rem);
    --aside-gnb-pc-menu-2depth-marginTop: clamp(10px, .5859vw, 1.375rem);
    --aside-gnb-pc-menu-2depth-font-size: clamp(20px, .7813vw, 2.25rem);
    --aside-gnb-pc-sub-menu-bg: rgba(0, 0, 0, .5);
    --aside-gnb-pc-sub-menu-pos-top: 80%;
    --aside-gnb-pc-sub-menu-space: clamp(8px, .5469vw, 21rem);
    --aside-gnb-pc-sub-menu-size-common: clamp(14px, 2.3438vw, 5.625rem);
    --aside-gnb-pc-sub-menu-icon-home: clamp(14px, .625vw, 1.3125rem);
    --aside-gnb-pc-sub-menu-icon-search: clamp(16px, .7031vw, 1.6875rem);
    --aside-gnb-pc-sub-menu-text-size: clamp(1rem, .7031vw, 1.6875rem);
    --aside-gnb-pc-sub-menu-text-weight: 400;
    --aside-gnb-pc-sub-menu-text-space: 2px;
    --aside-gnb-pc-sub-menu-lang-padding: 0 clamp(26px, 1.4844vw, 3.5625rem);
    --aside-gnb-pc-logo-size: clamp(11.25rem, 9.5703vw, 22.9375rem);
    
    --aside-nation-close-pos: clamp(6.25rem, 6.6406vw, 15.9375rem);
    --aside-nation-close-size: clamp(5.625rem, 4.2969vw, 10.3125rem);
    --aside-nation-close-color: var(--base-color-white);
    --aside-nation-width: clamp(11.875rem, 15.625vw, 37.5rem);
    --aside-nation-height: 50%;
    --aside-nation-bgColor: linear-gradient(180deg, transparent, rgba(228, 49, 42, 0.3), transparent);
    --aside-nation-title-size: clamp(1.25rem, 1.1719vw, 2.8125rem);
    --aside-nation-contents-gap: clamp(30px, 3.125vw, 7.5rem);
    --aside-nation-frame-width: clamp(50px, 3.5938vw, 8.625rem);
    --aside-nation-font-size: clamp(1.125rem, .7813vw, 1.875rem);
    --aside-nation-font-weight: 200;
    --aside-nation-font-margin: clamp(0.25rem, 0.3906vw, .9375rem);
    --aside-nation-nation-gap: clamp(20px, 1.1719vw, 2.8125rem);

    --aside-quick-frame-width: 90%;
    --aside-quick-title-font-size: clamp(20px, 1.1719vw, 2.8125rem);
    --aside-quick-left-space: clamp(20px, 2.0313vw, 4.875rem);
    --aside-quick-left-top-margin: clamp(20px, 1.1719vw, 2.8125rem);
    --aside-quick-left-content-margin: clamp(8px, .4688vw, 1.125rem);
    --aside-quick-left-menu-font-size: clamp(18px, .7813vw, 1.875rem);
    --aside-quick-left-menu-font-weight: 300;
    --aside-quick-left-menu-font-color: #616161;
    --aside-quick-left-menu-icon-dark-size: clamp(20px, .9375vw, 2.25rem);
    --aside-quick-left-menu-icon-light-size: clamp(20px, 1.0156vw, 2.4375rem);
    --aside-quick-left-menu-icon-music-size: clamp(20px, 1.0156vw, 2.4375rem);
    --aside-quick-left-menu-title-music-color: var(--base-color-white);
    --aside-quick-left-menu-title-music-gap: clamp(4px, .3125vw, .75rem);
    --aside-quick-left-menu-roll-color: var(--base-color-white);
    --aside-quick-right-space: clamp(20px, 12.0625rem, 18.125rem);
    --aside-quick-right-close-size: clamp(20px, 3.5156vw, 8.4375rem);
    --aside-quick-right-close-color: #616161;



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



    /* #################################### 07.Footer #################################### */
    --footer-height: clamp(25rem, 23.4375vw, 56.25rem);

    --footer-video-blind: rgba(0, 0, 0, 0.7);

    --footer-section-width: 33.33%;
    --footer-section-padding: clamp(20px, 3.75vw, 9rem);

    --footer-logo-size: 45%;

    --footer-section-01-menu-font-size: clamp(18px, .7813vw, 1.875rem);
    --footer-section-01-menu-margin-top: clamp(10px, .5859vw, 1.375rem);
    --footer-section-01-copyright-font-size: clamp(20px, 1.25vw, 3rem);
    --footer-section-01-copyright-font-weight: 600;

    --footer-section-02-background: #1e1e1e;
    --footer-section-02-title-font-size: clamp(18px, .9375vw, 2.25rem);
    --footer-section-02-title-font-weight: 300;
    --footer-section-02-info-font-size: clamp(14px, .7031vw, 1.6875rem);
    --footer-section-02-info-space: clamp(4px, .3125vw, .75rem);

    --footer-section-03-background: #0e0e0e;
    --footer-section-03-title-font-size: clamp(20px, 1.4063vw, 3.375rem);
    --footer-section-03-title-font-weight: 600;
    --footer-section-03-btn-space: clamp(18px, 1.0156vw, 2.4375rem);
    --footer-section-03-btn-width: 47%;
    --footer-section-03-btn-height: clamp(20px, 2.8125vw, 6.75rem);
    --footer-section-03-btn-border: 1px solid #2d2d2d;
    --footer-section-03-btn-border-roll: 1px solid var(--signature-color);
    --footer-section-03-btn-border-radius: clamp(12px, .5859vw, 1.375rem);
    --footer-section-03-btn-gap: clamp(8px, .5859vw, 1.375rem);
    --footer-section-03-btn-in-size: calc(100% - var(--footer-section-03-btn-gap));
    --footer-section-03-btn-in-blur: blur(10px);
    --footer-section-03-btn-in-border-radius: clamp(6px, .3125vw, .75rem);
    --footer-section-03-btn-text-size: 76%;
    --footer-section-03-btn-text-font-size: clamp(14px, .7031vw, 1.6875rem);
    --footer-section-03-btn-icon-size: clamp(18px, 1.0156vw, 2.4375rem);
    --footer-section-03-btn-icon-color: #7e7e7e;
    --footer-section-03-btn-icon-set-size: clamp(18px, .8203vw, 1.9375rem);
    --footer-section-03-text-font-size: clamp(14px, .6641vw, 1.5625rem);
    --footer-section-03-text-font-weight: 500;
    --footer-section-03-text-font-color: #a7a7a7;



    /* #################################### 08.Intro #################################### */
    --intro-1-text-common-font-size: clamp(1.875rem, 3.5156vw, 8.4375rem);
    --intro-1-text-common-weight: 100;
    --intro-1-text-roll-set-height: clamp(2.75rem, 5.0781vw, 12.1875rem);
    --intro-1-text-import-set-padding: 0 clamp(1.875rem, 3.9063vw, 9.375rem);
    --intro-1-text-import-set-weight: 500;
    --intro-1-text-import-set-line-width: 85%;
    --intro-1-text-import-set-line-height: 1px;

    --intro-2-symbol-size: clamp(7.5rem, 9.375vw, 22.5rem);
    --intro-2-text-margin: clamp(1.875rem, 3.125vw, 7.5rem);
    --intro-2-text-font-size: clamp(1.375rem, 2.2266vw, 5.3125rem);
    --intro-2-text-font-weight: 100;



    /* #################################### 09.Main #################################### */
    --main-common-contents-space: clamp(2.5rem, 14.0625vw, 33.75rem);

    --main-video-frame-blind-height: clamp(9.375rem, 15.625vw, 37.5rem);

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

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

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

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

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

    --main-video-subtitle-pos: 55%;

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

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

    --main-mouse-icon-wrap-pos-gap: clamp(20px, 5.0781vw, 12.1875rem);
    --main-mouse-icon-wrap-pos: calc(var(--main-video-subtitle-pos) + var(--main-mouse-icon-wrap-pos-gap));
    --main-mouse-icon-size: clamp(30px, 1.7578vw, 4.1875rem);
    --main-mouse-icon-pos: calc(100% - var(--main-mouse-icon-size));

    --main-bg-line-size: 1px;
    --main-bg-line-color: #131313;
    --main-acitve-line-height: 30svh;
    
    --main-section-02-wrap-height: 80svh;
    --main-section-02-bg-blind-pos: 15%;
    --main-section-02-bg-blind-size: clamp(700px, 31.25vw, 75rem);
    --main-section-02-bg-circle-pos: 5%;
    --main-section-02-bg-lineCircle-size: clamp(250px, 14.0625vw, 33.75rem);
    --main-section-02-bg-redCircle-size: clamp(800px, 35.1563vw, 84.375rem);
    --main-section-02-contents-wrao-width: 50%;
    --main-section-02-contents-width: 37%;
    --main-section-02-contents-img-height: clamp(280px, 13.4766vw, 32.3125rem);
    --main-section-02-contents-borderRadius: clamp(14px, .7031vw, 1.6875rem);
    --main-section-02-contents-text-margin: clamp(2px, .1953vw, .4375rem);
    --main-section-02-contents-img-margin: clamp(50px, 2.5vw, 6rem);
    --main-section-02-contents-title-font-size: clamp(20px, 1.25vw, 3rem);
    --main-section-02-contents-title-font-weight: 600;
    --main-section-02-contents-text-font-size: clamp(16px, .7813vw, 1.875rem);
    
    --main-section-03-wrap-width: 70%;
    --main-section-03-video-poster: url(../img/main_video_poster.jpg) center center no-repeat;
    --main-section-03-img-width: 50%;
    --main-section-03-img-height: clamp(300px, 20.3125vw, 48.75rem);
    --main-section-03-img-border-radius: clamp(18px, .9375vw, 2.25rem);
    --main-section-03-img-01: url(../img/main_slide_01.jpg) center center no-repeat;
    --main-section-03-img-02: url(../img/main_slide_02.jpg) center center no-repeat;
    --main-section-03-img-03: url(../img/main_slide_03.jpg) center center no-repeat;
    --main-section-03-top-wrap-width: 70%;
    --main-section-03-top-wrap-height: clamp(150px, 6.7578vw, 16.25rem);
    --main-section-03-top-wrap-bgColor: #000;
    --main-section-03-top-wrap-border-radius: 0 0 0 clamp(18px, 1.0938vw, 2.625rem);
    --main-section-03-top-wrap-padding: 0 0 clamp(20px, .9766vw, 2.3125rem) clamp(50px, 73px, 6.8125rem);
    --main-section-03-top-wrap-gap: clamp(18px, .9375vw, 2.25rem);
    --main-section-03-top-title-wrap: 38%;
    --main-section-03-top-title-sub-height: clamp(25px, 1.3672vw, 3.25rem);
    --main-section-03-top-title-sub-font-size: clamp(18px, .9375vw, 2.25rem);
    --main-section-03-top-title-sub-font-weight: 200;
    --main-section-03-top-title-sub-font-color: var(--signature-color);
    --main-section-03-top-title-main-height: clamp(50px, 2.7344vw, 6.5625rem);
    --main-section-03-top-title-main-font-size: clamp(30px, 1.9531vw, 4.6875rem);
    --main-section-03-top-title-main-font-weight: 600;
    --main-section-03-top-title-text-wrap-width: calc((100% - var(--main-section-03-top-title-wrap)) - var(--main-section-03-top-wrap-gap));
    --main-section-03-top-title-text-wrap-padding-left: clamp(26px, 1.875vw, 4.5rem);
    --main-section-03-top-title-text-dote-size: clamp(8px, .5078vw, 1.1875rem);
    --main-section-03-top-title-text-dote-pos-1: 3px;
    --main-section-03-top-title-text-dote-pos-2: clamp(16px, 1.0156vw, 2.4375rem);
    --main-section-03-video-gap: clamp(80px, 4.4531vw, 10.6875rem);
    --main-section-03-video-height: calc(var(--main-section-03-img-height) - var(--main-section-03-video-gap));
    --main-section-03-video-pos-gap: clamp(25px, 1.7578vw, 4.1875rem);
    --main-section-03-video-pos-top: calc(var(--main-section-03-top-wrap-height) + var(--main-section-03-video-pos-gap));
    --main-section-03-bottom-height: clamp(70px, 3.4766vw, 8.3125rem);
    --main-section-03-bottom-margin-top: clamp(16px, 1.0156vw, 2.4375rem);
    --main-section-03-bottom-procress-width: 50%;
    --main-section-03-bottom-procress-num-width: clamp(80px, 3.75vw, 9rem);
    --main-section-03-bottom-procress-num-height: clamp(70px, 3.3984vw, 8.125rem);
    --main-section-03-bottom-procress-num-font-size: clamp(50px, 2.7344vw, 6.5625rem);
    --main-section-03-bottom-procress-num-font-weight: 700;
    --main-section-03-bottom-procress-num-font-color: #232323;
    --main-section-03-bottom-procress-active-num-color: var(--signature-color);
    --main-section-03-bottom-procress-info-gap: clamp(16px, .8984vw, 2.125rem);
    --main-section-03-bottom-procress-info-wrap: calc(100% - var(--main-section-03-bottom-procress-num-width) - var(--main-section-03-bottom-procress-info-gap));
    --main-section-03-bottom-procress-info-text-font-size: clamp(16px, .7813vw, 1.875rem);
    --main-section-03-bottom-procress-info-text-font-weight: 600;
    --main-section-03-bottom-procress-icon-size: clamp(12px, .5469vw, 1.3125rem);
    --main-section-03-bottom-procress-icon-gap: clamp(5px, .5625rem, .8125rem);
    --main-section-03-bottom-procress-bar-width: 89%;
    --main-section-03-bottom-procress-bar-height: 1px;
    --main-section-03-bottom-procress-bar-bg-color: #464646;
    --main-section-03-bottom-procress-bar-active-color: var(--signature-color);
    --main-section-03-bottom-procress-total-num: clamp(16px, .7813vw, 1.875rem);
    --main-section-03-bottom-procress-btn-gap: clamp(16px, .7813vw, 1.875rem);
    --main-section-03-bottom-procress-btn-size: clamp(40px, 2.3438vw, 5.625rem);
    --main-section-03-bottom-procress-btn-border-color: #161616;
    --main-section-03-bottom-procress-btn-border: 2px solid var(--main-section-03-bottom-procress-btn-border-color);
    --main-section-03-bottom-procress-btn-icon-size: clamp(14px, .6641vw, 1.5625rem);



    /* #################################### 10.Sub #################################### */























    /* common */
    --sub-inner-width: clamp(320px, 90vw, 2227px);
    --sub-inner-narrow-width: clamp(320px, 90vw, 1640px);
    --sub-logo-title: clamp(18px, 1.2573vw, 28px);
    --product-title-store: clamp(19px, 1.4369vw, 30px);
    --product-title-icon: clamp(80px, 15vw, 110px);
    --center-padding: 30px;
    --sm-font-size: clamp(16px, 2vw, 18px);
    --md-font-size: clamp(18px, 2vw, 20px);
    --lg-font-size: clamp(18px, 2.5vw, 24px);
    --smlg-font-size: clamp(20px, 2.5vw, 30px);
    --smxlg-font-size: clamp(24px, 2.5vw, 35px);
    --xlg-font-size: clamp(20px, 2.5vw, 45px);
    --xxlg-font-size: clamp(20px, 5vw, 76px);
    --xxxlg-font-size: clamp(20px, 7vw, 100px);
    --sub-title-font-size: clamp(21px, 2.5vw, 35px);



    /* color */
    --main-point-color: #E4312A;
    --sub-line-color: #363636;
    --sub-center-color: #202020;



    /* ------------- sub : product ------------- */
    --product-buy-symbol-img-width : clamp(40px, 3vw, 100px);
    --product-title-buy-line-span-width: clamp(300px, 16vw, 400px);
    --product-title-store-margin-left: clamp(30px, 3vw, 100px);
    --product-title-icons-width: clamp(200px, 25vw, 400px);
    --product-store-wrap-width: clamp(400px, 80vw, 1130px);
    --product-store-circle-span-width: clamp(82px, 10vw, 82px);


    /* ------------- sub : greeting ------------- */
    --greeting-info-img-img-width: clamp(450px, 34vw, 669px);
    --greeting-info-title-img-width: clamp(100%, 34vw, 540px);
    --greeting-account-dg-img-width: clamp(100px, 20vw, 680px);
    --greeting-account-dg-span-width: clamp(100px, 20vw, 400px);
    --greeting-symbol-img-img-width: clamp(100px, 30vw, 310px);

    /* ------------- sub : esg ------------- */
    --esg-title-img-img-width: clamp(200px, 20vw, 456px);
    --esg-title-img-img-margin-bottom: clamp(70px, 2.5vh, 148px);
    --esg-sub-title-p-margin-bottom: clamp(50px, 2.5vw, 75px);

    /* ------------- sub : center ------------- */
    --center-procedure-item-p-width: clamp(150px, 15vw, 275px);
    
    /* ------------- sub : chater ------------- */
    --charter-button-button-padding: 10px 30px;

    /* ------------- sub : overview ------------- */
    --company-title-wrap-img-1-width: clamp(80px, 15vw, 119px);
    --company-title-wrap-img-2-width: clamp(200px, 15vw, 300px);
    --company-box-width: clamp(430px, 30vw, 563px);
    --company-box-height: clamp(30px, 15vw, 90px);
    --company-box-span-width: clamp(140px, 10vw, 160px);
    --company-box-span-height: clamp(30px, 15vw, 90px);
    --overview-title-img-bg-img-width: clamp(400px, 70vw, 1165px);
    --overview-certificate-title-h2: clamp(30px, 10vw, 70px);
    --overview-certificate-item-img-width: clamp(230px, 20vw, 470px);
    --overview-location-icon-img-width: clamp(30px, 5vw, 65px);
    --overview-location-iframe-height: clamp(571px, 60vw, 1280px);

    /* ------------- sub : R&D  ------------- */
    --RD-title-desc-item-width: clamp(130px, 10vw, 242px);
    --RD-title-desc-item-height: clamp(90px, 10vw, 177px);
    --RD-title-img-item-width: clamp(430px, 30vw, 530px);
    --RD-title-img-item-height: clamp(100px, 20vw, 162px);
    --RD-hydrogen-title-img-img-width: clamp(100px, 10vw, 160px);
    --RD-hydrogen-title-img-wrap-img-width: clamp(180px, 20vw, 323px);
    --RD-hydrogen-desc-item-img-height: clamp(390px, 20vw, 430px);
    --RD-business-title-img-p-width:clamp(100px, 20vw, 316px);
    --RD-business-img-desc-box-width: clamp(400px, 30vw, 550px);
    --RD-develop-desc-itme-img-height:clamp(200px, 15vw, 250px);
    --RD-develop-desc-itme-p-height: clamp(100px, 10vw, 250px);
    --RD-develop-desc-height: clamp(249px, 10vw, 250px);
    --RD-develop-desc-span-1-width: clamp(130px, 10vw, 150px);
    --RD-strategy-img-group-width: clamp(400px, 40vw, 470px);
    --RD-strategy-img-group-span-width:  clamp(150px, 20vw, 200px);
    --RD-carbon-img-box-height: clamp(300px, 30vw, 680px);











    
}



/* **************************************************************
    0) Responsive Area
************************************************************** */
@media all and (max-width: 700px) {
    :root {
        --intro-1-text-mobile-margin: 1.125rem auto;
    }
}

@media all and (max-width: 620px) {
    :root  {
        --intro-2-symbol-size: 27vw;
        --intro-2-line-height: 2.0625rem;
    }
}

@media all and (max-width: 550px) {
    :root {
        --main-video-subtitle-frame: 5.875rem;
    }
}

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