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

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

───────────────────────────────────────────────────────────*/
body::-webkit-scrollbar{display: none;}
/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
	#wrap {position:relative;width:100%; box-sizing: border-box; overflow: clip;}
    .w_custom{position: relative; width: calc(100% - 60px); max-width: 1600px; margin-inline: auto; box-sizing: border-box;}
    #container{position: relative; padding-bottom:150px; box-sizing: border-box;}

    @media (max-width:1500px){
        br.for_pc{display: none;}
    }

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

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

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

───────────────────────────────────────────────────────────*/
    #header{position:sticky;top:0;left:0;width:100%;z-index:100;transition:0.3s;background:var(--point-white);}
    .header_cont{display: flex;align-items: center;justify-content: space-between;box-sizing:border-box;padding:0 80px;position: relative;height:80px;}
    #header .hd_logo{height:clamp(22px, 2.5vw, 34px);position: relative;z-index:3;}
    #header .gnb_wrap{height:100%;}
    #header .gnb{display: flex; height: 100%; gap:80px; text-align: center;}
        #header .gnb > li{position: relative;font-size: var(--text-18);font-weight:500;color: var(--black-color01);height: 100%;letter-spacing: 0;transition: all 0.4s;}
        #header .gnb > li > a{display: flex;align-items: center;justify-content: center;height: 100%;}
        #header .gnb > li.on > a{color:var(--point-color01);}
    #header .gnb .dep02{position: absolute;top:100%;left: 50%;width:230px;translate: -50%;padding-block:10px;background: var(--gray-bg01);opacity: 0;pointer-events: none;transition: inherit;}
    #header .gnb > li.on .dep02{opacity: 1;pointer-events: all;}
    #header .gnb .dep02 > li{position: relative;font-size:var(--text-16);font-weight:500;color: var(--black-color03);transition: inherit;}
    #header .gnb .dep02 > li > a{display: block;padding:10px 35px 10px 25px;text-underline-offset:4px;text-align:left;position: relative;}
    #header .gnb .dep02 > li > a:after{width:8px;aspect-ratio:auto 1;content:"";border:2px solid var(--point-color01);border-width:2px 2px 0 0;translate:0 -50%;top:50%;position: absolute;rotate:45deg;transition: all 0.3s;opacity:0;right:25px;}
    .lang_desc{position: relative; font-size: var(--text-20);}
    .lang_desc button{font-size: 80%;font-weight:500;color: var(--black-color03);padding:7px clamp(12px, 1.5vw, 15px);padding-right:clamp(28px, 4vw, 40px);display: flex;align-items: center;gap:7px;cursor: pointer;background:var(--gray-bg01);}
        .lang_desc button:before{display: inline-flex;content:'';width:clamp(12px, 1.6vw, 16px);aspect-ratio: auto 1;background: url('../images/skin/icon_globe.svg') no-repeat center / 100% auto;}
        .lang_desc button:after{position: absolute;content:'';width:clamp(7px, 1vw, 8px);aspect-ratio: auto 1.7;background: var(--black-color03);clip-path: var(--clip-poly01);top: 50%;right:clamp(10px, 1.5vw, 15px);translate: 0 -50%; transition: all 0.4s;}
        .lang_desc button.on:after{scale: -1 -1;background: var(--point-color01);}
    .lang_desc ul{position: absolute;top: calc(100% + 10px);left: 0;width: 100%;padding-block: 10px;background: var(--point-color01);font-size: 75%;font-weight: 500;color: var(--black-color06);text-align: center;opacity: 0;pointer-events: none;transition: all 0.4s;}
        .lang_desc:has(button.on) ul{opacity: 1;pointer-events: all;}
    .lang_desc ul a{display: block;padding: 4px 20px;opacity: 0.6;filter:var(--filter-white);}
    .lang_desc ul a.on{opacity: 1;}
    #header .utility{display: flex;align-items: center;gap: clamp(10px, 1.6vw, 20px);}
    #header .allCate{display:none; flex-direction: column; justify-content: space-between; width: clamp(24px, 6vw, 32px); aspect-ratio: auto 1.6;position: relative;}
    #header .allCate span{width: 100%; height: 2px; background: var(--point-color01);border-radius:2px;transition: all 0.3s;}
    #header .allCate.on span{position: absolute;top:50%;left:0;}
    #header .allCate.on span:nth-child(1){rotate:45deg;}
    #header .allCate.on span:nth-child(2){rotate:-45deg;}
    #header .allCate.on span:nth-child(3){display: none;}

    #header.on{box-shadow:0 0 3px 0 rgba(0,0,0,0.3);}

    /* over */
    @media (hover:hover) and (pointer:fine) {
        #header .gnb .dep02 > li:hover > a:after{opacity:1;right:15px;}
    }

    @media (max-width:1300px){
        .header_cont{padding:0 clamp(15px, 3vw, 30px);}
        #header .gnb{gap:clamp(20px, 3vw, 40px);}
    }
    @media (max-width:1023px){
        .header_cont{height:clamp(60px, 8vw, 80px);}
        #header .gnb_wrap{display: none;}
        #header .allCate{display: flex;}
    }

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

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

───────────────────────────────────────────────────────────*/
	/* PC 일반 */
		#aside {top:clamp(60px, 8vw, 80px);right:-100%;width:100%;transition:0.8s;height:calc(100% - clamp(60px, 8vw, 80px));box-sizing:border-box;box-sizing:border-box;position:fixed;background:var(--point-white);z-index:101;border-top:1px solid var(--border-color01);}
		#aside.on {right:0%;}
		body:has(#aside.on){overflow:hidden;}

		#aside .aside_box {overflow-y:auto;width:100%;height:100%;box-sizing:border-box;}
		#aside .depth1_li > a{box-sizing:border-box;border-bottom:1px solid var(--border-color01);font-size:var(--text-18);color:var(--black-color03);font-weight:400;position: relative;padding:var(--row-gap15) var(--row-gap15);display: block;}
        #aside .group_li_a:before{width:clamp(8px, 1vw, 10px);aspect-ratio:auto 1;content:"";border:2px solid var(--black-color08);border-width:2px 2px 0 0;rotate:135deg;translate:0 -50%;position: absolute;top:44%;right:15px;}
        #aside .depth1_li.on > a{color:var(--point-color01);}
        #aside .depth1_li.on .group_li_a:before{scale:-1 -1;border-color:var(--point-color01);translate:0 1px;}
        #aside .depth{background:var(--gray-bg01);box-sizing:border-box;border-bottom:1px solid var(--border-color01);display: none;}
        #aside .depth > li > a{box-sizing:border-box;font-size:var(--text-16);color:var(--black-color03);font-weight:400;position: relative;padding:var(--row-gap10) var(--row-gap15);display: block;}

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

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
	#footer{padding:var(--row-gap40) 0;}
    #footer .ft_content{box-sizing:border-box;padding:0 var(--row-gap80);}
    #footer .ft_content > section{display: flex;align-items: center;justify-content: space-between;gap:var(--row-gap20);flex-wrap:wrap;}
            #footer .ft_logo_box h2{height:clamp(22px, 2.5vw, 28px);}
    #footer .ft_logo_box .ft_menu{display: flex;align-items: center;}
        #footer .ft_logo_box .ft_menu li{display: flex;align-items: center;}
        #footer .ft_logo_box .ft_menu li + li:before{width:5px;aspect-ratio: auto 1;content:"";background:var(--border-color01);border-radius:50%;margin:0 var(--row-gap20);}
        #footer .ft_logo_box .ft_menu li a{font-size:var(--text-17);font-weight:400;color:var(--black-color03);}
        #footer .ft_logo_box .ft_menu li a strong{font-weight:500;}
    #footer .ft_info_box{margin-top:var(--row-gap20);}
        #footer .ft_info_box .info_box{display: flex;gap:var(--row-gap20) var(--row-gap40);flex-wrap: wrap;}
        #footer .ft_info_box .info_box dl{display: flex;gap:clamp(6px, 1.4vw, 14px);font-size:var(--text-17);line-height:1.4;letter-spacing:0;}
        #footer .ft_info_box .info_box dl dt{font-weight:500;color:var(--black-color03);}
        #footer .ft_info_box .info_box dl dd{font-weight:400;color:var(--black-color06);}
        #footer .ft_info_box .copyright{display: flex;flex-wrap: wrap;gap:5px clamp(6px, 1.4vw, 14px);font-size:var(--text-16);font-weight:400;color:var(--black-color08);letter-spacing:0;}

        @media (max-width:1300px){
            #footer .ft_content{padding:0 clamp(15px, 3vw, 30px);}
        }

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

    MAIN | index.html

───────────────────────────────────────────────────────────*/
    /*video*/
        .main_video{position: relative;}
        .main_video .video_box{position: relative; height:clamp(400px, 78vw, 780px); }
		.main_video::before { content: ''; position: absolute; inset: 0; width: 100%; height: 100%;background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 100%);; z-index: 1; }
		.main_video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
		.main_video .txt_box { height: 100%; display: flex; flex-direction: column; justify-content:flex-start;gap:var(--row-gap20);z-index: 2;text-align: center; align-items: center;color:var(--point-white);line-height: 1.6;box-sizing:border-box;padding-top:clamp(30px, 10vw, 150px);}
			.main_video .txt_box h2 {font-size:var(--text-60);font-weight:700;letter-spacing:-0.02em;}
			.main_video .txt_box span {font-size:var(--text-24);font-weight:400;opacity:0.8;letter-spacing:0;}
			.main_video .txt_box p {font-size:var(--text-20);font-weight:300;margin-top:10px;}

    /*cate*/
        .main_cate{position: relative;padding-bottom:var(--row-gap100);}
        .main_cate .cate_list{position: absolute;bottom:60px;width:100%;box-sizing:border-box;padding:0 80px;left:0;display: grid;grid-template-columns:var(--grid-array06);gap:var(--row-gap10);z-index:3;align-items: end;}
        .main_cate .cate_list li a{display: flex;flex-direction: column;justify-content: flex-end;}
        .main_cate .cate_list li .thumb{width:100%;height:0;overflow: hidden;position: relative;transition:height 0.4s;}
        .main_cate .cate_list li .thumb:before{width:100%;height:0;content:"";position: absolute;bottom:0;left:0;background:var(--point-color01);transition:height 0.4s;}
        .main_cate .cate_list li .thumb img{position: absolute;top:50%;left:50%;translate:-50% -50%;opacity:0;pointer-events: none;transition:all 0.4s;}
        .main_cate .cate_list li .txt{width:100%;height:80px;background:var(--point-white);display: flex;align-items: center;justify-content: space-between;box-sizing:border-box;padding:0 var(--row-gap30);position: relative;box-shadow: 0 0 clamp(20px, 5vw, 60px) 0 rgba(0, 0, 0, 0.20);transition:all 0.4s;}
        .main_cate .cate_list li .txt p{font-size:var(--text-22);font-weight:600;color:var(--black-color01);transition:all 0.4s;letter-spacing:0;}
        .main_cate .cate_list li .txt:before{width:calc(100% - var(--row-gap30) * 2);height:1px;content:"";position: absolute;top:0;left:50%;translate:-50% 0;background:rgba(255,255,255,0.4);}
        .main_cate .cate_list li .txt:after{width:10px;aspect-ratio: auto 1;content:"";border:2px solid var(--black-color08);border-width:2px 2px 0 0;rotate:45deg;translate:0 -50%;position: absolute;top:50%;right:30px;}

        /* over */
        @media (min-width:1023px){
            @media (hover:hover) and (pointer:fine) {
                .main_cate .cate_list li:hover .thumb{height:300px;}
                .main_cate .cate_list li:hover .thumb:before{height:100%;}
                .main_cate .cate_list li:hover .thumb img{opacity:1;pointer-events: all;}
                .main_cate .cate_list li:hover .txt{background:var(--point-color01);}
                .main_cate .cate_list li:hover .txt p{color:var(--point-white);font-size:var(--text-24);}
                .main_cate .cate_list li:hover .txt:after{border-color:var(--point-white);}
    
            }
        }
        
        @media (max-width:1700px){
            .main_cate .cate_list{padding:0 30px;}
            .main_cate .cate_list li .txt{padding:0 25px 0 10px;}
            .main_cate .cate_list li .txt p{font-size:var(--text-18);}
            .main_cate .cate_list li .txt:before{width:calc(100% - 20px);}
            .main_cate .cate_list li .txt:after{right:15px;}
            .main_cate .cate_list li:hover .txt p{font-size:var(--text-20);}
        }
        @media (max-width:1023px){
            .main_cate{translate:0 calc(var(--row-gap70) * -1);}
            .main_cate .cate_list{grid-template-columns:var(--grid-array03);position:relative;bottom:0;padding-inline:var(--row-gap30);}
            .main_cate .cate_list li .thumb{height:auto;aspect-ratio: auto 1;}
            .main_cate .cate_list li .thumb:before{height:100%;}
            .main_cate .cate_list li .thumb img{opacity:1;pointer-events: all;}
            .main_cate .cate_list li .txt{padding:20px 25px 20px 10px;height:auto;}
            .main_cate .cate_list li .txt p{font-size:var(--text-24);}
        }