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

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

/* =========================================== head-top style ============================================== */
/* =========================================== head-top style ============================================== */


.head-top {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.head-top p{text-align: center;font-size: 20px;color: #fff;}

.close-btn {
  position: absolute;
  top:10px;
  right: 10px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn::before,
.close-btn::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 70%;
  background-color: #fff;
}

.close-btn::before {
  transform: rotate(45deg);
}

.close-btn::after {
  transform: rotate(-45deg);
}

/* =========================================== head-top style ============================================== */
/* =========================================== head-top style ============================================== */

/* ==================================== menu (PC) ============================================= */
#header {position: fixed; z-index: 1000; top: 0; width: 100%; transition: 0.5s ease-out; box-shadow: 5px 5px 20px -22px;background: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent);}
#header.on {background: rgba(0,0,0,0.5);}
#header #logo img {width: 200px; height: auto; position: relative; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.mobile-gnb , #m_logo {display: none;}


/* ===================== menu ===================== */
.menu-wrap {position: relative;}
.menu {position: static !important; display: flex; justify-content: start; height: 90px; transition: all ease 0.3s; max-width: 1400px !important;}
#logo {height: 90px; padding-right: 20px;}
#phone-call{position: absolute; top: 20px; left: 15px; display: none;}
#phone-call img {max-width: 30px; filter: brightness(100);}


/* 1depth */
.menu .dropdown {display: flex; width: 100%; max-width: 1400px; justify-content: center;}
.menu .dropdown > li {min-width: 12.5%; text-align: center; height: 90px;}
.menu .dropdown > li:hover > a {color: #23d7d0 !important; font-weight: 900;}
.menu .dropdown > li > a {display: inline-block; line-height: 90px; color: #fff;}


/* 2depth */
.menu .dropdown article {position: absolute; left: 0; display: none; width: 100%; background: rgba(0,0,0,0.5);}
.menu .dropdown article.active {display: block;}
.menu .dropdown ul {display: flex; padding: 8px 0; margin: 0 auto; width: 100%; max-width: 1400px;}
.menu .dropdown ul li {padding: 8px; flex: 1;}  /* flex: 1; 추가 */
.menu .dropdown > li:first-child ul {flex-wrap: wrap;}
.menu .dropdown > li:first-child ul li {flex: none; width: 20%;}
.menu .dropdown ul li a {position: relative; display: inline-block; color: #fff !important;}
.menu .dropdown ul li a::after {content: ''; display: block; width: 0; height: 1px; background-color: #23d7d0; position: absolute; left: 50%; transform: translate(-50%, 0); bottom: 0;}
.menu .dropdown ul li:hover a {color: #23d7d0 !important; font-weight: 700;}
.menu .dropdown ul li:hover a::after {width: 100%; transition: all 0.5s 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: 15px;}
.tab-menu::before {position: absolute; content: ''; display: block; left: 0; top: 0; width: 100%; height: 50px; background-color: #333; z-index: -4; 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 {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 {position: relative ; display: flex; align-items: center; padding: 12px 10px; min-height: 50px; color: #fff;  border-right: 1px solid #dcdcdc; cursor: pointer;}
.tab-menu .inner div p.btn::after {position: absolute; content: ''; transform: translate(0, -50%); top: 50%; right: 10px; width: 22px; height: 22px; transition: all ease 0.5s; 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; color: #000; padding: 7px 10px; background-color: #f3f3f3;}
.tab-menu .inner div ul li a:hover {background-color: #999; color: #fff;}

/* menu button style */
.spinner-master {display: none; z-index: 10;}
.spinner-master * {transition: all 0.3s; box-sizing: border-box;}
.spinner-master {position: absolute; top: 50%; transform: translateY(-50%); right: 20px; height: 30px; width: 25px;}
.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: 3px; 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; margin-top: 3px;}
.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: -9px;}

.mobile-menu-wrap {display: none;}

.pc-tab-menu {position: relative;}
.pc-tab-menu::before {position: absolute; content: ''; left: 0; bottom: 0; width: 100%; height: 1px; background: #e5e5e5;}
.pc-tab-menu ul {display: flex; border-right: 1px solid #e5e5e5;}
.pc-tab-menu ul > li {position: relative; flex: 1; text-align: center; border-left: 1px solid #e5e5e5; cursor: pointer;}
.pc-tab-menu ul > li.on,
.pc-tab-menu ul > li:hover{color: #fff;background: #344a24;}
.pc-tab-menu ul > li a {display: block; padding: 12px 10px; font-size: 20px;}
.pc-tab-menu ul > li.on a,
.pc-tab-menu ul > li:hover a {color: #fff;}


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

@media screen and (max-width:1200px){
	.spinner-master {display: block;}
#header #logo {height: 75px;}
#header #logo img {filter: brightness(1);}
#header .menu {height: 75px;}
#header .menu .dropdown,
#header .menu .search {display: none;}

#header .multilingual {right: 60px;}

.mobile-gnb{display: flex;justify-content: center; align-items: center;gap:10px;margin-top: 30px;}
.mobile-gnb li{width: 50%;border: 1px solid #fff;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.mobile-gnb li a{color: #fff;display: block;padding: 3px;text-align: center;}
.mobile-menu-wrap {display: block; position: fixed; left: -100%; top: 0; width: 100%; height: 100%; transition: left cubic-bezier(0.65, 0.13, 0.35, 0.95) 0.7s;}
.mobile-menu-wrap .mobile-menu {position: absolute; display: flex; flex-direction: column; justify-content: space-between; left: 0; top: 0; max-width: 500px; width: 100%; height: 100%; background: #344a24; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; }
.mobile-menu-wrap .mobile-menu-bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity: 0; transition: all 0.3s ease-in-out; z-index: -1;}
.mobile-menu-wrap.active {left: 0;}
.mobile-menu-wrap.active .mobile-menu-bg {opacity: 1;}

.mobile-menu {padding: 40px 20px; overflow-y: scroll;}
.mobile-menu::-webkit-scrollbar {width: 0;}
.mobile-menu::-webkit-scrollbar-track {box-shadow: none; background-color: none;}
.mobile-menu::-webkit-scrollbar-thumb {background-clip: padding-box; background-color: transparent;}
.mobile-menu .mobile-menu-logo img {display: inline-block; max-width: 240px; width: 100%;}

.mobile-menu-list {margin-top: 20px;}
.mobile-menu-list > li {position: relative; margin-bottom: 10px; padding: 8px 16px;}
.mobile-menu-list > li > a {display: block; font-family: "GmarketSansMedium";font-size: 24px; letter-spacing: 0; color: #fff; cursor: pointer;}
.mobile-menu-list > li > a::after {position: absolute; content: ''; top: 50%; transform: translateY(-50%); margin-left: 10px; width: 20px; height: 20px; background: url(../img/down_icon_w.png) center/cover no-repeat;}
.mobile-menu-list > li.active > a::after {background: url(../img/up_icon_w.png) center/cover no-repeat;} 
.mobile-menu-list > li.none > a::after {display: none;}

/* 하위 메뉴 스타일링 */
.mobile-menu-list article {display: none; position: relative;overflow: hidden;margin-top: 10px; left: 0; width: 100%; background: #212c19;border-radius: 15px;}
.mobile-menu-list li.active > article {display: block;}
.mobile-menu-list article ul li {border-top: 1px solid rgba(0,0,0,0.5); transition: all 0.2s ease-in-out;}
.mobile-menu-list article ul li a {display: inline-block; width: 100%; padding: 8px 12px; color: #fff; font-weight: normal; transition: all 0.1s ease-in-out;}


.mobile-menu-footer ul {display: flex;}
.mobile-menu-footer a {display: inline-block; max-width: 45px; width: 100%; margin: 0 5px;}
}


/* ============================== 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: 14px;}
	.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;}
	.head-top p{font-size: 17px;}
}


/* ============================== Mobile size : 480px ============================== */
@media screen and (max-width:480px){
	#header #logo img {width: 200px;}
	
	#header .menu .lang {display: none;}
	#header .multilingual {display: block; right: 50px;}

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

	.mobile-menu-wrap.active .mobile-menu {max-width: 320px;}
	.mobile-menu .search-input {padding: 5px; font-size: 14px;}
	.mobile-menu .search-button {padding: 5px 0;}

	.mobile-menu-list > li {padding: 0px;}
	.mobile-menu-footer a {max-width: 40px; margin: 0 2px;}

	.close-btn {
	  top:5px;
	  right: 5px;
  }
}

/* ============================== Mobile size : 380px ============================== */
@media screen and (max-width:380px){
	.mobile-menu-wrap.active .mobile-menu {max-width: 300px;}
	
	.mobile-menu-list > li > a {font-size: 20px;}
}

.menu {align-items:center; max-width:100% !important; padding:0 20px 0 200px;}
.menu .dropdown {flex:1; min-width:0; padding:0 0 0 100px; justify-content:space-around;}
.menu .dropdown > li {min-width:11.5%;}
.menu .dropdown > li > a  {font-size:20px; font-weight:bold;}
.menu .dropdown > li:hover > a {color:#e3d1bd !important;}
.lang-select {position:relative; display:flex; flex-wrap:wrap; align-items:center; height:90px;}
.lang-select button {height:32px; padding:0 10px 0 15px; font-size:18px; font-weight:500; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; background:transparent; border:2px solid #fff; color:#fff; border-radius:50px;}
.lang-select .inner {pointer-events:none; opacity:0; transition:all ease 0.5s; position:absolute; width:100%; background:#fff; left:0; top:60px; border-radius:5px; padding:5px 0 8px; box-shadow:0 0 10px rgba(0,0,0,0.05);}
.lang-select .inner a {display:block; text-align:center; font-size:17px;} 
.lang-select .inner a:hover {text-decoration:underline !important;}
.lang-select:hover .inner {pointer-events:inherit; opacity:1; top:68px;}

/* sub-menu */
.sub-menu {pointer-events:none; opacity:0; transition:all ease 0.5s; min-height:425px; position:absolute; width:100%; left:0; display:flex; flex-wrap:wrap; background:#fff /*url('../img/bg_sub_menu.png') no-repeat right bottom / 100% auto*/; box-shadow:0 5px 10px rgba(0,0,0,0.05);}
.sub-menu > div {flex:1; min-width:0; padding:75px 65px;}
.sub-menu .menu-left {background:#f7f7f7;}
.sub-menu .menu-left strong {font-size:30px; font-weight:bold; color:#333; font-family:'Playfair Display'; text-align:left; display:block;}
.sub-menu .menu-left p {font-size:20px; color:#333; word-break:keep-all; text-align:left;}
.sub-menu .menu-left a {display:block; text-align:left; font-size:22px; font-weight:bold; color:#777; margin:30px 0 0;}
.sub-menu .menu-right dl {display:flex; flex-wrap:wrap; gap:15px 35px; padding-top:50px;} 
.sub-menu .menu-right dl dd a {font-size:22px; font-weight:bold; color:#777;}
.sub-menu .menu-right dl dd a:hover {color:#000; text-decoration:underline;}
.menu .dropdown > li:hover > .sub-menu {pointer-events:inherit; opacity:1;}
@media (max-width:1300px){
.sub-menu > div {padding:50px;}
}