/*----螢幕寬度小於1400px時----*/
/*---------------------------*/
@media screen and (max-width: 1400px){
    .theme-flags{
        width: 150%;
        top:-20px;
        background-size: contain;}
    .theme-bottombg{
        background-size: contain;
        background-position: bottom center;}
}

/*----螢幕寬度小於1355px時----*/
/*---------------------------*/
@media screen and (max-width: 1355px){
    .btnRight-wrap{
        width: 120px;
        height: 120px;
        transform: initial;
        left: initial;
        right: -40px;
        top: -120px;}
}


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


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


/*----螢幕寬度小於於1110px時----*/
/*----------------------------*/
@media screen and (max-width: 1110px){
    .deco-slogan .slogan-pc{width: 90%;}
    .section-btnTop{bottom: 35%;}
}


/*----螢幕寬度小於於1080px時----*/
/*---------------------------*/
@media screen and (max-width: 1080px){
    .sayhi2023, .beybye2022{top: 10%;}
}


/*----螢幕寬度小於於925px時----*/
/*---------------------------*/
@media screen and (max-width: 925px){
     .prize-wrap{flex-direction: column;}
     .prize-wrap .prize{
        width: 90%;
        margin: 20px auto;}
}


/*----螢幕寬度小於於800px時----*/
/*---------------------------*/
@media screen and (max-width: 800px){
     .theme-wrap{
        height: 520px;
        margin-bottom: 50px;}
}


/*----螢幕寬度小於於660px時----*/
/*---------------------------*/
@media screen and (max-width: 660px){
    .theme-wrap{ height: 460px;} 
    .theme-family > span{margin: 0 10px;}
    .deco-slogan .slogan-pc{display: none;}
    .deco-slogan .slogan-mb{
        width: 90%;
        display: inline-block;}    
}


/*----螢幕寬度小於於625px時----*/
/*---------------------------*/
@media screen and (max-width: 625px){
    .actBtn-wrap a{
        min-width: 230px;
        height: 142px;}
}


/*----螢幕寬度小於於600px時----*/
/*---------------------------*/
@media screen and (max-width: 600px){
    .theme-wrap .theme .theme-title span.title1{
        bottom: -30px;
        width: 80%;}
    .prize-wrap .prize{padding-top: 90px;}
    .prize-title1{
        max-width: initial;
        height: 70px;
        background: #6ec9ef url(../images/prize1-title.png) left center no-repeat;
        background-size: contain;
        border-radius: 20px 20px 0 0;}
    
    .prize-title2{
        max-width: initial;
        height: 70px;
        background: #ee86b4 url(../images/prize2-title.png) left center no-repeat;
        background-size: contain;
        border-radius: 20px 20px 0 0;}

    .prize-wrap .prize:nth-of-type(2)::after{top:-60px;}
    .prize-wrap .prize p{
        font-size: 20px;
        line-height: 30px;}

    .p-pink, 
    .p-green{font-size: 32px;}

    .sayhi2023{
        top: initial;
        bottom: 0;
        left: 26%;}

    .beybye2022 {        
        top: initial;
        bottom: 0;
        right: 26%;}

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

    .btnRight-wrap{
        width: 100px;
        height: 100px;
        top: -100px;}        
}


/*----螢幕寬度小於於540px時----*/
/*---------------------------*/
@media screen and (max-width: 540px){
    .actBtn-wrap a {
        min-width: 220px;
        height: 140px;}
}


/*----螢幕寬度小於於520px時----*/
/*---------------------------*/
@media screen and (max-width: 520px){
    .theme-wrap{ height: 410px;} 
    .theme-wrap .theme .theme-title span.titledate{width: 70%;}
    .actBtn-wrap a {
        min-width: 190px;
        height: 110px;}
}


/*----螢幕寬度小於於500px時----*/
/*--------------------------*/
@media (max-width: 500px){
    .theme-wrap .theme .theme-title span.title1{
        bottom: -25px;}

    .theme-family > span{margin: 0 5px;}
    .section-btnTop{bottom: 14%;}
    .prize-wrap .prize:nth-of-type(2)::after{width: 50%;}
}


/*----螢幕寬度小於於460px時----*/
/*--------------------------*/
@media (max-width: 460px){
    .theme-wrap{ height: 370px;} 
    .actBtn-wrap{ padding: 2%;}
    .actBtn-wrap a {
        min-width: 45%;
        height: 110px;
        margin: 5px;}

    .gift{ text-align: left;}
    .gift > img{ width: 70%;}
}


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


/*------------螢幕寬度小於於350px時-------*/
/*---------------------------------------*/
@media screen and (max-width: 350px){
    .actBtn-wrap a {
        min-width: 230px;
        height: 140px;
        margin: 5px;}

    .theme-wrap{ height: 280px;}
    .theme-wrap .theme .theme-title span.titledate{ top: -10px;} 
  
}

/*------------iPhone5-------*/
/*--------------------------*/
@media screen and (max-width: 320px){
    .theme-wrap { height: 265px;}

}