﻿/*==========图片扩展模型 开始==========*/
/*图片扩展组件0*/
.picture0{}
.picture0 .InfoSContent { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.picture0 li.column2 .InfoSContent { -webkit-line-clamp:4; line-clamp: 4; }
.picture0 li.column3 .InfoSContent { -webkit-line-clamp: 3; line-clamp: 3; }
.floor_picture0{ max-width: 1440px; margin: 0 auto; }
.thumb-picture0:after{ content: ""; display: block; clear: both; }
.thumb-picture0 li{ transition-duration: .5s; }
.thumb-picture0 a{ display: block; padding: 15px; margin: 8px; border-bottom: 1px solid #ddd; overflow: hidden; transition-duration: .5s; }
.thumb-picture0.list-style4 a{ padding: 0; }
.thumb-picture0 .InfoPicture{ float: left; width: 35%; transition-duration: .5s; }
.thumb-picture0 .InfoTitle{ font-size: 18px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb-picture0 .InfoSContent{ color: #666; overflow: hidden; }
.thumb-picture0 li a:hover{ transform: translateY(-5px); box-shadow: 0 8px 35px rgba(0, 0, 0, .08); }
.thumb-picture0 li a:hover .InfoPicture{ transform: scale(1.05); }
.grid-picture0{}
.grid-picture0:after{ content: ''; display: block; clear: both; }
.grid-picture0 li{ width: 33.33333%; float: left; }
.grid-picture0 li a{ display: block; margin: 0 10px; transition-duration: .5s; }
.grid-picture0 li .InfoTitle{ font-size: 17px; margin: 10px 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition-duration: .3s; }
.grid-picture0 li .InfoSContent{ padding-right: 20px; margin: 10px 0; overflow: hidden; color: #999; box-sizing: border-box; transition-duration: .3s; }
.grid-picture0 li .InfoWrap{ position: relative; transition-duration: .2s; }
.grid-picture0 li .InfoWrap:after{ content: ''; position: absolute; left: 10px; right: 10px; box-sizing: border-box; height: 1px; background: #ddd; bottom: 55px; transition-duration: .5s; transform-origin: 0 0; transform: scaleX(0); }
.grid-picture0 .InfoPicture{ overflow: hidden; }
.grid-picture0 img{ width: 100%; transition-duration: .5s; }
.grid-picture0 li:hover a{ background: #FFF; box-shadow: 0 18px 25px rgba(0,0,0,.1); }
.grid-picture0.list-style4 li:hover .InfoWrap{ transform: scale(.95); }
.grid-picture0 li:hover img{ transform: scale(1.1); }
.grid-picture0 li:hover .InfoTitle{ transform: translateY(-5px); }
.grid-picture0 li:hover .InfoSContent{ transform: translateY(5px); }
.grid-picture0 li:hover .InfoWrap:after{ transform: scaleX(1); }
/*图片扩展组件1*/
.floor_picture1 { max-width: 1440px; padding: 0 10px; margin: 0 auto; }
.picture1{ overflow: hidden; }
.picture1 a{ display: block; position: relative; margin:0; }
.picture1 a.themargin2 { margin:2px; }
.picture1 a.themargin5 { margin:5px; }
.picture1 a.themargin10 { margin:10px; }
.picture1 a.themargin20 { margin:20px; }
.picture1 .InfoPicture{ background: #000; overflow: hidden; }
.picture1 .InfoPicture img{ transition-duration: .5s; }
.picture1 .InfoWrap{ position: absolute; position: absolute; top: 30%; left: 10%; right: 10%; text-align: center; color: #FFF; }
.picture1 .InfoWrap .InfoTitle{ font-size: 18px; font-weight: bold; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; opacity: 0; transform: translateY(10px); transition-duration: .5s; }
.picture1 .InfoWrap .InfoSContent{ line-height: 1.8em; height: 3.6em; overflow: hidden; margin-top: 10px; opacity: 0; transform: translateY(20px); transition-duration: .5s; }
.picture1 a:hover img{ opacity: .7; transform: scale(1.1); }
.picture1 a:hover .InfoTitle{ transform: translateY(0); opacity: 1; }
.picture1 a:hover .InfoSContent{ transform: translateY(0); opacity: 1; }
/*图片扩展组件2*/
.floor_picture2{ position: relative; max-width: 1440px; padding: 0 60px; margin: 0 auto; }
.floor_picture2 .pagination .prev,.floor_picture2 .pagination .next{ position: absolute; left: 10px; width: 40px; height: 100px; line-height: 100px; text-align: center; font-size: 40px; top: 0; bottom: 0; margin: auto; cursor: pointer; border: 1px solid #999; border-radius: 3px; color: #999; }
.floor_picture2 .pagination .next{ left: auto; right: 10px; }
.floor_picture2 .pagination .prev:hover,.floor_picture2 .pagination .next:hover{ background: rgba(0,0,0,.1); }
.floor_picture2 .pagination .prev:active,.floor_picture2 .pagination .next:active{ box-shadow: 0 0 10px rgba(0,0,0,.1) inset; }
.picture2{ overflow: hidden; }
.picture2 a{ display: block; padding: 4px; background: #FFF; margin: 10px 5px; box-shadow: 0 0 10px 0 rgba(0,0,0,.1) }
.picture2 .InfoTitle{ padding: 8px 10px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition-duration: .5s; }
.picture2 li .InfoPicture{ overflow: hidden; }
.picture2 li .InfoPicture img{ transition-duration: .5s; }
.picture2 li:hover img{ transform: scale(1.1); }
/*图片扩展组件3*/
.floor_picture3 { max-width:1440px; margin: 0 auto; }
.picture3 { overflow: hidden; }
.picture3 li{ width: 50%;overflow: hidden; float: left; height:240px; }
.picture3 li .InfoPicture{ float:right; width:50%; height:100%; background:url(../images/xxx.png) no-repeat center; background-size:cover; }
.picture3 li .InfoWrap{ float:left; width:50%; height:100%; text-align:center; position:relative; padding:20px 20px 0; box-sizing:border-box; }
.picture3 li .InfoWrap .x_line { position:absolute; top:50%; left:auto; right:-21px; width:30px; height:30px; margin-top:-15px;  font-size:30px; }
.picture3 li .InfoWrap .x_line2 { display:none; }
.picture3 li .InfoWrap .InfoTitle{ font-size:18px; margin:30px 0 20px; }
.picture3 li .InfoWrap .InfoSContent{ font-size:14px; line-height:1.8em; }
.picture3 li.m2 .InfoPicture, .picture3 li.m3 .InfoPicture { float:left; }
.picture3 li.m2 .InfoWrap .x_line, .picture3 li.m3 .InfoWrap .x_line { left:-21px; right:auto; }
.picture3 li.m2 .InfoWrap .x_line1, .picture3 li.m3 .InfoWrap .x_line1 { display:none; }
.picture3 li.m2 .InfoWrap .x_line2, .picture3 li.m3 .InfoWrap .x_line2 { display:block; }
/*图片扩展组件4*/
.floor_picture4 { max-width:1440px; margin: 0 auto; padding: 0 10px; position:relative; }
.floor_picture4 .pagination .prev,.floor_picture4 .pagination .next{ position: absolute; left:50px; right:auto; width:70px; height:70px; line-height:70px; text-align:center; font-size:36px; top: 0; bottom: 0; margin: auto; cursor: pointer; border: 1px solid #999; border-radius:100%; color:#999; }
.floor_picture4 .pagination .next{ left: auto; right:50px; }
.floor_picture4 .pagination .prev:active,.floor_picture4 .pagination .next:active{ box-shadow: 0 0 10px rgba(0,0,0,.1) inset; }
.picture4 { position:relative; padding:0 0 50px; overflow:hidden; }
.picture4 {  }
.picture4 li {  }
.picture4 li .InfoPicture { float:left; margin-right:20px; max-width:50%; }
.picture4 li .InfoPicture img { max-width:100%; width:auto; }
.picture4 li .InfoWrap { overflow:hidden; }
.picture4 li .InfoTitle { padding:10px 0; font-size:24px; line-height:50px; margin-bottom:20px; position:relative; }
.picture4 li .InfoTitle:before { content:""; position:absolute; bottom:0; left:0; width:30%; height:1px; background:#ddd; }
.picture4 li .InfoSContent { font-size:16px; color:#888; line-height:2em; }
.picture4 li .more_btn { margin-top:20px; }
.picture4 .swiper-pagination { bottom:0; }
.picture4 .swiper-pagination-switch { border-color:#ccc; background:#ccc; width:12px; height:12px; margin:0 10px; }
.picture4 .swiper-active-switch { border-color:#888; background:#888; }
.right-picture4 li .InfoPicture{ float: right; margin-left: 15px; margin-right: 0; }
/*图片扩展组件5*/
.floor_picture5 { max-width:1440px; margin:0 auto; }
.picture5 {  }
.picture5 {  }
.picture5 li {  }
.picture5 li .InfoPicture{ background:url(../images/xxx.png) no-repeat center; background-size:cover; }
.picture5 li .InfoWrap { padding:8% 5% 0; box-sizing:border-box; overflow:hidden; }
.picture5 li .num { font-size:40px; text-align:center; margin-bottom:10px; }
.picture5 li .InfoTitle { font-size:20px; margin:0 0 10px; text-align:center; }
.picture5 li .InfoSContent { font-size:14px; line-height:1.8em; max-height:5.4em; overflow:hidden; }
/*图片扩展组件6*/
.floor_picture6 { max-width: 1440px; margin:0 auto; }
.picture6 {  }
.floor_picture6 .component_title { float:left; width:33.33%; padding:50px 25px 0; text-align:right; box-sizing:border-box; }
.floor_picture6 .component_title h2 { font-size:24px; text-align:right; color:inherit; }
.floor_picture6 .component_title h2.h2_2:before{ right: 0; margin: 0; left: auto; }
.floor_picture6 .component_title p { font-size:18px; margin:20px 0; text-align:right; color:inherit; }
.floor_picture6 .pagination .prev, .floor_picture6 .pagination .next{ display:inline-block; *zoom:1; *display:inline; width:40px; height:40px; line-height:40px; text-align:center; font-size:20px; margin:0 0 0 20px; cursor: pointer; border:1.5px solid #fff; color:#fff; font-weight:bold; }
.floor_picture6 .component_body { float:left; width:66.66%; }
.picture6 li { width:430px; }
.picture6 li a { width:400px; display:block; height:100%; position:relative; margin-left:30px; overflow:hidden; }
.picture6 li .InfoPicture { height:100%; }
.picture6 li .InfoWrap { position:absolute; left:0; bottom:100%; width:100%; height:100%; padding:50px 30px 30px; box-sizing:border-box; background:#000; background:rgba(0,0,0,.8); color:#fff; transition-duration:.5s; z-index:10; }
.picture6 li .InfoWrap .view { text-align:center; margin-top:15px; }
.picture6 li h4 { position:absolute; bottom:0; left:0; width:320px; margin:0 40px; line-height:44px; text-align:center; font-size:16px; padding:0 0px; box-sizing:border-box; transition-duration: .5s; }
.picture6 li h4 div { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; position:relative; z-index:4; }
.picture6 li h4:before { background-color:rgb(17, 107, 196); bottom:0px; content:""; height:100%; left:-25px; position:absolute; transform:skewX(-40deg); width:50px; z-index:2; transition-duration:.5s; }
.picture6 li h4:after { background-color:rgb(17, 107, 196); bottom:0px; content:""; height:100%; position:absolute; right:-25px; transform:skewX(40deg); width:50px; transition-duration:.5s; }
.picture6 li .InfoWrap:before { background-color:rgba(0,0,0,.8); bottom:-50px; content:""; height:50px; left:-25px; position:absolute; transform:skewX(-40deg); -webkit-transform:skewX(-40deg); width:40px; }
.picture6 li .InfoWrap:after { background-color:rgba(0,0,0,.8); bottom:-50px; content:""; height:50px; right:-25px; position:absolute; transform:skewX(40deg); -webkit-transform:skewX(40deg); width:40px; }
.picture6 li:hover .InfoWrap { bottom:0; }
.picture6 li:hover h4 { background-color:#000 !important; color: #FFF !important; }
.picture6 li:hover h4:before,.picture6 li:hover h4:after { background-color:#000 !important; }
/*图片扩展组件8*/
.floor_picture8 { max-width: 1440px; margin:0 auto; }
.picture8 { overflow:hidden; }
.component .picture8 .col2{ width:540px; }
.component .picture8 .col3{ width:360px; }
.component .picture8 .col4{ width:270px; }
.component .picture8 .col5{ width:216px; }
.floor_picture8 .component_title { float:left; width:25%; padding:20px; box-sizing:border-box; }
.floor_picture8 .component_title h2 { width:100%; }
.floor_picture8 .component_title h2.h2_2:before{ right: 0; margin: 0; left: auto; }
.floor_picture8 .component_title p { width:100%; margin:0px 0 20px; padding:0; }
.floor_picture8 .pagination { width:100%; }
.floor_picture8 .pagination .prev, .floor_picture8 .pagination .next{ display:inline-block; text-align:center !important; font-size:20px !important; font-weight:normal !important; font-style:normal !important; border:1px solid #ccc; border-radius:50%; width:40px; height:40px; line-height:40px; margin:0 10px; cursor: pointer; }
.floor_picture8 .component_body { float:left; width:75%; }
.picture8 li {  }
.picture8 li a { display:block; position:relative; margin:4%; overflow:hidden; box-shadow:rgba(0,0,0,.2); position:relative; }
.picture8 li a:before { position:absolute; content:""; bottom:0; left:0; width:100%; height:3px; }
.picture8 li:hover a:before { height:0; }
.picture8 li .InfoPicture {  }
.picture8 li .InfoWrap { padding:5%; box-sizing:border-box; transition-duration:.5s; z-index:10; }
.picture8 li .InfoWrap .InfoSContent { margin-top:10px; }
.picture8 li .InfoWrap .more { margin-top:10px; }
.picture8 li .InfoWrap .more span { display:inline-block; text-align:center; }
.picture8 li h4 { margin:0 40px; text-align:center;padding:0 0px; box-sizing:border-box; transition-duration: .5s; }
.picture8 li h4 div { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; position:relative; z-index:4; }
/*图片扩展组件9*/
.floor_picture9{ max-width: 1440px; margin: 0 auto; }
.floor_picture9 .component_title div { overflow-x:auto; }
.floor_picture9 .tabbar{ text-align: center; margin:5px 0 25px; white-space:nowrap; }
.floor_picture9 .tabbar li{ display: inline-block; margin: 0; white-space:normal; }
.floor_picture9 .tabbar li a{ display: block; padding:25px 50px; transition-duration: .3s; box-sizing:border-box; }
.floor_picture9 .tabbar li img { max-width:100px; margin-bottom: 2px; }
.floor_picture9 .tabbar li a:hover{ opacity: .7; }
.floor_picture9 .component_body { box-sizing:border-box; }
.picture9 li { transition-duration: .5s; float:left; width:25%; box-sizing:border-box; }
.picture9 li.n1 { width:50%; }
.picture9 li a{ display:block; overflow:hidden; transition-duration:.5s; position:relative; }
.picture9 li .InfoPicture{ width:100%; background:none; }
.picture9 li .InfoPicture img { background:none; }
.picture9 li.n1 {  }
.picture9 li .InfoWrap { position:absolute; left:5%; width:90%; height:90%; top:40%; opacity:0; transition-duration:.5s; display:flex; align-items:center; justify-content:center; }
.picture9 li.n1 .InfoWrap { left:auto; right:-100%; margin-right:85px; top:auto; bottom:0; width:100%; height:60px; opacity:1; background:#f00; color:#fff; text-align:left; display:block; }
.picture9 li.n1 .InfoWrap .theicon { display:inline-block; width:85px; height:60px; line-height:60px; font-size:40px; position:relative; vertical-align:middle; text-align:center; }
.picture9 li.n1 .InfoWrap .InfoTitle { display:inline-block; width:calc(100% - 170px); vertical-align:middle; line-height:60px; }
.picture9 li.n1:hover .InfoWrap .InfoTitle { border:0;  }
.picture9 li.n1:hover .InfoWrap { right:-85px; top:auto; }
.picture9 li.n1 .InfoWrap .ydicon-left3 { display:none; }
.picture9 li.n1:hover .InfoWrap .ydicon-right3 { display:none; }
.picture9 li.n1:hover .InfoWrap .ydicon-left3 { display:inline-block; }
.picture9 li a:hover .InfoWrap { top:5%; opacity:1; }
.picture9 li .InfoWrap>div {  }
.picture9 li .InfoChannel{  }
.picture9 li .InfoTitle{ border:1px solid #fff; border-left:0; border-right:0; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.picture9 li.n1 .InfoTitle { border:0; }
.picture9 .contact { float:left; display:block; width:50%; position:relative; box-sizing:border-box; }
.picture9 .contact img.Picture { display:block; width:100%; }
.picture9 .contact .contact_content { position:absolute; top:20%; left:10%; width:80%; height:80%; overflow:hidden; }
/*图片扩展组件10*/
.floor_picture10{ position: relative; max-width: 1440px; margin: 0 auto; }
.picture10{ overflow: hidden; }
.picture10 li { float: left; transition: all ease-in .3s; }
.picture10.show_num3 li { width:25%; }
.picture10.show_num3 li.n2 { width: 50%; }
.picture10.show_num3 li.on { width:50%; }
.picture10.show_num5 li { width:16.6%; }
.picture10.show_num5 li.n3 { width: 33.6%; }
.picture10.show_num5 li.on { width:33.6%; }
.picture10.show_num7 li { width:12.5%; }
.picture10.show_num7 li.n4 { width: 25%; }
.picture10.show_num7 li.on { width:25%; }
.picture10 li a{ display: block; }
.picture10 li .InfoTitle{ padding: 8px 10px 6px; white-space: nowrap; overflow: hidden; text-align: left; text-overflow: ellipsis; transition-duration: .5s; }
.picture10 li .InfoPicture { overflow: hidden; }
.picture10 li .InfoPicture img{ width: auto; transition-duration: .5s; }
.picture10.show_shadow1 li .InfoPicture{ position: relative; }
.picture10.show_shadow1 li .InfoPicture:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.7); transition: all ease-in .3s; }
.picture10.show_shadow1 li.on .InfoPicture:before { opacity: 0; }
.picture10 li.on .InfoTitle { text-align: center; }
/*==========图片扩展模型 结束==========*/