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

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

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

/*───────────────────────────────────────────────────────────
	 POPUP
───────────────────────────────────────────────────────────*/
	/** PC 일반 **/
		/* layer-popup */
		.layer-popup {font-size:12px;background:#fff;border:1px #000 solid;position:absolute;transform:none;}
		.layer-popup.layer_pc {}
		.layer-popup.layer_t {}
		.layer-popup.layer_m {left:50%;min-height:auto;transform:translate(-50%, 0)}
		.layer-popup h4 {font-size:12px;font-weight:700 !important;line-height:18px;padding:3px 12px;box-sizing:border-box;text-align:left;}
		.pop_content {margin:0;padding:0;}
		.pop_content img, .pop_content table, .pop_content div {max-width:100%;max-height:100%;}
		.layer-popup .pop_closed {text-align:right;padding:4px 12px;box-sizing:border-box;line-height:20px;font-size:12px;vertical-align:middle;}
		.layer-popup .pop_closed input[type="checkbox"] {}
		.layer-popup .pop_closed input[type="checkbox"] + label {font-size:12px;}
		.layer-popup .pop_closed a {vertical-align:top;display:inline-block;line-height:20px;margin-left:12px;position:relative;z-index:1;width:20px;height:20px;font-size:0;}
		.layer-popup .pop_closed a:before,
		.layer-popup .pop_closed a:after {display:inline-block;content:"";width:24px;height:1px;background:#000;position:absolute;left:0;top:50%;}
		.layer-popup .pop_closed a:before {transform:rotate(45deg) }
		.layer-popup .pop_closed a:after {transform:rotate(-45deg) }
		
		
/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
    body {overflow: visible;}
    #wrap {position:relative; width: 100%; box-sizing: border-box; overflow: clip;}
    #container, .w_custom{position: relative; width: calc(100% - 60px); max-width: 1300px; margin-inline: auto; box-sizing: border-box;}
    input:is([type="text"], [type="password"], [type="number"]){border:1px solid var(--border-color01);background: var(--point-white);font-size: inherit;padding-inline: 20px;color: inherit;line-height: normal;box-sizing: border-box;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
        input:is([type="text"], [type="password"], [type="number"])::placeholder{color: var(--black-color10);}
    #wrap [class^='swiper-button']:after{display: none;}
    #container{padding-bottom: 170px;}
    
    @media (max-width:1023px){
        #container{padding-bottom: clamp(120px, 17vw, 170px);}
    }
    @media (max-width:860px){
        #container, .w_custom{width: calc(100% - 30px);}
		#wrap input:where([type="text"], [type="password"], [type="number"]){padding-inline:15px;}
    }
    @media (max-width:320px){
        #container, .w_custom{width: calc(100% - 20px);}
    }


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

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

───────────────────────────────────────────────────────────*/
	#header{position: sticky; top:0; width: 100%; height: 100px; z-index: 100; background: var(--point-white); transition: all 0.4s;}
        #header.on{box-shadow: 3px 3px 5px rgba(0,0,0,0.1);}
    #header .w_custom{height: 100%;max-width: 1680px;display: flex;align-items: center;justify-content: space-between;gap: 15px;z-index:6;}
    #header .logo{font-size: 0; height: 100%;}
    #header .logo a{display: flex; height: 100%; align-items: center; padding-block: 15px; box-sizing: border-box;}
    #header .gnb{position: absolute;top:0;left: 50%;transform: translateX(-50%);height: 100%;display: flex;justify-content: center;text-align: center;font-size: var(--title-20);width: calc(100% - 500px); /* pointer-events: none; */}
    #header .gnb > li{position: relative; height: 100%; font-size: 95%; font-weight: 600; color: var(--black-color01); box-sizing: border-box;}
    #header .gnb > li > a{display: flex; align-items: center; height: 100%; box-sizing: border-box; padding-inline: clamp(10px, 2.1vw, 40px); transition: all 0.4s;}
    #header .gnb .dep02{display: none;}
    #header .link_list{display: flex;align-items: center;gap: 40px;gap: clamp(20px, 2.1vw, 40px);font-size: var(--title-20);text-align: center;}
    #header .link_list > li{font-size: max(14px, 85%);font-weight: 500;color: var(--black-color01);font-family: var(--font-type02);letter-spacing: 0;}
    #header .link_list > li em{font-weight: inherit; color: var(--point-color02);}
    #header .link_list > li img{height: 24px;transition: all 0.4s;}
    #header .link_list > li:has(.cate_btn){display: none;}
    #header .link_list .search_btn{position: relative; display: inline-block;}
    #header .link_list .search_btn span{position: absolute;top:50%;left:50%;width: 100%;height: 2px;background: var(--black-color01);top:50%;left:50%;transform: translate(-50%, -50%) rotate(45deg);opacity: 0;transition: all 0.4s;}
        #header .link_list .search_btn span:nth-child(2){transform: translate(-50%, -50%) rotate(-45deg);}
        #header .link_list .search_btn.on span{opacity: 1; }
        #header .link_list .search_btn.on img{opacity: 0;}
    #header .cate_btn{display: flex;flex-direction: column;justify-content: space-between;width: 26px;height: 20px;}
    #header .cate_btn span{width: 100%; height: 2px; background: var(--black-color00);}
    #header .lang_desc{position: relative;z-index: 5;}
	#header .lang_desc dt{position:relative;z-index: 3;}
    #header .lang_desc dt span{display: flex;filter: var(--filter-black);cursor: pointer;transition: all 0.4s;}
        #header .lang_desc dt.on span{filter: none;}
    #header .lang_desc dd{position: absolute;top: -14px;left: 50%;transform: translateX(-50%);font-size: var(--title-20);text-align: center;width: max-content;padding-block: 50px 5px;background: var(--black-color00);opacity: 0;clip-path: inset(0 0 100% 0);transition: all 0.4s;}
    #header .lang_desc:has(dt.on) dd{opacity: 1; clip-path: inset(0 0 0 0);}
    #header .lang_desc dd a{display: block;font-size: max(14px, 80%);font-weight: 400;color: rgba(255,255,255,1);padding: 4px 20px;}
        #header .lang_desc dd a.on{color: var(--point-color01);}

    #header .search_box{position: absolute; top:100%; left:0; width: 100%; border-block:1px solid var(--border-color01); box-sizing: border-box; padding-block: 15px; background: var(--point-white); opacity: 0; clip-path: inset(0 0 100% 0); transition: all 0.4s;}
    #header:has(.search_btn.on) .search_box{opacity: 1; clip-path: inset(0 0 0 0);}
    #header .search_box .w_custom{justify-content: center; height: auto;}
    #header .search_box form{width: 100%;}
    #header .search_box fieldset{position: relative; display: flex; margin-inline: auto; width: 100%; max-width: 400px; font-size: var(--title-20);}
    #header .search_box input[type="text"]{width: 100%;height: 50px;border:0;background: var(--gray-bg01);border-radius: 0;padding-inline: 25px 60px; font-size: 80%; font-weight: 400; color: var(--black-color01);}
    #header .search_box button{position: absolute;top:50%;right:25px;height: 20px;transform: translateY(-50%);font-size: 0;}
    #header .ov_wrap{position: absolute;left:0;top:100%;width: 100%;height: 415px;background: var(--point-white);z-index: 5;opacity: 0;clip-path: inset(0 0 100% 0);transition: all 0.6s;box-sizing: border-box;}
        #header .ov_wrap:has(li.on){opacity: 1; clip-path: inset(0 0 0 0);}
        #header .ov_wrap:before{position: absolute;content:'';width: 340px;height: 90px;background: url('../images/skin/logo.svg') no-repeat center bottom / 100% auto;right:60px;bottom:50px;opacity: 0.1;}
    #header .ov_wrap .close_btn{display: none;}
	#header span.replace-string { color: #f08200; }
    #header .ov_gnb{position: relative;width: 100%; height: 100%; }
        #header .ov_gnb:before{position: absolute; content:''; top:0; right:calc(100% - 320px); width: 100vw; height: 100%; background: var(--gray-bg01); }
        #header .ov_gnb:after{position: absolute; content:''; top:0; left:320px; width: 100vw; height: 1px; background: var(--border-color01); }
    #header .ov_gnb > li{position: absolute; top:0; left:0; display: flex; font-size: var(--title-20);width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: all 0.4s; overflow: hidden;/*  overflow-y: auto; */}
        #header .ov_gnb > li.on{opacity: 1; pointer-events: all;}
    #header .ov_gnb > li > a{position: relative; display: block; font-size: 150%; font-weight: 500; color: var(--black-color01); letter-spacing: -0.03em; width: 320px; padding:50px 30px; box-sizing: border-box;}
    
    #header .ov_gnb .dep2_box{width: 390px;position: relative;box-sizing:border-box;padding:10px 0;}
	#header .ov_gnb .dep02{padding:44px 40px;box-sizing: border-box;overflow-y:auto;height:100%;}
    /* #header .ov_gnb .dep02:before{position: absolute; content:''; width: 1px; height: calc(100% - 88px); background: var(--border-color03); top:50%; right:0; transform: translateY(-50%);} */
		#header .ov_gnb .dep02::-webkit-scrollbar { width: 5px;}
        #header .ov_gnb .dep02::-webkit-scrollbar-thumb {border-radius: 10px; background: var(--black-color10);}
        #header .ov_gnb .dep02::-webkit-scrollbar-track {border-radius: 10px; background:var(--border-color01);}
    #header .ov_gnb .dep02 > li{box-sizing: border-box;font-size: max(15px, 90%);font-weight: 500;color: var(--black-color05);}
    #header .ov_gnb .dep02 > li > a{position: relative; display: block; padding:10px 50px 10px 20px; transition: all 0.4s;}
    #header .ov_gnb .dep02 > li > a:before{position: absolute;content:'';width: 11px;aspect-ratio: auto 1;border:solid var(--border-color02);border-width: 0 2px 2px 0;box-sizing: border-box;top: 50%;right: 22px;transform: translateY(-50%) rotate(-45deg);border-radius: 1px; transition: border 0.4s;}
    #header .ov_gnb .dep03{position: absolute;top: 10px;left:100%;width: 100%;height: calc(100% - 20px);box-sizing: border-box;padding: 34px 40px; overflow: hidden; overflow-y: auto; opacity: 0; pointer-events: none; transition: all 0.4s;}
        #header .ov_gnb .dep03::-webkit-scrollbar { width: 5px;}
        #header .ov_gnb .dep03::-webkit-scrollbar-thumb {border-radius: 10px; background: var(--black-color10);}
        #header .ov_gnb .dep03::-webkit-scrollbar-track {border-radius: 10px; background:var(--border-color01);}
    #header .ov_gnb .dep03 > li{font-size: max(14px, 88.8%);font-weight: 400;color: var(--black-color08);}
    #header .ov_gnb .dep03 > li > a{display: block; padding:9px 20px; transition: all 0.4s;}

    #header .ov_bg{position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: all 0.4s;}
        body:has(#header .cate_btn.on){overflow: hidden; touch-action: none;}
        body:has(#header .cate_btn.on) .ov_bg{opacity: 1; pointer-events: all;}

        /* over */
            @media (min-width:1101px){
                #header .ov_gnb .dep02 > li.active > a{background: var(--point-color01); color: var(--black-color01);}
                #header .ov_gnb .dep02 > li.active > a:before{border-color: var(--black-color01);}
                #header .ov_gnb .dep02 > li.active .dep03{opacity: 1; pointer-events: all;}
                #header .ov_gnb .dep03 > li:hover > a{color: var(--point-color03);}
            }

    @media (max-width:1400px){
        #header .gnb > li{font-size: 85%;}
        #header .gnb > li > a{padding-inline: clamp(7.5px, 1.5vw, 20px);}
    }
    @media (max-width:1200px){
        #header .gnb > li{font-size: 75%;}
        #header .gnb > li > a{padding-inline: clamp(7.5px, 1vw, 15px);}
    }
    @media (max-width: 1100px){
        #header .gnb{display: none;}
        #header .ov_gnb:after{display: none;}
        #header .link_list > li:has(.cate_btn){display: inline-block;}
        #header .lang_desc dd{top: -10px;padding-top: 45px;}
        #header .lang_desc dd a{padding-inline: 15px;}

        #header .ov_wrap{position: fixed;top:0;left:auto;right:0;width: 80%;max-width: 420px;height: 100%;clip-path: inset(0 0 0 100%);overflow: hidden;overflow-y: auto;padding-block: 20px 50px;z-index: 200;}
            #header:has(.cate_btn.on) .ov_wrap{clip-path: inset(0 0 0 0); opacity: 1;}
        #header .ov_wrap:before{position: fixed;right:30px;bottom:30px;width: clamp(150px, 30vw, 300px);}
        #header .ov_wrap .w_custom{flex-direction: column;align-items: flex-end;justify-content: flex-start;}
        #header .ov_wrap .close_btn{position: relative; display:block; width: 30px; aspect-ratio: auto 1;}
        #header .ov_wrap .close_btn span{position: absolute; width: 70%; height: 2px; background: var(--black-color00); top:50%; left:50%; transform: translate(-50%, -50%) rotate(45deg);}
		#header .ov_wrap .close_btn span:nth-child(2){transform: translate(-50%, -50%) rotate(-45deg);}
        #header .ov_gnb:before{display: none;}
        #header .ov_gnb > li{position: relative; display: block; inset: auto; opacity: 1; pointer-events: all; height: auto; overflow: visible;}
        #header .ov_gnb > li > a{width: 100%;font-size: 130%;padding: 13px 30px;background: var(--gray-bg01);}
		#header .ov_gnb .dep2_box{width:100%;}
        #header .ov_gnb .dep02{width: 100%; padding:10px 0 20px;}
        #header .ov_gnb .dep02:before{display: none;}
		#header .ov_gnb .dep02 > li > a{padding-left:30px;}
            #header .ov_gnb .dep02 > li > a:before{right:32px}
            #header .ov_gnb .dep02 > li:has(ul) > a:before{top: 42%;transform: translateY(-50%) rotate(45deg);border-color: var(--black-color08);}
            #header .ov_gnb .dep02 > li:has(ul.on) > a:before{top: 54%;transform: translateY(-50%) rotate(45deg) scale(-1,-1);border-color: var(--point-color02);}
        #header .ov_gnb .dep03{position: relative;inset: auto;height: auto;opacity: 1;pointer-events: all;padding:0;overflow: visible;display: none;transition: none;padding-block: 5px 15px;}
        #header .ov_gnb .dep03 > li > a{padding-inline: 30px;}
    }
    @media (max-width:1023px){
        #header{height: clamp(60px, 10vw, 100px);}
        #header .lang_desc dd{padding-top: clamp(40px, 4.5vw, 45px);}
        #header .search_box input[type="text"]{height: clamp(45px, 5.5vw, 50px); padding-inline: 20px 55px;}
        #header .search_box button{right:20px;}

        #header .ov_gnb > li > a{font-size: 110%; padding-inline: clamp(20px, 3vw, 30px);}
        #header .ov_gnb .dep02 > li > a{padding-left: clamp(20px, 3vw, 30px);}
        #header .ov_gnb .dep02 > li > a:before{right:clamp(22px, 3.2vw, 32px); width: clamp(9px, 1.1vw, 11px);}
        #header .ov_gnb .dep03 > li > a{padding-inline: clamp(20px, 3vw, 30px);padding-block: clamp(7px, 1vw, 9px);}
    }
    @media (max-width:860px){
        #header .ov_wrap:before{right:15px; bottom:15px;}
    }
    @media (max-width:479px){
        #header .link_list > li.global{display: none;}
    }


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

    MAIN | index.html

───────────────────────────────────────────────────────────*/
    .visualSwiper{position: relative;}
    .visualSwiper .w_custom{height: 100%;}
    .visualSwiper .swiper-slide{position: relative; height: 730px; overflow: hidden; box-sizing: border-box; background: url('../images/skin/main_visual.jpg') no-repeat center / cover;}
    .visualSwiper .swiper-slide .w_custom{width: calc(100% - 240px);}
    .visualSwiper .thumb{position: absolute;top:50%;right:0;transform: translateY(-50%);width: max(55%, 200px);text-align: right;}
    .visualSwiper .txt_wrap{height: 100%;display: flex;flex-direction: column;justify-content: center;gap: 20px;font-size: var(--title-20);align-items: flex-start;max-width: 640px;}
    .visualSwiper .txt_wrap .logo{display: block; font-size: 0; width: 70%;}
    .visualSwiper .txt_wrap h3{font-size: 220%; font-weight: 500; color: var(--black-color01); line-height: 1.27; letter-spacing: -0.03em;}
    .visualSwiper .txt_wrap h3 em{display: block; font-weight: 700;}
    .visualSwiper .txt_wrap h3 + .bullet_list{margin-top: 12px;}
    .visualSwiper .bullet_list:not(:has(li)){display: none;}
	
	.visualSwiper .more_view_box{margin-top:20px;display: flex;flex-wrap:wrap;gap:10px;}
    .visualSwiper .more_view{}
    .visualSwiper .controller{max-width: 1680px; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index: 5; display: flex; align-items: center; justify-content: space-between; pointer-events: none;}
    .visualSwiper [class^='swiper-button']{position: relative; inset: auto; margin:0; width: 48px; height: auto; aspect-ratio: auto 1; border:2px solid var(--black-color05); box-sizing: border-box; background: none; transition: all 0.4s; pointer-events: all; display: none;}
	.visualSwiper [class^='swiper-button'].swiper-button-next{transform: scale(-1,-1);}
	.visualSwiper [class^='swiper-button']:before{position: absolute; content:''; width: 15px; height: 14px; background: url('../images/skin/icon_arw.svg') no-repeat center / 100% auto; top:50%; left:50%; transform: translate(-50%, -50%); filter: brightness(0.3); transition: all 0.4s;}
    .visualSwiper .fixed_thumb{position: relative;top: 50%;right: 40px;transform: translateY(-50%);width: calc(100% + 40px);}
    .visualSwiper .fixed_thumb img{width: 100%; height: auto;}
	
	.visualSwiper .video_slide .w_custom{display: flex;flex-wrap:wrap;flex-direction: row-reverse;gap:30px;align-items: center;justify-content: space-between;}
	.visualSwiper .video_slide .thumb{position: static;transform:none;width:calc(50.7% - 30px);box-sizing:border-box;}
	.visualSwiper .video_slide .txt_wrap{max-width:49.3%;}
	.visualSwiper .thumb .video_box{width:100%;height:0;padding-bottom:49%;position: relative;overflow:hidden;}
	.visualSwiper .thumb .video_box iframe{width:100%;height:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);}

	.visualSwiper .swiper-pagination { bottom: 20px !important; }
	.visualSwiper .swiper-pagination-bullet { width: 16px; height: 16px; background: #000; opacity: 0.3; margin: 0 6px !important; }
	.visualSwiper .swiper-pagination-bullet-active { background: #000; opacity: 1; }

        /* over */
        @media (hover:hover) and (pointer:fine){
            .visualSwiper [class^='swiper-button']:hover{background: var(--black-color00); border-color: var(--black-color00);}
            .visualSwiper [class^='swiper-button']:hover:before{filter: none;}

        }

	@media (max-width:1300px){
		.visualSwiper .video_slide .txt_wrap{width:57%;max-width:initial;}
		.visualSwiper .video_slide .thumb{width:calc(43% - 30px);}
	}
    @media (max-width:1023px){
        .visualSwiper .swiper-slide{height:auto;padding:60px 0;}
        .visualSwiper .swiper-slide .w_custom{width: calc(100% - 60px);display: flex;flex-direction: column;flex-wrap:nowrap;align-items: flex-start;}
		.visualSwiper .thumb{position: static;transform:none;width:100%;max-width:640px;}
        .visualSwiper .txt_wrap{gap: clamp(10px, 2vw, 20px);}
        .visualSwiper .txt_wrap h3{font-size: 200%;}
        .visualSwiper .txt_wrap h3 + .bullet_list{margin-top: clamp(6px, 1.2vw, 12px);}
        .visualSwiper .controller{display: none;}
        .visualSwiper .fixed_thumb{width: 100%; right:0;}
		
		.visualSwiper .video_slide .thumb{width:100%;max-width:640px;}	
		.visualSwiper .video_slide .txt_wrap{width:100%;max-width:initial;}
    }
    @media (max-width:860px){
        .visualSwiper .thumb{top:auto; bottom:20px; transform: none;}
    }
    @media (max-width:640px){
		.visualSwiper .txt_wrap{justify-content: flex-start;box-sizing:border-box;padding-top:30px;}
        .visualSwiper .txt_wrap h3{font-size: 180%;}
		
		.visualSwiper .video_slide .txt_wrap{padding-top:0;}
		
    }
    @media (max-width:479px){
		.visualSwiper .swiper-slide{padding:40px 0;}
        .visualSwiper .txt_wrap h3{font-size: 160%;}
		.visualSwiper .down_box + .more_view_box{margin-top:0;}
		.visualSwiper .more_view_box{margin-top:15px;}
    }


    /* 공통 */
        .bullet_list{position: relative;font-size: var(--title-20);display: flex;flex-direction: column;gap: 4px;}
        .bullet_list > li{position: relative;font-size: 90%;font-weight: 400;color: var(--black-color03);line-height: 1.5;display: flex;align-items: baseline;gap: 8px;letter-spacing: -0.03em;}
            .bullet_list > li:before{display: inline-flex;content:'';width: 4px;height: 4px;border-radius: 100%;background: var(--black-color06);flex-shrink: 0;transform: translateY(-5px);}
        .bullet_list .hyphen_list{padding-block: 5px 8px;}

        .hyphen_list{position: relative;font-size: var(--title-20);display: flex;flex-direction: column;gap: 4px;}
        .hyphen_list > li{position: relative;font-size: max(13px, 75%);font-weight: 400;color: var(--black-color06);line-height: 1.5;letter-spacing: -0.03em; padding-left: 12px; box-sizing: border-box;}
            .hyphen_list > li:before{position: absolute; content:'-'; top:0; left:0;}

        .more_view{position: relative; display: inline-flex; align-items: center;justify-content:space-between; height: 48px; gap: 33px; padding-inline: 20px; font-size: var(--title-20); font-family: var(--font-type02); box-sizing: border-box;}
            .more_view:before{position: absolute; content:''; left:0; bottom:0; width: 100%; height: 2px; background: var(--black-color05); transition: all 0.4s;}
        .more_view span{position: relative; font-size: 90%; font-weight: 600; color: var(--black-color05); transition: all 0.4s;}
        .more_view .arw{position: relative; width: 12px; height: 12px;}
            .more_view .arw:before{position: absolute;content:'';inset: 0;background: var(--black-color05);clip-path: var(--polygon-path01); transition: all 0.4s;}
        .more_view .sel{position:relative; width: 11px; height: 6px; background: var(--black-color05); clip-path: var(--polygon-path02); transition: all 0.4s;}
        .more_view:has(.sel, .down){min-width: 180px; }
        .more_view .down{position: relative;width: 12px;height: 14px;background: url('../images/skin/down.svg') no-repeat center / 100% auto;filter: var(--filter-black) opacity(0.6);transition: all 0.4s;}

        .more_view.on:before{height: 100%; background: var(--black-color00);}
        .more_view.on span{filter: var(--filter-white);}
        .more_view.on .arw:before{background: var(--point-color01);}
        .more_view.on .sel{background: var(--point-color01); transform: translateY(-50%) scale(-1,-1);}
		
		.down_box{margin-top:15px;display: flex;flex-wrap:wrap;gap:10px;}
		.down_box + .more_view_box{margin-top:15px;}
		.more_down{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;height:48px;padding-inline:20px;font-size: var(--title-20);color:var(--point-white);font-family: var(--font-type02);background:var(--black-color01);border:1px solid var(--black-color01);gap:20px;}
		.more_down:after{width:12px;height:14px;content:"";background:url('../images/skin/icon_download.svg')no-repeat center;display: inline-block;}
		.more_down.red{background:var(--point-color04);border-color:var(--point-color04);}
		.more_down.red:after{filter:var(--filter-white);}

        .main_title{position: relative; font-size: var(--title-20); box-sizing: border-box;}
            .main_title.hd{padding-block: 98px 30px;}
            .main_title:has(.more_view){display: flex; flex-wrap: wrap; gap: 15px 30px; align-items: center; justify-content: space-between;}
        .main_title h3{font-size: 200%; font-weight: 600; color: var(--black-color01); line-height: 1.25; letter-spacing: -0.04em;}

            /* over */
            @media (hover:hover) and (pointer:fine){
                .more_view:hover:before{height: 100%; background: var(--black-color00);}
                .more_view:hover span{filter: var(--filter-white);}
                .more_view:hover .arw:before{background: var(--point-color01);}
                .more_view:hover .sel{background: var(--point-color01);}
                .more_view:hover .down{filter: none;}
				
            }

        @media (max-width:1023px){
            .main_title.hd{padding-block: clamp(70px, 9.8vw, 98px) clamp(20px, 3vw, 30px)}
            .more_view{gap: clamp(20px, 3.3vw, 33px); padding-inline:clamp(15px, 2vw, 20px); height: clamp(42px, 5vw, 48px);}
            .more_view:has(.sel, .down){min-width: clamp(140px, 18vw, 180px);}
			
			.more_down{padding-inline:clamp(15px, 2vw, 20px); height: clamp(42px, 5vw, 48px);gap:clamp(10px, 2vw, 20px);}
        }

    /* 제품소개 */
        .main_prod .item_list{display: flex; flex-wrap: wrap; gap: 32px; box-sizing: border-box;}
        .main_prod .item_list > li{position: relative; width: calc(100% / 3 - 21.34px); box-sizing: border-box; background: var(--gray-bg02); padding:34px 30px 124px;}
        .main_prod .item_list > li:before{position: absolute; content:''; inset: 0; background: var(--point-grad01); opacity: 0; transition: all 0.4s; pointer-events: none;}
        .main_prod .item_list .link{position: absolute; inset: 0; z-index: 5;}
        .main_prod .item_list .thumb{position: absolute;font-size: 0;right: 20px;bottom: 17px;max-width: 145px; transition: all 0.4s;}
        .main_prod .item_list .desc{position: relative; font-size: var(--title-20);}
        .main_prod .item_list .desc dt{font-size: 100%; font-weight: 500; color: var(--black-color01); line-height: 1.15; letter-spacing: -0.03em;}
            .main_prod .item_list .desc dt + dd{margin-top: 18px;}
        .main_prod .item_list .desc dd{font-size: 0;width: 60%;max-width: 250px;}

            /* over */
            @media (hover:hover) and (pointer:fine){
                .main_prod .item_list > li:hover:before{opacity: 1; }
                .main_prod .item_list > li:hover .thumb{max-width: 160px;}
            }

        @media (max-width:1200px){
            .main_prod .item_list{gap: 20px;}
            .main_prod .item_list > li{width: calc(100% / 3 - 13.34px);}
        }
        @media (max-width:1023px){
            .main_prod .item_list{gap: 15px;}
            .main_prod .item_list > li{width: calc(100% / 3 - 10px); padding:clamp(25px, 3.4vw, 34px) clamp(25px, 3vw, 30px) clamp(100px, 12.4vw, 124px)}
            .main_prod .item_list .thumb{max-width: clamp(100px, 14.5vw, 145px);}
            .main_prod .item_list .desc dd{max-width: clamp(121px, 25vw, 250px);}
        }
        @media (max-width:860px){
            .main_prod .item_list > li{width: calc(100% / 2 - 7.5px);}
        }
        @media (max-width:479px){
            .main_prod .item_list > li{width: 100%;}
        }

    /* 뉴스 */
        .main_news .board_list{position: relative; border-top: 1px solid var(--gray-bg02); box-sizing: border-box;}
        .main_news .board_list > li{position: relative; border-bottom: 1px solid var(--gray-bg02); box-sizing: border-box; padding: 22px 20px;}
        .main_news .board_list .link{position: absolute; inset: 0; z-index: 5;}
        .main_news .board_list .info{display: flex; align-items: center; gap:40px; font-size: var(--title-20); text-align: center;}
        .main_news .board_list :where(.date, .pre){flex-shrink: 0; box-sizing: border-box;}
        .main_news .board_list .date{width: 90px;font-size: 90%;font-weight: 400;color: var(--black-color01);font-family: var(--font-type02);}
        .main_news .board_list .pre{display: inline-flex;align-items: center;justify-content: center;padding: 6px 5px;font-size: 85%;font-weight: 500;color: var(--black-color06);background: var(--gray-bg03);border: 1px solid var(--border-color01); transition: all 0.4s;}
        .main_news .board_list .title{text-align: left;font-size: inherit;font-weight: 400;color: var(--black-color04);letter-spacing: -0.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; transition: all 0.4s;}

            /* over */
            @media (hover:hover) and (pointer:fine){
                .main_news .board_list > li:hover .pre{background: var(--black-color00); border-color: var(--black-color00); color: var(--point-color01);}
                .main_news .board_list > li:hover .title{color: var(--black-color01);}
            }
        
        @media (max-width:1023px){
            .main_news .board_list > li{padding: clamp(20px, 2.2vw, 22px) clamp(15px, 2vw, 20px);}
            .main_news .board_list .info{gap: clamp(20px, 4vw, 40px);}
            /* .main_news .board_list .pre{width: clamp(100px, 11vw, 110px);} */
        }
        @media (max-width:640px){
			.main_news .board_list > li{padding-bottom: 48px;}
            .main_news .board_list .info{flex-wrap: wrap;gap: 12px;}
            .main_news .board_list .date{position: absolute;left: 15px;bottom: 18px;width: calc(100% - 30px);text-align: left;}
            .main_news .board_list .title{width: 100%;}
        }
        @media (max-width:479px){
            .main_news .board_list .pre{width: 90px;}
        }

    /* 퀵 */
            /* 유튜브: 두 번째 li */
.main_quick li:nth-of-type(2) .desc dd {color: black !important;}

/* 이더캣: 세 번째 li */
.main_quick li:nth-of-type(3) .desc dd {color: black !important;}

/* 메인 퀵 첫 번째 dd 화살표 제거 */
.main_quick li:nth-of-type(1) .desc dd:first-of-type::after {
    display: none !important;}


/* 메인 퀵 세 번째 dd 화살표 제거 */
.main_quick li:nth-of-type(4) .desc dd:first-of-type::after {
    display: none !important;}

        .sticky_wrap{display: flex;justify-content: center;align-items: flex-start;padding-bottom: 15px;}
        .main_content{width:100%;padding-bottom: 105px;box-sizing: border-box;}
        .main_quick{position: sticky;top: calc(100vh - 550px);right: 15px;margin-left: -270px;margin-top: 178px;display: inline-flex;flex-direction: column;justify-content: flex-end;align-items: flex-end;gap: 10px;font-size: 0;opacity: 0;pointer-events: none;transition: opacity 0.4s;z-index: 30;}
            .main_quick.on{opacity: 1; pointer-events: all;}
        .main_quick > li{position: relative;}
        .main_quick .link{position: absolute; inset: 0; z-index: 5;}
        .main_quick .desc{position: absolute;inset: 0;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;padding: 10px 20px;box-sizing: border-box; font-size: var(--title-20); color: var(--point-white);}
        .main_quick .desc dt{font-size: 130%; font-weight: 500; font-family: var(--font-type02); line-height: 1.2; letter-spacing: -0.02em;}
            .main_quick .desc dt + dd{margin-top: 7px;}
        .main_quick .desc dd{font-size: max(13px, 70%);/* 기존 max(13px, 70%)보다 작게 */ /*font-weight: 300; (굵기 미적용)*/ letter-spacing: -0.03em;color: rgba(255,255,255,0.7);line-height: 1.3;display: flex;flex-wrap: wrap;align-items: center;gap: 3px;}
            .main_quick .desc dd:after{display: inline-flex;content:'';width: 7px;height: 7px;border:solid rgba(255,255,255,0.7);border-width: 0 1px 1px 0;box-sizing: border-box;transform: rotate(-45deg);}
			.main_quick .fac_desc dd:after{border-color:var(--black-color00);}
        .main_quick .desc dd small{font-size: max(8px, 50%);/* 기존 max(13px, 90%)보다 작게 */ color: var(--black-color01);font-weight: 400;padding-top: 3px;}
        .main_quick .thumb{display: block; width: 270px; height: 100px; box-sizing: border-box; }
        .main_quick .thumb img{width: 100%; height: 100%; object-fit: cover;}
        .main_quick .scr_top{position: relative; display: inline-flex; width: 50px; aspect-ratio: auto 1; background: var(--black-color00); margin-top: 10px;}
        .main_quick .scr_top:before{position: absolute;content: '';width: 23%;aspect-ratio: auto 1;border:solid var(--point-color01);border-width: 2px 2px 0 0;box-sizing: border-box;top: 55%;left:50%;transform: translate(-50%, -50%) rotate(-45deg);}

        @media (max-width:1400px){
            .main_quick{margin-left: -50px;}
            .main_quick > li:has(.thumb){display: none;}
            .main_quick .scr_top{margin-top: 0;}
        }
        @media (max-width:1023px){
            .main_content{padding-bottom: clamp(70px, 10.5vw, 105px);}
            .main_quick{margin-left: clamp(-50px, 5vw, -40px);}
            .main_quick .scr_top{width: clamp(40px, 5vw, 50px);}
        }

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

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    #footer{position: relative; background: var(--black-color01); padding-block: 80px 17px; box-sizing: border-box; color: var(--point-white);}
    #footer .cont{display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between;}
    #footer .info{display: flex;flex-direction: column;gap: 44px;}
    #footer .info_desc{font-size: var(--title-20);}
    #footer .info_desc dt{position: relative;font-size: inherit;font-weight: 400;letter-spacing: -0.02em;padding-right: 12px;width: fit-content;}
    /* #footer .info_desc dt:after{position: absolute;content:'';top: 2px;right: 0;width: 5px;aspect-ratio: auto 1;background: var(--point-color01);} 하단 푸터 파스텍 문구 옆 네모박스*/
        #footer .info_desc dt + dd{margin-top: 13px;}
    #footer .info_desc dd{font-size: 200%;font-weight: 500;color: var(--point-color01);font-family: var(--font-type02);letter-spacing: 0.03em;line-height: 1.1;}
    #footer .link_list{display: flex;align-items: center;flex-wrap: wrap;gap: 15px 20px;font-size: var(--title-20);}
    #footer .link_list > li{font-size: max(13px, 75%);font-weight: 400;letter-spacing: -0.02em;line-height: 1;}
    #footer .link_list a{display: inline-flex; align-items: center; gap: 8px;}
    #footer .gnb{display: flex;flex-wrap: wrap;gap: 30px clamp(40px, 3.1vw, 60px);font-size: var(--title-20);}
    #footer .gnb a{display: block; transition: all 0.4s;}
    #footer .gnb > li{font-size: 90%; font-weight: 500; letter-spacing: -0.02em;}
        #footer .gnb > li:not(:has(.dep02)){display: none;}
    #footer .gnb .dep02{padding-top: 18px;}
    #footer .gnb .dep02 > li{font-size: 88.8%; font-weight: 200; color:rgba(255,255,255,0.8); }
	#footer .gnb .dep02 > li > a{padding-block: 7px;}
    #footer .btm_sec{display: flex;flex-wrap: wrap;gap: 15px 30px;align-items: center;justify-content: space-between;border-top: 2px solid var(--point-white);padding-block: 30px;margin-top: 90px;}
    #footer .logo{display: block; filter: var(--filter-white); font-size: 0; width: 40%; max-width: 140px;}
    #footer .copy{display: flex;flex-wrap: wrap;gap: 0 10px;font-size: var(--title-20);font-family: var(--font-type02);}
    #footer .copy :where(dt, dd){font-size: max(13px, 80%);font-weight: 300;line-height: 1.625;letter-spacing: 0;color: var(--black-color00);filter: var(--filter-white);}

        /* over */
        @media (hover:hover) and (pointer:fine){
            #footer .gnb > li:hover > a{color: var(--point-color01);}
            #footer .gnb .dep02 > li:hover > a{color: var(--point-white);}
        }

    @media (max-width:1023px){
        #footer{padding-block: clamp(40px, 8vw, 80px) clamp(10px, 2vw, 17px);}
        #footer .info{gap: clamp(25px, 4.4vw, 44px);}
        #footer .info_desc dt + dd{margin-top: clamp(8px, 1.3vw, 13px);}
        #footer .gnb{width: 100%; gap: 30px;}
        #footer .gnb > li{width: calc(100% / 6 - 25px);}
        #footer .gnb .dep02{padding-top: clamp(12px, 2vw, 18px);}
        #footer .gnb .dep02 > li > a{padding-block: clamp(4px, 1vw, 7px);}
        #footer .btm_sec{margin-top: clamp(40px, 9vw, 90px);padding-block: clamp(20px, 3vw, 30px);}
        #footer .logo{max-width: clamp(100px, 14.5vw, 140px);}
    }
    @media (max-width:860px){
        #footer .gnb > li{width: calc(100% / 3 - 20px);}
    }
    @media (max-width:640px){
        #footer .gnb{display: none;}
    }