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

@import url("reset.css");
@import url("hover.css");
@import url("animate.css");
@import url("font-awesome.css");

@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");

.eventWrap *{ transition:all .3s; -webkit-transition:all .3s;}


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

.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: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) {
	
.vertical-xs{ display:block !important;	}
.vertical-xs  > *{  display:block !important; width:100% !important ;float:none !important; }

}


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

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

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

}





.eventWrap{width:100%; height: auto;position:relative;font-family: 'Noto Sans TC',"微軟正黑體",Microsoft Yahei;line-height:1.6; color:#333333 ; font-size:15px;}
.fadeIn{color:#FFFFFF}

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

 .header {width:100%; position:relative; height: auto; background: url("../images/header.jpg") no-repeat center top ;min-height: 400px;padding-top: 126px;}


@media screen and (max-width: 1380px) {	
    .header { background: url("../images/header-1360.jpg") no-repeat center top ;}

}





 .header .text{width:90%;max-width:380px;position:relative; margin-left: auto;margin-right: auto; z-index:1;}

.header .text h1{font-size: 46px;font-weight: bold;text-align: center;position: relative; text-shadow: 2px 2px 2px rgba(0,0,0,.8);
}
.header .text h1 .large{font-size: 120%;}
.header .text h1 .sub-title{position: absolute;top: -5px;right: 0;}
.header .text .time{text-align: center;letter-spacing: 4px;}
.header .text .line{margin: 10px 0; background:#291f1d; border:none; border-bottom: 1px solid #fff3e3;height: 2px;}
.header .text p{font-size: 18px;text-shadow: 2px 2px 2px rgba(0,0,0,.8);width:100%;max-width:360px;position:relative; margin-left: auto;margin-right: auto;}
 
 
@media screen and (max-width: 640px) {	

.header { background: url("../images/header-phone.jpg") no-repeat center top ; background-size:100% 100%; padding-top: 40% ;padding-bottom:36%;}
    .header .text{max-width:330px;}
    .header .text h1{font-size:40px;}
    .header .text .time{letter-spacing: 2px;}
    .header .text p{font-size: 16px;max-width:320px;}

}

@media screen and (max-width: 320px) {	
    .header .text h1{font-size: 36px;}
    .header .text p{font-size: 14px;}
    
        
        
}
	



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


 .container {width:100%;  max-width:900px;margin:0 auto;padding: 0 10px; background:#FFFFFF;}



.menu{padding: 6px;text-align: center;}
.menu a{font-size: 26px;border-bottom: 5px solid #41c0cf; padding: 6px 5px; text-decoration: none;color: #192024;}
.menu a:not(:last-child){margin-right:25px ;}
.menu a:hover{border-color: #676770;}

@media screen and (max-width: 767px) {	
	
	.menu a{font-size: 18px;}
	.menu a:not(:last-child){margin-right:12px ;}
	
}





hr.line{border-color: #bec3c7}

section{padding: 1vw 15px;}


 h3.title{ color:#151515; font-size:20px; font-weight:bold; position:relative; margin-bottom:20px;margin-top: 10px; }
 h3.title:before{ content:""; border-left:15px solid #41c0cf;margin-right: 10px; }
 h3.title .text{ background:#fff; position:relative; z-index:2; padding-right:10px;}
 h3.title .nb{  font-size:160%;  font-weight:bold;color: #ff7e00; }

/*-----------------step 步驟-----------------*/
 .step{ letter-spacing:-5px;text-align:center;}
 .step .item{ letter-spacing:1px; padding-right:24px; width:160px; position:relative; vertical-align:top; margin-right:10px; margin-bottom:10px;}
.step .item .nb{position: absolute;left: 0;top: 0;} 
 .step .item:after{content:"\f105"; font-family: 'FontAwesome';color:#cfcfcf; font-size:60px; position:absolute; top:10%; right:-6px; font-weight: normal; }
 .step .last:after{ content:"";}

 .step .item .icon{ display:block; margin-bottom:10px;position: relative; }
 .step .item .icon img{ width: auto; max-height:100px; margin:0 auto; }
 .step .item h4{ font-size:15px;  color:#151515; text-align:center; letter-spacing:0;}

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

 h3.title{ font-size:1.3em; text-align:center; }
 h3.title:before{ display:none;}

 .step .item{ letter-spacing:1px; padding-right:24px; width:100%; }
    .step .item .icon{width: 140px !important;margin-left: auto;margin-right: auto;}
 .step .item .icon img{  max-height:120px;  }
.step .item:after{content:"\f107";  position: relative; top:0; right:0; display:block; line-height:1; }
.step .last:after{ content:"";}
.step .item h4{ font-size:18px; font-weight:bold;}

}


.btn-main{ display: block;width: 100%;max-width: 360px; margin: 30px auto; background: #41c0cf; border: 1px solid #2098d1; padding: 15px; color: #fff; text-decoration: none;

    text-align: center;font-size: 16px;}

.btn-main:hover{background: #2098d1;}


.btns .btn  {background: #ececec; border: 1px solid #bdbdbd; padding:12px 16px;text-decoration: none; color: #212121;font-size: 14px;margin-bottom: 6px;}
.btns .btn:not(:last-child)  {margin-right: 4px;}
.btns .btn:hover {background: #bdbdbd; }

@media screen and (max-width: 640px) {	
    
    .btns {text-align: center;}
    .btns .btn  {width: 100%;max-width: 360px;margin-right: auto;margin-left: auto; }
    

}













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

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

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


 .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;}
 .footer .content .logo img{ display:inline-block;vertical-align:middle; margin:0 .3em; }

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





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

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


}


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


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

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



}
	










/*-----------------top 按鈕-----------------*/
 .btnTop{ background:#41c0cf; 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;}
 .btnTop:before{content: url(../images/top-arr.png);display:block; padding-top:6px; text-align:center;}
 .btnTop:hover{ background:rgba(230 ,0 ,0 ,.7);}