@charset "UTF-8";
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul{
  list-style: none;
}
a{
  text-decoration: none;
  color: inherit;
}
img{
  max-width: 100%;
  display: block;
}


table {
  border-collapse: collapse;
  border-spacing: 0;
}

@font-face {
  font-family: "YuGothM";
  src: url("../font/YuGothM.ttc");
}
@font-face {
  font-family: "YuGothB";
  src: url("../font/YuGothB.ttc");
}
body{
  font-family: "YuGothM", sans-serif; 
  color: #222;
  font-size: 18px;
  line-height: 26px;
}


.site-header { width: 100%; background: #fff;}
.site-header .w1200{ max-width: 1200px; height: 74px;  display: flex; justify-content: space-between; align-items: center; margin: 0 auto;}

.site-header .btn{ width: 130px; height: 41px; background: url(../images/btn01.png) no-repeat; font-size: 15px; line-height: 42px; text-align: center; color: #fff; }
.site-header .btn:hover{ font-weight: 700;}

.banner-section{ width: 100%; height: 45vw;  display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column;
  background: url(../images/banner.png) no-repeat center top; background-size: 100% auto;
}
.banner-section h1 { width: 100%; font-size: 2.7vw; line-height: 5.2vw; text-align: center; color: #fff; text-shadow: 0 0 15px rgba(0,0,0,0.5);}
.banner-section img { width: 44.6vw; margin: 0 auto;}

.part01{ 
  background-color: #fff;
  background-image: url(../images/bg01.png), url(../images/bg02.png);
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right top;
  background-size: 20% auto, 20% auto ;
}
.part01 ul{ max-width: 1080px; padding: 220px 0 1px; margin: 0 auto; background-color: #fff;}
.part01 ul li{ display: flex; flex-direction: row; margin-bottom: 200px;}
.part01 ul li .img{ order: 2; margin-left: -105px;}
.part01 ul li .txt{ width: 820px; order: 1;}
.part01 ul li .txt h2{ padding-left: 36px; margin-bottom: 20px; background: url(../images/line.png) no-repeat left bottom;
  font-size: 46px; line-height: 80px; font-family: 'YuGothB';
}
.part01 ul li .txt p{ padding-left: 36px; font-size: 30px; line-height: 52px; }

.part02{  padding-bottom: 30px;
  background-color: #fffff5;
  background-image: url(../images/bg01.png), url(../images/bg02.png);
  background-repeat: no-repeat, no-repeat;
  background-position: left bottom, right bottom;
  background-size: 20% auto, 20% auto ;
}
.part02 h2{ padding: 100px 0; font-size: 32px; line-height: 56px; color: #1eaa39; font-family: 'YuGothB'; text-align: center;}
.part02 .table{ max-width: 1080px; margin: 0 auto 36px; background-color: #fffff5;}
.part02 table{ width: 100%; margin-bottom: 36px; border: 1px solid #b0b0b0; background-color: #fff; font-size: 18px; line-height: 36px; box-sizing: border-box;}
.part02 table tr{ border: 1px solid #b0b0b0;}
.part02 table tr th{ width: 220px;  padding: 20px 0; background-color: #eff9f1;}
.part02 table tr td{ padding: 20px 20px 20px 60px;}
.part02 table tr td .p01{ margin-left: 300px;}
.part02 .btn{ display: block; width: 241px; height: 61px; margin: 100px auto; background: url(../images/btn.png) no-repeat; font-size: 26px; line-height: 62px; text-align: center; color: #fff; }
.part02 .btn:hover{ font-weight: 700;}
.part02 .copyright{ font-size: 12px; line-height: 36px; color: #000; text-align: center;}



@media screen and (max-width:1300px){ 
  .site-header .w1200{ padding: 0 5vw;}  
}
@media screen and (max-width:1200px){ 
  .site-header .w1200{ padding: 0 5vw;}  
  .part01 ul{ padding: 10vw 5vw 1px;}
  .part01 ul li{ margin-bottom: 10vw;}
  .part01 ul li .img{ width: 35%; margin-left: -10%;}
  .part01 ul li .txt{ width: 75%;}
  .part01 ul li .txt h2{ padding-left: 2vw; margin-bottom: 1vw; font-size: 3.6vw; line-height: 8vw;}
  .part01 ul li .txt p{ padding-left: 2vw; font-size: 2.6vw; line-height: 5vw; }

  .part02 h2{ padding: 5vw 0; font-size: 2.4vw; line-height: 5vw; }
  .part02 .table{ padding: 0 5vw; margin: 0 auto 2vw; }
  .part02 table{ margin-bottom: 2vw; font-size: 14px; line-height: 26px; }
  .part02 table tr th{ width: 100px;}
  .part02 table tr td{ padding: 12px;}
  .part02 table tr td .p01{ margin-left: 228px;}

}

@media screen and (max-width:800px){ 
  .site-logo{ height: 24px;}
  .site-header .btn{ width: 100px; height: 30px; background-size: 100% 100%; font-size: 12px; line-height: 30px;}
  .banner-section{ height: 80vw; padding-bottom: 20vw; background-size: 110% 100%; background-position: left  top;}
  .banner-section h1 { font-size: 5vw; line-height: 10vw; }
  .banner-section img { width: 60vw; }
  .part02 h2{ padding: 6vw 5vw; font-size: 3.6vw; line-height: 5vw; }
  .part02 table{ margin-bottom: 2vw; font-size: 12px; line-height: 20px; }
  .part02 table tr th{ width: 80px;}
  .part02 table tr td{ padding: 12px 4px 12px 12px;}
  .part02 table tr td p{ margin-bottom: 6px;}
  .part02 table tr td .p01{ margin-left: 0;}
  .part02 table tr td span{ display: block;}
  .part02 .btn{ margin: 12vw auto; width: 140px; height: 40px; background-size: 100% 100%; font-size: 16px; line-height: 40px; }
  .part02 .copyright{ font-size: 10px; line-height: 20px;}
}


/*公用样式   结束*/
/* 基础规则 Trigger初始透明 */
.fadeInTrigger,
.fadeUpTrigger,
.fadeLeftTrigger,
.fadeRightTrigger,
.zoomInTrigger{
  opacity: 0;
}

/* 原有动画 */
.fadeIn {
  animation: fadeIn 1.6s ease-out forwards;
  opacity: 0;
}
@keyframes fadeIn {
  from{opacity:0;}
  to{opacity:1;}
}
.fadeUp {
  animation: fadeUp 1.2s ease-out forwards;
  opacity: 0;
}
@keyframes fadeUp {
  from{opacity:0;transform: translateY(40px);}
  to{opacity:1;transform: translateY(0);}
}
.fadeLeft {
  animation: fadeLeft 1.2s ease-out forwards;
  opacity: 0;
}
@keyframes fadeLeft {
  from{opacity:0;transform: translateX(-40px);}
  to{opacity:1;transform: translateX(0);}
}
.fadeRight {
  animation: fadeRight 1.2s ease-out forwards;
  opacity: 0;
}
@keyframes fadeRight {
  from{opacity:0;transform: translateX(40px);}
  to{opacity:1;transform: translateX(0);}
}
.zoomIn {
  animation: zoomIn 1.2s ease-out forwards;
  opacity: 0;
}
@keyframes zoomIn {
  from{opacity:0;transform: scale(0.9);}
  to{opacity:1;transform: scale(1);}
}