@charset "utf-8";
/* CSS Document */
main{
	height: 100vh;
	background-image: url("../images/main_top_bg.png"), url("../images/main_bg.png"), url("../images/main_light.png"),linear-gradient(135deg, var(--point) 0%, var(--dark_point) 100%);
	background-position: center top , center 110%, center bottom, center center ;
	background-size:100%, 100%, 100%, 100%;
	background-repeat: no-repeat;
	position: relative;
	transition: all var(--transition);
}
.box_icon{
	max-width: 120px;
}
.coupon{
	flex: 1 1 0;
	min-height: 130px;
	background-image: linear-gradient(180deg, var(--white) 0%, #eafff8 100%); 
	text-align: center;
	position: relative;
	overflow: hidden;
    align-items: stretch;
	filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
	box-sizing: border-box;
	transition: all var(--transition);
}
.coupon:before{
	content: '';
	position:absolute;
	display: block;
	background-color: #28ff8d;	
	width: 10px;
	height: 46%;
	top: 50%;
	left: 0;
	border-radius: 999px;
	transform: translate(-49%, -45%);
}
.coupon_icon{
	width: 45px;
	/*margin-left: 0.3rem;*/
	object-fit: contain;
}
.divider{
	content: '';
	width: 1px;
	height: inherit;
	border-right: 1pt dashed #691ca7;
	display: inline-block;
	background: transparent;
	position: relative;
}
.divider:before, .divider:after{
	content: '';
	position:absolute;
	width: 7px;
	height: 7px;
	background-color: #691ca7;
	display: block;
}
	.divider:before{
		top: 0%;
		left: 50%;
		transform: translate(-40%, -50%) rotate(45deg);	
	}
	.divider:after{
		bottom: 0%;
		left: 50%;
		transform: translate(-40%, 50%) rotate(45deg);	
	}
.coupon p.fs_20{z-index: 1}
.txt_bg{
	position: relative;
	display: inline-block;
	/*z-index: 1*/
}
.txt_bg:before {
        content: '';
        position:absolute;
        z-index: -1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: inline-block;
        background-image: url('../images/marker.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        pointer-events: none;
        width: 120%;
        height: 140%;
    }
p.fs_36 span.fs_26 {
	position: relative;
	top:-2px;
} 
/* ==================== 모바일 레이아웃 ==================== */
@media(max-width: 1400px) {
    .coupon_pack{
		flex-wrap: wrap;
		justify-content: center
	}	
	.coupon{
		flex: 1 1 40%;
	}
	.coupon_icon{
		width: 70px;
		margin-left: 0.5rem;
	}
	.divider ~ .d_flex.flex_column{
		width: 60%;
	}
}

@media(max-width: 900px) {
	main{
		height: 100%!important;
		padding-bottom: 1.5rem;
		background-image: url("../images/main_top_bg.png"), url("../images/main_top_bg.png"),  url("../images/main_bg.png"), url("../images/main_light.png"),linear-gradient(135deg, var(--point) 0%, var(--dark_point) 100%);
		background-position: left top , right top , center bottom, center bottom, center center ;
		background-size:170%, 160%, 100%, 100%, 100%;
	}
	.coupon_pack{
		flex-direction: column;	   
	}	
	.coupon{
		flex: 1 1 0;
		width: 55%;
		min-height: 100px;
		max-height: 100px;
	}
	
	.coupon_icon{
		width: 60px;
		margin-left: 1rem;
	}
}

@media(max-width: 600px) {
   	.box_icon{
		max-width: 80px;
	}
	.coupon{
		width: 82.5%;
	}
	.coupon_icon{
		width: 40px;	
	}


}