/* Video 
/*------------------------------------------------------------*/
html, body {
	font-family: 'Open Sans', 'Roboto', Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
}


/* General
/*------------------------------------------------------------*/
:root {
	--font: 'Open Sans', 'Roboto', Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
	--block-bg: #F9F9F9;
	--primary: #1F81B9;
	--secondary: #449DCF;
	--grey: #333;
	--gradient: linear-gradient(270deg, #79D3C3 0%, #41A0DD 100%);
}


/* Utility Class
/*------------------------------------------------------------*/
.position-fixed {
	position: fixed;
}

.overflow-hidden {
	overflow: hidden;
}

.d-none {
	display: none;
}

.d-block {
	display: block;
}

.d-flex {
	display: flex; 
}

.justify-content-center {
	justify-content: center;	
}

.justify-content-between {
	justify-content: space-between;
}

.align-items-center {
	align-items: center;
}

.icon--left {
	margin-right: 4px;
}

.icon--right {
	margin-left: 4px;
}


/* Animation
/*------------------------------------------------------------*/
.animation {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
  
/* Dropdown - Form Field */
@keyframes field__slideDownIn {
    0% {
        transform: translateY(30px);
    }
    80% {
        transform: translateY(48px);
    }
    100% {
        transform: translateY(44px);
    }
}
  
.field__slideDownIn {
    animation-name: field__slideDownIn;
}


/* Fixed-Fluid Columns */
.columns {
	display: flex;
}

.columns > * {
	flex: 0 0 auto;
	width: 50%;
}

.columns .col-l {
	flex-grow: 1;
}

.columns .col-r {
	flex: 0 0 auto;
	display: none;
}

/* Link */
a:link, a:visited {
	font-weight: 600;
	color: var(--primary);
}

a:hover {
	color: var(--secondary);
}

/* Plain Text link with Arrow */
.text-link:link {
    font-size: 14px;
	display: inline-block;
}

.text-link .fas {
    transition: transform .3s ease-in-out;
}

.text-link:hover .fa-arrow-right {
    transform: translateX(4px);
}


/* Link Color */
.link-grey:link,
.link-grey:visited {
	color: #333;
}

.link-grey:hover {
	color: #888;
}

.link-lightgrey:link,
.link-lightgrey:visited {
	color: #666;
}

.link-lightgrey:hover {
	color: #888;
}


/* Icon Position */
.icon--left {
    margin-right: 4px;
}

.icon--right {
    margin-left: 4px;
}


/* Line Clamp */
.line-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;  
	overflow: hidden;
}

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


/* AD
/*------------------------------------------------------------*/
.adv-s {
	text-align: center;
	margin: 30px 0;
}

.adv-s .adv-l,
.adv-s .adv-r {
	display: inline-block;
	margin: 0 15px;
}

.col-r .adv {
	margin-bottom: 30px;
}

.col-r .adv:last-child {
	margin-bottom: 0;
}


/* Gradient Divider
/*------------------------------------------------------------*/
.gradient-divider {
	width: 100%;
	height: 4px;
	background: var(--gradient);
}


@media (min-width: 992px) {

}

@media (min-width: 1200px) {

}


@media (min-width: 1400px) {
	.container { width: 1320px; }
}