/**
 * 统一的多语言选择器样式
 * 支持PC端和移动端
 */

/* 语言选择器容器 */
.lang_en {
    position: absolute;
    right: 0.5rem;
    top: 0.3rem;
    width: 0.94rem;
    height: 0.27rem;
    border: 0.01rem solid #fff;
}

/* PC端使用固定像素值或百分比 */
@media (min-width: 768px) {
    .lang_en {
        right: 50px;
        top: 30px;
        width: 94px;
        height: 27px;
        border: 1px solid #fff;
    }
    
    /* 某些页面可能需要使用百分比定位 */
    .part_pay_banner .lang_en {
        right: 10%;
    }
}

/* 下拉框容器 */
.area1 {
    height: 0.27rem;
    line-height: 0.27rem;
    position: relative;
    cursor: pointer;
}

@media (min-width: 768px) {
    .area1 {
        height: 27px;
        line-height: 27px;
    }
}

/* 当前语言显示 */
.area1 span {
    color: #fff;
    font-size: 0.18rem;
    display: block;
    border-right: 0.01rem solid #fff;
    float: left;
    width: 0.65rem;
    height: 0.25rem;
    text-align: center;
    line-height: 0.24rem;
}

@media (min-width: 768px) {
    .area1 span {
        font-size: 18px;
        border-right: 1px solid #fff;
        width: 65px;
        height: 25px;
        line-height: 24px;
    }
}

/* 下拉箭头图标 */
.area1 i {
    position: absolute;
    top: 0.07rem;
    right: 0.09rem;
    width: 0.1rem;
    height: 0.09rem;
    display: inline-block;
    background: url(../images/row_up.png) no-repeat;
    background-size: 0.1rem 0.09rem;
}

@media (min-width: 768px) {
    .area1 i {
        top: 7px;
        right: 9px;
        width: 10px;
        height: 9px;
        background-size: 10px 9px;
    }
}

/* 下拉菜单列表 */
.area1 ul {
    position: absolute;
    left: -0.01rem;
    top: 0.25rem;
    border-bottom: 0.02rem solid #000;
    background-color: #fff;
    width: 0.94rem;
    border: 0.01rem solid #04528e;
    cursor: default;
    display: none;
    z-index: 999;
}

@media (min-width: 768px) {
    .area1 ul {
        left: -1px;
        top: 25px;
        border-bottom: 2px solid #000;
        width: 94px;
        border: 1px solid #04528e;
        z-index: 3;
    }
}

/* PC端hover效果 */
@media (hover: hover) {
    .area1:hover ul {
        display: block;
        z-index: 999;
    }
    
    @media (min-width: 768px) {
        .area1:hover ul {
            z-index: 3;
        }
    }
    
    .area1:hover i {
        width: 0.1rem;
        height: 0.09rem;
        display: inline-block;
        background: url(../images/row_down.png) no-repeat;
        background-size: 0.1rem 0.09rem;
    }
    
    @media (min-width: 768px) {
        .area1:hover i {
            width: 10px;
            height: 9px;
            background-size: 10px 9px;
        }
    }
}

/* 移动端禁用hover，完全依赖JavaScript控制 */
@media (hover: none) {
    .area1:hover ul {
        display: none !important;
    }
    
    .area1:hover i {
        width: 0.1rem;
        height: 0.09rem;
        display: inline-block;
        background: url(../images/row_up.png) no-repeat;
        background-size: 0.1rem 0.09rem;
    }
    
    @media (min-width: 768px) {
        .area1:hover i {
            width: 10px;
            height: 9px;
            background-size: 10px 9px;
        }
    }
}

/* 激活状态（JavaScript控制） */
.area1.active ul {
    display: block !important;
    z-index: 999;
}

@media (min-width: 768px) {
    .area1.active ul {
        z-index: 3;
    }
}

.area1.active i {
    width: 0.1rem;
    height: 0.09rem;
    display: inline-block;
    background: url(../images/row_down.png) no-repeat;
    background-size: 0.1rem 0.09rem;
}

@media (min-width: 768px) {
    .area1.active i {
        width: 10px;
        height: 9px;
        background-size: 10px 9px;
    }
}

/* 下拉菜单项 */
.area1 ul li {
    height: 0.32rem;
    line-height: 0.32rem;
    cursor: pointer;
    text-align: center;
    font-size: 0.14rem;
}

@media (min-width: 768px) {
    .area1 ul li {
        height: 32px;
        line-height: 32px;
        font-size: 14px;
    }
}

/* 分隔线 */
.area1 ul li.line {
    height: 1px;
    margin: 11px 0;
    padding: 0;
    background-color: #373d41;
    margin-top: 8px;
    margin-bottom: 8px;
}

/* 语言选项链接 */
.area1 ul li a {
    display: block;
    height: 100%;
    white-space: nowrap;
    color: #0a0b0c;
    font-size: 0.18rem;
    text-decoration: none;
}

@media (min-width: 768px) {
    .area1 ul li a {
        font-size: 18px;
    }
}

.area1 ul li a:hover {
    color: #e44c5a;
}

.area1 ul li a span {
    display: inline-block;
    width: 1.02rem;
}

@media (min-width: 768px) {
    .area1 ul li a span {
        width: 102px;
    }
}