@charset "utf-8";
body {font-size:16px; font-family:Arial, Helvetica, "微軟正黑體";line-height:150%; color:#222; background-image: linear-gradient( to top, #ff5858 0%, #f09819 100%);  margin:0; padding:0; }
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: #fff; -moz-box-shadow:0px 0px 20px 0px rgba(0,42,52,0.3); -webkit-box-shadow:0px 0px 20px 0px rgba(0,42,52,0.3); box-shadow:0px 0px 20px 0px rgba(0,42,52,0.3);}
.title{ font-size: 30px; font-weight: bold; padding: 30px 0 20px 0; color: #000; text-align: center;}

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

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

.step_Box{ height:434px; background:url(../images/step.jpg) no-repeat; position:relative;}
.appSET{ display: none;}
.step_Box .app_and{ width:120px; height:185px; position:absolute; top:170px; left:65px;}
.step_Box .app_ios{ width:120px; height:185px; position:absolute; top:170px; left:185px;}
.step_Box .hamipass{ width:290px; height:260px; position:absolute; top:140px; left:355px;}
.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; background-color: #004f86;}
.notice_Box .title{ padding: 10px 0 30px 0 ;}
.notice_Box .title span{ font-size: 20px; font-weight: normal; color: #e7f5ff; padding: 10px 15px; border: 1px solid #e7f5ff; border-radius: 10px;}
.notice_Box ol{ padding-left:25px;}
.notice_Box li{ padding-left:5px; margin-bottom:15px; color: #e7f5ff;}


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

.pagesize { width:100%;}
.title{ padding: 20px 0;}
.title::before{ width: 30px; height: 30px;}
	
.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:15px 20px;}
.notice_Box .title{ padding: 0 0 20px 0;}
.notice_Box p{ padding: 30px 0 20px 0;}
.notice_Box li{ padding-left:5px; margin-bottom:5px;}

}

@media screen and (max-width: 767px) {
    .notice_Box{ padding:15px;}
}