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

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

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

.relative { display: block; position: relative; }

.absolute { display: block; position: absolute; }

a.chat { display: block; width: 7.5rem; height: 1.1rem; margin: 0.5rem auto 0.125rem; background-image: linear-gradient(to right, #b351ff, #8584fc); color: #fff; box-sizing: border-box; text-align: center; line-height: 1.1rem; font-size: 0.5rem; border-radius: 0.2rem; }

a.chat img { width: 0.7rem; vertical-align: middle; margin-left: 0.5rem; }

div.sp-title { text-align: center; }

div.sp-title p.title { font-size: 0.75rem; display: inline-block; position: relative; }

div.sp-title p.title strong { text-shadow: 0.0325rem 0 0 #50E2FF, -0.0325rem 0 0 #E84479; position: relative; color: #B351FF; letter-spacing: 1px; }

div.sp-title p.title strong:before { content: attr(text); position: absolute; z-index: 10; color: #8684FC; -webkit-mask: linear-gradient(to left, #8684FC, transparent); }

div.sp-title p.title::before { content: ""; background: url("../img/icon_title_l.png") no-repeat center; display: block; width: 0.475rem; height: 0.525rem; background-size: contain; position: absolute; top: 0.2rem; left: -0.7rem; }

div.sp-title p.title::after { content: ""; background: url("../img/icon_title_r.png") no-repeat center; display: block; width: 0.425rem; height: 0.425rem; background-size: contain; position: absolute; top: 0.375rem; right: -0.575rem; }

div.sp-title p.intro { font-size: 0.4rem; color: #333; margin-top: 0.125rem; }

section { margin-top: 1rem; }

.sec1 .content { background-color: #F5F5F5; padding: 0.5rem; margin-top: 0.5rem; }

.sec1 .content .l { width: 7.75rem; }

.sec1 .content .l img { width: 7.75rem; margin-bottom: 0.125rem; }

.sec1 .content .l ul li { width: 2rem; font-size: 0.4rem; text-align: center; }

.sec1 .content .r { width: 6.75rem; }

.sec1 .content .r p { font-size: 0.45rem; line-height: 0.74rem; }

.sec1 .content .r a.chat-btn { display: block; margin: 0 auto; width: 5rem; height: 1.125rem; box-sizing: border-box; border: 1px solid #000; background-color: #fff; border-radius: 0.125rem; font-size: 0.45rem; line-height: 1.125rem; text-align: center; }

.sec2 ul { padding: 0.5rem 0.5rem 0; }

.sec2 ul li { margin-bottom: 0.5rem; width: 7.25rem; height: 4.275rem; padding: 0.75rem 0.25rem; box-sizing: border-box; }

.sec2 ul li h4 { font-size: 0.6rem; font-weight: bold; margin-bottom: 0.125rem; color: #fff; }

.sec2 ul li p { font-size: 0.45rem; line-height: 0.775rem; color: #fff; }

.sec2 ul li:nth-of-type(1) { background: url("../img/bg_sec2_1.png") no-repeat center; background-size: contain; }

.sec2 ul li:nth-of-type(2) { background: url("../img/bg_sec2_2.png") no-repeat center; background-size: contain; margin-top: -0.05rem; }

.sec2 ul li:nth-of-type(3) { background: url("../img/bg_sec2_3.png") no-repeat center; background-size: contain; }

.sec2 ul li:nth-of-type(4) { background: url("../img/bg_sec2_4.png") no-repeat center; background-size: contain; margin-top: -0.05rem; }

.sec3 { background-color: #F5F5F5; padding: 0.75rem 0.5rem; }

.sec3 ul { justify-content: space-around; margin-top: 0.75rem; }

.sec3 ul li { position: relative; width: 3.25rem; }

.sec3 ul li p { position: absolute; left: 50%; transform: translateX(-50%); font-size: 0.45rem; font-weight: bold; color: #fff; width: 2.25rem; top: 2.025rem; }

.sec4 ul { position: relative; margin-top: 0.75rem; }

.sec4 ul li { width: 5.25rem; height: 3.75rem; position: relative; margin-bottom: 0.125rem; }

.sec4 ul li p { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 0.5rem; width: 3rem; border-bottom: 2px solid #F02778; text-align: center; color: #fff; padding-bottom: 0.125rem; }

.sec4 ul div.sp-img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 6.55rem; height: 4.45rem; }

.sec4 ul div.sp-img p { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-shadow: 0.0375rem 0 0 #50E2FF, -0.0375rem 0 0 #E84479; font-size: 0.8rem; font-family: "FZHZGBJW"; text-align: center; color: #fff; width: 4.8rem; }

.sec5 ul { background-color: #DECEFF; padding: 0.5rem; margin-top: 0.75rem; }

.sec5 ul li { width: 7.25rem; margin-bottom: 0.5rem; }

.sec5 ul li p { font-size: 0.5rem; text-align: center; height: 1rem; line-height: 1rem; background-color: #fff; }

.sec5 ul li.sp { width: 100%; }

.sec5 a.chat-btn { display: block; margin: 0 auto; width: 7.5rem; height: 1.1rem; box-sizing: border-box; border: 1px solid #000; background-color: #fff; border-radius: 0.125rem; font-size: 0.45rem; line-height: 1.1rem; text-align: center; }

.sec6 ul { padding: 0.5rem 0.5rem 0; margin-top: 0.75rem; }

.sec6 ul li { width: 7.25rem; }

.sec6 ul li img { margin-bottom: 0.5rem; }

.sec7 { margin: 0.75rem 0.5rem; }

.sec7 form { margin-top: 0.75rem; }

.sec7 form input.name, .sec7 form input.tel { height: 1.35rem; border: none; outline: none; text-align: center; font-size: 0.5rem; color: #333; border-radius: 0.2rem; width: 100%; margin-bottom: 0.625rem; background-color: #F3F3F3; box-sizing: border-box; }

.sec7 form button.sub { width: 7.5rem; height: 1.35rem; background-image: linear-gradient(to right, #b351ff, #8584fc); color: #fff; box-sizing: border-box; text-align: center; line-height: 1.35rem; font-size: 0.6rem; border-radius: 0.2rem; border: none; width: 100%; }