.app{
	
}
.app #webgl{
    padding:0;
    overflow: hidden;
	
}
#app{
	display:none;
}
#app.full{
    width: 100%;
    height: 100%;
}
 @keyframes flash{
  0% {
    opacity: 0; }
  1% {
    opacity: 1; }
  30% {
    opacity: 1; }
  100% {
    opacity: 0; } 
 }
 #webgl .snapshotFlash{
	opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #ffffff;
    pointer-events: none;
 }
 #webgl .snapshotFlash.active{
	z-index: 100;
	-webkit-animation-name:flash;
	animation-name:flash;
	-webkit-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
 
#webgl .overlayGui{
	position:absolute; 
    z-index: 100; 
	pointer-events: none;
	opacity:0;
	transition: opacity 0.3s,
				border 0.3s; 
} 
#webgl .overlayGui.snapshotGui{
	width: calc(94% - 1rem);
	height: calc(88% - 5rem);
	border: 0.04rem dotted #ffffff;
	left: calc(3% + 0.5rem);
	top: calc(3% + 2.2rem);
}

#webgl .snapshotGui .corner{
	width:2rem;
	height:2rem;
	position:absolute;  
} 
#webgl .snapshotGui .corner.leftTop{
	border-top:0.1rem solid #fff;
	border-left:0.1rem solid #fff;
	left:-0.06rem;
	top:-0.07rem;
}
#webgl .snapshotGui .corner.rightTop{
	border-top:0.1rem solid #fff;
	border-right:0.1rem solid #fff;
	right:-0.06rem;
	top:-0.07rem;
}
#webgl .snapshotGui .corner.leftBott{
	border-left:0.1rem solid #fff;
	border-bottom:0.1rem solid #fff;
	left:-0.06rem;
	bottom:-0.07rem;
}
#webgl .snapshotGui .corner.rightBott{
	border-right: 0.1rem solid #fff;
    border-bottom: 0.1rem solid #fff;
    right: -0.06rem;
    bottom: -0.07rem;
}
 
#webgl .overlayGui .confirmSnap{
	background: rgba(9, 225, 192, 0.9);
    color: #fff;
    border-radius: 5px;
    /* margin: 0 auto; */ 
    position: absolute; 
    letter-spacing: 0.1em;
    height: 48px;
    text-align: center;
    line-height: 48px;
    font-size: 16px;
    font-weight: 100;
    left: calc(50% - 110px); 
	pointer-events: all;
	cursor:pointer;
	transition:background 0.2s;
}
#webgl .overlayGui.snapshotGui .confirmSnap{
	bottom: 20px; width: 220px;
}
#webgl .overlayGui .confirmSnap:hover{
	background:rgba(9, 225, 192, 0.78)  /* #14ebca */
}
 
#floorLogoSize {
    height: 100%; 
    position: relative;
}
#floorLogoSize .slider{
    position: absolute;
    top: calc(50% - 10px);
    width: 100%;
}
 
 
 
 
 
 
 
 

.slider .Main{ 
	height:20px;
	align-items: center;
    display: flex;
    justify-content: space-between;
} 
.slider .Main .scrollBar {
    position: relative;
    width: 100%;
    height: 3px; 
    cursor: pointer;
    /* width:100%; */
    background: #fff;
}
.slider .scrollBar .scroll_Track {
	width: 0px;
	height: 3px;
	background-color: #09e1c0;
}
.slider .scrollBar .scroll_Thumb {
	height: 12px;
    width: 14px;
    background-color: #919191;
    /*-webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 4px;
     -webkit-box-shadow: 0px 0px 5px #74b5f5;
    -moz-box-shadow: 0px 0px 5px #74b5f5;
    box-shadow: 0px 0px 4px #74b5f5; */
    position: absolute;
    margin-top: -8px;
    cursor: pointer;
    -webkit-user-select: none;
}
.slider .BarTxt {
	position:relative; 
	margin-left:5px;
	display: flex; 
}
.slider .BarTxt .scrollBarTxt{
    width: 37px;
    text-align: center;
    height: 20px;
    border: 0;
    /* border-radius: 4px; */
    padding: 4px 0;
    text-align: center;
    color: #fff;
    background: transparent;
    font-size: .25rem;
    
    display: inline;
	text-align:right;
	padding-right: 5px;
	pointer-events: none;
}
.tmpl-wallDesign .slider .BarTxt  span{
	margin-top:1px
}
 
.slider .scrollBar .scroll_Thumb {
    background: #00c8ae;
    width: 24px;
    height: 24px;
    border-radius: 13px;
    margin-top: -14px;
}
@keyframes flash2 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


footer{
	overflow:visible;/*计时器数字在外面*/
}  
 
footer .tmpl-hotpoint .slideCtrl{
	width: 100%;
	height: 1.1rem;
	margin-top: 0.27rem;
}
footer .tmpl-hotpoint  .slideCtrl .path{
	width: 80%;
	height: .07rem;
	left: 10%;
	background: #fff;
	border-radius: 2px;
	position: relative;
	top: 0.3rem;
}
footer .tmpl-hotpoint  .slideCtrl .path .knot{
    /*
    border-radius: 15px;
    width: 30px;
    height: 30px;
    background: #00c8ae;
    */
    width:2rem;
    height:0.9rem;
    top: -0.41rem;
    left: calc(50% - 1rem);
    position: absolute;
    background-image:url(../images/btn-slider.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition:transform 0.3s;
    background-color: rgb(1, 201, 175);
    border-radius: .45rem;
}

footer .tmpl-hotpoint  .slideCtrl .path .knot.drag{
	transition:unset; 
}


 


html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
::placeholder{
    color:  #c7c7c7
}
.clear {
    clear: both;
}
.red{
    color: red;
}

/* footer */

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 120;
    /* overflow: hidden;
    overflow-y: auto; */
	pointer-events:none;
}

#app.full footer{
    top: 2rem;
    background-color: rgba(0, 0, 0, 0.5);
}
#app.full nav{
    display: none;
}
#app.full #map{
    display: none;;
}

footer .layout {
	padding-bottom: .3rem;
	user-select: none;
	-webkit-user-select: none;
	padding-bottom: 0.3rem;
}

footer .buttons {
    text-align: center;
    /* margin-top: 0.6rem; */
    display: flex;
    justify-content: space-around;
    clear: both;
}

footer .buttons button {
    height: auto;
    padding:0.2rem;
    border: solid 1px #fff;
    background-color: transparent;
    border-radius: 3rem;
    color: #fff;
    width: 70%;
    margin: 0 3%;
    margin-top: .2rem;
}
footer .buttons.whiteBG button[type="preStep"]{
	color: #9a9a9a;
	border: solid 1px #9a9a9a
}
footer .buttons button[type="submit"] {
    margin-left: 0.3rem;
    background-color: #00c8ae;
    border: none;
}

footer .tips { 
    font-size: 16px;
    color: #fff;
}
footer .tmpl-hotpoint.step-3 .tips, .tmpl-information .tips{
	padding-top: 0.4rem;
}

footer .tips.center {
    text-align: center;
    padding-top:.2rem;
}
footer small.tips.center{
    font-size: 14px;
    display: block;
}



footer .tmpl-menu { 
    background-color: rgba(0, 0, 0, 0.3);
    font-size:0;
}

footer .tmpl-menu li {
    display: inline-block;
    width: 24.9%;
    text-align: center;
    margin-top: .2rem;
}



footer .tmpl-menu li span {
    display: inline-block;
    width: 0.97rem;
    height: 0.97rem;
}


footer .tmpl-menu li span i{
	font-size:0.92rem;
} 



/*footer .tmpl-menu li span.hotpoint {
    background-image: url(../images/hotpoint.png);
    background-size: 100%;
}

footer .tmpl-menu li span.screen {
    background-image: url(../images/screen.png);
    background-size: 100%;
}

footer .tmpl-menu li span.information {
    background-image: url(../images/information.png);
    background-size: 100%;
}
footer .tmpl-menu li span.hotVisible {
    background-image: url(../images/visible.png);
    background-size: 100%;
}
footer .tmpl-menu li span.panoVisible {
    background-image: url(../images/visible2.png);
    background-size: 100%;
}
footer .tmpl-menu li span.lock {
    background-image: url(../images/lock.png);
    background-size: 100%;
}

footer .tmpl-menu li span.music {
    background-image: url(../images/music.png);
    background-size: 100%;
}

footer .tmpl-menu li span.sign {
    background-image: url(../images/sign.png);
    background-size: 100%;
}

footer .tmpl-menu li span.snapTour {
    background-image: url(../images/autoTour.png);
    background-size: 100%;
}*/
/* footer .tmpl-menu li span.delete {
    background-image: url(../images/delete.png);
    background-size: 100%;
} */

footer .tmpl-menu li label {
    display: block;
    font-size: 0.27rem;
    color: #fff;
}
footer .footer-tmpl{
	background: rgba(0, 0, 0, 0.3);
}
 

footer .tmpl-hotpoint .icons {
    margin-top: 0.5rem;
    width: 100%;
    padding: 0 10px;
}

footer .tmpl-hotpoint .swiper-slide {
    text-align: center;
}

footer .tmpl-hotpoint .swiper-slide>div {
    position: relative;
    display: inline-block;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    border: solid 3px transparent;
}

footer .tmpl-hotpoint .swiper-slide>div span {
    position: absolute; 
    left: 0; 
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: 100%;
}

footer .tmpl-hotpoint .swiper-slide>div span.icon-1 {
    background-image: url(../images/icon-hot-1.png);
}

footer .tmpl-hotpoint .swiper-slide>div span.icon-2 {
    background-image: url(../images/icon-hot-2.png);
}

footer .tmpl-hotpoint .swiper-slide>div span.icon-3 {
    background-image: url(../images/icon-hot-3.png);
}

footer .tmpl-hotpoint .swiper-slide>div span.icon-4 {
    background-image: url(../images/icon-hot-4.png);
}

footer .tmpl-hotpoint .swiper-slide>div span.icon-5 {
    background-image: url(../images/icon-hot-5.png);
}

footer .tmpl-hotpoint .swiper-slide>div span.icon-6 {
    background-image: url(../images/icon-hot-6.png);
}

footer .tmpl-hotpoint .swiper-slide>div span.icon-7 {
    background-image: url(../images/icon-hot-7.png);
}

footer .tmpl-hotpoint .swiper-slide.active>div {
    border: solid 3px #00c8ae;
}

footer .tmpl-hotpoint.step-3 {
    padding: 0 0.5rem;
    padding-top: 0.3rem;
    background-color:transparent;
    /*
    border-top-left-radius: 0.7rem;
    border-top-right-radius: 0.7rem;
    */
    /* background-color: #fff; */
}

footer .tmpl-hotpoint.step-3 .buttons {
    text-align: center;
    margin-top: 0.5rem;
}
 
footer .tmpl-hotpoint.step-3 .tips {
    /* font-size: 14px; */
    color: #fff;
    padding-bottom:.2rem
}

footer .tmpl-hotpoint.step-3 .tips span {
    font-size: 0.8em;
    color: #ccc;
    float: right;
}

footer .tmpl-hotpoint.step-3 .tips:first-child {
    margin-top: 0;
}
 


footer .tmpl-hotpoint.step-3 input{
    /* margin-top: 0.3rem; */
    color: #fff;
    line-height:unset;
    -ms-line-height: 0.9rem;
    border-radius: 0;
    border: none;
    width: 100%;
    padding: 0.26rem 0.3rem;
    background:transparent url(../images/input-bg.png);
    /* height: 100%; */
}
footer .tmpl-hotpoint.step-3 .link input{
    padding:0.26rem 0;
    background: transparent;
}


footer .tmpl-hotpoint.step-3 .word{
	position:relative;
}


/* footer .tmpl-hotpoint.step-3 textarea {
    font-size: 14px;
    height: 2.5rem;
    line-height: normal;
    padding: 0.3rem;
    resize: none;
} */
footer .tmpl-hotpoint.step-3 .textArea{
	color: #abacac;
	line-height: 1rem;
	color: #222;
}

footer .tmpl-hotpoint.step-3 div[contenteditable] {
    /* margin-top: 0.3rem; */
    color: #fff;
    height: 2.5rem;
    line-height:normal;
    border-radius: 0;
    border: none;
    width: 100%;
    padding: 0.3rem;
    background:transparent url(../images/input-bg.png);
    -webkit-user-select: auto;
    overflow: hidden;
    overflow-y: auto;
}

footer .tmpl-hotpoint.step-3 div[contenteditable]::-webkit-scrollbar {
    width: 0 !important;
    display: none !important;
}

footer .tmpl-hotpoint.step-3 div[contenteditable] a{
    color:#00c8ae;
    text-decoration: underline;
}

footer .tmpl-hotpoint.step-3 div[contenteditable]:empty:before{
    content:attr(placeholder);
    color: #c7c7c7;
}

/* footer .tmpl-hotpoint.step-3 .outLink */
footer .tmpl-hotpoint.step-3 .link
 {
    position: relative;
    /* margin-top: 0.3rem; */
    padding: 0 0.3rem;
    border-radius: 0;
    background:transparent url(../images/input-bg.png);
    margin-right: 2.5rem;
}
footer .tmpl-hotpoint.step-3  a.submit,footer .tmpl-hotpoint.step-3 .link a.button{
	position: absolute;
	height: 0.9rem;
	width: 2.2rem;
	right: -2.5rem;
	text-align: center;
	line-height: 0.9rem;
	color: #fff;
	border-radius: 0.5rem;
	outline: none;
} 
footer .tmpl-hotpoint.step-3 .link a.button{ 
    bottom:0;   
    background-color: transparent;
    border: solid 1px #BEC2C1;
} 
footer .tmpl-hotpoint.step-3 .link a.submit{
    top:0; 
    background-color: #00c8ae;
}

 
footer .tmpl-hotpoint.step-3 .outLink a.submit{ 
    display: none;
   top:0.05rem;   
}

footer .tmpl-hotpoint.step-3 .medias>div>div{
	display:flex;
}

footer .tmpl-hotpoint.step-3 .medias .remark{
	
color: #c7c7c7;
	
/* font-size: .4rem; */
	
padding: 0 .3rem;
}


footer .tmpl-hotpoint.step-3 .rect{
	position:relative;
	width:2.7rem;
    height: 2.7rem;
	z-index:100;
}
 
footer .tmpl-hotpoint.step-3 .preview {
    /* margin-top: 0.3rem; */
    border-radius: 0.3rem;
    line-height: 2.7rem;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);;
    color: #5F5F5E;
    display:block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index:100;
    border: solid 1px #5F5F5E;
}

footer .tmpl-hotpoint.step-3 .preview .name{
	padding: 10px 12px;
	 
	line-height: 19px;
	height: 100%;
	text-align: left;
	overflow: hidden;
	/* white-space: nowrap; */
	text-overflow: ellipsis;
	/* vertical-align: middle; */
	word-wrap: break-word;
}

footer .tmpl-hotpoint.step-3 .audio .name{
	color:#00c8ae
	
}

footer .tmpl-hotpoint.step-3 .del{
	
width: 0.6rem;
	
background-color: #c77a7a;
	
height: 0.6rem;
	
transform:translate(40%,-20%);
	
display: block;
	
right:0;
	
top: 0;
z-index:120;	
position: absolute;
	
border-radius: 50%;
	
background-image: url('../images/phone_step_01.png');
	
background-size: 45%;
	
z-index: 120;
} 

footer .tmpl-hotpoint.step-3 .video .playBtn{
	width: 0.8rem; 
	height: 0.8rem;
	display:none;
	z-index:99;
}
footer .tmpl-hotpoint.step-3 .preview.hasVideo .playBtn{
	display:block;
}
 
 
footer .tmpl-hotpoint.step-3 .video canvas{
	position:absolute;
	z-index:100;
	width:100%;height:100%;top:0;left:0;
	border-radius:0.3rem;
}
footer .tmpl-hotpoint.step-3 .video .playBtn span{
	border-width: 0.16rem 0 0.16rem 0.3rem;
	left:0.32rem;
	top:0.23rem;
}


footer .tmpl-hotpoint.step-3 .link input {
    margin-top: 0;
}

footer .tmpl-hotpoint.step-3 .link input:first-child {
    border-bottom: solid .5px #c7c7c7;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

footer .tmpl-hotpoint.step-3  button[type="button"]{
    border: solid 1px #BEC2C1;
    color: #BEC2C1;
}



footer .tmpl-wallDesign{ 
    padding: 0.01rem 0;
    font-size:12px;
    position: relative;
    /* padding-top:3px; */
}
footer .tmpl-settings{
    
    padding: 0.01rem 0;
    font-size:12px;
    position: relative;
    /* padding-top:3px; */
}

footer .tmpl-settings .title{
	width:33% !important;
}
footer .tmpl-settings .row .switch2{
	width:17%;
}


footer .tmpl-wallDesign #lineProp,footer .tmpl-wallDesign #objProp>div,footer .tmpl-wallDesign  #houseHeight>div,   footer .tmpl-wallDesign #roomProp>div>div, footer .row{ 
	height:1.1rem;
	display:flex;
}
footer .tmpl-wallDesign #roomProp{
	padding-top:0.05rem;
}
footer .tmpl-wallDesign  .title, footer .tmpl-wallDesign  .tip,footer .tmpl-settings .title { 
	line-height:1.1rem;
	text-align: center; 
    letter-spacing: 1px;
    white-space: nowrap;
}
footer .tmpl-wallDesign  .title, footer .tmpl-settings .title {
	min-width: 7em;
	width: 20%;
	padding-left: 0.2rem;
	text-align: left;
}
footer .tmpl-wallDesign  .title.longEn{
	width:30%;
}

footer .tmpl-wallDesign #objProp .scrollCon{
	width:60%; 
} 
footer .tmpl-wallDesign #roomProp .scrollCon, footer .tmpl-wallDesign #houseHeight .scrollCon{
	width: 80%;
}
 
 
footer .tmpl-wallDesign .slider{
    margin-top: calc(0.55rem - 10px);
    width: 100%;
    padding-right: 10px;
}
 
footer .tmpl-wallDesign  .name{
	
max-width: 17em;
	
/* width: 17em; */
}
footer .tmpl-wallDesign  .name input{
	/* font-size: 0.35rem; */
	margin-top: calc(0.55rem - 15px);
	color: #eee;
	line-height: unset;
	-ms-line-height: 0.9rem;
	/* border-radius: 0.3rem; */
	border: 1px solid rgba(255, 255, 255, 0.35);
	/* max-width: 17em; */
	padding: 0.25rem 0.3rem;
	background-color: rgba(53, 53, 53, 0.8);
	height: 30px;
	width: 100%;
}
footer .tmpl-wallDesign  .tip{

	color: #cacaca;

	width: unset;

	margin-left: 10px;

	letter-spacing: 1px;

	/* text-overflow: ellipsis; */

	overflow: hidden;

	 width: 8em;
}
.en footer .tmpl-wallDesign  .tip{
	width:13em
}
@media all and (max-width: 375px) and (orientation:portrait){
	.en footer .tmpl-wallDesign  .tip{
		letter-spacing: 0;
		margin-left:.1rem; 
	}
	.en footer .tmpl-wallDesign .name{
		margin-left: .2rem; 
	} 
}


footer .tmpl-wallDesign .switch,footer .tmpl-settings .switch{

	width: 50px;
 
	height: 12px;

	margin-top: calc(0.55rem - 6px);

	margin-right: 23px;

	background-color: #ececec;
}

footer .tmpl-wallDesign .switch>div,footer .tmpl-settings .switch>div{

	width: 26px;

	/* height: 26px; */

	margin-top: -7px;

	height: 26px;

	box-shadow: 1px 1px 0px 0px rgba(32, 32, 32, 0.3);

	background-color: rgb(158, 158, 158);

	right: 24px;
}


@media screen and (max-width: 320px){
	footer .tmpl-wallDesign .switch,footer .tmpl-settings .switch{
		width:40px;
	}
	footer .tmpl-wallDesign .switch>div,footer .tmpl-settings .switch>div{
		right: 14px;
	}
}


footer .tmpl-wallDesign .handel{
   	height: .9rem;
   	position: absolute;
   	top: -1rem;
   	background: rgba(0, 0, 0, 0.3);
   	left: calc(50% - 1rem);
   	border-radius: .5rem;
   	display: flex;
   	border-bottom: none !important;
   	line-height: .9rem;
}
footer .tmpl-wallDesign .handel .pullUp{
	width:.5rem; margin-left:.3rem; line-height:.9rem; margin-top:-.1rem;
}
footer .tmpl-wallDesign .handel .pullUp.down{
	margin-top:.1rem;
}
footer .tmpl-wallDesign .text{
	margin-left:.1rem;
	margin-right:.4rem
}



footer .tmpl-wallDesign #lineProp #architecture{ 
	width:80%; 
}
footer .tmpl-wallDesign #lineProp #architecture li{
	display:flex;
	float:left;
	width:25%;
	line-height: 1.1rem;
	/* padding: 6px 0; */
	justify-content: center;
}
footer .tmpl-wallDesign #lineProp #architecture i{
	font-size: 0.7rem;
	margin-right:3px;
}
 
 @media all and (max-width: 400px){
	 .en footer .tmpl-wallDesign #lineProp #architecture i{
		 margin-right:0px;
	 }
 }
 
 
footer .tmpl-wallDesign #lineProp button, footer .tmpl-wallDesign #objProp button{
	width:20%;
} 
footer .tmpl-wallDesign button.rectBtn{
	height:100%;
	background-color:rgba(21, 176, 152, 0.8);
	color:#fff;
	outline:none;
	border:none; 
}
footer .tmpl-wallDesign #objWidth button.rectBtn{
	background-color:rgba(165, 91, 88, 0.8);
}
footer .tmpl-wallDesign>div>div:not(.buttons){
	border-bottom:1px solid rgba(73, 73, 73, 0.3);
}

footer .tmpl-wallDesign #roomList{
	padding: 0.2rem 0.4rem 0.1rem 0.4rem;
}
 

footer .tmpl-wallDesign .room-preview-rooms{
	top: 0;
    font-size: 0;
    text-align: left;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
	padding-bottom: 6px;
}
footer .tmpl-wallDesign .room-preview-rooms a{
    position: relative;
    text-align: center;
    width: calc(1rem + 26px);
    height: calc(1rem + 26px);
    overflow: hidden;
    border: 3px solid transparent;
    border-radius:8px;
}
footer .tmpl-wallDesign .room-preview-rooms a>div{
	background-color:rgba(193, 193, 193, 0.6);
	background-position:center;
	background-size: 220%;  /* texture's top or bottom is dark so "cover" is not suitable */
	width:100%;
	height:100%;
}
footer .tmpl-wallDesign .room-preview-rooms a.active{
	border: solid 3px #12BFAB;
}
footer .tmpl-wallDesign .room-preview-rooms a.active:before{
	content:'\e62f';
	font-size: calc(.25rem + 17px);
	font-family:"iconfont" !important;
	vertical-align: middle;
	position: absolute;
	top: 50%;
	left: 50%;
	text-shadow: 0px 2px 2px rgb(65, 65, 65);
	transform: translate(-50%,-72%);
}
footer .tmpl-wallDesign .room-preview-rooms a span{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding:1px 0;
    text-align: center;
    color: #fff;
    font-size: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    overflow:hidden;
}


footer .tmpl-screen {
    background-color: rgba(0, 0, 0, 0.3);
}

footer .tmpl-delete {
    background-color: rgba(0, 0, 0, 0.3);
}

footer .tmpl-music {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    background-color: rgba(0, 0, 0, 0.5);
}

footer .tmpl-music ul {
    margin-top: 0.3rem;
}

footer .tmpl-music li {
    color: #fff;
    padding: 0.35rem 0;
    border-top: solid 1px rgba(204, 204, 204, 0.15);
    position: relative;
}

footer .tmpl-music li label {
    display: none;
    /* margin-top: .1rem; */
    /* float: right; */
    width: 20px;
    height: 100%;
    background-image: url(../images/checked_hook.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

footer .tmpl-music li.active {
    color: #00c8ae;
}

footer .tmpl-music li.active label {
    display: block
}

footer .tmpl-sign {
    background-color: rgba(0, 0, 0, 0.3);
}

footer .tmpl-sign .tips { 
    padding:.4rem 0.4rem 0 0.4rem
}

footer .tips span.right{
    float: right;
    color: #00c8ae; 
	pointer-events:none;
}
footer .tmpl-sign .tips span.right{
	opacity: .2; 
}
footer .tmpl-sign .tips span.right.enable {
    opacity: 1;
	pointer-events:auto; 
}
/* footer .tmpl-music .tips span.right {
	
} */
footer .tmpl-music .tips span.right.enable {
	color:#fff;
	pointer-events:auto; 
}

footer .tmpl-sign .size {
    margin-top: 1rem;
    position: relative;
    color: #fff;
    /* padding-left: 2.4rem; */
    height: 1.4rem;
    padding: 0 0.6rem 0 calc(110px + .3rem);
}

footer .tmpl-sign .size span.name {
    position: absolute;
    left: 0.4rem;
    top: 50%;
    font-size: .45rem;
    margin-top: -0.35rem;
}

footer .tmpl-sign img {
    position: fixed;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -30%);
    max-width: 140px;
}

footer .tmpl-sign ul {
    padding: 0 0.05rem;
}

footer .tmpl-sign li {
    float: left;
    margin-top: 0.25rem;
    width: 25%;
    text-align: center;
}

footer .tmpl-sign li span {
    position: relative;
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-size: 104%;
    background-repeat: no-repeat; 
	border: solid 3px transparent;
    border-radius: 0.3rem;
	background-clip: content-box; /* avoid backgroundSize change when borderColor change */
} 
footer .tmpl-sign li span:not(.upload){
	background-color: #999;
}

footer .tmpl-sign li span label {
    position: absolute;
    left: -20%;
    width: 140%;
    text-align: center;
    color: #fff;
    bottom: -0.7rem;
    border-radius: 10px;
}

footer .tmpl-sign li span.active {
    border: solid 3px #00c8ae;
   /*  border-radius: 16%; */
}
footer .tmpl-sign li div.bg{
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	border-radius: 0.26rem;
}
footer .tmpl-sign li em {
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    border: solid 5px transparent;
    border-radius: 0.3rem;
} 
footer .tmpl-sign li em.hasImg{
	background-color: transparent; 
}	
footer .tmpl-sign li em i {
    display: block;
    width: 100%;
    height: 100%;
    border: dashed 2px #00c8ae;
    border-radius: 0.3rem;
    background: url(../images/plus.png) no-repeat center center;
    background-size: 30%;
}
footer .tmpl-sign li em.hasImg i{ 
	display: none;
}


footer .tmpl-information {
    padding: 0 0.5rem;
    background-color: transparent;
    /*
    border-top-left-radius: 0.7rem;
    border-top-right-radius: 0.7rem;
    */
    /* background-color: #fff;  */
}
footer .tmpl-information .buttons{
    text-align: center;
}
footer .tips {
	font-size: 0.45rem;
}
footer .tmpl-music .tips {
	padding-top: 0.4rem;
}
footer{
	font-size: 0.35rem;
}
footer .tmpl-information .tips {
    color: #fff;
    margin-top: .2rem;
}

footer .tmpl-information .tips span {
    font-size: 0.8em;
    color: #ccc;
    float: right;
}

footer .tmpl-information .tips:first-child {
    margin-top: 0;
}

footer .tmpl-information input {
    font-size: 0.35rem; 
    margin-top: 0.3rem;
    color: #fff;
    line-height: unset;
    -ms-line-height: 0.9rem;
    border-radius: 0;
    border: none;
    width: 100%;
    padding: 0.25rem 0.3rem;
    /* background-color: rgba(0, 0, 0, 0.5); */
    background: transparent url(../images/input-bg.png);
}

footer .tmpl-information div[contenteditable] {
    font-size: 0.35rem;
    margin-top: 0.3rem;
    color: #fff;
    height: 2.5rem;
    line-height: normal;
    /* border-radius: 0.3rem; */
    border: none;
    width: 100%;
    padding: 0.3rem;
    background: transparent url(../images/input-bg.png);
    -webkit-user-select: auto;
    overflow: hidden;
    overflow-y: auto;
}

footer .tmpl-information div[contenteditable] a{
    color:#00c8ae;
    text-decoration: underline;
}

footer .tmpl-information div[contenteditable]:empty:before{
    content:attr(placeholder);
    color: #666;
}

footer .tmpl-information .limit {
    font-size: 12px;
    /* background-color: #f0faf9; */
    padding: 0.3rem;
    text-align: right;
    color: #222;
    border-bottom-right-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
}

footer .tmpl-information .link {
    position: relative;
    margin-top: 0.3rem;
    padding: 0 0.3rem;
    /* border-radius: 0.3rem; */
    background: transparent url(../images/input-bg.png);
    margin-right: 2.5rem;

}

footer .tmpl-information .link input{
    padding: 0.25rem 0;
    margin: 0;
    background:transparent;
}
footer .tmpl-information .link input:first-child{
    border-bottom: solid 1px #BEC2C1;
	border-radius:0;
}

footer .tmpl-information .link a.submit{
    position: absolute;
    top:0;
    right: -2.5rem;
    height: 0.8rem;
    width: 2.2rem;
    line-height: 0.8rem;
    text-align: center;
    color: #fff;
    background-color: #00c8ae;
    border-radius: 0.4rem;
    /* border: solid 1px #BEC2C1; */
    outline: none;
    font-size: 0.35rem;
}
footer .tmpl-information .link a.button{
    position: absolute; 
    right: -2.5rem;
    height: 0.8rem;
    width: 2.2rem;
    line-height: 0.8rem;
    text-align: center;
    color: #fff;
    /* background-color: #fff; */
    border-radius: 0.4rem;
    border: solid 1px #BEC2C1;
    font-size: 0.35rem;
    outline:none;

    bottom:0;
}

footer .tmpl-information .categorys {
    /* margin-top: 0.3rem; */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

footer .tmpl-information .categorys span {
    /* margin-left: 0.16rem; */
    /* display: inline-block; */
    margin-top: 0.3rem;
    width: 30%;
    height: 0.8rem;
    line-height: 0.76rem;
    text-align: center;
    /* background-color: #fff; */
    border-radius: 0.8rem;
    border: solid 1px #fff;
    color: #fff;
}
footer .tmpl-information .lock{
    padding: 0 0 10px 0;
}

footer .tmpl-information .lock>div:first-child{
    display:flex;
    padding-top: 0.6rem;
    justify-content: space-between;
}
footer .tmpl-information .lock>div:first-child .tips{
    padding:0;
}
footer .switch{
    width: 1.5rem;
    background-color: rgba(218, 218, 218, 1);
    border-radius: 0.8rem;
    position:relative;
    transition: background-color 0.17s;
    height: .5rem;
}
footer .switch div{
    width: 0.8rem;
    height: 0.8rem;
    background-color:rgb(170, 170, 170);
    border-radius:1rem;
    position:absolute;
    margin-top: -0.15rem;
    transition:right 0.17s;
    right:0.7rem;
    box-shadow: 1px 2px 1px 0px rgba(202, 202, 202, 0.3);
}
footer .switch.on{
    background-color: rgb(157, 241, 228);
}
footer .switch.on div{
    right:0;
    background-color: #00ccad;
}
footer .tmpl-information .word{
    position:relative;
    margin:0.3rem 0;
}
footer .tmpl-information .word input{
    margin:0;
}
div.warn{
    position:absolute;
    right:0;
    display: block;
    bottom: 0;
    padding: 0 0.4rem;
    color: #c77a7b;
    line-height: 1rem;
    font-size:0.35rem;
    pointer-events: none;
    /* height: 100%; */
    /* padding: .1rem 0; */
    /* top: 0; */
}

footer .tmpl-information .categorys span.active {
    color: #fff;
    background-color: #00c8ae;
    border-color: #00c8ae;
}

footer .tmpl-information  button[type="button"]{
    /* border: solid 1px #BEC2C1; */
    /* color: #BEC2C1; */
}

footer  button.one {
    width: 100%;
    height: 1.2rem;
    background-color: #00c8ae;
    border-radius: 3rem;
    font-size: 16px;
    color: #fff;
    border: none;
    margin-left: 0 !important;
}

footer .tmpl-hotEdit{ 
    background: rgba(0, 0, 0, 0.3);
    padding: 0.01rem 0;
}

footer .tmpl-hotVisible {
    background-color: rgba(0, 0, 0, 0.3);
}
footer .tmpl-panoVisible {
    background-color: rgba(0, 0, 0, 0.3);
}
footer .tmpl-snapTour {
	padding-top: 0.25rem;
    background-color: rgba(0, 0, 0, 0.3);
}

footer .tmpl-snapTour .tips{
	margin-top:-0.2rem
}

footer .tmpl-snapTour.step-2 .tips i {
   display: inline-block;
   width: .15rem;
   height: .15rem;
   background-color: #C37C77;
   border-radius: 50%;
   vertical-align: 3px;
   margin-right: .1rem;
}

footer .tmpl-snapTour.step-2 .tips span {
    padding-left: 5px; 
    letter-spacing: 2px;
 }

.reciprocal{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
	z-index:9999;
}
.reciprocal span{
    position: absolute;
    left:50%;
    top: 50%;
    color: #fff;
    font-size: 120px;
    text-align: center;
    transform: translate(-50%,-50%);
}
/*
footer .tmpl-snapTour.exist {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 14px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    overflow: hidden;
}

footer .tmpl-snapTour.exist >div{
    position: fixed;
    width: 8rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    text-align: center;
    border-radius: 0.3rem;
    overflow: hidden;
}

footer .tmpl-snapTour.exist .icon{
    margin: 0.7rem 0 0.7rem 0;
    height: 2.7rem;
    background: url(../images/delAsk-bg.png) no-repeat center center;
    background-size: contain;
}

footer .tmpl-snapTour.exist .tips{
    color: #222;
    padding-bottom: 0.7rem;
    padding-top: 0;
    font-weight: bold;
}

footer .tmpl-snapTour.exist .tips >div{
    font-weight: normal;
    margin-top: 0.3rem;
}

footer .tmpl-snapTour.exist .buttons{
    display: flex;
    margin-top: 0;
}

footer .tmpl-snapTour.exist button{
    font-size: 0;
    white-space: nowrap;
    display: inline-block; 
    height: 1.4rem;
    border: none;
    font-size: 16px;
    color: #fff;
    letter-spacing: 1px;
    background: #00C8AE;  
    flex:auto;
    margin-left:0;
    width: auto;
    border-radius: 0;
}
 
footer .tmpl-snapTour.exist button[type="button"] { 
    background: #7FE3D7;
}
*/

/* end footer */

/*  cropper */

.cropper-line,
.cropper-point {
    background-color: #00c8ae !important;
}

.avatar-cropper {
    display: none;
    position: fixed;
    text-align: center;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 888;
    background: #fff;
}

.avatar-cropper-img-input {
    display: none;
}

.avatar-cropper-container,
.avatar-cropper-image-container,
.avatar-cropper-image-container .cropper-bg {
    height: 100% !important;
}

.avatar-cropper-container {
    z-index: 999;
    box-shadow: 1px 1px 5px rgba(100, 100, 100, 0.14);
}

.avatar-cropper-image-container {
    position: relative;
}

.avatar-cropper-container img {
    max-width: 100%;
    height: 100%;
}

.avatar-cropper-container .avatar-cropper-footer {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 50px;
    pointer-events: none;
}

.avatar-cropper-container button {
    width: 3.5rem;
    height: 1rem;
    border: solid 1px #fff;
    background-color: transparent;
    border-radius: 3rem;
    font-size: 16px;
    color: #fff;
    pointer-events: auto;
}

.avatar-cropper-container button[type="submit"] {
    margin-left: 0.3rem;
    background-color: #00c8ae;
    border: none;
}


.note-editor.note-frame .note-statusbar{
    display: none;
}
 
body[atPanel="wallDesign"] nav{ 
    bottom: 6.5rem; 
}

@media screen and (min-width: 520px){/*for pad or landscape*/
	footer .tips {
		font-size:.4rem;
	}
	footer .tips.center {
		font-size:.3rem;
	}
	footer .layout{
		padding:0;
	}
	footer .tmpl-information input, footer .tmpl-information div[contenteditable],footer .tmpl-information .link
	,footer .tmpl-hotpoint.step-3 input,footer .tmpl-hotpoint.step-3 div[contenteditable],footer .tmpl-hotpoint.step-3 .outLink
	{
		font-size: 16px;
		padding: 12px 22px;
		border-radius: 12px; 
	} 
	footer .tmpl-information div[contenteditable],footer .tmpl-hotpoint.step-3 div[contenteditable]{
		height:110px;
	}
	footer .tmpl-information .link{
		padding: 0 22px;  
	}
	footer .tmpl-information .link input,footer .tmpl-hotpoint.step-3 .link input{
		padding:12px 0;
		margin-bottom: 0; 
	}
	footer .tmpl-information .link a, footer .tmpl-hotpoint.step-3 .link a{
		font-size:16px !important;
		height: 40px !important;
		line-height: 40px !important; 
	}
 
	 
	footer .tmpl-hotpoint.step-3 .outLink>div{
		height: .5rem;
		line-height: .5rem;
	}
	footer .tmpl-hotpoint.step-3 .link, footer .tmpl-hotpoint.step-3 .outLink{
		/* margin-top:.1rem; */
		/* margin-bottom:.2rem; */
		border-radius: 12px;
	}
	footer .tmpl-information .categorys{
		margin-top: .1rem;
	}
	footer .tmpl-information .categorys span{
		/* width:calc(20px + 1.1rem); */
		/* height:calc(20px + 1.1rem); */
		/* line-height:calc(20px + 1.1rem); */
		/* font-size:calc(4px + .4rem); */
	}
 
	 
	footer .tmpl-hotpoint.step-3 .preview{
		border-radius: 12px;
		/* line-height:140px; */
		font-size:14px;
		/* margin: .1rem 0 .2rem 0; */
		/* margin-top: .1rem; */
	}
	
	footer .buttons button {  
    	font-size: 16px;
    	margin:0 5%;
    	margin-top: .3rem;
    }
	div.warn{
		font-size: 18px;
		line-height: 48px;
		/* line-height: 90px; */
		/* height: 100%; */
		/* position: relative; */
		 
	}
	
	footer .tmpl-hotpoint.step-3 .tips, .tmpl-information .tips, .tmpl-sign .tips,
	.tmpl-music .tips
	{
		padding:.3rem 0 .1rem 0;
		font-size:18px;
	}
	
	
	footer .tmpl-information .word{
		margin:.2rem 0 .05rem 0;
	}
 	footer .tmpl-menu li{
 		margin-top:.1rem
 	}
 	footer .tips{
		padding-top:.2rem;
	}
	footer .tmpl-sign .size span.name{
		font-size:20px;
		margin-top: -0.27rem; 
	}
	footer .tmpl-sign li span label{
		font-size:.3rem;
	}

	
	.tmpl-information div.warn{
 		line-height:48px;
 	}
	.avatar-cropper-container button{
		height:.6rem;
		width:2rem;
	}

	footer .tmpl-hotpoint  .slideCtrl .path .knot{
		width:1.8rem;
		height:0.7rem;
		top: -0.31rem;
		left: calc(50% - .9rem);
		border-radius: .35rem;
	}
}



@media screen and (min-width: 768px){/*for pad shortWidth*/
	.edit nav{
		transform:scale(0.8) translateX(0.1rem) translateY(3rem);
		bottom:7.2rem;
	}
	.staticSpot{
		transform:scale(1.2)
	} 
	footer .tmpl-music li {
		padding:0.28rem 0;
	}  
    footer .tmpl-menu li {
        width: 12.5%;
    }
    /* footer .tmpl-menu li span {
		width:50px;
		height:50px;
	} */

	
	footer .tmpl-menu li label {
		font-size:0.2rem;
	}
	footer .tmpl-hotpoint .slideCtrl{
		height: 0.7rem;
		margin-top: 0.1rem;
	}
	 
	#webgl .overlayGui.snapshotGui{
		width: calc(94% - 0.6rem);
		height: calc(85% - 3rem);
		border: 0.04rem dotted #ffffff;
		left: calc(3% + 0.3rem);
		top: calc(5% + 1rem);
	} 
	#webgl .snapshotGui .corner{
		width: 0.5rem;
		height: 0.5rem;
	}
	footer .tmpl-sign li span {
		 
	}
	footer .tmpl-sign li span label{
		bottom:-0.45rem;
	}
	footer .tmpl-sign .size {
		margin-top: 0.8rem;
		height: 0.4rem;
	}
	footer .tmpl-sign .size span.name{
		margin-top:-17px; 
	}
	 

	footer .buttons button {
    	/* margin-top: .1rem; */
    }

	footer .tmpl-hotpoint .icons {
		margin-top: 10px;
		width: 100%;
		padding: 0px;
	} 
	footer .tmpl-hotpoint .swiper-slide>div { 
		width: 52px;
		height: 52px; 
	}

	 
	footer .layout {
		 padding-bottom:0.2rem;
	}
	 
    footer .tmpl-hotpoint .icons {
    	margin-top:.2rem;
    }
    footer{
		font-size:0.25rem;
	}
	.resultBox>div{ 
		transform:translate(-50%,-90%) scale(.7)
	}
	
 
	footer .tmpl-wallDesign #lineProp,footer .tmpl-wallDesign #objProp>div,footer .tmpl-wallDesign  #houseHeight>div,   footer .tmpl-wallDesign #roomProp>div>div{ 
		height:0.6rem;
	}
	footer .tmpl-wallDesign  .title, footer .tmpl-wallDesign  .tip{ 
		line-height:0.6rem; 
	}
	footer .tmpl-wallDesign .slider{
 		margin-top: calc(0.3rem - 10px);
 	}
	 
	footer .tmpl-wallDesign .room-preview-rooms a{ 
		width: 80px;
		height: 80px; 
	}
	footer .tmpl-wallDesign  .name input{ 
		margin-top: calc(0.3rem - 15px); 
	}
	
	footer .tmpl-wallDesign .switch{
		margin-top:  calc(0.3rem - 6px); 
	}
	footer .tmpl-wallDesign #lineProp #architecture li{
		line-height:0.6rem; 
	}
	footer .tmpl-wallDesign #lineProp #architecture i{
		font-size: 0.5rem;
	}	
}



 @media all and (min-width: 768px) and (orientation:portrait){/*for pad 竖屏*/
 	 
 	footer .tmpl-hotpoint .slideCtrl{
 		margin-top:14px;
 		margin-bottom:20px;
 	}
 	footer .buttons{
 		margin-top: 10px !important;
 	}
 	footer .tmpl-wallDesign .buttons{
 		margin-top: 4px !important;
 	}
 	footer .tmpl-sign li span {
		width:1.4rem;
		height:1.4rem;
	}
	footer .tmpl-sign li span label{
		/* bottom:-0.45rem; */
	}
	footer .tmpl-sign li div.bg{
		border-radius:.17rem;
	}

	footer .tmpl-information .switch{
		 transform:translate(18%, -16%) scale(.68); 
	}


 }

 @media all and (min-width: 768px) and (orientation:landscape){/*for pad 横屏*/
	.edit nav{ 
		bottom:5rem;
	}
 }

@media all and (orientation : landscape) { /* horizontal*/
 
	footer .tmpl-menu li {
        width: 12.5%;
    }
    footer .tmpl-menu li {
    	margin-top:0; 
    }
    footer .tmpl-menu li span {
		width:calc(40px + 0.1rem);
		height:calc(40px + 0.1rem)
	}
	footer .tmpl-menu li span i{
		font-size:calc(36px + 0.1rem);
	}  
    
    footer{
		font-size:0.25rem;
	}
	 
	footer .tmpl-hotpoint .slideCtrl{
		height: 0.7rem;
		margin-top: 0.2rem;
	}
	 
	#webgl .overlayGui.snapshotGui{
		width: calc(94% - 0.6rem);
		height: calc(85% - 4.6rem);
		border: 0.04rem dotted #ffffff;
		left: calc(3% + 0.3rem);
		top: calc(3% + 2.2rem);
	} 
	#webgl .snapshotGui .corner{
		width: 0.5rem;
		height: 0.5rem;
	}
	nav{
        /* top: 7rem; */
        transform:scale(0.8);
        right:0.2rem;
    } 
	body[atPanel="wallDesign"] nav{
		bottom:unset;
		top:-0.3rem;
		z-index:121;
	}
	footer .tmpl-sign .size {
		 
	}
	footer .tmpl-sign .size span.name{
		font-size: 18px;
		margin-top: -14px;
	}
	footer .tmpl-menu li label {
		font-size:12px;
		margin-top:-3px
	}
	 
	.tmpl-hotpoint.step-1 .buttons{
		margin-top: 3px;
	}
	.tmpl-hotpoint.step-3 .buttons{
		margin-top: 20px;
	}
	 
	 
	footer .tmpl-hotpoint .icons {
		margin-top: 3px;
		width: 100%;
		padding: 0px;
	} 
	footer .tmpl-hotpoint .swiper-slide>div { 
		width: 52px;
		height: 52px; 
	}

 
	footer .layout {
		padding:3px 0 12px 0; 
	}
	footer .tmpl-music .tips{
		/* font-size:22px; */
	}
	footer .tmpl-music ul{
		margin-top:15px;
		/* height: 100px; */
		/* margin-bottom: 10px; */
	}
	footer .tmpl-music li{
		padding:11px 0;
		width:45%;
		float:left;
		margin-right: 5%;
		/* font-size:16px; */
	}
	 
	footer .tmpl-sign li em i {
		border-radius:0.1rem;
	}

	footer .tmpl-sign li em{
		border-radius:0.2rem;
	}
	footer .buttons button {
		 font-size:18px;
		 margin-left: 7%;
		 margin-right: 7%;
		 }

	footer .tmpl-information .categorys span {
		/* width:60px; */
		/* height:60px; */
		/* line-height:60px; */
		/* font-size:16px; */
	}

} 

@media screen and (min-width: 1024px) and (orientation : landscape){/*for ipad landscape horizontal*/
	  
	footer .tips {
		padding-top: 10px;
		 
	}
	 
	footer .tmpl-sign li span {
		 
	} 
	footer .buttons{
		/* margin-top:.2rem; */
	} 
 	footer .buttons button {
    	width: 40%;
    	/* height: calc(20px + .4rem); */
    	/* line-height: calc(20px + .4rem); */
    	font-size: 16px;
    }
}

@media all and (max-width: 320px) and (orientation:portrait){/*for small phone*/
	footer .tmpl-sign .size{
		padding:0 0.6rem 0 calc(85px + .1rem)
	}  
} 

@media all and (max-height: 320px) and (orientation:landscape){/*for small phone*/


	footer .layout {
		padding:0px 0 6px 0; 
	}
	footer .tmpl-menu li span {
		width:35px;
		height:35px;
	}
	footer .tmpl-menu li span i{
		font-size:32px;
	}
}
 


@media screen and (max-height: 600px) and (orientation: landscape) { /*horizon except pad*/
    #map{
        top: 1.5rem;
    }
     .edit nav{
        bottom:2.4rem;
        top:unset;
        margin-top:0;
        /* right: .7rem; */
        transform:scale(0.85);
    }
    
    /*.edit nav.left{
        bottom:2.4rem;
        top:unset;
        margin-top:0;
        transform:scale(0.85);
        left:.7rem;
        right:unset;
    }*/

    .edit nav label{
        position: absolute;
        top: 50%;
        left: -1.4rem;
        width: 100%;
        transform: translateY(-50%);
        text-align: right;
    }
    .en nav.right li:last-child label{
		left: -1.8rem;
	}

    .edit nav.left label{
        left: auto;
        right: -1.4rem;
        text-align: left;
        white-space: nowrap;
    }
    .edit .tmpl-settings .title{
        text-align: center;
    }
 
}

footer .tmpl-settings .row{
    height: 1rem;
}
 
.swiper-container-horizontal>.swiper-scrollbar{
	height:1px !important;
}

@media all   and (orientation:portrait){
	.en nav.right li:last-child label{
		margin-left: -.4rem;
	}
	.en nav.left li:nth-child(2) label{
	  /* margin-right: -1rem;*/
	  margin-right:-3em;
	}
}

/* change Color for zhifangbao  -------------------------------------------------*/

.zhi footer .tmpl-sign li span.active,
.zhi footer .tmpl-sign li em i ,
.zhi footer .tmpl-information .categorys span, 
.zhi footer .tmpl-hotpoint .swiper-slide.active>div,  
.zhi footer .tmpl-information .categorys span 
 
{
	border-color: #0075dc !important;
}	


.zhi .slider .scrollBar .scroll_Track ,
/* .zhi footer .buttons button[type="submit"], */
.zhi footer .tmpl-information .switch div,
.zhi .avatar-cropper-container button[type="submit"],
.zhi .cropper-line, .zhi .cropper-point,
.zhi footer  button.one, 
.zhi footer .tmpl-information .categorys span.active,
.zhi footer .tmpl-information .switch div,
.zhi #floorLogoSize .slider .scrollBar .scroll_Thumb,
.zhi footer .tmpl-hotpoint  .slideCtrl .path .knot,
.zhi .Box .buttons button
{
	background-color: #0075dc !important;
}



.zhi footer .tips span.right,
.zhi footer .tmpl-music li.active,
.zhi footer .tmpl-information .categorys span:not(.active) ,
.zhi footer .tmpl-hotpoint.step-3 div[contenteditable] a,
.zhi footer .tmpl-information .categorys span,
.zhi footer .tmpl-information div[contenteditable] a,
.zhi #hotspot .staticSpot .around div
{
	color: #0075dc !important;
}


 
/* 浅色 */

.zhi footer .tmpl-information input ,
.zhi footer .tmpl-information .link,
.zhi footer .tmpl-information div[contenteditable]  
{
	background-color: #f7fbfd !important;
}
.zhi footer .tmpl-information .switch.on,
.zhi .Box .buttons button.cancel, .Box .buttons button[type="cancelPsd"]
{
	background-color: #9fcdf6 !important;
}

/* ---------------------------------------------------------------------------- */