@charset "utf-8";
/* CSS Document */

* { margin: 0; padding: 0; list-style: none; word-break: break-all; -webkit-appearance: none; appearance: none;}
html { font-size: 15.625vw; background: #ececec;}
body { min-height: 100vh; padding-bottom: 0.4rem; box-sizing: border-box; color: #333; font-size: 0.2rem; font-weight: bold; min-height: 100vh; background: #fff; font-family: PingFang SC, Lantinghei SC, Helvetica Neue, Helvetica, Arial, Microsoft YaHei, \\5FAE\8F6F\96C5\9ED1, STHeitiSC-Light, simsun, \\5B8B\4F53, WenQuanYi Zen Hei, WenQuanYi Micro Hei, "sans-serif";}
a { color: inherit; display: inline-block; text-decoration: none;}
table { border-collapse: collapse; table-layout: fixed;}
img { border: 0; vertical-align: top;}


.wrapper { background: url(../images/bg.jpg) top center no-repeat; background-size: 100% auto; position: relative;}

.logo { padding-top: 0.35rem; text-align:  center;}
.logo img { width: 2.8rem; height: auto;}

.banner { padding-top: 0.25rem; text-align: center;}
.banner img { max-width: 100%; max-height: 5.08rem;}

/* 客服容器 */
.kefu-container { position: absolute; top: 1.1rem; right: 0; z-index: 1000;}

/* 主客服按钮 */
.kefu { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    width: 0.7rem; 
    height: 0.86rem; 
    color: #d19b17; 
    border: solid 1px #d19b17; 
    border-right: 0; 
    border-radius: 0.17rem 0 0 0.17rem; 
    background: linear-gradient(135deg, #fff 0%, #fefefe 100%);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 0.02rem 0.08rem rgba(209, 155, 23, 0.1);
}

.kefu:hover {
    background: linear-gradient(135deg, #faf4e2 0%, #f5edd1 100%);
    transform: scale(1.02);
    box-shadow: 0 0.04rem 0.12rem rgba(209, 155, 23, 0.2);
}

.kefu img { width: 0.4rem; height: 0.4rem;}
.kefu span { display: block;}

/* 客服选项容器 */
.kefu-options {
    position: absolute;
    top: 0;
    right: 0.7rem;
    background: #fff;
    border: 1px solid #d19b17;
    border-radius: 0.15rem;
    box-shadow: 0 0.08rem 0.25rem rgba(209, 155, 23, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateX(0.15rem) scale(0.95);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 1.4rem;
    overflow: hidden;
}

/* 展开状态 */
.kefu-options.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
}

/* 客服选项 */
.kefu-option {
    position: relative;
    padding: 0.15rem 0.25rem;
    color: #d19b17;
    font-size: 0.16rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    background: linear-gradient(135deg, #fff 0%, #fefefe 100%);
    border-bottom: 1px solid rgba(209, 155, 23, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.02rem;
}

.kefu-option:last-child {
    border-bottom: none;
    border-radius: 0 0 0.15rem 0.15rem;
}

.kefu-option:first-child {
    border-radius: 0.15rem 0.15rem 0 0;
}

.kefu-option:only-child {
    border-radius: 0.15rem;
}

/* 悬浮效果 */
.kefu-option:hover {
    background: linear-gradient(135deg, #faf4e2 0%, #f5edd1 100%);
    color: #b8891a;
    transform: translateX(-0.02rem);
    box-shadow: inset 0.02rem 0 0 #d19b17;
}

/* 添加微妙的光泽效果 */
.kefu-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.kefu-option:hover::before {
    left: 100%;
}

/* 客服选项文本样式 */
.kefu-hint {
    font-size: 0.14rem;
    color: #d19b17;
    font-weight: normal;
    line-height: 1;
    transition: all 0.25s ease;
}

.kefu-label {
    font-size: 0.18rem;
    color: #d19b17;
    font-weight: bold;
    line-height: 1;
    transition: all 0.25s ease;
}

.kefu-option:hover .kefu-hint {
    color: #b8891a;
}

.kefu-option:hover .kefu-label {
    color: #b8891a;
    transform: scale(1.05);
}

/* 客服按钮激活状态 */
.kefu.active {
    background: linear-gradient(135deg, #faf4e2 0%, #f5edd1 100%);
    border-radius: 0.17rem 0.15rem 0.15rem 0.17rem;
    box-shadow: 0 0.04rem 0.12rem rgba(209, 155, 23, 0.25);
    transform: scale(1.02);
}

.main { padding-top: 0.2rem; position: relative;}
.main ul.navi { width: 70%; margin: 0 auto;}
.main ul.navi li { cursor: pointer; display: flex; margin-top: 0.2rem;}
.main ul.navi li img { width: 100%; height: auto;}
.main ul.navi li.active img { filter: brightness(1.1);}

.pop { width: 90%; padding: 0.25rem; font-size: 0.18rem; box-sizing: border-box; border-radius: 0.1rem; border: solid 1px #d19b17; position: absolute; left: 0; right: 0; bottom: 2.6rem; margin: auto; background: #fff; display:none}

.line-tit { text-align: left; color: #666; font-weight: normal;}
.line-down { padding: 0.15rem 0 0.2rem 0; color: #fff;}
.line-down a { display: flex; justify-content: center; align-items: center; padding: 0.1rem 0; font-weight: bold; font-size: 0.24rem; border-radius: 0.2rem; background: linear-gradient( #ff484a, #cf2414);}
.line-down img { width: 0.4rem; height: 0.4rem; margin-right: 0.1rem;}
.linebox ul li { padding-bottom: 0.1rem;}
.linebox ul li:last-child { padding-bottom: 0;}
.linebox ul li a { display: flex; cursor: default;}
.linebox ul li a .linetime { width: 0.8rem; height: 0.4rem; line-height: 0.4rem; text-align: center; border: solid 1px #d19b17; margin-right: 0.1rem; background: #fff;}
.linebox ul li a .linetime em { color: #000; font-style: normal;}
.linebox ul li a .linetime b { color: #000; font-weight: normal;}
.linebox ul li a .lineweb { display: none; flex: 1; height: 0.4rem; line-height: 0.4rem; text-align: center; border-radius: 0.15rem; margin-right: 0.1rem; background: #fff;}
.linebox ul li a .lineimg { line-height: 0.4rem; margin-right: 0.1rem;}
.linebox ul li a .lineimg img { width: 0.3rem; vertical-align: middle;}
.linebox ul li a .linetxt { flex: 1; height: 0.4rem; line-height: 0.4rem; text-align: center; border: solid 1px #d19b17; margin-right: 0.1rem; background: #fff;}
.linebox ul li a .linebtn { cursor: pointer; width: 1.2rem; height: 0.4rem; line-height: 0.4rem; text-align: center; color: #fff; border-radius: 0.05rem; border: solid 1px #d19b17; border: solid 1px #d19b17; background: #d19b17;}

.ielist li { padding-bottom: 0.15rem;}
.ielist li:last-child { padding-bottom: 0;}
.ielist li a { display: flex; justify-content: center; align-items: center; height: 0.6rem; font-size: 0.24rem; border: solid 1px #d19b17; background: #faf4e2;}
.ielist li img { width: 0.4rem; height: 0.4rem; margin-right: 0.1rem;}

.downlist { text-align: center;}
.downlist li:last-child { border-top: solid 1px #eee;}
.downlist li a { display: flex; justify-content: center; align-items: center; height: 0.8rem; background: #fff;}
.downlist li div { display: flex; align-items: center; flex: 1;}
.downlist li div img { width: 0.4rem; height: 0.4rem; margin-right: 0.1rem;}
.downlist li span { display: block; width: 2.48rem; height: 0.45rem; line-height: 0.45rem; color: #fff; border-radius: 1rem; background: #d19b17;}

@media screen and (min-width:450px) {
.banner img { height: 45vh;}
.main ul.navi { width: 65%;}
.main ul.navi li { margin-top: 0.15rem;}
.pop { bottom: 2.35rem;}

/* 客服选项在中等屏幕上的优化 */
.kefu-options {
    min-width: 1.6rem;
}

.kefu-option {
    padding: 0.18rem 0.3rem;
    font-size: 0.17rem;
}

.kefu-hint {
    font-size: 0.15rem;
}

.kefu-label {
    font-size: 0.19rem;
}
}

@media screen and (min-width:640px) {
html { font-size: 100px;}
body { width: 640px; margin: 0 auto;}
.main ul.navi { width: 60%;}
.pop { bottom: 2.2rem;}

/* 客服选项在大屏幕上的优化 */
.kefu-options {
    min-width: 1.8rem;
}

.kefu-option {
    padding: 0.2rem 0.35rem;
    font-size: 0.18rem;
}

.kefu-hint {
    font-size: 0.16rem;
}

.kefu-label {
    font-size: 0.2rem;
}

.kefu-option:hover {
    transform: translateX(-0.03rem);
}
}