@charset "UTF-8";
.referFriend * { box-sizing:border-box; }
.referFriend .topImg { position:relative; width:100%; height:100%; background:url(images/topBg_02.jpg) no-repeat 50%; background-size:cover; animation:bgScale02 2.6s 3s ease-out both; }
.referFriend .topImg p { animation:fadeIn_up .6s .2s ease-out both; }
.referFriend .topImg:before { position:absolute; left:0; top:0; content:""; display:block; width:100%; height:100%; background:url(images/topBg_01.jpg) no-repeat 50%; background-size:cover; animation:bgScale 2.6s ease-out both,fadeOut .6s 3s ease-out both; }
.referFriend .way { background:#121212; padding-bottom:60px;}
.referFriend .way > dl { background:#fff; border-radius:15px; overflow:hidden; margin:0 15px 16px; }
.referFriend .way > dl > dt { background:#c40f0f; font-size:23px; text-align:center; color:#fff; font-weight:bold; padding:5px 0 8px; }
.referFriend .way > dl dd h3 { padding:0; border-bottom:0; color:#c40f0f; margin: 15px 0 5px; line-height:1.1; }
.referFriend .way > dl dd h4 { font-size:15px; font-weight:bold; margin:0; line-height:1.1; }
.referFriend .way > dl > dd { padding:0 15px; }
.referFriend .way > dl dd dl { border:1px solid #c40f0f; border-right:none; border-left:none; margin:20px 0 30px; padding:15px 0;}
.referFriend .way > dl dd dl > dt { font-size:18px; font-weight:bold; }
.referFriend .way > dl dd dl > dt small { font-size:14px; color:#777; font-weight:normal; display:block; padding-top:3px; }
.referFriend .way > dl dd dl > dd { padding:10px 0; }
.referFriend .way > dl dd dl > dd > a { color:#c40f0f;}
.referFriend .way > dl dd span strong { color:#c40f0f;}
.referFriend .way .btn_copy { font-weight:bold; margin:20px auto 20px; border-radius:10px; text-align:center; line-height:50px; display:block; width:80%; background:#fff000; font-size:18px; height:50px; }
.referFriend .way .btn_apply { display:block; width:80%; background:#ce1313; height:60px; margin:30px auto 0; border-radius:10px; padding:7px 10px 0; }
.referFriend .way .btn_copy:after { content:" >"}
.referFriend .way > dl dd p { margin:15px 0 30px; }
.referFriend .way .marginB30 { padding-bottom:30px; }
.referFriend .guide { background:#232323; padding:40px 15px; }
.referFriend .guide li,.referFriend .guide dt { color:#fff;}
.referFriend .guide dt { font-size:21px; margin-bottom:8px;}
.referFriend .guide ol > li { list-style:decimal; margin-left:15px; padding-bottom:12px; }
.referFriend .guide ol > li ul { margin-top:5px; }
.referFriend .guide ol > li li { color:#ccc; position:relative; padding-left:10px;}
.referFriend .guide ol > li li:before { content:"- "; display:inline-block; position:absolute; left:0; top:-2px; }
.referFriend .guide a{ display:block; padding:5px 0 5px 0; text-align:center; font-size:13px; color:#ccc; border-radius:5px; border:1px solid #fff; width:110px; margin-top:10px;  }
.referFriend .guide a:after { content:" >"  }
.referFriend .section_01 { position:relative; background:url(images/section01_bg.png) no-repeat; height:127.36vw; background-size:100% auto; }
.referFriend #counter { position:absolute; left:36vw; bottom:29.17vw; font-family:Georgia, 'Times New Roman', Times, serif; font-size:9.72vw; background-image:linear-gradient(180deg, rgba(255,255,0,1) 0%, rgba(255,140,0,1) 100%); background-clip:text; -webkit-background-clip:text; color:transparent; }


@keyframes fadeIn_up {
	0% {
		transform: translateY(5%);
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

@keyframes bgScale02 {
	0% {
		background-size:100% 100%;
	}
	100% {
		background-size:110% 110%;
	}
}

@keyframes bgScale {
	0% {
		background-size:110% 110%;
	}
	100% {
		background-size:100% 100%;
	}
}

@keyframes fadeOut {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}