@charset "utf-8";

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

}


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


/*----螢幕寬度小於1024px時----*/
/*---------------------------*/
@media screen and (max-width: 1024px){
    .prize-card .prize-card-list{width: 100%;}
}


/*----螢幕寬度小於於960px時----*/
/*---------------------------*/
@media screen and (max-width: 960px){
    .sec-wrap .sec > div{ flex: initial;}
    .section-title-wrap{ width: auto;}
    .sec-cnotent{width: auto;}
    .deco-buzzGifts{ 
        width: 100%;
        right: -2%;}
}


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


/*----螢幕寬度小於於900px時----*/
/*---------------------------*/
@media screen and (max-width: 900px){
    .theme-along{width: 30%;}
}


/*----螢幕寬度小於於880px時----*/
/*---------------------------*/
@media screen and (max-width: 880px){
    .deco-buzzGifts{ position: relative;}

    .prize-col{ flex-direction: column;}
    .prize-col .prize-card{ width: 100%;}

    .teamUp .steps-wrap{
        align-items: center;
        flex-direction: column;}

    .teamUp .steps{
        margin: 10px auto;}

    .teamUp-wrap .btn-wrap {
        position: fixed;
        width: 100%;
        right: initial;
        left: 50%;
        transform: translateX(-50%);
        top: initial;
        margin-right: initial;}
        
    .teamUp-wrap .btn-wrap {
        position: fixed;
        width: 85%;
        justify-content: center;
        right: initial;
        left: 50%;
        transform: translateX(-50%);
        top: -85px;}

    .teamUp-wrap .btn-wrap a{
        color: #fff;
        border-color: #fff;}

    .teamUp-wrap .btn-wrap a::after{
        background: url(../images/btn-arrowW.png) center no-repeat;
        background-size: contain;}


/*----螢幕寬度小於於855px時----*/
/*---------------------------*/
@media screen and (max-width: 855px){
    .sec-wrap .sec,
    .camp-100plants .plants100 .col {
        padding: 10px 2%;}

    .camp-certify .certify > div{padding: 30px 20px 10px;}

    .btnTop-Wrap {right: 55px;}
    footer{text-align: left;}
    footer .announce{text-align: left;}
}


/*----螢幕寬度小於於827px時----*/
/*---------------------------*/
@media screen and (max-width: 827px){
    .prize-card .prize-card-list{padding: 1%;}
    .prize-card .prize-card-list.main span{
        flex: initial;
        min-width: initial;
        width: 29%;}
}


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


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

    .deco-piece.camp4{ top: -40%;}
    #rule1 > h3 > div{display: block;}
    #rule1 > h3 {text-align: center;}

   /*-- 選單 --*/
   .navi-warp{       
        position: fixed;
        right: initial;
        top: initial;
        transform: initial;
        background: rgb(224, 224, 224);
        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;
        color: #0dc7c9;
        font-size: 18px;
        font-weight: 600;
        line-height: 20px;
        padding: 15px 5px;
        border: 1px #0dc7c9 solid;
        margin: 0 2px;
        background: #ffF;
        border-radius: 6px;}

    .navi-warp ul li:hover, .navi-warp ul li:active{
        transform: translateY(-5px);}

    .navi-warp ul li:hover{
        background: #0dc7c9;
        color: #fff;
        transform: translateY(-5px);}
    
    /*footer*/
    footer{margin-bottom: 88px;}
}


/*----螢幕寬度小於於700px時----*/
/*---------------------------*/
@media screen and (max-width: 700px){
    .theme-along{
        right: -2%;
        bottom: -127px;}

    .note-list.sp1{
        max-width: initial;
        margin-bottom: 20px;}
}


/*----螢幕寬度小於於688px時----*/
/*---------------------------*/
@media screen and (max-width: 688px){
    .navi-warp ul li {
        padding: 10px 2px;
        font-size: 16px;}
    .navi-warp ul li span.w-break{ display: block;}
}


/*----螢幕寬度小於於625px時----*/
/*---------------------------*/
@media screen and (max-width: 625px){
    .section-title-wrap.deco-plant h3 .w-break{ display: block;}
}


/*----螢幕寬度小於於600px時----*/
/*---------------------------*/
@media screen and (max-width: 600px){
    .container{font-size: 14px;}
    .theme-along{ bottom: -75px;}

    .teamUp-wrap{font-size: 14px;}
    .deco-theme-l{
        width: 80%;
        background-position: left;}

    .theme-along{width: 35%;
        animation: alungRun-ani 6s ease-in-out infinite ;}
        @keyframes alungRun-ani {
            0%{transform: translate(200px, 0);}
            40%{transform: translate(-140px, 0);}
            48%{transform: translate(-140px, -30px);}
            56%{transform: translate(-140px, 0);}
            60%{transform: translate(-140px, -30px);}
            68%{transform: translate(-140px, 0);}
            76%{transform: translate(-140px, 0);}
            100%{transform: translate(-550px, 0);}
        }

    #chart-pc{display: none;}
    #chart-mobile{display: inline-block;}

    .btn-wrap { justify-content: center;}
    .btn-wrap a{
        width: 50%;
        font-size: 1.1em;}

    .sec-wrap .sec > div:nth-of-type(2){
        width: 80%;
        margin-left: 10%;}

    .prize-card .prize-card-list{ padding: 0;}
    .prize-col .prize-card .prize-card-list span{
        flex: initial;
        width: 70%;}

    .prize-card{ padding: 15px 10px;}
    .note-list ul{
        padding: 10px;
        font-size: 1.1em;}

    .camp-100plants .plants100 .col{ padding: 0;}
    .camp-certify .certify > div{ padding: 20px 20px 10px;}
    .sec-wrap,
    .sec-wrap .sec > div,
    .sec-cnotent{padding: 10px 2%;}
    .company{padding: 0;}

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

}


/*----螢幕寬度小於於590px時----*/
/*--------------------------*/
@media screen and (max-width: 590px){
    .sec-pic span.deco-mobile2{
        left: 10%;
        top: -20%;}
}


/*----螢幕寬度小於於511px時----*/
/*--------------------------*/
@media screen and (max-width: 511px){
    .section-title-wrap.deco-certify h3 > .w-break{display: block;}
}


/*----螢幕寬度小於於500px時----*/
/*--------------------------*/
@media screen and (max-width: 500px){
    .steps-counting > div{width: 100%;}
    .theme-along{ width: 40%;}
    .prize-card .prize-card-list.main span{width: 42%;}
    .prize-card .prize-card-list.main span:nth-of-type(1){margin: 10px 20%;}
}


/*----螢幕寬度小於於470px時----*/
/*--------------------------*/
@media screen and (max-width: 470px){
    .sec-pic span.deco-mobile2 { top: -40%;}
    .theme h3 .w-break{
        display: block;
        height: 0;}

    .btn-wrap a{ width: 45%;}
}


/*----螢幕寬度小於於464px時----*/
/*--------------------------*/
@media screen and (max-width: 464px){
    .company .coGroup {width: 100%;}
    .company .coGroup > span{
        width: 100%;
        max-width: initial;
        min-width: 49%;}
}


/*----螢幕寬度小於於440x時----*/
/*--------------------------*/
@media screen and (max-width: 440px){
    
    .sec-cnotent p{font-size: 1.1em;}
    .theme-along{ width: 40%;}
    .steps-counting h4{font-size: 2.8em;}
}


/*----螢幕寬度小於於400px時----*/
/*--------------------------*/
@media screen and (max-width: 400px){
    .section-title-wrap{padding: 20px 2% 20px 100px;}
    .section-title-wrap.deco-walk::before, .section-title-wrap.deco-prize::before, .section-title-wrap.deco-plant::before, .section-title-wrap.deco-certify::before, .section-title-wrap.deco-idea::before, .section-title-wrap.deco-rule::before, .section-title-wrap.deco-addFriends::before, .section-title-wrap.deco-cooperate::before{
        width: 80px;
        height: 80px;}
    .sec-pic span{min-width: initial;}
    .deco-trees{right: 1%;}
    .steps-counting h4{font-size: 2.6em;}
    .theme-wrap{height: 40vh;}
}


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


/*----螢幕寬度小於於380px時----*/
/*--------------------------*/
@media screen and (max-width: 380px){
    .steps-counting h4{font-size: 2.4em;}
}


/*----螢幕寬度小於於375px時----*/
/*--------------------------*/
@media screen and (max-width: 375px){
    .card{min-width: 100%;}
    #rule1 > h3{font-size: 16px;}

    .news-content > a{ min-width: 100%;}
}


/*----螢幕寬度小於於360px時----*/
/*--------------------------*/
@media screen and (max-width: 360px){
    .section-title-wrap h3{font-size: 1.6em;}
}


/*----螢幕寬度小於於351px時----*/
/*--------------------------*/
@media screen and (max-width: 351px){
    .navi-warp ul li{font-size: 15px;}    
    footer {margin-bottom: 88px;}
    .deco-trees{width: 35%;}
    .steps-counting h4{font-size: 2em;}
}
    

/*----螢幕寬度小於於330px時----*/
/*--------------------------*/
@media screen and (max-width: 330px){
    footer {margin-bottom: 80px;}
}


/*------------iPhone5-------*/
/*--------------------------*/
@media screen and (max-width: 320px){
    .section-title-wrap h2{font-size: 1.2em;}

    .teamUp {height: calc(100% - 55px);}       

    .rightBN-wrap {top: -110px;}
    .rightBN-wrap a{width: 80px;}
    .section-btnTop{bottom: 25%;}

    .container{ font-size: 11px;}
    .scroll-btn { bottom: 0;}
}