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

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

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

/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
    #wrap {position:relative; overflow: clip;}
    #contents_wrap, .w_custom {position: relative; width: calc(100% - 120px); max-width: 1500px; margin:0 auto; box-sizing: border-box;}
    #contents_wrap{padding-bottom: max(85px, 7.8125vw);}
    #contents_wrap:has(.full_sec){width: 100%; max-width: 100%; padding: 0;}

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



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

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

───────────────────────────────────────────────────────────*/
	
    .skip_nav {position:relative;z-index:9999;}
    .skip_nav a {display:block;height:1px;width:1px;margin-bottom:-1px;overflow:hidden;font-size:12px;color:#fff;font-weight:bold;white-space:nowrap;text-align:center;}
    .skip_nav a:focus, .skip_nav a:active {height:auto;width:100%;padding:0;margin-bottom:0;position:absolute;left:0;top:0;}

    #header{position: fixed;top:0;left:0;z-index: 99;width: 100%;height: 110px;box-sizing: border-box;background: var(--trans-color); transition: all 0.4s;}
        #header.on{background: var(--point-white); box-shadow: 3px 3px 5px rgba(0,0,0,0.1);}
    #header .w_custom{display: flex; align-items: center; justify-content: space-between; max-width: 100%; height: 100%;}
    #header .logo{font-size: 0;}
    #header .logo a{display: block; width: 191px;}
    #header .gnb{position: absolute;top:0;left:50%;transform: translateX(-50%);width: calc(100% - 500px);height: 100%;display: flex;align-items: center;justify-content: center;text-align: center;gap: clamp(15px, 4.3vw, 80px); font-size: var(--title-20);}
    #header .gnb > li{position: relative;height: 100%;box-sizing: border-box;letter-spacing: 0;}
    #header .gnb > li > a{display: flex; align-items: center; justify-content: center; height: 100%; font-weight: 600; color: var(--black-color02); transition: all 0.4s; text-transform: uppercase;}
    #header .gnb .dep02{position: absolute; top:100%; left:50%; transform: translateX(-50%); width: max-content; min-width: 150px; padding: 15px 0; background: var(--point-white); border: 1px solid var(--border-color01); box-sizing: border-box; opacity: 0; pointer-events: none; transition: all 0.4s;}
    #header .gnb .dep02 > li > a{display: block;font-size: 80%;font-weight: 500;color: var(--black-color06);padding: 10px 20px;box-sizing: border-box;transition: all 0.4s;}
    #header .link_list{display: flex;align-items: center;gap: clamp(8px, 0.6vw, 50px);}
	#header .link_list .btn_tel{position: relative;display: inline-flex;font-size: var(--title-18);overflow: hidden;border-radius: 60px;background: var(--point-color01);color: var(--point-white);transition: all 0.4s;height:40px;;align-items: center;justify-content: center;gap:10px;padding:0 20px;}
	#header .link_list .btn_tel:before{width:16px;height:16px;content:"";background:url('../images/skin/hd_tel.png')no-repeat center;background-size:auto 100%;}
    #header .cate_btn{display: flex;flex-direction: column;align-items: flex-end;justify-content: space-between;width: 38px;height: 30px;}
    #header .cate_btn span{width: 84%;height: 2px;background: var(--black-color02); transition: all 0.4s;}
        #header .cate_btn span:nth-child(2){transform: translateX(-16%);}

        #header.main_on :where(.logo, .gnb > li > a, .cate_btn){filter: var(--filter-white);}
        #header.main_on .submit_btn{background: var(--point-white); color: var(--point-color01);}
        body:has(#header.main_on, .main_solution.active) #fp-nav.fp-left ul li a span{background: var(--point-white);}

    .scr_top{position: fixed;right:60px;bottom:60px;display: flex;align-items: center;justify-content: center;width: 60px;height: 60px;border-radius: 100%;background: var(--black-color03);z-index: 9;padding: 12px;box-sizing: border-box; transition: all 0.4s; opacity: 0; pointer-events: none;}
        #wrap:has(#header.on) .scr_top{opacity: 1; pointer-events: all;}
    .scr_top.for_pc{display:none;}
        .main_index .scr_top.for_pc{display:flex;}
        .main_index .scr_top.for_m{display: none;}

        /* over */
            @media screen and (min-width:1024px){
                #header .gnb > li:hover > a{color: var(--point-color01);}
                #header .gnb > li:hover .dep02{opacity: 1; pointer-events: all;}
                #header .gnb .dep02 > li > a:hover{background: var(--point-color01); color: var(--point-white);}
                #header .cate_btn:hover span{background: var(--point-color01);}
                #header .cate_btn:hover span:nth-child(2){transform: translateX(0);}
				#header .link_list .btn_tel:hover a{background:var(--point-color02);}

                .scr_top:hover{background:var(--point-color01);}
            }
    @media screen and (max-width:1800px){
        #header .gnb{gap: clamp(15px, 3vw, 80px);}
        #header .gnb > li{font-size: 90%;}
    }
	@media screen and (max-width:1600px){
		#header .gnb{transform: translate(-59%);}
	}
	@media screen and (max-width: 1400px){
		#header .gnb{transform:translate(-56%);width: calc(100% - 440px);gap: clamp(15px, 1vw, 80px);}
		#header .gnb > li{font-size: 80%;}
		#header .link_list .btn_tel{padding:0;aspect-ratio:1;}
		#header .link_list .btn_tel:before{width:20px;height:20px;}
		#header .link_list .btn_tel span{display: none;}
	}
    @media screen and (max-width:1200px){
		#header .gnb > li{font-size:75%;}
		#header .link_list .btn_tel{height:40px;}
		
        .scr_top{right: 30px; bottom:30px;}
    }
    @media screen and (max-width:1023px){
        #header{height: 100px;}
        #header .logo a{width: 170px;}
        #header .gnb{display: none;}
        
        .scr_top{width: 55px; height: 55px;}
            .main_index .scr_top.for_pc{display: none;}
            .main_index .scr_top.for_m{display:flex;}
    }
    @media screen and (max-width:860px){
        #header{height: 90px;}
        #header .logo a{width: 160px;}
        #header .cate_btn{width: 36px; height: 28px;}
		#header .link_list .btn_tel{height:50px;}
		#header .link_list .btn_tel:before{height:20px;width:20px;;}

        .scr_top{right: 15px; bottom:15px; width: 50px; height: 50px;}
    }
    @media screen and (max-width:640px){
        #header{height: 80px;}
        #header .logo a{width: 140px;}
        #header .cate_btn{width: 34px; height: 26px;}
		#header .link_list li{height:45px;display: flex;align-items: center;}
		#header .link_list .btn_tel{height: 40px;}
		#header .link_list .btn_tel:before{height:16px;width:16px;;}

        .scr_top{width: 45px; height: 45px;}
    }
    @media screen and (max-width:479px){
        #header{height: 70px;}
        #header .logo a{width: 120px;}
        #header .cate_btn{width: 30px;height: 22px;}
		#header .link_list li{height:42px;}

        .scr_top{width: 40px; height: 40px;}
    }
	@media screen and (max-width:330px){
		#header .logo a{width:100px;}
	}

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

	Aside | outline/nav.html

───────────────────────────────────────────────────────────*/
    #aside{position: fixed;top:0;left:0;width: 100%;height: 100%;z-index: 999;background: rgba(0,0,0,0.8);backdrop-filter:blur(10px);display: flex;flex-direction: column;overflow: hidden;overflow-y: auto;padding: 16vh 0;box-sizing: border-box;opacity: 0;clip-path: inset(0 100% 0 0);transition: all 0.6s;}
    #aside.on{opacity: 1; clip-path: inset(0 0 0 0);}
    body:has(#aside.on){overflow: hidden; touch-action: none;}
    #aside .w_custom{flex-shrink: 0;}
    #aside .gnb{width: 100%;font-size: var(--title-20);letter-spacing: 0;}
    #aside .gnb > li{display: flex; align-items: center; justify-content: space-between; gap: 30px; color: var(--point-white); border-bottom: 1px solid rgba(255,255,255,0.2)}
    #aside .gnb > li > a{display: block; font-size: 240%; font-weight: 500; line-height: 1.2; padding:30px 0; flex-shrink: 0; transition: all 0.4s;}
    #aside .gnb .dep02{display: flex; flex-wrap: wrap;}
    #aside .gnb .dep02 > li > a{display: inline-block;font-size: 100%;font-weight: 300;padding:10px 0;transition: all 0.4s;opacity: 0.6;}
    #aside .gnb .dep02 > li > a :is(span, br){display: none;}
    #aside .gnb .dep02 > li:not(:last-child):after{display: inline-flex; content:'/'; margin:0 20px; opacity: 0.6;} 
    #aside .close_btn{position: absolute;top: 50px;right: 50px;width: 40px;height: 40px;z-index: 9;}
    #aside .close_btn span{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%) rotate(45deg); width: 100%; height: 2px; background: var(--point-white);}
    #aside .close_btn span + span{transform: translate(-50%, -50%) rotate(-45deg);}

        /* over */
            @media screen and (min-width:1024px){
                #aside .gnb > li:hover > a{color: var(--point-color01);}
                #aside .gnb .dep02 > li > a:hover{opacity: 1;}
            }

    @media screen and (max-width:1600px){
        #aside .close_btn{top:30px; right: 30px;}
    }
    @media screen and (max-width:1023px){
        #aside .close_btn{width: 35px; height: 35px;}
    }
    @media screen and (max-width:860px){
        #aside{padding:70px 0;}
        #aside .gnb > li{display: block; padding: 20px 0;}
        #aside .gnb > li > a{width: 100%; padding:0;}
        #aside .gnb .dep02{margin-top: 10px;}
        #aside .close_btn{top:15px; right: 15px; width: 30px; height: 30px;}
    }
    @media screen and (max-width:640px){
        #aside .gnb > li > a{font-size: 220%;}
        #aside .gnb .dep02 > li > a{padding:7px 0;}
    }
    @media screen and (max-width:479px){
        #aside{padding:50px 0;}
        #aside .gnb > li{padding: 15px 0;}
        #aside .gnb > li > a{font-size: 200%;}
        #aside .gnb .dep02{margin-top: 5px;}
    }


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

	MAIN | index.html

───────────────────────────────────────────────────────────*/
    /* 공통 */
        #fullpage .section{height: 100vh;}
        #fullpage .cont{position: relative; width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center; box-sizing: border-box; overflow: hidden;}
        #fullpage .fp-scroller{height: 100%;}
        body #fp-nav.fp-left{left: 60px; transform: none;}
        body #fp-nav.fp-left ul{display: flex; flex-direction: column; gap: 14px;}
        body #fp-nav.fp-left ul li{width: auto; height: auto; margin:0;}
        body #fp-nav.fp-left ul li a{position: relative; width: 12px; height: 12px;}
        body #fp-nav.fp-left ul li a span{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width: 50%; height: 50%; border-radius: 100%; background: var(--border-color02); transition: all 0.4s; margin:0;}
            body #fp-nav.fp-left ul li a.active span{width: 100%;height: 100%;background: var(--black-color02);margin: 0;}
            body #fp-nav.fp-left .fp-tooltip{display: none;}

        .main_title{position: relative; font-size: var(--title-20); box-sizing: border-box;}
            .main_title.hd{margin-bottom: 62px;}
            .main_title.cen{text-align: center;}
            .main_title:has(.main_more){padding-right: 200px;}
        .main_title h2{position: relative;font-size: 260%;font-weight: 700;color: var(--black-color02);line-height: 1.2;}
            .main_title h2 + p{margin-top: 34px;}
        .main_title h2 small{font-size: 96%;font-weight: 600;letter-spacing: -0.04em;}
        .main_title h2 em{font-weight: inherit; color: var(--point-color01);}
        .main_title h6{position: relative;font-size: 110%;font-weight: 400;color: var(--black-color02);line-height: 1.4;}
            .main_title h6 + h2{margin-top: 26px;}
        .main_title p{position: relative;font-size: 100%;font-weight: 400;color: var(--black-color02);line-height: 1.5;letter-spacing: -0.03em;}
        .main_title .main_more{margin:0; position: absolute; right:0; bottom:5px;}

        .submit_btn{position: relative; display: inline-flex; font-size: var(--title-18); overflow: hidden; border-radius: 60px; background: var(--point-color01); color: var(--point-white); transition: all 0.4s;}
        .submit_btn span{display: flex;align-items: center;justify-content: center;min-width: 100px;height: 40px;padding:0 20px;font-size: inherit;font-weight: 600;box-sizing: border-box;border-radius: inherit;transition: all 0.4s;line-height: 1;}
            .submit_btn.wide span{position: relative; font-size: 90%; min-width: 180px;}
            .submit_btn.gray{background: var(--point-white); color: var(--black-color03); border:1px solid var(--black-color03); transition: none;}
            .submit_btn.gray:before{position: absolute; content: ''; width: 100%; height: 100%; background: var(--point-color01); top:0; left:0; clip-path: circle(0% at 0 100%); opacity: 0; transition: all 0.6s;}
            .submit_btn.gray:after{position: absolute;content:'';width: 22px;height: 16px;background: url('/data/skin/respon_default/images/skin/main_solution_arw.svg') no-repeat center / 100% auto;top:50%;right: 20px;transform: translateY(-50%);filter: var(--filter-white); opacity: 0; transition: all 0.4s;}
                
        .more_wrap{display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-top: 60px;}
        .main_more{position: relative; display: inline-flex; align-items: center; gap: 16px; font-size: var(--title-20);}
        .main_more span{position: relative;  font-weight: 400; color: var(--black-color02);}
        .main_more span:before{position: absolute; content: ''; width: 0; height: 1px; background: var(--black-color02); left:0; bottom:0; transition: all 0.6s;}
        .main_more em{display: inline-flex;align-items: center;justify-content: center;width: 32px;height: 32px;background: var(--gray-bg01);border-radius: 100%;transition: all 0.4s;padding: 10px;box-sizing: border-box;}
        .main_more em img{transition: all 0.4s;}

        .circle_btn{position: relative; display: inline-block; font-size: var(--title-20);}
            .circle_btn:before{position: absolute; content:''; top:50%; left:50%; transform: translate(-50%, -50%); width: 113%; height: 113%; background: var(--point-color01); opacity: 0.2; border-radius: 100%;}
        .circle_btn dl{position: relative;display: flex;align-items: center;justify-content: flex-start;width: 164px;height: 164px;border-radius: 100%;box-sizing: border-box;font-size: 140%;font-weight: 600;color: var(--point-white);background: var(--point-color01);overflow: hidden;}
        .circle_btn dl dt{font-size: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-shrink: 0;margin-left: -100%; transition: all 0.4s;}
        .circle_btn dl dd{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-shrink: 0;filter: var(--filter-white);}
		.circle_btn dl dd img{max-width: 50%;}
		.circle_btn span{position:absolute;left: 50%;bottom: calc(100% + clamp(0px, 1vw, 10px));translate: -50%;width: max-content;max-width: 200%;font-size: clamp(17px, 2.4vw, 24px);font-weight: 500;color: var(--point-white);}

            .circle_btn:before{animation-name: circleBtn; animation-duration:1.5s; animation-iteration-count:infinite; transition-timing-function:linear;}
            @keyframes circleBtn {0% {width: 113%; height: 113%; opacity: 0.2;} 60% {right:0; opacity: 0.5;} 100% {width: 180%; height: 180%; right:0; opacity: 0;}}
            
            /* over */
                @media screen and (min-width:1023px){
                    body #fp-nav.fp-left ul li a:hover span{background: var(--black-color02);}

                    .submit_btn:hover{background: var(--point-color02);}
                    .submit_btn.gray:hover{background:var(--point-white);border-color: var(--point-color01);}
                    .submit_btn.gray:hover:before{clip-path: circle(150% at 0 100%); opacity: 1;}
                    .submit_btn.gray:hover:after{opacity: 1;}
                    .submit_btn.gray:hover span{filter: var(--filter-white); transform: translateX(-10px);}

                    .main_more:hover span:before{width: 100%;}
                    .main_more:hover em{background: var(--point-color01);}
                    .main_more:hover em img{transform: rotate(180deg); filter: var(--filter-white);}

                    .circle_btn:hover dl dt{margin-left: 0;}
                    #fullpage *[data-aos="fade-up"]{transition-delay: 0.2s;}
                    #fullpage .active *[data-aos="fade-up"]{opacity: 1; transform: none;}
                }

        @media screen and (max-width:1580px){
            body #fp-nav.fp-left{left: 30px;}
        }
        @media screen and (max-width:1400px){
            body #fp-nav.fp-left{left: 15px;}
        }
        @media screen and (max-width:1200px){
            .submit_btn span{height: 40px; font-size: 90%; min-width: 100px;}
                .submit_btn.wide span{min-width: 170px;}
        }
        @media screen and (max-width:1023px){
            #fullpage .section{height: auto;}
            #fullpage .cont{height: auto; padding:120px 0;}

            .main_title.hd{margin-bottom: clamp(20px, 7vw, 60px);}
            .main_title h2{font-size: 230%;}
            .main_title h2 + p{margin-top: clamp(20px, 4vw, 34px);}
            .main_title h6 + h2{margin-top: clamp(15px, 3vw, 25px);}

            .submit_btn span{min-width: 100px;}
            .submit_btn.wide span{min-width: 160px;}

            .more_wrap{margin-top: clamp(30px, 6vw, 60px);}
        }
        @media screen and (max-width:860px){
            .submit_btn span{min-width: 100px; height: 50px;}
            .submit_btn.wide span{min-width: 140px;}
            
            .circle_btn dl{width: 150px; height: 150px;}
        }
        @media screen and (max-width:640px){
            #fullpage .cont{padding:100px 0;}

            .main_title:has(.main_more){padding-right: 0;}
            .main_title h2{font-size: 200%;}
            .main_title .main_more{position: relative; margin-top: 30px; right:auto; bottom:auto; justify-content: flex-start;}

            .submit_btn span{min-width: 100px; height: 40px;}
            .submit_btn.wide span{min-width: 130px;}

            .main_more em{width: 30px; height: 30px;}
            .circle_btn dl{width: 130px; height: 130px; font-size: 120%;}
        }
        @media screen and (max-width:479px){
            #fullpage .cont{padding:70px 0;}

            .main_title h2{font-size: 180%;}
            .main_title h6{font-size: 100%;}
            .main_title .more_wrap{margin-top: 25px;}

            .submit_btn span{min-width: 80px; height: 40px;}
            .submit_btn.wide span{min-width: 120px;}

            .main_more{gap: 12px;}
            .main_more span{font-size: 90%;}
            .main_more em{width: 28px; height: 28px; padding: 8px;}
            .circle_btn dl{width: 110px; height: 110px; font-size: 100%;}
        }

    /* 비주얼 */
        #fullpage .main_visual{position: relative;height: 100vh !important;}
        #fullpage .main_visual .fp-tableCell{height: 100vh !important;}
        .main_visual:before{position: absolute; content: ''; top:0; left:100%; width: 100%; height: 100%; z-index: 9; background: var(--point-color01); transition: all 3s; transition-delay: 0.2s;}
            
            .main_visual :where(.circle, .logo, h5, h3, p), .main_visual .cont:before{opacity: 0;}
                .main_visual.on :where(.circle, .logo, h5, h3, p), .main_visual .cont:before{opacity: 1;}
            .main_visual.on:before{left: -100%;}
            .main_visual .circle{transition: all 0.6s; transition-delay:5s;}
            .main_visual .txt_wrap .logo{transform: scale(1.3); transition: all 1s; transition-delay: 2s;}
                .main_visual.on .txt_wrap .logo{transform: scale(1);}
            .main_visual.on .txt_wrap h3{transition:all 1s; transition-delay: 3s; letter-spacing: -0.05em;}
            .main_visual.on .txt_wrap h5{transition:all 1s; transition-delay: 2.5s;}
            .main_visual.on .txt_wrap p{transition:all 1s; transition-delay: 3.5s;}
            .main_visual.on .cont:before{transform: translate(-50%, 0); transition: all 1s; transition-delay: 4.5s;}
            body #fp-nav.fp-left{opacity: 0; transition: 1s; transition-delay: 5s;}
            body:has(.main_visual.on) #fp-nav.fp-left{opacity: 1;}
            /* .main_index #header{transform: translateY(-100%);}
            .main_index #header.fix{transform: translateY(0); } */
            .main_index:has(.main_visual ~ .section.active) .scr_top{opacity: 1; pointer-events: all;} 


        .main_visual .cont{align-items: center;padding-top: clamp(0px, 15vh, 137px);}
            .main_visual .cont:before{position: absolute;content:'WE DESIGN THE NEEDS OF OUR CUSTOMERS';left: 52%;bottom: -0.6vw;transform: translate(-50%, 100%); font-size: clamp(0px, 4.2vw, 80px);font-weight: 600;color: rgba(0,0,0,0.1);line-height: 1;width: 100%;text-align: center;letter-spacing: 0;}

        .main_visual .circle{position: absolute;top: 22%;left: 49%;transform: translateX(-50%);width: 3500px;height: 3500px;border: 1px solid var(--point-color01);box-sizing: border-box;border-radius: 100%;pointer-events: none;}
        .main_visual .circle em{position: absolute; top:0; left:0; width: 100%; height: 100%; border-radius: inherit; box-sizing: border-box;}
            .main_visual .circle em:before, .main_visual .circle em:after{position: absolute; content: ''; width: 10px; height: 10px; top:-5px; left:50%; margin-left: -5px; background: var(--point-color01); border-radius: 100%;}
            .main_visual .circle em:after{top:auto; bottom:-5px}
            .main_visual .circle em{animation-name: circle; animation-duration:300s; transition-timing-function:linear; animation-iteration-count:infinite;}

            .main_visual .circle.back{border-color: var(--border-color01);top: 16%;left: 62%;}
            .main_visual .circle.back em:before, .main_visual .circle.back em:after{background: var(--border-color01); top:50%; left:-5px; margin:-5px 0 0;}

            @keyframes circle {0% {transform:rotate(0);}100% {transform:rotate(3600deg);}}

        .main_visual .txt_wrap{position: relative; font-size: var(--title-20); text-align: center;}
        .main_visual .txt_wrap .logo{display: flex;justify-content: center;margin:0 auto 47px;}
        .main_visual .txt_wrap h3{font-size: 190%;font-weight: 500;color: var(--black-color02);line-height: 1.25;letter-spacing: 0.15em;}
            .main_visual .txt_wrap h3 + p{margin-top: 20px;}
        .main_visual .txt_wrap h5{font-size: 140%;font-weight: 500;color: var(--black-color08);line-height: 1.3;letter-spacing: 0.02em;}
            .main_visual .txt_wrap h5 + h3{margin-top: 47px;}
        .main_visual .txt_wrap h5 em{font-weight: inherit; color: var(--point-color01);}
        .main_visual .txt_wrap p{font-weight: 400; color: var(--black-color05); line-height: 1.6;}

        @media screen and (max-width:1023px){
            #fullpage .main_visual .cont{padding: 0;height: 100%;}
            .main_visual .circle{width: 333vw; height: 333vw;}
        }
        @media screen and (max-width:860px){
            .main_visual .txt_wrap .logo{width: 30vw;min-width: 120px;margin-bottom: clamp(20px, 5.5vw, 47px);}
            .main_visual .txt_wrap h5 + h3{margin-top: clamp(20px, 5.5vw, 47px);}
            .main_visual .txt_wrap h3 + p{margin-top: clamp(10px, 2.3vw, 20px);}
        }
        @media screen and (max-width:479px){
            .main_visual .txt_wrap h3{font-size: 170%;}
            .main_visual .txt_wrap h5{font-size: 120%;}
            .main_visual .txt_wrap p{font-size: 90%;}
            .main_visual .txt_wrap p br{display: none;}
        }

    /* 솔루션 */
        .main_solution{background: url('../images/skin/main_solution_bg.png') no-repeat right bottom / cover;}
		.main_solution .cont{padding-top: clamp(0px, 6.5vw, 110px);}
		.main_solution .w_custom{display: flex; height:100%;  align-items: center;}
        .main_solution .main_title{width: 23.4%;min-width: 325px;height: 100%;display: flex;flex-direction: column;justify-content: center;flex-shrink: 0;}
            .main_solution .main_title:before{position: absolute;content:'';bottom: 0;right:0;background: var(--point-color01);width: 100vw;height: 100%;border-radius: 0 80px 0 0;}
        .main_solution .tab_list{position: relative;margin-top: 56px;display: flex;flex-direction: column;gap: 20px;}
        .main_solution .tab_list > li{cursor: pointer;}
        .main_solution .desc{position: relative;display: flex;align-items: center;padding: 10px 0 10px 10px;font-size: var(--title-20);border-radius: 60px;}
            .main_solution .desc:before{position: absolute; content:''; width: calc(100% + 30px); height: 100%; top:0; left:0; border-radius: inherit; background: var(--point-white); box-shadow: 6px 11px 10.5px rgba(0, 0, 0, 0.15); opacity: 0; transition: all 0.4s;}
            .main_solution .desc :where(dt, dd){position: relative;}
        .main_solution .desc dt{width: 60px;height: 60px;border-radius: 100%;background: rgba(255,255,255,0.05);flex-shrink: 0;display: flex;align-items: center;justify-content: center;padding: 10px;box-sizing: border-box; transition: all 0.4s;}
        .main_solution .desc dd{width: calc(100% - 60px);font-size: 110%;font-weight: 500;color: var(--point-color01);line-height: 1.35;display: flex;align-items: center;justify-content: space-between;gap: 15px;padding-left: 30px;box-sizing: border-box;}
            .main_solution .desc dd:after{display: inline-flex;content:'';width: 22px;height: 16px;background: url('/data/skin/respon_default/images/skin/main_solution_arw.svg') no-repeat center / 100% auto; opacity: 0; transition: all 0.4s;}

        .main_solution :where(.main_title h2, .desc dt img, .desc dd){filter: var(--filter-white); transition: all 0.4s;}

        .main_solution .on :where(.main_title h2, .desc dt img, .desc dd){filter: none;}
        .main_solution .on .desc:before{opacity: 1;}
        .main_solution .on .desc dt{background:var(--point-white); box-shadow: 0 0 50px rgba(23, 55, 145, 0.12);}
        .main_solution .on .desc dd{font-size: 130%; font-weight: 600;}
        .main_solution .on .desc dd:after{opacity: 1;}

        .main_solution .tab_conts{width: 76.6%;padding-left: clamp(30px, 5vw, 95px);box-sizing: border-box;}
        .main_solution .tab_conts .item{height: 0; opacity: 0; overflow: hidden; display: flex; align-items: flex-end; transition: all 0.4s;}
        .main_solution .tab_conts .item.on{height: auto; opacity: 1; overflow: visible;}
        .main_solution .tab_conts .thumb{width: 55%;font-size: 0;box-sizing: border-box;}
        .main_solution .tab_conts .txt_wrap{width: 45%;font-size: var(--title-20);box-sizing: border-box;padding-left: clamp(15px, 2vw, 20px);} 
        .main_solution .tab_conts .txt_wrap h4{font-size: 200%;font-weight: 700;color: var(--black-color02);line-height: 1.4;letter-spacing: -0.03em;}
        .main_solution .tab_conts .txt_wrap h4 + p{margin-top: 26px;}
        .main_solution .tab_conts .txt_wrap p{font-size: 90%;font-weight: 400;color: var(--black-color05);line-height: 1.78;letter-spacing: -0.05em;font-family: var(--font-type02);}
        .main_solution .tab_conts .submit_btn{margin-top: 41px;}

        /* over */
            @media screen and (min-width:1024px){
                .main_solution .tab_list > li:hover :where(.main_title h2, .desc dt img, .desc dd){filter: none;}
                .main_solution .tab_list > li:hover .desc:before{opacity: 1;}
                .main_solution .tab_list > li:hover .desc dt{background:var(--point-white); box-shadow: 0 0 50px rgba(23, 55, 145, 0.12);}
                .main_solution .tab_list > li:hover .desc dd:after{opacity: 1;}
            }

        @media screen and (max-width:1400px){
            .main_solution .tab_conts .txt_wrap h4{font-size: 180%;}
            .main_solution .tab_conts .txt_wrap p{font-size: 80%;}
        }
        @media screen and (max-width:1200px){
            .main_solution .tab_conts .txt_wrap h4{font-size: 150%;}
            .main_solution .tab_conts .txt_wrap p{font-size: 70%;}
        }
        @media screen and (max-width:1023px){
            #fullpage .main_solution .cont{padding-top: 0;}
            .main_solution .w_custom{display: block; height: auto;}
            .main_solution .main_title{width: 100%; min-width: auto; padding:120px 0 50px;}
            .main_solution .main_title:before{width: calc(100% + 60px); right:-30px;}
            .main_solution .tab_list{margin-top:clamp(20px, 5vw, 50px); gap: 15px; flex-direction: row; flex-wrap: wrap;}
            .main_solution .tab_list > li{width: calc(100% / 2 - 7.5px);}
            .main_solution .desc{padding-right: 15px;}
                .main_solution .desc:before{width: 100%;}
            .main_solution .desc dd{padding-left: 25px;}
            .main_solution .tab_conts{width: 100%; padding:100px 0 0;}
            .main_solution .tab_conts .txt_wrap p{font-size: 80%;}
            .main_solution .tab_conts .txt_wrap h4 + p{margin-top: clamp(15px, 3vw, 26px);}
            .main_solution .tab_conts .submit_btn{margin-top: clamp(20px, 4vw, 40px);}
        }
        @media screen and (max-width:860px){
            .main_solution .desc dt{width: 55px; height: 55px;}
            .main_solution .desc dd{padding-left: 20px; width: calc(100% - 55px);}
        }
        @media screen and (max-width:640px){
            .main_solution .main_title{padding:100px 0 30px;}
            .main_solution .desc:before{box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);}
            .main_solution .desc dt{width: 50px; height: 50px; }
            .main_solution .desc dd{font-size: 100%; width: calc(100% - 50px); padding-left: 15px;}
                .main_solution .desc dd:after{width: 19px;}
                .main_solution .on .desc dd{font-size: 120%;}
            .main_solution .tab_list{gap: 10px;}
            .main_solution .tab_conts{padding-top:70px;}
            .main_solution .tab_conts .item{display: block;}
            .main_solution .tab_conts .thumb{width: 100%;}
            .main_solution .tab_conts .txt_wrap{width: 100%;padding: 30px 0 0;}
            .main_solution .tab_conts .txt_wrap p{font-size: 90%;}
        }
        @media screen and (max-width:479px){
            .main_solution .main_title{padding-top:70px;}
            .main_solution .tab_list{gap: 5px;}
            .main_solution .tab_list > li{width: 100%;}
            .main_solution .desc dt{width: 45px; height: 45px; }
            .main_solution .desc dd{width: calc(100% - 45px);}
            .main_solution .tab_conts{padding-top:40px;}
        }

    /* 파트너 */
        .main_partner{position: relative; overflow: hidden;}
            .main_partner:before{position: absolute;content:'';top: 66%;right: -1%;transform: translateY(-50%);width: 1109px;height: 1103px;background: url('../images/skin/main_partner_bg.svg') no-repeat center / 100% auto;}
            .main_partner:before{animation-name: mainPartner; animation-duration:40s; animation-iteration-count:infinite; animation-direction:alternate;  animation-fill-mode: forwards; transition-timing-function:linear;}
            @keyframes mainPartner {0% {transform:translateY(-50%) rotate(0) scale(1);}100% {transform:translateY(-50%) rotate(0.1turn) scaleX(0.98);}}

        .main_partner .cont{padding-top: clamp(0px, 11vh, 100px);}
        .main_partner .main_title h2{font-family: var(--font-type02);}
        .main_partner .logo_list{display: flex;flex-wrap: wrap;gap: 20px;}
        .main_partner .logo_list > li{position: relative;width: calc(100% / 5 - 16px);box-sizing: border-box;box-shadow: 0 0 0 1px var(--border-color01);border-radius: 6px;overflow: hidden; transition: all 0.4s;}
        .main_partner .logo_list .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 3;}

            /* over */
                @media screen and (min-width:1024px){
                    .main_partner .logo_list > li:hover{box-shadow: 0 0 0 1px var(--point-color01);}
                }

        @media screen and (max-width:1023px){	
			#fullpage .main_partner .cont{padding-top:0;}
            .main_partner:before{width: 108vw; min-width: 600px; height: 108vw; min-height: 600px; right:50%; transform: translate(50%, -50%);}
            @keyframes mainPartner {0% {transform:translate(50%, -50%) rotate(0) scale(1);}100% {transform:translate(50%, -50%) rotate(0.1turn) scaleX(0.98);}}
            .main_partner .logo_list > li{width: calc(100% / 4 - 15px);}
        }
        @media screen and (max-width:860px){
            .main_partner .logo_list{gap: 15px;}
            .main_partner .logo_list > li{width: calc(100% / 4 - 11.25px);}
        }
        @media screen and (max-width:640px){
            .main_partner .logo_list > li{width: calc(100% / 3 - 10px); border-radius: 3px;}
        }
        @media screen and (max-width:479px){
            .main_partner .logo_list > li{width: calc(100% / 2 - 7.5px);}
        }

    /* 공지사항 */
        .main_news{position: relative;}
            .main_news:before{position: absolute; content:''; width: 100%; height: 44%; max-height: 400px; background: var(--point-color03); right:0; bottom:0;}
            .main_news:after{position: absolute; content:''; width: 543px; height: 131px; background:url('../images/skin/logo.svg') no-repeat right bottom / 100% auto; right:0; bottom:0; opacity: 0.05;}
		.main_news .cont{padding-bottom: clamp(0px, 2vh, 20px);}
        .main_news .notiSwiper{position: relative;}
        .main_news .notiSwiper .swiper-slide{position: relative;padding: 46px 50px;height: auto;box-sizing: border-box;font-size: var(--title-20);letter-spacing: -0.04em;display: flex;flex-direction: column;justify-content: space-between;gap: 60px;border: 1px solid var(--border-color03);background: var(--point-white);border-radius: 10px;overflow: hidden;transition: all 0.4s;}
        .main_news .notiSwiper .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5; }
        .main_news .notiSwiper .desc dt{font-size: 120%; font-weight: 400; color: var(--black-color02); font-family: var(--font-type02); line-height: 1.58; white-space:normal; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
            .main_news .notiSwiper .desc dt + dd{margin-top: 30px;}
        .main_news .notiSwiper .desc dd{font-weight: 400; color: var(--black-color06); font-family: var(--font-type02); line-height: 1.7; white-space:normal; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
        .main_news .notiSwiper .date{font-weight: 400;color: var(--black-color10);line-height: 1.2;letter-spacing: 0;}
        .main_news .controller{position: absolute;top: clamp(calc(100% + 20px), calc(100% + 6vh), calc(100% + 54px)); left:0; display: flex;align-items: center;justify-content: center;gap: 20px;width: 100%;}
        .main_news .swiper_arw{position: relative;top: auto;left:auto;right:auto;margin:0;display: flex;width: 50px;height: 50px;border: 1px solid var(--border-color01);border-radius: 100%;box-sizing: border-box;background: var(--point-white); transition: all 0.4s;}
            .main_news .swiper_arw:before{position: absolute;content:'';width: 8px;height: 8px;border: 2px solid var(--trans-color);border-top-color: var(--black-color08);border-left-color: var(--black-color08);top:50%;left: 54%;transform: translate(-50%, -50%) rotate(-45deg);border-radius: 2px; transition: all 0.4s;}
            .main_news .swiper_arw:after{display: none;}
            .main_news .swiper_arw.swiper-button-next{transform: scale(-1, -1);} 
        .main_news .count{width: 44px;display: flex;align-items: center;gap: 4px;font-size: var(--title-20);justify-content: center;}
        .main_news .count span{font-size: 120%; font-weight: 400; color: var(--black-color08); line-height: 1;}
        .main_news .count .swiper-pagination-current{color: var(--black-color05);}

            /* over */
                @media screen and (min-width:1024px){
                    .main_news .notiSwiper .swiper-slide:hover{box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.10); border-color: var(--point-color01);}
                    .main_news .swiper_arw:hover{border-color: var(--point-color01);}
                    .main_news .swiper_arw:hover:before{border-top-color: var(--point-color01);border-left-color: var(--point-color01);}
                }

        @media screen and (max-width:1023px){
			#fullpage .main_news .cont{padding-top:0;}
            .main_news:after{width: 40vw; min-width: 120px;}
            .main_news .notiSwiper .swiper-slide{padding:40px 45px; gap: clamp(30px, 5.8vw, 60px);}
            .main_news .notiSwiper .desc dt + dd{margin-top: clamp(15px, 2.8vw, 30px);}
            .main_news .controller{position: relative; top:auto; left:auto; margin-top: 40px;}
        }
        @media screen and (max-width:860px){
            .main_news .notiSwiper .swiper-slide{padding:35px 40px;}
            .main_news .swiper_arw{width: 45px; height: 45px;}
                .main_news .swiper_arw:before{width: 7px; height: 7px;}
            .main_news .count span{font-size: 110%;}
        }
        @media screen and (max-width:640px){
            .main_news .notiSwiper .swiper-slide{padding:30px 35px; border-radius: 5px;}
            .main_news .controller{margin-top: 30px; gap: 15px;}
            .main_news .swiper_arw{width: 40px; height: 40px;}
            .main_news .count span{font-size: 100%;}
        }
        @media screen and (max-width:479px){
            .main_news .notiSwiper .swiper-slide{padding:25px 30px;}
            .main_news .notiSwiper .desc dt{font-size: 110%;}
            .main_news .notiSwiper .desc dd{font-size: 90%;}
            .main_news .notiSwiper .date{font-size: 90%;}
            .main_news .controller{gap: 10px;}
            .main_news .swiper_arw{width: 38px; height:38px;}
                .main_news .swiper_arw:before{width: 6px; height: 6px;}
        }
        @media screen and (max-width:431px){
            .main_news .notiSwiper .swiper-slide{padding:25px;}
        }

    /* 문의하기 */
        .main_contact{background:var(--point-color01) url('../images/skin/main_contact_bg.jpg') no-repeat center bottom / cover;}
        .main_contact .cont{padding-top: clamp(0px, 5vh, 46px);}
        .main_contact .main_title :where(h2, h6, p){filter: var(--filter-white);}
        .main_contact .main_title h6{font-weight: 500;}
        .main_contact .main_title h6 + h2{padding-top: 1vw;}
        .main_contact .more_wrap{padding-top: clamp(0px, 2vw, 38px);}

    /* 푸터 */
        .main_footer, .main_footer .fp-tableCell{height: auto !important;}
        

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

	FOOTER | outline/footer.html

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

    #footer{position: relative; padding:80px 0 0; background: var(--point-color02);}
    #footer .w_custom{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 40px 30px;}
    #footer .logo{font-size: 0;width: 191px;filter: var(--filter-white);margin-bottom: 60px;}
    #footer .desc{display: flex; font-size: var(--title-20); color: var(--point-white); gap: 14px; font-family: var(--font-type03);}
    #footer .desc + .desc{margin-top: 16px;}
    #footer .desc :where(dt, dd){font-size: 90%;font-weight: 200;}
    #footer .desc dt{width: 80px; flex-shrink: 0;}
    #footer .desc dd{opacity: 0.6;letter-spacing: 0;}
    #footer .gnb{display: flex;gap: 30px clamp(15px, 4.4vw, 84px);font-size: var(--title-20);color: var(--point-white);letter-spacing: 0;}
    #footer .gnb > li > a{display: block;font-weight: 400;}
    #footer .gnb .dep02{padding: 25px 0 0;}
    #footer .gnb .dep02 > li > a{display: block;font-size: 90%;font-weight: 200;opacity: 0.6;padding: 8px 0; transition: all 0.4s;}
    #footer .btm_sec{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 30px ;width: 100%;border-top: 1px solid rgba(221,221,221,0.3);padding: 32px 0;margin-top: 46px;}
    #footer .copy{display: flex;flex-wrap: wrap;gap: 5px 15px;font-size: var(--title-20);}
    #footer .copy :where(dt, dd){font-size: 80%;font-weight: 200;color: var(--point-white);opacity: 0.7;letter-spacing: 0.02em;}
    #footer .link_list{display: flex;flex-wrap: wrap;gap: 34px;font-size: var(--title-20);font-weight: 300;color: var(--point-white);letter-spacing: 0;}
    #footer .link_list > li > a{display: block;font-size: 90%;font-weight: 300;opacity: 0.6;}
    #footer .link_list > li > a em{font-weight: 400;}
    #footer .link_list > li > a:has(em){opacity: 1;}

        /* over */
            @media screen and (min-width:1024px){
                #footer .gnb .dep02 > li > a:hover{opacity: 1;}
            }
			
	.loader_box{width:100%;height:100%;position: fixed;top:0;left:0;align-items: center;justify-content: center;z-index:10;display: none;}
	.loader_box.on{display: flex;}
	body:has(.loader_box.on){overflow:hidden;}
	.loader {width:100px;aspect-ratio:auto 1;border-radius: 50%;background: radial-gradient(farthest-side, var(--point-color01) 94%,#0000) top/8px 8px no-repeat,conic-gradient(#0000 30%,var(--point-color01));-webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);animation: l13 1s infinite linear;}
	@keyframes l13{ 
	  100%{transform: rotate(1turn)}
	}

    @media screen and (max-width:860px){
        #footer{padding-top: 70px;}
        #footer .logo{width: clamp(120px, 22vw, 190px); margin-bottom: clamp(30px, 7vw, 60px);}
        #footer .desc dt{width: 70px;}
        #footer .btm_sec{margin-top: clamp(0px, 5vw, 40px);}
    }
    @media screen and (max-width:640px){
        #footer{padding-top: 50px;}
        #footer .gnb{display: none;}
        #footer .desc dt{width: 60px;}
        #footer .btm_sec{padding: 25px 0;}
    }
	@media screen and (max-width:479px){
		.loader{width:50px;}
	}