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

/*----螢幕寬度小於1200px時----*/
/*--------------------------*/
@media screen and (max-width: 1200px){
    .s4Gift-wrap > div:nth-of-type(3){ margin: 100px 0px 100px;}
}


/*----螢幕寬度小於1120px時----*/
/*--------------------------*/
@media screen and (max-width: 1120px){
    .s3-wrap > h2 > span{display: block;}
    .s3-wrap > h2 > span::before{content:'';}
}

/*----螢幕寬度小於1100px時----*/
/*--------------------------*/
@media screen and (max-width: 1100px){
    .theme-wrap .theme-gift {
        left: 2%;
        bottom: 2%;}

    .s3-wrap > p{text-align: left;}
}


/*----螢幕寬度小於1070px時----*/
/*--------------------------*/
@media screen and (max-width: 1070px){
    .stars5-wrap > .advantage-card{
        width: 270px;
        margin: 20px 10px;}

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

/*----螢幕寬度小於1050px時----*/
/*--------------------------*/
@media screen and (max-width: 1070px){
    .s2-wrap > h2 > span{display: block;}
    .s2-wrap > h2 > span::before{content: '';}
}




/*----螢幕寬度小於1020px時----*/
/*--------------------------*/
@media screen and (max-width: 1020px){
    .stars5-wrap > .advantage-card.card2{
        width: 45%;
        min-height: 400px;
        padding-top: 30px;}

}

/*----螢幕寬度小於970px時----*/
/*--------------------------*/
@media screen and (max-width: 970px){
    .s2-wrap > p{text-align: left;}

}





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

    .stars5-wrap > .advantage-card{
        width: 30%;
        min-height: 270px;}

    .stars5-wrap > .advantage-card > h3{font-size: 24px;}
    .advantage-tag1, .advantage-tag2, .advantage-tag3{width: 100%;}
    .advantage-tag1 > img, .advantage-tag2 > img, .advantage-tag3 > img{
        position: absolute;
        width: 90%;
        left: 0;
        top: 2px;}

    .stars5-wrap > .advantage-card.card2{
        width: 100%;
        min-height: initial;
        margin: 20px 10px;}

    .s2-wrap .s2{padding: 20px;}
    
    .s2-wrap .s2 .wwh-wrap > div > h3{
        font-size: 26px;
        line-height: 30px;}

    .s2-wrap .s2 .wwh-wrap > div > h4{
        font-size: 24px;
        line-height: 30px;
        padding-left: 5px;
        margin: 15px 0px;}

    .s3-wrap > div > h3 {
        text-align: justify;
        font-size: 24px;
        padding: 0 20px;}    

    /*----預載Loading----*/
    .loader{
        background: rgba(255, 255, 255, 0.8) url(../images/loading.svg) center no-repeat;
        background-size: 10%;}

}


/*----螢幕寬度小於825px時-----*/
/*---------------------------*/
@media screen and (max-width: 825px){
    .s4Gift-wrap{
        padding: initial;}
    .s4Gift-wrap > div{ margin: 100px 0px 100px;}


}

/*----螢幕寬度小於799px時-----*/
/*---------------------------*/
@media screen and (max-width: 799px){
    .stars5-wrap > .advantage-card > h3 {
        font-size: 20px;}

    /*選單*/
    .navi-wrap{
        position: fixed;
        width: 100%;
        flex-direction: row;
        left: 0;
        bottom: 0;
        padding: 10px;
        background: linear-gradient(130deg, rgb(187, 107, 3) 9%, rgb(207, 125, 17) 20%, rgb(155, 93, 13) 73%);}             
 
}


/*----螢幕寬度小於760px時-----*/
/*---------------------------*/
@media screen and (max-width: 760px){
    .popUp-wrap .popUp h2{font-size: 36px;}
    .popUp-wrap .popUp {padding: 40px 2%;}
      
}


/*----螢幕寬度小於於730px時----*/
/*--------------------------*/
@media screen and (max-width: 730px){
    .stars5-wrap > .advantage-card{width: 270px;}
    .advantage-tag1, .advantage-tag2, .advantage-tag3{width: initial;}
    .advantage-tag1 > img, .advantage-tag2 > img, .advantage-tag3 > img{
        width: initial;}
}


/*----螢幕寬度小於於680px時----*/
/*--------------------------*/
@media screen and (max-width: 680px){
    /*主視覺：標*/
    .theme-wrap .theme h1,
	.theme-wrap .theme h2{width: 80%;}
    .theme-wrap .theme h1 > img,
	.theme-wrap .theme h2 > img{width: 100%;}
    .theme-wrap .theme h1.theme-g::after{
        width: 34%;
        background-position: top;}
}



/*----螢幕寬度小於於640px時----*/
/*---------------------------*/
@media screen and (max-width: 640px){
    .feature-2 > div.flex-column > div:nth-of-type(2){
        flex-direction: column;
        margin: 20px auto 0;}
    .feature-2 > div.flex-column > div:nth-of-type(2) > div:nth-of-type(1){
         margin-bottom: 40px;}
    .feature-2 > div.flex-column > div:nth-of-type(2) > div:nth-of-type(2){
         margin-top: 40px;}
    div.deco-arrow{
        top: 40%;
        transform: translate(-50%,-50%) rotate(0deg);}
		/*箭頭動畫*/
		@keyframes decoArrow-ani{
			0%{transform: translate( -50%, 0) rotate(180deg);}
			50%{transform: translate( -50%, -15px) rotate(180deg);}
			100%{transform: translate( -50%, 0) rotate(180deg);}
		}
    .feature-2 > div > div > table tr th:nth-of-type(1){width:25%;}
    .feature-2 > div > div > table tr th{width: 18%;}
}

/*----螢幕寬度小於於625px時----*/
/*---------------------------*/
@media screen and (max-width: 625px){
    .popUp-wrap .popUp > div {height: calc(100% - 100px);}
    .popUp-wrap .popUp {
        width: 90%;
        height: 90%;}
}


/*----螢幕寬度小於於620px時----*/
/*---------------------------*/
@media screen and (max-width: 620px){
    .s3-wrap .s3 > div{
        flex: initial;}
    .s3-wrap .s3 > div > span{width: 100%;}
    .s3-wrap .s3 > div > span > img{width: 80%;}

    /*選單*/    
    .navi-wrap > a {max-width: 70px;}
    .navi-wrap > a:last-child {
        max-width: 50px;
        min-width: 50px;}  

}



/*----螢幕寬度小於於600px時----*/
/*---------------------------*/
@media screen and (max-width: 600px){
    
    /*主視覺*/
    .theme-wrap .theme-gift {width: 40%;}
    .theme-wrap .theme-gift > img{width: 100%;}
    .theme-wrap .theme-tag {
        left: 50%;
        transform: translateX(-50%);}

    .stars5-wrap > .advantage-card {
        width: 70%;
        min-height: auto;}

    .s2-wrap .s2 .wwh-wrap > div{padding: 20px 10px 20px 100px;}
    .s2-wrap .s2 .wwh-wrap > div > p{
        padding-left: 0;
        font-size: 17px;
        font-weight: 400;}

    .btnTop-Wrap{right: 35px;}
    .btn-action1, .btn-action2 {
        display: inline-block;
        width: 70px;
        height: 70px;}


    .s3-wrap > div:nth-of-type(2) > p{
        text-align: left;
        padding: 0 20px;}


    @keyframes falling-ani{
        0%{transform: translateY(-100px) rotate(0);}
        50%{transform: translateY(900px) rotate(-720deg);}
        100%{transform: translateY(1800px) rotate(-1440deg);}
        }        

    .btn-close{top: 2%;}

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

    footer .announce{text-align: left;}

}


/*----螢幕寬度小於於545px時----*/
/*--------------------------*/
@media screen and (max-width: 545px){
    .s2-wrap  h2 {font-size: 32px;}
}



/*----螢幕寬度小於於500px時----*/
/*--------------------------*/
@media screen and (max-width: 500px){
    h2{font-size: 32px;
        margin: 30px 0;}
  
    .feature-2 > div {flex-direction: column;}
    .feature-2 > div > div:nth-of-type(2) {
        margin-top: 30px;}

    .feature-3{flex-direction: column;}
    .feature-3 > div:nth-of-type(1){margin: 0;}
    .feature-3 > div:nth-of-type(2){margin: 0;margin-top: 20px;}
    .feature-3 > div > div > div:nth-of-type(1){min-height: initial;}

}




/*----螢幕寬度小於於435px時----*/
/*--------------------------*/
@media (max-width: 435px){
    .s4-wrap .s4 > h2 > span{font-size: 40px;}
    .deco-gift1,
    .deco-gift3{width: 80%;}
    .deco-gift2-2{
        right: 0;
        width: 60%;}
    .deco-gift2-1 {             
        width: 50%;
        left: 0;}


}

/*----螢幕寬度小於於475px時----*/
/*--------------------------*/
@media (max-width: 475px){
    .s2-wrap > h2, .s3-wrap > h2{
        font-size: 28px;
        text-align: justify;
        line-height: 36px;
        margin-bottom: 5px;}

    .s2-wrap > h2 > span, .s3-wrap > h2 > span{display: initial;}
    .s2-wrap > h2 span::before, .s3-wrap > h2 span::before{content: '，';}
}

/*----螢幕寬度小於於414px時----*/
/*--------------------------*/
@media (max-width: 414px){
    h2{padding: 0 5%;}
    .stars5-wrap > .advantage-card {width: 100%;}
    .stars5-wrap > .advantage-card > h3 { font-size: 24px;}
    .s4-wrap .s4 > h2 > span{font-size: 36px;}

}


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

}


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

    .navi-wrap > a {
        min-width: 58px;
        font-size: 15px;
        margin: 0;}

    .navi-wrap > a:last-child {min-width: 50px;}
}


/*------------iPhone5-------*/
/*--------------------------*/
@media screen and (max-width: 340px){
    .fivepercent{
        font-size: 16px;
        right: -36px;
        top: 0px;}
}
/*------------iPhone5-------*/
/*--------------------------*/
@media screen and (max-width: 320px){
    .s4-wrap .s4 > h2 > span{font-size: 28px;}
}