@charset "utf-8";
@import url("/css/webfont.css");

.evt_wrap {background: #222222}
.evt_wrap * {box-sizing: border-box;}
.evt_wrap i {display: inline-block;}
.evt_notice_btn {color: #666;}

/* ----------------------------------------------------------------
					비쥬얼
-----------------------------------------------------------------*/
.visual { padding-top: 48px; text-align: center; padding-top: 50px;}
.visual .container {max-width: 775px;}
.visual .btn_page_close {right: 10px; top: 0;}
.visual span {display: block;}
.visual .visual_txt1 {font-size: 14px; line-height: 18px; color: #fff; margin-bottom: 11px;}
.visual .visual_txt2 {width: 280px; margin: 0 auto;}
.visual .my_benefit {background: #2B2B2B; border-radius: 8px; padding: 18px 6px;width: 274px; margin: 25px auto 0;}
.visual .my_benefit_txt1 {font-size: 12px; line-height: 16px; color: #FFADC1; font-weight: 700;}
.visual .my_benefit_txt2 {font-size: 26px; line-height: 34px; font-weight: 700; color: #fff; }
.my_benefit_txt2 .emoney {width: 22px; height: 22px;background: url("//img.enuri.info/images/event/2024/collection_benefit/aug/i_emoney.png") no-repeat 0 0 / 100%; margin-right: 2px; vertical-align: -2px;}
.my_benefit_txt2 span {display: inline-block;animation: flip 4.8s infinite; animation-delay: calc(.15s * var(--i))}
.visual .benefit_wrap {margin-top: 11px; position: relative;}
.visual .benefit_wrap::before {content: ""; background: #2a2a2a; width: 46px; height: 46px;border: 1px solid #ff4c48; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3;}
.visual .benefit_wrap::after {content: "\002B";position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; color: #FF4C78; font-size: 40px; font-weight: 800; height: 46px;}
.visual .benefit_box {position: relative;}
.visual .benefit_tit {background: #2F2F2F; border: 1px solid #000; border-radius: 37px; color: #ffadc1; font-weight: 700; line-height: 12px; font-size: 9px; display: inline-block;padding: 2px 12px; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);}
.visual .benefit_cont {border: 1px solid #FF4C78; color: #fff; border-radius: 36px; font-size: 15px; line-height: 20px; font-weight: 700; text-align: left;}
.benefit_cont1 {padding: 10px 0 10px 5px;}
.benefit_cont2 {padding: 10px 0 10px 26px;}
.benefit_cont .emoney {width: 12px; height: 12px; background: url("//img.enuri.info/images/event/2024/first_purchase/aug/i_emoney.png") no-repeat 0 50% / 100%; margin-right: 2px; vertical-align: -1px;}

@keyframes flip {
	0%{transform: rotateY(360deg);}
	15%{transform: rotateY(0);}
}

@media (min-width:768px) { 
	.visual {padding-top: 100px;}
	.visual .btn_page_close {top: -12px;}
	.visual .visual_txt1 {font-size: 28px; line-height: 36px; margin-bottom: 20px;}
	.visual .visual_txt2 {width: 560px;}
	.my_benefit_txt2 .emoney {width:  44px; height:  44px;margin-right: 6px; vertical-align: -3px;}
	.visual .my_benefit {padding: 40px 70px; width: 686px; margin-top: 40px;}
	.visual .my_benefit_txt1 {font-size: 26px; line-height: 34px;}
	.visual .my_benefit_txt2 {font-size: 56px; line-height: 73px;}
	.visual .benefit_wrap {max-width: 560px; margin-top: 24px;}
	.visual .benefit_tit {font-size: 20px; line-height: 26px; padding: 4px 26px; border-radius: 78px; top: -18px;}
	.visual .benefit_cont{border-radius: 78px; font-size: 32px; line-height: 42px;}
	.benefit_cont1 {padding: 20px 0 20px 13px;}
	.benefit_cont2 {padding: 20px 0 20px 55px;}
	.benefit_cont .emoney {width: 24px; height: 24px; margin-right: 6px;}
	.visual .benefit_wrap::before {width: 98px; height: 98px;}
	.visual .benefit_wrap::after {font-size: 85px; height: 98px;}
}

/* ----------------------------------------------------------------
					컨텐츠
-----------------------------------------------------------------*/
.evt_content {padding: 25px 0 50px;}
.benefit_folder {background: url("//img.enuri.info/images/event/2024/collection_benefit/feb/folderbg_m.png"); background-size: 100%; width: 274px; height: 174px; margin: 0 auto 30px;}
.benefit_folder:last-child {margin-bottom: 0;}
.folder_tit {font-size: 16px; font-weight: 700; color: #ff4c78;line-height: 44px;width: 114px; text-align: center; letter-spacing: -0.5px;}
.folder_cont{text-align: center; padding: 14px 10px;}
.folder_cont1 {background: url("//img.enuri.info/images/event/2024/collection_benefit/nov/folder_cont1.png") 0 50% / 95px no-repeat;}
.folder_cont2 {background: url("//img.enuri.info/images/event/2024/collection_benefit/nov/folder_cont2.png?=v2") 15px 50% / 76px no-repeat;}
.folder_cont3 {background: url("//img.enuri.info/images/event/2024/collection_benefit/nov/folder_cont3.png?=v3") 15px 50% / 82px no-repeat;}
.folder_cont4 {background: url("//img.enuri.info/images/event/2024/collection_benefit/nov/folder_cont4.png") 0 50% / 100px no-repeat;}
.folder_cont5 {background: url("//img.enuri.info/images/event/2024/collection_benefit/nov/folder_cont5.png") 5px 50% / 100px no-repeat;}
.folder_cont6 {background: url("//img.enuri.info/images/event/2024/collection_benefit/nov/folder_cont6.png?=v2") 10px 50% / 100px no-repeat;}
.folder_cont7 {background: url("//img.enuri.info/images/event/2024/collection_benefit/nov/folder_cont7.png") 5px 50% / 100px no-repeat;}
.folder_cont8 {background: url("//img.enuri.info/images/event/2024/collection_benefit/nov/folder_cont8.png") 10px 50% / 99px no-repeat;}
.folder_cont9 {background: url("//img.enuri.info/images/event/2024/collection_benefit/nov/folder_cont9.png") 5px 50% / 98px no-repeat;}

.folder_cont_txt {padding-left: 98px;}
.benefit_tit {display: block; color: #2A2A2A; font-weight: 800; font-size: 12px; line-height: 14px; letter-spacing: -0.5px;}
.benefit_score{display: inline-block; background-image: linear-gradient(to top, #FF4C7833 50%, transparent 20%); background-repeat: no-repeat;background-size: 0% 100%;transition: background-size 0.8s; animation: underline 4.5s infinite; font-size: 13px; line-height: 22px; color: #2a2a2a; font-weight: 800; letter-spacing: -0.8px; padding: 0 3px; margin-top: 4px;}
.benefit_score em {font-size: 20px; padding-left: 22px; background: url("//img.enuri.info/images/event/2024/invite/aug/i_tit-emoney.png") no-repeat 0 50% / 20px;}
.go_benefit {color: #fff; background: #FF4C78; font-size: 12px; line-height: 12px; font-weight: 700; padding: 10px 0; border-radius: 40px; overflow: hidden; position: relative; display: inline-block; transition: 0.5s all; margin-top: 10px; width: 100%;}

@keyframes underline {
	0% {}
	20%{background-size: 100% 100%;}
	100%{background-size: 100% 100%;}
}

@media (min-width:768px) { 
	.evt_content {padding: 80px 0 100px;}
	.go_benefit {font-size: 28px; line-height: 30px; padding: 25px 0; border-radius: 100px; margin-top: 24px;}
	.benefit_folder {width: 686px; height: 435px;background: url("//img.enuri.info/images/event/2024/collection_benefit/feb/folderbg.png"); background-size: 100%;}
	.folder_tit{font-size: 40px; width: 284px;line-height: 115px;}
	.folder_cont {padding: 30px 40px}
	.folder_cont_txt {padding-left: 206px;}
	.benefit_tit {font-size: 28px; line-height: 28px;}
	.benefit_score{font-size: 34px; line-height: 60px; margin-top: 10px;}
	.benefit_score em{font-size: 50px; background-size: 40px; padding-left: 44px;}
	.folder_cont1 {background-size: 190px; background-position-x: 40px;}
	.folder_cont2 {background-size: 152px; background-position-x: 50px;}
	.folder_cont3 {background-size: 164px; background-position-x: 50px;}
	.folder_cont4 {background-size: 200px; background-position-x: 30px;}
	.folder_cont5 {background-size: 200px; background-position-x: 30px;}
	.folder_cont6 {background-size: 200px; background-position-x: 30px;}
	.folder_cont7 {background-size: 200px; background-position-x: 30px;}
	.folder_cont8 {background-size: 198px; background-position-x: 30px;}
	.folder_cont9 {background-size: 196px; background-position-x: 30px;}
}

@media (min-width:1025px) { 
	.go_benefit:hover {background: #e74165;}
	.go_benefit::before{position: absolute;transition: all 0.3s; content: '';left: 70%;top: 0;width: 38px; height: 8px;background: url("//img.enuri.info/images/event/2023/attendance/oct/i_arrow.png");background-size: 100%; top: 50%; transform: translateY(-50%); opacity: 0;}
	.go_benefit:hover:before {left: 80%; opacity: 1;}
}