/*
 * Author: Carlos Alvarez
 * URL: http://alvarez.is
 *
 * Project Name: SPOT - Free Bootstrap 3 Theme
 * Version: 1.0
 * URL: http://blacktie.co
 */
 
/* FONTS */
/*@import url(https://fonts.googleapis.com/css?family=Lato:300);*/
/*@import url(https://fonts.googleapis.com/css?family=Noto+Sans);*/
@import url(notosanstc.css);


/* OVERALL ASPECT */

body {
  background-color: #FFF;
    /*font-family: "Lato";*/
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #555;

    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
    
    /*margin-top: 70px;*/
}

/* Titles */
h1, h2, h3, h4, h5, h6 {
    /*font-family: "Lato";*/
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 300;
    color: #333;
}


/* Paragraph & Typographic */
p {
    line-height: 28px;
    margin-bottom: 25px;
    /*font-family: "Lato";*/
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 16px;
    font-weight: 300;
}

.centered {
    text-align: center;
}

/* Links */
a {
    color: #f85c3;
    word-wrap: break-word;
    /*font-family: "Lato";*/
    font-family: 'Noto Sans TC', sans-serif;
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

a:hover,
a:focus {
    color: #222;
    text-decoration: none;
    outline: 0;
}

a:before,
a:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

 hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}


/*HEADER*/


/** 手機版header */
.topheader {

    top: 0;
    width: 100%;
    z-index: 1000;
    display:none;
    position: fixed;

    background: #FFF; /* Old browsers */
   


}  
.topheader a{

    background: center center no-repeat transparent;
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 5px;
    left: 10px;
    color:#666666;
    font-size: 20px;
}
.topheader i{

    font-size: 30px;
}
.mobile-logo{


    position: fixed;
    top: 3px;
    left: 35%;
    
}
@media screen and (max-width: 770px) and (min-width: 400px){

    .mobile-logo{

    left: 40%;
}
}
@media only screen and (max-width: 400px) {
    .mobile-logo{

    left: 30%;
}
    
}
.mobile-search{

    position:absolute;
    left:90%;
    top:0px;
    font-size: 10px;

}

.material-menu-button {
        width:50px;
        height:45px;
        background: #FFF; /* Old browsers */
        color:#222;
        display:none;
}

/** Menu in mobile-view */

@media only screen and (max-width: 770px) {
    /** Button styling */
    .material-menu-button {
        display:block;
        
    }
    
}
nav:not(.mm-menu){

    display: none;
}


.navbar-header-logo{

    position: fixed;
    top: 1px;
    z-index:1030;
    left:280px;
}

/*手機版選擇語言*/    
.side_location{
    padding:5px;
    margin-left: 20px;
    margin-bottom: 10px;
    -webkit-border-radius:1px;
    -moz-border-radius:1px;
    border-radius:1px;              
    background: #f8f8f8;
    color:#888;
    outline:none;
    display: inline-block;
    cursor:pointer;
}

/** 電腦版header */


.navbar {
    font-weight: 300;
    font-size: 14px;
    /*padding-top: 15px;*/
    padding-bottom: 0px;



}       
@media screen and (max-width: 770px) {
    .navbar {
        display:none;
    }
    .topheader {
        display:block;
    }


    
}

.navbar-inverse {
	background: #FFF;
  border-bottom: 1px solid #AAAAAA;

}

/*最上方選擇網頁語言那條*/
.navbar-top {
    display:block;
    /*font-family: "Lato", Helvetica, Arial, sans-serif;*/
    font-family: 'Noto Sans TC', sans-serif;
    text-align:center; /*Specify the alignment of the whole UL if UL is not width:100%;*/
    letter-spacing:normal;
    width:96.4%;
    margin-top: 10px;
    padding-right:145px;
    
}
.navbar-top a{
    color:#888888;
    /*font-family: "Lato";*/
    font-family: 'Noto Sans TC', sans-serif;
    margin-right: 10px ;

}

/*電腦版選擇語言*/   
.location{
               /* padding:1px;*/
                /*margin-right: 10px;*/
                -webkit-border-radius:1px;
                -moz-border-radius:1px;
                border-radius:1px;
               
                background: #f8f8f8;
                color:#888;
                border:none;
                outline:none;
                display: inline-block;
            
                cursor:pointer;
            }

            /* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .location {padding-right:1px}
}


/**電腦版menu**/
#ddmenu
{
    display:block;
    font-family: "Lato", Helvetica, Arial, sans-serif;
    text-align:center; /*Specify the alignment of the whole UL if UL is not width:100%;*/
    letter-spacing:normal;
    width:100%;

}

#ddmenu ul
{ 
   /* margin:0 auto;*/

    margin-top: 5px;
    padding-right:150px;
    text-align:right; /* Alignment of each top-level menu items within the UL */
    width:95%;
    background:#FFF;
    display:inline-block;
    list-style:none;
    position:relative;
    z-index:9; 

}

#ddmenu li
{
    margin:0;
    padding:0;
    font-size:22px;
    display:inline-block;
    *display:inline;
    zoom:1; /*for IE6-7*/
    position:relative;
    color:#777;
    line-height:50px; /*This determines the height of the menu*/
    transition:background-color 0.2s;
    outline:none;
    -moz-user-select:none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
@media screen and (max-width: 1768px) and (min-width: 1358px){



.navbar-header-logo{


    /*left:180px;*/
    left:10%;

}


} 
@media screen and (max-width: 1358px) and (min-width: 1100px){

   #ddmenu ul
  {
      
      padding-right: 20px;

    
  }
  .navbar-top {

     padding-right:20px;
    
}

.navbar-header-logo{


    left:20px;
}


} 
@media screen and (max-width: 1100px) and (min-width: 770px){

   #ddmenu li
  {    
      font-size:14px;
   
  }
   #ddmenu ul
  {
      
      font-size:14px;
      padding-right:5px;

    
  }
  .navbar-header-logo img{

      width:200px; 



  }
  .navbar-header-logo{

    
    top: 2px;
    left:5px;
   
 
  }
  .navbar-top {

     padding-right:5px;
    
  }




} 

#ddmenu li.full-width {
    position:static;
}

#ddmenu li.over
{
    /*color:#FFF;*/
    border-bottom: 1px solid #222;
}

#ddmenu li.over.no-sub {
    
}

#ddmenu .top-heading
{
    font-weight:normal;
    white-space:nowrap;
    margin:0 22px;
    color:inherit;
    text-decoration:none;
    display:inline-block; 
    outline:0;
    cursor:pointer;
}


/* links of top-heading */
#ddmenu li a, #ddmenu li a:link, #ddmenu li a:hover
{
    color:inherit;

}
#ddmenu li a:hover
{
    text-decoration:none;
}

#ddmenu li a:focus
{
    outline:1px dotted #09F;
}

/* caret(arrow icon) */
#ddmenu i.caret
{
    color:inherit;
    left:-18px;
    width: 0;
    height: 0;
    overflow:hidden;/*for IE6*/
    vertical-align:middle;
    margin-bottom:2px;
    border-top: 4px solid;/*caret size is 4px now*/
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    display: inline-block;
    position:relative;
}  
        
/* sub-menu layout
----------------------------*/

#ddmenu .dropdown
{
   content: " ";
    display: table;
    width:100%;   
    left:0px;
    color:#222; 
    background-color: #FFF;
    margin:0;
    padding-top: 30px;
    padding-bottom: 30px;
    display:none;
    position:absolute;
    top:100%;    
 
    border-top:none;
    text-align:left;
    padding-left:50px;
    padding-right:50px;

    font-size:14px;
    line-height:1.1;
    opacity: 0.95;


    
}

#ddmenu li.full-width .dropdown:before,
#ddmenu li.full-width .dropdown:after {
    width:100%;
    content: " ";
    display: table;
     padding-left:50px;
    padding-right:50px;

}

#ddmenu .offset300 {
    left:-300px;right:auto;
}

#ddmenu .right-aligned {
    left:auto;
    right:0px;
}

#ddmenu li.over .dropdown
{
    display:block;
}


/* links in sub menu
----------------------------*/

#ddmenu .dropdown a
{
    display:table;
    *display:block;
    color:#222;
    line-height:22px;  
    text-decoration:none;
    padding:0;
    line-height:1.5;
}
#ddmenu .dropdown p
{
   
    color:#222;
    padding-right: 20px;

}
#ddmenu .dropdown a:hover, #ddmenu 
{
    text-decoration:none;
    color:#09F;
}

/* blocks within the sub-menu
-----------------------------*/
#ddmenu div.column
{
    text-align:left;
    vertical-align:top;/*or middle*/
    display:inline-block;
    *display:inline;*zoom:1;
    white-space:normal;
    width:50%;
    padding-left:30px;

    border-right:1px solid #999;
}

/*#ddmenu div.dd-inner div:last-child
{
    border-right:none;
}*/

#ddmenu div h3 {
  font-weight: 500;
  line-height: 1.1;
  /*margin-top: 12px;*/
  margin-bottom: 10px;
  font-size: 16px;
  color:#222;
}

#ddmenu .top-heading {text-transform:uppercase;}

@media screen and (max-width: 946px) and (min-width: 770px){
  #ddmenu .dropdown
  {
     
      padding-left:70px;
      padding-right:70px;
      font-size:12px;
      line-height:1.1;
      
  }
  #ddmenu div h3 {

  line-height: 1.1; 
  font-size: 18px;
 
}




}
/* useful when http://www.menucool.com/ddmenu/one-menu-for-all-pages */
#ddmenuLink {display:none;}

/*slideshow*/
#owl-demo{

        padding-top: 35px;
        }
         #owl-demo .item{
          margin: 3px;
          vertical-align: middle;
          text-align: center;
        }
        #owl-demo .item img{
          display: block;
          width: 100%;
          height: auto;
          vertical-align: middle;
          text-align: center;
        }





.searchbar{

    width:50px;
    top:70px;
    right:50px;
    position: fixed;
    z-index: 100;
}
.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;    
}
.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
    pointer-events: none;
}
#header-background{

  margin-top:92px;


}

@media screen and (max-width: 1002px) and (min-width: 770px){

    #header-background {
        margin-top:95px;
    }
     .navbar {

        padding-bottom: 0px;

    } 

    
}


@media screen and (max-width: 769px) {
    #header-background {
        margin-top:45px;
        width: 100%;


    }
    
    
}

/*banner caption*/
.banner-caption {
      position:absolute; 
      top:68%; 
      left:57%; 
      width:300px;
      text-align: center;
      opacity: 0.9;
    }
    
@media screen and (max-width: 769px) {
    .banner-caption{
      top:70%; 
      left:30%; 
      width:250px;


    }
    
}


/*除了首頁以外的banner設定*/
.banner-caption_s{

          position: absolute;
          top:250px;
          left:20%;
          z-index:3;
          opacity:0.9;
   
          

        }
       .banner-caption_s a{

           background:#FFF; 
           color:#222;
          
           padding-left: 40px;
           padding-right: 40px;
           padding-top: 20px;
           padding-bottom: 20px;      
           font-size: 50px;
        }
       
        .static-header{

          width:100%;
          padding-top:90px;
        }
  @media screen and (max-width: 1187px) and (min-width: 872px){

       .static-header{

          width:100%;
           padding-top:90px;
        }
        .banner-caption_s{

           
          top:200px;
          left:10%;
          z-index:100;
         
          

        }
         .banner-caption_s a{

           background:#FFF; 
           color:#222;
          
           padding-left: 25px;
           padding-right: 25px;
           padding-top: 10px;
           padding-bottom: 10px;      
           font-size: 35px;
        }

    
}

@media screen and (max-width: 871px) and (min-width: 775px){
       .static-header{

          width:100%;
          padding-top:50px;
        }
       .banner-caption_s{

           
          top:170px;
          left:10%;
          z-index:100;
      
          

        }
       .banner-caption_s a{

           background:#FFF; 
           color:#222;
          
           padding-left: 25px;
           padding-right: 25px;
           padding-top: 10px;
           padding-bottom: 10px;      
           font-size: 20px;
        }
    
    
}
@media screen and (max-width: 774px) and (min-width: 547px){
       .static-header{

          width:100%;
          padding-top:50px;
        }
       .banner-caption_s{

           
          top:120px;
          left:10%;
          z-index:100;
      
          

        }
       .banner-caption_s a{

           background:#FFF; 
           color:#222;
          
           padding-left: 25px;
           padding-right: 25px;
           padding-top: 10px;
           padding-bottom: 10px;      
           font-size: 20px;
        }
    
    
}

@media screen and (max-width: 547px) and (min-width: 471px){
       .static-header{

          width:100%;
          padding-top:50px;
        }
       .banner-caption_s{

           
          top:100px;
          left:10%;
          z-index:100;
      
          

        }
       .banner-caption_s a{

           background:#FFF; 
           color:#222;
          
           padding-left: 25px;
           padding-right: 25px;
           padding-top: 10px;
           padding-bottom: 10px;      
           font-size: 20px;
        }
    
    
}
@media screen and (max-width: 470px) {
       .static-header{

          width:100%;
          padding-top:50px;
        }
       .banner-caption_s{

           
          top:75px;
          left:10%;
          z-index:100;
      
          

        }
       .banner-caption_s a{

           background:#FFF; 
           color:#222;
          
           padding-left: 20px;
           padding-right: 20px;
           padding-top: 5px;
           padding-bottom: 5px;      
           font-size: 16px;
        }
    
    
}

/*sitemap的部分*/
/*mobile sitemap*/
ul{
      list-style: none outside none;
      padding-left: 0;
      margin: 0;
}
.accordion {
  width: 100%;
  max-width: 1000px;
  margin: 30px auto 20px;
  background: #FFF;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  display:none;
  
}

.accordion .link {
  cursor: pointer;
  display: block;
  padding: 15px 15px 15px 42px;
  padding-left: 0px;
  color:  #5B5B5B;
  font-size: 16px;
  font-weight: 700;
  border-top: 1px solid #CCC;
  
  position: relative;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.accordion .link a {
  color:#5B5B5B;
}
.accordion .link a:hover {
  color:#222;
}
.accordion li:last-child .link { border-bottom: 1px solid #CCC; }

.accordion li i {
  position: absolute;
  top: 16px;
  left: 12px;
  font-size: 18px;
  color: #595959;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.accordion li i.fa-chevron-down {
  right: 12px;
  left: auto;
  font-size: 16px;
}

.accordion li.open .link { color: #8E8E8E; }

.accordion li.open i { color: #8E8E8E; }

.accordion li.open i.fa-chevron-down {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.submenu {
  display: none;
  background: #E0E0E0;
  font-size: 14px;
  opacity: 0.98;
}

.submenu li { border-bottom: 1px solid #FFF; }

.submenu a {
  display: block;
  text-decoration: none;
  color: #222;
  padding: 12px;
  /*padding-left: 42px;*/
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;

}

.submenu a:hover {
  background: #4F4F4F;
  color: #FFF;
}

/*desktop sitemap*/
#sitemap{

    background: #FCFCFC;
    padding-top: 70px;
    padding-bottom: 70px;
    text-align: left;
    width:100%;


}
#sitemap .heading {

    color: #222;
     font-size: 18px;
     padding-top: 20px;
     font-weight:bold;
     line-height:40px



}
#sitemap a{

    color: #444444;
     font-size: 16px;


}
#sitemap .item{

    color: #444444;
     font-size: 16px;


}
#sitemap a:hover{

    color: #d0d0d0;
   


}
#sitemap h4{

  color:#000000;
  font-weight:bold;
  font-size: 18px;
}
@media screen and (max-width: 998px) and (min-width: 500px){

  #sitemap a{

    color: #444444;
     font-size: 13px;


}
  #sitemap .item{

    color: #444444;
     font-size: 13px;


}
#sitemap .heading {

    color: #222;
     font-size: 18px;
     padding-top: 20px;




}

}
@media screen and (max-width: 714px) {

    /* .accordion {

    display: block;

    } */
    #sitemap {
       
        /*padding-top: 15px;*/
        display: none;



    } 

    
}

/*back to top btn*/
.top{
          background-color: #444444;
          bottom: 2em;
          color: #fff;
          display: none;
          opacity:0.9;
          padding: 1em;
          position: fixed;
          right: 1.5em;
          text-decoration: none;

          -webkit-border-radius: 5px;
          -webkit-border-bottom-right-radius: 5px;
          -moz-border-radius: 5px;
          -moz-border-radius-bottomright: 5px;
          border-radius: 5px;
          border-bottom-right-radius: 5px;
        }
.top:hover{
    opacity:1;
    transition:1s;
}

/* ==========================================================================
   Wrap Sections
   ========================================================================== */

#headerwrap {
	
	margin-top: -10px;
	
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 500px;
	width: 100%;
	
   
    background-size: cover;
}



/* Dark Grey Wrap */
#custom {
    background: #FFF;
    padding-top: 35px;
    padding-bottom: 35px;
    
}
#custom h3{
    color: #222;
   
    
}
/* Dark Grey Wrap */
#dg {
	background: #e0e0e0;
	padding-top: 70px;
	padding-bottom: 70px;
	text-align: center;
}

#dg h4 {
	font-weight: 700;
}

/* Light Grey */
#lg {
	background: #ebebeb;
	padding-top: 70px;
	padding-bottom: 70px;
	text-align: center;
}

#lg h4 {
	font-weight: 700;
}


/* Red Wrap */
#r {
	background: #ff7878;
	padding-top: 35px;
	padding-bottom: 35px;
}

#r h4 {
	color: white;
	font-weight: 700;
}

#r p {
	color: white;
}

/*dark Blue Wrap */

#blue {
	/*background: #00317A;*/
	padding-top: 50px;
	padding-bottom: 50px;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00317a+0,0e7cd6+50,207cca+100,7db9e8+100,00317a+100 */
background: #00317a; /* Old browsers */
background: -moz-linear-gradient(top, #00317a 0%, #0e7cd6 50%, #207cca 100%, #7db9e8 100%, #00317a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #00317a 0%,#0e7cd6 50%,#207cca 100%,#7db9e8 100%,#00317a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #00317a 0%,#0e7cd6 50%,#207cca 100%,#7db9e8 100%,#00317a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00317a', endColorstr='#00317a',GradientType=0 ); /* IE6-9 */
}

#blue h4 {
	color: white;
	font-weight: 700;
}

#blue p {
	color: white;
}




/* Footer Wrap */
#f {
  margin-top: 20px;
	/*background: #222;*/
	padding-top: 18px;
	padding-bottom: 2px;
  padding-left: 20px;
  padding-right: 20px;
    /* Permalink - use to edit and share tis gradient: http:/log/colorzilla.com/gradient-editor/#00317a+0,7db9e8+0,7db9e8+0,207cca+0,00317a+100,0e7cd6+100 */
background: #444444; /* Old browsers */

}
#f p,h3{
    color:#FFF;

}

#f i {
	color: #bdbdbd;
	font-size: 30px;
	padding: 20px;
}

#f i:hover {
	color: #ff7878;
}
@media screen and (max-width: 500px) {

  #f p{
    font-size: 13px;

}
}

  #sitemap a{

    color: #444444;
     font-size: 10px;


}
/****** SECTIONS *****/
.bread {
  padding-top: 20px;
  text-align: right;
   
}

.w {
	padding-top: 40px;
  padding-bottom: 40px;
  background-color: #FFF;
}
@media screen and (max-width: 770px) {
  .w {
  padding-top: 0px;
    padding-bottom: 0px;

}
      
        }
.w h4 {
	font-weight: 700;
}

.w h1,h2,h3,h4 {
  color:#222;
}

.w i {
	color: #ff7878;
	font-size: 30px;
}


.wb {
	padding-top: 35px;
	margin-bottom: 0px;
}

.wb h4 {
	font-weight: 700;
}

.desc {
	padding-top: 35px;
}

.desc h4 {
	font-weight: 700;
}

.desc i {
	color: #ff7878;
	font-size: 12px;
	padding: 5px;
}

/***** MODAL CONTACT *****/
.modal-content {
	border-radius: 0px;

}

.modal-header {
	background: #bdbdbd;
	color: white;
}

.modal-header h4 {
	font-weight: 700;
}

.modal-body {
	background: #f2f2f2;
    font-family: "Lato";
    font-weight: 300;
    font-size: 16px;
    color: #555;
}

.modal-footer {
	background: #f2f2f2;
	margin-top: 0px; 
}

/*********product ************/

/*TAB*/
#myTab li{

    padding-right:20px; 
    padding-left:20px;

  }
#myTab li > a{

    color: #999999;
  text-decoration: none;

}
#myTab > .active > a {
  color: #428bca;
  opacity: 1;
}
  @media screen and (max-width: 1224px) and (min-width: 998px){
     #myTab li{

      padding-right:40px; 
      padding-left:40px;


     }
  }
   @media screen and (max-width: 998px) and (min-width: 770px){
     #myTab li{

      padding-right:20px; 
      padding-left:20px;


     }

  }
/*navigation inside*/

#navigation { font-size:0.75em; width:100%; }
#navigation ul { text-align: left; }
#navigation li { text-align: left;} 

#navigation .sub-level i {
  position: absolute;
  top: 25px;
  right: 20px;
  font-size: 16px;
  color: #595959;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}


#navigation .sub-level a {
 color: #fff;
 cursor: pointer;
 display:block;

 height:100%;
border: #DDD solid 0px;
 text-indent: 10px;
 text-decoration:none;
 width:100%;
 text-align: center;
 padding-top: 10px;
 padding-bottom: 10px;
 padding-right: 20px;
/*font-family: "Lato", Helvetica, Arial, sans-serif;*/
font-family: 'Noto Sans TC', sans-serif;


}
#navigation .top-level a {
/*font-weight: 100;*/
  line-height: 1.1;
  /*margin-top: 12px;*/
  margin-bottom: 10px;
  font-size: 16px;
  color:#222;

} 


#navigation .top-level li {
 width: 300px;
 color:#222;


} 
#navigation a:hover{
 text-decoration:underline;
  color:#DDD;
}
 
#navigation li:hover {
 color:#DDD;
 position: relative;
}

#navigation ul.sub-level {
    display: none;
}
 
#navigation li:hover .sub-level {
    background: #FFF;
    
    border-width: 1px;
    display: block;
    position: absolute;
    width:240px;
    left: 300px;
    top: 0px;
    z-index: 100px;
   
}
 
#navigation ul.sub-level li {
    border-top: #DDD solid 1px;
    border-right: #DDD solid 1px;
    border-left: #DDD solid 1px;
    float:left;
    width:240px;
}
#navigation ul.sub-level li.last-child {
    border-bottom: #DDD solid 1px;
 
   
}
/*RESET STYLES*/
#navigation ul.sub-level .third-level li {

    border-left: #DDD solid 0px;
  
}
#navigation li:hover .sub-level .third-level {
    display:none;
    border-top: #DDD solid 0px;


}
 
#navigation .sub-level li:hover .third-level {
    background: #FFF;

    border-width: 0px;
    display: block;
    position: absolute;
    width:240px;
    left: 240px;
    top: -6px;
     z-index: 100px;
    
}
@media screen and (max-width: 946px) and (min-width: 770px){
        #navigation .top-level a {

        font-size: 14px;



       } 
      #navigation .top-level li {
       width: 230px;

       }
       #navigation ul.sub-level li {
         
          width:200px;
      } 
       #navigation li:hover .sub-level {

          width:200px;
          left: 200px;

         
      }
       #navigation li:hover .sub-level a{

       
          font-size: 14px;
          padding-right: 20px;
          padding-top: 3px;
          padding-bottom: 3px;


         
      }
      #navigation .sub-level li:hover .third-level {

          width:200px;
          left: 200px;
          top: -6px;
           z-index: 100px;
          
      }
      #navigation .sub-level li:hover .third-level a{

          font-size: 14px;
          
      }
      #navigation .sub-level i {
        position: absolute;
        top: 16px;
        right: 20px;
        font-size: 16px;
        color: #595959;
        -webkit-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
      }



}


/*=======*/
/* common and top level styles */
#nav span {
    display: none;
}

#nav {
  text-align:center; /*Specify the alignment of the whole UL if UL is not width:100%;*/
   margin-top: 5px;
    padding-right:200px;
    
    width:100%;
    background:#FFF;
    display:inline-block;
    list-style:none;
    position:relative;
    z-index:9; 
     /*font-family: "Lato", Helvetica, Arial, sans-serif;*/
     font-family: 'Noto Sans TC', sans-serif;
    text-align:center; /*Specify the alignment of the whole UL if UL is not width:100%;*/
    letter-spacing:normal;


}
#nav ul.subs {
    background-color: #FFFFFF;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    color: #333333;
    display: none;
    left: 0;
    padding: 2%;
    position: absolute;
    top: 54px;
    width:100%;
}
#nav ul.contact-subs {
    background-color: #FFFFFF;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    color: #333333;
    display: none;
    
    padding: 2%;
    position: absolute;
    top: 54px;
    width:200px;
    left:-10px;
}
#nav > li {
    border-bottom: 5px solid transparent;
    float: right;
    margin-bottom: -5px;
    text-align: left;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}
#nav li a {
    display: block;
    text-decoration: none;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;
}
#nav > li > a {
    color: #333333;
    display: block;
    font-size: 1.4em;
    line-height: 49px;
    padding: 0 15px;
    text-transform: uppercase;
    font-weight: 500;
}
#nav > li:hover > a, #nav > a:hover {
     border-bottom: 2px solid #AAAAAA;
}

/* submenu */
#nav li:hover ul.subs {
    display: block;
}

#nav li:hover ul.contact-subs {
    display: block;
}

#nav  .sub-text {
    
  line-height: 1.1;
 /* margin-top: 12px;*/
  margin-bottom: 10px;
  font-size: 16px;
  color:#222;
  /*font-weight: 100;*/
  font-family: "Noto Sans TC";
}
#nav  .contact-sub-text {
    
  line-height: 1.1;
 /* margin-top: 12px;*/
  margin-bottom: 10px;
  font-size: 16px;
  color:#222;
  position:relative;
  left:-20px;
  /*font-weight: 100;*/
  font-family: "Noto Sans TC";
}
#nav   a:hover {
    
  color:#888888;
}
.product div.column-1
{
    text-align:left;
    vertical-align:top;/*or middle*/
    display:inline-block;
    *display:inline;*zoom:1;
    white-space:normal;
    width:80%;
    padding-left:30px;
    border-left:1px solid #888888;
     border-right:1px solid #888888;
     padding-top: 3px;


}
.product div.column-1 a
{

     line-height: 1.1;
  /*margin-top: 12px;*/
  margin-bottom: 10px;
  font-size: 16px;
  color:#222;
  /*font-weight: 100;*/
  font-family: 'Noto Sans TC';


}
.product div.column-2
{
    text-align:left;
    vertical-align:top;/*or middle*/
    display:inline-block;

    width:20%;
    padding-left:30px;
   
}

/*.product div.column-2 a
{

     line-height: 1.1;
  margin-top: 12px;
  margin-bottom: 8px;
  font-size: 18px;
  color:#222;
  font-weight: 100;


}*/
#nav .product-text{
  font-family: "Noto Sans TC";

display:inline-block;width:150px;
  line-height: 1.1;
  /*margin-top: 7px;*/
  margin-bottom: 10px;
  font-size: 16px;
  color:#222;
  /*font-weight: 100;*/
}
@media screen and (max-width: 1358px) and (min-width: 1100px){

  #nav 
  {
  
      
      padding-right: 50px;

    
  }
  #nav > li > a {
 
    font-size: 1.2em;

}
#nav  .sub-text {
    

  font-size: 16px;

}

#nav .product-text{

   font-size: 16px;
}
 #navigation .top-level a {

        font-size: 16px;



       } 
 
.product div.column-1 a
{

   font-size: 16px;

}
.product div.column-2 a
{

   font-size: 16px;

}

} 
@media screen and (max-width: 1100px) and (min-width: 770px){


   #nav 
  {
      
      font-size:14px;
      padding-right:35px;

    
  }
  #nav  .sub-text {
    

  font-size: 14px;

}
#nav .product-text{

   font-size: 14px;
}
 #nav > li > a {
 
    font-size: 1em;

}
 #navigation .top-level a {

        font-size: 14px;



       } 

.product div.column-1 a
{

   font-size: 14px;

}

.product div.column-1 
{

   padding-top: 4px;

}

#nav .product-text {

    width: 100px;

}

}