/*
    <link href="css/page/home/fastsign-home-main.css?1.23.6121.130" rel="stylesheet" />
    <link href="css/page/home/fastsign-home-page.css?1.22.7151.130" rel="stylesheet" />
    <link href="css/page/home/fastsign-home-disk-used-progressbar.css?1.22.7221.130" rel="stylesheet" />
    <link href="css/page/home/fastsign-uploadfile-block.css?1.20.641.130" rel="stylesheet" />
    <link href="css/page/home/fastsign-uploadfile-popup-box.css?1.21.10211.130" rel="stylesheet" />
    <link href="css/page/home/fastsign-recent-tasks-popup-box.css" rel="stylesheet" />
    <link href="css/page/home/fastsign-self-sign-popup-box.css?1.21.5171.130" rel="stylesheet" />
    <link href="css/page/home/fastsign-query-page-main.css?1.21.3191.130" rel="stylesheet" />
    <link href="css/page/home/fastsign-file-cabinet-class-popup-box.css?1.20.5271.130" rel="stylesheet" />
    <link href="css/page/home/fastsign-faq.css?1.20.1281.130" rel="stylesheet" />
    <link href="css/page/home/fastsign-address-book.css?1.21.1291.130" rel="stylesheet" />
    <link href="css/page/home/fastsign-barch-popup-box.css?1.21.3221.130" rel="stylesheet" />
    <link href="css/page/home/fastsign-user-list.css?1.21.8161.130" rel="stylesheet" />
    <link href="css/page/home/fastsign-sign-record-detail-popup-box.css?1.21.5171.130" rel="stylesheet" />
    <link href="css/page/home/fastsign-process-box.css?1.21.761.130" rel="stylesheet" />
    <link href="css/page/home/fastsign-abgne-marquee.css?1.21.8191.130" rel="stylesheet" />
*/

/*css/page/home/fastsign-home-main.css*/
.main {
    margin: 0;
    padding: 0;
    background-color: #3e63a3;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow: hidden;
    float: left;
}
.main-left {
    margin: 0;
    background-color: #3e63a3;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow: hidden;
    float: left;
    padding-top: 30px;
    padding-bottom: 30px;
}
.main-right {
    margin: 0;
    padding: 0;
    background-color: #fff;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-shadow: -4px -4px 4px rgba(20%,20%,40%,0.4);
    overflow: hidden;
    float: left;
}
.main-left-top-tool { overflow: hidden; }
.main-left-logo { position: absolute; overflow: hidden; }
.logo img {
    height: auto;
    max-width: 80%;
    max-height: 100%;
    margin-left: 10%;
}
.version {
    white-space: nowrap;
    color: #ffffff;
}
.main-left .main-left-top-tool .main-left-button img {
    width: 70%;
    height: auto;
    cursor: pointer;
    margin: 15%;
}
.main-left .main-left-top-tool .main-left-button:hover {
    background: #132F63;
    border-radius: 100%;
    box-shadow: 1px 4px 4px rgba(20%,20%,40%,0.5);
}
.main-left .main-left-top-tool .button-leave {
    opacity: 0.7;
    filter: alpha(opacity=70);
}
.main-left .main-left-top-tool .button-focus {
    opacity: 1;
    filter: alpha(opacity=100);
    background: #25B9D3;
    border-radius: 100%;
    box-shadow: 1px 4px 4px rgba(20%,20%,40%,0.2);
}
.main-right .title {
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 1px solid #3e63a3;
}
.main-right .title div {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   height: 100%;
   float: left;
}
.main-right .title .nav-tool div {
   float: right;
}
.main-right .title .nav-tool .tool-button img {
    cursor: pointer;
}
.main-right .title .nav-tool .tool-button img:hover {
    background: rgb(255, 230, 0);
    border-radius: 100%;
}
.main-right .title .user-info .user-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    color: #484848;
}
.main-right .title .user-info .user-icon {
    box-shadow: 3px 3px 10px rgba(20%,20%,40%,0.4);
    border-radius: 100%;
    cursor: pointer;
}
.main-right .title .user-info .user-icon:hover {
    box-shadow: 3px 3px 10px rgb(33, 179, 252);
}
.popup-box .content fieldset {
    padding: .35em .625em .75em;
    margin: 2px 2px 20px 2px;
    padding: 20px 5px 20px 5px;
    border: 1px solid rgba(20%,20%,40%,0.4);
    box-shadow: 1px 4px 4px rgba(20%,20%,40%,0.2);
}
.popup-box .content fieldset:hover {
    border: 1px solid #66afe9;
}
.popup-box .content fieldset legend {
    padding: .5em;
    margin-bottom: -15px;
    border: 0px;
    width: auto;
    font-size: inherit!important;
}
label[question] {
    margin-left: 10px;
    font-size: 120%;
    color: #FB3D3D;
    border-radius: 100%;
}
label[question]:hover {
    color: #FA1B1B;
    border: 2px solid #FF0000;
    box-shadow: 0 0 6px rgba(250, 27, 27, 0.6);
}
.main-right .title .buy div {
    float: left;
}
.main-right .title .buy label {
    margin-bottom: 0px;
}
.main-right .title .buy .left, .main-right .title .buy .content-text, .main-right .title .buy .right {
    height: 100%;
    background-color: #0978F9;
}
.main-right .title .buy .left, .main-right .title .buy .right {
    width: 25px;
}
.main-right .title .buy .left {
    border-radius: 100% 0 0 100%;
}
.main-right .title .buy .content-text {
    margin: 0px -1px 0px -1px;
    letter-spacing: 3px;
    color: #ffffff;
}
.main-right .title .buy .right {
    border-radius: 0 100% 100% 0;
}

/*css/page/home/fastsign-home-page.css*/
.main-right .home-page .index-block .welcome {
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.main-right .home-page .index-block .welcome .maintitle {
    color: #6199db;
    font-weight: bold;
}
.main-right .home-page .index-block .welcome .subtitle {
    margin-left: 15px;
    color: #6199db;
    font-weight: 400;
}
.main-right .home-page .index-block .novice-teaching {
    width: calc(100% - 6px) !important;
    float: left;
    border-radius: 8px;
    margin-left: 0px;
    margin-right: 6px;
    border: 1px solid #ccc;
}
.main-right .home-page .index-block .novice-teaching ul li {
    float:left;
    margin-right:25px;
}
.main-right .home-page .index-block .novice-teaching ul li a {
    color: #333;
    font-weight: bold;
}
.main-right .home-page .index-block .license .authorized-target {
    margin-left: 5px;
}
.main-right .home-page .index-block .information {
    overflow-y: auto;
    white-space: nowrap;
    background-color: #F3F6F7;
}
.main-right .home-page .index-block .information .sign-info-area {
    background-color: #fff;
    padding-bottom: 2%;
}
.main-right .home-page .index-block .information .sign-info-frame {
    overflow: hidden;
    padding: 5px;
}
.main-right .home-page .index-block .information .sign-info-frame .sign-info {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.main-right .home-page .index-block .information .sign-info-frame .sign-info:hover {
    border: 1px solid #0cadcb;
}
.main-right .home-page .index-block .information .sign-info-frame .sign-info img {
    width: 100%;
    border: 2px solid #d8e8ef;
    border-radius: 100%;
}
.main-right .home-page .index-block .information .self-sign-info {
    border-right: 3px solid #D8E8EF;
}
.main-right .home-page .index-block .information .others-sign-info {
    border-right: 3px solid #D8E8EF;
}
.main-right .home-page .index-block .information .reject-sign-info {
    border-right: 3px solid #D8E8EF;
}
.main-right .home-page .index-block .information .sign-info-frame .sign-info .directions {
    height: 100%;
}
.main-right .home-page .index-block .information .sign-info-frame .sign-info .directions .maintitle {
    color: #333333; 
}
.main-right .home-page .index-block .information .sign-info-frame .sign-info .directions .maintitle:hover {
    color: rgba(72, 72, 72, 0.5);
}
.main-right .home-page .index-block .information .sign-info-frame .sign-info .directions .subtitle { color: #0cadcb; text-decoration: underline; text-align: center; }
.main-right .home-page .index-block .information .create-new-case {
    margin: 15% 10% 25% 10%;
    overflow: hidden;
    display: flex;
    align-items: center;
    width: 80%;
    height: 60%;
    background-color: #fff;
    box-shadow: 0px 0px 2px 3px rgba(12,173,203,0.1);
    cursor: pointer;
    padding: 7%;
    border-radius: 32px;
}
.main-right .home-page .index-block .information .create-new-case img {
    width: 100%;
}
.main-right .home-page .index-block .information .create-new-case div {
    float: left;
}
.main-right .home-page .index-block .information .create-new-case:hover {
    box-shadow: 0px 0px 2px 3px rgba(116,157,214,0.4);
}
.main-right .home-page .index-block .information .create-new-case .maintitle {
    color: #333333;
    font-weight: bold;
}
.main-right .home-page .index-block .information .recent-tasks {
    margin-top: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    height: 100%;
}
.main-right .home-page .index-block .information .recent-tasks .maintitle {
    color: #333333;
    font-weight: bold;
    float: left;
}
.main-right .home-page .index-block .information .recent-tasks .subtitle {
    color: #333333;
    float: right;
    cursor: pointer;
}
.main-right .home-page .index-block .information .recent-tasks .subtitle:hover {
    color: #b4b4b4;
}
.main-right .home-page .index-block .information .recent-tasks .subtitle .more {
    float: left;
}
.main-right .home-page .index-block .information .recent-tasks .subtitle .symbol {
    float: left;
}
.main-right .home-page .index-block .information .recent-tasks .recent-tasks-simple-list{
    overflow-y: auto;
    width: 103%;
    float: left;
}
.main-right .home-page .index-block .information .recent-tasks .recent-tasks-simple-list .recent-tasks-item {
    width: 100%;
    float: left;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #adbce0;
    margin-bottom: 10px;
}
.main-right .home-page .index-block .information .recent-tasks .recent-tasks-simple-list .recent-tasks-item:hover {
    background-color: #f0f0f0;
}
.main-right .home-page .index-block .information .recent-tasks .recent-tasks-simple-list .recent-tasks-item .doc-name {
    float: left;
    width: 100%;
    color: #333333;
    margin-bottom: 10px;
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
}
.main-right .home-page .index-block .information .recent-tasks .recent-tasks-simple-list .recent-tasks-item .doc-status {
    float: left;
    width: 30%;
    color: #b4b4b4;
}
.main-right .home-page .index-block .information .recent-tasks .recent-tasks-simple-list .recent-tasks-item .last-modify-time {
    float: right;
    width: 70%;
    color: #333333;
    text-align: right;
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
}

@media screen and (max-width: 768px) {
    .main-right .home-page .index-block .information .create-new-case {
        margin: 15% 10% 3% 10%;
    }
}

/*css/page/home/fastsign-home-disk-used-progressbar.css*/
.main-right .title .company-log .disk-space-used {
    width: 98%;
}
.main-right .title .company-log .disk-space-used .disk-space-used-progressbar {
    width: calc(100% - 22px);
    float: right;
}
.main-right .title .company-log .disk-space-used .ui-widget-header {
    background-color: #3E63A3;
}
.main-right .title .company-log .disk-space-used .disk-space-used-progressbar .progress-label {
    position: absolute;
    left: 47%;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
}
.main-right .title .company-log .disk-space-used .glyphicon-hdd {
    font-size: 18px;
    margin-top: 1px;
    margin-right: 3px;
    float: right;
}

@media screen and (max-width: 768px) {
    .main-right .title .company-log .disk-space-used .disk-space-used-progressbar {
        display: none !important;
    }
}

/*css/page/home/fastsign-uploadfile-block.css*/
.main-right .home-page .uploadfile-block {
    display: none;
}
.main-right .home-page .uploadfile-block .toolbox {
    width: 300px;
    height: 120px;
    background-color: #000;
    position: absolute;
    box-shadow: 4px 4px 4px rgba(20%,20%,40%,0.4);
    border-radius: 5%;
    text-align: center;
    margin: auto;
    z-index: 999999;
    display: none;
    color: #ECE9E9; 
    padding: 1% 1% 0px 1%;
}
.main-right .home-page .uploadfile-block .toolbox:after {
    position:absolute;
    content:"";
    bottom:-40px;
    left:50%;
    transform:translateX(-50%);
    width: 0;
    height: 0;
    border-width:20px;
    border-style:solid;
    border-top-color: #000;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
}
.main-right .home-page .uploadfile-block .information {
    overflow: hidden;
    white-space: nowrap;
}
.main-right .home-page .uploadfile-block .information .tool-button {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
}
.main-right .home-page .uploadfile-block .information .tool-button .close {
    float: left;
    height: 22px;
    width: 22px;
    opacity: 1;
    filter: alpha(opacity=100);
}
.main-right .home-page .uploadfile-block .information .tool-button .close:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
    background: rgb(255, 230, 0);
    border-radius: 100%;
}
.main-right .home-page .uploadfile-block .information .tool-button .button {
    float: right;
}
.main-right .home-page .uploadfile-block .information .tool-button .button input[type="button"] {
    background-color: #132f63;
    color: #fff;
}
.main-right .home-page .uploadfile-block .information .tool-button .button input[type="button"]:hover {
    background-color: #3573EF;
}
.main-right .home-page .uploadfile-block .information .maintitle {
    overflow: hidden;
    display: flex;
    align-items: center;
    white-space: nowrap;
    width: 100%;
}
.main-right .home-page .uploadfile-block .information .maintitle .base { margin:auto; }
.main-right .home-page .uploadfile-block .information .maintitle .base .icon { float: left; }
.main-right .home-page .uploadfile-block .information .maintitle .base .caption {
    color: #132f63;
    font-weight:bold;
}
.main-right .home-page .uploadfile-block .information .progress-info {
    overflow: hidden;
    display: flex;
    align-items: center;
    white-space: nowrap;
    width: 100%;
}
.main-right .home-page .uploadfile-block .information .progress-info .left {
    float: left;
}
.main-right .home-page .uploadfile-block .information .progress-info .right {
    float: left;
}
.main-right .home-page .uploadfile-block .information .right .progress-text {
    display: none;
    color: #132f63;
    padding-bottom: 20%;
}
.main-right .home-page .uploadfile-block .file-list {
    overflow: hidden;
}
.main-right .home-page .uploadfile-block .file-list .file-name {
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 40px;
}
.main-right .home-page .uploadfile-block .file-list .file-name div {
    float: left;
}
.main-right .home-page .uploadfile-block .file-list .file-name label {
    margin-right: 15px;
    color: #132f63;
    white-space: nowrap;
}
.main-right .home-page .uploadfile-block .file-list .file-body {
    margin-top: 20px;
    overflow-y: auto;
}

/*css/page/home/fastsign-uploadfile-popup-box.css*/
.uploadfile-popup-box { display: none; }
.uploadfile-popup-box .popup-box {
    overflow: hidden;
    white-space: nowrap;
}
.uploadfile-popup-box .uploadfile-title {
    position: absolute;
    margin-top: 3%;
    color: #132F63;
}
.uploadfile-popup-box .close-button {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
}
.uploadfile-popup-box .close-button .close {
    float: right;
    height: 22px;
    width: 22px;
    opacity: 1;
    filter: alpha(opacity=100);
}
.uploadfile-popup-box .close-button .close:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
    background: rgb(255, 230, 0);
    border-radius: 100%;
}
.uploadfile-popup-box .tool-button {
    overflow: hidden;
    white-space: nowrap;
    float: left;
}
.uploadfile-popup-box .tool-button input[type="file"] {
    display: none;
}
.uploadfile-popup-box .tool-button img {
    box-shadow: 2px 2px 4px rgba(20%,20%,40%,0.2);
    border: 1px #b4b4b4 solid;
    cursor: pointer;
}
.uploadfile-popup-box .tool-button img:hover {
    background: #25B9D3;
}
.uploadfile-popup-box .tool-button .description {
    overflow: hidden;
    white-space: pre-wrap;
    color: #b4b4b4;
    width: 100%;
}

/*css/page/home/fastsign-recent-tasks-popup-box.css*/
.recent-tasks-popup-box .popup-box .content .recent-tasks-item {
    width: 95%;
    height: 60px;
    margin-left: 5px;
    padding: 0px;
    float: left;
    margin-bottom: 10px;
    border-radius: 20px;
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
    -webkit-box-shadow: -1px 1px 5px rgba(0,0,0,0.75), inset 0 1px 0 white;
    -moz-box-shadow: -1px 1px 5px rgba(0,0,0,0.75), inset 0 1px 0 white;
    box-shadow: -1px 1px 5px rgba(0,0,0,0.75), inset 0 1px 0 white;
    background-color: #f0f0f0;
}
.recent-tasks-popup-box .popup-box .content .recent-tasks-item:hover{
    background-color: #132f63;
    border: 1px solid #132f63;
}
.recent-tasks-popup-box .popup-box .content .recent-tasks-item:hover .doc-name{
    font-weight: 700;
    font-size: 105%;
    color: #fff;
}
.recent-tasks-popup-box .popup-box .content .recent-tasks-item:hover .last-modify-time {
    font-weight: 700;
    font-size: 105%;
}
.recent-tasks-popup-box .popup-box .content .recent-tasks-item .doc-name {
    float: left;
    width: 50%;
    height: 100%;
    color: #484848;
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
    padding: 15px 0px 0px 15px;
    border-radius: 20px 0px 0px 20px;
     -moz-border-radius: 20px 0px 0px 20px;
}
.recent-tasks-popup-box .popup-box .content .recent-tasks-item .doc-status {
    float: left;
    width: 15%;
    height: 100%;
    color: #b4b4b4;
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
    padding: 15px 0px 0px 5px;
    background-color: #fff;
}
.recent-tasks-popup-box .popup-box .content .recent-tasks-item .last-modify-time {
    float: right;
    width: 35%;
    height: 100%;
    color: #b4b4b4;
    text-align: right;
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
    padding: 15px 15px 0px 0px;
    border-radius: 0px 20px 20px 0px;
    background-color: #fff;
}

/*css/page/home/fastsign-self-sign-popup-box.css*/
.self-sign-popup-box .popup-box .title {
    color: #132F63;
    height: 70px;
}
.self-sign-popup-box .popup-box .title span {
    margin-left: 0px;
}
.self-sign-popup-box .popup-box .title[mode="self-sign-info"] {
    background-image: url('../../../images/home/self-sign-info.png');
    background-repeat: no-repeat;
    background-size: auto 100%;
    -moz-background-size: auto 100%;
}
.self-sign-popup-box .popup-box .title[mode="others-sign-info"] {
    background-image: url('../../../images/home/others-sign-info.png');
    background-repeat: no-repeat;
    background-size: auto 100%;
    -moz-background-size: auto 100%;
}
.self-sign-popup-box .popup-box .title[mode="reject-sign-info"] {
    background-image: url('../../../images/home/reject-sign-info.png?1.0.10281');
    background-repeat: no-repeat;
    background-size: auto 100%;
    -moz-background-size: auto 100%;
}
.self-sign-popup-box .popup-box .title[mode="self-sign-record-info"] {
    background-image: url('../../../images/home/self-sign-record-info.png?1.21.5171');
    background-repeat: no-repeat;
    background-size: auto 100%;
    -moz-background-size: auto 100%;
}
.self-sign-popup-box .popup-box .title .button input[type="button"] {
    background-color: #132f63;
    color: #fff;
}
.self-sign-popup-box .popup-box .title .button input[type="button"]:hover {
    background-color: #3573EF;
}
.self-sign-popup-box .popup-box .title .button div[table-tool="Y"] {
    float: left;
    border-radius: 42px;
    height: 42px;
    width: 42px;
    box-shadow: 0px 0px 10px rgba(51,51,102,0.4);
    margin: 20px;
}
.self-sign-popup-box .popup-box .title .button div[table-tool="Y"]:hover {
    box-shadow: 0px 0px 10px rgba(60, 190, 255,1);
}
.self-sign-popup-box .popup-box .title .button div[table-tool="Y"] img {
    height: 100%;
    width: 100%;
}
.self-sign-popup-box .popup-box .content .self-sign-item {
    width: 95%;
    height: 60px;
    margin-left: 5px;
    padding: 0px;
    float: left;
    margin-bottom: 10px;
    border-radius: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-box-shadow: -1px 1px 5px rgba(0,0,0,0.75), inset 0 1px 0 white;
    -moz-box-shadow: -1px 1px 5px rgba(0,0,0,0.75), inset 0 1px 0 white;
    box-shadow: -1px 1px 5px rgba(0,0,0,0.75), inset 0 1px 0 white;
    background-color: #25B9D3;
}
.self-sign-popup-box .popup-box .content .self-sign-item[isReject='Y'] {
    background-color: #FF005D;
}
.self-sign-popup-box .popup-box .content[mode="self-sign-record-info"] .self-sign-item {
    height: 90px;
}
.self-sign-popup-box .popup-box .content .self-sign-item:hover{
    background-color: #132f63;
    border: 1px solid #132f63;
}
.self-sign-popup-box .popup-box .content .self-sign-item[isReject='Y']:hover {
    background-color: #CB0724;
    border: 1px solid #CB0724;
}
.self-sign-popup-box .popup-box .content .self-sign-item:hover .doc-sequence {
    font-weight: 700;
    font-size: 105%;
    color: #fff;
}
.self-sign-popup-box .popup-box .content .self-sign-item:hover .doc-name {
    font-weight: 700;
    font-size: 105%;
    color: #fff;
}
.self-sign-popup-box .popup-box .content .self-sign-item:hover .create-time {
    font-weight: 700;
    font-size: 105%;
}
.self-sign-popup-box .popup-box .content .self-sign-item .doc-sequence {
    float: left;
    width: 17%;
    height: 100%;
    color: #e9f8fb;
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
    padding: 15px 0px 0px 15px;
    border-radius: 20px 0px 0px 20px;
     -moz-border-radius: 20px 0px 0px 20px;
}
.self-sign-popup-box .popup-box .content[mode="self-sign-record-info"] .self-sign-item .doc-sequence {
    width: 37%;
}
.self-sign-popup-box .popup-box .content .self-sign-item .doc-name {
    float: left;
    width: 33%;
    height: 100%;
    color: #e9f8fb;
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
    padding: 15px 0px 0px 0px;
}
.self-sign-popup-box .popup-box .content[mode="self-sign-record-info"] .self-sign-item .doc-name {
    display: none;
}
.self-sign-popup-box .popup-box .content .self-sign-item .doc-level {
    float: left;
    width: 10%;
    height: 100%;
    color: #b4b4b4;
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
    padding: 15px 0px 0px 0px;
    background-color: #fff;
    box-shadow: 1px 0 2px #b4b4b4;
}
.self-sign-popup-box .popup-box .content .self-sign-item .doc-level div[level] {
    border-radius: 15px;
    color: #fff;
    padding: 5px;
    margin: 0px 3px 0px 3px;
}
.self-sign-popup-box .popup-box .content[mode="self-sign-record-info"] .self-sign-item .doc-level div[level] {
    margin-top: 15px;
}
.self-sign-popup-box .popup-box .content .self-sign-item .doc-level div[level="0"] {
    background-color: #89B9FF;
}
.self-sign-popup-box .popup-box .content .self-sign-item .doc-level div[level="1"] {
    background-color: #FFCF53;
}
.self-sign-popup-box .popup-box .content .self-sign-item .doc-level div[level="2"] {
    background-color: #ED5151;
}
.self-sign-popup-box .popup-box .content .self-sign-item .create-time {
    float: right;
    width: 40%;
    height: 100%;
    color: #b4b4b4;
    text-align: right;
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
    padding: 15px 15px 0px 0px;
    border-radius: 0px 20px 20px 0px;
    background-color: #fff;
}
.self-sign-popup-box .popup-box .content[mode="self-sign-record-info"] .self-sign-item .create-time {
    width: 50%;
    float: left;
    border-radius: 0px;
}
.self-sign-popup-box .popup-box .content .self-sign-item .menu {
    float: right;
    width: 3%;
    height: 100%;
    color: #b4b4b4;
    text-align: right;
    overflow: hidden;
    text-overflow: initial;
    white-space: nowrap;
    padding: 15px 15px 0px 0px;
    border-radius: 0px 20px 20px 0px;
    background-color: #fff;
}
.self-sign-popup-box .popup-box .content .self-sign-item .menu div {
    float: none;
    width: 100%;
    margin: 2px 0 5px 5px;
}
.self-sign-popup-box .popup-box .content .self-sign-item .menu .delete:hover {
    color: #ED5151;
}
.self-sign-popup-box .popup-box .content .self-sign-item .menu .history:hover {
    color: #89B9FF;
}

/*css/page/home/fastsign-query-page-main.css*/
.main-right .query-page-main {
    padding: 5px 10px 5px 10px;
}
.main-right .query-page-main .query-body {
    width: 100%;
}
.main-right .query-page-main .query-body .query-left {
    position: absolute;
    float: left;
    display: none;
    width: 30%;
    height: 100%;
    background-color: #f9f9f9;
    z-index: 9998;
    border-radius: 15px;
    box-shadow: 0 0 4px #150185;
    overflow-y: auto;
}
.main-right .query-page-main .query-body .query-left .close {
    height: 30px;
    margin: 5px 15px 5px 0;
    position: static!important;
}
.main-right .query-page-main .query-body .query-left .check-box-row {
    height: 72px;
}
.main-right .query-page-main .query-body .query-left .check-box-row label {
    font-weight: 700;
}
.main-right .query-page-main .query-body .query-left .check-box-row:before{
    content:'';
    height: 100%;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
.main-right .query-page-main .query-body .query-left .search {
    margin-top: 30px;
}
.main-right .query-page-main .query-body .query-left .clear {
    margin-top: 30px;
}
.main-right .query-page-main .query-body .query-left select {
    margin-bottom: 10px;
}
.main-right .query-page-main .query-body .query-split::before{
    content:'';
    height: 100%;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
.main-right .query-page-main .query-body .query-right {
    width: 100%;
    height: 100%;
    box-shadow: 0 0 4px rgb(94, 158, 214);
    border-radius: 15px;
}
.main-right .query-page-main .query-body .query-right .form-group {
    overflow-y: auto!important;
    overflow-x: hidden!important;
}
.main-right .query-page-main .query-body .query-right .table-tool {
    width: 100%;
    margin-bottom: 20px;
    font-size: 20pt;
}
.main-right .query-page-main .query-body .query-right .search-info {
    margin: 10px 0 0 15px;
}
.main-right .query-page-main .query-body .query-right .tool {
    float: left;
}
.main-right .query-page-main .query-body .query-right .tool span {
    margin: 20px 0 0 15px;
    border-radius: 100%;
}
.main-right .query-page-main .query-body .query-right .tool span:hover {
    background: rgb(255, 230, 0);
}
.main-right .query-page-main .query-body .query-right .data-table {
    width: 98%;
    margin-left: 1%;
}
.main-right .query-page-main .query-body .query-right .data-table .name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.main-right .query-page-main .query-footer {
    width: 100%;
}

/*css/page/home/fastsign-file-cabinet-class-popup-box.css*/
.file-cabinet-class-popup-box .item {
    float: left;
    margin: 5px;
}
.file-cabinet-class-popup-box .item div {
    float: left;
}
.file-cabinet-class-popup-box .item input[type="text"] {
    background-color:transparent;
    border: 0px;
    display: none;
}
.file-cabinet-class-popup-box .item .left {
    width: 24px;
    border-radius: 100% 0 0 100%;
    background-color: #D9D8D8;
    padding: 5px;
    margin: 5px 0 5px 5px;
    border-right: 1px solid #D9D8D8;
    height: 32px;
}
.file-cabinet-class-popup-box .item .center {
    background-color: #D9D8D8;
    padding: 5px;
    margin: 5px 0 5px 0;
    height: 32px;
}
.file-cabinet-class-popup-box .item .center .number {
    padding-left: 15px;
}
.file-cabinet-class-popup-box .item .right {
    width: 24px;
    border-radius: 0 100% 100% 0;
    background-color: #D9D8D8;
    padding: 5px;
    margin: 5px 5px 5px 0;
    border-left: 1px solid #D9D8D8;
    height: 32px;
}

/*css/page/home/fastsign-faq.css*/
.faq-container {
    margin: 30px 10px 5px 30px;
    overflow: hidden;
}
.faq-container .faq-title {
    color: #132F63;
    font-weight: bold;
    margin-bottom: 7px;
}
.faq-container .faq-title lable {
    color: #132F63;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.faq-container .faq-item {
    width: 100%;
    border-bottom: 1px solid #D8DFE3;
}
.faq-container .faq-item .asked {
    width: calc(100% - 15px);
    height: 52px;
    line-height: 52px;
    margin-left: 15px;
    margin-bottom: 7px;
    cursor: pointer;
}
.faq-container .faq-item .asked:hover {
    background-color: #F6F5F5;
}
.faq-container .faq-item .asked .asked-icon {
    float: left;
    -webkit-border-radius: 100%;
    border-radius: 20px;
    padding: 5px;
    color: #fff;
    margin-top: 13px;
    margin-right: 5px;
    background-color: #83C7C6;
}
.faq-container .faq-item .asked .active-icon {
    float: right;
    margin-right: 5px;
    line-height: 52px;
    color: #808080;
}
.faq-container .faq-item .asked lable {
    float: left;
    width: calc(100% - 60px);
    margin-bottom: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.faq-container .faq-item .asked[active]
{
    font-weight: bold;
}
.faq-container .faq-item .questions {
    width: 95%;
    margin-left: 5%;
    display: none;
}
.faq-container .faq-item .questions lable {
    margin-bottom: 7px;
}

/*css/page/home/fastsign-address-book.css*/
.address-book-container .address-book {
}
.address-book-container .address-book .address-book-panel {
    width: 100%;
    height: 120px;
    background-color: #fff;
    display: table;
    border: 1px solid #C4EFF6;
    overflow: hidden;
}
.address-book-container .address-book .address-book-panel .panel-icon {
    display: table-cell;
    vertical-align: middle;
    background-color: #D6EDF9;
    width: 62px;
    margin-left: 10px;
    border-right: 1px solid #C4EFF6;
}
.address-book-container .address-book .address-book-panel .panel-icon .flow-icon-item {
    float: none;
    cursor: pointer;
    border: 1px solid #7B7B7B;
}
.address-book-container .address-book .address-book-panel .panel-body {
    height: 100%;
}
.address-book-container .address-book .address-book-panel .panel-body label {
    color: #195E91;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.address-book-container .address-book .address-book-panel i {
    -webkit-border-radius: 100%;
    border-radius: 100%;
    padding: 10px;
    float: right;
    color: #fff;
    border: 1px solid rgba(9,123,188,0.8);
    cursor: pointer;
    color: rgba(9,123,188,0.8);
}
.address-book-container .address-book .address-book-panel i:hover {
    color: #fff;
    background-color: rgba(60, 190, 255, 1);
    border: 1px solid #FBFB76;
    box-shadow: 0px 0px 15px rgba(248, 248, 186, 1);
}
.address-book-container .address-book .address-book-panel .panel-body:hover {
    background-color: #D6EDF9;
}
.address-book-container .search-container {
    width: 97%;
    height: 42px;
    margin: 0 0 0 10px;
    -webkit-border-radius: 42px;
    border-radius: 42px;
    border: 1px solid #D6EDF9;
}
.address-book-container .search-container input[type="text"] {
    width: calc(100% - 120px);
    height: 32px;
    margin: 5px 5px 0 42px;
    font-size: 14px;
    line-height: 1.4285;
    color: #fff;
    background-image: none;
    outline: none;
    border: 0px solid #5C5C5C;
}
.address-book-container .search-container input[placeholder], .address-book-container .search-container [placeholder], .address-book-container .search-container *[placeholder] {
    font-family: "Microsoft JhengHei";
    color: rgba(123, 123, 123, 0.7);
    font-weight: 400;
}
.address-book-container .search-container i {
    -webkit-border-radius: 100%;
    border-radius: 100%;
    float: left;
    color: rgba(9,123,188,0.8);
    font-size: 20px;
    margin: 5px 0 0 0;
    padding: 5px;
    cursor: pointer;
}
.address-book-container .search-container i:hover {
    color: #fff;
    background-color: rgba(60, 190, 255, 1);
}
.address-book-container .search-container .add {
    float: right;
}
.address-book-container .search-info-container {
    width: 97%;
    height: 32px;
    margin: 0 0 0 10px;
    border-radius: 4px;
    background-color: #D6EDF9;
}
.address-book-container .search-info-container:hover {
    background-color: #D6E8F9;
}
.address-book-container .search-info-container label {
    line-height: 32px;
    font-size: 14px;
    color: #195E91;
}

@media screen and (max-width: 736px) {
    .address-book .address-book-panel i {
        float: left;
        bottom: 0px;
    }
}

/*css/page/home/fastsign-barch-popup-box.css*/
.barch-popup-box .content .check-box-row {
    height: 72px;
}
.barch-popup-box .content .check-box-row label {
    font-weight: 700;
}
.barch-popup-box .content .check-box-row:before {
    content: '';
    height: 100%;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
.barch-popup-box .content .date-description {
    background-color: #F6F3F3;
    color: #949494;
    text-align: center;
    font-weight: bold;
}

/*css/page/home/fastsign-user-list.css*/
.user-list-popup-box .popup-box {
    z-index: 10000!important;
    background-color: #fff !important;
    border: 1px solid #4D4D4D;
    box-shadow: 15px 0px 15px -15px #000, -15px 0px 15px -15px #000;
}
.user-list-popup-box .content {
    background-color: #fff;
}
.user-list-popup-box .content .user-panel {
    width: 100%;
    height: 90px;
    background-color: #EDEFF2;
    display: table;
    border: 0px solid #5C5C5C;
    overflow: hidden;
    -webkit-border-radius: 32px;
    border-radius: 32px;
}
.user-list-popup-box .content .user-panel[selected]  {
    border: 2px solid #CE2969;
    box-shadow: 0px 0px 15px rgba(248, 248, 186, 0.7);
}
.user-list-popup-box .content .user-panel:hover  {
    border: 2px solid #29B7CE;
    box-shadow: 0px 0px 15px rgba(248, 248, 186, 0.7);
}
.user-list-popup-box .content .user-panel .panel-icon {
    display: table-cell;
    vertical-align: middle;
    background-color: #EDEFF2;
    width: 92px;
    margin-left: 10px;
    border-right: 2px solid #fff;
    -webkit-border-top-left-radius: 32px;
    border-top-left-radius: 32px;
    -webkit-border-bottom-left-radius: 32px;
    border-bottom-left-radius: 32px;
}
.user-list-popup-box .content .user-panel .panel-icon .flow-icon-item {
    float: none;
    cursor: pointer;
    margin-left: 25px;
}
.user-list-popup-box .content .user-panel .panel-body {

    cursor: pointer;
}
.user-list-popup-box .content .user-panel .panel-body label {
    color: #404040;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-list-popup-box .content .user-panel i {
    -webkit-border-radius: 100%;
    border-radius: 100%;
    padding: 10px;
    float: right;
    color: #fff;
    border: 1px solid #fff;
    cursor: pointer;
}
.user-list-popup-box .content .user-panel i:hover {
    color: #FBFB76;
    border: 1px solid #FBFB76;
    box-shadow: 0px 0px 15px rgba(248, 248, 186, 1);
}
.user-list-popup-box .panel-input .search-container {
    width: 97%;
    height: 42px;
    margin: 0 0 10px 0;
    -webkit-border-radius: 42px;
    border-radius: 42px;
    border: 1px #C9C9C9 solid;
}
.user-list-popup-box .panel-input .search-container i {
    -webkit-border-radius: 100%;
    border-radius: 100%;
    float: left;
    color: #C9C9C9;
    font-size: 20px;
    margin: 5px 0 0 0;
    padding: 5px;
    cursor: pointer;
}
.user-list-popup-box .panel-input .search-container input[type="text"] {
    width: calc(100% - 120px);
    height: 32px;
    margin: 5px 5px 0 42px;
    font-size: 14px;
    line-height: 1.4285;
    color: #000;
    background-color: transparent;
    background-image: none;
    outline: none;
    border: 0px solid transparent;
}
.user-list-popup-box .panel-input .search-container input[placeholder], .user-list-popup-box .panel-input .search-container [placeholder], .user-list-popup-box .panel-input .search-container *[placeholder] {
    font-family: "Microsoft JhengHei";
    color: rgba(160, 160, 160, 0.7);
}
.user-list-popup-box .panel-footer .button input[type="button"] {
    background-color: #1d1d1d !important;
}
.user-list-popup-box .panel-footer .button input[type="button"]:hover {
    border: 1px solid rgba(0, 255, 178, 1);
}

/*css/page/home/fastsign-sign-record-detail-popup-box.csss*/
.self-sign-record-detail-popup-box .popup-box .title .sequence {
    font-size: 70%;
    color: #808080;
}
.self-sign-record-detail-popup-box .popup-box .content .detail-item {
    width: 95%;
    height: 60px;
    margin-left: 5px;
    padding: 0px;
    float: left;
    margin-bottom: 10px;
    border-radius: 20px;
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
    -webkit-box-shadow: -1px 1px 5px rgba(0,0,0,0.75), inset 0 1px 0 white;
    -moz-box-shadow: -1px 1px 5px rgba(0,0,0,0.75), inset 0 1px 0 white;
    box-shadow: -1px 1px 5px rgba(0,0,0,0.75), inset 0 1px 0 white;
    background-color: #f0f0f0;
}
.self-sign-record-detail-popup-box .popup-box .content .detail-item:hover{
    background-color: #132f63;
    border: 1px solid #132f63;
}
.self-sign-record-detail-popup-box .popup-box .content .detail-item:hover .ip-address {
    font-weight: 700;
    font-size: 105%;
    color: #fff;
}
.self-sign-record-detail-popup-box .popup-box .content .detail-item:hover .create-time {
    font-weight: 700;
    font-size: 105%;
}
.self-sign-record-detail-popup-box .popup-box .content .detail-item .ip-address {
    float: left;
    width: 45%;
    height: 100%;
    color: #484848;
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
    padding: 15px 0px 0px 15px;
    border-radius: 20px 0px 0px 20px;
     -moz-border-radius: 20px 0px 0px 20px;
}
.self-sign-record-detail-popup-box .popup-box .content .detail-item .create-time {
    float: right;
    width: 55%;
    height: 100%;
    color: #b4b4b4;
    text-align: right;
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
    padding: 15px 15px 0px 0px;
    border-radius: 0px 20px 20px 0px;
    background-color: #fff;
}

/*css/page/home/fastsign-process-box.css*/
.process-popup-box .process-button {
    text-align: center;
}
.process-popup-box .process-button img {
    box-shadow: 2px 2px 4px rgba(51,51,102,0.2);
    border: 1px #b4b4b4 solid;
    cursor: pointer;
    border-radius: 12px;
}
.process-popup-box .process-button img:hover {
    background: #25B9D3;
}
.process-popup-box .process-button .process-button-name {
    padding-top: 10px;
    width: 100%;
    text-align: center;
}

/*css/page/home/fastsign-abgne-marquee.css*/
.abgne-marquee {
    position: relative;
    overflow: hidden;
    width: 100%!important;
    height: 32px;
    border: 1px solid #ccc;
}
.abgne-marquee ul, .abgne-marquee li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.abgne-marquee ul {
	position: absolute;
}
.abgne-marquee ul li a {
	display: block;
	overflow: hidden;
	font-size: 16px;
	height: 32px;
	line-height: 32px;
	text-decoration: none;
}
.abgne-marquee ul li img {
    height: 16px;
    width: auto;
    margin-left: 3px;
    margin-bottom: 3px;
}
.video-popup-box .popup-box .content .video-iframe {
    background: transparent;
    border: 0;
    display: block;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

/*doc-sign-info-container*/
.table td {
    vertical-align: middle !important;
}
.doc-sign-info-container {
    cursor: auto;
}
.doc-sign-info-container .content {
    display: flex;
}
.doc-sign-info-container .content .name {
    width: 100%;
}
.doc-sign-info-container .content .name span {
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.doc-sign-info-container .content .name:hover {
    border: 1px solid rgba(20%,20%,40%,0.4);
}
.doc-sign-info-container .content .thumbnail {
    margin: 0 7px 0 3px;
    display: flex;
    justify-content: center;
}
.doc-sign-info-container .content .thumbnail img {
    width: auto;
    height: 24px;
    margin: auto;
    display: block;
}
.doc-sign-info-container .content .infos {
    flex:1;
}
.doc-sign-info-container .content .tool {
    width: 144px;
    margin: 0 7px 0 3px;
    display: flex;
    justify-content: center;
}
.doc-sign-info-container .content .tool i {
    width: 28px;
    height: 28px;
    margin: auto;
    display: block;
    padding-left: 7.5px;
    padding-top: 6.5px;
    border-radius: 100%;
    background-color: #132F63;
    color: #fff;
    margin-left: 4px;
}
.doc-sign-info-container .content .tool i[disabled] {
    background-color:darkgrey;
}
.doc-sign-info-container .content .tool i[other] {
    background-color: #3E63A3;
}
.doc-sign-info-container .content .tool .fa-star {
    background-color: transparent;
    color: #D1D1D1;
    font-size: 200%;
    padding-left: 0px;
    padding-top: 0px;
}
.doc-sign-info-container .content .tool .fa-star[important="0"] {
    color: #D1D1D1;
}
.doc-sign-info-container .content .tool .fa-star[important="1"] {
    color: #FCEE21;
}
.doc-sign-info-container .content .tool i:hover,
.doc-sign-info-container .content .thumbnail img:hover{
    box-shadow: 0px 0px 10px rgba(51,51,102,0.4);
}
.doc-sign-info-container .content .infos .progress {
    margin-top: 3px;
}
.doc-sign-info-container .content .infos .name {
    font-size: 100%;
    color: #0000ff;
}
.doc-sign-info-container .content .infos .name[reject],
.doc-sign-info-container .content span[reject] {
    color: #ff0000;
}
.doc-sign-info-container .content .infos .info {
    color: #65676B;
    font-size: 90%;
    margin-top: -17px;
}
.doc-sign-info-container .content .infos .info .left {
    flex:1;
}
.doc-sign-info-container .content .infos .info .flow-list {
    margin-right: 4px;
}

/*timeline*/
.timeline-popup-box .content {
    overflow: hidden;
}
.timeline-popup-box .input-icons-container {
    position: absolute;
    top: 10px;
    left: 32px;
}
.timeline-popup-box .input-icons-container[canchoose] {
    cursor: pointer;
}
.timeline-popup-box .input-icons-container .fa-user {
    font-size: 16px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 24px;
    padding-left: 6px;
    margin: 12px 6px 0 6px;
    background-color: #289ecb;
    color: #fff;
    box-shadow: 0px 0px 10px rgba(51,51,102,0.4);
}
.timeline-popup-box .input-icons-container .fa-user[isSelf="N"] {
    background-color: #3BC6C0;
}
.timeline-popup-box .input-icons-container .user-account {
    font-size: 22px;
    margin-left: 7px;
}
.timeline-popup-box .input-icons-container i {
    font-style: normal;
}
.timeline-popup-box .input-icons-container i[disabled] {
    color: darkgrey;
}
.timeline-popup-box .input-icons-container i[clear] {
    color: blue;
    text-decoration: underline !important;
}
.timeline-popup-box .input-icons-container i select {
    height: 24px;
    padding: 2px 4px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.tl-nav:after, .timeline li:after {
    content: "";
    display: table;
    clear: both;
}
*,
*:after,
*:before {
  box-sizing: border-box;
}
.tl-image img {
  width: auto;
  height: auto;
  max-height: 100%;
}
.tl-copy h3 {
  font-size: 40px;
  margin-top: 0;
  font-weight: 300;
}
/*** The timeline styles and structure ***/
.tl-wrapper {
  background: #e4f0f4;
  min-height: 1px;
  position: relative;
}
.timeline {
  position: relative;
  width: 100%;
  min-height: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline li {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
/*** The items ***/
.tl-item {
  visibility: hidden;
  overflow: hidden;
  z-index: 0;
}
.tl-item .tl-copy {
  transition: 0.6s ease;
  transform: translate3d(60%, 0, 0);
}
.tl-item .tl-copy .tl-description table{
    display: table;
}
.tl-item .tl-copy .tl-description table .item-name {
    padding-top: 5px;
}
.tl-item .tl-copy .tl-description table .item-value {
    padding-top: 5px;
    text-align: right;
}
.tl-item .tl-copy .tl-description table .go-to {
    padding-top: 12px;
    text-align: right;
}
.tl-item .tl-copy .tl-description table label {
    padding: 5px;
    border: 1px solid #fff;
    border-radius: 4px;
}
.tl-item .tl-copy .tl-description table label:hover {
    color: rgba(248, 248, 186, 1);
    border-color: rgba(248, 248, 186, 1);
    box-shadow: 0px 0px 10px rgba(248, 248, 186,0.4);
}
.tl-item .tl-image {
    transition: 0.6s ease;
    transform: translate3d(0, -100%, 0);
}
.tl-item.tl-active {
  visibility: visible;
  z-index: 10;
}
.tl-item.tl-active .tl-copy {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.tl-item.tl-active .tl-image {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.tl-image {
  float: left;
  width: 70%;
}
.tl-image img {
  display: block;
}
.tl-copy {
  width: 60%;
  height: 95%;
  position: absolute;
  top: 0;
  right: 0;
  padding: 16px;
  padding: 1rem;
  background: #289ecb;
  color: #fff;
}
.tl-copy[isSelf="N"] {
  background: #3BC6C0;
}
.tl-copy:after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 21px;
  border-color: #289ecb transparent transparent transparent;
}
.tl-copy[isSelf="N"]:after {
  border-color: #3BC6C0 transparent transparent transparent;
}
/*** The arrows for the items ***/
.tl-items-arrow-left,
.tl-items-arrow-right {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 40px;
  top: 50%;
  margin-top: -40px;
  z-index: 100;
}
.tl-items-arrow-left:before, .tl-items-arrow-left:after,
.tl-items-arrow-right:before,
.tl-items-arrow-right:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 28px;
  height: 2px;
  background: #fff;
}
.tl-items-arrow-left {
  left: 0;
}
.tl-items-arrow-left:before {
  top: 0;
  transform-origin: top right;
  transform: rotate(-45deg);
}
.tl-items-arrow-left:after {
  bottom: 0;
  transform-origin: bottom right;
  transform: rotate(45deg);
}
.tl-items-arrow-right {
  right: 0;
}
.tl-items-arrow-right:before {
  top: 0;
  transform-origin: top left;
  transform: rotate(45deg);
}
.tl-items-arrow-right:after {
  bottom: 0;
  transform-origin: bottom left;
  transform: rotate(-45deg);
}
/*** The nav's styles ***/
.tl-nav-wrapper {
  position: absolute;
  bottom: 10px;
  left: 0;
  margin: 0;
  padding: 16px 0 0 0;
  border-top: 1px solid #b2e9ff;
  overflow-x: hidden;
  width: 100%;
}
.tl-nav-wrapper:before, .tl-nav-wrapper:after {
  content: "";
  width: 38px;
  height: 86px;
  position: absolute;
  top: 17px;
  background: #e4f0f4;
  z-index: 50;
}
.tl-nav-wrapper:before {
  left: 0;
}
.tl-nav-wrapper:after {
  right: 0;
}
.no-csstransforms .tl-nav-wrapper {
  overflow-x: auto;
}
.tl-nav {
  list-style: none;
  margin: 0;
  padding-top: 16px;
  border-top: 1px dashed #289ecb;
  transition: all 0.4s ease;
}
.tl-nav[isSelf="N"] {
  border-top: 1px dashed #3BC6C0;
}
.tl-nav li {
  width: 70px;
  height: 70px;
  position: relative;
  float: left;
  cursor: pointer;
  margin-right: 1rem;
  font-size: 10px;
  text-align: center;
}
.tl-nav li div {
  width: 44px;
  height: 44px;
  margin: auto;
  background: #289ecb;
  color: #fff;
  padding-top: 9px;
  border-radius: 1000px;
  transition: 0.6s ease;
}
.tl-nav[isSelf="N"] li div {
  background: #3BC6C0;
}
.tl-nav li:hover div, .tl-nav li.tl-active div {
  width: 70px;
  height: 70px;
  background: transparent;
  color: #289ecb;
  border: 1px solid #289ecb;
  font-size: 16px;
  padding-top: 19px;
}
.tl-nav[isSelf="N"] li:hover div, .tl-nav[isSelf="N"] li.tl-active div {
  color: #3BC6C0;
  border: 1px solid #3BC6C0;
}
.tl-nav li:before {
  content: "";
  width: 4px;
  height: 4px;
  position: absolute;
  top: -10px;
  left: 50%;
  margin-left: -2px;
  background: #289ecb;
  border-radius: 1000px;
}
.tl-nav[isSelf="N"] li:before {
  background: #3BC6C0;
}
/*** The nav's nav styles ***/
.tl-nav-arrow-left,
.tl-nav-arrow-right {
  position: absolute;
  width: 12px;
  height: 20px;
  top: 50%;
  z-index: 100;
}
.tl-nav-arrow-left:before, .tl-nav-arrow-left:after,
.tl-nav-arrow-right:before,
.tl-nav-arrow-right:after {
  content: "";
  display: block;
  position: absolute;
  width: 14px;
  height: 2px;
  background: #289ecb;
}
.tl-nav-arrow-right[isSelf="N"]:after {
  background: #3BC6C0;
}
.tl-nav-arrow-left {
  left: 9px;
}
.tl-nav-arrow-left:before {
  top: 0;
  transform-origin: top right;
  transform: rotate(-45deg);
}
.tl-nav-arrow-left:after {
  bottom: 0;
  transform-origin: bottom right;
  transform: rotate(45deg);
}
.tl-nav-arrow-right {
  right: 9px;
}
.tl-nav-arrow-right:before {
  top: 0;
  transform-origin: top left;
  transform: rotate(45deg);
}
.tl-nav-arrow-right:after {
  bottom: 0;
  transform-origin: bottom left;
  transform: rotate(-45deg);
}
.no-csstransforms .tl-nav-arrow-left,
.no-csstransforms .tl-nav-arrow-right {
  display: none;
}