/************All css************/
body, html {
        
        margin: 0;
    }
body{
	width: 100%;
	color: #555;
	font-family: "微軟正黑體",Microsoft JhengHei, "Adobe 繁黑體 Std B", "Adobe 黑体 Std R", Helvetica, sans-serif;
	padding: 0;
	font-size: 100%;
	background: #FFF;
	overflow-x: hidden;
	}
#clear{clear: both;}
img{border: none;}
a, button, input, textarea, submit, reset{
	font-family: "微軟正黑體",Microsoft JhengHei, "Adobe 繁黑體 Std B", "Adobe 黑体 Std R", Helvetica, sans-serif;
	text-decoration:none;
	}
select:focus, input[type='text']:focus, textarea:focus{
	outline: 1px solid #269A22;
	box-shadow: none;
	}
a{
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	-o-transition:all .3s ease;
	transition:all .3s ease;
	}
::selection{background: #0091ac; color: #FFF; text-shadow: none;}
.scrollup{
	width: 53px;
	height: 53px;			
	text-indent: 99px;
	position: fixed;
	bottom: 220px;
	right: 30px;
	display: none;			
	background: url(../images/backtop.jpg) no-repeat;
	z-index: 9999;
}
.ie{display: none;}
/************all css************/
.head{
	background: #FFF;
	width: 100%;
	margin: 0 auto;
	padding: 20px 0;
	}
.bread{
	text-align: left;
    font-size: 1rem;
    color: #333;
    padding: 1rem;
    margin: 0.5rem;
    margin-top: 6rem;
	}
.bread img{margin: 0 5px -2px 0;}
.bread a{color: #333;}
/************navi css************/
.container {
        position: relative;
        height: 100%;
        width: 100%;
        left: 0;
        -webkit-transition:  left 0.4s ease-in-out;
        -moz-transition:  left 0.4s ease-in-out;
        -ms-transition:  left 0.4s ease-in-out;
        -o-transition:  left 0.4s ease-in-out;
        transition:  left 0.4s ease-in-out;
	background: url(../images/indexbg.jpg) no-repeat top #FFF;
	background-size: 100% 50px;
	background-position: 0 90px;
    }
.container.open-sidebar {
        left: 180px;
    }
#sidebar {
        position: absolute;
        left: -180px;
        background: #004b85;
        width: 180px;
        height: 100%;
        box-sizing: border-box;
		box-shadow: 1px 0 20px 0px #003258 inset;
    }
#sidebar ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
#sidebar ul li {
        margin: 0;
		padding: 0 30px;
    }
#sidebar ul li a {
        padding: 10px 5px;
        font-size: 18px;
        color: white;
        text-decoration: none;
        display: block;
		border-top: 1px solid #10609d;
        border-bottom: 1px solid #004174;
        -webkit-transition:  background 0.3s ease-in-out;
        -moz-transition:  background 0.3s ease-in-out;
        -ms-transition:  background 0.3s ease-in-out;
        -o-transition:  background 0.3s ease-in-out;
        transition:  background 0.3s ease-in-out;
    }
#sidebar ul li.last a{border-bottom: none;}
#sidebar ul li:hover{
        background: #10609d;
    }
#sidebar ul li.closebt a{
        padding: 30px 5px;
        font-size: 18px;
        color: white;
		float: right;
        display: block;
		border-top: none;
        border-bottom: none;
    }
#sidebar ul li.closebt:hover{background: #004b85;}
.main-content {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        position: relative;
    }
.main-content .content{
        box-sizing: border-box;
        -moz-box-sizing: border-box;
    width: 100%;
	background: url(../images/bottombg.jpg) bottom no-repeat;
	background-size: 100% 50px;
	padding-bottom: 50px;
    }
.main-content .content h1{
        font-weight: 100;
    }
.main-content .content p{
        width: 100%;
        line-height: 160%;
    }
.main-content #sidebar-toggle {
        display: block;
        position: relative;
        float: left;
		margin: 30px 30px 0 50px;
    }
.main-content #sidebar-toggle .bar{
        display: block;
        width: 50px;
        margin-bottom: 8px;
        height: 5px;
        background-color: #004b85;
    }
.main-content #sidebar-toggle .bar:last-child{
         margin-bottom: 0;   
    }
/************left************/
.indexleft{
	width: 100%;
	text-align: center;
	position: relative;
	margin: 30px auto 0;
	}
.indexleft img{
	width: 90%;
	height: auto;
	display: block;
	vertical-align : middle;
	margin: 0 auto;
	}
.indexleft img.ie{display: none;}
.indexright{
	width: 50%;
	text-align: center;
	margin: 5% auto 0;
	}
.indexright .slogan img, .indexright .ie img{
	width: 45%;
	height: auto;
	margin: 0 auto;
	}
.info{
	width: 60%;
	margin: 30px auto 0;
	background: url(../images/indexline.png) no-repeat top;
	background-size: 100% 5px;
	padding-bottom: 45px;
	}
.infotext{
	float: left;
	width: 49%;
	margin-left: 1%;
	text-align: left;
	font-size: 18px;
	line-height: 28px;
	color: #555555;
	font-weight: bold;
	}
.indextitle{
	font-size: 24px;
	color: #004b85;
	line-height: 36px;
	}
/************wrap css************/
.wrap{
	margin: 50px auto;
	width: 70%;
	}
.title{
    color: #004b85;
    font-size: 3rem;
	text-shadow: 0.05em 0.05em 0.05em #999; 
    line-height: 4rem;
	font-weight: bold;
	}
.text{
	font-size: 15px;
	line-height: 28px;
	margin-bottom: 20px;
	}
.centertext{text-align: center;}
.blue{color: #4288CC;}
.pink{color: #db3e97;}
.alink{color: #0091ac;}
.alink:hover{text-decoration: underline;}
.bold{font-weight: bold;}
.big{font-size: 20px;}
.textl{
	float: left;
	width: 54%;
	}
.textr{
	float: right;
	width: 44%;
	}
.text img{
	max-width: 100%;
	height: auto;
	}
.imgc{
	width: 90%;
	font-size: 14px;
	text-align: center;
    margin: 10px auto;
    font-weight: bold;
	}
.imgc img{max-width: 100%; height: auto;}
.table_b{
    border-top: 1px solid #cdcdcd;
    border-left: 1px solid #cdcdcd;
	margin: 0 0 15px;
}
.table_b .top{
    background: #4288CE;
    color: #FFF;
}
.table_b td{
    padding: 5px;
    border-right: 1px solid #cdcdcd;
    border-bottom: 1px solid #cdcdcd;
}
.table_b .top .wr{
    border-right-color: #FFF;
}
.table_b .middle{
	vertical-align: middle;
	}
.textol, .textul, .inol, .inul{
    margin-left: 25px;
}
.textol{
    list-style: decimal;
}
.inol{
    list-style: lower-roman;
}
.textul{
    list-style: disc;
}
.inul {
    list-style: circle;
}
.outlink{
	float: left;
	margin-bottom: 10px;
	}
.outlink li{
	float: left;
	list-style: none;
    width: 153px;
	height: 37px;
	line-height: 37px;
	background: url(../images/outlikbg.png);
	text-align: center;
	color: #FFF;
	font-weight: bold;
	}
.outlink li a{color: #FFF;}
.outlink li a:hover{text-decoration: underline;}
.speech{
	text-align: center;
	float: left;
	width: 190px;
	margin: 0 20px;
	}
.subtitle{
	color: #099092;
	font-size: 14px;
	}
.talkname{
	color: #FF7600;
	font-size: 18px;
	font-weight: bold;
	line-height: 30px;
	}
/************footer css************/
footer{
	font-size: 14px;
	color: #FFF;
	}
.topfooer{
	padding: 10px 50px;
	background: #0091ac;
	color: #FFF;
	}
.footnotice{float: right; color: #FFF; }
.foot{
	padding: 20px 50px 10px;
	background: #004b85;
	color: #FFF;
	}
.footl{float: left; margin:-10px 0 0 ;}
.footr{float: right; margin: 6px 0 0 0;}
.footl .code{
	display: block;
	float: left;
	}
.footr .share{
	display: block;
	float: right;
	margin:-10px 5px;
	}
.footr span{
	margin-right:15px;}
.link{
	float: left;
	margin: 17px 0 0 10px;
	}
.link li{
	float: left;
	list-style: none;
	padding: 0 15px;
	}
.link .first{border-right: 1px solid #FFF;}
.link a{color: #FFF;}
.link a:hover{text-decoration: underline;}
/************IE7 FIX************/
*:first-child+html .head{width: 80%;}
*:first-child+html .topfoot{margin-top: 3px;}
*:first-child+html .footnotice{margin-top: -18px;}
*:first-child+html .footr{width: 40%; text-align: right;}
*:first-child+html .footr span{margin-right: 100px;}
*:first-child+html .footr .share{margin: -25px 5px;}
*:first-child+html .main-content .content{background: url(../images/bottombg_ie.jpg) bottom no-repeat; background-size: 100% 50px; padding-bottom: 50px;}
*:first-child+html .container{background: url(../images/indexbg_ie.jpg) 0 90px no-repeat; background-size: 100% 50px; padding-bottom: 50px;}
*:first-child+html .ie{display: block;}
*:first-child+html .ch{display: none;}
/************IE8 FIX************/
@media \0screen {
	.ie{display: block;}
	.ch{display: none;}
}

/************screen css************/
@media screen and  (min-width: 1281px) and (max-width: 1366px) {
	.indexleft{margin: 10px 0 0;}
	.indexleft img{width: 90%;}
	.indexright{margin: 5% auto 0; width: 50%;}
	.info{width: 80%; padding-bottom: 10px; margin: 10px auto 0;}
	.wrap{width: 70%;}
	.textl, .textr{float: none; width: 100%;}
	.indextitle{font-size: 22px;}
	.infotext{font-size: 17px;}
	.head{padding: 10px 0;}
	.main-content #sidebar-toggle{margin: 20px 30px 0 40px;}
	}
@media screen and  (min-width: 1025px) and (max-width: 1280px) {
	.indexleft{margin: 40px 0 0;}
	.indexleft img{width: 100%;}
	.indexright{margin: 8% auto 5%; width: 60%;}
	.info{width: 90%; padding-bottom: 20px; margin: 40px auto 0;}
	.wrap{width: 80%;}
	.textl, .textr{float: none; width: 100%;}
	}
@media screen and  (min-width: 999px) and (max-width: 1024px) {
	.indexleft{margin: 10px 0 0;}
	.indexleft img{width: 100%;}
	.indexright{margin: 10% auto 0; width: 60%;}
	.info{width: 100%; margin: 0 auto;}
	.wrap{width: 92%;}
	.textl, .textr{float: none; width: 100%;}
	}