﻿body {float: left;width: 100%;margin: 0px;padding: 0px;}
.extension {float: left;width: 100%;display: flex;justify-content: center;}
.extension .ext-container {/*width: 600px;*/width:100%;font-size: 24px;font-family: Helvetica, Arial, sans-serif;}
.extension .ext-container .ext-head {height: 60px;line-height: 60px;position: relative;}
.extension .ext-container .ext-head, .extension .ext-container .main-article, .extension .ext-container .main-article .menu-body {width: 100%;float: left;}
.extension .ext-container .ext-head a {height: 100%;float: left;text-decoration: none;position:relative;}
.extension .ext-container .ext-head a .goback, .extension .ext-container .ext-head a .gohome {height: 100%;float: left;}
.extension .ext-container .ext-head a .goback .fa,
.extension .ext-container .ext-head a .gohome .fa {float: left;height: 100%;width: 30px;padding-left: 10px;display: flex;align-items: center;justify-content: center;color: white;font-size: 30px;font-weight: bold;}
.extension .ext-container .ext-head a .goback .fa {float: right;}
.extension .ext-container .ext-head a .gohome .fa {padding-right: 10px;padding-left: 0px;justify-content: flex-start;font-size: 24px;font-weight: lighter;}
.extension .ext-container .ext-head .ext-title {line-height: 70px;height: 60px;text-align: center;font-size: 24px;font-family: Helvetica, Arial, sans-serif;color: white;;float: left;width: calc(100% - 80px);display: flex;align-items: center;justify-content: center;}
.extension .ext-container .main-article .menu-body .menu {margin: 0px;padding: 0px;list-style-type: none;background: white;width: 100%;float: left;border-bottom: 1px solid #efefef;}
.extension .ext-container .main-article .menu-body .menu .menu-item {float: left;width: 100%;display: flex;align-items: center;justify-content: center;height: 50px;}
.extension .ext-container .main-article {height: calc(100vh - 60px);background: #f6f7f9;}
.extension .ext-container .main-article .menu-body .menu-group {height: 30px;float: left;background-color: #f6f7f8;width: 100%;border-bottom: 1px solid #efefef;box-sizing: border-box;}
.extension .ext-container .main-article .menu-body .menu .menu-item a > .fa {width: 50px;float: left;height: 50px;padding: 6px 0px;box-sizing: border-box;text-align: center;display: flex;align-items: center;justify-content: center;}
.extension .ext-container .main-article .menu-body .menu .menu-item a {text-decoration: none;color: black;width: 100%;float: left;}
.extension .ext-container .main-article .menu-body .menu .menu-item a div[class$=content] {border-bottom: 1px solid #efefef;padding: 10px 0px 6px 0px;float: left;width: calc(100% - 50px);height: 50px;box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.extension .ext-container .main-article .menu-body .menu .menu-item:last-child a div[class$=content] {border: none;}
.extension .ext-container .main-article .menu-body .menu .menu-item a div[class$=content] .fa {width: 35px;height: 28px;padding-top: 0px;padding-right: 10px;float: right;text-align: center;display: flex;align-items: center;justify-content: center;color: rgb(200, 200, 200);}
.extension .ext-container .main-article .menu-body .menu .menu-item:hover a div[class$=content] .fa {color: black;}
/*--start block*/
.extension .ext-container .main-article .ext-block-body {float: left;width: 100%;}
.extension .ext-container .main-article .ext-block-body .group-div {float: left;width: 100%;background: #f6f7f9;height: 30px;border-bottom: 1px solid #efefef;border-top: 1px solid #efefef;font-size: 12px;color: #4e5665;display: flex;align-items: flex-end;padding-left: 5px;padding-bottom: 3px;box-sizing: border-box;}
.extension .ext-container .main-article .ext-block-body .group-div:first-child .sort {width: 120px;display: flex;justify-content: flex-start;}
.extension .ext-container .main-article .ext-block-body .group-div:first-child .switch {width: calc(100% - 140px);display: flex;justify-content: flex-end;letter-spacing: 1px;}
.extension .ext-container .main-article .ext-block-body .group-div:not(:first-child) .switch {width: calc(100% - 20px);display: flex;justify-content: flex-end;letter-spacing: 1px;}
.extension .ext-container .main-article .ext-block-body .ext-block-group {width: 100%;float: left;/**/background-color: #fff;}
.extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block {/*width: 100%;*/width:calc(100% / 4);float: left;height: 80px;background-color: #fff;}
.extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content {float: left;background-color: #fff;width: calc(100% - 10px);margin-left: 10px;box-sizing: border-box;height: 100%;display: flex;align-items: center;}
.extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .head-pic {width: 60px;height: 68px;float: left;background: #fff;margin: 0px;padding: 0px;}
.extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .head-pic img {border-radius: 50%;}
.extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-data {
    float: left;
    width: calc(100% - 60px - 10px - 120px);
    height: 100%;
    background-color: #fff;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid #e2e2e2;
    min-width: 120px;
}
/*.extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block:last-child .ext-block-content .ext-block-data {border-bottom: none;}*/
.extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-phone {float: left;height: 100%;background-color: #fff;display: flex;align-items: center;justify-content: flex-end;box-sizing: border-box;padding-right: 10px;border-bottom: 1px solid #e2e2e2;}
/*.extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block:last-child .ext-block-content .ext-block-phone {border-bottom: none;}*/
.extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-phone .ext-phone {
    height: 35px;
    min-width: 110px;
    font-size: 20px;
    border-radius: 3px;
    border: 1px solid black;
    border-color: rgba(0, 0, 0, .10) rgba(0, 0, 0, .155) rgba(0, 0, 0, .29);
    background-color: #f6f7f9;
    /*background-image: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));*/
    box-sizing: border-box;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b4f56;
    padding-left: 5px;
    padding-right: 5px;
    white-space: nowrap;
}
.extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-phone .ext-phone .fa {padding-right: 5px;width: auto;color: #3b5998;}
.extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-data .ext-block-content-line {margin-bottom: 5px;float: left;width: 100%;font-size: 14px;display: flex;align-items: flex-end;}
.extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-data .ext-block-content-line:nth-child(2) {color: #90949c;}
.extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-data .ext-block-content-line .ext-block-content-line-name {margin-right: 5px;font-size: 20px;font-weight: bold;float: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;flex-shrink: 0;}
/*--end block*/
/*i5*/
@media screen and (max-width:369px){
    .extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-data {margin-left: 3px;}
    .extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-phone {width: calc(100% - 10px - 68px - 3px - 100px - 5px);}
    .extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-phone .ext-phone {min-width: 80px;font-size: 16px;padding-left: 5px;}
    .extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-data .ext-block-content-line {font-size: 12px;}
    .extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-data .ext-block-content-line .ext-block-content-line-name {font-size: 20px;font-weight: 600;}
    .extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-phone .ext-phone .fa {padding-right: 3px;}
}
/* i6*/
@media screen and (max-width:380px) and (min-width:370px) {
    .extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-data {min-width: 130px;}
    .extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-phone {width: calc(100% - 68px - 10px - 120px - 10px);}
    .extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-phone .ext-phone {padding-left: 5px;}
    .extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-phone .ext-phone .fa {padding-right: 3px;}
}
/*i6p*/
@media screen and (max-width:425px) and (min-width:381px) {
    .extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-data {min-width: 180px;}
    .extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-phone {width: calc(100% - 68px - 10px - 160px - 10px);}
    .extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-phone .ext-phone {padding-left: 5px;}
    .extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-phone .ext-phone .fa {padding-right: 3px;}
}
@media screen and (max-width:520px) and (min-width:426px) {
    .extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-data {width: 300px;}
    .extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block .ext-block-content .ext-block-phone .ext-phone {width: 100%;}
}
@media screen and (max-width:616px) {
    .extension .ext-container {width: 100%;box-sizing: border-box;}
}

@media screen and (max-width: 700px) {
    .extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block {width: 100%;}
    .extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block:last-child .ext-block-content .ext-block-data {border-bottom: none;}
    .extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block:last-child .ext-block-content .ext-block-phone {border-bottom: none;}
}

@media screen and (min-width: 1050px) and (max-width: 1400px) {
    .extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block {width: calc(100% / 3);}
}

@media screen and (min-width: 701px) and (max-width: 1049px) {
    .extension .ext-container .main-article .ext-block-body .ext-block-group .ext-block {width: calc(100% / 2);}
}