@charset "utf-8";

header { height: 100vh; background: url("../image/banner.png") center bottom / cover no-repeat fixed; position: relative; }

header > .header_title { width: 100%; position: absolute; top: 30%; left: 0px; }

header > .coming_soon { width: 100%; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); }

header > .coming_soon > h1 { color: rgb(255, 255, 255); font-family: Oswald, sans-serif; font-size: 80px; font-weight: 100; letter-spacing: 0.8rem; text-align: center; line-height: 1; }

header > .header_scrollDown { width: 35px; height: 60px; position: absolute; left: 50%; bottom: 8vw; transform: translateX(-50%); z-index: 7; }

.header_scrollDown > .scrollDown_shape {display: block;width: 35px;height: 60px;background: transparent;border: 2px solid rgb(255, 255, 255);border-radius: 50px;box-shadow: rgb(149, 149, 149) -1.5px -1.5px 6px, rgb(149, 149, 149) -1.5px -1.5px 6px inset;position: relative;left: 50%;}

.scrollDown_shape > .scrollDown_dot { position: absolute; width: 6px; height: 6px; background: rgb(255, 255, 255); border-radius: 50%; box-shadow: rgb(149, 149, 149) -1.5px -1.5px 6px; left: 50%; opacity: 0; transform: translate(-50%, -50%); animation: 1.8s cubic-bezier(0.36, 0.45, 0.63, 0.53) 0s infinite normal none running scroll_dot; }

.header_wave { width: 100%; height: 130px; position: absolute; bottom: 0px; overflow: hidden; }

.header_wave_front { width: 640vw; height: 80px; position: absolute; bottom: 0px; background: url("../image/svg/header_wave_front.svg") repeat-x; transform: translate3d(0px, 0px, 0px); animation: 42s cubic-bezier(0.36, 0.45, 0.63, 0.53) 0s infinite alternate none running wave_x; z-index: 6; }

.header_wave_back { width: 640vw; height: 100px; position: absolute; bottom: 0px; background: url("../image/svg/wave_back.svg") repeat-x; transform: translate3d(0px, 0px, 0px); z-index: 5; opacity: 0.3; }

.header_wave_back:nth-child(1) { animation: 26s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.2s infinite alternate none running wave_x, 10s ease -1.25s infinite normal none running wave_y; }

.header_wave_back:nth-child(2) { animation: 30s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.2s infinite alternate none running wave_x, 12s ease -1.25s infinite normal none running wave_y; }

@media screen and (max-width: 1280px) {
  header > .header_title { top: 50%; transform: translateY(-50%); }
  header > .header_scrollDown { width: 28px; height: 45px; bottom: 12vh; }
  .header_scrollDown > .scrollDown_shape { width: 28px; height: 45px; border: 1.5px solid rgb(255, 255, 255); box-shadow: rgb(149, 149, 149) -1.5px -1.5px 6px, rgb(149, 149, 149) -1.5px -1.5px 6px inset; }
  .scrollDown_shape > .scrollDown_dot { width: 4px; height: 4px; box-shadow: rgb(149, 149, 149) -1.5px -1.5px 6px; animation: 1.8s cubic-bezier(0.36, 0.45, 0.63, 0.53) 0s infinite normal none running scroll_dot; }
}

@media screen and (max-width: 900px) {
  header { height: 100vh; background: url("../image/banner_900.png") center bottom / cover no-repeat fixed; position: relative; }
}

@media screen and (max-width: 768px) {
  header > .header_scrollDown { bottom: 15vh; }
}

@media screen and (max-width: 500px) {
  header { height: 100vh; background: url("../image/banner_500.png") center bottom / cover no-repeat fixed; position: relative; }
  header > .header_scrollDown { bottom: 20vh; }
  .header_wave { height: 100px; }
  .header_wave_front { height: 60px; background: url("../image/svg/header_wave_front.svg"); animation: 10s cubic-bezier(0.36, 0.45, 0.63, 0.53) 0s infinite alternate none running wave_x; }
  .header_wave_back { height: 70px; background: url("../image/svg/wave_back.svg"); }
  .header_wave_back:nth-child(1) { animation: 6s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.2s infinite alternate none running wave_x, 10s ease -1.25s infinite normal none running wave_y; }
  .header_wave_back:nth-child(2) { animation: 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.2s infinite alternate none running wave_x, 12s ease -1.25s infinite normal none running wave_y; }
}

section { width: 100%; position: relative; }

.wave_fixed { position: absolute; width: 100%; height: 180px; background-size: 100vw; z-index: 3; }

section.about { padding: 0px 0px 180px; overflow: hidden; }

.about > .wave_fixed { background: url("../image/wave_fiexed_1.png") center bottom no-repeat; bottom: 0px; }

.about > .side_wave { right: -60px; bottom: 0px; }

section.agenda { background: rgb(0, 180, 194); }

.agenda h2 { color: rgb(255, 255, 255); margin-top: 0px; }

.agenda_choose { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; margin: 30px 0px; }

.choose_session { width: calc(12.5%); transition: all 0.3s ease 0s; }

.choose_session > a { width: fit-content; display: flex; flex-direction: column; justify-content: flex-start; color: rgb(248, 244, 239); font-weight: 300; }

.choose_session > a > .session_date { font-family: Oswald, sans-serif; }

.session_location { font-size: 1.4rem; line-height: 1.4; }

.session_location > span { display: block; font-size: small; margin: 0px; text-align: center; }

.choose_session > a:hover { color: rgb(255, 255, 255); }

a.session_chosen { font-weight: 600; color: rgb(255, 255, 255); }

:lang(en) a.session_chosen { font-weight: 500; }

.mo_choose_session { display: none; }

.session_content { display: none; }

.session_content.session_open { display: block; }

.session_detail { display: flex; align-items: flex-start; margin-top: 50px; }

.session_info { width: 40%; }

.session_info > h2 { font-weight: 600; margin-left: 16px; position: relative; }

.session_info > h2::after { position: absolute; content: ""; top: 50%; left: -16px; transform: translateY(-50%); border-left: 8px solid rgb(255, 255, 255); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

.session_info > .info_item { color: rgb(255, 255, 255); display: flex; align-items: center; transition: all 0.2s ease 0s; margin: 10px 0px; }

.session_info > a.info_item { width: fit-content; }

.info_item > svg { width: 18px; margin: 0px 8px 0px 0px; }

.session_info svg .cls-1 { fill: none; stroke: rgb(255, 255, 255); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5px; transition: all 0.2s ease 0s; }

.session_schedule { width: 60%; color: rgb(255, 255, 255); }

.session_schedule > table { width: 80%; border-collapse: collapse; font-family: Oswald, sans-serif; font-weight: 300; margin: 0px auto 16px; }

.session_schedule > table td { line-height: 1.2; }

.session_schedule > table tr > td:nth-child(1) { width: 25%; text-align: center; color: rgb(248, 244, 239); border-right: 1px solid rgb(248, 244, 239); position: relative; }

.session_schedule > table tr:nth-child(2n+1) > td:nth-child(1)::after { content: ""; width: 8px; height: 8px; position: absolute; border-radius: 50%; background: rgb(255, 255, 255); top: 50%; right: -4px; transform: translateY(-50%); }

.session_schedule > table tr > td:nth-child(2) { padding-left: 8%; }

.session_schedule > div { width: fit-content; font-size: small; margin: 0px auto; }

.session_map { width: 50%; }

.registration_btn { margin: 30px 0px 0px; padding-bottom: 10px; text-align: center; }

.registration_btn > .link_btn { color: rgb(255, 255, 255); transition: all 0.4s ease 0s; }

.registration_btn > .link_btn > svg { width: 28px; margin-left: 10px; }

.registration_btn > .link_btn > svg .cls-1 { fill: none; stroke: rgb(255, 255, 255); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5px; transition: all 0.4s ease 0s; }

.registration_btn > .link_btn:hover { color: rgb(185, 227, 223); }

.registration_btn > a.link_btn::after { background: rgb(185, 227, 223); }

.registration_btn > .link_btn:hover > svg .cls-1 { stroke: rgb(185, 227, 223); }

.registration_over { width: fit-content; margin: 30px auto 0px; padding-bottom: 4px; text-align: center; color: rgb(255, 255, 255); font-weight: 400; font-size: 1.8rem; border-bottom: 2px solid rgb(255, 255, 255); }

@media screen and (max-width: 768px) {
  .agenda_choose { display: none; }
  .mo_choose_session { display: block; width: 100%; }
  .mo_choose_session:not(.last_session) { margin-bottom: 3px; }
  .mo_choose_session > a { display: block; color: rgb(0, 180, 194); width: 100%; height: auto; line-height: 1.8; background: rgb(248, 244, 239); padding: 8px 12px; border-radius: 3px; }
  .mo_choose_session > a > .session_date { font-family: Oswald, sans-serif; }
  .mo_choose_session > a.mo_session_chosen { background: rgb(185, 227, 223); }
  .session_info { width: 100%; margin-bottom: 30px; }
  .session_info > .info_item { display: flex; align-items: center; margin: 8px 0px; }
  .session_detail { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 20px; }
  .session_schedule { width: 100%; margin-bottom: 30px; }
  .session_schedule > table { width: 95%; }
  .session_map { width: 100%; margin: 20px 0px; }
  .registration_btn { margin: -5px 0px 0px; padding-bottom: 20px; text-align: center; }
}

section.online { background: rgb(248, 244, 239); padding: 180px 0px 10px; }

.online_text { margin: 50px 0px; }

.online_topic { width: 100%; display: flex; justify-content: flex-end; margin: 80px 0px 50px; }

.topic_pic { width: 150px; height: 150px; border-radius: 50%; margin-left: 15px; }

.topic_pic:nth-child(1) { background: url("../image/banner_900.png") center center / cover no-repeat; }

.topic_pic:nth-child(2) { background: url("../image/banner.png") center center / cover no-repeat; }

.topic_pic:nth-child(3) { background: url("../image/page_bg.png") center center / cover no-repeat; }

.topic_pic:nth-child(4) { background: url("../image/page_header_front_bg.png") center center / cover no-repeat; }

.online_btn { text-align: right; }

.online_btn > .link_btn { color: rgb(0, 180, 194); transition: all 0.4s ease 0s; }

.online_btn > .link_btn > svg { width: 28px; margin-left: 10px; }

.online_btn > .link_btn > svg .cls-1 { fill: none; stroke: rgb(0, 180, 194); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5px; transition: all 0.4s ease 0s; }

.online_btn > .link_btn:hover { color: rgb(185, 227, 223); }

.online_btn > a.link_btn::after { background: rgb(185, 227, 223); }

.online_btn > .link_btn:hover > svg .cls-1 { stroke: rgb(185, 227, 223); }

.online > .wave_fixed.wave_top { background: url("../image/wave_fiexed_2.png") center top no-repeat; top: -1px; }

.online > .wave_fixed.wave_bottom { background: url("../image/wave_fiexed_3.png") center top no-repeat; bottom: -179px; }

@media screen and (max-width: 768px) {
  .online_topic { width: 68%; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 50px 0px 50px auto; }
  .topic_pic { width: 28vw; height: 28vw; margin: 20px 0px; }
}

@media screen and (max-width: 500px) {
  .online_text { margin: 20px 0px; }
  .online_topic { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 30px auto 20px; }
  .topic_pic { width: 42vw; height: 42vw; margin: 15px 0px; }
}

section.notes { padding: 160px 0px 80px; }

.notes > .wave_fixed.wave_top { background: url("../image/wave_fiexed_2.png") center top no-repeat; top: -1px; }

.notes > .side_wave { left: -70px; top: 0px; }

@media screen and (max-width: 500px) {
  section.notes { padding: 100px 0px 50px; }
}

section.qrcode { padding: 100px 0px 120px; }

.qrcode_content { padding: 40px; display: flex; justify-content: space-between; background: url("../image/qrcode_back.png") center center / contain no-repeat; }

.qrcode_content > figure { width: 160px; margin-left: 20px; }

@media screen and (max-width: 900px) {
  section.qrcode { padding: 80px 0px 100px; }
  .qrcode_content { display: flex; background: url("../image/mask_back.png") center center / contain no-repeat; flex-direction: column; align-items: center; }
  .qrcode_content > figure { width: 150px; margin: 20px 0px; }
}

@media screen and (max-width: 500px) {
  section.qrcode { padding: 20px 0px 60px; }
  .qrcode_content > figure { width: 120px; }
}

.link_registration { position: fixed; width: 160px; bottom: 40%; right: 0px; padding: 8px 0px 8px 25px; border-radius: 50px 0px 0px 50px; z-index: 50; background: rgb(231, 171, 92); transition: all 0.3s ease 0s; }

.link_registration > a { display: flex; align-items: center; color: rgb(255, 255, 255); font-size: 14px; }

.link_registration:hover { animation: 2s cubic-bezier(0.36, 0.45, 0.63, 0.53) 0s infinite normal none running neon_box; }

.link_registration p, .link_registration span, .link_registration svg { animation: 2s cubic-bezier(0.36, 0.45, 0.63, 0.53) 0s infinite normal none running neon_text; }

.link_registration:hover { background: rgb(241, 181, 102); }

.link_registration > a > span { display: block; width: 0px; height: 1px; background: rgb(255, 255, 255); margin-left: 5px; transition: all 0.3s ease 0s; }

.link_registration > a:hover > span { width: 14px; }

.link_registration svg { width: 8px; }

.link_registration svg > .cls-1 { fill: none; stroke: rgb(255, 255, 255); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; }

@media screen and (max-width: 500px) {
  .link_registration { width: 160px; bottom: 150px; padding: 4px 0px 4px 20px; border-radius: 25px 0px 0px 25px; }
}