/* 导航栏 */
@media (min-width: 768px) {
    .ouipromo_nav_font {
        font-family: 'Titillium Web';
        font-style: normal;
        font-weight: 700;
        font-size: 1.5rem;
        line-height: 1.5rem;
        color: var(--ouipromo_text_color_2) !important;
        margin-right: 2vw;
    }
}

/* 宣传横幅与用户地址 */
@media (min-width: 768px) {
    .windows_address_introduction {
        margin-bottom: 10px;
        font-family: 'Titillium Web';
        font-style: normal;
        font-weight: 400;
        font-size: 1.5rem;
        line-height: 2rem;
        color: var(--ouipromo_text_color_1);
    }

    #windows_address_warning {
        margin-top: 20px;
        padding-left: 25px;
        font-family: 'Titillium Web';
        font-weight: 400;
        font-size: 1.2rem;
        color: var(--ouipromo_text_color_1);
    }

    .index_btn, .index_btn:focus, .index_btn:active {
        z-index: 2;
        position: relative;
        font-family: 'Titillium Web', sans-serif;
        font-style: italic;
        font-weight: 700;
        font-size: 3.5vw;
        color: var(--ouipromo_theme_color_1);
        background-color: var(--ouipromo_theme_color_2);
        box-shadow: 0px 10px 20px rgba(218, 208, 20, 0.842);
        border-radius: 50px;
        width: 22vw;
        left: 6%;
        animation: index_btn 3s infinite ease-in-out;
    }

    .index_btn:hover {
        color: var(--ouipromo_theme_color_1);
    }

    @keyframes index_btn {
        50% {
            box-shadow: 0px 10px 20px rgba(155, 147, 0, 0.1);
        }
        100% {
            box-shadow: 0px 10px 20px rgba(218, 208, 20, 0.842);
        } 
    }

    .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { 
        box-shadow: 0px 10px 20px rgba(218, 208, 20, 0.842);
    }
    
    .btn_qrcode {
        padding-bottom: 1%; 
        padding-left: 3%; 
        padding-right: 5%; 
        width: 6vw;
    }
    
    .btn_qrcode {
        cursor: pointer;
        transition: all 0.6s;
        -moz-transition: all 0.6s;
        -webkit-transition: all 0.6s;
    }
    
    .btn_qrcode:hover {
        transform: scale(3.2);
    }

    #btn_finger {
        width: 5vw;
        position: absolute;
        z-index: 2;
        animation: btn_finger 3s infinite ease-in-out;
    }

    #btn_finger_span {
        position: absolute;
        z-index: 2;
        animation: btn_finger_span 3s infinite ease-in-out;
    }

    @keyframes btn_finger {
        50% {
            transform: scale(1.25);
        }
        100% {
            transform: scale(1);
        }
    }

    @keyframes btn_finger_span {
        50% {
            transform: translateX(30px);
        }
        100% {
            transform: translateX(0);
        }
    }
    
    .index_btn_introduction {
        text-overflow: ellipsis;
        overflow: hidden;
        height: 4vw;
        font-family: 'Fira Sans';
        font-style: normal;
        font-weight: 400;
        font-size: 1vw;
        line-height: 1.2vw;
        color: var(--ouipromo_theme_color_1);
    }

    .mon_adresse_title_pc {
        font-family: 'Titillium Web';
        font-style: normal;
        font-weight: 600;
        font-size: 1.6rem;
        line-height: 2rem;
        color: var(--ouipromo_text_color_3);
    }

    .mon_adresse_pc {
        font-family: 'Titillium Web';
        font-style: normal;
        font-weight: 700;
        font-size: 1.6rem;
        line-height: 1.6rem;
        text-transform: uppercase;
        color: var(--ouipromo_text_color_1);
    }

    .modifier_adresse_pc, .modifier_adresse_pc:hover, .modifier_adresse_pc:active {
        font-family: 'Titillium Web';
        font-style: normal;
        font-weight: 700;
        font-size: 1.6rem;
        line-height: 1.6rem;
        text-decoration-line: underline;
        color: var(--ouipromo_text_color_2);
    }

    .windows_address {
        display: none;
        top: 45%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        position: fixed;
        margin: auto;
        width: 30%;
        height: 30%;
        min-width: 700px;
        min-height: 300px;
        border: none;
        background-color: white;
        z-index: 4;
        overflow: hidden;
        border-radius: 20px;
        padding: 70px 30px 50px 30px;
    }

    .windows_address_background {
        display: none;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        padding: 0 auto;
        background-color: var(--ouipromo_text_color_2);
        z-index: 3;
        -moz-opacity: 0.8;
        opacity: .5;
        filter: alpha(opacity=78);
    }

    .windows_address_input_group {
        position: relative;
        width: 100%;
        border-radius: 50px;
    }

    .address_input {
        z-index: 4;
    }

    .windows_address_input, .windows_address_input:active, .windows_address_input:focus, .windows_address_input:hover {
        padding-left: 5%;
        width: 100%;
        line-height: 60px;
        outline-style: none;
        outline: 0px;
        border-radius: 50px;
        border-color: var(--ouipromo_theme_color_1);
        border-width: 3px;
        text-shadow: 0 0 0 0;
        border-style: solid;
        font-family: 'Titillium Web';
        font-weight: 400;
        font-size: 1.2rem;
        color: var(--ouipromo_text_color_3);
    }

    .windows_address_btn {
        position: absolute;
        top: 0;
        right: 0;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 30%;
        border: none;
        border-radius: 50px;
        height: 100%;
        background-color: var(--ouipromo_theme_color_2);
        font-family: 'Titillium Web';
        font-style: italic;
        font-weight: 700;
        font-size: 1.8rem;
        text-align: center;
        color: var(--ouipromo_theme_color_1);
    }
}


/* 商户信息 */
.category_icon {
    width: 56px;
}

.tout_afficher {
    font-family: 'Titillium Web';
    font-style: italic;
    font-size: 60%;
    color: var(--ouipromo_theme_color_4);
}

@media (min-width: 768px) {
    .category_title {
        font-family: 'Titillium Web', sans-serif;
        font-style: italic;
        font-weight: 700;
        font-size: 3.2rem;
        line-height: 50px;
        color: var(--ouipromo_theme_color_4);
    }
    
    .code_promo_card {
        border: 0;
        position: relative;
        padding-left: 0%;
        padding-top: 0%;
        padding-right: 0%;
        padding-bottom: 0%;
        width: 100%;
        margin-bottom: 4%;
        border-radius: 20px;
        transition: all 0.4s;
    }

    .promotion_poster:hover a .code_promo_card {
        box-shadow: 0 0 15px 15px #fdff9bd7;
    }

    .restaurant_name {
        z-index: 2;
        margin-bottom: 2%;
        font-family: 'Titillium Web';
        font-style: normal;
        font-weight: 700;
        font-size: 2.2rem;
        line-height: 0.6rem;
        text-transform: uppercase;
        color: var(--ouipromo_text_color_1);
    }

    .promotion {
        z-index: 2;
        position: absolute;
        top: 0%;
        left: 4%;
        background-color: var(--ouipromo_theme_color_1);
        opacity: 0.9;
        border-radius: 20px 50px 50px 0;
        height: 41%;
        width: 61%;
        font-family: 'Titillium Web';
        font-style: italic;
        font-weight: 400;
        font-size: 5vw;
        line-height: 6vw;
        color: var(--ouipromo_theme_color_2);
    }

    .code_promo {
        font-weight: 700;
        font-size: 6.5vw;
        line-height: 6vw;
        font-family: 'Titillium Web';
        font-style: normal;
        color: var(--ouipromo_theme_color_2);
    }

    .promotion_content {
        margin-left: 6%; 
        margin-top: 2vw;
        padding-right: 4%;
    }
    
    .restaurant_distance {
        font-family: 'Titillium Web';
        font-style: normal;
        font-weight: 600;
        font-size: 1.4rem;
        line-height: 2rem;
        text-align: right;
        color: var(--ouipromo_text_color_1);
    }
    
    .promotion_validity_period {
        font-family: 'Titillium Web';
        font-style: italic;
        font-weight: 400;
        font-size: 1.4rem;
        line-height: 2rem;
        color: var(--ouipromo_text_color_1);
    }
    
    .delivery_information {
        font-family: 'Titillium Web';
        font-style: normal;
        font-weight: 700;
        font-size: 1.12rem;
        line-height: 2rem;
        text-align: center;
        vertical-align: middle; 
        color: var(--ouipromo_theme_color_1);
        background: var(--ouipromo_theme_color_2);
        width: 100%;
        margin: 0 auto;
    }

    .no_result {
        font-family: 'Fira Sans';
        font-style: normal;
        font-weight: 400;
        font-size: 1.6rem;
        line-height: 2rem;
        margin-bottom: 2%;
        color: var(--ouipromo_text_color_2);
    }
}

@media (min-width: 992px) {
    .promotion {
        z-index: 2;
        position: absolute;
        top: 0%;
        left: 4%;
        background-color: var(--ouipromo_theme_color_1);
        opacity: 0.9;
        border-radius: 20px 50px 50px 0;
        height: 41%;
        width: 61%;
        font-family: 'Titillium Web';
        font-style: italic;
        font-weight: 400;
        font-size: 2.3vw;
        line-height: 3vw;
        color: var(--ouipromo_theme_color_2);
    }

    .code_promo {
        font-weight: 700;
        font-size: 3vw;
        line-height: 3vw;
        font-family: 'Titillium Web';
        font-style: normal;
        color: var(--ouipromo_theme_color_2);
    }

    .promotion_content {
        margin-left: 5%; 
        margin-top: 1vw
    }
}

@media (min-width: 1400px) {
    .promotion {
        z-index: 2;
        position: absolute;
        top: 0%;
        left: 4%;
        background-color: var(--ouipromo_theme_color_1);
        opacity: 0.9;
        border-radius: 20px 50px 50px 0;
        height: 41%;
        width: 61%;
        font-family: 'Titillium Web';
        font-style: italic;
        font-weight: 400;
        font-size: 1.5vw;
        line-height: 2vw;
        color: var(--ouipromo_theme_color_2);
    }

    .code_promo {
        font-weight: 700;
        font-size: 1.95vw;
        line-height: 2vw;
        font-family: 'Titillium Web';
        font-style: normal;
        color: var(--ouipromo_theme_color_2);
    }

    .promotion_content {
        margin-left: 6%; 
        margin-top: 0.6vw
    }
}


/* footer CSS */
@media (min-width: 768px) {
    .footer_list, .footer_list:link, .footer_list:visited, .footer_list:hover, .footer_list:active {
        font-family: 'Titillium Web'; 
        font-style: normal; 
        font-weight: 600; 
        font-size: 1.1rem; 
        line-height: 0.4rem; 
        color: var(--ouipromo_text_color_2);
        max-width: 100%;
        word-break: break-all;
        text-decoration: none;
    }

    .btn_qrcode, .footer_qrcode, .footer_mobile {
        cursor: pointer;
        transition: all 0.6s;
        -moz-transition: all 0.6s;
        -webkit-transition: all 0.6s;
    }

    .ouipromo_footer {
        background-image: url("../images/index/footer_main.svg");
        height: 750px;
        max-width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .footer_rolling_icons {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .loop_run {
        width: 300px;
        height: 150px;
        position: relative;
        border-radius: 50%;
        margin-top: -15%;
        margin-left: -55%;
    }

    @media (max-width: 1399.98px) {
        .loop_run {
            margin-left: 0;
        }
    }

    #footer_rolling_icon_1 {
        height: 60px;
        position: absolute;
        animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -2.6s infinite alternate,
                   animY 6s cubic-bezier(0.36, 0, 0.64, 1)  0s infinite alternate,
                   scale 12s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
    }

    #footer_rolling_icon_2 {
        height: 60px;
        position: absolute;
        animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -4.6s infinite alternate,
                   animY 6s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate,
                   scale 12s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;
    }

    #footer_rolling_icon_3 {
        height: 60px;
        position: absolute;
        animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -6.6s infinite alternate,
                   animY 6s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate,
                   scale 12s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate;
    }

    #footer_rolling_icon_4 {
        height: 60px;
        position: absolute;
        animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -8.6s infinite alternate,
                   animY 6s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
                   scale 12s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
    }

    #footer_rolling_icon_5 {
        height: 60px;
        position: absolute;
        animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -10.6s infinite alternate,
                   animY 6s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate,
                   scale 12s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate;
    }

    #footer_rolling_icon_6 {
        height: 60px;
        position: absolute;
        animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -12.6s infinite alternate,
                   animY 6s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate,
                   scale 12s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
    }

    @keyframes animX {
        0% {
            left: -4%;
        }
        100% {
            left: 96%;
        }
    }

    @keyframes animY {
        0% {
            top: -4%;
        }
        100% {
            top: 96%;
        }
    }

    @keyframes scale {
        0% {
            transform: scale(0.6);
            opacity: 0.6;
        }
        50% {
            transform: scale(1);
            opacity: 1;
        }
        100% {
            transform: scale(0.6);
            opacity: 0.6;
        }
    }
}

@media (max-width: 1399.98px) and (min-width: 1200px) {
    .footer_qrcode {
        margin-left: 2vw;
        margin-right: 3.3vw;
    }
}

@media (max-width: 1199.98px) and (min-width: 992px) {
    .link_footer {
        padding-left: 6vw;
        padding-right: 6vw;
    }
}

@media (max-width: 1399.98px) and (min-width: 768px) {
    #footer_ouipromo_gif {
        animation: 3s footer_ouipromo_gif infinite ease-in-out;
    }

    @keyframes footer_ouipromo_gif {
        40% {
            opacity: 0.9;
        }
        60% {
            opacity: 0.8;
        }
        100% {
            transform: translateX(250%);
            opacity: 0.2;
        }
    }
}

@media (min-width: 1400px) {
    #footer_ouipromo_gif {
        animation: 3s footer_ouipromo_gif infinite ease-in-out;
    }

    @keyframes footer_ouipromo_gif {
        40% {
            opacity: 0.9;
        }
        60% {
            opacity: 0.8;
        }
        100% {
            transform: translateX(160%);
            opacity: 0.2;
        }
    }
}