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

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

───────────────────────────────────────────────────────────*/
/*───────────────────────────────────────────────────────────
	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: 1400px; margin-inline: auto; box-sizing: border-box;}
    .main_w_custom{max-width: 1700px;}
    #container{position: relative; padding-bottom:150px;padding-top:clamp(60px, 12vw,120px); box-sizing: border-box;}

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

    @media (max-width:1023px){
        #container{padding-bottom:clamp(100px, 15vw, 150px);}
    }
    @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%;z-index:100;transition:0.3s;}
    .header_cont{display: flex;align-items: center;justify-content: space-between;box-sizing:border-box;padding:0 clamp(15px, 3vw, 40px);position: relative;height:120px;}
    #header .logo{height:clamp(22px, 2.5vw, 39px);position: relative;z-index:3;}
    #header .logo .ov_img{display: none;}
    #header .gnb_wrap{height:100%;}
    #header .gnb{display: flex; height: 100%; gap: clamp(20px, 4vw, 80px); font-size: var(--text-20); text-align: center;}
        #header .gnb > li{position: relative;font-size: inherit;font-weight: 600;color: var(--black-color00);height: 100%;letter-spacing: 0;transition: all 0.4s;}
        #header .gnb > li > a{display: flex;align-items: center;justify-content: center;height: 100%;text-transform:uppercase;}
        #header .gnb > li.active > a{color:var(--point-color01);}
    #header .gnb .dep02{position: absolute;top: 80%;left: 50%;width:calc(100% + 120px);translate: -50%;padding-block:10px;background: var(--point-color01);border-radius: var(--radius-10);opacity: 0;pointer-events: none;transition: inherit;}
    #header .gnb > li.active .dep02{opacity: 1;pointer-events: all;}
    #header .gnb .dep02 > li{position: relative;font-size:var(--text-20);font-weight:500;color: var(--point-white);transition: inherit;}
    #header .gnb .dep02 > li > a{display: block;padding:10px 25px;text-underline-offset:4px;}
    .lang_desc{position: relative; font-size: var(--text-20);}
    .lang_desc button{font-size: 80%;font-weight: 500;color: var(--black-color00);font-family:var(--font-type02);padding:clamp(8px, 1.1vw,11px) clamp(12px, 1.5vw, 15px);padding-right:clamp(28px, 4vw, 40px);border: 1px solid rgba(255, 255, 255, 0.4);border-radius: 50px;display: flex;align-items: center;gap: 8px;cursor: pointer;}
        .lang_desc button:before{display: inline-flex;content:'';width:clamp(16px, 2.5vw, 25px);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, 9px);aspect-ratio: auto 1.9;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%;border-radius: var(--radius-10);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 .btn_cart{display: inline-flex;width:clamp(38px, 4vw, 50px);aspect-ratio:auto 1;box-sizing:border-box;border-radius:100%;border: 1px solid rgba(255, 255, 255, 0.40);align-items: center;justify-content: center;}
    #header .btn_cart img{max-width:40%;}
    #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;}

    #header :where(.gnb > li > a, #header .allCate span, .lang_desc button, #header .btn_cart img){filter:var(--filter-white);}

    /*on*/
    #header.on{background:var(--point-white);box-shadow:0px 0px clamp(25px, 5vw, 50px) rgba(0, 0, 0, 0.10);}
    #header.on .logo .ov_img{display: block;}
    #header.on .logo .img{display: none;}
    #header.on .btn_cart{border-color: var(--border-color02);}
    #header.on :where(.gnb > li > a, #header .allCate span, .lang_desc button, #header .btn_cart img){filter:none;}
    #header.on .lang_desc button{border-color: var(--border-color02);}

    /* over */
    @media (hover:hover) and (pointer:fine) {
        #header:hover{background:var(--point-white);box-shadow:0 0 clamp(25px, 5vw, 50px) 0 rgba(0,0,0,0.1);}
        #header:hover .logo .ov_img{display: block;}
        #header:hover .logo .img{display: none;}
        #header:hover .btn_cart{border-color: var(--border-color02);}
        #header:hover :where(.gnb > li > a, #header .allCate span, .lang_desc button, #header .btn_cart img){filter:none;}
        #header:hover .lang_desc button{border-color: var(--border-color02);}
        #header .gnb .dep02 > li:hover a{text-decoration: underline;}
    }

    @media (max-width:1023px){
        #header .gnb_wrap{display: none;}
        .header_cont{height:auto;padding-block:clamp(12px, 3vw, 30px);}
        #header .allCate{display: flex;}
    }
    @media (max-width:640px){
        #header .lang_desc{display: none;}
    }
    @media (max-width:479px){
        #header .logo{width:170px;height:22px;}
    }

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

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

───────────────────────────────────────────────────────────*/
    #aside{position: fixed;top: 0;left:0;width: 100%;height: 100%;z-index: 999;background: rgba(0,0,0,0.8);backdrop-filter:blur(10px);display: flex;flex-direction: column;overflow: hidden;overflow-y: auto; 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 .lang_desc button{filter:var(--filter-white);}
    #aside .main_w_custom { flex-shrink: 0; max-width: 1720px; min-height: 100%; padding-block: 100px; }
    #aside .cont { position: relative; width: 100%; display: flex; flex-direction: column; height: 100%; justify-content: center; }
    #aside .gnb { width: 100%; font-size: var(--text-20); letter-spacing: 0; display: grid; align-items: start; justify-content: center; grid-template: auto / repeat(5, 1fr); gap: clamp(15px, 2.2vw, 40px); }
    #aside .gnb > li { color: var(--point-white); font-size: inherit; text-align: center; }
    #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 { transition: all 0.4s; }
    #aside .gnb .dep02 > li > a{display: block;font-size:110%;font-weight:400;padding-block: 15px;color: var(--point-white);transition: all 0.4s;}
    #aside .aside_top{position: absolute;z-index: 9;  top:clamp(20px, 4vw, 40px); right: 0;display: flex;align-items: center;gap:10px;}
    #aside .aside_top .hd_btn_contact{display: none;font-size:var(--text-20);}
    #aside .aside_top .hd_btn_contact span{position: relative;z-index: 2;font-size: 85%;font-weight: 600;color: var(--point-white);letter-spacing: -0.03em;display: inline-block;padding:8px 14px;border:1px solid var(--point-white);box-sizing: border-box;}
    #aside .close_btn{ width: 40px;height: 40px;display: inline-block;position: relative;}
    #aside .close_btn span{position: absolute;top:50%;left:50%;transform: translate(-50%, -50%) rotate(45deg);width: 100%;height: 2px;background: var(--point-white);}
    #aside .close_btn span + span{transform: translate(-50%, -50%) rotate(-45deg);}

    @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-white);}
        #aside .gnb .dep02:has(li:hover) li:not(:hover) > a{color:var(--black-color08)}

    }

    @media (max-width: 1280px) {
        #aside .gnb { grid-template: auto / repeat(3, 1fr); }
    }

    @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;}
    }

    @media (max-width: 1023px) {
        #aside .main_w_custom { padding-block: clamp(70px, 10vw, 100px);  }
        #aside .close_btn { width: clamp(25px, 4vw, 40px); height: clamp(25px, 4vw, 40px); }
    }

    @media (max-width: 860px) {
        #aside { display: block; }
        #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(255, 255, 255, 0.2); }
        #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; }
    }

    @media (max-width: 640px) {
        #aside .gnb > li > a{font-size: 170%;}
        #aside .gnb .dep02 > li > a{padding-block: 7px;font-size:100%;}
    }

    @media (max-width: 479px) {
        #aside .aside_top .hd_btn_contact{display: block;}
        #aside .gnb > li > a { font-size: 150%; }
        #aside .gnb > li > a span { width: 100%; }
        #aside .gnb .dep02 { margin-top: 10px; grid-template: auto / repeat(1, 1fr); }
        #aside .gnb .dep02 > li > a { font-size: 95%; }
    }

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

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    #footer{background:var(--black-color00);}
    #footer > .main_w_custom{display: flex;align-items: flex-start;justify-content: space-between;box-sizing:border-box;padding:var(--row-gap100) 0 clamp(50px, 9vw, 97px);gap:var(--row-gap20);}
    #footer .ft_info_box{display: flex;flex-direction: column;gap:var(--row-gap50);}
    #footer .ft_info_box h3{display: flex;flex-direction: column;gap:var(--row-gap30);color:var(--point-white);}
        #footer .ft_info_box h3 span{font-size:var(--text-20);font-weight:700;line-height:1.3;}
        #footer .ft_info_box h3 strong{font-size:var(--text-38);font-weight:600;line-height:1.4;letter-spacing:-0.03em}
    #footer .info{display: flex;flex-wrap:wrap;gap:10px var(--row-gap40);}
    #footer .info dl{display: flex;gap:var(--row-gap20);color:var(--point-white);}
        #footer .info dl dt{font-size:var(--text-19);font-weight:400;font-family:var(--font-type02);letter-spacing:0;}
        #footer .info dl dd{font-size:var(--text-18);font-weight:300;letter-spacing:-0.02em}
    #footer .ft_family{position: relative;display: inline-block;width:230px;margin-top:21px;flex-shrink:0;}
    #footer .ft_family button{border: 1px solid rgba(255, 255, 255, 0.20);width:100%;height:clamp(40px, 5vw, 50px);display: flex;align-items: center;justify-content:space-between;font-size:var(--text-17);color:var(--point-white);font-weight:400;font-family:var(--font-type02);box-sizing: border-box;position: relative;cursor:pointer;padding:0 var(--row-gap20);}
        #footer .ft_family button:after{width:clamp(7px, 0.9vw, 9px);aspect-ratio:auto 1;content:"";border:2px solid var(--point-white);border-width:2px 2px 0 0;rotate:135deg;}	
        #footer .ft_family.on button:after{scale:-1 -1;translate:0 4px;}	
    #footer .ft_family ul{background:var(--point-white);box-sizing:border-box;padding:10px 10px;position: absolute;top:100%;left:0;width:100%;z-index:10;opacity:0;pointer-events:none;transition:all 0.3s;}	
    #footer .ft_family.on ul{opacity:1;pointer-events:initial;}
    #footer .ft_family ul li a{font-size:var(--text-17);color:var(--black-color03);font-weight:400;line-height:1.6;display: block;width:100%;}
    #footer .ft_menu_box{box-sizing:border-box;border-top:1px solid rgba(255,255,255,0.2);}
    #footer .ft_menu_box .main_w_custom{display: flex;align-items: center;justify-content: space-between;padding:clamp(20px, 4vw, 42px) 0 clamp(20px, 4vw, 44px);flex-wrap:wrap;gap:var(--row-gap20);}
    #footer .ft_menu{display: flex;align-items: center;}
    #footer .ft_menu li{display: flex;align-items: center;}
        #footer .ft_menu li + li:before{width:1px;height:clamp(10px, 1.2vw, 12px);content:"";background:rgba(255,255,255,0.3);display: inline-block;margin:0 clamp(10px, 3vw, 30px);}
        #footer .ft_menu li a{font-size:var(--text-18);color:var(--point-white);font-weight:300;}
        #footer .ft_menu li a strong{font-weight:500;}
    #footer .copyright{display: flex;align-items:flex-start;flex-wrap:wrap;gap:var(--row-gap10) var(--row-gap20);font-size:var(--text-18);color:var(--point-white);font-weight:300;opacity:0.5;}
        #footer .copyright a{font-family:var(--font-type02);}

        .ft_quick{position: fixed;bottom:clamp(20px, 4vw, 40px);right:clamp(15px, 3vw, 30px);z-index:10;opacity:0;pointer-events:none;transition:all 0.3s;}
        .ft_quick.on{opacity:1;pointer-events:initial;}
        .ft_quick ul{display: flex;flex-direction: column;gap:var(--row-gap20);}
        .ft_quick ul li{width:clamp(46px, 6vw, 60px);aspect-ratio:auto 1;}
        .ft_quick ul li :where(a, button){display: flex;width:100%;height:100%;align-items: center;justify-content: center;box-shadow: 0 0 20px 0 rgba(27, 33, 132, 0.15);box-sizing:border-box;border-radius:100%;}
        .ft_quick ul li a{background:var(--point-color02);}
        .ft_quick ul li a img{width:clamp(16px, 2vw, 20px);}
        .ft_quick ul li button{background:var(--point-color01);}
        .ft_quick ul li button img{height:clamp(16px, 2vw, 20px);}

        @media (max-width:640px) {
            #footer > .main_w_custom{flex-direction: column;}
        }
        @media (max-width:479px) {
            #footer .ft_family{width:100%;}
        }

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

    MAIN | index.html

───────────────────────────────────────────────────────────*/
    /*visual*/
        .main_visual {position:relative; overflow: hidden; background: var(--black-color01);}
        .main_visual .slick-slide {position: relative;height: clamp(500px, 98vw, 980px);overflow: hidden;}
        .main_visual .thumb{position: relative; width: 100%; height: 100%; background: no-repeat center / cover; transition: all 5s 0.2s;}
        .main_visual .txt_box{position: absolute;top:50%;left:50%;translate: -50% -50%;filter: var(--filter-white);text-wrap: balance;}
        .main_visual .txt_box h2{font-size: var(--text-60);font-weight:700;line-height: 1.3;letter-spacing: 0;}

    /*공통*/
        .main_content > section{position: relative;padding-block:var(--row-gap160);box-sizing:border-box;}

        /*title*/
        .main_title{display: flex;flex-direction: column;gap:var(--row-gap20);margin-bottom:var(--row-gap60);}
        .main_title span{font-size:var(--text-20);font-weight:500;color: var(--point-color01);font-family:var(--font-type02);}
        .main_title h3{font-size:var(--text-50);color:var(--black-color00);font-weight:700;line-height: 1.3;}

        .more_btn{display: inline-flex;align-items: center;justify-content: center;box-sizing:border-box;background:var(--point-white);padding:clamp(10px, 1.5vw, 17px) clamp(22px, 4vw, 38px);font-size:var(--text-20);font-weight:500;color:var(--black-color00);line-height:1.3;border-radius:50px;transition: all 0.4s;overflow:hidden;position: relative;}
        .more_btn:before{width:0;height:100%;content:"";background:var(--point-color01);position: absolute;top:0;left:0;transition: all 0.4s;}
        .more_btn span{position: relative;}

        /*over*/
        @media (hover: hover) and (pointer: fine) {
            .more_btn:hover:before{width:100%;}
            .more_btn:hover{color:var(--point-white);}
        }

    /*business*/
        .main_content > .main_business{padding-top:var(--row-gap140);}
        .main_business ul{display: flex;flex-wrap: wrap;gap:var(--row-gap10);}
        .main_business ul li{position: relative;width:20%;transition: all 0.4s;height:600px;box-sizing:border-box;border-radius: var(--radius-10);overflow: hidden;}
        .main_business ul li:before{width:100%;height:100%;background: rgba(0,0,0,0.4);position: absolute;top:0;left:0;content:'';z-index: 1;transition: all 0.4s;}
        .main_business ul li .thumb{position: relative; width:100%;height:100%;transition: all 5s 0.2s;}
        .main_business ul li .thumb img{width:100%;height:100%;object-fit: cover;}
        .main_business ul li .txt{font-size:var(--text-36);font-weight:600;color:var(--point-white);position: absolute;top:50%;left:50%;translate: -50% -50%;z-index:3;transition: all 0.4s;width:100%;text-align: center;padding:0 10px;}
        .main_business ul li .ov_box{opacity:0;pointer-events: none;box-sizing:border-box;padding:0 clamp(20px, 3vw, 60px);position: absolute;bottom:var(--row-gap60);left:0;width:100%;display: flex;flex-direction: column;gap:var(--row-gap40);z-index:3;align-items: flex-start;}
        .main_business ul li .ov_box dl{display: flex;flex-direction: column;gap:var(--row-gap10);color:var(--point-white);}
        .main_business ul li .ov_box dt{font-size:var(--text-40);font-weight:600;line-height:1.4;}
        .main_business ul li .ov_box dd{font-size:var(--text-20);font-weight:500;line-height:1.6;}

        /*on*/
        .main_business ul li.on{width:calc(60% - 20px);}
        .main_business ul li.on:before{opacity: 0.7;background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 28.42%, var(--black-color00) 100%);}
        .main_business ul li.on .txt{opacity: 0;pointer-events: none;}
        .main_business ul li.on .ov_box{opacity:1;pointer-events: all;transition-delay:0.6s;transition: all 0.5s ease;}

        @media (max-width:1023px){
            .main_business ul li{width:100%;height:auto;aspect-ratio:auto 2;}
            .main_business ul li:before{opacity: 0.7;background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 28.42%, var(--black-color00) 100%);}
            .main_business ul li .ov_box{opacity:1;pointer-events: all;}
        }
        @media (max-width:479px){
            #wrap .main_business ul li{aspect-ratio:initial;height:70vw;}
        }
        @media (max-width:330px){
            #wrap .main_business ul li{height:110vw;}
        }

    /*prd*/
        .main_prd{background:var(--gray-bg01);}
        .main_prd .main_title{margin-bottom: var(--row-gap40);}
        .main_prd .prd_tab{display: flex;gap:var(--row-gap20);margin-bottom: var(--row-gap80);}
        .main_prd .prd_tab .more_btn{font-size:var(--text-22);}
            .main_prd .prd_tab li.on .more_btn:before{width:100%;}
            .main_prd .prd_tab li.on .more_btn{color:var(--point-white);}
        .main_prd .prd_tab_content ul{display: none;gap:16px;}
            .main_prd .prd_tab_content ul.on{display:grid;}
            .main_prd .prd_tab_content ul#export{grid-template-columns: repeat(6, 1fr);}
            .main_prd .prd_tab_content ul#import{grid-template-columns: repeat(4, 1fr);}
        .main_prd .prd_tab_content ul li{position: relative;width:100%;}
        .main_prd .prd_tab_content ul li a{display: block;width:100%;height:100%;position: relative;box-sizing: border-box;border-radius:var(--radius-10);overflow: hidden;}
        .main_prd .prd_tab_content ul li .thumb{width:100%;aspect-ratio:auto 0.562;overflow: hidden;}
        .main_prd .prd_tab_content ul#import li .thumb{aspect-ratio:auto 0.86;}
            .main_prd .prd_tab_content ul li .thumb img{width:100%;height:100%;object-fit: cover;transition:all 0.4s;}
        .main_prd .prd_tab_content ul li .txt_box{position: absolute;bottom:0;left:0;width:100%;height:100%;box-sizing:border-box;padding:clamp(15px, 5vw, 50px) clamp(10px, 2vw, 20px) clamp(20px, 4vw, 40px);display: flex;flex-direction: column;align-items: center;justify-content: space-between;;}
            .main_prd .prd_tab_content ul li .txt{display:grid;gap:var(--row-gap10);text-align: center;color:var(--point-white);line-height:1.4;}
            .main_prd .prd_tab_content ul li .txt span{font-size:var(--text-20);font-weight:400;}
            .main_prd .prd_tab_content ul li .txt strong{font-size:var(--text-38);font-weight:600;}
            .main_prd .prd_tab_content ul li .txt strong em{display: block;font-size:var(--text-24);font-weight:500;}
        .main_prd .prd_tab_content ul li .ico{width:clamp(40px, 5vw, 60px);aspect-ratio:auto 1;display:flex;align-items: center;justify-content: center;border-radius:100%;background:var(--point-white);transition:all 0.4s;}
        .main_prd .prd_tab_content ul li .ico img{max-width:55%;}
        

        /*over*/
        @media (hover: hover) and (pointer: fine) {
            .main_prd .prd_tab_content ul li:hover .thumb img{scale:1.07;}
            .main_prd .prd_tab_content ul li:hover .ico{background:var(--point-color01);}
            .main_prd .prd_tab_content ul li:hover .ico img{filter: var(--filter-white);}
        }
    
        @media (max-width:1300px){
            .main_prd .prd_tab_content ul#export{grid-template-columns: repeat(3, 1fr);}
            .main_prd .prd_tab_content ul#import{grid-template-columns: repeat(2, 1fr);}
            .main_prd .prd_tab_content ul li .thumb{aspect-ratio:auto 0.8;}
            .main_prd .prd_tab_content ul#import li .thumb{aspect-ratio:auto 1.2;}
            .main_prd .prd_tab_content ul li .ico img{max-height:50%;}
        }
        @media (max-width:479px){
            .main_prd .prd_tab_content ul#export{grid-template-columns: repeat(2, 1fr);}
            .main_prd .prd_tab_content ul#import li .thumb{aspect-ratio:auto 0.8;}
        }
    
    /*base*/
        .main_base{background:var(--point-color01);}
        .main_base .main_title{filter:var(--filter-white);}
        .main_base .base_list{display: flex;flex-wrap: wrap;gap:var(--row-gap20);}
        .main_base .base_list li{position: relative;width:calc(50% - 10px);box-sizing:border-box;border-radius:var(--radius-10);overflow: hidden;position: relative;}
        .main_base .base_list li .thumb{width:100%;aspect-ratio:auto 1.5;overflow: hidden;}
        .main_base .base_list li .thumb img{width:100%;height:100%;object-fit: cover;}
        .main_base .base_list li .txt{position: absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;padding:clamp(20px, 3vw, 60px) clamp(20px, 3vw, 60px);display: flex;flex-direction: column;align-items: flex-start;gap:var(--row-gap20);color:var(--point-white);line-height:1.3;}
            .main_base .base_list li .txt span{font-size:var(--text-26);font-weight:600;}
            .main_base .base_list li .txt h4{font-size:var(--text-50);font-weight:600;}
            .main_base .base_list li .txt p{font-size:var(--text-22);font-weight:400;}

        @media (max-width:860px){
            .main_base .base_list li{width:100%;}
            .main_base .base_list li .thumb{aspect-ratio:auto 1.8;}
        }
        @media (max-width:479px){
            .main_base .base_list li .thumb{aspect-ratio:auto 1.5;}
        }

    /*notice*/
        .main_notice .main_w_custom{display: flex;align-items: flex-start;justify-content: space-between;flex-wrap:wrap;}
        .main_notice .board_ul{width:100%;max-width:calc(90% - 230px - var(--row-gap40));box-sizing:border-box;border-top:1px solid var(--black-color00);}
        .main_notice .board_ul li{position: relative;box-sizing:border-box;border-bottom:1px solid var(--border-color01);padding:clamp(20px, 4vw,45px) clamp(15px, 3vw, 40px);display: flex;align-items: center;justify-content: space-between;gap:var(--row-gap30);}
        .main_notice .board_ul li:before{width:0;height:1px;content:"";background:var(--point-color01);position: absolute;left:0;bottom:-1px;transition:width 0.4s;}
        .main_notice .board_ul li a{display: block;width:100%;height:100%;position: absolute;top:0;left:0;z-index:5;}
        .main_notice .board_ul .txt{display: flex;flex-direction: column;gap:clamp(8px, 1.4vw, 14px);max-width:80%;}
        .main_notice .board_ul .txt strong{font-size:var(--text-22);color:var(--black-color00);font-weight:500;line-height:1.4;display: block;width:100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
        .main_notice .board_ul .txt p{font-size:var(--text-18);color:var(--black-color05);font-weight:400;line-height:1.4;display: block;width:100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
        .main_notice .board_ul .date{font-size:var(--text-18);color:var(--black-color08);font-weight:400;line-height:1.3;flex-shrink:0;}

        /*over*/
        @media (hover: hover) and (pointer: fine) {
            .main_notice .board_ul li:hover .txt strong{color:var(--point-color01);}
            .main_notice .board_ul li:hover:before{width:100%;}
        }

        @media (max-width:1023px){
            .main_notice .board_ul{max-width:100%;}
        }
        @media (max-width:479px){
            .main_notice .board_ul .txt{max-width:65%;}
        }

    /*location*/
        .main_location{background:url('../images/skin/main_location_bg.jpg') no-repeat center / cover;}
        .main_location .main_title{filter:var(--filter-white);}
        .main_location .branch_list{display:flex;flex-wrap:wrap;gap:var(--row-gap20);width:640px;}
        .main_location .branch_list li{width:calc(50% - var(--row-gap20) / 2);box-sizing:border-box;border-radius:var(--radius-10);border: 1px solid rgba(255, 255, 255, 0.20);background: rgba(0, 0, 0, 0.10);backdrop-filter: blur(5px);padding:24px clamp(15px, 2vw, 24px);display: flex;flex-direction: column;gap:clamp(6px, 1.2vw, 12px);min-height:190px;}
        .main_location .branch_list li h4{display: flex;align-items:center;gap:8px;font-size:var(--text-25);color:var(--point-white);font-weight:600;line-height:1.4;}
        .main_location .branch_list li h4:before{width:clamp(20px, 3vw, 30px);aspect-ratio:auto 1;content:"";background:url('../images/skin/main_ico_loc.svg')no-repeat center / auto 100%;flex-shrink:0;display: inline-block;}
        .main_location .branch_list li p{font-size:var(--text-19);color:var(--point-white);font-weight:400;line-height:1.6;}

        @media (max-width:767px){
            .main_location .branch_list{width:100%;}
            .main_location .branch_list li{min-height:initial;}
        }
        @media (max-width:479px){
            .main_location .branch_list li{width:100%;}
        }