﻿/*导航*/
.menu>li:first-child { margin-left: 0; }
.nav .language li, .nav .pc-menu li { float: left; }
.menu-pos { position: fixed; top: -113px; z-index: 99; width: 100%; }
.staticlogo{
    position: relative;
    width: 100%; 
    margin: 0 auto;
    top:0px;
    left:0px;
    background-color: transparent !important;
    /*border: 1px solid #ff121e;*/
}
.menu-box { width: 93%; margin: 0 auto; }
.staticlogo .menu-box{
    width: 100%;
}
.logo { display: inline-block; width: 14.3%; vertical-align: bottom; margin-bottom: 0px; }
.nav {text-align: right; display: inline-block; vertical-align: bottom; }
.nav, .top.top-pos div.menu{ width: 85%;}
.staticlogo .menu-box > .logo, .staticlogo .menu-box > .nav{
    position: fixed;
    top:0px; 
}
.staticlogo .menu-box > .logo{
    z-index: 9999;
    left: 3%;
    right: auto;
    top:-7px;
    /*border: 1px solid green;*/
}
.staticlogo .menu-box > .logo{
    background-color: transparent !important; 
}
.staticlogo .menu-box > .nav{
    left: 0px;
    right: 0px;
    z-index: 9998;
    /*border: 1px solid blue;*/
    width: 100%;
    padding-right: 3%;
    top:-150px;
    padding-top:68px;
}
.staticlogo .menu-box > .nav{
    background: rgba(0,0,0,0.7) !important;
}
.language_pos{
    display: inline-block;
    margin-right: 20px;
}
.menu-hover1>a { color: #ff121e !important; }
.menu>li { text-align: left; margin-left: 20px; }
.menu>li>a {  
    background: url(../images/menu_bg.png) repeat top left; 
	z-index: 1; 
	position: relative; 
	height: 26px; 
	padding: 0 5px 20px 5px; 
	line-height: 26px; 
    display: block; 
    color: #fff; 
    font-size: 15px;
    box-sizing: content-box; /* fix for bootstrap*/
}
.menu>li>a{
    font-size: 18px;
}
.menu>li>a:before { transition: 0.3s ease 0s; position: absolute; content: ''; z-index: -1; width: 0%; height: 3px; background: #FF121E; left: 50%; bottom: 0; }
.menu>li:nth-child(6) div, .menu>li:nth-child(7) div, .menu>li .last-div { left: auto; right: 0; }
.menu>li .last-div6, .menu>li .last-div7 { left: auto; right: 0; }
.menu { margin-top: 0px; margin-right: 20px; margin-bottom: 0; }
.menu>li:hover>a:before, .menu>li.on a:before { width: 100%; left: 0; }
.menu-hover { vertical-align: top; display: inline-block; white-space: nowrap; font-size: 14px; color: #fff; }
.menu>li>div, .language_pos li > div, .language_pos .switcher .option{ 
    line-height: 2.3; 
    padding: 20px 0; 
    visibility: hidden; 
    display: none; 
    left: 0; 
    top: 100%; 
    position: absolute; 
    width: 100%; 
    background: url(../images/bg2.png) repeat top left; 
    background: rgba(0,0,0,0.5); 
    box-sizing: content-box; /* fix for bootstrap*/
}
.language_pos .switcher:hover .option{
    visibility: visible; 
    display: block; 
    border-width: 0px;
}
.language_pos .switcher:hover .option a{
    color: #fff;
}
.language_pos .switcher:hover .option a > img{
    display: none !important;
}
.language_pos .menu-hover{
    text-align: left;
    padding-right: 20px;
    margin-right: 3.5%;
    float: right;
    width: auto;
}
.menu>li>div>p:before { left: 50px; opacity: 0; bottom: 0; position: absolute; border-color: transparent transparent #fff; border-style: solid; display: inline-block; border-width: 0 6px 6px; content: ''; box-sizing: border-box; transition: 0.5s ease 0s; }
.menu>li>div>p { position: relative; padding-top: 15px; width: 100%; border-bottom: 1px solid #fff; }
.menu>li:hover>div, .language_pos li:hover > div { visibility: visible; display: block; }
.menu-hover li { float: none !important; }
.menu>li:nth-child(2):hover>div>p:before { opacity: 1; transition: 0.5s ease 0s; }
.menu>li:nth-child(3):hover>div>p:before { opacity: 1; transition: 0.5s ease 0s; left: 60px; }
.menu>li:nth-child(4):hover>div>p:before { opacity: 1; transition: 0.5s ease 0s; left: 60px; }
.menu>li:nth-child(5):hover>div>p:before { opacity: 1; transition: 0.5s ease 0s; }
.menu>li:nth-child(6):hover>div>p:before { opacity: 1; left: auto; right: 50px; transition: 0.5s ease 0s; }
.menu>li:hover>.last-div6>p:before { opacity: 1; left: auto; right: 50px; transition: 0.5s ease 0s; }
.menu>li:nth-child(7):hover>div>p:before { opacity: 1; left: auto; right: 75px; transition: 0.5s ease 0s; }
.menu>li:hover>.last-div7>p:before { opacity: 1; left: auto; right: 75px; transition: 0.5s ease 0s; }
.menu-hover li a:hover, .menu>li>a:hover{ color: #FF121E; }
.close span:after { transform: rotate(-45deg); }
.close span:before { transform: rotateZ(45deg); }
.close span:before, .close span:after { top: 50%; margin-top: -1px; right: 0; position: absolute; content: ''; display: block; width: 15px; height: 2px; background: #FF121E; transition: 0.3s ease 0s; }
.close span:hover:before { margin-top: -4px; }
.close span:hover:after { margin-top: 4px; }
.close span:hover:before, .close span:hover:after { transform: rotateZ(0deg); }
.language a.on3 { color: #FF121E; }
.language a:before { top: 50%; background: #FF121E; content: ''; position: absolute; left: 18px; width: 6px; height: 6px; border-radius: 50%; margin-top: -2px; transition: 0.3s ease 0s; opacity: 0; }
.language a:after { content: ''; position: absolute; background: transparent; width: 10px; height: 10px; left: 15px; border-radius: 50%; top: 50%; margin-top: -5px; border: 1px solid #FF121E; transition: 0.3s ease 0s; opacity: 0; }
.language a:hover:before, .language a:hover:after, .language a.on3:before, .language a.on3:after { opacity: 1; }
.close span { width: 15px; display: inline-block; position: relative; cursor: pointer; line-height: normal; color: #FF121E; height: 20px; }
.pc-language p {padding-left: 15px; padding-bottom: 25px; cursor: pointer; background: url(../images/menu_bg.png) repeat top left; }
.pc-language p:hover span { -webkit-animation: bounce-up 1s ease infinite; animation: bounce-up 1s ease infinite; }
@-webkit-keyframes bounce-up { 25% {
                                   -webkit-transform: translateY(-8px);
                               }
                               50%, 100% {
                                   -webkit-transform: translateY(0);
                               }
                               75% {
                                   -webkit-transform: translateY(-3px);
                               }
}
@keyframes bounce-up { 25% {
                           transform: translateY(-8px);
                       }
                       50%, 100% {
                           transform: translateY(0);
                       }
                       75% {
                           transform: translateY(-3px);
                       }
}
.pc-language p:hover img { -webkit-filter: grayscale(0); }
.pc-language img { transition: 0.3s ease 0s; -webkit-filter: grayscale(0.5); display: inline-block; vertical-align: middle; width: 20px; margin-right: 10px; }
.pc-language span { transition: 0.3s ease 0s; vertical-align: middle; font-size: 16px; line-height: 32px; display: inline-block; color: #fff; }
.pc-language a:hover { color: #FF121E; }
.pc-language, .pc-menu { margin-left: 20px; vertical-align: middle; display: inline-block; }
.close { margin: 10px 0 0; font-size: 0; text-align: right; }
.body:before { content: ''; position: fixed; width: 100%; height: 100%; overflow: hidden; left: 0; top: 0; background: rgba(0,0,0,0.5); transition: 0.3s ease 0s; z-index: 99999; }
.language a { position: relative; color: #333; border-bottom: 1px solid #ddd; padding: 10px 0; display: block; text-align: center; }
.language { margin-top: 3.5%; display: none; border-radius: 8px; background: #fff; top: 5.6%; right: 3.5%; text-align: center; width: 120px; position: fixed; font-size: 14px; z-index: 99999; margin-top: 3.5vw; }
.page-pos .language { top: 4.7%; }
