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 
{font: inherit; }

body h1{ overflow:hidden; left:-200%; position:absolute;}
.img-response{ max-width:100%; height:auto;}

/*:before{ content:"\f146";font-family: 'FontAwesome'; }*/

/*------------item-inline-block------------*/
.item-inline-block{ letter-spacing:-5px;}
.item-inline-block > *{display: inline-block !important; letter-spacing:0px;vertical-align: top;}

/*------------item-table-cell------------*/
.item-table-cell{ display:table;}
.item-table-cell > *{display: table-cell !important; vertical-align: top;}


/*------------item-flex------------*/
.item-flex{ display:flex !important;display:-webkit-flex !important;display:-ms-flex !important;display:-moz-flex !important;}
.item-flex > *{flex:1;-webkit-flex:1 }



@media screen and (max-width: 640px) {
	
.vertical-xs{ display:block !important;	}
.vertical-xs  > *{  display:block !important; width:100% !important ;float:none !important; }

}

.block{ display:block;}

.show{ display:block;}
.hide{ display:none;}

@media screen and (max-width: 640px) {	

	.hide-xs{ display:none !important; }
	.show-xs{ display:block !important;}
	 xs-order-last{order:2}

}


/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 版頭 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/

.eventWrap .header-wrap{/*background:#ffd646; padding-top:20px;*/}
.eventWrap .header {width:100%; position:relative; height: auto;background:#000; }
.eventWrap .header .center .phone { display: none;}
.eventWrap .header div img{ width:100%; height:auto;max-width: 1134px;}

.eventWrap .header .center{width:100%;max-width:1000px;position:relative; margin:0 auto; z-index:1; }
.eventWrap .header .center img{ width:100%; height:auto;}
.eventWrap .header .left,.eventWrap .header .right{ position:absolute; width:50%; top:0; height:100%;z-index:0;}
.eventWrap .header .left{  left:0; background:url(../images/header-left.jpg) no-repeat right top; margin-left:-500px; }
.eventWrap .header .right{ right:0; background:url(../images/header-right.jpg) no-repeat  500px top;}
.eventWrap .header.page .left{  left:0; background:url(../images/page-header-left.gif) no-repeat right top; margin-left:-500px; }
.eventWrap .header.page .right{ right:0; background:url(../images/page-header-right.gif) no-repeat 500px top;}


@media screen and (max-width: 640px) {	


/*---------版頭--------*/
.eventWrap .header {width:100%; position:relative; height: auto;}
.eventWrap .header .center .phone { display: block;}
.eventWrap .header .center .pc{display:none;}

}
	
	

body { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";background:#000;}

 /*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 內容 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/


.eventWrap .container {width:100%; margin:0 auto; padding:0;}
.main-content{ background:#000; min-height:100px;}
.main-content > .content{width:96%; max-width:1000px; margin:0 auto; position:relative;}

.header-content {position: absolute; width: 100%; top: 0;}
.header-content img {padding-bottom: 20px;}


.kv {
	background: url("../images/BG-top.jpg") center top fixed no-repeat;
	-moz-background-size: content;
	background-size: content;
	text-align: center;
	display: block;
	padding:250px 0 400px 0;
	width: 100%;
	margin: 0;
}
@media screen and (max-width: 1400px) {
	
.kv {
	background: url("../images/header-bg-1400.jpg") center top fixed no-repeat;
	-moz-background-size: cover;
	background-size: cover;
	padding:230px 0 350px 0;
	}
}
@media screen and (max-width: 1000px) {
	
.kv {
	background: url("../images/header-bg-1000.jpg") center top fixed no-repeat;
	-moz-background-size: cover;
	background-size: cover;
	padding:200px 0 300px 0;
	}
}
@media screen and (max-width: 640px) {
	
.kv {
	background: url("../images/header-phone.jpg") center top fixed no-repeat;
	-moz-background-size: cover;
	background-size: cover;
	padding:150px 0 150px 0;
	}
}

.header-title {
	text-align: center;
	z-index: 1000;
	margin: 0 auto 50px auto;
	display: block;
	width:100%;
	max-width: 345px;
}
@media screen and (max-width: 640px) {
	.header-title img {max-width: 250px;}
}


.kv-title {
	font-size:120px;
	font-weight: bold;
    background: linear-gradient(to top,#CCC,#FFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;

}
@media screen and (max-width: 1300px) {
.kv-title {font-size: 110px;}
}
@media screen and (max-width: 1000px) {
.kv-title {font-size: 100px;}
}
@media screen and (max-width: 800px) {
.kv-title {font-size: 90px; line-height: 90px;}
}
@media screen and (max-width: 640px) {
.kv-title {font-size: 70px; line-height: 70px;margin-bottom: 40px;}
}





h2 {
	font-size: 70px;
	line-height: 80px;
	text-align: center;
	font-weight: bold;
	z-index: 1000;
	margin: 0 auto;
	display: block;
	width:100%;
	margin-bottom: 30px;
}
@media screen and (max-width: 1300px) {
h2 {font-size: 65px;line-height: 75px;margin-bottom: 30px;}
}
@media screen and (max-width: 1000px) {
h2 {font-size: 60px;line-height: 70px;margin-bottom: 30px;}
}
@media screen and (max-width: 800px) {
h2 {font-size: 55px;line-height: 65px;margin-bottom: 30px;}
}
@media screen and (max-width: 640px) {
h2 {font-size: 35px;line-height:40px;margin-bottom: 30px;}
}




h3 {
	font-size: 40px;
	line-height: 44px;
	font-weight: bold;
	z-index: 1000;
	display: block;
	width:100%;
}
@media screen and (max-width: 1300px) {
h3 {font-size: 38px;line-height: 42px;}
}
@media screen and (max-width: 1000px) {
h3 {font-size: 36px;line-height: 40px;}
}
@media screen and (max-width: 800px) {
h3 {font-size: 34px;line-height: 38px;}
}
@media screen and (max-width: 640px) {
h3 {font-size: 30px;line-height:33px;}
}



p {
	font-size: 22px;
	line-height: 28px;
	text-align: center;
	z-index: 1000;
	margin: 10px auto;
	display: block;
	width:100%;
}
@media screen and (max-width: 1300px) {
p {font-size: 20px;line-height: 26px;}
}
@media screen and (max-width: 1000px) {
p {font-size: 18px;line-height: 22px;}
}
@media screen and (max-width: 800px) {
p {font-size: 20px;line-height: 26px;}
}
@media screen and (max-width: 640px) {
p {font-size: 16px;line-height: 22px;}
}



.sec-out {
	text-align: center;
	display: block;
	padding:200px 0;
	margin: 0;
}
@media screen and (max-width: 1300px) {
.sec-out {padding:180px 0;}
}
@media screen and (max-width: 1000px) {
.sec-out {padding:150px 0;}
}
@media screen and (max-width: 800px) {
.sec-out {padding:120px 0;}
}
@media screen and (max-width: 640px) {
.sec-out {padding:100px 0;}
}

.sec_content {width: 96%; max-width: 1400px; margin: 0 auto;}




/*sec B start */

.B-content {width: 100%; max-width: 1200px; margin: 80px auto;}
.B-box {width:25%; max-width:300px; padding:10px; float: left;}
.B-content2 {width:100%; max-width: 900px; margin: 80px auto;}
.B-box2 {width:33%; max-width:280px; padding:10px; float: left;}

.B-content img {width: 100%; max-width:151px; }
.B-content2 img {width: 100%; max-width:151px; }

@media screen and (max-width: 800px) {
.B-content {margin: 40px auto;}
.B-box {width:50%; max-width:400px;}
.B-content2 {margin: 40px auto;}
.B-box2 {width:50%; max-width:400px;}
.B-content img {width: 90%; max-width:100px; }
.B-content2 img {width: 90%; max-width:100px; }
}

.bg-B {	
	background: url("../images/BG-B.jpg") center top fixed no-repeat;
	-moz-background-size: content;
	background-size: content;
}
@media screen and (max-width: 640px) {
.bg-B {	
	background: url("../images/BG-B-640.jpg") center top fixed no-repeat;
	-moz-background-size: content;
	background-size: content;
}
}


/*sec C start */
.sec_contentC {width:100%; margin:0; padding: 0;}
.C-boxL {width:50%; float: left;margin:0; padding: 0;}
.C-boxR {width:50%; float: right;margin:0; padding: 0;}
.C-boxL h3 {text-align: right; margin-top:30%;}
.C-boxR h3 {text-align: left; margin-top:30%;}
.C-boxL p {text-align: right; padding: 0 0 2% 27%;}
.C-boxR p {text-align: left;  padding: 0 27% 2% 0;}
.btn-L {float: left;}
.btn-R {float: right;}
.text-right { text-align: right;}

.sec_contentC img {width: 100%; max-width:960px;}

@media screen and (max-width: 1200px) {
.C-boxL h3 {text-align: right; margin-top:10%;}
.C-boxR h3 {text-align: left; margin-top:10%;}
}

@media screen and (max-width: 900px) {
.sec_contentC {width:100%; margin:0; padding-top:15%;}
.sec_contentC img {border-bottom: 1px solid #ccc;margin:0; padding: 0;}
.C-boxL {width:100%; float: none;}
.C-boxR {width:100%; float: none;}
.C-boxL h3 {text-align:center; margin:0;}
.C-boxR h3 {text-align:center; margin:0;}
.C-boxL p {text-align:center; padding:2%;}
.C-boxR p {text-align:center; padding:2%;}
.btn-L {float: none;}
.btn-R {float: none;}
.text-right { text-align: center;}
}
@media screen and (max-width: 640px) {
.text-right { text-align: center;}
}

.learn_more {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	border:#A4A4A4 1px solid;
	padding: 10px 30px;
	display: inline-block;
	color: #A4A4A4;
	margin:10px;
	font-size: 22px;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent;
	position: relative;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.learn_more:hover, .learn_more:active, .learn_more:focus, .learn_more.active {
  color: #FFF;
}
.learn_more:hover:before, .learn_more:active:before, .learn_more:focus:before, .learn_more.active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.learn_more:before {
	background-color:#053664;
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
.learn_more a {color: #929292;}
.learn_more:hover a{
  color: #ccc;
}

@media screen and (max-width: 1300px) {
.learn_more {font-size: 20px;line-height: 26px;}
}
@media screen and (max-width: 1000px) {
.learn_more {font-size: 18px;line-height: 22px;}
}
@media screen and (max-width: 800px) {
.learn_more {font-size: 20px;line-height: 26px;}
}
@media screen and (max-width: 640px) {
.learn_more {font-size: 18px;line-height: 24px;}
}

/*sec D start */
.application { width: 100%; max-width: 1680px; margin: 20px auto;}
.application ul {width: 50%; max-width: 840px; margin:0; padding:0; display:block; float:left;}
.application ul li {width:50%; max-width: 420px; margin:0; padding:10px; display:block; float:left; position: relative;}

.application ul li h4 {
	font-size: 24px;
	line-height: 26px;
	text-align: left;
	color: #FFF;
	text-shadow: black 0em 0em 0.2em;
	z-index:2;
	position: absolute;
	top:20px;
	left:20px;
}
.application ul li img {width: 100%; z-index: 1;padding: 0;}

@media screen and (max-width: 1600px) {
.application ul li h4 {font-size: 22px;line-height: 24px;}
}
@media screen and (max-width: 1300px) {
.application ul li h4 {font-size: 20px;line-height: 22px;}
}
@media screen and (max-width: 1100px) {
.application ul li h4 {font-size: 18px;line-height: 20px;}
}
@media screen and (max-width: 1000px) {
.application ul {width: 100%; max-width: 840px; float:none; margin: 0 auto;}
.application ul li h4 {font-size:24px; line-height: 26px;}
}
@media screen and (max-width: 800px) {
.application ul li h4 {font-size: 22px;line-height: 24px;}
}
@media screen and (max-width: 640px) {
.application ul li h4 {font-size: 20px;line-height: 22px;}
}
@media screen and (max-width: 500px) {
.application ul li h4 {font-size: 18px;line-height: 20px;}
}




.text-color-white{color: #EFEFEF;}
.text-color-white a{color: #EFEFEF;}
.text-color-gray{color: #666;}
.text-color-lightgray{color: #EBEBEB;}
.text-color-blue{color: #053664;}
.text-color-blueL{color:#0071B0;}
.text-color-yellow{color: #ECEDCA;}
.text-color-black{color: #000;}

.bg-white { background-color: #FFF;}
.bg-gray { background-color: #CCCCCC;}
.bg-lightgray { background-color: #EBEBEB;}
.bg-black { background-color: #000;}


.padding-bottom-0 {padding-bottom: 0;}
.maB {margin-bottom: 170px;}