@charset "utf-8";
body {font-size:16px; font-family:Arial, Helvetica, "微軟正黑體";line-height:150%; color:#222; background-color: #fff; 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;}
.title_Box{ padding: 50px 40px 20px 40px; background: #0b0628;}
.title{ font-size: 24px; font-weight: bold; text-align: center; position: relative;}
.title::before{ content: ''; width: 40px; height: 1px; background-color: #fff; position: absolute; left: 38%; top: 50%; margin-top: -1px; }
.title::after{ content: ''; width: 40px; height: 1px; background-color: #fff; position: absolute; right: 38%; top: 50%; margin-top: -1px; }
.title span{ display: inline-block; margin: 0 auto; background-color: #0b0628;; color: #fff;}


.view_Box{ height:850px; background: url(../images/view_bg.png) no-repeat; -webkit-filter: drop-shadow(0px 15px 15px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0px 15px 15px rgba(0, 0, 0, 0.3));}
.view_Box img{ display:none;}

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

.step_Box{ height:455px; background:url(../images/step.jpg) no-repeat; position:relative;}
.appSET{ display: none;}
.step_Box .app_and{ width:110px; height:150px; position:absolute; top:190px; left:74px;}
.step_Box .app_ios{ width:110px; height:150px; position:absolute; top:190px; left:195px;}
.step_Box .hamipass{ width:280px; height:230px; position:absolute; top:160px; left:360px;}
.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: #0b0628;}
.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_Box{ padding: 50px 15px 20px 15px;}
.title::before{ width: 40px; left: 20%;}
.title::after{ width: 40px; right: 20%;}
.title span{ width: 250px;}

.view_Box{ height:auto; background:none; -webkit-filter: none; filter: 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;}
.notice_Box p{ padding: 30px 0 20px 0;}
.notice_Box li{ padding-left:5px; margin-bottom:5px;}

}

@media screen and (max-width: 320px) {
    .title::before{ left: 15%;}
    .title::after{ right: 15%;}
}