@charset "utf-8";

@import url(../jsp/bootstrap.css);

.navbar { z-index:999999;
	min-height:auto;
 margin-bottom: 0;
  border: none;
  }
  .sr-only { display:none;}
.dropdown-toggle {position:absolute;}
.dropdown-toggle .leftnav-itemname {
    float:left;
    padding: 15px;
    font-size: 1.25em;
    font-weight: bold;
    }
.dropdown-toggle img {
  float:left;
  margin-left:10px;
  vertical-align:middle;
  }
.nav > li > a:hover, .nav > li > a:focus {background-color:transparent;}

/* nav button style */
.navbar-toggle span {
  position: absolute;
  left: -10px;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
.navbar-toggle span[class="icon-bar"] {
  position: relative;
  background-color: #000;
  z-index:999999;
  }
.navbar-toggle span:nth-child(2) {
  top: 0px;
}
.navbar-toggle span:nth-child(3) {
  top: 1px;
}
.navbar-toggle span:nth-child(4) {
  top: 2px;
}
.navbar-toggle.open span:nth-child(2) {
  width: 13px;
  top: 13px;
  left: -5px;
  background-color: #000;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.navbar-toggle.open span:nth-child(3) {
  opacity: 0;
  left: 12px;
}
.navbar-toggle.open span:nth-child(4) {
  width: 13px;
  top: -7px;
  left: -5px;
  background-color: #000;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}





/* ----nav dropdown---- */
.navbar-custom {
  position: relative;
}
 .navbar-nav {margin:0; float:left;}
.navbar-nav > li {float:none; border: 1px #d9d9d9 solid; background-color:#fff;}/* -------------------------------2020-06-左按鈕 白底框線----------------- */
.navbar-nav > li > a { vertical-align:middle;}
i.fa-angle-down {position: absolute;
    top:15px;
    right:15px;
    font-size: 1.5em;
	color:#bbb;}
.dropdown.open i.fa-angle-down{color:#56b770;}


.navbar-collapse {
  position: relative;
  top: 0;
  height: 100%;
  overflow-x:hidden;
   padding: 0;
  max-height: none !important;
  z-index: 5;
  width: 282px; /* -------------------------------2020-06-左加寬----------------- */
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all;
  -o-transition: all;
  transition: all;
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
}

.navbar-fixed-top .navbar-collapse {
  width: 259px;
  /*height: calc(100vh - 50px);*/
  height:auto!important;
  overflow-y: auto;
}

li.dropdown{ width:100%; padding:0;}
.dropdown-toggle img { float:left;}
 .dropdown-toggle h4 { float:left; margin:0; padding:0; }
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus
 {
 background-color:#fff;
 }
.dropdown-menu{
 background-color:#f5f5f5!important;
 color:#000;
     border:0;
    margin: 0;
    box-shadow: none;
}
.dropdown-menu li:hover a{color:#ff9900!important; background-color:transparent;}
 .navbar-collapse.in {
 position: fixed;
 top:0;
 left: 0px;
 z-index:99998;
 opacity: 1;
  filter: alpha(opacity=100);
  background-color:#fff;
  -webkit-box-shadow: 5px 0px 20px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 5px 0px 20px 0px rgba(0,0,0,0.5);
  box-shadow: 5px 0px 20px 0px rgba(0,0,0,0.5);

 }
 .navbar-toggle.open {left: 210px;}

    .navbar-nav .leftnav-item-1 .leftnav-itemname { color:#8BC34A;}
    .navbar-nav .leftnav-item-2 .leftnav-itemname { color:#dd6060; }
    .navbar-nav .leftnav-item-3 .leftnav-itemname { color:#9e77b7; }
    .navbar-nav .leftnav-item-4 .leftnav-itemname { color:#ea9b2a; }
    .navbar-nav .leftnav-item-5 .leftnav-itemname { color:#c757b2;}
    .navbar-nav .leftnav-item-6 .leftnav-itemname { color:#4a8ac7; }
    .navbar-nav .leftnav-item-7 .leftnav-itemname { color:#3fa97f; }
    .navbar-nav .leftnav-item-8 .leftnav-itemname { color:#3fb0bb; }


/*-----pc-----------------------------------------------*/
@media only screen and (min-width: 1200px)
{

 .navbar-toggle {display:none;}
 .collapsed.navbar-btn-auto {}
 .navbar-collapse {
    display:block!important;
	top: 0;
	left:0;
	height:auto;
	opacity:1!important;
	background-color: #eee;
	}
 .navbar-collapse .navbar-nav {
	 margin-top:0px!important;
	 border-top:0;
	 width:100%;
     display: inline-block;
	 }

  li.dropdown {
	 float:none;
	   position: relative;
    display:inline-block;
	     border-bottom: 0;
	 padding:0;
 }
 .dropdown-toggle img { height:50px; width:auto;}
  .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
	height: 70px;  /* -------------------------------2020-06-左選單加高70px----------------- */
	width:100%;
	display:inline-table;
	margin:0;
	padding:0;
 	}
  .dropdown-menu {
	 position:static;
	 background:#f5f5f5;
	 padding:0;
	 width:100%;
         cursor: pointer;/*20200624*/
 }
   .dropdown-menu>li
  {
    display: contents;
  }
     .dropdown-menu>li a {
    padding: 5px 0 5px 80px;
    font-size: 18px;
   }

}




/*----pad-tablet-nb 1024 ---------------------------------------------*/
@media only screen and (min-width: 1024px)
{
 /*----pad-tablet-nb  全版時 選單在右側顯示------*/
 nav.navbar {
   position:relative;
  }

 .navbar-toggle {display:none;}
  .collapsed.navbar-btn-auto {}
 .navbar-collapse {
    display:block!important;
	top: 0;
	left:0;
	height:auto;
	opacity:1!important;
	background-color: #eee;
	}
 .navbar-collapse .navbar-nav {
	 margin-top:0px!important;
	 border-top:0;
	 width:100%;
     display: inline-block;
	 }

  li.dropdown {
	 float:none;
	   position: relative;
    display:inline-block;
	     border-bottom: 0;
	 padding:0;
	 }
 li.dropdown:last-child {
	 border-bottom: 1px #d9d9d9 solid;
	 }
  li.dropdown>a{ background: url(../image/arrow-down.png) no-repeat 95% 25px;}/*-------------------------------2020-06-左選單加高70px----------------- */
  li.dropdown.open>a{ background: url(../image/arrow-top.png) no-repeat 95% 25px;}/*-------------------------------2020-06-左選單加高70px----------------- */
 .dropdown-toggle img { height:50px; width:auto;}
  .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
	height: 70px;  /* -------------------------------2020-06-左選單加高70px----------------- */
	width:100%;
	display:inline-table;
	margin:0;
	padding:12px 0 0 0;
 	}
  .dropdown-menu {
	 position:static;
	 background:#f5f5f5;
	 padding: 5px 0!important;
	 width:100%;
 }
   .dropdown-menu>li
  {
    display: contents;
  }
     .dropdown-menu>li a {
    padding: 5px 0 5px 80px!important;
    font-size: 16px;
   }

}

/*----big-phone-----------------------------------------------*/
@media only screen and (max-width: 1023px)
{
 nav.navbar {
   position: absolute;
   top: 0;
   left: 0;
   }
 .navbar-toggle {
  display:block;
  position:absolute;
  float: none;
  z-index:999;
  color:#000;
  top: 12px;
  left: 20px;
  margin: 0;
  padding: 10px;
 }
.collapsed.navbar-btn-auto {}
.navbar-btn-auto {}
.navbar-btn-openbg {
    position:relative;
	z-index:9999;
	background-color:#fff;
  height:60px;
  width:100%;}

 ul.navbar-nav {
	 border-top:1px solid #ddd;
	 }
 ul.navbar-nav li.dropdown {
	 border-bottom:1px solid #ddd;
	 display: inline-block;
	 }

 li.dropdown a {
	 color:#000;
	 display:inline-table;
	 width:100%;
	 padding: 0!important;
 }
 .dropdown-toggle img {
 height:42px;
 width:auto;
 margin-top:3px;}

 .dropdown-toggle {background:url(../image/arrow-down.png) no-repeat;}

  li.dropdown>.dropdown-toggle{ background: url(../image/arrow-down.png) no-repeat 95% 17px; background-size: 17px;}
  li.dropdown.open>.dropdown-toggle{ background: url(../image/arrow-top.png) no-repeat 95% 17px;     background-size: 17px;}

 .nav .open > a, .nav .open > a:hover, .nav .open > a:focus
 { color:#000; }

 .dropdown-menu>li {
	 padding: 10px 0 10px 70px;
    font-size: 16px;
 }
 .dropdown-menu>li .fa-chevron-right{display:none;}
    .dropdown-toggle .leftnav-itemname { /*color: #333;*/}

}

/*-----ss phone-----------------------------------------------*/
@media only screen and (max-width: 640px)
{
  nav.navbar {
   position:fixed;
   top: 0;
   left: 0;
   }
	.navbar-toggle { top:8px; left:15px; }
	 ul.navbar-nav { }
	 .navbar-btn-openbg { background-color:#fff;
  height:55px;
  width:100%;}
}