@charset "utf-8";
body {font-size:16px; font-family:Arial, Helvetica, "微軟正黑體";line-height:150%; color:#222; background-image: linear-gradient(to top, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%); #321575 100%); margin:0; padding:0; position: relative;}
html {width:100%;height:auto;}
div, p, ul, ol{ margin:0; padding:0;border:0;}
img {border:0; margin:0; padding:0; display:block;}

ul {list-style:none; margin:0; padding:0;}
a {text-decoration:none;}

.fL {float:left;}
.fR {float:right;}
.tL {text-align:left}
.tR {text-align:right}
.tC {text-align:center}
.tB{ font-weight:bold;}
.clr {clear:both;}

/*顯示隱藏-大網*/
.m-none {display:block;}
.m-block {display:none;}

/*頁面設定*/
.pagesize{ margin:0 auto; width:1000px; background-color: #272526; -moz-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.3); -webkit-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.3); box-shadow:0px 0px 20px 0px rgba(0,0,0,0.3);}

.view_Box{ height:650px; background:url(../images/view_bg.jpg) no-repeat;}
.view_Box img{ display:none;}

.award_Box{ height: 283px; background: url(../images/award.jpg) no-repeat;}
.award_Box img{ display: none;}

.step_Box{ height:395px; background:url(../images/step.jpg) no-repeat; position:relative;}
.appSET{ display: none;}
.step_Box .app_and{ width:100px; height:185px; position:absolute; top:160px; left:78px;}
.step_Box .app_ios{ width:100px; height:185px; position:absolute; top:160px; left:208px;}
.step_Box .hamipass{ width:250px; height:230px; position:absolute; top:160px; left:375px;}
.step_Box .cakeTurn{ display:none;}
.step_Box .app_and a, .step_Box .app_ios a, .step_Box .hamipass a, .step_Box .cakeTurn a{ width:100%; height:100%; display:block;}
.step_Box img{ display:none;}

.notice_Box{ padding:30px 40px 45px 40px; background-color: #494949;}
.notice_Box .title{ color: #fdff5c; font-size: 30px; line-height: 1.5; letter-spacing: 2px; font-weight: bold; text-align: center; margin-bottom: 20px;}
.notice_Box ol{ padding-left:25px;}
.notice_Box li{ padding-left:5px; margin-bottom:15px; color: #fff;}


/*---------------for 小網---------------*/
@media screen and (max-width: 767px) {

.pagesize { width:100%;}
.title{ padding-left: 15px; padding-right: 15px;}
	
.view_Box{ height:auto; background:none;}
.view_Box img{ width:100%; height:auto; display:block;}
	
.award_Box{ height:auto; background:none;}
.award_Box img{ width:100%; height:auto;  display: block;}

.appSET{ display:block;}
.appSET .and{ width: 50%; display: inline-block; vertical-align: middle;}
.appSET .ios{ width: 50%; display: inline-block; vertical-align: middle;}
.appSET img{ width:100%; height:auto; display:block;} 
.step_Box{ height:auto; background:none;}
.step_Box .app_and{ width:50%; height:auto; position:static; }
.step_Box .app_ios{ width:50%; height:auto; position:static; }
.step_Box .hamipass{ width:100%; height:auto; position:static; }
.step_Box .cakeTurn{ width:100%; height:auto; display:block; position:static;}
.step_Box .app_and img, .step_Box .app_ios img, .step_Box .hamipass img, .step_Box .cakeTurn img{ width:100%; height:auto; display:block;}

.notice_Box{ padding:25px 15px 25px 15px;}
.notice_Box p{ padding: 30px 0 20px 0;}
.notice_Box li{ padding-left:5px; margin-bottom:5px;}

}