@charset "utf-8";

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



/*----螢幕寬度小於於1000px時----*/
/*---------------------------*/
@media screen and (max-width: 1000px){
    .allStars-prize > div:nth-of-type(1):after,
    .allStars-prize > div:nth-of-type(2):after{
        top: 2%;}
}


/*----螢幕寬度小於於870px時----*/
/*---------------------------*/
@media screen and (max-width: 870px){
    .allStars-wrap > div{
        width: 46%;
        max-width: 46%;
        min-width: 46%;}

    .allStars-wrap > div > .act-wrap a{
        font-size: 18px;
        padding: 5px 10px;
        height: 42px;}

}


/*----螢幕寬度小於於855px時----*/
/*---------------------------*/
@media screen and (max-width: 855px){
    .btnTop-Wrap {right: 55px;}
    footer{text-align: left;}
    footer .announce{text-align: left;}
}


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

    .rightBN-wrap {top: -130px;}
    .rightBN-wrap a{width: 125px;}
    .rightBN-wrap > a > img{width: 100%;}    
}


/*----螢幕寬度小於於750px時----*/
/*---------------------------*/
@media screen and (max-width: 750px){
    .island-wrap{ padding: 20px 2%;}
    .island-wrap .island{ padding: 0;}
    .island-content{
        background: url(../images/island-bg-center_m.png) center repeat-y;
        background-size: contain;}

    img.mobile-head, 
    img.mobile-btm{
        display: inline-block;}

    img.pc-head,
    img.pc-btm{
        display: none;}

    .island-title{
        width: 70%;
        top: -55%;
        left: 40%;
        transform: translateX(-50%);}

    .subtitle{
        width: 65%;
        left: 50%;
        transform: translateX(-50%);
        bottom: -80%;}

    .tag-rate,
    .tag-taRate{
        width: 36%;
        right: 5%;
        top: -15%;}        

    .island-content{padding: 70px 9% 0;}
    .deco-twinTree{ bottom: 3%;}
    .deco-singleTree {
        width: 7%;
        left: 7%;
        bottom: 3%;}

    #pc-map{display: none;}
    #mobile-map{display: inline-block;}
    .lifeinsure-prize{display: none;}
    .lifeinsure-prize.p2{
        display: inline-block;
        margin: 0;
        margin-top: 5%;}

    .deco-dot:nth-of-type(1){
        top: 20px;
        left: 20px;}

    .deco-dot:nth-of-type(2){
        top: 20px;
        right: 20px;}

    .deco-dot:nth-of-type(3){
        bottom: 20px;
        left: 20px;}

    .deco-dot:nth-of-type(4){
        bottom: 20px;
        right: 20px;}        
}



/*----螢幕寬度小於於730px時----*/
/*---------------------------*/
@media screen and (max-width: 730px){
    .allStars-wrap > div {
        width: 50%;
        max-width: 48%;
        min-width: 48%;
        margin: 20px 1%;
}


/*----螢幕寬度小於於700px時----*/
/*---------------------------*/
@media screen and (max-width: 700px){
    .theme-alung {
        width: 25%;
        height: 36%;}

    .theme-title1 {
        width: 65%;
        top: 10%;}

    .theme-title2 {
        width: 65%;
        top: 37%;}

    .theme-treasurebox{right: 8%;}
    .theme-date {
        width: 13%;
        top: -10%;
        right: 3%;}

    .theme-subflag {
        width: 60%;
        height: 60%;
        left: 2%;
        top: -43%;}

    .clouds-wrap.island > span:nth-of-type(2){bottom: 4%;}
    .island-content > div{padding: 8px;}

    #rule1 > h3 > div{display: block;}
    #rule1 > h3 {text-align: center;}

   /*-- 選單 --*/
   .navi-warp{       
    position: fixed;
    right: initial;
    top: initial;
    transform: initial;
    background: #dbae5e;
    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: #896019;
        border: 2px transparent solid;
        font-size: 18px;
        font-weight: 600;
        line-height: 20px;
        padding: 10px 5px;
        border: 0 solid;
        margin: 0 2px;
        border-bottom: 8px solid #896019;
        background: #ffe8c0;
        border-radius: 15px;}

    .navi-warp ul li:hover, .navi-warp ul li:active{
        border: 1px;
        color: #896019;
        border-bottom: 4px solid #896019;
        transform: initial;}

    .navi-warp ul li span.break{ display: block;}
    .navi-warp ul li::after{
        content: '';
        position: absolute;
        display: inline-block;
        width: 5px;
        height: 12px;
        background: #896019;
        border-bottom: 3px solid #dbae5e;
        border-radius: 20px;
        left: 10px;
        top: -3px;}

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

    /*錨點--*/
    #section1, #section2,
    #section3, #section4,
    #section5, #section6{top: -110px;}
    }


/*----螢幕寬度小於於650px時----*/
/*---------------------------*/
@media screen and (max-width: 650px){
    .allStars-prize{padding-bottom: 0;}
    .allStars-wrap > div {
        width: 100%;
        max-width: 302px;
        min-width: 302px;}
}

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

    .theme-date {width: 16%;}
    .btn-wrap{padding: 0 20px;}
    .deco-dot{
        width: 10px;
        height: 10px;}

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

    /*錨點--*/
    #section1, #section2,
    #section3, #section4,
    #section5, #section6{top: -100px;}
}


/*----螢幕寬度小於於530px時----*/
/*--------------------------*/
@media screen and (max-width: 530px){
    .act-wrap a{
        font-size: 18px;
        padding: 5px 10px;
        height: 42px;}

    .act-wrap.annuity{
        flex-direction: column;
        padding: 0;}

    .act-wrap.annuity a{ 
        width: 178px;
        margin: 10px auto;}

    .ta-prize > div:nth-of-type(1)::after,
    .ta-prize > div:nth-of-type(2)::after,
    .allStars-prize > div:nth-of-type(1)::after,
    .allStars-prize > div:nth-of-type(2)::after{
        width: 22%;
        top: 2%;
        left: 10%;}

    .ta-prize > div{min-width: 100%;}
    .deco-treasure{ 
        min-width:55px;
        bottom: -10px;}

    .subtitle {
        width: 80%;
        bottom: -100%;}
}


/*----螢幕寬度小於於400px時----*/
/*--------------------------*/
@media screen and (max-width: 400px){
    .allStars-wrap > div { min-width: 100%;}
}

/*----螢幕寬度小於於390px時----*/
/*--------------------------*/
@media screen and (max-width: 390px){
    .content > div,
    .allStars-prize > div{
        min-width: 100%;}

    .navi-warp ul li{
        font-size: 16px;
        padding:5px;}

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


/*----螢幕寬度小於於375px時----*/
/*--------------------------*/
@media screen and (max-width: 375px){
    #rule1 > h3{font-size: 16px;}
}


/*----螢幕寬度小於於351px時----*/
/*--------------------------*/
@media screen and (max-width: 351px){
    .navi-warp ul li{
        font-size: 15px;
        padding: 10px 5px;}
    
    footer {margin-bottom: 88px;}
}


/*----螢幕寬度小於於335px時----*/
/*--------------------------*/
@media screen and (max-width: 351px){
    .navi-warp ul li{
        font-size: 14px;}
    

/*----螢幕寬度小於於330px時----*/
/*--------------------------*/
@media screen and (max-width: 330px){
    footer {margin-bottom: 80px;}
}


/*------------iPhone5-------*/
/*--------------------------*/
@media screen and (max-width: 320px){
    .navi-warp ul li {padding: 5x 1%;}
    .rightBN-wrap {top: -110px;}
    .rightBN-wrap a{width: 80px;}
    .section-btnTop{bottom: 25%;}
}