@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);

*,
a,
span {
	font-family: 'Noto Sans TC', Arial, Helvetica, 微軟正黑體, Microsoft JhengHei, sans-serif;
}
html,
body {
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	background-color: #063a3f;
	height: auto;
	position: relative;
}

body {
	/*height: auto;
	overflow: visible;*/
}

section {
	width: 100%;
	display: inline-block;
	margin: 0;
}

.pc {
  display: block;
}
.mob {
  display: none;
}


/*--↓主視覺區域↓--*/
.note-1_bg {
  width: 100%;
  aspect-ratio: 16 / 9; /* 根據 1920x1080 圖片比例 */
  background-image: url(../note-1/pc_bg.png);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  background-color: #fceff0; 
}

.note-1_bg {
	width: 100%;
	padding-top: 2%;
}

.note-1_bg img{
	width: 45%;
	display: block;
	margin: 0 auto;
}

.back_button img{
	width: 13%;
	padding-top: 1%;
	display: block;
  transition: transform 0.2s ease-in-out;
}

.back_button img:hover {
  transform: scale(0.95);
}




@media (max-width: 768px) {
  .pc {
    display: none;
  }

  .mob {
    display: block;
  }

  .note-1_mob_bg {
    aspect-ratio: auto;        /* 取消 16:9 限制 */
    height: 100vh;             /* 滿版顯示 */
    background-image: url(../note-1/mob_bg.png); /* ✅ 換直式圖 */
    background-position: center;  /* 可視需要調整對齊 */
    background-size: cover;
  }

  .note-1_mob_bg {
  	width: 100%;
  }

  .note-1_mob_bg img{
  	width: 80%;
  	display: block;
  	margin: 0 auto;
  	padding-top: 3.5%;
  }

  .back_button img{
		width: 25%;
		padding-top: 1.5%;
		display: block;
	  transition: transform 0.2s ease-in-out;
	}

}

@media (max-width: 430px) {
  
	.note-1_mob_bg img{
  	width: 90%;
  	display: block;
  	margin: 0 auto;
  	padding-top: 11.5%;
  }

  .back_button img {
    width: 35%;
    padding-top: 3.5%;
    display: block;
    transition: transform 0.2s ease-in-out;
  }

}

@media (max-width: 375px) {
  

}