@charset "UTF-8";
/* CSS Document */
body{font-size:10px; font-family:"Noto Sans TC"; font-weight:300; color:#555555; overflow-x:hidden;}
@media (max-width : 1024px) {
	body{font-size:9px;}
	.sb-site-container{overflow-x:hidden;}
}

:root {
	--animate-duration: 1500ms;
  	--animate-delay: 0.6s;
}

.lg-container{width:1800px; margin:0 auto;}
ul{padding:0;}
ul li{list-style: none;}
a, a:hover{text-decoration: none;}
.clear{clear:both;}

h3{font-size:2em; font-weight:400; margin:0 0 20px 0;}
.green-line{background:#8bb14a; width:25px; height:3px; margin:10px auto;}
.link{height:93px; margin-top:-93px;}

/*head*/
.header{width:100%; position:absolute; z-index: 999;}

.nav ul{width:calc(100% - 300px);float:right; text-align: right; padding: 0 25px 0 0;}
.nav ul li{margin:35px 25px; display:inline-block; text-align: right;}
.nav ul li a{font-size:1.6em; color:#333;}

.logo{width:300px; float:left; padding:15px 30px; background:#fff; text-align: center;}
.logo img{width:200px;}


/*sidemenu*/
.sb-toggle-right{display:none; float: right; margin-top:20px; }
	.sb-toggle-right i{font-size: 22px; color:#555; margin-right: 25px;}
.navicon-line {background-color: #f5f5f5; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; height: 4px; margin-bottom: 3px; width: 24px;}
.sb-slidebar{text-align:center;}
.sb-slidebar a{color:#333;}
	.sb-title{padding:0.8em 1em; display:block;}
	/* Main Menu */
	.sb-menu {padding: 0;	margin: 0;	list-style-type: none;}
	.sb-menu li {width: 100%;	padding: 0;	margin: 0;}
		.sb-menu li ul{} .sb-menu > li li:last-child { border-bottom:0;}
	.sb-menu > li:first-child {}
	.sb-menu > li:last-child {	}
	.sb-menu li a {width: 100%;	display: inline-block;	padding:15px;  cursor:pointer;}
	.sb-menu li a img{width:40px;}
	.sb-menu li a:hover {text-decoration: none;	background-color: rgba(255, 255, 255, 0.2);}
	.sb-menu>li>a{text-transform:uppercase; font-size:14px;}
	.sb-menu .divider{display:none;}
	
.sb-slidebar.sb-active{background-color: #eee;}
	.sb-slidebar li{border-bottom:1px solid #fff;}
	.sb-slidebar li a:hover{color:#7e9d49;}
	
	/* Submenus */
	.sb-submenu {display: none;	padding: 0;	margin: 0;	list-style-type: none;	background-color: rgba(255, 255, 255, 0.3);}

	/* Caret */
	span.sb-caret, i.sb-caret  {width: 0;	height: 0;	display: inline-block;	margin: 0 5px;	border: 5px solid transparent;}
	span.sb-caret, i.sb-caret {border-top: 5px solid;	border-bottom: 0px solid transparent;}
	.sb-submenu-active > span.sb-caret, .sb-submenu-active > i.sb-caret  {	border-top: 0px solid transparent;	border-bottom: 5px solid;}
	
	#left-search{padding:1em;}
		#left-search #search-input{width:calc(100% - 90px);}
	#left-lan ul, #left-lan li, #left-member-wrap ul, #left-member-wrap li{list-style:none; padding:0; margin:0;}
	#left-lan li{ padding: 1em;}
	
	#left-member-wrap li{padding: 1em;}
	
	#left-smo{padding: 1em; }
	#left-smo a{float:left; margin-right:10px; margin-bottom:0.8em;}



/*headhesive*/
.header--clone{width:100%; position:fixed; margin:0 auto; background:#fff; box-shadow: 1px 1px 10px rgb(0 0 0 / 30%);}
.sb-active .header--clone{-webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%);}
.header--clone .nav ul{margin:0;}
.header--clone .nav ul li a{color:#555;}
.header--clone .nav ul li a:hover{text-decoration:none; color:#8bb14a; transition:0.2s;}


@media (max-width : 1024px) {	
	#header #nav{display:none;}
	.sb-toggle-right{display:block;}
	.header{background:#fff;}
	.logo{width:200px;  padding:10px;}
	.logo img{width:150px;}
}
@media (max-width:380px){
	.logo img{width:100%;}
}
/*head--end*/



/*banner*/
.banner{}
.banner-right{background: url("../images/banner.jpg") no-repeat; background-size: cover; background-position: bottom center; width:calc(100% - 150px); float:right; position:relative; height:86vh;}
.banner-right .banner-cover{width: 100%; height: 100%; background:rgba(244,244,244,0.5);}
.banner-right article{color:#333; position:absolute; right: 0; bottom: 80px; text-align: right; padding-right:50px; font-weight:400;}
.banner-right article h2{font-size:2.4em; line-height:4em; padding-right:5px;}
.banner-right article p{font-size:1.4em; line-height:2em; padding-left: 100px;}

.banner-left{width:150px; float:left; background:#fff; height:86vh; position:relative;}
.banner-left ul{position:absolute; bottom:0; background: url("../images/logo-line.png") repeat-y; padding: 50px 0; left: 42.5px;}
.banner-left ul li{background: #fff; padding:20px 10px;}
	.banner-left ul li:first-child{padding-bottom: 0;}
.banner-left ul li img{width:45px;}


@media (max-width : 1024px) {
	.banner-right{width:100%;}
	.banner-left{display:none;}
	
	.banner-right article{padding:0 20px; text-align: center;}
	.banner-right article p{padding:0;}
}
/*banner--end*/




/*about*/
.about{text-align: center; padding:50px 0;}
.about span{color:#8bb14a;}
.about p{font-size:1.6em; line-height: 1.8em; margin:30px auto; width:1000px; text-align: center; }

@media (max-width : 1024px) {
	.about p{width:100%; padding: 0 20px;}
}

/*about--end*/




/*collections*/
.collections-wrap ul{overflow: hidden; transition:0.8s;}
.collections li{width: calc(16.5% - 6px); min-height:330px !important; float:left; margin:5px; background: #555; position:relative;}
.collections li img{width:100%; -webkit-filter: opacity(50%); /* Safari */filter: opacity(50%);}
	.collections li:nth-child(6n+1){margin-left:0;}
	.collections li:nth-child(6n+6){margin-right:0;}

	.collections li:hover img{width:100%; -webkit-filter: opacity(100%); /* Safari */filter: opacity(100%); transition:0.5s;}
	/*.collections li:hover .year, .collections li:hover .title{color:#555;}*/

.collections .year{position: absolute; top:10px; left:10px; color:#fff; font-size:1.6em; text-shadow:1px 1px 2px rgba(0,0,0,0.5);}
.collections .title{position: absolute; bottom:10px; left:10px; color:#fff; font-size:2em; text-shadow:1px 1px 2px rgba(0,0,0,0.7);}

.collections-wrap .more{text-align: center; margin-top: 30px;}
.collections-wrap .more img{width:50px;}
.collections-wrap .more p{font-size:1.8em; font-weight:400; color:#8bb14a; margin-top:10px;}

@media (max-width : 1200px) {
	.collections li{width: calc(25% - 8px);}
	
	.collections li:nth-child(6n+1){margin-left:5px;}
	.collections li:nth-child(6n+6){margin-right:5px;}
	
	.collections li:nth-child(4n+1){margin-left:0;}
	.collections li:nth-child(4n+4){margin-right:0;}
}
@media (max-width : 920px) {
	.collections li{width: calc(33.33% - 8px);}
	
	.collections li:nth-child(4n+1){margin-left:5px;}
	.collections li:nth-child(4n+4){margin-right:5px;}
	
	.collections li:nth-child(3n+1){margin-left:0;}
	.collections li:nth-child(3n+3){margin-right:0;}
}
@media (max-width : 710px) {
	.collections li{min-height:250px !important;}
}
@media (max-width : 540px) {
	.collections li{width: calc(50% - 5px);}
	
	.collections li:nth-child(3n+1){margin-left:5px;}
	.collections li:nth-child(3n+3){margin-right:5px;}
	
	.collections li:nth-child(2n+1){margin-left:0;}
	.collections li:nth-child(2n+2){margin-right:0;}
}

/*collections--end*/



/*awards*/
.awards .list{text-align: center; margin-top:50px; padding:50px 0; background:#eeeeee;}
.awards .list li{display:inline-block; text-align: center; margin: 0 50px; color:#555; font-size:1.6em; line-height: 1.8em;}
.awards .list li img{margin-bottom:15px; box-shadow:0px 0px 5px rgba(0,0,0,0.5);}

@media (max-width: 1450px) {
	.awards .list li{width:33%; margin:0;}
	.awards .list li img{width:80%;}
}
@media (max-width: 740px) {
	.awards .list li{width:100%; margin: 20px 0;}
	.awards .list li img{width:300px;}
}
/*awards--end*/



/*service*/
.service{background: url("../images/service_bg.png") no-repeat; background-size:cover; padding:100px 0; margin-top:50px; text-align: center;}
.service p{font-size:1.6em; margin: 20px auto 60px auto; line-height: 2em;}

@media (max-width : 1024px) {
	.service{background:none; padding:50px 0; margin-top:30px;}
}
/*service--end*/



/*sketch*/
.sketch{background: #ddd; margin-top:70px;}

:root {
  --marquee-width: 80vw;
  --marquee-height: 20vh;
  /* --marquee-elements: 12; */ /* defined with JavaScript */
  --marquee-elements-displayed: 5;
  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
  --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
}

.marquee-content {
  list-style: none;
  height: 100%;
  display: flex;
  animation: scrolling var(--marquee-animation-duration) linear infinite;
}
/* .marquee-content:hover {
  animation-play-state: paused;
} */
@keyframes scrolling {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }
}
.marquee-content li {
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
  flex-shrink: 0;
  width: var(--marquee-element-width);
  max-height: 100%;
  font-size: calc(var(--marquee-height)*3/4); /* 5rem; */
  white-space: nowrap;
	margin-right:50px;
}

.marquee-content li img {
  width: 100%;
  /* height: 100%; */
  border: 2px solid #eee;
}

@media (max-width: 1200px) {
  :root {
    --marquee-elements-displayed: 4;
  }
}
@media (max-width: 600px) {
  html { font-size: 12px; }
  :root {
    --marquee-width: 100vw;
    --marquee-height: 16vh;
    --marquee-elements-displayed: 3;
  }
  .marquee:before, .marquee:after { width: 5rem; }
}
/*sketch--end*/



/*news*/
.news .list{text-align: center; margin:100px 0;}
.news .list li{display:inline-block; text-align: center; margin: 0 50px;}
.news .list li a{color:#555; font-size:1.6em;}
.news .list li img{margin-bottom:15px;}

.fancybox-inner .content{width:100% !important;}
.content div{padding:25px;}
.content h5{font-size:2em; margin-bottom: 20px;}
.content b{font-size:1.6em; margin-bottom: 20px; display: block;}
.content b span{font-size:0.8em;}
.content p{font-size:1.4em;}
.content .img li{display:inline-block; margin-right:20px; margin-top:20px;}
.content .img li img{height:300px;}

@media (max-width: 1450px) {
	.news .list li{width:33%; margin:0;}
	.news .list li img{width:80%;}
}
@media (max-width: 740px) {
	.news .list li{width:100%; margin: 20px 0;}
	.news .list li img{width:300px;}
}
@media (max-width: 600px) {
	.content .img li img{height:auto; width:100%;}
}
/*news--end*/



/*footer*/
.footer{background: #eeeeee; padding:20px 0;}
.footer ul{width:100%; text-align: center;}
.footer ul li{display:inline-block; margin:10px 50px;}
.footer ul li img{width:200px;}
.footer ul li a{font-size:1.4em; color:#555555;}

@media (max-width: 1200px) {
	.footer ul li{margin:10px 20px;}
}
@media (max-width: 820px) {
	.footer ul li{display:block; width:100%; text-align: center; margin:20px 0;}
}
/*footer--end*/