@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:0 auto; box-sizing: border-box;}
    #container:has(.full_sec) { width: 100%; max-width: 100%; }

    @media screen and (max-width:860px){
        #container, .w_custom {width: calc(100% - 30px);}
    }
    @media screen and (max-width:320px){
        #container, .w_custom {width: calc(100% - 20px);}
    }



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

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

───────────────────────────────────────────────────────────*/
    .skip_nav {position:relative;z-index:9999;}
    .skip_nav a {display:block;height:1px;width:1px;margin-bottom:-1px;overflow:hidden;font-size:12px;color:#fff;font-weight:bold;white-space:nowrap;text-align:center;}
    .skip_nav a:focus, .skip_nav a:active {height:auto;width:100%;padding:0;margin-bottom:0;position:absolute;left:0;top:0;}
        
    #header{position:fixed;top:0;left:0;width: 100%;height: 163px;z-index: 100;transition-duration: 0.4s;transition-property: transform, background-color, backdrop-filter;}
        #header.on{background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);}
    #header .w_custom{display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: 1780px; gap: 30px;}
    #header .logo{height: 100%}
    #header .logo a{display: flex; align-items: center; height: 100%; padding:20px 0; box-sizing: border-box;}
    #header .cont{display: flex;align-items: center;height: 100%;gap: clamp(20px, 4.3vw, 80px);}
    #header .gnb{display: flex;height: 100%;font-size: var(--title-20);font-family: var(--font-type02);text-align: center;gap: clamp(20px, 3.75vw, 72px);letter-spacing: 0.01em;}
    #header .gnb > li{position: relative; font-size: 110%; height: 100%;}
    #header .gnb > li > a{display: flex;align-items: center;height: 100%;font-weight: 600;color: var(--point-color01);transition: all 0.4s;}
    #header .gnb .dep02{position: absolute;top:100%;left:50%;transform: translateX(-50%);width: 150px;background: rgba(0,0,0,0.9);backdrop-filter: blur(5px);padding:10px 0;box-sizing: border-box;opacity: 0;pointer-events: none;transition: all 0.4s;}
	#header .gnb .dep02 > li{font-size: 75%;}
	#header .gnb .dep02 > li > a{display:block;font-weight: 500;color: var(--black-color00);padding: 7px 20px;filter: var(--filter-white);}
    #header .allCate{display: flex; flex-direction: column; justify-content: space-between; width: 40px; height: 30px;}
    #header .allCate span{width: 100%; height: 6px; border-radius: 2px; background: var(--point-color01);}


        /* filter */
            #header :where(.gnb > li > a, .allCate span){filter: var(--filter-white);}

        /* over */
            @media screen and (min-width:1024px){
                #header:hover{background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);}
                #header .gnb > li:hover > a{filter:none;}
                #header .gnb > li:hover .dep02{opacity: 1; pointer-events: all;}
            }

    @media screen and (max-width:1200px){
        #header .gnb > li{font-size: 1.7vw;}
    }
    @media screen and (max-width:1023px){
        #header{height: clamp(70px, 16.3vw, 163px);}
        #header .gnb{display: none;}
    }
    @media screen and (max-width:640px){
        #header .allCate{width: 38px; height: 27px;}
        #header .allCate span{height: 5px;}
    }
    @media screen and (max-width:479px){
        #header .allCate{width: 36px; height: 24px;}
        #header .allCate span{height: 4px;}
    }

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

	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: 10vh 0;box-sizing: border-box;opacity: 0;clip-path: inset(0 0 100% 0);transition: all 0.6s;}
    #aside.on{opacity: 1; clip-path: inset(0 0 0 0);}
    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;}
    #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:not(:last-child):after{display: inline-flex; content:'/'; margin:0 20px; opacity: 0.6;} 
    #aside .close_btn{position: absolute;top: 50px;right: 50px;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 screen and (min-width:1024px){
            #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 screen and (max-width:1600px){
        #aside .close_btn{top:30px; right: 30px;}
    }
    @media screen and (max-width:1023px){
        #aside .close_btn{width: 35px; height: 35px;}
        #aside .link_list{margin-top: clamp(30px, 5vw, 50px);}
    }
    @media screen and (max-width:860px){
        #aside{padding:70px 0;}
        #aside .gnb > li{display: block; padding: 20px 0;}
        #aside .gnb > li > a{width: 100%; padding:0;}
        #aside .gnb .dep02{margin-top: 10px;}
        #aside .close_btn{top:15px; right: 15px; width: 30px; height: 30px;}
        #aside .link_list > li > a{height: 45px;}
    }
    @media screen and (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;}
    }
    @media screen and (max-width:479px){
        #aside{padding:50px 0;}
        #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_visual{position: relative;background: var(--black-color00);box-sizing: border-box;}
        .main_visual .thumb{position: relative;width: 63%;height: 100vh;margin: -20vh auto 0;font-size: 0;top: 0;border-radius: 10px;overflow: hidden;}
            .main_visual .thumb:before{position: absolute; content:''; width: 100%; height: 100%; background: rgba(0,0,0,0.2);}
        .main_visual .thumb video{width: 100%; height: 100%; object-fit: cover; pointer-events: none;}
        .main_visual .main_title{position: sticky;top: 0;opacity: 0;transition: all 1.2s;height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;z-index: 5;}
            .main_visual.on .main_title{transform: translate(0); opacity: 1;}
        .main_visual .main_title :where(h3, h5){filter: var(--filter-white);}
        .main_visual .main_title .btn_wrap{margin-top: -0.5vw;}
        .main_visual .scr_dwn{position: absolute;left: 60px;bottom: 100px;display: flex;align-items: center;font-size: var(--title-20);font-family: var(--font-type02);gap: 18px;cursor:pointer;writing-mode: tb;transform: rotate(-180deg);letter-spacing: 0.01em; }
        .main_visual .scr_dwn dt{position: relative;width: 40px;height: 40px;border:1px solid rgba(255,255,255,0.5);border-radius: 100%;box-sizing: border-box;overflow: hidden; writing-mode: tb;}
            .main_visual .scr_dwn dt:before{position: absolute;content:'';width: 4px;height: 4px;background: var(--point-white);border-radius: 100%;bottom: -10px;left: 50%; margin-left: -2px;}
        .main_visual .scr_dwn dd{font-size: 70%; font-weight: 600; color: var(--black-color00); filter: var(--filter-white);}

            .main_visual .scr_dwn dt:before{animation-name: scrDwn; animation-duration:2s; animation-iteration-count:infinite; animation-fill-mode: forwards; transition-timing-function:linear;}
            @keyframes scrDwn {0% {bottom:-10px;}100% {bottom:calc(100% + 10px);}}

        @media screen and (max-width:1580px){
            .main_visual .scr_dwn{left: 30px;}
        }
        @media screen and (max-width:1023px){
            .main_visual .main_title{padding: clamp(150px, 30.8vw, 308px) 0;height:auto;}
            .main_visual .thumb{margin-top: -23vw;}
            .main_visual .scr_dwn{bottom:clamp(30px, 10vw, 100px);}
        }
        @media screen and (max-width:860px){
            .main_visual .scr_dwn{left:15px; gap: 15px;}
            .main_visual .scr_dwn dt{width: 35px; height: 35px;}
            .main_visual .scr_dwn dt:before{width: 3px; height: 3px; margin-left: -1.5px;}
        }
        @media screen and (max-width:640px){
            .main_visual .scr_dwn{display: none;}
        }

    /* 공통 */
        .main_content > div:not(.main_what){position: relative; background: var(--point-white); z-index: 5;}
        .main_title{position: relative; font-size: var(--title-20); box-sizing: border-box; font-family: var(--font-type02);}
            .main_title.cen{text-align: center;}
            .main_title.hd{margin-bottom: 76px;}
        .main_title h2{position: relative; font-size: 350%;font-weight: 700;color: var(--black-color00);line-height: 1.12;}
            .main_title h2.line{display: inline-block; padding:0 12px; }
            .main_title h2.line:before{position: absolute;content:'';width: 0;height: 20px;background: linear-gradient(180deg, rgba(242,205,0,1) calc(100% - 4px), rgba(0,170,73,1) 4px);left:0;bottom:0;z-index: -1;transition: all 1.2s;}
            .main_title h2.line.aos-animate:before{width: 100%;}
            .main_title h2 + h6{margin-top: 38px;}
        .main_title h3{font-size: 300%; font-weight: 700; color: var(--black-color00); line-height: 1.16;}
            .main_title h3 + h5{margin-top: 34px;}
        .main_title h5{font-size: 120%; font-weight: 500; color: var(--black-color00); line-height: 1.7;}
        .main_title h6{font-size: 110%;font-weight: 400;color: var(--black-color05);line-height: 1.9;letter-spacing: -0.03em;font-family: var(--font-type01);}
            .main_title h6 + h2{margin-top: 13px;}
            .main_title h6 + h6{margin-top: 30px;}
        .main_title h6 strong{font-weight: 600; color: var(--black-color00);}

        @media screen and (max-width:1023px){
            .main_title.hd{margin-bottom: clamp(30px, 7.6vw, 76px);}
            .main_title h3 + h5{margin-top: clamp(15px, 3.6vw, 36px);}
            .main_title h2 + h6{margin-top: clamp(15px, 3.8vw, 38px);}
            .main_title h2.line{padding:0 clamp(8px, 1.2vw, 12px);}
            .main_title h2.line:before{height:clamp(15px, 2vw, 20px);background: linear-gradient(180deg, rgba(242,205,0,1) calc(100% - 3px), rgba(0,170,73,1) 3px);}
            .main_title h6 + h2{margin-top: clamp(8px, 1.3vw, 13px);}
            .main_title h6 + h6{margin-top: clamp(15px, 3vw, 30px);}
        }
        @media screen and (max-width:860px){
            .main_title h2{font-size: 320%;}
            .main_title h3{font-size: 270%;}
            .main_title h5{line-height: 1.5;}
            .main_title h6{line-height: 1.7;}
        }
        @media screen and (max-width:640px){
            .main_title h2{font-size: 290%;}
            .main_title h3{font-size: 240%;}
        }
        @media screen and (max-width:479px){
            .main_title h2{font-size: 260%;}
            .main_title h3{font-size: 210%;}
            .main_title h5{font-size: 110%;}
            .main_title h6{font-size: 100%;}
        }
        @media screen and (max-width:360px){
            .main_title h2{font-size: 230%;}
            .main_title h3{font-size: 180%;}
            .main_title h5{font-size: 100%;}
            .main_title h6{font-size: 90%;}
        }

    /* What is EETS */
        .main_what{position: sticky;top: -80px; padding: 134px 0 220px;box-sizing: border-box;}
        .main_what .cont{display: flex; align-items: flex-start; flex-wrap: wrap; gap: 40px 0;}
        .main_what .thumb_list{width: 45.3%; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px;}
        .main_what .thumb_list > li{border-radius: var(--radius-10);overflow: hidden;aspect-ratio: auto 3.7;max-height: 180px;}
        .main_what .thumb_list > li img{width: 100%; height: 100%; object-fit: cover;}
        .main_what .cont .main_title{width: 54.7%;padding-top: 0.1vw;padding-left: clamp(30px, 5.3vw, 100px);}
        .main_what .icon_list{display: flex;gap: 30px clamp(30px, 4.2vw, 80px);font-family: var(--font-type01);margin-top: clamp(30px, 5.3vw, 100px);}
        .main_what .icon_list .desc{font-size: var(--title-20); text-align: center;}
        .main_what .icon_list .desc dt{font-size: 0;display: flex;align-items: center;justify-content: center;height: 81px;}
			.main_what .icon_list .desc dt + dd{margin-top: 29px;}
        .main_what .icon_list .desc dd{font-size: inherit; font-weight: 600; color: var(--black-color00); line-height: 1.7;}

        @media screen and (max-width:1580px){
            .main_what .cont .main_title br.for_pc{display: none;}
        }
        @media screen and (max-width:1023px){
            .main_what{position: relative;top: auto;padding:clamp(70px, 13.4vw, 134px) 0 clamp(70px, 22vw, 220px);}
            .main_what .cont{flex-direction: column;}
            .main_what .thumb_list{width: 100%;}
            .main_what .cont .main_title{width: 100%; padding-left: 0;}
            .main_what .icon_list .desc dt{height: clamp(50px, 8.1vw, 81px);}
            .main_what .icon_list .desc dt + dd{margin-top: clamp(15px, 2.9vw, 29px);}
        }
        @media screen and (max-width:860px){
            .main_what .cont{row-gap: 30px;}
        }
        @media screen and (max-width:479px){
            .main_what .icon_list .desc dd{font-size: 90%; line-height: 1.5;}
        }
        @media screen and (max-width:360px){
            .main_what .icon_list{flex-direction: column;}
        }

    /* Product */
        #wrap .main_product{background: var(--black-color00);}
        .main_product{padding: 132px 0 0; }
        .main_product .cont{position: sticky; bottom:0;}
        .main_product .cont_height{/* height: 200vh; */}
        .main_product .main_title :where(h2, h6){color: var(--point-white);}
        .main_product .main_title h2{font-family: var(--font-type02);}
        .main_product .main_title h6{font-weight: 300;}
        .main_product .prod_list{position: relative; display: flex; flex-wrap:wrap; padding-top: 80px;}
        .main_product .prod_list > li{position: relative;width: calc(100% / 3);text-align: center;box-sizing: border-box;padding: 27px 15px;border-top: 1px solid var(--border-color03);display: flex;flex-direction: column;gap: 28px;transition: all 0.4s;height: 520px;justify-content: flex-end;}
            .main_product .prod_list > li:has(.info_desc){z-index: 9;}
            /* .main_product .prod_list > li:last-child{background: var(--black-color02);border-left: 1px solid var(--border-color03);} */
            .main_product .prod_list > :where(li:first-child, li:nth-child(2)):before{position: absolute;content:'';width: 1px;height: 31px;bottom:calc(100% + 20px);left:50%;background: var(--border-color03);}
            .main_product .prod_list > :where(li:first-child, li:nth-child(2)):after{position: absolute;content:'';width: 100%;height: 1px;left: 50%;bottom: calc(100% + 50px);left:50%;background: var(--border-color03);}
            .main_product .prod_list > li:nth-child(2):after{left:auto; right:50%;}
        .main_product .prod_list .thumb{position: relative;display: block;width:100%;margin: 0 auto;max-width: 70%;min-width: 200px;height:0;padding-bottom:53.6%;}
        .main_product .prod_list .thumb img{transition: all 0.6s;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
        .main_product .prod_list .thumb .ov{position: absolute; top:50%;left:50%;opacity: 0;}
        .main_product .prod_list .desc{position: relative; font-size: var(--title-20); color: var(--black-color00); transition: all 0.4s;margin-top:38px;}
        .main_product .prod_list .desc dt{font-size: 200%;font-weight: 700;font-family: var(--font-type02);line-height: 1.08;filter: var(--filter-white);transition: all 0.6s;}
        .main_product .prod_list .desc dd{font-size: inherit;font-weight: 500;line-height: 1.4;opacity: 0;max-height: 0;overflow: hidden; filter: var(--filter-white); transform: translateY(30px);transition: all 0.6s;}
        .main_product .prod_list .info_desc{position: absolute;left:0;bottom: calc(100% + 28px);transform: translateX(-50%);font-size: var(--title-20);text-align: center;color: var(--point-white);font-family: var(--font-type02);z-index: 5;width: 100%;}
        .main_product .prod_list .info_desc dt{font-size: 90%;font-weight: 300;line-height: 1.11;opacity: 0.8;}
        .main_product .prod_list .info_desc dt + dd{margin-top: 10px;}
        .main_product .prod_list .info_desc dd{font-size: 200%;font-weight: 700;line-height: 1.11;width: fit-content;margin: 0 auto;padding: 0 27px;background: var(--black-color00);}

            /* over */
                @media screen and (min-width:1024px){
                    .main_product .prod_list > li:hover{background: var(--point-color02);}
                    .main_product .prod_list > li:hover .thumb img{opacity: 0;}
                    .main_product .prod_list > li:hover .thumb .ov{opacity: 1;}
                    .main_product .prod_list > li:hover .desc dd{opacity: 1;max-height: 60px;margin-top: 17px;transform: translate(0);}

                }
                

        @media screen and (max-width:1300px){
            .main_product .prod_list > li{height:clamp(400px, 34vw, 520px);}
            .main_product .prod_list .desc dt{font-size: clamp(25px, 3vw, 40px);}
            .main_product .prod_list > li.on .desc dt{font-size: clamp(30px, 3vw, 40px);}
        }
        @media screen and (max-width:1023px){
            .main_product{padding: clamp(70px, 13.2vw, 132px) 0;}
            .main_product .cont_height{height: 0;}
            .main_product .cont{position: relative;}
            .main_product .prod_list{padding-top: 0; width: calc(100% - 60px); margin:150px auto 0; }
            .main_product .prod_list > li{width: 100%; position: static; border:1px solid var(--border-color03); border-bottom: 0;height:clamp(400px, 47vw, 520px);}
                .main_product .prod_list > li + li{border-top: 0;}
                .main_product .prod_list > li:nth-child(2){border-bottom: 1px solid var(--border-color03);}
                .main_product .prod_list > li:last-child{margin-top: 20px; border:1px solid var(--border-color03)}
                .main_product .prod_list > li:first-child:before{left:0;}
                .main_product .prod_list > li:nth-child(2):before{left:auto; right:0;}
                .main_product .prod_list > :where(li:first-child, li:nth-child(2)):after{width: 50%;}
                .main_product .prod_list > li:first-child:after{left:0;}
                .main_product .prod_list > li:nth-child(2):after{left:auto; right:0;}
            .main_product .prod_list .thumb{width: 260px;padding-bottom:30.6%;}
			.main_product .prod_list .info_desc{left:50%;}

            .main_product .prod_list > li.on{background: var(--point-color02);}
            .main_product .prod_list > li.on .thumb img{opacity: 0;}
            .main_product .prod_list > li.on .thumb .ov{opacity: 1;}
            .main_product .prod_list > li.on .desc dd{opacity: 1;max-height: 60px;margin-top: clamp(10px, 1.7px, 17px);transform: translate(0);}
        }
        @media screen and (max-width:860px){
            .main_product .prod_list{width: calc(100% - 30px);}
            .main_product .prod_list > :where(li:first-child, li:nth-child(2)):before{height: 26px; bottom:calc(100% + 15px);}
            .main_product .prod_list > :where(li:first-child, li:nth-child(2)):after{bottom:calc(100% + 40px);}
            .main_product .prod_list .info_desc{bottom:calc(100% + 20px);}
            .main_product .prod_list .info_desc dd{padding:0 25px;}
        }
		@media screen and (max-width:640px){
			.main_product .prod_list > li{height:clamp(240px, 65vw, 520px);}
			.main_product .prod_list .thumb{width:100%;max-width:100%;}
			.main_product .prod_list .desc{margin-top:20px;}
		}
        @media screen and (max-width:479px){
            .main_product .prod_list .desc dd{font-size: 90%;}
        }
        @media screen and (max-width:320px){
            .main_product .prod_list{width: calc(100% - 20px);}
        }

    /* Solutions */
        .main_solutions{padding: 160px 0 0;}
        .main_solutions .main_title{padding-right: 150px;}
        .main_solutions .main_title h6{color: var(--black-color00); font-family: var(--font-type02); font-weight: 500;}
        .main_solutions .solSwiper{position: relative;margin-top: -0.4vw; padding-bottom: 140px;}
        .main_solutions .solSwiper:before{position: absolute;content:'';width: 200vw;height: 400px;left:-110px;bottom:0;background: var(--black-color00);}
        .main_solutions .solSwiper .swiper-slide{height: auto;background: var(--point-white);border-radius: 4px;overflow: hidden;}
        .main_solutions .solSwiper .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5;}
        .main_solutions .solSwiper .thumb{position: relative; display: block;width: 100%;overflow: hidden;aspect-ratio: auto 1.4;max-height: 320px;}
        .main_solutions .solSwiper .arw{position: absolute; top:60%; left:50%; transform: translate(-50%, -50%); width: 70px; height: 70px; border-radius: 100%; background: var(--black-color00); opacity: 0;pointer-events: none; transition: all 0.4s;}
            .main_solutions .solSwiper .arw:before, .main_solutions .solSwiper .arw:after{position: absolute; content:''; width: 2px; height: 20px; background: var(--point-color01); top:50%; left:50%; transform: translate(-50%, -50%); }
            .main_solutions .solSwiper .arw:after{width: 20px; height: 2px;}
        .main_solutions .solSwiper .thumb img{width: 100%; height: 100%; object-fit: cover;}
        .main_solutions .solSwiper .cont{position: relative;font-size: var(--title-20);padding: 30px 30px 75px;box-sizing: border-box;}
        .main_solutions .solSwiper .desc{color: var(--black-color00);}
        .main_solutions .solSwiper .desc dt{font-size: var(--title-14);font-weight: 600;color: var(--black-color00);line-height: 1;padding:6px;background: var(--point-color01);width: fit-content;}
        .main_solutions .solSwiper .desc dt + dd{margin-top: 16px;}
        .main_solutions .solSwiper .desc dd{font-size: 110%; font-weight: 700; line-height: 1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
        .main_solutions .solSwiper .date{position: absolute;left:0;bottom:0;width: 100%;padding:30px;font-size: 80%;font-weight: 500;color: var(--black-color08);line-height: 1.2;box-sizing: border-box;}
        .main_solutions .controller{position: absolute;right:0;bottom:24%;display: flex;}
        .main_solutions .controller [class^='swiper-button']{position: relative;top:auto;left:auto;right:auto;margin:0;width: 40px;height: 40px;background: none; transition: all 0.4s;}
            .main_solutions .controller [class^='swiper-button']:before{position: absolute;content:'';width: 70%;height: 70%;border:solid var(--black-color00);border-width: 2px 2px 0 0;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(-135deg);}
            .main_solutions .controller [class^='swiper-button']:after{display: none;}
            .main_solutions .controller [class^='swiper-button'].swiper-button-next{transform: scale(-1, -1);}

        .sol_layer{position: fixed; top:0; left:0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 300; pointer-events: none; opacity: 0; transition: all 0.4s;}
            .sol_layer.on{opacity: 1;}
            .sol_layer.on .layer_cont{pointer-events: all;}
        .sol_layer .close_btn{position: fixed;top:15px;right:15px;width: 30px;height: 30px;}
        .sol_layer .close_btn span{position: absolute; width: 100%; height: 2px; background: var(--point-white); top:50%; left:50%; transform: translate(-50%, -50%) rotate(45deg);}
        .sol_layer .close_btn span:nth-child(2){transform: translate(-50%, -50%) rotate(-45deg);}
        .sol_layer .solLayerSwiper{overflow: hidden;}
        .sol_layer .solLayerSwiper .swiper-slide{max-height: 90vh; height: auto; display: flex; align-items: center; justify-content: center;}
        .sol_layer .solLayerSwiper .desc{position:fixed;width: 100%;left:0;bottom: 35px;font-size: var(--title-20);display: flex;align-items: center;justify-content: center;flex-wrap:wrap;gap: 0 10px;text-shadow: 0 0 2px var(--black-color00);}
        .sol_layer .solLayerSwiper .desc :where(dt, dd){font-size: 110%; font-weight: 500; color: var(--point-white);}
		.sol_layer .solLayerSwiper .desc dt:has(+ dd){display:flex; flex-wrap:wrap; gap:5px 10px;}
        .sol_layer .solLayerSwiper .desc dt:has(+ dd):after{display: inline-flex;content: '/';}
        .sol_layer .solLayerSwiper .date{display: none;}
        .sol_layer .solLayerSwiper .swiper-pagination-num{position: absolute;left:0;bottom: 5px;width: 100%;top: auto;display: flex;justify-content: center;align-items: center;gap: 4px;font-size: var(--title-20);z-index: 3;}
        .sol_layer .solLayerSwiper .swiper-pagination-num span{font-size: inherit;font-weight: 400;color: var(--point-white);text-shadow: 0 0 2px var(--black-color00);}
        .sol_layer .solLayerSwiper [class^='swiper-button']{position: absolute;top: 50%;left: 15px;right:auto;margin:0;width: 40px;height: 40px;background: none;transition: all 0.4s;filter: var(--filter-white);transform: translateY(-50%);}
            .sol_layer .solLayerSwiper [class^='swiper-button']:before{position: absolute;content:'';width: 70%;height: 70%;border:solid var(--black-color00);border-width: 2px 2px 0 0;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(-135deg);}
            .sol_layer .solLayerSwiper [class^='swiper-button']:after{display: none;}
            .sol_layer .solLayerSwiper [class^='swiper-button'].swiper-button-next{transform: translateY(-50%) scale(-1, -1);left: auto;right: 15px;}
        
        #layerDim{position: fixed; top:0; left: 0; width: 100%; height: 100%; z-index: 250; background: rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: all 0.4s;}
        body:has(.sol_layer.on){overflow: clip;}
        body:has(.sol_layer.on) #layerDim{opacity: 1; pointer-events: all;}

            /* over */
            @media screen and (min-width:1024px){
                .main_solutions .solSwiper .swiper-slide:hover .arw{opacity: 1; top:50%;}
            }

        @media screen and (max-width:1023px){
            .main_solutions{padding-top:clamp(70px, 16vw, 160px);}
            .main_solutions .solSwiper{padding-bottom: clamp(70px, 14vw, 140px);}
            .main_solutions .solSwiper:before{height: clamp(200px, 40vw, 400px);}
            .main_solutions .solSwiper .cont{padding: clamp(20px, 3vw, 30px);padding-bottom: clamp(50px, 7.5vw, 75px);}
            .main_solutions .solSwiper .date{padding: clamp(20px, 3vw, 30px);}
            .main_solutions .solSwiper .desc dt + dd{margin-top: clamp(12px, 1.6vw, 16px);}
        }
        @media screen and (max-width:640px){
            .main_solutions .controller{position: relative;right:auto;bottom:auto;margin-top: 20px;display: none;}
            .main_solutions .controller [class^='swiper-button']{width: 30px; height: 30px;}
            .sol_layer .solLayerSwiper [class^='swiper-button']{display: none;}
        }
        @media screen and (max-width:479px){
            .main_solutions .solSwiper .desc dd{font-size: 100%;}
            .main_solutions .controller [class^='swiper-button']{width: 20px; height: 20px;}
        }

    /* Product Family */
        .main_family{padding:160px 0 296px;}
        .main_family .step_list{border-top: 1px solid var(--black-color00); counter-reset: stepNo; }
        .main_family .step_list > li{position: relative;font-size: var(--title-20);border-bottom: 1px solid var(--black-color00);padding: 60px clamp(300px, 21vw, 400px) 60px 0;box-sizing: border-box; cursor: pointer;}
            .main_family .step_list > li:before{position: absolute; content:''; width: 100%; height: 0; transition: all 0.6s; background: var(--black-color00); top:0; left:0;}
        .main_family .step_list .desc{position: relative;box-sizing: border-box;}
        .main_family .step_list .desc dt{display: flex;gap: 40px;font-size: 250%;font-weight: 600;color: var(--black-color00);font-family: var(--font-type02);line-height: 1.4;box-sizing: border-box;align-items: center;transition: all 0.6s;}
            .main_family .step_list .desc dt:before{content: counter(stepNo, decimal-leading-zero);counter-increment: stepNo;width: 120px;flex-shrink: 0;text-align: center;font-size: var(--title-20);font-weight: 700;display: flex;align-items: center;justify-content: center; transition: all 0.6s;}
        .main_family .step_list .desc dd{display: none;font-size: inherit;font-weight: 300; color: var(--point-white); line-height: 1.6;padding:20px 0 30px 160px;box-sizing: border-box;}
        .main_family .step_list .logo{position: absolute;right:50px;bottom:50px;font-size: 0;max-width: clamp(200px, 18vw, 350px);opacity: 0;transition: all 0.6s;}
        .main_family .step_list .logo object{pointer-events: none;}

            /* over */
                .main_family .step_list > li.on:before{height: 100%;}
                .main_family .step_list > li.on .desc dt{color: var(--point-color01);}
                    .main_family .step_list > li.on .desc dt:before{filter: var(--filter-white);}
                .main_family .step_list > li.on .logo{opacity: 1; transition-delay: 0.2s;}

        @media screen and (max-width:1023px){
            .main_family{padding: clamp(70px, 16vw, 160px) 0 clamp(70px, 29.6vw, 296px);}
            .main_family .w_custom:has(.step_list){width: 100%;}
            .main_family .step_list > li{padding: clamp(30px, 6vw, 60px);}
                .main_family .step_list > li + li:not(.on){border-top: 1px solid var(--border-color03);}
            .main_family .step_list .desc dt{flex-direction: column;align-items: flex-start;gap: 10px;}
                .main_family .step_list .desc dt:before{width: auto;}
            .main_family .step_list .desc dd{padding: 20px 0 clamp(120px, 15vw, 150px);}
            .main_family .step_list .logo{max-width: none;width: clamp(110px, 23vw, 230px);max-height: clamp(80px, 13.2vw, 132px);margin-left: auto;display: flex;}
        }
        @media screen and (max-width:640px){
            .main_family .step_list .desc dt{font-size: 220%;}
        }
        @media screen and (max-width:479px){
            .main_family .step_list .desc dt{font-size: 190%;}
            .main_family .step_list .desc dd{font-size: 90%;}
        }

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

	FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    .ftr_top{display: flex; flex-direction: column; justify-content: space-between; gap: 20px;}
    .ftr_top span{width: 100%; height: 12px; background: var(--black-color00);}
    #footer{position: relative;background: var(--black-color00);padding: 80px 0 7px;font-size: var(--title-20);font-weight: 300;color: rgba(255,255,255,0.6);box-sizing: border-box;}
    #footer .logo{font-size: 0; margin-bottom: 60px;}
    #footer .link_list{display: flex; flex-wrap: wrap; gap:10px 32px; margin-bottom: 47px;}
    #footer .link_list a{color: rgba(255,255,255,0.6);}
    #footer .link_list a strong{font-weight: inherit; color: var(--point-white);}
    #footer .addr_list{display: flex;flex-direction: column;gap: 17px;}
    #footer .addr_list > li{display: flex;flex-wrap: wrap;align-items: center;gap: 17px 30px;}
    #footer .addr_list .desc{display: flex; gap:0 9px;}
    #footer .addr_list .desc :where(dt, dd){font-size: 90%;font-weight: 200;}
    #footer .addr_list .desc dt{color: var(--point-white); flex-shrink: 0;}
    #footer .addr_list .desc dd{color: rgba(255,255,255,0.8);}
    #footer .copy{display: flex;flex-wrap: wrap;gap: 0 20px;margin-top: 36px;}
    #footer .copy :where(dt, dd){font-size: 80%;font-weight: 300;font-family: var(--font-type02);line-height: 1.625;letter-spacing: 0;}
    #footer .ftr_txt{font-size: 390%;font-weight: 700;color: var(--point-white);line-height: 1;font-family: var(--font-type02);letter-spacing: 0.01em;margin-top: 100px;}

    .quick_list{position: fixed; right:60px; bottom:60px; z-index: 50; display: flex; flex-direction: column; gap: 20px; opacity: 0; pointer-events: none; transition: all 0.4s;}
        #wrap:has(#header.on) .quick_list{opacity: 1; pointer-events: all;}
    .quick_list li{box-shadow: 0 0 20px rgba(0,0,0,0.15); }
    .quick_list a{position: relative;display: flex;align-items: center;justify-content: center;width: 50px;height: 50px;border-radius: 4px;background: var(--point-color01);padding: 12px;box-sizing: border-box;}
        .quick_list .scr_top a{background: var(--point-white);}
    .quick_list a span{position: absolute;width: max-content;height: 100%;padding: 0 4px 0 21px;top:0;right: calc(100% - 4px);font-size: var(--title-16);font-weight: 600;color: var(--point-color01);border-radius: inherit;background: inherit;display: inherit;align-items: inherit;justify-content: inherit;box-shadow: inherit;font-family: var(--font-type02);clip-path: inset(0 0 0 100%); transition: all 0.4s;}

        /* over */
            @media screen and (min-width:1024px){
                .quick_list a:hover span{clip-path: inset(0 0 0 0); color: var(--black-color00);}
            }

    @media screen and (max-width:1580px){
        #footer .ftr_txt{font-size: clamp(20px, 4.8vw, 78px);}

        .quick_list{right:30px; bottom:30px;}
    }
    @media screen and (max-width:1023px){
        .ftr_top{gap: clamp(10px, 2vw, 20px);}
        .ftr_top span{height: clamp(6px, 1.2vw, 12px);}
        #footer{padding-top: clamp(50px, 8vw, 80px);}
        #footer .logo{height: clamp(40px, 8vw, 80px); margin-bottom:clamp(30px, 6vw, 60px)}
        #footer .link_list{column-gap: clamp(20px, 3.2vw, 32px); margin-bottom: clamp(25px, 4.7vw, 47px);}
        #footer .addr_list{gap:clamp(10px, 1.7vw, 17px);}
        #footer .addr_list > li{gap:clamp(10px, 1.7vw, 17px) clamp(20px, 3vw, 30px);}
        #footer .copy{column-gap: clamp(10px, 2vw, 20px); margin-top: clamp(20px, 3.6vw, 36px);}
        #footer .ftr_txt{margin-top: clamp(40px, 10vw, 100px);}

        .quick_list{gap: 15px;}
    }
    @media screen and (max-width:860px){
        .quick_list{right:15px; }
        .quick_list a{width: 45px; height: 45px;}
    }
    @media screen and (max-width:640px){
        #footer .ftr_txt{font-size: clamp(10px, 4.5vw, 78px);}

        .quick_list li{box-shadow: 0 0 10px rgba(0,0,0,0.15); }
    }
    @media screen and (max-width:479px){
        #footer .link_list a{font-size: 90%;}
        
        .quick_list{gap: 10px;}
        .quick_list a{width: 40px; height: 40px;}
    }