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


/*----螢幕寬度小於於1020px時----*/
/*---------------------------*/
@media screen and (max-width: 1290px){
    .theme-tiger{
        z-index: 1;
        bottom: -140px;}
}
    

/*----螢幕寬度小於於1070px時----*/
/*---------------------------*/
@media screen and (max-width: 1070px){
    .theme-5wrap{
        width: 28%;
        left: 68%;}
    .theme-5w{
        top: 61%;
        width: 46.54%;}
}


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

    .tiger-tail{
        top: 50%;
        height: 30%;
        width: 36.2%;}

    .theme-5w{
        top: 40%;
        right: -8%;}

    .tiger-hand{
        width: 26%;
        right: 37%;}
}


/*----螢幕寬度小於於810px時----*/
/*---------------------------*/
@media screen and (max-width: 810px){
    .theme-5wrap{
        width: 40%;
        left: 65%;
        top: 220px;
        transform: translate(-50% , 0%);}

    .theme-wnote {
        bottom: -206%;
        margin-left: 35%;
        bottom: -200%;
        transform: rotate(-15deg);
        width: 70%;}

    .theme-tiger {
        width: 46%;
        bottom: -80px;}   
        
    .theme-bus{
        bottom: inherit;
        top: 42%;
        z-index: 1;}

    .theme-bus span{width: 50px};
        
}


/*----螢幕寬度小於於740px時----*/
/*---------------------------*/
@media screen and (max-width: 740px){    
    .theme-whoo::after{
        width: 30%;
        left: -20%;}
}


/*----螢幕寬度小於於660px時----*/
/*---------------------------*/
@media screen and (max-width: 660px){
    .tiger-tail{
        left: 2%;
        top: 48%;}
}

    
/*----螢幕寬度小於於600px時----*/
/*---------------------------*/
@media screen and (max-width: 600px){
    
    /*主視覺*/
    .theme-whoo{width: 100%;}
    .theme-w1{width: 90%;}

    .deco-themeTag{
        width: 82%;
        margin-left: 20%;
        top: 16px;}

    .theme-whoo::after{
        left: 0;
        top: -70%;}

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



/*----螢幕寬度小於於500px時----*/
/*--------------------------*/
@media (max-width: 500px){
    .theme-wrap .theme{padding: 20px 0;}
    .theme-5wrap{width: 60%;}
    .theme-wnote {
        bottom: -206%;
        margin-left: 35%;}

    .theme-tiger{
        width: 55%;
        left: -13%;
        bottom: -100px;}

    .compaign-wrap .campaign span{margin: 40px 20px;}

    .compaign-wrap .campaign span:nth-of-type(1):before{
        right: -5%;
        width: 59%;
        top: -20%;}

    .compaign-wrap .campaign span:nth-of-type(2):before{
        top: -65px;
        width: 42%;}

    .compaign-wrap .campaign span:nth-of-type(1)::after{
        width: 24%;
        background-position-y: bottom;}
    .compaign-wrap .campaign span:nth-of-type(2)::after{
        width: 24%;
        background-position-y: top;}
    
}

/*----螢幕寬度小於於430px時----*/
/*--------------------------*/
@media (max-width: 430px){
    .rules{padding: 20px;}
    .rules-wrap{padding-top: 10px;}
}

/*----螢幕寬度小於於414px時----*/
/*--------------------------*/
@media (max-width: 414px){
    .m2-wrap .m2 > div:nth-of-type(2){width: 100%;}
    .m2-wrap .m2 > div:nth-of-type(2) > img{width: 90%;}
    .m3-wrap .m3 > div:nth-of-type(2){width: 100%;}
    .m3-wrap .m3 > div:nth-of-type(2) > img{width: 90%;}
    .btn-callcard{
        width: 120px;
        height: 120px;
        left: -60px;
        top: -120px;
    }    
}


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


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

}


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

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

}