@import "all.min.css";  /*新版字型符號, 只需要css配字型webfonts*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap'); /*GoogleFonts 思源中文黑體*/


/*20200722*/


/*解決font-awesome圖示load不出來變方塊的問題*/
.fontawesome:before, 
.fontawesome:after {
	font-family: 'Font Awesome 5 Free'; /*少了它會有bug*/
	font-weight: 900; /*少了它會有bug*/
}

/*fancybox css*/
.fancybox-is-open .fancybox-bg {
    opacity: .95;
}

/* 取消新版chrome搞出來的黑框bug */
*{
	outline: none;
}


/* ==================================================
   modal
================================================== */
.modal-content {
    border:none;
    border-radius: 0;
}
.contents .modal-dialog {
	max-width:1100px;
	width:95%;
}
.contents .modal-header {
    padding:2rem 1.5rem 0;
	/*border-bottom:2px solid #000;*/
	border-bottom:none;
}
.contents .modal-header .modal-title {
	line-height: 1.25;
	margin-bottom:-0.15rem; 
}
.contents .modal-header .close {
	margin-top:-1.5rem; 
	padding: 0;
	font-size:30px;
}
.contents .close {
	padding: 0;
	font-size:30px;
}
.contents .modal-header .close {
	margin-top:-1.5rem; 
}
.contents .modal-body {
    padding:2rem 1.5rem 1.25rem;
}
.contents .modal-footer {
    border-top:none;
	padding-top:0;
}


@media (max-width: 767.98px) {  /*xs,sm手機直橫*/
	.contents .modal-body {
		padding:1rem 1.5rem 0.5rem;
	}
}

@media (min-width: 1200px) {  /* xl筆電桌機 */
	.contents .modal-header {
		padding-top:2.25rem;
	}
	.contents .modal-header .close {
		font-size:40px;
	}
	.contents .modal-header,
	.contents .modal-body,
	.contents .modal-footer {
		padding-left:3rem; 
		padding-right:3rem; 
	}
}



/* ==================================================
   carousel 輪播
================================================== */
.carousel {
	z-index:0;
}


/* ==================================================
   反設定css
================================================== */
body {
	max-width:1920px;
	xxxxpadding-top:90px; /*同navbar height*/
	margin:0 auto;
	overflow-x:hidden;
	animation: colorchange 15s both infinite;
}
body, p, dl, .form-control {
	font-family: 'Noto Sans TC', sans-serif; /*GoogleFonts 思源中文黑體*/
	font-size:15.5px;
	font-weight:300;
	line-height:1.45;
	color:#645a5a;/*粽灰色*/
	word-wrap:break-word; /*若一個單字過長，超過畫面的寬度，則將單字換行(不切斷單字)*/
}
.page404 {
	min-height:400px;
	/*height:90vh;*/
	height:calc(100vh - 215px);
	background-color:#232323;
	box-sizing: border-box;
	padding-top:4.5rem;
	border-bottom:#fff solid 2px;
}


h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-weight: normal;
	margin-bottom: 1rem;
	line-height: 1.25;
}
/*展演活動內頁標題*/
.h1, h1 {
	font-size:35px;
	letter-spacing:-0.5px; 
	font-weight:700;
	line-height: 1.2;
	color:#000;
}
h1.title-header {
	font-size:70px;
	letter-spacing:-0.5px; 
	font-weight:400;
	margin-top:0;
	xxxmargin-bottom: 1.5rem;
	display: inline-block;
    color:#279bc0;
    /*background: linear-gradient(to right,#f4da00 0%,#ff0099 100%);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
	text-transform: none;*/
}
h1.title-header.white {
	/*background:#fff;*/
	color:#fff;
}
h1.title-bg {
	font-size:85px;
	color:#fff;
	letter-spacing:-0.75px; 
	position: absolute;
	z-index:3; 
	text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000, 1px 1px 0 #000; /*文字外框*/
}

.h2, h2 { 
	font-size:30px;
	font-weight:200;
}
.h3, h3 {
	margin: 0 0 1.5rem;
	font-size:28px;
	font-weight:500;
	color:#000; 
}
.h4, h4 {
    font-size:24px;
}
.h5, h5 {
	font-size:20px;
	font-weight:700;
}
.h6, h6 {
	font-size:17.5px;
	font-weight:500;
}
footer {
	font-size:15px;
	color:#999; 
}


a {
	color: #fff;/
	text-decoration: none;
	word-wrap:break-word; /*若一個單字過長，超過畫面的寬度，則將單字換行(不切斷單字)*/
}
p {
	text-align: justify; /*文案齊頭尾*/
}
p a,
dl dd a {
	/*text-decoration: underline;*/
	text-decoration: none;
}

p a:hover,
a:hover {
	color:#ff9570 !important;
	text-decoration: none;
}
a.back {
	color: #ff0099; /*洋紅色*/
	font-size:80px;
	font-weight: bold;
	line-height:0.5;
	margin-top:-2.25rem; 
	margin-bottom:1.5rem;
	display: inline-block;
}
hr {
    border-top:4px solid #efefef;/*灰色*/
    clear: both;
	margin-top:2rem;
    margin-bottom:2rem;
}
hr.dark {
    border-top:1px solid #000;
    clear: both;
	margin-top:1rem;
    margin-bottom:1rem;
}


/*最後一個子元素*/
dl:last-child,
ul li:last-child,
ol li:last-child {
	margin-bottom:0;
}

.pt-4,
.py-4 {
    padding-top: 2rem !important;
}



/* ==================================================
   學經歷 info
================================================== */
dl.info dt,
dl.info dd {
	color: #fff;
	font-size:18px;
	font-weight:300;
	float: left;
	display: inline-block;
}
dl.info dt {
	width:200px;
}
dl.info dd {
	width: calc(100% - 200px);
}

@media (max-width: 767.98px) {  /*xs,sm手機直橫*/
	dl.info dt,
	dl.info dd {
		font-size:15.5px;
	}
	dl.info dt {
		width:150px;
	}
	dl.info dd {
		width: calc(100% - 150px);
	}
}	

/* ==================================================
   保持連繫 contact
================================================== */
dl.contact dt,
dl.contact dd {
	color: #fff;
	font-size:18px;
	font-weight:300;
	float: left;
	display: inline-block;
}
dl.contact dt {
	width:40px;
	text-align: center;
}
dl.contact dd {
	width: calc(100% - 40px);
}

@media (max-width: 767.98px) {  /*xs,sm手機直橫*/
	dl.contact dt,
	dl.contact dd {
		font-size:15.5px;
	}
}



/* ==================================================
   頁尾區域 footerArea
================================================== */
footer.footerArea {
	background-color:#232323;
	padding:2rem 2rem;
	overflow: hidden;
	position: relative;
}
footer.footerArea p {
	font-size:14px;
	color:#ccc; /*淺灰色*/
	margin-bottom:0; 
}
footer.footerArea a {
	color:#ffff69;
	text-decoration:none;
}
/*logo*/
.footerArea ul li.list-inline-item {
    font-size:14px;
	color:#ccc; /*淺灰色*/
	margin-bottom:0.5rem; 
}
.footerArea ul li.list-inline-item:not(:last-child) {
	margin-right: 1.5rem;
}
.footerArea a.goTop i {
	font-size:30px;
	transform: scale(1) translateY(5px);
	transition: all 0.5s cubic-bezier(0, .71, .4, 1);
}
.footerArea a.goTop:hover i {
	transform: scale(1.05) translateY(-5px);
}

img.footer-logo1,
img.footer-logo2 {
	width: auto;
	height:30px;
	margin:0 10px; 
}

/*footer sns*/
.footerArea ul.list-inline.sns {
	margin-top:-10px; 
}
.btn-social .fa-lg,
.btn-social i {
    backface-visibility: hidden;
    transform: scale(1.55);
    transition: all .25s;
}
.btn-social:hover .fa,
.btn-social:focus .fa,
.btn-social:hover i,
.btn-social:focus i {
    transform: scale(1.75);
}

@media (max-width: 767.98px) {  /*xs,sm手機直橫*/
	footer.footerArea {
		padding: 2rem 1rem;
	}
	footer.footerArea .float-sm-right {
		text-align: center;
		margin-bottom:2rem; 
	}
	img.footer-logo1,
	img.footer-logo2 {
		height:26px; 
		margin:0 5px; 
	}
}

@media (min-width:1200px) {
	.footerArea a.goTop:hover {
		transform: translateY(-5px);
	}
}


/* ==================================================
   自定css
================================================== */
#aa_particles {
    padding: 2em;
}


.home>section>.container {
	position:relative;
}

/*分類按鈕.pills01~3時*/
.nav-pills .nav-link {
    color: #343a40;
	border-radius:0;
    font-family: 'Noto Sans TC', sans-serif; /*GoogleFonts 思源中文黑體*/
	font-weight:700;
	font-size: 18px;
	padding:0.25rem 0.5rem; 
}
.nav-pills .nav-link.active,
.nav-pills .nav-link:hover,
.nav-pills .show>.nav-link {
    color: #343a40;
    background-color: #ffff69;
}


/*分類按鈕.tabBtn時*/
.tabBtn .btn { 
    font-family: 'Noto Sans TC', sans-serif; /*GoogleFonts 思源中文黑體*/
	font-weight:500;
}
.tabBtn .list-inline-item { /*排除最後一個子元素*/
    margin-right:0;
	margin-bottom:3px; /*手機版斷行時*/ 
}

/*分類按鈕.tabText時*/
.tabText { 
	text-align: center;
}
.tabText a { 
    font-family: 'Noto Sans TC', sans-serif; /*GoogleFonts 思源中文黑體*/
	font-weight:700;
	/*font-size:110%; */
	font-size: 17.5px;
	padding:0.25rem 0.5rem; 
}
.tabText a:hover,
.tabText a.active { 
	background-color: #ffff69;
}
.tabText .list-inline-item { /*排除最後一個子元素*/
    margin-right:.35rem;
	margin-bottom:.35rem; /*手機版斷行時*/ 
	animation: fadeB2T 0.5s ease-out both;
}
/*指定第幾個子元素*/
.tabText .list-inline-item:nth-child(1) { 
	animation-delay:1.5s; /*延遲多久後啟始動畫*/
}
.tabText .list-inline-item:nth-child(2) { 
	animation-delay:1.65s;
}
.tabText .list-inline-item:nth-child(3) { 
	animation-delay:1.8s;
}
.tabText .list-inline-item:nth-child(4) { 
	animation-delay:1.95s;
}
.tabText .list-inline-item:nth-child(5) { 
	animation-delay:2.1s;
}
.tabText .list-inline-item:nth-child(6) { 
	animation-delay:2.25s;
}
.tabText .list-inline-item:nth-child(7) { 
	animation-delay:2.4s;
}
.tabText .list-inline-item:nth-child(8) { 
	animation-delay:2.55s;
}

@media (max-width: 767.98px) {  /*xs,sm手機直橫*/
	.tabText.mb-4,
	.nav-pills.mb-4 {
		margin-bottom:1rem !important;
	}
	.tabText .list-inline-item,
	.nav-pills .nav-item {
		margin-right:0.1rem;
		margin-bottom:0.5rem;
	}
	/*分類按鈕.tabText時*/
	.tabText a,
	.nav-pills .nav-link { 
		font-weight:400;
		font-size: 16px;
		padding:0.15rem 0.25rem; 
	}
}

@media (min-width: 992px) {  /*lg平板橫式~xl*/
	.bg-yellow .tabText {
		text-align: left;
	}
}


/*上稿編輯區*/
.editor {
	margin-top:1rem;
	margin-bottom:3rem; 
}
.modal-content .editor {
	margin-bottom:0.5rem; 
}

 /*上稿圖*/
.editor img {
    max-width: 100%;
    height:auto !important;
	margin-top:1.5rem;
	margin-bottom:1.5rem;
}
.editor strong { /*外文也能共用*/
	font-family: 'Noto Sans TC', sans-serif; /*GoogleFonts 思源中文黑體*/
	font-weight: 700; 
}

@media (max-width: 767.98px) {  /*xs,sm手機直橫*/
	.editor {
		margin-top:0.5rem; 
	}
}

@media (min-width: 992px) {  /*lg平板橫式~xl*/
	.editor p {
		line-height:1.65 !important;
	}
}

.video {
	position: relative;
	display: block;
	height: 0;
	padding: 0;
	overflow: hidden;
	padding-bottom: 56.25%; /*影音16:9*/
	/*padding-bottom: 75%; 影音4:3*/
	margin-bottom:25px;
}
.video iframe {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/*sns*/
.sns ul li.list-inline-item:not(:last-child) {
    /*margin-right: .5rem;*/
	margin-right:0;
}
.fb_iframe_widget span {
	/*height:20px;*/
    height:25px !important; /*強制修改fb的bug*/
}


/*活動內頁-自由填寫重要訊息*/
.info {
	font-weight:700;
	color:#000; 
	font-size:18px;
}
/*側邊轉90度小字-展演活動 PROGRAM*/
.pageTitle { 
	position: absolute;
	/*top:300px;*/
	top:345px;
	right:-125px;
	font-family: 微軟正黑體, Arial;
	color:#888;
	line-height: 1;
	transform:rotate(90deg); /*轉橫*/
	width:350px; /*才不會有bug*/
	height:30px;
	overflow: hidden;
	/*background-color: aquamarine;*/
}
.pageTitle:before { 
	display:inline-block;
	content: "";
	width:150px;
	height:1px;
	background-color:#ccc;
	margin-bottom:5px; 
}

@media (min-width: 1200px) and (max-width: 1299.98px) { 
	/*側邊轉90度小字-展演活動 PROGRAM*/
	.pageTitle { 
		right:-140px;
	}
}


/*下載專區*/
.download-group {
	position: relative;
	z-index:9;
	display: block;
	width:100%;
	xxxxheight:100%;
	padding-bottom: 2em;
}
xxxx.download-group .title-header {
	margin-top:3rem;
	margin-bottom:0;
	margin-right:25px; 
}
.xxxdownload-group .row {
	width:100%; 
	margin-top:3.5rem;
}
.download-group .download-icon {
	border-top:#ffff69 solid 5px;
	padding:1.5rem 0; 
}
.download-group .download-icon i {
	font-size:70px;
	background: #ff0099;
    background: linear-gradient(to bottom right,#f4da00 30%,#ff0099 100%);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
	text-transform: none;
	display: inline-block;
}

@media (max-width: 767.98px) {  /*xs,sm手機直橫*/
	.download-group .row .col {
		padding-right:5px;
    	padding-left:5px;
	}
	.download-group .download-icon i {
		font-size:40px;
	}
	xxx.download-group .title-header {
		margin-top:2rem;
		margin-bottom:-2rem;
	}
}

@media (min-width: 576px) and (max-width: 767.98px) {  /*sm手機橫式*/
	.download-group .download-icon i {
		font-size:55px;
	}
}

@media (min-width: 1200px) {  /* xl筆電桌機 */
	.download-group .download-icon i {
		font-size:72px;
	}
}



/*場地交通*/
.location {
	overflow: hidden;
	color:#000; 
	font-weight: 500;
}
.location dl {
	display: flex;
	flex-wrap: wrap; /*支援拆行*/
	align-self: flex-start; /*div齊頭*/
}
.location dl dt {
	width:55px;
	text-align: center;
	padding-right:20px; 
}
.location dl dt i {
	font-size:23px; 
}
.location dl dd {
	width:calc(100% - 55px);
	font-size:17px;
}

@media (max-width: 767.98px) {  /*xs,sm手機直橫*/
	.location dl dd {
		font-size:15px;
	}
}



/* ==================================================
   cookies宣告
================================================== */
.alert.cookies {
	position: fixed;
	bottom: 0;
	z-index:3;
	width:100%; 
	padding:25px 15px;
	background-color:#fff; 
	margin-bottom:0;
	border-radius:0;
	box-shadow:none;
	box-shadow: 0 0 10px #666;
	animation: inUP 3s cubic-bezier(.36, 4, 0, 1); /*動畫inUP*/
	text-align: center;
}
.alert.cookies .btn {
	margin-left:10px; 
}

@media (min-width:768px) and (max-width:991px) {  /*sm*/
	.alert.cookies {
		line-height:1; 
	}
}


@media (max-width: 767px) {  /*xs*/
	.alert.cookies {
		display:block;
		padding:40px 20px 30px;
	}
	.alert.cookies .btn {
		display:block;
		margin-left:0; 
		margin-top:10px; 
	}
}


/* ==================================================
   btn按鈕
================================================== */
@media (max-width: 767.98px) {  /*xs,sm手機直橫*/
	.btnGroup .a {
		padding-right:5px;
	}
	.btnGroup .b {
		padding-left:5px;
	}
}


/*按鈕*/
.btn {
    padding:.5rem 1.25rem;
    font-size:16px;
	font-weight: bold;
	border-radius: 0;
	text-decoration: none !important;
}


/*空心黑框按鈕*/
.btn-outline-dark {
	color:#000;
	border: 2px solid #000;
}
.btn-outline-dark:hover {
  	color: #fff;
	background-color:#000;
    border-color:#000;
}
.btn-outline-dark:focus, 
.btn-outline-dark.focus {
	box-shadow:none;
}
.btn-outline-dark.disabled, 
.btn-outline-dark:disabled {
  	background-color: transparent;
}
.btn-outline-dark:not(:disabled):not(.disabled):active, 
.btn-outline-dark:not(:disabled):not(.disabled).active,
.show > .btn-outline-dark.dropdown-toggle {
  	color: #fff;
  	background-color:#000;
    border-color:#000;
}
.btn-outline-dark:not(:disabled):not(.disabled):active:focus, 
.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-dark.dropdown-toggle:focus {
	/*box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);*/
	color: #fff;
	box-shadow:none;
}


/*洋紅色按鈕.btn-danger*/
.btn-danger {
    color: #fff !important;
    /*background-color: #d73741;
    border-color: #d73741;*/
	background-color:#ff0099; /*洋紅色*/
	border-color:#ff0099; /*洋紅色*/
}
.btn-danger:hover {
  	background-color: #dc008c;
    border-color: #dc008c;
}
.btn-danger:focus, 
.btn-danger.focus {
  	/*box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);*/
	box-shadow:none;
}
.btn-danger.disabled, 
.btn-danger:disabled {
	background-color:#ff0099; /*洋紅色*/
	border-color:#ff0099; /*洋紅色*/
}


/*互動式3D旋轉*/
.btn-3D {
	display: inline-flex;
	width: 100%;
}
.btn-3D > div {
	position: relative;
	width: 100%;
	height: 60px;
	perspective: 1000px; /*透視*/
}
.btn-3D > div > a {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-size:20px;
	font-weight:300;
	text-align: center;
	position: absolute;
	transform-style: preserve-3d;
	transform: translateZ(-30px);  /*translate位移*/
	transition: transform 0.25s;
}
.btn-3D > div > a::before,
.btn-3D > div > a::after {
	justify-content: center;
	align-items: center;
	margin: 0;
	width: 100%;
	height:60px;
	position: absolute;
	box-sizing: border-box;
	display: flex;
	/*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);*/
	font-weight: bold;
}
.btn-3D > div > a::before {
	background: #ffff69;
	color: #000;
	content: attr(title); /*顯示title*/
	transform: rotateY(0deg) translateZ(30px);
}
.btn-3D > div > a::after {
	background: #ff9570;
	color: #fff;
	content: attr(subtitle);  /*顯示subtitle*/
	transform: rotateX(-90deg) translateZ(30px);
}

@media (min-width: 1200px) {  /* xl筆電桌機 */
	.btn-3D > div > a:hover, .btn-3D > div > a.hover {
		transform: translateZ(-30px) rotateX(90deg);
	}
}

@media (min-width: 1600px) { 
	.btn-3D > div > a {
		font-size:20px;
		font-weight:700;
	}
}


/*hack for IE 11, 移除不被支援的透視*/
@media all and (-ms-high-contrast:none) {
	 .btn-3D > div > a,   ::-ms-backdrop, .btn-3D > div > a,  .btn-3D > div > a::before,
	 ::-ms-backdrop,
	 .btn-3D > div > a::before,
	 .btn-3D > div > a::after,
	 ::-ms-backdrop,
	 .btn-3D > div > a::after,
	 .btn-3D > div > a:hover,
	 ::-ms-backdrop,
	 .btn-3D > div > a:hover {
		 transform: none;
		}
	 .btn-3D > div > a::after,
	 ::-ms-backdrop,
	 .btn-3D > div > a::after,
	 .btn-3D > div > a:hover::before,
	 ::-ms-backdrop,
	 .btn-3D > div > a:hover::before {
		 display:none;
		 text-align:center;
		}
	 .btn-3D > div > a:hover::after,
	 ::-ms-backdrop,
	 .btn-3D > div > a:hover::after {
		 display: flex;
		 background: #cd2d2d;
		 background-image: none;
		}
}



/* ==================================================
   effect 效果
================================================== */
@media (min-width: 1200px) {  /* xl筆電桌機 */
	/*位移效果-X軸往右移動*/
	.effect-moveR {
		transition: transform 0.35s ease-out;
		display: inline-block; /* 文章列表a連結需要 */
	}
	.effect-moveR:hover {
		transform: translateX(10px);  /*tab頁籤使用*/
	}

	/*位移效果-X軸往右移動*/
	.effect-moveL {
		transition: transform 0.35s ease-out;
		display: inline-block; /* 文章列表a連結需要 */
	}
	.effect-moveL:hover {
		transform: translateX(-30%);  /*back按鈕使用*/
	}
	
	/*位移效果-y軸往下移動*/
	.effect-moveT {
		transition: transform 0.35s ease-out;
		display: inline-block; /* 文章列表a連結需要 */
	}
	.effect-moveT:focus,
	.effect-moveT:hover {
		transform: translateY(-6px);  /*translate位移*/
	}
	
	/*位移效果-y軸往下移動*/
	.effect-moveB {
		transition: transform 0.35s ease-out;
		display: inline-block; /* 文章列表a連結需要 */
	}
	.effect-moveB:focus,
	.effect-moveB:hover {
		transform: translateY(6px);  /*translate位移*/
	}
}



/* ==================================================
   地圖 google map
================================================== */
/*如果使用iframe時*/
.map iframe {
	width: 100%;
	height:500px;
	border:0;
	border-width: 0px;
	position:relative;
	z-index:9;
}

@media (max-width: 767.98px) {  /*xs,sm手機直橫*/
	.map iframe {
		height:60vh;
	}
}



/* ==================================================
   圖文列表區
================================================== */

/*圖上文下熱門活動*/
.spList {
	margin-bottom:1.75rem;
	overflow: visible; /*over時陰影才不會有bug*/
}
.spList hgroup {
    padding:10px 0 0;
	padding-top:13px; 
}
.spList hgroup h5 {
	margin-bottom:0.45rem; 
}
.spList a,
.spList a:hover {
	display: block;
	color: #000;
}
.spPic {
    position: relative;
    overflow: hidden;
}
.spPic mark {
    position: absolute;
    /*padding:7px 13px 0 0;*/
	padding:7px 13px;
    bottom:0;
	z-index:1;
	background:#fff;
	font-family: 'Noto Sans TC', sans-serif; /*GoogleFonts 思源中文黑體*/
	font-size:15px;
}
.spList footer {
	font-family: 'Noto Sans TC', sans-serif; /*GoogleFonts 思源中文黑體*/
	font-weight:500;
}


@media (max-width: 767.98px) {  /*xs,sm手機直橫*/
	.spList hgroup {
		padding-top:8px;
	}
	.spList .spPic mark {
		font-size:14px;
	}
}

@media (min-width: 1200px) {  /*xl筆電桌機*/
	.spList a{
		transition: all 0.35s ease-in-out;
	}
	.spList a:hover {
		transform:translateY(-5%); 
	}
	.spList hgroup {
		padding:10px;
	}
	.spList .spPic mark {
		/*padding:9px 15px 8px 10px;*/
		padding:9px 15px;
	}
}



/* ==================================================
   色系
================================================== */
.white,
.white a {
	color:#fff !important;
}
.black {
	color:#333 !important;
}
.mainstyle {
	color: #ff9570 !important;
}


/*背景色*/
.bg-yellow {
    background-color:#faf7c3 !important;
	background: linear-gradient(to top right, #faf7c3 60%, #ffff69 100%); /*斜角漸層*/
	overflow: hidden;
}
/*更多精采活動*/
.bg-yellow .spPic mark {
	background:#faf7c3;
}
.bg-yellow .spList footer {
    color: #b18223;
}


 /* ==================================================
   捲軸觸發區塊效果-搭配scrollTrigger.js
================================================== */
/*動態分隔線*/
.hrline {
	width:0; 
	height:6px;
	background-color:#000;
	display: block;
	transition: all 1s ease-in-out;
}
.hrline.highlight {
	width:100%; 
}
.hrline.xs-sm {
	width:100%;
	height:6px;
	background-color:#000;
	display: block;
}


/*關於*/
.about {
	background:#fff;
	/*background:linear-gradient(to bottom right,#fff 30%,#fff 100%);*/
	transition: all 1s ease-in;
}
.about h2 {
	color:#000;
	font-weight:300;
}
.about.highlight {
	background-color:#279bc0;
	/*background:#1f86d5;
	background:linear-gradient(to bottom right,#1f86d5 30%,#1ac29c 100%);*/
}
.about.highlight h1.title-header {
	/*background:#fff;*/
	color:#fff;
}
.about.highlight h2,
.about.highlight p {
	color:#fff;
}

/*關於-video*/
.about .video {
	transform:rotate(-8deg) translateX(-150%) translateY(0%);
	transition:all 1s ease-in-out;
}
.about .video.highlight {
	transform:rotate(0deg) translateX(0%) translateY(0%);
}



/*往上滑出場-更多精采活動*/
.scrollIN {
	opacity: 0;
	transform:translateY(15%);
	transition:all 0.75s ease-in-out;
}
.scrollIN.highlight {
	opacity: 1; 
	transform:translateY(0);
}

/*下載icon*/
.scrollIN .download-group .row .col {
	opacity: 0;
	transform:translateY(30%);
	transition:all 0.5s ease-in-out;
}
.scrollIN .download-group .row .col:nth-child(1) {
	transition-delay:0.5s;
}
.scrollIN .download-group .row .col:nth-child(2) {
	transition-delay:0.75s;
}
.scrollIN .download-group .row .col:nth-child(3) {
	transition-delay:1s;
}
.scrollIN.highlight .download-group .row .col {
	opacity: 1; 
	transform:translateY(0%);
}



/*往上滑出場-更多精采活動*/
.locationPIC {
	transform:rotate(0deg) translateX(200%) translateY(5%);
	transition:all 1.5s ease-in-out;
	width:450px;
	height: auto;
	position:absolute;
	z-index:1;
	top:4.5%;
	right:3.5%; 
}
.locationPIC.highlight {
	transform:rotate(-8deg) translateX(0%) translateY(0%);
}

/*往上滑出場-VENUE*/
.location h1.title-bg {
	top:8%;
	right:32%; 
	transform:scale(2) translateY(150%);
	transition:all 1s ease-in-out;
	opacity:0; 
}
.location h1.title-bg.highlight {
	opacity:.5; 
	transform:scale(1) translateY(0%);
}
.location .btn-outline-dark {
	min-width:125px;
	box-sizing: border-box;
}

@media (max-width: 767.98px) {  /*xs,sm手機直橫*/
	.locationPIC {
		width:100%;
		position:inherit; 
	}
	.locationPIC.highlight {
		transform:rotate(-8deg) translateX(10%) translateY(0%);
	}
	.location h1.title-bg {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1199.98px) {  /* md平板直式~lg平板橫式 */
	.locationPIC {
		width:330px;
		top:8%;
		right:-10%; 
	}
	.location h1.title-bg {
		top:5%;
		right:0%; 
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {  /*lg平板橫式*/
	.locationPIC {
		width:400px;
		right:6%; 
	}
}

@media (min-width: 1200px) {  /* xl筆電桌機 */
	.location .btn-outline-dark {
		position: absolute;
		top:21%;
		right:35%;
		transform:translateX(200%);
		transition:all 1s ease-in-out;
		opacity:0;
	}
	.location .btn-outline-dark.map3D {
		top:27%;
	}
	.location .btn-outline-dark.highlight {
		transform:translateX(-95%);
		opacity:1;
	}
}

@media (min-width: 1600px) {  
	.location h1.title-bg {
		right:38%;  
	}
	.locationPIC {
		width:500px;
		top:1%;
	}
	.location .btn-outline-dark {
		right:39%;
	}
	.location .btn-outline-dark.highlight {
		transform:translateX(-112%);
	}
}



/* ==================================================
   AD輪播區-推薦物業
================================================== */
xxx.alsobuy { 
	padding-top:2.75em; 
	padding-bottom:5em; 
	position: relative; /*呼應左右半透明遮罩*/
}
xxx.alsobuy .maskL { 
	left:0;
	background:linear-gradient(to right, rgba(34,34,34,1.0), rgba(34,34,34,0.0));
}
xxx.alsobuy .maskR { 
	right:0;
	background:linear-gradient(to right, rgba(34,34,34,0.0), rgba(34,34,34,1.0));
}

xxx.alsobuy h3 { 
	border-bottom:1px solid #999;
	padding-bottom:0.25em;
	margin-bottom:30px; 
	display:inline-block;
}
.recommend { 
	position:relative;
	overflow:hidden;
	margin: 0;
	list-style: none;
}
.recommend li { 
	xxxxmargin:0 5px;/*如果居中放大,則這可以取消*/
	/*transform:scale(0.88); 因為有遮罩, 如果要居中放大,則要反過來這邊縮小0.95,*/
	transition:transform 0.25s;
}

@media (max-width: 767.98px) {  /*xs,sm手機直橫*/
	.recommend { 
		margin-bottom:1.25em; 
	}
}


/*由js判別相呼應*/
.recommend li.slick-center{
	/*transform:scale(1); 如果要居中放大,則要反過來這邊對應成1*/
}
.alsobuy .recommend .slick-dots {
	bottom:0;
}
.alsobuy .recommend .slick-dots li {
	color: #fff;
	margin:0 2px; 
}
/* Arrows */
.alsobuy .recommend .slick-prev,
.alsobuy .recommend .slick-next {
	display: none !important;
}	
.recommend li {
	/*transform:scale(1); 如果要居中放大,則要反過來這邊對應成1*/
	width:100%;
	xxxxbackground-color: brown;
}	
xxxx.recommend img { 
	width:auto !important;
	height:200px;
	transition:transform 1.0s;   /*數字愈小速度愈快*/
}
xxxx.recommend p { 
	margin-top:10px;
	color:#999;
	font-size:15px; 
	text-align:center;
}
xxxx.recommend p strong { 
	color:#ffd77d;/*錢用亮金色*/
	font-size:16.5px; 
}
.bkBarFull {
    padding: 20% 0;
	font-size:20px; 
    color: #FFF;
    text-align: center;
    background-color: rgba(0,0,0, 0.25);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
	border-left:#ff9570 solid 2px;
}

@media (max-width: 767.98px) {  /*xs,sm手機直橫*/
	.bkBarFull {
		padding: 20% 0;
		font-size:18px; 
	}
}

xxxx.recommend a .bkBarArea .bkBarFull { 
	xxxbackground:none;
	xxxbackground-color: aqua;
	text-align: center;
	background-color: brown;
	xxxbackground:linear-gradient(to top, rgba(34,34,34,0.75), rgba(34,34,34,0.0), rgba(34,34,34,0.0));
}
xxxx.recommend a:hover .bkBarArea .bkBarFull { 
	display:none;
}
xxxx.recommend a:hover .bkBarArea img { 
	transform:scale(1.05);   /*放大倍數*/
}




 /* ==================================================
   動畫 animation
================================================== */
/*動畫colorchange*/
@keyframes colorchange{ /*@keyframes對應動畫名colorchange*/
	10% {
		background-color: #111;
	}
	35% {
		background-color: #282f69;
	}
	60% {
		background-color: #451c62;
	}
	80% {
		background-color: #00585f;
	}
	100% {
		background-color: #111;
	}
}


/* 套用樣式 */
.fadeIn {
	animation:fadeIn 1.5s both ease-in-out;
}
.fadeT2B { 
	animation:fadeT2B 0.65s both ease-out;
}
.fadeB2T {
	animation:fadeB2T 0.65s both ease-out;
}
.fadeR2L {
	animation:fadeR2L 0.65s both ease-out;
}
.fadeL2R {
	animation:fadeL2R 0.65s both ease-out;
}

.delay1 {
	animation-delay:0.25s; /*延遲多久後啟始動畫*/
}
.delay2 {
	animation-delay:0.5s; /*延遲多久後啟始動畫*/
}


@keyframes fadeIn {
  0% {
	transform: scale(1.2);
  }
  100% {
	transform:scale(1);
  }
}

/*主選單專用*/
@keyframes fadeT2B {
  0% {
    opacity:0;
	transform:translateY(-80px);
  }
  100% {
    opacity:1;
	transform:translateY(0%);
  }
}

@keyframes fadeB2T {
  0% {
    opacity:0;
	transform:translateY(30%);
  }
  100% {
    opacity:1;
	transform:translateY(0%);
  }
}

@keyframes fadeL2R {
  0% {
    opacity:0;
	transform:translateX(-25%);
  }
  100% {
    opacity:1;
	transform:translateX(0%);
  }
}

@keyframes fadeR2L {
  0% {
    opacity:0;
	transform:translateX(25%);
  }
  100% {
    opacity:1;
	transform:translateX(0%);
  }
}