/* ======================================================================================================================================================================== */
/* ============================================================ header style start (yangyunji) =========================================================================== */
/* ======================================================================================================================================================================== */

nav {
  width: 100%;
}
.spinner-master input[type="checkbox"] {
  display: none;
}

/* ==================================== menu (PC) ============================================= */
#header {
  position: absolute;
  z-index: 1000;
  top: 0;
  width: 100%;
  transition: background 0.5s ease-out;
  /* background: #00000063; */
}

/* language switch bar (lang.php) offset — while #header is "position: absolute"
   it scrolls away together with the .lang bar (both sit in the normal document
   flow, in lockstep), sitting margin-top below it so the two never overlap.
   Once the page scrolls past the .lang bar's real height, lang.php's scroll
   script adds "is-fixed", which promotes #header to "position: fixed" so it
   sticks to the viewport top from then on — margin-top is intentionally NOT
   in #header's transition list above, so this switch is instant, not a slow
   float. The 70px/40px values below are just a CSS fallback: lang.php now
   measures the .lang bar's real rendered height via JS and applies it as
   both the margin-top and the scroll threshold, so this stays correct even
   if the bar's height ever changes. */
#header {
  margin-top: 70px;
}
header.is-fixed {
  position: fixed !important;
  margin-top: 0 !important;
}
@media screen and (max-width: 1200px) {
  #header {
    margin-top: 40px;
  }
}

#header #logo img {
  width: 200px;
  height: auto;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.header-banner {
  position: relative;
}

/* ============================== Mobile size : 1400px ============================== */

@media screen and (max-width: 1400px) {
  .menu-wrap::after{
    display: none;
  }
  #header {
    background: #37b0a1;
    box-shadow: 5px 5px 20px -22px rgba(0, 0, 0, 0.75);
  }
  #header a {
    color: inherit;
  }
  #main {
    margin-top: 58px;
  }
}

.mobile-gnb,
#m_logo {
  display: none;
}

/* ===================== menu ===================== */
.menu-wrap {
  padding: 10px 0;
  position: relative;
}
.menu-wrap::after {
  z-index: -1;
  content: "";
  background: linear-gradient(180deg, #000000, #00000000);
  transition: all 0.5s;
  opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
/* language switch bar (lang.php): with the .lang bar now pushing the header
   down at the top of the page, keep the header's gradient background visible
   at all times instead of going fully transparent at scrollY 0 — disabled
   the "transparent at top" state below.
.menu-wrap.active::after {
  opacity: 0;
  background: linear-gradient(180deg, #00000000, #00000000);
}
*/
.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  height: 130px;
  transition: all ease 0.3s;
}
#logo {
  height: 130px;
  width: 350px;
}
.header-sub-right {
  color: #fff;
  height: 130px;
  width: 350px;
  display: flex;
  align-items: center;
}
.header-sub-right > ul {
  margin-right: 0px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

@media(max-width:1700px) {
  .header-sub-right > ul{
    margin-right: 0px;
  }
}
@media(max-width:1400px) {
  .header-sub-right {
    display: none;
  }
}

.header-sub-right > ul li {
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.header-sub-right > ul li:not(:last-child) {
  border-right: 1px solid #ffffff;
}

.header-sub-right > ul li:last-child img {
  height: 40px;
  margin-right: 8px;
}
.header-sub-right > ul li p {
  font-size: 10px;
}

#head-sub {
  position: absolute;
  top: 13px;
  right: 55px;
}
#head-sub > img {
  height: 55px;
}
#phone-call {
  position: absolute;
  top: 17px;
  left: 8px;
  display: none;
}
#phone-call img {
  max-width: 30px;
}

/* 1depth */
.menu .dropdown {
  display: flex;
  width: 100%;
  max-width: 800px;
  height: 50px;
  justify-content: space-between;
  padding: 0 50px;
  border-radius: 999px;
  background-color: #37b0a1;
  box-shadow: 5px 5px 20px -22px rgba(0, 0, 0, 0.75);
}
.menu .dropdown > li {
  /* min-width: 15%; */

  text-align: center;
  position: relative;
  height: 50px;
  color: #37b0a1;
}

.menu .dropdown > li > a {
  display: inline-block;
  line-height: 50px;
  transition: all 0.5s;
  color: #fff;
  font-weight: 700;
}
.menu .dropdown > li:hover > a {
  color: #cdfff8;
}

.menu .dropdown > li > ul {
  overflow: hidden;
  position: absolute;
  width: 200px;
  height: 0;
  border-radius: 20px;
  background-color: #ffffff;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.5s;
  opacity: 0;
}
.menu .dropdown > li:hover > ul {
  opacity: 1;
  /* overflow: visible; */
  height: auto;
  box-shadow: 5px 5px 20px -22px rgba(0, 0, 0, 0.5);
}

/* 2depth */
.menu .dropdown ul li {
  padding: 8px 0;
}
.menu .dropdown ul li a {
  color: #000;
  position: relative;
  display: inline-block;
  transition: all 0.5;
}
.menu .dropdown ul li a::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background-color: #005667;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 0;
}
.menu .dropdown ul li:hover a::after {
  width: 100%;
  transition: all 0.3s ease;
}

/* ================== sub-menu ===================== */
/* tab-menu */
.tab-menu-wrap {
  position: relative;
  height: 50px;
}
.tab-menu {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 100;
}
.tab-menu * {
  font-size: 13px;
}
.tab-menu::before {
  content: "";
  background-color: #fff;
  display: block;
  width: 100%;
  position: absolute;
  height: 50px;
  z-index: -4;
  left: 0;
  top: 0;
  border-bottom: 1px solid #dcdcdc;
}
.tab-menu .home-btn {
  display: inline-block;
  padding: 15px 15px;
  text-align: left;
  border-left: 1px solid #dcdcdc;
  border-right: 1px solid #dcdcdc;
  height: 50px;
}
.tab-menu .home-btn img {
  width: 50px;
  height: auto;
}
.tab-menu .inner div p.btn:hover,
.tab-menu .inner {
  display: flex;
}
.tab-menu .inner div {
  width: 100%;
}
.tab-menu .inner div ul {
  cursor: pointer;
  position: relative;
  width: 100%;
}
.tab-menu .inner div p.btn {
  display: flex;
  align-items: center;
  min-height: 50px;
  position: relative !important;
  padding: 12px 10px !important;
  border-right: 1px solid #dcdcdc !important;
  cursor: pointer;
}
.tab-menu .inner div p.btn::after {
  transition: all ease 0.5s;
  transform: translate(0, -50%);
  content: "";
  position: absolute;
  top: 50%;
  right: 2%;
  width: 22px;
  height: 22px;
  background: url(../img/sub_navi_off.png) 0 0 no-repeat;
}
.tab-menu .inner div:hover p.btn::after {
  background: url(../img/sub_navi_on.png) 0 0 no-repeat;
  transition: all ease 0.5s;
}
.tab-menu .inner div ul {
  display: none;
  border: 1px solid #dcdcdc;
}
.tab-menu .inner div ul li a {
  display: block;
  padding: 7px 10px;
  background-color: #fff;
  transition: all 0.2s;
}
.tab-menu .inner div ul li a:hover {
  background-color: #37b0a1;
  color: #fff;
}

/* ============================== Mobile size : 1200px ============================== */

@media screen and (max-width: 1400px) {
  .menu-wrap {
    text-align: center;
    padding: 0;
  }
  #m_logo {
    display: inline-block;
    padding: 10px 0;
    text-align: center;
  }
  #m_logo img {
    width: 170px;
  }
  #head-sub {
    display: none;
  }
  #logo {
    display: none;
  }
  #phone-call {
    display: block;
  }
  .menu {
    display: none;
    padding: 0 !important;
  }
  .menu .dropdown {
    display: flex;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    justify-content: center;
    border-radius: 0;
    background-color: #fff;
    height: auto;
    padding: 0;
  }
  .menu.active {
    display: block;
    background: #fff;
    height: 100%;
  }
  .menu.active,
  .dropdown ul.active {
    max-height: 55em;
  }

  /* ==================================== menu (Mobile) ============================================= */
  /* top-menu */
  .mobile-gnb.active {
    display: flex;
    background: #525252;
    color: #fff;
  }
  .mobile-gnb li {
    font-size: 13px;
    width: 50%;
    text-align: center;
    height: 45px;
    line-height: 45px;
  }
  .mobile-gnb li a {
    color: #fff;
  }

  /* menu style all */
  #menu:hover {
    height: 100%;
  }
  #menu .dropdown {
    display: block;
  }
  #menu .dropdown:hover::before {
    display: none;
  }
  #menu .dropdown > li {
    height: 100%;
  }
  #menu .dropdown > li:hover * {
    color: #111;
  }
  #menu .dropdown > li:hover {
    height: auto;
    background-color: #fff;
  }
  #menu .dropdown > li > a {
    position: relative;
    line-height: 1.5;
    display: block;
    padding: 12px 0;
  }
  #menu .dropdown > li > a:after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: block;
    font-size: 23px;
  }
  #menu .dropdown > li > a.active:after {
    content: "-";
    right: 12px;
  }

  #menu .dropdown ul {
    border-top: 1px solid #ddd;
    background: #eee;
  }
  #menu .dropdown ul li {
    padding: 0;
  }
  #menu .dropdown ul li:not(:first-child) {
    border-top: 1px solid #fff;
  }
  #menu .dropdown ul li:last-child {
    border-bottom: 1px solid #ddd;
  }
  #menu .dropdown ul li a {
    width: 100%;
    display: block;
    height: 100%;
    padding: 8px 10px;
  }
  #menu .dropdown ul li a::after {
    display: none;
  }
  #menu .dropdown ul li:hover a {
    background: #37b0a1;
    color: #fff;
    transition: all 0.1s ease;
  }

  /* 3depth style */
  .menu,
  .dropdown ul {
    overflow: hidden;
    max-height: 0;
  }
  .dropdown ul {
    display: inherit;
    position: relative;
    left: auto;
    top: auto;
    border: none;
    padding: 0px;
  }

  /* menu button style */
  .spinner-master * {
    transition: all 0.3s;
    box-sizing: border-box;
  }
  .spinner-master {
    position: absolute;
    margin: 10px;
    height: 30px;
    width: 30px;
    right: 0;
    top: 7px;
  }
  .spinner-master label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    height: 100%;
    width: 100%;
  }
  .spinner-master .spinner {
    position: absolute;
    height: 4px;
    width: 100%;
    padding: 0;
    background-color: #fff;
  }
  .spinner-master .diagonal.part-1 {
    position: relative;
    float: left;
  }
  .spinner-master .horizontal {
    position: relative;
    float: left;
    margin-top: 4px;
  }
  .spinner-master .diagonal.part-2 {
    position: relative;
    float: left;
    margin-top: 4px;
  }
  .spinner-master input[type="checkbox"]:checked ~ .spinner-spin > .horizontal {
    opacity: 0;
  }
  .spinner-master
    input[type="checkbox"]:checked
    ~ .spinner-spin
    > .diagonal.part-1 {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
  }
  .spinner-master
    input[type="checkbox"]:checked
    ~ .spinner-spin
    > .diagonal.part-2 {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    margin-top: -12px;
  }

    .header-sub-right{
    display: none;
  }
  .menu .dropdown > li{
    color: #000;
  }

  .menu .dropdown > li > ul{
    position: relative;
    top: 0;
    left: 0;
    width: auto;
    transform: translateX(0);
    border-radius: 0;
  }
}

/* ============================== Mobile size : 1024px ============================== */
@media screen and (max-width: 1024px) {
  .tab-menu .inner {
    padding: 0;
  }
}

/* ============================== Mobile size : 769px ============================== */
@media screen and (max-width: 769px) {
  .tab-menu * {
    font-size: 12px;
  }
  .tab-menu .inner div p.btn:after {
    width: 18px;
    height: 18px;
    background-size: cover;
  }
  .tab-menu .inner div:hover p.btn:after {
    width: 18px;
    height: 18px;
    background-size: cover;
  }
}

@media screen and (max-width: 425px) {
  #menu .dropdown > li > a {
    padding: 8px 0;
  }
  #menu .dropdown ul li a {
    padding: 6px 10px;
    font-size: 13px;
  }

  #m_logo {
    padding: 12px 0;
  }
  #m_logo img {
    width: 130px;
  }

  .tab-menu * {
    font-size: 10px;
  }
}