/*
Teamplate Name: wella 
Version: 1.0
*/
/* Type your CSS Here */

body{
    max-width: 1920px;
    margin: 0 auto;
}

.new_amplify{
    will-change: transform;
    transition: transform 0.7s ease-in-out, box-shadow 0.7s;
}
.new_amplify:hover{
    transform: scale(1.1) translateY(5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.footer-menus{
    display: flex;
    justify-content: space-between;
}
.wella-main-menu .prefix .logo a.main_sticky_main_l{
    display: inline-flex;
    align-items: center;
}
.main_sticky_main_l{
    display: flex;
    align-items: center;
}
.main_sticky_main_l .pc-logo{
    width: 125px;
    height: 34px;
    background: url('/static/gw/assets/images/logo-pc.png') center/cover;
}

.company-name{
    font-size: 1.5rem; font-weight: bold; color: white !important;
    display: flex;
    flex-direction: column;
}
.company-name .sub-name{
    font-size: .8rem;
}

/* 头部导航-start */
.wella_nav_area .container {
    padding: 0 40px;
}
.logo-left {
    height: 80px;
}
.wella-main-menu .sub-menu {
    width: 100%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0; 
    padding: 0;
    color: white;
    position:relative;
}
.wella_menu .sub-menu li a {
    display:block;
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: .8rem !important;
}
.wella_menu .sub-menu li span{
    display:block;
}
/* .wella_menu .sub-menu li a:before{
    content:"";
    position:absolute;
    width:100%;
    height:3px;
    background: #FFFFFF;
    left:0;
    bottom:-15px;
    opacity:0;
    -webkit-transform: translate3d(0, -40px, 0);
    transform: translate3d(0, -40px, 0);
    -webkit-transition: -webkit-transform 0s 0.5s, opacity 0.2s;
    transition: transform 0s 0.5s, opacity 0.2s;
}
.wella_menu .sub-menu li a:hover::before{
    opacity:1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.1s;
    transition: transform 0.5s, opacity 0.1s;
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
} */
.wella_menu .sub-menu li a:hover span{
    -webkit-animation: anim-francisco 0.5s forwards;
    animation: anim-francisco 0.5s forwards;
    opacity: 1;
    font-weight: 600;
}
@-webkit-keyframes anim-francisco {
    50% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    51% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes anim-francisco {
    50% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    51% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
/* 头部导航-end */


/* 底部导航-start */
.widget-title {
    color: white;
    font-size: 1.3rem !important;
    margin-bottom: 2rem;
    border-bottom: 1px solid #464D55;
    padding-bottom: 1rem !important;
}
.widget-title span {
    color: rgba(70, 77, 85, 1);
    font-size: 1.3rem;
}
.footer-menus {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.footer-menus a {
    color: #FFFEFE;
    font-size: .9rem;
    line-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: transform 0.5s;
}
.widget_recent_data {
    margin-top: 56px;
}
.footer-address {
    display: grid;
    grid-template-columns: repeat(2, 50%);
}
.footer-address-text:nth-child(3) {
    width: 200%;
}
/* 底部导航-end */




@media screen and (max-width: 768px) {
    .widget_recent_data {
        margin-top: 10px;
    }
    .widget-title,.widget-title span {
        font-size: 1.1rem !important;
    }
    .footer-menus a {
        font-size: .7rem;
    }
    .footer-middle {
        font-size: .7rem !important;
    }
    .footer-bottom {
        font-size: .7rem !important;
    }
}

@media screen and (max-width: 1200px) {
    .widget_recent_data_qrcode {
        width: 68px;
        height: 68px;
    }
}


/* 移动端头部菜单-start */

.nav_home {
    display: none;
    width: 100%;
    unicode-bidi: isolate;
    position: fixed;
    z-index: 1020;
    top: 0;
    left: 0;

    .nav_mob {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding: 20px;

        .row {
            --bs-gutter-x: 1.5rem;
            --bs-gutter-y: 0;
            display: flex;
            flex-wrap: wrap;
            margin-top: calc(-1 * 0);
            margin-right: calc(-.5 * 1.5rem);
            margin-left: calc(-.5 * 1.5rem);
        }

        .col {
            flex: 2 0 0;
            width: 100%;
            max-width: 100%;
            padding-right: calc(1.5rem * .5);
            padding-left: calc(1.5rem * .5);
            margin-top: 0;

            .logo {
                display: inline-block;
                position: relative;
                margin: auto;
                width: 100%;
                height: 100%;

                &:before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 153px;
                    height: 41px;
                    background: url(/static/gw/assets/images/logo-pc.png) no-repeat center center;
                    background-size: 100% 100%;
                    opacity: 1;
                }
            }
            .menu {
                display: inline-block;
                width: 32px;
                height: 41px;
                position: relative;
            }
            .menu_1 {
                width: 32px;
                height: 38px;
                background: url(/static/gw/assets/images/nav/icon_mob_menu.png) no-repeat center center;
                background-size: 100% 100%;
            }
            .menu_2 {
                width: 30px;
                height: 22px;
                background: url(/static/gw/assets/images/nav/icon_menu_pc.png) no-repeat center center;
                background-size: 100% 100%;
            }
        }

        .nemu_box {
            display: flex;
            justify-content: end;
        }
    }

    .nav_box {
        display: none;
        width: 96%;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0; 
        background-image: linear-gradient(to right, #FFFFFf, #D4EAFF);
        z-index: 999;

        .offcanvas_header {
            display: flex;
            align-items: center;
            justify-content: end;
            padding: 1rem 1rem;

            .btn-close {
                opacity: 1;
                font-size: 24px;
                margin-top: 8px;
                margin-right: 8px;
                box-sizing: content-box;
                width: 1em;
                height: 1em;
                padding: .25em .25em;
                color: #000;
                background: transparent url(/static/gw/assets/images/nav/delete.svg) center / 1em auto no-repeat;
                border: 0;
                border-radius: .375rem;
            }
        }

        .offcarnas_content {
            width: 100%;
            padding: 0 !important;
            border: 0px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: column;
            flex-grow: 1;
            overflow-y: auto;

            .content_box {
                padding-right: 1.5rem !important;
                padding-left: 1.5rem !important;

                .text_center {
                    text-align: center;

                    img {
                        vertical-align: middle;
                    }
                }
            }

            .sub-menu {
                width: 100%;
                color: #0d1c34 !important;
                margin-top: 30px;

                .menu-item-has-children {
                    padding: 20px 10px;
                    
                    h4 {
                        width: 100%;
                        color: #0d1c34 !important;
                        font-size: 16px;
                        font-weight: 500;
                        margin-bottom: 0;
                        text-align: left;
                        position: relative;
                    }
                    .xia {
                        width: 16px;
                        height: 16px;
                        background-image: url('/static/gw/assets/images/nav/xia.svg');
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: 100% 100%;
                        position: absolute;
                        top: 50%;
                        right: 12px;
                        transform: translateY(-50%);
                        transition: transform 0.2s ease-in-out;
                        &:hover {
                            transform: rotate(180deg);
                        }
                    }
                    .children-hide {
                        display: none;
                    }
                }
                .xiahua {
                    border-bottom: 1px solid #dee2e6;
                    &:last-child {
                        border-bottom: none;
                    }
                }
            }
        }
    }
}

/* 移动端头部菜单-end */