* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

body {
    font-family: montserrat,sans-serif;
    background: #000;
    color: #fff
}

a {
    text-decoration: none;
    color: #fff
}

.video {
    width: 100%;
    height: 900px;
    overflow: hidden;
    position: absolute;
    top: 90px
}

.video video {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -960px
}

.container {
    position: relative;
    width: 1200px;
    margin: 0 auto
}

.page1 {
    height: 937px;
    position: relative
}

.page1 .parallax {
    z-index: 10
}

.page1 .layer {
    z-index: 10
}

.page1 .l1 {
    position: absolute;
    top: 250px;
    left: 50px
}

.page1 .l2 {
    position: absolute;
    top: 500px;
    left: -100px
}

.page1 .l3 {
    position: absolute;
    top: 800px;
    left: 90px;
    z-index: 10
}

.page1 .l4 {
    position: absolute;
    top: 530px;
    left: 800px
}

.page1 .l5 {
    position: absolute;
    top: 366px;
    left: 1110px
}

.page1 .l6 {
    position: absolute;
    top: 820px;
    left: 1060px;
    z-index: 10
}

.page1 .link {
    position: absolute;
    top: 108px;
    left: 803px;
    background: rgba(0,0,0,.5);
    padding: 10px
}

.page1 .link a {
    color: #fbd2b7;
    font-size: 15px;
    height: 30px;
    padding: 9px
}

.page1 .link a:hover {
    color: #fff
}

.page1 .social-btn {
    position: absolute;
    top: 117px;
    left: 487px;
    width: 210px
}

.page1 .social-btn a {
    width: 41px;
    height: 30px;
    border-radius: 3px;
    background: rgba(0,0,0,.5);
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    padding: 11px 18px
}

.page1 .social-btn a:hover {
    border-color: rgba(255,255,255,.5)
}

.page1 .social-btn a i {
    display: inline-block
}

.page1 .social-btn a .icon-facebook {
    width: 8px;
    height: 16px;
    background: url(../images/ic-f.png) no-repeat
}

.page1 .social-btn a .icon-group {
    width: 20px;
    height: 15px;
    background: url(../images/ic-g.png) no-repeat
}

.page1 .time-intro {
    position: absolute;
    top: 413px;
    left: 856px;
    width: 470px
}

.page1 .time-intro .text {
    color: #fff2e5;
    font-size: 26px;
    text-align: center;
    display: none;
    font-weight: 600
}

.page1 .scroll {
    width: 84px;
    height: 96px;
    background: url(../images/scroll-bg.png) no-repeat;
    position: absolute;
    top: 876px;
    left: 50%;
    margin-left: -42px;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center
}

.page1 .scroll:before {
    content: ' ';
    width: 64px;
    height: 45px;
    background: url(../images/scroll-icon.png) no-repeat;
    display: inline-block;
    -webkit-animation: scroll 2s infinite ease;
    animation: scroll 2s infinite ease;
    left: 3px;
    position: absolute;
    top: 24px;
    left: 12px
}

.page2 {
    background: url(../images/bg-2.jpg) no-repeat center top;
    position: relative;
    padding-bottom: 100px;
    padding-top: 50px
}

.page2 ul {
    list-style: none;
    margin: 10px 0;
    padding: 0
}

.page2 ul li {
    background: url(../images/ic-li2.png) no-repeat 0 2px;
    padding-bottom: 5px;
    padding-left: 20px;
    color: #f7b51d
}

.page2 a {
    text-decoration: none;
    color: #ff5400;
    font-weight: 500
}

.page2 a:hover {
    color: #fff
}

.page2 .space {
    height: 100px;
    background: url(../images/space.png) no-repeat center
}

.page2 .h2-title {
    color: #ff4900;
    margin-bottom: 20px
}

.page2 .button-giftcode {
    margin: 0 auto;
    display: block;
    width: 427px;
    height: 176px;
    background: url(../images/receive.png) no-repeat;
    cursor: pointer
}

.page2 .table table {
    margin: 0 auto;
    border-collapse: collapse;
    border: 1px solid #fc0
}

.page2 .table table td {
    border-collapse: collapse;
    border: 1px solid #fc0;
    padding: 10px 20px;
    color: #fc0
}

.page2 .table table tr {
    background: rgba(255,204,0,.3)
}

.page2 .notice {
    background: #25110e;
    border-left: 10px solid #b35a0b;
    padding: 20px 40px
}

@-webkit-keyframes color-change {
    0% {
        color: red
    }

    10% {
        color: #8e44ad
    }

    20% {
        color: #1abc9c
    }

    30% {
        color: #d35400
    }

    40% {
        color: #ccc
    }

    50% {
        color: #34495e
    }

    60% {
        color: #fff
    }

    70% {
        color: #2980b9
    }

    80% {
        color: #f1c40f
    }

    90% {
        color: #2980b9
    }

    100% {
        color: pink
    }
}

@-moz-keyframes color-change {
    0% {
        color: red
    }

    10% {
        color: #8e44ad
    }

    20% {
        color: #1abc9c
    }

    30% {
        color: #d35400
    }

    40% {
        color: #ccc
    }

    50% {
        color: #34495e
    }

    60% {
        color: #fff
    }

    70% {
        color: #2980b9
    }

    80% {
        color: #f1c40f
    }

    90% {
        color: #2980b9
    }

    100% {
        color: pink
    }
}

@-ms-keyframes color-change {
    0% {
        color: red
    }

    10% {
        color: #8e44ad
    }

    20% {
        color: #1abc9c
    }

    30% {
        color: #d35400
    }

    40% {
        color: #ccc
    }

    50% {
        color: #34495e
    }

    60% {
        color: #fff
    }

    70% {
        color: #2980b9
    }

    80% {
        color: #f1c40f
    }

    90% {
        color: #2980b9
    }

    100% {
        color: pink
    }
}

@-o-keyframes color-change {
    0% {
        color: red
    }

    10% {
        color: #8e44ad
    }

    20% {
        color: #1abc9c
    }

    30% {
        color: #d35400
    }

    40% {
        color: #ccc
    }

    50% {
        color: #34495e
    }

    60% {
        color: #fff
    }

    70% {
        color: #2980b9
    }

    80% {
        color: #f1c40f
    }

    90% {
        color: #2980b9
    }

    100% {
        color: pink
    }
}

@keyframes color-change {
    0% {
        color: red
    }

    10% {
        color: #8e44ad
    }

    20% {
        color: #1abc9c
    }

    30% {
        color: #d35400
    }

    40% {
        color: #ccc
    }

    50% {
        color: #34495e
    }

    60% {
        color: #fff
    }

    70% {
        color: #2980b9
    }

    80% {
        color: #f1c40f
    }

    90% {
        color: #2980b9
    }

    100% {
        color: pink
    }
}

.page2 .notice p {
    color: #ff9000;
    margin-bottom: 15px;
    line-height: 1.5;
    padding-left: 30px;
    background: url(../images/ic-li.png) no-repeat;
    font-size: 15px;
    padding-top: 3px;
    padding-bottom: 3px
}

.page2 .title {
    font-size: 55px;
    color: #fc0;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 700
}

.page2 .time {
    height: 47px;
    text-align: center;
    background: url(../images/time.png) no-repeat center;
    color: #fc0;
    font-weight: 500;
    padding-top: 14px;
    margin-top: 10px;
    font-size: 21px
}

.page2 .dots {
    position: fixed;
    top: 50%;
    left: 60px;
    opacity: 0;
    transition: all .3s ease
}

.page2 .dots.show {
    opacity: 1
}

.page2 .dots .dot {
    width: 36px;
    height: 41px;
    margin: 20px 0;
    background: url(../images/dot1.png) no-repeat;
    cursor: pointer
}

.page2 .dots .dot.active,.page2 .dots .dot:hover {
    background: url(../images/dot2.png) no-repeat
}

.page2 .rewards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 70px 0
}

.page2 .rewards .reward {
    width: 276px;
    height: 387px;
    background: url(../images/reward.png) no-repeat;
    margin: -30px 10px;
    position: relative
}

.page2 .rewards .reward:hover .front {
    opacity: 0
}

.page2 .rewards .reward:hover .front .item {
    transform: scale(.8) translateX(-50%)
}

.page2 .rewards .reward:hover .back {
    opacity: 1
}

.page2 .rewards .front {
    width: 276px;
    height: 387px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition: all .3s ease
}

.page2 .rewards .front .item {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: scale(1) translateX(-50%);
    transition: all .3s ease;
    transform-origin: .5 .5
}

.page2 .rewards .front .shadow {
    position: absolute;
    top: 250px;
    left: 0
}

.page2 .rewards .front .name {
    text-align: center;
    width: 100%;
    position: absolute;
    top: 300px;
    left: 0;
    color: #ffee79;
    font-weight: 500
}

.page2 .rewards .back {
    width: 276px;
    height: 387px;
    position: absolute;
    top: 0;
    left: 0;
    color: #ffde00;
    padding: 130px 40px 0;
    line-height: 2;
    opacity: 0;
    transition: all .3s ease;
    font-weight: 700;
    text-align: center
}

.topbar {
    height: 90px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    background: url(../images/topbar.png) no-repeat center top
}

.topbar .tabs {
    width: 1000px;
    height: 90px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    padding: 0 60px 0 80px;
    position: relative
}

.topbar .tabs .act {
    opacity: 0;
    width: 210px;
    height: 100px;
    -moz-transform: skew(30deg,0deg);
    -webkit-transform: skew(30deg,0deg);
    -o-transform: skew(30deg,0deg);
    -ms-transform: skew(30deg,0deg);
    transform: skew(30deg,0deg);
    position: absolute;
    top: 0;
    left: 40px;
    z-index: 5;
    transition: all .4s ease
}

.topbar .tabs .act:before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/texture.png);
    mix-blend-mode: color-dodge;
    opacity: .4
}

.topbar .tabs .tab {
    height: 90px;
    flex: 1;
    color: #ccc;
    padding-top: 20px;
    position: relative;
    z-index: 10
}

.topbar .tabs .tab .t1 {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase
}

.topbar .tabs .tab .t2 {
    font-size: 18px;
    font-weight: 400
}

.topbar .tabs .tab2 {
    height: 90px;
    flex: 1;
    color: #ffddc7;
    padding-top: 20px;
    position: relative;
    z-index: 10
}

.topbar .tabs .tab2 .t1 {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase
}

.topbar .tabs .tab2 .t2 {
    font-size: 18px;
    font-weight: 400
}

.topbar .tabs .tab.tab1 {
    color: #ffc34f
}

.topbar .tabs .tab.tab1.active~.act {
    opacity: 1;
    background: #d67915;
    left: 35px
}

.topbar .tabs .tab.tab2 {
    color: #9ffb3d
}

.topbar .tabs .tab.tab2.active~.act {
    opacity: 1;
    background: #508c11;
    left: 255px
}

.topbar .tabs .tab.tab3 {
    color: #a76aec
}

.topbar .tabs .tab.tab3.active~.act {
    opacity: 1;
    background: #a76aec;
    left: 465px;
    width: 250px
}

.topbar .tabs .tab.tab4 {
    color: #ff2136
}

.topbar .tabs .tab.tab4.active~.act {
    opacity: 1;
    background: #ff2136;
    left: 705px;
    width: 240px
}

.topbar .tabs .tab.tab11 {
    color: #ffc34f
}

.topbar .tabs .tab.tab11.active~.act {
    opacity: 1;
    background: #d67915;
    left: 35px
}

.topbar .tabs .tab2.tab21 {
    color: #9ffb3d
}

.topbar .tabs .tab2.tab21.active~.act {
    opacity: 1;
    background: #508c11;
    left: 255px
}

.topbar .tabs .tab2.tab31 {
    color: #a76aec
}

.topbar .tabs .tab2.tab31.active~.act {
    opacity: 1;
    background: #a76aec;
    left: 465px;
    width: 250px
}

.topbar .tabs .tab2.tab41 {
    color: #ff2136
}

.topbar .tabs .tab2.tab41.active~.act {
    opacity: 1;
    background: #ff2136;
    left: 705px;
    width: 240px
}

.topbar .tabs .tab:hover,.topbar .tabs .tab.active {
    color: #fff
}

.topbar .tabs .tab2:hover,.topbar .tabs .tab2.active {
    color: #fff
}

.countdown {
    position: absolute;
    top: 34px;
    left: 50px
}

.countdown .kkc-day,.countdown .kkc-days,.countdown .kkc-hours,.countdown .kkc-hour,.countdown .kkc-min,.countdown .kkc-sec {
    color: #fed96a;
    font-size: 60px;
    font-weight: 700;
    width: 100px;
    position: relative
}

.countdown .kkc-day:before,.countdown .kkc-days:before,.countdown .kkc-hours:before,.countdown .kkc-hour:before,.countdown .kkc-min:before,.countdown .kkc-sec:before {
    content: ':';
    position: absolute;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    left: -14px;
    top: 22px
}

.countdown .kkc-days:before {
    display: none
}

.countdown .kkcountdown-box {
    display: flex;
    flex-wrap: wrap
}

.countdown .kkcountdown-box .kkc-days-text,.countdown .kkcountdown-box .kkc-hours-text,.countdown .kkcountdown-box .kkc-min-text,.countdown .kkcountdown-box .kkc-sec-text {
    position: absolute;
    color: #fdfdfd;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    top: 64px
}

.countdown .kkcountdown-box .kkc-days-text {
    left: 0
}

.countdown .kkcountdown-box .kkc-hours-text {
    left: 100px
}

.countdown .kkcountdown-box .kkc-min-text {
    left: 200px
}

.countdown .kkcountdown-box .kkc-sec-text {
    left: 300px
}

.footer {
    background: #080808;
    height: 200px;
    padding-top: 40px
}

.footer .container {
    display: flex;
    flex-wrap: wrap;
    color: #474747
}

.footer .container a {
    color: #fc0
}

.footer .container a:hover {
    text-decoration: underline
}

.footer .container .logo {
    width: 300px;
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.footer .container .copyright {
    flex: 1;
    line-height: 1.5
}

.events .event {
    display: none
}

.events .event.active {
    display: block
}

@keyframes scroll {
    0% {
        transform: translateY(-20px);
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        transform: translateY(20px);
        opacity: 0
    }
}

.thoigiancon {
    font-size: 17px;
    display: block;
    padding: 22px 0 0;
    text-align: center;
    font-weight: 600
}

p.text a {
    color: #fed96a
}

p.text a span {
    -webkit-animation: color-change 5s infinite;
    -moz-animation: color-change 5s infinite;
    -o-animation: color-change 5s infinite;
    -ms-animation: color-change 5s infinite;
    animation: color-change 5s infinite
}

.textintro {
    margin-bottom: 15px
}