@charset "utf-8";
body {font-size:16px; font-family:Arial, Helvetica, "微軟正黑體";line-height:150%; color:#222; background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 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: #f5507a; -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{ color: #fff; font-size: 18px; font-weight: bold; padding: 20px 0; text-align: center; position: relative; display: flex; justify-content: center; align-items: center;}
.title::before{ content: ''; width: 100%; height: 1px; border-top: 1px dashed #fff; flex: 1 1 auto;}
.title::after{ content: ''; width: 100%; height: 1px; border-top: 1px dashed #fff; flex: 1 1 auto;}
.title span{flex: 1 0 auto; padding: 0 20px;}

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

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

.step_Box{ height:530px; background:url(../images/step.jpg) no-repeat; position:relative;}
.appSET{ display: none;}
.step_Box .app_and{ width:120px; height:185px; position:absolute; top:260px; left:60px;}
.step_Box .app_ios{ width:120px; height:185px; position:absolute; top:260px; left:190px;}
.step_Box .hamipass{ width:290px; height:240px; position:absolute; top:250px; 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:0 40px 45px 40px; background-color: #f5507a;}
.notice_Box .title{ }
.notice_Box ol{ padding-left:25px;}
.notice_Box li{ padding-left:5px; margin-bottom:15px; color: #ffe4eb;}


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

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

}