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

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

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

/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
    #wrap {position:relative; width: 100%; overflow: clip; box-sizing: border-box;}
    
    #container, .w_custom{position: relative; width: calc(100% - 60px); max-width: 1500px; margin:0 auto; box-sizing: border-box;}
    #container{max-width: 1400px; padding-bottom: 150px;}
        #container:has(.full_sec){width: 100%; max-width: 100%;}
        #container:has(.btm_dn){padding-bottom: 0;}

	@media screen and (max-width:860px) {
        #container, .w_custom{width: calc(100% - 30px);}
	}
    @media screen and (max-width:640px) {
        #container{padding-bottom: 120px;}
	}
    @media screen and (max-width:479px) {
        #container{padding-bottom: 100px;}
	}
    @media screen and (max-width:320px) {
        #container, .w_custom{width: calc(100% - 20px);}
	}


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

    #header{position: fixed;top:0;left:0;width: 100%;z-index: 99;height: 155px; transition: all 0.4s;}
    #header .w_custom{max-width: 1700px;height: 100%;display: flex;align-items: center;justify-content: space-between; gap: 20px;}
    #header .logo{font-size: 0; height: 100%; font-size: 0;}
    #header .logo a{display: flex; align-items: center; height: 100%; padding:20px 0; box-sizing: border-box;}
    #header .logo object{pointer-events: none;}
    #header .gnb{position: absolute;top:0;left: 53%;transform: translateX(-50%);height: 100%;display: flex;justify-content: center;text-align: center;font-size: var(--title-20);}
    #header .gnb > li{position: relative; height: 100%; box-sizing: border-box;}
    #header .gnb > li > a{display: flex;align-items: center;height: 100%;font-weight: 500;color: var(--point-color01);padding: 0 clamp(10px, 2.1vw, 40px); filter: var(--filter-white);}
    #header .gnb .dep02{position: absolute;top:80%;left:50%;transform: translateX(-50%);background: var(--point-white);padding: 12px 0;width: max-content;min-width: 140px;box-sizing: border-box;opacity: 0;pointer-events: none;transition: all 0.4s;border: 1px solid var(--border-color01);border-radius:10px;}
    #header .gnb .dep02 > li{font-size: 80%;}
    #header .gnb .dep02 > li > a{display: block; padding:7px 25px; font-weight: 400; color: var(--black-color06); box-sizing: border-box;}
    #header .util{display: flex;align-items: center;gap: 25px;}
    #header .all_cate{display: none;flex-direction: column;align-items: center;justify-content: space-between;width: 35px;height: 32px;box-sizing: border-box;}
    #header .all_cate span{width: 100%;height: 3px;background: var(--point-white);}

        /* over */
            @media screen and (min-width:1024px){
                #header:hover{background: rgba(0,0,0,0.3); backdrop-filter: blur(5px);}
                #header .gnb > li:hover > a{filter: none;}
                #header .gnb > li:hover .dep02{opacity: 1; pointer-events: all;}
                #header .gnb .dep02 > li > a:hover{color: var(--black-color00);}
            }

         /* on */
            #header.on{background: rgba(0,0,0,0.3); backdrop-filter: blur(5px); height:120px;}

    @media screen and (max-width:1400px){
        #header .logo a{max-width: clamp(250px, 22vw, 310px);}
        #header .gnb > li{font-size: 90%;}
        #header .gnb > li > a{padding: 0 1.5vw;}
    }
    @media screen and (max-width:1200px){
        #header .gnb > li > a{padding: 0 1vw;}
    }
    @media screen and (max-width:1023px){
        #header{height: clamp(70px, 15.5vw, 155px);}
            #header.on{height:clamp(65px, 12vw, 120px);}
        #header .gnb{display: none;}
        #header .all_cate{display: flex;width: 35px;height: 32px;}
    }
    @media screen and (max-width:640px){
        #header .util{gap: 20px;}
        #header .all_cate{width: 30px;height: 25px;}
    }
    @media screen and (max-width:479px){
        #header .btn{display: none;}
        #header .all_cate{width: 28px;height: 22px;}
        #header .all_cate span{height: 2px;}
    }

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

	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: 10vh 0;box-sizing: border-box;opacity: 0; clip-path: inset(0 0 0 100%); transition: all 0.6s;}
        #aside.on{opacity: 1; clip-path: inset(0 0 0 0);}
        body:has(#aside.on){overflow: hidden; touch-action: none;}
    #aside .w_custom{flex-shrink: 0;}
    #aside .gnb{width: 100%;font-size: var(--title-20);letter-spacing: 0;}
    #aside .gnb > li{display: flex; align-items: center; justify-content: space-between; gap: 30px; color: var(--point-white); border-bottom: 1px solid rgba(255,255,255,0.2)}
    #aside .gnb > li > a{display: block; font-size: 240%; font-weight: 500; line-height: 1.2; padding:30px 0; flex-shrink: 0; transition: all 0.4s;}
    #aside .gnb .dep02{display: flex; flex-wrap: wrap;}
    #aside .gnb .dep02 > li > a{display: inline-block;font-size: 100%;font-weight: 300;padding:10px 0;transition: all 0.4s;opacity: 0.6;}
    #aside .gnb .dep02 > li:not(:last-child):after{display: inline-flex; content:'/'; margin:0 20px; opacity: 0.6;} 
    #aside .close_btn{position: absolute;top: 50px;right: 50px;width: 40px;height: 40px;z-index: 9;}
    #aside .close_btn span{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%) rotate(45deg); width: 100%; height: 2px; background: var(--point-white);}
    #aside .close_btn span + span{transform: translate(-50%, -50%) rotate(-45deg);}
    #aside .link_list{display: flex;flex-wrap: wrap;justify-content: center;gap: 20px;font-size: var(--title-20);margin-top: 50px;}
    #aside .link_list > li > a{position: relative; display: flex; align-items: center; justify-content: center; height: 50px; padding:0 24px; text-align: center; box-sizing: border-box; border-radius: 60px; box-shadow: inset 0 0 0 1px var(--black-color11); font-size: 90%; font-weight: 600; color: var(--black-color11); letter-spacing: 0.01em; transition: all 0.4s; overflow: hidden;}
    #aside .link_list > li > a:before{position: absolute; content:''; top:0; left:0; background: var(--black-color11); width: 100%; height: 100%; clip-path: circle(0 at 0 100%); transition: all 0.6s;}
    #aside .link_list > li:last-child > a:before{background: var(--point-color01);}
    #aside .link_list > li > a span{position: relative; z-index: 3; filter: var(--filter-white); transition: all 0.4s;}

    /* over */
        @media screen and (min-width:1024px){
            #aside .gnb > li:hover > a{color: var(--point-color01);}
            #aside .gnb .dep02 > li > a:hover{opacity: 1;}
            #aside .link_list > li > a:hover:before{clip-path: circle(150% at 0 100%);}
        }

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


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

	MAIN | index.html

───────────────────────────────────────────────────────────*/
    /* 비주얼 */
        .visual_wrapper{position: sticky;top:0;}
        .main_visual{position: relative; overflow: hidden; box-sizing: border-box; background: var(--black-color00);}
        .main_visual .slick-slide{position: relative; height: 103.2vh; overflow: hidden; box-sizing: border-box;}
        .main_visual .thumb{width: 100%; height: 100%; background: no-repeat center / cover; box-sizing: border-box; transition: all 8s;}
        .main_visual .active .thumb{transform: scale(1.15);}
        .main_visual .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5;}
        .main_visual .txt_box{position: absolute; top:0; left:50%; transform: translateX(-50%); display: flex; flex-direction: column; justify-content: center; height: 100%; font-size: var(--title-20); color: var(--point-white); gap: 30px; z-index: 3;}
        .main_visual .txt_box h2{font-size: 350%;font-weight: 600;line-height: 1.23;letter-spacing: -0.05em;}
            .main_visual .txt_box h2 + p{margin-top: 20px;}
        .main_visual .txt_box h5{font-size: 140%;font-weight: 300;line-height: 1.35;letter-spacing: -0.04em;}
        .main_visual .txt_box p{font-size: inherit;font-weight: 300;line-height: 1.6;letter-spacing: -0.04em;}
        .main_visual .txtAni{position: relative; transform: translateY(70px); opacity: 0; transition: all 0.8s; transition-delay: 0.1s;}
            .main_visual .active .txtAni{transform: translate(0); opacity: 1;}
            .main_visual .txtAni:nth-child(2){transition-delay: 0.1s;}
            .main_visual .txtAni:nth-child(3){transition-delay: 0.2s;}
            .main_visual .txtAni:nth-child(4){transition-delay: 0.3s;}
        .main_visual .controller{display: flex;align-items: center;flex-wrap: wrap;position: absolute;bottom: 8.8%;left:50%;transform: translateX(-50%);gap: 40px; z-index: 9;}
        .main_visual .slick-dots{display: flex;flex-wrap: wrap;gap: 30px;box-sizing: border-box; font-size: 0;}
        .main_visual .slick-dots li{position: relative;}
        .main_visual .slick-dots li button{position: relative;font-size: 0;width: 8px;height: 8px;box-sizing: border-box; transition: all 0.4s;}
            .main_visual .slick-dots li button:before{position: absolute;content:'';width: 8px;height: 8px;border-radius: 100%;transform: translate(-50%, -50%);background: rgba(255,255,255,0.5);transition: all 0.4s;}
            .main_visual .slick-dots .slick-active button{width: 40px;}
            .main_visual .slick-dots .slick-active button:before{background: var(--point-white);}
        .main_visual .slick-dots .circle_svg{opacity: 0; pointer-events: none;}
        .main_visual .slick-dots .slick-active .circle_svg {opacity: 1;}
        .main_visual .counter{display: flex; width: 62px; justify-content: space-between; font-size: var(--title-20); font-weight: 300; color: var(--point-white); font-family: var(--font-type02);}
        .main_visual .counter .slideCountItem{font-weight: 600;}
        .main_visual .arw_box{display: flex;align-items: center;gap: 10px;}
        .main_visual .slick-arrow{position: relative; width: 30px; height: 30px;}
            .main_visual .slick-arrow:before{position: absolute;content:'';width: 40%;height: 40%;border:solid var(--point-white);border-width: 0 0 2px 2px;box-sizing: border-box;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(45deg);}
            .main_visual .slick-arrow.next{transform: scale(-1,-1);}

        .main_visual .circle_svg{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%) rotate(-90deg); transition: all 0.4s;} 
        .main_visual .circleBg {fill: rgba(255, 255, 255, 0); stroke: rgba(255, 255, 255, 0.2); stroke-width: 1; stroke-linecap: butt;}
        .main_visual .circleFill {fill: rgba(255, 255, 255, 0); stroke: var(--point-white); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 260px;stroke-dashoffset: 260;}

        @media screen and (max-width:1023px){
            .main_visual .slick-slide{height:100vh;}
            .main_visual .txt_box{gap: clamp(10px, 3vw, 30px);}
            .main_visual .txt_box h2 + p{margin-top: clamp(10px, 2vw, 20px);}
            .main_visual .controller{bottom:10%;}
        }
        @media screen and (max-width:860px){
            .main_visual .txt_box h2{font-size: 310%;}
            .main_visual .txt_box h5{font-size: 130%;}
            .main_visual .txt_box p{font-size: 90%;}

            .main_visual .controller{gap: 30px;}
            .main_visual .arw_box{gap: 5px;}
            .main_visual .slick-dots{gap: 25px;}
        }
        @media screen and (max-width:640px){
            .main_visual .txt_box h2{font-size: 270%;}
            .main_visual .txt_box h5{font-size: 120%;}

            .main_visual .controller{gap: 20px;}
            .main_visual .slick-dots{gap: 20px;}
            .main_visual .slick-dots li button{width: 6px;height: 6px;}
            .main_visual .slick-dots li button:before{width: 6px;height: 6px;}
            .main_visual .slick-dots .slick-active button{width: 30px;}
            .main_visual .circle_svg{transform:translate(-50%, -50%) rotate(-90deg) scale(0.715);}
            .main_visual .arw_box{gap: 0;}
            .main_visual .counter{width: 55px;}
            .main_visual .counter span{font-size: 90%;}
            .main_visual .controller{bottom:15%;}
        }
        @media screen and (max-width:479px){
            .main_visual .txt_box h2{font-size: 230%;}
            .main_visual .txt_box h5{font-size: 110%;}

            .main_visual .controller{gap: 15px;}
            .main_visual .slick-arrow{width: 26px; height: 26px;}
            .main_visual .slick-dots{gap: 15px;}
            .main_visual .slick-dots li button{width: 5px;height: 5px;}
            .main_visual .slick-dots li button:before{width: 5px;height: 5px;}
            .main_visual .slick-dots .slick-active button{width: 26px;}
            .main_visual .circle_svg{transform: translate(-50%, -50%) rotate(-90deg) scale(0.62);}
        }

    /* 공통 요소 */
        .main_content{position: relative;background: var(--point-white);border-radius: 100px 100px 0 0;box-sizing: border-box;z-index: 5;}
        .main_title{position: relative; font-size: var(--title-20); box-sizing: border-box;}
            .main_title.hd{margin-bottom: 57px;}
            .main_title.hd_s{margin-bottom: 32px;}
            .main_title.hd_m{margin-bottom: 43px;}
            .main_title.hd_ml{margin-bottom: 55px;}
            .main_title.hd_lg{margin-bottom: 65px;}
            .main_title.cen{text-align: center;}
            .main_title.hd_top{margin-top: 107px;}
            .main_title.hd_topL{margin-top: 96px;}
            .main_title.hd_topM{margin-top: 84px;}
            .main_title.hd_topXS{margin-top: 10px;}
        .main_title h2{font-size: 350%;font-weight: 600;color: var(--black-color02);line-height: 1.1;letter-spacing: -0.04em;}
        .main_title h3{font-size: 250%;font-weight: 500;color: var(--black-color02);line-height: 1.15;letter-spacing: -0.04em;}
            .main_title h3 + h4{margin-top: 63px;}
            .main_title h3 + h5{margin-top: 32px;}
            .main_title h3 + h6{margin-top: 28px;}
            .main_title h3 + .nav_tab{margin-top: 66px;}
        .main_title h4{font-size: 160%;font-weight: 600;color: var(--black-color02);line-height: 1.3;letter-spacing: -0.04em;}
            .main_title h4 + h6.light{margin-top: 27px;}
            .main_title h4 + p{margin-top: 25px;}
        .main_title h4 em{font-weight: inherit; color: var(--point-color01);}
        .main_title h5{font-size: 120%;font-weight: 400;color: var(--black-color02);line-height: 1.4;letter-spacing: -0.04em;}
            .main_title h5 + h2{margin-top: 30px;}
            .main_title h5 + h3{margin-top: 20px;}
            .main_title h5 + h4{margin-top: 73px;}
            .main_title h5 + h6.light{margin-top: 47px;}
        .main_title h5 em{font-weight: inherit;color: var(--point-color01);font-family: var(--font-type02);letter-spacing: 0;}
            .main_title h5.bullet{display: flex;align-items: baseline;gap: 10px;font-weight: 500;}
            .main_title h5.bullet:before{display: inline-flex;content:'';width: 8px;height: 8px;border-radius: 100%;background: var(--point-color01);transform: translateY(-5px);flex-shrink: 0;}
        .main_title h6{font-size: 110%; font-weight: 500; color: var(--black-color02); line-height: 1.45; letter-spacing: -0.04em;}
            .main_title h6.light{font-weight: 400; color: var(--black-color05); line-height: 1.63;}
            .main_title h6.light strong{font-weight: inherit; color: var(--black-color02);}
            .main_title h6.light + h4{margin-top: 67px;}
            .main_title h6.light + .box_list{margin-top: 40px;}
            .main_title h6 + p{margin-top: 10px;}
        .main_title h6 em{font-weight: 600; color: var(--point-color01);}
        .main_title p{font-size: 90%; font-weight: 400; color: var(--black-color05); line-height: 1.78; letter-spacing: -0.04em;}
            .main_title p + h6{margin-top: 25px;}
            .main_title p + p{margin-top: 15px;}
        .main_title .w_custom > span{display: block;font-size:120%;color:inherit;font-weight:inherit;margin-top:32px;letter-spacing:-0.05em;}
        .main_title .icon_list{display: flex; flex-wrap: wrap; align-items: center; gap: 15px 40px;}
        .main_title .box_list{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px;}
        .main_title .box_list > li{padding:13px 30px; border-radius: 50px; background: var(--point-color15); max-height: 50px; box-sizing: border-box;}
            .main_title .box_list > li:nth-child(2){background: var(--point-color16);}
        .main_title .box_list h5.bullet{font-size: 90%; font-weight: 400;}
        .main_title .box_list > li:nth-child(1) h5.bullet:before{background: var(--point-color17);}
        .main_title .box_list h5.bullet:before{transform: translateY(-4px);}
        .main_title .nav_tab + h6.light{margin-top: 58px;}

        @media screen and (max-width:1023px){
            .main_title.hd{margin-bottom: clamp(30px, 5.7vw, 57px);}
            .main_title.hd_lg{margin-bottom: clamp(30px, 6.5vw, 65px);}
            .main_title.hd_top{margin-top: clamp(70px, 10.7vw, 107px);}
            .main_title.hd_topL{margin-top: clamp(50px, 9.6vw, 96px);}
            .main_title.hd_topM{margin-top: clamp(40px, 8.4vw, 84px);}
            .main_title.hd_m{margin-bottom: clamp(20px, 4.3vw, 43px);}
            .main_title.hd_ml{margin-bottom: clamp(30px, 5.5vw, 55px);}
            .main_title.hd_s{margin-bottom: clamp(15px, 3.2vw, 32px);}
            .main_title h2{font-size: 320%;}
            .main_title h3{font-size: 230%;}
            .main_title h3 + h4{margin-top: clamp(30px, 6.3vw, 63px);}
            .main_title h3 + h5{margin-top: clamp(15px, 3.2vw, 32px);}
            .main_title h3 + h6{margin-top: clamp(15px, 2.8vw, 28px);}
            .main_title h3 + .nav_tab{margin-top: clamp(30px, 6.6vw, 66px);}
            .main_title h4 + p{margin-top: clamp(15px, 2.5vw, 25px);}
            .main_title h5 + h2{margin-top: clamp(15px, 3vw, 30px);}
            .main_title h5 + h3{margin-top: clamp(10px, 2vw, 20px);}
            .main_title h5 + h4{margin-top: clamp(30px, 7.3vw, 73px);}
            .main_title h5 + h6.light{margin-top: clamp(25px, 4.7vw, 47px);}
            .main_title h6.light + h4{margin-top: clamp(30px, 6.7vw, 67px);}
            .main_title h6.light + .box_list{margin-top: clamp(25px, 4vw, 40px);}
            .main_title h6 + p{margin-top: clamp(5px, 1vw, 10px);}
            .main_title p + h6{margin-top: clamp(20px, 2.5vw, 25px);}
            .main_title p + p{margin-top: clamp(10px, 1.5vw, 15px);}
            .main_title .icon_list{column-gap: clamp(25px, 4vw, 40px);}
            .main_title .box_list{gap: 15px;}
            .main_title .nav_tab + h6.light{margin-top: clamp(30px, 5.8vw, 58px);}
        }
        @media screen and (max-width:860px){
            .main_content{border-radius: 75px 75px 0 0;}
            .main_title h2{font-size: 290%;}
            .main_title h3{font-size: 210%;}
            .main_title h5{font-size: 110%;}
                .main_title h5.bullet{gap: 8px;}
                .main_title h5.bullet:before{width: 7px; height: 7px; transform: translateY(-4px);}
            .main_title h6{font-size: 100%;}
        }
        @media screen and (max-width:640px){
            .main_content{border-radius: 50px 50px 0 0;}
            .main_title h2{font-size: 260%;}
            .main_title h3{font-size: 190%;}
            .main_title h5{font-size: 100%;}
                .main_title h5.bullet:before{width: 6px; height: 6px;}
            .main_title h6{font-size: 90%;}
            .main_title .w_custom > span{margin-top:20px;}
            .main_title .box_list h5.bullet:before{transform: translateY(-3px);}
            .main_title .box_list > li{padding:13px 25px;}
        }
        @media screen and (max-width:479px){
            .main_content{border-radius: 25px 25px 0 0;}
            .main_title h2{font-size: 230%;}
            .main_title .w_custom > span{margin-top:10px;}
            .main_title .box_list{gap: 10px;}
            .main_title .box_list > li{padding:13px 20px;}
        }

    /* 그래프 */
        .main_graph{position: relative;padding: 143px 0 clamp(200px, 19vw, 360px);box-sizing: border-box;}
        .main_graph .info_desc{font-size: var(--title-20); font-family: var(--font-type02);}
        .main_graph .info_desc :where(dt, dd){font-weight: 700; color: var(--black-color02); line-height: 1.1;}
        .main_graph .info_desc dt{font-size: 500%; clip-path: inset(0 100% 0 0); width: fit-content; transition: 0s;}
            .main_graph .info_desc.aos-animate dt{clip-path: inset(0 0 0 0);transition: all 0.6s;}
            .main_graph .info_desc dt + dd{margin-top: 15px; padding-left: 104px;}
        .main_graph .info_desc dd{font-size: 450%;display: flex;flex-direction: column;gap: 48px;}
        .main_graph .info_desc dd em{display: block; font-weight: inherit; clip-path: inset(0 100% 0 0); width: fit-content; transition: 0s;}
            .main_graph .info_desc.aos-animate dd em{clip-path: inset(0 0 0 0);transition: all 0.8s;transition-delay: 0.6s;}
        .main_graph .info_desc dd small{display: block;font-size: 33.3%;font-weight: 400;color: var(--black-color05);line-height: 1.53;letter-spacing: -0.04em; clip-path: inset(0 100% 0 0); width: fit-content; transition: 0s;}
        .main_graph .info_desc.aos-animate dd small{clip-path: inset(0 0 0 0);transition: all 1s;transition-delay: 1.2s;}
        .main_graph .thumb{position: absolute; left:0; bottom:0; width: 100%; clip-path: inset(0 100% 0 0); transition: 0s;}
            .main_graph .thumb.aos-animate{clip-path: inset(0 0 0 0); transition: all 1.8s; transition-delay: 1.6s; transition-timing-function: linear;}

        @media screen and (max-width:1023px){
            .main_graph{padding-top: clamp(70px, 14.3vw, 143px);}
            .main_graph .info_desc dt{font-size: clamp(50px, 10vw , 100px);}
            .main_graph .info_desc dt + dd{margin-top: clamp(5px, 1.5vw, 15px);padding-left: clamp(30px, 10.4vw, 104px);}
            .main_graph .info_desc dd{font-size: clamp(40px, 9vw , 90px); gap: clamp(15px, 4.8vw, 48px);}
        }
        @media screen and (max-width:640px){
            .main_graph{padding-bottom: clamp(70px, 30vw, 200px);}
        }

    /* 서비스 */
        .main_service{padding:120px 0 159px;}
        .main_service .exp_list{display: flex; flex-wrap: wrap; gap: 29px;}
        .main_service .exp_list > li{position: relative;width: calc(100% / 3 - 19.34px);padding: 60px 50px;overflow: hidden;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-between;gap: 218px;}
        .main_service .exp_list > li:before{position: absolute;content:'';width: 67px;height: 66px;background: url('../images/skin/main_service_ov.png') no-repeat right bottom / 100% auto;right: -1px;bottom:0;z-index: 2; opacity: 0; transition: all 0.4s;}
        .main_service .exp_list .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5;}
        .main_service .exp_list .thumb{position: absolute;top:0;left:0;width: 100%;height: 100%;overflow: hidden;border-radius: 20px 20px 60px;}
        .main_service .exp_list .thumb img{width: 100%; height: 100%; object-fit: cover; transition: all 0.4s;}
        .main_service .exp_list .desc{position: relative; font-size: var(--title-20); z-index: 3;  box-sizing: border-box; color: var(--point-white);}
        .main_service .exp_list .desc dt{font-size: 210%;font-weight: 500;line-height: 1.28;letter-spacing: -0.04em;}
        .main_service .exp_list .desc dt + dd{margin-top: 32px;}
        .main_service .exp_list .desc dd{font-size: inherit;font-weight: 400;line-height: 1.6;letter-spacing: -0.04em;}
        .main_service .exp_list .arw{position: relative;display: block;width:60px;height:60px;border-radius: 100%;background: var(--point-white); transition: all 0.4s;}
            .main_service .exp_list .arw:before, .main_service .exp_list .arw:after{position: absolute;content:'';width: 37%;height: 2px;background: var(--black-color02);top:50%;left:50%;transform: translate(-50%, -50%); transition: all 0.4s;}
            .main_service .exp_list .arw:after{transform: translate(-50%, -50%) rotate(90deg);}

        /* over */
            @media screen and (min-width:1024px){
                .main_service .exp_list > li:hover:before{opacity: 1;}
                .main_service .exp_list > li:hover .thumb img{transform: scale(1.1);}
                .main_service .exp_list > li:hover .arw{background: var(--point-color01); transform: rotate(90deg);}
                .main_service .exp_list > li:hover .arw:before, .main_service .exp_list > li:hover .arw:after{filter: var(--filter-white);}
            }

        @media screen and (max-width:1200px){
            .main_service .exp_list{gap: 20px;}
            .main_service .exp_list > li{width: calc(100% / 3 - 13.34px); padding:50px 40px;}
            .main_service .exp_list .desc dt{font-size: 190%;}
            .main_service .exp_list .desc dd{font-size: 90%;}
        }
        @media screen and (max-width:1023px){
            .main_service{padding:clamp(70px, 12vw, 120px) 0 clamp(70px, 15.9vw, 159px);}
            .main_service .exp_list{gap: 15px;}
            .main_service .exp_list > li{width: calc(100% / 2 - 7.5px);padding:clamp(35px, 5vw, 50px) clamp(30px, 4vw, 40px);gap: clamp(50px, 21.8vw, 218px);}
            .main_service .exp_list .desc dt + dd{margin-top: clamp(15px, 3.2vw, 32px);}
        }
        @media screen and (max-width:860px){
            .main_service .exp_list .thumb{border-radius: 15px 15px 45px;}
            .main_service .exp_list .arw{width:55px; height: 55px;}
        }
        @media screen and (max-width:640px){
            .main_service .exp_list > li{width: 100%;}
            .main_service .exp_list .thumb{border-radius: 10px 10px 30px;}
            .main_service .exp_list .arw{width:50px; height: 50px;}
        }
        @media screen and (max-width:479px){
            .main_service .exp_list .desc dt{font-size: 170%;}
            .main_service .exp_list .arw{width:45px; height: 45px;}
        }

    /* 공지사항 */
        .main_notice{padding: 110px 0 0;background: var(--gray-bg02);}
        .main_notice .main_title{padding-right: 150px;}
        .main_notice .noticeSwiper{overflow: hidden;padding: 57px 0 140px;}
        .main_notice .noticeSwiper .swiper-slide{background: var(--point-white);padding: 48px 50px 45px;box-sizing: border-box;font-size: var(--title-20);display: flex;flex-direction: column;justify-content: space-between;gap: 63px;height: auto;border:1px solid var(--border-color03);border-radius: var(--radius-10);overflow: hidden; transition: all 0.4s;}
            .main_notice .noticeSwiper .swiper-slide:before{position: absolute; content:''; width: 100%; height: 100%; top:0; left:0; border: 2px solid var(--point-color01); box-sizing: border-box; border-radius: inherit; opacity: 0; transition: inherit;}
		.main_notice .noticeSwiper .link{position:absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 5;}
        .main_notice .noticeSwiper .desc dt{font-size: 120%;font-weight: 400;color: var(--black-color02);line-height: 1.58;letter-spacing: -0.04em;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
			.main_notice .noticeSwiper .desc dt + dd{margin-top: 21px;}
        .main_notice .noticeSwiper .desc dd{font-size:inherit;font-weight: 400;color: var(--black-color06);line-height: 1.7;letter-spacing: -0.04em;white-space: normal;overflow:hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
        .main_notice .noticeSwiper .date{font-size:inherit; font-weight: 400; color: var(--black-color10); line-height: 1.7; font-family: var(--font-type02);}
        .main_notice .controller{position: absolute;right:0;bottom: 4px;display: flex;flex-wrap: wrap;gap: 20px;}
        .main_notice .controller [class^='swiper-button']{position: relative; top:auto; left:auto; right:auto; margin:0; width: 60px; height: 60px; border:1px solid var(--border-color01); border-radius: 100%; box-sizing: border-box; background: var(--point-white); transition: all 0.4s;}
            .main_notice .controller [class^='swiper-button'] + [class^='swiper-button']{transform: scale(-1,-1);}
            .main_notice .controller [class^='swiper-button']:before{position: absolute;content:'';width: 11px;height: 11px;border:solid var(--black-color08);border-width: 0 0 2px 2px;top: 50%;left: 52%;transform: translate(-50%, -50%) rotate(45deg);box-sizing: border-box;transition: all 0.4s;}
            .main_notice .controller [class^='swiper-button']:after{display: none;}
        .main_notice .swiper-pagination{position: relative; top:auto; left:auto; margin-top: 60px; width: 100%; height: 3px; background: var(--border-color04);} 
        .main_notice .swiper-pagination .swiper-pagination-progressbar-fill{background: var(--black-color02);}

            /* over */
                @media screen and (min-width:1024px){
                    .main_notice .noticeSwiper .swiper-slide:hover{box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.12);}
                    .main_notice .noticeSwiper .swiper-slide:hover:before{opacity: 1;}
                    .main_notice .controller [class^='swiper-button']:hover{border-color: var(--point-color02);}
                    .main_notice .controller [class^='swiper-button']:hover:before{border-color: var(--point-color02);}
                }

        @media screen and (max-width:1500px){
            .main_notice .noticeSwiper{overflow: visible;}
        }
        @media screen and (max-width:1200px){
            .main_notice .noticeSwiper .swiper-slide{padding:43px 45px 40px;}
        }
        @media screen and (max-width:1023px){
            .main_notice{padding-top:clamp(70px, 11vw, 110px);}
            .main_notice .noticeSwiper{padding:clamp(30px, 5.7vw, 57px) 0 clamp(70px, 14vw, 140px)}
            .main_notice .noticeSwiper .swiper-slide{padding:clamp(25px, 4.3vw, 43px) clamp(25px, 4.5vw, 45px) clamp(25px, 4vw, 40px); gap: clamp(30px, 6.3vw, 63px);}
            .main_notice .noticeSwiper .desc dt + dd{margin-top: clamp(10px, 2.1vw, 21px);}
            .main_notice .swiper-pagination{margin-top: clamp(30px, 6vw, 60px);}
            .main_notice .controller{gap: 15px;}
            .main_notice .controller [class^='swiper-button']{width: 55px; height: 55px;}
        }
        @media screen and (max-width:860px){
            .main_notice .noticeSwiper .desc dt{font-size: 110%;}
            .main_notice .noticeSwiper :is(.desc dd, .date){font-size: 90%;}
            .main_notice .controller [class^='swiper-button']{width: 50px; height: 50px;}
        }
        @media screen and (max-width:640px){
            .main_notice .swiper-pagination{height: 2px;}
            .main_notice .controller{gap: 10px;}
            .main_notice .controller [class^='swiper-button']{width: 45px; height: 45px;}
            .main_notice .controller [class^='swiper-button']:before{width: 9px; height: 9px;}
        }
        @media screen and (max-width:479px){
            .main_notice .noticeSwiper .desc dt{font-size: 100%;}
            .main_notice .noticeSwiper :is(.desc dd, .date){font-size: 85%;}
            .main_notice .controller [class^='swiper-button']{width: 40px; height: 40px;}
        }

    

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

	Footer | outline/footer.html

───────────────────────────────────────────────────────────*/
    /* 문의 */
        .ftr_inquiry{position: relative; background: url('../images/skin/main_inquiry.jpg') no-repeat center / cover; padding:85px 0; box-sizing: border-box; }
        .ftr_inquiry .main_title :where(h3, h6){filter: var(--filter-white);}
        .ftr_inquiry .btn_lg{margin-top: 44px;font-family: var(--font-type02);}

        @media screen and (max-width:1023px){
            .ftr_inquiry{padding:clamp(70px, 8.5vw, 85px) 0;}
            .ftr_inquiry .btn_lg{margin-top: clamp(35px, 4.4vw, 44px);}
        }

    /* 파트너 */
        .ftr_partner{position: relative; padding:30px 0; background: var(--point-white);}
        .ftr_partner .partnerSwiper{position: relative;}
        .ftr_partner .partnerSwiper .swiper-wrapper{transition-timing-function: linear;}
        .ftr_partner .partnerSwiper .swiper-slide{width: 260px; margin-right: 60px; display: flex; align-items: center; justify-content: center; height: auto;}

        @media screen and (max-width:1023px){
            .ftr_partner{padding:clamp(15px, 3vw, 30px)}
            .ftr_partner .partnerSwiper .swiper-slide{width: 26vw; min-width: 150px; margin-right: clamp(20px, 6vw, 60px);}
        }
    /* 하단*/
        #footer{position: relative;box-sizing: border-box;background: var(--point-color02);padding:80px 0;font-size: var(--title-16);font-weight: 300;color: rgba(255,255,255,0.6);line-height: 1.45;}
        #footer .w_custom{display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px;}
        #footer .cont{display: flex; flex-direction: column; gap: 50px;}
        #footer .top_sec{display: flex;flex-wrap: wrap;align-items: center;gap: 30px 50px;}
        #footer .logo{font-size: 0; max-width: 60%;}
        #footer .sns_list{display: flex; flex-wrap: wrap; align-items: center; gap:15px 32px;}
        #footer .sns_list object{pointer-events: none;}
        #footer .link_list{display: flex;flex-wrap: wrap;gap: 10px 30px;font-size: var(--title-20);}
        #footer .link_list > li{font-size: 90%; font-weight: 300; color: rgba(255,255,255,0.9); line-height: 1.4;}
        #footer .link_list > li > a{display: block;}
        #footer .link_list > li > a strong{font-weight: 400;}
        #footer .addr_list{display: flex; flex-direction: column; gap: 13px;}
        #footer .addr_list > li{display: flex;align-items: center;flex-wrap: wrap;gap: 8px 0;}
        #footer .addr_list .desc{position: relative; display: flex;gap: 4px;align-items: baseline;}
        #footer .addr_list .desc:not(:last-child):after{position: relative; content:'';width: 1px;height: 14px;background: rgba(204, 204, 204, 0.4);margin: 0 20px 0 16px;}
        #footer .addr_list .desc :where(dt, dd, strong){font-weight: inherit;}
        #footer .addr_list .desc dt{flex-shrink: 0;}
        #footer .addr_list .desc dt strong{padding-right: 9px;}
        #footer .addr_list .desc strong{color: var(--point-white);}

        #footer .copyright{display: flex;flex-wrap: wrap;gap:0 10px;align-items: baseline;font-family: var(--font-type03);letter-spacing: 0;line-height: 1.65;}
        #footer .copyright :where(dt, dd){font-weight: inherit;}
        
        #footer .certi_list{display: flex;align-items: center;flex-wrap: wrap;gap: 30px;padding-bottom: 20px;}

        .quick_list{position: fixed; right:60px; bottom:60px; z-index: 50; display: flex; flex-direction: column; gap: 20px; opacity: 0; pointer-events: none; transition: all 0.4s;}
        #wrap:has(#header.on) .quick_list{opacity: 1; pointer-events: all;}
        .quick_list a{display: flex;align-items: center;justify-content: center;width: 60px;height: 60px;border-radius: 100%;background: var(--point-color01);box-shadow: 0 0 20px rgba(0,0,0,0.2);overflow: hidden;padding: 13px;box-sizing: border-box;}
            .quick_list a + a{background: var(--point-color03);}

        @media screen and (max-width:1580px){
            .quick_list{right:30px; bottom:30px;}
        }
        @media screen and (max-width:1023px){
            #footer{padding:clamp(50px, 8vw, 80px) 0;}
            #footer .cont{gap:clamp(30px, 5vw, 50px);}
            #footer .top_sec{column-gap: clamp(30px, 5vw, 50px);}
            #footer .sns_list{column-gap: clamp(15px, 3.2vw, 32px);}
            #footer .link_list{column-gap: clamp(15px, 3vw, 30px);}
            #footer .certi_list{gap:clamp(15px, 3vw, 30px); width: 100%;}
            #footer .certi_list > li{max-width: 40%;}

            .quick_list{gap: 15px;}
            .quick_list a{width: 55px; height: 55px;}
        }
        @media screen and (max-width:860px){
            #footer .addr_list .desc:not(:last-child):after{height: 12px; margin:0 15px 0 11px;}

            .quick_list{right:15px; bottom:30px;}
            .quick_list a{width: 50px; height: 50px;}
        }
        @media screen and (max-width:640px){
            #footer .addr_list > li{gap: 8px 20px;}
            #footer .addr_list .desc:not(:last-child):after{display: none;}

            .quick_list{gap: 10px;}
            .quick_list a{width: 45px; height: 45px;}
        }
        @media screen and (max-width:479px){
            .quick_list a{width: 40px; height: 40px;}
        }