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

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

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

/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
	#wrap {position:relative;width:100%; box-sizing: border-box; overflow: clip;} 
    #container, .w_custom{position: relative; width: calc(100% - 60px); max-width: 1400px; margin-inline: auto; box-sizing: border-box;}
    .w_custom.w_1720{max-width: 1720px;}
	.page_view{text-align: center;}

    @media (max-width:860px){
        #container, .w_custom{width: calc(100% - 30px);}
    }
    @media (max-width:320px){
        #container, .w_custom{width: calc(100% - 15 px);}
    }

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

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

───────────────────────────────────────────────────────────*/
	#header{position: sticky; top:0; z-index: 100; width: 100%; height: 100px; background: var(--point-white); box-sizing: border-box; transition: all 0.4s;box-shadow: 0 1px 0 var(--border-color01);}
        #header.on{}
        
    #header .w_custom{display: flex;align-items: center;justify-content: space-between;gap: 15px;height: 100%;}
    #header .logo{height: 100%; box-sizing: border-box; font-size: 0;}
    #header .logo a{position: relative;display: inline-flex;width: 149px;align-items: center;height: 100%;box-sizing: border-box;padding-block: 15px;}
    #header .logo img{width: 100%; transition: opacity 0.4s;}
    #header .logo .wh{position: absolute;top:50%;left:0;transform: translateY(-50%); opacity: 0;}

    #header .gnb{position: absolute;top:0;left:50%;width: calc(100% - 400px);height: 100%;transform: translateX(-50%);display: flex;justify-content: center;box-sizing: border-box;font-size: var(--title-20);text-align: center;}
    #header .gnb > li{position: relative;height: 100%;box-sizing: border-box;font-size: inherit;font-weight: 500;color: var(--black-color01);}
    #header .gnb > li > a{display: flex; align-items: center; height: 100%;  box-sizing: border-box; padding-inline: clamp(10px, 2.1vw, 40px); transition: all 0.4s;}
        #header .gnb > li.active > a{color: var(--point-color01);}
    #header .gnb .dep02{position: absolute; top:100%; left:50%; transform: translateX(-50%); width: 150px; padding-block: 10px; background: var(--point-white); box-sizing: border-box; border: 1px solid var(--border-color01); opacity: 0; pointer-events: none; transition: all 0.4s; display: none;}
    #header .gnb .dep02 > li{position: relative;font-size: 80%;font-weight: 500;color: var(--black-color08);}
    #header .gnb .dep02 > li > a{display: block;padding:7px 25px;box-sizing: border-box;transition: all 0.4s;}
    #header .link_wrap{display: flex; align-items: center; gap: 30px;}
    .icon_btn{display: flex;align-items: center;justify-content: center;text-align: center;gap: 10px;font-size: var(--title-20);padding:17px 30px 15px;border-radius: 50px;background: var(--black-color01);box-sizing: border-box; transition: all 0.4s;}
    .icon_btn span{font-size: 90%; font-weight: 500; color: var(--point-white);}
    #header .allCate{display: none;flex-direction: column;justify-content: space-between;width: 30px;height: 24px;}
    #header .allCate span{width: 100%; height: 2px; background: var(--black-color01);}

    #nav{position: absolute;top:100%;left:0;width: 100%;height: auto;box-sizing: border-box;opacity: 0;pointer-events: none;transition: all 0.4s;} 
        #nav:has(.all_gnb > li.on){opacity: 1; pointer-events: all;}
    #nav .w_custom{display: block;}
    #nav .all_gnb{display: flex; flex-wrap: wrap; justify-content: center; font-size: var(--title-20); text-align: center; box-sizing: border-box;}
    #nav .all_gnb > li{position: absolute;top:0;left:50%;transform: translateX(-50%);font-size: inherit;font-weight: 500;color: var(--black-color01);opacity: 0;pointer-events: none; transition: all 0.4s;width:100%;}
        #nav .all_gnb > li.on{opacity: 1; pointer-events: all;}
    #nav .all_gnb > li > a{display: none;}
    #nav .all_gnb .dep02{display: flex;justify-content: center;padding-block: 30px;}
    #nav .all_gnb .dep02:not(:has(> li:nth-child(2))){display: none;}
    #nav .all_gnb .dep02:before{position: absolute;content:'';width: 200vw;height: 100%;background: var(--point-white);top:0;left:50%;translate: -50%;border-top: 1px solid var(--border-color01);box-sizing: border-box;}
    #nav .all_gnb .dep02 > li > a{position: relative;display: block;padding-inline: clamp(10px, 2.1vw, 40px);transition: all 0.4s; font-size: 90%;}
    #nav .all_gnb .dep03{padding-block: 10px;}
    #nav .all_gnb .dep03 > li{position: relative; font-size: 80%; font-weight: 500; color: var(--black-color08);}
    #nav .all_gnb .dep03 > li > a{display: block;padding:7px 25px;transition: all 0.4s;}


        /* color */
            .vs_wrap #header :where(.gnb, .allCate){filter: var(--filter-white); transition: all 0.4s;}
            

        /* 메인 */
            .vs_wrap #header{position: fixed; left:0; background: var(--trans-color);box-shadow:none;}
            .vs_wrap #header .logo img:not(.wh){opacity: 0;}
            .vs_wrap #header .logo .wh{opacity: 1;}

            .vs_wrap #header.on{background: var(--point-white);box-shadow: 0 1px 0 var(--border-color01);}
            .vs_wrap #header.on :where(.gnb, .allCate){filter: none;}
            .vs_wrap #header.on .logo img:not(.wh){opacity: 1;}
            .vs_wrap #header.on .logo .wh{opacity: 0;}
            
        /* over */
            @media (hover:hover) and (pointer:fine){
                .vs_wrap #header:hover{background: var(--point-white);}
                .vs_wrap #header:hover .logo img:not(.wh){opacity: 1;}
                .vs_wrap #header:hover .logo .wh{opacity: 0;}
                .vs_wrap #header:hover :where(.gnb, .allCate){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{color: var(--black-color01);}
                .icon_btn:hover{background: var(--point-color01);}

                #nav .all_gnb .dep02 > li:hover > a{color: var(--point-color01);}
                #nav .all_gnb .dep03 > li:hover > a{color: var(--black-color01);}
            }

    @media (max-width:1100px){
        #header .gnb > li{font-size: 90%;}
    }
    @media (max-width:1023px){
        #header{height: clamp(65px, 10vw, 100px);}
        #header .logo a{width: clamp(110px, 14.9vw, 149px);}
        #header .gnb{display: none;}
        #header .link_wrap{gap: clamp(20px, 3vw, 30px);}
        .icon_btn{padding: clamp(12px, 1.7vw, 17px) clamp(20px, 3vw, 30px) clamp(11px, 1.5vw, 15px);}
        .icon_btn img{width: clamp(16px, 2vw, 20px);}
        #header .allCate{display: inline-flex; width: clamp(26px, 4vw, 30px); height: clamp(20px, 3.4vw, 24px);}
    }
    @media (max-width:479px){
        #header .icon_btn{display: none;}
    }

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

	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-block: 10vh;box-sizing: border-box;opacity: 0;clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);transition: all 0.6s; }
        #aside.on{opacity: 1;clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
    body:has(#aside.on){overflow: hidden; touch-action: none;}
    #aside .w_custom{flex-shrink: 0;}
    #aside .gnb{width: 100%;font-size: var(--title-20);letter-spacing: 0;font-family: var(--font-type02);}
    #aside .gnb > li{display: flex; align-items: center; justify-content: space-between; gap: 30px; color: var(--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;justify-content: flex-end;}
	#aside .gnb .dep02 > li{display:flex;align-items: center;flex-wrap: wrap;}
    #aside .gnb .dep02 > li > a{display: inline-block;font-size: 100%;font-weight: 300;padding:10px 0;transition: all 0.4s;opacity: 0.6;}
	#aside .gnb .dep02 > li > a:has(~ .dep03){padding-right: 25px;}
    #aside .gnb .dep02 > li:not(:last-child):after{display: inline-flex; content:'/'; margin:0 20px; opacity: 0.6;} 
    #aside .gnb .dep02 > li:has(.dep03){width: 100%; justify-content: inherit;}
    #aside .gnb .dep02 > li:has(.dep03):after{display: none;}
    #aside .gnb .dep03{display: flex;flex-wrap: wrap;gap: 0 20px;}
	#aside .gnb .dep03 > li > a{display:block;font-size: 90%;font-weight: 400;opacity: 0.4;padding-block: 8px;}
    #aside .utility{position: absolute;top:50px;right:50px;display: flex;align-items: center;gap: 30px;}
    #aside .close_btn{position: relative;width: 40px;height: 40px;z-index: 9;}
    #aside .close_btn span{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%) rotate(45deg); width: 100%; height: 2px; background: var(--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 (hover:hover) and (pointer:fine){
                #aside .gnb > li:hover > a{color: var(--point-color01);}
                #aside .gnb .dep02 > li > a:hover{opacity: 1;}
                #aside .link_list > li > a:hover:before{clip-path: circle(150% at 0 100%);}
            }

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

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

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

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

	MAIN | index.html

───────────────────────────────────────────────────────────*/
    /* 비주얼 */
        .main_visual {position:relative; box-sizing: border-box; background: var(--black-color01);}
        .main_visual .slick-slide {position: relative; height: 980px; overflow: hidden;}
		.main_visual .link{position: absolute; inset:0; z-index:5;}
        .main_visual .thumb{position: relative; display: block; width: 100%; height: 100%; background: no-repeat center / cover;}
        .main_visual .txt_box{position: absolute;top: 45%;left:50%;transform: translate(-50%, -50%);z-index: 3;font-size: var(--title-20);color: var(--point-white);display: flex;flex-direction: column;align-items: flex-start;gap: 22px;}
        .main_visual .txtAni{transform: translateX(70px); opacity: 0;}
        .main_visual .txt_box h2{font-size: 340%;font-weight: 300;line-height: 1.29;letter-spacing: -0.03em;}
        .main_visual .txt_box h2 strong{display: inline-block; font-weight: 600;}
        .main_visual .txt_box h5{font-size: 150%; font-weight: 500; color: rgba(255,255,255,0.6); font-family: var(--font-type02);}

        .main_visual .controller{position: absolute;bottom: 80px;left:50%;transform: translateX(-50%);display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 15px;z-index: 9;}
        .main_visual .controller .cont{display: flex;align-items: center;flex-wrap: wrap;gap: 16px;}
        .main_visual .arw{position: relative; width: 16px; height: 16px;}
            .main_visual .arw:before{position: absolute;content:'';width: 80%;height: 80%;border:solid var(--point-white);border-width:0 0 2px 2px;box-sizing: border-box;top:50%;left: 60%;transform: translate(-50%, -50%) rotate(45deg);}
            .main_visual .arw.next{transform: scale(-1,-1);}
        .main_visual .dots_box{margin-right: 10px;}
        .main_visual .slick-dots{display: flex; gap: 10px; font-size: 0; }
        .main_visual .slick-dots button{position: relative; width: 70px; height: 4px; background: rgba(255,255,255,0.4);}
            .main_visual .slick-dots button:before{position: absolute; content:''; top:0; left:0; width: 0; height: 100%; background: var(--point-white);}
            .main_visual .slick-dots .slick-active button:before{animation-name: vsDots; animation-duration:8s; transition-timing-function:linear; animation-fill-mode: forwards;}
            @keyframes vsDots {0% {width: 0;}100% {width: 100%;}}
            .main_visual:has(.slickBtn.play) .slick-dots .slick-active button:before{animation: none; width: 100%;}

        .main_visual .slickBtn{position: relative;width: 9px;height: 14px;font-size: 0;margin-right: 16px;}
            .main_visual .slickBtn:before, .main_visual .slickBtn:after{position: absolute; content:''; width: 3px; height: 100%; background: var(--point-white); top:0; left:0;}
            .main_visual .slickBtn:after{left: auto; right:0;}
            .main_visual .slickBtn.play:before{width: 100%; clip-path: polygon(0 0, 0% 100%, 100% 50%);}
            .main_visual .slickBtn.play:after{opacity: 0;}

        .main_visual .scr_dwn{position: relative;display: flex;align-items: center;gap: 12px;font-size: var(--title-20);cursor: pointer;}
		.main_visual .scr_dwn dt{font-size: 90%;font-weight: 400;color: var(--point-white);font-family: var(--font-type02);line-height: 1;letter-spacing: 0;}
		.main_visual .scr_dwn dd{position: relative; width: 34px;height: 34px;border: 2px solid rgba(255,255,255,0.4);box-sizing: border-box;border-radius: var(--radius-10); overflow: hidden;}
            .main_visual .scr_dwn dd:before{position: absolute; content:''; width: 6px; height: 6px; border-radius: 100%; background: var(--point-white); top:-10px; left:50%; transform: translateX(-50%);}
            .main_visual .scr_dwn dd:before{animation-name: vsScrDwn; animation-duration:2s; animation-iteration-count:infinite; transition-timing-function:linear;}
            @keyframes vsScrDwn {0% {top: -10px;}100% {top: calc(100% + 10px);}}
            

            /* active */
                .main_visual .active .thumb{transform: scale(1.1); transition: all 8s; transition-timing-function: linear;}
                .main_visual .active .txtAni{transform: translate(0); opacity: 1; transition: all 1.2s; transition-delay: 0.2s;}
                .main_visual .active .txtAni:nth-child(2){transition-delay: 0.4s;}

        @media (max-width:1023px){
            .slick-initialized .slick-slide{height: clamp(550px, 98vw, 980px);}
            .main_visual .txt_box{gap: clamp(7px, 2.2vw, 22px);text-wrap: balance;}
            .main_visual .txt_box h2{font-size: 310%;}
            .main_visual .txt_box h5{font-size: 130%;}
            .main_visual .controller{bottom: clamp(30px, 8vw, 80px);}
            .main_visual .controller .cont{gap: clamp(10px, 2vw, 16px);}
            .main_visual .arw{width: clamp(14px, 2vw, 16px);height: clamp(14px, 2vw, 16px);}
            .main_visual .slick-dots button{width: clamp(50px, 8vw, 70px); height: clamp(3px, 0.8vw, 4px);}
            .main_visual .slickBtn{margin-right: clamp(5px, 2vw, 16px);}
            .main_visual .scr_dwn dd{width: clamp(26px, 3.4vw, 34px);height: clamp(26px, 3.4vw, 34px);}
            .main_visual .scr_dwn dd:before{width: clamp(4px, 1vw, 6px); height: clamp(4px, 1vw, 6px);}
        }
        @media (max-width:640px){
            .main_visual .txt_box h2{font-size: 280%;}
            .main_visual .txt_box h5{font-size: 120%;}
            .main_visual .scr_dwn{display: none;}
        }
        @media (max-width:479px){
            .main_visual .txt_box h2{font-size: 240%;}
            .main_visual .txt_box h5{font-size: 110%;}
        }

    /* 공통 */
        .main_content{position: relative; box-sizing: border-box;}
        .main_title{position: relative;font-size: var(--title-20);box-sizing: border-box;display: flex;flex-direction: column;align-items: flex-start;gap: 21px;}
            .main_title.hd{padding-block: 157px 55px;}
            .main_title.cen{text-align: center; align-items: center;}
        .main_title h2{font-size: 260%;font-weight: 700;color: var(--black-color01);line-height: 1.38;letter-spacing: -0.03em;}
        .main_title h2 em{font-weight: inherit; color: var(--point-color01);}
        .main_title h3{font-size: 240%;font-weight: 600;color: var(--black-color01);line-height: 1.41;letter-spacing: -0.03em;}
        .main_title h5{font-size: 120%; font-weight: 400; color: var(--black-color05); line-height: 1.4; letter-spacing: -0.03em;}
        .main_title h6{font-size: 110%; font-weight: 400; color: var(--black-color05); line-height: 1.4; letter-spacing: -0.03em;}
            .main_title h6 + h3{margin-top: 7px;}
        .main_title h6 em{font-weight: 600; color: var(--point-color09);}
		.main_title .arw_more{margin-top:15px;}

        .arw_more{position: relative;display: inline-flex;align-items: center;justify-content: center;gap: 36px;padding: 13px;padding-left: 25px;font-size: var(--title-20);border-radius: 50px;box-sizing: border-box;overflow: hidden;}
            .arw_more:before{position: absolute; content:''; top:1px; left:1px; width: calc(100% - 2px); height: calc(100% - 2px); border:2px solid var(--point-color01); box-sizing: border-box; border-radius: inherit;}
            .arw_more:after{position: absolute; content:''; inset: 0; background: var(--point-color01); clip-path: circle(0 at 100% 100%); transition: all 0.6s;}
        .arw_more span{position: relative; font-size: inherit; font-weight: 600; color: var(--point-color01); line-height: 1; transition: all 0.4s; z-index: 3;}
        .arw_more em{position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--point-color01); border-radius: 100%; padding:5px; box-sizing: border-box; transition: all 0.4s; z-index: 3;}
        .arw_more em img{filter: var(--filter-white);}

            .arw_more.wh:before{border-color: var(--point-white);}
            .arw_more.wh span{filter: var(--filter-white);}
            .arw_more.wh em{background: var(--point-white);}
            .arw_more.wh em img{filter: none;}

            @media (hover:hover) and (pointer:fine){
                .arw_more:hover:after{clip-path: circle(150% at 100% 100%);}
                .arw_more:hover span{filter: var(--filter-white); transition-delay: 0.2s;}
                .arw_more:hover em{background: var(--point-white);}
                .arw_more:hover em img{filter: none;}
            }

        @media (max-width:1023px){
            .main_title{gap: clamp(10px, 2.1vw, 21px); text-wrap: balance;}
            .main_title.hd{padding-block: clamp(70px, 15.7vw, 157px) clamp(25px, 5.5vw, 55px);}
            .main_title h2{font-size: 230%;}
            .main_title h3{font-size: 210%;}
            .main_title h5{font-size: 110%;}
            .main_title h6 + h3{margin-top:clamp(0px, 1vw, 7px)}
            .main_title .arw_more{margin-top:clamp(10px, 1.5vw, 15px);}

            .arw_more{gap: clamp(20px, 3.6vw, 36px); padding:clamp(10px, 2vw, 13px); padding-left: clamp(20px, 2.5vw, 25px);}
            .arw_more em{width: clamp(30px, 4vw, 40px); height: clamp(30px, 4vw, 40px);;}
        }
        @media (max-width:640px){
            .main_title h2{font-size: 210%;}
            .main_title h3{font-size: 190%;}
            .main_title h5{font-size: 100%;}
        }
        @media (max-width:479px){
            .main_title h2{font-size: 190%;}
            .main_title h3{font-size: 170%;}
            .main_title h5{font-size: max(14px, 90%);}
            .main_title h6{font-size: 100%;}
        }

    /* 가맹점 */
        .main_affiliate .partner_list{display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;}
        .main_affiliate .partner_list > li{position: relative;width: calc(100% / 7 - 12px);aspect-ratio: auto 1.7;box-sizing: border-box;border-radius: var(--radius-16);overflow: hidden;background: var(--gray-bg02);}
        .main_affiliate .partner_list span{display: flex;align-items: center;justify-content: center;box-sizing: border-box;width: 100%;height: 100%;}

        @media (max-width:1200px){
            .main_affiliate .partner_list > li{width: calc(100% / 6 - 11.67px);}
        }
        @media (max-width:860px){
            .main_affiliate .partner_list > li{width: calc(100% / 5 - 11.2px);}
        }
        @media (max-width:860px){
            .main_affiliate .partner_list{gap: 10px;}
            .main_affiliate .partner_list > li{width: calc(100% / 5 - 8px);}
        }
        @media (max-width:640px){
            .main_affiliate .partner_list > li{width: calc(100% / 4 - 7.5px);}
        }
        @media (max-width:479px){
            .main_affiliate .partner_list > li{width: calc(100% / 3 - 6.67px);}
        }
        @media (max-width:360px){
            .main_affiliate .partner_list > li{width: calc(100% / 2 - 5px);}
        }

    /* 리뷰 */
        .main_review{padding-bottom: 160px;}
        .main_review .exp_list{display: flex;gap: 40px 0;justify-content: center;padding-top: 1.2vw;}
        .main_review .exp_list > li{position: relative;width: 100%;max-width: 400px;padding-inline: 15px;box-sizing: border-box;text-align: center;}
        .main_review .exp_list > li:not(:last-child):before{position: absolute;content:'';width: 1px;height: 75%;top:50%;right:0;transform: translateY(-50%);background: var(--border-color01);}
        .main_review .exp_list .desc{font-size: var(--title-20);}
        .main_review .exp_list .desc dt{font-size: 180%;font-weight: 600;font-family: var(--font-type02);color: var(--black-color03);letter-spacing: -0.03em;}
            .main_review .exp_list .desc dt + dd{margin-top: 8px;}
        .main_review .exp_list .desc dt em{font-weight: inherit;font-family: var(--font-type01);color: var(--point-color01);}
        .main_review .exp_list .desc dd{font-size: inherit; font-weight: 400; color: var(--black-color06);}
        .main_review .rel_box{position: relative; width: 280px; margin-inline: auto; height: auto; box-sizing: border-box; padding-bottom:100px; margin-top: 80px;}
            .main_review .rel_box:before{position: absolute;content:'';width: 1720px;height: 54.6%;background: var(--gray-bg03);left:50%;bottom:0;transform:translateX(-50%);border-radius: var(--radius-40);}
        .main_review .reviewSwiper{position: relative; width: calc(100% + 1340px); margin-left: -650px; padding-inline: 600px; clip-path: inset(0 60px 0 0); box-sizing: border-box; overflow: hidden;}
        .main_review .reviewSwiperM{margin-top: 30px;}
        .main_review .reviewSwiperM .cont_list{height: 100%;}
        .main_review .cont_list{position: relative; height: 450px; box-sizing: border-box;display: flex;align-items: flex-end;  }
            
        .main_review .cont_list > li{position: relative;width: 260px;height: 325px;border:1px solid var(--border-color01);border-radius: var(--radius-14);padding: clamp(50px, 4vw, 74px) clamp(20px, 1.5vw, 28px) 0;box-sizing: border-box;background: var(--point-white);cursor: pointer; transition: all 0.4s;}
            .main_review .cont_list > li:before{position: absolute;content:'';width: 17px;height: 13px;background: url('../images/skin/quotes.svg') no-repeat center / 100% auto;top: calc(clamp(50px, 4vw, 74px) - 31px);left: clamp(20px, 1.5vw, 28px);filter: var(--filter-black);opacity: 0.35;transition: all 0.4s;}
            
        .main_review .cont_list .desc{position: relative; font-size: var(--title-20);}
        .main_review .cont_list .desc dt{font-size: 72.5%; font-weight: 400; color: var(--black-color05); line-height: 1.7; letter-spacing: -0.03em; transition: all 0.4s;}
        .main_review .cont_list .desc dt strong{font-weight: 500; color: var(--black-color01);}
        .main_review .cont_list .desc dd{position: absolute;bottom: calc(100% + 26px);right: clamp(-77vw, -4.2vw, -40px);font-size: inherit;font-weight: 300;color: var(--point-white);font-family: var(--font-type02);padding: 11px 23px;background: var(--point-color01);border-radius: 50px;opacity: 0;pointer-events: none;transition: all 0.4s;}
        .main_review .cont_list .desc dd:before{position: absolute;content:'';width: 14px;aspect-ratio: auto 1;top:calc(100% - 3px);right: clamp(25px, 3vw, 50px);background: var(--point-color01);clip-path: polygon(0 0, 0 100%, 100% 0);}
        .main_review .cont_list .desc dd strong{font-weight: 500; font-family: var(--font-type01);}
        .main_review .cont_list .desc dd em{font-weight: 600; color: var(--point-color02); font-family: var(--font-type01);}

            .main_review .cont_list > li{margin-right: 30px;}
            .main_review .cont_list > li.swiper-slide-active{width: 360px; height: 450px;padding: 102px clamp(25px, 2.1vw, 40px) 0;border-color: var(--point-color01);border-radius: var(--radius-20);box-shadow: var(--shadow-01);z-index: 9; margin-inline:10px 40px;}
            .main_review .cont_list > li.swiper-slide-active:before{width: 24px;height: 18px;filter: none;opacity: 1;left: clamp(25px, 2.1vw, 40px);top: 60px;}
            .main_review .cont_list > li.swiper-slide-active .desc dt{font-size: inherit;letter-spacing: -0.05em;}
            .main_review .cont_list > li.swiper-slide-active .desc dd{opacity: 1;}

        .main_review .m_ver{display: none;}
        .main_review .m_ver .cont_list > li.swiper-slide-active{margin-inline:0;}
        

        @media (max-width:1800px){
            .main_review .cont_list .desc dt br.for_pc{display: none;}
        }
        @media (max-width:1500px){
            .main_review .cont_list .desc dt{font-size: 68%;}
            .main_review .cont_list > li.on .desc dt{font-size: 90%;}
        }
        @media (max-width:1023px){
            .main_review{padding-bottom: clamp(70px, 16vw, 160px);}
            .main_review .exp_list .desc dt{font-size: 170%;}
            .main_review .rel_box{margin-top: clamp(30px, 8vw, 80px); padding-bottom: clamp(70px, 10vw, 100px);}
            .main_review .cont_list > li{height:clamp(250px, 32.5vw, 325px);}
            .main_review .cont_list > li.swiper-slide-active{height:clamp(350px, 45vw, 450px);}
        }
        @media (max-width:860px){
            .main_review .rel_box{margin-top: 0;}
            .main_review .exp_list .desc dt{font-size: 160%;}
        }
        @media (max-width:767px){
            .main_review .rel_box{margin-top: -30px;}
        }
        @media (max-width:640px){
            .main_review .exp_list .desc dt{font-size: 150%;}
            .main_review .exp_list .desc dd{font-size: max(14px, 90%);}
            .main_review .cont_list .desc dd{font-size: max(14px, 80%);}
        }
        @media (max-width:479px){
            .main_review .exp_list{justify-content: space-between;padding-block: 10px;gap: 3px;}
			.main_review .exp_list > li{padding-inline:0;}
            .main_review .exp_list > li:not(:last-child):before{display: none;}
			.main_review .exp_list .desc dt{font-size: 130%;}

            .main_review .pc_ver{display: none;}
            .main_review .m_ver{display:block;}
            .main_review .reviewSwiperM{height: 350px;}
            .main_review .reviewSwiperM .cont_list > :is(li, li.swiper-slide-active){height: 350px; padding-top: 102px;}
            .main_review .reviewSwiperM .cont_list > :is(li, li.swiper-slide-active):before{top: 24px;}
            .main_review .reviewSwiperM .cont_list > :is(li, li.swiper-slide-active) .desc dt{font-size: inherit; letter-spacing: -0.05em;}

            .main_review .cont_list .desc dd{right:-10px;}
        }
		@media (max-width:360px){
			.main_review .exp_list .desc dt{font-size: 120%;}
        }

    /* 시스템 */
        .main_system{position: relative;background: var(--point-color03);}
            .main_system:before{position: absolute;content:'';width: 189px;aspect-ratio:auto 1;border:40px solid rgba(23, 63, 193, 0.5);box-sizing: border-box;left: -50px;bottom:76px;border-radius: 100%;}
            .main_system:after{position: absolute;content:'';width: 277px;aspect-ratio:auto 1;background:rgba(23, 63, 193, 0.55);box-sizing: border-box;top:89px;right: -100px;border-radius: 100%;}
        .main_system .w_custom{padding-block: 0.2vw 156px;}
        .main_system .cont{position: relative; max-width: 680px; z-index: 3;}
        .main_system .main_title h2{filter: var(--filter-white);}
        .main_system .controller{position: relative;width: fit-content;margin-block: 0.2vw 122px;box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);border-radius: 50px;}
        .main_system .controller .circle{position: absolute; width: 180px; height: 100%; background: var(--point-white); border-radius: inherit; top:0; left:0; transition: all 0.4s;}
        .main_system .systemSwiper .swiper-pagination{position: relative;inset: auto;display: flex;width: auto;box-sizing: border-box;font-size: var(--title-20);}
        .main_system .systemSwiper .swiper-pagination button{position: relative;width: 180px;height: 60px;background: none;margin: 0;display: flex;align-items: center;justify-content: center;text-align: center;font-size: inherit;font-weight: 500;color: var(--point-white);opacity: 1;transition: all 0.4s;padding-inline: 10px;box-sizing: border-box;border-radius: 50px;}
        .main_system .systemSwiper .swiper-pagination .swiper-pagination-bullet-active{color: var(--point-color01);font-weight: 700; transition-delay: 0.2s;}
        .main_system .systemSwiper .swiper-slide{opacity: 0 !important; pointer-events: none;}
        .main_system .systemSwiper .swiper-slide.swiper-slide-active{opacity: 1 !important; pointer-events: all;}
        .systemSwiper .desc{position: relative; font-size: var(--title-20); color: var(--point-white);}
        .systemSwiper .desc dt{font-size: 150%; font-weight: 500; letter-spacing: -0.03em; }
            .systemSwiper .desc dt:after{display: inline-flex;content:'';width: 6px;height: 6px;border-radius: 100%;background: var(--point-white);margin-left: 6px;vertical-align: text-top; box-sizing: border-box;}
            .systemSwiper .desc dt + dd{margin-top: 17px;}
        .systemSwiper .desc dd{font-size: inherit;font-weight: 200;line-height: 1.7;letter-spacing: -0.03em;}
        .main_system .thumb{position: absolute;right: -10vw;bottom: 20px;font-size: 0;width: 81.5%;}
        .main_system .scr_dwn{position: absolute; left:50%; bottom:30px; transform: translateX(-50%); display: flex; flex-direction: column;}
        .main_system .scr_dwn span{border:solid rgba(255,255,255,0.2);width: 14px;height: 14px;border-width: 0 0 2px 2px;box-sizing: border-box;transform: rotate(-45deg); opacity: 0;}
            .main_system .scr_dwn span:nth-child(2){border-color: rgba(255,255,255,0.4);}
            .main_system .scr_dwn span:nth-child(3){border-color: rgba(255,255,255,0.6);}
            .main_system .scr_dwn span{ animation-duration:3s; animation-iteration-count:infinite; transition-timing-function:linear;}
            .main_system .scr_dwn span:nth-child(1){animation-name: sysScrDwn01;}
            .main_system .scr_dwn span:nth-child(2){animation-name: sysScrDwn02;}
            .main_system .scr_dwn span:nth-child(3){animation-name: sysScrDwn03;}
            @keyframes sysScrDwn01 {20% {opacity: 0;}40% {opacity:1;} 90% {opacity:1;}}
            @keyframes sysScrDwn02 {40% {opacity: 0;}60% {opacity:1;} 90% {opacity:1;}}
            @keyframes sysScrDwn03 {60% {opacity: 0;}80% {opacity:1;} 90% {opacity:1;}}

            /* over */
                @media (hover:hover) and (pointer:fine){
                    .main_system .systemSwiper .swiper-pagination button:not(.swiper-pagination-bullet-active):hover{background: var(--point-white);color:var(--point-color01);font-weight: 600;}
                }

        @media (max-width:1300px){
            .systemSwiper .desc dd{text-shadow: 2px 1px 0 rgba(0, 0, 0, 1);}
        }
        @media (max-width:1023px){
            .main_system:before{width: clamp(90px, 18.9vw, 189px);left: clamp(-50px, -5vw, -25px);bottom: clamp(25px, 7.6vw, 76px); border-width: clamp(20px, 4vw, 40px);}
            .main_system:after{width: clamp(100px, 27.7vw, 277px);top: clamp(25px, 8.9vw, 89px);right: clamp(-100px, -10vw, -50px);}
            .main_system .w_custom{padding-bottom: clamp(70px, 15.6vw, 156px);}
            .main_system .controller{margin-bottom: clamp(40px, 12.2vw, 122px);}
            .main_system .systemSwiper .swiper-pagination button{width: clamp(140px, 19vw, 180px);height: clamp(50px, 7vw, 60px);}
            .systemSwiper .desc dt + dd{margin-top: clamp(10px, 2vw, 17px);}
            .systemSwiper .desc dd{text-wrap: balance;}
            .main_system .scr_dwn{bottom: clamp(20px, 3vw, 30px);}
            .main_system .scr_dwn span{width: clamp(10px, 2vw, 14px); height: clamp(10px, 2vw, 14px);}
        }
        @media (max-width:860px){
            .main_system .thumb{position: relative; inset: auto; width: 100%;}
            .systemSwiper .desc dd{text-shadow: none;}
        }
        @media (max-width:479px){
            .main_system .controller{width: 100%;}
            .main_system .systemSwiper .swiper-pagination button{width: 100%; font-size: 90%;}
        }

    /* 컨설팅 */
        .main_consulting{background: var(--point-color04);}
        .main_consulting .w_custom{padding-block: 98px;}
            .main_consulting .w_custom:before{position: absolute;content:'NETPAY';font-size: 160px;font-weight: 700;font-family: var(--font-type02);letter-spacing: 0;filter: var(--filter-white);opacity: 0.05;left:50%;bottom: -30px;line-height: 1;transform: translateX(-50%);}
        .main_consulting .main_title :where(h2, h5){filter: var(--filter-white);}

        @media (max-width:1023px){
            .main_consulting .w_custom{padding-block: clamp(70px, 9.8vw, 98px);}
            .main_consulting .w_custom:before{font-size: clamp(40px, 16vw, 160px); bottom:clamp(-30px, -3vw, -10px)}
        }

    /* 유지보수 */
        .main_maintain{padding-bottom: 160px;}
        .main_maintain .info_list{display: flex;flex-wrap: wrap;gap: 40px;margin-top: 0.2vw;}
        .main_maintain .info_list > li{position: relative;width: calc(100% / 3 - 26.67px);box-sizing: border-box;display: flex;flex-direction: column;gap: 43px;padding: clamp(35px, 3.3vw, 60px) clamp(25px, 2.8vw, 50px);border-radius: var(--radius-40);background: var(--point-color05);}
            .main_maintain .info_list > li:nth-child(2){background: var(--point-color06);}
            .main_maintain .info_list > li:nth-child(3){background: var(--point-color07);}
        .main_maintain .info_list .icon{display: flex; align-items: center; justify-content: center; height: 191px;}
        .main_maintain .info_list .desc{font-size: var(--title-20);}
        .main_maintain .info_list .desc dt{font-size: 150%;font-weight: 600;color: var(--black-color03);line-height: 1.46;letter-spacing: -0.03em;}
            .main_maintain .info_list .desc dt + dd{margin-top: 19px;}
        .main_maintain .info_list .desc dd{font-size: 90%;font-weight: 400;color: var(--black-color06);line-height: 1.66;letter-spacing: -0.035em;}

        @media (max-width:1300px){
            .main_maintain .info_list{gap: 30px;}
            .main_maintain .info_list > li{width: calc(100% / 3 - 20px);}
        }
        @media (max-width:1200px){
            .main_maintain .info_list{gap: 20px;}
            .main_maintain .info_list > li{width: calc(100% / 3 - 13.34px);}
            .main_maintain .info_list .desc dt{font-size: 130%;}
            .main_maintain .info_list .desc dd{font-size: max(14px, 80%);}
        }
        @media (max-width:1023px){
            .main_maintain{padding-bottom: clamp(70px, 16vw, 160px);}
            .main_maintain .info_list{gap: 15px;}
            .main_maintain .info_list > li{width: calc(100% / 2 - 7.5px);gap: clamp(30px, 4.3vw, 43px);}
            .main_maintain .info_list .icon{height: clamp(90px, 19.1vw, 191px);}
            .main_maintain .info_list .desc{text-wrap: balance;}
            .main_maintain .info_list .desc dt + dd{margin-top: clamp(12px, 2vw, 19px);}
        }
        @media (max-width:640px){
            .main_maintain .info_list .desc dt{font-size: 120%;}
        }
        @media (max-width:479px){
            .main_maintain .info_list > li{width: 100%;}
            .main_maintain .info_list .desc dt{font-size: 110%;}
        }
    
    /* 결제 수단 */
        .main_payment .w_custom{display: flex; align-items: center; flex-wrap: wrap; gap: 40px 0;}
        .main_payment .main_title.hd{padding-top: 0;}
        .main_payment .thumb{width: 50%;}
        .main_payment .thumb span{display: block;width: calc(100% + 260px);margin-left: -260px;border-radius: var(--radius-40);overflow: hidden;}
        .main_payment .cont{width: 50%;padding-left: clamp(30px, 5.2vw, 100px);box-sizing: border-box;}
        .main_payment .com_list{display: flex;flex-wrap: wrap;gap: 16px;margin-top: 0.3vw;}
        .main_payment .com_list > li{width: calc(100% / 4 - 12px); background: var(--gray-bg01); border-radius: var(--radius-16); aspect-ratio: auto 1;}
        .main_payment .com_list > li span{display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;box-sizing: border-box;mix-blend-mode: darken;}

        @media (max-width:1023px){
            .main_payment .thumb{width: 100%;}
            .main_payment .thumb span{width: 100%; margin-left: 0;}
            .main_payment .cont{width: 100%; padding-left: 0;}
            .main_payment .com_list{gap: 15px;}
            .main_payment .com_list > li{width: calc(100% / 6 - 12.5px);}
        }
        @media (max-width:640px){
            .main_payment .com_list > li{width: calc(100% / 5 - 12px);}
        }
        @media (max-width:479px){
            .main_payment .com_list{gap: 10px;}
            .main_payment .com_list > li{width: calc(100% / 4 - 7.5px);}
        }
        @media (max-width:431px){
        }
        @media (max-width:360px){
            .main_payment .com_list > li{width: calc(100% / 3 - 6.67px);}
        }

    /* 상품 */
        .main_prod .tab_list{display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-bottom: 40px;}
        .main_prod .tab_list .desc{position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;width: 180px;text-align: center;gap: 9px;border: 1px solid var(--border-color01);box-sizing: border-box;border-radius: var(--radius-20);font-size: var(--title-20);cursor: pointer;transition: all 0.4s;padding: 19px 15px 18px;}
            .main_prod .tab_list .on .desc{border-color: var(--point-color01); background: var(--point-color01); box-shadow: var(--shadow-01);}
        .main_prod .tab_list .desc dt{display: flex; align-items: center; justify-content: center; height: 86px;}
        .main_prod .tab_list .desc dd{font-size: inherit;font-weight: 500;color: var(--black-color08);transition: all 0.4s;}
            .main_prod .tab_list .on .desc dd{color: var(--point-white);font-weight: 600;}
        .main_prod .tab_conts{position: relative; padding-block: 120px; box-sizing: border-box;}
        .main_prod .tab_conts:before{position: absolute; content:''; top:0; left:50%; transform: translateX(-50%); width: calc(100% + 320px); height: 100%; background: var(--gray-bg03); border-radius: var(--radius-40);}
        .main_prod .tab_conts .item{position: relative; mix-blend-mode: darken; transition: all 0.4s;}
        .main_prod .tab_conts .item:not(.on){overflow: hidden; opacity: 0; height: 0;}
        .main_prod .item_list > li{display: flex;align-items: center;flex-wrap: wrap;gap: 30px 0;}
            .main_prod .item_list > li + li{margin-top: 60px;}
        .main_prod .item_list .thumb{width: 47.1%;}
        .main_prod .item_list .info{width: 52.9%;padding-left: clamp(30px, 4.2vw, 80px);box-sizing: border-box;font-size: var(--title-20);display: flex;flex-direction: column;align-items: flex-start;gap: 12px;}
        .main_prod .item_list .desc dt{font-size: 110%; font-weight: 600; color: var(--point-color01); font-family: var(--font-type02);}
            .main_prod .item_list .desc dt + dd{margin-top: 26px;}
        .main_prod .item_list .desc dd{font-size: 240%;font-weight: 600;color: var(--black-color01);letter-spacing: -0.03em;}
        .main_prod .item_list .exp{font-size: inherit;font-weight: 400;color: var(--black-color05);line-height: 1.7;margin-top: 35px;text-wrap: balance;white-space: normal;overflow:hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
        .main_prod .item_list .tag_list{display: flex; flex-wrap: wrap; gap: 12px;}
        .main_prod .item_list .tag_list > li{font-size: 90%; font-weight: 400; color: var(--black-color08); font-family: var(--font-type02);}
        .main_prod .item_list .arw_more{margin-top: 45px;}

            /* over */
                @media (hover:hover) and (pointer:fine){
                    .main_prod .tab_list > li:not(.on):hover .desc{border-color: var(--point-color01);}
                    .main_prod .tab_list > li:not(.on):hover .desc dd{color: var(--point-color01);}
                }


        @media (max-width:1023px){
            .main_prod .tab_list{gap: 15px;}
            .main_prod .tab_list .desc{width: clamp(160px, 18vw, 180px); padding-block: clamp(15px, 2vw, 18px);}
            .main_prod .tab_list .desc dt{height: clamp(65px, 9vw, 86px);}
            .main_prod .tab_conts{padding-block: clamp(70px, 12vw, 120px);}
            .main_prod .item_list .info{gap: clamp(8px, 2vw, 12px);}
            .main_prod .item_list .desc dd{font-size: 230%;}
            .main_prod .item_list .desc dt + dd{margin-top: clamp(10px, 2.6vw, 26px);}
            .main_prod .item_list .exp{margin-top: clamp(10px, 3.5vw, 35px);}
            .main_prod .item_list .arw_more{margin-top: clamp(25px, 4.5vw, 45px);}
        }
        @media (max-width:640px){
            .main_prod .item_list .thumb{width: 100%;}
            .main_prod .item_list .info{width: 100%; padding-left: 0;}
            .main_prod .item_list .desc dd{font-size: 220%;}
        }
        @media (max-width:479px){
            .main_prod .tab_list .desc dd{font-size: 90%;}
            .main_prod .item_list .thumb{width: 100%;}
            .main_prod .item_list .info{width: 100%; padding-left: 0;}
            .main_prod .item_list .desc dt{font-size: 100%;}
            .main_prod .item_list .desc dd{font-size: 210%;}
            .main_prod .item_list .exp{font-size: 90%; line-height: 1.6;}
        }
        @media (max-width:431px){
            .main_prod .tab_list > li{width: calc(100% / 2 - 7.5px);}
            .main_prod .tab_list .desc{width: 100%;}
        }

    /* 장점 */
        .main_merit{padding-bottom: 160px;}
        .main_merit .benefit_list{display: flex;flex-wrap: wrap;gap: 40px;margin-top: 0.2vw; counter-reset: benefitList;}
        .main_merit .benefit_list > li{position: relative;width: calc(100% / 3 - 26.67px);border: 1px solid var(--border-color01);border-radius: var(--radius-20);padding: 50px 30px 49px;box-sizing: border-box;display: flex;flex-direction: column;align-items: center;gap: 32px;font-size: var(--title-20);transition: all 0.4s;}
            .main_merit .benefit_list > li:before{position: absolute;content:'';top: -1px;left: -1px;width: calc(100% + 2px);height: calc(100% + 2px);border:2px solid var(--point-color01);border-radius: inherit;box-sizing: border-box;opacity: 0;transition: all 0.4s;}
            .main_merit .benefit_list > li:after{position: absolute;content: counter(benefitList, decimal-leading-zero);counter-increment: benefitList;top: 31px;right:30px;font-size: 120%;font-weight: 500;color: var(--point-color01);opacity: 0.2;font-family: var(--font-type02);line-height: 1;letter-spacing: -0.05em;}
        .main_merit .benefit_list .icon{display: flex;align-items: center;justify-content: center;height: 157px; font-size: 0;}
        .main_merit .benefit_list .desc{text-align: center;}
        .main_merit .benefit_list .desc dt{font-size: 140%;font-weight: 600;color: var(--point-color08);letter-spacing: -0.05em;}
            .main_merit .benefit_list .desc dt + dd{margin-top: 22px;}
        .main_merit .benefit_list .desc dd{font-size: inherit;font-weight: 400;color: var(--black-color05);line-height: 1.7;font-family: var(--font-type03);letter-spacing: -0.06em;text-wrap: balance;} 

            /* over */
                @media (hover:hover) and (pointer:fine){
                    .main_merit .benefit_list > li:hover{box-shadow: var(--shadow-02);}
                    .main_merit .benefit_list > li:hover:before{opacity: 1;}
                }

        @media (max-width:1300px){
            .main_merit .benefit_list{gap: 30px;}
            .main_merit .benefit_list > li{width: calc(100% / 3 - 20px);}
        }
        @media (max-width:1200px){
            .main_merit .benefit_list{gap: 20px;}
            .main_merit .benefit_list > li{width: calc(100% / 3 - 13.34px);}
        }
        @media (max-width:1023px){
            .main_merit{padding-bottom: clamp(70px, 16vw, 160px);}
            .main_merit .benefit_list{gap: 15px;}
            .main_merit .benefit_list > li{width: calc(100% / 2 - 7.5px);gap: clamp(25px, 3.2vw, 32px);padding-bottom: clamp(35px, 5vw, 49px);}
            .main_merit .benefit_list > li:after{top: clamp(20px, 3vw, 30px);right: clamp(20px, 3vw, 30px);}
            .main_merit .benefit_list .icon{height: clamp(80px, 15.7vw, 157px);}
            .main_merit .benefit_list .desc dt + dd{margin-top: clamp(10px, 2.2vw, 22px);}
        }
        @media (max-width:640px){
            .main_merit .benefit_list > li{width: 100%;}
        }
        @media (max-width:479px){
            .main_merit .benefit_list > li:after{font-size: 110%;}
            .main_merit .benefit_list .desc dt{font-size: 130%;}
            .main_merit .benefit_list .desc dd{font-size: 90%;}
        }
    /* 고객센터 */
        .main_cs .w_1720{background: var(--point-color04);padding-block: 80px;border-radius: var(--radius-40);}
        .main_cs .main_title h3{filter: var(--filter-white);}
        .main_cs .main_title .arw_more{margin-top: 37px;}
        .main_cs .cont{width: calc(100% - 60px); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 40px 30px; }
        .main_cs .method_list{display: flex; flex-wrap: wrap; gap: 30px;}
        .main_cs .method_list > li{position: relative;width: 340px;background: var(--point-color01);border-radius: var(--radius-30);padding: 48px 40px 40px;box-sizing: border-box;font-size: var(--title-20);color: var(--point-white);display: flex;flex-direction: column;justify-content: space-between;}
            .main_cs .method_list > li:nth-child(2n){background: var(--point-color10);}
        .main_cs .method_list .link{position: absolute; inset: 0; z-index: 5;}
		.main_cs .method_list .info_box{margin-bottom:25px;}
        .main_cs .method_list .desc dt{display: flex; align-items: center; gap: 12px; font-size: inherit; font-weight: 400;}
            .main_cs .method_list .desc dt + dd{margin-top: 22px;}
        .main_cs .method_list .desc dt img{flex-shrink: 0;}
        .main_cs .method_list .desc dd{font-size: 180%;font-weight: 500;font-family: var(--font-type02);letter-spacing: 0.01em;}
        .main_cs .method_list .info{border-top: 1px solid rgba(255,255,255,0.2);margin-top: 26px;padding-top: 29px;display: flex;flex-direction: column;gap: 10px;}
        .main_cs .method_list .info_desc{display: flex;}
        .main_cs .method_list .info_desc :where(dt, dd){font-size: max(14px, 85%);font-weight: 300;}
        .main_cs .method_list .info_desc dt{opacity: 0.6;width: 100px;padding-right: 15px;box-sizing: border-box;flex-shrink: 0;}
            .main_cs .method_list > li:nth-child(2) .info_desc dt{width: 85px;}
        .main_cs .method_list .info_desc dd{opacity: 0.8;}
        .main_cs .method_list .noti{font-size: max(13px, 75%);font-weight: 200;opacity: 0.6;margin-top: 3px;}
        .main_cs .method_list .icon{display: flex;align-items: center;justify-content: center;width: 60px;height: 60px;border-radius: var(--radius-15);background: var(--point-white);padding: 10px;box-sizing: border-box;}

			.main_cs .method_list .prd_link ul{display: flex;align-items: center;justify-content: center;box-sizing:border-box;padding:0;gap:21px;text-align: center;}
			.main_cs .method_list .prd_link ul li{min-width:60px;width:calc(100% / 3 - 14px);}
			.main_cs .method_list .prd_link ul li .img{display: flex;align-items: center;justify-content: center;margin:0 auto;box-sizing:border-box;background:var(--point-white);width:50px;height:50px;border-radius:15px;transition:all 0.3s;}
			.main_cs .method_list .prd_link ul li span{display: block;font-size:var(--title-14);color:var(--point-white);font-weight:600;margin-top:7px;transition:all 0.3s;}
        
		
        @media (max-width:1200px){
            .main_cs .method_list{gap: 20px;}
        }
        @media (max-width:1023px){
            .main_cs .w_1720{padding-block: clamp(70px, 8vw, 80px);}
            .main_cs .main_title .arw_more{margin-top: clamp(18px, 3.7vw, 37px);}
            .main_cs .method_list{width: 100%; gap: 15px;}
            .main_cs .method_list > li{width: calc(100% / 2 - 7.5px);padding: clamp(30px, 5vw, 48px) clamp(30px, 4vw, 40px) clamp(30px, 4vw, 40px);}
            .main_cs .method_list .info{margin-top: clamp(15px, 2.6vw, 26px);padding-top: clamp(19px, 2.9vw, 29px);gap: clamp(7px, 1.5vw, 10px);}
            .main_cs .method_list .desc dt + dd{margin-top: clamp(12px, 2.2vw, 22px);}
            .main_cs .method_list .icon{left: clamp(30px, 4vw, 40px); bottom:clamp(30px, 4vw, 40px); width: clamp(45px, 6vw, 60px); height: clamp(45px, 6vw, 60px);}
        }
        @media (max-width:860px){
            .main_cs .method_list .info_desc dt{width: 90px;}
            .main_cs .method_list > li:nth-child(2) .info_desc dt{width: 75px;}
        }
        @media (max-width:640px){
            .main_cs .method_list > li{width: 100%;}
        }
        @media (max-width:479px){
            .main_cs .cont{width: calc(100% - 50px);}
            .main_cs .method_list .desc dt{font-size: 90%; gap: 10px;}
            .main_cs .method_list .desc dd{font-size: 170%;}
            .main_cs .method_list .info_desc dt{width: 85px;}
            .main_cs .method_list > li:nth-child(2) .info_desc dt{width: 70px;}
			
			.main_cs .method_list .prd_link ul li .img{width:40px;height:40px;border-radius:10px;}
			.main_cs .method_list .prd_link ul li .img img{max-width: 50%;max-height: 55%;}
        }

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

	FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    #footer{position: relative; padding-block: 120px 100px; font-size: var(--title-20); box-sizing: border-box;}
    #footer .top_sec{display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 20px 30px;margin-bottom: 97px;}
    #footer .logo{display: flex;align-items: center;flex-wrap: wrap;gap: 15px 24px;font-size: 180%;font-weight: 600;color: var(--black-color01);letter-spacing: -0.03em;}
    #footer .link_list{display: flex;flex-wrap: wrap;gap: 10px clamp(20px, 2vw, 35px);}
    #footer .link_list > li{font-size: 90%;font-weight: 400;color: var(--black-color06);transition: all 0.4s;}
    #footer .link_list > li strong{font-weight: 500; color: var(--black-color01);}
    #footer .cont{display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 30px;}
    #footer .addr_list{display: flex; flex-direction: column; gap: 10px;}
    #footer .addr_list > li{display: flex; flex-wrap: wrap; gap: 10px 0;}
        #footer .addr_list > li:last-child{margin-top: 19px;}
    #footer .addr_list .desc{display: inline-flex;gap: 4px;align-items: baseline;}
        #footer .addr_list .desc:not(:last-child):after{display: inline-flex; content:''; width: 1px; height: 12px; background: var(--border-color01); margin-inline: 10px 14px;}
    #footer .addr_list .desc :where(dt, dd){font-size: 90%; font-weight: 400; color: var(--black-color03);}
    #footer .addr_list .desc dt{flex-shrink: 0;}
    #footer .addr_list > li:last-child .desc :where(dt, dd){font-family: var(--font-type02); color: var(--black-color01);}
    #footer .sns_list{display: flex; flex-wrap: wrap; gap: 15px;}
    #footer .sns_list a{display: flex;align-items: center;justify-content: center;width: 60px;height: 60px;background: var(--border-color02);border-radius: var(--radius-15);padding:  10px;box-sizing: border-box;transition: all 0.4s;}
    #footer .copy{display: flex;flex-wrap: wrap;gap: 5px 14px;border-top: 1px solid var(--border-color01);margin-top: 27px;padding-top: 28px;}
    #footer .copy :where(dt, dd){font-size: max(13px, 80%);font-weight: 400;color: var(--black-color08);font-family: var(--font-type02);}
    #footer .copy strong{font-weight: 600; color: var(--black-color06);}

    .scr_top{position: fixed;right:20px;bottom: 30px;z-index: 50;padding: 30px 15px;display: flex;flex-direction: column;align-items: center;gap: 10px;background: var(--black-color01);font-size: var(--title-20);font-weight: 500;color: var(--point-white);font-family: var(--font-type02);text-align: center; border-radius: 50px; transition: all 0.8s; opacity: 0; clip-path: circle(0 at 100% 100%);}
        :has(#header.on) .scr_top{opacity: 1; clip-path: circle(150% at 100% 100%);}
        .scr_top:before{display: inline-flex;content:'';width: 14px;height: 23px;background: url('../images/skin/scr_top.svg') no-repeat center / auto 100%;}
    .scr_top span{font-size: max(13px, 75%);}

	.ft_quick{position: fixed;right:20px;bottom:161px;transition:all 0.8s;opacity:0;z-index:-1;}
	:has(#header.on) .ft_quick{opacity:1;z-index:10;}
	.ft_quick .quick_btn{position: relative;}
	.ft_quick .quick_btn .open, .ft_quick .quick_btn .btn_close{width:80px;height:80px;box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.25);cursor:pointer;box-sizing:border-box;border-radius:15px;overflow:hidden;}
	.ft_quick .quick_btn .open{display: flex;flex-direction: column;align-items: center;justify-content: center;background:var(--point-white);box-sizing:border-box;text-align: center;}
	.ft_quick .quick_btn .open span{display: block;font-size:var(--title-14);color:var(--black-color00);font-weight:600;margin-top:7px;}
	.ft_quick .quick_btn .btn_close{position: absolute;top:0;left:0;background:var(--black-color11);display: flex;align-items: center;justify-content: center;opacity:0;z-index:-1;transition:all 0.5s;}
	.ft_quick .quick_btn.on .btn_close{opacity:1;z-index:3;}
	.ft_quick .quick_btn .btn_close a{display: block;width:27px;height:27px;position: relative;}
	.ft_quick .quick_btn .btn_close span{display: inline-block;width:100%;height:2px;background:var(--point-white);position: absolute;top:50%;left:0;}
	.ft_quick .quick_btn .btn_close span:nth-child(1){transform:rotate(45deg);}
	.ft_quick .quick_btn .btn_close span:nth-child(2){transform:rotate(-45deg);}
	
	.ft_quick .quick_layer{position: absolute;right:0;bottom:calc(100% + 10px);background:var(--gray-bg04);box-sizing:border-box;border-radius:30px;padding:16px 16px;width:340px;box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);opacity:0;z-index:-1;transform:translateY(50px);pointer-events:none;transition:all 0.5s;}
	.ft_quick .quick_layer.on{opacity:1;z-index:3;transform:translateY(0);pointer-events:initial;}
	.ft_quick .quick_layer .cont{box-sizing:border-box;border-radius:20px;background:var(--point-white);padding:4px 4px;}
	.ft_quick .quick_layer .cont + .cont{margin-top:10px;}
	.ft_quick .quick_layer .quick_link a{display: flex;align-items: center;justify-content: center;box-sizing:border-box;padding:20px 0;gap:10px;}
	.ft_quick .quick_layer .quick_link.kakao a{pointer-events:none;}
	.ft_quick .quick_layer .quick_link span{font-size:var(--title-18);color:var(--black-color00);font-weight:700;}
	.ft_quick .quick_layer .quick_link .img{display: flex;box-sizing:border-box;align-items: center;justify-content: center;border-radius:15px;width:40px;height:40px;transition:all 0.3s;}
	.ft_quick .quick_layer .quick_link .img img{transition:all 0.3s;}
	.ft_quick .quick_layer .quick_link.kakao .img{background:#FAE100;border:1px solid #FAE100;}
	.ft_quick .quick_layer .quick_link.tel .img{background:var(--black-color11);border:1px solid var(--black-color11);}
	.ft_quick .quick_layer .prd_link{background:var(--gray-bg04);box-sizing:border-box;border-radius:0 0 20px 20px;}
	.ft_quick .quick_layer .prd_link ul{display: flex;align-items: center;justify-content: center;box-sizing:border-box;padding:10px 0;gap:20px;text-align: center;}
	.ft_quick .quick_layer .prd_link ul li{min-width:60px;}
	.ft_quick .quick_layer .prd_link ul li .img{display: flex;align-items: center;justify-content: center;margin:0 auto;box-sizing:border-box;background:var(--point-color11);width:40px;height:40px;border-radius:15px;border:1px solid var(--point-color11);transition:all 0.3s;}
	.ft_quick .quick_layer .prd_link ul li span{display: block;font-size:var(--title-14);color:var(--black-color00);font-weight:600;margin-top:7px;transition:all 0.3s;}
	
	

        /* over */
            @media (hover:hover) and (pointer:fine){
                #footer .link_list > li:hover{color: var(--black-color01);}
                #footer .sns_list a:hover{background: var(--black-color01);}
                
                .scr_top:hover{background: var(--point-color01);}
				
				.ft_quick .quick_layer .quick_link.tel:hover .img{background:var(--point-white);}
				.ft_quick .quick_layer .quick_link.tel:hover img{filter:var(--filter-black);}
				.ft_quick .quick_layer .prd_link ul li:hover .img{background:var(--point-white);}
				.ft_quick .quick_layer .prd_link ul li:hover span{color:var(--point-color11);}
            }

    @media (max-width:1023px){
        #footer{padding-block: clamp(70px, 12vw, 120px) clamp(30px, 10vw, 100px);}
        #footer .top_sec{margin-bottom: clamp(40px, 9.7vw, 97px);}
        #footer .logo{font-size: 170%;column-gap: clamp(15px, 2.4vw, 24px);}
        #footer .addr_list{gap:clamp(7px, 1vw, 10px);}
        #footer .addr_list > li{row-gap: clamp(7px, 1vw, 10px);}
        #footer .addr_list > li:last-child{margin-top: clamp(8px, 2vw, 19px);}
        #footer .sns_list a{width: clamp(40px, 6vw, 60px);height: clamp(40px, 6vw, 60px);}
        #footer .copy{margin-top: clamp(20px, 2.7vw, 27px); padding-top: clamp(20px, 2.8vw, 28px);}

        .scr_top{right:15px;bottom: 20px;padding: clamp(15px, 3vw, 30px) clamp(10px, 1.5vw, 15px);gap: clamp(8px, 1vw, 10px);}
        .scr_top:before{width: clamp(10px, 2vw, 14px);height: clamp(18px, 2.3vw, 23px);}
		
		.ft_quick{bottom:clamp(30px, 17vw, 161px);}
    }
    @media (max-width:640px){
        #footer .logo{font-size: 160%;}
        #footer .addr_list .desc:not(:last-child):after{height: 10px; opacity: 0;}
		
		.ft_quick{bottom:clamp(108px, 21vw, 161px);}
		.ft_quick .quick_btn .open, .ft_quick .quick_btn .btn_close{width:70px;height:70px;}
		.ft_quick .quick_btn .open img{height:25px;}
		.ft_quick .quick_layer .quick_link span{font-size:var(--title-20);}
		.ft_quick .quick_layer .prd_link ul li span{font-size:var(--title-18);}
		.ft_quick .quick_btn .open span{font-size:var(--title-18);}
    }
    @media (max-width:479px){
        #footer .logo{font-size: 150%;}
		
		.ft_quick .quick_btn .open, .ft_quick .quick_btn .btn_close{width:64px;height:64px;}
		.ft_quick .quick_layer{width:calc(100vw - 30px);border-radius:15px;padding:8px 8px;}
		.ft_quick .quick_layer .cont{border-radius:10px;}
		.ft_quick .quick_layer .quick_link a{padding:15px 0;}
		.ft_quick .quick_layer .quick_link .img{width:36px;height:36px;border-radius:10px;}
		.ft_quick .quick_layer .quick_link .img img{max-width:50%;}
		.ft_quick .quick_layer .quick_link.tel .img img{max-width:35%;}
		.ft_quick .quick_layer .prd_link{border-radius:0 0 10px 10px;}
		.ft_quick .quick_layer .prd_link ul li{min-width:50px;}
		.ft_quick .quick_layer .prd_link ul li .img{width:38px;height:38px;border-radius:10px;}
		.ft_quick .quick_layer .prd_link ul li .img img{max-width:50%;max-height:55%;}
    }