/*------------------------------------*\
    Global
\*------------------------------------*/
*{
	box-sizing: border-box;
	position: relative;
}
html,body{
	font-family: 'Poppins', Verdana, arial, Microsoft JhengHei, "\5FAE\8F6F\96C5\9ED1";
}
h1,h2,h3,h4,h5,h6,p{
	font-family: "\5FAE\8F6F\96C5\9ED1", Verdana, arial;
	padding: 0;
	margin: 0;
}
ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
	color: blue;
}

/*------------------------------------*\
    Layout
\*------------------------------------*/
.wrapper{
	overflow: hidden;
}

.container{
	/*border: 1px solid #a23dcc; */
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 16px;
	padding-right: 16px;
}
.container:after{
	content: "";
	display: block;
	clear: both;
}
.row{
	margin: 0 -16px;
}
.row:after{
	content: "";
	display: block;
	clear: both;
}
.header{
	position: fixed;
	z-index: 100;
	width: 100%;
}
/*------------------------------------*\
    Components
\*------------------------------------*/
/* navbar */
.navbar{
	height: 64px;
	background-color: rgba(0,0,0,0.3);
}
.navbar .container{
	flex-direction: row-reverse;
}
.navbar .menu{
	float: right;
	color: #fefefe;
}
@media screen and (max-width: 768px){
	.navbar .menu{
		padding-right: 20px;
	}
}
.navbar .menu .menu-item{
	font-size: 24px;
	float: left;
	width: 60px;
	height: 40px;
	text-align: center;
  	vertical-align: middle;
  	line-height: 40px;
}
.navbar .menu .menu-item a{
	letter-spacing: 0;
	color: #ddd;
	line-height: 30px;
	padding: 20px 16px;
}
.navbar .menu .menu-item a:hover{
	letter-spacing: 5;
	color: #fff;
}
.navbar .menu .menu-item a .menu-item-white{
	display: inline-block;
	width: 80px;
	height: 30px;
	border-radius: 4px;
	vertical-align: middle;
	background-color: transparent;

	transition: all 0.5s;
}
.navbar .menu .menu-item a .menu-item-white:after,
.navbar .menu .menu-item a .menu-item-white:before {
	display: block;
	position: relative;
	content: "";
	border: 1px solid rgba(255, 255, 255, 0);
	margin: 0 auto;
	transition: all 280ms ease-in-out;
	width: 0;
}
.navbar .menu .menu-item a .menu-item-white:hover:after,
.navbar .menu .menu-item a .menu-item-white:hover:before {
	border-color: #fff;
	transition: width 350ms ease-in-out;
	width: 95%;
}

/* chevron */
.chevron-center{
	position: absolute;
    top: 85%;
    left: 49.5%;
	animation: floating 2s infinite;
}
@media(max-width: 768px){
	.chevron-center{
		left: 47.5%;
	}
}
.chevron:before{
	content: '';
	color: #fff;
	border-style: solid;
	border-width: 0.25em 0.25em 0 0;
	width: 0.6em;
	height: 0.6em;
	top: 0.15em;
	left: 0.15em;
	position: absolute;
	vertical-align: top;

}
.chevron.bottom:before{
	transform: rotate(135deg);
}

@keyframes floating{
	0%{
		transform: translate(0,0px);
	}
	50%{
		transform: translate(0,10px);
	}
	100%{
		transform: translate(0,0px);
	}
}

/* hero */
.hero{
	padding-top: 30px;
	padding-bottom: 50px;
}
@media(max-width: 768px){
	.hero{
		padding-top: 0px;
		padding-bottom: 20px;
		padding-left: 20px;
		padding-right: 20px;
	}
}
.hero-bgc-gray{
	background-color: #efefef;
}
.hero-bgc-white{
	background-color: #fefefe;
}

/* jumbotron */
.jumbotron{
	border: 1px solid #000;
	padding-top: 60px;
	padding-bottom: 20px;
	background-image: url(../images/bg.jpg);
	background-position: center;
	background-size: cover;
}
@media (max-width: 768px){
	.jumbotron{
		padding-top: 60px;
		padding-bottom: 60px;
	}
}
.jumbotron .logo-image{
	width: 100px;
	height: 140px;
	background-image: url(../images/logo_s.png);
	background-position: center;
	background-size: contain;
	margin: 0 auto;
	margin-bottom: 30px;
}
@media (max-width: 768px){
	.jumbotron .logo-image{
		margin-top: 30px;
		margin-bottom: 10px;
		width: 80px;
		height: 127px;
	}
}

/* mask-dark */
.mask-dark{
	background-color: rgba(0,0,0,0.6);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* item-img */
.box-container{
	position: relative;
}
.l-box{
	position: absolute;
	left: 0px;
	width: 200px;
	height: 48px;
}
.r-box{
	margin-left: 200px;
}
@media (max-width: 768px){
	.r-box{
		margin-left: 120px;
	}
}
.item-img .box{
	display: inline-block;
	width: 48px;
	height: 48px;
	margin-left: -5px;
	background-image: url(../images/itembox.gif);
	background-position: center;
	background-size: contain;
	z-index: 1;
}
@media (max-width: 768px){
	.item-img .box{
		width: 30px;
		height: 30px;
	}
}
.item-img .item-box{
	display: absolute;
	width: 48px
	height: 48px;
	left: 8px;
	top: 2px;
	z-index: 2;
}
@media (max-width: 768px){
	.item-img .item-box{
		top: -8px;
	}
}
@media (max-width: 768px){
	.item-img img{
		width: 70%;
	}
}
.item-img .lf{
	left: -6px;
}
@media (max-width: 768px){
	.item-img .lf{
		left: 0px;
	}
}
.subtitle{
	font-weight: 500;
	color: #32518b;
	line-height: 48px;
}
@media (max-width: 768px){
	.subtitle{
		font-size: 12px;
		line-height: 30px;
	}
}

/* btn */
.btn{
	display: inline-block;
	line-height: 24px;
	padding: 4px 16px;
	border: 1px solid #fff;
	border-radius: 4px;
	color: #fff;
}
@media (max-width: 768px){
	.btn{
		font-size: 14px;
		line-height: 20px;
		padding: 2px 8px;
	}
}
.btn.btn-stop{
	background-color: #A10000; 
	border: 1px solid #A10000;
	color: #fff;

	transition: all 0.5s;
}
.btn.btn-stop:hover{
	background-color: #DE0000;
}
.btn.btn-ok{
	background-color: #004B97; 
	border: 1px solid #004B97;
	color: #fff;

	transition: all 0.5s;
}
.btn.btn-ok:hover{
	background-color: #0066CC; 
}
.btn-lg{
	padding: 8px 32px;
}
.btn-center{
	text-align: center;
}
.btn-center .btn{
	margin: 0 12px;
}
.btn-center .aos-btn{
	display: inline-block;
}
@media (max-width: 576px){
	.btn-center .aos-btn{
		margin-bottom: 24px;
	}
	.btn-center .aos-btn:last-child{
		margin-bottom: 0;
	}
}

/* image-container */
.image-container{
	width: 100%;
	display: block;
}
.image-container:before{
	content: "";
	display: block;
	width: 100%;
	padding-top: 75%;
}
.image-container .image{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

/* news */
.news{
	max-width:600px;
	margin: 0px auto;
}
.news .title{
	font-size: 18px;
	margin-top: 10px;
	margin-bottom: 16px;
	color: #333;
}
@media (max-width: 768px){
	.news .title{
		font-size: 14px;
		margin-bottom: 10px;
	}
}
.news .announce{
	font-size: 24px;
}
@media (max-width: 768px){
	.news .announce{
		font-size: 18px;
	}
}
.news .description{
	color: #333;
	line-height: 32px;
	margin-bottom: 8px;
	text-align: justify;
}
@media (max-width: 768px){
	.news .description{
		font-size: 12px;
		line-height: 24px;
	}
}

/* recyle */
.recycle-box .recycle{
	padding-top: 20px;
}
.recycle-box .recycle .card{
	border: none;
	border-radius: 6px;
}
.recycle-box .recycle .card-body{
	line-height: 36px;
}
.recycle-box .recycle .card-header{
	background-color: #3E64AD;
	cursor: pointer;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.recycle-box .recycle .card-header:hover{
	background-color: #5A87D1;
}
.recycle-box .recycle .card-header:active{
	background-color: #2A4475;
}
.recycle-box .recycle .heading,
.recycle-box .recycle .heading:hover,
.recycle-box .recycle .heading:active{
	margin-top: 0;
	color: #fff;
	text-decoration: none;
}
/* event */
.title{
	padding-left: 0;
}
.title:before{
	content: "";
}
.para{
	padding-bottom: 8px;
}
img{
	padding-top: 8px;
}
.ep:before{
	content: "◆";
	position: absolute;
	top: 0;
	left: 0;
}
.ep{
	font-weight: 400;
	line-height: 32px;
	padding-left: 12px;
	text-align: justify;
}
@media (max-width: 768px){
	.ep{
		font-size: 12px;
	}
}
/* footer */
.footer{
	background-image: url();
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}
@media (max-width: 768px){
	.footer .logo{
		width: 100px;
		height: 100px;
	}
}
.footer .menu{
	display: flex;
	justify-content: center;
}
.footer .menu .menu-item a{
	color: #fefefe;
	padding: 24px;
	line-height: 24px;
	display: block;
	border-radius: 10px;
	text-align: center;

	transition: all 0.5s;
}
@media (max-width: 768px){
	.footer .menu .menu-item a{
		padding-right: 8px;
		padding: 8px;
	}
}
.footer .menu .menu-item a:hover{
	/*border: 1px solid #fff;*/
	border-radius: 10px;
	background-color: rgba(0,187,255,0.5);
}
.footer .copyright{
	text-align: center;
	background-color: rgba(0,0,0,0.7);
	color: #ddd;
	padding: 16px 0;
	line-height: 24px;
}

/*------------------------------------*\
    Utility
\*------------------------------------*/
/* red */
.red{
	color: #FF0000;
}
.big{
	font-size: 24px;
}
@media (max-width: 768px){
	.big{
		font-size: 16px;
	}
}
.update{
	text-align: right;	
}
/* line */
.hr{
	width: 500px;
	height: 16px;
	background-image: url(../images/noka_line_b.gif);
	background-position: center;
	background-size: contain;
	margin: 0 auto;
	margin-top: 30px;
	margin-bottom: 30px;
}
@media (max-width: 768px){
	.hr{
	width: 303px;
	background-image: url(../images/noka_line_s.gif);
	margin-bottom: 10px;
	}
}
.notice{
	width: 600px;
	height: 172px;
	background-image: url(../images/notice_banner.jpg);
	background-position: center;
	background-size: contain;
	margin: 0 auto;
}
@media (max-width: 768px){
	.notice{
	width: 300px;
	height: 86px;
	}
}

.visible-mobile{
	display: none;
}
@media (max-width: 768px){
	.visible-mobile{
		display: block;
		text-align: center;
		padding-top: 50px;
	}
}
@media (max-width: 768px){
.invisible-mobile{
	display: none;
}