/***************************************************************************************************************************************
這邊都是整理過的CLASS
****************************************************************************************************************************************/
a {
	color: #000079;
	text-decoration: none;
}

a:hover {
	color: #003D79;
	text-decoration: none;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
}

a:focus {
	outline: #188bff solid medium;
	text-decoration: none;
}

#header {
	z-index: 999;
	width: 100%;
	transition: all .4s ease-in-out 0s;
}

#top-bar {
	background: #003D79;
}

.topinfo_left {
	float: left;
}

.topinfo_left p {
	color: #9ec7e8;
	padding: .2em 0 0;
}

.topinfo_center {
	float: left;
	margin: .2em 5% 0;
}

.topinfo_center a {
	color: #FFF;
}

.topinfo_center a:hover {
	color: #2894FF;
}

.top-info ul {
	float: right;
	margin: 0;
	padding: 0;
	padding-top: 0;
	border-right: 1px solid #06C;
	border-left: 1px solid #003D79;
	list-style: none;
}

.top-info {
	margin-left: 0;
}

.top-info span i {
	margin-right: 5px;
	font-size: 13px;
}

.top-info li {
	float: left;
}

.top-info li a {
	display: inline-block;
	width: 33px;
	height: 28px;
	border-right: 1px solid #003D79;
	border-left: 1px solid #06C;
	color: #fff;
	text-align: center;
	font-size: 1em;
	line-height: 28px;
	-webkit-transition: background-color 400ms linear;
	-moz-transition: background-color 400ms linear;
	-o-transition: background-color 400ms linear;
	transition: background-color 400ms linear;
	-ms-transition: background-color 400ms linear;
}

.top-info li:hover a {
            /*!important*/
	color: #fff;
}

.top-info li:hover a.my-tweet {
	background: #3ABDD1;
}

.top-info li:hover a.my-facebook {
	background: #648CD5;
}

.top-info li:hover a.my-skype {
	background: #00AFFF;
}

.top-info li:hover a.my-pint {
	background: #DE5656;
}

.top-info li:hover a.my-rss {
	background: #EF8D1F;
}

.top-info li:hover a.my-google {
	background: #E73904;
}

.logo {
	float: left;
	margin: 1% 1%;
	width: 60%;
}

.top_social {
	float: left;
	margin: 4% 0 0%;
}

.top-bar {
	height: auto;
	width: 100%;
	background-image: url(../../images/bg_TOP.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	background-color: #1b385b;
}

.rwd_bg {
	height: auto;
	width: 100%;
	background-image: url(../../images/bg_down.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
}

.frontlink01 {
	float: left;
	color: #fff;
	line-height: 1.2em;
}

.frontlink01 a {
	color: #fff;
}

.frontlink01 a:hover {
	color: #428bca;
}

.frontlink02 {
	float: left;
}

.frontlink02 a {
	color: #fff;
}

.frontlink02:hover a {
	color: #003D79;
}

/***************************************************************************************************************************************
友站連結IE8可用版本(NAV 必須在同一支檔案，有上下順序之問題)
http: //bootsnipp.com/snippets/featured/media-slider-carousel-bs3
****************************************************************************************************************************************/
	/* carousel*/
.media-carousel {
	margin-bottom: 0;
	border-width: 0;
	box-shadow: 0px 0px 0px rgba(0,0,0,0),0 0 0 rgba(0,0,0,0),0 0 0 rgba(0,0,0,0);
}
/* Previous button*/
.media-carousel .carousel-control.left {
	left: 0px;
	background-image: none;
	background: none repeat scroll 0 0 #222222;
	border: 0px solid #FFFFFF;
	border-radius: 0;
	height: 30px;
	width: 30px;
	margin-top: 12px;
	line-height: 30px;
}
/* Next button*/
.media-carousel .carousel-control.right {
	right: 0px;
	background-image: none;
	background: none repeat scroll 0 0 #222222;
	border: 0px solid #FFFFFF;
	border-radius: 0;
	height: 30px;
	width: 30px;
	margin-top: 12px;
	line-height: 30px;
}
/* Changes the position of the indicators*/
.media-carousel .carousel-indicators {
	right: 50%;
	top: auto;
	bottom: 0px;
	margin-right: -19px;
}
/* Changes the colour of the indicators*/
.media-carousel .carousel-indicators li {
	background: #c0c0c0;
}

.media-carousel .carousel-indicators .active {
	background: #333333;
}

.media-carousel img {
	width: 100%;
	height: 40px;
}
/* End carousel*/


/* ==================================================
友站連結
================================================== */

/* carousel */
.media-carousel {
 margin: 0 10% 0;
}

    /* Previous button  */
.media-carousel .carousel-control.left {
	left: -5px;
	background-image: none;
	background: none repeat scroll 0 0 #007dd3;
	border: 4px solid #FFFFFF;
	border-radius: 23px 23px 23px 23px;
	height: 40px;
	width: 40px;
	margin-top: 10px;
}
    /* Next button  */
.media-carousel .carousel-control.right {
	right: 25px;
	background-image: none;
	background: none repeat scroll 0 0 #007dd3;
	border: 4px solid #FFFFFF;
	border-radius: 23px 23px 23px 23px;
	height: 40px;
	width: 40px;
	margin-top: 10px;
}
    /* Changes the position of the indicators */
.media-carousel .carousel-indicators {
	right: 50%;
	top: auto;
	bottom: 0px;
	margin-right: -19px;
}
        /* Changes the colour of the indicators */
.media-carousel .carousel-indicators li {
	background: #c0c0c0;
}

.media-carousel .carousel-indicators .active {
	background: #333333;
}
/*
.media-carousel img {
	width: 100%;
	height: 55px;
}
*/
a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active {
	border-color: #007dd3;
}
/* End carousel */


@media screen and (max-width:1024px) {
	.media-carousel .carousel-control.left {
		left: 5px;
	}

	.media-carousel .carousel-control.right {
		right: 15px;
	}

	.logo {
		width: 55%;
	}
}

@media screen and (max-width:992px) {
	.sidebar {
		width: 80%;
		margin: 0 auto;
		float: none;
	}

	.logo {
		text-align: center;
		float: none;
		width: 100%;
	}

	.top-bar {
		background-image: url(../images/bg_TOP_S.jpg);
	}
	
	.topinfo_center {
		float: none;
		margin: auto;
		text-align: center;
	}
	.site-search-area {
	margin: 5% 0;
}
}

@media screen and (max-width:768px) {
	.media-carousel .carousel-control.left {
		left: 10px;
	}

	.media-carousel .carousel-control.right {
		right: 10px;
	}

}

@media screen and (max-width:767px) {
	
	.media-carousel {
		/*margin: 0 0 5% 30%;*/
	}

	.carousel-inner {
		/*width: 60%;*/
	}

	.media-carousel .carousel-control.left {
		left: 15px;
	}

	.media-carousel .carousel-control.right {
		right: 25px;
	}
}

@media screen and (max-width:480px) {
	.media-carousel {
		/*margin: 0 0 5% 15%;*/
	}

	.logo img {
		width: 80%;
	}

	.carousel-inner {
		/*width: 80%;*/
	}
}