.warp{max-width: 480px; margin: 0 auto; width: 100%; background: #fff; min-height: 100vh; position: relative}

.common_btn{background: var(--main-color); 
color:var(--mainfont-color);
height: 60px; line-height: 60px; display: flex; font-size: 16px;
border-radius: 10px; width: 100%; text-align: center; font-weight: 600;
    justify-content: center;
    align-items: center; transition-duration: .5s;}

.common_btn.disabled{background: #ddd;
    pointer-events: none;}




.point_top{border-radius: 30px;
border: 1px solid #E9C123;
background: #FFF; padding: 8px 15px; display: inline-flex; font-size: 12px; gap:5px;
    justify-content: flex-end;
    align-items: center;}

input[type="checkbox"].custom_checkbox{display: none}
input[type="checkbox"].custom_checkbox + label{display: flex; font-size: 14px; gap:10px; cursor: pointer; font-weight: 600}
input[type="checkbox"].custom_checkbox + label:before{content: '';
width: 28px; height: 28px; border-radius: 28px; background:#fff url(../images/common/ckoff.png); background-position: center; background-repeat: no-repeat;
border:1px solid var(--border-color)}

input[type="checkbox"].custom_checkbox:checked + label:before{content: '';
width: 28px; height: 28px; border-radius: 28px; background:var(--main-color) url(../images/common/ckonb.png); background-position: center; background-repeat: no-repeat;
border:1px solid var(--main-color)}

input[type="radio"].custom_radio{display: none}
input[type="radio"].custom_radio + label{display: flex; font-size: 14px; gap:10px; cursor: pointer;
    align-items: center;
    justify-content: flex-start; font-weight: 600; flex:1}
input[type="radio"].custom_radio + label:before{content: '';
width: 28px; height: 28px; border-radius: 28px; background: #fff; border: 7px solid #DDDDDD; display: inline-block }

input[type="radio"].custom_radio:checked + label:before{content: '';
width: 28px; height: 28px; border-radius: 28px; border-color: var(--main-color); }


.emtline{height: 1px; background: var(--border-color); width: 100%}


.footer{background: #F5F5F5; padding: 30px 0 30px 0}
.footer .foot_top{display: flex;     justify-content: space-between;
    align-items: center;}

.footer .foot_top h3{font-size: 12px;}

.foot_link{display: flex; gap:5px;    justify-content: flex-end;
    align-items: center;}
.foot_link li{display: flex; gap:5px ;    justify-content: flex-end;
    align-items: center;}
.foot_link li *{font-size: 12px}
.foot_link li:before{
	content:'';
	width: 2px; height: 2px; background: #d9d9d9; border-radius: 2px;}

.foot_copy{margin-top: 30px; padding-top: 30px; border-top: 1px solid #ddd}
.foot_copy p{font-size: 12px;}




.foot_nav{display: flex; padding: 11px 0;  z-index: 3;
position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #FFF;
box-shadow: -2px -2px 25px 0px rgba(0, 0, 0, 0.10);
align-items: flex-end;}
.foot_nav a{flex:1; text-align: center; color: #999}
.foot_nav a img{max-width: 52px;}
.foot_nav a p{font-size: 12px}

.foot_nav a.on p{color: #111; font-weight: bold}

.foot_nav a.on img{
	animation: floatnav 2s ease-in-out infinite;
}

.box_icon_in{
    border-radius: 50px;
background: rgba(250, 225, 0, 0.10);
width: 60px;
height: 60px;;
display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.plus_point{position: absolute; left: 0; width: 100%; z-index: 2; height: 100%;}
.plus_point span{position: absolute; width: 10px; height: 10px; left: 50%; top: 50%;}
.plus_point span i{width: 100%; height: 2px; background: #fff; position: absolute; left: 0; top: 50%; margin-top: -1px;
filter: blur(1px); opacity: 0;}
.plus_point span i + i{width: 2px; height: 100%; top: 0; margin: 0; left: 50%; margin-left: -1px;;}

.plus_point span.pl01{left: 60%; top: 50%;}
.plus_point span.pl02{left: 25%; top: 30%;}
.plus_point span.pl03{left: 30%; top: 60%;}

.foot_nav a.on .plus_point{
    animation: floatnav 2s ease-in-out infinite;
}


.foot_nav a.on .plus_point span i{opacity: 1;}

.foot_nav a.on .plus_point span.pl01{
     animation: floatnavblur 2s ease-in-out infinite;
}
.foot_nav a.on .plus_point span.pl02{
     animation: floatnavblur 2.5s ease-in-out infinite;
}
.foot_nav a.on .plus_point span.pl03{
     animation: floatnavblur 1.5s ease-in-out infinite;
}


@keyframes floatnav {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(4px); }
  100% { transform: translateY(0); }
}

@keyframes floatnavblur {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}





/*indexpop*/

.popup-layer {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-content {
  text-align: center;
  max-width: 340px;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.popup-content .pop_slide{border-radius: 10px; overflow: hidden}
.popup-content .pop_slide img{display: block; max-width: 100%}

.popup-content .closePopup{position: absolute; right: 15px; top: 15px; z-index: 2}
.popup-content .pop_contro{margin-top: 15px; display: flex; gap:10px;
justify-content: center;
align-items: center;}
.popup-content .pop_contro > div{
	border-radius: 24px;
border: 0.5px solid rgba(0, 0, 0, 0.20);
background: rgba(0, 0, 0, 0.70);
display: inline-flex;
padding: 9px 16px;
justify-content: center;
align-items: center;
gap: 3px;
}

.swiper-counter{ font-size: 12px; color: #fff;  }
#pop_counter{font-size: 12px; color: #fff; font-style: normal; }

.noday input[type="checkbox"] + label::before {
    width: 12px;
    height: 12px;
    border: 1px solid #fff;
    display: block;
    content: '';
}

.noday input[type="checkbox"]:checked + label::before {
    width: 12px;
    height: 12px;
    border: 1px solid #fff;
    display: block;
    background: var(--main-color);
}

.noday input[type="checkbox"] + label{color: #fff; cursor: pointer; font-size: 12px}

/*pop*/

.pop_title{display: flex;    justify-content: space-between;
    align-items: flex-start;}
.pop_title h2{font-size: 16px; color: var(--mainfont-color)}



/* 
.pop-layer {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5)
}

.pop-layer .pop-container {
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  border-radius: 10px;
  padding: 30px 25px;
  width: 90%;
  max-height: 80%;
  transform: translate(-50%, -50%);
  max-width: 350px;
}


.pop_in{margin-top: 30px; overflow-y: auto; max-height: 60vh}
.pop_in .agree_txt p{font-size: 14px; word-break: break-all; }
 */

/*sub_header*/
.sub_header{height: 70px; padding: 0 30px; display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    left: 0;
    width: 100%; background: #fff; z-index: 3}
.sub_header .left{width: 20%}
.sub_header .right{width: 20% ; display: flex; justify-content: flex-end;
    align-items: center;}
.sub_header .page_title{width: 60%; text-align: center}
.sub_header .page_title h2{color: var(--mainfont-color); font-size: 16px}


/*sub_common*/
.content{padding: 30px 0; min-height: calc(100vh - 200px);}

.sub_header + .content{padding: 30px 0; min-height: calc(100vh - 70px - 120px);}

.content h4{font-size: 14px; color: #333; font-weight: 500}
.content h4 .color{color: var(--point-color)}

.foot_btn {
    padding: 30px 15px;
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
}

.foot_btn .flex{display: flex; gap:10px}

.foot_btn .flex .common_btn{flex:1}
.foot_btn .flex .common_btn.sub{background: #fff; color: var(--mainfont-color);
border: 1px solid var(--border-color)}


.foot_btn.not_sticky{
	position: relative;
	background: #fff;
	border-top: 1px solid var(--border-color)
}

.foot_btn .foot_price{margin-bottom: 20px}
.foot_btn .foot_price li{display: flex; font-size: 14px; font-weight: 600;
    justify-content: space-between;}
.foot_btn .foot_price li .color{color: var(--point-color)}




.list_top{display: flex; justify-content: space-between;
    align-items: center;  }
.list_top .total{font-size: 14px;}
.list_top .total b{color: var(--point-color)}


.list_top .right{display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end;
    align-items: center; width: 60%;  }

.list_top .search_pop_btn{width: 35px; height: 35px; border-radius: 5px; display: flex; justify-content: center;
    align-items: center; border: 1px solid var(--border-color);      aspect-ratio: 1;}

.list_top .right p{font-size: 14px; color: #999}


.list_top select {
    height: 35px;
    border-radius: 5px;
    border: 1px solid #E0E0E0;
    padding: 0 15px;
    font-size: 12px;
    width: 100%;
    line-height: 33px;
    width: 100px;
}


.search_pop{position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; padding: 30px; display: none}
.search_pop.open{display: block}

.search_pop .bg {  background: rgba(0,0,0,0.8); position: fixed; top:0; left: 0; width: 100%; height: 100%;  }

.search_pop .search_pop_close{position: absolute; right: 30px; top: 30px;}
.search_pop .search_pop_input{display: flex;  border-bottom: 2px solid #fff; padding: 0 5px; max-width: 330px; margin: 7rem auto 0;
position: relative; }
.search_pop .search_pop_input input{border: 0; border-radius: 0;
color: #fff;
    background: transparent;
    font-size: 16px;
    padding: 0px;}

.search_pop .search_pop_input input::placeholder{color: #fff}

/*member*/

.agree_are{margin-top: 20px}

.all_ck_are .hint{padding-left: 38px; margin-top: 5px}
.all_ck_are .hint p{font-size: 12px; color: #333}

.all_ck_are{padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color)}

.agree_list li{display: flex;
align-items: center;
    justify-content: space-between;}
.agree_list li + li{margin-top: 20px}    
.agree_list li .more_agree{color: var(--subfont-color); font-size: 12px; text-decoration-line: underline;}

.login{padding: 30px 0}
.login .login_title img{display: block; margin: 0 auto 30px; max-width: 100%}
.login .login_title h2{color: var(--mainfont-color); font-weight: 800; font-size: 18px; line-height: 140%}
.login .login_title{margin-bottom: 35px}

.login_form{}
.login_form li + li{margin-top: 20px}

.login_form li p.point{color: #FF0F06; font-size: 12px; margin-top: 5px}
.login_form li p.point.green{color: #00671B}

.input_custom{position: relative; padding-top: 12px}
.input_custom label{font-size: 12px; padding: 4px 8px; position: absolute; left: 12px; top: 0px; background: #fff}


.login .common_btn{margin-top: 20px; border: 0; }

.input_custom .eyes {
  position: absolute;
  bottom: 10px;
  right: 20px;
  margin: auto 2px;
  height: 30px;
  font-size: 22px;
  cursor: pointer;
}

.input_custom .eyes *:before{color: #999}

.login_other{display: flex; margin-top: 30px;justify-content: center;
    align-items: center; gap:24px}
.login_other a{display: inline-flex;justify-content: center;
    align-items: center; gap:5px; font-size: 14px; color: var(--midfont-color)}
.login_other a img{max-width: 20px}

.sns_login{display: flex; margin-top: 30px;justify-content: center;
    align-items: center; gap:10px}
.sns_login img{max-width: 60px}



.flex_input{display: flex; gap:10px}
.flex_input > div{flex:1}



.success{text-align: center}
.success img{max-width: 100%; display: block; margin: 0 auto 30px}
.success h2{font-size: 18px; font-weight: 800; color: var(--mainfont-color)}
.success p{margin-top: 20px; font-size: 14px; color: #333}



/*main*/

.main_content{padding:0 0 30px 0; min-height: calc(100vh - 99px);}

.main_visual_are{position: relative; margin-bottom: 50px; overflow: hidden}
.main_visual_are img{width: 100%; display: block}

.main_visual_are .swiper-pagination-bullet-active{
	background:#1b1b1b
}

.text_slide_are{position: absolute; padding: 0 30px; left: 0; bottom: 30px; z-index: 2; width: 100%;}
.text_slide_are .main_text_slide{background: #1b1b1b; border-radius: 50px;  overflow: hidden;
 width: 100%; }

.text_slide_are .main_text_slide .swiper-wrapper{display: flex; }

.text_slide_are .main_text_slide .swiper-slide{color: #F5D938;
white-space: nowrap;
  font-size: 16px; padding: 15px 10px; display: inline-block;  text-align: center;
  width: max-content;}


* + .main_title{margin-top: 50px}

.main_title{display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 20px}
.main_title h2{display: flex; gap:5px; font-size: 20px;
justify-content: flex-start;
    align-items: center;}







.live_chat {
  background-color: var(--main-color);
   position: relative;
   z-index: 2;
   padding: 10px 15px; border-radius: 50px;
   animation: floatUpDown 2s ease-in-out infinite;
}


.live_chat img{position: absolute; right: -30px; top: -40px}
.live_chat::after {
  content: "";
  position: absolute;
  bottom: -14px;
  right: 0px;
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-left-color:  var(--main-color);
  z-index: -1;
}

.live_chat p{font-size: 12px;}
.live_chat p b{font-size: 14px}


@keyframes floatUpDown {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}



.live_slide {
  width: 100%;
  height: 180px;
  position: relative;
  overflow: hidden;
  padding: 0 30px;
  margin-bottom: 50px;
  pointer-events: none;
}
 
/* 슬라이드가 한장씩 넘어가면서 살짝 멈추는 현상 방지 */
.live_slide .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important;


}
 
.live_slide .swiper-slide {

  
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  justify-content: flex-end;
  transition-duration:.5s
}
 
.live_slide .swiper-slide .box{
	  display: flex;
	  padding: 10px 15px;
	  gap:18px;
	      justify-content: flex-start;
    align-items: center;
      height: 80px;


 border-radius: 50px 50px 0px 50px;
background: rgba(246, 253, 191, 0.15);
width: 90%;

/* drop2 */
box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, 0.05);
}


.live_slide .swiper-slide .box .thum{width: 50px; height: 50px; overflow: hidden; border-radius: 50px}
.live_slide .swiper-slide .box .thum img{
	width: 100%;
	height: 100%;
	display: block;
	    object-fit: cover;
    aspect-ratio: 1;
}

.live_slide .swiper-slide .box .txt{flex:1}
.live_slide .swiper-slide .box .txt h4{font-size: 14px;}
.live_slide .swiper-slide .box .txt h4 b{color: #C52A2A;}
.live_slide .swiper-slide .box .txt .ptice_txt{display: flex;     justify-content: space-between;}
.live_slide .swiper-slide .box .txt .ptice_txt p{font-size: 12px;}
.live_slide .swiper-slide .box .txt .ptice_txt p.price{font-weight: bold; }
.live_slide .swiper-slide .box .txt .ptice_txt p.price b{color: #C52A2A;}

.live_slide .swiper-slide.left{
	  justify-content: flex-start
}
/*
.live_slide .swiper-slide:nth-child(2n) .box{
	flex-direction: row-reverse;
	border-radius: 50px 50px 50px 0;

}*/


.tab_slide_are{overflow: hidden; padding-left: 15px; padding-right: 150px}


.more_btn{ padding: 10px 15px; border-radius: 50px;
background: var(--main-color);  gap:10px; display: inline-flex;
font-size: 12px; font-weight: bold}

.new_slide_are{padding-left: 30px; overflow: hidden}

.new_slide{overflow: hidden; padding-right: 30px}
.new_slide .thum{border-radius: 5px; overflow: hidden; display: block; position: relative}
.new_slide .thum img{
	width: 100%;
	height: 100%;
	display: block;
	    object-fit: cover;
    aspect-ratio: 1;
}

.new_slide .thum img{max-width: 205px;}

.new_slide .txt{margin-top: 15px; display: block}
.new_slide .txt p{font-size: 12px}
.new_slide .txt p.price{font-size: 14px; font-weight: bold}


.new_slide .thum .rank_icon{position: absolute; right: 15px; top: 15px}
.new_slide .thum .rank_icon img{
	      object-fit: contain;
    aspect-ratio: auto;
}


.tab {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.tab_slide_are .tab{overflow-x: visible}

.tab_slide_are .swiper-slide{width: max-content}

.tab__item {
  padding: 8px 13px;
border: 1px solid rgba(0, 0, 0, 0.20);
background: #FFF;
border-radius: 50px;
flex: 0 0 auto; cursor: pointer; 
}

.tab__item a, .tab__item > span {display: flex; gap:5px; justify-content: center; align-items: center; }

.tab__item img{ width: 18px;  }
.tab__item span{ color: #999; font-size: 12px;  }


.tab__item.active {
  border: 1px solid var(--main-color);
  background-color: var(--main-color);
}

.tab__item.active a{color: var(--mainfont-color)}

.tab__content-wrapper {
	margin-top: 20px
}
.tab__content {
  display: none;
}
.tab__content.active {
  display: block;
}




.product_list3{display: flex; justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap:30px 10px;}

.product_list3 li{width: calc(33.33% - 6.66px)}

.product_list3 li .thum{display: block; border-radius: 5px; overflow: hidden;
border: 1px solid #ddd}
.product_list3 li .thum img{
	width: 100%;
	height: 100%;
	display: block;
	    object-fit: cover;
    aspect-ratio: 1;
}

.product_list3 li .txt{display: block; margin-top: 10px}
.product_list3 li .txt .p_name{
	display:block; 
	display: -webkit-box;
  -webkit-line-clamp: 1;     /* 줄 수 지정 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  font-size: 12px
}

.product_list3 li .txt .price{font-size: 12px; font-weight: bold}



.product_list2{display: flex; justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap:30px 10px;}

.product_list2 li{width: calc(50% - 5px)}

.product_list2 li .thum{display: block; border-radius: 5px; overflow: hidden;
border: 1px solid #ddd}
.product_list2 li .thum img{
	width: 100%;
	height: 100%;
	display: block;
	    object-fit: cover;
    aspect-ratio: 1;
}

.product_list2 li .txt{display: block; margin-top: 15px; position: relative}
.product_list2 li .txt .p_name{
	display:block; 
	display: -webkit-box;
  -webkit-line-clamp: 1;     /* 줄 수 지정 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  font-size: 12px
}

.product_list2 li .txt .cart{position: absolute; right: 0; top: 0}

.product_list2 li .txt:has(.cart) .p_name {
  padding-right: 20px
}

.product_list2 li .txt .price{font-size: 12px; display: flex; gap:5px; margin-top: 3px;
justify-content: flex-start;
    align-items: center;}
.product_list2 li .txt .price span{text-decoration: line-through; color: #666}
.product_list2 li .txt .price b{font-size: 14px; color: #1b1b1b}


.new_banner img{max-width: 100%}


.tab_top{display: flex;}
.tab_top a, .tab_top span {flex:1; text-align: center; display: flex; height: 50px; color: #D3D3D3; font-size: 14px; font-weight: 600 ;
justify-content: center; 
    align-items: center; position: relative; border-bottom: 1px solid var(--border-color); cursor: pointer; }

.tab_top a.on, .tab_top span.on{color: var(--mainfont-color)}
.tab_top a.on:after, .tab_top span.on:after {content: ''; position: absolute; left: 0; bottom: 0; z-index: 2; height: 2px; width: 100%; background: var(--main-color); }



/*ranktop*/


.rank_top{background: #f9f9f9; padding: 30px 0}
.rank_top h2{padding: 0 30px; margin-bottom: 20px;}
.rank_top h2 b{color: var(--main-color)}



.rank_list{}
.rank_list li{}
.rank_list li > a{border-radius: 10px;
border: 1px solid rgba(34, 34, 34, 0.10);
background: #FFF; padding: 20px; display: flex; gap:20px;    justify-content: flex-start;
    align-items: center; position: relative}
.rank_list li .border{border-radius: 10px;
border: 1px solid rgba(34, 34, 34, 0.10);
background: #FFF; padding: 20px; display: flex; gap:20px;    justify-content: flex-start;
    align-items: center; position: relative}

.rank_list li .ck_box{position: absolute; left: 15px; top: 15px; z-index: 2}

.rank_list li .thum{width: 80px;
height: 80px;
border-radius: 5px;overflow: hidden; position: relative}

.tagmini{background: var(--main-color); font-size: 12px; padding: 2px 5px; border-radius: 3px;
position: absolute; right: 5px; bottom: 5px}

.tagmini.black{background: #333; color: #fff}

.rank_list li .thum img{
	width: 100%;
	height: 100%;
	display: block;
	    object-fit: cover;
    aspect-ratio: 1;
}



.refund_btn {
    padding: 5px 15px;
    border-radius: 5px;
    background: #fff;
    gap: 10px;
    display: inline-flex;
    border: 1px solid var(--border-color);
    font-size: 12px;
    color: #333;
    font-weight: 500;
    position: absolute; right: 15px; bottom: 15px
}

.lock_btn{position: absolute}
.lock_btn i{width: 16px; height: 21px; background:#fff url(../images/common/lock_open.svg); 
background-size: 16px auto; background-repeat: no-repeat; display: block}

.lock_btn.lock_on i{background-image: url(../images/common/lock_close.svg)}

.rank_list li .lock_btn{right: 15px; top: 15px;}



.rank_list li .txt{position: relative; flex:1}
.rank_list li .txt p{font-size: 12px;}
.rank_list li .txt p.user_name{font-weight: bold; margin-bottom: 10px}

.rank_list li .txt .time{position: absolute; right: 0; top: 0; font-size: 12px; color: #999}

.rank_list li .txt h4{font-size: 14px; color: #1b1b1b; font-weight: bold}

.rank_list li + li{margin-top: 20px;}
.rank_list li.point a{border-color: var(--main-color)}


/*event*/


.event_list{}
.event_list li{border: 1px solid rgba(34, 34, 34, 0.10);
border-radius: 10px; overflow: hidden}

.event_list li + li{margin-top: 20px;}

.event_list li a, .event_list li > span {display: block; position: relative}
.event_list li a img, .event_list li span img{display: block; max-width: 100%; width: 100%}

.event_list li .close_event{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7);
display: flex; text-align: center;
justify-content: center;
    align-items: center;}

.event_list li .close_event span{color: #fff; font-size: 14px; font-weight: bold}


/*week_rank*/

.week_banner{border-radius: 10px; overflow: hidden;}
.week_banner img{display: block; max-width: 100%;}

.title_round_p{ padding: 10px 15px; border-radius: 50px;
background: #fff;  gap:10px; display: inline-flex; border: 1px solid var(--border-color)}

.title_round_p p, .title_round_p a {font-size: 12px; color: #333; font-weight: bold}

.title_round_p i { font-style: normal; font-size: 9px; margin-left: 3px;  }

.top_3{display: flex; gap:24px; justify-content: center;
    align-items: flex-end; margin-bottom: 30px;}

.top_3 > div{flex:1; text-align: center}

.top_3 .thum{width: 80px; height: 80px; position: relative; margin: 0 auto 15px}

.top_3 .thum .medal{position: absolute; right: -5px; top: -5px}
.top_3 .thum .medal img{max-width: 40px}

.top_3 .thum .user_img{width: 80px; height: 80px; border-radius: 80px; border: 3px solid #9D9D9C; display: block; overflow: hidden; }

.top_3 .mid .thum {width: 100px; height: 100px; }
.top_3 .mid .thum .user_img{width: 100px; height: 100px; border-color: #FFC130}
.top_3 .right .thum .user_img{border-color: #D36357}

.top_3 .mid .thum .medal img{max-width: 50px}

.top_3 p{font-size: 12px; font-weight: bold}
.top_3 p.point{margin-top: 5px; font-size: 14px; color: var(--point-color)}


.top_3 .thum .user_img img{
	width: 100%;
	height: 100%;
	display: block;
	    object-fit: cover;
    aspect-ratio: 1;
}

.my_rank{
	border-radius: 5px;
background: var(--main-color);
display: flex;
padding: 16px 25px 16px 25px;
justify-content: space-between;
    align-items: center;
}

.my_rank p{font-size: 14px; font-weight: bold}

.rank_list_week{}
.rank_list_week li{padding: 20px 10px; border-bottom: 1px solid var(--border-color);
display: flex; gap:20px;    align-items: center;
    justify-content: space-between;}

.rank_list_week li .left{display: flex; gap:20px; align-items: center;}
.rank_list_week li p{font-size: 14px; color: #666; font-weight: 600}

.rank_list_week li .left .user_info{display: flex; gap:20px; align-items: center;}
.rank_list_week li .left .user_img{width: 40px; height: 40px; border: 1px solid var(--border-color);
border-radius: 40px; overflow: hidden; }

.rank_list_week li .left .user_img img{
	width: 100%;
	height: 100%;
	display: block;
	    object-fit: cover;
    aspect-ratio: 1;
}

.rank_list_week li .num{width: 28px; text-align: center}
.rank_list_week li .num img{max-width: 100%}

.rank_list_week li .point_info p{color: var(--point-color)}


/*box*/

.get_box_top_s + .get_box_top_s{margin-top: 20px}
.get_box_top_s{padding: 0 30px}

.get_box_top{padding: 30px 0; background: #f9f9f9; overflow: hidden}
.get_box_top img{
	width: 100%;
	height: 100%;
	display: block;
	    object-fit: cover;
    aspect-ratio: 1;
    border-radius: 5px;
border: 1px solid rgba(221, 221, 221, 0.50);
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.05);
max-width: 125px;
}


.box_input_title{display: flex; justify-content: space-between;
    align-items: center;margin-bottom: 5px}
.box_input_title p{font-size: 14px; font-weight: 600 }

.box_form .counter-box{display: flex; border-radius: 5px; border: 1px solid  var(--border-color); text-align: center; padding: 0 0px   }
.box_form .counter-box button{font-size: 14px; color: #666; width: 39px;  }
.box_form .counter-box input{border: 0; text-align: center; max-width: 60px; padding: 0 5px; }

.box_form li + li{margin-top: 20px}

.ck_custom{display: flex; gap:10px}
.ck_custom input[type="checkbox"],
.ck_custom input[type="radio"]{display: none}
.ck_custom input + label{flex:1; text-align: center; display: flex; font-size: 14px; color: #666; gap:5px; justify-content: center;
    align-items: center;
    border-radius: 5px;
border: 1px solid rgba(34, 34, 34, 0.10);
background: #F5F5F5;
height: 50px; cursor: pointer
    }
   
.ck_custom input:checked + label{
    background: var(--main-color);
    border-color: var(--main-color);
}    
    
.ck_custom input + label span{color: #666}
.ck_custom input + label b{color: #1b1b1b}

/* 
.ck_custom input:checked + label{background: var(--main-color)}
 */
.ck_custom input[type="checkbox"] + label::before{display: none}

.input_flex{display: flex; gap:10px}

.input_flex + input{margin-top: 10px}

.input_flex input{flex:1}
.input_flex .selecT{ flex: 1;  }


.input_btn{font-size: 14px; font-weight: bold; padding: 0 15px; min-width: 80px; display: flex;justify-content: center;
    align-items: center; border: 1px solid var(--border-color); border-radius: 5px;
transition-duration: .5s;}

.input_btn.black{background: #333; color: #fff}
.input_btn.point{background: var(--main-color); color: var(--mainfont-color)}






.input_note{margin-top: 5px; font-size: 12px; font-weight: 600}
.input_note b{color: var(--point-color)}


.box_form .file_list{ margin-top: 10px}
.box_form .file_list p{display: flex;     justify-content: space-between;
    align-items: center;}
.box_form .file_list p span{font-size: 14px; color: #666}


.box_form  .tab {
  display: flex;
  align-items: center;
  gap:10px;
  flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: hidden;
    margin-bottom: 20px
}
.box_form .tab__item {
  padding: 0px 15px;
border: 1px solid rgba(0, 0, 0, 0.20);
background: #FFF;
border-radius: 5px;
flex: 1;
}

.box_form .tab__item a{display: flex; color: #999; font-size: 14px;gap:2px;
    justify-content: center;
    align-items: center; height: 50px;}

.box_form .tab__item.active {
  border: 1px solid #1b1b1b;
  background-color: #1b1b1b;
}

.box_form .tab__item.active a span{color: #fff}


.radio_custom{display: flex; }
.radio_custom.pay_select{flex-direction: column; gap:15px}



.detail_thum{overflow: hidden; border: 1px solid rgba(221, 221, 221, 0.50); border-radius: 5px


}
.detail_thum img{
	width: 100%;
	height: 100%;
	display: block;
	    object-fit: cover;
    aspect-ratio: 1;}

.detail_info{margin-top: 30px; position: relative}
.detail_info .product_name{font-size: 16px; font-weight: bold}
.detail_info .cart{position: absolute; right: 0; top: 5px}
.detail_info .detail_price{margin-top: 30px}

.detail_info .detail_price .pr1{color: #666;
font-size: 12px;
text-decoration-line: line-through;}
.detail_info .detail_price .pr2{display: flex; margin-top: 5px;justify-content: space-between;
    align-items: center;}

.detail_info .detail_price .pr2 h3{font-size: 16px;}
.detail_info .detail_price .pr2 h3 .sale{color: var(--point-color)}

.del_gauge {
    padding: 10px 15px;
    border-radius: 50px;
    background: #fff;
    gap: 10px;
    display: inline-flex;
    border: 1px solid var(--border-color);
}



.del_gauge p {
    font-size: 12px;
    color: #333;
    font-weight: 500;
}
.del_gauge p b{color: var(--point-color)}


.detail_img{margin-top: 30px}
.detail_img img{display: block; max-width: 100%; margin: 0 auto}


.cart_list{border-top: 1px solid var(--border-color)}
.cart_list li{display: flex;
justify-content: flex-start;
    align-items: flex-start; gap:18px;
    border-bottom: 1px solid var(--border-color); padding:15px 10px; position: relative}
.cart_list li .thum{border-radius: 5px; overflow: hidden; display: block; position: relative; width: 80px}
.cart_list li .thum img{
	width: 100%;
	height: 100%;
	display: block;
	    object-fit: cover;
    aspect-ratio: 1;}
.cart_list li .ck_box{position: absolute; left: 5px; top: 10px; z-index: 2}


.cart_list li .txt{position: relative; flex:1}
.cart_list li .trash{position: absolute; right: 0; top: 0}
.cart_list li .txt h3{font-size: 12px}


.cart_list li .left{
	display: flex;
align-items: center; gap:18px;
}

.cart_list li .txt .detail_price{margin-top: 15px}

.cart_list li .txt .pr1{color: #666;
font-size: 12px;
text-decoration-line: line-through;}
.cart_list li .txt .pr2{display: flex; margin-top: 0px;justify-content: space-between;
    align-items: center;}

.cart_list li .txt .pr2 h3{font-size: 14px;}
.cart_list li .txt .pr2 h3 .sale{color: var(--point-color)}


.cart_list li .txt .del_gauge {
    padding: 5px 10px;
    border-radius: 5px;
}

.cart_list li.end{align-items: center;
    justify-content: space-between;}
.cart_list li .left p.info{color: #666; font-size: 12px;}


.delivery_list{border-top: 1px solid var(--border-color)}


.delivery_list li{ border-bottom: 1px solid var(--border-color); padding:15px 0px; position: relative}
    
.delivery_list li a { display: flex; justify-content: flex-start; align-items: center; gap:18px; }    
    
.delivery_list li .thum{border-radius: 5px; overflow: hidden; display: block; position: relative; width: 80px}
.delivery_list li .thum img{
	width: 100%;
	height: 100%;
	display: block;
	    object-fit: cover;
    aspect-ratio: 1;}
.delivery_list li .ck_box{position: absolute; left: 5px; top: 10px; z-index: 2}

.delivery_list li .left{display: flex;
    align-items: center; gap:18px; flex:1}

.delivery_list li .txt{position: relative; flex:1}
.delivery_list li .trash{position: absolute; right: 0; top: 0}
.delivery_list li .txt h3{font-size: 12px}
.delivery_list li .txt p{font-size:12px;  }
.delivery_list li .txt p.info{color: #888; font-weight: normal; margin-top: 3px; }
.delivery_list li .txt p.price{margin-top: 10px; color: #222}


.delivery_list li .del_gauge {
    padding: 5px 10px;
    border-radius: 5px;
}



.pay_info_box{border-radius: 5px;
border: 1px solid rgba(34, 34, 34, 0.10);
background: #F9F9F9; padding: 20px}

.pay_info_box p{color: #333; font-size: 14px; display: flex;
    justify-content: space-between;}
.pay_info_box p + p{margin-top: 10px}


.pay_info_box p b.color{color: var(--point-color)}



.address_list{}
.address_list li{border: 1px solid var(--border-color); padding: 20px; border-radius: 10px; position: relative}
.address_list li.on{border-color: var(--main-color)}
.address_list li + li{margin-top: 20px;}

.address_list li .trash{position: absolute; right: 10px; top: 10px; padding: 10px;}

.address_list li .tag{border-radius: 5px;
border: 1px solid rgba(34, 34, 34, 0.10);
background: #FFF; font-size: 12px; color: #333; padding: 5px 10px; margin-bottom: 15px; display: inline-block}

.address_list li .txt{}
.address_list li .txt p{font-size: 12px; color: #666}
.address_list li .txt p + p{margin-top: 3px}



.storage_list{}
.storage_list.not li{text-align: center; padding: 3rem 0}
.storage_list.not li p{font-size: 16px; margin-top: 30px; font-weight: bold}

.list_top_btn{
	display: inline-flex;
padding: 10px 10px;
align-items: center;
gap: 10px;
border-radius: 5px;
border: 1px solid rgba(34, 34, 34, 0.10);
background: #fff;
font-size: 12px;
font-weight: 600
}

.list_top_btn.point{background: var(--main-color);}



.all_ck_top input[type="checkbox"].custom_checkbox + label{font-size: 12px}

.storage_list li{display: flex; position: relative; padding: 25px 20px;
border: 1px solid var(--border-color); border-radius: 10px;
    justify-content: flex-start;
    align-items: center; gap:18px}
    
.storage_list li + li{margin-top: 20px}    
    
.storage_list li .thum{width: 80px; height: 80px; border-radius: 5px; }
.storage_list li .thum img{
	width: 100%;
	height: 100%;
	display: block;
	    object-fit: cover;
    aspect-ratio: 1;}

.storage_list li .txt{flex:1; position: relative}
.storage_list li .txt .time{position: absolute; right: 0; top: 0; font-size: 12px; color: #999}
.storage_list li .txt .p_name{font-weight: bold; font-size: 14px}
.storage_list li .txt .product_info{margin-top: 10px}
.storage_list li .txt .product_info .date{font-size: 12px; color: #666}
.storage_list li .txt .flex_btn{display: flex; gap:5px; margin-top: 10px}

.storage_list li .ck_box{position: absolute; left: 15px; top: 15px}




.video_pop {
  display: none;
  position: fixed; left: 0; top: 0; z-index: 9999;
  background: rgba(0,0,0,0.8);
  width: 100%;
  height: 100%;
}
.video_pop .video_are{position: absolute; left: 50%; top: 50%; 
width: 90%;
transform: translate(-50%, -50%); text-align: center; max-width: 350px} 

.video_pop .video_are .vido_box{height: 490px; border-radius: 10px; overflow: hidden;}

.video_pop .video_are .vido_box video{width: 100%;
    height: 100%;
    object-fit: cover;}


.video_pop .video_are .close_top{position: absolute; right: 15px; top: 15px; z-index: 2}
.video_pop .video_are .skip_btn{display: inline-flex; font-size: 12px; color: #fff; 
padding: 8px 15px; border-radius: 50px; text-align: center; background: #111; margin-top: 15px}


.total_del_gauge{margin-top: 30px}
.total_del_gauge p{font-size: 16px;font-weight: bold}
.total_del_gauge p b{color: var(--point-color)}

.total_del_gauge .bar{width: 100%; position: relative; border-radius: 6px; height: 6px; background: #ddd; margin-top: 10px}
.total_del_gauge .bar span{height: 6px; position: absolute; left: 0; top: 0; width: 0%; border-radius: 6px; background: var(--point-color)}



.refund_pop{text-align: center; margin-bottom: 30px}
.refund_pop p{font-size: 16px; font-weight: bold}
.refund_pop p b{color: var(--point-color)}


.giftbox .tab {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: hidden;
}


.my_top{display: flex; gap:10px; 
justify-content: flex-end;
    align-items: center;}
.my_top a{display: block}
.my_top a img{display: block}


.friend_list{border-top: 1px solid var(--border-color)}
.friend_list li{display: flex; align-items: center;
    justify-content: space-between; padding: 20px 0; border-bottom: 1px solid var(--border-color)}
.friend_list .left{display: flex; gap:18px; flex:1;  align-items: center;}
.friend_list .left .thum{width: 60px; height: 60px; border-radius: 60px; overflow: hidden}
.friend_list .left .thum img{
	width: 100%;
	height: 100%;
	display: block;
	    object-fit: cover;
    aspect-ratio: 1;}


.friend_list .left .txt p{font-size: 14px; color: #333; font-weight: bold}
.friend_list .left .txt p.date{font-size: 12px; margin-top: 5px; font-weight: 400}


.friend_list .flex_btn{display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 5px; }



.pop_in .friend_list{border: 0; margin: 20px 0}
.pop_in .friend_list li{border:0 ; padding: 0}

* + .delivery_top{margin-top: 30px}
.delivery_top{display: flex; gap:5px; align-items: center; margin-bottom: 10px;}
.delivery_top p{font-size: 12px; color: #666}
.delivery_list .de_tag{padding: 3px 6px; border-radius: 3px; color: #fff; font-size: 10px; font-style: normal; margin-right: 5px;
font-weight: 500; background: #757575; }
.delivery_list .de_tag.st1 {background:#183BC8 }
.delivery_list .de_tag.st2 {background:#222222 }
.delivery_list .de_tag.st3 {background:#006D2A }
.delivery_list .de_tag.st4 {background:#18c89d }
.delivery_list .de_tag.st5 {background:#18c89d }


.mygoods_li.rank_list li .txt h4{ font-size: 12px;  }

.delivery_list li .txt h3 {     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden; line-height: 1.7;  }

/*mypage*/

.my_p_info{text-align: center; margin-bottom: 30px}
.my_p_info .user_p{position: relative; width: 80px; margin: 0 auto}
.my_p_info .user_p .thum{width: 80px; height: 80px; border-radius: 80px; overflow: hidden; margin: 0 auto 15px}
.my_p_info .user_p .thum img{width: 100%; height: 100%; display: block;     object-fit: cover;
aspect-ratio: 1;}

.my_p_info p{font-size: 14px; }
.my_p_info p b{color: #444}
.my_p_info p span{color: #999}

.my_p_info .user_p .adit{position: absolute;
width: 20px; height: 20px; background: #222; border-radius: 20px;
right: 0; bottom: 0; z-index: 2; display: flex;
justify-content: center;
    align-items: center;}

.my_point_box{display: flex; border-radius: 10px; background: #F5F5F5; padding: 30px; text-align: center}

.my_point_box li{flex:1}
.my_point_box li p{color: #444; font-size: 14px; margin-top: 5px}
.my_point_box li p b{color: var(--point-color)}

.my_list{margin-top: 30px; border-top: 1px solid var(--border-color)}
.my_list li{border-bottom: 1px solid var(--border-color)}
.my_list li a{padding: 20px; display: flex; font-size: 14px;    align-items: center;
    justify-content: space-between; color: #1b1b1b }

.cs_center{margin-top: 50px;}
.cs_center h3{font-size: 16px; color: #1b1b1b; margin-bottom: 20px;}

.flex_cs{display: flex; gap:10px; flex-wrap: wrap;}
.flex_cs a{width: calc(50% - 5px); border-radius: 5px; border: 1px solid var(--border-color);
display: flex; gap: 15px; font-size: 14px; color: #333; height: 50px; 
    justify-content: center;
    align-items: center;}
.flex_cs a.inq{width: 100%; background: var(--main-color)}

.cs_center p{font-size: 12px; color: #666}
.cs_center p span{color: #1b1b1b}
.flex_cs + p{margin-top: 20px}


.logout_btn{text-align: center; margin-top: 30px;}
.logout_btn a, .logout_btn input{
	display: inline-flex;
padding: 10px 15px;
align-items: center;
gap: 10px;
border-radius: 5px;
border: 1px solid rgba(34, 34, 34, 0.10);
background: #FFF;
font-size: 12px; color: #333; line-height: inherit;     width: auto;
cursor: pointer;
}


.input_flex .box_input_title{margin: 0}

.tog_ck{}
.tog_ck input[type="checkbox"] + label {
    width: 60px; height: 20px; background: #EBEBEB; border-radius: 20px;
    position: relative
}


.tog_ck input[type="checkbox"] + label::before {
    width: 30px;
    height: 30px;
    border: 1px solid #666;
    background:#666;
    display: inline-block;
    content: '';
    border-radius: 30px; position: absolute; left: 0; top: 50%; 
    transform: translateY(-50%);
    transition-duration: .5s
}

.tog_ck input[type="checkbox"]:checked + label::before {
    border-radius: 30px; position: absolute; left: 30px; 
     background:var(--main-color);
     border: 1px solid var(--main-color);
}


.input_flex.btw{justify-content: space-between;}




.coupon_list li{border: 1px solid var(--border-color);
border-radius: 5px; padding: 20px; display: flex;     justify-content: space-between;
    align-items: center;}

.coupon_list p{font-size: 14px;}
.coupon_list h3{font-size: 16px; }
.coupon_list p.date{margin-top: 10px; font-size: 12px; color: #999}
.coupon_list .coupon_down{width: 60px; height: 60px; background: #c6c6c6 url("/resources/images/mypage/down.svg") no-repeat center; 
border-radius: 60px;
display: flex;     justify-content: center;
    align-items: center;}
    
    
.coupon_list .on .coupon_down{ background: #333 url("/resources/images/mypage/down.svg") no-repeat center; }    


.coupon_list .ok .coupon_down{ background: var(--main-color) url("/resources/images/mypage/down_ok2.svg") no-repeat center; background-size: 19px;  }    


.coupon_list li + li{margin-top: 20px;}


.coupon_pop_info p{font-size: 12px; color: #8E8E8E; position: relative; padding-left: 10px}
.coupon_pop_info p:before{content: '·'; position: absolute; left: 0; top: 0}
.coupon_pop_info p + p{margin-top: 5px}


.alarm_list{ border-top: 1px solid var(--border-color)}
.alarm_list li{border-bottom: 1px solid var(--border-color); padding: 20px 10px; }
.alarm_list p{font-size: 14px;  }
.alarm_list p.info{margin-top: 5px; display: flex; gap:10px;
justify-content: flex-start;
    align-items: center;}
.alarm_list p.info .tag{display: inline-flex;
padding: 3px 5px;
align-items: center;
gap: 10px;
border-radius: 5px;
border: 1px solid rgba(34, 34, 34, 0.10);
background: #333; font-size: 12px; color: #fff}

.alarm_list p.info .tag.ok{background: var(--point-color)}
.alarm_list p.info .tag.ing{background: #008E11}



.tag{display: inline-flex;
padding: 3px 5px;
align-items: center;
gap: 10px;
border-radius: 5px;
border: 1px solid rgba(34, 34, 34, 0.10);
background: #333; font-size: 12px; color: #fff}

.tag.ok{background: var(--point-color)}
.tag.ing{background: #008E11}




.alarm_list p.info .date{font-size: 12px; color: #999}
.alarm_list .txt{display: block}

.alarm_detail{ border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color); padding: 30px 0}


.faq .collapsible {
            background-color: #fff;
            color: #1b1b1b;
            cursor: pointer;
            padding: 10px 0;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 14px;
            display: flex; 
            gap:10px;
                align-items: center;
                position: relative
        }
 
.faq .collapsible i{position: absolute; right: 0; top: 15px; transition-duration: .5s} 
        
.faq .collapsible:before{
	content: 'Q';
	width: 30px; height: 30px; border-radius: 5px; color: #fff; font-size: 14px;
	background: #333;
	display: flex;
    justify-content: center;
    align-items: center;
}        
 
.faq .collapsible.active:before{background-color: var(--point-color)}
 .faq .collapsible.active i{    transform: rotate(180deg);}       



.faq .answer {
            padding: 0;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
            background-color: #f5f5f5;
            border-radius: 5px
        }

.faq .answer .txt{padding: 15px}
.faq .answer .txt p{font-size: 12px; color: #333}       


.inquiry_top{padding-bottom: 30px; }
.inquiry_top h2{font-size: 16px;}
.inquiry_top p{font-size: 12px; color: #999; margin-top: 10px}
.inquiry_top p span{color: #1b1b1b}




#main_popup{ display: none;  }



.login_error{  font-size: 12px; margin-top: 5px; margin-top: 5px; }


.keyword_wrap span { border-radius: 5px; 
    border: 1px solid var(--border-color);
    aspect-ratio: 1; font-size: 12px; padding: 0 10px; line-height: 35px; height: 35px; display: inline-block;  }
    
    
    
    .keyword_wrap { white-space: nowrap;  display: none;  }
     
    
    #addr_add_pop .pop_in { margin-top: 20px;  }