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

@font-face{font-family: 'Barlow'; src:url('../fonts/BarlowSemiCondensed-Regular.ttf'); src:url('../fonts/BarlowSemiCondensed-Regular.ttf') format('truetype'); font-weight:normal; font-style:normal;}
@font-face{font-family: 'Barlow'; src:url('../fonts/BarlowSemiCondensed-Bold.ttf'); src:url('../fonts/BarlowSemiCondensed-Bold.ttf') format('truetype'); font-weight:900; font-style:normal;}
@font-face{font-family: 'NotoSans'; src:url('../fonts/NotoSansHK-Regular.otf'); src:url('../fonts/NotoSansHK-Regular.otf') format('opentype'); font-weight:normal; font-style:normal;}
@font-face{font-family: 'NotoSans'; src:url('../fonts/NotoSansHK-Bold.otf'); src:url('../fonts/NotoSansHK-Bold.otf') format('opentype'); font-weight:900; font-style:normal;}


html, body{width:100%; min-height:100vh; min-width:375px; margin:0; padding:0; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased !important; -moz-osx-font-smoothing:grayscale; font-family:Barlow,NotoSans,Helvetica,'新微軟正黑體',Arial,'微軟正黑體','Microsoft JhengHei',sans-serif; font-weight:normal; font-size:calc(21px + (48 - 21) * ((100vw - 375px) / (1600 - 375))); color:#545454; letter-spacing:1px; font-feature-settings:'kern'; text-rendering:optimizeLegibility; -webkit-overflow-scrolling:touch;}
html.Fixed, body.Fixed{overflow:hidden;}
*{box-sizing:border-box;}
a{text-decoration:none; color:#545454;}
p{margin:0.5rem 0; font-size:calc(12px + 0.12rem); text-align:justify;}
p.Remark{margin:0.5rem 0; font-size:calc(11px + 0.1rem); text-align:justify;}
h1{font-size:calc(24px + 0.5rem); color:#FFFFFF; text-align:center; margin-top:calc(60px + 5vw);}
h3{font-size:calc(16px + 0.2rem);}
h4{font-size:calc(14px + 0.15rem); font-weight:normal; margin:0;}
h5{font-size:calc(12px + 0.12rem); font-weight:normal; line-height:100%; padding-left:20px; position:relative;}
h5::before{content:""; width:0; height:0; border-top:calc(5px + 0.07rem) solid transparent; border-bottom:calc(5px + 0.07rem) solid transparent; border-left:calc(5px + 0.11rem) solid #545454; position:absolute; top:50%; left:0px; transform:translateY(-50%);}
h6{font-size:calc(10px + 0.08rem); font-weight:normal; line-height:100%;}

body{background-image:url("../images/bodybg.jpg"); background-repeat:no-repeat; background-size:101%; background-position:top center;}
section{position:relative;}

/* General Element ************************************************************************************************************************************************************************************/
.Container{width:100%; max-width:1200px; padding:calc(5px + 1vw) calc(10px + 1vw); position:relative; margin:auto;}
.Container.Full{max-width:none;}
#Main_Wrapper{width:100%; z-index:10; position:relative;}



/* Key Visual ************************************************************************************************************************************************************************************/

/* Key Visual Background Layer ( 3x Triangle, size relative to KV_Bg_Wrapper ) */
#KV_Bg_Wrapper{position:absolute; top:0px; left:0px; width:100%; min-width:375px; min-height:100vh; overflow:hidden; z-index:1;}
#KV_Bg_Container{position:relative; width:100%; height:82vw; min-height:calc(375px * 0.82); overflow:hidden;}
.KVTriangle{opacity:0.82; position:absolute;}
.KVTriangle svg{width:100%;}
#KV_OrangeTriangle{width:16.623%; position:absolute; top:0%; right:0%; z-index:3; transform:translateX(20%); animation:SlideFromRight 0.8s ease-out 1 forwards;}
#KV_CyanTriangle{ width:53.257%; position:absolute; bottom:2%; right:0%; z-index:2; transform:translateX(20%); animation:SlideFromRight 1.2s ease-out 1 forwards;}
#KV_GreenTriangle{width:39.812%; position:absolute; bottom:0%; left:0%; z-index:1; transform:scaleX(-1) translateX(20%); animation:SlideFromLeft 1s ease-out 1 forwards;}
#KV_OrangeTriangle svg{fill:url(#OrangeTriangle);}
#KV_CyanTriangle svg{fill:url(#CyanTriangle);}
#KV_GreenTriangle svg{fill:url(#GreenTriangle);}

/* Key Visual Logo and Slogan */
#KV_Front_Wrapper{width:100%; max-width:1600px; z-index:10; position:relative; margin:0 auto; padding:calc(40px + 12%) 0 calc(20px + 3%);}
#KV_Front_Wrapper img{width:100%;}
#KV_WH{width:42%; min-width:260px; height:auto; margin:0 auto; position:relative; animation:FloatingLogo 12s infinite ease-in-out alternate;}
#KV_WH .MaskImg{position:absolute; overflow:hidden; inset:0; width:100%; min-width:260px; height:100%; mix-blend-mode:screen; z-index:2; -webkit-mask-image:url("../images/wh_mask.png"); mask-image:url("../images/wh_mask.png"); -webkit-mask-size:100%; mask-size:100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;}
#KV_WH .MaskImg::before{content:""; position:absolute; inset:0; width:500%; height:100%; background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,0.4) 14%, rgba(255,255,255,0) 18%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 42%, rgba(255,255,255,0.3) 48%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.3) 52%, rgba(255,255,255,0) 58%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 82%, rgba(255,255,255,0.4) 86%, rgba(255,255,255,0) 90%, rgba(255,255,255,0) 100%); background-size:100% auto; animation:MovingLight 20s linear infinite alternate; transform:translateX(0%);}
#KV_WH .MaskImg img{width:100%; height:auto; opacity:0.2;}
#KV_Name{width:30%; min-width:200px; margin:auto; transform:translateX(30%);}
#KV_Slogan{width:18%; min-width:126px; margin:auto; transform:translateX(78%); display:flex; flex-wrap:nowrap; align-items:center; margin-top:0.5%;}
#KV_Slogan img{flex:0 0 auto;}
#KV_Slogan img:first-of-type{width:6.8%; margin-right:5%;}
#KV_Slogan.EN{width:26%; min-width:166px; transform:translateX(48%);}
#KV_Slogan.EN img:first-of-type{width:3.8%; margin-right:3%;}

/* Key Visual Flying Triangles */
#KV_Pattern_Wrapper{width:100%; max-width:2000px; min-width:375px; height:calc(100vw * 0.63); min-height:calc(768px * 0.63); max-height:calc(1600px * 0.63); overflow:hidden; z-index:5; position:absolute; top:0px; left:50%; transform:translateX(-50%);}
#KV_Pattern_Container{width:100%; min-width:768px; height:100%; position:absolute; top:0px; left:50%; transform:translateX(-50%);}
#KV_Pattern_Container > div{position:absolute; display:block; transform-origin:top left; opacity:1; animation-name:FadeIn,UpRising; animation-iteration-count:1,infinite; animation-fill-mode:forwards,none; animation-timing-function:ease-in-out;}
#KV_Pattern_Container > div:nth-of-type(odd){animation-direction:normal,alternate;}
#KV_Pattern_Container > div:nth-of-type(even){animation-direction:normal,alternate-reverse;}
#KV_Pattern_Container > div::before, #KV_Pattern_Container > div::after{content:""; position:absolute; top:0px; left:0px; display:block; width:100%; height:100%; background-size:contain; background-position:top left; background-repeat:no-repeat;}
#KV_Pattern_Container > div::after{animation-name:OpacityInOut; animation-iteration-count:infinite; animation-timing-function:ease-in-out; animation-direction:alternate;}
#P01{width:17.8%; height:33%; top:14.44%; left:5%;; animation-duration:1.2s,10s; animation-delay:0s,1.2s;}
#P01::before{background-image:url("../images/particles/p01a.png");}
#P01::after{background-image:url("../images/particles/p01b.png"); animation-duration:12s;}
#P02{width:14.6%; height:27.3%; top:25.17%; left:10.68%; animation-duration:1.5s,13s; animation-delay:0s,1.5s;}
#P02::before{background-image:url("../images/particles/p02a.png");}
#P02::after{background-image:url("../images/particles/p02b.png"); animation-duration:9s;}
#P03{width:20.4%; height:37.6%; top:30.86%; left:4.95%; animation-duration:2s,16s; animation-delay:0s,2s;}
#P03::before{background-image:url("../images/particles/p03a.png");}
#P03::after{background-image:url("../images/particles/p03b.png"); animation-duration:16s;}
#P04{width:18.5%; height:37.1%; top:61.8%; left:7.66%; animation-duration:1.3s,13s; animation-delay:0s,1.3s;}
#P04::before{background-image:url("../images/particles/p04a.png");}
#P04::after{background-image:url("../images/particles/p04b.png"); animation-duration:11s;}
#P05{width:15.8%; height:31.8%; top:66.5%; left:19.49%; animation-duration:1.8s,12s; animation-delay:0s,1.8s;}
#P05::before{background-image:url("../images/particles/p05a.png");}
#P05::after{background-image:url("../images/particles/p05b.png"); animation-duration:18s;}
#P06{width:17.3%; height:32.2%; top:61.4%; left:27.9%; animation-duration:1.7s,20s; animation-delay:0s,1.7s;}
#P06::before{background-image:url("../images/particles/p06a.png");}
#P06::after{background-image:url("../images/particles/p06b.png"); animation-duration:14s;}
#P07{width:18.3%; height:33.5%; top:63.5%; left:35.6%; animation-duration:1.1s,14s; animation-delay:0s,1.1s;}
#P07::before{background-image:url("../images/particles/p07a.png");}
#P07::after{background-image:url("../images/particles/p07b.png"); animation-duration:11s;}
#P08{width:14.6%; height:26.6%; top:15.8%; left:74.9%; animation-duration:1.6s,15s; animation-delay:0s,1.6s;}
#P08::before{background-image:url("../images/particles/p08a.png");}
#P08::after{background-image:url("../images/particles/p08b.png"); animation-duration:17s;}
#P09{width:12.7%; height:24.3%; top:22.9%; left:81.5%; animation-duration:1.8s,8s; animation-delay:0s,1.8s;}
#P09::before{background-image:url("../images/particles/p09a.png");}
#P09::after{background-image:url("../images/particles/p09b.png"); animation-duration:13s;}
#P10{width:19.1%; height:35.5%; top:33.8%; left:77.3%; animation-duration:1.4s,10s; animation-delay:0s,1.4s;}
#P10::before{background-image:url("../images/particles/p10a.png");}
#P10::after{background-image:url("../images/particles/p10b.png"); animation-duration:9s;}
#P11{width:18.3%; height:36.8%; top:47.3%; left:88.4%; animation-duration:1.2s,11s; animation-delay:0s,1.2s;}
#P11::before{background-image:url("../images/particles/p11a.png");}
#P11::after{background-image:url("../images/particles/p11b.png"); animation-duration:10s;}
#P12{width:14.3%; height:26.4%; top:71.1%; left:66.9%; animation-duration:2.2s,13s; animation-delay:0s,2.5s;}
#P12::before{background-image:url("../images/particles/p12a.png");}
#P12::after{background-image:url("../images/particles/p12b.png"); animation-duration:16s;}
#P13{width:12.9%; height:24.1%; top:74.3%; left:73.5%; animation-duration:1.2s,11s; animation-delay:0s,1.2s;}
#P13::before{background-image:url("../images/particles/p13a.png");}
#P13::after{background-image:url("../images/particles/p13b.png"); animation-duration:12s;}
#P14{width:14.4%; height:26.6%; top:73.3%; left:80.3%; animation-duration:1s,8s; animation-delay:0s,1s;}
#P14::before{background-image:url("../images/particles/p14a.png");}
#P14::after{background-image:url("../images/particles/p14b.png"); animation-duration:10s;}

/* Animation */
@keyframes FloatingLogo{
    0%{transform:translate(-2px,0px);}
    20%{transform:translate(4px,-10px);}
    40%{transform:translate(0px,10px);}
    60%{transform:translate(-6px,-8px);}
    70%{transform:translate(4px,8px);}
    80%{transform:translate(-2px,-4px);}
    100%{transform:translate(0px,0px);}
}

@keyframes UpRising{
    0%{transform:translate(0%,0%); opacity:1;}
    40%{transform:translate(-10%,-10%); pacity:0.8;}
    70%{transform:translate(5%,5%); opacity:0.6;}
    100%{transform:translate(0%,0%); opacity:1;}
}


@keyframes FadeIn{
    0%{opacity:0; transform:translate(20%,20%);}
    100%{opacity:1; transform:translate(0%,0%);}
}

@keyframes OpacityInOut{
    0%{opacity:1;}
    100%{opacity:0.1;}
}

@keyframes SlideFromRight{
    0%{opacity:0.5; transform:translateX(20%);}
    100%{opacity:1; transform:translateX(0%);}
}

@keyframes SlideFromLeft{
    0%{opacity:0.5; transform:scaleX(-1) translateX(20%);}
    100%{opacity:1; transform:scaleX(-1) translateX(0%);}
}

@keyframes MovingLight{
    0%{transform:translateX(0%);}
    100%{transform:translateX(-100%);}
}


/* Header ************************************************************************************************************************************************************************************/

header{width:100%; height:calc(10px + 6vh); height:50px; position:fixed; top:0; left:0; background-color:rgba(255,255,255,0.7); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:100000000; transition:height 0.2s ease-in-out;}
header::before{content:""; width:100%; height:8px; position:absolute; left:0px; bottom:-8px; background:linear-gradient(90deg, rgba(0,176,194,1) 0%, rgba(253,198,109,1) 50%, rgba(243,121,86,1) 100%); filter:blur(8px); mix-blend-mode:soft-light; z-index:0;}
#Header_Wrapper{width:100%; height:100%; max-width:1600px; margin:auto; padding:0 calc(10px + 1vw); position:relative; display:flex; flex-wrap:nowrap; align-items:center;}

/* Logo */
#Header_Logo{flex:1 0 auto; width:auto; height:60%; display:block; font-size:0;}
#Header_Logo img{height:100%; width:auto;}

/* Menu Icon */
#Menu_Wrapper{flex:0 0 40px; width:40px; height:40px; margin-right:calc(5px + 0.5vw); overflow:hidden; position:relative; cursor:pointer;}
#Menu_Wrapper > div{width:30px; height:3px; font-size:0; background-color:#666666; position:absolute; left:5px;}
#Menu_Wrapper > div:first-of-type{top:9px; left:auto; right:5px; transition:0.2s ease-in;}
#Menu_Wrapper > div:nth-of-type(2), #Menu_Wrapper > div:nth-of-type(3){top:18px; transform-origin:center center; transition:0.3s ease-in-out;}
#Menu_Wrapper > div:nth-of-type(4){top:27px; transition:0.2s ease-in;}
#Menu_Wrapper.Open > div:first-of-type, #Menu_Wrapper.Open > div:nth-of-type(4){width:0px; transition:width 0.2s ease-out;}
#Menu_Wrapper.Open > div:nth-of-type(2){transform:rotate(135deg); transition:0.3s ease-in-out;}
#Menu_Wrapper.Open > div:nth-of-type(3){transform:rotate(225deg); transition:0.4s ease-in-out;}

/* Nav */
nav{flex:0 0 100vw; width:100vw; height:auto; display:none; flex-wrap:wrap; align-items:center; align-content:flex-start;padding:0 calc(5px + 0.5vw); position:absolute; top:100%; left:0px; z-index:1000000000000; background-color:rgba(255,255,255,0.85); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); border-top:1px solid #E2E3E4;}
nav a{display:block; flex:0 0 100%; width:100%; padding:10px calc(5px + 0.5vw); font-size:16px; color:#666666; transition:color 0.2s ease-in; border-bottom:1px dotted #CCCCCC;}
nav a:last-of-type{border-bottom:0px;}
nav a:hover{color:#000000; transition:0.2s ease-out;}
nav.Open{display:flex;}

/* SNS */
#Share_Wrapper{flex:0 0 auto; width:auto; height:38%; display:flex; flex-wrap:nowrap; align-items:center; padding:0 calc(5px + 0.5vw);}
#Share_Wrapper > a{flex:0 0 auto; width:auto; height:100%; display:block; font-size:0; padding:0 calc(3px + 0.3vw); opacity:0.6; transition:opacity 0.2s ease-in;}
#Share_Wrapper > a:hover{opacity:1; transition:02s ease-out;}
#Share_Wrapper svg{width:auto; height:100%;}
#Share_Wrapper > #Share-Whatsapp{height:116%;}

/* Language */
#Lang_Wrapper{flex:0 0 auto; width:auto; height:auto; display:flex; flex-wrap:nowrap; align-items:center; padding:0 calc(5px + 0.5vw);}
#Lang_Wrapper > a{flex:0 0 auto; width:auto; display:block; padding:0 calc(3px + 0.3vw); font-size:16px; color:#999999; line-height:18px; transition:color 0.2s ease-in;}
#Lang_Wrapper > a:hover{color:#000000; transition:0.2s ease-out;}
#Lang_Wrapper > a.Selected{color:#000000;}



/* footer ************************************************************************************************************************************************************************************/
footer{width:100%; position:relative; padding:calc(20px + 1rem) 0; background-color:#FFFFFF; z-index:100; margin-top:200px;}
.LogoWrapper{display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
.LogoWrapper img{height:80px; margin:0 calc(10px + 0.5rem);}
.LogoWrapper h6{flex:0 0 100%; text-align:center;}
.LogoWrapper a{display:block;}
.FootNote{text-align:center;}




/* Home ************************************************************************************************************************************************************************************/

/* Key Day */
#KeyDay_Wrapper{width:100%; display:flex; flex-wrap:wrap; align-items:stretch; justify-content:space-between;}
#KeyDay_Wrapper > div{flex:0 0 100%; margin:calc(5px + 0.2rem) 0; padding:calc(8px + 0.3rem) calc(10px + 0.5rem); border-radius:10px; background-color:rgba(255,255,255,0.1); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); position:relative; box-shadow:0px 0px 20px 0px rgba(0,0,0,0.2); transition:0.5s ease-in-out;}
#KeyDay_Wrapper img{width:100%; max-width:170px; display:block; margin:auto; position:relative; transition:0.5s ease-in-out;}
#KeyDay_Wrapper img:last-of-type{position:absolute; top:0px; left:50%; transform:translate(-50%); opacity:0;}
#KeyDay_Wrapper span{display:inline-block;}
#KeyDay_Wrapper p, #KeyDay_Wrapper h3{text-align:center;}
#KeyDay_Wrapper p:first-of-type{position:relative;}
#KeyDay_Wrapper > div:hover{background-color:rgba(255,255,255,0.55);}
#KeyDay_Wrapper > div.Selected{background-color:rgba(255,255,255,0.65);}
#KeyDay_Wrapper > div.Selected::before{content:""; width:calc(100% - 8px); height:calc(100% - 8px); position:absolute; left:0px; top:0px; border-width:6px; border-style:solid; border-image:linear-gradient(to right, rgba(0,176,194,1), rgba(253,198,109,1), rgba(243,121,86,1)) 1; filter:blur(5px); mix-blend-mode:soft-light; z-index:0; pointer-events:none;}
#KeyDay_Wrapper > div.Selected img:last-of-type{opacity:1;}
#KeyDay_Wrapper > div.Selected p:first-of-type::after{content:""; width:100%; height:100%; position:absolute; top:2px; left:2px; display:block; background-image:url("../images/keyday_icon_color.svg"); background-position:center center; background-repeat:no-repeat; background-size:auto 100%; z-index:-1; filter:blur(6px);}
.KeyDay_CallForAction{display:block; width:auto; max-width:300px; margin:auto; padding:calc(5px + 0.1rem) calc(10px + 0.1rem); border:1px solid #FFFFFF; border-radius:200px; background-image:linear-gradient(to right, #7cc8b7 0%, #7cc8b7 51%, #fdc66d 100%); background-size:200% auto; color:#FFFFFF; font-size:calc(15px + 0.1rem); line-height:normal; text-align:center; transition:0.5s ease-in-out;}
.KeyDay_CallForAction:hover{background-position:right center; box-shadow:0 10px 20px -5px rgba(0,0,0,0.3);}

/* Introduction */
#Intro_Wrapper{width:100%; display:flex; flex-wrap:wrap; align-items:stretch; padding:0; border-radius:10px; background-color:rgba(255,255,255,0.65); box-shadow:0px 0px 20px 0px rgba(0,0,0,0.2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); position:relative;}
#Intro_Wrapper::after{content:""; width:100%; height:36%; position:absolute; left:0; bottom:0; background:linear-gradient(0deg, rgba(50,144,190,1) 0%, rgba(255,255,255,0) 100%); z-index:-1;}
#Intro_Wrapper > div{flex:0 0 100%;}
#Intro_Wrapper > div:first-of-type{padding:calc(8px + 0.3rem) calc(10px + 0.5rem);}
#Intro_Wrapper > div:last-of-type{min-height:120px; background-image:url("../images/introimg.png"); background-repeat:no-repeat; background-size:auto 150%; background-position:top right;}
#Intro_Wrapper ul{width:100%; margin:0 0 calc(12px + 0.12rem) 0; padding-left:calc(12px + 0.12rem);}
#Intro_Wrapper li{margin:0.1rem 0; font-size:calc(12px + 0.12rem);}
#Intro_Wrapper h5:last-of-type{margin-top:calc(25px + 1rem);}

/* Award Category */
.AwardCategory{background:linear-gradient(180deg, rgba(50,144,190,1) 30%, rgba(255,255,255,0) 136%); margin-top:calc(20px + 0.51rem);}
#AwardCategory_Wrapper{width:100%; padding:calc(16px + 1rem) 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
#AwardCategory_Wrapper > div{flex:0 0 100%; padding:calc(4px + 0.15rem) calc(10px + 0.5rem);}
#AwardCategory_Wrapper > div:first-of-type{flex:0 0 100%;}
#AwardCategory_Wrapper p, #AwardCategory_Wrapper h5, #AwardCategory_Wrapper h4{color:#FFFFFF;}
#AwardCategory_Wrapper h5{margin:0 0 calc(10px + 0.1rem) 0;}
#AwardCategory_Wrapper h5::before{border-left-color:#FFFFFF;}


/* Msg of Organiser */
#Msg_Wrapper{width:100%; display:flex; flex-wrap:wrap; align-items:flex-start; padding:0; border-radius:10px; background-color:rgba(255,255,255,0.65); box-shadow:0px 0px 20px 0px rgba(0,0,0,0.2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); position:relative;}
#Msg_Content{flex:0 0 100%; padding:calc(8px + 0.3rem) calc(10px + 0.5rem);}
#Msg_People{flex:0 0 100%; padding:0 10px; align-self:flex-end;}
#Msg_People img{width:100%; max-width:260px; height:auto; display:block; margin:auto;}



/* Judges ************************************************************************************************************************************************************************************/

/* Key Day */
#Judges_Wrapper{width:100%; display:flex; flex-wrap:wrap; align-items:stretch; justify-content:space-between;}
#Judges_Wrapper > div{flex:0 0 100%; margin:calc(5px + 0.2rem) 0; padding:calc(8px + 0.3rem); border-radius:10px; background-color:rgba(255,255,255,0.65); box-shadow:0px 0px 20px 0px rgba(0,0,0,0.2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); position:relative; transition:0.5s ease-in-out;}
#Judges_Wrapper > div:hover{background-color:rgba(255,255,255,0.9); transition:0.5s ease-in-out;}
#Judges_Wrapper img{width:100%; display:block; margin:auto; border-radius:7px;}
#Judges_Wrapper span{display:inline-block;}
#Judges_Wrapper p, #Judges_Wrapper h3{text-align:center;}
#Judges_Wrapper h3{margin-bottom:calc(5px + 0.2rem);}
#Judges_Wrapper p:first-of-type{font-size:0; margin:0;}
#Judges_Wrapper p{margin:calc(5px + 0.1rem) 0 0 0;}
#Judges_Wrapper p:last-of-type{margin-bottom:calc(5px + 0.2rem);}


/* Related Events ************************************************************************************************************************************************************************************/

#RE_Wrapper{width:100%; display:flex; flex-wrap:wrap; align-items:stretch; justify-content:space-between;}
#RE_Wrapper > div{flex:0 0 100%; margin:calc(5px + 0.2rem) 0; padding:0; border-radius:10px; background-color:rgba(255,255,255,0.65); box-shadow:0px 0px 20px 0px rgba(0,0,0,0.2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); position:relative; transition:0.5s ease-in-out; overflow:hidden; font-size:0; line-height:0; opacity:0.8;}
#RE_Wrapper > div:hover{opacity:1; transform:0.5s ease-in-out;}
#RE_Wrapper img{width:100%; height:auto;}


/* Winners ************************************************************************************************************************************************************************************/
#Winners_Wrapper{width:100%; display:block; padding:0; border-radius:10px; background-color:rgba(255,255,255,0.65); box-shadow:0px 0px 20px 0px rgba(0,0,0,0.2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); position:relative;}
.Winners_Container{width:100%; height:auto; display:block; border-bottom:1px solid rgba(0,0,0,0.1); transition:0.3s ease-in; position:relative;}
.Winners_Container::before{content:""; width:calc(100% - 8px); height:calc(100% - 8px); position:absolute; left:0px; top:0px; border-width:6px; border-style:solid; border-image:linear-gradient(to right, rgba(0,176,194,1), rgba(253,198,109,1), rgba(243,121,86,1)) 1; filter:blur(5px); mix-blend-mode:soft-light; z-index:0; pointer-events:none; opacity:0; transition:0.3s ease-in;}
.Winners_Container:first-of-type{border-top-left-radius:10px; border-top-right-radius:10px;}
.Winners_Container:last-of-type{border-bottom-left-radius:10px; border-bottom-right-radius:10px;}
.Winners_Container:hover{background-color:rgba(255,255,255,0.5); z-index:100; transition:0.2s ease-out;}
.Winners_Container:hover::before{opacity:1; transition:0.2s ease-out;}
.Winners_Container:last-of-type{border-bottom:0;}
.Winners_Container > h4{position:relative; padding:20px 50px; cursor:pointer; user-select:none;}
.Winners_Container > h4::before{content:""; width:0; height:0; border-top:calc(5px + 0.07rem) solid transparent; border-bottom:calc(5px + 0.07rem) solid transparent; border-left:calc(5px + 0.11rem) solid #545454; position:absolute; top:50%; left:25px; transform:translateY(-50%) rotate(0deg); transition:0.3s ease-in-out;}
.Winners_List{width:100%; height:0; overflow:hidden; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:stretch; padding:0px;}
.Winners_List > div{flex:0 0 100%; padding:20px 50px;}
.Winners_List > div h4{font-weight:bold;}
.Winners_List > div h5{padding:0; margin-bottom:0; margin-top:calc(3px + 0.1rem);}
.Winners_List > div h5::before{display:none;}
.Winners_List > div p{margin-top:calc(5px + 0.2rem);}
.Winners_List > div a{font-size:calc(12px + 0.12rem); text-decoration:underline; color:#008d9c; transition:0.2s ease-in;}
.Winners_List > div a:hover{color:#75a653; transition:0.2s ease-out;}
.Winners_Container.Show .Winners_List{height:auto; padding-bottom:20px;}
.Winners_Container.Show > h4::before{transform:translateY(-50%) rotate(90deg); transition:0.3s ease-out;}


/* Portfolio ************************************************************************************************************************************************************************************/
#Portfolio_Wrapper{width:100%; display:block; padding:0; margin-top:calc(60px + 5vw); border-radius:10px; background-color:rgba(255,255,255,0.65); box-shadow:0px 0px 20px 0px rgba(0,0,0,0.2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); position:relative;}

.Portfolio_Container{width:100%; height:auto; border-radius:10px; border-bottom:1px solid rgba(0,0,0,0.1); transition:0.3s ease-in; position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:stretch;}
.Portfolio_Container::before{content:""; width:calc(100% - 8px); height:calc(100% - 8px); position:absolute; left:0px; top:0px; border-width:6px; border-style:solid; border-image:linear-gradient(to right, rgba(0,176,194,1), rgba(253,198,109,1), rgba(243,121,86,1)) 1; filter:blur(5px); mix-blend-mode:soft-light; z-index:0; pointer-events:none; opacity:0; transition:0.3s ease-in;}
.Portfolio_Container:hover{background-color:rgba(255,255,255,0.5); z-index:100; transition:0.2s ease-out;}
.Portfolio_Container:hover::before{opacity:1; transition:0.2s ease-out;}
.Portfolio_Logo, .Portfolio_Photos{flex:0 0 calc(100% - 20px); width:calc(100% - 20px); margin:10px; padding:10px;}
.Portfolio_Info{flex:0 0 calc(100% - 20px); margin:10px; padding:10px 20px;}
.Portfolio_Logo{background-color:#FFFFFF; border-radius:6px; display:flex; align-items:center;}
.Portfolio_Logo img{width:100%; height:100%; max-width:200px; max-height:200px; object-fit:contain; display:block; margin:auto;}
.Portfolio_Info h4{font-weight:bold;}
.Portfolio_Info h5{padding-left:0; margin-top:0; font-weight:bold;}
.Portfolio_Info h5::before{display:none;}
.Portfolio_Info h6{margin-bottom:4px;}
.Portfolio_Info h6:first-of-type{margin-top:0;}
.Portfolio_Info a{color:#6eb8bc; word-break:break-all; word-wrap:break-word; font-weight:bold; margin-top:0;}
.Portfolio_Info p{margin-top:0; margin-bottom:0;}
.Portfolio_Photos{display:flex; flex-wrap:wrap; justify-content:space-between; border-top:1px solid rgba(0,0,0,0.1);}
.Portfolio_Photos a, .Portfolio_Photos > div{flex:0 0 100%; line-height:0; font-size:0; border-radius:6px; overflow:hidden; width:100%; margin-top:20px; cursor:pointer;}
.Portfolio_Photos a img{width:100%;}
.Portfolio_Photos h6{margin-bottom:0; padding:0 10px;}
.Portfolio_Photos > div div.VideoWrapper{width:100%; height:0px; line-height:0; font-size:0; padding-top:56.25%; position:relative; overflow:hidden;}
.Portfolio_Photos iframe{width:100%; height:100%; position:absolute; inset:0;}

/* Highlight ************************************************************************************************************************************************************************************/

#Highlight_Wrapper{width:100%; display:flex; flex-wrap:wrap; align-items:stretch; justify-content:space-between;text-align: center;}
#Highlight_Wrapper > div{flex:0 0 100%; margin:calc(5px + 0.2rem) 0; padding:0; border-radius:10px; background-color:rgba(255,255,255,0.65); box-shadow:0px 0px 20px 0px rgba(0,0,0,0.2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); position:relative; transition:0.5s ease-in-out; overflow:hidden; font-size:0; line-height:0; opacity:0.8;}
#Highlight_Wrapper > div:hover{opacity:1; transform:0.5s ease-in-out;}
#Highlight_Wrapper img{width:100%; height:auto;}
#Highlight_Wrapper div.VideoWrapper{width:100%; height:0px; line-height:0; font-size:0; padding-top:56.25%; position:relative; overflow:hidden;}
#Highlight_Wrapper iframe{width:100%; height:100%; position:absolute; inset:0;}
#Highlight_Wrapper p{text-align:center;}

/* Highlight Tab */
#HTab_Wrapper{width:100%; display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center;}
#HTab_Wrapper > a{flex:0 0 auto; user-select:none; margin:5px; padding:calc(5px + 0.05rem) calc(20px + 0.5rem); border-radius:10px; background-color:rgba(255,255,255,0.1); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); position:relative; box-shadow:0px 0px 20px 0px rgba(0,0,0,0.2); transition:0.5s ease-in-out;}
#HTab_Wrapper p{text-align:center; line-height:130%; margin:0.2rem 0;}
#HTab_Wrapper > a:hover{background-color:rgba(255,255,255,0.55);}
#HTab_Wrapper > a.Selected{background-color:rgba(255,255,255,0.65);}
#HTab_Wrapper > a.Selected::before{content:""; width:calc(100% - 8px); height:calc(100% - 8px); position:absolute; left:0px; top:0px; border-width:6px; border-style:solid; border-image:linear-gradient(to right, rgba(0,176,194,1), rgba(253,198,109,1), rgba(243,121,86,1)) 1; filter:blur(5px); mix-blend-mode:soft-light; z-index:0; pointer-events:none;}

/* Column ************************************************************************************************************************************************************************************/
#Column_Wrapper{width:100%; display:block; padding:0; border-radius:10px; background-color:rgba(255,255,255,0.65); box-shadow:0px 0px 20px 0px rgba(0,0,0,0.2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); position:relative;}
.Column_Container{width:100%; height:auto; display:block; border-bottom:1px solid rgba(0,0,0,0.1); transition:0.3s ease-in; position:relative;}
.Column_Container::before{content:""; width:calc(100% - 8px); height:calc(100% - 8px); position:absolute; left:0px; top:0px; border-width:6px; border-style:solid; border-image:linear-gradient(to right, rgba(0,176,194,1), rgba(253,198,109,1), rgba(243,121,86,1)) 1; filter:blur(5px); mix-blend-mode:soft-light; z-index:0; pointer-events:none; opacity:0; transition:0.3s ease-in;}
.Column_Container:first-of-type{border-top-left-radius:10px; border-top-right-radius:10px;}
.Column_Container:last-of-type{border-bottom-left-radius:10px; border-bottom-right-radius:10px;}
.Column_Container:hover{background-color:rgba(255,255,255,0.5); z-index:100; transition:0.2s ease-out;}
.Column_Container:hover::before{opacity:1; transition:0.2s ease-out;}
.Column_Container:last-of-type{border-bottom:0;}
.Column_Container > h4{padding:0px calc(2vw + 10px) 20px calc(2vw + 10px); cursor:pointer; user-select:none;}
.Column_Container > h6{font-size:calc(12px + 0.08rem); padding:20px calc(2vw + 10px) 0px calc(2vw + 10px); margin:0;}


/* HealthDay ************************************************************************************************************************************************************************************/
#HealthDay_Wrapper{width:100%; display:flex; flex-wrap:wrap; align-items:stretch; justify-content:space-between;}
#HealthDay_Wrapper > div{flex:0 0 100%; margin:calc(5px + 0.2rem) 0; padding:calc(12px + 0.5rem) calc(16px + 1rem); border-radius:10px; background-color:rgba(255,255,255,0.65); box-shadow:0px 0px 20px 0px rgba(0,0,0,0.2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); position:relative;}
#HealthDay_Wrapper p, #Judges_Wrapper h3{text-align:center;}
#HealthDay_Wrapper h3{margin-bottom:calc(5px + 0.2rem);}
#HealthDay_Container{width:100%; display:flex; flex-wrap:wrap; align-items:stretch; justify-content:space-between; margin:calc(20px + 1rem) 0 0 0;}
.HealthCard{width:100%; flex:0 0 100%; display:flex; flex-flow:column; background-color:rgba(255,255,255,0.6); box-shadow:0px 0px 20px 0px rgba(0,0,0,0.1); text-align:center; border-radius:6px; margin-bottom:20px; transition:0.2s ease-in;}
.HealthCard:hover{background-color:rgba(255,255,255,1); box-shadow:0px 16px 20px -8px rgba(0,100,115,1); transition:0.2s ease-out;}
.HealthCard > div{width:100%;}
.HealthCard > div:first-of-type{flex:1 1; padding:calc(8px + 0.2rem) calc(12px + 0.2rem) 0; overflow:hidden;}
.HealthCard > div:last-of-type{flex:0 0; display:flex; flex-flow:column;}
.HealthCard h3, .HealthCard h6{margin-bottom:0; margin-top:10px;}
.HealthCard img{width:100%; max-width:260px; display:block; margin:auto; flex:0 0 auto;}
.SpeakerCard{width:100%; flex:0 0 140px; display:flex; flex-wrap:wrap; align-content:center; background-image:linear-gradient(to right, #00b0c2 0%, #7cc8b7 100%); border-bottom-left-radius:6px; border-bottom-right-radius:6px; color:#FFFFFF;}
.SpeakerCard > *{flex:0 0 100%; margin:1px 0;}
.SpeakerCard h5{margin-top:10px; margin-bottom:5px; padding-left:0;}
.SpeakerCard h5::before{content:""; display:none;}
.HealthCard .SpeakerCard h6{margin-bottom:10px; margin-top:0px !important;}
.HealthButton{width:100%; margin:calc(10px + 0.8rem) 0; text-align:center;}
.HealthButton a{font-size:calc(16px + 0.2rem); font-weight:bold; padding:calc(8px + 0.1rem) calc(12px + 0.5rem); color:#FFFFFF; border-radius:10px; box-shadow:0px 16px 20px -8px rgba(0,100,115,0.5); position:relative; overflow:hidden; display:inline-block; transition:0.2s ease-in;}
.HealthButton a:hover{box-shadow:0px 16px 20px -8px rgba(0,100,115,1); transition:0.3s ease-out;}
.HealthButton a::before{content:""; width:100%; height:300%; position:absolute; top:-200%; left:0; background-image:linear-gradient(to bottom, #f37956 0%, #e4aa3c 50%, #51a848 100%); z-index:-1; transition:0.2s ease-in;}
.HealthButton a:hover::before{top:0%; transition:0.3s ease-out;}
#HealthDay_VideoContainer{width:100%; height:0; position:relative; padding-top:56.25%; overflow:hidden; margin:calc(20px + 1rem) 0 0 0; font-size:0; line-height:0; border-radius:6px; box-shadow:0px 0px 20px 0px rgba(0,0,0,0.2);}
#HealthDay_VideoContainer iframe{width:100%; height:100%; position:absolute; inset:0;}


@media screen and (min-width:480px){
    #Judges_Wrapper > div{flex:0 1 49%;}
    #RE_Wrapper > div{flex:0 1 49%;}
}

@media screen and (min-width:768px){
    header{height:60px;}
    #Header_Logo{flex:0 0 auto;}
    #Menu_Wrapper{display:none;}
    nav{position:relative; top:inherit; left:inherit; flex:1 0 auto; width:auto; display:flex; flex-wrap:nowrap; padding:0 calc(5px + 0.5vw); background-color:transparent; backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px); border:0px;  box-shadow:0px 0px 0px 0px rgba(0,0,0,0);}
    nav a{flex:0 0 auto; width:auto; padding:0 calc(5px + 0.5vw); border:none;}
    /*#KeyDay_Wrapper > div{flex:0 1 48%;} */
    #KeyDay_Wrapper > div{flex:1 1 auto;}
    #KeyDay_Wrapper img{max-width:190px;}
    #Intro_Wrapper{flex-wrap:nowrap;}
    #Intro_Wrapper > div:first-of-type{flex:0 0 60%;}
    #Intro_Wrapper > div:last-of-type{flex:0 0 40%; background-size:contain; background-position:top 20% right;}
    #Intro_Wrapper::after{display:none;}
    #AwardCategory_Wrapper > div{flex:0 0 50%;}
    #Judges_Wrapper > div{flex:0 1 31%;}
    #Msg_Wrapper{flex-wrap:nowrap;}
    #Msg_Content{flex:1 1 auto;}
    #Msg_People{flex:0 0 300px;}
    .Portfolio_Container{padding:calc(15px + 0.5vw);}
    .Portfolio_Logo{flex:0 0 30%; width:30%;}
    .Portfolio_Logo img{max-width:300px; max-height:300px;}
    .Portfolio_Info{flex:0 0 calc(70% - 40px); width:calc(70% - 40px);}
    .Portfolio_Photos a, .Portfolio_Photos > div{flex:0 0 49%; width:49%;}
    .Portfolio_Photos h6{padding:0; flex:0 0 100%;}
    #Highlight_Wrapper > div{flex:0 1 49%;}
    .HealthCard{width:calc(50% - 10px); flex:0 0 calc(50% - 10px);}
}

@media screen and (min-width:1024px){
    #Lang_Wrapper > a{font-size:18px;}
    #AwardCategory_Wrapper > div{flex:0 0 33.333%;}
    .Winners_List > div{flex:0 0 50%;}
    .HealthCard{width:calc(33.333% - 10px); flex:0 0 calc(33.3330% - 10px);}
    /*.Winners_List > div:nth-of-type(even){border-left:1px solid rgba(0,0,0,0.2);}*/
}