/* BASIC css start */
/* root */
    :root{
        --trans-color:transparent;
        --point-white:#fff;
        --point-color01:#363942;
        --point-color02:#E9EAEB;
        --border-color01:#ddd;
        --border-color02:#ccc;
        --border-color03:#eee;
        --black-color00:#000;
        --black-color01:#111;
        --black-color02:#222;
        --black-color03:#333;
        --black-color04:#444;
        --black-color05:#555;
        --black-color06:#666;
        --black-color07:#777;
        --black-color08:#888;
        --black-color09:#999;
        --black-color10:#aaa;
        --gray-bg01:#F5F5F5;
        --gray-bg02:#F8F8F8;
        --gray-bg03:#FAFAFA;
        --filter-white:brightness(0) invert(1);
        --filter-black:brightness(0);
        --clip-poly01:polygon(50% 100%, 0 0, 100% 0);
        --clip-poly02:polygon(100% 0, 0 100%, 100% 100%);
        --shadow-01:0 0 4px rgb(0 0 0 / 25%);
        --radius-40:clamp(20px, 4vw, 40px);
        --radius-30:clamp(15px, 3vw, 30px);
        --radius-20:clamp(10px, 2vw, 20px);
        --radius-16:clamp(8px, 1.6vw, 16px);
        --radius-15:clamp(7.5px, 1.5vw, 15px);
        --radius-14:clamp(7px, 1.4vw, 14px);
        --radius-10:clamp(5px, 1vw, 10px);
        --radius-06:clamp(4px, 0.8vw, 6px);
        --radius-04:clamp(3px, 0.6vw, 4px);
        --text-70:clamp(39px, 7vw, 70px);
        --text-69:clamp(39px, 6.9vw, 69px);
        --text-68:clamp(38px, 6.8vw, 68px);
        --text-67:clamp(38px, 6.7vw, 67px);
        --text-66:clamp(37px, 6.6vw, 66px);
        --text-65:clamp(37px, 6.5vw, 65px);
        --text-64:clamp(36px, 6.4vw, 64px);
        --text-63:clamp(36px, 6.3vw, 63px);
        --text-62:clamp(35px, 6.2vw, 62px);
        --text-61:clamp(35px, 6.1vw, 61px);
        --text-60:clamp(34px, 6vw, 60px);
        --text-59:clamp(34px, 5.9vw, 59px);
        --text-58:clamp(33px, 5.8vw, 58px);
        --text-57:clamp(33px, 5.7vw, 57px);
        --text-56:clamp(32px, 5.6vw, 56px);
        --text-55:clamp(32px, 5.5vw, 55px);
        --text-54:clamp(31px, 5.4vw, 54px);
        --text-53:clamp(31px, 5.3vw, 53px);
        --text-52:clamp(30px, 5.2vw, 52px);
        --text-51:clamp(30px, 5.1vw, 51px);
        --text-50:clamp(29px, 5vw, 50px);
        --text-49:clamp(29px, 4.9vw, 49px);
        --text-48:clamp(28px, 4.8vw, 48px);
        --text-47:clamp(28px, 4.7vw, 47px);
        --text-46:clamp(27px, 4.6vw, 46px);
        --text-45:clamp(27px, 4.5vw, 45px);
        --text-44:clamp(26px, 4.4vw, 44px);
        --text-43:clamp(26px, 4.3vw, 43px);
        --text-42:clamp(25px, 4.2vw, 42px);
        --text-41:clamp(25px, 4.1vw, 41px);
        --text-40:clamp(24px, 4vw, 40px);
        --text-39:clamp(24px, 3.9vw, 39px);
        --text-38:clamp(23px, 3.8vw, 38px);
        --text-37:clamp(23px, 3.7vw, 37px);
        --text-36:clamp(22px, 3.6vw, 36px);
        --text-35:clamp(22px, 3.5vw, 35px);
        --text-34:clamp(21px, 3.4vw, 34px);
        --text-33:clamp(21px, 3.3vw, 33px);
        --text-32:clamp(20px, 3.2vw, 32px);
        --text-31:clamp(20px, 3.1vw, 31px);
        --text-30:clamp(19px, 3vw, 30px);
        --text-29:clamp(19px, 2.9vw, 29px);
        --text-28:clamp(18px, 2.8vw, 28px);
        --text-27:clamp(18px, 2.7vw, 27px);
        --text-26:clamp(17px, 2.6vw, 26px);
        --text-25:clamp(17px, 2.5vw, 25px);
        --text-24:clamp(16px, 2.4vw, 24px);
        --text-23:clamp(16px, 2.3vw, 23px);
        --text-22:clamp(15px, 2.2vw, 22px);
        --text-21:clamp(15px, 2.1vw, 21px);
        --text-20:clamp(14px, 2vw, 20px);
        --text-19:clamp(14px, 1.9vw, 19px);
        --text-18:clamp(14px, 1.8vw, 18px);
        --text-17:clamp(14px, 1.7vw, 17px);
        --text-16:clamp(13px, 1.6vw, 16px);
        --text-15:clamp(13px, 1.5vw, 15px);
        --text-14:clamp(13px, 1.4vw, 14px);
        --text-13:clamp(12px, 1.3vw, 13px);
        --text-12:clamp(11px, 1.2vw, 12px);
        --row-gap160:clamp(70px, 16vw, 160px);
        --row-gap155:clamp(70px, 15.5vw, 155px);
        --row-gap150:clamp(70px, 15vw, 150px);
        --row-gap145:clamp(70px, 14.5vw, 145px);
        --row-gap140:clamp(70px, 14vw, 140px);
        --row-gap135:clamp(70px, 13.5vw, 135px);
        --row-gap130:clamp(70px, 13vw, 130px);
        --row-gap125:clamp(70px, 12.5vw, 125px);
        --row-gap120:clamp(70px, 12vw, 120px);
        --row-gap115:clamp(70px, 11.5vw, 115px);
        --row-gap110:clamp(70px, 11vw, 110px);
        --row-gap105:clamp(70px, 10.5vw, 105px);
        --row-gap100:clamp(70px, 10vw, 100px);
        --row-gap95:clamp(70px, 9.5vw, 95px);
        --row-gap90:clamp(40px, 9vw, 90px);
        --row-gap85:clamp(40px, 8.5vw, 85px);
        --row-gap80:clamp(40px, 8vw, 80px);
        --row-gap75:clamp(40px, 7.5vw, 75px);
        --row-gap70:clamp(40px, 7vw, 70px);
        --row-gap65:clamp(40px, 6.5vw, 65px);
        --row-gap60:clamp(30px, 6vw, 60px);
        --row-gap55:clamp(30px, 5.5vw, 55px);
        --row-gap50:clamp(30px, 5vw, 50px);
        --row-gap45:clamp(25px, 4.5vw, 45px);
        --row-gap40:clamp(25px, 4vw, 40px);
        --row-gap35:clamp(20px, 3.5vw, 35px);
        --row-gap30:clamp(15px, 3vw, 30px);
        --row-gap25:clamp(15px, 2.5vw, 25px);
        --row-gap20:clamp(12px, 2vw, 20px);
        --row-gap15:clamp(10px, 1.5vw, 15px);
        --row-gap10:clamp(7px, 1vw, 10px);
        --col-gap60:clamp(15px, 3.2vw, 60px);
        --col-gap55:clamp(15px, 2.9vw, 55px);
        --col-gap50:clamp(15px, 2.7vw, 50px);
        --col-gap45:clamp(15px, 2.4vw, 45px);
        --col-gap40:clamp(15px, 2.1vw, 40px);
        --col-gap35:clamp(15px, 1.85vw, 35px);
        --col-gap30:clamp(15px, 1.6vw, 30px);
        --col-gap25:clamp(15px, 1.35vw, 25px);
        --col-gap20:clamp(15px, 1.1vw, 20px);
    }

/* 񃧯 */
    body{min-width: 1200px;}
    .da-cont{overflow: clip;letter-spacing: -0.045em;line-height: 1.4;font-family: 'Noto Sans KR', Dotum, "µ¸¿ò", DotumChe, "µ¸¿òü", 'Playfair Display', Verdana, monospace, Corbel, AppleGothic, Helvetica, sans-serif; word-break: keep-all;overflow-wrap: anywhere;}
    .da-cont :where(h1, h2, h3, h4, h5, h6, dt, dd){letter-spacing: -0.045em;font-family: inherit;line-height: inherit;}
    .da-cont *{margin:0; padding:0; box-sizing: border-box;}
    .da-cont img{max-width: 100%; max-height: 100%;}
    .da-cont .link{position: absolute; inset: 0; z-index: 3;}
    .w_custom{position: relative;width: calc(100% - 60px);max-width: 1440px;margin-inline: auto;}
    .gap-box{display: grid; grid: auto / minmax(0, 1fr); gap: var(--row-gap100);}
    body:has(.pb-dn) #footer{margin-top: 0;}

    @media (max-width:1400px) {
        br.for_pc{display:none;}
    }   
    @media (max-width:1024px) {
        br.for_pct{display:none;}
    }   
    @media (max-width:479px) {
        br.for_pcm{display:none;}
    }   
    
    

/* ºñÁÖ¾ó */
    .sub-visual{position: relative;min-height: 770px;padding-block: 150px;display: flex;flex-direction: column;justify-content: center;}
    .sub-visual .thumb{position: absolute;inset: 0;overflow: hidden;}
    .sub-visual .thumb img{width: 100%;height: 100%;object-fit: cover;}
    .sub-visual .w_custom{display: flex; flex-direction: column;}
    .sub-visual .title{position: relative;filter: brightness(0) invert(1);display: grid;gap: 8px;}
    .sub-visual .title h2{font-size: var(--text-36);font-weight: 700;}
    .sub-visual .title h3{font-size: var(--text-20);font-weight: 400;line-height: 1.6;}

    .btn-box{position: relative;margin-top: var(--row-gap60);display: flex;flex-wrap: wrap;gap: clamp(10px, 2vw, 20px);}
    .btn-box :where(button, a){display: flex;align-items: center;justify-content: center;text-align: center;min-width: 180px;min-height: 48px;padding: 11px 20px 10px;background: var(--point-white);font-size: var(--text-16);font-weight: 600;transition: all 0.4s;}

    
        .sub-visual.type02{min-height: 820px;}
        .sub-visual.type03{min-height: 728px; text-align: center;}

        @media (hover:hover) and (pointer:fine) {
            .btn-box :where(button, a):hover{background: var(--point-color01);color: var(--point-white);}
        }


/* youtube-box */
    .youtube-box{position: relative;aspect-ratio: 16 / 9;overflow: hidden;}
    .youtube-box iframe{width: 100%; height: 100%;}

/* sec-title */
    .sec-title{position: relative;text-align: center;}
    .sec-title p{font-size: var(--text-20);font-weight: 400;line-height: 1.6;}

/* feature-list */
    .feature-list{position: relative;}
    .feature-list > li{position: relative;background: var(--point-color02);display: flex;flex-direction: row-reverse;text-align: right;}
        .feature-list > li:nth-child(2n){flex-direction: row;text-align: left;}
    .feature-list .thumb{width: 50%;flex-shrink: 0;}
    .feature-list .thumb img{position: relative;}
    .feature-list .title{position: relative;width: 100%;padding: var(--row-gap80);display: flex;flex-direction: column;justify-content: center;gap: var(--row-gap10);}
    .feature-list .title h3{font-size: var(--text-32);font-weight: 600;}
    .feature-list .title h4{font-size: var(--text-20);font-weight: 400;line-height: 1.6;}

/* product-list */
    .swiper-rela{max-width: 1600px; padding: 60px 80px;}
    .prodSwiper{position: relative;overflow: hidden;}
    .product-list{display: grid;grid: auto / repeat(4, 1fr);}
    .product-list > li{position: relative;text-align: center;display: flex;flex-direction: column;gap: var(--row-gap20);}
    .product-list .thumb{position: relative;aspect-ratio: auto 0.75;overflow: hidden;}
    .product-list .thumb img{width: 100%;height: 100%;object-fit: cover;transition: all 0.4s;}
    .product-list .thumb img.ov{position: absolute;inset: 0;opacity: 0;}
    .product-list .cont{font-size: var(--text-18);padding-inline: 10px;}
    .da-cont .swiper-arw{position: absolute;background: none;top: 50%;left: 0;translate: 0 -50%;scale: -1 1;width: 40px;height: auto;aspect-ratio: auto 1;border-radius: 100%;background: var(--point-white);box-shadow: var(--shadow-01);display: flex;align-items: center;justify-content: center; margin:0; border:0;}
    .da-cont .swiper-arw svg{width: 10px;height: auto;}
    .da-cont .swiper-arw path{fill: var(--black-color00);opacity: 0.4;transition: all 0.4s;}
    .da-cont .swiper-arw.next{scale: 1;left: auto;right:0;}
    


        @media (hover:hover) and (pointer:fine) {
            .product-list > li:hover .thumb img.ov{opacity:1;}
            .da-cont .swiper-arw:hover path{opacity:1;}
        }

/* BASIC css end */