@charset "utf-8"; /*基本框架CSS*/ html,body{ width: 100%; min-height: 100vh; position: relative; overflow: hidden; } #zj-main, #xxcy-main, #tjcg-main, #tx-main { display: none; } .clear { clear: both } /*******首页********/ .main { height: 100%; margin: 0 auto; background: #9FF; /* background: url(../images/index.jpg) center;*/ background-size: 100% 100%; position: relative; overflow: hidden; *zoom: 1; } .main .hide { display: none; } .main .one { width: 28%; height: auto; bottom: 7%; left: 15%; position: absolute; } .main .two { width: 28%; bottom: 7%; right: 15%; position: absolute; } .main a { display: block; width: 100%; height: auto; } .zoom { -webkit-animation: Zoom 0.5s ease-in-out } @-webkit-keyframes Zoom { 0% { -webkit-transform: scale(0.01) } 60% { -webkit-transform: scale(1.05) } 80% { -webkit-transform: scale(1.00) } 100% { -webkit-transform: scale(1.00) } } .text-wrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 100; width: 100%; height: 100%; background-size: 100% 100%; background: rgba(0, 0, 0, .7); display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; -webkit-box-orient: vertical; line-height: 150%; } .text-wrap .wrap-content .hd_rules { width: 90%; height: auto; left: 5%; top: 15%; position: absolute; color: #232323; background: rgba(255, 255, 255, .7); padding: 3%; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .text-wrap .wrap-content .hd_rules h2 { width: 40%; height: auto; font-size: 16px; font-weight: bold; margin: 1% auto; color: #232323; text-align: center; } .text-wrap .wrap-content .hd_rules h3 { width: 100%; height: auto; font-size: 14px; font-weight: bold; color: #232323; } .text-wrap .wrap-content .hd_rules p { width: 100%; height: auto; font-size: 12px; margin: 2% auto 0 auto; color: #232323; } .text-wrap .close { z-index: 9999; display: block; width: 23px; height: 23px; background-image: url(../images/close_1.png); /*border-radius: 50%;*/ overflow: hidden; right: 3%; top: 14%; position: absolute; background-size: 23px; background-position: center center; background-repeat: no-repeat; } /*****抽奖页面****/ .ml-main .keTitle { width: 45%; height: auto; margin: 0 auto; } .ml-main .keTitle .title { width: 100%; height: auto; margin: 15% auto; } .ml-main .keTitle .xian { width: 100%; height: auto; } /* 大转盘样式 */ .banner { display: block; width: 95%; margin-left: auto; margin-right: auto; } .banner .turnplate { display: block; width: 100%; position: relative; } .banner .turnplate canvas.item { width: 100%; } .banner .turnplate #tupBtn { position: absolute; width: 27.5%; height: 33.5%; left: 36%; top: 30.5%; border: 0; background: none; } .banner .turnplate img { width: 100%; height: auto; } /*.banner .turnplate img.pointer{position:absolute;width:31.5%;height:42.5%;left:34.6%;top:23%;}*/ /*******中奖页面*******/ .txzl h3 { font-size: 3.2rem; font-weight: bold; width: 100%; height: auto; margin: 0 auto; color: #e32d2c; line-height: 140%; text-align: center; margin-top: 5%; } .txzl h2 { font-size: 3.0rem; font-weight: bold; width: 100%; height: auto; margin: 0 auto; color: #e32d2c; line-height: 140%; text-align: center; } .txzl p { font-size: 2.6rem; width: 90%; height: auto; margin: 1% auto 0 auto; color: #232323; line-height: 150%; text-align: center; } .txzl label { width: 90%; height: auto; margin: 3% auto 0 auto; font-size: 2.6rem; color: #232323; display: block; text-align: center; } .txzl label input { height: auto; font-size: 2.6rem; border: none; line-height: 180%; } .txzl h4 { font-size: 2.6rem; font-weight: bold; width: 100%; height: auto; margin: 3% auto 0 auto; color: #e32d2c; line-height: 140%; text-align: center; } .txzl .info_tj { width: 50%; height: auto; font-size: 3rem; line-height: 180%; color: #ffffff; text-align: center; background: #ad0004; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin: 4% auto 6% auto } /*******谢谢参与页面*******/ .xxcy-main .xxcy { width: 90%; height: auto; position: absolute; top: 30%; left: 5%; background: url(../images/zj_1.png) center; background-size: 100% 100%; } .xxcy h3 { font-size: 3.2rem; font-weight: bold; width: 100%; height: auto; margin: 0 auto; color: #e32d2c; line-height: 140%; text-align: center; margin-top: 5%; } .xxcy p { font-size: 2.8rem; width: 90%; height: auto; margin: 2% auto 5% auto; color: #232323; line-height: 150%; text-align: center; } .xxcy .code { width: 40%; height: auto; margin: 0% auto 3% auto; } /*******自由弹窗*******/ #xxcy-bad .xxcy { width: 90%; height: auto; position: absolute; top: 40%; left: 5%; background: url(../images/xxcy.png) center; background-size: 100% 100%; } #xxcy-bad .xxcy h3 { font-size: 3.2rem; font-weight: bold; width: 100%; height: auto; margin: 0 auto; color: #e32d2c; line-height: 140%; text-align: center; margin-top: 5%; } #xxcy-bad .xxcy p { font-size: 2.8rem; width: 90%; height: auto; margin: 2% auto 5% auto; color: #232323; line-height: 150%; text-align: center; } #xxcy-bad .close_xxcy { width: 31px; height: 31px; position: absolute; top: 38%; right: 2.5%; } /*******提交成功页面*******/ .tjcg-main { width: 100%; height: 100%; margin: 0 auto; background-color: rgba(0, 0, 0, 0.7); background-size: 100% 100%; position: absolute; overflow: hidden; *zoom: 1; z-index: 10; left: center; top: 0; } .tjcg-main .tjcg { width: 90%; height: auto; position: absolute; top: 25%; left: 5%; background: url(../images/zj_1.png) center; background-size: 100% 100%; } .tjcg h3 { font-size: 3.2rem; font-weight: bold; width: 100%; height: auto; margin: 0 auto; color: #e32d2c; line-height: 140%; text-align: center; margin-top: 5%; } .tjcg p { font-size: 2.8rem; width: 90%; height: auto; margin: 1% auto 0 auto; color: #232323; line-height: 150%; text-align: center; } .tjcg .code { width: 40%; height: auto; margin: 3% auto; } .tjcg .zixun { width: 50%; height: auto; font-size: 3rem; line-height: 180%; color: #ffffff; text-align: center; background: #ad0004; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin: 3% auto 5% auto } .tjcg .zixun a { color: #ffffff; display: block; width: 100%; height: auto; } .tjcg-main .close_tjcg { width: 31px; height: 31px; position: absolute; top: 24%; right: 3.5%; } /*******放弃提醒页面*******/ .tx-main { width: 100%; height: 100%; margin: 0 auto; background-color: rgba(0, 0, 0, 0.7); background-size: 100% 100%; position: absolute; overflow: hidden; *zoom: 1; z-index: 10; left: center; top: 0; } .txfq { width: 90%; height: auto; position: absolute; top: 25%; left: 5%; background: url(../images/zj_1.png) center; background-size: 100% 100%; } .txfq h3 { font-size: 3.2rem; font-weight: bold; width: 100%; height: auto; margin: 0 auto; color: #e32d2c; line-height: 140%; text-align: center; margin-top: 5%; } .txfq p { font-size: 2.8rem; width: 90%; height: auto; margin: 1% auto 0 auto; color: #232323; line-height: 150%; text-align: center; } .close_txfq { width: 31px; height: 31px; position: absolute; top: 24%; right: 3.5%; } /*******奖品背包页面*******/ .bb-main { height: 100%; margin: 0 auto; background: url(../images/beib_bg.jpg) center; background-size: 100% 100%; position: relative; overflow: hidden; *zoom: 1; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; -webkit-box-orient: vertical; } .bb-main .jp_content { width: 60%; height: auto; /*position:absolute;top:28%;left:20%;*/ margin: 28% auto 0 auto; } .jp_content p { font-size: 2.6rem; line-height: 130%; color: #232323; margin-top: 3%; } .jp_content p span { font-size: 2.2rem; } @media (min-width:320px) and (max-width:359px) { html { font-size: 31% !important } .wrap { width: 100%; } } @media (min-width:360px) and (max-width:399px) { html { font-size: 36% !important } .wrap { width: 100%; } } @media (min-width:400px) and (max-width:479px) { html { font-size: 40% !important } .wrap { width: 100%; } } @media (min-width:480px) and (max-width:639px) { html { font-size: 49% !important } .wrap { width: 100%; } } @charset "utf-8"; /*基本框架CSS*/ #zj-main, #xxcy-main, #tjcg-main, #tx-main { display: none; } .clear { clear: both } /*******首页********/ .main { height: 100%; margin: 0 auto; background: #9FF; /* background: url(../images/index.jpg) center;*/ background-size: 100% 100%; position: relative; overflow: hidden; *zoom: 1; } .main .hide { display: none; } .main .one { width: 28%; height: auto; bottom: 7%; left: 15%; position: absolute; } .main .two { width: 28%; bottom: 7%; right: 15%; position: absolute; } .main a { display: block; width: 100%; height: auto; } .zoom { -webkit-animation: Zoom 0.5s ease-in-out } @-webkit-keyframes Zoom { 0% { -webkit-transform: scale(0.01) } 60% { -webkit-transform: scale(1.05) } 80% { -webkit-transform: scale(1.00) } 100% { -webkit-transform: scale(1.00) } } .text-wrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 100; width: 100%; height: 100%; background-size: 100% 100%; background: rgba(0, 0, 0, .7); display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; -webkit-box-orient: vertical; line-height: 150%; } .text-wrap .wrap-content .hd_rules { width: 90%; height: auto; left: 5%; top: 15%; position: absolute; color: #232323; background: rgba(255, 255, 255, .7); padding: 3%; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .text-wrap .wrap-content .hd_rules h2 { width: 40%; height: auto; font-size: 16px; font-weight: bold; margin: 1% auto; color: #232323; text-align: center; } .text-wrap .wrap-content .hd_rules h3 { width: 100%; height: auto; font-size: 14px; font-weight: bold; color: #232323; } .text-wrap .wrap-content .hd_rules p { width: 100%; height: auto; font-size: 12px; margin: 2% auto 0 auto; color: #232323; } .text-wrap .close { z-index: 9999; display: block; width: 23px; height: 23px; background-image: url(../images/close_1.png); /*border-radius: 50%;*/ overflow: hidden; right: 3%; top: 14%; position: absolute; background-size: 23px; background-position: center center; background-repeat: no-repeat; } /*****抽奖页面****/ .ml-main { width: 100%; min-height: 100vh; margin: 0 auto; background: #F82D2B; position: absolute; *zoom: 1; z-index: 1; left: center; top: 0; overflow: scroll; } .main_back{ width: 100%; position: absolute; top: 0; left: 0; z-index: 1; } .img_2_1{ width: 60vw; position: absolute; top: 6vw; left: 22vw; animation-delay: 0.25s; animation-duration: 1s; z-index: 2; } .img_2_2{ width: 15vw; position: absolute; top: 15vw; right: 3vw; animation-delay: 0.5s; animation-duration: 1s; z-index: 2; } .text_tip{ width: 100%; position: absolute; top: 125vw; left: 0; text-align: center; font-size: 3.5vw; line-height: 5vw; font-weight: bold; color: #7D3532; font-family: "微软雅黑"; } .bottom_text{ width: 100%; position: fixed; bottom: 1vw; left: 0; text-align: center; color: #9A6A66; font-size: 3vw; line-height: 5vw; } .my_coupon_list{ width: 45vw; position: absolute; top: 140vw; left: 27.5vw; z-index: 999; } .ml-main .keTitle { width: 45%; height: auto; margin: 0 auto; } .ml-main .keTitle .title { width: 100%; height: auto; margin: 15% auto; } .ml-main .keTitle .xian { width: 100%; height: auto; } .ml-main .kePublic { width: 80%; height: auto; position: absolute; top: 69vw; left: 10%; z-index: 999; } .bottom_shadow{ width: 50vw; position: absolute; top: 139vw; left: 25vw; z-index: 1; } .kePublic_back{ width: 85vw; position: absolute; top: 72vw; left: 6vw; z-index: 2; } .record_line{ width: 90vw; height: 8vw; position: absolute; top: 152vw; left: 5vw; line-height: 8vw; font-size: 3vw; color: #EECFCF; text-align: center; background: rgba(0,0,0,0.3); border-radius: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; z-index: 2; } .record_line div{ overflow: hidden; } #gift_coupon{ color: #F3D008; } .rule_title{ width: 40vw; position: absolute; top: 165vw; left: 30vw; z-index: 2; } .rule_text{ width: 90vw; position: absolute; top: 173vw; left: 5vw; font-size: 3.5vw; line-height: 6vw; color: #FEEEEE; margin-bottom: 5vw; z-index: 2; } /* 大转盘样式 */ .banner { display: block; width: 95%; margin-left: auto; margin-right: auto; } .banner .turnplate { display: block; width: 100%; position: relative; } .banner .turnplate canvas.item { width: 100%; } .banner .turnplate #tupBtn { position: absolute; width: 27.5%; height: 33.5%; left: 36%; top: 30.5%; border: 0; background: none; } .banner .turnplate img { width: 100%; height: auto; } /*.banner .turnplate img.pointer{position:absolute;width:31.5%;height:42.5%;left:34.6%;top:23%;}*/ /*******中奖页面*******/ .zj-main { width: 100%; height: 100%; margin: 0 auto; background-color: rgba(0, 0, 0, 0.7); background-size: 100% 100%; position: absolute; overflow: hidden; *zoom: 1; z-index: 10; left: center; top: 0; } .zj-main .txzl { width: 70%; height: auto; position: absolute; top: 28%; left: 15%; background: white; border-radius: 5px; color: #7A312D; text-align: center; font-size: 4vw; line-height: 6vw; } .zj-main .txzl .zj_text{ margin: 6vw auto; } .txzl h3 { font-size: 3.2rem; font-weight: bold; width: 100%; height: auto; margin: 0 auto; color: #e32d2c; line-height: 140%; text-align: center; margin-top: 5%; } .txzl h2 { font-size: 3.0rem; font-weight: bold; width: 100%; height: auto; margin: 0 auto; color: #e32d2c; line-height: 140%; text-align: center; } .txzl p { font-size: 2.6rem; width: 90%; height: auto; margin: 1% auto 0 auto; color: #232323; line-height: 150%; text-align: center; } .txzl label { width: 90%; height: auto; margin: 3% auto 0 auto; font-size: 2.6rem; color: #232323; display: block; text-align: center; } .txzl label input { height: auto; font-size: 2.6rem; border: none; line-height: 180%; } .txzl h4 { font-size: 2.6rem; font-weight: bold; width: 100%; height: auto; margin: 3% auto 0 auto; color: #e32d2c; line-height: 140%; text-align: center; } .txzl .info_tj { width: 50%; height: auto; font-size: 3rem; line-height: 180%; color: #ffffff; text-align: center; background: #ad0004; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin: 4% auto 6% auto } .zj-main .close_zj { width: 25vw; text-align: center; margin: 0 auto; margin-bottom: 5vw; line-height: 9vw; color: #E1CE85; background: #BA2D1C; border-radius: 5px; font-size: 4vw; } /*******谢谢参与页面*******/ .xxcy-main { width: 100%; height: 100%; margin: 0 auto; position: absolute; overflow: hidden; *zoom: 1; z-index: 10; left: center; top: 0; } .xxcy-main .xxcy { width: 70%; height: auto; position: absolute; top: 30%; left:15%; background: white; color: #7A312D; border-radius: 5px; font-size: 4vw; line-height: 6vw; } .xxcy .xxcy_text{ width: 100%; text-align: center; margin: 8vw auto; } .xxcy h3 { font-size: 3.2rem; font-weight: bold; width: 100%; height: auto; margin: 0 auto; color: #e32d2c; line-height: 140%; text-align: center; margin-top: 5%; } .xxcy p { font-size: 2.8rem; width: 90%; height: auto; margin: 2% auto 5% auto; color: #232323; line-height: 150%; text-align: center; } .xxcy .code { width: 40%; height: auto; margin: 0% auto 3% auto; } .xxcy-main .close_xxcy { width: 25vw; text-align: center; margin: 0 auto; margin-bottom: 5vw; line-height: 9vw; color: #E1CE85; background: #BA2D1C; border-radius: 5px; font-size: 4vw; } /*******自由弹窗*******/ #xxcy-bad .xxcy { width: 90%; height: auto; position: absolute; top: 40%; left: 5%; background: url(../images/xxcy.png) center; background-size: 100% 100%; } #xxcy-bad .xxcy h3 { font-size: 3.2rem; font-weight: bold; width: 100%; height: auto; margin: 0 auto; color: #e32d2c; line-height: 140%; text-align: center; margin-top: 5%; } #xxcy-bad .xxcy p { font-size: 2.8rem; width: 90%; height: auto; margin: 2% auto 5% auto; color: #232323; line-height: 150%; text-align: center; } #xxcy-bad .close_xxcy { width: 31px; height: 31px; position: absolute; top: 38%; right: 2.5%; } /*******提交成功页面*******/ .tjcg-main { width: 100%; height: 100%; margin: 0 auto; background-color: rgba(0, 0, 0, 0.7); background-size: 100% 100%; position: absolute; overflow: hidden; *zoom: 1; z-index: 10; left: center; top: 0; } .tjcg-main .tjcg { width: 90%; height: auto; position: absolute; top: 25%; left: 5%; background: url(../images/zj_1.png) center; background-size: 100% 100%; } .tjcg h3 { font-size: 3.2rem; font-weight: bold; width: 100%; height: auto; margin: 0 auto; color: #e32d2c; line-height: 140%; text-align: center; margin-top: 5%; } .tjcg p { font-size: 2.8rem; width: 90%; height: auto; margin: 1% auto 0 auto; color: #232323; line-height: 150%; text-align: center; } .tjcg .code { width: 40%; height: auto; margin: 3% auto; } .tjcg .zixun { width: 50%; height: auto; font-size: 3rem; line-height: 180%; color: #ffffff; text-align: center; background: #ad0004; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin: 3% auto 5% auto } .tjcg .zixun a { color: #ffffff; display: block; width: 100%; height: auto; } .tjcg-main .close_tjcg { width: 31px; height: 31px; position: absolute; top: 24%; right: 3.5%; } /*******放弃提醒页面*******/ .tx-main { width: 100%; height: 100%; margin: 0 auto; background-color: rgba(0, 0, 0, 0.7); background-size: 100% 100%; position: absolute; overflow: hidden; *zoom: 1; z-index: 10; left: center; top: 0; } .txfq { width: 90%; height: auto; position: absolute; top: 25%; left: 5%; background: url(../images/zj_1.png) center; background-size: 100% 100%; } .txfq h3 { font-size: 3.2rem; font-weight: bold; width: 100%; height: auto; margin: 0 auto; color: #e32d2c; line-height: 140%; text-align: center; margin-top: 5%; } .txfq p { font-size: 2.8rem; width: 90%; height: auto; margin: 1% auto 0 auto; color: #232323; line-height: 150%; text-align: center; } .close_txfq { width: 31px; height: 31px; position: absolute; top: 24%; right: 3.5%; } /*******奖品背包页面*******/ .bb-main { height: 100%; margin: 0 auto; background: url(../images/beib_bg.jpg) center; background-size: 100% 100%; position: relative; overflow: hidden; *zoom: 1; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; -webkit-box-orient: vertical; } .bb-main .jp_content { width: 60%; height: auto; /*position:absolute;top:28%;left:20%;*/ margin: 28% auto 0 auto; } .jp_content p { font-size: 2.6rem; line-height: 130%; color: #232323; margin-top: 3%; } .jp_content p span { font-size: 2.2rem; } @media (min-width:320px) and (max-width:359px) { html { font-size: 31% !important } .wrap { width: 100%; } } @media (min-width:360px) and (max-width:399px) { html { font-size: 36% !important } .wrap { width: 100%; } } @media (min-width:400px) and (max-width:479px) { html { font-size: 40% !important } .wrap { width: 100%; } } @media (min-width:480px) and (max-width:639px) { html { font-size: 49% !important } .wrap { width: 100%; } } #jiangpin{padding:0 5px;}