*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
a { text-decoration: none; outline: none; }
ul{ list-style:none;}
img{ max-width:100%; display:block;}
img[ src*=".svg"] { width: 100%; }
html { width: 100%; height: 100%; scroll-behavior: smooth;}
body { width: 100%; min-height: 100%; color: #434343; margin: 0 auto; font-size: 18px; font-weight: 500; line-height: 1.5; position: relative; font-family: "Noto Sans TC", "微軟正黑體", "Microsoft JhengHei", sans-serif; }


.none{ display: none !important;}
.container{ width: 100%; position: relative; margin: 0 auto; padding: 0; }


#wrap{ width:100%; height:100%; margin: 0 auto; }


header{ width:100%; height: 100px; position:fixed; top: 0; left: 0; z-index:999; border-bottom: rgba(255,255,255,0.45) solid 1px; box-shadow: 0 0 5px rgba(23,169,175,0.2); background-color: rgba(255,255,255,1); transition: all ease-out 0.3s; }
header .container{ width: 95%; max-width: 1900px; height: 100%; display: flex; justify-content:space-between; align-items: center; }
header #btn-menu-toggle{ display: none; }
header .logo{ display: block; position: relative; z-index: 1001;}
header .logo img{ width: 380px; transition: all ease-out 0.3s;}
nav{ display: flex; justify-content: flex-end; align-items: center; z-index: 1000; position: relative; height: 100%; transition: all ease-in-out 0.3s;}
nav .menu{ display: flex; height: 100%;}
nav .menu li{ position: relative; }
nav .menu li::after{ content: ''; width: 100%; height: 0; background-color: #17a9af; bottom: 0; left: 0; position: absolute; transition: all ease-out 0.3s; }
nav .menu li.actived::after,
nav .menu li:hover::after { height: 6px; transition: all ease-out 0.3s;}
nav .menu li + li{ margin-left: 20px;}
nav .menu li a{ color: #1f569e; text-shadow: 0 0 5px rgba(255,255,255,0.5); display: flex; justify-content: center; align-items: center; font-size:20px; font-weight: 700; letter-spacing: 1px; transition: color ease-out 0.3s; user-select: none; height: 100%; }
nav .menu li a:hover{ color: #17a9af; transition: color ease-out 0.3s;}

.page-index nav .menu li:first-child{ display: none; }


main{ width: 100%; max-width: 1920px; margin: 0 auto; background-color: #fff; padding-top: 100px; position: relative; transition: padding-top ease-out 0.3s; overflow: hidden;}
main .section{ scroll-margin-top: 50px; position: relative; }


.btn-popup{ color: #fff; background-color: #8b8b8b; border: #8b8b8b solid 1px; display: flex; font-size: 16px; letter-spacing: 1px; line-height: 1; justify-content: center; align-items: center; width: 180px; height: 40px; margin: 0 auto 30px; cursor: pointer; transition: all ease-out 0.3s;}
.btn-popup:hover{ border: #fff solid 1px; transition: all ease-out 0.3s;}
.btn-popup i{ width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #fff; margin-left: 7px;}


.rule-content { background:#032153; color: #fff; }
.rule-content .title { margin: 30px auto 10px; position: relative;}
.rule-content .title img{ width: 65%; max-width: 320px; margin: 0 auto; position: relative; z-index: 2;}
.rule-content .title::before { content: ''; width: 100%; height: 2px; background-color: #25a0af; margin-top: -1px; position: absolute; top: 50%; left: 0; z-index: 1;}
/* --- 第一層：一、二、三 --- */
.rule-content .section-title { font-size: 18px; font-weight: bold; color: #25a0af; margin-top: 15px; margin-bottom: 5px; }
.rule-content .content-box { font-size: 16px; font-weight: normal; padding-left: 5px; margin-bottom: 15px;}
.rule-content .content-box:last-child { margin-bottom: 30px;}
/* --- 獎項清單專用 --- */
.rule-content .award-item { margin-bottom: 10px; padding: 10px; }
.rule-content .award-item strong { color: #fff; }
/* --- 第二層：A. B. C. --- */
.rule-content ol { padding-left: 20px; margin: 0; }
.rule-content ol.alpha-list { list-style-type: upper-alpha; }
.rule-content ol.alpha-list > li {  }
.rule-content ol.alpha-list > li > span {	}
/* --- 第三層：圓點項目 --- */
.rule-content ul.dot-list { list-style-type: disc; padding-left: 20px; }
.rule-content ul.dot-list li {  }
.rule-content ul.dot-circle { list-style-type: circle; padding-left: 20px;}
.rule-content ul.dot-circle li {   }
.rule-content .highlight { color: #00a19b; font-weight: bold;}
.rule-content a { color: #fff; text-decoration: underline;}

#cboxLoadedContent { overflow: hidden !important; }
.scroll-wrapper > .scroll-content {
    box-sizing: border-box !important;
    -ms-overflow-style: none;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    padding-right: 18px;
    scrollbar-width: none;
}
.scroll-wrapper > .scroll-content::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.scrollbar-outer > .scroll-element.scroll-x {
    display: none !important;
}


.scrolling header{ height: 50px; backdrop-filter: blur(5px); background-color: rgba(255,255,255,0.75); transition: all ease-out 0.3s;}
.scrolling header .logo img{ width: 210px; transition: all ease-out 0.3s;}
.scrolling main{ padding-top: 50px; transition: padding-top ease 0.3s;}




footer { background-color: white;}
footer .copyright{ color: #17a9af; padding: 15px 0; font-size: 12px; font-family: Arial, "sans-serif"; text-align: center;}


#btn-gotop { display:none; position:fixed; right: 10px; bottom:20px; width:50px; height:50px; z-index:998; background-color: rgba(16,52,112,1); background-image: url(../img/gotop.png); background-position: 50% 50%; background-repeat: no-repeat; background-size:100% auto; border-radius:100%; cursor:pointer; transition: background-color ease-out 0.3s;}
#btn-gotop:hover { background-color: rgba(16,52,112,0.75); transition: background-color ease-out 0.3s;}



/*	RESPONSIVE:  */
@media only screen and (max-width: 1280px) {

header .logo img{ width: 210px; }
nav .menu li a{ font-size: 18px; }
	
}

/*	RESPONSIVE:  */
@media only screen and (max-width: 1000px) {

header{ height: 50px; border-bottom: #f6f6f6 solid 1px; }
header #btn-menu-toggle{ background-image: url(../img/btn-menu-toggle.png); background-position: 50% 50%; background-repeat: no-repeat; background-size: 50px auto; display: block; width:40px; height:40px; top:5px; right: 10px; position:fixed; z-index: 1001; cursor:pointer; }
header #btn-menu-toggle.active { background-image:url(../img/btn-menu-toggle_actived.png); background-size:50px auto; }
	
nav{ position:fixed; z-index:1000; top: 50px; width: 360px; height: calc(100vh - 50px); right: -360px; padding: 0; overflow-y: auto; overflow-x: hidden; background-color: #1f569e; transition:all ease-in-out 0.4s; display: block; }
nav .menu{ display: block; padding: 30px 0 20px; margin: 0 auto 20px; height: auto;}
nav .menu li{ display: block; width:90%; max-width:350px; height: auto; text-align:center; }
nav .menu li,
nav .menu li + li{ margin: 0 auto 15px;}
nav .menu li a{ color: #FFF; text-shadow: none; display: block; font-size:22px; line-height:40px; height: auto;  }
nav .menu li::after{ display: none;}	

.has-active-menu{ overflow: hidden;}
.has-active-menu nav{ right: 0; transition:all ease-in-out 0.4s;}
.has-active-menu main::after{ content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(16,52,112,0.75); backdrop-filter: blur(5px); position: absolute; transition: all ease-out 0.3s;  }
	
main{ padding-top: 50px; transition: padding-top ease-out 0.3s;}	
main .section{ scroll-margin-top: 50px; }	
	
}



/*	RESPONSIVE:  */
@media only screen and (max-width:767px) {

body{ font-size: 16px;} 
	
nav{ width:100%; right: -100%;}
.has-active-menu main::after{ display: none;}
	
#btn-gotop { bottom:20px; right: 5px; width:40px; height:40px;}
	
}