@charset "UTF-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);

html {

  box-sizing: border-box;

}

#black_load {

    position: fixed;

    width: 100%;

    height: 100%;

    left: 0px;

    top: 0px;

    z-index: 1400;

}

#loading {

    position: fixed;

    top: 50%;

    margin-top: -150px;

    left: 50%;

    margin-left: -106px;

}

#bg_sky {

    position: fixed;

    top: 0px;

    left: 0px;

    width: 100%;

    height: 100%;

    background-color: #5084d8;

    z-index: 1;

}

@-webkit-keyframes cloudUP {

    0% {

        top: 105%;

    }

    100% {

        top: -350px;

    }

}

@keyframes cloudUP {

    0% {

        top: 105%;

    }

    100% {

        top: -350px;

    }

}

#bg_cloud {

    position: fixed;

    z-index: 3;

    width: 100%;

    animation: cloudUP 0.2s infinite;

    -webkit-animation: cloudUP 0.2s infinite;

    transition-timing-function: linear;

    -webkit-animation-play-state: paused;

    /* Safari 4.0 - 8.0 */

    

    animation-play-state: paused;

    opacity: 0.5;

}

@-webkit-keyframes bg_cloud2up {

    0% {

        top: 105%;

    }

    100% {

        top: -450px;

    }

}

@keyframes bg_cloud2up {

    0% {

        top: 105%;

    }

    100% {

        top: -450px;

    }

}

#bg_cloud2 {

    position: fixed;

    bottom: -250px;

    z-index: 2;

    width: 100%;

    animation: bg_cloud2up 3s infinite;

    -webkit-animation: bg_cloud2up 3s infinite;

    transition-timing-function: linear;

    animation-direction: alternate;

    -webkit-animation-play-state: paused;

    /* Safari 4.0 - 8.0 */

    

    animation-play-state: paused;

    -webkit-animation-direction: alternate;

}

@keyframes anijk_fly {

    0% {

        top: -500px;

        margin-left: -200px;

    }

    15% {

        top: 300px;

        margin-left: -220px;

    }

    37% {

        top: 300px;

        margin-left: -242px;

    }

    53% {

        top: 292px;

        margin-left: -226px;

    }

    60% {

        top: 300px;

        margin-left: -232px;

    }

    100% {

        top: 500px;

        margin-left: -252px;

    }

}

#anijk {

    position: fixed;

    z-index: 10;

    left: 50%;

    width: 100%;

    margin-left: -240px;

    animation: anijk_fly 4s;

    -webkit-animation: anijk_fly 4s;

    animation-fill-mode: forwards;

    -webkit-animation-fill-mode: forwards;

    -webkit-animation-play-state: paused;

    /* Safari 4.0 - 8.0 */

    

    animation-play-state: paused;

    transition-timing-function: ease;

}

@keyframes aniTutu_fly {

    0% {

        top: 60%;

        margin-left: -200px;

        opacity: 0;

    }

    40% {

        top: 20%;

        margin-left: -200px;

        opacity: 1;

    }

    100% {

        top: 15%;

        margin-left: -200px;

    }

}

#aniTutu {

    position: fixed;

    z-index: 9;

    left: 50%;

    width: 100%;

    margin-left: -240px;

    animation: aniTutu_fly 4s;

    -webkit-animation: aniTutu_fly 4s;

    animation-fill-mode: forwards;

    -webkit-animation-play-state: paused;

    /* Safari 4.0 - 8.0 */

    

    animation-play-state: paused;

    transition-timing-function: linear;

}

#menu_aniword{

    position: fixed;

    z-index: 9;

    left: 50%;

    width: 100%;

    margin-left: -240px;

    animation: aniTutu_fly 6s;

    -webkit-animation: aniTutu_fly 6s;

    animation-fill-mode: forwards;

    -webkit-animation-play-state: paused; 

}

@-webkit-keyframes whiteIn {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}

@keyframes whiteIn {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}

#white {

    position: fixed;

    top: 0px;

    left: 0px;

    width: 100%;

    height: 100%;

    background-color: white;

    z-index: 100;

    opacity: 0;

    animation: whiteIn 2s;

    -webkit-animation: whiteIn 2s;

    animation-fill-mode: forwards;

    -webkit-animation-fill-mode: forwards;

    -webkit-animation-play-state: paused;

    /* Safari 4.0 - 8.0 */

    

    animation-play-state: paused;

}

@-webkit-keyframes whiteOut {

    0% {

        opacity: 1;

    }

    100% {

        opacity: 0;

    }

}

@keyframes whiteOut {

    0% {

        opacity: 1;

    }

    100% {

        opacity: 0;

    }

}

#white2 {

    position: fixed;

    top: 0px;

    left: 0px;

    width: 100%;

    height: 100%;

    background-color: white;

    z-index: 700;

    opacity: 1;

    display: none;

    animation: whiteOut 1s;

    -webkit-animation: whiteOut 1s;

    animation-fill-mode: forwards;

    -webkit-animation-fill-mode: forwards;

    -webkit-animation-play-state: paused;

    /* Safari 4.0 - 8.0 */

    

    animation-play-state: paused;

}

.bgWord2 {

    top: 600;

    position: fixed;

    width: 100%;

    height: 100%;

    z-index: 50;

    transform: rotate(180deg);

    opacity: 0;

}

body {

    /*background-image: url('../img/bodyimage.jpg');*/

    background-color: #32c9fb;

    overflow-x: hidden;

    font-family: 'Noto Sans TC', 'Microsoft JhengHei', '微軟正黑體', Verdana, Arial, 'Microsoft YaHei' !important;

}

#topBg {

    position: relative;

    z-index: 0;

    height: 900px;

}

.bgWord {

    position: fixed;

    top: 0px;

    width: 100%;

    height: 100%;

    z-index: 1;

}

#word1 {

    position: absolute;

    z-index: 3;

    top: 20px;

    margin-left: -147px;

    width: 100%;

    opacity: 1;

}

#word1_m{

    position: absolute;

    z-index: 3;

    top: 20px;

    margin-left:-50px;

    width: 100%;

    opacity: 1;

}

#title_logo {

    position: absolute;

    z-index: 4;

    top: 270px;

    width:100%;

}

#title_logo img {

    opacity: 0;

    width: 1000px;

}

#topBigpic {

    position: absolute;

    z-index: 3;

    width: 100%;

    top: 50px;

}

#word2 {

    position: absolute;

    z-index: 5;

    top: 0px;

    width: 100%;

    opacity: 0;

    padding: 20px;

}

#word3 {

    position: absolute;

    z-index: 5;

    top: 820px;

    width: 100%;

    opacity: 0;

}

#word4 {

    position: absolute;

    z-index: 5;

    top: 590px;

    width: 100%;

    opacity: 0;

}

#topJK {

    position: absolute;

    right: 80px;

    bottom: 900px;

    z-index: 7;

    opacity: 0;

}

#topTUTU {

    position: absolute;

    right: 30px;

    bottom: 700px;

    z-index: 6;

    opacity: 0;

}

#topCAT {

    position: absolute;

    left: 50%;

    margin-left: 30px;

    top: 180px;

    z-index: 5;

    opacity: 0;

}

#topST {

    position: absolute;

    left: 40%;

    margin-left: 30px;

    top: 150px;

    z-index: 4;

    opacity: 0;

}

#topUFO {

    position: absolute;

    left: 35%;

    margin-left: 30px;

    top: 0px;

    z-index: 3;

    opacity: 0;

}

#topAll{

    position: absolute;

    right: 0;

    top: -500px;

    z-index: 3; 

    opacity: 0;

}

#story {

    position: relative;

    z-index: 10;

    top: 30px;

    width: 100%;

    background-color: green;

}

#story2 {

    position: relative;

    z-index: 8;

    top: 150px;

}

#paperTop {

    position: absolute;

    height: 65px;

}

#paper {

    top: 65px;

    width: 781px;

    position: absolute;

    background-image: url(../img/paper.png);

    z-index: 2;

}

#paper2 {

    top: 65px;

    width: 781px;

    height: 924px;

    position: absolute;

    background-image: url(../img/paper.png);

    z-index: 2;

}

#paperShadow {

    position: absolute;

    margin-left: -43px;

}

#paperBottom {

    position: absolute;

    top: 1350px;

    z-index: 1;

}

#test {

    width: 100%;

    position: relative;

    top: 1550px;

    z-index: 10;

}

#qa1 {

    border-radius: 15px;

    padding: 50px;

    font-size: 26pt;

    font-family: 'Noto Sans TC', 'Microsoft JhengHei', '微軟正黑體', Verdana, Arial, 'Microsoft YaHei' !important;

    z-index: 10;

}

#qa2 {

    width: 750px;

    height: 350px;

    margin-left: 100px;

    margin-top: -350px;

    padding: 50px;

    display: none;

}

#test2 {

    width: 100%;

    position: relative;

    top: 1550px;

    z-index: 11;

}

#test2_content {

    display: none;

}

#test_pic5 {

    margin-top: -80px;

    margin-left: 300px;

}

#test_pic6 {

    margin-top: -20px;

}

#test_pic7 {

    position: absolute;

    margin-top: -530px;

    margin-left: 140px;

}

#test_pic8 {

    position: absolute;

    margin-top: -130px;

    margin-left: 580px;

}

#test_pic9 {

    position: absolute;

    margin-top: -30px;

    margin-left: 180px;

}

#test_pic10 {

    position: absolute;

    margin-top: 180px;

    width: 100%;

}

#test_pic11 {

    margin-top: 540px;

}

#sound_1 {

    position: absolute;

    height: 60px;

    width: 500px;

    margin-top: 220px;

    left: 50%;

    margin-left:-250px;

}

#test3 {

    width: 100%;

    position: relative;

    top: 1550px;

    z-index: 12;

}

#test3_content {

    display: none;

}

#test_pic14 {

    margin-top: -20px;

}

#test_pic15 {

    margin-top: -20px;

    margin-left: 250px;

}

#test_pic16 {

    margin-top: -230px;

    margin-left: -500px;

}

#test_pic17 {

    margin-top: -100px;

    margin-left: 200px;

}

#test_pic18 {} #test_pic19 {

    padding: 50px 30px 20px 30px;

}

#sound_2 {

    position: relative;

    height: 380px;

    width: 700px;

    left: 50%;

    margin-left: -350px;

}

#sound_3 {

    position: relative;

    height: 60px;

    width: 500px;

    left: 50%;

    margin-left:-250px;

    background-color: pink;

}

#sound_4 {

    position: relative;

    height: 60px;

    width: 500px;

    left: 50%;

    margin-left:-250px;

    background-color: pink;

}

#test4 {

    width: 100%;

    position: relative;

    top: 1550px;

    z-index: 14;

}

#test4_content {

    display: none;

}

#test_pic22 {

    margin-top: -10px;

    margin-left: -300px;

}

#test_pic23 {

    margin-top: -180px;

    margin-left: 270px;

}

#test_pic24 {

    margin-top: -100px;

    margin-left: -450px;

}

#test_pic25 {

    margin-top: -330px;

    margin-left: 250px;

}

#test_pic26 {

    margin-top: -50px;

    margin-left: 450px;

}

#test_pic27 {

    margin-top: -100px;

    margin-left: -200px;

}

@-webkit-keyframes latticeBgIn {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}

@keyframes latticeBgIn {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}

#latticeBg {

    position: absolute;

    z-index: 1;

    animation: latticeBgIn 2s;

    -webkit-animation: latticeBgIn 2s;

    animation-fill-mode: forwards;

    -webkit-animation-fill-mode: forwards;

    -webkit-animation-play-state: paused;

    /* Safari 4.0 - 8.0 */

    

    animation-play-state: paused;

}

#latticeBg2 {

    position: absolute;

    z-index: 1;

    right: 0;

    animation: latticeBgIn 2s;

    -webkit-animation: latticeBgIn 2s;

    animation-fill-mode: forwards;

    -webkit-animation-fill-mode: forwards;

    -webkit-animation-play-state: paused;

    /* Safari 4.0 - 8.0 */

    

    animation-play-state: paused;

}

@-webkit-keyframes paper2_1_open {

    0% {

        opacity: 0;

        left: -200px;

        transform: rotate(0deg);

    }

    100% {

        opacity: 1;

        left: 0px;

        transform: rotate(20deg);

    }

}

@keyframes paper2_1_open {

    0% {

        opacity: 0;

        left: -200px;

        transform: rotate(0deg);

    }

    100% {

        opacity: 1;

        left: 0px;

        transform: rotate(20deg);

    }

}

@-webkit-keyframes paper2_2_open {

    0% {

        opacity: 0;

        left: -200px;

        transform: rotate(0deg);

    }

    100% {

        opacity: 1;

        left: 0px;

        transform: rotate(20deg);

    }

}

@keyframes paper2_2_open {

    0% {

        opacity: 0;

        left: -540px;

        transform: rotate(0deg);

    }

    100% {

        opacity: 1;

        left: -720px;

        transform: rotate(-20deg);

    }

}

#paper2_1 {

    position: relative;

    transform: rotate(20deg);

    left: 0px;

    top: 500px;

    animation: paper2_1_open 2s;

    -webkit-animation: paper2_1_open 2s;

    animation-fill-mode: forwards;

    -webkit-animation-fill-mode: forwards;

    -webkit-animation-play-state: paused;

    /* Safari 4.0 - 8.0 */

    

    animation-play-state: paused;

}

#paper2_2 {

    position: relative;

    transform: rotate(-20deg);

    left: -720px;

    top: 110px;

    animation: paper2_2_open 2s;

    -webkit-animation: paper2_2_open 2s;

    animation-fill-mode: forwards;

    -webkit-animation-fill-mode: forwards;

    -webkit-animation-play-state: paused;

    /* Safari 4.0 - 8.0 */

    

    animation-play-state: paused;

}

@-webkit-keyframes ReStart_ani {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}

@keyframes ReStart_ani {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}

.ReStart {

    animation: ReStart_ani 1s;

    -webkit-animation: ReStart_ani 1s;

    animation-fill-mode: forwards;

    -webkit-animation-fill-mode: forwards;

}

#form_div {

    width: 100%;

    position: relative;

    top: 1550px;

    z-index: 599;

}

#form_content {

    background-color: white;

    height: 750px;

    width: 950px;

    display: none;

}

#test_bottom_shadow {

    width: 100%;

    position: relative;

    top: 1550px;

}

#footer {

    width: 100%;

    height: 80px;

    position: relative;

    top: 1550px;

    color: white;

    margin-top: -30px;

    z-index: 600;

}

#footer_word{

    font-size: 15pt;

    opacity: 0.3;

}

/* form starting stylings ------------------------------- */



.group {

    position: relative;

    margin-bottom: 45px;

}

input {

    font-size: 18px;

    padding: 10px 10px 10px 5px;

    display: block;

    width: 350px;

    border: none;

    border-bottom: 1px solid #db1b90;

}

input:focus {

    outline: none;

}

/* LABEL ======================================= */



label {

    color: #999;

    font-size: 18px;

    font-weight: normal;

    position: absolute;

    pointer-events: none;

    left: 5px;

    top: 10px;

    transition: 0.2s ease all;

    -moz-transition: 0.2s ease all;

    -webkit-transition: 0.2s ease all;

}

/* active state */



input:focus ~ label,

input:valid ~ label {

    top: -20px;

    font-size: 14px;

    color: #ff2c99;

}

/* BOTTOM BARS ================================= */



.bar {

    position: relative;

    display: block;

    width: 350px;

}

.bar:before,

.bar:after {

    content: '';

    height: 2px;

    width: 0;

    bottom: 1px;

    position: absolute;

    background: #ff2c99;

    transition: 0.2s ease all;

    -moz-transition: 0.2s ease all;

    -webkit-transition: 0.2s ease all;

}

.bar:before {

    left: 50%;

}

.bar:after {

    right: 50%;

}

/* active state */



input:focus ~ .bar:before,

input:focus ~ .bar:after {

    width: 50%;

}

/* HIGHLIGHTER ================================== */



.highlight {

    position: absolute;

    height: 60%;

    width: 200px;

    top: 25%;

    left: 0;

    pointer-events: none;

    opacity: 0.5;

}

/* active state */



input:focus ~ .highlight {

    -webkit-animation: inputHighlighter 0.3s ease;

    -moz-animation: inputHighlighter 0.3s ease;

    animation: inputHighlighter 0.3s ease;

}

/* ANIMATIONS ================ */



@-webkit-keyframes inputHighlighter {

    from {

        background: #5264AE;

    }

    to {

        width: 0;

        background: transparent;

    }

}

@-moz-keyframes inputHighlighter {

    from {

        background: #5264AE;

    }

    to {

        width: 0;

        background: transparent;

    }

}

@keyframes inputHighlighter {

    from {

        background: #5264AE;

    }

    to {

        width: 0;

        background: transparent;

    }

}