/* Font Setup */
@font-face {
    font-family: 'NotoSansHans';
    src: url('https://assets-persist.lovart.ai/agent-static-assets/NotoSansHans-Regular.otf') format('opentype');
    font-weight: normal;
}
@font-face {
    font-family: 'NotoSansHans';
    src: url('https://assets-persist.lovart.ai/agent-static-assets/NotoSansHans-Bold.otf') format('opentype');
    font-weight: bold;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'NotoSansHans', sans-serif;
    background-color: #E8D084;
    width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
}

img {
    display: block;
    width: 100%;
    height: auto;
}

/* Utility Classes */
.desktop-only { display: block; }
.mobile-only { display: none; }

/* Responsive Switch */
@media (max-width: 929px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }
}

/* Section Styles */
section {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Hero & Footer Layers (Section 0 & 6) */
.layered-section {
    position: relative;
    width: 100%;
}

/* Aspect Ratios */
.ratio-desktop-16-9 {
    aspect-ratio: 2000/1100;
}
.ratio-mobile-portrait {
    aspect-ratio: 780/1560;
}

.layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure full visibility */
}

/* Swiper Customization */
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-button-next, .swiper-button-prev {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.swiper-pagination-bullet {
    background: #ffffff;
    opacity: 0.6;
}
.swiper-pagination-bullet-active {
    background: #F0E800;
    opacity: 1;
}

/* Section 7: Reservation Form */
.reservation-section {
    background: #391710;
    color: #fff;
    padding: 80px 20px;
    text-align: center;
}

.form-container {
    max-width: 600px;
    margin: 0 auto;
}

.form-title {
    font-size: 2.5rem;
    letter-spacing: 0.5rem;
    margin-bottom: 40px;
    color: #F0E800;
    font-family: 'Noto Serif TC', serif;
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 0;
    font-size: 16px;
    font-family: 'NotoSansHans', sans-serif;
    background-color: rgba(255,255,255,0.75);
    border: solid 1px transparent;
    border-bottom: solid 1px #F0E800;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: #F0E800;
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 84, 144, 0.1);
}

.form-submit {
    width: 100%;
    padding: 0;
    line-height: 24px;
    background-color: #F0E800;
    color: var(--item-background);
    border: none;
    border-radius: 0;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.form-submit:hover {
    background-color: var(--item-background);
    color: #F0E800;
}

/* Fixed Bottom Navbar */
.fixed-navbar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    background-color: #F0E800;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60px;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}

.nav-btn {
    flex: 1;
    text-align: center;
    color: white;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 0.1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 1px solid rgba(255,255,255,0.2);
    transition: background 0.3s;
}

.nav-btn:last-child {
    border-right: none;
}

.nav-btn:hover {
    background-color: rgba(255,255,255,0.1);
}

.nav-btn i {
    font-size: 24px;
    margin-bottom: 2px;
}

.city {
    border-bottom: 1px solid rgba(2556, 255, 255, 0.3);
}

.town {
    margin-bottom: 25px;
}

.zipcode {
    display: none;
}

.form-link{ color: #fff; text-decoration: underline;}

.form-link:hover{ text-decoration: none;}

.hide-box {
    position: relative;
    display: block;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: justify;
    padding:0 15px 15px 15px;
    line-height: 1.5rem;
    padding-top: 20px; 
    padding-bottom: 20px;
    font-size: 13px;
    color: #ddd;
}

/* Mobile specific adjustments for form */
@media (max-width: 929px) {
    .form-container {
        padding: 25px;
    }
    .form-title {
        font-size: 1.6rem;
    }
    .nav-btn span {
        font-size: 11px;
    }
    .hide-box {
        font-size: 11px;
    }
}


/* AOS Animate */

[data-aos="opacity-up"] {
    opacity: 1;
    clip-path: inset(100% 0 0% 0);
}

[data-aos="opacity-up"].aos-animate {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

[data-aos="opacity-down"] {
    opacity: 1;
    clip-path: inset(0% 0 100% 0);
}

[data-aos="opacity-down"].aos-animate {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

[data-aos="opacity-left"] {
    opacity: 1;
    clip-path: inset(0% 100% 0 0);
}

[data-aos="opacity-left"].aos-animate {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

[data-aos="opacity-right"] {
    opacity: 1;
    clip-path: inset(0% 0 0 100%);
}

[data-aos="opacity-right"].aos-animate {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

[data-aos="opacity-x"] {
    opacity: 1;
    clip-path: inset(0% 100% 0 100%);
}

[data-aos="opacity-x"].aos-animate {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}




.grid-6-12 {
    width: 40%;
}

.text-box {
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/*============contact===============*/
.content {
    width: 90%;
    margin: 100px auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
#contact {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
}
#contact .content .map-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: end;
    -ms-flex-align: end;
        align-items: end;
}
#contact .content .map-box .text-box {
width: 50%;
}
#contact .content .logo {
max-width: 900px;
}
#contact .content .map {
max-width: 560px;
padding-right: 40px;
}
#contact #form-top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
}
#contact #contact_form {
width: 80%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
/* 隱藏原始的 checkbox */
/* 自定義 checkbox 的樣式 */
/* 勾選後的狀態 */
/* 勾選後顯示的符號 */
/* 當 checkbox 被勾選後，顯示打勾符號 */
/* 勾選符號的樣式（這裡是簡單的勾勾） */
}
#contact #contact_form .text-box {
margin: 0 auto 30px;
}
#contact #contact_form .text-box h3 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
}
#contact #contact_form .text-box h3::after, #contact #contact_form .text-box h3::before {
content: " ";
display: block;
width: 60px;
height: 1px;
background-color: var(--contrast-color);
}
#contact #contact_form .text-box h3::after {
margin-left: 15px;
}
#contact #contact_form .text-box h3::before {
margin-right: 15px;
}
#contact #contact_form .text-box .text1 {
width: 98%;
max-width: 800px;
margin: 8% auto 2.5%;
}
#contact .text-box .text-button {
width: 100%;
max-width: 850px;
margin-top: 30px;
margin-bottom: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
position: relative;
}
#contact .text-box .text-button a {
width: 100%;
height: 50px;
position: relative;
padding-bottom: 5px;
}
#contact .text-box .text-button a::after {
content: "";
display: block;
width: 0;
height: 2px;
margin-top: 5px;
background: #f08000;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#contact .text-box .text-button a:last-child {
width: 100%;
margin-left: 2%;
margin-top: -38px;
}
#contact .text-box .text-button a:hover::after {
width: 100%;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#contact #contact_form .row-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
width: 98%;
margin-top: 20px;
}
#contact #contact_form label {
position: absolute;
font-size: 18px;
padding-left: 2.5%;
height: 46px;
line-height: 46px;
display: block;
}
#contact #contact_form small {
line-height: 20px;
font-size: 20px;
width: 15px;
display: inline-block;
font-weight: bold;
text-align: center;
padding-top: 0;
color: #F0E800;
}
#contact #contact_form .input-row,
#contact #contact_form .input-button,
#contact #contact_form .select-row {
position: relative;
width: 48%;
clear: both;
color: #fff;
margin: 0 1% 5px;
border-bottom: solid 1px rgba(65, 65, 65, 0.18);
background-color: rgba(235, 235, 235, 0.46);
}
#contact #contact_form .long-area {
width: 98%;
}
#contact #contact_form .middle-area {
width: 60%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
    -ms-flex-align: start;
        align-items: flex-start;
background: none;
}
#contact #contact_form input[type=text],
#contact #contact_form input[type=password],
#contact #contact_form .input-button,
#contact #contact_form select,
#contact #contact_form textarea,
#contact #contact_form .input-box {
height: 46px;
width: 80%;
float: right;
padding-left: 12px;
background-color: transparent;
border: none;
-webkit-box-sizing: border-box;
        box-sizing: border-box;
font-size: 18px;
color: var(--text-color);
}
#contact #contact_form input[type=text] option,
#contact #contact_form input[type=password] option,
#contact #contact_form .input-button option,
#contact #contact_form select option,
#contact #contact_form textarea option,
#contact #contact_form .input-box option {
color: var(--text-color);
margin-left: 10%;
display: block;
}
#contact #contact_form input[type=text]:focus,
#contact #contact_form input[type=password]:focus,
#contact #contact_form .input-button:focus,
#contact #contact_form select:focus,
#contact #contact_form textarea:focus,
#contact #contact_form .input-box:focus {
border-color: #C89F63;
}
#contact #contact_form textarea {
height: 150px;
line-height: 24px;
padding-top: 13px;
}
#contact #contact_form .small-text {
font-size: clamp(17px, 1.1vw, 1em);
-webkit-box-align: end;
    -ms-flex-align: end;
        align-items: flex-end;
color: var(--text-color);
padding-left: 30px;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
border: none;
background: none;
line-height: 1em;
}
#contact #contact_form .small-text label {
position: relative;
}
#contact #contact_form .small-text a {
color: var(--text-color2);
}
#contact #contact_form .small-text a span {
display: inline;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#contact #contact_form .small-text a:hover span {
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
background-color: var(--item-background);
color: var(--background);
}
#contact #contact_form .input-button {
width: 45%;
overflow: hidden;
background: none;
float: right;
background-color: var(--item-background);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#contact #contact_form .input-button a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
width: 100%;
color: var(--background);
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#contact #contact_form .input-button a:hover {
-webkit-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
background-color: var(--item-background);
color: var(--background);
}
#contact #contact_form .input-button::before {
background: rgba(255, 255, 255, 0.8);
content: "";
height: 155px;
left: -75px;
position: absolute;
top: -50px;
-webkit-transform: rotate(35deg);
        transform: rotate(35deg);
-webkit-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
width: 50px;
z-index: 1;
}
#contact #contact_form .input-button:hover::before {
left: 120%;
-webkit-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
#contact #contact_form img.rand-img {
position: absolute;
right: 0px;
bottom: 1px;
width: 90px;
height: 45px;
cursor: pointer;
}
#contact #contact_form input[type=reset],
#contact #contact_form input[type=submit],
#contact #contact_form input[type=button],
#contact #contact_form input[type=file] {
font-family: "Noto Serif TC", serif, "Forum", serif;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
border: none;
margin: 0 auto;
min-height: 20px;
padding: 13px 0;
width: 100%;
text-align: center;
cursor: pointer;
font-size: 20px;
letter-spacing: 10px;
font-weight: 550;
color: var(--background);
background: #52abff;
border: none;
}
#contact #contact_form input[type=checkbox] + label,
#contact #contact_form input[type=radio] + label {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
}
#contact #contact_form .checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
}
#contact #contact_form .checkbox .checkmark {
position: relative;
height: 20px;
width: 20px;
background-color: #fff;
border: #ccc 1px solid;
border-radius: 5px;
/* 可以設置為圓角或方形 */
display: inline-block;
vertical-align: middle;
margin-right: 10px;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
#contact #contact_form .checkbox input:checked + .checkmark {
background-color: var(--item-background);
border-color: #3290B1;
}
#contact #contact_form .checkbox .checkmark:after {
content: "";
position: absolute;
display: none;
}
#contact #contact_form .checkbox input:checked + .checkmark:after {
display: block;
}
#contact #contact_form .checkbox .checkmark:after {
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -110%) rotate(45deg) scale(2, 2);
        transform: translate(-50%, -110%) rotate(45deg) scale(2, 2);
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
}

#submit.loading {
background-image: url(../images/loader.gif);
background-repeat: no-repeat;
background-position: center center;
pointer-events: none;
background-size: contain;
background-color: rgba(0, 0, 0, 0.5);
}

#result {
width: 90%;
color: var(--text-color2);
font-size: 18px;
text-align: center;
padding: 50px 0;
}

@media screen and (max-width: 929px) {
    .grid-5-12, .grid-6-12, .grid-7-12 {
        width: 100%;
    }
    
    #contact .content {
        margin: 100px auto;
    }
}

@media screen and (max-width: 929px) {
    #contact .content #contact_form {
        margin: 0 auto;
        width: 80%;
    }

    #section2 .content, #section3 .content, #section4 .content, #section5 .content, #contact .content {
        width: 100%;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    
    .section:not(:first-child) .content {
        height: auto !important;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin: 0px auto;
    }
    
    #contact .content #contact_form {
        margin: 0 auto;
        width: 80%;
    }

    #contact .content #contact_form .text-box {
        width: 100%;
        padding: 100px 0 50px;
    }
    
    #contact .text-box .text-button {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    #contact .text-box .text-button a {
        width: 80%;
        margin: 0%;
    }

    #contact .text-box .text-button a:last-child {
        width: 80%;
        margin-left: 0;
        margin-top: -15px;
    }

    #contact .content .text-box {
        margin: 0 auto !important;
        padding: 0;
    }

    #contact .content .form #contact_form .row-box, #private #contact_form .row-box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    #contact .content .form #contact_form .input-row, #contact .content .form #contact_form .input-button, #contact .content .form #contact_form .select-row, #contact .content .form #contact_form .small-text, #private #contact_form .input-row, #private #contact_form .input-button, #private #contact_form .select-row, #private #contact_form .small-text {
        width: 100%;
        clear: both;
        margin-left: 0;
    }

    #contact .content .form #contact_form .middle-area, #private #contact_form .middle-area {
        width: 100%;
        margin-bottom: 20px;
    }

    #contact .content .form #contact_form label, #private #contact_form label {
        font-size: 16px;
    }

    #contact .content .logo {
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    }

    #contact .content .map {
        max-width: 80%;
        margin-bottom: 50px;
        margin-left: 0;
        padding-right: 0;
    }

    #contact #contact_form input[type=text],
    #contact #contact_form input[type=password],
    #contact #contact_form .input-button,
    #contact #contact_form select,
    #contact #contact_form textarea,
    #contact #contact_form .input-box {
    width: 70%;
    }

    #contact .content .map-box {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    }
}


.text-box h3 {
    font-size: calc(var(--text-base-size) * 4.6);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-weight: 700;
    color: var(--contrast-color);
    letter-spacing: 0.1em;
}

/*============private===============*/
#private {
width: 75%;
margin: 0 auto;
}
#private .text-box {
-webkit-box-align: start;
    -ms-flex-align: start;
        align-items: flex-start;
}
#private .text-box h3,
#private .text-box h4,
#private .text-box .con {
text-align: left;
}
#private .text-box h3 {
padding-bottom: 50px;
}
#private .text-box h4,
#private .text-box .con {
padding-bottom: 35px;
text-align: justify;
}
#private .text-box h4 {
font-size: calc(var(--text-base-size) * 2.6);
line-height: 1.5em;
}
#private .text-box .con {
font-size: 16px;
letter-spacing: 0;
}
#private .text-box .con li {
line-height: 2em;
}

/*============nav===============*/
.menu-item,
.menu-open-button {
  background: #EEEEEE;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  position: absolute;
  color: #FFFFFF;
  text-align: center;
  line-height: 80px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform ease-out 200ms;
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
  transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

.menu-open {
  display: none;
}

.lines {
  width: 25px;
  height: 3px;
  background: #596778;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -1.5px;
  -webkit-transition: -webkit-transform 200ms;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
  transition: transform 200ms, -webkit-transform 200ms;
}

.line-1 {
  -webkit-transform: translate3d(0, -8px, 0);
  transform: translate3d(0, -8px, 0);
}

.line-2 {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.line-3 {
  -webkit-transform: translate3d(0, 8px, 0);
  transform: translate3d(0, 8px, 0);
}

.menu-open:checked + .menu-open-button .line-1 {
  -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
  transform: translate3d(0, 0, 0) rotate(45deg);
}

.menu-open:checked + .menu-open-button .line-2 {
  -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
  transform: translate3d(0, 0, 0) scale(0.1, 1);
}

.menu-open:checked + .menu-open-button .line-3 {
  -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
  transform: translate3d(0, 0, 0) rotate(-45deg);
}

.menu {
  margin: auto;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 80px;
  height: 80px;
  text-align: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 26px;
  z-index: 99;
}

.menu-item {
  -webkit-box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
          box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  background-color: var(--item-background);
  -webkit-transform: translate3d(0px, 0px, 0);
          transform: translate3d(0px, 0px, 0);
}
.menu-item img {
  width: 100%;
}

.menu-open:checked ~ .menu-item {
  opacity: 1;
  -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
          transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
  -webkit-transition: all ease-in-out 200ms;
  transition: all ease-in-out 200ms;
}
.menu-open:checked ~ .menu-item:hover {
  -webkit-transition: all ease-in-out 200ms;
  transition: all ease-in-out 200ms;
}

.menu-open:checked ~ .menu-item:nth-child(3) {
  -webkit-transition-duration: 180ms;
          transition-duration: 180ms;
  -webkit-transform: translate3d(0px, -250px, 0);
          transform: translate3d(0px, -250px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(3):hover {
  -webkit-transform: translate3d(var(--offest-num), calc(-250px + var(--offest-num)), 0);
          transform: translate3d(var(--offest-num), calc(-250px + var(--offest-num)), 0);
}

.menu-open:checked ~ .menu-item:nth-child(4) {
  -webkit-transition-duration: 280ms;
          transition-duration: 280ms;
  -webkit-transform: translate3d(0px, -190px, 0);
          transform: translate3d(0px, -190px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4):hover {
  -webkit-transform: translate3d(var(--offest-num), calc(-190px + var(--offest-num)), 0);
          transform: translate3d(var(--offest-num), calc(-190px + var(--offest-num)), 0);
}

.menu-open:checked ~ .menu-item:nth-child(5) {
  -webkit-transition-duration: 380ms;
          transition-duration: 380ms;
  -webkit-transform: translate3d(0px, -130px, 0);
          transform: translate3d(0px, -130px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5):hover {
  -webkit-transform: translate3d(var(--offest-num), calc(-130px + var(--offest-num)), 0);
          transform: translate3d(var(--offest-num), calc(-130px + var(--offest-num)), 0);
}

.menu-open:checked ~ .menu-item:nth-child(6) {
  -webkit-transition-duration: 480ms;
          transition-duration: 480ms;
  -webkit-transform: translate3d(0px, -70px, 0);
          transform: translate3d(0px, -70px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6):hover {
  -webkit-transform: translate3d(var(--offest-num), calc(-70px + var(--offest-num)), 0);
          transform: translate3d(var(--offest-num), calc(-70px + var(--offest-num)), 0);
}

.menu-open:checked ~ .menu-item:nth-child(7) {
  -webkit-transition-duration: 580ms;
          transition-duration: 580ms;
  -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
          transform: translate3d(-90.86291px, 52.62064px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(8) {
  -webkit-transition-duration: 680ms;
          transition-duration: 680ms;
  -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
          transform: translate3d(-91.03006px, -52.33095px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(9) {
  -webkit-transition-duration: 780ms;
          transition-duration: 780ms;
  -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
          transform: translate3d(-0.25084px, -104.9997px, 0);
}

.menu-open:checked ~ .menu-item:hover {
  background: #1A2D78;
  color: #3290B1;
}

.menu-item:nth-child(3) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(4) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(5) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(6) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(7) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(8) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(9) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-open-button {
  z-index: 2;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
  -webkit-box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
          box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
}

.menu-open-button:hover {
  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked + .menu-open-button {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
  transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}