#nav  {width:35px; float:left; position:relative;   height:30px;  margin:5px 0px 0 0px; }
nav header  {padding:0 2.5%; height:70px;   position: relative;}
.cd-nav-trigger {
  /* hamburger icon */
  position: absolute;
  height: auto;
  /* image replacement */
  overflow: hidden;
  right:15px;
  border:0px solid #c00;
  top:33px;
  white-space: nowrap;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  transition: transform 0.2s;
}

.cd-nav-trigger span.ham {
  /* icon created in CSS */
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 25px;
  height: 2px;
  background-color: #459dd6;
}

.cd-nav-trigger span.ham::before, .cd-nav-trigger span.ham:after {
  /* upper and lower lines of the menu icon */
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #459dd6;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.2s, width 0.2s;
  -moz-transition: -moz-transform 0.2s, width 0.2s;
  transition: transform 0.2s, width 0.2s;
}
.cd-nav-trigger span.ham::before {
  -webkit-transform-origin: right top;
  -moz-transform-origin: right top;
  -ms-transform-origin: right top;
  -o-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
  transform: translateY(-10px);
}
.cd-nav-trigger span.ham::after {
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
  transform: translateY(10px);
}
.no-touch .cd-nav-trigger:hover {
  /* rotate trigger on hover */
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.no-touch .cd-nav-trigger:hover span::after,
.no-touch .cd-nav-trigger:hover span::before {
  /* animate arrow --> from hamburger to arrow */
  width: 50%;
}
.no-touch .cd-nav-trigger:hover span::before {
  -webkit-transform: translateX(1px) translateY(1px) rotate(45deg);
  -moz-transform: translateX(1px) translateY(1px) rotate(45deg);
  -ms-transform: translateX(1px) translateY(1px) rotate(45deg);
  -o-transform: translateX(1px) translateY(1px) rotate(45deg);
  transform: translateX(1px) translateY(1px) rotate(45deg);
}
.no-touch .cd-nav-trigger:hover span::after {
  -webkit-transform: translateX(1px) translateY(-1px) rotate(-45deg);
  -moz-transform: translateX(1px) translateY(-1px) rotate(-45deg);
  -ms-transform: translateX(1px) translateY(-1px) rotate(-45deg);
  -o-transform: translateX(1px) translateY(-1px) rotate(-45deg);
  transform: translateX(1px) translateY(-1px) rotate(-45deg);
}



/* --------------------------------
xnavigation
-------------------------------- */
.cd-nav-container {
  position: fixed;
  z-index:99999999999999999999999999;
  top: 0;
  right: 0;
  width: 70%;
  height: 100%;
  overflow-y: auto;
  background-color: #ffffff;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
 	display:none;


}
.cd-nav-container.is-visible {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-overflow-scrolling: touch;
   display:block;
 }

.cd-close-nav {
  /* 'X' close icon */
  position: absolute;
  height: 44px;
  width: 44px;
  /* set the right position value so that it overlaps the .cd-nav-trigger*/
  right: 1%;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.cd-close-nav::after, .cd-close-nav::before {
  /* lines of 'X' icon */
  content: '';
  position: absolute;
  height: 2px;
  width: 30px;
  left: 50%;
  top: 50%;
  background-color: #333;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cd-close-nav::after {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.cd-close-nav::before {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  -o-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.no-touch .cd-close-nav:hover {
  opacity: .8;
}

/* --------------------------------
xshadow layer
-------------------------------- */

.cd-overlay {
  /* shadow layer visible when navigation is open */
  position: fixed;
  height: 100%;
  width: 100%;
  z-index:99999999;
  top: 0;
  left: 0;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.35);
  visibility: hidden;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: opacity 0.4s 0s, visibility 0s 0.4s;
  -moz-transition: opacity 0.4s 0s, visibility 0s 0.4s;
  transition: opacity 0.4s 0s, visibility 0s 0.4s;
}
.cd-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.4s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.4s 0s, visibility 0s 0s;
  transition: opacity 0.4s 0s, visibility 0s 0s;
}

/* --------------------------------
xcontent
-------------------------------- */

.navi							 {width:100%; background-color:#fff;  float:left;  border-top:1px solid #ddd;}
.navi   .navi_t         {  width:100%;  background-color:#fff;  border-bottom:1px solid #ddd; }

.navi   .navi_t  a {
	display:inline-block;
     padding:14px 3%;
    width:100%;
 	color:#333;
	text-align:left;
	font-size:0.95em; font-weight:500;
	box-sizing:border-box;
}


.navi   .navi_t_s     {-webkit-text-size-adjust:none; width:100%; border-bottom:1px dashed #ddd;  background-color:#f5f5f5; border-bottom:1px solid #ddd;}

.navi   .navi_t_s  a {
	display:inline-block;
     padding:12px 3%;
    width:100%;
 	color:#777;
	font-size:0.9em;
	text-align:left;
	box-sizing:border-box;
}

		.frame {
             width:100%;
             height:46px; border-bottom:1px solid #ddd;
        }
        .frame ul {
            list-style: none;
            margin: 0;
            padding: 0;
            height: 100%;   padding-left:10px;
            font-size: 1.05rem;
        }
        .frame ul li { float:left;
            padding:12px 10px;
            color: #333;
            text-align: center;
            cursor: pointer;
        }


.topmenu ul li ul li ul li, .activetop>a {color: #333 !important; font-weight: 600;}
.topmenu ul li ul li ul li, .activetop>a:after {content: ""; display: block; width:100%; }

  .frame2 { border-bottom:1px solid #ddd;width:100%;height:43px;}

   .frame2 ul {
            list-style: none;
            margin: 0 auto;
            padding: 0; font-size:0;
            height: 100%;  border-left:1px solid #ddd
        }

     .frame2 ul li { display:inline-block;       }

    .frame2 ul li  a { display:inline-block;
            border:1px solid #ddd; border-bottom:none; border-left:none;  padding:0 30px;
            color: #333;  line-height:43px;
            text-align: center; box-sizing:border-box;
            cursor: pointer;  font-size:1rem;
        }

 .frame2 ul li.activetop2  { }
.frame2 ul li.activetop2 a {background-color:#16489c !important; color:#fff}