﻿.bigBox .switch3D{
    position: absolute;
    bottom: 15px;
    right: 15px;
    z-index: 2;
    width: 50px;
    height: 50px;
    opacity: 0.7;
    cursor: pointer;
}
.bigBox .switch3D:hover{
    opacity: 1;
}
.bigBox .switch3D svg{
    width: 100%;
    height: 100%;
}
.new-threed-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
    z-index: 9999;
    line-height: 1;
    border-radius: 10px;
}
.new-threed-box iframe {
    width: 950px;
    height: 720px;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 10px;
    border: 0;
}
.new-threed-box .close {
    position: absolute;
    right: 11px;
    top: 12px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.new-threed-iframe-box {
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, 0);
    z-index: 9999;
    line-height: 1;
    border-radius: 10px;
}
.new-threed-iframe-box .content{
    width: 100%;
    height: 100%;
}
.new-threed-iframe-box iframe {
    width: 100%;
    height: 100%;
}
.new-threed-iframe-box .close {
    position: absolute;
    right: 11px;
    top: 12px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}
/* 3D选型展示模板 */
.switch3D{
	cursor: pointer;
	position: absolute;
	right: 10px;
	bottom: calc(24px + 100px);
	width: 50px;
	height: 50px;
	z-index: 201;
	background: url(https://rqrorwxhnipmmm5m.leadongcdn.com/images/proddetail/threeD.png) 0px 0px no-repeat;
	background-size: 100%;
	opacity: 0.7;
}
.switch3D:hover{
	opacity: 1;
}
.threeDBox{
	position: absolute;
	width: 100%;
	height: calc(100%);
	top: 0;
	background: #fff;
	z-index: 200;

	/* width: 700px;
	height: 700px;
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
}
.threeDBox #threeDclose{
	cursor: pointer;
	display: inline-block;
	position: absolute;
	right: 2px;
	top: 3px;
	font-size: 20px;
	z-index: 201;
	color: #333;
	width: 32px;
	height: 32px;
	/* border: 1px solid #efefef; */
	text-align: center!important;
	line-height: 32px!important;
	border-radius: 50%;
	/*background: #000;*/
	opacity: 1;
	/*background-image: url(../../../../images/proddetail/prodetailclosevideo.png);*/
	background-repeat: no-repeat;
}
.threeDBox #threeDclose svg{
	width: 100%;
	height: 100%;
	display: block;
	transform: scale(0.8);
}
.threeDBox #threeDclose svg:hover{
	transform: scale(0.9);
}
.threeDBox #threeDclose svg path{
	fill: #737373;
}
#ThreeD_containter_main{
    width: 100%;
    height: 100%;
}
#ThreeD_containter_main canvas{
    background: #000;
}
#ThreeD_containter_main #threeDControl{
    width: 30px;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    /*background: blue;*/
	border-radius: 10px;
	padding: 4px;
}
#ThreeD_containter_main #threeDControl #zoom_amplify,
#ThreeD_containter_main #threeDControl #zoom_reduce{
	height: 30px;
	display: block;
	margin-bottom: 10px;
	transform: scale(0.8);
	cursor: pointer;
}

#ThreeD_containter_main #threeDControl #zoom_amplify:hover,
#ThreeD_containter_main #threeDControl #zoom_reduce:hover{
	transform: scale(0.9);
}
#ThreeD_containter_main #threeDControl #full_screen{
	height: 30px;
	display: block;
	margin-bottom: 10px;
	transform: scale(0.8);
	cursor: pointer;
}
#ThreeD_containter_main #threeDControl #full_screen:hover{
	transform: scale(0.9);
}
#ThreeD_containter_main #threeDControl #zoom_amplify path,
#ThreeD_containter_main #threeDControl #zoom_reduce path,
#ThreeD_containter_main #threeDControl #full_screen path{
	fill: #737373;
}
#ThreeD_containter_main #threeDControl .zoom-box,
#ThreeD_containter_main #threeDControl .setting-box{
	display: flex;
	flex-wrap: wrap;
}
#threeDLoading.product-gallery__stage--blank-message {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
	width: 100px;
	height: 100px;
	line-height: 100px;
	border-radius: 50%;
	background-color: #ffffffa8;
	color: #333;
	font-weight: 400;
	font-size: 16px;
	text-align: center;
}
/*loading特效代码*/
#cercle {
	height : 50px;
	width : 50px;
	position : absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background: linear-gradient(rgb(241, 243, 244),rgb(189,193,198));
	animation : turnCercle 2s infinite;
	-webkit-animation : turnCercle 5s infinite;
	animation-timing-function : ease-in-out;
	-webkit-animation-timing-function : ease-in-out;
}

@-webkit-keyframes turnCercle {
	0% {-webkit-transform : translate(-50%, -50%) rotate(0deg);}
	100% {-webkit-transform : translate(-50%, -50%) rotate(10080deg);}
}

@keyframes turnCercle {
	0% {transform : translate(-50%, -50%) rotate(0deg);}
	100% {transform : translate(-50%, -50%) rotate(10080deg);}
}
#cercleCache {
	height : 40px;
	width : 40px;
	position : absolute;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	border-radius : 50%;
	background-color: #ffffff;
	z-index : 5;
}
.caseViolette #load {
	color: rgb(95, 99, 104);
	font-family: calibri;
	text-align: center;
	position: absolute;
	top: calc(50% + 35px);
	left: 50%;
	transform: translate(-50%, -50%);
}
#point {
	height : 2px;
	width : 2px;
	position: absolute;
	top: calc(50% + 35px);
	left: calc(50% + 24px);
	border-radius : 50%;
	background-color: rgb(95, 99, 104);
	animation : point 1.5s infinite;
	-webkit-animation : point 1.5s infinite;
	animation-timing-function : linear;
	-webkit-animation-timing-function : linear;
}

@-webkit-keyframes point {
	0% {left : calc(50% + 24px); opacity : 0;}
	5% {left : calc(50% + 24px); opacity : 1;}
	15% {left : calc(50% + 24px); opacity : 0;}
	30% {left : calc(50% + 27px); opacity : 0;}
	45% {left : calc(50% + 27px); opacity : 1;}
	60% {left : calc(50% + 27px); opacity : 0;}
	75% {left : calc(50% + 30px); opacity : 0;}
	90% {left : calc(50% + 30px); opacity : 1;}
	100% {left : calc(50% + 30px); opacity : 0;}
}

@keyframes point {
	0% {left : calc(50% + 24px); opacity : 0;}
	5% {left : calc(50% + 24px); opacity : 1;}
	15% {left : calc(50% + 24px); opacity : 0;}
	30% {left : calc(50% + 27px); opacity : 0;}
	45% {left : calc(50% + 27px); opacity : 1;}
	60% {left : calc(50% + 27px); opacity : 0;}
	75% {left : calc(50% + 30px); opacity : 0;}
	90% {left : calc(50% + 30px); opacity : 1;}
	100% {left : calc(50% + 30px); opacity : 0;}
}