@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
/* 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;}
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;
	scroll-behavior:smooth;
}
	@media screen and ( max-width: 768px ){
	html, body{ 
			min-width: 320px;
			max-width: 768px;
			width: 100%;
			padding-bottom:5vw;
			background:#18300c;
		}
	}


*{-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 li {
	-webkit-transition-duration:.3s;
	        transition-duration:.3s;
	-webkit-transition-property:transform;
	        transition-property:transform;
	-webkit-transition-timing-function:ease-out;
			transition-timing-function:ease-out;}
.container li:active, .container li:focus, .container li:hover{
	-webkit-transform:translateY(-6px);
		    transform:translateY(-6px);}
.title li:active, .title li:focus, .title li:hover,
.box4_ul li:active, .box4_ul li:focus, .box4_ul li:hover{
		    transform:none !important;}


/* --通用-- */
.container{ max-width:1920px; margin:0 auto; min-width:1200px; background:url(../images/bg_color.png) no-repeat center 800px, url(../images/bg.png) top center repeat;}
.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; }
li{ list-style:none; float:left; }

.title{margin:0 auto; text-align:center; /*border-bottom:1px #261003 solid; height:2rem;*/ margin:15px auto 20px auto; background:url(../images/bg_theme.png) no-repeat center center;}
.title ul{ overflow:visible; padding:20px 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 !important;}
h2{text-align:center; color:#261003; font-size:1rem;font-family:'Noto Sans TC','Microsoft JhengHei','Heiti TC';font-weight:500; letter-spacing:0.5px; padding:10px 10px; line-height:1.1rem; height:66px;align-items: center; vertical-align:middle; display:table-cell;}

.proname{font-family:'Noto Sans TC','Microsoft JhengHei','Heiti TC'; font-weight:normal;color:#261003; font-size:0.75rem; padding:10px 10px 15px 10px;}	
.number{ color:#b23307; font-size:1.7rem; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}	

.ex_text{ position:absolute; top:5px; color:#ffe970; left:25px; font-size:0.9rem; width:1.8rem; font-weight:500;}
.ex_tag{ position:absolute; width:70px; top:-8px; left:15px;}
	@media screen and ( max-width: 768px ){
		.container{width:100vw; max-width:768px; min-width:320px; max-width:100vw;}
		.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;}
		.proname{font-size:0.6rem;}	
        .number{font-size:1.2rem;}
		.title{ margin-bottom:30px; background:url(../images/mbg_theme.png) no-repeat center center/100%; }
		.title ul li{ font-size:1.6rem;padding:0 10px;}
		.title ul{  padding:20px 0;}
		.ex_text{top:5px; left:4vw; font-size:1rem; width:2.4rem; line-height:1.1rem;}
	}
	@media screen and ( max-width: 540px ){	
		.title{ margin-bottom:20px; }
		.title ul li{ font-size:1.4rem;padding:0 8px;}
		.title ul{  padding:10px 0;}
		.ex_text{font-size:0.7rem; width:1.4rem; line-height:0.9rem;}
	}
			
/* --主視覺-- */
.kv{width:100%; background:url(../images/kv.jpg) top center no-repeat; height:672px; display:block;}			
.link{ width:100%;background: url(../images/link_bg.jpg) top center repeat; height:159px; position:relative;}	
.link_content, .kv_pc, .promotion{ width:1200px; margin:0 auto; min-width:1200px; position:relative;}

.kvtitle{ position:absolute; top:77px; left:275px;}
.sp{ position:absolute; top:300px; left:491px;}

.link1{ z-index:99; position:absolute; top:32px; left:18px; overflow:hidden;}
.link2{ z-index:99; position:absolute; top:32px; left:415px; overflow:hidden;}
.link3{ z-index:99; position:absolute; top:32px; left:810px; overflow:hidden;}
.link1 img,.link2 img,.link3 img{ width:370px;}

.link_content{ display:block;} /*close*/
.promotion{ display:none; text-align:center; padding:18px;} /*open*/
.promotion img{ max-width:100%; height:auto; margin:0 1%;}

.kv_m{ display:none;}
	@media screen and ( max-width: 768px ){
		.kv{ width:100vw; background:none; height:auto;}
		
		.kv_pc{ display:none;}
		.kv_m{ width:100vw; display:block;}
		.kv_m img{ width:100%;}

		.link{ width:100vw; height:auto; padding:5vw 0;}
		.link_content{ width:96vw; min-width:100%;}	
		.link1{ display:block;position: relative; top:0; left:0; width:90vw; margin:0 5vw 3vw 5vw;}
		.link1 img,.link2 img,.link3 img{ width:90vw; display:block;}
		.link2{ display:block;position: relative; top:0; left:0; width:90vw; margin:0 5vw 3vw 5vw;}
		.link3{ display:block;position: relative; top:0; left:0; width:90vw; margin:0 5vw 0vw 5vw;}
	
		.promotion{ width:96vw; height:auto; display:block; min-width:100%; padding:0;}	
		.promotion img{ width:90vw; display:block; margin:2vw auto;}
	}


/* 1_1x3 */	
.box2_block{padding:0px; height:370px; width:370px; line-height:364px; }
.box2_ul li{ width:370px; background-color:#f3e093; margin:0 25px 20px 0; text-align:center; position:relative;}
.box2_ul li:nth-child(3n){ margin-right:0px;}
.box2_ul li img{max-height:370px; max-width:370px; vertical-align: middle; margin:0 auto; padding:0px;}		
	@media screen and ( max-width: 768px ){
		.box2_ul{ width:96vw;}
		.box2_ul li{ width:80vw; margin:0 8vw 5% 8vw;}
		.box2_block{ width:80vw; height:auto; line-height:0; margin-top:3%;}
		.box2_ul li img{ max-height:80vw; max-width:80vw; vertical-align:top;}
	}	
	@media screen and ( max-width: 490px ){
		.box2_block{ margin-top:0;}
		.box2_ul{ width:96vw; }
		.box2_ul li{ width:90vw; margin:0 3vw 5% 3vw; margin-right:0;}
		.box2_block{ width:90vw; height:auto; line-height:0; margin-top:3%;}
	}	

/* 2_1x4 */	
.box3_ul{ overflow:visible; display:flex; flex-wrap:wrap; align-items:stretch;}
.box3_ul li{ width:278px; display:inline-block; margin:0 16px 20px 0; text-align:center; background-color:#fff; padding:10px;transition:all 0.5s; position:relative; overflow:visible;vertical-align:top;}
.box3_ul li div{ overflow:hidden;}
.box3_ul li:hover{ transform: translateY(-8px);}
.box3_ul li:nth-child(4n){ margin-right:0px;}
.box3_block{height:258px; width:258px;vertical-align: middle;margin:0 auto; line-height:256px;box-sizing: border-box;}
.box3_ul li img{max-height:258px; max-width:258px;transition:all 0.5s; margin:0 auto;vertical-align: middle;}
.box3 h2{ padding-top:0px;padding-bottom:0px; font-size:1rem;}
.box3 i::after{ border-bottom:#e2b64b 1px solid; width:100%; content:''; display:block; padding-top:3px; margin-bottom:8px;}
.box3_ul li h5{ font-size:0.8rem; color:#261003;font-family:'Noto Sans TC','Microsoft JhengHei','Heiti TC';}
.box3_ul li h5 span{ font-size:1.1rem;font-weight:700; color:#b23307;}
	@media screen and ( max-width: 768px ){
		.conten3{background: url(../images/bg_02.png) top center repeat; border-radius:0px; }
		.box3_ul{ margin:0 2vw; margin-top:4vw;}
		.box3_ul li{ width:44vw; margin:3% 1vw;}
		.box3_block{ width:40vw; height:40vw; line-height:40vw;}
		.box3_ul li img{ max-width:100%; max-height:100%; margin:0; padding:0;}
		.ex_tag{ position:absolute; width:15vw; top:-1.5vw; left:2vw;}
		.box3 span::after{  content:''; padding-top:0px; margin-bottom:3px;}
		.box3 h2{ font-size:0.7rem; line-height:1rem; height:10vw;}
		.box3_ul li h5{ font-size:0.8rem; color:#261003;font-family:'Noto Sans TC','Microsoft JhengHei','Heiti TC';}
		.box3_ul li h5 span{ font-size:1rem;font-weight:700; color:#b23307;}
		.box3_ul li p{ font-size:0.6rem;}
	}
	@media screen and ( max-width: 540px ){
		.box3 h2{ font-size:0.7rem; line-height:1rem; height:14vw;}
	}


/* 3_1x2 */
.box4_ul{ width:570px; background:#fff; display:inline-block; margin-right:13px; padding:10px; margin-bottom:25px;transition:all 0.5s; position:relative; overflow: visible;}
.b4display{ display:inline-block;}
.box4_ul a{ display:block;float:left;}
.box4_ul:hover{ transform: translateY(-8px);}
.box4_ul2{ margin-right:0px;}
.box4_ul li:nth-child(1){ width:264px; height:264px; vertical-align:middle; display:inline-block; margin-right:7px; border:1px #ccc solid; line-height:258px;}
.box4_ul li:nth-child(1) img{ max-height:264px; max-width:264px;vertical-align:middle;}
.box4_ul li:nth-child(2){width:278px; margin:0 auto; text-align:center; border-top:1px #261003 solid; border-right:1px #261003 solid; margin-bottom:4px; padding-top:6px;}
.box4_ul li:nth-child(2) h2{ width:278px;}
.box4_ul li:nth-child(3){ width:136px; height:136px; overflow:hidden; display:inline-block; margin:0px 6px 0 0; border:1px #ccc solid; padding:0;}
.box4_ul li:nth-child(3) img{ width:100%;}
.box4_ul li:nth-child(4){ width:136px; height:136px;overflow:hidden; display:inline-block; border:1px #ccc solid;}
.box4_ul li:nth-child(4) img{ width:100%; }
	@media screen and ( max-width: 768px ){
		.conten4{background: url(../images/bg_03.png) top center repeat;}
	.box4_ul{ width:96vw;}
		.box4_ul li:nth-child(1){ width:44vw; height:44vw; text-align:center;line-height:44vw;}
		.box4_ul li:nth-child(1) img{ max-width:100%; max-height:100%;}
		.box4_ul li:nth-child(4) img{ max-width:100%; max-height:100%;}
		.box4_ul li:nth-child(3) img{ max-width:100%; max-height:100%;}
		.box4_ul li:nth-child(2){ width:47vw; height:20.8vw; margin-bottom:1vw;}
		.box4_ul li:nth-child(2) h2{ width:47vw;}
		.box4_ul li:nth-child(3),.box4_ul li:nth-child(4){ width:22vw; height:22vw;}
	}
	@media screen and ( max-width: 540px ){
		.b4display{ width:96vw; margin:0 auto; padding:0 3vw; margin-bottom:3.5vw;}
	.box4_ul{ width:90vw; margin:0 auto; padding:2vw;}
		.box4_ul li:nth-child(1){ width:86vw; height:auto;}
		.box4_ul li:nth-child(2){ width:86vw; height:auto; margin-bottom:1vw; border:none;}
		.box4_ul li:nth-child(2) h2{ width:86vw;}
		.box4_ul li:nth-child(3),.box4_ul li:nth-child(4){ width:42vw; height:auto;}
	}
	
	
/* 4_circle */
/* extra_全站公版_keyword*/
.keyword { max-width:1200px; margin:0 auto; padding:0 10px 30px 10px; text-align:center;  }
.keyword div { display:flex; justify-content:center; align-content:center; }
.keyword div div { width:130px; height:130px; border-radius:50%; margin:0.5%; background:url(../images/bg_keyword.png) repeat; transition:all 0.3s; display:grid;}
/*.keyword div div:nth-last-child(odd) { background-color:#f0f0f0; }*/
.keyword div div:hover { border-radius:20px;}
.keyword div div span { color:#e2cd8c; font-weight:bold; letter-spacing:2px; font-size:28px; line-height:30px; }
	@media screen and ( max-width: 768px ){
		.keyword { padding:1% 0 4% 0; background:url(../images/m/bg4.png) repeat; }
		.keyword div { flex-wrap:wrap; }
		.keyword div div { width:22vw; height:22vw; margin:0.8vw; }
		.keyword div div span { font-size:2em; line-height:1.1em; }
	}
	@media screen and ( max-width: 540px ){
		.keyword div div span { font-weight:unset; letter-spacing:1px; font-size:1em; line-height:1.1em; }
	}






/* --BACKGROUND-- */
.box2{ background:url(../images/bg_03.jpg) no-repeat center top; height: 1105px;}
.box3{ background:url(../images/bg_04.jpg) no-repeat center top; height: 892px;}
.box4{ background:url(../images/bg_06.jpg) no-repeat center top; height: 1021px;}
.box5{ background:url(../images/bg_07.jpg) no-repeat center top; height: 277px;}
	@media screen and ( max-width: 768px ){
		.box2{ background:url(../images/mbg_box1.png) repeat; height: auto;}
		.box3{ background:url(../images/mbg_box2.jpg) no-repeat center bottom/100%, url(../images/mbg_box1.png) repeat; height:auto;}
		.box4{ background:url(../images/mbg_box1.png) repeat;height: auto;}
		.box5{ background:url(../images/mbg_box1.png) repeat;height: auto;}
	}





/* --AD-- */
.contenAD , .boxAD{ background:url(../images/bg_05.jpg) top center repeat; padding:0px 0px 15px 0px; height:332px;}
.boxAD ul{ padding-top:25px;}
.boxAD ul a{ display:block;float:left;}
.boxAD ul li{ width:586px; margin-right:20px; overflow:hidden;transition:all 0.5s;}
.boxAD ul li:hover{ transform: translateY(-8px);}
.boxAD ul li img{ width:100%;}
.boxAD ul li:nth-child(2n){margin-right:0px;}
	@media screen and ( max-width: 768px ){
		.contenAD , .boxAD{ padding:0px 0px 0px 0px; height:auto;}
		.boxAD ul{ padding-top:3vw;}
		.boxAD ul li{ width:96vw; margin:0 auto 2vw auto;}	
		.boxAD ul li img{ width:96vw;}
	}

/* menu for mobile*/
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:#fff;
			z-index:999;
			padding:4.5px 0;
			/*border-top:4px solid #000;*/ 
		}
		menu ul li{
			border-right:1px solid #000;
			padding:0.5px 2%;
			min-width:25%;
			box-sizing:border-box;
			font-size:12px;
			font-family:'Noto Sans TC','Microsoft JhengHei','Heiti TC','Heiti TC';
		}
		menu ul li:nth-last-child(1){ border-right:none;}
		menu a{
			color:#000;
			text-decoration: none;
		}
	}
	

/*--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;
  }
  @media screen and ( max-width: 768px ){
	  #gotop {
		  bottom: 12vw;
		  right: 0;
		  margin: 2vw;	
	  }
  }
  
  #gotop::after {
	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% 30%;
  }
  #gotop:hover {
	cursor: pointer;
	background-color: #666;
  }
  #gotop:active {
	background-color: #666;
  }
  #gotop.show {
	opacity: 0.4;
	visibility: visible;
  }