@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
/*{ box-sizing:border-box;border:1px  #268A28 solid;}
/* 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;font-size: 100%;font: inherit;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
a {text-decoration:none;}
/* ---reset.css--- */

html, body{	
	font-family:'Noto Serif TC','Microsoft JhengHei','Helvetica','verdana','Georgia','apple LiGothic Medium','arial','Courier','Times','Heiti TC';
	font-size:20px;
	line-height:20px;
	-webkit-text-size-adjust:none;
	box-sizing: border-box;}
@media screen and ( max-width: 768px ){
   html, body{ 
    min-width: 320px;
	max-width: 768px;
	width: 100%;
	background:url(../images/bg.jpg) repeat;}
}


*{-webkit-box-sizing:border-box;box-sizing:border-box;}

:focus { outline: 0; }
h1{ text-indent:-9999px; position:absolute;}
a{text-decoration:none;}
img{ vertical-align:top;}


/* --通用-- */
.container{ max-width:1920px; overflow:hidden; min-width:1200px; margin:0 auto;}
.box{ width:100%; overflow:hidden;}
.box_content{width:1200px;margin:0 auto; padding-left:20px; padding-right:20px;}
.item_pc{ display:block;}
.item_m{ display:none;}
ul{ display:inline-block; /*overflow:hidden;*/}
li{ list-style:none; float:left; overflow:hidden;}
.title{margin:0 auto; text-align:center; /*border-bottom:1px #261003 solid;*/ height:2rem; margin-bottom:65px;}
.title ul{ overflow:visible; padding:50px 0;/*background: url(../images/bg_content1.png) top center repeat;*/}
.title ul li{ font-size:1.8rem; font-weight:bold; padding:0 15px;overflow:visible; border-right:#261003 1px solid;}
.title ul li:last-child{ border-right:none;}
h2{ text-align:center; color:#000000; font-size:1rem; font-weight:900; letter-spacing:0.5px; padding:10px 10px; line-height:1.4rem; height:66px;align-items: center; vertical-align:middle; display:table-cell;}
.proname{ font-weight:900; color:#000000; font-size:0.75rem; padding:10px 10px 15px 10px;}	
.number{ color:#b23307; font-size:1.7rem; font-weight:bold;}	
	@media screen and ( max-width: 768px ){
		.container{ width:100%; max-width:768px; min-width:320px; }
		.box{ width:100%; overflow:hidden; min-width:320px;max-width:100%;}
		.box_content{ width:96vw; padding-left:0px; padding-right:0px; margin:0 auto;}
		.item_pc{ display:none;}
		.item_m{ display:block;}
		.item_m img{ margin:0 auto; width:100%;}
		h2{font-size:0.8rem; letter-spacing:0; padding:0;}
		.proname{font-size:0.6rem;}	
        .number{font-size:1.2rem;}
		.title{ height:1.5rem; padding-top:3%; margin-bottom:40px; }
		.title ul li{ font-size:1.6rem;padding:0 10px;}
		.title ul{  padding:20px 0;}
	}
	@media screen and ( max-width: 540px ){	
		.title{ height:1rem; }
		.title ul li{ font-size:1.4rem;padding:0 8px; }
		.title ul{  padding:10px 0;}
	}
			
/* --主視覺-- */
.kv01{ width:100%; background: url(../images/bg_01.jpg) top center no-repeat; height:670px;}	
.kv01_content{ width:1200px; margin:0 auto; position:relative;}
.sale{ position:absolute; top:280px; left:25px;}


.kv02{ width:100%; background: url(../images/bg_02.jpg) top center no-repeat; height:595px;}	
.kv02_content{ width:1200px; margin:0 auto; position:relative;}
.pic01{ position:absolute; top:40px; left:0px;}
.movie{ position:absolute; top:225px; left:710px; z-index:20;}

.kv03{ width:100%; background: url(../images/bg_03.jpg) top center no-repeat; height:655px;}	
.kv03_content{ width:1200px; margin:0 auto; position:relative;}
.pic02{ position:absolute; top:108px; left:24px;}
.pic03{ position:absolute; top:350px; left:20px;}
.pic04{ position:absolute; top:105px; left:390px;}
.pic05{ position:absolute; top:20px; left:722px;}

.kv04{ width:100%; background: url(../images/bg_04.jpg) top center no-repeat; height:1400px;}	
.kv04_content{ width:1200px; margin:0 auto; position:relative;}
.pic06{ position:absolute; top:0px; left:0px;}
.pic07{ position:absolute; top:780px; left:0px;}

.kv05{ width:100%; background: url(../images/bg_05.jpg) top center no-repeat; height:290px;}	
.kv05_content{ width:1200px; margin:0 auto; position:relative;}
.btn01{ position:absolute; top:92px; left:26px;}
.btn02{ position:absolute; top:92px; left:260px;}
.btn03{ position:absolute; top:92px; left:494px;}
.btn04{ position:absolute; top:92px; left:728px;}
.btn05{ position:absolute; top:92px; left:962px;}



.kv_m{ display:none;}
	@media screen and ( max-width: 768px ){
		.kv01, .kv02, .kv03, .kv04, .kv05{ display:none;}
		.kv{ background:none; height:auto;}
		.kv_content{ width:100%;}
		.kv_m{ display:block; width:100vw;}
		.kv_m img{ width:100vw; display:block;}	
		.movie {
			top:0px;
			left:0px;
	height: 0px;
	padding-top: 0px;
	padding-bottom: 56.2%;
	position: relative;
	width: 95%;
	margin: auto;}
	.movie iframe {
	width: 100%;
	height: 100%;
	position: absolute;}
	.kv_m .item50 {width:50%; text-align:center; margin:0%; float:left; }
	}




/* --公版-- */
.box01{background: none; background: url(../images/bg_06.jpg) top center no-repeat; height:655px;}
.box01_content{ width:1160px; padding:30px 0px; background: url(../images/bg_o.jpg) top center repeat;}
	@media screen and ( max-width: 768px ){
.box01{background: none;background: url(../images/bg.jpg) top center repeat; height:auto;}
.box01_content{ padding:0 2vw;background: url(../images/m/bgm.jpg) top center repeat; width:95vw;}
}

.block{ padding:200px 70px 0px 70px ; min-width:1100px;margin:0 auto; display:flex; flex-wrap:wrap;align-item:stretch;}
.block li {width:240px; background-color:#fff; text-align:center;padding:4px; overflow:hidden; margin-right:20px; display:inline-block; vertical-align:top; margin-bottom:15px;transition:all 0.5s;}
.block li:hover{ transform: translateY(-8px);}
.block li:nth-child(4n){margin-right:0px;}
.block li div{width:232px;height:232px;overflow:hidden; vertical-align:middle;line-height:228px; margin-bottom:4px;}
.block li img{ max-width:100%; max-height:100%; margin:0 auto; vertical-align:middle;transition:all 0.5s;}
.block li h2{ height:auto; font-size:16px; line-height:0.7rem; color:#fff; text-align:center; font-weight:500; position:relative;overflow: hidden;  margin:4px 0px 0px 0px; background-color:#225691; padding:6px; width:232px;}
.block li p{ height:auto; font-size:18px; line-height:20px; color:#225691; text-align:center; font-weight:600; position:relative;overflow: hidden; z-index:10; padding-bottom:12px; padding-top:8px; border-bottom:1px #225691 solid;}
.block li h4{ height:auto; font-size:0.75rem; line-height:1.5rem; color:#8b2c3d; text-align:center; font-weight:500; position:relative;padding-top:8px;}
.block li h4 span{  height:auto; font-size:1.5rem; line-height:1.5rem; color:#8b2c3d; text-align:center; font-weight:900; position:relative;font-family:'Century Gothic'}

	@media screen and ( max-width: 768px ){
.block{ padding:2vw 0 2vw 0; min-width:96vw;margin:0 auto;}
.block li {width:44.5vw; padding:1vw; overflow:hidden; margin-right:2vw; margin-bottom:2vw;}
.block li:hover{box-shadow:none;}
.block li:nth-child(2n){margin-right:0px;}
.block li:nth-child(4n){margin-right:0px;}
.block li div{width:40vw;height:40vw;overflow:hidden;vertical-align:middle; margin:0 auto; line-height:44vw;margin-bottom:2vw;}
.block li img{line-height:0; vertical-align:top; transition:all 0.5s;vertical-align:middle;}
.block li h2{ font-size:0.7rem; line-height:1rem;  margin:0px 0px 0px 0px;  padding:5px; width:auto;}
.block li p{font-size:0.7rem; line-height:1rem; padding-bottom:3%; padding-top:2%;}
.block li h4{font-size:0.5rem; line-height:1.5rem;padding-top:3%;}
.block li h4 span{  font-size:1.2rem; line-height:1.5rem; }}


.block4X1{background: url(../images/block4X1.jpg) top center no-repeat;}
	@media screen and ( max-width: 768px ){
.block4X1{ background:none;}
		
}




/* --公版-- */
.box02{background: none; background: url(../images/bg_07.jpg) top center no-repeat; height:475px;}
.box03{background: none; background: url(../images/bg_08.jpg) top center no-repeat; height:510px;}
.box023_content{ width:1160px; padding:30px 0px; background: url(../images/bg_o.jpg) top center repeat;}
	@media screen and ( max-width: 768px ){
.box02, .box03{background: none;background: url(../images/bg.jpg) top center repeat; height:auto;}
.box23_content{ padding:0 2vw;background: url(../images/m/bgm.jpg) top center repeat; width:95vw;}
}

.block23{ padding:42px 70px; min-width:1100px;margin:0 auto; display:flex; flex-wrap:wrap;align-item:stretch;}
.block23 li {width:240px; background-color:#fff; text-align:center;padding:4px; overflow:hidden; margin-right:20px; display:inline-block; vertical-align:top; margin-bottom:15px;transition:all 0.5s;}
.block23 li:hover{ transform: translateY(-8px);}
.block23 li:nth-child(4n){margin-right:0px;}
.block23 li div{width:232px;height:232px;overflow:hidden; vertical-align:middle;line-height:228px; margin-bottom:4px;}
.block23 li img{ max-width:100%; max-height:100%; margin:0 auto; vertical-align:middle;transition:all 0.5s;}
.block23 li h2{ height:auto; font-size:16px; line-height:0.7rem; color:#fff; text-align:center; font-weight:500; position:relative;overflow: hidden;  margin:4px 0px 0px 0px; background-color:#225691; padding:6px; width:232px;}
.block23 li p{ height:auto; font-size:18px; line-height:20px; color:#225691; text-align:center; font-weight:600; position:relative;overflow: hidden; z-index:10; padding-bottom:12px; padding-top:8px; border-bottom:1px #225691 solid;}
.block23 li h4{ height:auto; font-size:0.75rem; line-height:1.5rem; color:#8b2c3d; text-align:center; font-weight:500; position:relative;padding-top:8px;}
.block23 li h4 span{  height:auto; font-size:1.5rem; line-height:1.5rem; color:#8b2c3d; text-align:center; font-weight:900; position:relative;font-family:'Century Gothic'}

	@media screen and ( max-width: 768px ){
.block23{ padding:2vw 0 2vw 0; min-width:96vw;margin:0 auto;}
.block23 li {width:44.5vw; padding:1vw; overflow:hidden; margin-right:2vw; margin-bottom:2vw;}
.block23 li:hover{box-shadow:none;}
.block23 li:nth-child(2n){margin-right:0px;}
.block23 li:nth-child(4n){margin-right:0px;}
.block23 li div{width:40vw;height:40vw;overflow:hidden;vertical-align:middle; margin:0 auto; line-height:44vw;margin-bottom:2vw;}
.block23 li img{line-height:0; vertical-align:top; transition:all 0.5s;vertical-align:middle;}
.block23 li h2{ font-size:0.7rem; line-height:1rem;  margin:0px 0px 0px 0px;  padding:5px; width:auto;}
.block23 li p{font-size:0.7rem; line-height:1rem; padding-bottom:3%; padding-top:2%;}
.block23 li h4{font-size:0.5rem; line-height:1.5rem;padding-top:3%;}
.block23 li h4 span{  font-size:1.2rem; line-height:1.5rem; }}


.block234X1{background: url(../images/block4X1.jpg) top center no-repeat;}
	@media screen and ( max-width: 768px ){
.block234X1{ background:none;}
		
}











	
/*ad*/
.ad{ width:100%; margin:0 auto; padding:10px 0; background:url(../images/bg.jpg) repeat;  }
.ad_content{ width:1200px; margin:0 auto; position:relative; background:url(../images/bg02.jpg) repeat; padding-left:20px;}
	@media screen and ( max-width: 768px ){
		.ad{ padding-top:1%;}
		.ad_content{ height:auto; width:95%; padding-left:5%; margin-top:5%;}	
	}
.banner { margin:auto; max-width:1200px; text-align:center; padding:3% 1.5%;}
.banner li{ display:inline-block; width:48%; margin:0.6% 0.5%;}
/*.banner li:nth-child(1), .banner li:nth-child(4){ width:97.2%;}*/
.banner li img{ width:100%;}
	@media screen and ( max-width: 768px ){
		.banner { padding:5% 0% 5% 0%;}
		.banner li, .banner li:nth-child(1), .banner li:nth-child(2){ width:95%; margin:1% 0;}
	}	







	

/*手機 下方選單*/
menu{ display:none;}
	@media screen and ( max-width: 768px ){
		menu{
			display:inherit; width:100%;
		}
		menu ul{
			position:fixed;
			bottom:0;
			left:0;
			margin:0;
			width:100%;
			display:flex; justify-content:center; text-align:center;
			flex-wrap: nowrap;
			background-color:rgba(246,235,220,0.95);
			z-index:999;
			padding:4.5px 0;
			/*border-top:4px solid #1c2a5d;*/
		}
		menu ul li{
			border-right:1px solid #b96f6f;
			padding:0.5px 2%;
			min-width:25%;
			box-sizing:border-box;
			font-size:14px;
			font-family:'Noto Sans TC','Microsoft JhengHei','Heiti TC','Heiti TC';
		}
		menu ul li:nth-last-child(1){ border-right:none;}
		menu a{
			color:#1c2a5d;
			text-decoration: none;
		}
	}
	
/*--goto top--*/
#button {
  display: inline-block;
  background-color: #000;
  opacity:0.3;
  width: 35px;
  height: 35px;
  text-align: center;
  border-radius: 100%;
  position: fixed;
  bottom: 15px;
  right: 15px;
  transition: background-color .3s, opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
	@media screen and ( max-width: 768px ){
		#button {
		bottom: 40px; right: 10px;}
	}

#button::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:45%;background-position:40% 22%;
}
#button:hover {
  cursor: pointer;
  background-color: #666;
}
#button:active {
  background-color: #666;
}
#button.show {
  opacity: 0.4;
  visibility: visible;
}