@charset "utf-8";
div.roullettEvent {}
div.roullettNew div.header_area{width:100%; height:1180px; background:url("../img/roullettEvent_titleImg2.png") no-repeat; background-position: 50% bottom;  background-color:#35c8cc; overflow: hidden}
div.roullettNew div.header_box{margin: 0 auto; width:100%; width:1100px; max-height:1200px; position: relative; text-align: center;}
div.roullettNew div.header_box p.eventDate{position: absolute; top:20px; left:0; padding-left:90px; height:83px; line-height: 29px; font-size:15px; color:#fff; background: url("../img/roullettEvent_new_title4.png") top left no-repeat;}
div.roullettNew div.header_box .title1{position: absolute; top:85px; left:42%; animation: title 1s; animation-delay: .1s;}
div.roullettNew div.header_box .title2{position: absolute; top:155px; left:20%; animation: title 1s; animation-delay: .15s;}
div.roullettNew div.header_box .title3{position: absolute; top:290px; left:28%; animation: title 1s; animation-delay: .2s;}
div.roullettNew div.header_box .title4{position: absolute; top:350px; left:140px; animation: title 1s; animation-delay: .2s;}

@-webkit-keyframes title {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.100, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.100, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 500px, 0);
    transform: translate3d(0, 500px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
    to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

div.roullettNew div.header_box div.gift_area div.right div.box1{position: absolute; top:970px; left:1180px; animation: rBox1 0.9s; animation-delay: .1s; width:348px; height:348px; background:url("../img/roullettEvent_new_rBox1.png")0 0 no-repeat;}
div.roullettNew div.header_box div.gift_area div.right div.box2{position: absolute; top:1090px; left:970px; animation: rBox1 0.9s; animation-delay: .15s; width:177px; height:173px; background:url("../img/roullettEvent_new_rBox2.png")0 0 no-repeat;}
div.roullettNew div.header_box div.gift_area div.right div.box3{position: absolute; top:830px; left:1050px; animation: rBox1 0.9s; animation-delay: .2s; width:175px; height:178px; background:url("../img/roullettEvent_new_rBox3.png")0 0 no-repeat;}
div.roullettNew div.header_box div.gift_area div.right div.box4{position: absolute; top:710px; left:1200px; animation: rBox1 0.9s; animation-delay: .15s; width:123px; height:122px; background:url("../img/roullettEvent_new_rBox4.png")0 0 no-repeat;}
div.roullettNew div.header_box div.gift_area div.right div.box5{position: absolute; top:740px; left:1120px; animation: rBox1 0.9s; animation-delay: .25s; width:45px; height:49px; background:url("../img/roullettEvent_new_rBox5.png")0 0 no-repeat;}
div.roullettNew div.header_box div.gift_area div.right div.box6{position: absolute; top:610px; left:1250px; animation: rBox1 0.9s; animation-delay: .25s; width:70px; height:70px; background:url("../img/roullettEvent_new_rBox6.png")0 0 no-repeat;}
div.roullettNew div.header_box div.gift_area div.left div.box1{position: absolute; top:990px; right:1000px; animation: rBox1 0.9s; animation-delay: .1s; width:322px; height:309px; background:url("../img/roullettEvent_new_lBox1.png")0 0 no-repeat;}
div.roullettNew div.header_box div.gift_area div.left div.box2{position: absolute; top:1070px; right:1250px; animation: rBox1 0.9s; animation-delay: .15s; width:171px; height:189px; background:url("../img/roullettEvent_new_lBox2.png")0 0 no-repeat;}
div.roullettNew div.header_box div.gift_area div.left div.box3{position: absolute; top:1090px; right:930px; animation: rBox1 0.9s; animation-delay: .2s; width:177px; height:173px; background:url("../img/roullettEvent_new_lBox3.png")0 0 no-repeat;}
div.roullettNew div.header_box div.gift_area div.left div.box4{position: absolute; top:820px; right:1150px; animation: rBox1 0.9s; animation-delay: .15s; width:74px; height:73px; background:url("../img/roullettEvent_new_lBox4.png")0 0 no-repeat;}
div.roullettNew div.header_box div.gift_area div.left div.box5{position: absolute; top:670px; right:1080px; animation: rBox1 0.9s; animation-delay: .25s; width:95px; height:93px; background:url("../img/roullettEvent_new_lBox5.png")0 0 no-repeat;}

@-webkit-keyframes rBox1 {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.100, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.100, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -1200px, 0);
    transform: translate3d(0, -1200px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
    to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

div.roullettNew div.info_area {width:100%; position: relative; display:block; background-color:#f6f6f6; color:#333; height:170px}
div.roullettNew div.info_area div.info_box{margin:0 auto; padding:25px 0; width:100%; max-width:1100px;}
div.roullettNew div.info_area div.info_box2{height:95px}
div.roullettNew div.info_area div.info_box h3{float:left; padding:40px 60px 0 155px; height:100px; font-size:23px; font-weight:bold; color:#000; background:url("../img/roullettEvent_infoIcon.png") 47px 33PX no-repeat;}
div.roullettNew div.info_area div.info_box p{float:left; font-size:14px; line-height:24px}
div.roullettNew div.info_area div.info_box p strong{color:#000}

.pc {
    display: block !important;
}
.mobile {
    display: none !important;
}

/* 768 */
@media screen and (max-width: 960px) {
  .pc {
    display: none !important;
  }
  .mobile {
    display: block !important;
  }
}

.evEarlybird{margin: 0 auto;max-width:684px}
.evEarlybird .rouletteWrap .wrap{background-position: bottom;padding-top: 62%;background-size: 80%;position: relative;min-height:auto}
.evEarlybird .rouletteWrap .power_controls{position: absolute;left: 50%;transform: translateX(-50%);top: 63%;width: 112px;height: 112px;}
.evEarlybird .rouletteWrap .power_controls #spin_button{width: 100%;height:100%;font-size: 0;background-image: url("../img/start_btn.png");border-radius: 120px;background-size: 100%;cursor:pointer;box-shadow: -4px 3px 9px 0 rgba(137, 75, 93, 0.38)}
.evEarlybird .rouletteWrap .the_wheel canvas{width: 684px;height: 684px;border-radius: 360px;box-shadow: -4px 3px 9px 0 rgba(137, 75, 93, 0.38);}
.evEarlybird .rouletteWrap .point_controls{position: absolute;left: 50.6%;transform: translateX(-50%);top: 36%;width: 58px;height: 75px;}
.evEarlybird .rouletteWrap .point_controls .point{width: 100%;height:100%;font-size: 0;background-image: url("../img/wheel_arrow.png") ;background-size: 100%;}
.earlybirdPop{position: fixed;width: 100%;height: 100%;left: 0;top: 0;background-color: rgba(0,0,0,0.5);display: none}
.earlybirdPop .wrap{position: absolute;top: 50%;transform: translate(-50%,-50%);width: 440px;left: 50%;overflow: hidden;border-radius: 11px;background-color: #fff;text-align: center;height:192px;padding-top: 64px;min-height:auto}
.earlybirdPop .wrap .txt{font-size: 18px;line-height: 24px;margin: 0 auto;text-align:center}
.earlybirdPop .wrap .txt span{font-size: 18px;line-height: 24px;}
.earlybirdPop .wrap .btn{position: absolute;bottom: 20px;left:25%;width: 50%;height: 44px;border-radius: 6px;}
.earlybirdPop .wrap .btn button{ background:var(--primary);color: #fff;font-size: 16px; border:0; border-radius: 6px; height: 44px;width:100%}

@media (max-width: 991px){

	div.roullettNew div.header_area{width:100%; height:640px; background-color:#35c8cc; overflow: hidden}
	div.roullettNew div.header_box{margin: 0 auto; width:100%; height:auto; position: relative;}
	div.roullettNew div.header_box p.eventDate{position: absolute; top:-40px; left:8px; padding-left:5px; line-height: 29px; font-size:13px; color:#fff; }
	div.roullettNew div.header_box{text-align: center;}

	div.roullettNew div.header_box div.title_area{margin:45px auto 0; }
	div.roullettNew div.header_box div.title_area .title_m_1{margin:0 auto; width:18%; animation: title 1s; animation-delay: .1s; display:block;}
	div.roullettNew div.header_box div.title_area .title_m_2{margin:10px auto; width:60%; animation: title 1s; animation-delay: .15s; display:block;}
	div.roullettNew div.header_box div.title_area .title_m_3{margin:0 auto; width:60%; animation: title 1s; animation-delay: .2s; display:block;}

	div.roullettNew div.info_area {width:100%;background-color:#f6f6f6; color:#333; height:160px}
	div.roullettNew div.info_area div.info_box {position:relative; padding:15px 25px;}
	div.roullettNew div.info_area div.info_box h3{width:100%;float:left; padding:0; height:30px; margin-bottom:5px; background:none; font-size:20px; font-weight:bold; color:#000; display:block}
	div.roullettNew div.info_area div.info_box p{font-size:0.8em; line-height:18px; list-style: none}
	div.roullettNew div.info_area div.info_box p strong{color:#000; font-weight:bold}

    .evEarlybird{margin: 0 auto;width:100%}
	.evEarlybird .rouletteWrap .wrap{background-position: bottom;padding-top: 8.5%;background-size: 80%;position: relative;min-height:auto}
	.evEarlybird .rouletteWrap .the_wheel canvas{width: 384px;height: 384px;border-radius: 360px;box-shadow: -4px 3px 9px 0 rgba(137, 75, 93, 0.38);}

	.evEarlybird .rouletteWrap .power_controls{position: absolute;left: 50%;transform: translateX(-50%);top: 45%;width: 71px;height: 71px;}
	.evEarlybird .rouletteWrap .the_wheel canvas{width: 384px;height: 384px;border-radius: 360px;box-shadow: -4px 3px 9px 0 rgba(137, 75, 93, 0.38);}
	.evEarlybird .rouletteWrap .point_controls{position: absolute;left: 50.6%;transform: translateX(-50%);top: 6%;width: 40px;height: 52px;}

	.earlybirdPop .wrap{width: 360px;height:192px;}
	.earlybirdPop .wrap .txt{font-size: 15px;line-height: 24px;margin: 0 auto;text-align:center;}
	.earlybirdPop .wrap .txt span{font-size: 15px;line-height: 24px;}
	.earlybirdPop .wrap .btn{position: absolute;bottom: 20px;left:25%;width: 50%;height: 44px;border-radius: 6px;}
	.earlybirdPop .wrap .btn button{ background:var(--primary);color: #fff;font-size: 15px; border:0; border-radius: 6px; height: 44px;width:100%}

}