/*导航*/ #control header{ min-width:1024px; height:123px; padding-top: 1px; } #control header nav{ float:left; width:50%; padding-left:80px; height: inherit; } #control header nav a:nth-child(1){ color: #2d3037; background: url(../img/Logo.svg) 47% 49% no-repeat; margin-right:8%; width:61px; } #control header nav a:nth-child(1):hover{color: #2d3037;} #control header nav a{ display: inline-block; height: 123px; width:25%; text-align: center; line-height: 123px; font-weight: 500; color: #A8AAB1; font-size: 16px; font-family: HelveticaNeue-Medium; } #control header nav a:hover{ color:#161A21; font-weight: 600; text-decoration:none; } #control header .controlBtn{ float: right; width: 50%; text-align: right; height: inherit; padding-top: 45px; padding-right: 94px; } #control header .controlBtn span{ display: inline-block; width: 32px; height: 32px; margin-right: 46px; } /*四个控件按钮*/ #control .search{ background:url("../img/search_icon.svg") no-repeat; } #control .search:hover{ background:url("../img/search_icon_hover.svg") no-repeat; } #control .avatar{ background:url("../img/avatar_default.svg") no-repeat; } #control .avatar:hover{ background:url("../img/avatar_default_hover.svg") no-repeat; } #control .cart{ background:url("../img/cart_icon.svg") no-repeat; } #control .cart:hover{ background:url("../img/cart_icon_hover.svg") no-repeat; } #control .menu{ background:url("../img/menu_icon.svg") no-repeat; } #control .menu:hover{ background:url("../img/menu_icon_hover.svg") no-repeat; } #control header .hr{ float: left; width: 88%; height: 1.5px; background: #F8F8F8; margin: 0 6%; } /*四个控件按钮--搜索*/ #control_search{ display:none; width: 88%; margin: 0 auto; } #control_search .title{ text-align: center; padding-top: 198px; padding-bottom: 60px; font-family: HelveticaNeue; font-size: 32px; color: #262c38; animation:control_searchTitle 1.5s; -moz-animation:control_searchTitle 1.5s; /* Firefox */ -webkit-animation:control_searchTitle 1.5s; /* Safari and Chrome */ -o-animation:control_searchTitle 1.5s; /* Opera */ } @keyframes control_searchTitle{ 0% {padding-top:248px;opacity:0;} 100% {padding-top:198px;opacity:1;} } @-moz-keyframes control_searchTitle{ 0% {padding-top:248px;opacity:0;} 100% {padding-top:198px;opacity:1;} } @-webkit-keyframes control_searchTitle{ 0% {padding-top:248px;opacity:0;} 100% {padding-top:198px;opacity:1;} } @-o-keyframes control_searchTitle{ 0% {padding-top:248px;opacity:0;} 100% {padding-top:198px;opacity:1;} } #control_search .input{ text-align: center; } #control_search .input>div{ display: inline-block; } #control_search .input>div>p{ height:50px; animation:control_searchInput 1.5s; -moz-animation:control_searchInput 1.5s; /* Firefox */ -webkit-animation:control_searchInput 1.5s; /* Safari and Chrome */ -o-animation:control_searchInput 1.5s; /* Opera */ } @keyframes control_searchInput{ 0% {padding-top:50px;opacity:0;} 100% {padding-top:0px;opacity:1;} } @-moz-keyframes control_searchInput{ 0% {padding-top:50px;opacity:0;} 100% {padding-top:0px;opacity:1;} } @-webkit-keyframes control_searchInput{ 0% {padding-top:50px;opacity:0;} 100% {padding-top:0px;opacity:1;} } @-o-keyframes control_searchInput{ 0% {padding-top:50px;opacity:0;} 100% {padding-top:0px;opacity:1;} } #control_search .input>div>p>input{ float:left; height: 50px; width: 660px; text-indent: 1em; } #control_search .input>div>p>span{ background: url(../img/search_icon_white.svg) no-repeat; float: left; display: inline-block; width: 71px; height: 50px; border-radius: 1px; line-height: 50px; border-left: 0; background-color: #00c400; background-position: 50% 50%; } #control_search .input>div>span{ color: #767a82; display: inline-block; font-size: 40px; line-height: 25px; margin-top:298px; animation:control_searchClose 1.5s; -moz-animation:control_searchClose 1.5s; /* Firefox */ -webkit-animation:control_searchClose 1.5s; /* Safari and Chrome */ -o-animation:control_searchClose 1.5s; /* Opera */ } @keyframes control_searchClose{ 0% {padding-top:50px;opacity:0;} 100% {padding-top:0px;opacity:1;} } @-moz-keyframes control_searchClose{ 0% {padding-top:50px;opacity:0;} 100% {padding-top:0px;opacity:1;} } @-webkit-keyframes control_searchClose{ 0% {padding-top:50px;opacity:0;} 100% {padding-top:0px;opacity:1;} } @-o-keyframes control_searchClose{ 0% {padding-top:50px;opacity:0;} 100% {padding-top:0px;opacity:1;} } #control_search .hot{ text-align: left; animation:control_searchHot 1.5s; -moz-animation:control_searchHot 1.5s; /* Firefox */ -webkit-animation:control_searchHot 1.5s; /* Safari and Chrome */ -o-animation:control_searchHot 1.5s; /* Opera */ } @keyframes control_searchHot{ 0% {padding-top:50px;opacity:0;} 100% {padding-top:0px;opacity:1;} } @-moz-keyframes control_searchHot{ 0% {padding-top:50px;opacity:0;} 100% {padding-top:0px;opacity:1;} } @-webkit-keyframes control_searchHot{ 0% {padding-top:50px;opacity:0;} 100% {padding-top:0px;opacity:1;} } @-o-keyframes control_searchHot{ 0% {padding-top:50px;opacity:0;} 100% {padding-top:0px;opacity:1;} } #control_search .hot .tit{ font-weight:600; } #control_search .hot p{ margin-bottom: 0px; } #control_search .hr{ background-color: #f1f1f1; height: 2px; margin-top: 50px; } /*四个控件按钮--头像*/ #control_avatar{ display:none; } /*四个控件按钮--购物车*/ #control_cart{ display:none; } /*四个控件按钮--菜单*/ #control_menu{ display:none; } /*页脚*/ #control footer{ background-color: #F1F1F1; width:100%; height: 35px; }