@charset "utf-8";
/* CSS Document */
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
*{font-family: 'Noto Sans TC',Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; background-repeat:no-repeat;-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
}
body,html{ width:100%; min-width:1366px; height:auto; background-size:1920px; margin:0 auto; }
html{ overflow-x:hidden; }
body{ width:100%; overflow:hidden;}
section{ width:100%; position:relative; margin:-19px auto;}
.outer{ width:1366px; margin:0 auto; position:relative; }
@media (max-width:1366px){
  html{ overflow-x:scroll; }
}
@media (max-width:765px){
	body,html{ overflow-x:hidden; min-width:100%; background-color:#ffa5a5;}
	.outer{width:100%;overflow:visible;}
}

/*link*/
#hamburger{display:none;}
#right_link{position:fixed; z-index:99; display:block; width:135px; height:334px; background-image:url('../img/right_link_bg.png'); right:10px; top:60px; box-sizing:border-box; padding:80px 0 0 0;}
#right_link > a{display:block; width:100%; text-align:center; overflow:hidden; background-position:center; text-indent:-999px;}
#right_link > a:hover{filter:brightness(1.1);}
#right_link > a:nth-child(2){height:22px; background-image:url('../img/r_link_01.png'); margin:11px 0 0 0;}
#right_link > a:nth-child(3){height:22px; background-image:url('../img/r_link_02.png'); margin:23px 0 0 0;}
#right_link > a:nth-child(4){height:23px; background-image:url('../img/r_link_03.png'); margin:22px 0 0 0;}
#right_link > a:nth-child(5){height:38px; background-image:url('../img/r_link_04.png'); margin:21px 0 0 0;}
#right_link > a:nth-child(6){text-indent:0; color:#fff; font-size:12px; font-weight:500; background-color:#d91f47; width:80px; height:22px; line-height:22px; border-radius:22px; margin:22px auto; }
@media (max-width:765px){
	#right_link{background-image:none; background-image: -moz-linear-gradient( 90deg, rgb(176,21,58) 0%, rgb(212,25,70) 100%);background-image: -webkit-linear-gradient( 90deg, rgb(176,21,58) 0%, rgb(212,25,70) 100%);background-image: -ms-linear-gradient( 90deg, rgb(176,21,58) 0%, rgb(212,25,70) 100%); width:100%; height:1.2rem; right:0; bottom:0; top:auto; padding:5% 0;text-align: center;font-size:0;}
	#right_link > a{display:inline-block;width:auto;text-indent:0;font-size:0.3rem; color:rgba(255,255,255,0.8);vertical-align:middle;padding:0 0.5rem; position:absolute;}
	#right_link > a:nth-child(2){height:80%; background-image:none; margin:0; top:10%; left:2.4rem; box-sizing:border-box; padding-top:0.3rem;}
	#right_link > a:nth-child(3){height:80%; background-image:none;; margin:0; box-sizing:border-box; padding-top:0.32rem; top:10%; left:0.2rem; background-color:#61020D;}
	#right_link > a:nth-child(4){height:80%; background-image:none;; margin:0; box-sizing:border-box; padding-top:0.32rem; top:10%; left:4.6rem; }
	#right_link > a:nth-child(5){height:80%; background-image:none;; margin:0; box-sizing:border-box; padding-top:0.32rem; padding:0.3rem 0.33rem; top:10%;left:6.9rem; }
	#right_link > a:nth-child(6){font-size:0.3rem; width:1rem; height:1rem; line-height:1rem; border-radius:1rem; margin:22px auto; position:fixed; bottom:1rem; right:0.2rem; padding:0;}
	#goTop.fade{display:none;}
}
/*content_01*/
header{width:100%; height:929px; background-image:url('../img/kv.jpg'); background-position:center top; text-align:center;}
header h1,header h2{width:100%;overflow:hidden; text-indent:-99999px;}
.logo{ display:block; background-image:url('../img/RO_logo.png'); width:171px; height:113px; overflow:hidden; text-indent:-999px; margin:-55px auto 0 auto;}
.logo.ros{background-image:url('../img/ros_logo.png');}
.game_link{ position:absolute; width:870px; left:50%; margin-left:-435px; top:20px;}
.game_link a{ display:block; position:absolute; width:251px; height:126px; overflow:hidden; text-indent:-999px; filter:brightness(0.75);}
.game_link a:hover{filter:brightness(1.0);}
a.go_ro{background-image:url('../img/btn_go_RO.png'); left:0;}
a.go_ro:hover{left:-10px;}
a.go_ro.now,a.go_ros.now{filter:brightness(1.0);}
a.go_ro.now:hover{left:0;}
a.go_ros{background-image:url('../img/btn_go_ROS.png'); right:0;}
a.go_ros:hover{right:-5px;}
a.go_ros.now:hover{right:0}
.event_link{ position:relative; width:729px; text-align:center; margin:625px auto 0 auto; font-size:0; }
.event_link > a{ display:inline-block; width:339px; height:98px; overflow:hidden; text-indent:-9999px; position:absolute;}
.event_link > a:nth-child(1){background-image:url('../img/btn_01.png'); left:0;}
.event_link > a:nth-child(2){background-image:url('../img/btn_02.png'); right:0;}
.event_link > a:hover{filter:brightness(1.1);}
.poring{position:absolute;top:685px;left:-50px;}
.poring.pink{ width:205px; height:166px; background-image:url('../img/pink_poring.png');}
.poring.blue{ width:251px; height:181px; background-image:url('../img/blue_poring.png');}
@media (max-width:765px){
	header{ height:0; padding-bottom:120%; background-image:url('../img/m_kv.png');background-size:100%;}
	.logo{  width:24%; height:0; padding-bottom:16%; background-size:100%; margin:0 auto; position:absolute; left:38%; top:11%;}
	.game_link{ width:95%; left:2.5%; margin-left:0; top:12%;}
	.game_link a{ width:32%; height:0; padding-bottom:17%; background-size:100%;}
	.event_link{ width:95%; position:absolute; margin:0 auto; left:2.5%; top:245%;}
	.event_link > a{ width:36%; height:0; padding-bottom:11%; background-size:100%; overflow:hidden; text-indent:-9999px; position:absolute;}	
	.poring{display:none;}
}
/*content_01*/
.content_01{ position:relative; background-image:url('../img/bg_02.jpg'); background-repeat:repeat;  line-height:1.5; text-align:center; }
.content_01 > div > p{width:815px; height:100px; text-indent:-99999px; overflow:hidden; padding:85px 0; margin:0 auto; background-image:url('../img/img_text.png'); background-repeat:no-repeat; background-position:center;}
.content_01 > div > p.text_ros{background-image:url('../img/img_ros_text.png'); background-size:100%;}
.event_text{width:980px; margin:0 auto; box-sizing:border-box; padding:20px; background-color:#fffeea; text-align:justify;}
.event_text > div{border:5px solid #db504c; box-sizing:border-box; padding:40px;}
.event_text ul{ margin-top:-20px; margin-bottom:20px;}
.event_text ul li{font-size:24px; color:#333; margin-bottom:-10px; padding-left:100px; text-align:justify;}
.event_text ul li:nth-child(2){margin-bottom:20px;}
.event_text ul li h4{ font-family:Arial, "sans-serif"; padding:5px 10px ; background-color:#db504c; display:inline-block; color:#fff; margin-bottom:-6px; margin-left:-100px; margin-right:10px; font-weight:normal; font-size:20px;}
.event_text ul li b{font-weight:normal;color:#db504c;}
.event_text ul li br{display:none;}
.event_text ul li:nth-child(2) br{display:block;}
.fbBtn{display:inline-block; vertical-align:middle; transform:scale(1.5); margin-left:20px; margin-bottom:20px;}
.tip{background-color:#fff734;line-height:1.8;}
.content_01 a{display:inline-block; background-image:url('../img/btn_03.png'); width:417px; height:120px; overflow:hidden; text-indent:-99999px; margin:80px auto;}
.content_01 a:hover{filter:brightness(1.1);}
.ch_01,.ch_02,.ch_03{position:absolute;}
.ch_01{width:514px;height:422px;background-image:url('../img/ch_01.png'); top:20px; right:-200px;}
.ch_01.ros{background-image:url('../img/ch_dog.png');top:120px;}
.ch_02{width:258px;height:279px;background-image:url('../img/ch_02.png');bottom:0;left:175px;}
.ch_03{width:269px;height:236px;background-image:url('../img/ch_03.png');bottom:0;right:175px;}
@media (max-width:765px){
	.content_01{ background-image:none; background-color:#ffa5a5;}
	.content_01 > div > p{ width:90%; height:2.4rem; padding:0; background-size:100%;}
	.event_text{width:90%; padding:4%;}
	.event_text > div{border:0.12rem solid #db504c; padding:8%;}
	.event_text ul{ margin-top:-5%; margin-bottom:10%;}
	.event_text ul li{font-size:0.4rem; margin-bottom:20%; padding-left:0%; text-align:justify;}
	.event_text ul li:nth-child(1){text-align:center;}
	.event_text ul li h4{ display:block; width:100%; padding:2.1% 0 2% 0 ; margin-bottom:10%; box-sizing:border-box; margin-left:0; margin-right:0; font-size:0.5rem; text-align:left;text-align: center;}
	.event_text ul li br{display:block;}
	.fbBtn{vertical-align:middle; transform:scale(1.5); margin-left:0; margin-bottom:0%; margin-top:10%; }
	.ch_01{background-size:100%; width:55%; height:0; padding-bottom:48%; right:-25%; top:20%;}
	.ch_01.ros{ width:43%; top:24%; right:-8%;}
	.tip{font-size:0.4rem; display:block; box-sizing:border-box; padding:5%; margin-top:0%;}
	.content_01 a{width:70%; height:1.8rem; border-radius:1.8rem; color:#fff; text-indent:0; font-size:0.75rem; font-weight:500; letter-spacing:0.05rem; line-height:1.8rem; border:3px solid #ad2b25;
   z-index:8; position:relative; margin-top:15%; margin-bottom:14%; background-image: -moz-linear-gradient( 90deg, rgb(176,21,58) 0%, rgb(212,25,70) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb(176,21,58) 0%, rgb(212,25,70) 100%);background-image: -ms-linear-gradient( 90deg, rgb(176,21,58) 0%, rgb(212,25,70) 100%);}
	.ch_02,.ch_03{display:none;}
}
/*content_02*/
.content_02{ position:relative; text-align:center; background-image:url('../img/bg_03.jpg');background-repeat:repeat; padding:90px 0px; color:#464079; font-size:28px;}
.content_02 h3{ display:block; width:903px; height:120px; background-image:url('../img/title_01.png'); background-position:center; margin:0 auto; overflow:hidden; text-indent:-9999px;}
.now_time{ width:980px; height:60px; line-height:60px; font-size:24px; margin:60px auto; color:#fff; background-color:#337cdf;}
.content_02 ul{counter-reset:list; background-image:url('../img/text_bg.png');background-size:100%;width:980px; margin:60px auto; box-sizing:border-box; padding:45px 60px 45px 82px; font-size:20px;}
.content_02 ul li{width:100%; line-height:1.5; text-align:justify; margin:10px 0; word-break:break-all;}
.content_02 ul li:nth-child(3){color:#db504c;}
.content_02 ul li::before{counter-increment:list; content:counter(list); display: inline-block; font-size:12px; width:20px; height:20px; border-radius:100%; text-align:center; margin-left:-28px; margin-top:4px; margin-right:10px; background-color:#464079;color:#fff; vertical-align:text-top;}
.login_before a,.login_after a{display:inline-block; vertical-align:middle;height:40px; line-height:40px; border-radius:40px; padding:0 20px; font-size:18px; margin:-10px 5px 0 5px;color:#fff;
}
.login_before a:hover,.login_after a:hover{filter:brightness(1.2);}
.login_before a{
	border:3px solid #2d6dc3;
	background-image: -moz-linear-gradient( 90deg, rgb(29,77,143) 0%, rgb(53,130,233) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb(29,77,143) 0%, rgb(53,130,233) 100%);
	background-image: -ms-linear-gradient( 90deg, rgb(29,77,143) 0%, rgb(53,130,233) 100%);
}
.login_after a:nth-child(2){
	border:3px solid #ad2b25;
	background-image: -moz-linear-gradient( 90deg, rgb(176,21,58) 0%, rgb(212,25,70) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb(176,21,58) 0%, rgb(212,25,70) 100%);
	background-image: -ms-linear-gradient( 90deg, rgb(176,21,58) 0%, rgb(212,25,70) 100%);
}
.login_after a:nth-child(3){
	border:3px solid #3e386b;
	background-image: -moz-linear-gradient( 90deg, rgb(65,59,112) 100%, rgba(74,67,127,0) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb(65,59,112) 100%, rgba(74,67,127,0) 100%);
	background-image: -ms-linear-gradient( 90deg, rgb(65,59,112) 100%, rgba(74,67,127,0) 100%);
}
.content_02 h4{text-indent:-99999px; width:100%; font-size:0; overflow:hidden;}
.content_02 button{position:absolute;bottom:0; width:220px; height:81px; background-size:100%; left:50%; margin-left:-110px;text-indent:-999px;overflow:hidden; font-family: 'Noto Sans TC',Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";}
.content_02 button.get_no{background-image:url('../img/btn_get_no.png');}
.content_02 button.get_yes{background-image:url('../img/btn_get_yes.png');}
.card_box{display:inline-block; margin-right:20px; margin-bottom:100px; margin-top:50px; }
.card_01,.card_02,.card_01,.card_03{ position:relative; display:inline-block; background-position:center top; width:320px; height:700px; background-size:100%; }
.card_text{position:absolute; font-size:14px; color:#fff; width:60%; text-align:center; left:20%; top:360px; line-height:1.5;}
.card_01{margin-left:35px;}
.before{cursor:pointer;}
.before::after{width:100%;height:580px;content:'';background-color:rgba(0,0,0,0.15); display:block;z-index:0; position:absolute;}
.card_01.before{background-image:url('../img/m_card_01_before_02.jpg'); }
.card_01.after{background-image:url('../img/m_card_01_bg.jpg?324235235'); }
.content{ width:205px; height:205px; position:absolute; top:304px; right:58px; color:#666; }
#redux_01,#redux_02,#redux_03{position: absolute; width: 205px; height: 205px; left:0px; top: 0px; z-index: 20; -webkit-user-select: none; -moz-user-select: none; cursor:url("../img/coin.png") 32 32, default;}
#redux_01 canvas{border-radius:10%}
.content .mask{background-color:#fff; overflow:hidden; box-sizing:border-box; padding:8% 5%; width:96%;height:96%;position:absolute;left:2%;top:2%;border-radius:30px;z-index:10;}
.content img{width:30%;}
.content h5{font-size:28px; margin:0 auto;}
.cont-span{font-size:14px;width:80%;display:block; margin:5px auto;line-height:1.8;}
.cont-span::before{content:"獲得 ";}
.card_02.before{ background-image:url('../img/m_card_02_before.jpg'); }
.card_02.after{background-image:url('../img/m_card_02_bg.jpg?23423235');}
.card_03.before{ background-image:url('../img/m_card_03_before.jpg'); }
.card_03.after{background-image:url('../img/m_card_03_bg?234235235.jpg');}
.ch_05{ position:absolute; background-image:url('../img/ch_05.png'); width:373px; height:451px; right:-250px; top:1080px; }
.ch_06{ position:absolute; background-image:url('../img/ch_06.png'); width:356px; height:891px; left:-250px; top:150px;}
h5.overMsg{margin-top:45px;line-height:1.2;}
@media (max-width:765px){
	.content_02{padding:15% 0px; font-size:0.6rem;}
	.content_02 h3{ width:70%; height:0; padding-bottom:30%; background-image:url('../img/m_title_01.png'); background-size:100%; }
	.content_02 button.scratch{ width:50%; height:1.5rem; border-radius:1.5rem; left:25%; margin-left:0; top:8rem; text-indent:0; font-size:20px; font-weight:600;}
	.now_time{ position:relative; z-index:10; width:90%; height:1.2rem; line-height:1.2rem; font-size:0.4rem; margin:0.6rem auto 1rem auto; }
	div.login_before,div.login_after{ z-index:10; position:relative; display:block; width:90%; margin-left:5%; font-size:0.45rem;}
	.login_before a,.login_after a{ height:1rem; line-height:1rem; border-radius:0.8rem; padding:0 1rem; font-size:0.4rem; margin:8% 5px 0 5px;color:#fff;}
	.card_text{ width:50%; left:25%; font-size:0.33rem; top:10rem;}
	.content_02 ul{z-index:10; position:relative; background-image:none; background-color:rgba(255,255,255,0.75);  width:90%; margin:15% auto; padding:0.5rem 1.2rem 0.5rem 2rem; font-size:0.4rem;}
	.content_02 ul li{margin:4% 0;}
	.content_02 ul li::before{ font-size:0.2rem; width:0.5rem; height:0.5rem; line-height:0.5rem; margin-left:-0.74rem; margin-top:0.09rem; margin-right:0.2rem; }
	.card_box{display:block; margin-right:0; margin-bottom:0; }
	.before::after{height:16.2rem;position:absolute;}
	.card_01,.card_02,.card_03{ width:90%; height:18.3rem; margin:0rem auto; background-size:100%;}
	.card_01.after{background-image:url('../img/m_card_01_bg.jpg'); }
	.card_02{margin-top:1.8rem; line-height:1.5;}
	.card_02.before{ height:20.2rem; background-image:url('../img/m_card_02_before.jpg'); background-position:center top; font-size:0.5rem;}
	.card_02.after{ background-image:url('../img/m_card_02_bg.jpg'); margin-top:0.2rem;}
	.card_03.after{margin-bottom:0.9rem;}
	.card_03.before{margin-bottom:0.8rem;}
	.content{width:66%; height:5.8rem; top:8.5rem; right:17%; }
	#redux_01,#redux_02,#redux_03{width:6rem;height:5.8rem;}
	.content_02 button{width:40%; background-size:100%; height:1.5rem;left:30%; margin-left:auto;}
	.content h5{font-size:0.8rem; margin:0.5rem auto 0 auto; line-height:1;}
	.cont-span{font-size:0.33rem;width:100%;display:block; margin:0.2rem auto;}
	.ch_05{ width:3rem; height:4.5rem;  right:-0.4rem; z-index:20; top:auto; bottom:-3.4rem; background-size:100%; }
	.ch_06{ background-size:100%; width:40%; height:0; padding-bottom:50%; left:-15%; top:8.5rem;z-index:10;}
	h5.overMsg{ font-size:0.8rem; margin-top:1.1rem;line-height:1.2;}
}
/*notice*/
.notice{background-color:#337cdf;color:#ebf8fe; font-size:16px; line-height:1.5; font-weight:300; padding:50px 0 80px 0;}
.notice h4{color:#fef095;font-weight:600;font-size:30px;margin:0 0 10px 210px;}
.notice ol{width:960px; margin:0 auto ; letter-spacing:1px;}
.notice ol > li{list-style:decimal-leading-zero;margin:5px 20px;}
.notice ol > li > ul{margin:10px 0 10px 25px;}
.notice ol > li > ul > li{list-style:disc; margin:5px 0;}
.notice ol > li > a{color:#fef095;}
.ch_07{ position:absolute; width:279px; height:238px; background-image:url('../img/ch_07.png'); right:0px; bottom:0;}
@media (max-width:765px){
	.notice{padding:10% 0 40% 0;}
	.notice h4{font-size:0.8rem; margin:0 auto; text-align:center; margin-bottom:2%;}
	.notice ol{width:90%; font-size:0.34rem;}
	.ch_07{background-size:100%; position:relative; width:50%; height:0; padding-bottom:43%; left:25%; margin-top:15%; margin-bottom:-20%;}
}
/*footer*/
#FOOTER{background-color:#214a87;}

/*colorbox*/
#cboxClose{background-image:url('../img/btn_cb_close.png'); width:4%; height:0px; padding-bottom:4%; background-size:100%; right:68px; top:20px;}
#cboxClose:hover{transform:scale(0.9);}
@media (max-width:765px){
	#cboxClose{ width:0.6rem;padding-bottom:0.6rem; right:2%; top:2%;}
	#cboxWrapper{padding-top:0;}
}

/*loding button*/

button.load-more{
  width:200px;
  height:60px;
  border-radius:60px;
  margin-left:-100px;
  top:280px;
  text-indent:0;
  font-size:20px;
  font-weight:600;
  background-color:#fff331;
  border:2px solid #f2d42d;
  color:#4b3c32;
  box-shadow: 0px 5px 5px rgba(0,0,0,0.2);
  z-index:10;
  transition: all 0.2s ease, background-color 0.01s ease, color 0.01s ease;
}
.load-more.load-more--loading {
  -webkit-animation: rotate 1.5s linear infinite;
          animation: rotate 1.5s linear infinite;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  background-color: transparent;
  border: 0.3em solid #e1e1e1;
  border-radius: 1.5em;
  border-top-color: #444;
  box-sizing: border-box;
  height:60px;
  color: transparent;
  padding: 0;
  pointer-events: none;
  width:60px;
  left:50%;
  margin-left:-30px;
}

.load-more.nono.load-more--loading{
  width:200px;
  height:60px;
  border-radius:60px;
  margin-left:-100px;
  top:280px;
  text-indent:0;
  font-size:20px;
  font-weight:600;
  background-color:#fff331;
  border:2px solid #f2d42d;
  color:#4b3c32;
  box-shadow: 0px 5px 5px rgba(0,0,0,0.2);
  z-index:10;
  transition: all 0.2s ease, background-color 0.01s ease, color 0.01s ease;
  -webkit-animation:none;
          animation:none;
}

button.load-more.nono,.before:hover button.load-more.nono,button.load-more.nono:hover{
	-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);  
    filter: grayscale(100%);
    filter: gray;
}

.before:hover button.load-more,button.load-more:hover{
	top:282px;
	filter:brightness(1.03);
}


@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@media (max-width:765px){

	button.load-more{
		width:50%;
		height:1.5rem;
		border-radius:1.5rem;
		left:25%;
		margin-left:0;
		top:8rem;
		text-indent:0;
		font-size:20px;
		font-weight:600;
	}
	.load-more.nono.load-more--loading{
		width:50%;
		height:1.5rem;
		border-radius:1.5rem;
		left:25%;
		margin-left:0;
		top:8rem;
		text-indent:0;
		font-size:20px;
		font-weight:600;
	}
	.before:hover button.load-more,button.load-more:hover{
		top:8.05rem;
	}
	.before:hover button.load-more.nono,button.load-more.nono:hover{
		top:8rem;
	}

}