@charset "utf-8";
/* CSS Document */
/*0209start*/
html, body{ height:100%; }

.wrap{
  position:relative;
  overflow:hidden;
}

.index_bg{
  position: fixed;
  inset: 0;            /* 視窗滿版座標系 */
  overflow: hidden;    /* 可出畫面就裁切 */
  z-index: 0;
  pointer-events: none;
	
	
	/* 右側群組：上下偏移（隨視窗高度變，但有上下限） */
  --gR-y: clamp(-40px, -6vh, 30px);
  --gR-x: 0px;

  /* 左側群組 */
  --gL-y: clamp(-30px, -5vh, 25px);
  --gL-x: 0px;

  /* 上方群組 */
  --gT-y: clamp(-20px, -3vh, 20px);
  --gT-x: 0px;
}

/* 背景元素共用 */
.index_bg > div{
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
}


@keyframes popIn{
  from{ opacity:0; transform: translateY(-10%) scale(1.06); }
  to  { opacity:1; transform: translateY(0)    scale(1); }
}
@keyframes slideInL{
  from{ opacity:0; transform: translateX(-25%) scale(1.08); }
  to  { opacity:1; transform: translateX(0)    scale(1); }
}
@keyframes slideInR{
  from{ opacity:0; transform: translateX(25%) scale(1.08); }
  to  { opacity:1; transform: translateX(0)   scale(1); }
}




.books{
  /*left: -2.5%;
  top: 13%;*/
	left: calc(-2.5% + var(--gL-x));
  	top:  calc(clamp(60px, 13vh, 160px) + var(--gL-y));

  width: clamp(96px, 12.33vw, 237px);
  aspect-ratio: 148 / 132;

  z-index: 2;
  opacity: 0;
  background-image: url("../../images/books.svg");

  transform: translateX(-80%) scale(2.2);
  animation: booksIn .6s .4s forwards;
}

@keyframes booksIn{
  0%{
    opacity:0;
    transform: translateX(-120%) scale(2.5);
  }
  100%{
    opacity:1;
    transform: translateX(0) scale(1);
  }
}

.girl{
  /*left: 10.83%;
  top: 23%;
*/
	left: calc(10.83% + var(--gL-x));
  	top:  calc(clamp(180px, 23vh, 300px) + var(--gL-y));
  width: clamp(148px, 19vw, 365px);
  aspect-ratio: 228 / 300;

  z-index: 3;
  opacity: 0;
  background-image: url("../../images/girl.svg");

  transform: translateY(-20%);
  animation: girlIn .8s .2s forwards;
}

@keyframes girlIn{
  0%{
    opacity:0;
    transform: translateY(-35%);
  }
  60%{
    opacity:1;
    transform: translateY(6%);
  }
  100%{
    opacity:1;
    transform: translateY(0);
  }
}

.meister{
  /*left: 2.08%;
  top: 44.83%;*/
	left: calc(2.08% + var(--gL-x));
  	top:  calc(clamp(202px, 44.83vh, 336px) + var(--gL-y));

  width: clamp(51px, 6.5vw, 125px);
  aspect-ratio: 78 / 80;

  z-index: 4;
  opacity: 0;
  background-image: url("../../images/ip-meister.svg");
  animation: popIn .4s .3s forwards;
}


.football{
  /*left: 1.42%;
  top: 59%;*/
	left: calc(1.42% + var(--gL-x));
  	top:  calc(clamp(322px, 71.6vmin, 537px) + var(--gL-y));

  width: clamp(103px, 13.25vw, 254px);
  aspect-ratio: 159 / 159;

  z-index: 5;
  opacity: 0;
  background-image: url("../../images/football.svg");
  animation: popIn .4s .4s forwards;
}


.blocks{
  	left: calc(21.08% + var(--gL-x));
  	top:  calc(clamp(525px, 116.6vmin, 875px) + var(--gL-y));


  width: clamp(43px, 5.5vw, 106px);
  aspect-ratio: 66 / 84;

  z-index: 1;
  opacity: 0;
  background-image: url("../../images/blocks.svg");
  animation: popIn .8s .4s forwards;
}




.palette{
  right: 23.08%;
  top: clamp(382px, 85vmin, 637px);
  /*top: 92.67%;*/

  width: clamp(44px, 5.67vw, 109px);
  aspect-ratio: 68 / 36;

  z-index: 9;
  opacity: 0;
  background-image: url("../../images/palette.svg");

  transform: translate(40%,-40%);
  animation: paletteIn .5s .2s forwards;
}

@keyframes paletteIn{
  0%{
    opacity:0;
    transform: translate(70%,-70%);
  }
  70%{
    opacity:1;
    transform: translate(-10%,10%);
  }
  100%{
    opacity:1;
    transform: translate(0,0);
  }
}


.airplane{
  right: 4%;
  top: clamp(140px, 52.5vh, 320px); /* 52.5% */

  width: clamp(55px, 6vw, 134px);
  aspect-ratio: 84 / 40;

  z-index: 10;
  background-image: url("../../images/airplane.svg");

  animation: airplaneLoop 8s linear infinite;
}



@keyframes airplaneLoop{

  /* 起飛位置（開始飛） */
  0%{
    transform: translateX(0vw) translateY(0vh) rotate(-6deg);
    opacity: 1;
  }

  /* 往右上飛 */
  18%{
    transform: translateX(30vw) translateY(-6vh) rotate(4deg);
    opacity: 1;
  }

  /* 飛出畫面 */
  28%{
    transform: translateX(140vw) translateY(-18vh) rotate(12deg);
    opacity: 0;
  }

  /* ✨ 畫面外等待一下 */
  40%{
    transform: translateX(140vw) translateY(-18vh);
    opacity: 0;
  }

  /* ✨ 瞬移回起飛位置（還看不到） */
  41%{
    transform: translateX(0vw) translateY(0vh) rotate(-6deg);
    opacity: 0;
  }

  /* ✨ 淡入出現 */
  50%{
    transform: translateX(0vw) translateY(0vh) rotate(-6deg);
    opacity: 1;
  }

  /* 🛫 停在起飛位置等待 3 秒 */
  100%{
    transform: translateX(0vw) translateY(0vh) rotate(-6deg);
    opacity: 1;
  }
}




.boy{
    /*right: 5.83%;
    top: clamp(146px, 32.33vh, 243px);*/
	right: calc(5.83% + var(--gR-x));
    top:   calc(clamp(146px, 32.33vh, 243px) + var(--gR-y));

  width: clamp(148px, 18.92vw, 363px);
  aspect-ratio: 227 / 336;

  z-index: 7;
  opacity: 0;
  background-image: url("../../images/boy.svg");

  animation: popIn .5s .15s forwards;
}
.plant{
  /*right: 6.25%;
  top: clamp(276px, 61.3vh, 460px);*/
	right: calc(6.25% + var(--gR-x));
  	top:   calc(clamp(345px, 76.6vmin, 575px) + var(--gR-y));

  	width: clamp(57px, 7.25vw, 139px);
  	aspect-ratio: 87 / 161;

  	z-index: 8;
  	opacity: 0;
  	background-image: url("../../images/plant.svg");
  	animation: popIn .5s .1s forwards;
}
.ip-memo{
  right: 25.83%;
  top: clamp(335px, 74.5vh, 559px);

  width: clamp(37px, 4.75vw, 91px);
  aspect-ratio: 57 / 45;

  z-index: 8;
  opacity: 0;
  background-image: url("../../images/ip-memo.svg");
  animation: popIn .4s .3s forwards;
}


.ip-dodogo{
  right: 29.17%;
  top: clamp(323px, 71.67vh, 538px);

  width: clamp(62px, 7.92vw, 152px);
  aspect-ratio: 95 / 81;

  z-index: 4;
  opacity: 0;
  background-image: url("../../images/ip-dodogo.svg");
  animation: popIn .4s .4s forwards;
}


.ip-artachu{
  right: 29.17%;
  top: clamp(107px, 23.83vh, 179px);

  width: clamp(27px, 3.5vw, 67px);
  aspect-ratio: 42 / 46;

  z-index: 3;
  opacity: 0;
  background-image: url("../../images/ip-artachu.svg");
  animation: popIn .4s .4s forwards;
}


.ip-oly{
  right: 21.42%;
  top: clamp(86px, 19.17vh, 144px);

  width: clamp(58px, 7.42vw, 142px);
  aspect-ratio: 89 / 87;

  z-index: 2;
  opacity: 0;
  background-image: url("../../images/ip-oly.svg");
  animation: popIn .4s .5s forwards;
}


.windsock{
  right: 9.25%;
  top: clamp(14px, 3vh, 23px);

  width: clamp(103px, 13.17vw, 253px);
  aspect-ratio: 158 / 148;

  z-index: 1;
  opacity: 0;
  background-image: url("../../images/windsock.svg");
  animation: popIn .5s .5s forwards;
}


.bg-elem-l{
  left: -25%;
  top: clamp(-375px, -50vh, -225px);

  width: clamp(453px, 58.08vw, 1115px);
  aspect-ratio: 697 / 746;

  z-index: -1;
  opacity: 0;
  background-image: url("../../images/bg-elem-l.svg");
  animation: popIn .8s .1s forwards;
}


.bg-elem-r{
  right: -25%;
  bottom: clamp(-375px, -50vh, -225px);

  width: clamp(522px, 66.92vw, 1285px);
  aspect-ratio: 803 / 858;

  z-index: -1;
  opacity: 0;
  background-image: url("../../images/bg-elem-r.svg");
  animation: popIn .8s .12s forwards;
}


.paint{
  display: none;
}




/* 超寬：元素稍微往中間收 */
@media (min-aspect-ratio: 21/9){
  .girl{ left: 14%; }
  .palette{ right: 18%; }
  .football{ left: 3%; }
  .airplane{ right: 3%; }
  .bg-elem-l{ left: -10%; }
  .bg-elem-r{ right: -10%; }
}

/* 超高窄：主要物件往中間、往上 */
@media (max-aspect-ratio: 4/5){

  .girl{
    top: clamp(120px, 26vh, 200px);
    left: 6%;
  }

  .palette{
    top: clamp(260px, 42vh, 340px);
    right: 10%;
  }

  .boy{
    top: clamp(110px, 26vh, 200px);
    right: 2%;
  }

  .paint{
    top: clamp(200px, 40vh, 300px);
    right: 3%;
  }

  .windsock{
    right: 2%;
  }

  .airplane{
    top: clamp(200px, 38vh, 300px);
  }
}


/* 超矮寬：把關鍵元素往下壓 */
@media (max-aspect-ratio: 16/10){
  .airplane{
    top: clamp(260px, 60vh, 420px);
  }
}

/*元素們的RWD*/
@media screen and (max-width: 1300px) {
	.girl{
		left: calc(5.83% + var(--gL-x));
		top:  calc(clamp(81px, 18vmin, 135px) + var(--gL-y));
	  	width: clamp(243px, 27vw, 405px);
	}
	.meister{
		left: calc(2.08% + var(--gL-x));
		top:  calc(clamp(202px, 44.83vh, 336px) + var(--gL-y));
	  	width: clamp(71px, 7.9vw, 118px);
	}
	.boy{
		right: calc(5.83% + var(--gR-x));
		top:   calc(clamp(146px, 32.33vh, 243px) + var(--gR-y));
	  	width: clamp(210px, 23.3vw, 350px);
	  
	}
	.blocks{
  		left: calc(25.08% + var(--gL-x));
		top:  calc(clamp(287px, 63.8vmin, 575px) + var(--gL-y));
	}
}

@media screen and (max-width: 999px) {
	.football{
		left: calc(1.42% + var(--gL-x));
		top:  calc(clamp(240px, 53.3vmin, 400px) + var(--gL-y));
	  	width: clamp(103px, 13.25vw, 254px);
	}
	.ip-artachu{
		  right: 31.17%;
		  top: clamp(78px, 17.3vh, 130px);
		  width: clamp(45px, 5vw, 75px);
		}
	.ip-oly{
		  right: 21.42%;
		  top: clamp(54px, 12vh, 90px);
		  width: clamp(93px, 10.42vw, 156px);
	}
	.ip-memo{
		  right: 30%;
		  top: clamp(335px, 74.5vh, 559px);
		  width: clamp(60px, 6.75vw, 101px);
	}

	.ip-dodogo{
		  right: 37%;
		  top: clamp(323px, 71.67vh, 538px);
		  width: clamp(89px, 9.92vw, 148px);
	}
	.index_bg .plant { display: none;}
	.index_bg .windsock { display: none;}

}

@media screen and (max-width: 760px) {
	.index_bg .blocks { display: none;}
	.index_bg .palette { display: none;}
	.ip-artachu{
		  right: 26.17%;
		  top: clamp(42px, 9.3vh, 70px);
		  width: clamp(45px, 5vw, 75px);
		}
	.ip-oly{
		  right: 15.42%;
		  top: clamp(18px, 4vh, 30px);
		  width: clamp(93px, 10.42vw, 156px);
	}
	.girl{
		left: calc(5.83% + var(--gL-x));
		top:  calc(clamp(225px, 50vmin, 375px) + var(--gL-y));
	  	width: clamp(243px, 27vw, 405px);
	}
	.meister{
		left: calc(2.08% + var(--gL-x));
		top:  calc(clamp(412px, 91.6vh, 687px) + var(--gL-y));
	  	width: clamp(71px, 7.9vw, 118px);
	}
	.football{
		left: calc(1.42% + var(--gL-x));
		top:  calc(clamp(450px, 100vmin, 750px) + var(--gL-y));
	  	width: clamp(103px, 13.25vw, 254px);
	}
}
@media screen and (max-width: 500px) {
	.index_bg .books {
		display: none;
	}
	.ip-artachu{
		  right: 13%;
	}
	.ip-memo{
		  right: 25%;
	}
	.girl{
		left: calc(5.83% + var(--gL-x));
		top:  calc(clamp(280px, 52vmin, 390px) + var(--gL-y));
	  	width: clamp(190px, 16.6vw, 215px);
	}
	.boy{
		right: calc(2.83% + var(--gR-x));
		top:   calc(clamp(146px, 39vh, 292px) + var(--gR-y));
	  	width: clamp(140px, 12.5vw, 160px);
		z-index: 2;
	}
	.football{
		left: calc(1.42% + var(--gL-x));
		top:  calc(clamp(580px, 100vmin, 750px) + var(--gL-y));
	  	width: clamp(103px, 13.25vw, 254px);
	}
	.meister{
		left: calc(2.08% + var(--gL-x));
		top:  calc(clamp(420px, 76vh, 500px) + var(--gL-y));
	  	width: clamp(71px, 7.9vw, 118px);
	}
}


/*0209end*/


.index {
	position: relative;
	
}
.logo {
	z-index: 9;
	position: relative;
}
.subject {
	color: #0d0e10;
	font-weight: bold;
	text-align: center;
	margin: 115px auto 35px auto;
	position: relative;
	z-index: 9;

}
.year {
	color: #2ca253;
	font-size: 2.25em;/*36px*/
	font-style: italic;
	padding: 0 5px;
	
}
.adacemic {
	font-size: 1.125em;
}

/******選單周圍小元件動畫******/
.mainMenu {
    position: relative;
	z-index: 9;
}

/* 圓形們 */
.mainMenu::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - 300px);
  width: 600px;
  height: 165px;
  background: url(../../images/deco-circle.png),url(../../images/deco-circle.png);
   background-size: 28px 28px, 21px 21px;
  background-repeat: no-repeat;
  background-position: bottom 10px left 90px, top 30px right 70px;
  animation-delay: .2s;
  animation: float1 3s ease-in-out infinite;
  pointer-events: none;
}

/* 方形 + 三角形 */
.mainMenu::after {
  content: '';
  position: absolute;
  bottom: -55px;
  left: calc(50% - 300px);
  width: 600px;
  height: 165px;
  display: block;
  background: url(../../images/deco-square.png),url(../../images/deco-triangle.png);
  background-size: 21px 21px, 21px 17px;
  background-repeat: no-repeat;
  background-position: bottom 30px left, top right;
  animation-delay: .2s;
  animation: float2 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes float1 {
  0%, 100% { 
	  opacity: .2;
	  transform: translateY(0); 
	}
  50% { 
	  opacity: .9;
	  transform: translateY(-8px); 
	}
}

@keyframes float2 {
  0%, 100% { 
	  opacity: .9;
	  transform: translateY(0); 
	}
  50% { 
	  opacity: .2;
	  transform: translateY(6px);
	}
}



.index_bg {
	/*position: absolute;
	z-index: -1;
	top: 0; left: 0; right: 0; bottom: 0;
	width: 100%; height: 100%;
	overflow: hidden;*/
	
}
.index_bg div {
	/*background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	display: block;*/
}



.footer {
	width: 100%;
	color: #999;
	font-size: 0.9375em;
	line-height: 1.4em;
	text-align: center;
	padding: 40px 1em 10px 1em;
	position: fixed;
	bottom: 0;
	align-content: center;
	margin-top: 80px;
}
.footer a, .footer a:link { color: #555;}





/****************************************************RWD*****************************************************/


@media screen and (max-width: 1400px) {
	.index { /*height: 600px;*/}
	.mainMenu::after, .mainMenu::before {
		display: none;
	}
}
@media screen and (max-width: 1000px) {
	.subject {
		width: 300px;
	}
	
}

@media screen and (max-width: 860px) {
	
	.index_bg div {
		/*transform: scale(0.85,0.85);*/
		transform:translateZ(0);
		backface-visibility: hidden;
	}
}


/****************************************************RWD 760px*****************************************************/



@media screen and (max-width: 760px) {
	.index {
		/*height: 750px;*/
	}
	.subject {
		margin: 15px auto 35px auto;
	}
		

	.index .footer {
		font-size: 0.9375em;
		line-height: 1.4em;
		padding: 50px 1em 10px 1em;
		align-content: center;
	}
}

@media screen and (max-width: 500px) {
	
}
@media screen and (max-width: 490px) {
	
	.footer span {
		display: block;
		visibility: hidden;
		height: 1px;
	}
}


/****************************************************RWD 430px*****************************************************/


@media screen and (max-width: 430px) {
	
	
	
	.index .footer {
		
		margin-top: 350px;
	}
}




/*0226 新增開起選單按鈕*/
/* 1) 預設隱藏（桌機 > 1400px 不出現） */
.paint {
  display: none;
}

/* 2) <= 1400px 才啟用 CTA */
 @keyframes ctaFloat {
     0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  	 50% { transform: translate(-50%, -50%) translateY(-6px); }
  }
@media (max-width: 1400px) {
  .paint {
    display: block;

    /* 讓它可點 + 在畫面上方 */
    pointer-events: auto;
    cursor: pointer;
    z-index: 60;

    /* 如果你原本 .index_bg > div 都是 absolute，這裡給定位 */
    position: absolute;

    /* 你可依畫面調整位置：先放中間偏下 */
    left: 50%;
    top: 390px;
    transform: translate(-50%, -50%);

    /* 讓 .paint 看起來像按鈕 */
    width: max-content;
    padding: 14px 36px;
    border-radius: 999px;
    background: #2e9e55;
	border: 1px solid #222;
    /*box-shadow: 0 8px 20px rgba(0, 0, 0, .05);*/

    /* 文字（用偽元素塞字，不改 HTML） */
    color: transparent; /* 避免你原本 paint 背景圖干擾字 */
  }

  .paint::before {
    content: "開啟選單";
    color: #fff;
    font-size: 18px;
    font-weight: 700;
  	letter-spacing: .02em;
  	display: inline-flex;
  	align-items: center;
  	gap: 18px;
	margin-right: 10px;
  }
	
	.paint::after {
	  content: "";
	  display: inline-block;
	  width: 18px;
	  height: 13px;
	  background: url("../../images/icon-arrow.png") no-repeat center;
	  background-size: contain;
	}

  /* 微微上下飄動 */
  .paint {
    animation: ctaFloat 6s cubic-bezier(.4,0,.2,1) infinite;
  will-change: transform;
  backface-visibility: hidden;
  }

 

  /* 選單打開時：按鈕變淡 + 不能點 */
  .paint.is-dim {
    opacity: .45;
    pointer-events: none;
    box-shadow: none;
  }
}