/* CSS Document */
@charset "utf-8";
@import url("font-awesome/css/font-awesome.min.css");

/* ################################################################
	navbar
################################################################ */
.navbar-default {
  background-color: #000000;
  border-color: none;
}
.navbar-default .navbar-brand {
  color: #e5e5e5;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
  color: #ffffff;
}
.navbar-default .navbar-text {
  color: #e5e5e5;
}
.navbar-default .navbar-nav > li > a {
  color: #e5e5e5;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: #ffffff;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #ffffff;
  background-color: #ff4c4c;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
  color: #ffffff;
  background-color: #ff4c4c;
}
.navbar-default .navbar-toggle {
  border-color: #eee;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: #ff4c4c;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #e5e5e5;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #e5e5e5;
}
.navbar-default .navbar-link {
  color: #e5e5e5;
}
.navbar-default .navbar-link:hover {
  color: #ffffff;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #e5e5e5;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: #ff4c4c;
  }
}



/* ################################################################
BREADSCRUMB - yanyi
################################################################ */
.breadscrumb {
	width:100%;
	height:52px; 
	line-height:52px;
	
	/* background-color:#1bb2b0;*/
	background-color:#00BFFF;
	 
	font-size:21px;
	color:#fff;
}
.breadscrumb-inverse {
	background-color:#555;
}
.breadscrumb-tiffany {
	background-color:#00B3B3;
}
.breadscrumb .path{
	max-width: 1000px;
	width:100%;
	
	margin:0 auto 0;
	padding:0;
}
.breadscrumb .path a {
	line-height:50px;
	
	text-decoration: none;	
	color:#fff;
}
.breadscrumb .path a:hover {
	text-decoration: none;
	color:#fff;
}
.breadscrumb .path-arw-before {
	/* margin-top: 12px; #modified */
	width: 24px;
	height: 24px;
}
.breadscrumb .path-arw-next {
	/* margin-top: 12px; #modified */
	width: 24px;
	height: 24px;
}


/* ################################################################
	container
################################################################ */
.container-shadow{
	box-shadow: 0 0 10px 2px #ccc;
}


/* ################################################################
	panel-article
################################################################ */
.panel-article p,
.panel-article h3{
	margin-bottom:30px;
}
.panel-article .img-responsive {
	max-width:500px;
	margin:30px 0;
}
.panel-article img {
	width:100%;
}
.panel-article .article-title{
	padding:1px 0 1px 20px;
	margin-bottom:40px;
	background:#f5f5f5;
	border-left:4px solid #4CA6FF;
}




/* ################################################################
 TR LINK / TR RADIO / BUTTON
################################################################ */
/* tr link */
.tr-link:hover ,
.tr-radio:hover,
.tr-checkbox:hover {
	background-color:#efefef;
	cursor: pointer; 
	cursor: hand;
	
	-webkit-transition: all .3s; /* For Safari 3.1 to 6.0 */
			transition: all .3s;
}
/*
.tr-link-arw-right {
	height: 24px;
	width: 24px;
}
*/

.tr-disabled {
	background-color:#ddd;	
}

/* icheck button */
.btn-icheck {
	padding: 10px;
}




/* ################################################################
 ICON
################################################################ */
.icon-space,
.icon-70 {
	width: 70px;
}
.icon-space-sm {
	width: 25px;
}

.icon-member {
	margin-left:20px;
	margin-top:10px;
	margin-bottom:10px;
	
	width: 70px;
	height:70px;
}
.icon-member-bg {
	width:70px;
	background: url(../img/icon-d-bg-mem.png) 0 0 no-repeat;
}
.icon-member-front {
	width:70px;
	height:70px;
	background: url(../img/icon-d-mem.png) 0 0 no-repeat;
}

.icon-mobile {
	margin-left:20px;
	margin-top:10px;
	margin-bottom:10px;
}
.icon-mobile-bg {
	width:70px;
	background: url(../img/icon-d-bg-normal.png) 0 0 no-repeat;
}
.icon-mobile-front {
	width:70px;
	height:70px;
	background: url(../img/icon-d-mobile.png) 0 0 no-repeat;
}

.icon-hn {
	margin-left:20px;
	margin-top:10px;
	margin-bottom:10px;
}
.icon-hn-bg {
	width:70px;
	background: url(../img/icon-d-bg-hn.png) 0 0 no-repeat;
}
.icon-hn-front {
	width:70px;
	height:70px;
	background: url(../img/icon-d-hn.png) 0 0 no-repeat;
}

.icon-phone {
	margin-left:20px;
	margin-top:10px;
	margin-bottom:10px;
}
.icon-phone-bg {
	width:70px;
	background: url(../img/icon-d-bg-phone.png) 0 0 no-repeat;
}
.icon-phone-front {
	width:70px;
	height:70px;
	background: url(../img/icon-d-phone.png) 0 0 no-repeat;
}

.icon-credit {
	margin-left:20px;
	margin-top:10px;
	margin-bottom:10px;
}
.icon-credit-bg {
	width:70px;
	background: url(../img/icon-d-bg-credit.png) 0 0 no-repeat;
}
.icon-credit-front {
	width:70px;
	height:70px;
	background: url(../img/icon-d-credit.png) 0 0 no-repeat;
}

.icon-wifi-off {
	margin-left:20px;
	margin-top:10px;
	margin-bottom:10px;
}
.icon-wifi-off-bg {
	width:70px;
	background: url(../img/icon-bg-wifi-off.png) 0 0 no-repeat;
}
.icon-wifi-off-front {
	width:70px;
	height:70px;
	background: url(../img/icon-wifi-off.png) 0 0 no-repeat;
}

.icon-add {
	margin-left:20px;
	margin-top:10px;
	margin-bottom:10px;
}
.icon-add-bg {
	width:70px;
	background: none;
}
.icon-add-front {
	width:70px;
	height:70px;
	background: url(../img/icon-d-none.png) 0 0 no-repeat;
}



/* ################################################################
 CONTENT WRAPPER
################################################################ */
#content-wrapper,
.content-wrapper {
	position: relative;
	margin:0 auto 0; 
	
	max-width:660px;
	min-height:860px;
}

.content-wrapper-wide {
	max-width:880px;
}

.content-wrapper-login {
	max-width:515px;
}


@media screen and (max-width:1200px) {
	.content-wrapper-wide {
		width:660px;		
	}
}

@media screen and (max-width:660px) {
	.content-wrapper,
	.content-wrapper-wide {
		width:95%;		
	}
}

@media screen and (max-width:480px) {
	.content-wrapper,
	.content-wrapper-login {
		width: 100%;
		min-height: 0;
	}
}

/* ################################################################
 CONTENT
################################################################ */
/* content */
.content {
	background-color:#fff; 
	border:1px solid #ddd; 
	border-radius:4px;
}

.content-header,
.content-body {
	width:90%; 
	margin:0 auto 0;
}

.content-body .placeholder-alt{
	color:#888;
	font-size:15px;	
}

.btn-w240 {
	width:240px;
}


/*	################################################################
	PAGE CONFIGURATIONS
################################################################# */
/* header font weight */
h1, h2, h3, h4, h5, h6{
	font-weight:300;			
}

/* General Tweaks */ 
.mtb {
	margin-top: 80px;
	margin-bottom: 80px;
}

.mb {
	margin-bottom: 60px;
}

.mt {
	margin-top: 60px;
}

.hline {
	border-bottom: 2px solid #384452;
}
.hline-w {
	border-bottom: 2px solid #ffffff;
	margin-bottom: 25px;
}

.spacing {
	margin-top: 40px;
	margin-bottom: 40px;
}
.spacing-12 {
	margin-top: 12px;
	margin-bottom: 12px;
}
.spacing-15 {
	margin-top: 15px;
	margin-bottom: 15px;
}
.spacing-18 {
	margin-top: 18px;
	margin-bottom: 18px;
}

.centered {
	text-align:center;
}

.wordbreak {
	word-break:break-all;
}

@media screen and (min-width:480px) {
	.screen-toggle {
		display:none;
	}
}
@media screen and (max-width:480px) {
	.screen-toggle-inverse {
		display:none;
	}
}

.btn-theme {
  color: #fff;
  background-color: #384452;
  border-color: #384452;
  margin: 4px;
}
.btn-theme:hover,
.btn-theme:focus,
.btn-theme:active,
.btn-theme.active,
.open .dropdown-toggle.btn-theme {
  color: #fff;
  background-color: #00b3fe;
  border-color: #00b3fe;
}

.text-theme {
	color: #00b3fe;
}





/* ################################################################
 登入頁
################################################################ */
.login-bg-img {
	background: url(../img/login-bg.jpg) bottom center no-repeat;
	background-size: cover;
}

.login-logo {
	width: 200px;
	height: auto;
}




/* ################################################################
  會員中心登入後首頁
################################################################ */
.channel{
	margin:5px;
	width:95%;
	height:290px;			
}
.channel a:hover{
	text-decoration: none;
}
.channel-img {
	width: 100px;
	height:100px;
	
	
}
.channel-img img {			
	width: 95%;
	-webkit-box-shadow: 7px 7px 15px 0 #aaa;
	   -moz-box-shadow: 7px 7px 15px 0 #aaa;
	        box-shadow: 7px 7px 15px 0 #aaa;
}
.channel-img img:hover {
	width: 100%;
}
.channel-content {
	width: 100%;
	height: 100px;	
	color:#555;
}

@media screen and (max-width:767px){	
	.channel-img {
		width: 72px;
		height:72px;
	}
}

@media screen and (max-width:320px){	
	.channel-img {
		width: 72px;
		height:72px;
	}
}

.channel-lg {
	height: 360px;
}
		
.channel-lg img {
	width: 100%;
}

/* app分數 */
.app-score {
	color:#D9A300;
}

/* ################################################################
  side-menu icon
################################################################ */
.item-img{
	margin-left: 20px;
	margin-right:10px;
}
.item-img-lv {	
	background: url(../img/icon/mbr_lv.png) center center no-repeat; /* ie and ff does not support content*/	
	width:20px;
	height:20px;
}
.item-img-point {
	background: url(../img/icon/point.png) center center no-repeat; /* ie and ff does not support content*/	
	width:20px;
	height:20px;
}
.item-img-cloud {	
	background: url(../img/icon/cloud.png) center center no-repeat; /* ie and ff does not support content*/	
	width:20px;
	height:20px;
}
.item-img-book {	
	background: url(../img/icon/book.png) center center no-repeat; /* ie and ff does not support content*/
	width:20px;
	height:20px;
}
.item-img-pmbr {
	background: url(../img/icon/pmbr.png) center center no-repeat; /* ie and ff does not support content*/	
	width:20px;
	height:20px;
}
.item-img-id {
	background: url(../img/icon/id.png) center center no-repeat; /* ie and ff does not support content*/	
	width:20px;
	height:20px;
}
.item-img-pay {
	background: url(../img/icon/pay.png) center center no-repeat; /* ie and ff does not support content*/	
	width:20px;
	height:20px;
}
.item-img-vip {
	background: url(../img/icon/vip.png) center center no-repeat; /* ie and ff does not support content*/	
	width:20px;
	height:20px;
}
.item-img-wifi {
	background: url(../img/icon/wifi.png) center center no-repeat; /* ie and ff does not support content*/	
	width:20px;
	height:20px;
}


/* ################################################################
  Xuite Recommend Article @index1
################################################################ */
#xuite-article-container {
	display: none;
}
#xuite-article-container .media {
	height:240px;
}	
#xuite-article-container .media-left {
	width:40%;
}
#xuite-article-container .media-object {
	width:100%
}