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

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, th, td { padding: 0; margin:0; }
html, body { height: 100%; }

body {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

img {
	border-style: none;
	max-width: 100%;
	width: auto;
}
img[usemap], map area {
	outline: none;
}

iframe , img {
  display: block;
}

.pp_gallery img {
	width: 50px;
}



header {
  position: relative;
  background-image: url(../img/header.gif);
  background-position: -80px top;
  background-repeat: no-repeat;
  height: 227px;
  border-bottom: 18px solid #808080;
}
@media screen and (max-width: 1200px) {
	header {
		background-size: 1156px 130px;
		background-position: -136px top;
		height: 213px;
	}
}
@media screen and (max-width: 1000px) {
	header {
		background-position: right top;
	}
}
@media screen and (max-width: 767px) {
	header {
		background-position: 0 top;
	}
}

header.active {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 65px;
	background-color: #000;
	background-position: center -144px;
	z-index: 999;
	border-bottom:none;
}

#menu.active {
  position: relative;
  width: 1200px;
  top: auto;
  left: auto;
  bottom: auto;
  margin: auto;
}
@media screen and (max-width: 1200px) {
	#menu.active {
		width: 1000px;
	}
}
  

#menu {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 65px;
  background-color: #000;
}
@media screen and (max-width: 1000px) {
	#menu {
		overflow-x: scroll;
		overflow-y: hidden;
	}
	#menu dl {
		position: relative;
		white-space: nowrap;
		width: 1000px;
	}
}

#menu dd {
  float: left;
}
#menu a {
  height: 65px;
  overflow: hidden;
  display: block;
  background-image: url(../img/menu.gif);
  background-repeat: no-repeat;
}

#menu a.on ,
#menu a:hover
{
  display: block;
  height: 65px;
}

a#m_1 { width: 173px; background-position: -20px 0; }
a#m_2 { width: 139px; background-position: -213px 0; }
a#m_3 { width: 137px; background-position: -352px 0; }
a#m_4 { width: 151px; background-position: -489px 0; }
a#m_5 { width: 153px; background-position: -640px 0; }
a#m_6 { width: 110px; background-position: -793px 0; }
a#m_7 { width: 170px; background-position: -903px 0; }
a#m_8 { width: 166px; background-position: -1073px 0; }
@media screen and (max-width: 1200px) {
	a#m_1 { width: 120px; background-position: -80px 0; }
	a#m_2 { width: 120px; background-position: -222px 0; }
	a#m_3 { width: 120px; background-position: -363px 0; }
	a#m_4 { width: 130px; background-position: -500px 0; }
	a#m_5 { width: 130px; background-position: -646px 0; }
	a#m_6 { width: 105px; background-position: -795px 0; }
	a#m_7 { width: 160px; background-position: -909px 0; }
	a#m_8 { width: 115px; background-position: -1066px 0; }
}

a#m_1:hover { background-position: -20px -65px }
a#m_2:hover { background-position: -213px -65px }
a#m_3:hover { background-position: -352px -65px }
a#m_4:hover { background-position: -489px -65px }
a#m_5:hover { background-position: -640px -65px }
a#m_6:hover { background-position: -793px -65px }
a#m_7:hover { background-position: -903px -65px }
a#m_8:hover { background-position: -1073px -65px }
@media screen and (max-width: 1200px) {
	a#m_1:hover { background-position: -80px -65px; }
	a#m_2:hover { background-position: -222px -65px; }
	a#m_3:hover { background-position: -363px -65px; }
	a#m_4:hover { background-position: -500px -65px; }
	a#m_5:hover { background-position: -646px -65px; }
	a#m_6:hover { background-position: -795px -65px; }
	a#m_7:hover { background-position: -909px -65px; }
	a#m_8:hover { background-position: -1066px -65px; }
}

#mh {
    width: 300px;
    height: 144px;
    display: block;
    left: 50px;
    position: absolute;
    top: 0;
	background-image: url(../img/logo.png);
	background-position: center center;
	background-repeat: no-repeat;
}
.active #mh {
    display: none;
}

@media screen and (max-width: 1200px) {
	#mh {
		width: 255px;
		height: 130px;
		left: 10px;
	}
}



















.container {
  width: 1200px;
  margin: auto;
  overflow: hidden;
  padding: 0 0 150px;
}
@media screen and (max-width: 1200px) {
	.container {
		width: 1000px;
	}
}
@media screen and (max-width: 1000px) {
	.container {
		width: 100%;
	}
}
@media screen and (max-width: 767px) {
	.container {
		padding: 0;
	}
}







/* https://codepen.io/nxworld/pen/ZYNOBZ */
/* Zoom In #1 */
.hover01 img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover01:hover img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
.hover01b {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover01b:hover {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
@media screen and (max-width: 767px) {
	.hover01:hover img {
		-webkit-transform: scale(1.05);
		transform: scale(1.05);
	}
	.hover01b:hover {
		-webkit-transform: scale(1.05);
		transform: scale(1.05);
	}
}
  

/* Gray Scale */
.hover08 img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover08:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}
.hover08b {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover08b:hover {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}




/* Shine */
.hover14 {
	position: relative;
}
.hover14::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.hover14:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}















footer {
    font-family: Meiryo, 黑体, 黑體, "Microsoft JhengHei UI", "Microsoft JhengHei", 微軟正黑體, "Microsoft YaHei UI", "Microsoft YaHei", 微软雅黑体, 微軟雅黑體, "Helvetica Neue", Helvetica, "Lucida Grande", Arial, "WenQuanYi Micro Hei", sans-serif;
    font-size: 16px;
    font-weight: normal;
    background-color: #000;
    padding: 30px;
    color: #fff;
    text-align: center;
}

#gotop {
	background-image: url(../img/gotop.png);
	background-repeat: no-repeat;
	display: none;
	width: 45px;
	height: 45px;
	overflow: hidden;
	position: fixed;
	right: 10px;
	bottom: 20px;
	text-indent: -999px;
	z-index: 9999;
}












.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	height: 100%;
	display: block;
}