@charset "utf-8";

/******************공통*******************/
#hd, #wrapper, #ft{min-width:auto;}
#aside{display:none !important;}
#container_title{display:none !important;}
#hd_h1, #tnb, #hd_wrapper, #gnb, #ft{display:none !important;}
#wrapper, #container_wr, #container{width:100%;float:none;margin:0;padding:0;}
*{box-sizing:border-box;word-break:keep-all;font-family:var(--kor),var(--eng),Arial,sans-serif;}
html,
body {
    overflow-x: clip;
}
body{font-size:max(11px, 16rem);font-weight:var(--fw-regular);}

a {color: inherit;text-decoration: none;}
.con-flex{display:flex;align-items:center;}
.con-flex-bet{display:flex;align-items:center;justify-content:space-between;}
.btn{display:flex;align-items: center;border-radius:var(--radius-full);justify-content: center;gap:10rem;}
.videoWrapper {position: relative;width:100%;height: 100%;}
.videoWrapper iframe,
.videoWrapper video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
.br-m{display:none;}
.swiper{width:100%;height:100%;}
button{border:none;background:none;cursor:pointer;outline:none;}


:root{
    /* ========== Color (Figma: Bk&Wh / Main / Gray) ========== */
    --wh:#ffffff;                 /* Bk&Wh/White */
    --bk:#2b2b2b;
    --bk-deep:#191919;            /* Bk&Wh/Black */
    --bk2:var(--bk);
    --gray-8:#808080;
    --gray-a:#aaaaaa;
    --gray-56:#565656;
    --gray-f4:#f4f4f4;
    --gray-f7:#f7f7f7;
    --gray-fa:#fafafa;
    --gray-d5:#d5d5d5;
    --gray-d:#dddddd;
    --gray-e4:#e4e4e4;
    --gray-f1:#f1f1f1;
    --gray-a4:#a4a4a4;
    --gray-200:#e0e0e0;           /* Gray/200 */
    --gray-300:#bdbdbd;           /* Gray/300 */
    --gray-400:#9e9e9e;           /* Gray/400 */
    --gray-500:#757575;           /* Gray/500 */
    --gray-600:#424242;           /* Gray/600 */
    --light-gray:var(--gray-f7);
    --opac-wh-txt:rgba(255,255,255,.8);
    --opac-wh-01:rgba(255,255,255,.01);
    --opac-wh-40:rgba(255,255,255,.4);
    --opac-bk-20:rgba(0,0,0,.2);
    --main:#283517;               /* Main/Green */
    --main-light:#606e35;         /* Main/Light Green */
    --main-pale:#f2f6ed;          /* Sub/Pale Green */

    /* Role-based aliases */
    --color-primary:var(--main);
    --color-primary-light:var(--main-light);
    --color-bg-primary:var(--wh);
    --color-bg-secondary:var(--gray-f7);
    --color-bg-section:var(--main-pale);
    --color-text-primary:var(--bk);
    --color-text-title:var(--bk-deep);
    --color-text-secondary:var(--gray-500);
    --color-text-muted:var(--gray-400);
    --color-text-quote:var(--gray-d5);
    --color-border:var(--gray-200);

    /* ========== Typography ========== */
    --eng:'Montserrat',sans-serif;
    --eng1:var(--eng);
    --eng-num:var(--eng);
    --kor:'SUIT',sans-serif;
    --font-primary:var(--kor),var(--eng),Arial,sans-serif;

    /* font-size — Figma Text Styles(Kor/P*)만. 그 외는 rem 직접 선언 */
    --font14:max(12px,14rem);
    --font15:15rem;
    --font16:max(12px,16rem);
    --font18:max(14px,18rem);
    --font20:20rem;
    --font24:24rem;
    --font45:45rem;
    --font65:65rem;

    /* font-weight */
    --fw-light:300;
    --fw-regular:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;

    /* ========== Layout ========== */
    --page-w:1700rem;             /* 프레임 폭 */
    --inner:1300rem;              /* 콘텐츠 폭 (좌우 150) */
    --inner-width:var(--inner);
    --hd-h:100rem;
    --pad-x:150rem;               /* 좌우 여백 */
    --sec-pad:150rem;             /* 섹션 상하 패딩 */
    --gap-sm:40rem;
    --gap-md:60rem;
    --gap-lg:80rem;
    --gap-xl:100rem;
    --gap-sub:200rem;
    --section-space:var(--gap-sub);

    /* ========== Radius / Effect ========== */
    --radius-sm:16rem;            /* Sub 카드 */
    --radius-md:20rem;            /* Main 카드·히스토리 */
    --radius-full:999px;         /* pill 버튼 */
    --shadow-card:0 7.588rem 15.176rem rgba(71,71,71,.3);
    --shadow-img:7rem 7rem 10rem rgba(0,0,0,.2);
    --shadow-product:0 0 12.5rem rgba(0,0,0,.08);
    --transition-base:0.3s ease;
}

.inner{width:var(--inner);margin:0 auto;}

/* Image container — 고정 height 대신 width + aspect-ratio */
.con-img{
  position:relative;
  display:block;
  overflow:hidden;
  width:100%;
}

/* Text fill — 시안 부분 채색이 왼쪽부터 채워지는 효과 */
.txt-fill{
  --fill-color:var(--main-light);
  --fill-rest:rgba(25,25,25,.44);
  --fill-to:100%;
  background:
    linear-gradient(90deg,var(--fill-color),var(--fill-color)) left center/0% 100% no-repeat,
    linear-gradient(90deg,var(--fill-rest),var(--fill-rest)) left center/100% 100% no-repeat;
  -webkit-background-clip:text,text;
  background-clip:text,text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  transition:background-size 1.8s cubic-bezier(.33,0,.2,1);
}
.txt-fill.is-on{background-size:var(--fill-to) 100%,100% 100%;}
@media (prefers-reduced-motion:reduce){
  .txt-fill{transition:none;background-size:var(--fill-to) 100%,100% 100%;}
}
#container_wr{width:100%;margin:0 auto;}
#container{width:100%;float:none;clear:both;margin:0;}
/* #container:not(:has(#mainpage)){margin-top:90rem;} */
body.no-scr{overflow:hidden;touch-action: none;position:fixed;width:100%;}
.alignC{text-align: center;}
.alignStr{align-items: stretch;}
.bg-df{padding-top:var(--gap-sub);background:var(--color-bg-section);}
.font-bold{font-weight:var(--fw-bold) !important;}
.m-only{display:none;}



/******************공통 컴포넌트*******************/
.sound_only{position:absolute;width:1rem;height:1rem;padding:0;margin:-1rem;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.main-skip{position:fixed;top:-100rem;left:20rem;z-index:10000;padding:12rem 20rem;background:var(--wh);color:#000;}
.main-skip:focus{top:20rem;}
.main-logo{display:block;width:166rem;}
.main-logo img{display:block;width:100%;  }
.round-btn{display:inline-flex;padding:14rem 30rem;align-items:center;justify-content:center;gap:8rem;border-radius:var(--radius-full);font-size:var(--font16);font-weight:var(--fw-medium);letter-spacing:.48rem;transition:background .2s,color .2s;}
.round-btn span{display:flex;width:20rem;aspect-ratio:1;flex:none;align-items:center;justify-content:center;}
.round-btn span img{display:block;width:100%;height:auto;}
.line-bk{border:1rem solid var(--bk);background:var(--wh);color:var(--bk);}
.line-wh{border:1rem solid var(--wh);background:transparent;color:var(--wh);}

/******************헤더*******************/
#header{display:flex;position:absolute;top:0;left:0;z-index:990;width:100%;height:var(--hd-h);align-items:center;color:var(--wh);}
#header .hd-in{width:100%;}
#header .hd-in>.inner{position:relative;z-index:991;width:100%;margin:0;padding:0 80rem;}
#header .hd-gnb{display:flex;width:auto;align-items:center;justify-content:center;}
#header .hd-gnb ul{gap:60rem;}
#header .hd-gnb a{display:flex;align-items:center;color:var(--wh);font-size:var(--font18);font-weight:var(--fw-semibold);letter-spacing:-.36rem;}
#header .con-r{gap:0;}
#header .go-inquiry-btn{display:flex;padding:14rem 30rem;align-items:center;justify-content:center;gap:8rem;border:1px solid var(--wh);border-radius:var(--radius-full);background:transparent;color:var(--wh);font-size:var(--font18);font-weight:var(--fw-semibold);letter-spacing:-.36rem;}
#header .ham-btn{display:none;width:35rem;}
#header .ham-btn img{display:block;width:100%;height:auto;}
#header .ham-btn .close-ico{display:none;}
#header.menu-open .ham-btn .menu-ico{display:none;}
#header.menu-open .ham-btn .close-ico{display:block;}
#header .ham-btn span{display:none;}
#header .mo-menu{display:none;}
#header:not(.is-dark) .main-logo .logo-wh{filter:brightness(0) invert(1);}
#header .main-logo{position:relative;width:226rem;}
#header .main-logo img{display:block;width:100%;}
#header .main-logo .logo-blue{display:none;}
#header.is-dark .main-logo .logo-wh{display:none;}
#header.is-dark .main-logo .logo-blue{display:block;}
#header.is-scrolled.header-style-white .main-logo .logo-wh,
#header.menu-open.header-style-white .main-logo .logo-wh{display:none;}
#header.is-scrolled.header-style-white .main-logo .logo-blue,
#header.menu-open.header-style-white .main-logo .logo-blue{display:block;}
#header.is-dark{position:relative;color:var(--bk-deep);background:var(--wh);border-bottom:1px solid var(--gray-200,#e0e0e0);}
#header.is-dark .hd-gnb a{color:var(--bk-deep);}
#header.is-dark .go-inquiry-btn{border-color:var(--main-light);background:transparent;color:var(--main-light);}
#header.is-dark .go-inquiry-btn .ico-wh{display:none;}
#header.is-dark .go-inquiry-btn .ico-bk{display:block;}
#header.header-style-white .go-inquiry-btn .ico-bk,
#header:not(.is-dark) .go-inquiry-btn .ico-bk{display:none;}
#header.is-scrolled.header-style-white,
#header.menu-open.header-style-white{color:var(--bk-deep);}
#header.is-scrolled.header-style-white .hd-gnb a,
#header.menu-open.header-style-white .hd-gnb a{color:var(--bk-deep);}
#header.is-scrolled.header-style-white .go-inquiry-btn,
#header.menu-open.header-style-white .go-inquiry-btn{border-color:var(--bk-deep);background:transparent;color:var(--bk-deep);}
#header.is-scrolled.header-style-white .go-inquiry-btn .ico-wh,
#header.menu-open.header-style-white .go-inquiry-btn .ico-wh{display:none;}
#header.is-scrolled.header-style-white .go-inquiry-btn .ico-bk,
#header.menu-open.header-style-white .go-inquiry-btn .ico-bk{display:block;}
/* #header .hd-gnb a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:8rem;} */
#header:not(.is-dark) .menu-ico-bk{display:none;}
#header.is-dark .menu-ico-wh{display:none;}


/******************푸터*******************/
#float-menu{display:flex;flex-direction:column;gap:10rem;align-items:flex-end;position:fixed;bottom:30rem;right:30rem;z-index:900;}
#float-menu a,
#top-btn{display:flex;width:64rem;aspect-ratio:1;align-items:center;justify-content:center;border-radius:50%;box-shadow:0 0 14rem rgba(0,0,0,.08);line-height:0;}
#float-menu a{background:var(--main-light);}
#float-menu a img{width:42rem;height:auto;}
#top-btn{border:2px solid var(--main-light);background:var(--wh);}
#top-btn img{width:24rem;height:auto;}

.main-footer{position:relative;z-index:2;padding:60rem 0;background:var(--main);color:var(--wh);}
.main-footer .ft-inner{display:flex;flex-direction:column;gap:40rem;width:100%;}
.main-footer .ft-top{display:flex;align-items:center;justify-content:space-between;padding:0 150rem;}
.main-footer .ft-logo{display:block;width:188rem;aspect-ratio:188/46;line-height:0;}
.main-footer .ft-logo img{display:block;width:100%;height:auto;}
.main-footer .ft-tel{display:flex;align-items:center;gap:16rem;padding:20rem;background:rgba(255,255,255,.1);color:var(--wh);}
.main-footer .ft-tel span{font-size:var(--font20);font-weight:var(--fw-bold);letter-spacing:-.4rem;}
.main-footer .ft-tel i{display:block;width:1px;align-self:stretch;background:rgba(255,255,255,.5);}
.main-footer .ft-tel strong{font-family:var(--eng),Montserrat,sans-serif;font-size:26rem;font-weight:600;line-height:1;letter-spacing:0;}
.main-footer .ft-line{width:100%;border-top:1px solid rgba(255,255,255,.2);}
.main-footer .ft-bot{display:flex;flex-direction:column;gap:24rem;padding:0 150rem;}
.main-footer .ft-links{display:flex;gap:16rem;}
.main-footer .ft-links a{font-size:var(--font15);font-weight:var(--fw-bold);letter-spacing:-.3rem;color:var(--wh);}
.main-footer .ft-info{display:flex;flex-direction:column;gap:6rem;}
.main-footer .ft-info p{display:flex;flex-wrap:wrap;align-items:center;gap:10rem;margin:0;font-size:var(--font14);line-height:1.5;letter-spacing:-.28rem;color:var(--wh);}
.main-footer .ft-info span{position:relative;}
.main-footer .ft-info span + span::before{content:"";display:inline-block;width:1px;height:1em;margin-right:10rem;vertical-align:middle;background:var(--wh);}
.main-footer .copyright{margin:0;font-size:var(--font14);letter-spacing:-.28rem;color:var(--wh);}

/*게시판*/
#bo_list{width:100%;margin:auto;}

input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus{border:1rem solid var(--color-border) !important;-webkit-box-shadow: none !important;box-shadow: none !important;}

/*팝업*/
.pop-com{display:none;width:100%;height:100%;position:fixed;top:0;left:0;z-index:9999;}
.pop-com .pop-dim{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;background:rgba(0, 0, 0, 0.7);}
.layer-pop-com .pop-bx{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:2;width:600rem;padding:var(--gap-sm);background:var(--wh);border-radius:var(--radius-sm);}
.layer-pop-com h4{font-size:30rem;font-weight:var(--fw-bold);}
.layer-pop-com .pop-top{margin-bottom:var(--gap-sm);}
.layer-pop-com .pop-con{width:100%;height:calc(100% - 120rem);overflow-y: auto;}