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


/*----螢幕寬度小於於1235px時----*/
/*---------------------------*/
@media screen and (max-width: 1235px){
    .rightBN-wrap{
        left: initial;
        transform: initial;
        right: -46px;}

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

}


/*----螢幕寬度小於於950px時----*/
/*---------------------------*/
@media screen and (max-width: 950px){
    .cat3team-wrap{
        position: relative;
        width: initial;
        margin-top: 40px;}
    .download-wrap .download{padding: 25px 20px;}
    .download > div:nth-of-type(2){flex-wrap: wrap;}
    .deco-downloadLeft{
        position: relative;
        max-width: initial;}

    .cat-gym {
        display: inline-block;
        position: relative;
        width: auto;
        left: initial;
        transform: initial;
        bottom: initial;}
    
    .cat-gym::before{right: -40px;}
    .twkLogo {
        top: initial;
        margin-right: 30px;}
}


/*----螢幕寬度小於於730px時----*/
/*---------------------------*/
@media screen and (max-width: 730px){
    .theme-title > span > img{ width: 100%;}
    .cat-wrap span{flex: 1;}
    .cat-wrap span:nth-of-type(3){flex: 1.5;}
    .cat-wrap span img{width: 100%;}

    .game-content h2{width: 70%;}
    .game-content h2 > img {width: 100%;}
    span.gameFlag{width: 50% !important;}
    .game-content{padding:20px 2%;}
    .game-content > span:nth-of-type(3){display: inline-block;}
    .game-content > span > img{
        margin: 0 auto;
        width: 80%;}

    .game-content > span:nth-of-type(4) > img{max-width: 339px;}
    .game-content > span:nth-of-type(5) > img{max-width: 302px;width: 75%;}
    .section-btnTop{bottom:10% ;}

    .download-title{width: 50%;}
    .download-title img {
        width: 100%;
        max-width: 275px;}

    .rules-title{width: 50%;}
    .rules-title img {
        width: 100%;
        max-width: 189px;}
}


/*----螢幕寬度小於於560px時----*/
/*---------------------------*/
@media screen and (max-width: 560px){
    .theme > span:nth-of-type(2) > img{ width: 100%;}
    .theme > span:nth-of-type(3) > img{ width: 100%;}
    .theme > span:nth-of-type(3){bottom: 12%;}

}
        


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

    .game-date > div > span{margin-top: 20px;}
    .game-date > div > span > span:nth-of-type(2).signin > span,
    .game-date > div > span > span:nth-of-type(2).gaming > span{
        left: 10px;
        top: -25px;}
        @keyframes note2-ani{
            0%{ transform: translate(10px , 0);}
            50%{ transform: translate( 10px , -5px);}
            100%{ transform: translate(10px , 0);}
        }
    .game-date > div > span > span:nth-of-type(2).signin > span::before,
    .game-date > div > span > span:nth-of-type(2).gaming > span::before{
        left: 50%;
        top: initial;
        bottom: -12px;
        transform: translate(-50% , -50%) rotate(-90deg);
    }


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

	/*-- 主視覺 --*/
	.theme-wrap{
        background-color: #d6ffff;
        background-image: url(../images/themebg_m.png); 
        background-size: contain;}
    .deco-gameFlag{background-size: contain;}

    .logo-tw{
        top: -20px;
        width: 40%;}

    .game-prize > div > p:nth-of-type(1){font-size: 22px;}
    .game-wording > span,
    .game-date > div > ol >li{
        font-size: 18px;
        line-height: 34px;}

    .font32{font-size: 24px;}        
    .game-date > div > ol > li > span.note{
        font-size: 14px;
        line-height: 20px;
        display: block;
        text-align: left;}

    .game-date > div > ol > li::before{top: 3px;}
            
    .game-prize::before,
    .game-date::before{
        width: 60%;
        left: 0;}

    /*footer*/
    footer {
        text-align: left;
        margin-bottom: 60px;}
    footer .announce{text-align: left;}


    /*-- 選單 --*/
    .navi-warp{       
        position: fixed;
        right: initial;
        top: initial;
        transform: initial;
        background: #824505;
        width: 100%;
        height: auto;
        bottom: 0;
        left: 0;
        z-index: 1;}

    .navi-warp ul {
        margin: 0 auto;
        padding: 15px 10px;}
        
    .navi-warp ul li{border: 1px #fff solid;}
    .navi-warp ul li:hover,
    .navi-warp ul li:active{
        color: #824505;
        background: #fffb1b;}
    .navi-warp ul li:hover a,
    .navi-warp ul li:active a{color: #824505;}      

    .rightBN-wrap{
        width: 90px;
        height: 128px;
        top: -90px;}

}


/*----螢幕寬度小於於550px時----*/
/*--------------------------*/
@media screen and (max-width: 550px){
    .game-wording{
        margin: 10px 0;
        padding-right: initial;}

    .game-prize > div{
        padding:20px;
        background: #e8e6e6;
        box-shadow: 3px 5px 16px -10px rgb(0, 0, 0, 0.8);}

    .game-prize > div .prize-wrap{
        position: relative;
        top:initial;}

    .deco-pinGreen{right: 5%;}

    p.note{
        word-wrap: break-word;
        display: inline-block;}
    
    .game-date > div{padding: 20px;}

}


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

    .theme > span:nth-of-type(2) > img{top: 15px;}
    .cat-win::after{
        right: 0;
        width: 50%;}
        
    .cat-watch::after{width: 50%;}

    .btn-teamUp{width: 100%;}
    .btn-teamUp > img {width:90%;}
}


/*----螢幕寬度小於於475px時----*/
/*--------------------------*/
@media (max-width: 475px){
    .game-date > div > span{text-align: center;}
    .game-date > div > span > span:nth-of-type(2).signin,
    .game-date > div > span > span:nth-of-type(2).gaming{
        display: block;
        margin-top: 40px;}

    .game-date > div > span > span:nth-of-type(2).signin > span,
    .game-date > div > span > span:nth-of-type(2).gaming > span{
        left: initial;}       

}


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

    .game-prize > div{padding-top: 45px;}
    .game-date{padding: 10px;}
    .game-date > div{padding: 10px;}
    .cat3team-wrap > div:nth-of-type(1) > span > img, .cat-3team > img{width: 90%;}
    .navi-warp ul li{font-size: 14px;}
    .navi-warp ul li span{
        font-size: 14px;
        line-height: 20px;
        display: block;}

    /*footer*/
    footer{margin-bottom: 70px;}

}


/*----螢幕寬度小於於400px時----*/
/*--------------------------*/
@media (max-width: 400px){
    .theme-wrap{height: 450px;}
    .game-prize > div > span:nth-of-type(3){width: 100%;}
    .game-prize > div > span:nth-of-type(3) > img{width: 90%;}
}


/*----螢幕寬度小於於414px時----*/
/*--------------------------*/
@media (max-width: 414px){
    .theme-tag1,
    .theme-tag2{top: 30px;}
    .theme-moutain {background-size: 230%;}
    .deco-koi1{top: -150px;}
    .deco-koi2{top: -180px;}
    /*旅平險*/
    .s2-part1 > div > p {
        text-align: left;
        white-space: initial;}

    .section-btnTop{bottom: 20%;}
      

}


/*----螢幕寬度小於於375px時----*/
/*--------------------------*/
@media (max-width: 375px){
    .theme-wrap{height: 460px;}
    .game-prize > div .prize-wrap{
        width: 150px;
        height: 150px;}

    .game-prize > div .prize-wrap >img{width: 90%;}
    .download > div:nth-of-type(2) > a > img{min-width: initial;}

    .navi-warp ul li:nth-of-type(1){line-height: 40px;}
    .navi-warp ul li:nth-of-type(3){line-height: 40px;}
    .navi-warp ul li:nth-of-type(4){line-height: 40px;}
    
}


/*------------螢幕寬度小於於374px時-------*/
/*--------------------------*/
@media screen and (max-width: 374px){
    .navi-warp ul li:nth-of-type(1),
    .navi-warp ul li:nth-of-type(4){
        width: 55px;
        line-height: 20px;}

    .navi-warp ul li:nth-of-type(2){
        width: 100px;
        line-height: 20px;}
}

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

}