html, body {
    font-size: 16px;
    font-family: 'NanumSquareNeo' !important;
    height: 100%;
}
@font-face {
    font-family: 'NanumSquareNeo';
    font-weight: 300;
    font-style: normal;
    src: url('../font/NanumSquareNeo/eot/NanumSquareNeoTTF-aLt.eot');
    src: url('../font/NanumSquareNeo/eot/NanumSquareNeoTTF-aLt.eot?#iefix') format('embedded-opentype'),
         url('../font/NanumSquareNeo/woff2/NanumSquareNeoTTF-aLt.woff2') format('woff2'),
         url('../font/NanumSquareNeo/woff/NanumSquareNeoTTF-aLt.woff') format('woff');
    font-display: swap;
} 
@font-face {
    font-family: 'NanumSquareNeo';
    font-weight: 400;
    font-style: normal;
    src: url('../font/NanumSquareNeo/eot/NanumSquareNeoTTF-bRg.eot');
    src: url('../font/NanumSquareNeo/eot/NanumSquareNeoTTF-bRg.eot?#iefix') format('embedded-opentype'),
         url('../font/NanumSquareNeo/woff2/NanumSquareNeoTTF-bRg.woff2') format('woff2'),
         url('../font/NanumSquareNeo/woff/NanumSquareNeoTTF-bRg.woff') format('woff');
    font-display: swap;
} 
@font-face {
    font-family: 'NanumSquareNeo';
    font-weight: 700;
    font-style: normal;
    src: url('../font/NanumSquareNeo/eot/NanumSquareNeoTTF-cBd.eot');
    src: url('../font/NanumSquareNeo/eot/NanumSquareNeoTTF-cBd.eot?#iefix') format('embedded-opentype'),
         url('../font/NanumSquareNeo/woff2/NanumSquareNeoTTF-cBd.woff2') format('woff2'),
         url('../font/NanumSquareNeo/woff/NanumSquareNeoTTF-cBd.woff') format('woff');
    font-display: swap;
} 
@font-face {
    font-family: 'NanumSquareNeo';
    font-weight: 800;
    font-style: normal;
    src: url('../font/NanumSquareNeo/eot/NanumSquareNeoTTF-dEb.eot');
    src: url('../font/NanumSquareNeo/eot/NanumSquareNeoTTF-dEb.eot?#iefix') format('embedded-opentype'),
         url('../font/NanumSquareNeo/woff2/NanumSquareNeoTTF-dEb.woff2') format('woff2'),
         url('../font/NanumSquareNeo/woff/NanumSquareNeoTTF-dEb.woff') format('woff');
    font-display: swap;
} 
@font-face {
    font-family: 'NanumSquareNeo';
    font-weight: 900;
    font-style: normal;
    src: url('../font/NanumSquareNeo/eot/NanumSquareNeoTTF-eHv.eot');
    src: url('../font/NanumSquareNeo/eot/NanumSquareNeoTTF-eHv.eot?#iefix') format('embedded-opentype'),
         url('../font/NanumSquareNeo/woff2/NanumSquareNeoTTF-eHv.woff2') format('woff2'),
         url('../font/NanumSquareNeo/woff/NanumSquareNeoTTF-eHv.woff') format('woff');
    font-display: swap;
} 

@font-face {
    font-family: 'WanjuNuri';
    src: url('../font/WanjuNuri_R/wanjunuri_Regular.ttf') format('truetype');
}
.wrap {width: 100%; min-height: 100%; position: relative;}
.logo {width: 15%; height: 100%;}
.hd{position: fixed; width: 100%; height: 6vw; background-color: white; z-index: 999; left: 0; top: 0;}
#mb_menu { display: none;}

/* .hd:hover{opacity: 1; transition: 1s;} */
a {text-decoration: none; color:#000;}
a:hover {color: #b39a1e;}
#hd-nav {width: 70%; margin-left: 5%; height: 100%;}
#hd-nav li {width: 12%; text-align: center;  height: 100%; position: relative;}
#hd-nav li:hover > a {color: #b39a1e;}
#hd-nav li a {width: 100%; height: 100%; display: block; font-size: 1vw; line-height: 6vw; font-weight: bold;}
#hd-nav .nav-item > a:first-child {height: 100%;}
#hd-nav-sub {position: absolute;width: 100%; padding-left: 0px; visibility: hidden; }
#hd-nav li:hover #hd-nav-sub { transition: ease 0.3s; visibility: visible;}
#hd-nav-sub li {width: 100%; background-color: white; display: flex;}
#hd-nav-sub li:hover > a{transition: 0.3s; color: #b39a1e;}
#hd-nav-sub li:last-child {border-bottom: 1px solid #dee2e6;}
#hd-nav-sub li a {width: 100%; line-height: 3.5vw; font-size: 0.9vw; overflow: hidden; display: inline-block; height: 100%; font-weight: 400;}

#hd-nav-sub2 {position: absolute; width: 100%; height: 100%; padding: 0; left: 100%; visibility: hidden;}
#hd-nav-sub li:hover #hd-nav-sub2 {transition: ease 0.3s; visibility: visible;}
#hd-nav-sub2 li {width: 100%; background-color: white;}
#hd-nav-sub2 li:hover a{transition: 0.3s; color: #b39a1e;}

footer{bottom: 0px; position: fixed; height: 0rem; background-color: white; z-index: 999;}
.ft-content {position: absolute; left: 0px; border-top: 1px solid #969494; top: 5px;}
.ft-content > p {margin: 0 auto; margin-top: 4px; font-size: 0.7vw;}
.ft-content > p span {margin-right: 50px;}
.text-bold{font-weight: bold;}

.ft-btn-on { width: 4vw; height: 4vw; position: absolute; left: 48vw; background-image: url('../img/down_allow.png'); background-size: cover; cursor: pointer; bottom: 0;}
.ft-btn-off { width: 4vw; height: 4vw; position: fixed; bottom: 0; left: 48vw; background-image: url('../img/up_allow.png'); background-size: cover; cursor: pointer; z-index: 999;}
.content {height: 2000px; padding: 0;}
.content > div {height: 100vh; width: 100%; padding: 0;}
.content-div {background-color: white; height: calc(100vh - 6vw); position: relative; top: 6vw; padding: 0;}
#main_area {background-image: url('../img/mb/images/default/k_wallpaper_new.jpg'); background-size: cover; background-repeat : no-repeat;}
#main_area_ch {background-image: url('../img/ch/images/default/noflash/bg2.jpg'); background-size: cover; background-repeat : no-repeat;}

#main-con-2 > div {background-image: url('../img/main_2nd_background_img_2.JPG'); background-size: cover;}
.main-menu-box {background-color: #4e4e4bab; position: relative; height: 23vw; width: 23%; top: 25%; margin: 1%; }
.main-menu-box:hover {border: 2px solid #b39a1e; background-color: #fff;}
.box_in_icon {width: 70%; height: 70%; margin-left: 15%; margin-top: 6%;}
.box_in_txt {width: 100%; height: 30%; text-align: center; font-size: 2vw; font-weight: bold; color: white;}

.main-menu-box:first-child > .box_in_icon {background-image: url('../img/company_wt.png'); background-size: cover;}
.main-menu-box:first-child:hover > .box_in_icon {background-image: url('../img/company_gd.png'); background-size: cover;}
.main-menu-box:first-child:hover > .box_in_txt {color: #b39a1e;}

.main-menu-box:nth-child(2) > .box_in_icon {background-image: url('../img/business_wt.png'); background-size: cover;}
.main-menu-box:nth-child(2):hover > .box_in_icon {background-image: url('../img/business_gd.png'); background-size: cover;}
.main-menu-box:nth-child(2):hover > .box_in_txt {color: #b39a1e;}

.main-menu-box:nth-child(3) > .box_in_icon {background-image: url('../img/product_white_img.png'); background-size: cover;}
.main-menu-box:nth-child(3):hover > .box_in_icon {background-image: url('../img/product_gold_img.png'); background-size: cover;}
.main-menu-box:nth-child(3):hover > .box_in_txt {color: #b39a1e;}

.main-menu-box:nth-child(4) > .box_in_icon {background-image: url('../img/help_white_img.png'); background-size: cover;}
.main-menu-box:nth-child(4):hover > .box_in_icon {background-image: url('../img/help_gold_img.png'); background-size: cover;}
.main-menu-box:nth-child(4):hover > .box_in_txt {color: #b39a1e;}

#main_movie{object-fit: fill; overflow: hidden;}

.content-div:last-child {height: 100%; top: 0;}
#main-con-3 {overflow: hidden;}
#main-con-3 > ul {width: 100vw; height: 100%; padding: 0; margin: 0; position: relative; overflow: hidden;}
#main-con-3 > ul > li { width: 100vw; height: calc(100vh - 6vw); top: 6vw; float: left; position: absolute;}
#main-con-3 > ul > li > p {color: white; font-size: 5rem; position: relative; z-index: 1; font-weight: bold; margin-top: 8vw; margin-left: 10vw;}
#main-con-3 > ul > li > span {color: white; font-size: 2rem; position: relative; z-index: 1; margin-left: 10vw; display: block;}
#main-con-3 > ul > li::before {position: absolute; content: ""; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3);}
#main-con-3 > ul > li:nth-child(1){background-image: url('../img/sheet_pile_1.jpg'); background-size: cover; left: 0;}
#main-con-3 > ul > li:nth-child(2){background-image: url('../img/h_beam_a.jpg'); background-size: cover; left: 100%;}
#main-con-3 > ul > li:nth-child(3){background-image: url('../img/hyfo_beam_1.jpg'); background-size: cover; left: 200%;}
#main-con-3 > ul > li:nth-child(4){background-image: url('../img/d_deck_1.jpg'); background-size: cover; left: 300%;}
/* #main-con-3 > ul > li:nth-child(5){background-color: blue; left: 400%;} */
.lr-scroll-btn {position: relative; width: 5vw; height: 5vw; bottom: 45%; opacity: 0.8;}
#left_scroll_btn {left: 2vw; background-image: url('../img/left_allow.png'); background-size: cover;}
#right_scroll_btn {left: 87vw; background-image: url('../img/right_allow.png'); background-size: cover;}

.con-area {position: relative; height: calc(100vh - 6vw); padding: 0; margin: 0;}

#gnb{height: 10vw; display: flex; margin-top: 6vw; }
#gnb > li { margin: 1vw; text-align: center; font-size: 1.1vw; height: 3vw; line-height: 3vw; width: 15vw; margin-top: 3.5vw; position: relative;}
#gnb > li:first-child {margin-left: 10vw;}
#gnb > li:first-child::before {width: 2.5vw; height: 2.5vw; content: ""; display: block; position: absolute; top: 0.25vw; left: -0.5vw; background-image: url('../img/menu_ico_50.png'); background-size: cover;}
#gnb > li:first-child::after {width: 2.5vw; height: 2.5vw; content: ""; display: block; position: absolute; top: 0.25vw; right: -2vw; background-image: url('../img/menu_right_ico_50.png'); background-size: cover;}
#gnb li > ul {padding: 0; margin: 0; visibility: hidden; background-color: white; z-index: 999; position: relative;}
#gnb li:hover ul {visibility: visible;}

/* 
    *** Common CSS ***
*/
.w70_div {width: 70%;}

/* 
    *** 텍스트 관련 CSS ***

    연한 하늘색 #6c9ae9
    진한 파란색 #013082
    NI 로고색 #b39a1e
*/
.point-sb-txt{font-weight: bold; color: #6c9ae9; font-size: 2vw; font-family:'Song Myung'; margin-top: 5vw; margin-bottom: 3vw;}
.point-b-txt{font-weight: bold; color: #013082; font-size: 2vw; font-family:'Song Myung'; margin-top: 5vw; margin-bottom: 3vw;}
.point-g-txt{font-weight: bold; color: #b39a1e; font-size: 2vw; font-family:'Song Myung'; margin-top: 5vw; margin-bottom: 3vw;}
.point-w-txt{font-weight: bold; color: #fff; font-size: 2vw; font-family:'Song Myung'; margin-top: 5vw; margin-bottom: 3vw;}
.point-bk-txt{font-weight: bold; color: #000; font-size: 2vw; font-family:'Song Myung'; margin-top: 5vw; margin-bottom: 3vw;}

.point-sb-txt-nm {font-weight: bold; color: #6c9ae9; font-size: 2vw; font-family:'Song Myung';}
.point-b-txt-nm {font-weight: bold; color: #013082; font-size: 2vw; font-family:'Song Myung';}
.point-g-txt-nm {font-weight: bold; color: #b39a1e; font-size: 2vw; font-family:'Song Myung';}
.point-w-txt-nm {font-weight: bold; color: #fff; font-size: 2vw; font-family:'Song Myung';}
.point-bk-txt-nm {font-weight: bold; color: #000; font-size: 2vw; font-family:'Song Myung';}

.point-sb-txt-3{font-weight: bold; color: #6c9ae9; font-size: 3.3vw; font-family:'Song Myung'; margin-top: 5vw; margin-bottom: 3vw;}
.point-b-txt-3{font-weight: bold; color: #013082; font-size: 3.3vw; font-family:'Song Myung'; margin-top: 5vw; margin-bottom: 3vw;}
.point-g-txt-3{font-weight: bold; color: #b39a1e; font-size: 3.3vw; font-family:'Song Myung'; margin-top: 5vw; margin-bottom: 3vw;}
.point-w-txt-3{font-weight: bold; color: #fff; font-size: 3.3vw; font-family:'Song Myung'; margin-top: 5vw; margin-bottom: 3vw;}
.point-bk-txt-3{font-weight: bold; color: #000; font-size: 3.3vw; font-family:'Song Myung'; margin-top: 5vw; margin-bottom: 3vw;}

.sb-txt{color: #6c9ae9; font-size: 0.9vw;}
.b-txt{color: #013082; font-size: 0.9vw;}
.g-txt{color: #b39a1e; font-size: 0.9vw;}
.w-txt{color: #fff; font-size: 0.9vw;}

.sb-txt-1{color: #6c9ae9; font-size: 1.3vw;}
.b-txt-1{color: #013082; font-size: 1.3vw;}
.g-txt-1{color: #b39a1e; font-size: 1.3vw;}
.w-txt-1{color: #fff; font-size: 1.3vw;}
.bk-txt-1{color: #000; font-size: 1.3vw;}

.bold-txt{font-weight: bold; font-size: 0.9vw;}

.con-txt {color: #666; font-size: 0.9vw;}
.page-con {height: 90vh;}

.txt-08{font-size: 0.8vw;}

/* 테이블 CSS */

.etc_table {width: 70%; text-align: center;}
.etc_table thead{background-color: #9b9887;}
.etc_table tr {height: 2vw;}
.etc_table th {border: 1px solid #fff; color: #fff; vertical-align: middle; font-size: 0.8vw;}
.etc_table td {border: 1px solid #333; vertical-align: middle; font-size: 0.8vw; padding: 15px;}
.w90_tb { width: 90%;}

/* 버튼 CSS */
.sb-btn {background-color: #6c9ae9; color: white;}
.b-btn {background-color: #013082; color: white;}
.g-btn {background-color: #198754; color:white;}
.r-btn{background-color: #e93418; color: white;}

.red_dot {color: red;}
.dummy {padding-bottom: 15%;}

.pagination {width: 100%; padding-bottom: 5vw; margin-top: 3vw; text-align: center; justify-content: center;}
.pagination > a { width: 5%; }
.pagination > a.on { font-weight: bold; color: #6c9ae9; }

.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 70px;
    height: 70px;
    display: none;
}

#floating_ban {display: flex; position: absolute; right: 3vw; top: 20vh; width: 10.5%;}
#main_div {width: 100%; height: 100%; display: flex; flex-direction: row-reverse;}
#main_div > div {display: flex; width: 50%; height: 100%; flex-direction: column;}

.board_box {width: 70%; height: 20%; margin-top: 5%;}
.board_box p { height: 15%; display: flex; position: relative; margin: 0;}
.board_box p span {height: 100%; display: flex; align-items: center; margin-left: 4%;}
.board_box p > span:first-child {border-bottom: 4px solid #e93418;}
.board_box p > span:last-child {float: right; position: absolute; right: 10%;}

.board_ul {list-style: disc; color: #e93418; height: 80%; border-top: 2px solid #999;}
.board_ul li {height: 33%; align-content: center;}
.board_ul li > a {display: flex; width: 100%;}
.board_ul li > a:hover {font-weight: bold; color: black;}
.board_ul li > a > span:first-child {width: 70%;}
.board_ul li > a > span:last-child {width: 30%; text-align: center;}
.board_ul li > a > span {font-size: 0.8vw;}

.nodata_span {color: black; font-size: 0.8vw;}

.success {color: #6c9ae9;}
.fail {color: #e93418;}

/* 햄버거 버튼 기본값 (숨김) */
#mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 2rem;
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 1100;
}

/* 모바일 메뉴 오버레이 */
.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.98);
    z-index: 10000;
    padding: 20px;
    overflow-y: auto;
}

.mobile-menu-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.mobile-menu-close {
    font-size: 28px;
    cursor: pointer;
    padding: 10px;
}

.mobile-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu-item > a.accordion-toggle {
    display: block;
    font-size: 18px;
    padding: 15px 10px;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
}

.mobile-menu-item > a.accordion-toggle.active {
    color: #b39a1e;
}

.submenu {
    display: none;
    padding-left: 20px;
    background-color: #f9f9f9;
}

.submenu li a {
    display: block;
    padding: 10px;
    font-size: 16px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #eee;
}

.submenu li a:hover {
    color: #b39a1e;
}

/* 영상 full width */
#main_movie {
    width: 100%;
    height: auto;
}
  
  /* 반응형 메뉴 박스 */
  @media (max-width: 991px) {
    .main-menu-box {
      width: 45%;
      height: auto;
      margin: 2% auto;
    }
  }
  
  @media (max-width: 575px) {
    .main-menu-box {
      width: 90%;
      height: auto;
      margin: 10px auto;
    }
  
    .box_in_icon {
      height: 150px;
      background-size: contain !important;
      background-repeat: no-repeat;
      background-position: center;
    }
  
    .box_in_txt {
      font-size: 5vw;
      padding: 10px 0;
    }
  }
  
  /* 슬라이드 텍스트 */
  #slide_product_box li p {
    font-size: 4vw;
    text-align: center;
  }
  #slide_product_box li span {
    font-size: 3vw;
    text-align: center;
    display: block;
  }
  
  /* 버튼 위치 */
  @media (max-width: 768px) {
    .lr-scroll-btn {
      width: 40px;
      height: 40px;
      background-size: contain !important;
      bottom: 30%;
    }
    #left_scroll_btn { left: 10px; }
    #right_scroll_btn { right: 10px; left: auto; }
  }