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

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

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

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

    .logo{display: flex;align-items: center;font-size: var(--title-20);gap: 20px;box-sizing: border-box;cursor: pointer;}
    .logo dt{font-size: 0;flex-shrink: 0;}
    .logo dd{font-size: 150%;color: var(--black-color11);font-weight: 600;letter-spacing: 0.03em; transition: all 0.4s;}

    
    @media screen and (max-width:1760px) {
        .logo dt{width: 65px;}
        .logo dd{font-size: 130%;}
    }
    @media screen and (max-width:1400px) {
        #contents_wrap, .w_custom{width: calc(100% - 60px);}
		#contents_wrap {padding-bottom: clamp(80px, 11.43vw, 160px);}
    }
    @media screen and (max-width:1023px) {
        .logo dt{width: 60px;}
        .logo dd{font-size: 120%;}
    }
	@media screen and (max-width:860px) {
        #contents_wrap, .w_custom{width: calc(100% - 30px);}

        .logo{gap: 15px;}
        .logo dt{width: 50px;}
	}
    @media screen and (max-width:640px) {
        .logo dt{width: 45px;}
	}
    @media screen and (max-width:479px) {
        .logo{gap: 10px;}
        .logo dt{width: 40px;}
	}
    @media screen and (max-width:360px) {
        .logo dt{width: 38px;}
        .logo dd{font-size: 110%;}
	}
	@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: sticky;top:0;left:0;width: 100%;height: 140px;z-index: 99; transition: all 0.4s;}
    #header .cont{position: relative; width: 100%; height: 100%; transition: all 0.4s;}
    #header .w_custom{max-width: 100%; height: 100%; display: flex; justify-content: space-between; transition: all 0.4s;}
    #header .info{display:flex;height: 100%;gap: clamp(15px, 3.65vw, 70px);}
    #header .logo{height: 100%; padding: 15px 0;}
    #header .gnb{display: flex;height: 100%;font-size: var(--title-20);letter-spacing: 0.01em; text-align: center;}
    #header .gnb > li{position: relative; height: 100%;}
    #header .gnb > li > a{display: flex;align-items: center;height: 100%;box-sizing: border-box;font-weight: 600;color: var(--black-color03);padding: 0 clamp(5px, 1.6vw, 30px);transition: all 0.4s;}
    #header .gnb .dep02{position: absolute; top:100%; left:50%; transform:translateX(-50%); background: var(--point-white); padding: 10px 0; box-sizing: border-box; border:1px solid var(--border-color01); font-size: 80%; width: max-content; min-width: 120px; opacity: 0; pointer-events: none; transition: all 0.4s;}
    #header .gnb .dep02 > li > a{display: block; font-weight: 500; color: var(--black-color05); padding:7px 20px; box-sizing: border-box; transition: all 0.4s;}
    #header .util{display: flex;align-items: center;height: 100%;gap: 30px;}
    #header .link_list{display: flex; gap: 20px; font-size: var(--title-20);}
    #header .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;}
        #header .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;}
        #header .link_list > li:last-child > a:before{background: var(--point-color01);}
    #header .link_list > li > a span{position: relative; z-index: 3; transition: all 0.4s;}
    #header .lang{position: relative; text-align: center;}
    #header .lang dt{font-size: 0; cursor: pointer; transition: all 0.4s;}
    #header .lang dt span{display: block;}
    #header .lang dt img{transition: all 0.4s;}
    #header .lang dd{position: absolute;top: calc(100% + 10px);left:50%;transform: translateX(-50%);background: var(--point-white);border:1px solid var(--border-color01);padding: 8px 0;font-size: var(--title-20); opacity: 0; pointer-events: none; transition: all 0.4s;}
        #header .lang .on + dd{opacity: 1; pointer-events: all;}
    #header .lang dd a{display: block;font-size: 70%;font-weight: 500;color: var(--black-color03);padding: 3px 20px; transition: all 1.2s;}
    #header .all_cate{position: relative;width: 36px;height: 35px;box-shadow: inset 0 0 0 2px var(--black-color05);box-sizing: border-box;overflow: hidden;display: none;}
        #header .all_cate:before{position: absolute;content:'';width: 40%;height: 40%;background: var(--black-color05);top:50%;left:50%;transform: translate(-50%, -50%);transition: all 0.4s;}

        /* main */
			.main_index #header {position: fixed;}
            .main_index #header :where(.logo dd, .gnb > li > a, .link_list > li > a, .lang dt, .all_cate){filter: var(--filter-white);}

        /* on */
            #header.on .cont{background: var(--point-white); height: 80%; box-shadow: 3px 3px 5px rgba(0,0,0,0.1);}
            #header.on :where(.logo dd, .gnb > li > a, .link_list > li > a, .lang dt, .all_cate){filter: none;}

        /* over */
            @media screen and (min-width:1024px){
                #header:hover .cont{background: var(--point-white); height: 80%;}
                #header:hover :where(.logo dd, .gnb > li > a, .link_list > li > a, .lang dt, .all_cate){filter: none;}
                #header .gnb > li:hover > a{color: var(--point-color01);}
                #header .gnb > li:hover .dep02{opacity: 1; pointer-events: all;}
                #header .gnb .dep02 > li:hover > a{background: var(--gray-bg01);}
                #header .link_list > li > a:hover:before{clip-path: circle(150% at 0 100%);}
                #header .link_list > li > a:hover span{filter: var(--filter-white);}
                #header .lang dd a:hover{color: var(--point-color01);}
                #header .lang dt:hover img{transform: rotateY(1turn);}
                #header .all_cate:hover:before{width: 60%;height: 60%;}
            }

    @media screen and (max-width:1760px) {
        #header .info{gap: 2vw;}
        #header .gnb > li{font-size: 90%;}
        #header .gnb > li > a{padding: 1.2vw;}
        #header .util{gap: 25px;}
        #header .link_list{gap: 15px;}
    }
    @media screen and (max-width:1500px) {
        #header .util{gap: 20px;}
        #header .link_list{display: none;}
        #header .all_cate{display: block;}
    }
    @media screen and (max-width:1023px) {
        #header{height: 130px;}
        #header .gnb{display: none;}
    }
    @media screen and (max-width:860px) {
        #header{height: 120px;}
    }
    @media screen and (max-width:640px) {
        #header{height: 110px;}
        #header .util{gap: 15px;}
        #header .lang dt{width: 32px;}
        #header .all_cate{width: 32px; height: 32px;}
    }
    @media screen and (max-width:479px) {
        #header{height: 100px;}
        #header .lang dt{width: 30px;}
        #header .all_cate{width: 30px; height: 30px;}
    }

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

	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); clip-path: inset(50% 50% 50% 50%); 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: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);}
    #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 screen and (min-width:1024px){
                #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 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;}
        #aside .link_list{margin-top: clamp(30px, 5vw, 50px);}
    }
    @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;}
        #aside .link_list > li > a{height: 45px;}
    }
    @media screen and (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;}
    }
    @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;}
        #aside .gnb .dep02 > li > a{font-size: 90%;}
    }



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

	MAIN | index.html

───────────────────────────────────────────────────────────*/
    #wrap:has(.main_content) #contents_wrap{width: 100%; max-width: 100%;}

    /* 비주얼 */
        .main_visual{position: relative; background: var(--black-color00);}
        .main_visual .slick-slide{position: relative; height: 940px; overflow: hidden;}
        .main_visual .thumb{position: relative; top:0; left:0; width: 100%; height: 100%; background: no-repeat center / cover; transition: all 5s;}
            .main_visual .active .thumb{transform: scale(1.1);}
        .main_visual .txtAni{opacity: 0; transform: translateY(70px); transition: all 1.2s; transition-delay: 0.2s;}
            .main_visual .txtAni + .txtAni{transition-delay: 0.4s;}
            .main_visual .active .txtAni{opacity: 1; transform: translate(0);}
        .main_visual .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5;}
        .main_visual .txt_box{position: absolute;top: 49.5%;left:50%;transform: translate(-50%, -50%);font-size: var(--title-20);color:var(--point-white);text-align: center;z-index: 3;padding: 0 70px;}
        .main_visual .txt_box h2{font-size: 300%;font-weight: 600;line-height: 1.22;letter-spacing: 0.02em;}
        .main_visual .txt_box h5{font-size: 150%;font-weight: 500;line-height: 1.4;letter-spacing: 0.02em;}
        .main_visual .txt_box h5 + h2{margin-top: 38px;}
        .main_visual .slick-arrow{position: absolute;top: 50%;left: 73px;transform: translateY(-50%);width: 60px;height: 60px;opacity: 0.5;font-size: 0;transition: all 0.4s;z-index: 7;}
            .main_visual .slick-arrow:before{position: absolute; content:''; width: 100%; height: 100%; border:2px solid var(--trans-color); border-top-color: var(--point-white); border-left-color: var(--point-white); box-sizing: border-box; top:50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg);}
            .main_visual .slick-arrow.slick-next{left:auto; right:73px; transform: translateY(-50%) scale(-1,-1);}
        .main_visual .slick-dots{position: absolute;left:50%;bottom:60px;transform: translateX(-50%);display: flex;align-items: center;font-size: 0;gap: 20px;}
        .main_visual .slick-dots li button{position: relative; display: block; width: 22px; height: 22px; border:1px solid var(--trans-color); border-radius: 100%; box-sizing: border-box; font-size: 0; opacity: 0.8;transition: all 0.4s;}
            .main_visual .slick-dots li button:before{position: absolute; content:''; width: 36%; height: 36%; background: var(--point-white); border-radius: 100%; top:50%; left:50%; transform: translate(-50%,-50%);}
            .main_visual .slick-dots li.slick-active button{border-color: var(--point-white); opacity: 1;}

        .main_visual .scr_dwn{position: absolute;left: 60px;bottom:60px;z-index: 7;display: flex;align-items: center;gap: 20px;writing-mode: tb-rl;transform: scale(-1, -1); cursor: pointer;}
        .main_visual .scr_dwn dt{position: relative;width: 40px;height: 40px;border: 1px solid rgba(255,255,255,0.5);border-radius: 100%;box-sizing: border-box;overflow: hidden;}
            .main_visual .scr_dwn dt:before{position: absolute;content:'';width: 4px;height: 4px;background: var(--point-white);border-radius: 100%;bottom: -10px;left: 50%;transform: translateX(-50%);box-sizing: border-box;}
        .main_visual .scr_dwn dd{font-size: var(--title-14);font-weight: 400;color: var(--point-white);letter-spacing: 0.02em;}

        .main_visual .scr_dwn dt:before{animation-name: scrDwn;animation-duration: 2s;animation-iteration-count:infinite;animation-fill-mode: forwards;transition-timing-function: linear;}
        @keyframes scrDwn {0% {bottom:-10px;}100% {bottom:calc(100% + 10px);}}


            /* over */
                @media screen and (min-width:1024px){
                    .main_visual .slick-arrow:hover{opacity: 1;}
                    .main_visual .slick-dots li button:hover{opacity: 1; border-color: var(--point-white);}
                }

        @media screen and (max-width:1400px){
            .main_visual .slick-arrow{left: 43px;}
                .main_visual .slick-arrow.slick-next{right:73px;}
            .main_visual .slick-dots{bottom: 30px;}
            .main_visual .scr_dwn{left:30px; bottom:30px;}
        }
        @media screen and (max-width:1023px){
            .main_visual .slick-slide{height: clamp(450px, 92vw, 940px);}
            .main_visual .txt_box{top:50%;}
            .main_visual .txt_box h5 + h2{margin-top: clamp(10px, 3.8vw, 38px);}
            .main_visual .slick-arrow{width: 50px; height: 50px;}
            .main_visual .scr_dwn{gap:15px;}
            .main_visual .scr_dwn dt{width: 35px; height: 35px;}
        }
        @media screen and (max-width:860px){
            .main_visual .txt_box{padding: 0;}
            .main_visual .txt_box h2{font-size: 270%;}
            .main_visual .txt_box h5{font-size: 140%;}
            .main_visual .slick-arrow{opacity: 0; pointer-events: none;}
            .main_visual .slick-dots{bottom: 15px; gap: 15px;}
            .main_visual .slick-dots li button{width: 20px; height: 20px;}
            .main_visual .scr_dwn{left:15px; bottom:15px;}
            .main_visual .scr_dwn dt{width: 30px; height: 30px;}
                .main_visual .scr_dwn dt:before{width: 3px; height: 3px;}
        }
        @media screen and (max-width:640px){
            .main_visual .txt_box h2{font-size: 240%;}
            .main_visual .txt_box h5{font-size: 130%;}
            .main_visual .slick-dots li button{width: 18px; height: 18px;}
            .main_visual .scr_dwn dt{width: 25px; height: 25px;}
        }
        @media screen and (max-width:479px){
            .main_visual .txt_box h2{font-size: 210%;}
            .main_visual .txt_box h5{font-size: 120%;}
            .main_visual .slick-dots{bottom: 20px; gap: 10px;}
            .main_visual .slick-dots li button{width: 16px; height: 16px;}
        }
        @media screen and (max-width:360px){
            .main_visual .txt_box h2{font-size: 180%;}
            .main_visual .txt_box h5{font-size: 110%;}
        }

    /* 인트로 */
        .main_intro{position: relative;padding:180px 0 250px;box-sizing: border-box;background: url('../images/skin/main_intro_bg.png') no-repeat center bottom / cover;}
        .main_intro .ab_list{display: flex; flex-wrap: wrap; gap: 70px;box-sizing: border-box;}
        .main_intro .ab_list > lI{position: relative; width: calc(100% / 3 - 46.67px); box-sizing: border-box; }
        .main_intro .ab_list .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5;}
        .main_intro .ab_list .thumb{position: relative;padding-bottom: 615px;border-radius: 20px;overflow: hidden;border:1px solid var(--trans-color);transition: all 0.4s;}
        .main_intro .ab_list .thumb img{position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s;}
        .main_intro .ab_list .txt_wrap{position: absolute;top:0;left:0;width: 100%;height: 100%;padding: 59px 40px;box-sizing: border-box;z-index: 3;font-size: var(--title-20);color: var(--point-white);display: flex;flex-direction:column;gap: 21px;}
        .main_intro .ab_list .txt_wrap em{font-size: 110%; font-weight: 400; }
        .main_intro .ab_list .txt_wrap .desc{font-family: var(--font-type02);}
        .main_intro .ab_list .txt_wrap .desc dt{font-size: 225%;font-weight: 600;line-height: 1.2;letter-spacing: -0.05em;}
            .main_intro .ab_list .txt_wrap .desc dt + dd{margin-top: 23px;}
        .main_intro .ab_list .txt_wrap .desc dd{font-size: 100%;font-weight: 400;line-height: 1.6;letter-spacing: -0.03em;}
        .main_intro .ab_list .plus{position: absolute;right:40px;bottom:40px;display: flex;align-items: center;justify-content: center;width: 80px;height: 80px;background: var(--point-color01);border-radius: 100%;z-index: 4; opacity: 0; transform: translateY(20px); transition: all 0.4s;}
		.main_intro .ab_list .plus img{width:28px;}

            /* over */
                @media screen and (min-width:1024px){
                    .main_intro .ab_list > lI:hover .thumb{border-color: var(--point-white); box-shadow: 0px 8px 0px var(--border-color02);}
                    .main_intro .ab_list > lI:hover .thumb img{transform: scale(1.1);}
                    .main_intro .ab_list > lI:hover .plus{opacity: 1; transform: translate(0);}
                }

        @media screen and (max-width:1600px){
            .main_intro .ab_list{gap: 4.5vw;}
            .main_intro .ab_list > lI{width: calc(100% / 3 - 3vw);}
        }
        @media screen and (max-width:1200px){
            .main_intro{padding: clamp(70px, 15vw, 180px) 0 clamp(100px, 20vw, 250px);}
            .main_intro .ab_list{gap: 20px;}
            .main_intro .ab_list > lI{width: calc(100% / 3 - 13.34px);}
            .main_intro .ab_list .thumb{padding-bottom: 146%;}
        }
        @media screen and (max-width:1023px){
            .main_intro .ab_list{gap: 15px;}
            .main_intro .ab_list > lI{width: calc(100% / 2 - 7.5px);}
            .main_intro .ab_list .txt_wrap{gap: clamp(10px, 2vw, 21px); padding:clamp(30px, 6vw, 59px) clamp(25px, 4vw, 40px);}
            .main_intro .ab_list .txt_wrap .desc dt{font-size: 210%;}
            .main_intro .ab_list .txt_wrap .desc dt + dd{margin-top: clamp(10px, 2.2vw, 23px);}
        }
        @media screen and (max-width:860px){
            .main_intro .ab_list .txt_wrap em{font-size: 100%;}
            .main_intro .ab_list .txt_wrap .desc dt{font-size: 200%;}
            .main_intro .ab_list .txt_wrap .desc dd{font-size: 90%;}
        }
        @media screen and (max-width:640px){
            .main_intro .ab_list .thumb{border-radius: 10px;}
            .main_intro .ab_list .txt_wrap .desc dt{font-size: 170%;}
        }
        @media screen and (max-width:479px){
            .main_intro .ab_list > lI{width: 100%;}
            .main_intro .ab_list .thumb{padding-bottom: 250px;}
        }

    /* 웨어플루 */
        .main_fluidic{position: relative;padding: 135px 0;}
        .main_fluidic .cont{position: relative; text-align: center;}
            .main_fluidic .cont:before{position: absolute;content:'';width: 80vw;height: 80vw;max-width: 244px;max-height: 244px;border-radius: 100%;background: var(--point-color01);opacity: 0.1;filter: blur(50px);top:50%;left:50%;transform: translate(-50%, -50%);}
            .main_fluidic .cont.aos-animate:before{max-width: 512px; max-height: 512px; transition: all 3s;}
        .main_fluidic .circle_wrap{position: relative;transform: rotate(8deg);}
        .main_fluidic .circle{position: absolute;top:50%;left:50%;transform: translate(-50%, -50%) skew(-63deg) rotate(30deg);width: 40vw;height: 40vw;max-width: 450px;max-height: 450px;border-radius: 100%;box-shadow: inset 0 0 0 1px rgba(204,204,204,0.4);box-sizing: border-box;}
        .main_fluidic .circle .item{position: absolute; top:0; left:0; width: 100%; height: 100%;}
            .main_fluidic .circle .item:before, .main_fluidic .circle .item:after{position: absolute;content:'';width: 6px;height: 6px;border-radius: 100%;background: var(--point-color01);top: -3px;left:50%;margin-left: -3px;transform: skew(-75deg, 33deg);}
            .main_fluidic .circle .item:after{top:auto;bottom: -3px;}

            .main_fluidic .circle .item{animation-name: main_fluidic; animation-duration:180s; animation-iteration-count:infinite; transition-timing-function:linear;}
            @keyframes main_fluidic {0% {transform:rotate(0);}100% {transform:rotate(10800deg);}}

        .main_fluidic .stroke_txt{position: relative;display: inline-block;max-width: 90%;z-index: 3;}
        .main_fluidic .stroke_txt img{transition: all 0s;}
        .main_fluidic .stroke_txt .fill{position: absolute; top:0; left:0; clip-path: inset(0 100% 0 0);}
            .main_fluidic .cont.aos-animate .stroke_txt img:not(.fill){transition: all 0.4s; transition-delay: 2.6s; opacity: 0;}
            .main_fluidic .cont.aos-animate .stroke_txt .fill{clip-path: inset(0 0 0 0); transition: all 3s;}

        @media screen and (max-width:1023px){
            .main_fluidic{padding:clamp(70px, 13.5vw, 135px) 0;}
        }
        @media screen and (max-width:640px){
            .main_fluidic .cont:before{max-width: 40vw; max-height: 40vw;}
            .main_fluidic .cont.aos-animate:before{max-width: 80vw; max-height: 80vw;}
            .main_fluidic .circle .item:before, .main_fluidic .circle .item:after{width: 3px; height: 3px; top:-1px; margin-left: -1px;}
            .main_fluidic .circle .item:after{top:auto; bottom:-1px;}
        }

    /* 타이틀 */
        .main_title{position: relative; font-size: var(--title-20); box-sizing: border-box;}
            .main_title.hd{margin-bottom: 60px;}
        .main_title h2{font-size: 250%;font-weight: 700;color: var(--black-color02);line-height: 1.2;letter-spacing: 0.02em;}
        .main_title h6{font-size: 110%; font-weight: 500; color: var(--black-color02); line-height: 1.4;} 
            .main_title h6 + h2{margin-top: 23px;}
        .main_title h6 em{font-weight: inherit; color: var(--point-color01); font-family: var(--font-type02);}

        @media screen and (max-width:1023px){
            .main_title.hd{margin-bottom: clamp(20px, 6vw, 60px);}
            .main_title h6 + h2{margin-top: clamp(12px, 2.3vw, 23px);}
        }
        @media screen and (max-width:640px){
            .main_title h2{font-size: 230%;}
        }
        @media screen and (max-width:479px){
            .main_title h2{font-size: 200%;}
            .main_title h6{font-size: 100%;}
        }

    /* 인증 수상 */
        .main_pr{position: relative;padding-top: 170px;}
        .main_pr .gell_wrap{position: relative; box-sizing: border-box;}
        .main_pr .gellSwiper{overflow: hidden; padding-bottom: 20px; box-sizing: border-box;}
        .main_pr .gellSwiper .swiper-slide{position: relative; padding:10px; box-sizing: border-box;  border-radius: 20px; overflow: hidden; transition: all 0.4s; border: 1px solid var(--trans-color); height: auto;}
            .main_pr .gellSwiper .swiper-slide:before, .main_pr .gellSwiper .swiper-slide:after{position: absolute;content:'';width: 100%;height: calc(100% + 1px);background: linear-gradient(180deg, #dcdcdc 20.38%, #fafafa 100%);border-radius: inherit;top:0;left:0;display: block;}
            .main_pr .gellSwiper .swiper-slide:after{background: linear-gradient(180deg, #fafafa 70%, #e2e2e2 100%);z-index: 2;opacity: 0;transition: all 0.4s;}
        .main_pr .gellSwiper .link{position: absolute; top: 0; left:0; width: 100%; height: 100%; z-index: 5;}
        .main_pr .gellSwiper .thumb{position: relative;font-size: 0;padding-bottom: 100%;border-radius: inherit;overflow: hidden; z-index: 3;}
            .main_pr .gellSwiper .thumb:before{position: absolute; content: ''; width: 70px; height: 70px; border-radius: 100%; background: rgba(0,0,0,0.7) url('../images/skin/main_plus.svg') no-repeat center / 20px auto; top:50%; left:50%; transform: translate(-50%, -50%); z-index: 3; opacity: 0; margin-top: 30px; transition: all 0.4s;}
        .main_pr .gellSwiper .thumb img{position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: cover;}
        .main_pr .gellSwiper .cont{position: relative;font-size: var(--title-20);padding: 25px 20px 95px 20px;box-sizing: border-box; z-index: 3;}
        .main_pr .gellSwiper .desc{font-family: var(--font-type02);}
        .main_pr .gellSwiper .desc :where(dt, dd){white-space:normal; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
        .main_pr .gellSwiper .desc dt{font-weight: 400;color: var(--black-color02);letter-spacing: -0.03em;}
        .main_pr .gellSwiper .desc dt + dd{margin-top: 17px;}
        .main_pr .gellSwiper .desc dd{font-size: 90%;font-weight: 400;color: var(--black-color06);letter-spacing: -0.03em;}
        .main_pr .gellSwiper .date{position: absolute;left: 20px;bottom: 19px;font-size: 90%;font-weight: 400;color: var(--black-color08);letter-spacing: 0.01em;}
        .main_pr [class^="swiper-button"]{position: absolute;top:50%;left:auto;right: calc(100% + 40px);width: 60px;height: 60px;border-radius: 100%;background: var(--gray-bg01);border-radius: 100%;margin: 0;transform: translateY(-50%); transition: all 0.4s;}
            .main_pr [class^="swiper-button"]:before{position: absolute;content:'';width: 13px;height: 13px;border: 2px solid var(--trans-color);border-top-color: var(--black-color06);border-left-color: var(--black-color06);top:50%;left: 55%;transform: translate(-50%, -50%) rotate(-45deg);border-radius: 2px;box-sizing: border-box; transition: all 0.4s;}
            .main_pr [class^="swiper-button"]:after{display: none;}
            .main_pr [class^="swiper-button"].swiper-button-next{right:auto;left: calc(100% + 40px);transform: translateY(-50%) scale(-1, -1);}
            .main_pr [class^="swiper-button"].swiper-button-disabled{opacity: 0;}


            /* over */
                @media screen and (min-width:1024px){
                    .main_pr .gellSwiper .swiper-slide:hover{box-shadow: 0 8px 0 #f0f0f0; border-color: var(--point-white);}
                    .main_pr .gellSwiper .swiper-slide:hover:after{opacity: 1;}
                    .main_pr .gellSwiper .swiper-slide:hover .thumb:before{margin-top: 0; opacity: 1;}
                    .main_pr [class^="swiper-button"]:hover{background: var(--point-color01);}
                    .main_pr [class^="swiper-button"]:hover:before{border-top-color: var(--point-white);border-left-color: var(--point-white);}
                }

        @media screen and (max-width:1640px){
            .main_pr .gell_wrap{padding: 0 80px;}
            .main_pr [class^="swiper-button"]{right:auto; left: 0;}
            .main_pr [class^="swiper-button"].swiper-button-next{left:auto; right:0;}
        }
        @media screen and (max-width:1023px){
            .main_pr{padding-top: clamp(70px, 17vw, 170px);}
            .main_pr .gellSwiper{padding-bottom: 0;}
            .main_pr .gell_wrap{padding: 0 70px;}
            .main_pr [class^="swiper-button"]{width: 55px; height: 55px;}
        }
        @media screen and (max-width:860px){
            .main_pr .gell_wrap{padding: 0 65px;}
            .main_pr .gellSwiper .cont{padding:20px 15px 85px 15px;}
            .main_pr .gellSwiper .desc dt + dd{margin-top: 12px;}
            .main_pr .gellSwiper .date{left:15px; bottom:15px;}
            .main_pr [class^="swiper-button"]{width: 50px; height: 50px;}
        }
        @media screen and (max-width:640px){
            .main_pr .gell_wrap{padding: 0;}
            .main_pr .gellSwiper{overflow: visible;}
            .main_pr .gellSwiper .swiper-slide{border-radius: 10px;}
            .main_pr .gellSwiper .cont{padding:15px 10px 75px 10px;}
            .main_pr .gellSwiper .desc dt + dd{margin-top: 8px;}
            .main_pr .gellSwiper .date{left:10px; bottom:10px;}
            .main_pr [class^="swiper-button"]{display: none;}
        }

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

	FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    #footer{position: relative; background: url('../images/skin/ftr_bg.jpg') no-repeat center / cover; padding:60px 0; box-sizing: border-box;}
    #footer .cont{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 20px 30px;align-items: center;}
    #footer .logo{filter: var(--filter-white);}
    #footer .link_list{display: flex; font-size: var(--title-20);}
    #footer .link_list > li{font-size: 90%;color: var(--point-white);display: inline-flex;align-items: center;gap: 12px;}
    #footer .link_list > li:not(:last-child):after{display: inline-flex;content:'';width: 2px;height: 2px;border-radius: 100%;background: var(--point-white);margin-right: 12px;}
    #footer .link_list > li > a{display: block; font-weight: 300;}
    #footer .link_list > li > a em{font-weight: 400;}
    #footer .info{border-top: 1px solid rgba(255,255,255,0.2);padding-top: 50px;margin-top: 50px;}
    #footer .addr_list > li{display: flex; flex-wrap: wrap; gap: 0 30px;}
    #footer :where(.desc, .copy){display: flex; font-size: var(--title-20);}
    #footer :where(.desc, .copy) :where(dt, dd){font-size: 90%;font-weight: 300;color: var(--point-white);line-height: 2;letter-spacing: 0.02em;}
    #footer .desc{gap: 4px;}
    #footer .desc dt{flex-shrink: 0;}
    #footer .copy{flex-wrap: wrap;opacity: 0.7;gap: 0 20px;margin-top: 30px;letter-spacing: 0.01em;}
    #footer .copy :is(dt, dd){font-weight: 200;}

    .quick_list{position: fixed;right:60px;bottom:60px;z-index: 9;display: flex;flex-direction: column;gap: 20px;align-items: flex-end;transition: all 0.6s;opacity: 0;pointer-events: none;transform: rotateY(0.5turn);}
        #wrap:has(#header.on) .quick_list{opacity: 1;pointer-events: all;transform: rotateY(0turn);}
    .quick_list > li > a{transition: all 0.4s;position: relative;display: flex;background: var(--black-color11);box-shadow: 0 0 20px rgba(0,0,0,0.25); width: 50px; height: 50px; border-radius: 50px;justify-content: flex-end;overflow: hidden;}
    .quick_list > li > a span{display: flex;align-items: center;justify-content: center;width: 100%;max-width: 50px;height: 100%;border-radius: inherit;padding: 13px;box-sizing: border-box;}
    
    .quick_list .inquiry a{background: var(--point-color01);}
    .quick_list .inquiry a em{position: absolute;top:50%;right: 0;transform: translateY(-50%);height: 50px;display: flex;align-items: center;padding-right: 50px;box-sizing: border-box;background: var(--point-color01);border-radius: inherit;font-size: var(--title-16);font-weight: 500;color: var(--point-white);}
    .quick_list .inquiry a img{position: relative; z-index: 3;}

        /* over */
            @media screen and (min-width:1024px){
                .quick_list .inquiry a:hover{width: 130px;}
            }

    @media screen and (max-width:1400px){
        .quick_list{right:30px; bottom:30px; gap: 15px;}
    }
    @media screen and (max-width:860px){
        #footer .info{padding-top: 40px; margin-top: 40px;}

        .quick_list{right:15px; bottom:15px; gap: 10px;}
    }
    @media screen and (max-width:640px){
        #footer{padding: 50px 0;}
        #footer .info{padding-top: 30px; margin-top: 30px;}
        #footer .addr_list > li{gap: 0 25px;}
        #footer :where(.desc, .copy) :where(dt, dd){line-height: 1.7;}
        #footer .copy{gap: 0 15px;}

        .quick_list > li > a{width: 45px; height: 45px; box-shadow: 0 0 10px rgba(0,0,0,0.25);}
    }
    @media screen and (max-width:479px){
        #footer .info{padding-top: 20px; margin-top: 20px;}
        #footer .addr_list > li{gap: 0 20px;}

        .quick_list > li > a{width: 40px; height: 40px;}
    }