@charset "utf-8";
/* CSS Document */

@import url("reset.css");

html, body { width:100%; height: auto;overflow-X:hidden; }
body {  background: #fff; }

body h1{ overflow:hidden; left:-200%; position:absolute;}
.img-response{ 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:1px;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;}
.item-flex > *{flex:1;-webkit-flex:1 }

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

}




.eventWrap{width:100%; height: auto;position:relative; font-family:"微軟正黑體";line-height:1.6; color:#333 ; font-size:15px;}


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

.eventWrap .header {width:100%; position:relative; height: auto;}
.eventWrap .header .center .phone { display: none;}
.eventWrap .header div img{ width:100%; height:auto;}

.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  .btns{ position:absolute; left:8%; bottom:6%; }
.eventWrap .header  .btns a{ background:#ff7800; border-radius:5px; color:#fff; text-decoration:none; width:220px; margin:5px; padding:14px; text-align:center; position:relative; font-size:18px;}
.eventWrap .header  .btns a:hover{ background:#ef6000;}
.eventWrap .header  .btns a:after{ content:url(../images/arr.png); position:absolute; right:10px; top:16px; z-index:9;}

.eventWrap .header  .btns a span{ position:absolute; left:0; top:-21px; background:#000; border-radius:2px; padding:2px 8px; color:#fff; font-size:12px;}
.eventWrap .header  .btns a span:before{ content:"";position:absolute; left:20px; bottom:-10px; border: 6px solid transparent; border-top-color: #000 ; line-height: 0; height: 0; width: 0; z-index:9;}


@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;}


.eventWrap .header  .btns{ position: relative; left:0; bottom:0; }
.eventWrap .header  .btns a{ width:calc(50% - 4px);margin:2px;  font-size:15px;}
.eventWrap .header  .btns a:after{ display:none; }


}
	
	



 /*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 內容 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/
 
.eventWrap .container {width:100%;  background:#fff;background:#ffecc7; padding:10px 0 20px;}

.eventWrap .container .content{ max-width:900px;  margin:0 auto;}

 h2.title{ text-align:left; border-bottom:1px solid  #e34e3b; margin-bottom:10px; font-size:28px; letter-spacing:2px; margin:40px 0 20px;}
 h2.title span{border-bottom:6px solid  #e34e3b; padding:0 5px; position:relative; bottom:2px;}
 h2.title span i{ font-style:normal; color:#e34e3b; font-weight:bold; margin-left:10px; }



.awards{}
.awards .item{ background:#fff; border:1px solid #d1bcaa; box-shadow:0px 0px 10px 5px rgba(0,0,0,.1); padding:15px; margin:10px;}
.awards .item .pic{}
.awards .item .pic img{ max-width:100%;}
.awards .item p{ width:100%; max-width:300px; font-size:16px; padding-top:6px;}


.feature{}
.feature .item { margin-bottom:20px; padding-left:10px;}
.feature .item .icon{ vertical-align:middle;}
.feature .item .icon img{ max-width:100%;}
.feature .item .text{ margin-left:20px;vertical-align:middle;}
.feature .item .text h3{ font-size:26px; font-weight:bold;}
.feature .item .text h3 p{ font-size:15px;}

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

 h2.title{ font-size:20px;}
 .feature .item .icon{ width:70px; vertical-align:top; }
 .feature .item .text{ width:calc( 100% - 100px);vertical-align:top;}
 .feature .item .text h3{ font-size:20px; }

}












 /*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 下方宣告 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/

.eventWrap .footer { width:100%; position:relative;border-top:1px solid  #CCC;  margin-top:30px;  }

.eventWrap .footer .content {width:96%;  max-width:980px; padding:1.6em 0; margin:0 auto; position:relative; z-index:2; background:#FFF;} 

.eventWrap .footer .content .logo { display:inline-block;vertical-align:middle; border-right:5px solid #F00; height:70px; line-height:70px; padding-right:30px; margin-right:.8em;}
.eventWrap .footer .content .logo img{ display:inline-block;vertical-align:middle; margin:0 .3em; }

.eventWrap .footer .content .text {display:inline-block; font-size:.9em;vertical-align:middle;}
.eventWrap .footer .content .text a{ color:#333; text-decoration: underline;}
.eventWrap .footer .content .text a:hover{ color: #F00;  }





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

.eventWrap .footer .content .logo {  border-right: none; }


}


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


.eventWrap .footer .content .logo { width:96%; margin:0 auto display:block; border-right: none; height: auto; padding-right:0; text-align:center;}
.eventWrap .footer .content .logo img{ margin:0 .5em;  }

.eventWrap .footer .content .text { width:98%; margin:0 auto; display:block;}
.eventWrap .footer .content .text ul { list-style:disc; padding-left:20px;} 



}
	











/*-----------------top 按鈕-----------------*/
.eventWrap .btnTop{ background: rgba(255 ,0 ,0 ,.5); width:45px; height:45px; position: fixed;right:20px; bottom:20px;cursor:pointer; z-index:99; color:#FFF; text-align:center; font-family:Helvetica;text-transform:uppercase; font-size:11px ; letter-spacing:1px; display: none  ; z-index:999;}
.eventWrap .btnTop:before{content: url(../images/top-arr.png);display:block; padding-top:6px; text-align:center;}
.eventWrap .btnTop:hover{ background:rgba(230 ,0 ,0 ,.7);}





 /*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ share 分享按鈕 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/

.share{ width:90%; margin:30px auto 0; letter-spacing:-5px; max-width:260px; padding: 0; }

/*---------btn--------*/
.share.btn h3{ display:none;}
.share.btn a p{ text-align:center;}
.share a,.share.btn a{ display: inline-block;letter-spacing:1px; width:48%; height:40px; line-height:40px;margin:0 2px;  text-align:center; vertical-align:middle; font-size:13px; font-weight:bold; border-radius:5px;  color:#FFF;
text-decoration:none; box-shadow:1px 1px 0 0px rgba(255,255,255,.6) inset;
 }
.share.btn a:hover{box-shadow: none; }

.share.btn a.line{ color:#159d06; border:1px solid #159d06; display:none;}
.share.btn a.fb{color:#1b6ecc;  border:1px solid #1b6ecc; }
.share.btn a.fb:hover{color:#fff; background:#1b6ecc;  }
.share.btn a.gPlus{color:#d33918;  border:1px solid #d33918; }
.share.btn a.gPlus:hover{ color:#fff;background:#d33918;  }


/*---------icon--------*/

.share.icon {}
.share.icon h3{letter-spacing:1px;display: inline-block; vertical-align:middle; font-size:15px;}
.share.icon a{display: inline-block;letter-spacing:1px;vertical-align:middle; margin:0 2px; width:auto;}
.share.icon a:hover{ position:relative; left:1px; top:1px;}
.share.icon a p{ display:none}
.share.icon a.fb{ }
.share.icon a.fb:before{ content:url(../images/fb-share.png)}
.share.icon a.gPlus{}
.share.icon a.gPlus:before{ content:url(../images/g-share.png)}





@media screen and (max-width: 640px) {
	
.share a p{ color:#fff; font-size:15px; display:block !important; text-align:center;}	
.share a.line{ background:#1fb50e; border:1px solid #159d06;}
.share a.fb{ background:#3486e2; border:1px solid #1b6ecc; }
.share a.fb:hover{ background:#1b6ecc;  }
.share a.gPlus{ background:#e94c2b; border:1px solid #d33918; }
.share a.gPlus:hover{ background:#d33918;  }
	
.share a.line{  display: block !important;}
.share a,.share.btn a,.share.icon a{display: block ;width:100%;margin:0 ; margin-bottom:5px;}

.share.icon a.fb:before{ content:"";}
.share.icon a.gPlus:before{ content:"";}

.share.icon h3{ display:none;}


}








.phone { display: none;}
.pc{display:block;}

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


/*---------版頭--------*/

.phone { display: block;}
.pc{display:none;}


}