/* ==========================================================================
   Public
============================================================================= */
@import url("https://use.fontawesome.com/releases/v7.2.0/css/all.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap'); /*思源黑體 */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');


html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}


body { 
	font:1vw/1.6 Arial, Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
	word-spacing:0.16em;
	color:#222;
	width:100%;
	overflow-wrap:break-word;
	word-break:break-word;
	background:#0f2b59 url("../img/bg.jpg") top center no-repeat fixed;
	background-size:cover;
	
}
@media screen and (max-width:1279px) {
	body { font-size:1.125em; }
}

*[lang|=zh], *[lang|=zh] * { letter-spacing:0.14em; }
*[lang|=zh], *[lang]:not([lang|=zh]) { letter-spacing:0.12em; }

img {
	display:inline-block;
	border:none;
	vertical-align:middle;
}


a {
	text-decoration:none;
    transition: all 300ms ease-in-out;
}


.font-block { font-family:"Noto Sans TC", "Meiryo UI", sans-serif; }



:focus-visible {
    outline:2px solid #ff1493;
}
:focus:not(:focus-visible){ outline:none; }


.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
}


input:focus {
    border-color:dodgerBlue;
    box-shadow:0 0 8px 0 dodgerBlue;
	color:#FFF;
	background:#333;
}

select:focus {
    border-color:dodgerBlue;
    box-shadow:0 0 8px 0 dodgerBlue;
	color:#FFF;
	background:#333;
}

::placeholder { color:#555; font-size:90%; }
:focus::placeholder { color:#FFF; }


.icon_guide {
	position:absolute;
	top:0; left:2px;
	font-size:0.75em!important;
	font-weight:normal!important;
	font-family:Arial!important;
}
.icon_guide a { color:#CCC!important; text-decoration:none; }

@media screen and (max-width:1279px) {
	input[type="checkbox"], input[type="radio"] { width:30px; height:30px; }
	.icon_guide { display:none; }
}





/* mobile nav
-----------------------------------------------------------------------------*/
#mobile-nav input {
	width:100%;
	padding:10px;
	border:none;
	background:#FFF;
	margin-bottom:10px;
}

.sp_logo { position:fixed; left:1rem; top:14px; z-index:100; }
.sp_logo img { width:220px; }
.sp_nav_btn {
	width:100%;
	color:#0b4f9a!important;
	text-align:center;
	padding:10px 0!important;
	background:#8ee3ff;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-weight:600;
}
.sp_nav_btn i { color:#FFF; margin-right:3px; }




/* pc nav
-----------------------------------------------------------------------------*/
header {
	margin:1.5vw auto;
	width:90%;
	display:grid;
	grid-template-columns:1fr 2.2fr;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
}
header img { width:100%; margin-top:1vw; }

header .link { font-size:0.8vw; text-align:right; }
header .link ul { display:inline-block; }
header .link li { display:inline-block; }
header .link li a {
	display:block;
	color:var(--blue);
	padding:0 1vw;
	border-left:#01ffff 1px solid;
	line-height:100%;
}
header .link li:last-child { padding-left:0; }
header .link li a:is(:hover, :focus) { color:#FFF; text-decoration:underline; text-shadow: 0 0 0.6vw #fff; }

header .link input {
	background:#9a9a9a;
	padding:0.3vw 0.5vw;
	border:none;
}
header .link input:is(:hover, :focus) { background:#FFF; }
header .keyword_btn {
	display:inline-block;
	background:#71e400;
	color:var(--hover);
	width:1.9vw;
	height:1.9vw;
	line-height:1.9vw;
	text-align:center;
}
header .keyword_btn:is(:hover, :focus) { background:#e6007a; color:#FFF; }

nav { text-align:right; padding-top:1vw; }
nav ul { display:inline-block; }
nav li { display:inline-block; }
nav li a {
	display:block;
	color:#FFF;
	font-weight:600;
	font-size:1.2vw;
	margin-left:1.5vw;
}
nav li:first-child a { margin-left:0; }
nav li a:is(:hover, :focus) { text-shadow: 0 0 0.6vw #01ffff; }


@media screen and (max-width:1000px) {
	header { display:none; }
}


/* home
------------------------------------------------------------------ */
.home_banner {
	position:relative;
	margin:2vw auto;
	width:88%;
	padding:1.5vw;
	border:#078ba4 1px solid;
}

.home_banner::before,
.home_banner::after,
.home_banner-inner::before,
.home_banner-inner::after {
	content: '';
	position: absolute;
	width: 4vw;
	height: 4vw;
	border-color: var(--blue);
	border-style: solid;
}

/* 左上 */
.home_banner::before {
	top: -2px; left: -2px;
	border-width: 3px 0 0 3px;
}

/* 右下 */
.home_banner::after {
	bottom: -2px; right: -2px;
	border-width: 0 3px 3px 0;
}

/* 右上 */
.home_banner-inner::before {
	top: -2px; right: -2px;
	border-width: 3px 3px 0 0;
}

/* 左下 */
.home_banner-inner::after {
	bottom: -2px; left: -2px;
	border-width: 0 0 3px 3px;
}

@media screen and (max-width:1000px) {
	.home_banner { margin-top:75px; width:90%; padding:6px 5px; }
	.home_banner::before,
	.home_banner::after,
	.home_banner-inner::before,
	.home_banner-inner::after {	width:20px; height:20px; }
	.home_banner::before { border-width: 2px 0 0 2px; }
	.home_banner::after { border-width: 0 2px 2px 0; }
	.home_banner-inner::before { border-width: 2px 2px 0 0; }
	.home_banner-inner::after { border-width: 0 0 2px 2px; }
}


.home_news {
	position:relative;
	margin:5vw auto 4vw;
	width:88%;
}

.home_news h2 {
	position:absolute;
	top:-1.6vw;
	left:-0.5vw;
}
.home_news h2 img { width:27vw; max-width:547px; }

.home_news .more { text-align:right; line-height:100%; }
.home_news .more a {
	display:inline-block;
	color:#FFF;
	font-family:"Petitinho", sans-serif;
	font-size:1.2vw;
	letter-spacing:0.02vw;
	padding:0.8vw 1.6vw 0.7vw 3vw;
	clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
	text-shadow:-2px -2px 0 #165666, 2px -2px 0 #165666, -2px 2px 0 #165666, 2px 2px 0 #165666;
	background: linear-gradient(to right, #058297 50%,#66b459 100%);
}
.home_news .more a:is(:hover, :focus) {
	text-shadow:-2px -2px 0 #681e54, 2px -2px 0 #681e54, -2px 2px 0 #681e54, 2px 2px 0 #681e54;
	background: linear-gradient(to right, #8e176d 50%,#caa640 100%);
}

.home_news ul {
	border:#078ba4 1px solid;
	padding:2vw 0;
}
.home_news li a {
	display:block;
	color:#FFF;
	border-bottom:var(--blue) 1px dashed;
	padding:1.2vw 5vw;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.home_news li:last-child a { border-bottom:none; }
.home_news li a:is(:hover, :focus) { color:var(--blue); text-shadow: 0 0 1vw #01ffff; }

.f1, .f2, .f3 { font-size:90%; padding:0.3vw 0.5vw; margin:0 0.5vw; }
.f1 { color:var(--pink); border:var(--pink) 1px solid; }
.f2 { color:var(--blue); border:var(--blue) 1px solid; }
.f3 { color:var(--green); border:var(--green) 1px solid; }

.home_news .triangle {
	position:absolute;
	left:1vw;
	bottom:1vw;
	width:0;
	height:0;
	border-style:solid;
	border-width:0 2.5vw 2.5vw 0;
	border-color:transparent transparent var(--blue);  
}

@media screen and (max-width:1000px) {
	.home_news { width:90%; margin:60px auto; }
	.home_news h2 {	top:-25px; left:-3px; }
	.home_news h2 img { width:45vw; }
	.home_news .more a { padding:10px 10px 10px 22px; font-size:90%; }
	.home_news ul { padding:20px 0; }
	.home_news li a { padding:15px; overflow:visible; text-overflow:clip; white-space:normal; }
	.home_news .day { font-size:85%; color:#ffda85; }
	.home_news .br { display:block; padding-top:5px; }
	.f1, .f2, .f3 { padding:5px 10px; margin:0 5px; }
	.home_news .triangle { left:8px; bottom:8px; border-width:0 20px 20px 0; }
}
@media screen and (max-width:767px) {
	.home_news { margin:40px auto; }
	.home_news h2 {	top:-12px; }
	.home_news h2 img { width:65vw; }
}


.home_progress {
	margin:0 auto;
	width:88%;
	display:grid;
	grid-template-columns:2fr 1.2fr;
	gap:10vw;
}

.home_progress h2 { padding-bottom:2vw; }
.home_progress h2 img { width:27vw; max-width:547px; }

.home_badge {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:3vw;
}

.progress-ring {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
}
      
.progress-ring svg {
	transform: rotate(-90deg);
	width:100%;
	height:100%;
}
        
.progress-ring .percentage {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	font-weight: 700;
	font-size:2.6vw!important;
	font-family: 'Outfit', 'Inter', sans-serif;
	color:#fff;
	letter-spacing:-0.02em;
}

.ring-circle {
	fill:none;
	transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
        
.ring-circle.inner-progress {
	filter: drop-shadow(0 0 4px currentColor);
}

.ring_card {
	position:relative;
	padding:0.8vw;
}
.ring_card .bg { position:absolute; top:-0.1vw; left:-0.1vw; }
.ring_card .bg img { width:100%; }


.home_progress h3 {
	color:#FFF;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-weight:600;
	font-size:120%;
	margin-top:0.8vw;
}
.home_badge h3 img { width:2vw; max-width:26px; margin-right:0.5vw; }
.home_badge p { font-size:100%; color:#9c9c9c; padding-top:5px; }
.home_badge span { color:var(--blue); font-weight:600; font-size:130%; letter-spacing:0; }


.progress-bar-wrapper {
	display:flex;
	align-items:center;
	gap:1rem;
	height:100%;
}
       
.progress-bar {
	position:relative;
	flex:1;
	height:100%;
	border-radius:999px;
	overflow:hidden;
	padding: 0.5vw;
}
        
.progress-bar-bg {
	position:absolute;
    inset:0;
    background:rgba(6, 182, 212, 0.2);
    border:2px solid #06B6D4;
    border-radius:999px;
}
        
.progress-bar-fill {
    position: absolute;
    left: 0.5vw;
    top: 0.5vw;
    bottom: 0.5vw;
    max-width: calc(100% - 1vw);
    background: linear-gradient(90deg, #EC4899 0%, #F9A8D4 100%);
    border-radius: 999px;
    width: 0;
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
        
.progress-percentage {
    font-size: 1.5rem;
    font-weight: 700;
	font-family: 'Outfit', 'Inter', sans-serif;
	letter-spacing:0;
    color: #06B6D4;
    white-space: nowrap;
    min-width: 3.8rem;
    text-align: right;
}

.bar-container {
	height:2.5vw;
}
        
.point-container {
    display: flex;
    flex-direction:column;
	gap: 2rem;
    margin: 0 auto;
}

.point-item .point {
	position:relative;
	color:#FFF;
	padding-left:5.1vw;
	padding-top:0.7vw;
	font-size:120%;
	font-weight:600;
	line-height:140%;
}
.point-item .point span { color:var(--blue); letter-spacing:0.5px; }

.point-item .dot {
	position:absolute;
	top:0vw;
	left:2vw;
}
.point-item .dot img { width:2.5vw; max-width:53px; }



@media (max-width:1279px) {
	.home_progress { width:90%;	grid-template-columns:1fr; gap:50px; }
	.home_progress h2 { padding-bottom:15px; }
	.home_badge { margin:0 auto; width:95%; gap:5vw; }
	.home_badge h3 { margin-top:15px; }
	.home_badge h3 img { width:26px; margin-right:5px; }
	.home_badge p { padding-top:0; font-size:90%; }
	.progress-ring .percentage { font-size:5vw!important; }
	.progress-percentage { font-size: 1.2rem; min-width: 3rem; }
	.bar-container { height: 2rem; }
	.point-item .point { font-size:120%; padding-top:17px; padding-left:110px; }
	.point-item .dot { left:50px; }
	.point-item .dot img { width:53px; }
}
@media (max-width:1000px) {
	.home_progress h2 img { width:45vw; }
	.ring_card { padding:11px; }
}
@media (max-width:767px) {
	.home_progress h2 img { width:65vw; }
	.home_badge { grid-template-columns:repeat(2, 1fr);	gap:20px; font-size:100%; }
	.home_badge h3 { font-size:100%; }
	.home_badge h3 img { width:15px; }
	.home_badge p { font-size:70%; letter-spacing:0.2vw; }
	.ring_card { padding:2.05vw; }
	.ring_card .bg { top:-1px; left:-1px; }
	.progress-ring .percentage { font-size:7vw!important; }
	.progress-bar { padding:10px; }
	.progress-bar-fill { left:5px; top:5px; bottom:5px; max-width: calc(100% - 10px); }
	.progress-percentage { width:0; }
	.progress-bar-wrapper { gap:8px; }
	.point-item .point { font-size:100%; padding-top:10px; padding-left:65px; }
	.point-item .dot { left:25px; }
	.point-item .dot img { width:35px; }
}


.home_level {
	margin:5vw auto;
	width:88%;
}
.home_level h2 { padding-bottom:2vw; }
.home_level h2 img { width:27vw; max-width:547px; }


.home_level .type1 {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:5vw;
}
.home_level .type2 {
	display:grid;
	grid-template-columns:1fr 1.2fr;
	margin-bottom:3vw;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
}

.home_level .type2 > div:first-child { text-align:center; padding:0.6vw 0; }
.home_level .type2 > div:first-child img { width:16.5vw; max-width:314px; }

.home_level .type2 h3 {
	width:72%;
	font-weight:600;
	padding-top:0.6vw;
	font-size:1.7vw;
	text-align:center;
}
.home_level .type2 p {
	color:#FFF;
	padding:2.5vw 1vw 2vw 3.8vw;
	font-size:1.2vw;
}

.home_level .bg1 {
	background:url("../img/level-blue.png") center top no-repeat;
	background-size:100%;
}
.home_level .bg1 h3 { color:#0f536a; }

.home_level .bg2 {
	background:url("../img/level-pink.png") center top no-repeat;
	background-size:100%;
}
.home_level .bg2 h3 { color:#501259; }

@media (max-width:1279px) {
	.home_level h2 { padding-bottom:25px; }
}
@media (max-width:1000px) {
	.home_level { margin-top:50px; }
	.home_level h2 img { width:45vw; }
}
@media (max-width:767px) {
	.home_level h2 img { width:65vw; }
	.home_level .type1 { grid-template-columns:1fr; }
	.home_level .type2 { grid-template-columns:1fr 1.5fr; gap:2vw; margin-bottom:20px; }
	.home_level .type2 > div:first-child { padding:3vw 0; }
	.home_level .type2 > div:first-child img { width:35vw; max-width:314px; }
	.home_level .type2 h3 { font-size:4.5vw; padding-top:1.2vw; }
	.home_level .type2 p { padding:4.5vw 2vw 2vw 8.9vw; font-size:2.8vw; }
}



/* content
------------------------------------------------------------------------------ */
main {
	margin:0 auto 5vw;
	width:88%;
	display:grid;
	grid-template-columns:1fr 4fr;
	gap:5vw;
}

.content {
	position:relative;
	background:#e9e9e9;
	padding:2vw 3vw;
}

.content h2 {
	font-size:200%;
	font-weight:600;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	color:#2f466e;
	text-align:center;
	margin-bottom:1.2vw;
}
.content h2 span {
	display:block;
	font-size:50%;
	color:#555;
}

.content h3 {
	color:#08254d;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-size:130%;
	font-weight:600;
	margin-bottom:0.5vw;
}

.content p { padding-bottom:1vw; }

.content p a { color:#19716f; text-decoration:underline; }
.content p a:is(:hover, :focus) { color:#b03088; }

.content_btn { margin-top:1vw; }
.content_btn a {
	display:inline-block;
	color:#4468a7;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	background:#FFF;
	border-radius:3px;
	padding:0.3vw 0.5vw;
	border:#38c8c8 1px solid;
}
.content_btn a i { color:#01ffff; }
.content_btn a:is(:hover, :focus) { background:var(--hover); color:#FFF; }
.content_btn a { padding:6px 10px; }

@media screen and (max-width:1279px) {
	main { margin:20px auto 50px; width:90%; grid-template-columns:1fr; gap:20px; }
	.content { padding:20px; }
	.content h2 { font-size:120%; margin-bottom:20px; }
	.content h3 { font-size:110%; }
	.content p { padding-bottom:15px; }
	.content_btn { margin-top:10px; text-align:center; }
}



.breadcrumb { position:relative; font-size:0.75em; color:#FFF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:6%; margin-bottom:2vw; }
.breadcrumb i { color:#b46fca; margin-right:5px;}
.breadcrumb a { color:var(--blue); }
.breadcrumb a:hover, .breadcrumb a:focus { text-decoration:underline; text-shadow:0 0 0.6vw #01ffff; }

@media screen and (max-width:1279px) {
	.breadcrumb { display:none; }
}

input, select, textarea { border:none; }
textarea { background:#FFF; padding:1vw; width:100%; }

@media screen and (max-width:1279px) {
	textarea { padding:10px 15px; }
}





/* sub menu
------------------------------------------------------------------------------ */
.sub_menu {
	background:rgba(77, 154, 255, 0.2);
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
}

aside .title {
	position:relative;
	border:var(--blue) 2px solid;
	border-bottom:none;
	font-weight:600;
	font-size:150%;
	color:#FFF;
	text-align:center;
	padding-left:5vw;
	padding-top:1vw;
	line-height:130%;
	min-height:2vw;
}
aside .title span { display:block; font-size:85%; }
aside .title img {
	position:absolute;
	top:-0.5vw;
	left:0.5vw;
	width:5.5vw;
}

aside ul { border-top:#969696 1px dashed; margin:2vw 0; }
aside li a {
	display:block;
	text-align:center;
	color:#FFF;
	padding:1vw;
	font-size:120%;
	border-bottom:#969696 1px dashed;
}
aside li a:is(:hover, :focus) { color:var(--blue); text-shadow:0 0 0.6vw #fff; }

aside .end {
	height:2vw;
	border:var(--blue) 2px solid;
	border-top:none;
}


@media screen and (max-width:1279px) {
	aside { display:none; }
}



/* news
------------------------------------------------------------------------------ */
.news {	position:relative; }

.news ul {
	border:#078ba4 1px solid;
	padding-bottom:2vw;
}
.news li a {
	display:block;
	color:#FFF;
	border-bottom:var(--blue) 1px dashed;
	padding:1.2vw 5vw;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.news li:last-child a { border-bottom:none; }
.news li a:is(:hover, :focus) { color:var(--blue); text-shadow: 0 0 1vw #01ffff; }

.f1, .f2, .f3 { font-size:90%; padding:0.3vw 0.5vw; margin:0 0.5vw; }
.f1 { color:var(--pink); border:var(--pink) 1px solid; }
.f2 { color:var(--blue); border:var(--blue) 1px solid; }
.f3 { color:var(--green); border:var(--green) 1px solid; }

.news .triangle {
	position:absolute;
	left:1vw;
	bottom:1vw;
	width:0;
	height:0;
	border-style:solid;
	border-width:0 2.5vw 2.5vw 0;
	border-color:transparent transparent var(--blue);  
}

@media screen and (max-width:1000px) {
	.news { margin:60px auto; }
	.news ul { padding-bottom:20px; }
	.news li a { padding:15px; overflow:visible; text-overflow:clip; white-space:normal; }
	.news .day { font-size:85%; color:#ffda85; }
	.news .br { display:block; padding-top:5px; }
	.f1, .f2, .f3 { padding:5px 10px; margin:0 5px; }
	.news .triangle { left:8px; bottom:8px; border-width:0 20px 20px 0; }
}
@media screen and (max-width:767px) {
	.news { margin:10px 0; }
}

.download { padding:1vw 0; }
.download li { display:inline-block; }
.download li a {
	display:block;
	border-radius:99em;
	padding:1vw 2vw;
	color:#FFF;
	background:#b03088;
	margin-right:0.5vw;
}
.download li a i { opacity:0.6; font-size:120%; }
.download li a:is(:hover, :focus) { background:var(--hover); }

@media screen and (max-width:1279px) {
	.download li a { padding:10px 15px; font-size:90%; margin-right:10px; margin-bottom:10px; }
}






/* test
------------------------------------------------------------------------------ */
.graph {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:2vw;
	margin-bottom:2vw;
}
.graph table { width:100%; background:#FFF; }
.graph :is(th, td) {
	border:#e9e9e9 1px solid;
	padding:0.6vw;
}
.graph th { background:#4468a7; color:#FFF; }
.graph input { width:100%; color:#222; background:#b8dfe1; text-align:center; padding:0.5vw; }

@media screen and (max-width:1279px) {
	.graph { grid-template-columns:1fr; gap:20px; margin-bottom:20px; }
	.graph :is(th, td) { padding:6px; }
	.graph input { padding:6px; }
}

.test_photo {
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:2vw;
	margin-bottom:2vw;
}

.test_photo div { aspect-ratio:4 / 3; }
.test_photo div img {
	width:100%;
	height:100%;
	object-fit:cover;
}

.test_upload { background:#FFF; padding:10px; }

@media screen and (max-width:767px) {
	.test_photo { grid-template-columns:1fr; gap:15px; margin-bottom:30px; }
	.test_upload { width:100%; }
	.content_btn input[type="file"] { margin-bottom:10px; }
	
}








.about {
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:1vw;
	margin-bottom:30px;
}
.about img { width:100%; }

@media screen and (max-width:1279px) {
	.about { grid-template-columns:repeat(2, 1fr); gap:30px; }
}
@media screen and (max-width:767px) {
	.about { grid-template-columns:1fr; }
}



.accreditatio .w2 {
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:2vw;
}

.accreditatio .box {
	background:#FFF;
	border-radius:1vw;
	padding:1.5vw;
	margin-bottom:2vw;
}

.accreditatio .box h4 { font-family:"Noto Sans TC", "Meiryo UI", sans-serif; font-size:120%; font-weight:600; margin-bottom:1vw; }
.accreditatio .box h4 img { width:2.2vw; }
.accreditatio .box h4 br { display:none; }
.accreditatio .box li { border-bottom:#ccc 1px dashed; padding:1vw 0; }
.accreditatio .box li:last-child { border-bottom:none; }
.accreditatio .box .c1 { color:#197666; font-weight:600; }
.accreditatio .box .c2 { color:#9f5423; font-weight:600; }

.accreditatio .box2 {
	display:grid;
	grid-template-columns:1fr 8fr;
	gap:2vw;
	background:#17436f;
	color:#8bb4da;
	border-radius:1vw;
	padding:1.5vw;
	margin-bottom:2vw;
}
.accreditatio .box2 img { width:100%; }
.accreditatio .box2 h4 { font-family:"Noto Sans TC", "Meiryo UI", sans-serif; font-size:120%; font-weight:600; margin-bottom:1vw; color:#3dbd99; }


@media screen and (max-width:1279px) {
	.accreditatio .box h4 { font-size:100%; }
	.accreditatio .box h4 img { width:40px; }
	.accreditatio .box li { padding:10px 0; }
	.accreditatio .box { padding:20px; border-radius:10px; margin-bottom:30px; }
}
@media screen and (max-width:860px) {
	.accreditatio .box h4 { text-align:center; }
	.accreditatio .box h4 br { display:block; }
}
@media screen and (max-width:767px) {
	.accreditatio .w2 { grid-template-columns:1fr; gap:0; }
	.accreditatio .box2 {grid-template-columns:1fr;}
	.accreditatio .box2 img { width:30%; }
	.accreditatio .box2 h4 { text-align:center; font-size:110%; padding-bottom:10px; }
	.accreditatio .box2 div:first-child { text-align:center; }
}



.level .sub { font-size:70%; color:#4a6278; font-family:"Noto Sans TC", "Meiryo UI", sans-serif; }

.level .box {
	position:relative;
	display:grid;
	grid-template-columns:1fr 7fr;
	gap:1vw;
	background:#FFF;
	border-radius:1vw;
	padding:1.5vw;
	border-width:1px;
	border-style:solid;
	margin-bottom:1vw;
}
.level .box img { width:100%; }

.level .box h3 { font-family:"Noto Sans TC", "Meiryo UI", sans-serif; font-weight:600; font-size:110%; margin-bottom:0; padding-bottom:0; }
.level .box span { font-size:70%; color:#555; }
.level .box p { padding-bottom:0; }
.level .box .flag {
	position:absolute;
	top:1vw;
	right:1vw;
	font-size:70%;
	padding:6px 15px;
	border-radius:99em;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
}

@media screen and (max-width:1279px) {
	.level .box { grid-template-columns:1fr 4fr; gap:20px; padding:18px; border-radius:10px; margin-bottom:20px; }
	.level .box .flag { top:12px; right:12px; }
}
@media screen and (max-width:767px) {
	.level .box { grid-template-columns:1fr; }
	.level .box img { width:60%; }
	.level .box div:first-child { text-align:center; padding-top:30px; }
	.level .box h3 { text-align:center; }
	.level .box span { display:block; padding:6px 0; text-align:center; }
}


.badge {
	position:absolute;
	top:-2.5vw;
	right:1.5vw;
	width:10vw;
}
.badge img { width:100%; }

@media screen and (max-width:1279px) {
	.badge { top:-5px; right:10px; }
}
@media screen and (max-width:767px) {
	.badge { left:6px; width:55px; }
}



.test_list td a { display:inline-block; color:#FFF; background:#d03985; padding:6px 10px; border-radius:5px; font-size:90%; text-align:center;}
.test_list td a i { opacity:0.6; }


@media screen and (min-width:1024px) {
	/*.test_list td:nth-child(3) { width:40%; }*/
	.test_list td:last-child { text-align:center; }
	.test_list td:first-child { text-align:center; }
	.test_list img { width:7vw; }
	.test_list td a { width:6vw; }
}
@media screen and (max-width:1280px) {
	.test_list td a { width:9vw; }
}
@media screen and (max-width:1024px) {
	.test_list td a { width:120px; font-size:100%; }
}
@media screen and (max-width:900px) {
	.test_list img { width:120px; }
}



/* login
------------------------------------------------------------------------------ */
.login {
	display:grid;
	grid-template-columns:1fr 1fr;
	border:#078ba4 1px solid;
}

.login > div { position:relative; padding:2vw 4vw; }
.login > div:first-child { border-right:#078ba4 1px dashed; }


.login2 {
	position:relative;
	border:#078ba4 1px solid;
	padding:2vw 4vw;
}


.login h2, .login2 h2 {
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-size:140%;
	font-weight:600;
	text-align:center;
	margin-bottom:1vw;
}
.login h2 i, .login2 h2 i { color:var(--blue); margin-right:3px; }

.login_outoff { margin:0 auto; width:60%; }


.login .triangle_bottom, .login2 .triangle_bottom {
	position:absolute;
	bottom:1vw;
	right:1vw;
	width:0;
	height:0;
	border-style:solid;
	border-width:0 0 2vw 2vw;
	border-color: transparent transparent var(--blue) transparent;
}

.login .triangle_top, .login2 .triangle_top {
	position:absolute;
	top:1vw;
	left:1vw;
	width:0;
	height:0;
	border-style:solid;
	border-width:2vw 2vw 0 0;
	border-color:var(--blue) transparent transparent transparent;
}

.login label, .login2 label { display:block; color:#FFF; margin-top:1vw; }
.login label i, .login2 label i { color:#008e8e; font-size:80%; }
.login :is(input, select), .login2 :is(input, select) {
	width:100%;
	border:var(--blue) 1px solid;
	padding:0.6vw 1vw;
	border-radius:3px;
}

.login .btn, .login2 .btn { border-top:#666 1px dashed; margin:1.5vw 0 1vw; text-align:center; }


@media screen and (max-width:1279px) {
	.login > div { padding:30px 40px; }
	.login2 { padding:30px 40px; }
	.login label, .login2 label { margin-top:20px; }
	.login :is(input, select), .login2 :is(input, select) { padding:10px; }
	.login .btn, .login2 .btn { margin:20px 0; }
}
@media screen and (max-width:767px) {
	.login { grid-template-columns:1fr; }
	.login > div:first-child { border-right:none; border-bottom:#078ba4 1px dashed; }
	.login .triangle_top, .login2 .triangle_top { top:10px; left:10px; border-width:25px 25px 0 0; }
	.login .triangle_bottom, .login2 .triangle_bottom { bottom:10px; right:10px; border-width:0 0 25px 25px; }
	.login_outoff { width:100%; }
}



/* record
------------------------------------------------------------------------------ */
.record_badge {
	display:grid;
	grid-template-columns:repeat(6, 1fr);
	gap:1vw;
	margin-bottom:1vw;
}

.record_badge > div {
	position:relative;
}
.record_badge img { width:100%; }

.badge_no {
	position:absolute;
	top:1vw;
	right:1vw;
	width:2vw;
	height:2vw;
	line-height:2vw;
	text-align:center;
	border-radius:99em;
	color:#FFF;
	background:#880000;
	border:#FFF 1px solid;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	letter-spacing:0;
}

.badge_none {
	filter: grayscale(100%);
	opacity:0.5;
}

@media screen and (max-width:1279px) {
	.record_badge { margin-bottom:30px; }
	.badge_no { top:8px; right:8px; width:35px; height:35px; line-height:35px; }
}
@media screen and (max-width:767px) {
	.record_badge { grid-template-columns:repeat(3, 1fr); gap:10px; }
	.badge_no { top:8px; right:8px; width:26px; height:26px; line-height:26px; font-size:80%; }
}



.badge_list td a { text-decoration:underline; }

.badge_ok { color:#126f0b; }
.badge_check { color:#995900; }
.badge_edit { color:#4061b0; }
.badge_cancel { color:#b04040; }

@media screen and (min-width:1280px) {
	.badge_list td:first-child,
	.badge_list td:last-child { text-align:center; }
}

.approval_list td a { text-decoration:underline; }
.approval_list td:last-child span { font-size:80%; letter-spacing:0; }

@media screen and (min-width:1280px) {
	.approval_list td { text-align:center!important; }
}


.search {
	text-align:center;
	margin:1.5vw 0 1vw;
}

.search :is(input, select, a) { vertical-align:middle; border-radius:3px; }
.search input { padding:0.2vw 0.5vw; }
.search select { padding:0.4vw 0.5vw; margin-left:0.5vw; }

.search .keyword {
	display:inline-block;
}
.search .keyword a { display:inline-block; padding:0.2vw 0.5vw; background:#b13975; color:#FFF; margin-left:0.5vw; }
.search .keyword a i { opacity:0.6; }


@media screen and (max-width:1279px) {
	.search { margin:20px 0; }
	.search input { padding:10px; }
	.search select { padding:13px 10px; margin-left:8px; }
	.search .keyword a { padding:10px; margin-left:8px; }
}
@media screen and (max-width:767px) {
	.search select { width:48%; margin-left:0; margin:0 1% 10px; }
	.search .keyword { display:block; }
	.search .keyword input { width:calc(98% - 85px); }
	.search .keyword a { width:80px; font-size:90%; margin-left:5px; padding:12px 0;}
}

.login_list table { width:100%; }
.login_list tr:nth-child(even) { background:#FFF; }
.login_list tr:nth-child(odd) { background:#e1f1f0; }
.login_list th, .login_list td { border:#ccc 1px solid; padding:0.5vw; text-align:center; }
.login_list th { background:#4468a7; color:#FFF; }

@media screen and (max-width:1279px) {
	.login_list th, .login_list td { padding:6px 0; font-size:90%; }
}



/* footer
------------------------------------------------------------------------------ */
footer {
	position:relative;
	background:#121212;
	padding:3.5vw 5vw;
}

.footer {
	display:grid;
	grid-template-columns: 1fr 3fr 1fr;
}

.qrcode a:is(:hover, :focus) { opacity:0.6; }
.qrcode img { width:5.5vw; margin:0 0.3vw; }

address { font-size:90%; color:#FFF; line-height:180%; }
address a { color:#FFF; }
address a:is(:hover, :focus) { text-decoration:underline; }
address ul { margin-bottom:0.6vw; }
address li { display:inline-block; border-left:#aaa 1px solid; padding:0 1vw; }
address li:last-child { border-right:#aaa 1px solid; }

.mark { text-align:right; }
.mark .gov { width:3vw; }
.mark .aplus { width:10vw; }

@media (max-width:1279px) {
	footer { padding:50px 30px; display:block; }
	.footer { grid-template-columns: 1fr; }
	.qrcode, address, .mark { width:100%; text-align:center; }
	.qrcode img { width:100px; margin:10px; }
	address { padding:10px 0; font-size:80%; }
	address ul { margin-bottom:15px; }
	address li { padding:0 15px; }
	.mark { margin-top:15px; }
	.mark .gov { width:50px; }
	.mark .aplus { width:150px; }
}

@media (max-width:680px) {
	.qrcode img { width:100px; }
}
@media (max-width:400px) {
	address { font-size:70%; }
}




/* btn
------------------------------------------------------------------------------ */
.btn {
	position:relative;
	padding-top:2vw;
}

.btn a {
	position:relative;
	display:inline-block;
	text-align:center;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-size:120%;
	line-height:3.5vw;
	margin-right:1vw;
	background-color: color-mix(in srgb, currentColor 20%, transparent);
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.btn a i { margin-right:3px; }

.btn a::before,
.btn a::after {
  content: '';
  position:absolute;
  top:-2px;
  width:1vw;
  height:calc(3.5vw + 4px);
  border:3px solid currentColor;
}
.btn a::before {
  left:-1px;
  border-right:none;
}
.btn a::after {
  right:-1px;
  border-left:none;
}

.btn a:is(:hover, :focus) {
	filter:brightness(1.3);
    transform:translateY(-1px);
	text-shadow: 
        0 0 10px currentColor,
        0 0 20px currentColor,
        0 0 30px currentColor;
}
.btn a:last-child { margin-right:0; }

.btn_1 a { width:50%; }
.btn_2 a { width:12vw; }

.btn_blue { color:var(--blue); }
.btn_pink { color:var(--pink2); }

.btn_end {
	position:absolute;
	top:0;
	right:0;
	clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), 20% calc(100% + 1px));
	/*clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);*/
	background:#e9e9e9;
	width:18vw; height:2.5vw;
}


@media (max-width:1279px) {
	.btn { padding-top:30px; }
	.btn a { line-height:50px; font-size:110%; }
	.btn a::before, .btn a::after { width:10px; height:54px; }
	.btn_2 a { width:25%; }
	.btn_end { width:30%; height:50px; }
}

@media (max-width:767px) {
	.btn { padding-top:40px; text-align:center; }
	.btn a { font-size:100%; }
	.btn_1 a { width:80%; }
	.btn_2 a { width:45%; }
	.btn_end { width:35%; height:18px; }
}



/* color
------------------------------------------------------------------------------ */
:root {
	--pink:#ff6efd;
	--pink2:#ed4c9c;
	--blue:#01ffff;
	--green:#4fff46;
	--hover:#2b5e3f;
}


/* youtube 比例自動縮放
-------------------------------------------------------------------------- */
.video-16x9 {
  aspect-ratio: 16 / 9;
}

.video-16x9 iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* 直式（手機短影音） */
.video-9x16 {
  aspect-ratio: 9 / 16;
  max-width: 500px;
  margin: 0 auto;
}

.video-9x16 iframe {
  width: 100%;
  height: 100%;
  display: block;
}