/*----螢幕寬度大於1025px時----*/
/*--------------------------*/

@media screen and (min-width: 1025px){
	.container,
    .header-wrap, .theme-wrap,
    .vipMember-wrap,.newlyMember-wrap,
	.rules-wrap
	{width: 100%;}

	.header-wrap, .theme,
    .newlyMember, .vipMember,
	.rules{
		transition: 0.5s;}
	/*列車進站*/
	.theme-TRA{
		animation: trainRun2-ani 10s ease-in-out infinite;}	
	/*footer*/
	footer{
		width: 100%;
		padding: 0px;
		line-height: 30px;}
}

/*----螢幕寬度大於1530px時----*/
/*--------------------------*/

@media  screen and (min-width: 1530px){
	/*列車進站*/
	.theme-TRA{
		animation: trainRun3-ani 10s ease-in-out infinite;}	
	}


/*----螢幕寬度小於1250px時----*/
/*--------------------------*/

@media screen and (max-width: 1250px){
	/*站牌*/
.theme-broad{
	left: 10%;
	width: 25%;}

.theme-treesFront3{
	width: 5%;
	bottom: -15px;
	left: 5%;}

.theme-treesFront2{
	width: 5%;
    bottom: -15px;
    left: 30%;}

.theme-treesFront1{
	left: 9%;
	bottom: -15px;
	width: 3%;}

.theme-treesFront4{
	width: 35%;
	bottom: -5px;
    right: 5%;}
}


/*----螢幕寬度小於1024px時----*/
/*--------------------------*/

@media (max-width: 1024px){
	/*主視覺區*/
	.theme-wrap{padding: 0 2%;}
	.theme-wrap .deco-sakuraR{width: 40%;top: -8%;}
	.theme-wrap .deco-sakuraL{width: 50%;top: -10%;}
	/*主視覺區背景*/
	.theme-sun{width: 33%;}
	.theme-moutains1{width: 50%;}
	.theme-moutains2{width: 50%;}
	.theme-moutains3{width: 70%;}
	.theme-moutains4{width: 50%;}
	.theme-house{width: 50%; bottom: 16px;}
	.theme-trees1{width: 6%;}
	.theme-trees2{width: 7%;}
	.theme-trees4{width: 5%;}
	.theme-TRA{width: 95%;}
	.btnTop-Wrap {top: auto;bottom: 5%;}
	/*新手、保寶站牌*/
	.icon-newMember{left: 20%;}
	.icon-vipMember{
		left: 25%;
		top: 0%;}
}

/*--螢幕寬度介於900px-1250px時-*/
/*--------------------------*/
@media (min-width: 900px) and (max-width: 1250px) {
	
	/*--Header列--*/
	.ezbao-title{
		font-size: 1.2em;
		padding-top: 7px;}

	.ezbao-title::before{height: 25px;}

	.menu-wrap {flex: 3;}
	.menu-wrap a{
		padding: 5px 0;
		vertical-align: middle;
		line-height: 20px;
		max-width: 50px;
		height: 50px;}

	.line-share {
		width: 50px;
		background: #00b900 url(../images/line_share_m.png) center no-repeat;
		background-size: 70%;
		border-radius: 5px;}

	.fb-share {
		width: 50px;
		background:#3b589a url(../images/fb_share_m.png) center no-repeat;
		background-size: 80%;
		border-radius: 5px;}

    /*新手村*/
	.mission1, .mission2, .mission3, .mission4{
		width: 45%;
		margin: auto;}
		
	.gift-m1{width: 50%;}
	.gift-m2{width: 45%;}
	.btn-m2-2{bottom: 2%;}
	.gift-m3{width: 55%;}
	.gift-m4{width: 55%;}
	.btn-m4-2{bottom: -5%;}
	.deco-rail{
		width: 5%;
		background-size: contain;}
	.theme-trainHead img{width: 80%;}
	.theme-trainHead::before{right: -75px;}
	.theme-trainHead::after{left: -13px;}

}

/*--螢幕寬度介於900px-1400px時-*/
/*--------------------------*/
@media (min-width: 900px) and (max-width: 1400px) {

	/*保寶村*/
	.vipmission-wrap > div{width: 45%;}
	.mission5, .deco-flag,
	.mission6, .mission7, .mission8,
	.btn-m8-wrap{
		padding:0 5%;
		width: 100%;
		background-size: contain;}

	.gift-m5{width: 36%;}
	.btn-m5{
		width: 34%;
		background-size: contain;}

	.gift-m7{
		width: 43%;
		right: -4%;}

	.gift-m6{width: 38%;}
	.btn-m8-wrap{bottom: -65%;}
	.btn-m8-wrap > a{
		width: 23%;
		background-size: contain;}

	.gift-m8-1{width: 25%;}
	.gift-m8-2{width: 25%;}
	.deco-sptime1{
		width: 45%;
		background-size: contain;}
		
	.deco-sptime2{
		left: 22%;
   		bottom: -75%;
		width: 50%;
		background-size: contain;}
		
	.deco-sptime3{
		width: 50%;
		background-size: contain;}
		
	.mission9{
		width: 100%;
		background-size: contain;}

	.gift-m9{width: 36%;}
	.icon-iparking{
		width: 50%;
		background-size: contain;
		bottom: 20%;}

	.btn-m9-1{bottom: 7%;}
	.btn-m9-2{right: 28%;}
	.btn-crditcard{
		width: 30%;
		background-size: contain;}

}

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

	/*--選單--*/	
	.menu-wrap{
		position: fixed;
		width: 100%;
		height: auto;
		top: auto;
		left: auto;
		bottom: 0;
		z-index: 2;
		background-color: #5fceca;
		line-height: 30px;
		display: block;}	

	.menu-wrap a:nth-of-type(1),
	.menu-wrap a:nth-of-type(2),
	.menu-wrap a:nth-of-type(3),
	.menu-wrap a:nth-of-type(4),
	.menu-wrap a:nth-of-type(5){
		vertical-align: middle;
		background: #eb7d86;
		color: #fff;
		padding: 4px;
		border-radius: 5px;
		font-size: 18px;
		width: 45px;
		display: inline-block;
		line-height: 18px;
		margin-right: 2px;}

	.menu-wrap a:nth-of-type(1):active,
	.menu-wrap a:nth-of-type(2):active,
	.menu-wrap a:nth-of-type(3):active,
	.menu-wrap a:nth-of-type(4):active{
		vertical-align: middle;
		background: rgba(236, 67, 25);
		color: #fff;
		transition: 0.2s;}

	.line-share {
		width: 34px;
		height: 34px;
		margin: auto;
		background: #00b900 url(../images/line_share_m.png) center no-repeat;
		background-size: 80%;
		border-radius: 5px;}

	.fb-share {
		width: 36px;
		height: 36px;
		margin: auto;
		background:#3b589a url(../images/fb_share_m.png) center no-repeat;
		background-size: contain;
		border-radius: 5px;}

	/*櫻花*/
	.newlyMember-wrap .deco-sakuraL{width: 30%;top: 5%;}
	.newlyMember-wrap .deco-sakuraR{width: 35%;top: 48%;}
	.newlyMember{margin-top: 0;}
	.vipMember-wrap .deco-sakuraL{width: 25%;top: -30px;}
	.vipMember-wrap .deco-sakuraR{width: 28%;top: 55%;}
	.vipMember-wrap .deco-sakuraL.positon2{bottom: 12%;}

	.trainRail-wrap{
		text-align: right;
		padding-right: 10%;}

	.newlymission-wrap{
		display: block;
		margin-right: 20%;
		width: 80%;}

	.mission2::after{left: auto; right: 0;bottom: 0;}
	.mission2 {margin-top: auto;}
	.mission4{margin-top: auto;}
	.mission4::after{left: auto;right: 0;bottom: 0;}
	.vipmission-wrap{
		display: block;
		margin-right: 10%;
		width: 90%;}

	.newlyMember-wrap{
		padding: 0 2%;
		padding-top: 121px;}

	.vipMember-wrap{
		padding: 0 2%;
		margin-top: 80px;}

	.deco-sptime2 {
	    left: 28%;
		bottom: -66%;}
		
	.mission6{margin-top: 60px;}

	/*捲動列車*/
	.deco-rail{
		width: 6%;
		background-size: contain;}

	.theme-trainHead img{width: 80%;}
	.theme-trainHead::before{
		width: 50%;
		right: -40%;
		background-size: contain;}

	.theme-trainHead::after{
		width: 23%;
		left: -8%;
		background-size: contain;}
	.mission9{z-index: 1;margin-left: auto;}
	.icon-newMember {left: 55%;}
	.icon-vipMember{
		left: 50%;
		top: -5%;}

}


/*----螢幕寬度小於於700px時----*/
/*--------------------------*/

@media screen and (max-width: 699px){

	/*新手村*/
	.newlyMember, .vipMember{
		padding:20px  5px;
		margin-bottom: 100px;}

	.newlymission-wrap {
		margin-right: 10%;
		width: 90%;}

	.icon-vipMember {top: -90px;}

	.mission1, .mission2, .mission3, .mission4{
		width: 100%;
		height: 300px;
		background-position: top center;}

	.gift-m1{
		width: 35%;
		bottom: 25%;
		left: 6%;}

	.gift-m2{
		width: 40%;
		bottom: 2%;
		background-position: top center;}

	.btn-m2-2{bottom: 2%;}
	.gift-m3{width: 55%; bottom: 0;}
	.gift-m4{width: 38%;}
	.btn-m4-2{bottom: -5%;}
	.deco-rail{
		width: 5%;
		background-size: contain;}

	.theme-trainHead img{width: 80%;}
	.theme-trainHead::before{right: -75px;}
	.theme-trainHead::after{left: -13px;}

	/*保寶村*/
	.vipmission-wrap > div{width: 100%;}
	.mission5, .deco-flag,
	.mission6, .mission7, .mission8,
	.btn-m8-wrap{
		padding:0 5%;
		width: 100%;
		background-size: contain;}

	.gift-m5{width: 36%;}
	.gift-m6{
		width: 38%;
		left: 0;
		bottom: 22%;}

	.spTime-wrap{left: 0;}		
	.btn-m8-wrap{bottom: -75%;}
	.btn-m8-wrap > a{
		width: 23%;
		background-size: contain;}
	.gift-m8-1{width: 25%;}
	.gift-m8-2{width: 25%;}

	.deco-sptime1{
		width: 50%;
		background-size: contain;}
		
	.deco-sptime2{
		left: 25%;
		width: 50%;
		background-size: contain;}
		
	.deco-sptime3{
		width: 50%;
		background-size: contain;}
		
	.mission9{
		width: 110%;
		background-size: contain;}

	.gift-m9{width: 36%;}
	.icon-iparking{
		width: 50%;
		background-size: contain;
		bottom: 18%;}

	.btn-m9-1{bottom: 7%;}
	.btn-m9-2{right: 28%;}
	.btn-crditcard{
		width: 30%;
		background-size: contain;}

	/*捲動列車*/
	.deco-rail{
		width: 6%;
		background-size: contain;}
	.theme-trainHead {width: 280%;}
	.theme-trainHead img{width: 100%;}
	.theme-trainHead::before{
		width: 60%;
		right: -60%;
		background-size: contain;}
	.theme-trainHead::after{
		width: 27%;
		left: -19%;
		background-size: contain;
		top: 35%;}

}


/*----螢幕寬度小於於600px時----*/
/*--------------------------*/
@media screen and (max-width: 600px){
	/*--Header列--*/
	.ezbao-title{
		font-size: 25px;
		padding-top: 7px;}

	.ezbao-title::before{height: 25px;}
	.logo-wrap{
		height: 60px;
		line-height: 60px;}
	.logo{
		width: 30%;
		height: 50px;	
		background-size: 90%;
		margin-left: 10px ;}

	/*--S1：主視覺---*/

	.theme{
		top: 10%;
		height: 400px;}

	.theme-broad{
			width: 20%;
			bottom: 20px;}

	.theme-TRA{
		width: 90%;
		bottom: 10px;}
		
	.theme-title{
		width: 100%;
		top: 10%;}

	.theme-title-happiness2 {width: 90%;}
	.theme-date{
		width: 90%;
		left: auto;
		bottom: -33%;}

	.theme-title-sfl{
		white-space: nowrap;
		top: 20px;
		right: 32px;
		width: 50%}
	.theme-title-sfl span{width: 33%;}
	.theme-platform{height: 20px;}

	.icon-newMember, .icon-vipMember{width: 30%;}
	.newlyMember-wrap {padding-top: 20%;}

	.newlyMember-wrap .deco-sakuraL {
		width: 35%;
		top: 0;}

	.mission1, .mission2, .mission3, .mission4{
		margin: 20px 0;}

	.gift-m7{width: 35%;}

	/*--活動注意事項--*/
	h1{font-size: 30px;}
	.rules-switch h1::after {
		width: 29px;
		height: 29px;
		margin-left: 5px;
		background-size: contain;}
	#rules-switch:checked ~ .rules > ol {
		padding: 30px 5% 30px 10%;}
		
	/*--totop--*/
	.btnTop-Wrap {
		right: 2%;
		bottom: 8%;
		top: auto;		
		transform: translateY();}
	
	.btnTop{
		opacity: 0.8;
		font-size: 1em;
		line-height: 40px;
		font-weight: 600;
		width: 50px;
		height: 50px;}

	.btnTop:hover{opacity: 1;}
	.btnTop:active{
		width: 50px;
		height: 50px;
		opacity: 1;
		background-size: 50px 50px;}

	/*--footer--*/	
	footer{
		font-size: 15px;
		line-height: normal;
		padding: 3%;
		text-align: left;
		margin-bottom: 65px;}

    footer .announce{text-align: left;}		
	.cno {font-size: 0.8em;}

	/*----錨點設定----*/
	#campaign-wrap{top: -100px;}

	/*推薦攻略小版*/
	.popup-content{padding: 0;}
	.memberonly, .apppc{display: none;}
	.memberonlym, .appm{display: block;}

	.app{width: 100%;
		right: 0;
		top: 5%;}
}

/*----螢幕寬度小於於500px時----*/
/*--------------------------*/

@media screen and (max-width: 500px){
	.vipMember-wrap .deco-sakuraL {
		width: 50%;
		top: -5%;}

	.vipMember-wrap .deco-sakuraR {
		width: 40%;
		top: 55%;}

	.vipMember-wrap .deco-sakuraL.positon2 {
		bottom: 13%;
		z-index: 2;
		width: 40%;}
	
	.mission1::after{
		width: 40%;
		background-size: contain;
		right: -24px;
		bottom: 0px;}

	.mission2::before{
		right: 40px;
		left: auto;}

	.gift-m1 {
		width: 40%;
		bottom: 10%;}

	.gift-m2 {
		width: 40%;
		height: 40%;
		bottom: 18%;
		background-position: top center;}

	.btn-m2-1 {bottom: 11%;}
	.btn-m2-2 {bottom: -8%;}
	.gift-m3{
		bottom: 0%;
		left: 9%;
		width: 53%;}

	.mission3::after{bottom: 60px;}
	.gift-m4 {width: 37%;bottom: 48%;}
	.btn-m1{bottom: -2%;}
	.btn-m4-1{bottom: 15%;}
	.btn-m5{bottom: 45%;}
	.btn-m6{bottom: 0;}
	.btn-m7{
		bottom: -6%;
		right: auto;
		left: 18%;}

	.mission4::before{left: 0;}
	.deco-flag{top: -100px;}
	.mission5{margin-top: 60px;}
	.deco-sptime2 {left: 18%;}
	.deco-sptime3{right: 2%;}
	.deco-sptime1::before,
	.deco-sptime2::before,
	.deco-sptime3::before{top: -10%;}
	.gift-m5 {left: 5%;}
	.gift-m7{width: 35%; bottom: 17%;}
	.mission6, .mission7, .mission8{
		height: 250px;
		margin: 20px 0;}
	
	.mission1{
		background: url(../images/mission-1m.png) center no-repeat;
		background-size: contain;}

	.mission2{
		background: url(../images/mission-2m.png) center no-repeat;
		background-size: contain;}

	.mission3{
		background: url(../images/mission-3m.png) center no-repeat;
		background-size: contain;}

	.mission4{
		background: url(../images/mission-4m.png)top -10px center no-repeat;
		background-size: contain;}

	.mission5{
		background: url(../images/mission-5m.png) center no-repeat;
		background-size: contain;}

	.mission6{
		margin-top: 90px;
		background: url(../images/mission-6m.png) center no-repeat;
		background-size: contain;}

	.mission7{
		background: url(../images/mission-7m.png) center no-repeat;
		background-size: contain;}

	.mission8{
		background: url(../images/mission-8m.png) center no-repeat;
		background-size: contain;}

	.mission9{
		background: url(../images/mission-9m.png) center no-repeat;
		background-size: contain;}

	.gift-m8-2{width: 27%;}
	.gift-m8-1{bottom: -8%;}
	.mission9 {
		height: 382px;
		margin-top: 100px;}

	.btn-m9-1 {
		bottom: 8%;
		right: 45%;
	}
	.vipMember {margin-bottom: 40px;}
}

/*----螢幕寬度小於於700px時----*/
/*--------------------------*/

@media (min-width: 401px)and (max-width: 600px){
	.theme-title-sfl{top: -3%;}
}


/*------------iPhone5-------*/
/*--------------------------*/
@media screen and (max-device-width: 320px){
	.gift-m4{bottom: 59%;}
	.btn-m4-1 {bottom: 28%;}
	.btn-m4-2 {bottom: 7%;}
	.btn-m6 {right: 15%;}
	.menu-wrap a:nth-of-type(1),
	.menu-wrap a:nth-of-type(2),
	.menu-wrap a:nth-of-type(3),
	.menu-wrap a:nth-of-type(4),
	.menu-wrap a:nth-of-type(5){
		font-size: 14px;
		width: 35px;
		line-height: 15px;}

	.rules ol {font-size: 16px;}
}