*{
    padding:0;
    margin:0;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
picture,article,header,footer,main,aside,section{
    display:block
}
img { width: 100%; }
body{
    font-family:Arial,'微軟正黑體';
    background-color: #000;
    overflow-x: hidden;
}
.banner-m {
    display: none;
}
/*.row { margin: 20px 0; }*/
.bank_green { padding: 20px; }
.bank .bgc-b {
    /*margin: 20px 0;*/
    padding: 20px;
    /*background-color: #4191ba;*/
    /*border: 3px solid #6dbea7;*/
    /*border-radius: 30px;*/
}
.margin-top-20 {
    margin-top: 20px;
}
.charge .col-sm-3,
.charge .col-sm-4 {

    padding-right: 2px;
    padding-left: 2px;
}
.charge .col-12 {
    margin: 2px 0;
}
.charge img {
    border-radius: 3px;
}

.btn{
    outline:none;
    border:none;
    display:block;
    cursor:pointer;
    text-decoration:none;
    text-align:center
}
.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
}
.btn{
    cursor:pointer
}
footer{
    width:100%;
    background:#000;
    color:#fff;
    padding:1rem;
    text-align:center
}


header{
    width:100%;
    /*height:680px;*/
    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
}
.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:1%;
    left:0%;
    width:208px;
    height:78px;
    z-index:3
}
.logo a{
    display:block;
    width:100%;
    height:100%
}
.seo{
    position:absolute;
    top:0;
    left:0;
    -webkit-transform:translate(-100%);
    -ms-transform:translate(-100%);
    transform:translate(-100%);
    text-indent:-900000px
}
.slogan__slogan{
    width: 30%;
    position:absolute;
    top:0;
    left:23%;
    z-index:2;
    opacity:1
}
.slogan__slogan2{
    position:absolute;
    top:320px;
    right:82px;
    z-index:2
}
.slogan__stores{
    position:absolute;
    bottom:0;
    right:0%;
    z-index:2
}
.slogan__store-name{
    position:absolute;
    top:205px;
    left:127px;
    -webkit-transform-origin:right center;
    -ms-transform-origin:right center;
    transform-origin:right center;
    -webkit-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    transform:rotate(0deg);
    -webkit-animation:rotateName 3s linear alternate infinite both;
    animation:rotateName 3s linear alternate infinite both
}
@-webkit-keyframes rotateName{
    0%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg)
    }
    33%{
        -webkit-transform:rotate(10deg);
        transform:rotate(10deg)
    }
    66%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg)
    }
    100%{
        -webkit-transform:rotate(-10deg);
        transform:rotate(-10deg)
    }
}
@keyframes rotateName{
    0%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg)
    }
    33%{
        -webkit-transform:rotate(10deg);
        transform:rotate(10deg)
    }
    66%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg)
    }
    100%{
        -webkit-transform:rotate(-10deg);
        transform:rotate(-10deg)
    }
}
.slogan__date{
    position:absolute;
    top:45px;
    right:80px;
    z-index:2;
    -webkit-animation:moveDate 4s linear infinite;
    animation:moveDate 4s linear infinite
}
@-webkit-keyframes moveDate{
    0%{
        -webkit-transform:scale(1.01) rotate(-360deg) translate3D(6px, 6px, 0) rotate(360deg);
        transform:scale(1.01) rotate(-360deg) translate3D(6px, 6px, 0) rotate(360deg)
    }
    100%{
        -webkit-transform:scale(1.01) rotate(0deg) translate3D(6px, 6px, 0) rotate(0deg);
        transform:scale(1.01) rotate(0deg) translate3D(6px, 6px, 0) rotate(0deg)
    }
}
@keyframes moveDate{
    0%{
        -webkit-transform:scale(1.01) rotate(-360deg) translate3D(6px, 6px, 0) rotate(360deg);
        transform:scale(1.01) rotate(-360deg) translate3D(6px, 6px, 0) rotate(360deg)
    }
    100%{
        -webkit-transform:scale(1.01) rotate(0deg) translate3D(6px, 6px, 0) rotate(0deg);
        transform:scale(1.01) rotate(0deg) translate3D(6px, 6px, 0) rotate(0deg)
    }
}
.header-wrap.mobile picture{
    display:none
}
.header-wrap.mobile img{
    /*display:block;*/
    /*width:100%*/
}
#menu{
    display:none;
    width:100%;
    background-color:#906e9c
}
#menu #navbar-toggle{
    width:60px;
    height:40px;
    background-color:transparent;
    background-image:url("https://img.dcity.com.tw/event/allnewweb/2020/05/DC_opening_0516/images/btn.png");
    border:none;
    margin-left:auto;
    cursor:pointer;
    margin-top:.75rem;
    margin-bottom:.75rem
}
#menu #navbar-menu-wrap{
    width:100%
}
#menu #navbar-menu-wrap ul{
    font-size:0;
    width:100%;
    white-space:nowrap;
    overflow-x:auto
}
#menu #navbar-menu-wrap ul li{
    width:25%;
    text-align:center;
    display:inline-block;
    font-size: 1rem;
}
#menu #navbar-menu-wrap ul li a{
    
    text-decoration:none;
    color:#fff;
    padding:1rem 0;
    display:block;
    font-size:1rem;
    background-color:#00678e;
    position:relative;
   
}
#menu #navbar-menu-wrap ul li a:before{
    content:"";
    width:1px;
    height:80%;
    position:absolute;
    right:0;
    top:50%;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
    background-color:#6fd7ff
}
#menu #navbar-menu-wrap ul li a:hover { text-decoration: none; }
#menu #navbar-menu-wrap ul li:last-child a:before{
    background-color:transparent
}

.map_box {
    height: 0;
    position: relative;
    padding-bottom: 50%;
    padding-top: 30px;
    margin: 20px 0;
    overflow: hidden;
}
.map_box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


@media screen and (max-width: 1000px){
    .header-wrap.mobile{
        position:relative;
        z-index:2
    }
    .header-wrap.mobile picture{
        display:block;
        width:100%
    }
    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
    }
    .bg-header-s{
        display:none
    }
    .bg-header-xs{
        display:none
    }
    .logo{
        top:11vw;
        left:34vw;
        width:28vw;
        height:6vw;
        -webkit-transform:translate(0, 0);
        -ms-transform:translate(0, 0);
        transform:translate(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;
        bottom:0;
        left:0;
        z-index:999;
        -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.5);
        box-shadow:0 1px 2px rgba(0,0,0,0.5)
    }
}
@media screen and (max-width: 576px){
    .banner-pc {
        display: none;
    }
    .banner-m {
        display: block;
    }
    .bg-header-m{
        display:none
    }
    .bg-header-s{
        width:100%;
        display:block
    }
    .logo{
        width:32vw;
        top:8vw
    }
    #menu #navbar-toggle{
        margin-top:.25rem;
        margin-bottom:.25rem
    }
}
@media screen and (max-width: 424px){
    .bg-header-s{
        display:none
    }
    .bg-header-xs{
        width:100%;
        display:block
    }
    #menu #navbar-menu-wrap ul {
        margin-bottom: 0;
    }
    #menu #navbar-menu-wrap ul li{
        width:25%
    }
    #menu #navbar-menu-wrap ul li a{
        font-size:14px
    }
}
#pc-nav{
    display:block;
    width:100%;
    height:85px;
    position:relative;
    background-color: #28456b;
    /*background-image:url("../https://img.dcity.com.tw/event/allnewweb/2020/05/DC_opening_0516/images/nav-bg.jpg");
    background-position:center center;*/
    z-index:2;
    margin-bottom:30px
}
#pc-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;
    position:relative;
    z-index:2;
    width:100%;
    max-width:1200px;
    margin:0 auto
}
#pc-nav .nav-list__li{
    cursor:pointer;
    margin-right:0.5rem;
    width:16.66667%;
    height:85px;
    font-size:32px;
    font-weight:bold;
    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;
    margin-left:16px
}
#pc-nav .nav-list__li.active{
    background-color:#38aee4;
}
#pc-nav .nav-list__li:hover{
    background-color:#38aee4;
}
#pc-nav .nav-list__li a{
    
    width:100%;
    height: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:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    position:relative;
    font-size: 1.25rem;
    color: #fff;
    z-index:10;
}
#pc-nav .nav-list__li a:hover { text-decoration: none; }
#mobile-nav{
    display:none;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    z-index:22
}
#mobile-nav .nav-list__ul{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-shadow:0px -1px 2px rgba(0,0,0,0.5);
    box-shadow:0px -1px 2px rgba(0,0,0,0.5)
}
#mobile-nav .nav-list__li{
    width:1000px / 5;
    cursor:pointer;
    text-align:center;
    padding:1rem .5rem;
    background:#E72162;
    color:#fff;
    border-right:1px solid #ff98ba;
    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;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
}
#mobile-nav .nav-list__li.active{
    color:yellow
}
#mobile-nav .nav-list__li:last-child{
    border-right:none
}
@media screen and (max-width: 1000px){
    #pc-nav{
        display:none
    }
    #slide-nav{
        display:none
    }
    #mobile-nav{
        display:block
    }
}
@media screen and (max-width: 424px){
    #pc-nav{
        display:none
    }
    #mobile-nav{
        display:block
    }
    #mobile-nav .nav-list__li span{
        width:100%
    }
}
.activity img.focus_game-xl{
    display:block
}
.activity img.focus_game-md,.activity img.focus_game-xs{
    display:none
}
.focus-game-h2-title{
    margin:2rem;
    border:solid 4px transparent;
    background-origin:border-box;
    background-clip:padding-box,border-box;
    border-radius:100px;
    padding:.75rem;
    -webkit-box-shadow:1px 1px 0px #2892a0, 2px 2px 0px #2892a0, 3px 3px 0px #2892a0, 4px 4px 0px #2892a0;
    box-shadow:1px 1px 0px #2892a0, 2px 2px 0px #2892a0, 3px 3px 0px #2892a0, 4px 4px 0px #2892a0;
    background-image:-webkit-gradient(linear, right top, left top, from(#66c4d0), color-stop(50%, #8ae4f0), to(#42a8b5)),-webkit-gradient(linear, left bottom, left top, from(#66c4d0), color-stop(50%, #8ae4f0), to(#42a8b5));
    background-image:-webkit-linear-gradient(right, #66c4d0 0%, #8ae4f0 50%, #42a8b5 100%),-webkit-linear-gradient(bottom, #66c4d0 0%, #8ae4f0 50%, #42a8b5 100%);
    background-image:-o-linear-gradient(right, #66c4d0 0%, #8ae4f0 50%, #42a8b5 100%),-o-linear-gradient(bottom, #66c4d0 0%, #8ae4f0 50%, #42a8b5 100%);
    background-image:linear-gradient(to left, #66c4d0 0%, #8ae4f0 50%, #42a8b5 100%),linear-gradient(to top, #66c4d0 0%, #8ae4f0 50%, #42a8b5 100%);
    padding:1rem;
    text-align:center;
    font-weight:bold
}
.focus-game-h2-title__wrap{
    -webkit-transform:skewX(-10deg);
    -ms-transform:skewX(-10deg);
    transform:skewX(-10deg)
}
.focus-game-h2-title__text{
    font-size:2.5rem;
    color:#fff;
    text-shadow:0px 1px 0px #000,0px 2px 0px #000
}
.focus-game-h2-title__sub-text{
    font-size:1.5rem;
    color:#2892a0
}
.item-box-wrap{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    width:100%;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
}
.item-box{
    width:20%;
    padding:.25rem;
    position:relative
}
.item{
    background-color:#fff;
    text-align:center;
    display:block;
    text-decoration:none;
    position:relative;
    border:2px solid #F08D7B
}
.item-box-img img{
    width:100%;
    display:block
}
.item-box-title{
    background-color:#efefef;
    color:#000;
    height:46px;
    font-size:14px;
    font-weight:bold;
    padding:.5rem;
    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
}
.item-box-info{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    padding:.5rem
}
.item-box-info__num{
    font-weight:bold
}
.item-box-info__price{
    margin-left:auto;
    font-weight:bold;
    color:#ff0707
}
@media screen and (max-width: 1000px){
    .focus-game-h2-title{
        margin:1rem;
        padding:1rem
    }
    .item-box{
        width:25%
    }
}
@media screen and (max-width: 768px){
    .activity img.focus_game-xl{
        display:none
    }
    .activity img.focus_game-md{
        display:block
    }
    .focus-game-h2-title{
        margin:1rem;
        padding:.75rem
    }
    .item-box{
        width:33.33333%
    }
}
@media screen and (max-width: 576px){
    .activity img.focus_game-md{
        display:none
    }
    .activity img.focus_game-xs{
        display:block
    }
    .focus-game-h2-title{
        padding:.5rem;
        margin:.5rem
    }
    .item-box{
        width:50%
    }
    .focus-game-h2-title__text{
        font-size:1.75rem
    }
    .focus-game-h2-title__sub-text{
        font-size:1rem
    }
    .item-box-info__num{
        font-size:.9rem
    }
    .item-box-info__price{
        font-size:.9rem
    }
}
#app{
    width:100%;
    overflow:hidden;
    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
}
main{
    width:100%;
    height:100%;
    background-image: url(https://img.dcity.com.tw/event/allnewweb/2020/05/DC_opening_0516/images/all_bg.jpg);
    background-position:top center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    /*background-color: #29100c;*/
    
}
main.bank {
    background-color: #29100c;
    /*background-image: none;*/
    background-image: url(https://img.dcity.com.tw/event/allnewweb/2020/05/DC_opening_0516/images/bank_bg.jpg);
    background-position:top center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}
main.bank .activity {
    background-color: transparent;
}

main.bank #pc-nav {
    margin-bottom: 0;
}

.activity {
    max-width:1200px;
    width:100%;
    margin:0 auto;
    padding: 20px;
    position:relative;
    background-color: #fff;
    
}
.gold-box {
    background-image: url(https://img.dcity.com.tw/event/allnewweb/2020/05/DC_opening_0516/images/box-bg.jpg);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}
main.bank .activity {
    /*border: 1px solid gold;*/
}

.item-img{
    display:block !important;
    width:100%
}
.item-img:last-child{
    margin-bottom:1rem
}
.item-img__mobile{
    display:none !important
}
.pagination-nav-wrap{
    max-width:1200px;
    width:100%;
    margin:0 auto
}
.pagination-nav-wrap ul{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    margin-bottom:1rem
}
.pagination-nav-wrap ul li{
    -webkit-box-flex:1;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    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;
    width:100%
}
.pagination-nav-wrap ul li .select{
    background-color:#763696
}
.pagination-nav-wrap ul li:last-child a{
    border:none
}
.pagination-nav-wrap ul li a{
    color:#fff;
    text-decoration:none;
    padding:.5rem;
    background-color:#000;
    width:100%;
    text-align:center;
    border-right:1px solid #fff
}
.pagination-nav-wrap .dm-pic{
    width:100%
}
.pagination-nav-wrap .dm-pic img{
    display:block;
    width:100%
}
.photo{
    max-width:1200px;
    width:100%;
    margin:1rem auto 0
}
.photo .swiper-wrapper .swiper-slide a{
    display:block
}
.photo .swiper-wrapper .swiper-slide a img{
    width:100%
}
footer{
    padding:1rem;
    text-align:center;
    color:#fff;
    background-color:#000
}
#select-page{
    display:none
}
.foucs-game{
    display:block;
    width:100%;
    margin-bottom:1rem
}
.foucs-game:hover{
    -webkit-transform:translateY(-6px);
    -ms-transform:translateY(-6px);
    transform:translateY(-6px)
}
.foucs-game img{
    width:100%;
    display:block
}
a.intel-game{
    position:absolute;
    width:643px;
    height:638px;
    top:41.5%;
    left:45%
}
nav ul li a.active{
    background-color:#e01775
}
nav .mobile-select{
    display:none;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-justify-content:space-around;
    -ms-flex-pack:distribute;
    justify-content:space-around;
    margin:.5rem auto
}
nav .mobile-select select{
    width:60%;
    height:45px;
    font-size:1rem;
    border-radius:30px;
    padding:0 1rem
}
nav .mobile-select a{
    text-decoration:none;
    padding:.8rem;
    display:block;
    background-color:#e8e8e8;
    color:#000;
    border-radius:6px
}
.bgcfff {
    /*background-color: #fff;*/
}
@media screen and (max-width: 1200px){
    a.intel-game{
        position:absolute;
        width:50vw;
        height:48vw;
        top:165vw;
        left:43vw
    }
}
@media screen and (max-width: 1000px){
    main{
        padding:1rem
    }
    a.intel-game{
        position:absolute;
        width:51vw;
        height:51vw;
        top:169vw;
        left:44vw
    }
    footer{
        margin-bottom:48px
    }
}
@media screen and (max-width: 900px){
    .pagination-nav-wrap ul{
        -webkit-flex-wrap:wrap;
        -ms-flex-wrap:wrap;
        flex-wrap:wrap
    }
    .pagination-nav-wrap ul li{
        -webkit-flex-basis:12.5%;
        -ms-flex-preferred-size:12.5%;
        flex-basis:12.5%
    }
    .pagination-nav-wrap ul li:last-child a{
        border:1px solid #fff
    }
    .pagination-nav-wrap ul li a{
        border:1px solid #fff
    }
}
@media screen and (max-width: 768px){
    main{
        -webkit-box-ordinal-group:4;
        -webkit-order:3;
        -ms-flex-order:3;
        order:3;
        padding:2.25rem 1rem 1rem 1rem
    }
    footer{
        -webkit-box-ordinal-group:5;
        -webkit-order:4;
        -ms-flex-order:4;
        order:4
    }
    a.intel-game{
        position:absolute;
        width:51vw;
        height:49vw;
        top:249vw;
        left:44vw
    }
    nav .mobile-select{
        display:-webkit-box;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex
    }
    .item-img__mobile{
        display:block !important;
        width:100%
    }
    .item-img__pc{
        display:none !important
    }
}
@media screen and (max-width: 576px){
    main{
        padding:.5rem
    }
    .pagination-nav-wrap ul{
        display:none
    }
    #select-page{
        display:block;
        width:100%;
        padding:.5rem;
        margin-bottom:1rem
    }
    footer{
        font-size:.9rem;
        margin-bottom:46px;
        padding:.5rem
    }
    a.intel-game{
        position:absolute;
        width:51vw;
        height:49vw;
        top:287vw;
        left:44vw
    }
}
@media screen and (max-width: 424px){
    nav .mobile-select select{
        width:50%
    }
    nav .mobile-select a{
        font-size:.9rem
    }
    footer{
        font-size:12px
    }
}