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;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* 滿版視覺 */
.img-1000 {
    display: block;
    margin: 0 auto;
    max-width: 1000px;
}
.relative {
	position: relative;
}
.absolute {
	position: absolute;
}
.bg01 {
	background: url(../images/bg01.jpg) center 0 no-repeat;
}
.bg02 {
	background: url(../images/bg02.jpg) center 0 no-repeat;
}
.bg03 {
	background: url(../images/bg03.jpg) center 0 no-repeat;
}
.bg04 {
	background: url(../images/bg04.jpg) center 0 no-repeat;
}
.bg05 {
	background: url(../images/bg05.jpg) center 0 no-repeat;
}
.bg06 {
	background: url(../images/bg06.jpg) center 0 no-repeat;
}
.bg07-1 {
	background: url(../images/bg7-1.jpg) center 0 no-repeat;
}
.bg07-2 {
	background: url(../images/bg7-2.jpg) center 0 no-repeat;
}
.bg08 {
	background: url(../images/bg08.jpg) center 0 no-repeat;
}
.bg09 {
	background: url(../images/bg09.jpg) center 0 no-repeat;
}
.bg10 {
	background: url(../images/bg10.jpg) center 0 no-repeat;
}
.bg11 {
	background: url(../images/bg11.jpg) center 0 no-repeat;
}
.bg12 {
	background: url(../images/bg12.jpg) center 0 no-repeat;
}
.bg13 {
	background: url(../images/bg13.jpg) center 0 no-repeat;
}
.bg14 {
	background: url(../images/bg14.jpg) center 0 no-repeat;
}
.bg15 {
	background: url(../images/bg15.jpg) center 0 no-repeat;
}
.bg16 {
	background: url(../images/bg16.jpg) center 0 no-repeat;
}
.bg17 {
	background: url(../images/bg17.jpg) center 0 no-repeat;
}
.bg18 {
	background: url(../images/bg18.jpg) center 0 no-repeat;
}

.bg01 .cut1_title {
	width: 67%;
    left: 16%;
    top: 10.5%;
}
.bg01 .cut1_product {
	width: 68%;
    left: 23.5%;
    top: 26%;
}
.bg01 .cut1_c1 {
	width: 23%;
    left: 0%;
    top: 42%;
}
.bg01 .cut1_c2 {
	width: 23%;
    left: 77%;
    top: 50%;
}
.bg01 .cut1_c3 {
	width: 23%;
    left: 68%;
    top: 67%;
}
.bg02 .cut2_c1 {
	width: 24%;
    left: 70%;
    top: 49%;
}
.bg02 .cut2_c2 {
	width: 28%;
    left: 63%;
    top: 73%;
}
.bg04 .cut4_01_text {
	width: 36%;
    left: 1%;
    top: 6%;
}
.bg04 .cut4_02_text {
	width: 90%;
    left: 7%;
    top: 33%;
}
.bg05 .cut5_product {
	width: 72%;
    left: 14%;
    top: 36%;
}
.bg06 .photo {
	width: 85%;
    left: 8%;
    top: 36%;
}
.bg08 .cut8_c1 {
	width: 35%;
    left: 7%;
    top: 30%;
}
.bg11 .cut11_c1 {
	/* width: 30%; */
    /* left: 69%; */
    /* top: 29%; */
	width: 32%;
    left: 3.2%;
    top: 61.2%;
}
.bg11 .cut11_c2 {
	/* width: 21%; */
    /* left: 0%; */
    /* top: 49%; */
	width: 17.5%;
    left: 73%;
    top: 17.5%;
}
.bg12 .cut12_c1 {
	width: 88%;
    left: 8%;
    top: 20.5%;
}
.bg14 .cut14_btn1_1 {
	width: 32%;
    left: 9.2%;
    top: 49%;
}
.bg14 .cut14_btn1_2 {
	width: 32%;
    left: 59%;
    top: 49%;
}
.bg14 .cut14_btn2 {
	width: 50%;
    left: 25%;
    top: 94%;
}
.bg16 .cut16_texture1 {
	width: 42%;
    left: 4%;
    top: 25%;
}
.bg16 .cut16_texture2 {
	width: 42%;
    left: 52%;
    top: 37%;
}
.bg17 .cut17_btn1 {
	width: 46%;
    left: 27%;
    top: 43%;
}
.bg17 .cut17_btn2 {
	width: 46%;
    left: 27%;
    top: 91%;
}
/* RWD 1000px */
@media screen and (max-width: 1000px) {
    .img-1000 {
        width: 100%;
    }
}

/* ---------- YOUTUBE崁入 ----------*/
.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.video>iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*為影片高度與寬度的比例16:9計算得來，9除以16=0.5625換算高度比0.5625=56.25%*/
	/*padding-bottom: 56.25%;*/
}
.img-1000-video {
	width: 860px;
	top: 62%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@media  screen and (max-width: 1000px) {
	.img-1000-video {
		padding: 0px 4%;
		width: 92%;
		text-align: center;
	}
}

.glight1 {
	position: absolute;
  	overflow: hidden;
	-webkit-filter: brightness(1.5);
	-webkit-mask-size: 300% 200%;
	-webkit-mask-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 60%);
	-webkit-transition: -webkit-mask-position;
	-webkit-animation-timing-function: linear;
	-webkit-transform: translate3d(0, 0, 0); 
	-moz-filter: brightness(1.5);
	-moz-mask-size: 300% 200%;
	-moz-mask-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 60%);
	-moz-transition: -webkit-mask-position;
	-moz-animation-timing-function: linear;
	-moz-transform: translate3d(0, 0, 0); 
	-o-filter: brightness(1.5);
	-o-mask-size: 300% 200%;
	-o-mask-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 60%);
	-o-transition: -webkit-mask-position;
	-o-animation-timing-function: linear;
	-o-transform: translate3d(0, 0, 0); 
	filter: brightness(1.5);
	mask-size: 300% 200%;
	mask-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 60%);
	transition: -webkit-mask-position;
	animation-timing-function: linear;
	transform: translate3d(0, 0, 0); 
}

.glight1Start { -webkit-mask-position: 150% 0px; -moz-mask-position: 150% 0px; -o-mask-position: 150% 0px; mask-position: 150% 0px;  }
.glight1End { -webkit-mask-position: 0% 0px; -moz-mask-position: 0% 0px; -o-mask-position: 0% 0px; mask-position: 0% 0px; }