@media screen and (max-width: 1550px){
	.kv{
		/*! padding-bottom: 30%; */
	}
}
@media screen and (max-width: 1650px){
	.rabbitL ,.rabbitR ,.rabbitR2, .rabbitL2{
		display: none;
	}
	.rabbitR22{
	display: none;
}
}
@media screen and (max-width: 1275px){

	.swiper-title{
		max-width: 445px;
	}
}
@media screen and (max-width: 1155px){
.swiper-title{
		max-width: 410px;
	}
		.section1 .one {
		width: 85%;
		height: auto;
		display: block;
		margin-bottom: 3%;
	}
	.section1 .doing1{
		width: 85%;
		height: auto;
		display: block;
		margin-bottom: 3%;
	}
		.section1 .doing2{
		width: 85%;
		height: auto;
		display: block;
/*		margin-bottom: 3%;*/
	}


	.member a{
		padding-bottom: 3%;
	}
	.section1 .doing2{
		height: auto;
	}
	
.doing1 .ts h3{
	margin-top: -2%;
}
	.favorable{
		display: block;
		margin: auto;
	}
	.detai2{
		width: 100%;
		display: block;
	}
	.detai2 .ph{
		width: 75%;
		display: block;
		margin: auto;
	}
	.rabbitR22{
		display: none;
	}
	.section2 .mobile{
		max-width: 520px;
	}
	.section2 .mobile2{
		display: block;
		margin-left: 0;
	}
	.exchange .award .txt{
		padding-top: 6%;;
	}
	.exchange .picture2{
		margin-bottom: 4%;
	}
	.section2A .mobile3 {
		display: block;
		margin: auto;
	}
	.picture2 {
		margin: auto;
}
	.exchange .picture22{
		margin-bottom: 3%;
	}
	.mobile3 .picture22{
		margin-bottom: 3%;
	} 
}
@media screen and (max-width: 1060px) {
	.exchange .award .txt{
        padding-top: 7%;
    }
}
@media screen and (max-width: 1045px){
	.sheet {
		width: 70%;
	}
}
@media screen and (max-width: 1024px){
	.footer{
		bottom: 0;
		z-index: 900;
	}

}
@media screen and (max-width: 1023px){
	.kv{
		padding-bottom: 40%;
	}
	.popup {
			margin: 350px auto;
			padding: 30px 20px;
			width: 700px;
		}
		.content_2{
			margin-bottom: -7%;
		}
/*----------------------*/
	.pop-content {
    position: absolute;
    width: 52%;
    max-width: 550px;
    height: 98%;
    max-height: 580px;
		}
	.pop-content img{
		max-width: 55%;
	}
	.footer-logo .copyright{
		margin-bottom: -175px;
	}
}
@media screen and (max-width: 992px){
	.sheet {
		width: 90%;
	}
}
/*----------------------*/
	@media screen and (max-width: 990px) {
	
	.kv{
			display: none;
	}	
	.m_kv{	
	width: 100%;	
	height: 0;	
	padding-bottom:124%;
	background-image: url("../images/m_kv.jpg");	
	background-size: cover;
	background-position: left top;
	background-repeat: no-repeat;
	
	}
	.section1 .one{
	display: block;
		}
	.section1 .doing .down {
    padding-bottom: 0;
}
	.section1 .small_1,.section2 .small_1,.section4 .small_1{
			margin-top: -5%;
		}
		.section3 .small_1{
			margin-top: -15%;
		}
	.section1 .doing{
			width: 50%;
		}	
	.section1 .btn_1 ,.section2 .btn_1 ,.section3 .btn_1{
		display: flex;
		flex-direction: column;
		margin: 3% auto;
	}
	.section1 p ,.section2 p{
		margin-bottom: 3%;
		}	
	.section2A .coupon{
		max-width: 435px;
		display: block;
		margin: auto;
		}
	.section2A .coupon img{
		margin: 3% 0;
		}
		.section2A .btn_2 {
			margin-bottom: 5%;
		}
	.section1 .btn_1 a ,.section2 .btn_1 a ,.section3 .btn_1 a{
		display: block;
		margin: auto;
		margin-bottom: 5%;
	}
	.section3 .teaching{
			margin-bottom: 5%;
		}
	.section3 p{
			width: 90%;
		 padding-bottom: 2%;
		text-align: left;
		}
	.section4 .small_1{
			margin-bottom: 8%;
		}
	.swiper-title .size {
			margin-bottom: -3%;
		}
		.copy P{
			padding-top: 3%;
		}
		
	.dot{
			position:relative;
			margin: auto;
			left: initial;
			width: 10%;
	}
	.swiper-box ul {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	.swiper-box ul li{
		width:90%;
		margin: auto; 
		}
	.btn_22{
		width: 85%;
		margin-bottom: 10%;
			}
	.copy P{
				margin-top: -7%;
				margin-bottom: 3%;
			}
			.section5 .btn_2 {
		width: 40%;
		max-width: 255px;
	
	}
	
	.box .photo01{
	display: none;
	}
	.box .photo05{
			width:65%;
			display: block;
			margin: auto;
			margin-top: 8%;
			}
			.box .photo05 img{
		width: 100%;
	} 
	.two li {
		width: 70%;
		margin: auto;
	  }
	.material {
	   width: 70%;
		margin: auto;
	}
	.material h5{
			font-size: 1.2rem;
	}
	.material i{
			font-size: 1.2rem;
	}
	.material  a{
	  padding: .6rem 1.3rem;
	  }
		.swiper-father{
			margin-bottom: 4%;
		}
		
	}
@media screen and (max-width: 989px) { 
	body {}	
	/* 警語-開始 */	
	.warning-wrap {	
			background:#f2f2f2;	
			color: #333;	
			padding: 24px;
			box-sizing: border-box;
	}
	.warning {
			max-width: 1200px;
			margin: auto;
	}
	
	.warning >h6 {
			font-size: 20px;
			margin-bottom: 16px;
	}
	.warning p {
			line-height: 1.5;
	}
	.content_2{
			margin-bottom: -8%;
		}
	 .wave{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
	}
}
@media screen and (max-width: 982px){
.swiper-title {
	max-width: 475px;
}
	.section4 .small_1{
		        margin-top: -4%;
	}
}
	@media screen and (max-width: 868px){
		.content_2{
			margin-bottom: -9%;
		}
	}
	@media screen and (max-width: 850px) {
	.money{
		width: 80%;
		margin: auto;
			}
	.two li {
		width: 80%;
		margin: auto;
	  }
	.two li{
	/*     max-width: 50%;*/
			margin: auto;
	}
	
/*-------------------------------*/
	/* .pop-content {
    position: absolute;
    width: 70%;
    max-width: 550px;
    height: 100%;
    max-height: 800px;
		}
	.pop-content img{
		max-width: 100%;
	} */
		/*-------------------------------*/
	
	}
@media screen and (max-width: 800px) {
	.exchange .award .txt{
        padding-top: 10%;
    }
}
		@media screen and (max-width: 775px){
			.content_2{
			margin-bottom: -10%;
		}
/*
			 .sheet {
        width: 90%;
    }
*/
		}
	@media screen and (max-width: 750px){
		.section1 .doing {
            width: 60%;
        }
	}
@media screen and (max-width: 705px){
		.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto;
	width: 95%;
        }
			.content_2{
			margin-bottom: -11%;
	}
	@media screen and (max-width:699px){
		.section1 .doing {
            width: 75%;
        }
			.popup {
				display: block;
			width: 360px;
			margin: 150px auto;
			/*padding-right: 150px;*/
	
		}
			.popup-content{
			display: block;
					/*margin: auto;*/
					width: 100%;
					padding-right: 100px;
			}
					.popup-line {
					width: 300px;
					height: 40px;
					border-right: none;
					border-bottom: 1px solid #333;
					margin-right: 0px;
					margin-bottom: 40px;
	
			}
			.popup-card .bank{
					/*font-size: 18px;*/
					line-height: 1.5;
					padding-bottom: 15px;
					width:250px;
					margin:auto ;
					padding-right: 58px;
			}
	
			.nn{
					width: 250px;
					display: block;
					margin: auto;
					padding-right: 58px;
			}
			.btn-small {
					width:150%;
					margin: auto;
					display: block;
			}

	.section1 .btn_1 a ,.section2 .btn_1 a ,.section3 .btn_1 a{	
/*		width: 85%;*/	
	}
	.section5 .btn_2{
			width: 100%;
	}      
	.teaching{
			font-size: 18px;
	}
}
	@media screen and (max-width:660px){
		.pop-content{
			max-height: 760px;
		}
		.section2A .coupon{
			max-width: 60%;
		}
		.section2A .text h3 br{
			display: none;
		}
	}
@media screen and (max-width: 659px){
.exchange .award .icon {
    width: 85px;
}
.swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto;
	width: 90%;
        }
			.content_2{
			margin-bottom: -12%;
}
	}
@media screen and (max-width: 635px){
		.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto;
	width: 85%;
        }
}
@media screen and (max-width: 620px){
		.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto;
	width: 80%;
        }
}
@media screen and (max-width: 620px){
		.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto;
	width: 75%;
        }
			.swiper-title{
		max-width: 445px;
	}
	
}
	@media screen and (max-width: 576px) {
		.top{
			display: none;
		}
		.lower{
			width: 100%;
			margin: auto;
			position: fixed;
			bottom: 0;
			z-index: 999;
			display: block;
		}
		.lower ul{
			display: flex;
			height: 70px;
			position: relative;
/*			background-color: #F4E080;*/
			border: 2px #42210B solid;
			margin-bottom: 35px;
		}
		.lower .icon_1 {
			width:  50%;
			display: block;
			background-color: #FFD93D;;
			border: 3px solid #42210B;
			text-align: center;
        }
		.lower .icon_1 a{
			display: inline-block;
			color: #062E56;
			font-size: 21px;
			font-weight: 700;
			text-decoration: none;
			line-height: 2.7;
		}

	.lower .icon_3 {
			width:  50%;
			display: block;
			background-color: #C8161D;
			border: 3px solid  #42210B;
			text-align: center;
		}
		.lower .icon_3 a{
			display: inline-block;
			color: #fff;
			font-size: 21px;
			font-weight: 700;
			text-decoration: none;
			line-height: 2.7;
		}

	.footer{
	position: fixed;
    bottom: 105px;
    z-index: 1000;
    width: 100%;
		display: block;
	}
	
	.section5 .btn_55 a{
		margin-bottom: 8%;
	}
		.step_1 h4 br{
			display: none;
		}
	
	        .swiper-title {
            max-width: 400px;
        }
/*----------------------*/
	
	
	.pp{
			width: 100%;
	}
	.material h5{
		font-size: 1rem;
	}
	.material i{
			font-size: 1rem;
			padding-top: 3px;
	}
	.material  a{
	  padding: 0.5rem 0.75rem;
	  }
	.cc p{
	   padding-left: 45px;
	}
			.box .photo05{
					width: 90%;
			}
			.swiper-pagination{
					margin: 0 auto 20px ;
			}

	.pop-content .small_22{
			margin-top: 8%;
			margin-bottom: 6%;
	}
	.btn_22 {
			width: 70%;
	}
			.swiper-box ul {
		display: flex;
	
	/*    flex-direction: column;
	
		width: 100%;
	
		/* margin: auto; */
	
	/*    margin-left: 23%;*/
	
	}
	
	.section5 .btn_2{
			width: 60%;
	}
	.pop-wrap{
			top:-8px;
	
	}
	
	.swiper-title{
			font-size: 21px;
	}
.pop-content img {
	width: 90%;
}
.step_1 h4{
	font-size: 18px;
}
.swiper-pagination-bullet {
	width: 16px;
	height: 16px;
}
}
	@media screen and (max-width:570px){
		.section1 .doing {
            width: 85%;
        }
		        .pop-content {
            max-height: 630px;
        }	
		.section5 .btn_55 a{
		margin-bottom: 30%;
	}
	.swiper-slide .tt{
		margin-bottom: 3%;
	}
	
}
	@media screen and (max-width: 490px){
		.swiper-title{
			max-width: 365px;
		}
	}
	@media screen and (max-width: 450px){
		.swiper-title{
			max-width: 335px;
		}
		.m_kv{
			display: none;
		}
		 .mm_kv {
            width: 100%;
            height: 0;
            padding-bottom: 133%;
            background-image: url(../images/mm_kv.JPG);
            background-size: cover;
            background-position: left top;
            background-repeat: no-repeat;
        }
	        .section1 .doing{
            width: 90%;
        }
		.section1 .doing .date{
			font-size: 24px;
		}
		.section1 .doing h2 {
			font-size: 24px;
		}
		.doing .bolus{
			max-width: 200px;
		}
	.section1 .btn_1, .section2 .btn_1, .section3 .btn_1{
		padding-left: 20%;
		}
		.section1 .btn_1 a, .section2 .btn_1 a, .section3 .btn_1 a{
		width: 200px;
        height: 42px;
        font-size: 24px;
		}
		.section5 .btn_55 a{
/*			margin-bottom: 40%;*/
		}
		.section2A .text h3{
			font-size: 21px;
		}
		.section2A .btn_2 a {
		width: 200px;
        height: 42px;
        font-size: 24px;
		}
		.swiper-title h3{
			font-size: 24px;
		}
	.btn_22{
		margin-left: 16%;
		}
/*
		.btn_22 a {
		width: 200px;
        height: 42px;
        font-size: 24px;
		}	
*/
			.section1 .teaching, .section2 .teaching, .section3 .teaching{
					font-size: 21px;	
			}
		.pop-content {
    max-height: 535px;
		}
}
@media screen and (max-width: 430px){
	.swiper-slide .tt{
		margin-bottom: 5%;
	}
	.section3 p{
		padding-top: 1%;
	}
}
@media screen and (max-width: 390px){
		.pop-content {
    max-height: 500px;
		}
	.swiper-title{
			max-width: 290px;
		}
}
@media screen and (max-width: 375px){
	   .section1 .doing {
        width: 85%;
    }
	.section1 .btn_1, .section2 .btn_1, .section3 .btn_1 {
        padding-left: 19%;
    }
	    .section1 .doing {
        width: 93%;
    }
	.section1 .btn_1 a, .section2 .btn_1 a, .section3 .btn_1 a{
        width: 180px;
        height: 38px;
        font-size: 21px;
	    margin-bottom: 8%;
    }
/*
	.btn_22 a{
		width: 180px;
        height: 38px;
        font-size: 21px;
	}
	.section2A .btn_2 a {
        width: 180px;
        height: 38px;
        font-size: 21px;
    }
*/
	.section2A .text h3 {
        font-size: 18px;
    }
	.section5 .btn_55 a{
/*			margin-bottom: 50%;*/
		}
}
@media screen and (max-width: 335px){
	.section1 .btn_1, .section2 .btn_1, .section3 .btn_1{
		padding-left: 15%;
	}
}



	 
/* === 2026-03-15 responsive support patch === */
@media screen and (max-width: 1024px){
  .section1,
  .section2,
  .section2A,
  .section3,
  .section4,
  .section5{
    width: 90% !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  .section1 .one,
  .section2 .mobile2,
  .section2A .mobile3,
  .swiper-box ul,
  .favorable{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .section1 .doing1,
  .section1 .doing2,
  .section2 .exchange,
  .section2A .picture2,
  .swiper-box ul > li{
    width: 100% !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .section1 .doing1,
  .section1 .doing2{
    height: auto !important;
    padding: 24px 20px !important;
  }

  .section2 .mobile,
  .section2 .mobile img,
  .section2 .exchange .picture,
  .section2 .exchange .picture img,
  .section2A .picture2 img,
  .favorable li,
  .favorable li img{
    /* width: 100% !important; */
    max-width: 100% !important;
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .favorable li{
    padding: 0 !important;
  }

  .exchange .award,
  .doing1 .ts,
  .doing2 .ts,
  .doing1 .gifts,
  .doing2 .gifts2,
  .food,
  .food2{
    text-align: center !important;
  }

  .btn_a,
  .btn_a2,
  .btn_a3,
  .btn_22,
  .btn_33{
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .sheet{
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    table-layout: fixed;
    word-break: break-word;
  }

  .section3 p,
  .ps,
  .ps-black{
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media screen and (max-width: 768px){
  .section1 .small_1,
  .section2 .small_1,
  .section2A .small_1,
  .section3 .small_1,
  .section4 .small_1{
    width: 90% !important;
    max-width: 460px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .section1 .small_1 img,
  .section2 .small_1 img,
  .section2A .small_1 img,
  .section3 .small_1 img,
  .section4 .small_1 img{
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }

  .doing1 .ts h3,
  .doing2 .ts h3{
    font-size: 21px !important;
  }

  .doing1 .ts h2,
  .doing2 .ts h2,
  .sub{
    font-size: 26px !important;
  }

  .doing1 .ts h5,
  .doing2 .ts h5,
  .doing1 .gifts h4,
  .doing2 .gifts2 h4,
/*  .exchange .award .txt,*/
  .t-black td,
  .t-white td,
  .t-white .t-gray{
    font-size: 18px !important;
  }

  .sheet td{
    padding: 14px 10px !important;
  }
}

@media screen and (max-width: 548px){
  .section1,
  .section2,
  .section2A,
  .section3,
  .section4,
  .section5,
  .sheet,
  .section3 p,
  .ps,
  .ps-black{
    width: 90% !important;
    max-width: 90% !important;
  }

  .section1 .doing1,
  .section1 .doing2,
  .section2 .exchange,
  .section2A .picture2,
  .swiper-box ul > li{
    max-width: 100% !important;
  }

  .doing1 .ts h3,
  .doing2 .ts h3{
    font-size: 18px !important;
  }

  .doing1 .ts h2,
  .doing2 .ts h2,
  .sub{
    font-size: 22px !important;
    line-height: 1.35 !important;
  }

  .doing1 .ts h5,
  .doing2 .ts h5,
  .doing1 .gifts h4,
  .doing2 .gifts2 h4,
  .doing1 .gifts p,
  .doing2 .gifts2 p,
/*  .exchange .award .txt,*/
  .food p,
  .section3 p,
  .ps,
  .ps-black,
  .member a{
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

/*
  .btn_a a,
  .btn_22 a,
  .section5 .btn_55 a{
    width: 100% !important;
    max-width: 260px !important;
    font-size: 20px !important;
  }
*/

  .exchange .award{
/*    flex-direction: column !important;*/
/*    align-items: center !important;*/
	  align-items: end;
  }

  .exchange .award .icon{
    margin-right: 0 ;
    margin-bottom: 3px;
  }

  .sheet{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sheet tbody,
  .sheet tr{
    width: 100%;
  }

  .t-black td,
  .t-white td,
  .t-white .t-gray{
    font-size: 15px !important;
    padding: 12px 8px !important;
  }
}