body { padding: 2rem 0; background: #f2f2f2; } #main ::-webkit-input-placeholder { color: #999; } #main :-moz-placeholder { color: #999; } #main ::-moz-placeholder { color: #999; } #main :-ms-input-placeholder { color: #999; } #main .banner { display: block; width: 100%; } #main .section-prev { display: flex; width: 15.5rem; height: 5rem; background: #fff url(/uploads/image/kttimg/section_prev_bg.png) no-repeat right top; background-size: 7.6rem 2.75rem; margin: -1.25rem auto 0; position: relative; box-shadow: 0 0 0.6rem rgba(12, 3, 6, 0.1); } #main .section-prev .left { position: relative; margin-top: 0.4rem; } #main .section-prev .line { width: 0.95rem; height: 0.25rem; background: #ff761a; } #main .section-prev .circle { width: 0.95rem; height: 0.95rem; border-radius: 50%; background: #fff1cb; margin: 0.4rem 0 0 0.75rem; } #main .section-prev .text1 { font-size: 0.45rem; line-height: 0.45rem; color: #453419; font-weight: 700; margin: -0.95rem 0 0 0.6rem; } #main .section-prev .tit1 { font-size: 1rem; line-height: 1.25rem; color: #453419; font-weight: 700; margin-left: 1rem; } #main .section-prev .right { width: 8.3rem; margin: 1.15rem 0 0 1.2rem; } #main .section-prev .tit-box { width: 3.3rem; height: 0.25rem; background: #fff1cb; position: relative; font-size: 0.65rem; line-height: 0.75rem; color: #453419; font-weight: 700; } #main .section-prev .tit2 { position: absolute; left: 0; bottom: 0; } #main .section-prev .text2 { font-size: 0.55rem; line-height: 0.9rem; color: #404040; margin-top: 0.25rem; } #main .section { width: 15.5rem; margin: 1.25rem auto 0; } #main .section .button-box { width: 13.5rem; display: flex; justify-content: space-between; font-size: 0.6rem; line-height: 1.4rem; color: #453419; font-weight: 700; text-align: center; margin: 0.75rem auto 0; } #main .section .button { width: 6.25rem; border-radius: 0.7rem; background: linear-gradient(0, #fc0, #fff000); } #main .section-title-box { text-align: center; } #main .section-title-box .section-title { display: inline-block; position: relative; } #main .section-title-box p { font-size: 0.9rem; line-height: 0.9rem; color: #453419; font-weight: 700; } #main .section-title-box .icon-box { width: 1.45rem; display: flex; justify-content: space-between; align-items: center; position: absolute; top: 0.25rem; } #main .section-title-box .icon-box1 { left: -1.9rem; } #main .section-title-box .icon-box2 { right: -1.9rem; } #main .section-title-box .circle1 { width: 0.2rem; height: 0.2rem; border-radius: 50%; background: #f4e9da; } #main .section-title-box .circle2 { width: 0.3rem; height: 0.3rem; border-radius: 50%; background: #f5dfc1; } #main .section-title-box .circle3 { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #f6d6a9; } #main .section1 .tip-box { height: 2.75rem; background: #ff761a; position: relative; margin-top: 0.75rem; display: flex; align-items: center; } #main .section1 .icon { width: 0.8rem; height: 0.75rem; position: absolute; top: 0.35rem; left: 0.6rem; } #main .section1 .tip { font-size: 0.55rem; line-height: 0.9rem; color: #fff; margin-left: 1.9rem; } #main .section1 .content { background: #fff; padding: 0.3rem 0 0.6rem; box-shadow: 0 0 0.6rem rgba(12, 3, 6, 0.1); } #main .section1 .tit { text-align: center; font-size: 0.6rem; line-height: 1.3rem; color: #453419; font-weight: 700; } #main .section1 table { width: 14.75rem; margin: 0 auto; border-collapse: collapse; } #main .section1 tr:nth-child(2n 1) td { background: #f5f5f5; } #main .section1 tr:nth-child(2n) td { background: #fff1cb; } #main .section1 td { font-size: 0.55rem; line-height: 1.25rem; border: 0.125rem solid #fff; } #main .section1 td:first-child { width: 3.375rem; color: #453419; font-weight: 700; border-right-width: 0.25rem; text-align: center; } #main .section1 td:last-child { color: #404040; border-left: none; padding-left: 1.1rem; } #main .section2 .content { height: 7.25rem; margin-top: 0.75rem; position: relative; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: space-between; font-size: 0.55rem; line-height: 0.75rem; color: #fff; font-weight: 700; } #main .section2 .content .icon-box { width: 11.1rem; height: 0.6rem; top: 4.5rem; left: 2.2rem; } #main .section2 .item { display: flex; justify-content: center; align-items: center; width: 4.5rem; height: 1.75rem; background: #ff761a; } #main .section2 .empty { background: transparent; } #main .section2 .icon, #main .section2 .icon-box, #main .section2 .line, #main .section2 .ticon { position: absolute; } #main .section2 .icon { background: #ff761a; } #main .section2 .icon:after { content: ""; border: 0.2rem solid transparent; position: absolute; } #main .section2 .icon1, #main .section2 .icon2, #main .section2 .icon4 { width: 0.35rem; height: 0.1rem; } #main .section2 .icon1:after, #main .section2 .icon2:after, #main .section2 .icon4:after { top: -0.15rem; } #main .section2 .icon1, #main .section2 .icon2 { top: 0.825rem; } #main .section2 .icon1:after, #main .section2 .icon2:after { border-left-color: #ff761a; right: -0.4rem; } #main .section2 .icon1 { left: 4.725rem; } #main .section2 .icon2 { right: 4.925rem; } #main .section2 .icon3 { width: 0.1rem; height: 0.35rem; top: 1.975rem; right: 2.2rem; } #main .section2 .icon3:after { border-top-color: #ff761a; bottom: -0.4rem; left: -0.15rem; } #main .section2 .icon4 { top: 3.575rem; right: 4.725rem; } #main .section2 .icon4:after { border-right-color: #ff761a; left: -0.4rem; } #main .section2 .line { background: #ff761a; } #main .section2 .line1, #main .section2 .line2, #main .section2 .line3 { width: 0.1rem; } #main .section2 .line1, #main .section2 .line3 { height: 0.25rem; top: 0.35rem; } #main .section2 .line1 { left: 0; } #main .section2 .line2 { height: 0.6rem; top: 0; left: 5.5rem; } #main .section2 .line3 { right: 0; } #main .section2 .line4 { width: 100%; height: 0.1rem; top: 0.25rem; left: 0; } #main .section2 .ticon { border: 0.2rem solid transparent; border-top-color: #ff761a; bottom: -0.4rem; } #main .section2 .ticon1 { left: -0.15rem; } #main .section2 .ticon2 { left: 5.35rem; } #main .section2 .ticon3 { right: -0.15rem; } #main .section3 .icon-box { top: 0.5rem; } #main .section3 .content-box { margin-top: 0.75rem; background: url(/uploads/image/kttimg/section3_bg.jpg) no-repeat center top; background-size: 15.5rem 3.25rem; padding-top: 1.75rem; } #main .section3 .content { height: 9.5rem; background: #fff; border-radius: 1.45rem 1.45rem 0.7rem 0; position: relative; } #main .section3 .wrap1 { width: 14.5rem; font-size: 0.55rem; line-height: 1rem; color: #453419; font-weight: 700; padding: 0.65rem 0 0.45rem; margin: 0 auto; border-bottom: 1px dashed #453419; } #main .section3 .wrap1 li { position: relative; padding-left: 0.85rem; } #main .section3 .wrap1 li:before { content: ""; width: 0.15rem; height: 0.15rem; border-radius: 50%; background: #453419; position: absolute; top: 0.425rem; left: 0.25rem; } #main .section3 .wrap1 span { color: #ff761a; } #main .section3 .wrap2 { width: 6.75rem; font-size: 0.55rem; line-height: 0.8rem; color: #453419; font-weight: 700; margin-left: 0.5rem; } #main .section3 .wrap2 li { height: 0.3rem; background: #fff1cb; margin-top: 0.9rem; position: relative; } #main .section3 .wrap2 p { position: absolute; left: 0.25rem; bottom: 0; } #main .section3 .wrap2 span { color: #ff761a; } #main .section3 .wrap3 { width: 8rem; height: 5rem; background: #ff761a; border-radius: 0.7rem 0 0.7rem 0; position: absolute; right: 0.25rem; bottom: 0.25rem; font-size: 0.55rem; line-height: 0.9rem; color: #fff; padding: 0.7rem 0 0 0.4rem; } #main .section3 .wrap3 span { font-weight: 700; } #main .section3 .button { width: 7.5rem; font-size: 0.6rem; line-height: 1.4rem; color: #453419; font-weight: 700; text-align: center; margin: 0.75rem auto 0; } #main .section4 ul { background: #fff; box-shadow: 0 0 0.6rem rgba(12, 3, 6, 0.1); padding: 0.5rem 0 0.375rem 0.5rem; margin-top: 0.75rem; } #main .section4 li { display: flex; align-items: center; margin-bottom: 0.125rem; } #main .section4 .tit { width: 3.25rem; font-size: 0.6rem; line-height: 1.75rem; color: #fff; font-weight: 700; text-align: center; background: #ff761a; border-radius: 0.875rem 0 0 0.875rem; } #main .section4 .text { width: 11.25rem; height: 2.25rem; background: #fff1cb; display: flex; align-items: center; font-size: 0.55rem; line-height: 0.7rem; color: #333; padding-left: 0.6rem; } #main .section5 { padding-bottom: 1.25rem; } #main .section5 .info { margin-top: 0.75rem; height: 6.25rem; background: #fff; box-shadow: 0 0 0.6rem rgba(12, 3, 6, 0.1); border-right: 0.125rem solid #ff761a; display: flex; } #main .section5 .info .button { display: block; width: 3.75rem; font-size: 0.5rem; line-height: 1rem; color: #453419; font-weight: 700; border-radius: 0.5rem; text-align: center; margin-top: 0.25rem; } #main .section5 .left { width: 6.25rem; position: relative; text-align: center; } #main .section5 .info-pic { height: 6.25rem; } #main .section5 .flag { width: 100%; height: 1.95rem; background: #ff761a; border-radius: 0 1.1rem 0 0; position: absolute; bottom: 0; left: 0; padding-top: 0.2rem; color: #fff; } #main .section5 .name { font-size: 0.55rem; line-height: 0.8rem; } #main .section5 .year { font-size: 0.5rem; line-height: 0.8rem; } #main .section5 .right { width: 7.6rem; margin: 0.4rem 0 0 0.5rem; font-size: 0.55rem; line-height: 0.8rem; } #main .section5 .title { color: #404040; font-weight: 700; height: 1.6rem; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; /*! autoprefixer: off */ -webkit-box-orient: vertical; -webkit-box-pack: center; } #main .section5 .tit { color: #404040; margin-top: 0.2rem; } #main .section5 .text { height: 1.6rem; color: #595959; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; /*! autoprefixer: off */ -webkit-box-orient: vertical; -webkit-box-pack: center; } #main .section5 ul { display: flex; justify-content: space-between; margin-top: 0.9rem; text-align: center; } #main .section5 ul p { font-size: 0.55rem; line-height: 1.35rem; color: #404040; } #main .section5 ul a { display: block; height: 2rem; border-radius: 50%; background: #f6d6a9; font-size: 0.55rem; line-height: 0.75rem; color: #333; font-weight: 700; padding-top: 0.5rem; } #main .section5 li { width: 2.5rem; } #main .section5 .pic-box { height: 2.5rem; border-radius: 50%; overflow: hidden; background: url(/uploads/image/kttimg/teacher_bg.jpg) no-repeat; background: cover; } #main .section5 .pic { width: 100%; } #main .section5 .active .pic-box { border: 0.05rem solid #ff761a; transform: scale(1.1, 1.1); } #main .section5 .button-box { margin-top: 0.5rem; } #main .pop { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 10000; background: rgba(0, 0, 0, 0.7); } #main .pop .content { width: 12.5rem; height: 10.65rem; background: url(/uploads/image/kttimg/pop_bg.png) no-repeat; background-size: cover; position: absolute; top: 50%; left: 1.75rem; margin-top: -5.325rem; } #main .pop .close { width: 1rem; height: 1rem; margin-left: 11.5rem; } #main .pop .title { display: block; height: 1.5rem; margin: 0.9rem auto 0; } #main .pop form { width: 11.25rem; margin: 0.7rem auto 0; } #main .pop .item { display: flex; align-items: center; margin-bottom: 0.25rem; background: #fff; } #main .pop .icon-box { display: flex; justify-content: center; align-items: center; width: 1.55rem; height: 1rem; border-right: 1px solid #e6e6e6; } #main .pop .icon { width: 0.75rem; } #main .pop input { width: 9.5rem; font-size: 0.55rem; line-height: 1.75rem; height: 1.75rem; background: transparent; padding: 0 0.5rem; } #main .pop .submit { width: 5rem; font-size: 0.65rem; line-height: 1.55rem; color: #333; font-weight: 700; text-align: center; border-radius: 0.775rem; background: linear-gradient(0, #fc0, #fff000); box-shadow: 0 0.15rem 0.25rem rgba(195, 195, 195, 0.36); margin: 0.6rem auto 0; } img[], img[] { display: none; }