/* by dingtiger 2019.4 */
@font-face {
  font-family: 'dinpro_b';
  src: url('../fonts/DINPro-Bold.eot');
  src: url('../fonts/DINPro-Bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/DINPro-Bold.woff2') format('woff2'),
      url('../fonts/DINPro-Bold.woff') format('woff'),
      url('../fonts/DINPro-Bold.ttf') format('truetype'),
      url('../fonts/DINPro-Bold.svg#dinpro_b') format('svg');
}

@font-face {
  font-family: 'dinpro';
  src: url('../fonts/dinpro.eot');
  src: url('../fonts/dinpro.eot?#iefix') format('embedded-opentype'),
      url('../fonts/dinpro.woff2') format('woff2'),
      url('../fonts/dinpro.woff') format('woff'),
      url('../fonts/dinpro.ttf') format('truetype'),
      url('../fonts/dinpro.svg#dinpro') format('svg');
}
.iconfont {
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
    font-family: 'iconfont';  /* Project id 2376408 */
    src: url('//at.alicdn.com/t/c/font_2376408_dzr0e1y6zc.woff2?t=1733549542048') format('woff2'),
         url('//at.alicdn.com/t/c/font_2376408_dzr0e1y6zc.woff?t=1733549542048') format('woff'),
         url('//at.alicdn.com/t/c/font_2376408_dzr0e1y6zc.ttf?t=1733549542048') format('truetype');
  }
@font-face {
  font-family: 'iconfont';  /* project id 2086191 */
  src: url('//at.alicdn.com/t/font_2086191_ryhza271do.eot');
  src: url('//at.alicdn.com/t/font_2086191_ryhza271do.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2086191_ryhza271do.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2086191_ryhza271do.woff') format('woff'),
  url('//at.alicdn.com/t/font_2086191_ryhza271do.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2086191_ryhza271do.svg#iconfont') format('svg');
}

@font-face {
  font-family: 'iconfont';  /* project id 1963699 */
  src: url('//at.alicdn.com/t/font_1963699_w5rytz1pkve.eot');
  src: url('//at.alicdn.com/t/font_1963699_w5rytz1pkve.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1963699_w5rytz1pkve.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1963699_w5rytz1pkve.woff') format('woff'),
  url('//at.alicdn.com/t/font_1963699_w5rytz1pkve.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1963699_w5rytz1pkve.svg#iconfont') format('svg');
}
*｛margin:0;padding:0;｝
html,body{width:100%;height:100%;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p { padding:0; margin:0; }
body {font-size:14px;font-weight:300; color:#808080; font-family:"microsoft yahei","PingFang SC",Arial, Helvetica, sans-serif;  width:100%; overflow-x:hidden;}
ul,li {list-style: none; padding:0px; margin:0px}
img {border:0; margin:0px; padding:0px; display:block;}
input:focus {outline: none;}
.clean{clear:both;}

a:link {color: #777777;text-decoration: none;}
a:visited {color: #777777;text-decoration: none;}
a:hover {color:#0080cb;text-decoration: none;}
a:active {color: #777777;text-decoration: none;}


/*menu*/
.menu{width:100%; height:80px; position:fixed;z-index:9999;top:0;background: rgba(255, 255, 255, 1);  -moz-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2); -webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2); box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2); }
.menu ol{width:66%;min-width: 1200px; height:80px; margin:0 auto;}
.menu ol ul:nth-child(1){width:220px; height:80px; float:left; }
.menu ol ul:nth-child(2){height:80px;float:right; }
.menu ol ul:nth-child(2) li{padding:0 20px;float:left;line-height: 80px;height:77px; text-align:right; }
.menu ol ul:nth-child(2) div a:hover{color:#137A3B;}
.menu ol ul:nth-child(2) li:hover{border-bottom:3px solid #177A3A;}
.menu ol ul:nth-child(2) li:hover .menu ol ul:nth-child(2) li a{color: #177A3A;}
.menu ol ul:nth-child(2) li a{width:100%;height:100%;display: inline-block;}
.menu ol ul:nth-child(2) li a:link{color: #000;}
.menu ol ul:nth-child(2) li a:visited{color: #000;}
.menu ol ul:nth-child(2) li a:hover{color: #177A3A;}
.menu ol ul:nth-child(2) li a:active{color: #000;}


/*index_banner*/
.index_banner{width:100%; height:calc(100vh - 80px);z-index:9998;}
.about_banner{width:100%; padding-top: 80px;height:400px;z-index:9998;}
.txt-box{width:66%;min-width: 1200px; display:block; margin:105px auto 0 auto; text-align:left;}
.swiper-container {width: 100%;height:100%;}
.swiper-slide{color:#fff;}
.swiper-slide .titlea {font-size:45px; color:#fff; text-align:left; margin-top:25vh;line-height:50px;}
.swiper-slide .titleb {font-size:36px; color:#fff; text-align:left; line-height:30px;margin-top:15px;}
.swiper-slide .titlec {font-size:18px; color:#fff; text-align:left; margin:60px 0; line-height:28px;}
.swiper-slide .titled {width: 100px;height: 30px; line-height: 30px; font-size:14px; color:#fff; text-align:center; margin-top:10px;background:#F6B300;border-radius: 3px;}
.swiper-slide .titlee {font-size:30px; color:#ffffff; text-align:left; margin-top:150px;line-height:35px;}
.swiper-slide .titlef {font-size:30px; color:#ffffff; text-align:left;line-height:35px;}
.swiper-slide .titleg {font-size:30px; color:#ffffff; text-align:left;line-height:35px;}
.swiper-slide .titleh {font-size:40px; color:#ffffff; text-align:center; margin-top:350px;line-height:50px;}
.swiper-slide .titlei {font-size:30px; color:#ffffff; text-align:center;line-height:50px;}

.n_banner{width:100%; padding:250px 0 250px 0; background-color:#666;}
.n_banner ul{width:66%; min-width:1200px; margin:0 auto; text-align:center;}
.n_banner ul font{font-size:40px; color:#fff; line-height:60px; }
.n_banner ul span{color:#aaa;}

/*新闻资讯页面*/
.news_menu{width:66%; min-width:1200px; margin:0 auto; text-align:center; padding-top:100px;}
.news_menu_a_a:hover{color:#137A3B;}
.news_menu_a:hover{color:#fff;}
.news_menu_a:link{padding:10px 30px; background-color:#137A3B; color:#fff; margin:0 1px;}
.news_menu_a:visited{color:#fff;}
.news_menu_a:hover{color:#fff;}
.news_menu_a:active{color:#fff;}
.news_menu_a_a{padding:10px 30px; background-color:#f5f5f5; margin:0 1px;}
.news_b{width:66%; min-width:1200px; padding:0 0 100px 0; border-top:1px solid #eee; margin:50px auto 0 auto;}
.news_b ul{width:100%; padding:25px 0; border-bottom:1px solid #eee;overflow: hidden;}
.news_b ul li:nth-child(1){width:9%; float:left;}
.news_b ul li:nth-child(2){width:calc(74% - 50px); margin-right:50px; float:left;}
.news_b ul li:nth-child(3){width:17%; float:left;}
.news_b ul li img{width:100%;}
.news_b ul li span{font-size:18px; display:inline-block; margin-bottom:5px; color:#000;width:100%;overflow: hidden; text-overflow: ellipsis;white-space: nowrap; cursor:pointer;}
.news_b ul li p{width:100%;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;height: 40px;}

.news_b ul li dd:nth-child(1){width:70%; border:1px solid #137A3B; background-color:#137A3B; text-align:center; color:#fff; font-size:30px; line-height:50px; border-radius:8px 8px 0 0; font-family:'dinprob';}
.news_b ul li dd:nth-child(2){width:70%; border:1px solid #eee; text-align:center; border-radius:0 0 8px 8px; font-family:'dinpro';}

.news_b ul li a{display:block; margin-top:10px; color:#137A3B;}
.news_b ul li a font{font-size:20px;}

/*系统方案页面*/
.systemBox{width: 1200px;min-height: 100px;margin:100px auto;}
	.system_d{width:calc(20% - 2px);border:1px solid #E9E9E9;border-right:none;float:left;background:#fff;color:#000;cursor: pointer;position: relative;}
	.system_d:nth-child(5){border-right:1px solid #E9E9E9;}
	.system_d p{width: calc(100% - 10px);text-align: center;font-size:14px;margin:15px 0 5px 0;padding:0 5px;height: 40px;}
	.system_d .iconfont{text-align: center;width: 100%;display: inline-block;margin-bottom:10px;color:#187B3B;font-size:20px;}
	.system_select{background:#187B3B !important;color:#fff !important;}
	.system_dd{width:calc(20% - 2px);border:1px solid #E9E9E9;border-right:none;float:left;overflow: hidden;background:#187B3B;color:#fff;cursor: pointer;}
	.icoSelect{color:#fff !important;}
	.system_body{width: 1200px;overflow: hidden;margin:100px auto;}
	.systemName{font-size:30px;color:#187B3B;border-bottom:1px solid #E9E9E9;text-align:center;height:60px;}
	.systemModel{font-weight: bold;margin-top:12px;font-size:16px;color:#000;}
	.body_a{width:100%;margin-top:50px;overflow: hidden;}
	.diamond{display: inline-block;width: 8px;   height:8px;margin:0 10px;   background-color: #F9B301;   transform:rotate(45deg);   -ms-transform:rotate(45deg); /* Internet Explorer */   -moz-transform:rotate(45deg); /* Firefox */   -webkit-transform:rotate(45deg); /* Safari 和 Chrome */   -o-transform:rotate(45deg); /* Opera */ }
	.body_a_left{float:left;width:40%;overflow: hidden;}
	.body_mk{width:100%;margin-bottom:50px;overflow: hidden;}
	.body_title{color:#187B3B;font-size:18px;margin-bottom:20px;}
	.body_nr{color:#000;font-size:14px;line-height: 25px;}
	.body_mk table{border-collapse:collapse;border:1px solid #E9E9E9;table-layout:fixed;width:100%;border-right:none;border-left: none;}
	.body_mk table tr{border:1px solid #E9E9E9;border-right:none;border-left: none;}
	.body_mk table tr td{width:50%;color:#000;padding: 5px 0;}
	.body_mk ul{width:100%;overflow: hidden;}
	.body_mk ul li{color:#000;font-size:14px;margin-bottom:10px;overflow: hidden;}
	.body_a_right{float:right;width:30%;overflow: hidden;margin-right:15%;}
	.body_a_right img{width:100%;}
	.body_b{width:100%;margin-top:50px;overflow: hidden;}
	.body_mk .xtzc{width:80%;margin-left:10%;}
	.pro_td{width:100%;margin-bottom:20px;overflow: hidden;}
	.pro_td img{float:left;width:40px;height:40px;margin-right:12px;}
	.pro_td .td_word{float:left;width:calc(100% - 52px);height:40px;}
	.pro_td .td_word p{font-size:12px;color:#000;height:20px;line-height:20px;}
	.alBox{width:100%;overflow: hidden;}
	.alBox img{width:100%;}
	.downBox{width:100%;overflow: hidden;display: none;}
	.downBox a{display: inline-block;margin-bottom:20px;}

.pre_banner_3d a{
    text-decoration: none;
    border:none;
}
.pre_banner_3d{
    margin:auto;
	width:66%;
    min-width:1200px;
    height:450px;
    position:relative;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.contrves{
    width:100%;
    height:auto;
    position:absolute;
    
}
.nav_banners{
    width:100%;
    height:auto;
    border-bottom: 1px solid #f2f2f2;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content:space-between;
}
.nav_banners>li{
    display:inline-block;
    padding:5px 16px;
    margin:12px 0;
    border-radius: 5px;
    font-size:14px;
    cursor: pointer;
}
.blue_nav{
    background:#63B504;
    color:#fff;
}
.banner_tree{
    width:100%;
    height:450px;
    position:absolute;
    bottom:0;
    overflow: hidden;
}
.show_phone_s{
    width:414px;
    height:736px;
    position:absolute;
    top:0;
    left:0;
    bottom: 0;
    right:0;
    margin:auto;
    z-index: 10
}
.color_font{
    color:#63B504;
	border:1px solid #63B504;
    width: 45px;
    height: 100px;
    font-size:24px;
    text-align: center;
    line-height: 100px;
    border-radius: 5px;
    font-weight: 700;
    position:absolute;
    top:0;bottom:0;
    margin:auto;
    z-index: 50;
    cursor: pointer;
}
.left_btn{
    left:0;
}
.right_btn{
    right:0;
}
.img_phone{
    width:100%;
    height:100%;
}
.show_s_ui{
    width:100%;
    height:100%;
    position:relative;
}
.show_s_ui>li{
    width:230px;
    height:300px;
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    z-index: 30;
    cursor: pointer;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    opacity: 0;
    font-size:40px;
}
.show_s_ui>li>div{
    position: absolute;
    top:0;
	text-align: center;
    width:100%;
    height:100%;
    background:#fff;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
    opacity: 0.9;
    display:none;
}
.show_s_ui>li>img{
    width:100%;
    height:100%;
}
#middel_shows{
    width:300px;
    height:400px;
    left:37.7%;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    opacity:1;
}
#left_shows{
    left:8%;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
    opacity: 0.6;
}
#right_shows{
    left:73%;
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
#small_left,#small_right{
    width:154px;
    height:249px;
    opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
#small_left{
    left:-15%;
}
#small_right{
    left:102.5%;
}
@media screen and (max-width:1200px){
    .pre_banner_3d {width:1024px;height:763px;}
    #middel_shows {left: 35.5%;}
    .show_s_ui>li { width: 175px;height: 282px;}
    #small_left, #small_right {width: 131px;height: 194px;}
}
@media screen and (max-width:1024px){
    .pre_banner_3d {width: 875px;height: 765px;}
    .show_phone_s {width: 375px;height: 667px;}
    #middel_shows {left: 34.8%;}
    #middel_shows {width: 267px;height: 457px;}
}
@media screen and (max-width:879px){
    .pre_banner_3d {width: 746px;height: 735px;}
    #middel_shows {left: 31.8%;}
    #middel_shows {width: 269px;height: 457px;}
    .show_s_ui>li {width: 145px;height: 232px;}
}
@media screen and (max-width:768px){
    .pre_banner_3d {width: 675px;height: 586px;}
    .show_phone_s {width: 320px;height: 568px;}
    #middel_shows {left: 33.1%;}
    #middel_shows {width: 227px;height: 389px;}
    .show_s_ui>li {width: 138px;height: 215px;}
    #right_shows {left: 72%;}
    .banner_tree {height: 539px;}
}
@media screen and (max-width:685px){
    .color_font{display:none}
    #small_left {left: -55%;}
    .pre_banner_3d {width: 520px;}
    #small_right {left: 109.5%;}

    .show_phone_s {width: 300px;height: 496px;}
    #middel_shows {left: 29.7%;}
    #middel_shows {width: 213px;height: 340px;}
    #left_shows {left: 0%;}.show_s_ui>li {width: 106px;height: 190px;}
    #right_shows {left: 79.5%;}
}
@media screen and (max-width:521px){
    .pre_banner_3d {width: 359px;}
    #left_shows {left: -41%;}
    #right_shows {left: 107.5%;}
    #middel_shows {left: 20.4%;}
    #middel_shows {width: 214px;height: 340px;}
    .show_phone_s {width: 349px;height: 568px;}
    #middel_shows {left: 15.5%;}
    #middel_shows {width: 246px;height: 390px;}
}
@media screen and (max-width:359px){
    .pre_banner_3d {width: 320px;}
    .show_phone_s {width: 320px;height: 520px;}
    #middel_shows {left: 14.5%;}
    #middel_shows {width: 228px;height: 356px;}
}
/*联系我们页面*/
#container {height: 100%;width: 100%;}   
.contact_c{width:100%;margin-top: 100px;}
.contact_c ul{width:66%; min-width:1200px; margin:0 auto;}
.contact_c ul ol{width:47%; float:left; margin-right:6%; height:490px;}
.contact_c ul ol:nth-child(2){margin-right:0;}
.contact_c ul ol li:nth-child(1){border-top:1px solid #eee;}
.contact_c ul ol li{width:100%; float:left; border-bottom:1px solid #eee; padding:50px 0;}
.contact_c ul ol li dl{float:left;width: calc(100% - 40px);}
.contact_c ul ol li dl:nth-child(1){margin-right:15px; font-size:24px; color:#ccc;width:25px;}
.contact_c ul ol span{font-size:16px; color:#000;}
.contact_c ul ol font{font-size:20px; color:#ff5003; font-family:'Gotham';}
.contact_c h3{margin-bottom:10px;    font-size: 20px;color: #137A3B;}

/*下载中心*/
.downCenterBox{width:66%;min-width: 1200px;overflow: hidden;margin: 100px auto;}
.downList{width:100%;overflow: hidden;margin-bottom:30px;}
.downList p{color: #000;font-size: 18px;margin-bottom: 20px;cursor: pointer;border-bottom:2px solid #000;height:auto;font-weight:bold;}
.downList ul{width:100%;overflow: hidden;}
.downList ul li{width:100%;margin-bottom:12px;}
.downList ul li a{font-size:14px;color: #187B3B;}
.downList ul li a:hover{color:#b52022;}

/*关于我们*/
.about_a_b{width:66%; min-width:1200px; margin:0 auto; padding:80px 0;}
.about_a_b ul:nth-child(1){text-align:center; margin-bottom:50px;  background-repeat:no-repeat; background-position:center bottom; padding-bottom:15px;}
.about_a_b ul:nth-child(2){margin-bottom:40px;}
.about_a_b ul li:nth-child(1){width:calc(65% - 40px); float:left; text-align:left; margin-right:40px;line-height:25px;}
.about_a_b ul li:nth-child(2){width:35%; float:left;}
.about_a_b ul dd{width:calc(25% - 6px); float:left; margin-right:8px;}
.about_a_b ul dd:nth-child(4){margin-right:0;}
.about_a_b ul dd img{width:100%;}
.about_a_b ul li img{width:100%;}

.about_c{width:100%; padding:120px 0 80px 0; background-color:#f5f5f5;}
.about_c ul{width:66%; min-width:1200px; margin:0 auto;}
.about_c ul li{width:calc(50% - 30px); margin-right:60px; float:left;}
.about_c ul li:nth-child(2){margin-right:0; width:calc(50% - 30px);}
.about_c ul li h1{margin-bottom:30px;margin-bottom: 50px; background-repeat: no-repeat; background-position: left bottom;padding-bottom: 15px;}
.about_c ul li p{margin-bottom:60px;width:80%;line-height:25px;}
.about_c ul li img{width:100%;}
.about_c ul li a{text-align:left;}
.about_c ul li span{color:#fff; font-size:40px; line-height:40px; padding:10px; margin-right:8px;float:left;}
.about_c ul li span:nth-child(3){background-color:#1D2088;}
.about_c ul li span:nth-child(4){background-color:#1D2088;}
.about_c ul li span:nth-child(5){background-color:#3E3A39;}
.about_c ul li span:nth-child(6){background-color:#B01D36;}
.about_c ul li span:nth-child(7){background-color:#0F593F;}
.about_c ul li .ex{width:60px;height:60px;float:left;}

/*about_e_title*/
.about_e_title{width:100%; padding:120px 0; background-position:bottom; background-size:cover;}
.about_e_title ul:nth-child(1){margin-bottom:30px;}
.about_e_title ul{width:66%; min-width:1200px; margin:0 auto;}
.about_e_title ul li{width:40%; color:#fff;}
.about_e_title ul h1{color:#fff;}
.about_e_title ul li span{display:block; margin-top:30px; font-size:30px; line-height:30px;}

/*about_e*/
.about_e{width:100%; padding:120px 0;}
.about_e ul{width:66%; min-width:1200px; margin:0 auto;}
.about_e ul li{width:calc(33.33% - 24px); margin-right:36px; float:left;text-align: center;font-weight:bold;}
.about_e ul li a:hover{color:#777777;}
.about_e ul li:nth-child(3n+3){margin-right:0;}
.about_e ul li img{width:100%; margin-bottom:6px;height: 100%;}
.about_e ul li img:hover{box-shadow: #666 0px 0px 10px;}

/*about_e_x*/
.about_e_x{width:100%; padding:100px 0; background-size:cover;}
.about_e_x h1{margin-bottom: 50px;background-repeat: no-repeat;background-position: left bottom;padding-bottom: 15px;}
.about_e_x p{line-height:25px;}
.about_e_x ul{width:66%; min-width:1200px; margin:0 auto;}
.about_e_x ul li:nth-child(1){width:60%; float:left;}
.about_e_x ul li:nth-child(2){width:35%; float:left; margin-left:5%;}
.about_e_x ul img{width:100%;}
.about_e_x ul a{background-color:#F6B300; text-align:center; color:#fff; padding:10px; border-radius:8px;}



.nav-bak-inner {
    width: 150px;
    height: 150px;
    margin: 150px 0 0 150px;
    /* background-color: #00E1F3; */
    border-radius: 0 0 150px 0;
    position: relative;
    
    background-position: 3px -8px;
    background-size: cover;
	float:left;
}
.nav-item {
    width: 150px;
    height: 150px;
    border-radius: 0px 0 150px 0;
    position: absolute;
    transform-origin: 0 0;
    background-position: 3px -8px;
    background-size: cover;
	overflow: hidden;
	display: none;
}
.nav-item img{width:100%;}
.nav-item:nth-child(1) {
    transform: rotateZ(0deg);
/*    background: transparent;*/
    z-index: 1;
    border-left: 0;
}
.nav-item:nth-child(2) {
    transform: rotateZ(72deg);
}
.nav-item:nth-child(3) {
    transform: rotateZ(144deg);
}

.nav-item:nth-child(4) {
    transform: rotateZ(216deg);
}
.nav-item:nth-child(5) {
    transform: rotateZ(288deg);
    border-left: none;
}
.nav-center {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    left: -60px;
    top: -60px;
    background: #177A3A;
    z-index: 1;
/*    border: 1px solid #00EBFA;*/
    background-size: 70%;
	line-height: 120px;
    font-size: 60px;
    text-align: center;
    color: #fff;
	cursor: pointer;
}

.nav-center img {
    width: 60px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -30px;
    margin-top: -30px;
}

/*industry瀑布流*/
.t_show{
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,0.6);
    top: 0;
    z-index: 100;
    cursor: pointer;
}
.t_img,.t_images{
    width: 1200px;
    height: 760px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 200;
	display:flex;
justify-content:center;
align-items:center;
}
.t_images{
    z-index: 300;
}
#grid li:hover a img{
     transition: all ease 1s;
     transform:scale(1.2);
}

.grid-wrap {
    clear: both;
    margin: 0 auto;
    padding: 0;
    max-width: 1260px
}

.grid {
    margin: 30px auto;
    padding: 0;
    list-style: none;
    min-height: 500px
}


.js .grid.loaded {
    background: 0 0
}

.grid li {
    display: inline-block;
    overflow: hidden;
    width: 418px;
    text-align: left;
    vertical-align: top
}

.js .grid li {
    display: none;
    float: left
}

.js .grid.loaded li {
    display: block
}

.title-box h2 {
    display: block;
    margin: 7px;
    padding: 20px;
    background: #2e3444;
    color: #d3eee2;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 300
}

.title-box h2 a {
    display: block;
    font-weight: 900
}

.title-box h2 a:hover {
    color: #d3eee2
}

.grid li>a,
.grid li img {
    border-radius: 2px;
    display: block;
    outline: 0;
    border: 0
}

.grid li>a {
    position: relative;
    overflow: hidden;
    margin: 7px
}

.grid .curtain {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: #333
}

.grid.swipe-right .curtain {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
}

.grid.swipe-down .curtain {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
}

.grid.swipe-rotate .curtain {
    width: 200%;
    height: 200%;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    -webkit-transform-origin: top left;
    transform-origin: top left
}

.grid .curtain::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    content: ''
}

.grid.swipe-right .curtain::after,
.grid.swipe-rotate .curtain::after {
    left: -100%
}

.grid.swipe-down .curtain::after {
    top: -100%
}

.grid li h3 {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 20px;
    width: 100%;
    background: #2e3444;
    color: #d3eee2;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
    font-size: 1em;
    -webkit-transition: -webkit-transform .2s, color .2s;
    transition: transform .2s, color .2s
}

.grid li>a::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100.5%;
    height: 100.5%;
    border: 0;
    background: transparent;
    content: '';
    -webkit-transition: border-width .2s, border-color .2s;
    transition: border-width .2s, border-color .2s
}

.grid li.shown:hover h3 {
    color: #fff;
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0)
}

.grid li.shown:hover>a::before {
    border-width: 14px;
    border-color: #2e3444
}

.grid.swipe-right li.animate .curtain {
    -webkit-animation: swipeRight 1.5s cubic-bezier(.6, 0, .4, 1) forwards;
    animation: swipeRight 1.5s cubic-bezier(.6, 0, .4, 1) forwards
}

@-webkit-keyframes swipeRight {
    0% {}
    50%,
    60% {
        -webkit-transform: translate3d(0, 0, 0)
    }
    100% {
        -webkit-transform: translate3d(100%, 0, 0)
    }
}

@keyframes swipeRight {
    0% {}
    50%,
    60% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate(0)
    }
    100% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

.grid.swipe-down li.animate .curtain {
    -webkit-animation: swipeDown 1.5s cubic-bezier(.6, 0, .4, 1) forwards;
    animation: swipeDown 1.5s cubic-bezier(.6, 0, .4, 1) forwards
}

@-webkit-keyframes swipeDown {
    0% {}
    50%,
    60% {
        -webkit-transform: translate3d(0, 0, 0)
    }
    100% {
        -webkit-transform: translate3d(0, 100%, 0)
    }
}

@keyframes swipeDown {
    0% {}
    50%,
    60% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
    100% {
        transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

.grid.swipe-rotate li.animate .curtain {
    -webkit-animation: swipeRotate 1.5s ease forwards;
    animation: swipeRotate 1.5s ease forwards
}

@-webkit-keyframes swipeRotate {
    0% {}
    50%,
    60% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg)
    }
    100% {
        -webkit-transform: rotate3d(0, 0, 1, -90deg)
    }
}

@keyframes swipeRotate {
    0% {}
    50%,
    60% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
    100% {
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg)
    }
}

.grid li.animate .curtain::after {
    -webkit-animation: fadeOut 1.5s ease forwards;
    animation: fadeOut 1.5s ease forwards;
    -webkit-animation-delay: inherit;
    animation-delay: inherit
}

@-webkit-keyframes fadeOut {
    0% {}
    50%,
    60% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {}
    50%,
    60% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.js .grid li img,
.js .grid li h3 {
    visibility: hidden
}

.grid li.animate img,
.grid li.animate h3 {
    -webkit-animation: showMe 1.5s step-end forwards;
    animation: showMe 1.5s step-end forwards
}

@-webkit-keyframes showMe {
    from {
        visibility: hidden
    }
    60%,
    100% {
        visibility: visible
    }
}

@keyframes showMe {
    from {
        visibility: hidden
    }
    60%,
    100% {
        visibility: visible
    }
}

.grid li.shown img,
.grid li.shown h3 {
    visibility: visible
}

owMe {
    from {
        visibility: hidden
    }
    60%,
    100% {
        visibility: visible
    }
}

.grid li.shown img,
.grid li.shown h3 {
    visibility: visible
}