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

    .deco-boatGirl{
        right: 2%;
        bottom: 120px;}

    .btn-wrap{right: 0;}
    .btn-wrap > a:nth-of-type(1){margin-right: 10px;}    
    .btn-wrap > a:nth-of-type(2){margin-left: 10px;}    
    .btnTop-Wrap{right: 52px;}

}


/*----螢幕寬度小於1235px時----*/
/*---------------------------*/
@media screen and (max-width: 1235px){
    .deco-people{left: 2%;}

}


/*----螢幕寬度小於於1200px時----*/
/*----------------------------*/
@media screen and (max-width: 1200px){
    .deco-whitecotton{background-size: contain;}

}


/*----螢幕寬度小於於1110px時----*/
/*----------------------------*/
@media screen and (max-width: 1110px){
    .deco-people{
        width: 30%;
        left: 20%;
        top: 90px;
        background-position: center;}

    .deco-boatGirl{width: 30%;}
    .section-btnTop{bottom: 35%;}
}


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

    .compaign-wrap{
        background-size: contain;
        padding-top: 120px;}

    .tag-slogan{
        width: 90%;
        top: -120px;}

    .btn-wrap{
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        top: initial;
        right: initial;}

    .btn-wrap > a{margin: 20px 30px;}
    .content{
        margin-right: initial;
        width: 100%;
        height: auto;
        background-position: top;
        padding: 40px;
        border-radius: 15px;
        margin: 20px 0;}

    .prize1{ 
        display: inline-block;
        width: 100%;        
        max-width: 485px;
        margin-left: initial;}

    .prize2{
        display: inline-block;
        width: 100%;        
        max-width: 485px;
        margin-right: initial;}

    .prize1 > img ,
    .prize2 > img {
        width: 100%;}

    .deco-prize1,
    .deco-prize2{
        width: 40%;
        height: 55%;
        top: -15px;
        right: -40px;
        left: initial;
        transform: initial;}

}


/*----螢幕寬度小於於940px時----*/
/*---------------------------*/
@media screen and (max-width: 940px){
    .actions-wrap div a{
        margin: 20px;
        width: 50%;}

    .actions-wrap div a img{width: 100%;}
}


/*----螢幕寬度小於於900px時----*/
/*---------------------------*/
@media screen and (max-width: 900px){
    .theme-wrap{height: 790px;}
    .tag-callcardOnly{
        top: 10px;
        width: 40%;
        max-width: 254px;}

}


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


}

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

    .deco-whale{
        left: 5%;
        width: 50%;
        background-position: center;}
        @keyframes whale-ani{
            0%{transform: translate(0,0);}
            50%{transform: translate(0,20px);}
            100%{transform: translate(0 , 0);}
        }
    
    .compaign-wrap{padding-top: 65px;}
}


/*----螢幕寬度小於於675px時----*/
/*---------------------------*/
@media screen and (max-width: 675px){
    .theme-wrap{height: 720px;}

}

/*----螢幕寬度小於於660px時----*/
/*---------------------------*/
@media screen and (max-width: 660px){
    .compaign-wrap{padding-top: 65px;}

    .btn-wrap > a{
        width: 50%;
        margin: 5px;}

    .btn-wrap > a > img{
        width: 100%;
        max-width: 289px;}

    .tag-slogan{
        width: 100%;
        left: 40%;}

    .btn-wrap > a:nth-of-type(1) > span,
    .btn-wrap > a:nth-of-type(2) > span{
        width: 58%;
        background-position: top center;
        background-size: contain;}
    
}
        

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

    .content{padding: 10px;}
    .prize1::after{
        bottom: -10px;
        width: 20%;}
        
    .prize2::after{width: 20%;}

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

    footer .announce{text-align: left;}
    .rightBN-wrap{
        width: 120px;
        height: 128px;
        top: -120px;}


}


/*----螢幕寬度小於於590px時----*/
/*--------------------------*/
@media (max-width: 590px){
    .theme-wrap{height: 650px;}
}



/*----螢幕寬度小於於550px時----*/
/*--------------------------*/
@media (max-width: 550px){
    .navi-warp ul li span{display: block;}


}


/*----螢幕寬度小於於500px時----*/
/*--------------------------*/
@media (max-width: 500px){
    .theme-wrap{height: 580px;}
    .deco-boatGirl{
        right: 10%;
        bottom: 100px;}

    .actions-wrap div{ flex-direction: column;}
    .actions-wrap div a{
        width: 60%;
        margin: 10px auto !important;}
    .actions-wrap div a:nth-of-type(1){margin-top: initial;}
    .actions-wrap div a:nth-of-type(2){margin-bottom: initial;}

    .deco-seaweed1,
    .deco-seaweed2{
        width: 20%;
        background-position: bottom center;}



    .section-btnTop{bottom: 14%;}
}


/*----螢幕寬度小於於470px時----*/
/*--------------------------*/
@media (max-width: 470px){
    .tag-slogan{top: -90px;}
}


/*----螢幕寬度小於於465px時----*/
/*--------------------------*/
@media (max-width: 465px){
    .compaign-wrap{padding-top: 35px;}
    
}



/*----螢幕寬度小於於440px時----*/
/*--------------------------*/
@media (max-width: 440px){
    .theme-wrap{height: 520px;}

}

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

}


/*----螢幕寬度小於於375px時----*/
/*--------------------------*/
@media (max-width: 375px){
    .navi-warp ul li{padding: 5px 10px;}

}


/*------------螢幕寬度小於於350px時-------*/
/*---------------------------------------*/
@media screen and (max-width: 350px){
    .theme-wrap{height: 480px;}
    .compaign-wrap{padding-top: 15px;}
}


/*------------iPhone5-------*/
/*--------------------------*/
@media screen and (max-width: 320px){
    .theme-wrap{height: 450px;}
    .navi-warp ul li{padding: 5px;}   

}