@charset "utf-8";
/* 가운데 정렬 */
.container {position: relative; width: 1200px; margin: 0 auto;!important; }
/* 래이아웃 */
#header {position: relative; padding: 10px 0 0;}
#banner, #product, #corpor {position: relative; overflow: hidden;}
#product {position: relative; overflow: hidden;margin-bottom: 80px;}
#board { position: relative; overflow: hidden; margin-bottom: 80px;} 
#customer {position: relative; overflow: hidden; background: #fff; border-top: 1px solid #e7e7e7;}
#ect {position: relative; overflow: hidden; background: #FAFAFA; border-top: 1px solid #e7e7e7;}

/* 헤더 */
.header {height: 150px;}
.header h1 {text-align: center;  padding: 9px 29px; }
.header_logo {display: flex; justify-content: center; position:relative; align-items: center;}
.header_logo .header_icon {position:absolute; right:0;}
.header_logo h1 img {width:185px;}
.header .header_quick {padding-bottom: 56px;}
.header ul.quick {float: right; padding-top: 10px;}
.header ul li{ position: relative; display: inline-block; padding: 0 15px;}
.header ul li a {font-size: 14px; color: var(--text-gray);}
/* 모바일_헤더 */
.mobile_header{position: relative; display: none; height: 70px;}
.mobile_header .btn_mobile_menu{position: absolute; left: 26px; top: 27px; font-size: 0;}
.mobile_header .btn_mobile_menu:before{content: ''; display: block; width: 23px; height: 18px; background: url(../image/btn_mobile_menu.png) no-repeat;}
.mobile_header .logo{display: flex; height: 70px; align-items: center;}
.mobile_header .logo a{display: block; margin: 0 auto;}
.mobile_header .btn_cart{position: absolute; right: 25px; top: 25px; font-size: 0;}
.mobile_header .btn_cart{content: ''; display: block; width: 48px; height: 48px; background: url(../img_2025/main/cart.svg) no-repeat;}
/* 메뉴 */
.nav {height: 55px;}
.nav ul > li.gnb {float: left; width: 25%; position: relative;}
.nav ul > li.gnb:hover::before {content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: var(--color-primary) ; transition: all 0.5s; }
.nav ul > li.on::before {content: ' '; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background-color: var(--color-primary-100); }
.nav ul > li.gnb>  a {position: relative; display: block; text-align: center; height: 55px; line-height: 53px; box-sizing: border-box; font-size: 17px; color: var(--text-brown); font-weight: 900; /*border: 1px solid #e3e3e3;*/ transition: all 0.5s;}
.nav ul > li.gnb>  a:hover {color: var(--color-primary) }
/*.nav ul > li.gnb>  a:h over + .gnb_bg ,div {display: block;}*/
/*.nav ul > li.gnb:nth-child(1) >a {color: #66a343;}*/
.nav ul > li.gnb> .gnb_bg {position: absolute; display: block; width: 100%; height: 310px; background: #fff; overflow: hidden; z-index: 999; box-sizing: border-box;}
.nav ul > li.gnb.on> .gnb_bg {background: #FFFBFD;}
.nav ul > li.gnb> div > ul.sub_menu {padding-top: 12px; }
.nav ul > li.gnb> div > ul.sub_menu li a {display: block; text-align: center; height: 55px; line-height: 55px; box-sizing: border-box; font-size: 16px; font-weight:500; color:var(--text-gray);}
.nav ul > li.gnb> div > ul.sub_menu li a:hover { color:var(--color-primary); letter-spacing: 0.1px; transition: all 0.1s;}
/* 모바일_메뉴 */
.mobile_menu{position: fixed; top: 0; left: -1300px; z-index: 99; width: 400px; height: 100%; background: #fff;}
.mobile_menu::after{position: absolute; top: 0; right: -900px; content: ''; width: 900px; height: 100%; background: #000; opacity: .5;}
.mobile_menu .inner{height: 100%; overflow: overlay;}
.mobile_menu .m_close{position: absolute; top: 13px; right: -28px; z-index: 99; display: block; width: 20px; height: 20px; background: url(../img_2025/main/mobile/btn_mmenu_close.png) no-repeat; font-size: 0; background-size: contain;}
.mobile_menu .m_btn_login{display: block; height: 55px; padding-left: 25px; background: var(--color-primary-100); font-size: 16px; color: #fff; font-weight: 300; letter-spacing: -0.04em; line-height: 55px;}
.mobile_menu .m_btn_login::before{position: relative; top: 14px; content: ''; display: inline-block; width: 25px; height: 25px; background: url(../img_2025/main/mobile/m_login_ic.png) no-repeat; background-size: cover; vertical-align: top;}
.mobile_menu .btn_top{width: 100%;}
.mobile_menu .btn_top a{float: left; width: 50%; height: 55px; background: #f3f3f3; border: 1px solid #dbdbdb; box-sizing: border-box; line-height: 53px; font-size: 16px;}
.mobile_menu .btn_top a:nth-child(1)::before{position: relative; top: 14px; content: ''; display: inline-block; width: 25px; height: 25px; margin-left: 21%; margin-right: 4px; background: url(../img_2025/main/mobile/m_join_ic.png) no-repeat; background-size: cover; vertical-align: top;}
.mobile_menu .btn_top a:nth-child(2)::before{position: relative; top: 14px; content: ''; display: inline-block; width: 25px; height: 25px; margin-left: 21.5%; margin-right: 4px; background: url(../img_2025/main/mobile/m_lookup_ic.png) no-repeat; background-size: cover; vertical-align: top;}
.mobile_menu .mobile_nav{border-left: 1px solid #dbdbdb; border-right: 1px solid #dbdbdb;}
.mobile_menu .mobile_nav > ul > li{height: auto;}
.mobile_menu .mobile_nav ul > li > a{position: relative; display: block; padding-left: 30px; font-size: 15px; color: var(--text-brown); line-height: 53px;}
.mobile_menu .mobile_nav > ul > li > a::after{position: absolute; top: 20px; right: 24px; content: ''; display: inline-block; width: 17px; height: 17px; background: url(../img_2025/main/mobile/m_arrow1_ic.png) no-repeat; vertical-align: top;}
.mobile_menu .mobile_nav > ul > li > a.on{color: var(--color-primary);}
.mobile_menu .mobile_nav > ul > li > a.on::after{background: url(../img_2025/main/mobile/m_arrow2_ic.png) no-repeat;}
.mobile_menu .mobile_nav .depth2 > li > a{padding-left: 35px; background: #fff9fb; color:var(--text-gray); font-size:14px;}
.mobile_menu .mobile_nav .depth2 > li > a::after{position: absolute; top: 20px; right: 41px; content: ''; display: inline-block; width: 7px; height: 15px; background: url(../img_2025/main/mobile/m_arrow3_ic.png) no-repeat; vertical-align: top;}
.mobile_menu .mobile_nav > ul > li > a + ul.depth2 {border-top: 2px solid var(--color-primary);}
/* 푸터상단 */
.banner_bot {}
.banner_bot ul li {display: inline-block; padding: 32px 12px;}
.ect ul {margin: 0 auto; }
.ect ul>li {display: inline-block; position: relative; padding: 12px;}
/*.ect ul>li::before {content: ''; position: absolute; width: 1px; height: 15px; background: #66a343; display: inline-block; top: 15px; left: -1px;}*/
.ect ul>li a {color: #686868; font-size: 14px;}
.ect ul>li:nth-child(1)::before {width: 0;}
.ect ul>li:nth-child(6) a {color: #66a343;}
.ect ul>li:nth-child(7) a {color: #ad6b23;}
/* 푸터 */
#footer { background-color : #eeeeee;}
.footer {padding: 35px 29px;}
.footer em img{position: absolute; top: 40%; transform: translateY(-50%)}
.footer .foot_txt {padding: 0 234px; color: #686868;}
.footer .foot_txt p {font-size: 15px; line-height: 1.6;}
.footer .foot_txt p span { position: relative; padding-right: 14px;}
.footer .foot_txt p span::after { content: ''; position: absolute; width: 2px; height: 15px; background: #929292; top: 55%; right: 4px; transform: translateY(-50%);}
.footer .foot_txt p span:last-child::after {  display: none;}
.footer .foot_txt p.copy {margin-top: 13px; color: #929292;}
.footer .right {position: absolute; right: 0; top: 60px;}
.footer .right img {display: block;}
.footer .right img:nth-child(2) {display: block; padding : 32px 0 0 75px;}


@media (max-width:1200px) {
	/* 래이아웃 */
	#corpor{display: none;}
	#product{margin-bottom: 80px;}
	#header{padding: 0;}
	/* 헤더 */
	.header{display: none;}
	/* 모바일_헤더 */
	.mobile_header{display: block;}
	/* 메뉴 */ 
	.nav ul > li.gnb> .gnb_bg {display: none!important;}
	/* 가운데 정렬 */
	.container{width: 100%;}	
	/* 푸터 */
	.footer{padding: 25px;}
	.footer em img{display: none;}
	.footer .foot_txt{padding: 0; }
	.footer .foot_txt p{font-weight: 300!important;}
	.footer .foot_txt p span::before{background: #fff;}
	.footer .right{display: none;}
}

@media (max-width:700px) {
	/* 레이아웃 */
	#board {margin-bottom: 40px;}
	/* 모바일 헤더 */
	.mobile_header .logo a img {width:100px;}
	/* 메뉴 */
	.nav ul > li.gnb> a{font-size: 15px;}
	/* 푸터 */
	.footer .foot_txt{padding: 5px; }
	.footer .foot_txt p{font-size: 13px;}
}

@media (max-width:500px) {
	/* 메뉴 */
	.nav ul > li.gnb> a{font-size: 14px; border-right: 0; border-left: 0; }
		/* 푸터 */
	.footer .foot_txt p{font-size: 12px;}
}
@media (max-width:470px) {
	/* 푸터 */
	.footer .foot_txt p{font-size: 11px;}
}
@media (max-width:450px) {
	/* 모바일_메뉴 */
	.mobile_menu{width: 80%;}
	.mobile_menu .btn_top a{font-size: 15px!important;}
}

@media (max-width:400px) {
	/* 모바일 장바구니 */
	.mobile_header .btn_cart {/*background-size: 87%;*/ top: 14px;}
}
	
@media (max-width:350px) {	
	.nav ul > li.gnb> a{font-size: 13px;}
}