@charset "utf-8";
/* CSS Document */
.loadingbx{
	position:fixed;
	width:100%;
	height:100vh;
	height: calc(var(--vh, 1vh) * 100);
	left:0;
	top:0;
	z-index:10;
	background-color:rgba(255,255,255,.5);
	backdrop-filter:blur(30px);
	/**/
	}
.h_cloud_1,.h_cloud_2{
	position:absolute;
	width:100%;
	height:110%;
	left:0;
	top:-5%;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% 100%;
	opacity:1;
	}
.h_cloud_1{background-image: url(../images/h_cloud_1.png);transition: all 1s;transform:scale(1);}
.h_cloud_2{background-image: url(../images/h_cloud_2.png);transition: all 3s;transform:scale(1);}
.loadbg{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	/*background-color:#093;*/
	/**/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/loadbg.jpg);
	background-size:100% auto;
	opacity:1;
	/*
	mask-image: url(../images/vbg.png);
	mask-repeat: no-repeat;
	mask-position:50% 50%;
	mask-size: 300% auto;
	-webkit-mask-image: url(../images/vbg.png);
	-webkit-mask-position:50% 50%;
	-webkit-mask-size:300% auto;*/
	/**/
	transition: all .5s;
	}
	
	
.loadingbx.on{
	background-color:rgba(255,255,255,0);
	backdrop-filter:blur(0px);
	pointer-events:none;
	transition: all 1.8s ease-out;
	}/**/
.loadingbx.on .loadbg{
	opacity:0;
	/*mask-size: 0% auto;
	-webkit-mask-size: 0% auto;*/
	}
.loadingbx.on .h_cloud_1,.loadingbx.on .h_cloud_2{
	opacity:0;
	transform:scale(3);/**/
	}
/**/
.h_ck{
	position:absolute;
	width:100%;
	height:100%;
	display:none;
	cursor: pointer;
	top:0;
	left:0;
	}
.h_txbx{
	position:absolute;
	width:100%;
	text-align:center;
	cursor: pointer;
	top:50%;
	left:50%;
	transform:translate(-50% ,-50%);
	filter:blur(20px);
	opacity:0;
	transition: all .5s;
	}
.h_txbx > span{
	position:relative;
	text-align:center;
	display:block;
	transition:all .5s;
	transform:scale(3.5);
	}
.h_txbx > span::before{
	position:relative;
	content:"";
	width:21.5%;/*430*/
	padding-bottom:3.5%;/*70*/
	display:inline-block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/h_tx.png);
	background-size:100% auto;
	/**/
	}	
.gt1{
	position:relative;
	width:3.5%;/*70*/
	padding-bottom:3.5%;/*70*/
	display:inline-block;
	/*cursor: pointer;*/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/gt_1a.png);
	background-size:100% auto;
	margin-left:.5%;
	}
.gt1::before{
	position:absolute;
	content:"";
	width:100%;
	height:100%;
	display:inline-block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/gt_1.png);
	background-size:100% auto;
	top:0;
	left:0;
	}
.h_txbx.on{filter:blur(0px);opacity:1;z-index:1;transition: all 1.3s;}
.h_txbx.on > span{transform:scale(1);transition:all 1.5s;}
.h_txbx.on .gt1::before{
	animation: tp2 .8s linear infinite;
	}

/**/
.clockbg{
	position:absolute;
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-repeat:no-repeat,repeat;
	background-position:50% 50%,50% 50%;
	background-size:auto auto,100% auto;
	background-image:url(../images/ccb1.png),url(../images/sebg.jpg);
	/*background-color:rgba(25,24,23,1);*/
	/**/
	transition: all .8s;
	}
.clockbg::before{
	position:absolute;
	width:calc(100% - 1.8vw);
	height:calc(100% - 1.8vw);
	display: block;
	content: "";
	background-attachment: scroll;
	background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;
	background-position:50% 0%,50% 100%,0% 50%,100% 50%;
	background-image:url(../images/b_t.png),url(../images/b_t.png),url(../images/b_l.png),url(../images/b_l.png);
	top:50%;
	left:50%;
	transform:translate(-50% ,-50%);
	opacity:.6;
	}
	
.clockbg.on{background-color:rgba(255,255,255,0);opacity:0;pointer-events: none;}
.clockbx{
	position:absolute;
	width:20%;
	padding-bottom:20%;
	top:45%;/*35*/
	left:50%;
	transform:translate(-50% ,-50%);
	opacity:0;
	filter: brightness(1.75);
	/**/
	pointer-events: none;
	/**/
	transition: all .5s;
	}
.clockbx.ou{
	filter: brightness(1);
	opacity:1;
	/*top:45%;*/
	}
.clock_1{
	position:absolute;
	width:100%;
	padding-bottom:100%;
	top:0;
	left:0;
	}
.clock_1 > div{
	position:absolute;
	width:100%;
	padding-bottom:100%;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size:100% auto;
	}
.clock_1 > div:nth-child(1){
	top:0;
	left:0;
	background-image: url(../images/loading_10.png);
	/**/
	}
.clockbx.on .clock_1 > div:nth-child(1){
	-moz-animation: rotate 20s linear infinite;
	-webkit-animation: rotate 20s linear infinite;
	-o-animation: rotate 20s linear infinite;
	-ms-animation: rotate 20s linear infinite;
	animation: rotate 20s linear infinite;	
	}
.clock_1 > div:nth-child(2){
	top:1%;
	left:3%;/*1*/
	background-image: url(../images/loading_7.png);
	}
.clockbx.on .clock_1 > div:nth-child(2){
	-moz-animation: rotate2 8s linear infinite;
	-webkit-animation: rotate2 8s linear infinite;
	-o-animation: rotate2 8s linear infinite;
	-ms-animation: rotate2 8s linear infinite;
	animation: rotate2 8s linear infinite;
	}
	
.clock_1 > div:nth-child(3){
	width:39.1%;/*610*/
	padding-bottom:39.1%;
	top:35.19%;/*471*/
	left:35.91%;/*529*/
	background-image: url(../images/loading_8.png);
	}
.clockbx.on .clock_1 > div:nth-child(3){
	-moz-animation: rotate 6s linear infinite;
	-webkit-animation: rotate 6s linear infinite;
	-o-animation: rotate 6s linear infinite;
	-ms-animation: rotate 6s linear infinite;
	animation: rotate 6s linear infinite;
	}
.clock_1 > div:nth-child(4){
	top:0;
	left:0;
	background-image: url(../images/loading_9.png);
	}
.clock_2{
	position: absolute;
	width:92.24%;
	padding-bottom:92.24%;
	top:-5%;
	left:3.3%;
	}
.clock_2 > div{
	position: absolute;
	width:100%;/*1439*/
	padding-bottom:100%;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size:100% auto;
	top:0;
	left:0;
	}
.clock_2 > div:nth-child(1){background-image: url(../images/loading_6.png);}	
.clockbx.on .clock_2 > div:nth-child(1){
	-moz-animation: rotate2 10s linear infinite;
	-webkit-animation: rotate2 10s linear infinite;
	-o-animation: rotate2 10s linear infinite;
	-ms-animation: rotate2 10s linear infinite;
	animation: rotate2 10s linear infinite;
	}
.clock_2 > div:nth-child(2){background-image: url(../images/loading_5.png);}
.clockbx.on .clock_2 > div:nth-child(2){
	-moz-animation: rotate 8s linear infinite;
	-webkit-animation: rotate 8s linear infinite;
	-o-animation: rotate 8s linear infinite;
	-ms-animation: rotate 8s linear infinite;
	animation: rotate 8s linear infinite;
	}
.clock_2 > div:nth-child(3){background-image: url(../images/loading_4.png);}
.clock_2 > div:nth-child(4){background-image: url(../images/loading_2.png);}
.clockbx.on .clock_2 > div:nth-child(4){
	-moz-animation: rotate 60s linear infinite;
	-webkit-animation: rotate 60s linear infinite;
	-o-animation: rotate 60s linear infinite;
	-ms-animation: rotate 60s linear infinite;
	animation: rotate 60s linear infinite;
	}
.clock_2 > div:nth-child(5){background-image: url(../images/loading_3.png);}
.clockbx.on .clock_2 > div:nth-child(5){
	-moz-animation: rotate 5s linear infinite;
	-webkit-animation: rotate 5s linear infinite;
	-o-animation: rotate 5s linear infinite;
	-ms-animation: rotate 5s linear infinite;
	animation: rotate 5s linear infinite;
	}

.loading_nb{
	position: absolute;
	width: 100%;
	text-align: center;
	font-family: 'Great Vibes', Arial;
	font-size: 1.5vw;
	color:#caaa74;/*bb9b63*/
	/*font-weight:bold;*/
	left: 0;
	bottom:-12%;
	opacity:0;
	transform:scale(3.5);
	/**/
	transition: all .6s;
	}
.clockbx.ou .loading_nb{
	opacity:1;
	transform:scale(1);
	}
	
.loading_nb span{
	position:relative;
	font-size:2.8vw;
	display:inline-block;
	right:2%;
	/*font-weight:bold;*/
	top:.12vw;
	}
	
	

@media only screen and (max-width:1600px){
/**/	
}
@media only screen and (max-width:1400px){
/**/
}
@media only screen and (max-width:1200px){
/**/	
}
@media only screen and (max-width:1000px){	
/**/
}
@media only screen and (max-width:800px){
/**/
}	
@media only screen and (max-width:780px){
/**/
.clockbg{
	background-size:auto 80%,100% auto;
	}
.h_cloud_1,.h_cloud_2{background-size:100% 100%;}
.h_cloud_1{background-image: url(../images/h_cloud_1_m.png)}
.h_cloud_2{background-image: url(../images/h_cloud_2_m.png)}
.loadbg{
	background-position:50% 50%;
	background-image: url(../images/loadbg_m.jpg);
	background-size:auto 100%;
	}
.h_txbx > span::before{
	width:55.12%;/*430*/
	padding-bottom:8.9%;/*70*/
	/**/
	}	
.gt1{
	width:8.9%;/*70*/
	padding-bottom:8.9%;/*70*/
	}
	
/**/
.clockbg::before{
	width:calc(100% - 5.5vw);
	height:calc(100% - 5.5vw);
	}
.clockbx{
	width:60%;
	padding-bottom:60%;
	}
.loading_nb{
	font-size: 4.8vw;
	font-weight:normal;
	bottom:-15%;
	}
.clockbx.on .loading_nb{
	opacity: 1;
	transform: scale(1);
	}
	
.loading_nb span{
	font-size:8.8vw;
	top:.12vw;
	}
	
		
}
@media only screen and (max-width:685px){ 
/**/
}
@media only screen and (max-width:580px){
/**/
.clockbg::before{
	background-size: auto 1.5px,auto 1.5px,1.5px auto,1.5px auto;
	}	
}
@media only screen and (max-width:560px){
/**/
}
@media only screen and (max-width:470px){
/**/
}

@media only screen and (max-width:380px){
/**/
}
@media only screen and (max-width:360px){
/**/
}
@media only screen and (max-width:340px){
/**/
}