.artcile-banner{
	display:block;
	width:100%;
	min-height: 360px;
	}
.artcile-banner:last-child{ margin:10% 0 0 0; }
	
.artcile-mobile{ display:none; }

@media screen and (max-width: 640px) {
.artcile-banner{
	display:none;
	}
.artcile-mobile{ 
	display:block;
	width:100%;
	min-height: 220px;
    }
}

.article-container{
	display:block;
	width:100%;
	text-align:center;
	}
	.vertical-gray-line{
		display:block;
		width:1px;
		padding:4% 0;
		margin:0 auto;
		background-color:#D1D1D1;
		}

.page-title{
	position:relative;
	display:block;
	width:100%;
	font-family: 'Noto Serif TC', serif;
	font-weight:normal;
	color:#222222;
	font-size:27px;
	padding:25px 0;
	margin:0;
	text-align:center;
	}
	.page-title:before,
	.page-title:after {
		position:absolute;
		display:block;
		content: '';
		width:30px;
		height:1px;
		background-color:#D1D1D1;
	}
	.page-title:before { 
	    top:0;
		left:50%;
		margin:0 0 0 -15px;
		}
	.page-title:after {	
	    bottom:0; 
		right:50%;
		margin:0 -15px 0 0;
	}
.aside-content{
	display:block;
	width:100%;
	padding:0;
	font-family: "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft JhengHei", 微軟正黑體, sans-serif;
	}
	.last-child{ margin:0 0 7% 0;}
	.page-slogon{
		font-size:18px;
		letter-spacing:2px;
		text-align: center;
		padding-top: 30px;
		}
		.page-aside{
			display:block;
			margin:35px auto;
			width:85%;
			max-width:1000px;
			font-size:16px;
			letter-spacing:1px;
			line-height:190%;
			color:#707070;
			text-align:left;			
			}
		
@media screen and (max-width: 768px) {
	    .vertical-gray-line{	padding:5% 0;}
        .page-title{ 
		   padding:4% 0;
		   font-size: calc( 1.2rem + 2.5vw - 8px );
		   }
		.page-slogon{ font-size: calc( .8rem + 2.5vw - 8px ); }
		.page-aside{ 
			text-align: left;
			line-height: 160%;
		    }
		
	.page-title:before,
	.page-title:after {
		width:20px;
	}
	.page-title:before { margin:0 0 0 -10px; }
	.page-title:after {	margin:0 -10px 0 0; }	
		
}

.brand-video{
	display:block;
	width:100%;
	background-color:#232323;
	padding:7% 0;
	text-align:center;
	}
	.brand-video iframe{
		display:block;
		width:90%;
		max-width:853px;
		margin:0 auto;
		}
@media screen and (max-width: 768px) {
	.brand-video iframe{ height:360px; }
}
@media screen and (max-width: 640px) {
	.brand-video iframe{ height:314px; }
}
@media screen and (max-width: 480px) {
	.brand-video iframe{ height:234px; }
}

.century-content{
	display:block;
	width:100%;
	max-width:1280px;
	margin:0 auto;
	padding:0;	
	}
	.century-content ul{
		display:table;
		width:100%;
		padding:0;
		margin:5% auto;
		text-align:center;
		font-family: "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft JhengHei", 微軟正黑體, sans-serif;
		}
		.century-content ul li{
			display:inline-block;
			width:calc(48% - 5px);
			padding:2%;
			vertical-align:top;
			text-align:left;
			box-sizing:border-box;
			-moz-box-sizing:border-box; 
			-webkit-box-sizing:border-box; 
			}
			.century-content ul li img{
				display:block;
				width:100%;
				margin: 0;
				}				
			.century-content ul li .two-aside{
				display:block;
				padding:5% 0 10% 0;
				}
			.century-content ul li .two-aside h3{
				display:block;
				padding:0;
				margin:0 0 15px 0;
				color:#333333;
				font-size:17px;
				font-weight:500;
				}
			.century-content ul li .two-aside p{
				display:block;
				padding:0;
				margin:0;
				color:#707070;
				font-size:15px;
				line-height:160%;
				}
@media screen and (max-width: 768px) {
		.century-content ul li .two-aside{	padding:10% 0;	}
}
@media screen and (max-width: 550px) {
		.century-content ul li{
			display:block;
			width:90%;
			padding:0 5%;
			margin:0 auto;
			}
	.century-content ul li img {
		margin: 7% 0;
		}	
			
}

.single-aside{
	display:block;
	width:100%;
	margin:0 auto;
	padding:0 0 100px 0;
	text-align:center;
	font-family: "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft JhengHei", 微軟正黑體, sans-serif;
	}
	.single-aside label{
		display:block;
		font-family: "Times New Roman", Times, serif;
		font-size:28px;
		letter-spacing:-1px;
		color:#999999;
		font-style: italic;
		margin:0 0 15px 0;
		}
	.single-aside label span{
		font-family: "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft JhengHei", 微軟正黑體, sans-serif;
		font-size:21px;
		font-weight:500;
		}
		
	.single-aside img{
		display:block;
		width:100%;
		max-width:944px;
		margin:0 auto;
		}

		
	.single-aside h3{
		display:block;
		padding:0;
		margin:10% 0 25px 0;
		color:#333333;
		font-size:20px;
		font-weight:500;
		}
	.single-aside p{
		display:block;
		width:85%;
		max-width:800px;
		padding:0;
		margin:0 auto;
		color:#707070;
		font-size:15px;
		line-height:180%;
		}
	.single-aside p i{
		margin:0 2px;
		}
@media screen and (max-width: 960px) {	
	.single-aside img{	margin:0 auto 8% auto;	}
}
@media screen and (max-width: 768px) {	
    .single-aside{ padding:5% 0 0 0; }
	.single-aside img{	width:92%;	}
	.single-aside p{ padding:0 0 6% 0;	}
}
@media screen and (max-width: 550px) {	
	.single-aside img{
		display:block;
		width:82%;
		max-width:426px;
		}

	.single-aside label{
        width:82%;
		margin:0 auto 15px auto;
		text-align:left;
		font-size:25px;
		}
	.single-aside label span{
		font-size:18px;
		}
	.single-aside h3{
		width:82%;
		margin:8% auto 15px auto;
		text-align:left;
		}
	.single-aside p{
		width:82%;
		text-align:left;
        line-height:160%;
		}		
	.page-aside {
		width: 82%;
		max-width:426px;
		}
	.page-aside {
		margin:15px auto 10% auto;
		}
		
}

.festival-title{
	position:relative;
	display:block;
	width:100%;
	font-family: 'Noto Serif TC', serif;
	font-weight:normal;
	color:#555555;
	font-size:26px;
	padding:20px 0;
	letter-spacing: 2px;
	margin:3% 0 1.5% 0;
	text-align:center;
	}
.festival-title:nth-child(-n+1){ margin:2% 0 1.5% 0; }
	.festival-title:before,
	.festival-title:after {
		position:absolute;
		display:block;
		content: '';
		width:26px;
		height:1px;
		background-color:#D1D1D1;
	}
	.festival-title:before { 
	    top:0;
		left:50%;
		margin:0 0 0 -13px;
		}
	.festival-title:after {	
	    bottom:0; 
		right:50%;
		margin:0 -13px 0 0;
	}
h3.festival-title{ 
font-weight:bold; 
font-size:22px;
}

@media screen and (max-width: 768px) {
	h3.festival-title, .festival-title{ font-size: calc( 1rem + 2.5vw - 8px );  }
	.festival-title:before, .festival-title:after {width:20px;}	
	.festival-title:before, .page-title:before { margin:0 0 0 -10px; }
	.festival-title:after, .page-title:after { margin:0 -10px 0 0; }			
}
@media screen and (max-width: 550px) {
	h3.festival-title, .festival-title{ font-size: calc( 1.2rem + 2.5vw - 8px );  }
}
.banner-top-area{
	display: block;
	width: 100%;
	position: relative;
}
.banner-top-area .main-slider-area.flavors{
	position: absolute;
	width: 100%;
	max-width: 100%;
}

.banner-top-area .main-slider-area h2, 
.banner-top-area .main-slider-area h3,
.banner-top-area .petals-title-line,
.banner-top-area .main-slider-area p{
    color: #645b5b;
}
@media screen and (max-width: 640px) {
    .banner-top-area .main-slider-area.flavors {
        padding: 13% 10%;
    }
}
@media screen and (max-width: 400px) {
    .banner-top-area .main-slider-area.flavors {
        padding: 10%;
    }
}