.query-order {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%
}

.query-order .shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(0,0,0,.5)
}

.query-order .bill {
    position: absolute;
    width: 980px;
    height: 480px;
    z-index: 1001;
    top: 50%;
    left: 50%;
    margin: -240px 0 0 -490px;
    background-color: #fff
}

.query-order .bill .tab {
    width: 50px;
    height: 100%
}

.query-order .bill .tab a {
    display: inline-block;
    width: 100%;
    height: 240px;
    padding: 73px 13px 0;
    font-size: 18px;
    text-align: center;
    color: #333;
    background-color: #eee
}

.query-order .bill .tab a.active {
    background-color: #fe5f00;
    color: #fff
}

.query-order .content {
    width: 930px;
    height: 100%;
    position: relative
}

.query-order .content>p {
    position: absolute;
    bottom: 24px;
    width: 100%;
    text-align: center;
    color: #666;
    font-size: 12px
}

.query-order .content form {
    width: 482px;
    height: 100%;
    padding: 65px 60px 15px 30px;
    position: relative
}

.query-order .content form::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 310px;
    background-color: #f2f2f2;
    right: 0;
    top: 79px
}

.query-order .content form h3 {
    font-size: 22px;
    color: #333;
    font-weight: 400;
    margin-bottom: 38px
}

.query-order .content form h3 span {
    font-size: 14px;
    color: #999;
    margin-left: 12px
}

.query-order .content form h3 em {
    font-style: normal;
    color: #ff6f20
}

.query-order .content .items label {
    font-size: 14px;
    color: #333;
    height: 39px;
    line-height: 39px
}

.query-order .content .items label span {
    display: inline-block;
    color: #ff6f20;
    margin-left: 2px
}

.query-order .content .items>div {
    width: 256px;
    margin-left: 16px;
    position: relative
}

.query-order .content .items>div>span {
    position: absolute;
    font-size: 16px;
    color: #333;
    right: 9px;
    top: 9px
}

.query-order .content .items>div select {
    width: 120px;
    height: 39px;
    padding-left: 12px;
    border: 1px solid #d8d8d8;
    margin-right: 10px;
    font-size: 14px;
    border-radius: 2px;
    color: #333
}

.query-order .content .items>div select:last-child {
    margin-right: 0
}

.query-order .content .items>div input {
    height: 39px;
    width: 256px;
    font-size: 14px;
    padding-left: 12px;
    border: 1px solid #d8d8d8;
    border-radius: 2px
}

.query-order .content .designs {
    height: 100%
}

.query-order .content .designs .form-items {
    margin-bottom: 18px;
    position: relative
}

.query-order .content .designs .form-items .items .second {
    margin-left: 91px;
    margin-top: 18px
}

.query-order .content .designs .form-items .items .second select {
    width: 76px;
    margin-right: 11px
}

.query-order .content .designs .form-items .items .second select:last-child {
    margin-right: 0
}

.query-order .content .designs .form-items>span {
    height: 18px;
    font-size: 14px;
    line-height: 22px;
    vertical-align: top;
    padding-left: 108px;
    color: red;
    position: absolute;
    bottom: -16px;
    display: none
}

.query-order .content .designs .form-items>span::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: url(/static/impression/images/new_imp/sprits.png) -355px -205px no-repeat;
    left: 92px;
    top: 5px
}

.query-order .content .designs span.circle {
    position: absolute;
    width: 140px;
    height: 140px;
    right: 17px;
    top: 44%;
    z-index: 2;
    margin-top: -70px;
    border: 1px solid #f2f2f2;
    background-color: #fff;
    border-radius: 50%
}

.query-order .content .designs span.circle::after,.query-order .content .designs span.circle::before {
    height: 36px;
    width: 20px;
    background-color: #fff;
    margin-top: -18px;
    position: absolute;
    top: 50%;
    content: ""
}

.query-order .content .designs span.circle::before {
    left: -1px
}

.query-order .content .designs span.circle::after {
    right: -1px
}

.query-order .content .designs span.circle em {
    position: absolute;
    width: 90px;
    height: 90px;
    background-color: #ff7c34;
    top: 50%;
    left: 50%;
    z-index: 66;
    margin-top: -45px;
    margin-left: -45px;
    border-radius: 50%;
    -webkit-animation: scale-bg 2s infinite;
    animation: scale-bg 2s infinite
}

.query-order .content .designs span.circle a {
    display: inline-block;
    width: 90px;
    height: 90px;
    background-color: #FF7C34;
    border-radius: 50%;
    margin: 25px;
    position: relative;
    z-index: 666
}

.query-order .content .designs span.circle a:hover {
    background-color: #ff500b
}

.query-order .content .designs span.circle a i {
    display: inline-block;
    width: 44px;
    height: 44px;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    color: #fff;
    margin: 23px
}

.query-order .content .designs .budget-result {
    width: 320px;
    height: 100%;
    padding-top: 57px;
    margin-right: 31px
}

.query-order .content .designs .budget-result .result-title {
    font-size: 22px;
    color: #333;
    margin-bottom: 38px
}

.query-order .content .designs .budget-result .result-title span {
    display: inline-block;
    width: 110px;
    text-align: center;
    margin: 0 9px;
    font-size: 30px;
    color: #ff6f20
}

.query-order .content .designs .budget-result ul {
    border: 1px solid #d8d8d8;
    padding: 29px 0
}

.query-order .content .designs .budget-result ul li {
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #666
}

.query-order .content .designs .budget-result ul li span {
    display: inline-block;
    width: 40px;
    text-align: left;
    margin: 0 20px 0 24px
}

.query-order .content .offer h3 {
    margin-bottom: 48px
}

.query-order .content .offer form {
    padding: 65px 21px 15px 67px
}

.query-order .content .offer .form-items {
    height: 69px
}

.query-order .content .offer .form-items>span {
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    padding-left: 112px;
    color: red;
    position: relative;
    display: none
}

.query-order .content .offer .form-items>span::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: url(/static/impression/images/new_imp/sprits.png) -355px -205px no-repeat;
    left: 92px;
    top: 9px
}

.query-order .content .offer .refer {
    text-align: center
}

.query-order .content .offer .refer a {
    display: inline-block;
    width: 180px;
    height: 40px;
    background-color: #ff6f20;
    color: #fff;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    margin-left: -29px
}

.query-order .content .offer .refer a:hover {
    background-color: #ff500b
}

.query-order .content .offer .ad {
    height: 100%;
    width: 350px;
    padding-top: 118px;
    margin-right: 46px
}

.query-order .content .offer .ad ul li {
    float: left;
    width: 102px;
    height: 102px;
    margin-bottom: 40px;
    margin-right: 13px
}

.query-order .content .offer .ad ul li:nth-child(1) {
    background: url(/statics/hong/pc/images/bugget/1.png) center center no-repeat
}

.query-order .content .offer .ad ul li:nth-child(2) {
    background: url(/statics/hong/pc/images/bugget/2.png) center center no-repeat
}

.query-order .content .offer .ad ul li:nth-child(3) {
    background: url(/statics/hong/pc/images/bugget/3.png) center center no-repeat
}

.query-order .content .offer .ad ul li:nth-child(4) {
    background: url(/statics/hong/pc/images/bugget/4.png) center center no-repeat
}

.query-order .content .offer .ad ul li:nth-child(5) {
    background: url(/statics/hong/pc/images/bugget/5.png) center center no-repeat
}

.query-order .content .offer .ad ul li:nth-child(6) {
    background: url(/statics/hong/pc/images/bugget/6.png) center center no-repeat
}

.query-order .consument {
    position: absolute;
    width: 980px;
    height: 480px;
    z-index: 1001;
    top: 50%;
    left: 50%;
    margin: -240px 0 0 -490px;
    background-color: #fff
}

.query-order .consument .calc-result {
    width: 50%;
    padding: 0 45px;
    margin-top: 59px;
    margin-bottom: 36px;
    border-right: 1px solid #e5e5e5
}

.query-order .consument .calc-result .p1 {
    text-align: center;
    font-size: 20px;
    line-height: 40px;
    margin-bottom: 22px
}

.query-order .consument .calc-result .p1 span {
    display: inline-block;
    width: 135px;
    font-size: 30px;
    color: #ff6f50;
    text-align: center
}

.query-order .consument .calc-result ul {
    border: 1px solid #e5e5e5;
    padding: 35px 0;
    margin-bottom: 30px
}

.query-order .consument .calc-result ul li {
    height: 40px;
    font-size: 40px;
    line-height: 40px;
    color: #666
}

.query-order .consument .calc-result ul li .price {
    width: 210px;
    height: 100%;
    padding-left: 43px;
    font-size: 16px
}

.query-order .consument .calc-result ul li .price span {
    font-size: 18px;
    color: #000;
    display: inline-block;
    width: 70px;
    margin: 0 7px
}

.query-order .consument .calc-result ul li .save {
    width: 175px;
    height: 100%;
    font-size: 14px
}

.query-order .consument .calc-result ul li .save i {
    font-style: normal;
    color: #ff6f20;
    margin-right: 5px
}

.query-order .consument .calc-result .p2 {
    color: #ff6f20;
    font-size: 12px;
    margin-bottom: 5px
}

.query-order .consument .calc-result .p3 {
    color: #333;
    font-size: 12px
}

.query-order .consument .perfect {
    width: 49%;
    height: 100%;
    padding: 50px
}

.query-order .consument .perfect .title {
    font-size: 20px;
    color: #333;
    margin-bottom: 30px
}

.query-order .consument .perfect .title span {
    font-size: 14px;
    font-weight: 400;
    color: #ff6f20;
    display: inline-block;
    margin-left: 10px
}

.query-order .consument .perfect .items {
    margin-bottom: 20px
}

.query-order .consument .perfect .items>p {
    font-size: 12px;
    margin-bottom: 20px;
    color: #999
}

.query-order .consument .perfect .items ul li {
    float: left;
    font-size: 12px
}

.query-order .consument .perfect .items ul li span {
    display: block;
    width: 80px;
    height: 60px;
    background: url(/statics/hong/pc/images/sprit.png) -895px -465px no-repeat;
    margin: 8px 17px
}

.query-order .consument .perfect .items ul li span.i2 {
    background-position: -988px -471px
}

.query-order .consument .perfect .items ul li span.i3 {
    background-position: -1068px -468px
}

.query-order .consument .perfect .items ul li p {
    font-size: 12px;
    line-height: 25px;
    color: #333;
    text-align: center;
    margin-right: 10px
}

.query-order .consument .perfect .items ul li a {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url(/statics/hong/pc/images/sprit.png) -863px -534px no-repeat;
    margin-right: 5px;
    vertical-align: text-bottom
}

.query-order .consument .perfect .items ul li a.active {
    background-position: -863px -515px
}

.query-order .consument .perfect .items input {
    border: 1px solid #d8d8d8;
    height: 27px;
    width: 200px;
    padding-left: 10px
}

.query-order .consument .perfect .time li {
    margin-right: 10px
}

.query-order .consument .perfect .btn {
    display: block;
    width: 100px;
    height: 30px;
    color: #fff;
    text-align: center;
    line-height: 30px;
    font-style: normal;
    background-color: #ff6f20;
    border-radius: 5px;
    margin: 0 auto;
    cursor: pointer
}

.query-order .consument .perfect .btn:hover {
    background-color: #ff500b
}

.query-order .consument .perfect .btn.formbit,.query-order .consument .perfect .btn.formbit:hover {
    background-color: #666
}

.query-order span.close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 16px;
    height: 16px;
    background: url(/statics/hong/pc/images/sprit.png) -847px -560px no-repeat;
    cursor: pointer
}

.bottom-order {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 95px;
    z-index: 999
}

.bottom-order .shadow {
    position: absolute;
    width: 100%;
    height: 490px;
    top: 45px;
    bottom: 0;
    background: url(/statics/hong/pc/images/money1.png) 11% 30% no-repeat,url(/statics/hong/pc/images/money2.png) 90% 26% no-repeat;
    background-color: rgba(0,0,0,.7)
}

.bottom-order .quote-page {
    width: 1029px;
    height: 100%;
    margin: 0 auto 0 -514px;
    position: absolute;
    background-color: transparent;
    left: 50%;
    z-index: 200;
    box-shadow: 0 0 25px #b7b7b7;
    border-top-right-radius: 54px
}

.bottom-order .quote-page .title {
    width: 100%;
    height: 79px;
    background-color: transparent;
    position: absolute;
    top: 0
}

.bottom-order .quote-page .title .top {
    width: 929px;
    height: 100%;
    background-color: #fff
}

.bottom-order .quote-page .title .radius {
    height: 100%;
    width: 100px;
    background: url(/statics/hong/pc/images/horn.png) top right no-repeat
}

.bottom-order .quote-page .bg {
    width: 100%;
    height: 490px;
    background-color: #fff;
    position: relative
}

.bottom-order .quote-page .bg .drop {
    width: 602px;
    height: 93px;
    background-color: #fff;
    position: absolute;
    top: -45px;
    z-index: 999;
    left: 50%;
    margin-left: -301px;
    cursor: pointer
}

.bottom-order .quote-page .bg .drop img {
    vertical-align: top;
    width: 100%
}

.bottom-order .quote-page .bg .drop i {
    position: absolute;
    width: 32px;
    height: 28px;
    top: 33px;
    right: -32px;
    background: url(/statics/hong/pc/images/sprit.png) -853px -411px no-repeat #fff
}

.bottom-order .quote-page .bg .drop span {
    display: none;
    position: absolute;
    width: 35px;
    height: 56px;
    background: url(/statics/hong/pc/images/sprit.png) -850px -453px no-repeat #fff;
    right: -35px;
    top: 17px;
    -webkit-animation: gift .5s linear infinite alternate;
    animation: gift .5s linear infinite alternate
}

.bottom-order .quote-page .content {
    background-color: transparent;
    margin: 45px auto 0;
    width: 960px;
    padding: 0 15px;
    border-top: 4px solid #FFE6D4;
    z-index: 10
}

.bottom-order .quote-page .content::after,.bottom-order .quote-page .content::before {
    height: 394px;
    width: 4px;
    background-color: #FFE6D4;
    top: 0;
    content: ""
}

.bottom-order .quote-page .content::before {
    position: absolute;
    left: 0
}

.bottom-order .pic,.bottom-order .redbg {
    position: absolute;
    left: 50%;
    margin-left: -559px
}

.bottom-order .quote-page .content::after {
    position: absolute;
    right: 0
}

.bottom-order .quote-page .content .design {
    box-sizing: content-box
}

.bottom-order .pic {
    width: 1118px;
    height: 60px;
    bottom: 345px;
    z-index: 1000
}

.bottom-order .pic img {
    width: 100%;
    position: absolute;
    bottom: 0
}

.bottom-order .redbg {
    height: 50px;
    width: 1118px;
    bottom: 0;
    background-color: #E8392C
}

.bottom-order .consument h3.title {
    position: relative!important;
    height: 16px
}

.bottom-order .consument h3.title .perfect {
    padding-top: 45px
}

.bottom-order .consument h3.title .perfect .items {
    margin-bottom: 16px
}

.bottom-order .consument h3.title .calc-result {
    margin-top: 39px
}

.bottom-order.active .drop span {
    display: block!important
}

.fixed-nav {
    position: fixed;
    right: 20px;
    top: 50%;
    height: 366px;
    width: 66px;
    z-index: 100;
    margin-top: -160px
}

.fixed-nav>ul>li {
    width: 100%;
    height: 76px;
    border: 1px solid #ddd;
    border-top: 0
}

.fixed-nav>ul>li:first-child {
    border: 1px solid #ddd
}

.fixed-nav>ul>li a {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #fff;
    overflow: hidden
}

.fixed-nav>ul>li a:hover {
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02);
    box-shadow: 0 0 11px #ddd;
    border: 1px solid #e5e5e5
}

.fixed-nav>ul>li a span {
    display: block;
    width: 35px;
    height: 35px;
    margin: 14px auto 0
}

.fixed-nav>ul>li a span.s1 {
    background: url(/statics/hong/pc/images/sprit.png) -15px -206px no-repeat
}

.fixed-nav>ul>li a span.s2 {
    background: url(/statics/hong/pc/images/sprit.png) -16px -282px no-repeat
}

.fixed-nav>ul>li a span.s3 {
    background: url(/statics/hong/pc/images/sprit.png) -15px -355px no-repeat
}

.fixed-nav>ul>li a span.s4 {
    background: url(/statics/hong/pc/images/sprit.png) -16px -432px no-repeat
}

.fixed-nav>ul>li a span.s5 {
    background: url(/statics/hong/pc/images/sprit.png) -16px -500px no-repeat
}

.fixed-nav ul.encode,.fixed-nav ul.encode::after {
    position: absolute;
    border: 1px solid #ddd;
    background-color: #fff
}

.fixed-nav>ul>li a i {
    font-style: normal;
    font-size: 12px;
    color: #656565
}

.fixed-nav .sub-encode:hover ul.encode {
    display: block
}

.fixed-nav ul.encode {
    left: -175px;
    top: -65px;
    display: none;
    box-shadow: 0 0 11px #ddd
}

.fixed-nav ul.encode::after {
    content: "";
    width: 15px;
    height: 15px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    right: -9px;
    top: 50%;
    margin-top: -5px;
    border-left: 0;
    border-bottom: 0
}

.fixed-nav ul.encode li {
    width: 156px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 13px
}

.fixed-nav ul.encode li span {
    display: block;
    width: 105px;
    height: 105px;
    margin: 0 auto
}

.fixed-nav ul.encode li span.app {
    background: url(/statics/hong/pc/images/sprit.png) -818px -589px no-repeat
}

.fixed-nav ul.encode li span.wechat {
    background: url(/statics/hong/pc/images/sprit.png) -710px -589px no-repeat
}

.fixed-nav ul.encode li b {
    font-size: 14px;
    line-height: 26px;
    margin-bottom: 5px;
    color: #000
}

.fixed-nav ul.encode li p {
    font-size: 12px;
    color: #666
}

.forcus-us {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1003;
    display: none;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.5)
}

.follow-wechat {
    width: 450px;
    height: 420px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -210px;
    margin-left: -225px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding-top: 50px;
    text-align: center
}

.follow-wechat .close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 18px;
    height: 18px;
    background: url(https://iconui.tobosu.com/res/impression/images/collect_closeb.png?v=11111) no-repeat
}

.follow-wechat .close:hover {
    background-position: 0 -35px
}

.follow-wechat .p1 {
    font-size: 24px;
    line-height: 24px;
    text-align: center;
    color: #333;
    margin-bottom: 20px
}

.follow-wechat .p1 span {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: top;
    background: url(/static/impression/images/new_imp/sprits.png) -299px -198px no-repeat
}

.follow-wechat .p3 {
    font-size: 16px;
    color: #666;
    text-align: center;
    margin-bottom: 10px
}

.follow-wechat div {
    width: 189px;
    height: 189px;
    margin: 0 auto 10px;
    background: url(/statics/hong/pc/images/wechat.png) center center no-repeat
}

.follow-wechat .p2 {
    font-size: 20px;
    color: #666;
    margin-bottom: 5px
}

.follow-wechat .p4 {
    font-size: 12px;
    color: #999
}

.alert-model {
    position: fixed;
    z-index: 1002;
    width: 500px;
    height: 220px;
    background-color: #fff;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -110px;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 20px;
    display: none
}

.alert-model .title {
    height: 24px;
    font-size: 16px;
    line-height: 24px;
    color: #333;
    margin-bottom: 10px
}

.alert-model .title a {
    display: block;
    width: 18px;
    height: 18px;
    background: url(https://iconui.tobosu.com/res/impression/images/collect_closeb.png?v=11111) no-repeat
}

.alert-model .title a:hover {
    background-position: 0 -35px
}

.alert-model .content {
    border-top: 1px solid #e3e3e3;
    height: 84px;
    padding: 30px 0;
    font-size: 16px;
    line-height: 24px;
    text-align: center
}

.alert-model .btn {
    width: 140px;
    height: 40px;
    margin: 0 auto;
    background-color: #ff9c00;
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 40px
}

.alert-model .btn:hover {
    background-color: #FB3E2F
}

@-webkit-keyframes gift {
    from {
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    to {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }
}

@keyframes gift {
    from {
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    to {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }
}

@-webkit-keyframes scale-bg {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: .8
    }

    100% {
        -webkit-transform: scale(1.6);
        transform: scale(1.6);
        opacity: 0
    }
}

@keyframes scale-bg {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: .8
    }

    100% {
        -webkit-transform: scale(1.6);
        transform: scale(1.6);
        opacity: 0
    }
}

@media screen and (max-width:1400px) {
    .fixed-nav {
        right: 0
    }
}