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

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

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

/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
    .w_custom{position: relative; width: calc(100% - 60px); max-width: 1560px; margin-inline: auto; box-sizing: border-box;}
    #wrap {position: relative; min-width: 1200px; overflow: clip; box-sizing: border-box;}
    #container{position: relative; padding-top: 93px; padding-bottom: 174px; max-width: 1280px; box-sizing: border-box;}
    body{overflow-x: auto; min-width: 1560px;}
    [class*="swiper-button"]:after{display: none;}


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

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

───────────────────────────────────────────────────────────*/
    #header{position: sticky; top:0; width: 100%; height: 90px; background: var(--point-white); z-index: 100; box-sizing: border-box;}
        #header.on{box-shadow: 0 1px 0 var(--border-color01);}
    #header .w_custom{max-width: 1820px;height: 100%;display: flex;align-items: center;justify-content: space-between;gap: 30px;}
	#header .logo{height:100%;font-size: 0;}
	#header .logo a{display:flex;align-items: center;height:100%;padding-block: 15px;box-sizing: border-box;}
    #header .gnb{position: absolute;top:0;left:50%;transform: translateX(-50%);width: 100%;max-width: calc(100% - 500px);height: 100%;display: flex;justify-content: center;text-align: center;font-size: var(--title-20);font-family: var(--font-type02);letter-spacing: -0.04em;line-height: 1.5;}
    #header .gnb > li{position: relative; font-size: 100%;font-weight: 500;color: var(--black-color01);}
    #header .gnb > li > a{display: flex;align-items: center;height: 100%;padding-inline: clamp(30px, 2.8vw, 50px);transition: all 0.4s;}
    #header .gnb .dep02{position: absolute;width: 100%;padding-block: 25px;box-sizing: border-box;opacity: 0;pointer-events: none;}
        #header .gnb .dep02.on:before{position: absolute;content:'';top:0;left:50%;width: 200vw;height: 100%;translate: -50%;background: var(--point-white);z-index: -1;box-shadow: var(--shadow-01);border-top: 1px solid var(--border-color01);box-sizing: border-box;}
    #header .gnb .dep02 > li{position: relative; font-size: 90%; font-weight: 400; color: var(--black-color06);}
    #header .gnb .dep02 > li a{display: block;padding: 8px 20px;transition: all 0.4s;}
    #header .link_wrap{display: flex; align-items: center; gap:24px;}
    .lang_desc{position: relative;font-size: var(--title-20);}
	.lang_desc dt{font-size:0; cursor: pointer;}
    .lang_desc dd{position: absolute;top: calc(100% + 10px);left:50%;transform: translateX(-50%);padding: 10px 0;background: var(--point-white);border: 1px solid var(--border-color01);width: max-content;box-sizing: border-box;font-size: 70%;font-weight: 400;color: var(--black-color06);text-transform: uppercase;opacity: 0;pointer-events: none;transition: all 0.4s;}
        .lang_desc:has(dt.on) dd{opacity: 1; pointer-events: all;}
    .lang_desc dd a{display: block;padding: 5px 20px;box-sizing: border-box;}
        .lang_desc dd a.on{color: var(--point-color01);}
    #header .allCate{position: relative;display: flex;flex-direction: column;width: 34px;height: 26px;justify-content: space-between;}
    #header .allCate span{position: absolute;top: 0;left: 0;width: 100%;height: 2px;background: var(--black-color01);transition: all 0.4s;}
        #header .allCate span:nth-child(1){width: 70%;}
		#header .allCate span:nth-child(2){top:calc(50% - 1px);}
        #header .allCate span:nth-child(3){top: calc(100% - 2px);width: 70%;margin-left: 30%;}
        #header .allCate.on span{position: absolute;top:50%;left:50%;translate: -50% -50%;transform: rotate(45deg);width: 100%;margin: 0;}
        #header .allCate.on span:nth-child(2){opacity: 0;}
        #header .allCate.on span:nth-child(3){transform: rotate(-45deg);}

        /* over */
            #header .gnb > li > a:hover, #header .gnb > li:has(.dep02 > li:hover) > a{color: var(--point-color01);}
            #header .gnb:hover .dep02{opacity: 1; pointer-events: all;}
            #header .gnb .dep02 > li a:hover{color: var(--black-color01);}

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

	Aside | outline/nav.html

───────────────────────────────────────────────────────────*/
    .layer_dim{position: fixed;inset: 0;background: rgba(0,0,0,0.6);display: block;cursor: auto;transition: all 0.4s;opacity: 0;pointer-events: none;z-index: 45;}
        
    #aside{position: fixed;top:90px;right:0; translate: 100%; width: 100%;max-width: 500px;height: calc(100vh - 90px);background: var(--point-white);z-index: 50;background: var(--point-color01); overflow: hidden; overflow-y: auto; transition: all 0.4s;}
        
    #aside .w_custom{width: calc(100% - 60px);min-height: 100%;padding-block: 30px 100px;}
    #aside .gnb{position: relative;font-size: var(--title-20);line-height: 1.5;font-family: var(--font-type02);}
    #aside .gnb > li{position: relative;font-size: 100%;font-weight: 400;color: rgba(255,255,255,0.8);border-bottom: 1px solid rgba(255,255,255,0.2);}
    #aside .gnb > li > a{position: relative;display: block;padding-block: 20px;padding-right: 50px; transition: all 0.4s;}
        #aside .gnb > li > a.on > a{color: var(--point-white);}
        #aside .gnb > li:has(.dep02) > a:before{position: absolute;content:'';width: 12px;height: 12px;border: 2px solid var(--point-white);box-sizing: border-box;clip-path: polygon(0 0, 0% 100%, 100% 100%);top: 45%;right: 3px;transform: rotate(-45deg);translate: 0 -50%; transition: all 0.4s;}
        #aside .gnb > li > a.on:before{transform:rotate(-45deg) scale(-1,-1);top: 55%;}
    #aside .gnb .dep02{display: none;padding-bottom: 20px;}
    #aside .gnb .dep02 > li{font-size: 90%;}
    #aside .gnb .dep02 > li > a{display: block;padding-block: 10px;color: rgba(255,255,255,0.5);transition: all 0.4s;}

        body:has(#header .allCate.on){overflow: clip;}
        body:has(#header .allCate.on) .layer_dim{opacity: 1; pointer-events: all;}
        body:has(#header .allCate.on) #aside{translate:0;}

        /* over */
        #aside .gnb > li:hover > a{color: var(--point-white);}
        #aside .gnb .dep02 > li > a:hover{color: var(--point-white);}

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

    MAIN | index.html

───────────────────────────────────────────────────────────*/
    /* 비주얼 */
        .main_visual{position: relative; overflow: hidden;}
        .main_visual .slick-slide{position: relative; height: 890px;}
        .main_visual .thumb{display: block; width: 100%; height: 100%; background: no-repeat center / cover; box-sizing: border-box;}
            .main_visual .active .thumb{transform: scale(1.05); transition: all 5s;}
        .main_visual .txt_box{position: absolute;top: 31.8%;left:50%;translate: -50%;z-index: 3;font-size: var(--title-20);color: var(--point-white);display: flex;flex-direction: column;gap: 11px;}
        .main_visual .txt_box h2{font-size: 420%;font-weight: 600;line-height: 1.2;letter-spacing: -0.03em;}
        .main_visual .txt_box h6{font-size: 110%;font-weight: 300;letter-spacing: -0.07em;}
        .main_visual .txtAni span{display: block; clip-path: inset(0);}
        .main_visual .txtAni em{display: block; font-weight: inherit; opacity: 0; translate: 0 100%;}
            .main_visual .active .txtAni em{opacity: 1; translate: 0; transition: all 1.2s; transition-delay: 0.2s;}
            .main_visual .txtAni:nth-child(2) em{transition-delay: 0.4s;}
            .main_visual .txtAni:nth-child(2) span:nth-child(2) em{transition-delay: 0.8s;}
        .main_visual .controller{position: absolute;left:50%;bottom: 82px;translate: -50%;z-index: 4;display: flex;}
        .main_visual .slick-dots{display: flex;flex-wrap: wrap;gap: 30px;font-size: var(--title-20);font-family: var(--font-type02);} 
        .main_visual .slick-dots li{font-size: 90%;font-weight: 300;color: rgba(255,255,255,0.7);line-height: 1.66;letter-spacing: -0.06em;}
        .main_visual .slick-dots li button{display: flex;align-items: center;transition: all 0.4s;}
            .main_visual .slick-dots li button:before{display: inline-flex;content:'';width: 7px;height: 7px;background: rgba(255,255,255,0.7);border-radius: 100%;margin-right: 12px;transition: inherit;}
            .main_visual .slick-dots .slick-active button{color: var(--point-white);-webkit-text-stroke: 0.1px var(--point-white);}
            .main_visual .slick-dots .slick-active button:before{background: var(--point-color02);}
        .main_visual .slick-dots .slider-progress{position: relative; width: 0; height: 2px; background: rgba(255,255,255,0.2); transition: all 0.4s;}
        .main_visual .slick-dots .slick-active .slider-progress{width: 120px; margin-left: 30px;}
        .main_visual .slick-dots .slider-progress span{position: absolute; top:0; left:0; height: 100%; background: var(--point-white);}

            /* over */
                .main_visual .slick-dots li button:hover{color: var(--point-white);}

    /* 공통 */
        .main_title{position: relative;font-size: var(--title-20);box-sizing: border-box;display: flex;flex-direction: column;gap: 23px;align-items: center;text-align: center;}
        .main_title.hd{margin-block: 120px 58px;}
        .main_title h3{position: relative;font-size: 270%;font-weight: 600;color: var(--black-color01);letter-spacing: -0.03em;line-height: 1.2;}
            .main_title h3.icon{padding-inline: 20px;}
            .main_title h3.icon:after{position: absolute;content:'';width: 9px;height: 9px;border-radius: 100%;background: var(--point-color01);right: 0;bottom: 14px;}
        .main_title h6{font-size: 100%;font-weight: 400;color: var(--black-color05);line-height: 1.8;font-family: var(--font-type02);letter-spacing: -0.06em;}
        .view_more{position: relative;font-size: var(--title-20);box-sizing: border-box;display: flex;flex-wrap: wrap;gap: 8px;align-items: center;color: var(--point-white);}
        .view_more span{font-size: 90%;font-weight: 500;line-height: 1.2;}
        .view_more em{position: relative; width: 30px; height: 30px;}
        .view_more em:before{position: absolute;content:'';width: 30px;height: 30px;border:1px solid var(--point-white);border-radius: 100%;box-sizing: border-box;top: 50%;left: 50%;translate: -50% -50%;transition: all 0.4s;}
        .view_more em:after{position: absolute;content:'';top:50%;left:50%;translate: -50% -50%;width: 4px;height: 4px;background: var(--point-white) no-repeat center / 100% auto;border-radius: 100%;transition: all 0.4s;}

    /* 서비스 */
        .main_serv .step_list{position: relative; display: flex; background: url('../images/skin/main_serv01.jpg') no-repeat center / cover; transition: all 0.4s; counter-reset: stepList;}
            .main_serv .step_list:has(> li:nth-child(2).on){background-image: url('../images/skin/main_serv02.jpg');}
            .main_serv .step_list:has(> li:nth-child(3).on){background-image: url('../images/skin/main_serv03.jpg');}
        .main_serv .step_list > li{position: relative;width: 100%;padding: 143px 60px;font-size: var(--title-20);box-sizing: border-box;}
            .main_serv .step_list > li:before{position: absolute; content:''; inset: 0; background: var(--point-grad01); opacity: 0; transition: all 0.4s;}
        .main_serv .step_list .link{position: absolute; inset: 0; z-index: 5;}
        .main_serv .step_list .cont{position: relative;display: flex;align-items: flex-start;flex-direction: column;gap: 26px;opacity: 0.6;transition: all 0.4s;}
        .main_serv .step_list .cont:before{content: counter(stepList, decimal-leading-zero);counter-increment: stepList;font-size: 110%;font-weight: 600;color: var(--point-color02);}
        .main_serv .step_list .desc{position: relative; color: var(--point-white);}
        .main_serv .step_list .desc :where(dt, dd){font-family: var(--font-type02);}
        .main_serv .step_list .desc dt{font-size: 190%;font-weight: 500;line-height: 1.3;letter-spacing: -0.04em;}
			.main_serv .step_list .desc dt +  dd{margin-top: 46px;}
        .main_serv .step_list .desc dd{font-size: 90%;font-weight: 300;line-height: 1.78;color: rgba(255,255,255,0.7);letter-spacing: -0.06em;}
        .main_serv .step_list .view_more{margin-top: 70px;}
        .main_serv .step_list > li:not(.on) .view_more{opacity: 0.8;}

            .main_serv .step_list > li.on:before{opacity: 0.5;}
            .main_serv .step_list > li.on .cont{opacity: 1;}
            .main_serv .step_list > li.on .view_more em:before{width: 60px;height: 60px;clip-path: var(--poly-path01);}
            .main_serv .step_list > li.on .view_more em:after{width: 16px;height: 14px;background: url('../images/skin/more_arw.svg') no-repeat center / 100% auto;}

    /* 뉴스 */
        .main_news{padding-bottom: 130px;}
        .main_news .rel_box{position: relative;}
		.main_news .notiSwiper{clip-path: inset(0 -1px);}
        .main_news .notiSwiper .swiper-slide{position: relative;display: flex;flex-direction: column;gap: 32px;align-items: flex-start;height: auto;}
        .main_news .notiSwiper .link{position: absolute; inset: 0; z-index: 5; }
        .main_news .notiSwiper .thumb{position: relative; display: block; width: 100%; height: 320px; overflow: hidden;}
        .main_news .notiSwiper .thumb img{width: 100%; height: 100%; object-fit: cover; transition: all 0.4s;}
        .main_news .notiSwiper .desc{font-size: var(--title-20);padding-bottom: 57px;}
        .main_news .notiSwiper .desc dt{font-size: 120%;font-weight: 500;color: var(--black-color03);line-height: 1.5;font-family: var(--font-type02);letter-spacing: -0.06em; white-space:normal;overflow:hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
        .main_news .notiSwiper .desc dt span{background:linear-gradient(var(--black-color03)) no-repeat 0 100% / 0% 1px; transition: all 0.4s;display: inline;}
        .main_news .notiSwiper .desc dd{font-size: 90%;font-weight: 400;color: var(--black-color06);position: absolute;left: 0;bottom: 0;letter-spacing: -0.04em;}
        .main_news .controller{position: absolute;top:0;left:0;width: 100%;height: 320px;pointer-events: none;display: flex;align-items: center;justify-content: space-between;}
        .main_news .controller [class*="swiper-button"]{position: relative;pointer-events: all;inset: auto;margin: 0;width: 50px;height: 50px;translate: -90px;background: none;filter: var(--filter-black) opacity(0.2);transition: all 0.4s;}
            .main_news .controller [class*="swiper-button"]:before{position: absolute;content:'';width: 70%;height: 70%;border: 3px solid var(--point-color01);box-sizing: border-box;clip-path: polygon(0 0, 0% 100%, 100% 0);top: 50%;left: 70%;translate: -50% -50%;transform: rotate(-45deg);border-radius: 2px;}
            .main_news .controller [class*="swiper-button"].swiper-button-next{transform: scale(-1,-1);translate: 90px;}


            /* over */
            .main_news .controller [class*="swiper-button"]:hover{filter: none;}
            .main_news .notiSwiper .swiper-slide:hover .thumb img{transform: scale(1.1);}
            .main_news .notiSwiper .swiper-slide:hover dt span{background-size: 100% 1px;}

        

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

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    #footer{position: relative; background: var(--black-color01); color: var(--point-white); padding-block: 70px 40px; line-height: 1.6; box-sizing: border-box;}
    #footer .w_custom{display: flex;flex-wrap: wrap;justify-content: space-between;gap:30px 60px;}
    #footer .cont{display: flex;flex-direction: column;gap: 30px;}
    #footer .site_info{position: relative;font-size: var(--title-20);padding-bottom: 10px;}
    #footer .site_info h2{font-size: 240%;font-weight: 600;color: var(--point-white);line-height: 1.29;letter-spacing: -0.03em;}
    #footer .link_list{display: flex; align-items: center; flex-wrap: wrap; font-size: var(--title-20);}
    #footer .link_list > li{font-size: 90%;font-weight: 300;color: rgba(255,255,255,0.8);display: flex;align-items: center;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: 20px;}
    #footer .link_list > li strong{font-weight: 400;color: var(--point-white);}
    #footer .addr_list{display: flex;flex-direction: column;gap: 12px;}
    #footer .addr_list > li{display: flex;flex-wrap: wrap;align-items: center;gap: 12px 30px;}
    #footer .addr_list .desc{font-size: var(--title-20); display: flex; gap: 20px;}
	#footer .addr_list .desc.kor{font-family:var(--font-type02);}
    #footer .addr_list .desc :where(dt, dd){font-size: 90%;}
    #footer .addr_list .desc dt{flex-shrink: 0;font-weight: 400;color: var(--point-white);}
    #footer .addr_list .desc dd{font-weight: 300;color: rgba(255,255,255,0.8);}
    #footer .copy{margin-top: 27px;padding-block: 27px;border-top: 1px solid rgba(255,255,255,0.2);display: flex;flex-wrap: wrap;gap: 4px 6px;font-size: var(--title-20); width: 100%; box-sizing: border-box;}
    #footer .copy :where(dt, dd){font-size: 85%;font-weight: 300;color: rgba(255,255,255,0.4);letter-spacing: 0;}
    #footer .addit{display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;gap: 30px;}
    #footer .scr_top{display: inline-block; font-size: 0;}
    #footer .scr_top img{transition: all 0.4s;}

    .icon_btn{position: relative;width: fit-content;display: flex;align-items: center;justify-content: center;gap: 45px;border: 1px solid var(--point-white);padding: 15px 24px 14px;font-size: var(--title-20);font-weight: 300;color: var(--point-white);box-sizing: border-box;opacity: 0.7;letter-spacing: -0.05em; transition: all 0.4s;}
    .icon_btn span{font-size: 90%;}

        /* over */
            #footer .scr_top:hover img{translate:0 -15px;}  
            .icon_btn:hover{opacity: 1;}