@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: 1400px; margin-inline: auto; box-sizing: border-box;}
    #container{background: var(--point-white);padding-block:120px 180px;}

    @media (max-width:1023px){
        #container{padding-block:clamp(60px, 12vw, 120px) clamp(90px, 18vw, 180px);}
    }
    @media (max-width:860px){
        #container, .w_custom{width: calc(100% - 30px);}
    }
    @media (max-width:320px){
        #container,.w_custom{width: calc(100% - 20px);}
    }

	

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

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

───────────────────────────────────────────────────────────*/
    #header{position: fixed;top:0;left:0;width: 100%;height: 90px;z-index: 100;box-sizing: border-box;background: var(--point-white); box-shadow:inset 0 -1px var(--border-color01); transition: all 0.4s;}
    #header .cont{max-width: 1800px;height: 100%;display: flex;align-items: center;justify-content: space-between;gap: 30px;z-index: 5;}
    #header .logo{position: relative;height: 100%;box-sizing: border-box;box-shadow: inset -1px 0 0 var(--border-color01);padding-block: 15px;padding-right: clamp(0px, 3.2vw, 60px);transition: all 0.4s;}
    #header .logo a{position: relative; display: flex; align-items: center; max-width: 140px; height: 100%; box-sizing: border-box;}
    #header .logo span{display: flex;align-items: center;height: 100%;transition: all 0.4s;}
    #header .logo span.ov{position: absolute; top: 50%; left:0; transform: translateY(-50%);}
    #header .gnb{position: absolute;top:0;left:50%;transform: translateX(-50%);width: calc(100% - 380px);height: 100%;display: flex;justify-content: center;text-align: center;box-sizing: border-box;font-size: var(--title-20);color: var(--black-color01);gap: clamp(20px, 6.3vw, 120px);transition: all 0.4s;}
    #header .gnb > li{position: relative; height: 100%;}
    #header .gnb > li > a{position: relative; display: flex; align-items: center; justify-content: center; font-size: 110%; font-weight: 500; height: 100%; box-sizing: border-box;}
        #header .gnb > li > a:before{position: absolute; content:''; width: 0; height: 2px; background: var(--point-color01); left:50%; bottom:0; transform: translateX(-50%); transition: all 0.4s;}
    #header .gnb .dep02{position: absolute;top:100%;left:0;display: flex;flex-wrap: wrap;text-align: left;width: max-content;opacity: 0;pointer-events: none;transition: all 0.4s;}
        #header .gnb .dep02:before{position: absolute; content:''; width: 200vw; height: 100%; top:0; left:50%; transform: translateX(-50%); background: var(--point-white);}
    #header .gnb .dep02 > li{position: relative;font-size: 90%;font-weight: 500;color: var(--black-color03);display: inline-flex;align-items: center;}
    #header .gnb .dep02 > li:not(:last-child):after{display: inline-flex;content: '';width: 1px;height: 12px;background: var(--border-color01);margin-inline: clamp(20px, 2.7vw, 50px);}
    #header .gnb .dep02 > li > a{display: block;padding-block: 23px 24px;transition: all 0.4s;}
    #header .link_wrap{display: flex;align-items: center;gap: clamp(20px, 2vw, 30px);padding-left: clamp(20px, 2.7vw, 50px);height: 100%;box-sizing: border-box;box-shadow: inset 1px 0 0 var(--border-color01);transition: all 0.4s;}
    #header .lang_desc{position: relative;font-size: var(--title-20);color: var(--black-color05);text-transform: uppercase;transition: all 0.4s;}
    #header .lang_desc dt{position: relative;font-size: 90%;font-weight: 500;display: flex;align-items: center;gap: 10px;padding-right: clamp(20px, 2vw, 28px);box-sizing: border-box;cursor: pointer;}
        #header .lang_desc dt:before{display: inline-flex;content:'';width: 18px;height: 18px;background: url('../images/skin/icon_lang.svg') no-repeat center / 100% auto;}
        #header .lang_desc dt:after{position: absolute;content:'';width: 7px;height: 5px;background: var(--black-color05);top:50%;right:0;transform: translateY(-50%);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%);background: var(--point-white);padding-block: 8px;width: max-content;box-sizing: border-box;opacity: 0;pointer-events: none;transition: all 0.4s;border: 1px solid var(--border-color01);}
        #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-color03);padding: 5px 20px;}
        #header .lang_desc dd a.on{color: var(--point-color01);}
    #header .allCate{position: relative; display: flex;flex-direction: column;align-items: flex-end;justify-content: space-between;width: 45px;height: 18px;box-sizing: border-box; transition: all 0.4s;}
    #header .allCate span{position: absolute; top:0; right:0; width: 80%;height: 2px;background: var(--black-color00); transition: all 0.4s;}
        #header .allCate span:nth-child(2){top:calc(50% - 1px); right:auto; left:0;}
        #header .allCate span:nth-child(3){top:calc(100% - 2px); }
        #header .allCate.on span{inset: auto; top:50%; left:50%; transform: translate(-50%, -50%) rotate(45deg);}
        #header .allCate.on span:nth-child(2){opacity: 0;}
        #header .allCate.on span:nth-child(3){transform: translate(-50%, -50%) rotate(-45deg);}

        /* color */
            #header:not(.on){background: none; box-shadow:inset 0 -1px rgba(255, 255, 255, 0.3);}
            #header:not(.on) :where(.gnb > li > a, .lang_desc dt, .allCate){filter: var(--filter-white);}
            #header:not(.on) .logo{box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.3);}
            #header:not(.on) .logo span.ov{opacity: 0;}
            #header:not(.on) .link_wrap{box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.3);}

        /* over */
            @media (hover:hover) and (pointer:fine){
                #header:hover{background: var(--point-white); box-shadow:inset 0 -1px var(--border-color01);}
                #header:hover :where(.gnb > li > a, .lang_desc dt, .allCate){filter: none;}
                #header:hover .logo{box-shadow: inset -1px 0 0 var(--border-color01);}
                #header:hover .logo span:not(.ov){opacity: 0;}
                #header:hover .logo span.ov{opacity: 1;}
                #header .gnb > li:hover > a:before{width: 100%;}
                #header .gnb > li:hover .dep02{opacity: 1; pointer-events: all;}
                #header .gnb .dep02 > li:hover > a{color: var(--point-color01);}
                #header:hover .link_wrap{box-shadow: inset 1px 0 0 var(--border-color01);}
            }

        /* 전체카테고리 */
            #header:has(.allCate.on){background: var(--point-white); box-shadow:inset 0 -1px var(--border-color01);}
            #header:has(.allCate.on) .logo{box-shadow: inset -1px 0 0 var(--border-color01);}
            #header:has(.allCate.on) .gnb{opacity: 0; pointer-events: none;}
            #header:has(.allCate.on) :is(.gnb > li > a, .lang_desc dt, .allCate){filter: none;}
            #header:has(.allCate.on) .link_wrap{box-shadow: inset 1px 0 0 var(--border-color01);}
    
    @media (max-width:1023px){
        #header{height: clamp(60px, 10vw, 90px);}
        #header .logo{box-shadow: none !important;}
        #header .gnb{display: none;}
        #header .lang_desc dd a{padding:clamp(3px, 1vw, 5px) clamp(15px, 2vw, 20px);}
        #header .lang_desc dt:before{width: clamp(16px, 2.5vw, 18px);height: clamp(16px, 2.5vw, 18px);}
        #header .allCate{width: clamp(30px, 5vw, 45px);height: clamp(16px, 2.5vw, 18px);}
    }

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

	Aside | outline/nav.html

───────────────────────────────────────────────────────────*/
    
    #aside{position: fixed;top: 90px;left:0;width: 100%;height: calc(100vh - 90px);background: var(--point-white);opacity: 0;clip-path: inset(0 0 100% 0);transition: all 0.6s;}
        body:has(.allCate.on) #aside{opacity: 1; clip-path: inset(0 0 0 0);}
        body:has(.allCate.on){overflow: clip; touch-action: none;}
    #aside .w_custom{display: flex;max-width: 1800px;height: 100%;}
    #aside .thumb{position: relative;font-size: 0;width: 34%;}
    #aside .thumb span{position:relative;display: block;width: calc(100% + 60px);height: 100%;margin-left: -60px;overflow: hidden;}
    #aside .thumb img{width: 100%; height: 100%; object-fit: cover;}
    #aside .as_gnb{width: 66%;height:100%;padding-left: clamp(50px, 6.3vw, 120px);padding-block: 50px;display: flex;flex-direction: column;justify-content: center;font-size: var(--title-20);box-sizing: border-box;overflow: hidden;overflow-y: auto;}
    #aside .as_gnb > li{display: flex;align-items: center;padding-block: clamp(20px, 6.6vh, 60px);box-sizing: border-box;}
        #aside .as_gnb > li:not(:last-child){border-bottom: 1px solid var(--border-color01);}
    #aside .as_gnb > li > a{font-size: 140%; font-weight: 500; color: var(--black-color00); width: 220px; flex-shrink: 0; padding-right: 30px; box-sizing: border-box;}
    #aside .as_gnb .dep02{display: flex;flex-wrap: wrap;gap: 15px 60px;}
    #aside .as_gnb .dep02 > li{font-size: 90%; font-weight: 400; color: var(--black-color00); line-height: 1.5;}

        /* over */
        @media (hover:hover) and (pointer:fine){
            #aside .as_gnb .dep02 > li:hover > a{color: var(--point-color01);text-decoration: underline;text-underline-offset: 3px;text-decoration-thickness: 1px;text-decoration-color: var(--point-color01);}
        }
    

    @media (max-width:1023px){
        #aside{overflow: hidden; overflow-y: auto; top: clamp(60px, 10vw, 90px); height: calc(100vh - clamp(60px, 10vw, 90px));}
		#aside .w_custom{flex-direction:column;}
        #aside .thumb{flex-shrink: 0;width: 100%;height: clamp(180px, 45vw, 400px);}
        #aside .thumb span{margin-left: -30px;}
        #aside .as_gnb{width: 100%;height: auto;padding: clamp(25px, 5vw, 50px) 0 100px;flex-shrink: 0;}
        #aside .as_gnb > li{padding-block: clamp(20px, 5vw, 50px);}
        #aside .as_gnb > li > a{width: clamp(170px, 22vw, 220px);}
        #aside .as_gnb .dep02{gap: clamp(8px, 1.5vw, 15px) clamp(25px, 6vw, 60px);}
    }
    @media (max-width:860px){
        #aside .thumb span{width: calc(100% + 30px); margin-left: -15px;}
    }
    @media (max-width:479px){
        #aside .as_gnb > li{flex-direction: column;gap: 10px;align-items: flex-start;}
        #aside .as_gnb > li > a{width: 100%;}
    }

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

    MAIN | index.html

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

    /* 비주얼 */
        .main_visual {position:relative;  box-sizing: border-box; overflow: clip;}
        .main_visual .slick-slide{position: relative; height: 980px; overflow: clip;}
        .main_visual .link{position: absolute; inset: 0; z-index: 5;}
        .main_visual .thumb{display: block;width: 100%;height: 100%;background: no-repeat center / cover;transform: scale(1);}
        .main_visual .active .thumb{transform: scale(1.05); transition: all 5s;}
        .main_visual .slick-dots{position: absolute;left:0;bottom:100px;display: flex;align-items: center;justify-content: center;gap: 18px;width: 100%;padding-inline: 30px;box-sizing: border-box;font-size: 0;z-index: 7;}
        .main_visual .slick-dots button{display: inline-block; width: 10px; height: 10px; border:2px solid var(--point-white); border-radius: 10px; box-sizing: border-box; font-size: inherit; transition: all 0.4s;}
        .main_visual .slick-dots .slick-active button{width: 40px; background: var(--point-white);}
        .main_visual .scr_dwn{position:absolute;bottom:0;right: clamp(15px, 6.3vw, 120px);font-size: var(--title-20);display: flex;align-items: center;gap: 20px;z-index: 8;writing-mode: tb;cursor: pointer;}
        .main_visual .scr_dwn dt{font-size: 80%;font-weight: 400;color: var(--point-white);letter-spacing: 0.03em;}
        .main_visual .scr_dwn dd{position: relative;width: 2px;height: 120px;background: rgba(255, 255, 255, 0.3);box-sizing: border-box;overflow: clip;}
            .main_visual .scr_dwn dd:before{position: absolute;content:'';width: 100%;height: 20%;background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%);top: -20%;left:0;}
            .main_visual .scr_dwn dd:before{animation-name: scrDwn; animation-duration:2s; animation-iteration-count:infinite; transition-timing-function:linear;}
            @keyframes scrDwn {0% {top:-20%;}100% {top:calc(100% + 20%);}}

        @media (max-width:1400px){
            .main_visual .slick-slide{height: clamp(220px, 70vw, 980px);}
            .main_visual .slick-dots{bottom: clamp(25px, 7.3vw, 100px);}
            .main_visual .scr_dwn{right: 30px;}
            .main_visual .scr_dwn dd{height: clamp(60px, 8.8vw, 120px);}
        }
        @media (max-width:1023px){
            .main_visual .slick-dots{gap: clamp(10px, 2.3vw, 18px);}
            .main_visual .slick-dots button{width: clamp(8px, 1.5vw, 10px); height: clamp(8px, 1.5vw, 10px);}
            .main_visual .slick-dots .slick-active button{width: clamp(30px, 4.5vw, 40px);}
        }
        @media (max-width:860px){
            .main_visual .scr_dwn{display: none;}
        }
        @media (max-width:750px){
            .main_visual .slick-slide{height: clamp(560px, 136vw, 1120px);}
        }

    /* 공통 */
        .main_title{position: relative;font-size: var(--title-20);box-sizing: border-box;display: flex;flex-direction: column;align-items: flex-start;gap: 33px;z-index: 3;}
        .main_title h2{font-size: 310%;font-weight: 600;color: var(--black-color01);line-height: 1.1;}
            .main_title h2 + p{margin-top: 7px;}
        .main_title h3{font-size: 225%; font-weight: 600; color: var(--black-color01); line-height: 1.4; letter-spacing: -0.03em;}
			.main_title h3 + p{margin-top: 7px;}
        .main_title h6{font-size: inherit; font-weight: 600; color: var(--black-color01);}
        .main_title h6 em{position: relative; font-weight: inherit; color: var(--point-color01); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 20px;}
        .main_title h6 em:before{display: inline-flex; content:''; width: 50px; height: 1px; background: var(--point-color01);}
        .main_title p{font-size: 90%;font-weight: 400;color: var(--black-color05);line-height: 1.77;letter-spacing: -0.03em;font-family: var(--font-type02);}
        .main_title p big{font-size: 105%; line-height: 1.73;}
        .main_title .more_arw{margin-top: 27px;}

        .more_arw{position: relative;display: block;width: fit-content;font-size: var(--title-20);box-sizing: border-box;}
        .more_arw span{position: relative;display: inline-flex;align-items: center;min-width: 220px;height: 60px;padding-inline: 30px 55px;background: var(--black-color01);font-size: 90%;font-weight: 500;color: var(--point-white);box-sizing: border-box;letter-spacing: 0.01em;transition: all 0.4s;}
            .more_arw span:before{position: absolute;content:'';width: 16px;height: 14px;background: url('../images/skin/more_arw.svg') no-repeat center / 100% auto;filter: var(--filter-white);top: 50%;right: 30px;transform: translateY(-50%);}

        .bullet_list{position: relative; font-size: var(--title-20); box-sizing: border-box; display: flex; flex-direction: column; gap: 4px;}
        .bullet_list > li{position: relative;font-size: 85%;font-weight: 400;color: var(--black-color03);line-height: 1.88;display: flex;align-items: baseline;gap: 8px;}
        .bullet_list > li:before{display: inline-flex;content:'';width: 4px;aspect-ratio: auto 1;border-radius: 100%;background: var(--black-color03);transform: translateY(-4px);flex-shrink: 0;}

        .more_icon{height: 50px; aspect-ratio: 1 auto; background: var(--point-white); display: flex; align-items: center; justify-content: center; transition: all 0.5s; transition-delay: 0.1s;}
        .more_icon img{transition: all 0.5s;}

            /* over */
                @media (min-width:1024px){
                    .more_arw:hover span{letter-spacing: 0.13em;}
                    .more_icon:hover{background: var(--point-color01); transition-delay: 0s;}
                    .more_icon:hover img{filter: var(--filter-white);}
                }

        @media (max-width:1400px){
            .main_title br.for_pc{display: none;}
        }
        @media (max-width:1023px){
            .main_title{gap: clamp(10px, 3.3vw, 33px); text-wrap: balance;}
            .main_title h2{font-size: 280%;}
				.main_title h2 + p{margin-top: clamp(0px, 1vw, 7px);}
            .main_title h3{font-size: 200%;}
            .main_title h3 + p{margin-top: clamp(3px, 1vw, 7px);}
            .main_title h6 em{gap: clamp(10px, 2vw, 20px);}
            .main_title h6 em:before{width:clamp(25px, 5vw, 50px);}
            .main_title .more_arw{margin-top: clamp(10px, 3vw, 27px);}

            .more_arw span{min-width: clamp(160px, 22vw, 220px);height: clamp(50px, 7vw, 60px);padding-inline: clamp(20px, 3vw, 30px) clamp(45px, 5.5vw, 55px);}
            .more_arw span:before{right: clamp(20px, 3vw, 30px);}

            .more_icon{height: clamp(40px, 5vw, 50px);}
        }
        @media (max-width:640px){
            .main_title h2{font-size: 250%;}
            .main_title h3{font-size: 180%;}
        }
        @media (max-width:479px){
            .main_title h2{font-size: 220%;}
            .main_title h3{font-size: 160%;}
        }

    /* 어바웃 */
        .main_about{position: relative; padding-block: 180px 220px;}
        .main_about .w_custom{display: flex;flex-wrap: wrap;align-items: center;gap: 100px 0;}
        .main_about .thumb{position: relative; width: 39.2%; aspect-ratio: auto 1; box-sizing: border-box;}
            .main_about .thumb:before{position: absolute;content:'';width: 100px;aspect-ratio: 0.416;background: var(--point-color04);top:-40px;left:-40px;clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 calc(100% - 40px));}
            .main_about .thumb:after{position: absolute;content:'';right: -100px;bottom: -70px;width: 290px;aspect-ratio: 1.33;background: url('../images/skin/simbol.svg') no-repeat center / 100% auto;backdrop-filter: blur(2px);opacity: 0.6;clip-path: polygon(0 100%, 100% 100%, 100% 0, 65.5% 0, 65.5% 35%, 35% 35%, 35% 70%, 0% 70%);}
        .main_about .thumb span{position: relative; display: block; width: 100%; height: 100%; overflow: hidden;}
        .main_about .thumb img{width: 100%; height: 100%; object-fit: cover;}
        .main_about .main_title{width: 60.8%;padding-left: clamp(40px, 10.6vw, 202px);padding-bottom: 7px;}


        @media (max-width:1023px){
            .main_about{padding-block: clamp(70px, 18vw, 180px) clamp(70px, 22vw, 220px);}
            .main_about .w_custom{row-gap: clamp(30px, 10vw, 100px);}
            .main_about .thumb{width: calc(100% - 80px);max-width: 550px;padding-left: 30px;}
            .main_about .thumb:before{width: clamp(0px, 10vw, 100px);top: clamp(-40px, -4vw, -15px);left: 0;}
            .main_about .thumb:after{width: clamp(0px, 29vw, 290px); right: clamp(-100px, -10vw, -30px); bottom: clamp(-70px, -7vw, -30px);}
            .main_about .main_title{width: 100%; padding: 0;}
        }
		@media (max-width:860px){
            .main_about .thumb { padding-left: 15px; }
        }

    /* 서비스 */
        .main_service{position: relative; background: url('../images/skin/main_service.jpg') no-repeat center / cover; box-sizing: border-box; padding-block: 160px;}
        .main_service .w_custom{display: flex;align-items: center;flex-wrap:wrap;gap: 50px 0;}
        .main_service .main_title{width: 37.1%;padding-right: 50px;}
        .main_service .main_title :where(h2, p){filter: var(--filter-white);}
        .main_service .main_title h6 em{color: var(--point-color03);}
        .main_service .main_title h6 em:before{background: var(--point-color03);}
        .main_service .main_title p{opacity: 0.7;}
        .main_service .main_title .swiper-pagination{position: relative;inset: auto;display: flex;gap: 18px;margin-top: clamp(15px, 3.7vw, 68px);}
        .main_service .main_title .swiper-pagination span{width: 10px;height: 10px;border:2px solid var(--point-white);background: none;margin: 0;border-radius: 10px;opacity: 1;box-sizing: border-box;transition: all 0.4s;}
        .main_service .main_title .swiper-pagination .swiper-pagination-bullet-active{width: 40px; background: var(--point-white);}
        .main_service .seviSwiper{position: relative;width: 62.9%;padding-right: 41px;box-sizing: border-box;clip-path: inset(0 -200% 0 -1px);}
        .main_service .seviSwiper .swiper-slide{position: relative;height: auto;aspect-ratio: 0.769;min-height: 430px;}
        .main_service .seviSwiper .link{position: absolute; inset: 0; z-index: 7;}
        .main_service .seviSwiper .cont{position: relative;width: 100%;height: 100%;transition: all 0.5s;}
        .main_service .seviSwiper :is(.front, .back){padding: clamp(45px, 3.2vw, 60px) clamp(20px, 2.2vw, 40px);}
        .main_service .seviSwiper .front{width: 100%;height: 100%;background:url('../images/skin/main_service_bg.jpg') no-repeat center / cover;box-sizing: border-box;text-align: center;display: flex;flex-direction: column;gap: clamp(20px, 2.2vw, 40px);align-items: center;}
        .main_service .seviSwiper .front .thumb{display: flex;align-items: center;justify-content: center;width: 85%;max-width: 270px;aspect-ratio: auto 1;border-radius: 100%;overflow: hidden;margin-inline: auto;}
        .main_service .seviSwiper .front .desc{position: relative; font-size: var(--title-20);}
        .main_service .seviSwiper .front .desc dt{font-size: 90%; font-weight: 500; color: var(--point-color01);}
        .main_service .seviSwiper .front .desc dt + dd{margin-top: 10px;}
        .main_service .seviSwiper .front .desc dd{font-size: 160%;font-weight: 600;color: var(--black-color01);letter-spacing: -0.03em;}
        .main_service .seviSwiper .back{position: absolute;inset: 0;opacity: 0;transition: all 0.4s;}
        .main_service .seviSwiper .back .thumb{position: absolute;inset: 0;width: calc(100% + 2px);margin-left: -1px;height: 100%;overflow: hidden;}
        .main_service .seviSwiper .back .thumb img{width: 100%; height: 100%; object-fit: cover;}
        .main_service .seviSwiper .back .desc{position: relative;font-size: var(--title-20);box-sizing: border-box;}
        .main_service .seviSwiper .back .desc dt{font-size: 90%; font-weight: 500; color: rgba(255,255,255,0.6);}
            .main_service .seviSwiper .back .desc dt + dd{margin-top: 15px;}
        .main_service .seviSwiper .back .desc dd{font-size: 170%; font-weight: 500; color: var(--point-white); letter-spacing: -0.03em;}
        .main_service .seviSwiper .back .desc em{font-weight: inherit;}
        .main_service .seviSwiper .back .desc em + .bullet_list{margin-top: clamp(20px, 1.8vw, 30px);padding-top: clamp(20px, 1.8vw, 30px);border-top: 1px solid rgba(255,255,255,0.2);}
        .main_service .seviSwiper .back .bullet_list > li{filter: var(--filter-white);}       
        .main_service .seviSwiper .more_icon{position: absolute; right:40px; bottom:40px; opacity: 0; transform: translateY(100%);}

            /* over */
                @media (min-width:1024px){
                    .main_service .seviSwiper .swiper-slide:hover .back{opacity:1;}
                    .main_service .seviSwiper .swiper-slide:hover .more_icon{transform: translateY(0); opacity: 1;}
                }

        @media (max-width:1300px){
            .main_service .seviSwiper{padding-right: 30px;}
        }
        @media (max-width:1200px){
            .main_service .seviSwiper{padding-right: 20px;}
			.main_service .seviSwiper .front .desc dd{font-size:140%;}
			.main_service .seviSwiper .back .desc dd{font-size:130%;}
        }
        @media (max-width:1023px){
            .main_service{padding-block: clamp(70px, 16vw, 160px);}
            .main_service .w_custom{row-gap: clamp(30px, 5vw, 50px);}
            .main_service :is(.main_title, .seviSwiper){width: 100%; padding-right: 0;}
            .main_service .seviSwiper :is(.front, .back){padding-block: clamp(35px, 4.5vw, 45px);}
            .main_service .seviSwiper .swiper-slide{min-height: auto;aspect-ratio: auto;}
            .main_service .seviSwiper .front .desc dd{font-size: 150%;}
            .main_service .seviSwiper .front .desc dt + dd{margin-top: clamp(5px, 1vw, 10px);}
			.main_service .seviSwiper .front .desc dd{font-size:120%;}
            .main_service .main_title .swiper-pagination{gap: clamp(10px, 2.3vw, 18px);}
            .main_service .main_title .swiper-pagination span{width: clamp(8px, 1.5vw, 10px); height: clamp(8px, 1.5vw, 10px);}
            .main_service .main_title .swiper-pagination .swiper-pagination-bullet-active{width: clamp(30px, 4.5vw, 40px);}
        }
        @media (max-width:860px){
            .main_service .seviSwiper{clip-path: none;}
        }
        @media (max-width:640px){
            .main_service .seviSwiper .front .desc dd{font-size: 140%;}
        }
        @media (max-width:479px){
            .main_service .seviSwiper .front .desc dd{font-size: 130%;}
            .main_service .seviSwiper .front .desc dt{font-size: max(13px, 80%);}
        }

    /* 프로젝트 */
        .main_project{position: relative; padding-block: 160px;}
        .main_project:before{position: absolute;content:'';top:0;left:0;width: 28.1%;height: 100%;background: var(--gray-bg02);}
        .main_project .top_sec{display: flex;align-items: flex-end;justify-content: space-between;gap: 25px 30px;flex-wrap: wrap;margin-bottom: 38px;}
        .main_project .tab_list{display: flex;font-size: var(--title-20);gap: 15px;margin-bottom: 12px;width: 100%;box-sizing: border-box;}
        .main_project .tab_list > li{position: relative;display: inline-flex;align-items: center;justify-content: center;min-width: 100px;text-align: center;font-size: 90%;font-weight: 400;font-family: var(--font-type02);color: var(--black-color06);letter-spacing: -0.03em;padding: 13px 24px 12px;max-height: 48px;cursor: pointer;box-shadow: inset 0 0 0 1px var(--border-color01);transition: all 0.4s;box-sizing: border-box;background: var(--point-white);}
        .main_project .tab_list > li:before{position: absolute;content:'';inset: 0;border:2px solid var(--point-color01);opacity: 0;transition: all 0.4s;pointer-events: none;box-sizing: border-box;}
            .main_project .tab_list > li.on{color: var(--point-color01);font-weight: 600;}
            .main_project .tab_list > li.on:before{opacity: 1;}
        .main_project .tab_conts .item{transition: all 0.4s;}
            .main_project .tab_conts .item:not(.on){opacity: 0; height: 0; overflow: clip;}
        .main_project .prd_wrap{display: flex;flex-wrap: wrap;gap: 30px;}
        .main_project .pro_list{display: flex; flex-wrap: wrap; width: calc(39.3% - 30px); gap: 30px;}
            .main_project .pro_list:nth-child(1){width: 60.7%;}
        .main_project .pro_list .link{position: absolute; inset: 0; z-index: 7;}
        .main_project .pro_list > li{position: relative;width: 100%;aspect-ratio: auto 2;overflow: clip;height: calc(100% / 2 - 15px);min-height: 200px;}
            .main_project .pro_list > li:before{position: absolute; content:''; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.40) 100%); z-index: 3;}
        .main_project .pro_list .thumb{position: relative; width: 100%; height: 100%; overflow: clip;}
        .main_project .pro_list .thumb img{width: 100%; height: 100%; object-fit: cover; transition: all 0.4s;}
        .main_project .pro_list .desc{position: absolute;inset: 0;display: flex;flex-direction: column;justify-content: flex-end;align-items: flex-start;padding: clamp(20px, 1.8vw, 30px);padding-right: 100px;box-sizing: border-box;font-size: var(--title-20);color: var(--point-white);font-family: var(--font-type02);z-index: 4;}
        .main_project .pro_list .desc dt{font-size: 80%;font-weight: 200;letter-spacing: -0.03em;}
            .main_project .pro_list .desc dt + dd{margin-top: 11px;}
        .main_project .pro_list .desc dd{font-size: 120%;font-weight: 500;letter-spacing: -0.03em;}
        .main_project .pro_list .more_icon{position: absolute; right:30px; bottom:30px; z-index: 5; transform: translateY(100%); opacity: 0;}

        .main_project .pro_list:nth-child(1) > li{aspect-ratio: auto 1.54;height: auto;}
        .main_project .pro_list:nth-child(1) .desc{padding-left: clamp(25px, 2.3vw, 40px);}
        .main_project .pro_list:nth-child(1) .desc dt{font-size: 90%;}
        .main_project .pro_list:nth-child(1) .desc dd{font-size: 150%;}
        .main_project .pro_list:nth-child(1) .more_icon{right:40px;}

            /* over */
                @media (min-width:1024px){
                    .main_project .tab_list > li:not(.on):hover{box-shadow: inset 0 0 0 1px var(--point-color01); color: var(--point-color01);}
                    .main_project .pro_list > li:hover .more_icon{transform: translate(0); opacity: 1;}
                    .main_project .pro_list > li:hover .thumb img{transform: scale(1.05);}
                }

        @media (max-width:1200px){
            .main_project .prd_wrap{gap: 20px;}
            .main_project .pro_list{width: calc(39.3% - 20px); gap: 20px;}
            .main_project .pro_list > li{height: calc(100% / 2 - 10px);}
        }
        @media (max-width:1023px){
            .main_project{padding-block: clamp(70px, 16vw, 160px);}
            .main_project .top_sec{margin-bottom: clamp(15px, 3.8vw, 38px);}
            .main_project .tab_list{gap: clamp(10px, 2vw, 15px);}
            .main_project .tab_list > li{min-width: clamp(60px, 11vw, 100px);padding-inline: clamp(10px, 3vw, 24px);padding-block: clamp(10px, 2vw, 12px);}
            .main_project .prd_wrap{gap: 15px;}
            .main_project .pro_list{width: calc(39.3% - 15px); gap: 15px;}
            .main_project .pro_list > li{height: calc(100% / 2 - 7.5px);}
            .main_project .pro_list .desc dt + dd{margin-top: clamp(8px, 1.1vw, 11px);}
            .main_project .pro_list .desc dd{font-size: 110%;}
            .main_project .pro_list:nth-child(1) .desc dd{font-size: 140%;}
        }
        @media (max-width:860px){
            .main_project .prd_wrap{gap: 15px;}
            .main_project .pro_list{width: 100%;}
                .main_project .pro_list:nth-child(1){width: 100%;}
            .main_project .pro_list > li{height: auto;}
                .main_project .pro_list:nth-child(1) > li{aspect-ratio: auto 2;}
            .main_project .pro_list .desc dt{font-size: 90%;}
            .main_project .pro_list .desc dd{font-size: 140%;}
        }
		@media (max-width:479px){
			.main_project .tab_list > li{width:100%;}
			.main_project .tab_list > li:first-child{width:150%}
        }

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

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    #footer{position: relative; background: var(--black-color01); padding-block: 60px 65px; box-sizing: border-box; color: var(--point-white);}
    #footer .info{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 25px 30px;}
    #footer .logo{font-size: 0;width: 80%;max-width: 407px;}
    #footer .link_list{display: flex; flex-wrap: wrap; font-size: var(--title-20);}
    #footer .link_list > li{display: inline-flex;align-items: center;font-size: 90%;font-weight: 300;letter-spacing: -0.03em;}
    #footer .link_list > li:not(:last-child):after{display: inline-flex;content:'';width: 4px;height: 4px;background: rgba(255,255,255,0.4);margin-inline: 24px;}
    #footer .link_list > li em{font-weight: 400;}
    #footer .exp{margin-top: 50px;padding-top: 38px;border-top: 1px solid rgba(221, 221, 221, 0.2);}
    #footer .addr_list{display: flex;flex-direction: column;gap: 8px;}
    #footer .addr_list > li{display: flex;flex-wrap: wrap;gap: 8px 30px;}
    #footer .addr_list .desc{display: inline-flex; font-size: var(--title-20); gap: 12px;}
    #footer .addr_list .desc :where(dt, dd){font-size: max(13px, 85%);font-weight: 300;color: var(--point-white);line-height: 1.5;letter-spacing: -0.02em;}
    #footer .ft_pre{font-family: var(--font-type02);}
    #footer .addr_list .desc dt{flex-shrink: 0;}
    #footer .addr_list .desc dd{opacity: 0.8;}
    #footer .copy{display: flex;flex-wrap: wrap;gap: 6px;font-size: var(--title-20);margin-top: 28px;}
    #footer .copy :where(dt, dd){font-size: max(13px, 80%);font-weight: 200;color: var(--point-white);opacity: 0.4;letter-spacing: -0.025em;}

    .scr_top{position: fixed;right:30px;bottom: 37px;z-index: 50;display: flex;align-items: center;justify-content: center;width: 54px;height: 54px;background: var(--point-color02);border-radius: 100%;padding: 10px;box-sizing: border-box; opacity: 0; pointer-events: none; transition: all 0.4s;}
    body:has(#header.on) .scr_top{opacity: 1; pointer-events: all;}

    @media (max-width:1023px){
        #footer{padding-block: clamp(40px, 6vw, 60px) clamp(45px, 6.5vw, 65px);}
        #footer .link_list > li:not(:last-child):after{margin-inline: clamp(15px, 3vw, 24px);width: clamp(3px, 0.8vw, 4px);height: clamp(3px, 0.8vw, 4px);}
        #footer .exp{margin-top: clamp(25px, 5vw, 50px);padding-top: clamp(25px, 3.8vw, 38px);}
        #footer .addr_list{gap: clamp(5px, 1vw, 8px);}
        #footer .addr_list > li{gap: clamp(5px, 1vw, 8px) clamp(20px, 3vw, 30px);}
        #footer .copy{margin-top: clamp(20px, 3vw, 28px);}

        .scr_top{width: clamp(40px, 5.4vw, 54px); height: clamp(40px, 5.4vw, 54px);}
    }
    @media (max-width:860px){
        .scr_top{right:15px; bottom:25px;}
    }