html,
body {
height: 100%;
}
#main {
height: 100%;
}
#main .button {
font-size: 0.6rem;
line-height: 1.5rem;
color: #000102;
background: #ffd800;
-moz-border-radius: 0.75rem;
border-radius: 0.75rem;
text-align: center;
}
#main .pop {
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: -moz-calc(1.95rem 2px);
top: calc(1.95rem 2px);
z-index: 2;
}
#main .pop .container {
width: 12.4rem;
position: absolute;
top: 50%;
left: 1.8rem;
margin-top: -7.5rem;
}
#main .pop .close {
position: absolute;
top: -2rem;
right: 0.375rem;
}
#main .pop .title {
text-align: center;
}
#main .pop .content {
width: 11.5rem;
height: 10.65rem;
background: white;
margin: 0 auto;
-moz-border-radius: 0 0 0.45rem 0.45rem;
border-radius: 0 0 0.45rem 0.45rem;
position: relative;
}
#main .pop form {
padding-top: 1.05rem;
}
#main .pop .item {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 9.4rem;
margin: 0 auto 0.85rem;
}
#main .pop label {
font-size: 0.6rem;
line-height: 1.5rem;
color: #000102;
}
#main .pop input,
#main .pop select {
width: 6.35rem;
height: 1.5rem;
background: #eee;
outline: none;
font-size: 0.6rem;
line-height: 1.5rem;
color: #000102;
padding: 0 0.5rem;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#main .pop select {
background: #eee url(/uploads/image/zcmimg/icon_pop_bottom.png) no-repeat 5.25rem 0.6rem;
-moz-background-size: 0.6rem 0.35rem;
background-size: 0.6rem 0.35rem;
}
#main .pop .submit {
width: 5.5rem;
margin: 0.95rem auto 0;
}
#main .pop .other {
display: none;
padding-top: 2rem;
}
#main .pop .tit {
font-size: 0.7rem;
line-height: 1.1rem;
color: #000102;
text-align: center;
}
#main .pop .text {
width: 9rem;
font-size: 0.8rem;
line-height: 1.15rem;
color: #ff3818;
font-weight: bold;
margin: 0.5rem auto 0;
text-align: justify;
}
#main .main-container {
background: #f16550 url(/uploads/image/zcmimg/bg.png) no-repeat center 22rem;
-moz-background-size: 16rem 97rem;
background-size: 16rem 97rem;
}
#main .head {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: -moz-calc(100% - 2px);
width: calc(100% - 2px);
height: 1.95rem;
position: fixed;
top: 0;
border: 1px solid #535353;
background: -webkit-gradient(linear, left bottom, left top, from(#ebebeb), to(#fff));
background: -webkit-linear-gradient(bottom, #ebebeb, #fff);
background: -moz-linear-gradient(bottom, #ebebeb, #fff);
background: linear-gradient(to top, #ebebeb, #fff);
text-align: center;
z-index: 1;
}
#main .head .back,
#main .head .tel {
position: absolute;
top: 0;
}
#main .head .back {
width: 1.5rem;
height: 1.95rem;
left: 0;
}
#main .head .back img {
margin-top: 0.75rem;
color: #535353;
}
#main .head .logo {
width: 3.875rem;
height: 100%;
margin: 0 auto;
}
#main .head .logo img {
margin-top: 0.375rem;
color: #aa0021;
font-weight: bold;
}
#main .head .tel {
width: 2rem;
height: 1.95rem;
right: 0;
}
#main .head .tel img {
margin-top: 0.575rem;
color: #535353;
}
#main .banner {
height: 14rem;
margin-top: -moz-calc(1.95rem 2px);
margin-top: calc(1.95rem 2px);
background: url(/uploads/image/zcmimg/banner_bg.png) no-repeat;
-moz-background-size: cover;
background-size: cover;
padding-top: 9.8rem;
}
#main .banner .wrap {
width: 14.5rem;
background: rgba(99, 0, 0, 0.62);
margin: 0 auto;
overflow: hidden;
padding: 0.5rem 1rem;
-moz-border-radius: 0.5rem;
border-radius: 0.5rem;
}
#main .banner .item {
width: 5.9rem;
float: left;
overflow: hidden;
}
#main .banner .item1,
#main .banner .item3 {
margin-right: 0.7rem;
}
#main .banner .icon {
width: 1.95rem;
height: 1.6rem;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
text-align: center;
float: left;
}
#main .banner img {
margin: auto;
}
#main .banner .text {
font-size: 0.65rem;
line-height: 1.6rem;
color: #ffd800;
letter-spacing: .3em;
font-weight: bold;
position: relative;
float: left;
}
#main .banner .text:after {
content: "";
position: absolute;
border: 0.15rem solid transparent;
border-left: 0.15rem solid #ffd800;
top: 0.65rem;
right: -0.5rem;
}
#main .section-title {
width: 14.5rem;
height: 2rem;
margin: 0 auto;
text-align: center;
}
#main .section1 .container {
width: 14.55rem;
margin: 0.75rem auto 0;
}
#main .section1 .project {
margin-bottom: 0.375rem;
}
#main .section1 .project1 .top {
-moz-border-radius: 0.4rem 0.4rem 0 0;
border-radius: 0.4rem 0.4rem 0 0;
}
#main .section1 .project1 .top img {
-webkit-transform: rotatez(90deg);
-moz-transform: rotatez(90deg);
-ms-transform: rotate(90deg);
transform: rotatez(90deg);
}
#main .section1 .project1 .content {
display: block;
}
#main .section1 .project3 .item2 .button {
width: 5.75rem;
margin: 0.65rem auto 0;
}
#main .section1 .project3 .item3 .text {
text-align: center;
text-decoration: underline;
}
#main .section1 .project3 .item3 .button {
width: 4.45rem;
}
#main .section1 .item {
width: 12.25rem;
margin: 0 auto 1.35rem;
}
#main .section1 .item2 .text {
width: 11.55rem;
}
#main .section1 .item4 {
margin-bottom: 0;
}
#main .section1 .item4 .button {
width: 5.8rem;
margin: 1.05rem auto 0;
}
#main .section1 .item1 .button,
#main .section1 .item3 .button {
width: 5.75rem;
margin: 0.65rem auto 0;
}
#main .section1 .top {
position: relative;
background: #962614;
-moz-border-radius: 0.4rem;
border-radius: 0.4rem;
}
#main .section1 .top img {
color: white;
position: absolute;
top: 0.8rem;
right: 4.2rem;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
#main .section1 h3.tit {
font-size: 0.6rem;
line-height: 1.95rem;
color: white;
text-align: center;
}
#main .section1 .content {
display: none;
background: white;
-moz-border-radius: 0 0 0.375rem 0.375rem;
border-radius: 0 0 0.375rem 0.375rem;
padding-top: 1.05rem;
overflow: hidden;
}
#main .section1 .min-tit {
text-align: center;
}
#main .section1 .dashed-line {
border: 1px dashed #ffce22;
}
#main .section1 h4.tit {
font-size: 0.65rem;
color: #ff3e1f;
position: relative;
display: inline-block;
padding: 0 0.2rem;
background: white;
top: -0.45rem;
}
#main .section1 .text-div {
overflow: hidden;
}
#main .section1 .text-div .text {
float: left;
}
#main .section1 .text {
font-size: 0.55rem;
line-height: 0.9rem;
color: #000102;
}
#main .section1 .circle {
width: 0.2rem;
height: 0.2rem;
-moz-border-radius: 50%;
border-radius: 50%;
background: #ff3e1f;
float: left;
margin: 0.35rem 0.25rem 0;
}
#main .section1 .button-box {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 9.65rem;
margin: 0.65rem auto 0;
}
#main .section1 .button-box .button {
width: 4.45rem;
}
#main .section1 .school-box {
width: 14.55rem;
height: 2.75rem;
position: relative;
left: -1.15rem;
}
#main .section1 .wrap {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
width: 29.1rem;
position: absolute;
}
#main .section1 li {
width: 2.75rem;
height: 2.75rem;
-moz-border-radius: 50%;
border-radius: 50%;
border: 0.1rem solid transparent;
overflow: hidden;
}
#main .section1 .border {
border-color: #ffd800;
}
#main .section1 .detail {
width: 14.55rem;
height: 7.85rem;
background: #eee;
margin: 0.7rem 0 0 -1.15rem;
position: relative;
}
#main .section1 .detail:before {
content: "";
position: absolute;
border: 0.5rem solid transparent;
border-bottom: 0.5rem solid #eee;
top: -0.95rem;
left: 6.775rem;
}
#main .section1 .detail .text {
margin-left: 3.3rem;
font-weight: bold;
}
#main .section1 .detail .text span {
font-weight: 100;
}
#main .section1 .tit-box {
text-align: center;
}
#main .section1 .tit-box .circle {
display: inline-block;
margin: 1.25rem 0 0 0;
float: none;
vertical-align: top;
}
#main .section1 .tit-box p {
display: inline-block;
font-size: 0.55rem;
line-height: 2.5rem;
color: #000102;
margin-right: 0.4rem;
}
#main .section1 .school-name {
display: inline-block;
font-size: 0.7rem;
line-height: 2.5rem;
color: #000102;
margin: 0 0.3rem 0 0.5rem;
}
#main .section1 .lang span {
text-decoration: underline;
color: #ff3e1f;
}
#main .section2 {
margin-top: 1.75rem;
}
#main .section2 .content {
height: 9.95rem;
margin-top: 0.7rem;
position: relative;
overflow: hidden;
}
#main .section2 .wrap {
width: 67.2rem;
overflow: hidden;
position: absolute;
left: -8.8rem;
}
#main .section2 .item {
width: 11.2rem;
float: left;
position: relative;
-moz-border-radius: 0.45rem;
border-radius: 0.45rem;
overflow: hidden;
-webkit-transform: scale(0.8, 0.8);
-moz-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
#main .section2 .item2 {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
}
#main .section2 .item2 .cover {
display: none;
}
#main .section2 .detail {
width: 100%;
height: 7.1rem;
background: rgba(61, 1, 1, 0.65);
position: absolute;
bottom: 0;
text-align: center;
}
#main .section2 .tit {
font-size: 0.85rem;
line-height: 2.25rem;
color: white;
}
#main .section2 .text {
width: 9.2rem;
margin: 0 auto;
font-size: 0.55rem;
line-height: 0.9rem;
color: white;
text-align: left;
}
#main .section2 .button-box {
width: 9.3rem;
margin: 0.8rem auto 0;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#main .section2 .button {
width: 4.5rem;
}
#main .section2 .cover {
width: 100%;
height: 100%;
background: black;
opacity: .7;
position: absolute;
top: 0;
}
#main .section3 {
margin-top: 1.7rem;
}
#main .section3 .top {
width: 14.15rem;
height: 4.1rem;
background: white;
-moz-border-radius: 0.4rem;
border-radius: 0.4rem;
margin: 0.8rem auto 0.4rem;
padding-top: 0.6rem;
}
#main .section3 .text-box {
overflow: hidden;
margin-left: 1.4rem;
}
#main .section3 .text-box:first-child {
margin-bottom: 0.3rem;
}
#main .section3 .circle {
width: 0.2rem;
height: 0.2rem;
-moz-border-radius: 50%;
border-radius: 50%;
background: #ff3e1f;
float: left;
margin: 0.35rem 0.5rem 0 0;
}
#main .section3 .text {
width: 10.5rem;
font-size: 0.55rem;
line-height: 0.9rem;
color: #000102;
float: left;
}
#main .section3 .wrap {
width: 14.2rem;
overflow: hidden;
margin: 0 auto;
position: relative;
left: -0.1rem;
}
#main .section3 .item {
width: 7rem;
height: 3.75rem;
position: relative;
float: left;
margin: 0.1rem 0 0 0.1rem;
overflow: hidden;
}
#main .section3 .item1 {
-moz-border-radius: 0.4rem 0 0 0;
border-radius: 0.4rem 0 0 0;
}
#main .section3 .item2 {
-moz-border-radius: 0 0.4rem 0 0;
border-radius: 0 0.4rem 0 0;
}
#main .section3 .item3 {
-moz-border-radius: 0 0 0 0.4rem;
border-radius: 0 0 0 0.4rem;
}
#main .section3 .item4 {
-moz-border-radius: 0 0 0.4rem 0;
border-radius: 0 0 0.4rem 0;
}
#main .section3 .cover {
width: 100%;
height: 100%;
background: rgba(61, 1, 1, 0.55);
position: absolute;
top: 0;
text-align: center;
}
#main .section3 .tit {
font-size: 0.8rem;
line-height: 1.75rem;
color: white;
}
#main .section3 .button {
width: 4.1rem;
margin: 0 auto;
}
#main .section4 {
margin-top: 1.75rem;
padding-bottom: 4rem;
}
#main .section4 .container {
margin-top: 0.65rem;
position: relative;
}
#main .section4 .content {
width: 14.5rem;
position: relative;
padding-top: 1rem;
height: 13.65rem;
margin: 0 auto;
overflow: hidden;
}
#main .section4 .content .button {
display: inline-block;
padding: 0 0.8rem;
margin-top: 0.3rem;
}
#main .section4 .axis {
width: 1px;
height: 23.75rem;
background: white;
margin: 0 auto;
}
#main .section4 .circle {
width: 0.275rem;
height: 0.275rem;
-moz-border-radius: 50%;
border-radius: 50%;
background: white;
position: absolute;
left: 7.1125rem;
}
#main .section4 .circle1 {
top: 0.9rem;
}
#main .section4 .circle2 {
top: 5.05rem;
}
#main .section4 .circle3 {
top: 8.25rem;
}
#main .section4 .circle4 {
top: 13.2rem;
}
#main .section4 .circle5 {
top: 14.75rem;
}
#main .section4 .circle6 {
top: 18.1rem;
}
#main .section4 .circle7 {
top: 22.15rem;
}
#main .section4 .circle8 {
top: 24.6rem;
}
#main .section4 .date {
font-size: 0.65rem;
line-height: 0.95rem;
color: white;
font-weight: bold;
position: absolute;
}
#main .section4 .date1,
#main .section4 .date3,
#main .section4 .date5,
#main .section4 .date7 {
right: 8.05rem;
}
#main .section4 .date2,
#main .section4 .date4,
#main .section4 .date6,
#main .section4 .date8 {
left: 8.05rem;
}
#main .section4 .date1 {
top: 0.55rem;
}
#main .section4 .date2 {
top: 4.7rem;
}
#main .section4 .date3 {
top: 7.9rem;
}
#main .section4 .date4 {
top: 12.85rem;
}
#main .section4 .date5 {
top: 14.35rem;
}
#main .section4 .date6 {
top: 17.7rem;
}
#main .section4 .date7 {
top: 21.8rem;
}
#main .section4 .date8 {
top: 24.25rem;
}
#main .section4 .detail {
width: 6.75rem;
-moz-border-radius: 0.4rem;
border-radius: 0.4rem;
background: white;
padding: 0.5rem 0 0.6rem;
text-align: center;
position: absolute;
}
#main .section4 .detail:after {
content: "";
position: absolute;
width: 0.75rem;
height: 1px;
background: white;
}
#main .section4 .text {
font-size: 0.55rem;
line-height: 0.95rem;
color: #000102;
padding: 0 0.5rem;
}
#main .section4 .detail1,
#main .section4 .detail3,
#main .section4 .detail5,
#main .section4 .detail7 {
right: 0;
}
#main .section4 .detail1:after,
#main .section4 .detail3:after,
#main .section4 .detail5:after,
#main .section4 .detail7:after {
left: -0.5rem;
}
#main .section4 .detail2,
#main .section4 .detail4,
#main .section4 .detail6,
#main .section4 .detail8 {
left: 0;
}
#main .section4 .detail2:after,
#main .section4 .detail4:after,
#main .section4 .detail6:after,
#main .section4 .detail8:after {
right: -0.5rem;
}
#main .section4 .detail3 .text,
#main .section4 .detail6 .text {
text-align: left;
}
#main .section4 .detail1 {
top: 0;
}
#main .section4 .detail1:after {
top: 1.05rem;
}
#main .section4 .detail2 {
top: 3.2rem;
}
#main .section4 .detail2:after {
top: 1.95rem;
}
#main .section4 .detail3 {
top: 6.35rem;
}
#main .section4 .detail3:after {
top: 2.025rem;
}
#main .section4 .detail4 {
top: 9.6rem;
}
#main .section4 .detail4:after {
top: 3.725rem;
}
#main .section4 .detail5 {
top: 14.55rem;
}
#main .section4 .detail5:after {
top: 0.325rem;
}
#main .section4 .detail6 {
top: 16.05rem;
}
#main .section4 .detail6:after {
top: 2.15rem;
}
#main .section4 .detail7 {
top: 21rem;
}
#main .section4 .detail7 .text {
padding: 0;
}
#main .section4 .detail7:after {
top: 1.275rem;
}
#main .section4 .detail8 {
top: 23.5rem;
}
#main .section4 .detail8:after {
top: 1.25rem;
}
#main .section4 .cover {
width: 100%;
height: 3.65rem;
padding-top: 2.15rem;
position: absolute;
bottom: 0;
background: -webkit-gradient(linear, left bottom, left top, color-stop(40%, #f16550), color-stop(60%, rgba(241, 101, 80, 0.6)), color-stop(80%, rgba(241, 101, 80, 0.2)), to(rgba(241, 101, 80, 0)));
background: -webkit-linear-gradient(bottom, #f16550 40%, rgba(241, 101, 80, 0.6) 60%, rgba(241, 101, 80, 0.2) 80%, rgba(241, 101, 80, 0) 100%);
background: -moz-linear-gradient(bottom, #f16550 40%, rgba(241, 101, 80, 0.6) 60%, rgba(241, 101, 80, 0.2) 80%, rgba(241, 101, 80, 0) 100%);
background: linear-gradient(to top, #f16550 40%, rgba(241, 101, 80, 0.6) 60%, rgba(241, 101, 80, 0.2) 80%, rgba(241, 101, 80, 0) 100%);
}
#main .section4 .cover .button {
width: 7.55rem;
margin: 0 auto;
}
#main .foot {
width: 100%;
position: fixed;
bottom: 2.5rem;
text-align: center;
background: #ffd800;
font-size: 0.6rem;
line-height: 1.75rem;
color: #000102;
}