#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif;  width:200px;}

.appicon {
    width:96px;
    margin:0 0 1rem 0;
}

[data-fade] {
    opacity: 0;
    transition: opacity 1s ease-out;
    -webkit-transition: opacity 1s ease-out;
}

a {color:black;text-decoration:none;}
a:hover {opacity: 0.5;}

ul {
    text-align: left;
    font-size: 1rem;
    line-height: 1.1;
    font-weight: normal;
    color:#ccc;
    padding: 0 0 0 0.8rem;
}
li {
    text-align: left;
    margin-top:20px;
}

body {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font-family: "Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: #262e36;
}
.body-text {
    font-size:1.3rem;
}
.title-text {
    font-size:2rem;
	font-weight: bold;
    margin:1rem 0 0 0;
}

.ios-install {
    width: 165px;
    height: 45px;
    background: url("appStore.png") no-repeat;
    background-size: contain;
    display: inline-block;
}

.android-install{
    width: 165px;
    height: 45px;
    background: url("gPlay.png") no-repeat;
    background-size: contain;
    display: inline-block;
}

.mailto {
    color: #fff;
    font-size: 0.8rem;
    text-decoration: underline;
}

.section {
    overflow:hidden;
    width:100%;
    margin:0 0 0 0;
    padding:0 0 0 0;
    text-align:center;
    height:850px;
}
.container {
    max-width: 1200px;
    width: 90%;
    height:100%;
    margin: 0 auto;
    position: relative;
    text-align: center;
}

.screenshot-c {
    background-repeat:no-repeat;
    background-position: center bottom;
    background-size: contain;
    pointer-events: none;
    position: absolute;
    width:557px;
    height: 661px;
    left:50%;
    bottom:-70px;
    margin-left: -278px;
}

.screenshot-l {
    background-repeat:no-repeat;
    background-position: center bottom;
    background-size: contain;
    pointer-events: none;
    position: absolute;
    width: 333px;
    height: 451px;
    left: 50%;
    bottom:-30px;
    margin-left: -470px;
}

.screenshot-r {
    background-repeat:no-repeat;
    background-position: center bottom;
    background-size: contain;
    pointer-events: none;
    position: absolute;
    width: 333px;
    height: 451px;
    right: 50%;
    margin-right: -470px;
    bottom:-30px;
}

/*home************************************************************************/
.home-section {
    background-color: #262e36;
    color: #fefefe;
    height: 950px;
    position: relative;
}

.home-title {
    width: 5rem;
    font-size:6rem;
    line-height:0.85;
    color: #f7f7f7;
    margin:2rem 0 0 0;
    position:absolute;
    text-align:left;
}
.home-subtitles {
    height: 172px;
    font-size: 2rem;
    color: #e9eae9;
    margin: 250px 0 0 0;
    position: absolute;
}

.home-01 {
    background: url("quizemoji-c.png") no-repeat;
    background-position: center bottom;
    background-size: contain;
    width: 631px;
    height: 726px;
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left: -450px;
}

.home-02 {
    background: url("home-02.png") no-repeat;
    background-size: contain;
    background-position: center bottom;
    width: 631px;
    height: 1084px;
    position: absolute;
    bottom: -180px;
    margin: 0 100px 0 0;
    right: 0;
}

/*quizemoji************************************************************************/
.quizemoji-section {
    color: #fefefe;
    background-color: #F39C12;
}

.quizemoji-c {background-image: url("quizemoji-c.png");}
.quizemoji-l {background-image: url("quizemoji-l.png");}
.quizemoji-r {background-image: url("quizemoji-r.png");}

/*quizlive********************************************************************/
.quizlive-section {
    color: #262e36;
    background-color: #23debf;
}
.quizlive-c {background-image: url("quizlive-c.png");}
.quizlive-l {background-image: url("quizlive-l.png");}
.quizlive-r {background-image: url("quizlive-r.png");}

/*quiz************************************************************************/
.quiz-section {
    color: #fefefe;
    background-color: #f56d31;
}
.quiz-c {background-image: url("quiz-c.png");}
.quiz-l {background-image: url("quiz-l.png");}
.quiz-r {background-image: url("quiz-r.png");}

/*about********************************************************************/
.about-section {
    background-color: #262e36;
    color: #fefefe;
    height:auto !important;
}
.copyright {
    font-size:0.8rem;
    color:#ccc;
    margin:5rem 0 2rem 0;
    text-align: center;
}


/*1200px********************************************************************/
@media (max-width: 1200px) {
    .section {
        height:820px;
    }

    .screenshot-c {
        width:537px;
        height: 661px;
        left:50%;
        bottom:-70px;
        margin-left:-278px;
    }

    .screenshot-l {
        width: 313px;
        height: 451px;
        left: 50%;
        margin-left: -430px;
    }

    .screenshot-r {
        width: 313px;
        height: 451px;
        right: 50%;
        margin-right: -430px;
    }

    .home-section {height: 950px;}
    .home-01 {
        width: 631px;
        height: 746px;
        left:0;
        margin:0 0 0 0;
    }
    .home-02 {
        width: 631px;
        height: 1084px;
        right: -90px;
        margin:0 0 0 0;
    }
    .office-01 {
        bottom: 220px;
        margin-left: -300px;
    }
    .office-02 {
        bottom: 50px;
        margin-left: -266px;
    }
    .office-03 {
        bottom: 50px;
        margin-left: -38px;
    }
}

/*900px********************************************************************/
@media (max-width: 900px) {
    .section {
        height:790px;
    }

    .screenshot-c {
        width:507px;
        height: 661px;
        left:50%;
        bottom:-70px;
        margin-left: -258px;
    }

    .screenshot-l {
        width: 283px;
        height: 451px;
        left: 50%;
        margin-left: -360px;
    }

    .screenshot-r {
        width: 283px;
        height: 451px;
        right: 50%;
        margin-right: -360px;
    }

    .home-section {height: 880px;}
    .home-container {max-width: 900px;}
    .home-title {
        font-size: 70px;
        text-align: center;
        width: 100%;
        margin-left: 0px;
    }
    .home-subtitles {
        /* display:none; */
		margin: 120px 0 0 0;
		font-size: 1rem;
    }
    .home-01 {
        width: 500px;
        height: 650px;
        left: 50%;
        bottom: -20px;
        margin: 0 0 0 -350px;
    }
    .home-02 {
        width: 600px;
        height: 760px;
        right: 50%;
        bottom: 0;
        margin: 0 -400px 0 0;
    }

    .about-text {
        max-width: 793px;
        font-size: 22px;
        margin-top: 36px;
    }
    .office-01 {
        bottom: 260px;
        margin-left: -300px;
    }
    .office-02 {
        bottom: 50px;
        margin-left: -266px;
    }
    .office-03 {
        bottom: 50px;
        margin-left: -38px;
    }
}

/*670px********************************************************************/
@media (max-width: 670px) {
    .screenshot-c {
        bottom:-90px;
    }
}

/*600px********************************************************************/
@media (max-width: 600px) {
    .section {
        height:750px;
    }

    .screenshot-c {
        width:437px;
        height: 661px;
        left:50%;
        bottom:-55px;
        margin-left: -215px;
    }

    .screenshot-l {
        width: 223px;
        height: 451px;
        left: 50%;
        margin-left: -260px;
    }

    .screenshot-r {
        width: 223px;
        height: 451px;
        right: 50%;
        margin-right: -260px;
    }

    .home-section {
        height: 620px;
    }
    .home-title {
        width: 5rem;
        font-size:3rem;
        line-height:0.85;
        color: #f7f7f7;
        margin:1rem 0 0 0;
        position:absolute;
        text-align:left;
    }
    .home-01 {
        width: 300px;
        height: 350px;
        position: absolute;
        left: 50%;
        bottom: -20px;
        margin-left: -180px;
    }
    .home-02 {
        width: 300px;
        height: 500px;
        position: absolute;
        right: 50%;
        bottom: 0;
        margin: 0 -180px 0 0;
    }

    .office-01 {
        bottom: 300px;
        margin-left: -300px;
    }
    .office-02 {
        bottom: 130px;
        margin-left: -266px;
    }
    .office-03 {
        bottom: 130px;
        margin-left: -55px;
    }

    .ios-install {
        width: 130px;
        background: url("appStore.png") no-repeat;
        background-size: contain;
        display: inline-block;
    }

    .android-install{
        width: 130px;
        background: url("gPlay.png") no-repeat;
        background-size: contain;
        display: inline-block;
    }
}


/*400px********************************************************************/
@media (max-width: 400px) {
    .section {
        height:650px;
    }

    .screenshot-c {
        width:337px;
        height: 661px;
        left:50%;
        margin-left: -165px;
    }

    .screenshot-l {
        width: 133px;
        height: 451px;
        left: 50%;
        margin-left: -180px;
    }

    .screenshot-r {
        width: 133px;
        height: 451px;
        right: 50%;
        margin-right: -180px;
    }

    .home-section {
        height: 620px;
    }
    .home-title {
        width: 5rem;
        font-size:3rem;
        line-height:0.85;
        color: #f7f7f7;
        margin:1rem 0 0 0;
        position:absolute;
        text-align:left;
    }
}

/*340px********************************************************************/
@media (max-width: 340px) {
    .section {
        height:590px;
    }
}

/*320px********************************************************************/
@media (max-width: 320px) {
    .body-text{
        font-size:1rem;
    }
    .section {
        /* height:675px; */
    }

    .screenshot-c {
        width:307px;
        height: 661px;
        left:50%;
        margin-left: -150px;
    }

    .screenshot-l {
        width: 133px;
        height: 451px;
        left: 50%;
        margin-left: -180px;
        bottom: -30px;
    }

    .screenshot-r {
        width: 133px;
        height: 451px;
        right: 50%;
        margin-right: -180px;
        bottom: -50px;
    }

    .home-title {
        width: 5rem;
        font-size:2.2rem;
        line-height:0.85;
        color: #f7f7f7;
        margin:1rem 0 0 0;
        position:absolute;
        text-align:left;
    }
}

/*310px********************************************************************/
@media (max-width: 310px) {
    .section {
        /* height:620px; */
    }

    .home-title {
        width: 5rem;
        font-size:2rem;
        line-height:0.85;
        color: #f7f7f7;
        margin:1rem 0 0 0;
        position:absolute;
        text-align:left;
    }
}