@charset "utf-8";
/* RealClear Digital, DEC 2014 */



/*************************General**********************************/

/* Color Chart - YELLOW : #f1be0f; */

body              { margin: 0; background: #000; color: #eee; font-size: 15px;
                    font-family: 'Roboto','Helvetica Neue',Helvetica, Arial,'Apple LiGothic Medium','STHeiti Light','微軟正黑體','Microsoft JhengHei',sans-serif;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                  }
a,
a:visited,
a:active,
a:hover           { text-decoration: none; blr:expression(this.onFocus=this.blur()); cursor: pointer;}

a                 { outline: none; /* for Firefox Chrome */ behavior:expression(this.onFocus=this.blur()); /* for IE */}
a:focus           { -moz-outline-style: none; outline: none; } /* for Firefox Chrome */

a:link            { text-decoration: none;}
a:visited         { text-decoration: none;}
a:hover           { text-decoration: none;}
input,
textarea,         { font-family: 'Roboto','Helvetica Neue',Helvetica, Arial,'Apple LiGothic Medium','STHeiti Light','微軟正黑體','Microsoft JhengHei',sans-serif;}
input:focus,
textarea:focus    { outline: none;}

p                 {line-height: 1.5em;}


.wrapper{
}


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

.header{
    padding: 50px 0;
    width: 1200px;
    margin: 0 auto;
    z-index: 2;
    position: relative;
}
.header-inner{
    padding: 50px 0;
    width: 1200px;
    margin: 0 auto;
    z-index: 2;
    position: relative;
}
.nav{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 50%;
    float: left;
}
.nav li{
    display: inline;
    padding: 0 2em;
}
.nav li a{
    color: #ccc;
    text-transform: uppercase;
}
.nav li a:hover{
    color: #f1be0f;
}
.nav-mobile-wrapper{
    display: none;
}


.login{
    width: 30%;
    float: right;
}
.login .fb-page{
    width: 100px;
    height: 28px;
    padding-top: 2px;
    float: right;
}
.login .login-btn{
    float: right;
    background: #444;
    display: block;
    width: 70px;
    padding-left: 60px;
    line-height: 25px;
    text-transform: uppercase;
    font-size: 0.8em;
    background: url("../Image/head-login.png") center top no-repeat;
}
.login .login-btn:hover{
    color: #f1be0f;
}

.lan{
    float: right;
}

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


.footer{
    width: 1200px;
    margin: 20px auto;
    text-align: right;
    z-index: 2;
    position: relative;
}
.footer p{
    line-height: 30px;
    margin: 0;
}
.footer img{
    vertical-align: middle;
    padding-right: 10px;
}

/*------ hero ------*/

.hero{
    background: #000;
    z-index: 3;
    position: relative;
    padding-bottom: 30px;
}
.hero-inner{
    background: #000;
    width: 1200px;
    margin: 0 auto;
    z-index: 3;
    position: relative;
}
.hero-inner:after{
    clear: both;
    content: '';
    display: block;
}
.hero .logo{
    width: 45%;
    float: right;
    text-align: right;
}

.hero .intro{
    width: 55%;
    float: left;
    padding-top: 130px;
}
.hero h1{
    width: 660px;
    height: 130px;
}
.hero h1 span{
    width: 660px;
    height: 130px;
    display: block;
    text-indent: -9999px;
    background-repeat: no-repeat;
}
.hero .slogan{
    text-align: center;
    height: 240px;
    /*background: url("../Image/slogan-bg.png") center top no-repeat;*/
}
.hero .slogan img{
    float: left;
}
.hero .slogan h2{
    color: #f1be0f;
    font-weight: normal;
    padding-top: 50px;
    line-height: 1.5em;
}
.hero .slogan h3{
    font-weight: normal;
}

.hero .scroll-down{
    display: block;
    width: 150px;
    /*margin-left: 340px;*/
    margin-left: 38%;
    text-align: center;
    padding-bottom: 70px;
    font-size: 1.2em;
    text-transform: uppercase;
    background: url("../Image/scroll-down.png") center bottom no-repeat;
}
.hero .scroll-down:hover{
    color: #f1be0f;
}




/*------ belt ------*/

.belt{
    height: 100px;
    background: url("../Image/belt-bg.png");
    z-index: 2;
    position: relative;
}
.belt p{
    width: 1118px;
    height: 79px;
    margin: 0 auto;
    background: url("../Image/belt.png") center center no-repeat;
    text-align: center;
    color: #f1be0f;
    font-size: 2em;
    line-height: 79px;
    text-transform: uppercase;
    box-shadow:         0px 5px 6px #000;
    -moz-box-shadow:    0px 5px 6px #000;
    -webkit-box-shadow: 0px 5px 6px #000;
}


/*------ brief ------*/

.brief{
    background: #222;
    z-index: 2;
    position: relative;
    width: 100%;
}

.brief-inner{
    background: #222;
    width: 1200px;
    margin: 0 auto;
}
.brief-inner:after{
    content: '';
    display: block;
    clear: both;
}
.mission{
    width: 41%;
    float: left;
    height: 350px;
    padding-top: 10px;
}
    .mission-1{
        width: 44%;
        margin-left: 5%;
        border-right: 1px solid #444;
        background: url("../Image/mission-1.png") right bottom no-repeat;
    }
    .mission-2{
        width: 47%;
        margin-left: 2%;
        background: url("../Image/mission-2.png") right bottom no-repeat;
    }

.brief h3{
    background: url("../Image/mission-tag.png");
    width: 212px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #555;
    text-align: center;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 1em;
    letter-spacing: 2px;
    color: #ccc;
    margin-top: 0;
}
.brief p{
    font-size: 1.1em;
}
.brief .tips{
    color: #f1be0f;
    font-size: 1em;
}
.brief p span{
    color: #f1be0f;
}
.brief .btn{
    height: 42px;
    line-height: 42px;
    text-transform: uppercase;
    font-size: 1em;
    display: block;
    text-shadow: 0px 1px 1px #000;
}
    .brief .share{
        background: url("../Image/btn-fb.png");
        padding-left: 35px;
        display: inline-block;
        padding-right: 10px;
        margin-top: 20px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border: 1px solid #314f8c;
    }
    .brief .take-quiz{
        background: url("../Image/btn.png") no-repeat;
        display: inline-block;
        padding-left: 22px;
        padding-right: 10px;
        margin-top: 20px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border: 1px solid #314f8c;
    }
.brief .btn:hover{
    color: #f1be0f;
    box-shadow:         0px 3px 3px #111;
    -moz-box-shadow:    0px 3px 3px #111;
    -webkit-box-shadow: 0px 3px 3px #111;
}
.brief .btn:active{
    color: #cb9f07;
    box-shadow:         0px -1px 1px #000;
    -moz-box-shadow:    0px -1px 1px #000;
    -webkit-box-shadow: 0px -1px 1px #000;
}





/*------ years ------*/

.years{
    position: relative;
}

.background{
    position: relative;
    z-index: 1;
}
.background div{
    position: fixed;
    display: none;
    z-index: 1;
}
.background .background-1{
    right: 0;
    top: 0;
    width: 900px;
    height: 900px;
    background: url("../Image/bg-1.jpg") no-repeat;
}
.background .background-2{
    left: -200px;
    top: 0;
    /*width: 950px;
    height: 980px;*/
    width: 750px;
    height: 1000px;
    background: url("../Image/bg-3.jpg") no-repeat;
}
.background .background-3{
    right: 0;
    top: 0;
    width: 750px;
    height: 1000px;
    background: url("../Image/bg-3.jpg") no-repeat;
}
.background .background-4{
    left: 0;
    bottom: 120px;
    width: 1200px;
    height: 570px;
    background: url("../Image/bg-4.png") no-repeat;
}

.side-nav{
    width: 30px;
    position: fixed;
    right: 0;
    top: 45%;
    z-index: 100;
    text-align: center;
}
.side-nav a{
    width: 10px;
    height: 10px;
    display: block;
    margin: 0 auto 10px auto;
    background: #aaa;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin-bottom: 10px;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.side-nav a:hover{
    background: #f1be0f;
}
.side-nav a.active{
    height: 30px;
    background: #f1be0f;
}
.side-nav span{
  position: absolute;
  right: 30px;
  width: 250px;
  font-size: 0.9em;
  text-align: right;
  display: none;
  color: #f1be0f;
}
.side-nav a:hover span{
  display: block;
}




.timeline{
    width: 1200px;
    height: 13000px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.timeline:before{
    display: block;
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 6px;
    height: 12950px;
    background: #f1be0f;
}
.timeline .tb-left{
    text-align: right;
}
.timeline .tb-left .pops{
    text-align: left;
}

.timeline h2{
    margin: 0;
    color: #f1be0f;
    font-size: 8em;
    padding-right: 10px;
    font-weight: normal;
    background: url("../Image/line-left.png") right bottom no-repeat;
}
.timeline h3{
    margin: 0.5em 0;
    font-size: 2em;
    font-weight: normal;
    padding: 0.3em 10px 0 10px;
}
.timeline .tb-right h2{
    padding-left: 10px;
    background: url("../Image/line-right.png") left bottom no-repeat;
}
.time-block > p a{
    text-decoration: underline;
    color: #fff;
}
.time-block > p a:hover{
    color: #f1be0f;
}


.timeline p{
    font-size: 1.2em;
}
.timeline .photo{
    margin: 0 10px;
    position: relative;
}
.timeline .photo-card{
    position: relative;
}
.timeline .photo-card img{
    position: absolute;
}
.timeline .photo-card p{
    position: absolute;
    font-size: 1.2em;
}
.timeline .photo-card a{
    color: #fff;
}
.timeline .photo-card a:hover{
    color: #f1be0f;
}

.timeline .btn-more{
    text-indent: -9999px;
    width: 34px;
    height: 34px;
    display: inline-block;
    background: url("../Image/btn-more.png") center center no-repeat;
    margin: 0 5px;
    vertical-align: middle;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}
.timeline .btn-more:hover{
    -moz-transform: scale(1) rotate(90deg) translate(0px);
    -webkit-transform: scale(1) rotate(90deg) translate(0px);
    -o-transform: scale(1) rotate(90deg) translate(0px);
    transform: scale(1) rotate(90deg) translate(0px);
}


.time-block p{
    padding: 0 10px;
    margin: 0.3em 0;
}


.pops{
    width: 500px;
    padding: 10px 30px 10px 10px;
    border: 1px solid #f1be0f;
    background: #111;
    position: absolute;
    font-size: 0.9em;
    display: none;
    z-index: 3;
}
.timeline .close-box{
    position: absolute;
    right: 10px;
    top: 10px;
    display: block;
    text-indent: -9999px;
    width: 23px;
    height: 23px;
    background: url("../Image/close.png") center center no-repeat;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}
.timeline .close-box:hover{
    -moz-transform: scale(1) rotate(90deg) translate(0px);
    -webkit-transform: scale(1) rotate(90deg) translate(0px);
    -o-transform: scale(1) rotate(90deg) translate(0px);
    transform: scale(1) rotate(90deg) translate(0px);
}


.time-block{
    position: absolute;
    width: 600px;
}

.tb-01{
    left: 0;
    top: 0;
    text-align: right;
    background: url("../Image/line-bold.png") right top no-repeat;
}
.tb-01 h2{
    background: none;
}
.tb-02{
    left: 606px;
    top: 140px;
}

.tb-03{
    left: 300px;
    top: 660px;
}
.tb-03 .photo{
    width: 580px;
    height: 350px;
}
.timeline .tb-03 .photo-card p{
    top: 310px;
    right: 175px;
}

    /* 1990 */
.tb-04{
    left: 606px;
    top: 1040px;
}

.tb-04 h3{
    padding-right: 100px;
}
.tb-04 .photo-card{
    width: 400px;
    height: 230px;
}
.timeline .tb-04 .photo-card p{
    bottom: 0px;
    right: 0px;
}
.tb-04 .pops{
    right: 610px;
    top: 130px;
}

    /* 1992 */
.tb-05{
    left: 0;
    top: 1500px;
}
.tb-05 h2 img{
    vertical-align: top;
}

    /* 1994 */
.tb-06{
    left: 606px;
    top: 1700px;
}
.timeline .tb-06 .photo-card{
    width: 370px;
    height: 270px;
}
.timeline .tb-06 .photo-card p{
    bottom: 0px;
    right: 0px;
}

    /* 1996 */
.tb-07{
    left: 0;
    top: 2050px;
}
.tb-07 .photo{
    display: none;
}
.timeline .tb-07 .photo-card{
    width: 420px;
    height: 240px;
    float: right;
}
.tb-07 .photo img{
    right: 0;
    top: 0;
}
.tb-07 .photo p{
    left: 15px;
    bottom: 0;
}



    /* 1998 add */
.tb-add-1998{
    left: 606px;
    top: 2350px;
}
.timeline .tb-add-1998 .photo-card{
    width: 370px;
    height: 260px;
}
.tb-add-1998 .photo p{
    bottom: 0px;
    right: 0px;
}



    /* 2001 */
.tb-08{
    left: 606px;
    top: 3050px;
}
.timeline .tb-08 .photo-card{
    width: 300px;
    height: 410px;
}
.timeline .tb-08 .photo-card p{
    bottom: 0px;
    right: 0px;
}

    /* 2004 */
.tb-09{
    left: 0;
    top: 3550px;
}
.timeline .tb-09 .photo-card{
    width: 310px;
    height: 360px;
    float: right;
}
.timeline .tb-09 .photo-card img{
    right: 0;
    top: 0;
}
.timeline .tb-09 .photo-card p{
    left: 10px;
    bottom: 0px;
}
.tb-09 .pops{
    left: 610px;
    top: 220px;
    text-align: left;
}



.tb-10{
    left: 606px;
    top: 3850px;
}
.tb-10 h3{
    padding-right: 100px;
}
.timeline .tb-10 .photo-card{
    width: 310px;
    height: 350px;
}
.timeline .tb-10 .photo-card p{
    bottom: 0px;
    right: 0px;
}


    /* 2006 */

.tb-11{
    left: 606px;
    top: 4400px;
}
.timeline .tb-11 .photo-card{
    width: 290px;
    height: 360px;
}
.timeline .tb-11 .photo-card p{
    bottom: 0px;
    right: 0px;
    text-align: right;
}
.tb-11 .pops{
    right: 610px;
    top: 120px;
}


    /* 2007 */
.tb-12{
    left: 0;
    top: 5000px;
}
.tb-12 > p{
    padding-left: 100px;
}
.timeline .tb-12 .photo-card{
    width: 300px;
    height: 365px;
    float: right;
}
.timeline .tb-12 .photo-card img{
    right: 0px;
    left: 0px;
}
.timeline .tb-12 .photo-card p{
    bottom: 0px;
    left: 0px;
}



.tb-13{
    left: 606px;
    top: 5300px;
}
.timeline .tb-13 .photo-card{
    width: 500px;
    height: 370px;
}
.timeline .tb-13 .photo-card p{
    bottom: 0px;
    right: 0px;
    text-align: right;
}


    /* 2008 */
.tb-14{
    left: 606px;
    top: 5870px;
}
.timeline .tb-14 .photo-card{
    width: 480px;
    height: 370px;
}
.timeline .tb-14 .photo-card p{
    bottom: 0px;
    right: 0px;
    text-align: right;
}


.tb-15{
    left: 0;
    top: 6150px;
}
.timeline .tb-15 .photo-card{
    width: 490px;
    height: 360px;
    float: right;
}
.timeline .tb-15 .photo-card img{
    right: 0px;
    left: 0px;
}
.timeline .tb-15 .photo-card p{
    bottom: 0px;
    left: 0px;
}
.tb-15 .pops{
    left: 610px;
    top: 140px;
}


    /* 2009 */
.tb-16{
    left: 0;
    top: 6700px;
}
.timeline .tb-16 .photo-card{
    width: 310px;
    height: 390px;
    float: right;
}
.timeline .tb-16 .photo-card img{
    right: 0px;
    left: 0px;
}
.timeline .tb-16 .photo-card p{
    bottom: 0px;
    left: 0px;
}
.tb-16 .pops{
    left: 610px;
    top: 170px;
}


.tb-17{
    left: 606px;
    top: 7100px;
}
.timeline .tb-17 .photo-card{
    width: 310px;
    height: 370px;
}
.timeline .tb-17 .photo-card p{
    bottom: 0px;
    right: 0px;
    text-align: right;
}


.tb-18{
    left: 0;
    top: 7450px;
}
.timeline .tb-18 .photo-card{
    width: 305px;
    height: 380px;
    float: right;
}
.timeline .tb-18 .photo-card img{
    right: 0px;
    left: 0px;
}
.timeline .tb-18 .photo-card p{
    bottom: 0px;
    left: 0px;
}



    /* 2010 */
.tb-19{
    left: 606px;
    top: 7950px;
}
.timeline .tb-19 .photo-card{
    width: 500px;
    height: 350px;
}
.timeline .tb-19 .photo-card p{
    bottom: 0px;
    right: 175px;
    text-align: right;
}

.tb-20{
    left: 0;
    top: 8200px;
}
.tb-20 h3{
    padding-left: 100px;
}

    /* 2011 */
.tb-21{
    left: 0;
    top: 8600px;
}
.tb-21 h3{
    padding-left: 100px;
}
.timeline .tb-21 .photo-card{
    width: 380px;
    height: 360px;
    float: right;
}
.timeline .tb-21 .photo-card img{
    right: 0px;
    left: 0px;
}
.timeline .tb-21 .photo-card p{
    bottom: 0px;
    left: 75px;
}
.tb-21 .pops{
    left: 610px;
    top: 170px;
}

.tb-22{
    left: 606px;
    top: 8900px;
}
.timeline .tb-22 .photo-card{
    width: 320px;
    height: 400px;
}
.timeline .tb-22 .photo-card p{
    bottom: 0px;
    right: 0px;
    text-align: right;
}
.tb-22 .pops{
    right: 610px;
    top: 120px;
}


    /* 2012 */
.tb-23{
    left: 606px;
    top: 9500px;
}
.tb-23 > p{
    padding-right: 100px;
    padding-bottom: 1em;
}


    /* 2013 */
.tb-24{
    left: 0;
    top: 9950px;
}
.tb-24 > p{
    padding-left: 80px;
}
.timeline .tb-24 .photo-card{
    width: 350px;
    height: 360px;
    float: right;
}
.timeline .tb-24 .photo-card img{
    right: 0px;
    left: 0px;
}
.timeline .tb-24 .photo-card p{
    bottom: 0px;
    left: 0px;
}


.tb-25{
    left: 606px;
    top: 10250px;
}
.timeline .tb-25 .photo-card{
    width: 470px;
    height: 450px;
}
.timeline .tb-25 .photo-card p{
    bottom: 0px;
    right: 155px;
    text-align: right;
}


.tb-26{
    left: 0;
    top: 10700px;
}
.tb-26 > p{
    padding-left: 100px;
}
.timeline .tb-26 .photo-card{
    width: 465px;
    height: 370px;
    float: right;
}
.timeline .tb-26 .photo-card img{
    right: 0px;
    left: 0px;
}
.timeline .tb-26 .photo-card p{
    bottom: 0px;
    left: 165px;
}



    /* 2014 */
.tb-27{
    left: 606px;
    top: 11200px;
}
.tb-27 > p{
    padding-right: 50px;
}
.timeline .tb-27 .photo-card{
    width: 570px;
    height: 370px;
}
.timeline .tb-27 .photo-card p{
    bottom: 0px;
    right: 0px;
    text-align: right;
}



.tb-28{
    left: 0;
    top: 11450px;
}
.tb-28 > p{
    padding-left: 100px;
}
.timeline .tb-28 .photo-card{
    width: 540px;
    height: 320px;
    float: right;
}
.timeline .tb-28 .photo-card img:nth-child(1){
    left: 0px;
}
.timeline .tb-28 .photo-card img:nth-child(3){
    left: 270px;
}
.timeline .tb-28 .photo-card p:nth-child(2){
    left: 0px;
    bottom: 0px;
}
.timeline .tb-28 .photo-card p:nth-child(4){
    left: 270px;
    bottom: 0px;
}
.tb-28 .pops{
    left: 610px;
    top: 140px;
}



.tb-29{
    left: 606px;
    top: 11950px;
}
.timeline .tb-29 .photo-card{
    width: 490px;
    height: 460px;
}
.timeline .tb-29 .photo-card p{
    bottom: 58px;
    right: 0px;
    text-align: right;
}
.tb-29 .pops{
    right: 610px;
    top: 70px;
}

    /* thank you */
.tb-thankyou{
    left: 280px;
    top: 12600px;
    border: 5px solid #f1be0f;
    padding: 20px;
    background: #000;
}

.tb-thankyou h2{
    font-size: 3em;
    background: none;
}


    /* Back to top */
.back{
    left: 540px;
    top: 12930px;
    position: absolute;
    border: 5px solid #f1be0f;
    padding: 20px;
    background: #000;
    display: block;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
}









/*------ popout ------*/

.pop-wrapper{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: none;
}
.mask{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
}
.pop-inner{
    position: relative;
    height: 20px; /* 避免遮掉mask感應範圍 */
}


.pop-wrapper .close{
    position: absolute;
    right: 15px;
    top: 15px;
    display: block;
    text-indent: -9999px;
    width: 23px;
    height: 23px;
    background: url("../Image/close.png") center center no-repeat;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}
.pop-wrapper .close:hover{
    -moz-transform: scale(1) rotate(90deg) translate(0px);
    -webkit-transform: scale(1) rotate(90deg) translate(0px);
    -o-transform: scale(1) rotate(90deg) translate(0px);
    transform: scale(1) rotate(90deg) translate(0px);
}




 /* Quiz */
.pop-quiz{
    width: 700px;
    margin: 3% auto;
    background: #1f1f1f;
    border: 1px solid #666;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: #1f1f1f url("../Image/quiz-header.jpg") center top no-repeat;
    padding-top: 250px;
    position: relative;
    display: none;
}


.pop-quiz h2{
    text-align: center;
    color: #f1be0f;
    text-transform: uppercase;
    font-size: 2em;
    margin: 0.5em 0;
}

.quiz-wrapper{
    height: 520px;
    margin-right: 5px;
    margin-bottom: 5px;
    overflow-y: auto;
}

@media (max-height: 930px) {
    .quiz-wrapper{
        height: 470px;
    }
}
@media (max-height: 850px) {
    .quiz-wrapper{
        height: 380px;
    }
}
@media (max-height: 750px) {
    .quiz-wrapper{
        height: 320px;
    }
}
@media (max-height: 680px) {
    .pop-quiz{
        margin: 2% auto;
        background-image: url("../Image/quiz-header-small.jpg");
        padding-top: 150px;
    }
    .quiz-wrapper{
        height: 370px;
    }
}
@media (max-height: 620px) {
    .quiz-wrapper{
        height: 300px;
    }
}
@media (max-height: 550px) {
    .quiz-wrapper{
        height: 250px;
    }
}
@media (max-height: 510px) {
    .quiz-wrapper{
        height: 210px;
    }
}

.quiz{
    list-style-type: decimal;
    margin: 5px 70px;
    padding: 0;
}
.quiz label{
    display: block;
}
.quiz .fill input{
    width: 100%;
    padding: 5px;
    border: 0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.okgo{
    background: url("../Image/quiz-line.png") top center no-repeat;
    text-align: center;
    padding-top: 20px;
}
.okgo input{
    padding: 8px 40px;
    background: #f1be0f;
    font-size: 1.5em;
    color: #222;
    border: 0;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s; /* Safari */
}
.okgo input:hover{
    background: #fece2a;
    color: #444;
}
.okgo input:active{
    background: #c59902;
    color: #111;
}



 /* Log in */
.pop-login{
    width: 600px;
    margin: 3% auto;
    background: #141615;
    border: 1px solid #666;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding-top: 0px;
    overflow: hidden;
    position: relative;
    display: none;
}
.pop-login h2{
    text-align: center;
    color: #f1be0f;
    text-transform: uppercase;
    font-size: 2em;
    margin: 0.5em 0;
}

.pop-login .fb-login{
    width: 250px;
    font-size: 1.2em;
    padding-left: 50px;
    color: #fff;
    height: 45px;
    display: block;
    margin: 30px auto;
    line-height: 45px;
    background: #2d55a8 url("../Image/fb-login-icon.png") 10px center no-repeat;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s; /* Safari */
}

.pop-login .fb-login:hover{
    color: #f1be0f;
}



 /* pop-email */
.pop-email{
    width: 600px;
    margin: 3% auto;
    background: #141615;
    border: 1px solid #666;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    position: relative;
    overflow: hidden;
    display: none;
}
.pop-email h2{
    text-align: center;
    color: #f1be0f;
    text-transform: uppercase;
    font-size: 2em;
    margin: 0.5em 0;
}
.pop-email ul{
    list-style-type: none;
    margin: 0 100px 10px 100px;
    padding: 0;
}
.pop-email .fill input{
    padding: 8px 5px;
    width: 98%;
}





/*------ Prize Page ------*/

.sidekick{
    width: 1120px;
    margin: 0 auto;
    z-index: 2;
    position: relative;
    padding-bottom: 30px;
}

.sidekick:after{
    clear: both;
    content: '';
    display: block;
}
.sidekick .logo{
    width: 44%;
    float: left;
}

.sidekick .intro{
    width: 55%;
    float: right;
}
.sidekick h1{
    width: 600px;
    height: 110px;
}
.sidekick h1 span{
    width: 600px;
    height: 110px;
    display: block;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-size: cover;
}
.sidekick .slogan{
    text-align: center;
    height: 190px;
    background: url("../Image/slogan-bg.png") -40px -20px no-repeat;
}
.sidekick .slogan img{
    float: left;
    width: 180px;
}
.sidekick .slogan h2{
    color: #f1be0f;
    font-weight: normal;
    padding-top: 30px;
    line-height: 1.5em;
    font-size: 1.4em;
}
.sidekick .slogan h3{
    font-weight: normal;
}


/*------ page content ------*/

.page-content{
    background: #222;
    z-index: 2;
    position: relative;
    width: 100%;
}

.page-inner{
    background: #222;
    width: 1050px;
    margin: 0 auto;
}
.page-inner:after{
    content: '';
    display: block;
    clear: both;
}

.prize-content h2{
    background: url("../Image/crown.png") left center no-repeat;
    padding-left: 65px;
    height: 50px;
    line-height: 50px;
    color: #f1be0f;
    font-size: 2em;
    clear: both;
    margin: 0 0 20px 0;
}
.prize-content a{
    color: #fff;
}
.prize-content a:hover{
    color: #f1be0f;
}

.prize-list{
    list-style-type: none;
    margin: 0 30px 50px 30px;
    padding: 0;
}
.prize-list:after{
    content: '';
    display: block;
    clear: both;
}
.prize-list li{
    margin: 0;
    padding: 0;
    float: left;
    width: 33%;
    height: 380px;
    text-align: center;
    border-right: 1px solid #444;
    border-bottom: 1px solid #444;
}
.prize-list li:nth-child(3){ border-right: 0;}
.prize-list li:nth-child(4){ border-bottom: 0;}
.prize-list li:nth-child(5){ border-bottom: 0;}
.prize-list li:nth-child(6){ border-right: 0; border-bottom: 0;}

.prize-list h3{
    color: #f1be0f;
    font-size: 2em;
    padding-bottom: 5px;
    margin: 10px 25%;
    font-weight: normal;
    border-bottom: 1px solid #f1be0f;
}
.prize-list h4{
    font-size: 1.2em;
    margin: 0;
    font-weight: normal;
}
.prize-list p{
    margin: 0;
    padding: 0 10px;
}


.big-prize{
    padding-bottom: 20px;
}
.big-prize:after{
    content: '';
    display: block;
    clear: both;
}
.big-prize img{
    float: left;
    padding-bottom: 20px;
}
.big-prize .big-prize-text{
    float: left;
    padding-left: 30px;
    font-size: 1.2em;
    width: 600px;
}
.big-prize .design-story{
    font-size: 0.8em;
}
.big-prize .spec{
    font-size: 0.8em;
}
.big-prize h4{
    font-weight: normal;
    padding-bottom: 5px;
    border-bottom: 1px solid #444;
}


.terms-content{
    padding-bottom: 30px;
}

.terms-content > p{
    margin-top: 0;
}
.terms-content > ul > li{
    list-style-type: disc;
}

.terms-content ul li{
    margin: 0.5em 0;
}

.terms-content a{
    color: #0aa5f6;
}
.terms-content a:hover{
    color: #f1be0f;
}