@charset "utf-8";
*:focus {
    outline: none;
}
body{overflow-x:hidden;}
a { text-decoration: none; color: black; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; }
a:hover, a:active { text-decoration: none; }

.btnBlank{background:url("../images/blank.png");overflow:hidden;text-indent:-14285.571vw;position:absolute;	z-index:1;
-webkit-tap-highlight-color : transparent;
}
.hiddenText{
    overflow:hidden;
    position:absolute;
    left:-1428.429vw;
    top:-1428.429vw;
    font-size:0;
}
.wrap{position:relative;}
.wrap img{width:100%;}
.wrap .event{position:relative;display:none;z-index:1;left:0;top:0;width:100%;height:100%;}
.wrap .event.on{display:block;}
.wrap .section01 {position:relative;}

.wrap .step01 .btnFriend {
    position: absolute;
left: 9.2%;
    top: 34.5%;
    width: 81.3%;
    height: 4.6%;
	-webkit-tap-highlight-color : transparent;
}
.wrap .step01 .btnEvent {
    position: absolute;
    left: 9.2%;
    top: 39.8%;
    width: 81.3%;
    height: 4.6%;
	-webkit-tap-highlight-color : transparent;
}
.wrap .step01 .btnEventEnd {
	position: absolute;
    left: 9.2%;
    top: 39.8%;
    width: 81.3%;
    height: 4.6%;
	-webkit-tap-highlight-color : transparent;
}
.wrap .step01 .btnGoBuy{
    position: absolute;
    left: 6.2%;
    top: 94.5%;
    width: 49.3%;
    height: 4%;
	-webkit-tap-highlight-color : transparent;
}
.wrap .step01 .btnGoChannel{
    position: absolute;
    left: 39.2%;
    top: 92%;
    width: 49.7%;
    height: 4.6%;
	-webkit-tap-highlight-color : transparent;
}

.wrap .step02{
	position:relative;
}
.wrap .step02 .youtube{
    position: absolute;
    top: 57%;
    left: 6%;
    width: 88%;
    height: 25.6%;
}
.wrap .step02 .btnGoEvent {
	position:absolute;
    top: 85.2%;
    left: 10%;
    width: 80%;
    height: 7.5%;
}
.wrap .step03{
	position:relative;
}
.wrap .step03 .ok{
	display:none;
}
.wrap .step03 .btnArea{
	position:absolute;
    top: 81.5%;
    left: 20%;
    width: 60%;
}
.wrap .step03 .btnArea .select1{
	display:none;
}
.wrap .step03 .btnArea .select2{
	display:none;
}
.wrap .step03 .btnArea .select3{
	display:none;
}
.wrap .step03 .btnArea .btnSelect1{
	position:absolute;
	left:0%;
	width:20%;
	height:100%;
	top:0%;
}

.wrap .step03 .btnArea .btnSelect2{
	position:absolute;
	left:38%;
	width:20%;
	height:100%;
	top:0%;
}
.wrap .step03 .btnArea .btnSelect3{
	position:absolute;
    left: 75%;
    width: 25%;
	height:100%;
	top:0%;
}
.wrap .step03 .btnArea .btnSelect1 img{width:100%; height:100%;}
.wrap .step03 .btnArea .btnSelect2 img{width:100%; height:100%;}
.wrap .step03 .btnArea .btnSelect3 img{width:100%; height:100%;}
.wrap .step03 .btnMaximCut{
	position:absolute;
	top: 78.6%;
    left: 56.7%;
    width: 18.6%;
}
.wrap .step03 .btnMaximCut .off{
	display:block;
}
.wrap .step03 .btnMaximCut .on{
	display:none;
}

.wrap .step03 .Select1{
position: absolute;
    top: 57.4%;
    left: 15.2%;
    width: 32.2%;
    height: 14%;
}
.wrap .step03 .Select2{
position: absolute;
    top: 57.4%;
    left: 52.7%;
    width: 32.2%;
    height: 14%;
}

.wrap .step03 .Select3{
position: absolute;
   top: 71.9%;
    left: 15.2%;
    width: 32.2%;
    height: 14%;
}
.wrap .step03 .Select4{
position: absolute;
   top: 71.9%;
    left: 52.7%;
    width: 32.2%;
    height: 14%;
}
.wrap .step03 .SelectBtn.on{
	border:0.5vw #f97744 solid;
	border-radius: 2% 2%;
}
.wrap .step02 .quizArea{
    position: absolute;
    left: 7%;
    top: 72.4%;
    width: 86%;
/*    height: 23.3%;*/
}
.wrap .step02 .quizArea .btnQuiz1 {
    width: 30%;
    bottom: 0%;
    left: 0px;
    height: 100%;
    margin: 1.5%;
    position: absolute;
}
.wrap .step02 .quizArea .btnQuiz2 {
	left:33%;
    width: 30%;
    bottom: 0%;
    height: 100%;
    margin: 1.5%;
    position: absolute;
}
.wrap .step02 .quizArea .btnQuiz3 {
	left:66%;
    width: 30%;
    bottom: 0%;
    height: 100%;
    margin: 1.5%;
    position: absolute;
}
.wrap .step02 .quizArea .quizImg.quiz1, .wrap .step02 .quizArea .quizImg.quiz2, .wrap .step02 .quizArea .quizImg.quiz3 {
	display:none;
}

.wrap .step03 .alert{
	position: absolute;
	display:none;
    top: 0%;
    left: 0%;
    width: 100%;
	z-index:1000;
}
.wrap .step03 .alert .btnAlertClose{
	position: absolute;
    top: 53.3%;
    left: 10%;
    width: 80%;
    height: 5.7%;
}
.wrap .step02 .playerArea_border{
	position: absolute;
left: 10%;
    top: 54%;
    width: 80%;
   /* height: 22%;*/
}
.wrap .step02 .playerArea{
	position: absolute;
left: 10.5%;
    top: 54.27%;
    width: 79%;
    height: 24%;
}
.wrap .step03 .eventArea .imgArea{
    position: absolute;
	top:8%;
	left:5%;
	width:90%;
    height: 42%;
}
.wrap .step03 .eventArea .imgAnimate{
    position: absolute;
	bottom:50.5%;
	left:5%;
	width:90%;
    height:0%;
	overflow:hidden;
}
.wrap .step03 .eventArea .imgAnimate img{
    position: absolute;
	bottom:0px;
	left:0px;
	width:100%;
}
.wrap .step03 .eventArea .imgArea .img2{
	display:none;
}
.wrap .step03 .eventArea .imgArea img{
    position: absolute;
	top:0%;
	left:0%;
	width:100%;
}

.wrap .step03 .btnArea li{
	margin-bottom:2%;
}
.wrap .step03 .btnArea .btnOn{
	display:none;
}

.wrap .step03 .btnGoEvent2 {
	position:absolute;
	top: 90%;
    left: 10%;
    width: 89.7%;
    height: 7.5%;
}
.wrap .step04 .btnGoEvent3 {
	position:absolute;
	top: 90%;
    left: 10%;
    width: 80%;
    height: 7.5%;
}

.wrap .step03 .eventArea img{
	width:100%;
}
.wrap .step03 .eventArea .imgArea img{
	width:100%;
}
.wrap .step03 .popupArea {
	display:none;
	position:absolute;
	top:0;
	width:100%;
	z-index:999;
}
.wrap .step03 .popupArea img {

}

.wrap .step03 .popupArea .btnClose{
top: 89.5%;
    left: 11%;
    width: 78%;
    height: 7%;
}

.wrap .step03 .Choice .s0{
	display:block;
}

.wrap .step03 .Choice .btnSelect1{
	position: absolute;
    top: 0%;
    left: 0%;
    width: 47%;
    height: 47%;
	-webkit-tap-highlight-color : transparent;
}
.wrap .step03 .Choice .btnSelect2{
	position: absolute;
    top: 0%;
    right: 0%;
    width: 47%;
    height: 47%;
	-webkit-tap-highlight-color : transparent;
}
.wrap .step03 .Choice .btnSelect3{
	position: absolute;
    bottom: 0%;
    left: 0%;
    width: 47%;
    height: 47%;
	-webkit-tap-highlight-color : transparent;
}
.wrap .step03 .Choice .btnSelect4{
	position: absolute;
    bottom: 0%;
    right: 0%;
    width: 47%;
    height: 47%;
	-webkit-tap-highlight-color : transparent;
}
.wrap .step03 .btnChoice{
	position: absolute;
    top: 90.2%;
    left: 10%;
    width: 80%;
    height: 5.6%;
}

.wrap .step03 .popup {
	position:absolute;
	display:none;
    bottom: 0px;
	z-index:999;
}
.wrap .step03 .popup .btnGoEvent{
	position:absolute;
    bottom: 7%;
    left: 10%;
    width: 80%;
    height: 9%;
}
.wrap .step03 .popup .btnReQuiz{
	position:absolute;
    bottom: 7%;
    left: 10%;
    width: 80%;
    height: 9%;
}
.wrap .step03 .popup .btnReView{
	position:absolute;
    bottom: 17.5%;
    left: 10%;
    width: 80%;
    height: 9%;
}

.wrap .step02 .btnHint{
    position: absolute;
    left: 10%;
    top: 82.8%;
    width: 79.5%;
    height: 5.5%;
	-webkit-tap-highlight-color : transparent;
}
.wrap .step02 .btnChoice{
    position: absolute;
    left: 10%;
    top: 89%;
    width: 79.5%;
    height: 6.5%;
	-webkit-tap-highlight-color : transparent;
}
.wrap .step03 {
	position:relative;
}
.wrap .step03 .choiceimg {
	display:none;
}
.wrap .step03 .deco{
    position: absolute;
    top: 45%;
    left: 6%;
    width: 14%;
}

.wrap .step03 .btnMoreView{
    position: absolute;
    left: 10%;
    top: 83.6%;
    width: 79.5%;
    height: 6%;
	-webkit-tap-highlight-color : transparent;
}

.wrap .step03 .btnGo{
    position: absolute;
    left: 10%;
    top: 90.3%;
    width: 79.5%;
    height: 6%;
	-webkit-tap-highlight-color : transparent;
}

.wrap .step04_1{
	position:relative;
}
.wrap .step04_1 .btnGoInfo{
    position: absolute;
    left: 10%;
    top: 89.3%;
    width: 79.5%;
    height: 7%;
	-webkit-tap-highlight-color : transparent;
}

.wrap .step04_2{
	position:relative;
}
.wrap .step04_2 .btnGoQuiz{
    position: absolute;
    left: 10%;
    top: 89.3%;
    width: 79.5%;
    height: 7%;
	-webkit-tap-highlight-color : transparent;
}

.wrap .section02 {position:relative;}
.wrap .sns01{
	left: 43.6%;
    top: 15.8%;
    width: 15.2%;
    height: 66.4%;
    z-index:2;
}
.wrap .sns02{
	left: 61%;
    top: 15.8%;
    width: 15.2%;
    height: 66.4%;
    z-index:2;
}
.wrap .sns03{
    left: 78.4%;
    top: 15.8%;
    width: 15.2%;
    height: 66.4%;
    z-index:2;
}

.step05 .eventInputArea{position:absolute;top: 46%;width: 90%;}
.step05 .eventInputArea ul{position:relative;margin-bottom:0.571vw;padding-left:38vw;border-radius:0.781vw;overflow:hidden;}
.step05 .eventInputArea ul:last-child{ margin-bottom:0;}
.step05 .eventInputArea ul:after{ display:block; content:''; clear:both;}
.step05 .eventInputArea ul li.tit{position:absolute;left:0;top:0;width:24.286vw;text-align:center;line-height:8.286vw;font-weight:bold;background:#d0bb8b;font-size:3.143vw;color:#ffffff;}
.step05 .eventInputArea ul li input{
    height: 8.286vw;
    line-height: 8.286vw;
    padding: 0px 3vw;
    font-size: 5vw;
	border:0;width:100%;
	background:transparent;
	color:#505f69;
	}
.step05 .agreeWrap{position: absolute;
    overflow: hidden;
    top: 50%;
    width: 82%;
    margin: 11.5vw 0vw 0vw 9.688vw;
	overflow:hidden;}
.step05 .agreeArea.m{margin-top: 15.6%;}
.step05 .agreeArea{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:0.781vw;}

.step05 .agreeArea .tit{font-size:3.125vw;background:#d0bb8b;color:#ffffff;font-weight:bold;text-align:center;line-height:6.563vw;}
.step05 .agreeArea .agreeSrcoll{ background:#f7f5f2;height:26.65vw; font-size:3.143vw; line-height:4vw; overflow:auto;
	padding:2.125vw 2.5vw; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; 
	color:#505f69;text-align:left;
    background: transparent;
}

.step05 .agreeArea .agree{ width:48%; display:table; font-size:0; 
	padding:3.6vw 0vw 2.656vw 52%;
	text-align:center;
}
.step05 .agreeArea .agree.m{
	margin-top:0.6%;
}
.step05 .agreeArea .agree li{ display:inline-block; font-size:3.143vw;
	color:#694a1d;font-weight:bold;line-height:3.75vw;
}

.step05 .agreeArea .agree li:nth-child(1) {	width:40%;} 
.step05 .agreeArea .agree li:nth-child(2) {	    
	width: 45%;
    padding-left: 15%;
} 

.step05 .agreeArea .agree li .radio{
    text-align: left;
}
.step05 .agreeArea .agree li .radio.sec{
}
.step05 .agreeArea .agree li ~ li{/*margin-left:3.125vw;*/}
.step05 .agreeArea .agree li input{-webkit-appearance:none;background:url("../images/page05_btn.png") no-repeat;width:4vw;height:4vw;display:inline-block;vertical-align:top;-webkit-background-size:100% auto;background-size:100% auto;background-position:0% 101%;}
.step05 .agreeArea .agree li input:checked{background-position:101% 0%;}
.step05 .agreeArea .agree li label{vertical-align:top;display:block;width:100%;}

.step05 .agreeArea .agree li img{width:auto; height:2.571vw;}
.step05 .btnEventOk{
    left: 10%;
    top: 90.1%;
    width: 80%;
    height: 5.6%;
}

.dim_bg{ background:#0c0d38;opacity:0.7;position:fixed; left:0; top:0; width:100%; height:100%;z-index:11; display:none;}

.popup {display:none}
.popup .pt{display:none}
.popup .pt .img{display:none}

.step06 .btnGoBuy{
left: 7%;
top: 76.3%;
    width: 45%;
    height: 5.4%;
}
.step06 .btnGoChannel{
left: 7%;
top:93%;
    width: 45%;
    height: 5.2%;
}
.step06 .btnChannelFriend{
left: 10%;
    top: 51.7%;
    width: 81%;
    height: 5.9%;
}
.step06 .btnShareFriend{
left: 10%;
    top: 44.7%;
    width: 81%;
    height: 6.1%;
}

.btnRadio{
	width:11vw !important;
	height:4vw !important;
	 -webkit-tap-highlight-color : rgba(0,0,0,0);
}
.btnRadio2{
	width:13.5vw !important;
	height:5vw !important;
	 -webkit-tap-highlight-color : rgba(0,0,0,0);
}


.popupWrap{position:fixed;left:0;top:0%;

width:100%;z-index:999;display:none;}

.popupWrap .popupArea{
	position:relative;
}
.popupWrap .popupArea img{
	width:100%;
}
.popupWrap .popupArea .btnClose{
    position: absolute;
    left: 11%;
    top: 78%;
    width: 78%;
    height: 9.5%;
	-webkit-tap-highlight-color : transparent;
}
.popupWrap.x .popupArea .btnClose{
	top:89.5%
}
.popupWrap.x .popupArea .btnHint{
    position: absolute;
    left: 11%;
    top: 78%;
    width: 78%;
    height: 9.5%;
	-webkit-tap-highlight-color : transparent;
}
.popupWrap.hint .popupArea .btnClose{
	top:89.5%
}
.popupWrap .movieArea{
	position: absolute;
    top: 0%;
    width: 100%;
    height: 85.5%;
}