@charset "utf-8";
html, body{min-width:33.33vw;background:#FFF;}
.on{background-color :#fff!important;}
.show400{display:none!important;}
.hide400{display:block;}
.cutblock{position:relative;}
.fbbold{font-weight:900;}
.fbold{font-weight:700;}
.fnormal{font-weight:400;}
.fupcase{text-transform: uppercase; }
.fcapital{text-transform: capitalize;}
.selectstep2{display:none;}
.fullbg{position:absolute;top:0;left:0;width:100%;height:100%;}
/* ## margin ############## */
.mu05{margin-top:0.5vw;}
.mu1{margin-top:1vw;}
.mu2{margin-top:2vw;}
.mu3{margin-top:3vw;}
.mu4{margin-top:4vw;}
.mb2{margin-bottom:2vw;}
.myerror{position: absolute;top: 46%;left: 42%;}
.nscolor1{background:#ff0000;}/*鐵路*/
.nscolor2{background:#0000ff;}/*高鐵 */
.nscolor3{background:#00ff00;}/*國道*/
.nscolor11{background:#00db00;}
.nscolor21{background:#ffff37;}
.nscolor31{background:#ff0000;}
.fcolor1{color:#3f5e72;}/*網站色*/
.fcolor2{color:#d1bd50;}/*High light 色 */
.fcolor3{color:#cd6745;}/*紅點*/
.fcolor4{color:#ff6c00;}/*亮局色*/
.fcolor5{color:#bf3a36;}/*紅字*/
.fcolor11{color:#fff;}/*白色*/
.fcolor12{color:#dde2e5;}/*幾乎白*/
.fcolor13{color:#7a8e71;}/*中灰*/
.fcolor14{color:#889d89;}/*淡灰色*/
.fcolor15{color:#242424;}/*幾乎黑*/
.fcolor16{color:#b1903c;}/*幾乎黑*/

.ls1{letter-spacing: 1px;}
.ls2{letter-spacing: 2px;}
.ls3{letter-spacing: 3px;}
.scolor1{background:#731d1a;}/* swatch 顏色 */
.scolor2{background:#49799a;}/* swatch 顏色 */
.scolor3{background:#a58b3d;}/* swatch 顏色 */
.scolor4{background:#e952ce;}/* swatch 顏色 */
.scolor5{background:#05a464;}/* swatch 顏色 */
.scolor6{background:#06bdff;}/* swatch 顏色 */
.scolor21{background:#e2e1ee;}/*區塊被景色 1*/
.scolor22{background:#eae9a6;}/*區塊被景色 2*/
.scolor23{background:#f1c775;}/*區塊被景色 3*/

.bkgnd1{background:#3f5e72;}/*網站色*/
.bkgnd2{background:#bb9f64;}/*特殊被景色*/
.bkgnd2{background:#bb9f64;}/*特殊被景色*/
.bkgnd11{background:#ffffff;}/*白*/
.bkgnd12{background:#fafafa;}/*幾乎白*/
.bkgnd13{background:#f1f1f1;}/*也很白*/
.bkgnd14{background:#dbe2d7;}
.bkgnd15{background:#536d7b;}/*淡一點的網站色*/
.bkgnd16{background:#88b2ce;}/*mobile header*/
.bkinmenu{background:rgba(63,94,114,0.5);}

.linecolor1{background:#c48c31;}/*文湖*/
.linecolor2{background:#e3002c;}/*淡水信義線 */
.linecolor3{background:#fd92a3;}/*新北投支線*/
.linecolor4{background:#008659;}/*松山新店線 */
.linecolor5{background:#cfdb00;}/*小碧潭支線*/
.linecolor6{background:#f8b61c;}/*中和新蘆線*/
.linecolor7{background:#0070bd;}/*板南線  */
.linecolor8{background:#fedb00;}/*環狀線 */
.linecolor9{background:#a1d884;}/*萬大樹林線  */
.linecolor10{background:#77bc1f;}/*貓空纜車  */
.linecolor11{background:#79bce8;}/*三鶯線 */
.linecolor12{background:#e5554f;}/*淡海輕軌  */
.linecolor13{background:#c3b091;}/*安坑輕軌 */
.linecolor14{background:#cc7722;}/*深坑輕軌  */
.linecolor15{background:#ff00ff;}/*五股泰山輕軌  */

.linecolor21{background:#8246AF;}/*機場線  */
.linecolor22{background:#0057B8;}/*桃園捷運藍線  */
.linecolor23{background:#B20016;}/*桃園捷運紅線  */
.linecolor24{background:#62A033;}/*桃園捷運綠線  */
.linecolor25{background:#006835;}/*桃園捷運綠線2-延伸線  */
.linecolor26{background:#824729;}/*桃園捷運棕線  */
.linecolor27{background:#00549D;}/*三鶯線桃園段  */
.linecolor28{background:#FFA500;}/*桃園捷運橘線 */

.linecolor31{background:#008000;}/*烏日文心北屯線、綠線延伸線  */
.linecolor32{background:#ea0437;}/*臺鐵捷運紅線  */

.linecolor41{background:#008000;}/*台南保留 */
.linecolor42{background:#ea0437;}/*台南保留 */

.linecolor51{background:#e20b65;}/*高雄紅線 */
.linecolor52{background:#faa73f;}/*高雄橘線 */
.linecolor53{background:#7cbd52;}/*高雄環狀輕軌 */
.linecolor54{background:#0008bd;}/*高雄台鐵捷運 */

.centerwrap{position:relative;width:68%;margin:0 auto;}
.centerwrapmenu{width:68%;margin:0 auto;}
.font06{font-size:0.6vw;line-height:1vw;}
.font08{font-size:0.8vw;line-height:1.2vw;}
.font10{font-size:1vw;line-height:1.6vw;}
.font12{font-size:1.2vw;line-height:1.9vw;}
.font15{font-size:1.5vw;line-height:2.4vw;}
.font17{font-size:1.7vw;line-height:2.8vw;}
.font20{font-size:2vw;line-height:3.4vw;}

/* ############## HEAD ########## */
.headlogo{position:absolute;top:2vw;left:5vw;width:16vw;z-index:2;}
.topbanners{position:relative;width:100%;z-index:1;display:block;}
#navmenu{z-index:2;}
#navmenu.bkinmenu{position:absolute;width:100%;bottom:0;}
#navmenu .navitem{width:16.36%;padding:0;float:left;text-align:center;}
#navmenu .navitemin{width:100%;padding:1.5vw 0;text-align:center;}
#navmenu .navitemin a{text-align:center;}
#navmenu .navitemin img{width:70%; padding:0 15%;}
#navmenu .navitem{}
#navmenu.bkinmenu .navitem .fa{font-size:1.5vw;line-height:1.5vw;color:#fff;margin-top:-1.5vw;display:none;}

#navmenu.bkinmenu .centerwrap{position:relative;z-index:2;}
#navmenu.bkinmenu .centerwrapmenu{z-index:2;}
#navmenu.bkinmenu .navitem:hover{background:rgba(63,94,114,0.5);}
#navmenu.bkinmenu .navitem:hover .fa{display:block;}
#navmenu.bkinmenu .navitem.on{background:rgba(63,94,114,1);}
#navmenu.bkinmenu .navitem .subnavitem{position:absolute;width:100%;left:0;bottom:0;padding:1.5vw 0;transform:translateY(100%);font-size:1vw;line-height:1.2vw;text-align:left;display:none;background:#b8d0df;}
/*#navmenu.bkinmenu .subnavitembg{position:absolute;width:100%;;bottom:-2.6vw;height:1.5vw;padding:0.7vw 0;background:rgba(63,94,114,1);z-index:0;display:none;}*/

#navmenu.bkinmenu .navitem .subnavitem .subnavinbox{display:block;width:24%;float:left;margin:0 0.5%;}
/*#navmenu.bkinmenu .navitemhover:hover .subnavitem{display:block;}*/
#navmenu.bkinmenu .navitem .subnavitem .subnavinbox .subnavintitle{display:block;background:#98b6c9;color:#222;font-size:1vw;line-height:1.2vw;font-weight:900!important;padding:0.3vw 1vw;margin-bottom:0.5vw;}
#navmenu.bkinmenu .navitem .subnavitem .subnavinbox a.subnavintitle:hover{background:#f5e5c4;color:#b79651;}
#navmenu.bkinmenu .navitem .subnavitem .subnavinbox a.subnavintitle.on{background:#f5e5c4;color:#000;}
#navmenu.bkinmenu .navitem .subnavitem .subnavinbox .subnavinitem{position:relative;display:block;padding:0 1vw;color:#3f5e72;}
#navmenu.bkinmenu .navitem .subnavitem .subnavinbox .subnavinitem .fa{font-size:0.5vw;line-height:1.8vw;color:#3f5e72;margin-right:0.5vw;margin-top:0;display:inline;float:left;}
#navmenu.bkinmenu .navitem .subnavitem .subnavinbox .subnavinitem a{font-size:1vw;line-height:1.8vw;color:#3f5e72;font-weight:600!important;}
#navmenu.bkinmenu .navitem .subnavitem .subnavinbox .subnavinitem a:hover{color:#fff;}
#navmenu.bkinmenu .navitem .subnavitem .subnavinbox .subnavinitem.on a{color:#000;background:none;}
#navmenu.bkinmenu .navitem .subnavitem .subnavinbox .subnavinitem.on{background:#f1e4c4;}
/*#navmenu.bkinmenu .navitem:hover .subnavitem{display:block;}*/
/*########### 基礎pop ##########*/
#formpop,#formpop2{position:fixed;display:none;z-index:998;width:60%;top:50%;left:50%;padding:0.3vw;transform:translateX(-50%) translateY(-50%);background:rgba(255,255,255,1);border:0.3vw solid #fff;text-align:center;}
#formpopin{position:relative;border:0.3vw solid #00335f;overflow-y:auto;max-height:80vh;z-index:1;}
#formpopclose{position:absolute;top:-0.3vw;right:-0.3vw;z-index:2;text-align:center;border:0.6vw solid #fff;background:#124e80;height:3vw;width:3vw;}
#formpopclose i{font-size:2.2vw;line-height:3vw;}
.formbox{padding:3vw 2vw;text-align:left;}
#mapover{position:absolute;width:60%;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);text-align:center;}
#mapover img{width:20%;}
/* ###########  indexcontentbox ######## */
#indexcontentbox{position:relative;}
#indexcontentbox .line{margin:2vw auto;width:12vw;height:1px;}
#indexcontentbox .line.type2{margin:0.5vw auto;width:12vw;height:1px;}
#indexcontentbox .line span:nth-child(1){display:inline-block;width:3vw;height:1px;background:#bf3a36;float:left;}
#indexcontentbox .line span:nth-child(2){display:inline-block;width:9vw;height:1px;background:#d3d3d3;float:left;}
#indexcontentbox .line.type2 span:nth-child(1){display:inline-block;width:3vw;height:2px;background:#bf3a36;float:left;}
.indexcontentwrap{padding:3vw 0 5vw 0;}
.indexcontentwrap .contentline{padding:1vw 0 3vw 0;}
.indexcontentwrap .contentline.type2{padding:3vw 0 5vw 0;margin:2vw 0;}
.contentline .contentitem{width:25.3%;margin:0vw 4% 3vw 4%;float:left;}
.contentline.type2 .contentitem{width:25.3%;margin:0 4%;float:left;}
.contentitem .itemtop{position:relative;height:2.8vw;padding-top:3.5vw;}
.contentitem .itemtop p{font-size:1.6vw;line-height:2.8vw;letter-spacing: 3px;text-align:left;font-weight:bold;}
.contentitem .itemtop img{position:absolute;height:100%;bottom:0;left:4.4vw;}
.contentitem .itemtop.s2 img{position:absolute;height:100%;bottom:0;left:8vw;}

.contentitem .itembottom{position:relative;height:4.8vw;width:auto;text-align:center;}
.contentitem .itembottomin{position:relative;display:inline-block;margin:0 auto;}
.contentitem .itembottom  h6{position:relative;width:100%;text-align:center;}
.contentitem .itembottom  p{font-size:1.6vw;line-height:2.6vw;padding-top:1.5vw;letter-spacing: 3px;text-align:right;font-weight:bold;float:left;}
.contentitem .itembottom  h3{position:relative;width:auto;font-size:3.6vw;line-height:4.6vw;color:#1b7dc1;font-family:arial;float:left;}
.contentline.type2  .contentitem .itemtop{position:relative;height:auto;padding-top:0;text-align:center;}
.contentline.type2  .contentitem .itemtop img{position:relative;height:7vw;bottom:auto;left:auto;}
.contentline.type2  .contentitem .itembottom{height:6.2vw;margin-top:1vw;text-align:center;}

.indexgraphbox{position:relative;height:30vw;background:#fff;margin:1.5vw 0;}
#indexcanvas{position:absolute;top:3vw;left:5%;width:90%!important;height:calc(100% - 6vw)!important;}

/*新版道路公路 */
.mselectwrap{padding:30px 0;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content:space-around;}
.mselectwrap img{display: flex;}
/* ########  DOC ########### */
.docwrap{position:relative;overflow-x:hidden;}
.doctitle{position:relative;padding:0 1vw;text-align:left;border-bottom:1px solid #6f8694;}
.doctitle i{float:right;line-height:3.4vw;}
.doccontent{position:relative;padding:1vw;text-align:left;display:none;}
/*.docline.on .doccontent{display:block;height:auto;}*/
.doccontent.fm{position:relative;padding:1vw 0;text-align:left;}
.downicon{float:left;height:100%;margin-right:0.3vw;}
.metroline{width:55%;margin-bottom:0.5vw;}
.metroline:hover{background:#444;}
.metroline .fa{display:none; -webkit-transition: all 0.6s ;   transition: all 0.6s;}
/* ########## chart ##################*/
.chartbox{position:relative;}
.chatinwrap{position:relative;margin:0.5vw 2vw;}
.chatsp5item{width:19%;margin-right:1.24%;border-radius:1vw;background:#fff;float:left;}
.chatsp5item:nth-child(5n){margin-right:0;}
.chatsp2item.type1{width:49.4%;margin-right:1%;margin-bottom:0.5vw;border-radius:1vw;background:#fff;float:left;}
.chatsp2item.type1:nth-child(2n){margin-right:0;}
.chatsp2item.type2{width:33%;margin-right:0;margin-bottom:0.5vw;border-radius:1vw;background:#fff;float:left;}
.chatsp2item.type2:first-child{margin-right:1.24%;width:65.5%;}
.chatsp32item{width:32.6%;height:30.6vw;background:#fff;border-radius:1vw;float:right;}
.chatsp31item{width:32.6%;height:15vw;margin-right:1%;margin-bottom:0.6vw;background:#fff;border-radius:1vw;float:left;}
.chatinwrap .chatsp32{position:relative;width:160%;margin:0.5vw -30%;}
.chatitem{
  -moz-box-shadow: 1px 1px 0.3vw 0.1vw rgba(0,0,0,0.2);
  -webkit-box-shadow: 1px 1px 0.3vw 0.1vw rgba(0,0,0,02);
  box-shadow: 1px 1px 0.3vw 0.1vw rgba(0,0,0,0.2);
}
#flchart1wrap{height:26.5vw;}
#flchart2wrap{height:13vw;}
#flchart3wrap{height:13vw;}
#flchart1{width:100%;margin:1vw 0;}
#flchart2{width:100%;height:10vw;margin:1vw 0;}
#flchart3{width:100%;height:10vw;margin:1vw 0;}
/*#stchart1{width:160%!important;margin:1vw -30% 1vw -30%!important;height:15vw!important;}*/
#stchart1{width:100%;height:auto;margin:1vw 0;}
#stchart2{width:100%;height:10vw;margin:1vw 0;}
#stchart3{width:100%;height:10vw;margin:1vw 0;}
#stchart4{width:100%;height:10vw;margin:1vw 0;}
#stchart5{width:100%;height:10vw;margin:1vw 0;}
/* ################## TABLE ######################### */
table{position:relative;width:100%;border:0;border:1px solid #fff;}
tr{position:relative;border:1px solid #fff;}
th{border:1px solid #fff;padding:0.6vw 0;}
td{border:1px solid #fff;padding:0.6vw 0;}
/* PAGE */
#pagecontentbox{padding:3vw 0;}
.crumbwrap{position:absolute;top:-2.6vw;left:0;width:100%;}
#pagecontentbox h1{border-left:0.3vw solid #3f5e72;text-align:left;padding:0.2vw 0.3vw 0.3vw 0.6vw;}
#pagecontentbox h1 span{display:block;margin-top:-0.3vw;}
#pagecontentbox h1 span.infobox{display:inline-block;margin:0 0.5vw;height:3.4vw;}
#pagecontentbox h1 span.infobox i{color:#b1c3ca;font-size:2vw;line-height:3.4vw!important;}
#pagecontentbox h1 span.infobox span{display:inline;margin:0 0.5vw;line-height:3vw!important;}
#pagecontentbox h1 span.infobox span.circle{display:inline-block;background:#b1c3ca;line-height:1.6vw!important;height:1.6vw;width:1.6vw;border-radius:0.8vw;font-size:1.4vw;margin:0;overflow: hidden;color:#eee;font-weight:900;text-align:center;}
.pageselectwrap{}
.pageselectwrap  .colorwrap{float:left;padding:1vw 0;}
.pageselectwrap  .colorwrap .coloritem{position:relative;display:inline-block;margin-right:0.5vw;}
.pageselectwrap  .colorwrap .coloritem span{display:inline-block;margin:0.3vw;width:1.1vw;height:1.1vw;float:left;}
.pageselectwrap  .selectitem{padding:0.8vw 1vw;width:9vw;border-radius:0.5vw;background:#fff;float:right;margin:0 0.5vw;border:0;}
.pageselectwrap  .selectitem option{background:#fff;border:0;}
.graphwrap{position:relative;height:38vw;overflow:hidden;}
.graphintro{position:absolute;width:38%;height:100%;top:0;right:0;z-index:2;background:#fff;margin-right:-38%; -webkit-transition: all 0.4s ;   transition: all 0.4s;}
.graphintro .graphintrocontent{position:absolute;top:0;left:0;width:94%;height:96%;padding:2% 3%;z-index:1;overflow-x: hidden;overflow-y: auto;}
.graphintro .introbutton{position:absolute;top:50%;left:-1.5vw;height:10vw;margin-top:-5vw;width:1.5vw;background:rgba(63,94,114,0.7);text-align:center;font-size:1vw!important;line-height:10vw!important;color:#fff;}
 .graphintro .introbutton i{font-size:1vw!important;line-height:10vw!important;}


.graphwrap .graphmap{position:relative;width:100%;height:100%;background:#eaeaea;z-index:1;}
.graphmap iframe{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;overflow:hidden;}
.graphintrocontent .line{margin:0.3vw 0;height:1px ;background:#999999;}
.graphintrocontent p{position:relative;padding:0.2vw 0 0.2vw 2vw;}
.graphintrocontent p .fa-stack{position:absolute;top:0;left:0;margin:0.05vw -0.1vw;}
.fa-stack1{position: relative;
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    vertical-align: middle;}
/* ######### footer ######### */
footer{height:34vw;background:url(../img/footbg.jpg);background-size:cover;}
.footerin{padding-top:3vw;}
.footlogo{width:3.5vw;}
footer .line{margin:0.5vw auto;height:1px;background:#fff;}
footer p{margin: 0.3vw 0;}
.ppt{    left: 10px;
    text-align: center;
    background: #3498db;
    color: #fff;
    border-radius: 2px;
    width: 7em;
    height: 2em;
    line-height: 2em;
    vertical-align: middle;
    font-size: 1.1vw;
    float: right;}

@media screen and (max-width: 1600px) {
  .centerwrap{position:relative;width:74%;margin:0 auto;}
  .centerwrapmenu{width:74%;margin:0 auto;}
  .font06{font-size:0.66vw;line-height:1.1vw;}
  .font08{font-size:0.9vw;line-height:1.4vw;}
  .font10{font-size:1.1vw;line-height:1.7vw;}
  .font12{font-size:1.3vw;line-height:2vw;}
  .font15{font-size:1.6vw;line-height:2.5vw;}
  .font17{font-size:1.8vw;line-height:2.8vw;}
  .font20{font-size:2.1vw;line-height:3.5vw;}
  #flchart1wrap{height:28.5vw;}
  #flchart2wrap{height:14vw;}
  #flchart3wrap{height:14vw;}
}
/* 1000 以下顯示  平板版本--影片改圖騙    */
@media screen and (max-width: 1360px) {
  .centerwrap{position:relative;width:78%;margin:0 auto;}
  .centerwrapmenu{width:78%;margin:0 auto;}
  .font06{font-size:0.7vw;line-height:1.1vw;}
  .font08{font-size:1vw;line-height:1.6vw;}
  .font10{font-size:1.2vw;line-height:1.8vw;}
  .font12{font-size:1.4vw;line-height:2.1vw;}
  .font15{font-size:1.7vw;line-height:2.6vw;}
  .font17{font-size:1.9vw;line-height:3vw;}
  .font20{font-size:2.3vw;line-height:3.8vw;}
  .chatsp32item{width:32.6%;height:32.6vw;background:#fff;border-radius:1vw;float:right;}
  .chatsp31item{width:32.6%;height:16vw;margin-right:1%;margin-bottom:0.6vw;background:#fff;border-radius:1vw;float:left;}
  #flchart1wrap{height:30.5vw;}
  #flchart2wrap{height:15vw;}
  #flchart3wrap{height:15vw;}
}

/* 1000 以下顯示  平板版本--影片改圖騙    */
@media screen and (max-width: 1000px) {
  .show400{display:block!important;}
  .hide400{display:none!important;}
  .centerwrap{position:relative;width:92%;margin:0 auto;}
  .centerwrapmenu{width:92%;margin:0 auto;}
  /* ## margin ############## */
  .mu05{margin-top:1.5vw;}
  .mu1{margin-top:3vw;}
  .mu2{margin-top:6vw;}
  .mu3{margin-top:9vw;}
  .mu4{margin-top:12vw;}
  .mb2{margin-bottom:6vw;}
  /* ############## HEAD ########## */
  .mheader{position:fixed;top:0;left:0;height:10vw;width:100%;}
  .mheaderfix{z-index:100;}
  .mheaderfixbg{z-index:8;opacity:0;}
  .headlogo{position:absolute;top:2vw;left:3vw;width:40vw;z-index:2;}
  .topbanners{position:relative;width:140%;z-index:1;margin:0 -20%;}
  #indexbannerwrap,#inbannerwrap{overflow:hidden;}
  #navmenu{text-align:center;  -webkit-transition: all 0.6s ;   transition: all 0.6s ; }
  #navmenu.bkinmenu{position:fixed;width:100%;height:100%;top:0;left:110%;bottom:auto;background:rgba(63,94,114,1);z-index:98;opacity:0;}
  #navmenu.bkinmenu .centerwrap{padding-top:15%;}
  #navmenu.bkinmenu .centerwrapmenu{padding-top:15%;}
  .indexmenu .centerwrap{padding:5vw 0;}
  #navmenu .navitem{display:inline-block;width:30%;margin:0;padding:5vw 0;float:none;text-align:left;}
  #navmenu.indexmenu .navitem{padding:3vw 0;}
  #navmenu .navitemin{width:80%;padding:0;text-align:left;float:left;}
  #navmenu.indexmenu .navitemin{width:100%;}
  #navmenu.bkinmenu .centerwrap{width:100%;}
  #navmenu.bkinmenu .centerwrapmenu{width:100%;}
  #navmenu.bkinmenu .navitem{display:block;width:90%;margin:0;padding:2vw 5%;float:none;text-align:left;min-height:8vw;}
  #navmenu.bkinmenu .navitem.on{background:rgba(255,255,255,0.2);}
  #navmenu.bkinmenu .navitemin img{height:8vw;width:auto;float:left;margin-right:4vw;padding:0;}
  #navmenu.bkinmenu .navitem p{line-height:8vw;display:inline-block;}
  #navmenu.bkinmenu .navitem .fa{font-size:4vw;line-height:8vw;color:#fff;float:right;position:relative;bottom:auto;left:auto;transform: none;}
  #navmenu.bkinmenu .navitem .subnavitem{position:relative;width:100%;bottom:auto;height:auto;padding:1vw 0;display:none;background:none;transform:translateY(0);}
  /*
  #navmenu.bkinmenu .navitem .subnavitem a{display:block;font-size:3vw;line-height:6vw;text-align:left;border-right:none;padding:0 0 0 13vw;}
  #navmenu.bkinmenu .navitem .subnavitem a:last-child{border-right:none;}
  */
  #navmenu.bkinmenu .navitem .subnavitem .subnavinbox{display:block;width:80%;margin:2vw 0 2vw 19%;}
  #navmenu.bkinmenu .navitem .subnavitem .subnavinbox .subnavintitle{display:block;background:none;color:#f0f0f0;font-size:3.4vw;line-height:6vw;font-weight:900!important;padding:0;margin-bottom:0.5vw;}
  #navmenu.bkinmenu .navitem .subnavitem .subnavinbox a.subnavintitle:hover{background:none;color:#f0f0f0;}
  #navmenu.bkinmenu .navitem .subnavitem .subnavinbox a.subnavintitle.on{background:none;color:#fff;}
  #navmenu.bkinmenu .navitem .subnavitem .subnavinbox .subnavinitem{position:relative;display:block;margin:0 1vw;color:#f0f0f0;}
  #navmenu.bkinmenu .navitem .subnavitem .subnavinbox .subnavinitem .fa{font-size:2vw;line-height:5vw;color:#f0f0f0;margin-right:2vw;margin-top:0;display:inline;float:left;}
  #navmenu.bkinmenu .navitem .subnavitem .subnavinbox .subnavinitem a{font-size:2.8vw;line-height:5vw;color:#f0f0f0;font-weight:600!important;}
  #navmenu.bkinmenu .navitem .subnavitem .subnavinbox .subnavinitem a:hover{color:#fff;}
  #navmenu.bkinmenu .navitem .subnavitem .subnavinbox .subnavinitem.on a{color:#fff;}
  #navmenu.bkinmenu .navitem .subnavitem .subnavinbox .subnavinitem.on{background:rgba(0,0,0,0.2);}
  #navmenu.bkinmenu .navitem .subnavitem .centerwrap{padding-top:0;}



  #sidemenuicon{position:fixed;top:1vw;right:3vw;font-size:8vw;line-height:8vw;color:#fff;z-index:99;}
  #formpop{position:fixed;z-index:998;width:90%;padding:1vw;border:1vw solid #fff;}
  #formpopin{border:1vw solid #00335f;overflow-y:auto;max-height:80vh;z-index:1;}
  #formpopclose{position:absolute;top:-1vw;right:-1vw;border:2vw solid #fff;height:9vw;width:9vw;}
  #formpopclose i{font-size:7vw;line-height:9vw;}
  .formbox{padding:8vw 5vw;}

  .font06{font-size:3vw;line-height:4.8vw;-webkit-transform:scale(0.6); }
  .font08{font-size:3vw;line-height:4.8vw;-webkit-transform:scale(0.8); }
  .font10{font-size:3vw;line-height:4.8vw;}
  .font12{font-size:3.5vw;line-height:5.4vw;}
  .font15{font-size:4.5vw;line-height:6.8vw;}
  .font17{font-size:5.1vw;line-height:8vw;}
  .font20{font-size:6vw;line-height:10vw;}
  #indexcontentbox{padding:15vw 0 0 0;}
  #indexcontentbox .fullbg{position:absolute;top:0;left:-100%;width:300%;height:100%;}
  #indexcontentbox .line{margin:5vw auto;width:40vw;height:1px;}
  #indexcontentbox .line.type2{margin:1vw auto;width:40vw;height:1px;}
  #indexcontentbox .line span:nth-child(1){display:inline-block;width:10vw;height:1px;background:#bf3a36;float:left;}
  #indexcontentbox .line span:nth-child(2){display:inline-block;width:30vw;height:1px;background:#d3d3d3;float:left;}
  #indexcontentbox .line.type2 span:nth-child(1){height:2px;width:10vw;}
  #indexcontentbox .line.type2 span:nth-child(2){width:50vw;}
  /* ###########  indexcontentbox ######## */
  .indexcontentwrap{padding:9vw 0 15vw 0;overflow:hidden;}
  .indexcontentwrap .contentline{padding:3vw 0 9vw 0;}
  .indexcontentwrap .contentline.type2{padding:3vw 0 15vw 0;margin:6vw 0;}
  .contentline .contentitem{width:44%;margin:0vw 3% 10vw 3%;float:left;}
  .contentline.type2 .contentitem{width:44%;margin:0 3%;float:left;}
  .contentitem .itemtop{position:relative;height:10vw;padding-top:10vw;}
  .contentitem .itemtop p{font-size:5vw;line-height:10vw;letter-spacing: 1px;text-align:left;font-weight:bold;}
  .contentitem .itemtop img{position:absolute;height:100%;bottom:0;left:13vw;}
  .contentitem .itemtop.s2 img{position:absolute;height:100%;bottom:0;left:22vw;}

  .contentitem .itembottom{position:relative;height:10vw;width:auto;text-align:center;}
  .contentitem .itembottomin{position:relative;display:inline-block;margin:0 auto;}
  .contentitem .itembottom  h6{position:relative;width:100%;text-align:center;}
  .contentitem .itembottom  p{font-size:4vw;line-height:4vw;padding-top:6vw;letter-spacing: 3px;text-align:right;font-weight:bold;float:left;}
  .contentitem .itembottom  h3{position:relative;width:auto;font-size:8vw;line-height:13vw;color:#1b7dc1;font-family:arial;float:left;}
  .contentline.type2  .contentitem .itemtop{position:relative;height:auto;padding-top:0;text-align:center;}
  .contentline.type2  .contentitem .itemtop img{position:relative;height:15vw;bottom:auto;left:auto;}
  .contentline.type2  .contentitem .itembottom{height:22vw;margin-top:1vw;text-align:center;}

  .indexgraphbox{height:auto;background:#fff;margin:5vw 0;}
  .indexgraphbox table{width:100%;}
  .indexgraphbox table tr{border:1px solid #ccc;border-collapse: collapse;}
  .indexgraphbox table tr th,.indexgraphbox table tr td{font-size:3.6vw;line-height:5vw;padding:0.5vw;border:1px solid #ccc;}
  .indexgraphbox table tr th{color:#fff;background:#4488aa;}
  .indexgraphbox table tr td{color:#000;}
  #indexcanvas{top:6vw;height:calc(100% - 12vw)!important;}


  /* ########  DOC ########### */
  .docwrap{min-height:100vw;}
  .doctitle{position:relative;padding:0 9vw 0 3vw;text-align:left;border-bottom:1px solid #6f8694;}
  .doctitle i{position:absolute;top:0;right:2vw;line-height:10vw;}
  .doccontent{position:relative;padding:3vw;text-align:left;display:none;}
  /*.docline.on .doccontent{display:block;height:auto;}*/
  .doccontent.fm{position:relative;padding:1vw 0;text-align:left;}
  .metroline{width:calc( 100% - 12vw);margin-bottom:1.5vw;}

  /* ########## chart ##################*/
  .chartbox{position:relative;}
  .chatinwrap{position:relative;margin:1.5vw 1vw;}
  .chatsp5item{width:19.2%;margin-right:1%;border-radius:2vw;background:#fff;float:left;}
  .chatsp5item:nth-child(5n){margin-right:0;}
  .chatsp2item{width:100%;margin-right:0;margin-bottom:2vw;border-radius:2vw;background:#fff;float:left;}
  .chatsp2item:first-child{margin-right:0;width:100%;}
  .chatsp2item  .chatinwrap{position:relative;margin:3vw 4vw;}
  .chatsp32item{width:100%;height:60vw;margin-bottom:2vw;margin-right:1.8%;float:none;border-radius:2vw;}
  .chatsp31item{width:100%;height:60vw;margin-bottom:2vw;margin-right:1.8%;float:none;border-radius:2vw;}
  .chatsp31item:nth-child(2n+1){margin-right:0;}
  .chatsp31item  .chatinwrap{position:relative;margin:3vw 4vw;}
  .chatsp32item  .chatinwrap{position:relative;margin:3vw 4vw;}
  .chatinwrap .chatsp32{position:relative;width:100%;margin:0.5vw 0%;}
  .chatitem{
    -moz-box-shadow: 1px 1px 0.3vw 0.1vw rgba(0,0,0,0.2);
    -webkit-box-shadow: 1px 1px 0.3vw 0.1vw rgba(0,0,0,02);
    box-shadow: 1px 1px 0.3vw 0.1vw rgba(0,0,0,0.2);
  }
  #flchart1wrap{height:60vw;}
  #flchart2wrap{height:60vw;}
  #flchart3wrap{height:60vw;}
  #flchart1{width:100%;margin:1vw 0;}
  #flchart2{width:100%;height:10vw;margin:1vw 0;}
  #flchart3{width:100%;height:10vw;margin:1vw 0;}
  #stchart1{width:100%!important;height:auto!important;margin:3vw 0%!important;}
  #stchart2{width:100%;height:auto;margin:3vw 0;}
  #stchart3{width:100%;height:auto;margin:3vw 0;}
  #stchart4{width:100%;height:auto;margin:3vw 0;}
  #stchart5{width:100%;height:auto;margin:3vw 0;}

  /* ################## TABLE ######################### */
  table{position:relative;width:100%;border:0;border:1px solid #fff;}
  tr{position:relative;border:1px solid #fff;}
  th{border:1px solid #fff;padding:1.5vw 0;}
  td{border:1px solid #fff;padding:1.5vw 0;}
  /* PAGE */
  /* PAGE */
  #pagecontentbox{padding:8vw 0;}
  .crumbwrap{position:absolute;top:-6.5vw;left:0;width:100%;}
  #pagecontentbox h1{border-left:1vw solid #3f5e72;text-align:left;padding:0 0.7vw 0.7vw 2vw;}
  #pagecontentbox h1 span{display:block;margin-top:-0.5vw;}
  #pagecontentbox h1 span.infobox{display:inline-block;margin:0 0.5vw;height:10vw;}
  #pagecontentbox h1 span.infobox i{color:#b1c3ca;font-size:6vw;line-height:10vw!important;}
  #pagecontentbox h1 span.infobox span{display:inline;margin:0 0.5vw;line-height:10vw!important;}
#pagecontentbox h1 span.infobox span.circle{display:inline-block;background:#b1c3ca;line-height:4.5vw!important;height:5vw;width:5vw;border-radius:3.8vw;font-size:4.5vw;margin:0;overflow: hidden;color:#eee;font-weight:900;text-align:center;}

  .pageselectwrap{}
  .pageselectwrap  .colorwrap{float:none; display:block;text-align:left;padding-bottom:2vw;}
  .pageselectwrap  .colorwrap .coloritem{position:relative;display:inline-block;margin-right:2vw;}
  .pageselectwrap  .colorwrap .coloritem span{display:inline-block;margin:0.6vw;width:3.6vw;height:3.6vw;float:left;}
  .pageselectwrap  .selectitem{padding:0.8vw 1vw;width:9vw;border-radius:0.5vw;background:#fff;float:right;margin:0 0.5vw;border:0;}
  .pageselectwrap  .selectitem option{background:#fff;border:0;}

  .pageselectwrap  .selectitem{padding:2vw 3vw;width:25vw;border-radius:1vw;background:#fff;float:right;margin:0 1.5vw;border:0;}
  .graphwrap{position:relative;height:80vh;overflow:hidden;}
  .graphintro{position:absolute;width:80%;height:100%;top:0;right:0;z-index:2;background:#fff;margin-right:-80%; -webkit-transition: all 0.6s ;   transition: all 0.6s ; }
  .graphintro .introbutton{position:absolute;top:50%;left:-4vw;height:20vw;margin-top:-10vw;width:4vw;background:rgba(63,94,114,0.7);text-align:center;font-size:3vw!important;line-height:20vw!important;color:#fff;}
  .graphintro .introbutton i{font-size:3vw!important;;line-height:20vw!important;}

 .graphwrap .graphmap{position:relative;width:100%;height:100%;background:#eaeaea;z-index:1;}

  .graphintrocontent .line{margin:1vw 0;height:1px ;background:#999999;}
  .graphintrocontent p{position:relative;padding:0.5vw 0 0.5vw 6vw;}
  .graphintrocontent p .fa-stack{position:absolute;top:0;left:0;margin:0.1vw -0.4vw;}
   .fa-stack1{position:absolute;left:0;margin:0.1vw -0.4vw;}
  /* ######### footer ######### */
  footer{height:auto;background:url(../img/footbg.jpg);background-size:cover;}
  .footerin{padding:8vw 0;}
  .footlogo{width:12vw;}
  footer .line{margin:4vw auto;height:1px;background:#fff;}
  footer p{margin: 1vw 0;}
  footer p span{display:block;}
  .ppt{
    font-size: 4.1vw;}
}