* { -webkit-text-size-adjust: none; }
body { margin: 0; padding: 0; font-size: 12px; font-family: "微软雅黑", "微軟正黑體", "Microsoft JhengHei", 'Century Gothic', CenturyGothic, AppleGothic, sans-serif; color:#333e48; }
body, html { width: 100%; height: 100%; }
body, ul, li { margin: 0; padding: 0; }
ul, li { list-style: none; }
a:link, a:visited { color: #ffffff; text-decoration: none; }
a:hover, a:active { color: #fc1712; }
input, textarea { font-size: 14px; font-family: "微软雅黑", "微軟正黑體", "Microsoft JhengHei", 'Century Gothic', CenturyGothic, AppleGothic, sans-serif; }
img { border: 0px; }
.clear { clear: both; }
.clearfix:after { display:table; clear:both; content:' '; }

.desktop { display:block; }
.mobile { display:none; }

/***** general *****/
#warning { background-color: #979797; color: #000000; width: 100%; position: fixed; top: 0px; left: 0px; z-index: 98; }
#warning .copy { font-size: 12px; line-height: 16px; margin: 5px 40px 7px 20px; }
#warning .close { position: absolute; width: 20px; height: 20px; top: 5px; right: 20px; cursor: pointer; }

#wrapper { width: 100%; height: 100%; }

#header { position: fixed; top: 0; left: 0; text-align: center; width: 100%; z-index: 99; }
#head { text-align: center; height: 60px; background-color: #000000; }
#head .logo { float: right; width: 50%; padding-top: 10px; }
#head .logo a { background:url(../images/logo.png) no-repeat; display:block; width:317px; height:39px; margin:0 auto; }
#head .share { float: right; width: 25%; font-size:12px; padding-top: 20px; position: relative; color:#fc1712; }
#head .share ul li{float:left; height:18px; line-height:18px; margin-left:10px;}
#head .share_waibo{ width:18px; height:18px; display:block; background:url(../images/share_weibo.png) no-repeat;}
#head .share_qq{ width:18px; height:18px; display:block; background:url(../images/share_qq.png) no-repeat;}

#menu { background-color: #979797; width: 100%; }
#menu ul { width: 100%; max-width: 900px; margin: 0 auto; text-align:center; display:table; }
#menu li { display:table-cell; position: relative; vertical-align:middle; }
#menu li a { text-align: center; display: block; padding:10px 30px; font-size: 14px; color:#010c25; opacity:0.65; filter: alpha(opacity=65); position:relative; }
#menu li a:hover, #menu li a.current { opacity:1; filter: alpha(opacity=100); }
#menu li a.current { font-weight:bold; }
#menu li a.current:after { content:''; width: 0; height: 0; border-style: solid; border-width: 0 6px 8px 6px; border-color: transparent transparent #aaa8a9 transparent; position:absolute; bottom:-10px; margin-left:-6px; left:50%; }
#menu li.line2 a.current:after { bottom:0px; }

#footer { position: relative; width: 100%; text-align: center; color: #000000; background: #8c8c8c; padding: 5px 0; z-index: 6; float:left }
#footer b { font-weight: normal; }
#footer a:link, #footer a:visited { color: #000000; }
#footer a:hover, #footer a:active { color: #ffffff; }

#foot_prize {position: fixed; bottom: 0; left:50%; width: 348px; margin-left:-174px; z-index: 5; overflow:hidden; }
#foot_prize .btn_prize { width: 100%; height: 40px; line-height: 40px; color: #ffffff; font-weight:bold; text-align: center; font-size: 16px; font-weight: bold; cursor: pointer; background:url(../images/prize_top.png) no-repeat; background-size:100% 100%; }
#foot_prize .btn_prize span { display:none; vertical-align:middle; margin:0 5px; }
#foot_prize .btn_prize .ico { display:inline-block; border-style: solid; border-width: 13px 9px 0 9px; border-color: #fc1612 transparent transparent transparent; }
#foot_prize.close .btn_prize span { display:inline-block; }
#foot_prize.close .btn_prize .ico { border-style: solid; border-width: 0 9px 13px 9px; border-color: transparent transparent #fc1612 transparent; }
#foot_prize ul { text-align: center; background: url(../images/prize_bg.png); height:105px; padding:0 17px; }
#foot_prize li { float:left; position: relative; background:url(../images/prize_box_bg.png); }
#foot_prize li.btn_gwp { width:150px; margin-right:14px; }
#foot_prize li.other { width:150px; position:relative; }
#foot_prize li.other:hover > .btn_bar.desktop { display:block; }
#foot_prize li .btn_bar { position:absolute; top:0; right:0; display:none; }
#foot_prize li .btn_bar a { display:block; padding:13px 28px 13px 10px; background-color:#ffffff; color:#333e48; height:50%; font-size:16px; position:relative; }
#foot_prize li .btn_bar a:hover { background-color:#fc1712; color:#ffffff; }
#foot_prize li .btn_bar a:after { content:''; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #333e48; position:absolute; top:50%; margin-top:-6px; right:10px; }
#foot_prize li .btn_bar a:hover:after { border-color: transparent transparent transparent #ffffff; }

.push-right { display: none; }
nav.menu { display: none; }

a#gototop{display:none;background:url(../images/btn_top.png) no-repeat;	width:32px;	height:32px; position:fixed; bottom:30px; right:30px; z-index:10; opacity: 0.8; filter: alpha(opacity=80);}
a#gototop:hover{opacity: 1; filter: alpha(opacity=100);}

#home { width: 100%; height: 100%; overflow: hidden; background-repeat: no-repeat; background-position: center center; background-attachment: local; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; z-index: 0; top: 0px; left: 0px; background-image: url(../images/bg_home.jpg); }
#home img { width:100%; }
#home .title { width:270px; height:374px; position:absolute; top:50%; left:50%; margin-top:-187px; margin-left:-135px; }
#home .product { width:340px; position:absolute; top:50%; left:50%; margin-top:-160px; margin-left:170px; font-size:20px; font-weight:bold; color:#fc1712; text-align:center; }
#home .product .name { margin:10px 0; }
#home .product .btn { width:80%; margin:0 auto; }

.btn a { display:inline-block; padding:6px 40px 6px 15px; color:#333e48; border:1px solid #333e48; font-size:16px; margin:10px 10px 0; position:relative; }
.btn a:hover { background-color:#fc1712; color:#ffffff; border:1px solid #fc1712; }
.btn a:after { content:''; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #333e48; position:absolute; top:50%; margin-top:-6px; right:15px; }
.btn a:hover:after { border-color: transparent transparent transparent #ffffff; }

#inner { width: 100%; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; z-index: 0; top: 0px; left: 0px; background-image: url(../images/bg_inner.jpg); text-align:center; }

h1 { font-size:24px; }
h1.title { margin-bottom:30px; }
p { font-size:18px; }
p.remark { font-size:12px; }

.period { position:relative; display:inline-block; font-size:18px; margin-top:16px; }
.period:before, .period:after { position:absolute; content:''; width:30%; height:4px; border-top:1px solid #333e48; border-bottom:1px solid #333e48; top:50%; margin-top:-3px; }
.period:before { left:-35%; }
.period:after { right:-35%; }

.btn_scroll { background:url(../images/btn_scroll.png) no-repeat center; width:100%; max-width:900px; height:24px; margin:70px auto 0; position:relative; }
.btn_scroll:before, .btn_scroll:after { position:absolute; content:''; width:45%; height:1px; background-color:#333e48; top:50%; }
.btn_scroll:before { left:0; }
.btn_scroll:after { right:0; }

#product { padding:170px 10px 0; }
#product .text { max-width:700px; margin:0 auto; }
#product .text h2 { font-size:24px; color:#fc1712; }
#product .img { position:relative; width:95%; max-width:440px; margin:0 auto; }
#product .img img { width:100%; }
#product .discount { background-color:#fc1712; color:#ffffff; width:80px; height:67px; padding-top:13px; border-radius:80px; position:absolute; top:0; left:50%; margin-left:130px; font-size:18px; font-weight:bold; }
#product .swiper-container { height:470px; margin-top:30px; }
#product .pagination { text-align: center; width: 100%; }
#product .swiper-pagination-switch { display: inline-block; width: 10px; height: 10px; border-radius: 10px; background: #333e48; margin: 0 3px; cursor: pointer; }
#product .swiper-active-switch { background: #fc1712; }
#product .arrow-left { background: url(../images/arrows.png) no-repeat left top; position: absolute; left: 50%; top: 50%; margin-top: -22px; margin-left:-448px; width: 18px; height: 45px; }
#product .arrow-right { background: url(../images/arrows.png) no-repeat right top; position: absolute; left: 50%; top: 50%; margin-top: -22px; margin-left:430px; width: 18px; height: 45px; }

#gwp { padding:170px 10px 0; max-width:880px; margin:0 auto; font-size:16px; }
#gwp .period { margin-top:0; }
#gwp .gwp_list li { float:left; vertical-align:top; width:45%; margin:0 2.5% 40px; }
#gwp .gwp_list .head { width:100px; height:25px; line-height:25px; color:#ffffff; text-align:center; margin:20px auto; background:url(../images/head_bg.png) no-repeat; position:relative; }
#gwp .gwp_list .head:before, #gwp .gwp_list .head:after { position:absolute; content:''; width:100%; height:0; border-top:1px solid #333e48; top:50%; }
#gwp .gwp_list .head:before { left:-100%; }
#gwp .gwp_list .head:after { right:-100%; }
#gwp .gwp_list .offer { font-weight:bold; margin-bottom:15px; }
#gwp .gwp_list .offer span { color:#fc1712; }
#gwp .gwp_list .img { position:relative; margin-bottom:15px; }
#gwp .gwp_list .img img { width:100%; }
#gwp .gwp_list .discount { background-color:#fc1712; color:#ffffff; width:80px; height:67px; padding-top:13px; border-radius:80px; position:absolute; top:0; left:50%; margin-left:100px; font-size:18px; font-weight:bold; }
#gwp .gwp_list .discount.btm { top:auto; bottom:0; }
#gwp p.remark { text-align:left; }

#checkin { padding:200px 10px 25px; }
#checkin img { width:100%; }
#checkin .box { width:100%; max-width: 900px; position: relative; background-color: rgba(0, 0, 0, 0.45); margin:0 auto; color:#ffffff; font-size:16px; line-height:30px; padding:20px 0; }
#checkin .box:before { content: ""; position: absolute; top: -25px; right: 0; border-bottom: 25px solid #000; border-left: 25px solid transparent; border-right: 0px solid transparent; width: 97.22222%; max-width:875px; height: 0; opacity:0.45; filter: alpha(opacity=45); }
#checkin .box:after { content: ""; position: absolute; bottom: -25px; left: 0; border-top: 25px solid #000; border-left: 0px solid transparent; border-right: 25px solid transparent; width: 97.22222%; max-width:875px; height: 0; opacity:0.45; filter: alpha(opacity=45); }
#checkin .corner { position: relative; }
#checkin .corner:before { content: ""; position: absolute; top: -45px; left: 0; width: 0; height: 0; border-style: solid; border-width: 20px 20px 0 0; border-color: #fc1612 transparent transparent transparent; }
#checkin .corner:after { content: ""; position: absolute; bottom: -45px; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 20px 20px; border-color: transparent transparent #fc1612 transparent; }
#checkin .checkin_title { margin:0 auto 20px; width:85%; max-width:490px; }
#checkin p { margin:0; }
#checkin .btn_checkin { width:90px; height:90px; display:block; margin:20px auto 0; }
/**
** check in - step2
**/
#checkin.checked { background:url(../images/bg_checkin.jpg) no-repeat top center #000; padding-top:170px; padding-bottom:50px; margin-top:30px; }
#checkin .title { width:160px; margin:0 auto; padding-left:300px; padding-bottom:40px; }
#checkin .head { font-size:24px; font-weight:bold; letter-spacing:5px; margin-bottom:25px; }
#checkin .share { width:100%; max-width:550px; margin:0 auto; }
#checkin .share_msg { width:68%; float:left; min-height:165px; background-color: rgba(256, 256, 256, 0.70); color:#333e48; text-align:left; margin-right:2%; }
#checkin .share_msg p { margin:15px; font-size:16px; line-height:22px; text-align:justify; }
#checkin .share_img { width:30%; float:left; }
#checkin .share_form { margin-top:20px; font-size:16px; }
#checkin .share_form p { font-size:16px; }
#checkin .share_form p span { font-size:12px; }
#checkin .table { display:table; border-spacing:5px; margin:0 auto; font-size:14px; }
#checkin .row { display:table-row; }
#checkin .col { display:table-cell; text-align:left; padding-right:20px; }
#checkin .th { text-align:right; }
#checkin input[type=text] { border:0; background-color: rgba(256, 256, 256, 0.40); color:#ffffff; width:200px; }
#checkin input[type=submit] { border:0; background:url(../images/btn_submit.png) no-repeat; color:#ffffff; font-size:18px; font-weight:bold; width:170px; height:36px; text-align:center; cursor:pointer; }
#checkin .clickbox { font-size:14px; margin-bottom:20px; }
#checkin .clickbox a { text-decoration:underline; }
#checkin select { width:200px; }
/**
** check in - step3
**/
#checkin #step3 .head_title { width:106px; height:28px; line-height:28px; color:#ffffff; text-align:center; margin:20px auto; background:url(../images/head_bg_red.png) no-repeat; position:relative; font-size:16px; font-weight:normal; letter-spacing:normal; }
#checkin #step3 .head_title:before, #checkin #step3 .head_title:after { position:absolute; content:''; width:70%; height:0; border-top:1px solid #fc1712; top:50%; }
#checkin #step3 .head_title:before { left:-70%; }
#checkin #step3 .head_title:after { right:-70%; }
#checkin .stamp { color:#fc1712; width:110px; margin:30px auto 10px; font-size:14px; line-height:20px; }
#checkin .stamp .checkin_location { font-size:16px; }
#checkin .date { font-size:18px; text-align:center; margin:30px 0; }
#checkin .promo_list li { float:left; vertical-align:top; width:30%; margin:0 1.66666% 40px; }
#checkin .promo_list .offer { font-weight:bold; font-size:14px; }
#checkin .promo_list .offer span { color:#fc1712; }
#checkin .promo_list .remark { font-size:12px; line-height:16px; }
#checkin .promo_list .img { position:relative; margin-bottom:15px; }
#checkin .promo_list .img img { width:100%; }
#checkin .promo_list .discount { background-color:#fc1712; color:#ffffff; width:80px; height:67px; padding-top:13px; border-radius:80px; position:absolute; top:0; left:50%; margin-left:50px; font-size:18px; font-weight:bold; line-height:26px; }
#checkin .promo_list .discount.btm { top:auto; bottom:0; }
#checkin .promo_list.item4 li { width:45%; margin:0 2.5% 40px; }
#checkin .promo_list .btn a { border:1px solid #ffffff; color:#ffffff; padding:3px 40px 3px 15px; }
#checkin .promo_list .btn a:after { border-color: transparent transparent transparent #ffffff; }
#checkin .promo_list .btn a:hover { border:1px solid #fc1712; }
#checkin .btn_cfa a { display:inline-block; padding:1px 15px; color:#ffffff; font-size:16px; margin:10px 10px 0; position:relative; background:none; border:1px solid #ffffff; }
#checkin .btn_cfa a.active { background-color:#fc1712; border:1px solid #fc1712; }
#checkin .thankyou { font-size:24px; font-weight:bold; color:#fc1712; margin-top:30px; }
#checkin .title_box { display:inline-block; font-size:20px; font-weight:bold; color:#ffffff; margin-top:50px; position:relative; }
#checkin .title_box:before, #checkin .title_box:after { position:absolute; content:''; width:80%; height:0; border-top:1px solid #ffffff; top:50%; }
#checkin .title_box:before { left:-90%; }
#checkin .title_box:after { right:-90%; }

#step { padding:170px 10px 0; }
#step .btn span { font-size:18px; }
#step .btn a { font-size:14px; }
#step .step { max-width:900px; margin:30px auto 0; padding-bottom:200px; }
#step .step ul:after { content: ' '; display: table; clear:both; }
#step .step li { width:18%; text-align:center; float:left; font-size:14px; margin:0 1%; position:relative; }
#step .step .img { width:60px; margin:0 auto; }
#step .step .img img { width:100%; }
#step .step .name { font-size:18px; font-weight:bold; margin:5px 0 10px; }
#step .step .animate { opacity:0.5; filter: alpha(opacity=50); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease;  transition: all 0.3s ease; }
#step .step .desc { color:#333e48; opacity:0; filter: alpha(opacity=100); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease;  transition: all 0.3s ease; }
#step .step .step1 .animate { animation:step_animate 15s infinite 0s ease-in normal; -webkit-animation:step_animate 15s infinite 0s ease-in normal; -moz-animation:step_animate 15s infinite 0s ease-in normal;}
#step .step .step2 .animate { animation:step_animate 15s infinite 3s ease-in normal; -webkit-animation:step_animate 15s infinite 3s ease-in normal; -moz-animation:step_animate 15s infinite 3s ease-in normal;}
#step .step .step3 .animate { animation:step_animate 15s infinite 6s ease-in normal; -webkit-animation:step_animate 15s infinite 6s ease-in normal; -moz-animation:step_animate 15s infinite 6s ease-in normal;}
#step .step .step4 .animate { animation:step_animate 15s infinite 9s ease-in normal; -webkit-animation:step_animate 15s infinite 9s ease-in normal; -moz-animation:step_animate 15s infinite 9s ease-in normal;}
#step .step .step5 .animate { animation:step_animate 15s infinite 12s ease-in normal; -webkit-animation:step_animate 15s infinite 12s ease-in normal; -moz-animation:step_animate 15s infinite 12s ease-in normal;}
#step .step .step1 .desc { animation:desc 15s infinite 0s ease-in normal; -webkit-animation:desc 15s infinite 0s ease-in normal; -moz-animation:desc 15s infinite 0s ease-in normal;}
#step .step .step2 .desc { animation:desc 15s infinite 3s ease-in normal; -webkit-animation:desc 15s infinite 3s ease-in normal; -moz-animation:desc 15s infinite 3s ease-in normal;}
#step .step .step3 .desc { animation:desc 15s infinite 6s ease-in normal; -webkit-animation:desc 15s infinite 6s ease-in normal; -moz-animation:desc 15s infinite 6s ease-in normal;}
#step .step .step4 .desc { animation:desc 15s infinite 9s ease-in normal; -webkit-animation:desc 15s infinite 9s ease-in normal; -moz-animation:desc 15s infinite 9s ease-in normal;}
#step .step .step5 .desc { animation:desc 15s infinite 12s ease-in normal; -webkit-animation:desc 15s infinite 12s ease-in normal; -moz-animation:desc 15s infinite 12s ease-in normal;}
#step .step ul:hover .animate, #step .step ul:hover .desc { animation:none; -webkit-animation:none; -moz-animation:none; }
#step .step li:hover .animate { opacity:1; filter: alpha(opacity=100); }
#step .step li:hover .desc { opacity:1; filter: alpha(opacity=100); }