@charset "UTF-8";
/* =========================================================================

==base
==header
==banner
==intro
==album
==news
==contact
==footer
==breadcrumb + pagination
==download
==RWD

========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+TC:wght@100..900&display=swap');

/* =========================================================================
==base
========================================================================= */
:root {
	--fs-BNTitle: 52px;
	--fs-BNTxt: 22px;
	--fs-sectionTitle: 40px;
	--fs-infoTitle: 36px;
	--fs-sidebarTitle: 24px;
	--fs-itemTitle: 24px;
	--fs-footerTitle: 24px;
	--fs-headerNav: 20px;
	--fs-normal: 18px;
	--fs-slogan: 22px;

	--section: 100px;

	--cnvs-themecolor: #528555;
	--cnvs-themecolor-rgb: 82, 133, 85;
	--cnvs-yellow: #FED168;
	--cnvs-brown1: #A5885D;
	--cnvs-brown2: #CCB188;
	--cnvs-brown3: #EDD9AB;
	--cnvs-blue: #D2E1E9;
	--cnvs-lightgreen: #BFDB80;

	--cnvs-black: #333;
}

/* ================= base ================= */
body,
.form-control {
	word-break: break-word;
	letter-spacing: 1px;
	line-height: 1.8;
	font-weight: 400;
	font-family: "Noto Sans TC", sans-serif;
	color: var(--cnvs-black);
	font-size: var(--fs-normal);
}

.form-control::placeholder {
	color: var(--cnvs-contrast-600);
}

p:last-child,
ul:last-child,
ol:last-child,
li:last-child,
form:last-child,
.form-control:last-child {
	margin-bottom: 0;
}

a {
	color: var(--cnvs-black);
	transition: .3s ease;
}

a:hover {
	color: var(--cnvs-themecolor);
}

button {
	transition: .3s ease;
}

/* ================= ellipsis ================= */
.one-row { 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.two-row { 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.three-row { 
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* ==================== btn ==================== */
.btn-base {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	color: var(--cnvs-black);
	background-color: var(--cnvs-yellow);
	font-weight: 400;
	padding: 6px 28px 6px 16px;
	border-radius: 50px;
	transition: .3s ease;
}

.btn-base:hover {
	color: var(--cnvs-white);
	background-color: var(--cnvs-brown1);
}

.btn-base i {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	background-color: var(--cnvs-white);
	transition: .3s ease;
}

.btn-base:hover i {
	color: var(--cnvs-brown1);
}

/* ==================== title ==================== */
.section-title {
	font-size: var(--fs-sectionTitle);
	color: var(--cnvs-black);
}

.section-title:after {
	content: '';
	display: block;
	width: 50px;
	height: 3px;
	background-color: var(--cnvs-yellow);
	margin-top: 24px;
}

.section-title img {
	top: -12px;
	left: -62px;
}

.section-title.text-center::after{
	margin: 24px auto 0;
}

.section-title.text-center img {
	opacity: 0.3;
	left: 50%;
	transform: translateX(-50%);
}
	
.item-title {
	font-size: var(--fs-itemTitle);
	color: var(--cnvs-black);
	line-height: 1.5;
	font-weight: 700;
}

.footer-title {
	font-size: var(--fs-footerTitle);
}

.sidebar-title {
	font-size: var(--fs-footerTitle);
	color: var(--cnvs-black);
}

.info-title {
	font-size: var(--fs-infoTitle);
	color: var(--cnvs-black);
}

/* ==================== other ==================== */
.section {
	background-color: transparent;
	padding: var(--section) 0;
	margin: 0;
}

.color-yellow {
	color: var(--cnvs-yellow) !important;
}

.color-brown1 {
	color: var(--cnvs-brown1) !important;
}

.color-brown2,
.h-color-brown2:hover,
.h-color-brown2:active {
	color: var(--cnvs-brown2) !important;
}

.h-color:hover,
.h-color:active {
	color: var(--cnvs-themecolor) !important;
}

.color-brown3 {
	color: var(--cnvs-brown3) !important;
}

.color-lightgreen {
	color: var(--cnvs-lightgreen) !important;
}

.text-black {
	color: var(--cnvs-black) !important;
}

.bg-yellow {
	background-color: var(--cnvs-yellow) !important;
}

.bg-lightgreen {
	background-color: var(--cnvs-lightgreen) !important;
}

.mt-36 {
	margin-top: 36px;
}

/* =========================================================================
==header
========================================================================= */
#header {
	--cnvs-header-height-md: 70px;
}

#header-wrap {
	box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.10);
}

.header-wrap-clone {
	height: 132px;
}

.top-search-open .top-search-parent .header-deco-wrap {
	opacity: 0;
}

.is-expanded-menu .menu-link {
	--cnvs-primary-menu-padding-x: 12px;
}

.is-expanded-menu .menu-container > .menu-item:not(:first-child) {
	margin-left: 8px;
}

.menu-link,
.sub-menu-container .menu-item > .menu-link,
.is-expanded-menu .sub-menu-container .menu-item > .menu-link {
	font-size: var(--fs-headerNav);
	font-weight: 500;
	line-height: 1.5;
}

.menu-item.sub-menu .menu-link > div {
	display: flex;
	align-items: center;
}

#header-wrap #logo {
	padding: 16px 0;
	transition: .3s ease;
}

#header-wrap #logo img {
	width: 100px;
	height: auto;
	transition: .3s ease;
}

.is-expanded-menu .header-misc {
	margin-left: 30px;
}

/* ==================== sticky ==================== */
.sticky-header #header-wrap #logo {
	padding: 8px 0;
}

.sticky-header #header-wrap #logo img {
	width: 80px;
}

/* ==================== search ==================== */
.header-misc-icon {
	padding-left: 30px;
}

.header-misc-icon::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 20px;
	background-color: var(--cnvs-black);
}

.header-misc-icon > a {
	font-size: calc(var(--fs-headerNav) + 1px);
}

.top-search-form input {
	font-size: var(--fs-headerNav);
}

/* ==================== sns ==================== */
.social-icon i {
	font-size: 18px;
}

/* ==================== lang ==================== */
.top-links > .top-links-item {
	margin-left: 12px;
}

.top-links > .top-links-item,
.top-links-sub-menu {
	margin-right: calc(30px - 12px);
	border-width: 2px;
}

.top-links-item > a > i:first-child {
	margin-right: 12px;
}

.top-links-item > a > i.sub-menu-indicator {
	margin: 0 0 0 4px !important;
}

.top-links-sub-menu .top-links-item > a {
	padding-top: 10px;
	padding-bottom: 10px;
}

.top-links-sub-menu .top-links-item:hover > a {
	padding-left: 16px;
}

/* =========================================================================
==banner
========================================================================= */
#slider {
	aspect-ratio: 2000 / 833;
}

.swiper-slide-bg::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(0deg, rgba(34, 34, 34, 0.35) 0%, rgba(34, 34, 34, 0.35) 100%);
}

.banner-title {
	font-size: var(--fs-BNTitle);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 2px;
	color: var(--cnvs-white);
	margin-bottom: 0;
}

.banner-txt,
.slider-caption p {
	font-size: var(--fs-BNTxt);
	font-weight: 400;
	color: var(--cnvs-white);
	margin-bottom: 0;
}

.slider-arrow-left,
.slider-arrow-right {
	background-color: rgba(82, 133, 85, 0.5);
}

.slider-arrow-left:hover,
.slider-arrow-right:hover {
	background-color: rgba(82, 133, 85, 0.75) !important;
}

.one-page-arrow {
	bottom: 40px;
}

#slider .btn-base:hover {
	color: var(--cnvs-brown1);
	background-color: var(--cnvs-white);
}

#slider .btn-base:hover i {
	color: var(--cnvs-white);
	background-color: var(--cnvs-brown1);
}

/* =========================================================================
==intro
========================================================================= */
.h1-slogan {
	font-size: var(--fs-slogan);
	font-weight: 700;
	line-height: 1.8;
}

.img-bg:after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: calc(100% - 24px);
	height: calc(100% - 24px);
	background-color: var(--cnvs-blue);
	z-index: -1;
}

/* ==================== info idea ==================== */
.idea-wrap {
	color: var(--cnvs-white);
}

.idea-wrap .img-wrap:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	pointer-events: none;
}

.idea-box {
	position: relative;
	z-index: 0;
	background-color: var(--cnvs-white);
	padding: 42px 32px;
	margin: 0 12px 12px 0;
	text-align: left;
}

.idea-box::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 12px;
	left: 12px;
	background-color: rgb(210 225 233 / 70%);
	z-index: -1;
}

.idea-box .item-title {
	font-size: var(--fs-slogan);
}

.idea-box img {
	bottom: 10px;
	right: 10px;
}

/* ================= history ================= */
.history_6__time-item::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 0;
  width: 30%;
  height: 2px;
  background: var(--cnvs-themecolor);
}

.history_6__time-item:nth-child(even)::before {
  background: var(--cnvs-brown1);
}

.history_6__time-item .history_6__time-year {
  width: 20%;
  background: var(--cnvs-themecolor);
  height: fit-content;
}

.history_6__time-item:nth-child(even) .history_6__time-year {
  background: var(--cnvs-brown1);
}

.history_6__time-txt {
  position: relative;
  margin-left: 10%;
  width: 70%;
  padding: 10px 0px 10px 30px;
}

/* ==================== certificate ==================== */
.cer-item-wrap:nth-child(even) {
	animation-delay: .1s;
}

.cer-img::before,
.cer-img::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 85%;
	height: 100%;
	border: 2px solid var(--cnvs-themecolor);
	z-index: -1;
	transition: .3s ease-in-out;
}

.cer-img::before {
	opacity: 0;
  background: linear-gradient(90deg, var(--cnvs-lightgreen) 0%, var(--cnvs-yellow) 100%);
	transition: .3s ease-in-out;
}

.cer-item:hover .cer-img::after {
	width: 100%;
}

.cer-item:hover .cer-img::before {
	width: 100%;
	opacity: 1;
}

/* =========================================================================
==album
========================================================================= */
.item-categories .item-title {
	left: 8px;
	border-radius: 0 24px 0 0;
	transition: .3s ease;
}

.album-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.2);
	z-index: 1;
	transition: .3s ease;
}

.album-item:hover::before {
	opacity: 0;
}

.album-item:hover .item-title {
	opacity: 0;
}

/* ==================== img ==================== */
.album-item img {
	aspect-ratio: 960 / 665;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 8s linear;
}

.album-item:hover img {
	transform: scale(1.4);
}

/* ==================== magnify ==================== */
.magnify-box {
	width: 150px;
	height: 150px;
	background-color: rgba(237, 217, 171, 0.8);
	opacity: 0;
	transition: .3s ease;
}

.album-item:hover .magnify-box {
	opacity: 1;
}

.magnify-box i {
	font-size: 42px;
}

.uil-search-plus:before {
	font-weight: 800;
}

/* ==================== btn ==================== */
.album-more-btn p {
	font-size: var(--fs-headerNav);
}

.album-more-btn a {
	font-size: var(--fs-slogan);
}

.album-more-btn a:hover {
	color: var(--cnvs-brown1) !important;
}

/* ==================== info ==================== */
.php_list_wrap .album-item {
	animation-delay: 0.3s;
	/* box-shadow: 4px -4px 12px 0px rgba(0, 0, 0, 0.1); */
}

.grid-container [data-lightbox="gallery-item"]::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,0.3);
	width: 100%;
	height: 0%;
	z-index: 1;
	transition: .5s ease;
}

.grid-container [data-lightbox="gallery-item"]:hover::before {
	height: 100%;
	transition: .5s ease;
}

.grid-container img {
	transition: .5s ease;
}

.grid-container [data-lightbox="gallery-item"]:hover img {
	transform: scale(1.15);
}

.grid-container h4 {
	font-size: var(--fs-normal);
	background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 30%, transparent 100%);
	color: #fff;
	padding: 12px 4px;
	pointer-events: none;
}

/* ==================== list ==================== */
.alblist-item > * {
	width: 50%;
}

/* =========================================================================
==news
========================================================================= */
.news-item:first-child {
	border-top: 1px solid var(--cnvs-brown1);
}

.news-item {
	border-bottom: 1px solid var(--cnvs-brown1);
}

.news-item:after {
	content: '';
	background: rgb(210 225 233 / 50%);
	width: 0;
	height: 100%;
	position: absolute;
	top: 0;
	left: auto;
	right: 0;
	transition-duration: .8s;
	transition-timing-function: cubic-bezier(.17, .67, .5, .93);
	z-index: -1;
}

.news-item:hover:after {
	left: 0;
	width: 100%;
}

.news-item + .news-item {
	animation-delay: 0.2s;
}

/* ==================== sidebar ==================== */
.sidebar-wrap {
  top: 119px;
}

.news_1__widget-item {
	border: 1px solid var(--cnvs-brown1);
}

.news_1__sidebar-area::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(82 ,133, 85, 0.3);
}

.news_1__widget-title::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-image: linear-gradient(to right, var(--cnvs-brown1), rgba(255,255,255,0.2));
}

.news_1__widget-categories:not(.product-cate-wrap) li a:hover,
.news_1__widget-categories:not(.product-cate-wrap) li a:active {
  color: var(--cnvs-black);
	background-color: var(--cnvs-blue);
}

.news_1__widget-categories:not(.product-cate-wrap) li.active a {
	color: var(--cnvs-white);
	background-color: var(--cnvs-themecolor);
}

.news_1__widget-categories ul li i {
  font-size: 12px;
}

.news-info-img-wrap .news-item .info-wrap {
	padding: 16px;
}

/* ================= news share ================= */
.news-share-wrap,
.news-share-wrap > * {
	border-color: #6C757D !important;
}

/* ================= tag ================= */
.tag {
	font-size: 16px;
	display: inline-block;
	color: var(--cnvs-themecolor);
	padding: 2px 16px;
	border: 1px solid var(--cnvs-themecolor);
	border-radius: 20px;
}

.tag:hover,
.tag:active {
	color: var(--cnvs-white);
	background-color: var(--cnvs-themecolor);
}

/* =========================================================================
==contact
========================================================================= */
.index-contact-wrap::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
}

.index-contact-wrap .contact-box {
	background-color: rgba(255,255,255,0.9);
}

/* =========================================================================
==footer
========================================================================= */
#footer {
	background: #F6F8FF;
}

#footer .footer-widgets-wrap {
	padding: 40px 0;
}

/* ==================== logo ==================== */
.footer-logo {
	padding: 40px;
}

/* ==================== site map ==================== */
#footer {
	font-size: var(--fs-headerNav);
}

#footer i {
	font-size: var(--fs-normal);
}

/* ==================== gotoTop ==================== */
#gotoTop {
	width: 44px;
	height: 44px;
}

#gotoTop:hover {
	background-color: rgba(0,0,0,0.6);
}

/* ==================== float sns ==================== */
.float-sns-wrap {
	right: 30px;
	bottom: 110px;
	z-index: 999;
}

.float-sns-wrap .social-icon {
	width: 44px;
	height: 44px;
	box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.20);
}

.float-sns-wrap .social-icon i {
	font-size: 24px;
	line-height: 44px;
}

.float-sns-wrap .social-icon:hover i:first-child {	
  margin-top: -44px;
}

/* =========================================================================
==breadcrumb + pagination
========================================================================= */
.breadcrumb-title {
	font-size: var(--fs-sectionTitle);
	line-height: 1.5;
	font-weight: 600;
	letter-spacing: 1px;
}

.php_breadcrumb li:not(:last-child)::after {
	content: '/';
	display: inline-block;
	margin: 0 12px;
	color: var(--cnvs-yellow);
}

/* ================= pagination ================= */
.page-item {
	margin: 0 4px;
}

.page-link {
	width: 44px;
	height: 44px;
	border: 1px solid var(--cnvs-themecolor);
	border-radius: 0 !important;
}

.page-link.arrow {
	background-color: transparent;
	color: var(--cnvs-themecolor);
}

.page-link:hover,
.page-link.arrow:hover {
	background-color: var(--cnvs-themecolor);
	border-color: var(--cnvs-themecolor);
	color: var(--cnvs-white);
}

.active > .page-link,
.page-link.arrow:active {
	background-color: var(--cnvs-themecolor);
	border-color: var(--cnvs-themecolor);
}

.page-link.arrow i {
	font-size: 12px;
}

/* =========================================================================
==download
========================================================================= */
#download-nav {
	border-bottom: 4px double var(--cnvs-brown1);
}

#download-nav .wrap {
  width: fit-content;
  max-width: calc(100% - 70px);
  margin: auto;
}

#download-nav .wrap i {
  position: absolute;
  top: 50%;
  left: -40px;
  transform: translateY(-50%);
  padding: 5px 12px;
  cursor: pointer;
  color: var(--cnvs-themecolor);
  display: none;
}
#download-nav .wrap .right-btn {
  right: -40px;
  left: auto;
}

.tab-menu,
#download-nav .nav {
  overflow-x: scroll;
  flex-wrap: nowrap;
  user-select: none;
  scroll-behavior: smooth;
}

.tab-menu.dragging,
#download-nav .nav.dragging {
  scroll-behavior: unset;
  cursor: grab;
}

#download-nav .nav::-webkit-scrollbar {
  display: none;
}

#download-nav .nav .item {
  white-space: nowrap;
  margin: 0 8px;
}

.tab-menu.dragging .tab-item,
#download-nav .nav.dragging .item {
  pointer-events: none;
}

#download-nav .nav .item a {
  padding: 4px 32px;
  color: var(--cnvs-themecolor);
	border: 1px solid var(--cnvs-themecolor);
  cursor: pointer;
  border-radius: 30px;
  transition: .3s all;
}

#download-nav .nav .item .active {
  color: var(--cnvs-white);
  background-color: var(--cnvs-themecolor);
}

@media (min-width:992px) {
	#download-nav .wrap i:hover {
		color: var(--cnvs-red);
	}
	
	#download-nav .nav .item:hover a,
	#download-nav .nav .item:hover .active {
		color: var(--cnvs-white);
		background-color: var(--cnvs-themecolor);
	}
}

.download-item {
	border: 1px solid var(--cnvs-blue);
}

.download-item:hover {
	color: var(--cnvs-black);
	background-color: var(--cnvs-blue);
}

/* =========================================================================
==RWD
========================================================================= */
@media (max-width: 1399px) {
	/* ==================== header ==================== */
	.is-expanded-menu .menu-link {
		--cnvs-primary-menu-padding-x: 8px;
	}

	.is-expanded-menu .menu-container > .menu-item:not(:first-child) {
		margin-left: 4px;
	}

	.top-links > .top-links-item,
	.top-links-sub-menu {
		margin-right: calc(30px - 8px);
	}

	.top-links-item > a {
		padding: 12px 8px;
	}

	.top-links-item > a > i:first-child {
		margin-right: 8px;
	}

	.top-links-sub-menu .top-links-item > a {
		padding: 12px;
	}

	/* ==================== footer ==================== */
	.footer-logo {
		padding: 24px;
	}

	#footer li:not(:nth-child(4)) .widget-link {
		width: 120px;
	}
}

@media (max-width: 1199px) {
	:root {
		--fs-BNTitle: 42px;
		--fs-BNTxt: 20px;
		--fs-sectionTitle: 38px;
		--fs-infoTitle: 32px;
		--fs-sidebarTitle: 22px;
		--fs-itemTitle: 22px;
		--fs-footerTitle: 22px;
		--fs-headerNav: 18px;
		--fs-slogan: 20px;

		--section: 80px;
	}

	.section-title img {
		left: -19px;
    width: 70px;
    opacity: 0.3;
	}

  /* ==================== footer ==================== */
	#footer li:not(:nth-child(4)) .widget-link {
		width: auto;
	}
}

@media (max-width: 991px) {
	.wow {
		animation-name: none !important;
		visibility: visible !important;
		opacity: 1;
	}

	.mt-36 {
		margin-top: 24px;
	}

	/* ==================== header ==================== */
	#header-wrap #logo {
		padding: 12px 0;
	}

	#header-wrap #logo img {
		width: 90px;
	}

	.header-wrap-clone {
		height: 114px;
	}

	/* ==================== footer ==================== */
	.footer-logo {
		width: 150px;
	}

	.footer-txt-wrap > div {
		width: 50%;
	}

	#footer li:not(:nth-child(4)) .widget-link {
		width: 100px;
	}

	/* ==================== breadcrumb + pagination ==================== */
		.php_breadcrumb li:not(:last-child)::after {
		margin: 0 8px;
	}
}

@media (max-width: 767px) {
	:root {		
		--fs-BNTitle: 34px;
		--fs-sectionTitle: 36px;
		--fs-infoTitle: 30px;
		--fs-sidebarTitle: 20px;
		--fs-itemTitle: 20px;
		--fs-footerTitle: 20px;

		--section: 60px;

		--cnvs-canvas-slider-dots-size: 8px;
	}

	.btn-base {
		gap: 8px;
		padding: 6px 18px 6px 10px;
	}

	.btn-base i {
		width: 34px;
		height: 34px;
	}

	/* ==================== header ==================== */
	#header-wrap #logo img {
		width: 80px;
	}

	.sticky-header #header-wrap #logo img {
		width: 70px;
	}
	
	.header-misc-icon {
		padding-left: 24px;
	}

	.top-links > .top-links-item,
	.top-links-sub-menu {
		margin-right: calc(24px - 8px);
	}

	.header-wrap-clone {
		height: 104px;
	}

	/* ==================== banner ==================== */
	.banner-txt {
		display: none;
	}
	.header-misc-icon > a {
		font-size: calc(var(--fs-headerNav) + 1px);
	}


	/* ==================== intro ==================== */
	.breadcrumb-wrap ul {
		font-size: 16px;
	}

	.breadcrumb-wrap ul a,
	.php_breadcrumb li:not(:last-child)::after {
		color: #f7faff;
	}

	.history_6__time-item .history_6__time-year {
    width: 30%;
  }

  .history_6__time-item .history_6__time-txt {
    width: 65%;
		margin-left: 5%;
    padding: 10px 0px 10px 20px;
  }

  .history_6__time-item::before {
    top: 23px;
    width: 35%;
  }

	/* ==================== news ==================== */
	.news-share-wrap [class*=border-] {
		border: 0 !important;
	}

	.news-share-wrap a {
		display: inline-block;
		font-size: 24px;
		margin: 0 8px;
	}

	.news-share-wrap a[title="Facebook"] {
		font-size: 26px;
	}

	/* ==================== download ==================== */
	#download-nav .nav .item a {
    padding: 4px 28px;
	}

	/* ==================== album ==================== */
	.alblist-item > * {
		width: 100%;
	}
}

@media (max-width: 575px) {
	:root {		
		--fs-BNTitle: 24px;
		--fs-sectionTitle: 34px;

		--section: 48px;
	}

	/* ==================== header ==================== */
	#header-wrap #logo {
		padding: 8px 0;
	}
	
	#header-wrap #logo img {
		width: 70px;
	}

	.header-wrap-clone {
		height: 86px;
	}

	/* ==================== banner ==================== */
	#slider {
		--cnvs-swiper-dots-position-bottom: 10px;
	}

	/* ==================== intro ==================== */
	.img-bg:after {
		width: calc(100% - 16px);
    height: calc(100% - 16px);
	}

	.history_6__time-item .history_6__time-year {
    width: 100%;
    padding: 5px;
  }

  .history_6__time-item::before {
    top: 17px;
    width: 33%;
  }

  .history_6__time-item .history_6__time-txt {
    width: 100%;
    padding: 4px 0 0;
    margin-left: 0;
  }

	/* ==================== footer ==================== */
	.footer-logo {
		padding: 16px;
		width: 120px;
	}

	.footer-txt-wrap > div {
		width: 100%;
	}

	#footer li:not(:nth-child(4)) .widget-link {
		width: auto;
	}

	/* ==================== breadcrumb + pagintaion ==================== */
	.page-link {
		width: 38px;
		height: 38px;
	}
}

@media (max-width: 419px) {
	/* ==================== footer ==================== */
	#footer li:not(:nth-child(4)) .widget-link {
		width: 100px;
	}
}