@charset "utf-8";
/* CSS Document */
html, body {background: #f3f3f3!important;}

#price{ position: relative;z-index: 5; background: url("../img/price_bg.jpg") no-repeat; background-size: cover; margin: 0 auto; padding: 100px 0;}

#price .container{margin: 0 auto; padding: 80px 0; min-height: 700px; text-align: center;}
#price .container .box{background: url('../img/price_qrcode_bg.png') no-repeat center; height: 700px; line-height: 700px; text-align: center; position: relative; margin: 0 auto; }
#price .container .box>img{height: 300px; padding: 30px; background: #fff; border-radius: 50%; box-shadow: 0 0 46px rgba(24, 92, 197, 0.26); position: relative; z-index: 2; top: -2px;}
#price .container .box .round{position: absolute; width: 300px; height: 300px; line-height: 300px; left: 50%; top: 50%;  margin-top: -150px; margin-left: -150px; animation: round 2s linear infinite; z-index: 3;}
#price .container .box>span{position: absolute; z-index: 1; background: #2e7eef; opacity: .3; width: 300px; height: 300px; left: 0; top: 0; right: 0; bottom: 0; margin: auto; border-radius: 50%; animation: zoom 2s linear infinite;}


#price .container .tips{ width: 50%; background: rgba(146,191,46,.8); display: inline-block; margin: 20px auto; font-size: 1.4rem; padding: 25px 0; box-shadow: 5px 5px 25px rgba(0,0,0, .05);  line-height: 1.3; text-align: left;}
#price .container .tips>div{text-align: left; padding-left: 40px;}
#price .container .tips>div>i{margin-right: 6px;}
#price .container .tips .x{margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.2); padding-right: 45px;}
#price .container .tips .web{padding-right: 45px;}
#price .container .tips a{text-decoration: underline; color: rgba(38,87,161,1);}
#price .container .tips a:hover{text-decoration: none;}

@keyframes round{
    0%{transform: rotate(0deg);}
    25%{transform: rotate(-90deg);}
    50%{transform: rotate(-180deg);}
    75%{transform: rotate(-270deg);}
    100%{transform: rotate(-360deg);}
}
@keyframes zoom{
    0%{transform: scale(1); opacity: .3;}
    25%{transform: scale(1.2); opacity: .22;}
    50%{transform: scale(1.5); opacity: .14;}
    75%{transform: scale(1.7); opacity: .07;}
    100%{transform: scale(1.9); opacity: 0;}
}


@media (max-width:1280px){

    #price{padding: 0 15px 66px 15px;}
    #price .container{min-height: 300px;}
    #price .container .box{height: 300px; line-height: 300px; background: none;}
    #price .container .box>img{height: 250px; padding: 20px;}
    #price .container .box .round{display: none;}
    #price .container .box>span{display: none;}
    #price .container .tips{ width: auto; font-size: 1.2rem; padding: 16px 0; }
    #price .container .tips>div>i{margin-right: 5px; line-height: 1.5; position: relative; top: 2px;}
    #price .container .tips .x{margin-bottom: 10px; padding-bottom: 10px; padding-right: 20px;}
}