@charset "utf-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

body
{
	padding: 0;
	margin:0;
	font-family: "Noto Sans TC","Open sans","Microsoft JhengHei",Tahoma,Helvetica,"Microsoft Yahei","微軟雅黑體",Arial,sans-serif;
	font-size:15px;
	line-height:normal!important;
	color:#757575; 
	font-weight:300
}
.clearfix { clear:both }
.uk-sticky-placeholder { margin:0!important }
h1, h2, h3, h4, h5, h6 {
	font-family: "Noto Sans TC","Open sans","Microsoft JhengHei",Tahoma,Helvetica,"Microsoft Yahei","微軟雅黑體",Arial,sans-serif!important;
	margin:0
}

h2{
	font-weight:500;
	color:#555555;
}
img {
	border:none;
	display:block;
}
ul {
	margin:0; 
	padding:0;
}
li { list-style-type:none }

.txt12 { font-size:12px }
.txt18
{
	font-size:18px;
	font-weight:500;
	margin-top: 20px;
	text-align:center; 
}
.txt21 { font-size:21px;
	font-weight:700;
	margin: 15px 0px;
	text-align:center; 
}
.txtcolor-452305 { color:#452305 }
.txtcolor-C4C4C4 { color:#C4C4C4 }
.paddingt10 { padding-top:10px }
.paddingt15 { padding-top:15px }
.paddingt25 { padding-top:25px }
.paddingr50 { padding-right:5px }
.paddingl20 { padding-left:20px }
.weight300{ font-weight:300; }

a { color:#0076B7 }

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('fonts/glyphicons-halflings-regular.eot');
  src: url('fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('fonts/glyphicons-halflings-regular.woff') format('woff'), url('fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

/*
==============================================
nav bar
==============================================
*/
.uk-sticky-placeholder { height:64px }
.navbar-blue {
  min-height: 64px;
  margin-bottom: 20px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}
.navbar-default {
  background-color: #E8E8E8;
}

@media (max-width:768px) {
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    /*background-color:#CFCFCF;*/ /*updated at 2019-04-01 from serena*/
    #background-color: #E8E8E8;
}
}

.navbar-fixed-top .container { margin-top:10px }
.navbar-brand {
	float:inherit;
  	padding: 0 30px 0 10px;
  	height:57px
}
.navbar-toggle-l {
  position: relative;
  float: left;
  margin-left: 10px;
  padding: 0;
  margin-top: 0;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor:pointer
}
.navbar-toggle-r {
  position: relative;
  float: right;
  margin-right: 10px;
  padding: 0;
  margin-top: 8px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor:pointer
}
.navbar-toggle-l img { width:120px }
.navbar-toggle-r img { width:80% }
#navbar-collapse-l { 
	float:left; 
	width:auto; 
}
.navbar-brand { display:none; }
.navbar-brand img {
	display:inline-block;
	width:156px;
	max-width:100%;
	height:auto;
}
.navbar-nav .hk a:link, .navbar-nav .hk a:active, .navbar-nav .hk a:visited {
	color:#0076B7!important; 
	font-weight:400;
	text-decoration:none
}
.navbar-nav .hk a:hover {
	color:#0076B7!important;
	font-weight:800;
	text-decoration:none
}
.navbar-nav .travel a:link, .navbar-nav .travel a:active, .navbar-nav .travel a:visited {
	color:#5EAF31!important; 
	font-weight:400;
	text-decoration:none
}
.navbar-nav .travel a:hover {
	color:#5EAF31!important;
	font-weight:800; 
	text-decoration:none
}
.navbar-nav .food a:link, .navbar-nav .food a:active, .navbar-nav .food a:visited {
	color:#EA642B!important; 
	font-weight:400;
	text-decoration:none
}
.navbar-nav .food a:hover {
	color:#EA642B!important;
	font-weight:800; 
	text-decoration:none
}
.navbar-nav .beauty a:link, .navbar-nav .beauty a:active, .navbar-nav .beauty a:visited {
	color:#DD0077!important; 
	font-weight:400;
	text-decoration:none
}
.navbar-nav .beauty a:hover {
	color:#DD0077!important;
	font-weight:800; 
	text-decoration:none
}
.navbar-nav .blog a:link, .navbar-nav .blog a:active, .navbar-nav .blog a:visited {
	/*color:#DA8B62!important; *//*updated at 2019-04-01 from serena*/
	color: #bfa780 !important;
	font-weight:400;
	text-decoration:none
}
.navbar-nav .blog a:hover {
	/*color:#DA8B62!important; *//*updated at 2019-04-01 from serena*/
	color: #bfa780 !important;
	font-weight:800; 
	text-decoration:none
}

.navbar-nav .skypost a:link,
.navbar-nav .skypost a:active,
.navbar-nav .skypost a:visited {
	color: #fcc800 !important;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
}


.user-info-panel { float:right; margin-top:11px }

/*
==============================================
login
==============================================
*/
.login-header {
	background-color:#757575; 
	color:#ffffff; 
	text-align:center; 
	margin-top:15px;
	font-size:17px;
	padding:10px 0
}
.login-section {
	width:100%; 
	overflow:hidden; 
	padding:15px 0
}
.profile {
	float:left; 
	width:65px; 
	padding:0 10px
}
.profile-pic {
	border-radius:50%; 
	width:65px; 
	height:65px; 
	background-color:#CFCFCF
}
.login-entrance {
	float:left;
	font-size:17px; 
	text-align:center; 
	width: calc(100% - 70px);
}
.login-entrance div:first-child { text-align:center }
.login-entrance .fb { margin-top:5px; text-align:center }
.login-entrance .fb img { 
	width:140px; 
	height:auto;
	display:inline-block
} 

/*
==============================================
content
==============================================
*/
.page-left .col-xs-12, .page-left .col-md-8, .page-left .col-md-4 { padding:0!important; }
.page-left { float:left; width: calc(100% - 315px) }
.page-right { float:left; width: 315px; padding-left:15px; }


/*
==============================================
card
==============================================
*/
.card { 
	box-shadow:1px 2px 6px 1px rgba(0, 0, 0, 0.25);
	border-radius:4px 
}
.card:hover { 
	box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, 0.3);
	border-radius:4px 
}
.card img { border-radius:4px 4px 0 0; width: 800px; }


/*
==============================================
adv fb
==============================================
*/

.page-right .adv, .page-right .fb { margin-top:20px }


/*
==============================================
footer
==============================================
*/


.footer { margin:10px 10px; padding-bottom:20px; }
.footer div:nth-child(1), .footer div:nth-child(2), .footer div:nth-child(3) { display:inline-block; float:right; margin-left:15px; }
.footer div:last-child { float:right; }

.copyright_link {
	margin-top:10px; 
	padding:0px 15px; 
	color:#D0D0D0;
	margin-bottom:20px;
}


.copyright {
	font-size:12px;
}

.copyright_index {
	font-size:12px;
	display:block;
}

.copyright_link_wrapper
{
		display:block;
}

.copyright_link a { 
	color:#D0D0D0;
}

.copyright_link a:hover { 
	color:#B9B9B9;
	text-decoration:none;
}

.copyright_link_div {
	display:inline-block; 
	float:right; 
	margin-left:15px;
}

.copyright_link_div_r {
	display:inline-block; 
	margin-left:15px;
}

.copyright_link_div_first
{
		display:inline-block; 
}

@media (max-width:1000px) {
.page-left { float:left; width: 100% }
.page-right { float:left; width: 100%; padding-left:0; }
}

@media (max-width:768px) {
/*
==============================================
nav bar
==============================================
*/
.navbar-collapse { padding:0; margin:0 }
#navbar-collapse-l { float:inherit!important; width:100%; overflow: hidden;/*updated at 2019-04-01 from serena*/}
#navbar-collapse-l, #navbar-collapse-r {margin:0; padding:0 }
.navbar-nav { margin:0 }	
.navbar-nav li {
	float:left;
	width: 16.66%; /*updated at 2019-04-01 from serena*/
	/* width:20%; */
	text-align:center;
	border-left:none 
}
.navbar-brand { 
	padding:0
}
.user-info-panel { display:none; }
.navbar-nav .hk {
	border-bottom:8px solid #0076B7
}
.navbar-nav .travel {
	border-bottom:8px solid #5EAF31
}
.navbar-nav .food {
	border-bottom:8px solid #EA642B
}
.navbar-nav .beauty {
	border-bottom:8px solid #DD0077
}
.navbar-nav .blog {
	/*border-bottom:8px solid #DA8B62 */ /*updated at 2019-04-01 from serena*/
	border-bottom: 8px solid #bfa780;
}
.navbar-nav .skypost {
		border-bottom: 8px solid #fcc800;
		/*padding-left:5px;
		padding-right:5px;*/
	}
    .navbar-nav .skypost a{
        padding-left:0px;
        padding-right:0px;
    }

}

@media (max-width:375px) {
/*
==============================================
nav bar
==============================================
*/
.nav > li > a { padding:0 }	
.navbar-brand img {
	display:inline-block;
	width:120px;
	height:auto;
}
.navbar-toggle-l { margin-top:0; margin-left:5px }
.navbar-toggle-r { margin-top:5px; margin-right:5px }	
.navbar-toggle-l img { width:120px }
.navbar-toggle-r img { width:80% }
.navbar-nav .hk, .navbar-nav .travel, .navbar-nav .food, .navbar-nav .beauty, .navbar-nav .blog { font-size:13px } 
.navbar-nav .skypost { font-size: 12px; }

}

@media (max-width:320px) {
/*
==============================================
login
==============================================
*/	
.profile-pic {
	border-radius:50%; 
	width:60px; 
	height:60px; 
	background-color:#CFCFCF 
}
}

@media (min-width:320px) {
/*
==============================================
login
==============================================
*/	
.login-entrance .fb img {
	width:160px; 
	height:auto;
}	
}

@media (min-width:640px) {
/*
==============================================
nav bar
==============================================
*/	
.uk-sticky-placeholder { height:78px }
.navbar-blue {
	min-height: 78px;
  	margin-bottom: 20px;
  	border: 1px solid transparent;
}
.navbar-fixed-top .container { margin-top:10px }
.navbar-toggle-l { margin-left:10px }
.navbar-toggle-r { margin-right:10px }	
.navbar-toggle-l img { width:100% }
.navbar-toggle-r img { width:100% }
.navbar-brand img {
	display:inline-block;
	width:156px;
	height:auto;
}
}

@media (min-width: 768px) {
/*
==============================================
container
==============================================
*/
.container {
    width: 740px;
}


/*
==============================================
nav bar
==============================================
*/
.navbar-toggle-l, .navbar-toggle-r {
	display:none
}
#navbar-collapse-r ul { 
	display:none; 
}
.navbar-nav li {
	width:80px;
	text-align:center;
	border-left:1px solid #cfcfcf 
}
.navbar-brand { 
	float:left;
	display:block
}

/*
==============================================
login
==============================================
*/
#navbar-collapse-r > .login-header,
#navbar-collapse-r > .login-section {
	display:none
}
}

@media (min-width: 800px) {
/*
==============================================
container
==============================================
*/
.container {
    width: 98%;
}
}

@media (min-width: 1240px) {
/*
==============================================
container
==============================================
*/
.container {
    width: 1220px;
}
}

@media (min-width:480px) and (max-width:640px) {
/*
==============================================
nav bar
==============================================
*/	
.navbar-brand img {
	display:inline-block;
	width:130px;
	height:auto;
}

.navbar-toggle-r { margin-top:5px; margin-right:5px }	
.navbar-toggle-l img { width:120px }
.navbar-toggle-r img { width:80% }
}