@charset "utf-8";
/* CSS Document */
.side, .main{padding:1em;}
.innerhtml{line-height:200%;}
.content{padding:3em 0;background: #fff;}
/*loading*/
.loading{width:100vw; height:100vh; background:#000; color:rgba(255,255,255,0.5); position:fixed; top:0; left:0; z-index: 2000; animation-name:fade; animation-delay: 1s; animation-fill-mode:forwards; animation-duration: 1.5s;  animation-timing-function: ease-out;}
.loading h4{position:absolute; font-size:200%; top:50%; left:50%; transform:translate(-50%,-50%);  font-family: 'Poiret One', cursive; font-weight: normal; letter-spacing: 2px;}
.loading h4::before{content:""; position:absolute; top:0; right:0; width:0; height:100%;  background:#000; animation-name:load; animation-duration: 1s;  animation-fill-mode:forwards; animation-timing-function: ease-out;}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes load {
  0%   {width:100%;}
  100% {width:0;}
}

/* Standard syntax */
@keyframes load {
  0%   {width:100%;}
  100% {width:0;}
}
@-webkit-keyframes fade {
  0%   {opacity:1;}
  0%   {opacity:1;}
  100% {opacity:0; z-index: -1;}
}

/* Standard syntax */
@keyframes fade {
  0%   {opacity:1;}
  0%   {opacity:1;}
  100% {opacity:0; z-index: -1;}
}

/*nav*/
.nav ul li a{color:#fff; font-size:18px;padding: 3.5em 0.5em 1.7em 0.5em;}
.nav ul li a:hover{color:#ff6969; border-radius: 0.3em 0.3em 0 0;}
.nav ul li a.icon{padding-left:0.3em; padding-right:0.3em;}
#header{padding-top: 10px; transition:.3s; background:rgba(0,0,0,0.8);}
#header .page{padding:0;position: relative;}
#header.show{background:rgba(0,0,0,0.6); padding-top:0;}
.logo img{filter:drop-shadow(0 0 5px rgba(255,255,255,0.4));}
.nav ul li a.hit{background:#006699; color: #fff; border-radius: 0.3em 0.3em 0 0;}
#defaultimg.banner { height: 40vh;background: linear-gradient(rgba(0,0,0,0) 90%,rgba(0,0,0,0.5));}
#defaultimg.banner h4 {text-align: center;font-size: 280%;color: #fff;font-weight: normal;position: absolute;display: block; left: 50%;top: 23%; line-height: 160%;border: 1px solid #fff;transform: translate(-50%,-50%);font-family: 'Lora', serif;text-shadow: 0 0 10px rgba(0,0,0,0.8);letter-spacing: 3px;padding: 0 0.3em;background: rgba(0,0,0,0.3);}
#defaultimg.banner h4 span {font-size: 16px;display: block;text-align: center;}
.language {font-size: 13px;display: inline-block;position: absolute; right: 1em;color: #ccc;}
#header.show .language{top: 0;}
#defaultimg-d {line-height: 0;width: 100%;height: auto;float: left;z-index: 300;}
.language a {color: #ccc;padding: .3em .5em;}
.language a:hover{color:#ff6969;}

/*default use*/
.bgimg { width: 100%;height: 100vh;position: fixed;top: 0;left: 0;z-index: -2;}
.d-line{line-height: 0;height: 85vh;position: relative;}
.d-line img{position: absolute;bottom:0;left:0;}
.d-area{background:#eeecec; padding: 7em 0 3em 0;margin-top: -4em;}
.d-area2{background: url(images/d-area2-bg.jpg) no-repeat top left;    padding: 4em 0;}
.d-area2 .d-conteant{background: url(images/d-about-bg.jpg) no-repeat top left; background-size: cover;}
.d-area2 .d-about{background: rgba(0,0,0,0.8);color: #fff;padding:0 1.5em;margin-left: 3em;}
.d-area2 .d-about h4{font-size: 28px;}
.d-area2 .d-about p{font-size: 15px;line-height: 180%;font-family: '新細明體';}
.d-area3{background: #000;padding: 4em 0;}
.d-area3 h4.tit{color: #fff;font-size: 51px;    margin: 0;}
.d-area3 h4.tit span{display: block;font-size: 27px;color: #bb1103;}
.d-area3 .col-8{text-align: center;}
.d-area3 .col-8 h4{color: #fff;font-size: 18px; font-weight: normal;}

/*content*/
.sidetit{font-weight:normal; color:#163f92; background:#efefef; padding:0.5em 0.3em;}
h1.subject{font-size:24px;}
.more{text-align: right;padding: 2em 0;}
.more a{color: #fff;}
.more a:hover{color: #fa0909;}
.more a:hover::after{color: #fff;b}
.more a::after{content: "+";color: #fa0909;padding-left: 1em;}
h3.subject{text-align: center;}

.product .subnav ul{margin:0; padding:0; list-style:none;  font-size:16px;}
.product .subnav ul li{padding:0;display:inherit;text-align: left;}
.product .subnav ul li a{color: #333;padding: 0.7em 1em;border-bottom: 1px solid #fff;background: #ededed;border-top: none;border-left: none;border-right: none;border-radius: 0;}
.product .subnav ul li a.hit{background:#efefef;}
.product .subnav ul li ul li a::before{content:"-"; margin-right:0.5em; color:#ccc;}
.product .subnav ul li ul li a{font-size:14px; color:#666; border-bottom:1px dotted #ccc; padding:0.4em 0 0.4em 1em;}
.product .subnav a:hover{color:#fff; padding-left:1em;background: #8c8c8c;}
.product .subnav a{width:100%; color:#fff; display:block; padding-left:0.5em;}
.product .list h3{text-align: center;}
.news .list h3{text-align: left;}
.news .list figure img{transition:.5s;}
.news .list a:hover img{transform:scale(1.2, 1.2);}
.news .col-5,.news .col-7{padding: 1em;}


/*list*/
.list{padding:1em;}

.list h3{ margin:0; color:#000;font-size: 18px;}
.list p{color: #000;font-size: 13px;}
.list a{width:100%; diaplay:block; float:left; color:#666; /*background:linear-gradient(45deg,#f5f5f5 30%,#e6e5db 50%,#f5f5f5 60%); box-shadow: 0 0 10px rgba(0,0,0,0.2); padding:10px;*/}
.list a:hover{color:#014283; box-shadow: 0 10px 20px rgba(0,0,0,0.2); /*background:linear-gradient(45deg,#f5f5f5 0%,#e6e5db 10%,#f5f5f5 20%);*/}
.list figure img{transition:.3s;border: 1px solid #000;}
.list a:hover img{transform:scale(1.05, 1.05);}
.list a:hover div{color:#333;}
.list a:hover p.more{color:#f00;}
.list a:hover figcaption{opacity:1;}
.list figure{diaplay:block; line-height:0; overflow: hidden; position:relative;}
.list figcaption{position:absolute; top:0; left:0; width:100%; height:100%; opacity:1; text-align: center; color:#fff; background:rgba(1,66,131,0.6); z-index: 100; font-size: 14px; padding-top:30%; opacity:0; transition:.3s;}
.list div{padding:0.3em; min-height: 3em; font-size:14px; color:#666; line-height: 160%;}
.list div p.more{text-align:right; margin:0; color:#666; font-size:12px;}
.list figcaption span{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
/*gallery*/
.list.gallery a{padding:0; background:#fff;}
.list.gallery div{padding:0.3em 1em;}
.list.gallery h3.subject{color:#333;}
.list.gallery a:hover h3.subject{color:#f00;}
/*prodetail*/
.list.propic a{background:#fff; overflow:hidden; line-height: 0;}
.prodetail h1.subject{font-size:22px; margin-top:0; color:#226EB5;}
.prodetail .col-6, .prodetail .col-12{padding:0 1em;}
.prodetail .col-6 img{border:10px solid #fff; filter: drop-shadow(0 -7px 5px rgba(0,0,0,0.1));}
.prodetail h4.subtit{margin-bottom:0.5em; color:#999; border-bottom:1px solid #ccc;}
.prodetail h4.subtit span{display:inline-block; padding:0.3em 1em; border-radius:0.5em 0.5em 0 0; border:1px solid #ccc; border-bottom:none; transform:translateY(2px); background:#fff;}
.prodetail .innerhtml img{border: 0;box-shadow: 0;}
.prodetail .innerhtml .left{background: #E5E0DD;padding: 1em;text-align: center;}
.prodetail .innerhtml .left p{text-align: center;color: #828282;font-family: Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;}
.prodetail .innerhtml ul{list-style:none;padding: 0;}
.prodetail .innerhtml ul li{border-bottom: 1px solid #E5E0DD;padding: 1em;}
.prodetail .innerhtml ul li div{width: 50%;float: left;padding-right: 5px;}
.prodetail .innerhtml h4{width: 100%;height: auto;float: left;color: #666;font-weight: normal;font-size: 18px;padding-left: 0.5em;border-left: 5px solid #ccc;}
.list.propic{ padding: 0;}
.prodetail .propic img{border: 0px solid #fff; transition: .3s;}



/*ani*/
.ani7{opacity:0; transition:1s; transform:scale(0.8,0.8); transition-timing-function: ease;}
.ani7.zoomintype{opacity:1; transform:scale(1,1);}

/*footer*/
#footer{font-size:13px; color:#000; background:#eeecec; word-break: break-all; line-height: 1.5em; padding:3em 0;}
#footer .col-6 .col-4 h4{font-weight:normal;font-size: 15px;margin: 0;}
#footer .col-6 .col-4 ul{list-style: none;padding: 0;}
#footer .col-6 .col-4 ul li a{color: #515154;font-size: 15px;    line-height: 180%;}
#footer .col-6 .col-4 ul li a:hover{color: #ff6969;}
#footer .right{float: right;}
#footer .right p{line-height: 200%;font-size: 13px;}


.copyright{background: #000;color: #fff;text-align: center;font-size: 13px;padding: 1em 0;}

@media screen and (max-width:1480px){/*desktop*/
	.d-line{height: 80vh;}.d-line{height: 73vh;}
	
}
@media screen and (max-width:1280px){/*desktop*/
	.logo{padding-top:0.5em;}
	.page{padding:0 3%;}
	.d-line {height: 70vh;}
	#defaultimg.banner{height: 35vh;}
	
}
@media screen and (max-width:960px){/*desktop-small pad*/
	
	.d-line {height: 50vh;}
	.nav ul li a {font-size: 15px;}
	.nav ul li a { padding: 3em 0.5em 1.7em 0.5em;}
	.d-area3 h4.tit{font-size: 45px;}
	#defaultimg.banner {height: 27vh;}
	#defaultimg.banner h4 {font-size: 200%;top: 18%;}
	
	
}
@media screen and (max-width:767px){/*phone*/
	#header {padding: 10px 0 10px 5px;}
	.nav ul li a{color:#ccc;}
	.nav ul li{ border-bottom:1px solid #666;}
	.page{padding:0 3%;}
	.d-line {height: 82vh;}
	.nav ul li a{    padding: 1em 0;}
	.d-area2 .d-about{margin: 0;}
	.d-area2 .d-conteant{display: flex; justify-content: center;}
	.d-area3 .col-8 .col-20{border: 1px #847359 solid;}
	.d-area3 h4.tit{margin-bottom: 0.5em;}
	.copyright span{display: none;}
	.d-area3{ padding: 2.5em 0;}
	.subnav ul li{display: inherit;}
	.subnav ul li a{border-top: 1px dotted #ccc;border-bottom: 0;border-left: 0;border-right: 0;}
	#defaultimg.banner {height: 28vh;}
	#defaultimg.banner h4 {font-size: 150%;border: none;background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.6));top: 14%;}
	#header { position: fixed;}
	
}