/*默认样式*/
html { font-size: 62.5%; margin: 0; padding: 0}

body, div, p, span, font, ul, li, table, tr, td, a, header, menu, textarea, input, select { margin: 0; padding: 0; color: #333; font-size: 1.4rem; font-family: PingFang SC,-apple-system-font,Microsoft Yahei,Helvetica Neue,Helvetica,sans-serif}
a, div, p, img, button, input, textarea, select { -webkit-tap-highlight-color: rgba(255, 255, 255, 0)}
input, textarea, select { border: 0; padding: 0}
input::-webkit-input-placeholder { color: rgba(0,0,0,.3)}
input:-moz-placeholder { color: rgba(0,0,0,.3)}
input::-moz-placeholder { color: rgba(0,0,0,.3)}
input:-ms-input-placeholder { color: rgba(0,0,0,.3)}
textarea::-webkit-input-placeholder { color: rgba(0,0,0,.3)}
textarea:-moz-placeholder { color: rgba(0,0,0,.3)}
textarea::-moz-placeholder { color: rgba(0,0,0,.3)}
textarea:-ms-input-placeholder { color: rgba(0,0,0,.3)}
input[type="search"]::-webkit-search-cancel-button{ display: none}
*:focus { outline: none}
body { background: #f7f7f7; line-height: unset}
ul, li { list-style-type: none}
img { border: none}
a { color: #333; font-size: 1.4rem; text-decoration: none}
a:hover { color: #333; text-decoration: none}

body{ background-image: url("../img/bg.png"); background-position: top center; background-size: 100% auto; background-repeat: no-repeat; background-color: #0B163C}

/*文本溢出，截字符长度*/
.ellipsis { text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap}

/*动画过渡效果*/
.transition{ -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -o-transition-duration: .5s}

/*导航*/
.menu{ width: 100%; height: 5rem; background: url("../img/menu.png") no-repeat; background-size: 100%; position: fixed; left: 0; bottom: 0; z-index: 1; display: flex}
.menu__item{ width: 20%; height: 5rem; display: flex; align-items: center; justify-content: center; flex-direction: column}
.menu__icon{ width: 2.5rem; height: 2.5rem}
.menu__txt{ color: #E3ECF9; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; margin-top: .2rem}
.menu__icon1{ background: url("../img/menu1.png") no-repeat; background-size: 100%}
.menu__icon2{ background: url("../img/menu2.png") no-repeat; background-size: 100%}
.menu__icon3{ background: url("../img/menu3.png") no-repeat; background-size: 100%}
.menu__icon4{ background: url("../img/menu4.png") no-repeat; background-size: 100%}
.menu__icon5{ background: url("../img/menu5.png") no-repeat; background-size: 100%}
.menu__item--on .menu__txt{ color: #FEAA00}
.menu__item--on .menu__icon1{ background: url("../img/menu1-on.png") no-repeat; background-size: 100%}
.menu__item--on .menu__icon2{ background: url("../img/menu2-on.png") no-repeat; background-size: 100%}
.menu__item--on .menu__icon3{ background: url("../img/menu3-on.png") no-repeat; background-size: 100%}
.menu__item--on .menu__icon4{ background: url("../img/menu4-on.png") no-repeat; background-size: 100%}
.menu__item--on .menu__icon5{ background: url("../img/menu5-on.png") no-repeat; background-size: 100%}

/*头部*/
.header{ width: 100%; height: 6.4rem; background-image: url("../img/header.png"); background-repeat: no-repeat; border-radius: 0 0 .8rem .8rem; background-size: 100%; position: fixed; left: 0; top: 0; z-index: 2; display: flex; align-items: center; justify-content: center}
.header__left{ height: 6.4rem; display: flex; align-items: center; position: absolute; left: 0; top: 0}
.header__right{ height: 6.4rem; display: flex; align-items: center; justify-content: flex-end; position: absolute; right: 1.25rem; top: 0}
.header__href{ width: 2.2rem; height: 2.2rem; display: block; margin-left: 1.25rem}
.header__href img{ width: 100%; height: 100%; display: block}
.header__name{ color: #fff; font-size: 1.6rem; font-weight: bold; display: flex; align-items: center; justify-content: center}

/*里页头部*/
.inside__header{ width: 100%; height: 4.4rem; background-image: url("../img/inside-header.png"); background-repeat: no-repeat; background-size: 100%; position: fixed; left: 0; top: 0; z-index: 2; display: flex; align-items: center; justify-content: center}
.inside__header__name{ color: #fff; font-size: 1.6rem; font-weight: bold; display: flex; align-items: center; justify-content: center}
.inside__header__back{ width: 9rem; height: 4.4rem; background: url("../img/inside-header-back.png") no-repeat; background-size: 100%; position: absolute; left: 0; top: 0; display: block}
.inside__header__ring{ width: 2.4rem; height: 2.4rem; background: url("../img/ring.png") no-repeat; background-size: 100%; position: absolute; right: 1.5rem; top: 1rem; display: block}

/*语言盒子*/
.language{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 10; background: rgba(0, 0, 0, .6)}
.language__box{ width: calc(100% - 11rem); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #F7DFBA; border-radius: 1rem; padding: 1rem; box-sizing: border-box}
.language__title{ height: 5.4rem; display: flex; align-items: center; color: #56310D; font-size: 1.6rem; font-weight: bold; justify-content: center}
.language__href{ height: 5.6rem; border-radius: 1.5rem; color: #111111; font-weight: bold; font-size: 1.6rem; background: #F2E9DA; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem}
.language__href__check{ width: 1.7rem; height: 1.7rem; background: url("../img/language-check.png") no-repeat; background-size: 100%; display: none}
.language__href--on{ background: #FEBF37}
.language__href--on .language__href__check{ display: block}
.language__close{ width: 3.2rem; height: 3.2rem; background: url("../img/language-close.png") no-repeat; background-size: 100%; position: absolute; left: 50%; bottom: -4.6rem; transform: translate(-50%, 0)}

/*用户侧滑*/
.sideslip{ width: 26rem; height: 100vh; display: block; background: #1D1E20; left: -1000rem; top: 0; z-index: 11; position: fixed}
.sideslip__mask{ width: 100%; height: 100%; display: none; position: fixed; left: 0; top: 0; z-index: 10; background: rgba(0, 0, 0, .6)}
.sideslip__top{ width: 100%; height: 27rem; display: flex; align-items: center; justify-content: center; flex-direction: column; background: linear-gradient(0deg, #9849EA, #38ADF0)}
.sideslip__user{ width: calc(100% - 4.6rem); height: 5rem; display: flex; align-items: center; justify-content: flex-start}
.sideslip__head{ width: 5rem; height: 5rem; border: 2px solid #fff; box-sizing: border-box; border-radius: 50%; overflow: hidden; display: block}
.sideslip__head img{ width: 100%; height: 100%}
.sideslip__name{ width: calc(100% - 6.1rem); color: #fff; font-size: 1.6rem; margin-left: 1.1rem; font-weight: bold; display: block}
.sideslip__price{ color: #F3CF9D; font-size: 1.6rem; font-weight: bold; margin-top: 3.5rem; display: block}
.sideslip__price span{ font-size: 2.4rem; font-weight: bold; color: #F3CF9D}
.sideslip__txt{ color: #F3CF9D; font-size: 1.2rem; margin-top: 0.4rem; display: block}
.sideslip__btn{ width: 20rem; height: 4.9rem; background: url("../img/user-btn.png") no-repeat; background-size: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem; font-weight: bold; margin-top: 3rem}
.sideslip__href{ height: 4rem; padding: 0 1.4rem; display: flex; align-items: center; justify-content: space-between; margin-top: 2rem}
.sideslip__href__icon{ width: 4rem; height: 4rem; display: block}
.sideslip__href__icon img{ width: 100%; height: 100%}
.sideslip__href__txt{ color: #BD68FF; font-size: 1.4rem; display: block}

/*内容部分*/
.main{ padding: 7.4rem 1rem 6rem 1rem; background: unset}

/*切换tab*/
.tab{ height: 4rem; background: rgba(0, 0, 0, .3); border-radius: .5rem; padding: .3rem; box-sizing: border-box; display: flex}
.tab__href{ width: 50%; height: 3.4rem; display: flex; align-items: center; justify-content: center; border-radius: .3rem; font-size: 1.6rem; font-weight: bold; color: #7960AA}
.tab__href--on{ background: #41217F; color: #fff}
.tab__box{ display: block}
.tab__box--on{ display: block}

.padding__top--54{ padding-top: 5.4rem}