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

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

───────────────────────────────────────────────────────────*/
	body::-webkit-scrollbar{display: none;}
/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
	#wrap {position:relative;width:100%; box-sizing: border-box; overflow: clip;}
    .w_custom{position: relative; width: calc(100% - 60px); max-width: 1500px; margin-inline: auto; box-sizing: border-box;}
    .w_custom.w_1840{max-width: 1840px;}
    .w_custom.w_100{width: 100%;}
    #container{position: relative; padding-bottom:150px; box-sizing: border-box;}
    #container:has(.fullSec){width: 100%; max-width: 100%;}
	.sr-only{position: absolute;width: 1px; height: 1px;margin: -1px;padding: 0;overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}

    @media (max-width:1500px){
        br.for_pc{display: none;}
    }
    @media (max-width:1023px){
        #container{padding-bottom:clamp(100px, 15vw, 150px);}
    }
    @media (max-width:860px){
        .w_custom{width: calc(100% - 30px);}
    }
    @media (max-width:320px){
        .w_custom{width: calc(100% - 20px);}
    }

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

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

───────────────────────────────────────────────────────────*/
    /* 버튼 */
        .comBtn{position: relative;display: flex;align-items: center;justify-content: center;text-align: center;font-size: var(--title-19);font-weight: 400;color: var(--point-white);font-family: var(--font-type02);padding: 14px 30px;background: var(--point-color02);border-radius: 50px;letter-spacing: -0.04em; transition: all 0.4s;}
        .comBtn.lg{font-size: var(--title-20);min-width: 180px;padding: 16px 25px;}
        .comBtn.wh{background: var(--point-white);color: var(--point-color06);font-weight: 600;font-family: var(--font-type01);}
		.comBtn.arw{gap:20px;}
        .comBtn.arw::after{display: inline-flex;content:'';width: 20px;aspect-ratio: auto 1.66;background: url('../images/skin/moreArw.svg') no-repeat center / 100% auto; transition: inherit;}

        /* over */
        @media (hover:hover) and (pointer:fine) {
            .comBtn:hover{background: var(--point-color01);}
            .comBtn.wh:hover{background: var(--point-color02); color: var(--point-white);}
            .comBtn.wh:hover::after{filter: var(--filter-white);}
        }

    @media (max-width:1023px) {
        .comBtn{padding: clamp(10px, 1.9vw, 14px) clamp(20px, 3vw, 30px);}
        .comBtn.lg{padding-block: clamp(12px, 2.1vw, 16px);min-width: clamp(140px, 18.5vw, 180px);}
        .comBtn.arw{gap: clamp(12px, 2vw, 20px);}
        .comBtn.arw::after{width: clamp(16px, 2.5vw, 20px);}
    }

    /* 상단 */
    #header{position: sticky;top:0;width: 100%;height: 120px; background: var(--point-white); z-index: 100; transition: all 0.4s;} 
    #header .w_custom{max-width: 1840px;height: 100%;display: flex;align-items: center;justify-content: space-between;gap: 30px;}
    #header .logo{position: relative;height: 100%;transition: all 0.4s;z-index: 1;}
    #header .logo a{display: flex; align-items: center; max-width: 300px; height: 100%; padding-block: 15px;}
    #header .gnb{position: absolute;top: 0;left: 50%;translate: -50%;height: 100%;display: flex;justify-content: center;text-align: center;font-size: var(--title-20);width: calc(100% - 500px);}
    #header .gnb > li{position: relative;height: 100%;font-size: 95%;font-weight: 600;color: var(--black-color01); transition: all 0.4s;}
    #header .gnb > li > a{display: flex;align-items: center;justify-content: center;height: 100%;padding-inline: clamp(15px, 2.65vw, 25px); transition: inherit;}
    #header .gnb .dep02{position: absolute;top: 80%;left: 50%;translate: -50%;background: var(--point-color01);border-radius: var(--radius-10);width: max-content;max-width: 300px;min-width: 180px;padding-block: 15px; opacity: 0; pointer-events: none; transition: inherit;}
    #header .gnb .dep02 > li{font-size: 90%;font-weight: 500;filter: var(--filter-white); transition: inherit;}
    #header .gnb .dep02 > li > a{display: block;padding: 10px 25px; transition: inherit;}
    #header .utility{display: flex; align-items: center; gap: 20px;}
    #header .allCate{display: none;flex-direction: column;justify-content: space-between;width: 30px;aspect-ratio: auto 1.4;}
	#header .allCate span{width:100%;height:2px;background: var(--black-color01);}

        /* 메인 */
        .main_index #header{position: fixed; left:0;}
        .main_index #header:not(.on){background: var(--trans-color);}
        .main_index #header:not(.on) :where(.logo, .gnb > li > a, .allCate){filter: var(--filter-white);}

        /* over */
        @media (hover:hover) and (pointer:fine) {
            .main_index #header:hover{background: var(--point-white);}
            .main_index #header:hover :where(.logo, .gnb > li > a, .allCate){filter: none;}

            #header .gnb > li:hover > a{color: var(--point-color01);}
            #header .gnb > li:hover .dep02{opacity: 1; pointer-events: auto;}
            #header .gnb .dep02:has(> li:hover) > li:not(:hover){opacity: 0.4;}
        }

        /* on */
        #header.on{box-shadow: inset 0 -1px 0 var(--border-color01);}

    @media (max-width:1400px) {
        #header .logo a{max-width: clamp(240px, 21vw, 300px);}
        #header .gnb > li{font-size: 85%;}
        #header .gnb > li > a{padding-inline: 15px;}
    }
    @media (max-width:1100px) {
        #header .gnb{display: none;}
        #header .allCate{display: flex;}
    }
    @media (max-width:1023px) {
        #header{height: clamp(65px, 12vw, 120px);}
        #header .logo a{max-width: clamp(180px, 25vw, 240px);}
        #header .allCate{width: clamp(26px, 4vw, 30px);}
    }
    @media (max-width:479px) {
        #header .comBtn{display: none;}
    }


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

	Aside | outline/nav.html

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

    @media (max-width:1600px){
        #aside .gnb{grid-template: auto / repeat(3, 1fr)}
    }
    @media (max-width:1023px){
        #aside{padding-block: clamp(80px, 12vw, 120px);}
        #aside .close_btn{width: clamp(30px, 4vw, 40px);height: clamp(30px, 4vw, 40px);}
		#aside .gnb .dep02 > li > a{padding-block: clamp(7px, 1.7vw, 13px);}
		#aside .utility{gap:20px;}
    }
    @media (max-width:860px){
		#aside{display: block;}
		#aside .w_custom{align-items:flex-start;}
		#aside .gnb{grid-template: auto / repeat(1, 1fr);gap:0;}
        #aside .gnb > li{display: block;padding: 25px 0;width:100%;text-align:left;box-sizing:border-box;border-bottom: 1px solid rgba(0,0,0,0.15);}
        #aside .gnb > li > a{padding-block: 0;}
		#aside .gnb > li > a:before{display: none;}
        #aside .gnb .dep02{display: grid;gap: 0 20px;grid-template: auto / repeat(2, 1fr);margin-top: 15px;justify-content: flex-start;}
		#aside .utility{top:15px; right: 15px;}
    }
    @media (max-width:479px){
        #aside .gnb > li > a{font-size: 160%;}
        #aside .gnb .dep02{margin-top: 10px;grid-template: auto / repeat(1, 1fr);}
        #aside .gnb .dep02 li{width: 100%;}
        #aside .gnb .dep02 > li > a{font-size: 90%;}
    }


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

    MAIN | index.html

───────────────────────────────────────────────────────────*/
    /* 비주얼 */
        .main_visual{position: relative;}
        .main_visual .slick-slide{position: relative; height: 940px; overflow: hidden;}
        .main_visual .link{position: absolute; inset: 0; z-index: 3; display: none;}
        .main_visual .thumb{position: absolute; inset: 0; background: no-repeat center / cover; scale: 1.15;}
            .main_visual .active .thumb{scale: 1; transition: all 5s;}
        .main_visual .txt_box{position: relative;height: 100%;display: flex;flex-direction: column;justify-content: center;gap: 30px;color: var(--point-white);font-size: var(--title-20);padding-top: 20px; text-wrap: balance;}
        .main_visual .txt_box h2{font-size: 64px;font-weight: 600;line-height: 1.4;}
        .main_visual .txt_box h6{font-size: 110%;font-weight: 400;line-height: 1.6;color: rgb(255 255 255 / 80%);}
            .main_visual .txtAni{opacity: 0; translate: -100px;}
            .main_visual .active .txtAni{opacity: 1; translate: 0; transition: all 1.5s;}
        .main_visual .controller{position: absolute;left: 50%;bottom: 12%;translate: -50%;z-index: 5;display: flex;align-items: center;flex-wrap: wrap;gap: 10px 28px;font-size: 0;pointer-events: none;}
		.main_visual .controller *{pointer-events:auto;}
        .main_visual .slick-dots{display: flex;align-items: center;gap: 26px;}
        .main_visual .slick-dots button{position: relative;width: 16px;aspect-ratio: auto 1;border-radius: 100%;}
        .main_visual .slick-dots button::before{position: absolute;content:'';width: 62.5%;aspect-ratio: auto 1;border-radius: inherit;background: rgb(255 255 255 / 30%);translate: -50% -50%;transition: all 0.4s;}
        .main_visual .slick-dots .slick-active button::before{width: 100%; background: var(--point-white);}
        .main_visual .arrows{display: flex;align-items: center;flex-wrap: wrap;gap: 8px;margin-right: -6px;}
        .main_visual .slick-arrow{position: relative;width: 24px;aspect-ratio: auto 1;}
        .main_visual .slick-arrow::before{position: absolute;content:'';width: 50%;aspect-ratio: auto 1;border: 2px solid var(--point-white);clip-path: var(--clip-poly01);rotate: 135deg;top: 50%;left: 60%;translate: -50% -50%;border-radius: 2px;}
        .main_visual .slick-arrow.next{scale: -1 -1;}
        .main_visual .slickBtn{position: relative;width: 10px;aspect-ratio: auto 0.71;}
            .main_visual .slickBtn{&::before, &::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: var(--clip-poly02);}
            .main_visual .slickBtn.play::after{opacity:0;}

        @media (max-width:1023px) {
            .main_visual .slick-slide{height: clamp(520px, 94vw, 940px);}
            .main_visual .txt_box{gap: clamp(15px, 3vw, 30px);}
            .main_visual .txt_box h2{font-size: clamp(32px, 6.4vw, 64px);}
            .main_visual .txtAni{translate:clamp(-100px, -10vw, -30px);}
            .main_visual .controller{bottom: clamp(30px, 11vw, 110px);column-gap: clamp(20px, 2.8vw, 28px);}
            .main_visual .slick-dots{gap: clamp(15px, 2.6vw, 26px);}
            .main_visual .arrows{gap: clamp(3px, 1vw, 8px);}
        }
        @media (max-width:640px) {
            .main_visual .txt_box h6{font-size: 100%;}
            .main_visual .txt_box br{display: none;}
            .main_visual .slick-dots button{width: 14px;}

        }
        @media (max-width:479px) {
            .main_visual .txt_box h6{font-size: 90%;}
            .main_visual .slick-dots button{width: 12px;}
            .main_visual .slick-arrow{width: 22px;}
        }

    /* 타이틀 */
        .main_title{position: relative;font-size: var(--title-20);text-align: center;display: flex;flex-direction: column;align-items: center;gap: 30px;}
            .main_title.hd{padding-block: 120px 60px;}
            .main_title.hd.ptDn{padding-top: 0;}
            .main_title.hd.pbM{padding-bottom: 40px;}
            .main_title.left{text-align: left;align-items: flex-start;}
            .main_title.g20{gap: 20px;}
		.main_title h2{font-size: 60px;font-weight: 700;color: var(--black-color01);line-height: 1.4;font-family: var(--font-type03);}
        .main_title h3{font-size: 54px;font-weight: 700;color: var(--black-color01);line-height: 1.4;font-family: var(--font-type03);letter-spacing: 0;}
        .main_title h6{font-size: inherit; font-weight: 400; color: var(--black-color05); line-height: 1.6;}
        .main_title h6 strong{font-weight: 500;}
		.main_title .comBtn{margin-top:20px;}

        @media (max-width:1500px) {
            .main_title{text-wrap: balance;}
        }
        @media (max-width:1023px) {
            .main_title{gap: clamp(15px, 3vw, 30px); text-wrap: balance;}
            .main_title.hd{padding-block: clamp(70px, 12vw, 120px) clamp(30px, 6vw, 60px);}
            .main_title.hd.pbM{padding-bottom: clamp(30px, 4vw, 40px);}
            .main_title.left{text-wrap: pretty;}
            .main_title.g20{gap: clamp(12px, 2vw, 20px);}
            .main_title h2{font-size: clamp(32px, 6.4vw, 64px);}
            .main_title h3{font-size: clamp(30px, 5.4vw, 54px);}
            .main_title .comBtn{margin-top: clamp(10px, 2vw, 20px);}
        }
        @media (max-width:479px) {
            .main_title h6{font-size: 90%;}
        }

    /* systemList */
        .systemList{display: grid;grid:auto / repeat(2, 1fr);gap: clamp(15px, 2.1vw, 30px) clamp(15px, 2.1vw, 40px);}
        .systemList > li{position: relative;border-radius: var(--radius-20);overflow: hidden;padding: clamp(40px, 2.7vw, 50px);padding-bottom: 100px;min-height: 380px;}
        .systemList .link{position: absolute; inset: 0; z-index: 3;}
        .systemList .thumb{position: absolute; inset: 0; overflow: hidden;}
        .systemList .thumb img{width: 100%; height: 100%; object-fit: cover; transition: all 0.4s;}
        .systemList .desc{position: relative;font-size: var(--title-20);display: grid;gap: 10px;}
        .systemList .desc dt{font-size: 210%;font-weight: 700;color: var(--black-color00);line-height: 1.4;}
        .systemList .desc dd{font-size: inherit;font-weight: 400;color: var(--black-color03);line-height: 1.6;}
        .systemList .moreArw{position: absolute; left: clamp(40px, 2.7vw, 50px); bottom: clamp(40px, 2.7vw, 50px); translate: -30px; opacity: 0;}

            /* over */
            @media (hover:hover) and (pointer:fine) {
                .systemList > li:hover .thumb img{scale: 1.07;}
                .systemList > li:hover .moreArw{translate: 0; opacity: 1;}
            }

        @media (max-width:1500px) {
            .systemList .desc{text-wrap: balance;}
        }
        @media (max-width:1023px) {
            .systemList > li{padding: clamp(30px, 4vw, 40px);padding-bottom: clamp(70px, 10vw, 100px);min-height: clamp(250px, 38vw, 380px);}
            .systemList .desc{gap: clamp(8px, 1vw, 10px);}
            .systemList .desc dt{font-size: clamp(25px, 4.2vw, 42px);}
            .systemList .desc dd{font-size: 90%;}
            .systemList .moreArw{left:clamp(30px, 4vw, 40px); bottom:clamp(30px, 4vw, 40px);}
        }
        @media (max-width:640px) {
            .systemList{grid:auto / repeat(1, 1fr);}
        }

    /* moreArw */
        .moreArw{position: relative;display: block;width: 60px;aspect-ratio: auto 1;background: var(--point-white) url('../images/skin/moreArw.svg') no-repeat center / 20px auto;border-radius: 100%; transition: all 0.4s;}

        @media (max-width:1023px) {
            .moreArw{width: clamp(40px, 6.5vw, 60px);background-size: clamp(16px, 2.5vw, 20px);}
        }

    /* gridBg */
        .gradBg{padding-block: 140px;background: url('../images/skin/main_biz.jpg') no-repeat center / cover;border-radius: var(--radius-20);}
            .gradBg.pt02{background: var(--point-color05); padding-block: 120px;}
        .gradBg:not(.pt02) .main_title :where(h2, h3, h6){filter: var(--filter-white);}
        .gradBg.pt03{background-image: url('../images/skin/main_inquiry.jpg');padding-block: 132px 95px;background-position: right center;}

        @media (max-width:1023px) {
            .gradBg{padding-block: clamp(70px, 14vw, 140px);}
            .gradBg.pt02{padding-block: clamp(70px, 12vw, 120px);}
            .gradBg.pt03{padding-block: clamp(70px, 13.2vw, 132px) clamp(70px, 9.5vw, 95px);}
        }

    /* cardList */
        .cardList{display: grid; grid: auto / repeat(3, 1fr); gap: clamp(15px, 2.1vw, 36px);}
        .cardList > li{position: relative;padding: clamp(35px, 2.1vw, 40px);border-radius: var(--radius-20);background: var(--point-white);display: flex;flex-direction: column;justify-content: space-between;gap: 56px; transition: all 0.4s;}
        .cardList .link{position: absolute; inset: 0; z-index: 3;}
        .cardList .desc{font-size: var(--title-20);display: grid;gap: 14px; transition: inherit;}
        .cardList .desc dt{font-size: 150%;font-weight: 600;color: var(--black-color00);line-height: 1.4;}
        .cardList .desc dd{font-size: inherit;font-weight: 400;color: var(--black-color05);line-height: 1.4;}
        .cardList .icon{position: relative;margin-left: auto;width: 80px;height: 80px;background: var(--gray-bg01);border-radius: var(--radius-10);padding: 5px;display: flex;align-items: center;justify-content: center;}
        .cardList .moreArw{position: absolute;left: clamp(35px, 2.1vw, 40px);bottom: clamp(35px, 2.1vw, 40px);width: 20px;aspect-ratio: auto 0.3;background-color: var(--trans-color);translate: -10px;opacity: 0;}

            /* over */
            @media (hover:hover) and (pointer:fine) {
                .cardList > li:hover{background: var(--point-color03); translate: 0 -10px; box-shadow: var(--shadow-01);}
                .cardList > li:hover .desc{filter: var(--filter-white);}
                .cardList > li:hover .moreArw{translate: 10px;filter: var(--filter-white);opacity: 1;}
            }

        @media (max-width:1023px) {
			.cardList > li{padding: clamp(25px, 3.5vw, 35px);gap: clamp(40px, 5.6vw, 56px);}
            .cardList .desc{gap: clamp(10px, 1.4vw, 14px);}
            .cardList .desc dt{font-size: 140%;}
			.cardList .desc dd{font-size:90%;}
            .cardList .icon{width: clamp(50px, 8vw, 80px);height: clamp(50px, 8vw, 80px);}
			.cardList .moreArw{left: clamp(30px, 3.5vw, 35px);bottom: clamp(30px, 3.5vw, 35px);}
        }
        @media (max-width:860px) {
            .cardList{grid: auto / repeat(2, 1fr);}
        }
        @media (max-width:479px) {
            .cardList{grid: auto / repeat(1, 1fr);}
            .cardList .desc dt{font-size: 130%;}
        }

    /* titleFixed */
        .titleFixed .w_custom{display: flex;align-items: flex-start;gap: clamp(50px, 5.3vw, 100px);}
        .titleFixed .sticky{position: sticky;top: 150px;width: 100%;height: calc(100dvh - 150px);display: flex;flex-direction: column;justify-content: space-between;gap: 15px;}
        .titleFixed .sticky .thumb{position: relative;height: clamp(300px, 55vh, 500px);text-align: center;}
        .titleFixed .sticky .thumb img{position: absolute; left:50%; bottom:0; translate: -50%; transition: all 0.4s;}
        .titleFixed .sticky .thumb img:first-child{position: relative;inset: auto;translate: 0;}
        .titleFixed .sticky .thumb img:not(.on){opacity: 0;pointer-events: none;}
        .titleFixed .cardList{width: max(580px, 53.3%);flex-shrink: 0;display: grid;grid: auto / repeat(2, 1fr);gap: clamp(15px, 3.2vw, 60px);padding-bottom: clamp(100px, 13.6vw, 260px);}
        .titleFixed .cardList > li{border: 1px solid var(--border-color02);justify-content: flex-start;gap: 30px;translate: 0;padding-bottom: 124px;}
            .titleFixed .cardList > li:nth-child(2n){translate: 0 clamp(100px, 13.6vw, 260px);}
        .titleFixed .cardList .icon{margin:0;width: 60px;height: 60px;}
        .titleFixed .cardList .desc{gap: 20px;}
        .titleFixed .cardList .desc dt{font-size: 160%;line-height: 1.5;}
        .titleFixed .cardList .desc dd{color: var(--black-color03);}
        .titleFixed .cardList .moreArw{left: auto;right: clamp(35px, 2.1vw, 40px);width: 50px;aspect-ratio: auto 1;background: var(--point-white) url('../images/skin/moreArw02.svg') no-repeat center / 18px auto;translate: 0 !important;filter: none !important;}

            /* over */
            @media (hover:hover) and (pointer:fine) {
                .titleFixed .cardList > li:hover{border-color: var(--point-color03);}
            }

            /* min */
            @media (min-width:1024px) {
                .titleFixed .main_title{padding-block: 0;}
                .titleFixed .main_title h3{line-height: 1.2;}

                .titleFixed .cardList > li.on{background: var(--point-color03); box-shadow: var(--shadow-01); border-color: var(--point-color03);}
                .titleFixed .cardList > li.on .desc{filter: var(--filter-white);}
                .titleFixed .cardList > li.on .moreArw{filter: var(--filter-white);opacity: 1;}
            }

        @media (max-width:1023px) {
            .titleFixed .sticky{position: relative;inset: auto;height: auto;gap: 0;}
            .titleFixed .w_custom{flex-wrap: wrap;gap: 0;}
            .titleFixed .sticky .thumb{height: clamp(250px, 50vw, 500px);overflow: hidden;}
            .titleFixed .cardList{width: 100%; padding-bottom: 0;}
			.titleFixed .cardList > li{padding-bottom: clamp(70px, 12.4vw, 124px);gap: clamp(15px, 3vw, 30px);}
            .titleFixed .cardList > li:nth-child(2n){translate: 0;}
			.titleFixed .cardList .desc{gap: clamp(10px, 2vw, 20px);}
            .titleFixed .cardList .desc dt{font-size: 150%;}
            .titleFixed .cardList .icon{width: clamp(40px, 6vw, 60px);height: clamp(40px, 6vw, 60px);padding: 8px;}
            .titleFixed .cardList .moreArw{right: clamp(30px, 3.5vw, 35px); width: clamp(40px, 5.5vw, 50px); background-size: clamp(14px, 2.3vw, 18px);}
        }
        @media (max-width:640px) {
            .titleFixed .cardList .desc dt{font-size: 140%;}
        }
        @media (max-width:479px) {
            .titleFixed .cardList{grid: auto / repeat(1, 1fr);}
            .titleFixed .cardList .desc dt{font-size: 130%;}
        }

    /* waveSwiper */
        .waveSwiper{position: relative;background: var(--point-color04);padding-block: 32px;overflow: hidden;border-radius: var(--radius-20); margin-bottom: -40px;}
            .waveSwiper{&::before, &::after{position: absolute;content:'';width: 140px;height: 100%;background: var(--point-grad01);top:0;left:0;z-index: 3;}}
            .waveSwiper::after{left:auto;right:0;scale: -1 -1;}
        .waveSwiper .swiper-wrapper{transition-timing-function: linear;}
        .waveSwiper .swiper-slide{width:auto;font-size: var(--title-19);font-weight: 500;color: var(--point-white);text-align: center;font-family: var(--font-type02);display: flex;align-items: baseline;}
        .waveSwiper .swiper-slide::after{display: inline-flex; content:''; width: 6px; aspect-ratio: auto 1; border-radius: 100%; background: rgb(255 255 255 / 50%); margin-inline: 40px;}

        @media (max-width:1023px) {
            .waveSwiper{padding-block: clamp(20px, 3.7vw, 32px); margin-bottom: clamp(-40px, -4vw, 0px);}
            .waveSwiper{&::before, &::after{width: clamp(80px, 14vw, 140px);}}
            .waveSwiper .swiper-slide::after{margin-inline: clamp(25px, 4vw, 40px);}
        }
        @media (max-width:640px) {
            .waveSwiper .swiper-slide::after{width: 5px;translate: 0 -2px;}
        }
        @media (max-width:479px) {
            .waveSwiper .swiper-slide::after{width: 4px;}
        }

    /* 탭 */
        .comTab{position: relative;font-size: var(--title-20);display: flex;justify-content: center;flex-wrap: wrap;text-align: center;padding: 6px;background: var(--point-white);border-radius: 50px;width: fit-content;margin: 0 auto 50px;}
        .comTab > li{position: relative; font-size: 95%; font-weight: 500; color: var(--black-color03);}
        .comTab > li > a{display: flex;align-items: center;justify-content: center;height: 100%;padding: 14px 15px 12px;min-width: 180px;border-radius: 50px; transition: all 0.4s;}
            .comTab > li.on > a{background: var(--point-color02); color: var(--point-white);}

        .tabCont{position: relative;}
        .tabCont .item{transition: all 0.4s;}
        .tabCont .item:not(.on){opacity: 0; height: 0; overflow: hidden; translate:0 50px;}

            /* over */
            @media (hover:hover) and (pointer:fine) {
                .comTab > li:not(.on):hover > a{color: var(--point-color02);}
            }

        @media (max-width:1023px) {
            .comTab{margin-bottom: clamp(25px, 5vw, 50px);}
            .comTab > li > a{min-width: clamp(120px, 18.5vw, 180px);padding-block: clamp(12px, 1.9vw, 14px) clamp(10px, 1.7vw, 12px);}
        }
        @media (max-width:479px) {
            .comTab > li{font-size: 90%;}
        }

    /* partnerList */
        .partnerList{display: grid;grid: auto / repeat(6, 1fr);gap: clamp(10px, 1.3vw, 24px);}
        .partnerList > li{display: flex; align-items: center; justify-content: center; aspect-ratio: auto 2.55; border-radius: var(--radius-10); overflow: hidden;}

        @media (max-width:1023px) {
            .partnerList{grid: auto / repeat(5, 1fr);}
        }
        @media (max-width:860px) {
            .partnerList{grid: auto / repeat(4, 1fr);}
        }
        @media (max-width:640px) {
            .partnerList{grid: auto / repeat(3, 1fr);}
        }
        @media (max-width:479px) {
            .partnerList{grid: auto / repeat(2, 1fr);}
        }

    /* gellSwiper */
        .no_data{font-size: var(--title-17); font-weight: 400; color: var(--black-color08); text-align: center; padding-block: 30px;}
        .slideBox{width: 100%;max-width: 1610px;padding-inline: clamp(40px, 3.2vw, 55px);}
        .gellSwiper{position: relative; clip-path: inset(-2px);}
        .gellSwiper .swiper-slide{position: relative;background: var(--point-white);box-shadow: inset 0 0 0 1px var(--border-color02);border-radius: var(--radius-30);overflow: hidden;padding: 10px;display: flex;flex-direction: column;gap: 23px;height: auto;transition: box-shadow 0.4s;}
		.gellSwiper .link{position:absolute;inset: 0;z-index: 3;}
        .gellSwiper .thumb{display: block; width: 100%; aspect-ratio: auto 1.65; border-radius: var(--radius-20); overflow: hidden;}
        .gellSwiper .thumb img{width: 100%; height: 100%; object-fit: cover; transition: all 0.4s;}
        .gellSwiper .desc{font-size: var(--title-20);text-align: center;display: grid;gap: 18px;padding-bottom: 26px;}
        .gellSwiper .desc dt{font-size: 110%;font-weight: 500;color: var(--black-color03);line-height: 1.6; word-break: break-all; white-space:normal; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
        .gellSwiper .desc dd{font-size: 90%;font-weight: 500;color: var(--black-color08);display: flex;align-items: baseline;justify-content: center;gap: 10px; transition: all 0.4s;}
        .gellSwiper .desc dd::after{display: inline-flex;content:'';width: 10px;aspect-ratio: auto 1;border: 2px solid var(--black-color08);clip-path: var(--clip-poly01);rotate: -45deg;translate: 0 -3px;flex-shrink: 0;border-radius: 2px; transition: inherit;}

        #wrap .slideArw{position: absolute;inset: auto;top: 46%;left: 0;width: 30px;height: auto;aspect-ratio: auto 1;margin: 0; transition: all 0.4s;}
            #wrap .slideArw.next{left:auto; right:0; scale: -1 -1;}
            #wrap .slideArw::before{position: absolute;content:'';width: 66%;aspect-ratio: auto 1;border: 2px solid var(--black-color10);clip-path: var(--clip-poly01);rotate: 135deg;top: 50%;left: 50%;translate: -50% -50%;border-radius: 2px; transition: inherit;}
            #wrap .slideArw::after{display: none;}

            /* over */
            @media (hover:hover) and (pointer:fine) {
                .gellSwiper .swiper-slide:hover{box-shadow: inset 0 0 0 2px var(--point-color06);}
                .gellSwiper .swiper-slide:hover .thumb img{scale: 1.1;}
                .gellSwiper .swiper-slide:hover .desc dd{color: var(--point-color02);-webkit-text-stroke: var(--point-color02);-webkit-text-stroke-width: 0.2px;}
                .gellSwiper .swiper-slide:hover .desc dd::after{border-color: var(--point-color02);}

                #wrap .slideArw:hover::before{border-color: var(--black-color03);}
            }

        @media (max-width:1023px) {
            .gellSwiper .swiper-slide{gap: clamp(15px, 2.3vw, 23px);}
            .gellSwiper .desc{gap: clamp(12px, 1.8vw, 18px); padding-bottom: clamp(15px, 2.6vw, 26px);}
        }
        @media (max-width:640px) {
            .slideBox{padding-inline: 0;}
            .gellSwiper{clip-path: none;}
			.gellSwiper .desc dd{gap: 7px;}
            .gellSwiper .desc dd::after{width: 9px;}
            #wrap .slideBox .slideArw{display: none;}
        }
        @media (max-width:479px) {
            .gellSwiper .desc dt{font-size: 100%;}
            .gellSwiper .desc dd::after{width: 8px;}
        }

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

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    /* footer */
        #footer{position: relative;background: var(--point-color06);border-radius: var(--radius-20);font-size: var(--title-17);color: rgb(255 255 255 / 60%);line-height: 1.6;font-weight: 300;}
        #footer .gnb{position: relative;padding-block: 100px 60px;display: grid;gap: clamp(15px, 1.4vw, 24px);grid: auto / repeat(6, 1fr);border-bottom: 1px solid rgb(255 255 255 / 20%);}
        #footer .gnb > li{position: relative;}
        #footer .gnb > li > a{display: flex;font-size: var(--title-18);font-weight: 500;color: var(--point-white);line-height: 1.4;}
        #footer .gnb .dep02{padding-top: 24px;display: grid;gap: 16px;}
        #footer .gnb .dep02 > li{position: relative;}
        #footer .gnb .dep02 > li > a{display: block;}
        #footer .cont{position: relative; padding-block: 60px 80px;display: grid;gap: 40px;}
        #footer .cont::before{position: absolute;content:'';width: 289px;aspect-ratio: auto 1.43;background: url('../images/skin/ci.svg') no-repeat center / 100% auto;right: 0;bottom: 0;opacity: 0.1;}
        #footer .logo{position: relative;max-width: 300px;}
        #footer .addr_list{position: relative;display: grid;gap: 8px;}
        #footer .addr_list > li{display: flex;flex-wrap: wrap;row-gap: 8px;}
        #footer .addr_list .desc{display: flex;align-items: baseline;}
        #footer .addr_list .desc dt{flex-shrink: 0;font-weight: 400;color: var(--point-white);padding-right: 14px;}
		#footer .addr_list .desc dd::after{display: inline-flex;content:'';width: 4px;aspect-ratio: auto 1;border-radius: 100%;background: rgb(255 255 255 / 20%);margin-inline: 20px;translate: 0 -3px;}
            #footer .addr_list .desc:last-child dd::after{display: none;}
        #footer .ftr_sec{position: relative;background: var(--point-white);display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 15px 30px;border-radius: var(--radius-20) var(--radius-20) 0 0;padding: 23px clamp(20px, 2.7vw, 50px);margin-bottom: 40px;}
            #footer .ftr_sec{&::before, &::after{position: absolute;content:'';width: 45px;aspect-ratio: auto 1;bottom: 0;right: 100%;box-shadow: 23px 23px 0 0 var(--point-white);border-radius: 100%;}}
            #footer .ftr_sec::after{right:auto;left:100%;scale: -1 1;}
        #footer .copy{display: flex;align-items: center;flex-wrap: wrap;gap: 3px 20px;font-size: var(--title-14);font-weight: 400;color: var(--black-color09);font-family: var(--font-type03);}
        #footer .copy :where(dt, dd){letter-spacing: -0.02em;}
        #footer .copy dt{color: var(--black-color05);}
        #footer .link_list{display: flex;}
        #footer .link_list > li{font-size: var(--title-16);font-weight: 400;color: var(--black-color05);}
            #footer .link_list > li::after{display: inline-flex;content:'';width: 4px;aspect-ratio: auto 1;border-radius: 100%;background: rgb(85 85 85 / 30%);margin-inline: 17px;translate: 0 -3px;}
            #footer .link_list > li:last-child::after{display: none;}
        #footer .link_list strong{font-weight: 600;}

        @media (max-width:1023px) {
            #footer .gnb{display: none;}
            #footer .cont{padding-block: clamp(35px, 6vw, 60px) clamp(50px, 8vw, 80px);gap: clamp(25px, 4vw, 40px);}
            #footer .cont::before{width: clamp(100px, 28.9vw, 289px);}
            #footer .logo{max-width: clamp(180px, 25vw, 240px);}
            #footer .addr_list{gap: clamp(6px, 1vw, 8px);}
            #footer .addr_list > li{row-gap: clamp(6px, 1vw, 8px);}
            #footer .addr_list .desc dd::after{margin-inline: clamp(12px, 1.8vw, 18px);opacity: 0;}
            #footer .ftr_sec{padding-block: clamp(18px, 2.8vw, 23px);margin-bottom: clamp(15px, 4vw, 40px);}
            #footer .link_list > li::after{margin-inline: clamp(13px, 1.7vw, 17px);}
            #footer .ftr_sec{&::before, &::after{width: clamp(30px, 4.5vw, 45px);box-shadow: calc(clamp(30px, 4.5vw, 45px) / 2) calc(clamp(30px, 4.5vw, 45px) / 2) 0 0 var(--point-white);}}
        }
        @media (max-width:479px) {
            #footer .link_list > li::after{width: 3px;}
        }

    /* 퀵 */
        .quick_list{position: fixed;right: clamp(30px, 3.2vw, 60px);bottom: clamp(30px, 2.65vw, 50px);z-index: 50;display: grid;justify-items: end;gap: 10px; opacity: 0; pointer-events: none; transition: all 0.4s;}
            body:has(#header.on:not(.end)) .quick_list{opacity: 1; pointer-events: auto;}
        .quick_list > li{position: relative;background:var(--point-color02);border-radius: 60px;overflow: hidden;}
        .quick_list > li:nth-child(2n){background: var(--point-color03);}
        .quick_list .link{position: absolute; inset: 0; z-index: 3;}
        .quick_list .desc{display: grid;grid-template-columns: auto minmax(0, 0fr);align-items: center;overflow: clip;transition: all 0.4s;}
        .quick_list .desc dt{display: flex;align-items: center;justify-content: center;width: 60px;height: 60px;padding: 12px;}
        .quick_list .desc dd{font-size: var(--title-18);font-weight: 500;color: var(--point-white);overflow-y: hidden;width: max-content;opacity: 0;transition: all 0.4s;}

            @media (hover:hover) and (pointer:fine) {
                .quick_list > li:hover .desc{grid-template-columns: auto minmax(0, 1fr); padding-right:12px;}
                .quick_list > li:hover .desc dd{opacity: 1; translate:-8px;}
            }

        @media (max-width:1023px) {
            .quick_list .desc dt{width: clamp(40px, 6vw, 60px);height: clamp(40px, 6vw, 60px);}
			.quick_list .desc dd{translate:0 !important;}
        }
        @media (max-width:860px) {
            .quick_list{right:15px; bottom:15px;}
        }