@import url('https://fonts.googleapis.com/css?family=Kanit|Noto+Sans+TC:200,400,700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-1/css/all.css');

/******GLOBAL******/
.section {
	padding: 5rem 0;
	position: relative;
}

.text-black {
	color: #1d2124;
}

.mb-6 {
	margin-bottom: 6rem !important;
}

h2 span a {
	font-size: 12px;
	color: #fff;
	vertical-align: middle;
	display: inline-block;
	padding: 2px 5px;
	margin-left: 1rem;
	background: #666;
	transition: all 0.3s;
}

h2 span a:hover {
	color: #666;
	text-decoration: none;
	background: #fff;
}

.bg-white-90 {
	background: rgba(255, 255, 255, .9);
}

.list-primary {
	list-style-image: url(../images/list-icon.png);
}

.list-primary li {
	margin-bottom: .5rem;
}

li {
	margin-bottom: .5rem;
}
.nav-item {
	margin-bottom: 0;
}
ul.links.inline {
	display: none;
}

/******NAV******/
.top-nav {
	background: #C8161D;
	font-size: 15px;
	padding: 0.75rem 1rem;
	text-align: right;
	position: relative;
	z-index: 1020;
}

.top-nav-m {
	background: #C8161D;
	font-size: 15px;
	padding: 0.75rem 1rem;
	position: relative;
	z-index: 1020;
}
.top-nav ul.menu, .top-nav-m ul.menu {
	padding: 0;
	list-style: none;
}
.nolink {
	cursor: pointer;
}

.top-nav-m .nav {
	display: block;
}

.nav-ham {
	display: block;
	width: 40px;
	cursor: pointer;
	height: 30px;
}

.nav-ham span {
	width: 100%;
	display: block;
	height: 3px;
	background: #fff;
}

.nav-ham span:not(:first-child) {
	margin-top: 8px;
}

.top-nav .nav-item a {
	color: #fff;
	padding: 0 0.75rem;
	border-right: 1px #fff solid;
}

.top-nav-m .nav-item a {
	color: #fff;
	padding: 0.25rem;
}

.top-nav a:hover {
	text-decoration: underline;
}

.top-nav .nav-item:last-child a {
	border: none;
}

.top-nav .dropdown-menu a {
	color: #333;
	padding: 0.75rem;
}

.top-nav-m .dropdown-menu a {
	color: #333;
	padding: 0.25rem;
}
.dropdown-menu {
	border: 1px solid rgb(204, 204, 204);
}
.region-head .nav-pills,
.page-node-189 .nav-pills {
	background: #f4eee7;
}
.region-head .nav-pills .nav-link,
.page-node-189 .nav-pills .nav-link {
	border-radius: 0;
}
.region-head .nav-pills .nav-link:hover,
.page-node-189 .nav-pills .nav-link:hover {
	background: #eadccb;
}

.menu-m {
	height: 0;
	opacity: 0;
	transition: all .3s;
	display: none;
}

.open {
	height: auto;
	opacity: 1;
	display: block;
}

.header {
	padding: 2rem 1rem;
	position: relative;
	z-index: 1010;
	background: rgba(255, 255, 255, 0.9);
	margin-top: 0;
}

.logo {
	max-width: 200px;
}

.logo-in {
	width: 100%;
}

.main-nav a {
	color: #000;
	display: block;
	flex-wrap: wrap;
	width: 30%;
	margin-left: 0;
	margin-top: .5rem;
	border-bottom: 2px #000 solid;
	font-size: 15px;
}

.main-nav a:not(:first-child) {
	margin-left: 3%;
}
.top-nav a, .header a, .footer a, .top-nav-m a {
	text-decoration: none;
}
.tabs li {
	display: inline-block;
	margin-right: 1rem;
}
.tabs {
	padding: 0;
}

@media (min-width:992px) {
	.top-nav {
		padding: 0.75rem 4rem;
		position: fixed;
	}

	.top-nav .nav {
		display: flex;
	}

	.nav-ham {
		display: none;
	}

	.header {
		padding: 2rem 4rem;
		position: fixed;
		margin-top: 46px;
	}
}

@media (min-width:992px) {
	.logo {
		max-width: 470px;
	}

	.main-nav a {
		width: 150px;
		margin-left: 0;
		font-size: 19px;
		font-weight: 700;
		margin-top: 0;
	}

	.main-nav a:not(:first-child) {
		margin-left: 2rem;
	}
}

/*******BANNER*******/

.field-name-field-bigbanner {
	overflow: hidden;
}

.yt-video {
	width: 100%;
	height: 40vh;
	pointer-events: none;
}

.video-wrap {
	background: #000;
	height: 132px;
	width: 100%;
}

.home-video {
	height: 100%;
	margin: 0 auto;
	display: block;
}

.pt-header,
.field-name-field-bigbanner,
.field-name-field-liveslider {
	padding-top: 0;
}

@media (min-width:768px) {
	.yt-video {
		height: 800px;
	}

	#bigbanner {
		height: 320px;
	}

	.video-wrap {
		height: 320px;
	}

	#bigbanner .carousel-control-prev,
	#bigbanner .carousel-control-next {

		bottom: 150px;

	}

	#bigbanner .carousel-control-next {
		right: 5px;
	}

	#bigbanner .carousel-control-prev {
		left: 5px;
	}

	#bigbanner .carousel-control-icon {
		width: 25px;
		height: 25px;
	}
}

@media (min-width:992px) {

	.pt-header,
	.field-name-field-bigbanner,
	.field-name-field-liveslider {
		padding-top: 187px;
	}

	#bigbanner .carousel-control-prev,
	#bigbanner .carousel-control-next {
		width: 50px;
		display: flex;
		height: 50px;
		bottom: 35vh;
		background: #000;
	}

	#bigbanner .carousel-control-next {
		right: 45px;
	}

	#bigbanner .carousel-control-prev {
		left: 45px;
	}
}

.wrap-why {
	background: url(../images/bg-why.png) repeat 0 0;
	animation: bgWhy 30s infinite linear
}

.why {
	font-family: 'Kanit', sans-serif;
	font-size: 70px;
	text-align: center;
	margin-bottom: 0.5rem;
	line-height: 1;
}

.why-subtitle {
	font-size: 1.5rem;
}

@keyframes bgWhy {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 1105px -300px;
	}
}

.line {
	height: 3px;
	background: #fff;
	position: absolute;
	font-size: 1px;
	display: none;
}

.line-v {
	width: 3px;
	background: #fff;
	position: absolute;
	font-size: 1px;
	display: none;
}

.icon {
	position: absolute;
	opacity: 0;
	display: none;
}

.line1 {
	top: -20px;
	animation: line1 .5s forwards;
}

.line2 {
	left: -20px;
	top: -20px;
	animation: line2 .5s .5s forwards;
}

.line3 {
	left: -20px;
	top: 310px;
	animation: line3 1s 1s forwards;
}

.line4 {
	right: -20px;
	top: 90px;
	animation: line4 .5s forwards;
}

.line5 {
	top: 310px;
	right: -20px;
	animation: line5 1s .5s forwards;
}

.line6 {
	left: -20px;
	top: 90px;
	animation: line4 .5s forwards;
}

.line7 {
	left: -20px;
	top: 310px;
	animation: line7 1s .5s forwards;
}

.icon1 {
	top: 190px;
	left: 770px;
	animation: icon1 .3s 2s forwards;
}

.icon2 {
	top: 170px;
	right: 760px;
	animation: icon2 .3s 1.5s forwards;
}

.icon3 {
	top: 190px;
	left: 850px;
	animation: icon1 .3s 1.5s forwards;
}

@keyframes line1 {
	from {
		left: 430px;
		width: 1px;
	}

	to {
		left: -20px;
		width: 450px;
	}
}

@keyframes line2 {
	from {
		height: 1px;
	}

	to {
		height: 330px;
	}
}

@keyframes line3 {
	from {
		width: 1px;
	}

	to {
		width: 750px;
	}
}

@keyframes line4 {
	from {
		height: 1px;
	}

	to {
		height: 220px;
	}
}

@keyframes line5 {
	from {
		width: 1px;
	}

	to {
		width: 750px;
	}
}

@keyframes line7 {
	from {
		width: 1px;
	}

	to {
		width: 830px;
	}
}

@keyframes icon1 {
	from {
		width: 1px;
		height: 1px;
		opacity: 0;
	}

	to {
		width: 130px;
		height: 152px;
		opacity: 1;
	}
}

@keyframes icon2 {
	from {
		width: 1px;
		height: 1px;
		opacity: 0;
	}

	to {
		width: 150px;
		height: 150px;
		opacity: 1;
	}
}

@media (min-width:768px) {
	.why {
		font-size: 165px;
	}

	.why-subtitle {
		font-size: 2rem;
	}

	.line,
	.line-v,
	.icon {
		display: block;
	}
}

/********LINK*******/

.entry-box {
	border-radius: 1rem;
	box-shadow: 0 0 3px #ccc;
	padding: 1rem;
	margin: 1rem 0;
}

@media (min-width:768px) {
	.entry-box {
		margin: 1rem;
	}
}

.wrap-honor {
	background: url(../images/bg-honor.png) #ccc;
}

.honor-box .honor-img img {
	transition: all 0.3s;
	max-width: 100%;
	height: auto!important;
}

.honor-box:hover .honor-img img {
	transform: scale(1.1);
}

.honor-img {
	width: 100%;
	height: 220px;
	overflow: hidden;
}

@media (min-width:768px) {
	.honor-img {
		width: 330px;
		height: 200px;
		overflow: hidden;
	}
}

@media (min-width:992px) {
	.honor-img {
		width: 290px;
		height: 184px;
	}
}

@media (min-width:1200px) {
	.honor-img {
		width: 350px;
		height: 222px;
	}
}

.honor-txt {
	background: #000;
	color: #fff;
	padding: 1rem;
}

.honor-txt p {
	min-height: 72px;
}

.honor-txt span {
	font-size: 12px;
	color: #999;
}

#carousel-honor .carousel-control-prev,
#carousel-honor .carousel-control-next,
#carousel-honor-m .carousel-control-prev,
#carousel-honor-m .carousel-control-next,
#carousel-honor-md .carousel-control-prev,
#carousel-honor-md .carousel-control-next {
	top: 50%;
}

#carousel-honor .carousel-control-prev {
	left: -130px;
}

#carousel-honor .carousel-control-next {
	right: -130px;
}

#carousel-honor-m .carousel-control-prev {
	left: 10px;
}

#carousel-honor-m .carousel-control-next {
	right: 10px;
}

#carousel-honor-md .carousel-control-prev {
	left: 10px;
}

#carousel-honor-md .carousel-control-next {
	right: 10px;
}

.news-box {
	margin-bottom: 1.5rem;
	padding-left: 0.5rem;
	border-left: 3px #c8161d solid;
}

#block-views-ccnews-block .view-ccnews .views-field-field-date {
	font-size: 20px;
	font-family: 'Kanit', sans-serif;
	border: 1px #666 solid;
	padding: 0.5rem 1rem;
	display: inline-block;
	float: right;
	margin-left: 0.5rem;
}

#block-views-ccnews-block .view-ccnews .views-field-title {
	font-size: 17px;
}

.news-title span {
	font-size: 13px;
	color: #666;
}

.wrap-about p,
.wrap-about ul {
	color: #666;
}

.img-about {
	position: absolute;
	top: 210px;
	left: -100px;
	width: 160%;
}

.bg-about {
	background: url(../images/bg-about.png) repeat-x 0 bottom;
	padding-bottom: 1rem;
	animation: bgAbout 5s infinite linear;
}

@keyframes bgAbout {
	from {
		background-position: 0 bottom;
	}

	to {
		background-position: 300px bottom;
	}
}

.dep-box {
	background: #f2e8da;
	padding: 1rem;
	transition: all 0.3s;
	margin-bottom: 1.5rem;
}

.dep-box:hover {
	background: #fff;
}

.dep-title {
	font-size: 18px;
	font-weight: 400;
	display: block;
	background: url(../images/list-b.png) no-repeat 0 top;
	padding-left: 1.5rem;
	transition: all 0.3s;
}
.dep-title a {
	text-decoration: none;
}

.dep-title span {
	font-size: 12px;
	color: #999;
	margin-top: 1rem;
	display: block;
}

.dep-box:hover .dep-title {
	background-position: 5px top;
}

.wrap-dep {
	background: url(../images/bg-dep.png) #b98e59;
}

.entry-box {
	display: block;
}

/*****HOME BLOCK*****/
.region-home-top h2,
.region-home-2 h2,
.region-home-3 h2 {
	text-align: center;
	margin-bottom: 1.5rem;
}

#block-views-news-block {
	margin-bottom: 5rem;
}

.views-field-field-hero-img img {
	width: 100%;
	height: auto!important;
}

.views-field-field-hero-img blockquote {
	display: none;
}

#block-views-news-block .views-field-field-date,
#block-views-news-block-1 .views-field-field-date,
.view-display-id-page_1 .views-field-field-date {
	font-size: .5rem;
	color: #66717b;
}

#block-views-news-block-1 .views-field-field-date,
.view-display-id-page_1 .views-field-field-date {
	width: 14%;
}

#block-views-news-block-1 .views-field-title,
.view-display-id-page_1 .views-field-title {
	width: 70%;
}

#block-views-news-block-1 .views-field-rid,
.view-display-id-page_1 .views-field-rid {
	width: 15%;
	text-align: right;
}
.item-list {
	margin-top: 2rem;
}

/*****INNER*****/
.page-title {
	margin: 50px 0;
	padding-bottom: 50px;
}

.inner {
	font-size: 1.15rem;
}

.inner h2 {
	font-size: 1.75rem;
	padding: 1rem;
	border-bottom: 5px solid #8e6b33;
	margin: 3.5rem 0 2.5rem 0;
	background: #e5d3b7;
}

.inner h3 {
	margin: 1.75rem 0;
}

.inner img {
	max-width: 100%;
	height: auto!important;
	margin-bottom: 1rem;
}

.field-name-field-files .field-label {
	border-bottom: 1px solid #dee2e6;
	padding-bottom: .5rem;
	margin: 2rem 0 .5rem 0;
	font-weight: normal;
	font-size: 1rem;
	color: #b28247;
}

.hover-box {
	border: 1px solid #dee2e6;
	padding: 1rem;
	text-align: center;
	transition: all .3s;
	margin-bottom: 1rem;
}

.i18n-zh-hant .hover-box {
	letter-spacing: .3rem;
}

.page-node-196 .hover-box {
	min-height: 90px;
}

.hover-box:hover {
	background: #C8161D;
}

.hover-box:hover a {
	color: #fff;
}

.region-head .nav {
	border-bottom: 1px #444a50 solid;
	margin-top: 2rem;
}

/*****GALLERY*****/
.field-name-field-gallery-photo .field-items {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
}

.field-name-field-gallery-photo .field-items .field-item {
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
	position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
.field-name-field-gallery-photo .field-items .field-item img {
	max-width: 100%;
	height: auto!important;
}

@media (min-width: 768px) {
	.field-name-field-gallery-photo .field-items .field-item {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
}