* { resize: none; outline: 0; }

p, div, a, h1, h2, h3, h4, h5, h6, label, select, option, span, input, li, optgroup { font-size: 16px; font-family: "OpenSans", Arial, Helvetica, "Microsoft JhengHei", "Heiti TC", "STHeiti", PMingLiU, sans-serif; line-height: 1.4em; margin: 0; }

html { margin: 0; padding: 0; width: 100%; height: 100%; }

body { margin: 0 auto; padding: 0; position: relative; box-sizing: border-box; width: 100%; min-height: 100%; overflow: auto; }

.c:after { clear: both; content: ""; display: block; }

.container { width: 100%; min-width: 320px; max-width: 750px; margin: 0 auto; position: relative; overflow: hidden; }
.container .body-wrap { position: relative; width: 100%; }

nav { position: absolute; top: 0; left: 0; width: 50px; height: 50px; z-index: 100; transition-property: all; -webkit-transition-property: all; transition-duration: 0.5s; transition-timing-function: ease-in-out; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; }
nav .btn-nav { position: absolute; top: 20px; left: 20px; color: #FFFFFF; display: block; }
nav .menu-wrap { width: 390px; height: 100%; background-color: #a40019; position: absolute; left: -390px; top: 0; transition-property: transform; -webkit-transition-property: transform; transition-duration: 0.5s; transition-timing-function: ease-in-out; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; }
nav .menu-wrap .btn-nav-close { color: #FFFFFF; display: block; width: 2em; margin: 20px 0 20px 20px; }
nav .menu-wrap .menu { width: 100%; list-style: none; margin: 0; padding: 0; border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; }
nav .menu-wrap .menu li { width: 100%; display: block; }
nav .menu-wrap .menu li .menu-btn { display: block; padding: 1em; color: #FFFFFF; }
nav .menu-wrap .menu li .menu-btn i, nav .menu-wrap .menu li .menu-btn span { color: #FFFFFF; display: inline-block; vertical-align: middle; font-size: 1.2em; }
nav .menu-wrap .menu li .menu-btn .menu-icon { width: 26px; height: 26px; background-repeat: no-repeat; background-position: 0 100%; background-size: 100% auto; margin-right: 1em; }
nav .menu-wrap .menu li .menu-btn .menu-icon.menu-bag { background-image: url(../images/bag_s.png); }
nav .menu-wrap .menu li .menu-btn .menu-icon.menu-home { background-image: url(../images/heart_s.png); }
nav .menu-wrap .menu li .menu-btn .menu-icon.menu-vote { background-image: url(../images/vote_s.png); }
nav .menu-wrap .menu li .menu-btn:hover { background-color: #8a0017; }
nav .menu-wrap .menu li + li { border-top: 1px solid #FFFFFF; }
nav.active { background-color: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; }
nav.active .btn-nav { display: none; }
nav.active .menu-wrap { transform: perspective(800px) translate3d(390px, 0px, 0px); -webkit-transform: perspective(800px) translate3d(390px, 0px, 0px); }

#index { height: 200%; }
#index .container { height: 100%; }
#index .container .body-wrap { height: 100%; }
#index .container .body-wrap > div { height: 50%; }
#index .container .body-wrap .front { background: url(../images/main_bg.png) center center no-repeat; background-size: 100% auto; box-sizing: border-box; padding: 37.33333% 0 0; }
#index .container .body-wrap .front .logo { width: 61.6%; display: block; margin: 0 auto; padding-bottom: 1em; }
#index .container .body-wrap .front .front-lead { background: url(../images/main_content.png) center center no-repeat; background-size: contain; width: 79.06667%; height: 0; padding-top: 16.13333%; display: block; margin: 0 auto; }
#index .container .body-wrap .front .btn-index-next { display: block; width: 10.26667%; height: 0; padding-top: 8.4%; background: url(../images/main_arrow.png) center center no-repeat; background-size: contain; margin: 3em auto 0; }
#index .container .body-wrap .second { padding-bottom: 3.5em; box-sizing: border-box; color: #FFFFFF; }
#index .container .body-wrap .second .ball-wrap { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 0.5em; box-sizing: border-box; background-color: #a40019; }
#index .container .body-wrap .second .ball-wrap span { font-size: 1.6em; font-weight: bold; }
#index .container .body-wrap .second .ball-wrap .client-logo { display: block; margin: 0 auto; width: 99px; }
#index .container .body-wrap .second .top-wrap { background: url(../images/bg_gift.jpg) center center no-repeat; }
#index .container .body-wrap .second .top-wrap .ball-wrap { padding: 30px 0 0; }
#index .container .body-wrap .second .bot-wrap { background: url(../images/bg_bag.jpg) center center no-repeat; }
#index .container .body-wrap .second .bot-wrap .ball-wrap { padding: 45px 0 0; }
#index .container .body-wrap .second > a { height: 50%; background-size: 100% auto; box-sizing: border-box; padding: 1em 0; text-align: center; text-decoration: none; display: block; color: #FFFFFF; }
#index .container .body-wrap .second > a p { padding: 0 1em; }
#index .container .body-wrap .second > a .btn-more-detail { display: inline-block; font-weight: bold; }
#index .container .body-wrap .second > a .btn-more-detail span { padding: 4px 0.5em 0 0; }
#index .container .body-wrap .second > a .btn-more-detail span, #index .container .body-wrap .second > a .btn-more-detail i { display: inline-block; vertical-align: middle; }
#index .container .body-wrap .second footer { position: absolute; z-index: 5; bottom: 0; height: 3.5em; box-sizing: border-box; }

.body-wrap { background: url(../images/bg.jpg) top left repeat; }
.body-wrap header { background: url(../images/blackbar.png) bottom center no-repeat; background-size: 100% auto; padding-bottom: 5%; margin-bottom: 1em; }
.body-wrap header .event-title { width: 76.13333%; display: block; padding: 24px 0 0.5em 60px; }
.body-wrap header h2 { color: #FFFFFF; text-align: center; font-weight: bold; font-size: 1.5em; line-height: 1.2em; }

#offer header select { width: 50%; display: block; margin: 0.8em auto 0.5em; height: 2em; }
#offer .btn-wrap { text-align: center; padding-bottom: 1em; }
#offer .btn-wrap a { display: inline-block; margin: 0 0.2em; text-decoration: none; color: #FFFFFF; font-weight: bold; font-size: 1.5em; padding: 0.2em 0.8em; }
#offer .btn-wrap .btn-ex-offer { background-color: #a40019; }
#offer .btn-wrap .btn-all-offer { background-color: #666666; }
#offer .grid { margin: 0 1em; box-sizing: border-box; }
#offer .grid .item { width: 48%; padding: 4px; box-sizing: border-box; position: relative; margin-bottom: 1em; }
#offer .grid .item img { width: 100%; display: block; padding-bottom: 0.5em; }
#offer .grid .item p { font-weight: bold; line-height: 1.1em; }
#offer .grid .item .btn-view-offer { display: block; width: 70px; padding: 0.3em 0.8em; margin: 0.5em auto 0; background-color: #a40019; color: #FFFFFF; font-weight: bold; text-decoration: none; text-align: center; }
#offer .grid .exclusive .ex-offer { display: block; position: absolute; right: 0; top: 0; background: url(../images/cosmo_exclusive.png) 0 0 no-repeat; background-size: contain; width: 75px; height: 75px; }
#offer .grid .grid-sizer { width: 48%; }
#offer .grid .gutter-sizer { width: 4%; }
#offer .grid-data { display: none; }

#detail header select { width: 50%; display: block; margin: 0.8em auto 0.5em; height: 2em; }
#detail .offer-detail { margin: 0 8%; padding: 0 0 2em; }
#detail .o-name { color: #a40019; font-size: 1.3em; font-weight: bold; text-align: center; padding-bottom: 0.5em; }
#detail .o-img-wrap { position: relative; width: 100%; }
#detail .o-img-wrap .o-img { display: block; width: 100%; }
#detail .o-img-wrap .o-logo { position: absolute; width: 17.46032%; right: 4px; top: 4px; z-index: 2; }
#detail .o-desc { text-align: center; padding: 0.5em 0; }
#detail .o-tnc { margin: 0 1em; padding-bottom: 2em; }
#detail .o-tnc ul { margin: 0; }
#detail .o-tnc p, #detail .o-tnc span, #detail .o-tnc li { font-size: 0.8em; }
#detail .o-tnc select { width: 100%; display: block; margin: 0 auto 0.5em; height: 2.4em; }
#detail .o-tnc .cm-note { padding-top: 1em; }
#detail .btn-more-offer { display: block; width: 120px; height: 120px; margin: 0 auto; color: #FFFFFF; background-color: #a40019; border-radius: 50%; text-align: center; text-decoration: none; padding-top: 30px; box-sizing: border-box; }
#detail .btn-more-offer span, #detail .btn-more-offer i { display: block; }
#detail .btn-more-offer .icon-more-offer { margin: 6px auto 0; width: 49px; height: 38px; background: url(../images/more_arrow.png) 0 0 no-repeat; background-size: contain; }

ul.all-mall { list-style: none; padding: 0 0.5em; margin: 0; width: 100%; box-sizing: border-box; line-height: 0; padding-top: 1em; text-align: center; }
ul.all-mall li { text-indent: -9999px; background-position: top center; background-repeat: no-repeat; background-size: contain; width: 30%; height: 0; padding-top: 30%; margin: 0 1%; display: inline-block; }
ul.all-mall .icon-tst { background-image: url(../images/mall_tst.png); }
ul.all-mall .icon-harbour { background-image: url(../images/mall_harbourcity.png); }
ul.all-mall .icon-facesss { background-image: url(../images/mall_facesss.png); }
ul.all-mall .icon-lab { background-image: url(../images/mall_labconcept.png); }
ul.all-mall .icon-telford { background-image: url(../images/mall_telford.png); }
ul.all-mall .icon-maritime { background-image: url(../images/mall_tsingyi.png); }
ul.all-mall .icon-popcorn { background-image: url(../images/mall_popcorn.png); }
ul.all-mall .icon-other { background-image: url(../images/mall_other.png); }

#gift .intro { padding: 0 0.8em; text-align: center; }
#gift .intro span { color: #a40019; font-weight: bold; }
#gift .intro .img-giftbag { display: block; width: 70%; margin: 1em auto; }
#gift .redemption { padding: 0 0.8em; }
#gift .redemption .title-wrap { position: relative; margin: 0 1em 1em; }
#gift .redemption .title-wrap .line { width: 100%; height: 1px; position: absolute; top: 50%; background-color: #a40019; }
#gift .redemption .title-wrap span { position: relative; text-align: center; display: block; font-size: 1.5em; font-weight: bold; width: 100px; padding: 0.3em 1em; margin: 0 auto; background-color: #a40019; color: #FFFFFF; z-index: 1; }
#gift .redemption .step-wrap { padding-bottom: 1.5em; }
#gift .redemption .step-wrap p { text-align: center; }
#gift .redemption .step-wrap .step { padding: 0 0 0.2em; font-size: 1.5em; font-weight: bold; color: #333333; }
#gift .redemption .btn-allbrand { color: #FFFFFF; background-color: #a40019; display: block; width: 200px; padding: 0.4em 0; text-decoration: none; text-align: center; margin: 0.5em auto 0; }
#gift .redemption .btn-allbrand span { font-size: 1.5em; font-weight: bold; padding-right: 6px; }
#gift .redemption .ball-wrap { background-color: #a40019; color: #FFFFFF; display: block; width: 150px; height: 150px; border-radius: 50%; margin: 1em auto; text-align: center; box-sizing: border-box; padding: 30px 0 0; }
#gift .redemption .ball-wrap span { font-weight: bold; font-size: 1.5em; line-height: 1em; }
#gift .redemption .ball-wrap .countdown { font-weight: 100; font-size: 2.5em; }
#gift .redemption .redeem-period { font-size: 1.5em; font-weight: bold; }
#gift .redemption .all-mall.redeem-time li { text-indent: 0; vertical-align: top; height: auto; padding-bottom: 0.5em; }
#gift .redemption .redeem-note { padding: 1.5em 0 0; }
#gift .redemption .redeem-note #btn-terms { color: #a40019; font-weight: bold; text-decoration: underline; }
#gift .partner { text-align: center; padding-bottom: 1em; }
#gift .partner img { display: inline-block; margin: 0.2em 1%; width: 30%; }

#allbrand ul { list-style: none; padding: 0 0.5em; margin: 0; width: 100%; box-sizing: border-box; line-height: 0; }
#allbrand .all-brand .mall-brand { padding: 1em 0 2em; display: none; }
#allbrand .all-brand .mall-brand p { text-align: center; }
#allbrand .all-brand .mall-brand ul li { display: inline-block; width: 45%; padding: 0.5em 2%; vertical-align: top; }

footer { width: 100%; text-align: center; background-color: #000000; padding: 0.4em 0; }
footer.bg-o { background-color: #ee5d52; }
footer.bg-w { background-color: #ffffff; }
footer.bg-w span { color: #000000; }
footer span { font-size: 0.8em; color: #FFFFFF; }

/*# sourceMappingURL=style-shopping.css.map */