/*  index
-------------------------------------------------
    - Import
    - text
    - df-width
    - layout
-------------------------------------------------*/



/*-----------------------------------------------
     Import
-----------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,800;1,100;1,300;1,400;1,500;1,800&display=swap');



/*-----------------------------------------------
    video-header
-----------------------------------------------*/


.wrapper,
#wrapper {
    max-width: 1920px;
    overflow: hidden;
    margin: auto;
}


.video-header {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2672px;
    border: 0;


    z-index: 0;
    /*! right: 0; */
    margin: auto;
    transform: translate(-50%,0);
    /*animation:videoHeader 12s  cubic-bezier(.250, .460, .450, .940) 1.5s infinite both;*/
    animation:videoHeader 20s cubic-bezier(.250, .460, .450, .940) 1.5s infinite both;
}


@media screen and (max-width:1600px)
{
.video-header {
    transform: translate(-50%,0);
}
}
@media screen and (max-width:1400px)
{
.video-header {
    transform: translate(-53%,0);
}
}
@media screen and (max-width:1300px)
{
.video-header {
    transform: translate(-51%,0);
}
}

@media screen and (max-width:1100px)
{
.video-header {
    transform: translate(-54%,0);
}
}

@keyframes videoHeader
{
/*0%,15%{transform:translate(-42%,0);}
35%,65%{transform:translate(-58%,0);}
85%,100%{transform:translate(-42%,0);}*/
0%{transform:translate(-43%,0);}
50%{transform:translate(-55%,0);}
100%{transform:translate(-43%,0);}
}

/*-----------------------------------------------
     circle
-----------------------------------------------*/
.circle{
    position: absolute;
    width: 900px;
    height: 900px;
    top: 10%;
    left: -30%;
    z-index: 0;
}
.circle00{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/circle.png) center  / 100% no-repeat ;
    animation: turn 50s linear 0s infinite both;
}
.circle01{
    position: absolute;
    width: 35%;
    height: 35%;
    top: 77%;
    right: -32%;
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/circle01.png) center / 100% no-repeat;
    animation: turnS 20s linear 0s infinite both;
}
.circle03{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/circle03.png) center  / 100% no-repeat ;
    animation: turnS 30s linear 1s infinite both;
}


@keyframes turn
{
0%{transform:rotateZ(0deg);opacity:0.5;filter:blur(1px);}
10%{filter:blur(0px);}
20%{filter:blur(0px);opacity:0.9;}
50%{filter:blur(1px);}
70%{filter:blur(0px);opacity:0.7;}
90%{filter:blur(0px);}
100%{transform:rotateZ(360deg);filter:blur(1px);opacity:0.5;}
}

@keyframes turnS
{
0%{transform:rotateZ(300deg);opacity:0.4;filter:blur(1px);}
10%{filter:blur(0px);}
20%{filter:blur(0px);opacity:0.5;}
50%{filter:blur(0px);}
70%{filter:blur(0px);opacity:0.9;}
90%{filter:blur(0px);}
100%{transform:rotateZ(0deg);filter:blur(1px);opacity:0.4;}
}

@media screen and (max-width:1600px)
{
.circle{
    top: 10%;
    left: -35%;
    transform: scale(0.8);
}
}

/*-----------------------------------------------
     sl
-----------------------------------------------*/

.sl {
    position: absolute;
    max-width: 870px;
    height: 750px;
    top: 25vh;
    left: calc(32% - 4vw);
    z-index: 2;
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/sl.png) center top / 100% no-repeat;



    width: 100%;
    animation:slMove 20s cubic-bezier(.250, .460, .450, .940) 1.5s infinite both;
}


@keyframes slMove
{
0%{transform:translate(17%,0);}
50%{transform:translate(-5%,0);}
100%{transform:translate(17%,0);}
}

@keyframes slMove-m
{
0%{transform:translate(0%,0);}
100%{transform:translate(0%,0);}
}
.sl-l,.sl-t,.sl-r,.sl-b{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.sl-l{
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/sl-l.png) 0 top /100% no-repeat ;
    animation:slL 5s ease-out  0s infinite both;

}
.sl-t{
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/sl-t.png) 0 top /100% no-repeat ;
    animation:slT 5s ease-out  0s infinite both;

}
.sl-r{
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/sl-r.png) 0 top /100% no-repeat ;
    animation:slR 5s ease-out  0s infinite both;

}
.sl-b{
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/sl-b.png) 0 top /100% no-repeat ;
    animation:slB 5s ease-out  0s infinite both;

}

.sl span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.sl span:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/sl-light01.png) center top / 100% no-repeat ;
    z-index: 10;
    animation:lighten 4s cubic-bezier(.250, .460, .450, .940)  0s infinite both;
}

.sl span:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/sl-light02.png) center top / 100% no-repeat ;
     animation:lighten 4s cubic-bezier(.250, .460, .450, .940)  1.2s infinite both;
    z-index: 9;
}


@keyframes lighten
{
0%,30%{filter:brightness(1)  blur(1px); opacity:0;}
40%,60%{filter:brightness(2)   blur(0px); opacity:1;}
70%,100%{filter:brightness(1)  blur(1px) ; opacity:0;}
}



@keyframes slL
{
0%{clip-path: polygon(0 100%, 100% 100%, 100% 0); opacity:0;   }
25%{clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);opacity:1;  }
50%{clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); opacity:1; }
75%{clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); opacity:0; }
100%{clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); opacity:0; }
}
@keyframes slT
{
0%{clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);  opacity:0;  }
25%{clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);opacity:0;   }
50%{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);opacity:1;   }
75%{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);opacity:1;   }
100%{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity:0;  }
}
@keyframes slR
{
0%{clip-path: polygon(0 0, 0% 100%, 100% 0);  opacity:0;  }
25%{clip-path: polygon(0 0, 0% 100%, 100% 0);opacity:0;   }
50%{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);opacity:1;   }
75%{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);opacity:1;   }
100%{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity:0;  }
}
@keyframes slB
{
0%{clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);  opacity:0;  }

75%{clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);opacity:0;   }
90%{clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);opacity:1;   }
100%{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity:0;  }
}

@keyframes sl
{
0%{width: 0;    }
100%{width: 100%;  }
}




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

    left: calc(30% - 6vw);

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

    left: calc(30% - 7vw);

    top: 40vh;
}
}
@media screen and (max-width:1200px)
{
.sl {

    left: calc(30% - 100px);

}
}

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

    left: 0;

    right: 0;
    margin: auto;
    top: 28%;
    height: 0;
    padding: 0 0 100% 0;
    animation:slMove-m 0s cubic-bezier(.250, .460, .450, .940) 0s 1 both;
}
}

@media screen and (max-width:376px)
{
.sl {

    top: 23%;

}
}

/*-----------------------------------------------
     join
-----------------------------------------------*/

.top-join{
     display: none;
}


.join{
    position: absolute;
    width: 250px;
    height: 120px;
    right: 10%;
    top: 76%;
    /*background: #5bc0de;*/
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/btn-bg.png) center top / 100% no-repeat ;
    z-index: 10;
    animation:zoomBg 3s cubic-bezier(.250, .460, .450, .940)  0s infinite both;

}
.join:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
     background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/btn.png) center top / 100% no-repeat ;
animation:zoom 4s cubic-bezier(.250, .460, .450, .940)  0s infinite both;

}


@keyframes zoomBg
{
0%{filter:brightness(1) blur(0px); opacity:1;}
25%{filter:brightness(1.15) blur(0px); opacity:1;}
50%{filter:brightness(1)  blur(0px); opacity:1;}
75%{filter:brightness(0.8)  blur(0px); opacity:1;}
100%{filter:brightness(1)  blur(0px); opacity:1;}
}

@keyframes zoom
{
0%{filter:brightness(1) blur(0px); opacity:1;transform: scale(1);}
40%{filter:brightness(1.2)  blur(3px); opacity:0;transform: scale(1.3);}
100%{filter:brightness(1)  blur(0px); opacity:0;transform: scale(1);}
}


@media screen and (max-width:768px)
{
.join{
    width: 40%;
    height: 100px;
    top: 64%;


}

.top-join{
    display: block;
    right: 15px;
    width: 35%;
    height: 60px;
    top: 2%;
     background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/top-btn.png) center top / 100% no-repeat;
    position: absolute;
    max-width: 150px;
}


}

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

    top: 10%;


}
}

/*-----------------------------------------------
     logo
-----------------------------------------------*/
.logo{
    position: absolute;
    top: 7%;
    left: -10%;
    width: 27%;
    height: 200px;
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/logo.png) center top / 100% no-repeat ;


    max-width: 300px;
    right: 0;
    margin: auto;
}
.logo:before{
    content: '';
    position: absolute;
    top: -10%;
    left: -4px;
    width: 100%;
    height: 100%;
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/logo_text.png) center top / 100% no-repeat ;


    margin: auto;
}
@media screen and (min-width:1921px) {
.logo{
    top: 0%;

}
}

@media screen and (max-width:768px)
{
.logo{
    opacity:0;
}
}

/*-----------------------------------------------
     text
-----------------------------------------------*/

h3,
h2 {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 500;
    margin: 0;
    border-bottom: 3px solid #393737;
    width: 100%;
    position: relative;
    margin: 0 0 2% 0;
    transition: all .3s ease;
    letter-spacing: 0.05rem;
}

h2:after,
h3:after {
    content: '';
    width: 45px;
    height: 3px;
    background: #9da082;
    background: rgb(155, 188, 211);
    position: absolute;
    bottom: -3px;
    left: 0;
    transition: all .3s ease;

    background: rgb(93, 98, 101);
}

/*h2:hover{
     color: #f81b47;
    border-bottom: 1px solid #f81b47;
    transition: all .3s ease;
}*/
h2:hover:after {
    content: '';
    width: 80px;
    transition: all .3s ease;
    background:rgb(234, 244, 180);
}

h2 span,
h3 span {
    margin: 0% 0 0% 8px;
    color: #888;
}

h2:hover span {
    color:rgb(234, 244, 180);
    transition: all .3s ease;
}


h3 {
    color: #fff;
    border-bottom: 3px solid #444;
    line-height: 1.8;
}

h3:after {
    background: #f74f6f;
}
h3:hover:after {
    content: '';
    width: 80px;
    transition: all .3s ease;
}
h3 span {
    color: #555;

}

.h2 {
    margin: 10% 0 3% 0;
}


p {
    font-weight: 400;
    color: #fff;
    padding: 4% 0 0 0;
/*text-shadow:  0px 0px 3px #555,1px 1px 2px #555;*/

    line-height: 2.5;
}

.pre-text {
    margin: 0 0 8% 0;
    /*! color: #bfbfbf; */
    line-height: 1.8;
    font-size: 1.05rem;
    /*color: #f8feb8;*/
    color: rgb(234, 244, 180);
}
.ps-text {
    margin: 0% 0 0% 0;
    font-size: 0.95rem;
    line-height: 1.8;
    letter-spacing: 0.02rem;
    color: #dbdbdb;
}


.pre-text-agree {
    margin: 2% 0 8% 0;
    font-size: 0.95rem;
    line-height: 1.8;
    letter-spacing: 0.02rem;
    color: #dbdbdb;
}

h5 {
    font-size: 0.95rem;
    color: #fff;
}

.red {
    cursor: pointer;
    color: #f74c6c;
    display: initial;
    /*! overflow: hidden; */
    position: relative;
}
.red:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    left: 0;
    background:#f74c6c;;

}
.apply-choice {
    margin: 4% 0 0 10px;
    position: relative;
}



@media screen and (min-width:1921px) {
    .pre-text-agree {
        margin: 4% 0 59px 0;
    }
    .pre-text {
    margin: 0 0 13% 0;
}
}
@media screen and (max-width:1600px)
{
    h1,
    h2 {
        font-size: 1.4rem;
    }
    .pre-text,p{
        font-size: 0.95rem;
    }
}
@media screen and (max-width:1400px)
{
    h1,
    h2 {
        font-size: 1.3rem;
    }
    .pre-text,p{
        font-size: 0.9rem;
    }

    .pre-text-agree {
    font-size: 0.8rem;
    margin: 8% 0 8% 0;
}
}
@media screen and (max-width:768px) {

    h1,
    h2 {
        font-size: 1.4rem;
    }
        .pre-text{
        font-size: 0.95rem;
        color: #f8feb8;
        margin: 0 0 10% 0;
    }
    .apply-choice {
    margin: 7% 0 0 10px;
}
.note-list p {
text-shadow:  0px 0px 3px #555,1px 1px 2px #555;

}

}





/*-----------------------------------------------
    df-width
-----------------------------------------------*/

.df-width {
    height: 100%;
    position: relative;
    margin: auto;
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;
    max-width: 1400px;
    z-index: 1;
}





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

        max-width: 1400px;
    }
}

/*  layout
-------------------------------------------------
    - html,body
    - main
    - section
    - header
    - footer
-------------------------------------------------*/

html,
body {
    /*background:#fff;*/
}


/*-----------------------------------------------
    main
-----------------------------------------------*/
main {
    overflow: hidden;
    max-width: 1920px;
    margin: auto;
    animation: blur .8s ease-out 0s 1 both;
    background: rgb(0, 0, 0);

    /*margin-top: -13%;*/
}

/*.margin-top{
    margin-top: -13%;
    transition: all .8s ease;
}
.margin-top-back{
    margin-top: 0%;
}*/
section {
    flex: 1;
    width: 100%;
    text-align: justify;
    display: block;
    color: #fff;
    width: 100%;
    text-align: justify;
    overflow: hidden;
}

@media screen and (max-width:768px)
{
main {
    background: #181b20;
    background: rgb(22, 25, 30);


}
}



/*-----------------------------------------------
    header
-----------------------------------------------*/
header {
    /*position: absolute;*/
    width: 1920px;
    /*! height: 0; */
    top: 0;
    left: 0;
    transform: scale(1);
    z-index: 10;
    max-width: 1920px;
    /*! padding: 0 0 55% 0; */
    overflow: hidden;
}


@media screen and (max-width:1800px) {
    header {
        transform: scale(calc(1800/1920));
        left: calc((1800px - 1920px)/2);
        top: calc((1080px*(1800/1920) - 1080px)/2);
        margin-bottom: calc((1080px*(1800/1920) - 1080px));
        /*transform:scale( calc(目前寬度/原始寬度) ) ;*/
        /*left:calc((目前寬度px - 原始寬度px )/2) ;*/
        /*top:calc((原始高度px*(目前寬度/原始寬度) - 原始高度px )/2) ;*/

    }
}

@media screen and (max-width:1700px) {
    header {
        transform: scale(calc(1700/1920));
        left: calc((1700px - 1920px)/2);
        top: calc((1080px*(1700/1920) - 1080px)/2);
        margin-bottom: calc((1080px*(1700/1920) - 1080px));
    }
}

@media screen and (max-width:1600px) {
    header {
        transform: scale(calc(1600/1920));
        left: calc((1600px - 1920px)/2);
        top: calc((1080px*(1600/1920) - 1080px)/2);
        margin-bottom: calc((1080px*(1600/1920) - 1080px));
    }
}

@media screen and (max-width:1500px) {
    header {
        transform: scale(calc(1500/1920));
        left: calc((1500px - 1920px)/2);
        top: calc((1080px*(1500/1920) - 1080px)/2);
        margin-bottom: calc((1080px*(1500/1920) - 1080px));
    }
}

@media screen and (max-width:1400px) {
    header {
        transform: scale(calc(1400/1920));
        left: calc((1400px - 1920px)/2);
        top: calc((1080px*(1400/1920) - 1080px)/2);
        margin-bottom: calc((1080px*(1400/1920) - 1080px));
    }
}

@media screen and (max-width:1300px) {
    header {
        transform: scale(calc(1300/1920));
        left: calc((1300px - 1920px)/2);
        top: calc((1080px*(1300/1920) - 1080px)/2);
        margin-bottom: calc((1080px*(1300/1920) - 1080px));
    }
}
@media screen and (max-width:1200px) {
    header {
        transform: scale(calc(1200/1920));
        left: calc((1200px - 1920px)/2);
        top: calc((1080px*(1200/1920) - 1080px)/2);
        margin-bottom: calc((1080px*(1200/1920) - 1080px));
    }
}
@media screen and (max-width:1100px) {
    header {
        transform: scale(calc(1100/1920));
        left: calc((1100px - 1920px)/2);
        top: calc((1080px*(1100/1920) - 1080px)/2);
        margin-bottom: calc((1080px*(1100/1920) - 1080px));
    }
}
@media screen and (max-width:960px) {
    header {
        transform: scale(calc(960/1920));
        left: calc((960px - 1920px)/2);
        top: calc((1080px*(960/1920) - 1080px)/2);
        margin-bottom: calc((1080px*(960/1920) - 1080px));
    }
}


@media screen and (max-width:768px) {
    header {
        background: transparent;

        width: 100%;
        max-width: 768px;
        left: 0;
        right: 0;
        transform: initial;
        top: 0;
        padding: 0 0 160% 0;
        height: 0;
        /*background: #5bc0de;*/
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/mobile_01.jpg) center top / 100% no-repeat ;

        margin-bottom: 0;
    }
}


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

        padding: 0 0 159% 0;

    }
}
@media screen and (max-width:376px)
{
    header {

        padding: 0 0 158% 0;

    }
}
/*-----------------------------------------------
    info
-----------------------------------------------*/
.info {
    /*! background: #ffffffb3; */
    padding: 0px 45px;
    margin: -2% 3% 0 0;
}
@media screen and (max-width:1800px)
{

.info {
    padding: 0px 45px;
    margin: -1% 3% 0 0;
}
}

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

.info {
    margin: 2% 3% 0 0;
}
}

@media screen and (max-width:768px) {
    .info {
        padding: 0px 10px 30PX;
        margin: 0 3% 0 0;
    }
}

/*-----------------------------------------------
    apply
-----------------------------------------------*/
.apply {
    padding: 0px 45px 70px;
    transition: all .3s ease;
}

.apply:hover,.add-hover {
    background: rgba(54, 54, 62, 0.26);
    transition: all .3s ease;
    border-radius: 5px;
}

@media screen and (max-width:768px) {
    .apply {
        background: rgba(25, 26, 28, 0.89);
        padding: 0px 25px 20px;
        border-radius: 5px;
        background: #262a333d;
    }
    .apply:hover {
   background: #22272f;
}
}
/*-----------------------------------------------
    man-m
-----------------------------------------------*/
.man-m{
    background:transparent;
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/bg.jpg) center bottom / 100% no-repeat ;


}



@media screen and (max-width:768px)
{
.man-m{
        /*background: #5bc0de;*/
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/mobile_02.jpg) center 100% / 100% no-repeat;
}

}


/*-----------------------------------------------
    footer
-----------------------------------------------*/


footer {
    margin: 0 auto 0;
    width: 100%;
    height: 170px;
    text-align: center;
    background: #eae9e9 url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/cp.png) center 60% /600px no-repeat;
}

/* mobile-layout
-----------------------------------------------
    mobile
-----------------------------------------------*/


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

    html,
    body {
        /*background: #fff url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/mobile_01.jpg) no-repeat center top / 100%;*/
    }



    .header-left {
        width: 100%;
        height: 50%;
        transform: scale(0.8);

        top: 56%;
        left: 0;
    }

    .content {
        flex-direction: column;
        min-height: 800px;
        margin: 0 auto 50px;
    }

    main {
        /*! background: #fff; */
    }

    footer {
        /*! height: 100px; */
        background: #f0f0f0 url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/cp-m.png) center 50% /240px no-repeat;
        height: 150px;
    }
}


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

    .header-left {
        width: 100%;
        height: 400px;
        transform: scale(0.8);

        top: 53%;
        left: 0;
    }
}

/*-----------------------------------------------
    opening
-----------------------------------------------*/

@keyframes blur {
    0% {
        opacity: 0;
        filter: blur(15px);
    }

    100% {
        opacity: 1;
        filter: blur(0px);
    }
}






/* -------------------------------------------------
    view-wrap
-------------------------------------------------*/


/*.view {
    overflow: hidden;
    width: 100%;
    position: relative;
    height: 1080px;
}*/

.view {
    overflow: hidden;
    width: 100%;
    position: relative;
    height: 1080px;
    /*! padding: 0 0 140% 0; */
}




.inner {
    /*! background: #ac9870; */
/*  width: 2673px;
    height: 1080px;*/
   /*   background: #5bc0de;
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/header.jpg) center top / 100% no-repeat ;*/

}

.inner img {
    /*max-width: none;*/
}

#scroll .view {
    overflow: scroll;
}





.content {
    display: flex;

    margin: 0% auto 10%;
}

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



.content {
    display: flex;

    margin: 5% auto 76%;
}
}


/* -------------------------------------------------
    guide-group-m
-------------------------------------------------*/
/*@media screen and (max-width:768px) {

    .guide-group-m {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 10;
        margin: auto;
        left: 0;
        bottom: 0%;
    }

    .view-m {

        overflow: hidden;
        width: calc(100% *1.9);
        transform: translate(-25%, 0) scale(0.6);
        position: relative;
        left: 0%;
        top: 0;
    }

    .map-img-box {
        position: absolute;
        width: calc(1916px *0.75);
        z-index: 10;
        top: 5%;
        left: 282px;
        margin: auto;
    }


    .inner-m img {
        max-width: none;
    }

    #scroll .view-m {
        overflow: scroll;
    }

}

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

    .view-m {
        width: calc(100% *1.9);
        transform: translate(-25%, -12%) scale(0.6);
    }



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

    .view-m {
        transform: translate(-25%, -16%) scale(0.6);
    }


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

    .view-m {
        transform: translate(-25%, -16%) scale(0.5);
    }


}
*/



/*-----------------------------------------------
    df-input
-----------------------------------------------*/

.question {
    position: absolute;
    left: 24%;
    top: 50%;
    color: #fff;
    border-right: 1px solid #c5ddec;
    width: 136px;
    height: 50px;
    line-height: 50px;
    transform: translate(0, -50%);
}

input[type='checkbox'] {
    display: none;
}

input[type='checkbox']+label {
    color: #fff;

}

input[type='checkbox']+label span {
    display: inline-block;
    margin: -2px 10px 0 0;
    width: 19px;
    height: 19px;
    cursor: pointer;
    vertical-align: middle;
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/check_radio_sheet.png) left top /80px no-repeat;
}

input[type='checkbox']:checked+label span {
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/check_radio_sheet.png) -20px top /80px no-repeat;
}

input[type='radio'] {
    display: none;
}

input[type='radio']+label {
    margin-right: 90px;
    color: #fff;

}

input[type='radio']+label span {
    position: relative;
    display: inline-block;
    margin: -2px 10px 0 0;
    width: 19px;
    height: 19px;
    cursor: pointer;
    vertical-align: middle;
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/check_radio_sheet.png) -40px top /80px no-repeat;
}


input[type='radio']:checked+label span {
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/check_radio_sheet.png) -60px top /80px no-repeat;
}

input.df-form,
select.df-form {
    /*transition: border linear .2s, box-shadow linear .5s;*/
    /*transition: border linear .2s, box-shadow linear .5s;*/
    outline: none;
    /*! border-color: rgba(255, 255, 255, 0.75); */
    /*! box-shadow: inset -5px -3px 4px rgb(236, 237, 238); */
    /*animation:input_ 2s ease-out 0s infinite both;*/


    border-radius: 25px;
    border: 0px;
    padding: 1px 25px;
    font-size: 0.85rem;
    background: black;
    max-width: 350px;
    margin: 0;
    color: #f74c6c;
    /*! background: linear-gradient(135deg, rgb(214, 220, 161) 0%, rgb(187, 192, 142) 100%); */
/*    background: rgb(43, 43, 43);
    background: -moz-linear-gradient(-45deg, rgba(43, 43, 43, 1) 0%, rgba(40, 40, 40, 1) 100%, rgba(19, 19, 19, 1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(43, 43, 43, 1) 0%, rgba(40, 40, 40, 1) 100%, rgba(19, 19, 19, 1) 100%);
    background: linear-gradient(135deg, rgba(43, 43, 43, 1) 0%, rgba(40, 40, 40, 1) 100%, rgba(19, 19, 19, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2b2b2b', endColorstr='#131313', GradientType=1);*/


    background: #fff;
}

.list-choice ::placeholder {
    /* CSS 3 標準 */
    font-size: 0.85rem;
    text-align: left;
    letter-spacing: -0.01rem;
    color: #f71644;
    /*color: #f74c6c;*/
    padding: 1px 25px;

}



::-webkit-input-placeholder { /* Chrome, Safari */

      font-size: 0.85rem;
    text-align: left;
    letter-spacing: -0.01rem;
    color:  #f71644;
    padding: 1px 25px;

}

:-ms-input-placeholder { /* IE 10+ */

      font-size: 0.85rem;
    text-align: left;
    letter-spacing: -0.01rem;
    color:  #f71644;
    padding: 1px 25px;

}

::-moz-placeholder { /* Firefox 19+ */

      font-size: 0.85rem;
    text-align: left;
    letter-spacing: -0.01rem;
    color: #f71644;
    padding: 1px 25px;

}



/*focus shadow*/
input[type=text]:focus,
input[type=password]:focus,
textarea:focus {

    /*transition: border linear .2s, box-shadow linear .5s;*/
    /*transition: border linear .2s, box-shadow linear .5s;*/
    outline: none;
    border-color: rgba(255, 255, 255, 0.75);
    /*box-shadow: 0 0 8px rgb(255, 255, 255);*/
    animation: input_ .5s ease-out 0s 1 both;


    border-radius: 25px;
    /*border: 1px;*/
    padding: 1px 25px;
    /*background: #f81846;*/
    /*background: linear-gradient(135deg, rgba(247, 91, 120, 1) 0%, rgba(248, 27, 71, 1) 100%);*/
    background: rgb(43, 43, 43);
    background: -moz-linear-gradient(-45deg, rgba(43, 43, 43, 1) 0%, rgba(40, 40, 40, 1) 100%, rgba(19, 19, 19, 1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(43, 43, 43, 1) 0%, rgba(40, 40, 40, 1) 100%, rgba(19, 19, 19, 1) 100%);
    background: linear-gradient(135deg, rgba(43, 43, 43, 1) 0%, rgba(40, 40, 40, 1) 100%, rgba(19, 19, 19, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2b2b2b', endColorstr='#131313', GradientType=1);
    color: #000;
    /*font-size: 0.85rem;*/
}

input.df-form:focus,
select.df-form:focus {
    box-shadow: none;
    opacity: 1;
    color: #f74c6c;
}

@keyframes input_ {

    0% {
        background: #fff;
        /*box-shadow: 0 0 6px rgb(40, 111, 167);*/
        /*border: 1px;*/
        /* opacity:0;
        width: 0;*/
    }

    100% {
        /*box-shadow: 0 0 2px rgb(36, 106, 158), inset 0 0 2px rgb(41, 103, 152);*/
        /*border: 2px;*/
        /*background: linear-gradient(135deg, rgba(247, 91, 120, 1) 0%, rgba(248, 27, 71, 1) 100%);*/
        background: rgb(43, 43, 43);
    background: -moz-linear-gradient(-45deg, rgba(43, 43, 43, 1) 0%, rgba(40, 40, 40, 1) 100%, rgba(19, 19, 19, 1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(43, 43, 43, 1) 0%, rgba(40, 40, 40, 1) 100%, rgba(19, 19, 19, 1) 100%);
    background: linear-gradient(135deg, rgba(43, 43, 43, 1) 0%, rgba(40, 40, 40, 1) 100%, rgba(19, 19, 19, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2b2b2b', endColorstr='#131313', GradientType=1);
        background: #fff;
        box-shadow: inset -2px -2px 5px rgba(0, 0, 0, .5);
    }
}

.input_ {
    animation: input_ .5s ease-out 0s 1 both;
}


/*input::-webkit-input-placeholder {
    color: #fff;
}

input::-moz-placeholder {
    color: #f74c6c;
    opacity: 1;
}
*/
.down_bg {
    cursor: pointer;
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/down_bg.png) 98% center no-repeat;
    /*隱藏預設的下拉圖示*/
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    text-align: center;
    color: #ff233f;
}

/*清除ie的默認選擇框樣式清除，隱藏下拉箭頭*/
select::-ms-expand {
    display: none;
}

/*option樣式的簡單清除*/
option::-ms-expand {
    display: none;
}

option {
    -moz-appearance: none;
    /* Firefox */
    -webkit-appearance: none;
    /* Safari 和 Chrome */
    appearance: none;
}

/*背景色字體顏色*/
option:hover {
    color: #fff;
    background-color: #1E90FF;
}

@media screen and (max-width:1200px) {
    .question {
        left: 14%;

    }


}




@media screen and (max-width:768px) {
    .df-form {
        font-size: 1rem;
        width: 93%;
        padding: 3px;
        max-width: 375px;
        height: 35px;
    }

    input[type='checkbox']+label {
        font-size: 0.8rem;

    }

    input::-moz-placeholder,
    input::-webkit-input-placeholder {
         color: #f71644;
        opacity: 1;
        font-size: 0.8rem;
    }

    .question {
        position: absolute;
        left: 0;
        top: 27%;
        color: #fbfbfb;
        border-right: 0px solid #c5ddec;
        width: 147px;
        height: 25px;
        line-height: 25px;
        /*! transform: translate(0,-50%); */
        right: 0;
        text-align: center;
        margin: auto;
        font-size: 0.8rem;
        background: #2d4a6a;
        border-radius: 50px;
    }

    input.df-form,
    select.df-form,
    input[type=text]:focus,
input[type=password]:focus,input.df-form:focus,
select.df-form:focus
{
        width: 90%;
        padding: 1px 1px;
        font-size: 0.8rem;
    }

    .list-choice ::placeholder {
        /* CSS 3 標準 */

        font-size: 0.8rem;
        letter-spacing: -0.02rem;
        color: #f71644;

    }
}

@media screen and (max-width:480px) {
    input::-moz-placeholder {
        color: #f71644;
        opacity: 1;
        font-size: 0.8rem;
    }

    input::-webkit-input-placeholder {
        color: #f71644;
        opacity: 1;
        font-size: 0.8rem;
    }

    input[type='radio']+label {
        margin-right: 20px;
         color: #fff;
    }
}


/*-----------------------------------------------
    button
-----------------------------------------------*/
/*button {
    top: 50%;
    left: 50%;
    margin: 20px auto;
    min-width: 80px;
    min-height: 30px;
    border: 1px solid #000;
    border-radius: 30px;
    transform: translate(-50%, -50%);
}*/
.go-note {
    position: absolute;
    width: 155px;
    height: 100%;
    /*! background: #555555ad; */
    z-index: 10;
    left: 16%;
    top: 0;
    cursor: pointer;
}

.btn-go {
    margin: auto;
    padding: 0;
    counter-increment: itemcounter;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    top: 70%;
    left: 0;
    right: 0;
    max-width: 300px;
}

.btn-news {
    margin: auto;
    padding: 0;
    counter-increment: itemcounter;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    top: 81%;
    left: 0;
    right: 0;
    max-width: 300px;
}

.btn-apply {
    margin: 35px 0 0 20px;
    padding: 0;
    counter-increment: itemcounter;
    display: flex;
    flex-direction: column;
    /*! align-items: center; */
    justify-content: center;
    position: relative;
    z-index: 1;
    pointer-events: none;
    /*! top: 0; */
    /*! left: 0; */
    max-width: 300px;
}

.button {
    pointer-events: auto;
    cursor: pointer;
    background: #e7e7e7;
    border: none;
    padding: 1rem 3rem;
    margin: 0;
    font-size: inherit;
    position: relative;
    display: inline-block;
    min-width: 270px;
    /*! max-width: 382px; */
}

button a {
    margin: 0;
    padding: 0;
    line-height: inherit;
}

.button::before,
.button::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.button--bestia {
    /*font-size: 1.15rem;*/
    /*! color: #fff; */
    background: none;
    padding: 0;
}

.button--bestia .button__bg {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    /*background: #f81b47;*/
    background: rgb(247, 91, 120);
    background: -moz-linear-gradient(-45deg, rgba(247, 91, 120, 1) 0%, rgba(248, 27, 71, 1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(247, 91, 120, 1) 0%, rgba(248, 27, 71, 1) 100%);
    background: linear-gradient(135deg, rgba(247, 91, 120, 1) 0%, rgba(248, 27, 71, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f75b78', endColorstr='#f81b47', GradientType=1);

    border-radius: 0.85rem;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
    border-radius: 50px;
}

.button--bestia .button__bg2 {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: green;

    border-radius: 0.85rem;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
    border-radius: 50px;
    background: rgb(43, 43, 43);
    background: -moz-linear-gradient(-45deg, rgba(43, 43, 43, 1) 0%, rgba(40, 40, 40, 1) 100%, rgba(19, 19, 19, 1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(43, 43, 43, 1) 0%, rgba(40, 40, 40, 1) 100%, rgba(19, 19, 19, 1) 100%);
    background: linear-gradient(135deg, rgba(43, 43, 43, 1) 0%, rgba(40, 40, 40, 1) 100%, rgba(19, 19, 19, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2b2b2b', endColorstr='#131313', GradientType=1);
}

.button--bestia:hover .button__bg,
.button--bestia:hover .button__bg2 {
    transform: scale3d(1.1, 1, 1);
}

.button--bestia .button__bg::before,
.button--bestia .button__bg::after,
.button--bestia .button__bg2::before,
.button--bestia .button__bg2::after {
    content: '';
    position: absolute;
    /*background: #000;*/
    background: rgb(43, 43, 43);
    background: -moz-linear-gradient(-45deg, rgb(43, 43, 43) 0%, rgb(40, 40, 40) 100%, rgb(19, 19, 19) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(43, 43, 43, 1) 0%, rgba(40, 40, 40, 1) 100%, rgba(19, 19, 19, 1) 100%);
    background: linear-gradient(135deg, rgb(213, 60, 90) 0%, rgb(234, 70, 104) 100%, rgb(232, 76, 128) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2b2b2b', endColorstr='#131313', GradientType=1);
    filter: blur(1px);
}



.button--bestia .button__bg::before,
.button--bestia .button__bg2::before {
    width: 110%;
    height: 0;
    padding-bottom: 110%;
    top: 50%;
    left: 50%;
    border-radius: 50px;
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1);
}

.button--bestia:hover .button__bg::before,
.button--bestia:hover .button__bg2::before {
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
    transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
}

.button--bestia .button__bg::after,
.button--bestia .button__bg2::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s;
}

.button--bestia:hover .button__bg::after,
.button--bestia:hover .button__bg2::after {
    opacity: 1;
    transition-duration: 0.01s;
    transition-delay: 0.3s;
    filter: blur(0px);
}

.button--bestia span {
    display: block;
    position: relative;
    padding: 0.7rem 4rem;
    /*! mix-blend-mode: difference; */
    color: #fff;
    font-size: 1.6rem;
    letter-spacing: 0rem;
    transition: all .3s ease;
}

.button--bestia:hover span {
    letter-spacing: 0.3rem;
    padding: 0.7rem 3.5rem;
    transition: all .3s ease;
}




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

    .btn-go {

        top: 62%;

    }

    .btn-news {

        top: 73%;

    }
}

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

    .btn-go {

        top: 80%;

    }

    .btn-news {

        top: 93%;

    }
}



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

    .btn-go {

        top: 78%;

    }

    .btn-apply {
        margin: 20px auto 10px;
        padding: 0;
        counter-increment: itemcounter;
        top: 0;
        left: -6%;
        right: 0;
        text-align: center;
        transform: scale(0.8);
    }

}

/*-----------------------------------------------
    list
-----------------------------------------------*/


ol {
    padding: 0 0 0 15px;
}


.note-list {
    margin: 5% auto;
    width: 100%;
    height: 90%;
    max-width: 980px;
    overflow: hidden;
    /*! padding: 25px 30px 5px 15px; */
    color: #fff;
    line-height: 1.8;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*! display: block; */
    position: relative;
}




.note-list ol li {
    line-height: 2.33;
    list-style: none;
    font-size: 0.85rem;
    padding: 0 0 0 20px;
    letter-spacing: 0.03rem;
}


.note-list ol li:before {
    content: ' ';
    line-height: 1;
    list-style: none;
    font-size: 0.8rem;
    margin: 0 8px 0 -22px;
    color: #f74f6f;
    font-family: 'Microsoft JhengHei', serif;
    font-weight: 600;
}


.note-list ol li:nth-child(1):before {
    content: '01';
}

.note-list ol li:nth-child(2):before {
    content: '02';
}

.note-list ol li:nth-child(3):before {
    content: '03';
}

.note-list ol li:nth-child(4):before {
    content: '04';
}

.note-list ol li:nth-child(5):before {
    content: '05';
}

.note-list ol li:nth-child(6):before {
    content: '06';
}

.note-list ol li:nth-child(7):before {
    content: '07';
}

.note-list ol li:nth-child(8):before {
    content: '08';
}

.note-list ol li:nth-child(9):before {
    content: '09';
}

.note-list ol li:nth-child(10):before {
    content: '10';
}

.note-list ol li:nth-child(11):before {
    content: '11';
}

.note-list ol li:nth-child(12):before {
    content: '12';
}

.note-list ol li:nth-child(13):before {
    content: '13';
}

.note-list ol li:nth-child(14):before {
    content: '14';
}

.note-list ol li:nth-child(15):before {
    content: '15';
}

.note-list ol li:nth-child(16):before {
    content: '16';
}

.note-list ol li:nth-child(17):before {
    content: '17';
}

.note-list ol li:nth-child(18):before {
    content: '18';
}

.note-list ol li:nth-child(19):before {
    content: '19';
}

.note-list ol li:nth-child(20):before {
    content: '20';
}

.note-list ol li:nth-child(21):before {
    content: '21';
}

/*.note-list ol li:nth-child(20):before {content: '20';}*/


.note-list ol li p {
    line-height: 2.2;
    font-size: 0.9rem;
    transition: all .3s ease;
    letter-spacing: 0.015rem;
}


.other_ {
    margin: 70px auto;
}


.note-list ol.other_>li:before {
    content: ' ';
    line-height: 1;
    list-style: none;
    font-size: .9rem;
    margin: 0px 14px 0 -19px;
    width: 5px;
    height: 5px;
    background: #f74f6f;
    display: inline-block;
    border-radius: 50%;
}

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

        height: 70%;

        /*! margin: 10% auto; */
    }

}

@media screen and (max-width:1280px) {
    .note-list {

        height: 59%;

        /*! margin: 22% auto; */
    }

}

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

    .note-list ol li,
    h5 ol li {
        line-height: 1.8;
        list-style: none;
        font-size: 0.9rem;
        padding: 0 0 0 18px;
        letter-spacing: 0.01rem;
    }

    .note-list {
        margin: 0 auto 0;
        max-height: 460px;
        height: 81vh;
        padding: 25px 0px 10px 10px;
        top: 42%;
    }
}




/*-----------------------------------------------
    opening
-----------------------------------------------*/




.opening {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 103;
    background:#000;
    /*animation:opening_ 3.4s ease-out 0s 1 both;*/

}

@keyframes opening_
{
 0%,90% {
            display: block;
             z-index: 103;
             pointer-events: auto;
  }


    100% {
        display: none;
         z-index: -10;
         pointer-events: none;

  }
}



html,body{
    animation:barHide 3.4s ease 0s 1 both;
}

.logo-effect{
    position: absolute;
    width: 600px;
    height: 600px;
    /*background:red;*/
    left: 0;
    right: 0;
    margin: auto;
    top: 15%;
    animation:loading 5.5s ease-out 0s 1 both;

}

.logo_{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    max-width: 500px;
    right: 0;
    margin: auto;
}

.logo-top{
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/loading/logo-top.png) center top / 100% no-repeat ;z-index: 0;
    animation:logoTop 3s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0s 1 both;}
.logo-side{    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/loading/logo-side.png) center top / 100% no-repeat ;z-index: 0;
        animation:logoSide 1.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.2s 1 both; }

.logo-down{    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/loading/logo-down.png) center top / 100% no-repeat ;z-index: 0;
        animation:logoDown 3.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.3s 1 both; }

.logo001{    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/loading/001.png) center top / 100% no-repeat ;z-index: 1;
        animation:logoLeft4 0.9s cubic-bezier(.250, .460, .450, .940) 1.6s 1 both; }
.logo002{    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/loading/002.png) center top / 100% no-repeat ;z-index: 1;
        animation:logoLeft3 0.9s cubic-bezier(.250, .460, .450, .940) 1.4s 1 both; }
.logo003{    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/loading/003.png) center top / 100% no-repeat ;z-index: 1;
        animation:logoLeft2 0.9s cubic-bezier(.250, .460, .450, .940) 1.3s 1 both; }
.logo004{    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/loading/004.png) center top / 100% no-repeat ;z-index: 1;
        animation:logoLeft 0.9s cubic-bezier(.250, .460, .450, .940) 1.2s 1 both; }
.logo005{    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/loading/005.png) center top / 100% no-repeat ;z-index: 1;
        animation:logoM 0.8s cubic-bezier(.250, .460, .450, .940) 1.0s 1 both; }
.logo006{    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/loading/006.png) center top / 100% no-repeat ;z-index: 1;
        animation:logoRight 0.9s cubic-bezier(.250, .460, .450, .940) 1.3s 1 both; }
.logo007{    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/loading/007.png) center top / 100% no-repeat ;z-index: 1;
        animation:logoRight2 0.9s cubic-bezier(.250, .460, .450, .940) 1.5s 1 both; }
.logo008{    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/loading/008.png) center top / 100% no-repeat ;z-index: 1;
        animation:logoRight3 0.9s cubic-bezier(.250, .460, .450, .940) 1.7s 1 both; }
.logo009{    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/loading/009.png) center top / 100% no-repeat ;z-index: 1;
        animation:logoRight4 0.9s cubic-bezier(.250, .460, .450, .940) 1.8s 1 both; }
.logo010{    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/loading/010.png) center top / 100% no-repeat ;z-index: 1;
        animation:logoDown 1.4s cubic-bezier(.250, .460, .450, .940) 1.2s 1 both; }





.logo-self{
    position: absolute;
    width: 75%;
    height: 100%;
    top: 0;
    left: 0;
    margin: auto;
    text-align: center;
    right: 0;
}

@keyframes barHide
{
 0%,90% {
            overflow: hidden;
  }


    100% {
        overflow: auto;

  }
}


@keyframes loading
{
 0%,50% {
            opacity:1;
            transform: scale(1);
  }

  60% {
    transform: scale(1.2);
            opacity:0;
  }
    75%,100% {
    transform: scale(1);
            opacity:0;
  }
}
@keyframes logoTop
{
 0% {
            transform:translate3d(0,-24%,0) scale3d(0.9, 0.8, 1);opacity:0;
  }

  100% {
            transform:translate3d(0,0,0) scale3d(1, 1, 1);opacity:1;
  }
}
@keyframes logoSide
{
 0% {
            transform:translate3d(0,5%,0) scale3d(1.05, 1.1, 1);opacity:0;
  }

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

@keyframes logoDown
{
 0% {
            transform:translate3d(0,12%,0) scale3d(1.05, 1.1, 1);opacity:0;
  }

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

@keyframes logoLeft
{
 0%,20% {             transform:translate3d(5%,0%,0); opacity:0;filter:blur(7px);  }
  100% {            transform:translate3d(0,0%,0); opacity:1;filter:blur(0px);  }
}
@keyframes logoLeft2
{
 0%,20% {             transform:translate3d(8%,0%,0); opacity:0;filter:blur(8px);  }
  100% {            transform:translate3d(0,0%,0); opacity:1;filter:blur(0px);  }
}
@keyframes logoLeft3
{
 0%,20% {             transform:translate3d(10%,0%,0); opacity:0;filter:blur(9px);  }
  100% {            transform:translate3d(0,0%,0); opacity:1;filter:blur(0px);  }
}
@keyframes logoLeft4
{
 0%,20% {             transform:translate3d(13%,0%,0); opacity:0;filter:blur(10px);  }
  100% {            transform:translate3d(0,0%,0); opacity:1;filter:blur(0px);  }
}

@keyframes logoM
{
 0%,15% {
            transform:translate3d(0%,4%,0) scale(1.1);opacity:0;filter:blur(2px);
  }

  100% {
            transform:translate3d(0%,0,0) scale(1);opacity:1;filter:blur(0px);
  }
}

@keyframes logoRight
{
 0%,10% {            transform:translate3d(-5%,0%,0) scale(1.3);opacity:0;filter:blur(7px);  }
  100% {            transform:translate3d(0,0,0) scale(1);opacity:1;filter:blur(0px);  }
}
@keyframes logoRight2
{
 0%,10% {            transform:translate3d(-8%,0%,0) scale(1.3);opacity:0;filter:blur(8px);  }
  100% {            transform:translate3d(0,0,0) scale(1);opacity:1;filter:blur(0px);  }
}
@keyframes logoRight3
{
 0%,10% {            transform:translate3d(-10%,0%,0) scale(1.3);opacity:0;filter:blur(9px);  }
  100% {            transform:translate3d(0,0,0) scale(1);opacity:1;filter:blur(0px);  }
}
@keyframes logoRight4
{
 0%,10% {            transform:translate3d(-13%,0%,0) scale(1.3);opacity:0;filter:blur(10px);  }
  100% {            transform:translate3d(0,0,0) scale(1);opacity:1;filter:blur(0px);  }
}



@media screen and (max-width:1600px)
{
.logo-effect{
    top: 0%;

    transform: scale(0.8);
}
}

@media screen and (max-width:1400px)
{
.logo-effect{
    top: 0%;

    transform: scale(0.7);
}
}

@media screen and (max-width:768px)
{
.logo-effect{
    top: 12%;
    transform: scale(0.8);
    width: 100%;/*must*/

}
}





/*-----------------------------------------------
    arrow-group
-----------------------------------------------*/

.arrow-group{
    position: absolute;
    width: 100%;
    height: 100%;

    z-index: 1;
    top: 0%;
    left: 0;
    transition: all .8s ease;

}
/*.arrow-group:hover {
    opacity:1;
    transition: all .8s ease;
}
*/
.arrow-group ul{
    display: flex;
}

.arrow-group ul li{
    opacity: 0;
    transition: all .8s ease;

}
.arrow-l{


    width: 20%;
    /*background: #5bc0de6e;*/
    /*pointer-events: none;*/

}
.arrow-l:hover,.arrow-r:hover  {
    opacity: 1;
}

.arrow-l:before{
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    top: 90%;
    left: 15px;
     background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/arrow-l.png) center top / 100% no-repeat ;
    animation:arrow 2.5s linear 0s infinite both;
}


.arrow-m{
    width: 60%;
    /*background: #dba6da6e;*/

}
.arrow-r{
    width: 20%;
    /*background: #5bc0de6e;*/

}
.arrow-r:before{
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    top: 90%;
    right:  35px;
     background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/cbt/images/arrow-r.png) center top / 100% no-repeat ;
    animation:arrow 2.5s linear 0s infinite both;
}


@keyframes arrow
{
0%,100%{transform:translateX(0px);}
50%{transform:translateX(-10px);}
}



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

    bottom: 5%;

}
}