@charset "utf-8";

:root {
	--black: #333333;
	--mainColor: #006648;
}

html {scroll-behavior: smooth;}
#wrap {width: 100%; min-width: 320px; font-size: 18px; background: #F2F2F2;} button {font-size: 1em;} a {color: var(--black);}
body, select, input,textarea, button {color: var(--black); font-family:'pretendard', sans-serif; word-break: keep-all; letter-spacing: -.3px;}
.sec {position: relative;}
.inner {max-width: 1100px; padding: 0 20px; margin: 0 auto; width: 100%; box-sizing: border-box;}
.gray {color: #999999;}
.red {color: #E21000;}
.gilroy {font-family: 'gilroy'; letter-spacing: .8px;}
.rubik {font-family: 'Rubik';}

@font-face {
  font-family: 'Rubik';
  font-weight: 800; 
  src: url('../font/Rubik-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Rubik 600';
  font-weight: 600; 
  src: url('../font/Rubik-SemiBold.woff') format('woff');
}
@font-face {
  font-family: 'Rubik 500';
  font-weight: 600; 
  src: url('../font/Rubik-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Gotham';
  font-weight: 800; 
  src: url('../font/Gotham-Medium.woff') format('woff');
}


@keyframes opacityMove {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes upMove {0% {transform: translateY(20px); opacity: 0;} 100% {transform: none; opacity: 1;}}



header {position: fixed; top: 0; left: 0; width: 100%; z-index: 90; height: auto; box-sizing: border-box; transition: .5s cubic-bezier(0.33, -0.01, 0.2, 1); background: #fff;}
header .inner {display: flex; justify-content: space-between; align-items: center; height: 4.11em;}
header nav {position: absolute; top:  50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; text-transform: uppercase;}
header nav ul {display: flex; gap: .5em;}
header nav ul li a {position: relative; padding: .5em .45em; transition: .5s ease; font-size: .9em; -webkit-text-stroke: 1px;}
header nav ul li a:after {content: ""; position: absolute; width: 0; height: 2px; background: var(--mainColor); left: 50%; transform: translateX(-50%); bottom: 0; transition: .5s ease;}
header .inner .rightBox {display: flex; align-items: center; gap: .9em;}
header .inner .rightBox .searchBtn {width: 24px; height: 24px; background: url(/images/ico_search.svg) no-repeat center / contain; transition: .2s ease;}
header .inner .rightBox .cartBtn {width: 24px; height: 24px; background: url(/images/ico_cart.svg) no-repeat center / contain; transition: .2s ease;}
.loginBtn {position: relative; background: var(--mainColor); color: #fff; border-radius: 1.27em; padding: .6em .9em; display: flex; align-items: center; transition: .3s ease;}
.loginBtn2 {position: relative; background: var(--mainColor); color: #fff; padding: 4px; display: flex; align-items: center; transition: .3s ease;border-radius: 3px}
.loginBtn span {font-size: .7em; -webkit-text-stroke: 1px;}
.font-normal {font-size:13px !important; -webkit-text-stroke:0px !important;}
header .sitemapBtn {width: 24px; height: 24px; background: url(/images/header_sitemapBtn.svg) no-repeat center / contain;}
header .sitemapBtn.open {background-image: url(/images/header_sitemapBtn_close.svg);}
header .sitemap {display: none;}

header .prevBtn .icon {width: 8px; height: 16px; background: url(/images/ico_header_prev.svg) no-repeat center / contain; display: none;}


header .sitemap {position: fixed; width: 100%; left: 50%; transform: translateX(-50%); height: 100%; top: 0; display: none; z-index: 50;}
header.open .sitemap {display: block;}
header .sitemap .bg {position: absolute; width: 100%; height: 100%; right: 0; bottom: 0; background: rgba(0, 0, 0, .4); overflow: hidden; opacity: 0;}
header.open .sitemap .bg {animation: opacityMove 1s ease both;}
header .sitemap .sitemapBox {position: absolute; left: -100%; max-width: 400px; min-width: 300px; width: 80%; background: #fff; height: 100%; top: 0; color: var(--black); box-shadow: 0 0 6px rgba(0, 0, 0, .4); overflow-y: auto;}
header.open .sitemap .sitemapBox {animation: sitemapMove 1s ease both;}
@keyframes sitemapMove {0% {left: -100%;} 100% {left: 0;}}
header .sitemap .sitemapBox > * {padding: 0 20px;}
header .sitemap .sitemapBox .notLogin {display: flex; justify-content: space-between; padding: 1.72em; border-bottom: 1px solid #eee;}
header .sitemap .sitemapBox .notLogin .text {font-size: 1.6em; font-weight: 700;}
header .sitemap .sitemapBox .notLogin .loginBtn {width: 66px; height: 30px; box-sizing: border-box; padding: 0; justify-content: center;}
header .sitemap .sitemapBox .notLogin .loginBtn span {font-size: 1em; -webkit-text-stroke: .7px;}
header .sitemap .sitemapBox .topBox {height: 4.11em; display:  flex; align-items: center; justify-content: flex-end; box-sizing: border-box;}
header .sitemap .sitemapBox .profile {display: flex; flex-direction: column; gap: 1.1em}
header .sitemap .sitemapBox .profile .nameBox {display: flex; align-items: center; justify-content: space-between; gap: 1em;}
header .sitemap .sitemapBox .profile .nameBox .name {font-size: 1.45em; font-weight: 700;}
header .sitemap .sitemapBox .profile .nameBox .email {font-size: .85em;}
header .sitemap .sitemapBox .profile .info {display: flex; gap: 9%;}
header .sitemap .sitemapBox .profile .info li {width: 100%;}
header .sitemap .sitemapBox .profile .info li a {display: flex; gap: .5em; justify-content: space-between; align-items: center; width: 100%;}
header .sitemap .sitemapBox .profile .info .tt1 {font-size: .85em;}
header .sitemap .sitemapBox .profile .info .tt2 {font-size: .95em;}
header .sitemap .sitemapBox .profile .logoutBtn {position: absolute; bottom: 1.6em; left: 1.2em; color: var(--mainColor); display: flex; align-items: center; gap: .3em;}
header .sitemap .sitemapBox .profile .logoutBtn span {font-size: .9em; font-weight: 600;}
header .sitemap .sitemapBox .profile .logoutBtn .icon {width: 1.35em; height: 1.35em; background: url(/images/ico_logout.svg) no-repeat center / contain;}
header .sitemap .sitemapBox .breakdown {display: flex; gap: 3%;}
header .sitemap .sitemapBox .breakdown li {width: 100%;}
header .sitemap .sitemapBox .breakdown li a {border-radius: .9em; padding: .8em .5em; background: #F6F6F6; text-align: center; display: flex; flex-direction: column; gap: .53em; width: 100%; box-sizing: border-box; line-height: 1;}
header .sitemap .sitemapBox .breakdown li .tt1 {font-size: 1.3em; color: #222;}
header .sitemap .sitemapBox .breakdown li .tt2 {font-size: .7em; color: #bbb;}
header .sitemap .sitemapBox .recentBox {display: flex; flex-direction: column; gap: .85em; width:  calc(100% + 20px); overflow: hidden;}
header .sitemap .sitemapBox .recentBox .title {display: flex; align-items: center; gap: .5em; font-weight: 600;}
header .sitemap .sitemapBox .recentBox .title .icon {width: 5px; height: 9px; background: url(/images/ico_arrow_gray.svg) no-repeat center / contain;}
header .sitemap .sitemapBox .recentBox .list {overflow-x: auto;}
header .sitemap .sitemapBox .recentBox .list ul {display:  flex; gap: 8px;}
header .sitemap .sitemapBox .recentBox .list li {width:  5.15em; flex: none;}
header .sitemap .sitemapBox .recentBox .list a {border-radius: .8em; overflow: hidden; width: 100%; padding-bottom: 100%; position: relative;}
header .sitemap .sitemapBox .recentBox .list a img {position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center;}
header .sitemap .sitemapBox .navBox {padding: 2.6em 20px; display: flex; flex-direction: column; gap: 1.3em;}
header .sitemap .sitemapBox .navBox a {-webkit-text-stroke: .8px; font-size: 1.1em;}


#container {padding-top: 4.11em;}
footer {padding: 2.22em 0; border-top: 1px solid #DDDDDD; font-weight: 500;}
footer .inner {font-size: .9em;}
footer .inner address {margin-bottom: 1.2em;}
footer .inner address ul {display: flex; flex-direction: column; gap: 1em; color: #999999;}
footer .inner .contactBox {display: flex; align-items: center; gap: .6em;}
footer .inner .contactBox a {color: var(--black); font-weight: 600;}

@media screen and (min-width: 1025px) {
	header nav ul li a:hover {color: var(--mainColor);}
	header nav ul li a:hover:after {width: 100%;}
	header .inner .rightBox .searchBtn:hover {background-image: url(/images/ico_search_green.svg); filter: drop-shadow(2px 2px #00664825)}
	header .inner .rightBox .cartBtn:hover {background-image: url(/images/ico_cart_green.svg); filter: drop-shadow(2px 2px #00664825)}
	header .loginBtn:hover {box-shadow: 3px 3px #00664855;}
	footer .inner .contactBox a:hover {color: var(--mainColor); filter: drop-shadow(2px 2px #00664825)}
}
@media screen and (max-width: 1200px) {
	#wrap {font-size: 17px;}
}
@media screen and (max-width: 900px) {
	footer .inner {flex-direction: column; gap: 2em;}
	footer .inner .right {margin-left: auto; width: 40%;}
}
@media screen and (max-width: 768px) {
	#wrap {font-size: 16px;}
	#container {padding-top: calc(2.3em + 4.11em)}


	header {background: #F2F2F2;}
	header nav {position: fixed; text-transform: none; left: 0; top: 4.11em; transform: none; padding: 0 20px; background: #F2F2F2; width: 100%; height: 2.3em; border-top: 1px solid #DDDDDD; box-sizing: border-box; display: flex; align-items: center;;}
	/*header nav ul li:nth-child(n+3) {display: none;}*/
	header .inner .rightBox {gap: .8em;}
	header .inner .rightBox .searchBtn {background-image: url(/images/ico_search_mo.svg);}
	header .inner .rightBox .cartBtn {background-image: url(/images/ico_cart_mo.svg);}
	header .inner .rightBox .loginBtn {display: none;}
	header .sitemapBtn {display: block;}

}

@media screen and (max-width: 480px) {
	#wrap {font-size: 15px;}
	header .inner h1 {max-width: 174px; width: 40%;}
}

@media screen and (max-width: 360px) {
	#wrap {font-size: 14px;}
}