/*
    Theme Name: OnePage
    Theme URL: https://bootstrapmade.com/onepage-multipurpose-bootstrap-template/
    Author: BootstrapMade
    Author URL: https://bootstrapmade.com
*/
/* ==== Google font ==== */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700,900);
@import url('https://fonts.googleapis.com/css?family=Ek+Mukta:400,600,700');


    /*fix svg*/
    /*IE*/
    .ie9 img[src$=".svg"] {
        width: 100%;
        height: 100%;
    }
    /*Edge*/
    @supports (-ms-ime-align:auto) {
        img[src$=".svg"] {
            width: 100%;
            height: 100%;
        }
    }

    /* 2 */
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        img[src$=".svg"] {
            width: 100%;
            height: 100%;
        }
    }

    body {
        width: 100%;
        height: 100%;
        font-family: 'Microsoft YaHei','Microsoft JhengHei', sans-serif;
        font-weight: 300;
        color: #666;
        background-color: #fff;
        font-size: 16px;
        line-height: 1.6em;
        font-weight: 400;
        background-image: url(../images/back.jpg);
        background-repeat: repeat;
    }

    body > .container {
        min-height: 700px;
        padding-top: 90px;
        padding-bottom: 50px;
    }

    .row{
        position: relative;
    }

    body > .style {
        background-image: url('../images/style-2.png');
        background-repeat: no-repeat;
        background-position-x: right;
        background-position-y: bottom;
        background-size: inherit;
        padding-bottom: 18em;
    }

    .DescriptionBox:first-of-type {
        border-top: initial;
    }
    .DescriptionBox {
        border-top: 4px dashed #cccccc;
    }
    .style .DescriptionBox p {
        padding-left: 1em;
        margin-bottom: 1em;
    }

    .style .DescriptionBox h4 {
        margin-bottom: 0;
        font-weight: 600;
        color: #1F506E;
    }


    p {
        font-size: 16px;
    }

    /*
    .btn-primary {
        padding: 8px 20px;
        background: #fff;
        color: #000;
        border-radius: 0;
        border: none;
        margin-top: 10px;
    }

    .btn-primary:hover,
    .btn-primary:focus {
        background: #fff;
        color: #2487cd;
        outline: none;
        box-shadow: none;
    }
    */


    /* --- logo --- */
    .site-logo {
        margin-top: 12px;
        margin-bottom: 12px;
        float: left;
    }
    .site-logo img{
        height:46px !important;
        width: 145px !important;
    }

    .site-logo a.brand {
        color: #009da6;
        font-size: 30px;
        font-family: 'Roboto', sans-serif;
        font-weight: 900;
    }

    .site-logo a.brand:hover {
        text-decoration: none;
    }

    /* ------- Navigation ------------ */

    .navbar {
        margin-bottom: 0;
        position: fixed;
        width: 100vw;
        z-index: 100;
    }

    .navbar-brand {
        font-weight: 700;
    }

    .navbar-brand:focus {
        outline: 0;
    }

    .nav.navbar-nav {
        padding: 10px 0px;
    }

    .navbar-fixed-top ul.nav li a {
        font-size: 14px;
        letter-spacing: 3px;
        color: #000;
        text-transform: uppercase;
        font-weight: 700;
    }

    .navbar-fixed-top.top-nav-collapse ul.nav li a {
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        color: #fff;
    }

    .navbar-fixed-top ul.nav ul.dropdown-menu {
        border-radius: 0;
        margin-top: 21px;
        border-top: none;
    }

    .navbar-fixed-top ul.nav li a:hover ul.dropdown-menu {
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }

    .navbar-fixed-top ul.nav ul.dropdown-menu li:last-child {
        border-bottom: none;
    }

    .navbar-fixed-top ul.nav ul.dropdown-menu li a {
        padding: 10px 20px;
    }

    .navbar-fixed-top.top-nav-collapse ul.nav ul.dropdown-menu li a {
        color: #666;
    }

    .navbar-fixed-top .nav li a {
        -webkit-transition: background .3s ease-in-out;
        -moz-transition: background .3s ease-in-out;
        transition: background .3s ease-in-out;
    }

    .navbar-fixed-top .nav li a:hover,
    .navbar-fixed-top .nav li a:focus,
    .navbar-fixed-top.nav li.active {
        outline: 0;
        color: #2487cd;
    }

    .navbar-toggle {
        padding: 4px 12px;
        font-size: 18px;
        color: #000;
    }

        .navbar-toggle:focus,
        .navbar-toggle:active {
            outline: 0;
        }

    .slider {
        padding-top: 50px;
    }

    .slider img {
        width: 100%;
    }

    #carousel-slider {
        position: relative;
    }

    #carousel-slider .carousel-indicators {
        bottom: -25px;
    }

    #carousel-slider .carousel-indicators li {
        border: 1px solid #ffbd20;
    }

    #carousel-slider a i {
        border: 1px solid #2487cd;
        ;
        border-radius: 50%;
        font-size: 30px;
        height: 50px;
        padding: 8px;
        position: absolute;
        top: 50%;
        width: 50px;
        color: #fff;
        background: #2487cd;
    }

    #carousel-slider a i:hover {
        background: #2487cd;
        color: #fff;
        border: 1px solid #2487cd;
    }

    #carousel-slider
    .carousel-control {
        width: inherit;
    }

    #carousel-slider .carousel-control.left i {
        left: 70px
    }

    #carousel-slider .carousel-control.right i {
        right: 70px;
    }

    #carousel-slider
    .carousel-control.left,
    #carousel-slider
    .carousel-control.right {
        background: none;
    }

    .center h3 {
        margin-top: 0;
        margin-bottom: 10px;
        text-align: center;
        text-transform: uppercase;
    }

    #portfolio .lead {
        text-align: center;
        font-size: 18px;
        margin-bottom: 40px;
    }

    #portfolio {
        padding-top: 40px;
        position: center;
    }


    .portfolio-items,
    .portfolio-filter {
        list-style: none outside none;
        margin: 0 0 40px 0;
        padding: 0;
    }

    .portfolio-filter > li {
        display: inline-block;
    }

    .portfolio-filter > li a {
        background: none repeat scroll 0 0 #FFFFFF;
        font-size: 14px;
        font-weight: 400;
        margin-right: 20px;
        text-transform: uppercase;
        transition: all 0.9s ease 0s;
        -moz-transition: all 0.9s ease 0s;
        -webkit-transition: all 0.9s ease 0s;
        -o-transition: all 0.9s ease 0s;
        border: 1px solid #F2F2F2;
        outline: none;
        border-radius: 0;
    }

    .portfolio-filter > li a:hover,
    .portfolio-filter > li a.active {
        color: #fff;
        background: #2487cd;
        border: 1px solid #2487cd;
        box-shadow: none;
        -webkit-box-shadow: none;
    }

    .portfolio-items > li {
        float: left;
        padding: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .portfolio-item {
        margin: 0;
        padding: 0;
    }

    /* Start: Recommended Isotope styles */
    /**** Isotope Filtering ****/
    .isotope-item {
        z-index: 2;
    }

    .isotope-hidden.isotope-item {
        pointer-events: none;
        z-index: 1;
    }

    /**** Isotope CSS3 transitions ****/
    .isotope,
    .isotope .isotope-item {
        -webkit-transition-duration: 0.8s;
        -moz-transition-duration: 0.8s;
        -ms-transition-duration: 0.8s;
        -o-transition-duration: 0.8s;
        transition-duration: 0.8s;
    }

    .isotope {
        -webkit-transition-property: height, width;
        -moz-transition-property: height, width;
        -ms-transition-property: height, width;
        -o-transition-property: height, width;
        transition-property: height, width;
    }

    .isotope .isotope-item {
        -webkit-transition-property: -webkit-transform, opacity;
        -moz-transition-property: -moz-transform, opacity;
        -ms-transition-property: -ms-transform, opacity;
        -o-transition-property: -o-transform, opacity;
        transition-property: transform, opacity;
    }

    /**** disabling Isotope CSS3 transitions ****/
    .isotope.no-transition,
    .isotope.no-transition .isotope-item,
    .isotope .isotope-item.no-transition {
        -webkit-transition-duration: 0s;
        -moz-transition-duration: 0s;
        -ms-transition-duration: 0s;
        -o-transition-duration: 0s;
        transition-duration: 0s;
    }

    /* End: Recommended Isotope styles */
    /* disable CSS transitions for containers with infinite scrolling*/
    .isotope.infinite-scrolling {
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
    }


    .recent-work-wrap {
        position: relative;
    }

    .recent-work-wrap img {
        width: 100%;
    }

    .recent-work-wrap .recent-work-inner {
        top: 0;
        background: transparent;
        opacity: .8;
        width: 100%;
        border-radius: 0;
        margin-bottom: 0;
    }

    .recent-work-wrap .recent-work-inner h3 {
        margin: 10px 0;
    }

    .recent-work-wrap .recent-work-inner h3 a {
        font-size: 24px;
        color: #fff;
    }

    .recent-work-wrap .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        border-radius: 0;
        background: #333;
        color: #fff;
        vertical-align: middle;
        -webkit-transition: opacity 500ms;
        -moz-transition: opacity 500ms;
        -o-transition: opacity 500ms;
        transition: opacity 500ms;
        padding: 30px;
    }

    .recent-work-wrap .overlay .preview {
        bottom: 0;
        display: inline-block;
        height: 35px;
        line-height: 35px;
        border-radius: 0;
        background: transparent;
        text-align: center;
        color: #fff;
    }

    .recent-work-wrap:hover .overlay {
        opacity: 1;
    }

    #about {
        /* margin-top:80px; */
        margin-bottom: 40px;
    }

    #about .lead {
        text-align: center;
        font-size: 18px;
        margin-bottom: 50px;
    }

    #about img {
        margin-bottom: 40px;
    }

    .panel-default {
        border-color: transparent;
    }

    .panel-default > .panel-heading,
    .panel {
        background-color: #e6e6e6;
        border: 0 none;
        box-shadow: none;
    }

    .panel-default > .panel-heading + .panel-collapse .panel-body {
        background: #fff;
        color: #858586;
    }

    .panel-body {
        padding: 20px 20px 10px;
    }

    .panel-group .panel + .panel {
        margin-top: 20px;
        border-top: 1px solid #fff;
    }

    .panel-group .panel {
        border-radius: 0;
    }

    .panel-heading {
        border-radius: 0;
    }

    .panel-title > a {
        color: #4e4e4e;
    }

    .accordion-inner img {
        border-radius: 4px;
    }


    .panel-heading.active {
        background: #1f1f20;
    }

    .panel-heading.active .panel-title > a {
        color: #fff;
    }

    a.accordion-toggle i {
        width: 40px;
        line-height: 38px;
        font-size: 20px;
        margin-top: -10px;
        text-align: center;
        margin-right: -15px;
        background: #2487cd;
        color: #fff;
    }

    .panel-heading.active a.accordion-toggle i {
        background: #2487cd;
        color: #fff;
    }

    .panel-heading.active a.accordion-toggle.collapsed i {
        background: #2487cd;
        color: #fff;
    }

    #features {
        margin-top: 50px;
        padding: 50px;
        text-align: center;
    }

    #features .lead {
        text-align: center;
        font-size: 18px;
        margin-bottom: 50px;
    }

    #features img {
        border-radius: 30%;
        margin-top: 30px;
        margin-bottom: 40px;
    }

    /* --- Map --- */
    .map {
        position: relative;
        padding-top: 50px;
        margin-top: 50px;
    }
    /* google map */
    #google-map {
        position: relative;
        height: 400px;
    }

    .contact-page {
        padding-top: 80px;
        background: #eee;
        margin-top: -10px;
    }

    .contact-page .contact-form
    .form-group label {
        color: #4E4E4E;
        font-size: 16px;
        font-weight: 300;
    }

    .form-group .form-control {
        padding: 7px 12px;
        border-color: #f2f2f2;
        box-shadow: none;
        border-radius: 0;
    }

    textarea#message {
        resize: none;
        padding: 10px;
    }

    .contact-page .contact-wrap {
        margin-top: 20px;
    }

    .validation {
        color: red;
        display: none;
        margin: 0 0 20px;
        font-weight: 400;
        font-size: 13px;
    }

    #sendmessage {
        color: green;
        border: 1px solid green;
        display: none;
        text-align: center;
        padding: 15px;
        font-weight: 600;
        margin-bottom: 15px;
    }

    #errormessage {
        color: red;
        display: none;
        border: 1px solid red;
        text-align: center;
        padding: 15px;
        font-weight: 600;
        margin-bottom: 15px;
    }

    #sendmessage.show, #errormessage.show, .show {
        display: block;
    }

    #footer {
        padding-top: 30px;
        padding-bottom: 30px;
        color: #777;
        display: none;
    }

    #footer .container {
        text-align: right;
    }

    #footer a {
        color: #fff;
    }

    #footer a:hover {
        color: #fff;
    }

    #footer ul {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: center;
    }

    #footer ul > li {
        margin-top: 20px;
        margin-bottom: 30px;
        display: inline-block;
        margin-left: 15px;
        text-align: center;
    }

    .midnight-blue {
        text-align: center;
    }












    .in-button {
        display: inline-block;
        width: 200px;
        padding: 10px 0px;
        height: 45px;
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 2.5px;
        text-align: center;
        font-weight: 500;
        color: #000;
        background-color: #fff;
        border: 1px solid #e7e7e7;
        border-radius: 45px;
        box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease 0s;
        cursor: pointer;
        outline: none;
    }

    .in-button:hover {
        background-color: #2EE59D;
        box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
        color: #fff;
        transform: translateY(-7px);
        border: 1px solid #94dcc0;
    }

    .heading_highlight {
        background-image: -webkit-linear-gradient(bottom,#ffeeda 50%,transparent 50%);
        background-image: linear-gradient(0deg,#ffeeda 50%,transparent 50%);
    }

    .noselect {
    -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
            -moz-user-select: none; /* Old versions of Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Opera and Firefox */
    }
    .noevent {
        pointer-events: none;
    }


    /*↓↓↓↓↓index↓↓↓↓↓*/
    .index-MV{
        background-image: url('../images/index-Sentence-bg.svg');
        background-repeat: no-repeat;
        background-position: center;
    }
    .index-PV{
        overflow: hidden;
        padding-top: 7px;
    }
    .index-HOST{
        margin-top: 3em;
    }
    .index-UFO{
        width: 16% !important;
        animation: tada 10s infinite linear;
        animation-duration: 10s;
        position: absolute;
        top: 0;
    }
    .index-Sentence{
        width: 80% !important;
        position: relative;
        /* margin-top: 6vw; */
        left: 10%;
    }
    .index-Sentence-content{
        padding: 4em 5em;
        font-size: 20px;
    }
    .index-Planet{
        width: 80% !important;
        position: relative;
        left: 10%;
        /* animation: rotateIn 1s, rotation 180s infinite linear; */
        -webkit-animation:rotation 180s infinite linear;
        -moz-animation:rotation 180s infinite linear;
        animation: rotation 180s infinite linear;
    }
    .index-QisdaGroup{
        width: 14.5% !important;
        height: auto !important;
        position: absolute;
        top: 41%;
        left: 43%;
    }
    .index-Button{
        width: 30% !important;
        position: absolute;
        top: 51%;
        left: 35%;
    }
    /*↑↑↑↑↑index↑↑↑↑↑*/


    /*↓↓↓↓↓about↓↓↓↓↓*/
    .about-MV{
        text-align: center;
        margin-top: 10em;
        position: relative;
    }
    .about-bg{
        
    }
    .about-QisdaGroup{
        display:none !important;;
        animation-delay: 1.5s;
        width: 15% !important;
        height: auto !important;
        left: 16%;
        position: absolute;
        display: inline-block;
        top: -25%;
    }
    .about-Planet{
        /* animation: rotateIn 1s, rotation 15s infinite linear; */
        animation: rotation 15s infinite linear;
        width: 21% !important;
        height: auto !important;
        left: 39.5%;
        position: absolute;
        display: inline-block;
        top: 38%;
        z-index: 1;
    }
    .about-Astronaut{
        animation: fadeIn 2s, pulse 3s infinite linear;
        width: 10% !important;
        height: auto !important;
        left: 45%;
        position: absolute;
        display: inline-block;
        top: 0%;
    }
    .about-Rocket{
        animation-delay: 1s;
        width: 10% !important;
        height: auto !important;
        right: 10%;
        position: absolute;
        display: inline-block;
        top: 10%;
    }
    .about-Slogan{
        animation-delay: 2s;
        right: 30%;
        position: absolute;
        display: inline-block;
        top: -15%;
        font-size: 30px;
        font-weight: bolder;
        width: 0px !important;
        height: auto !important;
        line-height: 1.6;
        word-break: break-word;
        color: #455675;
    }



    .about-content{
        padding: 1em 11em;
        background-color: #455675;color: #fff;
    }
    .about-content-Qmao{
        width: 50px !important;
        display: inline;
        margin-left: 5px;
    }
    .about-content-body{
        margin-bottom: 1em;
    }
    .about-content-Header{
        background-color: #f5f6f8;
        font-weight: bolder;
        color: #455675;
        padding: 5px 7px;
    }
    .about-content-Detail{
        font-weight: 100;
    }
    .about-content-Detail ul{
        padding-left: 1.5em;
    }

    .about-content-step{
        position: relative;
        top: -2px;
        max-width: 120px;
    }
    .about-darkbgcover{
        background-color: #455675;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        margin-top: -1px;
    }
    .about-btn-box{
        position: absolute;
        left: 45%;
    }
    /*↑↑↑↑↑about↑↑↑↑↑*/

    /*↓↓↓↓↓Event↓↓↓↓↓*/

    .fblock1{
        top: 24em;
        left: 27em;
    }
    .fblock2{
        top: 13em;
        left: 3em;
    }
    .fblock3{
        top: 6em;
        left: 41em;
    }
    .fblock4{
        top: 19em;
        left: 46em;
    }
    .fblock5{
        top: 6em;
        left: 13em;
    }
    .fblock6{
        top: 22em;
        left: 6em;
    }
    .fblock7{
        top: 28em;
        left: 52em;
    }
    .fblock8{
        top: 10em;
        left: 56em;
    }
    .fblock9{
        top: 21em;
        left: 59em;
    }
    .fblock10{
        top: 3em;
        left: 25em;
    }
    .fblock11{
        top: 30em;
        left: 14em;
    }
    .fblock12{
        top: 12em;
        left: 35em;
    }
    .fblock13{
        top: 33em;
        left: 38em;
    }
    .SBox.fblock8 span.IN-widget {
        top: 4em;
        left: 4em;
    }
    .SBox.fblock10 span.IN-widget {
        top: 4em;
        left: 4em;
    }
    .panelEventComplete{
        display: none;
        position: absolute;
        top: 0;
        padding: 10%;
    }
    .heading {
        font-size:24px;
    }
    #contentContainer {
        width: 100%;
        height: 680px;
        overflow: hidden;
        /* background-color: #F2F2F2; */
        background-image: url('../images/in-bg.svg');
        background-repeat: no-repeat;
        cursor: pointer;
        position: relative;
    }
    .follow-space {
        display: block;
    }

    .follow-list {
        display: none;
    }
    .close {
        zoom: 2;
        position: absolute;
        top: 0.2em;
        right: .5em;
    }

    #thing {
        transform: translate3d(50px, 50px, o);
        transition: transform .3s cubic-bezier(0, .64,.52,.24);
        pointer-events: none;
    }

    #thing .dream {
        width: 90px !important;
        top: 0;
        left: 0;
        position: absolute;
        z-index: 1;
    }


    .fire-container {
        margin: 8px auto;
        top: 19px;
        left: 17px;
        z-index: 0;
        width: 6px;
        height: 6px;
        position: absolute;
        transform-origin: center bottom;
        animation-name: flicker;
        animation-duration: 3ms;
        animation-delay: 200ms;
        animation-timing-function: ease-in;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        zoom: 3;
        transform: rotate(225deg);
    }

    .flame {
        bottom: 0;
        position: absolute;
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
        border-top-left-radius: 50%;
        transform: rotate(-45deg) scale(1.5,1.5);
    }

    .yellow {
        left: 1.5px;
        width: 3px;
        height: 3px;
        background: gold;
        box-shadow: 0px 0px .9px .4px gold;
    }

    .orange {
        left: 1px;
        width: 4px;
        height: 4px;
        background: orange;
        box-shadow: 0px 0px .9px .4px orange;
    }

    .red {
        left: .5px;
        width: 5px;
        height: 5px;
        background: OrangeRed;
        box-shadow: 0px 0px .5px .4px OrangeRed;
    }

    .white {
        left: 1.5px;
        bottom: -.4px;
        width: 3px;
        height: 3px;
        background: white;
        box-shadow: 0px 0px .9px .4px white;
    }

    .circle {
        border-radius: 50%;
        position: absolute;
    }

    .blue {
        width: 1px;
        height: 1px;
        left: 2.5px;
        bottom: -2.5px;
        background: SlateBlue;
        box-shadow: 0px 0px 1.5px 1px SlateBlue;
    }

    .black {
        width: 4px;
        height: 4px;
        left: 1px;
        bottom: -6px;
        background: black;
        box-shadow: 0px 0px 1.5px 1px black;
    }
    
    .SBox {
        position: absolute;
    }
    .SBox img.planet {
        width: 100px !important;
        opacity: .5;
        pointer-events: none;
    }
    .SBox a {
        display: none;
    }
    .SBox pre {
        display: none;
    }
    .SBox span.IN-widget {
        position: absolute;
        top: 5em;
        left: 5em;
    }
    .LBoxImgCover {
        width: 100px;
        text-align: center;
    }
    .LBox img.planet {
        height: 70px !important;
        opacity: .5;
        pointer-events: none;
    }
    .LBox span.IN-widget {
        position: absolute;
        top: 1.5em;
        left: 3em;
    }
    .LBox a {
        display: inline-block;
        margin: 0;
        position: absolute;
        top: 50%;
        right: 0%;
        -ms-transform: translate(0%, -50%);
        transform: translate(0%, -50%);
    }


    .LBox {
        position: relative;
        min-height: 70px !important;
        height: 70px !important;
    }
    .LBox a {
        display: inline-block;
    }
    .LBox pre {
        display: none
    }

    .raffle-complete{
        padding:0 20%;
    }
    .raffle-bg {
        /* background-image: url(../images/in-raffle-bg.svg);
        background-position-x: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-position-y: -1em;
        padding: 45% 20% 0 20%; */
        padding: 0 20%;
    }
    .raffle-cover {
        background-color: #f9f9f9;
        padding: 10px 20px;
        margin-bottom: 10px;
        border: 1px solid #c3c3c3;
        border-radius: 3px;
    }
    .raffle-box {
        margin-bottom: 10px;
        padding: 0 5px;
    }

    .raffle {
        padding-bottom: 0px;
        position: relative;
    }
    #panel-raffle-toast2{
        background-color: #0000008c;
        display: block;
        padding: 10px 15px;
        border-radius: 5px;
        color: #ffffff;
        font-weight: 100;
    }
    #panel-raffle-toast2 mark{
        color: #f1ff1e;
        background-color: initial;
    }
    #panel-raffle-toast2 .text-muted{
        color: #ddd;
    }
    .poke-img-top {
        width: 100% !important;
        cursor:pointer;
    }


    
    @keyframes arrow-down {
        0% {
            transform:translateY(-30px);
        }
        100% {
            transform:translateY(0);
        }
    }


    .arrow {
        display: block;
        position: fixed;
        bottom: 1em;
        left: 50%;
        margin-left: -20px;
        width: 40px !important;
        height: 40px !important;
        /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);*/
        background-image: url('../images/in-Button-More.svg');
        background-repeat: no-repeat;
        background-size: contain;
    }

    .arrow-down {
        animation:arrow-down 2s infinite;
    }
    .identity{
        margin-bottom: 5px;
    }
    .identityimg{    
        width: 50px !important;
    }
    .compeleteEvent{
        opacity: 0.2;
        pointer-events: none;
    }
    
    #progressbar .progress {
      height: 20px;
      background: #69bd45;
      width: 0;
      transition: .5s;
      overflow:visible;
      position: relative;
    }
    .progress-bg{
        top: 6px;
        height: 20px;
        background: #d6d6d6;
        transition: .5s;
        overflow: initial;
        position: relative;
        border-radius: 4px;
        text-align: center;
    }
    .progress-bg:after {
        content: attr(value)'%';
        position: relative;
        top: -43px;
        color: white;
        text-shadow: 1px 2px 3px #000;
    }
    .progress-head{
        position: absolute;
        width: 50px !important;
        height: auto !important;
        right: -25px;
        top: -15px;
    }
    .progress-body{
        width: calc(100% - 120px);
        float: left;
        padding-left: 15px;
    }
    .progress-btn{
        text-align: right;
        padding-right: 15px;
    }

    .helpcenter{
        padding-left: 2em;
    }
    .helpcenter>.topic{
        display: list-item;
        list-style-type: disc;
    }
    .helpcenter>.content{
        /* padding-left: 2em; */
    }
    .helpcenter>.content img{
        border: 1px solid #ddd;
    }

    /*↑↑↑↑↑Event↑↑↑↑↑*/


    /*↓↓↓↓↓Prize↓↓↓↓↓*/
    .item-box {
        margin-bottom: 10px;
        padding: 0 5px;
    }
    .item {
        padding: 15px;
        padding-bottom: 0px;
        position: relative;
    }
    img.card-img-top {
        width: 100%;
        /* border: 1px solid #c3c3c3; */
        border-radius: 3px;
    }

    .card-title {
        margin-bottom: 0px;
    }

    .card-text {
        margin-bottom: 0px;
    }
    /*↑↑↑↑↑Prize↑↑↑↑↑*/



    /*↓↓↓↓↓List↓↓↓↓↓*/
    .id{
        display:none;
        width: 49px;
    }
    .raffleName{
        display:none;
    }
    .company{
        width: 50px;
    }
    .identity{
        width: 50px;
    }
    .name{
        width: 50px;
    }
    .infomation{
        width: 84px;
    }

    .datatag-img{
        width:35px !important;
        margin-right: 5px;
    }
    .datatag-btn{
        margin-left:5px;
        margin-bottom:5px;
        -webkit-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;

        text-indent: 0;
        display: inline-block;
        font-size: 14px;
        font-style: normal;
        height: 35px;
        line-height: 35px;
        width: 260px;
        text-decoration: none;
        padding-left: 20px;
        color: initial;
        display: block;
        cursor: pointer;
    }
    .tag-BN{
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 2px 5px;
        margin-right:5px;
        font-size: 12px;
        display: inline-block;
        color: #fff;
        background-color: #005e83;
    }
    .tag-CN{
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 2px 5px;
        margin-right:5px;
        font-size: 12px;
        display: inline-block;
        color: #fff;
        background-color: #777777;
    }
    /*浮動MENU*/
    .floatMenu-button {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 5;
        margin: 0.6em;
        padding: 9px 10px;
        white-space: normal;
        width: 50px;
        height: 50px;
        border: none;
        font-size: 14px;
        color: #fff;
        border-radius: 5px;
        line-height: 1.2;
    }

    .floatMenu{
        position: fixed;
        left: 0;
        z-index: 4;
        bottom: 35px;
        margin-left: 20px;
        padding-bottom: 20px;
        padding-top: 10px;
        border-radius: 8px;
        background: #fff;
        max-height: 80vh;
        overflow-y: auto;

        -webkit-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;

        -webkit-animation: anim-jelly 0.8s linear forwards;
        animation: anim-jelly 0.8s linear forwards;

        -moz-box-shadow: 0px 1px 8px -2px rgba(20%,20%,40%,0.5);
        -webkit-box-shadow: 0px 1px 8px -2px rgba(20%,20%,40%,0.5);
        box-shadow: 0px 1px 8px -2px rgba(20%,20%,40%,0.5);
    }
    .ishidden {
        /*right: -100px;*/
        left: -200px;
        bottom: -600px;
    }
    .floatMenuMenu {
        opacity: 1;
        -webkit-transition: opacity 0.3s 0.3s;
        transition: opacity 0.3s 0.3s;
    }
    /*↑↑↑↑↑List↑↑↑↑↑*/

    /*set modal scroll*/
    .modal-dialog{
        overflow-y: initial !important;
    }
    .modal-body{
        max-height: 85vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /*↓↓↓↓↓under1199Large↓↓↓↓↓*/
    @media (max-width: 1199px) {
        
        /*↓↓↓↓↓index↓↓↓↓↓*/
        .index-UFO{
            width: 14% !important;
        }
        .index-Sentence{
            width: 90% !important;
            left: 5%;
        }
        .index-Sentence-content{
            padding: 7% 12%;
            font-size: 16px;
        }
        .index-Planet{
            
        }
        .index-QisdaGroup{
            
        }
        .index-Button{
            
        }
        /*↑↑↑↑↑index↑↑↑↑↑*/
        
        /*↓↓↓↓↓about↓↓↓↓↓↓*/
        .about-content {
            padding: 1em 5em;
        }
        .about-MV{
    
        }
        .about-bg{
            
        }
        .about-QisdaGroup{
            width: auto !important;
            height: 20% !important;
            top: -38%;
            left: 20%;
        }
        .about-Planet{
            width: auto !important;
            height: 50% !important;
            top: 42%;
            left: 40%;
        }
        .about-Astronaut{
            width: auto !important;
            height: 45% !important;
            top: 0%;
            left: 44.5%;
        }
        .about-Rocket{
            width: auto !important;
            height: 50% !important;
            right: 10%;
            top: 30%;
        }
        .about-Slogan{
            top: -15%;
            right: 35%;
            line-height: 1.1;
        }
        /*↑↑↑↑↑about↑↑↑↑↑*/
        
        
        /*↓↓↓↓↓event↓↓↓↓↓*/
        #contentContainer{
            background-position-y: 3em;
        }
        .fblock1{
            top: 21em;
            left: 22em;
        }
        .fblock2{
            top: 13em;
            left: 1em;
        }
        .fblock3{
            top: 8em;
            left: 43em;
        }
        .fblock4{
            top: 17em;
            left: 31em;
        }
        .fblock5{
            top: 8em;
            left: 10em;
        }
        .fblock6{
            top: 21em;
            left: 4em;
        }
        .fblock7{
            top: 28em;
            left: 39em;
        }
        .fblock8{
            top: 17em;
            left: 48em;
        }
        .fblock9{
            top: 21em;
            left: 42em;
        }
        .fblock10{
            top: 6em;
            left: 20em;
        }
        .fblock11{
            top: 30em;
            left: 13em;
        }
        .fblock12{
            top: 6em;
            left: 29em;
        }
        .fblock13{
            top: 31em;
            left: 27em;
        }
        /*↑↑↑↑↑event↑↑↑↑↑*/
    }
    /*↑↑↑↑↑under1199Large↑↑↑↑↑*/

    /*↓↓↓↓↓under1920h↓↓↓↓↓*/
    @media (max-width: 991px) {
        .about-content-Header-Title{
            margin-bottom: 5px;
        }
        .about-content {
            padding: 1em 1em;
        }
        .about-darkbgcover{
            height: 100%;
        }
        .about-btn-box{
            left: 40%;
        }
        .raffle-bg {
            /* padding: 75% 5% 0 5%; */
        }

        .index-Planet{
            width: 100% !important;
            left: 0%;
        }

        .d-m-none {
            display: none !important;
        }
        .follow-space {
            display: none;
        }
        .follow-list {
            display: block;
        }
    }
    /*↑↑↑↑↑under1920h↑↑↑↑↑*/

    /* ↓↓↓↓↓on1024x768↓↓↓↓↓ */
    @media (max-width: 768px) {
        body > .container {
            padding-top: 70px;
        }
        .site-logo {
            margin-top: 7px;
            margin-bottom: 7px;
            margin-left: 12px;
        }
        .site-logo img{
            height: 37px !important;
            width: 130px !important;
        }
        .index-MV{
            background-size: cover;
            background-image: none;
        }
        .index-UFO{
            position: relative;
            width: 20% !important;
        }
        .about-MV{
            margin-top: auto;
            padding-top: 12em;
        }
        .index-Sentence{
            top: -1em;
            background-color: #ffe18fe0;
        }
        .about-bg{
            
        }
        .about-QisdaGroup{
            top: 5%;
            height: 20% !important;
            left: 5%;
        }
        .about-Planet{
            height: 39% !important;
            top: 71%;
            left: 37%;
        }
        .about-Astronaut{
            height: 40% !important;
            top: 36%;
            left: 42%;
        }
        .about-Rocket{
            height: 40% !important;
            top: 50%;
        }
        .about-Slogan{
            font-size: 24px;
            top: 10%;
        }

        .about-btn-box{
            left: 22vw;
        }

        .raffle-bg {
            padding:0;
        }
        .raffle-complete{
            padding:0;
        }
    }
    /* ↑↑↑↑↑on1024x768↑↑↑↑↑ */


    /* ↓↓↓↓↓on mobile↓↓↓↓↓ */
    @media (max-width: 500px) {
        #index-MV{
            overflow: hidden;
        }
        .index-MV{
            padding-top: 7px;
        }
        .about-Planet{
            left: 33%;
        }
        .about-Astronaut{
            left: 39%;
        }
    }
    @media (max-width: 400px) {
        #index-MV{
            overflow: hidden;
        }
        .index-MV{
            padding-top: 7px;
        }
        .index-PV{
            overflow: hidden;
            height: 350px;
        }
        .index-UFO {
            width: 30% !important;
        }
        .index-Planet{
            width: 100% !important;
            max-width: 100% !important;
            min-width: 100% !important;
            left: 3%;
            top: 50%;
            z-index: -1;
            position: relative;
            -webkit-animation: rotation2 180s infinite linear;
            -moz-animation: rotation2 180s infinite linear;
            animation: rotation2 180s infinite linear;
        }
        .index-QisdaGroup{
            width: 45% !important;
            left: 30%;
            display: none;
        }
        .index-Button{
            width: 60% !important;
            left: 23%;
            top: 74%;
        }
        .index-Sentence{
            top: 0;
            background-color: #ffe18fe0;
        }
        .about-bg{

        }
        .about-QisdaGroup{
            height: 15% !important;
            top: 0%;
            left: 5%;
        }
        .about-Planet{
            height: 45% !important;
            top: 55%;
            left: 29%;
        }
        .about-Astronaut{
            height: 40% !important;
            top: 20%;
            left: 38%;
        }
        .about-Rocket{
            height: 40% !important;
            top: 45%;
            right: 7%;
        }
        .about-Slogan{
            font-size: 20px;
            top: 3%;
            right: 32%;
        }

        .raffle-head img{
            width: 200%;
            position: relative;
            left: -30%;
        }

        .raffle-complete img{
            width: 100% !important;
            position: relative;
            left: 0%;
        }
    }
    /* ↑↑↑↑↑on mobile↑↑↑↑↑ */

    

    /* ↓↓↓↓↓animation↓↓↓↓↓ */
    
    @keyframes rotation {
        from {
          -moz-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        to {
          -moz-transform: rotate(360deg);
          -o-transform: rotate(360deg);
          -webkit-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
    @-moz-keyframes rotation {
        from {
          -moz-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        to {
          -moz-transform: rotate(360deg);
          -o-transform: rotate(360deg);
          -webkit-transform: rotate(360deg);
          -ms-transform: rotate(0deg);
          transform: rotate(360deg);
        }
      }
      @-o-keyframes rotation {
        from {
          -moz-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        to {
          -moz-transform: rotate(360deg);
          -o-transform: rotate(360deg);
          -webkit-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @-webkit-keyframes rotation {
        from {
          -moz-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        to {
          -moz-transform: rotate(360deg);
          -o-transform: rotate(360deg);
          -webkit-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }


      
    @keyframes rotation2 {
        from {
          -moz-transform: rotate(0deg) scale(2);
          -o-transform: rotate(0deg) scale(2);
          -webkit-transform: rotate(0deg) scale(2);
          -ms-transform: rotate(0deg) scale(2);
          transform: rotate(0deg) scale(2);
        }
        to {
          -moz-transform: rotate(360deg) scale(2);
          -o-transform: rotate(360deg) scale(2);
          -webkit-transform: rotate(360deg) scale(2);
          -ms-transform: rotate(360deg) scale(2);
          transform: rotate(360deg) scale(2);
        }
      }
    @-moz-keyframes rotation2 {
        from {
          -moz-transform: rotate(0deg) scale(2);
          -o-transform: rotate(0deg) scale(2);
          -webkit-transform: rotate(0deg) scale(2);
          -ms-transform: rotate(0deg) scale(2);
          transform: rotate(0deg) scale(2);
        }
        to {
          -moz-transform: rotate(360deg) scale(2);
          -o-transform: rotate(360deg) scale(2);
          -webkit-transform: rotate(360deg) scale(2);
          -ms-transform: rotate(360deg) scale(2);
          transform: rotate(360deg) scale(2);
        }
      }
      @-o-keyframes rotation2 {
        from {
          -moz-transform: rotate(0deg) scale(2);
          -o-transform: rotate(0deg) scale(2);
          -webkit-transform: rotate(0deg) scale(2);
          -ms-transform: rotate(0deg) scale(2);
          transform: rotate(0deg) scale(2);
        }
        to {
          -moz-transform: rotate(360deg) scale(2);
          -o-transform: rotate(360deg) scale(2);
          -webkit-transform: rotate(360deg) scale(2);
          -ms-transform: rotate(360deg) scale(2);
          transform: rotate(360deg) scale(2);
        }
      }
      @-webkit-keyframes rotation2 {
        from {
          -moz-transform: rotate(0deg) scale(2);
          -o-transform: rotate(0deg) scale(2);
          -webkit-transform: rotate(0deg) scale(2);
          -ms-transform: rotate(0deg) scale(2);
          transform: rotate(0deg) scale(2);
        }
        to {
          -moz-transform: rotate(360deg) scale(2);
          -o-transform: rotate(360deg) scale(2);
          -webkit-transform: rotate(360deg) scale(2);
          -ms-transform: rotate(360deg) scale(2);
          transform: rotate(360deg) scale(2);
        }
      }




    @keyframes flicker {
        0% {
            transform: rotate(224deg);
        }

        20% {
            transform: rotate(226deg);
        }

        40% {
            transform: rotate(224deg);
        }

        60% {
            transform: rotate(226deg) scaleY(1.04);
        }

        80% {
            transform: rotate(223deg) scaleY(0.92);
        }

        100% {
            transform: rotate(226deg);
        }
        /*
          0%   {transform: rotate(-1deg);}
          20%  {transform: rotate(1deg);}
          40%  {transform: rotate(-1deg);}
          60%  {transform: rotate(1deg) scaleY(1.04);}
          80%  {transform: rotate(-2deg) scaleY(0.92);}
          100% {transform: rotate(1deg);}
        */
    }
    /* ↑↑↑↑↑animation↑↑↑↑↑ */