/*导航*/ #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:20%; 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: 50px 0; } /*四个控件按钮--头像*/ #control_avatar{ display:none; } /*四个控件按钮--购物车*/ #control_cart{ display:none; } /*四个控件按钮--菜单*/ #control_menu{ display:none; background-color: rgba(153, 153, 153,.5); position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align:right; } #control_menu .main{ width: 27%; height: 100%; display: inline-block; background-color: #fff; } #control_menu .shut{ text-align: left; margin: 4rem 88.5% 42px 2rem; font-size: 50px; color: #D1D5DA; line-height: 28px; font-weight: 300; } #control_menu .one{ text-align: left; width: 90%; margin: auto 5%; height: 168px; } #control_menu .one table{ width: 100%; } #control_menu .one th{ width: 50%; padding-bottom: 35px; font-size: 16px; } #control_menu .one td{ width: 50%; padding-bottom: 19px; font-size: 14px; cursor: pointer; } .in{ color: #007AFF; } /*页脚*/ #uiLayer>footer{ background-color: #F1F1F1; width:100%; height: 35px; line-height: 35px; color: #a5a7ae; text-indent: 2rem; } #uiLayer>footer>div{ float: right; padding-right: 3rem; line-height: 0; } #uiLayer>footer>div>span{ display:inline-block; width:25px; height:25px; background-position-x: 3px; background-repeat: no-repeat; margin: 8px 1.5rem 0 0; } #uiLayer>footer .facebook{ background-image: url("../img/facebook_icon.svg"); } #uiLayer>footer .facebook:hover{ background-image: url("../img/facebook_icon_hover.svg"); } #uiLayer>footer .twitter{ background-image: url("../img/twitter_icon.svg"); } #uiLayer>footer .twitter:hover{ background-image: url("../img/twitter_icon_hover.svg"); } #uiLayer>footer .pinterest{ background-image: url("../img/pinternest_iocn.svg"); } #uiLayer>footer .pinterest:hover{ background-image: url("../img/pinternest_iocn_hover.svg"); } #uiLayer>footer .google{ background-image: url("../img/google_icon.svg"); } #uiLayer>footer .google:hover{ background-image: url("../img/google_icon_hover.svg"); } #uiLayer>footer .instagram{ background-image: url("../img/instagram_icon.svg"); } #uiLayer>footer .instagram:hover{ background-image: url("../img/instagram_icon_hover.svg"); } #uiLayer>footer .wechat{ background-image: url("../img/wechat_icon.svg"); } #uiLayer>footer .wechat:hover{ background-image: url("../img/wechat_icon_hover.svg"); } #uiLayer>footer .youtube{ background-image: url("../img/youtube_icon.svg"); } #uiLayer>footer .youtube:hover{ background-image: url("../img/youtube_icon_hover.svg"); }