/*2020.09.28*/


/* ==================================================
   反抵制css
================================================== */
/*首頁kv的箭頭*/
.carousel-control-next,
.carousel-control-prev {
	width: 7%;
}
/*首頁kv的數量*/
.carousel .carousel-indicators li:hover {
	cursor: pointer;
}


/* ==================================================
   首頁kv
================================================== */
/*影音時的paly按鈕*/
.homekv .carousel .carousel-item a .videoBtn {
	position: absolute;
	left:0;
	top:42.5%;
	right:0;
	text-align: center;
	z-index:1;
}
.homekv .carousel .carousel-item a .videoBtn i {
	font-size:100px;
	color:#fff;
	transition: .25s ease-in-out;
	text-shadow:0.05em 0.05em 0.5em rgba(0, 0, 0, 0.15);
}
.homekv .carousel .carousel-item a:hover .videoBtn i {
	color: #000;
}


@media (max-width: 489.98px) {
	.homekv .carousel .carousel-item a .videoBtn {
		top:37%;
	}
	.homekv .carousel .carousel-item a .videoBtn i {
		font-size:55px;
	}
}

@media (min-width: 490px) and (max-width: 1199.98px) {  /* md平板直式~lg平板橫式 */
	.homekv .carousel .carousel-item a .videoBtn {
		top:39.5%;
	}
	.homekv .carousel .carousel-item a .videoBtn i {
		font-size:90px;
	}
	.homeSP.pt-5 {
		padding-top:25px !important;
	}
}

@media (min-width: 1200px) {  /*xl筆電桌機*/
	.homekv .col-lg-8 {
		flex: 0 0 65.75%;
		max-width: 65.75%;
	}
	.homekv .col-lg-4 {
		flex: 0 0 34.25%;
		max-width: 34.25%;
	}
	.homeSP.pt-5 {
		padding-top:20px !important;
	}
}

@media (min-width: 1600px) {  /*xl筆電桌機*/
	.homekv .col-lg-8 {
		flex: 0 0 61.75%;
		max-width: 61.75%;
	}
	.homekv .col-lg-4 {
		flex: 0 0 38.25%;
		max-width: 38.25%;
	}
	.homeSP.pt-5 {
		padding-top:30px !important;
	}
}

/************** 八角 KV start ****************/
.octagonKV,
.octagonKV ul li {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:0;
}

.octagonKV {
	visibility:hidden;
}
.octagonKV.active {
	visibility:visible;
}

.octagonKV ul {
	position:relative;
	height:100%;
	list-style:none;
	margin:0;
	padding:0;
	z-index:0;
}
.octagonKV ul li{
	cursor:pointer;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	opacity:0;
	transition:opacity 0.75s; /*首頁八角kv進場淡入秒數,愈少愈快*/
}
.octagonKV ul li:nth-child(1){ background-image:url(../images/octagonKV1.jpg);}
.octagonKV ul li:nth-child(2){ background-image:url(../images/octagonKV2.jpg);}
.octagonKV ul li:nth-child(3){ background-image:url(../images/octagonKV3.jpg);}
.octagonKV ul li:nth-child(4){ background-image:url(../images/octagonKV4.jpg);}
.octagonKV ul li:nth-child(5){ background-image:url(../images/octagonKV5.jpg);}
.octagonKV ul li:nth-child(6){ background-image:url(../images/octagonKV6.jpg);}
.octagonKV ul li:nth-child(7){ background-image:url(../images/octagonKV7.jpg);}
.octagonKV ul li:nth-child(8){ background-image:url(../images/octagonKV8.jpg);}
.octagonKV ul li:nth-child(9){ background-image:url(../images/octagonKV0.jpg);}
.octagonKV ul li.active{
	opacity:1;
	z-index:1;
}
.octagonKV ul li .txt {
	position:absolute;
	right:0;
	top:0;
	margin:5% 5% 0 5%;
	/*font-family: 'Noto Serif TC', serif; GoogleFonts 思源中文宋體*/
	color:#FFF;
	/*font-weight: 400;
	font-size:4.2vw;*/
	font-size:3.5rem;
	letter-spacing:-0.5px;
	line-height:1em;
	text-shadow:0.05em 0.05em 0.5em rgba(0, 0, 0, 0.15);
}

.octagonKV ul li .txt em {
	font-style:normal;
	font-family: 'Noto Sans TC', sans-serif; /*GoogleFonts 思源中文黑體*/
	font-weight:500;
	display:block;
	text-align: right;
}
.octagonKV ul li .txt span {
	position:absolute;
	right:-0.15em;
	bottom:-0.5em;
	display:block;
	width:0.36em;
	border:0.18em solid;
	border-top-color:transparent;
	border-right-color:transparent;
	color:#f33a46;
}
.octagonKV ul li .txt span:before{
	position:absolute;
	content:"";
	display:block;
	right:0.18em;
	bottom:-0.18em;
	width:1.75em;
	border-bottom:0.18em solid; /*箭頭厚度*/
	color:#f33a46;
}
.octagonKV ul li.active .txt em{
	animation:octagonKVTxt1 1s ease-out both;
}
.octagonKV ul li.active .txt span{
	animation:octagonKVTxt2 0.8s ease-out 0.2s both;
}

@keyframes octagonKVTxt1{
	from{
		opacity:0;
		transform:translateX(-50%);
	}
}

@keyframes octagonKVTxt2{
	from{
		opacity:0;
		transform:translateX(-1200%);
	}
}


/*八角主題kv右上的x*/
.octagonKV .closeBtn{
	position:absolute;
	right:0;
	top:0;
	margin:-1% -1% 0 0;
	cursor:pointer;
	z-index:1;
	font-size:25px;
	color:#fff;
	width:60px;
	height:60px;
	display:flex;
	justify-content:center;
	align-items:center;
	box-sizing: border-box;
}
.octagonKV .closeBtn:hover{
	/*background:#942532;暗紅底*/
}


@media (max-width: 767.98px) {  /*xs,sm手機直橫*/
	.octagonKV ul li .txt {
		font-size:23px;
		margin:6% 5% 0 5%;
		letter-spacing:0;
	}
	.octagonKV ul li .txt span:before {
		border-bottom: 0.26em solid;
	}
}

@media (min-width: 768px) and (max-width: 1199.98px) {  /* md平板直式~lg平板橫式 */
	.octagonKV ul li .txt {
		margin:5% 5% 0 5%;
		font-size:2.5rem;
	}
}

@media (min-width: 1600px) {
	.octagonKV ul li .txt {
		font-size:4.25rem;
	}
}

/************** 八角 KV end ****************/



/* ==================================================
   八角主題選項
================================================== */
.octagonArea {
	position:relative; /*rwd底圖使用*/
}

/************** 八角選單 start ****************/
.octagonGroup {
	position:relative;
	z-index:0;
	width:23vw; /*八角選單外形尺寸*/
}

.octagonGroup ul,
.octagonGroup ul li,
.octagonGroup ul li:before{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:0;
}
.octagonGroup ul{
	margin:0;
	padding:0;
	list-style:none;
}
.octagonGroup ul li,
.octagonGroup ul li:before{
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}
.octagonGroup ul li{
	transform:scale(0.9);
	opacity:0;
}
.octagonGroup ul li:before{
	content:"";
	display:block;
	opacity:0;
	transition:opacity 0.2s;
}
.octagonGroup ul li.active{
	z-index:1;
}
.octagonGroup ul li.active:before{
	opacity:1;
}
.octagonGroup ul li:nth-child(1){ background-image:url(../images/nav-octagon_1.png);}
.octagonGroup ul li:nth-child(1):before{ background-image:url(../images/nav-octagon_1o.png);}
.octagonGroup ul li:nth-child(2){ background-image:url(../images/nav-octagon_2.png);}
.octagonGroup ul li:nth-child(2):before{ background-image:url(../images/nav-octagon_2o.png);}
.octagonGroup ul li:nth-child(3){ background-image:url(../images/nav-octagon_3.png);}
.octagonGroup ul li:nth-child(3):before{ background-image:url(../images/nav-octagon_3o.png);}
.octagonGroup ul li:nth-child(4){ background-image:url(../images/nav-octagon_4.png);}
.octagonGroup ul li:nth-child(4):before{ background-image:url(../images/nav-octagon_4o.png);}
.octagonGroup ul li:nth-child(5){ background-image:url(../images/nav-octagon_5.png);}
.octagonGroup ul li:nth-child(5):before{ background-image:url(../images/nav-octagon_5o.png);}
.octagonGroup ul li:nth-child(6){ background-image:url(../images/nav-octagon_6.png);}
.octagonGroup ul li:nth-child(6):before{ background-image:url(../images/nav-octagon_6o.png);}
.octagonGroup ul li:nth-child(7){ background-image:url(../images/nav-octagon_7.png);}
.octagonGroup ul li:nth-child(7):before{ background-image:url(../images/nav-octagon_7o.png);}
.octagonGroup ul li:nth-child(8){ background-image:url(../images/nav-octagon_8.png);}
.octagonGroup ul li:nth-child(8):before{ background-image:url(../images/nav-octagon_8o.png);}

.octagonGroup img{
	position:relative;
	width:100%;
	display:block;
	z-index:1;
}

.octagonGroup a{
	position:absolute;
	display: block;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	width:25.16%;
	aspect-ratio:1;
	background: url(../images/nav-octagon_0.png) no-repeat center/contain;
	opacity: 0;
	z-index: 1;
}
.octagonGroup a:hover,
.octagonGroup a.active{
	background-image: url(../images/nav-octagon_0o.png);
}

/*八角互動的x*/
.octagonGroup .closeBtn {
	position:absolute;
	/*left:50%;
	top:49.75%; 如果是符號x位在八角中心點*/
	right:-5%;
	bottom:-3%;
	transform:translate(-50%, -50%);
	cursor:pointer;
	z-index:3;
	color: #d73741;/*主色紅*/
	font-family:Arial;
	/*font-size:35px; 如果是符號x*/
	font-size:17.5px; /*如果是文字close*/
	font-weight:normal;
	/*color:#fff; */
	/*background:#942532;暗紅底*/
	/*width:10%;
	height:10%;*/
	border-radius:50%;
	display:none;
	justify-content:center;
	align-items:center;
}
.octagonGroup.active .closeBtn {
	display:flex;
}
.octagonGroup .closeBtn:hover {
	/*background:#d73741;主色紅*/
	color: #f89882;/*粉嫩色*/
}


@media (max-width: 767.98px) {  /*xs,sm手機直橫*/
	.octagonArea {
		background-image: url(../images/bgPattern01.png);/*首頁建築線稿*/
		background-repeat: no-repeat;
		/*background-size:cover;*/
		background-size:135%;
		background-position:100% 0%; /*左右 上下*/
		margin-bottom:-15px;
	}
	.octagon {
		padding-left:20%;
		padding-top:18px;
	}
	.octagonGroup {
		width:60vw; /*八角選單外形尺寸*/
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {  /*md平板直式*/
	.octagonArea {
		background-image: url(../images/bgPattern01.png);/*首頁建築線稿*/
		background-repeat: no-repeat;
		/*background-size:cover;*/
		background-size:105%;
		background-position:100% 10%; /*左右 上下*/
	}
	.octagon {
		width:50vw;
		height: auto;
		float:right;
		padding-top:2rem;
		padding-left:1rem;
	}
	.octagonGroup {
		width:40vw; /*八角選單外形尺寸*/
	}
}

@media (min-width: 992px) {  /*lg平板橫式,xl筆電桌機*/
	.octagon {
		position: absolute;
		/*bottom: 2em;*/
		bottom:0em;
		left:18%;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {  /*lg平板橫式*/
	.octagon {
		left:13%;
	}
	.octagonGroup {
		width:25vw; /*八角選單外形尺寸*/
	}
}

@media (max-width: 1199.98px) {  /*xs,sm,md,lg平板橫式*/
	/*八角互動的x*/
	.octagonGroup .closeBtn {
		font-size:13px; /*如果是文字close*/
	}
}

@media (min-width: 1600px) {  /*xl筆電桌機*/
	.octagon {
		left:19.5%;
	}
}

@media (min-width: 2200px) {
	.octagonGroup {
		width:17vw; /*八角選單外形尺寸*/
	}
}

/************** 八角選單 end ****************/



/************** 置頂緊急通知文案 start ****************/
.attBlock {
	animation: fadeR2L 1.75s ease-out both; /*動畫名是fadeR2L*/
	/* animation-delay:2.5s; 延遲播放時間不能用, 因為某次close後出現會太慢 */
}
.attBlock.hide {
	display:none;
}
/*緊急通知*/
.attBlock .attTitle {
	margin:0 0 5px 0;
	color:#d73741;/*主色紅*/
	display: inline-block;
	font-size:17.5px;
	font-weight:400;
}
.attBlock ul.att {
	margin-left:-15px;
}
.attBlock ul.att li {
	line-height:1.35;
	margin-bottom:3px;
}
.attBlock ul.att li a {
	display: inline-block; /* a標籤需要,若用block ie會有bug */
	width:100%;
	overflow:hidden;  /* 限寬超過遮蔽 */
	white-space:nowrap; /* 不折行 */
	text-overflow:ellipsis;  /* 限單行並搭配不折行,字尾會斷乾淨,字不會被削到,超出的就省略... */
}

@media (min-width: 1200px) and (max-width: 1499.98px) {
	.attBlock ul.att li:nth-child(3) {
		display: none;
	}
}

/************** 置頂文案緊急通知 end ****************/



/************** 簡介文案 start ****************/
.homemsg {
	font-size:16px;
	line-height:1.65;
	font-family: 'Noto Sans TC', sans-serif; /*GoogleFonts 思源中文黑體*/
	/*margin-top:10%;*/
	margin-top:10%;
	padding:0 13%;
	overflow:hidden;
}
.homemsg p{
	/*font-size:inherit;*/
	font-size:16px;
	line-height:1.6;
}

.introBlock {
	/*margin-top:2em;*/
	font-family: 'Noto Sans TC', sans-serif; /*GoogleFonts 思源中文黑體*/
}

.defaultTxt.hide {
	display:none;
}

.introBlock ul{
	list-style:none;
	margin:0;
	padding:0;
}
.introBlock ul li{
	display:none;
	z-index:1;
}
.introBlock ul li a {
	color: #d73741;
	text-decoration: underline;
}
.introBlock ul li a:hover {
	color: #f89882;/*粉嫩色*/
	text-decoration: none;
}
.introBlock ul li.active{
	animation:introTxtIn 1s ease-out both;
	display:block;
}
@keyframes introTxtIn{
	from{
		opacity:0;
		transform:translateX(20%);
	}
}


@media (max-width: 767.98px) {  /*xs,sm手機直橫*/
	.homemsg {
		margin-top:10px;
		font-size:14.5px;
		line-height: 1.4;
		padding: 0 20px;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {  /*md平板直式*/
	.homemsg {
		margin-top:35px;
		line-height:1.85;
		padding:2.5rem;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {  /*lg平板橫式*/
	.homemsg {
		margin-top:0;
		font-size: 15px;
		line-height: 1.5;
	}
}

@media (min-width: 1800px) {  /*xl筆電桌機*/
	.homemsg {
		margin-top:13%;
		padding:0 18%;
	}
}


/************** 簡介文案 end ****************/



/* ==================================================
   首頁下半部各點分佈：附近逛逛
================================================== */
.siteArea {
	background-image: url(../images/siteArea.png);
	background-repeat: no-repeat;
	background-position:50% 50%; /*左右 上下*/
	background-size:cover;
	padding:3rem 0;
	margin-top:1rem;
}
.siteArea .container .row .siteBtn {
	position: relative;
	display: block;
	height: auto;
}
.siteArea h2 {
	font-weight:900;
}
.siteArea .videoBtn h5 {
	margin-bottom:0;
}

/*臺北市電影主題公園*/
.siteArea .parkBtn {
	position: absolute;
	top:0%;
	right:65%;
}
/*北廣場場地租借*/
.siteArea .rentBtn {
	position: absolute;
	top:0;
	right:0;
}
/*西門紅樓預約導覽*/
.siteArea .tourBtn {
	position: absolute;
	top:68%;
	right:44%;
}
/*西門紅樓創意市集*/
.siteArea .marketBtn {
	position: absolute;
	top:12%;
	right:26%;
	width:150px;
	height: auto;
}
/*東西好文創市集*/
.siteArea .goodsmarketBtn {
	position: absolute;
	bottom:3%;
	right:0;
	width:165px;
	height: auto;
}
/*剝皮寮歷史街區*/
.siteArea .bopiliaoBtn {
	position: absolute;
	bottom:-5%;
	right:3%;
	width:125px;
	height: auto;
}

@media (max-width: 767.98px) {  /*xs,sm手機直橫*/
	.siteArea {
		padding: 2rem 0;
	}
	.siteArea .container .row .siteBtn {
		height:340px;
	}
	/*臺北市電影主題公園*/
	.siteArea .parkBtn {
		top:5%;
		right:auto;
		left:0%;
	}
	/*西門紅樓創意市集*/
	.siteArea .marketBtn {
		top:43%;
		right:35%;
		width:120px;
	}
	/*西門紅樓預約導覽*/
	.siteArea .tourBtn {
		top:auto;
		bottom:7%;
		right:auto;
		left:2%;
	}
	/*東西好文創市集*/
	.siteArea .goodsmarketBtn {
		bottom:3%;
		right:0;
		width:140px;
	}
	/*剝皮寮歷史街區*/
	.siteArea .bopiliaoBtn {
		bottom:3%;
		right:0;
		width:100px;
	}
	/*北廣場場地租借*/
	.siteArea .rentBtn {
		top:20%;
		right:6%;
	}
	.btn-tech.parkBtn {
		padding-top:25px;
		width:105px;
		height:105px;
	}
	.btn-tech.small.tourBtn,
	.btn-tech.small.rentBtn {
		padding-top:15px;
		width:88px;
		height:88px;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {  /*md平板直式*/
	.siteArea {
		padding-top:2.25rem;
	}
	.siteArea .container .row .siteBtn {
		height:230px;
	}
	/*臺北市電影主題公園*/
	.siteArea .parkBtn {
		top:8%;
		right:auto;
		left:3%
	}
	/*西門紅樓預約導覽*/
	.siteArea .tourBtn {
		top:50%;
		right:50%;
	}
	/*北廣場場地租借*/
	.siteArea .rentBtn {
		top:0;
	}
}

@media (min-width: 992px) {  /*lg平板橫式~xl*/
	.siteArea .container {
		position: relative;
	}
	.siteArea h2 {
		margin-top: -2rem;
		margin-bottom:3rem;
	}
	/*西門町街區深度導覽影片*/
	.siteArea .videoBtn {
		position: absolute;
		right:-145px;
		bottom:0;
		display: inline-block;
		z-index:3;
	}
}

@media (min-width: 1600px) {
	/*臺北市電影主題公園*/
	.siteArea .parkBtn {
		top:3%;
	}
	/*西門紅樓創意市集*/
	.siteArea .marketBtn {
		top:25%;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {  /*lg平板橫式*/
	.siteArea {
		padding:4.25rem 0;
		margin-top:0.5rem;
	}
	/*西門町街區深度導覽影片*/
	.siteArea .videoBtn {
		right:-130px;
	}
	/*西門紅樓創意市集*/
	.siteArea .marketBtn {
		top:15%;
		right:28%;
		width:130px;
	}
	/*東西好文創市集*/
	.siteArea .goodsmarketBtn {
		bottom:2%;
		right:0;
		width:135px;
	}
	/*剝皮寮歷史街區*/
	.siteArea .bopiliaoBtn {
		bottom:2%;
		right:0;
		width:135px;
	}
}

@media (min-width: 1200px) {  /* xl筆電桌機 */
	.siteArea {
		padding:4rem 0;
	}
}