/*! f.3dwhere.com styles */
/* main display */

html,
body{ -webkit-text-size-adjust:none !important;}
*{ word-break:break-all; overflow:hidden;}
html{ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
body{ background:transparent !important; -webkit-text-size-adjust:100%; text-size-adjust:100%; margin:0; padding:0; width:100%; height:100vh; line-height:1.42857143; color:#333; font-size:14px; font-family:'PingFang SC','Microsoft YaHei',sans-serif; overflow:hidden;}
input, button, select, textarea{ font-family:inherit; font-size:inherit; line-height:inherit;}
a{ color:#006b9c; transition:all 0.4s ease 0s; text-decoration:none;}
a:hover, a:focus{ color:#2a6496; text-decoration:underline; text-shadow:0 1px 2px rgba(0,0,0,.1); outline:0;}
a:focus{ outline:thin dotted; outline:5px auto -webkit-focus-ring-color; outline-offset:-2px;}
.clearfix:before, .clearfix:after{ content:""; display:table;}
.clearfix:after{ clear:both;}
.clearfix{ clear:both; *zoom:1;}
ul, li{ margin:0; padding:0;}
li{ list-style:none; cursor:pointer;}

.viewbody{ position:relative; width:100%; height:100%; overflow:hidden;}
.viewer{ width:100%; height:100%; background:transparent !important;}
.pace-progress{ display:block; position:absolute; top:50%; left:50%; padding:5px 15px 16px; border-radius:16px; transform:translate(-50%,-50%); content:attr(data-progress-text); font-family: 'Helvetica Neue',sans-serif; font-weight:100; font-size:5rem; line-height:1.2; text-align:center; color:rgba(255,255,255,.7); background:rgba(50,50,50,.4); text-shadow:0 0px 5px rgba(0,0,0,.3); z-index:9999;}

.model-viewer{ --progress-bar-color:transparent; background:transparent !important;}

.menu-by-list{ position:absolute; top:20px; left:0; bottom:35px; width:70px; border-top-right-radius:10px; border-bottom-right-radius:10px; background:rgba(255,255,255,.15); transition:all ease-in-out .2s; overflow:hidden;}
    .menu-by-list.open{ width:260px; }
.menu-list-header{ height:59px; line-height:59px; border-bottom:solid 1px rgba(0,0,0,.1); color:rgba(255,255,255,.6); font-size:16px;}
.menu-list-header svg{ display:none;}/*隐藏遗留按钮箭头*/

.menu-logo{ display:none; float:left; padding:0 20px;}
.menu-btn{ float:none; display:block; width:100%; height:60px; background-image:url('/images/ico-arrow-right-white.svg'); background-position:center center; background-repeat:no-repeat; line-height:60px; font-size:20px; text-align:center;}
.menu-btn:hover{ background-color:rgba(255,255,255,.1); }

.menu-list-body{ margin:0; padding:0 0 20px; width:100%; height:calc(100vh - 130px); overflow:hidden; overflow-y:auto;}

.menu-list-body::-webkit-scrollbar{ width:6px; /* 滚动条宽度 */}
.menu-list-body::-webkit-scrollbar-track{ background:rgba(255,255,255,0); border-radius:10px;}
.menu-list-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.3); /*滑块*/ border-radius:10px;}
.menu-list-body::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.5); /* 悬停时 */}


    .menu-list-body li{ margin:0; padding:10px 0; height:38px; line-height:38px; text-shadow:0 1px 1px rgba(0,0,0,.4); color:rgba(255,255,255,.6); text-align:center; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
    .menu-list-body li:hover{ background:rgba(215,225,230,.3);}
	.menu-list-body li.on{ background:rgba(215,225,230,.6); text-shadow:0 1px 1px rgba(255,255,255,.2); color:rgba(0,0,0,.6);}
        .menu-list-body li img{ float:none; margin:0; width:50px; height:38px; border-radius:2px; }
        .menu-list-body li span{ display:none; }

.open .menu-logo{ display:block;}
.open .menu-btn{ float:right; width:60px; background-image:url('/images/ico-arrow-left-white.svg');}
.open .menu-list-body li{ margin:0; padding:10px 10px; text-align:left;}
    .open .menu-list-body li img{ float:left; margin:0 10px 0 0;}
    .open .menu-list-body li span{ display:inline; }

model-viewer { /*--progress-bar-color:transparent; */
--progress-bar-color:#ff8135; --progress-bar-height:2px;}
#default-poster, .fab{ background:transparent !important;}
.progress-bar{ display:none}
.x-spinner{ display:none}

/* 手机竖屏模式下的样式 */
@media screen and (max-width:500px) and (orientation:portrait){
	.menu-by-list{ width:60px; height:60px; overflow:hidden;}
	.menu-by-list.open{ height:100vh; width:260px;}
	.menu-list-body{ display:none;}
	.menu-by-list.open .menu-list-body{ display:block;}

	/* 增加下边距以保证安全底部 */
	body{ padding-bottom:env(safe-area-inset-bottom);}
}