@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;}
    .main_w_custom, .w_custom{position: relative; width: calc(100% - 60px); max-width: 1300px; margin-inline: auto; box-sizing: border-box;}
	.main_w_custom{max-width:1700px}
    #container{position: relative; padding-bottom:150px; box-sizing: border-box;}
	
	.sub_content > .sub_agree{margin-top:100px;}
	
	.for_m{display: none;}

	@media (max-width:1300px){
		.for_m{display:inline;}
		.for_pc{display: none;}
	}
    @media (max-width:1023px){
        #container{padding-bottom:clamp(50px, 15vw, 150px);}
		.sub_content > .sub_agree{margin-top:clamp(50px, 11vw, 100px);}
    }
    @media (max-width:860px){
        .main_w_custom, .w_custom{width: calc(100% - 30px);}
    }
    @media (max-width:320px){
        .main_w_custom, .w_custom{width: calc(100% - 20px);}
    }



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

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

───────────────────────────────────────────────────────────*/
    #header{position: fixed; top:0; left:0; width: 100%; height: 110px; z-index: 100; transition: all 0.4s;}
    #header .main_w_custom{height: 100%;display: flex;align-items: center;justify-content: space-between;gap: 30px;box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);filter: var(--filter-white);transition: all 0.4s;}
    #header .cont{display: flex; align-items: center; gap: clamp(50px, 5.25vw, 100px); height: 100%;}
    #header .logo{height: 100%;}
    #header .logo a{max-width: 261px; height: 100%; display: flex; align-items: center; padding-block: 15px;}
    #header .gnb{display: flex;align-items: center;text-align: center;height: 100%;gap: clamp(30px, 3.65vw, 70px);font-size: var(--title-20);}
    #header .gnb > li{position: relative;height: 100%;font-size: inherit;font-weight: 500;color: var(--black-color01); transition: all 0.4s;}
    #header .gnb > li > a{display: flex;align-items: center;justify-content: center;height: 100%;}
    #header .gnb .dep02{position: absolute;top: 85%;left: 50%;translate: -50%;width: 180px;padding-block: 15px;background: var(--point-white);border: 1px solid var(--border-color01);border-radius: var(--radius-10);box-shadow: 3px 3px 5px rgba(0, 31, 76, 0.2);opacity: 0;pointer-events: none;transition: all 0.4s;}
    #header .gnb .dep02 > li{position: relative; font-size: 85%; font-weight: 400; color: var(--black-color08); transition: all 0.4s;}
    #header .gnb .dep02 > li > a{display: block; padding:10px 25px;}
    #header .utility{display: flex; align-items: center; gap: 30px;}
    .snsList{position: relative;padding-inline: 10px;display: flex;box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);background: rgba(0,0,0,0.1);border-radius: 50px;}
    .snsList > li{position: relative;}
    .snsList > li > a{display: flex;align-items: center;justify-content: center;width: 50px;transition: all 0.4s; }
    #header .allCate{display: none;flex-direction: column;justify-content: space-between;width: 32px;aspect-ratio: auto 1.35;}
    #header .allCate span{width: 100%; height: 2px; background: var(--black-color01);}

        /* over */
        @media (hover:hover) and (pointer:fine) {
            #header:hover{background: var(--point-white); box-shadow: inset 0 -1px 0 var(--border-color01);}
            #header:hover .main_w_custom{filter: none; box-shadow: none;}
            #header .gnb > li:hover{color: var(--point-color01);}
            #header .gnb > li:hover .dep02{opacity: 1; pointer-events: all;}
            #header .gnb .dep02 > li:hover{color: var(--black-color01);}
            #header:hover .snsList > li > a{filter: var(--filter-black) opacity(0.9);}
        }

        /* on */
        #header.on{background: var(--point-white); box-shadow: inset 0 -1px 0 var(--border-color01);}
        #header.on .main_w_custom{filter: none; box-shadow: none;}
        #header.on .snsList > li > a{filter: var(--filter-black) opacity(0.9);}

    @media (max-width:1300px) {
        #header .cont{gap: clamp(30px, 4.6vw, 60px);}
        #header .logo a{max-width: clamp(200px, 20vw, 261px);}
        #header .gnb{gap: 30px;}
        #header .gnb > li{font-size: 90%;}
        .snsList > li > a{width: clamp(38px, 4vw, 50px);}
        #header .utility{gap: clamp(25px, 3vw, 30px);}
    }
    @media (max-width:1100px) {
        #header .gnb > li{font-size: 80%;}
    }
    @media (max-width:1023px) {
        #header{height: clamp(75px, 11vw, 110px);}
        #header .gnb{display: none;}
        .snsList{padding-inline: clamp(8px, 1.5vw, 10px);}
        #header .allCate{display: flex;width: clamp(25px, 3.5vw, 30px);}
    }
    @media (max-width:479px) {
        #header .snsList{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 .main_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(4, 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 > li > a em{font-weight: inherit;}
    #aside .gnb > li > a span{font-size: 60%;font-weight: 400;color: rgba(255,255,255,0.6);}
    #aside .gnb .dep02{margin-top: 8px;}
    #aside .gnb .dep02 > li > a{display: block;font-size:110%;font-weight:400;padding-block: 15px;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 .snsList > li > a{filter: var(--filter-black) opacity(0.9);}
    #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 .utility{gap:20px;}
    }
    @media (max-width:860px){
		#aside{display: block;}
		#aside .main_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 .gnb .dep02 > li > a{padding-block: 12px;}
		#aside .utility{top:15px; right: 15px;}
    }
    @media (max-width:640px){
        #aside .gnb > li > a{font-size: 200%;}
        #aside .gnb .dep02 > li > a{padding-block: 7px;font-size:100%;}
    }
    @media (max-width:479px){
        #aside .gnb > li > a{font-size: 170%;}
        #aside .gnb > li > a span{width: 100%;}
        #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: 95%;}
    }


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

    MAIN | index.html

───────────────────────────────────────────────────────────*/
    /* 비주얼 */
        .visual_wrapper{position: relative;}
        .main_visual {position:relative;width:100%;}
        .main_visual .slick-slide {position:relative; height: 980px;}
        .main_visual .thumb{display: block; width: 100%; height: 100%; background: no-repeat center / cover;}
            .main_visual .active .thumb{scale: 1.1; transition: all 5s;}
        .main_visual .txt_box{position: absolute;bottom: 41%;left:50%;translate: -50%;font-size: var(--title-20);color: var(--point-white);display: grid;gap: 27px; z-index: 3;}
        .main_visual .txt_box h2{font-size: 70px; font-weight: 600; line-height: 1.3;}
        .main_visual .txt_box h5{font-size: 130%; font-weight: 300; line-height: 1.3;}
        .main_visual .txtAni{position: relative; font-weight: inherit; display: block; overflow: hidden;}
        .main_visual .txtAni span{position: relative; display: block; translate: 0 100%;}
            .main_visual .active .txtAni span{translate: 0; opacity: 1; transition: all 1.5s 0.2s;}
            .main_visual .active h2 .txtAni span{transition-delay: 0.4s;}
            .main_visual .active h2 .txtAni:nth-child(2) span{transition-delay: 0.6s;}
        .main_visual .controller{position: absolute;bottom: 34%;left:50%;translate: -50%;z-index: 5;}
        .main_visual .slick-dots{display: flex;align-items: center;flex-wrap: wrap;gap: 18px;font-size: 0;}
        .main_visual .slick-dots button{position: relative; width: 12px; aspect-ratio: auto 1; border-radius: 100%; border: 2px solid var(--trans-color); transition: all 0.4s;}
        .main_visual .slick-dots button:before{position: absolute;content:'';width: calc(100% + 2px);height: calc(100% + 2px);background: var(--point-white);border-radius: 100%;top:50%;left:50%;translate: -50% -50%;transition: all 0.4s;}
            .main_visual .slick-dots .slick-active button{border-color: var(--point-white);}
            .main_visual .slick-dots .slick-active button:before{opacity: 0;}

        .visual_wrapper .info_box{position: absolute;bottom: clamp(30px, 5.8vw, 110px);left:50%;translate: -50%;pointer-events: none;z-index: 6;display: flex;flex-direction: column;align-items: flex-end;}
        .visual_wrapper .exp_list{pointer-events: all;width: 100%;max-width: 540px;display: grid;grid-template: auto / repeat(2, 1fr);gap: 20px;}
        .visual_wrapper .exp_list > li{position: relative;min-height: 180px;border-radius: var(--radius-20);border: 1px solid rgba(255, 255, 255, 0.5);background: rgba(255, 255, 255, 0.2);backdrop-filter: blur(5px);padding: 22px;transition: all 0.4s;}
        .visual_wrapper .exp_list .link{position: absolute; inset: 0; z-index: 5;}
        .visual_wrapper .exp_list .desc{position: relative;filter: var(--filter-white);font-size: var(--title-20);height: 100%;display: flex;flex-direction: column;justify-content: space-between;gap: 30px;}
        .visual_wrapper .exp_list .desc dt{display: flex;width: 54px;}
        .visual_wrapper .exp_list .desc dd{font-size: 110%; font-weight: 700; padding-right: 45px;}
        .visual_wrapper .exp_list .plus{position: absolute;right: 22px;bottom: 22px;width: 30px;aspect-ratio: auto 1;border-radius: 100%;background: rgba(255,255,255,0.4);transition: all 0.4s;}
            .visual_wrapper .exp_list .plus{&:before, &:after{position: absolute;content:'';width: 47%;height: 2px;background: var(--point-white);top:50%;left:50%;translate: -50% -50%;transition: all 0.4s;}}
            .visual_wrapper .exp_list .plus:after{width: 2px; height: 47%;}

            /* over */
            @media (min-width:1024px) {
                .visual_wrapper .exp_list > li:hover{border-color: var(--point-color01); background: var(--point-color01);}
                .visual_wrapper .exp_list > li:hover .plus{background: var(--point-white);}
                .visual_wrapper .exp_list > li:hover .plus{&:before, &:after{background: var(--point-color01);}}
            }

        @media (max-width:1300px) {
            .visual_wrapper .exp_list{max-width: 100%;grid-template: auto / repeat(4, 1fr);}
        }
        @media (max-width:1023px) {
            .main_visual .slick-slide{height: clamp(600px, 98vw, 980px);}
            .main_visual .slick-dots{gap: clamp(13px, 2.3vw, 18px);}
            .main_visual .txt_box{gap: clamp(15px, 2.7vw, 27px);}
            .main_visual .txt_box h2{font-size: clamp(35px, 7vw, 70px);}
            .visual_wrapper .exp_list{gap: clamp(15px, 2vw, 20px);}
            .visual_wrapper .exp_list > li{min-height: clamp(170px, 18.5vw, 180px);}
            .visual_wrapper .exp_list .desc dt{width: clamp(42px, 5.4vw, 54px);}
        }
        @media (max-width:860px) {
            .visual_wrapper .info_box{position: relative; inset: auto; translate: 0; padding: 40px 30px; background: var(--point-color01); width:calc(100% + 30px); margin-left: -15px;}
            .visual_wrapper .exp_list{grid-template: auto / repeat(2, 1fr);}
        }
        @media (max-width:640px) {
            .main_visual .txt_box h5{font-size: 120%;}
        }
        @media (max-width:479px) {
            .main_visual .slick-dots button{width: 10px;}
            .main_visual .txt_box h5{font-size: 110%;}
        }
        @media (max-width:431px) {
            .visual_wrapper .exp_list{grid-template: auto / repeat(1, 1fr);}
        }

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

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    #footer{position: relative; padding-block: 60px; line-height: 1.6;}
    #footer .main_w_custom{display: flex; flex-direction: column; gap: 40px;}
    #footer .top_sec{display: flex;align-items: center;flex-wrap: wrap;gap: 25px 50px;}
    #footer .logo{font-size: 0; max-width: 300px;}
    #footer .link_list{display: flex; flex-wrap: wrap; gap: 15px 30px; font-size: var(--title-20);}
    #footer .link_list > li{font-size: 90%; font-weight: 400; color:rgba(136, 136, 136, 0.8);}
    #footer .link_list strong{font-weight: inherit; color: var(--black-color05);}
    #footer .addr_list{display: grid;gap: 6px;font-size: var(--title-20);padding-top: 3px;}
    #footer .addr_list > li{display: flex;flex-wrap: wrap;align-items: baseline;gap: 6px 40px;font-size: 80%;font-weight: 400;color: var(--black-color07);}
    #footer .addr_list .desc{display: flex; align-items: baseline; gap: 4px;}
    #footer .addr_list .desc dt{flex-shrink: 0;}
    #footer .copy{font-size: var(--title-20);display: flex;flex-wrap: wrap;gap: 3px 20px;}
    #footer .copy :where(dt, dd){font-size: max(13px, 75%); font-weight: 400; color: rgba(136, 136, 136, 0.8);}

    @media (max-width:1023px) {
		#footer{padding-block:clamp(40px, 6vw, 60px);}
        #footer .main_w_custom{gap: clamp(35px, 4vw, 40px);}
        #footer .logo{max-width: clamp(200px, 30vw, 300px);}
        #footer .top_sec{column-gap: clamp(30px, 5vw, 50px);}
        #footer .link_list{column-gap: clamp(25px, 3vw, 30px);}
        #footer .addr_list{gap: clamp(4px, 1.1vw, 6px);}
        #footer .addr_list > li{column-gap: clamp(30px, 4vw, 40px); row-gap: clamp(4px, 1.1vw, 6px);}
        #footer .copy{column-gap: clamp(10px, 2vw, 20px);}
    }
    @media (max-width:479px) {
        #footer .main_w_custom{gap: 30px;}
        #footer .link_list{width: 100%;}
    }