@charset "utf-8";

/*花蓮行事曆 時序*/

section {	
	padding:0px;
	margin:0px;
	vertical-align:top;
}

#conData > div{position:relative;background-position:center top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}
#conData .txt_wrap{position:relative;max-width:1600px;margin:0px auto;}
#conData .visual_wrap{position:absolute;top:0;left:0;width:100%;height:100%;}

.story h2{font-size:36px; color:#444; font-weight:300; padding-top:50px;}
.way h2{font-size:36px; color:#444; font-weight:300; padding-top:50px;}

.story05{padding-bottom:30px}
.story05{}
.story05 .txt_wrap > ul{margin:50px auto 0;background:url('https://www.hl-net.com.tw/css/history_line.gif') center top repeat-y;overflow:hidden;}
.story05 ul li{width:50%}
.story05 ul li.left{text-align:right;margin-right:50%}
.story05 ul li.left .dot{right:-5px}
.story05 ul li.right{text-align:left;margin-left:50%}
.story05 ul li.right .dot{left:-5px}
.story05 ul li > div{position:relative;padding:0 30px}
.story05 .year{font-size:35px;color:#c29f7a; font-weight:400}
.story05 .txt{ font-size:18px; color:#949393; line-height:28px; margin-top:10px;font-weight:400; letter-spacing:0;}
.story05 .dot{position:absolute;top:16px;width:10px;height:10px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background:#c2a07a;}
.story05 .visual{margin-top:20px}
.story05 ul li.m_feb{margin-top:5px}
.story05 ul li.m_mar{margin-top:-115px}
.story05 ul li.m_apr{margin-top:-120px}
.story05 ul li.m_may{margin-top:-80px}
.story05 ul li.m_jun{margin-top:-90px}
.story05 ul li.m_jul{margin-top:-90px}
.story05 ul li.m_aug{margin-top:-50px}
.story05 ul li.m_sep{margin-top:-50px}
.story05 ul li.m_oct{margin-top:-50px}
.story05 ul li.m_nov{margin-top:-50px}
.story05 ul li.m_dec{margin-top:-50px}

.railway{padding-bottom:20px}
.railway{}
.railway .txt_wrap > ul{margin:50px auto 0;background:url('https://www.hl-net.com.tw/css/history_line.gif') center top repeat-y;overflow:hidden;}
.railway ul li{width:50%}
.railway ul li.left{text-align:right;margin-right:50%}
.railway ul li.left .dot{right:-5px}
.railway ul li.right{text-align:left;margin-left:50%}
.railway ul li.right .dot{left:-5px}
.railway ul li > div{position:relative;padding:0 30px}
.railway .station{font-size:35px;color:#c29f7a; font-weight:400;}
.railway .txt{ font-size:18px; color:#949393; line-height:28px; margin-top:10px;font-weight:400; letter-spacing:0;}
.railway .dot{position:absolute;top:16px;width:10px;height:10px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background:#c2a07a}
.railway .visual{margin-top:20px}
.railway ul li.train01{margin-top:10px}
.railway ul li.train02{margin-top:-85px}
.railway ul li.train02-1{margin-top:-85px}
.railway ul li.train03{margin-top:-20px}
.railway ul li.train04{margin-top:-90px}
.railway ul li.train05{margin-top:-90px}
.railway ul li.train06{margin-top:-190px}
.railway ul li.train07{margin-top:-140px}
.railway ul li.train08{margin-top:-140px}
.railway ul li.train09{margin-top:-180px}
.railway ul li.train10{margin-top:-70px}
.railway ul li.train11{margin-top:-150px}
.railway ul li.train12{margin-top:-100px}
.railway ul li.train13{margin-top:-150px}
.railway ul li.train14{margin-top:-150px}
.railway ul li.train15{margin-top:-70px}
.railway ul li.train16{margin-top:-250px}
.railway ul li.train17{margin-top:-70px}
.railway ul li.train18{margin-top:-280px}
.railway ul li.train19{margin-top:-100px}
.railway ul li.train20{margin-top:-100px}
.railway ul li.train21{margin-top:-100px}

.coneway{padding-bottom:0px}
.coneway{}
.coneway .txt_wrap > ul{margin:50px auto 0;background:url('https://www.hl-net.com.tw/css/history_line.gif') center top repeat-y;overflow:hidden;}
.coneway ul li{width:50%}
.coneway ul li.left{text-align:right;margin-right:50%}
.coneway ul li.left .dot{right:-5px}
.coneway ul li.right{text-align:left;margin-left:50%}
.coneway ul li.right .dot{left:-5px}
.coneway ul li > div{position:relative;padding:0 30px}
.coneway .station{font-size:2rem;color:#c29f7a; font-weight:400;}
.coneway .txt{ font-size:1.05rem; color:#949393; line-height:28px; margin-top:10px;font-weight:400; letter-spacing:0;}
.coneway .dot{position:absolute; top:16px; width:10px; height:10px; -webkit-border-radius:50%;-moz-border-radius:50%; border-radius:50%;background:#c2a07a}
.coneway .visual{ margin-top:20px}
.coneway ul li.point01{margin-top:10px}
.coneway ul li.point02{margin-top:-485px}
.coneway ul li.point03{margin-top:-400px}
.coneway ul li.point04{margin-top:-600px}
.coneway ul li.point05{margin-top:-600px}
.coneway ul li.point06{margin-top:-500px}
.coneway ul li.point07{margin-top:-300px}
.coneway ul li.point08{margin-top:10px}
.coneway ul li.point09{margin-top:0px}

/* gallery */
.wp-block-gallery{
	display:flex;
	flex-wrap:wrap;
	list-style-type:none;
	padding:0
}
.wp-block-gallery .blocks-gallery-image,.wp-block-gallery .blocks-gallery-item{
	margin:0 16px 5px 0;
	display:flex;
	flex-grow:1;
	flex-direction:column;
	justify-content:center;
	position:relative
}

.wp-block-gallery .blocks-gallery-image figure,.wp-block-gallery .blocks-gallery-item figure{margin:0;height:100%}
@supports ((position:-webkit-sticky) or (position:sticky)){
.wp-block-gallery .blocks-gallery-image figure,
.wp-block-gallery .blocks-gallery-item figure{display:flex;align-items:flex-end;justify-content:flex-start}}

.wp-block-gallery .blocks-gallery-image img,
.wp-block-gallery .blocks-gallery-item img{display:block;max-width:100%;height:auto}
.wp-block-gallery .blocks-gallery-image img,
.wp-block-gallery .blocks-gallery-item img{width:100%}

@supports ((position:-webkit-sticky) or (position:sticky)){
	.wp-block-gallery .blocks-gallery-image img,
	.wp-block-gallery .blocks-gallery-item img{width:auto}
}

.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption{
	position:absolute;
	bottom:0;width:100%;
	max-height:100%;
	overflow:auto;
	padding:20px 0px 0px;
	color:#fff;
	text-align:center;
	font-size:15px;
	background:linear-gradient(0deg,rgba(0,0,0,.7) 0,rgba(0,0,0,.3) 60%,transparent)
}

.wp-block-gallery .blocks-gallery-image figcaption img,
.wp-block-gallery .blocks-gallery-item figcaption img{display:inline}
.wp-block-gallery.is-cropped .blocks-gallery-image a,
.wp-block-gallery.is-cropped .blocks-gallery-image img,
.wp-block-gallery.is-cropped .blocks-gallery-item a,
.wp-block-gallery.is-cropped .blocks-gallery-item img{width:100%}

@supports ((position:-webkit-sticky) or (position:sticky)){
	.wp-block-gallery.is-cropped .blocks-gallery-image a,
	.wp-block-gallery.is-cropped .blocks-gallery-image img,
	.wp-block-gallery.is-cropped .blocks-gallery-item a,
	.wp-block-gallery.is-cropped .blocks-gallery-item img{
		height:100%;flex:1;-o-object-fit:cover; object-fit:cover
	}
}
.wp-block-gallery .blocks-gallery-image,
.wp-block-gallery .blocks-gallery-item{width:calc((100% - 16px)/ 2)}
.wp-block-gallery .blocks-gallery-image:nth-of-type(even),
.wp-block-gallery .blocks-gallery-item:nth-of-type(even){margin-right:0}
.wp-block-gallery.columns-1 .blocks-gallery-image,
.wp-block-gallery.columns-1 .blocks-gallery-item{width:100%;margin-right:0}

@media (min-width:600px){
	.wp-block-gallery.columns-3 .blocks-gallery-image,
	.wp-block-gallery.columns-3 .blocks-gallery-item{width:calc((100% - 16px * 2)/ 3);margin-right:16px}
	.wp-block-gallery.columns-4 .blocks-gallery-image,
	.wp-block-gallery.columns-4 .blocks-gallery-item{width:calc((100% - 16px * 3)/ 4);margin-right:16px}
	.wp-block-gallery.columns-5 .blocks-gallery-image,
	.wp-block-gallery.columns-5 .blocks-gallery-item{width:calc((100% - 16px * 4)/ 5);margin-right:16px}
	.wp-block-gallery.columns-6 .blocks-gallery-image,
	.wp-block-gallery.columns-6 .blocks-gallery-item{width:calc((100% - 16px * 5)/ 6);margin-right:16px}
	.wp-block-gallery.columns-7 .blocks-gallery-image,
	.wp-block-gallery.columns-7 .blocks-gallery-item{width:calc((100% - 16px * 6)/ 7);margin-right:16px}
	.wp-block-gallery.columns-8 .blocks-gallery-image,
	.wp-block-gallery.columns-8 .blocks-gallery-item{width:calc((100% - 16px * 7)/ 8);margin-right:16px}
	.wp-block-gallery.columns-1 .blocks-gallery-image:nth-of-type(1n),
	.wp-block-gallery.columns-1 .blocks-gallery-item:nth-of-type(1n){margin-right:0}
	.wp-block-gallery.columns-2 .blocks-gallery-image:nth-of-type(2n),
	.wp-block-gallery.columns-2 .blocks-gallery-item:nth-of-type(2n){margin-right:0}
	.wp-block-gallery.columns-3 .blocks-gallery-image:nth-of-type(3n),
	.wp-block-gallery.columns-3 .blocks-gallery-item:nth-of-type(3n){margin-right:0}
	.wp-block-gallery.columns-4 .blocks-gallery-image:nth-of-type(4n),
	.wp-block-gallery.columns-4 .blocks-gallery-item:nth-of-type(4n){margin-right:0}
	.wp-block-gallery.columns-5 .blocks-gallery-image:nth-of-type(5n),
	.wp-block-gallery.columns-5 .blocks-gallery-item:nth-of-type(5n){margin-right:0}
	.wp-block-gallery.columns-6 .blocks-gallery-image:nth-of-type(6n),
	.wp-block-gallery.columns-6 .blocks-gallery-item:nth-of-type(6n){margin-right:0}
	.wp-block-gallery.columns-7 .blocks-gallery-image:nth-of-type(7n),
	.wp-block-gallery.columns-7 .blocks-gallery-item:nth-of-type(7n){margin-right:0}
	.wp-block-gallery.columns-8 .blocks-gallery-image:nth-of-type(8n),
	.wp-block-gallery.columns-8 .blocks-gallery-item:nth-of-type(8n){margin-right:0}}
.wp-block-gallery .blocks-gallery-image:last-child,
.wp-block-gallery .blocks-gallery-item:last-child{margin-right:0}
.wp-block-gallery .blocks-gallery-item.has-add-item-button{width:100%}
.wp-block-gallery.alignleft,.wp-block-gallery.alignright{max-width:305px;width:100%}
.wp-block-gallery.aligncenter,
.wp-block-gallery.alignleft,
.wp-block-gallery.alignright{display:flex}
.wp-block-gallery.aligncenter .blocks-gallery-item figure{justify-content:center}


/* desktop 1024 */
@media screen and (max-width:1024px){		
	
	#conData .txt_wrap{padding:0 20px}	
}

/* mobie 768 */
@media screen and (max-width:768px){	 	

	.story05{padding-bottom:20px}
	.story05 .txt{font-size:15px;line-height:25px;}
	
	.railway{padding-bottom:20px}
	.railway .txt{font-size:15px;line-height:25px;}
	
	.coneway{padding-bottom:0px}
	.coneway .txt{font-size:1rem;line-height:25px;}
}


/* mobie 640 */
@media screen and (max-width:640px){		
	
	.story05 .txt_wrap > ul{margin:20px auto 0 auto; background:url('https://www.hl-net.com.tw/css/history_line.gif') 15px top repeat-y;}
	/*.story05 ul{margin:20px auto 0 auto;background:url(../../files/images//content/history_line.gif) 15px top repeat-y}*/
	.story05 ul li{width:100%;margin-top:15px !important}
	.story05 ul li.left{text-align:left;margin-right:0}
	.story05 ul li.left .dot{right:auto;left:10px}
	.story05 ul li.right{text-align:left;margin-left:0}
	.story05 ul li.right .dot{left:10px}
	.story05 ul li > div{position:relative;padding:0 0 0 30px}	
	.story05 .year{font-size:20px; color:#c29f7a;letter-spacing:normal}
	.story05 .dot{top:5px}
	.story05 .visual{margin-top:10px}	
	
	.railway .txt_wrap > ul{margin:20px auto 0 auto; background:url('https://www.hl-net.com.tw/css/history_line.gif') 15px top repeat-y;}
	/*.story05 ul{margin:20px auto 0 auto;background:url(../../files/images//content/history_line.gif) 15px top repeat-y}*/
	.railway ul li{width:100%;margin-top:15px !important}
	.railway ul li.left{text-align:left;margin-right:0}
	.railway ul li.left .dot{right:auto;left:10px}
	.railway ul li.right{text-align:left;margin-left:0}
	.railway ul li.right .dot{left:10px}
	.railway ul li > div{position:relative;padding:0 0 0 30px}	
	.railway .station{font-size:20px; color:#c29f7a;letter-spacing:normal}
	.railway .dot{top:5px}
	.railway .visual{margin-top:10px}
	
	.coneway .txt_wrap > ul{margin:20px auto 0 auto; background:url('https://www.hl-net.com.tw/css/history_line.gif') 5px top repeat-y;}
	/*.story05 ul{margin:20px auto 0 auto;background:url(../../files/images//content/history_line.gif) 15px top repeat-y}*/
	.coneway ul li{width:100%;margin-top:15px !important}
	.coneway ul li.left{text-align:left;margin-right:0}
	.coneway ul li.left .dot{right:auto;left:0px}
	.coneway ul li.right{text-align:left; margin-left:0}
	.coneway ul li.right .dot{left:0px}
	.coneway ul li > div{position:relative;padding:0 0 0 20px}	
	.coneway .station{font-size:1.5rem; color:#c29f7a; letter-spacing:normal;}
	.coneway .dot{top:5px}
	.coneway .visual{margin-top:10px}
}