@charset "utf-8";

@media screen and (max-width: 768px) {
	
	
	body{
		overflow-x:hidden;
	}

	.background_main{
		background:#fffee0;
	}
	
	
	.banner{
		padding:0;
	}
		
	.banners{
		max-width:350px;
		height:700px;
		margin:0 auto;
		background:url(../../img/視覺主題/1.png)no-repeat right bottom / contain;
		position:relative;
	}
	
	.banners .logo{
		width:350px;
		height:270px;
		background:url(../../img/logo.svg)no-repeat center center / contain;
		display:block;
		margin:0 auto;
	}	
	
	.banners .s1{
		width:350px;
		height:80px;
		background:url(../../img/視覺主題/s1.svg)no-repeat center center / contain;
		position:absolute;
		top:220px;
		right:0;
	}	
	
	
	.banners .s2{
		width:350px;
		height:300px;
		background:url(../../img/視覺主題/s2.png)no-repeat center center / contain;
		position:absolute;
		top:180px;
		right:0;
	}		
	
	.banners .b1{
		width:60px;
		height:60px;
		background:url(../../img/視覺主題/太陽.svg)no-repeat center center / contain;
		position:absolute;
		top:380px;
		right:0;
	}		
	

	.banners .p1{
		width:50px;
		height:50px;
		background:url(../../img/視覺主題/p1.svg)no-repeat center center / contain;
		position:absolute;
		top:460px;
		left:-10px;
	}	

	.banners .p2{
		width:50px;
		height:50px;
		background:url(../../img/視覺主題/p2.svg)no-repeat center center / contain;
		position:absolute;
		top:460px;
		left:30px;
	}	

	.banners .p3{
		width:50px;
		height:50px;
		background:url(../../img/視覺主題/p3.svg)no-repeat center center / contain;
		position:absolute;
		top:460px;
		left:70px;
	}	

	.banners .dog{
		width:30px;
		height:30px;
		background:url(../../img/視覺主題/狗狗.svg)no-repeat center center / contain;
		position:absolute;
		top:480px;
		left:120px;
	}	



	.banners .p4{
		width:40px;
		height:40px;
		background:url(../../img/視覺主題/p4.svg)no-repeat center center / contain;
		position:absolute;
		top:520px;
		right:120px;
	}	
	
	
	.banners .p5{
		width:40px;
		height:40px;
		background:url(../../img/視覺主題/p5.svg)no-repeat center center / contain;
		position:absolute;
		top:520px;
		right:80px;
	}		
	
	.banners .p6{
		width:40px;
		height:40px;
		background:url(../../img/視覺主題/p6.svg)no-repeat center center / contain;
		position:absolute;
		top:520px;
		right:50px;
	}		
	
	
	
	.wrapper{
		height:auto;
		
	}	
	
	.wrappers{
		max-width:350px;
		height:auto;
		padding:0 20px 50px 20px;
		margin:0 auto;
		background:#F7F398;
		box-sizing: border-box;
	}		
	
	.container_article{
		height:auto;
		margin:0 auto;
		display:flex;
		flex-wrap:wrap;
		gap:10%;
	}	
	
	
	.container_article .name1{
		font-size:27px;
		font-weight:bold;
		line-height:31px;
		color:#BA3C59;
	}	
	
	.container_article .name2{
		font-size:21px;
		font-weight:bold;
		line-height:27px;
		background:#A17FAF;
		color:#fff;
		padding:10px 30px;
		border-radius:50px;
		text-align:center;
	}	
	

	
	.container_article .b1{
		width:100%;
		position:relative;
	}	
	
	.container_article .b1 .img1{
		width:250px;
		height:100px;
		background:url(../../img/視覺主題/img1.svg)no-repeat right -100px center / contain;
		position:absolute;
		right:-20px;
		top:30px;
	}		
	
	.container_article .b1 .img2{
		width:80px;
		height:80px;
		background:url(../../img/視覺主題/img2.svg)no-repeat center center / contain;
		position:absolute;
		right:0px;
		top:0px;
	}		
	
	
	.container_article .b1 .intro{
		display:flex;
		flex-wrap:wrap;
	}	
	
	.container_article .b1 .intro .item{
		width:100%;
		height:250px;	
		margin-bottom:20px;
	}		
	
	
	.container_article .b1 .intro .item.ac1{
		background:url(../../img/視覺主題/ac1.svg)no-repeat center center / cover;	
	}		
	
	.container_article .b1 .intro .item.ac2{
		background:url(../../img/視覺主題/ac2.svg)no-repeat center center / contain;	
	}	

	
	
	.container_article .b2{
		margin:50px 0;
	}	
	
	
	.container_article .foodstore{
		margin:50px 0;
		display:flex;
		flex-wrap:wrap;
		gap:20px;
		justify-content: space-between; /* 左右貼齊，中間自動平分間距 */
	}			

	
	.container_article .foodstore a {
		width: calc((100% - 40px) / 2); /* 一排 4 個，3 個間距共 90px (30px * 3) */
		box-sizing: border-box;	
		aspect-ratio: 1 / 1;
		display: flex;             /* 改為 Flex 佈局 */
		flex-direction: column;    /* 垂直排列 */
		align-items: center;       /* 水平居中 */
		justify-content: center;   /* 垂直居中 */
		text-decoration: none;
		align-items: center;
		justify-content: flex-start; /* 【關鍵】讓內容全部靠頂點對齊 */
		padding-top: 10px;           /* 可選：若不想完全貼頂，可用 padding 留微小空隙 */		
	}			

	.container_article .foodstore a:hover {
		color: #A17FAF;
		text-decoration: none;
	}	

	.container_article .foodstore a .img {
		width: 60%;                /* 調整合適比例 */
		aspect-ratio: 1 / 1;       /* 強制圖片容器維持 1:1 正方形 */
		flex-shrink: 0;            /* 【關鍵】禁止被文字擠壓變形 */
		margin-bottom: 10px;       /* 改用下方間距代替 margin: 20px auto */
		border-radius: 50%;        /* 寫 50% 即可達到正圓 */
		border: 5px #A17FAF solid;	
	}	

	.container_article .foodstore a .name {
		text-align: center;
		font-weight: bold;
		font-size: 17px;           /* 建議略微微調字級，防文字過度擁擠 */
		line-height: 1.2;          /* 設定適當行高 */
	}


	.container_article .b1 .main{
		padding:30px 0;
		margin:50px 0 0 0;
	}	
	
	
	.container_article .b1 .location{
		border-top:2px #375299 solid;
		border-bottom:2px #375299 solid;
		padding:30px 0;
		margin:70px 0;
	}		

	
	.container_article .subtitle{
		padding:5px 0;
		color:#9464A3;
		font-size:21px;
		font-weight:bold;
	}		
	
	

	.container_article .section{
		margin:30px 0;
		text-align: justify;
	}		
	
	.container_article .section a{
		color:#000;
	}	
	
	.container_article .section a:hover{
		text-decoration:none;
		background:#A17FAF ;
		border-radius:5px;
		padding:10px;
		color:#fff;
	}	
		

	ol.store{
		line-height:45px;
	}


	.container_article .itinerary{
		width:100%;
		padding:30px 30px 10px 30px;
		margin:50px 0 0 0;
		background:rgba(252, 233, 198, 0.7);
		box-sizing: border-box;
		border-radius:10px;
		border:2px #A17FAF solid;
	}		
	

	.table1 td{
		vertical-align:top;
		padding:10px 5px;
	}	
	

	.table1 .time{
		font-size:25px;
		font-weight:bold;
		color:#E27C88;
		margin-bottom:10px;
	}		
	


	.table1.tr1 tr{
		border-bottom:1px #7a5418 dashed;
		padding-bottom:20px;
		margin-bottom:20px;
		display:block;
	}
	
	.table1.tr1 tr:last-child {
		border-bottom: none;
	}		
	
	
	.container_article .itinerary2{
		width:100%;
		padding:30px 10px 10px 10px;
		margin:50px 0 0 0;
		background:rgba(246, 218, 230, 0.7);
		box-sizing: border-box;
		border-radius:10px;
		border:2px #A17FAF solid;
	}	

	.container_article .itinerary3{
		width:100%;
		padding:30px 10px 10px 10px;
		margin:50px 0 0 0;
		background:rgba(252, 233, 198, 0.7);
		box-sizing: border-box;
		border-radius:10px;
		border:2px #A17FAF solid;
	}	
	
	
	
	.footer{
		
	}			
	
	.footers{
		max-width:90%;
		background:#CDDF74;
		height:auto;
		margin:0 auto;
		padding:50px 20px;

	}		
	
	.footers .copyright{
		
	}			
	
	.footers .organization{
		width:100%;
		margin:50px 0;
		display:flex;
		flex-wrap:wrap;
	}		
	
	.footers .organization .item{
		width:100%;
		display:block;
		margin-bottom:50px;
	}		
	
	
	.footers .organization .item .name{
		font-size:23px;
		font-weight:bold;
		margin-bottom:10px;
		background:#9464A3;
		color:#fff;
		height:30px;
		padding:5px 20px;
		border-radius:30px;
		line-height:33px;
		display:table;
	}	
	
	.footers .organization .item .org{
		padding:10px;
	}	
	
	
	.footers .organization .item .links{
		padding:20px 10px;
	}	
	
	.footers .organization .item .links a{
		display:block;
		font-size:19px;
		color:#000;
	}		
	
	.footers .organization .item .img{
		margin-bottom:20px;
	}		
	
	.footers .organization .item .img img{
		height:50px;
	}		
	
	
	.btn_registration{
		width:90%;
		border-radius:5px;
		font-size:17px;
		font-weight:bold;
		color:#fff;
		box-sizing:border-box;
		position:fixed;
		bottom:20px;
		right:5%;
		z-index:2;
		background:#BA3C59 url(../../img/background.png);
		text-align:center;
		padding:20px;
		line-height:20px;
		cursor:pointer;
		display:table;
	}		

	
	.btn_registration:hover{
		background:#375299;
		text-decoration:none;
		color:#fff;
	}		
	
	.btn_registration span{
		font-size:27px;
		margin-top:-5px;
	}	
	
	.btn_registration .name{
		margin:0;
	}	
	
	
	.btn_registration .img{
		width:100%;
		height:50px;
		border-radius:3px;
		background:#fff;
		position:relative;
		clip-path: inset(-100px 0px 0px 0px);
		display:none;
	}		
	
	.btn_registration .img .p1{
		width:90px;
		height:90px;
		background:url(../../img/視覺主題/p5.svg)no-repeat center center / contain;
		position:absolute;
		bottom:-10px;
		left:-5px;
		display:none;
		
	}		
	
	
	.btn_gotop{
		width:90%;
		border-radius:5px;
		font-size:17px;
		font-weight:bold;
		color:#fff;
		box-sizing:border-box;
		position:fixed;
		bottom:20px;
		right:5%;
		z-index:2;
		background:#BA3C59 url(../../img/background.png);
		text-align:center;
		padding:10px;
		line-height:20px;
		cursor:pointer;
		display:table;
	}		

	
	.btn_gotop:hover{
		background:#375299;
		text-decoration:none;
		color:#fff;
	}		
	
	.btn_gotop span{
		font-size:27px;
	}	
	
	
	
	
	
	.anchor_position{
		position:relative;
	}
	
	.anchor_fix{
		position:absolute;
		top:-159px;
		height: 0;
		display:block;
	}		
	

	.video-container {
		width: 100%;
		margin:0 auto; 
        border-radius: 10px;
        border: 2px #A17FAF solid;	
		overflow:hidden;
		box-sizing: border-box; /* 確保 border 不會擠壓寬度 */
	}

	.video-container iframe {
		width: 100%;
		aspect-ratio: 16 / 9;
		height: auto;
		display: block;
	}	

	.video-thumb{
		width: 100%;
		margin:10px auto 60px auto; 
		display:flex;
		gap:10px;
		justify-content: flex-start;
		flex-direction: row;     /* 水平排列（預設值） */
		align-items: flex-start; /* 交叉軸靠上對齊 */	
		flex-wrap:wrap;
	}

		
	.video-thumb .item {
		width: calc(50% - 5px);
		border-radius: 5px;
		border: 2px #A17FAF solid;
		overflow: hidden; 
		display: block;
		cursor:pointer;
		background:#A17FAF;
		box-sizing: border-box; /* 確保 border 不會擠壓寬度 */
	}
	
	.video-thumb .item .video{
		width: 100%;
		height:100%;
		aspect-ratio: 16 / 9; 
	}	
	
	.video-thumb .item .name{
		padding:10px;
		color:#fff;
		font-weight:bold;
		font-size:15px;
		line-height:23px;
	}		
	
	
	
}