@charset "UTF-8";
*,
body,
header,
footer,
div,
input,
img,
p,
b,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
li,
ul,
span,
a,
article,
nav,
aside {
	margin: 0;
	padding: 0;
	border: none;
	list-style: none;
	text-decoration: none;
	outline: none;
    font-size: 14px;
    font-family: "ProximaNova","PingFang";
    /* font-family: "PingFang SC"; */
	color: rgb( 49, 70, 89 );
	font-weight: 400;
	letter-spacing: 0;
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: grayscale;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	line-height: 1;
}
.turn_en li,.turn_en p,.turn_en span,.turn_en td,.turn_en th,.turn_en div{
    font-family: "ProximaNova";
}
a {
	display: inline-block;
}
body{
    background: #f8f9fa;
}
table {
	border: 0;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
}
table td {
	padding: 0;
}
@font-face {
    font-family: 'iconfont';
    src: url('../fonts/iconfont/iconfont.eot');
    src: url('../fonts/iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/iconfont/iconfont.woff2') format('woff2'),
        url('../fonts/iconfont/iconfont.woff') format('woff'),
        url('../fonts/iconfont/iconfont.ttf') format('truetype'),
        url('../fonts/iconfont/iconfont.svg#iconfont') format('svg');
}
@font-face {
	font-family: "PingFang";
	font-display: swap;
	src: url('../fonts/PingFangold.ttf');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: "PingFang";
	font-display: swap;
	src: url('../fonts/PingFang.ttf');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: "ProximaNova";
	font-display: swap;
	src: url('../fonts/Proxima_Nova_Bold.ttf');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: "ProximaNova";
	font-display: swap;
	src: url('../fonts/Proxima_Nova_Regular.ttf');
	font-weight: normal;
	font-style: normal;
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon_user::before,.icon_phone::before,.icon_password::before{
    font-family: "iconfont";
    font-size: 22px;
    color:#d6dae0;
}
.icon_test::before,.icon_person::before,.icon_analytics::before{
    font-family: "iconfont";
    font-size: 26px;
    vertical-align: middle;
    margin-right: 10px;
}
.icon_user::before{
    content:"\e7af";
}
.icon_phone::before{
    content:"\e7e3";
}
.icon_password::before{
    content:"\e7c9";
}
.icon_test::before{
    content:"\e7b6";
}
.icon_person::before{
    content:"\e7af";
}
.icon_analytics::before{
    content:"\e78e";
}
.login_img{
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url(../images/user.png) no-repeat top;
    background-size: cover;
    margin-right: 12px;
}
header{
    padding: 20px 0;
    background: #1e2432;
}
footer {
    height:60px;
    background: #1e2432;
    display: flex;
    align-items: center;
    justify-content: center;
}
footer span a{
    color:#cccccc;
}
.container,.header_bar{
    width: 1024px;
    margin: 0 auto;
}
.container {
    min-height:1128px;
}
.header_bar{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.logo img{
    width: 215px;
}
.login_who{
    display: flex;
    align-items: center;
    position: relative;
    padding: 10px 0px;
}
.login_who span{
    color: #fff;
}
.banner{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 60px 0;
}
.login,.list,.test_info,.test_item,.test_result_box,.overview,.colors,.likes,.working_with,.summary,.analysis_box{
    background: #fff;
    border-radius: 16px;
    -webkit-box-shadow: 0px 0px 16px 0px rgba( 49, 70, 89,.1 );
            box-shadow: 0px 0px 16px 0px rgba( 49, 70, 89,.1 );
}
.login,.list{
    padding: 70px;
    min-width: 440px;
}
.list_staff{
    display: none;
}
.login p,.list p{
    font-size: 40px;
    font-weight: bold;
    color: rgb( 49, 70, 89 );
    margin-bottom: 35px;
}
.login_type{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-bottom: 20px;
}
.login_type>div{
    position: relative;
    border:2px solid #ebedf0;
    border-radius: 4px;
    width: 48%;
    text-align: center;
    padding: 15px;
}
.login_type>label.check_type{
    border:2px solid #1f8efa;
}
.login_type>label{
    position: relative;
    border:2px solid #ebedf0;
    border-radius: 4px;
    width: 49%;
    text-align: center;
    padding: 14px 19px;
}
.login_type>label span{
    display: block;
    margin: 0 auto;
}
.login_type>label span.ms_box{
    width: 75px;
    height: 90px;
    background: url(../images/ms-normal.png) no-repeat top;
    background-size: contain;
    margin: 0 auto;
    margin-bottom: 10px;
}
.login_type>label span.zz_box{
    width: 75px;
    height: 90px;
    background: url(../images/zz-normal.png) no-repeat top;
    background-size: contain;
    margin: 0 auto;
    margin-bottom: 10px;
}
.login_type .login_type_btn{
    position: absolute;
    right: 8px;
    top: 8px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #ebedf0; 
    border-radius: 4px;
}
.login_type .login_type_btn:checked{
    background: #1f8efa;
    border-color: #1f8efa;
}
.login_type .login_type_btn:checked::before{
    font-family: "iconfont";
    content: '\e7fc';
    color: #fff;
    font-size: 12px;
    vertical-align: middle;
}
.login_type .login_type_btn:checked+span.zz_box{
    background: url(../images/zz-check.png) no-repeat top;
    background-size: contain;
}
.login_type .login_type_btn:checked~span{
    color: rgb( 31, 142, 250 );
}
.login_type .login_type_btn:checked+span.ms_box{
    background: url(../images/ms-check.png) no-repeat bottom;
    background-size: cover;
}
.login_input_box{
    border:2px solid #ebedf0;
    margin-bottom: 10px;
    display: flex;
}
.login_input_box>span{
    display: inline-block;
    border-right:2px solid #ebedf0;
    width: 55px;
    height: 45px;
    line-height: 45px;
    text-align: center;
}
.login_input_box>input{
    padding-left: 10px;
    height: 45px;
    width: calc( 100% - 55px )
}
#login_btn{
    background-color: rgb( 31, 142, 250 );
    color:#fff;
    line-height: 45px;
    border-radius: 4px;
    width: 100%;
}
.none_type{
    display: none;
}
.routing_list li{
    text-align: center;
    border:2px solid #ebedf0;
    border-radius: 4px;
    margin-bottom: 8px;
}
.routing_list li a{
    font-size: 20px;
    line-height: 100px;
    color: rgb( 152, 162, 172 );
}
.routing_list li.active,.routing_list li:hover{
    border: 2px solid #1f8efa;
}
.routing_list li.active a,.routing_list li:hover a{
    color: #1f8efa;
}

/* test */
.test_info{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 25px 60px;
    margin: 50px 0;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.test_info_ul{
    margin-left: 50px;
}
.test_info_ul li{
    font-size: 16px;
    line-height: 2;
    color: rgb( 49, 70, 89 );
}
.test_info_ul li:first-child{
    color:#314659;
    font-weight: bold;
}
.test_info_ul li span{
    color:#e2e6e9;
    font-size: 16px;
}
.test_info_ul li span.infor_span{
    color:#ff5656;
}
.test_tit,.test_tit_result{
    color: rgb( 216, 221, 225 );
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    font-family: "ProximaNova";
}
.test_tit_result{
    text-align: left;
}
.test_item{
    margin: 20px 0 50px;
    padding: 28px 60px;
}
.progress{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    margin-bottom: 13px;
}
.progress li{
    color: rgb( 24, 144, 255 );
    font-size: 16px;
}
.test_value_box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.test_value_box>li,.test_answer{
    width: 24%;
}
.test_value_box>li p{
    color:rgb( 24, 144, 255 );
    margin-bottom: 13px;
}
.test_answer{
    float: left;
    margin-right: 1%;
    border-radius: 12px;
}
.test_answer_box{
    margin-right: -1%;
    overflow: hidden;
}
.test_detail{
    border:1px solid #ebedf0;
    border-radius: 12px;
    padding: 10px 0;
}
.test_detail li{
    font-size: 14px;
    color: rgb( 49, 70, 89 );
    line-height: 1.8;
    padding-left: 10px;
}
.test_detail li span{
    display: inline-block;
    min-width: 110px;
    font-size: 14px;
    color: rgb( 49, 70, 89 );
    line-height: 1.8;
    text-align: left;
}
.test_value_box{
    margin-bottom: 10px;
}
.test_value_box>li>div{
    height: 97px;
    background: #f2f4f5;
    border-radius: 12px;
}
.test_value_box .test_detail{
    background: #fff;
}
.test_value_box .test_detail li{
    width: 100%;
}
#testBtn{
    display: block;
    width: 450px;
    background: #1f8efa;
    border-radius: 12px;
    font-size: 16px;
    color: #fff;
    line-height: 55px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 300px;
}
.test_value_box>li>div.false_none{
    border:1px solid #ffa39e;
    background-color: rgb( 255, 240, 240);
}

/* result */
#result{
    margin-top: 50px;
}
.test_result_box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 28px 60px;
    margin: 20px 0 50px;
}
.result_box_l{
    border-right: 2px solid #f8f9fa;
    margin-right: 45px;
    padding-right: 45px;
}
.result_box_l .result_info{
    color: rgb( 49, 70, 89 );
    font-size: 18px;
    font-weight: bold;
    line-height: 2.2;
}
.color_type,.color_type i{
    color: rgb( 49, 70, 89 );
    font-size: 16px;
    line-height: 2;
    font-style: normal;
}
.result_item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.color_type{
    width: 15%;
}
.score_progress,.score_progress_a{
    position: relative;
    width: 500px;
    height: 15px;
    background: #f2f4f5;
    border-radius: 6px;
}
.score_progress_a{
    margin-left: 10px;
    width: 400px;
}
.score_progress>div,.score_progress_a>div{
    position: absolute;
    left: 0;
    top: 0;
    height: 15px;
    border-radius: 6px;
}
.score_progress>div.b_blue,.score_progress_a>div.b_blue{
    background: #5a9ae9;
}
.score_progress>div.b_gold,.score_progress_a>div.b_gold{
    background: #ffd700;
}
.score_progress>div.b_green,.score_progress_a>div.b_green {
    background: #79d292;
}
.score_progress>div.b_orange,.score_progress_a>div.b_orange {
    background: #ffa501;
}
.test_result_ul{
    width: 65%;
}
.overview h4{
    color: rgb( 49, 70, 89 );
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 10px;
    margin-top: 20px;
}
.overview p,.overview ul,.result_son p{
    margin-bottom: 10px;
}
.overview p,.overview ul li,.colors p,.colors ul li,.likes p,.likes ul li,.working_with p,.working_with ul li{
    color: rgb( 49, 70, 89 );
    line-height: 2;
    font-size: 16px;
}
.diamond_tit{
    margin-bottom: 6px;
}
.overview_ul li.diamond,.working_with ul li,.colors ul li,.likes ul li{
    margin-left: 23px;
    position: relative;
    list-style: circle;
}
/* .overview_ul li.diamond::before,.working_with ul li::before,.colors ul li::before,.likes ul li::before{
    position: absolute;
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    border:2px solid #314659;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    left: 0;
    top:12px;
} */
.overview,.colors,.likes,.working_with,.summary{
    padding: 28px 60px;
    margin: 20px 0 50px;
}
.result_nav span{
  font-size: 20px;
  color: rgb( 228, 231, 234 );
  line-height: 1.5;
  margin-right: 30px;
  font-weight: bold;
}
.turn_en{
    display: none;
}
.result_nav_son_box .result_son{
    display: none;
}
.result_nav_son_box .result_son:first-child{
    display: block;
}
.result_nav span.tab_cur:first-child{
    color: #ffd700;
}
.result_nav span.tab_cur:nth-child(2){
    color: #79d292;
}
.result_nav span.tab_cur:nth-child(3){
    color: #5a9ae9;
}
.result_nav span.tab_cur:last-child{
    color: #ffa501;
}
.result_table th, .result_table td {
    border: 1px solid #ebedf0;
    text-align: left;
    line-height: 1.5;
    padding: 15px 10px;
    width: 20%;
    color: rgb( 49, 70, 89 );
    font-size: 16px;
}
.result_table th {
    font-weight: bold;
}
#turn_btn{
    position: fixed;
    bottom:100px;
    right: 100px;
}
#turn_btn img{
    width: 60px;
    height: 60px;
}
#share_wx_btn {
    position: fixed;
    bottom:100px;
    right: 20px;
    width:60px;
    height:60px;
    background-color: #cccccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#share_wx_btn img {
    width:40px;
    height:40px;
}

#window_image {
    position: fixed;
    top:80px;
    left:0;
    right:0;
    z-index:999;
}
#turn_btn,
#share_wx_btn {
    z-index:999;
}
.analysis_type_box{
    overflow: hidden;
    padding: 30px;
    border-bottom: 2px solid #f8f9fa;
}
.analysis_type_box span{
    float: left;
    padding: 0 40px;
    line-height: 40px;
    font-size: 16px;
    border:1px solid #ebedf0;
    color: #9fa8b2;
    border-radius: 8px;
    margin-right: 10px;
}
.analysis_type_box span.tap_active{
    background-color: #1f8efa;
    border: 1px solid #1f8efa;
    color:#fff;
}
#tab_select{
    width: 130px;
    height: 43px;
    border: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border:1px solid #ebedf0;
    border-radius: 8px;
    line-height: 40px;
    background: #fff;
    text-align: center;
    font-size: 14px;
    color: #9fa8b2;
    padding-left: 20px;
}
.tab_year{
    float: right;
    position: relative;
}
.tab_year::before{
    position: absolute;
    content:"\e8ec";
    font-family: "iconfont";
    right: 15px;
    top:15px;
    color: #cbd0d5;
}
#analysis{
    margin-top: 50px;
}
.analysis_box{
    margin: 20px 0 50px;
}
.analysis_person{
    display: flex;
    padding: 30px;
    border-bottom: 2px solid #f8f9fa;
}
#tit_ana{
    font-size: 16px;
    color: rgb( 49, 70, 89 );
    line-height: 2;
    margin-bottom: 10px;
    font-weight: bold;
}
.user_table th, .user_table td {
    text-align: center;
    line-height: 2.2;
    border: 1px solid #eff3f6;
    color: rgb( 49, 70, 89 );
    padding: 5px 20px;
    text-align: left;
}
.user_table td a:hover{
    color: rgb( 31, 142, 250 );
}
.user_ana{
    padding: 30px;
}
.name_table{
    width: 20%;
}
.user_table th {
    padding: 15px 20px !important;
}
#user_tbody td.trueorange {
    color: orange;
}
#user_tbody td.truegreen {
    color: #7ad293;
}
#user_tbody td.truegold {
    color: gold;
}
#user_tbody td.trueblue {
    color: #5a9ae9;
}
.user_table th div::after {
    font-family: 'iconfont';
    content: '\e71c';
    margin-left: 120px;
    font-size: 14px;
    color:#cbd0d5;
}
.user_table th.name_table div::after{
    content:'';
}
table.tablesorter thead tr th.tablesorter-headerAsc div::after {
    content: '\e8ed';
}
table.tablesorter thead tr th.tablesorter-headerDesc div::after {
    content: '\e8ec';
}
.user_table td a{
    display: inline-block;
    width: 100%;
    height: 100%;
}
.search_box{
    display: flex;
    justify-content: space-between;
    padding: 30px;
    padding-bottom: 0px;
    align-items: center;
}
.search_box p{
    color: rgb( 152, 162, 172 );
    font-size: 16px;
}
.search_box form{
    width: 20%;
    border:1px solid #ebedf0;
    border-radius: 8px;
    height: 40px;
    padding: 5px 10px 5px 20px;
}
.search_box input{
    width: calc( 100% - 30px );
    height: 100%;
    line-height: 30px;
    float: left;
}
#searchBtn{
    float: left;
    height: 30px;
    width: 30px;
    background-color: #fff;
    background: url(../images/search.svg) no-repeat center;
    background-size: 20px
}
input::-webkit-input-placeholder{
    color:rgb( 228, 231, 234 );
}
input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:rgb( 228, 231, 234 );
}
input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:rgb( 228, 231, 234 );
}
input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
    color:rgb( 228, 231, 234 );
}
.header_r{
    display: flex;
    align-items: center;
}
.login_out{
    margin-left: 10px;
}
.login_out::before{
    font-family: 'iconfont';
    content: '\e8ec';
    font-size: 18px;
    color: #cbd0d5;
}
.login_out button{
    color: #fff;
    background: transparent;
}
.login_who ul{
    position: absolute;
    top:40px;
    right: 0px;
    background: #fff;
    border-radius: 8px;
    -webkit-box-shadow: 0px 0px 16px 0px rgba( 49, 70, 89,.1 );
    box-shadow: 0px 0px 16px 0px rgba( 49, 70, 89,.1 );
    z-index: 111;
}
.login_who ul li{
    padding: 0 20px;
}
.icon_list_test{
    padding-top: 10px;
}
.login_who ul li a{
    color: rgb( 76, 95, 111 );
    font-size: 14px;
    line-height: 2;
}
.login_who ul li a:hover{
    color:#1f8efa;
}
.login_who ul li button{
    background: transparent;
    color: rgb( 76, 95, 111 );
    font-size: 14px;
    line-height: 50px;
}
.login_who ul li button:hover{
    color: rgb( 255, 86, 86 );
}
#nav_list{
    display: none;
}
.login_who:hover #nav_list{
    display: block;
}
.login_who ul li a::before,#loginOut::before{
    font-family: "iconfont";
    font-size: 16px;
    margin-right: 8px;
    vertical-align: baseline;
}
#loginOut::before{
    content: "\e78c"
}
.icon_list_test::before{
    content:"\e7b6";
}
.icon_list_person::before{
    content:"\e7af";
}
.icon_list_analytics::before{
    content:"\e78e";
}
.login_who ul li.li_analytics{
    border-bottom:1px solid #eff3f6;
    padding-bottom: 8px;
}
.result_nav{
    margin-bottom: 10px;
}
#list_name span{
    font-size: 30px;
    font-weight: bold;
}
#result_color{
    font-size: 30px;
    line-height: 50px;
    font-weight: bold;
}
.line_content{
    margin:20px 0 50px;
    padding: 28px 60px;
    background: #fff;
    border-radius: 16px;
    -webkit-box-shadow: 0px 0px 16px 0px rgba( 49, 70, 89,.1 );
    box-shadow: 0px 0px 16px 0px rgba( 49, 70, 89,.1 );
}
.logo{
    margin-top: 5px;
}
.working_with ul li b{
    color: rgb( 49, 70, 89 );
    line-height: 2;
    font-size: 16px;
}
.big {
    animation: 0.3s big linear;
    display: block;
}

.small {
    animation: 0.3s small linear;
    display: none;
}
@keyframes big {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;

    }
}

@keyframes small {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0);
        opacity: 0;
        width: 0;
        height: 0;
    }
}
.result_table tr td:first-child{
    font-weight: bold;
}
.test_go a{
    color:#fff;
    padding: 15px 30px;
    background: rgb( 31, 142, 250 );
    border-radius: 4px;
}
.reset{
    display: none;
}
.window_image_box {
    position:relative;
    padding-left:10px;
    padding-right:10px;
}
.window_content_close {
    position:absolute;
    right:20px;
    top:10px;
    font-size:22px;
    font-weight: bold;
}
.window_content_share {
    margin-top:10px;
}
.window_content_btn {
    position: absolute;
    bottom:3px;
    left:10px;
}

@media screen and (max-width:1023px) {
    .container, .header_bar{
        width: 100%;
        padding: 0 10px;
    }
    .tablesorter{
        max-width: 100%;
    }
    .user_table th div::after{
        margin-left: 70%;
    }
    .banner_img img{
        width: 300px;
    }
    .test_detail li span{
        display: block;
    }
    .test_value_box>li>div{
        height: 172px;
    }
    .result_item{
        flex-wrap: wrap;
    }
    .color_type,.score_progress_a{
        width: 100%;
    }
    .score_progress, .score_progress_a{
        margin-bottom: 10px;
    }
    .score_progress_a{
        margin-left: 0px;
    }
}
@media screen and (max-width:768px) {
    .reset{
        display: block;
        background: #1f8efa;
        color: #fff;
        padding: 10px;
        margin: 0 auto;
        margin-top: 10px;
        border-radius: 4px;
    }
    .banner_img{
        display: none;
    }
    .banner{
        justify-content: center;
    }
    header{
        padding: 10px 0;
    }
    .container {
        min-height:900px;
    }
    .logo img{
        width: 160px;
    }
    .test_result_box,.analysis_person{
        flex-wrap: wrap;
    }
    .test_result_ul{
        width:100%;
    }
    .score_progress, .score_progress_a{
        width:100%;
    }
    .result_box_l{
        width: 100%;
        padding: 0;
        margin: 0;
        border:none;
    }
    .user_table th div::after{
        margin-left: 3px;
    }
}
@media screen and (max-width:680px){
    .test_value_box{
        flex-wrap: wrap;
    }
    .test_value_box>li p{
        margin-top: 10px;
    }
    .test_value_box>li, .test_answer{
        width:49%;
        margin-bottom: 10px;
    }
    .test_item,.overview, .colors, .likes, .working_with, .summary,.test_result_box{
        padding: 18px 20px;
        margin: 10px 0 30px;
    }
    #result,#analysis{
        margin-top: 30px;
    }
    .summary>div{
        overflow: auto;
    }
    .test_value_box{
        margin-bottom: 0px;
    }
    .test_info{
        padding: 18px 30px;
        margin: 30px 0;
        flex-wrap: wrap;
    }
    .test_info img{
        margin: 0 auto;
        margin-bottom: 10px;
    }
    .test_info_ul{
        width: 100%;
        margin-left: 0px;
    }
    .user_table td a{
        line-height: 2;
    }
    .analysis_type_box span{
        padding: 0 10px;
    }
    #tab_select{
        width:100px;
    }
    .search_box form {
        width: 40%;
    }
    .search_box p{
        width: 50%;
        line-height: 1.5;
    }
}
@media screen and (max-width:480px){
    .result_nav span{
        margin-right: 10px;
    }
    .login, .list{
        padding: 20px 30px;
        min-width: 340px;
    }
    .login p, .list p{
        font-size: 30px;
        margin-bottom: 20px;
    }
    #list_name span{
        font-size: 24px;
    }
    #testBtn{
        width: 100%;
    }
    .user_table th {
        padding: 15px 8px !important;
    }
    #pie_chart{
        min-width: 100%!important;
    }
}