@charset "UTF-8";
@layer reset, page,mold,base;

@layer reset{
  *{
    margin: 0;
    padding: 0;
    border:0;
    outline:0;
  }

  html {
    line-height: 1.25; 
    -webkit-text-size-adjust: 100%; 
  }

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

  b,
  strong {
    font-weight: bolder;
  }


  small {
    font-size: 80%;
  }


  sub,
  sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
  }

  main {
    display: block;
  }

  hr {
    box-sizing: content-box; 
    height: 0; 
    overflow: visible;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

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

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.25;
  }

  button,
  input {
    overflow: visible;
    text-transform: none;
  }


  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }

  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }

  textarea {
    overflow: auto;
  }

  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box;
  }

  a{
    outline: 0;
    border: 0;
    text-decoration: none;
    color: inherit;
  }

  a.btn_uderline{
    text-decoration: underline;
  }


  img{
    vertical-align: middle;
  }
}

@layer base{
  html,body{
    font-family: "Noto Sans TC","Noto Sans", "Microsoft JhengHei", "微軟正黑", sans-serif;
  }
  
  body{
    width: 100%;
  }
  
  .h-txt{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .d-none{
    display: none;
  }

  @media screen and (max-width:767px) {
    .pc_block{
      display: none;
    }
  }
  
  @media screen and (min-width:768px) {
    .m_block{
      display: none;
    }
  }

}

@layer page{
  html,body{
    font-size:2.92vw;
    line-height: 1.4;
  }

  body{
    display: grid;
    grid-template-rows: min-content  1fr min-content;
    min-height: 100vh;
  }
  .container{
    margin: auto;
    padding: 2.5rem 0 5rem 0;
  }

  img,source{
    display: block;
    width: 100%;
  }

  .btn{
    transition: all ease .3s;
  }

  .section_kv{
    padding-top: calc(var(--header-fontsize)*0.3*2 + var(--header-fontsize)*3);
    position: relative;
    background-color: #1E517F;
  }

  .section_kv::before{
    content: "";
    position: absolute;
    inset: 0;
    /* background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.35) 100%); */
    pointer-events: none;
  }

  .kv_content{
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    gap: 0.6rem;
    padding: 2rem 1rem;
    margin-top: 100px;
  }
  @media screen and (max-width:767px) {
    .kv_content{
      margin-top: 75px;
    }
  }
  .kv_picture{
    position: static;
    z-index: auto;
  }

  .kv_picture img{
    width: 100%;
    height: auto;
  }

  .kv_content h1{
    font-size: clamp(1.6rem, 5.5vw, 3rem);
    line-height: 1.25;
    font-weight: 800;
    text-wrap: balance;
    text-shadow: 0 2px 6px rgba(0,0,0,.4);
  }

  .kv_content .kv_subtitle{
    font-size: clamp(1rem, 3.2vw, 1.5rem);
    line-height: 1.5;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0,0,0,.35);
  }

  .section_content{
    box-sizing: border-box;
  }

  .tab_btns{
    margin-bottom: 3rem;
    display: grid;
    gap: 0.9rem;
  }

  .agenda .tab_btns{
    display: flex;
    justify-content: center;
  }

  .btn_tab{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.2rem;
    font-size: 1.25rem;
    color: #FFF;
    text-align: center;
    background: #e5e5e5;
    border-radius: clamp(8px, 20%, 20px) 0 clamp(5px, 20%, 20px) 0;
    transform: skewX(-10deg);
    filter: brightness(1.12) saturate(1.05);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .btn_tab > span {
    display: inline-block;
    transform: skewX(10deg);
  }

  .btn_tab.is-active{
    color: #fff;
    /* font-weight: 600; */
    font-size: 1.35rem;
    background: linear-gradient(to bottom, #005595, #0090d7);
    border-radius: clamp(8px, 20%, 20px) 0 clamp(5px, 20%, 20px) 0;
    transform: skewX(-10deg);
    filter: brightness(1.12) saturate(1.05);
  }
@media screen and (max-width:767px) {
  .btn_tab{
    padding: 0.45rem 1rem;
  }
  .btn_tab.is-active{
    font-size: 1.22rem;
  }
}
  /* .agenda .btn_tab.is-active,.agenda .btn_tab.is-active:hover{
    font-size: 1.5rem;
  } */

  .tab_content{
    display: none;
  }
  

  .tab_content.is-active{
    display: grid;
  }

  .solve .tab_content{
    gap: 1rem;
  }


  .tab_content .content_card{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.4rem;
    background:linear-gradient(180deg, #FFF 0%, #DDF4FE 100%);
    border: 3px solid #9BE0FF;
    box-shadow: 4px 4px 5px rgb(68 87 155 / 17%);
    box-sizing: border-box;
  }
  .tab_content .content_card p{
    font-size: clamp(1.1rem, 1.4vw, 28px);
    font-weight: 500;
    text-justify: inter-ideograph;
    hanging-punctuation: first;
  }
  
  /* 中文段落样式 */
  .tab_content .content_card p[lang="zh-Hant"] {
    text-align: justify;
    text-justify: inter-character;
    line-break: auto;
    line-height: 1.5;
  }
  
  /* 英文段落样式 */
  .tab_content .content_card p[lang="zh-Hant"] span[lang="en"] {
    hyphens: auto;
    word-break: normal;
    text-justify: inter-word;
    overflow-wrap: anywhere;
    letter-spacing: normal;
  }
  .tab_content .content_card .card_logo{
    text-align: center;
    width: 30%;
    flex: none;
  }

  .tab_content .logo_pic{
    width: 95%;
    margin: auto;
    border-radius: 0.66rem;
    overflow: hidden;
    /* border: 0.18rem #378EDD solid; */
  }

  .tab_content .content_card .card_logo .title{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em 0;
    min-height: 2.5em;
    line-height: 1.25;
    /* font-size: 1.1rem; */
    font-size: clamp(1.2rem, 1.8vw, 30px);
    font-weight: 700;
  }

  .btn_group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: auto;
    width: fit-content;
  }

  .btn_more{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.2rem;
    min-width: 7rem;
    width: fit-content;
    color: #fff;
    background: #0090d7;
    transition: all 0.3s ease;
    font-size: 1rem;
  }

  .btn_more::after{
    content: "";
    display: inline-block;
    margin-left: 0.375rem;
    width: 0;
    height: 0;
    border-width: 0.23rem 0 0.23rem 0.36rem;
    border-color: transparent transparent transparent #fff;
    border-style: solid;
  }

  @media (hover: hover) {
    .btn_more:hover {
      opacity: 0.8;
    }
  }

  .tab_content .content_card .card_info{
    margin-left: 1rem;
    align-items: center;
  }

  .tab_content .info_tag{
    display: inline-block;
    padding: 0.2rem 0.8rem;
    margin-bottom: 0.54rem;
    font-weight: 500;
    border: 0.04rem solid #000;
  }

  .tab_content .info_content{
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: unset;
  }

  .is-coming{
    display: flex;
    align-items: center;
    justify-content: start;
    min-height: 120px;
    padding: 0;
    width: 100%;
;
  }

  .is-coming .coming-text{
    color: #7F7F7F;
    font-size: 1.25rem;
    font-weight: 400;
    margin-top: 1rem;
  }

  .tab_content.content_all .pic_all{
    width: 100%;
    max-width: 1600px;
    margin: auto;
  }

  section .bg{
    position: fixed;
    width: 100%;
    height: 100%;
    inset: 0;
    z-index: -1;
  }

  .content_venue{
    display: grid;
    grid-template-columns: 22% 1fr;
    grid-template-rows: min-content;
    gap: 0.8rem 0.9rem;
    padding: 1rem 0;
    width: 100%;
  }
   

  .content_venue .venue_title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem 0;
    color: #fff;
    border-radius: 1.04167rem;
    background: linear-gradient(180deg, #378EDD 0%, #062D50 100%);
    box-shadow: 0px 0px 40px 0px rgba(255, 255, 255, 0.70);
  }


  .content_venue.second_venue .venue_info .info_text ~ .info_text{
    padding-top: 1.5rem;
  }

  .content_venue.second_venue .venue_info time{
    grid-row: 1 / 5;
  }

  .content_venue.second_venue .venue_info:nth-of-type(3) time{
    grid-row: 1 / 5;
  }

  .content_venue .venue_title .name_main{
    font-size: 2.5rem;
    font-weight: 700;
  }

  .content_venue .venue_title .name_sub{
    padding: 0.8rem;
    font-size: 1.25rem;
  }

  .content_venue .venue_info{
    display: grid;
    grid-template-columns: 18% 1fr;
    align-items: center;
    padding: 0.8rem 0;
    border-radius: 0.625rem;
    background: linear-gradient(180deg, #FFF 55%, #E4F2FF 100%);
    box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
  }

  .content_venue .venue_info time{
    padding: 1rem 0;
    font-size: 1.2rem;
    color: #666;
    font-weight: 400;
    text-align: center;
  }


  .content_venue .venue_info .info_text{
    padding: 0.2em 1.45rem;
    border-left: 0.0833rem solid #B4B4B4;
  }

  .content_venue .info_text .text_main{
    color: #1E517F;
    font-size: 1.55rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
  }
    
  .content_venue .info_text .text_sub{
    display: flex;
    align-items: flex-start;
    font-size: 1.12rem;
    line-height: 1.5;
  }

  .content_venue .info_text .text_sub ~ .text_sub{
    margin-top: 0.3rem;
  }
  
  .content_venue .venue_info .text_theme{
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    margin-left: -0.5em;
  }


  .content_venue .info_text .host{
    padding: 0.2ex 1.1ex;
    margin-right: 0.6em;
    margin-top: 0.3ex;
    background: #4BAAFF;
    font-size: 0.9rem;
    color: #FFF;
  }

  @media screen and (max-width:767px) {
    .pc_block{
      display: none;
    }
    
    .container{
      width: 92%;
    }

    .solve .tab_btns{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      /* flex-wrap: nowrap; */
      /* overflow-x: auto; */
      gap: 0.5rem;
      padding: 0 0.5rem;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .solve .tab_btns::-webkit-scrollbar {
      display: none;
    }

    .solve .btn_tab {
      flex: 0 0 auto;
      width: auto;
      min-width: max-content;
      white-space: nowrap;
    }

    .agenda .btn_tab{
      width: 20%;
    }

    /* .agenda .btn_tab{
      min-height: 4.5rem;
    } */

    .btn_tab.is-active{
      font-size: 1.22rem;
    }

    .tab_content{
      grid-template-columns: repeat(1, 1fr);
    }

    .tab_content .content_card{
      padding: 1.5rem 1.15rem 1.6rem 1.25rem;
      width: 100%;
    }

    .content_venue{
      grid-template-columns: 1fr;
      gap: 0.8rem 0.9rem;
      padding: 1rem 0;
      width: 100%;
    }

    

    .content_venue .venue_title{
        flex-direction: row;
    }

    .content_venue .venue_title p{
      margin-top: -0.5ex;
    }

    .content_venue .venue_info{
      grid-template-columns: 25% 1fr;
    }

    .content_venue .venue_info .info_text{
      padding: 0 0.8rem;
    }

    .content_venue .info_text .text_main{
      font-size: 1.45rem;
    }

    .content_venue .info_text .text_sub{
      flex-direction: column;
    }
    
  }
  
  @media screen and (min-width:768px) {
    html,body{
      font-size: 1.5vw;
    }
    .m_block{
      display: none;
    }
    
    .container{
      width: 93%;
    }

    .section_kv{}

    .solve .tab_btns{
      grid-template-columns: repeat(4, 1fr);
      justify-content: center;
      width: 80%;
      margin-left: auto;
      margin-right: auto;
    }

    /* .agenda .tab_btns{
      grid-template-columns: 20% 20%;
      justify-content: center;
      gap: 3rem;
    } */

    .agenda .btn_tab{
      width: 20%;
    }

    .solve .tab_content{
      grid-template-columns: repeat(2, 1fr);
    }

    .tab_content .content_card{
      padding: 1.5rem 1.25rem 1.5rem 1.25rem;
    }
    
    .content_venue .venue_title{
      grid-row: 1 / 5;
    }
    
    .content_stage_1 .content_venue.one_venue .venue_title{
      grid-row: 1 / 4;
    }

    .content_venue.second_venue .venue_title{
      grid-row: 1 / 3 ;
    }

    .content_stage_2.content_venue.main_venue .venue_title{
      grid-row: 1 / 6;
    }

    .content_stage_2.content_venue.one_venue .venue_title{
      grid-row: 1 / 3;
    }
  }

  @media screen and (min-width:992px) {
    html,body{
      font-size: 1.32vw;
    }

  }

  @media screen and (min-width:1366px) {
    html,body{
      font-size: 1.2vw;
    }
  }

  @media screen and (min-width:1600px) {
    html,body{
      font-size: 1.05vw;
      letter-spacing: 0.03em;
    }

    .container{
      width: 82%;
    }

    /* .btn_tab{
      min-height: 122px;
    } */
    
  }
}

/* Tab buttons: code-based shape to replace tab.png */
.btn_tab{
  position: relative;
  overflow: hidden;
  background-image: none;
  background-color: transparent;
}

.btn_tab > *{
  position: relative;
  z-index: 1;
  transform: skewX(10deg);
}

.btn_tab::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.833rem;
  background: #c9c8c8;
  transform-origin: center;
  border-radius: clamp(8px, 20%, 20px) 0 clamp(5px, 20%, 20px) 0;
}
.btn_tab{
  background: #c9c9c9;
  border-radius: clamp(8px, 20%, 20px) 0 clamp(5px, 20%, 20px) 0;
  transform: skewX(-8deg);
  filter: brightness(1.12) saturate(1.05);
}
.btn_tab.is-active{
  background-image: none;
}

.btn_tab.is-active::before{
  background: linear-gradient(360deg, #009FE8 0%, #004987 100%);
  box-shadow: 0 0 0.416rem 0.29rem rgba(255, 255, 255, 0.35), inset 0 4px 10px rgba(0,0,0,.12);
}

/* 針對 .solve 區塊的特殊樣式 */
.solve .btn_tab.is-active::before{
  background: linear-gradient(to bottom, #E5007F, #711486);
}

@media (hover: hover) {
  .btn_tab:focus,
  .btn_tab:focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,.5);
  }
}
.bg-deco {
  position: fixed;
  left: 0;
  bottom: 15%;
  z-index: -1;
  pointer-events: none;
}

.bg-deco img {
  width: auto;
  max-height: 450px;
  display: block;
}
@media screen and (max-width:768px) {
  .bg-deco {
    display: none;
  }
}

/* 裝飾線段 */
.bg-deco1 {
  position: fixed;
  right:-2%;
  bottom: 10%;
  z-index: -1;
  pointer-events: none;
  width: auto;
}
.bg-deco2 {
  position: fixed;
  left: 0;
  bottom: -10%;
  z-index: -1;
  pointer-events: none;
  width: auto;
}

.bg-deco1 img {
  max-height: 250px;
  display: block;
}
.bg-deco2 img {
  width: auto;
  max-height: 380px;
  display: block;
}
@media screen and (max-width:768px) {
  .bg-deco1,.bg-deco2 {
    display: none;
  }
}
/* @layer mold{
  .header{
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3em 0.83em;
    width: 100%;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    background-image: linear-gradient(180deg, rgba(16, 140, 255, 0.40) 0%, #108CFF 100%);
    z-index: 999;
    box-sizing: border-box;
    backdrop-filter: blur(5px);
  }

  .header_logo img{
    height: 3em;
  }

  .header_menu ul{
    display: flex;
    list-style: none;
    line-height: 1.5;
  }

  .header_menu li a{
    display: block;
    margin: 0 1.875em;
    opacity: 0.5;
    transition: all ease .3s;
  }

  .header_menu li ~ li{
    border-left: 1px solid #fff;
  }

  .header_menu li a.is-active{
    opacity: 1;
  }

  .header_menu li a.btn_report{
    color: #FCE300;
    opacity: 1;
  }
  
  .btn_sticky{
    position: fixed;
    display: block; 
    width: 9.5795vw;
    right: 0.575vw;
    bottom: 30%;
    z-index: 10;
  }

  footer{
    position: relative;
    z-index: 3;
    margin-top: auto;
    margin-bottom: 0;
    height: fit-content;
  }

   @media screen and (max-width:767px){
    .header{
      padding: 0.3em 0.83em;
      font-size: 2.8vw;
    }

    .header_menu li a{
      margin: 0 0.6em;
    }

    
    .btn_sticky{
      display: none;
    }

   }
  @media screen and (min-width:768px) {
    .header{
      font-size: 1.1vw;
    } 
  }
  @media screen and (min-width:992px) {
    .header{
      font-size: 1.05vw;
    }
  }

  @media screen and (min-width:1366px) {
    .header{
      font-size: 1.1vw;
    }
  }

  @media screen and (min-width:1600px) {
    .header{
      font-size: 1.15vw;
    }
  }

  @media (hover: hover) {
    .btn_menu:hover{
      filter: initial;
      scale: initial;
      opacity: 1;
    }
  }
  
}

.bg-deco {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
}

.bg-deco img {
  width: auto;
  max-height: 150px;
  display: block;
}