/* Haval 2020-05 */

/*@-ms-viewport { width:device-width; }*/
/*@media only screen and (min-device-width:800px) { html { overflow:hidden; } }*/
html { height:100%; overscroll-behavior:none; }
body { height:100%; position:relative; overflow:hidden; margin:0; padding:0; border:0; overflow:hidden; overscroll-behavior:none;
font-family:Montserrat, Arial, sans-serif; font-size:16px; font-weight:300; color:#999; background-color:#252525; }

a, a:visited, a:hover, a:active {color:#666;text-decoration:none; outline:none; cursor:pointer; }
a, a:visited {color:#600;} a:hover  {color:#800;} a img { border:0 none; }

img {-moz-user-select:none; -webkit-user-select:none; -webkit-user-drag:none; }

.overlay { content:""; display: none; position: fixed; top:0; left:0; width: 100%; height: 100%; background: rgba(00,20,50,.65); z-index:3500; }

#pano { display:block; position:fixed; top:0; right:0; bottom:0; left:0; z-index:1; width:100%; height:100%; background-color:transparent; }

.links { display: block; width:0; height:0; position:absolute; top:50%; left:50%;
  z-index:2; border:0px solid #fff; overflow:hidden; background:transparent; }
.links div { display:block; visibility:hidden; position:absolute; top:0; left:0;
  width:0; height:0; border:0px solid #fff; overflow:hidden; background:transparent; }

#viewSelector { opacity: 0; z-index: 50; }
#objLayout { z-index: 50; }
#wraph { width:80%; max-width:1200px; height:96vh; margin:0 auto;
  line-height:96vh; text-align:center; vertical-align:middle; }
#help  { display:inline-block; max-width:90vmin; text-align:center; vertical-align:middle; 
  line-height:0; border:0 solid transparent; }
.col-2 { display:inline-block; vertical-align:middle; width:48.2%; }
@media ( max-width:480px) { #help{max-width:70vmin;} .col-2{width:80%;} }


#outintro { flex-flow:column nowrap; flex:1 0 auto; justify-content:center; align-items:center; 
  position:relative; z-index:100; width:100%; height:100%; }
#wintro   { flex-wrap:wrap; align-content:center; justify-content:center; flex:0 0 80%; 
  width:80%; max-width:480px; }

#tour_title, #tour_end { flex:1 1 100%; justify-content:center; 
  margin:-.95em auto .95em; color:#eee; font-weight:600; text-align:center;
  line-height:1em; font-size:36px; font-size:calc(1.0rem + 2.5vmin); opacity:0; }

#buttons  { position:relative; height:auto; width:100%; max-width:360px; border-radius:4px; overflow:hidden; }
#buttons div { position:relative; width:50%; flex:1 0 50%;  }

#viewer { transition:all .75s; }

.transition  { 
  -webkit-transition:all .45s ease-out 0s; -moz-transition:all .45s ease-out 0s;
       -o-transition:all .45s ease-out 0s;      transition:all .45s ease-out 0s; }

.btn, .button { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
  background-color:rgba(17,17,17,.99); color:#fff; border:none; }
.btn { position:absolute; top:0; right:0; bottom:0; left:0; height:100%; width:100%; }
.btn:hover,  .button:hover  { background-color:rgb(51,51,51); color:#fff; border:none; }
.btn:active, .button:active { background-color:rgb(208,0,8); color:#fff; border:none; }

#buttons .btn_h { height:calc(2.5rem + 2.0vmin); line-height:calc(2.5rem + 2.0vmin); 
  font-size:18px; font-size:calc(1.1rem + 1.0vmin); }
.button span { white-space:nowrap; }


.overlay { display:flex; flex-flow:column nowrap; flex:1 0 100%; justify-content:center; align-items:center; 
  position:absolute; top:-1px; right:-1px; bottom:-1px; left:-1px; height:calc(100% + 2px); width:calc(100% + 2px); z-index:16; background-color:#535862; background-position:center; background-size:auto 100%; 
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAASwCAMAAAANEtB4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARRQTFRFU1hipaqwgYWOrrK4trrAqq60fIGKsra8eH6GuLzCtLi+VVpkdHmCVlxlWV5ocHZ+sLS6WmBpbHJ6q7C2aG12XWJsXmRtZGlyYGVvYWdwVFljXGFqYmhxo6ivZmx1WF1njpOakJWckpeelJmgio+WqKyzb3R9jJGYa3B5ZWpzlpuiiI2VhouTm5+mmJ2kd3yFhImRoqataW94nKCon6Oqc3iBf4SMm6Cne4CIoKSrg4iQbnN8oaWsoqeucneAk5ifU1lih4yUnqKpl5yjU1ljmZ6lhYqSdnuEi5CYkZadlZqhnaGon6Srj5SbiY6Woaasen+Hp6uymJyjjZKZmp6lr7O6jZKalpqhiY2VhYqRfoOLh4uTvzmDLAAAAZZJREFUeNqk1gdawkAQBeDYsCt2ERV7A3vvvYG9IXL/e7jZbN7sZiZ8oPwHAJJ5b8bzavqcGVfaiNFeUWesjKMrRo8obRkQDAqGmRQzahmCxYhxpt+xIViw9DKHMGfpZk5gGzqYW1iFFuYF9iAR8QM7UC84YNaMkndj5LSydw5Z7Vt5MmbgzpiHd+VLm4BHYxLuYco4hWnIK0VlCS61N2UFrrUPZRl2lU2tYFxYtuBB2deO4FlZN45hzFHHvFpmI5pEfaKGGJ+OpKO5Sm2Cxj9o/bfav1P67dX+72SE+yzl590XQ36X0TduTwOfFXeWaMbCqfMnkOYxmE9/UmluaZYLEMy7P/mUAz8VQT4oL356ghxRroo6a3kre5THMKGUWcpxmGzKepD9d6sRwo6g1niCb9MuWbRN2TRQDo1UQkvx/uIdRw1IrZhgqEupX3n3Ui9TV/Mep46n3uc7wd4YtEf4jrE3kLSh3B3Gd5y7A2k72jszJYhuXWk3Szs87ZDvAPlmyETE3yCVb5fwwgnuneD2qenzK8AAO8qYjTOXCk4AAAAASUVORK5CYII="); }

.logo, .progress {  width:260px; margin:20px 5px; }

.progress { display:block; position:relative; height:4px; background-color:#444; overflow:hidden; }

.loaded { display:block; position:absolute; width:auto; height:4px; left:0; right:auto;  background-color:#fff; }

.button, label.radio { display:block; width:auto; margin:20px 1px; padding:.87rem 2rem .75rem;
  text-align:center; font-weight:400; cursor:pointer; transition: all 1s ease; }

.extint { display:flex; flex-flow:row wrap; flex:1 0 284px; justify-content: center;
  position:absolute; z-index:20; top:.2rem; left:50%; overflow: hidden; width:284px;
  transform: translateX(-50%); border-radius: 0 0 .5rem .5rem; transition:all 0.75s ease; }
.extint .button,
.extint label.radio { min-width:140px; margin:1px; padding:.75rem 1rem .65rem; font-weight:500;
  background-color: rgba(0,0,0,.75); color:#bbb; border-top:2px solid transparent; transition: all .5s ease; }
.extint label.radio:hover { background-color: rgba(57,57,57,.95); color:#fff; }
.extint input[type="radio"]:checked + label.radio { background-color: rgba(240,240,240,.75); color:#000; cursor: default; 
  border-top:2px solid #B60004; }

input[type="radio"] { display:none; }
label.radio { cursor:pointer; margin:10px 10px; }

.nav-prev, .nav-next { content: ""; display:block; position:absolute; top:33%; bottom: 33%; z-index:8; 
  width:46px; height:auto;  background-color: rgba(0,0,0,.01); background-repeat:no-repeat; background-position:center; 
  background-size:100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px' viewBox='0 0 100 100' %3E%3Cpolygon fill='%231A1A1A' fill-opacity='0.25' points='33,50 65,82 65,18 '/%3E%3Cpolygon fill='%23FFF' fill-rule='nonzero' points='65,25.123 40.122,50 65,74.877 65,82 33,50 65,18 '/%3E%3C/svg%3E"); cursor:pointer; opacity:.65; }
.nav-prev { left:0; }
.nav-next { right:0; transform:rotate(180deg); }
.nav-prev:hover, .nav-next:hover { opacity:1; }

.colors { display:flex; flex-flow:row nowrap; justify-content:center; align-content:center; border:0 solid transparent;
  position:absolute; bottom:1.2rem; top:auto; left:50%; transform:translateX(-50%); z-index:10; border-radius:3.5rem;
  transition: all .75s ease;}
.cc { content:""; display:inline-block; position:relative;
  width:3.5rem; height:3.5rem; border:0 solid #eee; margin:4px; border-radius:50%; cursor:pointer;
box-shadow:0 4px 16px rgba(0,0,0,.15), inset 0 0 1px 1px rgba(255,255,255,.5); }
.cc:hover { box-shadow:inset 0 0 0 2px rgba(255,255,255,.75); }
@media ( max-width:600px) { .colors { bottom:1.6rem; } .cc { width:3.0rem; height:3.0rem; margin:3px; } }
@media ( max-width:480px) { .colors { bottom:2.0rem; } .cc { width:2.8rem; height:2.8rem; margin:2px; } }

.cc span { display:block; position:absolute; visibility:hidden; opacity:0; z-index:-3; pointer-events:none; 
  padding:.75rem 1.5rem; background:#282829; color:#eee; bottom:75%; left:50%; transform:translate(-50%,10%) scale(0.5); 
  -webkit-transition:all .2s ease; transition:all .2s ease; }
.cc:hover span { visibility:visible; opacity:1; z-index:+10; bottom:100%; transform:translate(-50%,-20%) scale(1.0);
  -webkit-transition:all 0.35s ease; transition:all 0.35s ease; }

.zoom_in, .zoom_out { content:""; display:block; width:2.4rem; height:2.4rem;
  position:absolute; bottom:22%; right:0.5rem; z-index:9;
  background-color:rgba(0,0,0,.01); background-repeat:no-repeat; background-position:0 0; background-size:200% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200px' height='100px' viewBox='0 0 200 100'%3E%3Cpath fill='%23FFF' fill-opacity='0.2' stroke='%23FFF' stroke-width='5' d='M161.25 42.5l-37.5 0m18.751 -37.5c-20.712,0 -37.5,16.789 -37.5,37.5 0,20.711 16.788,37.5 37.5,37.5 20.711,0 37.499,-16.789 37.499,-37.5 0,-20.711 -16.788,-37.5 -37.499,-37.5zm26.516 64.017l25.984 25.983m-152.46 -71.25l0 37.5m18.709 -18.75l-37.5 0m18.75 -37.5c-20.711,0 -37.5,16.789 -37.5,37.5 0,20.711 16.789,37.5 37.5,37.5 20.711,0 37.5,-16.789 37.5,-37.5 0,-20.711 -16.789,-37.5 -37.5,-37.5zm26.517 64.017l25.983 25.983'/%3E%3C/svg%3E"); }
.zoom_out { background-position:100% 0; }


/* markers */
[class^="mk_"], [class*="mk_"] { content:""; display:block; position:absolute; z-index:150; width:2.5rem; height:2.5rem; 
background-color:rgba(0,0,0,.01); background-repeat:no-repeat; transform: translate(-50%, -100%); transform-origin: bottom center;}
.mk_q { background-size:100%; transition: transform 0.7s;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px' viewBox='0 0 100 100'%3E%3Crect fill='%23B60004' x='14' y='21' width='72' height='48' rx='2.813' ry='3'/%3E%3Cpath fill='none' stroke='%23FFF' stroke-width='3.5' d='M50 69l0 26m-23 -40l23 0m-23 -10.02l46 0m-46 -9.981l46 0'/%3E%3C/svg%3E"); }
.mk_p { background-position:0 0; background-size:200% 100%;  transition: transform 0.7s;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200px' height='100px' viewBox='0 0 200 100' %3E%3Cpath fill='%23B60004' d='M107 75.004l43 21 42.978 -21 0.022 -68 -86 0 0 68zm-100 0l43 21 42.978 -21 0.022 -68 -86 0 0 68z'/%3E%3Cpath fill='none' stroke='%23FFF' stroke-width='3.5' d='M50 29l0 32m-16 -16l32 0m59.998 -16l48 0 0 32 -48 0 0 -32z'/%3E%3C/svg%3E%0A"); }
.mk_p:hover { background-position:100% 0; }


.anim_pulse { -webkit-animation:pulse 2.2s ease infinite; -moz-animation:pulse 2.2s ease infinite; animation:pulse 2.2s ease infinite; }
.anim_pulse:hover { -webkit-animation:pulse_h 2.2s ease infinite; -moz-animation:pulse_h 2.2s ease infinite; }
.transparent { opacity: 0; }

@keyframes pulse {
  0%    { background-color:rgba( 0,104,180,.25); }
  50%   { background-color:rgba(80,210,180,.40); }
  100%  { background-color:rgba( 0,104,180,.25); }
}
@keyframes pulse_h {
  0%    { background-color:rgba(80,210,180,.5); }
  50%   { background-color:rgba(162,197,16,.7); }
  100%  { background-color:rgba(80,210,180,.5); }
}

[class^="ico-"], [class*=" ico-"], 
.ico-desk, .ico-desk-v, .ico-touch, .ico-vr  { height:100%; 
  background-repeat:no-repeat; background-position:center; background-size:calc(2.5rem + 2.0vmin); }
.ico { content: ""; display: inline-block; width:calc(2.5rem + 2.0vmin); vertical-align:middle; }

.ico-vr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300px' height='200px' fill-rule='evenodd' clip-rule='evenodd'%0AviewBox='0 0 30000 20000' %3E%3Cpath fill='%23fff' d='M5000 2000l20000 0c1375,0 2500,1125 2500,2500l0 11000c0,1375 -1125,2500 -2500,2500l-7656 0c-217,-64 -427,-231 -479,-435l-1047 -4047c-92,-355 -434,-604 -818,-604 -384,0 -726,249 -818,604l-1046 4047c-53,204 -263,371 -480,435l-7656 0c-1375,0 -2500,-1125 -2500,-2500l0 -11000c0,-1375 1125,-2500 2500,-2500zm4900 5450c1326,0 2400,1075 2400,2400 0,1326 -1075,2400 -2400,2400 -1326,0 -2400,-1075 -2400,-2400 0,-1326 1075,-2400 2400,-2400zm10200 0c1326,0 2400,1075 2400,2400 0,1326 -1075,2400 -2400,2400 -1326,0 -2400,-1075 -2400,-2400 0,-1326 1075,-2400 2400,-2400z'/%3E%3C/svg%3E"); }


@media (min-width:2048px) { 
    #wintro   { max-width:720px; }
    #buttons  { max-width:560px; }
}


#tooltip {display:none; position:absolute; width:auto; padding:13px 23px 13px 21px; 
  z-index:1000; background:#252525; color:#eee; font-size:13px; font-weight:300; 
  line-height:1.25em; border-left:3px solid #D62230; box-shadow:inset 4px 0 0 0 #000;
  pointer-event:none; white-space:nowrap; }