@charset "utf-8";
/* CSS Document */
/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{
	background:url("../images/bg.jpg") top center repeat;
}
.footer{
	max-width: 1920px;
	margin: 0 auto;
	background: url("../images/bg_purple.jpg");
}



/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 991px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { overflow: hidden; }
.topbox { position: relative; width: 1200px; margin: auto;}
.kv_pc {width: 100%;  position: relative; text-align:center; display: flex;justify-content: center;max-width: 1920px; margin: auto;flex-wrap: wrap-reverse;}
.kv_pc img { display: block; text-align: center; }
.kv_m { display: none; }
.kv_m img { display: block; }
.kv_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }

/* m */
@media screen and ( max-width: 991px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; }
	.kv_pc { display: none; }
	.container {width: 100%; min-width: auto; }
	.for_pc{ display: none; }
	.for_m { display: block; }
	.for_m img {  width: 100%; }
}

/* ----------------------CUSTOMERIZATION---------------------- */

/*主視覺動畫*/
.cover{ position: absolute; top:390px; left: 60px;}

/*bg*/
.bg_1{ background: url("../images/bg_1.jpg") top center no-repeat; padding-top:140px; padding-bottom: 10px;}
.bg_2{ background: url("../images/bg_2.jpg") top center no-repeat; padding-top:120px; padding-bottom: 40px;}
.bg_3{ background: url("../images/bg_3.jpg") top center no-repeat; padding-top:110px; padding-bottom: 15px;}
.bg_4{ background: url("../images/bg_4.jpg") top center no-repeat; padding-top:120px; padding-bottom: 40px;}
.bg_5{ background: url("../images/bg_5.jpg") top center no-repeat; padding-top:120px; padding-bottom: 100px;}
.bg_6{ background: url("../images/bg_6.jpg") top center no-repeat; padding-top:110px; padding-bottom: 15px;}
@media screen and ( max-width: 991px ){
	.bg_1{background: url("../images/bg_purple.jpg"); padding-top: 20px;}
	.bg_2{background: url("../images/bg_yellow.jpg"); padding-top: 20px; padding-bottom: 15px;}
	.bg_3{background: url("../images/bg_green.jpg"); padding-top: 20px;}
	.bg_4{background: url("../images/bg_blue.jpg"); padding-top: 20px;  padding-bottom: 15px;}
	.bg_5{background: url("../images/bg_red.jpg"); padding-top: 20px; padding-bottom: 15px;}
	.bg_6{background: url("../images/bg_purple.jpg"); padding-top: 20px;}
	.bg_7{background: url("../images/bg_purple.jpg");}
	
	.bg_1-1, .bg_2-1, .bg_3-1, .bg_4-1, .bg_5-1, .bg_6-1{
		background: url("../images/bg_offwhite.jpg");
		width: 98%;
		margin: 0 auto;
		padding-top: 15px;
		padding-bottom: 10px;
	}
}

/*title*/
.bg_1 .titleC, .bg_2 .titleC, .bg_3 .titleC, .bg_4 .titleC, .bg_5 .titleC, .bg_6 .titleC{
	margin-top: 0;
	margin-bottom: 0;
}
.bg_1 .titleC h2, .bg_2 .titleC h2, .bg_3 .titleC h2, .bg_4 .titleC h2, .bg_5 .titleC h2, .bg_6 .titleC h2{
	font-family: 'Noto Serif TC', serif, "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif; 
	font-weight: bold; 
	font-size: 48px;
	color: #ffffff;
}
.bg_1 .titleC p, .bg_2 .titleC p, .bg_3 .titleC p, .bg_4 .titleC p, .bg_5 .titleC p, .bg_6 .titleC p{
	font-family: 'Noto Serif TC', serif, "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif; 
	font-weight: bold; 
	font-size: 24px; 
	letter-spacing: 1px; 
	line-height: 48px;
}
.bg_1 .titleC p{color: #6b334f;}
.bg_2 .titleC p{color: #a58025;}
.bg_3 .titleC p{color: #555f43;}
.bg_4 .titleC p{color: #294767;}
.bg_5 .titleC p{color: #982e24;}
.bg_6 .titleC p{color: #6b334f;}
@media screen and ( max-width: 991px ){
	.bg_1 .titleC h2, .bg_2 .titleC h2, .bg_3 .titleC h2, .bg_4 .titleC h2, .bg_5 .titleC h2, .bg_6 .titleC h2{font-size: 32px;}
	.bg_1 .titleC p, .bg_2 .titleC p, .bg_3 .titleC p, .bg_4 .titleC p, .bg_5 .titleC p, .bg_6 .titleC p{ font-size: 16px; letter-spacing: 0.5px; line-height: 32px; margin-top: 0;}
	.title1_m{ background: #6b334f; padding: 10px; border-radius: 50px;}
	.title2_m{ background: #a58025; padding: 10px; border-radius: 50px;}
	.title3_m{ background: #555f43; padding: 10px; border-radius: 50px;}
	.title4_m{ background: #294767; padding: 10px; border-radius: 50px;}
	.title5_m{ background: #982e24; padding: 10px; border-radius: 50px;}
	.title6_m{ background: #6b334f; padding: 10px; border-radius: 50px;}
}


/*營養好食材, 懂吃不偏食, 美食商店街, 環遊世界, 變身小廚神*/
.bg_1 .crosswise, .bg_2 .crosswise, .bg_3 .crosswise, .bg_4 .crosswise, .bg_6 .broadwise{
	margin-bottom: 0;
	margin-top: 0;
}
.bg_5 .rectangle{
	margin-bottom: 0;
	margin-top: 0;
}
.bg_5 .rectangle li:nth-child(1), .bg_5 .rectangle li:nth-child(2), .bg_5 .rectangle li:nth-child(3), .bg_5 .rectangle li:nth-child(4){
	margin-top: 0;
}
.bg_1 .various, .bg_2 .various, .bg_3 .various, .bg_4 .various, .bg_6 .various{
	margin-top: 10px;
	margin-bottom: 20px;
}
.bg_1 .banner, .bg_3 .banner{
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 45px;
}
.bg_1 .various li, .bg_2 .various li, .bg_3 .various li, .bg_4 .various li, .bg_6 .various li{
	width: 276px;
}
.bg_1 .various img, .bg_2 .various img, .bg_3 .various img, .bg_4 .various img, .bg_6 .various img{
	width: 236px;
}
.bg_6 .broadwise li{
	margin-bottom: 0;
	margin-top: 0;
}
.bg_7{
	max-width: 1920px;
	margin: 0 auto;
	background: url("../images/bg_purple.jpg");
}
.bg_7 .banner{
	margin-bottom: 0;
	margin-top: 0;
}
@media screen and ( max-width: 991px ){
	.bg_1 .various, .bg_2 .various, .bg_3 .various, .bg_4 .various, .bg_6 .various{ margin-top: 5px; margin-bottom: 0px;}
	.bg_1 .various li, .bg_2 .various li, .bg_3 .various li, .bg_4 .various li, .bg_6 .various li {width: 46vw;}
	.bg_1 .various img, .bg_2 .various img, .bg_3 .various img, .bg_4 .various img, .bg_6 .various img { width: 40vw;}
	.bg_1 .banner, .bg_3 .banner{margin-top: 10px; padding-top: 0;}
}


























/*--goto top--*/
#gotop {display: inline-block;background-color: #000;opacity:0.3;width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 0px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;opacity: 0;visibility: hidden;z-index: 1000;margin: 30px;}
#gotop::after {font-family: FontAwesome;content:'　';font-weight: normal;font-style: normal;font-size: 2em;line-height: 50px;color: #fff;  opacity:0.5;background: url(../images/top.png) center no-repeat; background-size:50%;background-position:50% 20%;}
#gotop:hover {cursor: pointer;background-color: #666;}
#gotop:active {background-color: #666;}
#gotop.show {opacity: 0.4;visibility: visible;}
	@media screen and ( max-width: 991px ){
	#gotop {bottom: 2vw;right: 0;margin: 2vw;	}
	}