body {
  font-family: "Microsoft JhengHei";
  font-weight: 300;
  }


.to-right{
  float:right;
  position: relative;
}
/********************
  Image filter    *
                  *
********************/    
.imgfilter-1{
  display: block;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
 
}

.imgfilter-2{
  display: block;
  -webkit-filter: sepia(1);
  filter: sepia(1);
}
.imgfilter-3{
  display: block;width:100%;
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

.half-opacity {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
}

.cover-bg{
background: url(../images/GPL/gpl-doc-3.JPG) no-repeat;
background-size: cover;
width: 100VW;
height: 350PX;
position: relative;
}


.cover-bg2{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100VW;
height: 350PX;
line-height: 50px;
text-align: center;
background:rgba(255,255,255,0.5);
}

.cover-bg0{
position: relative;
background-image: url(../images/bg-1.jpg);
background-size: cover;
background-position: center center;

}

#full01 {
display: table;
width: 100%;
height: 95vh;
/* background: url(../img/hero-bg.jpg) top center;  */
background-size: cover;
}

@media (min-width: 1024px) {
#full01 {
  background-attachment: fixed;
}
}


#full01 .full-container {
background: rgba(0, 0, 0, 0.8);
display: table-cell;
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
background-position: 45% 75%;
}



/********************
  text color      *
                  *
********************/  
.ccw-400{
 max-width: 400px;
}

/********************
  text color      *
                  *
********************/  

.text-orange{
color:#fb8a2e;
}

.text-orange2{
color:#fd9f3e;
}
.text-orangelight{
color:#ffb648;
}

.text-orange3{
color:#D46C3C;
}

.text-darkred{
color:#990000;
}
.text-darkred2{
color:#862633;
}
.text-grey{
color:#959999;
}

.text-blue2{
color:#5099ed;
}

.text-gold{
color:#bf924f;
}

.h-gold {
color : #333333;
}
.h-gold:hover {
color : #bf924f;
text-decoration: none;
}

.text-darkblue{
color:#2c3e50;
}
.text-yellow{
color:#FFCC00;
;
}

.text-pink{
color:#ed1965;
}

.text-purple{
color:#371777;
}


/********************
  Frame           *
                  *
********************/  

.frame-white{
background-color: #fff;
border-radius: 6px;

}
.frame-darkblue{
background-color: #2c3e50;
border-radius: 6px;

}
.frame-grey{
background-color: #959999;
border-radius: 6px;
}

.frame-lightgrey{
  background-color: #eaeaea;
  border-radius: 6px;
}

.frame-darkgreen {
  background: #2C4832;
  border-radius: 6px;
}

.frame-test {
  background: #00515E;
  border-radius: 10px;
}

.frame-darkgreen2 {
  background: #00515E;
  border-radius: 10px;
}
.frame-outline-darkgreen2 {
  border:2px #00515E solid;
  border-radius: 10px;
}
.frame-outline-primary {
  border:2px #007bff solid;
  border-radius: 10px;
}

 .frame-outline-gold {
  border:2px #8a7967 solid;
  border-radius: 10px;
}
.frame-outline-grey {
  border:2px #c0c0c0 solid;
  border-radius: 10px;
}
.frame-outline-lightgrey {
  border:2px #efefef solid;
  border-radius: 10px;
}
/********************
  text size vw    *
                  *
********************/  
.textvw400{
font-size: 4.8vw;
}
.textvw300{
font-size: 3.6vw;
}
.textvw240{
font-size: 2.4vw;
}
.textvw220{
font-size: 2.2vw;
}
.textvw200{
font-size: 2vw;
}
.textvw180{
font-size: 1.8vw;
}
.textvw160{
font-size: 1.6vw;
}
.textvw140{
font-size: 1.4vw;
}
.textvw120{
font-size: 1.2vw;
}
.textvw110{
font-size: 1.1vw;
}
.textvw100{
font-size: 1vw;
}
.textvw80{
font-size: 0.8vw;
}

.text-sm2{
font-size:14px;
}

@media only screen and (max-width: 768px) {
.textvw400{
font-size: 16vw;
}
.textvw300{
font-size: 12vw;
}
.textvw240{
  font-size: 9.6vw;
}
.textvw220{
  font-size: 8.8vw;
}
.textvw200{
  font-size: 8vw;
}
.textvw180{
  font-size: 7.2vw;
}
.textvw160{
  font-size:6.4vw;
}
.textvw140{
  font-size: 5.6vw;
}
.textvw120{
  font-size: 4.8vw;
}
.textvw110{
  font-size: 4.4vw;
}
.textvw100{
  font-size: 3.5vw;
}
.textvw80{
  font-size: 3.2vw;
}

}

/********************
  hover color     *
                  *
********************/  
.h-dark{
color:#222;
text-decoration:none ;
}
.h-dark:hover{
color:rgb(73, 72, 72);
text-decoration:none ;
}
.h-white{
color:#fff;
text-decoration:none ;
}
.h-white:hover{
color:#fff;
text-decoration:none ;
}




/********************
  button    vw    *
                  *
********************/  
.btn-gold{
background-color:#8a7967;color: #fff;
}
.btn-gold:hover, .btn-gold:focus, .btn-gold.active {
  background: #776858;color: #fff;
}

.btn-brown{
background-color:#6c2537;color: #fff;
}
.btn-brown:hover, .btn-brown:focus, .btn-brown.active {
background: #531827;color: #fff;
}
.btn-pink{
background-color:#ed1965;color: #fff;
}
.btn-pink:hover, .btn-brown:focus, .btn-pink.active {
background: #b91451;color: #fff;
}
.btn-tubered{
background-color:#ff0000;color: #fff;
}
.btn-tubered:hover, .btn-brown:focus, .tuberedpink.active {
background: #ff0000;color: #fff;
}

.login_btn{
color: black;
background-color:  #FFC312;
/* width: 100px; */
}
.login_btn:hover{
color: black;
background-color: #d19f0d;
}
 
.btn-grey{
color: black;
background-color:  #cccccc;
/* width: 100px; */
}
.btn-grey:hover{
color: black;
background-color: #999999;
}
       
/********************
  Background color*
                  *
********************/  
.bg-red {
background: #990000;
}

.bg-darkgreen {
background: #2C4832;
}

.bg-orange3{
background:#D46C3C;
}
.bg-pink{
  background:#ed1965;
  }

/********************
  hEIGHT          *
                  *
********************/  
.minheight-100{
min-height:100px;
}
.minheight-150{
min-height:150px;
}
.minheight-200{
min-height:200px;
}
.minheight-220{
  min-height:220px;
  }
.minheight-250{
min-height:250px;
}
.minheight-300{
min-height:300px;
}
.minheight-350{
min-height:350px;
}
.minheight-400{
min-height:400px;
}
.minheight-450{
min-height:450px;
}
.minheight-500{
min-height:500px;
}
.minheight-550{
min-height:550px;
}
.minheight-600{
  min-height:600px;
}
.minheight-650{
  min-height:650px;
}
.minheight-700{
  min-height:550px;
  }
.minheight-750{
  min-height:550px;
  }
  
.height-100{
height: 100px; 
object-fit: cover;
}
.height-150{
height: 150px; 
object-fit: cover;
}


/********************
  width         *
                  *
********************/  
.width-100{
width: 100px; 
object-fit: cover;
}
.width-120{
width: 120px; 
object-fit: cover;
}
.width-125{
width: 125px; 
object-fit: cover;
}

.width-140{
width: 140px; 
object-fit: cover;
}


.width-150{
width: 150px; 
object-fit: cover;
}



/********************
  Display         *
                  *
********************/  




@media only screen and (max-width: 768px) {
  .hide-in-mobile{ /*當手機時不顯現*/
      display:none;
    }
  }
     
@media only screen and (min-width: 768px) {
  .hide-in-desk{ /*當手機時不顯現*/
      display:none;
    }
  }
       
@media only screen and (min-width: 768px) {
    .inlineshow-in-desk{ /*當手機時不顯現*/
        display:inline;
      }
    }