@charset "utf-8";
/* CSS Document */

* { box-sizing: border-box; }
a {text-decoration:none;}
	
/*主視覺背景*/
.hero-section {
  width: 100%;
	height:40vh; 
	min-height: 320px;
  background-color:#FBEFC6; color:#222; 
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
	position: relative
}
.belt-area {
  width: 100%;
  max-width: 1920px;
  background-image: url('../images/client/event/anniversary/bg-gold-line-001.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 10vw 0; /* 控制腰帶高度，會隨視窗調整 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 主視覺區塊（絕對定位，疊在腰帶上） */
.visual-overlay {
  position: absolute;
	top: 50%;
  transform: translate(0%, -50%);
  width: 100%;
  max-width: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* 可視需要開啟互動 */
  z-index: 2;
}

.main-circle {
  width: 60vw;
  max-width:600px;
  z-index: 2;
}

.main-circle img {
  width: 100%;
  height: auto;
  display: block;
}

.person-left,
.person-right {
  position: absolute;
  bottom: 0;
  width: 30vw;
  max-width:380px;
  z-index: 3;
}

.person-left {left: 2%; top: -5%; animation: floatLeft 3s ease-in-out infinite; }
.person-right {right: 2%; bottom: -5%; width: 28vw; animation: floatRight 3s ease-in-out infinite;}

/* 優惠Box */
.HdTL{font-size:1.6em; font-weight: 700;line-height: 1.4em}

.AnnBox{box-shadow:0px 0px 5px rgba(0,0,0,0.5) ; border-radius:12px; box-sizing: border-box;}
.Bg-White{background-color:rgba(255,255,255,1.0);color:#000; }
.Bg-lightGray{background-color:#f3f3f3;color:#000; }
.Bg-lightgreen{background-color:#e8fff7;color:#000; }

.BoxTL{font-size:1.2em; font-weight: 700;}
.BoxFt-color-blue{color:#1B7EAE; }
.BoxFt-color-Teal{color:#008080; }
.BoxFt-color-lgreen{color:#22B573;}

/* 動作設定 */
@keyframes floatLeft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes floatRight {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}


/*Hotcourse*/
.HtCsBox{
		background-color: #f9f9f9;
		box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
		border: 0.5px solid rgba(0, 0, 0, 0.15);
		border-radius: 12px;
		height: 100%;
		overflow: hidden;
		margin-right: 1px;
		margin-bottom: 1px;
	}
	.HtcsWordBox { padding: 20px 15px 15px; }
	.HtcstgTxt{
		display: inline-flex;
    	place-content: center;
	}
	.HtcstgTxt > div{
		padding: 2px 8px 2px;
		border: 0.5px solid #333;
		margin-right: 8px;
		border-radius: 300px;
		font-weight: 600;
		word-break: keep-all;
		white-space: nowrap;
		font-size: 0.85em;
		line-height: 1.3em;
		color: #333;
	}
	.HtcstlTxt{
		display: inline-flex;
    	place-content: center;
		margin: 0px;
		align-items: baseline;
		white-space: nowrap;
	}
	.HtcstlTxt > h4 {
		font-size: 1.1em;
		font-weight: 800;		
	}#142b73
	.HtcstlTxt > h4 {
		font-size: 1.1em;
		font-weight: 800;
		margin-bottom: 0px;
	}

	.HtcstlTxt > div.SubTl {
		font-size: 0.85em;
		font-weight: normal;
		color : #d77900;
		margin-left: 2px;
	}
	.HtcsWordBox > p {
		font-size: 0.9em;
		font-weight: 500;
		color: #555;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-decoration: none;
	}
	.HtCsTpPicArea{
		width: 100%;
		height: 180px;
		border-radius: 12px 12px 0 0;
		overflow: hidden;
		object-fit: cover;
		align-content: center;
	}
	.HtCsTpPic{
		width: 100%;
		margin-top: -3%;
		border-radius: 12px 12px 0 0;
		transform: scale(1.0);
		transition: all .3s ease;
	}
	.HtCsArea > a:hover > .HtCsBox > .HtCsTpPicArea > .HtCsTpPic{ transform: scale(1.3); transition: all .3s ease;}
	.HtCsArea > a > .HtCsBox > .HtcsWordBox { background-color:transparent;text-decoration: none;}
	.HtCsArea > a:hover > .HtCsBox > .HtcsWordBox { background-color: #fff;box-shadow: 0px; }
	.HtCsArea > a > .HtCsBox > .HtcsWordBox > .HtcstlTxt > h4{ color:#333; text-decoration: none; margin-bottom: 0px; }
	.HtCsArea > a:hover > .HtCsBox > .HtcsWordBox > .HtcstlTxt > h4{ color:#142b73; text-decoration: none; }
	
	#HtCsZone > div.MainHd_HtCsAll > div.owl-controls { margin-top:20px;}
	#HtCsZone > div.MainHd_HtCsAll > div.owl-controls > div.owl-nav {
	  position: absolute;
	  text-align: left;
	  left:0;
	}
	
	#HtCsZone > div > div.owl-controls > div.owl-nav > div.owl-prev,
	#HtCsZone > div > div.owl-controls > div.owl-nav > div.owl-next{
		position: relative;
		color: #333;
		border: 1px solid #333;
		z-index: 666;
		font-size: 1.5rem;
		margin-top: -25px;
		padding: 2px 13px;
		border-radius: 400px;
		background-color: transparent;
	}
	#HtCsZone > div > div.owl-controls > div.owl-nav > div.owl-prev:hover,
	#HtCsZone > div > div.owl-controls > div.owl-nav > div.owl-next:hover{
	  color:#ffffff;
	  background-color:#000;
	  text-shadow:0px 2px 5px rgba(0,0,0,0.64);
	}
	#HtCsZone > div > div.owl-stage-outer { padding-left: 0px !important; } 
	.HtCsContactBt{ display: block; white-space: nowrap; margin-left: 100px; margin-top: 0px; font-size: 0.9em; position: relative; z-index: 2;}
	
@media (min-width: 768px){ #HtCsZone > div.MainHd_HtCsAll > div.owl-controls > div.owl-nav {text-align:center;position: relative;}
	.HtCsContactBt{ display: block; white-space: nowrap; margin-left: 0px; margin-top: -35px; font-size: 0.9em; float: right; position: relative; z-index: 2;}
	}
	
	/* 按鈕到底*/
	#HtCsZone > div > div.owl-controls > div.owl-nav [class*=owl-].disabled {
		background-color: transparent;
		color: transparent;
	}

/*NOWOPEN*/
.OpCsArea > a { text-decoration: none; color: #000;}
.OpCsArea > a:hover { text-decoration: none;}
.OpCsBox{ padding:15px 0; display: inline-flex;justify-content: flex-start; align-items: center;place-content: center;}
.OpCsBox:hover { text-decoration: none;}
.OpCsBox:hover > .OpCsSdPicArea > .OpCsSdPic { -webkit-transform: scale(1.1);  transform: scale(1.1);  }
.OpCsBox:hover > .OpcsWordBox > h4 { color:#142b73; }
.OpCsBox:hover > .OpcsWordBox > .OpcstgTxt > div { background-color:#142b73; }
.OpCsSdPicArea { width:calc(100%/2); height:calc(100vh/6); max-width: 205px; object-fit:cover; object-position: center center; border-radius: 12px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);  border: 0.5px solid rgba(0, 0, 0, 0.15); overflow: hidden;}
.OpCsSdPic { width: 100%; object-fit: cover; height: 100%; -webkit-transition: all .3s ease; transition: all .3s ease;border-radius: 12px; }
.OpcsWordBox{ width:100%;margin-left: 15px;align-items: center; place-content: center; display:block; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.OpcstgTxt {display:flex;}
.OpcstgTxt > div{padding:2px 8px 2px;background-color:#333;margin-right:8px;border-radius:300px;font-weight:600;word-break: keep-all;white-space: nowrap;font-size:0.85em;line-height: 1.2em;color:#fff;}
.OpcsWordBox > h4 {color: #333; font-size: 1.1em; font-weight: 800;margin: 8px 0 0 0;}
.OpcsWordBox > p {width: 100%; font-size: 0.9em; font-weight: 400; color: #555; margin-bottom: 0; }

.TagTLBox {display:flex;}
.TagTLBox > div{padding:5px 15px 5px;background-color:#333;margin-right:8px;border-radius:300px;font-weight:600;word-break: keep-all;white-space: nowrap;font-size:1em;line-height: 1.2em;color:#fff;}

/*小平板*/	
@media (min-width: 390px) and (max-width: 539px) {
.hero-section { min-height: 35vh;}
.main-circle {width: 60vw; max-width:500px;}
.person-left { left: 1%; top: -5%; width: 35vw;}
.person-right { right:2%; bottom: -5%;width: 27vw;}	
}

/*中平板*/	
@media (min-width: 540px) and (max-width: 767px) {
.hero-section { min-height: 45vh;}
.main-circle {width: 55vw; max-width:500px;}
.person-left { left: 1%; top: -5%; width: 35vw;}
.person-right { right:2%; bottom: -5%;width: 27vw;}	
}

/*平板-直*/	
@media (min-width: 768px) and (max-width: 979px) {
.hero-section { min-height: 42vh;}
.visual-overlay { transform: translate(0%, -50%);}
.main-circle {width: 45vw; max-width:500px;}
.person-left { left: 10%; top: -5%; }
.person-right { right:3%; bottom: -5%;}	
.HdTL{font-size:1.7em;}
.BoxTL{font-size:1.4em;}
}

/*平板-橫*/
@media (min-width: 980px) and (max-width: 1199px) {
.hero-section {min-height:620px;}
.visual-overlay {height:600px; transform: translate(0%, -50%);}
.main-circle {width: 45vw; max-width:500px;}
.person-left { left:5%; top:0; }
.person-right { right: 0%; bottom:0%;}	
.HdTL{font-size:1.7em;}
.BoxTL{font-size:1.4em;}
}

/*筆電*/
@media (min-width: 1200px) and (max-width: 1399px) {
.hero-section { min-height: 65vh; }
.visual-overlay { transform: translate(0%, -50%);}
.main-circle {width: 40vw; max-width:500px;}
.person-left { left: 2%; top: -5%; }
.person-right { right: -8%; bottom: -5%;}	
.HdTL{font-size:1.7em;}
.BoxTL{font-size:1.4em;}
}

/*桌機*/
@media (min-width: 1400px){
.hero-section { min-height: 80vh; }
.visual-overlay { transform: translate(0%, -50%);}
.person-left { left: 2%; top: -5%; }
.person-right { right: -8%; bottom: -5%;}	
.HdTL{font-size:1.7em;}
.BoxTL{font-size:1.5em;}
}

/*桌機*/
@media (min-width: 1600px){
.hero-section { min-height: 90vh; }
.visual-overlay {  transform: translate(0%, -50%);}
.main-circle {width: 70vw; max-width:750px;}
.person-left { left: -55px; top: -3%; }
.person-right { right: -13%; bottom: -3%; width: 20vw;}	
.HdTL{font-size:1.7em;}
.BoxTL{font-size:1.5em;}
}