/* -------------------------------------------------------------------
 * Plugin Name           : web_union - Full Width Toggle Menu
 * Author Name           : web_union_Theme
 * Author URI            : http://miaozhao86.com/eden/menu_fullscreen/main/HTML/
 * Created Date          : 17 March 2022
 * Version               : 1.0
 * File Name             : style.css
------------------------------------------------------------------- */
@font-face {
  font-family: QoreTermA;
  src: url("fonts/QoreTermA.ttf");
}

@font-face {
  font-family: QORE1;
  src: url("fonts/QORE1.ttf");
}


*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
body{font-family: "QoreTermA",sans-serif;}
a{ text-decoration: none;}
.fl{ float: left;}
.fr{ float: right;}
.clearfix:after{display: block; content: ""; clear: both;}
/**********************common css end************************/
.header{ width:100%;min-height:100vh;background: #000;}
.header .logo{ cursor: pointer; position: fixed;top:0;;left:0; margin: 20px;z-index:100;}
.header .logo a{ cursor: pointer; display: block; width:200px; height: 40px; background: url('../images/logo1.png') no-repeat;
	animation: showlogo 2s;
	-webkit-animation: showlogo 2s;
	-moz-animation: showlogo 2s;
	-ms-animation: showlogo 2s;
	-o-animation: showlogo 2s;
}
@keyframes showlogo{
	0%{width: 0;}
	100%{width: 200px;}
}
@-webkit-keyframes showlogo{
	0%{width: 0;}
	100%{width: 200px;}
}
@-ms-keyframes showlogo{
	0%{width: 0;}
	100%{width: 200px;}
}
@-o-keyframes showlogo{
	0%{width: 0;}
	100%{width: 200px;}
}
@-moz-keyframes showlogo{
	0%{width: 0;}
	100%{width: 200px;}
}
.header .header_menu{ position: fixed;top:0;right:0; width: 100%; min-height:100vh;}
.header .header_menu .header_menu_btn{display: block;margin-top: 30px;margin-right: 30px; width:30px;height: 30px; background: url('../images/menu.png') no-repeat center center;}
.header .header_menu .close_btn{ background: url('../images/close.png') no-repeat;}
/**********************header css end************************/
.nav{display: none;padding: 0 40%; height: 100%; background: #000; margin-top: 10%;}
.nav a{ display: block;color: #fff; width: 100%;margin-bottom: 10%;font-weight: bold;font-size: 48px;}
.nav a:hover,.nav .active{ border-bottom:1px solid #d4151a;padding-left: 50px; color: #d4151a; background: url('../images/arrow.png') no-repeat left center;
	animation: movenav .5s;
	-webkit-animation: movenav .5s;
	-moz-animation: movenav .5s;
	-ms-animation: movenav .5s;
	-o-animation: movenav .5s;
}
@keyframes movenav{
	0%{padding-left: 0;}
	100%{padding-left: 50px;}
}
@-webkit-keyframes movenav{
	0%{padding-left: 0;}
	100%{padding-left: 50px;}
}
@-ms-keyframes movenav{
	0%{padding-left: 0;}
	100%{padding-left: 50px;}
}
@-o-keyframes movenav{
	0%{padding-left: 0;}
	100%{padding-left: 50px;}
}
@-moz-keyframes movenav{
	0%{padding-left: 0;}
	100%{padding-left: 50px;}
}
/**********************nav css end***************************/
.main{width: 50%;min-height: 100vh; position: absolute;top:0;left:50%;margin-left: -25%; text-align: center; z-index: 999;
	animation: text 5s;
	-webkit-animation: text 5s;
	-moz-animation: text 5s;
	-ms-animation: text 5s;
	-o-animation: text 5s;
}
.main h3{line-height: 35vh;margin-top: 20vh; text-align: center; color: #fff; font-size: 72px;}
.main a{ cursor: pointer; display:inline-block;margin: 0 10px; width: 60px;height: 60px; border-radius: 50%;}
.main .fc{ background: #1d1d1d url('../images/fc.png') no-repeat center center;}
.main .t{ background: #1d1d1d url('../images/t.png') no-repeat center center;}
.main .ins{ background: #1d1d1d url('../images/ins.png') no-repeat center center;}
@keyframes text{
	0%{opacity: 0;}
	100%{opacity: 100;}
}
@-webkit-keyframes text{
	0%{opacity: 0;}
	100%{opacity: 100;}
}
@-ms-keyframes text{
	0%{opacity: 0;}
	100%{opacity: 100;}
}
@-o-keyframes text{
	0%{opacity: 0;}
	100%{opacity: 100;}
}
@-moz-keyframes text{
	0%{opacity: 0;;}
	100%{opacity: 100;}
}
/*****************************main css end************************/