@charset "UTF-8";

/* 共通部分
------------------------------- */
html {
    font-size: 100%;
}
body{
    font-family: "Noto Sans TC", sans-serif;
    line-height: 1.5;
    color: #465055;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}
.wrapper {
    max-width: 1100px;
    margin: 0px auto;
    padding: 0px 4%;
}
.wrapper img {
    display: block;
    margin: 20px auto;
    max-width: 100%;
    height: auto;
}
.big-bg {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
/* 按鈕 */
.button{
font-size:1rem;
background:#dcdcdc;
color:#465055;
padding:18px 32px;
}
.button:hover {
    background: #aaa;
}
.page-header {
    background: #dcdcdc;
    width: 100%;
}

/* LOGO */
.logo {
flex-shrink: 0; 
width: 210px;
margin-top: 14px;
margin-right: 20px;
}
.logo img {
height: 70px; 
display: block;
}
.main-nav {
display: flex;
flex: 1;
font-size: 0.8rem;
list-style: none;
background: #dcdcdc; 
margin: 0;      
padding: 0;
justify-content: flex-end;
}
.main-nav li {
flex: 1;
max-width: 130px;
min-width: 80px; 
text-align: center;
}
.main-nav a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 70px;
color: #465055;
transition: 0.3s;
}
.main-nav a:hover {
transform:translateY(5px);
color: #aaa;
}
.main-nav .zh{
font-size: 16px;
}
nav.wrapper {
display: flex;
align-items: center;
justify-content: space-between; /* 讓 Logo 和選單分開 */
max-width: 1100px;
margin: 0 auto;
padding: 0 4%;
}
.lang-switch img {
width: 24px;
height: 24px;
}
/*---- FOOTER ----*/
.conference-footer{
background:#efefef;
padding:60px 60px;
font-family: "Noto Sans TC", sans-serif;
color:#465055;
}
.footer-container{
display:flex;
justify-content:space-between;
gap:80px;
}
/*--LEFT--*/
.footer-left{
max-width:950px;
}
.footer-banner img{
width:320px;
height:80px;
object-fit:cover;
display:block;
}
.footer-title{
margin-top:25px;
font-size: 14px;
letter-spacing:1px;
}
.footer-icons{
margin: 10px 0;
display:flex;
gap:30px;
}
.footer-icons img{
width: 32px;
height:32px;
object-fit:cover;
}
.footer-address{
font-size:14px;
margin-bottom:10px;
line-height: 1.6;
}
.contact-label {
font-weight: bold;
color: #465055; 
margin-right: 5px;
}
.footer-address strong {
font-weight: bold;
color: #465055;
}
.footer-address a {
color: #465055;
text-decoration: none;
transition: 0.3s;
}
.footer-address a:hover {
color: #aaa;
}
.footer-links{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top: 20px;
}
.footer-links a{
    text-decoration:none;
    color:#465055;
    font-size:14px;
}
.footer-links a:hover{
    color: #aaa;
}
/*--RIGHT--*/
.footer-right{
    border-left:2px solid #465055;
    padding-left:70px;
    min-width:320px;
}
.footer-item{
    margin-bottom:35px;
}
.footer-label{
    font-size:12px;
    margin-bottom:8px;
}
.footer-text{
    font-size:12px;
    line-height:1.6;
}
.back-to-top{
width:40px;
height:40px;
background:#82beff;
color:#465055;
display:flex;
align-items:center;
justify-content:center;
font-size:15px;
text-decoration:none;
transition:0.3s;
}
.back-to-top:hover{
background:#465055;
color:#f5f5f0;
transform:translateY(-5px);
}

 /*----首頁----*/
.home-content{
    text-align: center;
    margin-top: 40px;
    margin-bottom: 80px;  
}
.home-content img{
    display:block;
    margin:0 auto 40px auto;
}
.home-content .button{
    display:inline-block;
    margin:10px;
}
.footer{
    padding:40px 0;
    margin-top:60px;   
}

/*----section----*/
.section{
padding:100px 0;
}
.section h2{
font-size:40px;
color: #465055;
text-align:center;
margin-bottom:30px;
}
.section h3{
font-size :20px;
color: #465055;
text-align:center;
margin-bottom:40px;
margin-top:-25px;
}
.section h4{
font-size :35px;
color: #465055;
margin-top: 50px;
margin-bottom: 30px;
font-weight: bold;
text-align:center;
}
.section h5{
font-size:40px;
color: #465055;
text-align:center;
margin-bottom:30px;
}
.section p1{
display:block;
max-width:800px;
margin:0 auto 30px auto;
font-size:15px;
color:#465055;
line-height:1.6;
text-align: justify;
}
.section-white{
background:#ffffff;
}
.section-gray{
background:#f5f5f0;
}

/*----home----*/
.hero{
width: 100%;
}
.hero img{
  width: 100%;
  height: auto;
  display: block;
}
.hero-content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #f5f5f0;
}
.hero h1{
font-size:48px;
color: #465055;
margin-bottom:40px;
}
.hero-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}
.hero-menu{
display:flex;
width:100%;
background:#aaa;
margin-top:0px;
position:relative;
z-index:10;
}
.hero-menu a{
flex:1;
text-align:center;
padding:25px 0;
text-decoration:none;
color:#f5f5f0;
font-size:18px;
}
.hero-menu a:hover{
background:#dcdcdc;
color:#465055;
}
.news-layout{
display:flex;
gap:80px;
}
.news-left{
width:300px;
}
.news-left h2{
font-size:40px;
margin-bottom:20px;
}
.news-sub{
display:flex;
align-items:center;
gap:20px;
margin-bottom:40px;
}
.square{
width:10px;
height:10px;
background:#aaa;
display:inline-block;
}
.news-right{
flex:1;
display:flex;
flex-direction:column;
gap:30px;
}
.news-item{
position:relative;
background:#dcdcdc;
padding:40px;
display:flex;
justify-content:space-between;
align-items:center;
text-decoration:none;
color:#465055;
transition:0.3s;
}
/* .news-item:hover{
background:#aaa;
}*/
.news-text h3{
font-size:20px;
margin-bottom:10px;
text-align: left !important;
}
.news-text .date{
font-size:14px;
}
.arrow {
background: #465055;
color: #f5f5f0;
width: 40px;
height: 40px;
flex-shrink: 0; 
flex-grow: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: 0.3s;
align-self: center; 
}
.news-item:hover .arrow{
background:#82beff;
color: #465055;
transform:translateX(5px);
}
/*----speakers----*/
.slide {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}
.slide ul {
display: flex;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
transition: transform 0.5s ease;
}
.slide li {
list-style: none;
min-width: 100%;
height: 100%;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
/*----委員----*/
.people-section{
width:90%;
margin:auto;
margin-top: -20px;
}
.people-wrapper{
display:flex;
gap:30px;
overflow-x:auto;
scroll-behavior:smooth;
padding:20px 0;
}
.people-wrapper::-webkit-scrollbar{
display:none;
}
.person-card{
min-width:300px;
border:1px solid #aaa;
padding:20px;
background:white;
}
.person-card img{
width:100%;
height:200px;
object-fit:cover;
}
.date{
margin-top:15px;
font-size:14px;
color:#666;
}
.person-card h3{
margin-top:10px;
font-size:18px;
}
/* controls */
.slide {
  max-width: 800px;
  margin: 0 auto;
  height: auto;
  overflow: visible; 
}
.slide ul {
  display: block;
  padding: 0;
  margin: 0;
}
.slide li {
  list-style: none;
  margin-bottom: 30px; 
}
.slide img {
  width: 100%;
  height: auto;
  display: block;
}
.slider-controls {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 10px;
width: 100%;
}
.slider-controls button {
width: 50px;
height: 50px;
border: none;
background: #465055;
color: #f5f5f0;
margin-bottom: 30px;
font-size: 24px;
cursor: pointer;
transition: 0.3s;
}
.slider-controls button:hover {
background: #f5f5f0;
color: #465055;
transform: translateY(5px);
}
/*----papers----*/
.subthemes-section {
    padding: 20px 0 100px;
    background-color: #fff;
}
.themes-grid {
    display: grid;
    grid-template-columns: repeat(4, 2fr); 
    gap: 15px;
    margin-top: 20px;
}
.theme-item {
    background: #f5f5f0; 
    color: #465055;
    padding: 25px 15px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 500;
    border: 1px solid #dcdcdc;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.full-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; 
    width: 100%;
    max-width: 860px;
    margin: 40px auto;
    padding: 0 4%;
}
.grid-item {
    width: calc(50% - 15px); 
    display: flex;
    flex-direction: column;
    background: #fff;
    margin-bottom: 30px;
    box-sizing: border-box;
    border: 1px solid #eeeeee; 
}
.grid-item img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}
.grid-text {
    padding: 25px;
    text-align: justify;
}
.grid-text .small {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 8px;
}
.grid-text h4 {
    font-size: 18px;
    margin: 0 0 12px 0;
    font-weight: bold;
    text-align: left; 
}
.grid-text p {
    font-size: 13.5px;
    line-height: 1.7;
    color: #555;
}
/*----交通----*/
.transport{
padding-top:100px;
}
.transport-title{
font-size:30px;
margin-bottom:50px;
}
.transport-item{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:35px;
}
.transport-left h3{
font-size:20px;
margin-bottom:10px;
text-align: left;
}
.transport-left p{
font-size:14px;
line-height:1.6;
text-align: left;
}
.transport-btn{
background:#465055;
color:#f5f5f0;
padding:12px 25px;
text-decoration:none;
font-size:14px;
transition:0.3s;
}
.transport-btn:hover{
background:#dcdcdc;
color:#465055;
}
.transport-line{
border:none;
border-top:1px solid #dcdcdc;
margin:60px 0;
}
.transport-image {
width: 100%;
height: auto;
background: none;
margin: 40px 0;
margin-bottom: 60px;
}
.transport-subtitle{
font-size:30px;
font-weight: bold;
margin:50px 0 20px;
margin-top: 100px;
}
.taxi-grid{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:40px;
margin-bottom:60px;
}
.taxi-item{
text-align:center;
position:relative;
}
.taxi-item:not(:last-child)::after{
content:"";
position:absolute;
right:-20px;
top:10px;
width:1px;
height:60px;
background:#aaa;
}
.drive-info p{
line-height:1.8;
font-size: 14px;
text-align: center;
}
.drive-info p1{
line-height:1.8;
font-size: 14px;
text-align: center;
}
.transport-map iframe{
width:100%;
height:400px;
border:0;
}

/*---- Fee ----*/
.registration-container {
    
    color: #465055;
    text-align: left;
}
.reg-table {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    border-top: 3px solid #465055;
}
.reg-table > div {
    padding: 25px 20px;
    border-bottom: 1px solid #dcdcdc;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Header Styles */
.reg-header-title {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.2;
}
.reg-header-title .sub-title {
    display: block;
    font-size: 16px;
    margin-top: 5px;
}
.reg-header-box {
    background-color: #465055;
    color: #f5f5f0;
}
.reg-header-box .header-main {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 8px;
}
.reg-header-box .header-main .zh {
    font-size: 16px;
    margin-left: 5px;
}
.reg-header-box .header-period {
    font-size: 12px;
    line-height: 1.4;
    opacity: 0.9;
}
.col-label {
    font-size: 13px;
    font-weight: bold;
    background: #eeeeee;
    padding: 10px 20px !important;
}
.row-category {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
}
.zh-small {
    font-size: 14px;
    font-weight: normal;
}
.price-cell .currency {
    font-size: 12px;
    margin-bottom: 5px;
}
.price-cell .amount {
    font-size: 36px;
    font-weight: bold;
    display: flex;
    align-items: baseline;
}
.price-cell .unit {
    font-size: 14px;
    margin-left: 8px;
    font-weight: normal;
}
.price-free {
    font-size: 20px;
    font-weight: bold;
}

/* Note Section */
.reg-note {
    margin-top: 20px;
    font-size: 13px;
    line-height: 1.6;
    color: #888;
}

/*----日程----*/
.date-content img {
display: block;
margin: 40px auto; 
width: 100%; 
max-width: 900px; 
height: auto;
}

.menu-toggle, .hamburger {
display: none;
}

.reg-btn-container {
text-align: center; 
margin-top: 40px;
}
.reg-large-btn {
display: inline-block;
width: 100%;
max-width: 400px;
font-size: 1.25rem;
font-weight: bold;
letter-spacing: 2px;
background: #465055;
color: #f5f5f0;
padding: 20px 0;
transition: 0.3s;
}
.reg-large-btn:hover {
background: #82beff;
color: #465055;
transform: translateY(-3px);
}

/* 手機版*/
@media (max-width: 768px) {
/* menu item */
.main-nav li {
width: 100%;
border-top: 1px solid #aaa;
}
body {
  padding-top: 60px;
}
/*Hero*/
.hero { 
display: block;
position: relative;
height: auto; 
background-size: cover; 
background-position: center;
}
.hero img{
  width: 100%;
  height: auto;
  display: block;
}
.hero-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.hero h1 {
font-size: 28px;
margin-bottom: 20px;
}
.hero-menu {
display: flex;
flex-wrap: wrap;
justify-content: center; 
gap: 10px;
width: 90%;
margin: 20px;
background: transparent; 
position: relative;
z-index: 10;
}
.hero-menu a {
flex: 0 0 calc(50% - 10px); 
background: #465055;
padding: 15px 0;
font-size: 16px;
text-align: center;
text-decoration: none;
color: #f5f5f0;
box-sizing: border-box;
}
.hero-menu a:hover, .hero-menu a:active {
background: #dcdcdc;
color: #465055;
}
/*Section*/
.section {
padding: 60px 20px;
}
.section h2 {
font-size: 24px;
}
/*News*/
.news-layout {
flex-direction: column;
gap: 30px;
}
.news-left {
width: 100%;
}
.news-text {
text-align: left;
width: 100%;
padding-right: 15px;
}
.news-item {
display: flex;
    justify-content: flex-end; 
}
.news-text h3{
text-align: left  !important;
}
/*Footer*/
.footer-container {
flex-direction: column;
gap: 40px;
}
.footer-right {
border-left: none;
padding-left: 0;
}
.back-to-top {
position: fixed;
right: 20px;
bottom: 20px;
}
nav.wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 3000;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
background: #dcdcdc;
height: 60px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
box-sizing: border-box;
}
.hamburger {
display: block;
order: 2;
cursor: pointer;
z-index: 4000;
padding: 10px 0;
position: fixed;
}
.hamburger span {
display: block;
width: 20px;
height: 3px;
background: #465055;
margin: 5px 0;
transition: 0.3s;
}
.main-nav {
display: flex; 
flex-direction: column;
position: fixed; 
top: 60px;
left: 0;
width: 250px;
height: calc(100vh - 60px);
background: #eeeeee;
transform: translateX(-100%); 
transition: transform 0.4s ease-in-out; 
z-index: 2000;
padding: 0; 
}
.main-nav li {
width: 100% !important; 
list-style: none;
border-bottom: 1px solid #ccc; 
}
.main-nav a {
display: flex; 
justify-content: center;
align-items: center;
height: 60px; 
width: 100%;
text-decoration: none;
box-sizing: border-box;
}
.main-nav li:last-child {
border-bottom: none;
}
.logo {
margin: 0; 
width: auto;
}
.main-nav .logo {
display: none;
}
.menu-toggle:checked ~ .main-nav {
display: flex;
transform: translateX(0);
}
.menu-toggle {
display: none;
}
.menu-toggle:checked ~ .hamburger span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
.menu-toggle:checked ~ .hamburger span:nth-child(2) { opacity: 0; }
.menu-toggle:checked ~ .hamburger span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }
.scroll-section {
height: 120vh; 
}
.themes-grid {
grid-template-columns: 1fr; 
gap: 10px;
} 
.theme-item {
font-size: 1rem;
padding: 12px 10px;
text-align: left; 

}
.slide {
margin-bottom: 30px; 
}
.slider-controls {
display: none;
}
.full-grid {
display: flex;
flex-direction: column; 
align-items: center;   
gap: 30px;
width: 100%;
max-width: 100%;     
padding: 0;           
margin: 40px 0;
}
.grid-item {
width: 75%; 
margin: 0 auto 30px auto;
border-bottom: none; 
}
.grid-item img {
height: 200px; 
}
.grid-text {
padding: 20px; 
}
.grid-text p {
font-size: 15px; 
text-align: justify; 
}
.p1 {
display: block; 
line-height: 1.8;
text-align: justify;
}
.transport-item {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.transport-btn {
width: 100%;
text-align: center;
box-sizing: border-box;
}
.transport-line {
margin: 30px 0;
}
.taxi-grid {
grid-template-columns: 1fr; 
gap: 20px;
margin-bottom: 80px;
}
.taxi-item {
padding: 15px;
background: #f9f9f9;
border-bottom: 1px solid #ddd;
}
.taxi-item:not(:last-child)::after {
display: none;
}
.transport-image {
width: 100%;
height: auto;
margin: 40px 0;
margin-top: -20px;
margin-bottom: 80px;
}
.transport-map iframe {
height: 300px;
}
.person-card {
min-width: 260px; 
}
.main-nav .zh {
font-size: 15px;
}
.date-content img {
margin: 20px auto;
max-width: 100%;
}
.reg-table {
grid-template-columns: 1fr 1fr;
gap: 0;
border: 1px solid #dcdcdc;
}
.reg-header-title {
grid-column: span 2;
text-align: center;
background: #fff;
}
.row-category {
grid-column: span 2;
background-color: #eeeeee;
text-align: center;
padding: 10px !important;
font-size: 16px;
border-top: 2px solid #465055;
}
.price-cell, .price-free {
text-align: center;
padding: 15px 5px !important;
background: #fff;
position: relative;
}
.price-cell::before, .price-free::before {
content: attr(data-label); 
display: block;
font-size: 10px;
color: #888;
margin-bottom: 5px;
font-weight: bold;
text-transform: uppercase;
}
.price-cell .amount {
font-size: 28px;
justify-content: center;
}
.reg-header-box {
display: none;
}
.desktop-only-label {
display: none !important;
}

.reg-btn-container {
        margin-top: 30px;
        padding: 0 10px;
    }
    .reg-large-btn {
        max-width: 100%; 
        font-size: 1.1rem;
        padding: 15px 0;
    }
}