@import url("reset.css");
/*public*/
body{font-family:Microsoft YaHei,Segoe UI,Tahoma,Arial,Verdana,sans-serif;font-size:14px;color:#666;background:#fff;}
a{text-decoration:none;}
a:hover{color:#39f;text-decoration:none;}
u{text-decoration:none;}
img{vertical-align: middle;}
.clear{clear:both;}
.w1400{width:100%;max-width:1400px;margin:0 auto;}

header{width: 100%;min-height: 50px;opacity: 0.8;background: #111;position: fixed;top: 0;z-index: 999;}
.header{display: flex;align-items: flex-end;justify-content: space-between;}
.logo{flex: 0 0 35%;}
.logo img{max-width:280px;margin-top: 5px;}
.nav{padding-right: 20px;}
.nav li{height:80px;background:url(../images/nav_ico.png) no-repeat;}
.nav li:hover a{font-weight: bold;color:#39f;transition: all 0.5s ease;}
.nav .home{border-left:none;background-position:10px 0}
.nav .about{background-position:10px -78px}
.nav .service{background-position:10px -156px}
.nav .cases{background-position:10px -234px}
.nav .client{border-right:none;background-position:10px -312px}
.nav li a{display:block;width:80px;height:40px;padding-left:40px;margin:20px 5px 0 5px;font-size:14px;color:#fff;transition: all 0.5s ease;}
.nav li span{display:block;color:#999;font-size:11px;-webkit-text-size-adjust:none;}
#nav ul {display: flex;list-style: none;padding: 0;margin: 0;}  
#nav ul li a {display: block;}  
#navToggle{width: 30px;display: none;position: absolute;right:10px;top:5px;}
#nav.active ul {  
    display: flex;  
    flex-direction: column;  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 50%;  
    height: 100%;  
    background-color:#000;  
    overflow-y: auto;
    z-index: 999;
}  
  
#nav.active ul li a {color: #fff;}


#banner{
		width:100%;
		height: auto;
		overflow:hidden;
		position:relative;}
.swiper-container {
        width: 100%;
        height: auto;
		position:absolute;
    }
.swiper-slide .detail{
		height:90px;
		background:rgba(0,0,0,.7);
		position:absolute;
		width:100%;
		bottom:0;
		color:#fff;
		opacity:0;
		transition:opacity .3s .3s;
    }
.swiper-slide-active .detail{opacity:1;}
.swiper-slide .detail h3{font-size: 20px;width:100%;max-width:1400px;margin:15px auto 0;}
.swiper-slide .detail p{width:100%;max-width:1400px;;margin:5px auto 0;}
.swiper-slide .detail p span{width:100%;display:block;}
.effect1 img{
		transform:scale(1.25,1.25) translate(10%,10%);
		transform:scale(1.1,1.1) translate(4.545%,4.545%);
		/*tr     =    (sc-1)/2sc*100%              */
        /* --1.25       0.25/2.5*100%=10%          */
		}
		
.leftUp img{-webkit-animation-name:leftUp;animation-name:leftUp;}
@-webkit-keyframes leftUp{
    0%{transform:scale(1.1,1.1) translate(4.545%,4.545%);}
    100%{transform:scale(1.1,1.1)  translate(-4.545%,-4.545%);}
}
@keyframes leftUp{
    0%{transform:scale(1.1,1.1) translate(4.545%,4.545%);}
    100%{transform:scale(1.1,1.1)  translate(-4.545%,-4.545%);}
}

.moveRight img{-webkit-animation-name:moveRight;animation-name:moveRight;}
@-webkit-keyframes moveRight{
    0%{transform:scale(1.1,1.1) translate(-4.545%,0);}
    100%{transform:scale(1.1,1.1)  translate(4.545%,0);}
}
@keyframes moveRight{
    0%{transform:scale(1.1,1.1) translate(-4.545%,0);}
    100%{transform:scale(1.1,1.1)  translate(4.545%,0);}
}

.moveDown img{-webkit-animation-name:moveDown;animation-name:moveDown;}
@-webkit-keyframes moveDown{
    0%{transform:scale(1.1,1.1) translate(0,-4.545%);}
    100%{transform:scale(1.1,1.1)  translate(0,4.545%);}
}
@keyframes moveDown{
    0%{transform:scale(1.1,1.1) translate(0,-4.545%);}
    100%{transform:scale(1.1,1.1)  translate(0,4.545%);}
}

.centerBig img{-webkit-animation-name:centerBig;animation-name:centerBig;}
@-webkit-keyframes centerBig{
    100%{transform:scale(1.1,1.1);}
}
@keyframes centerBig{
    100%{transform:scale(1.1,1.1);}
}

.rightDownBig img{-webkit-animation-name:rightDownBig;animation-name:rightDownBig;}
@-webkit-keyframes rightDownBig{
    100%{transform:scale(1.1,1.1) translate(4%,4%);}
}
@keyframes rightDownBig{
    100%{transform:scale(1.1,1.1) translate(4%,4%);}
}

.swiper-slide img{
    width:100%;
    height: auto;
	animation-duration:5s;
	animation-timing-function:linear;
	animation-fill-mode: forwards;
	-webkit-animation-duration:5s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-fill-mode: forwards;
	}	
.swiper-pagination{
	bottom:60px;
	right:15%;
	}
.swiper-pagination-bullet{
	width:20px;
	height:20px;
	background:#fff;
	margin:0 5px;
	}

#about{width:100%;background-color:#fff;margin:50px auto;}
.about img{padding: 0 40px;width: 22%;float: right;}
.about h1{font-size:22px;font-weight: bold;}
.about span{font-size: 8vw;color: rgb(101 101 101 / 8%);;position: absolute;}
.about p{text-indent: 4ch;padding:1% 2%;line-height: 30px;}
.about h3{padding:0 2% 1%;line-height: 40px;}
.about h3 a{
    color:#666;
    padding: 6px 10px;
    border-bottom: 1px #ccc solid;
    border-top: 1px #fff solid;
    border-left: 1px #fff solid;
    border-right: 1px #fff solid;
    box-shadow: 5px 5px 5px #c3c3c3;
    margin: 0 4px;
    white-space: nowrap;
    background-color: transparent;
    background-image: linear-gradient(to right, rgb(51 155 255) 0%, rgb(51 155 255) 100%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    color: currentcolor;
    transition: background-size 0.15s ease-out, color 0.15s ease-out;
}
.about h3 a:hover{border: 1px #39f solid;background-size: 100% 100%;color: rgb(255, 255, 255);}
#search{padding:2% 0;animation: gradientBG 5s infinite alternate ease-in-out;}
@keyframes gradientBG {
  0%   { background-image: linear-gradient(to right, #0091ff, #003272); }
  50%  { background-image: linear-gradient(to left, #0091ff, #003272); }
  100% { background-image: linear-gradient(to right, #0091ff, #003272); }
}
.searchform{margin: 20px auto;width:50%;}
.searchform form{display: flex;justify-content: center;}
.searchform .text{height: 33px;width: 78%;}
.searchform .submit{height: 37px;width: 20%;}
#cases{margin:50px auto;width:100%;background-color:#fff;}
.boxtitle{margin-bottom: 20px;border-bottom: 1px #ccc solid;display: flex;align-items: center;}
.boxtitle .box1{flex: 0 0 20%;min-width: 140px;max-width: 260px;}
.boxtitle .box1 h1{font-size:22px;}
.boxtitle .box1 h2{font-size:22px;}
.boxtitle .box1 strong{color:#999;}
.boxtitle .box2 {flex: 1 1 auto;}
.boxtitle .box2 p{font-size: 12px;color: #999;}
.boxtitle .box3 {flex: 1 1 20%;text-align: right;}
.boxtitle .box3 a{color:#999;font-size:22px;background-color: transparent;
background-image: linear-gradient(to right, rgb(51 155 255) 0%, rgb(51 155 255) 100%);
background-repeat: no-repeat;
background-size: 0% 100%;
transition: background-size 0.15s ease-out, color 0.15s ease-out;}
.boxtitle .box3 a:hover{background-size: 100% 100%;color: rgb(255, 255, 255);}
.boxtitle .box4 {flex: 1 1 20%;text-align: right;}
.boxtitle .box4 a{color:#999;font-size:12px;}
.innavtitle {margin-bottom: 20px;display: flex;align-items: center;gap: 10px;}
.innavtitle .box1{flex: 0 0 20%;min-width: 140px;max-width: 260px;}
.innavtitle .box1 h1{font-size:28px;}
.innavtitle .box1 h2{font-size:28px;}
.innavtitle .box1 strong{color:#999;}
.innavtitle .box2 {flex: 1 1 auto;}
.innavtitle .box2 p{font-size: 12px;color: #999;}
.inmbx {margin-bottom: 20px;display: flex;align-items: center;}
.inmbx .box4 {flex: 1 1 20%;}
.inmbx .box4 a{color:#999;font-size:12px;}

.progrid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 50px;
    justify-items: center;
}
.progrid li{
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    -moz-box-shadow: 5px 5px 5px #888888;
    box-shadow: 5px 5px 5px #888888;
}
.progrid li:first-child,.progrid li:nth-child(11){
    grid-column: span 2; /* 第一个子元素占据2列 */
    grid-row: span 2; /* 第一个子元素占据2行 */
    height: 380px;
}
.progrid li img{
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    transform: scale(1);
    transition: transform 1s ease 0s;
}
.progrid li:hover img{
    overflow: hidden;
    cursor: pointer;
    transition: all 1s linear;
    transform: scale(1.08);
}
#brand{padding: 50px 0;}
.brand-nav{display: flex;justify-content: space-around;align-items: center;margin-bottom:20px;}
.brand-nav a{
    text-align: center;
    width: 100%;
    font-size: 16px;
    color: #999;
    border-top: 1px #ededed solid;
    border-bottom: 1px #ededed solid;
    border-left: 1px #ededed solid;
    border-right: 1px #fff solid;
    padding: 15px 0;
    white-space: nowrap;
    overflow: hidden;
    transition: all 0.5s ease;}
.brand-nav a:last-child{border-right: 1px #ededed solid;}
.brand-nav a:hover{color: #fff;border: 1px #39f solid;background-color:#39f;transition: all 0.5s ease;}

.bragrid{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 20px;
    justify-items: center;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 50px;
}
.bragrid li{
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;
    -moz-box-shadow: 5px 5px 5px #888888;
    box-shadow: 5px 5px 5px #888888;
}
.bragrid li:first-child,.bragrid li:nth-child(6),.bragrid li:nth-child(11){
    grid-column: span 2; /* 跨越2列 */
    grid-row: span 2; /* 跨越2行 */
    height:320px;
}
.bragrid li img{
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    transform: scale(1);
    transition: transform 1s ease 0s;
}

.bragrid li:hover img{
    overflow: hidden;
    cursor: pointer;
    transition: all 1s linear;
    transform: scale(1.08);
}
.brandtext{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.5s ease;
    text-align: center;
    background-color: #000c;
    padding:4px;}
.brandtext h3 a{color:#fff;}
.brandtext p{font-size:12px;}
.progrid li:hover .brandtext{visibility: visible;opacity: 1.0;cursor: pointer;}
.progrid li:hover .brandtext h3 a{color:#39f;}
.bragrid li:hover .brandtext{visibility: visible;opacity: 1.0;cursor: pointer;}
.bragrid li:hover .brandtext h3 a{color:#39f;}

#news{background:#DBDBDB;padding: 50px 0;}
.news-nav{display: flex;justify-content: space-around;align-items: center;gap:1px}
.news-nav a{
    text-align: center;
    width: 100%;
    font-size: 16px;
    color: #999;
    border-top: 1px #fff solid;
    border-bottom: 1px #ededed solid;
    border-left:1px #fff solid;
    border-right:1px #fff solid;
    padding: 15px 0;
    white-space: nowrap;
    overflow: hidden;
    background-color: #fff;
    transition: all 0.5s ease;}
.news-nav a:hover{color: #fff;border: 1px #39f solid;background-color:#39f;transition: all 0.5s ease;}
#news .newsdata{background:#fff;width: 100%;max-width: 1400px;margin:0 auto;}
.newsgrid{
    display: grid;
    grid-template-columns: 50% 50%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 20px;
}
.newsgrid .newslist{
    display: flex;
    align-items: center;
    background: linear-gradient(to left, transparent 50%, #39f 50%);
    background-size: 200% 100%;
    background-position: right;
    transition: background-position 0.5s ease-in-out;
    border-top: 1px #fff solid;
    border-left: 1px #ededed solid;
    border-right: 1px #ededed solid;
    border-bottom: 1px #ededed solid;
}
.newsgrid .newslist:nth-child(even){border-left: 1px #fff solid;}
.newsgrid .newslist:nth-of-type(1){border-top: 1px #ededed solid;}
.newsgrid .newslist:nth-of-type(2){border-top: 1px #ededed solid;}
.newsgrid .newslist a{
    width: 85%;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 20px;
    margin-right: 20px;
    line-height: 50px;
    color: #737373;
    transition: 0.5s ease, transform 1s ease-in-out;
}
.newsgrid .newslist span{min-width: 66px;margin-right: 20px;white-space: nowrap;}
.newsgrid .newslist:hover{
    background-position: left;
    border-bottom: 1px #39f solid;
    transition: 0.5s ease, transform 1s ease-in-out;
}
.newsgrid .newslist:hover a{
    color:#fff;
    transition: 0.5s ease, transform 1s ease-in-out;
}
.newsgrid .newslist:hover span{
    color:#fff;
    transition: 0.5s ease, transform 1s ease-in-out;
}


#innerbanner{width: 100%;max-width: 1400px;margin:120px auto 0;border-bottom: 1px solid #d8d9d8;}
#singlepage{margin:0 auto 50px;width: 100%;max-width: 1400px;}
#artpage{display: flex;
    margin: 0 auto;
    width: 100%;
    max-width: 1400px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;}
.pagetitle{border-bottom: 1px #ccc dotted;margin-bottom: 20px;}
.pagetitle h1{font-size:22px;font-weight: bold;}
.pagetitle h2{font-size:18px;padding-bottom:22px;font-weight: bold;}
.pagetitle p{color:#999;text-align:right;}
.pagecont{padding:20px;}
.pagecontent{margin-bottom:50px;line-height:22px;}
.pagecontent h2 {font-size:18px;padding:20px 0 10px 0;font-weight: bold;}
.pagecontent h3 {font-size:16px;padding:20px 0 10px 0;font-weight: bold;}
.pagecontent h4 {font-size:16px;padding:20px 0 10px 0;font-weight: bold;}
.pagecontent p{padding-bottom:12px;line-height:24px;}
.pagecontent p a{color:#666;}
.pagecontent a{color:#666;}
.pagecontent img{display: block;margin: 20px auto;overflow:hidden;max-width: 80%;height: auto;}
.pagecontent strong{font-weight: bold !important;}
.pagecontent ul{padding-bottom:10px;}
.pagecontent ul li{text-indent: 2em;}
.pagecontent ul li p{padding:0;}
.pagecontent ol{padding-bottom:10px;}
.pagecontent ol li{text-indent: 2em;}
.pagecontent ol li p{padding:0;}
.pagecontent table {width: 100%;border-collapse: collapse;font-size: 12px;margin-bottom:20px;}
.pagecontent th, td {padding: 8px 14px;text-align: left;border-bottom: 1px solid #e5e7eb;}
.pagecontent .firstRow, .pagecontent th {background-color: #f9fafb;font-weight: 600;color: #374151;}
.pagecontent tbody tr:hover {background-color: #f3f4f6;}
.pagecontent table p{padding-bottom:0;line-height:1.2;letter-spacing: 0;word-spacing: 0;text-align: left;}
.pagesm{padding:20px 0;border: 2px #ededed dotted;transition: all 0.8s ease-in-out;}
.pagesm h4{color:#ccc;padding-bottom: 10px;}
.pagesm p{font-size:12px;color:#ccc;padding: 5px 10px;}
.pagesm:hover{background-color: #666;border: 2px #666 dotted;transition: all 0.8s ease-in-out;}
.artpagecont{padding:20px 20px 50px 20px;flex: 0 0 65%;border-right: 1px dotted #ccc;}
.artpageright{padding: 20px;flex: 1;}
.artinfo {border-bottom: 1px solid #d8d9d8;margin-bottom: 20px;padding-bottom: 20px;}
.artinfo img {width:100%;height:auto;}
.artinfo ul{padding-top: 20px;}
.artinfo ul li {padding-bottom:10px;letter-spacing: 1px;word-spacing: 1px;text-align: justify;}
.artinfo ul li a {color:#666;}
.artinfolike {display: grid;grid-template-columns: repeat(2, 1fr);grid-gap: 20px;margin-bottom: 20px;}
.artinfolike .liketeam{position: relative;height: 120px;border: 1px #ccc solid;}
.artinfolike .liketeam img{
    max-width: 92%;
    max-height: 92%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    transition: transform 1s ease 0s;
}
.artinfolike .liketeam:hover img{transform: scale(1.05);transition: transform 1s ease 0s;}
.artinfolist li{height:32px;line-height:32px;white-space: nowrap;overflow: hidden;background-color: transparent;
    background-image: linear-gradient(to right, rgb(51 155 255) 0%, rgb(51 155 255) 100%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.15s ease-out, color 0.15s ease-out;}
.artinfolist li a{color:#999;}
.artinfolist li:hover{background-size: 100% 100%;color: rgb(255, 255, 255);}
.artinfolist li:hover a{color:#fff;transition: transform 0.15s ease-out;}
.related{padding-bottom:15px;}
.related p{line-height:30px;}
.related p:hover{padding-left:5px;cursor:pointer;}
.related p a{padding-left:5px;}
.related h3{line-height: 40px;height:40px;font-size:14px;border-top:1px dotted #ccc;border-bottom:1px dotted #ccc;margin-bottom:10px;}
.related ul{padding-left:20px}
.related li{height:36px;line-height:40px;list-style-type:disc;width: 50%;float: left;white-space: nowrap;overflow: hidden;}
.related li a{font-size: 12px;color:#999;padding: 4px;margin: 4px;
background-color: transparent;
background-image: linear-gradient(to right, rgb(51 155 255) 0%, rgb(51 155 255) 100%);
background-repeat: no-repeat;
background-size: 0% 100%;
transition: background-size 0.15s ease-out, color 0.15s ease-out;}
.related li a:hover{background-size: 100% 100%;color: rgb(255, 255, 255);}
.artfooter{background: #f5f4f4;border-top: 1px solid #d8d9d8;padding: 15px 0;margin-top: 50px;}
.artfooter .back{display: flex;justify-content: center;height: 20px;line-height: 20px;}
.artfooter .back a {color:#39f;}
.backico{margin: 0 auto;
    width: 20px;
    overflow: hidden;
    background: url(../images/sprite_arrows.png) 0 -40px no-repeat;
}
.backico:hover {background-position: -20px -40px;}
.fiexd-right{position: sticky;top: 80px;z-index: 1;}
.pagelike{
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin-bottom: 50px;
}
.pagelike h2{
    text-align: center;
    width: 80px;
    color: #fff;
    padding: 20px;
    font-size: 16px;
    font-weight: bold;
    border: 1px #39f solid;
    background-color: #39f;
    transition: all 0.5s ease;
}
.pagelike p{
    font-weight: bold;
    font-size: 22px;
    line-height: 32px;
    width: 85%;
    text-align: center;
    border: 1px #39f solid;
    padding: 40px 0;
    position: relative;
    left: 30px;
    top: -20px;
    transition: all 0.5s ease;
}
.pagelike p a{
    display: inline-block;
    width: 95px;
    font-size: 16px;
    color: #666;
    border: 1px #ccc solid;
    white-space: nowrap;
    margin-right: 12px;
    margin-bottom: 12px;
    transition: all 0.5s ease;
}

.container {display: flex;}
.column {flex: 1;}
.first-column {display: flex;flex-direction: column;justify-content: space-around;gap: 20px;}
.first-column .one:hover h2{border: 1px #39f solid;background-color: #fff;color: #666;}
.first-column .one:hover p{background-color:#39f;color:#fff;}
.first-column .one:hover p a{border: 1px #fff solid;color: #fff;}
.first-column .two:hover h2{border: 1px #39f solid;background-color: #fff;color: #666;}
.first-column .two:hover p{background-color:#39f;color:#fff;}
.first-column .two:hover p a{border: 1px #fff solid;color: #fff;}

.second-column {text-align: center;padding: 20px;}
.second-column .column-img{width:100%}
.second-column .column-img img{width:50%}


.innav{font-size:12px;padding:10px 0;margin-bottom: 20px;border-bottom: 1px solid #d8d9d8;}
.innav li{display: inline-block;width: 110px;margin: 2px;}
.innav li a{
    display:block;
    background-image:-webkit-gradient(linear,left top,left bottom,from(#e9e9e9),to(#d5d5d5));
    -webkit-user-select:none;
    background-color:#e9e9e9;
    background-image:-webkit-linear-gradient(top,#e9e9e9,#d5d5d5);
    background-image:linear-gradient(top,#e9e9e9,#d5d5d5);
    background-image:-o-linear-gradient(top,#e9e9e9,#d5d5d5);
    border:1px solid #dcdcdc;
    border:1px solid rgba(0, 0, 0, 0.1);
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    color:#666;
    height:29px;
    line-height:29px;
    min-width:54px;
    padding:0 8px;
    text-align:center;}
.innav li a:hover{
    color: #fff;
    background-color:#3399ff;
    background-image:-webkit-gradient(linear,left top,left bottom,from(#0077ff),to(#3399ff));
    background-image:-webkit-linear-gradient(top,#0077ff,#3399ff);
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.1);
    background-image:linear-gradient(top,#0077ff,#3399ff);
    background-image:-o-linear-gradient(top,#0077ff,#3399ff);
    border:1px solid #3399ff;
    box-shadow:0 1px 1px rgba(0,0,0,0.1);
    text-decoration:none;}
.innav .cur{
    color: #fff;
    background-color:#3399ff;
    background-image:-webkit-gradient(linear,left top,left bottom,from(#0077ff),to(#3399ff));
    background-image:-webkit-linear-gradient(top,#0077ff,#3399ff);
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.1);
    background-image:linear-gradient(top,#0077ff,#3399ff);
    background-image:-o-linear-gradient(top,#0077ff,#3399ff);
    border:1px solid #3399ff;
    box-shadow:0 1px 1px rgba(0,0,0,0.1);
    text-decoration:none;}
    
#newslist .list{
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    grid-gap: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin-bottom: 50px;
}
#newslist .list .listitem{padding: 20px;border: 1px #ccc solid;transition: transform 1s ease 0s;}
.listitem .item{display: flex;}
.listitem .item .itemimg{flex: 0 0 25%;margin-right: 20px;}
.listitem .item .itemimg img{transform: scale(1);transition: transform 0.5s ease 0s;max-height: 200px;}
.listitem .item .itemcont{flex: 1;}
.listitem .item .itemcont h3{font-size:18px;font-weight:bold;color:#444;padding-bottom: 8px;}
.listitem .item .itemcont span{font-size:12px;color:#999;}
.listitem .item .itemcont p{font-size:12px;color:#999;padding-top: 8px;}
#newslist .list .listitem:hover{box-shadow: 5px 5px 5px #888888;transition: transform 1s ease 0s;}
#newslist .list .listitem a:hover .item .itemimg img{overflow: hidden;transition: all 0.5s linear;transform: scale(1.08);}


.contact{display: grid;grid-template-columns: repeat(4, 1fr);gap:20px;}
.contact .item{padding:20px;border: 1px solid #d8d9d8;
    background-color: transparent;
    background-image: linear-gradient(to right, rgb(51 155 255) 0%, rgb(51 155 255) 100%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.15s ease-out, color 0.15s ease-out;
}
.contact .item p{text-align:right;}
.contact .item:hover{background-size: 100% 100%;color: rgb(255, 255, 255);border: 1px solid #39f;}
.contact .item:hover h3{color:#fff;}
.contact .item:hover p{color:#fff;}
.msg{padding:20px;}
#company{width:100%;height:75%;border:1px solid #e4e4e4;}
#name{width:100%;height:75%;border:1px solid #e4e4e4;}
#mobile{width:100%;height:75%;border:1px solid #e4e4e4;}
#text{width:100%;height:80%;border:1px solid #e4e4e4;}
#checkcode{width:50%;border:1px solid #e4e4e4;}
.div_inp{height:50px;width:100%;margin-bottom:15px;}
.div_textarea{height:120px;width:100%;margin-bottom:15px;}
.div_check{height:50px;width:50%;margin-bottom:15px;display: flex;}
.btn_tj{text-align:right;margin:50px auto;}
.btn_tj button{color: #fff;background:#357ae8;padding:10px 50px;border:1px solid #3079ed;border-radius:5px;cursor: pointer;cursor: hand;text-decoration:none;}

.footernav{background:#111;height:46px;line-height:46px;border-bottom:1px solid #000;}
.footernav nav{white-space: nowrap;overflow: hidden;}
.footernav nav a{color:#999;margin-right:20px;background-color: transparent;
background-image: linear-gradient(to right, rgb(51 155 255) 0%, rgb(51 155 255) 100%);
background-repeat: no-repeat;
background-size: 0% 100%;
transition: background-size 0.15s ease-out, color 0.15s ease-out;}
.footernav nav a:hover{background-size: 100% 100%;color: rgb(255, 255, 255);}
.footerinfo{padding:10px 0;background:#181818;border-top:1px solid #292929;border-bottom:1px solid #292929;}
.infotext{display: flex;align-items: flex-start;justify-content: space-between;}
.infoone {flex:0 0 10%;min-width: 100px;}
.infoone h2{font-size:22px;}
.infoone h3{font-size:22px;}
.infotwo {flex: 1 1 auto;font-size: 12px;}
.infotwo p{line-height: 2;}
.infothree {flex:0 0 20%;margin-left: auto;text-align: right;}
.infothree img{width:100%;height:auto;}
.footerlink{background:#111;height:46px;line-height:46px;border-bottom:1px solid #000;}
.footyoulink{background: #181818;font-size: 12px;width:100%;}
.footyoulink a{display: inline-block;padding: 0px 10px;line-height: 22px;color: #666;background-color: transparent;
background-image: linear-gradient(to right, rgb(51 155 255) 0%, rgb(51 155 255) 100%);
background-repeat: no-repeat;
background-size: 0% 100%;
color: currentcolor;
transition: background-size 0.15s ease-out, color 0.15s ease-out;}
.footyoulink a:hover{background-size: 100% 100%;color: rgb(255, 255, 255);}
.youlink{float:left;padding:12px 10px;border-bottom: 1px #232323 solid;border-right: 1px #232323 solid;background:#181818;}
.youqq {float:right;background: #181818;}
.youqq a{padding: 2px 0px;color:#fff;background:#ff0000;text-decoration:none;}

.page{text-align:center;padding:10px 0 0 0; margin:0 auto 50px;display: flex;justify-content: center!important;}
.page-num, .page-link {
	position: relative;
	display: block;
	padding: .5rem .75rem;
	margin-left: -1px;
	line-height: 1.25;
	color: #676767;
	background-color: #fff;
	border: 1px solid #dee2e6;
}
a.page-num:hover, .page-link:hover {text-decoration: none;}
.page-num-current {z-index: 1;color: #fff;background-color: #676767;border-color: #676767;}
.page-num-current:hover {color: #fff;}

.tags{margin:0 auto;}
.tags_list{margin-bottom:20px;}
.tags_list .tags_tab{font-size:18px;padding:10px 0;}
.tags_list .tags_tab p{width: 72px;border-bottom:2px solid #D8D8D8;}
.tags_list .tags_lister {margin-bottom:50px;}
.tags_list .tags_lister ul{padding:10px 10px;}
.tags_list .tags_lister a{
    display: inline-block;
	overflow: hidden;
	width: 100px;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	text-align: center;
	color: #555;
	font-family: "microsoft yahei";
	font-weight: 100;
	word-wrap: break-word;
	white-space: nowrap;
	float: left;
	margin: 9px 0 0 9px;
	border-radius: 5px;
	background: #FFF;
	border: 1px solid #D8D8D8;
	-webkit-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.1);
	-moz-transition: .2s ease-in-out;
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;}
.tags_list .tags_lister a:hover {
	text-decoration: none;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
	background: linear-gradient(#5b97f9,#0694f9);
	color: #fff;
	transform: skew(-15deg);
}

.tooltip {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.tooltip .tooltip-text {
	visibility: hidden;
	width: 150px;
	background-color: #555;
	color: #fff;
	text-align: center;
	font-size: 12px;
	border-radius: 5px;
	padding: 5px;
	position: absolute;
	z-index: 1;
	bottom: 100%;
	left: 2px;
	opacity: 0;
	transition: opacity 0.3s;
}

.tooltip:hover .tooltip-text {
	visibility: visible;
	opacity: 1;
}

.index-container {display: flex;flex-direction: column;position: relative;}
.title-item {cursor: pointer;}
.contents1, .contents2 {position: relative;overflow: hidden;height: auto;}
.contents2{padding-bottom: 10px;}
.content-item{position: absolute;
            top: 0;
            left: 0;
            width: 99.6%;
            opacity: 0;
            z-index: -1;
            transition: opacity 0.5s ease;
            display: grid;}
.content-item.visible {opacity: 1;z-index: 1; }
.current{border-bottom: 1px #2196F3 solid !important;}

@media (max-width: 1024px) {  
    #nav ul {display: none;flex-direction: column;}  
    #navToggle {  
        display: block;
        background:url(../images/menu.png) no-repeat;
        background-size: contain;
        border: none;  
        padding:18px 10px;  
        cursor: pointer;  
    }
    header{margin:0 auto;}
    .nav .active{display:contents;}
    .nav .active li{border-bottom: 1px #fff solid;}
}

@media (min-width: 768px) and (max-width: 979px) {
    .progrid{grid-template-columns: repeat(4, 1fr);}
    .bragrid{grid-template-columns: repeat(4, 1fr);}
    #innerbanner{margin: 70px auto 0;}
    .contact{grid-template-columns: repeat(2, 1fr);}
    .artinfolike .liketeam{height: 70px;}
    .container{flex-wrap: wrap;}
    .column{flex: 100%;}
    .second-column .column-img img{width: 80%;}

}
@media (max-width: 767px) {
    .swiper-slide .detail {height:50px;}
    .swiper-slide .detail p{display:none;}
    .progrid{grid-template-columns: repeat(2, 1fr);}
    .newsgrid{grid-template-columns: 100%;}
    .newsgrid .newslist:nth-of-type(2){border-top: none;}
    .newsgrid .newslist:nth-child(even){border-left: 1px #ededed solid;}
    .bragrid{grid-template-columns: repeat(3, 1fr);}
    #innerbanner{margin: 70px auto 0;}
    #newslist .list{grid-template-columns: 100%;padding: 0 20px;}
    .contact{grid-template-columns: repeat(2, 1fr);}
    #artpage{flex-wrap: wrap;justify-content: space-between;}
    .artpagecont{flex: 100%;padding:20px;}
    .artinfolike {grid-template-columns: repeat(4, 1fr);}
    .related li{width:100%;}
    .container{flex-wrap: wrap;}
    .column{flex: 100%;}
    .second-column .column-img img{width: 80%;}
}

@media (max-width: 480px) {
    .swiper-slide .detail {display:none;}
    .searchform {width:80%;}
    .progrid{grid-template-columns: repeat(2, 1fr);}
    .progrid li{height:120px;}
    .boxtitle .box2{display:none;}
    .newsgrid{grid-template-columns: 100%;}
    .newsgrid .newslist:nth-of-type(2){border-top: none;}
    .newsgrid .newslist:nth-child(even){border-left: 1px #ededed solid;}
    .listitem .item .itemcont p{display:none;}
    .bragrid{grid-template-columns: repeat(2, 1fr);}
    .bragrid li{height:100px;}
    #innerbanner{margin: 60px auto 0;}
    .contact{grid-template-columns: 100%;}
    .container{flex-wrap: wrap;}
    .column{flex: 100%;}
    .second-column .column-img img{width: 80%;}
    .news-nav a{font-size:12px;}
    .brand-nav a{font-size:12px;}
    .infotext{flex-direction: column;}
}

#content-wrapper .row {opacity: 1;transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out;}
#content-wrapper .row.hidden {opacity: 0;transform: translateY(50px);border-bottom: none;}
/* 定义一个淡入的动画 */
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  
  25% {
    opacity: 1;
    transform: translateY(0);
  }
}