@charset "utf-8";
*{box-sizing:border-box;font:inherit;outline:none;letter-spacing:-1px;margin:0;padding:0;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;vertical-align:top;}
li{list-style:none;}
ol:after,ul:after,dl:after{content:"";display:block;clear:both;}
.material-icons{line-height:inherit!important;vertical-align:top;}
body{position:relative;min-height:100vh; font-size:14px;line-height:1.5;font-family:Montserrat, 'NotoSans KR', sans-serif, "Nanum Square";font-weight:400;margin:auto;padding:0;}
.auto{width:1280px;position:relative;margin:auto;}
.foot{display: none;}
ul,li,dl,dt,dd,p,h1,h2,h3,h4,h5 {margin:0;padding:0;list-style:none;}
table {border-spacing:0; border-collapse:collapse; table-layout:fixed; word-wrap:break-word;box-sizing:border-box;}
table,
table thead,
table tbody,
table tfoot,
table tr,
table th,
table td {border:0 none; margin:0; padding:0;}
table caption {visibility:hidden; overflow:hidden; height:0; width:0; margin:0; padding:0; line-height:0;}

#header{position:relative;z-index:9; background:url(/resource/images/header-bg.jpg)no-repeat center / cover;color:#fff; height:90px; display:flex; justify-content:center; align-items:center;}
#header .flex{display:flex; align-items:center; justify-content: space-between; width:1280px;}
#header .flex>div{align-items:center; font-size:45px;}
#header .logo>a{display:flex; align-items:center; justify-content:center; width:220px; height:60px; background:#fff; border-radius:30px;}
#header .header-r{position: relative;}
#header .header-r .cart,
#header .header-r .menu{margin-left: 10px;}

.search{margin-right: 30px; padding:0 30px; width: 580px; height: 60px; border:1px solid #ddd; background: #fff; border-radius:30px; display:flex; align-items:center; position: relative;}
.search>i{position:absolute; z-index: 999; cursor:pointer; right:25px; top:14px; color:#f67929; font-size:30px;}
.search input{border:0; font-size:18px; color:#090909; width:calc(100% - 40px); height: 34px; z-index: 999;}

.search-wrap{display:flex; align-items:center; margin-bottom: 20px;}
.search-wrap .auto{display:flex; align-items:center; justify-content:center;}
.search-wrap .code img{background:#f9711d; width: 50px;}

.search-wrap .over{position:absolute; display: none; top:0; left:0; width:100%; z-index: 1;}
.search-wrap .over .recent-wrap{padding:70px 30px 20px; color:#666; border:2px solid #f67929; background:#fff; border-radius: 30px;}
.search-wrap .over .recent-wrap .tit{color:#888; font-weight: 700; font-size:14px; padding-bottom:7px; border-bottom:1px solid #dedede;}
.search-wrap .over .recent-wrap ul{padding:10px 0; border-bottom: 1px solid #dedede;}
.search-wrap .over .recent-wrap ul li{padding:5px 0; color:#666; display:flex; justify-content: space-between; align-items: center; }
.search-wrap .over .recent-wrap ul li:hover p{color:#f67929;}
.search-wrap .over .recent-wrap ul li span{ font-weight: 300; letter-spacing: 0.05em; color:#888;}
.search-wrap .over .recent-wrap .no-recent{font-size:20px; color:#333; font-weight: 500; font-family: 'NotoSans KR', sans-serif; text-align: center; padding-top: 10px;}
.search-wrap .over .recent-wrap .no-recent span {color:#f67929;}

.search-wrap .over .recent-wrap .search-close{margin-left:auto; display: flex; align-items: center; justify-content: flex-end}
.search-wrap .over .recent-wrap .search-close p{font-size:14px; color:#666; font-weight: 400;}
.search-wrap .over .recent-wrap .search-close div{margin-left: 5px; position: relative; width:20px; height: 20px; background:#f67929; color:#fff; font-size:20px; display:flex; align-items: center; justify-content: center; border-radius: 5px;}

.search-wrap .select{margin-right: 10px; border-radius:30px; overflow:hidden; border:1px solid #d9d9d9;}
.search-wrap .select select{ height: 60px; padding:15px ; border:none; font-size:16px;}

.popMenu{position:absolute; top:50px; right:0; background:#fff; border:1px solid #f9711d; text-align: center; z-index:999;}
.popMenu>div{padding:10px 10px;}
.popMenu>div a{color:#333; font-size:12px; padding:3px 0; display: block; font-weight: 700;}  

.cover{display:none; width:100%; height: 100%; position: absolute; top:0; left:0;}

/*#footer.main{background-color:#212121;text-align:center;color:#666;padding:45px 0;}*/
#footer>.auto{display:flex;}
#footer>.auto.foot{display: none;}
#footer .footer-logo{margin-right: 60px; display:flex; align-items:center;}
#footer .footer-addr{text-align:left;}
#footer .footer-addr p{display:inline-block; font-size:17px; color:#999; font-weight:300; padding:0 20px; border-left:1px solid #3b3b3b;}
#footer .footer-addr p span{color:#fff;}
#footer .footer-addr p:nth-child(1){padding-left:60px;}
#footer .footer-addr p:nth-child(4){padding-left:60px;}
#footer .footer-addr p:nth-child(4){font-size:15px; padding-top:5px; display:block;}

/* 푸터 화이트톤 */
.new_footer{width:100%;padding-bottom:40px;background-color:#fff;font-size:.9rem;color:#666;box-sizing:border-box;text-align:center;border-top:5px solid #f1f1f1;}
.new_footer span{display:block;margin:0;padding:0 1%;}
.new_footer span:first-of-type{display:block;padding-top:5%;padding-bottom:5%;}
.new_footer span:last-of-type{display:block;padding-top:5%;font-size:.7rem;}

.breadCrumb{border-bottom:2px solid #d8d5d5;}
.breadCrumb ul{padding:20px 0; display:flex; align-items:center; margin:0 -10px; }
.breadCrumb ul li{padding:0 10px; font-size:20px; color:#333; display:flex; align-items:center;}
.breadCrumb ul li a{display:flex; align-items:center;}



.menuStyle{position:fixed; display:flex; z-index: 99; bottom:30px; left:50%; transform:translateX(-50%); }
.menuStyle .footer-menu{width:210px; height:70px; margin:0 5px; display:flex; align-items: center; justify-content: center; border-radius: 50px; box-shadow: 5px 5px 10px rgba(0,0,0,0.15);}
.menuStyle .footer-menu a{display: flex; height:100%; width:100%; align-items: center; justify-content: center; font-size:22px; color:#fff; font-family: 'NanumBarunGothic', sans-serif;}
.menuStyle .footer-menu a img{margin-right: 10px; width:34px;}

.menuStyle .footer-menu.order,
.menuStyle .footer-menu.menu{background:#6681eb;}
.menuStyle .footer-menu.trash,
.menuStyle .footer-menu.home,
.menuStyle .footer-menu.cart,
.menuStyle .footer-menu.search{background:#f67929;}

.footer-menu a{padding:0 15px;}
.footer-menu a img{width:30px;}
.footer-menu i{font-size:30px; color:#fff;}

.menuStyle .footer-menu.search i{font-size:35px; margin-right: 5px;}

.menuStyle.prd-view {display:none;}
.menuStyle.prd-view .footer-menu{width:auto; padding:0 50px;}
.menuStyle.prd-view .footer-menu.order{background:#6681eb; margin-left:0px; transform:translateX(-50%);}
.menuStyle.prd-view .footer-menu a{display: flex; align-items: center; justify-content: center; font-size:22px; color:#fff; font-family: 'NanumBarunGothic', sans-serif;}
.menuStyle.prd-view .footer-menu.order a img{margin-right: 10px;}
.menuStyle.prd-view .footer-menu.cart a img{width:40px;}
.menuStyle.prd-view .footer-menu.cart{margin-left:127px;}


#footer .footer-top{position:fixed; font-size:34px; z-index: 99; bottom:30px; left:50%; border:1px solid #cacaca; margin-left:570px; display:flex; align-items: center; justify-content: center; width:70px; height: 70px; background:#fff; border-radius: 50%; box-shadow: 5px 5px 10px rgba(0,0,0,0.15);}

.mobile-search-wrap{display:none; padding:0 20px; position:fixed; z-index: 9999; top:0; left:0; width:100%; height: 100%; background:#fff;}
.mobile-search-wrap>.tit{display:flex; padding-bottom: 10px; border-bottom:1px solid #d8d5d5; align-items: center;}
.mobile-search-wrap>.tit .prev{font-size:40px; color:#666;}
.mobile-search-wrap>.tit .prev i{position: relative; left:-10px; top:3px;}
.mobile-search-wrap>.tit .input {width: calc(100% - 100px); margin:0 20px 0 0; position: relative;}
.mobile-search-wrap>.tit .input input{width: 100%; padding-right:40px; font-size:15px; color:#666; padding-left:10px; height:40px; border:2px solid #f67929; border-radius: 10px;}
.mobile-search-wrap>.tit .input i{position: absolute; right:10px; top:7px; font-size:25px; color:#f67929}
.mobile-search-wrap>.tit .m-code img{width:40px;}

.mobile-search-wrap .recent-wrap {font-size:15px;}
.mobile-search-wrap .recent-wrap .tit{display:flex; padding:10px 0; justify-content: space-between;}
.mobile-search-wrap .recent-wrap .tit a{color:#999; text-decoration: underline;}
.mobile-search-wrap .recent-wrap ul li{padding:5px 0; display:flex; justify-content: space-between;}
.mobile-search-wrap .recent-wrap ul li span{font-family: 'NotoSans KR', sans-serif; letter-spacing: 0.05em;}


/* 팝업 */
.popup {position:fixed; top:50%; left: 50%; transform: translate(-50%,-50%);z-index:9999; box-shadow:0 0 20px rgba(0,0,0,.1);}
.popup .popupWrap {color:#333; position:relative; text-align: center; padding:15px;}
.popup .btnClose {display:block;position:absolute;top:5px;right:10px; font-size:30px;}
.popup .popupWrap .tit{font-size:30px; font-weight:700; margin-bottom: 20px;}
.popup .popupWrap .txt{font-size:15px;}
.popup .popupWrap .txt span{font-weight:700; color:#f9711d;}
.popup .popupWrap .btn{margin-top: 30px;}
.popup .popupWrap .btn>a{display: block; font-size:18px; color:#f9711d; font-weight:500; width: 100%; height:44px; border-radius:5px; background:#fff; border:1px solid #f9711d; display:flex; justify-content:center; align-items:center; margin-bottom: 5px;}
.popup .popupWrap .btn>a:last-child{margin-bottom: 0;}
.popup .popupWrap .btn>a.point{background:#f9711d; color:#fff;}

.popup1{background:#fff; width:340px;height:295px; border-top:2px solid #f9711d;}

/* 하단버튼 신규추가 */
.new_bu_s {
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	z-index:1;
	width:100%;
	padding:0 20px;
	max-width:1280px;
	margin:0 auto; 
	font-size:1.2rem;
	color:#666;
	box-sizing:border-box;}

.new_bu_s dl {
	display:flex;
	padding:3%;
	box-sizing:border-box;
	margin:0 auto;
	font-size:0;
	text-align:center;
	/*background-color: rgba( 255, 255, 255, 0.9 );*/
	background-color:#fafafa;
	border:1px solid #CCC;
	border-bottom:0;
	border-radius: 20px 20px 0px 0px;}
		
.new_bu_s dt {
	cursor:pointer;
	font-size:0.8rem;
	font-weight:bold;
	box-sizing:border-box;
	display:inline-block; 
	text-align:center;
	width:100%;
	border-right:1px solid #CCC;
	/*display:flex;
	align-items: center;
	justify-content: center;*/}

.new_bu_s dt:last-child {
	border-right:0;}	

.new_bu_s img {
	width:22px;
	display:block;
	margin:0 auto;
	padding-bottom:5px;}
	

.new_bu_s.final dl {
	color:#FFF;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradation_01 5s ease infinite;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	-webkit-animation: gradation_01 5s ease infinite; 
	-moz-animation: gradation_01 5s ease infinite; 
	-o-animation: gradation_01 5s ease infinite; 
	animation: gradation_01 5s ease infinite;}

	@-webkit-keyframes gradation_01 {0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } 
	@-moz-keyframes gradation_01 { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } 
	@-o-keyframes gradation_01 { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } 
	@keyframes gradation_01 { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }	


@media (min-width:768px) {

/* 하단버튼 신규추가 */
.new_bu_s dl {
	padding:20px 20px;	}

.new_bu_s dt {
	display:flex;
	justify-content: center;
    align-items: center;
	font-size:18px;}
	
.new_bu_s img {
	margin-right:10px;
	padding-bottom:0;}
}




@media (max-width:1280px) {

	.auto{width:100%; padding:0 20px;}
	#header{height:100px;}
	#header .flex{width:100%; padding:0 20px;}
	#header .header-l{width:calc(100% - 162px);}
	/* .search-wrap{width:calc(100% - 230px);} */
	/* .search{width:100%;} */
	.search-wrap .over{display:none;}
	.search-wrap .over .recent-wrap .no-recent{font-size:15px; margin-bottom: 20px;}

	#footer .footer-addr p:nth-child(3){padding-left:60px;}
    #footer .footer-top{left:auto; right:20px;}

  	.new_footer span { display:inline-block;}	
		
	.new_footer span:first-of-type { padding-top:3%; padding-bottom:3%;}  


}


@media (max-width:768px) {

.search{margin-right:10px; padding:0 20px;}
.search input{font-size:16px;}

    .breadCrumb ul{padding:15px 0;}
    .breadCrumb ul li{font-size:16px;}
    
	#header{height: 85px;}
	#header .logo>a{width:160px; height: 50px;}
	#header .logo>a img{width:80px;}
	#header .flex>div{font-size:35px;}
	#header .header-l{width:100%; flex-direction:column;}
	#header .header-r{display:block; position:absolute; top:17px; right:20px;}
	#header .header-r .cart{display:none;}
	#header .header-r .menu{width:30px; margin-left: 0;}
	.search-wrap{width:100%;}
	.search{margin-left: 0; width:100%; height: 50px;}
	.search>i{top:7px; right:13px}
	#header .search i{top:10px; right:20px;}
	.popMenu{top: 50px;}
    

	#footer{padding-top:0;}
	#footer>.auto{flex-direction:column;}
	#footer .footer-logo{margin-right: 0; flex-direction:column;}
	#footer .footer-addr{text-align:center; margin-top:30px;}
	#footer .footer-addr p{display:inline-block; font-size:15px; font-weight:300; padding:0 10px; border-left:0;}
	#footer .footer-addr p:nth-child(1),
	#footer .footer-addr p:nth-child(3),
	#footer .footer-addr p:nth-child(4){padding-left:0;}
	#footer .footer-addr p:nth-child(4){padding:30px 0 0 0;}
	#footer .footer-logo{padding-top:30px;}

	.new_footer span {display:inline-block;}


.menuStyle .footer-menu{height:50px; width:150px;}
.menuStyle .footer-menu a{font-size:16px;}
.menuStyle .footer-menu.cart a{font-size:13px;}

.menuStyle .footer-menu.order img{width:25px;}
.menuStyle .footer-menu.menu img{width:25px;}
.menuStyle .footer-menu.trash img{width:20px;}


.menuStyle.btn03 .footer-menu{width: 100px;}
.menuStyle.btn03 .footer-menu p{display: none;}
.menuStyle.btn03 .footer-menu{margin:0 2px;}
.menuStyle.btn03 .footer-menu a img,
.menuStyle .footer-menu.search i{margin-right: 0;}

.menuStyle .footer-menu.search i{font-size:30px;}

}


@media (min-width:1281px) ,(max-width:100%) {
	.new_footer span {
		display:inline-block;}	

	.new_footer span:first-of-type {
		padding-top:1%;	
		padding-bottom:1%;}				
}