﻿@charset "utf-8";
/* CSS Reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, img, button{margin: 0;padding: 0;border: 0;}
html{-webkit-text-size-adjust:none; }
body{font-size:12px;position:relative;*overflow-x:hidden;}
table{border-collapse:collapse; border-spacing:0;}
ol, ul, li{ list-style:none;}
h1, h2, h3, h4, h5, h6{font-weight:normal;}
h1{font-size:28px;}
h2{font-size:22px;}
h3{font-size:18px;}
h4{font-size:16px;}
h5{font-size:14px;}
h6{font-size:12px;}
blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;}
a{text-decoration:none;color:#666;} 
a:hover{color:#000;text-decoration:none;} 
a:focus{outline:0px dotted;}
a:focus, input:focus{ -moz-outline-style: none; } 
* {font-family:'Ubuntu-R',Arial,"微软雅黑",'Microsoft YaHei';box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
::selection { background:#0080c8; color:#fff;} ::-moz-selection { background:#0080c8; color:#fff;  } ::-webkit-selection { background:#0080c8; color:#fff;  }
input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;}
.fl{ float:left;}
.fr{ float:right;}
.clear { clear:both;}
.clearfix:after{ display: block; content:'';clear: both;height:0;overflow: hidden;}
.clearfix { zoom: 1;}
._1200 {width: 1200px; margin: 0 auto; position: relative; overflow: hidden;}


@font-face{
	font-family: aria;
	src: url("../fonts/arial-webfont.eot");
	src: url("../fonts/arial-webfont.eot") format('embedded-opentype'),
		 url("../fonts/arial-webfont.woff") format('woff'), 
		 url("../fonts/arial-webfont.woff2") format('woff2'),
		 url("../fonts/arial.ttf") format('truetype'), 
		 url("../fonts/arial-webfont.svg") format('svg');
	font-weight: normal; font-style: normal;
}
@font-face{
	font-family: sbsc;
	src: url("../fonts/solanogothicretromvb-sbcap.eot");
	src: url("../fonts/solanogothicretromvb-sbcap.eot") format('embedded-opentype'), 
	url("../fonts/solanogothicretromvb-sbcap.woff") format('woff'), 
	url("../fonts/solanogothicretromvb-sbcap.woff2") format('woff2'), 
	url("../fonts/solanogothicretromvb-sbcap.ttf") format('truetype'), 
	url("../fonts/solanogothicretromvb-sbcap.svg") format('svg');
	font-weight: normal; font-style: normal;
}
@font-face{
	font-family: sbrg;
	src: url("../fonts/solanogothicmvb-rg.eot");
	src: url("../fonts/solanogothicmvb-rg.eot") format('embedded-opentype'),
	 url("../fonts/solanogothicmvb-rg.woff") format('woff'),
	 url("../fonts/solanogothicmvb-rg.woff2") format('woff2'),  
	 url("../fonts/solanogothicmvb-rg.ttf") format('truetype'),
	  url("../fonts/solanogothicmvb-rg.svg") format('svg');
	font-weight: normal; font-style: normal;
}
@font-face{
	font-family: sbbd;
	src: url("../fonts/solanogothicmvb-bd.eot");
	src: url("../fonts/solanogothicmvb-bd.eot") format('embedded-opentype'), 
		 url("../fonts/solanogothicmvb-bd.woff") format('woff'),
		 url("../fonts/solanogothicmvb-bd.woff2") format('woff2'),
		 url("../fonts/solanogothicmvb-bd.ttf") format('truetype'), 
		 url("../fonts/solanogothicmvb-bd.svg") format('svg');
	font-weight: normal; font-style: normal;
}
@font-face{
	font-family: sbli;
	src: url("../fonts/solanogothicretromvb-lt.eot");
	src: url("../fonts/solanogothicretromvb-lt.eot") format('embedded-opentype'), 
	url("../fonts/solanogothicretromvb-lt.woff") format('woff'),
	url("../fonts/solanogothicretromvb-lt.woff2") format('woff2'),
	url("../fonts/solanogothicretromvb-lt.ttf") format('truetype'),
	url("../fonts/solanogothicretromvb-lt.svg") format('svg');
	font-weight: normal; font-style: normal;
}

@font-face{
	font-family: dcl;
	src: url("../fonts/dincond-light.eot");
	src: url("../fonts/dincond-light.eot") format('embedded-opentype'), 
	url("../fonts/dincond-light.woff") format('woff'),
	url("../fonts/dincond-light.woff2") format('woff2'),
	url("../fonts/dincond-light.ttf") format('truetype'),
	url("../fonts/dincond-light.svg") format('svg');
	font-weight: normal; font-style: normal;
}
@font-face{
	font-family: dcm;
	src: url("../fonts/dincond-medium.eot");
	src: url("../fonts/dincond-medium.eot") format('embedded-opentype'), 
	url("../fonts/dincond-medium.woff") format('woff'),
	url("../fonts/dincond-medium.woff2") format('woff2'),
	url("../fonts/dincond-medium.ttf") format('truetype'),
	url("../fonts/dincond-medium.svg") format('svg');
	font-weight: normal; font-style: normal;
}

@-webkit-keyframes pulse1 {
0% {-webkit-transform: translate(0, 0);transform: translate(0, 0); }
50% {-webkit-transform: translate(0, 15px);transform: translate(0, 15px); }
100% {-webkit-transform: translate(0, 0);transform: translate(0, 0); } 
}
@keyframes pulse1 {
0% {-webkit-transform: translate(0, 0);transform: translate(0, 0); }
50% {-webkit-transform: translate(0, 15px);transform: translate(0, 15px); }
100% {-webkit-transform: translate(0, 0);transform: translate(0, 0); } 
}


.search-wrapper .input-holder {overflow: hidden;height: 50px;background: transparent;border-radius: 6px;position: relative;width: 70px;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;transition: all .3s ease-in-out}
.search-wrapper.active .input-holder {border-radius: 50px;width: 400px; padding-right: 5px; background: rgba(0,0,0,.5);-webkit-transition: all .5s cubic-bezier(0, .105, .035, 1.57);-moz-transition: all .5s cubic-bezier(0, .105, .035, 1.57);transition: all .5s cubic-bezier(0, .105, .035, 1.57)}

.search-wrapper .input-holder .search-input {width: 100%;height: 30px;padding: 0 70px 0 20px;opacity: 0;position: absolute;top: 0;left: 0;background: 0 0;border: 0;outline: 0;font-family: "微软雅黑";
	font-size: 16px;font-weight: 400;line-height: 20px;color: #fff;-webkit-transform: translate(0, 60px);-moz-transform: translate(0, 60px);transform: translate(0, 60px);-webkit-transition: all .3s cubic-bezier(0, .105, .035, 1.57);-moz-transition: all .3s cubic-bezier(0, .105, .035, 1.57);transition: all .3s cubic-bezier(0, .105, .035, 1.57);-webkit-transition-delay: .3s;-moz-transition-delay: .3s;transition-delay: .3s}
.search-wrapper .input-holder .search-input::-webkit-input-placeholder {color: #fff;}
.search-wrapper.active .input-holder .search-input {opacity: 1;-webkit-transform: translate(0, 10px);-moz-transform: translate(0, 10px);transform: translate(0, 10px);}
.search-wrapper .input-holder .search-icon {border: 0;padding: 0;outline: 0;background: transparent;position: relative;z-index: 2;float: right;cursor: pointer;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;transition: all .3s ease-in-out; display:block;}
.search-wrapper.active .input-holder .search-icon {width: 50px;height: 50px;border-radius: 30px;}
.search-wrapper .input-holder .search-icon span {background: url(../fonts/search.svg) no-repeat center;display: inline-block;width: 50px;height: 50px;vertical-align: middle;position: relative;}
.search-wrapper.active .input-holder .search-icon span {background: url(../fonts/f-search.svg) no-repeat center;}
.search-wrapper.active .input-holder .search-icon span:hover {background: url(../fonts/e-search.svg) no-repeat center;}


.search-wrapper .close {
	opacity: 0;
	position: absolute;
	z-index: 1;
	top: 12px;
	right: 20px;
	width: 25px;
	height: 25px;
	cursor: pointer;
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	transform: rotate(-180deg);
	-webkit-transition: all .3s cubic-bezier(.285, -.45, .935, .11);
	-moz-transition: all .3s cubic-bezier(.285, -.45, .935, .11);
	transition: all .3s cubic-bezier(.285, -.45, .935, .11);
	-webkit-transition-delay: .2s;
	-moz-transition-delay: .2s;
	transition-delay: .2s
}

.search-wrapper.active .close {
	opacity: 1.0;
	right: -50px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: all .6s cubic-bezier(0, .105, .035, 1.57);
	-moz-transition: all .6s cubic-bezier(0, .105, .035, 1.57);
	transition: all .6s cubic-bezier(0, .105, .035, 1.57);
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	transition-delay: .5s
}

.search-wrapper .close::before,
.search-wrapper .close::after {
	position: absolute;
	content: '';
	background: #848484;
	border-radius: 2px
}

.search-wrapper .close::before {
	width: 5px;
	height: 25px;
	left: 10px;
	top: 0
}

.search-wrapper .close::after {
	width: 25px;
	height: 5px;
	left: 0;
	top: 10px
}


