@charset "utf-8";



/*----螢幕寬度小於於1920px時----*/
/*----------------------------*/
@media screen and (min-width: 1921px){
    .theme-bgMount{background-size: cover;}
    .theme-bush{
        overflow:initial;
        background-size: contain;}

    .campaign-wrap{margin-bottom: 5%;}
	

}


/*----螢幕寬度小於於1500px時----*/
/*----------------------------*/
@media screen and (max-width: 1500px){
	
	
	.theme-bush > span:nth-of-type(5) {
    width: 45%;
    top: 272px;
}
		.theme-bush > span:nth-of-type(6) {
    width: 45%;
    top: 269px;
}
		.theme-bush > span:nth-of-type(3) {
    left: -13%;
}
		.theme-bush > span:nth-of-type(4) {
    right: -13%;
}
}
	


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


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


/*----螢幕寬度小於於950px時----*/
/*---------------------------*/
@media screen and (max-width: 950px){
    /*-- 選單 --*/
	#rules-switch:checked ~ .rules-title::after {
		bottom: -33px;}
}

/*----螢幕寬度小於於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;}
	.theme-bush {
        height: 110%;
    }
	
	.theme-bush > span:nth-of-type(6) {
        width: 56%;
        top: 265px;
        left: 59%;
    }
		.theme-bush > span:nth-of-type(5) {
        width: 56%;
        top: 265px;
        left: -14%;
}
			.theme-bush > span:nth-of-type(3) {
        left: -15%;
        height: 87%;
}
		.theme-bush > span:nth-of-type(4) {
    right: -15%;
	height: 87%;
}

    /*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;}

    .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(3){
        width: 400px;
        height: 400px;}
    
    .bgShine > span:nth-of-type(4){
        width: 300px;
        height: 300px;}
    
    .bgShine > span:nth-of-type(5){
        width: 200px;
        height: 200px;}
    
    .bgShine > span:nth-of-type(6){
        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-giftbox.png) bottom 0  left 40px no-repeat;
        background-size: contain;
        animation-delay: 0.3s;}
    
    
    .linegifts > span:nth-of-type(3){
        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% 250px;}
		.btn-wrap .btn {
    transform: translate(-50%, -60%);
}
    .theme-bgMount {
        width: 160%;
        height: 60%;
        background: url(../images/theme-bgMount.png) bottom no-repeat;
        background-size: contain;}
    .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){
    .campaign-wrap .campaign{padding: 5%;}
    .campaign-wrap {padding: 4%;}
    .campaign > h2 > span{width: 50%;}
    .campaign-wrap{ margin-bottom: 5%;}
	.campaign-wrap.campLine > div::after {
        position: relative;
        text-align: center;
        padding: initial;
        bottom: -8px;}
    }



/*----螢幕寬度小於於465px時----*/
/*--------------------------*/
@media screen and (max-width: 465px){
    #rule1 > h3 > div{display: block;}
    #rule1 > h3 {text-align: center;}
	.campaign > h2 > span {
    left: 24%;
	top: 60%;}
	.tag-win {
        max-width: 130px;
        top: 87%;
    }
	.tag-bonus {
    top: 38%;
    right: 1%;
}
	.btn-cta {
    max-width: 190px;
    bottom: -50px;
}
	.btn-cta.btn2 {
    left: 50%;
}
	.btn-cta.btn3 {
    left: 50%;
    bottom: -100px;
}
	.campaign-wrap.campMember .campaign > div > span > img {
    left: -5%;
}
	.cam2-g1{
	top: -51%;
    left: 41%;	
	}
	.theme {
        padding: 50px 2% 160px;
    }
	.btn-wrap .btn {
        transform: translate(-50%, -40%);
    }
	.theme-bush > span:nth-of-type(5) {
        width: 60%;
        top: 29%;
        left: -19%;
    }
		.theme-bush > span:nth-of-type(6) {
        width: 60%;
        top: 29%;
        right: -19%;
    }
		.theme-bush > span:nth-of-type(4) {
		right: -25%;}
	.theme-bush > span:nth-of-type(3) {
		left: -26%;}


}


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

    .btn-wrap .btn { transform: translate( -50%, -50%);}
    .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;}
	.theme {
        padding: 50px 2% 180px;
    }
	.btn-wrap .btn {
        transform: translate(-50%, -70%);
    }
	.theme-bush > span:nth-of-type(4) {
		right: -25%;}
	.theme-bush > span:nth-of-type(3) {
		left: -26%;}

}


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