@charset "utf-8";



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


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

}


/*----螢幕寬度小於於1270px時----*/
/*----------------------------*/
@media screen and (max-width: 1270px){
    .section-btnTop{bottom: 17%;}
    .camp{padding: 50px 2% 2%;}
}


/*----螢幕寬度小於1165px時----*/
/*---------------------------*/
@media screen and (max-width: 1165px){
    .deco-tips-wrap > span.deco-tips3{right: 10%;}
    .deco-tips-wrap > span.deco-tips4{
        right: 4%;
        top: 30%;}
}


/*----螢幕寬度小於1150px時----*/
/*---------------------------*/
@media screen and (max-width: 1150px){
    .deco-tips-wrap > span.deco-tips5{
        right: 6%;
        bottom: 17%;}
}


/*----螢幕寬度小於1018px時----*/
/*---------------------------*/
@media screen and (max-width: 1018px){
    .deco-tips-wrap > span.deco-tips1{
        left: 3%;
        top: 24%;}

    .deco-tips-wrap > span.deco-tips2{
        right: 4%;
        bottom: 10%;}
}


/*----螢幕寬度小於於1060px時----*/
/*---------------------------*/
@media screen and (max-width: 1060px){
    .deco-racoon{ 
        top: 80px;
        left: 10px;
        bottom: initial;}
}


/*----螢幕寬度小於於927px時----*/
/*---------------------------*/
@media screen and (max-width: 927px){
    .deco-hedgehog{
        width: 35%;
        left: -60px;}

    .deco-owl{
        width: 30%;
        left: -55px;}
}


/*----螢幕寬度小於於950px時----*/
/*---------------------------*/
@media screen and (max-width: 950px){
    .deco-fox{ right: -100px;}
    .deco-racoon{ 
        top: 200px;
        left: -30px;}
}


/*----螢幕寬度小於於907px時----*/
/*---------------------------*/
@media screen and (max-width: 907px){
    .camp.good1 .camp-actbtn{bottom: 50px;}
    .camp-gift.good1-1{margin-right: initial;}
    .rightBN-wrap{width: 170px;}
}


/*----螢幕寬度小於於841px時----*/
/*---------------------------*/
@media screen and (max-width: 841px){
    .camp.good1 .camp-actbtn{bottom: initial;}

    /* deco */
    .deco-fox{
        right: initial;
        left: -95px;}
}

    
/*----螢幕寬度小於於820px時----*/
/*---------------------------*/
@media screen and (max-width: 820px){
    /*-- 選單 --*/
    .navi-warp{       
        position: fixed;
        right: initial;
        top: initial;
        transform: initial;
        background: #e31b65;
        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;
        border: 2px transparent solid;
        background: #e71663;
        font-size: 15px;
        line-height: 18px;
        padding: 10px 2px;
        border-radius: 10px;}

    .navi-warp ul li > span::before{text-align: center;}
    .navi-warp ul li:hover, .navi-warp ul li:active{
        border-right: 3px solid #ffff00;
        border-left: 3px solid #ffff00;
        border-bottom: 2px solid transparent;
        color: #ff1818;}

    .navi-warp ul li:hover a,
    .navi-warp ul li:active a{color: #824505;} 
    .navi-warp ul li span::before{font-weight: 400;}        
    footer{margin-bottom: 70px;}
}

/*----螢幕寬度小於784px時----*/
/*---------------------------*/
@media screen and (max-width: 784px){
    .deco-tips-wrap > span.deco-tips2{
        left: 1%;}
    .deco-tips-wrap > span.deco-tips3{
        right: 1%;}
    .deco-tips-wrap > span.deco-tips5{
        right: 2%;}
}



/*----螢幕寬度小於於760px時----*/
/*---------------------------*/
@media screen and (max-width: 760px){
    .camp-intro.good2 h2 .break,
    .camp-intro.good2 p .break{
        display: inline-block;
        width: 20px;}

    .camp-gift.good2{margin: 20px;}
    .camp.good2 .camp-actbtn{ padding: 20px 5px;}

    /* deco*/
    .deco-fox{
        width: 50%;
        left: initial;
        right: -30%;}
}


/*----螢幕寬度小於於706px時----*/
/*---------------------------*/
@media screen and (max-width: 705px){
    .camp-intro.good3 .break{display: block;}
    .good5 .camp-actbtn{
        padding: 0;
        margin-bottom: 15px;}

    .good6 .camp-actbtn{
        padding: 0;
        margin-bottom: 15px;}

    .good5 .camp-actbtn:nth-of-type(1){bottom: initial;}
    .good6 .camp-actbtn:nth-of-type(1){bottom: initial;}

    /* deco */
    .deco-racoon{ 
        width: 25%;
        left: -20px;
        top: 70px;}

    .deco-tips-wrap > span{
        width: 12%;
        z-index: 1;}

    .deco-tips-wrap > span.deco-tips1{
        top: 10px;}

    .deco-tips-wrap > span.deco-tips2{
        left: 6%;
        top: 33%;
        bottom: initial;}

    .deco-tips-wrap > span.deco-tips3{
        right: 13%;
        top: 0;}

    .deco-tips-wrap > span.deco-tips4{
        right: 5%;
        top: 20%;}

    .deco-tips-wrap > span.deco-tips5{
        right: 8%;
        bottom: 46%;}

    .spotlight-r,
    .spotlight-r{width: 60%;}

    .theme2-title2::after{top: 20px;}
}


/*----螢幕寬度小於於675px時----*/
/*---------------------------*/
@media screen and (max-width: 675px){
    .camp-intro.good4 .break{display: block;}
}


/*----螢幕寬度小於於650px時----*/
/*---------------------------*/
@media screen and (max-width: 650px){
    .good1-note{text-align: left;}
}


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

    .deco-bear{left: 17%;}
    .campaign > h1 > .campiagn-title::before{left: -9.78%;}
    .campaign > h1 > .campiagn-title::after{
        top: 0px;
        right: -9.14%;}
    
    .campaign-wrap{padding: 6% 2% 2%;}
    .campaign > h1 > .campiagn-title{width: 80%;}
    .camp{margin-bottom: 60px;}
    .camp .camp-tag{
        width: 35%;
        max-width: 120px;
        left: 50%;
        transform: translateX(-50%);}

    .camp-intro h2{font-size: 26px;}
    .camp-intro p{font-size: 20px;}
    .markRed{font-size: 20px;}    
    .bgmark::before{width: 82px;}
    .camp-intro.good3 .bgmark::before{width: 54px;}
    .camp-intro.good4 .bgmark::before{width: 54px;}
    .camp-intro.good5 .bgmark::before{width: 54px;}

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


    .flower-falling li span::before{
        width: 20px !important;
        height: 20px !important;}
    
    .flower-falling li:nth-of-type(odd){display: none;}
    .flower-falling li:nth-of-type(even) span::before{opacity: 0.8;}
}


/*----螢幕寬度小於於590px時----*/
/*--------------------------*/
@media screen and (max-width: 590px){
    .navi-warp ul li span.break{ display: block;}
}


/*----螢幕寬度小於於550px時----*/
/*--------------------------*/
@media screen and (max-width: 550px){
    .navi-warp ul li span{display: block;} 
    .camp-intro.good2 h2 .break,
    .camp-intro.good2 p .break{
        display: block;
        width: initial;}

    .camp-intro.good3 .break{
        display: block;
        width: initial;}

    .camp-intro.good4 .break{
        display: block;
        width: initial;}
        
    /*deco*/
    .deco-squirrel{
        width: 25%;
        left: -40px;}

    .deco-fox{right: -40%;}

    .deco-deer{
        width: 38%;
        right: -70px;}
}


/*----螢幕寬度小於於500px時----*/
/*--------------------------*/
@media screen and (max-width: 500px){
    .camp-gift{
        width: 90%;
        height: 230px;
        padding: 22% 0 0 120px ;}

    .camp-gift.good1-1{margin-bottom: initial;}
    .camp-gift.good2 > img {margin-top: 20px;}

    .camp-gift.good3{margin: 0 0 20px;}
    .camp-gift.good4{margin: 0 0 20px;}
    .camp-gift.good4 > img {margin-top: 20px;}
    .camp-gift.good5{
        padding: 30% 0 0 120px;
        margin: 0 0 20px;}
    .camp-gift.good6{margin: 0 0 20px;}
    .camp-gift.good6 > img {margin-top: 20px;}

    .theme-wrap{height: 530px;}
    .theme-date{
        width: 100%;
        background-position: center;
        margin-left: initial;}

    .theme2-title1{height: 120px;}
    .theme2-title2{height: 190px;}
    .theme2-title2::after {top: -30px;}
    .theme2-subtitle > span{width: 90%;}
    .theme-ppl{height: 340px;}
    .deco-tips-wrap > span.deco-tips1{
        top: 20px;
        left: 9%;}
    .deco-tips-wrap > span.deco-tips4{right: 13%;}
}


/*----螢幕寬度小於於465px時----*/
/*--------------------------*/
@media screen and (max-width: 465px){
    #rule1 > h3 > div{display: block;}
    #rule1 > h3 {text-align: center;}

    .deco-tips-wrap > span.deco-tips5{ bottom: 40%;}
}


/*----螢幕寬度小於於444px時----*/
/*--------------------------*/
@media screen and (max-width: 444px){
    .spotlight-r,
    .spotlight-r{opacity: 0.5;}


    /* 選單 */
    .navi-warp ul li{
        font-size: 14px;}

    .navi-warp ul li span{
        font-size: 14px;
        line-height: 18px;
        display: block;}

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


/*----螢幕寬度小於於400px時----*/
/*--------------------------*/
@media screen and (max-width: 400px){
    .campaign{padding: 50px 30px;}
    .camp.good1 .flex-col > div{flex: initial;}
    .camp-actbtn{width: 100%;}
    .camp-actbtn img{width: 100%;}
    .camp.good2 .camp-actbtn{padding: 20px;}
    .good5 .camp-actbtn{padding: 20px;}
    .good6 .camp-actbtn{padding: 20px;}
    .camp.good2 .flex-col > div{flex: initial;}
    .rightBN-wrap{
        width: 85px;
        top: -85px;}

    .rules ol li h3 span.break{display: block;}    
}


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

    /* deco */
    .deco-racoon {
        width: 28%;
        left: 0;
        top: -20px;}

    .deco-tips-wrap > span{width: 14%;}
    .deco-tips-wrap > span.deco-tips4{
        top: 15%;
        right: 4%;}
}


/*------------iPhone5-------*/
/*--------------------------*/
@media screen and (max-width: 320px){
    .navi-warp ul li{padding: 5px 2px;}
    .section-btnTop{bottom: 25%;}
    .camp-intro h2 {font-size: 20px;}
    .markRed,
    .camp-intro p{font-size: 18px;}
    .bgmark::before{width: 63px;}
    .camp-intro.good3 .bgmark::before{ width: 43px;}
    .camp-intro.good4 .bgmark::before{ width: 43px;}
    .camp-intro.good5 .bgmark::before{width: 43px;}
    .camp-intro.good6 .bgmark::before{width: 63px;}

}