@charset "UTF-8";
#wrapper, .flexpanel { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0) }
#wrapper, .flexpanel .viewport-wrap { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease }
#wrapper, .flexpanel .viewport-wrap, body.flexpanel-reveal #wrapper { -webkit-backface-visibility: hidden; -webkit-perspective: 1000 }
#container, #wrapper { width: 100%; position: relative }
#wrapper { left: 0; transform: translate3d(0, 0, 0); transition: all .3s ease; z-index: 0; }
.flexpanel { position: fixed; top: 0; right: -40%; width: 40%; height: 102%; padding: 0; margin: 0; z-index: 1; display: none; transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform .3s ease; -moz-transition: -moz-transform .3s ease; transition: transform .3s ease }

@media screen and (min-width:768px) and (max-width:960px) {
.flexpanel { right: -50%; width: 50% }
}

@media screen and (max-width:768px) {
.flexpanel { right: -80%; width: 80% }
}
.flexpanel .viewport-wrap { position: relative; width: 100%; height: 100%; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: all .3s ease; z-index: 1 }
.flexpanel div.navigation, .flexpanel div.navigation ul { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease }
.flexpanel .viewport { width: 100%; height: 100%; position: relative; padding: 0; overflow: hidden; overflow-y: auto; background: #0071B2; -webkit-box-sizing: border-box; -khtml-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box }
.flexpanel .viewport.smooth { -webkit-overflow-scrolling: touch }
.flexpanel div.navigation { padding: 10px 10px 80px; transition: all .3s ease }
.flexpanel div.navigation ul { display: block; clear: both; padding: 0; margin: 0; transition: all .3s ease }
.flexpanel div.navigation ul li { margin: 0 3%; padding: 0; clear: both; list-style: none; width: auto; display: block; font-size: 18px; border-bottom: 1px dashed #DEE2CB }
.flexpanel div.navigation ul li:first-child { border-top: none }
.flexpanel div.navigation ul li ul { margin: 0; border: none }
.flexpanel div.navigation ul li ul li { font-size: 14px; margin: 0 5px 5px; border: none; position: relative }
.flexpanel div.navigation ul li ul li a { padding: 6px 12px }
.flexpanel div.navigation ul li ul li a:hover { color: #ccc }
.flexpanel div.navigation ul li ul li a:before { content: '»'; position: absolute; left: 0; top: 5px; opacity: .5; color: #9edeff }
.flexpanel div.navigation ul li a { padding: 10px 0; display: block; color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent }
.flexpanel div.navigation ul li a:hover { color: #ccc }
.flexpanel div.navigation ul li.active>a { color: #ef6f6f!important; font-weight: 700 }
.flex-btn { width: 34px; height: 33px; position: absolute; left: -52px; top: 25px; background: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; cursor: pointer; opacity: 0; filter: alpha(opacity=0) }
.flex-btn:active { background: #ccc }
.flex-btn.in-view { opacity: 1; filter: alpha(opacity=100) }
.flex-btn span { width: 20px; height: 3px; overflow: hidden; background-color: #666; text-indent: -9999px; display: block; margin: 0 auto 3px; clear: both; -webkit-transition: all .2s ease .35s; -moz-transition: all .2s ease .35s; -ms-transition: all .2s ease .35s; transition: all .2s ease .35s; position: absolute }
.flex-btn span.one { top: 9px; left: 7px }
.flex-btn span.two { top: 15px; left: 7px }
.flex-btn span.three { top: 21px; left: 7px }
.flex-btn:hover span { background-color: #333 }
.flexpanel-active .flex-btn { opacity: 1!important; filter: alpha(opacity=100)!important }
.flexpanel-active .flex-btn span { background-color: #222 }
.flexpanel-active .flex-btn span.two { opacity: 0 }
.flexpanel-active .flex-btn span.one { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: 15px }
.flexpanel-active .flex-btn span.three { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); top: 15px }
body.flexpanel-left .flexpanel { right: auto; left: -40%; width: 40% }

@media screen and (min-width:768px) and (max-width:960px) {
body.flexpanel-left .flexpanel { right: auto; left: -50%; width: 50% }
}

@media screen and (max-width:768px) {
body.flexpanel-left .flexpanel { right: auto; left: -80%; width: 80% }
}
body.flexpanel-left .flexpanel .flex-btn { left: auto; right: -48px }
body.flexpanel-active.flexpanel-left #wrapper { -webkit-transform: translate(40%, 0); -moz-transform: translate(40%, 0); -ms-transform: translate(40%, 0); transform: translate(40%, 0); opacity: .7; filter: alpha(opacity=70) }
body.flexpanel-active.flexpanel-left .flexpanel { left: -40% }

@media screen and (min-width:768px) and (max-width:960px) {
body.flexpanel-active.flexpanel-left #wrapper { -webkit-transform: translate(50%, 0); -moz-transform: translate(50%, 0); -ms-transform: translate(50%, 0); transform: translate(50%, 0) }
body.flexpanel-active.flexpanel-left .flexpanel { left: -50% }
}

@media screen and (max-width:768px) {
body.flexpanel-active.flexpanel-left #wrapper { -webkit-transform: translate(80%, 0); -moz-transform: translate(80%, 0); -ms-transform: translate(80%, 0); transform: translate(80%, 0) }
body.flexpanel-active.flexpanel-left .flexpanel { left: -80% }
}
body.flexpanel-active.flexpanel-left .flexpanel .viewport-wrap { -webkit-transform: translate(100%, 0); -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); transform: translate(100%, 0) }
body.flexpanel-active.flexpanel-right #wrapper { -webkit-transform: translate(-40%, 0); -moz-transform: translate(-40%, 0); -ms-transform: translate(-40%, 0); transform: translate(-40%, 0); opacity: .7; filter: alpha(opacity=70) }
body.flexpanel-active.flexpanel-right .flexpanel { right: -40% }

@media screen and (min-width:768px) and (max-width:960px) {
body.flexpanel-active.flexpanel-right #wrapper { -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0) }
body.flexpanel-active.flexpanel-right .flexpanel { right: -50% }
}

@media screen and (max-width:768px) {
body.flexpanel-active.flexpanel-right #wrapper { -webkit-transform: translate(-80%, 0); -moz-transform: translate(-80%, 0); -ms-transform: translate(-80%, 0); transform: translate(-80%, 0) }
body.flexpanel-active.flexpanel-right .flexpanel { right: -80% }
}
body.flexpanel-active.flexpanel-right .flexpanel .viewport-wrap { -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0) }
body.isIE.flexpanel-right #wrapper { left: -40% }
body.isIE.flexpanel-right .flexpanel { right: 0 }
body.isIE.flexpanel-left.flexpanel-active #wrapper { left: 40% }
body.isIE.flexpanel-left.flexpanel-active .flexpanel { left: 0 }
body.flexpanel-reveal #wrapper { z-index: 1; -webkit-transform: none!important; -moz-transform: none!important; -ms-transform: none!important; transform: none!important }
body.flexpanel-reveal.flexpanel-right #wrapper { right: auto; left: 0 }
body.flexpanel-reveal.flexpanel-right .flexpanel { right: -100%; z-index: 0 }
body.flexpanel-reveal.flexpanel-right .flexpanel.reveal { right: 0 }
body.flexpanel-reveal.flexpanel-right .flex-btn { position: fixed; left: auto; right: 0; top: 0; margin: 20px; z-index: 999 }
body.flexpanel-reveal.flexpanel-right.flexpanel-active #wrapper { left: -40%; opacity: 1; filter: alpha(opacity=100) }
body.flexpanel-reveal.flexpanel-right.flexpanel-active .flex-btn { right: 40% }

@media screen and (min-width:768px) and (max-width:960px) {
body.flexpanel-reveal.flexpanel-right.flexpanel-active #wrapper { left: -50% }
body.flexpanel-reveal.flexpanel-right.flexpanel-active .flex-btn { right: 50% }
}

@media screen and (max-width:768px) {
body.flexpanel-reveal.flexpanel-right.flexpanel-active #wrapper { left: -80% }
body.flexpanel-reveal.flexpanel-right.flexpanel-active .flex-btn { right: 80% }
}
body.flexpanel-reveal.flexpanel-right.flexpanel-active .flexpanel, body.flexpanel-reveal.flexpanel-right.flexpanel-active .flexpanel.reveal { right: 0 }
body.flexpanel-reveal.flexpanel-right.flexpanel-active .flexpanel .viewport-wrap { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0) }
body.flexpanel-reveal.flexpanel-left #wrapper { right: auto; left: 0 }
body.flexpanel-reveal.flexpanel-left .flexpanel { right: auto; left: 0; z-index: 0 }
body.flexpanel-reveal.flexpanel-left .flexpanel.reveal { left: 0 }
body.flexpanel-reveal.flexpanel-left .flex-btn { position: fixed; right: auto; left: 0; top: 0; margin: 20px; z-index: 999 }
body.flexpanel-reveal.flexpanel-left.flexpanel-active #wrapper { left: 40%; opacity: 1; filter: alpha(opacity=100) }

@media screen and (min-width:768px) and (max-width:960px) {
body.flexpanel-reveal.flexpanel-left.flexpanel-active #wrapper { left: 50% }
}

@media screen and (max-width:768px) {
body.flexpanel-reveal.flexpanel-left.flexpanel-active #wrapper { left: 80% }
}
body.flexpanel-reveal.flexpanel-left.flexpanel-active .flex-btn { left: 40% }

@media screen and (min-width:768px) and (max-width:960px) {
body.flexpanel-reveal.flexpanel-left.flexpanel-active .flex-btn { left: 50% }
}

@media screen and (max-width:768px) {
body.flexpanel-reveal.flexpanel-left.flexpanel-active .flex-btn { left: 80% }
}
body.flexpanel-reveal.flexpanel-left.flexpanel-active .flexpanel, body.flexpanel-reveal.flexpanel-left.flexpanel-active .flexpanel.reveal { left: 0 }
body.flexpanel-reveal.flexpanel-left.flexpanel-active .flexpanel .viewport-wrap { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0) }
body.flexpanel-hide .flex-btn, body.flexpanel-hide .flexpanel { display: none }
::-webkit-scrollbar {
width:10px;
color:#a3a499
}
::-webkit-scrollbar-track {
background-color:#ecede3;
border-radius:10px;
border:1px solid #d8d9cf
}
::-webkit-scrollbar-thumb {
border-radius:10px;
background-color:#a3a499
}