@import "http://fonts.googleapis.com/earlyaccess/notosanstc.css";
/*scrollbar*/
.mCSB_scrollTools{width: 15px;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  background-color: rgba(255,255,255,0);
  border-radius: 0px;
  border:1px solid #000;
  width:9px;
}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
  background-color: rgba(0,0,0,1);
}
.mCSB_scrollTools .mCSB_draggerRail{
  background-color: rgba(0,0,0,1);
  width: 1px;
}
.mCSB_scrollTools .mCSB_buttonUp,.mCSB_scrollTools .mCSB_buttonDown{
  background-image:none;
  color:#000;
  opacity: 1;
  border-bottom: none;
}
.mCSB_scrollTools .mCSB_buttonUp:before{
  content:"\f0d8";
  font-family: FontAwesome;
  font-size: 14px;
  position: absolute;
  top: 0px;
  left: 4px; 
}
.mCSB_scrollTools .mCSB_buttonDown:before{
  content:"\f0d7";
  font-family: FontAwesome;
  font-size: 14px;
  position: absolute;
  top: 0px;
  left: 4px;     
}

.jf-loading body { /*載入中不顯示*/
      opacity: 0;visibility: hidden;
}
.jf-active body { /*如果處理成功，直接顯示*/
      opacity: 1;visibility: visible;
}
.jf-inactive body {/*如果處理失敗，直接顯示*/
      opacity: 1;visibility: visible;
}
.fw400{font-weight: 400;}
.lh1-5{line-height:1.5;}
.wf-loading {opacity:0;} 
.wf-active {
    opacity:1;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;}
body{transition: all 0.3s;}

.wc02{
  font-family: "wcl-02";
}
.hanamin{font-family: "Noto Sans TC", sans-serif !important; }
.langtxt{
  position: fixed;
  z-index: 99;
  top:40px;
  /*left:calc(50%  - 145px);*//*80+65*/
  left:calc(50% - 250px);
}
.show-for-large{display:inline-block;}

.hide-for-large{display:none;position: fixed;z-index:99;top:70px;}

@media screen and (max-width: 39.9375em) {
  .langtxt{left: auto;right:20px;} 
  .show-for-large{display:none} 
  .hide-for-large{display:block;right: 10px;}
}
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  .langtxt{left:calc(50%  - 105px);} 
  .show-for-large{display:none} 
  .hide-for-large{display:block;left:calc(50% - 95px);}
}

@media screen and ( max-height: 600px ){
    .portfolio .logo{left:15px;}
    .portfolio .langtxt{left: auto;right:20px;}
    .portfolio .right-content{display: none;}
    .portfolio .left-content{width: 100%;float: none;padding:0;}
    .sinphoto{display: block !important;}
    .portfolio .sinphoto img{width: 70%;}
    .portfolio .mCSB_inside > .mCSB_container{margin-right:15px;margin-left:10px;}
    .portfolio .mCSB_scrollTools{right: 0;left:auto;}
    .prevnext{position: relative;bottom:0;width: 100%;}
}