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

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

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

/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
    #wrap {position:relative; width: 100%; box-sizing: border-box; overflow: clip;}
    .w_custom, #container{position: relative; width: calc(100% - 60px); max-width: 1640px; margin-inline: auto; box-sizing: border-box;}
    #container{border: 1px solid var(--border-color03); border-radius:  20px 0px 20px 20px; background: var(--point-white); padding:80px 100px 100px;}


    @media (max-width:1023px){
        #container{padding-inline:clamp(25px, 8vw, 100px); padding-block:clamp(50px, 8vw, 80px) clamp(70px, 10vw, 100px); border-radius:15px 0px 15px 15px;}
    }
    @media (max-width:860px){
        .w_custom, #container{width: calc(100% - 30px);}
    }
    @media (max-width:640px){
        #container{border-radius:10px 0px 10px 10px; padding-inline: 30px;}
    }
    @media (max-width:479px){
        #container{padding-inline: 25px;}
    }
    @media (max-width:320px){
        .w_custom, #container{width: calc(100% - 20px);}
    }


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

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

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

    #header{position: relative;box-sizing: border-box;z-index: 100;transition: all 0.4s;}
    #header .w_custom{display: flex;align-items: flex-start;justify-content: space-between;flex-wrap: wrap;gap: 0 30px;padding-top: 42px;}
    #header .logo{display: block;}
    #header .logo a{display: flex;max-width: 230px;height: 60px;box-sizing: border-box;}
    #header .top_sec{position: absolute;top: 28px;right:0;display: flex;align-items: center;flex-wrap: wrap;gap:15px 30px;}
    #header .mem_list{display: flex; flex-wrap: wrap; gap: 15px 30px; font-size: var(--title-20);}
    #header .mem_list > li{font-size: max(13px, 75%); font-weight: 400; color: var(--black-color06);}
    #header .mem_list a{display: block;}
    #header .sns_list{display: flex; flex-wrap: wrap; gap: 14px;}
    #header .sns_list a{display: flex;align-items: center;justify-content: center;width: 26px;height: 26px;background: var(--black-color01) no-repeat center;border-radius: 100%;padding: 6px;box-sizing: border-box;transition: all 0.4s;}
    #header .sns_list a img{transition: all 0.4s;}
    #header .gnb{display: flex;align-items: flex-end;margin-left: auto;font-size: var(--title-20);font-family: var(--font-type02);padding-top: clamp(10px, 2vw, 35px);}
    #header .gnb > li{font-size: 90%;font-weight: 500;color: var(--point-white);}
        #header .gnb > li:not(:first-child){margin-left: -35px;}
    #header .gnb > li > a{position: relative;display: flex;align-items: center;justify-content: center;text-align: center;width: 235px;height: 50px;padding: 0 45px 2px 15px;background: var(--point-color01);box-sizing: border-box;border-radius: 40px 0 0; transition: all 0.4s;}
        #header .gnb > li > a:before{position: absolute;content:'';width: 34px;height: 25px;background: inherit;bottom:0;right: calc(100% - 5px);clip-path: path("M29.7856 5.33498C20.3031 24.5531 -1.62913e-06 25 -1.62913e-06 25L29.7856 25C29.7856 25 39.268 -13.8831 29.7856 5.33498Z")}
        #header .gnb > li:nth-child(2) > a{background: var(--point-color02);}
        #header .gnb > li:nth-child(3) > a{background: var(--point-color03);}
        #header .gnb > li:nth-child(4) > a{background: var(--point-color04);}
        #header .gnb > li:last-child > a{border-top-right-radius: 10px;width: 225px;padding-inline: 15px;}
    #header .gnb .dep02{display: none;}
    #header .allCate{display: none;flex-direction: column;justify-content: space-between;width: 30px;height: 25px;flex-shrink: 0;}
    #header .allCate span{width: 100%;height: 3px;background: var(--black-color03);border-radius: 10px;}
    #header .allCate span:nth-child(2){width: 70%;}

        #header .gnb > li:hover > a{color: var(--black-color01);}

        /* hover */
        @media (hover:hover) and (pointer:fine){
            #header .gnb > li:hover > a{color: var(--black-color00);}
            #header .sns_list > li:nth-child(1):hover a{background: #2CB24A;}
            #header .sns_list > li:nth-child(2):hover a{background: #FF0302;}
            #header .sns_list > li:nth-child(3):hover a{background: #FFDE00 url('../images/skin/sns03_ov.svg') no-repeat 60% 50%;}
            #header .sns_list > li:nth-child(3):hover a img{opacity: 0;}
            #header .sns_list > li:nth-child(4):hover a{background: var(--point-color04);}
        }

    @media (max-width:860px){
        #header{position: sticky;top: 0;height: clamp(65px, 10vw, 80px);}
        #header.on{background: var(--gray-bg02);}
        #header .w_custom{align-items: center; flex-wrap: nowrap; padding-top: 0; height: 100%;}
        #header .top_sec{display: none;}
        #header .logo{height:100%;}
        #header .logo a{height: 100%;padding-block: 10px;}
        #header .gnb{display: none;}
        #header .allCate{display: flex;}
    }
    @media (max-width:479px){
        #header .allCate{width: 26px;height: 22px;}
        #header .allCate span{height: 2px;}
    }

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

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

───────────────────────────────────────────────────────────*/
    body:has(#aside.on){overflow: hidden; touch-action: none;}
    #layerDim{position: fixed;inset: 0;background: rgba(0,0,0,0.6);z-index: 140;opacity: 0;pointer-events: none;transition: all 0.4s;}
        body:has(#aside.on) #layerDim{opacity: 1; pointer-events: all;}
    #aside{position: fixed;top:0;right:-80%;width: 80%;max-width: 400px;height: 100%; padding-bottom: 50px; z-index: 150;background: var(--point-white);display: flex;flex-direction: column;overflow: hidden;overflow-y: auto;box-sizing: border-box; transition: all 0.6s;}
        #aside.on{right:0;}
    #aside .cont{position: relative; display: flex;flex-direction: column;gap: 25px;flex-shrink: 0;}
    #aside .close{position: relative;width: 34px;aspect-ratio: auto 1;margin-inline: auto;margin-top: 10px;background: var(--point-color01);border-radius: 100%;}
        #aside .close{&:before, &:after{position: absolute;content:'';width: 50%;height: 2px;background: var(--point-white);top:50%;left:50%;transform: translate(-50%, -50%) rotate(45deg);}}
        #aside .close:after{transform: translate(-50%, -50%) rotate(-45deg);}
    #aside .top_sec{background: var(--gray-bg02);}
    #aside .logo{width: 100%;padding: 25px 30px;box-sizing: border-box;}
    #aside .mem_list{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;font-size: var(--title-20);gap: 15px 25px;border-top: 1px solid var(--border-color01);padding: 15px 20px;}
    #aside .mem_list > li{position: relative;font-size: max(13px, 85%);font-weight: 400;color: var(--black-color03);}
    #aside .gnb{position: relative;font-size: var(--title-20);padding-inline: 20px;box-sizing: border-box;}
    #aside .gnb > li{position: relative;font-size: inherit;font-weight: 400;color: var(--black-color01);line-height: 1.5;}
    #aside .gnb > li > a{position: relative;display: block;padding: 9px 30px 9px 0;}
    #aside .gnb > li > a:before{position: absolute;content:'';width: 12px;height: 10px;background: url('../images/skin/arw.svg') no-repeat center / 100% auto;top: 50%;right: 0;transform: translateY(-50%);filter: var(--filter-black);}
    #aside .gnb .dep02{display: none;}
    #aside .sns_list{display: flex;justify-content: center;flex-wrap: wrap;gap: 14px;padding-inline: 20px;box-sizing: border-box;margin-top: 20px;}
    #aside .sns_list a{display: flex;align-items: center;justify-content: center;width: 26px;height: 26px;background: var(--black-color01);border-radius: 100%;padding: 5px;box-sizing: border-box;}

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

    MAIN | index.html

───────────────────────────────────────────────────────────*/
    /* 비주얼 */    
        .main_visual{position: relative; overflow: clip; background: var(--point-color05); border-radius: 20px 0 20px 20px;}
        .main_visual .slick-slide{position: relative; height: 530px; overflow: clip;}
        .main_visual .thumb{position: absolute;right:0;bottom:0;width: 52.4%;height: 530px;background: no-repeat right bottom / 100% auto;}
        .main_visual .txt_box{position: absolute;top: 25%;padding-inline: 100px;font-size: var(--title-20);box-sizing: border-box;z-index: 5;width: 100%;}
        .main_visual .txt_box h2{position: relative; width: fit-content; font-size: 60px;font-weight: 700;color: var(--black-color01);line-height: 1.33;letter-spacing: -0.03em;}
            .main_visual .txt_box h2:before{position: absolute; content:''; width: 0; height: 4px; background: var(--black-color01); left:0; bottom:0; opacity: 0;}
            .main_visual .txt_box .on h2:before{width: 100%; opacity: 1; transition: all 1s; transition-delay: 0.7s;}
        .main_visual .txt_box h5{font-size: 28px;font-weight: 400;color: var(--black-color04);line-height: 1.71;letter-spacing: -0.03em;}
            .main_visual .txt_box h5 + h2{margin-top: 8px;}
        .main_visual .txt_box .arw_more{margin-top: 80px;}

        .txtSwiper{position: relative;  overflow: clip;}
        .txtSwiper:has(h2){height: 80px; margin-top: 8px;}
        .txtSwiper:has(h5){height: 48px;}

        .main_visual .slick-dots{position: absolute;top: 15%;left: 0;display: flex;flex-wrap: wrap;gap: 10px;font-size: 0;width: 100%;padding-inline: 100px;}
        .main_visual .slick-dots button{position: relative;width: 26px;aspect-ratio: auto 1;border:1px solid var(--trans-color);border-radius: 100%;box-sizing: border-box;transition: all 0.4s;}
            .main_visual .slick-dots button:before{position: absolute;content:'';width: 6px;height: 6px;top:50%;left:50%;transform: translate(-50%, -50%);border:1px solid rgba(0,0,0,0.15);border-radius: 100%;transition: all 0.4s;box-sizing: border-box;}
            .main_visual .slick-dots .slick-active button{border-color:rgba(0,0,0,0.15);}
            .main_visual .slick-dots .slick-active button:before{background: var(--point-color06); border-color: var(--point-color06);}

        .arw_more{position: relative;width: fit-content;padding:12px 12px 12px 22px;background: var(--black-color01);border-radius: 50px;display: flex;align-items: center;gap: 32px;font-size: var(--title-20);color: var(--point-white);letter-spacing: -0.03em; transition: all 0.6s;}
        .arw_more:before{position: absolute; content:''; inset: 0; background: var(--point-color06); border-radius: inherit; clip-path: circle(0% at 100% 100%); transition: all 0.6s;}
        .arw_more span{position: relative; font-size: 90%;font-weight: 500;filter: var(--filter-white);}
        .arw_more em{position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding:5px; background: var(--point-white); border-radius: 100%; box-sizing: border-box;}
        .arw_more em img{filter: var(--filter-black);}

            /* hover */
            @media (hover:hover) and (pointer:fine){
                .arw_more:hover{background: var(--point-color06);}
                .arw_more:hover:before{clip-path: circle(150% at 100% 100%);}
            }
        
        @media (max-width:1023px){
            .main_visual .txt_box{padding-inline: clamp(25px, 10vw, 100px);}
            .main_visual .txt_box .arw_more{margin-top: clamp(30px, 8vw, 80px);}
            .main_visual .txt_box h5{font-size: 24px;}
            .main_visual .txt_box h2{font-size: 52px;}
            .txtSwiper:has(h2){height: 73px;}
            .txtSwiper:has(h5){height: 42px;}
            .main_visual .slick-dots{padding-inline: clamp(30px, 10vw, 100px);}
            .main_visual .slick-dots button{width: clamp(22px, 3vw, 26px);}

            .arw_more{gap: clamp(15px, 4vw, 32px);padding-block: clamp(10px, 2vw, 12px);}
            .arw_more em{width: clamp(28px, 4vw, 34px); height: clamp(28px, 4vw, 34px);}
        }
        @media (max-width:860px){
            .main_visual .txt_box h5{font-size: 20px;}
            .main_visual .txt_box h2{font-size: 44px;}
            .txtSwiper:has(h2){height: 59px;}
            .txtSwiper:has(h5){height: 35px;}
        }
        @media (max-width:640px){
            .main_visual .slick-slide{height: clamp(560px, 120vw, 768px);}
            .main_visual .thumb{width: 100%;min-width: 430px;right: 50%;transform: translateX(50%);}
            .main_visual .txt_box{top:100px}
            .main_visual .txt_box h2{font-size: 36px;}
            .main_visual .txt_box h2:before{height: 3px;}
            .main_visual .txt_box h5{font-size: 16px;}
            .txtSwiper:has(h2){height: 48px;}
            .txtSwiper:has(h5){height: 28px;}
            .main_visual .slick-dots{top:50px;}
        }
        @media (max-width:479px){
            .main_visual .txt_box h2{font-size: 30px;}
            .main_visual .txt_box h5{font-size: 14px;}
            .txtSwiper:has(h2){height: 40px;}
            .txtSwiper:has(h5){height: 24px;}
        }
        @media (max-width:360px){
            .main_visual .txt_box h2{font-size: 25px;}
            .main_visual .txt_box h5{font-size: 13px;}
            .txtSwiper:has(h2){height: 34px;}
            .txtSwiper:has(h5){height: 23px;}
        }

    /* 공통 */
        .main_content{display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px;}
        .main_content .item{position: relative;background: var(--point-white);border:1px solid var(--border-color03);border-radius: var(--radius-15);padding: 35px 30px 30px;box-sizing: border-box;}
            .main_content .item.notice{width: 35.8%;}
            .main_content .item.gallery{width: 27.1%;}
            .main_content .item.center{width: calc(37.1% - 20px);}

        .main_title{position: relative;font-size: var(--title-20);box-sizing: border-box;z-index: 2;}
            .main_title.hd{margin-bottom: 24px;}
            .main_title:has(.more_arw){padding-right: 50px;}
        .main_title h5{font-size: 125%;font-weight: 700;color: var(--black-color02);letter-spacing: -0.03em;}
        .main_title h5:has(em){display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;}
        .main_title h5 em{font-size: 72%;font-weight: inherit;color: var(--point-color06);font-family: var(--font-type02);letter-spacing: -0.02em;}
        .main_title .more_arw{position: absolute;top:50%;right:0;transform: translateY(-50%);}

        .more_arw{width: 34px;height: 34px;box-shadow: inset 0 0 0 1px var(--point-color06);border-radius: 100%;box-sizing: border-box;display: flex;align-items: center;justify-content: center;padding: 5px; transition: all 0.4s;}
        .more_arw:before{position: absolute;content:'';inset: 0;background: var(--point-color06);border-radius: inherit;clip-path: circle(0 at 50% 50%);transition: all 0.6s;} 
        .more_arw img{position: relative;transition: all 0.1s;transition-delay: 0.2s;}
            .more_arw.bg:before{clip-path:none}
            .more_arw.bg img{filter: var(--filter-white);}

        .no_data{font-size: var(--title-15); text-align: center; padding-block: 30px;}

            /* hover */
            @media (hover:hover) and (pointer:fine){
                .more_arw:hover:before{clip-path: circle(100% at 50% 50%);}
                .more_arw:hover img{filter: var(--filter-white);transition-delay: 0s;}
            }

        @media (max-width:1200px){
            .main_content .item.notice{width: 100%;}
            .main_content :is(.item.gallery, .item.center){width: calc(100% / 2 - 5px);}
            .main_content .item.center{display: flex; flex-direction: column;}
            .main_content .item.center .main_title{flex-shrink: 0;}
        }
        @media (max-width:1023px){
            .main_content .item{padding:clamp(20px, 3vw, 30px); padding-top: clamp(25px, 3.5vw, 35px);}

            .main_title.hd{margin-bottom: clamp(15px, 2.5vw, 24px);}

            .more_arw{width: clamp(28px, 4vw, 34px); height: clamp(28px, 4vw, 34px);}
        }
        @media (max-width:860px){
            .main_content :is(.item.gallery, .item.center){width: 100%;}
        }

    /* 공지사항 */
        .default_list{display: flex;flex-direction: column;gap: 15px;}
        .default_list > li{position: relative;box-sizing: border-box;padding-left: 14px;}
            .default_list > li:before{position: absolute; content:''; width: 5px; aspect-ratio: auto 1; border-radius: 100%; background: var(--border-color01); top:50%; left:0; transform: translateY(-50%); transition: all 0.4s;}
        .default_list .link{position: absolute; inset: 0; z-index: 5;}
        .default_list .desc{position: relative;font-size: var(--title-20);display: flex;align-items: center;justify-content: space-between;gap: 30px;letter-spacing: -0.025em;line-height: 1.45;}
        .default_list .desc dt{font-size: max(13px, 80%);font-weight: 400;color: var(--black-color05);overflow: hidden;text-overflow:ellipsis;white-space:nowrap; transition: all 0.4s;}
        .default_list .desc dd{font-size: max(12px, 70%);font-weight: 400;color: var(--black-color08);font-family: var(--font-type02); flex-shrink: 0;}

            /* hover */
            @media (hover:hover) and (pointer:fine){
                .default_list > li:hover:before{background: var(--point-color06);}
                .default_list > li:hover .desc dt{color: var(--black-color02);}
            }

        @media (max-width:1023px){
            .default_list{gap: clamp(8px, 2vw, 15px);}
            .default_list .desc{gap: clamp(20px, 3vw, 30px);}
        }
        @media (max-width:640px){
            .default_list > li{padding-left: 12px;}
            .default_list > li:before{width: 4px;}
        }

    /* 갤러리 */
        .gelSwiper{position: relative; overflow: clip;}
        .gelSwiper:before{position: absolute;content:'';width: 14%;height: 100%;background: linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);top:0;right:0;z-index: 5;pointer-events: none;}
        .gelSwiper .swiper-slide{position: relative;}
        .gelSwiper .link{position: absolute; inset: 0; z-index: 5;}
        .gelSwiper .thumb{position: relative; display: block; font-size: 0; border-radius: var(--radius-04); overflow: clip; width: 100%; aspect-ratio: auto 0.66;}
        .gelSwiper .thumb:before{position: absolute; content: ''; inset: 0; background: linear-gradient(180deg, var(--trans-color) 0%, rgba(0, 0, 0, 0.25) 100%); opacity: 0; transition: all 0.4s;}
        .gelSwiper .thumb img{width: 100%; height: 100%; object-fit: cover;}
        .gelSwiper .more_arw{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); margin-top: 30px; opacity: 0;}

            /* hover */
            @media (hover:hover) and (pointer:fine){
                .gelSwiper .swiper-slide:hover .more_arw{margin-top: 0; opacity: 1;}
                .gelSwiper .swiper-slide:hover .thumb:before{opacity: 1;}
            }

    /* 센터소개 */
        .map_wrap{position: relative;display: flex;align-items: flex-start;gap: 20px 0;}
        .map_wrap .info_list{position: relative;width: 56%;z-index: 3;display: flex;background: var(--point-white);border-radius: var(--radius-10);}
        .map_wrap .info_list > li{position: relative;transition: all 0.4s;width: 100%;flex-shrink: 0;}
            .map_wrap .info_list > li:not(:first-child){margin-left: -100%;}
            .map_wrap .info_list > li:not(.on){opacity: 0;}
            .map_wrap .info_list:not(:has(> li.on)) > li[title="남부센터"]{ opacity: 1;}
        .map_wrap .desc{font-size: var(--title-20);padding: 15px 18px 20px;border: 2px solid var(--point-color06);border-radius: var(--radius-10);box-sizing: border-box;background: var(--point-white);transition: all 0.4s;box-shadow: var(--shadow-01);}
        .map_wrap .desc dt{display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 10px 15px;}
            .map_wrap .desc dt + dd{margin-top: 10px;}
        .map_wrap .desc dt em{display: flex;align-items: center;gap: 6px;font-size: 95%;font-weight: 700;color: var(--point-color06);}
        .map_wrap .desc dt em:before{display: inline-flex;content:'';width: 12px;height: 16px;background: url('../images/skin/icon_map.svg') no-repeat center / 100% auto;flex-shrink: 0;transform: translateY(-1px);}
        .map_wrap .desc dt span{font-size: max(12px, 70%); font-weight: 400; font-family: var(--font-type03); color: var(--black-color06);}
        .map_wrap .desc dd{font-size: max(14px, 80%); font-weight: 400; color: var(--black-color03); line-height: 1.625;}
        .map_wrap .thumb {position: absolute;top: -74px;right: -20px;width: 100%;max-width: 295px;}
        .map_wrap .anchor{position: absolute;right: 31%;bottom: 19%;width: 18px;aspect-ratio: auto 1;background: rgba(234, 85, 57, 0.20);border-radius: 100%;cursor: pointer;transition: all 0.4s;}
            .map_wrap .anchor:before{position: absolute; content:''; width: 50%; height: 50%; border-radius: inherit; top:50%; left:50%; transform: translate(-50%, -50%); background: var(--point-color06);}
            .map_wrap .anchor:after{position: absolute;content:'';width: 170px;height: 1px;background: var(--point-color06);top: 50%;right: calc(100% - 5px);transition: opacity 0.4s;pointer-events: none;}
            .map_wrap .anchor:not(.on):after{opacity: 0;}
            .map_wrap:not(:has(.anchor.on)) .anchor[title="남부센터"]:after{opacity: 1;}
        .map_wrap .anchor .cont{position: absolute; top: 0;}

        .map_wrap [title="북부센터"] .desc{border-color: var(--point-color07);}
        .map_wrap [title="북부센터"] .desc dt em{color: var(--point-color07);}
        .map_wrap [title="북부센터"] .desc dt em:before{background-image: url('../images/skin/icon_mapBl.svg');}

        .map_wrap [title="서부센터"] .desc{border-color: var(--point-color08);}
        .map_wrap [title="서부센터"] .desc dt em{color: var(--point-color08);}
        .map_wrap [title="서부센터"] .desc dt em:before{background-image: url('../images/skin/icon_mapGr.svg');}

        .map_wrap .anchor[title="북부센터"]{right: 24.5%;bottom: 57.5%;background: rgba(0, 117, 194, 0.20);}
        .map_wrap .anchor[title="북부센터"]:before{background: var(--point-color07);}
        .map_wrap .anchor[title="북부센터"]:after{background: var(--point-color07);}

        .map_wrap .anchor[title="서부센터"]{right: 52%;bottom: 31%;background: rgba(196, 215, 0, 0.2);}
        .map_wrap .anchor[title="서부센터"]:before{background: var(--point-color08);}
        .map_wrap .anchor[title="서부센터"]:after{background: var(--point-color08);}

            /* hover */
            @media (hover:hover) and (pointer:fine){
                .map_wrap .anchor:hover{border-radius: 0;}
            }

        @media (max-width:1200px){
            .map_wrap{height: 100%;}
            .map_wrap :is(.info_list, .desc){height: 100%;}
            .map_wrap .thumb{top:50%; transform: translateY(-50%);}
        }
        @media (max-width:860px){
            .map_wrap{height: auto;align-items: stretch;justify-content: space-between;}
            .map_wrap .thumb{position: relative;top: 0;transform: none;display: flex;align-items: center;}
            .map_wrap .anchor:after{width: 45vw;}
        }
        @media (max-width:479px){
            .map_wrap{flex-direction: column;}
            .map_wrap .info_list{width: 100%;}
            .map_wrap .thumb{inset: 0;width: fit-content;margin-inline: auto;}
            .map_wrap .anchor{right:30%;}
            .map_wrap .anchor[title="북부센터"]{right: 31%;}
            .map_wrap .anchor:after{width: 1px;height: 200px;inset: auto;left: 50%;bottom: calc(100% - 7px);}
        }
/*───────────────────────────────────────────────────────────

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    #footer{position: relative; padding-block: 40px; box-sizing: border-box;}
    #footer .info{display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px;}
    #footer address{display: flex;flex-direction: column;gap: 8px;}
    #footer address .desc{position: relative;font-size: var(--title-20);display: flex;align-items: center;gap: 10px;}
    #footer address .desc :where(dt, dd){font-size: max(13px, 75%);line-height: 1.6;letter-spacing: -0.03em;}
    #footer address .desc dt{flex-shrink: 0;font-weight: 500;color: var(--point-white);padding: 3px 14px;border-radius: 30px;background: var(--point-color06);}
        #footer address .desc:nth-child(2) dt{background: var(--point-color07);}
        #footer address .desc:nth-child(3) dt{background: var(--point-color08);}
    #footer address .desc dd{font-weight: 400; color: var(--black-color03);}
    #footer address .desc dd a{font-family: var(--font-type02);}
    #footer address .desc dd span{display: inline-block;}
    #footer address .desc dd span:not(:last-child):after{display: inline-flex;content:'';width: 1px;height: 12px;background: var(--border-color02);margin-inline: 14px;vertical-align: middle;}
    #footer .utility{display: flex;flex-direction: column;align-items: flex-end;gap: 10px;}
    #footer .mail{position: relative;display: inline-flex;align-items: center;justify-content: center;gap: 12px;height: 48px;font-size: var(--title-20);padding-inline: 20px;border: 2px solid var(--border-color01);box-sizing: border-box;border-radius: var(--radius-10);min-width: 220px;letter-spacing: -0.03em;}
        #footer .mail:before{display: inline-flex;content:'';width: 16px;height: 13px;background: url('../images/skin/icon_mail.svg') no-repeat center / 100% auto;}
    #footer .mail span{font-size: max(13px, 75%);font-weight: 400;color: var(--black-color03);}
    #footer .family{position: relative; font-size: var(--title-20);}
    #footer .family dt{position: relative;display: flex;align-items: center;font-size: max(14px, 80%);font-weight: 400;color: var(--black-color03);min-width: 220px;height: 48px;padding-inline: 24px 45px;box-sizing: border-box;background: var(--border-color01);border-radius: var(--radius-10);cursor: pointer; transition: all 0.4s;}
        #footer .family dt:before{position: absolute;content:'';width: 8px;height: 8px;border: solid var(--black-color03);border-width: 0 2px 2px 0;top: 43%;right: 24px;transform: translateY(-50%) rotate(45deg);border-radius: 1px;transition: all 0.4s;}
        #footer .family dt.on{background: var(--black-color01); color: var(--point-white);}
        #footer .family dt.on:before{top: 53%;transform: translateY(-50%) rotate(45deg) scale(-1,-1); border-color: var(--point-white);}
    #footer .family dd{position: absolute;right:0;bottom: calc(100% + 20px);border: 1px solid var(--black-color01);box-shadow: var(--shadow-01);border-radius: var(--radius-10);background: var(--point-white);padding: 26px 30px;font-size: max(13px, 75%);font-weight: 400;line-height: 1.6;color: var(--black-color06);width: max-content;max-height: 300px;box-sizing: border-box;display: flex;flex-wrap: wrap;flex-direction: column;gap: 3px 30px;opacity: 0;pointer-events: none;z-index: 5;transition: all 0.4s;}
        #footer .family:has(dt.on) dd{opacity: 1; pointer-events: all;}
    #footer .family dd a{display: flex;align-items: baseline;gap: 8px;word-break: break-all;}
    #footer .family dd a:before{display: inline-flex;content:'';width: 4px;height: 4px;background: var(--border-color01);border-radius: 100%;flex-shrink: 0;transform: translateY(-3px);}
    #footer .exp{display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 15px 30px;border-top: 1px solid var(--border-color04);margin-top: 30px;padding-block: 35px 5px;}
    #footer .link_list{display: flex;align-items: center;flex-wrap: wrap;font-size: var(--title-20);gap: 10px 30px;}
    #footer .link_list > li{font-size: max(14px, 80%); font-weight: 400; color: var(--black-color01); line-height: 1.6;}
    #footer .copy{display: flex;align-items: center;flex-wrap: wrap;gap: 3px 16px;font-size: var(--title-20);font-family: var(--font-type02);}
    #footer .copy :where(dt, dd){font-size: max(13px, 70%);font-weight: 400;color: var(--black-color08);line-height: 1.6;letter-spacing: -0.03em;}

    #quick_wrap{position: fixed;right: 20px;bottom: 30px;z-index: 50;display: flex;flex-direction: column;align-items: center;gap: 40px; transition: all 0.4s;} 
    #quick_wrap .link_list{position: relative; display: flex;flex-direction: column;background: var(--point-white);border: 1px solid var(--border-color01);border-radius: var(--radius-10);padding: 10px 10px;box-sizing: border-box;}
    #quick_wrap .link_list:before{position: absolute;content:'';width: 14px;height: 40px;background: url('../images/skin/quick_wrap.png') no-repeat left top / 100% auto;top: -6px;left: 10px;clip-path: polygon(0 0, 110% 0, 110% 100%, 2px 120%, 2px 4px, 0 10px);}
    #quick_wrap .link_list > li{position: relative;}
    #quick_wrap .link_list > li:nth-child(1){translate: 8px 0;}
    #quick_wrap .link_list > li:nth-child(n+3){margin-top: 10px; padding-top: 10px;}
    #quick_wrap .link{position: absolute; inset: 0; z-index: 5;}
    #quick_wrap .bnr_desc{position: relative;border-radius: var(--radius-10);box-sizing: border-box;padding: 8px 5px;font-size: var(--title-20);text-align: center;}
    #quick_wrap .bnr_desc dt{max-width: 68px;}
    #quick_wrap .bnr_desc dt + dd{margin-top: 14px;}
    #quick_wrap .bnr_desc dd{font-size: max(13px, 80%);font-weight: 600;color: var(--black-color08);line-height: 1.46;letter-spacing: -0.03em;}
    #quick_wrap .scr_top{display: flex;align-items: center;justify-content: center;width: 60px;aspect-ratio: auto 1;background: var(--point-color01) url('../images/skin/scr_top.svg') no-repeat center;border-radius: 100%;box-sizing: border-box;}

    @media (max-width:1023px){
        #footer address .desc dd span:not(:last-child):after{height: clamp(10px, 1.5vw, 12px);}
        #footer :is(.mail, .family dt){height: clamp(45px, 5vw, 48px);}
        #footer .link_list{column-gap: clamp(25px, 3vw, 30px);}
        #footer .exp{margin-top: clamp(20px, 3vw, 30px); padding-block: clamp(25px, 3.5vw, 35px) clamp(0px, 1vw, 5px);}
        #footer .utility{width: 100%; align-items: flex-start;}
        #footer .family dd{left: 0;width: calc(100vw - 60px);column-gap: clamp(25px, 3vw, 30px);bottom: calc(100% + clamp(10px, 2vw, 20px));}

        #quick_wrap{gap: clamp(20px, 4vw, 40px); opacity: 0; pointer-events: none;}
            body:has(#header.on) #quick_wrap{opacity: 1; pointer-events: all;}
            body:has(#header.end) #quick_wrap{opacity: 0; pointer-events: none;}
        #quick_wrap .scr_top{width: clamp(40px, 6vw, 60px);}
    }
    @media (max-width:860px){
        #footer .family dd{left: 0; width: calc(100vw - 30px);}
    }
    @media (max-width:767px){
        #footer .family dd{width: 100%;flex-wrap: nowrap;overflow: hidden;overflow-y: auto;padding: 20px;max-height: clamp(200px, 40vw, 300px);}
    }
    @media (max-width:479px){
        #footer address .desc{flex-direction: column;align-items: flex-start;}
        #footer address .desc dd span{display: block;}
        #footer address .desc dd span:not(:last-child):after{display: none;}

        #quick_wrap .link_list{display: none;}
    }