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

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

───────────────────────────────────────────────────────────*/
.slick-slide, .swiper-slide {touch-action: auto !important;}
/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
	#wrap {position:relative;width:100%; box-sizing: border-box; overflow: clip;}
    #container, .w_custom{position: relative; width: calc(100% - 60px); max-width: 1240px; margin-inline: auto; box-sizing: border-box;}
    #container{background: var(--point-white);padding-block:60px 150px; }
    .for_m{display: none;}

    @media (max-width:1600px){
        .for_pc{display: none;}
    }
    @media (max-width:1023px){
        #container{padding-block:clamp(50px, 10vw, 100px) clamp(100px, 15vw, 150px);}
    }
    @media (max-width:860px){
        #container, .w_custom{width: calc(100% - 30px);}
    }
    @media (max-width:750px){
        .for_pct{display: none;}
        .for_m{display: block;}
    }
    @media (max-width:320px){
        #container,.w_custom{width: calc(100% - 20px);}
    }


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

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

───────────────────────────────────────────────────────────*/
    #header{position: sticky;top:0;background: var(--point-white);width: 100%;height: 130px;z-index: 100;box-sizing: border-box;box-shadow: 0 1px 0 var(--border-color03);transition: all 0.4s;}
    #header .w_custom{max-width: 1760px;height: 100%;display: flex;align-items: center;justify-content: space-between;gap: 30px;}
    #header .cont{height: 100%;display: flex;align-items: center;gap: clamp(30px, 3vw, 57px);transition: all 0.4s;}
    #header .logo{height: 100%;}
    #header .logo a{display: flex;align-items: center;height: 100%;padding-block: 18px;box-sizing: border-box;max-width: 172px;}
    #header .gnb{position: relative;display: flex;height: 100%;font-size: var(--title-20);box-sizing: border-box;}
    #header .gnb > li{position: relative; height: 100%; font-size: inherit; font-weight: 600; color: var(--black-color01);}
    #header .gnb > li > a{display: flex;align-items: center;height: 100%;box-sizing: border-box;font-family: var(--font-type02);transition: all 0.4s;padding-inline: clamp(25px, 1.6vw, 30px);}
    #header .gnb .dep02{position: absolute;top:100%;left: 50%;transform: translateX(-50%);width: 180px;background: var(--point-white);padding-block: 15px;text-align: center;border: 1px solid var(--border-color01);border-radius: var(--radius-10);opacity: 0;pointer-events: none;transition: all 0.4s;}
    #header .gnb .dep02 > li{position: relative;font-size: 85%;}
    #header .gnb .dep02 > li > a{display: block;padding: 8px 20px;font-weight: 500;color: var(--black-color05); transition: all 0.4s; font-family: var(--font-type02); }
    #header .info{display: flex; align-items: center; gap: 25px;}
    #header .lang_desc{position: relative;font-size: var(--title-20);display: inline-flex;}
    #header .lang_desc dt{position: relative;font-size:max(13px, 75%);font-weight: 500;color: var(--black-color01);border: 1px solid rgba(17,17,17,0.6);border-radius: 50px;box-sizing: border-box;display: inline-flex;align-items: center;gap: 8px;padding: 11px 40px 11px 16px; cursor: pointer; transition: all 0.4s;}
        #header .lang_desc dt:before{display: inline-flex; content:''; width: 24px; aspect-ratio: auto 1; background: url('../images/skin/lang_desc.svg') no-repeat center / 100% auto;}
        #header .lang_desc dt:after{position: absolute;content:'';width: 9px;height: 5px;background: var(--black-color01);top:50%;right:16px;transform: translateY(-50%);background: var(--black-color01);clip-path: polygon(50% 100%, 0 0, 100% 0); transition: all 0.4s;}
        #header .lang_desc dt.on:after{transform: translateY(-50%) scale(-1,-1);}
    #header .lang_desc dd{position: absolute;top: calc(100% + 5px);left: 50%;transform: translateX(-50%);width: 100%;text-align: center;background: var(--point-white);border: 1px solid rgba(17,17,17,0.6);border-radius: var(--radius-10);padding-block: 10px;box-sizing: border-box;opacity: 0;pointer-events: none;transition: all 0.4s;}
        #header .lang_desc:has(dt.on) dd{opacity: 1; pointer-events: all;}
    #header .lang_desc dd a{display: block;font-size: max(13px, 75%);font-weight: 500;color: var(--black-color01);padding: 5px 15px;}
    #header .lang_desc dd a.on{color: var(--point-color01);}
    #header .allCate{display: none;flex-direction: column;justify-content: space-between;width: 30px;height: 20px;}
    #header .allCate span{width: 100%;height: 3px;background: var(--black-color01);transition: all 0.4s;}
        #header .allCate span:first-child{background: var(--point-color01);}

        /* on */
        #header .gnb > li.on { color: var(--point-color01); }

        /* 메인 */
            body:has(.main_cont) #header{position: fixed; left:0;}
            body:has(.main_cont) #header:not(.on){box-shadow: none;}
            body:has(.main_cont) #header:not(.on){background: none;}
            body:has(.main_cont) #header:not(.on) :is(.cont, .lang_desc dt, .allCate span:not(:first-child)){filter: var(--filter-white);}

        /* over */
            @media (hover:hover) and (pointer:fine){
                body:has(.main_cont) #header:hover{background: var(--point-white);}
                body:has(.main_cont) #header:hover :is(.cont, .lang_desc dt, .allCate span:not(:first-child)){filter:none;}
                #header .gnb > li:not(.on):hover > a{color: var(--point-color01);}
                #header .gnb > li:hover .dep02{opacity: 1;pointer-events: all;}
                #header .gnb .dep02 > li:hover > a{color: var(--black-color01);}
                #header .allCate:hover span{background: var(--point-color01);}
            }

    @media (max-width:1023px){
        #header{height: clamp(65px, 13vw, 130px);}
        #header .logo a{max-width: clamp(120px, 17.2vw, 172px);}
        #header .gnb{display: none;}
        #header .info{gap: clamp(20px, 2.5vw, 25px);}
        #header .lang_desc dt{padding-block: clamp(7px, 1.1vw, 11px); padding-inline:clamp(10px, 1.6vw, 16px) clamp(34px, 4vw, 40px);}
        #header .allCate{display: inline-flex;width: clamp(27px, 3.5vw, 30px);height: clamp(14px, 2.5vw, 20px);}
    }
    @media (max-width:640px){
        #header .lang_desc dt{font-size: 0;border: 0;padding: 0;gap: 0;}
            #header .lang_desc dt:after{display: none;}
        #header .lang_desc dd{width: 60px;}
    }

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

	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;clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);transition: all 0.6s; }
        #aside.on{opacity: 1;clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
    body:has(#aside.on){overflow: hidden; touch-action: none;}
    #aside .w_custom{flex-shrink: 0;}
    #aside .gnb{width: 100%;font-size: var(--title-20);letter-spacing: 0;font-family: var(--font-type02);}
    #aside .gnb > li{display: flex; align-items: center; justify-content: space-between; gap: 30px; color: var(--point-white); border-bottom: 1px solid rgba(255,255,255,0.2)}
    #aside .gnb > li > a{display: block;font-size: 240%;font-weight: 500;line-height: 1.2;padding:30px 0;flex-shrink: 0;transition: all 0.4s;}
    #aside .gnb .dep02{display: flex;flex-wrap: wrap;justify-content: flex-end;}
	#aside .gnb .dep02 > li{display:flex;align-items: center;flex-wrap: wrap;}
    #aside .gnb .dep02 > li > a{display: inline-block;font-size: 100%;font-weight: 300;padding:10px 0;transition: all 0.4s;opacity: 0.6;}
	#aside .gnb .dep02 > li > a:has(~ .dep03){padding-right: 25px;}
    #aside .gnb .dep02 > li:not(:last-child):after{display: inline-flex; content:'/'; margin:0 20px; opacity: 0.6;} 
    #aside .gnb .dep02 > li:has(.dep03){width: 100%; justify-content: inherit;}
    #aside .gnb .dep02 > li:has(.dep03):after{display: none;}
    #aside .gnb .dep03{display: flex;flex-wrap: wrap;gap: 0 20px;}
	#aside .gnb .dep03 > li > a{display:block;font-size: 90%;font-weight: 400;opacity: 0.4;padding-block: 8px;}
    #aside .utility{position: absolute;top:50px;right:50px;display: flex;align-items: center;gap: 30px;}
    #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);}
    #aside .link_list{display: flex;flex-wrap: wrap;justify-content: center;gap: 20px;font-size: var(--title-20);margin-top: 50px;}
    #aside .link_list > li > a{position: relative; display: flex; align-items: center; justify-content: center; height: 50px; padding:0 24px; text-align: center; box-sizing: border-box; border-radius: 60px; box-shadow: inset 0 0 0 1px var(--black-color11); font-size: 90%; font-weight: 600; color: var(--black-color11); letter-spacing: 0.01em; transition: all 0.4s; overflow: hidden;}
    #aside .link_list > li > a:before{position: absolute; content:''; top:0; left:0; background: var(--black-color11); width: 100%; height: 100%; clip-path: circle(0 at 0 100%); transition: all 0.6s;}
    #aside .link_list > li:last-child > a:before{background: var(--point-color01);}
    #aside .link_list > li > a span{position: relative; z-index: 3; filter: var(--filter-white); transition: all 0.4s;}
    

        /* over */
            @media (hover:hover) and (pointer:fine){
                #aside .gnb > li:hover > a{color: var(--point-color01);}
                #aside .gnb .dep02 > li > a:hover{opacity: 1;}
                #aside .link_list > li > a:hover:before{clip-path: circle(150% at 0 100%);}
            }

    @media (max-width:1600px){
        #aside .utility{top:30px; right: 30px;}
    }
    @media (max-width:1023px){
        #aside{padding-block: clamp(80px, 12vw, 120px);}
        #aside .close_btn{width: 35px; height: 35px;}
        #aside .link_list{margin-top: clamp(30px, 5vw, 50px);}
		#aside .utility{gap:20px;}
        #aside .hd_lang { position: absolute; top: 33px; right: 100px; display: flex;justify-content: center; align-items: center; gap: 30px; font-size: var(--title-20);text-align: center;letter-spacing: 0.01em;}
        #aside .hd_lang > li{position: relative;height: 100%;}
        #aside .hd_lang > li > a{display: flex;align-items: center;height: 100%;font-weight: 600;color: var(--point-white);transition: all 0.4s; font-size: 120%; }
        #aside .hd_lang > li.on > a { color: var(--point-color01); }
    }
    @media (max-width:860px){
        #aside .gnb > li{display: block; padding: 20px 0;}
        #aside .gnb > li > a{width: 100%; padding:0;}
        #aside .gnb .dep02{margin-top: 10px;justify-content: flex-start;}
		#aside .utility{top:15px; right: 15px; }
        #aside .close_btn{width: 30px; height: 30px;}
        #aside .link_list > li > a{height: 45px;}

        #aside .hd_lang { top: 16px; }
    }
    @media (max-width:640px){
        #aside .gnb > li > a{font-size: 220%;}
        #aside .gnb .dep02 > li > a{padding:7px 0;}
        #aside .link_list{gap: 10px;}
        #aside .link_list > li > a{height: 40px; padding: 0 20px;}
        #aside .gnb .dep02 > li:not(:last-child):after{margin:0 15px;}

        #aside .hd_lang { right: 90px; }
    }
    @media (max-width:479px){
        #aside .gnb > li{padding: 15px 0;}
        #aside .gnb > li > a{font-size: 200%;}
        #aside .gnb .dep02{margin-top: 5px;}
        #aside .gnb .dep02 > li > a{font-size: 90%;}
        #aside .gnb .dep03{width: 100%;padding-bottom: 8px;}

        #aside .hd_lang { top: 18px; }
    }
    
/*───────────────────────────────────────────────────────────

    MAIN | index.html

───────────────────────────────────────────────────────────*/
	/* 비주얼 */
        .main_visual{position: relative; background: var(--black-color01); overflow: clip;}
        .main_visual .slick-slide{position: relative; height: 960px; overflow: clip; box-sizing: border-box;}
        .main_visual .link{position: absolute; inset: 0; z-index: 5;}
        .main_visual .thumb{display: block; width: 100%; height: 100%; background: no-repeat center / cover; box-sizing: border-box; transform: scale(1.1);}
            .main_visual .active .thumb{transform: scale(1); transition: all 5s;}
        .main_visual .txt_box{position: absolute;top: 39.5%;left:50%;transform: translateX(-50%);z-index: 3;font-size: var(--title-20);color: var(--point-white);display: flex;flex-direction: column;gap: 20px; filter: blur(5px); }
            .main_visual .active .txt_box{filter: blur(0px);transition: all 1.2s;transition-delay: 0.2s;}
        .main_visual .txt_box h2{font-size: 300%;font-weight: 500;line-height: 1.33;font-family: var(--font-type02);letter-spacing: 0.03em;}
        .main_visual .txt_box p{font-size: 90%;font-weight: 300;line-height: 1.77;letter-spacing: -0.05em;}

        .main_visual .controller{position: absolute;left:50%;bottom: clamp(30px, 9%, 83px);transform: translateX(-50%);display: flex;flex-wrap: wrap;align-items: center;gap: 37px;font-size: 0;}
        .main_visual .slick-dots{display: flex;flex-wrap: wrap;align-items: center;gap: 14px;}
        .main_visual .slick-dots button{position: relative;width: 14px;aspect-ratio: auto 1;box-sizing: border-box;transition: all 0.4s;}
        .main_visual .slick-dots button:before{position: absolute;content:'';width: calc(100% - 4px);aspect-ratio: auto 1;top:50%;left:50%;transform: translate(-50%, -50%);background: var(--point-white);box-shadow: inset 0 0 0 2px var(--point-white);border-radius: 100%;transition: all 0.4s;}
        .main_visual .slick-dots .slick-active button:before{width: 100%; background: none; }
        .main_visual .btn_box{display: inline-flex;align-items: center;gap: 18px;}
        .main_visual .slick-arrow{position: relative;width: 23px;height: 13px;background: url('../images/skin/main_arw.svg') no-repeat center / 100% auto;}
            .main_visual .slick-arrow.next{transform: scale(-1,-1);}
        .main_visual .slickBtn{position: relative; width: 10px; height: 12px;}
            .main_visual .slickBtn{&:before, &:after{position: absolute; content:''; top:0; left:0; width: 3px; height: 100%; background: var(--point-white);}}
            .main_visual .slickBtn:after{position: absolute; left:auto; right:0;}
            .main_visual .slickBtn.play:before{width: 100%; clip-path: polygon(0 0, 0% 100%, 100% 50%);}
            .main_visual .slickBtn.play:after{opacity: 0;}
        .main_visual .scr_wrap{position: absolute;left:50%;bottom: clamp(30px, 9%, 84px);transform: translateX(-50%);max-width: 1760px;pointer-events: none;}
        .main_visual .scr_dwn{font-size: var(--title-20);pointer-events: all;cursor: pointer;display: flex;align-items: center;flex-direction: row-reverse;gap: 20px;writing-mode: sideways-lr;margin-left: auto;}
        .main_visual .scr_dwn dt{font-size: 80%;font-weight: 300;color: var(--point-white);font-family: var(--font-type03);letter-spacing: 0.015em;}
        .main_visual .scr_dwn dd{position: relative;width: 24px;height: 40px;border: 2px solid rgba(255,255,255,0.7);border-radius: 30px;overflow: hidden;box-sizing: border-box;}
            .main_visual .scr_dwn dd:before{position: absolute;content:'';width: 4px;height: 4px;border-radius: 100%;background: var(--point-white);top: 4px;left: 50%;margin-left: -2px;}
            .main_visual .scr_dwn dd:before{animation-name: scrDwn; animation-duration:1.5s; animation-iteration-count:infinite; animation-direction:alternate;  animation-fill-mode: forwards; transition-timing-function:linear;}
            @keyframes scrDwn {0% {top:4px;}100% {top:calc(100% - 8px);}}


        @media (max-width:1023px){
            .main_visual .slick-slide{height: clamp(580px, 96vw, 960px);}
            .main_visual .txt_box{gap: clamp(10px, 2vw, 20px);}
            .main_visual .txt_box h2{font-size: 270%;}
            .main_visual .slick-dots button{width: clamp(12px, 2vw, 14px);}
            .main_visual .controller{gap: clamp(18px, 4vw, 37px);}
            .main_visual .btn_box{gap: clamp(15px, 2vw, 18px);}
        }
        
        @media (max-width:640px){
            .main_visual .txt_box h2{font-size: 240%;}
        }
        @media (max-width:479px){
            .main_visual .txt_box{top:auto;bottom: 19.5%;}
            .main_visual .txt_box h2{font-size: 200%;}
            .main_visual .txt_box p{font-size: max(14px, 80%);line-height: 1.5;}
            .main_visual .controller{bottom:30px;}
            .main_visual .slick-dots{gap: 11px;}
            .main_visual .slick-dots button:before{width: calc(100% - 2px);}
            .main_visual .slick-arrow{width: 20px;}
            .main_visual .scr_wrap{display: none;}
        }

    /* 공통 */
        .main_cont .w_custom{max-width: 1600px;}
        .main_title{position: relative;font-size: var(--title-20);display: flex;flex-direction: column;align-items: flex-start;gap: 45px;}
            .main_title.cen{align-items: center; text-align: center;}
        .main_title h5{font-size: 110%;font-weight: 500;color: var(--black-color01);line-height: 1.5;letter-spacing: -0.05em;}
        .main_title h6{font-size: inherit;font-weight: 400;color: var(--black-color05);line-height: 1.5;letter-spacing: -0.05em;}
        .main_title .btn_box{margin-top: 15px;}
        .more_btn{position: relative;display: block;width: fit-content;background: var(--point-white);box-sizing: border-box;font-size: var(--title-20);font-family: var(--font-type02);text-align: center;letter-spacing: -0.03em;line-height: 1.5;border-radius: 30px;overflow: clip;transition: all 0.6s;}
            .more_btn:before{position: absolute; content:''; inset: 0; border:1px solid var(--border-color02); border-radius: inherit; box-sizing: border-box; transition: inherit;}
            .more_btn:after{position: absolute; content:''; inset: 0; background: var(--point-color01); clip-path: circle(0 at 0 100%); transition: inherit;}
        .more_btn span{position: relative;font-size: inherit;font-weight: 500;color: var(--black-color00);padding: 15px 41px;display: flex;align-items: center;justify-content: center;transition: inherit;z-index: 3;}
        .arw_btn{display: block; width: fit-content; font-size: var(--title-20); font-family: var(--font-type02);}
        .arw_btn span{display: inline-flex;align-items: center;font-size: inherit;font-weight: 400;color: var(--black-color00);line-height: 1;gap: 5px;}
        .arw_btn span:after{display: inline-flex;content:'';width: 8px;height: 8px;border: solid var(--black-color00);border-width: 0 1px 1px 0;transform: rotate(-45deg);box-sizing: border-box;}

            /* over */
                @media (hover:hover) and (pointer:fine){
                    .more_btn:hover:before{border-color:var(--black-color00);}
                    .more_btn:hover:after{clip-path: circle(150% at 0 100%);}
                    .more_btn:hover span{filter: var(--filter-white);}
                }

        @media (max-width:1023px){
            .main_title{gap: clamp(25px, 4.5vw, 45px);text-wrap: balance;}
            .main_title .btn_box{margin-top: clamp(0px, 1.5vw, 15px);}
            .more_btn span{padding: clamp(10px, 2vw, 15px) clamp(23px, 4.5vw, 41px);}
        }
        @media (max-width:479px){
            .main_title h6{font-size: max(14px, 85%);line-height: 1.57;}
            .more_btn span{font-size: max(14px, 85%);}
        }

    /* 인트로 */
        .main_intro{position: relative;padding-block: 201px 210px;}
        .main_intro .logo{position: relative;display: block;width: 55%;max-width: 380px;aspect-ratio: 3.52;background: var(--black-color00);clip-path: url('#logoClip');transform: translate(-50%, -50%);transform: scale(1.8);opacity: 0;transition-delay: 0s;}
            .main_intro .logo:before{position: absolute;content:'';width: 330px;aspect-ratio: auto 1;background: var(--point-color01);filter: blur(150px);top:-20px;left:0;transform: translateX(-100%);pointer-events: none;}
            .main_intro .logo:before{animation-name: introLogo; animation-duration:3s; animation-iteration-count:infinite; animation-direction:alternate;  animation-fill-mode: forwards; transition-timing-function:linear;}
            @keyframes introLogo {0% {left:0;}100% {left:150%;}}
            .main_intro .aos-animate .logo{transform: scale(1);opacity: 1;transition: all 2s;transition-delay: 0.4s;}

        .main_intro .main_title :is(h6, .btn_box){opacity: 0; transform: translateY(70px); transition-delay: 0s;}
            .main_intro .main_title.aos-animate :is(h6, .btn_box){opacity: 1; transform: translateY(0); transition: all 2s;transition-delay: 1s;}

        @media (max-width:1023px){
            .main_intro{position: relative;padding-block: clamp(80px, 20vw, 200px);}
            .main_intro .logo:before{width: clamp(200px, 33vw, 330px);filter: blur(clamp(75px, 15vw, 150px));}
        }

    /* 브랜드 */
        .main_brand{position: relative; font-size: var(--title-20);}
        .main_brand:before{position: absolute;content: 'BRAND';top: -6px;left: -18px;font-size: 500%;font-weight: 700;-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: #FFF;line-height: 1;font-family: var(--font-type02);writing-mode: tb;color: var(--trans-color);opacity: 0.5;z-index: 5;}
        .main_brand .w_custom{display: flex;align-items: flex-start;}
        .main_brand .bnr_list{font-size: var(--title-20);width: 50%;height: 100vh;position: sticky;top: 0;}
        .main_brand .bnr_list > li{position: absolute; inset: 0; width: calc(100% + 140px);margin-left: -160px;background: var(--black-color00); transition: all 0.4s;}
            .main_brand .bnr_list > li:not(.on){opacity: 0; pointer-events: none;}
        .main_brand .bnr_list .link{position: absolute; inset: 0; z-index: 5; font-size: 0;}
        .main_brand .bnr_list .thumb{position: relative;display: block;width: 100%;height: 100%;overflow: clip;}
        .main_brand .bnr_list .thumb:after{position: absolute; content:''; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 34.03%, #000 100%);opacity: 0.6;}
        .main_brand .bnr_list .thumb img{opacity: 0.8; width: 100%; height: 100%; object-fit: cover;}
        .main_brand .bnr_list .desc{position: absolute;inset: 0;display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-end;gap: 27px;padding: clamp(50px, 7.5vw, 140px) clamp(50px, 8.5vw, 160px);padding-left: 160px;color: var(--point-white);}
        .main_brand .bnr_list .desc dt{font-size: 250%;font-weight: 600;font-family: var(--font-type02);line-height: 1.1;letter-spacing: -0.04em;}
        .main_brand .bnr_list .desc dd{font-size: inherit;font-weight: 300;line-height: 1.5;letter-spacing: -0.05em;text-wrap: balance;}
        .main_brand .info_list{position: relative;width: 50%;display: flex;align-items: flex-start;flex-wrap: wrap;gap: clamp(40px, 4.5vw, 80px);padding: clamp(40px, 4.5vw, 80px) 0 350px clamp(40px, 4.5vw, 80px);box-sizing: border-box;}
        .main_brand .info_list > li{position: relative;box-shadow: inset 0 0 0 1px var(--border-color02);border-radius: var(--radius-10);box-sizing: border-box;width: calc(100% / 2 - clamp(40px, 4.5vw, 80px) / 2);padding: clamp(35px, 3vw, 50px) clamp(30px, 2.5vw, 40px);transition: all 0.4s;}
            .main_brand .info_list > li:before{position: absolute; content:''; inset: 0; border:2px solid var(--point-color01); box-sizing: border-box; opacity: 0; transition: all 0.4s; pointer-events: none; border-radius: inherit;}
            .main_brand .info_list > li:nth-child(2n){transform: translateY(clamp(50px, 12.6vw, 240px));}
        .main_brand .info_list .desc dt{width: 70%;height: 50px;font-size: 0;display: flex;align-items: flex-start;}
            .main_brand .info_list .desc dt + dd{margin-top: clamp(20px, 1.7vw, 32px);}
            .main_brand .info_list > li:nth-child(4) .desc dt{height: 63px;}
            .main_brand .info_list > li:nth-child(5) .desc dt{height: 43px;}
            .main_brand .info_list > li:nth-child(6) .desc dt{height: 73px;}
            .main_brand .info_list > li:nth-child(7) .desc dt{width: auto;height: 61px;}
            .main_brand .info_list > li:nth-child(8) .desc dt{width: auto;height: 57px;}
            .main_brand .info_list > li:nth-child(9) .desc dt{width: auto;height: 54px;}
            .main_brand .info_list > li:nth-child(10) .desc dt{width: auto;height: 58px;}
        .main_brand .info_list .desc dd{font-size: 125%;font-weight: 400;color: var(--black-color00);line-height: 1.44;letter-spacing: -0.03em;text-wrap: balance;}
        .main_brand .info_list .arw_btn{position: relative;margin-top: clamp(20px, 2vw, 39px);}

            /* over */
                @media (min-width:1024px){
                    .main_brand .info_list > li:hover:before{opacity: 1;}
                }

        @media (max-width:1400px){
            .main_brand .info_list .desc dd{font-size: 110%;}
        }
        @media (max-width:1300px){
            .main_brand .info_list .desc dd{font-size: 100%;}
        }
        @media (max-width:1200px){
            .main_brand .info_list .desc dd{font-size: 90%;}
        }
        @media (max-width:1023px){
            .main_brand .w_custom{display: block;}
            .main_brand .bnr_list{position: relative;inset: auto;width: calc(100% + 60px);margin-left: -30px;height: auto;min-height: 300px;aspect-ratio: auto 1.25;overflow: clip;}
            .main_brand .bnr_list > li{width: 100%; margin-left: -0;}
            .main_brand .bnr_list .desc{padding: clamp(30px, 6vw, 60px) clamp(20px, 4vw, 40px);gap: clamp(12px, 3vw, 27px);}
            .main_brand .info_list{width: calc(100% + 60px);margin-left: -30px;padding:clamp(20px, 4vw, 40px) 30px;flex-wrap: nowrap;gap: clamp(10px, 2vw, 20px);border-bottom: 1px solid var(--border-color03); overflow: hidden; overflow-x: auto;}
                .main_brand .info_list {-ms-overflow-style: none; scrollbar-width: none;}
                .main_brand .info_list::-webkit-scrollbar {display: none; }
            .main_brand .info_list > li{width: clamp(100px, 20vw, 200px);height: clamp(40px, 8vw, 80px);flex-shrink: 0;display: flex;align-items: center;justify-content: center;text-align: center;padding: clamp(11px, 2.2vw, 22px);}
                .main_brand .info_list > li:nth-child(2n){transform: none;}
                .main_brand .info_list > li:before{border: 1px solid var(--black-color00);}
                .main_brand .info_list > li.on:before{opacity: 1;}
            .main_brand .info_list .desc{width: 100%;height: 100%;}
            .main_brand .info_list .desc dt{width: 100% !important;height: 100% !important;font-size: 0;align-items: center;justify-content: center;}
            .main_brand .info_list .desc dd{display: none;}
            .main_brand .info_list .arw_btn{display: none;}
        }
        @media (max-width:860px){
            .main_brand :is(.bnr_list, .info_list){width: calc(100% + 30px);margin-left: -15px;}
            .main_brand .info_list{padding-inline: 15px;}
            .main_brand .bnr_list .desc dt{font-size: 230%;}
        }
        @media (max-width:640px){
            .main_brand:before{display: none;}
            .main_brand .bnr_list .desc dt{font-size: 210%;}
            .main_brand .bnr_list .desc dd{font-size: 90%;}
        }
        @media (max-width:479px){
            .main_brand .bnr_list .desc dt{font-size: max(30px, 185%);}
            .main_brand .bnr_list .desc dd{font-size: max(13px, 80%);line-height: 1.53;}
        }
        @media (max-width:320px){
            .main_brand :is(.bnr_list, .info_list){width: calc(100% + 20px);margin-left: -10px;}
            .main_brand .info_list{padding-inline: 10px;}
        }

    /* 룩북 */
        .main_look{padding-block: 200px;}
        .main_look .waveSwiper .swiper-wrapper{transition-timing-function: linear;}
        .main_look .waveSwiper .swiper-slide{width: 500px; aspect-ratio: auto 1.38; margin-right: clamp(30px, 3.5vw, 60px);}

        @media (max-width:1023px){
            .main_look{padding-block: clamp(80px, 20vw, 200px);}
            .main_look .waveSwiper .swiper-slide{width: clamp(250px, 50vw, 500px);}
        }

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

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    #footer{position: relative;background: var(--point-color01);padding-block: 100px;box-sizing: border-box; z-index: 5;}
    #footer .w_custom{max-width: 1600px;}
    #footer .top_sec{padding-bottom: 80px;box-sizing: border-box;}
    #footer .logo{filter: var(--filter-white);width: 27%;max-width: 151px;}
    #footer .link_list{position: absolute;top: 0;right: 0;font-size: var(--title-20);display: flex;flex-direction: column;align-items: flex-end;gap: 20px;text-align: right;}
    #footer .link_list > li{position: relative;font-size: 90%;font-weight: 400;line-height: 1.33;filter: var(--filter-white);}
    #footer .link_list strong{font-weight: 600;}
    #footer .main_title :is(h5, h6){filter: var(--filter-white);font-weight: 700;}
	#footer .main_title h6{font-family: var(--font-type02);letter-spacing: 0;font-size: inherit;}
    #footer address{display: flex;flex-wrap: wrap;align-items: flex-end;justify-content: space-between;gap: 23px;}
    #footer .addr_list{display: flex;flex-direction: column;margin-top: 10px;}
    #footer .addr_list > li{display: flex;flex-wrap: wrap;align-items: baseline;}
    #footer .addr_list .desc{display: inline-flex;font-size: var(--title-20);align-items: baseline;gap: 4px;}
        #footer .addr_list .desc:not(:last-child) dd:after{display: inline-flex;content:'';width: 1px;height: 12px;background: rgba(217, 217, 217, 0.5);margin-inline: 12px 16px;}
    #footer .addr_list .desc :is(dt, dd){font-size: 90%;font-weight: 400;color: var(--black-color05);line-height: 1.5;letter-spacing: -0.04em;filter: var(--filter-white);}
    #footer .addr_list .desc dt{flex-shrink: 0;}
    #footer .addr_list .desc:has(dt) :is(dt, dd){font-family: var(--font-type02);}
    #footer .copy{display: flex;flex-direction: column;align-items: flex-end;text-align: right;gap: 10px;font-size: var(--title-20);}
    #footer .copy :is(dt, dd){font-size: 85%; font-weight: 400; color: var(--black-color05); line-height: 1.41; font-family: var(--font-type02); filter: var(--filter-white); opacity: 0.9;}
    #footer .copy dd{opacity: 0.5;}

    .scr_top{position: fixed;right: clamp(30px, 2.1vw, 40px);bottom: 30px;display: flex;align-items: center;justify-content: center;width: 60px;height: 60px;padding: 11px;box-sizing: border-box;background: var(--black-color00);border-radius: 100%;box-shadow: var(--shadow-01); opacity: 0; pointer-events: none; transition: all 0.4s; z-index: 9;}

    body:has(#header.on) .scr_top{opacity: 1; pointer-events: all;}

    @media (max-width:1023px){
        #footer{padding-block: clamp(40px, 10vw, 100px) clamp(20px, 5.5vw, 100px);}
        #footer .link_list{gap: clamp(15px, 2.5vw, 20px);}
        #footer .addr_list{margin-top: clamp(5px, 1vw, 10px);}
        #footer .copy{width: 100%;align-items: flex-start;text-align: left;gap: clamp(3px, 1vw, 10px);}

        .scr_top{width: clamp(40px, 6vw, 60px);height: clamp(40px, 6vw, 60px);bottom: clamp(20px, 3vw, 30px);}
    }
    @media (max-width:860px){
        .scr_top{right: 15px;}
    }
    @media (max-width:640px){
        #footer .top_sec{padding-bottom: 24px;}
        #footer .link_list{position: relative;flex-direction: row;align-items: flex-start;text-align: left;margin-top: 14px;}
    }
    @media (max-width:479px){
        #footer .main_title h5{font-size: max(14px, 85%);}
        #footer .link_list > li{font-size: max(13px, 80%);}
        #footer .addr_list .desc :is(dt, dd){font-size: max(13px, 80%);}
        #footer .addr_list .desc:not(:last-child) dd:after{opacity: 0;}
        #footer .copy :is(dt, dd){font-size: max(13px, 80%);}
    }