article h1,
article h2,
article h3 {
line-height: 1.6;
color: #101f3a;
}
article h1 {
font-size: 56px;
}
article h2 {
font-size: 36px;
text-align: center;
}
article .wpb_wrapper h3 {
font-size: 24px;
}
article h4 {
font-size: 20px;
}
article p {
font-size: 16px;
line-height: 1.83;
color: #303c42;
}
article img {
height: auto;
width: initial;
} .subtitle-info {
font-size: 30px;
line-height: 1.6;
} .banner-info {
font-size: 22px;
line-height: 1.83;
} .same-width {
width: 1200px;
margin: 0 auto;
}
.display-flex {
width: 1200px;
margin: 0 auto;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
} article svg {
width: 82px;
height: 82px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
} .btn-link a {
min-width: 190px;
padding: 0 25px;
border-radius: 8px;
display: inline-block;
text-align: center;
line-height: 50px;
font-size: 18px;
vertical-align: top;
position: relative;
cursor: pointer;
overflow: hidden;
background-color: #006ee1;
color: #fff;
}
.btn-link a:hover {
text-decoration: none;
}
.animation-btn:hover:after {
content: "";
display: inline-block;
-moz-animation: aperture 0.7s;
-webkit-animation: aperture 0.7s;
animation: aperture 0.7s;
width: 35px;
height: 35px;
position: absolute;
background: rgba(206, 235, 247, 0.2);
border-radius: 50%;
animation-iteration-count: infinite;
animation-duration: 1.3s;
left: 0;
right: 0;
top: 0.5vw;
margin: auto;
line-height: 30px;
}
@keyframes aperture {
0% {
transform: scale(1);
}
10% {
transform: scale(2);
}
20% {
transform: scale(3);
}
30% {
transform: scale(4);
}
40% {
transform: scale(5);
}
50% {
transform: scale(6);
}
60% {
transform: scale(7);
}
70% {
transform: scale(8);
}
80% {
transform: scale(9);
}
90% {
transform: scale(10);
}
100% {
transform: scale(11);
}
}
.template-dot .dot::before {
background: url(//www.yeastar.cn/wp-content/uploads/svg/dagou-lvse.svg) center no-repeat;
background-size: cover;
}
.template-dot .dot {
margin-bottom: 8px;
padding-left: 25px;
position: relative;
}
.template-dot .dot::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
left: 0;
top: 7px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
@media (max-width: 1500px) and (min-width: 768px) {
.display-flex,
.same-width {
width: 1100px;
max-width: 90%;
}
}
@media (max-width: 1300px) {
.same-width,
.display-flex {
width: 90%;
}
}
@media (max-width: 768px) {
#primary h1 {
font-size: 30px;
}
#primary h2 {
font-size: 25px;
}
#primary .wpb_wrapper h3 {
font-size: 20px;
}
#primary .subtitle-info {
font-size: 24px;
}
.display-flex,
.same-width {
display: block;
width: 90%;
}
.display-flex .content-left,
.display-flex .content-right {
width: 100% !important;
max-width: initial;
}
}.version-1,
.version-2 {  min-height: 500px;
}
.version-2 { }
.case-name {
display: flex;
align-items: center;
margin: 0 auto 36px;
width: max-content;
padding-top: 105px;
}
.case-name .tag {
display: inline-block;
color: #fff;
font-size: 28px;
line-height: 67px;
border-radius: 34px;
font-weight: bold;
text-align: center;
padding: 0 36px;
background-color: #00b7ff;
margin: 0 30px 0 0;
}
.government .case-name .tag {
background-color: #e6492d;
}
.schools .case-name .tag {
background-color: #21bf73;
}
.manufacturing .case-name .tag {
background-color: #006ee1;
}
.version-2 .tag {
background-color: #e6492d;
}
.case-name .name {
font-size: 67px;
font-weight: bold;
color: #fff;
line-height: 87px;
}
.banner .features {
color: #fff;
text-align: center;
font-size: 22px;
} div .project-background {
border-radius: 40px;
box-shadow: 18px 23px 51px 2px rgb(41 41 41 / 10%);
padding-right: 65px;
margin: -145px auto 0;
background-color: #fff;
}
.project-background .content-left {
width: 45%;
font-size: 0;
}
.project-background .content-right {
width: 49%;
font-size: 0;
}
.project-background h2 {
text-align: left;
padding-bottom: 18px;
border-bottom: 1px solid #101f3a;
}
.project-background .t {
margin-bottom: 0;
text-indent: 2em;
} div .project-requirements {
margin-top: 6vw;
}
.project-requirements .t {
margin-bottom: 0;
text-indent: 2em; }
.intro {
background-color: #f7f9fa;
border-radius: 20px;
margin-top: 30px;
padding: 35px 0 16px 20px;
}
.colspan1 .intro {
padding-bottom: 30px;
}
.intro .dot {
position: relative;
padding-left: 30px;
display: inline-block;
vertical-align: top;
width: 49.5%;
}
.colspan1 .dot {
width: 100%;
}
.intro .dot:nth-child(1),
.intro .dot:nth-child(3) {
padding-right: 30px;
}
.intro .dot:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
position: absolute;
left: 0;
top: 6px;
} .project-deployment {
margin-top: 6vw;
}
.project-deployment h2 + .t {
text-align: center;
width: 1000px;
max-width: 80%;
margin: 0 auto 40px;
}
.project-deployment .content-left {
width: 59%;
}
.project-deployment .content-right {
width: 40%;
min-height: 393px;
background-color: #006ee1;
padding: 30px 37px;
}
.project-deployment .content-right h3,
.project-deployment .content-right h4 {
color: #fff;
}
.project-deployment .content-right .dot {
color: #fff;
margin-bottom: 0;
position: relative;
padding-left: 15px;
}
.project-deployment .content-right .dot:before {
content: "";
display: inline-block;
width: 7px;
height: 7px;
background-color: #00b7ff;
border-radius: 50%;
position: absolute;
left: 0;
top: 11px;
}
.content-right > h3:first-child {
margin-top: 0;
} .program-hightlights {
margin-top: 6vw;
}
div .program-hightlights h2 {
margin-bottom: 40px;
}
.program-hightlights .display-flex {
align-items: stretch;
}
.program-hightlights h3 {
display: flex;
align-items: center;
}
.program-hightlights h3 img {
width: 66px;
height: 66px;
background-color: #00b7ff;
border-radius: 50%;
margin-right: 34px;
}
.program-hightlights .item {
width: calc(100% / 2);
padding: 8px 25px 35px;
border: 1px solid #f2f4f6;
border-top: 1px solid #00b7ff;
}
.program-hightlights .dot {
position: relative;
padding-left: 20px;
margin-bottom: 8px;
}
.program-hightlights .dot::before {
content: "";
display: inline-block; width: 11px;
height: 8px;
position: absolute;
left: 0;
top: 12px;
}
.program-hightlights .item:nth-child(2) {
border-top-color: #ffa300;
}
.program-hightlights .item:nth-child(3) {
border-top-color: #21bf73;
}
.program-hightlights .item:nth-child(4) {
border-top-color: #18ceff;
}
.program-hightlights .item:nth-child(5) {
border-top-color: #fdd000;
}
.program-hightlights .item:nth-child(2) img {
background-color: #ffa300;
}
.program-hightlights .item:nth-child(3) img {
background-color: #21bf73;
}
.program-hightlights .item:nth-child(4) img {
background-color: #18ceff;
}
.program-hightlights .item:nth-child(5) img {
background-color: #fdd000;
}
.colspan3 .item {
width: calc(100% / 3);
min-height: initial;
}
.colspan3 h3 {
display: block;
text-align: center;
}
.colspan3 h3 img {
display: block;
margin: 0 auto;
}
.colspan3 h3 img:last-child {
margin-bottom: 18px;
}
.colspan4 .item {
width: calc(100% / 4);
}
.colspan4 .dot {
padding-left: 0;
}
.colspan4 h3 {
display: block;
text-align: left;
}
.colspan4 h3 img:last-child {
display: block;
margin-bottom: 18px;
}
.colspan4 .dot::before {
display: none;
}
.colspan5 .item {
width: calc(100% / 5);
}
.colspan5 h3,
.colspan h3 {
display: block;
text-align: left;
}
.colspan5 span {
display: block;
font-size: 22px;
font-weight: bold;
color: #00b7ff;
line-height: 39px;
}
.colspan span {
display: block;
font-size: 22px;
font-weight: bold;
line-height: 39px;
}
.colspan5 .dot {
padding-left: 0;
}
.colspan5 .dot::before {
display: none;
}
.colspan5 .item:nth-child(1) span,
.colspan .item:nth-child(1) span {
color: #00b7ff;
}
.colspan5 .item:nth-child(2) span,
.colspan .item:nth-child(2) span {
color: #ffa300;
}
.colspan5 .item:nth-child(3) span,
.colspan .item:nth-child(3) span {
color: #21bf73;
}
.colspan5 .item:nth-child(4) span,
.colspan .item:nth-child(4) span {
color: #18ceff;
}
.colspan5 .item:nth-child(5) span,
.colspan .item:nth-child(5) span {
color: #fdd000;
} div .other-cases {
margin-top: 6vw;
padding-bottom: 6vw;
}
.other-cases .display-flex {
align-items: stretch;
}
.other-cases .content-top {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #101f3a;
padding-bottom: 46px;
}
.other-cases h2 {
margin-bottom: 0;
}
.other-cases .item {
width: 30%;
margin-top: 50px;
}
.other-cases h3 {
margin-top: 0;
cursor: pointer;
}
.other-cases .item:hover h3 {
text-decoration: underline;
color: #006ee1;
}
@media (max-width: 769px) {
.case-name {
display: block;
}
.case-name .tag {
display: block;
margin: 0 auto 30px;
}
div .project-background {
margin: 50px auto 0;
}
div .project-background {
padding: 30px 20px;
}
.program-hightlights .item {
width: 100%;
margin-bottom: 30px;
}
.other-cases .item {
width: 100%;
}
}