@charset "utf-8";



/*----螢幕寬度小於於1920px時----*/
/*----------------------------*/
@media screen and (min-width: 1921px){
    .theme-bgMount{background-size: cover;}
    .theme-bgMount > span{ background-size: auto;}
    .theme-bush{
        overflow:initial;
        background-size: contain;}
    .theme-bluehead{bottom: -30px;}
    .theme-bush > span:nth-of-type(1){top: 25px;}
    .theme-bush > span:nth-of-type(2){top: 30px;}
    .campaign-wrap{margin-bottom: 5%;}
}



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


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


/*----螢幕寬度小於於820px時----*/
/*---------------------------*/
@media screen and (max-width: 820px){
    /*-- 選單 --*/
    .navi-warp{       
        position: fixed;
        right: initial;
        top: initial;
        transform: initial;
        background: #326360;
        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;
        font-size: 15px;
        padding: 5px 15px;
        border-radius: 0px;
        border-left: 1px solid;}

    .navi-warp ul li:nth-of-type(1){
        border-left: transparent 1px solid;}

    .navi-warp ul li:hover,
    .navi-warp ul li:active{
       color: #ffff00;}

    .navi-warp ul li:hover::after,
    .navi-warp ul li:active::after{
        content: '▼';
        position: absolute;
        display: inline-block;
        width: 100%;
        left: 50%;
        top: -20px;
        transform: translateX(-50%);
        font-size: 12px;
        color: #ffff00;
        animation: navi-arrow-ani 1s ease infinite;}
        @keyframes navi-arrow-ani {
            0%{ transform: translate(-50%, -5px);}
            50%{ transform: translate(-50%, 0px);}
            100%{ transform: translate(-50%,-5px);}
        }

    .navi-warp ul li:nth-of-type(3):hover::after,
    .navi-warp ul li:nth-of-type(3):active::after{top: -15px;}
    .navi-warp ul li:hover a,
    .navi-warp ul li:active a{color: #fff;} 
    .navi-warp ul li span::before{font-weight: 400;}

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

    .btn-wrap{ margin-bottom: 18%;}
    .campaign > div{ flex-direction: column;}
    .campaign-wrap{ margin-bottom: 10%;}
    .campaign-wrap.campLine { margin-bottom: 2%;}
    .campaign-wrap.campMember .campaign > div > span { margin: 2% 2% 75px;}
    .campaign-wrap.campMember .campaign > div > span:nth-of-type(3) { margin: 2% 2% 50px;}
    .campNew .campaign::after, .campMember .campaign::after{ background-size: contain;}

}


/*----螢幕寬度小於於780px時----*/
/*---------------------------*/
@media screen and (max-width: 780px){
    .campaign-wrap.campLine > div::after{
        position: relative;
        text-align: center;
        padding: initial;
        bottom: -20px;
        margin: 30px 0 5px;}

    .btn-cta.btn5 { bottom: -40px;}

}        


/*----螢幕寬度小於於730px時----*/
/*---------------------------*/
@media screen and (max-width: 730px){
    .navi-warp ul li{
        flex: 1;
        width: 70px;
        height: 40px;
        padding: 2px 10px;
        line-height: 32px;}

    .campaign-wrap.campLine .campaign > div > span > img{max-width: 500px;}
    #cam3-giftw_m{display: inline-block ;}
    #cam3-giftw{display: none ;}

    .bgShine > span:nth-of-type(1){
        width: 400px;
        height: 400px;}
    
    .bgShine > span:nth-of-type(2){
        width: 300px;
        height: 300px;}
    
    .bgShine > span:nth-of-type(3){
        width: 200px;
        height: 200px;}
    
    .bgShine > span:nth-of-type(4){
        width: 100px;
        height: 100px;}
        
    .linegifts > span:nth-of-type(1){
        background: url(../images/giftLine-50points.png) bottom 0 left 50px no-repeat;
        background-size: contain;
        animation-delay: 0.2s;}
    
    .linegifts > span:nth-of-type(2){
        background: url(../images/giftLine-carrefour1500.png) bottom 0  left 40px no-repeat;
        background-size: contain;
        animation-delay: 0.3s;}
    
    .linegifts > span:nth-of-type(3){
        background: url(../images/giftLine-travel2000voucher.png) bottom 0  left 40px no-repeat;
        background-size: contain;
        animation-delay: 0.5s;}
    
    .linegifts > span:nth-of-type(4){
        background: url(../images/giftLine-sogo2000voucher.png) bottom 0  left 40px no-repeat;
        background-size: contain;
        animation-delay: 0.6s;}
    
    .linegifts > span:nth-of-type(5){
        background: url(../images/giftLine-shine.gif) bottom 0  left 40px no-repeat;
        background-size: contain;
        animation-delay: 0.2s;}

    /*alung*/
    .deco-lineAlung{
        background: url(../images/deco-camp3alung.png) top 0 left 10px no-repeat;
        background-size: 95%;}           
}


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

    .theme{ padding: 20px 2% 140px;}
    .theme-bgMount {
        width: 180%;
        height: 60%;
        background: url(../images/theme-bgMount.png) bottom left 50px no-repeat;
        background-size: contain;}
    .theme-bgMount > span {width: 50%;}
    .theme-bush{bottom: 2%;}
    .theme-bgCloud{
        width: 150%;
        background-size: contain;}}


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

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

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

    .popUp-wrap .popUp{
        width: 85%;
        height: 100%;
        max-height: 85%;}

    #step01Pc, #step02Pc{ display: none;}
    #step01Mobile, #step02Mobile{ display: inline-block;}    
    .popUp-wrap .popUp .pic-wrap{max-width: initial;}
    .popUp-wrap .popUp .pic-wrap img{
        width: initial;
        height: 100%;}

    .popUp-wrap .popUp h2{font-size: 36px;}        
    .popUp-wrap .popUp p{font-size: 20px;}        
}


/*----螢幕寬度小於於520px時----*/
/*--------------------------*/
@media screen and (max-width: 520px){
    .rules-title h3{font-size: 36px;}
    .deco-lineAlung {
        background: url(../images/deco-camp3alung.png) bottom 30px left 10px no-repeat;
        background-size: 95%;}

    .campaign-wrap.campMember h3{ font-size: 24px;}
}

/*----螢幕寬度小於於500px時----*/
/*--------------------------*/
@media screen and (max-width: 500px){
    .theme-bush { bottom: 6%;}
    .campaign-wrap .campaign{padding: 6%;}
    .campaign-wrap {padding: 4%;}
    .campaign > h2 > span{width: 50%;}
    .campaign-wrap{ margin-bottom: 5%;}
    }



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


/*----螢幕寬度小於於410px時----*/
/*--------------------------*/
@media screen and (max-width: 410px){
    .theme-bush { bottom: 10%;}
    .btn-wrap .btn { transform: translate( -50%, -70%);}
    .btn-wrap { margin-bottom: 7%;}
    .campNew .campaign > div::after{width: 30%;}
    .campMember .campaign > div::after{width: 30%;}
}


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


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


/*----螢幕寬度小於於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%;}
}