﻿
.footer-service{margin-top: 20px;}
.footer-service dl{ background: #FFFFFF; box-shadow: 0px 0px 16px 1px rgba(27,58,125,0.12); border-radius:8px; width: 24%; padding: 25px 30px;}
.footer-service dt{ width: 46px; height: 46px;}
.footer-service dd{ width: calc(100% - 46px); padding-left: 12px;}
.footer-service dd b{ display: block; font-size: 1.4rem;}
.footer-service dd em{ display: block;}




.fmail{ background: #00050e; border:3px solid #FFFFFF; padding: 35px 50px; position: relative; margin-bottom: -68px; z-index: 333;}
.fmail-left{ width: 50%; color: #FFFFFF; padding-right: 50px;}
.fmail-left h2{ font-size: 1.2rem; color: #c1c2c4; line-height: 28px;}
.fmail-left h3{ font-size: 1.5rem; color: #FFFFFF; line-height: 22px; margin-top: 10px;}

.fmail-right{ background: #FFFFFF; width: 50%; height: 60px; padding: 2px 2px 2px 20px;}
.fmail-right input{ width: 80%; height: 56px; padding: 0 35px; border: none; background: url(../images/fmail.png) no-repeat left center;}
.fmail-right button{ width: 20%; height: 56px; border: none; text-align: center; background: #EE2328; color: #FFFFFF;}
.fmail-right button:hover{ background: #000000;}

footer{}

.footer-box{ width: 100%; height: auto; background: url(../images/footer.jpg) no-repeat center; color: #FFFFFF; padding: 130px 0 65px 0;}

.footer-box-left{ width: auto; max-width: 365px;}
.footer-box-left img{ max-width: 100%; height: auto; margin-top: 15px;}
.footer-box-left h2{ color: #FFFFFF; font-size: 1.3rem; line-height: 42px; margin-bottom: 10px;}

.footer-box-menu{}
.footer-box-menu dl{ margin: 0 55px;}
.footer-box-menu dl dt{color: #FFFFFF; font-size: 1.3rem; line-height: 42px; margin-bottom: 10px; font-weight: bold;  font-family: myFirstFont1;}
.footer-box-menu dl dd a{ display: block; line-height: 24px; color: #FFFFFF; background: url(../images/flinks.png) no-repeat left center; padding-left: 15px;}
.footer-box-menu dl dd a:hover{ text-decoration: underline;}


.footer-box-right{width: auto;  max-width: 300px;}
.footer-box-right h2{ color: #FFFFFF; font-size: 1.3rem; line-height: 42px; margin-bottom: 10px;}
.footer-box-right p{ color: #B9B9B9; margin-bottom: 10px;}
.footer-box-right li{ margin: 5px 0;}
.footer-box-right li a{ padding-left: 10px; color: #FFFFFF;}
.footer-box-right li a:hover{ text-decoration: underline;}

.footer-iso{ width: 100%; height: auto; background: #FFFFFF; padding: 25px 0; }
.footer-iso img{ width: 100%; height: auto;}

.footer-copy{ width: 100%; height: auto; background: #FFFFFF; padding: 15px 0; border-top:2px solid #e4e4e4;}
.footer-copy span{ display: block;}
.footer-copy span a:first-child:after{ content: "•"; padding: 0 15px;}


.fposi{ display: none;}
.optain{ display:none;}

.customerList{ width:60px; height:auto; position: fixed; right: 0; top: 30%; z-index:999; }
.customerList a b{ display: block; color: #FFFFFF !important; font-size: 14px; line-height: 21px; font-weight: normal;}

.customerBox{ width: 60px; height: auto;  }
.customerBox a{ display: block; text-align: center; position: relative; width: 60px; height: 60px; line-height:60px; color:#fff; margin-bottom:1px; font-size:1.8rem; background: #EE2328; border-radius: 6px  0px  0px  6px; }
.customerBox a.fa-teams{background: #EE2328 url(../images/teams.png) no-repeat; }
.customerBox a.fa-teams:hover{background: #EE2328 url(../images/teams.png) no-repeat;}
.customerBox a:hover{ text-decoration:none; background:#111;}
.customerBox a .eso_divinfo{ display:none; position:absolute;  right:60px; top:0; min-width:260px; background:#fff; color:#EE2328; font-size:1rem;  box-shadow: 3px 3px 10px 0 rgba(0,0,0,.1); padding:10px; border-radius:6px; }
.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;}
.customerBox a:hover .eso_divinfo img{ width:150px; height:150px;}


/* =========================
   Form Loading
========================= */
.form-loading-mask {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99998;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.45);
    display: none;
}

.form-loading-box {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 99999;
    transform: translate(-50%, -50%);
    min-width: 150px;
    padding: 28px 26px 24px;
    background: #fff;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0,0,0,0.22);
}

.form-loading-spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 15px;
    border-radius: 50%;
    border: 4px solid rgba(238,35,40,0.18);
    border-top-color: #EE2328;
    animation: formLoadingRotate .8s linear infinite;
}

.form-loading-text {
    color: #333;
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
}

@keyframes formLoadingRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* =========================
   Form Popup
========================= */
.form-popup-mask {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99990;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
    display: none;
}

.form-popup {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 99991;
    width: 92%;
    max-width: 420px;
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0;
    visibility: hidden;
    transition: all .25s ease;
}

.form-popup.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.form-popup-box {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 42px 30px 32px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0,0,0,0.22);
    overflow: hidden;
}

.form-popup-box:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 6px;
    background: #EE2328;
}

.form-popup-close {
    position: absolute;
    right: 18px;
    top: 14px;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    color: #999;
    font-size: 26px;
    text-decoration: none;
    transition: all .2s ease;
}

.form-popup-close:hover {
    color: #EE2328;
    transform: rotate(90deg);
}

.form-popup-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(238,35,40,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-popup-icon i {
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 50%;
    background: #EE2328;
    color: #fff;
    font-size: 28px;
    font-style: normal;
    font-weight: bold;
    display: block;
}

.form-popup-title {
    color: #222;
    font-size: 22px;
    line-height: 30px;
    font-weight: bold;
    margin-bottom: 10px;
}

.form-popup-text {
    color: #666;
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 26px;
}

.form-popup-btn a {
    display: inline-block;
    min-width: 128px;
    height: 44px;
    line-height: 44px;
    border-radius: 24px;
    background: #EE2328;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    transition: all .25s ease;
}

.form-popup-btn a:hover {
    background: #d71920;
    box-shadow: 0 8px 18px rgba(238,35,40,0.28);
}


/* =========================
   Success State
========================= */
.form-popup.success .form-popup-box:before {
    background: #EE2328;
}

.form-popup.success .form-popup-icon {
    background: rgba(238,35,40,0.10);
}

.form-popup.success .form-popup-icon i {
    background: #EE2328;
}


/* =========================
   Error State
========================= */
.form-popup.error .form-popup-box:before {
    background: #EE2328;
}

.form-popup.error .form-popup-icon {
    background: rgba(238,35,40,0.10);
}

.form-popup.error .form-popup-icon i {
    background: #EE2328;
}


/* =========================
   Button Loading State
========================= */
button.form-btn-loading,
button.form-btn-loading:hover {
    opacity: .72;
    cursor: not-allowed;
}


@media (max-width: 768px) {

.footer-service{ display: none;}
.fmail{ display: none;}
.footer-box{ display: none;}
.footer-iso{ display: none;}
.footer-copy{ margin-bottom: 70px; text-align: center;}



.fposi{ width:100%; height:70px; background:#EE2328; position:fixed; left:0; bottom:0; display:block; z-index:999;}
.fposi a{ display:block; float:left; text-align:center; width:25%; height:70px; color:#fff !important; border-right:1px solid #eee;  box-sizing: border-box; }
.fposi a:last-child{ border:none}
.fposi a img{ width:30px; height:auto; padding-top:8px;}
.fposi a p{ line-height:32px; font-size:0.9rem}
.customerList{ display: none;}


.optain{ display:none; background:rgba(0,0,0,.5); width:100%; height:100%; position:fixed; left:0; top:0; z-index:999;}
.optain-close{ width:27px; height:27px; background:url(../images/close.png) no-repeat; cursor:pointer; position: absolute; right:20px; top:120px;}
.optain-search{width:100%; height:100%; }
.optain-search-box{ width:94%; margin:0 auto;}
.optain-search-box input{ width:80%; height:42px; line-height:42px; background:#fff; border-radius:4px 0 0 4px; border:none; padding:0 15px; font-size:0.9rem;}
.optain-search-box button{ width:20%; height:42px; line-height:42px; background:#EE2328; border-radius:0 4px 4px 0; color:#fff; font-size:1.2rem; border:none;}

 .form-popup-box {
        padding: 38px 22px 28px;
        border-radius: 16px;
    }

    .form-popup-title {
        font-size: 20px;
        line-height: 28px;
    }

    .form-popup-text {
        font-size: 14px;
        line-height: 23px;
    }

    .form-loading-box {
        min-width: 135px;
        padding: 24px 22px 21px;
    }

}