@font-face { font-family: 'fzxbsjw'; src: url("../fonts/FZXBSJW.1TTF"); }

.clearfix::after { content: " "; display: block !important; clear: both; }

.align-center { text-align: center; }

.relative { position: relative; }

.absolute { position: absolute; }

a.chat { display: block; width: 7.85rem; height: 1.3rem; background-color: #FFCE5A; font-size: 0.55rem; line-height: 1.3rem; color: #161631; text-align: center; margin: 1rem auto; border-radius: 2.5rem; }

a.chat img { display: inline-block; width: 0.775rem; vertical-align: middle; }

p.sp-title { font-size: 0.75rem; color: #161631; font-family: "fzxbsjw"; text-align: center; margin: 0 auto; }

div.line { margin-top: 0.25rem; text-align: center; height: 0.325rem; }

div.line img { width: 9.125rem; }

p.sp-intro { font-size: 0.5rem; color: #161631; font-family: "fzxbsjw"; text-align: center; margin-top: 0.375rem; }

img.icon-top { position: fixed; right: 0; top: 80%; width: 1.5rem; z-index: 10; }

html, body { scroll-behavior: smooth; }

.sec1 { margin-top: 0.75rem; }

.sec1 p.title { width: 3.25rem; background: url("../img/top_bg.jpg") no-repeat left center; background-size: contain; font-weight: bold; font-size: 0.5rem; color: #fff; text-align: center; line-height: 0.75rem; margin-bottom: 0.5rem; }

.sec1 ul { padding: 0 0.5rem; justify-content: space-evenly; }

.sec1 ul li img { width: 2.2rem; }

.sec1 ul li p { margin-top: 0.125rem; font-size: 0.45rem; color: #161631; text-align: center; }

.sec2 { margin-top: 1rem; padding: 0 0.5rem; position: relative; }

.sec2 img.aim { width: 10.525rem; margin-top: 0.625rem; }

.sec2 p.absolute { box-sizing: border-box; top: 4.525rem; right: 0; font-size: 0.5rem; color: #161631; width: 6.725rem; height: 5.675rem; line-height: 0.825rem; background-color: #fff; padding: 0.5rem; margin-right: 0.5rem; box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1); }

.sec2 a.chat { width: 7.85rem; height: 1.3rem; background-color: #FFCE5A; font-size: 0.55rem; line-height: 1.3rem; color: #161631; text-align: center; margin: 1rem auto; }

.sec3 { background-color: #F8F8F8; padding: 1rem 0.5rem 0; }

.sec3 div.title { justify-content: flex-start; align-items: center; margin-top: 0.75rem; }

.sec3 div.title img { width: 1.325rem; }

.sec3 div.title p { font-size: 0.5rem; color: #161631; font-family: "fzxbsjw"; margin-left: 0.25rem; }

.sec3 p.intro { font-size: 0.5rem; color: #161631; padding-left: 1.525rem; }

.sec3 div.book { margin-top: 0.75rem; }

.sec3 div.book img { width: 7.325rem; }

.sec3 div.book.sp { justify-content: space-evenly; }

.sec3 div.book.sp img { width: 4.25rem; }

.sec3 div.but { align-items: center; }

.sec3 div.but a.l { display: block; box-sizing: border-box; border: 1px solid #161631; color: #161631; font-size: 0.55rem; line-height: 1.25rem; text-align: center; width: 7.85rem; height: 1.3rem; border-radius: 2.5rem; }

.sec3 div.but a.chat { width: 5.5rem; }

.sec4 { background: url("../img/sec4_bg.jpg") no-repeat top center; padding: 1rem 0.5rem 0.25rem; }

.sec4 p.sp-title { position: relative; box-sizing: border-box; color: #fff; text-align: right; padding-right: 4.3rem; margin-top: 0.75rem; }

.sec4 p.sp-title img { position: absolute; width: 1.3rem; top: -0.7rem; left: 4.45rem; }

.sec4 p.sp-intro { color: #fff; }

.sec4 div.title { justify-content: flex-start; align-items: center; margin-top: 0.75rem; }

.sec4 div.title img.icon1 { width: 1.325rem; }

.sec4 div.title img.icon2 { width: 1.4rem; }

.sec4 div.title img.icon3 { width: 1.375rem; }

.sec4 div.title p { font-size: 0.5rem; color: #ffd766; font-family: "fzxbsjw"; margin-left: 0.25rem; }

.sec4 p.intro { font-size: 0.5rem; color: #fff; padding-left: 1.525rem; }

.sec4 div.lesson img { margin-top: 0.35rem; }

.sec4 div.lesson img.img1 { width: 4.75rem; }

.sec4 div.lesson img.img2 { width: 7.325rem; }

.sec4 div.lesson img.img3 { width: 7rem; }

.sec4 div.lesson .img4 { width: 7.625rem; }

.sec4 div.but { align-items: center; }

.sec4 div.but a.l { display: block; box-sizing: border-box; border: 1px solid #FFCE5A; color: #fff; font-size: 0.55rem; line-height: 1.25rem; text-align: center; width: 7.85rem; height: 1.3rem; border-radius: 2.5rem; }

.sec4 div.but a.chat { width: 5.5rem; }

.sec5 { padding: 0.5rem 0.5rem 1px; background-color: #F8F8F8; }

.sec5 p.sp-title { margin-top: 1rem; }

.sec5 p.sp-title img { width: 1.4rem; margin-right: 0.125rem; vertical-align: middle; }

.sec5 p.sp-title.b { position: relative; }

.sec5 p.sp-title.b img { position: absolute; left: 4.5rem; top: -0.075rem; width: 1.325rem; margin-right: 0; }

.sec5 p.sp-title.b.c img { width: 1.375rem; }

.sec5 div.line { margin-bottom: 0.375rem; }

.sec5 p.intro { font-size: 0.5rem; color: #161631; margin: 0.5rem 0; line-height: 0.75rem; }

.sec5 div.flex img { width: 7.325rem; margin-top: 0.375rem; }

.sec5 img.co-op { display: block; width: 14.95rem; margin: 0.75rem auto 0; }

.sec6 { background: url("../img/sec6_bg.jpg") no-repeat top center; padding: 0.5rem 0.5rem 0; }

.sec6 p.sp-title { color: #FFCE5A; }

.sec6 p.sp-intro { color: #fff; margin-bottom: 0.5rem; }

.sec6 img.l { width: 8.425rem; }

.sec6 div.title { justify-content: flex-start; align-items: center; margin-top: 0.75rem; }

.sec6 div.title img.icon1 { width: 1.325rem; }

.sec6 div.title img.icon2 { width: 1.4rem; }

.sec6 div.title img.icon3 { width: 1.375rem; }

.sec6 div.title p { font-size: 0.6rem; color: #ffd766; font-family: "fzxbsjw"; margin-left: 0.25rem; }

.sec6 div.title.sp { justify-content: center; }

.sec6 p.intro { font-size: 0.5rem; color: #fff; margin-bottom: 0.4rem; }

.sec6 div.but { align-items: center; }

.sec6 div.but a.l { display: block; box-sizing: border-box; border: 1px solid #FFCE5A; color: #fff; font-size: 0.55rem; line-height: 1.25rem; text-align: center; width: 7.85rem; height: 1.3rem; border-radius: 2.5rem; }

.sec6 div.but a.chat { width: 5.5rem; }

.sec7 { padding: 0.5rem 0.5rem 0; }

.sec7 .flex { align-items: center; margin-top: 0.5rem; }

.sec7 .flex img { width: 6.125rem; }

.sec7 .flex p { width: 2.25rem; line-height: 0.6rem; text-align: center; color: #161631; font-size: 0.45rem; position: relative; }

.sec7 .flex p img { position: absolute; width: 1.775rem; top: 1.65rem; left: 0.2rem; }

.sec7 .flex.sp p img { top: 2.225rem; }

.sec7 div.but { align-items: center; }

.sec7 div.but a.l { display: block; box-sizing: border-box; border: 1px solid #161631; color: #161631; font-size: 0.55rem; line-height: 1.25rem; text-align: center; width: 7.85rem; height: 1.3rem; border-radius: 2.5rem; }

.sec7 div.but a.chat { width: 5.5rem; }

.sec8 { background: url("../img/sec8_bg.jpg") no-repeat top center; padding: 1rem 0.5rem 0; }

.sec8 p.sp-title { color: #fff; }

.sec8 p.sp-intro { color: #fff; }

.sec8 .flex img { width: 7.375rem; margin-top: 0.25rem; }

.sec8 div.but { align-items: center; }

.sec8 div.but a.l { display: block; box-sizing: border-box; border: 1px solid #FFCE5A; color: #fff; font-size: 0.55rem; line-height: 1.25rem; text-align: center; width: 7.85rem; height: 1.3rem; border-radius: 2.5rem; }

.sec8 div.but a.chat { width: 5.5rem; }

.sec9 { padding: 1rem 0.5rem 0; }

.sec9 div.lesson img { margin-top: 0.25rem; }

.sec9 div.lesson img.img1 { width: 4.825rem; }

.sec9 div.lesson .img3 { width: 7.375rem; }

.sec9 div.but { align-items: center; }

.sec9 div.but a.l { display: block; box-sizing: border-box; border: 1px solid #161631; color: #161631; font-size: 0.55rem; line-height: 1.25rem; text-align: center; width: 7.85rem; height: 1.3rem; border-radius: 2.5rem; }

.sec9 div.but a.chat { width: 5.5rem; }

.sec10 { padding: 1rem 0.5rem; background: url("../img/sec10_bg.jpg") no-repeat top center; }

.sec10 p.sp-title { color: #fff; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }

.sec10 form input { box-sizing: border-box; display: block; width: 12.5rem; height: 1.35rem; font-size: 0.55rem; line-height: 1.35rem; text-align: center; margin: 0.65rem auto; border-radius: 2.5rem; border: 1px solid #fff; color: #fff; background-color: transparent; outline: none; }

.sec10 form input::-webkit-input-placeholder { color: #fff; }

.sec10 form input::-moz-placeholder { color: #fff; }

.sec10 form input:-ms-input-placeholder { color: #fff; }

.sec10 form input.sub { background-color: #FFCE5A; font-size: 0.7rem; color: #161631; border: none; }

.sec10 form span { font-size: 0.45rem; color: #fff; display: block; text-align: center; }