@charset "UTF-8";

/* CSS Document */

@import "cookieconsent.css";
#offcanvasWithBackdrop {
	width: 350px;
}

img.sticky_photo {
	width: 60px;
}
/*

#sm-nav {
	width: calc(100vw - 40px);
	font-size: 10px;
}
#sm-nav a {
	display: flex;
	align-items: center;
	min-height: 40px;
	max-height: 50px;
	line-height: 15px;
	padding: 2px 10px;
	margin: 4px 2px;
	background-color: rgba(127, 255, 212, 0.3);
	text-align: center;
	color: rgba(110, 208, 211, 1);
}

#sm-nav a.active,
#sm-nav a:hover {
	background-color: rgba(110, 208, 211, 1);
	color: rgb(255, 255, 255);
}
*/
.sticky-h {
	height: 110px;
}

a {
	text-decoration: none;
}

a.amz_btn {
	font-size: 0.8em;
	white-space: nowrap !important;
	padding: 0.3em 2em;
	margin-top: 1rem !important;
	border-radius: 50rem !important;
	background-color: #ffc135;
	border: 1px solid #ffb769;
}
a.amz_btn:hover,
a.amz_btn:active,
a.amz_btn:active:focus {
	background-color: #fecf3a;
	border: 1px solid #ffb769;
}

a.amz_btn::before {
	content: url(/img/amazon.svg);
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 0.5em;
	vertical-align: middle !important;
}

/* ---   Back to top --- */

.back-to-top {
	position: fixed;
	right: 2rem;
	bottom: 2rem;
	opacity: 0.6;
}

.back-to-top:hover {
	opacity: 1;
}

.INS-bg2 {
	background: linear-gradient(0deg, rgba(110, 208, 211, 0.5) 0%, rgba(133, 205, 165, 0.5) 100%);
	background: -moz-linear-gradient(0deg, rgba(110, 208, 211, 0.5) 0%, rgba(133, 205, 165, 0.5) 100%);
	background: -webkit-linear-gradient(0deg, rgba(110, 208, 211, 0.5) 0%, rgba(133, 205, 165, 0.5) 100%);
	background: -o-linear-gradient(0deg, rgba(110, 208, 211, 0.5) 0%, rgba(133, 205, 165, 0.5) 100%);
}

.INS-bg3 {
	background: linear-gradient(-135deg, rgba(97, 226, 192, 0.5) 0%, rgba(0, 168, 242, 0.5) 100%);
	background: -moz-linear-gradient(-135deg, rgba(97, 226, 192, 0.5) 0%, rgba(0, 168, 242, 0.5) 100%);
	background: -webkit-linear-gradient(-135deg, rgba(97, 226, 192, 0.5) 0%, rgba(0, 168, 242, 0.5) 100%);
	background: -o-linear-gradient(-135deg, rgba(97, 226, 192, 0.5) 0%, rgba(0, 168, 242, 0.5) 100%);
}

/* ========================
Inswan headroom Menu Show Hide
======================== */

#omnia88 {
	position: fixed;
	z-index: 1021;
	right: 0;
	left: 0;
	top: 0;
}

.headroom {
	will-change: transform;
	transition: transform 200ms linear;
}

.headroom--pinned {
	transform: translateY(0%);
}

.headroom--unpinned {
	transform: translateY(-100%);
}

.inswan-menu {
	font-size: 1.1em;
	background: rgba(255, 255, 255, 0);
	color: rgba(255, 255, 255, 0.8);
	font-family: "Roboto Condensed", sans-serif;
}

.inswan-menu:hover,
.inswan-menu:focus,
.inswan-menu.active {
	background: rgba(0, 0, 0, 0.2);
	color: rgba(255, 255, 255, 1);
}

/* ========================
Menu
======================== */

.main_banner {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f8ffe8+0,e3f5ab+100 */
background: #f8ffe8; /* Old browsers */
background: -moz-linear-gradient(left,  #f8ffe8 0%, #e3f5ab 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #f8ffe8 0%,#e3f5ab 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #f8ffe8 0%,#e3f5ab 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#e3f5ab',GradientType=1 ); /* IE6-9 */

}

.main_banner_df {
	/*	padding-top: 57px;*/
	background: linear-gradient(0deg, rgba(110, 208, 211, 1) 0%, rgba(133, 205, 165, 1) 100%);
	background: -moz-linear-gradient(0deg, rgba(110, 208, 211, 1) 0%, rgba(133, 205, 165, 1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(110, 208, 211, 1) 0%, rgba(133, 205, 165, 1) 100%);
	background: -o-linear-gradient(0deg, rgba(110, 208, 211, 1) 0%, rgba(133, 205, 165, 1) 100%);
}






.inswan-BG {
	background: linear-gradient(0deg, rgba(60, 196, 224, 0.9) 0%, rgba(30, 182, 148, 0.9) 100%);
	background: -moz-linear-gradient(0deg, rgba(60, 196, 224, 0.9) 0%, rgba(30, 182, 148, 0.9) 100%);
	background: -webkit-linear-gradient(0deg, rgba(60, 196, 224, 0.9) 0%, rgba(30, 182, 148, 0.9) 100%);
	background: -o-linear-gradient(0deg, rgba(60, 196, 224, 0.9) 0%, rgba(30, 182, 148, 0.9) 100%);
}

/* ========================
Dropdown Menu & Offcanvas
======================== */

.offcanvas a.nav-link {
	color: #1e2125;
}

.dropdown-item:focus,
.dropdown-item:hover,
.offcanvas .nav-link:focus,
.offcanvas .nav-link:hover {
	color: #1e2125;
	/*  background-color: #e9ecef*/
	background-color: rgba(30, 182, 148, 0.2);
}

.dropdown-item.active,
.dropdown-item:active,
.offcanvas .nav-link.active,
.offcanvas .nav-link:active {
	color: #fff;
	text-decoration: none;
	background-color: rgba(63, 196, 224, 0.9);
}

.list-group-item-action:focus,
.list-group-item-action:hover {
	color: #495057;
	background-color: rgba(30, 182, 148, 0.2);
}

.list-group-item-action:active {
	background-color: rgba(63, 196, 224, 0.9);
}

.list-group-item {
	color: #212529;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.125);
}

.list-group-item.active {
	color: #fff;
	background-color: rgba(63, 196, 224, 0.9);
	border-color: rgba(63, 196, 224, 0.9);
}

/* Google icon ----------------------------------*/

/* Rules for sizing the icon. */

.material-icons.md-18 {
	font-size: 18px;
}

.material-icons.md-22 {
	font-size: 22px;
}

.material-icons.md-24 {
	font-size: 24px;
}

.material-icons.md-36 {
	font-size: 36px;
}

.material-icons.md-48 {
	font-size: 48px;
}

.material-icons.md-60 {
	font-size: 60px;
}

.material-icons.md-72 {
	font-size: 72px;
}

/* Rules for using icons as black on a light background. */

.material-icons.md-dark {
	color: rgba(0, 0, 0, 0.54);
}

.material-icons.md-dark.md-inactive {
	color: rgba(0, 0, 0, 0.26);
}

/* Rules for using icons as white on a dark background. */

.material-icons.md-light {
	color: rgba(255, 255, 255, 1);
}

.material-icons.md-light.md-inactive {
	color: rgba(255, 255, 255, 0.3);
}

/* ========================
Text set
======================== */

p.page-caption {
	color: rgba(0, 0, 0, 0.65);
	font-size: 1.8rem;
	font-weight: bold;
	border-left: 20px #d4f1ef solid;
	padding-left: 20px;
}

.caption-A {
	color: rgba(110, 208, 211, 0.5);
	font-family: "noto sans, sans-serif";
	font-size: 2.5rem;
}

/*  限制出現3行 */

p .text-line3 {
	overflow: hidden;
	/* line-height: 2rem;
  max-height: 8rem;*/
	-webkit-box-orient: vertical;
	display: block;
	display: -webkit-box;
	overflow: hidden !important;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
}

p .text-line2 {
	overflow: hidden;
	/* line-height: 2rem;
  max-height: 8rem;*/
	-webkit-box-orient: vertical;
	display: block;
	display: -webkit-box;
	overflow: hidden !important;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
}

.ins-pdname {
	font-family: "Righteous", cursive;
	font-size: 1.8rem;
	color: rgba(110, 208, 211, 1);
}

.ins-pdname-s {
	font-family: "Righteous", cursive;
	font-size: 1.5rem;
	color: #7f7f7f;
}

.ins-pd-blue {
	font-family: "Righteous", cursive;
	color: rgba(110, 208, 211, 0.5);
}

#INS-item a.nav-link {
	font-size: 0.8rem;
	padding: 9px 12px 7px 12px;
}

#INS-item a.nav-link:hover {
	color: #ffb800;
}

#INS-item a.nav-link.active {
	border-bottom: 0.3rem solid #ffb800;
}
.fs-4vw-26 {
	font-size: min(4vw, 26px);
	margin-bottom: 0.5rem;
	font-weight: 500;
}
.fs-4vw-30 {
	font-size: min(4vw, 30px);
	margin-bottom: 0.5rem;
	font-weight: 500;
}
.fs-sm {
	font-size: min(2.5vw, 16px);
}
/* ========================
BigPicture
======================== */

.bigpicture a {
	color: white;
}

.bigpicture:hover {
	cursor: pointer;
}

.bigpicture a .material-icons {
	opacity: 0.7;
	background-color: rgba(0, 0, 0, 0.66);
}

.bigpicture:hover a .material-icons {
	opacity: 1;
}

.bigpicture a img.play-btn {
	width: 80px;
	height: 80px;
	opacity: 0.8;
}

.bigpicture a:hover img.play-btn {
	opacity: 1;
}

/* ============================
    AD L&R
============================ */

.BG-AD-L,
.BG-AD-R {
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
	border: 1px #fff solid;
}

.text-container-L,
.text-container-R {
	margin-top: 35%;
	min-height: 220px;
	width: 100%;
	background-image: linear-gradient(to top, rgba(255, 255, 255, 100), rgba(255, 255, 255, 100) 75%, rgba(255, 255, 255, 0));
}

.text-content-L,
.text-content-R {
	top: 130px !important;
	left: 0 !important;
	width: calc(100% - 3rem);
	transform: translateY(-50%) !important;
	margin-left: 1.5rem !important;
}

@media (min-width: 992px) {
	.BG-AD-L {
		background-position: right;
	}
	.BG-AD-R {
		background-position: left;
	}
	.text-container-L,
	.text-container-R {
		margin-top: 0%;
		min-height: 400px;
		width: 55%;
	}
	.text-container-L {
		background-image: linear-gradient(to right, rgba(255, 255, 255, 100), rgba(255, 255, 255, 100) 75%, rgba(255, 255, 255, 0));
	}
	.text-container-R {
		background-image: linear-gradient(to left, rgba(255, 255, 255, 100), rgba(255, 255, 255, 100) 75%, rgba(255, 255, 255, 0));
	}
	.text-content-L,
	.text-content-R {
		top: 50% !important;
		left: 0 !important;
		transform: translateY(-50%) !important;
		margin-left: 3rem !important;
	}
}

.RFS-tittle_A {
	/* font-size: 28px;*/
	font-size: calc(22px + 1.6vw);
	font-weight: 600;
	margin-bottom: 10px;
	line-height: 1em;
	color: rgb(100, 100, 100);
}

@media screen and (min-width: 1320px) {
	.RFS-tittle_A {
		font-size: 43px;
		/* color: brown;*/
	}
}

/* ========================
Footer
======================== */

footer a .logo {
	opacity: 0.6;
}

footer a .logo:hover {
	opacity: 0.9;
}

/* ========================
Inswan Container
======================== */

.INS-small {
	font-size: 12px;
}

@media (min-width: 576px) {
	.container,
	.container-sm {
		max-width: 95%;
	}

	.sticky-h {
		height: 120px;
	}
	#INS-item a.nav-link {
		font-size: 0.9rem;
		padding: 10px 15px 10px 15px;
	}
}

@media (min-width: 768px) {
	img.sticky_photo {
		width: 115px;
	}
	.INS-small {
		font-size: 14px;
	}
	.container,
	.container-md,
	.container-sm {
		max-width: 95%;
	}
	#INS-item a.nav-link {
		font-size: 1rem;
		padding: 10px 15px 10px 15px;
	}
}

@media (min-width: 992px) {
	.container,
	.container-lg,
	.container-md,
	.container-sm {
		max-width: 95%;
	}
}

@media (min-width: 1200px) {
	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl {
		max-width: 95%;
	}
}

@media (min-width: 1400px) {
	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl,
	.container-xxl {
		max-width: 1320px;
	}
}