:root {
    --primary-blue: #004b87; /* Classic university blue */
    --menu-btn-bg-mobile: #d2b07b; /* Tan/brown color for mobile menu button */
    --text-white: #ffffff;
    --hover-color: #e0e0e0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a:hover {
	text-decoration: none;
	/* font-family: 黑体; */
}

ul,
ol {
	list-style: none;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Header Base */
.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    height: 90px;
    /* Use gradient background matching the image: dark at top fading to transparent */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
    position: relative;
    border-bottom: none; /* Remove border to match the seamless gradient look */
}

/* Logo Area */
.logo {
    display: flex;
    align-items: center;
    height: 100%;
}

.logo-img {
    height: 55px; /* Adjust based on original header height */
    width: auto;
    object-fit: contain;
}

/* Desktop Navigation */
.desktop-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 0 20px;
}

.nav-list {
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-list li {
    position: relative;
}

.nav-list li a {
    color: var(--text-white);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.3s, text-shadow 0.3s;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Text clear and readable */
    display: block;
    padding: 10px 0;
}

.nav-list li a:hover {
    color: var(--hover-color);
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

/* Desktop Dropdown Menu */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff; /* White background */
    min-width: 140px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Softer shadow */
    list-style: none;
    padding: 0 0 10px 0; /* Adjust padding for top border */
    z-index: 1000;
    text-align: center;
    border-radius: 0 0 8px 8px; /* Rounded bottom corners */
    border-top: 3px solid #d2b07b; /* Tan/brown top border matching mobile menu btn */
}

.dropdown:hover .dropdown-menu {
    display: block;
    animation: fadeIn 0.3s ease;
}

.dropdown-menu li {
    width: 100%;
}

.dropdown-menu li a {
    padding: 12px 20px;
    font-size: 15px;
    color: #666666; /* Gray text color */
    text-shadow: none;
    border-bottom: none; /* Remove separator lines */
}

.dropdown-menu li:last-child a {
    border-bottom: none;
}

.dropdown-menu li a:hover {
    background-color: rgba(0,0,0,0.05); /* Slight gray hover */
    color: var(--primary-blue); /* Change text color on hover */
    text-shadow: none;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* Right side menu button */
.header-right {
    display: flex;
    align-items: center;
}

/* Mobile Nav Hidden State */
.mobile-nav {
    display: none;
    background-color: var(--primary-blue);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.mobile-nav.active {
    display: block;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.mobile-nav-list {
    list-style: none;
}

.mobile-nav-list li a {
    display: block;
    color: var(--text-white);
    text-decoration: none;
    padding: 15px 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 16px;
}

.mobile-nav-list li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Mobile Dropdown */
.mobile-dropdown-toggle {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}

.mobile-dropdown-toggle .arrow {
    font-size: 12px;
    transition: transform 0.3s;
}

.mobile-dropdown.open .arrow {
    transform: rotate(180deg);
}

.mobile-dropdown-menu {
    display: none;
    list-style: none;
    background-color: #003666; /* Darker blue for submenu */
}

.mobile-dropdown.open .mobile-dropdown-menu {
    display: block;
}

.mobile-dropdown-menu li a {
    padding: 12px 25px 12px 40px !important; /* Indent for submenu items */
    font-size: 15px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

/* Banner/Carousel */
.banner {
    position: relative;
    width: 100%;
    height: auto;
    /* Use aspect-ratio to ensure the container scales proportionally with the window. 
       Adjust 1920/500 to match the exact aspect ratio of your "lunbo.png" if different. */
    aspect-ratio: 1920 / 500; 
    overflow: hidden;
    background-color: #000;
}

/* Remove banner overlay as header gradient handles the top */
.banner-overlay {
    display: none;
}

.carousel {
    width: 100%;
    height: 100%;
}

.carousel-inner {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-out;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.carousel-inner:active {
    cursor: grabbing;
}

.carousel-item {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    /* Removed background styles as we are using img tags now */
}

.carousel-item img {
    width: 100%;
    height: 100%;
    /* In order for the image to not be deformed (stretched/squished) and scale perfectly with the container's aspect ratio, 
       we use object-fit: cover and object-position: center. 
       If the container's aspect ratio exactly matches the image's aspect ratio, the image will be fully visible without cropping. */
    object-fit: cover; 
    object-position: center;
    display: block;
    pointer-events: none;
}

.carousel-indicators {
    position: absolute;
    bottom: 40px;
    right: 40px;
    display: flex;
    gap: 12px;
    z-index: 20;
}

.carousel-indicators .indicator {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--text-white);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    backdrop-filter: blur(4px);
}

.carousel-indicators .indicator:hover {
    background: rgba(255, 255, 255, 0.6);
}

.carousel-indicators .indicator.active {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    font-weight: 600;
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    display: none; /* Hide by default, header gradient handles top */
}

.banner-content {
    position: absolute;
    top: 50%;
    left: 80px;
    transform: translateY(-30%);
    color: var(--text-white);
    z-index: 10;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.banner-title {
    font-size: 54px;
    font-weight: 600;
    margin-bottom: 15px;
    letter-spacing: 4px;
}

.breadcrumb {
    font-size: 15px;
    display: flex;
    align-items: center;
    opacity: 0.9;
}

.breadcrumb a {
    color: #000;
    text-decoration: none;
    transition: opacity 0.3s;
}

.breadcrumb a:hover {
    opacity: 0.7;
}

.breadcrumb .separator {
    margin: 0 10px;
    font-size: 12px;
}

/* Responsive Design */

/* Desktop Specific */
@media (min-width: 992px) {
    .menu-btn {
        display: none; /* Hide hamburger menu on desktop */
    }
    
    .header-container {
        /* Ensure header scales slightly or remains centered on very large screens if needed, 
           but usually percentage padding is better. We'll keep it fixed for now, 
           but we can adjust if the nav items overlap. */
    }
}

/* Mobile Specific */
@media (max-width: 991px) {
    .header-container {
        padding: 0 0 0 15px;
        height: 70px;
        background: var(--primary-blue); /* Solid blue on mobile */
        border-bottom: none;
    }

    .logo, .header-right {
        z-index: 1;
    }

    .desktop-nav {
        display: none;
    }

    .logo-img {
        height: 40px;
    }

    .menu-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 70px;
        height: 70px;
        background-color: var(--primary-blue); /* Match navigation color */
        border: none;
        cursor: pointer;
        gap: 6px;
        border-radius: 0; /* Remove rounded corners to match the flat header style */
        transition: background-color 0.3s;
    }

    .menu-btn:active {
        background-color: #003666; /* Darker blue when clicked */
    }

    .menu-btn .bar {
        width: 28px;
        height: 3px;
        background-color: var(--text-white);
        transition: 0.3s;
        border-radius: 2px;
    }

    /* Animate menu button on active */
    .menu-btn.open .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .menu-btn.open .bar:nth-child(2) {
        opacity: 0;
    }
    .menu-btn.open .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .header {
        position: fixed; /* Keep header fixed at top on mobile */
    }

    .banner {
        height: auto;
        /* Change aspect ratio to roughly match the provided image dimensions (e.g. 1000x250 -> 4/1) */
        aspect-ratio: 4 / 1; 
        min-height: 100px; /* Allow it to be smaller on very narrow mobile screens */
        margin-top: 70px; /* Push banner down so it starts exactly below the mobile header (which is 70px tall) */
    }

    .carousel-item img {
        object-fit: cover; 
    }

    .banner-overlay {
        display: none; /* Hide overlay so image is fully visible and not darkened */
    }

    .banner-content {
        left: 20px;
        top: 55%;
        transform: translateY(-50%);
    }

    .banner-title {
        font-size: 32px;
        letter-spacing: 2px;
    }

    .breadcrumb {
        font-size: 13px;
    }

    .carousel-indicators {
        bottom: 10px; /* Bring indicators up slightly since the banner is shorter */
        right: 15px;
        gap: 6px;
    }

    .carousel-indicators .indicator {
        width: 24px; /* Make indicators smaller to fit the short banner */
        height: 24px;
        font-size: 10px;
    }
}
/* 底部 */
footer {
	width: 100%;
	height: 120px;
	background-color: #0082c9;
	margin-top: 50px;
	padding: 10px 0;
	font-family: 黑体;
}

footer .all {
	color: #fff;
}

footer .text {
	text-align: center;
	/*line-height: 2.5rem;*/
	margin-top: 20px;
}