*{
    padding:0;
    margin:0;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
picture,article,header,footer,main,aside,section,dl,dt,dd,figure,figcaption{
    display:block
}
body{
    font-family:Arial,'微軟正黑體';
    background-color:#282a5b;
    background-image: url(https://img.dcity.com.tw/event/allnewweb/2020/05/acer2020/images/bg.jpg);
    background-position:bottom center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow-x:hidden;
}
h2,
h3,
h4 {
    color: #fff;
}
.btn{
    outline:none;
    border:none;
    display:block;
    cursor:pointer;
    text-decoration:none;
    text-align:center
}
.inpdex_go_shopping {
    padding: .95rem 4rem;
    width: 100%;
    outline: none;
    border: none;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    font-size: 1rem;
    background-color: #E2191D;
    color: #fff;
    font-weight: bold;
}
.disabled{
    pointer-events:none;
    background-color:#8a8a8a !important
}
.d-flex{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex
}
.flex-wrap{
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
}
.w-100{
    width:100%
}
#app{
    width:100%;
    overflow:hidden;
    position:relative
}
.btn{
    cursor:pointer
}
footer{
    width:100%;
    background:#000;
    color:#fff;
    padding:1rem;
    text-align:center
}
@media screen and (max-width: 1000px){
    #app:before{
        background-image:none;
        -webkit-animation:none;
        animation:none
    }
}
header{
    width:100%;
    /*height:765px;*/
    overflow:hidden;
    position:relative;
    background-position:center center;
    background-size:cover
}
.header-wrap{
    max-width:1200px;
    width:100%;
    height:100%;
    margin:0 auto;
    position:relative;
    overflow:hidden;
    z-index:3
}
.header-wrap.mobile{
    display:none
}
.header-wrap img{
    margin:0 auto
}
.bg-head-modify{
    position:absolute;
    top:4%;
    left:12%
}
.header-wrap-slogan{
    height:100%;
    position:relative;
    z-index:1
}
.logo{
    position:absolute;
    top:3%;
    left:3%;
    width:234px;
    height:42px;
    z-index:3
}
.logo a{
    display:block;
    width:100%;
    height:100%
}
.seo{
    position:absolute;
    top:0;
    left:0;
    -webkit-transform:translate3d(-100%, 0, 0);
    transform:translate3d(-100%, 0, 0)
}
.slogan__slogan{
    position:absolute;
    top:173px;
    left:49%;
    -webkit-transform:translate3d(-50%, 0, 0);
    transform:translate3d(-50%, 0, 0);
    z-index:3;
    opacity:0
}
.slogan__slogan.active{
    -webkit-animation:bounceIn 1000ms both;
    animation:bounceIn 1000ms both;
    -webkit-animation-delay:.25s;
    animation-delay:.25s
}
@-webkit-keyframes bounceIn{
    from,20%,40%,60%,80%,to{
        -webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    0%{
        opacity:0;
        -webkit-transform:translate3d(-50%, 0, 0) scale3d(0.3, 0.3, 0.3);
        transform:translate3d(-50%, 0, 0) scale3d(0.3, 0.3, 0.3)
    }
    20%{
        -webkit-transform:translate3d(-50%, 0, 0) scale3d(1.1, 1.1, 1.1);
        transform:translate3d(-50%, 0, 0) scale3d(1.1, 1.1, 1.1)
    }
    40%{
        -webkit-transform:translate3d(-50%, 0, 0) scale3d(0.9, 0.9, 0.9);
        transform:translate3d(-50%, 0, 0) scale3d(0.9, 0.9, 0.9)
    }
    60%{
        opacity:1;
        -webkit-transform:translate3d(-50%, 0, 0) scale3d(1.03, 1.03, 1.03);
        transform:translate3d(-50%, 0, 0) scale3d(1.03, 1.03, 1.03)
    }
    80%{
        -webkit-transform:translate3d(-50%, 0, 0) scale3d(0.97, 0.97, 0.97);
        transform:translate3d(-50%, 0, 0) scale3d(0.97, 0.97, 0.97)
    }
    to{
        opacity:1;
        -webkit-transform:translate3d(-50%, 0, 0) scale3d(1, 1, 1);
        transform:translate3d(-50%, 0, 0) scale3d(1, 1, 1)
    }
}
@keyframes bounceIn{
    from,20%,40%,60%,80%,to{
        -webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    0%{
        opacity:0;
        -webkit-transform:translate3d(-50%, 0, 0) scale3d(0.3, 0.3, 0.3);
        transform:translate3d(-50%, 0, 0) scale3d(0.3, 0.3, 0.3)
    }
    20%{
        -webkit-transform:translate3d(-50%, 0, 0) scale3d(1.1, 1.1, 1.1);
        transform:translate3d(-50%, 0, 0) scale3d(1.1, 1.1, 1.1)
    }
    40%{
        -webkit-transform:translate3d(-50%, 0, 0) scale3d(0.9, 0.9, 0.9);
        transform:translate3d(-50%, 0, 0) scale3d(0.9, 0.9, 0.9)
    }
    60%{
        opacity:1;
        -webkit-transform:translate3d(-50%, 0, 0) scale3d(1.03, 1.03, 1.03);
        transform:translate3d(-50%, 0, 0) scale3d(1.03, 1.03, 1.03)
    }
    80%{
        -webkit-transform:translate3d(-50%, 0, 0) scale3d(0.97, 0.97, 0.97);
        transform:translate3d(-50%, 0, 0) scale3d(0.97, 0.97, 0.97)
    }
    to{
        opacity:1;
        -webkit-transform:translate3d(-50%, 0, 0) scale3d(1, 1, 1);
        transform:translate3d(-50%, 0, 0) scale3d(1, 1, 1)
    }
}
.slogan__date{
    position:absolute;
    left:11%;
    top:137px;
    z-index:3;
    opacity:0
}
.slogan__date.active{
    -webkit-animation:fadeInUp 1000ms both;
    animation:fadeInUp 1000ms both;
    -webkit-animation-delay:.75s;
    animation-delay:.75s
}
@-webkit-keyframes fadeInUp{
    from{
        opacity:0;
        -webkit-transform:translate3d(0, -100%, 0);
        transform:translate3d(0, -100%, 0)
    }
    to{
        opacity:1;
        -webkit-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0)
    }
}
@keyframes fadeInUp{
    from{
        opacity:0;
        -webkit-transform:translate3d(0, -100%, 0);
        transform:translate3d(0, -100%, 0)
    }
    to{
        opacity:1;
        -webkit-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0)
    }
}
.slogan__ready{
    position:absolute;
    z-index:2;
    top:423px;
    left:50%;
    opacity:0;
    -webkit-transform:translate3d(-50%, 0, 0);
    transform:translate3d(-50%, 0, 0)
}
.slogan__ready.active{
    -webkit-animation:zoomIn 1000ms both;
    animation:zoomIn 1000ms both;
    -webkit-animation-delay:.75s;
    animation-delay:.75s
}
@-webkit-keyframes zoomIn{
    from{
        opacity:0;
        -webkit-transform:translate3d(-50%, 0, 0) scale3d(0.3, 0.3, 0.3);
        transform:translate3d(-50%, 0, 0) scale3d(0.3, 0.3, 0.3)
    }
    50%,100%{
        opacity:1
    }
}
@keyframes zoomIn{
    from{
        opacity:0;
        -webkit-transform:translate3d(-50%, 0, 0) scale3d(0.3, 0.3, 0.3);
        transform:translate3d(-50%, 0, 0) scale3d(0.3, 0.3, 0.3)
    }
    50%,100%{
        opacity:1
    }
}
.slogan__spark{
    position:absolute;
    top:0;
    left:0;
    width:100px;
    height:100px;
    background-image:url("../images/spark.png");
    z-index:0
}
.spark01{
    top:38px;
    left:111px
}
.spark01.active{
    -webkit-animation:spark 2.5s steps(10) infinite;
    animation:spark 2.5s steps(10) infinite;
    -webkit-animation-delay:.35s;
    animation-delay:.35s
}
.spark02{
    width:130px;
    height:130px;
    top:66px;
    left:92%;
    background-image:url("../images/spark2.png")
}
.spark02.active{
    -webkit-animation:spark2 2.5s steps(10) infinite;
    animation:spark2 2.5s steps(10) infinite;
    -webkit-animation-delay:.55s;
    animation-delay:.55s
}
.spark1{
    top:125px;
    left:74%
}
.spark1.active{
    -webkit-animation:spark 2.5s steps(10) infinite;
    animation:spark 2.5s steps(10) infinite;
    -webkit-animation-delay:.25s;
    animation-delay:.25s
}
.spark2{
    width:130px;
    height:130px;
    top:18px;
    left:60%;
    background-image:url("../images/spark2.png")
}
.spark2.active{
    -webkit-animation:spark2 2.5s steps(10) infinite;
    animation:spark2 2.5s steps(10) infinite;
    -webkit-animation-delay:1.75s;
    animation-delay:1.75s
}
.spark3{
    top:94px;
    left:8%
}
.spark3.active{
    -webkit-animation:spark 2.5s steps(10) infinite;
    animation:spark 2.5s steps(10) infinite;
    -webkit-animation-delay:.75s;
    animation-delay:.75s
}
.spark4{
    width:130px;
    height:130px;
    top:125px;
    left:40%;
    background-image:url("../images/spark2.png")
}
.spark4.active{
    -webkit-animation:spark2 2.5s steps(10) infinite;
    animation:spark2 2.5s steps(10) infinite
}
@-webkit-keyframes spark{
    0%{
        background-position-x:0
    }
    50%{
        background-position-x:-1000px
    }
    100%{
        background-position-x:-1000px
    }
}
@keyframes spark{
    0%{
        background-position-x:0
    }
    50%{
        background-position-x:-1000px
    }
    100%{
        background-position-x:-1000px
    }
}
@-webkit-keyframes spark2{
    0%{
        background-position-x:0
    }
    50%{
        background-position-x:-1300px
    }
    100%{
        background-position-x:-1300px
    }
}
@keyframes spark2{
    0%{
        background-position-x:0
    }
    50%{
        background-position-x:-1300px
    }
    100%{
        background-position-x:-1300px
    }
}
.header-wrap.mobile picture{
    display:none
}
.header-wrap.mobile img{
    display:block;
    width:100%
}
#menu{
    display:none;
    width:100%;
    background-image:-webkit-gradient(linear, left bottom, left top, from(#940114), to(#c3003d));
    background-image:-webkit-linear-gradient(bottom, #940114 0%, #c3003d 100%);
    background-image:-o-linear-gradient(bottom, #940114 0%, #c3003d 100%);
    background-image:linear-gradient(to top, #940114 0%, #c3003d 100%)
}
#menu #navbar-toggle{
    width:42px;
    height:32px;
    margin-left:auto;
    cursor:pointer;
    margin-top:.75rem;
    margin-bottom:.75rem;
    margin-left:.5rem;
    position:relative
}
#menu #navbar-toggle.active span:nth-of-type(1){
    -webkit-transform:translate(8px, 0px) rotate(45deg);
    -ms-transform:translate(8px, 0px) rotate(45deg);
    transform:translate(8px, 0px) rotate(45deg)
}
#menu #navbar-toggle.active span:nth-of-type(2){
    -webkit-transform:scale(0);
    -ms-transform:scale(0);
    transform:scale(0)
}
#menu #navbar-toggle.active span:nth-of-type(3){
    -webkit-transform:translate(0px, -12px) rotate(-45deg);
    -ms-transform:translate(0px, -12px) rotate(-45deg);
    transform:translate(0px, -12px) rotate(-45deg)
}
#menu #navbar-toggle span{
    display:block;
    width:100%;
    height:5px;
    background-color:#fff;
    position:absolute;
    -webkit-transition:all .3s;
    -o-transition:all .3s;
    transition:all .3s
}
#menu #navbar-toggle span:nth-of-type(1){
    top:0;
    left:0;
    -webkit-transform-origin:top left;
    -ms-transform-origin:top left;
    transform-origin:top left
}
#menu #navbar-toggle span:nth-of-type(2){
    top:50%;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
    left:0
}
#menu #navbar-toggle span:nth-of-type(3){
    bottom:0;
    left:0
}
#menu #navbar-menu-wrap{
    width:100%;
    display:none
}
#menu #navbar-menu-wrap ul li{
    width:100%;
    text-align:center
}
#menu #navbar-menu-wrap ul li a{
    text-decoration:none;
    color:#fff;
    padding:.75rem;
    display:block;
    font-size:1.25rem;
    border-bottom:1px solid #ff79a3;
    background-color:#e61b5b
}
@media screen and (min-width: 1001px){
    html.webp header{
        background:url("../images/header_bg.jpg") no-repeat center/cover
    }
    header{
        background:url("../images/header_bg.jpg") no-repeat center/cover
    }
}
@media screen and (max-width: 1000px){
    .header-wrap.mobile{
        position:relative;
        z-index:2
    }
    .header-wrap.mobile picture{
        display:block;
        width:100%
    }
    .slogan__spark{
        display:none
    }
    header{
        background-image:none;
        height:auto
    }
    header:before{
        background-image:none;
        position:relative;
        width:0;
        height:0
    }
    .bg-header-m{
        width:100%;
        display:block
    }
    .header-wrap{
        display:none
    }
    .header-wrap.mobile{
        display:block;
        margin-top:56px
    }
    .bg-header-s{
        display:none
    }
    .bg-header-xs{
        display:none
    }
    .logo{
        top:11vw;
        left:34vw;
        width:28vw;
        height:6vw;
        -webkit-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0)
    }
    #menu{
        display:-webkit-box;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;
        -webkit-flex-wrap:wrap;
        -ms-flex-wrap:wrap;
        flex-wrap:wrap;
        position:fixed;
        top:0;
        left:0;
        z-index:999;
        -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.35);
        box-shadow:0 1px 3px rgba(0,0,0,0.35)
    }
}
@media screen and (max-width: 576px){
    .bg-header-m{
        display:none
    }
    .bg-header-s{
        width:100%;
        display:block
    }
    .logo{
        width:32vw;
        top:8vw
    }
    #menu #navbar-toggle{
        height:26px
    }
    #menu #navbar-toggle span{
        height:4px
    }
    #menu #navbar-toggle.active span:nth-of-type(1){
        -webkit-transform:translate(7px, -4px) rotate(45deg);
        -ms-transform:translate(7px, -4px) rotate(45deg);
        transform:translate(7px, -4px) rotate(45deg)
    }
    #menu #navbar-toggle.active span:nth-of-type(3){
        -webkit-transform:translate(0px, -12px) rotate(-45deg);
        -ms-transform:translate(0px, -12px) rotate(-45deg);
        transform:translate(0px, -12px) rotate(-45deg)
    }
    .header-wrap.mobile{
        margin-top:50px
    }
}
@media screen and (max-width: 424px){
    .bg-header-s{
        display:none
    }
    .bg-header-xs{
        width:100%;
        display:block
    }
}
#pc-nav{
    position:fixed;
    top:300px;
    left:0;
    background-color:rgba(0,0,0,0.42);
    padding:12px;
    border-radius:14px;
    z-index:100
}
#pc-nav .nav-list__li{
    border-bottom:1px solid rgba(255,255,255,0.5);
    padding:12px 0;
    text-align:center;
    cursor:pointer;
    position:relative
}
#pc-nav .nav-list__li.active .nav-list__li-txt{
    color:#ffe62b
}
#pc-nav .nav-list__li:hover .nav-list__li-txt{
    color:#ffe62b
}
#pc-nav .nav-list__li:last-of-type{
    border-bottom:none
}
#pc-nav .nav-list__li-txt{
    font-size:16px;
    color:#fff
}
#slide-nav{
    position:fixed;
    top:0;
    left:50%;
    -webkit-transform:translate3d(-50%, -110%, 0);
    transform:translate3d(-50%, -110%, 0);
    -webkit-transition:all .3s;
    -o-transition:all .3s;
    transition:all .3s;
    z-index:333;
    width:100%;
    background-image:-webkit-gradient(linear, left top, left bottom, from(#65cce9), color-stop(50%, #3e9dcb), to(#3186b4));
    background-image:-webkit-linear-gradient(top, #65cce9 0%, #3e9dcb 50%, #3186b4 100%);
    background-image:-o-linear-gradient(top, #65cce9 0%, #3e9dcb 50%, #3186b4 100%);
    background-image:linear-gradient(to bottom, #65cce9 0%, #3e9dcb 50%, #3186b4 100%);
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.35),inset 0px 3px 3px rgba(162,223,255,0.7),inset 0px -3px 6px rgba(34,134,188,0.7);
    box-shadow:0px 1px 2px rgba(0,0,0,0.35),inset 0px 3px 3px rgba(162,223,255,0.7),inset 0px -3px 6px rgba(34,134,188,0.7)
}
#slide-nav.slide{
    -webkit-transform:translate3d(-50%, 0%, 0);
    transform:translate3d(-50%, 0%, 0)
}
#slide-nav .nav-list__ul{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    margin:0 auto;
    position:relative;
    z-index:2
}
#slide-nav .nav-list__li{
    cursor:pointer;
    height:82px;
    text-align:center;
    display:-webkit-inline-box;
    display:-webkit-inline-flex;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    position:relative;
    -webkit-transition:all .3s;
    -o-transition:all .3s;
    transition:all .3s
}
#slide-nav .nav-list__li:before{
    content:"";
    position:absolute;
    width:100%;
    height:70%;
    top:50%;
    right:0;
    -webkit-transform:translate3d(0, -50%, 0);
    transform:translate3d(0, -50%, 0);
    border-right:1px solid #d7ebff;
    -webkit-box-shadow:1px 0px 0px #316398;
    box-shadow:1px 0px 0px #316398
}
#slide-nav .nav-list__li:last-child:before{
    border-right:none;
    -webkit-box-shadow:none;
    box-shadow:none
}
#mobile-nav{
    display:none;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    z-index:22;
    overflow:hidden
}
#mobile-nav .nav-list__ul{
    display:block;
    width:100%;
    -webkit-box-shadow:0px -1px 2px rgba(0,0,0,0.5);
    box-shadow:0px -1px 2px rgba(0,0,0,0.5);
    overflow-x:auto;
    font-size:0;
    white-space:nowrap;
    background:#c2003c;
    position:relative;
    padding:0 1rem
}
#mobile-nav .nav-list__ul-bar{
    position:absolute;
    top:0;
    left:-33.33%;
    width:33.33%;
    height:6px;
    background-color:#fd0006;
    z-index:1;
    -webkit-transition:all .3s;
    -o-transition:all .3s;
    transition:all .3s
}
#mobile-nav .nav-list__li{
    cursor:pointer;
    text-align:center;
    padding:1.25rem 0;
    background:#c2003c;
    color:#fff;
    border-right:1px solid #ff6796;
    display:inline-block;
    position:relative;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
}
#mobile-nav .nav-list__li.active{
    color:#c2003c;
    background:yellow
}
#mobile-nav .nav-list__li:last-child{
    border-right:none
}
.nav-list__ul{
    max-width:1100px;
    width:100%;
    margin:0 auto
}
a.nav-list__li__wrap{
    width:100%;
    height:100%;
    position:relative;
    z-index:2;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center
}
a.nav-list__li-bottom__text{
    text-decoration:none;
    color:#fff
}
#mobile-nav .nav-list__li-1{
    width:100%
}
#mobile-nav .nav-list__li-2{
    width:50%
}
#mobile-nav .nav-list__li-3{
    width:33.33333%
}
#mobile-nav .nav-list__li-4{
    width:33.33333%
}
#mobile-nav .nav-list__li-5{
    width:33.33333%
}
#mobile-nav .nav-list__li-6{
    width:33.33333%
}
.nav-list__li-1{
    width:100%
}
.nav-list__li-2{
    width:50%
}
.nav-list__li-3{
    width:33.33333%
}
.nav-list__li-4{
    width:25%
}
.nav-list__li-5{
    width:20%
}
.nav-list__li-6{
    width:16.66667%
}
.nav-list__li__text{
    color:#fff;
    font-size:1.5rem;
    font-weight:bold;
    text-shadow:1px 1px 0px #000
}
.span-nav__arrow{
    position:absolute;
    bottom:0;
    left:0;
    height:4px;
    background-color:#0a4a69;
    -webkit-transition:all .3s;
    -o-transition:all .3s;
    transition:all .3s
}
.span-nav__arrow:before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    -webkit-transform:translate3d(-50%, -100%, 0);
    transform:translate3d(-50%, -100%, 0);
    border-top:16px solid transparent;
    border-bottom:16px solid #5ec4e8;
    border-right:16px solid transparent;
    border-left:16px solid transparent
}
.span-nav__arrow:after{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    -webkit-transform:translate3d(-50%, -100%, 0);
    transform:translate3d(-50%, -100%, 0);
    border-top:10px solid transparent;
    border-bottom:10px solid #fff;
    border-right:10px solid transparent;
    border-left:10px solid transparent
}
@media screen and (max-width: 1100px){
    .nav-list__li__text{
        font-size:1.75rem
    }
}
@media screen and (max-width: 1000px){
    #pc-nav{
        display:none
    }
    #slide-nav{
        display:none
    }
    #mobile-nav{
        display:block
    }
    .nav-list__li__text{
        font-size:1.5rem
    }
    .nav-list__li-bottom__text{
        font-size:1.2rem
    }
}
@media screen and (max-width: 576px){
    .nav-list__li-bottom__text{
        font-size:1rem
    }
}
@media screen and (max-width: 424px){
    main{
        margin-bottom:64px
    }
    #pc-nav{
        display:none
    }
    #mobile-nav .nav-list__li span{
        width:100%
    }
    .notice-list-wrap{
        margin-bottom:48px
    }
}
.item-wrap.order_propage{
    padding:0
}
.order_propage .item-box-wrap:after{
    opacity:.5
}
.order_propage .item-box{
    width:100%;
    position:relative;
    z-index:6
}
.order_propage .item-box .items{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    padding:1rem;
    position:relative;
    background-color:#fff
}
.order_propage .item-box .items .item-limit-count{
    position:absolute;
    width:128px;
    height:128px;
    top:100px;
    right:20px;
    -webkit-transform:rotate(15deg);
    -ms-transform:rotate(15deg);
    transform:rotate(15deg);
    background-image:url("../images/limite30.png");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:100%;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    color:#fff;
    font-size:1.6rem;
    font-weight:bold
}
.order_propage .item-box .items .item-title{
    width:100%;
    font-size:2rem;
    border-bottom:1px dashed #307bb2;
    padding:1rem 1.5rem 2rem 1.5rem;
    font-weight:bold;
    color:#444598;
    text-align:center
}
.order_propage .item-box .items .item-left{
    width:50%;
    padding:1rem 0
}
.order_propage .item-box .items .item-left img{
    width:100%;
    max-width:330px;
    display:block;
    margin:0 auto
}
.order_propage .item-box .items .item-left .item-gifts{
    width:90%;
    padding:1rem;
    background-color:#f3f3f3;
    border-radius:4px;
    margin:2rem auto 0 auto;
    font-size:1rem;
    line-height:2rem
}
.order_propage .item-box .items .item-right{
    width:50%;
    padding:2rem
}
.order_propage .item-box .items .item-right .item-description{
    padding:1rem 0;
    border-bottom:1px dashed #307bb2
}
.order_propage .item-box .items .item-right .item-description ul li{
    text-align:left;
    margin-bottom:.5rem;
    color:#666666
}
.order_propage .item-box .items .item-right .item-description ul li:last-child{
    margin-bottom:0
}
.order_propage .item-box .items .item-right .item-price-box{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    margin-top:1rem;
    -webkit-box-align:end;
    -webkit-align-items:flex-end;
    -ms-flex-align:end;
    align-items:flex-end
}
.order_propage .item-box .items .item-right .item-price-box .origin_price{
    text-align:left;
    font-weight:bold;
    color:#4E4D4D;
    margin-right:.5rem
}
.order_propage .item-box .items .item-right .item-price-box .price{
    text-align:left;
    font-weight:bold;
    color:#4E4D4D;
    font-size:2rem
}
.order_propage .item-box .items .item-right .item-price-box .price span{
    color:#DE2526;
    font-family:Arial, Helvetica, sans-serif,"微軟正黑體"
}
.order_propage .item-box .items .item-right .item-btn-box{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    margin-top:1rem
}
.order_propage .item-box .items .item-right .item-btn-box .btn{
    padding:.95rem;
    width:45%;
    color:#fff;
    font-weight:bold
}
.order_propage .item-box .items .item-right .item-btn-box .btn.item-buy{
    background-color:#DE2526
}
.order_propage .item-box .items .item-right .item-btn-box .btn.item-list{
    background-color:#1D2B53
}
.order_propage .item-box .items .item-right .item-btn-box .btn.item-end{
    background-color:#b1b1b1;
    pointer-events:none;
    cursor:pointer
}
.props{
    font-weight:bold;
    margin-right:1rem;
    color:#de2526
}
@media screen and (max-width: 576px){
    .order_propage .item-box .items .item-right .item-price-box .origin_price{
        margin-right:.5rem;
        margin-left:auto
    }
}
.item-wrap.order_phone{
    padding:0
}
.order_phone{
    width:100%
}
.order_phone .item-box{
    width:100%;
    position:relative;
    z-index:6
}
.order_phone .item-box .items{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    padding:1rem;
    background-color:#fff
}
.order_phone .item-box .items .item-title{
    width:100%;
    font-size:1.75rem;
    color:#4F4F4F;
    border-bottom:1px dashed #307bb2;
    padding:1rem 1.5rem 2rem 1.5rem;
    font-weight:bold;
    text-align:center
}
.order_phone .item-box .items .item-title span:last-child{
    margin-left:1rem;
    color:#444598
}
.order_phone .item-box .items .item-info{
    border-bottom:1px dashed #307bb2;
    padding:1rem 0;
    width:100%;
    text-align:center
}
.order_phone .item-box .items .item-info img{
    max-width:330px;
    width:100%;
    margin:0 auto
}
.order_phone .item-box .items .item-info .item-price{
    font-size:1.5rem;
    padding:1rem 0 0 0;
    font-weight:bold
}
.order_phone .item-box .items .item-info .item-price span{
    font-size:1.75rem;
    font-family:Arial, Helvetica, sans-serif;
    color:#DE2526;
    font-weight:bold;
    margin-left:1rem
}
.order_phone .item-box .items .item-form{
    width:460px;
    padding:1rem 0
}
.order_phone .item-box .items .item-form .item-form-title{
    padding:.5rem 0 1.5rem 0;
    width:100%;
    font-size:1.5rem;
    font-weight:bold;
    color:#1D2B53;
    text-align:center
}
.order_phone .item-box .items .item-form .item-input-group{
    display:block;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    margin-bottom:1rem
}
.order_phone .item-box .items .item-form .item-input-group label{
    display:block;
    width:100%;
    margin-bottom:1rem;
    font-weight:bold;
    text-align:center
}
.order_phone .item-box .items .item-form .item-input-group label span{
    color:#DE2526
}
.order_phone .item-box .items .item-form .item-input-group .item-select-group{
    width:100%;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    margin-bottom:.5rem;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
}
.order_phone .item-box .items .item-form .item-input-group .item-select-group select:first-child{
    margin-right:.5rem
}
.order_phone .item-box .items .item-form .item-input-group select{
    outline:none;
    border:1px solid #a0a0a0;
    background-color:#fff;
    padding:.8rem 1rem;
    border-radius:2px;
    -webkit-transition:all .3s ease-in;
    -o-transition:all .3s ease-in;
    transition:all .3s ease-in;
    height:47px
}
.order_phone .item-box .items .item-form .item-input-group #getaddr1{
    margin-bottom:.5rem
}
.order_phone .item-box .items .item-form .item-input-group #givestoreno{
    width:100%
}
.order_phone .item-box .items .item-form .item-input-group .form-control{
    outline:none;
    border:1px solid #a0a0a0;
    background-color:#fff;
    padding:.8rem 1rem;
    border-radius:2px;
    -webkit-box-flex:1;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    -webkit-transition:all .3s ease-in;
    -o-transition:all .3s ease-in;
    transition:all .3s ease-in;
    height:47px
}
.order_phone .item-box .items .item-form .item-input-group .form-control:focus{
    border:1px solid #1aa1f0;
    -webkit-box-shadow:0 0 3px #1aa1f0;
    box-shadow:0 0 3px #1aa1f0
}
.order_phone .item-box .items .item-form .item-input-group img{
    -webkit-align-self:center;
    -ms-flex-item-align:center;
    -ms-grid-row-align:center;
    align-self:center;
    margin-left:1rem
}
.order_phone .item-box .items .item-form .item-input-group small{
    display:block;
    width:100%;
    margin-top:.25rem;
    color:#4E4D4D;
    font-size:.9rem
}
.order_phone .item-box .items .item-form .item-input-group img{
    border:1px solid #a0a0a0;
    padding:.25rem
}
.order_phone .item-box .items .item-form .btn-submit{
    padding:.95rem 4rem;
    width:100%;
    outline:none;
    border:none;
    display:block;
    margin:0 auto;
    cursor:pointer;
    font-size:1rem;
    background-color:#E2191D;
    color:#fff;
    font-weight:bold
}
.order_phone .item-box .items .item-form b.notice{
    color:#E2191D;
    margin-top:.5rem;
    font-size:.9rem;
    display:block
}
.order_phone .item-box .items .item-form .btn-group{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between
}
.order_phone .item-box .items .item-form .btn-group .btn{
    width:45%
}
.order_phone .item-box .items .item-form .btn-group .btn-code-submit{
    background-color:#E2191D;
    color:#fff;
    padding:.95rem;
    font-weight:bold;
    font-size:1rem
}
.order_phone .item-box .items .item-form .btn-group .btn-addr{
    background-color:#1D2B53;
    color:#fff;
    padding:.95rem;
    font-weight:bold;
    font-size:1rem
}
.stop-items .items__item-a{
    cursor:default
}
.loading-img{
    background-color:#fff;
    width:100%;
    max-height:280px;
    position:relative;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    background-position:center center;
    background-repeat:no-repeat;
    background-color:#ccc
}
.loading-img:before{
    content:"";
    background-image:url("../images/loading.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:80px;
    width:80px;
    height:80px;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate3d(-50%, -50%, 0);
    transform:translate3d(-50%, -50%, 0);
    -webkit-animation:loadingRoll 1s infinite linear;
    animation:loadingRoll 1s infinite linear
}
.loading-img img{
    opacity:0
}
@-webkit-keyframes loadingRoll{
    0%{
        -webkit-transform:translate3d(-50%, -50%, 0) rotate(0deg);
        transform:translate3d(-50%, -50%, 0) rotate(0deg)
    }
    100%{
        -webkit-transform:translate3d(-50%, -50%, 0) rotate(360deg);
        transform:translate3d(-50%, -50%, 0) rotate(360deg)
    }
}
@keyframes loadingRoll{
    0%{
        -webkit-transform:translate3d(-50%, -50%, 0) rotate(0deg);
        transform:translate3d(-50%, -50%, 0) rotate(0deg)
    }
    100%{
        -webkit-transform:translate3d(-50%, -50%, 0) rotate(360deg);
        transform:translate3d(-50%, -50%, 0) rotate(360deg)
    }
}
.item-box-wrap{
    margin-bottom:6rem;
    border:solid 6px #000;
    /*background-image:-webkit-gradient(linear, left top, left bottom, from(#7d0000), to(#950014));
    background-image:-webkit-linear-gradient(top, #7d0000 0%, #950014 100%);
    background-image:-o-linear-gradient(top, #7d0000 0%, #950014 100%);
    background-image:linear-gradient(to bottom, #7d0000 0%, #950014 100%);*/
    position:relative;
    z-index:1
}
.item-box-wrap:last-of-type{
    margin-bottom:0
}
.item-box-wrap:before,.item-box-wrap:after{
    content:"";
    width:100%;
    position:absolute;
    top:0;
    left:0
}
.item-box-wrap:before{
    height:389px;
    background-image:url("../images/bg-black.png");
    background-position:center top;
    background-repeat:no-repeat;
    z-index:1
}
.item-box-wrap__box{
    width:100%;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    position:relative
}
.item-box-type{
    width:100%;
    position:relative;
    z-index:2
}
.item-box-type__title-img-box{
    width:458px;
    position:absolute;
    top:-28px;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%)
}
.item-box-type__title-img-box img{
    display:block;
    width:100%
}
.item-box-type__box{
    width:100%;
    height:100%;
    position:relative;
    padding:.75rem;
    z-index:2
}
.item-box-type__title{
    -webkit-transform:skewX(-10deg);
    -ms-transform:skewX(-10deg);
    transform:skewX(-10deg);
    display:none
}
.item-box-type__text{
    font-size:2.75rem;
    color:#fff;
    text-shadow:0px 1px 0px #000,0px 2px 0px #000;
    font-weight:bold
}
.item-box-type__sub-text{
    font-size:1.75rem;
    font-weight:bold;
    color:#fff603
}
.item--num4{
    width:25%
}
.item--num5{
    width:20%
}
.items--news{
    position:relative
}
.items--news:before{
    content:"";
    position:absolute;
    top:0;
    right:8px;
    width:60px;
    height:36px;
    background-image:url("../images/new.png");
    z-index:1
}
.items__item{
    width:100%;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    position:relative;
    margin-top:24px;
    z-index:6
}
.items__item-dl{
    padding:.25rem;
    position:relative;
    -webkit-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s
}
.items__item-dl:hover{
    -webkit-transform:translate3d(0, -6px, 0);
    transform:translate3d(0, -6px, 0)
}
.items__item-a{
    background-color:#fff;
    text-align:center;
    display:block;
    text-decoration:none;
    position:relative;
    z-index:1;
    padding:2px
}
.items__item-a:hover:after{
    -webkit-animation:rainbow-border 3s linear infinite;
    animation:rainbow-border 3s linear infinite
}
.items__item-a:after{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:-webkit-linear-gradient(45deg, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
    background:-o-linear-gradient(45deg, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
    background:linear-gradient(45deg, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
    background-size:200%;
    -webkit-transition:background-color .3s linear;
    -o-transition:background-color .3s linear;
    transition:background-color .3s linear
}
.items__item-top{
    min-height:150px;
    -webkit-transition:opacity 0.4s;
    -o-transition:opacity 0.4s;
    transition:opacity 0.4s;
    position:relative;
    z-index:1;
    background-color:#fff
}
.items__item-top-img{
    display:block;
    width:100%
}
.items__item-top-title{
    opacity:0;
    display:none
}
.items__item-top-limit{
    width:50%;
    background-color:#BE0F74;
    color:#fff;
    font-weight:bold;
    padding:.5rem 0;
    position:absolute;
    bottom:0;
    left:0;
    border-radius:0 24px 24px 0
}
.items__item-top-outlet{
    position:absolute;
    bottom:0px;
    right:0;
    width:50%;
    background-color:rgba(255,1,79,0.6);
    color:#fff;
    font-weight:bold;
    padding:.5rem 0;
    border-radius:24px 0px 0px 24px
}
.items__item-info{
    background-color:#efefef;
    color:#000;
    height:46px;
    font-size:14px;
    position:relative;
    z-index:1
}
.items__item-info-txt{
    font-weight:bold;
    padding:.5rem;
    height:100%;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center
}
.items__item-footer{
    text-decoration:none;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    position:relative;
    z-index:1;
    background-color:#fff
}
.items__item-footer__price{
    width:100%;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:baseline;
    -webkit-align-items:baseline;
    -ms-flex-align:baseline;
    align-items:baseline;
    padding:.25rem
}
.items__item-footer__price-origin{
    font-size:16px;
    color:#6d6d6d;
    display:block;
    margin-right:6px
}
.items__item-footer__price-discount{
    font-size:28px;
    font-weight:bold;
    color:#ff014f;
    display:block
}
.items__item-footer__btn{
    width:95%;
    font-size:16px;
    padding:14px 0;
    text-decoration:none;
    background-color:#fd0006;
    color:#fff;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    font-weight:bold;
    border-radius:28px;
    margin:0 0 .25rem 0
}
.sold-out{
    width:100%;
    color:#fff;
    height:43px;
    line-height:43px;
    text-decoration:none;
    background-color:#383838;
    font-size:1rem;
    font-weight:bold
}
.stop-items .item-price__footer{
    text-align:center;
    padding:.5rem .25rem;
    background-color:#fff
}
#is_broken{
    display:none
}
.item-box-btn--wait{
    width:60%;
    background-color:#6357A3
}
.item-box-btn--wait{
    width:60%;
    background-color:transparent;
    position:relative;
    z-index:0
}
.item-box-btn--wait:before{
    content:"";
    position:absolute;
    bottom:0;
    top:0;
    left:0;
    right:0;
    height:auto;
    width:auto;
    z-index:-1;
    background:-webkit-gradient(linear, left top, right top, from(#0ebeff), color-stop(#ffdd40), color-stop(#ae63e4), color-stop(#47cf73), color-stop(#0ebeff), color-stop(#ffdd40), color-stop(#ae63e4), to(#47cf73));
    background:-webkit-linear-gradient(left, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
    background:-o-linear-gradient(left, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
    background:linear-gradient(90deg, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
    -webkit-transition:background-color .3s linear;
    -o-transition:background-color .3s linear;
    transition:background-color .3s linear;
    background-size:200%;
    z-index:-2;
    -webkit-animation:rainbow-border 3s linear infinite;
    animation:rainbow-border 3s linear infinite
}
.item-box-btn--wait:after{
    content:"";
    background-color:#333333;
    position:absolute;
    bottom:0;
    top:0;
    left:0;
    right:0;
    z-index:-1;
    margin:3px
}
@-webkit-keyframes rainbow-border{
    0%{
        background-position:0% 50%
    }
    50%{
        background-position:100% 50%
    }
    100%{
        background-position:200% 50%
    }
}
@keyframes rainbow-border{
    0%{
        background-position:0% 50%
    }
    50%{
        background-position:100% 50%
    }
    100%{
        background-position:200% 50%
    }
}
.item--hot{
    position:relative
}
.item--hot:before{
    content:"";
    position:absolute;
    top:0;
    right:5px;
    width:50px;
    height:64px;
    background-image:url("../images/top.png");
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
    z-index:2
}
.btn--ready{
    background-color:#ff6700
}
.btn--sold-out{
    background-color:#383838
}
.item-box-wrap .hot-item-boxs .item-box .item--hot{
    border:none !important;
    padding:2px
}
.item-box-wrap .hot-item-boxs .item-box .item--hot:hover:after{
    -webkit-animation:rainbow-border 3s linear infinite;
    animation:rainbow-border 3s linear infinite
}
.item-box-wrap .hot-item-boxs .item-box .item--hot:after{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:-webkit-linear-gradient(45deg, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
    background:-o-linear-gradient(45deg, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
    background:linear-gradient(45deg, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
    background-size:200%;
    -webkit-transition:background-color .3s linear;
    -o-transition:background-color .3s linear;
    transition:background-color .3s linear
}
.itme-img__title{
    opacity:0;
    display:none
}
@media screen and (max-width: 1000px){
    .item--num5{
        width:100%
    }
    .items__item-info{
        height:56px
    }
    .items__item-footer__price-origin{
        font-size:14px
    }
    .items__item-footer__price-discount{
        font-size:22px
    }
}
@media screen and (max-width: 768px){
    .stop-items .item-price__footer{
        -webkit-box-pack:center;
        -webkit-justify-content:center;
        -ms-flex-pack:center;
        justify-content:center;
        -webkit-box-align:center;
        -webkit-align-items:center;
        -ms-flex-align:center;
        align-items:center
    }
    .loading-img{
        max-height:235px
    }
    .stop-items .item-box__button{
        width:100%
    }
    .item--num5{
        width:33.33333%
    }
    .item-box-type__title-img-box{
        width:68vw
    }
    .item-wrap.items-list{
        margin-top:3.25vw
    }
    .item-box-wrap{
        margin-bottom:10vw
    }
    .items__item{
        margin-top:8vw
    }
    .items__item-footer__btn{
        padding:14px 0
    }
    .item-box-type__title-img-box{
        top:0
    }
}
@media screen and (max-width: 576px){
    .loading-img{
        max-height:270px
    }
    .stop-items .item-price__footer{
        padding:.5rem
    }
    .sold-out,.ready__btn--style{
        font-size:12px
    }
    .item--num5{
        width:50%
    }
}
@media screen and (max-width: 424px){
    .stop-items .item-price__footer{
        padding:3px
    }
    .loading-img{
        max-height:200px
    }
    .item--hot:before{
        width:42px;
        height:54px
    }
    .item-box-btn--wait:after{
        margin:2px
    }
    .item-box-type__title-img-box{
        width:85vw
    }
    .items__item{
        margin-top:13vw
    }
    .items__item-top-limit{
        font-size:12px
    }
    .items__item-top-outlet{
        font-size:12px
    }
    .items__item-info{
        font-size:12px
    }
    .items__item-footer__btn{
        font-size:16px;
        padding:12px 0
    }
}
.left-bar{
    position:fixed;
    top:300px;
    right:0%;
    text-align:center;
    z-index:2
}
.left-bar a{
    display:block;
    text-decoration:none
}
.left-bar img{
    display:block
}
.left-bar .menu-title{
    margin-bottom:.25rem
}
.left-bar .menu-body{
    background-image:url("../images/left-bar-bg.png");
    background-repeat:repeat-y;
    background-position:center
}
.left-bar .menu-name{
    margin:0 auto;
    text-align:center;
    color:#fff;
    font-weight:bold;
    position:relative
}
.left-bar .menu-name img{
    margin:0 auto
}
.left-bar .menu-list{
    background-repeat:repeat-y;
    background-position:center top;
    margin:0 auto;
    width:100px
}
.left-bar .menu-list a{
    padding:14px 0;
    margin:0 auto;
    font-size:15px;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,0.43)
}
.left-bar .menu-list a:hover{
    color:#fff900
}
.left-bar .menu-list a:last-child{
    border-bottom:none
}
.left-bar .menu-list a span{
    display:block;
    width:100%;
    margin-bottom:6px
}
.left-bar .menu-list a span:last-child{
    margin-bottom:0
}
.left-bar .top{
    cursor:pointer
}
@media screen and (max-width: 1000px){
    .left-bar{
        display:none
    }
}
.finish_content{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    /*height:300px;*/
    position:relative;
    z-index:6
}
.finish_content .finish{
    text-align:center
}
.finish_content .finish h1{
    width: 80%;
    display: inline-block;
    margin: 0 auto;
    margin-top: 1em;
    font-size:1.8em;
    line-height: 1em;
    color:#000;
    /*font-weight:bold;*/
    padding:2rem 6rem;
    border:solid 8px #000;
    border-radius:2em;
    background-color:#fff;
    position:relative;
    -webkit-box-shadow:1px 1px 0px #fff200,2px 2px 0px #fff200;
    box-shadow:1px 1px 0px #fff200,2px 2px 0px #fff200
}
.finish_content .finish a{
    display:inline-block;
    text-decoration:none;
    margin-top:1rem;
    padding:1rem 3rem;
    background:#000;
    color:#fff200;
    border-radius:6px;
    /*border:1px solid #fff;*/
    -webkit-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s
}
.finish_content .finish a:hover{
    background-color:#fff200;
    color:#000
}
@media screen and (max-width: 1000px){
    .finish_content .finish{
        padding:0 1rem
    }
    .finish_content .finish h1{
        font-size:2rem
    }
}
@media screen and (max-width: 768px){
    .finish_content .finish h1{
        font-size:1.5rem;
        padding:2rem 2rem
    }
}
#navbar-menu-mask{
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:999;
    background:rgba(0,0,0,0.5);
    opacity:0;
    visibility:hidden;
    -webkit-transition:all .3s;
    -o-transition:all .3s;
    transition:all .3s
}
#navbar-menu-mask.active{
    visibility:visible;
    opacity:1
}
#navbar-menu-wrap{
    width:60%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:999;
    -webkit-transform:translate3d(-150%, 0, 0);
    transform:translate3d(-150%, 0, 0);
    -webkit-transition:all .3s;
    -o-transition:all .3s;
    transition:all .3s
}
#navbar-menu-wrap.active{
    -webkit-transform:translate3d(0%, 0, 0);
    transform:translate3d(0%, 0, 0)
}
.mobile-nav-ul{
    width:100%;
    height:100%;
    background-color:#fff;
    display:block;
    position:relative
}
.mobile-nav-ul li{
    border-bottom:1px solid #e0e0e0
}
.mobile-nav-ul li a{
    display:block;
    width:100%;
    color:#000;
    padding:.75rem;
    text-decoration:none
}
.mobile-nav-ul .mobile-nav-logo{
    background-color:#C90915;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center
}
.mobile-nav-ul .mobile-nav-logo a{
    width:160px
}
.mobile-nav-ul .mobile-nav-logo a img{
    width:100%;
    display:block
}
.mobile-nav-ul .mobile-nav-close{
    width:32px;
    height:32px;
    background-image:url("../images/close.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:100%;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    margin-left:auto;
    margin-right:.5rem;
    cursor:pointer
}
#pc-nav ~ main{
    padding-top:0rem
}
main{
    width:100%;
    position:relative;
    margin-bottom:1rem;
    display:block;
    z-index:2;
    
}
main:before{
    content:"";
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    /*background-image:url("../images/bg-light.png");*/
    /*background-position:center bottom;
    background-repeat:repeat-x;
    background-attachment:fixed;
    -webkit-animation:moveBg 20s linear infinite;
    animation:moveBg 20s linear infinite*/
}
main.items-list-main{
    margin-top:1rem
}
main .container{
    max-width:1100px;
    width:100%;
    margin:0 auto;
    position:relative;
    z-index:1
}
main .container .sub-slogan{
    position:relative;
    margin:0 auto 3rem;
    cursor:pointer
}
main .container .sub-slogan img{
    display:block;
    margin:0 auto
}
@-webkit-keyframes moveBg{
    0%{
        -webkit-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0)
    }
    25%{
        -webkit-transform:translate3d(5%, 0, 0);
        transform:translate3d(5%, 0, 0)
    }
    50%{
        -webkit-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0)
    }
    75%{
        -webkit-transform:translate3d(-5%, 0, 0);
        transform:translate3d(-5%, 0, 0)
    }
    100%{
        -webkit-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0)
    }
}
@keyframes moveBg{
    0%{
        -webkit-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0)
    }
    25%{
        -webkit-transform:translate3d(5%, 0, 0);
        transform:translate3d(5%, 0, 0)
    }
    50%{
        -webkit-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0)
    }
    75%{
        -webkit-transform:translate3d(-5%, 0, 0);
        transform:translate3d(-5%, 0, 0)
    }
    100%{
        -webkit-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0)
    }
}
.item-wrap{
    max-width:1100px;
    width:100%;
    padding:1rem;
    margin:0 auto;
    position:relative
}
.items-list{
    background-color:transparent;
    padding:6px
}
.notice-list-wrap{
    max-width:1100px;
    width:100%;
    margin:.5rem auto;
    color:#585858;
    background-color:#fff;
    position:relative;
    z-index:3
}
.notice-list-wrap .notice-list{
    border:8px solid #000;
    padding:1rem
}
.notice-list-wrap p{
    font-size:1.25rem;
    margin-bottom:1rem
}
.notice-list-wrap ul{
    padding-left:1.75rem
}
.notice-list-wrap ul li{
    margin-bottom:1rem;
    list-style:decimal-leading-zero
}
.orderphone{
    text-align:center;
    margin-bottom:1rem;
    font-weight:bold;
    font-size:1.25rem;
    color:#8e8e8e
}
.pc-spark{
    position:fixed;
    width:100px;
    height:100px;
    z-index:-1
}
.pc-spark__1{
    background-image:url("../images/spark2.png");
    width:130px;
    height:130px;
    bottom:15%;
    left:7%
}
.pc-spark__1.active{
    -webkit-animation:spark2 2.5s steps(10) infinite;
    animation:spark2 2.5s steps(10) infinite;
    -webkit-animation-delay:.65s;
    animation-delay:.65s
}
.pc-spark__2{
    background-image:url("../images/spark.png");
    bottom:2%;
    right:10%
}
.pc-spark__2.active{
    -webkit-animation:spark 2.5s steps(10) infinite;
    animation:spark 2.5s steps(10) infinite;
    -webkit-animation-delay:1.25s;
    animation-delay:1.25s
}
@keyframes spark{
    0%{
        background-position-x:0
    }
    50%{
        background-position-x:-1000px
    }
    100%{
        background-position-x:-1000px
    }
}
@keyframes spark2{
    0%{
        background-position-x:0
    }
    50%{
        background-position-x:-1300px
    }
    100%{
        background-position-x:-1300px
    }
}
@media screen and (max-width: 1000px){
    main .container .sub-slogan{
        margin:0 auto 1rem
    }
    main .container .item-wrap.order_propage .item-box{
        width:100%
    }
    main .container .item-wrap.order_propage .item-box .items .item-right .item-btn-box .btn{
        width:45%;
        padding:.95rem 0rem
    }
    #shop-item-list footer{
        margin-bottom:59px
    }
    .pc-spark{
        display:none
    }
}
@media screen and (max-width: 768px){
    main{
        background-attachment:scroll;
        background-repeat:repeat-y
    }
    main .container .item-wrap:before{
        width:460px;
        height:58px;
        background-repeat:no-repeat;
        background-position:center center;
        background-size:100%
    }
    main .container .item-wrap.order_propage .item-box .items{
        padding:0rem
    }
    main .container .item-wrap.order_propage .item-box .items .item-left .item-gifts{
        margin:1rem auto 0 auto
    }
    main .container .item-wrap.order_propage .item-box .items .item-right{
        padding:1rem
    }
    main .container .item-wrap.order_propage .item-box .items .item-title{
        font-size:1.5rem;
        padding:.75rem
    }
    main .container .item-wrap.order_phone .item-box .items .item-title{
        font-size:1.5rem;
        padding:.5rem 1.5rem 1.5rem 1.5rem
    }
    main .container .item-wrap.order_propage .item-box .items .item-left{
        width:100%
    }
    main .container .item-wrap.order_propage .item-box .items .item-right{
        width:100%
    }
    .notice-list-wrap .notice-list{
        padding:.5rem
    }
    #pc-nav ~ main{
        margin-top:0
    }
    .notice-list-wrap{
        padding:0
    }
}
@media screen and (max-width: 576px){
    main{
        padding-top:.5rem
    }
    main.items-list-main{
        margin-top:6vw
    }
    main .container .item-wrap{
        padding:0rem
    }
    main .container .item-wrap.order_propage .item-box .items .item-title{
        font-size:1rem
    }
    main .container .item-wrap.order_propage .item-box .items .item-left{
        padding:0
    }
    main .container .item-wrap.order_propage .item-box .items .item-left .item-gifts{
        font-size:1rem
    }
    main .container .item-wrap.order_phone .item-box .items{
        padding:1rem
    }
    main .container .item-wrap.order_phone .item-box .items .item-title{
        padding:0rem 0 1rem 0
    }
    main .container .item-wrap.order_phone .item-box .items .item-title span{
        display:block
    }
    main .container .item-wrap.order_phone .item-box .items .item-title span:first-child{
        margin-bottom:.5rem
    }
    main .container .item-wrap.order_phone .item-box .items .item-form{
        width:100%
    }
    main .container .item-wrap.order_phone .item-box .items .item-form .item-input-group input[name="code"]{
        width:50%
    }
    main .container .item-wrap.order_phone .item-box .items .item-form .item-input-group img{
        margin-left:.5rem
    }
    main .container .item-wrap.order_phone .item-box .items .item-form .item-input-group label span{
        display:block
    }
    main .container .item-wrap.order_propage .item-box .items .item-limit-count{
        width:100px;
        height:100px;
        font-size:1.25rem;
        top:60px;
        right:10px
    }
    main .items-title-wrap .items-title{
        padding:1rem 0
    }
    .notice-list-wrap p{
        font-size:12px;
        margin-bottom:.5rem
    }
    .notice-list-wrap ul{
        padding-left:1rem
    }
    .notice-list-wrap ul li{
        font-size:12px
    }
    .notice-list-wrap ul li{
        margin-bottom:.5rem
    }
    main .container .item-wrap.order_propage .item-box{
        padding:.5rem
    }
    .order_phone .item-box{
        padding:.5rem
    }
    .order_phone .item-box .items .item-form .item-input-group select{
        padding:.8rem 0rem
    }
    .item-box__limit{
        font-size:12px
    }
    footer{
        font-size:12px
    }
    .nav-list__li-bottom__text{
        font-size:10px
    }
    #shop-item-list footer{
        margin-bottom:52px
    }
}