* {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    .text-white {
        color: #fff !important;
    }
    :root {
        --background-color: linear-gradient(to right,rgb(14, 22, 37) 0%, rgb(9, 24, 57),rgb(2, 2, 12) 100%);
    }
    
    .row {
        margin-left: -8px;
        margin-right: -8px;
        padding-bottom: 8px;
    }
    
    .row::after {
        content: "";
        display: block;
        clear: both;
    }
    
    .col {
        float: left;
        padding-left: 8px;
        padding-right: 8px;
    }
    
    .col-half {
        width: 50%;
    }
    
    .col-full {
        width: 100%;
    }
    
    .col-third {
        width: 33.3333%;
    }
    
    .clear {
        clear: both;
    }
    
    html {
        scroll-behavior: smooth;
    }
    
    html,
    body {
        font-family: Helvetica, sans-serif;
        line-height: 1.5;
        ;
        overflow-x: hidden;
        /* Ẩn thanh cuộn ngang */
    }
    /* vị trí, kích thước, màu sắc, kiểu dáng */
    /* ngoài vào trong, trên xuống dưới, tổng quan tới chi tiết*/
    
    #main1 {}
    
    #header {
        height: 54px;
        background-color: #000000c9;
        position: fixed;
        z-index: 1; 
        top: 0;
        right: 0;
        left: 0;
    }
    
    
    .nav_pc {
        backdrop-filter: blur(10px); 
        -webkit-backdrop-filter: blur(10px);
    }
    .nav_bars-btn {
        display: none;
    }
    .nav_overlay_mobile {
        display: none;

    }


    .nav_overlay_mobile {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 300px;
        max-width: 100%;
        background-color: #000;
        background-image: url('/assets/img/hoyoverse-logo-poster.png');
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: bottom;
        opacity: 0.9;
        /* transform: translateX(-100%);
        transition: transform linear 0.5s; */
    }
    .nav_mobile {
        margin-top: 16px;
       opacity: 0.9;
      
    }
    .nav_mobile li a {
       
        text-decoration: none;
        display: block;
        color: #fff;
        padding: 8px 24px ;
        font-size: 1.4rem;
    }
 
    .nav_input_mobile:checked ~ .nav_overlay_mobile {
        display: block;
        /* transform: translateX(0); */
        animation: fadeIn linear .5s;
        /* opacity: 0.9; */
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }   
    #nav {
        display: inline-block;
    }
    
    #nav,
    .subnav {
        list-style-type: none;
    }
    
    #nav>li {
        display: inline-block;
    }
    
    #nav li {
        position: relative;
    }
    
    #nav>li>a {
        color: #fff;
        text-transform: uppercase;
    }
    
    #nav li a {
        text-decoration: none;
        line-height: 54px;
        padding: 0 24px;
        display: inline-block;
    }
    
    #nav li:hover .subnav {
        display: block;
    }
    
    #nav>li:hover>a,
    #nav .subnav li:hover {
        background-color: #ccc;
        color: #000;
    }
    
    #nav .subnav {
        display: none;
        background-color: #fff;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 160px;
        box-shadow: 0 0 12px rgba(10, 10, 10, 0.8);
    }
    
    #nav .subnav a {
        color: #000;
        padding: 0 12px;
    }
    
    #nav .nav-arrow-down {
        font-size: 12px;
    }
    .search-btn {
        transform: translateY(-46px);
    }
    #header .search-btn:hover {
        background-color: #da0000;
    }
    
    .form button {
        border: none;
        background: none;
        color: #8b8ba7;
    }
    
    .search.open {
        display: flex;
    }
    
    .search {
        display: none;
    }
    
    .search-container {
        float: right;
        padding: 2px;
    }
    
    .form {
        --timing: 0.3s;
        --width-of-input: 200px;
        --height-of-input: 40px;
        --border-height: 2px;
        --input-bg: #fff;
        --border-color: #2f2ee9;
        --border-radius: 30px;
        --after-border-radius: 1px;
        position: relative;
        width: var(--width-of-input);
        height: var(--height-of-input);
        display: flex;
        align-items: center;
        padding-inline: 0.8em;
        border-radius: var(--border-radius);
        /* transition: border-radius 0.5s ease; */
        background: var(--input-bg, #fff);
    }
    
    .input {
        font-size: 0.9rem;
        background-color: transparent;
        width: 100%;
        height: 100%;
        padding-inline: 0.5em;
        padding-block: 0.7em;
        border: none;
    }
    
    .form:before {
        content: "";
        position: absolute;
        background: var(--border-color);
        transform: scaleX(0);
        transform-origin: center;
        width: 100%;
        height: var(--border-height);
        left: 0;
        bottom: 0;
        border-radius: 1px;
        transition: transform var(--timing) ease;
    }
    
    .form:focus-within {
        border-radius: var(--after-border-radius);
    }
    
    input:focus {
        outline: none;
    }
    
    .form:focus-within:before {
        transform: scale(1);
    }
    
    .reset {
        border: none;
        background: none;
        opacity: 0;
        visibility: hidden;
    }
    
    input:not(:placeholder-shown)~.reset {
        opacity: 1;
        visibility: visible;
    }
    
    .form svg {
        width: 17px;
        margin-top: 3px;
    }
    
    #header .search-btn {
        float: right;
        cursor: pointer;
    }
    
    #header .search-icon {
        color: #fff;
        font-size: 20px;
        padding: 21px;
        line-height: 46px;
    }
    .slider1 {
        position: relative;
        margin-top: 0;
        height: 54px;
        background-color: #0e151c;
    }
    .slider2 {
        position: relative;
        padding-top: 50%;
        width: 100%;
        background: url('/assets/img/slider.jpg') top center / cover no-repeat;
        padding-bottom: 80px;
    }
    
    #slider .text-content {
        position: absolute;
        bottom: 100px;
        padding: 0 40px;
        outline: 2px solid #222;
        color: #fff;
        background-color: rgba(10, 10, 10, 0.5);
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }
    
    #slider .text-heading {
        padding: 16px;
        font-size: 24px;
    }
    
    #slider .text-description {
        /* padding: 16px; */
        font-size: 15px;
    }
        iframe {
        width: 800px;
        height: 498px;
        overflow: hidden;
      } 
    #content {}
    
/* Overlay (nền đen) */
.overlay {
    display: none; /* Ẩn mặc định */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 2;
  }
  
  .overlay-content {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: auto;
    height: 80%;
    }

  .imgclose {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    font-size: 20px;
   
    cursor: pointer;
    z-index: 1000;
  }
 
  

    .content-section {
        width: 800px;
        padding: 60px 0;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    
    #content .section-heading {
        font-weight: 500;
        font-size: 30px;
        letter-spacing: 4px;
    }
    
    #content .section-subheading {
        margin-top: 25px;
        font-style: italic;
        opacity: 0.6;
        padding-bottom: 15px;
    }
    
    #content .about-text {
        margin-top: 25px;
        font-size: 15px;
        text-align: justify;
        line-height: 150%;
    }
    iframe {
        width: 800px;
        height: 498px;
    }
            
        
    #content .video {
        margin-top: 15px;
        left: 50%;
    }
    
    #content .member-lists {
        margin-top: 48px;
        overflow: hidden;
    }
    
    #content .member-items {
        float: left;
        width: 50%;
    }
    
    #content .member-items:hover {
        opacity: 0.6;
        cursor: pointer;
    }
    .member-avatar {
        transition: transform .6s ease; /* Thêm hiệu ứng chuyển đổi */
    }
    .member-avatar.clicked {
        transform: scale(1.1);
    }
    
    #content .member-items .member-avatar {
        max-width: 300px;
        margin-top: 30px;
        margin-bottom: 10px;
        border-radius: 4px;
        box-shadow: 10px 10px 10px rgba(101, 100, 100, 0.2); 
    }
    /* Tour section */
    
    .tour-section {
        background: var(--background-color);
    }
    
    .ticket-list li {
        list-style-type: none;
        color: #757575;
        font-size: 15px;
        padding: 11px 16px;
        border-bottom: 1px solid #ccc;
    }
    
    .ticket-list {
        margin-top: 4;
        background-color: #fff;
        text-align: left;
    }
    
    .ticket-list .sold-out {
        color: #fff;
        background-color: #f44446;
        padding: 3px 4px;
        margin-left: 16px;
    }
    
    .ticket-list .quantity {
        float: right;
        width: 24px;
        height: 24px;
        line-height: 24px;
        border-radius: 50%;
        background-color: #000;
        text-align: center;
        color: #fff;
        margin-top: -3px;
    }
    
    .place-list {
        margin-top: 32px;
        margin-bottom: 32px;
    }
    
    .place-img {
        width: 100%;
        height: 150px;
        padding-top: 16px;
        display: block;
        background-size: cover; /* Đảm bảo hình nền được bao phủ */
        background-position: center; /* Căn giữa hình nền */
    }
    .place-img.PicMondstadt {
        animation: ChangePicMondstadt 40s infinite;
        /* transition: background-image 1s ease-in-out; */
    }
    .place-img.PicLiyue {
        animation: ChangePicLiyue 160s infinite;
        /* transition: background-image 1s ease-in-out; */
    }
    .place-img.PicInazuma {
        animation: ChangePicInazuma 72s infinite;
        /* transition: background-image 1s ease-in-out; */
    }
    .place-img.PicSumeru {
        animation: ChangePicSumeru 208s infinite;
        /* transition: background-image 1s ease-in-out; */
    }
    .place-img.PicFontaine {
        animation: ChangePicFontaine 148s infinite;
        /* transition: background-image 1s ease-in-out; */
    }
    .place-img.PicNatlan {
        animation: ChangePicNatlan 56s infinite;
        /* transition: background-image 1s ease-in-out; */
    }

    
    @keyframes ChangePicMondstadt {
        0% {
            background-image: url('/assets/img/Mondstadt/Viewpoint_The_City_of_Wind.png');
        }
        10% {
            background-image: url('/assets/img/Mondstadt/Viewpoint_The_Marsh_of_Celestial_Guardians.png');
        }
        20% {
            background-image: url('/assets/img/Mondstadt/Viewpoint_Windswept_Wilderness.png');
        }
        30% {
            background-image: url('/assets/img/Mondstadt/Viewpoint_Land_of_Clear_Springs.png');
        }
        40% {
            background-image: url('/assets/img/Mondstadt/Viewpoint_Manor_of_Daybreak.png');
        }
        50% {
            background-image: url('/assets/img/Mondstadt/Viewpoint_Favonius_Cathedral.png');
        }
        60% {
            background-image: url('/assets/img/Mondstadt/Viewpoint_Knights_of_Favonius_-_Library.png');
        }
        70% {
            background-image: url('/assets/img/Mondstadt/Viewpoint_Ancient_Thousand_Winds_Temple.png');
        }
        80% {
            background-image: url('/assets/img/Mondstadt/Viewpoint_Forgotten_Sword_Cemetery.png');
        }
        90% {
            background-image: url('/assets/img/Mondstadt/Viewpoint_Abandoned_Capital_of_Howling_Winds.png');
        }
        100% {
            background-image: url('/assets/img/Mondstadt/Viewpoint_The_City_of_Wind.png');
        }
    }
    
    @keyframes ChangePicLiyue {
        0% {
            background-image: url('/assets/img/Liyue/Viewpoint_Where_Merchants_Flock_And_All_Ships_Dock.png');
        }
        2.5% {
            background-image: url('/assets/img/Liyue/Viewpoint_Feiyun_Slope.png');
        }
        5% {
            background-image: url('/assets/img/Liyue/Viewpoint_Chihu_Rock.png');
        }
        7.5% {
            background-image: url('/assets/img/Liyue/Viewpoint_Yujing_Terrace.png');
        }
        10% {
            background-image: url('/assets/img/Liyue/Viewpoint_Vigilant_Guardians_Vantage_Point.png');
        }
        12.5% {
            background-image: url('/assets/img/Liyue/Viewpoint_Marsh_of_Rustling_Reeds.png');
        }
        15% {
            background-image: url('/assets/img/Liyue/Viewpoint_Ruins_of_Guili.png');
        }
        17.5% {
            background-image: url('/assets/img/Liyue/Viewpoint_A_Home_in_the_Hills.png');
        }
        20% {
            background-image: url('/assets/img/Liyue/Viewpoint_Where_Mountains_Peak_Beyond_the_Clouds.png');
        }
        22.5% {
            background-image: url('/assets/img/Liyue/Viewpoint_Moonlit_Tree.png');
        }
        25% {
            background-image: url('/assets/img/Liyue/Viewpoint_Mist-Veiled_Stone_Forest.png');
        }
        27.5% {
            background-image: url('/assets/img/Liyue/Viewpoint_Weeping_Garden.png');
        }
        30% {
            background-image: url('/assets/img/Liyue/Viewpoint_A_Drop_in_the_Ocean.png');
        }
        32.5% {
            background-image: url('/assets/img/Liyue/Viewpoint_Beyond_the_Chasm.png');
        }
        35% {
            background-image: url('/assets/img/Liyue/Viewpoint_Dunyu_Ruins.png');
        }
        37.5% {
            background-image: url('/assets/img/Liyue/Viewpoint_Qingxu_Forsaken_Tower.png');
        }
        40% {
            background-image: url('/assets/img/Liyue/Viewpoint_Nine_Pillars_of_Peace.png');
        }
        42.5% {
            background-image: url('/assets/img/Liyue/Viewpoint_View_from_The_Chasm_Surface.png');
        }
        45% {
            background-image: url('/assets/img/Liyue/Viewpoint_Mouth_of_the_Great_Mine.png');
        }
        47.5% {
            background-image: url('/assets/img/Liyue/Viewpoint_The_Ancient_Battlefield_of_Fuao_Vale.png');
        }
        50% {
            background-image: url('/assets/img/Liyue/Viewpoint_The_Underground_Mines.png');
        }
        52.5% {
            background-image: url('/assets/img/Liyue/Viewpoint_The_Blocked_Path.png');
        }
        55% {
            background-image: url('/assets/img/Liyue/Viewpoint_Underground_Waterway.png');
        }
        57.5% {
            background-image: url('/assets/img/Liyue/Viewpoint_Crystal_Fragment.png');
        }
        60% {
            background-image: url('/assets/img/Liyue/Viewpoint_The_Inverted_City.png');
        }
        62.5% {
            background-image: url('/assets/img/Liyue/Viewpoint_The_Great_Mushroom_Place.png');
        }
        65% {
            background-image: url('/assets/img/Liyue/Viewpoint_The_Court_of_Pillars.png');
        }
        67.5% {
            background-image: url('/assets/img/Liyue/Viewpoint_Jade_Elegy_of_Bishui.png');
        }
        70% {
            background-image: url('/assets/img/Liyue/Viewpoint_The_Clouds_Cascade_Around_the_Wharf.png');
        }
        72.5% {
            background-image: url('/assets/img/Liyue/Viewpoint_Valley_of_Vibrant_Butterflies.png');
        }
        75% {
            background-image: url('/assets/img/Liyue/Viewpoint_Herb-Housing_Hall.png');
        }
        77.5% {
            background-image: url('/assets/img/Liyue/Viewpoint_Clarion_Echo.png');
        }
        80% {
            background-image: url('/assets/img/Liyue/Viewpoint_Past_Glories_of_Wangshan.png');
        }
        82.5% {
            background-image: url('/assets/img/Liyue/Viewpoint_Clear_Skies_Over_Xuanlian.png');
        }
        85% {
            background-image: url('/assets/img/Liyue/Viewpoint_Desolate_Foothill_Shrines.png');
        }
        87.5% {
            background-image: url('/assets/img/Liyue/Viewpoint_Trails_of_Laixin.png');
        }
        90% {
            background-image: url('/assets/img/Liyue/Viewpoint_Chiwang_Peak.png');
        }
        92.5% {
            background-image: url('/assets/img/Liyue/Viewpoint_Ancient_Pact.png');
        }
        95% {
            background-image: url('/assets/img/Liyue/Viewpoint_The_Blossoming_Warmth_of_Qiaoying_Sunlight.png');
        }
        97.5% {
            background-image: url('/assets/img/Liyue/Viewpoint_Bishui_Twilight_Luster.png');
        }
        100% {
            background-image: url('/assets/img/Liyue/Viewpoint_Where_Merchants_Flock_And_All_Ships_Dock.png');
        }
    }
    
    @keyframes ChangePicInazuma {
        0% {
            background-image: url('/assets/img/Inazuma/Viewpoint_Ritou_Narukami_Island.png');
        }
        5.56% {
            background-image: url('/assets/img/Inazuma/Viewpoint_Tenryou_Inazuma_City.png');
        }
        11.11% {
            background-image: url('/assets/img/Inazuma/Viewpoint_Suburbs_Inazuma_City.png');
        }
        16.67% {
            background-image: url('/assets/img/Inazuma/Viewpoint_The_Sacred_Forest_in_the_Moonlight.png');
        }
        22.22% {
            background-image: url('/assets/img/Inazuma/Viewpoint_Grand_Narukami_Shrine_Mt._Yougou.png');
        }
        27.78% {
            background-image: url('/assets/img/Inazuma/Viewpoint_Tatara_Islands_Vantage_Point.png');
        }
        33.33% {
            background-image: url('/assets/img/Inazuma/Viewpoint_Front_Line_Kannazuka.png');
        }
        38.89% {
            background-image: url('/assets/img/Inazuma/Viewpoint_Tidal_Flat_Amidst_the_Flames_of_War.png');
        }
        44.44% {
            background-image: url('/assets/img/Inazuma/Viewpoint_Rift_Valley_Yashiori_Island.png');
        }
        50% {
            background-image: url('/assets/img/Inazuma/Viewpoint_Overlooking_Serpent_Head.png');
        }
        55.56% {
            background-image: url('/assets/img/Inazuma/Viewpoint_The_Silent_Fishing_Village.png');
        }
        61.11% {
            background-image: url('/assets/img/Inazuma/Viewpoint_The_Stranded_Flagship.png');
        }
        66.67% {
            background-image: url('/assets/img/Inazuma/Viewpoint_Where_the_Provisional_Head_Priestess_Lives.png');
        }
        72.22% {
            background-image: url('/assets/img/Inazuma/Viewpoint_Where_Swirling_Storm_Clouds_Gather.png');
        }
        77.78% {
            background-image: url('/assets/img/Inazuma/Viewpoint_The_Pearlescent_Palace.png');
        }
        83.33% {
            background-image: url('/assets/img/Inazuma/Viewpoint_Village_of_the_People_of_the_Deep.png');
        }
        88.89% {
            background-image: url('/assets/img/Inazuma/Viewpoint_The_Moon-Bathed_Deep.png');
        }
        94.44% {
            background-image: url('/assets/img/Inazuma/Viewpoint_Tsurumi_Island.png');
        }
        100% {
            background-image: url('/assets/img/Inazuma/Viewpoint_Ritou_Narukami_Island.png');
        }
    }
   
    @keyframes ChangePicSumeru {
        0% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_City_Where_All_Wisdom_Resides.png');
        }
        1.92% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_City_Above_the_Forest.png');
        }
        3.84% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Village_by_the_River.png');
        }
        5.76% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Harbor_Betwixt_the_Two_Trees.png');
        }
        7.68% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Memory_of_Alcazarzaray.png');
        }
        9.60% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Garden_of_Deep_Thought.png');
        }
        11.52% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Frontier_Beneath_the_High_Wall.png');
        }
        13.44% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Colossus_Watching_Devantaka.png');
        }
        15.36% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Varunastra.png');
        }
        17.28% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Rain_End.png');
        }
        19.20% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Land_of_Mawtiyima.png');
        }
        21.12% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Aranaga_Little_Garden.png');
        }
        23.04% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_World_of_the_Aranara.png');
        }
        24.96% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Nursery_of_Lost_Dreams.png');
        }
        26.88% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Littlest_Dream.png');
        }
        28.80% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Garden_New_Sprouts.png');
        }
        30.72% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Barren_Land_Where_Sand_Dances.png');
        }
        32.64% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Towers_of_Betrayal.png');
        }
        34.56% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Refugee_Shelters.png');
        }
        36.48% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Thamud_Oasis.png');
        }
        38.40% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Mausoleum_of_King_Deshret.png');
        }
        40.32% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Thousands_of_Entombed_Chambers.png');
        }
        42.24% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Khaj-Nisut.png');
        }
        44.16% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Bottomless_Hall.png');
        }    
        46.08% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Aaru_Shut.png');
        }
        48.00% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Giant_of_the_Wind-Eroded_Valley.png');
        }
        49.92% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Lifeless_Dar_al-Shifa.png');
        }
        51.84% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Verdant_Fields_Vantage_Point.png');
        }
        53.76% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Mt._Damavand_Where_Sandstorms_Never_Cease.png');
        }
        55.68% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Moonblue_Canals.png');
        }
        57.60% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Tanit_Encampment.png');
        }
        59.52% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Palace_Abandoned_by_the_Gods.png');
        }
        61.44% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Temple_of_Buried_Dominion.png');
        }
        63.36% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Wenut_Tunnels.png');
        }
        65.28% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Lost_Hermitage.png');
        }
        67.20% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Forgotten_River_Valley.png');
        }
        69.12% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Gap_of_the_Hidden_Ruins.png');
        }
        71.04% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Court_of_Dried_Springs.png');
        }
        72.96% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Court_of_Withered_Life.png');
        }
        74.88% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Where_a_Titan_Shins_Were_Broken.png');
        }
        76.80% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Safhe_Shatranj.png');
        }
        78.72% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Liloupar_Gaol.png');
        }
        80.64% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Remnants_of_the_Ancient_Orchard.png');
        }
        82.56% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Ad-Hoc_Headquarters_of_the_Fatui_Expeditionary_Force.png');
        }
        84.48% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_Paradise_of_Eternal_Peace.png');
        }
        86.40% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Elder_Pine_Atop_the_Wastes.png');
        }
        88.32% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Forge_of_the_Abandoned_Foundry.png');
        }
        90.24% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Gate_of_Everlasting_Mourning.png');
        }
        92.16% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Valley_of_the_Unsullied.png');
        }
        94.08% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Amrita-Nourished_Nest.png');
        }
        96.00% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Harvisptokhm.png');
        }
        97.92% {
            background-image: url('/assets/img/Sumeru/Viewpoint_Sourcewater_Nation.png');
        }
        100% {
            background-image: url('/assets/img/Sumeru/Viewpoint_The_City_Where_All_Wisdom_Resides.png');
        }   
    }
    
    @keyframes ChangePicFontaine {
        0% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Scenery_Within_Elynas_Depths.png');
        }
        2.70% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Scenery_Within_Elynas_Deepest_Depths.png');
        }
        5.41% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Oratrice_Mecanique_d_Analyse_Cardinale.png');
        }
        8.11% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Foamy_Home.png');
        }
        10.81% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Ancient_Conch_Melody_of_Yore.png');
        }
        13.51% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Where_Dark_Tides_Echo.png');
        }
        16.22% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Sunken_Glory.png');
        }
        18.92% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Court_of_Dew_and_Springs.png');
        }
        21.62% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Land_of_Corroded_Shadows_and_Tainted_Currents.png');
        }
        24.32% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Seaworn_Cavern.png');
        }
        27.03% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Narzissenkreuz_Kingdom.png');
        }
        29.73% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Erinnyes_Whirling_Dance.png');
        }
        32.43% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Memories_of_Mont_Esus.png');
        }
        35.14% {
            background-image: url('/assets/img/Fontaine/Viewpoint_View_From_Mont_Automnequi.png');
        }
        37.84% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Fontaine_Hot_Springs.png');
        }
        40.54% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Morning_in_the_Beryl_Mountains_Clear_Weather.png');
        }
        43.24% {
            background-image: url('/assets/img/Fontaine/Viewpoint_The_Seaside_Village.png');
        }
        45.94% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Graveyard_of_Ships.png');
        }
        48.65% {
            background-image: url('/assets/img/Fontaine/Viewpoint_The_Remnants_of_Brilliant_Wisdom.png');
        }
        51.35% {
            background-image: url('/assets/img/Fontaine/Viewpoint_The_Wreck_of_Shattered_Dreams.png');
        }
        54.05% {
            background-image: url('/assets/img/Fontaine/Viewpoint_A_Sea_of_Exile.png');
        }
        56.76% {
            background-image: url('/assets/img/Fontaine/Viewpoint_The_Copper_Keep.png');
        }
        59.46% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Scattered_References.png');
        }
        62.16% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Erinnyes_Watery_Weeping_Willow.png');
        }
        64.86% {
            background-image: url('/assets/img/Fontaine/Viewpoint_The_Drunkard_Ship.png');
        }
        67.57% {
            background-image: url('/assets/img/Fontaine/Viewpoint_A_Distant_Harbor.png');
        }
        70.27% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Tower_of_Gestalt.png');
        }
        73.00% {
            background-image: url('/assets/img/Fontaine/Viewpoint_The_World_Amniotic_Fluid.png');
        }
        75.68% {
            background-image: url('/assets/img/Fontaine/Viewpoint_The_Lovely_Legends_of_Petrichor.png');
        }
        75.68% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Stage_of_Faded_Gold.png');
        }
        81.08% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Secret_Locale_of_the_Ancient_Order.png');
        }
        83.78% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Slumbering_Eternal_City.png');
        }
        86.49% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Where_Only_the_Bell_Tolls.png');
        }
        89.19% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Gradus_ad_Capitolium.png');
        }
        91.89% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Domus_Requiem.png');
        }
        94.59% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Harmony_Shadow.png');
        }
        97.30% {
            background-image: url('/assets/img/Fontaine/Viewpoint_The_End_of_An_Ancient_Dream.png');
        }
        100% {
            background-image: url('/assets/img/Fontaine/Viewpoint_Scenery_Within_Elynas_Depths.png');
        }
    }
    
    @keyframes ChangePicNatlan {
        0% {
            background-image: url('/assets/img/Natlan/Viewpoint_Land_of_Many_Echoes.png');
        }
        7.14% {
            background-image: url('/assets/img/Natlan/Viewpoint_Canopy_of_the_Clifftops.png');
        }
        14.28% {
            background-image: url('/assets/img/Natlan/Viewpoint_Home_of_Hot_Springs_and_Flowing_Waters.png');
        }
        21.42% {
            background-image: url('/assets/img/Natlan/Viewpoint_Arena_of_Glory_and_Triumph.png');
        }
        28.56% {
            background-image: url('/assets/img/Natlan/Viewpoint_Pins_of_Rock_Entwined_With_Golden_Runes.png');
        }
        35.70% {
            background-image: url('/assets/img/Natlan/Viewpoint_Stone_Chamber_of_Shifting_Crystal_Pillars.png');
        }
        42.84% {
            background-image: url('/assets/img/Natlan/Viewpoint_Plane_of_Pure_Desolation.png');
        }
        50% {
            background-image: url('/assets/img/Natlan/Viewpoint_Temple_of_Ancient_Forebears.png');
        }
        57.14% {
            background-image: url('/assets/img/Natlan/Viewpoint_Mother_Tree_of_Fruitful_Plenty.png');
        }
        64.28% {
            background-image: url('/assets/img/Natlan/Viewpoint_Where_the_Painted_Realm_Unfolds.png');
        }
        71.42% {
            background-image: url('/assets/img/Natlan/Viewpoint_Venture_to_a_Secret_Isle.png');
        }
        78.56% {
            background-image: url('/assets/img/Natlan/Viewpoint_Mural_of_Sworn_Pledges.png');
        }
        85.70% {
            background-image: url('/assets/img/Natlan/Viewpoint_Trial_Grounds_of_Restive_Nightsouls.png');
        }
        92.84% {
            background-image: url('/assets/img/Natlan/Viewpoint_Among_the_Painted_Peaks.png');
        }
        100% {
            background-image: url('/assets/img/Natlan/Viewpoint_Land_of_Many_Echoes.png');
        }
    }
    
 
    .place-img:hover {
        opacity: 0.6;
    }
    
    .place-body {
        background-color: #fff;
        text-align: left;
        padding-left: 8px;
        padding-top: 12px;
        font-size: 15px;
        margin-bottom: 15px;
        clear: both;
    }
    
    .place-heading {}
    
    .place-time {
        padding-top: 8px; 
        font-style: italic;
        color: #757575;
    }
    
    .place-desc {
        padding: 8px 8px 0 0;
        text-align: justify;
    }
    
    .place-buy-button {
        background-color: #333;
        color: #fff;
        padding: 11px 16px;
        text-decoration: none;
        display: inline-block;
        margin: 15px 0;
    }
    
    .place-buy-button:hover,
    .contact-button:hover {
        color: #000;
        background-color: #ccc;
    }
    /* #footer {

} */
    
    .model.open {
        display: flex;
    }
    
    .model {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #cccccc64;
        align-items: center;
        justify-content: center;
        padding: 50px;
        display: none;
    }
    
    .model-label {
        display: block;
        font-size: 15px;
        margin-bottom: 12px;
    }
    
    .model-container {
        background-color: #fff;
        width: 900px;
        height: 470px;
        position: relative;
        animation: runmodel ease 0.5s;

    }
    
    .model-header {
        height: 130px;
        background: #222;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        color: #fff;
        /* display: flex; */
    }
    
    .model-header-icon {
        max-height: 100%;
        left: -500px;
    }
    
    .model-body {
        padding: 16px;
    }
    .model-footer{
        display: inline-block;
    }
    .model-input {
        border: 1px solid #ccc;
        width: 100%;
        padding: 10px;
        font-size: 15px;
        margin-bottom: 24px;
    }
    
    .model-help-child:hover {
        opacity: 0.6;
    }
    
    #buy-tickets {
        font-size: 15px;
        background-color: #222;
        color: #fff;
        width: 100%;
        text-transform: uppercase;
        padding: 15px 12px;
        cursor: pointer;
        margin-top: 5px;
    }
    
    #buy-tickets:hover {
        opacity: 0.8;
        border: 1px solid #222;
    }
   
    
    
    .ti-bag {
        font-family: 'themify';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        padding: 50px 0;
        position: absolute;
        bottom: auto;
        left: 45%
    }
    
    .ti-bag:before {
        margin: 16px;
    }
    
    i.ti-close:hover {
        opacity: 1;
        background-color: #757575;
        box-shadow: 0 0 5px #22222264;
    }
    
    i.ti-close {
        position: absolute;
        color: #fff;
        right: 0;
        top: 0;
        padding: 12px;
        cursor: pointer;
        opacity: 0.7;
    }
    
    .model-footer {
        display: block;
        padding: 16px;
        text-align: right;
        color: #222;
    }
    
    .model-footer a {
        font-weight: 600;
        color: #1806ba;
    }
    
    .contact-content {
        text-align: left;
    }
    
    .form-content {
        margin-left: 100px;
    }
    
    .form-control {
        padding: 10px;
        border: 1px solid #ccc;
        width: 100%;
    }
    
    .contact-button {
        padding: 11px 16px;
        background-color: #333;
        color: #fff;
        float: right;
    }
    
    .merchandise-section img {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    table {
        border-collapse: collapse;
        width: 800px;
        text-align: justify;
        margin: 25px 0;
    }
    

    /*********EXTRAS**********/

    .fanart img {
        width: 100%;
    }
    


    /*************************
    **********FOOTER**********
    **************************/
    td,
    th,
    tr {
        border: 1px solid #757575;
        padding: 7px;
    }
    
    tr:first-child {
        background-color: black;
        color: white;
    }
    
    .tr-type1 {
        background-color: #ccc;
    }
    
    tr:hover {
        background-color: rgb(41, 81, 131, 0.8);
        font-weight: 500;
        text-shadow: 2px 2px 0px black;
        color: #fff;
        /* border: 3px solid #333; */
        text-align: center;
    }
   
    .content-extras {
        background: linear-gradient(to right,rgb(14, 22, 37) 0%, rgb(9, 24, 57),rgb(2, 2, 12) 100%);
        
    }
    article.fanartchild img {
        width: 100%;
    }
    article.cosplaychild img {
        width: 100%;
    }


    .footer-section {
        background-color: #000;
    }
    
    .footer-link a {
        color: #ccc;
        text-decoration: none;
        padding: 0 12px;
    }
    
    .footer-logo1 {
        padding: 15px 0;
    }
    
    .footer-logo2 {
        padding-top: 50px;
        padding-bottom: 15px;
    }
    
    .footer-comment {
        color: #ccc;
        opacity: 0.8;
        text-align: center;
        font-size: 15px;
    }
    
    .footer-comment2 {
        color: #fff;
        text-align: center;
        font-size: 15px;
    }
    
    .footer-logo3 {
        width: 350px;
        margin: 15px 0;
    }
    
    .footer-link a:hover {
        color: rgb(41, 81, 131);
    }
    


    @keyframes runmodel {
        from {
            opacity: 0;
            transform: translateY(-160px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
/*---------------------------------------------------------
 *-----------------------RESPONSIVE------------------------
 *---------------------------------------------------------*/
 
    @media only screen and (max-width: 46.1875em) {
        .nav_pc {
            display: none;
        }
        >#header {
            backdrop-filter: blur(10px); 
            -webkit-backdrop-filter: blur(10px);
        }
        .nav_bars-btn {
            width: 48px;
            height: 48px;
            display: inline-block;
            color: #fff;
            padding: 8px;
         
        }
        .ti-menu:before {
            font-size: 30px;
        }
     
       
    
        #content .member-items {
            float: none;
        }
        p.member-name {
            text-align: center;
            inline-size: max-content;
        }
        .content-section {
            width: 100%;
            padding: 0 24px;
        
        }
        :root {
            --width: 100%;
        }
        iframe {
            width: var(--width);
            height: 200px;
        }
        .col-third {
            width: 100%;
        }
        .place-img {
            padding-top: 16px;
            display: block;
        }
        .place-body {
            margin-bottom: 15px;
        }
        .place-desc {
            padding: 8px 12px 0 0;
        
        }

        table.content-section {
            width: 90%;
        }
    }
    @media only screen and (min-width: 46.5em) and (max-width: 63.9375em) {
      

    }
    
    @media only screen and (min-width: 64em) {
        

    }