@charset "utf-8";

/*====================================================================================
模塊（module）（.m-）導航、菜單、幻燈、圖文列表、登入、注册、評論、搜索
====================================================================================*/

#pushTopNav{position: relative;}

/*topNav*/
.mobileLogo{display: none;}
.topNavBox{ position: relative; z-index: 998;}
.topNav {position: absolute; right: 6px; top: 10px;}
.topNav li{ display: inline-block; margin: 0 4px 0 0 ; }
.topNav i{ width: 26px; height: 26px; font-size: 18px; color: #fff; background: #be333b; padding: 4px 0 0 0; text-align: center; border-radius: 0.2em;}
@media screen and (max-width: 991px){
.mobileLogo{display: block; position: absolute; top: -13px; left: 50%; transform: scale(0.4,0.4); z-index: 999; width: 20px; margin: 0 0 0 -20px;}
.topNavBox{ background: #fff; padding: 6px 0 12px 0;
  -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .500)!important;
          box-shadow: 0 5px 5px rgba(0, 0, 0, .500)!important;}
.topNav {position: relative; top: 5px; text-align: right;}
.topNav i{ width: 26px; height: 26px; font-size: 22px; color: #fff; background: #b81d25; padding: 4px 0 0 0; text-align: center; border-radius: 0.2em;}
}

/*fixedNav*/
.fixedNav {position: fixed; z-index:300; right:1%;top:50%; width: 60px; text-align: center;}
.fixedNav li {margin: 0 0 5px 0;}
.fixedNav i {width: 40px; height: 40px; font-size: 20px; text-align: center; padding: 13px 0 0 0; border-radius: 99em; background-color: #b81d25; color: #fff; box-shadow:0px 0px 6px #fff, 0px 0px 6px #fff, 0px 0px 6px #fff; }
.fixedNav i.top {font-size: 23px; padding: 15px 0 0 0; }
.fixedNav span {font-size: 13px; font-weight: 600; color: #333; display: block; text-align: center; text-shadow: 0px 0px 3px #fff, 0px 0px 3px #fff, 0px 0px 3px #fff, 0px 0px 3px #fff, 0px 0px 3px #fff, 0px 0px 3px #fff, 0px 0px 3px #fff; }
.fixedNav li:hover span {color: #333; }
.fixedNav li:hover i{ background-color: #e1454d; color: #fff;}
@media screen and (max-width: 768px){
.fixedNav {width: 100%; bottom: 0; left: 0; top:inherit;}
.fixedNav li {width: 25%; height: 60px; margin: 0; padding: 0; display: table; background-color:rgba(0,0,0,0.7); float: left; }
.fixedNav i{width: auto; height: auto; font-size: 23px;  padding: 10px 0 0 0; border-radius: 0em; color: #fff; background-color:rgba(0,0,0,0); box-shadow:0px 0px 0px #fff;}
.fixedNav i.top {font-size: 30px; padding: 4px 0 0 0; position: relative; top:7px;}
.fixedNav span {color: #fff; text-shadow:0px 0px 0px #fff; }
.fixedNav li:hover i{ background-color: #b81d25; color: #fff;}
.fixedNav li:hover {background-color: #b81d25; cursor: pointer;}
.fixedNav li:hover span {color: #fff; }
}

/*pageBanner*/
.pageBanner {width: 100%; margin:-7px 0 0 0; }
.pageBanner h1{width:450px; font-size:38px; line-height:1.6;  display: block; color:rgba(255,255,255,0.8); text-align: center;}
.pageBanner .subh1{ font-size:17px; border-top: 1px solid rgba(255,255,255,0.5); margin:20px auto 0 auto; padding:20px 0 0 0;}
.pageBanner .img{ width: 100%; height: 350px; overflow: hidden; background-repeat: no-repeat; background-position: center top; background-size: cover; display:flex; align-items:center; justify-content:center;}
.pageBanner .img img{ width: 100%; height: auto;}
 @media screen and (max-width: 991px){
.pageBanner .img{height: 260px; }
}
 @media screen and (max-width: 768px){
.pageBanner h1{transform: scale(0.7,0.7);}
.pageBanner .subh1{ display: none;}
.pageBanner .img{height: 180px; }
}

/*breadCrumbs*/
.breadCrumbs{margin: 30px auto 20px auto; text-align: right; font-size: 13px; color: #666;}
.breadCrumbs a{color: #000;}
.breadCrumbs a:hover{color: #b81d25; text-decoration:underline!important;}

/*resultsCategory 分類*/
.resultsCategory{margin: 45px auto 40px auto;}
.categoryList {text-align: center;}
.categoryList li{display: inline-block; width: 130px; text-align: center; margin: 0 3px;}
.categoryList a{width: 130px; height: 30px; font-size: 15px; color: #333; display: block; vertical-align: middle; display: table-cell; border: 1px solid #e1454d;}
.categoryList a:hover ,.categoryList a.active{background: #e1454d; color: #fff;}
@media screen and (max-width:991px) {
.resultsCategory { height: auto; padding-top: 0; position: relative; margin-top: 0; margin-bottom: 10px; box-sizing: border-box; border-bottom:none;}
.categoryTitle { padding: 10px 15px; color: #333; font-size: 16px; font-weight: 600;  cursor: pointer; background: #fff; border: 1px solid #ccc;}
.categoryTitle [class*='fa-'] { position: absolute; font-size: 15px; color: #333; top: 19px; }
.categoryTitle .fa-plus {  right: 30px; }
.categoryTitle .fa-minus { right: 30px; display: none; }
.categoryList { margin: 0; width: 100%; display: none; background: rgba(255,255,255,0); padding: 0;}
.categoryList li { width: 100%; margin: 0; display: block; }
.categoryList a { width: 100%; height: auto; text-align: left; display: block; color: #2D2D2D; padding: 10px 15px; box-sizing: border-box;  border: 1px solid #b81d25; }
.categoryList a:hover ,.categoryList a.active{ width: 100%; height: auto; padding-left: 15px; color:#fff; background: #b81d25; background-image: none;}
}


/*------------------------
post detail
------------------------*/
/*postHeade*/
.postHeade{}
.postHeade .postHeaderTitle{font-size: 22px; color: #333; margin: 25px 0; padding:25px 0; line-height: 1.5; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
.postHeade .postMeta{border: none; margin: 0; font-size: 15px;}
.postHeade .postMeta .category{ color: #b81d25;}
.postHeade .postMeta .date{}

/*postEditArea*/
.postEditArea {font-size: 15px; margin: 40px auto 60px auto;}
.postEditArea img{display: block; margin: 0 auto 20px auto; text-align: center;}
.postEditArea p{display: block; margin: 10px auto;}

/*postNav*/
.postNav{margin: 30px 0 0 0; padding-top: 10px; padding-bottom: 50px; display: block;}
.postNav i{color: #b81d25; font-size: 50px;margin: -5px 0 0 0; vertical-align: top;}
.postNav p{display: inline-block; }
.postNav p span{display: block;}
.postNav a .text{color: #b81d25;}
.postNav a .title{color: #333; padding: 0; margin:0;}
.postNav a:hover .text{color: #e1454d;}
.postNav a:hover .title{color: #e1454d;}
.postNav a:hover i{color: #e1454d;}
.postNav .postNext{text-align: right; float: right;}
@media screen and (max-width: 768px){
.postNav{padding-bottom: 30px;}
.postNav .postNext{margin: 10px 0 0 0;}
}

/*------------------------
post list
------------------------*/
.postTitle{font-size: 21px; font-weight: 600; color: #111; margin: 0 0 30px 0;}

/*postTitleMain*/
.postTitleMain{margin: 0; position: relative;}
.postTitleMain .postCategory{width: 100%; font-size: 16px; font-weight: 600; color: #111; margin: 0 0 15px 0; padding:5px 0 10px 0; position: relative; border-bottom:1px solid #CCC; display:inline-block; }
.postTitleMain .postCategory::after{width: 70px; height: 5px;  position: absolute; content: '';  background: #111; left: 0;  bottom: 0; }
.postTitleMain .sorting{text-align: right; color: #333; vertical-align: top; margin: -5px 0 25px 0;}
.postTitleMain .sorting li{display: inline-block; border-right: 1px solid #999; padding: 0 7px; line-height: 1;}
.postTitleMain .sorting li a{color: #B4B4B5;}
.postTitleMain .sorting li a:hover ,.postTitleMain .sorting li a.active{color: #555;}
.postTitleMain .sorting li:last-child{border-right: none; padding: 0 0 0 7px; }
.postTitleMain .resultStats{text-align: right; color: #999; vertical-align: top;}
.postTitleMain .proNumber{margin: -5px 0 0 0;}


/*------------------------
原生popup
------------------------*/
.Modal-dialog{ margin: 100px auto 20px auto; line-height:1.7; width: 500px; z-index:9001;}
.modal-header{ height:20px; border:0px;}
.modal-content{ padding: 0px; display: block; overflow: hidden; margin: 150px auto 0 auto;}
.modal-content h3{ font-size:25px; color:#0667a4; }
@media screen and (max-width: 991px){
.Modal-dialog{ width: 85%; margin: 0 auto;}
.modal-content{ padding: 3% 2%; margin: 70px auto 0 auto;}
}

/*login*/
.login input{ margin:0 0 10px 0;}
.login .code{ width: 100%; clear:both; display:block;}
.login .code input{ width:45%; float:left;}
.login .code span{ width:50%; display:block; float:left; margin:0 0 20px 10px;}
.login .titleBox{margin: 0 auto; text-align: center;}
.login .title{ font-size: 27px; font-weight: 600; color: #000; background-color: #fff; }
.login .mypw {float: left; margin: 0;}
.login .btn-join{ width:100%; height:40px; font-size:18px; vertical-align: top; margin:10px 0 0 0; padding: 8px; text-align:center; background-color:#f9b31c; color:#333; border-radius: 0;}
.login .btn-join:hover{ background-color:#fbca60; }
.login .btn-fb-join{ width:100%; height:40px; font-size:18px; vertical-align: top; margin:10px 0 20px 0; padding: 8px; text-align:center; background-color:#3b5998; color:#fff; border-radius: 0;}
.login .btn-fb-join:hover{ background-color:#758ab7; }
.login .btn-fb-join i{font-size: 25px; margin: 0 8px 0 0; vertical-align: middle;}
.login .or{ width:100%; text-align: center; margin: 10px auto 0 auto; display: inline-block;}
@media screen and (max-width: 991px){
.login .imgBox{display: none;}
}
@media screen and (max-width: 768px){
.login .imgBox{display: inline-block;}
.login .code input{ width:35%; float:left;}
.login .code span{ width:60%; }
}
@media screen and (max-width: 480px){
.login .title{ font-size: 25px;}  
}


/*footer*/
footer{background-color: #fff; }
.fooetrInfo{margin: 50px auto 20px auto; display: block; overflow: hidden;}
.fooetrInfo .company{width: 32%; display: inline-block;}
.fooetrInfo .logo{display: inline-block; vertical-align: top; margin: 15px 10px 0 0; transform: scale(0.6,0.6); width: 100px;}
.fooetrInfo .contact{display: inline-block; vertical-align: top; text-align: left; border-left: 1px #ccc solid; margin:0 0 0 10px; padding:0 0 0 25px;}
.fooetrInfo .contact b{font-size: 20px;}
.fooetrInfo .contact dl{ height: 55px;}
.fooetrInfo .contact dd{ font-size: 13px; line-height: 1.8;}
.fooetrInfo .contact i{font-size: 17px; margin: 0 5px 0 0; display: inline-block;}
.fooetrInfo .postLink{width: 35%; padding: 0; display: inline-block; margin: 0 2%; }
.fooetrInfo .postLink dl{ display: inline-block; vertical-align: top; text-align: left; margin: 0 25px 0 0;}
.fooetrInfo .postLink dt{font-size: 15px; font-weight: 600; margin: 0 0 10px 0; color: #a17d33;}
.fooetrInfo .postLink dd a{font-size: 13px; color: #333;}
.fooetrInfo .postLink dd a:hover{color: #b81d25;}
.fooetrInfo .fbComments{width: 25%; display: inline-block; vertical-align: top;}
.fooetrInfo .fbComments iframe[style] {width: 100% !important;}
.copyright{background: #977f4c; color: #fff; text-align: center; padding: 5px 0; margin: 0px; font-size: 13px;}
@media screen and (max-width: 1199px){
.fooetrInfo .company{width: 45%; }
.fooetrInfo .postLink{width: 45%; text-align: center;}
.fooetrInfo .postLink dl{ margin: 0 4%;}
.fooetrInfo .fbComments{display: none;}
}
@media screen and (max-width: 991px){
.fooetrInfo .company{width: 100%; text-align: center; margin: 0 0 40px 0;}
.fooetrInfo .postLink{width: 100%;}
}
@media screen and (max-width: 768px){
.copyright{margin: 0px 0 60px 0;}
}
@media screen and (max-width: 480px){
.fooetrInfo .postLink{display: none;}
}




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

/*標題title*/
h1{ }
h2{ }
small{}

/*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.8;
  -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;}

/*float*/
.floatRight{float: right;}
.floatLeft{float: left;}


/*按鈕btn*/
.btnBox{margin: 15px auto; display: block;}
.btnBox i{font-size: 18px; margin: 0 10px; display: inline-block;}

.btnRed{font-size: 18px; background-color: #e1454d; color: #FFF; padding: 8px 0; display: block; text-align: center;}
.btnRed:hover{background-color: #e57679; color: #FFF;}
[class^='btnYellow']{font-size: 18px; background-color: #f9b31c; color: #333; padding: 8px 0; display: block; text-align: center;}
[class^='btnYellow']:hover{background-color: #f8c759; color: #333;}
.btnYellow-s{width: 320px; margin: 0 auto;}
.btnYellow-s:hover{}
.btnGray{font-size: 18px; background-color: #dedede; color: #333; padding: 8px 0; display: block; text-align: center;}
.btnGray:hover{background-color: #e8e8e8; color: #333;}
/*----------------------------------
皮膚（skin）
------------------------------------*/
/*wordLink*/
.wordLinkRed{ color: #e1454d;}
.wordLinkRed:hover{color: #b81d25;}
.wordLinkBlack{color: #333;}
.wordLinkBlack:hover{color: #be333b;}

/*color*/

.red {color: #d01c0a;}
/*.green {color: #009900;}
.orange {color: #FF6600;}
.yellow {color: #FFFF00;}
.purple{color: #a46b8b;}
.black {color: #000000;}
.white {color: #FFFFFF;}
.brown {color: #BA5A10;}
.blue {color: #0066CC;}
*/

/*bg color*/
.bgGray{background-color: #DDD;}
.bgBlue{background-color: #C7DCDD;}



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

/*bg box*/
.whiteBox{margin: 20px auto 80px auto; padding: 70px 0; background: #fff; border-radius: 0 0 20px 20px; display: block; overflow: hidden;}
@media screen and (max-width: 1199px){
.whiteBox{padding: 50px 0;}
}
@media screen and (max-width: 768px){
.whiteBox{padding: 60px 0;}
}

/*----------------------------------
元件
------------------------------------*/
.lineMiddle{width: 100%; height: 1px; background: #CCC; display: block; margin: 25px 0;}
.lineTop{width: 100%; height: 1px; background: #CCC; display: block; margin: 0;}