/*PROMOTION*/
.promotion-area{
	padding: 0rem 0.5rem 3rem;
    display: flex;
    flex-direction: column;
}

.promo-navi-wrap{
	width: calc(100% + 1rem);
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.promo-filter-wrapper{
	width: 100%;
    position: relative;
    display: block;
}

.promo-filter-wrapper::before{
	content: "";
    position: absolute;
    bottom: 1px;
    left: 0;
    height: 1px;
    width: 100%;
    background: var(--promo4_PROMO_FILTER_WRAPPER_BEFORE_BG);
}

.promo-filter-box{
	justify-content: center;
    transform: translateZ(0)!important;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    transition-duration: 0ms;
    transition-delay: 0ms;
    box-sizing: content-box;
}

.promo-filter-box .filter{
	margin-right: 40px;
	width: auto;
	transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    flex-shrink: 0;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block;
}

.promo-filter-box .filter a{
	font-size: var(--BODY_TXT_FONT_SIZE);
    line-height: 1.375rem;
    font-weight: 400;
    display: flex;
    position: relative;
    padding: 0.5rem 0 10px;
    color: var(--promo4_PROMO_FILTER_BOX_A_TXT);
    cursor: pointer;
    margin-bottom: 1px;
    text-decoration: none;
}

.active{
	font-size: 1rem;
    line-height: 1.375rem;
    font-weight: 400;
    font-weight: 500;
    color: var(--promo4_ACTIVE_TXT);
}

.promo-filter-box .filter .active::before{
	content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translate(-50%);
    height: 3px;
    width: 30px;   
    border-radius: 0.25rem;
    background: var(--promo4_PROMO_FILTER_BOX_ACTIVE_BEFORE_BG);
}

.promo-filter-box .filter .active::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: -1rem;
    height: 1px;
    width: calc(100% + 2rem);
    background: var(--promo4_PROMO_FILTER_BOX_ACTIVE_AFTER_BG);
}

.promo-page-title{
	font-size: .875rem;
    line-height: 1.125rem;
    font-weight: 400;
    margin-bottom: 30px;
    margin-top: 1rem;
    color: var(--promo4_PROMO_PAGE_TITLE_TXT);
}

.promo-card-wrap{
	display: grid;
    grid-column-gap: 1rem;
    grid-row-gap: 20px;
    width: 100%;
    justify-items: center;
    grid-template-columns: repeat(auto-fill,minmax(304px,1fr));
}

.promo-card-wrap .promo-card{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    padding-top: 0;
    position: relative;
    flex-grow: 1;
    max-width: 412px;
    min-height: 408px;
   	background: var(--promo4_PROMO_CARD_WRAP_CARD_BG);
}

.promo-card-wrap .promo-card .promo-card-new-label{
	position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    z-index: 3;
}

.promo-card-wrap .promo-card .promo-card-new-label .promo-new{
	font-size: .75rem;
    line-height: 1rem;
    font-weight: 500;    
    text-transform: uppercase;
    border-radius: 0.125rem;
    padding: 2px 0.25rem;
    text-align: center;
    color: var(--promo4_PROMO_CARD_WRAP_NEW_LABEL_NEW_TXT);
    background: var(--promo4_PROMO_CARD_WRAP_NEW_LABEL_NEW_BG);
}

.promo-card-wrap .promo-card .promo-card-img-wrapper{
	height: 160px;
    width: 100%;
    margin-top: -0.75rem;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.promo-card-wrap .promo-card .promo-card-img-wrapper .promo-card-img{
/* 	height: 160px;
    width: 429px; */
    max-width: none;
}

.promo-card-wrap .promo-card .promo-card-body{	
	flex-grow: 1;
    margin-bottom: 0.5rem;
    padding: 1rem 1rem 0 1rem;
}

.promo-card-wrap .promo-card .promo-card-body .promo-card-titile{
	font-size: var(--SUBHEADER_FONT_SIZE);
    line-height: 1.625rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
    text-align: center;
    color: var(--promo4_PROMO_CARD_WRAP_BODY_TITLE_TXT);
}

.promo-card-wrap .promo-card .promo-card-body .promo-card-description{
	display: -webkit-box;	
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 100px;
	font-size: var(--SUBBODY_TXT_FONT_SIZE);
    line-height: 1.125rem;
    font-weight: 400;
    text-align: center;
    color: var(--promo4_PROMO_CARD_WRAP_BODY_DESCRIPTION_TXT);   
}

.promo-card-wrap .promo-card .promo-card-footer{
	display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
   	padding: 0 1rem;
}

.promo-card-wrap .promo-card .promo-card-footer .promo-card-countdown-label{
	font-size: .75rem;
    line-height: 1rem;
    font-weight: 400;
    color: var(--promo4_PROMO_CARD_WRAP_FOOTER_COUNTDOWN_LABEL_TXT);
}

.promo-card-wrap .promo-card .promo-card-footer .promo-card-counter{
	margin-top: 5px;
	margin-bottom: 1rem;
	display: flex;
    justify-content: center;
}

.promo-card-wrap .promo-card .promo-card-footer .promo-card-counter .counter-block .counter-num{
	font-size: var(--SECTION_HEADER_FONT_SIZE);
    line-height: 1.75rem;
    font-weight: 400;
    font-weight: 700;
    color: var(--promo4_PROMO_CARD_WRAP_FOOTER_COUNTER_BLOCK_NUM_TXT);
}

.promo-card-wrap .promo-card .promo-card-footer .promo-card-counter .counter-block .counter-label{
	font-size: .75rem;
    line-height: 1rem;
    font-weight: 400;
    text-align: center;
    color: var(--promo4_PROMO_CARD_WRAP_FOOTER_CARD_COUNTER_BLOCK_LABEL_TXT);
}

.promo-card-wrap .promo-card .promo-card-footer .promo-card-counter .counter-separator{
	margin-left: 1px;
	font-size: 1.25rem;
    line-height: 1.625rem;
    font-weight: 400;
    font-weight: 700;
    width: 14px;
    text-align: center;
    opacity: .15;
    line-height: 1.75rem;
    color: var(--promo4_PROMO_CARD_WRAP_FOOTER_COUNTER_SEPARATOR_TXT);
}

.promo-card-wrap .promo-card .promo-card-footer .promo-card-button{
	display: flex;
    align-items: center;
    width: 100%;
}

.promo-card-wrap .promo-card .promo-card-footer .promo-card-button button{
	display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
	font-size: 1rem;
    line-height: 1rem;
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    line-height: 24px;
    position: relative;
    background: var(--promo4_PROMO_CARD_WRAP_FOOTER_BUTTON_BG);
    color: var(--promo4_PROMO_CARD_WRAP_FOOTER_BUTTON_TXT);
    font-size: var(--BUTTON_MED_FONT_SIZE);
}

.promo-card-wrap .promo-card .promo-card-footer .promo-card-button button:hover{
	background: var(--promo4_PROMO_CARD_WRAP_FOOTER_BUTTON_HOVER_BG);
}

.promo-card-wrap .promo-card .promo-card-footer .promo-card-button .promo-detail-button{
	box-sizing: border-box;
    margin: 0;
    font-family: inherit;
    vertical-align: baseline;
    -webkit-font-smoothing: antialiased;
    appearance: none;
    border: 0;
    cursor: pointer;
    letter-spacing: 0;
    text-decoration: none;
    border-radius: 0.25rem;
}

.promo-back-btn{
	top: 40px;
	display: flex;
    align-items: center;
    top: 0;
    z-index: 599;    
    padding: 2px 0.5rem;
    background: var(--promo4_PROMO_BACK_BTN_BG);
}

.promo-back-btn:after{
	content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px; 
    width: 100%;
    bottom: 0;
    background: var(--promo4_PROMO_BACK_BTN_AFTER_BG);
}

.promo-back-btn .back-btn{
	font-size: .875rem;
    line-height: .875rem;
    font-weight: 500;
    padding: 0.5rem 0;
    line-height: 20px;
    transition: font-size .2s ease-in-out;
    box-sizing: border-box;
    margin: 0;
    font-family: inherit;
    vertical-align: baseline;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    cursor: pointer;
    letter-spacing: 0;
    text-decoration: none;  
    display: flex;
    border-radius: 0.25rem;
    align-items: center;
    color: var(--promo4_PROMO_BACK_BTN_TXT);
}

.promo-back-btn .back-btn i{
	display: flex;
    align-items: center;
    justify-content: center;
}

.promo-back-btn .back-btn span{
	text-decoration: none;
    position: relative;
    margin-left: 0.5rem;
}


.promo-back-btn .back-btn span:hover{
	transition: width .2s ease-in-out;
	-webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    
}

.promo-detail {
	padding: 20px 0 3rem;
    display: flex;
    flex-direction: column;
	background: var(--promo4_DETAIL_BG);
} 

.promo-detail .promo-detail-card{
	margin-bottom: 0;
	border-radius: 0.25rem;
    position: relative;
    display: flex;
    align-items: stretch;
    padding-bottom: 1rem;
}

.promo-detail .promo-detail-card .promo-card-new-label{
	position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    z-index: 2;
}

.promo-detail .promo-detail-card .promo-card-new-label .promo-new{
	font-size: .75rem;
    line-height: 1rem;
    font-weight: 400;
    font-weight: 500;    
    text-transform: uppercase;
    border-radius: 0.125rem;
    padding: 2px 0.25rem;
    text-align: center;
    color: var(--promo4_DETAIL_CARD_NEW_LABEL_NEW_TXT);
    background: var(--promo4_DETAIL_CARD_NEW_LABEL_NEW_BG);
}

.promo-detail .promo-detail-card .promo-detail-card-content{
	display: grid;
    grid-template-columns: 1fr;
    width: 100%;
}

.promo-detail .promo-detail-card .promo-detail-card-content .promo-detail-img{
	height: 160px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    margin-top: -1rem;
}

.promo-detail .promo-detail-card .promo-detail-card-content .promo-detail-img img{
	height: 160px;
    width: 429px;
    max-width: none;
}

.promo-detail .promo-detail-card .promo-detail-card-content .promo-detail-wrapper{
	display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1rem;
}

.promo-detail .promo-detail-card .promo-detail-card-content .promo-detail-wrapper .promo-detail-title{
	font-size: 1.25rem;
    line-height: 1.625rem;
    font-weight: 400;
    font-weight: 500;    
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--promo4_DETAIL_CARD_CONTENT_DETAIL_WRAPPER_TITLE_TXT);
}

.promo-detail .promo-detail-card .promo-detail-card-content .promo-detail-wrapper .promo-detail-description{
    display: none;
    color: var(--promo4_DETAIL_CARD_CONTENT_WRAPPER_DESCRIPTION_TXT);
}

.promo-detail .promo-detail-card .promo-detail-card-content .promo-detail-wrapper:after{
	content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--promo4_DETAIL_CARD_CONTENT_WRAPPER_AFTER_BG);
    height: 100%;
    right: 0;
}

.promo-detail .promo-detail-card .promo-detail-card-content .promo-detail-counter-wrapper{
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
}

.promo-detail .promo-detail-card .promo-detail-card-content .promo-detail-counter-wrapper .promo-detail-counter{
	display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
}

.promo-detail-counter-wrapper .promo-detail-counter .promo-detail-countdown-label{
	font-size: .75rem;
    line-height: 1rem;
    font-weight: 400;
    color: var(--promo4_DETAIL_COUNTER_WRAPPER_LABEL_TXT);
}

.promo-detail-counter-wrapper .promo-detail-counter .promo-detail-counter-inner{
	display: flex;
    justify-content: center;
}

.promo-detail-counter-wrapper .promo-detail-counter .promo-detail-counter-inner .counter-block .counter-num{
	font-size: var(--SECTION_HEADER_FONT_SIZE);
    line-height: 1.75rem;
    font-weight: var(--MED_FONT_WEIGHT);
    color: var(--promo4_DETAIL_COUNTER_WRAPPER_INNER_BLOCK_NUM_TXT);
}

.promo-detail-counter-wrapper .promo-detail-counter .promo-detail-counter-inner .counter-block .counter-label{
	font-size: .75rem;
    line-height: 1rem;
    font-weight: 400;
    color: var(-promo4_DETAIL_COUNTER_WRAPPER_INNER_BLOCK_LABEL_TXT);
    text-align: center;
}

.promo-detail-counter-wrapper .promo-detail-counter .promo-detail-counter-inner .counter-separator{
    font-size: 1.25rem;
    line-height: 1.625rem;
    font-weight: 400;
    font-weight: 700;
    width: 14px;
    text-align: center;   
    opacity: .15;
    line-height: 1.75rem;
    margin-left: 1px;
    color: var(--promo4_DETAIL_COUNTER_WRAPPER_INNER_SEPARATOR_TXT);
}

.promo-detail-content{
	display: flex;
    flex-direction: column;    
    padding: 0 1rem;
    color: var(--promo4_PROMO_DETAIL_CONTENT_TXT);
}

@media (min-width: 1280px) {
	.promotion-area{
		padding: 0rem 1.5rem 3rem;
	}
	
	.promo-navi-wrap{
		width: calc(100% + 3rem);
	    margin-left: -1.5rem;
	    margin-right: -1.5rem;
	}
	
	.promo-page-title{
		margin-top: 0.5rem;
	}
	
	.promo-back-btn{
		top: 157px;
		padding: 1.5rem;
    	padding-bottom: 0;
	}
	
	.promo-back-btn .back-btn{
		font-size: 1rem;
	    line-height: 1rem;
	    font-weight: 500;
	    padding: 0.5rem 0;
	    line-height: 24px;
	}
	
	.promo-back-btn .back-btn span{
		margin-left: 0.5rem;
	}
	
	.promo-detail {
		padding: 1.5rem 1.5rem 3rem;
	} 
	
	.promo-detail .promo-detail-card .promo-detail-card-content .promo-detail-wrapper{
		padding: 2.5rem 1.5rem;
	}
	
	.promo-detail .promo-detail-card .promo-detail-card-content .promo-detail-wrapper .promo-detail-title{
		font-size: 1.5rem;
	    line-height: 1.75rem;
	    font-weight: 400;
	    font-weight: 500;
	    margin-bottom: 1rem;
	}
	
	.promo-detail .promo-detail-card .promo-detail-card-content .promo-detail-wrapper .promo-detail-description{
	    font-size: 1rem;
	    line-height: 1.375rem;
	    font-weight: 400;
	}
	
	.promo-detail .promo-detail-card .promo-detail-card-content .promo-detail-counter-wrapper{
		padding: 1.5rem;
	}
	
	.promo-detail-counter-wrapper .promo-detail-counter .promo-detail-countdown-label{
		font-size: .875rem;
	    line-height: 1.125rem;
	    font-weight: 400;
	}
	
	.promo-detail-counter-wrapper .promo-detail-counter .promo-detail-counter-inner .counter-separator{
		margin-left: 0.25rem;
		font-size: 1.75rem;
	    line-height: 2.0625rem;
	    font-weight: 400;
	    font-weight: 700;
	}
	
	.promo-detail-counter-wrapper .promo-detail-counter .promo-detail-counter-inner .counter-block .counter-num{
		font-size: var(--SECTION_HEADER_FONT_SIZE);
	    line-height: 2.625rem;
	    font-weight: var(--MED_FONT_WEIGHT);
	}
	
	.promo-detail-counter-wrapper .promo-detail-counter .promo-detail-counter-inner .counter-block .counter-label{
		font-size: .875rem;
	    line-height: 1.125rem;
	    font-weight: 400;
	    margin-top: -6px;
	}
}

@media (min-width: 768px) {
	.promotion-area{
		padding: 0rem 1rem 3rem;
	}
	
	.promo-navi-wrap{
		width: calc(100% + 2rem);
	    margin-left: -1rem;
	    margin-right: -1rem;
	}
	
	.promo-page-title{
		margin-top: 1.5rem;
	}
	
	.promo-card-wrap .promo-card{
		min-width: 320px;
	}
	
	.promo-back-btn{
		top: 157px;
		padding-top:0.25rem;
		padding: 18px 1.5rem 2px;
	}
	
	.promo-detail {
		padding: 1.5rem 1rem 3rem;
	}
	
	.promo-detail .promo-detail-card{
		margin-bottom: 1.5rem;
		padding: 0;
    	background: var(--promo4_PROMO_DETAIL_CARD_BG);
	}
	
	.promo-detail .promo-detail-card .promo-detail-card-content{
		grid-template-columns: 1fr 1fr 1fr;
	} 
	
	.promo-detail .promo-detail-card .promo-detail-card-content .promo-detail-img{
		height: 220px;
	}
	
	.promo-detail .promo-detail-card .promo-detail-card-content .promo-detail-img img{
		height: 220px;
   	 	width: 590px;
	}
	
	.promo-detail .promo-detail-card .promo-detail-card-content .promo-detail-wrapper{
		padding: 2rem 1.5rem;
    	position: relative;
	}
	
	.promo-detail .promo-detail-card .promo-detail-card-content .promo-detail-wrapper .promo-detail-title{
		font-size: 1rem;
	    line-height: 1.375rem;
	    font-weight: 400;
	    font-weight: 500;
	    text-align: left;
	}
	
	.promo-detail .promo-detail-card .promo-detail-card-content .promo-detail-wrapper .promo-detail-description{
	    font-size: .875rem;
	    line-height: 1.125rem;
	    font-weight: 400;
	    display: block;
	}
	
	.promo-detail .promo-detail-card .promo-detail-card-content .promo-detail-counter-wrapper{
		padding: 1rem;
	}
	
	.promo-detail-content{
		padding:0;
		font-weight: var(--REG_FONT_WEIGHT);
		font-size: var(--BODY_SMALL_TXT_FONT_SIZE)
	}
	
}

@media (min-width: 375px) {
	.promo-card-wrap{
		grid-template-columns: repeat(auto-fill,minmax(320px,1fr));
	}
}
/*PROMOTION*/