body{
  background: #1d1d1d;
}
body, html{
    margin: 0;
    padding: 0;
}
html, body, #fg, #bg {
  width:100%;
  height:100%;
  color:#fff;
  font-family: 'Microsoft Yahei', sans-serif;
  overflow:hidden;
}
h1, h2, h3, h4, h5, h6{
    font-family: 'Microsoft Yahei', sans-serif;
    font-weight: 600;
    color: #333;
    margin: 0 0 15px;
}
div{
  position:absolute;
  top:0;
}
.topall {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  background: #1d1d1d;
  padding:10px 0px;
}
.topall .topl{
  float:left;
  display:block;
  margin:0px 0 0px 30px;
}
.topall .topl img{
  height:40px;
}
.topall .topr{
  float:right;
    font-size:24px;
  margin:8px 30px  0px 0;
}
.topall .topr a{
    color: #fff;
  line-height:40px;
    text-decoration: none;
    transition: all ease 300ms;
    -moz-transition: all ease 300ms;
    -webkit-transition: all ease 300ms;
    -ms-transition: all ease 300ms;
    -o-transition: all ease 300ms;
}
.topall .topr a:hover, .topall .topr a:focus{
    color: #48C6D3;
    text-decoration: none;
    outline: 0;
}
.footall {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
    color: #fff;
  text-align:center;
  font-size:16px;
  line-height:1;
  padding:20px 0px;
  background: #1d1d1d;
}
.footall a{
    color: #fff;
  text-align:center;
    text-decoration: none;
    transition: all ease 300ms;
    -moz-transition: all ease 300ms;
    -webkit-transition: all ease 300ms;
    -ms-transition: all ease 300ms;
    -o-transition: all ease 300ms;
}

#fg a{
  width:20%;
  height:100vh;
  line-height:100vh;
    color: #fff;
  font-size:35px;
    text-decoration: none;
    transition: all ease 300ms;
    -moz-transition: all ease 300ms;
    -webkit-transition: all ease 300ms;
    -ms-transition: all ease 300ms;
    -o-transition: all ease 300ms;
}
#fg a:hover, #fg a:focus{
    width:40%;
    color: #48C6D3;
    text-decoration: none;
    outline: 0;
}
p {
  padding:0;
  width:20%;
  height:100vh;
  line-height:100vh;
  text-align:center;
    transition: all ease 300ms;
    -moz-transition: all ease 300ms;
    -webkit-transition: all ease 300ms;
    -ms-transition: all ease 300ms;
    -o-transition: all ease 300ms;
}
#fg a:hover p {
    width:40%;
}
.topall .topr .contact{position: relative; color: #fff;cursor: pointer; margin-right: 30px;}
.topall .topr .lan{position: relative; color: #fff;cursor: pointer; }
.topall .topr .lan .lang:after{content: "\f107"; font-family: 'Font Awesome 5 Pro' !important; font-size: 16px;margin-left: 5px}
.topall .topr .lan .lanb{flex-wrap: wrap;}
.topall .topr .lan .lanb{position: absolute;left: 0;top:100%;width: 120px;right: 0;display: flex;justify-content: space-between;background: rgba(255,255,255,.8);  padding:0;z-index: 8;opacity: 0;visibility: hidden;transition: .3s}
.topall .topr .lan .lanb a{width: 100%;text-align: center;  font-size:16px;}
.topall .topr .lan .lanb a{color: #555}
.topall .topr .lan .lanb a:hover{color: #fff;background: rgba(72,198,211,.8);}
.topall .topr .lan:hover .lanb{opacity: 1;visibility: inherit;}


@media (max-width: 767px){
.topall .topl{
  margin:0px 0 0 20px;
}
.topall .topl img{
  height:40px;
}
.topall .topr{
  margin:0px 20px 0 0;  font-size:15px;
}
.topall .topr a{
  line-height:40px;
  font-size:15px;
}
.topall .topr .contact{margin-right: 15px;}
.topall .topr .lan .lanb{width: 100px;}
.topall .topr .lan .lanb a{font-size:14px;}
#fg a{
  font-size:18px;
}
p {
  letter-spacing: 5px;
  word-spacing: 5px;
  line-height:16.6vw;
  writing-mode: vertical-lr;/*�������� ���������� writing-mode: vertical-rl;*/    
  writing-mode: tb-lr;/*IE������Ĵ������� ���������� writing-mode: tb-rl��*/   
}
#fg a:hover p {
  line-height:33.3vw;
}
.footall {
  font-size:12px;
  line-height:20px;
}
}