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


/*----螢幕寬度小於1280px時----*/
/*---------------------------*/
@media screen and (max-width: 1280px){
    .deco-raymond{
        right: 13%;
        bottom: -120px;}
}


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

}


/*----螢幕寬度小於於1110px時----*/
/*----------------------------*/
@media screen and (max-width: 1110px){
    .deco-alung{
        left: 4%; 
        bottom: -225px;}

    .deco-raymond{
        right: 6%;
        width: 35%;}

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



/*----螢幕寬度小於於1060px時----*/
/*-----------------------------*/
@media screen and (max-width: 1060px){
    .tips1-bonus{
        width: auto;
        text-align: center;
        padding: 5px 20px;}
    .tips1-bonus h3{width: 100%;}
    .tips1-bonus > span{
        top: 220%;
        left: 50%;
        transform: translate(-50%, -50%);
        right: initial;}
    /* bonus-ani */
	@keyframes bonus-ani{
		0%{transform: rotate(-1deg) translate(-50%, -50%);}
		50%{transform: rotate(1deg) translate(-50%, -50%);}
		100%{transform: rotate(-1deg) translate(-50%, -50%);}
	}

    .tips1-bonus::before{
        top: -50%;
        left: 50%;
        transform: translate(-50%, -50%);}

}


/*----螢幕寬度小於於1037px時----*/
/*---------------------------*/
@media screen and (max-width: 1037px){
    .tips-col2{width: 100%;}
    .tips-col2.t2-1{border-bottom: 1px #acacac dashed;}
    .tips-col2.t3-1{border-bottom: 1px #acacac dashed;}

    .tips-col2.t3-1 > div:nth-of-type(1) > h2::after{right: 20%;}
}


/*----螢幕寬度小於於900px時----*/
/*---------------------------*/
@media screen and (max-width: 900px){
    .tips-title > span {width: calc(50% - 290px);}
    .deco-birds{
        right: 10%;
        left: initial;
        width: 30%;}

}


/*----螢幕寬度小於於850px時----*/
/*---------------------------*/
@media screen and (max-width: 850px){
    .theme-wrap .theme{ padding: 20px;}
    .theme-wrap .theme > div{height: 500px;}
    .theme-wrap .theme div .theme-title{
        width: 90%;
        max-width: 545px;
        bottom: 25px;}

    .theme-wrap .theme div .theme-title img{
        width: 100%;}

    .theme-wrap .theme div .theme-winner{
        width: 90%;
        max-width: 496px;
        top: 5%;}
        
    .theme-wrap .theme div .theme-winner img{
        width: 100%;}

    .theme-wrap .theme div .theme-winner::after{width: 29.43%;}
    /*獎品*/
    .theme-wrap .theme div .theme-prize span:nth-of-type(1)> img{width: 31.5%;}  
    .theme-wrap .theme div .theme-prize span:nth-of-type(2)> img{width: 29.48%;} 
    .theme-wrap .theme div .theme-prize span:nth-of-type(3)> img{width: 29.85%;} 
    .theme-wrap .theme div .theme-prize span:nth-of-type(4)> img{width: 27.47%;} 
    .theme-wrap .theme div .theme-prize span:nth-of-type(5)> img{width: 24.17%;}  
    .theme-wrap .theme div .theme-prize span:nth-of-type(6)> img{width: 22.89%;} 

    /* 主視覺第二波 */
    .theme2-wrap .theme2{
        padding:200px 0 0;}
    
    .theme2-title span.deco-watermelon{left: 0;}
    .theme2-title span.deco-icepop{
        top: 70px;
        right: 0;}

}


/*----螢幕寬度小於於660px時----*/
/*---------------------------*/
@media screen and (max-width: 660px){
        /*-- 選單 --*/
        .navi-warp{       
            position: fixed;
            right: initial;
            top: initial;
            transform: initial;
            background: #1192b9;
            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: #ff1818;
            background: #fffb1b;}
        .navi-warp ul li:hover span, .navi-warp ul li:active span{
            color: #0e586e;}
        .navi-warp ul li:hover a,
        .navi-warp ul li:active a{color: #824505;}    
        .tips-wrap .tips{padding: 80px 5px 30px;}
}
        

/*----螢幕寬度小於於600px時----*/
/*---------------------------*/
@media screen and (max-width: 600px){
    .tips-wrap{padding: 40px 20px;}
    .tips-title > span{
        display: block;
        height: 2px;
        width: 90%;
        max-width: initial;
        margin: 0 auto;}
    .tips-row2{ padding: 0 10px;}

    /*footer*/
    footer {
        text-align: left;
        margin-bottom: 60px;}
    footer .announce{text-align: left;}
    .rightBN-wrap{
        width: 120px;
        height: 128px;
        top: -120px;}

    .deco-leashadow1,
    .deco-leashadow2{width: 150px;}



    /* 主視覺第二波 */
    .theme2-wrap .theme2{padding:0 ;}
    .theme2-title{position: relative;}
    #theme2-pc{display: none;}
    #theme2-mobile{
        width: 65%;
        max-width: 440px;
        display: inline-block;}

    .theme2-title span.deco-icepop{
        top: 70px;
        right: 20px;}

    .theme2-title span.deco-watermelon {
        left: 40px;
        bottom: 0;
        top: initial;}

    .theme2-wrap .theme2-alung{left: -10px;}
    .theme2-title::after{
        width: 85%;
        top: -30px;}

    .theme2-date{
        right: -15px;
        top: 0;}

}


/*----螢幕寬度小於於550px時----*/
/*--------------------------*/
@media (max-width: 550px){
    .navi-warp ul li span{display: block;}
    .theme-wrap{min-height: 535px;}
    .theme-wrap .theme > div{height: 450px;}
    .tips-title h1{font-size: 36px;}
    .tips-title h1::after{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50% , -110%);
        width: 25%;}

    .tips-prize {width: 100%;}
    .tips-prize span {
        top: 20px;
        max-width: 190px;
        width: 43.28%;}
    .tips-prize span > img {width: 100%;}
    .deco-tree {width: 25%;}

}


/*----螢幕寬度小於於500px時----*/
/*--------------------------*/
@media (max-width: 500px){
    .theme-wrap {min-height: 480px;}
    .theme-wrap .theme > div{height: 400px;}
    .section-btnTop{bottom: 14%;}
}


/*----螢幕寬度小於於465px時----*/
/*--------------------------*/
@media (max-width: 465px){
    .tips1-bonus{
        width: 90%;
        margin-top: 40px;}

    .tips1-bonus h3{font-size: 24px;}
    #rule1 > h3 > div{display: block;}
    #rule1 > h3 {text-align: center;}

    /* 主視覺第二波 */
    .theme2-wrap{ padding: 0 5px;}
}


/*----螢幕寬度小於於444px時----*/
/*--------------------------*/
@media (max-width: 444px){
    /* 選單 */
    .navi-warp ul li{font-size: 14px;}
    .navi-warp ul li span{
        font-size: 14px;
        line-height: 20px;
        display: block;}

    .tips-row2 div > h2{font-size: 30px;}
    .tips-row2 div > p{font-size: 20px;}

    /*-- 壽險、好好退休用 (文字區上下內距)--*/	
    #tips1 .tips-row2 > div:nth-of-type(1){padding: 40px 0 0px;}
    #tips4 .tips-row2 > div:nth-of-type(1){padding: 40px 0 0px;}
    /*--  旅平、年金險用 (文字區上下內距)--*/
    #tips2 .tips-col2 > div:nth-of-type(1){padding: 40px 0 0px;}
    #tips3 .tips-col2 > div:nth-of-type(1){padding: 40px 0 0px;}
    .tips-prize{margin-bottom: 0;}

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

}

/*----螢幕寬度小於於436px時----*/
/*--------------------------*/
@media (max-width: 436px){
    .tips1-bonus{padding: 5px;}
    .tips1-bonus > span{
        top: 200%;
        width: 100%;}
    .tips1-bonus > span img{
        width: 100%;
        max-width: 337px;}
    .tips1-bonus h3{font-size: 22px;}

}


/*----螢幕寬度小於於420px時----*/
/*--------------------------*/
@media (max-width: 420px){
    .theme-wrap {min-height: 450px;}
    .theme-wrap .theme{padding: 0 20px 0;}

    .tips-col2.t3-1 > div:nth-of-type(1) > h2::after{right: 20px;}
}


/*----螢幕寬度小於於380px時----*/
/*--------------------------*/
@media (max-width: 380px){
    .theme-wrap .theme > div{height: 370px;}
    .deco-alung{
        bottom: -200px;
        width: 30%;}
    .deco-raymond{width: 40%;}
}


/*----螢幕寬度小於於378px時----*/
/*--------------------------*/
@media (max-width: 378px){
    .tips1-bonus::before{
        top: -35%;
        width: 60px;
        height: 60px;}

}


/*----螢幕寬度小於於375px時----*/
/*--------------------------*/
@media (max-width: 375px){
    .theme-wrap {min-height: 400px;}
    .navi-warp ul li{padding: 5px 10px;}
    #rule1 > h3{font-size: 16px;}

}


/*------------螢幕寬度小於於350px時-------*/
/*---------------------------------------*/
@media screen and (max-width: 350px){
    .tips-col2.t3-1 > div:nth-of-type(1) > h2::after {
        right: 0px;
        top: -70px;
        width: 35%;}
}


/*------------iPhone5-------*/
/*--------------------------*/
@media screen and (max-width: 321px){
    .navi-warp ul li{padding: 5px;}   
    .theme-wrap{min-height: 365px;}
    .theme-wrap .theme > div {height: 315px;}
    .tips1-bonus h3 {
        font-size: 20px;
        padding: 5px 0;}
    .tips1-bonus > span{top: 170%;}
    .tips-row2 div > h2{font-size: 24px;}

}