@charset "utf-8";
@import url('../../../../_bk_plugin_css/gFontEN/Tangerine.css'); /*date*/
/*============================================================================*/

/*----------------------------------------------------------------------------*/

/*============================================================================*/
/* timeline bg */
/*
# structure #
.bgtimeline-container .bgtimeline-wrapper article.bgtimeline-item .bgtl-main ......
*/
/*============================================================================*/
/*main*/
.bgtimeline-container {
	position: relative; padding: 10px 0 10% 0; width: 100%;
	background-repeat: no-repeat; background-position: center center; background-attachment: fixed;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important;
	transition: .3s ease 0s;
}
/*bg mask*/
.bgtimeline-container:before { content: ""; z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/*wrapper*/
.bgtimeline-wrapper { z-index: 2; display: flex; flex-wrap: wrap; flex-direction: column; position: relative; margin: 0 auto; max-width: 96%; }
/*middle line*/
.bgtimeline-wrapper:before { content: ""; position: absolute; left: 50%; margin-left: -1px; width: 2px; height: calc(100% + 150px); }
/*list item*/
.bgtimeline-item { display: flex; position: relative; padding: 10% 0; width: calc(50% - 40px);
	opacity: .3; filter: blur(2px);
	transition: .5s;
	transform: translateY(-100px);
}
/*pc 顯示日期*/
.bgtimeline-item:before {
	content: attr(data-bgtlinfo);
	position: absolute; top: 70%; width: 100%;
	font-family: 'Tangerine'; font-style:italic; color: rgba(255, 255, 255, .65); /*font-size: 60px;*/ font-size: 38px; letter-spacing: 3px;
	opacity: 0;
}
/*odd 奇數*/
/*單雙左右分開*/
.bgtimeline-item:nth-child(odd):before { right: calc(-100% - 71px); margin-top: -5px; padding: 0 0 0 30px; }
/*even 偶數*/
/*單雙左右分開*/
.bgtimeline-item:nth-child(even) { align-self: flex-end; }
.bgtimeline-item:nth-child(even):before { left: calc(-100% - 71px); right: auto; padding: 0 30px 0 0; text-align: right; border-left: none; }


/*mob 顯示箭頭*/
.bgtimeline-item:after {
	content: "";
	position: absolute; top: 50%; left: 10px;
	/*content: "\f0da"; font-family: 'Font Awesome 5 Pro'; font-weight: 900; font-size: 80px; color: rgba(255, 255, 255, .5);*/
	width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 20px;
}
/*js active*/
.bgtl-item-isactive { opacity: 1; filter: blur(0px); transform: translateY(0); }
.bgtl-item-isactive:before { top: 50%; opacity: 1; transition: .3s all .2s; }
/*內容*/
.bgtl-main { display: inline-block; position: relative; padding: 0 0 30px 0; width: 100%; border-radius: 5px 5px 0 0; }
.bgtl-main .bgtl-photo { display: inline-block; position: relative; }
.bgtl-main .bgtl-photo .bgtl-img {
	width: 100%; max-width: 100%; min-height: 380px;
	border-radius: 5px 5px 0 0;
	background-repeat: no-repeat;
	background-attachment: fixed;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important;
}
.bgtl-main .bgtl-photo .bgtl-price { position: absolute; top: 20px; right: 30px; }
.bgtl-main .bgtl-photo .bgtl-price strong { font-family: 'Tangerine'; font-style: italic; }

.bgtl-main .bgtl-title { position: absolute; margin: 0; padding: 10px 0; width: 100%; text-align: center; transition: .4s; }
.bgtl-main .bgtl-title strong { display: inline-block; margin: -10px 0 0 0; padding: 10px 10px 0 10px; width: calc(100% - 20px); height: 42px; font-size: 18px; }
.bgtl-main .bgtl-subtitle { margin: 0; transition: .4s; }
.bgtl-main .bgtl-subtitle strong { display: inline-block; width: 100%; font-size: 16px; }
.bgtl-main .bgtl-desc { margin: 0; padding: 0 10px; font-size: 14px; }
/*日期*/
.bgtl-main .bgtl-date { display: inline-block; padding: 20px; width: 100%; text-align: right; }
.bgtl-main .bgtl-date strong { font-family: 'Tangerine'; font-style: italic; font-size: 32px; letter-spacing: 1px; }
/*price*/

/*active*/
.bgtl-item-isactive .bgtl-title { margin: -54px 0 20px 0; }
.bgtl-item-isactive .bgtl-title strong {  }
.bgtl-item-isactive .bgtl-subtitle { margin: 20px 0; padding: 0 10px 10px 10px; }

/*but*/
.bgtl-main aside {  }
.bgtl-main aside.info {  }
.bgtl-main .info {  }
.bgtl-main .info a {  }
.bgtl-main .info a.but {  }

.bgtl-main .info a.but {
	z-index: 3; position: absolute; bottom: -20px; width: 50px; height: 50px;
	opacity: 0; transform: scale(0);
	/*opacity: 1; transform: scale(1);*/
	transform-origin: center right;
	text-align: center;
	transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.bgtl-main .info a.but:nth-child(1) { right: 120px; transition-delay: .0s; }
.bgtl-main .info a.but:nth-child(2) { right: 60px; transition-delay: .05s; }
.bgtl-main .info a.but:nth-child(3) { right: 10px; transition-delay: .1s; }
/*.hopcard-item .info a.but:nth-child(1) { right: 10px; transition-delay: .0s; }/*只有一個*/
/*只有兩個*/
.bgtl-main .info a.but:nth-child(1) { right: 85px; transition-delay: .0s; }
.bgtl-main .info a.but:nth-child(2) { right: 15px; transition-delay: .05s; }

.bgtl-main:hover .info a.but { opacity: 1; transform: scale(1); }
.bgtl-main:hover .info a.but:nth-child(1) { transition-delay: .7s; }
.bgtl-main:hover .info a.but:nth-child(2) { transition-delay: .5s; }
.bgtl-main:hover .info a.but:nth-child(3) { transition-delay: .3s; }

.bgtl-main .info a.but span {
	display: inline-block; padding: 12px 0 0 0; width: 50px; height: 50px;
	border-radius: 100%;
	-webkit-transition: background-color .3s linear; transition: background-color .3s linear;
}
.bgtl-main .info a.but span i {  }
.bgtl-main .info a.but > span:hover > i.fa-link {
	-webkit-animation: .2s .1s normal linear infinite jellen-spin-0-360; animation: .2s .1s normal linear infinite jellen-spin-0-360;
}
.bgtl-main .info a.but > span:hover > i.fa-search-plus {
	-webkit-animation: .8s .5s normal linear infinite jellen-scale15; animation: .8s .5s normal linear infinite jellen-scale15;
}



/*mark*/
.bgtimeline-container .indicate-mark { z-index: 2; display: inline-block; position: absolute; margin: 0 auto;  }

.bgtimeline-container .indicate-mark.lefttop { top: 0; left: 0; }
.bgtimeline-container .indicate-mark.centertop { top: 0; left: 50%; margin-left: -50px; }
.bgtimeline-container .indicate-mark.righttop { top: 0; right: 0; }

.bgtimeline-container .indicate-mark.leftcenter { top: 50%; left: 0; margin-top: -50px; }
.bgtimeline-container .indicate-mark.centercenter { top: 50%; left: 50%; margin-top: -50px; margin-left: -50px;}
.bgtimeline-container .indicate-mark.rightcenter { top: 50%; right: 0; margin-top: -50px; }

.bgtimeline-container .indicate-mark.leftbottom { bottom: -2px; left: 0; }
.bgtimeline-container .indicate-mark.centerbottom { bottom: -2px; left: 50%; margin-left: -50px; }
.bgtimeline-container .indicate-mark.rightbottom { bottom: -2px; right: 0; }

.bgtimeline-container .indicate-mark.isnone { opacity: 0; filter: alpha(opacity=0); }



@media screen and (min-width: 1280px) and (max-width: 999999px) {
	.bgtimeline-item:after { display: none; }
	.bgtl-main .bgtl-date { display: none; }
}
@media screen and (min-width: 1280px) and (max-width: 1680px) { .bgtl-main .bgtl-photo .bgtl-img { min-height: 320px !important; } }
@media screen and (min-width: 860px) and (max-width: 1279px) { .bgtl-main .bgtl-photo .bgtl-img { min-height: 420px !important; } }
@media screen and (min-width: 639px) and (max-width: 879px) { .bgtl-main .bgtl-photo .bgtl-img { min-height: 320px !important; } }
@media screen and (min-width: 479px) and (max-width: 640px) { .bgtl-main .bgtl-photo .bgtl-img { min-height: 260px !important; } }
@media screen and (min-width: 379px) and (max-width: 480px) { .bgtl-main .bgtl-photo .bgtl-img { min-height: 200px !important; } }
@media screen and (min-width: 1px) and (max-width: 380px) { .bgtl-main .bgtl-photo .bgtl-img { min-height: 180px !important; } }
@media screen and (min-width: 1px) and (max-width: 1279px) {
	.bgtimeline-container { padding: 5% 0 10% 0; }
	.bgtimeline-wrapper { width: 100% !important; max-width: 100% !important; }
	.bgtimeline-wrapper:before { left: 10px; }
	.bgtimeline-item:before { display: none; } /*pc 日期 不顯示 顯示 after 箭頭*/
	
	/*.bgtl-main .bgtl-photo .bgtl-img { min-height: 200px !important; }*/
	
	.bgtimeline-item { align-self: baseline !important; width: 100%; padding: 0 20px 180px 35px; }
	.bgtimeline-item:before { top: 50px; left: 10px !important; padding: 0 !important; width: 60px; text-align: center !important; border: none !important; }
	.bgtimeline-item:first-child { padding-top: 100px; }
	.bgtimeline-item:last-child { padding-bottom: 25%; }
	
	.bgtl-main .info a.but { opacity: 1; transform: scale(1); }
}









