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

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

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

/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
	#wrap {position:relative;width:100%; box-sizing: border-box; overflow: clip; opacity: 1; transition: all 0.6s; }
    body{overflow: clip; overflow: visible;}
    /* body:has(.intro.end){overflow: visible;}
    body:has(.intro.end) #wrap{opacity: 1;} */

    #container, .w_custom{position: relative; width: calc(100% - 60px); max-width: 1600px; margin-inline: auto; box-sizing: border-box;}
    #container{padding-block:100px 140px;}
    

    /* .intro{position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
    .intro .w_custom{translate: 70px; transition: all 1.5s; transition-delay: 3s;}
    .intro .logo_list{display: flex; align-items: center; justify-content: center; gap: 25px; opacity: 0; transition: all 1.5s;}
    .intro .logo_list > li{position: relative; transition: all 1.5s;}
        .intro .logo_list > li:nth-child(1){width: 105px; clip-path: inset(-500% 100% -500% 0);}
    .intro .logo_list > li:nth-child(2){width: 165px; opacity: 0; clip-path: inset(0 100% 0 0); transition: all 1.5s; transition-delay: 2s;}
    .intro .logo_list .simbol{position: absolute;top:50%;right: -20px;translate: 0 -50%;width: 125px;max-width: none;max-height: none; clip-path: inset(0 100% 0 0); transition: all 1.2s; transition-delay: 1s;}

        .intro.end{opacity: 0; transition: all 1s; transition-delay: 1s; pointer-events: none;}
        .intro.on{background: var(--point-color01);}
        .intro.on .w_custom{translate: 0;}
        .intro.on:not(.end) .logo_list{opacity: 1;}
        .intro.on .logo_list > li:nth-child(1){clip-path: inset(-500% -20px -500% 0);}
        .intro.on .logo_list > li:nth-child(2){clip-path: inset(0); opacity: 1;}
        .intro.on .logo_list .simbol{clip-path: inset(0);} */


    input:is([type="text"], [type="number"], [type="password"]){line-height: normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    label:has([type="checkbox"]){display: flex;gap: 20px;font-size: var(--title-20);font-weight: 500;color: var(--point-white);cursor: pointer;box-sizing: border-box;width: fit-content;line-height: 28px;letter-spacing: -0.06em;}
    label [type="checkbox"]{display: inline-block;width: 29px;height: 28px;border-radius: var(--radius-04);box-sizing: border-box;cursor: pointer;background: no-repeat center;box-shadow: inset 0 0 0 1px var(--black-color06);transition: all 0.4s;}
    label [type="checkbox"]:checked{background: var(--point-color01) url('../images/skin/chk_box.svg') no-repeat center;box-shadow: none;}

    .for_m{display: none;}

    @media (max-width:1023px){
        #container{padding-block:clamp(50px, 10vw, 100px) clamp(90px, 14vw, 140px);;}
        .for_pc{display: none;}

        label:has([type="checkbox"]){gap: 15px;line-height: clamp(24px, 3.3vw, 28px);}
        label [type="checkbox"]{width: clamp(24px, 3.3vw, 28px);height: clamp(24px, 3.3vw, 28px);}
		label [type="checkbox"]:checked{background-size: clamp(13px, 2.3vw, 18px) auto;}
    }
    @media (max-width:860px){
        #container, .w_custom{width: calc(100% - 30px);}
        .for_m{display: inline-block;}
    }
    @media (max-width:500px){
        .intro .w_custom{translate: 50px;}
        .intro .logo_list > li:nth-child(1){width: 75px;}
        .intro .logo_list > li:nth-child(2){width: 120px;}
        .intro .logo_list .simbol{width: 95px;}
    }
    @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: 110px;z-index: 50;transition: all 0.4s;}
    #header .cont{position: relative; height: 100%; transition: all 0.4s;}
    #header .w_custom{max-width: 1800px; height: 100%; display: flex; align-items: center; justify-content: space-between; gap:15px;  transition: all 0.4s;}
    #header .logo{height: 100%;}
    #header .logo a{display: flex;align-items: center;max-width: 149px;height: 100%;padding-block: 15px;box-sizing: border-box;}
    #header .gnb{position: absolute;width: calc(100% - 500px);height: 100%;top:0;left:50%;translate:-50%;display: flex;justify-content: center;font-size: var(--title-20);letter-spacing: 0.01em;text-align: center;box-sizing: border-box;}
    #header .gnb > li{position: relative; height: 100%; font-size: inherit; font-weight: 600; color: var(--black-color02); box-sizing: border-box;}
    #header .gnb > li > a{display: flex;align-items: center;height: 100%;box-sizing: border-box;padding-inline: clamp(15px, 3.2vw, 60px);  }
    #header .gnb .dep02{position: absolute;top: 80%;left:50%;translate:-50%;background: var(--point-color01);width: 240px;padding-block: 15px;opacity: 0;pointer-events: none;transition: all 0.4s;border-radius: var(--radius-10);}
    #header .gnb .dep02 > li{font-size: 85%;font-weight: 400;color: var(--point-white);}
    #header .gnb .dep02 > li > a{display: block;padding: 8px 25px;box-sizing: border-box;transition: all 0.4s;opacity: 0.6; text-align: left}

    #header .gnb > li:nth-child(1) .dep02:has(.dep03) { width: 350px; left: 100%; }
    #header .gnb .dep02:has(.dep03) > li + li { margin-top: 10px; }
    #header .gnb .dep02 > li:has(.dep03) > a { opacity: 1; }


    #header .gnb .dep03 > li{font-size: 85%;font-weight: 400;color: var(--point-white);}
    #header .gnb .dep03 > li > a{display: block;padding: 6px 25px;box-sizing: border-box;transition: all 0.4s; opacity: 0.6; text-align: left;}

    #header .link_wrap{display: flex;align-items: center;gap: clamp(20px, 2.8vw, 50px);flex-shrink: 0;}
    #header .lang_list{display: flex;align-items: center;gap: clamp(15px, 1.7vw, 30px);font-size: var(--title-20);letter-spacing: 0;}
    #header .lang_list > li{font-size: 80%;font-weight: 500;color: var(--black-color02);line-height: 1.375;}
    #header .lang_list > li.on{font-weight: 600;text-decoration: underline;text-decoration-thickness: 2px;text-underline-offset: 5px;}
    #header .allCate{display: none;flex-direction: column;justify-content: space-between;width: 34px;height: 28px;transition: all 0.4s;}
    #header .allCate span{width: 100%;height: 2px;background: var(--black-color02);}

    .view_more{position: relative;display: block;width: fit-content;font-size: var(--title-20);color: var(--black-color02);background: rgba(0, 0, 0, 0.50);border-radius: 50px;overflow: hidden;letter-spacing: -0.02em;}
        .view_more:before {position: absolute;content: '';background: var(--point-gradi02);mask: var(--mask-gradi01);mask-composite: exclude;padding: 2px;border-radius: inherit;box-sizing: border-box;top: -1px;right: -1px;width: calc(100% + 2px);height: calc(100% + 2px);transition: all 0.4s;pointer-events: none;}
        .view_more:after{position: absolute;content:'';inset: 0;background: var(--point-color01);clip-path: circle(0 at 0 100%);transition: all 0.4s;pointer-events: none;}
    .view_more span{position: relative;font-size: 90%;font-weight: 500;line-height: 1.33;display: flex;align-items: center;justify-content: center;text-align: center;width: 160px;height: 60px;padding-inline: 15px;box-sizing: border-box;filter: var(--filter-white);transition: all 0.4s;z-index: 3;}

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

        /* over */
            @media (hover:hover) and (pointer:fine){
                #header:hover .cont{background: var(--point-white); height: max(60px, 80%); box-shadow: var(--shadow-01);}
                #header:hover :is(.logo, .gnb > li > a, .lang_list, .allCate){filter: none;}
                #header:hover .view_more:after{clip-path: circle(150% at 0 100%);}
                #header:hover .view_more:before{opacity: 0;}
                #header .gnb > li:hover > a{color: var(--point-color01);}
                #header .gnb > li:hover .dep02{opacity: 1; pointer-events: all; box-shadow: var(--shadow-01);}

                #header .gnb .dep02:has(:not(.dep03)) > li:hover > a{opacity: 1;}
                #header .gnb .dep03 > li:hover > a{opacity: 1;}

                .view_more:hover:before{opacity: 0;}
                .view_more:hover:after{clip-path: circle(150% at 0 100%);}
            }

        /* on */
            #header.on .cont{background: var(--point-white);height: max(70px, 80%);box-shadow: var(--shadow-01);}
            #header.on :is(.logo, .gnb > li > a, .lang_list, .allCate){filter: none;}
            #header.on .view_more:after{clip-path: circle(150% at 0 100%);}
            #header.on .view_more:before{opacity: 0;}

    @media (max-width:1450px){
        #header .gnb > li > a{padding-inline: 20px;}
        #header .gnb .dep02 { width: 220px; left: 80%; }
        #header .gnb .dep02:has(.dep03) { width: 320px; left: 80%; }
    }
	@media (max-width:1200px){
		#header .gnb{left:45%;width:calc(100% - 420px);}
		#header .gnb li a{font-size:80%;}
	}
	@media (max-width:1023px){
        #header{height: clamp(90px, 15vw, 110px);}
        #header .gnb{display: none;}
        #header .allCate{display:flex; width: clamp(30px, 3.4vw, 34px); height: clamp(22px, 2.8vw, 28px);}
        
        .view_more span{width: clamp(120px, 16.5vw, 160px);height: clamp(45px, 6.5vw, 60px);}
    }
    @media (max-width:479px){
        #header .view_more{display: none;}
    }

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

	Aside | outline/nav.html

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

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

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

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

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

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

    MAIN | index.html

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

    /* 비주얼 */
        .visual_wrapper .main_video { position: relative; width: 100%; height: 980px; overflow: hidden; }
        .visual_wrapper .main_video iframe { position: absolute; top: 50%; left: 49.9%; width: 110%; height: 110%; translate: -50% -50%; pointer-events: none; }
        .main_visual {position:relative; overflow: hidden; background: var(--black-color01);}
        .main_visual .slick-slide {position: relative; height: 980px; overflow: hidden;}
        .main_visual .thumb{position: relative; display: block; width: 100%; height: 100%; background: no-repeat center / cover; }
            .main_visual .active .thumb{transform: scale(1.12); transition: all 5s;}
        .visual_wrapper .txt_box{position: absolute;top: 50.5%;left:50%;translate: -50% -50%;z-index: 3;font-size: var(--title-20);color: var(--point-white);display: flex;flex-direction: column;gap: 37px; text-wrap: balance;}
        .visual_wrapper .txt_box h2{font-size: 400%;font-weight: 800;letter-spacing: 0.015em;}
        .visual_wrapper .txt_box h6{font-size: 110%;font-weight: 400;line-height: 1.63;letter-spacing: 0;}
        .visual_wrapper .txtAni{opacity: 0; translate: -70px; }
            .main_visual .active .txtAni{opacity: 1; translate: 0; transition: all 1.2s; transition-delay: 0.2s;}
            .main_visual .active .txtAni:nth-child(2){transition-delay: 0.4s;}

        .visual_wrapper .scr_dwn{position: absolute;left: 50%;bottom: max(30px, 6%);translate: -50%;pointer-events: none;z-index: 5;}
        .visual_wrapper .scr_dwn a{position: relative;display: block;width: 24px;height: 40px;border: 2px solid rgba(255,255,255,0.7);border-radius: 50px;box-sizing: border-box;pointer-events: all;}
            .visual_wrapper .scr_dwn a:before{position: absolute;content:'';width: 4px;aspect-ratio: auto 1;border-radius: 100%;background: var(--point-white);top: 5px;left:50%;margin-left: -2px;}

            .visual_wrapper .scr_dwn a:before{animation-name: scrDwn; animation-duration:1s; animation-iteration-count:infinite; animation-direction:alternate; transition-timing-function:linear;}
            @keyframes scrDwn {0% {top: 5px;}100% {top: calc(100% - 10px);}}
            
        @media (max-width: 1600px){
            .visual_wrapper .main_video iframe { width: 200%; height: 200%; }
        }

        @media (max-width:1023px){
            .main_visual .slick-slide {height: clamp(500px, 98vw, 980px);}
            .visual_wrapper .txt_box{gap: clamp(15px, 3.7vw, 37px);}
            .visual_wrapper .txt_box h2{font-size: clamp(40px, 8vw, 80px);}
            .visual_wrapper .scr_dwn a{width: clamp(20px, 3vw, 24px); height: clamp(32px, 4.5vw, 40px);}

            .visual_wrapper .main_video { height: clamp(500px, 98vw, 980px); }
        }
        @media (max-width:640px){
            .visual_wrapper .txt_box h6{font-size: 100%;}
        }
        @media (max-width:479px){
            .visual_wrapper .txt_box h6{font-size: 90%;}
            .visual_wrapper .scr_dwn{bottom: 20px;}
        }

    /* 공통 */
        .main_title{position: relative;font-size: var(--title-20);box-sizing: border-box;display: flex;flex-direction: column;align-items: flex-start;gap: 20px; text-wrap: balance;}
            .main_title.cen{align-items: center;text-align: center;}
            .main_title.hd{margin-bottom: 60px;}
            .main_title.hd_m{margin-bottom: 40px;}
        .main_title h2{font-size: 350%;font-weight: 700;color: var(--black-color00);line-height: 1.2;letter-spacing: 0.03em;}
            .main_title h2 + h6{margin-top: 10px;}
        .main_title h3{font-size: 300%;font-weight: 700;color: var(--black-color00);line-height: 1.2;letter-spacing: 0.03em;}
            .main_title h3.bullet{display: flex;align-items: baseline;gap: 20px;}
            .main_title h3.bullet:before{display: inline-flex;content:'';width: 16px;height: 16px;background: var(--point-white);border: 4px solid var(--point-color01);border-radius: 100%;box-sizing: border-box;translate: 0 -17px;}
            
			.main_title h3 + h5{margin-top:5px;}
        .main_title h5{font-size: 110%;font-weight: 400;color: var(--black-color00);line-height: 1.45;}
        .main_title h6{font-size: inherit;font-weight: 400;color: var(--black-color00);line-height: 1.6;letter-spacing: -0.03em;}

        .main_cont { margin-top: 140px; }
        .main_cont section{position: relative;padding-block: 160px;box-sizing: border-box;}

        .point_more{position: relative;width: 60px;height: 60px;padding:10px;box-sizing: border-box;display: flex;align-items: center;justify-content: center;border-radius: 100%;overflow: hidden;transition: all 0.4s;}
            .point_more:before{position: absolute;content:'';background: var(--point-gradi02);mask: var(--mask-gradi01);mask-composite: exclude;padding: 2px;border-radius: inherit;box-sizing: border-box;top: -1px;right: -1px;width: calc(100% + 2px);height: calc(100% + 2px);transition: all 0.4s;pointer-events: none;}
            .point_more img{filter: var(--filter-white);}

        .view_arw{position: relative;font-size: var(--title-20);font-weight: 500;color: var(--point-white);background: var(--point-color01);display: block;width: fit-content;border-radius: 50px;overflow: hidden;}
            .view_arw:before{position: absolute;content:'';inset: 0;background: var(--point-color01);clip-path: circle(0 at 0 100%);transition: all 0.4s;}
        .view_arw span{position: relative;display: flex;align-items: center;justify-content: center;text-align: center;width: 180px;height: 70px;padding-inline: 15px;box-sizing: border-box;gap: 14px;}
            .view_arw span:after{display: inline-flex;content:'';width: 22px;height: 14px;background: url('../images/skin/btn_arw.svg') no-repeat center / 100% auto;filter: var(--filter-white);margin-left: -36px;opacity: 0;transition: all 0.4s;}

            /* over */
            @media (hover:hover) and (pointer:fine){
                .view_arw:hover:before{clip-path: circle(150% at 0 100%);}
                .view_arw:hover span:after{margin-left: 0; opacity: 1;}
            }

        @media (max-width:1023px){
            .main_cont { margin-top: clamp(70px, 14vw, 140px); }
            .main_title{gap: clamp(10px, 2vw, 20px);}
                .main_title.hd{margin-bottom: clamp(25px, 6vw, 60px);}
                .main_title.hd_m{margin-bottom: clamp(20px, 4vw, 40px);}
            .main_title h2{font-size: clamp(35px, 7vw, 70px);}
                .main_title h2 + h6{margin-top: clamp(0px, 1vw, 10px);}
            .main_title h3{font-size: clamp(32px, 6vw, 60px);}
                .main_title h3.bullet{gap: clamp(12px, 2vw, 20px);}
                .main_title h3.bullet:before{width: clamp(12px, 1.6vw, 16px);height: clamp(12px, 1.6vw, 16px);translate:0 clamp(-17px, -1.7vw, -8px);border-width: clamp(3px, 0.4vw, 4px);}
                .main_title h3 + h5{margin-top:clamp(0px, 0.5vw, 5px);}

            .main_cont section{padding-block: clamp(70px, 16vw, 160px);}

            .point_more{width: clamp(40px, 6vw, 60px); height: clamp(40px, 6vw, 60px);}

            .view_arw span{width: clamp(120px, 18vw, 180px);height: clamp(46px, 7.5vw, 70px);}
        }
        @media (max-width:479px){
            .main_title h5{font-size: 100%;}
            .main_title h6{font-size: max(15px, 90%);}
        }

        @media (max-width: 445px){
            .visual_wrapper .main_video iframe { width: 320%; height: 320%; }
        }


    /* 어바웃 */
        .main_about{background: url('../images/skin/main_about.jpg') no-repeat center / cover;}
            .main_cont .main_about{padding-block: 0;}
        .main_about .w_custom{padding-block: 70px;min-height: 760px;display: flex;align-items: center;justify-content: center;}
        .main_about .main_title :is(h2, h6){color: var(--point-white); text-shadow: var(--shadow-02); }

        @media (max-width:1023px){
            .main_about .w_custom{min-height: clamp(380px, 80vw, 760px);}
        }

    /* 솔루션 */
        .main_sol{background: url('../images/skin/main_sol_bg.png') no-repeat center / cover;}
        .main_sol .info_list{display: flex;flex-wrap: wrap;gap: clamp(15px, 2.2vw, 40px);}
        .main_sol .info_list > li{position: relative;width: calc(100% / 2 - clamp(15px, 2.2vw, 40px) / 2);aspect-ratio: auto 1.114;box-sizing: border-box;border-radius: var(--radius-20);overflow: hidden;font-size: var(--title-20);}
            .main_sol .info_list > li:before{position: absolute;content: '';inset: 0;background: var(--point-gradi01);opacity: 0;transition: all 0.4s;z-index: 1;}
        .main_sol .info_list .link{position: absolute; inset: 0; z-index: 5;}
        .main_sol .info_list .thumb{display: block; width: 100%; height: 100%;}
        .main_sol .info_list .thumb img{width: 100%; height: 100%; object-fit: cover; transition: all 0.4s;}
        .main_sol .info_list .main_title{position: absolute;inset: 0;display: flex;flex-direction: column;justify-content: flex-end;align-items: flex-start;padding: clamp(35px, 3.2vw, 60px);z-index: 2;}
        .main_sol .info_list .main_title :is(h3, h5){color: var(--point-white);}
        .main_sol .info_list .exp{position: absolute;top: clamp(20px, 2.6vw, 48px);right: clamp(25px, 2.65vw, 50px);font-size: 110%;font-weight: 200;color: var(--point-white);}
        .main_sol .info_list .point_more{position: absolute;right:60px;bottom:60px;translate: -15px;opacity: 0;z-index: 3;}
        

            /* over */
            @media (min-width:1024px){
                .main_sol .info_list .main_title{padding-right: 150px;}
                .main_sol .info_list > li:hover:before{opacity: 0.6;}
                .main_sol .info_list > li:hover .point_more{translate: 0; opacity: 1;}
                .main_sol .info_list > li:hover .thumb img{transform: scale(1.1);}
            }

        @media (max-width:860px){
            .main_sol .info_list > li{width: 100%;}
        }
        @media (max-width:479px){
            .main_sol .info_list .main_title{padding:30px;}
            .main_sol .info_list .exp{font-size: 100%;}
        }

    /* 파트너스 */
        .main_part{background: #EDF3FB;overflow: hidden;}
            /* .main_part{&:before, &:after{position: absolute;content:'';width: clamp(200px, 34vw, 639px);aspect-ratio: auto 1;background: var(--point-gradi04);opacity: 0.15;background-blend-mode: multiply;mix-blend-mode: multiply;filter: blur(18px);top: -25%;right: 5%;}}
            .main_part:before{width: clamp(200px, 27vw, 506px);right:auto;left: 26%;top:auto;bottom: -20%;} */
        .main_part .partSwiper{position: relative;padding-block: 30px;border-block: 1px solid var(--point-white);z-index: 3;}
            .main_part .partSwiper + .partSwiper{margin-top: -1px;}
            .main_part .partSwiper{&:before, &:after{position: absolute;content:'';width: 12.5%;height: calc(100% + 2px);background: var(--point-gradi03);top: -1px;left:0;z-index: 3;}}
            .main_part .partSwiper:after{left:auto;right:0;transform: scale(-1,-1);}
        .main_part .partSwiper .swiper-slide{position: relative; width: auto; display: flex; align-items: center; justify-content: center; width: 200px; aspect-ratio: auto 2; overflow: hidden; border-radius: var(--radius-10); margin-right: clamp(15px, 2.2vw, 40px);}
        .main_part .partSwiper .swiper-wrapper{transition-timing-function: linear;}

        @media (max-width:1023px){
            .main_part .partSwiper{padding-block: clamp(20px, 3vw, 30px);}
            .main_part .partSwiper .swiper-slide{width: clamp(140px, 20vw, 200px);}
        }

    /* 뉴스룸 */
        .main_news .w_custom{display: flex;align-items: flex-start;flex-wrap: wrap;gap: clamp(15px, 2.2vw, 40px) 0;}
        .main_news .sticky_wrap{position: sticky;top: 140px;width: 40%;box-sizing: border-box;}
        .main_news .sticky_wrap .main_title{position: absolute; top:0; gap: 10px;}
        .main_news .sticky_wrap .main_title p.main_desc { font-size: 110%; font-weight: 500; box-sizing: border-box; padding-left: 35px; }
        .main_news .news_list{display: flex;flex-wrap: wrap;gap: clamp(15px, 2.2vw, 40px);width: 60%;padding: 140px 0 0 clamp(15px, 2.2vw, 40px);box-sizing: border-box;}
        .main_news .news_list > li{position: relative;width: calc(100% / 2 - clamp(15px, 2.2vw, 40px) / 2);font-size: var(--title-20);box-sizing: border-box;font-family: var(--font-type02);letter-spacing: -0.03em;padding: clamp(12px, 1.8vw, 30px);padding-bottom: 86px;box-shadow: inset 0 0 0 1px var(--border-color01);border-radius: var(--radius-20);background: var(--point-white);overflow: hidden;display: flex;flex-direction: column;gap: 19px;transition: all 0.4s;}
        .main_news .news_list .link{position: absolute; inset: 0; z-index: 5;}
        .main_news .news_list .thumb{position: relative;font-size: 0;display: block;border-radius: inherit;overflow: hidden;aspect-ratio: auto 1.46;}
        .main_news .news_list .thumb img{width: 100%; height: 100%; object-fit: cover; transition: all 0.4s;} 
        .main_news .news_list .desc :is(dt, dd){font-size: 90%;font-weight: 400;line-height: 1.77;white-space:normal;overflow:hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all;}
        .main_news .news_list .desc dt{color: var(--black-color02);}    
			.main_news .news_list .desc dt + dd{margin-top: 9px;}
        .main_news .news_list .desc dd{color: var(--black-color06);}
        .main_news .news_list .date{font-size: 90%;font-weight: 400;color: var(--black-color04);line-height: 1.66;opacity: 0.8;position: absolute;left: clamp(12px, 1.8vw, 30px);bottom: 30px;width: calc(100% - clamp(12px, 1.8vw, 30px) * 2);}
        .main_news .news_list .arw{position: absolute;top:50%;left:50%;translate: -50% -50%;width: 60px;aspect-ratio: auto 1;border-radius: 100%;background: var(--point-white);opacity: 0;transition: all 0.4s;}
            .main_news .news_list .arw{&:before, &:after{position: absolute;content:'';width: 2px;height: 20px;background: var(--point-color01);top: 50%;left: 50%;translate: -50% -50%;}}
            .main_news .news_list .arw:after{width: 20px; height: 2px;}


        .main_news .news_list.sticky{width: 100%;padding-left: 0;flex-direction: column;}
        .main_news .news_list.sticky > li{width: 100%;gap: 31px;}
        .main_news .news_list.sticky .thumb{aspect-ratio: auto 1.52;}
        .main_news .news_list.sticky .desc dt{font-size: 110%;line-height: 1.45;-webkit-line-clamp: 1;}

            /* over */
            @media (hover:hover) and (pointer:fine){
                .main_news .news_list > li:hover{box-shadow: inset 0 0 0 2px var(--point-color01);}
                .main_news .news_list > li:hover .arw{transform: rotate(270deg);opacity: 1;}
                .main_news .news_list > li:hover .thumb img{transform: scale(1.05);}
            }

        @media (max-width:1023px){
            .main_news .sticky_wrap{width: 100%; inset: auto;}
            .main_news .sticky_wrap .main_title{position: relative; inset: auto;}
            .main_news .news_list{width: 100%; padding:0;}
            .main_news .news_list > li{gap: clamp(10px, 2vw, 19px);padding-bottom: clamp(55px, 8.6vw, 86px);}
            .main_news .news_list.sticky > li{gap: clamp(18px, 3.1vw, 31px);}
            .main_news .news_list .desc dt + dd{margin-top: clamp(5px, 1vw, 9px);}
            .main_news .news_list .date{bottom: clamp(15px, 3vw, 30px);}

            .main_news .sticky_wrap .main_title p.main_desc { padding-left: clamp(24px, 3.6vw, 36px); font-size: clamp(18px, 2.2vw, 22px); }
        }
        @media (max-width:360px){
            .main_news .news_list > li{width: 100%;}
        }

    /* 문의하기 */
        .main_contact{background: url('../images/skin/main_contact.jpg') no-repeat center / cover;}
        .main_contact .w_custom{display: flex;flex-wrap: wrap;}
        .main_contact .main_title{width: 43.2%; padding-right: 50px;}
        .main_contact .main_title h3{color: var(--point-white);}
        .main_contact .main_title h6{color: var(--point-white);}
        .main_contact .cont{width: 56.8%;}

        .main_contact .form_write{position: relative; display: block; width: 100%; box-sizing: border-box;}
        .main_contact .form_write tbody{display: flex;flex-wrap: wrap;gap: 10px;}
        .main_contact .form_write tr{display: block;width: 100%;flex-wrap: wrap;gap: 10px; font-size: var(--title-20);}
        .main_contact .form_write th{display: none;}
        .main_contact .form_write td{position: relative;display: flex;gap: 10px 0;align-items: center;width: 100%;box-sizing: border-box;background: rgba(255, 255, 255, 0.9);padding: 15px 30px;border-radius: var(--radius-06);font-size: inherit;font-weight: 500;color: var(--black-color01);letter-spacing: -0.03em;transition: all 0.4s;}
			.main_contact .form_write td:has(#contents){align-items:baseline;}
            .main_contact .form_write tr:has(#name, #mobile, #ex1_kor, #email){width: calc(100% / 2 - 5px);}
        .main_contact .form_write label{width: 130px;flex-shrink: 0;padding-block: 12px;padding-right: 10px;box-sizing: border-box;cursor: pointer;vertical-align: middle;}
        .main_contact .form_write label em{font-weight: inherit; color: var(--point-color01);}
        .main_contact .form_write :where([type="text"], [type="number"], [type="password"], textarea){border:0;background: no-repeat;font-size: inherit;font-weight: inherit;color: inherit;padding: 0;height: 50px;width: 100%;box-sizing: border-box;vertical-align: middle;}
        .main_contact .form_write textarea{resize: none;height: 118px;vertical-align: top;line-height: 1.5; translate: 0 -2px;}
        .main_contact .form_write .edit-box{width: 100%;vertical-align: top;}
        .main_contact .form_write .code_wrap{display: flex;align-items: center;flex-wrap: wrap;gap: 10px;}
        .main_contact .form_write #captcha_box{width: 155px;height: 40px;overflow: hidden;border: 1px solid var(--border-color01);border-radius: 2px;box-sizing: border-box;}
        .main_contact .form_write #captcha_box img{max-width:none;max-height: none;width: calc(100% + 2px) !important;height: calc(100% + 2px) !important;margin: -1px 0 0 -1px;}
        .main_contact .form_write #refreshCode{display: inline-block;width: 40px;height: auto;aspect-ratio: auto 1;border: 1px solid var(--black-color01);box-sizing: border-box;border-radius: 2px;font-size: 0;background: url('../images/skin/refreshCode.svg') no-repeat center;cursor: pointer;margin-right: 10px;}
        .main_contact .form_write #captcha_inp{max-width: 110px;height: 40px;}
        .main_contact .policy_cont{margin-top: 30px;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 25px;}

        @media (max-width:1023px){
            .main_contact .main_title{width: 100%;}
            .main_contact .cont{width: 100%;}
            .main_contact .form_write td{padding-inline: clamp(20px, 3vw, 30px);}
            .main_contact .form_write :where([type="text"], [type="number"], [type="password"]){height: clamp(35px, 5.5vw, 50px);}
            .main_contact .form_write label{padding-block: clamp(5px, 1.2vw, 12px);width: clamp(120px, 13vw, 130px);}
            .main_contact .form_write textarea{height: clamp(90px, 11.8vw, 118px);}
            .main_contact .policy_cont{margin-top: clamp(20px, 3vw, 30px);}
        }
        @media (max-width:640px){
            .main_contact .form_write tr:has(#name, #mobile, #ex1_kor, #email){width: 100%;}
            .main_contact .form_write td:has(.code_wrap){flex-wrap: wrap;}
            .main_contact .form_write label{padding-block: 0;}
            .main_contact .form_write .code_wrap{width: 100%;}
        }
        @media (max-width:500px){
            .main_contact .form_write #captcha_box{width: 140px; height: 34px;}
            .main_contact .form_write #refreshCode{width: 34px;background-size: 14px auto;margin-right: 5px;}
            .main_contact .form_write #captcha_inp{max-width: 100px; height: 34px;}
            .main_contact .policy_cont{flex-direction: column;align-items: flex-start;}
            .main_contact .policy_cont .view_arw{margin-inline: auto;}
        }
        @media (max-width:360px){
            .main_contact .form_write #captcha_inp{max-width: none;}
        }

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

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    #footer{position: relative;padding-block: 70px 50px;box-sizing: border-box;}
    #footer .w_custom{display: flex;flex-direction: column;gap: 38px;}
    #footer .info{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 15px 30px;font-size: var(--title-20);}
    #footer .logo{font-size: 200%;font-weight: 700;color: var(--black-color01);letter-spacing: 0.025em;}
    #footer .sns_list{display: flex; flex-wrap: wrap; gap: 14px;}
    #footer .sns_list a{display: flex;align-items: center;justify-content: center;width: 50px;height: 50px;background: var(--gray-bg01);border-radius: 100%;padding: 12px;box-sizing: border-box;}
	#footer .addr_box{display: flex;align-items: center;justify-content: space-between;gap:20px;}
    #footer .addr_list{display: flex; flex-wrap: wrap; gap: 10px 40px;}
    #footer .addr_list .desc{display: flex; gap: 20px; font-size: var(--title-20);}
    #footer .addr_list .desc :where(dt, dd){font-size: 90%;font-weight: 400;font-family: var(--font-type02);letter-spacing: -0.02em;}
    #footer .addr_list .desc dt{color: var(--black-color03); flex-shrink: 0;}
    #footer .addr_list .desc dd{color: var(--black-color07);}
	
	#footer .ft_family{position: relative;display: inline-block;width:clamp(190px, 20vw, 230px);flex-shrink:0;font-size:var(--title-20)}
    #footer .ft_family button{border: 1px solid var(--border-color01);width:100%;height:clamp(40px, 5vw, 50px);display: flex;align-items: center;justify-content:space-between;font-size:85%;color:var(--black-color03);font-weight:400;box-sizing: border-box;position: relative;cursor:pointer;padding:0 clamp(10px, 2vw, 20px);}
        #footer .ft_family button:after{width:clamp(7px, 0.9vw, 9px);aspect-ratio:auto 1;content:"";border:2px solid var(--black-color03);border-width:2px 2px 0 0;rotate:135deg;translate:0 -3px;}	
        #footer .ft_family.on button:after{scale:-1 -1;translate:0 1px;}	
    #footer .ft_family ul{background:var(--point-white);box-sizing:border-box;padding:10px 10px;position: absolute;top:100%;left:0;width:100%;z-index:10;opacity:0;pointer-events:none;transition:all 0.3s;border:1px solid var(--border-color01);border-top:none;}
    #footer .ft_family.on ul{opacity:1;pointer-events:initial;}
    #footer .ft_family ul li a{font-size:85%;color:var(--black-color03);font-weight:400;line-height:1.6;display: block;width:100%;}
	
    #footer .exp{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 15px 30px;margin-top: 20px;} 
    #footer .copy{display: flex;flex-wrap: wrap;gap: 3px 20px;font-size: var(--title-20);}
    #footer .copy :where(dt, dd){font-size: max(13px, 80%);font-weight: 300;line-height: 1.625;letter-spacing: 0.01em;}
    #footer .copy dt{color: var(--black-color08);}
    #footer .copy dd{color: var(--black-color10);}
    #footer .link_list{display: flex; align-items: center; flex-wrap: wrap; gap: 10px 30px; font-size: var(--title-20);}
    #footer .link_list > li{font-size: 90%; font-weight: 400; color: var(--black-color03);}
    #footer .link_list > li em{font-weight: 500;color: var(--point-color01);}

    .quick_wrap{position: fixed;max-width: 1820px;left: 50%;bottom:30px;translate: -50%;pointer-events: none;z-index: 9;text-align: right;}
    .quick_list{display: inline-flex;flex-direction: column;gap: 16px;align-items: flex-end;opacity: 0;transition: all 0.4s;}
    body:has(#header.on:not(.end)) .quick_list{opacity: 1; pointer-events: all;}
    .quick_list > li{position: relative;background: var(--point-color01);border-radius: 60px;box-shadow: var(--shadow-01);width: 60px;display: flex;transition: all 0.4s;justify-content: flex-end;overflow: hidden;}
        .quick_list > li.scr_top{background: rgba(0, 0, 0, 0.8);}
        .quick_list > li.scr_top:before{position: absolute;content: '';background: var(--point-gradi02);mask: var(--mask-gradi01);mask-composite: exclude;padding: 2px;border-radius: inherit;box-sizing: border-box;top: -1px;right: -1px;width: calc(100% + 2px);height: calc(100% + 2px);transition: all 0.4s;pointer-events: none;}
    .quick_list .link{position: absolute; inset: 0; z-index: 5;}
    .quick_list .desc{position: relative;font-size: var(--title-20);text-align: center;}
    .quick_list .desc dt{display: flex;align-items: center;justify-content: center;width: 60px;height: 60px;padding: 12px;box-sizing: border-box;}
    .quick_list .desc dd{position: absolute;top: 0;right: 55px;width: max-content;height: 100%;display: flex;align-items: center;font-size: 90%;font-weight: 400;color: var(--point-white);line-height: 1.33;letter-spacing: -0.03em;opacity: 0;transition: all 0.4s;pointer-events: none;}

        @media (hover:hover) and (pointer:fine){
            .quick_list > li:has(.desc dd):hover{width: 170px;}
            .quick_list > li:hover .desc dd{opacity: 1;}
        }

    @media (max-width:1023px){
        #footer{padding-block: clamp(35px, 7vw, 70px) clamp(25px, 5vw, 50px);}
        #footer .w_custom{gap: clamp(25px, 3.8vw, 38px);}
        #footer .logo{font-size: 190%;}
        #footer .sns_list a{width: clamp(40px, 5.5vw, 50px); height: clamp(40px, 5.5vw, 50px);}
        #footer .addr_list{column-gap: clamp(20px, 4vw, 40px);}
        #footer .addr_list .desc{gap: clamp(15px, 2vw, 20px);}
        #footer .link_list{column-gap: clamp(20px, 3vw, 30px);}
        #footer .exp{margin-top: clamp(5px, 2vw, 20px);}

        .quick_list{gap: clamp(10px, 2.1vw, 16px);}
        .quick_list > li{width: clamp(42px, 6.5vw, 60px);}
        .quick_list .desc dt{width: clamp(42px, 6.5vw, 60px);height: clamp(42px, 6.5vw, 60px);}
    }
    @media (max-width:640px){
        #footer .logo{font-size: 180%;}
		#footer .addr_box{flex-direction: column;align-items: flex-start;}
    }
    @media (max-width:479px){
        #footer .logo{font-size: 170%;}
    }