@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: 1500px; margin-inline: auto; box-sizing: border-box;}
    #container{padding-block:62px 150px; max-width: 1300px; }
    .no_data{padding-block: 30px; text-align: center; font-size: var(--title-16); font-weight: 400; color: var(--black-color05);}
    [class*="swiper-button"]:after{display: none;}
    .for_m{display: none;}

    
    @media (max-width:1200px){
        .for_pc{display: none;}
    }
    @media (max-width:1023px){
        #container{padding-block:clamp(40px, 6vw, 62px) clamp(100px, 15vw, 150px);}
    }
    @media (max-width:860px){
        #container, .w_custom{width: calc(100% - 30px);}
    }
    @media (max-width:640px){
        .for_m{display:inline-block;}
    }
    @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; background: var(--point-white); box-sizing: border-box;z-index: 100; transition: all 0.4s;}
        #header.on{box-shadow: 0 1px 0 var(--border-color01);}
    #header .w_custom{display: flex;align-items: center;justify-content: space-between;max-width: 1800px;height: 100%;}
    #header .logo{height: 100%;}
    #header .logo a{display: flex;align-items: center;max-width: 160px;height: 100%;padding-block: 15px;box-sizing: border-box;}
    #header .gnb{position: absolute;top:0;left:50%;translate: -50% 0;width: calc(100% - 350px);height: 100%;display: flex;justify-content: center;text-align: center;font-size: var(--title-20);}
    #header .gnb > li{position: relative;height: 100%;box-sizing: border-box;font-weight: 500;color: var(--black-color00); transition: all 0.4s;}
    #header .gnb > li > a{display: flex;align-items: center;justify-content: center;height: 100%;padding-inline: clamp(10px, 2.1vw, 40px);}
    #header .gnb .dep02{position: absolute;top:100%;left:50%;transform: translate(-50%);width: 180px;background: var(--point-color02);padding-block: 15px;box-shadow: var(--shadow-01);opacity: 0;pointer-events: none;border-radius: var(--radius-10);transition: all 0.4s;}
    #header .gnb .dep02 > li{font-size: 90%;font-weight: 400;color: var(--point-white);transition: all 0.4s;}
    #header .gnb .dep02 > li > a{display: block;padding: 8px 25px;}
    #header .link_box{display: flex; align-items: center; gap: 30px;}
    #header .allCate{display: flex;flex-direction: column;width: 32px;height: 29px;justify-content: space-between;}
    #header .allCate span{display: flex;width: 100%;height: 3px;background: var(--black-color00);border-radius: 10px;}
    #header .allCate span:first-child:before{display: inline-block; content:''; background: var(--point-color01);width: 18%;height: 100%;border-right: 4px solid var(--point-white);}

        /* over */
        @media (hover:hover) and (pointer:fine) {
            #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: 4px;}
        }

    @media (max-width:1023px){
        #header{height: clamp(65px, 13vw, 130px);}
        #header .gnb{display: none;}
        #header .allCate{width: clamp(28px, 3.2vw, 32px);height: clamp(22px, 2.9vw, 29px);}
    }
    @media (max-width:640px){
        #header .allCate span{height: 2px;}
    }

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

	Aside | outline/nav.html

───────────────────────────────────────────────────────────*/
    #aside{position: fixed;top:-100%;left:0;width: 100%;height: 100%;z-index: 999;background: var(--point-white);display: flex;flex-direction: column;overflow: hidden;overflow-y: auto;padding-block: 160px 100px;box-sizing: border-box;opacity: 0;transition: all 0.6s;justify-content: center;}
        #aside.on{top:0;opacity: 1;}
    body:has(#aside.on){overflow: hidden !important; touch-action: none;}
    #aside .w_custom{flex-shrink: 0; max-width: 1600px;}
    #aside .top_sec{position: absolute;top:0;left:0;width: 100%;height: 130px;}
    #aside .top_sec .w_custom{display: flex;align-items: center;justify-content: space-between;height: 100%;max-width: 1800px;}
	#aside .top_sec .logo{height:100%;padding-block: 15px;box-sizing: border-box;}
    #aside .gnb{width: 100%;font-size: var(--title-20);letter-spacing: 0;font-family: var(--font-type02);display: flex;flex-wrap:wrap;justify-content: center;gap:50px;}
    #aside .gnb > li{color: var(--black-color00);font-size:var(--title-20);width:calc(20% - 40px);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 .gnb > li > a{display: block;font-size:180%;color:inherit;font-weight: 600;line-height: 1.2;padding: 26px 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-color02);position: absolute;left:50%;top:0;transform:translate(-50%);transition:all 0.3s;}
    #aside .gnb .dep02{margin-top:8px;}
    #aside .gnb .dep02 > li{position: relative;}
    #aside .gnb .dep02 > li > a{display: inline-block;font-size:110%;font-weight:400;padding: 14px 0;transition: all 0.4s;color: var(--black-color06);}
    #aside .utility{position: relative;display: flex;align-items: center;gap: 30px;}
    #aside .close_btn{position: relative;width: 45px;height: 45px;z-index: 9;}
    #aside .close_btn span{position: absolute;top:50%;left:50%;transform: translate(-50%, -50%) rotate(45deg);width: 100%;height: 3px;background: var(--black-color00);}
    #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-color01);text-decoration: underline;text-underline-offset: 4px;text-decoration-thickness: 1px;}
				#aside .gnb .dep02:has(li:hover) li:not(:hover) > a{color:var(--black-color08);}
            }

	@media (max-width:1300px){
		#aside .gnb{gap:20px;}
		#aside .gnb > li{width:calc(20% - 16px);}
	}
    @media (max-width:1023px){
        #aside{padding-block: clamp(90px, 16vw, 160px) clamp(80px, 12vw, 120px);}
        #aside .top_sec{height: clamp(65px, 13vw, 130px)}
        #aside .close_btn{width: clamp(30px, 4.5vw, 45px);height: clamp(30px, 4.5vw, 45px);}
		#aside .utility{gap:20px;}
    }
    @media (max-width:860px){
		#aside{display: block;}
		#aside .gnb{flex-direction: column;gap:0;}
        #aside .gnb > li{display: block; padding: 20px 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: 10px;justify-content: flex-start;gap:0 12px;}
		#aside .gnb .dep02 li{width:calc(100% / 3 - 8px);}
		#aside .gnb .dep02 > li > a{padding:12px 0;}
    }
    @media (max-width:640px){
        #aside .close_btn span{height: 2px;}
        #aside .gnb > li > a{font-size: 220%;}
		#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{padding: 15px 0;}
        #aside .gnb > li > a{font-size: 200%;}
        #aside .gnb .dep02{margin-top: 5px;}
        #aside .gnb .dep02 > li > a{font-size: 90%;}
    }
	
/*───────────────────────────────────────────────────────────

    MAIN | index.html

───────────────────────────────────────────────────────────*/
    /* 공통 */
        .main_title{position: relative;display: flex;flex-direction: column;align-items: flex-start;gap: 33px;font-size: var(--title-20);box-sizing: border-box;}
            .main_title.hd{margin-bottom: 50px;}
            .main_title.hd_lg{margin-bottom: 70px;}
        .main_title h2{font-size: 300%;font-weight: 500;color: var(--black-color00);line-height: 1.45;letter-spacing: -0.06em;}
        .main_title h2 strong{font-weight: 600;}
        .main_title h2:has(small){display: flex;align-items: center;flex-wrap: wrap;gap: 0 34px;}
        .main_title h2 small{font-size: max(15px, 33.3%);font-weight: 400;color: var(--black-color03);letter-spacing: -0.06em;line-height: 1.6;padding-top: 18px;}
        .main_title h2 strong{font-weight: 600;}
        .main_title h3{font-size: 250%;font-weight: 500;color: var(--black-color00);line-height: 1.3;letter-spacing: -0.03em;}
        .main_title h4{font-size: 170%; font-weight: 500; color: var(--black-color00); line-height: 1.4; letter-spacing: -0.05em;}
        .main_title h5{font-size: 110%; font-weight: 600; color: var(--black-color03); line-height: 1.63; letter-spacing: -0.05em;}
        .main_title h6{font-size: inherit;font-weight: 400;color: var(--black-color04);line-height: 1.6;letter-spacing: -0.06em;}
            .main_title h6 + h2{margin-top: -15px;}
            .main_title h6 + h3{margin-top: -16px;}
            .main_title h6 + h4{margin-top: -20px;}
        .main_title h6 em{font-weight: inherit; color: var(--point-color01); font-family: var(--font-type02); letter-spacing: 0;}
        .main_title h6 strong{font-weight: 500;color: var(--black-color03);font-family: var(--font-type02);letter-spacing: 0;}
        .main_title p{font-size: 90%;font-weight: 400;color: var(--black-color05);line-height: 1.89;letter-spacing: -0.06em;}
        .main_title .more_view{margin-top: 27px;}

        .more_view{position: relative;display: block;width: fit-content;font-size: var(--title-20);letter-spacing: -0.05em;border-radius: 50px;background: var(--point-white);overflow: clip;}
            .more_view:before{position: absolute;content:'';inset: 0;border:1px solid var(--black-color00);border-radius: inherit;box-sizing: border-box;}
            .more_view:after{position: absolute; content:''; inset: 0; background: var(--point-color01); clip-path: circle(0 at 0 100%); transition: all 0.6s;}
        .more_view span{position: relative;display: flex;align-items: center;justify-content: center;gap: 16px;font-size: 90%;font-weight: 400;color: var(--black-color03);text-align: center;min-width: 220px;height: 60px;z-index: 3;padding: 0 20px 3px;box-sizing: border-box;transition: all 0.6s;}
        .more_view span:after{display: inline-flex;content:'';width: 22px;height: 14px;background: url('../images/skin/more_arw.svg') no-repeat center / 100% auto;filter: var(--filter-white);margin-left: -38px;opacity: 0;transition: all 0.6s;}

        .main_title:has(.controller){padding-right: 100px;}
        .main_cont .controller{position: absolute;right:0;bottom: 6px;display: flex;gap: 24px;}
        .main_cont .controller [class*="swiper-button"]{position: relative;inset: auto;margin:0;width: 20px;height: 20px;}
            .main_cont .controller [class*="swiper-button"]:before{position: absolute;content:'';width: 76%;aspect-ratio: auto 1;border:solid var(--black-color00);border-width: 0 0 2px 2px;box-sizing: border-box;top: 50%;left: 61%;translate: -50% -50%;rotate: 45deg;}
            .main_cont .controller [class*="swiper-button"].swiper-button-next{transform: scale(-1,-1);}
            .main_cont .controller [class*="swiper-button"].swiper-button-disabled{opacity: 0.3;}

            /* over */
            @media (hover:hover) and (pointer:fine) {
                .more_view:hover:after{clip-path: circle(150% at 0 100%);}
                .more_view:hover span{color: var(--point-white);}
                .more_view:hover span:after{margin-left: 0; opacity: 1;}
            }
        @media (max-width:1200px){
            .main_title{text-wrap: balance;}
        }
        @media (max-width:1023px){
            .main_title{gap: clamp(12px, 3.3vw, 33px); }
                .main_title.hd{margin-bottom: clamp(25px, 5vw, 50px);}
                .main_title.hd_lg{margin-bottom: clamp(40px, 7vw, 70px);}
            .main_title h2{font-size: 270%;}
            .main_title h2 small{padding-top: clamp(10px, 1.8vw, 20px);}
            .main_title h3{font-size: 240%;}
            .main_title h6 + h2{margin-top: clamp(-15px, -1.5vw, -5px);}
            .main_title h6 + h3{margin-top: clamp(-16px, -1.6vw, -5px);}
            .main_title h6 + h4{margin-top: clamp(-20px, -2vw, -5px);}
            .main_title .more_view{margin-top: clamp(10px, 2.7vw, 27px);}

            .more_view span{min-width: clamp(130px, 22vw, 180px);height: clamp(45px, 7vw, 60px);padding-bottom: clamp(0px, 0.3vw, 3px);}

            .main_title:has(.controller){padding-right: clamp(70px, 10vw, 100px);}
            .main_cont .controller{gap: clamp(10px, 2.4vw, 24px);}
            .main_cont .controller [class*="swiper-button"]{width: clamp(15px, 2.5vw, 20px); height: clamp(15px, 2.5vw, 20px);}
        }
        @media (max-width:640px){
            .main_title h2{font-size: 240%;}
            .main_title h2 small{width: 100%;}
            .main_title h3{font-size: 210%;}
        }
        @media (max-width:479px){
            .main_title h2{font-size: 200%;}
            .main_title h3{font-size: 180%;}
            .main_title h5{font-size: 100%;}
            .main_title h6{font-size: 90%;}
        }


    /* 인트로 */
        .main_intro{position: relative;padding-block: 94px 96px; opacity: 0; transition: all 0.4s;}
            .main_intro.on{opacity: 1;}
        .main_intro .main_title{padding-right: 500px;}

        .logo_box{ position: absolute; top:-360px; right:0; translate: 0; z-index: 1; width: 100%;}
        .logo_box .bg{position: absolute; content:''; top: 50%; left:50%; translate: -50% -50%; width: 200vw; height: 200vh; background: var(--point-white); opacity: 0; pointer-events: none; }
        .logo_box .cont{position: relative; width: 100%; max-width: 401px;display: inline-flex;justify-content: flex-end; z-index: 3;}
        .logo_box .simbol{display: block; }
        .logo_box .txt01{position: absolute;bottom:80px;left: 70%;width: max-content;}
		.logo_box .txt02{position:absolute;bottom:0;left:70%; width: max-content;}
        .logo_box :is(.txt01, .txt02){opacity: 0; }

        body:has(.main_intro.on) .logo_box .cont{max-width: 100%;}
        
        body:has(.main_intro) :is(#header, .main_cont, .main_visual, .vis_wrap .scr_dwn) {opacity: 0; transition: all 0.4s;}
        body:has(.main_intro.on) :is(#header, .main_cont, .main_visual, .vis_wrap .scr_dwn) {opacity: 1;}

        @media (max-width:1200px){
            .main_intro .main_title{padding-right: clamp(200px, 38vw, 450px);}
            .logo_box{top: clamp(-360px, -20vw, -50px);}
            .logo_box .cont{max-width: clamp(150px, 33vw, 401px);}
            .logo_box .simbol img{width: clamp(130px, 33vw, 401px);}
            .logo_box .txt01{width: clamp(60px, 18vw, 225px); bottom:clamp(23px, 6.5vw, 80px);}
            .logo_box .txt02{width: clamp(100px, 32vw, 384px);}
        }
        @media (max-width:1200px){
            .main_intro{padding-block:clamp(40px, 9.4vw, 94px) clamp(50px, 9.6vw, 96px)}
        }
        @media (max-width:640px){
            .main_intro .main_title{padding-right: 0;}
            .logo_box{top:clamp(-360px, -12vw, -110px);}
        }
        @media (max-width:360px){
            .logo_box{top: -40px;}
            .logo_box .simbol img{width: 110px;}
        }


    /* 비주얼 */
        .vis_wrap{position: relative;}
        .main_visual{position: relative;width: calc(100% - 80px);max-width: 1710px;margin-left: auto;box-sizing: border-box;border-radius: var(--radius-200);overflow: clip;}
        .main_visual .slick-slide{position: relative;height: 600px;overflow: clip;}
        .main_visual .thumb{display: block; width: 100%; height: 100%; background: no-repeat center / cover; transform: scale(1.1);}
        .main_visual .active .thumb{transform: scale(1); transition: all 5s;}
        .vis_wrap .scr_dwn{position: absolute;left:50%;bottom: 33%;translate: -50% 0;pointer-events: none;max-width: 1800px;z-index: 3;}
        .scr_dwn .desc{display: flex;align-items: center;pointer-events: all;font-size: var(--title-20);writing-mode: tb;gap: 20px; cursor: pointer;}
        .scr_dwn .desc dt{font-size: 80%;font-weight: 400;color: var(--black-color05);font-family: var(--font-type02);transform: scale(-1,-1);letter-spacing: 0.1em;}
        .scr_dwn .desc dd{position: relative;width: 24px;height: 40px;background: var(--point-white);border: 1px solid var(--black-color08);border-radius: 50px;box-sizing: border-box;}
            .scr_dwn .desc dd:before{position: absolute;content:'';width: 6px;aspect-ratio: auto 1;background: var(--black-color08);border-radius: 100%;top: 6px;left: 50%;margin-left: -3px;}

            .scr_dwn .desc 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:6px;}100% {top:calc(100% - 12px);}}

        @media (max-width:1023px){
            .main_visual .slick-slide{height: clamp(250px, 60vw, 600px);}
        }
        @media (max-width:860px){
            .vis_wrap .scr_dwn{display: none;}
            .main_visual{width: 100%;}
        }

    /* 비즈니스 */
        .main_biz{padding-block: 154px 90px;}
        .main_biz .item_list{position: relative;}
        .main_biz .item_list > li{position: sticky;top: 130px;padding-block: 60px;box-sizing: border-box;background: var(--point-white);border-top: 1px solid var(--border-color01);}
        .main_biz .item_list .w_custom{display: flex; align-items: flex-start; flex-wrap: wrap; gap: 40px 0;}
        .main_biz .item_list .main_title{width: 42.7%;padding-right: 50px;margin-top: -0.3vw;}
        .main_biz .item_list .thumb{width: 57.3%; height: 500px; border-radius: var(--radius-80); box-sizing: border-box; overflow: clip;}
        .main_biz .item_list .thumb img{width: 100%; height: 100%; object-fit: cover;}

        @media (min-width:1024px){
            .main_biz .item_list .aos-init{opacity: 1; transform: none;}
        }
        @media (max-width:1023px){
            .main_biz{padding-block: clamp(70px, 15.4vw, 154px) clamp(40px, 9vw, 90px);}
            .main_biz .item_list > li{position: relative;inset: auto;padding-block: clamp(30px, 6vw, 60px);}
            .main_biz .item_list .w_custom{row-gap: clamp(30px, 4vw, 40px);}
            .main_biz .item_list .main_title{width: 100%; padding-right: 0;}
            .main_biz .item_list .thumb{width: 100%; height: auto; min-height: 200px; aspect-ratio: auto 1.72;}
        }

    /* 제품 */
		.main_prod{padding-bottom: 174px;}
        .main_prod .cont{position: relative;display: flex;flex-wrap: wrap;gap: 40px 0;}
        .main_prod .info{position: relative; width: 260px; padding-bottom: 100px; box-sizing: border-box;}
        .main_prod .info .more_view{position: absolute;left:0;bottom:0;width: 100%;}
        .main_prod .info .more_view span{height: 70px;font-size: inherit;}
        .main_prod .tab_list{font-size: var(--title-20); border-radius: var(--radius-40); background: var(--gray-bg01); overflow: clip;} 
        .main_prod .tab_list > li{position: relative;font-size: 110%;font-weight: 500;color: var(--black-color03);letter-spacing: -0.05em;padding-inline: 30px 60px;padding-block: 22px;box-sizing: border-box;transition: all 0.4s;cursor: pointer;display: flex;align-items: center;}
            .main_prod .tab_list > li:not(:last-child){border-bottom: 1px solid var(--border-color01);}
            .main_prod .tab_list > li:before{position: absolute; content:''; width: 8px; aspect-ratio: auto 1; border-radius: 100%; background: var(--point-white); top:50%; right:30px; translate: 0 -50%; box-sizing: border-box; opacity: 0; transition:inherit;}
            .main_prod .tab_list > li.on{background: var(--point-color01); color: var(--point-white); border-color: var(--point-color01);}
            .main_prod .tab_list > li.on:before{opacity: 1;}
        .main_prod .tab_cont{position: relative;width: calc(100% - 260px);padding-left: 40px;box-sizing: border-box;}
        .main_prod .tab_cont .item{transition: all 0.4s;}
        .main_prod .tab_cont .item:not(.on){opacity: 0; height: 0; overflow: hidden;}
        .main_prod .prodSwiper{position: relative; clip-path: inset(-200% -200% -200% -1px);}
        .main_prod .prodSwiper .swiper-slide{position: relative;height: auto;padding: 36px 40px 40px;box-sizing: border-box;box-shadow: inset 0 0 0 1px var(--border-color01);border-radius: var(--radius-60);overflow: clip;display: flex;flex-direction: column;align-items: flex-start;gap: 30px; transition: box-shadow 0.4s;}
        .main_prod .prodSwiper .link{position: absolute; inset: 0; z-index: 5; }
        .main_prod .prodSwiper .thumb{display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: auto 1; overflow: clip;}
        .main_prod .prodSwiper .main_title h4{font-family: var(--font-type02);}
        .main_prod .prodSwiper .arw{position: absolute; content:''; width: 70px; aspect-ratio: auto 1; top:50%; left:50%; translate:-50% -50%; border-radius: 100%; box-sizing: border-box; background: var(--black-color00); opacity: 0; transition: all 0.4s;}
        .main_prod .prodSwiper .arw{&:before, &:after{position: absolute; content:''; width: 20px; height: 2px; background: var(--point-white); top:50%; left:50%; translate: -50% -50%;}}
        .main_prod .prodSwiper .arw:after{width: 2px; height: 20px;}

            /* over */
            @media (hover:hover) and (pointer:fine) {
                .main_prod .tab_list > li:not(.on):hover{background: var(--point-color01); color: var(--point-white); border-color: var(--point-color01);}
                .main_prod .tab_list > li:not(.on):hover:before{opacity: 1;}
                .main_prod .prodSwiper .swiper-slide:hover{box-shadow:inset 0 0 0 1px var(--black-color00), var(--shadow-02);}
                .main_prod .prodSwiper .swiper-slide:hover .arw{opacity: 1;}
            }

        @media (max-width:1023px){
            .main_prod{padding-bottom: clamp(70px, 17.4vw, 174px);}
            .main_prod .cont{padding-bottom: clamp(70px, 14vw, 140px);}
            .main_prod .info{position: static;width: 100%;padding-bottom: 0;}
            .main_prod .tab_list{display: flex;}
            .main_prod .tab_list > li{width: 100%;padding-block: clamp(17px, 2.2vw, 22px);padding-inline: clamp(15px, 3vw, 30px) clamp(30px, 6vw, 60px);}
                .main_prod .tab_list > li:before{right: clamp(15px, 3vw, 30px);width: clamp(6px, 1vw, 8px);}
                .main_prod .tab_list > li:not(:last-child){border-bottom: 0; border-right: 1px solid var(--border-color01);}
            .main_prod .tab_cont{width: 100%; padding-left: 0;}
            .main_prod .prodSwiper{clip-path: none;}
            .main_prod .prodSwiper .swiper-slide{padding: clamp(21px, 3.6vw, 36px) clamp(25px, 4vw, 40px) clamp(25px, 4vw, 40px);}
            .main_prod .info .more_view{left: 50%;translate: -50% 0;width: fit-content;}
            .main_prod .info .more_view span{height: clamp(45px, 8vw, 70px);min-width: clamp(130px, 26vw, 260px);}
        }
        @media (max-width:640px){
            .main_prod .tab_list > li{font-size: 100%;}
            .main_prod .info .more_view span{font-size: 90%;}
        }
        @media (max-width:479px){
            /* .main_prod .tab_list{display: block;}
            .main_prod .tab_list > li:not(:last-child){border-right: 0; border-bottom: 1px solid var(--border-color01);} */
            .main_prod .tab_list > li{font-size: 90%;}
        }
        @media (max-width:431px){
            .main_prod .tab_list > li{font-size: 80%;}
        }

    /* 네트워크 */
		.main_network{margin-bottom: -105px;}
        .main_network .main_title{z-index: 3;}
        .main_network .main_title h2{line-height: 1.33;padding-top: 0.4vw;}
        .main_network .main_title h6{line-height: 1.8;}
        .main_network .map{position: relative;translate: clamp(0px, 9vw, 167px) 0;width: fit-content;margin-top: clamp(-232px, -12.5vw, 0px);}
            .main_network .map:before{position: absolute;content:'';width: 100%;height: 100%;background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 50%, var(--point-white) 77.4%);pointer-events: none;}
        .main_network .marker{position: absolute; font-size: var(--title-20);}
        .main_network .marker dt{position: relative; width: 12px; aspect-ratio: auto 1; background: var(--point-color02); border-radius: 100%;}
            .main_network .marker dt:before{position: absolute;content:'';top:50%;left:50%;width: 100%;height: 100%;background: rgba(16, 55, 133, 0.1);border-radius: 100%;translate: -50% -50%; pointer-events:none;}
            .main_network .marker dt:before{animation-name: marker; animation-duration:1.5s; animation-iteration-count:infinite; transition-timing-function:linear; }
            @keyframes marker {to {width: 1080%; height: 1080%; background: rgba(16, 55, 133, 0)};}
            @keyframes marker02 {to {width: 1080%; height: 1080%; background: rgba(230, 0, 18, 0)};}

        .main_network .marker dd{position: absolute;top: calc(100% + 12px);right: -9px;width: max-content;font-size: 90%;font-weight: 400;color: var(--point-color02);letter-spacing: -0.05em;font-family: var(--font-type02); transition: all 0.4s;}
        
            .main_network .marker dd.left{right:auto;left: -10px;}
            .main_network .marker dd.cen{right: 50%;translate: 40% 0;}

            .main_network .marker.red dt{background: var(--point-color01);}
            .main_network .marker.red dt:before{background:rgba(230, 0, 18, 0.1); animation-name: marker02;}
            .main_network .marker.red dd{color: var(--point-color01);}

            .main_network .marker.texas{top: 25.5%;left: 24.7%;}
            .main_network .marker.georgia{top: 23.9%;left: 29%;}
            .main_network .marker.hungary{top: 15.4%;left: 54%;}
            .main_network .marker.ukraine{top: 14.5%;left: 57.7%;}
            .main_network .marker.russia{top: 7.2%;left: 60.4%;}
            .main_network .marker.seoul{top: 22%;left: 81.7%;}

        @media (max-width:1200px){
            .main_network .map{margin-top: 0; translate: 0;}
        }
        @media (max-width:1023px){
            .main_network{margin-bottom: clamp(-105px, -10.5vw, 0px);}
            .main_network .map{width: calc(100% + 200px); margin-left: -100px;}
            .main_network .marker dt{width: clamp(8px, 1.2vw, 12px);}
            .main_network .marker dd{font-size: 80%; top: calc(100% + clamp(8px, 1.2vw, 12px));}
        }
        @media (max-width:640px){
            .main_network .map{width: calc(100% + 230px);margin-left: -137px;}
                .main_network .marker.texas dd{right: auto;left: -5px;}
                .main_network .marker.georgia dd{top: auto;bottom: calc(100% + 3px);}
                .main_network .marker.hungary dd{right: 5px;}
                .main_network .marker.ukraine dd{left: 0;}
                .main_network .marker.russia dd{top:50%;left:calc(100% + 10px);translate: 0 -50%;}
                .main_network .marker.seoul dd.cen{right: 0;translate: 0;}
        }
        @media (max-width:360px){
            .main_network .map{width: calc(100% + 150px);margin-left: -90px;}
        }

    /* 구축실적 */
        .main_perform{padding-bottom: 156px;}
        .main_perform .gelSwiper{position: relative;}
        .main_perform .gelSwiper .swiper-slide{position: relative;background: var(--point-white);font-size: var(--title-20);height: auto;}
        .main_perform .gelSwiper .link{position: absolute; inset: 0; z-index: 5;}
        .main_perform .gelSwiper .preface{position: absolute;top:0;left:0;font-size: 80%;font-weight: 500;color: var(--point-white);background: var(--black-color06);border-radius: var(--radius-08);border-end-start-radius: 0 !important;z-index: 3;translate: 0 -50%;padding:9px 12px;}
            .main_perform .gelSwiper .preface:before{position: absolute;content: '';top: calc(100% - 1px);left: 0;width: 50px;height: 25px;background: var(--black-color06);clip-path: path('M0 12V0H17.1733C7.5979 0 1.73468 8 0 12Z');}
            .main_perform .gelSwiper .preface[title="육상/해양 플랜트"]{background: var(--point-color01);}
            .main_perform .gelSwiper .preface[title="육상/해양 플랜트"]:before{background: var(--point-color01);}
            .main_perform .gelSwiper .preface[title="해양/선박 전력"]{background: var(--point-color03);}
            .main_perform .gelSwiper .preface[title="해양/선박 전력"]:before{background: var(--point-color03);}
            .main_perform .gelSwiper .preface[title="건축/산업 전력"]{background: var(--black-color00);}
            .main_perform .gelSwiper .preface[title="건축/산업 전력"]:before{background: var(--black-color00);}
            .main_perform .gelSwiper .preface[title="데이터센터"]{background: var(--point-color02);}
            .main_perform .gelSwiper .preface[title="데이터센터"]:before{background: var(--point-color02);}

        .main_perform .gelSwiper .desc{box-shadow: inset 0 0 0 1px var(--border-color01); border-radius: var(--radius-40); overflow: clip; transition: all 0.4s;}
        .main_perform .gelSwiper .desc dt{position: relative; width: 100%; aspect-ratio: auto 1.5; overflow: clip;}
        .main_perform .gelSwiper .desc dt img{transition: all 0.4s;}
        .main_perform .gelSwiper .desc dt img{width: 100%; height: 100%; object-fit: cover;}
        .main_perform .gelSwiper .desc dd{position: relative;font-size: 110%;font-weight: 400;color: var(--black-color00);line-height: 1.36;padding:30px;padding-right: 70px;letter-spacing: -0.05em;box-sizing: border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
            .main_perform .gelSwiper .desc dd:before{position: absolute;content:'';width: 22px;height: 14px;background: url('../images/skin/more_arw.svg') no-repeat center / 100% auto;top: 50%;right: 30px;translate: 0 -50%;opacity: 0;transition: all 0.4s;}

            /* over */
            @media (hover:hover) and (pointer:fine) {
                .main_perform .gelSwiper .swiper-slide:hover .desc{box-shadow:inset 0 0 0 1px var(--border-color01), var(--shadow-03);}
                .main_perform .gelSwiper .swiper-slide:hover .desc dt img{transform: scale(1.1);}
                .main_perform .gelSwiper .swiper-slide:hover .desc dd:before{opacity: 1;}
            }

        @media (max-width:1023px){
            .main_perform{padding-bottom: clamp(70px, 15.6vw, 156px);}
            .main_perform .gelSwiper .desc dd{padding:clamp(20px, 3vw, 30px); padding-right: clamp(50px, 7vw, 70px);}
            .main_perform .gelSwiper .desc dd:before{right: clamp(20px, 3vw, 30px);}
        }
        @media (max-width:640px){
            .main_perform .gelSwiper .desc dd{font-size: 100%;}
        }
        @media (max-width:479px){
            .main_perform .gelSwiper .desc dd{font-size: 90%;}
        }

    /* 공지사항 */
        .main_notice .controller{display: none;}
        .main_notice .board_list{display: flex; }
        .main_notice .board_list > li{position: relative;font-size: var(--title-20);letter-spacing: -0.05em;box-shadow: inset 0 0 0 1px var(--border-color01);width: calc(100% / 4 - 21px);padding: 62px 40px 160px;box-sizing: border-box;display: flex;flex-direction: column;gap: 39px;border-radius: var(--radius-40);background: var(--point-white);overflow: clip; transition: all 0.4s;}
        .main_notice .board_list .link{position: absolute; inset: 0; z-index: 5; }
        .main_notice .board_list .date{display: block; font-size: 90%; font-weight: 400; color: var(--black-color08); line-height: 1.11; letter-spacing: -0.05em; font-family: var(--font-type02); }
        .main_notice .board_list .desc :is(dt, dd){word-break: break-all;}
        .main_notice .board_list .desc dt{font-size: 110%; font-weight: 500; color: var(--black-color00); line-height: 1.36; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
            .main_notice .board_list .desc dt + dd{margin-top: 20px;}
        .main_notice .board_list .desc dd{font-size: 90%; font-weight: 400; color: var(--black-color04); line-height: 1.66; white-space:normal; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
        .main_notice .board_list .more_view{position: absolute;left: 0;bottom: 0;width: 100%;background: none;border-radius: inherit;}
            .main_notice .board_list .more_view:before{border-color: var(--border-color01);}
            .main_notice .board_list .more_view:after{clip-path: none;opacity: 0;transition: all 0.4s;}
        .main_notice .board_list .more_view span{justify-content: flex-end;padding-inline: 40px;color: var(--black-color06);font-size: inherit;height: 80px;transition: all 0.4s;translate: 38px 0;}
        .main_notice .board_list .more_view span:after{margin-left: 0;}

            /* over */
            @media (hover:hover) and (pointer:fine) {
                .main_notice .board_list > li:hover{box-shadow: inset 0 0 0 1px var(--border-color01), var(--shadow-04);}
                .main_notice .board_list > li:hover .more_view:after{opacity: 1;}
                .main_notice .board_list > li:hover .more_view span{color: var(--point-white); translate:0;}
                .main_notice .board_list > li:hover .more_view span:after{opacity: 1;}
            }

        @media (max-width:1400px){
            .main_notice .board_list > li{padding: clamp(30px, 4.5vw, 62px) clamp(25px, 3vw, 40px) clamp(100px, 12vw, 160px);gap: clamp(20px, 3vw, 39px);}
            .main_notice .board_list .date{font-size: 80%;}
            .main_notice .board_list .desc dt{font-size: 100%;}
                .main_notice .board_list .desc dt + dd{margin-top: clamp(10px, 2vw, 20px);}
            .main_notice .board_list .desc dd{font-size: max(13px, 80%);}
            .main_notice .board_list .more_view span{padding-inline: clamp(25px, 3vw, 40px);}
        }
        @media (max-width:1200px){
            .main_notice .controller{display: flex;}
        }
        @media (max-width:1023px){
            .main_notice .board_list .more_view span{height: clamp(50px, 8vw, 80px);}
        }
        @media (max-width:640px){
            .main_notice .board_list .more_view span{font-size: 90%;}
        }
        @media (max-width:479px){
            .main_notice .board_list > li{width: 100%;}
        }

    /* 파트너사 */
        .main_partner{padding-block: 160px;}
        .main_partner .logo_list{display: flex; flex-wrap: wrap; gap: 18px;}
        .main_partner .logo_list > li{position: relative; width: calc(100% / 6 - 15px); box-sizing: border-box; aspect-ratio: auto 2.35; overflow: clip;}
        .main_partner .logo_list span{display: flex; align-items:center; justify-content: center;}

        @media (max-width:1023px){
            .main_partner{padding-block: clamp(70px, 16vw, 160px);}
            .main_partner .logo_list{ gap: 15px;}
            .main_partner .logo_list > li{width: calc(100% / 3 - 10px);}
        }
        @media (max-width:479px){
            .main_partner .logo_list > li{width: calc(100% / 2 - 7.5px);}
        }

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

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    #footer{position: relative; border-top: 1px solid var(--border-color04); box-sizing: border-box; font-size: var(--title-20); color: var(--black-color03); line-height: 1.6;}
    #footer .cont{position: relative; font-size: max(13px, 80%); padding-block: 79px; box-sizing: border-box;}
    #footer .cont .w_custom{display: flex;align-items: flex-start;justify-content: space-between;flex-wrap: wrap;gap: 30px;}
    #footer .logo{display: block;max-width: 160px;margin-bottom: 0.3vw;}
    #footer .main_title h5{letter-spacing: 0;}
    #footer .addr_list{display: grid;gap: 20px;}
    #footer .addr_list > li{display: flex;flex-wrap: wrap;gap: 20px 60px;}
    #footer .addr_list .desc{display: inline-flex;}
    #footer .addr_list .desc dt{width: 120px;flex-shrink: 0;padding-right: 10px;box-sizing: border-box;}
    #footer .addr_list .desc dd{opacity: 0.6;width: 200px;}
        #footer .addr_list .desc:nth-child(2) dd{width: 140px;}
        #footer .addr_list .desc:only-child dd{width: auto;}
    #footer .addr_list .desc dd :is(a, span){font-family: var(--font-type02);letter-spacing: 0;}
    #footer .info{position: relative;background: var(--gray-bg01);padding-block: 26px;}
    #footer .info .w_custom{display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 20px 30px;}
    #footer .link_list{display: flex; flex-wrap: wrap; gap: 10px 40px; font-size: var(--title-20);}
    #footer .link_list > li{font-size: 90%;font-weight: 400;color: var(--black-color06);letter-spacing: 0;}
    #footer .link_list > li strong{font-weight: 500; color: var(--black-color03);}
    #footer .copy{display: flex; align-items: center; flex-wrap:wrap; gap: 5px 20px; font-size: var(--title-20);}
    #footer .copy :is(dt, dd){font-size: max(13px, 80%);font-weight: 400;color: var(--black-color03);opacity: 0.6;font-family: var(--font-type02);letter-spacing: 0;}

    .quick_wrap{position: fixed;left:50%;translate:-50% 0;bottom:30px;z-index: 50;max-width: 1800px;pointer-events: none;display: flex;justify-content: flex-end;}
    .quick_list{display: flex;flex-direction: column;gap: 16px; opacity: 0; pointer-events:none; transition: all 0.4s;}
        body:has(#header.on:not(.end)) .quick_list{opacity: 1; pointer-events:all;}
    .quick_list > li{position: relative; cursor: pointer;}
    .quick_list .link{position: absolute; inset: 0; z-index: 5;}
    .quick_list .desc{position: relative; font-size: var(--title-20);}
    .quick_list .desc dt{position: relative; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; padding:10px;box-sizing: border-box; border-radius: 50px;}
    .quick_list .desc dt img{position: relative; z-index: 2;}
        .quick_list .desc dt:before{position: absolute; content:''; width: 100%; height: 100%; top:0; right:0; background: var(--point-color01); border-radius: inherit; transition: all 0.4s;}
        .quick_list > li:nth-child(2) .desc dt:before{background: var(--point-color02);}
    .quick_list .desc dd{position: absolute;top:0;right:65px;height: 100%;box-sizing: border-box;width: max-content;display: flex;align-items: center;font-size: 90%;font-weight: 500;color: var(--point-white);letter-spacing: -0.05em;opacity: 0;pointer-events: none;translate: -10px 0;transition: all 0.4s;}
    
        /* over */
        @media (hover:hover) and (pointer:fine){
            .quick_list > li:hover .desc:has(dd) dt:before{width: 160px;}
            .quick_list > li:hover .desc:has(dd) dd{opacity: 1;translate:0;pointer-events: all;}
        }

    @media (max-width:1023px){
        #footer .logo{max-width: clamp(100px, 16vw, 160px);}
        #footer .cont{padding-block: clamp(40px, 7.9vw, 79px);}
        #footer .addr_list{gap: clamp(5px, 2vw, 20px);}
        #footer .addr_list > li{gap: clamp(5px, 2vw, 20px) clamp(30px, 6vw, 60px);}
        #footer .addr_list .desc dt{width: clamp(100px, 12vw, 120px);}
        #footer .addr_list .desc dd, #footer .addr_list .desc:nth-child(2) dd{width: clamp(180px, 20vw, 200px);}
        #footer .link_list{column-gap: clamp(20px, 4vw, 40px);}

        .quick_list{gap: clamp(10px, 2vw, 16px);}
        .quick_list .desc dt{width: clamp(45px, 6vw, 60px); height: clamp(45px, 6vw, 60px);} 
    }
    @media (max-width:640px){
        #footer .addr_list{gap: clamp(9px, 2vw, 20px);}
        #footer .addr_list > li{gap: clamp(10px, 2vw, 20px) clamp(30px, 6vw, 60px);}
        #footer .addr_list .desc dt{width: clamp(100px, 12vw, 120px);}
        #footer .addr_list .desc dd, #footer .addr_list .desc:nth-child(2) dd{width: clamp(160px, 18vw, 180px);}
    }
    @media (max-width:640px){
        #footer .addr_list .desc{width: 100%;}
        #footer .addr_list .desc dd, #footer .addr_list .desc:nth-child(2) dd{width: auto;}
    }