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

body{ font-family:'Noto Sans TC', '微軟正黑體', sans-serif; background-color: #0064b4 }
.nav-collapse ul { margin: 0;padding: 0;width: 100%;display: block;list-style: none;}
.nav-collapse li {width: 100%;display: block;}
.js .nav-collapse {clip: rect(0 0 0 0);max-height: 0;position: absolute;display: block;overflow: hidden;zoom: 1;}
.nav-collapse.opened { max-height: 9999px; width: 100%; flex: 1;}
.disable-pointer-events {pointer-events: none !important;}
.nav-toggle {-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;  -o-user-select: none; user-select: none;}
small.des-words{ color: #666; display: block; margin-top: 10px}
@media (min-width: 996px) {
  .js .nav-collapse { position: relative;}
  .js .nav-collapse.closed { max-height: none; }
  header .awards-menu-container .nav-toggle { display: none;}
}
/* ------------------------------------------
  FIXED HEADER
--------------------------------------------- */

header {  position: fixed; z-index: 3; left: 0; top: 0; width: 100%;}
#awards-menu{ background-color: #FFF; z-index: 5; box-shadow: -1px 7px 6px -6px rgba(0, 0, 0, 0.15);}
header .awards-menu-container{ max-width: 1350px; margin: auto; }

header .awards-menu-container .nav-toggle{ position: absolute; right: 0px; top: 5px}
header .awards-menu-container nav{ flex: 1; width: 100%}
section {text-align: center;  width: 100%; overflow: hidden;}
.logo { -webkit-tap-highlight-color: rgba(0,0,0,0); text-decoration: none; font-weight: bold; line-height: 55px;  padding:10px 0px; color: #fff; float: left;}

#awards-menu .logo-container{ display: flex; position: relative}
/*.event-logo img{min-height: 40px; width: auto; margin: 15px 30px 15px 15px}*/
#awards-menu .logo-container div a{ margin: 0px 5px 0px 10px; display: flex; flex-direction: column; justify-content: center; height: 100%}
#awards-menu .logo-container div:nth-child(2) a{margin: 0px 10px 0px 10px;}
#awards-menu .logo-container div:first-child a{ margin: 0px 15px 0px 10px}
.event-logo img{ position: relative; width: 100px; padding: 10px 0px}
.hket-logo img, .imoney-logo img{ display: block; width: auto ; height: 28px;  }
.hket-logo span, .imoney-logo span{ font-size: 12px; color: #999;  display: block; margin-bottom: 5px; position: relative; top: -5px}
.event-logo{ position: relative}
.event-logo:after{ content: ""; position: absolute; border-right:1px solid #ccc; height:60%; top: 18px; right: 0px}
@media (min-width: 996px){
	.hket-logo img, .imoney-logo img{  height: 40px;  }
	.event-logo img{height: 70px; width: auto; padding: 20px 0px}
#awards-menu .logo-container div:nth-child(2) a{margin: 0px 10px 0px 20px;}
#awards-menu .logo-container div:first-child a{ margin: 0px 30px 0px 10px}
	#awards-menu .logo-container div a{ margin: 0px 10px 0px 15px;}
	header .awards-menu-container{ display: flex}
	header  .awards-menu-container .logo{ flex:0; }
}
section h3 small{ display: block; font-size: 14px; margin-top: 5px; position: absolute; bottom: -20px; color: #999}
.skeleton {
  position: relative;
  background: #eee;
  overflow: hidden;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #eee, #f6f6f6, #eee);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* ------------------------------------------
  NAVIGATION STYLES
--------------------------------------------- */

.fixed { position: fixed;  width: 100%; left: 0;top: 0;}
.nav-collapse,
.nav-collapse * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;}
.js .nav-collapse-0.opened{ max-height: none}
.nav-collapse, .nav-collapse ul { list-style: none; width: 100%;}

.nav-collapse li { width: 100%;}
.nav-collapse a {-webkit-tap-highlight-color: rgba(0,0,0,0); text-decoration: none; color:#666; width: 100%; padding:15px 15px; text-align: center; line-height: 20px}
.nav-collapse a:active, .nav-collapse .active a { color: #00578e;text-decoration: underline; text-underline-offset: 3px;}
.nav-collapse a:hover{ color: #00578e}
.nav-collapse a:active{text-decoration: none;}
.nav-collapse ul ul a { background: #ca3716; padding-left: 2em;}
.nav-collapse .menu-item.apply{ background: #c91626; }
.nav-collapse .menu-item.apply:hover{ background:#a80c1f}
.nav-collapse .menu-item.apply a{color: #FFF }
@media (min-width: 996px)  {
	 .nav-collapse ul ul a { display: none; }
  .nav-collapse li { width: auto;}
  .nav-collapse a {  text-align: center; border-top: 0;float: left; margin: 0; padding: 6px 20px}
  .nav-collapse ul{ display: flex; justify-content: flex-end; height: 100%; align-items: center; padding-right: 10px;}
.nav-collapse .menu-item.apply{  border-radius: 50px}
	
}
nav { float: right}
nav ul { list-style: none;margin: 0;padding: 0}
nav ul li.reg a{background-color: rgb(250, 190, 0);
    color: rgb(0, 100, 180);
    max-width: 200px;
    border-radius: 30px;
    padding: 5px 30px;
    margin:15px auto 0px}
nav ul li.sub a{  max-width: 200px; margin: auto;}
nav ul li.sub a:hover{ opacity: .6; }
nav ul li.sub ul{box-shadow: inset 0px 2px 11px 0px rgba(0,0,0,0.1);}
nav ul li.sub.active a{ text-decoration: none;text-decoration: underline; text-underline-offset:3px; }

nav ul li.sub.active ul li a.active{ text-decoration: underline; text-underline-offset:3px; color:#00578e }
nav ul li {float: left;position: relative}
nav ul li.active a{ text-decoration: underline; text-underline-offset:3px; color:#00578e}
nav ul li.active a.disable{ cursor:default}
nav ul li a{color: #666}
nav ul li a, nav ul li a:visited { display: block;padding: 0 15px; text-decoration: none; text-align: center}

nav ul li a:hover, nav ul li.sub a:hover{ opacity: .7}
nav ul li a:hover, nav ul li.single a:hover{ color: #00578e}
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {padding-left: 4px; content: ' ▾'}
nav ul li ul{ padding-top: 15px}
nav ul li ul li { min-width: 170px; }
nav ul li ul li a { padding: 15px;line-height: 20px}
.nav-dropdown { position: absolute;display: none; z-index: 1; background: #FFF; top: 40px /*box-shadow: 0 3px 30px rgba(0,0,0,.2);*/} 
nav ul li ul li a{ padding:0px 15px 15px 15px}
.nav-mobile { display: none; position: absolute;top: 0; right: 0;  height: 70px; width: 70px}
nav a:active, .nav-collapse .active a{ text-decoration: underline; text-underline-offset:3px}
@media only screen and (max-width:1024px) {
	.nav-mobile {display: block}
	nav { width: 100%;}
	nav ul {display: none; box-shadow: 0px 22px 44px -19px rgba(0,0,0,0.5)}
	nav ul li { float: none}
	nav ul li a { padding: 15px; line-height: 20px; text-align: center}
	nav ul li ul li a { padding-left: 30px}
	.nav-dropdown { position: static}


}

@media screen and (min-width:1025px) {
	.nav-list { display: flex!important; height: 100%; align-items: center; justify-content: flex-end}
	nav ul li.menu-item.apply{border-radius:15px }
		nav ul li.reg a{ margin:0px auto}
		nav ul li.sub ul{ box-shadow: 0px 8px 15px 2px rgba(0,0,0,0.1); }
}
#nav-toggle { position: absolute; left: 18px; top: 22px; cursor: pointer;padding: 10px 35px 16px 0}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {cursor: pointer; border-radius: 1px; height: 1px; width: 35px; background: #999;position: absolute; display: block;content: '';transition: all 300ms ease-in-out}
#nav-toggle span:before { top: -10px}
#nav-toggle span:after { bottom: -10px}
#nav-toggle.active span {background-color: transparent}
#nav-toggle.active span:before, #nav-toggle.active span:after {top: 0}
#nav-toggle.active span:before {transform: rotate(45deg)}
#nav-toggle.active span:after {transform: rotate(-45deg)}

.nav-collapse .menu-item.lang a span{ border: 2px solid #999; border-radius: 8px; display: block; font-size: 13px; width: 25px; height: 25px; color: #666; margin: auto}
.nav-collapse .menu-item.lang a span:hover{ border-color: rgba(148,47,0,1.00); color: rgba(148,47,0,1.00)}

nav ul li.menu-item.lang a span{ border: 2px solid #999; border-radius: 8px;  font-size: 13px; width: 22px; height: 22px; color: #666; margin: auto; text-align: center; display: block}
nav ul li.menu-item.lang a span:hover{ border-color: #00578e; color: #00578e}
/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------- */
.nav-toggle {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
  text-indent: -300px;
  position: relative;
  overflow: hidden;
  width: 60px;
  height: 55px;
  float: right;
}

.nav-toggle:before {
  color: #fff; /* Edit this to change the icon color */
  text-transform: none;
  text-align: center;
  position: absolute;
  content:  url("data:image/svg+xml,%0A%3Csvg width='39px' height='39px' viewBox='0 0 39 39' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group-48' transform='translate(0.000000, 0.500000)'%3E%3Cline x1='7.23472779' y1='7.97472779' x2='31.2347278' y2='7.97472779' id='Path-6' stroke='%23979797'%3E%3C/line%3E%3Cline x1='7.23472779' y1='19.4847278' x2='31.2347278' y2='19.4847278' id='Path-6-Copy' stroke='%23979797'%3E%3C/line%3E%3Cline x1='7.23472779' y1='30.9947278' x2='31.2347278' y2='30.9947278' id='Path-6-Copy-2' stroke='%23979797'%3E%3C/line%3E%3Crect id='Rectangle-Copy-28' x='0' y='0' width='38.4694556' height='38.4694556'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  text-indent: 0;
  speak: none;
  width: 100%;
  left: 0;
  top: 8px;
}
.nav-toggle.active:before {
  content: url("data:image/svg+xml,%0A%3Csvg width='39px' height='39px' viewBox='0 0 39 39' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group-48'%3E%3Cg id='Group-47' transform='translate(7.234728, 7.234728)' stroke='%237B7373'%3E%3Cline x1='0' y1='0' x2='24' y2='24' id='Path-8'%3E%3C/line%3E%3Cline x1='24' y1='0' x2='4.16333634e-16' y2='24' id='Path-12'%3E%3C/line%3E%3C/g%3E%3Crect id='Rectangle' x='0' y='0' width='38.4694556' height='38.4694556'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.bringtotop{ position: fixed; right: 20px; color: #333; z-index: 20; bottom: 20px; display: none}
.bringtotop a.black{ background: rgba(0,0,0,.1); border: 1px solid rgba(0,0,0,.1)}
.bringtotop a{ width: 40px; height: 40px; background: rgb(179 169 169 / 40%); border-radius: 50%; text-align: center; display: flex; align-items: center; justify-content: center}
.bringtotop a span{ font-size: min(max(24px, 3vw), 35px); color: #FFF; }
section#awards-cover .awards-video{position: relative; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden;margin-top: 73px;}
section#awards-cover .awards-video video{width: 100%; height: 100%; object-fit: cover; display: block;}
#awards-cover-main{position: relative; top: 0; left: 0;overflow: hidden; aspect-ratio: 9 / 4; padding: 0px;  }
#awards-cover-main .awards-content{ height: 100%;}
#awards-cover-main .awards-content div{ height: 100%}
#awards-cover-main .awards-content-container .wrapper{display: flex;justify-content: center; aspect-ratio: 85 / 84; margin: auto; width: 100%}

#awards-cover-main .awards-content-container{ padding: 0px}
/*#awards-cover-main .awards-content-container .wrapper img{ width: 45%}*/
#awards-cover-main .award-logo-bg{background-image: url("../images/cover-bg.jpg"); width: 100%; height: 100%; position: absolute; top: 0px;background-size: cover; background-position-y:-30px; z-index: -1}
@media (min-width: 996px) {
	#awards-cover-main .award-logo-bg{background-position-y:-100px}
	section#awards-cover .awards-video{margin-top: 110px;}
}

section .awards-content{ max-width: 1350px; margin: auto; position: relative}
section .awards-content-container{ padding: 40px 20px 80px 20px; position: relative; z-index: 3}
section .awards-content-container .border-box{ border-style: solid; border-width: 4px; padding: 16px 20px; text-align: center; border-color: #b3b3b3; border-radius: 30px; }
section .awards-content-container .border-box.style2{ border-image:linear-gradient(142deg, rgba(242,209,164,1) 8%, rgba(248,245,194,1) 60%)1}
section .awards-content-container .border-box p{   font-size: min(max(18px, 3vw), 22px); font-weight: 300; color: #FFF; text-align: center; letter-spacing: 2px}
section .awards-content-container .border-box p.en{  font-size: min(max(16px, 3vw), 20px); letter-spacing: normal }



section .awards-content-container .border-box.max-width768{ max-width: 768px; margin: auto}
section .awards-content-container .border-box.max-width768 ~ h3{ margin-top: 2.5em}
section .awards-content-container p{ color: #e0fbff; margin: 5px 0px 5px}
section .awards-content-container p a{ color: #FFF; text-decoration: underline}
section .awards-content-container p a:hover{ text-decoration: none }
#awards-footer.white{ background-color: #FFF}

#awards-footer p, #awards-footer span, #awards-footer a{  color: #FFF; }
#awards-footer p b{ display: block; font-weight: normal; font-size: 18px}
.awards-content .awards-footer-container{ margin: 0px 20px; min-height: 200px; display: flex; flex-wrap: wrap; align-content: center; align-items: center}
.awards-content .awards-footer-container p{ font-size: 12px; margin-top: 20px; color: #666; width: 100% }
.awards-content .awards-footer-container p strong{ display: block}
.awards-content .awards-footer-container .copyright{ display: flex; align-items: center;font-size: 12px; padding: 30px 0px; color: #666; flex-direction: column; line-height: 20px; width: 100%}
.awards-content .awards-footer-container .copyright span { display: flex; margin: 0px 20px}
.awards-content .awards-footer-container .copyright span a{  text-decoration: underline; margin: 0px 10px; position: relative; color: #666}
.awards-content .awards-footer-container .copyright span a:hover{ color: #000}
.awards-content .awards-footer-container .copyright span a:after{ content: ""; border-left: 1px solid #666; position: absolute; height: 10px; right: -10px; top: 5px}
.awards-content .awards-footer-container .copyright span a:last-child:after{ content: none}

@media (min-width: 996px) {
.awards-content .awards-footer-container p{ font-size: 14px;}
.awards-content .awards-footer-container .copyright{font-size: 14px;}
.awards-content .awards-footer-container .copyright{  flex-direction: row; justify-content: center}	
.bringtotop a{ width: 55px; height: 55px;}
}


.awards-purpose{ max-width: 840px; margin: auto}
.awards-purpose ul{ display: flex;  margin: auto; flex-direction: column; }
.awards-purpose ul li{ flex:1; border-bottom: 1px solid #00a7d8;  padding:10px 0px; font-size: min(max(18px, 3vw), 20px); font-weight: 300 }
.awards-purpose ul.en li{ font-size: min(max(15px, 3vw), 16px);}
.awards-purpose ul li:last-child{ border: none}
@media (min-width: 996px) {
	.awards-purpose ul{ flex-direction: row; text-align: center; }
	.awards-purpose ul li{ border-bottom: none;  border-right: 2px solid #00a7d8; padding:0px 40px; }
	.awards-purpose ul.en li{ padding:0px 15px; }
}


.awards-content .awards-schedule-content ul{ display: flex; position: relative; flex-direction: column; align-items: center}
.awards-content .awards-schedule-content ul li{ display: flex; margin-bottom: 35px; align-items: center; flex-wrap: nowrap; width:290px;}

.awards-content .awards-schedule-content ul li .circle{ border-radius:50%;  width: 100px; height: 100px; position: relative; z-index: 1; text-align: center; padding: 5px; letter-spacing: -2px; min-width: 100px; }
.awards-content .awards-schedule-content ul li .circle:before{  content: ""; height: 25px; position: absolute; border-left: 4px solid #00578e; top: -15px; z-index: -1; left: 48%}
.awards-content .awards-schedule-content ul li:first-child .circle:before{content:none}
.awards-content .awards-schedule-content ul li strong{  font-size: min(max(22px, 3vw), 34px); font-weight: 100; font-family:'Noto Sans TC', '微軟正黑體', sans-serif;  width: 100%; height: 100%; color: #FFEEBA;  display: flex; align-items: center; justify-content: center}
.awards-content .awards-schedule-content ul li p{  font-size: min(max(16px, 3vw), 20px); padding-left: 15px; text-align: left; color: #0064b4}
.awards-content .awards-schedule-content ul li p.en{font-size: min(max(14px, 3vw), 18px); flex: 1 0}
.awards-content .awards-schedule-content ul li span{ display: block; color: #666464}
.awards-content .awards-schedule-content{ max-width: 840px; margin:20px auto}
@media (min-width: 996px) {
.awards-content .awards-schedule-content ul li p{ padding: 0px; text-align: center; margin-top: 30px}
.awards-content .awards-schedule-content ul li{ display: block; flex: 1 0 25%; min-width: inherit}
.awards-content .awards-schedule-content ul{  flex-direction: row; justify-content: space-between;align-items: flex-start }
.awards-content .awards-schedule-content ul li .circle{ width: 140px; height: 140px; margin: auto}
.awards-content .awards-schedule-content ul:after{ position: absolute; width: 90%; border: 3px solid #00578e; content: "";  z-index: 0; transform: translate(-50%, -35%); top: 30%; left: 50%}
	.awards-content .awards-schedule-content.en ul:after{top: 26%;}
.awards-content .awards-schedule-content{  margin:50px auto 20px}
	.awards-content .awards-schedule-content ul li .circle:before{ content: none}

}


.awards-content .awards-category-container ul{ display: flex; flex-wrap: wrap; margin-top: 30px; justify-content: center}
.awards-content .awards-category-container ul li{width: calc(100% / 2); margin-bottom: 30px; display: block}
.awards-content .awards-category-container ul li span{ display: flex; margin:auto 18%; border-radius: 50%; aspect-ratio: 1 / 1; justify-content: center;}
@supports not (aspect-ratio: 1 / 1) {
.awards-content .awards-category-container ul li span::before { float: left; padding-top: 100%; content: "";}
.awards-content .awards-category-container ul li span::after {display: block;content: ""; clear: both;}
}
.awards-content .awards-category-container ul li span img{ width: auto; height: 100%; display: block; margin: auto; max-width: 90%; max-height: 90%;}
.awards-content .awards-category-container ul li p{ margin-top: 10px; font-size: min(max(16px, 3vw), 20px)}
.awards-content .awards-content-container .width-996 p{ text-align: center; font-size: min(max(16px, 3vw), 20px); line-height:1.5}
.awards-content .awards-content-container .width-996 p.en{font-size: min(max(14px, 3vw), 18px); font-weight: 300}
.awards-content .awards-content-container .width-996 p a{ display: inline}
.awards-content .awards-content-container .bu-yellow{ background-color: #fabe00; color: #0064b4;font-size: min(max(20px, 3vw), 30px); padding: 8px; max-width: 250px; text-align: center; margin:10px auto; border-radius:100px}
.awards-content .awards-content-container .bu-yellow:hover{ opacity: .7}
.awards-content .awards-content-container .awards-apply{ margin-top: 50px}
@media (min-width: 768px) {
.awards-content .awards-category-container ul li{  width: calc(100% / 4); margin-bottom: 60px}
.awards-content .awards-category-container ul{ margin-top: 50px}
}
@media (min-width: 996px) {
.awards-content .awards-content-container .width-996{ max-width: 820px; margin: auto; }
.awards-content .awards-category-container ul li{  width: calc(100% / 6); }
.awards-content .awards-category-container ul li span img{ max-width: 100%; max-height:100%}
}
.awards-content .awards-judge-container ul.en b{font-size: min(max(12px, 3vw), 13px); line-height: 1.2; display: flex; align-items: center}



.awards-content .awards-judge-container ul { display: flex; flex-wrap: wrap}
.awards-content .awards-judge-container ul li{  width: calc(100% / 2); display:block; }
/*.awards-content .awards-judge-container ul li img { display: flex; width: 100%; border: 8px solid #FFF; margin-bottom: 10px; box-sizing: border-box; border-radius: 50%; outline: 5px solid #0088ac;}*/
.awards-content .awards-judge-container ul li .judges-pic img { display: flex; width: 100%; margin-bottom: 10px; box-sizing: border-box; border-radius: 50%; box-shadow: 0 0 0 8px hsl(0, 0%, 100%), 0 0 0 12px hsl(207, 100%, 35%)}
.awards-content .awards-judge-container ul li .judges-pic{ margin: 12px}
.awards-content .awards-judge-container ul li .wrapper{ margin: 5%}
.awards-content .awards-judge-container ul li span{ display: block; color: #3e4d56; font-size: 13.3px;color: #666666; margin-top: 5px}
.awards-content .awards-judge-container ul li small{ display: block; color: #3e4d56; position: relative; margin: 6px 0px 3px; color: #666666; line-height: 1.3}
@media (min-width: 768px) {
    .awards-content .awards-judge-container ul li{  width:calc(100% / 3) }
    .awards-content .awards-judge-container ul li .wrapper{ margin: 8% 15%}
}
@media (min-width: 1024px) {
    .awards-content .awards-judge-container ul li{  width:calc(100% / 3) }
}

.awards-content h3{ color:#e0fbff;  ; font-family:'Noto Sans TC', '微軟正黑體', sans-serif; font-weight: normal; font-size: min(max(26px, 3vw), 38px); font-weight: 400;  display: flex; justify-content: center; flex-wrap: wrap; margin: 5px 0 1.5em}
.awards-content h3.en{font-size: min(max(22px, 3vw), 30px); letter-spacing: -0.5px }
.awards-content h3 span{ background-repeat: no-repeat; background-size: contain}
.awards-content h3 span.h3-left{ background-image: url("../images/title-left.png"); display: block; width:50px ;background-position: right; margin-right: 7px}
.awards-content h3 span.h3-right{ background-image: url("../images/title-right.png"); display: block; width:50px; margin-left: 7px}
.awards-content h3.grey{ color: #666}
#awards-intro .awards-background, #awards-activities .awards-background{ background-size: contain; background-color: #0064b4}
#awards-schedule .awards-background{ background-color: #0064b4}
#awards-category .awards-background, #awards-contactus .awards-background{ background-size: contain; background-color: #0064b4}
#awards-judges .awards-background{ background-color: #0064b4}
#awards-logo .awards-background{ background-color: #0064b4}
#awards-logo h5{ color: #0064b4; white-space: nowrap}
#awards-footer .awards-background{ background-color: #0064b4}
#awards-winner .awards-background{ background-color: #0064b4}
#awards-schedule .awards-content-container, #awards-logo .awards-content-container, #awards-judges .awards-content-container{ background-color: #FFF; border-radius: 20px; margin: 0px 15px; padding: 2em}
#awards-schedule .awards-content-container h3, #awards-judges .awards-content-container h3{ color: #0064b4}
.awards-content .awards-judge-container ul li .title-bg{  margin: 25px auto 0px; position: relative; transform: skew(15deg); background-color: #0064b4; width: 80%; position: relative}
.awards-content .awards-judge-container ul li .title-bg:before{ content: ""; background-image: url('data:image/svg+xml,<svg width="113.95px" height="12.94px" viewBox="0 0 113.95 12.94" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="35.143133%" y1="48.0693945%" x2="67.245283%" y2="52.4589543%" id="linearGradient-lit_zvc3qp-1"><stop stop-color="%23FABE00" offset="0%"></stop><stop stop-color="%23FAC009" stop-opacity="0.96" offset="5%"></stop><stop stop-color="%23FAC724" stop-opacity="0.86" offset="15%"></stop><stop stop-color="%23FBD250" stop-opacity="0.68" offset="27%"></stop><stop stop-color="%23FCE28D" stop-opacity="0.44" offset="41%"></stop><stop stop-color="%23FEF5DA" stop-opacity="0.14" offset="57%"></stop><stop stop-color="%23FFFFFF" stop-opacity="0" offset="64%"></stop></linearGradient></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="title-y-bar" fill="url(%23linearGradient-lit_zvc3qp-1)" fill-rule="nonzero"><polygon id="Path" points="113.95 12.94 104.72 0.41 0 0 7.54 12.29"></polygon></g></g></svg>'); position: absolute; height: 20px; width: 100px; background-repeat: no-repeat;  transform: skew(-15deg);left: -20px; top: -7px}
.awards-content .awards-judge-container ul li .title-bg b{  color: #FFF; padding: 5px 0px; font-weight: normal;  transform: skew(-15deg); display: block; text-shadow: 1px 1px 1px rgba(0,0,0,0.5) }
.awards-content .awards-judge-container ul li .title-bg i{ flex: 0; min-width: 40px; position: relative}
@media (min-width: 768px){
	#awards-logo .awards-logo-container{ width: 95%; margin: auto}
}




.awards-content .awards-logo-container ul { display: flex; justify-content: center;  padding: 20px 0px; }
.awards-content .awards-logo-container ul img{ display: block; height: auto;  max-width:60%; margin:0px auto}

.awards-content .awards-logo-container ul.no-bg{ flex-wrap:nowrap}	
.awards-content .awards-logo-container ul.no-bg h5{ margin: 0px 0px 25px}
.awards-content .awards-logo-container ul.no-bg li{ margin:0px 12%; flex:1 0; max-width: 18%; min-width: 120px}
.awards-content .awards-logo-container ul.no-bg li img{ height: 100%; width: auto; max-width: 75%}
.awards-content .awards-logo-container ul.white-bg{  width: 100%; flex-wrap: wrap;  justify-content: flex-start; background-color: #FFF}
    .awards-content .awards-logo-container ul.white-bg li{ width: calc(100% / 2); margin-bottom: 25px}
    @media (min-width: 768px){
        .awards-content .awards-logo-container ul.white-bg li{ width: calc(100% / 4); display: flex; justify-content: center; margin-bottom: 28px}
  
    }
    @media (min-width: 1280px){
		.awards-content .awards-logo-container ul img{max-width:60%;}
        .awards-content .awards-logo-container ul.white-bg li{ width: calc(100% / 4); display: flex; justify-content: center}
		.awards-content .awards-logo-container ul.white-bg{ justify-content: left}
  
    }



#awards-form{ padding-top: 110px; overflow: hidden; min-height: 400px; background-color: #0064b4}
#awards-form .form-bg1, #awards-form .form-bg2, #awards-form .form-bg3{ position: absolute}
#awards-form .form-bg1 img, #awards-form .form-bg2 img, #awards-form .form-bg3 img{ display: block; width: 100%; height: auto}
#awards-form .form-bg1{ top: -200px; left: -100px}
#awards-form .form-bg2{ top: -350px; right: -150px}
#awards-form .form-bg3{ bottom: -50px; left: -750px;}
@media (min-width: 768px){
#awards-form .form-bg1{ top: -200px}
#awards-form .form-bg2{ top: -200px; right: -100px}
#awards-form .form-bg3{ bottom: -50px; left: -600px}
}
.awards-content h5{ font-size: min(max(18px, 3vw), 24px); color: #fabe00; margin-bottom: 0px; font-weight: 400}
.awards-form-widget{ display: flex; flex-direction: column; margin-bottom: 10px; }
.awards-form-widget label{ width: 30%; display: block; text-align: left; color: #e0fbff; font-size: 14px; margin: 6px 20px 5px 5px; font-family: Microsoft Yahei,"微軟正黑體",Microsoft JhengHei,Helvetica Neue,Verdana,Arial,LiHei Pro Medium,Helvetica,sans-serif}
.awards-form-widget input{ border: 1px solid rgba(255,255,255,.5); background-color: transparent; outline: none; font-size: 18px; padding: 8px 10px; -webkit-appearance: none; color: #FFF}
.awards-form-widget input:focus{ background-color: rgba(0,0,0,.2)}
.awards-form-widget .error{ display: block; font-size: 13px; text-align: left; padding: 5px 0px 5px 0px; color:#ffffbb; text-indent: 5px; position: relative; min-width: 200px; border-radius: 15px; font-weight: 500 }
/*.awards-form-widget .error:before{ content: ""; width: 0;height: 0;border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent rgba(173,0,2,1.00) transparent; position: absolute; top: -9px; left:0px}*/
.awards-form-widget ul li{ text-align: left; font-size: 13px; color: #666}
.awards-form-container{ max-width: 996px; margin: auto; z-index: 1 }

.awards-type{ margin: 20px auto -10px auto; position: relative; width: 70%}
.awards-type .error{ display: block; width: 100%; font-size: 13px; text-align: left; padding: 5px 0px 5px 0px; color:#ffffbb; text-indent: 10px; position:absolute; font-weight: 500; bottom: -10px}
/*.awards-type .error:before{ content: ""; width: 0;height: 0;border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent rgba(173,0,2,1.00) transparent; position: absolute; top: -9px; left:0px}*/
.awards-type-container{ display: flex; flex-wrap: wrap}
.awards-type-container div{ width: 50%; text-align: left}

.awards-type-form-widget label{ color: #d2ffff}
.awards-type-form-widget .container {display: block;position: relative;padding-left: 30px;cursor: pointer; font-size: 16px; margin-bottom: 25px; width: auto; white-space: nowrap}
/* Hide the default checkbox */
.awards-type-form-widget .container input { visibility: hidden;cursor: pointer;}
/* Create a custom checkbox */
.awards-type-form-widget .mark {position: absolute;top: 0;left: 0;height: 20px; width: 20px;background-color: none; border: 1px solid #d2ffff}
.awards-type-form-widget .container:hover input ~ .mark {background-color: none;}
.awards-type-form-widget .container input:checked ~ .mark { background-color: #00578e;}
/* Create the mark/indicator (hidden when not checked) */
.awards-type-form-widget .mark:after {content: "";position: absolute;display: none;}
/* Show the mark when checked */
.awards-type-form-widget .container input:checked ~ .mark:after {display: block;}
/* Style the mark/indicator */
.awards-type-form-widget .container .mark:after {left: 6px; top: 2px;width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg);}

.awards-statement{ margin: 20px 0px}
.awards-statement .error{ display: block; width: 100%; font-size: 13px; text-align: left; padding: 5px 0px 5px 0px; color:#ffffbb; text-indent: 10px; position: relative; font-weight: 500}
/*.awards-statement .error:before{ content: ""; width: 0;height: 0;border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent rgba(173,0,2,1.00) transparent; position: absolute; top: -9px; left:0px}*/
.awards-statement-widget .container {display: block;position: relative;padding-left: 30px;cursor: pointer; font-size: 16px; margin-bottom: 10px; text-align: left; width: auto; color: #e0fbff; font-weight: 300}
/* Hide the default checkbox */
.awards-statement-widget input { visibility: hidden; cursor: pointer; position: absolute}
/* Create a custom checkbox */
.awards-statement-widget .mark {position: absolute;top: 0;left: 0;height: 15px; width: 15px;background-color: none; border: 1px solid #d2ffff}
.awards-statement-widget .container:hover input ~ .mark {background-color: none;}
.awards-statement-widget .container input:checked ~ .mark { background-color: #00578e;}
/* Create the mark/indicator (hidden when not checked) */
.awards-statement-widget .mark:after {content: "";position: absolute;display: none;}
/* Show the mark when checked */
.awards-statement-widget .container input:checked ~ .mark:after {display: block;}
/* Style the mark/indicator */
.awards-statement-widget .container .mark:after {left: 5px; top: 0px;width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg);}
.awards-statement-widget .container a{ display: inline-block; text-decoration: underline; color: #d2ffff}
.awards-statement-widget .container a:hover{ color: #FFF}
.awards-statement{ text-align: left; color: #e0fbff}
.awards-statement span{ text-align: left; display: block; font-size: 16px; text-decoration: underline; margin-bottom: 10px; font-weight: 300}
.awards-statement strong{ font-size: 16px;font-weight: 300}
.awards-statement ul li{ list-style:disc; font-size: 16px; font-weight: 300}
.awards-statement ul{ margin-left: 15px}

.awards-form-submit { display: flex; justify-content: space-around; margin: 90px 0px 0px}
.awards-form-submit div{ width: 50%}
.awards-form-submit div a{ font-size: 20px; color: #595757; padding: 10px; margin: 0px 10px; max-width: 250px; width: 250px}
.awards-form-submit div a.solid{ background: #fabe00; border-radius: 25px;  color: #0064b4  }
.awards-form-submit div a.solid:hover{ filter: contrast(1.3);}
.awards-form-submit div a.border{  border-radius: 25px; border: 2px solid #FFD99B }
.awards-form-submit .awards-form-submit-container{  display: flex;  justify-content: center}
@media (min-width: 996px) {
	
	.awards-form-widget{  flex-direction: row; margin-bottom: 20px; flex-wrap: wrap; align-items: flex-end }
	.awards-form-widget label{ text-align: right; font-size: 16px;  flex: 0 123px}
	.awards-form-widget input{  width: 75%;  }
	.awards-form-widget ul{ display: flex}
	.awards-form-widget ul li:first-child{ width: 120px; margin: 6px 25px 5px 5px;}
	.awards-type-container div{ width: 25%}
	.awards-form-widget .error{ margin-left: 145px; }
}


.awards-content-form-successful .crossmark__circle {stroke-dasharray: 166;stroke-dashoffset: 166;stroke-width: 2;stroke-miterlimit: 10;stroke: #cc0000; fill: none;animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;}
.awards-content-form-successful .crossmark {width: 80px;height: 80px;border-radius: 50%;display: block;stroke-width: 2;stroke: #D9AA5E;stroke-miterlimit: 10;margin: 10% auto 20px;box-shadow: inset 0px 0px 0px #cc0000;animation: fillcross .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;}
.awards-content-form-successful .crossmark__check {transform-origin: 50% 50%;stroke-dasharray: 48;stroke-dashoffset: 48;animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;}
.awards-content-form-successful h3{ color: #fff; font-size: min(max(19px, 3vw), 28px)}

section .awards-content-form-successful p a{ display: inline; color: #fff}
.awards-content-form-successful-back a{ background: #fabe00; border-radius: 25px; font-size: 20px;  padding: 10px; margin: 30px auto; max-width: 250px;  display: block; color: #0064b4}
.awards-content-form-successful-back a:hover{filter: contrast(1.3);}
section .awards-content-form-successful p{ color: #fff}
.awards-content-form-successful .checkmark__circle {stroke-dasharray: 166;stroke-dashoffset: 166;stroke-width: 2;stroke-miterlimit: 10;stroke: #FFF;fill: none;animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;}
.awards-content-form-successful .checkmark {width: 80px;height: 80px;border-radius: 50%;display: block;stroke-width: 2;stroke: #0064b4;stroke-miterlimit: 10;margin: 0 auto 0px;box-shadow: inset 0px 0px 0px #333;animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;}
.awards-content-form-successful .checkmark__check {transform-origin: 50% 50%;stroke-dasharray: 48;stroke-dashoffset: 48;animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;}
@keyframes stroke {
    100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 90px #FFF;
  }
}
@keyframes fillcross {
  100% {
    box-shadow: inset 0px 0px 0px 90px #cc0000;
  }
}


@keyframes fadeInUp {
    from {
        transform: translate3d(0,50px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,50px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.animated {
    animation-duration: 2s;
    animation-fill-mode: both;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: both
}

.animatedFadeInUp {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}



.awards-content-container small.error{ color: red; font-size: 16px; display: block; width: 100%}

			.awards-content h6 {font-family: "Noto Sans TC", 微軟正黑體, sans-serif;
    font-size: min(max(23px, 3vw), 30px);
    font-weight: 400; margin: 10px; color: #eee}
			.awards-content h6.winner-title{ color: #00578e;
    font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;font-size: min(max(26px, 3vw), 38px);
    font-weight: 400;  margin-top: 100px}
			.awards-content h6.winner-title2 small{ display: block; font-size: 13px}
		.winner-group-widget h5{ color: #88591D; flex: 0; white-space: nowrap; margin: 0px 15px}
		.winner-group-widget .winner-group-container{ padding: 10px }
		.winner-group-widget .sub-titles{ display: flex; align-items: center}
		.winner-group-widget .sub-titles span{ display: block; height: 5px; background: #333; width: 100%; background-image: linear-gradient(90deg, #DCC085 0%, #E0B965 6%, #FFEE94 23%, #D7B15E 41%, #FEDD99 59%, #FFF5B6 77%, #FFF9BC 100%);}
		.winner-company-container{ display: flex; flex-wrap: wrap; margin-left:-15px; margin-right: -15px}
		.winner-company-items { width: 100%;  box-sizing: border-box; margin-bottom: 20px; display: flex}
		.winner-company-items .wrapper{ margin: 15px; display: flex; flex-direction: column; flex: 1}
		.winner-company-items .logo{ border-radius: 7px; background-color: #FFF; padding: 0px; overflow: hidden}
		.winner-company-items .title{ background-color: rgba(255,255,255,.6); color: #00578e; border-radius: 5px; padding: 8px; margin-bottom: 8px; line-height: 20px; flex: 1; display: flex; justify-content: center; align-items: center}
		.winner-company-items .logo img{ display: block; width: 100%}
		.winner-company-items .name{  padding: 10px 0px 0px 0px; height: 34px; line-height: 20px; font-size: 15px; color: #eee}
		.winner-company-items .link{ display: flex; justify-content: center; flex-wrap: nowrap}
		.winner-company-items .link a{ background-color: #ccc; border-radius: 25px; color: #1761B3;  margin: 5px; line-height: 30px; min-width: 88px; font-size: 13px}
		.winner-company-items .link a:hover{ background-color: #fff}
		@media (min-width: 768px) {
			.winner-company-items { width:  calc(100% / 2)}
			.winner-bg{ bottom: -20%}
			.winner-bg img{  width: 100%;}
		}
		@media (min-width: 996px) {
			.winner-company-items { width: calc(100% / 3)}

		}
		@media (min-width: 1200px) {
			.winner-company-items { width:25%}
		}




section .awards-content-container .activities-content-container  p{margin: 20px 0px; color: #FFF; font-weight:300}
.activities-content-container{ margin:30px auto 5%; max-width: 996px}
#awards-activities h5{ color: #AF6A12; margin: 20px;  font-size: min(max(18px, 3vw), 30px);}
.activities-video{ margin-bottom: 5%}
.portfolio-slides .items-pic img{ display: block; width: 100%}
.portfolio-slides .items-pic a{  margin:0 2px}
.portfolio-slides  .slick-prev{ left: -8px; z-index: 1}
.portfolio-slides  .slick-next{ right: 2px; z-index: 1}
.portfolio-slides .slick-prev:before, .portfolio-slides .slick-next:before{ font-size: 30px}
@media (min-width: 996px){
    .activities-video{ margin:0px auto 5%; width: 80%; }
}

a.readmore{ border: 1px solid rgba(255,255,255,.5); border-radius: 20px; display: block; color: #FFF; width: 100px; text-decoration: none; margin:10px auto; line-height: 35px; text-align: center}
a.readmore:hover{ color: rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.8); background-color: rgba(255,255,255,.2)}



.activities-video-container{position: relative;
  padding-bottom: 56.25%;}

.activities-video-container iframe {position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;}