﻿/*nav1*/
.top_logo{float:left;height:28px;margin:15px 0 15px 30px;}
.top_logo .logo_img .sitelogo,.top_logo .logo_img .touchlogo{height:28px;}
.no-touch .top_logo:hover{}
.no-touch .top_logo:hover img{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
@media (min-width:768px) {
.max_header .top_logo{height:40px;margin:18px 0 18px 36px;}
.max_header .top_logo .logo_img .sitelogo{height:40px;}
.max_header .top_logo .logo_img .touchlogo{height:40px;}
}
@media (max-width:767px) {
.top_logo{float:left;height:25px;margin:12px 0 12px 18px;}
.top_logo .logo_img .touchlogo{height:25px;}
}

nav{float:right}
#nav>li{display:inline-block;float:left}
#nav>li>a{position:relative;display:block;height:60px;padding:0 20px;line-height:60px;text-align:left;overflow:hidden;z-index:0}
#nav>li>a i{display:none}
#nav>li>a::before{content:"";position:absolute;bottom:0;left:0;width:100%;height:0;z-index:-1;-webkit-transition:all .4s ease;transition:all .4s ease;}
#nav>li.has_sub.open>a,.no-touch #nav>li>a:hover{}
#nav>li.has_sub.open>a::before,.no-touch #nav>li>a:hover::before{height:60px}
#nav>li.active>a{}

.subnav{position:fixed;top:60px;width:auto;box-shadow:0 8px 16px rgba(0,0,0,.1);overflow:hidden;opacity:0;visibility:hidden;-webkit-transition:all .4s ease;transition:all .4s ease;opacity:1;}
.has_sub.open .subnav{opacity:1;visibility:visible;-webkit-transform:none;-ms-transform:none;transform:none;}
.has_sub.open .subnav li{height:40px;opacity:1}
.subnav .back_btn{display:none;width:100%;height:80px;padding:0 20px;text-align:left;font-size:12px;font-weight:400}
.subnav .back_btn::before{position:relative;display:inline-block;font-size:20px;margin-right:5px;margin-bottom:3px}
.subnav li{width:100%;height:0;opacity:0}
.subnav li:first-child{border-top:none}
.subnav li a{display:block;padding:0 20px;line-height:40px;text-align:center;}
.subnav li a span{}
.subnav li a:hover span{}
.no-touch .subnav li a:hover{}
.lang_btn{display:block;float:right;width:70px;height:60px;line-height:60px;margin-right:0px;text-align:center;overflow:hidden;}
.no-touch .lang_btn:hover{}

nav .menu_btn{position:relative;display:none;float:right;width:60px;height:60px;overflow:hidden;text-indent:100%;white-space:nowrap;color:transparent;cursor:pointer}
nav .menu_btn span,nav .menu_btn span:after,nav .menu_btn span:before{position:absolute;width:20px;height:2px;border-radius:1px;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .4s ease;transition:all .4s ease}
nav .menu_btn span{top:29px;left:20px}
nav .menu_btn span:after,nav .menu_btn span:before{content:"";left:0}
nav .menu_btn span:before{top:-6px}
nav .menu_btn span:after{top:6px}

.nav-open nav .menu_btn{}
.nav-open nav .menu_btn span{background-color:transparent}
.nav-open nav .menu_btn span:before{-webkit-transform:translateY(6px) rotate(-45deg);-ms-transform:translateY(6px) rotate(-45deg);transform:translateY(6px) rotate(-45deg)}
.nav-open nav .menu_btn span:after{-webkit-transform:translateY(-6px) rotate(45deg);-ms-transform:translateY(-6px) rotate(45deg);transform:translateY(-6px) rotate(45deg)}

@media (min-width:768px){.max_header nav .menu_btn{width:80px;height:80px}
.max_header nav .menu_btn span,.max_header nav .menu_btn span:after,.max_header nav .menu_btn span:before{}
.max_header nav .menu_btn span{top:39px;left:30px}
}
.max_header.nav-open nav .menu_btn span{background-color:transparent}

@media (max-width:1199px){nav .menu_btn{display:block}
}
@media (max-width:767px){nav .menu_btn{display:block;width:50px;height:50px}
nav .menu_btn span{top:24px;left:15px}
}
@media (min-width:768px){
.max_header header{height:80px;border-color:transparent;}
.max_header #nav>li>a{height:80px;line-height:80px;}
.max_header #nav>li.has_sub.open>a,.no-touch .max_header #nav>li>a:hover{}
.max_header #nav>li.has_sub.open>a::before,.no-touch .max_header #nav>li>a:hover::before{height:80px;}
.max_header #nav>li.active>a{}
.no-touch .max_header #nav>li.active>a:hover{}
.max_header .subnav{top:80px}

.max_header .lang_btn{height:80px;line-height:80px;}
.max_header .lang_btn:hover{height:80px;line-height:80px;}
}
@media (max-width:1199px){#nav{position:absolute;width:100%;right:0;top:60px;overflow-x:visible;-webkit-transition:all .4s cubic-bezier(1,0,0,1);transition:all .4s cubic-bezier(1,0,0,1)}
.max_header #nav{top:80px}
#nav>li{width:100%;height:0;overflow:hidden}
.nav-open #nav>li{height:60px;}
#nav>li>a,.max_header #nav>li>a{height:100%;padding:0 30px;line-height:60px;}
#nav>li>a i,.max_header #nav>li>a i{position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);right:20px;display:block;font-size:16px}
#nav>li.active>a{}

.subnav{top:0;left:100%;width:100%;height:100%;box-shadow:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;-webkit-transform:none;-ms-transform:none;transform:none}
.subnav ul{margin:0 -1px -1px 0}
.subnav li{width:100%;}
.subnav li a{}
.subnav .back_btn{display:block}

.max_header .subnav{top:0}
.open_sub #nav{right:100%}
.subnav.show{left:0}
}
@media (max-width:767px){header{height:50px}
.lang_btn{width:50px;height:50px;line-height:50px;margin-left:0}
#nav{top:50px}
.max_header #nav{top:50px}
.nav-open #nav>li{height:50px}
#nav>li>a,.max_header #nav>li>a{line-height:50px;padding:0 20px}
.subnav li a{padding:10px}
.subnav li a::before{font-size:48px}
.subnav .back_btn{height:50px}

.subnav li a{display:block;padding:0;line-height:40px;text-align:center;}
.subnav li a span{width:100%;}
.subnav li a:hover span{}
}
@media (max-width:767px) and (orientation:landscape){#nav,header{position:absolute}
#nav>li{width:100%;}
.subnav li{width:33.3333%}
}