body { padding: 2rem 0 0.75rem; background: #f4f4f4; } .banner { overflow: hidden; position: relative; } .banner .wrap { white-space: nowrap; transform: translatex(-16rem); -webkit-backface-visibility: hidden; } .banner .wrap .item { display: inline-block; } .banner .pic { height: 4.5rem; } .banner .dot { text-align: center; position: absolute; width: 100%; left: 0; bottom: 0.25rem; } .banner .dot .item { width: 0.3rem; height: 0.15rem; background: #efefef; display: inline-block; margin: 0 0.075rem; border-radius: 0.05rem; } .banner .dot .active { background: #fe4e57; } .go-top { height: 1.35rem; position: fixed; bottom: 3rem; right: 0.75rem; z-index: 1; } .section-title { font-size: 0.85rem; line-height: 1.85rem; color: #333; margin-left: 0.5rem; } .select-course, .form-box, .hot-course { background: #fff; padding-top: 0.2rem; } .select-course { padding-bottom: 0.35rem; } .select-course .select-content { height: 1.75rem; border-top: 1px solid #cacaca; border-bottom: 1px solid #cacaca; position: relative; } .select-course .tit-wrap { display: flex; font-size: 0.6rem; line-height: calc(1.75rem - 2px); color: #333; } .select-course .tit-wrap .item { width: 4.35rem; display: flex; } .select-course .tit-wrap .item:nth-child(2) { color: #ff5400; } .select-course .tit-wrap .item:last-child { width: 2.95rem; } .select-course .tit-wrap .item:last-child .text { width: 2.2rem; } .select-course .tit-wrap .item:last-child .after-icon { left: 0.7rem; } .select-course .tit-wrap .text { width: 3.4rem; text-align: center; position: relative; } .select-course .tit-wrap .after-icon { display: none; width: 0.8rem; position: absolute; bottom: -2px; left: 1.3rem; } .select-course .tit-wrap .icon { border-top: 0.25rem solid #4c4c4c; border-bottom: 0.25rem solid transparent; border-left: 0.2rem solid transparent; border-right: 0.2rem solid transparent; margin-top: auto; margin-bottom: auto; transform: translatey(0.15rem); } .select-course .tit-wrap .line { width: 1px; height: 0.5rem; background: #c4c4c4; margin: auto; margin-right: 0; } .select-course .tit-min-wrap { display: none; position: absolute; width: 100%; top: 1.725rem; left: 0; padding: 0 0.25rem; background: #fff; z-index: 1; } .select-course .tit-min-wrap .aim { display: none; } .select-course .tit1-wrap { height: 3.9rem; font-size: 0.55rem; line-height: 1.3rem; color: #666; } .select-course .tit1-wrap .item { padding-left: 0.25rem; border-bottom: 1px solid #f4f4f4; } .select-course .tit2-wrap { height: calc(11.7rem - 1px); overflow: auto; font-size: 0.55rem; line-height: 1.3rem; color: #666; } .select-course .tit2-wrap::-webkit-scrollbar { background: #f4f4f4; width: 0.25rem; border-radius: 0.125rem; } .select-course .tit2-wrap::-webkit-scrollbar-thumb { background: #c2c2c2; border-radius: 0.125rem; } .select-course .tit2-wrap .item { padding-left: 0.25rem; border-bottom: 1px solid #f4f4f4; } .select-course .tit3-wrap, .select-course .tit4-wrap { padding-bottom: 0.75rem; } .select-course .tit3-wrap .tit, .select-course .tit4-wrap .tit { font-size: 0.55rem; line-height: 1.3rem; color: #666; margin-left: 0.25rem; } .select-course .tit3-wrap .min-wrap, .select-course .tit4-wrap .min-wrap { width: 15.5rem; display: flex; flex-flow: row wrap; text-align: center; font-size: 0.5rem; line-height: 0.6rem; color: #666; margin: -0.35rem 0 0 0.075rem; } .select-course .tit3-wrap .min-wrap .item, .select-course .tit4-wrap .min-wrap .item { display: flex; width: 2.75rem; height: 1.5rem; border: 0.05rem solid #cacaca; border-radius: 0.1rem; margin: 0.35rem 0 0 0.35rem; } .select-course .tit3-wrap .min-wrap p, .select-course .tit4-wrap .min-wrap p { margin: auto; } .select-course .tit3-wrap .min-wrap .active, .select-course .tit4-wrap .min-wrap .active { border-color: #ff524b; color: #ff524b; } .select-course .tit3-wrap .button-box, .select-course .tit4-wrap .button-box { width: 10.5rem; display: flex; justify-content: space-between; margin: 0.5rem auto 0; font-size: 0.6rem; line-height: 1.5rem; color: #fff; text-align: center; } .select-course .tit3-wrap .button, .select-course .tit4-wrap .button { width: 5rem; border-radius: 0.75rem; } .select-course .tit3-wrap .button1, .select-course .tit4-wrap .button1 { background: #999; } .select-course .tit3-wrap .button2, .select-course .tit4-wrap .button2 { background: linear-gradient(90deg, #f67947, #f64e4b); box-shadow: 0 0.25rem 0.5rem rgba(246, 68, 77, 0.48); } .select-course .course-wrap { width: 15rem; margin: 0.5rem auto 0; } .select-course .course-wrap .item { display: flex; border: 0.05rem solid #e7e7e7; border-radius: 0.2rem; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.06); padding: 0.2rem 0 0.35rem; margin-bottom: 0.35rem; } .select-course .course-wrap .left { width: 9.75rem; margin: 0 1.05rem 0 0.4rem; } .select-course .course-wrap .title { font-size: 0.75rem; line-height: 1.55rem; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .select-course .course-wrap .flag-box { display: flex; font-size: 0.4rem; color: #ff5400; line-height: calc(.75rem - 2px); text-align: center; margin: 0 0 0.25rem -0.4rem; } .select-course .course-wrap .flag { width: 2rem; border: 1px solid #ff5400; border-radius: 0.15rem; margin-left: 0.4rem; } .select-course .course-wrap .text { font-size: 0.5rem; line-height: 0.75rem; color: #333; } .select-course .course-wrap span { font-weight: 700; } .select-course .course-wrap .right { display: flex; flex-direction: column; height: 3.5rem; margin: auto 0; } .select-course .course-wrap .price { font-size: 0.65rem; line-height: 1.25rem; color: #f94834; font-weight: 700; } .select-course .course-wrap .button { display: block; width: 2.25rem; text-align: center; font-size: 0.55rem; line-height: 0.9rem; color: #fff; padding: 0.225rem 0; border-radius: 0.2rem; background: linear-gradient(90deg, #f67947, #f64e4b); margin: auto auto 0; } .select-course .more { font-size: 0.6rem; line-height: 1.4rem; color: #666; text-align: center; text-decoration: underline; } .form-box { margin-top: 0.4rem; padding-bottom: 0.75rem; } .form-box form { width: 15rem; height: 11.9rem; background: url(/uploads/image/kcimg/form_box_bg.png) no-repeat; background-size: cover; margin: 0 auto; border-radius: 0.3rem; padding: 0.75rem 1.5rem 0; } .form-box select, .form-box input { width: 12rem; height: 1.75rem; background: #fff; margin-bottom: 0.4rem; font-size: 0.55rem; line-height: 1.75rem; padding: 0 0.55rem; } .form-box select { background: #fff url(/uploads/image/kcimg/form_box_icon.png) no-repeat 11rem center; background-size: 0.475rem 0.3rem; color: #666; } .form-box .submit { text-align: center; width: 7.5rem; font-size: 0.6rem; line-height: 1.5rem; color: #fff; border-radius: 0.75rem; margin: 0.35rem auto 0; background: linear-gradient(90deg, #f67947, #f64e4b); box-shadow: 0 0.25rem 0.5rem rgba(246, 68, 77, 0.48); } .hot-course { margin-top: 0.4rem; padding-bottom: 2.75rem; } .hot-course .content { overflow: auto; -ms-overflow-style: none; } .hot-course .content::-webkit-scrollbar { width: 0; } .hot-course .tit-wrap { white-space: nowrap; font-size: 0.6rem; line-height: 1.15rem; color: #898989; } .hot-course .tit-wrap .item { display: inline-block; margin: 0 0.125rem; padding: 0 0.5rem; border-radius: 0.575rem; } .hot-course .tit-wrap .active { color: #fff; background: linear-gradient(90deg, #f67947, #f6494c); } .hot-course .wrap { width: 15rem; height: 5.4rem; margin: 0.5rem auto 0; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: space-between; font-size: 0.6rem; line-height: 1.5rem; } .hot-course .wrap .item { width: 7.25rem; height: 1.5rem; background: #e3e3e3; border-radius: 0.35rem; position: relative; } .hot-course .link { position: absolute; width: 100%; background: #eee; border-radius: 0.3rem; bottom: 0.15rem; left: 0; display: flex; align-items: center; color: #333; } .hot-course .icon { height: 0.55rem; margin: 0 0.35rem 0 0.5rem; } .hot-course .text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hot-course .button { width: 7.5rem; text-align: center; font-size: 0.6rem; line-height: 1.5rem; color: #fff; background: linear-gradient(90deg, #f67947, #f64e4b); box-shadow: 0 0.25rem 0.5rem rgba(246, 68, 77, 0.48); border-radius: 0.75rem; margin: 0.4rem auto; } ::-webkit-input-placeholder { color: #666; } :-moz-placeholder { color: #666; } ::-moz-placeholder { color: #666; } :-ms-input-placeholder { color: #666; }