@charset "utf-8";

html									{ height:100%; width:100%; margin:0; padding:0; }
body 	  								{ height:100%; width:100%; margin:0; padding:0; line-height:1.5rem; color:#464646; background:#FCFEFD; font-family: "apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Helvetica Neue","Arial","Noto Sans","sans-serif","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; }

.iconfont 								{ font-family: "iconfont" !important; font-style:normal; font-weight:normal; font-variant:normal; text-transform:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing: grayscale; }

.btn-white                              { padding:0.5rem 1.5rem; border:solid 1px #ff5000; border-radius:0.5rem; color:#ff5000; width: fit-content; }
.btn-white:hover                        { cursor:pointer; background:#f60; color:#fff; }
.btn-color                              { padding:0.5rem 1.5rem; background:#ff5000; color:#fff; border-radius:0.5rem; width: fit-content; }
.btn-color:hover                        { cursor:pointer; background:#f60; }

.navbar                                 { position:fixed; z-index:999; left:0; top:0; right:0; height:5rem; border-bottom:solid 1px rgba(200,200,200,0.2); display:flex; align-items:center; justify-content:center;  }
.navbar.float                           { box-shadow:0 0 0.5rem #DEDEDE; background-color: rgba(255,255,255,0.75); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.navbar > div                           { width:75rem; display:flex; align-items:center; gap:0.75rem; }
.navbar > div .logo > img               { height:3rem; display:block; }
.navbar > div .goto                     { display:flex; flex:1; align-items:center; justify-content:center; }
.navbar > div .goto > a                 { padding:0.5rem 1rem; color:#555; text-decoration: none; }
.navbar > div .goto > a:hover           { cursor:pointer; color:#ff5000; }

.home                                   { margin-top:5rem; display:flex; flex-direction:column; align-items:center; justify-content:center; margin-bottom:4rem; }
.home .intro                            { width:75rem; display:flex; gap:2rem; padding:3rem 0 1.5rem 0; }
.home .intro > div                      { flex:1; }
.home .intro > div > .title             { font-size:1.75rem; line-height:3rem; font-weight:bold; color:#666; }
.home .intro > div > .desc              { padding:1rem 0; }
.home .intro > div > .navi              { display:flex; gap:1rem; }
.home .intro > div > .image             { width:100%; display:flex; }
.home .feature                          { width:75rem; display:flex; align-items:center; justify-content:center; gap:1.5rem; }
.home .feature > div                    { flex:1; padding:1rem 1.5rem 1.5rem 1.5rem; box-shadow:0 0 0.35rem #E8E8E8; height:8rem; border-radius:0.5rem; }
.home .feature > div > .title           { font-weight: bold; padding-bottom:0.75rem; font-size:1.25rem; }

.video                                  { scroll-margin-top:5rem; background:#fff2f0; display:flex; align-items:center; justify-content:center; padding:3rem 0; }
.video > div                            { width:75rem; display:flex; gap:2rem; }
.video > div > div                      { flex:1; }
.video > div > div > .title             { font-size:1.75rem; line-height:3rem; font-weight:bold; color:#666; }
.video > div > div > .desc 				{ padding:1rem 0; }
.video > div > div > video              { aspect-ratio: 16 / 9; width:100%; display:block; }
.video > div > .vpr                     { background: url(/images/pic-1.png) center center no-repeat; aspect-ratio:16 / 9; background-size:100% 100%; position: relative; border-radius:0.5rem; overflow:hidden; }
.video > div > .vpr:after               { position:absolute; left:0; right:0; bottom:0; top:0; background: rgba(0,0,0,0.25); content:'\e663'; font-family:'iconfont'; z-index:1; display:flex; align-items:center; justify-content:center; font-size:5rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } 
.video > div > .vpr:hover:after         { cursor:pointer; color:#fff; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

.func                                   { scroll-margin-top:5rem; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem 0; }
.func > .header                         { font-size:2rem; text-align:center; font-weight:bold; color:#666; line-height:3rem; padding-bottom:1rem; }
.func > .navi                           { display:flex; border:solid 1px #ff5000; border-radius:0.5rem; margin-top:0.5rem; overflow: hidden; }
.func > .navi > div                     { padding:0.5rem 1.5rem; }
.func > .navi > div.select 				{ background:#ff5500; color:#fff; }
.func > .card                           { width:75rem; padding:2rem 0 2rem 0; }
.func > .card > div                     { display:flex; flex-wrap:wrap; gap:2rem; }
.func > .card > div > div 				{ width:calc((100% - 4rem) / 3); box-shadow:0 0 0.5rem #DDD; padding:1.5rem; border-radius:0.5rem; box-sizing: border-box; }
.func > .card > div > div > div     	{ text-align:center; }
.func > .card > div > div > .title     	{ font-weight:bold; font-size:1.25rem; padding-top:0.5rem; padding-bottom:0.5rem; }
.func > .card > div > div > .iconfont   { font-size:3.5rem !important; line-height:5rem !important; color:#f50; }

.sum                                    { display:flex; flex-direction:column; align-items:center; justify-content:center; background:url(/images/bar_count.jpg) center center no-repeat; background-size:100% auto; }
.sum > div                              { width:75rem; display:flex; padding:4rem 0; }
.sum > div > div                        { flex:1; padding-left:5rem; }
.sum > div > div .title                 { font-size:2.5rem; font-weight: bold; color:#f50; line-height:3.5rem; }

.price                                  { scroll-margin-top:5rem; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem 0; }
.price > .header                        { font-size:2rem; text-align:center; font-weight:bold; color:#666; line-height:3rem; padding-bottom:1.5rem; }
.price > .basic                         { width:75rem; border:solid 1px #ff5000; border-radius:0.5rem; display:flex; align-items:center; background: #fff2f0; }
.price > .basic .title                  { font-size:1.5rem; color:#ff5000; padding:0 1rem; }
.price > .basic .desc                   { flex:1; }
.price > .plus                          { width:100%; display:flex; align-self: center; align-items:center; justify-content:center; font-size:1.5rem !important; color:#f50; padding:1rem 0; position:relative; }

.price > .list                          { width:75rem; display:flex; gap:1.25rem; position:relative; }
.price > .list > div                    { flex:1; border-radius:0.5rem; box-shadow:0 0 0.5rem #DDD; border-radius:0.5rem; overflow:hidden; text-align:center; }
.price > .list > div .title             { font-size:1.5rem; background:#ff5000; color:#fff; line-height:2.5rem; padding:1.5rem 1rem; }
.price > .list > div .extra             { padding-bottom:1rem; }
.price > .list > div .btn-color         { margin:0.5rem auto 1.5rem auto; }

.price .amount                          { display:flex; align-items:center; justify-content:center; padding:1.5rem 0.5rem; }
.price .amount .rmb                     { padding-bottom:0.85rem; font-size:1.25rem; font-weight:bold; color:#ff5000; padding-right:0.25rem; }
.price .amount .money                   { font-size:2rem; color:#ff5000; font-style:italic; font-family:'Impact', 'Charcoal', 'sans-serif'; }
.price .amount .start                   { padding-top:0.8rem; padding-left:0.35rem; }
.price .memo                            { width:75rem; padding-top:1rem; padding-bottom:2rem; }

.appraise 								{ scroll-margin-top:5rem; background:#fff2f0; padding:3rem 0 5rem 0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.appraise > .header                    	{ font-size:2rem; text-align:center; font-weight:bold; color:#666; line-height:2.5rem; padding-bottom:1.5rem; }
.appraise > .list 						{ width:75rem; height:24rem; display:flex; gap:1rem; overflow-x:auto; flex-shrink:0; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.appraise > .list > div                 { width:calc((100% - 3rem) / 4); flex-shrink: 0; scroll-snap-align: start; border:solid 1px #E4E4E4; background: #fff; border-radius:0.5rem; padding:0.5rem 1rem; box-sizing: border-box; display:flex; flex-direction:column; align-items:center; }
.appraise > .list > div > .star         { color:#f50; padding:0.5rem 0 0.75rem 0; }
.appraise > .list > div > .star span    { font-size:1.25rem !important; }
.appraise > .list > div > .text         { font-style: italic; text-indent: 2em; line-height:1.75rem; height:11rem; }
.appraise > .list > div > .head         { width:4.5rem; height:4.5rem; border:solid 1px #CCC; border-radius:50%; display:block; }
.appraise > .list > div > .name         { font-weight:bold; padding-top:0.75rem; }

.history 								    { scroll-margin-top:5rem; padding:5rem 0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.history > div.upper 					    { width:75rem; gap:2rem; padding:0 0 0.5rem 0; display:flex; box-sizing: border-box; justify-content: flex-start; align-items: flex-end; }
.history > div.upper > div                  { border:solid 1px #f00; flex:1; position:relative; border-radius:0.5rem; padding:0.5rem 0.75rem;  }
.history > div.upper > div:before           { position:absolute; width:0; height:0; bottom:-1rem; left:calc(50% - 0.5rem); content:''; border:solid 0.5rem #f50; border-color:#f50 transparent transparent; }
.history > div.line                         { height:3.5rem; width:75rem; position:relative; display:flex; justify-content:space-evenly; }
.history > div.line:after                   { position:absolute; left:0; top:1rem; right:0; height:0.25rem; background:#ffc0b0; content:''; }
.history > div.line > div                   { font-size:1rem; line-height:1rem; position:relative; padding-top:1.75rem; z-index:1; font-style: italic; }
.history > div.line > div:after             { position:absolute; top:0.65rem; left:50%; transform: translateX(-50%); height:1rem; width:1rem; border:solid 0.2rem #ff5000; background: #fff; box-sizing: border-box; border-radius:50%; content:''; }
.history > div.lower                        { width:75rem; gap:2rem; padding:0.5rem 7% 0 7%; display:flex; box-sizing: border-box; justify-content: flex-start; align-items: flex-start; }
.history > div.lower > div                  { flex:1; position:relative; border:solid 1px #f00;  border-radius:0.5rem; padding:0.5rem 0.75rem; }
.history > div.lower > div:before           { position:absolute; width:0; height:0; top:-1rem; left:calc(50% - 0.5rem); content:''; border:solid 0.5rem #f50; border-color:transparent transparent #f50 transparent; }
.history .title                             { font-weight: bold; padding-bottom:0.25rem; }

.footer                           		    { background:#FA5A10; border-bottom:solid 1px rgba(0,0,0,0.15); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem 0 2rem 0; }
.footer > div 							    { width:75rem; display:flex; gap:2.5rem; }
.footer > div > div             		    { flex:1; }
.footer > div > div.lgr         		    { flex:2.5; }
.footer > div > div.lgr > .inc              { display:flex; gap:0.5rem; margin-bottom:0.5rem; }
.footer > div > div.lgr > .inc > div        { border-radius:0.25rem; padding:0.15rem 0.25rem; }
.footer > div > div.lgr > .inc > div > img  { display:block; height:2.5rem; }
.footer > div > div.lgr > .int              { text-indent: 2em; padding-bottom:0.5rem; }
.footer > div > div.lgr > div > .it         { font-style: italic; }
.footer > div > div > .qrcode               { width:8rem; height:8rem; display:block; }
.footer > div > div .title      		    { font-size:1.25rem; line-height:2.5rem; padding-bottom:0.5rem; font-weight:bold; }
.footer > div > div .menu       		    { display:flex; flex-direction:column; }
.footer > div > div .menu > div 		    { padding:0.2rem 0; }
.footer a                        		    { color:#fff; text-decoration: none; }

.about 									    { background:#FA5A10; border-top:solid 1px rgba(255,255,255,0.2); color:#fff; display:flex; align-items:center; justify-content:center; padding:2rem 0; }
.about > .copyright                 	    { width:75rem; }
.about  a                        		    { color:#fff; text-decoration: none; }

.mask 									    { position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.25); display:none; z-index:8000; display:flex; align-items:center; justify-content:center; }

.mask .service                              { width:30rem; height:26rem; background:#fff; position:relative; padding:1rem 1.5rem; }
.mask .service > .title                     { text-align: center; font-size:1.25rem; line-height:1.5rem; padding-bottom:0.5rem; }
.mask .service > .qrcode                    { display:flex; gap:1.5rem; padding-bottom:1.5rem; }
.mask .service > .qrcode > div              { border:solid 1px #DEDEDE; border-radius:0.5rem; overflow:hidden; padding:0.5rem; background:#FBFAFA }
.mask .service > .qrcode > div > img        { width:100%; display:block; }
.mask .service > .qrcode > div > div        { text-align:center; padding-bottom:0.5rem; padding-top:0.5rem; }
.mask .service > .phone                     { text-align:center; font-family:'Impact', 'Charcoal', 'sans-serif'; font-size:1.5rem; border:solid 1px #DEDEDE; border-radius:0.5rem; padding:0.75rem 1rem; background:#FBFAFA }

.mask .player                               { width:60rem; height:33.75rem; background:#fff; position:relative; }
.mask .close                                { position:absolute; top:-0.5rem; right:-0.5rem; width:1.5rem; height:1.5rem; border-radius:50%; background-color: #fff; border:solid 2px #f50; color:#f50; font-family: 'iconfont'; display:flex; align-items:center; justify-content:center; }
.mask .close:hover                          { cursor:pointer; background:#f50; color:#fff; }

.mask .apply                                { width:36rem; background:#fff; position:relative; }
.mask .apply .title                         { font-size:1.25rem; height:3rem; border-bottom:solid 1px #EEE; display:flex; align-items:center; justify-content: center; background:#fCFBFA; }
.mask .apply .form                          { padding:0.5rem 1rem; }
.mask .apply .form > div                    { display:flex; border-bottom:solid 1px #F0F0F0; padding:0.5rem 0; }
.mask .apply .form > div > span             { width:6.5rem; text-align:right; flex-shrink: 0; }
.mask .apply .form > div > span.must:before { content:'*'; color:#f00; margin-right:0.15rem; }
.mask .apply .form > div > input            { flex:1; border:none; outline: none; font-size:1rem; min-width:0; }
.mask .apply .form > div > input > div      { flex:1; }
.mask .apply .form > div > label            { padding:0 0.5rem; color:#0030ff; border:solid 1px #ccc; border-radius:0.25rem; margin-right:0.5rem; }
.mask .apply .form > div > label:hover      { color:#f30; cursor:pointer; }
.mask .apply .form .picker                  { display:flex; flex-wrap:wrap; }
.mask .apply .form .picker > label          { padding-right:1rem; }
.mask .apply .form .picker > label:before   { content:'\e64d'; font-family:'iconfont'; }
.mask .apply .form .picker > label.checked:before   { content:'\e607'; color:#f50; }
.mask .apply .submit                        { display:flex; gap:1rem; align-items:center; justify-content:center; padding:0.5rem 0 1rem 0; }

.toast                                      { position:fixed; z-index:9000; left:50%; transform: translateX(-50%); top:100%; background:#555; color:#fff; padding:0.5rem 1rem; border-radius:0.5rem; }