*{ margin:0; padding:0; box-sizing: border-box; list-style-type: none;text-decoration: none; }
body {font-family: Arial;background:hsla(0, 20%, 50%, 0.15);font-size:0.9em;}


  .header1{line-height: 32px; background:#f7f7f7;overflow: hidden; height:32px; color: hsla(0, 50%, 50%, 1); }
  .header1 .mail1 { letter-spacing: 1px;  margin: 0  0 0 12px; }
  .header1 h5 {animation:mymove3 10s linear infinite alternate; }
  @keyframes mymove3{0% {}20% {color:black;}45% {width:99%;}100%  {width:1%;} }



.top1 {width: 100%;position: relative;background:url(top1-1.png) no-repeat;background-size: 100% 100%; animation:mymove 2s linear infinite alternate;}
.top1-1 {float: left;width: 10%;}
.top1 img {margin:0 0 0 100%; max-width: 100%;height: auto;animation:mymove1 5s linear infinite alternate;}
@keyframes mymove{0% {}100%  {background:url(top1-2.png) no-repeat;background-size: 100% 100%;} }
@keyframes mymove1{0% {}100%  {transform:rotateY(1080deg);} }

.top1-2 {position: absolute;bottom: 0; left: 0; background-image: linear-gradient(yellow, #FFFFFF);transition: 0.5s ease;
  opacity: 0.2;width: 0;height: auto;animation:mymove2 2s linear infinite alternate;}
@keyframes mymove2{0% {}100%  {opacity: 0;width: 100%;padding: 50% 50%;} }







nav  {position:relative; overflow: hidden; margin: 60px 0px;}
.nav1 {width: 80%;margin: 0 auto;text-align: center;}
.nav1 li {float: left;font-size:1.1em;  letter-spacing: 1px; }
.nav1 li a {display: inline-block;color: black;text-align: center;padding: 10px 16px; transition:all 0.2s; border-bottom: 1px dotted hsla(0, 0%, 0%, 0.3);}
.nav1 a:hover {color: #fa3d03;border-bottom: 1px groove #fa3d03;}
.nav2 {position: absolute;left: 42%;}
.nav2 a {color: #fa3d03; padding: 8px 0; font-size:1.2em; transition:color 0.2s,border 0.5s;}




/* 左列 */
.leftsection {float: left;width: 75%;padding: 0px 40px;}


.slideshow-container {width: 100%;  position: relative; background:url(bg.jpg) no-repeat;background-size: 100% auto; overflow: hidden;}
.slideshow-container img {max-width: 100%; height: auto;display: block;overflow: hidden;}
.mySlides {display:block}
.fade {animation-name: fade;animation-duration: 2.5s;}
@keyframes fade{0% {opacity: 0;transform:rotate(720deg);}  30% {transform:none;}  100% {opacity: 1} }
.numbertext { color: #f2f2f2; background: hsla(0, 7%, 0%, 0.6); padding: 3px;position: absolute;top: 0;left: 0;}
.text {color: #f2f2f2;padding: 8px 0;position: absolute;bottom: 8px;text-align: center;width: 100%; background: hsla(0, 7%, 0%, 0.5);}
.prev, .next {cursor: pointer;position: absolute;top: 50%;width: auto; margin-top: -22px;  transition: 0.6s ease; opacity: 0.5;}
.next {right: 0;}
.prev:hover, .next:hover {opacity: 1;}

.leftsection4 {float: left;width: 38%;text-align: center;line-height:30px; margin: 50px 0 0 0; padding: 20px;}
.leftsection4 h1 {transition:color 1s; padding-bottom: 30px;}
.leftsection4 p {font-style: oblique;color: #FF0000;letter-spacing: 2px;text-align: justify; padding-bottom: 10px;}
.leftsection4 img {max-width: 100%;height: auto;display: block;	}
.leftsection4 p:hover {opacity: 0.9;color: black;}

.leftsection5 {float: left;width: 61%;margin: 40px 0 0 0;padding: 50px;text-align: center; letter-spacing: 1px;line-height:30px; text-align: justify;}
.leftsection5 h2 {color:DeepPink ; padding-bottom: 30px;line-height:35px;}

.leftsection8  {width: 100%;position: relative;top: 50px; overflow: hidden;}
.leftsection8 img {max-width: 100%;height: auto;display: block;}
.leftsection8:after {content: "";background: #f1f1f1;display: block;position: absolute;padding-top: 300%;padding-left: 350%;
  margin-left: -20px !important;margin-top: -120%;opacity: 0;transition: all 0.8s}
.leftsection8:hover:after {padding: 0; margin: 0;opacity: 1;transition: 0s;}

.leftsection9  {width: 100%;text-align: center; padding: 60px 40px;letter-spacing: 1px; column-count: 3; margin-top: 60px;  line-height:30px; text-align: justify;}
.leftsection9 h2 {color:DeepPink ;column-span: all;  padding-bottom: 40px;line-height:35px;}



.leftsection11  {width: 100%;padding: 40px;text-align: center;line-height:30px; letter-spacing: 1px;}
.leftsection12 {float: left;width: 50%;}
.leftsection12 img {max-width: 100%;height: auto;display: block;}
.leftsection11 h2{color:red;}
.leftsection14 {text-align: justify;letter-spacing: 2px;color:DarkBlue ;}
.leftsection14 span {color:red; }
.leftsection15 {color:DeepPink; }
.leftsection15-1 {border: 1px groove  #FFF; padding:  10px; line-height: 50px}
.leftsection15-1 h2{etter-spacing: 4px;}
.leftsection17 {color:#8B0000; }
.leftsection18 {color:Blue;text-align: center; }
.leftsection19 {color:red;text-align: center;}








/* 右列 */
.rightsection {float: left;width: 25%;padding: 0 40px;border-left: 1px dotted hsla(0, 0%, 0%, 0.2); letter-spacing: 1px;line-height:30px;}

.rightsection-card {text-align: center;}
.rightsection-card h2, .rightsection-card h3 , .rightsection-card h1 {font-style: oblique;color: #fa3d03;}
.rightsection-card  p {color: black;line-height:30px;}
.rightsection img {width: 100%;height: auto;display: block;}
.rightsection img:hover {opacity: 0.8;}

.rightsection-card1 {text-align: center;}
.rightsection-card1 h1 {font-style: oblique;color: #fa3d03;}

.rightsection-card2 {text-align: center; color: red;}
.rightsection-card2 h1 {font-style: oblique; }
.rightsection-card2 p {text-transform: uppercase; }










 .top2 {max-width: 100%;height: auto;position: relative;}
 .top2 img {display: block;max-width: 100%;height: auto;}
 
 .top2-1 {position: absolute;left: 45%;bottom: 15%;width: 12%;background-color: #4CAF50;color: #FFFFFF;padding: 15px;
   border-radius: 8px;text-align: center;transition-duration: 0.4s;overflow: hidden;box-shadow: 0 2px #999,0 3px  3px black;
   border: 1px groove #FFF;transition:border 0.5s;display: block;}
 .top2-1 a {color: #FFFFFF;display: block;text-decoration:none; }
 
 .top2-1:after {content: "";background: #f1f1f1;display: block;position: absolute;padding-top: 300%;padding-left: 350%;
   margin-left: -20px !important;margin-top: -120%;opacity: 0;transition: all 0.8s}
 .top2-1:hover:after {padding: 0; margin: 0;opacity: 1;transition: 0s;}
 .top2-1:hover{border: 1px groove #FFF;}






.article {padding: 10px 27%;text-align: center;transition:all 1s;line-height:40px; color: #fa3d03; }
.article h3 {letter-spacing: 2px;}
.article p {letter-spacing: 2px;text-align: justify;}




.footer {border-top: 1px groove  #FFF;padding: 20px;text-align: center; line-height: 40px }
.footer a {color:black;font-weight: 600;}


.footer1 {float: left;width: 50%; margin: 0 auto;}

.footer2 img {max-width: 100%;height: auto;display: block;margin: 0 auto;}

.footer3 {width: 20%;height: auto; background: #8B0000 ; padding:40px 10px; border-radius:5px;	margin: 3% auto;
border: 1px groove  #FFF;box-shadow: 0 4px #999,0 5px  5px black;transition:all 0.3s;}
.footer3:hover{background:#1ec7e6;padding:40px 15px; width: 30%; transform: rotate(360deg);}










/* 上拉文字 */
.tooltip {position: relative;display: inline-block;}
.tooltip .tooltiptext {visibility: hidden;width: 100%;background-color: black;text-align: center;border-radius: 6px;
  padding: 10px 0;position: absolute; z-index: 1;bottom: 80%;left: 0;}
.tooltip .tooltiptext::after {content: "";position: absolute;top: 100%;left: 50%;border-width: 1px;
  border-style: solid;border-color: black transparent transparent transparent;}
.tooltip:hover .tooltiptext {visibility: visible;}
.tooltip h2:hover {opacity: 0.8;}


/* 下拉图片 */
.dropdown {position: relative;display: inline-block;}
.dropdown img {max-width: 100%;height: auto;display: block;margin: 0 auto;}
.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;width: 60%;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;border: 1px groove #FFF;}
.dropdown:hover .dropdown-content {display: block;}
.desc {padding: 25px;text-align: center;}







.clearfix:after {content: "";display: table;clear: both;}
.clearfix1::after {content: "";clear: both; display: table;}

.img {width: 70%;margin: 50px auto;}
.img img {max-width: 100%;height: auto;display: block;}
.img:hover {opacity: 0.8;}

.box99 {position: relative;overflow: hidden;}
.box99 img {max-width: 100%;height: auto;display: block;}
.overbox99 {background-color: hsla(0, 0%, 11%, 0.3); position: absolute;top: 0;left: 0;color: #fff;z-index: 1;
    transition: all 300ms ease-out;opacity: 0;width: 100%;padding: 18% 0;}
.box99:hover .overbox99 { opacity: 1; }
.overtext99 {transition: all 300ms ease-out;transform: translateY(40px);}
.title99 {transition-delay: 0.1s;transition-duration: 0.2s;background: rgba(0, 0, 9, 0.62);text-align: center;padding: 15px 0;}
.box99:hover .title99 {opacity: 1;transform: translateY(0px); }







@media screen and (max-width: 1280px) {
	body{font-size:0.8em;}
.nav2 {display: none}
.leftsection4 {padding: 10px 0;}
   .leftsection5 {padding: 10px 0 0 20px;}
   .leftsection9  {padding: 60px 0;}
   .leftsection11  {padding: 10px 0;}
   .rightsection-card1 {display: none;}
   .article {padding: 10px 20%; }

} 





@media screen and (max-width: 992px) {
	body{font-size:0.7em;}
nav  {margin: 35px 0px;}
.nav1 {width: 90%;}
  .nav1 li {float: none;width: 100%;}
  .nav1 li a {padding: 8px 0;display: block;}
  
  
  
  
  
  .leftsection{width: 100%;}
    .leftsection {padding: 0px 5px;}

  .leftsection4 {float: none;width: 100%;}
  .leftsection4 img {display: none;	}
   .leftsection5 {float: none;width: 100%; padding: 10px 0;}
   .leftsection9  {display: none}
   .leftsection12 img {display: none;}
  .img {max-width: 100%;}

    .rightsection{display: none;}



  .top2-1 {width: 32%; }
.article {padding: 10px 2%;}

  .footer3 {width: 55%;padding:10px 3px; }
  .footer3:hover{padding:10px 3px; width: 60%; }


  .footer1 {display: none;}
  .article {padding: 10px 10%; }

  } 
  



  @media screen and (max-width: 600px) {
	  body{font-size:0.6em;}
    .top2-1 { padding: 0;}
	.article {padding: 10px 5%; }
	
    }