#wrap { position: relative; z-index: 5; background-image: url(/images/44/img-bg.jpg); background-repeat: repeat; background-size: auto; }
#wrap .content_box_bg {overflow: hidden;position: absolute;width: min(92%,1440px);height: 100%;filter: drop-shadow(0 3vh 1.2em rgba(0,0,0,.1));top: 0;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);backdrop-filter: blur(5px);box-shadow: 10px 20px 40px rgb(212 225 239 / 30%);}
#wrap .content_box_bg:before { position: absolute; width: 100%; height: 100%; background: hsl(0deg 0% 100%/90%); top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); content: "" }
#wrap .mainArea { position: relative; margin: 0 auto; width: min(85%,1280px); z-index: 20; padding: 3vw 0 3vw; }

/* section */
section >* { z-index: 3; }
section .title_box { padding-bottom: 3vw; font-style: italic; font-size: 38px; }
section .clip { margin: auto; width: 100%; }
section .clip img { height: 100%; }
section .clip iframe { width: 100%; height: 100%; top: 0; left: 0; }
section .clip video { width: auto; height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); }

/* submenuvue */
#submenuvue { position: relative; z-index: 2; padding: 24px; border-radius: 26px; }
#submenuvue ul { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
#submenuvue ul li { margin: 0; padding: 0; list-style: none; }
#submenuvue ul li a { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 14px 22px; overflow: hidden; isolation: isolate; color: var(--secondary); font-weight: 700; font-size: 1.28rem; line-height: 1.5; letter-spacing: 1px; text-align: center; text-decoration: none; background: repeating-linear-gradient(115deg,rgba(255,255,255,0.08) 0px,rgba(255,255,255,0.08) 2px,rgba(214,224,235,0.05) 2px,rgba(214,224,235,0.05) 4px),linear-gradient(180deg,#ffffff 0%,#f5f8fc 18%,#e9eff5 55%,#dde5ee 100%); border-radius: 0; clip-path: polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95),inset 0 -1px 0 rgba(163,181,201,0.40),0 10px 24px rgba(105,143,182,0.14); }
#submenuvue ul li a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg,rgba(255,255,255,0.95) 0%,rgba(255,255,255,0.60) 16%,rgba(255,255,255,0.10) 34%,rgba(255,255,255,0) 55%); pointer-events: none; z-index: 0; }
#submenuvue ul li a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 8px; height: 2px; border-radius: 999px; background: linear-gradient(90deg,rgba(96,145,196,0) 0%,rgba(96,145,196,0.85) 50%,rgba(96,145,196,0) 100%); opacity: .6; pointer-events: none; transition: opacity .35s ease,transform .35s ease; }
#submenuvue ul li a > * { position: relative; z-index: 2; }
#submenuvue ul li a { background-position: 0 0,0 0; }
#submenuvue ul li a:hover,#submenuvue ul li a:focus { color: var(--primary); background: repeating-linear-gradient(115deg,rgba(255,255,255,0.10) 0px,rgba(255,255,255,0.10) 2px,rgba(216,229,241,0.07) 2px,rgba(216,229,241,0.07) 4px),linear-gradient(180deg,#ffffff 0%,#eef5fb 20%,#e9f4ff 58%,#a4d0ff 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(143,170,198,0.45),0 14px 28px rgba(95,140,187,0.20); transform: translateY(-6px); outline: none; }
#submenuvue ul li a:hover::after,#submenuvue ul li a:focus::after { opacity: 1; transform: scaleX(1.16); background: linear-gradient(90deg,rgba(96,145,196,0) 0%,rgb(123 166 209) 50%,rgba(96,145,196,0) 100%); }
#submenuvue ul li a:active { transform: translateY(-1px); box-shadow: inset 0 2px 6px rgba(132,155,178,0.20),0 6px 14px rgba(105,143,182,0.16); }
#submenuvue ul li a:focus-visible { outline: 3px solid rgba(75,142,214,0.45); outline-offset: 4px; }
#submenuvue ul li:nth-child(3) a,#submenuvue ul li:nth-child(4) a,#submenuvue ul li:nth-child(5) a { letter-spacing: .5px; }
#submenuvue ul li a .steel-dot,#submenuvue ul li a .steel-dot2 { display: none; }
@media (max-width:1024px) {
	#submenuvue { padding: 20px; border-radius: 22px; }
	#submenuvue ul {grid-template-columns: repeat(3,1fr);gap: 16px;}
	#submenuvue ul li a {min-height: 40px;font-size: 1rem;padding: 14px 18px;}
}


/* 手機 */
@media (max-width:640px) {
	#submenuvue {padding: 16px 0;border-radius: 18px;}
	#submenuvue ul { grid-template-columns: 1fr; gap: 12px; }
	#submenuvue ul li a {min-height: 30px;padding: 12px 9px;font-size: .98rem;clip-path: polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);}
}

#about_area { padding-bottom: 3vw; }
@media screen and (max-width:1024px) {
	#submenuvue ul { gap: 10px; }
	#submenuvue ul li a { font-size: 1rem; }
}
@media screen and (max-width:760px) {
	#submenuvue ul { grid-template-columns: repeat(2,1fr); }
}