@charset "utf-8";
/* CSS Document CSS Time:2021-11-08 美易创想 By Dawnlau qq:383978149 */
* {margin: 0;padding: 0;}
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,table,td,img,dl,dt,dd,div{margin: 0;padding: 0;}
ul,ol,li {list-style: none;}

body{color:#4f5050; margin:0px; padding: 0px; font-family:PingFang SC,Microsoft yahei,Arial, Helvetica, sans-serif; background-color:#fff; text-align:left; font-size:14px; line-height:24px; }

/* link */
a {color: #666;text-decoration: none;}
a:hover {color: #c7000d; text-decoration:none;}
img{border:0px;}


/* lei */
.g100{ height:100px; line-height:100px; clear:both; font-size:0px;}
.clear{clear:both; height:0; font-size:0px; line-height:0px; }

.speed1 {

  animation-duration: 1s;/* 动画在几秒内完成 */

  -webkit-animation-duration:0s; /* Safari 和 Chrome */

  animation-delay: 0s;/* 延迟执行动画 */

}



.speed2 {
  animation-duration: 1s;/* 动画在几秒内完成 */
  -webkit-animation-duration:0.2s; /* Safari 和 Chrome */
  animation-delay: 0.3s;/* 延迟执行动画 */
}

.speed3 {
  animation-duration: 1s;/* 动画在几秒内完成 */
  -webkit-animation-duration:0.4s; /* Safari 和 Chrome */
  animation-delay: 0.4s;/* 延迟执行动画 */
}

.speed4 {
  animation-duration: 1s;/* 动画在几秒内完成 */
  -webkit-animation-duration:0.6s; /* Safari 和 Chrome */
  animation-delay: 0.6s;/* 延迟执行动画 */
}

.speed5 {
  animation-duration: 1s;/* 动画在几秒内完成 */
  -webkit-animation-duration:0.8s; /* Safari 和 Chrome */
  animation-delay: 0.8s;/* 延迟执行动画 */
}

.speed6 {
  animation-duration: 1s;/* 动画在几秒内完成 */
  -webkit-animation-duration:1s; /* Safari 和 Chrome */
  animation-delay: 1s;/* 延迟执行动画 */
}

.speed7 {
  animation-duration: 1s;/* 动画在几秒内完成 */
  -webkit-animation-duration:1.2s; /* Safari 和 Chrome */
  animation-delay: 1.2s;/* 延迟执行动画 */
}

.speed8 {
  animation-duration: 1s;/* 动画在几秒内完成 */
  -webkit-animation-duration:1.4s; /* Safari 和 Chrome */
  animation-delay: 1.4s;/* 延迟执行动画 */
}

.speed9 {
  animation-duration: 1s;/* 动画在几秒内完成 */
  -webkit-animation-duration:1.6s; /* Safari 和 Chrome */
  animation-delay: 1.6s;/* 延迟执行动画 */
}



/* 鼠标放上去图片放大效果*/

.imgbox{ position:relative; background:#fff;overflow:hidden; }

.imgbox img{ transition: all 0.46s ease 0s; cursor:pointer;}



/* 鼠标放上出现加号*/

.item_cont{ position: relative; transition: all 0.46s ease 0s; width: 50px; height: 50px; }

.item_cont:hover{-moz-transform:rotate(225deg);-webkit-transform:rotate(180deg);-ms-transform:rotate(225deg);transform:rotate(180deg); }

.closecont{ position: relative; transition: all 0.46s ease 0s; width: 80px; height: 80px; transform:rotate(45deg);}

.line_top{  width: 18px; height: 2px; background: #fff;position: absolute;top: 50%;  left: 50%; margin-left: -9px; }	

.line_bottom{  width:2px; height:18px; background: #fff;position: absolute;top:50%;left:50%;margin-left: -1px;	margin-top: -8px;  }	

.closecont:hover{-moz-transform:rotate(225deg);-webkit-transform:rotate(225deg);-ms-transform:rotate(225deg);transform:rotate(225deg); }




/* header */
#header{ padding:30px 0px; background-color:#fff; font-size:16px; position: fixed; width: 100%; z-index:999; margin-top:0px; animation: gupIn 1s 0.1s both; border-bottom: 1px solid #f2f2f2; backdrop-filter: saturate(180%) blur(3.66667px); background-color: hsla(0,0%,100%,.95);}
#header .logo{ padding-left:70px; float:left;}
#header .menu{ width:500px; margin:0px auto;}
#header .menu a{ margin-right:60px; line-height:36px;}
#banner{ padding-top:96px;}
#menuicon{ display:none;}



/* worklist */
.worktit{ text-align:center; font-size:16px; color:#999; line-height:48px; padding-top:120px; padding-bottom:30px;}
.worktit h1{ font-size:48px; color:#222; font-weight:normal; padding-bottom:20px;}
.worklist{ width:1575px; margin:0px auto; padding-bottom:50px;}

.worklist .bd{ width:1575px;}
.worklist .bd ul a{ color:#aaa;}
.worklist .bd ul .title{ padding:15px 10px;}
.worklist .bd ul li{ margin:0px 30px; float:left; position:relative;  font-size:14px; padding-bottom:60px; border-radius:8px; }
.worklist .bd ul .title h1{ font-size:16px; color:#333; font-weight:normal; }
.worklist .bd ul li .line{ height:2px; background-color: #000; width:0px; transition: all 0.46s ease 0s;}
.worklist .bd ul li .imgbox{ border-radius:8px;}
.worklist .bd ul li img{ width:465px; }
.worklist .bd ul li:hover .imgbox{ background-color:#000; border-radius:8px; box-shadow: 0 20px 40px 0 rgba(0,0,0,.2);}
.worklist .bd ul li:hover .imgbox img{transform: scale(1.05); opacity:0.5; border-radius:8px; }
.worklist .bd ul li:hover .line{ width:100%; transition: all 0.46s ease 0s;}
.worklist .bd ul li:hover{ background:url(../images/item_arr.png) 420px 300px no-repeat;}
.worklist .bd ul li:hover .item_d{ top:131px; opacity: 100;  transition: all 0.46s ease 0s;}
.worklist .item_d{background-color: #000; width: 50px; height: 50px;  text-align: center; border-radius:25px; position:absolute; opacity:0; top:80px; left:50%;  transition: all 0.46s ease 0s; margin-left:-25px;}	

.workmore{ text-align:center; padding-bottom:30px;}
.workmore a{ display:inline-block; width:160px; height:46px; border:#666 1px solid; border-radius:23px; text-align:center; line-height:46px; font-size:16px; transition: all 0.46s ease 0s;}
.workmore a:hover{ background-color:#000; color:#fff; transition: all 0.46s ease 0s; }


/* about */
#about{ background:url(../images/aboutme.png) 210px 154px no-repeat; background-color:#f8f8f8; padding:110px 0px; font-size:14px; line-height:26px; width:100%;}
#about .aboutcont{ width:1000px; margin:0px auto; padding-left:380px;}
#about .aboutleft{ float:left;}
#about .photo,#about .name{ width:200px; }
#about .name{ padding-left:25px; padding-top:20px;}
#about .aboutinfo{ float:right; padding-top:20px;}
#about .aboutinfo h1{ font-size:32px; line-height:32px; padding-bottom:26px; color:#222;}
#about .aboutinfo h2{ font-size:16px; font-weight:normal; line-height:16px; padding-bottom:22px; color:#666;}
#about .aboutline{ height:2px; width:36px; background-color:#b9b9b9; margin-left:-66px; margin-bottom:-9px;}
#about .contact{ padding-top:20px; padding-bottom:40px;}
#about .contact li{ float:left; padding-right:34px; font-weight:bold; line-height:16px;}
#about .contact img{ float:left; width:16px; margin-right:10px;}
#about .but a{ display:inline-block; width:160px; height:46px; border:#666 1px solid; border-radius:23px; margin-right:40px; line-height:46px; text-align:center; transition: all 0.46s ease 0s; }
#about .but a:hover{ background-color:#000; color:#fff; transition: all 0.46s ease 0s; }

#copyright{ text-align:center; color:#999; font-size:14px; line-height:120px; text-transform:uppercase}
#copyright a{ color:#999; padding-left:12px;}


.workshow{ background-color:#333; color:#fff;}

/*回到顶部样式*/
#return_top {
	Z-INDEX: 999; 
	POSITION: fixed; 
	WIDTH: 40px; 
	BOTTOM: 35px; 
	DISPLAY: block; 
	BACKGROUND: url(../images/top.png) no-repeat; 
	HEIGHT: 40px; 
	RIGHT: 20px; 
	_position: absolute
}
#return_top:hover {
	BACKGROUND: url(../images/top_h.png) no-repeat
}

@media (min-width: 1440px) and (max-width: 1599px) {
#header{ padding:20px 0px; background-color:#fff; font-size:15px;}
#header img{ height:30px;}
#banner{ padding-top:76px;}
.worktit h1{ font-size:44px;}
.worklist,.worklist .bd{ width:1320px;}
.worklist .bd ul li{ margin:0px 20px; font-size:14px; padding-bottom:50px; border-radius:8px; }
.worklist .bd ul li img{ width:400px;}
#about .aboutinfo{ padding-right:20px;}
.g100{ height:80px;}
.worklist .bd ul li:hover .item_d{ top:90px;}
}

@media (min-width: 1280px) and (max-width: 1439px) {
#header{ padding:16px 0px; background-color:#fff; font-size:15px;}
#header img{ height:28px;}
#banner{ padding-top:68px;}
.worktit h1{ font-size:40px; }
.worklist,.worklist .bd{ width:1200px;}
.worklist .bd ul li{ margin:0px 20px; font-size:14px; padding-bottom:50px; border-radius:8px; }
.worklist .bd ul li img{ width:360px;}
#about{ background:none; background-color:#f8f8f8;}
#about .aboutinfo{ padding-right:20px; width:640px;}
#about .aboutcont{ width:1020px; margin:0px auto; padding-left:80px;}
.g100{ height:70px;}
.worklist .bd ul li:hover .item_d{ top:70px;}
}

@media (min-width: 1024px) and (max-width: 1279px) {
#header{ padding:14px 0px; background-color:#fff; font-size:15px;}
#header img{ height:24px;}
#banner{ padding-top:64px;}
.worktit h1{ font-size:36px; }
.worklist,.worklist .bd{ width:1000px;}
.worklist .bd ul li{ margin:0px 20px; font-size:14px; padding-bottom:50px; border-radius:8px; }
.worklist .bd ul li img{ width:293px;}
#about{ background:none; background-color:#f8f8f8;}
#about .aboutinfo{ padding-right:20px; width:600px;}
#about .aboutcont{ width:860px; margin:0px auto; padding-left:0px;}
#about .aboutline{ display:none;}
.g100{ height:60px;}
.worklist .bd ul li:hover .item_d{ top:84px;}
}

@media (min-width: 768px) and (max-width: 1023px) {
#header{ padding:14px 0px; background-color:#fff; font-size:15px;}
#header img{ height:28px;}
#banner{ padding-top:56px;}
.worktit{ line-height:48px; padding-top:80px;}
.worktit h1{ font-size:36px; }
.worklist,.worklist .bd{ width:680px;}
.worklist .bd ul li{ margin:0px 20px; font-size:14px; padding-bottom:50px; border-radius:8px; }
.worklist .bd ul li img{ width:300px;}
#about{ background:none; background-color:#f8f8f8;}
#about .aboutinfo{ padding-right:0px; width:680px; float:none; margin:0px auto;}
#about .aboutcont{ width:760px; margin:0px auto; padding-left:0px; text-align:center;}
#about .contact{ margin:0px auto; width:550px;}
#about .name{ display:none;}
#about .aboutleft{ float:none; width:200px; margin:0px auto;}
#about .aboutline{ display:none;}
.g100{ height:60px;}
.worklist .bd ul li:hover .item_d{ top:84px;}

#header .logo{ padding-left:20px; float:left;}
#header .menu{ width:400px; margin:0px; float:right;}
#header .menu a{ margin-right:40px; line-height:30px;}

}

@media (max-width: 767px) { 
#header{ padding:14px 0px; background-color:#fff; font-size:15px; -webkit-backdrop-filter: saturate(180%) blur(2.66667vw); -ms-backdrop-filter: saturate(180%) blur(2.66667vw); backdrop-filter: saturate(180%) blur(2.66667vw); background-color: hsla(0,0%,100%,.90);}
#header .logo{ padding-left:0px; float:none; text-align:center; width:180px; margin:0px auto;}
#header img{ height:26px;}
#header .menu{ display:none;}
#banner{ padding-top:54px;}
.worktit{ line-height:36px; padding-top:40px; font-size:14px; padding-bottom:5px;}
.worktit h1{ font-size:28px; padding-bottom:0px;}
.worklist,.worklist .bd{ width:360px;}
.worklist .bd ul li{ margin:15px 20px; font-size:14px; padding-bottom:0px; border-radius:8px;  background: #fff;  box-shadow: 0px 10px 30px rgb(0 0 0 / 8%);
overflow: hidden;}
.worklist .bd ul li img{ width:320px;}

#about{ background:none; background-color:#f8f8f8; width:100%; overflow:hidden; padding:50px 0px;}
#about .aboutinfo{ padding-right:0px; width:340px; float:none; margin:0px auto;}
#about .aboutcont{ width:340px; margin:0px auto; padding-left:0px; text-align:center;}
#about .contact{ margin:0px auto; width:360px; padding-bottom:20px;}
#about .contact li{ padding-bottom:20px;}
#about .name{ display:none;}
#about .aboutleft{ float:none; width:200px; margin:0px auto;}
#about .aboutline{ display:none;}
#about .aboutinfo h1{ font-size:28px; padding-bottom:16px;}
#about .photo img{ width:160px;}
.g100{ height:60px;}
#about .but{ text-align:center; }
#about .but a{ margin:10px;}
.worklist .bd ul .title { padding: 15px 20px;}
.worklist .bd ul li:hover .item_d{ top:60px;}
#copyright{ line-height:24px; padding:30px 0px; font-size:12px; width:334px; margin:0px auto;}

.workmore{ text-align:center; padding-bottom:0px; padding-top:30px;}
.workmore a{ display:inline-block; width:160px; height:46px; border:#666 1px solid; border-radius:23px; text-align:center; line-height:46px; font-size:16px; transition: all 0.46s ease 0s;}

#menuicon{ display:inline-block; float:right; margin-right:20px;}
.js-canvi-navbar--right .contact{ padding-left:30px; line-height:14px; padding-top:40px;}
.js-canvi-navbar--right .contact img{ height:14px; float:left; margin-right:10px;}
.js-canvi-navbar--right .contact li{ padding-bottom:24px;}
}