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

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

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

/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
	/** PC 일반 **/


		
    #wrap {position:relative;width:100%; overflow: clip;} 
    .w_custom, #contents_wrap {position: relative; width: calc(100% - 60px); max-width: 1520px; margin:0 auto; box-sizing: border-box;}
    #contents_wrap {padding-bottom: 180px;}
    #wrap:has(.full_sec) #contents_wrap {width: 100%; max-width: 100%; padding: 0;}

    body:has(#aside.on) { overflow: hidden; touch-action: none; }
		
	@media screen and (max-width:1400px) {
	}
	@media screen and (max-width:1023px) {
        #contents_wrap {padding-bottom: clamp(70px, 10vw, 180px);}
	}
	@media screen and (max-width:860px) {
		.w_custom, #contents_wrap {width: calc(100% - 30px);}
	}
    @media screen and (max-width:320px) {
		.w_custom, #contents_wrap {width: calc(100% - 20px);}
	}


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

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

───────────────────────────────────────────────────────────*/
	/** 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: -120px; width: 100%; height: 120px; z-index: 52; transition: top 0.4s ease-out, background 0.4s ease-out;}
        #header .header_inner {position: relative; display: flex; align-items: center; justify-content: space-between; width: calc(100% - 60px); max-width: 1720px; height: 100%; margin: 0 auto;}
		
		#header .hd_logo {width: 235px; aspect-ratio: 1/0.189;}
		#header .hd_logo a {background: url('../images/skin/img_h_logo.png') no-repeat left;font-size: 0;display: block;height: 100%;background-size: auto 100%;}

        #header .gnb { position: absolute; left: 50.4%; top: 0; display: flex; align-items: center; gap: 0 4.3vw; height: 100%; transform: translateX(-50%); }
        #header .gnb > li {position: relative; height: 100%; }
        #header .gnb > li > a {display: flex; align-items: center; height: 100%; font-size: 110%; color: var(--point-white); font-weight: 400; line-height: 1; transition: all 0.3s ease-out; letter-spacing: -0.04em; }
        #header .gnb .dep2{display: none; position: absolute; left: 50%; top: 80%; transform: translate(-50%); width: max-content; max-width: 300px; min-width: 250px; background: var(--black-color01); text-align: center; z-index:5; opacity: 0; transition: opacity 0.2s ease-out;}
        #header .gnb .dep2 li { text-align: left; background: var(--point-color03); opacity: 0; transition: opacity 0.3s ease-out; transition-delay: 0.1s; padding: 10px 0; transition: all 0.3s; }
        #header .gnb .dep2 li + li { border-top: 1px solid rgba(255, 255, 255, 0.1); }
        #header .gnb .dep2 li a {display: flex; align-items: center; justify-content: flex-start; width: 100%; box-sizing: border-box; padding: 8px 12px; font-size: var(--title-18); color: var(--point-white); font-weight: 500; }

        #header .inq_btn { display: inline-flex; justify-content: center; align-items: center; color: var(--point-white); font-weight: 500; font-size: 95%; width: 174px; height: 56px; background: var(--point-color01); }

        #header .menu-trigger { position: absolute; right: 0; top: 50%; display: none; flex-direction: column; justify-content: space-between; width: 28px; height: 22px; transform: translateY(-50%);  }
        #header .menu-trigger span { position: relative; display: block; width: 100%; height: 3px; background: var(--point-white); transition: all 0.3s ease-out; }

        /* on */
        #header.on {background: var(--point-white); border-bottom: 1px solid var(--border-color03); }
        #header.on .hd_logo a {background: url("../images/skin/img_h_logo_on.png") no-repeat center; background-size: cover;}
        #header.on .gnb > li > a {color: var(--black-color03); font-weight: 500;}
        #header.on .menu-trigger span { background: var(--black-color01); }

        #header.asd .hd_logo a {background: url("../images/skin/img_h_logo_on.png") no-repeat center; background-size: cover;}
        #header.asd .inq_btn { position: relative; right: 50px;}
        #header.asd .menu-trigger { display: flex; }

        #header.asd .menu-trigger span { background: var(--black-color01); }

        #header .menu-trigger.on span:nth-of-type(1) { transform: rotate(45deg); top: 8px; }
        #header .menu-trigger.on span:nth-of-type(2) { visibility: hidden; opacity: 0; }
        #header .menu-trigger.on span:nth-of-type(3) { transform: rotate(-45deg); top: -12px; }

        /* over */
        @media (hover: hover) and (pointer: fine){
            #header:not(.asd):hover {background: var(--point-white); border-bottom: 1px solid var(--border-color03);}
            #header:not(.asd):hover .hd_logo a {background: url("../images/skin/img_h_logo_on.png") no-repeat center; background-size: cover;}
            #header:not(.asd):hover .gnb > li > a {color: var(--black-color03); font-weight: 500;}

            #header:not(.asd):hover .menu-trigger span { background: var(--black-color01); }

            #header .dep1_li:hover .dep2 { opacity: 1; }
            #header .gnb .dep2 li:hover { background: var(--point-color01); }



        }

        @media screen and (max-width: 1480px){
            #header .gnb { gap: 3.2vw; }
        }
        

		@media only screen and (max-width:1400px) {
            #header .hd_logo { width: clamp(180px, 15vw, 222px); }
            #header .gnb { gap: 3vw; }
            #header .gnb > li > a { font-size: 100%; }

            #header .inq_btn { width: 160px; height: 52px; font-size: 90%; }
		}



        @media screen and (max-width: 1240px){
            #header .gnb { display: none; }
            #header .menu-trigger { display: flex; }
            #header .inq_btn { position: relative; right: 50px; }
        }

		@media only screen and (max-width:1180px) {

		}

        @media screen and (max-width: 1060px){
            #header .hd_logo { width: clamp(150px, 15vw, 180px); }
        }

		@media only screen and (max-width:1024px) {
            #header { height: clamp(70px, 12vw, 120px); }


            #header .inq_btn { width: 140px; height: 48px; font-size: 85%; right: 60px; }
		}
		@media only screen and (max-width:860px) {
            #header .header_inner { width: calc(100% - 30px); }
		}
		@media only screen and (max-width:640px) {
            
            #header .menu-trigger { width: 27px; height: 20px; }

            #header .menu-trigger.on span:nth-of-type(1) { top: 8px; }
            #header .menu-trigger.on span:nth-of-type(3) { top: -9px; }

            #header .inq_btn { width: 120px; height: 42px; right: 50px; }
		} 
		@media only screen and (max-width:479px) { 
            #header .inq_btn { display: none; }

		} 

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

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

───────────────────────────────────────────────────────────*/
	/* PC 일반 */
    #aside { position: fixed; top: 0px; left: 0; width: 100%; height: 100%; box-sizing: border-box; background: var(--point-white); transition: 0.3s ease-out; opacity: 0; pointer-events: none; z-index: 51; }
    #aside.on { opacity: 1; pointer-events: all; }

    #aside .aside_box { position: relative; display: flex; align-items: center; height: 100%; }
    #aside .aside_box::before { opacity: 0; content: ''; position: absolute; right: 0; top: 0px; width: 110%; height: 100%; background: var(--point-color01); transition: width 0.6s cubic-bezier(0.47, 0, 0.31, 1.04) 0.2s; z-index: 1; }

    #aside .bg_box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow-y: auto; display: none; }
    #aside .menu_box { position: relative; width: 100%; height: 100%; box-sizing: border-box; padding: 110px 0 60px; overflow-y: auto; z-index: 4; }

    #aside .slidemenu { display: flex; flex-direction: column; width: 100%; }
    #aside .slidemenu > li { display: flex; flex-direction: column; justify-content: center; width: 100%; box-sizing: border-box; position: relative; padding: 28px 22.5px; }

    #aside .slidemenu > li + li { border-top: 1px solid var(--border-color03); }

    #aside .slidemenu > li .depth1_a { display: flex; align-items: center; font-size: var(--title-40); font-weight: 600; color: var(--black-color01); letter-spacing: -0.03em; }
    #aside .slidemenu > li * { opacity: 1; transform: translateX(0); transition: transform 0.8s cubic-bezier(0.47, 0, 0.31, 1.04), opacity 0.8s cubic-bezier(0.47, 0, 0.31, 1.04); }

    #aside .slidemenu > li .icons { display: none; position: absolute; right: 0; top: 0; width: 32px; height: 32px; cursor: pointer; z-index: 5; }

    #aside .slidemenu > li .icons:before,
    #aside .slidemenu > li .icons:after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--black-color08); }

    #aside .slidemenu > li .icons:before { width: 2px; height: 60%; }
    #aside .slidemenu > li .icons:after { width: 60%; height: 2px; }

    #aside .slidemenu > li.on .icons:before,
    #aside .slidemenu > li.on .icons:after { background: var(--point-color01); }

    #aside .slidemenu > li.on .icons:before { display: none; }

    #aside .slidemenu > li .depth { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 20px; }
    #aside .slidemenu > li .depth > li > a { display: block; font-size: var(--title-18); color: var(--black-color06); }


	@media only screen and (max-width:1024px) {
	}
	@media only screen and (max-width:860px) {
        #aside .menu_box { padding: 90px 0 60px; }
	}
	@media only screen and (max-width:640px) {
        #aside .slidemenu > li { padding: 20px 16px; }
        #aside .slidemenu > li .depth { display: none; }
        #aside .slidemenu > li .icons { display: block; }

        #aside .slidemenu > li .depth { margin-top: 24px; margin-bottom: 10px; }
        #aside .slidemenu > li .depth1_a span { font-size: 85%; }

        #aside .slidemenu > li .depth > li + li { margin-top: 14px; }
	} 
	@media only screen and (max-width:479px) { 
        #aside .slidemenu > li .depth { margin-top: 20px; margin-bottom: 6px; }
        #aside .slidemenu > li .depth > li + li { margin-top: 12px; }

        
	} 
	@media only screen and (max-width:320px) {
	}

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

	 FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
	/* PC 일반 */
    #footer { position: relative; width: 100%; background: var(--point-color02); box-sizing: border-box; padding: 81px 0 29px; }
    #footer::after { content: ''; display: block; position: absolute; right: 0; top: 0; background: url('../images/skin/img_ft_bg.png') no-repeat center center; width: 530px; height: 100%; z-index: 1; background-size: cover; }
    #footer .ft_inner {position:relative; width: calc(100% - 60px); height: auto; margin:0 auto;overflow:hidden; max-width: 1720px; z-index: 2;}
    #footer .ft_flex { display: flex; justify-content: space-between; align-items: flex-end; box-sizing: border-box; padding-bottom: 50px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
    #footer .ft_left { display: flex; flex-direction: column; gap: 65px; padding-bottom: 4px; width: 50%; }

    #footer .ft_left .ft_logo { width: 201px; }

    #footer .ft_info li { display: flex; flex-wrap: wrap; gap: 8px 38px; }
    #footer .ft_info li + li { margin-top: 7px; }

    #footer dl { display: flex; gap: 14px; }
    #footer dt { color: var(--point-white); font-weight: 300; font-size: 77%; }
    #footer dd { color: var(--black-color10); font-weight: 300; font-size: 77%; }

    #footer .ft_right { display: flex; flex-wrap: wrap; gap: 20px; justify-content: flex-end; width: 50%; }
    #footer .ft_right a { display: inline-flex; justify-content: space-between; align-items: center; width: 240px; background: #232323; box-sizing: border-box; padding: 19px 23px 16px; color: var(--black-color12); font-size: 80%; font-weight: 400; }

    #footer .ft_right a::after { content: ''; display: block; width: 8px; height: 14px; background: url('../images/skin/ico_arw.svg') no-repeat center center; background-size: cover; }

    #footer .ft_right a:nth-of-type(2) { color: var(--point-white); }

    #footer .ft_copy { padding-top: 22px; box-sizing: border-box; font-family: var(--font-type02); font-size: 69%; font-weight: 500; color: var(--gray-bg03); letter-spacing: -0.03em; }
    #footer .ft_copy span { display: inline-block; margin-right: 14px; }

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

    @media screen and (max-width: 1240px){
        #footer .ft_flex { flex-direction: column; gap: 30px; }
        #footer .ft_left { width: 100%; }
        #footer .ft_right { width: 100%; justify-content: flex-start; }
    }
	
	@media only screen and (max-width:1024px) {
        #footer { padding: clamp(50px , 7vw, 81px) 0 clamp(15px, 2.5vw, 29px); }
        #footer::after { height: 100%; background-size: cover; }


        #footer dl { gap: clamp(10px, 1.4vw, 14px); }
        #footer .ft_flex { flex-direction: column; gap: clamp(20px, 3vw, 30px); padding-bottom: clamp(25px, 5vw, 50px); }
        #footer .ft_left { width: 100%; gap: clamp(35px, 6.5vw, 65px); }

        #footer .ft_left .ft_logo { width: clamp(150px, 20vw, 201px); }


        #footer .ft_right { width: 100%; justify-content: flex-start; gap: clamp(15px, 2vw, 20px); }

        #footer .ft_right a { width: 200px; padding: clamp(12px, 1.5vw, 19px) clamp(18px, 2.3vw, 23px); }

        #footer .ft_info li { gap: 8px clamp(15px, 3vw, 30px); }

        #footer .ft_copy { padding-top: clamp(16px, 2.2vw, 22px); }

        .top_btn_wrap { bottom: 30px; }
        .top_btn_wrap a { width: 55px; height: 55px; }

	}
	@media only screen and (max-width:860px) {
        #footer .ft_inner {width: calc(100% - 30px);}

        #footer .ft_right a { width: 180px; }

        .top_btn_wrap a { width: 50px; height: 50px; }
	}
	@media only screen and (max-width:640px) {
        #footer .ft_right a { width: 170px; }

        .top_btn_wrap a { width: 45px; height: 45px; }
	}
	@media only screen and (max-width:479px) {
        #footer dt { font-size: 85%; }
        #footer dd { font-size: 85%; }
        #footer .ft_right a { width: 150px; font-size: 87.5%; }

        .top_btn_wrap a { width: 40px; height: 40px; }
	}
    @media only screen and (max-width:320px){
        #footer .ft_inner {width: calc(100% - 20px);}
    }


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

	 MAIN | index.html

───────────────────────────────────────────────────────────*/
	/* *PC 일반 **/
			
    /* visual */
    #wrap .main_visual {position:relative;}
    #wrap .main_visual .slick-slide {overflow:hidden;position:relative; height:100vh;border:none;}
    .main_visual .thumb {position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all 4s; transform: scale(1.04);}
    .main_visual .active .thumb {transform: scale(1);}
    .main_visual .info_wrap {position: absolute; left: 50.4%; top: 54.3%; transform: translate(-50%,-50%); font-size: var(--title-20); color: var(--point-white);}
    .main_visual h3 { font-family: var(--font-type02); font-weight: 400; font-size: 130%; letter-spacing: 0; }
    .main_visual h2 { margin-top: 29px; font-weight: 700; line-height: 1.38; font-size: 325%; letter-spacing: -0.03em; text-wrap: balance; }
    .main_visual h2 + p { margin-top: 41px; font-size: 110%; font-weight: 100; line-height: 1.54; letter-spacing: -0.025em; text-wrap: balance; }

    .main_visual .link_wrap { margin-top: 58px; display: inline-flex; flex-wrap: wrap; padding: 16px 29px; gap: 23px; border-radius: 500px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); }
    .main_visual .link_wrap li { font-size: 90%; font-weight: 300; letter-spacing: -0.03em; display: flex; align-items: center; }
    .main_visual .link_wrap li + li::before { content: ''; display: inline-block; margin-right: 23px; height: 12px; width: 1px; background: rgba(255, 255, 255, 0.4); }

    .main_visual .control_box{display: flex; align-items: center; flex-wrap: wrap; position: absolute; top: 54.2%; left:49.5%; transform: translate(-50%, -50%); gap: 40px; z-index: 9;}
    .main_visual .dots_box { margin-left: auto; }
    .main_visual .slick-dots{display: flex; flex-direction: column; flex-wrap: wrap; gap: 50px;box-sizing: border-box; counter-reset: number 0; }
    .main_visual .slick-dots li{position: relative; }
    .main_visual .slick-dots li button{position: relative; display: flex; align-items: center; width: 100%;height: 100%;box-sizing: border-box; transition: all 0.4s;}
    .main_visual .slick-dots li button:before{position: relative; display: flex; justify-content: center; align-items: center; counter-increment: number 1; content: counter(number, decimal-leading-zero); width: 100%;height: 100%; font-size: var(--title-16); font-family: var(--font-type02); font-weight: 600; color: var(--point-white); transition: all 0.4s; }
    .main_visual .slick-dots .circle_svg{opacity: 0; pointer-events: none;}
    .main_visual .slick-dots .slick-active .circle_svg {opacity: 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: 314px;stroke-dashoffset: 314;}

    @media screen and (max-width: 1520px){
        .main_visual .control_box { left: 50%; }
    }

    @media screen and (max-width: 1320px){
        .main_visual h2 { font-size: 300%; }
    }

    @media screen and (max-width: 1280px){
        .main_visual h3 { font-size: 120%; }
        .main_visual h2 { font-size: 280%; }
        .main_visual h2 + p { font-size: 100%; }
    }

    @media screen and (max-width: 1150px){
        .main_visual h2 { font-size: 250%; }
    }

    @media screen and (max-width: 1023px){

        .main_visual .info_wrap { left: 50%; top: 50%; }

        .main_visual h3 { font-size: 110%; }
        .main_visual h2 { margin-top: 25px; }
        .main_visual h2 + p { margin-top: 35px; }

        .main_visual .link_wrap { margin-top: 50px; gap: 15px; }

        .main_visual .control_box { top: revert; bottom: 5%; left: 52%; }
        .main_visual .dots_box { margin-left: revert; margin-inline: auto; }
        .main_visual .slick-dots { flex-direction: row; }

        .main_visual .link_wrap { padding: 10px 20px; }
        .main_visual .link_wrap li + li::before { margin-right: 15px; }

    }

    @media screen and (max-width: 860px){
        .main_visual h2 { font-size: 230%; margin-top: 20px; }
        .main_visual h2 + p { margin-top: 30px; }
        .main_visual .link_wrap { margin-top: 40px; gap: 12px; }
        .main_visual .link_wrap li + li::before { margin-right: 12px; }
        .main_visual .slick-dots { gap: 40px; }
    }

    @media screen and (max-width: 730px){
        .main_visual h2 + p br { display: none; }
    }

    @media screen and (max-width: 640px){
        .main_visual h2 { font-size: 210%; }

        #wrap .main_visual .slick-slide { max-height: 680px; }
        .main_visual .link_wrap { padding: 10px 17px; gap: 5px 10px; border-radius: 30px; }

        .main_visual .control_box { bottom: 5%; }
        .main_visual .slick-dots { gap: 36px; }
        .main_visual .circle_svg{ transform:translate(-50%, -50%) rotate(-90deg) scale(0.8); } 

    }

    @media screen and (max-width: 567px){
        #wrap .main_visual .slick-slide:nth-of-type(3) .link_wrap li:nth-of-type(4) { margin-right: 14px; }
        #wrap .main_visual .slick-slide:nth-of-type(3) .link_wrap li:nth-of-type(5)::before { display: none; }
    }

    @media screen and (max-width: 444px){
        #wrap .main_visual .slick-slide:nth-of-type(3) .link_wrap li:nth-of-type(3) { margin-right: 28px; }
        #wrap .main_visual .slick-slide:nth-of-type(3) .link_wrap li:nth-of-type(4)::before { display: none; }
        #wrap .main_visual .slick-slide:nth-of-type(3) .link_wrap li:nth-of-type(4) { margin-right: revert; }
        #wrap .main_visual .slick-slide:nth-of-type(3) .link_wrap li:nth-of-type(5)::before { display: inline-block; }
    }

    @media screen and (max-width: 479px){
        .main_visual h2 + p { margin-top: 20px; }
        .main_visual .link_wrap { margin-top: 30px; }

        .main_visual .info_wrap { top: 52%; }
    }

    @media screen and (max-width: 375px){
        #wrap .main_visual .slick-slide:nth-of-type(2) .link_wrap li:nth-of-type(3) { margin-right: 14px; }
        #wrap .main_visual .slick-slide:nth-of-type(2) .link_wrap li:nth-of-type(4)::before { display: none; }
    }

    @media screen and (max-width: 360px ){
        .main_visual h2 + p br { display: none; }
    }

    @media screen and (max-width: 353px){
        #wrap .main_visual .slick-slide:nth-of-type(3) .link_wrap li:nth-of-type(2) { margin-right: 42px; }
        #wrap .main_visual .slick-slide:nth-of-type(3) .link_wrap li:nth-of-type(3)::before { display: none; }
        #wrap .main_visual .slick-slide:nth-of-type(3) .link_wrap li:nth-of-type(3) { margin-right: revert; }
        #wrap .main_visual .slick-slide:nth-of-type(3) .link_wrap li:nth-of-type(4)::before { display: inline-block; }
        #wrap .main_visual .slick-slide:nth-of-type(3) .link_wrap li:nth-of-type(4) { margin-right: revert; }
        #wrap .main_visual .slick-slide:nth-of-type(3) .link_wrap li:nth-of-type(5)::before { display: none; }
    }