﻿.footer-service{ width: 100%; height: auto; background: #FFFFFF; padding: 25px 0;}
.footer-service dl dd{ padding-left: 20px;}
.footer-service dl dd b{ display: block; font-size: 1.4rem;}
.footer-service dl dd em{ display: block;}


.footer-box{ height: auto; padding: 50px 0; background: #ecedf0;}
.footer-box-left{ width: 40%; padding-right: 180px;}
.footer-logo{ width: 242px; height: 62px;}
.footer-logo a{ display: block; width: 242px; height: 62px; background: url(../images/logo.png) no-repeat;}
.footer-box-left p{ line-height: 20px; margin-top: 15px;}

.footer-box-left .footer-share{ width: 100%; margin-top: 20px;}
.footer-box-left .footer-share a{ display: block; width: 40px; height: 40px; font-size: 1.2rem; text-align: center; line-height: 40px; background: #FFFFFF; border-radius: 6px; margin-right: 10px;}

.footer-box-right{ width: 60%; }

.footer-box-right dl:last-child{ width: 305px;}
.footer-box-right dl{}
.footer-box-right dl dt{ color: #111111; font-size: 1.2rem; font-weight: bold; line-height: 22px;}
.footer-box-right dl dd{ width: 100%; padding-top: 12px;}
.footer-box-right dl dd a{ display: block; background: url(../images/footer-alink.png) no-repeat left center; padding-left: 15px;}
.footer-box-right dl dd p{ margin-bottom: 5px;}
.footer-box-right dl dd p em{ display: block; width: 16px;}
.footer-box-right dl dd p em img{ vertical-align: middle; }
.footer-box-right dl dd p i{ display: block; width: calc(100% - 16px); padding-left: 8px;}




.footer-copy{ width: 100%; line-height: 20px; padding: 18px 0; background: #0093e6; color: #FFFFFF;}
.footer-copy span a{ display: inline-block; color: #FFFFFF;}
.footer-copy span a:after{ content: "|"; padding: 0 15px;}
.footer-copy span a:last-child:after{ content: "";}

.fposi{ display: none;}


.customerList{ width:60px; height:auto; position: fixed; right: 0; top: 30%;}
.customerList a b{ display: block; color: #FFFFFF !important; font-size: 14px; line-height: 21px; font-weight: normal;}

.customerBox{ margin-top: 5px; width: 60px; height: auto; background: #f9f9f9; border-radius: 12px  0px  0px  12px; box-shadow: 3px 3px 20px 0 rgba(0,0,0,.1);}
.customerBox a{ display: block; text-align: center; position: relative; width: 100%; height: 46px; padding: 10px 0;}
.customerBox a.custicon1{ background: url(../images/custicon1.png) no-repeat center;}
.customerBox a.custicon2{ background: url(../images/eso_cuicon7.png) no-repeat center;}
.customerBox a.custicon3{ background: url(../images/custicon3.png) no-repeat center;}
.customerBox a.custicon4{ background: url(../images/custicon4.png) no-repeat center;}
.customerBox a.custicon5{ background: url(../images/custicon5.png) no-repeat center;}
.customerBox a .eso_divinfo{ display:none; position:absolute; min-width:200px; right:60px; top:0; background:#fff;  box-shadow: 3px 3px 10px 0 rgba(0,0,0,.1); padding:25px; border-radius:5px; }
.customerBox a .eso_divinfo:before{
    content:""; position:absolute; right:-12px; top:50%; margin-top:-12px; 
width:0;
height:0;
border-top:12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 12px solid #fff;
}
.customerBox a:hover .eso_divinfo{ display: block;}




@media (max-width: 768px) {

footer{ display: none;}
.footer-service{ display: none;}
.fposi {
    width: 100%;
    height: 66px;
    background: #1a2447;
    position: fixed;
    left: 0;
    bottom: 0;
    display: block;
    z-index: 999;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.16);
}

.fposi a {
    display: block;
    float: left;
    width: 25%;
    height: 66px;
    text-align: center;
    color: #ffffff !important;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    box-sizing: border-box;
    padding-top: 8px;
}

.fposi a:last-child {
    border-right: none;
}

.fposi a i {
    display: block;
    width: 100%;
    height: 28px;
    line-height: 28px;
    font-size: 24px;
    color: #ffffff;
}

.fposi a p {
    line-height: 24px;
    font-size: 0.85rem;
    color: #ffffff;
}

.fposi a:hover,
.fposi a:active {
    background: #0093e6;
    color: #ffffff !important;
}

.fposi a:hover i,
.fposi a:active i,
.fposi a:hover p,
.fposi a:active p {
    color: #ffffff;
}
.customerList{ display: none;}





}