/* Flexnav Base Styles */
.flexnav { transition: none; -webkit-transform-style: preserve-3d; overflow: hidden; margin: 0 auto; width: 100%; max-height: 0; /* li ul.flexnav-show { margin-top: 15px; li { overflow: visible; } }	 */ /* ul li ul li a { background: $third_level; } ul li ul li ul li a { background: $fourth_level; } */ }

.flexnav.opacity { opacity: 0; }

.flexnav.flexnav-show { max-height: 2000px; opacity: 1; transition: all .5s ease-in-out; }

.flexnav li { position: relative; overflow: hidden; }

.flexnav li a { position: relative; display: block; padding: .96em; background: #e7e7e7; z-index: 2; overflow: hidden; color: #000000; border-bottom: 1px solid #cccccc; }

.flexnav li a:hover { color: #b40546; }

.flexnav li ul { width: 100%; }

.flexnav li ul li { font-size: 100%; position: relative; overflow: hidden; }

.flexnav li ul li a { padding-left: 45px; background: #f6f6f6; border-bottom: 1px solid #cccccc; background-repeat: no-repeat; background-position: 15px center; background-size: 25px 25px; }

.flexnav li ul li:last-child a { border-bottom: none; }

.flexnav > li > a { padding: 0; border-bottom: none; }

.flexnav > li:nth-child(1) { padding: .96em; background: #e7e7e7; border-bottom: 1px solid #cccccc; }

.flexnav > li:nth-child(1) ul li:nth-child(1) a { background-image: url(../img/mini-icon/mini-i-01.png); }

.flexnav > li:nth-child(1) ul li:nth-child(2) a { background-image: url(../img/mini-icon/mini-i-02.png); }

.flexnav > li:nth-child(1) ul li:nth-child(3) a { background-image: url(../img/mini-icon/mini-i-03.png); }

.flexnav > li:nth-child(1) ul li:nth-child(4) a { background-image: url(../img/mini-icon/mini-i-04.png); }

.flexnav > li:nth-child(2) { padding: .96em; background: #e7e7e7; border-bottom: 1px solid #cccccc; }

.flexnav > li:nth-child(2) ul li:nth-child(1) a { background-image: url(../img/mini-icon/mini-i-05.png); }

.flexnav > li:nth-child(2) ul li:nth-child(2) a { background-image: url(../img/mini-icon/mini-i-06.png); }

.flexnav > li:nth-child(2) ul li:nth-child(3) a { background-image: url(../img/mini-icon/mini-i-07.png); }

.flexnav > li:nth-child(2) ul li:nth-child(4) a { background-image: url(../img/mini-icon/mini-i-08.png); }

.flexnav > li:nth-child(2) ul li:nth-child(5) a { background-image: url(../img/mini-icon/mini-i-09.png); }

.flexnav > li:nth-child(2) ul li:nth-child(6) a { background-image: url(../img/mini-icon/mini-i-10.png); }

.flexnav > li:nth-child(2) ul li:nth-child(7) a { background-image: url(../img/mini-icon/mini-i-13.png); }

.flexnav > li:nth-child(2) ul li:nth-child(8) a { background-image: url(../img/mini-icon/mini-i-14.png); }

.flexnav > li:nth-child(3) { padding: .96em; background: #e7e7e7; }

.flexnav > li:nth-child(3) ul li:nth-child(1) a { background-image: url(../img/mini-icon/mini-i-11.png); }

.flexnav > li:nth-child(3) ul li:nth-child(2) a { background-image: url(../img/mini-icon/mini-i-03.png); }

.flexnav .touch-button { position: absolute; z-index: 999; top: 0; right: 0; width: 50px; height: 50px; display: inline-block; /* background: #acaca1; background: rgba(0,0,0,.075); */ text-align: center; }

.flexnav .touch-button:hover { cursor: pointer; }

.flexnav .touch-button .navicon { position: relative; top: 10px; font-size: 1.6rem; color: #4c4c4c; }

.menu-button { position: relative; display: block; background: #ffffff; color: #000000; cursor: pointer; box-shadow: #cccccc 0px 0px 10px; }

.menu-button > i { position: absolute; right: 12px; top: 22px; width: 20px; height: 1px; background-color: #000000; transition: all .4s; }

.menu-button > i:before { content: ''; position: absolute; top: -7px; left: 0; width: 20px; height: 1px; background-color: #000000; transition: all .4s; }

.menu-button > i:after { content: ''; position: absolute; top: 7px; left: 0; width: 20px; height: 1px; background-color: #000000; transition: all .4s; }

.menu-button span { font-size: 1.6rem; display: block; position: relative; padding: 12px 0 10px; color: #000000; text-align: center; text-decoration: none; }

.menu-button .touch-button { display: none; }

.active > i { transition: all .4s; background-color: rgba(255, 255, 255, 0); }

.active > i:before { transform: translateY(7px) rotate(-45deg); transition: all .4s; }

.active > i:after { transform: translateY(-7px) rotate(45deg); transition: all .4s; }

@media all and (min-width: 800px) { /* body.one-page { padding-top: 70px; } */
  .flexnav { overflow: visible; position: relative; z-index: 1000; }
  .flexnav.opacity { opacity: 1; }
  .flexnav.one-page { top: 0; right: auto; max-width: 1080px; }
  .flexnav > li { width: 33.3333%; height: 60px; float: left; font-size: 100%; line-height: 1.2em; text-align: center; list-style: none; padding: 0 .96em; box-sizing: border-box; border-left: 1px solid #4c4c4c; display: block; overflow: visible; position: relative; }
  .flexnav > li:last-child { border-right: 1px solid #4c4c4c; }
  .flexnav > li:nth-child(1), .flexnav > li:nth-child(2), .flexnav > li:nth-child(3) { background: none; border-bottom: none; }
  .flexnav > li > a { padding: 0; display: block; }
  .flexnav > li > ul { display: none; position: absolute; top: 59px; left: 0; }
  .flexnav > li > ul li { width: 100%; }
  .flexnav > li > ul li a { text-align: left; display: block; border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: none; background-color: #ffffff; }
  .flexnav > li > ul li:last-child a { border-bottom: 1px solid #cccccc; }
  .flexnav li a { background: none; border-bottom: none; }
  .flexnav li ul.flexnav-show { margin-top: 0; }
  .flexnav li ul.open { display: block; opacity: 1; visibility: visible; z-index: 1; }
  .flexnav li ul.open li { overflow: visible; max-height: 100px; }
  .flexnav li ul.open ul.open { margin-left: 100%; top: 0; }
  .flexnav .touch-button { display: none; }
  .menu-button { display: none; } }