* { margin: 0; padding: 0; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } html, body { width: 100%; height: 100%; overflow: hidden; } @media screen and (min-width: 1401px) { body { max-width: 1400px; margin: 0 auto; position: relative; } } body { background-color: #FFF4F2; } img, span { display: inline-block; } .logo { width: 100%; padding-top: 1.7rem; padding-bottom: 1.5rem; text-align: center; } .logo img { text-align: center; width: 10rem; } .logo span { padding: 0.5rem; font-size: 2rem; height: 2rem; } .word { text-align: center; padding-bottom: 1.8rem; } .word img { width: 20rem; } .content { position: relative; margin: 0 4.4rem; } .content img { width: 100%; } .awaken-button .cover { position: absolute; bottom: 100%; left: 0; right: 0; z-index: 20; height: 7rem; margin: 0 4rem; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 30%, #FFF4F2 60%, #FFF4F2 100%); } .awaken-button { position: absolute; bottom: 0; left: 0; right: 0; z-index: 20; padding: 0 2rem 4rem; background-color: #FFF4F2; } .awaken-button button { text-transform: none; outline: 0; -webkit-appearance: button; width: 100%; font-size: 1.4rem; height: 4.8rem; -webkit-box-shadow: 0 0.4rem 1rem rgba(249, 140, 120, 0.4); box-shadow: 0 0.4rem 1rem rgba(249, 140, 120, 0.4); color: #ffffff; border-color: transparent; background-color: #F98C78; border-radius: 0.8rem; -webkit-transition: color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear,-webkit-box-shadow .2s linear; transition: color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear,-webkit-box-shadow .2s linear; } .mui-share-guide { position: fixed; top: 0px; left: 0px; right: 0px; z-index: 999; bottom: 0px; } .mui-share-guide::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.6); } .mui-share-guide .share-img-wrap { padding-top: 0.7rem; overflow: hidden; } .mui-share-guide .share-img-wrap .icon { float: right; height: 7.3rem; } .mui-share-guide .share-content { margin-top: -1rem; float: right; font-size: 1.7rem; color: #ffffff; } .mui-share-guide .share-content .item { display: block; padding-bottom: 1rem; } .mui-share-guide .share-guide { margin: 0 2rem 1rem; font-size: 14px; position: relative; } .circle { position: absolute; border-radius: 100%; } .circle-1 { top: 1.4rem; left: 23.8rem; width: 31.9rem; height: 31.9rem; opacity: 0.06; background-image: radial-gradient(38% 57%, #FFD18E 23%, #F98C78 57%); box-shadow: 0 10px 21px 0 #F98C78; } .circle-2 { left: 1.8rem; bottom: 17.5rem; width: 9.3rem; height: 9.3rem; opacity: 0.19; background-image: radial-gradient(47% 79%, #FFD27B 0%, #F98C78 80%); box-shadow: 0 10px 42px 0 rgba(249,140,120,0.06); } .circle-3 { bottom: 6.3rem; left: -5.7rem; width: 16.1rem; height: 16.1rem; z-index: 30; opacity: 0.1; background-image: radial-gradient(47% 79%, #FFD27B 0%, #F98C78 80%); box-shadow: 0 10px 42px 0 rgba(249,140,120,0.06); }