@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;500;700&display=swap');
@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; scroll-behavior: smooth;
}
html,body{font-family: 'Adobe Garamond Pro','EB Garamond',Verdana,'Noto Serif TC','Microsoft JhengHei',sans-serif; font-size: 16px;}


/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 640px ){
		.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; }

.title01{ position: absolute;top:93px; left: 640px;z-index: 99;}
.title02{ position: absolute;top:157px; left: 641px;z-index: 99;}
.title03{ position: absolute;top:500px; left: 601px;z-index: 99;}
.title04{ position: absolute;top:0px; left: -177px;}

.block{ margin: 0 auto; max-width: 1920px;}
.bg_1200{ width: 1200px; min-width: 1200px; margin: 0 auto;}
/* m */
@media screen and ( max-width: 640px ){
	.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; }
	.bg_1200{ width: 100%; min-width: 100%; margin: 0 auto;}
	.block{ margin: 0 auto; max-width: 100%;}
}







.bg_2,.bg_3,.bg_4{ background: url("../images/bg-db.jpg")top center repeat;}



.bg_1{background: url("../images/bg1_t.png") center -7px no-repeat,url("../images/bg-db.jpg")top center repeat;}
.bg_4{padding-bottom: 40px; background: url("../images/bg3_t_01.png") bottom center no-repeat,url("../images/bg-db.jpg")top center repeat;}
.bg_5{ background: url("../images/bg3_t_02.png")top center no-repeat,url("../images/bg.jpg")top center repeat; padding-bottom: 2px;}

.bg_6{padding: 30px 0 2px;background: url("../images/bg4_tbt.png")top center no-repeat,url("../images/bg4_tb.png")top center repeat,url("../images/bg-lb.jpg")top center repeat;}
.bg_7{ padding-top: 30px;}

@media screen and ( max-width: 640px ){
.bg_1{background: url("../images/bg-db.jpg")top center repeat; padding-bottom: 2vw;}	
	.bg_2,.bg_3,.bg_4{ background: url("../images/bg-db.jpg")top center repeat; margin: 0 auto; padding: 2vw 0;}
	.bg_6{padding: 2vw 0 2vw;background: url("../images/bg-lb.jpg")top center repeat;}
}


/* titleC */
.titleC { display: flex; justify-content: center; margin: 0px; padding: 40px 0 10px;}
.titleC h2{position: relative; padding: 0;font-size: 60px; line-height: 60px;font-weight:700;}
.titleC h2 p{ margin: 10px; font-size: 32px;letter-spacing: 0px;line-height: 38px;font-weight:700;}

.bg_1 .titleC{width: 800px; color: #fbcb22; padding: 60px 0 10px;font-weight:700; margin: 0  auto;}
.bg_1 .titleC h2 p{width: 800px;  color: #ffffff;}
.bg_5 .titleC{width: 800px; color: #912433; padding: 60px 0 10px;font-weight:700; margin:  0 auto;}
.bg_5 .titleC h2 p{width: 800px; color: #3488c3;}
.bg_6 .titleC{width: 800px; color:  #912433; padding: 40px 0 0px;font-weight:700; margin: 0 auto;}
.bg_6 .titleC h2 p{width: 800px;color: #3488c3; }

	@media screen and ( max-width: 640px ){
		.titleC { margin: 3vw auto 2vw;padding:2vw 5vw 0;}
		.titleC h2{ font-size: 2rem;line-height: 2.3rem;}
		.titleC h2 p{ margin: 2vw 0 0; letter-spacing: 0;font-size: 1.4rem; line-height: 1.8rem;}

.bg_1 .titleC{width: 96vw; color: #fbcb22; padding: 3vw 0 2vw;}
.bg_1 .titleC h2 p{width: 96vw;padding: 0vw 5vw 2vw;}
.bg_5 .titleC{width: 96vw; color: #912433; padding: 3vw 0 2vw;}
.bg_5 .titleC h2 p{width: 96vw;padding: 0vw 5vw 2vw;}
.bg_6 .titleC{width: 96vw; color:  #912433; padding: 3vw 0 2vw;}
.bg_6 .titleC h2 p{width: 96vw;padding: 0vw 5vw 2vw; }
	}



.recommend_2p .font h4{font-weight: 700; font-size: 27px;}
/* 6-2 alternate */
.alternate{ width: 1160px; margin:0px auto 0px; display: flex; padding:20px 0 20px;}
.alternate h2{ }
.alternate h2 big{ font-size: 130%;color: #f1553c; }
.alternate ul { width: 48.5%; display:inline-flex; justify-content: center;flex-wrap: wrap; background: none;border: 1px solid #ffffff;margin: 0 10px 0; padding: 12px 0px;}
.alternate h3{ width: 1160px;margin: 4px 8px;}
.alternate li { width: 260px; height: 350px;background: #fff; margin: 4px 8px;  padding: 10px; text-align: center; position: relative;}
.alternate li a { display: flex;flex-wrap: wrap; justify-content: center;}
.alternate .font {  margin: auto; }
.alternate .font h4 { margin: 10px 0; color:#851315; padding:0  0px 0 0;font-weight: 700; font-size: 20px;}
.alternate .font p {   }
.alternate .font .price { margin: 10px 0; }
.alternate .font .price big {}
.alternate img {  width: 240px; height: 240px; object-fit: contain; }
.alternate .subp{ width: 240px; height: 240px;  font-size: 46px; line-height: 50px; padding: 10px 120px 0 60px;display:flex;align-items:center;justify-content:center; color: #2d65a1; font-weight: 700;}
.alternate .subp2{ width: 240px; height: 240px;  font-size: 62px; line-height: 68px; padding: 0px 120px 0 50px;display:flex;align-items:center;justify-content:center; color: #2d65a1;font-weight: 700;}

/* first-child */
.alternate ul:nth-child(odd) li:first-child { width: 536px; background: none;height: 280px; border-radius: 0px 0 0; margin: 0 0 10px;}
.alternate ul:nth-child(odd) li:first-child a { flex-wrap: nowrap;justify-content: flex-start;}
.alternate ul:nth-child(odd) li:first-child .font { text-align: left; color: #fff; margin: auto 0 auto 40px;}
.alternate ul:nth-child(odd) li:first-child .font h4 { color:#fff; font-size: 1.4rem;text-align: left;line-height: 2rem;}
.alternate ul:nth-child(odd) li:first-child .font .price {  color: #fff; }
.alternate ul:nth-child(odd) li:first-child .font .price big {  color: #ead42d; }
.alternate ul:nth-child(odd) li:first-child img { width: 260px; height: 260px;border-radius: 0px 0 0;}

/* last-child */
.alternate ul:nth-child(even) {margin: 0px 10px 0px; align-items: flex-end;}
.alternate ul:nth-child(even) li:last-child { width: 536px; background: none;height: 280px; border-radius: 0 0 0px; margin: 10px 0 0; padding-top: 20px;}
.alternate ul:nth-child(even) li:last-child a { flex-wrap: nowrap; justify-content: flex-start; }
.alternate ul:nth-child(even) li:last-child .font { text-align: left; color: #fff;margin: auto 0 auto 40px;}
.alternate ul:nth-child(even) li:last-child .font h4 {  color:#fff; font-size: 1.4rem;text-align: left; line-height: 2rem;}
.alternate ul:nth-child(even) li:last-child .font .price {  color: #fff; }
.alternate ul:nth-child(even) li:last-child .font .price big {  color: #ead42d; }
.alternate ul:nth-child(even) li:last-child img { width: 260px; height: 260px; }

.alternate ul:nth-child(odd){ background: url("../images/bg2_tbl.png") center top no-repeat;}
.alternate ul:nth-child(even){ background: url("../images/bg2_tbr.png") center bottom no-repeat;}

	@media screen and ( max-width: 640px ){
		
		.alternate{width: 100%; margin: 0vw auto 2vw;display: block; padding: 0 0 0; }
		.alternate ul {flex-wrap: wrap; width: 92vw;display:flex; justify-content: center;padding: 2vw 0px;margin: 0 auto 5%;align-items: stretch;}
		.alternate h3{ width: 96vw;margin: 1vw;}
		.alternate li {width: 42vw; height: auto; padding: 3vw; margin: 1vw;align-items: stretch;}
		.alternate a {}
		.alternate .font {padding: 1vw; }
		.alternate .font h4 { padding: 1vw;width:40vw; white-space: normal;}
		.alternate .font p { }
		.alternate .font .price { margin: 1vw;}
		.alternate img { width: 40vw; height: 40vw;}
		
		/* first-child */
		.alternate ul:nth-child(odd) li:first-child { width: 94vw; height: auto; border-radius: 0px 0 0;margin: 0 0 2vw;align-items: stretch;}
		.alternate ul:nth-child(odd) li:first-child a { flex-wrap: wrap;justify-content: flex-start;}
		.alternate ul:nth-child(odd) li:first-child .font { margin:5% 5vw 0 ;padding: 0; width: 90vw;}
		.alternate ul:nth-child(odd) li:first-child .font h4 {  font-size: 1.2rem;line-height: 1.4rem; padding: 0; padding-right:0;white-space: normal; width: 100%;text-align: center;}
		.alternate ul:nth-child(odd) li:first-child .font .price { margin: 2vw auto;  }
		.alternate ul:nth-child(odd) li:first-child .font .price big {  }
		.alternate ul:nth-child(odd) li:first-child img { width: 46vw; height: 46vw;border-radius: 0px 0 0; }

		/* last-child */
		.alternate ul:nth-child(even) {margin: auto ; align-items: stretch;}
		.alternate ul:nth-child(even) li:last-child { width: 94vw; height: auto; border-radius: 0 0 0px; padding-top:0;}
		.alternate ul:nth-child(even) li:last-child a { flex-wrap: wrap;justify-content: flex-start; }
		.alternate ul:nth-child(even) li:last-child .font {  margin: 5% 5vw 0;padding: 0 0 0 0;}
		.alternate ul:nth-child(even) li:last-child .font h4 {  font-size: 1.2rem;line-height: 1.4rem; padding: 0; padding-right:0;white-space: normal; width: 100%;text-align: center;}
		.alternate ul:nth-child(even) li:last-child .font .price {  margin: 2vw auto;   }
		.alternate ul:nth-child(even) li:last-child .font .price big {  }
		.alternate ul:nth-child(even) li:last-child img { width: 46vw; height: 46vw; }


		.alternate ul:nth-child(odd){ background:none;}
.alternate ul:nth-child(even){ background:none;}
		
.alternate .subp{width:100vw; height: auto;  font-size: 40px; line-height: 44px; padding: 3vw 15% 3vw 15%;display:block;align-items:center;justify-content:center; color: #2d65a1;  background: #fff;}
.alternate .subp2{width:100vw; height: auto;   font-size: 40px; line-height: 44px; padding: 3vw 15% 3vw 15%;display:block;align-items:center;justify-content:center; color: #2d65a1;  background: #fff;}

.recommend_2p .font h4{font-size: 1.2rem;}
	}


.quotes .font h4:after {  content:''; height: 30px;background:none; background-size: 100%; display:block; margin: 1rem 0;}
.quotes .font:after { content:''; height: 2px;background: none; background-size: 100%;display:block; margin: 1rem 0;}

.quotes li:nth-child(odd){background: #2d65a1 url("../images/texture.png") repeat; }
.quotes li:nth-child(even){background: #11354e url("../images/texture.png") repeat; ;}
.quotes .font{ color: #ffffff;}
.quotes .font h4{font-family:'Noto Serif TC', '微軟正黑體','Microsoft JhengHei',Helvetica,Verdana, Arial, sans-serif; font-weight: 700; }
.quotes .font p{ line-height: 1.6rem; font-weight: 500;font-family:'Noto Serif TC', "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif; }
.quotes ul li{clip-path: polygon(8% 0%, 92% 0%, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0% 92%, 0% 8%); padding-top: 50px; margin: 8px;border: 4px double #ffffff;}

@media screen and ( max-width: 640px ){

.quotes ul li{clip-path:none; padding-top: 1vw; margin:1vw;border: 4px double #ffffff;}	
	.quotes .font h4{ border-bottom: 1px solid #ffffff; padding-bottom: 10px;}
	.quotes .font h4:after{ display: none;}
	.quotes .font p{ line-height: 1.4rem;}
	.quotes .font p:after{display: none;}
}

.subtitle{ margin: 30px  auto 0; color: #2d65a1; padding-top: 20px;}
.subtitle h3{ font-weight: 700;}
.hightlight .font p{ padding: 5px 0 10px;}
.bg_6 .subtitle h3{ text-align: center; margin: 0 auto; display: block; border-left: 0px;}
.recommend_2p li{ margin-bottom: 16px; background: #fff;}
.recommend_2p img{ max-height: 250px;}
.hightlight li{ width: 276px;}
.hightlight img{ object-fit: contain; width: 276px; height: 276px; padding: 10px;}
.hightlight li .font p{ padding: 5px 12px 10px;}
.bg_5 .subtitle { width: 1140px;}
.bg_5 .subtitle h3{ border-left: 0px; width: 100%; line-height: 50px; padding-left: 0px;}
.bg_5 .subtitle h3::after{content:"";width:100%;height:3px; display: flex;border-bottom: 4px double #327fba; }
.bg_6 .subtitle { width: 1200px; background: url("../images/bg4_tbst.png")center 20px no-repeat;}
.recommend_2p{ margin-bottom: 0px;}
.subtitle .more a{ color:#11354e;}
.hightlight .font h4{background: #2d65a1;}
.banner {margin: 0 auto; padding: 0 0 20px;}
.banner li{ margin-bottom: 10px;}

@media screen and ( max-width: 640px ){
	
.bg_5 .subtitle { width: 100%; margin: 0; padding: 2vw 2vw 0;}
.bg_5 .subtitle h3{ border-left: 0px; width: 96vw; line-height: 40px; padding-left: 0px; font-size: 30px;}
.bg_5 .subtitle h3::after{content:"";width:100%;height:3px; display: flex;border-bottom: 4px double #327fba; margin: 0 auto;}
	.hightlight li{ width: 46vw;}
	.hightlight li img{ width:46vw; height:46vw;}
	.hightlight .font{ margin-bottom: 0;}
	.bg_6 .subtitle { width: 100%; background: url("../images/bg4_tbst.png")center 1vw no-repeat; padding-top: 0; margin-top:2vw;}
}


/* 1-2 recommend */
.recommend{width: 1160px; padding: 30px 60px 50px; margin:10px auto 40px; position: relative; background: url("../images/bg1_tb.png")center 95px no-repeat; margin-bottom: 0px;border-radius: 10px;}
.recommend a { display: flex; }
.recommend h3 {writing-mode: vertical-lr;text-align: left; color: #000;}
.recommend .font { width: 550px; padding-top: 100px; padding-left: 30px;}
.recommend .font h4 { font-size: 2rem;border-bottom: #000000 solid 1px; padding: 0 20px 20px; margin: 10px auto 12px; line-height: 2.2rem;}
.recommend .font p { font-size: 1.2rem; line-height: 2rem;  }
.recommend .font .price { font-size: 1.2rem;  }
.recommend img {  object-fit: cover;max-height: 420px;margin: 0 0px 0 80px;}
	@media screen and ( max-width: 640px ){
		.recommend{width: 90vw; padding: 5vw ;margin: 2vw auto;background: #e0e4e9;}
		.recommend a { flex-wrap: wrap; }
		.recommend h3 {writing-mode:horizontal-tb;margin: auto;}
		.recommend .font { width: 100%; height: auto; padding: 0;margin: 0 2vw 2vw;}
		.recommend .font h4 { margin: 2vw auto; padding: 2vw; font-size: 1.6rem; line-height: 2rem;}
		.recommend .font p { padding: 2vw; margin: 2vw auto; font-size: 16px; line-height: 24px;}
		.recommend .font .price { padding: 2vw; }
		.recommend img { max-height: 70vw; height: 100%;margin: 2vw auto;}
	}


@media screen and ( max-width: 640px ){
.quotes .font h4:after{ margin: 2vw 0; height: 4vw;}
.quotes .font:after {display: none;}
	.recommend_2p li{ margin-bottom:2vw;}
	.recommend_2p img{max-height: 50vw;}
}

/*--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: 640px ){
	#gotop {bottom: 25px;right: 0;margin: 2vw;	}
	}
/*for mobile*/
menu{display:none;}
	@media screen and ( max-width: 640px ){
		menu{ display:block;}
	}
menu ul{
	position:fixed;bottom:0;left:0;margin:0;width:100%;display:flex;list-style: none;background-color:#912433;z-index:1000;padding:2px 0;border-top:none;}
menu ul li{border-right:1px solid #ffffff;padding:4px;width:33.3%;box-sizing:border-box;text-align:center;font-size:13px;letter-spacing: -1px;}
menu ul li a{font-size:13px;}
menu ul li:nth-last-child(1){border-right:none;}
menu a{color:#ffffff !important;text-decoration:none;}