﻿/*header部分样式*/
*{
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-decoration: none;
    font-family:"Microsoft YaHei";
}
.ui-header
{
	width: 100%;
	height: 126px;
	position: fixed;
    background: #cfc9c9;
    z-index: 999;
}
.ui-head
{
   width: 100%;
   background: linear-gradient(#f0f0f0, #f9f3f3 52%, #f0f0f0);
   background: #f0f0f0;
}
.ui-top
{
	margin: 0 auto;
	width: 1200px;
	height: 40px;
    position:relative;
}
.ui-welcome
{ 
    font-size:14px;
    font-family:"微软雅黑";
	display: inline-block;
	float: left;
	line-height: 40px;
}
.ui-phone1
{
	display: inline-block;
	float: right;
    font-size:14px;
    color:#333;
    line-height:40px;
    margin-right: 60px;
    transition: all .5s;

}
.ui-phone1 span {
    font-size:18px;
    color:#de0000;
    font-weight:bold;

}
.ui-naver
{
	width: 100%;
	height: 86px;
	position: relative;
	background-image: linear-gradient(to right top, #8e44ad 0%, #3498db 100%);
    background: #fff;
}
.ui-nav
{
	margin: 0 auto;
	width: 1200px;
	height: 86px;
}
.ui-logo
{
    width: 26%;
    height: 81%;
    float: left;
    margin-top: 10px;

}
.ui-nav1
{
    width: 63%;
    height: 60%;
    float: right;
    margin: 34px 0px 0px 130px;
}
.ui-nav1-ul {
    overflow:hidden;
    display:flex;
}

.ui-nav-li
{
    float: left; 
    padding: 4px 0px;
    margin: 0px 42px 0px 0px;
    /* width: 91px; */
    position: relative;
    transition: 0.2s all linear;
}
.ui-nav-li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #3498db;
    transition: 0.2s all linear;

}
.ui-nav-li:hover::before {
    width: 100%;
    top: 0;
    left: 0;
    transition-delay: 0.1s;
    border-bottom-color: #3498db;
    z-index: 0;
}
.ui-nav-li:nth-last-child(1) {
    margin-right:0;
}
.ui-nav-li:hover~.ui-nav-li::before {
    left: 0;
}
.ui-nav-li a
{
	font-size: 20px;
	font-family: "微软雅黑";
	color: #333;
	border-radius: 5px;
    display:block;
    height:100%;
    text-align:center;
    position:relative;
    z-index:2;
}
/*.ui-nav1-ul li:hover
{
	border-bottom:1px solid #3498db;
}*/
.ui-nav-li:hover a
{
    color:#3498db;
    
}
/*导航栏效果begain*/
.nav-up-selected{background:#fff;}
.navigation-down{position:absolute;top:126px;left:0px;width:100%}
.navigation-down .nav-down-menu{width:100%;margin:0;background:rgba(0,0,0,0.4);position:absolute;top:0px;}
.navigation-down .nav-down-menu .navigation-down-inner{margin:auto;width:1200px;position:relative}
.navigation-down .nav-down-menu dl{float:left;margin:18px 80px 18px 0}
.navigation-down .menu-1 dl{margin:45px 57px 25px 0}
.navigation-down .menu-1 dl dd img{width:326px;height: 184px;border: 0;}
.navigation-down .menu-1 dt{font:normal 16px "microsoft yahei";color:#fff;border-bottom:1px solid #fff;margin-bottom:45px;text-align: center; width:150px;height:44px; }
.navigation-down .menu-1 dt a{color: #fff; font: normal 16px "microsoft yahei";}
.navigation-down .menu-1 dd a{color:#fff;font:normal 16px "microsoft yahei"}
.navigation-down .menu-1 dd a:hover{color:#60aff6}
.navigation-down .menu-3 dd a{color:#fff;font:normal 16px "microsoft yahei"}
/*导航栏效果over*/


.ui-banner
{
	width: 100%;
	height: 617px;
	text-align: center;
   padding: 126px 0px 0px 0px;
   overflow:hidden;
}
.ui-banner img
{
    height: 490px;
    width: 100%;
 }
/*轮播图数字框*/

.ui-bgsp
{
	display: block;
    position: absolute;
    bottom: 0px;
    width: 465px;
    height: 35px;
    background-color: #000;
    opacity: 0.5;
}
.ui-wdsp
{
	position: absolute;
    bottom: 0px;
    left:0;
    width: 465px;
    height: 35px;
    color: rgb(255, 255, 255);
    line-height: 35px;
    text-align: left;
    font-size: 15px;
    overflow: hidden;
    text-indent:1em;
}
.ui-slider
{
    width:100%;
    height:554px;
    padding-top:100px;
    z-index:-1;
}
.ui-slider-list
{
    list-style-type:none;
}
.ui-slider-list img
{
    width:100%;
    height:554px;
}
.slide-prev
{
	top: 46%; 
	width: 73px !important; 
	height: 85px !important; 
	margin-top: -37px; 
	display: none; 
	position: absolute; 
	z-index: 2;
	background: url("../images/btnL.png") no-repeat left top; 
	left: 40px;
    background-size:30%;
}
.slide-next
{
	top: 46%; 
	width: 73px !important; 
	height: 85px !important; 
	margin-top: -37px; 
	display: none; 
	position: absolute; 
	z-index: 2;
	background: url("../images/btnR.png") no-repeat right top; 
	right: 40px;
    background-size:30%;
}
/*////////////////////////header完///////////////////*/


/*////////////////////////footer部分样式*/
.ui-footer
{
	width: 100%;
}
.ui-foot
{
	width: 100%;
	height: 245px;
	background: #f4f4f4;
	border-bottom: 4px solid #21ace3;
}
.ui-ftp
{
	display: block;
	margin: 0 auto;
	width: 630px;
	text-align: center;
	line-height: 60px;
	color:#888888;
	font-size: 14px;
    font-family: "微软雅黑";
    transition: all 2s;
}
.ui-ftp:hover
{
	font-size: 16px;
	color: #333;
	color: #ffad01;
}
.ui-ftp2
{
    font-size: 16px;
    font-family: "微软雅黑";
    text-align: center;
    margin: 10px 0px;
    color:#888888;
}
.ui-ftp3
{
	font-size: 12px;
    text-align: center;
    margin: 5px 0px;
    color:#888888;
    font-family:"宋体";
}
.ui-ftBox
{
	width: 1000px;
    height: 185px;
    margin: 0 auto;
}
.ui-ft
{
	margin: 0 20px;
	width: 200px;
	height: 185px;
	float: left;
}
.ui-ft img
{
	margin: 0 auto;
    display: block;
   /* transition:All 0.8s ease-in-out;    
    -webkit-transition:All 0.8s ease-in-out;    
    -moz-transition:All 0.8s ease-in-out;    
    -o-transition:All 0.8s ease-in-out;
    -ms-transition:All 0.8s ease-in-out;*/
}
.ui-ft img:hover
{
	/*transform:rotate(360deg);    
	-webkit-transform:rotate(360deg);    
	-moz-transform:rotate(360deg);    
	-o-transform:rotate(360deg);    
	-ms-transform:rotate(360deg);*/
}
.ui-foot-desc
{
	width: 100%;
	height: 300px;
	background: #333333;
}
.ui-ft-desc
{
	/*width: 1200px;*/
    width: 1280px;
	height: 100%;
	margin: 0 auto;
}
.ui-service
{
	display: block;
	float: left;
	margin: 35px 30px;
}
.ui-service li a
{
	font-size: 13px;
	color: #fff;
	font-family:"宋体";
}
.ui-service li a:hover
{
	color: #4e89d1;
}
.ui-ftbt
{
	width: 100%;
	height: 90px;
	background: #2c2c2c;
}
.ui-ftpb
{
	text-align: center;
	color: #fff;
	line-height: 56px;
    font-size: 13px;
    font-family: "微软雅黑";
}
.ui-ftO 
{
	display: block;
	font-size: 16px;
	font-family:"微软雅黑";
	color: #fff;
	margin-bottom: 15px;
}
.ui-ftsp
{
	display: block;
    font-size: 24px;
    color: #fff;
    margin: 10px 0px;
}
.ui-ftsp2
{
	color: #fff;
	font-size: 13px;
    font-family: "微软雅黑";
}
.ui-weixin
{
	padding: 35px 10px;
}
    .ui-weixin img {
        /*margin: 0px 12px;*/
        margin: 0px 2px;
        width: 179px;
        height: 179px;
    }
.ui-news-content table{
    margin:0 auto !important;   
}
.ui-news-content p{
   line-height:35px !important; 
}
.ui-news-content p span{
   line-height:35px !important; 
}
.ui-news-content span{
   line-height:35px !important; 
}
/*********首页下方图片抖动******/
.ui-ft img:hover 
{
-webkit-animation:sucaijiayuan 1s .1s ease both;
-moz-animation:tada 1s .1s ease both;
}
@-webkit-keyframes sucaijiayuan {
    0% {
        -webkit-transform: scale(1);
    }

    10%, 20% {
        -webkit-transform: scale(0.8) rotate(-2deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale(1.1) rotate(2deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale(1.1) rotate(-2deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0);
    }
}
/*********下方图片抖动*****/

/* new css */

.search-wrapper {
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top:47%;
    right:0%;
}
.search-wrapper.active {}

.search-wrapper .input-holder {
    overflow: hidden;
    height: 30px;
    background: rgba(255,255,255,0);
    border-radius:6px;
    position: relative;
    width:30px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
    border-radius: 50px;
    width:190px;
    background: rgba(0,0,0,0.5);
    -webkit-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -moz-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}

.search-wrapper .input-holder .search-input {
    width:100%;
    height: 30px;
    padding:0px 32px 0 20px;
    opacity: 0;
    position: absolute;
    top:0px;
    left:0px;
    background: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border:none;
    outline:none;
    font-family:"Open Sans", Arial, Verdana;
    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.000, 0.105, 0.035, 1.570);
    -moz-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);

    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
    opacity: 1;
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    transform: translate(0, 0px);
}

.search-wrapper .input-holder .search-icon {
    width:30px;
    height:30px;
    border:none;
    border-radius:6px;
    background: #F0F0F0;
    padding:0px;
    outline:none;
    position: relative;
    z-index: 2;
    float:right;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
    width: 30px;
    height:30px;
    margin: 00px;
    border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
    width:22px;
    height:22px;
    display: inline-block;
    vertical-align: middle;
    position:relative;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
    -moz-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
    transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);

}
.search-wrapper.active .input-holder .search-icon span {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before, .search-wrapper .input-holder .search-icon span::after {
    position: absolute;
    content:'';
}
.search-wrapper .input-holder .search-icon span::before {
    width: 2px;
    height: 11px;
    left: 10px;
    top: 13px;
    border-radius: 2px;
    background: #21ace3;
}
.search-wrapper .input-holder .search-icon span::after {
    width: 14px;
    height: 14px;
    left: 4px;
    top: 0px;
    border-radius: 16px;
    border: 1px solid #21ace3;
}

.search-wrapper .close {
    position: absolute;
    z-index: 1;
    top:3px;
    right:2px;
    width:25px;
    height:25px;
    cursor: pointer;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -webkit-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
    -moz-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
    transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.search-wrapper.active .close {
    right:-30px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -moz-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    transition-delay: 0.5s;
}
.search-wrapper .close::before, .search-wrapper .close::after {
    position:absolute;
    content:'';
    background: #21ace3;
    border-radius: 2px;
}
.search-wrapper .close::before {
    width: 2px;
    height: 25px;
    left: 11px;
    top: 0px;
}
.search-wrapper .close::after {
    width: 25px;
    height: 2px;
    left: 0px;
    top: 11px;
}
.search-wrapper .result-container {
    width: 100%;
    position: absolute;
    top:80px;
    left:0px;
    text-align: center;
    font-family: "Open Sans", Arial, Verdana;
    font-size: 14px;
    display:none;
    color:#B7B7B7;
}

.J-mar {
    margin-right:300px;
    transition: all .5s;
}

.search-input::-webkit-input-placeholder  {
    color:#fff;
    font-size:14px;
}
.sw-prev::after {
    content: '' !important;
}
.sw-next::after {
    content: '' !important;
}
.sw-prev {
    background: url(../../images/btnL.png) no-repeat ;
    background-size: 50% 85%;
}
.sw-next {
    background: url(../../images/btnR.png) no-repeat ;
    background-size: contain;
}
@media screen and (max-width:1280px){
    .ui-banner{
            width: 100%;
            height: 500px;
            text-align: center;
            padding: 120px 0px 0px 0px;
            overflow: hidden;
    }
    .ui-banner img{
        width:100%;
        height:100%;
    }
    .slide-prev,.slide-next{
        top:38%;
    }
}
@media screen and (min-width:1280px)and (max-width:1366px){
    .ui-banner{
            width: 100%;
            height: 530px;
            text-align: center;
            padding: 120px 0px 0px 0px;
            overflow: hidden;
    }
     .ui-banner a{
            display:block;
            height:100%;
    }
    .ui-banner img{
        width:100%;
        height:77%;
    }
    .slide-prev,.slide-next{
        top:40%;
    }
}

@media screen and (max-width: 560px) {
    .search-wrapper.active .input-holder {width:200px;}
}
