/* ----------------------------------------------------------------
	Basic
-----------------------------------------------------------------*/

dl, dt, dd, ol, ul, li {
	margin: 0;
	padding: 0;
}

.triangle {
    width: 0;
    height: 0;
    border-left: 15px solid #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.videoplayBtn {
  position: absolute;left:29%;top:26%;
  transform: translate(-30%,-20%);
  display: flex;flex-direction: row;justify-content: space-around;align-items: center;
  background: rgba(51, 131, 190, 1);
  border-radius: 2px;
  text-shadow: 0 0 10px #fff, 0 0 40px rgba(51, 131, 190, 1);
  border: 3px solid transparent;
  border-image: linear-gradient(to right, rgb(107,149,255), #578aef) 1;
  border-radius: 5px; /*important*/ 
  background: linear-gradient(to right, #8f41e9, #578aef);
}
.videoplayBtn .btn_left {
  width:30px;height:30px;
  display:flex;flex-direction: row;justify-content: center;align-items: center;
  border-radius: 15px;border:0px solid rgba(51, 131, 190, 1);
}

.videoplayBtn .btn_right {
  height: 30px;width: 80px;
  /*background: rgba(51, 131, 190, 1);*/
  border-radius: 2px;
  display:flex;flex-direction:row;justify-content:center;
  align-items:center;color:#fff;
}

.clear {
	clear: both;
	display: block;
	font-size: 0px;
	height: 0px;
	line-height: 0;
	width: 100%;
	overflow:hidden;
}

::selection {
	background: #e7280f;
	color: #FFF;
	text-shadow: none;
}

::-moz-selection {
	background: #e7280f; /* Firefox */
	color: #FFF;
	text-shadow: none;
}

::-webkit-selection {
	background: #e7280f; /* Safari */
	color: #FFF;
	text-shadow: none;
}

:active,
:focus { outline: none !important; }

.hidden {
	display: none;
}

a,a .hotpot{
	cursor: pointer;
}

/* ----------------------------------------------------------------
	Typography
-----------------------------------------------------------------*/


body {
	height: 100%;
	-webkit-tap-highlight-color: transparent;
	line-height: 1.5;
	color: #555;
	font-family: "SF Pro SC","SF Pro Display","SF Pro Icons","PingFang SC","Microsoft Yahei UI","Microsoft Yahei",Verdana,Simsun,"Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,sans-serif;
  
}

a {
	text-decoration: none !important;
	color: #e7280f;
	transition: all linear 200ms;
}

a:hover { color: #222; }

a img { border: none; }

img { max-width: 100%; }

iframe { border: none !important; }

button {
	transition: all linear 200ms;
}
.tc {
	text-align: center;
}
.tl {
	text-align: left;
}
.tr {
	text-align: right;
}


.sidebtn {
  position:absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  right: 10px;
  top: 50%;
  width: 50px;
  height:auto;
  padding: 2px;
  background:rgba(0,0,0,0);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.btn-item {
  width:45px;
  height:45px;
  background: #E9B225;
  border-radius:5px;
  display:flex;
  flex-direction:row;
  justify-content: center;
  align-items: center;
  margin:2px 0;
}
.btn-item icon {
  color:white;font-weight:700;font-size:20px;
}

.videowrapper{
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items:center;
}

/* ----------------------------------------------------------------
	Basic Layout Styles
-----------------------------------------------------------------*/


h1,
h2,
h3,
h4,
h5,
h6 {
	color: #444;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 30px 0;
	font-family: "SF Pro SC","SF Pro Display","SF Pro Icons","PingFang SC","Microsoft Yahei UI","Microsoft Yahei",Verdana,Simsun,"Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,sans-serif;
}

h5,
h6 { margin-bottom: 20px; }

h1 { font-size: 36px; }

h2 { font-size: 30px; }

h3 { font-size: 24px; }

h4 { font-size: 18px; }

h5 { font-size: 14px; }

h6 { font-size: 12px; }

h4 { font-weight: 600; }

h5,
h6 { font-weight: bold; }

h1 > span:not(.nocolor),
h2 > span:not(.nocolor),
h3 > span:not(.nocolor),
h4 > span:not(.nocolor),
h5 > span:not(.nocolor),
h6 > span:not(.nocolor) { color: #e7280f; }

p,
pre,
ul,
ol,
dl,
dd,
blockquote,
address,
table,
fieldset,
form { margin-bottom: 30px; }

small { font-family: "SF Pro SC","SF Pro Display","SF Pro Icons","PingFang SC","Microsoft Yahei UI","Microsoft Yahei",Verdana,Simsun,"Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,sans-serif; }

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 0px;
  padding-left: 0px;
  float: left;
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
@media (max-width: 576px) {
  .col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-sm-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-sm-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-sm-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-sm-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-sm-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-sm-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-sm-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-sm-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  }

@media (max-width: 768px) {
  .col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-md-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-md-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-md-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-md-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-md-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-md-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-md-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  }

/* ----------------------------------------------------------------
	homepage
-----------------------------------------------------------------*/

body.fujipage {
	margin: 0;
	padding: 0;
	background: #fcfcfc;
	color: #222;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 20px;
	/* Fix for preserving font sizes on iPhones (at least) */
	 -webkit-text-size-adjust: 100%;
}
.headerbar,.guidebar {
	z-index: 10;
    display: block;
    position: fixed;
}
.headerbar .logo {
	width: 150px;
	padding: 15px 15px;
}
.pcv .headerbar .logo {
    width: 200px;
}
.guidebar {
	bottom: 0;
	right: 0;
	width: 120px;
    padding: 10px;
}
.guidebar .dragsign {
	z-index: 3;
    display: block;
    position: relative;
    font-size: 14px;
    text-align: right;
    line-height: 14px;
	overflow: hidden;
}
.guidebar .dragsign.offcanvas-body {
	padding: 12px 10px 18px 0;
}
.guidebar .btn-close {
	z-index: 999;
	position: absolute;
	right: 10px;
    top: -10px;
	background-color: #06e09a;
	background-image: url("/storage/images/closebtnw.png");
	opacity: .8;
}
.guidebar.offcanvas-bottom {
	height: 120px;
	left: auto;
    border: none;
	background-color: transparent;
}
.guidebar .dragsign .dswrapper {
	float: right;
    display: block;
}
.guidebar .dragsign .dswrapper img {
	width: 60px;
	height: 60px;
	display: block;
	float: right;
}
.guidebar .dragsigntext {
	display: block;
	width: 100%;
	float: left;
	margin-top: 5px;
}
.guidebar .dragsignbg {
	background: white;
	opacity: 0.5;
	display: block;
	border-radius: 50%;
	width: 280px;
	height: 280px;
	position: absolute;
	bottom: -140px;
	right: -140px;
	z-index: 2;
	box-shadow: 0 0 15px rgba(0,0,0,.18);
}
#canvas-mask {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 100%;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
}

#canvas-mask .handle {

  border-radius: 0;
  background-size: 1600px 900px;
  width: 1600px;
  height: 900px;
}
/*scale(1) 2560px 1350px; scale(1.3) 3328px 1755px  scale(1.5) 3840px 2025px;*/
.pcv #canvas-mask .handle {
  width: 2560px;
  height: 1350px;
  cursor: move;
  border-radius: 0;
  background-size: 2560px 1350px;
  background-repeat:no-repeat;
  background-position:center;
  transition:all 1s linear 0;
  transition-property: background-size;
  transition-duration: 2s;
}

@media screen and (max-width: 768px) {
  #canvas-mask .handle {
    width: 2560px;
    height: 1350px;
    /*border-radius: 0;
    background-size: 1284px 2754px;
    width: 1284px;
    height: 2754px;*/
  }
}

#canvas-mask .handle .page .hotpot {
  position: absolute;
  margin: 0;
  padding: 10px 15px;
  display: block;	
}
#canvas-mask .handle .page .hotpot a.xcbtn {
	position: absolute;
	display: block;
	z-index: 2;
}
#canvas-mask .handle .page .hotpot a.xcbtn img {
	display: block;
	width: 70px;
	height: 77px;
	max-width: 70px;
	position: relative;
}
#canvas-mask .handle .page .body {
  position: absolute;
  margin: 0;
  padding: 10px 15px;
}
#canvas-mask .handle .page .xclabel,#canvas-mask .handle .page .xclabeltext {
	position: absolute;
	display: block;
}
#canvas-mask .handle .page .xclabel img {
	width: 100%;
	height: 100%;
	display: block;
}

#canvas-mask .handle .page .xclabel.label001 {
	left: 53%;
	top: 41%;
	width: 30px;
	height: 30px;
}
#canvas-mask .handle .page .hotpot-medical {
  left: 45%;
  top: 44%; 
  width: 100px;
  height: 97px;
  max-width: 100px;
}

.pcv #canvas-mask .handle .page .hotpot-medical {
    left: 52%;  
}
#canvas-mask .handle .page .hotpot001 {
	left: 20%;
	top: 38%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}

.pcv #canvas-mask .handle .page .hotpot001 {
    left: 20%;	
}

#canvas-mask .handle .page .labeltext001 {
	color: white;
	background: rgba(51, 131, 190, 0.9);
	font-size: 13px;
	padding: 3px 10px;
	border-radius: 5px;
	display: block;
	left: 55.2%;
	top: 41.2%;
}
.pcv #canvas-mask .handle .page .labeltext001 {
    left: 54.6%;
}

#canvas-mask .handle .page .hotpot002 {
	left: 46%;
    top: 57%;
    width: 80px;
    height: 71px;
    max-width: 80px;
}
#canvas-mask .handle .page .xclabel.label002 {
	width: 80px;
	height: 71px;
	max-width: 80px;
	display: block;
}
#canvas-mask .handle .page .hotpot003 {
	left: 30%;
    top: 38%;
    width: 80px;
    height: 60px;
    max-width: 80px;
}
#canvas-mask .handle .page .xclabel.label003 {
	width: 80px;
	height: 60px;
	max-width: 80px;
	display: block;
}
#canvas-mask .handle .page .hotpot004 {
	left: 45%;
    top: 22%;
    width: 90px;
    height: 69px;
    max-width: 90px;
}
#canvas-mask .handle .page .xclabel.label004 {
	width: 90px;
	height: 69px;
	max-width: 90px;
	display: block;
}
#canvas-mask .handle .page .hotpot005 {
	left: 64%;
    top: 38%;
    width: 80px;
    height: 68px;
    max-width: 80px;
}
#canvas-mask .handle .page .xclabel.label005 {
	width: 80px;
	height: 68px;
	max-width: 80px;
	display: block;
}
#canvas-mask .handle .page .hotpot006 {
	left: 40%;
    top: 63%;
    width: 240px;
    height: 140px;
    max-width: 240px;
}
#canvas-mask .handle .page .xclabel.label006 {
	width: 130px;
    height: auto;
    max-width: 130px;
    display: block;
    left: -53px;
    bottom: 15px;
}
#canvas-mask .handle .page .hotpot007 {
	left: 50%;
    top: 22%;
    width: 220px;
    height: 110px;
    max-width: 220px;
}
#canvas-mask .handle .page .xclabel.label007 {
	width: 110px;
    height: auto;
    max-width: 110px;
    display: block;
    top: -42px;
    right: -11px;
}
#canvas-mask .handle .page .hotpot008 {
	left: 54%;
    top: 63%;
    width: 136px;
    height: 86px;
    max-width: 136px;
}
#canvas-mask .handle .page .xclabel.label008 {
	width: 120px;
    height: auto;
    max-width: 120px;
    display: block;
    right: -30px;
    bottom: -9px;
}
#canvas-mask .handle .page .hotpot009 {
	left: 70%;
    top: 25.5%;
    width: 240px;
    height: 110px;
    max-width: 240px;
}
#canvas-mask .handle .page .xclabel.label009 {
	width: 120px;
    height: auto;
    max-width: 120px;
    display: block;
    top: -19px;
    right: -16px;
}
#canvas-mask .handle .page .hotpot010 {
	left: 66%;
    top: 33%;
    width: 260px;
    height: 92px;
    max-width: 260px;
}
#canvas-mask .handle .page .xclabel.label010 {
	width: 110px;
    height: auto;
    max-width: 110px;
    display: block;
    right: -27px;
    bottom: -13px;
}
#canvas-mask .handle .page .hotpot011 {
    left: 45%;
    top: 55%;
    width: 250px;
    height: 122px;
    max-width: 250px;
}
#canvas-mask .handle .page .xclabel.label011 {
    width: 120px;
    height: auto;
    max-width: 120px;
    display: block;
    right: 0;
    top: -29px;
}
#canvas-mask .handle .page .hotpot012 {
	left: 37%;
    top: 19%;
    width: 200px;
    height: 102px;
    max-width: 200px;
}
#canvas-mask .handle .page .xclabel.label012 {
	width: 110px;
    height: auto;
    max-width: 110px;
    display: block;
    left: -34px;
    bottom: 0;
}

#canvas-mask .handle .page .xclabel.label013 {
	width: 90px;
	height: 62px;
	max-width: 90px;
	display: block;
	top: -56px;
	transform: rotate(3deg);
	-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;  /* IE */
}

#canvas-mask .handle .page .xclabel.label014 {
	width: 90px;
	height: 62px;
	max-width: 90px;
	display: block;
	top: -56px;
	left: 50px;
	transform: rotate(-3deg);
	-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;  /* IE */
}

#canvas-mask .handle .page .xclabel.label015 {
	width: 90px;
	height: 62px;
	max-width: 90px;
	display: block;
	top: 94px;
	left: 0px;
	transform: rotate(-5deg);
	-webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;  /* IE */
}

/* ----------------------------------------------------------------
	loading
-----------------------------------------------------------------*/
.fujipreloader {
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    z-index: 99999;
    background-color: #ffffff;
    background-position: center center;
    background-repeat: no-repeat;
    
    /*background-image: url("/storage/images/loading.gif");*/
		/*background-image: -webkit-image-set(url("/storage/images/loading.gif") 1x,url("/storage/images/loading@2x.gif") 2x)*/
}

.fujipreloader2 {
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    z-index: 99999;
    background-color: #ffffff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /*background-image: url("/storage/images/loading.gif");*/
		/*background-image: -webkit-image-set(url("/storage/images/homeloading2.gif") 1x,url("/storage/images/homeloading2.gif") 2x)*/
}

$count: 24;
$speed: 1s;

:root {
    --angle: 15deg;
}

#preloader{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000; background-color: rgba(255,255,255,1);
  display:flex;flex-direction:column;justify-content: center;align-items: center;
}
#preloader #preloader-inner{
  display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;
  border-radius:50%;border:3px solid transparent;border-top-color:#00a273;animation:spin 2s linear infinite
}
#preloader #preloader-inner:before{
    content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;
    border:3px solid transparent;border-top-color:#94ecd7;
    animation: 3s ease-in 1s infinite reverse both running slidein;
    /*animation:spin 3s linear infinite*/
}
#preloader #preloader-inner:after{
  content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;
  border:3px solid transparent;border-top-color:#22f1b5;
  animation:1.5s linear 1s infinite running slidein;
  /*animation:spin 1.5s linear infinite*/
}
.preload_container{
    margin: 0 auto;
    width: 300px;
    height:300px;
    /*position: relative;*/
    display:flex;
    justify-content:center;
    align-items:center;
    background:#fff;

}
.ball 
{
   /*position: absolute;*/
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: #4cb8f5;

}
.preload_container .yellow 
{
   /*background-color: #f5e82f;*/
}
.preload_container .blue 
{
   /*background-color: #4cb8f5;*/
   animation: animateBlue 1.8s infinite;
}
.preload_container .green 
{
   /*background-color: #a6e630;*/
   animation: animateGreen 1.8s infinite;
}
@keyframes animateGreen 
{
   0%,100% { transform: translate(-40px, 0px); }
   50%     { transform: translate(40px, 0px);  }
}
@keyframes animateBlue 
{
   0%,100%  { transform: translate(40px, 0); }
   50%      { transform: translate(-40px, 0px);  }
}


#loading {
    /*position: relative;*/
    font-size: 120px;
    font-weight: bold;
    /*background: rgba(255,255,255,0.3);*/
    color: #000;
    overflow: hidden;
    /*left:50%;top:50%;
    transform:translate(-50%,-50%);*/
    display:flex;flex-direction:center;align-items:center;
    height:200px;
    font-size: 50px;
    font-weight: bold;
    text-transform: uppercase;
    color: rgba(51,131,190,1);
    /*animation: orange 1.5s ease-in-out infinite alternate;*/
    /*text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff5722, 0 0 70px #ff5722, 0 0 80px #ff5722, 0 0 100px #ff5722, 0 0 150px #ff5722;*/
}

@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


/* ----------------------------------------------------------------
	others
-----------------------------------------------------------------*/

footer {
  text-align: center;
  font-size: 14px;
  padding: 20px;
}

footer a {
  color: #999;
  text-decoration: none;
}

.dashline {
	border-bottom: 1px dashed black;
	width: 100%;
	height: 1px;
	display: block;
	position: absolute;
	top: 9px;
}
.blackdot {
	position: relative;
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: black;
}
.leftdot {
	float: left;
}
.rightdot {
	float: right;
}
.swiper-pagination-bullet {
	background-color: white;
	opacity: 1;
}
.swiper-pagination-bullet-active {
	background-color: #00a0e9;
}
.divline {
	display: block;
	position: relative;
	width: 100%;
	border-bottom: 1px solid white;
	margin-bottom: 10px;
}
#circle {
	position: relative;
	text-align: center;
	font-size: 13px;
}

#circle span {
	position: absolute;
	top: 15px;
	left: 0;
	width: 100%;
	text-align: center;
	line-height: 13px;
}
#canvas {
	top: 20px!important;
	left: 50%!important;
	z-index: 1;
	height: 160px;
	width: 160px;
	border-radius: 50%;
	margin-left: -80px;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #000;
}

.swiper-slide img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        position: absolute;
        left: 50%;
        top: 50%;
}
#videolist {
	min-height: 600px;
}
.titlearea {
	text-align: center;
	z-index: 5;
	position: relative;
    margin-top: 80px;
	display: block;
}
.vtitle {
	width: 100px;
	margin: 0 auto;
}
.whitecover {
	width: 100%;
	height: 100%;
	background-image:linear-gradient(0deg, rgba(255,255,255,.8) 0%,rgba(255,255,255,.7) 80%, rgba(255,255,255,0) 100%);
	position: fixed;
	z-index: 2;
	top: 0;
}
.bgimg {
	/*background: url("/storage/images/mainbg-900.jpg") no-repeat center top;*/
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	z-index: 1;
}
.pcv .bgimg {
	/*background: url("/storage/images/fullbg.jpg") no-repeat center center;*/
	background-size: cover;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	z-index: 1;
}
.videolist {
	z-index: 5;
	position: relative;
	padding: 20px;
}
.videoitem {
	display: block;
	background: white;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0px 3px 5px rgba(0,0,0,.2);
	margin-bottom: 20px;
}
.videoitem .videothumb {
	border-radius: 10px;
	overflow: hidden;
	display: block;
	position: relative;
}
.videoitem .videothumb img {
	display: block;
}
.videoitem .videoname {
	padding: 12px 20px;
	font-weight: 600;
	font-size: 15px;
	color: black;
}
.videoitem .cover {
	background: rgba(0,0,0,.2);
	display: block;
	width: 100%;
  height: 100%;
  position: absolute;
	z-index: 1;
}
.videoitem .playbtn {
	display: block;
	position: absolute;
	z-index: 2;
	width: 50px;
	height: 50px;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -25px;
}
.nomore {
	text-align: center;
	font-size: 13px;
	line-height: 18px;
	margin-bottom: 50px;
}
.nomore i {
	font-size: 18px;
	margin-right: 10px;
	line-height: 18px;
	vertical-align: -5px;
	color: #bcbcbc;
}
.nomore span {
	line-height: 22px;
	padding: 10px 0;
}
.header {
	position: fixed;
	height: 50px;
	width: 100%;
	top: 0;
	z-index: 10;
	background: white;

	/*box-shadow: 0px 3px 5px rgba(0,0,0,.1);*/
}
@media screen and (min-width: 414px) {
  .headerbg{
    background:rgba(255,255,255,0.0);
  }
}
@media screen and (max-width: 414px) {
  .headerbg{
    background:rgba(255,255,255,1);
    box-shadow: 0px 3px 5px rgba(0,0,0,.1);
  }
}
.header a.closebtn {
	width: 32px;
	height: 32px;
	display: block;
	background: white;
	border-radius: 50%;
	padding: 8px;
	float: right;
	margin-top: 6px;
	margin-right: 6px;
}
.header .blogo {
	width: 120px;
	display: block;
	float: left;
	padding: 15px 15px 0;

}
.pcpage .header .blogo {
	width: 170px;
    padding: 15px 20px 0;
}
.pcv .header .blogo {
    width: 134px;
    padding: 10px 15px 0;
}
.fujivideopage {
	margin: 0;
	padding: 0;
}
.fujivideopage .videowrapper {
	width: 100%;
	height: 100%;
	display: block;
}
.modal-backdrop.show {
	background-color: #fff;
	opacity: .9;
}
.show .modal-content {
	border: none;
	box-shadow: 0 5px 10px rgba(0,0,0,.25);
}
.modal-header .btn-close,.modal-header .btn-close:focus,.modal-header .btn-close:active {
	outline: 0;
}
.modal .modal-body {
	padding: 0;
}
.secmodal {
	background: white;
}
.secmodal .modal-header {
	background: rgba(51,131,190,1);
}
#musicControl {
  position:fixed;
  right:15px;
  bottom:18px;
  margin-top:0;
  display:inline-block;
  z-index:99999999
}
#musicControl a {
  display:inline-block;
  width: 35px;
  height: 35px;
  overflow:hidden;
  background:url("/storage/images/music.png") no-repeat;
  background-size:100%;
}
#musicControl a audio{
  width:100%;
  height:56px;
}
#musicControl a.stop {
  background-position:left bottom;
}
#musicControl a.on {
  background-position:0px 1px;
  -webkit-animation: reverseRotataZ 1.2s linear infinite;
}
#music_play_filter{
  width:100%;
  height:100%;
  overflow:hidden;
  position:fixed;
  top:0;
  left:0;
  z-index:99999998;
}
.modal-open .videowrapper {
	height: 200px;
}
.pcv.modal-open .videowrapper {
    height: 460px;
}
.modal-open .modal-body {
	padding: 0;
}
a.activedlink {
	
}
.waitingtag {
color: white;
background: rgba(0,0,0, 0.3);
font-size: 26px;
padding: 12px 6px;
border-radius: 5px;
width: 4em;
text-align: center;
display: block;
position: absolute;
}
.waitingtag001 {
left: 0%;
top: -50%;
}



/* ----------------------------------------------------------------
	room
-----------------------------------------------------------------*/

#canvas-mask .handle.room01 {
  width: 414px;
  height: 888px;
  border-radius: 0;
  /*background: url('/storage/images/mainbg-1080.jpg')no-repeat center center;*/
  /*background-image: -webkit-image-set(url("/storage/images/wcjzls-bg.jpg") 1x,url("/storage/images/wcjzls-bg.jpg") 2x);*/
  background-size: 414px 888px;
}
#canvas-mask .handle.room01 .page .hotpot001 {
	left: 20%;
	top: 38%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}

#canvas-mask .handle.room01 .page .hotpot002 {
	left: 30%;
	top: 37%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}

#canvas-mask .handle.room01 .page .hotpot003 {
	left: 50%;
	top: 54%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}
#canvas-mask .handle.room01 .page .hotpot004 {
	left: 10%;
	top: 43%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}
#canvas-mask .handle.room01 .page .hotpot005 {
	left: 10%;
	top: 50%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}
.gdot {
	background: rgba(51,131,190,1);
	width:15px;
	height: 15px;
	display: block;
	border: 3px solid #94ecd7;
	border-radius:50%;
	position: absolute;
	bottom: 0;
	z-index: 2;
}
.redtab .gdot {
	background: #a21919;
    border: 3px solid #e63535;
}
.label004 .gdot,.label005 .gdot {
	right: 0;
}
.glabeltext {
	color: white;
	background: rgba(51, 131, 190, 0.5);/*rgba(51,131,190,1)*/
	white-space: nowrap;
	font-size: 16px;
	display: inline-block;
	padding: 10px 30px;	
	line-height: 17px;
  text-shadow: 0 0 10px #fff, 0 0 40px rgba(51, 131, 190, 1);
  border: 3px solid transparent;
  background-image:url('/static/images/border.png');
  /*border-image: linear-gradient(to right, rgb(107,149,255), #578aef) 1;
  
  background: linear-gradient(to right, #8f41e9, #578aef);*/
  border-radius: 10px;
  background-size: 150% 600%;
  background-position:center;
  background-repeat:no-repeat;
}

.glabeltext1 {
  color: white;
  background: rgba(51, 131, 190, 0.5);/*rgba(51,131,190,1)*/
  white-space: nowrap;
  font-size: 12px;
  display: inline-block;
  padding: 5px 12px;  
  line-height: 17px;
  text-shadow: 0 0 10px #fff, 0 0 40px rgba(51, 131, 190, 1);
  border: 3px solid transparent;

  border-radius: 10px;
  background-size: 150% 600%;
  background-position:center;
  background-repeat:no-repeat;
}

.pcpage .glabeltext {
    font-size: 18px;
    padding: 10px 20px;
	  line-height: 25px;
}
.redtab .glabeltext {
	background: #a21919;
}
@media screen and (max-width: 414px) {
  .pcpage  .glabeltext{
    font-size: 12px;
    padding: 5px 5px;
    line-height: 10px;
  }
}
.guideline {
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: cover;
	/*background-image: -webkit-image-set(url("/static/images/border.png") 1x,url("/storage/images/line-r.png") 2x);*/
	position: absolute;	
}
.pcpage .guideline {
	left: 5px;
	bottom: 5px;
}
.pcpage .guideline.guideline-left {
	left: auto;
	bottom: 0;
}
.guideline-left {
	background-repeat: no-repeat;
	background-position: left bottom;
	background-image: -webkit-image-set(url("/storage/images/line-l.png") 1x,url("/storage/images/line-l.png") 2x);
	position: absolute;	
}
.redtab .guideline {
	background-repeat: no-repeat;
	background-position: right bottom;
	background-image: -webkit-image-set(url("/storage/images/line-r-red.png") 1x,url("/storage/images/line-r-red.png") 2x);
	position: absolute;	
}
.redtab .guideline-left {
	background-repeat: no-repeat;
	background-position: left bottom;
	background-image: -webkit-image-set(url("/storage/images/line-l-red.png") 1x,url("/storage/images/line-l-red.png") 2x);
	position: absolute;	
}
.guideline001 {
	bottom: 0px;
	width: 60px;
    height: 60px;
	left: 0;
} 
.guideline002 {
	bottom: 0px;
	width: 60px;
    height: 90px;
	left: 0;
} 
.guideline003 {
	bottom: 0px;
	width: 60px;
    height: 90px;
	left: 0;
} 
.guideline004 {
	bottom: 0px;
	right: 0;
	width: 60px;
    height: 90px;
} 
.guideline005 {
	bottom: 0px;
	right: 0;
	width: 60px;
    height: 90px;
} 
.guideline006 {
    bottom: 0px;
    right: 0;
    width: 60px;
    height: 90px;
}
.guideline007 {
    bottom: 0px;
    width: 60px;
    height: 90px;
}
a.rmenulink {
	display: block;
	position: absolute;
	z-index: 3;
}
a.rmenulink001 {
	bottom: 50px;
	left: -12px;
}
a.rmenulink002 {
	bottom: 80px;
    left: 25px;
}
a.rmenulink003 {
	bottom: 60px;
    left: 35px;
}
a.rmenulink004 {
	bottom: 80px;
    right: 10px;
}
a.rmenulink005 {
	bottom: 60px;
    right: 25px;
}
#canvas-mask .handle .page .hotpot006.redtab {
	left: 10%;
    top: 24%;
    width: 100px;
    height: 74px;
    max-width: 100px;
}
#canvas-mask .handle .page .hotpot006.redtab .rmenulink006{
	bottom: 66px;
    left: 10px;
}
#canvas-mask .handle .page .hotpot007.redtab {
    left: 60%;
    top: 31.5%;
	width: 140px;
    height: 72px;
    max-width: 140px;
}
#canvas-mask .handle .page .hotpot006.redtab .gdot{
	right: 0;
}
#canvas-mask .handle .page .hotpot007.redtab .rmenulink007{
	bottom: 66px;
    left: 46px;
}
#canvas-mask .handle.room02 {
  width: 460px;
  height: 986px;
  border-radius: 0;
  background-image: -webkit-image-set(url("/storage/images/xcjzls-bg.jpg") 1x,url("/storage/images/xcjzls-bg.jpg") 2x);
  background-size: 460px 986px;
  background-repeat:no-repeat;
}
#canvas-mask .handle.room02 .page .hotpot001 {
	left: 7%;
	top: 45%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}
#canvas-mask .handle.room02 .page .hotpot002 {
	left: 64%;
	top: 51%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}
#canvas-mask .handle.room02 .page .hotpot004 {
	left: 44%;
	top: 54%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}
#canvas-mask .handle.room02 .page .hotpot005 {
	left: 60%;
	top: 57%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}
#canvas-mask .handle.room02 .page .hotpot002 a.rmenulink002 {
	left: 0px;
}
#canvas-mask .handle.room02 .page .hotpot005 a.rmenulink005 {
    left: 45px;
	bottom: 40px;
}
#canvas-mask .handle.room02 .page .hotpot005 .label005 .gdot {
	right: 45px;
}
#canvas-mask .handle.room02 .page .hotpot005 .label005 .guideline005 {
	height: 60px;
}
#canvas-mask .handle.room02 .screenam {
	position: absolute;
	top: 49%;
}
#canvas-mask .handle.room03 {
  width: 460px;
  height: 986px;
  border-radius: 0;
  background-image: -webkit-image-set(url("/storage/images/room1-pc.png") 1x,url("/storage/images/room1-pc.png") 2x);
  background-size: 460px 986px;
  background-repeat:no-repeat;
}
#canvas-mask .handle.room03 .page .hotpot001 {
	left: 10%;
	top: 39%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}
#canvas-mask .handle.room03 .page .hotpot001 a.rmenulink001 {
    bottom: 70px;
}
#canvas-mask .handle.room03 .page .hotpot001 .guideline001 {
	height: 80px;
}
#canvas-mask .handle.room03 .page .hotpot002 {
	left: 63.5%;
    top: 48.8%;
    width: 100px;
    height: 120px;
    max-width: 100px;
}
#canvas-mask .handle.room03 .page .hotpot002 a.rmenulink002 {
    left: -36px;
    bottom: 101px;
}
#canvas-mask .handle.room03 .page .hotpot002 a.rmenulink002 .glabeltext {
	padding: 5px 15px;
}
#canvas-mask .handle.room03 .page .label002 .gdot {
	right: 0;
}
#canvas-mask .handle.room03 .page .hotpot002 .guideline002 {
	bottom: -6px;
    right: 6px;
	height: 107px;
}
#canvas-mask .handle.room03 .page .hotpot004 {
	left: 57%;
	top: 56%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}
#canvas-mask .handle.room03 .page .hotpot004 .guideline004{
	width: 100px;
	bottom: 8px;
}
#canvas-mask .handle.room03 .page .hotpot004 a.rmenulink004{
	right: 52px;
    bottom: 85px;
}
#canvas-mask .handle.room03 .screenam {
	position: absolute;
	top: 42.8%;
}
#canvas-mask .handle.room03 .page .hotpot004 .glabeltext {
	padding: 5px 15px;
}
#canvas-mask .handle .page .onlydot {
	left: 24.5%;
    top: 32%;
    width: 50px;
    height: 50px;
    max-width: 50px;
	
}
#canvas-mask .handle .page .onlydot a.rmenulink {
	width: 100%;
    height: 100%;
    display: block;
    left: 0;
    top: 0;
}
#canvas-mask .handle .page .onlydot a.rmenulink .gdot {
	display: block;
	left: 50%;
    top: 50%;
    margin-left: -8px;
    margin-top: -8px;
}
#canvas-mask .handle.room02 .page .hotpot006.onlydot {
	left: 19%;
    top: 38%;
	width: 50px;
    height: 50px;
    max-width: 50px;
}
@media screen and (min-width: 414px) {
  .xhnjpage.pcpage #canvas-mask .handle.room01{
    width: 2048px;
    height: 1080px;
    border-radius: 0;
    /*background-image: -webkit-image-set(url("/storage/images/room10-pc.jpg") 1x,url("/storage/images/room10-pc.jpg") 2x);*/
    background-size: 2048px 1080px;
  }
}
@media screen and (max-width: 414px) {
  .xhnjpage.pcpage #canvas-mask .handle.room01{
    width: 1200px;
    height: 633px;
    border-radius: 0;
    /*background-image: -webkit-image-set(url("/storage/images/room10-pc.jpg") 1x,url("/storage/images/room10-pc.jpg") 2x);*/
    background-size: 1200px 633px;
  }
}
.xcjpage.pcpage #canvas-mask .handle.room02{
  width: 2560px;
  height: 1350px;
  border-radius: 0;
  background-image: -webkit-image-set(url("/storage/images/room1-pc.png") 1x,url("/storage/images/room1-pc.png") 2x);
  background-size: 2560px 1350px;
}
.dynjpage.pcpage #canvas-mask .handle.room03{
  width: 2560px;
  height: 1350px;
  border-radius: 0;
  background-image: -webkit-image-set(url("/storage/images/room1-pc.png") 1x,url("/storage/images/room1-pc.png") 2x);
  background-size: 2560px 1350px;
}
.hxnjpage.pcpage #canvas-mask .handle.room04{
  width: 2560px;
  height: 1350px;
  border-radius: 0;
  background-image: -webkit-image-set(url("/storage/images/room.jpg") 1x,url("/storage/images/room.jpg") 2x);
  background-size: 2560px 1350px;
}
.hxjrpage.pcpage #canvas-mask .handle.room05{
  width: 2560px;
  height: 1350px;
  border-radius: 0;
  background-image: -webkit-image-set(url("/storage/images/room.jpg") 1x,url("/storage/images/room.jpg") 2x);
  background-size: 2560px 1350px;
}

#canvas-mask .handle.room03 .page .hotpot007.onlydot {
	left: 62%;
    top: 26%;
	width: 50px;
    height: 50px;
    max-width: 50px;
}
#canvas-mask .handle.room03 .page .hotpot006.onlydot {
  left: 29%;
  top: 29%;
}
#canvas-mask .handle.room04 {
  width: 414px;
  height: 888px;
  border-radius: 0;
  background-image: -webkit-image-set(url("/storage/images/hxnjzls-bg.jpg") 1x,url("/storage/images/hxnjzls-bg.jpg") 2x);
  background-size: 414px 888px;
  background-repeat:no-repeat;
}
#canvas-mask .handle.room04 .screenam {
	position: absolute;
	top: 43%;
}
#canvas-mask .handle.room04 .page .hotpot002 {
    left: 69%;
    top: 38%;
}
#canvas-mask .handle.room04 .page .hotpot002 a.rmenulink002{
    bottom: 60px;
}
#canvas-mask .handle.room04 .page .hotpot001 {
    left: 3%;
    top: 57.5%;
}
#canvas-mask .handle.room04 .page .hotpot002 .guideline002 {
	height: 70px;
}
#canvas-mask .handle.room04 .page .hotpot004 {
    left: 47%;
    top: 41.5%;
}
#canvas-mask .handle.room04 .page .hotpot006 {
    left: 62%;
    top: 27%;
	width: 50px;
    height: 50px;
    max-width: 50px;
}
#canvas-mask .handle.room05 {
  width: 414px;
  height: 888px;
  border-radius: 0;
  background-image: -webkit-image-set(url("/storage/images/hxjrzls-bg.jpg") 1x,url("/storage/images/hxjrzls-bg.jpg") 2x);
  background-size: 414px 888px;
  background-repeat:no-repeat;
}
#canvas-mask .handle.room05 .screenam {
	position: absolute;
	top: 40.7%;
}
#canvas-mask .handle.room05 .page .hotpot001 {
    left: 7%;
    top: 36%;
}
#canvas-mask .handle.room05 .page .hotpot002 {
    left: 53%;
    top: 44%;
}
#canvas-mask .handle.room05 .page .hotpot004 {
    left: 33%;
    top: 50.5%;
}
#canvas-mask .handle.room05 .page .hotpot006 {
    left: 11%;
    top: 28%;
	width: 50px;
    height: 50px;
    max-width: 50px;
}
#canvas-mask .handle.room05 a.rmenulink004 {
	right: 16px;
}
#canvas-mask .handle.room05 a.rmenulink004 .glabeltext{
    padding: 5px 15px;
}

.menuheader {
	/*background-color: #00a273;*/
}
.menumaintitle {
	color: white;
	font-size: 20px;
	float: left;
	line-height: 50px;
	padding-left:5%;
}
.header.menuheader a.closebtn {
	background-color: transparent;
}
.menulist {
	z-index: 5;
	position: relative;
	padding: 65px 20px 0px 20px;
}
.menulist a.listitem {
	background-color:rgba(0, 0, 0, .1);
	display: table;
	padding: 10px 15px 10px 10px;
	border-radius: 20px;
	float: left;
	width: 100%;
	color: black;
	margin-bottom: 15px;
	border: 1px solid rgba(51,131,190,0.7);
  /*text-shadow: 0 0 10px #fff, 0 0 40px rgba(51, 131, 190, 1);
  border: 2px solid transparent;
  border-image: linear-gradient(to right, rgb(107,149,255), rgba(51,131,190,0.7)) 1;
  border-radius:20px;*/
  /*color:#fff;*/
}
.menulist a.listitem:hover {
	background-color:rgba(255, 255, 255, .1);
  color:#000;
}
.menulist a.listitem .greengo {
    width: 24px;
	height: 67px;
    display: table-cell;
}
.menulist a.listitem .dthumb {
	width: 84px;
	height: 84px;
	display: table-cell;
	border-radius: 50%;
	overflow: hidden;
  /*background-color: rgba(0,0,0,0.3);*/
}
.menulist a.listitem .dthumb img {
  width:100%;
  height:100%;
  object-fit: cover;
}

.menulist a.listitem .infopart {
	display: table-cell;
	padding-left: 15px;
	vertical-align: middle;
}
.menulist a.listitem .infopart .cattag {
	background: rgba(51,131,190,1);
	color: white;
	font-size: 10px;
	font-weight: 300;
	display: inline-block;
	padding: 0px 6px;
	border-radius: 6px;
	margin-right: 6px;
}
.menulist a.listitem .infopart .itemname {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	margin-top: 2px;
}
.menulist a.listitem .infopart .itemdes {
	font-size: 10px;
	font-weight: 300;
	line-height: 17px;
}
.menulist .nomore {
	padding: 10px;
	display: inline-block;
	width: 100%;
}
.xhnjpage .bgimg {
	background: url("/storage/images/wcjzls-bg-blur.jpg") no-repeat center top;
	background-size: cover;
}
.dynjpage .bgimg {
	background: url("/storage/images/dyzls-bg-blur.jpg") no-repeat center top;
	background-size: cover;
}
.xcjpage .bgimg {
	background: url("/storage/images/xcjzls-bg-blur.jpg") no-repeat center top;
	background-size: cover;
}
.hxnjpage .bgimg {
	background: url("/storage/images/hxnjzls-bg-blur.jpg") no-repeat center top;
	background-size: cover;
}
.hxjrpage .bgimg {
	background: url("/storage/images/hxjrzls-bg-blur.jpg") no-repeat center top;
	background-size: cover;
}
.menumaintitle .subtitle {
	font-size: 12px;
	line-height: 16px;
	margin-top: 8px;
}
.menumaintitle .subtitle span.plustag {
	padding: 2px 5px;
    margin-left: 10px;
    background: #1c5d0e;
    border-radius: 5px;
    zoom: 0.8;
}
.menumaintitle .maintitle {
	font-size: 14px;
	line-height: 22px;
}
.contentlist {
	margin-top: 50px;
	margin-bottom: 70px;
}
.contentlist .nomore{
	margin-top: 30px;	
	margin-bottom: 100px;
}
.pcpage .modal-content {
	background: transparent;
	box-shadow: none;
	border: 1px solid rgba(0,0,0,0);
}
.pcpage .modal-content .menulist {
	padding-top: 15px;
	padding-bottom: 165px;
    display: block;
    overflow: hidden;
}
.pcpage .menulist a.listitem:hover {
    background-color: rgba(0,0,0,0.2);
    border: 1px solid rgba(51,131,190,1);
    /*text-shadow: 0 0 10px #fff, 0 0 40px rgba(51, 131, 190, 1);
    border: 1px solid transparent;
    border-image: linear-gradient(to right, rgb(107,149,255), #578aef) 1;*/
}
#bottommenu {
	position: fixed;
	width: 100%;
	background: white;
	bottom: 0;
	min-height: 90px;
	padding-top: 5px;
	box-shadow: 0px 0px 8px rgba(0, 0, 0, .3);
}
.bottommenu .swiper-slide {
	background: #f2f2f2;
	border: 1px solid #024c3b;
	color: #024c3b;
	padding: 6px 3px;
	min-height: 56px;
	display: table;
}
.bottommenu .swiper-slide .titlegroup {
	display: table-cell;
	vertical-align: middle;
}
.bottommenu .swiper-slide .maintitle {
	font-size: 12px;
	line-height: 14px;
	font-weight: 400;	
}
.bottommenu .swiper-slide .subtitle {
	font-size: 10px;
	line-height: 14px;
	font-weight: 200;
}
.bottommenu .swiper-pagination-fraction {
	font-size: 12px;
	color:#024c3b;
	bottom: 5px;
}
.bottommenu .swiper-button-next,.bottommenu .swiper-button-prev {
	width: 10px;
	height: 10px;
	background-size:10px 10px;
	top:103%;
}
.bottommenu .swiper-slide.active {
	background:#00a273;
	color: white;
}

#canvas-mask .handle .page .onlydot a.rmenulink .gdot{
	display: block;
    left: 50%;
    top: 50%;
    margin-left: -8px;
    margin-top: -8px;
	background: rgba(51,131,190,1);
    border: 3px solid #e63535;
}
.header a.backhomebtn {
	font-size: 12px;
    width: 60px;
    text-align: center;
    background: white;
    border: 1px solid rgba(51,131,190,1);
    border-radius: 50px;
    height: auto;
    color: rgba(51,131,190,1);
    padding: 4px 10px;
    margin: 10px;
}
.header a.backhomebtn:active,.header a.backhomebtn:hover {
	background: rgba(51,131,190,1);
	color: white;
}
.header.menuheader a.closebtn.backhomebtn {
	color: white;
	border: 1px solid white;
}
.header.menuheader a.closebtn.backhomebtn:hover,.header.menuheader a.closebtn.backhomebtn:active {
    background: white;
	color: rgba(51,131,190,1);
}
.pcpage a.rmenulink001 {
    left: -50px;
}
.pcpage a.rmenulink002 {
    left: 6px;
}
.pcpage a.rmenulink003 {
    left: 22px;
}
.pcpage a.rmenulink004 {
    right: -10px;
}
.pcpage a.rmenulink005 {
    right: 8px;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot001 {
	left: 20%;
    top: 38%;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot002 {
    left: 43%;
    top: 35%;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot003 {
    left: 49%;
    top: 54%;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot004 {
    left: 39%;
    top: 40%;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot005 {
    left: 37.5%;
    top: 45%;
}
.pcpage #canvas-mask .handle.room02 .page .hotpot001 {
    left: 27.2%;
    top: 53%;
}
.pcpage #canvas-mask .handle.room02 .page .hotpot002 {
	left: 56.3%;
    top: 47%;
}
.pcpage #canvas-mask .handle.room02 .page .hotpot004 {
	left: 52%;
    top: 51%;
}
.pcpage #canvas-mask .handle.room02 .page .hotpot005 {
	left: 55%;
    top: 55%;
}
.pcpage #canvas-mask .handle.room03 .page .hotpot001 {
    left: 25.5%;
    top: 53.5%;
}
.pcpage #canvas-mask .handle.room03 .page .hotpot002 {
    left: 61.5%;
    top: 45.8%;
}
.pcpage #canvas-mask .handle.room03 .page .hotpot004 {
    left: 57%;
    top: 49.5%;
}
.pcpage #canvas-mask .handle.room04 .page .hotpot001 {
    left: 34.6%;
    top: 57.6%;
}
.pcpage #canvas-mask .handle.room04 .page .hotpot002 {
    left: 60.8%;
    top: 40.5%;
}
.pcpage #canvas-mask .handle.room04 .page .hotpot004 {
    left: 56%;
    top: 45%;
}
.pcpage #canvas-mask .handle.room04 .page .hotpot006 {
    left: 74.6%;
    top: 50%;
}
.pcpage #canvas-mask .handle.room05 .page .hotpot001 {
    left: 26.6%;
    top: 56%;
}
.pcpage #canvas-mask .handle.room05 .page .hotpot002 {
    left: 51.6%;
    top: 44%;
}
.pcpage #canvas-mask .handle.room05 .page .hotpot004 {
    left: 47%;
    top: 48.5%;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot006.redtab {
    left: 29%;
    top: 51%;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot007.redtab {
    left: 56%;
    top: 34%;
}
.pcpage #canvas-mask .handle.room02 .page .hotpot006.onlydot {
    left: 28.5%;
    top: 45%;
}
.pcpage #canvas-mask .handle.room05 .page .hotpot006.onlydot {
    left: 27.3%;
    top: 47%;
}
.pcpage .guideline006 {
	left: 0;
	right: auto;
}
.pcpage #canvas-mask .handle.room05 .page .guideline004{
	width: 100px;
}
.pcpage #canvas-mask .handle.room02 .page .guideline002{
	width: 90px;
}
.pcpage #canvas-mask .handle.room02 .page .hotpot005 .label005 .guideline005 {
    height: 54px;
    left: 20px;
    right: auto;
    width: 80px;
}
.pcpage #canvas-mask .handle.room04 .screenam {
    top: 42.6%;
}
.pcpage #canvas-mask .handle.room03 .screenam {
    top: 47.5%;
}
.pcpage #canvas-mask .handle .page .hotpot006.redtab .gdot {
    right: auto;
	left:0;
}
.pcpage #canvas-mask .handle.room03 .page .label002 .gdot {
    right:auto;
	left: 0;
}
.pcpage #canvas-mask .handle.room03 .page .hotpot002 a.rmenulink002 {
    left: -11px;
}
.pcpage #canvas-mask .handle.room03 .page .hotpot004 a.rmenulink004 {
    right: 14px;
}
.pcpage #canvas-mask .handle .page .hotpot006.redtab .rmenulink006 {
	left:14px;
}
.pcpage #canvas-mask .handle .page .hotpot007.redtab .rmenulink007 {
	left:29px;
}
.pcpage #canvas-mask .handle.room02 .page .hotpot005 a.rmenulink005 {
    bottom: 58px;
}
.pcpage #canvas-mask .handle.room03 .page .hotpot006.onlydot {
    left: 39.3%;
    top: 45%;
}
.pcpage #canvas-mask .handle.room03 .page .hotpot007.onlydot {
    left: 46.8%;
    top: 35%;
}
.pcpage .menulist a.listitem {
	width: 458px;
	margin: 5px 5px 10px 5px;
}
.pcpage .menulist {
	max-height: 600px;
	padding: 0;
}
.modal-col1 {
	max-width: 470px;
}
.modal-col2 {
	max-width: 940px;
}
.pcpage.modal-open #canvas-mask .handle {
	/*filter: blur(5px);*/
}
.pcpage .secmodal .modal-header {
	padding: 15px 30px;
}
.pcpage .secmodal .modal-content {
	border: 0;
}
.pcpage .secmodal .modal-content button.btn-close {
	color: white;
	background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
	opacity: .8;
	font-size: 1rem;
}
.pcpage .secmodal .menumaintitle {
	padding-left: 0;
}
.pcpage .secmodal .menumaintitle .maintitle {
	font-size: 17px;
    line-height: 24px;
}
.pcpage .secmodal .menumaintitle .subtitle {
	margin-top: 0;
	margin-bottom: 0;
}
.pcpage .secmodal .contentlist {
	margin-top: 0;
	overflow: hidden;
}
.pcpage .secmodal .oneimg {
	max-width: 600px;
	margin: 0 auto;
}
.pcpage .secmodal .oneimg.himg {
    max-width: 1440px;
	height: 100%;
}
.pcpage #canvas-mask .handle.room05 a.rmenulink004 .glabeltext,.pcpage #canvas-mask .handle.room03 .page .hotpot004 .glabeltext,.pcpage #canvas-mask .handle.room03 .page .hotpot002 a.rmenulink002 .glabeltext {
    padding: 8px 25px;
}



/* ----------------------------------------------------------------
	Startpage
-----------------------------------------------------------------*/
body.startbg {
	background-image: url("/storage/images/mainbg-pc-blur.jpg");
	background-repeat: no-repeat;
	background-position: 50% 0%;
	background-size: 120%;
}
.mainlogo {
	width: 170px;
	display: block;
	margin: 15% auto 0;
}
.sbtnarea {
	position: fixed;
	top: 64%;
	display: block;
	width: 100%;
}
a.gobtn {
	width: 380px;
    display: block;
	margin: 0 auto;
}
a.gobtn img {
	width: 100%;
	display: block;
}
body.startbg.mobilepage {
	background: url("/storage/images/startbg.jpg") no-repeat center top;
	background-size: cover;
}
.mobilepage .mainlogo {
	width: 170px;
	display: block;
	margin: 35% auto 0;
}
.mobilepage .sbtnarea {
    position: fixed;
    bottom: 20%;
    display: block;
    width: 100%;
	top: auto;
}
.mobilepage a.gobtn {
	width: 280px;
    display: block;
	margin: 0 auto;
}

/* ----------------------------------------------------------------
	screen animation
-----------------------------------------------------------------*/

@-webkit-keyframes fadeInOut {
    0% {
        opacity:1;
     }
    25% {
        opacity:0;
    }
    50% {
        opacity:0;    
    }
    75% {
        opacity:1;
    }
}
@-webkit-keyframes fadeInOut1 {
    0% {
        opacity:1;
     }
    33% {
        opacity:0;
    }
    66% {
		opacity:0;
	}
	100% {
		opacity:0;
	}
}
@-webkit-keyframes fadeInOut2 {
    0% {
        opacity:0;
     }
    33% {
        opacity:0;
    }
    66% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}
.anim_fade_image {
    position:absolute;    
    -webkit-animation-name: fadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    -webkit-animation-direction: alternate;
}
.anim_fade_image01 {
    position:absolute;    
    -webkit-animation-name: fadeInOut1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    -webkit-animation-direction: alternate;
}
.anim_fade_image02 {
    position:absolute;    
    -webkit-animation-name: fadeInOut2;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    -webkit-animation-direction: alternate;
}


@media screen and (min-width: 1280px) and (max-width: 1440px) {
.xhnjpage.pcpage #canvas-mask .handle.room01 {
    width: 1536px;
    height: 810.4px;
    border-radius: 0;
    /*background-image: -webkit-image-set(url("/storage/images/room10-pc.jpg") 1x,url("/storage/images/room10-pc.jpg") 2x);*/
    background-size: 1536px 810.4px;
}
.xcjpage.pcpage #canvas-mask .handle.room02 {
	 width: 1920px;
    height: 1013px;
    border-radius: 0;
    background-image: -webkit-image-set(url("/storage/images/room10-pc.jpg") 1x,url("/storage/images/room10-pc.jpg") 2x);
    background-size: 1920px 1013px;
}
.dynjpage.pcpage #canvas-mask .handle.room03 {
    width: 1920px;
    height: 1013px;
    border-radius: 0;
    background-image: -webkit-image-set(url("/storage/images/room1-pc.png") 1x,url("/storage/images/room1-pc.png") 2x);
    background-size: 1920px 1013px;
}
.hxnjpage.pcpage #canvas-mask .handle.room04 {
    width: 1920px;
    height: 1013px;
    border-radius: 0;
    background-image: -webkit-image-set(url("/storage/images/room1-pc.png") 1x,url("/storage/images/room1-pc.png") 2x);
    background-size: 1920px 1013px;
}
.hxjrpage.pcpage #canvas-mask .handle.room05 {
    width: 1920px;
    height: 1013px;
    border-radius: 0;
    background-image: -webkit-image-set(url("/storage/images/room1-pc.png") 1x,url("/storage/images/room1-pc.png") 2x);
    background-size: 1920px 1013px;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot001 {
    left: 20%;
    top: 38%; 
}
.pcpage #canvas-mask .handle.room01 .page .hotpot002 {
    left: 42.8%;
    top: 33.4%;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot003 {
    left: 49%;
    top: 52%;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot004 {
    left: 37.7%;
    top: 38.3%;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot005 {
    left: 36.5%;
    top: 44%;
}
.pcpage #canvas-mask .handle .page .hotpot006.redtab {
    left: 20%;
    top: 50%;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot007.redtab {
    left: 54%;
    top: 32%;
}
.pcpage #canvas-mask .handle.room03 .page .hotpot001 {
    left: 24.8%;
    top: 51.5%;
}
.pcpage #canvas-mask .handle.room03 .page .hotpot002 {
    left: 61%;
    top: 45%;
}
.pcpage #canvas-mask .handle.room03 .page .hotpot004 {
    left: 56%;
    top: 49.5%;
}
.pcpage #canvas-mask .handle.room03 .page .hotpot006.onlydot {
    left: 39%;
    top: 44%;
}
.pcpage #canvas-mask .handle.room03 .page .hotpot007.onlydot {
    left: 46.5%;
    top: 34.6%;
}
.pcpage #canvas-mask .handle.room02 .page .hotpot001 {
    left: 26.5%;
    top: 52%;
}
.pcpage #canvas-mask .handle.room02 .page .hotpot002 {
    left: 56%;
    top: 46%;
}
.pcpage #canvas-mask .handle.room02 .page .hotpot004 {
    left: 51%;
    top: 50%;
}
.pcpage #canvas-mask .handle.room02 .page .hotpot005 {
    left: 54.5%;
    top: 53.5%;
}
.pcpage #canvas-mask .handle.room04 .page .hotpot001 {
    left: 33.9%;
    top: 56.5%;
}
.pcpage #canvas-mask .handle.room04 .page .hotpot002 {
    left: 60.5%;
    top: 39.3%;
}
.pcpage #canvas-mask .handle.room04 .page .hotpot004 {
    left: 55.4%;
    top: 44%;
}
.pcpage #canvas-mask .handle.room05 .page .hotpot001 {
    left: 26%;
    top: 54.4%;
}
.pcpage #canvas-mask .handle.room05 .page .hotpot004 {
    left: 46%;
    top: 48.5%;
}
.pcpage #canvas-mask .handle.room05 .page .hotpot002 {
    left: 51.3%;
    top: 43%;
}
.pcpage #canvas-mask .handle.room05 .page .hotpot006.onlydot {
    left: 27%;
    top: 45%;
}
.pcpage .modal-content .menulist {
    padding-bottom: 80px;
}

}

@media screen and (min-width: 1024px) and (max-width: 1280px) {


}

@media screen and (min-width: 768px) and (max-width: 1024px) {
.xhnjpage.pcpage #canvas-mask .handle.room01 {
    width: 1580px;
    height: 833px;
    border-radius: 0;
    /*background-image: -webkit-image-set(url("/storage/images/room10-pc.jpg") 1x,url("/storage/images/room10-pc.jpg") 2x);*/
    background-size: 1580px 833px;
}
.xcjpage.pcpage #canvas-mask .handle.room02 {
	width: 1580px;
    height: 833px;
    border-radius: 0;
    background-image: -webkit-image-set(url("/storage/images/room10-pc.jpg") 1x,url("/storage/images/room10-pc.jpg") 2x);
    background-size: 1580px 833px;
}
.dynjpage.pcpage #canvas-mask .handle.room03 {
    width: 1580px;
    height: 833px;
    border-radius: 0;
    background-image: -webkit-image-set(url("/storage/images/room1-pc.png")/ 1x,url("/storage/images/room1-pc.png") 2x);
    background-size: 1580px 833px;
}
.hxnjpage.pcpage #canvas-mask .handle.room04 {
    width: 1580px;
    height: 833px;
    border-radius: 0;
    background-image: -webkit-image-set(url("/storage/images/room1-pc.png") 1x,url("/storage/images/room1-pc.png") 2x);
    background-size: 1580px 833px;
}
.hxjrpage.pcpage #canvas-mask .handle.room05 {
    width: 1580px;
    height: 833px;
    border-radius: 0;
    background-image: -webkit-image-set(url("/storage/images/room1-pc.png") 1x,url("/storage/images/room1-pc.png") 2x);
    background-size: 1580px 833px;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot001 {
    left: 20%;
    top: 38%;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot002 {
    left: 42.6%;
    top: 32%;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot004 {
    left: 36.5%;
    top: 37.5%;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot005 {
    left: 36%;
    top: 43%;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot007.redtab {
    left: 54%;
    top: 30%;
}
.pcpage #canvas-mask .handle.room02 .page .hotpot001 {
    left: 25.8%;
    top: 51%;
}
.pcpage #canvas-mask .handle.room02 .page .hotpot002 {
    left: 55.7%;
    top: 44%;
}
.pcpage #canvas-mask .handle.room02 .page .hotpot004 {
    left: 49.5%;
    top: 48%;
}
.pcpage #canvas-mask .handle.room02 .page .hotpot005 {
    left: 54%;
    top: 53.5%;
}
.pcpage #canvas-mask .handle.room02 .page .hotpot006.onlydot {
    left: 29%;
    top: 42.5%;
}
.pcpage #canvas-mask .handle.room03 .page .hotpot001 {
    left: 24%;
    top: 51%;
}
.pcpage #canvas-mask .handle.room03 .page .hotpot002 {
    top: 43%;
}
.pcpage #canvas-mask .handle.room04 .page .hotpot001 {
    left: 33.2%;
    top: 55%;
}
.pcpage #canvas-mask .handle.room04 .page .hotpot002 {
    left: 60.2%;
    top: 38.6%;
}
.pcpage #canvas-mask .handle.room04 .page .hotpot004 {
    left: 54%;
    top: 42%;
}
.pcpage #canvas-mask .handle.room05 .page .hotpot001 {
    left: 25.4%;
    top: 53%;
}
.pcpage #canvas-mask .handle.room05 .page .hotpot002 {
    left: 51%;
    top: 42%;
}
.pcpage #canvas-mask .handle.room05 .page .hotpot004 {
    left: 45%;
    top: 47%;
}
.pcpage #canvas-mask .handle.room05 .page .hotpot006.onlydot {
    left: 26.7%;
    top: 41%;
}

}

@media screen and (min-width: 415px) and (max-width: 768px) {
.xhnjpage.pcpage #canvas-mask .handle.room01 {
    width: 1200px;
    height: 633px;
    border-radius: 0;
    /*background-image: -webkit-image-set(url("/storage/images/room10-pc.jpg") 1x,url("/storage/images/room10-pc.jpg") 2x);*/
    background-size: 1200px 633px;
}
.xcjpage.pcpage #canvas-mask .handle.room02 {
	width: 1200px;
    height: 633px;
    border-radius: 0;
    background-image: -webkit-image-set(url("/storage/images/room10-pc.jpg") 1x,url("/storage/images/room10-pc.jpg") 2x);
    background-size: 1200px 633px;
}
.dynjpage.pcpage #canvas-mask .handle.room03 {
    width: 1200px;
    height: 633px;
    border-radius: 0;
    background-image: -webkit-image-set(url("/storage/images/room.jpg") 1x,url("/storage/images/room.jpg") 2x);
    background-size: 1200px 633px;
}
.hxnjpage.pcpage #canvas-mask .handle.room04 {
    width: 1200px;
    height: 633px;
    border-radius: 0;
    background-image: -webkit-image-set(url("/storage/images/room.jpg") 1x,url("/storage/images/room.jpg") 2x);
    background-size: 1200px 633px;
}
.hxjrpage.pcpage #canvas-mask .handle.room05 {
    width: 1200px;
    height: 633px;
    border-radius: 0;
    background-image: -webkit-image-set(url("/storage/images/hxjrzls-bg-pc.jpg") 1x,url("/storage/images/hxjrzls-bg-pc.jpg") 2x);
    background-size: 1200px 633px;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot002 {
    left: 42.3%;
    top: 30%;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot004 {
    left: 35%;
    top: 35%;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot005 {
    left: 34%;
    top: 40%;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot003 {
    left: 49%;
    top: 50%;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot001 {
    left: 20%;
    top: 38%;
}
.pcpage #canvas-mask .handle.room01 .page .hotpot007.redtab {
    left: 54%;
    top: 26%;
}
.pcpage #canvas-mask .handle.room03 .page .hotpot001 {
    left: 21%;
    top: 49%;
}
.pcpage #canvas-mask .handle.room03 .page .hotpot004 {
    left: 54.3%;
    top: 49.5%;
}
.pcpage #canvas-mask .handle.room03 .page .hotpot002 {
    top: 40%;
    left: 60.5%;
}
.pcpage #canvas-mask .handle.room03 .page .hotpot007.onlydot {
    left: 44%;
    top: 33%;
}
.pcpage #canvas-mask .handle.room04 .page .hotpot001 {
    left: 32%;
    top: 53%;
}
.pcpage #canvas-mask .handle.room04 .page .hotpot004 {
    left: 52%;
    top: 39%;
}
.pcpage #canvas-mask .handle.room04 .page .hotpot002 {
    top: 35%;
}
.pcpage #canvas-mask .handle.room05 .page .hotpot001 {
    left: 24%;
    top: 51%;
} 
.pcpage #canvas-mask .handle.room05 .page .hotpot002 {
    left: 50.7%;
    top: 39%;
}
.pcpage #canvas-mask .handle.room05 .page .hotpot004 {
    left: 43%;
    top: 44%;
}
.pcpage #canvas-mask .handle.room02 .page .hotpot002 {
    left: 55.4%;
    top: 41.4%;
}
.pcpage #canvas-mask .handle.room02 .page .hotpot001 {
    left: 22.4%;
    top: 50.1%;
}
.pcpage #canvas-mask .handle.room02 .page .hotpot006.onlydot {
    left: 29.3%;
    top: 40%;
}
.pcpage #canvas-mask .handle.room02 .page .hotpot004 {
    left: 47.5%;
    top: 45%;
}
.pcpage #canvas-mask .handle.room02 .page .hotpot005 {
    left: 53.4%;
    top: 51%;
}
.grid .g-col-md-4 {
    grid-column: auto/span 6;
}

}

@media screen and (max-width: 414px) {
body.startbg {
	background: url("/storage/images/startbg.jpg") no-repeat center top;
	background-size: cover;
}
.mainlogo {
	width: 170px;
	display: block;
	margin: 35% auto 0;
}
.sbtnarea {
    position: fixed;
    bottom: 20%;
    display: block;
    width: 100%;
	top: auto;
}
a.gobtn {
	width: 280px;
    display: block;
	margin: 0 auto;
}
#canvas-mask .handle .page .xclabel.label001 {
	left: 53%;
	top: 41%;
	width: 30px;
	height: 30px;
}
#canvas-mask .handle .page .hotpot001 {
	left: 20%;
	top: 38%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}

.pcv #canvas-mask .handle .page .hotpot001 {
    left: 20%;	
}

#canvas-mask .handle .page .labeltext001 {
	color: white;
	background: rgba(51, 131, 190, 0.9);
	font-size: 13px;
	padding: 3px 10px;
	border-radius: 5px;
	display: block;
	left: 55.2%;
	top: 41.2%;
}
.pcv #canvas-mask .handle .page .labeltext001 {
    left: 54.6%;
}

#canvas-mask .handle .page .hotpot002 {
	left: 46%;
    top: 57%;
    width: 80px;
    height: 71px;
    max-width: 80px;
}
#canvas-mask .handle .page .xclabel.label002 {
	width: 80px;
	height: 71px;
	max-width: 80px;
	display: block;
}
#canvas-mask .handle .page .hotpot003 {
	left: 30%;
    top: 38%;
    width: 80px;
    height: 60px;
    max-width: 80px;
}
#canvas-mask .handle .page .xclabel.label003 {
	width: 80px;
	height: 60px;
	max-width: 80px;
	display: block;
}
#canvas-mask .handle .page .hotpot004 {
	left: 45%;
    top: 22%;
    width: 90px;
    height: 69px;
    max-width: 90px;
}
#canvas-mask .handle .page .xclabel.label004 {
	width: 90px;
	height: 69px;
	max-width: 90px;
	display: block;
}
#canvas-mask .handle .page .hotpot005 {
	left: 64%;
    top: 38%;
    width: 80px;
    height: 68px;
    max-width: 80px;
}
#canvas-mask .handle .page .xclabel.label005 {
	width: 80px;
	height: 68px;
	max-width: 80px;
	display: block;
}
#canvas-mask .handle .page .hotpot006 {
	left: 39.5%;
    top: 63%;
    width: 150px;
    height: 110px;
    max-width: 150px;
}
#canvas-mask .handle .page .xclabel.label006 {
	width: 100px;
    height: 74px;
    max-width: 100px;
    display: block;
    left: -25px;
    bottom: 6px;
}
#canvas-mask .handle .page .hotpot007 {
	left: 51%;
    top: 22%;
    width: 140px;
    height: 72px;
    max-width: 140px;
}
#canvas-mask .handle .page .xclabel.label007 {
	width: 100px;
	height: 65px;
	max-width: 100px;
	display: block;
}
#canvas-mask .handle .page .hotpot008 {
	left: 54%;
    top: 63%;
    width: 136px;
    height: 86px;
    max-width: 136px;
}
#canvas-mask .handle .page .xclabel.label008 {
	width: 100px;
    height: 69px;
    max-width: 100px;
    display: block;
    right: -7px;
    bottom: 6px;
}
#canvas-mask .handle .page .hotpot009 {
	left: 70%;
    top: 26.5%;
    width: 140px;
    height: 69px;
    max-width: 140px;
}
#canvas-mask .handle .page .xclabel.label009 {
	width: 100px;
    height: 62px;
    max-width: 100px;
    display: block;
    top: -35px;
    right: -25px;
}
#canvas-mask .handle .page .hotpot010 {
	left: 66%;
    top: 32%;
    width: 160px;
    height: 62px;
    max-width: 160px;
}
#canvas-mask .handle .page .xclabel.label010 {
	width: 90px;
    height: 62px;
    max-width: 90px;
    display: block;
    right: -24px;
    bottom: -30px;
}
#canvas-mask .handle .page .hotpot011 {
    left: 45%;
    top: 53%;
    width: 173px;
    height: 102px;
    max-width: 145px;
}
#canvas-mask .handle .page .xclabel.label011 {
    width: 90px;
    height: 63px;
    max-width: 90px;
    display: block;
    right: 0;
    top: -20px;
}
#canvas-mask .handle .page .hotpot012 {
	left: 37%;
    top: 18.5%;
    width: 140px;
    height: 82px;
    max-width: 140px;
}
#canvas-mask .handle .page .xclabel.label012 {
	width: 100px;
    height: auto;
    max-width: 100px;
    display: block;
}

#canvas-mask .handle.room01 {
  width: 500px;
  height: 900px;
  border-radius: 0;
  /*background-image: -webkit-image-set(url("/storage/images/room10-pc.jpg") 1x,url("/storage/images/room10-pc.jpg") 2x);*/
  background-size: 500px 900px;
  background-repeat:no-repeat;
}
#canvas-mask .handle.room01 .page .hotpot001 {
	left: 20%;
	top: 38%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}

#canvas-mask .handle.room01 .page .hotpot002 {
	left: 30%;
	top: 37%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}

#canvas-mask .handle.room01 .page .hotpot003 {
	left: 50%;
	top: 54%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}
#canvas-mask .handle.room01 .page .hotpot004 {
	left: 10%;
	top: 43%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}
#canvas-mask .handle.room01 .page .hotpot005 {
	left: 10%;
	top: 50%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}
#canvas-mask .handle.room01 .page .hotpot006.onlydot {
	left: 26%;
    top: 30%;
}
#canvas-mask .handle.room01 .page .hotpot007.onlydot {
	left: 60%;
    top: 35%;
}
#canvas-mask .handle.room02 {
  width: 460px;
  height: 986px;
  border-radius: 0;
  background-image: -webkit-image-set(url("/storage/images/xcjzls-bg.jpg") 1x,url("/storage/images/xcjzls-bg.jpg") 2x);
  background-size: 460px 986px;
  background-repeat:no-repeat;
}
#canvas-mask .handle.room02 .page .hotpot001 {
	left: 7%;
	top: 45%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}
#canvas-mask .handle.room02 .page .hotpot002 {
	left: 64%;
	top: 51%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}
#canvas-mask .handle.room02 .page .hotpot004 {
	left: 44%;
	top: 54%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}
#canvas-mask .handle.room02 .page .hotpot005 {
	left: 60%;
	top: 57%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}
#canvas-mask .handle.room02 .page .hotpot002 a.rmenulink002 {
	left: 0px;
}
#canvas-mask .handle.room02 .page .hotpot005 a.rmenulink005 {
    left: 45px;
	bottom: 40px;
}
#canvas-mask .handle.room02 .page .hotpot005 .label005 .gdot {
	right: 45px;
}
#canvas-mask .handle.room02 .page .hotpot005 .label005 .guideline005 {
	height: 60px;
}
#canvas-mask .handle.room02 .screenam {
	position: absolute;
	top: 49%;
}
#canvas-mask .handle.room03 {
  width: 460px;
  height: 986px;
  border-radius: 0;
  background-image: -webkit-image-set(url("/storage/images/dyzls-bg.jpg") 1x,url("/storage/images/dyzls-bg.jpg") 2x);
  background-size: 460px 986px;
  background-repeat:no-repeat;
}
#canvas-mask .handle.room03 .page .hotpot001 {
	left: 10%;
	top: 39%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}
#canvas-mask .handle.room03 .page .hotpot001 a.rmenulink001 {
    bottom: 70px;
}
#canvas-mask .handle.room03 .page .hotpot001 .guideline001 {
	height: 80px;
}
#canvas-mask .handle.room03 .page .hotpot002 {
	left: 63.5%;
    top: 48.8%;
    width: 100px;
    height: 120px;
    max-width: 100px;
}
#canvas-mask .handle.room03 .page .hotpot002 a.rmenulink002 {
    left: -36px;
    bottom: 101px;
}
#canvas-mask .handle.room03 .page .hotpot002 a.rmenulink002 .glabeltext {
	padding: 5px 15px;
}
#canvas-mask .handle.room03 .page .label002 .gdot {
	right: 0;
}
#canvas-mask .handle.room03 .page .hotpot002 .guideline002 {
	bottom: -6px;
    right: 4px;
    left: auto;
	height: 107px;
}
#canvas-mask .handle.room03 .page .hotpot004 {
	left: 57%;
	top: 56%; 
	width: 100px;
	height: 97px;
	max-width: 100px;
}
#canvas-mask .handle.room03 .page .hotpot004 .guideline004{
	width: 100px;
	bottom: 8px;
    right: 8px;
}
#canvas-mask .handle.room03 .page .hotpot004 a.rmenulink004{
	right: 52px;
    bottom: 85px;
}
#canvas-mask .handle.room03 .screenam {
	position: absolute;
	top: 42.8%;
}
#canvas-mask .handle.room03 .page .hotpot004 .glabeltext {
	padding: 5px 15px;
}
#canvas-mask .handle .page .onlydot {
	left: 24.5%;
    top: 32%;
    width: 50px;
    height: 50px;
    max-width: 50px;
	
}
#canvas-mask .handle .page .onlydot a.rmenulink {
	width: 100%;
    height: 100%;
    display: block;
    left: 0;
    top: 0;
}
#canvas-mask .handle .page .onlydot a.rmenulink .gdot {
	display: block;
	left: 50%;
    top: 50%;
    margin-left: -8px;
    margin-top: -8px;
}
#canvas-mask .handle.room02 .page .hotpot006.onlydot {
	left: 19%;
    top: 38%;
}
#canvas-mask .handle.room03 .page .hotpot007.onlydot {
	left: 62%;
    top: 26%;
}
#canvas-mask .handle.room03 .page .hotpot006.onlydot {
  left: 29%;
  top: 29%;
}
#canvas-mask .handle.room04 {
  width: 414px;
  height: 888px;
  border-radius: 0;
  background-image: -webkit-image-set(url("/storage/images/hxnjzls-bg.jpg") 1x,url("/storage/images/hxnjzls-bg.jpg") 2x);
  background-size: 414px 888px;
  background-repeat:no-repeat;
}
#canvas-mask .handle.room04 .screenam {
	position: absolute;
	top: 43%;
}
#canvas-mask .handle.room04 .page .hotpot002 {
    left: 69%;
    top: 38%;
}
#canvas-mask .handle.room04 .page .hotpot002 a.rmenulink002{
    bottom: 60px;
}
#canvas-mask .handle.room04 .page .hotpot001 {
    left: 3%;
    top: 57.5%;
}
#canvas-mask .handle.room04 .page .hotpot002 .guideline002 {
	height: 70px;
}
#canvas-mask .handle.room04 .page .hotpot004 {
    left: 47%;
    top: 41.5%;
}
#canvas-mask .handle.room04 .page .hotpot006 {
    left: 62%;
    top: 27%;
}
#canvas-mask .handle.room05 {
  width: 414px;
  height: 888px;
  border-radius: 0;
  background-image: -webkit-image-set(url("/storage/images/hxjrzls-bg.jpg") 1x,url("/storage/images/hxjrzls-bg.jpg") 2x);
  background-size: 414px 888px;
  background-repeat:no-repeat;
}
#canvas-mask .handle.room05 .screenam {
	position: absolute;
	top: 40.7%;
}
#canvas-mask .handle.room05 .page .hotpot001 {
    left: 7%;
    top: 36%;
}
#canvas-mask .handle.room05 .page .hotpot002 {
    left: 53%;
    top: 44%;
}
#canvas-mask .handle.room05 .page .hotpot004 {
    left: 33%;
    top: 50.5%;
}
#canvas-mask .handle.room05 .page .hotpot006 {
    left: 11%;
    top: 28%;
}
#canvas-mask .handle.room05 a.rmenulink004 {
	right: 0px;
}
#canvas-mask .handle.room05 a.rmenulink004 .glabeltext{
    padding: 5px 15px;
}



.grid .g-col-md-4 {
    grid-column: auto/span 6;
}



}

@media screen and (max-width: 375px) {
#canvas-mask .handle.room01 {
  width: 375px;
  height: 804px;
  border-radius: 0;
  /*background-image: -webkit-image-set(url("/storage/images/wcjzls-bg.jpg") 1x,url("/storage/images/wcjzls-bg.jpg") 2x);*/
  background-size: 375px 804px;
  background-repeat:no-repeat;
}
#canvas-mask .handle.room02 {
  width: 375px;
  height: 804px;
  border-radius: 0;
  background-image: -webkit-image-set(url("/storage/images/xcjzls-bg.jpg") 1x,url("/storage/images/xcjzls-bg.jpg") 2x);
  background-size: 375px 804px;
  background-repeat:no-repeat;
}
#canvas-mask .handle.room03 {
  width: 375px;
  height: 804px;
  border-radius: 0;
  background-image: -webkit-image-set(url("/storage/images/dyzls-bg.jpg") 1x,url("/storage/images/dyzls-bg.jpg") 2x);
  background-size: 375px 804px;
  background-repeat:no-repeat;
}
#canvas-mask .handle.room03 .page .hotpot001 {
  left: 3%;
  top: 40%;
}
#canvas-mask .handle.room03 .page .hotpot004 {
  left: 35%;
  top: 48%;
}
#canvas-mask .handle .page .hotpot006.onlydot {
  left: 29%;
  top: 29%;
}
#canvas-mask .handle.room03 .page .hotpot007.onlydot {
    left: 58%;
    top: 28%;
}
#canvas-mask .handle.room03 .page .hotpot002 {
    left: 60%;
    top: 40%;
}
#canvas-mask .handle.room02 .page .hotpot001 {
	left: 2%;
    top: 45%;
}
#canvas-mask .handle.room02 .page .hotpot006.onlydot {
	left: 18%;
    top: 37%;
}
#canvas-mask .handle.room02 .page .hotpot002 {
    left: 63%;
    top: 49.3%;
}
#canvas-mask .handle.room02 .page .hotpot004 {
    left: 40%;
    top: 52%;
}

.grid .g-col-md-4 {
    grid-column: auto/span 6;
}

}

@media screen and (max-width: 360px) {

}

@media screen and (max-width: 320px) {


}