@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after { content: ''; content: none; }

q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

*, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }

html { -webkit-overflow-scrolling: touch; }

body { vertical-align: middle; font-family: -apple-system, BlinkMacSystemFont, "Microsoft JhengHei", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; letter-spacing: .02rem; line-height: 1.5; font-weight: 400; color: #333333; font-size: 17px; }

a { text-decoration: none; cursor: pointer; color: #333333; }

img { vertical-align: middle; border-style: none; max-width: 100%; height: auto; }

svg { overflow: hidden; vertical-align: middle; }

table { border-collapse: collapse; }

a, area, button, [role="button"], input, label, select, summary, textarea { -ms-touch-action: manipulation; touch-action: manipulation; }

input, button, select, optgroup, textarea { font-family: -apple-system, BlinkMacSystemFont, "Microsoft JhengHei", "Spartan", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

.level1 { font-size: 16px; line-height: 24px; }

@media screen and (max-width: 480px) { .level1 { font-size: 16px; line-height: 24px; } }

@media screen and (max-width: 320px) { .level1 { font-size: 16px; line-height: 24px; } }

.level2 { font-size: 20px; line-height: 24px; }

@media screen and (max-width: 480px) { .level2 { font-size: 20px; line-height: 24px; } }

@media screen and (max-width: 320px) { .level2 { font-size: 16px; line-height: 24px; } }

.level3 { font-size: 24px; line-height: 32px; }

@media screen and (max-width: 480px) { .level3 { font-size: 20px; line-height: 24px; } }

@media screen and (max-width: 320px) { .level3 { font-size: 20px; line-height: 24px; } }

.level4 { font-size: 28px; line-height: 40px; }

@media screen and (max-width: 480px) { .level4 { font-size: 24px; line-height: 32px; } }

@media screen and (max-width: 320px) { .level4 { font-size: 20px; line-height: 24px; } }

.level5 { font-size: 32px; line-height: 40px; }

@media screen and (max-width: 480px) { .level5 { font-size: 28px; line-height: 40px; } }

@media screen and (max-width: 320px) { .level5 { font-size: 24px; line-height: 32px; } }

.level6 { font-size: 36px; line-height: 48px; }

@media screen and (max-width: 480px) { .level6 { font-size: 32px; line-height: 40px; } }

@media screen and (max-width: 320px) { .level6 { font-size: 24px; line-height: 32px; } }

.level7 { font-size: 40px; line-height: 48px; }

@media screen and (max-width: 480px) { .level7 { font-size: 32px; line-height: 40px; } }

@media screen and (max-width: 320px) { .level7 { font-size: 28px; line-height: 40px; } }

.level8 { font-size: 44px; line-height: 56px; }

@media screen and (max-width: 480px) { .level8 { font-size: 36px; line-height: 48px; } }

@media screen and (max-width: 320px) { .level8 { font-size: 28px; line-height: 40px; } }

.slider .item, .schedule li .schedule-session, #sponsor article, .gotop { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.nav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.container, .nav { max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; position: relative; }

.nav .logo, #kv .kv-intro p, #kv .kv-info span { text-shadow: 0px 0px 4px #333333, 0px 0px 8px rgba(51, 51, 51, 0.85); }

.navbtn.close, .navbtn.open, #kv .kv-btn, #kv .kv-btn:hover, #kv .kv-btn:focus, .slider .item, .slider .item:hover, .slider .item:focus, #recommend article a, .gotop { -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }

.mouse-out { position: relative; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.mouse-out::before { -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: bottom right; -ms-transform-origin: bottom right; transform-origin: bottom right; content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0 0 0 0; background: rgba(249, 179, 3, 0.9); z-index: -1; -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; -o-transition: transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; }

.mouse-out:hover::before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; }

.container { text-align: center; overflow: hidden; padding: 60px 0; }

.ttl { margin-bottom: 30px; }

.ttl span { text-transform: uppercase; color: #008680; margin-bottom: 0; border-left: 1px solid #357B7C; border-right: 1px solid #357B7C; padding-left: 20px; padding-right: 20px; }

.ttl h3 { letter-spacing: 6px; color: #333333; margin-top: 0; padding-left: 6px; font-family: "Noto Sans TC"; }

.ttl.white span { color: #00E6CE; border-left: 1px solid #00E6CE; border-right: 1px solid #00E6CE; }

.ttl.white h3 { color: #EFEFEF; }

@-webkit-keyframes ani-opacity { 0% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes ani-opacity { 0% { opacity: 0; }
  100% { opacity: 1; } }

@-webkit-keyframes ani-shadow { 0% { -webkit-box-shadow: none; box-shadow: none; }
  100% { -webkit-box-shadow: -5px -5px 10px rgba(249, 179, 3, 0.45), 5px 5px 30px rgba(249, 179, 3, 0.75); box-shadow: -5px -5px 10px rgba(249, 179, 3, 0.45), 5px 5px 30px rgba(249, 179, 3, 0.75); } }

@keyframes ani-shadow { 0% { -webkit-box-shadow: none; box-shadow: none; }
  100% { -webkit-box-shadow: -5px -5px 10px rgba(249, 179, 3, 0.45), 5px 5px 30px rgba(249, 179, 3, 0.75); box-shadow: -5px -5px 10px rgba(249, 179, 3, 0.45), 5px 5px 30px rgba(249, 179, 3, 0.75); } }

header { position: fixed; height: auto; width: 100%; left: 0; right: 0; top: 0; background-color: rgba(15, 67, 60, 0.9); z-index: 9; }

.nav { height: 75px; }

.nav a { color: #EFEFEF; }

.nav a:hover, .nav a:focus { color: #00E6CE; }

.nav .logo { font-weight: bold; color: #EFEFEF; }

.nav .logo span { color: #00E6CE; padding-right: 2px; }

.nav .link { margin: 0 7.5px; }

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

.overlay { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; background: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #58A8A3), color-stop(45%, #007D7D), color-stop(70%, #008680)); background: -webkit-linear-gradient(top, #58A8A3 15%, #007D7D 45%, #008680 70%); background: -o-linear-gradient(top, #58A8A3 15%, #007D7D 45%, #008680 70%); background: linear-gradient(180deg, #58A8A3 15%, #007D7D 45%, #008680 70%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; z-index: 9; }

.overlay a { text-align: center; color: #EFEFEF; padding: 12.5px; width: 100%; }

.overlay a:hover, .overlay a:focus { background-color: #0F433C; }

.overlay .active { background-color: #DAA520; }

.navbtn.close, .navbtn.open { width: 40px; height: 40px; display: block; right: 0; z-index: 10; display: none; }

@media screen and (max-width: 1024px) { .navbtn.close, .navbtn.open { display: block; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } }

@media screen and (max-width: 768px) { .navbtn.close, .navbtn.open { width: 30px; height: 30px; } }

.navbtn.open { background: url("../../dist/img/menu.png"); background-size: cover; }

.navbtn.close { background: url("../../dist/img/cancel.png"); background-size: cover; }

#kv .kv-hr, #kv .kv-img, #kv .kv-intro p, #kv .kv-info { opacity: 0; -webkit-animation: ani-opacity 2s; animation: ani-opacity 2s; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }

#kv { min-height: 700px; background: url("../../dist/img/kv-mask.png"), -webkit-linear-gradient(330deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.1) 55%, black 100%), #007D7D; background: url("../../dist/img/kv-mask.png"), -o-linear-gradient(330deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.1) 55%, black 100%), #007D7D; background: url("../../dist/img/kv-mask.png"), linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.1) 55%, black 100%), #007D7D; background-size: auto 100%, cover, cover; background-position: right; background-repeat: no-repeat; color: #EFEFEF; padding-top: 75px; }

#kv .kv-title { width: 60%; }

#kv .kv-hr { width: 75%; height: 1px; margin-top: 10px; margin-left: auto; margin-right: auto; background: -webkit-linear-gradient(330deg, rgba(0, 230, 206, 0) 10%, #00e6ce 50%, rgba(0, 230, 206, 0) 90%); background: -o-linear-gradient(330deg, rgba(0, 230, 206, 0) 10%, #00e6ce 50%, rgba(0, 230, 206, 0) 90%); background: linear-gradient(120deg, rgba(0, 230, 206, 0) 10%, #00e6ce 50%, rgba(0, 230, 206, 0) 90%); -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }

#kv .kv-img { margin-bottom: 10px; }

#kv .kv-intro { margin-bottom: 20px; }

#kv .kv-intro p { -webkit-animation-delay: 1.25s; animation-delay: 1.25s; line-height: 1.5; font-weight: bold; }

#kv .kv-info { margin-top: 20px; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }

#kv .kv-info span { color: #00E6CE; font-weight: bold; margin-right: 10px; font-family: "Noto Sans TC"; }

#kv .kv-info time { font-size: 16px; }

#kv .kv-info address { font-style: normal; margin-top: 4px; font-size: 18px; }

#kv .kv-btn { color: #F9B303; font-weight: bold; font-family: "Noto Sans TC"; padding: 10px 60px; border: 2px solid #F9B303; margin-top: 30px; display: inline-block; -webkit-animation: ani-shadow 2s infinite; animation: ani-shadow 2s infinite; animation-direction: alternate-reverse; }

#kv .kv-btn:hover, #kv .kv-btn:focus { color: #EFEFEF; }

@media screen and (max-width: 1024px) { #kv { background: url("../../dist/img/kv-mask-s.png"), -webkit-linear-gradient(330deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.1) 55%, black 100%), #007D7D; background: url("../../dist/img/kv-mask-s.png"), -o-linear-gradient(330deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.1) 55%, black 100%), #007D7D; background: url("../../dist/img/kv-mask-s.png"), linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.1) 55%, black 100%), #007D7D; background-size: auto 100%, cover, cover; background-position: right; background-repeat: no-repeat; } }

@media screen and (max-width: 768px) { #kv .kv-title { width: 80%; margin-right: auto; margin-left: auto; } }

@media screen and (max-width: 480px) { #kv .kv-title { width: 90%; } }

.slider { width: 90%; margin-left: auto; margin-right: auto; }

.slider .item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-top: 50px; padding-bottom: 50px; }

@media screen and (max-width: 480px) { .slider .item { padding-bottom: 0; } }

.slider .item img { border-radius: 50%; }

.slider .item h3 { color: #00E6CE; margin-top: 20px; margin-bottom: 10px; }

.slider .item h3 span { font-size: 17px; padding-left: 10px; }

.slider .item p { color: #EFEFEF; padding: 0 10px; }

.slider .item:hover, .slider .item:focus { -webkit-transform: scale(1.15); -ms-transform: scale(1.15); transform: scale(1.15); }

.slider .item:hover img, .slider .item:focus img { -webkit-box-shadow: 0px 0px 15px rgba(0, 230, 206, 0.85); box-shadow: 0px 0px 15px rgba(0, 230, 206, 0.85); }

#speakers .ttl { margin-bottom: -10px; }

.speakers-slider { position: relative; width: 100%; }

.speakers-slider .item { position: relative; }

.speakers-slider .item small { color: #00E6CE; background-color: #357B7C; border: 1px solid #00E6CE; padding: 0px 4px; position: absolute; top: 61%; }

.prev, .next { position: absolute; cursor: pointer; top: 45%; }

.prev { left: 2%; -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); }

.next { right: 2%; }

.slick-dots { margin-top: -10px; }

.slick-dots li { display: inline-block; position: relative; }

.slick-dots li button { font-size: 0; line-height: 0; display: block; width: 25px; height: 25px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; }

.slick-dots li button::before { font-family: 'slick'; font-size: 20px; line-height: 20px; position: absolute; top: 0; left: 0; width: 25px; height: 25px; content: '●'; text-align: center; opacity: .5; color: #EFEFEF; }

.slick-dots li.slick-active button::before { opacity: 1; color: #00E6CE; }

.yt { background: url("../../dist/img/bg-dot.png"), url("../../dist/img/bg-wave.png"); background-repeat: no-repeat; background-position: left top, right bottom; }

#speakers { background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0)), color-stop(50%, rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.55))), #007D7D; background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.55) 100%), #007D7D; background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.55) 100%), #007D7D; background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.55) 100%), #007D7D; min-height: 400px; }

#agenda { background: url("../../dist/img/bg-wave-2.png"), url("../../dist/img/bg-dot-2.png"), url("../../dist/img/bg-wave-3.png"), #EFEFEF; background-repeat: no-repeat; background-position: left top, right top, right bottom; }

#agenda .container > p.level1 { padding-left: 30px; padding-right: 30px; }

.schedule { max-width: 1200px; margin-left: auto; margin-right: auto; }

.schedule li { background-color: white; display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 2px solid #EFEFEF; }

.schedule li .schedule-title { width: 13%; padding: 10px; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }

.schedule li .schedule-title span { margin-left: 4px; margin-right: 4px; line-height: .8; font-size: 24px; color: #F9B303; }

.schedule li .schedule-session { width: 12%; background-color: #DAA520; text-shadow: 2px 2px 0px #816213; color: #EFEFEF; -ms-flex-line-pack: center; align-content: center; font-weight: normal; font-family: "Noto Sans TC"; }

.schedule li .schedule-session span { display: block; width: 100%; }

.schedule li .subject { width: 80%; text-align: left; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; }

.schedule li .subject .subject-title { min-width: 35%; color: #007D7D; letter-spacing: 1px; font-weight: bold; font-family: "Noto Sans TC"; padding-right: 10px; padding-left: 10px; font-size: 20px; line-height: 1.3; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }

.schedule li .subject .content { min-width: 65%; }

.schedule li .subject .subject-name { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-bottom: 10px; padding-left: 10px; }

.schedule li .subject .subject-name .job { line-height: 1.5; color: #DAA520; border: 1px solid #DAA520; font-size: 15px; min-width: 11%; text-align: center; margin-right: 10px; }

.schedule li .subject .subject-name .name { color: #333333; }

.schedule li .subject .subject-name .name p { line-height: 1.75; display: block; line-height: 1.5; }

.schedule li .subject .subject-name .name p span { display: block; }

@media screen and (max-width: 768px) { .schedule li .subject .subject-name .name p span { display: inline; } }

.schedule li .subject .subject-name:last-child { margin-bottom: 0; }

@media screen and (max-width: 768px) { .schedule li .schedule-title { width: 10%; }
  .schedule li .schedule-title span { display: block; position: relative; -webkit-transform: rotate(0.25turn); -ms-transform: rotate(0.25turn); transform: rotate(0.25turn); }
  .schedule li .schedule-session { width: 15%; }
  .schedule li .subject { width: 70%; } }

@media screen and (max-width: 480px) { .schedule li { -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .schedule li .schedule-title { width: 40%; text-align: left; padding-left: 15px; }
  .schedule li .schedule-title span { display: inline-block; position: relative; -webkit-transform: rotate(0turn); -ms-transform: rotate(0turn); transform: rotate(0turn); }
  .schedule li .schedule-session { width: 60%; background-color: transparent; color: #DAA520; text-shadow: none; }
  .schedule li .schedule-session span { display: inline-block; width: auto; }
  .schedule li .subject { width: 100%; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 0; }
  .schedule li .subject .subject-title, .schedule li .subject .content { width: 100%; }
  .schedule li .subject .subject-title { font-size: 22px; padding-left: 0; padding-right: 0; margin-bottom: 10px; } }

.schedule li.small .schedule-title, .schedule li.small .subject { padding-top: 5px; padding-bottom: 5px; }

.schedule li:nth-child(even) .schedule-session { background-color: #F9B303; }

@media screen and (max-width: 480px) { .schedule li:nth-child(even) .schedule-session { background-color: transparent; } }

#recommend { background-color: #008680; }

#recommend .container { max-width: 1000px; }

#recommend article { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

#recommend article a { width: 48%; color: #EFEFEF; text-align: left; }

#recommend article a p { margin-top: 10px; padding: 0 10px; }

#recommend article a:hover { color: #00E6CE; -webkit-transform: translateY(4px); -ms-transform: translateY(4px); transform: translateY(4px); }

@media screen and (max-width: 480px) { #recommend article { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  #recommend article a { width: 90%; margin-bottom: 30px; } }

#sponsor .container { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 1000px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 30px 0; }

#sponsor article { width: 45%; -ms-flex-pack: distribute; justify-content: space-around; }

#sponsor article a { cursor: default; }

@media screen and (max-width: 768px) { #sponsor .container { -ms-flex-wrap: wrap; flex-wrap: wrap; }
  #sponsor article { width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  #sponsor article a { margin: 0 10px; }
  #sponsor article:nth-child(1) { margin-bottom: 10px; } }

@media screen and (max-width: 480px) { #sponsor article p { display: block; width: 100%; } }

footer { color: #EFEFEF; background-color: #707070; text-align: center; padding: 20px 10px; }

.gotop { position: fixed; z-index: 8; bottom: 30px; right: 30px; background-color: #F9B303; color: #EFEFEF; width: 100px; height: 100px; border-radius: 50px; font-weight: bold; line-height: 1.2; }

.gotop p { text-shadow: 2px 2px 0px #575757; }

.gotop:hover, .gotop:focus { -webkit-transform: translateY(4px); -ms-transform: translateY(4px); transform: translateY(4px); background-color: #0F433C; }

@media screen and (max-width: 480px) { .gotop { bottom: 10px; right: 10px; width: 80px; height: 80px; border-radius: 40px; }
  .gotop p { font-size: 18px; line-height: 1.2; } }