@charset "utf-8";
/*===========global style start============*/
body{
    font-size: 20px;
    color:#333;
    /*font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;*/
    font-family: 'Noto Sans TC', "Heiti TC", "微軟正黑體", Microsoft JhengHei, "Roboto Sans", Helvetica, Arial, sans-serif;
    /*font-weight: bold;*/
    -webkit-text-size-adjust: none;
}
*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
}
ul,ol{
    list-style: none;
}
a{
    text-decoration: none;
}
.clear-float {
    clear:both;
    height:0px;
    font-size:0px;
    padding:0;
    margin:0;
    border:0;
    line-height:0px;
    overflow:hidden;
    display: block;
}
/*ad image CSS*/
.ad-image{
    width: 100%;
    display: block;
    margin: 15px 0;
}
.ad-image img{
    width: 100%;
    display: block;
}
/*===========global style end============*/


/*============nav-top start==============*/
#nav-top{
    border-bottom:1px solid #DDDDDD;
    box-shadow:#CCCCCC 3px 1px 5px;
    height: 3.1em;
    font-size: 0.7em;
    position: relative;
    background: #f3f3f3;
}
#nav-top .center{
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    position: relative;
}
#nav-top .center .weather{
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    *margin-top: 10px; /*for <= IE7 */
    color: #666;
    height: 1.5em;
}
#nav-top .center .nav{
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    *margin-top: 10px;/*for <= IE7 */
    color: silver;
    height: 1.5em;
    z-index: 9999;
}
#nav-top .center .nav .more{
    display: none;
    cursor: pointer;
}
#nav-top .center .nav li.item{
    text-align: center;
    display: block;
    height: 1em;
    line-height: 1em;
    padding-left: 0.5em;
    padding-right:0.5em;
    float: left;
    color: #767676;
    border-left: 1px solid #bdbdbd;
    cursor: pointer;
}

#nav-top .center .nav li a{
    color: #767676;
}
    #nav-top .center .nav li a:hover{
        color: #BC0000;
    }

    /*nav-top more*/
    @media (max-width: 767px){
        #nav-top .center .nav{
            width: 2.5em;
            z-index: 500;
            height: 2em;
            overflow: hidden;
            right: 8px;
            border-radius: 5px;
            background: #FFFFFF;
        }
        #nav-top .center .nav li.item{
            height: 2em;
            line-height: 2em;
            border: none;
            display: block;
            width: 100%;
        }
        #nav-top .center .nav .more{
            display: block;
            text-align: center;
            font-size: 2em;
            line-height: 0.9em;
            height: 1em;
            color: #AAAAAA;
            background: #E5E1E1;
        }

    }
/*============nav-top end==============*/

/*==========logobar start =============*/
#logobar{
    clear: both;
    max-width: 1200px;
    margin: 0.75em auto;
    position: relative;
    height: 2.5em;
    border-bottom: 1px solid #e5e1e1;
    overflow: hidden;
}
    @media (max-width: 640px) {
        #logobar{
            height: 2em;
        }
    }
#logobar img{
    display: block;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    max-width: 140px;
}
#logobar .current{
    font-size: 0.7em;
    color: #807e7e;
    height: 1.5em;
    display: block;
    top: 0;
    bottom: 0;
    left: 11em;
    margin:auto 0;
    position: absolute;
    
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
    overflow: hidden;
}
#logobar .search-form{
    width: 300px;
    height: 1.6em;
    display: block;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
}
    @media (max-width: 767px){
        #logobar{
            height: 3.8em;
        }
        #logobar img{
            position: relative;
            float: left;
        }
        #logobar .current{
            top: 45px;
            left: 1em;
            margin: 0;
            width: 100%;
        }
        #logobar .search-form{
            position: relative;
            float: right;
            width: auto;
        }
    }
#logobar .search-form .search-text {
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    padding: 0.5em;
    color: #BBBBBB;
}
#logobar .search-form .search-submit {
    background: url("../images/search-icon.png") no-repeat center center;
    width: 2em;
    height: 100%;
    border-left: 1px solid #DDDDDD;
    cursor: pointer;
    
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
}
/*==========logobar end  =============*/

/*===========main start===============*/
#main{
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}    @media (max-width:1199px){
        #main{
            width: 98%;
            margin: 0 auto;
        }
    }
    /*left && right*/
    #main .left{
        width: 70%;
        float: left;
    }
    #main .right{
        width: 25%;
        float: right;
    }
    @media (max-width:639px){
        #main .left{
            width:98%;
            clear: both;
            margin: 0 auto;
        }
        #main .right{
            clear: both;
            width:98%;
            margin: 1em auto;
            float: left;
        }
    }
    /*main-header*/
#main-header{
    border-bottom: 1px solid #e5e1e1;
    margin-bottom: 1em;
}
#main-header h1{
    font-size: 1.3em;
    font-weight: normal;
    text-align: center;
    margin-bottom: 0.5em;
}
#main-header .foot-left{
    font-size: 0.7em;
    height: 3.5em;
    line-height: 3.5em;
    color: #b0b0b0;
    display: block;
    float: left;
}
#main-header .foot-left .person{
    color: #c72127;
    margin-left: 1em;
}
#main-header .foot-left .comment{
    color: #c72127;
    margin-left: 1em;
}
#main-header .foot-right{
    display: block;
    float: right;
}


/*---------artical && music && video && photos  start----------*/
    /*main-content*/
#main-content p{
    text-indent: 2em;
    font-size: 0.8em;
    line-height: 1.8em;
    margin-bottom: 0.5em;
    word-break: break-all;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}
    @media (min-width: 768px){
        #main-content p{
            text-align: justify;
            letter-spacing: 0.1em;
            word-break: break-all;
        }
    }
#main-content p img{
    margin: 0 auto;
}
#main-content video{
    display: block;
    margin: 1em auto;
}
/*-----------------------文章内容2017版布局 start-------------------------*/	
	div.fup-video{
		width: 80%;
		margin: 0 auto;
	}
		@media only screen and (max-width: 767px) {
			div.fup-video{
				width: 98%;
			}
		}
	.fup-video video{
		width: 100%;
		height: auto;
	}
	div.fup-audio{
		display: table;
		max-width: 600px;
		width: 100%;
		height: 70px;
		margin: 0 auto;
		border-radius: 8px;
		text-align: center;
		border: 1px solid #ddd;
		box-shadow: #888 2px 2px 3px;
	}
	.audio-cell{
		display: table-cell;
		vertical-align: middle;
	}
	.audio-btn{
		width: 70px;
		border-right: 1px solid #ddd;
	}
	.audio-btn i{
		width: 0;
		height: 0;
		border-left: 16px solid #888;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		display: inline-block;
		vertical-align: middle;
	}
	.audio-btn i.on{
		width: 18px;
		height: 18px;
		background: #888;
		border-radius: 3px;
		border: none;
	}
	.audio-progress{
		display: inline-block;
		vertical-align: middle;
		width: 100%;
		height: 14px;
		margin: 3px;
		border-radius: 7px;
		border: 1px solid #ddd;
		overflow: hidden;
	}
	.audio-progress>i{
		display: block;
		height: 100%;
		width: 1%;
		background: #19f;
	}
	.audio-curtime,
	.audio-total{
		width: 100px;
		font-size: 14px;
	}
	.figure-box img{
		display: block;
		/*width: 76%;*/
		height: auto;
		margin: 0 auto;
	}
	@media (max-width: 480px) {
        .figure-box img{
            max-width: 99%;
        }
    }
	.caption-p{
		text-align: center;
	}
	.caption-span{
		display: inline-block;
		text-align: left;
		font-size: 14px;
		color: #888;
	}
/*-----------------------文章内容2017版布局 end-------------------------*/	
/*-----------------------文章内容2016版布局 start-------------------------*/
			
            /*1、artical  （for photos too）*/
            #main-content .imgtxt{
                text-align: center;
                display: block;
                margin: 1em 0;
                position: relative;
            }
            #main-content .imgtxt img{
                display: block;
                margin: 0 auto;
                max-width: 76%;
            }
                @media (max-width: 480px) {
                    #main-content .imgtxt img{
                        max-width: 99%;
                    }
                }
            #main-content .imgtxt span{
                font-size: 0.7em;
                color: #868686;
                padding: 0.6em 0;
                letter-spacing: 0.1em;
            }
            #main-content p.bold{
                margin-top: 1.8em;
                font-weight: bold;
            }
            #main-content p.caption-p{
				text-indent: 0;
				text-align: center;
			}
            
            /*2、music */
            #music{
                position: relative;
            }
            #music .hidden-box{
                display: none;
                width: 620px;
                height: 60px;
                overflow: hidden;
                margin: 1em auto;
                border-radius: 12px;
                position: relative;
                border: 1px solid #d8d7d7;
            }
            #main .hidden-box .obj{
                display: block;
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                background: #efeeee;
                height: 43px;
                *width: auto;
                *position: relative;
                *margin: 0 auto;
            }
            #music .music-box{
                max-width: 620px;
                height: 80px;
                border: 1px solid #d8d7d7;
                margin: 1.5em auto;
                border-radius: 10px;
                overflow: hidden;
                position: relative;
                box-shadow: #BBBBBB 2px 2px 5px;
                background: #efeeee;
            }
            #music .music-box .music-left{
                display: block;
                float: left;
                width: 13%;
                height: 100%;
                position: relative;
                border-right:1px solid #d8d7d7;
            }
            #music .music-box .music-left .btn{
                display: block;
                width: 0;
                height: 0;
                border-top: 16px solid transparent;
                border-bottom: 16px solid transparent;
                border-left: 25px solid #333333;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                margin: auto;
                cursor: pointer;
                
                /*for IE67*/
                *font-size: 0;
                *line-height: 0;
                *overflow: hidden;
                *position: relative;
                *margin: 23px auto;

            }
            #music .music-box .music-left .play{
                border: none;
                width: 25px;
                height: 25px;
                background: #333333;
                border-radius: 3px;
            }
            #music .music-box .music-right{
                height: 100%;
                width: 86%;
                display: block;
                text-align: center;
                padding-top: 23px;
                position: relative;
                float: right;
            }
            #music .music-box .music-right .current,#music .music-box .music-right .alltime{
                display: inline-block;
                *display: inline;
                *zoom: 1;
                font-size: 0.8em;
                color: #b9b9b9;
                vertical-align: middle;
    
            }
            #music .music-box .music-right .progressbar{
                display: inline-block;
                *display: inline;
                *zoom: 1;
                width: 65%;
                height: 20px;
                background: #dedddd;
                border-radius: 12px;
                overflow: hidden;
                position: relative;
                vertical-align: middle;
                cursor: pointer;
            }
                @media (max-width: 359px) {
                    #music .music-box .music-right .progressbar{
                        width: 56%;
                    }
                }
            #music .music-box .music-right .progressbar .prog{
                border-radius: 12px;
                height: 18px;
                width: 0;
                position: absolute;
                top: 0;
                left: 0;
                border-radius: 12px;
                background: #4987ce;
                display: block;
            }
            
            /*3、video*/
            #video{
                width: 80%;
                margin: 1.5em auto;
            }
            #video .obj{
                width: 100%;
            }
                @media (max-width: 767px){
                    #video{
                        width: 98%;
                    }
                }
/*-----------------------文章内容2016版布局 end-------------------------*/              
            /*4、photos*/
            #photos{
                width: 100%;
                position: relative;
            }
            #photos .number{
                display: block;
                width: 3.2em;
                float: left;
            }
            #photos .number .current{
                color: #e55656;
                font-size: 1.4em
            }
                @media (max-width: 767px){
                    #photos .number{
                        font-size: 0.8em;
                        width: 100%;
                        text-align: center;
                    }
                }
            #photos .show{
                margin: 0 10px;
            }
            #photos .show .txt{
                display: block;
                text-indent: 0;
                margin-bottom: 2em;
                float: right;
            }
            #photos .show .imgtxt button{
                display: block;
                position: absolute;
                top: 0;
                bottom: 0;
                margin: auto;
                height: 3.5em;
                width: 2.3em;
                background: transparent;
                border: none;
                overflow: hidden;
                opacity: 0;
                filter: alpha(opacity=0);
                cursor: pointer;
            }
                @media (max-width: 639px){
                    #photos .show .imgtxt button{
                        display: none;
                    }
                }
            #photos .show .imgtxt button span{
                position: absolute;
                top: -76px;
                left: 3px;
                font-size: 6em;
                color: #DDD;
                text-shadow: #000 0px 0px 5px;
            }
            #photos .show .imgtxt button.b1{
                text-align: left;
                left: 0;
            }
            #photos .show .imgtxt button.b2{
                text-align: right;
                right: 0;
            }
            #photos .pic-copy p{
                font-size: 0.7em;
                text-align: center;
                color: #888;
            }
            #photos .list-box{
                width: 92%;
                margin: 0 auto;
                position: relative;
                margin-bottom: 2em;
                z-index: 9999;
                overflow: hidden;
            }
            #photos .list-box .list{
                font-size: 0;
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
            }
            #photos .list-box a{
                display: inline-block;
                *display: inline;
                *zoom: 1;
                padding-left: 1px;
                padding-right: 1px;
                overflow: hidden;
                position: relative;
                height: 100%;
            }
            #photos .list-box a.active{
                border: 5px solid #e55656;
            }
                @media (max-width: 639px){
                    #photos .list-box a.active{
                        border: 3px solid #e55656;
                    }
                }
            #photos .list-box a img{
                display: block;
                width: 100%;
                height: 100%;
            }
            #photos .list-box a span{
                font-size: 0;
            }
            #photos .list-btn{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 5.5em;
            }
            #photos .list-btn span{
                font-size: 4em;
                color: #b70610;
                font-weight: 100;
                cursor: pointer;
                display: block;
                position: absolute;
            }
                @media (max-width: 767px) {
                    #photos .list-btn span{
                        font-size: 3em;
                    }
                }
                @media (max-width: 479px) {
                    #photos .list-btn span{
                        font-size: 2.5em;
                    }
                }
            #photos .list-btn span.prev{
                left: 0;
            }
            #photos .list-btn span.next{
                right: 0;
            }

/*connect pdf*/
#main-content p.connect-pdf{
    text-align: right;
}
#main-content p.connect-pdf a{
    color: #2d6391;
    font-size: 0.8em;
    margin-right: 0.5em;
    padding-left: 1.8em;
    background: url(../images/doc_pdf.png) no-repeat left center;
}
#main-content p.connect-pdf a:hover{
    text-decoration: underline;
}
#main-content p.connect-pdf a img{
    margin-right: 0.5em;
}

/*artical autor && reporter info*/            
#main-content p.fromInfo{
    text-indent: 0;
    font-size: 0.7em;
    color: #b0b0b0;
    margin-top: 1.8em;
}
    /*main-footer*/
#main-footer{
    margin: 2em auto;
}
    .title{
        position: relative;
    }
    .title .text{
        font-size: 0.9em;
        font-weight: 600;
        border-bottom: 3px solid #e64c64;
        width: 4.3em;
    }
    .title .underline{
        width: 100%;
        height: 100%;
        border-bottom: 3px solid #dcdcdc;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
    }
#main-footer .content{
    margin: 0.5em auto;
}
#main-footer .content a{
    color: #807e7e;
    font-size: 0.8em;
    display: block;
    height: 2.3em;
    line-height: 2.3em;
    width: 46%;
    
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}
    @media (max-width:479px){
        #main-footer .content a{
            width: 98%;
        }
    }
    
/*---------artical && music && video && photos  end----------*/


/*right*/

#news-rank .content{
    margin: 0.5em auto;
}
#news-rank .content a{
    position: relative;
    color: #807e7e;
    font-size: 0.8em;
    display: block;
    height: 2.3em;
    line-height: 2.3em;
    
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    text-indent: 1.5em;
}
#news-rank a .icon{
    font-size: 0.9em;
    display: block;
    text-align: center;
    background: #af0202;
    color: #FFFFFF;
    width: 1.2em;
    height: 1.2em;
    line-height: 1.2em;
    text-indent: 0;
    
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto 0;
}
    /*ad-image*/
.ad-image{
    display: block;
    position: relative;
    width: 100%;
}
.ad-image img{
    width: 100%;
    display: block;
    margin: 0 auto;
    max-width: 320px;
}
/*main img-news*/
/*
 Explain: The first selector (by id) is the style for old news' page; 
 if need to delete for update new news' page, you must create another css file for new page and keep this css file for old page.
*/
#img-news,
.img-video-news
{
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}
#img-news .img-list,
.img-video-news .img-list{
    width: 100%;
    position: relative;
    display: block;
}
#img-news .item,
.img-video-news .img-list .item{
    width: 50%;
    display: block;
    color: #807e7e;
    font-size: 0.7em;
    margin-top: 15px;
    text-align: center;
    float: left;
    position: relative;
}
#img-news .item1,
.img-video-news .img-list .item1{
    padding-right: 5px;
    *padding-right: 0px;/*for <= IE7 */
}
#img-news .item2,
.img-video-news .img-list .item2{
    padding-left: 5px;
    *padding-left: 0px;/*for <= IE7 */
}
#img-news .item img,
.img-video-news .img-list .item img{
    width: 100%;
    *width: 96%;/*for <= IE7 */
}
#img-news .item span,
.img-video-news .img-list .item span{
    display: block;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}
    @media (min-width: 641px) and (max-width: 992px) {
		#img-news .item,
        .img-video-news .img-list .item{
            width: 100%;
            padding: 0;
        }
    }
		
/*===========main end===============*/

.show_in_mobile {
    display: none;
}
.show_in_screen {
    display: block;
}

@media (max-width: 640px) {
    .show_in_mobile {
        display: block;
    }
    .show_in_screen {
        display: none;
    }
}

@media (min-width: 641px) {
	.show_in_mobile {
        display: none;
    }
    .show_in_screen {
        display: block;
    }
}


/*===========footer start===========*/
#footer{
    text-align: center;
    padding: 0.6em 0;
    background: #DDD;
    box-shadow: inset #CCC 1px 1px 1px;
}
#footer p{
    font-size: 0.7em;
    color: #4d4d4d;
    height: 2.3em;
    line-height: 2.3em;
}
    @media (max-width: 640px) {
        #footer p{
            height: auto;
            line-height: normal;
        }
    }
/*===========footer end===========*/