:root {
	--btn-font-size:        20px;
	--btn-font-color:       #000000;
	--btn-art-font-size:    16px;
	--btn-width:            208px;
	--btn-width-vr-rooms:   168px;
	--btn-up-color:         #007AB8;
	--btn-dn-color:         #007AB8;
	--btn-hover-up-color:   #008BD1;
	--btn-hover-dn-color:   #008BD1;
	--btn-active-st1-color: #00699E;
	--btn-active-st2-color: #00699E;
	--btn-active-st3-color: #00699E;
	--btn-active-st4-color: #00699E;
	--container-div-height: 150px;
}

@font-face {
	font-family:'Poppins';
	src: url('Poppins-SemiBold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

html{width: 100%;min-width:1200px;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{padding:0;margin:0}
body,button,input,select,textarea{font:14px/1.5 Poppins,arial,Microsoft Yahei,sans-serif;}
body{width: 100%;background:#fff;-webkit-font-smoothing: antialiased;color:#000;overflow-x:hidden;}
body *{box-sizing:border-box;-webkit-transition: all 1s;-moz-transition: all 1s;transition: all 1s}
h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-size:100%}
address,cite,dfn,em,var{font-style:normal}
code,kbd,pre,samp{font-family:courier new, courier, monospace}
small{font-size:12px}
ul,ol{list-style:none}
hr{border: none;height: 1px}
a{color:inherit;text-decoration:none;outline:none;background-color: transparent}
a:hover,a:active{outline: none;text-decoration: none}
img{border:none}
b,strong{font-weight: bold}
table{border-collapse:collapse}
td,th{border: 1px solid #000}
input,input:focus{border: none;outline: none}
input[type="submit"]{cursor: pointer}
*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
.trans05{-webkit-transition: all .5s;-moz-transition: all .5s;transition: all .5s}
.trans1{-webkit-transition: all 1s;-moz-transition: all 1s;transition: all 1s}
.trans15{-webkit-transition: all 1.5s;-moz-transition: all 1.5s;transition: all 1.5s}
.trans2{-webkit-transition: all 2s;-moz-transition: all 2s;transition: all 2s}
.b{display: block;width: 100%;height: 100%}
.nclk{pointer-events: none}
.cl{clear: both}
.cl:after{content: "";clear: both;display: table}
.fl{float: left}
.fr{float: right}
.ws{overflow: hidden;white-space: nowrap;text-overflow: ellipsis}
.p{padding: 0;margin:0 auto; width: 1200px;}
/*calc(50% - 550px)*/
.fs12{font-size:12px;}
.fs14{font-size:14px;}
.fs16{font-size:16px;}
.fs18{font-size:18px;}
.fs20{font-size:18px;}
.fs22{font-size:22px;}
.fs24{font-size:24px;}
.fs26{font-size:26px;}
.fs28{font-size:28px;}
.fs30{font-size:30px;}
.fs32{font-size:32px;}
.fs34{font-size:34px;}
.fs36{font-size:36px;}
.fs38{font-size:38px;}
.fs40{font-size:40px;}
.fs50{font-size:50px;}
.fs60{font-size:60px;}
.fs80{font-size:80px;}
.fs140{font-size:140px;}
.fs160{font-size:160px;}
.color1{color:#898989;}
.color89{color:#898989;}
.hide{display:none;}
.unvis{visibility:hidden; }

.content{min-height:700px;padding-top: 40px; }
/*-----------------------------------------------------------*/
body{padding-top:70px;}
.header{
    height: 70px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999999;
    background:#fff;
}
.nav{
    
    overflow: hidden;
    padding-top: 14px;
}
.nav a{color: #898989;}
.logo{
    width: 260px;
    height: 80px;
    padding-top: 10px;
    font-weight: bold;
    padding-left: 10px;
}
.logo img{height: 33px;width: auto;vertical-align: middle;margin-right: 10px;margin-bottom: 4px;}
.logo .b{
    height: auto;
}
.nav-list{
    padding-top: 20px;
    margin-right: 50px;

}
.nav-list li{
    float: left;
    text-align: center;
    line-height: 40px;
}
.nav-list li a{
    background: white;
    border-radius: 20px;
    color: #898989;
}
.nav-list li + li{
    margin-left: 30px;
}
.wal a:hover,.nav-list li a:hover,
.nav-list li.active a{
    color: #000;
}
.wal {padding:0 2px;border:1px solid #898989;border-radius: 10px;
margin-top: 20px;}
.wal a{color: #898989;}


.divButton, .devArtBtn {
	padding:2px 10px; border:solid #707070 1px; font-family:caption; font-size:var(--btn-font-size); background:grey; display:inline; border-radius:2px; display: flex; flex-wrap: wrap; width: var(--btn-width);
	background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, var(--btn-up-color)), color-stop(1, var(--btn-dn-color)));
	background-image: -o-linear-gradient(bottom, var(--btn-up-color) 0%, var(--btn-dn-color) 100%);
	background-image: -moz-linear-gradient(bottom, var(--btn-up-color) 0%, var(--btn-dn-color) 100%);
	background-image: -webkit-linear-gradient(bottom, var(--btn-up-color) 0%, var(--btn-dn-color) 100%);
	background-image: -ms-linear-gradient(bottom, var(--btn-up-color) 0%, var(--btn-dn-color) 100%);
	background-image: linear-gradient(to bottom, var(--btn-up-color) 0%, var(--btn-dn-color) 100%);
	cursor:default;
	text-align:center;
}

.linkColor{
	color: white;
}

.divButton:hover, .devArtBtn:hover{
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0,  var(--btn-hover-up-color)), color-stop(1, var(--btn-hover-dn-color)));
	background-image: -o-linear-gradient(bottom, var(--btn-hover-up-color) 0%, var(--btn-hover-dn-color) 100%);
	background-image: -moz-linear-gradient(bottom, var(--btn-hover-up-color) 0%, var(--btn-hover-dn-color) 100%);
	background-image: -webkit-linear-gradient(bottom, var(--btn-hover-up-color) 0%, var(--btn-hover-dn-color) 100%);
	background-image: -ms-linear-gradient(bottom, var(--btn-hover-up-color) 0%, var(--btn-hover-dn-color) 100%);
	background-image: linear-gradient(to bottom, var(--btn-hover-up-color) 0%, var(--btn-hover-dn-color) 100%);
	border: #3c7fb1 solid 1px;
}

.divButton:active, .devArtBtn:active{
	border:solid #2c628b 1px; padding:2px 9px 2px 11px;
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, var(--btn-active-st1-color)),color-stop(0.5, var(--btn-active-st2-color)), color-stop(0.51, var(--btn-active-st3-color)), color-stop(1, var(--btn-active-st4-color)));
	background-image: -o-linear-gradient(bottom, var(--btn-active-st1-color) 0%, var(--btn-active-st2-color) 50%, var(--btn-active-st3-color) 51%, var(--btn-active-st4-color) 100%);
	background-image: -moz-linear-gradient(bottom, var(--btn-active-st1-color) 0%, var(--btn-active-st2-color) 50%, var(--btn-active-st3-color) 51%, var(--btn-active-st4-color) 100%);
	background-image: -webkit-linear-gradient(bottom, var(--btn-active-st1-color) 0%, var(--btn-active-st2-color) 50%, var(--btn-active-st3-color) 51%, var(--btn-active-st4-color) 100%);
	background-image: -ms-linear-gradient(bottom, var(--btn-active-st1-color) 0%, var(--btn-active-st2-color) 50%, var(--btn-active-st3-color) 51%, var(--btn-active-st4-color) 100%);
	background-image: linear-gradient(to bottom, var(--btn-active-st1-color) 0%, var(--btn-active-st2-color) 50%, var(--btn-active-st3-color) 51%, var(--btn-active-st4-color) 100%);
}

/* Override the initial font size */
.devArtBtn {font-size:var(--btn-art-font-size); align-items: center; justify-content: center;}

.button1 {border-radius: 12px;}
.button2 {border-radius: 12px;}

.containerDiv{
	display: flex;
	height: var(--container-div-height);
}

.vertical-center {
	margin: 0;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
}

.arttis .right_text{
	padding-right: 50px;
	text-align: right;
}
.arttis .right_text a{
	padding-top:20px;
	display: block;
	color:#898989;
}
.arttis .right_text a:hover{
	color:#000;
}

.vText {
	writing-mode: vertical-rl;
	text-orientation: mixed;
}

/* cloud.html main grid */

#cloudGrid1 {
	display: grid;
	grid-template-columns: var(--btn-width) 800px 150px;
	grid-template-rows: 300px 64px 126px 300px;
	/*grid-column-gap: 10px;
			grid-row-gap: 15px;*/
	/*grid-gap: 10px 15px; /*shorthand for settings above*/
	*/ justify-items: center;
	/*Aligns the content inside a grid item along the column axis*/
	align-items: end;
	/*Aligns the content inside a grid item along the row axis*/
	/*justify-content: space-evenly; /*Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container. This property aligns the grid along the column axis */
	*/ align-content: start;
	/*Sometimes the totwal size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container. This property aligns the grid along the row axis*/
	width: 90%;
	margin: auto;
}

#cloudGrid1 div {
	width: 100%;
	height: 100%;
}

#cloudGrid1 > div:nth-child(1) {
	grid-column-start: 2;
	grid-row-start: 1;
	grid-column-end: 3;
	grid-row-end; 4;
	background-color: rgba(0,0,0,0);
}

#cloudGrid1 > div:nth-child(2) {
	grid-column-start: 1;
	grid-row-start: 2;
	background-color: rgba(0,0,0,0);
}

#cloudGrid1 > div:nth-child(3) {
	grid-column-start: 2;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end; 4;
	background-color: rgba(0,0,0,0);
}

#cloudGrid1 > div:nth-child(4) {
	grid-column-start: 3;
	grid-row-start: 1;
	background-color: rgba(0,0,0,0);
}

#cloudGrid1 > div:nth-child(5) {
	grid-column-start: 3;
	grid-row-start: 4;
	background-color: rgba(0,0,0,0);
}

#cloudGrid1 > div:nth-child(6) {
	grid-column-start: 2;
	grid-row-start: 4;
	background-color: rgba(0,0,0,0);
}

#cloudGrid1 > video:nth-child(1) {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end; 4;
}


/* cloud.html button grid */

#cloudGridBtn {
	display: grid;
	grid-template-columns: 175px 175px 175px;
	grid-template-rows: 41px 41px;
	/*grid-column-gap: 10px;
			grid-row-gap: 15px;*/
	grid-column-gap: 20px;
	/*grid-gap: 10px 15px; /*shorthand for settings above*/
	*/ justify-items: center;
	/*Aligns the content inside a grid item along the column axis*/
	align-items: end;
	/*Aligns the content inside a grid item along the row axis*/
	/*justify-content: space-evenly; /*Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container. This property aligns the grid along the column axis */
	*/ align-content: start;
	/*Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container. This property aligns the grid along the row axis*/
	width: 90%;
	margin: auto;
}

#cloudGridBtn div {
	width: 100%;
	height: 100%;
}

#cloudGridBtn > div:nth-child(1) {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	background-color: rgba(0,0,0,0);
}

#cloudGridBtn > div:nth-child(2) {
	grid-column-start: 1;
	grid-row-start: 2;
	background-color: rgba(0,0,0,0);
}

#cloudGridBtn > div:nth-child(3) {
	grid-column-start: 2;
	grid-row-start: 2;
	background-color: rgba(0,0,0,0);
}

#cloudGridBtn > div:nth-child(4) {
	grid-column-start: 3;
	grid-row-start: 2;
	background-color: rgba(0,0,0,0);
	height: 41px;
}

#gvid { 
	display: grid;
	width: 950;
	height: 790px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

#gvid video {
	height: 800px;
	width: 1000px;
	background-size: cover; 
	overflow: hidden;
	object-fit: fill;
}




@media  (max-width: 1200px) {
	#bgvid video{
		width: auto;
		height: 100vh;
		transform:scale(1.4);
		-ms-transform:scale(1.4); 	/* IE 9 */
		-moz-transform:scale(1.4); 	/* Firefox */
		-webkit-transform:scale(1.4); /* Safari 和 Chrome */
		-o-transform:scale(1.4);
	}

}

@media  (max-width: 767px) {
	#bgvid video{
		width: auto;
		height: 100vh;
		transform:scale(1.4);
		-ms-transform:scale(1.4); 	/* IE 9 */
		-moz-transform:scale(1.4); 	/* Firefox */
		-webkit-transform:scale(1.4); /* Safari 和 Chrome */
		-o-transform:scale(1.4);
	}

}