@charset "utf-8";

/*----螢幕寬度小於於1520px時----*/
/*----------------------------*/
@media screen and (max-width: 1520px){
        .theme-bg {
        min-height:70vh;
    }
}

/*----螢幕寬度小於於1330px時----*/
/*----------------------------*/
@media screen and (max-width: 1330px){
    .btn-right{
        transform: translate(-70%, -50%);}
}


/*----螢幕寬度小於於1280px時----*/
/*----------------------------*/
@media screen and (max-width: 1280px){
    .section-btnTop{bottom: 17%;}
    .btn-right{
        width: 125px;
        right: 0;
        top: -90px;
        transform: initial;
        left: initial;}

    .theme-bg {
        min-height: 74vh;
    }
}


/*----螢幕寬度小於於1260px時----*/
/*----------------------------*/
@media screen and (max-width: 1260px){
    .btnTop{transform: translateX(-100%);}
    .btnTop2{transform: translateX(-110%);}
}




/*----螢幕寬度小於於1250px時----*/
/*----------------------------*/
@media screen and (max-width: 1250px){
    .card.prize{
        div{
            span{margin-bottom: 50px;}
        }
    }
}



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

    span.row.doubleDetial { padding-top: 120px;}

}


/*----螢幕寬度小於於1043px時----*/
/*---------------------------*/
@media screen and (max-width: 1043px){
    
    span.row.doubleDetial { padding-top: 140px;}
        .theme-bg {
        min-height: 87vh;
    }

}


/*----螢幕寬度小於於931px時----*/
/*---------------------------*/
@media screen and (max-width: 931px){
    .card.prize{
        div{
            span:nth-of-type(1){display: none;}
            span:nth-of-type(4){display: inline-block;}
            }
        }
}


/*----螢幕寬度小於於895px時----*/
/*---------------------------*/
@media screen and (max-width: 895px){
    .missionTable {
        & > div {
            & > span {
                & > span {
                    > span.row {
                        flex-direction: column;
                    }
                }
            }
        }
    }
}


/*----螢幕寬度小於於856px時----*/
/*---------------------------*/
@media screen and (max-width: 856px){
    .card-wrap {
        & .card {
            & > div.coupon-wrap {
                & .coupon {
                    & > div {
                        & h4 {
                            span {
                                display: block;
                                text-align: left;
                                padding: initial;}}}}}}}
.theme-bg {
        min-height: 34vh;
    }

}


/*----螢幕寬度小於於850px時----*/
/*---------------------------*/
@media screen and (max-width: 850px){
    .card-wrap .card div:nth-of-type(1).accident-wrap{
        justify-content: start;}

    .scroll-notice.zone1{ display: block;}   
    
    .annuity-list {
        > a:nth-of-type(1) > div > span::before,
        > a:nth-of-type(2) > div > span::before,
        > a:nth-of-type(3) > div > span::before {
            top: 90px;
            width: 130px;}
        }
}


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


    .annuity-list > a > div { flex-direction: column;}
    .annuity-list > a > div > span { 
        margin-top: 8px;
        min-height: 140px;}

    .annuity-list > a > img{
		display: inline-block;
		margin-left: initial;
		margin-bottom: initial;}
    
    .annuity-list{
        > a:nth-of-type(1) > div::after,
        > a:nth-of-type(2) > div::after,
        > a:nth-of-type(3) > div::after{
            position: relative;
            text-align: right;
            left: initial;
            padding: 8px 0 0;
            bottom: initial;}
        }

      /*-- 選單 --*/
      .navi-warp{       
        position: fixed;
        right: initial;
        top: initial;
        transform: initial;
        background: rgb(224, 224, 224);
        width: 100%;
        height: auto;
        bottom: 0;
        left: 0;
        z-index: 1;}
    
    .navi-warp ul {
        margin: 0 auto;
        padding: 10px 4px;}
        
    .navi-warp ul li{
        flex: 1;
        color: #0dc7c9;
        font-size: 18px;
        font-weight: 600;
        line-height: 20px;
        padding: 15px 5px;
        border: 1px #0dc7c9 solid;
        margin: 0 2px;
        background: #ffF;
        border-radius: 6px;}
    
    .navi-warp ul li:hover, .navi-warp ul li:active{
        transform: translateY(-5px);}
    
    .navi-warp ul li:hover{
        background: #0dc7c9;
        color: #fff;
        transform: translateY(-5px);}
            
    /*錨點--*/
    #section2,
    #section3,
    #section4{top: -120px;}

    .steps::before, .steps::after {
        width: 15px;
        height: 30px;}
}


/*----螢幕寬度小於於730px時----*/
/*---------------------------*/
@media screen and (max-width: 730px){
    .navi-warp ul li{
        flex: 1;
        width: 70px;
        height: 40px;
        padding: 2px 10px;
        line-height: 32px;}
        
    .card-wrap.tips {
        & .card {
            > a {
                img:nth-of-type(1){display: none;}
                img:nth-of-type(2){display: inline-block;}
            }
        }
    }
    
    .card div.prize-notice a > span  > img:nth-of-type(1){display: none;}
    .card div.prize-notice a > span  > img:nth-of-type(2){display: inline-block;}

    .card-wrap {
    & .card.member {
        > div {
            flex-direction: column;
        }
    }
    .card-wrap {
    & .card.member {
        & > div {
            a {
                display: inline-block;
                width: 100%;
                max-width: 350px;
            }
        }
    }
}
}

  

}


/*----螢幕寬度小於於715px時----*/
/*---------------------------*/
@media screen and (max-width: 715px){
    
    span.row.doubleDetial { padding-top: 160px;}

}


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

    .theme-wrap {
        .theme {
            span.theme-pc{display: none;}
            span.theme-mb{display: inline-block;}
        }
    }

   
    .case-wrap {
        & .case {
            > div {
                flex-direction: column;

                > span{
                    width: 100%;
                }
            }
        }
    }

    .case-wrap .case > div.tab-wrap {
        max-width: 100%;
        top: -3%;}

    .theme-wrap .theme span span.theme-title::after {
        background: url(../images/shine-blue_m.png) center no-repeat;
        background-size: contain;}  

    .theme-wrap .theme span span.theme-title::before {
        background: url(../images/shine-pink_m.png) center no-repeat;
        background-size: contain;}  

    .theme-bg {
        min-height: 61vh;
    }
        }


/*----螢幕寬度小於於670px時----*/
/*---------------------------*/
@media screen and (max-width: 670px){
    
    span.row.doubleDetial { padding-top: 180px;}

}


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



    .table > div {
        & div {
            > span {
                padding: 10px 0;
                font-size: 1.3em;
            }
        }
    }

    .missionTable {
        > div {
        font-size: 1.2em;
    }}

    .missionTable {
        & > div {
            > span:nth-of-type(1) {
                width: 60px;
                flex: initial;
            }
        }
    }
    
    span.row.doubleDetial {
        .detial{
		    width: 100%;

            ul{
                display: inline-block;
                width: 100%;
                padding-left: 20px;}
        }
    }

    span.row.doubleDetial { padding-top: 90px;}
}

/*----螢幕寬度小於於630px時----*/
/*---------------------------*/
@media screen and (max-width: 630px){
    .card-wrap{    
        .card{        
            > div{
                padding: 15px 0;

            > span{ width: 47%;}
            }
        }
    }
    
    .card-wrap{
        .card{	
            > div.m1,
            > div.m2,
            > div.m3{
                padding: 15px 0;

                > a {
                    width: 47%;}
                }
            }
        }

    #tip01, #tip02, #tip03 {top: -70px;}

    .card.prize {
        > div {

           > span::before {
                font-size: 0.9em;
                width: 50px;
                height: 50px;
                bottom: -85px;}

            span:hover::before, span:hover::before{
                bottom: -85px;}
            }
        }

        .pupUp {
            & ol {
                > span.mb {
                    display: flex;
                }
                > span.pc {
                    display: none;
                }
            }
        }

 }  


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

    .theme-bg {
        min-height: 51vh;
    }


    .menu-wrap {
        position: fixed;
        top: initial;
        background: #fff;
        bottom: 0;
        left: 0;
        z-index: 9;
        margin-bottom: 0;
        height: auto;
        align-items: center;

        .menu{
            padding: 0;

            a{                
                max-width: 160px;
                margin: 0 1%;
                img:nth-of-type(2){display: inline-block;}
                img:nth-of-type(1){display: none;}
            }
        }
    }
  

    .theme-wrap {
        .spotlight-r, .spotlight-l {
            width: 60%;
            height: 100%;
            top: -25px;}
        }

    /*Tab 手機版*/
    .tabs-wrap{
        height: auto;
        padding: 8px 0 0;

        span.tab {
            flex: 1;
            border-radius: 0;
            padding: 20px 3%;}

        span:nth-of-type(3).tab {min-width: 145px;}
    }

    .minssionQuick {
        a {
            flex: initial;
            width: 50%;}
        }

    .card.taAdvance-wrap > span{width: 48%;}

    .rules-wrap{ padding: 0 20px 20px;}
    .rules-title h2 > span{width: 67%;}

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

    .btn-right {
        width: 90px;
        top: -70px;}
        
}

/*----螢幕寬度小於於589px時----*/
/*---------------------------*/
@media screen and (max-width: 589px){
    
    span.row.doubleDetial { padding-top: 125px;}
            .theme-bg {
        min-height: 60vh;
    }
    .deco-curtain::after {
    max-width: 120px;}

}


/*----螢幕寬度小於於530px時----*/
/*--------------------------*/
@media screen and (max-width: 530px){
    .card-wrap {
        .card.prize {
            h3 {
                .w-break::after {
                    content: '';
                    display: block;
                }
            }
        }
    }

    .card-wrap .card > div.coupon-wrap .coupon { padding: 8px 8px;}
    .icon-coupon {
        position: absolute;
        top: 0;
        left: 0;}

    .card-wrap .card div.coupon-wrap .coupon > div h4 {
        padding-left: 90px;
        padding-bottom: 24px;
    }




}


/*----螢幕寬度小於於500px時----*/
/*--------------------------*/
@media screen and (max-width: 500px){
    .btn-close{
        width: 25px;
        height: 25px;
        padding: 25px;}

    .case-wrap {
        .case {margin-top: 5px;}
    }

    .table > div {
        div:nth-of-type(1) > span:nth-of-type(1)::before {
            max-width: 40%;
            line-height: 22px;
            padding: 10px 15%;
        }


}

            .missionTable{
	.number{
        font-size: 1.5em;}
}
}


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

/*     .card-wrap.tips > .card > h3:nth-of-type(1) > span{
        display: block;} */
    .card-wrap.tips > .card > h3:nth-of-type(1)::after{
        left: 70%;}
}



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

    .table > div {
        & div {
            > span {
                font-size: 1em;
                min-height: 140px;
            }
        }
    }

    .table > div {
        & div {
            > span:nth-of-type(1) {
                flex: 3;
            }
        }
    }    
    .theme h1{
        height: 180px;
        font-size: 5em;
        padding-left: 2%;}
    .theme-bg {
        min-height: 37vh;
    }
/*     .navi-warp ul{
        align-items: center;
        padding: 15px 2%;}
    .navi-warp ul a {flex: 1;}
    .navi-warp ul a li{
        letter-spacing: 1px;
        padding: 8px 12px;} */

}

/*----螢幕寬度小於於419px時----*/
/*---------------------------*/
@media screen and (max-width: 419px){
    
    span.row.doubleDetial { padding-top: 180px;}
    .theme-bg {
        min-height: 37vh;
    }

}


/*----螢幕寬度小於於390px時----*/
/*--------------------------*/
@media screen and (max-width: 390px){
    .navi-warp ul li{ padding: 2px 2px;}
    }



/*----螢幕寬度小於於388px時----*/
/*---------------------------*/
@media screen and (max-width: 388px){
    
    span.row.doubleDetial { padding-top: 185px;}
    .missionTable {
        a {
            padding: 8px 12px;
            font-size: 0.7em;}
    }
        .theme-bg {
        min-height: 46vh;
    }

}



/*----螢幕寬度小於於360px時----*/
/*--------------------------*/
@media screen and (max-width: 360px){
    .table > div {
        div:nth-of-type(1) > span:nth-of-type(1)::before {
            max-width: 50%;}
        }   
            .missionTable{
	.number{
        font-size: 1.4em;}

}
        .theme-bg {
        min-height: 40vh;
    }

}

/*----螢幕寬度小於於330px時----*/
/*--------------------------*/
@media screen and (max-width: 330px){
    .navi-warp ul li {
        padding: 2px 15px;
        line-height: 18px;}

}


/*------------iPhone5-------*/
/*--------------------------*/
@media screen and (max-width: 320px){
    .navi-warp ul li {padding: 2px 10px;}
    .section-btnTop{bottom: 25%;}
}