@charset "utf-8";

body{background:#F5FBFF;}
.userMain{width:1300px;margin:46px auto;}
.userMain h3{color:#000;font-size:21px;font-family: 'sfB';display:block;margin:0 0 20px 0;}

.firstSection{display:flex;gap:55px;}
.stat_island{width:406px;flex-shrink:0;}
.stat_island ul{display:flex;}
.stat_island ul li{padding:13px 0 13px 20px;width:100%;}
.stat_island ul li *{color:#fff;}
.stat_island ul li span{font-size:15px;font-family:'sfM';display:block;margin-bottom:10px;}
.stat_island ul li strong{font-size:21px;font-family:'sfB';}
.stat_island ul li:nth-child(1){background:#0597EE;border-radius:12px 0 0 12px;}
.stat_island ul li:nth-child(2){background:#65C5FF;}
.stat_island ul li:nth-child(3){background:#00B895;border-radius:0 12px 12px 0;}

.stat_chart{width:100%;}

.stat_map{position:relative;margin-top:45px;width:389px;height:534px;background:url(/images/uportal/map_main.png) no-repeat 0 0;}
.stat_map > div:nth-child(1){
    position: absolute;
    top: 176px;
    right: 9px;
    width:100px;
}
.stat_map > div:nth-child(2){
    position: absolute;
    bottom: 111px;
    left: 18px;
    width:100px;
}
.stat_map > div{text-align:center;}
.stat_map > div *{color:#000;}
.stat_map > div span{font-family:'sfB';font-size:18px;display:block;margin-bottom:5px;}
.stat_map > div strong{font-family:'sfB';font-size:20px;}

.zan_chart{display:flex;margin:0 0 35px 0;justify-content:space-between;}
.zan_chart > div{flex-shrink:0;width:579px;height:423px;background:url(/images/uportal/main_chart_bg.png) no-repeat 0 0;border-radius:12px;}
.zan_chart > ul{width:226px;height:423px;display:flex;flex-direction:column;}
.zan_chart > ul li{height:100%;margin-top:10px;}
.zan_chart > ul li:first-child{margin:0;}
.zan_chart > ul li a{position:relative;height:73px;display:flex;align-items:center;border:2px solid #E9F3FA;background:#E9F3FA;padding:0 12px;border-radius:2px;}
.zan_chart > ul li.on a{background:#fff;border:2px solid #02A7DA;border-left:2px solid #fff;}
.zan_chart > ul li.on a:before{
    position: absolute;
    top: -3px;
    left: -28px;
    width: 29px;
    height: 77px;
    background: url(/images/uportal/schart_semo.png) no-repeat 0 0;
    content: "";
    display: block;
    background-size: auto 79px;
}
.zan_chart > ul li a span{
    display:block;
    color: #000;
    font-size: 14px;
    font-family: 'sfB';
    padding:0 0 0 46px;
}
.zan_chart > ul li:nth-child(1) a span{
    background:url(/images/uportal/schart_icon01.png) no-repeat 0 center;
}
.zan_chart > ul li:nth-child(2) a span{
    background:url(/images/uportal/schart_icon02.png) no-repeat 0 center;
}
.zan_chart > ul li:nth-child(3) a span{
    background:url(/images/uportal/schart_icon03.png) no-repeat 0 center;
}
.zan_chart > ul li:nth-child(4) a span{
    background:url(/images/uportal/schart_icon04.png) no-repeat 0 center;
}
.zan_chart > ul li:nth-child(5) a span{
    background:url(/images/uportal/schart_icon05.png) no-repeat 0 center;
}

.zan_chart > ul li:nth-child(1).on a span{
    background:url(/images/uportal/schart_icon01_.png) no-repeat 0 center;
}
.zan_chart > ul li:nth-child(2).on a span{
    background:url(/images/uportal/schart_icon02_.png) no-repeat 0 center;
}
.zan_chart > ul li:nth-child(3).on a span{
    background:url(/images/uportal/schart_icon03_.png) no-repeat 0 center;
}
.zan_chart > ul li:nth-child(4).on a span{
    background:url(/images/uportal/schart_icon04_.png) no-repeat 0 center;
}
.zan_chart > ul li:nth-child(5).on a span{
    background:url(/images/uportal/schart_icon05_.png) no-repeat 0 center;
}

.zan_link{display:flex;flex-direction:column;}
.zan_link > div{display:flex;}
.zan_link > div:first-child{margin-bottom:-1px;}
.zan_link > div a{border:1px solid #71A9D0;flex:1 0 20%;display:flex;align-items:center;margin-left:-1px;height:80px;}
.zan_link > div a span{color:#000;font-family:'sfB';display:block;padding-left:79px;}
.zan_link > div a:first-child{margin:0;}

.zan_link > div:first-child a:nth-child(1){background:url(/images/uportal/stat_class01.png) no-repeat 5px center;}
.zan_link > div:first-child a:nth-child(2){background:url(/images/uportal/stat_class02.png) no-repeat 5px center;}
.zan_link > div:first-child a:nth-child(3){background:url(/images/uportal/stat_class03.png) no-repeat 5px center;}
.zan_link > div:first-child a:nth-child(4){background:url(/images/uportal/stat_class04.png) no-repeat 5px center;}

.zan_link > div:last-child a:nth-child(1){background:url(/images/uportal/stat_class05.png) no-repeat 5px center;}
.zan_link > div:last-child a:nth-child(2){background:url(/images/uportal/stat_class06.png) no-repeat 5px center;}
.zan_link > div:last-child a:nth-child(3){background:url(/images/uportal/stat_class07.png) no-repeat 5px center;}
.zan_link > div:last-child a:nth-child(4){background:url(/images/uportal/stat_class08.png) no-repeat 5px center;}

.secondSection{height:90px;margin:60px 0;display:flex;justify-content:space-between;gap:30px;}
.secondSection h3{
    display: flex;
    align-items:center;
    margin: 0;
}
.secondSection h3:before{
    width:41px;
    height:41px;
    background:url(/images/uportal/theme_icon.png);
    content:"";
    display:inline-block;
    vertical-align:middle;
    flex-shrink:0;
}
.secondSection h3:after{
    width:10px;
    height:18px;
    background:url(/images/uportal/theme_arrow.png);
    content:"";
    display:inline-block;
    vertical-align:middle;
    flex-shrink:0;
}
.secondSection h3 span{margin:0 15px;width:50%;}

.ss_list{display:flex;gap:3px;width:675px;flex-shrink:0;}
.ss_list a{box-shadow:2px 2px 4px 0px rgba(0,0,0,0.1);width:100%;font-size:18px;color:#3288BD;font-family:'sfM';background:#fff;text-align:center;}
.ss_list a:hover{background: #56afe5;color: #fff;}
.ss_list a span{display:flex;flex-direction:column;align-items:center;padding-top:14px;}
.ss_list a:first-child{border-radius:10px 0 0 10px;}
.ss_list a:last-child{border-radius:0 10px 10px 0;}
.ss_list a:nth-child(1) span:before{
    width:41px;
    height:37px;
    background-image:url(/images/uportal/theme_icon01.png);
    content:"";
    display:block;
    margin-bottom:8px;
}
.ss_list a:nth-child(2) span:before{
    width:38px;
    height:36px;
    background-image:url(/images/uportal/theme_icon02.png);
    content:"";
    display:block;
    margin-bottom:8px;
}
.ss_list a:nth-child(3) span:before{
    width:35px;
    height:35px;
    background-image:url(/images/uportal/theme_icon03.png);
    content:"";
    display:block;
    margin-bottom:8px;
}

.ss_visit{justify-content:space-around;background:#2B67AC;border-radius:10px;display:flex;align-items:center;width:387px;flex-shrink:0;}
.ss_visit span{font-size:18px;font-family:'sfM';color:#fff;display:block;text-align:center;}
.ss_visit strong{font-size:32px;font-family:'sfB';color:#fff;width:230px;}
.ss_visit strong:before{
    width:54px;
    height:54px;
    background-image:url(/images/uportal/theme_icon04.png);
    content:"";
    display:inline-block;
    margin-right:5px;
    vertical-align:middle;
}

.thirdSection{margin:60px 0;display:flex;gap:40px;justify-content:space-between}
.thirdSection > div{position:relative;width:630px;}
.rs_list{background:#fff;border-radius:15px;padding:30px;}
.rs_list ul{overflow-y:auto;height:161px;padding:0 18px 0 0;}
.rs_list ul li{padding:7px 0;display:flex;justify-content:space-between;}
.rs_list ul li a{font-size:14px;font-family:'sfM';overflow: hidden;text-overflow: ellipsis;
    white-space: nowrap;
}
.rs_list ul li a:before{
    width:2px;
    height:2px;
    background:#666;
    border-radius:2px;
    margin-right:4px;
    content:"";
    display:inline-block;
    vertical-align:middle;
}
.rs_list ul li span{font-size:14px;font-family:'sfM';flex-shrink:0;margin-left:20px;}

.rs_pop{background:#fff;border-radius:15px;padding:30px;}
.rs_pop ul{overflow-y:auto;height:161px;padding:0 18px 0 0;}
.rs_pop ul li{padding:4px 0;display:flex;justify-content:space-between;}
.rs_pop ul li a{font-size:14px;font-family:'sfM';overflow: hidden;text-overflow: ellipsis;
    white-space: nowrap;
}
.rs_pop ul li a:before{
    width:25px;
    height:25px;
    color:#fff;
    background:#444;
    content:"";
    text-align:center;
    line-height:25px;
    border-radius:25px;
    display:inline-block;
    vertical-align:middle;
    font-family:'sfB';
    margin-right:9px;
}
.rs_pop ul li:nth-child(1) a:before{content:"1";background:#EC0D0D;}
.rs_pop ul li:nth-child(2) a:before{content:"2";background:#EC0D0D;}
.rs_pop ul li:nth-child(3) a:before{content:"3";background:#EC0D0D;}
.rs_pop ul li:nth-child(4) a:before{content:"4";}
.rs_pop ul li:nth-child(5) a:before{content:"5";}
.rs_pop ul li:nth-child(6) a:before{content:"6";}
.rs_pop ul li:nth-child(7) a:before{content:"7";}
.rs_pop ul li:nth-child(8) a:before{content:"8";}
.rs_pop ul li:nth-child(9) a:before{content:"9";}
.rs_pop ul li:nth-child(10) a:before{content:"10";}
.rs_pop ul li:nth-child(11) a:before{content:"11";}
.rs_pop ul li:nth-child(12) a:before{content:"12";}
.rs_pop ul li:nth-child(13) a:before{content:"13";}
.rs_pop ul li:nth-child(14) a:before{content:"14";}
.rs_pop ul li:nth-child(15) a:before{content:"15";}
.rs_pop ul li:nth-child(16) a:before{content:"16";}
.rs_pop ul li:nth-child(17) a:before{content:"17";}
.rs_pop ul li:nth-child(18) a:before{content:"18";}
.rs_pop ul li:nth-child(19) a:before{content:"19";}
.rs_pop ul li:nth-child(20) a:before{content:"20";}

.forthSection{display:flex;justify-content:space-between;gap:40px;}
.forthSection > div{position:relative;width:630px;}
.fs_list{display:flex;gap:17px;}
.fs_list > div{padding:20px 20px 10px 20px;width:100%;border:1px solid #ADD5F2;background:#E9F6FF;border-radius:15px;display:flex;flex-direction:column;}
.fs_list > div span{color:#747474;font-size:14px;display:block;}
.fs_list > div span:before{
    width:24px;
    height:24px;
    background-image:url(/images/uportal/icon_clock.png);
    content:"";
    display:inline-block;
    vertical-align:middle;
    margin-right:4px;
}
.fs_list > div a{
    color:#000;
    font-size:16px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    margin:15px 0 20px 0;
    height:77px;
}
.fs_list > div em{color:#418BDF;font-size:15px;display:block;text-align:right;}
.fs_list > div em:before{
    width:20px;
    height:20px;
    background-image:url(/images/uportal/icon_eye.png);
    content:"";
    display:inline-block;
    vertical-align:middle;
    margin-right:4px;
}

.fp_list{display:flex;margin:40px 0 0 0;gap:50px;}
.fp_list > div img{box-shadow:6px 6px 0 #B8D2EE;}
.fp_list > a{padding-top:17px;width:464px;}
.fp_list > a strong{
    font-size:17px;
    color:#000;
    font-family:'sfB';
    display: block;
    margin-bottom: 23px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.fp_list > a span{
    font-size:13px;
    color:#828282;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.btn_mmore{position:absolute;top:0;right:0;width:29px;height:29px;display:inline-block;text-indent:-9999px;background:url(/images/uportal/btn_more.png) no-repeat 0 0;}


/* response web mobile */
@media only all and (max-width: 1300px) {
    .userMain{width:auto;padding:0 20px;}
    .userMain h3{font-size:18px;}
    .stat_island ul li strong{font-size:17px;}
    .stat_map > div span{font-size:15px;}
    .stat_map > div strong{font-size:16px;}
    .ss_list a span{font-size:14px;}

    .stat_chart{text-align:center;}

    .firstSection{flex-direction:column;}
    .stat_island{width:auto;text-align:center;display:flex;flex-direction:column;align-items:center;}
    .stat_island ul{width:100%;}
    .stat_island ul li{padding:13px 0;}
    .zan_chart{flex-direction:column;}
    .zan_chart > div{width:auto;background-size:cover;}
    .zan_chart > ul{width:auto;height:auto;margin-top:10px;}
    .zan_chart > ul li.on a{border-left:2px solid #02A7DA;}
    .zan_chart > ul li.on a:before{display:none;}
    .zan_chart > ul li a{height:40px;}
    .zan_chart > ul li a span{padding-top:11px;padding-bottom:11px;}

    .zan_link > div{flex-direction:column;}
    .zan_link > div a{margin:4px 0 !important;}
    .zan_link > div a span{height:40px;padding-left:54px;line-height:40px;}
    .zan_link > div a span br{display:none;}
    .zan_link > div:first-child a:nth-child(1),
    .zan_link > div:first-child a:nth-child(2),
    .zan_link > div:first-child a:nth-child(3),
    .zan_link > div:first-child a:nth-child(4),
    .zan_link > div:last-child a:nth-child(1),
    .zan_link > div:last-child a:nth-child(2),
    .zan_link > div:last-child a:nth-child(3),
    .zan_link > div:last-child a:nth-child(4){background-size:auto 34px;}

    .secondSection{flex-direction:column;height:auto;margin:30px 0;align-items:center;gap:10px;}
    .secondSection h3{margin-bottom:12px;}
    .secondSection h3 span{margin:0 6px;}
    .secondSection h3 span br{display:none;}
    .secondSection h3:before{width:20px;height:20px;background-size:cover;}
    .secondSection h3:after{display:none;}
    .ss_list{width:100%;}
    .ss_list a span{padding-bottom:10px;}
    .ss_visit{width:100%;margin-top:15px;flex-direction:column;padding:15px 0;}
    .ss_visit span{font-size:15px;margin-bottom:10px;}
    .ss_visit span br{display:none;}
    .ss_visit strong{font-size:24px;text-align:center;}
    .ss_visit strong:before{width:35px;height:35px;background-size:cover;}

    .thirdSection{flex-direction:column;margin:30px 0;}
    .thirdSection > div{width:auto;}

    .forthSection{flex-direction:column;}
    .forthSection > div{width:auto;}
    .fs_list{flex-direction:column;}
    .fs_list > div{width:auto;}
    .fp_list{flex-direction:column;align-items:center;}
    .fp_list > a{width:100%;}
    .fp_list > a strong{
        overflow: initial;
        text-overflow: initial;
        white-space: normal;
    }
    .fp_list > a span{
        overflow: initial;
        text-overflow: initial;
        word-wrap: normal;
        display: block;
        -webkit-line-clamp: none;
        -webkit-box-orient: initial;
    }
}

@media only all and (max-width: 475px) {
    .stat_map{transform:scale(0.8);}
}