@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    text-decoration: none;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

html {
    font-size: 625%
}

body {
    font-family: 微软雅黑
}
.jz{
    position: absolute;
    z-index: 11111;
    background: url("../img/JZ.jpg")no-repeat;
    background-size: 100% auto;
    background-position: center;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.beside-wrapper{
    position: fixed;
    top:0;
    height: 100%;
    display: flex;
    align-items: center;
    pointer-events: auto;
}
.beside-wrapper ul {
    margin-top: 5rem;
    width: 2.5rem;
}
.beside-wrapper li{
    height: 0.8rem;
    width: 100%;
    margin: 0 0 7px 0;
    border: 1px solid #FFF;
    border-left: 0px solid #FFF;
    border-radius: 0 15px 15px 0;
    overflow: hidden;
    transition: all 0.4s linear;
}

.beside-wrapper li span{
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    justify-content: center;
    background-color: rgba(0,0,0,0.6);
    font-size: 12px;
    color: rgba(255, 255, 255, 1);
}
.beside-wrapper li .beside-active{
    background-color: rgba(121,195,254,0.6);
    color: #eebc74;
}
.qwjs-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(9,10,34,1);
    z-index: 998;
}

/*.qwjs-video #video-qw{
    !*width: 100%;*!
    transform-origin: center;
    transform: rotate(90deg);
    height: 100vw;
    width: calc(100vw / 9 * 16);
}*/

.zygw-vedio{
    position: fixed;
    display: flex;
    align-items: center;
    top: 3rem;
    left: .2rem;
    font-size: 0.25rem;
    color: white;
    padding: 0.12rem 0.2rem;
    border: 1px solid white;
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.3);
    z-index:111
}
.zygw-vedio>.itemicon{
    padding-right: 0.15rem;
    font-size: 0.25rem;
}

img {
    vertical-align: middle
}

.screenSizeCotente {
    height: calc(100vh - env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    position: relative
}

.slide_content {
    width: 100%;
    z-index: 0;
    position: relative;
    height: 22.16rem
}

.swiper-container, .vr {
    width: 100%;
    height: 100%
}
.swiper-container-vertical>.swiper-pagination-bullets {
    top: 30%!important;
}

.heater {
    width: 100%;
    background: rgba(0, 0, 0, .46);
    position: fixed;
    top: 0;
    left: 0;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-content: flex-start
}

.heater, .heater_left {
    height: .85rem;
    display: flex
}

.heater_left {
    margin-left: .142rem;
    justify-content: center;
    align-items: center;
    font-size: 0
}

#avatar {
    border-radius: 50%;
    width: .8rem;
    height: .8rem;
    display: inline-block
}



.heater_right {
    /*width: .85rem;*/
    height: .85rem;
    margin-right: .426rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0;
}
.heater_right ul {
    display: inline-block;
    font-size: .284rem;
    /*margin-right: 3.5rem;*/
    color: #fff
}
.heater_right .line {
    height: 50%;
    border-left: #ffffff solid 1px;
    margin: auto 0.3rem;
}
.heater_right a {
    font-size: 0
}

.heater_right svg {
    margin: 0 .04rem
}

#setting {
    position: fixed;
    top: 3rem;
    right: .1rem;
    animation: xz 10s linear infinite;
    background: rgba(34, 34, 34, .4);
    border-radius: 50%;
    z-index: 100;
    border: .7px solid #fff;
    width: .7rem;
    height: .7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

#setting i {
    font-size: .56rem;
    color: #fff;
    margin-left: .04rem
}

.setting {
    width: 0.8rem;
    top: 6rem;
    height: 2.8rem;
    position: fixed;
    right: 0.1rem;
    margin: auto;
    background-color: rgba(0, 0, 0, .55);
    border-radius: .4rem;
    z-index: 100
}

.setting .settingChild {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.25rem 0;
    width: 100%;
    height: 100%;
}

.setting a {
    display: block;
    font-size: .28rem;
    /*height: 1.4rem;*/
    text-align: center;
    color: #fff;
    padding: .02rem 0;
    /*margin: .15rem*/
}

.setting a div {
    margin: .028rem auto;
    width: .56rem;
    height: .56rem
}

.setting .jszc {
    position: absolute;
    top: 1.9rem;
    width: 100%;
    display: flex;
    justify-content: center
}

.setting .jszc a {
    background: hsla(0, 0%, 40.8%, .67);
    height: .7rem;
    font-size: 0;
    text-align: center;
    border-radius: .14rem
}

.setting .jszc a span {
    font-size: .28rem;
    color: #fff;
    line-height: .7rem;
    margin: auto .2rem
}

@keyframes xz {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

#home {
    position: fixed;
    right: .14rem;
    bottom: calc(4rem + env(safe-area-inset-bottom));
    background-color: hsla(0, 0%, 91%, .54);
    border-radius: 50%;
    font-size: 0;
    z-index: 1000
}

#home img {
    width: .7rem;
    padding: .07rem
}

footer {
    /*width: 100;*/
    height: 1.4rem;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    width: calc(100vw - 0.6rem);
    overflow: hidden;
    white-space: nowrap;
    justify-content: space-around;
    position: fixed;
    bottom: calc(0.3rem + env(safe-area-inset-bottom) * 0.7);
    left: 0.3rem;
    /*margin: auto;*/
    z-index: 999;
    border-radius: 0.7rem;
    transition: width 0.4s linear;
}


footer .switch{
    width: 1.4rem;
    height: 2.8rem;
    transition: all 0.4s linear;
}
footer .switch .foot-icon-wrapper{
    width: 1.4rem;
    height: 1.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
footer .switch #foot-close img{
    width: 0.29rem;
    height: 0.45rem;
}
footer .switch #foot-show img{
    width: 0.5rem;
    height: 0.73rem;
}
footer .footer-button{
    display: flex;
    height: 1.4rem;
    align-items: center;
}

footer a {
    display: inline-block;
    box-sizing: border-box;
    /*width: 1.7rem;*/
    /*height: 1.2rem;*/
    margin-right: 0.4rem;
    font-size: .29rem;
    color: #fffefe;
    text-align: center
}

footer a img {
    /*margin: .07rem 0.1rem;*/
    width: 0.6rem;
    /*height: 1.40rem*/
}
.footer-right{
    width: 0.7rem;
}

footer .footer-a-on {
    color: white;
    /*background: rgba(0, 0, 0, .6)*/
}
footer .footer-a-on .text{
    background: linear-gradient(to bottom, #f6e0cc, #bd8a5d);
    -webkit-background-clip: text;
    color: transparent;
    /*color: rgba(8, 145, 206, 0.9);*/
}

.PMD {
    width: 100%;
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom) * 0.7 - 0.1rem);
    z-index: 100;
    pointer-events: none;
    font-size: .2rem;
}

.PMD span {
    color: hsla(0, 0%, 100%, 0.8);
    font-size: .2rem;
}

.slide_up {
    width: 10.24rem;
    text-align: center;
    position: absolute;
    top: 12.5rem;
    z-index: 99;
    margin: auto;
    left: 0;
    right: 0
}

.slide_up img {
    width: 1.5rem
}

.top_color {
    position: fixed;
    bottom: calc(4.5rem + env(safe-area-inset-bottom) * 0.7);
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    margin: auto;
    width: 100%;
    height: 2.2rem;
    /*display: block;*/
    overflow: hidden;
    white-space:nowrap;
    z-index: 100;
    transform-origin: top;
}

.top_color .hxfb-scroller-wrapepr{
    height: 2.14rem;
    width: calc(100vw - 0.56rem);
    transition: width 0.4s linear;
}
/*.top_color .zuo{*/
/*    */
/*}*/
.top_color img {
    height: 2.14rem;
    /*width: 3.78rem;*/
    /*margin: .1rem .2rem*/
}

.imgsmart_p {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999999;
    height: 100%;
    transform-origin: 50% 50%;
    background-color: rgba(9,9,9,0.52)
}

.button_back {
    width: .6rem;
    position: absolute;
    right: .3rem;
    top: 1.4rem
}

.button_back img {
    width: 100%
}

.jrjz {
    top: 4rem;
    left: .8rem;
    width: 1.7rem
}

.jrjz, .zoom {
    position: absolute;
    z-index: 1000
}

.zoom {
    top: 8rem;
    left: .3rem;
    width: 0.6rem;
    animation: zoomloop 2s linear infinite
}

@keyframes zoomloop {
    0% {
        transform: scale(1.2)
    }
    50% {
        transform: scale(1)
    }
    to {
        transform: scale(1.2)
    }
}

@keyframes slide_am {
    0% {
        bottom: .8rem;
        opacity: .2
    }
    50% {
        bottom: .9rem;
        opacity: 1
    }
    to {
        bottom: .8rem;
        opacity: .2
    }
}

#backings {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%
}

.button_qw {
    position: fixed;
    bottom: calc(1.6rem + env(safe-area-inset-bottom) * 0.7);
    left: 0;
    right: 0;
    margin: auto;
    padding: 0 0.5rem;
    display: flex;
    flex-direction: row;
    z-index: 100;
    /*height: 3.5rem;*/
    width: 50%;
    align-items: center;
    justify-content: space-between;
    /*background: url("../img/QW/dx.png")no-repeat;*/
    background-color: rgba(59, 59, 59, .25);
    border-radius: 0.5rem;
}

.button_qw .qw-button-item {
   height: 0.89rem;
}
/*.button_qw .active{
    width: 2rem;
}*/

.qw_childtop {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%
}

.qw_button {
    position: fixed;
    bottom: 2.3rem;
    display: flex;
    width: 100%;
    justify-content: center;
    z-index: 100;
    background-color: rgba(108, 25, 224, 0.43);
}

.qw_button a {
    display: block;
    width: 1.38rem;
    height: .47rem;
    margin: auto .2rem
}


.csqw img, .qw_button a img {
    width: 100%
}

.csqw img:nth-child(2) {
    animation: opcity 2s linear infinite;
    position: fixed;
    top: 0;
    left: 0
}

.screenSizeCotente .downUp {
    font-size: .8rem;
    position: fixed;
    left: 4.72rem;
    bottom: 2.8rem;
    z-index: 101;
    color: #fff;
    animation: downUp 1.5s linear infinite
}

@keyframes opcity {
    0% {
        opacity: .5
    }
    50% {
        opacity: 1
    }
    to {
        opacity: .5
    }
}

@keyframes scaleline {
    0% {
        transform: scale(1)
    }
    50% {
        transform: scale(1.1)
    }
    to {
        transform: scale(1)
    }
}

@keyframes downUp {
    0% {
        transform: translateY(0.1rem);
    }
    50% {
        transform: translateY(0)
    }
    to {
        transform: translateY(0.1rem)
    }
}

#jzParent {
    width: 100%;
    height: 100%
}

#dy{
    position: relative;
    width: 100%;
    height: 100vh;
    background: url("../img/hxzs/di.png")no-repeat;
    background-size: 100% auto;
    background-position: center;
    display: none;
}

.hxtext {
    position: absolute;
    top: .8rem;
    width: 100%;
    text-align: center;
    font-size: .28rem
}

.hxtext p {
    color: #fff
}

.hxzs{
    position: relative;
    width: 100%;
    height: 100vh;
    background: url("../img/hxzs/di.png")no-repeat;
    background-size: 100% auto;
    background-position: center;
}
.hxzs-items-wrapper{
    position: fixed;
    bottom: calc(2.5rem + env(safe-area-inset-bottom) * 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.hxzs-items-wrapper img{
    width: 2.14rem;
}
.f-di {
    position: fixed;
    bottom: calc(2.2rem + env(safe-area-inset-bottom) * 0.7);
    display: block;
    text-align: left;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
    white-space: nowrap;
    z-index: 10;
    width: 6rem;
    height: .8rem;
    background-color: rgba(34, 34, 34, 0.8);
    /*border: .7px solid #fff;*/
    border-radius: .5rem
}

.scroller {
    height: 3rem;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    font-size: 0
}

.f-di ul {
    width: 100%;
    height: 100%;
    text-align: center;
}

.f-di ul li {
    pointer-events: auto;
    height: .87rem;
    display: inline-block;
    color: #5f5f5f
}

.f-di ul .item-des {
    margin: auto .3rem;
    position: relative
}

.f-di ul .item-des span {
    font-size: .28rem;
    color: hsla(0, 0%, 90.2%, .96);
    line-height: .7rem;
    margin: auto .03rem
}
.f-di ul li:first-child .item-des {
    margin-left: 0.5rem;
}
.f-di ul li:last-child .item-des {
    margin-right: 0.5rem;
}

.f-di ul .active span {
    font-size: .29rem;
    /*color: #f3c195*/
    background: linear-gradient(to bottom, #f6e0cc, #bd8a5d);
    -webkit-background-clip: text;
    color: transparent;
}

/*.f-di ul .active {
    background: rgba(0, 0, 0, .53)
}*/

.f-di .HX {
    width: 20%;
    margin-left: 40%
}

.f-di ul img {
    width: .79rem;
    height: .32rem
}

.rzmn-wrapper{
    width: 100%;
    height: 100%;
    position: relative;
    display: none;
}
.rzmn-wrapper #video-rzmn{
    position: absolute;
    top: 4rem;
    width: 100vw;
}

.fppt{
    position: fixed;
    bottom: 4rem;
    right: 0.1rem;
    display: flex;
    flex-direction: column;
}
.fppt img{
    width: 2rem;
    margin-top: 0.2rem;
}

.item-line {
    background: linear-gradient(90deg, rgba(241, 208, 177, 0), #f3c195 40%, #f3c195 53%, rgba(241, 208, 177, 0));
    height: 1px;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: .05rem;
    width: 70%;
    margin: auto
}

#AnimBook {
    position: fixed;
    bottom: calc(2.8rem + env(safe-area-inset-bottom));
    right: .4rem;
    z-index: 10;
    background: rgba(0, 0, 0, .42);
    box-sizing: border-box;
    border: .7px solid #fff;
    border-radius: 50%;
    width: .7rem;
    height: .7rem;
    display: flex;
    justify-content: center;
    align-items: center
}

#AnimBook div {
    font-size: .42rem;
    color: #fff
}

.jgmy-wrapper{
    position: fixed;
    top: 3rem;
    left: .2rem;

    /*border: 1px solid white;
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.3);*/
    z-index:111;
    display: none;
}
.jgmy-wrapper .itemicon{
    padding-right: 0.15rem;
    font-size: 0.25rem;
}
.jgmy-wrapper li {
    font-size: 0.25rem;
    color: white;
    padding: 0.12rem 0.2rem;
    border: 1px solid white;
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.3);
}
.jgmy-wrapper li:nth-child(2) {
    margin-top: 0.25rem;
}

/*工艺功法*/

.GYGF {
    position: absolute;
    width: 100%;
    height: 22.16rem;
    background: url("../img/gygf/gygf.jpg")no-repeat;
    background-size: 100%;
}

.GYGF div {
    position: absolute;
    height: 1rem;
    /*background: rgba(255,69,91,0.43);*/
}
.GYGF div:nth-of-type(1){
    width: 3rem;
    top: 6rem;
    left: 6.3rem;
}
.GYGF div:nth-of-type(2){
    width: 3rem;
    top: 6.5rem;
    left: 1.6rem;
}
.GYGF div:nth-of-type(3){
    width: 3.2rem;
    top: 4rem;
    left: 1.8rem;
}
.GYGF div:nth-of-type(4){
    width: 3.2rem;
    top: 8.5rem;
    left:2.2rem;
}
.GYGF div:nth-of-type(5){
    width: 2.2rem;
    top: 12.3rem;
    left: 1.4rem;
}

/*智慧社区*/

.ZHSQ {
    position: absolute;
    width: 100%;
    height: 22.16rem;
    background: url("../img/zhsq/zhsq.jpg")no-repeat;
    background-size: 100%;
}
.ZHSQ div {
    position: absolute;
    height: 1rem;
    /*background: rgba(255,69,91,0.43)*/
}
.ZHSQ div:nth-of-type(1){
    width: 4rem;
    top: 4.1rem;
    left: 2.6rem;
}
.ZHSQ div:nth-of-type(2){
    width: 3.4rem;
    top: 5.7rem;
    left: 3.2rem;
}
.ZHSQ div:nth-of-type(3){
    width: 4rem;
    top: 12rem;
    left: 1.6rem;
}

.PPImgWrapper{
    width: 100%;
    overflow:hidden;
}
.PPImgWrapper div{
    overflow-y: auto;overflow-x: hidden;height: 100vh;
}
.PPImgWrapper div img{
    width: 100%;
}

/*横竖屏判断*/
@media screen and (orientation: portrait) {
    #video-qw {
        width: calc(100vw / 9 * 16);height: 100vw;background-color: black;transform-origin: center;transform: rotate(90deg);
    }
}
/* 横屏 */
@media screen and (orientation: landscape) {
    #video-qw {
        width: 100vw;height: 100vh;background-color: black;
    }

}

/*精装*/
.jz-button-wrapper{
    position: fixed;
    bottom: calc(2rem + env(safe-area-inset-bottom));
    display: flex;
    width: 100%;
    height: 1.09rem;
    justify-content: center;
    align-items: center;
}

.jz-button-wrapper img{
    height: 100%;
    margin: 0 0.2rem;
}