@charset "utf-8";

/*----螢幕寬度小於1485px時----*/
/*---------------------------*/
@media screen and (max-width: 1486px){
    .btnTop-Wrap{right: 75px;}
}


/*----螢幕寬度小於1205px時----*/
/*---------------------------*/
@media screen and (max-width: 1205px){
    .rightBN-wrap{transform: translateX(-65%);}
}


/*----螢幕寬度小於1075px時----*/
/*---------------------------*/
@media screen and (max-width: 1075px){
    .pro-wrap{
        position: relative;
        padding-left: initial;}

    .tab-planet{
        width: 100%;
        min-width: initial;}

    .tab-planet > span#tab4::before{ width: 76%;}
    .card{font-size: 0.8em;}
}


/*----螢幕寬度小於於1015px時----*/
/*---------------------------*/
@media screen and (max-width: 1015px){
    
    .prize-card{max-width: 48%;}
    .prize-card > span > img{
        left: 50%;
        width: 140%;
        transform: translate(-56%,-10%);}

    .prize-card:nth-of-type(1) > span > img{
        width: 100%;
        left: initial;
        transform: initial;}

    .prize-wrap .prize{padding: 100px 2% 70px;}
}


/*----螢幕寬度小於於926px時----*/
/*---------------------------*/
@media screen and (max-width: 926px){
    .theme-spaceman{right: -5%;}
}


/*----螢幕寬度小於於875px時----*/
/*---------------------------*/
@media screen and (max-width: 875px){
    .steps-wrap .steps > span{
        flex: initial;
        width: 48.5%;
    }
}


/*----螢幕寬度小於於855px時----*/
/*---------------------------*/
@media screen and (max-width: 855px){
    .btnTop-Wrap {right: 55px;}
    footer{
        text-align: left;
        margin-bottom: 55px;}
    footer .announce{text-align: left;}
}


/*----螢幕寬度小於於820px時----*/
/*---------------------------*/
@media screen and (max-width: 820px){
    /*-- 選單 --*/
    .navi-warp{       
        position: fixed;
        right: initial;
        top: initial;
        transform: initial;
        background: #022957;
        width: 100%;
        height: auto;
        bottom: 0;
        left: 0;
        z-index: 1;}

    .navi-warp ul {
        margin: 0 auto;
        padding: 10px 4px;}
        
    .navi-warp ul li{
        flex: 1;
        border: 2px transparent solid;
        padding: 5px 15px;
        border-radius: 0px;
        border-left: 1px solid;}

    .navi-warp ul li:nth-of-type(1){
        border-left: transparent 1px solid;}

    .navi-warp ul li:hover,
    .navi-warp ul li:active{
       color: #ffff00;}

    .navi-warp ul li:hover::after,
    .navi-warp ul li:active::after{
        content: '▼';
        position: absolute;
        display: inline-block;
        width: 100%;
        left: 50%;
        top: -20px;
        transform: translateX(-50%);
        font-size: 12px;
        color: #ffff00;
        animation: navi-arrow-ani 1s ease infinite;}
        @keyframes navi-arrow-ani {
            0%{ transform: translate(-50%, -5px);}
            50%{ transform: translate(-50%, 0px);}
            100%{ transform: translate(-50%,-5px);}
        }

    .navi-warp ul li:nth-of-type(3):hover::after,
    .navi-warp ul li:nth-of-type(3):active::after{top: -15px;}
    .navi-warp ul li:hover a,
    .navi-warp ul li:active a{color: #fff;} 
    .navi-warp ul li span::before{font-weight: 400;}

    .section-title{text-align: center;}
}


/*----螢幕高度小於於750px時----*/
/*---------------------------*/
@media screen and (max-height: 750px){
    .section-btnTop {bottom: 20%;}
}


/*----螢幕寬度小於於764px時----*/
/*---------------------------*/
@media screen and (max-width: 764px){
    .rightBN-wrap{width: 180px;}
}

/*----螢幕寬度小於於750px時----*/
/*---------------------------*/
@media screen and (max-width: 750px){
    .card{padding: 10px 2% 40px 2%;}
    .deco-planet{
        position: relative;
        width:300%;
        height: 250px;
        left: initial;
        top: initial;
        transform: initial;
        margin: 0 auto;
        pointer-events: none;}
        @keyframes deco-planet-ani{
            0%{	transform: translateY(5%);}
            50%{ transform: translateY(15%);}
            100%{ transform: translateY(5%);}
        }

    .deco-planet.planet4{
        max-width: initial;
        width: initial;
        max-height: initial;
        height: 250px;
        left: initial;
        top: initial;}

    .card-content h3{
        left: 50%;
        transform: translateX(-50%);}

    .subtitle{ display: block;}
    .card-content h4{
        text-align: center;
        padding: 10px 0;}

    #plant4 .card-content h4{ padding: 20px 0 0px 0;}

    .card-note{ text-align: center;}
    .card-content ul {
        width: 80%;
        margin: 0 auto;}

    .deco-rocket{
        width: 50%;
        height: 50%;
        left: 20%;
        bottom: -25%;}      
}


/*----螢幕寬度小於於700px時----*/
/*---------------------------*/
@media screen and (max-width: 700px){
    .steps-wrap{padding: 120px 2% 20px;}
}


/*----螢幕寬度小於於650px時----*/
/*---------------------------*/
@media screen and (max-width: 650px){
    .rightBN-wrap {
        width: 150px;
        top: -150px;}
}


/*----螢幕寬度小於於600px時----*/
/*---------------------------*/
@media screen and (max-width: 600px){

    .tab-planet > span:last-child{
        flex: initial;
        max-width: initial;
        width: 32%;}

    /*footer*/
    footer {text-align: left;}
    footer .announce{text-align: left;} 

    .steps-wrap { padding: 100px 2% 20px;}
    .deco-planet{ height: 200px;}
    body{background-size: 350%;}
}


/*----螢幕寬度小於於580px時----*/
/*---------------------------*/
@media screen and (max-width: 580px){
    .card-content ul li .w-break{display: inline-block;}
    .card-content ul {width: 90%;}
    .card .btn-wrap{justify-content: space-between;}
}


/*----螢幕寬度小於於547px時----*/
/*---------------------------*/
@media screen and (max-width: 547px){
    #plant4 h4 .w-break{ display: block;}
}

/*----螢幕寬度小於於538px時----*/
/*---------------------------*/
@media screen and (max-width: 538px){
    #plant1 h4 .w-break{ display: block;}
    #plant3 h4 .w-break{ display: block;}
}


/*----螢幕寬度小於於536px時----*/
/*---------------------------*/
@media screen and (max-width: 536px){
    #plant2 h4 .w-break{ display: block;}
}


/*----螢幕寬度小於於514px時----*/
/*---------------------------*/
@media screen and (max-width: 514px){
    .navi-warp .w-break{display: block;}
    footer {margin-bottom: 80px;}
}


/*----螢幕寬度小於於500px時----*/
/*---------------------------*/
@media screen and (max-width: 500px){
    .rightBN-wrap {
        width: 110px;
        top: -100px;}

    .steps-wrap { padding: 80px 2% 20px;}
}


/*----螢幕寬度小於於430px時----*/
/*---------------------------*/
@media screen and (max-width: 430px){
    .navi-warp .w-break{display: block;}
    .navi-warp ul li{padding: 5px 0px;}
    
    .prize-wrap{padding: 40px 2% 20px;}
    .prize-card{max-width: 90%;
        margin-bottom: -60px;}

    .prize-card > span > img{width: 100%;}
    .steps-wrap .steps{ padding: 100px 2% 40px;}
}


/*---螢幕寬度小於於400px時-----*/
/*--------------------------*/
@media screen and (max-width: 400px){
    .card { font-size: 0.64em;}
}


/*---螢幕寬度小於於350px時-----*/
/*--------------------------*/
@media screen and (max-width: 350px){
    .navi-warp ul li{font-size: 16px;}
    footer {margin-bottom: 70px;}
}


/*------------iPhone5-------*/
/*--------------------------*/
@media screen and (max-width: 320px){

}