@charset "utf-8";
/*日文字*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');
@import url('normalize.css');
@import url('jquery.fullPage.css');
@import url('owl.carousel.min.css');
@import url('default.css');
@import url('menu.css');
@import url('news.css');
@import url('hero.css');


/*-----------------------------------------------
    fly-crisom
-----------------------------------------------*/
.crisom-group{
    width: 40%;
    height: 50%;
    position: absolute;
    z-index: 1;
    /*pointer-events: none;*/
    left: -25%;
    bottom: 88%;

}
@keyframes crisom
{
0%{opacity:0;transform:translate3d(0%,10%,0);}
30%{opacity:1;}
40%{filter:brightness(1.1);}
50%{filter:brightness(1);}
70%{opacity:1;filter:brightness(1.1);}
80%{transform:translate3d(350%,-70%,0);}
100%{opacity:0;transform:translate3d(350%,-70%,0);}
}


@keyframes crisom2
{
0%{opacity:0;transform:translate3d(50%,50%,0);}
10%{opacity:1;filter:brightness(1.1);}
20%{filter:brightness(1);}
30%{opacity:1;filter:brightness(1);}
100%{opacity:0;transform:translate3d(650%,-30%,0);}
}

    .crisom0 {
        position: absolute;
        top: 600px;
        left: 300px;
        z-index: 0;
        animation: crisom2 5s ease-in 2s 100 both;
    }

    .crisom {
        position: absolute;
        top: 500px;
        left: 200px;
        z-index: 1;
        animation: crisom 8s ease-out 0s 100 both;
    }
    .crisom2 {
        position: absolute;
        top: 400px;
        left: 300px;
        z-index: 1;
        animation: crisom2 5s ease-out .8s 100 both;
    }

    .crisom3 {
        position: absolute;
        top: 500px;
        left: 600px;
        z-index: 1;
        animation: crisom 9s ease-out 1s 100 both;
    }

    .crisom4 {
        position: absolute;
        top: 400px;
        left: 600px;
        z-index: 1;
        animation: crisom 7s ease-out 1.8s 100 both;
    }

/*-----------------------------------------------
    section-hover
-----------------------------------------------*/

.section.active {
    -webkit-animation: scaleA 0.5s ease 0s both;
}

.no-effect.active {
    -webkit-animation: scaleA 0s ease both;
}






@-webkit-keyframes scaleA {
    0%,30% {
        opacity: 0;
        -webkit-transform: scale(1.3);

        filter: blur(10px);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);

        filter: blur(0px);
    }
}

/*-----------------------------------------------
    修改
-----------------------------------------------*/
 .owl-carousel button.owl-dot {
    max-width: 20px;
 }
@media screen and (max-width:768px){
.owl-group-bg {

    top: -4.5%;
    left: -15.7%;

}
}
 .ytp-pause-overlay{
    display: block !important;
    overflow:  hidden !important;
    width:0px !important;
    height: 0px !important;
    pointer-events: none !important;
    opacity: 0 !important;
}
/*.mask_black{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index:999;

    animation: mask_black 5s ease-out 0s 1 both;

background: #000 url(../images/img_logo.png) center 40% / 450px no-repeat ;

    pointer-events: none;
}


@keyframes mask_black
{
0%{opacity:1;}
50%{opacity:1;}
100%{opacity:0;}
}
*/




/*-----------------------------------------------
    header-video
-----------------------------------------------*/
.header-video {
    display: none;
    position: relative;
    padding-bottom: 0; /*16by9*/
    height: 0;
    overflow: hidden;
}


.header-video-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 104%;
    height: 100%;
    border: 0;
    margin: 0px 0;
}

@media screen and (max-width:768px)
{
.header-video {
    display: block;
    position: relative;
    padding-bottom: 188.8%; /*16by9*/
    height: 0;
    overflow: hidden;
    top: 60px;
    /*! background: #000; */
}
}
/*i8 plus*/
@media only screen

and (min-device-width : 414px)

and (max-device-width : 736px)

and (orientation : portrait) {
.header-video-item {
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 0;
    width: 105%;
    height: 100%;
    border: 0;
    margin: 0px 0;
}
.header-video {
    display: block;
    position: relative;
    padding-bottom: 170.8%; /*16by9*/
    height: 100%;
    overflow: hidden;
    top: 0px;
    min-height: 736px;
}
.header-video{
    /*! display: none; */
    /*! z-index: -1; */
    /*! height: 0; */
}
}

/* CSS Document */

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

.wrap-box {
    position: absolute;
    height: 100%;
    left: 0;
    top: 50%;
    padding: 0;
    margin-top: -190px;
    z-index: 6;
    right: 0;
}

h5 {
    width: 100px;
    height: 100px;
    background: #944646;
    display: block;
    z-index: 10;
}
@media screen and (max-width:1600px) {

    .wrap-box-sp {
        transform: scale(0.8);
        position: absolute;
        height: 100%;
        left: 0;
        top: 48%;
        padding: 0;
        margin-top: -210px;
        z-index: 6;
        right: 0;
    }
}
@media screen and (max-width:1400px) {
    .wrap-box {
        transform: scale(0.8);
        position: absolute;
        height: 100%;
        left: 0;
        top: 53%;
        padding: 0;
        margin-top: -210px;
        z-index: 6;
        right: 0;
    }

    .wrap-box-sp {
        transform: scale(0.68);
        position: absolute;
        height: 100%;
        left: 0;
        top: 48%;
        padding: 0;
        margin-top: -210px;
        z-index: 6;
        right: 0;
    }
}

@media screen and (max-width:768px) {
    .wrap-box {
        transform: scale(1);
    }
}

@media screen and (max-width:480px) {
    .wrap-box {

        margin-top: -140px;

    }
}

/*i8 plus*/
@media only screen

and (min-device-width : 414px)

and (max-device-width : 736px)

and (orientation : portrait) {
    .wrap-box {

        margin-top: -184px;

    }
}
@media screen and (max-width:320px) {
    .wrap-box {

        margin-top: -111px;

    }
}

/*-----------------------------------------------
    reload
-----------------------------------------------*/

.reload {
    opacity: 0;
    width: 0;
    height: 0;
    z-index: -1;
    position: absolute;
}

/*-----------------------------------------------
    float
-----------------------------------------------*/
.float {
    position: absolute;
    z-index: 10;

}

.float a {
    display: block;
    width: 170px;
    height: 230px;
    background: url(../images/btn/float.png) center center / 100% no-repeat;
    /*animation: shiftIn .8s ease 0s 6 both;*/
    z-index: 11;
    position: relative;
}


@media screen and (max-width:768px) {

    .float a,
    .float_shift {
        right: -10px;
        bottom: 53%;
        width: 110px;
        height: 130px;
    }

}


/*-----------------------------------------------
    shift - 切換圖
-----------------------------------------------*/

@keyframes shiftIn {

    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    51% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}


@keyframes shiftOut {

    0% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    51% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/*-----------------------------------------------
    page-frame
-----------------------------------------------*/
.page {
    width: 100%;
    height: 100%;
    min-width: 1200px;
    margin: 0;
    padding: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    position: relative;
}

.page00_bg {
    background: url(../images/bg_01_.jpg) no-repeat;
    background-position: center 18%;
    background-size: cover;
    /*min-width: 1920px;*/
}

.page01_bg {
    background: url(../images/bg_02.jpg) top no-repeat;

    background-position: center center;
    background-size: 100% 100%;
    overflow: hidden;
}

.page02_bg {
    background: url(../images/bg_03.jpg) top no-repeat;

    background-position: center center;
    background-size: 100% 100%;
}



.page04_bg {
    background: url(../images/bg_04.jpg) bottom no-repeat;

    background-size: 100%;
}

.bg_black {
    width: 100%;
    height: 100%;
    background: url(../images/mask_pattern.png) repeat;
    position: absolute;
    top: 0px;
    opacity: 0.4;
    /*! transform: scale(0.8); */
    /*! background-size: 2%; */
    z-index: 4;
}

@media screen and (max-width:1400px)
{
    .page00_bg {
        background-position: center 20%;
        background-size: cover;
    }
}



@media screen and (max-width:1280px)
{
    .page00_bg {
        background-position: center 30%;
        background-size: cover;
    }
}


@media screen and (max-width:768px) {
    .page {
        min-width: auto;
        /*! min-height: 900px; */
    }

    .page00_bg {
        background: url(../images/mobile_01.jpg) top no-repeat;
        background-position: center 40px;
        background-size: 100%;
    }

    .page01_bg {
        background: url(../images/mobile_02.jpg) top no-repeat;

        background-position: center center;
        background-size: 100% 100%;
    }

    .page02_bg {
        background: url(../images/mobile_03.jpg) top no-repeat;

        background-position: center center;
        background-size: 100% 100%;
    }

    .page04_bg {
        background: url(../images/mobile_05.jpg) 22% bottom no-repeat;
        background-size: 100%;
    }
}


@media screen and (max-width:480px) {
    .page00_bg {
        background: url(../images/mobile_01.jpg) top no-repeat;
        background-position: center 35px;
        background-size: 100%;
    }
}
/*i8 plus*/
@media only screen

and (min-device-width : 414px)

and (max-device-width : 736px)

and (orientation : portrait) {

    .page00_bg {
        background: url(../images/mobile_01.jpg) top no-repeat;
        background-position: center 0px;
        background-size: 100%;
        height: 90vh;
        top: 0px;
    }


}

@media screen and (max-width:320px) {
    .page00_bg {
        background: url(../images/mobile_01.jpg) top no-repeat;
        background-position: center 40px;
        background-size: 100%;
    }
}

/*-----------------------------------------------
    page1- store
-----------------------------------------------*/

.soon {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: url(../images/btn/bt_comesoon.png) no-repeat;
    background-size: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 0.3s;
}

.soon:hover {
    opacity: 1;
    transition: all 0.3s;
}

.button_box {

    position: relative;
    max-width: 390px;
    display: flex;
    flex-direction: row;
    height: 75px;
    /*margin: 52vh auto;*/
    width: 90%;
    margin: 39vh 0 0 14%;
}

.bt_android {
    flex: 1;

    background: url(../images/btn/bt_android.png) no-repeat;

    z-index: 50;
    opacity: 0.9;
    background-size: 100%;
    /*! margin: 5px; */
    transition: all 0.3s ease-out;
    position: relative;
    text-indent: -300%;
    overflow: hidden;
    transform: scale(0.9);
}

.bt_ios {
    flex: 1;
    background: url(../images/btn/bt_ios.png) no-repeat;
    z-index: 50;
    opacity: 0.9;
    background-size: 100%;
    /*! margin: 5px; */
    transition: all 0.3s ease-out;
    position: relative;
    text-indent: -300%;
    overflow: hidden;
    transform: scale(0.9);
}
.bt_event {
    flex: 1;
    background: url(../images/btn/bt_event.png) no-repeat;
    z-index: 50;
    opacity: 0.9;
    background-size: 100%;
    /*! margin: 5px; */
    transition: all 0.3s ease-out;
    position: relative;
    text-indent: -300%;
    overflow: hidden;
    transform: scale(0.9);
}
.bt_android:hover,.bt_event:hover,
.bt_ios:hover {
    /*! background: url(../images/btn/bt_comesoon.png) no-repeat; */
    background-size: 100%;
    opacity: 0.85;
    cursor: default;
    transition: all 0.3s ease-out;
    transform: scale(1);
    cursor: pointer;
}

.button_box hr {
    width: 46rem;
    height: 1px;
    background-color: #fffdfd;
    border: 0;
    position: absolute;
}

.bg_000img {
    width: 45rem;
    margin: -318px 0 10px -161px;
    padding: 0;
    background-position: center center;
    background-size: 100% auto;
}


@media screen and (min-width:1921px) {
.button_box {


    margin: 35vh 0 0 16%;
}

}





@media screen and (max-width:1800px)
{
    .button_box {

        /*margin: 60vh 38vw;*/
        margin: 48vh 0 0 14%;

        width: 21%;

    }
}

@media screen and (max-width:1600px)
{
    .button_box {

        margin: 53vh 0 0 6%;
        width: 24%;

    }
}

@media screen and (max-width:768px) {
    .button_box {
        height: 80px;
        margin: 74% auto 0;
        width: 80%;
    }
}

@media screen and (max-width:480px) {
    .button_box {
        margin: 55vh auto 0;
        max-width: 60%;
    }
}

@media screen and (max-width:320px) {
    .button_box {
        margin: 54vh auto 0;
    }
}

@media only screen and (min-device-width : 414px) and (max-device-width : 736px) {

    .button_box {
        height: 80px;
        margin: 104% auto 0;
        width: 70%;
    }
}





/*-----------------------------------------------
    page2- news_group
-----------------------------------------------*/
.news_group {
    width: 1130px;
    height: 550px;
    display: flex;
    margin: -6% auto 0;
    text-align: center;
    left: 0;
    right: 0;
}

.news_group img {
    width: 70%;
    max-width: 457px;
}

.twitter-frame {
    flex: 1;
    position: relative;
}

.news-frame {
    flex: 1;
    position: relative;
}

.twitter-list {
    max-width: 80%;
    margin: 45px auto;
    height: 469px;
    overflow: auto;
    z-index: 3;
    position: relative;
}

.twitter-frame::before,
.news-frame::before {
    content: '';
    position: absolute;
    height: 480px;
    width: 82%;
    /*z-index: -1;*/
    background: rgba(49, 48, 48, 0.76);
    top: 84px;
    left: 50px;
    border-radius: 5px;
}

.twitter-frame::before {
    background: rgb(255, 255, 255);
}

.twitter-frame::after,
.news-frame::after {
    content: '';
    position: absolute;
    height: 510px;
    width: 86%;
    z-index: 0;
    top: 70px;
    left: 39px;
    border-radius: 5px;
    border: 1px solid #fff;
}

.news-list {
    width: 560px;
    height: 540px;
    margin: 50px auto;
    z-index: 10;
    position: relative;
}

/* !css3 */
#section2 .news-list {
    opacity: 0;
    margin-left: 0%;

}

body.fp-viewing-secondPage #section2 .news-list {
    opacity: 1;
    margin-left: 0%;
}

#section2 .twitter-list {
    opacity: 0;
    margin-left: 10%;
}

.twitter-link a {
    content: '';
    display: none;

    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*! position: absolute; */
    cursor: pointer;
    /*background: #555;*/
}

@media screen and (max-width:1400px) {
    .news_group {

        margin: -8% auto 0;

    }
}


@media screen and (max-width:768px) {
    .twitter-link a {

        display: block;
    }

}



body.fp-viewing-secondPage #section2 .twitter-list {
    opacity: 1;
    margin-left: 10%;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    80% {
        opacity: 1;
        transform: translateY(-50);
    }

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

@media screen and (max-width:768px) {
    .news_group {
        width: 100%;
        flex-direction: column;
        margin: -25% auto 0;

    }

    .news-list {
        width: 100%;
        margin: 30px auto 40px;
        height: 365px;
        overflow: hidden;
    }

    .twitter-frame {
        order: 1;
    }

    .twitter-frame::before,
    .news-frame::before {
        content: '';
        width: 85%;
        top: 54px;
        left: 0;
        right: 0;
        margin: auto;
        height: 72%;
    }

    .twitter-frame::after,
    .news-frame::after {
        content: '';
        height: 76%;
        width: 90%;
        top: 47px;
        left: 0;

        right: 0;
        margin: auto;
    }

    .twitter-list {

        height: 180px;

    }
}

@media screen and (max-width:480px) {
    .news_group {
        width: 100%;
        flex-direction: column;
        margin: -28% auto 0;

    }

    .news-list {
        width: 100%;
        margin: 15px auto 5px;
        height: 246px;
        overflow: hidden;
    }

    .twitter-frame {
        order: 1;
    }

    .twitter-frame::before,
    .news-frame::before {
        content: '';
        width: 85%;
        top: 44px;
        left: 0;
        right: 0;
        margin: auto;
        height: 78%;
    }

    .twitter-frame::after,
    .news-frame::after {
        content: '';
        height: 82%;
        width: 90%;
        top: 38px;
        left: 0;

        right: 0;
        margin: auto;
    }

    .twitter-list {

        height: 192px;

        margin: 20px auto;
    }
}

/*—————————————————————————————————————————————
    page3 - world
——————————————————————————————————————————————*/

.snow0 {
    position: absolute;
    top: 300px;
    left: -300px;
    z-index: 9;
    animation: fly2 10s ease 0.5s 100 both;
}

.snow {
    position: absolute;
    top: 300px;
    left: 600px;
    z-index: 11;
    animation: fly 10s ease 0s 100 both;
}

.snow2 {
    position: absolute;
    top: 0px;
    left: 500px;
    z-index: 9;
    animation: fly2 10s ease 0.8s 100 both;
}

.snow3 {
    position: absolute;
    top: 100px;
    left: -200px;
    z-index: 9;
    animation: fly 8s ease 1.5s 100 both;
}

.snow4 {
    position: absolute;
    top: 130px;
    left: 1200px;
    z-index: 11;
    animation: fly 13s ease 1.8s 100 both;
}

/*-----------------------------------------------
    fly - 蝴蝶飛
-----------------------------------------------*/

@keyframes fly {
    0% {
        opacity: 0;
        transform: translate3d(0%, 0%, 0);
    }

    30% {
        opacity: 1;
    }

    40% {
        filter: brightness(1.1);
    }

    50% {
        filter: brightness(1);
    }

    70% {
        opacity: 1;
        filter: brightness(1.1);
    }

    90% {
        opacity: 1;
        transform: translate3d(550%, 650%, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(550%, 650%, 0);
    }
}

@keyframes fly2 {
    0% {
        opacity: 0;
        transform: translate3d(-120%, -0%, 0);
    }

    10% {
        opacity: 1;
        filter: brightness(1.1);
    }

    20% {
        filter: brightness(1);
    }

    30% {
        opacity: 1;
        filter: brightness(1);
    }

    90% {
        opacity: 1;
        transform: translate3d(800%, 350%, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(800%, 350%, 0);
    }
}

.btn-comic {
    position: absolute;
    margin: auto;
    text-align: center;
    z-index: 50;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 220px;
    cursor: pointer;
    bottom: 10%;
}

@media screen and (max-width:768px) {

    .btn-comic {

        bottom: 12%;
        transform: scale(0.8);
    }
}

@media only screen and (min-device-width : 414px) and (max-device-width : 736px) {

    .btn-comic {

        bottom: 8%;
    }
}

@keyframes typing {
    from {
        width: 0;
        opacity: 1;
    }
}

h4 {
    font-family: 'Noto Sans JP', 'Roboto', Arial, sans-serif;
    font-size: 1.25rem;
    line-height: 2;
    overflow: hidden;
    white-space: nowrap;
    margin: 0;
    text-align: right;
    opacity: 1;
    width: 0;
    font-weight: 400;
}

.word1,
.word2,
.word3,
.word4,
.word5,
.word6,
.word7 {
    width: 0rem;
}

.word1_ {
    width: 35rem;
    animation: typing 0.8s steps(50);
    margin: 0 0 0 130px;
}

.word2_ {
    width: 31.5rem;
    animation: typing 0.8s steps(50) 0.8s both;
    margin: 0 0 0 179px;
}

.word3_ {
    width: 39rem;
    animation: typing 0.8s steps(50) 1.6s both;
    margin: 0 0 0 65px;
}

.word4_ {
    width: 35rem;
    animation: typing 0.6s steps(50) 2.2s both;
    margin: 0 0 0 131px;
}

.word5_ {
    width: 46.1rem;
    animation: typing 0.6s steps(50) 2.8s both;
    margin: 0 0 0 -52px;
}

.word6_ {
    width: 32.1rem;
    animation: typing 0.5s steps(50) 3.3s both;
    margin: 0 0 0 168px;
}

.word7_ {
    width: 44.65rem;
    animation: typing 0.5s steps(50) 3.8s both;
    margin: 0 0 0 -34px;
}

.world-content {
    color: #fff;

    font-weight: 600;
    text-shadow: rgba(17, 80, 164, 0.51) 2px 2px, rgba(28, 99, 162, 0.36) 1px -2px, rgba(47, 76, 121, 0.5) -3px 1px, rgba(18, 35, 66, 0.5) 0 -2px,
        rgba(22, 46, 138, 0.34) -1px 2px, rgba(35, 82, 170, 0.3) -2px 1px, rgba(52, 105, 162, 0.5) 1px 0px, rgba(20, 45, 104, 0.24) -2px 1px;
}

#section3 .world-title {
    width: 45rem;
    position: relative;
    top: -10%;
    margin-left: 45%;
    z-index: 100;
    display: block;
    transition: all 0.8s ease;
}

body.fp-viewing-secondPage #section3 .world-title {
    opacity: 1;
    margin-left: 220px;
    transition: all 0.8s ease-out;
}

/* !css3 */
#section3 .world-content {
    width: 45rem;
    position: relative;
    top: -5%;
    margin-left: 45%;
    z-index: 100;
    transition: all 0.8s ease-out;
}

body.fp-viewing-secondPage #section3 .world-content {
    opacity: 1;
    margin-left: 220px;
    transition: all 0.8s ease-out;
}

.bg_cloud {
    width: 100%;
    position: absolute;
    margin: 0 0 0 0;
    z-index: 10;
    right: 0px;
    bottom: 0;
}

#section3 .bg_leaf {
    width: 100%;
    position: absolute;
    margin: 0 0 0 0;
    z-index: 5;
    right: 0px;
    top: 0;
    /* transition: all 1000ms ease-out 1.5s; */
    opacity: 0;
}

body.fp-viewing-secondPage #section3 .bg_leaf {
    opacity: 1;
}

.bg_black_trian {
    width: 100%;
    height: auto;
    z-index: 5;
    position: absolute;
    opacity: 0.6;
    border-bottom: 900px solid #06172beb;
    border-left: 2000px solid transparent;
    bottom: 0;
}

#myVideo02,#myVideo01 {
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -960px;
    display: block;
}
#myVideo01 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 60px;
    left: 0;
    margin-left: 0;
    display: block;
}
@media screen and (max-width:1400px) {
    #myVideo02 {

        top: -150px;

    }

    #section3 .world-title {

        top: -15%;

    }

    #section3 .world-content {

        top: -10%;

    }
}


@media screen and (max-width:768px) {
    #section3 .world-title {
        width: 75%;
        top: -11%;
        margin-left: 5%;
    }

    #section3 .world-content {
        width: 85%;
        position: relative;
        top: -7%;
        z-index: 100;
        margin: 0 auto;
    }

    h6,
    .h6 {
        font-family: 'Noto Sans TC', 'Roboto', Arial, 'Microsoft JhengHei', sans-serif;
        font-size: .8rem;
        text-align: center;
        margin: 0;
        line-height: 1.6;
        letter-spacing: -0.02rem;
    }

    #myVideo01 {

    display: none;
}

}



/*-----footer ------ */
#footer {
    height: 250px !important;
}

.footer_wrap {
    width: 100%;
    height: 250px;
    background: #fff;
    padding: 0;
    font-size: 12px;
    font-family: 'Microsoft YaHei', Verdana, Geneva, sans-serif, 宋体;
    bottom: 0;
    position: relative;
    z-index: 1000;
}

.footer_wrap hr {
    margin-top: -0.5px;
}

.footer {
    width: 1050px;
    height: auto;
    margin: 70px auto;
    color: #777777;
}

.foot_icon {
    float: left;
    display: block;
    width: 7rem;
    margin: -5px 20px 0 0;
    position: relative;
}

.footer em {
    float: left;
    width: 1px;
    height: 110px;
    background-color: #a3a3a3;
    margin: 0px 20px;
}

.foot_rightbox {
    float: left;
    width: 850px;
}

.foot_middle {
    float: left;
}

.foot_middle p,
.foot_right p {
    line-height: 23px;
    font-size: 10pt;
    text-align: left;
    margin: auto;
    color: #555;
    letter-spacing: 0.05rem;
    /*! text-align: left; */
}

.foot_right p {
    font-size: 12px;
    letter-spacing: -0.03rem;
    text-align: center;
}

.foot_right {
    float: right;
    text-align: center;
    position: relative;
    width: 50%;
}

.foot_right img {
    margin: 10px 0 15px -10px;
}

.foot_right h1 {
    letter-spacing: 8px;
}

@media screen and (max-width:768px) {

    #footer {
        height: 290px !important;
    }

    .footer_wrap {
        width: 100%;
        height: 290px;
        background: #fff;
        padding: 0;
        font-size: 12px;
        font-family: 'Microsoft YaHei', Verdana, Geneva, sans-serif, \5b8b\4f53;
        bottom: 0;
        position: relative;
        z-index: 1000;
    }

    .footer_wrap hr {
        margin-top: -0.5px;
    }

    .footer {
        width: 85%;
        height: auto;
        margin: 20px auto 20px;
        color: #777777;
    }

    .foot_icon {
        float: left;
        display: block;
        width: 30%;
        margin: -9px 5px 0 0;
        position: relative;
        max-width: 130px;
    }

    .footer em {
        float: left;
        width: 95%;
        height: 1px;
        background-color: #cccccc57;
        margin: 15px auto 8px;
        text-align: center;
        left: 0;
        right: 0;
        /*! position: absolute; */
    }

    .foot_rightbox {
        float: none;
        width: 100%;
        /*! margin: -27% auto; */
    }

    .foot_middle {
        float: none;
        padding: 0 0 0 28%;
    }

    .foot_middle p {
        line-height: 1.7;
        font-size: 10pt;
        text-align: left;
        margin: auto;
        color: #555;
        letter-spacing: 0rem;
    }


    .foot_right {
        text-align: center;
        position: relative;
        width: 95%;
        margin: 0 auto 10px;
        float: none;
    }

    .foot_right img {
        margin: 10px 0 5px -10px;
    }

    .foot_right h1 {
        letter-spacing: 8px;
    }

    .foot_right p {
        font-size: 6pt;
        text-align: center;
    }
}



@media screen and (max-width:480px) {



    .footer {
        width: 93%;
        height: auto;
        margin: 20px auto 20px;
        color: #777777;
    }

    .foot_icon {
        float: left;
        display: block;
        width: 30%;
        margin: 15px 5px 0 0;
        position: relative;
        max-width: 130px;
    }

    .footer em {
        float: left;
        width: 95%;
        height: 1px;
        background-color: #a3a3a338;
        margin: 15px auto 8px;
        text-align: center;
        left: 0;
        right: 0;
        /*! position: absolute; */
    }

    .foot_middle {
        float: none;
        padding: 0 0 0 32%;
    }

    .foot_middle p {
        line-height: 1.8;
        font-size: 8pt;
        text-align: left;
        margin: auto;
        color: #555;
        letter-spacing: 0rem;
    }


    .foot_right {
        text-align: center;
        position: relative;
        width: 95%;
        margin: 0 auto 10px;
        float: none;
    }


}
/* --------------------------------

try

-------------------------------- */


    .logo-on {
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        z-index: 10;
        animation:dot_ 1.5s ease-out .5s 1 both;
        text-align: center;
        top: 30%;
    }

.cd-transition-layer{

}
    .effect-out{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
animation:out_ 2.5s ease-out 0.5s 1 both;
        z-index: 99;
        overflow: hidden;
        pointer-events: none;
        /**/



    }

    @keyframes dot_ {
        0% {
            opacity: 0;
            transform: scale(5);
            /*transform: translate3d(0, -80%, 0);*/
        }
        20% {
            opacity: 1;
            transform: scale(1);
        }
        60% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @keyframes out_ {
        0% {
            opacity: 1;

        }
        50% {
            opacity: 1;

        }
        100% {
            opacity: 0;
        }
    }
@media screen and (max-width:768px)
{
        .logo-on img{
        max-width: 80%;
    }
}




/* --------------------------------

Patterns - reusable parts of our design

-------------------------------- */
.cd-btn {
  display: inline-block;
  padding: 1.6em 2.4em;
  font-size: 1.4rem;
  letter-spacing: .15em;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  background-color: #a5c4bc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: box-shadow 0.3s;
  -moz-transition: box-shadow 0.3s;
  transition: box-shadow 0.3s;
}
.no-touch .cd-btn:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}


/* --------------------------------

Main Content

-------------------------------- */
.cd-main-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
  /* vertically align its content */
  display: table;
  background-color: #e4dcca;
}
.cd-main-content .center {
  /* vertically align inside parent element */
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

/* --------------------------------

Modal window

-------------------------------- */
.cd-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #402f44 url(../images/modal-bg.jpg) no-repeat center center;
  background-size: cover;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.cd-modal .modal-content {
  height: 100%;
  overflow-y: auto;
  padding: 3em 5%;
  color: #e4dcca;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cd-modal h1 {
  text-align: center;
}
.cd-modal h1::after {
  /* ink/brush separation */
  content: '';
  display: block;
  width: 130px;
  height: 18px;
  /*background: url(../images/ink-separation.svg) no-repeat center center;*/
  margin: .2em auto 0;
}
.cd-modal p {
  line-height: 1.6;
  margin: 2em auto;
  max-width: 800px;
}
.cd-modal .modal-close {
  /* 'X' icon */
  position: absolute;
  z-index: 1;
  top: 20px;
  right: 5%;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  /*background: rgba(0, 0, 0, 0.3) url(../images/cd-icon-close.svg) no-repeat center center;*/
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
  -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
  transition: transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
}
.no-touch .cd-modal .modal-close:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.cd-modal.visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.7s, visibility 0s;
  -moz-transition: opacity 0.7s, visibility 0s;
  transition: opacity 0.7s, visibility 0s;
}
.cd-modal.visible .modal-content {
  /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
  -webkit-overflow-scrolling: touch;
}
.cd-modal.visible .modal-close {
  visibility: visible;
  opacity: 1;
  -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
  -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
  transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
@media only screen and (min-width: 1100px) {
  .cd-modal .modal-content {
    padding: 6em 5%;
  }
  .cd-modal .modal-close {
    height: 60px;
    width: 60px;
  }
  .cd-modal p {
    font-size: 2rem;
  }
}

/* --------------------------------

Transition Layer

-------------------------------- */
.cd-transition-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  background: #fff;
}
.cd-transition-layer .bg-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-2%);
  -moz-transform: translateY(-50%) translateX(-2%);
  -ms-transform: translateY(-50%) translateX(-2%);
  -o-transform: translateY(-50%) translateX(-2%);
  transform: translateY(-50%) translateX(-2%);
  /* its dimentions will be overwritten using jQuery to proportionally fit the viewport */
  height: 100%;
  /* our sprite is composed of 25 frames */
  width: 2500%;
  background: url(../images/ink.png) no-repeat 0 0;
  background-size: 100% 100%;
}
.cd-transition-layer.visible {
  opacity: 1;
  visibility: visible;
}
.cd-transition-layer.opening .bg-layer {
  /* -webkit-animation: cd-sequence 0.8s steps(24);
  -moz-animation: cd-sequence 0.8s steps(24);
  animation: cd-sequence 0.8s steps(24); */
  -webkit-animation: cd-sequence 1s steps(24);
  -moz-animation: cd-sequence 1s steps(24);
  animation: cd-sequence 1s steps(24);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.cd-transition-layer.closing .bg-layer {
  -webkit-animation: cd-sequence-reverse 0.8s steps(24);
  -moz-animation: cd-sequence-reverse 0.8s steps(24);
  animation: cd-sequence-reverse 0.8s steps(24);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.no-cssanimations .cd-transition-layer {
  display: none;
}

@-webkit-keyframes cd-sequence {
  0% {
    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
    -webkit-transform: translateY(-50%) translateX(-2%);
  }
  100% {
    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
    -webkit-transform: translateY(-50%) translateX(-98%);
  }
}
@-moz-keyframes cd-sequence {
  0% {
    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
    -moz-transform: translateY(-50%) translateX(-2%);
  }
  100% {
    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
    -moz-transform: translateY(-50%) translateX(-98%);
  }
}
@keyframes cd-sequence {
  0% {
    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
    -webkit-transform: translateY(-50%) translateX(-2%);
    -moz-transform: translateY(-50%) translateX(-2%);
    -ms-transform: translateY(-50%) translateX(-2%);
    -o-transform: translateY(-50%) translateX(-2%);
    transform: translateY(-50%) translateX(-2%);
  }
  100% {
    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
    -webkit-transform: translateY(-50%) translateX(-98%);
    -moz-transform: translateY(-50%) translateX(-98%);
    -ms-transform: translateY(-50%) translateX(-98%);
    -o-transform: translateY(-50%) translateX(-98%);
    transform: translateY(-50%) translateX(-98%);
  }
}
@-webkit-keyframes cd-sequence-reverse {
  0% {
    -webkit-transform: translateY(-50%) translateX(-98%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-2%);
  }
}
@-moz-keyframes cd-sequence-reverse {
  0% {
    -moz-transform: translateY(-50%) translateX(-98%);
  }
  100% {
    -moz-transform: translateY(-50%) translateX(-2%);
  }
}
@keyframes cd-sequence-reverse {
  0% {
    -webkit-transform: translateY(-50%) translateX(-98%);
    -moz-transform: translateY(-50%) translateX(-98%);
    -ms-transform: translateY(-50%) translateX(-98%);
    -o-transform: translateY(-50%) translateX(-98%);
    transform: translateY(-50%) translateX(-98%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-2%);
    -moz-transform: translateY(-50%) translateX(-2%);
    -ms-transform: translateY(-50%) translateX(-2%);
    -o-transform: translateY(-50%) translateX(-2%);
    transform: translateY(-50%) translateX(-2%);
  }
}


 /*-----------------------------------------------
    ad
-----------------------------------------------*/


        @keyframes img-animation {
            from {
                background-position: 0;
            }

            to {
                background-position: -400px;
            }
        }

        @keyframes img-animation-m {
            from {
                background-position: 0;
            }

            to {
                background-position: -400px;
            }
        }

        .ad {
            position: absolute;
            z-index: 50;
            width: calc(400px / 2);
            height: 200px;
            background: url(../images/ad.png);
            animation: img-animation 2.2s steps(2) infinite;
            right: 30px;
            top: 73vh;
            cursor: pointer;
        }

        .ad a {
            width: 100%;
            height: 100%;
            display: block;
        }

        @media screen and (max-width:1440px) {
            .ad {
                transform: scale(0.8);
                top: 72%;
            }
        }

        @media screen and (max-width:768px) {
            .ad {
                transform: scale(0.8);
                top: 58vh;
            }
        }

        @media screen and (max-width:480px) {
            .ad {
                transform: scale(0.7);
                left: -7%;
                top: 32%;
            }
        }

        @media screen and (max-width:320px) {
            .ad {
                transform: scale(0.5);
                left: 51%;
                top: 54vh;
            }
        }

/* --------------------------------

2020.5.11

-------------------------------- */





        .header-video-item {
            position: absolute;
            top: 0;
            bottom: 0;
            left: -119%;
            width: 334%;
            height: 100%;
            border: 0;
            margin: 0px 0;
        }

        .force-hidden {
            position: absolute;
            width: 100%;
            padding: 0px 0 81.6% 0;
            overflow: hidden;

            background: #111022;
        }

        .force-hidden-pc {
            position: absolute;
            width: 103%;
            padding: 0 0 63% 0;

        }

        #audioBtn {
            position: absolute;
            z-index: 55;
            width: 100px;
            height: 50px;
            bottom: 5%;
            right: 5%;
            cursor: pointer;

            /*! background: url(images/mute_01.png) center top no-repeat; */

        }

        #play {
            display: none;
            position: absolute;
            width: 100px;
            height: 100px;

            /*background: url(images/icon-play.png) center top / 100px no-repeat;*/

            z-index: 10;
            top: 300px;
            left: 100px;
            cursor: pointer;
            z-index: 10;
            top: 40vh;
            left: 100px;
            cursor: pointer;
            margin: auto;
            text-align: center;
            left: 0;
            right: 0;
        }

        #pause {
            display: none;
            position: absolute;
            width: 100px;
            height: 100px;
            /*background: url(images/icon-pause.png) center top / 100px no-repeat;*/
            top: 300px;
            left: 100px;
            cursor: pointer;
            z-index: 11;
            top: 40vh;
            left: 100px;
            cursor: pointer;
            margin: auto;
            text-align: center;
            left: 0;
            right: 0;
            opacity: 30%;

        }

        @media screen and (max-width:1400px) {

            .menu-list ul {
                float: right;
                width: 72%;
            }
        }

        @media screen and (max-width:768px) {
            .menu-list ul {

                width: 100%;
            }

            .header-video {
                padding-bottom: 181.8%;
                /*16by9*/
            }

                    .force-hidden {

            padding: 5% 0 81.6% 0;

        }
        }

        @media screen and (max-width:375px)
{
                  .force-hidden {

            padding: 10% 0 81.6% 0;

        }
}