@charset "utf-8";

/*====================================================================================
元件（unit）（.u-）按鈕、標題、輸入框、loading、圖標
====================================================================================*/

/*hove 動畫*/
.hoverFadeIn{-webkit-opacity: 1;-moz-opacity: 1;opacity: 1;}
.hoverFadeIn:hover{opacity: 1;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;}

.hoverFadeInOpacity{-webkit-opacity: 1;-moz-opacity: 1;opacity: 1;}
.hoverFadeInOpacity:hover{opacity: 0.6;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;}

/*imgFadeInOpacity*/
.imgFadeInOpacity{background-color: #000; display: block;}
.imgFadeInOpacity img{opacity: 0.9;}
.imgFadeInOpacity:hover img{opacity: 1.0;}

.imgFadeInOpacity2{display: block; opacity: 1.0;}
.imgFadeInOpacity2:hover{opacity: 0.85;}

.postLine{height: 1px; width: 100%; background-color:#efefef;}

/*----------------------------------
皮膚（skin）
------------------------------------*/

.linkBoxBlue{position: relative;}
.linkBoxBlue:hover .wordLinkBlue{color: #00c8f7; border-bottom: 1px solid #00c8f7;}
.linkBoxBlue:hover .postIconBlue{background-color: #00c8f7;}

.linkBoxRed{position: relative;}
.linkBoxRed:hover .wordLinkRed{color: #ff1240; border-bottom: 1px solid #ff1240;}
.linkBoxRed:hover .postIconRed{background-color: #ff1240;}

/*Icon*/
.postIconBlue ,.postIconRed{width: 23px; height: 23px; border-radius: 99em; display: inline-block; margin: 0 2px 0 0; vertical-align: sub; text-align: center;}
.postIconBlue i ,.postIconRed i{color: #fff; font-size: 17px; padding: 4px 0 0 0; vertical-align: top;}
.postIconBlue{background-color: #0089d1; }
.postIconRed{background-color: #d0011a;}
.postIconCheck{display: inline-block; margin: 0 2px 0 0; vertical-align: inherit;}
.postIconCheck i{color: #0c3a69; font-size: 27px; padding: 4px 0 0 0; vertical-align: top;}


/*按鈕btn*/
.btnBox{margin: 50px auto 30px auto; text-align: center; display: block; clear: both;}
.btnRadius{width: 170px; display: inline-block; text-align: center; border-radius: 10em; padding: 10px 0; margin:0 5px; border: none; }
.btnRadius i{font-size: 19px; margin: 0 5px 0 0; display: inline-block;}
.btnBlue{ font-size: 17px; color: #fff; background-color: #0089d1;}
.btnBlue:hover{color: #fff; background-color: #00c8f7;}
a.btnBlue:focus{color: #fff;}
.btnGray{ font-size: 17px; color: #fff; background-color: #acacac;}
.btnGray:hover{color: #fff; background-color: #888;}
a.btnGray:focus{color: #FFF;}

/*wordLink*/
.wordLinkBlue{border-bottom: 1px solid #0089d1; color: #0089d1;}
.wordLinkBlue:hover{color: #00c8f7; border-bottom: 1px solid #00c8f7;}
.wordLinkRed{border-bottom: 1px solid #d0011a; color: #d0011a;}
.wordLinkRed:hover{color: #ff1240;}

/*color*/
.black {color: #000000;}
.white {color: #FFFFFF;}
.red {color: #d0011a;}


/*字級*/
.font18{font-size: 18px;}
.font20{font-size: 20px;}

@media (max-width: 768px){
.btnRadius{width: 30%; padding: 7px 0;}
}
@media (max-width: 560px){
.btnRadius{width: 40%;}
}

/*====================================================================================
模塊（module）（.m-）導航、菜單、幻燈、圖文列表、登入、注册、評論、搜索
====================================================================================*/
/*----------------------------------
header
------------------------------------*/
header{position: relative; height: 100px; 	
  -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .300);
	box-shadow: 0 5px 5px rgba(0, 0, 0, .300);
}
header .logo img{
  -moz-transform:scale(0.9);
  -webkit-transform:scale(0.9);
  -o-transform:scale(0.9);
  -ms-transform:scale(0.9);
  transform:scale(0.9);}
header .topNav{ position: relative; right: 0; /*margin: 40px 10px 0 0;*/ z-index: 99;}
header .topNav a{font-size: 15px; color: #fff; background-color: #0089d1; border-radius: 25px; padding: 7px 25px; position: absolute; top: 0; right: 5px;}
header .topNav a:hover{background-color: #00c8f7;}
header .topNav i{font-size: 22px; padding: 0 5px 0 0; vertical-align: text-bottom;}

@media (max-width: 1199px){
header{height: 70px; box-shadow: 0px 0px 6px #999, 0px 0px 6px #999, 0px 0px 6px #999;}
header .topNav{ margin: 0; height: 70px;
	background: #02afb5; /* Old browsers */
	background: -moz-linear-gradient(top, #02afb5 0%, #008bd0 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #02afb5 0%,#008bd0 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #02afb5 0%,#008bd0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02afb5', endColorstr='#008bd0',GradientType=0 ); /* IE6-9 */}
header .topNav a{background-color:rgba(153,153,153,.0); padding:0;}
header .topNav a:hover{background-color:rgba(153,153,153,.0);  }
header .topNav i{font-size: 34px; padding: 0 10px 0 0; color: #fff; }
header .topNav i:hover{color:#b3dfef;}
header .logo{position: absolute; z-index: 900; left: 50%; margin: 0 0 0 -84px;}
header .logo img{transform-origin:top; text-align: center; 
  -moz-transform:scale(0.75);
  -webkit-transform:scale(0.75);
  -o-transform:scale(0.75);
  -ms-transform:scale(0.75);
  transform:scale(0.75);}
}

/*----------------------------------
pageAD
------------------------------------*/
.pageAD {text-align:center; margin: 100px auto 0 auto;}
.pageAD h1{font-size:35px; margin:135px auto 0 auto; line-height:1.3; color: #fff}
.pageAD .img{ width: 100%; height: 300px; margin: -20px 0 0 0; overflow: hidden; background-repeat: no-repeat; background-position: center top; background-size: cover;}
.pageAD .img img{ width: 100%; height: auto;}
@media screen and (max-width: 1199px){
.pageAD {margin: 70px auto 0 auto;}
.pageAD h1{font-size:30px; margin:140px auto 0 auto;}
.pageAD .img{ height: 300px}
}
@media screen and (max-width: 991px){
.pageAD h1{margin:110px auto 0 auto;}
.pageAD .img{height: 230px;}
}
 @media screen and (max-width: 768px){
.pageAD h1{ font-size:23px; margin:55px auto 0 auto;}
.pageAD .img{height: 140px;}
}
@media screen and (max-width: 488px){
.pageAD h1{ font-size:20px;}
}


/*----------------------------------
titleMain
------------------------------------*/
.pageMain .titleMain{ margin: 30px 0 20px 0; position: relative;}
.pageMain .titleMain h2{font-size: 30px; color: #333;}
.rightLink ,.rightLink2{position: absolute; right: 0; top:7px; font-size: 20px; /*padding: 0 0 20px 0;*/}
.rightLink a ,.rightLink2 a{color: #0089d1; border-bottom: 1px solid #0089d1;}
.rightLink a:hover ,.rightLink2 a:hover{color: #00c8f7; border-bottom: 1px solid #00c8f7;}
@media (max-width: 900px){
.pageMain .titleMain{ margin: 10px 0;}
.pageMain .titleMain h2{font-size: 25px;}
.rightLink ,.rightLink2{font-size: 18px;}
.rightLink{top:4px; }
.rightLink2{top:10px; }
.rightLink > a ,.rightLink2 > a{background-color: #0089d1; padding: 5px 15px; color: #fff; border-radius: 3em; border: none;}
.rightLink > a:hover ,.rightLink2 > a:hover{background-color: #00c8f7; color: #fff;}
}
@media (max-width: 768px){
.rightLink2{right: 0; top:-38px;}
.rightLink ,.rightLink2{font-size: 16px;}
}
@media (max-width: 480px){
.pageMain .titleMain{ margin: 5px 0;}
.pageMain .titleMain h2{font-size: 20px; }
.rightLink{right: 0; top:0px; font-size: 15px;}
.rightLink2{ font-size: 15px;}
}


/*------------------------
popup
------------------------*/
.modal{ z-index: 9999;}
.modal-dialog{ margin: 150px auto 20px auto; line-height:1.7; z-index:9001;}
.modal-dialog-big{width: 1170px;}
.modal-dialog-small{width: 500px;}
.modal-header{ height:20px; border:0px;}
.modal-content{display: block; overflow: hidden; margin: 150px auto 40px auto; padding: 0 20px;}

@media screen and (max-width: 1199px){
.modal-dialog{ margin: 0 auto;}
.modal-dialog-big{ width: 92%;}
.modal-dialog-small{width: 500px;}
.modal-content{ margin: 100px auto 40px auto;  padding: 3% 2% 0 2%;}
}
@media screen and (max-width: 768px){
.modal-dialog-big{ width: 95%;}
.modal-dialog-small{width: 80%;}
.modal-content{ margin: 100px auto 40px auto;  padding: 3% 2% 0 2%;}
.modal-body{padding: 15px 5px;}
}

/*------------------------
formContent
------------------------*/
/*formContent*/
.formContent{width: 100%; display: block; overflow: hidden; font-size: 18px;}
.formGroup{width: 100%; margin: 10px auto; padding: 0; display: inline-block; color: #333;}
.formGroup .col-left{width: 10%; display: inline-block; text-align: left;}
.formGroup .col-right{width: 89%; display: inline-block; text-align: left;}
.formGroup label{vertical-align: top;}
.formGroup input[type="text"]{width: 99%; height: 40px; border: 1px solid #ddd; padding: 0 12px;}
.formGroup select{width: 99%; height: 40px; padding: 0 12px; border: 1px solid #ddd;}
.formGroup P{margin: 5px 0 0 0; font-size: 15px;}
.formGroup .select a{width: 200px; height: 40px; color: #333; border: 1px solid #0c3a69; display: inline-block; padding: 5px 0 0 0; margin: 0 10px 0 0; text-align: center; vertical-align: middle;}
.formGroup .select a:hover ,.select a.active{background: #0c3a69; color: #fff;}

@media screen and (max-width: 991px){
.formGroup .col-left{width: 15%; }
.formGroup .col-right{width: 84%; }
}
@media screen and (max-width: 768px){
.formGroup .select a{width: 48.5%; margin:0 1% 0 0;}
.formGroup .select a:last-child{margin: 0;}
}
@media screen and (max-width: 680px){
.formContent{ font-size: 16px;}
.formGroup .col-left{width: 19%; }
.formGroup .col-right{width: 79%; }
}
@media screen and (max-width: 480px){
.formGroup .col-left{width: 100%; margin: 0 0 5px 0;}
.formGroup .col-right{width: 100%; }
}




/*----------------------------------
postPaymentItem
------------------------------------*/
.postPaymentItem{margin: 0 auto -35px auto;}
.postPaymentItem .row{padding: 0 3%; }
.postPaymentItem .titleMain small{margin: 25px auto 25px auto!important; }
.postPaymentItem .card{margin: 35px auto 0 auto; display: inline-block; width: 19.5%; vertical-align: top;}
.postPaymentItem .card-img{width: 160px; height: 160px; border-radius: 99em; text-align: center; vertical-align: middle; margin: 0 auto;
	background: #02afb5; /* Old browsers */
	background: -moz-linear-gradient(top, #02afb5 0%, #008bd0 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #02afb5 0%,#008bd0 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #02afb5 0%,#008bd0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02afb5', endColorstr='#008bd0',GradientType=0 ); /* IE6-9 */ 
    box-shadow: 4px 4px 4px #555, -5px -5px 5px #fff;}
.postPaymentItem .card-img img{position: relative; top:50%; transform:translateY(-50%);}
.postPaymentItem .card-body{width: 80%; margin: 15px auto; display: block;}
.postPaymentItem h2.card-title{font-size: 23px; color: #333; text-align: center;}
.postPaymentItem a:hover .card-title{color: #0089d1; }
@media screen and (max-width: 1199px){
.postPaymentItem .card-img{width: 130px; height: 130px;}
.postPaymentItem .card-img img{max-width: 60%;}
.postPaymentItem h2.card-title{font-size: 20px;}
}
@media screen and (max-width: 991px){
.postPaymentItem .row{padding: 0;}
.postPaymentItem .card{width: 24%; margin: 0 0 10px 0;} 
}
@media screen and (max-width: 768px){
.postPaymentItem .row{padding: 0 5%;}
.postPaymentItem .card{width: 32.5%;}
.postPaymentItem .card-img{width: 120px; height: 120px;}
.postPaymentItem h2.card-title{font-size: 18px;  line-height:1.2; }
}
@media screen and (max-width: 480px){
.postPaymentItem .card{width: 32%;}  
.postPaymentItem .card-img{width: 85px; height: 85px;}
.postPaymentItem .card-title{font-size: 17px;}
.postPaymentItem h2.card-title{margin: 0;}

}

/* morePostPaymentItem */
.morePostPaymentItem{ display:block; cursor:pointer; color:#38B3DF; position:absolute;  z-index: 999; text-align: right;}
.morePostPaymentItem:hover .morePostPaymentItemMain{display:block;}
.morePostPaymentItemMain{display:none; left: 0; top:30px; z-index: 9999; background-color: #fff; color: #333; position: relative; border-radius: 0.5em; border: 1px solid #e8e8e8;}
.morePostPaymentItemMain [class*=arrow_t_]{ width: 0px; height: 0px; border-width: 15px;  border-style: solid; position: absolute; top: -30px; right: 50px;}
.morePostPaymentItemMain .arrow_t_int{border-color: transparent transparent #666  transparent;}
.morePostPaymentItemMain .arrow_t_out{border-color: transparent transparent #fff transparent;}
.morePostPaymentItemMain .postPaymentItem {padding: 2% 7% 6% 7%; text-align: left;}
.morePostPaymentItemMain .postPaymentItem .card-img{width: 130px; height: 130px;}
.morePostPaymentItemMain .postPaymentItem .card-img img{max-width: 60%;}

@media screen and (max-width: 991px){
.morePostPaymentItemMain .postPaymentItem {padding: 4% 7% 6% 7%; }
}
@media screen and (max-width: 768px){
.morePostPaymentItemMain .postPaymentItem {padding: 4% 5% 6% 5%; }
.morePostPaymentItemMain .postPaymentItem .card-img{width: 110px; height: 110px;}
}
@media screen and (max-width: 480px){
.morePostPaymentItemMain .postPaymentItem {padding: 6% 1% 8% 1%; }
.morePostPaymentItemMain .postPaymentItem .card-img{width: 85px; height: 85px;}
}


/* paymentList */
.paymentList{margin: 0 0 20px 0; padding: 0 0 10px 0;}
.paymentList .postPaymentItem {padding: 2% 5% 6% 5%; text-align: left;}
.paymentList .postPaymentItem .card-img{width: 130px; height: 130px;}
.paymentList .postPaymentItem .card-img img{max-width: 60%;}
@media screen and (max-width: 991px){
.paymentList .postPaymentItem {padding: 4% 7% 0% 7%; margin: 3% 0 0 0;}
}
@media screen and (max-width: 768px){
.paymentList .postPaymentItem .card-img{width: 110px; height: 110px;}
}
@media screen and (max-width: 480px){
.paymentList .postPaymentItem {padding: 8% 1% 0% 1%; }
.paymentList .postPaymentItem .card-img{width: 85px; height: 85px;}
}
/*----------------------------------
footer
------------------------------------*/
footer{ }
.footerInfo{display: block; padding: 70px 0 50px 0; background-color: #07141f; color: #fff;}
.footerInfo p{text-align: center;}
.footerInfo .tt{ font-size: 22px;}
/*postMsg----------------------------------*/
.footerInfo .postMsg{border-right: 1px solid #838a8f;}
.footerInfo .postMsg .text1{font-size: 17px; margin: 40px 0 30px 0;}
.footerInfo .postMsg .text2{font-size: 40px;}
/*appLink----------------------------------*/
.footerInfo .appLink{ text-align: center;}
.footerInfo .appLink .card{display: inline-block; margin: 40px 2% 0 2%;;}
.footerInfo .appLink .card-img{width: 150px; height: 150px; text-align: center; vertical-align: middle; margin: 0 auto;
	background: #fefefe; /* Old browsers */
	background: -moz-linear-gradient(top, #fefefe 0%, #d3d3d3 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #fefefe 0%,#d3d3d3 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #fefefe 0%,#d3d3d3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */ 
}
.footerInfo .appLink .card-img img{position: relative; top:50%; transform:translateY(-50%); width: 80%; margin: 0 auto;}
/*copyright----------------------------------*/
.copyright{background-color: #02070b; text-align: center; color: #fff; padding: 30px 0 25px 0; }
.copyright .postLink li{display: inline-block; font-size: 18px; line-height: 2;}
.copyright .postLink a{color:#fff; margin: 0 15px;}
.copyright .postLink a:hover{color:#00c8f7;}
.copyright .text{font-size: 15px; margin: 25px auto 0 auto; }
.copyright .text p{text-align: center;}
@media screen and (max-width:991px) {
.footerInfo{display: block; padding: 30px 0 40px 0;}
.footerInfo .tt{ font-size: 20px;}
.footerInfo .postMsg .text1{font-size: 15px; margin: 10px 0 10px 0;}
.footerInfo .postMsg .text2{font-size: 30px;}
.footerInfo .appLink{ margin: 30px 0 0 0;}
.footerInfo .appLink .card{display: inline-block; margin: 10px 2% 0 2%;;}
.footerInfo .appLink .card-img{width: 100px; height: 100px; }
}
@media screen and (max-width:768px) {
.copyright .postLink li{ font-size: 16px;}
.copyright .postLink a{margin: 0 10px;}
.copyright .text span{display: block;}
}