@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');

@font-face{
     font-family: "Optima Regular";   /*Optima Regular*/
     src:  url('../font/Optima-Regular.ttf') format('truetype');
}
 
@font-face{
     font-family: "Myriad Bold";   /*Myriad bold*/
     src:  url('../font/MyriadBold.otf') format('opentype');
}

@font-face{
     font-family: "Myriad Roman";   /*Myriad Roman*/
     src:  url('../font/Myriad-Roman/MyriadRoman.woff2') format('woff2'),
           url('../font/Myriad-Roman/MyriadRoman.eot?#iefix') format('embedded-opentype');
}

@font-face{
     font-family: "Myriad Bold Italic";   /*Myriad Bold Italic*/
     src:  url('../font/Myriad-Bold-Italic/Myriad-Bold-Italic.woff2') format('woff2'),
           url('../font/Myriad-Bold-Italic/Myriad-Bold-Italic.eot?#iefix') format('embedded-opentype');
}

@font-face{
     font-family: "Myriad Italic";   /*Myriad Italic*/
     src:  url('../font/Myriad-Italic/Myriad-Italic.woff2') format('woff2'),
           url('../font/Myriad-Italic/Myriad-Italic.eot?#iefix') format('embedded-opentype');
}

/**{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}*/

body {
 min-width:375px;
}


.headerImg {
	background-image: url('../img/mainbanner.png');
    background-repeat:no-repeat;
    background-position: left bottom;
	}

.container {
    max-width:1140px;
}

.navbar a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
  vertical-align:middle;
  margin:0;
}

.navbar a:hover {
  background-color: #00313f;
  text-decoration: none;
  color: white;
}

.navbar a.active {
  background-color: #4CAF50;
  text-decoration: none;
  color: white;
}

.navbar {
    color:#ffffff;
    margin:0;
    padding:0;
}

 .navbar .navbar-center {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    
  }


.setfooter {
		margin-left:28px;
}


.setfooter2 {
		margin-left:50px;
}


/*#LeftMenu {
border: 1px solid #e0e0e0;
}


#LeftMenu img {
    padding:2px 4px;
}*/


#navlist {
  position: relative;
  right:20px;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 10px;/*25px;*/

}
#navlist li, #navlist a {
  height: 32px;
  display: block;
}

/* new add for social media list on 20200713 */
#navlist3 {
  position: relative;
  right:20px;
}

#navlist3 li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 30px;

}
#navlist3 li, #navlist3 a {
  height: 32px;
  display: block;
}
/* new add for social media list on 20200713*/


#home {
  right: 225px /*115px*/;
  width: 31px;
  height:32px;
  background: url('../img/mainIcon_home.png') 0 0;
}

#home a:hover{
   background: url('../img/mainIcon_home_w.png') 0 0;
    background-repeat:no-repeat;
}

#chi {
  right: 188px /*78px*/;
  width: 32px;
  height:32px;
  background: url('../img/mainIcon_chi.png') 0 0;
   background-repeat:no-repeat;
}


#chi a:hover{
   background: url('../img/mainIcon_chi_w.png') 0 0;
    background-repeat:no-repeat;
}


#port {
  right: 151px /*41px*/;
  width: 32px;
  height:31px;
  background: url('../img/mainIcon_pt.png') 0 0;
   background-repeat:no-repeat;
}


#port a:hover{
   background: url('../img/mainIcon_pt_w.png') 0 0;
    background-repeat:no-repeat;
}

#eng {
  right: 115px/*5px*/;
  width: 32px;
  height:31px;
  background: url('../img/mainIcon_en.png') 0 0;
   background-repeat:no-repeat;
}


#eng a:hover{
   background: url('../img/mainIcon_en.png') 0 0;
    background-repeat:no-repeat;
}
  
/* new add for social media list on 2020-07-13 */
#mWechat {
  width: 47px;
  height:47px;
  background: url('../img/m_icon_wechat.png') 0 0;
  background-repeat:no-repeat;
}

#mFB {
  width: 47px;
  height:47px;
  background: url('../img/m_icon_FB.png') 0 0;
  background-repeat:no-repeat;
}

#mIG {
  width: 47px;
  height:47px;
  background: url('../img/m_icon_IG.png') 0 0;
  background-repeat:no-repeat;
}

#mYoutube {
  width: 47px;
  height:47px;
  background: url('../img/m_icon_youtube.png') 0 0;
  background-repeat:no-repeat;
}
#mTikTok {
  width: 47px;
  height:47px;
  background: url('../img/m_icon_tiktok.png') 0 0;
  background-repeat:no-repeat;
}
/* new add for social media list on 2020-07-13 */


#mHome {
  width: 47px;
  height:46px;
  background: url('../img/lang/mLang_home_w.png') 0 0;
    background-repeat:no-repeat;
}
#mHome:hover{
   background: url('../img/lang/mLang_home.png') 0 0;
     background-repeat:no-repeat;
}

#mCn {
  width: 47px;
  height:46px;
  background: url('../img/lang/mLang_cn_w.png') 0 0;
    background-repeat:no-repeat;
}
#mCn:hover{
   background: url('../img/lang/mLang_cn.png') 0 0;
     background-repeat:no-repeat;
}

#mPt {
  width: 47px;
  height:46px;
  background: url('../img/lang/mLang_pt_w.png') 0 0;
    background-repeat:no-repeat;
}
#mPt:hover{
   background: url('../img/lang/mLang_pt.png') 0 0;
     background-repeat:no-repeat;
}

#mEn {
  width: 47px;
  height:46px;
  background: url('../img/lang/mLang_en_w.png') 0 0;
    background-repeat:no-repeat;
}
#mEn:hover{
   background: url('../img/lang/mLang_en.png') 0 0;
     background-repeat:no-repeat;
}


/*#navlist2 {
  position: relative;
  right:0;
}*/

 .hotCon{
    margin-top:20px;
}

#LeftMenu .vertical-menu1{
  width: 100%;
  padding-bottom:5px;
}


#LeftMenu .vertical-menu2 {
  width: 100%;
  padding-bottom:5px;
}

#LeftMenu .vertical-menu1 a {
  background-color: none;
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
  border: 1px solid #e0e0e0;
  border-top:0;
  text-align:right;
   color:#006184;
font-weight:bold;
}

#LeftMenu  .vertical-menu2 a {
  background-color: none;
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
  border: 1px solid #e0e0e0;
  border-top:0;
  text-align:right;
  color:#7B7C7F;

}


#LeftMenu .vertical-menu1 a:hover, #LeftMenu .vertical-menu2 a:hover {
  background-color: #F1F2F2;

}

#LeftMenu .vertical-menu1 a.active, #LeftMenu .vertical-menu2 a.active {
  background-color: #4CAF50;
  color: white;

}



#navlist2 li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
}

#navlist2 li, #navlist2 a {
  height: 32px;
  display: block;
 }


.commIcon:hover {
  opacity:0.4;
  filter:alpha(opacity=40); 
}

.commIcon {
   opacity:1.0;
   filter:alpha(opacity=100);
}

#FB {
  /*right: 113px;*/
  right: 43px;/*78px;*/
  width: 32px;
  background: url('../img/main_icon_FB.png') 0 0;
 
}

#IG {
  /*right: 78px;*/
  right:7px/*43px*/;
  width: 32px;
  background: url('../img/main_icon_IG.png') 0 0;

}

#YouTube {
  /*right: 43px;*/
  right: -30px/*5px*/;
  width: 32px;
  background: url('../img/main_icon_youtube.png') 0 0;
}
#TikTok {
  /*right: 43px;*/
  right: -65px;/*5px*/
  width: 32px;
  background: url('../img/main_icon_tiktok.png') 0 0;
}

#Wechat {
  right: 78px/*113px*/;
  /*right: 5px;*/
  width: 32px;
  background: url('../img/main_icon_wechat.png') 0 0;
}
    

 #Go2Top {
           display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: red; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
        }

  #Go2Top:hover {
    background-color: #555; /* Add a dark-grey background on hover */
        }
            

  .title1 { 
            font-size: 1.5rem;
            color: #615F93;
            font-weight: bold;
            /*margin-left:1rem;*/
  } /* add this on 20190905 for the general page title style */

@media screen and (min-width: 990px) {
       
    
    .navbar {
        height: 45px;
        font-size: 0.8rem;
        padding:0;
        margin:0;
    }

    .navbg {
        height: 100%;
    }

     .nav-item {
          height: 40px;
          padding: 0px 2px;
          margin:0;
}

  .navbar a:hover {
      height:40px;
}

  .dropdown-item {
      font-size:0.8rem;
       height: 40px;
       vertical-align:baseline; 
  }

    .setfooter {
   min-height: 52px;
}


   .commIcon {
      padding: 10px;

   }

     .w3-image{
        height:100%;
        width:auto;
    }
}

@media screen and (max-width: 990px) {
    /*#navlist2 {
        padding-bottom: 20px;
        float: right;
        left: 20px;
    }*/

     /* 20190809*/
    .menuLine > li {
        border-top: 1px solid #cccccc;

    }

    .dropdown-menu > a {
        border-top:1px solid #7f7f7f;

    }

    .navbar a {
        text-align: left;

    }
    /* 20190809*/

    
 .nav-link {
     width:100%;
     margin:0;
 } 

  .nav-item {
     width:100%;
 }


     .nav-item i {
         position:relative;
         right:20px;
         float:right;
         margin-top:5px;

    }

      .hotCon{
    margin-top:0;
}

     #LeftMenu {
         padding:12px 0 ;
     }

      #LeftMenu .vertical-menu1 a, #LeftMenu .vertical-menu2 a {
        text-align:center; 
        font-size:1.2rem;      
    }

         .col-xs-12 {
            display: flex;
            flex-direction: column-reverse;
        }
}


@media screen and (max-width: 775px) {
    .setfooter {
        min-height: 120px;
    }

     

}


@media screen and (max-width: 600px) {
     #LeftMenu {
           padding-bottom:20px;
           border: none;
       }
}

@media screen and (max-width: 575px) {
    .minfooter {
        margin-left: -15px;
    }
}


@media screen and (max-width: 500px){
  
   .headerImg{
	background-image: url('../img/mainban_mobile.png');
     background-repeat:no-repeat;
     background-position:left bottom;
	}
      

     .bmargin {

       margin-top:0;
    }

     .navbar {
         margin-left:-23px;
     }

 	.setfooter {
		margin-left:0;
         min-height:150px;
}


     
 	.setfooter2 {
		margin-left:20px;
        min-height:200px;
}


   .commIcon {
      padding: 10px;

   }


   .newstext a {
        font-size:1.2rem;
   }

  
}