#bags { position:relative; -webkit-transform-style:preserve-3d; transform-style:preserve-3d;}
#bags div { position:absolute; bottom:20px; left:0;}
.front_face { display:block; width:320px; height:230px;}
#bags #cover .front_face { background:url("../img/font.png"); -webkit-transform:translateZ(0px) translate3d(-160px, 0, 30px); transform:translateZ(0px) translate3d(-160px, 0, 30px);}
#bags #inner .front_face { width:320px; height:230px; background-color:#FFF; opacity:.7; -webkit-transform:translateZ(0px) translate3d(-160px, 0, 28px); transform:translateZ(0px) translate3d(-160px, 0, 28px); }
.back_face { display:block; width:320px; height:230px;}
#bags #cover .back_face { background:url("../img/font.png"); -webkit-transform:translateZ(0px) translate3d(-160px, 0, -30px) rotateY(180deg); transform:translateZ(0px) translate3d(-160px, 0, -30px) rotateY(180deg);}
#bags #inner .back_face { width:320px; height:230px; background-color:#FFF; opacity:.7; -webkit-transform:translateZ(0px) translate3d(-118px, 0, -28px); transform:translateZ(0px) translate3d(-160px, 0, -28px);}
.left_face { display:block; width:60px; height:230px;}
#bags #cover .left_face { background:url("../img/side.png"); -webkit-transform:translateZ(0px) translate3d(-190px, 0, 0) rotateY(90deg); transform:translateZ(0px) translate3d(-190px, 0, 0) rotateY(90deg);}
#bags #inner .left_face { width:56px; height:230px; background-color:#FFF; -webkit-transform:translateZ(0px) translate3d(-188px, 0, 0) rotateY(90deg); transform:translateZ(0px) translate3d(-186px, 0, 0) rotateY(90deg);}
.right_face { display:block; width:60px; height:230px;}
#bags #cover .right_face { background:url("../img/side.png"); -webkit-transform:translateZ(0px) translate3d(130px, 0, 0) rotateY(90deg); transform:translateZ(0px) translate3d(130px, 0, 0) rotateY(90deg);}
#bags #inner .right_face { width:56px; height:230px; background-color:#EEE; -webkit-transform:translateZ(0px) translate3d(132px, 0, 0) rotateY(90deg); transform:translateZ(0px) translate3d(128px, 0, 0) rotateY(90deg);}
#bags #cover .front_face,#bags #cover .back_face { background-size:320px;}
#bags #cover .right_face,#bags #cover .left_face { background-size:60px;}

#bags #inner .ear_1,#bags #inner .ear_2 { width:130px; height:50px; border-width:10px; border-style:solid; border-color:#c97ca2; border-bottom:0; -webkit-transform:translateZ(0px) translate3d(-65px,-230px,21px) rotateX(25deg); transform:translateZ(0px) translate3d(-65px,-230px,21px) rotateX(25deg); border-radius:150px 150px 0 0; }
#bags #inner .ear_2 { -webkit-transform:translate3d(-65px,-230px,-21px) rotateX(-25deg); transform:translate3d(-65px,-230px,-21px) rotateX(-25deg)}

#mark { width:83px; height:316px; background:url("../img/mark.png"); background-size:83px;  -webkit-transform:translateZ(0px) translate3d(120px,0, 0); transform:translateZ(0px) translate3d(120px,0, 0);}
#mark2 { width:316px; height:316px;  -webkit-transform:translateZ(0px) translate3d(-158px,140px, 35px); transform:translateZ(0px) translate3d(-158px,140px, 35px);font-size: 30px;text-align: center;color: #eee;}
#mark2 small{font-size: 25px; }

#shadow { width:300px; height:200px; overflow:hidden; -webkit-transform:translateZ(0px) translate3d(-180px,102px,-70px) rotateX(-90deg); transform:translateZ(0px) translate3d(-180px,102px,-70px) rotateX(-90deg);}
    #shadow div { width:400px; height:420px; background:-webkit-radial-gradient(rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 50%); background:radial-gradient(rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 50%); -webkit-transform: skewX(-45deg); transform: skewX(-45deg);}

.bottom_face { display:block; width:240px; height:60px; background:#DDD; -webkit-transform:translateZ(0px) translate3d(-120px, 30px, 0) rotateX(-90deg); transform:translateZ(0px) translate3d(-120px, 30px, 0) rotateX(-90deg);}
main { width:100%; height:100%; position:absolute; overflow:hidden;}
article { width:100%; height:100%; position:absolute; display:flex; justify-content:center; align-items:center; perspective:1250px;}
article.pan { cursor:-webkit-grab; }
article.zoom { cursor:n-resize; }
#perspective { position:absolute; top:50%; left:50%; margin-top:100px; width:0; height:0; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transform:rotateX(-20deg) rotateY(-45deg); transform:rotateX(-20deg) rotateY(-45deg);}
#perspective.reset { -webkit-transition:transform 1s ease-in-out; transition:transform 1s ease-in-out;}
#grid { margin:-500px; width:1000px; height:1000px; opacity:0.7; -webkit-transform:rotateX(90deg); transform:rotateX(90deg); background:-webkit-radial-gradient(rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 50%); /*background:url("../img/mark.jpg") no-repeat 30% 50%; background-size:83px;*/}
rect { stroke:#333; stroke-width:1px; fill:transparent;}
line { stroke:#333; stroke-width:1px;}
#axis, #graph { margin-top:-6px; width:0; height:0; position:relative; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transform:rotateX(90deg); transform:rotateX(90deg);}
#axis { opacity:0.4; }
#X, #Y, #Z, #X div, #Y div, #Z div, .point, .point div { width:2px; height:2px; position:absolute;}
#X, #Y, #Z, .point { top:-1px; left:-1px; -webkit-transform-style:preserve-3d; transform-style:preserve-3d;}
#X { -webkit-transform:translateX(1px) rotateY(90deg); transform:translateX(1px) rotateY(90deg);}
#Y { -webkit-transform:translateY(1px) rotateX(-90deg); transform:translateY(1px) rotateX(-90deg);}
#Z { -webkit-transform:translateZ(1px); transform:translateZ(1px);}
#X div { background:#F56931; }
#Y div { background:#27C26F; }
#Z div { background:#31BDF5; }
#X .front, #Y .front, #Z .front { -webkit-transform:translateZ(500px) rotateY(0deg); transform:translateZ(500px) rotateY(0deg); }
#X .back, #Y .back, #Z .back { -webkit-transform:rotateY(180deg); transform:rotateY(180deg);}
#X .left, #Y .left, #Z .left { width:500px; -webkit-transform:translate3d(-250px, 0, 250px) rotateY(-90deg); transform:translate3d(-250px, 0, 250px) rotateY(-90deg);}
#X .right, #Y .right, #Z .right { width:500px; -webkit-transform:translate3d(-248px, 0, 250px) rotateY(90deg); transform:translate3d(-248px, 0, 250px) rotateY(90deg);}
#X .top, #Y .top, #Z .top { height:500px; -webkit-transform:translate3d(0, -250px, 250px) rotateX(90deg); transform:translate3d(0, -250px, 250px) rotateX(90deg);}
#X .bottom, #Y .bottom, #Z .bottom { height:500px; -webkit-transform:translate3d(0, -248px, 250px) rotateX(-90deg); transform:translate3d(0, -248px, 250px) rotateX(-90deg);}
.point div { background:tomato; }
.point .front { -webkit-transform:translateZ(1px) rotateY(0deg); transform:translateZ(1px) rotateY(0deg);}
.point .back { -webkit-transform:translateZ(-1px) rotateY(180deg); transform:translateZ(-1px) rotateY(180deg);}
.point .left { -webkit-transform:translateX(-1px) rotateY(-90deg); transform:translateX(-1px) rotateY(-90deg);}
.point .right { -webkit-transform:translateX(1px) rotateY(90deg); transform:translateX(1px) rotateY(90deg);}
.point .top { -webkit-transform:translateY(-1px) rotateX(90deg); transform:translateY(-1px) rotateX(90deg);}
.point .bottom { -webkit-transform:translateY(1px) rotateX(-90deg); transform:translateY(1px) rotateX(-90deg);}
label { position:absolute; color:#999;}
#bags p { padding:5px; font-size:16px; color:#AAA;}
#bags p:first-child { margin-bottom:10px; font-weight:bold; font-size:17px;}
#bags button { margin:10px 5px; padding:5px 10px; border:solid 1px #999; border-radius:5px; font:18px Trebuchet MS; color:#999; background:transparent; cursor:pointer; outline:none;}
#bags button:hover { border-color:#AAA; color:#AAA;}
#bags button:active, button.selected { color:#EEE;}
#menu { margin:15px; margin-bottom:10px; padding:20px; width:100%; height:500px; text-align:center; font:18px Trebuchet MS; color:#999; background:#272727;}
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-thumb { border-right:solid 5px #222; background:#5F5F5F;}