@charset "utf-8";

/* font */
@import url(font-awesome.min.css);




.searchMenu {
    width:100%;
    position: relative;
/*    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent;
    background: url("/resources/images/fresh2020/downArrow.png") no-repeat !important;
    background-size: contain;
    background-position: calc(100% - 10px) center;
    padding-right: 40px; */
}

/* .searchMenu::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none;
}*/
/* input hover시 datalist 기본 화살표 제거 */

/* datalist 기본 화살표 제거 */
.searchMenu::-ms-expand { display: none;}
.nav_link { margin: 0px 0px 25px 0px; padding: 40px 0px 0; border-bottom: 1px solid rgba(127, 118, 255, 0.2);}
.nav_link a {display: block; margin: 10px 0; color:#255187; text-align: center; word-break: break-all;}
.nav_link a i {margin: 0 10px;}
.nav_link a span { margin-left: 10px;word-break: break-all;}

/*결제하기*/
.pay_item { display: flex; flex-wrap: wrap; align-items:center; justify-content: center; gap: 0 1rem; margin-top: 10px; padding: .5rem; text-align: center; border-top: 1px solid rgba(127, 118, 255, 0.2); background: rgba(255,255,255,0.3); }
.pay_item p { margin-bottom: .5rem; padding-bottom: .3rem; width: 100%; color:#255187; border-bottom:1px solid rgba(127, 118, 255, 0.2); font-size: 14px;}
.pay_item span { color:#737374; cursor: pointer; }
.pay_item span:not(.bar):hover { color: #4f7bb0; }
.pay_item span.on { color: #766BFB; } /* 결제수단 클릭 시 색상 변경 */
.fa-wallet { position: relative; margin-right: 10px; cursor: pointer; font-size: 1rem;}
.fa-credit-card { position: relative; margin-right: 10px; cursor: pointer; font-size: 1rem; }
span.bar { width: 1px; height: 1rem; background: rgba(127, 118, 255, 0.2); }


.pay_item_sub1 { display: flex; flex-wrap: wrap; align-items:center; justify-content: center; gap: 0 1rem; margin-top: 10px; padding: .5rem; text-align: center; border-top: 1px solid rgba(127, 118, 255, 0.2); background: rgba(255,255,255,0.3); }
.pay_item_sub1 p { margin-bottom: .5rem; padding-bottom: .3rem; width: 100%; color:#737374; border-bottom:1px solid rgba(127, 118, 255, 0.2); font-size: 14px;}
.pay_item_sub1 span { color:#737374; cursor: pointer; }
.pay_item_sub1 span:not(.bar):hover { color: #4f7bb0; }
.pay_item_sub1 span.on { color: #766BFB; } /* 결제수단 클릭 시 색상 변경 */

.pay_item_sub2 { display: flex; flex-wrap: wrap; align-items:center; justify-content: center; gap: 0 1rem; margin-top: 10px; padding: .5rem; text-align: center; border-top: 1px solid rgba(127, 118, 255, 0.2); background: rgba(255,255,255,0.3); }
.pay_item_sub2 p { margin-bottom: .5rem; padding-bottom: .3rem; width: 100%; color:#737374; border-bottom:1px solid rgba(127, 118, 255, 0.2); font-size: 14px;}
.pay_item_sub2 span { color:#737374; cursor: pointer; }
.pay_item_sub2 span:not(.bar):hover { color: #4f7bb0; }
.pay_item_sub2 span.on { color: #766BFB; } /* 결제수단 클릭 시 색상 변경 */

/* 모바일 결제하기*/
.pay_item_2 { display: flex; flex-wrap: wrap; align-items:center; justify-content: center; gap: 0 1rem; padding: .5rem; text-align: center;  border-top: 1px solid rgba(127, 118, 255, 0.2); border-bottom: 1px solid rgba(127, 118, 255, 0.2); background: rgba(255,255,255,0.3); }
.pay_item_2 p { margin-bottom: .5rem; padding-bottom: .3rem; width: 100%; color:#737374; border-bottom:1px solid rgb(191 187 249 / 20%); font-size: 14px;}
.pay_item_2 span { color:#737374; cursor: pointer; }
.pay_item_2 span:not(.bar):hover { color: #4f7bb0; }
.pay_item_2 .fa-wallet, .pay_item_2 .fa-credit-card { position: relative; margin-right: 10px; cursor: pointer; font-size: 1rem; color:#766BFB; }
.pay_item_2 span.bar { width: 1px; height: 1rem; background: rgba(127, 118, 255, 0.2); }


#wrapper nav {float: left; background: #F7F8F9; width:250px; height: calc(100vh - 70px); z-index: 1001;margin: 0px;position: fixed; left:0px; top: 70px;box-sizing: border-box; overflow-y: auto; overflow-x: hidden;
box-shadow: 2px 2px 9px -1px rgb(129 141 183 / 45%); }



.nav_wrap .blog { border-top:1px solid rgba(127, 118, 255, 0.2); }
.nav_wrap .blog a , .shop a { display: block; padding: 14px; padding-left: 30px; font-size: 17px; color: #255187; }
.nav_wrap .blog  i , .shop i { margin-right: 0.8rem; }

.nav_wrap .shop { border-top:1px solid rgba(127, 118, 255, 0.2); }
.nav_wrap .shop a , .shop a { display: block; padding: 14px; font-size: 17px; color: #255187; text-align: center;}
.nav_wrap .shop  i , .shop i { margin-right: 0.8rem; }


/* 사이드 네비 숨김 버튼   */
#wrapper nav {transition: 0.4s ease-in-out;}
#wrapper .hidden_btn a {
	width: 100%; height: 40px; background-color: #255187;
	position: absolute; top: 0; right:0px;
	text-align:center; color: #fff; line-height: 35px;
	display:flex; justify-content: center; align-items: center;
}
#wrapper .hidden_btn a .menuFold_wrap{display:flex; align-items: center;}
#wrapper .hidden_btn a .menuFold_wrap.open{display: none;}
#wrapper .hidden_btn a .menuFold_wrap.fold {font-size: 18px; white-space: nowrap;}
#wrapper .hidden_btn a .menuFold_wrap.fold .menuFold {width: 20px; height: 20px; object-fit: contain; margin-right: 10px;}
#wrapper.active .hidden_btn a {
	top: 0; right: 0%; border-radius: 0; width: 100%;
}
#wrapper.active .hidden_btn a .menuFold_wrap.fold{display: none;}
#wrapper.active .hidden_btn a .menuFold_wrap.open{display: flex; align-items: center; white-space: nowrap;}
#wrapper.active .hidden_btn a .menuFold_wrap.open .menuOpen {width: 15px; height: 15px; object-fit: contain; margin-right: 5px;}
#wrapper.active nav {width: 100px; transition: 0.4s ease-in-out;}
#wrapper.active .nav_link a {margin-left: 0px;}
#wrapper.active .nav_link span { text-align: center; display:block; margin:0px !important; }
#wrapper.active .nav_link a i {display: block;}
#wrapper.active i {margin-left:10px}
#wrapper.active span.bar {background: transparent;}
#wrapper.active .nav_dapth1 a {font-size: 14px; padding:14px 0; text-align: center; }
#wrapper.active .nav_dapth1 a i {display:block; text-align: center; margin-right: 10px;}

/*2024-06-04 
수정자 - 룰루
.nav_dapth1 {max-height:660px; overflow-y:auto; overflow-x: hidden;}
*/
.nav_dapth1 {max-height: calc(100vh - 140px); overflow-y: auto; overflow-x: hidden;}
/* .nav_dapth1 {max-height:550px; overflow-y:auto; overflow-x: hidden;} */
.nav_dapth1 > li .on{color:#fff; font-weight: 600; background-color: #255187; }
.nav_dapth1 a {position: relative; font-size: 17px;padding: 16px;width: 100%;display: block; color: #555; font-weight:normal;  padding-left: 30px; }
.nav_dapth1 a::after{position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; opacity: 0;}
.nav_dapth1 a:hover::after {opacity: 1; background:linear-gradient(270deg, rgba(79, 123, 176, 0) 0%, rgba(79, 123, 176,.1) 25%, rgba(79, 123, 176,.2) 50%, rgba(79, 123, 176,.1) 75%, rgba(0,0,0,0) 100%);}
.nav_dapth1 a i { margin-right: 0.8rem; }

.nav_dapth1::-webkit-scrollbar-thumb {background-color :rgba(79, 123, 176, 0.6); background-clip: padding-box;border-radius: 10px;}
.nav_dapth1::-webkit-scrollbar-track {background-color: transparent; border-radius: 10px; }
.nav_dapth1::-webkit-scrollbar {width: 5px; background-color:#ddd;}

.nav_dapth2 a {color: #798590; font-size: 16px;padding: 10px 12px; padding-left: 24px;}
/* .nav_dapth2 a:hover{color:#000; transition: 0.3s ease-out;} */
.nav_dapth2 .on {color: #4f7bb0; font-weight: 600;}
/*2024-06-04 
수정자 - 룰루
.nav_dapth2 {background:rgba(255,255,255,0.7); max-height:300px;  overflow-y: auto;  border-top: 1px solid rgba(127, 118, 255, 0.2); border-bottom: 1px solid rgba(127, 118, 255, 0.2); padding: 10px 0; } 
*/
.nav_dapth2 {background:rgba(255,255,255,0.7); max-height:390px;  overflow-y: auto;  border-top: 1px solid rgba(127, 118, 255, 0.2); border-bottom: 1px solid rgba(127, 118, 255, 0.2); padding: 10px 0; }
.nav_dapth2::-webkit-scrollbar-thumb {background-color:rgba(37, 81, 135, 0.4); background-clip: padding-box;border-radius: 10px;}
.nav_dapth2::-webkit-scrollbar-track {background-color:#ddd;  border-radius: 10px;}
.nav_dapth2::-webkit-scrollbar {width: 5px;}




@media (min-width:1044px) and (max-height:500px){
	.nav_dapth1 {overflow-y: auto;}
	.nav_dapth1::-webkit-scrollbar {width: 8px;}
	.nav_dapth1::-webkit-scrollbar-thumb {background-color:rgba(127, 118, 255, 0.3); border-radius: 10px;background-clip: padding-box;border: 2px solid transparent;}
	.nav_dapth1::-webkit-scrollbar-track {border:1px solid rgba(127, 118, 255, 0.4); border-radius: 10px;}

}


@media (max-height:850px) {
	#wrapper nav {overflow-y : auto;}
	#wrapper nav::-webkit-scrollbar {width: 12px; }
	#wrapper nav::-webkit-scrollbar-thumb {background-color: #999; border-radius: 10px; background-clip: padding-box; border: 3px solid transparent;}
	#wrapper nav::-webkit-scrollbar-track { border-radius: 10px;  margin: 30px 0;}

}
@media (max-height:650px){
	 #wrapper .nav_dapth1 {max-height: 350px;}
	 #wrapper .nav_dapth2 {max-height: 180px;}

}



@media (max-width:1240px) {
  /*  #wrapper nav{margin: 10px 20px 20px;} */
}

@media (max-width:1044px) {

    .mobile_menu .nav_wrap{width: 100%;height: calc(100% - 113px); position: relative;}
    /* .mobile_menu .nav_wrap{width: 100%;height: calc(100% - 140px); position: relative;} */
    .mobile_menu .nav_dapth1{width: 100%;height: 100%; max-height:100%; display:flex;flex-direction:column; justify-content:space-between;  overflow-y: auto;}/* overflow-y: scroll;  */
    .mobile_menu .nav_dapth1 > li{width: 150px;height:100%; background-color: #f8f8f8;border-top: 1px solid #fff;}
    .mobile_menu .nav_dapth1 > li:first-child{border-top: 0;}
    .mobile_menu .nav_dapth1 > li a{display: flex;align-items: center;justify-content: center; width: 100%; height: 100%; padding: 0 10px; text-align: center; position: relative;}
    .nav_dapth1 > li .on{color:#000; font-weight: 600; background: linear-gradient(270deg, #8076FF 0%, rgba(121, 110, 252, 0.3) 0%, rgba(118, 107, 251, 0) 0%); }
    .nav_dapth1 a:hover, .nav_dapth1 .on{color:#766BFB;background:#fff;}
    .nav_dapth1 .on svg path:nth-child(2){fill:#333;}
    .nav_dapth2:nth-child(2) {display: block !important;}

/*     .nav_dapth1 a svg{position: absolute;top: 20%;text-align: center;} */
    .nav_dapth1 a svg { display: none;}


    .nav_dapth2 {position: absolute;width: calc(100% - 145px);right: 0;top: 0;max-height: 100%; border-top: none;}
    .nav_dapth2 li{border-bottom: 1px solid #eee;}
    .nav_dapth2 li:last-child{border-bottom: 0;}
    .nav_dapth2 a{background: #fff;padding: 18px 0;}




    .nav_dapth2::-webkit-scrollbar-thumb {background-color: #ccc; background-clip: padding-box; border: 1px solid transparent;}
    .nav_dapth2::-webkit-scrollbar-track {background-color: transparent; border-radius: 5px; border:none;}
    .nav_dapth1 a::after {transition: 0s ease-out;}
	.nav_dapth1 a:hover::after {display: none;}

    .nav_dapth1 a i { display: none; }

    /* 모바일 body 스크롤 막기 */
    .hidden {height:100%; min-height:100%; overflow:hidden !important; touch-action:none;}
}