@charset "utf-8";

/* CSS Document */

/************************************************************/

.reu {

	cursor: pointer;

}

body{

	background: url(../images/bg_in.jpg) center top no-repeat;

	background-attachment: fixed;

	background-repeat: no-repeat;

}

#main_box{

	background: url(../images/banner/banner.jpg) center top no-repeat;

	-webkit-transition: all .3s ease;

	-moz-transition: all .3s ease;

	-o-transition: all .3s ease;

	transition: all .3s ease;

}

#main {

	max-width:1280px;

    padding: 60px 2.7% 70px 2.7%;

	margin: 0 auto;

	position: relative;

	background:#FFF;

	border-top:#A6C9FD 3px solid;

}

#banner {

	position: relative;

	overflow: hidden;

	text-align:right;

}

#banner .pic{

	max-width:1300px;

	margin:0 auto;

	padding:0 10px;

}

#banner .pic img{

	max-width:100%;

	height:auto !important;

}

#mask {

	background: rgba(0,0,0,0.5);

	position: fixed;

	top: 0px;

	bottom: 0px;

	left: 0px;

	right: 0px;

	z-index: 4;

	display: none;

	-webkit-transition: all .3s ease;

	-moz-transition: all .3s ease;

	-o-transition: all .3s ease;

	transition: all .3s ease;

}

/************************************************************/

#breadcrumbs_box {

	width: 100%;

	height: 35px;

	background: rgba(0,0,0,0.8);

	bottom: 0px;

}

#breadcrumbs {

	color:#9D9AB8;

	font-size: 13px !important;

	line-height: 20px;

	height: 20px;

	font-weight: normal;

	text-align: center;

	position: absolute;

	right:0px;

	top:30px;

	-webkit-transition: all .3s ease;

	-moz-transition: all .3s ease;

	-o-transition: all .3s ease;

	transition: all .3s ease;

	z-index: 2;

}

#breadcrumbs span {

	color:#736546;

	text-decoration: none;

}

#breadcrumbs img {

	vertical-align: middle;

	padding: 0px 0px;

	margin-bottom: 2px;

}

#breadcrumbs a:before{

	content:'';

	width: 15px;

	height: 13px;

	display:inline-block;

	background:url(../images/home.png) no-repeat;

}

#breadcrumbs a, #breadcrumbs a:visited {

	color:#736546;

	text-decoration: none;

	-webkit-transition: all .3s ease;

	-moz-transition: all .3s ease;

	-o-transition: all .3s ease;

	transition: all .3s ease;

}

#breadcrumbs a:hover {

	color:#736546;

	text-decoration: none;

}

#breadcrumbs a:before{

	content:'';

	background:url(../images/home.png) no-repeat;

	width: 16px;

	height: 14px;

	display:inline-block;

	margin-right:5px;

	vertical-align:middle;

	margin-bottom:3px;

}

/**************************************************************/

#leftside_btn {

	position: fixed;

	width: 24px;

	line-height: 1.4;

	right: 0px;

	top: 300px;

	text-align: center;

	color: #FFF;

	font-size: 13px;

	padding: 7px 5px;

	background:#76719A;

	display: none;

	z-index: 20;

	cursor: pointer;

	letter-spacing: 1px;

	-webkit-writing-mode: vertical-lr;

	writing-mode: vertical-lr;

	-webkit-transition: all .3s ease;

	-moz-transition: all .3s ease;

	-o-transition: all .3s ease;

	transition: all .3s ease;

	-webkit-border-top-left-radius: 5px;

	-webkit-border-bottom-left-radius: 5px;

	-moz-border-radius-topleft: 5px;

	-moz-border-radius-bottomleft: 5px;

	border-top-left-radius: 5px;

	border-bottom-left-radius: 5px;

}

#leftside_btn i {

	margin-bottom: 5px;

}

body.active #leftside_btn {

	right: 220px;

}

body.active #leftside_btn i {

	-moz-transform: rotate(180deg);

	-webkit-transform: rotate(180deg);

	-o-transform: rotate(180deg);

	-ms-transform: rotate(180deg);

	transform: rotate(180deg);

}

body.active {

}

body.active #mask {

	display: block;

}

/**************************************************************/

#leftside {

	width: 200px;

	float: left;

	position: relative;

	background:rgba(255,255,255,0.6);

	padding-bottom:40px;

	-webkit-transition: all .3s ease;

	-moz-transition: all .3s ease;

	-o-transition: all .3s ease;

	transition: all .3s ease;

}

#leftside .title {

	border-bottom:#FFF 1px solid;

}

body.active #leftside {

	right: 0px;

	top: 0px;

	z-index: 10;

	overflow: auto;

}

#rightside {

	max-width: 950px;

	width: calc(100% - 230px);

	float: right;

	position: relative;

}

ul.left_menu > li.search {

	padding: 25px;

}

/**************************************************************/

.top_title_box{

}

.top_title{

	position: relative;

	margin-bottom:25px;

}

.top_title .en{

	color:#724599;

	line-height:30px;

	height:30px;

	font-size: 25px;

	font-family: 'Raleway', sans-serif;

	position: relative;

}

.top_title .en span{

	font-weight: 200;

	font-family: 'Raleway', sans-serif;

}

.top_title .cht{

	color:#724599;

	line-height:30px;

	height:30px;

	font-family:"微軟正黑體";

	font-size: 20px;

	font-weight: bold;

}

/**************************************************************/

.bread{

	max-width:1200px;

	margin:0 auto;

	color:#FFF;

	font-size: 18px;

	font-weight: bold;

	line-height:20px;

	padding:10px;

	letter-spacing:3px;

	background: url(../images/title_bg.png) left top repeat;

	margin-bottom:30px;

}

.bread:before{

	content:'';

	background:url(../images/ar.png) no-repeat;

	width: 6px;

	height: 10px;

	display:inline-block;

	margin-right:10px;

	margin-left:5px;

}

/**************************************************************/

#con_title {

	color:#767199;

	font-size: 20px;

	font-weight: bold;

	line-height: 1.4;

	margin: 0 auto;

	padding-bottom:25px;

	margin-bottom: 25px;

	border-bottom:#76719A 1px solid;
	padding-right:130px;

}

#con_title:before {

	content:'';

	width: 39px;

	height: 39px;

	display:inline-block;

	margin-bottom:-7px;

	margin-right:15px;

	background:url(../images/title_icon.png) no-repeat;

}

#con_title a, #con_title a:visited {

	color: #666666;

	text-decoration: none;

	-webkit-transition: all .3s ease;

	-moz-transition: all .3s ease;

	-o-transition: all .3s ease;

	transition: all .3s ease;

}

#con_title a:hover {

	color: #0280A5;

	text-decoration: none;

}

/**************************************************************/

.info_title {

	width: 210px;

	text-align:center;

	position: relative;

	margin:0 auto;

	margin-bottom: 30px;

	color: #333333;

	font-weight: bold;

	font-size: 18px;

	padding: 5px 10px 5px 10px;

	border: #888888 1px solid;

}

.info_title span{

	color:#C82E47;

	letter-spacing: 2px;

	font-weight: 400;

	font-family: 'Segoe UI Symbol';

	margin-left:10px;

}

/**************************************************************/

#conbody{

	margin:0 auto;

	color:#777777;

	font-size: 14px;

	line-height:1.4;

}

/**************************************************************/

@media all and (max-width:1000px) {

#breadcrumbs {

	top:10px;

}

#main{

	padding-top:30px;

}

}

@media all and (max-width:930px) {

ul.left_menu {

	max-width:none;

}

#leftside {

	width: 220px;

	padding:10px;

	background: #FFF;

	float: none;

	position: fixed;

	top: 0px;

	right: -220px;

	height: 100%;

	z-index:10;

}

#leftside_btn {

	display: block;

}

#rightside {

	width: 100%;

	float: none;

	position: relative;

}
#con_title {
	padding-right: 0;

}
#breadcrumbs{
	top:-15px;
}

}

@media all and (max-width:450px) {

#main_box{

	background: url(../images/banner/banner.jpg) center -50px no-repeat;

}

}

@media all and (max-width:420px) {

#breadcrumbs {

	color:#9D9AB8;

	font-size: 13px !important;

	line-height: 20px;

	height: 20px;

	position: absolute;

	right:30px;

	top:-15px;

}

}