a{ text-decoration: none; color: #ccc;} 
a:link { color: #ccc; } 
a:visited {color: #AE7617; } 
a:hover{ color: #AE7617; } 
a:active {color: #AE7617; }
html{ overflow-y:scroll;  height:100%;}
body{ margin:0 auto;padding:0; font-size: 0.9rem; color: #ccc;  height:100%;}
ul{ margin:0 auto; padding:0; }
li{ list-style-type: none; }
h1,h2,h3,h4,h5,h6,h7,p,strong,b{ font-weight: normal; margin: 0 auto; padding: 0; }
h1{  font-family: Microsoft YaHei;  }
img{ vertical-align:top; }

.vipt{ margin-top: 100px; }
.bg_eee {
background-size: 20px 20px; background-color: #eee;  
background-image: linear-gradient(-135deg, rgba(255, 255, 255, .1) 25%, transparent 25%,
 transparent 50%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .1) 75%,
 transparent 45%, transparent);}
 
.bg_666 {
background-size: 20px 20px; background-color: #666;  
background-image: linear-gradient(-135deg, rgba(255, 255, 255, .01) 25%, transparent 25%,
 transparent 50%, rgba(255, 255, 255, .01) 50%, rgba(255, 255, 255, .01) 75%,
 transparent 45%, transparent);}


.bg_333 {
background-size: 20px 20px; background-color: #333;  
background-image: linear-gradient(-135deg, rgba(255, 255, 255, .01) 25%, transparent 25%,
 transparent 50%, rgba(255, 255, 255, .01) 50%, rgba(255, 255, 255, .01) 75%,
 transparent 45%, transparent);}

.bg_000 {
background-size: 20px 20px; background-color: #000;  
background-image: linear-gradient(-135deg, rgba(255, 255, 255, .03) 25%, transparent 25%,
 transparent 50%, rgba(255, 255, 255, .03) 50%, rgba(255, 255, 255, .03) 75%,
 transparent 45%, transparent);}
 
.bg_black {
background-size: 30px 30px; background-color: #111;  
background-image: linear-gradient(-135deg, rgba(255, 255, 255, .01) 25%, transparent 25%,
 transparent 50%, rgba(255, 255, 255, .01) 50%, rgba(255, 255, 255, .01) 75%,
 transparent 45%, transparent);}

.bg_zong {
background-size: 30px 30px; background-color: #AE7617;
background-image: linear-gradient(-135deg, rgba(255, 255, 255, .04) 25%, transparent 25%,
 transparent 50%, rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .04) 75%,
 transparent 45%, transparent);}

.bg_zi {
background-size: 20px 20px; background-color: #7000C6;
background-image: linear-gradient(-135deg, rgba(255, 255, 255, .04) 25%, transparent 25%,
 transparent 50%, rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .04) 75%,
 transparent 45%, transparent);}

 
#page1,#page2,#page3,#page4,#page5,#page6,#page7{ display:nones;}

.menu{ left: 0; top: 0px; height: 8vh; line-height:8vh;  width: 100%;  z-index: 999999999;   background: #7000C6;    overflow: hidden;  display: block;  }
.menu h1{ float:left; overflow: hidden;  display: block; }
.menu h1 img{ height: 60px; margin: 5px; }
.menu p{ float:right; }
.menu p a{ padding: 4px 26px 4px 26px; font-size: 1.3rem; display: block; float:right; color:#fff; }
.menu p a:Hover{ background: #FF0288; color: #fff; }
#wrap{  overflow: hidden;  width: 100%;  height: 100%;}
#main{  top: 0;  position: relative;  width: 100%;  height: 100%;  }
.page{ width:100%;  margin:0;}
#page1{ background: #eee; }
.page1c{ height: 92vh;  overflow: hidden;  display: block; }
.page1l{ width: 40%;  height: 92vh;  float:left;    }
 
.page1lc{ width: 100%;  height: 92vh;  float:left;   background: url(about.jpg) no-repeat; background-size: 100%; }
.page1lcc{ background-size: 30px 30px; background-color: #111;  
background-image: linear-gradient(-135deg, rgba(255, 255, 255, .01) 25%, transparent 25%,
 transparent 50%, rgba(255, 255, 255, .01) 50%, rgba(255, 255, 255, .01) 75%,
 transparent 45%, transparent);
 width: 70%; margin: 5% 10% 10% 10%; padding: 5%;  opacity: 0.8;
 }
.page1lcc h1{ color: #FFFF80; font-size: 2rem; }
.page1lcc p{  text-indent:2rem; font-size: 1rem; color: #fff; margin: 10px 0 10px 0; line-height: 180%; }
.page1r{ width: 60%; float:right; text-align:left;  height: 92vh;   }
.page1r h3{ margin: 20px; border-bottom: 2px #E1B828 solid; padding-bottom: 10px; }
.page1r span{ overflow: hidden;  display: block; }
.page1r span img{ width: 31.33%; margin: 1%; float:left; }

.page1r p{ margin-left: 40px; height: 76px; line-height: 76px; width:46%; margin: 2%; float:left; 
background-size: 30px 30px; background-color: #111;
background-image: linear-gradient(-135deg, rgba(255, 255, 255, .04) 25%, transparent 25%,
 transparent 50%, rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .04) 75%,
 transparent 45%, transparent);
 }
.page1r p img{ height: 66px; margin-top: -8px; }
.page1r p strong{ margin-left: 20px; font-size: 1.2rem; }



.page2l{ width: 40%; float:left; text-align:right;   height: 100vh;
background-size: 30px 30px; background-color: #111;
background-image: linear-gradient(-135deg, rgba(255, 255, 255, .04) 25%, transparent 25%,
 transparent 50%, rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .04) 75%,
 transparent 45%, transparent);
 }
 
.page2r{ width: 60%; float:right; text-align:left;   height: 100vh; }
.page2r img{ height: 100vh; }
#page3{ 
background-size: 30px 30px; background-color: #FF0288;
background-image: linear-gradient(-135deg, rgba(255, 255, 255, .04) 25%, transparent 25%,
 transparent 50%, rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .04) 75%,
 transparent 45%, transparent);
 }
#page3 h3{ padding-top: 60px; font-size: 5rem; text-align: center; display: block; color: #FFFF00; }
#page3 span{ padding-top: 60px; font-size: 3rem; text-align: center; display: block; color: #fff;  }
.im2{ background-size: 30px 30px; background-color: #111;  
background-image: linear-gradient(-135deg, rgba(255, 255, 255, .01) 25%, transparent 25%,
 transparent 50%, rgba(255, 255, 255, .01) 50%, rgba(255, 255, 255, .01) 75%,
 transparent 45%, transparent); width: 25%; text-align: center; margin-top: 180px;  float:left;  }
.page3c{ height: 280px;   margin-top: 20%;  }


.scroll_horizontal{position:relative;width: 100%;height:auto; }
.scroll_horizontal .box{overflow:hidden;position:relative;width: 1100px;height: 320px;margin:0 auto;}
.scroll_horizontal .list{overflow:hidden;width:99999px;}
.scroll_horizontal .list li{float:left;width: 255px; padding: 10px; }


#page4{
background-size: 20px 20px; background-color: #eee;  
background-image: linear-gradient(-135deg, rgba(255, 255, 255, .1) 25%, transparent 25%,
 transparent 50%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .1) 75%,
 transparent 45%, transparent); height: 100vh;
}
#page4 h1,.goods_list h1,.news_list h1{ height: 76px; line-height: 76px; padding-top: 40px; font-size: 4rem; text-align: center; display: block; color: #AE750B; }
#page4 span,.news_list span{ height: 52px; line-height: 52px; font-size: 1.6rem;  text-align: center; display: block; color: #666; }
.page4t{ width: 64%; padding: 1% 18% 1% 18%; overflow: hidden; display:block; }
.page4t a{ width: 15.66%; margin: 0.5%; float:left; height: 56px; line-height: 56px; text-align:center; color: #AE750B; background: #f7f7f7; font-size: 1.1rem; display: block; }
.page4t a:Hover{ background: #AE750B; color: #fff; }

.news_list,.news{ width: 60%;margin: 2% 20% 2% 20%; }
.news_list li{ height: 56px; line-height: 56px;font-size: 1.2rem; border-bottom: 1px #eee solid; padding-left: 10px; padding-right: 10px; }
.news_list li:Hover{ background: #f7f7f7; }
.news_list li a{ color: #666; }
.news_list li a:hover{  color: #AE750B;  }
.news_list li font{ color: #666; float:right; }


.news_lists{  width: 60%;margin: 2% 20% 2% 20%;overflow: hidden; display:block; }
.news_lists h2{ font-size: 1.8rem; padding-left: 20px; height: 52px;  color: #997B15; line-height: 52px; background: #f7f7f7; }
.news_lists li{ height: 44px; line-height: 44px; float:left; font-size: 1rem; width: 47%; border-bottom: 1px #eee solid; padding-left: 1%; margin: 0 1% 0 1%;}
.news_lists li:Hover{ background: #f7f7f7; }
.news_lists li a{ color: #666; }
.news_lists li a:hover{  color: #AE750B;  }
.news_lists li font{ color: #666; float:right; }

.news h1{ height: 56px; line-height: 56px;   font-size: 2rem; text-align: center; display: block; color: #AE750B; }
.newsc{ font-size: 1rem;color: #666; line-height: 180%; border-top: 2px #eee solid; padding-top: 20px; margin-top: 20px; }
.newsc img{ max-width: 100%; }
.newsc h3{ font-size: 1.3rem; color: #7000C6; font-weight: bold; margin: 8px 0 8px 0; }
.newsc h4{ font-size: 1.1rem; color: #AE750B;   margin: 4px 0 4px 0; }
.newsc p{ text-indent : 2em;  }
.newsc strong{ font-size: 1rem; font-weight: bold; }

.im3s{ width: 1200px; height: 400px; margin: 0 auto; padding: 0; }
.im3{ background: url(im3.png);  height: 400px; }
.im3 h3{ width: 1200px; text-align: center; padding-top: 10px; }
.im3c{  overflow: hidden; display:block; padding: 0% 2% 2% 2%; }
.im3c li{  float:left; text-align: center;  }
.im3c li pic{  overflow: hidden; display:block; }
.im3c li pic img{ width: 100%; }
.im3c li p{ height: 56px;line-height: 28px; font-size: 1.2rem; }
.im3c li p a{ color: #FBCD69; }

.im3cs{  overflow: hidden; display:block;  margin-top: 60px; width: 60%; margin: 2% 20% 2% 20%; }
.im3cs li{  float:left; text-align: center; width: 21%; margin: 2%; float:left;  }
.im3cs li pic{  overflow: hidden; display:block; }
.im3cs li pic img{ width: 100%; }
.im3cs li p{ height: 56px;line-height: 28px; font-size: 1.2rem; margin-top: 12px; }
.im3cs li p a{ color: #AE750B; }



#page5{
  background-size: 30px 30px; background-color: #111;  
background-image: linear-gradient(-135deg, rgba(255, 255, 255, .01) 25%, transparent 25%,
 transparent 50%, rgba(255, 255, 255, .01) 50%, rgba(255, 255, 255, .01) 75%,
 transparent 45%, transparent);    height: 100vh;  overflow: hidden; display:block;
}
#page5 p{ margin-top: 20px;}
.page5l{ width: 30%; float:left; text-align: right; padding-top: 30px;  overflow: hidden; display:block; }
.page5r{ width: 62%; float:right; text-align: left; padding: 4%;  overflow: hidden; display:block; }

#page6,#page7{
  background-size: 20px 20px; background-color: #eee;   
background-image: linear-gradient(-135deg, rgba(255, 255, 255, .1) 25%, transparent 25%,
 transparent 50%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .1) 75%,
 transparent 45%, transparent); overflow: hidden; height: 100vh;
}

#page6 h1{ height: 66px; line-height: 66px; padding-top: 66px; font-size: 4rem; text-align: center; display: block; color: #AE750B; }
#page6 span{ height: 76px; line-height: 76px; font-size: 2rem;  text-align: center; display: block; color: #666;  }
.page6c{  overflow: hidden; display:block;  width: 70%; margin: 0 15% 1% 15%; }
.page6c p{  width: 18%; margin: 1%; float:left; }
.page6c p img{ width: 100%;  }

.page6b{ overflow: hidden; display:block; }


.page7l{ width: 40%; float:left; text-align:right; }
.page7lc{ width: 355px; height: 709px; background: url(tel.png); float:right; margin: 40px 120px 40px 40px; }
.page7r{ width: 60%; float: right; text-align:left; height: 100vh; }
.page7r h3{ height: 76px; line-height: 76px; padding-top: 40px; font-size: 4rem; text-align: center; display: block; color: #FFFF00; }
.page7r span{ height: 52px; line-height: 52px; font-size: 2rem;  padding-top: 10px;  text-align: center; display: block; color: #fff; }
.page7r p{ width: 60%; margin: 2% 20% 2% 20%;  font-size: 1.2rem;  text-indent:2rem; color: #eee; line-height: 160%; }

.ewm{ width: 60%; margin: 3% 20% 3% 20%;  }
.ewm pp{ width: 40%; margin: 5%; float:left; text-align: center;  }
.ewm strong{  color: #FFFF00; height: 44px; line-height: 44px; font-size:1.2rem;  }
.ewm pp img{ width: 100%; }

#page8{ height: 100vh; }
.page8c{  overflow: hidden; display:block; color: #333; line-height: 100%; width: 60%; margin: 3% 20% 5% 20%;   }
.page8c p{ width: 48%; margin: 1%; height: 160px; background: #eee; float:left; display: block; }
.page8c p strong{ width: 30%; float:left; padding-top: 50px; font-size: 4rem; color: #C28214; text-align: center; }
.page8c p span{ width: 65%; float:right;  margin-top: 20px; padding-right: 3%;}
.page8c p span font{ height: 36px; line-height: 36px; font-size: 2rem; display: block; }
.page8c p span b{ height:56px; line-height: 28px; font-size: 1rem; color: #666; display: block; margin-top: 20px; }

.foot{ height: 40vh;  overflow: hidden; display:block;  }
.imr1,.imr2,.imr3,.im2{  position: relative; }

.imr1  img {
    position: absolute; /* 子元素设置为绝对定位 */
    left: 100px; /* 初始横坐标 */
    top: 100px; /* 初始纵坐标 */
    width: auto; /* 图片宽度 */
    height: auto; /* 图片高度自适应 */
    animation: imr 8s ease-in-out forwards; /* 动画名称、时长、速度曲线、执行方式 */
}
.imr2  img {
    position: absolute; /* 子元素设置为绝对定位 */
    left: 100px; /* 初始横坐标 */
    top: 250px; /* 初始纵坐标 */
    width: auto; /* 图片宽度 */
    height: auto; /* 图片高度自适应 */
    animation: imr 8s ease-in-out forwards; /* 动画名称、时长、速度曲线、执行方式 */
}
.imr3  img {
    position: absolute; /* 子元素设置为绝对定位 */
    left: 100px; /* 初始横坐标 */
    top: 400px; /* 初始纵坐标 */
    width: auto; /* 图片宽度 */
    height: auto; /* 图片高度自适应 */
    animation: imr 8s ease-in-out forwards; /* 动画名称、时长、速度曲线、执行方式 */
}

/* 定义关键帧动画 */
@keyframes imr {
    0% { /* 开始位置 */
        transform: translate(0, 0);
    }
    100% { /* 结束位置 */
        transform: translate(300px, 0); /* 目标横坐标减去初始横坐标，目标纵坐标减去初始纵坐标 */
    }
}

  

 .animation-element {
    opacity: 0; /* 开始时隐藏元素 */
    transition: opacity 3s ease-in-out; /* 添加过渡效果 */
	
  }
  .animation-active {
    opacity: 1; /* 动画激活时显示元素 */
  }


.vipbanner{ overflow: hidden; display:block; background: #0A090F; width: 100%; }
.vipbanner img{ width: 50%; padding: 0 25% 0 25%; }
.goodsbanner{ overflow: hidden; display:block; background: #0A090F; width: 100%; }
.goodsbanner img{ width: 100%;  }

.contact{ width: 100%;  background: #0D8BFD;  }
.contactc{ width: 60%; margin: 0% 20% 0% 20%;text-align: center;  }
 
 
.footc{ width: 80%; margin: 0 10% 0 10%; overflow: hidden; display:block; font-size: 1rem; }
.footl{ width: 60%; float:left; }
.footl h3{ height: 66px; line-height: 66px; font-size: 2rem;}
.footl strong{ height: 44px; line-height: 44px; font-size: 1.2rem; }
.footl p{ height: 40px; line-height: 40px; }
.footl p img{ height: 24px; margin: 8px; margin-right: 14px; }
.footl p a{ color: #E1B828; }


.footr{ width: 40%; float:right; }
.footr p{ width: 27%; margin: 6% 3% 3% 3%; float:left; }
.footr p b{ height: 44px; line-height: 44px; display: block; text-align: center; font-size: 1.2rem; }
.footr p img{ width: 100%; }

.footb{ border-top: 1px #666 solid; width: 80%; margin: 30px 10% 0 10%; overflow: hidden; display:block; padding-top: 10px; }
.footb img{ height: 40px; float:left; }
.footb p{ height: 30px; line-height: 30px; float:right; }

.goods1,.goods1l,.goods1r{ height: 86vh; }
.goods1l{ width: 30%; float:left; }
.goods1l p{ display: block; margin: 10px; text-align: right; }
.goods1l p img{}
.goods1r{ width: 70%; float: right; }
.goods1r li{ width: 23%; margin: 1% 1% 0.5% 1%; font-size: 1.2rem; }
.goods1r li img{ margin-bottom:10px; }


.goods2 { width: 60%; padding: 2% 20% 2% 20%; overflow: hidden; display:block; }
.goods2 h3{ text-align: center; display: block; }
.goods2 li{ height: 120px; padding: 1%; width: 46%; margin: 1%; float:left; background: #fff;  }
.goods2 li pic{ width: 25%; float:left; }
.goods2 li pic img{ height: 120px;  }
.goods2 li p{ float:right; width: 73%;  }
.goods2 li p strong{ font-size: 2rem;  overflow: hidden; display:block; }
.goods2 li a{ color: #9C670E; }
.goods2 li a:Hover{ color: #FF0288; }
.goods2 li p span{ color: #666;overflow: hidden; display:block;  line-height: 180%; font-size: 1.2rem; margin-top: 16px; }

 
.about { width: 60%; padding: 2% 20% 2% 20%; background: #fff; overflow: hidden; display:block; color: #666; }
.about p{  text-indent:2rem;  font-size: 1rem; line-height:160%; }
.about h1{ height: 76px; line-height: 76px;   font-size: 4rem; text-align: center; display: block; color: #7000C6; }
.about span{ height: 52px; line-height: 52px; font-size: 1.8rem;  text-align: center; display: block; color: #666; margin-bottom: 20px; }

.about2,.about2l,.about2r{ height: 60vh; }
.about2l{ width: 35%; float:left;   background: url(page2r.png) no-repeat; background-size:80%; }
.about2l img{ display: block; margin-top: 20%; margin-right: 10%; float: right; }
 
.about2r{ width:65%; float: right;  }
.about2rc{ margin-top: 50px; }
.about2r p{ font-size: 1.6rem; font-weight:normal; overflow: hidden; display:block;  padding: 2% 3% 2% 12%; color: #fff; }
.about2r p font{  color: #FDCB64; margin-right: 8px;  }



.about3,.about3l,.about3r{ overflow: hidden; display:block;   }
.about3l{ width: 55%; float:left;   }
.about3lc{ widht: 70%; margin: 10%; background: #fff;  padding: 2% 5% 5% 5%; }
.about3lc h3{ color: #7000C6; font-size:3rem; text-align: center; display:block; margin: 10px; }
.about3lc span{ color: #333; font-size: 1.4rem;  margin: 20px; overflow: hidden; display:block; }
.about3lc p{ text-indent:2rem;  color: #666; font-size: 1.1rem; line-height: 180%; overflow: hidden; display:block; }

.about3r{ width:44%; float: right; text-align: center;   }
.about3r img{ display: block; margin: 10%;   }

.hzhb{ width: 100%;  height: 560px;  background: url(hzhb.jpg) no-repeat; background-size: 100%; }
.hzhb h1{ width: 10%; float:left; text-align: center; margin-top: 100px; }
.hzhb p{ width: 60%; margin-right: 30%; float:right; margin-top: 80px; }
.hzhb p img{ width: 23%; margin: 1%; float:left; }
.app1{ width: 100%; overflow: hidden; display:block; padding-top: 20px; }
.app2{ height: 60vh; overflow: hidden; display:block;  }
.app2l{ width: 45%; height: 60vh; padding-right: 5%; float:Left; text-align:right; }
.app2l h1{ font-size: 4rem; color: #fff; height: 160px; line-height: 160px; margin-right: 30%;}
.app2l p{ color: #fff; line-height: 220%; margin-bottom: 20px; font-size: 1.6rem; text-align:left; margin-left: 20%; }
.app2r{ width: 50%; height: 60vh; float: right; text-align: left; }
.app2r img{ height: 60%; margin:  10% 20% 20% 20%; }

.app3{   overflow: hidden; display:block; padding: 5% 20% 5% 20%; }
.app3 img{ float:left; width: 50%; }

.app4{ height: 60vh; padding: 60px; overflow: hidden; display:block;  }
.app4l{ width: 50%; height: 60vh;   float:Left; text-align:right; }
.app4l h1{ font-size: 4rem; color: #FF0288; height: 120px; line-height: 120px;  margin-right: 10%; }
.app4l p{ color: #666; line-height: 220%; font-size: 1.8rem; text-align:left; margin-left: 50%; }
.app4r{ width: 40%; height: 60vh; float: right; text-align: left; }
.app4r img{ height: 100%; }


.vip1,.vip2,.vip3,.vip4{ height: 56vh; padding: 40px 140px 40px 140px; overflow: hidden; display:block;  }
.vipc{}
.vipc span{ display: block; }
.vipc p{}
.vipc p img{ width: 22%; margin: 1.5%; float:left; }
.vip1l{ width: 50%; float:left; }
.vip1r{ width: 40%; float:right; padding-top: 60px; padding-left: 9%; border-left: 2px #ccc dashed; }


.good{  overflow: hidden; display:block; color: #666; }
.goodl{ width: 40%; float: left; }
.goodl img{ width: 100%; }
.goodr{ width: 58%; float: right;  }
.goodr h1{ text-align: left;   margin:  -10px 0 10px 0; padding:0;   }
.goodr strong{ padding: 8px;  overflow: hidden; display:block; color: #EF684B; background: #FFF0E1; }
.goodr strong img{ height: 18px; margin: 2px 5px 0 30px; }
.goodr span{ height: 120px; line-height: 120px; font-size: 2rem;   padding-left: 20px; background: #f7f7f7;  overflow: hidden; display:block; }
.goodr span font{ font-size: 4rem;  color: #EF684B;  }
.goodr span b{ margin-left: 80px; font-size: 1.6rem;  }
.goodr p{ height: 60px;  : hidden; display:block; margin-top: 20px; }
.goodr p b{ width: 25%; margin: 2%; float:left; display: block; text-align: center; font-size: 1.2rem; color: #AE750B; }
.goodr p b img{ width: 100%; display: block; margin-top: 12px; }