/* BASIC css start */
/*====================================================================*/
/******************************* header *******************************/
/*====================================================================*/




header{width:100%; min-width:1200px;  z-index:1001;height:246px;}

header > ul {}



#topLine_wrap {position:relative;}
#topLine{min-width:1200px;height:51px;padding:0 0;box-sizing: border-box;border-bottom: 1px solid #eee;}
#topLine .topLine_bloc {    padding:0 6%;max-width: 100%;margin: 0 auto;height:51px;box-sizing:border-box;}
.topLine_bloc > h1 {    position: absolute;width: 175px;left: calc(50% - 87.5px);top: 7px;z-index: 999;opacity:0;visibility:hidden}


.topLine_bloc > .follow {width:650px;float:left;}
.topLine_bloc > .follow li { cursor:pointer;position: relative;width: 28px;float:left;margin-right:3px;}
.topLine_bloc > .follow li a  {/* background:#eee; *//* width:24px; *//* border-radius:5px; */}
.topLine_bloc > .follow li i {font-size:14px;line-height:24px;color:#333;display: block;background: #eee;width: 24px;border-radius: 5px;text-align: center;margin-top: 12px;display: flex; justify-content: center; align-items: center; height: 24px;}
.topLine_bloc > .follow li i img {height:12px}
.topLine_bloc > .follow li.app a{font-size:14px;line-height:24px;color:#333;display: block;background: #eee;width: 24px;border-radius: 5px;text-align: center;margin-top: 12px;}
.topLine_bloc > .follow li.app a span {      display: block;
    transform: scale(.6);
    color: #555;
    font-weight: bold;
    margin-left: -1px;;}

header.active > ul {      position: fixed;left: 0;top: 0;width: 100%;background: rgba(255,255,255,0.95);z-index: 99999;}
header.active .topLine_bloc > h1 {opacity:1;visibility:visible;}
header.active #top_logo {opacity:0;visibility:hidden;height:0}
header.active .category {border-top:0;}

header.active #topLine {height:106px; }
header.active #topLine .topLine_bloc {padding:34px 6%}




#topLine .btHome {opacity:0;visibility:hidden;position:absolute;left:30px;text-align:center;top:19px;z-index:99;width: 18px;height: 18px;font-size:12px;color:#888}

#topLine .right > li > a {display:inline-block;font-size:12px;letter-spacing:-0.5px;color:#555;font-weight:400; text-align:center; cursor:pointer;padding:12px 0 ;}
#topLine a:hover{color:#535353;}
#topLine.fixTopLine {background: #fff;background-color: rgba( 255,255,255,0.95 );}
#topLine.fixTopLine a {}
#topLine .left {float:left;}
/* world */
#topLine .worldver { position:relative;display:inline-block;}
#topLine .worldver div { position: absolute;left: -8px;top: 1px;opacity: 0;visibility: hidden;padding-top: 25px;}
#topLine .worldver:hover div { opacity:1;visibility:visible;}
#topLine .worldver div ul { background: #fff;padding: 6px 9px 6px 9px;width: 82px;box-shadow: 0px 7px 5px rgba(45,45,45,0.22);}
#topLine .worldver > a { display:inline-block;position:relative;padding-right:12px;font-family:lato;font-size:10px;letter-spacing:1px;}
#topLine .worldver > a:after { content: "";position: absolute;right: 8px;top: 4px;width: 1px;height: 11px;background: #dcdcdc;}
#topLine .worldver a img { vertical-align:middle !important;margin-right:4px;}
#topLine .worldver div a { text-align: left;display: BLOCK;position: relative;font-family: lato;font-size: 10px;letter-spacing:0.5px;height: 25px;line-height: 25px;border-bottom: 1px solid #f5f5f5;}
#topLine .worldver div img { margin-right: 10px;}
#topLine .worldver div a:last-child { border-bottom:0;}



#topLine .right {float:right;padding-top:4px;}
#topLine .right > li {display:inline-block;position:relative;padding-left:20px;}
#topLine .right > li:after {content: "";position: absolute;left:8px;top: 13px;width: 1px;height: 13px;background: #dcdcdc;}
#topLine .right > li.first:after {content:"";display:none;}
#topLine .right > li img {vertical-align:middle !important;margin-left:4px;margin-top:-2px;opacity:0.8;}
#topLine .right > li.btn_join {position:relative;}
#topLine .right > li.btn_join .ani {position: absolute;left:9px;min-width:52px;bottom: -12px;text-align: center;padding: 1px 6px;background:#ccc; border-radius: 5px;letter-spacing: 1px;color: #fff;font-family: lato;z-index:99;}

#topLine.fixTopLine {}
#topLine.fixTopLine .left{padding-left:25px;}
#topLine.fixTopLine .btHome {transition-delay:0.5s;opacity:1;visibility:visible;}


#topLine .right > li:hover > .subMenu {display:block;}
#topLine .subMenu {     position: absolute;width: 106px;padding: 10px 15px;margin: 21px 0 0;box-sizing: border-box;background: #f5f5f5;right: -20px;top: 15px;z-index: 999;display:none;;}
#topLine .subMenu::after { position: absolute;top: -4px;right: 53px;width: 3px;height: 4px;box-shadow: 0 0 7px 2px rgba(195,195,195,0.1); display: block;z-index: -1;content: "";}
#topLine .subMenu li {display: block; line-height: 26px; border-bottom: 1px solid #ececec; padding:0 2px;}
#topLine .subMenu li:last-child {border:0;margin:0;}
#topLine .subMenu li,
#topLine .subMenu li a {-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;}
#topLine .subMenu li:hover a {padding-left:2px;color:#666;}








#top_logo {position:relative;text-align:center; }
#top_logo > a { display:inline-block; /*padding:50px 0;*/ padding:26px 0}



.headerSearch {        position: absolute;right: 6%;bottom: 26px;width: 190px;z-index: 101;box-sizing: border-box;}
.headerSearch > ul {text-align:Center;border:1px solid #ddd;}
.headerSearch input {      border: 0;display: inline-block;width: 150px;line-height: 27px;box-sizing: border-box;padding: 5px;padding-left: 7px;background: transparent;font-size: 14px;display: inline-block;vertical-align: middle;font-size: 11px;;}
.headerSearch .btn_search {    cursor: pointer;display: inline-block;vertical-align: middle;padding-top: 0px;;}
.headerSearch .btn_search i {       font-size: 16px;padding: 0 4px 2px 8px;border-radius: 15px;color: #c1c1c1;display: block;}


#header_wrap{position:relative; width:100%;min-width:1200px;height:58px;z-index:9999;margin-top:-1px;}
#header{ text-align:center; border-top:1px solid #eee; position:relative; width:100%; padding:0px 30px 0; box-sizing:border-box; z-index:100; background:#fff;  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1)}
#header .logoArea{padding:0; box-sizing:border-box; transition:.4s ease-in-out; max-width:1600px; margin:0 auto;position:relative;}
#header .logoArea:after{content:""; clear:both; display:block;}
#header .logoArea .logo{display:inline-block; vertical-align:middle;}
#header .logoArea .logo a{display:block; color:#434343; letter-spacing:0.4px; font-weight:600; font-size:24px;line-height:74px;}
#header .logoArea .logo a.one {display:none;}
#header .logoArea .logo a span{font-family: Poppins;}


#header .logoArea_left {display:inline;}
#header .logoArea_left .leftIcon { position:absolute;top:0;left:0; }



#header .logoArea_right{position:absolute;right:0;top:0; font-size:0; line-height:0; letter-spacing:0;}
#header .logoArea_right .rightIcon{position:relative; display:inline-block; vertical-align:middle; text-align:center; padding:11px 18px; font-size:13px; cursor:pointer;}
#header .logoArea_right .rightIcon:before{content:""; width:1px; height:20px; top:19px;left:0px; background:#ececec; position:absolute;}
#header .logoArea_right .rightIcon a{position:relative;}
#header .logoArea_right .rightIcon a img{opacity:0.95;}
#header .logoArea_right .rightIcon i{font-size:19px;line-height:36px;text-align:center; color:#5b5b5b; *color:#bcbab8; transition: .1s ease-in-out;}
#header .logoArea_right .rightIcon:first-child:before{background:transparent;}
#header .logoArea_right .rightIcon:last-child{padding-right:0;}
#header .logoArea_right .rightIcon i:hover{color:#988d81;}



header .category{ border-top:1px solid #222; display:block; vertical-align:middle; position:relative; text-align:center; box-sizing:border-box; font-size:0; line-height:0; letter-spacing:0;}
header .category > ul{display:inline-block; vertical-align:middle;}
header .category > ul > li{position:relative; display:inline-block; vertical-align:middle; position:relative;}
header .category > ul > li > a { position: relative; display: block; padding: 20px 44px 20px 0; font-size: 14px; line-height: 18px; height: 18px; color: #555; visibility: visible; letter-spacing: 0px;}
header .category > ul > li:last-child > a {padding-right:0;}
header .category:hover > ul > li > a {opacity:0.55;}
header .category:hover > ul > li:hover > a {opacity:1;}
header .category > ul > .cate1 + .etc{position:relative; padding-left:25px;}
header .category > ul > .cate1 + .etc:before{content:""; position:absolute;left:12px;top:22px;height:15px; width:1px; background:#ddd;}


header .category .sub-category{    position: absolute;
    text-align: left;
    top: 68px;
    left: -15px;
    display: none;
    background: transparent;
    z-index: 99;;}
header .category > ul > li:hover .sub-category{top:58px; display:block;}
header .category .sub-category ul{background:#fff;min-width: 140px;padding: 9px 14px 9px;box-sizing:border-box;position:relative;}
header .category .sub-category li{display:block; padding:0; cursor:pointer; border-radius:0px; box-sizing:border-box;}
header .category .sub-category li:first-child{ border-left:0;}
header .category .sub-category li a{position:relative;display:inline-block;line-height: 25px;padding:0 2px;font-size: 13px;color: #808080;box-sizing:border-box;}

header .category .position > li:hover .sub-category{display:block;opacity:1;}
header .category > ul > li .st{display:none;}
header .category   .position > li:hover .sub-category .st{display:block;}
.sub-category .st{position:absolute;right:0px;top:0px;}

header .category .sub-category li.over{background:#efefef; padding-left:4px;}
header .category .sub-category li.over a{color:#535353;}



header {height:282px; /*height:302px*/}

#topBanner { height:60px; ;overflow: hidden; width: 100%; z-index:51;display:none; }
#topBanner .swiper-slide a {height:60px;color: #000;display: flex;justify-content: center;align-items: center;font-size:18px; box-sizing:border-box; padding-top:3px}
header.active #topBanner {position:fixed; top:0; left:0; width:100%}
/*header.active > ul {top:60px; }*/


/* BASIC css end */