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

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

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

/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
	#wrap {position:relative;width:100%; box-sizing: border-box; overflow: clip;}
    .w_custom{position: relative; width: calc(100% - 60px); max-width: 1600px; margin-inline: auto; box-sizing: border-box;}
    #container{position: relative; padding-bottom:150px; box-sizing: border-box;padding-top:140px;}
    .sr-only{position: absolute;width: 1px; height: 1px;margin: -1px;padding: 0;overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}

    @media (max-width:1500px){
        br.for_pc{display: none;}
    }

    @media (max-width:1023px){
        #container{padding-bottom:clamp(100px, 15vw, 150px);padding-top:clamp(70px, 14vw, 140px);}
    }
    @media (max-width:860px){
        .w_custom{width: calc(100% - 30px);}
    }
    @media (max-width:320px){
        .w_custom{width: calc(100% - 20px);}
    }

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

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

───────────────────────────────────────────────────────────*/
    #header{position:fixed;top:0;width: 100%;height: 100px;z-index: 100;transition: all 0.4s;box-sizing:border-box;border-bottom:1px solid transparent;}
    #header.on{border-color: var(--border-color01);}
    #header .header_cont{height: 100%;display: flex; align-items: center; justify-content:space-between;transition: all 0.4s;box-sizing:border-box;padding:0 60px;}
    #header :is(.logo, .gnb > li > a, .allCate, .lang_desc button){filter:var(--filter-white);}
    #header .logo{height: 100%;}
    #header .logo a{display: flex; align-items: center; max-width: 164px; height: 100%;}
    #header .gnb_wrap{height:100%;}
    #header .gnb{display: flex; height: 100%; gap: clamp(40px, 7vw, 100px); font-size: var(--text-18); text-align: center;}
    #header .gnb > li{position: relative;font-size: inherit;font-weight: 600;color: var(--black-color00);height: 100%;letter-spacing: 0;transition: all 0.4s;}
    #header .gnb > li > a{display: flex;align-items: center;justify-content: center;height: 100%;letter-spacing:0.02em;text-transform: uppercase;}
    #header .gnb > li.on > a{color:var(--point-color01);}
    #header .gnb .dep02{position: absolute;top: 80%;left: 50%;width:212px;translate: -50%;padding-block:5px;background: var(--point-color01);border-radius: var(--radius-10);opacity: 0;pointer-events: none;transition: inherit;}
    #header .gnb .dep02 > li{position: relative;font-size: 85%;font-weight:600;color: var(--point-white);transition: inherit;}
    #header .gnb .dep02 > li > a{display: block;padding: 15px 25px;}
    #header .utility{display: flex; align-items: center; gap:30px;}
    #header .allCate{display: flex; flex-direction: column; justify-content: space-between; width: 34px; aspect-ratio: auto 1.54;position: relative;}
    #header .allCate span{width: 100%; height: 2px; background: var(--black-color03);}

    .lang_desc{position: relative; font-size: var(--text-20);}
    .lang_desc button{font-size: 80%;font-weight: 500;color: var(--black-color03);padding-right:22px;display: flex;align-items: center;gap: 8px;cursor: pointer;}
        .lang_desc button:before{display: inline-flex;content:'';width: 18px;aspect-ratio: auto 1;background: url('../images/skin/icon_globe.svg') no-repeat center / 100% auto;}
        .lang_desc button:after{position: absolute;content:'';width:8px;aspect-ratio: auto 1.9;background: var(--black-color03);clip-path: var(--clip-poly01);top: 50%;right:0;translate: 0 -50%; transition: all 0.4s;}
        .lang_desc button.on:after{scale: -1 -1;background: var(--point-color01);}
    .lang_desc ul{position: absolute;top: calc(100% + 10px);left: 0;width: 100%;border-radius: var(--radius-10);padding-block: 10px;background: var(--point-color01);font-size: 75%;font-weight: 500;color: var(--black-color06);text-align: center;opacity: 0;pointer-events: none;transition: all 0.4s;}
        .lang_desc:has(button.on) ul{opacity: 1;pointer-events: all;}
    .lang_desc ul a{display: block;padding: 4px 20px;opacity: 0.6;filter:var(--filter-white);}
    .lang_desc ul a.on{opacity: 1;}

        /* over */
        @media (hover:hover) and (pointer:fine) {
            #header:hover{box-shadow: var(--shadow-01);background:var(--point-white);}
            #header:hover :is(.logo, .gnb > li > a, .allCate, .lang_desc button){filter:none;}
            #header:hover .gnb > li.on:before{filter:none;}
        
            #header .gnb > li:hover{color: var(--point-color01);}
            #header .gnb > li:hover .dep02{opacity: 1; pointer-events: all;}
            #header .gnb .dep02 > li:hover a{text-decoration: underline;text-decoration-thickness: 2px;text-underline-offset: 5px;}
        }

        /* on */
        #header.on{box-shadow: var(--shadow-01);background:var(--point-white);}
        #header.on :is(.logo, .gnb > li > a, .allCate, .lang_desc button){filter:none;}
        #header.on .gnb > li.on:before{filter:none;}

    @media (max-width:1023px) {
        #header{height: clamp(65px, 9vw, 100px);}
        #header .header_cont{padding:0 30px;}
        #header .logo a{max-width: clamp(140px, 16vw, 164px);}
        #header .gnb_wrap{display: none;}
        #header .utility{gap: clamp(15px, 2.4vw, 24px);}
        #header .allCate{width: clamp(25px, 3.5vw, 30px);}

        .lang_desc button{padding-right: clamp(15px, 2vw, 22px);}
        .lang_desc button:before{width: clamp(15px, 1.8vw, 18px);}
        .lang_desc ul{top: calc(100% + clamp(8px, 1.5vw, 10px));}
    }
    @media (max-width:640px) {
        #header .header_cont{padding:0 15px;}
    }
    @media (max-width:479px) {
        .lang_desc button:after{width: 8px;}
    }
    

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

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

───────────────────────────────────────────────────────────*/
    #aside{position: fixed;top: 0;left:0;width: 100%;height: 100%;z-index: 999;background: rgba(0,0,0,0.8);backdrop-filter:blur(10px);display: flex;flex-direction: column;overflow: hidden;overflow-y: auto;padding-block: 10vh;box-sizing: border-box;opacity: 0;transition: all 0.6s;clip-path: inset(0 0 100% 0);}
    #aside.on{opacity: 1;clip-path: inset(0);}
    body:has(#aside.on){overflow: clip; touch-action: none;}
    #aside .w_custom{flex-shrink: 0;max-width: 1800px;min-height: 100%;display: flex;align-items: center;}
    #aside .gnb{width: 100%;font-size: var(--text-20);letter-spacing: 0;display: grid;align-items: start;justify-content: center;grid-template: auto / repeat(4, 1fr);gap: clamp(15px, 2.2vw, 40px);}
    #aside .gnb > li{color: var(--point-white);font-size:var(--text-20);text-align: center;opacity:0;transform:translateY(100px);transition:all 0.8s;}
    #aside.on .gnb > li{opacity:1;transform:translateY(0);}
    #aside.on .gnb > li:nth-child(1){transition-delay:0.3s;}
    #aside.on .gnb > li:nth-child(2){transition-delay:0.4s;}
    #aside.on .gnb > li:nth-child(3){transition-delay:0.5s;}
    #aside.on .gnb > li:nth-child(4){transition-delay:0.6s;}
    #aside.on .gnb > li:nth-child(5){transition-delay:0.7s;}
    #aside.on .gnb > li:nth-child(6){transition-delay:0.8s;}
    #aside .gnb > li > a{display: block;font-size:var(--text-36);color:inherit;font-weight: 700;line-height: 1.2;padding: 30px 0;transition: all 0.4s;position: relative;}
    #aside .gnb > li > a:before{width:12px;height:0;opacity:0;content:"";box-sizing:border-box;border-radius:100%;background: var(--point-color01);position: absolute;left:50%;top:0;transform:translate(-50%);transition:all 0.3s;}
    #aside .gnb .dep02{margin-top:8px;}
    #aside .gnb .dep02 > li > a{display: inline-block;font-size:var(--text-22);font-weight:400;padding: 15px 0;transition: all 0.4s;color: var(--black-color08);}
    #aside .utility{position: absolute;top: clamp(30px, 2.8vw, 50px);right: clamp(30px, 2.8vw, 50px);display: flex;align-items: center;gap: 30px; z-index:2;}
    #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(--point-white);}
    #aside .close_btn span + span{transform: translate(-50%, -50%) rotate(-45deg);}

    /* over */
        @media (hover:hover) and (pointer:fine){
            #aside .gnb > li:hover > a:before{height:12px;opacity:1;}
            #aside .gnb .dep02 > li:hover a{color:var(--point-white);}
        }

    @media (max-width:1600px){
        #aside .gnb{grid-template: auto / repeat(3, 1fr)}
    }
    @media (max-width:1023px){
        #aside{padding-block: clamp(40px, 12vw, 120px);}
        #aside .close_btn{width: clamp(30px, 4vw, 40px);height: clamp(30px, 4vw, 40px);}
        #aside .utility{gap:20px;}
    }
    @media (max-width:860px){
        #aside{display: block;}
        #aside .w_custom{align-items:flex-start;}
        #aside .gnb{grid-template: auto / repeat(1, 1fr);gap:0;}
        #aside .gnb > li{display: block;padding: 25px 0;width:100%;text-align:left;box-sizing:border-box;border-bottom:1px solid rgba(255,255,255,0.5);}
        #aside .gnb > li > a{width: 100%; padding:0;}
        #aside .gnb > li > a:before{display: none;}
        #aside .gnb .dep02{display: flex;flex-wrap:wrap;margin-top: 15px;justify-content: flex-start;gap:0 12px;}
        #aside .gnb .dep02 li{width:calc(100% / 3 - 8px);}
        #aside .gnb .dep02 > li > a{padding:12px 0;}
        #aside .utility{top:15px; right: 15px; }
    }
    @media (max-width:640px){
        #aside .gnb .dep02 li{width:calc(50% - 6px);}
        #aside .gnb .dep02 > li > a{padding:7px 0;}
        #aside .gnb .dep02 > li:not(:last-child):after{margin:0 15px;}
    }
    @media (max-width:479px){
        #aside .gnb .dep02{margin-top: 10px;}
        #aside .gnb .dep02 li{width: 100%;}
    }

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

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
	#footer{background:var(--black-color00);padding:60px 0 80px;}
    #footer .top_sec{display: flex;align-items: center;justify-content: space-between;}
    #footer .ft_logo{filter:var(--filter-white);max-width:clamp(140px, 16vw, 164px);}
    #footer .ft_menu{display: flex;align-items: center;gap:40px;}
        #footer .ft_menu li{font-size:var(--text-18);font-weight:300;color: var(--point-white);line-height:1.4;letter-spacing:-0.03em}
        #footer .ft_menu li strong{font-weight:600;}
    #footer .info_box{margin-top:40px;}
    #footer .addr_list{display: flex;flex-direction:column;gap:8px;}
        #footer .addr_list li{display: flex;align-items: center;gap:10px 41px;flex-wrap:wrap;}
        #footer .addr_list li dl{display: flex;gap:14px;position: relative;}
        #footer .addr_list li dl + dl:before{width:1px;height:12px;content:"";background: rgba(255, 255, 255, 0.20);position: absolute;left:-20px;top:50%;translate:0 -50%;}
        #footer .addr_list li.ft_addr dl + dl:before{display: none;}
        #footer .addr_list li dl dt, #footer .addr_list li dl dd{font-size:var(--text-17);font-weight:400;line-height:1.6;font-family:var(--font-type02);letter-spacing:-0.02em}
        #footer .addr_list li dl dt{color:rgba(255, 255, 255, 0.8);flex-shrink:0;}
        #footer .addr_list li dl dd{color:rgba(255, 255, 255, 0.6);font-weight:300;}
    #footer .copy{margin-top:40px;font-size:var(--text-16);font-weight:300;color:rgba(255, 255, 255, 0.3);line-height:1.6;letter-spacing:-0.02em;}
    #footer .copy a{display: inline-block;margin-left:14px;}
    .fp-watermark{display: none !important;}

    @media (max-width:1300px){
        #footer .addr_list li{gap:20px;}
        #footer .addr_list li dl{gap:10px;}
        #footer .addr_list li dl + dl:before{left:-10px;}
    }
    @media (max-width:1023px){
        #footer{padding:clamp(40px, 6vw, 60px) 0 clamp(60px, 8vw, 80px);}
        #footer .ft_logo{}
        #footer .addr_list li{gap:10px 20px;}
        #footer .addr_list li dl + dl:before{display: none;}
    }
    @media (max-width:640px){
        #footer .ft_menu{gap:20px;}
        #footer .info_box{margin-top:25px;}
        #footer .copy{margin-top:30px;}
        #footer .copy a{display: block;margin:5px 0 0 0;}
    }
    @media (max-width:479px){
        #footer .addr_list li{gap:5px 12px;}
        #footer .addr_list li dl{gap:5px;}
        #footer .top_sec{flex-direction: column;gap:20px;align-items: flex-start;}
    }

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

    MAIN | index.html

───────────────────────────────────────────────────────────*/
	 /* 비주얼 */
     .main_visual {position:relative;box-sizing: border-box; overflow: hidden;}
     .main_visual .slick-slide {position: relative; height: 100vh; overflow: hidden; box-sizing: border-box;}
     .main_visual .thumb{position: absolute; inset: 0; background: no-repeat center / cover;transition:all 5s;}
     .main_visual .txt_box{display: flex;align-items: center;position: absolute;bottom:72px;left:50%;translate:-50%;z-index:5;}
     .main_visual .txt_box h2{font-size:var(--text-24);font-weight:500;color: var(--point-white);letter-spacing: -0.02em;}
     .main_visual .txt_box p{display: inline-flex;align-items: center;font-size:var(--text-20);font-weight:300;color: var(--point-white);}
     .main_visual .txt_box p:before{width:1px;height:12px;content:"";background:var(--point-white);display: inline-block;margin:0 18px;opacity:0.2;}
        .main_visual .active .thumb{transform: scale(1.05);}
    .main_visual .controller{position: absolute;display: flex;align-items: center;justify-content: flex-end;bottom:75px;right:8.5%;z-index:2;gap:30px;}
    .main_visual .controller .visual_arw{width:20px;aspect-ratio: auto 1;display: inline-flex;align-items: center;justify-content: center;}
        .main_visual .controller .visual_arw:before{width:45%;aspect-ratio:auto 1;content:"";border:2px solid var(--point-white);border-width:2px 2px 0 0;}
        .main_visual .controller .visual_arw.prev:before{transform:rotate(-135deg);translate:3px;}
        .main_visual .controller .visual_arw.next:before{transform:rotate(45deg);translate:-3px;}
    .main_visual .controller .counter{display: flex;align-items: center;}
        .main_visual .controller .counter span{display: inline-flex;align-items: center;font-size:var(--text-18);font-weight:700;color: var(--point-white);}
        .main_visual .controller .counter .slideCountAll{opacity:0.5;}
        .main_visual .controller .counter .slideCountAll:before{content:"/";display: inline-block;margin:0 10px;}

    @media (max-width:1650px){
        .main_visual .controller{right:3%;}
    }
    @media (max-width:1200px){
        .main_visual .txt_box{flex-direction: column;align-items: flex-start;}
        .main_visual .txt_box p:before{display: none;}
    }
    @media (max-width:1023px){
         .main_visual .slick-slide{height: clamp(550px, 94vw, 940px);}
    }
    @media (max-width:640px){
        .main_visual .txt_box{justify-content: center;}
        .main_visual .txt_box p:before{margin:0 10px;height:10px;}
        .main_visual .controller{bottom:30px;right:50%;translate:50%;gap:20px;}
    }

    /*main section*/
    .main_business{height:100vh;box-sizing:border-box;position: relative;display: flex;flex-direction: column;justify-content: flex-end;}
        .main_business.business01{background:url('../images/skin/main_section01_bg.jpg') no-repeat center / cover;}
        .main_business.business02{background:url('../images/skin/main_section02_bg.jpg') no-repeat center / cover;}
        .main_business.business03{background:url('../images/skin/main_section03_bg.jpg') no-repeat center / cover;}
    .main_business:before{width:100%;height:100%;content:"";background:var(--black-color00);opacity:0.25;position: absolute;top:0;left:0;}
    #wrap .fp-section{justify-content: flex-end;}
    .main_title{padding-bottom:193px;display: flex;flex-direction: column;gap:20px;}
        .main_title h3{font-size:var(--text-58);font-weight:700;color: var(--point-white);line-height:1.2;}
        .main_title p{font-size:var(--text-20);font-weight:300;color: var(--point-white);letter-spacing: -0.04em;line-height:1.7;}
    .main_title .tag{display: flex;flex-wrap:wrap;margin-top:20px;gap:10px;}
        .main_title .tag li{font-size:var(--text-17);font-weight:400;color: var(--point-white);letter-spacing: -0.02em;line-height:1.4;background: rgba(255, 255, 255, 0.10);backdrop-filter: blur(3px);padding:6px 20px;}

    @media (min-width:1024px){
        #fullpage .main_business .aos-init{opacity: 0; translate: 0 40px; transition: opacity 1.5s 0.3s, translate 1.5s 0.3s;}
        #fullpage .main_business.active .aos-init{opacity: 1; transition: opacity 1.5s 0.3s, translate 1.5s 0.3s}
        #fullpage .main_client .aos-init{opacity:1;translate:0;}
    }
    @media (max-width:1023px){
        .main_business{height:clamp(450px, 80vw, 800px);}
        .main_title{padding-bottom:8%;}
        .main_title br{display: none;}
    }
    @media (max-width:640px){
        .main_business{height:auto;padding:50px 0 0 0;}
    }

    /*clent*/
        #wrap .main_client{justify-content: center;}
        #wrap .main_client .w_custom{padding-bottom:100px;}
        #wrap .main_client .main_title{padding-bottom:50px;}
        #wrap .main_client .main_title h3{color:var(--black-color00);}
        #wrap .main_client .main_title p{color:var(--black-color03);}
        .waveSwiper .swiper-wrapper{transition-timing-function: linear;}
            .waveSwiper .swiper-slide{width:240px;}

        @media (max-width:1023px){
            .main_client{padding-block:clamp(70px, 10vw, 100px);}
            #wrap .main_client .w_custom{padding-bottom:0;}
            #wrap .main_client .main_title{padding-bottom:clamp(30px, 5vw, 50px);}
            .waveSwiper .swiper-slide{width:clamp(150px, 25vw, 240px);}
        }