@charset "utf-8";
 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}ol,ul,dl{list-style:none}img{border:0}table{border-spacing:0;border-collapse:collapse}input,textarea,select{font:12px 'Microsoft YaHei',simsun,tahoma;outline:0}a{text-decoration:none;color:#2f2f2f;outline:0}a:hover{text-decoration:none}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}.clearfix:after{display:block;height:0;font-size:0;visibility:hidden;clear:both;content:''}.clearfix{zoom:1}.clear{clear:both}.hidden{line-height:99999px;overflow:hidden}.relative{position:relative}.fl{float:left}.fr{float:right}.fz14{font-size:14px}.mt20{margin-top:20px}

@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,20%,0);transform:translate3d(0,20%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,20%,0);transform:translate3d(0,20%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
.slogan {opacity:0;-webkit-transform:translate3d(0,20%,0);transform:translate3d(0,20%,0)}
.fadeInUp .slogan, .fadeInUp .main-01-cont,.fadeInUp .grain-species,.fadeInUp .professional-grain,.fadeInUp .general-grain,.fadeInUp .theseis-mod{opacity:1;-webkit-animation:fadeInUp 1s forwards;animation:fadeInUp 1s forwards}

@-webkit-keyframes ani_arrow_top {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}
@keyframes ani_arrow_top {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}
@-webkit-keyframes ani_arrow_bottom {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}
@keyframes ani_arrow_bottom {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}

body{ min-width:1200px; background:#000; color:#e6dec3; font:14px/1.8 "Microsoft Yahei";}

.sidebar{position:fixed; top:50%; left:7%; z-index:10; width:248px; }
.sidebar a{ display:block; width:248px; height:35px; background:url(../images/sidenav.png) no-repeat;}
.sidebar a.s1 { background-position: 0 0;}
.sidebar a.s2 { background-position: 0 -52px; margin-top:17px;}
.sidebar a.s3 { background-position: 0 -104px; margin-top:17px;}
.sidebar a.s4 { background-position: 0 -163px; margin-top:17px;}
.sidebar a.s4.on, .sidebar a.s4:hover{ background-position: -248px -163px;}
.sidebar a.s3.on, .sidebar a.s3:hover{ background-position: -248px -104px;}
.sidebar a.s2.on, .sidebar a.s2:hover{ background-position: -248px -52px;}
.sidebar a.s1.on, .sidebar a.s1:hover{ background-position: -248px 0;}


.wrapper{position:relative;width:1200px;height:100%;margin:0 auto}
.wrapper h3{padding:70px 0 10px;color:#89765a;font-size:16px;text-align:center;line-height:1}
.wrapper h3 span{display:block;color:#f9e29a;background-image:-webkit-linear-gradient(top,#f9e29b 0,#f9e29b 20%,#eecf70 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:48px}
.wrapper h3 b{display:block;padding-top:5px;font-weight:400;font-variant:small-caps;font-family:Arial}
.header{position:relative;height:872px;background:url(https://img8.99.com/zf/activity/2018/01/grain/img/header01.jpg) center top no-repeat}
.header h2{display:none}
.logo{position:absolute; top:80px; left:10%; z-index:5; width:300px}
.logo img{width:100%}


/*nav*/
.navbar { position:absolute; top:0; left:0; z-index:10; width:100%; background:#14120e;}
.nav { width: 995px; height: 62px; margin: 0 auto; padding-top: 10px; }
.nav li { float: left; width: 142px; text-align: center; font-size: 18px; }
.nav li span { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; width: 30px; height: 30px; background: url(../images/icon.png) no-repeat 0 0; margin-right: 5px; }
.nav li a { display: block; width: 100%; height: 62px; line-height: 62px; text-transform: uppercase; color: #fff; }
.nav li a:hover { background: url(../images/navhover.png) no-repeat center bottom; color: #7e3e0f; }

.nav li span.ic1 { background-position: -9px -5px; }
.nav li a:hover span.ic1 { background-position: -9px -57px; }

.nav li span.ic2 { background-position: -404px -8px; }
.nav li a:hover span.ic2 { background-position: -404px -60px; }

.nav li span.ic3 { background-position: -78px -8px; }
.nav li a:hover span.ic3 { background-position: -78px -60px; }

.nav li span.ic4 { background-position: -446px -7px; }
.nav li a:hover span.ic4 { background-position: -446px -59px; }

.nav li span.ic5 { background-position: -496px -7px; }
.nav li a:hover span.ic5 { background-position: -496px -59px; }

.nav li span.ic6 { background-position: -540px -7px; }
.nav li a:hover span.ic6 { background-position: -540px -59px; }

.nav li span.ic7 { background-position: -575px -7px; }
.nav li a:hover span.ic7 { background-position: -575px -59px; }


.scene, .layer { display: block; height: 100%; width: 100%; padding: 0; margin: 0; }

.scene { position: absolute; left: 0; top: 0; z-index: 1;  overflow: hidden; }

.layer { position: absolute; }
.layer div {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden; }
	
.bg1 { width: 100%; height: 1100px; background: url(../images/float.png) no-repeat center top; }


.main1{position:relative;height:1100px;background:url(../images/bg1.jpg) center top no-repeat;}
.main2{position:relative;height:1100px;background:url(../images/bg2.jpg) center top no-repeat;}
.main3{position:relative;height:1100px;background:url(../images/bg3.jpg) center -68px no-repeat;}
.main4{position:relative;height:1100px;background:url(../images/bg4.jpg) center top no-repeat;}

.slogan { position:absolute; top:50%; left:33%; }

.slogan1 { width:584px; height:174px; background: url(../images/slogan1.png) no-repeat center top; }
.slogan2 { width:668px; height:162px; background: url(../images/slogan2.png) no-repeat center top; }
.slogan3 { width:668px; height:160px; background: url(../images/slogan3.png) no-repeat center top; }
.slogan4 { width:668px; height:160px; background: url(../images/slogan4.png) no-repeat center top; }

.btn-des-box {position:absolute; top:67%; left:48%; width: 120px; margin: 50px auto 0; z-index:2; }
a.detailbtn { display: block; width: 120px;  width: 100%; height: 40px; line-height: 40px; font-size: 16px; color: #fff; text-align: center;  z-index:2;}
.detailbtn::before {
    top: -25px;
    width: 128px;
    margin-left: -64px;
    background: url(../images/icon-arrow-top.png) 50% 0 no-repeat; -webkit-animation: ani_arrow_top 1.2s linear alternate infinite both;
    animation: ani_arrow_top 1.2s linear alternate infinite both;}

.detailbtn::after {
    bottom: -25px;
    width: 50px;
    margin-left: -25px;
    background: url(../images/icon-arrow-bottom.png) 50% 0 no-repeat; -webkit-animation: ani_arrow_bottom 1.2s linear alternate infinite both;
    animation: ani_arrow_bottom 1.2s linear alternate infinite both;
}

.detailbtn::before, .detailbtn::after {
  content: "";
  position: absolute;
  left: 50%;
  height: 25px;
}


.homebtn { display:block; z-index:2; }



/*footer*/
.footer{ width: 100%; padding: 20px 0; position: relative; }
.footer table{ width: 100%; color: #fff;  margin: 0 auto;}
.footer table a{ margin: 0 5px; color: #fff; }
.footer table a:hover{text-decoration: underline;}

/**
 * mask-cont-items
 */
.mask-close {
  position: absolute;
  z-index: 50;
  right: 165px;
  top: 100px;
  width: 55px;
  height: 55px;
  font-size: 0;
  text-indent: -9999px;
  background: url(../images/icon-close.png) 50% 0 no-repeat;
  cursor: pointer;
}

/*.des-mask {
  display: none;
  position: absolute;
  z-index: 201;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}*/
.des-mask.show {
  display: block;
}
.des-mask .page-tit {
  position: relative;
  left: 0;
  bottom: 0;
  padding-top: 100px;
  margin-bottom: 50px;
}
.des-mask-item {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  display: none;
}
.des-mask-item.show {
  z-index: 10;
  display: block;
}
.des-mask-item-1 {
  background: url(../images/bg1-grey.jpg) 50% 0 no-repeat;
}
.des-mask-item-2 {
  background: url(../images/bg2-grey.jpg) 50% 0 no-repeat;
}
.des-mask-item-3 {
   background: url(../images/bg3-grey.jpg) 50% 0 no-repeat;
}
.des-mask-item-4 {
   background: url(../images/bg4-grey.jpg) 50% 0 no-repeat;
}


.des-mask-cont {
  position: relative;
  width: 1000px;
  height: 100%;
  margin: 0 auto;
}
.des-mask-scroll {
  padding-right: 80px;
  height: 450px;
  overflow-x: hidden;
  overflow-y: auto;
}
.des-mask-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.3);
}
.des-mask-scroll::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
.des-mask-scroll::-webkit-scrollbar-corner {
  display: block;
}
.des-mask-scroll::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  background-color: #ffffff;
  border-radius: 4px;
}
.des-mask-tit {
  text-align: left;
  font-size: 32px;
  color: #f4cb73;
  font-weight: bold;
  border-bottom: 1px solid #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.des-mask-tit span {
  text-transform: uppercase;
  font-size: 16px;
  color: #f4cb73;
  vertical-align: bottom;
}
.des-mask-table {
  font-size: 14px;
  margin-bottom: 30px;
}
.des-mask-table table {
  width: 100%;
}
.des-mask-table th, .des-mask-table td {
  vertical-align: middle;
  border: 1px solid #978956;
}
.des-mask-table th {
  height: 34px;
  line-height: 34px;
  background-color: #f4cb73;
  color: #000000;
  font-size: 15px;
}
.des-mask-table td {
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  padding: 10px 6px;
}
.des-mask-table td p {
  opacity: 0.5;
  line-height: 16px;
}
.des-mask-table img {
  margin-right: 10px;
}
.des-mask-story {
  font-size: 14px;
  line-height: 24px;
  color: #fefefe;
  text-align: left;
}
.des-mask-tips {
  font-size: 14px;
  color: #fefefe;
  margin-bottom: 20px;
}




.page-tit {
  position: absolute;
  z-index: 10;
  left: 0;
  bottom: 160px;
  width: 100%;
  text-align: center;
}
.page-tit.slideIn {
  -webkit-animation: slideIn 0.6s both;
          animation: slideIn 0.6s both;
}
.page-tit.slideOut {
  -webkit-animation: slideOut 0.6s both;
          animation: slideOut 0.6s both;
}
.page-tit p {
  font-size: 48px;
  color: #ffffff;
  font-weight: bold;
  line-height: 1.0em;
}
.page-tit p span {
  display: block;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: normal;
}
.page-tit .btn-des-box {
  position: relative;
  width: 120px;
  margin: 50px auto 0;
}
.page-tit .btn-des {
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  text-align: center;
}
.page-tit .btn-des::before, .page-tit .btn-des::after {
  content: "";
  position: absolute;
  left: 50%;
  height: 25px;
}