@charset "UTF-8";
/**
 * 
 * @authors Mina
 */

@media only screen and (max-height: 852px) {

	#left_menu {
		margin-top: auto;
	    top: 222px;
	}

}

@media only screen and (max-width: 1300px) {
	
	#gotopbox .in {
		width: 100%;
		min-width: 1000px;
	}

	#gotopbox .gotop {
		right: 7px;
	}

}

@media only screen and (max-width: 800px) {

	body {
		width: 100%;
		min-width: 240px;
	}

	.in {
	    top: 0;
    	position: absolute;
    	width: 100%;
	}

	#page1 {
		height: auto;
	    padding-top: 180%;
	    background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/main_bg_sp.jpg') top center no-repeat;
	    background-size: cover;
	}

	#page1 .bg1, #page1 .bg2, #left_menu, #apps {
		display: none;
	}

	#page1 .top {
        margin-top: 5% !important;
	    max-width: 60px;
	    width: 8%;
	    padding-top: 3.3%;
	    right: 4%;
	}

	#page1 .top li {
		max-width: 60px;
	    width: 100%;
	    height: auto;
	    padding-top: 100%;
	}

	#page1 .top .fb {
		display: none;
	}

	#page1 .open_ball {
		max-width: 604px;
	    width: 76%;
	    padding-top: 93%;
	}

	@keyframes ball_ani {
		0% {
			transform: scale(0.5);
			top: -300px;
		    opacity: .5;
		    left: 0;
		}
		50% {
			opacity: 1;
			transform: scale(1);
		}
		100% {
			top: 70%;
		    left: 50%;
		}
	}

	#page1 .logo {
		left: auto;
		right: 3%;
		top: 7%;
		max-width: 333px;
	    width: 42%;
	    height: auto;
	    padding-top: 22%;
	    margin-top: 8% !important;
	}

	#page1 .pic {
		max-width: 1837px;
	    width: 230%;
	    height: auto;
	    padding-top: 187%;
	    top: -3%;
	    left: -48%;
	}

	#page1 .ball {
		display: block;
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/open_ball2.png') top center no-repeat;
		max-width: 246px;
	    width: 31%;
	    height: auto;
	    padding-top: 38%;
	    position: absolute;
	    background-size: contain;
        top: 24% !important;
    	right: 7%;
    	opacity: 0;
	}

	#page1 .rt {
		width: 100%;
    	height: 100%;
	}

	#page1 .rt div {
		position: absolute;
	}

	#page1 .title {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/title_sp.png') top center no-repeat;
		max-width: 583px;
	    width: 73%;
	    height: auto;
	    padding-top: 33%;
	    background-size: contain;
	    margin-top: auto !important;
	    top: 44.5%;
    	right: 1.3%;
	}

	#page1 .btn1 {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/main_btn1_sp.png') top center no-repeat;
	}

	#page1 .btn2 {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/main_btn2_sp.png') top center no-repeat;
		margin: 0 auto;
	    margin-left: 1%;
	}

	#page1 .btns {
		margin: 0 auto !important;
	    top: 73%;
	    right: 0;
	    left: 0;
	    text-align: center;
	}

	#page1 .btns li {
		max-width: 340px;
		width: 43%;
		height: auto;
		padding-top: 13.5%;
		background-size: contain;
	}

	#page1 .apps {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/main_apps_sp.jpg') top center no-repeat;
		max-width: 520px;
	    width: 65%;
	    height: auto;
	    padding-top: 20%;
	    background-size: contain;
	    margin: 0 auto !important;
	    top: 82%;
	    right: 0;
	    left: 0;
	}

	#page1 .apps .google {
		width: 45%;
	    height: auto;
	    padding-top: 13%;
	    left: 3%;
	    top: 46%;
	}

	#page1 .apps .ios {
		width: 45%;
		height: auto;
		padding-top: 13%;
		left: 50%;
		top: 46%;
	}

	#page1 .topmenu {
		display: block;
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/main_topmenu.png') top center no-repeat;
		max-width: 80px;
	    width: 13%;
	    padding-top: 9.4%;
	    background-size: contain;
	    top: 3.5%;
	    position: absolute;
	    left: 5%;
	    cursor: pointer;
	}

	#page2 {
		height: auto;
    	padding-top: 180%;
    	background-size: cover;
	    background-position-x: 34%;
	}

	#page2 .title {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/page2_title_sp.png') top center no-repeat;
		max-width: 602px;
		width: 76%;
		height: auto;
		padding-top: 24%;
		background-size: contain;
		margin: 0 auto;
		left: 6.5%;
		top: 6%;
	}

	#page2 .pic {
		max-width: 372px;
	    width: 47%;
	    height: auto;
	    padding-top: 172.6%;
	    background-size: contain;
	    right: -1.2%;
	}

	#page2 .paper {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/page2_paper.jpg') top center no-repeat;
		max-width: 699px;
	    width: 88%;
	    height: auto;
	    padding-top: 99%;
	    background-size: contain;
	    margin: 0 auto;
	    left: 0;
	    right: 0;
	    top: 24.5%;
	}

	#page2 .btn {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/page2_btn.jpg') top center no-repeat;
		max-width: 367px;
	    width: 53%;
	    height: auto;
	    padding-top: 15.5%;
	    background-size: contain;
	    margin: 0 auto;
	    top: 80.2%;
	    position: absolute;
	    right: 0;
	    left: 0;
	}

	#page2 .paper ul {
		width: 57%;
	    position: absolute;
	    top: 15.2%;
	    margin: 0 auto;
	    left: 35%;
	}

	#page2 .paper li p {
	    font-size: 4vw;
	}

	#page2 .paper .step1 iframe.pc {
		display: none;
	}

	#page2 .paper .step1 iframe.sp {
		display: block;
	}

	#page2 .paper .step1 {
		margin-top: 1%;
	}

	#page2 .paper .step2 {
    	margin-top: 9%;
	}

	#page2 .step2 .radios {
		font-size: 4vw;
	    margin-top: 1.5%;
	}

	#page2 .paper .step3 {
		margin-top: 10%;
	}

	#page2 .tip {
		margin: 0 auto;
	    top: 83%;
	    right: 0;
	    left: 0;
        width: 82%;
		font-size: 3.2vw;
		padding: 1.5% 2.5%;
		line-height: 4vw;
	}

	#page2 .step2 .label1 {
	    margin-right: 4%;
	    margin-top: 3%;
	}

	input[type=radio   ]:not(old) + label{
		line-height: 3.2vw;
		background-size: 3.2vw;
	    padding-left: 9%;
	}

	input[type=radio]:not(old):checked + label{
		background-position : 0 -3.2vw;
	}

	#page2 .step3 select {
		max-width: 126px;
		width: 32%;
		height: auto;
		line-height: 5.4vw;
		font-size: 3.6vw;
		background-position-x: 86%;
		background-size: 8%;
		padding-left: 6%;
		margin-top: 2.5%;
		margin-left: -1%;
	}

	#page2 .step3 input {
		max-width: 256px;
	    width: 65%;
	    font-size: 3.6vw;
	    line-height: 5.4vw;
	    height: auto;
	    margin-left: 0.5%;
	    padding-left: 2%;
	    padding-right: 2%;
	}

	#page3 {
		height: auto;
    	padding-top: 180%;
    	background-size: cover;
	    background-position-x: 47%;
	}

	#page3 .title {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/page3_title.png') top center no-repeat;
		max-width: 567px;
	    width: 71%;
	    height: auto;
	    padding-top: 13%;
	    background-size: contain;
	    left: 24%;
    	margin-top: 13%;
	}

	#page3 .pic {
		display: none;
	}

	#page3 .total {
		width: 100%;
	    height: auto;
	    padding-top: 16.5%;
	    margin-top: 28.5%;
	    background: #fff url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/page3_nbbg.png') top center repeat;
	}

	#page3 .total p {
		font-size: 4.2vw;
	    margin: 0 auto;
	    position: absolute;
	    top: 6%;
	    left: 7%;
	}

	#page3 .total ul {
		position: absolute;
	    margin: 0 auto;
	    left: 0.5%;
	    margin-top: -9%;
	    width: 48%;
	    z-index: 1;
	    padding-right: 0;
	}

	#page3 .total li {
		max-width: 45px;
	    width: 10%;
	    height: 100%;
	    padding-top: 15%;
	    text-align: right;
	    margin-left: 0.45%;
	}

	#page3 .btn {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/page3_btn.jpg') top center no-repeat;
		max-width: 330px;
		width: 42%;
		height: auto;
		padding-top: 12.5%;
		margin: 0 auto;
		top: 17%;
		z-index: 1;
		right: 6%;
		background-size: contain;
	}

	#page3 .total .n0 {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/numbers.png') top left no-repeat;
		background-position-x: 0.3%;
		background-size: cover;
	}

	#page3 .total .n1 {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/numbers.png') top left no-repeat;
		background-position-x: 11%;
		background-size: cover;
	}

	#page3 .total .n2 {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/numbers.png') top left no-repeat;
		background-position-x: 22.2%;
		background-size: cover;
	}

	#page3 .total .n3 {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/numbers.png') top left no-repeat;
		background-position-x: 33.5%;
		background-size: cover;
	}

	#page3 .total .n4 {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/numbers.png') top left no-repeat;
		background-position-x: 44.5%;
		background-size: cover;
	}

	#page3 .total .n5 {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/numbers.png') top left no-repeat;
		background-position-x: 56%;
		background-size: cover;
	}

	#page3 .total .n6 {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/numbers.png') top left no-repeat;
		background-position-x: 66%;
		background-size: cover;
	}

	#page3 .total .n7 {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/numbers.png') top left no-repeat;
		background-position-x: 77.5%;
		background-size: cover;
	}

	#page3 .total .n8 {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/numbers.png') top left no-repeat;
		background-position-x: 88.2%;
		background-size: cover;
	}

	#page3 .total .n9 {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/numbers.png') top left no-repeat;
		background-position-x: 99.5%;
		background-size: cover;
	}

	#page3 .rewards {
		margin-top: auto;
	    top: 27%;
	    left: 0;
	    right: 0;
	}

	#page3 .rewards li {
		max-width: 703px;
	    width: 88%;
	    height: auto;
	    padding-top: 22.8%;
	    margin: 0 auto;
    	margin-top: -2.2%;
	}

	#page3 .rewards p {
		font-size: 3.2vw;
	    bottom: 12%;
	    right: 1.6%;
	}

	#page3 .rewards li.active .finish {
		max-width: 114px;
	    width: 17%;
	    height: auto;
	    padding-top: 13%;
	    margin: 0 auto;
	    left: 6.6%;
	    top: 34%;
	}

	#page4 {
		height: auto;
    	padding-top: 180%;
    	background-size: cover;
	    background-position-x: 80%;
	}

	#page4 .pic {
		max-width: 773px;
		width: 97%;
		height: auto;
		padding-top: 173%;
		left: auto;
		right: -15%;
	}

	#page4 .title {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/page4_title_sp.png') top center no-repeat;
		max-width: 447px;
	    width: 56%;
	    height: auto;
	    padding-top: 31%;
	    margin-top: 12%;
	    right: auto;
	    left: 6%;
	    background-size: contain;
	}

	#page4 .paper {
		max-width: 705px;
		height: auto;
		width: 88.5%;
		padding-top: 113.5%;
		margin: 0 auto;
		right: 0;
		left: 0;
		top: 29.7%;
	}

	#page4 .paper .txt {
		font-size: 4.1vw;
	    line-height: 4.8vw;
	    position: absolute;
	    top: 0;
	    padding: 5.2% 6% 2% 6%;
	}

	#page4 .paper .txt span {
		font-size: 6vw;
	}

	#page4 .paper .txt2 {
	    font-size: 3.2vw;
		position: absolute;
		top: 14.8%;
	}

	#page4 .paper ul {
		position: absolute;
	    padding: 0 6%;
	    margin: 0 auto;
	    top: 27.2%;
	}

	#page4 .paper li {
		height: auto;
        padding-top: 1%;
    	padding-bottom: 3.8%;
	    width: 100%;
	    margin-bottom: 7%;
        background-size: 10.5%;
        position: relative;
	}

	#page4 .paper li span {
	    font-size: 4.6vw;
        margin: 0 auto;
        left: 7%;
        top: 39%;
	}

	#page4 .paper li p {
		font-size: 4.4vw;
	    width: 85.4%;
	    margin-left: 14%;
	    line-height: 5.2vw;
	    top: 5%;
	}

	#page4 .paper li:nth-last-child(1) p {
		margin-top: -2.5%;
	}

	#page4 .txt3 {
		top: 66.6%;
	    position: absolute;
	    margin: 0 auto;
	    font-size: 4.4vw;
	    right: 0;
	    left: 0;
	}

	#page4 .txt3 span {
		font-size: 6.6vw;
	}

	#page4 .btn {
		max-width: 375px;
	    width: 54%;
	    height: auto;
	    padding-top: 15.8%;
	    position: absolute;
	    right: 0;
	    left: 0;
	    margin: 0 auto;
	    top: 78%;
	}

	#page4 .tip {
		font-size: 3vw;
		bottom: 1%;
		right: 1.6%;
	}

	#page5 {
		height: auto;
    	padding-top: 161.5%;
    	background-size: cover;
	    background-position-x: 50%;
	}

	#page5 .title {
		max-width: 514px;
	    width: 65%;
	    height: auto;
	    padding-top: 14%;
	    margin: 0 auto;
	    position: absolute;
	    right: 6%;
	    top: 7.5%;
	}

	#page5 .tips {
		position: absolute;
	    right: 0;
	    left: 0;
	    margin: 0 auto;
	    top: 19%;
	    overflow: hidden;
        padding-top: 121%;
	}

	#page5 .tips ol {
		font-size: 3.2vw;
	    line-height: 4vw;
	    padding: 0 4% 0 8.5%;
	    position: absolute;
	    top: 0;
	}

	#page5 .tips .box {
	    height: 95%;
        position: absolute;
        top: 2%;
        width: 99%;
	    overflow: hidden;
	    color: #272727;
	}

	#page5 .tips p {
		margin-left: -7%;
		margin-top: 4%;
		color: #000;
	}

	footer {
		height: auto;
	    padding-top: 30%;
	}

	footer .box {
		width: 91%;
		position: absolute;
		right: 0;
		left: 0;
		top: -5%;
	}

	footer .dena {
		max-width: 98px;
		width: 14%;
		height: auto;
		padding-top: 5.7%;
	    margin-top: 3%;
	}

	footer .toei {
		max-width: 101px;
	    width: 14%;
	    height: auto;
	    padding-top: 9.7%;
	    margin-left: 2%;
	}

	footer li {
		float: left;
	}

	footer .cr {
		position: absolute;
	    width: 100%;
	    left: -2%;
	    top: 113%;
	}

	footer .cr ul {
		font-size: 2vw;
	    line-height: 3vw;
	    left: 1%;
	}

	footer .cr li {
		float: unset;
	}

	footer .game {
		height: auto;
		top: 198%;
		font-size: 2vw;
		padding-left: 10%;
		right: auto;
	}

	#gotopbox {
		margin-top: 2.5%;
		z-index: 10;
	}

	#gotopbox .in {
		width: 100%;
		min-width: auto;
	}

	#gotopbox .gotop {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/gotop_sp.png') top center no-repeat;
		max-width: 66px;
	    width: 9%;
	    height: auto;
	    padding-top: 7.8%;
	    right: 3%;
		background-size: contain;
	}

	#pop .pop_close {
		max-width: 101px;
	    width: 14%;
	    height: auto;
	    padding-top: 11%;
	}

	#pop .pop_box  {
		max-width: 753px;
	    width: 94.5%;
	    height: auto;
	    padding-top: 63.5%;
	}

	#pop .types {
		font-size: 5vw;
	}

	#sp_menu {
		display: block;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		transition: visibility 300ms;
		visibility: hidden;
		/* opacity: 0; */
		background: #435471 url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/sp_menu_bg.jpg') top center no-repeat;
		background-size: 100%;
		z-index: 100;
	}

	#sp_menu .close {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/sp_menu_close.png') center center no-repeat;
		max-width: 74px;
		width: 11%;
		padding-top: 10.5%;
		position: absolute;
		left: 5.5%;
	    margin-top: 6%;
	    cursor: pointer;
	    background-size: contain;
	}

	#sp_menu .btns {
		margin-top: 24%; 
	}

	#sp_menu .btns li {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/sp_menu_btns.jpg') top center no-repeat;
		max-width: 659px;
    	width: 83%;
    	padding-top: 13.37%;
		background-size: cover;
		margin: 0 auto;
		cursor: pointer;
		margin-bottom: 6%;
	}

	#sp_menu .btns li:hover {
		filter: brightness(1.2);
	}

	#sp_menu .btns .btn1 {
		background-position-y:0; 
	}

	#sp_menu .btns .btn2 {
		background-position-y:33.3%; 
	}

	#sp_menu .btns .btn3 {
		background-position-y:66.6%; 
	}

	#sp_menu .btns .btn4 {
		background-position-y:100%; 
	}

	#sp_menu .apps {
		width: 82.5%;
		padding-top: 23%;
		margin: 0 auto;
		background: #1b1b1b;
		color: #fff;
		text-align: center;
		font-weight: bold;
		font-size: 6vw;
		margin-bottom: 5%;
		position: relative;
		user-select: none;
	}

	#sp_menu .apps p {
		padding-top: 2%;
		position: absolute;
	    right: 0;
	    left: 0;
	    top: 0;
	}

	#sp_menu .apps ul {
		position: absolute;
		right: 0;
	    left: 0;
	    top: 49%;
	}

	#sp_menu .apps li {
		display: inline-block;
		cursor: pointer;
		max-width: 252px;
    	width: 39%;
    	padding-top: 11.3%;
	}

	#sp_menu .apps .google {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/link_google.png') top center no-repeat;
		background-size: contain;
	}

	#sp_menu .apps .ios {
		background: url('https://os-web-cdn.mobage.tw/cdn/web/sd/static/img/link_ios.png') top center no-repeat;
		background-size: contain;
	}

}