html,body{ height: 100%;}
body{ font: 12px '\5FAE\8F6F\96C5\9ED1';}
.fl{ float: left;}
.fr{ float: right;}
.ovf{ overflow: hidden;}

.header{ background: url("../images/bg1.jpg") no-repeat top center/ 100% auto; overflow-x: hidden;}
.header .logo{ display: block; width: 20.28%; margin-left: 6.25%;}
.header .logo img{ display: block; width: 100%;}
.header .banner{ position: relative; width: 100%; margin: 5px auto 0  auto;}
.header .banner img{ position: absolute;}
.header .banner .bg{ position: static; display: block; width: 90.42%; margin: 0 auto;}
.header .banner .circle{ left: 50%; top: 7%; width: 77%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%);}
.header .banner .circle-2{ -webkit-animation: light 1s linear infinite; -moz-animation: light 1s linear infinite; animation: light 1s linear infinite;}
.header .banner .txt-1{ top: 21%; width: 111%;}
.header .banner .txt-2{ top: 70%; left: 50%; width: 70%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%);}
.header .banner .ball-1{ top: 11%; left: 17%; width: 17%;-webkit-animation: ball 4s linear infinite; -moz-animation: ball 4s linear infinite; animation: ball 4s ease-in-out infinite;}
.header .banner .ball-2{ top: 8%; left: 47%; width: 17%;-webkit-animation: ball 6s linear infinite; -moz-animation: ball 6s linear infinite; animation: ball 6s ease-in-out infinite;}
.header .stage{ display: block; width: 100%; margin-top: 7%;}
.header .fc{ display: block; width: 74.47%; margin: -34% auto 0 auto; padding-bottom: 10%;}

.info{ position: relative; width: 92%; margin: 0 auto;}
.info .bg{ display: block; width: 100%;}
.info > div{ position: absolute;}
.info .tlt{ top: 12%; left: 5%; width: 90%; background: url("../images/pic7.png") no-repeat top center/ 100% auto; color: white; font-size: 15px; text-align: center; line-height: 1.4;}
.info .tlt span{ font-size: 20px;}
.info .tlt label{ font-size: 12px; color: #fe7546;}
.info .tlt p:last-child{ font-size: 12px; color: #deff00;}
.info > .ovf{ top: 55%; left: 0; right: 0; color: white;}
.info div.fl{ width: 29.07%; margin-right: 3%; background: url("../images/pic3.png") no-repeat 0 0/ 100% auto; text-align: center;}
.info div.fl:first-child{ margin-left: 3.5%}
.info div.fl p:first-child{ padding-right: 27.98%; background: url("../images/dis.png") no-repeat 81% center/ 27.98% auto; font-size: 27px; letter-spacing: -2px; font-family: 'Arial';}
.info div.fl p:nth-child(2){ margin-top: -.5%; -webkit-transform: scale(.8); -moz-transform: scale(.8); transform: scale(.8);}
.info .ovf label{ position: absolute; width: 7.1%; height: 100%; background: url("../images/pic4.png") no-repeat 0 center/ 100% auto; -webkit-transform: translateX(-75%); -moz-transform: translateX(-75%); transform: translateX(-75%);}

.main{ margin-top: -19.3%; padding: 19.3% 0 6% 0; background: url("../images/bg2.jpg") top center/100% auto;}

.part{ padding-top: 8%;}
.part .tlt{ text-align: center; color: white;}
.part .tlt h2{ background: url("../images/pic5.png") no-repeat center/ 61.67% auto; font-size: 24px;}
.part .tlt div{ position: relative; width: 92.64%; margin: 5% auto;}
.part .tlt div img{ display: block; width: 100%;}
.part .tlt p{ position: absolute; top: 50%; left: 0; right: 0; white-space: nowrap; -webkit-transform: scale(.9) translateY(-65%); -moz-transform: scale(.9) translateY(-65%); transform: scale(.9) translateY(-65%); text-align: center;}
.part-2 .tlt p{ -webkit-transform: scale(.65) translate(-18%,-76%); -moz-transform: scale(.65) translate(-18%,-76%); transform: scale(.65) translate(-18%,-76%);}
.part-2-2 .tlt p{ -webkit-transform: scale(.65) translate(-22%,-76%); -moz-transform: scale(.65) translate(-22%,-76%); transform: scale(.65) translate(-22%,-76%);}
.part-3 .tlt img{ position: relative; display: block; width: 92%; margin: 0 auto -5% auto; z-index: 2;}

.goods{ width: 92%; margin: 0 auto; box-sizing: border-box; border: 6px solid; border-radius: 6px; border-image: url("../images/br_bg.png") 8 stretch stretch;}
.goods img{ display: block; width: 100%;}

.goods-top .goods-con{ position: relative; margin: -3px; padding: 3px; background-color: white; border-radius: inherit;}
.goods-top div.fl{ width: 48%; padding: 0 1%;}
.goods-top a.fr{ width: 50%;}
.goods-top .goods-name{ display: block; margin-top: 10%; font-size: 16px; font-weight: bold; color: #333;}
.goods-top .price{ margin: 5% 0; color: #f4073f; line-height: 1.5;}
.goods-top .price p{ font-weight: bold;}
.goods-top .price span{ float: left;}
.goods-top .price strong{ float: left; font-weight: bold; font-size: 25px;}
.goods-top .price strike{ float: left; margin: 7px 0 0 5px; color: #9f9f9f; font-size: 13px;}
.goods-top .btn-go{ display: block; width: 69%;}

.goods-list{ margin-top: 5%; padding-bottom: 3%;}
.goods-list ul, .goods-top ul{ overflow: hidden;}
.goods-list li, .goods-top li{ position: relative; display: inline-block; width: 48%; margin: 3% 0 0 1%; padding-bottom: 1%; background: white; vertical-align: top;}
.goods-list li a, .goods-top li a{ display: block;}
.goods-list li .lbl, .goods-top li .lbl{ position: absolute; top: 0; left: 5%; padding: 5% 2% 8% 2%; border-radius: 0 0 2em 2em; color: white; background: #f71232;}
.goods-list li div.fl{ width: 70%; padding-left: 3%;}
.goods-list li .btn-go{ width: 20%; background: #f71232; text-align: center; color: white; padding: 2% 0;}
.goods-list li .btn-go span{ color: #f0ff00; font-size: 14px;}
.goods-list li .goods-name{ position: relative; height: 34px; line-height: 17px; color: #333; text-align: justify; font-size: 13px; overflow: hidden;}
/*.goods-list li .goods-name::after{ content: '...'; position: absolute; right: 0; bottom: 0;  width: 13%; background: white;}*/
.goods-list li p, .goods-top li p{ margin-top: 2%; padding-top: 2%; border-top: 1px solid #e9e9e7; color: #f4073f;}
.goods-list li strong, .goods-top li strong{ font-size: 14px;}
.goods-list li strike, .goods-top li strike{ float: right; color: #9f9f9f;}
.goods-list .more{ display: block; margin-top: 4%; padding: 2% 0; background: #00097e; color: #ffe502; font-size: 16px; text-align: center;}

.goods-top ul{ padding-bottom: 2%;}
.goods-top li .goods-name{ margin-top: 0; padding: 2%; background: linear-gradient(#8455ca 0%, #7675db 100%); color: white; font-size: 12px; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;}
.goods-top li p{ width: 52%; border-top: none;}
.part-3 .goods-top li strike{width: 42%; margin-top: 1%;}
.goods-top li .btn-go{ width: 40%; margin-top: 5%;}

.footer{ padding: 3% 0; background: linear-gradient(#ffe0ff 0%, #cdf5ff 100%); text-align: center; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.gzh{ position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,.7); z-index: 99; display: none;}
.gzh .pic{ position: absolute; top: 50%; left: 50%; width: 70%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.gzh .close{ position: absolute; top: 6%; left: 84%; width: 11%;}

.tj,.bkt{ position: fixed; right: 1%; bottom: 8%; width: 0; transition: .3s linear;}
.tj.on,.bkt.on{ width: 12%;}
.qrcode img{ display: block; width: 94%; margin: 5% auto 0 auto; }
.qrcode .hand{ width: 5%; margin-top: 0; -webkit-animation: upsideDown 1s ease-in-out infinite; -moz-animation: upsideDown 1s ease-in-out infinite; animation: upsideDown 1s ease-in-out infinite;}


@media screen and (min-width: 400px){
    .goods-top .goods-name{ font-size: 18px;}
    .info div.fl p:first-child{ font-size: 31px;}
    .part .tlt p{ -webkit-transform: scale(1) translateY(-65%); -moz-transform: scale(1) translateY(-65%); transform: scale(1) translateY(-65%);}
    .part-2 .tlt p{ -webkit-transform: scale(.75) translate(-10%,-76%); -moz-transform: scale(.75) translate(-10%,-76%); transform: scale(.75) translate(-10%,-76%);}
    .part-2-2 .tlt p{ -webkit-transform: scale(.7) translate(-12%,-76%); -moz-transform: scale(.7) translate(-12%,-76%); transform: scale(.7) translate(-12%,-76%);}
}

@media screen and (max-width: 321px){
    .goods-top .goods-name{ font-size: 15px;}
    .goods-top .price strong{ font-size: 22px;}
    .info div.fl p:first-child{ font-size: 22px;}
    .part .tlt p{ -webkit-transform: scale(.8) translate(-8%,-65%); -moz-transform: scale(.8) translate(-8%,-65%); transform: scale(.8) translate(-8%,-65%);}
    .part-2 .tlt p{ -webkit-transform: scale(.6) translate(-27%,-76%); -moz-transform: scale(.6) translate(-27%,-76%); transform: scale(.6) translate(-27%,-76%);}
    .part-2-2 .tlt p{ -webkit-transform: scale(.55) translate(-30%,-76%); -moz-transform: scale(.55) translate(-30%,-76%); transform: scale(.55) translate(-30%,-76%);}
}


@-webkit-keyframes ball {
    from, to{ -webkit-transform: translate(0, 0);}
    50%{ -webkit-transform: translate(-20%, -20%);}
}
@-moz-keyframes ball {
    from, to{ -moz-transform: translate(0, 0);}
    50%{ -moz-transform: translate(-20%, -20%);}
}
@keyframes ball {
    from, to{ transform: translate(0, 0);}
    50%{ transform: translate(-20%, -20%);}
}

@-webkit-keyframes light {
    from, 49.99%{ opacity: 1; filter: alpha(opacity=100);}
    50%,to{ opacity: 0; filter: alpha(opacity=0);}
}

@-moz-keyframes light {
    from, 49.99%{ opacity: 1; filter: alpha(opacity=100);}
    50%,to{ opacity: 0; filter: alpha(opacity=0);}
}

@keyframes light {
    from, 49.99%{ opacity: 1; filter: alpha(opacity=100);}
    50%,to{ opacity: 0; filter: alpha(opacity=0);}
}

@-webkit-keyframes upsideDown {
    from, to{ -webkit-transform: translate(100%, 0);}
    50%{ -webkit-transform: translate(100%, 30%);}
}
@-moz-keyframes upsideDown {
    from, to{ -moz-transform: translate(100%, 0);}
    50%{ -moz-transform: translate(100%, 30%);}
}
@keyframes upsideDown {
    from, to{ transform: translate(100%, 0);}
    50%{ transform: translate(100%, 30%);}
}