@charset "utf-8";

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

/*菜單*/
.nav{float: left;margin: 0;}
.logo{text-align: center;}

/*fixedRightmenu 常駐右選單*/
.fixedRightmenu{ position:fixed; top:20%; right:0px; z-index: 880; }
.fixedRightmenu ul{ list-style:none; padding-left:0px; margin:0px; }
.fixedRightmenu ul li{ width:130px; height:50px;  position:relative;  right:-90px; background-color:#f7f7f7; margin:10px 0px; padding-left:10px; border: 1px solid #ccc; border-right: none;
  -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
  border-top-left-radius:30px;
  border-bottom-left-radius:30px;
  -webkit-box-shadow: -3px 4px 2px -1px rgba(0,0,0,0.27);
  -moz-box-shadow: -3px 4px 2px -1px rgba(0,0,0,0.27);
  box-shadow: -3px 4px 2px -1px rgba(0,0,0,0.27);}
.fixedRightmenu ul li:hover{ right:0px;
  -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;}
.fixedRightmenu ul li a{ display:block; font-size:14px; text-decoration:none; color:#777; }
.fixedRightmenu ul li a:hover{ color:#555; }
.fixedRightmenu .msg{width: 22px; height: 13px; font-size: 12px; background-color: #EC297B; color: #fff; border-radius: 1em; text-align: center; display:inline-block; position: absolute; top:-12px; left: 7px;}
.fixedRightmenu svg{font-size: 16px; color:#777; width: 25px !important; margin: 0 10px 0 0; text-align: center; position: relative; }
.fixedRightmenu svg.big{font-size: 18px;}
.fixedRightmenu svg.big2{font-size: 22px;}
.textLink{ line-height:50px; vertical-align: middle;}

/*breadCrumbs*/
.breadCrumbs{margin: 20px auto 0 auto; font-size: 14px; color: #aaa; text-align: center;}
.breadCrumbs svg{font-size: 17px;}
.breadCrumbs a{color: #aaa;}
.breadCrumbs a:hover{text-decoration:underline!important;}

/*wrap*/
.wrap{display: block; margin: 15px auto 60px auto; overflow: hidden;}
.block{display: block; overflow: hidden;}

/*titleMain 標題區*/
.titleMain{margin-top: 40px; margin-bottom: 25px; }
.titleMain h2{font-size: 21px; color: #333; vertical-align: top; line-height: 0;}
.titleMain .sorting{text-align: right; color: #333; vertical-align: top;}
.titleMain .sorting li{display: inline-block; border-right: 1px solid #999; padding: 0 15px; line-height: 1;}
.titleMain .sorting li a{color: #777;}
.titleMain .sorting li a:hover ,.titleMain .sorting li a.active{color: #60B071;}
.titleMain .sorting li:last-child{border-right: none;}
.titleMain .resultStats{text-align: right; color: #999; vertical-align: top;}

@media only screen and (max-width : 991px){
.fixedRightmenu{ border-top:rgba(14,14,14,0.2) solid 1px; position:fixed; width:100%; top:inherit; bottom:0px; left:0px; }
.fixedRightmenu ul{ list-style:none; padding-left:0px; margin:0px; }
.fixedRightmenu ul li{ width:50%; height:50px; position:static; float:left; background-color:rgba(89,178,196,0.7); -webkit-transition: none; padding-left:0px; margin:0px; text-align:center; border-top-left-radius:0px; border-bottom-left-radius:0px; border: none;}
.fixedRightmenu ul li:hover{ -webkit-transition: none;}
.fixedRightmenu ul li a{ display:block; color: #fff; vertical-align: initial;}
.fixedRightmenu ul li a:hover{color: #fff;}
.fixedRightmenu .msg{top:-12px; left: 15px; }
.fixedRightmenu svg{font-size: 22px; width: auto; margin: 15px 0 0 0; color: #fff; vertical-align: sub;}
.fixedRightmenu svg.big{font-size: 24px;}
.fixedRightmenu svg.big2{font-size: 32px; margin: 10px 0 0 0;}
.textLink{ vertical-align: super;}
}
@media screen and (max-width: 768px){
.logo{transform: scale(0.8,0.8);} 
.titleMain{margin-top: 20px;}
.titleMain .sorting{text-align: left; margin: 20px 0 0 0;}
.titleMain .resultStats{text-align: left; margin: 20px 0 0 0;}
}
@media only screen and (max-width : 767px){
.fixedRightmenu ul li{ text-align:center; }
.fixedRightmenu ul{ min-width:300px; }
.textLink{ display:none; }
}
@media screen and (max-width: 480px){
.logo{transform: scale(0.6,0.6);} 
}

/*------------------------
detail
------------------------*/
/*detailAside*/
.detailAside .img{margin: 0 0 15px 0;}
.detailAside .info{padding:0 0 0 10px; border-left: 1px solid #CCC;}
.detailAside .category{font-size: 16px; color: #59B2C4;}
.detailAside .pageView{font-size: 14px; color: #555; }

/*editField*/
.editField{ overflow: hidden; display:table; width: 100%; border: 1px solid #CCC; margin: 0 0 40px 0;}
.editField dl{font-size: 16px; display:table-row;}
.editField dt{width: 18%; color: #333; display:table-cell; padding: 15px 19px; text-align: right; background-color: #EEE;}
.editField dd{width: auto; color: #555; display:table-cell; padding: 15px 19px;}

/*editArea*/
.editArea{font-size: 16px; color: #555; display: block; margin: 0 auto 40px auto}
.editArea h3{font-size: 16px; color: #333; display: block; border-bottom: 1px solid #CCC; position: relative; padding: 0 0 5px 0;}
.editArea h3::after{position: absolute; content: ''; width: 70px; height: 3px; background: #60B071; left: 0;  bottom: 0;}
.editArea p{display: block; margin: 30px 0;}
.editArea img{display:block; margin: 0 auto;}

/*communityBar*/
.communityBar{margin: 80px 0 20px; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; padding: 15px 0; }
.communityBar i{display: inline-block; font-size: 20px; vertical-align: -webkit-baseline-middle;}
.communityBar .loginNav{display: inline-block; vertical-align: -webkit-baseline-middle;}
.communityBar .loginNav img{max-width: 100%; height: auto;}
.communityBar .loginNav a{width: 40px; height: 40px; margin: 0 0 0 5px; display: inline-block; opacity: 1;}
.communityBar .loginNav a:hover{opacity: 0.7;}

/*postNav*/
.postNav{margin: 20px auto 50px auto; text-align: center;}
.postNav a{display: inline-block; width: 35%; color: #AAA; font-size: 14px;}
.postNav a.backList{width: 29%;}
.postNav a:hover{color: #555;}
.postNav i{padding: 0 10px; font-size: 25px; vertical-align: bottom; -webkit-text-stroke: 2px white;}
.postNav .postPrev{text-align: left;}
.postNav .postNext{text-align: right;}
.postNav .backList{text-align: center;}

/*commentRespond*/
.commentRespond{}
.commentRespond .comment-title{font-size: 16px; color: #333; margin: 0 0 5px 10px;}

@media screen and (max-width: 1440px){
.editField dt{width: 22%; }
}
@media screen and (max-width: 1199px){
.editField dt{width: 30%; }
}
@media screen and (max-width: 991px){
.detailAside{margin: 0 0 30px 0;}
.detailAside .img{width: 35%; margin: 0 10px 0 0; display: inline-block; }
.detailAside .info{width: 45%; display: inline-block; vertical-align: top; border:none;}
.postNav a.backList{width: 27%;}
}
@media screen and (max-width: 768px){
.editField dt{width: 100%; display: block; text-align: left;}
.editField dd{width: 100%; display: block; border-bottom: 1px solid #CCC;}
.editField dd:last-child{border-bottom: none;}
}
@media screen and (max-width: 480px){
.detailAside .img{width: 100%; margin: 0 0 15px 0;}
.detailAside .info{width: 100%; padding:0 0 0 10px; border-left: 1px solid #CCC; margin: 0 0 20px 0;}
}

/*------------------------
fooetr
-----------------------*/
/*fooetrNewsletter 訂閱電子報*/
.fooetrNewsletter{margin: 30px auto; text-align: center;}
.fooetrNewsletter div{display: inline-block; color: #555; font-size: 14px;}
.fooetrNewsletter .title{color: #333; font-size: 18px; vertical-align: middle;}
.fooetrNewsletter i{font-size: 37px; color: #555; margin: 0 70px 0 15px; vertical-align: middle;}
.fooetrNewsletter form{display: inline-block; margin: 0 0 0 30px;}
.fooetrNewsletter form input{width: 420px; height: 45px; padding: 0 20px; margin: 0 10px 0 0; background-color: #fff; border-radius: 5em; border: none;}
.fooetrNewsletter form button{width: 45px; height: 45px; background-color: #555; border-radius: 99em; font-size: 18px; color: #fff;  text-align: center; border: none;}
.fooetrNewsletter form button:before{ font-family: FontAwesome; content: "\f002"; }
.fooetrNewsletter form button:hover{background-color: #999;}

/*fooetrInfo*/
.fooetrInfo{padding: 30px 0 0 0; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC;}
.fooetrInfo .company{width: 33%; display: inline-block; vertical-align: top;}
.fooetrInfo .address{width: 35%; display: inline-block; vertical-align: top; font-size: 14px;}
.fooetrInfo .address dt{width: 23%; color: #333; display: inline-block; vertical-align: top; margin-bottom: 20px; font-size: 14px;}
.fooetrInfo .address dd{width: 72%; color: #555; display: inline-block; vertical-align: top; margin-bottom: 20px; font-size: 14px;}
.fooetrInfo .address i{font-size: 15px; margin: 0 5px 0 0;}
.fooetrInfo .address i.big{font-size: 18px;}
.fooetrInfo .fbComments{width: 31%; display: inline-block; vertical-align: top;}
.fooetrInfo .fbComments iframe[style] {width: 100% !important;}

/*fooetrFriendLink*/
.fooetrFriendLink{padding: 15px; display:block; color: #888; font-size: 14px;}
.fooetrFriendLink a{color: #555; margin: 0 15px;}
.fooetrFriendLink a:hover{color: #59B2C4;}

/*fooetrMsg*/
.fooetrMsg{font-size: 13px; background-color: #333; color: #ccc; padding: 20px 10px 10px; display: block; overflow: hidden;}
.fooetrMsg .share{margin: 20px 0;}
.fooetrMsg .share img{max-width: 100%; height: auto;}
/*.fooetrMsg .share a{width: 45px; height: 45px; margin: 0 10px 0 0; display: inline-block; text-align: center; border: 1px solid #fff; border-radius: 99em; opacity: 0.7;}*/
/*.fooetrMsg .share a:hover{opacity: 1; border: 1px solid #fff;}*/
.fooetrMsg .copyright a{color: #ccc;}
.fooetrMsg .copyright a:hover{color: #59B2C4;}
.fooetrMsg .copyright .left{text-align: left; display: inline-block;}
.fooetrMsg .copyright .right{text-align: right; display: inline-block;}
@media screen and (max-width: 1280px){
.fooetrInfo{text-align: center;}
.fooetrInfo .company{width: 360px; text-align: left; margin: 0 30px 30px 10px;}
.fooetrInfo .address{width: 350px; text-align: left;}
.fooetrInfo .address dt{width: 100px;}
.fooetrInfo .address dd{width: 230px;}
.fooetrInfo .fbComments{display: none; }
}
@media screen and (max-width: 1199px){
.fooetrNewsletter div{display: block; text-align: center; margin: 0 auto;}
.fooetrNewsletter i{margin: 0 15px}
.fooetrNewsletter form{display: block; text-align: center; margin: 5px auto 0 auto;}
.fooetrNewsletter form input{width:70%;}
.fooetrFriendLink{text-align: center;}
.fooetrMsg .share{text-align: center;}
.fooetrMsg .copyright .left{text-align: center; display: block;}
.fooetrMsg .copyright .right{text-align: center; display: block;}
}
@media screen and (max-width: 991px){
.fooetrMsg{padding: 20px 0 50px 0;}
}
@media screen and (max-width: 480px){
.fooetrNewsletter i{font-size: 22px;}
.fooetrInfo{margin: 30px auto 5px auto; }
.fooetrInfo .company{width: 90%; text-align: left; margin: 0 auto 30px auto; text-align: center;}
.fooetrInfo .company img{max-width: 80%;} 
.fooetrInfo .address{width: 100%; margin: 0 auto;}
.fooetrFriendLink a{display: inline-block;}
.fooetrMsg .copyright .right a{display: inline-block;}
}

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

/*標題title*/
h1{ }
h2{ }
h3{line-height: 1.3; }
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;}

/*按鈕btn*/
.btnBox{margin: 50px auto 50px auto; text-align: center; display: block; clear: both; }
.btnRadius{text-align: center; color: #fff; border-radius: 0.5em; padding: 10px 60px; margin:0 5px; border: none;}
.btnOval{text-align: center; color: #fff; border-radius: 99em; padding: 15px 60px; margin:0 5px; border: none;}
.btnRadius i{font-size: 19px; margin: 0 5px 0 0; display: inline-block;}
.btnOval i{font-size: 17px; margin: 0 5px 0 0; display: inline-block; vertical-align: middle;}

.btnWhite{font-size: 15px; background-color: #fff; color: #555; border: 1px solid #555;}
.btnWhite:hover{background-color: #A3DDE5; border: 1px solid #59B2C4; color: #555; }
.btnBlue{font-size: 16px; background-color: #59B2C4; color: #FFF; }
.btnBlue:hover{background-color: #8BC9D6; color: #FFF;}

/*----------------------------------
皮膚（skin）
------------------------------------*/
/*wordLink*/
.wordLinkBlack{ color: #333;}
.wordLinkBlack:hover{color: #F39800;}
.wordLinkBlue {color: #59B2C4;}
.wordLinkBlue:hover {color: #1F8B99;}

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

/*bg color*/
.bgGray{background-color: #777;}
.bgBlue{background-color: #59B2C4;}

/*字級*/
.font18{ font-size:18px;}
.font20{ font-size:20px;}
.font25{ font-size:25px; vertical-align: top; line-height: 1;}

/*pageView 瀏覽人數*/
.pageView{vertical-align: top; font-size: 14px; }
.pageView i{width: 21px; height: 21px; font-size: 17px; border-radius: 99em; text-align: center; vertical-align: middle; margin: 0 5px 0 0; padding: 1px 0 0 0;}