/* 初始化 */
*{padding: 0; margin:0; box-sizing: border-box; outline: none; border: none;}
a{ text-decoration: none; color: var(--text-color-darker); transition: all 0.5s;}
ul,li{ list-style-type: none;}
img{max-width: 100%; display: block;}
body{ background: #fff; font-size: 14px; font-family:"Microsoft Yahei";}

/* 定义变量 */
:root{
    --primary-color: #C00;
    --secondary-color: #e3e3e3;
    --text-color-lightest: #e7e9ec;
    --text-color-darker: #2e2e2e;
    --text-color-dark: #494949;
    --text-color-gray: #8b8b8b;
    --text-color-dark-gray: #727272;
    --text-color-light-gray: #c6c6c6;
    --backdrop-color: rgba(42, 42, 42, 0.69);
}

/* 头部区域 */
header{width: 100%; height: 70px; background: #fff; padding: 0 2%; display: grid; grid-template-columns: 1fr 3fr; align-items: center; position: relative; z-index: 99;}
header h1{ font-size: 24px; font-weight: 600; color: var(--text-color-dark); letter-spacing: 2px;}
header h1 img{width: 45px; margin-right: 10px;}
header h1 a{display: flex; align-items: center;}
header nav{ justify-self: end; display: flex; align-items: center;}
header nav a{ display: inline-block; font-size: 16px; height: 70px; line-height: 70px; color:#000; padding:0 35px;}
header nav a:last-child{height: 30px; line-height: 30px; margin: 0 0 0 20px; padding: 0 20px; background: #F60; border-radius: 4px; color: #fff; position: relative;}
header nav a:last-child::after{content: ''; width: 8px; height: 8px; display: inline-block; border-radius: 10px; background: #C00; position: absolute; top: 0; right: 0;}
header nav a:hover,header nav a.on{background: #C00; color: #fff;}
header nav a:last-child:hover{ background: #C00; color: #fff;}
header nav a:last-child:hover:after{ background: #F60;}
header .menu{ display: none;}
header.sticky{ position: fixed; background: #fff; box-shadow: 0 0 18px rgba(0,0,0,0.3); animation: dropDown 0.5s ease-in-out forwards;}

/* 轮播区域 内页头图 包屑导航 毕设分类 文章页*/
#banner{width:100%; height: 100vh; overflow: hidden; position: relative; z-index: 1;}
#banner .itemBox{display: flex; width: 100%; height: 100vh; align-items: center; justify-content: center;}
#banner .itemBox .thumb img{width: 100%; height: 100%; display: block; }
#banner .itemBox .item{ position: absolute; color: var(--text-color-lightest); text-align: center; max-width: 80vw; z-index: 3;}
#banner .itemBox .item h2{ font-size: 54px; font-weight: 600;}
#banner .itemBox .item h3{ font-size: 24px; margin: 48px 0; letter-spacing: 6px;}
#banner .itemBox .item .btn a{padding: 10px 30px; margin: 0 20px; font-size: 18px; color: var(--text-color-lightest); background-color: var(--primary-color); border: none; border-radius: 4px; }

#inBanner{width: 100%; padding: 6% 2%; overflow: hidden; background: linear-gradient(-190deg, #4A4EA4 65%, #E884A1);}
#inBanner .itemBox{width:100%; height: 100%; display: flex; flex-direction: column; justify-content: center;}
#inBanner .itemBox h2{ font-size: 48px; color: #fff;}
#inBanner .itemBox p{color: #fff; padding-top: 10px;}

#menu{width: 100%; height: auto; padding: 15px 2%; overflow: hidden;}
#menu ul{ display: flex;}
#menu ul li{ margin-right: 5px;}
#menu ul li a{display:block; min-width:105px; padding: 0 15px; text-align: center; line-height: 48px; font-size: 16px; background: #eee;}
#menu ul li.on a,#menu ul li a:hover{background: #C00; color: #fff;}

#classify{width: 100%; height: auto; padding: 15px 2% 0; overflow: hidden;}
#classify .item{ margin-bottom: 15px;}
#classify .item:nth-child(4){display: none !important;}
#classify .item p{ display: inline-block; font-weight: bold; padding: 5px 0px;}
#classify .item ul{ display: inline-block;}
#classify .item ul li{ display: inline-block; }
#classify .item ul li a{ display: block; padding: 5px 9px; margin: 5px 2px 5px 0; border-radius: 3px; border-radius: 3px; border: 1px solid #ddd;}
#classify .item ul li a:hover,#classify .item ul li.on a{ background:#C00; color: #fff;}
#stuform{width: 100%; height: auto; overflow: hidden; margin-bottom: 15px;}
#stuform form{display: flex; align-items: center;}
#stuform input{border: 1px solid #ccc; height: 40px; text-indent: 10px; flex: 1; font-size: 16px; border-top-left-radius: 5px; border-bottom-left-radius: 5px;}
#stuform button{width: 80px; height: 40px; background: #C00; cursor: pointer; text-align: center; color: #fff; border-top-right-radius: 5px; border-bottom-right-radius: 5px;}

#place{width: 100%; height: auto; padding: 15px 2%; overflow: hidden; color: #888; font-family: '黑体';}
#place i{color: #888; font-family:"Microsoft Yahei";}
#place a{ padding:0 10px; font-size: 15px; color: #888; font-family:"Microsoft Yahei";}
#place a:hover{color:#C00;}

/* 公共区域 *******************************************************************************************/
.main{display: flex; flex-direction: column; align-items: center; overflow: hidden;}
.main section{ display: grid; max-width: 1180px; margin:0 auto;}
.main section.section-bg{position: relative;}
.main section.section-bg::before{content: ''; display: block; width: 100vw; height: 100%; position: absolute; background: #f9f9f9; z-index: -1;}
.index section{padding:55px 0;}
.home.list{padding-top: 0 !important;}
.home section{padding: 40px 0 0 0;}
/* 首页模块标题 */
.main .h2{ font-size: 34px; color: var(--text-color-dark); text-align: center; }
.main .h2::after{content: ''; display: block; width: 100px; height: 4px;  margin: 10px auto 0; background: var(--primary-color);}
.main .titinfo{width: 100%; margin:10px 0 55px; font-size: 16px; color: var(--text-color-dark-gray); text-align: center; }
/* 首页更多按钮 */
.index .moreBtn{text-align: center; padding-top: 50px;}
.index .moreBtn a{ display: inline-block; width: 200px; line-height: 40px; font-size: 16px; border:2px solid var(--text-color-darker); color: var(--text-color-darker); position: relative;}
.index .moreBtn a::after{content: ''; display: inline-block; width:0; height: 100%; background: var(--text-color-darker); position: absolute; left: 0; top: 0; z-index: -1; transition: all 0.3s;}
.index .moreBtn a:hover{color: #fff;}
.index .moreBtn a:hover::after{width: 100%;}
/* 关于我们 */
.index .about .features{ display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: 126px 126px; column-gap:5vw;}
.index .about .feature{ display: grid; grid-template-areas:"icon title" "icon content"; grid-template-columns: 60px 1fr; grid-template-rows: 1fr 3fr;}
.index .about .feature i{ grid-area: icon; font-size: 34px; color: var(--primary-color);}
.index .about .feature h4{ grid-area: title; font-size: 18px; color: var(--text-color-dark);}
.index .about .feature p{ grid-area: content; color: var(--text-color-gray); margin-top: 8px;}
/* 切图案例 */
.index .case{max-width:100%; overflow: hidden; padding-left:0 !important; padding-right:0 !important;}
.index .case .filter-btns{margin-bottom: 38px;}
.index .case .filter-btn{color:var(--text-color-dark-gray); padding: 8px 18px; margin:0 7px; border: none; border-radius: 4px; background: var(--secondary-color); cursor: pointer; transition: all 0.4s;}
.index .case .filter-btn.active,.showcases .filter-btn:hover{ background: var(--primary-color); color: white;}
.index .case .filter-btn:focus,.showcases .filter-btn:active{ outline: none;}
.index .case .cases{width:100vw; overflow: hidden;}
.index .case .cases .case-item{ width: 25vw; height: 20vw; overflow: hidden;}
.index .case .cases .case-item img{height: 100%; object-fit: cover; display: block;}
/* 服务流程 */
.index .service .services{ display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: 1fr 1fr; column-gap:38px; row-gap:34px;}
.index .service .service-item{ display: grid; grid-template-areas:"icon title" "icon content"; grid-template-columns: 70px 1fr; grid-template-rows: 1fr 3fr; padding: 24px; box-shadow: 0 0 18px rgba(0,0,0,0.06);}
.index .service .service-item i{ grid-area: icon; font-size: 42px; color: var(--primary-color); padding-top: 6px;}
.index .service .service-item h2{ grid-area: title; font-size: 24px; color: var(--text-color-dark);}
.index .service .service-item p{ grid-area: content; color: var(--text-color-gray); line-height: 30px; font-size: 16px; margin-top: 8px;}
/* 团队介绍 */
.index .team .teams{ display: grid; grid-template-columns: repeat(4,1fr); column-gap: 24px;}
.index .team .team-item{cursor: pointer; display: grid; justify-items: center; background: #fff; text-align: center; box-shadow: 0 0 24px rgba(0,0,0,0.2); padding-bottom: 28px; transition: all 0.4s;}
.index .team .team-item .face img{width:100%; height: 264px; object-fit: cover; object-position: top center;}
.index .team .team-item .name{margin-top: 18px; font-size: 18px; font-weight: 500; color: var(--text-color-dark);}
.index .team .team-item .position{margin: 12px 0 18px; color: var(--text-color-gray);}
.index .team .team-item .link{ width: 100%; max-width: 200px; display: flex; justify-content: space-between; padding: 0 42px;}
.index .team .team-item .link li{ list-style: none;}
.index .team .team-item .link li{ font-size: 15px;}
.index .team .team-item .link li a{ color: var(--text-color-dark); text-decoration: none;}
.index .team .team-item:hover{box-shadow: 0 0 36px rgba(0,0,0,0.1); transform: translateY(-20px) scale(1.05);}
/* 数据区域 */
.index .data{max-width:unset; width: 100vw; height: 255px; padding-left: 0 !important; padding-left: right !important; background-image: url(../img/data.jpg); background-position: center; background-size:cover;
    display: grid;
    grid-template-columns: repeat(4,minmax(auto,220px));
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}
.index .data .data-item{width: 250px; display: grid; grid-template-rows: repeat(3,1fr); justify-items: center; color: #fff;}
.index .data .data-item i{font-size: 44px;}
.index .data .data-item .num{ margin-top: 7px; font-size: 41px; font-weight: 600;}
.index .data .data-item .desc{ font-size: 18px; font-weight: 500;}
.index .data::before{content: ''; position: absolute; z-index: -1; width: 100%; height: 100%; left:0; top:0; background: var(--backdrop-color);}
/* 公司新闻 */
.index .company .news{display: grid; grid-template-columns: repeat(3,1fr); column-gap: 24px;}
.index .company .news .news-item{box-shadow: 0 0 24px rgba(0,0,0,0.1); padding: 24px; transition: all 0.4s;}
.index .company .news .news-item:hover{box-shadow: 0 0 36px rgba(0,0,0,0.1); transform: translateY(-20px) scale(1.05);}
.index .company .news .news-item .news-img {height: 255px; overflow: hidden; margin: -24px; margin-bottom: 0;}
.index .company .news .news-item .news-img img{min-height: 300px; object-fit: cover;}
.index .company .news .news-item .news-meta{ margin:20px 0 12px; font-size: 12px; color: var(--text-color-light-gray); display: flex;}
.index .company .news .news-item .news-meta p:first-child{ margin-right: 36px;}
.index .company .news .news-item .news-title{font-size: 18px; color: var(--text-color-dark); margin-bottom: 16px;}
.index .company .news .news-item .news-article{letter-spacing: 0.54px; line-height: 24px; color: var(--text-color-gray);}
.index .company .news .news-item .news-btn a{display: inline-block; padding: 6px 14px; border-radius: 4px; margin-top: 24px; color: #fff; background: var(--primary-color);}
/* 脚步信息 */
footer{width: 100%; border-top: #ddd solid 1px; background: #f2f0f3; padding: 10px 0; color: var(--text-color-darker);}
footer p{text-align: center; font-size: 15px; line-height: 1.6; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
footer p img{width: 16px; height: auto; display: inline-block; margin: 0 0 0 10px;}
footer p a{display: flex; align-items: center;}

/*************************************************************************************************************/
.list{width: 100%; background: #f9f9f9; padding: 35px 2%;}
/* A新闻列表 */
.list .news {max-width: unset; width: 100%; height: auto; overflow: hidden;}
.list .news ul.item{width:100%; height: auto; overflow: hidden; }
.list .news ul.item li{width: 100%; line-height: 75px; position: relative; font-size: 16px; margin-bottom: 20px;}
.list .news ul.item li a{display: block; width: 100%; height: 100%; padding-left:50px; background: #fff; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.list .news ul.item li a::after{content: ''; position: absolute; left: 30px; background: #ececec; width: 7px; height: 7px; top: 35px; border-radius: 50%;}
.list .news ul.item li time{ position: absolute; top: 0; right: 30px;}
.list .news ul.item li:hover a{ background: #4A4EA4; border-radius: 3px;}
.list .news ul.item li:hover a,.list .news ul.item li:hover time{color: #fff;}
.list .news ul.item li:hover a::after{background: #C00;}

/* A公用列表 */
.list .listing{max-width: unset; width: 100%;}
.list .listing ul.item{display: grid; grid-template-columns: repeat(6,1fr); column-gap: 20px;}
.list .listing ul.item li{ margin-bottom: 20px; transition: all 0.4s;}
.list .listing ul.item li .pic{width: 100%; border-radius: 8px; height: auto; overflow: hidden;}
.list .listing ul.item li img{ transition: all 0.4s; width: 100%; display: block;}
.list .listing ul.item li p{width: 100%; padding:0 10px; height: 45px; line-height: 45px; background: #fff; text-align: center; font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.list .listing ul.item li a:hover img{ transform: scale(1.1);}
.list .listing ul.item li:hover{box-shadow: 0 5px 20px 0 rgba(0,0,0,.17), 0 -5px 20px 0 rgba(0,0,0,.15);}

/* A看看设计 */
.list .design ul.item{grid-template-columns: repeat(2,1fr); column-gap: 20px;}

/* A毕业设计 列表页 文章页*/
.list .student{max-width: unset; width: 100%;}
.list .student ul.item{display: grid; grid-template-columns: repeat(6,1fr); column-gap: 20px;}
.list .student ul.item li{ margin-bottom: 20px; transition: all 0.4s; background: #fff; position: relative;}
.list .student ul.item li .pic{width: 100%; max-height: 200px; border-top-left-radius: 5px; border-top-right-radius: 5px; height: auto; overflow: hidden; position: relative;}
.list .student ul.item li .img{width: 100%; max-height: 200px; transition: all 0.4s; display:block;}
.list .student ul.item li .see{position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 0.4s; display: flex; background: rgba(0,0,0,0); align-items: center; justify-content: center;}
.list .student ul.item li .see img{opacity: 0; transition: all 0.4s;}
.list .student ul.item li h2{margin:15px 0 10px; width: 100%; height: auto; font-size: 15px; text-align: center; color: var(--text-color-dark);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.list .student ul.item li h6{position: absolute; top: 0; right: 0; padding: 3px 6px; background: rgba(204,0,0,0.8); color: #fff; display: none;}
.list .student ul.item li .keyword{ padding-bottom: 10px; background: #fff; text-align: center; color: #3C3;}
.list .student ul.item li p{ height: 40px; background: #fff; text-align: center; display: flex; justify-content: space-around;}
.list .student ul.item li p span:first-child{ color: #C00;}
.list .student ul.item li a:hover .img{ transform: scale(1.1);}
.list .student ul.item li a:hover .see{background: rgba(0,0,0,0.6);}
.list .student ul.item li a:hover .see img{opacity: 1;}
.list .student ul.item li:hover{box-shadow: 0 5px 20px 0 rgba(0,0,0,.17), 0 -5px 20px 0 rgba(0,0,0,.15);}
.home.list .student ul.item li:last-child{display: flex; align-items: center;}
.home.list .student ul.item li:last-child a{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; font-size: 26px; position: relative; z-index: 1; color: #C00;}
.home.list .student ul.item li:last-child a::before{content: ''; position: absolute; display: block; width: 200%; height: 200%; background: #C00; left: 50%; top: 50%; z-index: -1;
		transform-origin: left top;
		animation: btnborder 2s infinite linear;
}
.home.list .student ul.item li:last-child a::after{content:''; display: block; position: absolute; width: calc(100% - 10px); height: calc(100% - 10px); left: 5px; top: 5px; background: #fff; z-index: -1;}

.list .student .itemTop{ display: grid; grid-template-columns: 1fr 3fr; grid-gap: 40px;}
.list .student .itemTop .itemLeft{ border:1px solid #ddd; background: #fff; overflow: hidden; }
.list .student .itemTop .itemLeft:hover img{ transform: scale(1.1);}
.list .student .itemTop .itemLeft img{width: 100%; max-height: 352px; display: block; transition: all 0.2s;}
.list .student .itemTop .itemRight h2{width: 100%; border-bottom: 1px solid #ddd; font-size: 18px; padding-bottom: 15px; color: var(--text-color-dark);}
.list .student .itemTop .itemRight ul li{width: 100%; padding: 15px 0; overflow: hidden; border-bottom: 1px dashed #ddd; font-size: 16px; color: var(--text-color-dark);}
.list .student .itemTop .itemRight ul li p{ padding-right: 2%; line-height: 1.6; float: left;}
.list .student .itemTop .itemRight ul li:nth-child(2) p:last-child{display: none;}
.list .student .itemTop .itemRight ul li a{background: #C00; color: #fff; border-radius: 2px; animation: btncolor 1s infinite; display: inline-block; padding: 0 8px;}
.list .student .itemTop .itemRight ul li span{color:#3C3; font-weight: bold;}
.list .student .itemTop .itemRight ul li:nth-child(2) p:first-child span{color: #C00;}
.list .student .itemTop .itemRight ul li:nth-child(3) span{ color: #C00;}
.list .student .itemTop .itemRight ul li:last-child{ line-height: 1.8;}
.list .student .itemTop .itemRight .btn a{padding: 10px 30px; margin-top: 20px; display: inline-block; color: #fff; background: #C00; margin-right: 20px; border-radius: 2px;}
.list .student .itemTop .itemRight .btn a:last-child{ background: #F60;}
.list .student .itemTop .itemRight .btn a:hover{ }
.list .student .itemMain,.list .student .itemBom{width: 100%; height: auto; overflow: hidden;}
.list .student .itemMain > h2,.list .student .itemBom > h2{position: relative; width: 100%; margin: 30px 0 20px; padding: 0 30px 0 15px; color: var(--text-color-dark); font-size: 16px;}
.list .student .itemMain > h2::after,.list .student .itemBom > h2::after{content: ""; position: absolute; left: 0; top: 3px; width: 4px; height: 16px; background-color: #C00;}
.list .student .itemMain ul{display: grid; grid-template-columns: repeat(6,1fr); grid-gap: 30px;}
.list .student .itemMain ul li{cursor: pointer; border: 1px solid #ddd; border-radius: 3px; position: relative; overflow: hidden;}
.list .student .itemMain ul li img{display: block; max-width: 100%; max-height: 275px; margin: 0 auto;}
.list .student .itemMain ul li p{width: 100%; line-height: 35px; background: rgba(0,0,0,0.8); transition: all 0.2s; position: absolute; bottom: 0; text-align: center; color: #fff;}
.list .student .itemMain ul li a:hover p{background: rgba(204,0,0,0.8);}

.list .student .article{width: 100%; color: var(--text-color-dark);}
.list .student .article h1{line-height: 1.6;}
.list .student .article .info{width: 100%; background: #eee; margin: 10px 0 0; padding: 5px 10px; }
.list .student .article article{ padding-top: 10px; }
.list .student .article article h2{margin-top: 20px; border-left: 5px solid #C00; text-indent: 10px;}
.list .student .article article img{max-width:100%;}
.list .student .article article a{color: #C00;}
.list .student .article article p{ font-size: 16px; line-height: 1.6; margin: 10px 0 15px;}
.list .student .article article table{width: 100%; border-collapse:collapse; border: 1px solid #ccc; margin-top: 15px;}  
.list .student .article article table td{border-collapse:collapse; border: 1px solid #ccc; padding: 10px;}
.list .student .article .artTag{ display: flex; align-items: center; padding-bottom: 15px; border-bottom: 1px solid #ddd;}
.list .student .article .artTag p{font-weight: bold; color: #C00;}
.list .student .article .artTag a{padding: 3px 6px; margin-right: 5px; color: var(--text-color-dark); border:1px solid #ccc; border-radius: 3px;}
.list .student .article .artTag a:hover{ background: #3C3; color: #fff;}
.list .student .article .artPage{ padding: 15px 0 0;}
.list .student .article .artPage ul li{width: 100%; height: 30px; line-height: 30px; text-overflow: ellipsis; white-space: normal; overflow: hidden;}
.list .student .article .artPage ul li a{color: var(--text-color-dark);}
.list .student .article .artPage ul li a:hover{color: #3C3;}
#zoom{z-index: 99990; position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}
#zoom .content{z-index: 99991; position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; background: #ffffff no-repeat 50% 50%; padding: 0; margin: -100px 0 0 -100px; box-shadow: -20px 20px 20px rgba(0, 0, 0, 0.3); border-radius: 4px;}
#zoom .content.loading {background-image: url('../img/loading.gif'); background-size: 20%;}
#zoom .content img{display: block; max-width: none; background: #ececec; box-shadow: 0 1px 3px rgba(0,0,0,0.25); border-radius: 4px;}
#zoom .close{z-index: 99993; position: absolute; top: 0; right: 0; width: 49px; height: 49px; cursor: pointer; background: transparent url('../img/close.png') no-repeat 50% 50%; opacity: 1; filter: alpha(opacity=100); border-radius: 0 0 0 4px;}
#zoom .previous,#zoom .next{z-index: 99992; position: absolute; top: 50%; overflow: hidden; display: block; width: 49px; height: 49px; margin-top: -25px;}
#zoom .previous{left: 0; background: url('../img/arrows.png') no-repeat 0 0; border-radius: 0 4px 4px 0;}
#zoom .next{right: 0; background: url('../img/arrows.png') no-repeat 100% 0; border-radius: 4px 0 0 4px;}
#zoom .close:hover{background-color: #C00;}
#zoom .previous:hover,#zoom .next:hover{background-color: #0088cc;}

/* 返回作品 */
.back{width: 100%; height: auto; overflow: hidden; text-align: center;}
.back a{display: inline-block; margin: 0 auto; background: #ff434f; padding: 15px 40px; color: #fff; border-radius: 5px; margin-bottom: 20px;}

/*分页样式*/
.list .page{max-width:unset; width: 100%; height: auto; overflow: hidden;}
.list .page ul{ width: 100%; display: flex; align-items: center; justify-content: flex-end;}
.list .page ul li{ margin-left: 10px;}
.list .page ul li a,.list .page ul li span{display: block; height: 28px; line-height: 28px; padding: 0 8px; border: 1px solid #ccc; font-size: 14px;}
.list .page ul li.active a,.list .page ul li span.current,.list .page ul li a:hover{background: #C00; border: 1px solid #C00; color: #fff;}

/* 在线客服 */
.animated { -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both }
.livechat-girl { width: 60px; height: 60px; border-radius: 50%; position: fixed; bottom: 0; right: 40px; opacity: 0; -webkit-box-shadow: 0 5px 10px 0 rgba(35,50,56,.3); box-shadow: 0 5px 10px 0 rgba(35,50,56,.3); z-index: 97; transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); cursor: pointer; -webkit-transition: all 1s cubic-bezier(.86, 0, .07, 1); transition: all 1s cubic-bezier(.86, 0, .07, 1) }
.livechat-girl:focus { outline: 0 }
.livechat-girl.animated { opacity: 1; transform: translateY(-40px); -webkit-transform: translateY(-40px); -ms-transform: translateY(-40px) }
.livechat-girl:after { content: ''; width: 12px; height: 12px; border-radius: 50%; background-image: linear-gradient(to bottom, #26c7fc, #26c7fc); position: absolute; right: 1px; top: 1px; z-index: 50 }
.livechat-girl .girl { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 50 }
.livechat-girl .animated-circles .circle { background: rgba(38,199,252,.25); width: 60px; height: 60px; border-radius: 50%; position: absolute; z-index: 49; transform: scale(1); -webkit-transform: scale(1) }
.livechat-girl .animated-circles.animated .c-1 { animation: 2s scaleToggleOne cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl .animated-circles.animated .c-2 { animation: 2.5s scaleToggleTwo cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl .animated-circles.animated .c-3 { animation: 3s scaleToggleThree cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl.animation-stopped .circle { opacity: 0!important }
.livechat-girl.animation-stopped .circle { opacity: 0!important }
.livechat-girl .livechat-hint { position: absolute; right: 40px; top: 50%; margin-top: -20px; opacity: 0; z-index: 0; -webkit-transition: all .3s cubic-bezier(.86, 0, .07, 1); transition: all .3s cubic-bezier(.86, 0, .07, 1) }
.livechat-girl .livechat-hint.show_hint { -webkit-transform: translateX(-40px); transform: translateX(-40px); opacity: 1 }
.livechat-girl .livechat-hint.hide_hint { opacity: 0; -webkit-transform: translateX(0); transform: translateX(0) }
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 1296px!important }
.livechat-girl .livechat-hint.rd-notice-tooltip .rd-notice-content { width: auto; overflow: hidden; text-overflow: ellipsis }
.rd-notice-tooltip { -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2); box-shadow: 0 2px 2px rgba(0,0,0,.2); font-size: 14px; border-radius: 3px; line-height: 1.25; position: absolute; z-index: 65; max-width: 350px; opacity: 1 }
.rd-notice-tooltip:after { position: absolute; display: block; content: ''; height: 20px; width: 20px; -webkit-box-shadow: none; box-shadow: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 50 }
.rd-notice-tooltip .rd-notice-content { background: 0; border-radius: 3px; width: 100%; color: #fff; position: relative; z-index: 60; padding: 20px; font-weight: 400; line-height: 1.45 }
.rd-notice-type-success { background-color: #26c7fc; -webkit-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); box-shadow: 0 5px 10px 0 rgba(38,199,252,.2) }
.rd-notice-type-success .rd-notice-content { background-color: #26c7fc }
.rd-notice-type-success:after { background-color: #26c7fc; -webkit-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); box-shadow: 0 5px 10px 0 rgba(38,199,252,.2) }
.rd-notice-position-left { margin-left: -20px }
.rd-notice-position-left:after { right: -6px; top: 50%; margin-top: -10px }
.rd-notice-tooltip.single-line .rd-notice-content { height: 40px; padding: 0 20px; line-height: 40px; white-space: nowrap;}

/* 弹出二维码 */
.showEwm{position: fixed; left:0; top: 0; width: 100%; height: 100vh; display: none; z-index:98; background: rgba(0,0,0,0.8); flex-direction: column; align-items: center; justify-content: center;}
.showEwm h2{font-size: 50px; padding: 30px 0; letter-spacing: 10px; color: #fff; display: flex; align-items: center;}
.showEwm h2 small{font-size: 20px;}
.showEwm ul{display: flex; justify-content: center; position: relative;}
.showEwm ul li{margin: 0 20px 30px;}
.showEwm ul li img{display: block; border-top-left-radius: 5px; border-top-right-radius: 5px;}
.showEwm ul li p{width: 100%; padding:0 0 10px; text-align: center; font-size: 16px; background: #fff;}
.showEwm ul li p font{color: #C00;}
.showEwm ul a{display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 5px; background: #C00; color: #fff; position: absolute; right: -25px; top: -25px;}

/* 推广二维码 */
.promotion{width: 100%; height: auto; overflow: hidden; margin: 30px 0 20px; background: #eee; padding: 10px; }
.promotion h2{font-size: 16px; margin-bottom: 10px; border-bottom: 1px dotted #ccc; padding-bottom: 10px; position: relative; text-indent: 10px; color: var(--text-color-dark);}
.promotion h2::before{content: ""; position: absolute; left: 0; top: 3px; width: 4px; height: 16px; background-color: #C00;}
.promotion ul{display: flex; flex-wrap: wrap;}
.promotion ul li{margin-right: 10px;}
.promotion ul li p{width: 100%; text-align: center; margin-top: 5px; line-height: 30px; background: #fff;}
.student .stupromotion{margin-bottom: 0px !important;}


.show404{
	width: 100vw;
	height: 100vh;
	background: #fff;
	position: fixed;
	inset: 0;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 99999999;
}

/* 媒体查询 */
@media(max-width:1100px){
	header{grid-template-columns:repeat(2,1fr);}
    header nav{ display: none;}
    header .menu{ display: block; width:26px; justify-self: end;}
    header .menu span{ width:26px; height: 3px; background-color: var(--text-color-dark); display: block; }
    header .menu span:nth-child(2){margin: 6px 0;}
	.open{width: 100%; height: 100vh; overflow: hidden; }
    .open header .menu span{background-color: var(--text-color-dark); transition: 0.4s ease;}
    .open header .menu span:nth-child(1){transform: rotate(45deg) translate(4px,8px);}
    .open header .menu span:nth-child(2){transform: translateX(5px); opacity: 0;}
    .open header .menu span:nth-child(3){transform: rotate(-45deg) translate(4px,-9px);}
    .open header nav{
        display: grid; grid-auto-rows: max-content;
        width: 100vw; position: fixed; left:0; top:0; background: #fff; padding: 0 2%; opacity: 0;
        animation: slideDown 0.6s ease-out forwards;
    }
	.open header .logo{color: var(--text-color-dark); z-index: 40;}
	.open header nav a:last-child{margin-left: 0;;}
    .open header nav > *{ margin:4px 0; font-size: 18px; color: var(--text-color-dark); opacity: 0; animation: showMenu 0.5s linear forwards 0.4s;}

	/* 团队介绍 */
    .index .team .teams{grid-template-columns: repeat(2,1fr); column-gap: 6vw; row-gap: 36px;}

	/* 前端笔记 */
    .index .company .news{ grid-template-columns: repeat(2,1fr); row-gap: 36px;}

	/*软件安装 切图案例 学生案例 */
	.list .listing ul.item{grid-template-columns: repeat(4,1fr); grid-template-rows: unset;}
	.list .student ul.item{grid-template-columns: repeat(4,1fr); grid-template-rows: unset;}
	.list .web ul.item{ grid-template-columns: repeat(4,1fr); grid-template-rows: unset;}

	/* 演示截图 */
	.list .student .itemMain ul{grid-template-columns: repeat(4,1fr); grid-template-rows: unset;}
}

@media(max-width:992px){
	header{ height: 60px; padding: 0 15px;}
	header nav li{ line-height: 60px;}
	
	.main .h2{ font-size: 20px; color: var(--text-color-dark);}
	.main .h2::after{width: 8%; height: 2px; margin-top: 10px;}
	.main .titinfo{margin:10px 0 20px; padding: 0 15px; font-size: 13px;}

    #inBanner{ padding: 10% 15px; }

    #place{padding: 15px;}

	.index section{padding:55px 30px;}
    .index .about .features{ grid-template-columns: repeat(2,1fr); grid-template-rows: unset;}
	
    .index .service .services{ grid-template-columns: repeat(2,1fr); grid-template-rows: unset;}

    .index .case .cases .case-item{width: calc(100vw/3);}
    .index .data{grid-template-columns: repeat(2,minmax(200px,auto)); height: auto; row-gap: 24px; padding: 30px 0 0; background-size: 200%;}

    .list{padding: 30px 15px;}
	
	/* 切图案例 学生案例 */
	.list .listing ul.item{grid-template-columns: repeat(3,1fr)}
	.list .student ul.item{grid-template-columns: repeat(3,1fr);}

	/* 演示截图 */
	.list .student .itemTop{grid-template-columns: 1fr 2fr;}
	.list .student .itemMain ul{grid-template-columns: repeat(3,1fr);}
}

@media(max-width:768px){
	header h1{font-size: 20px;}
	header h1 img{width: 35px; margin-right: 10px;}
	header nav a{height: 40px; line-height: 40px; font-size: 14px !important;}
	
	#banner,#banner .itemBox{height: auto !important;}
	#banner .itemBox .item h2{font-size:20px;}
	#banner .itemBox .item h3{font-size:14px; letter-spacing: 3px; margin: 20px 0;}
	#banner .itemBox .item .btn a{font-size: 14px; padding: 5px 15px; margin: 0 5px;}
    .index .case .cases .case-item{width: calc(100vw/2); height: 30vw;}
    .index .company .news{ grid-template-columns: repeat(1,1fr);}
	
	#inBanner .itemBox h2{font-size: 20px;}
	#menu ul{ flex-wrap: wrap; justify-content: space-between;}
	#menu ul li{ margin-bottom: 10px;}
	#menu ul li a{font-size: 14px; padding: 0 10px; line-height: 35px}
	
	.home section{padding: 20px 0 0 0;}
	
	/* 面包屑面板 */
	#place a{padding: 0 5px;}
	
	/* 新闻列表页 */
	.list{padding: 20px 10px;}
	.list .news ul.item li{line-height: 45px; font-size: 13px;}
	.list .news ul.item li a{padding-left: 15px;}
	.list .news ul.item li a::after{left: 5px; top: 50%; transform: translateY(-50%);}
	.list .news ul.item li time{ display: none;}
	
	/* 新闻文章页 */
	.list .student .article h1{font-size: 16px;}
	.list .student .article .info span{display: none;}
	.list .student .article article h2{font-size: 15px;}
	.list .student .article article p{ font-size: 14px; line-height: 1.6; margin: 10px 0;}
	
	/* 推广二维码 */
	.promotion ul{justify-content: space-between;}
	.promotion ul li{margin-right: 0px; width: 49%;}
	.promotion ul li img{display: block; width: 100%;}
	
	/* 切图案例 学生案例 */
	#stuform input{font-size: 14px;}
	#classify .item{margin-bottom: 10px;}
	#classify .item ul li a{font-size: 12px; padding: 3px 6px;}
	#stuform input{height: 35px; font-size: 14px;}
	#stuform button{width: 70px; height: 35px;}
	
	
	.list .listing ul.item{grid-template-columns: repeat(2,1fr); column-gap: 10px;}
	.list .student ul.item{grid-template-columns: repeat(2,1fr); column-gap: 10px;}
	.list .student ul.item li h2{font-size: 12px;}
	.list .student ul.item li p{font-size: 12px;}
	.list .student .itemBom{display: none;}
	
	/* 演示截图 */
	.list .student .itemTop{grid-template-columns: 1fr;}
	.list .student .itemTop .itemLeft{display: none;}
	.list .student .itemTop .itemRight ul li{ flex-wrap: wrap; padding: 5px 0; font-size: 14px;}
	.list .student .itemTop .itemRight ul li p{width: 100%; margin: 5px 0;}
	.list .student .itemMain ul{grid-template-columns: repeat(2,1fr); column-gap: 10px;}
	
	/* 二维码 */
	.showEwm ul li{margin: 0 8px;}
	.showEwm ul li p{font-size: 16px;}
	.showEwm ul a{right: 0px; top: -30px; width: 25px; height: 25px;}
	
	/* 分页样式 */
	.list .page ul li{ margin-left: 5px;}
}

@media(max-width:576px){
    .index .about .features{ grid-template-columns: repeat(1,1fr); grid-template-rows: unset;}

    .index .service .services{ grid-template-columns: repeat(1,1fr); grid-template-rows: unset;}
    .index .case .cases .case-item{width: calc(100vw/1); height: 60vw;}

    .index .team .teams{grid-template-columns:minmax(200px, 400px);}
	
	footer p{ font-size: 13px;}
}


/* 动画定义 */
@keyframes btncolor{
	0%{background: #C00;}
	50%{background: #F60;}
	100%{background: #C00;}
}

@keyframes btnborder{
	to{
		transform: rotate(1turn);
	}
}

@keyframes dropDown{
    from{ 
        transform: translateY(-100px);
    }to{
        transform: translateY(0);
    }
}

@keyframes slideDown{
    from{
        height: 0; opacity: 0;
    }to{
        height: 100vh; padding-top: 80px; opacity: 1;
    }
}

@keyframes showMenu{
    form{
        opacity: 0;
        transform: translateY(-1vh);
    }to{
        opacity: 1;
    }
}

@keyframes scaleToggleOne { 
	0 {
		transform:scale(1);
		-webkit-transform:scale(1)
	}
	50% {
		transform:scale(2);
		-webkit-transform:scale(2)
	}
	100% {
		transform:scale(1);
		-webkit-transform:scale(1)
	}
}

@keyframes scaleToggleTwo {
	0 {
		transform:scale(1);
		-webkit-transform:scale(1)
	}
	20% {
		transform:scale(1);
		-webkit-transform:scale(1)
	}
	60% {
		transform:scale(2);
		-webkit-transform:scale(2)
	}
	100% {
		transform:scale(1);
		-webkit-transform:scale(1)
	}
}

@keyframes scaleToggleThree {
	0 {
		transform:scale(1);
		-webkit-transform:scale(1)
	}
	33% {
		transform:scale(1);
		-webkit-transform:scale(1)
	}
	66% {
		transform:scale(2);
		-webkit-transform:scale(2)
	}
	100% {
		transform:scale(1);
		-webkit-transform:scale(1)
	}
}