@charset "utf-8";
/*───────────────────────────────────────────────────────────
	
	header, footer, main 관련 작성 css 파일입니다.

	** 이와 서브페이지 관련 css는 /css/sub.css 에 있습니다.

───────────────────────────────────────────────────────────*/
/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
	#wrap {position:relative;width:100%; box-sizing: border-box; overflow: clip;}
    #container, .w_custom{position: relative; width: calc(100% - 60px); max-width: 1540px; margin-inline: auto; box-sizing: border-box;}
    #container{position: relative; padding-bottom:150px; box-sizing: border-box;}

    @media (max-width:1500px){
        br.for_pc{display: none;}
    }
    @media (max-width:1023px){
        #container{padding-bottom:clamp(100px, 15vw, 150px);}
    }
    @media (max-width:860px){
        #container, .w_custom{width: calc(100% - 30px);}
    }
    @media (max-width:320px){
        #container, .w_custom{width: calc(100% - 20px);}
    }



/*───────────────────────────────────────────────────────────

    HEADER | outline/header.html, outline/nav.html

───────────────────────────────────────────────────────────*/
    #header{position: sticky; top:0; width: 100%; height: 130px; box-sizing: border-box; transition: all 0.4s; z-index: 100; background: var(--point-white);}
        .main_index #header{position: fixed; left:0; background: var(--trans-color);}
    #header .w_custom{max-width: 1720px;height: 100%;display: flex;align-items: center;justify-content: space-between;gap: 30px;}
    #header .logo{position: relative; height: 100%; box-sizing: border-box;}
    #header .logo a{display: flex;align-items: center;max-width: 100px;height: 100%;padding-block: 12px;box-sizing: border-box;}
    #header .cont{display: flex;align-items: center;gap: clamp(20px, 3.2vw, 60px);flex-shrink: 0;height: 100%;}
    #header .gnb{display: flex;justify-content: flex-end;gap: clamp(20px, 3.2vw, 60px);text-align: center;font-size: var(--title-20);height: 100%;box-sizing: border-box;}
    #header .gnb > li{position: relative;height: 100%;font-size: inherit;font-weight: 700;color: var(--black-color01);box-sizing: border-box; transition: all 0.4s;}
    #header .gnb > li > a{display: flex;align-items: center;height: 100%;box-sizing: border-box;}
    #header .gnb .dep02{position: absolute;top: 80%;left: 50%;translate: -50%;width: 180px;background: var(--point-color01);padding-block: 20px;border-radius: var(--radius-10);opacity: 0;pointer-events: none;transition: all 0.4s;}
    #header .gnb .dep02 > li{font-size: 85%;font-weight: 500;color: var(--point-white);}
    #header .gnb .dep02 > li > a{display: block;padding: 10px 25px;box-sizing: border-box;}
    #header .utility{display: flex; align-items: center; gap: clamp(20px, 2.1vw, 40px);}
    #header .allCate{display: flex;flex-direction: column;justify-content: space-between;width: 30px;aspect-ratio: auto 1.6;}
    #header .allCate span{width: 100%; height: 2px; background: var(--black-color01);}

    .lang_desc{position: relative; font-size: var(--title-20);}
    .lang_desc dt{font-size: 0; cursor: pointer;}
    .lang_desc dd{position: absolute;top:calc(100% + 10px);left:50%;translate: -50%;width: 60px;padding-block: 8px;border: 1px solid var(--border-color01);background: var(--point-white);opacity: 0;pointer-events: none;transition: all 0.4s;font-size: max(13px, 65%);font-weight: 700;color: var(--black-color01);text-align: center;box-sizing: border-box;}
        .lang_desc:has(dt.on) dd{opacity: 1; pointer-events: all;}
	.lang_desc dd a{display:block;padding: 5px 10px;box-sizing: border-box;}
        .lang_desc dd a.on{color: var(--point-color01);}

        /* color */
            .main_index #header :where(.logo, .gnb > li > a, .lang_desc dt, .allCate){filter: var(--filter-white); transition: all 0.4s;}

        /* over */
            @media (hover:hover) and (pointer:fine){
                .main_index #header:hover{background: var(--point-white); box-shadow: inset 0 -1px 0 var(--border-color01);}
                .main_index #header:hover :where(.logo, .gnb > li > a, .lang_desc dt, .allCate){filter:none;}
                #header .gnb > li:hover{color: var(--point-color01);}
                #header .gnb > li:hover .dep02{opacity: 1; pointer-events: all;}
                #header .gnb .dep02 > li:hover > a{text-decoration: underline;text-underline-offset: 8px;}
            }

        /* on */
            #header.on{background: var(--point-white); box-shadow: inset 0 -1px 0 var(--border-color01);}
            #header.on :where(.logo, .gnb > li > a, .lang_desc dt, .allCate){filter:none;}

    @media (max-width:1023px){
        #header{height: clamp(75px, 13vw, 130px);}
        #header .gnb{display: none;}
    }

/*───────────────────────────────────────────────────────────

	Aside | outline/nav.html

───────────────────────────────────────────────────────────*/
    #aside{position: fixed;top: 0;left:0;width: 100%;height: 100%;z-index: 999;background: rgba(0,0,0,0.8);backdrop-filter:blur(10px);display: flex;flex-direction: column;overflow: hidden;overflow-y: auto;padding-block: 10vh;box-sizing: border-box;opacity: 0;transition: all 0.6s;clip-path: inset(0 0 100% 0);}
        #aside.on{opacity: 1;clip-path: inset(0);}
    body:has(#aside.on){overflow: clip; touch-action: none;}
    #aside .w_custom{flex-shrink: 0;max-width: 1720px;min-height: 100%;display: flex;align-items: center;}
    #aside .gnb{width: 100%;font-size: var(--title-20);letter-spacing: 0;display: grid;align-items: start;justify-content: center;grid-template: auto / repeat(6, 1fr);gap: clamp(15px, 2.2vw, 40px);}
    #aside .gnb > li{color: var(--point-white);font-size:var(--title-20);text-align: center;opacity:0;transform:translateY(100px);transition:all 0.8s;}
        #aside.on .gnb > li{opacity:1;transform:translateY(0);}
        #aside.on .gnb > li:nth-child(1){transition-delay:0.3s;}
        #aside.on .gnb > li:nth-child(2){transition-delay:0.4s;}
        #aside.on .gnb > li:nth-child(3){transition-delay:0.5s;}
        #aside.on .gnb > li:nth-child(4){transition-delay:0.6s;}
        #aside.on .gnb > li:nth-child(5){transition-delay:0.7s;}
        #aside.on .gnb > li:nth-child(6){transition-delay:0.8s;}
    #aside .gnb > li > a{display: block;font-size: 180%;color:inherit;font-weight: 700;line-height: 1.2;padding: 30px 0;transition: all 0.4s;position: relative;}
	#aside .gnb > li > a:before{width:12px;height:0;opacity:0;content:"";box-sizing:border-box;border-radius:100%;background: var(--point-color01);position: absolute;left:50%;top:0;transform:translate(-50%);transition:all 0.3s;}
    #aside .gnb .dep02{margin-top:8px;}
    #aside .gnb .dep02 > li{font-size:var(--title-20);}
    #aside .gnb .dep02 > li > a{display: inline-block;font-size:110%;font-weight:400;padding: 15px 0;transition: all 0.4s;color: var(--black-color08);}
    #aside .utility{position: absolute;top: clamp(30px, 2.8vw, 50px);right: clamp(30px, 2.8vw, 50px);display: flex;align-items: center;gap: 30px; z-index:2;}
    #aside .lang_desc dt{filter: var(--filter-white);}
    #aside .close_btn{position: relative;width: 40px;height: 40px;z-index: 9;}
    #aside .close_btn span{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%) rotate(45deg); width: 100%; height: 2px; background: var(--point-white);}
    #aside .close_btn span + span{transform: translate(-50%, -50%) rotate(-45deg);}
    
        /* over */
            @media (hover:hover) and (pointer:fine){
                #aside .gnb > li:hover > a:before{height:12px;opacity:1;}
                #aside .gnb .dep02 > li:hover a{color:var(--point-white);}
            }

    @media (max-width:1600px){
        #aside .gnb{grid-template: auto / repeat(3, 1fr)}
    }
    @media (max-width:1023px){
        #aside{padding-block: clamp(80px, 12vw, 120px);}
        #aside .close_btn{width: clamp(30px, 4vw, 40px);height: clamp(30px, 4vw, 40px);}
		#aside .utility{gap:20px;}
    }
    @media (max-width:860px){
		#aside{display: block;}
		#aside .w_custom{align-items:flex-start;}
		#aside .gnb{grid-template: auto / repeat(1, 1fr);gap:0;}
        #aside .gnb > li{display: block;padding: 25px 0;width:100%;text-align:left;box-sizing:border-box;border-bottom:1px solid rgba(255,255,255,0.5);}
        #aside .gnb > li > a{width: 100%; padding:0;}
		#aside .gnb > li > a:before{display: none;}
        #aside .gnb .dep02{display: flex;flex-wrap:wrap;margin-top: 15px;justify-content: flex-start;gap:0 12px;}
		#aside .gnb .dep02 li{width:calc(100% / 3 - 8px);}
		#aside .gnb .dep02 > li > a{padding:12px 0;}
		#aside .utility{top:15px; right: 15px; }
    }
    @media (max-width:640px){
        #aside .gnb > li > a{font-size: 200%;}
		#aside .gnb .dep02 li{width:calc(50% - 6px);}
        #aside .gnb .dep02 > li > a{padding:7px 0;font-size:100%;}
        #aside .gnb .dep02 > li:not(:last-child):after{margin:0 15px;}
    }
    @media (max-width:479px){
        #aside .gnb > li > a{font-size: 170%;}
        #aside .gnb .dep02{margin-top: 10px;}
        #aside .gnb .dep02 li{width: 100%;}
        #aside .gnb .dep02 > li > a{font-size: 95%;}
    }

/*───────────────────────────────────────────────────────────

    MAIN | index.html

───────────────────────────────────────────────────────────*/
    /* 비주얼 */
        .main_visual {position: relative; background:var(--gray-bg01) url('../images/skin/logo.svg') no-repeat center / 200px auto;}
        .main_visual .slick-slide{position: relative; height: 960px; overflow: hidden;box-sizing: border-box; opacity: 0 !important; transition: 0.6s !important; transition-property: clip-path !important;}
            .main_visual .slick-slide.slick-active{clip-path: inset(0 0 100% 0); opacity: 1 !important;}
            .main_visual .slick-slide.slick-active:not(.active){transition: 0s !important;}
            .main_visual .slick-slide.slick-active.active{clip-path: inset(0);}
            .main_visual .slick-slide.active{clip-path: inset(0); opacity: 1 !important;}

        .main_visual .thumb{position: absolute;inset: 0;background: no-repeat 70% 50%/ cover;}
            .main_visual .active .thumb{scale: 1.03;transition: all 8s 0.2s;}
        .main_visual .txt_box{position: relative;font-size: var(--title-20);color: var(--point-white);box-sizing: border-box;display: flex;flex-direction: column;justify-content: flex-end;gap: 150px;padding-bottom:120px;height: 100%;}
        .main_visual .txt_box h2{font-size: 90px;font-weight: 300;line-height: 1.2;font-family: var(--font-type02);letter-spacing: -0.03em;}
        .main_visual .txt_box h4{font-size: 34px;font-weight: 600;line-height: 1.53;text-align: right;letter-spacing: -0.03em;padding-left: 180px;box-sizing: border-box;}

        .main_visual .txtAni{opacity: 0;}
        .main_visual h2.txtAni{translate: 70px;}
        .main_visual h4.txtAni{translate: -70px;}
        .main_visual .slick-slide.active .txtAni{opacity: 1; translate: 0; transition: all 1.5s 0.4s;}
        
        .main_visual .controller{position: absolute;top: 50%;left:50%;translate: -50% -50%;z-index: 3;display: flex;align-items: center;justify-content: space-between;max-width: 1780px; pointer-events: none;}
        .main_visual .slick-arrow{position: relative; width: 60px; aspect-ratio: auto 1; opacity: 0; transition: all 0.4s;}
            .main_visual .slick-arrow.prev{scale: -1 -1;}
            .main_visual .slick-arrow:before{position: absolute;content:'';width: 70%;aspect-ratio: auto 1;border: 2px solid rgba(255,255,255,0.5);top: 50%;left: 50%;translate: -50% -50%;clip-path: var(--clip-poly01);rotate: -45deg; transition: inherit;}

        .main_visual .scr_dwn{position: absolute; left: 50%; bottom: 120px; translate: -50%; z-index: 4;}
        .main_visual .scr_dwn dl{display: flex; align-items: center; gap: 18px; font-size: var(--title-20); cursor: pointer;}
        .main_visual .scr_dwn dl dt{position: relative;width: 15px;aspect-ratio: auto 0.535;display: flex;flex-direction: column;justify-content: space-between;align-items: center;}
        .main_visual .scr_dwn dl dt span{width: 70%;aspect-ratio: auto 1;border: 2px solid var(--point-white);clip-path: var(--clip-poly01);rotate: 45deg;box-sizing: border-box;border-radius: 1px;translate: 0 -2px; opacity: 0;}
        .main_visual .scr_dwn dl dd{font-size: 90%;font-weight: 200;font-family: var(--font-type02);filter: var(--filter-white);opacity: 0.8;letter-spacing: 0;}

            .main_visual .scr_dwn dl dt span{animation-name: scrDwn01; animation-duration:2s; animation-iteration-count:infinite; animation-fill-mode: forwards; transition-timing-function:linear;}
            .main_visual .scr_dwn dl dt span:nth-child(2){animation-name: scrDwn02; animation-delay: 0.2s;}
            .main_visual .scr_dwn dl dt span:nth-child(3){animation-name: scrDwn03; animation-delay: 0.4s;}
            @keyframes scrDwn01 {0% {opacity: 0;} 50% {opacity: 0.3;} 100% {opacity: 0;}}
            @keyframes scrDwn02 {0% {opacity: 0;} 50% {opacity: 0.5;} 100% {opacity: 0;}}
            @keyframes scrDwn03 {0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;}}

            @media (min-width:1024px){
                .main_visual .txt_box{width: calc(100% - 200px);}
            }

            /* over */
                @media (hover:hover) and (pointer:fine){
                    .main_visual:hover .slick-arrow{opacity: 1; pointer-events: all;}
                    .main_visual .slick-arrow:hover:before{border-color:var(--point-white);}
                }
        

        @media (max-width:1023px){
            .main_visual{background-size: clamp(120px, 20.5vw, 200px);}
            .main_visual .slick-slide{height: clamp(580px, 96vw, 960px);}
            .main_visual .txt_box{padding-bottom: clamp(30px, 12vw, 120px); gap: clamp(30px, 15vw, 150px);}
            .main_visual .txt_box h2{font-size: clamp(42px, 9vw, 90px);}
            .main_visual .txt_box h4{font-size: clamp(17px, 3.9vw, 34px);}
            .main_visual .controller{display: none;}
            .main_visual .scr_dwn{bottom: clamp(30px, 12vw, 120px);}
            .main_visual .scr_dwn dl{gap: clamp(12px, 1.8vw, 18px);}
        }
        @media (max-width:640px){
            .main_visual .txt_box{justify-content: flex-start;padding-block: 140px 0;gap: 25px;}
            .main_visual .txt_box h4{text-align: left;padding-left: 0;}
            .main_visual .scr_dwn{bottom: 30px;}
            .main_visual .scr_dwn dl dt{width: 13px;}
        }
        
    /* 공통 */
        .main_title{position: relative; font-size: var(--title-20); box-sizing: border-box; display: grid; gap: 20px;}
            .main_title.pdT{padding-top: 160px;}
            .main_title.mgB{margin-bottom: 60px;}
        .main_title h3{font-size: 290%;font-weight: 700;color: var(--black-color01);line-height: 1.45;letter-spacing: -0.03em;}
			.main_title h3 + p{margin-top: 20px;}
        .main_title h3 strong{font-weight: 800;}
        .main_title h5{font-size: 190%; font-weight: 800; color: var(--black-color03); line-height: 1.47;}
		.main_title h5 + p{margin-top: 3px;}
        .main_title h6{font-size: inherit;font-weight: 700;color: var(--black-color01);letter-spacing: -0.03em;}
			.main_title h6 + h3{margin-top: 9px;}
        .main_title h6 em{font-weight: 400; color: var(--point-color01); font-family: var(--font-type02);}
        .main_title p{font-size: 100%;font-weight: 700;color: var(--black-color07);line-height: 1.9;letter-spacing: -0.025em;text-wrap: pretty;}
        .main_title p strong{font-weight: inherit; color: var(--black-color04);}
        .main_title p em{font-weight: inherit; color: var(--point-color01);}
        .main_title .more_arw{margin-top: 60px;}
        
        .more_arw{position: relative;font-size: var(--title-20);font-weight: 800;color: var(--point-color01);line-height: 1.2;box-sizing: border-box;display: flex;align-items: center;justify-content: center;text-align: center;width: fit-content;min-width: 240px;padding: 21px 30px 20px;z-index: 1;overflow: hidden;transition: all 0.4s;}
            .more_arw:before{position: absolute;content:'';inset: 0;background: var(--point-white);border:2px solid var(--point-color01);border-radius: inherit;transition: inherit;z-index: -2;border-radius: 50px;}
            .more_arw:after{position: absolute;content:'';inset: 0;background: var(--point-color01);clip-path: inset(0 100% 0 0);transition: inherit;z-index: -1;border-radius: 50px;}
        .more_arw span{position: relative;font-size: 95%;transition: inherit;display:flex;align-items: center;justify-content: space-between;gap: 15px;width: 100%;box-sizing: border-box;}
        .more_arw span:after{display: inline-flex;content:'';width: 18px;aspect-ratio: auto 1.28;background: url('../images/skin/more_arw.svg') no-repeat center / 100% auto;transition: inherit;translate: 0 -1px;}

        .more_arw02{position: relative;width: fit-content;font-size: var(--title-20);font-weight: 800;color: var(--point-color01);display: flex;align-items: baseline;gap: 8px;text-decoration: underline;text-decoration-thickness: 1px;text-underline-offset: 6px;transition: all 0.4s;}
        .more_arw02:after{display: inline-flex;content:'';width: 12px;aspect-ratio: auto 1;background: url('../images/skin/more_arw02.svg') no-repeat center / 100% auto;}
        .more_arw02 span{font-size: 90%;}

            .more_arw.bl:after{clip-path: inset(0);}
            .more_arw.bl span{filter: var(--filter-white);}

            /* over */
                @media (hover:hover) and (pointer:fine){
                    .more_arw:hover:after{clip-path: inset(0);}
                    .more_arw:hover span{filter: var(--filter-white);}
                        .more_arw.bl:hover:after{clip-path: inset(0 0 0 100%);}
                        .more_arw.bl:hover span{filter: none;}
                }

        @media (max-width:1500px){
            .main_title{text-wrap: balance;}
        }

        @media (max-width:1023px){
            .main_title{gap: clamp(15px, 2vw, 20px);}
                .main_title.pdT{padding-top: clamp(80px, 16vw, 160px);}
                .main_title.mgB{margin-bottom: clamp(30px, 6vw, 60px);}
            .main_title h3{font-size: 260%;}
            .main_title h3 + p{margin-top: clamp(10px, 2vw, 20px);}
            .main_title h5{font-size: 180%;}
            .main_title h6 + h3{margin-top: clamp(0px, 1vw, 9px);}
            .main_title .more_arw{margin-top: clamp(25px, 6vw, 60px);}

            .more_arw{min-width: clamp(180px, 24.5vw, 240px); padding: clamp(18px, 2.5vw, 20px) clamp(25px, 3.5vw, 30px);gap: clamp(12px, 2vw, 20px);}
            .more_arw span:after{width: clamp(16px, 2.3vw, 18px);}
        }
        @media (max-width:640px){
            .main_title h3{font-size: 230%;}
            .main_title h5{font-size: 170%;}
        }
        @media (max-width:479px){
            .main_title h3{font-size: 200%;}
            .main_title h5{font-size: 160%;}
            .main_title h6{font-size: max(15px, 90%);}
            .main_title p{font-size: max(14px, 85%);line-height: 1.8;}
        }

    /* About BigDream */
        .main_about{padding-block: 162px;}
        .main_about .w_custom{display: flex;align-items: flex-start;gap: 100px;}
        .main_about .main_title{width: 100%;}
        .main_about .main_title h3 + p{margin-top: 40px;}
        .main_about .main_title p{font-size: 95%;line-height: 1.95;}
        .main_about .thumb{font-size: 0;width: 43.4%;flex-shrink: 0;padding-top: 6px;}

        @media (max-width:1200px){
            .main_about .w_custom{flex-wrap: wrap;flex-direction: column-reverse;gap: clamp(30px, 5vw, 50px);}
            .main_about .thumb{width: 100%;max-width: 600px;padding-top: 0;}
        }
        @media (max-width:1023px){
            .main_about{padding-block: clamp(80px, 16.2vw, 162px);}
            .main_about .main_title h3 + p{margin-top: clamp(10px, 4vw, 40px);}
        }

    /* About CupDream */
        .main_prod{padding-block: 50px 180px;}
        .main_prod .cont{display: flex;align-items: flex-start;gap: clamp(50px, 4.2vw, 80px);}
        .main_prod .thumb{position: sticky;top: 120px;font-size: 0;width: 44.1%;height: min(700px, 77vh);flex-shrink: 0;}
		.main_prod .thumb > img{width:100%;height:100%;object-fit: cover;}
        .main_prod .thumb .more_arw{position: absolute;left: 30px;bottom:30px;}
        .main_prod .info_list{width: 100%; border-top: 1px solid var(--border-color03); box-sizing: border-box; counter-reset: mainProd;}
        .main_prod .info_list > li{border-bottom: 1px solid var(--border-color03);box-sizing: border-box;font-size: var(--title-20);display: flex;align-items: baseline;gap: 12px clamp(25px, 3.2vw, 60px);padding: clamp(30px, 3.2vw, 60px);}
        .main_prod .info_list > li:before{content: counter(mainProd, decimal-leading-zero);counter-increment: mainProd;font-size: 170%;font-weight: 400;color:var(--point-color01);font-family: var(--font-type02);width: 60px;text-align: center;flex-shrink: 0;}
        .main_prod .info_list .desc{display: grid;gap: 11px;}
        .main_prod .info_list .desc dt{font-size: 150%;font-weight: 700;color: var(--black-color03);line-height: 1.6;letter-spacing: -0.03em;}
        .main_prod .info_list .desc dd{font-size: 90%;font-weight: 700;color: var(--black-color08);line-height: 1.67;}

        @media (max-width:1023px){
            .main_prod{padding-block: clamp(0px, 5vw, 50px) clamp(80px, 18vw, 180px);}
            .main_prod .cont{flex-wrap: wrap;gap: clamp(30px, 5vw, 50px);}
            .main_prod .thumb{position: relative;top: auto;font-size: 0;width: 100%;max-width: 600px;height: auto;flex-shrink: unset;}
            .main_prod .thumb .more_arw{position: relative; inset: auto; margin-top: 30px;}
            .main_prod .info_list > li:before{width: clamp(50px, 6vw, 60px);}
            .main_prod .info_list .desc{gap: clamp(8px, 1.6vw, 11px);}
        }
        @media (max-width:640px){
            .main_prod .info_list > li:before{font-size: 160%;}
            .main_prod .info_list .desc dt{font-size: 140%;}
        }
        @media (max-width:479px){
            .main_prod .info_list > li{column-gap: 20px;}
            .main_prod .info_list > li:before{font-size: 150%;}
            .main_prod .info_list .desc dt{font-size: 130%;}
            .main_prod .info_list .desc dd{font-size: max(14px, 85%);}
        }
        @media (max-width:431px){
            .main_prod .info_list > li{flex-wrap: wrap;}
            .main_prod .info_list > li:before{width: 100%;flex-shrink: unset;text-align: left;}
        }

    /* Installation Example */
        .main_example{position: relative; background: url('../images/skin/main_example01.jpg') no-repeat center / cover; padding-bottom: 180px; transition: all 0.4s;}
        .main_example .main_title{padding-right: 300px;}
        .main_example .main_title :where(h3, h6, p){filter: var(--filter-white);}
        .main_example .main_title p{opacity: 0.8;font-weight: 400;}
        .main_example .main_title p strong{font-weight: 700;}
        .main_example .main_title .more_arw{position: absolute; right:0; bottom:0;}
        .main_example .item_list{display: grid; grid-template: auto / repeat(2, 1fr); gap: clamp(15px, 5.3vw, 100px); text-align: center;}
        .main_example .item_list > li {position: relative;padding: 70px 40px;padding-top: 68px;box-sizing: border-box;border-radius: var(--radius-20);border: 1px solid var(--trans-color);transition:all 0.4s;}
        .main_example .item_list .cont{display: grid; gap: 40px; transition: all 0.4s;}
        .main_example .item_list .icon{font-size: 0; display: flex; align-items: center; justify-content: center; height: 86px;}
        .main_example .item_list .desc{font-size: var(--title-20);filter: var(--filter-white);display: grid;gap: 22px;text-wrap: balance;}
        .main_example .item_list .desc dt{font-size: 160%;font-weight: 800;line-height: 1.56;letter-spacing: -0.03em;}
        .main_example .item_list .desc dd{font-size: 90%;font-weight: 700;line-height: 1.78;letter-spacing: -0.03em;opacity: 0.8; transition: all 0.4s;}

            @media (min-width:1024px){
                .main_example:has(.item_list > li:nth-child(2).on){background-image: url('../images/skin/main_example02.jpg');}
                .main_example .item_list > li.on{border-color:rgba(255, 255, 255, 0.30);background: rgba(255, 255, 255, 0.10);backdrop-filter: blur(8px);}
                .main_example .item_list > li:not(.on) .cont{translate: 0 58px;}
                .main_example .item_list > li:not(.on) .desc dd{opacity: 0;}
            }
        @media (max-width:1023px){
            .main_example{padding-bottom: clamp(80px, 18vw, 180px);}
            .main_example .main_title{padding-right: 0;}
            .main_example .main_title .more_arw{position: relative; inset: auto;}
            .main_example .item_list{grid-template: auto / repeat(1, 1fr);}
            .main_example .item_list > li{border-color:rgba(255, 255, 255, 0.30);background: rgba(255, 255, 255, 0.10);backdrop-filter: blur(4px); padding: clamp(30px, 6.8vw, 68px) clamp(20px, 4vw, 40px);}
            .main_example .item_list .cont{gap: clamp(20px, 4vw, 40px);}
            .main_example .item_list .icon{height: clamp(50px, 8.6vw, 86px);}
            .main_example .item_list .desc{gap: clamp(12px, 2.2vw, 22px);}
        }
        @media (max-width:479px){
            .main_example .item_list .desc dt{font-size: 150%;}
        }

    /* Customer Support */
        .main_support{padding-bottom: 180px;}
        .main_support .bnr_cont{position: relative;background: url('../images/skin/main_support.jpg') no-repeat 40% 50% / cover;padding: clamp(50px, 4.2vw, 80px);box-sizing: border-box;border-radius: var(--radius-35);display: grid;gap: clamp(40px, 2.7vw, 50px);}
        .main_support .w_custom{display: grid; gap: 40px;}
		.main_support .bnr_cont .main_title h5{letter-spacing:-0.03em;}
		.main_support .bnr_cont .main_title p{line-height:1.74;letter-spacing: -0.03em;}
        .main_support .exp_list{position: relative;display: flex;flex-direction: column;gap: 14px;padding-right: 280px;box-sizing: border-box;}
        .main_support .exp_list .item{display: flex; flex-wrap: wrap; gap: 14px 40px;}
        .main_support .exp_list .desc{display: flex;align-items: baseline;gap: 13px 24px;font-size: var(--title-20);}
        .main_support .exp_list .desc .icon{display: flex;align-items: center;justify-content: center;width: 36px;height: 36px;padding: 9px;box-sizing: border-box;border-radius: 100%;background: var(--point-color01);}
        .main_support .exp_list .desc dt{flex-shrink: 0;max-width: 150px;font-size: inherit;font-weight: 400;color: var(--black-color03);letter-spacing: 0;font-family: var(--font-type02);display: flex;align-items: center;gap: 14px;}
        .main_support .exp_list .desc dd{font-size: 85%;font-weight: 700;color: var(--black-color07);translate: 0 -2px;}
        .main_support .exp_list .more_arw{position: absolute; right:0; bottom:0;}
        .main_support .info_list{display: grid; grid-template: auto / repeat(4, 1fr); background: var(--gray-bg03); text-align: center; box-sizing: border-box; border-radius: var(--radius-35);}
        .main_support .info_list > li{position: relative; padding: clamp(60px, 4.3vw, 82px) 30px;border-radius: inherit;border: 2px solid var(--trans-color);box-sizing: border-box;transition: all 0.4s;display: flex;flex-direction: column;justify-content: center;}
        .main_support .info_list .cont{position: relative; transition: inherit;}
        .main_support .info_list .link{position: absolute; inset: 0; z-index: 3;}
        .main_support .info_list .desc{font-size: var(--title-20);display: grid;gap: 10px;}
        .main_support .info_list .desc dt{font-size: 140%; font-weight: 800; color: var(--black-color03); line-height: 1.64;}
        .main_support .info_list .desc dd{font-size: max(13px, 85%); font-weight: 700; color: var(--black-color08); line-height: 1.76;}
        .main_support .info_list .more_arw02{position: absolute;top: calc(100% + 25px);left: 50%;translate: -50%;opacity: 0;}


            /* over */
            @media (min-width:1024px){
                .main_support .info_list > li:hover{border-color: var(--point-color01); background: var(--point-white);}
                .main_support .info_list > li:hover .cont{translate: 0 -30px;}
                .main_support .info_list > li:hover .more_arw02{opacity: 1;}
            }

        @media (max-width:1200px){
            .main_support .info_list{grid-template: auto / repeat(2, 1fr);}
            .main_support .info_list > li:nth-child(n+3){padding-top: 0;}
        }
        @media (max-width:1023px){
            .main_support{padding-bottom: clamp(100px, 18vw, 180px);}
            .main_support .w_custom{gap: clamp(15px, 4vw, 40px);}
            .main_support .bnr_cont{padding: clamp(30px, 5vw, 50px);gap: clamp(25px, 4.5vw, 40px);}
			.main_support .exp_list{padding-right:0;}
            .main_support .exp_list .item{column-gap: clamp(30px, 4vw, 40px);}
            .main_support .exp_list .desc{column-gap: clamp(20px, 2.9vw, 24px);}
            .main_support .exp_list .desc dt{gap: clamp(12px, 1.9vw, 14px);}
            .main_support .exp_list .desc dd{translate: 0 clamp(-2px, -0.2vw, 0px);}
            .main_support .exp_list .desc .icon{width: clamp(30px, 4.1vw, 36px); height: clamp(30px, 4.1vw, 36px);}
            .main_support .exp_list .more_arw{position: relative;inset: auto;margin-top: clamp(25px, 5vw, 50px);}
            .main_support .info_list > li{padding: clamp(40px, 6.5vw, 60px) 20px;}
            .main_support .info_list .desc{gap: clamp(7px, 1.5vw, 10px);}
        }
        @media (max-width:640px){
            .main_support .bnr_cont .main_title p br{display: none;}
        }
        @media (max-width:479px){
            .main_support .info_list{grid-template: auto / repeat(1, 1fr);}
            .main_support .info_list > li:nth-child(n+2){padding-top: 0;}
            .main_support .info_list .desc dt{font-size: 130%;}
        }
        @media (max-width:431px){
            .main_support .exp_list .desc{flex-wrap: wrap;}
            .main_support .exp_list .desc dt{flex-shrink: unset;}
            .main_support .exp_list .desc dd{width: 100%;}
        }

/*───────────────────────────────────────────────────────────

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    #footer{position: relative; background: var(--black-color01); box-sizing: border-box; padding-block: 78px 60px; font-size: var(--title-20); color: rgba(0,0,0,0.8);}
    #footer .w_custom{font-size: 85%;display: grid;gap: 29px;}
    #footer .ftr_title{position: relative;font-size: var(--title-20);box-sizing: border-box;padding-right: 300px;}
    #footer .ftr_title h5{font-size: 110%;font-weight: 700;filter: var(--filter-white);color: var(--black-color01);}
    #footer .addr_list{display: grid;gap: 13px;}
    #footer .addr_list > li{display: flex;flex-wrap: wrap;gap: 13px 40px;}
    #footer .addr_list .desc{display: flex;align-items: baseline;gap: 24px;font-size: var(--title-20);}
    #footer .addr_list .desc :where(dt, dd){filter: var(--filter-white);}
    #footer .addr_list .desc dt{font-size: inherit; font-weight: 400; color: rgba(0,0,0,0.4); font-family: var(--font-type02); flex-shrink: 0;}
    #footer .addr_list .desc dd{font-size: 85%; font-weight: 400;}
    #footer .addr_list .desc:not(:has(dt)) dd{font-size: 90%;}
    #footer .link_list{display: flex;flex-wrap: wrap;margin-top: 10px;}
    #footer .link_list > li{display: flex; align-items: center; color: var(--black-color01); filter: var(--filter-white);}
    #footer .link_list > li:not(:last-child):after{display: inline-flex; content:''; width: 4px; aspect-ratio: auto 1; border-radius: 100%; background: var(--black-color01); opacity: 0.4; margin-inline: 24px;}
    #footer .sns_list{position: absolute;top: -6px;right:0;display: flex;flex-wrap: wrap;gap: 14px;max-width: 300px;}
    #footer .sns_list a{display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 100%; background: var(--black-color03); padding:8px; box-sizing: border-box; transition: all 0.4s;}
    #footer .copy{display: flex;align-items: flex-start;gap: 16px;line-height: 1;color: var(--black-color01);filter: var(--filter-white);margin-top: 73px;}
    #footer .copy dt{flex-shrink: 0; font-size: 120px;}
    #footer .copy dd{font-size: 110px;font-weight: 400;font-family: var(--font-type02);display: grid;letter-spacing: -0.03em;translate: 0 -15px;}
    #footer .copy dd a{font-size: max(13px, var(--title-18));opacity: 0.4;letter-spacing: -0.03em;padding-left: 7px;margin-top: -5px;}

    .scr_top{position: fixed;bottom: clamp(30px, 2.1vw, 40px);right: clamp(30px, 2.1vw, 40px);display: flex;align-items: center;justify-content: center;width: 64px;height: 64px;background: var(--black-color01);border: 1px solid rgba(255,255,255,0.3);border-radius: 100%;box-sizing: border-box;padding: 10px;opacity: 0;pointer-events: none;transition: all 0.4s;z-index: 50;}
        body:has(#header.on) .scr_top{opacity: 1;pointer-events: all;transform: translate(0);}
	.scr_top img{rotate:-90deg;filter: var(--filter-white);}

        /* over */
            @media (hover:hover) and (pointer:fine){
                #footer .sns_list a:hover{background: var(--point-color01);}
            }

    @media (max-width:1500px){
        #footer .copy dt{font-size: clamp(32px, 8vw, 120px);}
        #footer .copy dd{font-size: clamp(28px, 7.4vw, 110px);translate: 0 clamp(-15px, -1vw, 0px);}
        #footer .copy dd a{padding-left: clamp(0px, 0.5vw, 7px); margin-top: clamp(-5px, -0.4vw, 0px);}
    }
    @media (max-width:1023px){
        #footer{padding-block: clamp(50px, 7.8vw, 78px);}
        #footer .w_custom{gap: clamp(20px, 2.9vw, 29px);}
        #footer .ftr_title{padding-right: 0;}
        #footer .addr_list{gap: clamp(10px, 1.8vw, 13px);}
        #footer .addr_list > li{gap: clamp(10px, 1.8vw, 13px) clamp(25px, 4vw, 40px);}
        #footer .addr_list .desc{gap: clamp(20px, 2.9vw, 24px);}
        #footer .link_list > li:not(:last-child):after{margin-inline: clamp(15px, 2.9vw, 29px);}
        #footer .sns_list{position: relative;inset: auto;gap: clamp(10px, 1.9vw, 14px);margin-top: 5px;}
        #footer .sns_list a{width: clamp(30px, 4.5vw, 40px); height: clamp(30px, 4.5vw, 40px);}
        #footer .copy{margin-top: clamp(40px, 7.3vw, 73px); gap: clamp(12px, 2.1vw, 16px);}

        .scr_top{width: clamp(40px, 6.4vw, 64px);height: clamp(40px, 6.4vw, 64px);}
    }
    @media (max-width:860px){
        .scr_top{right:15px;bottom: 20px;}
    }
    @media (max-width:640px){
        #footer .link_list > li:not(:last-child):after{width: 3px;}
        #footer .copy dd{gap: 5px;}
    }