header { background-color: #fff; height: 60px; }

header .logo { width: 100px; overflow: hidden; display: inline-block; vertical-align: top; }

header .logo a { display: block; padding: 17px 0; }

header .logo img { display: block; height: 26px; }

header .thumb { float: right; }

.header { width: 100%; height: 60px; background-color: #fff; position: fixed; top: 0; left: 0; z-index: 200; border-bottom: 1px solid #d9e1ea; }

.nav-btn { width: 26px; height: 19px; display: block; float: right; position: relative; margin: 20px 0; }

.nav-btn span { width: 100%; height: 3px; background-color: #05376c; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; display: block; }

.nav-btn span:first-child { position: absolute; top: 0; left: 0; }

.nav-btn span:nth-child(2) { width: 15px; margin-top: 8px; float: right; }

.nav-btn span:last-child { position: absolute; bottom: 0; left: 0; }

.nav-btn.on span:first-child { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 9px; }

.nav-btn.on span:nth-child(2) { opacity: 0; }

.nav-btn.on span:last-child { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 9px; }

.quickSearch { border-top: 2px solid #c3d8e3; color: #808080; margin-top: 13px; padding-top: 20px; font-size: 0; }

.quickSearch .tips { font-size: 14px; float: left; }

.quickSearch .item { overflow: hidden; }

.quickSearch a { color: #808080; display: inline-block; vertical-align: top; font-size: 14px; margin: 0 7px; }

.quickSearch .change { text-align: center; padding-top: 15px; }

.quickSearch .change a { line-height: 18px; display: inline-block; vertical-align: top; padding-right: 20px; background: url(../images/refresh.png) right center no-repeat; margin: 0; color: #b2b2b2; }

.language-icon { width: 30px; height: 60px; background: url(../images/language-icon.png) center no-repeat; display: inline-block; vertical-align: top; position: relative; margin-right: 20px; }

.language-icon:after { content: ''; display: block; width: 1px; height: 12px; background-color: #dedee0; position: absolute; right: -10px; top: 50%; margin-top: -6px; }

.header-shop { display: none; }

nav { width: 100%; position: fixed; top: 60px; bottom: 0; left: 0; z-index: 200; background: url(../images/searchBg.jpg) 80% top no-repeat; -o-background-size: cover; background-size: cover; display: none; }

nav li { border-bottom: 1px solid #d9e1ea; }

nav .levelOne { position: relative; font-size: 16px; color: #252e38; padding: 14px 20px; display: block; }

nav .levelOne.has:after { content: ''; position: absolute; width: 12px; height: 12px; border: 1px solid #999; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); right: 20px; top: 16px; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; }

nav .levelOne.on:after { -webkit-transform: rotate(-225deg); -moz-transform: rotate(-225deg); -ms-transform: rotate(-225deg); -o-transform: rotate(-225deg); transform: rotate(-225deg); top: 24px; }

nav .nav-drop { padding-bottom: 10px; display: none; }

nav .nav-drop i{font-style:normal;}

nav .nav-drop a { color: #76797d; display: block; padding: 5px 30px; }

.header-menu, .menu-drop, .header-hot-box, .header-hot-mask, .header-oval, .header-hot { display: none; }

@media (min-width: 768px) { .header .logo { width: auto; }
  .quickSearch { position: relative; padding-right: 100px; }
  .quickSearch .change { position: absolute; right: 0; top: 6px; } }

@media (min-width: 1260px) { header { height: 90px; }
  .header { height: 90px; background-color: #fff; -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.15); border-bottom: none; }
  .header .logo { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 20; overflow: visible; }
  .header .logo a { padding: 23px 0 35px; }
  .header .logo img { height: 60px; -webkit-transition: 1s; -o-transition: 1s; -moz-transition: 1s; transition: 1s; }
  .header .logo:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }
  .header .thumb { font-size: 0; position: relative; z-index: 20; }
  .header-oval { width: 420px; max-width: 420px; height: auto; position: absolute; left: 50%; top: 20px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; display: block; }
  .header-oval img { width: 100%; display: block; }
  .header-wrap { max-width: 100%; height: 90px; background-color: #fff; padding: 0 3.125%; }
  .nav-btn { float: left; margin-top: 36px; }
  .nav-btn span:nth-child(2) { float: left; }
  .nav-btn.on:hover span:first-child { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); }
  .nav-btn.on:hover span:last-child { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
  .language-icon { height: 90px; margin-right: 0; }
  .language-icon:after { display: none; }
  .language-icon:before { content: ''; display: block; width: 0; height: 2px; background-color: #176aaa; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; }
  .language-icon:hover:before { width: 100%; }
  .header-shop { width: 260px; height: 36px; line-height: 36px; color: #6a6974; font-size: 20px; padding-left: 23px; /*background: #fff url(../images/cart.png) 16px 7px no-repeat;*/ display: inline-block; vertical-align: top; -webkit-border-radius: 20px; border-radius: 20px; position: relative; margin-top: 28px; margin-right: 40px; transition:ease 0.2s all; -webkit-transition:ease 0.2s all; -ms-transition:ease 0.2s all; -moz-transition:ease 0.2s all; -o-transition:ease 0.2s all;font-weight: 800; }
  /*.header-shop:hover{background-color:#fa9c38; background-image:url(../images/cartAc.png); color:#fff;}*/
  .header-shop:before{content: ''; display: block; width:0; height: 2px; background-color: #176aaa; position: absolute; bottom: -26px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s;}
  .header-shop:hover:before{width:100%;}
  .header-hot { font-size: 17px; color: #6a6974; background: url(../images/hot.png) left center no-repeat; -o-background-size: 18px auto; background-size: 18px auto; line-height: 24px; padding: 33px 0 33px 28px; display: inline-block; vertical-align: top; position: relative; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; margin-right: 40px;  }
  .header-hot:before{content: ''; display: block; width: 0; height: 2px; background-color: #176aaa; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s;}
  .header-hot:after { content: ''; display: block; width: 1px; height: 12px; background-color: #dedee0; position: absolute; right: -20px; top: 50%; margin-top: -6px; }
  .header-hot:hover {background-image: url(../images/hotHv.png);   }
  .header-hot:hover:before{width:100%;}
  .header-menu { float: left; display: block; position: relative; z-index: 20; }
  .header-menu ul { padding-left: 20px; }
  .header-menu li { float: left; margin: 0 8px; }
  .header-menu li > a { line-height: 90px; font-size: 18px; color: #2f3134; padding: 0 2px; position: relative; display: block; }
  .header-menu li > a:after { content: ''; display: block; width: 0; height: 2px; background-color: #176aaa; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; }
  .header-menu li.on > a, .header-menu li:hover > a { color: #176aaa; }
  .header-menu li.on > a:after, .header-menu li:hover > a:after { width: 100%; }
  .language-icon:hover { background-image: url(../images/languageac-icon.png); }
  nav { top: 90px; }
  nav li:nth-child(n+5) { display: none; }
  nav ul { height: 100%; }
  nav li { width: 25%; float: left; height: 100%; text-align: center; border-right: 1px solid #d9e1ea; border-bottom: none; padding-top: 6.6%; opacity: 0; -webkit-transition: 1s; -o-transition: 1s; -moz-transition: 1s; transition: 1s; -webkit-transform: translateX(50px); -moz-transform: translateX(50px); -ms-transform: translateX(50px); -o-transform: translateX(50px); transform: translateX(50px); }
  nav li:nth-child(1) { -webkit-transition-delay: 0.15s; -moz-transition-delay: 0.15s; -o-transition-delay: 0.15s; transition-delay: 0.15s; }
  nav li:nth-child(2) { -webkit-transition-delay: 0.25s; -moz-transition-delay: 0.25s; -o-transition-delay: 0.25s; transition-delay: 0.25s; }
  nav li:nth-child(3) { -webkit-transition-delay: 0.35s; -moz-transition-delay: 0.35s; -o-transition-delay: 0.35s; transition-delay: 0.35s; }
  nav li:nth-child(4) { -webkit-transition-delay: 0.45s; -moz-transition-delay: 0.45s; -o-transition-delay: 0.45s; transition-delay: 0.45s; }
  nav .wow { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
  nav .levelOne { font-size: 28px; }
  nav .levelOne:after { display: none; }
  nav .levelOne:before { content: attr(data-num); display: block; color: #176bab; font-size: 80px; padding-bottom: 13px; opacity: 0.6; }
  nav .nav-drop { padding-top: 10px; display: block !important; }
  nav .nav-drop a { font-size: 18px; }
  nav .nav-drop a:hover { color: #333333; }
  nav .nav-drop a:hover span:after { width: 100%; height: 4px; }
  nav .nav-drop span { position: relative; }
  nav .nav-drop span:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); background-color: #eb9335; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; z-index: 1; }
  nav .nav-drop i { font-style: normal; position: relative; z-index: 2; }
  .quickSearch { padding-top: 30px; }
  .quickSearch .change { top: 17px; }
  .quickSearch a { margin: 0 12px; }
  .quickSearch a:hover{color:#176bab;}
  .header-hot-box { width: 480px; position: fixed; right: 0; top: 90px; bottom: 0; }
  .header-hot-box .type { width: 100%; height: 16.67%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14px; position: relative; z-index: 1; padding-left: 40px; -webkit-transition: 1s; -o-transition: 1s; -moz-transition: 1s; transition: 1s; -webkit-transform: translateY(30px) scale(1.1); -moz-transform: translateY(30px) scale(1.1); -ms-transform: translateY(30px) scale(1.1); -o-transform: translateY(30px) scale(1.1); transform: translateY(30px) scale(1.1); opacity: 0; -o-background-size: cover; background-size: cover; background-position: center; }
  .header-hot-box .type:after { content: ''; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: absolute; left: 0; top: 0; z-index: 0; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; }
  .header-hot-box .type:hover:after { opacity: 0.5; }
  .header-hot-box .type:hover .desc{color:#fff;}
  .header-hot-box .type:nth-child(1) { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; }
  .header-hot-box .type:nth-child(2) { -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; }
  .header-hot-box .type:nth-child(3) { -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; }
  .header-hot-box .type:nth-child(4) { -webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; -o-transition-delay: 0.8s; transition-delay: 0.8s; }
  .header-hot-box .type:nth-child(5) { -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; }
  .header-hot-box .type:nth-child(6) { -webkit-transition-delay: 1.2s; -moz-transition-delay: 1.2s; -o-transition-delay: 1.2s; transition-delay: 1.2s; }
  .header-hot-box.animation .type { -webkit-transform: translateY(0) scale(1); -moz-transform: translateY(0) scale(1); -ms-transform: translateY(0) scale(1); -o-transform: translateY(0) scale(1); transform: translateY(0) scale(1); opacity: 1; }
  .header-hot-box h3 { width: 100%; color: #fff; font-size: 17px; position: relative; z-index: 1; }
  .header-hot-box .desc { width: 100%; position: relative; z-index: 1; color: #d0d0d0; display: block; }
  .header-hot-mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 190; background-color: rgba(0, 0, 0, 0.6); }
  .header-hot-close { width: 18px; height: 18px; position: absolute; top: 26px; right: 42px; background: url(../images/searchClose.png); display: block; cursor: pointer; z-index: 10; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; }
  .header-hot-close:hover { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
  .header-menu .icon { display: inline-block; vertical-align: middle; width: 30px; height: 60px; margin-right: 10px; overflow:hidden; position:relative;padding-bottom: 5px; }
  .header-menu .icon img { max-width: 100%; max-height: 100%; display: inline-block; vertical-align: middle; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s;  }
  .header-menu .icon i{display:inline-block;width: 30px; height: 60px; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; position:absolute; left:0; top:0;}
  .header-menu .icon .hv{top:100%;}
  .menu-drop { width: 100%; position: absolute; left: 0; top: 90px; background-color: rgba(30 37 79 / 92%); z-index: 1; padding: 0 3.125%; font-size: 0; }
  .menu-drop a { font-size: 16px; color: #f2f2f2; line-height: 60px; margin-right: 30px; position: relative; display: inline-block; vertical-align: middle; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s;}
  .menu-drop a:before{content: ''; display: block; width: 0; height: 2px; background-color: #ffc07c; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s;}
  .menu-drop a:last-child { margin-right: 0; }
  .menu-drop a:hover{color:#ffbf7b;}
  .menu-drop a:hover  .icon i{top:-100%;}
  .menu-drop a:hover  .icon .hv{top:0;}
  .menu-drop a:hover:before{width:100%;}
}


@media (min-width: 1360px) { .header .logo { z-index: 40; }
  .header-oval { z-index: 30; }
  .menu-drop a { margin-right: 40px; } }

@media (min-width: 1600px) { .header-menu ul { padding-left: 35px; }
  .header-menu li { margin: 0 20px; } }

@media (min-width: 1800px) { .header-menu li { margin: 0 27px; }
  .menu-drop a { margin-right: 35px; } }