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; }