@charset "utf-8";

/******************공통*******************/
#hd, #wrapper, #ft{min-width:auto;}
*{box-sizing:border-box;word-break:keep-all;font-family:var(--eng),var(--kor),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 / grey) ========== */
    --wh:#ffffff;                 /* bk&wh/white */
    --bk:#2b2b2b;                 /* grey/2b — 타이틀·보더·본문 */
    --bk-deep:#191919;            /* bk&wh/black — 푸터 등 */
    --bk2:var(--bk);              /* legacy alias */
    --gray-8:#808080;             /* grey/80 — 보조 텍스트 */
    --gray-a:#aaaaaa;             /* grey/aa — 캡션·연한 텍스트 */
    --gray-56:#565656;            /* grey/56 — 푸터 구분선 */
    --gray-f4:#f4f4f4;            /* grey/f4 — 카드 배경 */
    --gray-f7:#f7f7f7;            /* 섹션 배경 (Products 등) */
    --gray-fa:#fafafa;            /* Sub 섹션 배경 */
    --gray-d5:#d5d5d5;            /* 인용/부가 텍스트 */
    --gray-d:#dddddd;             /* 디바이더 */
    --gray-e4:#e4e4e4;
    --gray-f1:#f1f1f1;
    --gray-a4:#a4a4a4;
    --light-gray:var(--gray-f7);  /* alias */
    --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:#1077FF;               /* accent (float 등) */

    /* Role-based aliases (skill naming) */
    --color-primary:var(--main);
    --color-bg-primary:var(--wh);
    --color-bg-secondary:var(--gray-f7);
    --color-bg-section:var(--gray-fa);
    --color-text-primary:var(--bk);
    --color-text-title:var(--bk-deep);
    --color-text-secondary:var(--gray-8);
    --color-text-muted:var(--gray-a);
    --color-text-quote:var(--gray-d5);
    --color-border:var(--gray-d);

    /* ========== Typography ========== */
    --eng:'Poppins',sans-serif;   /* 영문 UI */
    --eng1:var(--eng);            /* legacy alias */
    --eng-num:'Roboto Flex',sans-serif; /* 숫자 디스플레이 */
    --kor:'Pretendard',sans-serif;
    --font-primary:var(--eng),var(--kor),Arial,sans-serif;

    /* font-size — 공통으로 자주 쓰는 값만 */
    --font14:max(12px,14rem);
    --font16:max(12px,16rem);
    --font18:max(14px,18rem);
    --font20:20rem;
    --font22:22rem;
    --font24:24rem;
    --font30:30rem;
    --font60:60rem;

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

    /* ========== Layout ========== */
    --page-w:1700rem;             /* 프레임 폭 */
    --inner:1400rem;              /* 콘텐츠 폭 (좌우 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;}
#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 !important;}



/******************공통 컴포넌트*******************/
.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;height:48rem;line-height:0;}
.main-logo img{display:block;width:100%;height:100%;object-fit:contain;}
.round-btn{display:inline-flex;height:50rem;padding:0 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;height:20rem;flex:none;}
.round-btn span img{display:block;width:100%;height:100%;}
.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%;height:100%;}
#header .hd-in>.inner{position:relative;z-index:991;width:calc(100% - 300rem);height:100%;margin:0 var(--pad-x);padding:0;}
#header .hd-gnb{display:flex;width:540rem;height:100%;align-items:center;justify-content:center;}
#header .hd-gnb ul{height:100%;gap:var(--gap-md);}
#header .hd-gnb li{height:100%;}
#header .hd-gnb a{display:flex;height:100%;align-items:center;color:var(--wh);font-size:var(--font18);font-weight:var(--fw-semibold);}
#header .con-r{gap:0;}
#header .go-inquiry-btn{display:flex;height:50rem;padding:0 30rem;align-items:center;justify-content:center;gap:8rem;border:1rem solid rgba(255,255,255,.5);border-radius:var(--radius-full);background:rgba(255,255,255,.2);color:var(--wh);font-size:var(--font14);font-weight:var(--fw-medium);backdrop-filter:blur(15rem);}
#header .go-inquiry-btn img{width:20rem;height:20rem;}
#header .ham-btn{display:none;width:24rem;height:24rem;padding:0;}
#header .ham-btn img{display:block;width:24rem;height:24rem;}
#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 .main-logo{position:relative;width:166rem;height:48rem;line-height:0;}
#header .main-logo img{display:block;width:100%;height:100%;object-fit:contain;}
#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);}
#header.is-dark .hd-gnb a{color:var(--bk-deep);}
#header.is-dark .go-inquiry-btn{border-color:var(--bk-deep);background:transparent;color:var(--bk-deep);}
#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{display:flex;width:60rem;height:60rem;align-items: center;justify-content: center;border-radius: 50%;background: linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.16) 100%), rgba(255, 255, 255, 0.15);backdrop-filter: blur(2rem);color:var(--main);}
#float-menu a svg{width:24rem;height:24rem;}
#float-menu a .float-txt{display:none;font-size:var(--font18);font-weight:var(--fw-medium);color:var(--main);}
#top-btn{display:flex;width:60rem;height:60rem;align-items: center;justify-content: center;border-radius: 50%;background:var(--main);color:var(--wh);}
#top-btn img{width:24rem;height:24rem;}
#float-menu a:hover {
    width: auto;
    border: 1.5rem solid transparent;
    border-radius:var(--radius-full);
    padding: 0 30rem;
    gap: 10rem;
  
    background:
      linear-gradient(var(--wh), var(--wh)) padding-box,
      linear-gradient(
        131deg,
        var(--main) 0%,
        rgba(16, 119, 255, 0.25) 55%,
        var(--main) 100%
      ) border-box;
  
    z-index: 2;
  }
#float-menu a:hover svg path{fill:var(--main);}
#float-menu a:hover .float-txt{display:block;}

.main-footer{position:relative;z-index:2;height:397rem;padding:var(--gap-lg) 0;background:var(--gray-fa);color:var(--bk);}
.main-footer .inner{width:var(--inner);}
.main-footer .ft-top{display:flex;align-items:flex-start;justify-content:space-between;}
.main-footer .ft-address{display:flex;flex-direction:column;gap:var(--gap-sm);}
.main-footer .main-logo{width:180rem;height:52rem;}
.main-footer .ft-info{display:flex;flex-direction:column;gap:12rem;font-size:var(--font16);font-style:normal;font-weight:var(--fw-regular);}
.main-footer .ft-info dl{display:flex;gap:12rem;}
.main-footer .ft-info dt{width:70rem;flex:none;font-weight:var(--fw-semibold);}
.main-footer .ft-contact-lst{display:flex;gap:var(--gap-sm);}
.main-footer .ft-contact-lst dl{gap:10rem;}
.main-footer .ft-contact-lst dt{width:auto;}
.main-footer .top-btn{display:flex;height:60rem;padding:0 24rem;align-items:center;justify-content:center;gap:10rem;border:1rem solid var(--bk);border-radius:var(--radius-full);font-size:var(--font16);font-weight:var(--fw-medium);}
.main-footer .top-btn img{width:20rem;height:20rem;}
.main-footer .copyright{margin-top:var(--gap-sm);padding-top:32rem;border-top:1rem solid #d9d9d9;font-size:var(--font14);font-weight:var(--fw-regular);}
.main-footer .copyright strong{font-weight:var(--fw-semibold);}

/*게시판*/
#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:var(--font30);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;}