/* 2025/10 update start  */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');
.noto-serif-tc-<uniquifier> {
  font-family: "Noto Serif TC", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
/* 2025/10 update end  */

html, body { height: 100%; }
body { font-family: "Noto Serif TC", serif; font-weight: 400; font-size: .95em; letter-spacing: .095em; line-height: 1.85em; color: #333333; background-color: #EAEAEA; text-shadow: 1px 1px #fcfcfc; text-align: justify; }
input , select, textarea { font-family: "Noto Serif TC", serif; font-weight: 400; letter-spacing:1px; }
/*.clearfix { clear: both; }*/
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; } /* Hides from IE-mac \*/
.clearfix { display: block; }


/*img , */a , input {
	-webkit-transition: all ease .3s;
  -o-transition: all ease .3s;
  -moz-transition: all ease .3s;
  -ms-transition: all ease .3s;
  transition: all ease .3s; }

a img:hover {opacity: .75; }
.left { float: left; }
.right { float: right; }
.wrapper { height: 100% !important; height: 100%; margin: 0 auto; overflow: hidden; }
a { text-decoration:none; color: #091d23; }
a:hover { color: #999; }

.wrapper h4 { margin:7em 0 3em; font-size:24px; padding: 0 .5em; z-index: 99; position: relative;  line-height: 1.4em; }
.wrapper h4 > span { font-size: 12px; font-family: "Noto Serif TC", serif; font-weight: 400; font-style: italic; display: block; margin: .2em 0; text-transform: capitalize; }


/* Index */
.main { float: left; width: 100%; margin: 0 auto; }
.main section .page_container { position: relative; top: 25%; margin: 0 auto 0; width:100%; max-width: 1080px; padding:50px; z-index: 3;  }
.main section { overflow: hidden; }
.main section > img { position: absolute; max-width: 100%;  z-index: 1; }
.main h1  { font-size:21px; margin-bottom: 15px;  }
.main h2 { width: 435px; margin-bottom: 15px;  }
.main section.page1 h1 { }
.main section.page1 h2 {  }
.main section.page2 h1 { }
.main section.page2 h2 { }
.main section.page2 { background: url(../images/18_2.png) no-repeat -350px bottom; }
.main section.page3 { background:url(../images/18_3.png) no-repeat right center; }



header { position:fixed; z-index:100; top:0; left:0; width:100%; height:80px; background-color:#FFFFFF; }
header img.logo  { width:180px; margin:20px 0 0 30px; }

span.link a { display:block; width:170px; height:50px; line-height:50px; border:#091d23 solid 1px; text-align:center; color:#091d23; margin-top:50px; }
span.link a:hover { background-color:#FFFFFF; font-size:115%; }


.loop-slider { position:absolute; z-index:1; width:100%; height:350px; margin-top:-200px; top:50%; left:0; }
.loop-slider h3 { padding: 0 10px; text-align:center; font-size:150%; margin-top:2em; letter-spacing:2em; /*font-family: "Mingzijen", serif;*/ }


/* Product */
.category { text-align: center; overflow: inherit; }
ul.item { margin: 80px auto 10em; width: 100%; max-width: 1200px; }
ul.item li { /*float: left;*/ display: inline-block; width: 33%; margin-bottom:3em; vertical-align:top; }
ul.item li p { font-size: 18px; margin: 10px 0; }
ul.item li img.itemModel { display: block; width: auto; max-height: 80px; margin: 30px auto 0 auto; }

.productPage img.imgTitle { width: 100%; max-width: 500px; margin: 0 auto; margin-bottom:10em;  }
.productPage { text-align:center; overflow:inherit; }
.productPage div.info { width:75%; /*padding:50px;*/ margin:0 auto; /*background:#fff;*/ clear: both; }
.productPage div.info h2 { font-size:24px; margin-bottom:.5em; }
.productPage div.info p { }
.productPage div.info img { width: 100%; max-width: 500px; display: block; /*float: left;*/ }

/* Product 2025/10 update start  */
.pro-badge { margin-left: 1em; font-size: 9px; color: #900; text-transform: uppercase; font-weight: 600; }
.pro-badge::after { content: '‼'; padding-left: 2px; }
.item-list { margin: 1em 2em; border-top: #999 dashed 1px; }
.item-list span { display:block; margin: 1em 0; }
.pro-des { display: flex; }
.pro-des div { min-width: 90px;  }

/* Product 2025/10 update end  */


/* contact */
.contact { overflow:inherit; text-align:center; }
.contact div.left, .contact div.right { float:left; width:50%; height:100%; }
.contact div.left > .map { width:100%; height:55%; }
.contact div.left > .info { position:relative; width:100%; height:45%; font-size:125%; color:#fff; background:#333; text-shadow:none; line-height:2em; letter-spacing:2px; }
.contact div.left > .info:before { content: ''; display: inline-block; vertical-align: middle ; height: 100%; }
.contact div.left > .info p { display: inline-block; vertical-align: middle; }
.contact div.left > .info a { color:#fff; }

#map-canvas { height: 100%; }
#map-canvas img { max-width:none; }

.contact div.right h4 { text-align:left; margin:0em 0 3em; font-size:24px; padding: 0 .5em; z-index: 99; position: relative;  line-height: 1.4em; }
.contact div.box { width:80%; max-width:550px; margin:0 auto; }
.contact div.box table { width:100%; text-align:left; margin:30px 0 50px 0; }
.contact div.box td { font-size:18px; color:#666; padding:10px 0; border-bottom:solid 1px #333; }
.contact div.box td.title { width:160px; }

.contact div.box input { width:100%; height:38px; border:none; line-height:38px; border-color:#EAEAEA; color:#666; background:none; }
.contact div.box textarea { width:100%; border-color:#EAEAEA; border:none; background:none; resize:vertical; color:#666; min-height: 60px; }
.contact div.box input.but01 { width:100%; height:auto; font-size:21px; color:#333; border:solid 1px #333; background:none; padding:20px 0; letter-spacing:2px; /*font-family: "Mingzijen", serif;*/}
.contact div.box input.but01:hover { background-color: #333; color: #fff; }
.contact div.left .topButton { display: none; margin-top:8em; }


/* profile */
.profile { overflow: inherit; }
.profile div.info { padding: 0 5%; }
.profile div.info p { width: 100%; max-width: 800px; font-size: 125%; margin: 50px 0 5em; letter-spacing: 2px; line-height: 2em; }

/* stores */
.stores { text-align: center; overflow: inherit; padding-bottom: 50px; }
.stores table { max-width: 800px; width: 90%; margin:25px auto 50px; background-color: #fff; }
.stores table td { vertical-align: middle; text-align:left; border: #ccc solid 1px; padding: 8px 12px; line-height: 1.2em; }
.stores h5 { text-align: center;  font-size: 135%; }
.stores section table td:first-child { vertical-align: top; }

/* classroom */
.classroom { text-align:center; overflow:inherit; padding-bottom:50px; }
.classroom ul { width: 960px; margin: 0 auto; }
.classroom ul li { float: left; margin: 30px; text-align: left; width: 420px; height: 237px; background: white; -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.75); }
.classroom ul li figure { margin: 0; padding: 20px 30px 0;}
.classroom ul li figure h6 { font-size: 18px; border-bottom: #333333 solid 1px; padding-bottom: .3em; margin-bottom: .9em; }
.classroom ul li figure h6 i { font-size: 14px; }
.classroom ul li figure h6 i span { font-size:36px; margin-right: .3em; }
.classroom ul li figure span.date { display: block; margin-top:2em; font-size: 10px; color: #808080; }
.classroom ul li.link { position: relative; background: black; }
.classroom ul li.link a { position: absolute; top: 0; left: 0; z-index: 10; display: block; width: 100%; height: 100%; background: url(../images/icon-view.png) no-repeat center center; }
.classroom ul li.link a:hover { opacity: 0; }
.classroom ul li.phone { display: none; visibility: hidden; }


.topButton { display:block; margin:0 auto 50px; width: 100%; max-width: 200px; text-align: center; }
.topButton div { margin-bottom:15px; }


.arrow_box {
	position: relative;
	background: #ffffff;
	border: 1px solid #333;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	padding: 1em 1.5em;
}
.arrow_box:after, .arrow_box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #ffffff;
	border-width: 10px;
	margin-left: -10px;
}
.arrow_box:before {
	border-color: rgba(51, 51, 51, 0);
	border-top-color: #333;
	border-width: 11px;
	margin-left: -11px;
}

.topButton img { max-height:180px; }

footer { position:  text-align: center; width: 100%; margin: 100px auto; display: block; font-size: 10px; }

.maps { width:100%; height: 100%; }