/* CSS Document */

/* page heroes */

.page-title{ width:1200px; margin:40px auto;}
.page-title h2{ width:740px; height:30px; background:url(../images/page-title.png) center center no-repeat; line-height:30px; float:right; text-align:center; font-size:24px; text-transform:uppercase;}
.page-title h2 span{ font-weight:normal;}

.page-content{ width:1200px; margin:0px auto 50px auto;}
.focus{position:relative;border:1px solid #bba289;}
.focus,.focus .bd li,.focus .bd li img{ width:440px; height:750px;}
.focus .text{ position:absolute; left:0px; bottom:0px; z-index:99; width:100%; height:180px;border-top:1px solid #bba289; background:rgba(0,0,0,0.7); text-align:center;}
.focus .text h2{ color:#d6b269; margin-top:20px; font-size:26px;}
.focus .text h3{ font-size:32px; color:#925e13; margin-top:10px; font-family:"微软雅黑";}
.focus .text h4{ position:absolute; left:0px; bottom:20px; width:100%; height:30px;vertical-align:middle;}
.focus .text h4 span{display:inline-block; width:31px; height:25px;  margin-right:10px;}
.focus .text h4 em{display:inline-block;height:30px; line-height:16px;vertical-align:middle; background: -webkit-linear-gradient(bottom, #8c733f, #e5d895); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight:400;}
.focus .prev,.focus .next{display:block;  position:absolute; z-index:1; top:50%;  z-index:999; width: 77px;height: 102px; margin-top:-51px; cursor:pointer;}	
.focus .prev{ left:0px;background: url(../images/arrow.png) no-repeat 0 -100px; }
.focus .prev:hover {background-position: 0px 0px;}
.focus .next{right:0px; background: url(../images/arrow.png) no-repeat -77px -100px;}
.focus .next:hover{background-position: -77px 0px;}

.MobBanner{ display:none;}
.page-content .detail{ width:740px;}
.page-content .detail .viewInfo{ width:720px; height: auto; min-height:270px;background:#070b12; /*background: url(../images/page-view.png) left top no-repeat #070b12;*/ box-shadow: 0 0 16px 6px rgba(0,0,0,.5); margin:0px auto; padding-bottom:10px;border:1px solid #bba289; position:relative; z-index:1;}
.page-content .detail .viewInfo .viewInfoCon{ color:#bba289;}
.page-content .detail .viewInfo .viewInfoCon p{/*text-indent:2em; */padding:10px 20px 0px 20px;line-height:26px; margin:0px;}
.page-content .detail .viewInfo .viewInfoCon p span{ color:#925e13; font-size:30px;}
.page-content .detail .viewInfo .viewInfoMore{ text-align:right; font-size:16px;font-weight:bold; }
.page-content .detail .viewInfo .viewInfoMore span{padding-right:20px;line-height:30px;cursor:pointer;}
.page-content .detail .skill,.page-content .detail .skill ul{ width:720px; height:100px; position:relative; z-index:999;}
.page-content .detail .skill ul li{position:relative;float:left;width:240px; height:74px; line-height:74px; text-indent:64px; font-size:16px; font-weight:bold; color:#bba289;}
.page-content .detail .skill ul li .nameTips,.page-content .detail .skillTab .tcR .tcRLi .nameTips{display:none;position:absolute; width:150px;height:34px; background:url(../images/tips.png) left top no-repeat;font-size:16px;font-weight:normal; text-align:center;color:#eaded1;text-indent:0px; line-height:24px; z-index:99; text-transform:uppercase;}
.page-content .detail .skill ul li:hover,.page-content .detail .skillTab .tcR .tcRLi:hover{cursor:pointer;}
.page-content .detail .skill ul li:hover .nameTips,.page-content .detail .skillTab .tcR .tcRLi:hover .nameTips{ display:block;left:30px; top:-16px; z-index:999 !important;}
.page-content .detail .skill ul li.s4,.page-content .detail .skill ul li.s5,.page-content .detail .skill ul li.s1,.page-content .detail .skill ul li.s2{ width:170px;}
.page-content .detail .skill ul li.s3,.page-content .detail .skill ul li.s6{ width:380px;}
.page-content .detail .skill ul li.s1,.page-content .detail .skill ul li.s2,.page-content .detail .skill ul li.s3{top:0px;}
.page-content .detail .skill ul li.s4,.page-content .detail .skill ul li.s5,.page-content .detail .skill ul li.s6{top:-20px;}
.page-content .detail .skill .s1{ background:url(../images/page-jn-1.png) left center no-repeat;}
.page-content .detail .skill .s2{ background:url(../images/page-jn-2.png) left center no-repeat;}
.page-content .detail .skill .s3{ background:url(../images/page-jn-3.png) left center no-repeat;}
.page-content .detail .skill .s4{ background:url(../images/page-jn-4.png) left center no-repeat;}
.page-content .detail .skill .s5{ background:url(../images/page-jn-5.png) left center no-repeat;}
.page-content .detail .skill .s6{ background:url(../images/page-jn-6.png) left center no-repeat;}

.page-content .detail .skillTab{border:1px solid #bba289; width:718px; height:auto; margin-left:auto; margin-right:auto; overflow:hidden; background:url(../images/skill.png) 0px 0px no-repeat; background-size:cover;}
.page-content .detail .skillTab .hd{ width:100%; height:48px; overflow:hidden; clear:both;}
.page-content .detail .skillTab .hd ul{ width:720px;}
.page-content .detail .skillTab .hd ul li{float:left; width:144px; height:48px; text-align:center; line-height:48px; font-size:16px; font-weight:bold; cursor:pointer;}
.page-content .detail .skillTab .hd ul li span{ display:block; width:144px; height:48px; background:url(../images/tab_line.png) right -20px no-repeat;}
.page-content .detail .skillTab .hd ul li span i{background: -webkit-linear-gradient(top,#fff,#505358); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-style:normal;}
.page-content .detail .skillTab .hd ul li.on{ background:url(../images/tab_on2.png) center 0px no-repeat;}
.page-content .detail .skillTab .hd ul li.on span i{background: -webkit-linear-gradient(bottom,#664f1e,#f0e3a4); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.page-content .detail .skillTab .swiper-slide{ position:relative; width:100%; float:left;}
.page-content .detail .skillTab .tcL{ width:230px; height:210px; text-align:center;}
.page-content .detail .skillTab .tcL h2{ font-size:24px; line-height:30px; margin-top:10px; font-weight:bold;}
.page-content .detail .skillTab .tcR{ position:relative; width:460px; min-height:210px; padding-bottom:70px;}
.page-content .detail .skillTab .tcR p{margin-right:20px; font-size:14px; line-height:22px; color:#eaded1;}
.page-content .detail .skillTab .tcR .tcRLi{ position:absolute; width:200px; bottom:10px;height:74px; line-height:74px; text-indent:74px; font-size:14px; font-weight:bold; color:#bba289;}
.page-content .detail .skillTab .t1{ left:-20px;background:url(../images/page-jn-2.png) left center no-repeat;}
.page-content .detail .skillTab .t2{ left:190px;background:url(../images/page-jn-7.png) left center no-repeat;}


@media screen and (max-width:768px){
 .page-content{ position:relative;}
 .page-content,.page-title,.page-title h2{ width:100%;}
 .focus{display:none;}
 .page-title{ margin:15px auto;}
 .page-title h2{ width:100%; background-size:100% auto; font-size:18px; font-weight:normal;}
 .MobBanner{display:block;position:relative; width:100%; min-height:200px; height:auto; clear:both;}
 .MobBanner .swiper-next,.MobBanner .swiper-prev{ display:block; position:absolute; z-index:999;width: 77px;height: 102px;background: url(../images/arrow.png) no-repeat; cursor:pointer; top:100px;}
 .MobBanner .swiper-prev {left: -10px; background-position:0px -100px;}
 .MobBanner .swiper-next {right: -10px; background-position:-77px -100px;}
 
 
 .MobBanner img{ width:100%;}
 .MobBanner h2,.MobBanner h4{ position:absolute; left:0px; width:100%; text-align:center;}
 .MobBanner h2{ bottom:10px; font-size:40px; color:#bba289;}
 .MobBanner h4{bottom:-10px;color:#925e13; font-size:18px;}
 
 .page-content .detail .viewInfo,.page-content .detail .skill,.page-content .detail .skill ul{ width:100%; height:auto; overflow:hidden; margin:0px;}
 .page-content .detail .viewInfo p{ font-size:14px; line-height:25px !important;}
 .page-content .detail .skill{ margin-top:0px !important; padding-left:0px !important;}
 .page-content .detail .skill ul li.s4,.page-content .detail .skill ul li.s5,.page-content .detail .skill ul li.s6{top:0px;}
 .page-content .detail .skill ul li{ float:left; width:50% !important;}
 .page-content .detail .skill ul li .nameTips,.page-content .detail .skillTab .tcR .tcRLi .nameTips{ width:106px;height:24px; font-size:11px;background-size:auto 24px; line-height:18px; }
 .page-content .detail .skill ul li:hover .nameTips,.page-content .detail .skillTab .tcR .tcRLi:hover .nameTips{ left:30px; top:-6px;}
 .page-content .detail .skill ul li{font-size:12px;}
 .page-content .detail{ width:100%; padding:0px 10px;}
 .page-content .detail .skillTab{ float:left; width:100%; background:#070b12; margin-top:10px !important;}
 .page-content .detail .skillTab .hd{ width:100%;}
 .page-content .detail .skillTab .hd ul{ width:auto;}
 .page-content .detail .skillTab .hd ul li{ width:20%; font-size:12px;}
 .page-content .detail .skillTab .hd ul li:last-child span{ background:none;}
 .page-content .detail .skillTab .hd ul li span{ width:100%;}
 
 .page-content .detail .skillTab .tcL{ width:110px;}
 .page-content .detail .skillTab .tcL .mt20{ margin-top:5px !important;}
 .page-content .detail .skillTab .tcL h2{ font-size:13px;}
 .page-content .detail .skillTab .tcL img{ width:80%;}
 .page-content .detail .skillTab .tcR{ position:inherit; width:calc(100% - 125px); min-height:200px;}
 .page-content .detail .skillTab .tcR p{font-size:14px; line-height:18px; color:#eaded1;}
 .page-content .detail .skillTab .tcR .tcRLi{width: auto;text-indent:46px; font-size:14px; bottom:-10px;}
 .page-content .detail .skillTab .t1{ left:-80px; background-size:auto 54px;}
 .page-content .detail .skillTab .t2{ left:60px; background-size:auto 54px;}
 
}
@media screen and (max-width:375px){
  .page-content .detail .skillTab .t1{ left:-100px; background-size:auto 54px;}
  .page-content .detail .skillTab .t2{ left:45px; background-size:auto 54px;}	
}
@media screen and (max-width:320px){
  .page-content .detail .skillTab .tcR p.mt10{ margin-top:0px; font-size:12px;}
  .page-content .detail .skillTab .t1{ left:-100px; background-size:auto 54px;}
  .page-content .detail .skillTab .t2{ left:15px; background-size:auto 54px;}	
}

.cardsInfo{ width:998px;/*border:1px solid #bba289;*/ height:450px; overflow:hidden;}
.cardsInfo .litpic{ position:relative; width:350px; height:450px; margin-left:60px; text-align:center;}
.cardsInfo .litpic img{ width:275px; height: auto; margin-top:50px;}
.cardsInfo .litpic h2{ position:absolute; width:100%; left:0px; bottom:125px; font-size:20px; text-align:center;color:#000;font-weight:bold; padding:0px 70px;}
.cardsInfo .text{ width:550px; padding-right:40px;}
.cardsInfo .text .title{ text-align:center; margin-top:5px;}
.cardsInfo .text .title span{ display:block; width:54px; height:62px; margin:0px auto;}
.cardsInfo .text .title span.i1{ background:url(../images/card-icon1.png) no-repeat; background-size:100% auto;}
.cardsInfo .text .title span.i2{ background:url(../images/card-icon2.png) no-repeat; background-size:100% auto;}
.cardsInfo .text .title span.i3{ background:url(../images/card-icon3.png) no-repeat; background-size:100% auto;}
.cardsInfo .text .title span.i4{ background:url(../images/card-icon4.png) no-repeat; background-size:100% auto;}

.cardsIco{ width:500px; height:50px; background:rgba(0,0,0,0.6); margin:20px 0px; border-radius:8px; box-shadow:0px 0px 10px rgba(255,255,255,0.1);}
.cardsIco ul li{ width:50%; float:left; line-height:50px; text-align:center; font-size:15px; color:#bba289;}
.cardsIco ul li img{ margin-right:5px;}
.cardsIco ul{ position:relative; width:100%;}
.cardsIco ul li.line{ position:absolute; width:1px; height:40px; left:249px; top:5px;background:rgba(255,255,255,0.1);}

.cardsInfo .text h4{ color:#eaded1;}
.cardsInfo .text p{ color:#bba289; font-size:16px; line-height:26px; margin:0px; padding:0px;}
.cardsInfo .text p span{ font-size:36px;}
.cardsInfo .text h5{ color:#925e13; font-size:20px; margin-top:10px;}
.cardsInfo .text .cImg{ text-align:left; margin-top:10px;}
.cardsInfo .text .cImg a img{ opacity:0.7; background:#000; margin-right:10px;}
.cardsInfo .text .cImg a:hover img{opacity:1;}

@-webkit-keyframes orangePulse {
  from { filter: drop-shadow(0px 0px 12px #06090f); }
  50% { filter: drop-shadow(0px 0px 12px #c85404); }
  to { filter: drop-shadow(0px 0px 12px #06090f); }

}
@-webkit-keyframes purplePulse {
  from { filter: drop-shadow(0px 0px 12px #06090f); }
  50% { filter: drop-shadow(0px 0px 12px #d105f6); }
  to { filter: drop-shadow(0px 0px 12px #06090f); }

}
@-webkit-keyframes bluePulse {
  from { filter: drop-shadow(0px 0px 12px #06090f); }
  50% { filter: drop-shadow(0px 0px 12px #04e1ff); }
  to { filter: drop-shadow(0px 0px 12px #06090f); }

}
@-webkit-keyframes grayPulse {
  from { filter: drop-shadow(0px 0px 12px #06090f); }
  50% { filter: drop-shadow(0px 0px 12px #989898); }
  to { filter: drop-shadow(0px 0px 12px #06090f); }

}
.cardsInfo .text .title span.i4{ animation: orangePulse 3s infinite; -webkit-animation: orangePulse 3s infinite;}
.cardsInfo .text .title span.i3{ animation: purplePulse 3s infinite; -webkit-animation: purplePulse 3s infinite;}
.cardsInfo .text .title span.i2{ animation: bluePulse 3s infinite; -webkit-animation: bluePulse 3s infinite;}
.cardsInfo .text .title span.i1{ animation: grayPulse 3s infinite; -webkit-animation: grayPulse 3s infinite;}