@import url('css.css');

@font-face {
  font-family: SourceHanSans;
  src: url('/css/SourceHanSansCN-Normal.ttf');
}

html, body, .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
  
  width: 100%;
  font-family: Arial, SourceHanSans, 'Poppins', sans-serif;
  
}

.card {
  border: 1px solid rgba(204,174,102,.25);
  border-radius: .15rem;
}

hr {
  border-top: 1px solid rgba(204,174,102,.25);
}

nav{
  
  background-color:rgba(255,255,250,0.9);
}
.navbar{

  padding: .2rem;
}

.navbar-nav li{
  padding-right: 30px;
}
.navbar-nav >.nav-item>.nav-link{
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
}

.navbar-nav >.nav-item>.nav-link>a:hover{
  color: #ccae66 !important;
}
.navbar-nav >.nav-item>.nav-link>.nav-item-dropdown-arrow{
  transform: rotateZ(90deg);
  width: fit-content;
  font-size: 1.7em;
  position: absolute;
  top: 0.9em;
}

.nav-item{
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.nav-item:hover >.nav-menu-list {
  display: block;
  color:#ccae66;
}

.nav-item >.nav-menu-list{
  padding: 0 1rem;
  display: none;
  list-style: none;
  background-color: rgba(255,255,255, 0.9);
  box-shadow: rgba(255,255,255, 0.9) 0 0 2px 1px;
  width: 100px;
  position: absolute;
  top: 2.2em;
}
.nav-menu-list> hr{
  margin: 0;
}
.nav-item >.nav-menu-list>.nav-menu-list-item{
  padding: 0;
}
.nav-item >.nav-menu-list>.nav-menu-list-item>.nav-link{
  text-align: center;
  padding:0.5rem 0;
  color:#ccae66;
}





.carousel-inner img{
  width: 100%;
}

.carousel-caption{
  position: absolute;
  top: 50%;
  transform: translateY(-40%);
}

.carousel-caption h1{
  font-size: 400%;
  font-weight: 500;
  
  
}

.carousel-caption h3{
  font-size: 200%;
  font-weight: 500;
  
  padding-bottom: 1rem;
} 


.btn-primary{
  background-color: #CCAF66;
  border: 1px solid #CCAF69;
}

.btn-primary:hover{
  background-color: #c9a344;
  border: 1px solid #ad8c3e;
}

.btn-outline-secondary:hover{
  background-color: #c9a344;
  border: 1px solid #ad8c3e;
}

.jumbotron{
  background-color: #d4c08e;
  padding: 1rem;
  border-radius: 0;
}

.padding{
  padding-top: 2em;
  padding-bottom: 0.1rem;
}

.text-padding{
  padding-left:1.5rem; 
  padding-right:1.5rem; 
}


.welcome hr{
  border-top:2px solid #c9a344;
  width: 95%;
  margin-top: .3rem;
  margin-bottom: 1rem;
}


.fa-code{
 color: #e54d26;
}

.fa-bold{
  color: #563d7c;
}
.fa-css3{
  color: #2163af;
}
.fa-code,.fa-css3,.fa-bold
{
  font-size: 4rem;
  margin: 1rem;
}

.fun{
  width: 100%;
  margin-bottom: 2rem;
}

.row{
  margin-left: 0;
  margin-right: 0;
}

footer{
  background-color: #caa54f;
  color: #080808;
  padding-top:2rem;
}

hr.light{
  border-top:1px solid #ffffff;
  width: 75%;
  width: 100%;
  margin-top:.8rem ;
  margin-bottom: 1rem;
}



@media (max-width: 992px) {

  .nav-item:hover >.nav-menu-list {
    display: none;
    color:#ccae66;
  }

.social a{
  font-size: 4em;
  padding: 2em;
}

.carousel-caption h1{
  font-size: 250%;
}

.carousel-caption h3{
  font-size: 140%;
  font-weight: 400;
  padding-bottom: .2rem;
}

  }
@media (max-width: 768px) {
  .nav-item:hover >.nav-menu-list {
    display: none;
    color:#ccae66;
  }

  .carousel-caption{
    top: 45%;
  }
  
  .carousel-caption h1{
    font-size: 200%;
  }
  
  .carousel-caption h3{
    font-size: 140%;
    font-weight: 400;
    padding-bottom: .2rem;
  }
  .carousel-caption .btn{
    font-size: 95%;
    padding:8px 14px;
  }
  .display-4{
    font-size:200% ;
  }
  .social a{
    font-size: 2.5em;
    padding: 1.2em;
  }
  

  .carousel-item h2{
    font-size:200%;
  }


  .carousel-item h4{
    font-size:200%;
  }

  .carousel-item {
    font-size:80%;
  }
  .container-fluid{
    font-size:100%;
  }

  .footer-bottom-item h6{
    font-size: 90%;
  }

  .container {
    font-size:80%;
  }
}




@media (max-width: 576px) {
  .carousel-caption{
    top: 40%;
  }
  
  .carousel-caption h1{
    font-size: 220%;
  }
  
  .carousel-caption h3{
    font-size: 110%;
  }
 .btn{
    font-size: 90%;
    padding:4px 8px;
  }
  .carousel-indicators{
    display: none;
  }

  .display-4{
    font-size:160% ;
  }

  .social a{
    font-size: 2em;
    padding: .7em;
  }

  .carousel-item {
    font-size:70%;
  }
  .container-fluid{
    font-size:90%;
  }

  .container h2{
    font-size:160%;
  }
  .container h4{
    font-size:160%;
  }

  .featurette h4{
    font-size:130%;
  }
 

}

.footer-item{
  padding: 1rem 5rem !important;
}

.footer-item h4{
  font-size:160%;
}

.footer-item h5{
  font-size:140%;
}

.footer-bottom-item{
  padding: 1rem 3rem !important;
}

.footer-bottom-item h6{
  font-size: 90%;
}


.carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

figure {
  position: relative;
  width: 100%;
  height: 60vh;
  margin: 0!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fixed {
  background-image: url('404.png');
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}

[class*="col-"] {
    padding: 1rem;
}

.navbar-nav-container{
  flex-grow: 0;
}

.main-carousel-container>.main-carousel-indicator-container>.main-carousel-indicator{
  width: 80px;
  height: 2px;
  background-color: #ccae66;
}
.main-carousel-container>.main-carousel-indicator-container>.main-carousel-indicator.active{
  background-color: #ddd;
}

.PPGS-carousel-container{
	display: flex;
    flex-flow: row nowrap;
    justify-content: center;
	align-items:center;
}
.PPGS-carousel-container > .PPGS-carousel-indicators>.PPGS-carousel-item{
  width:80px;
  height:3px;
  background-color: #ddd;
}

.PPGS-carousel-container > .PPGS-carousel-indicators>.active{
  background-color: #333 !important;
}

.PPGS-carousel-container>.carousel-control-prev, .PPGS-carousel-container>.carousel-control-next{
  height: 50px;
  width: 50px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.PPGS-carousel-container>.carousel-control-prev{
  left:20px;
}
.PPGS-carousel-container>.carousel-control-next{
  right:0wopx;
}
.PPGS-carousel-container>.carousel-inner{
	width:90%;
}
.HZPP-container{
	display:flex;
	flex-flow:row wrap;
	justify-content: space-between;
	align-content: center;
}
.HZPP-container .HZPP-container-img-container{
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.HZPP-container >.HZPP-container-item{
	width:18%;
}

.JRZH-link-container{
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.JRZH-link{
  width:fit-content;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}
.JRZH-link>.JRZH-link-text{
  color: #CCAE66;
  font-size:1rem;

}
.JRZH-link>.JRZH-link-img{
  margin-left:1em;
}

.JRWM-imgs{
  margin-left: -15px;
  width: calc(100% + 15px)
}
.JRWM-imgs>.JRWM-img-container{
  width: 560px;
  padding: 15px;
}
.JRWM-imgs>.JRWM-img-container>.JRWM-img{
  width:100%;
}

.NSYW-container{
  width:100%;
  background: no-repeat url('404.png') ;
  padding:6em 0 8em 0;
}
.NSYW-container>.NSYW-item{
  
  font-size:0.8em;
  text-align: center;
}
.NSYW-container>.NSYW-title{
  font-size: 1.4em;
  color: #CCAE66;
  margin-bottom:1em;
}

.DSYW-container{
	display:flex;
	justify-content: center;
	align-items: flex-start;
}
@media only screen and (max-width: 600px)  {
	.DSYW-container p{
		font-size:12px;
	}
	.DSYW-container h4{
		font-size:14px;
	}
	.DSYW-container .row >div{
		padding: 0.1rem;
	}
}
.DSYW-inner-container{
	width: 80%;
	margin-top:50px;

}
.DSYW-inner-container > div{

	
}
.DSYW-inner-container > .first-line, .DSYW-inner-container > .second-line{
	width: 100%;
}






.about-al{
  
}