/* reset & base */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: Arial, sans-serif; line-height:1.6; color:#333; }
/* 容器 */
.container_header { width:100%; max-width:100000px; margin:0 auto; }

.container { width:80%; max-width:2000px; margin:0 auto; padding:0 1em; }

/* header */
header { background:#fff; padding:1em 0; box-shadow:0 2px 5px rgba(0,0,0,0.1); }
header .logo { float:left; color:#1976D2; } /* 原 #77DD77 改藍色 */
header a { float:right; margin-left:0.5em; color:#1565C0; text-decoration:none; }
/* hero */
.hero {
    background: url('title_bkgd.jpg') center center/cover no-repeat;
    padding: 5em 0;
    text-align: center;
}
.hero h2 { font-size:3rem; color:#ffffff; margin-bottom: 1.5em;}
.hero p { margin:1em 0; }
.btn { background:#1976D2; color:white; padding:0.8em 6em; text-decoration:none; border-radius:4px; }

.hero_res {
    background: #006d7c;
    padding: 1em 0;
    text-align: center;
}

.hero_res h2 { font-size:4rem; color:#ffffff; margin-bottom: 0.1em;}
.hero_res p { margin:1em 0; }

/* sections*/
section { padding:3em 0; }
h3 { margin-bottom:1em; color:#1976D2; } 
/* 關於我們標題置中與放大 */
h3.title {
    text-align: center;
    font-size: 2.2rem;
    color: #1976D2; 
}
.about_nav {
    text-align: center;
    margin-top: 2em;
    font-size: 1.5rem;
}
.about_nav .btn {
    margin: 0 0.5em;
}

a.header{
    font-size: 1.5rem;
    color: #555;
}

p.header{
    text-align: left;
    font-size: 1.2rem;
    color: #fff;
}

p.whiteContent {
    text-align: center;
    font-size: 1.2rem;
    color: #fff;
    margin-top: 1em;
}

/* grid cards */
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:1.5em;}
.card { background:#fff; padding:1em; border-radius:6px; box-shadow:0 2px 5px rgba(0,0,0,0.1); text-align:center;}
.card img { width:100%; height:auto; border-radius:50%; }
/* contact form */
form { display:grid; gap:1em; }
form input, form textarea { padding:0.8em; border:1px solid #ccc; border-radius:4px; width:100%; }
form button { background:#1976D2; color:#fff; padding:0.8em; border:none; border-radius:4px; cursor:pointer; }
form button:hover { background:#1565C0; }
/* footer */
footer { background:#f4f4f4; text-align:center; padding:1em 0;}

p.content{
    text-align: center;
    font-size: 1rem;
    color: #555;
}

header .dropdown {
    float: right;
    position: relative;
}
header .dropbtn {
    margin-left: 1em;
    color: #555;
    text-decoration: none;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
}
header .dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    min-width: 160px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1;
}
header .dropdown-content a {
    color: #555;
    padding: 0.8em 1em;
    text-decoration: none;
    display: block;
    text-align: left;
}
header .dropdown-content a:hover {
    background: #f4f4f4;
}
header .dropdown:hover .dropdown-content {
    display: block;
}

section {
    padding: 4em 0;
    margin-bottom: 3em; /* 增加每個 section 之間的間距 */
}

.header_anch {
    background: #1976D2;
    padding: 0.5em 0;
    width: 100%;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 讓左側不動，右側往右 */
}

.header-links {
    margin-left: auto;
    display: flex;
    /* gap: 0.1em;  <-- 移除這行 */
}

.header-links a.header {
    color: #fff;
    background: transparent;
    padding: 0.5em 1.2em;
    font-size: 1.2rem;
    text-decoration: none;
    transition: background 0.2s;
    border-radius: 0;
    box-sizing: border-box;
    margin: 0 0.2em; /* 用 margin 取代 gap，避免 hover 被切 */
}

.header-links a.header.active {
    background: #fff;
    color: #1565C0;
}

.header-links a.header:hover {
    background: #fff;
    color: #1565C0;
}

.header-lab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 3em;
}

.lab-en {
    font-size: 1rem;
    color: #fff;
    letter-spacing: 2px;
}

.lab-name {
    font-size: 1.2rem;
    color: #fff;
    margin-top: 0.2em;
    margin-left: 1em;
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    letter-spacing: 1px;
}

.header_anch p.header {
    margin-left: 1em;
    color: #fff;
    background: transparent;
    padding: 0.5em 1.2em;
    font-size: 2rem;
    text-align: left;
    flex: 1;
}

.header_anch a.header {
    color: #fff;
    background: transparent;
    margin-left: 0em;
    margin-right: 2em;
    padding: 0.5em 1.2em;
    font-size: 1.2rem;
    text-decoration: none;
    transition: background 0.2s;
    display: inline-block;
}

.about-flex {
    display: flex;
    align-items: center;
    gap: 20em;
    padding-right: 10vw; /* 向右偏移，可調整數值 */
}
.about-img {
    width: 260px;
    max-width: 40vw;
    margin-left: 18em;
    border-radius: 628px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    object-fit: cover;
}
.about-flex .content {
    text-align: left;
    font-size: 1.2rem;
    color: #555;
}
.about-img-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.about-img-caption {
    margin-top: 0.7em;
    font-size: 1rem;
    margin-left: 18em;
    color: #555;
    text-align: center;
}

.feature-list-section {
    padding: 2em 0 1em 0;
}
.feature-list {
    list-style-type: disc;
    padding-left: 2em;
    margin: 0;
    color: #1976D2;
    font-size: 1.2rem;
    text-align: left;
}
.feature-list li {
    margin-bottom: 0.7em;
}

.research-item {
    margin-bottom: 2.5em;
}

.research-item h3 {
    font-size: 3rem;
    color: #000;
    margin-top: 2em;
    margin-bottom: 2em;
    text-align: center;
}

h3.past{
    text-align: center;
    font-size: 3rem;
    color: #000; 
    margin-top: 2em;
}

.research-item h4 {
    color: #000;
    margin-bottom: 1em;
    margin-top: 2em;
    font-size: 1.8rem;
    text-align: center;
}

.research-flex {
    display: flex;
    align-items: flex-start;
    gap: 5em;
    justify-content: center;
}

.research-img {
    width: 450px;
    max-width: 108vw;
    border-radius: 0px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.research-desc {
    font-size: 1.1rem;
    color: #555;
    text-align: left;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.research-desc p.select {
    color: #000;
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-size: 1.3rem;
}

.research-desc a.link {
    color: #000;
    margin-top: 1em;
    margin-bottom: 0.5em;
    margin-left: 0.7em;
    font-size: 1.1rem;
}

.see-more-btn {
    background: #1976D2;
    color: #fff;
    border: none;
    padding: 0.3em 1em;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 0.5em;
}

.research-more {
    display: block;
    max-height: 0em; /* 約兩行高度，依字體大小微調 */
    overflow: hidden;
    transition: max-height 0.4s;
    position: relative;
}

.research-summary {
    display: block;
    max-height: 3.2em; /* 約兩行高度，依字體大小微調 */
    overflow: hidden;
    transition: max-height 0.4s;
    position: relative;
}

.research-more.expanded {
    max-height: 1000px; /* 足夠大即可，展開全部內容 */
    transition: max-height 0.4s;
}

.research-summary.expanded {
    max-height: 1000px; /* 足夠大即可，展開全部內容 */
    transition: max-height 0.4s;
}

.research-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5em;
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.filter-dropdown {
    position: relative;
}

.filter-dropdown .dropbtn {
    color: #1976D2;
    background: #fff;
    border: 1px solid #1976D2;
    border-radius: 4px;
    padding: 0.5em 1.5em;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background 0.2s;
}

.filter-dropdown .dropbtn:hover {
    background: #1976D2;
    color: #fff;
}

.filter-dropdown .dropdown-content {
    display: none;
    position: absolute;
    top: 110%;
    left: 0;
    background: #fff;
    min-width: 180px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 10;
}

.filter-dropdown .dropdown-content a {
    color: #1976D2;
    padding: 0.8em 1em;
    text-decoration: none;
    display: block;
    text-align: left;
}

.filter-dropdown .dropdown-content a:hover {
    background: #1976D2;
    color: #fff;
}

.filter-dropdown:hover .dropdown-content {
    display: block;
}

@media (max-width: 1400px) {
    .research-flex {
        flex-direction: column;
        gap: 1em;
    }
    .research-img {
        width: 600px;
        max-width: 100%;
        margin: 0 auto;
    }
}

.footer-gap {
    height: 6em;
}

.lab-photo-section {
    text-align: center;
    margin-bottom: 3em;
}
.lab-main-photo {
    width: 80%;
    max-width: 600px;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    margin-bottom: 1em;
}
.lab-photo-caption {
    font-size: 1.1rem;
    color: #555;
    margin-top: 0.2em;
    margin-bottom: 5em;
}

.header-lab-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    cursor: pointer;
}
.header-lab-link:hover .lab-en,
.header-lab-link:hover .lab-name {
    text-decoration: none;
    opacity: 0.8;
}

.reference-list {
    margin-top: 1em;
    padding-left: 1.5em;
    color: #000;
    font-size: 1rem;
}
.reference-list li {
    margin-bottom: 0.5em;
}

.teaching-title {
    text-align: left;
    font-size: 3rem;
    color: #000;
    margin-bottom: 1em;
}
.teaching-list {
    max-width: 1200px;
    margin: 0 auto 2em auto;
    font-size: 1.5rem;
    color: #000;
    list-style-type: disc;
    padding-left: 1em;
}
.teaching-list li {
    margin-bottom: 0.7em;
}

.research-additional a.link {
    color: #000;
    margin-top: 1em;
    margin-bottom: 0.5em;
    margin-left: 0.7em;
    font-size: 1.8rem;
}

/* 手機響應式 */
@media (max-width: 700px) {
    .container {
        width: 98%;
        padding: 0 0.5em;
    }
    .about-flex {
        flex-direction: column;
        gap: 1em;
        padding-right: 0;
    }
    .about-img {
        width: 90vw;
        max-width: 70%;
        margin-left: 0;
    }
    .about-img-caption {
        margin-left: 0;
    }
    .header-lab {
        margin-left: 0;
        align-items: center;
        padding-bottom: 0.7em;
    }
    .header-links {
        margin-left: 0;
        margin-right: 0;
        justify-content: center;
        padding-top: 0.7em;
        border-top: none;
        display: flex;
        flex-direction: row;
    }
    .header-links a.header {
        flex: 1 1 0;
        text-align: center;
        font-size: 1.1rem;
        padding: 0.7em 0.2em;
        margin: 0 0.2em; /* 用 margin 取代 gap */
    }
    .lab-name {
        text-align: center;
    }
    .hero h2 {
        font-size: 2rem;
    }
    .btn {
        padding: 0.8em 2em;
        font-size: 1rem;
    }
    .header_anch {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .teaching-title {
        text-align: center;
        font-size: 2.5rem;
        color: #000;
        margin-bottom: 1em;
    }

    .teaching-list {
        font-size: 1.25rem;
        margin-left: 1em;
    }
    .filter-dropdown .dropbtn {
        font-size: 1.1rem;
    }

}