.header{ background:#282828; min-height:365px; width:100%; }
.banner{ background:#000;  width:100%;position: relative;border-bottom: 1px solid #eee;}
.swiper-container{
width: 100%;
height: 980px;
}
.swiper-container .swiper-slide a{
width: 100%;
height: 100%;
display: block;
background-size: cover;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
  bottom: 27px;
  right: 5%;
  width: fit-content;
}
.banner-tips{
   position: absolute;
       bottom: 0;
       width: 90%;
       background: #fff;
       padding: 20px 5%;
       z-index: 100001;
       text-align: left;
}
.banner-tips h3{
   font-size: 135%;
   color: #000;
   font-weight: normal;
}
.banner-tips p{
   color: #666;
   margin-top: 8px;
font-size:120%;}
.header-menu{
   position: absolute;
   z-index: 100;
   right: 15px;
   top: 15px;
   display: none;
}
.header-menu a{
   width: 20px;
    height: 20px;
    display: block;
    background-image: url(/statics/images/header-menu.png);
    background-size: cover;
}
.header-wrap{
   position: absolute;
   background: rgba(0, 0, 0, 0.72);
   width: 250px;
   left: 12%;
   top: 0;
   z-index: 10001;
   height: 416px;
}
.header-box{
   position: absolute;
       /* background: rgba(0, 0, 0, 0.72); */
       width: 100%;
       left: 0;
       bottom: 0;
       z-index: 10001;
}
.header-box-logo{
   width: 100%;
   height: 140px;
   margin-bottom: 130px;
   margin-top: 25px;
}
.header-box-logo a{
   display: block;;
   width: 100%;
   height: 140px;
   background-image: url(/statics/images/logo.png);
   background-repeat: no-repeat;
}
.header-nav ul{
   padding: 15px 20px;
   margin: 0;
}
.header-nav ul li{
   text-align: left;
       margin: 5px 0;
}
.header-nav ul li a{
   color: #9b9b9b;
   border-left: 1px solid #9b9b9b;
   padding-left: 10px;
}
.ct{ max-width:100%; margin:0 auto; }
.wrap{}
.footer{ background:#282828; color:#767676; line-height:1.8em; font-size:14px; text-align:left; font-family:arial,microsoft yahei; }
.footer p{ padding:0; }
.footer span{ float:right; }
.copyright{   padding: 15px 5%;
    font-size: 85%;
    width: 90%; }

.logo{ float: left;
    padding: 60px 0 0 2%;
    /* padding: 60px 0 0 8px; */
    text-align: left;
    width: 23%;
}
.logo img{width:240px;}
.nav{ float:left; /* max-width:500px; */ width:45%; }
.info{ float:left; width:27.5%; border-left:1px solid #444; font-family:arial,microsoft yahei; }
.contact{       border-bottom: 1px solid #333;
    padding: 15px 5%;
    font-size: 85%;
    width: 90%;
    margin: 0px auto;
color: #999;
}
.s-imgs.img-mag{
margin-bottom: 85px;
}
.nav ul{ margin-top:40px; }
.nav li{  text-align:left; float:left; margin:20px 62px 20px 60px; }
.nav a{ text-decoration:none; display:block; }
.nav em{ color:#fff; display:block; font-style:normal; font-size:24px; font-family:arial; }
.nav span{ color:#767676; font-size:14px; }
.nav a:hover em{ color:#E3B500;   }
.nav a:hover span{ color:#aaa; }

.info{ min-height:200px; margin-top:60px; text-align:left; color:#696969; font-size:14px; margin-left:5px; }
.info p{ margin:0px 0 35px 0; padding-left:31.58%; /* padding-right:5%; */ }
.info p:hover{ color:#aaa;}

.tit{    text-align: left;
    font-size: 26px;
    color: #9A9A9A;
    margin: 0px auto;
    padding: 50px 5%;
    width: 90%;
    background: #f6f6f6;
   }
/*
.tit li{ display:none; display:inline-block; width:24.4%; padding:10px 0; }
.tit span{ display:none; }
.t{ margin-right:150px;}
*/
.tit li{  display:inline-block; width:24%; position:relative; height:40px; line-height:40px; overflow:hidden;}
.tit li a{ text-decoration:none; display:block;}
.tit li a:hover span{ bottom:-40px; }
.tit span{ width:100%; display:block; background: #f6f6f6;bottom:0px; z-index:999; position:absolute; left:0; font-family:'arial'; font-size:22px; color:#999; }
.t{ margin-right:150px;}

.tit li.w1{ width:20%; }
.tit li.w2{ width:30%; }
.tit li.w3{ width:20%; }
.tit li.w4{ width:27.7%; }

.hr{ border:0; border-bottom:1px solid #aaa;}

li.tit-current{ background:#aaa; text-align:center; }
li.tit-current a{ color:#fff; }

.entry{ font-size: 16px;
    text-align: left;
    color: #797979;
    line-height: 26px;
    padding: 10px 15px;
        width: auto;
}
.artContent .entry {

    margin: 0 auto;
}
.artContent .tit {
    width: 60%;
    margin: 10px auto;
}
.artContent .s-desc{
text-align: left;
}
.artContent .p-mag {
    margin: 85px 100px;
}
.p-mag {
  margin: 100px;
  min-height: 298px;
}
.p-indent{ text-indent:2em; }
.thumb{ margin:0 0 100px 0 text-align:left; margin-bottom: 100px;}
.thumb li{ margin:0px auto; width:25%; float: left;display:inline-block; overflow:hidden;}
.thumb img{ width:100%;  }
.thumb li a{ position:relative;text-decoration: none; white-space: nowrap;}
.thumb li a span{ display:block; background:#fff; color:#333; padding:5px 0 15px; position:relative; width:100%; text-align:center; }
.thumb li a span b{ font-size:14px; font-weight:normal; display:block; padding:5px 0px; }
.thumb li a:hover span{ display:block; }
.thumb li hr{ margin:0 20px; height:1px; border:none;border-top:1px solid #fff; }
.thumb li span em{ font-style:normal; margin:5px 10px; display:block; color: #999;}

/*
.thumb{ margin:0 20px 100px 20px; }
.thumb li{ float:left; margin:15px 5px; }
.thumb img{ width:255px; height:255px; }
*/
.allbacks_nav{ display:none;}
.tmp-right{ text-align:right; }

.show-nav{ margin:0; }
.show-nav ul{ margin:25px 0; }
.show-nav li{ display:inline-block; line-height:60px; background:#fff; margin:0 30px; }
.show-nav a{ color:#666; font-size:22px; text-decoration:none; padding:5px 10px;  border:1px solid #666; }
.show-nav a:hover{ background:#333; color:#fff;  }

.s-content{ 0;}
.s-desc{ width:90%; margin: 0px auto;display:inline-block; text-align:justify; font-size:14px; vertical-align:top; }
.s-desc h2{
     padding-bottom: 10px;
    font-weight: normal;
    color: #333;
    font-size: 215%; }
.s-imgs{ width:100%; margin: 0px auto;display:inline-block; vertical-align:top;  }
.s-imgs img{ width:100%;display:block; }
.s-entry{ line-height:1.8; }

.s-link{     border-left: 0;
    border-right: 0;
    padding: 10px 5%;
        margin: 0 auto 50px;
    width: 90%;}
.s-link a{ color:#999; font-size:14px; }
.pre-link,.next-link{ display:inline-block; width:50%; vertical-align:top; }
.pre-link{ text-align:left; }
.next-link{ text-align:right; }
.s-relate{ margin:20px 0 50px 0;  text-align:left; }
.s-relate h3{ margin:0 0 10px 1%; font-size:18px; color:#666; }
/*
.s-relate li{ width:31%; display:inline-block; text-align:center; margin:0 1% 10px 1%; vertical-align:top; }
.s-relate li img{ width:100%; }
*/
.s-relate li a{ color:#333; }
.s-relate li span{ display:block;  margin:10px 0; font-size:14px; text-align:center; }

.s-relate-thumb{ margin:0 0 100px 0; text-align:left;}
.s-relate-thumb li{ margin: 0 auto;
    width: 25%;
    float: left;
    display: block;
    vertical-align: top;
    overflow: hidden;
    padding: 0;}
.s-relate-thumb img{ width:100%;  }

.s-relate-thumb li a{ position:relative; }
.s-relate-thumb li a span{ display:block; background:#666; color:#fff; padding:5px 0; opacity:0.8; position:absolute; bottom:-270px; left:0; width:100%; z-index:999; text-align:left; }
.s-relate-thumb li a span b{ font-size:16px; font-weight:normal; display:block; padding:5px 20px; }
.s-relate-thumb li a:hover span{ display:block; }
.s-relate-thumb li hr{ margin:0 20px; height:1px; border:none;border-top:1px solid #eee; }
.s-relate-thumb li span em{ font-style:normal; margin:5px 20px; display:block; }
#map_canvas img {
      max-width: none;
}
@media only screen and (max-width : 480px) {
	.logo{ width:100%; padding:20px 0; text-align:center; border-bottom:1px solid #666;  }
	.logo img{ width:240px; height:auto; margin:0 auto; }
	.nav{ width:100% }
	.nav ul{ margin-top:0; }
	.nav li{ text-align:center; width:100%; padding:5px 0; margin:0; border-bottom:1px solid #333; }
	.nav li:hover{ background:#333; }
   .swiper-container{
   width: 100%;
   height: 627px;
   }
   .header-wrap{
      position: absolute;
background: none;
width: 100%;
left: 0;
top: 0;
z-index: 10001;
height: auto;
   }
   .header-box{
      position: absolute;
      background:none;
      width:100%;
      left: 0;
      top: 0;
      z-index: 10;
   }
.header-menu {
   position: absolute;
    z-index: 100;
    right: 33px;
    top: 33px;
    display: block;
}
.header-menu a {
    width: 30px;
    height: 30px;
    display: block;
    background-image: url(/statics/images/header-menu.png);
    background-size: cover;
}
.header-box-logo {
   width: 97%;
       height: 140px;
       margin-top: 18px;
       margin-bottom: 0;
       margin-left: 3%;
}
.header-box-logo a {
    display: block;
    width: 50%;
    height: 100px;
    background-image: url(/statics/images/logo2.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.header-nav{
   background: rgba(0, 0, 0, 0.72);
}
.header-nav ul {
    padding: 30px 0;
    margin: 0;
}
.header-nav ul li {
    text-align: left;
    margin: 0px 0;
    text-align: center;
    width: 100%;
    padding: 5px 0;
    margin: 0;
}
.header-nav ul li a {
    color: #ccc;
    padding: 10px 0;
    display: block;
    font-size: 120%;
    border: none;
}
.header-close{
  position: absolute;
      right: 20px;
      top: 20px;
      width: 30px;
      height: 30px;
      background-image: url(/statics/images/close.png);
      background-repeat: no-repeat;
      background-size: cover;
}
	.info{ width:100%; margin:20px 0; padding:0; display:none; }
	.info p{ margin-bottom:10px; text-align:center; padding:0; }
	.entry{ padding:0 10px; }
  .artContent .entry{
    padding: 10px 15px; width: auto;
  }
	.thumb{ margin-bottom:20px; }
	.thumb li{ margin:0 auto; width:50%; display:inline-block; }
    .p-mag {
    margin: 40px;
    min-height: 0;
}.s-imgs.img-mag {
    margin-bottom: -15px;
}.s-content .s-desc .p-mag{ margin: 40px;}
.artContent .s-desc .p-mag{ margin: 25px;}
.artContent .p-mag{ margin: 40px;}
	.footer{ text-align:left; line-height:25px; font-size:14px; }
	.footer span{ float:none; display:block; }
	.contact{ display:block;  padding:15px 0;}
	.copyright{ padding:15px; font-size: 85%; }
	.tit{     font-size: 12px;
    padding: 5% 3%;
    text-align: center;
    width: 94%; }
	.tit li{ display:none; font-weight:noraml; display:inline-block; width:46%; font-size:18px; line-height:40px; background:#eee; margin:1%;  }
	.tit li.w1{ width:46%; }
	.tit li.w2{ width:46%; }
	.tit li.w3{ width:46%; }
	.tit li.w4{ width:46%; }
	.tit li span{ background:#eee; font-size:14px; font-weight:normal; }
	.tmp-right{ text-align:center; }
	li.tit-current a{ color:orange; }

	.s-desc{ width:auto; margin-bottom:30px;    padding: 0px 15px;}
	.s-imgs{ width:100%;}
  .s-relate h3 {
    margin-left: 15px;
    margin-right: 15px;
}
	.s-relate li{ width:50%;}
  .thumb li span em{ white-space: nowrap;overflow: hidden;}
 .s-link a {
   /* display: block;
    width: 100%;*/
}
.pre-link,.next-link {
    text-align:center;
}

}

/* iPads (portrait) �������C */
@media screen and (min-width:480px) and (max-width:768px){
	.header{ }
   .swiper-container{
   width: 100%;
   height: 627px;
   }
	.logo{ width:100%; padding:20px 0; text-align:center; border-bottom:1px solid #666;  }
	.logo img{  width:240px; height:auto; margin:0 auto; }
	.nav{ width:100% }
	.nav ul{ margin-top:0; }
	.nav li{ text-align:center; width:100%; padding:5px 0; margin:0; border-bottom:1px solid #333; }
	.nav li:hover{ background:#333; }
	.info{ width:100%; margin:20px 0; padding:0; display:none; }
	.info p{ margin-bottom:10px; text-align:center; padding:0; }
	.entry{ padding:0 10px; }
	.thumb{ margin-bottom:20px; }
	.thumb li{ margin:0 auto; width:50%; display:inline-block; }
    .p-mag {
    margin: 40px;
    min-height: 0;
}.swiper-container{
width: 100%;
height: 627px;
}
.header-wrap{
   position: absolute;
background: none;
width: 100%;
left: 0;
top: 0;
z-index: 10001;
height: auto;
}
.header-box{
   position: absolute;
   background:none;
   width:100%;
   left: 0;
   top: 0;
   z-index: 10;
}
.header-menu {
position: absolute;
z-index: 100;
right: 33px;
top: 33px;
display: block;
}
.header-menu a {
width: 30px;
height: 30px;
display: block;
background-image: url(/statics/images/header-menu.png);
background-size: cover;
}
.header-box-logo {
width: 100%;
height: 140px;
margin-top: 25px;
margin-bottom: 0;
}
.header-box-logo a {
display: block;
width: 100%;
height: 140px;
background-image: url(/statics/images/logo.png);
background-repeat: no-repeat;
}
.header-nav{
background: rgba(0, 0, 0, 0.72);
}
.header-nav ul {
padding: 30px 0;
margin: 0;
}
.header-nav ul li {
text-align: left;
margin: 0px 0;
text-align: center;
width: 100%;
padding: 5px 0;
margin: 0;
}
.header-nav ul li a {
color: #ccc;
padding: 10px 0;
display: block;
font-size: 120%;
}

.s-imgs.img-mag {
    margin-bottom: -15px;
}
.s-content .s-desc .p-mag{ margin: 0;}
.artContent .s-desc .p-mag{ margin: 25px;}
.artContent .p-mag{ margin: 40px;}
	.footer{ text-align:center; line-height:25px; font-size:14px;  }
	.footer span{ float:none; display:block; text-align:center; }
	.contact{ display:block; padding:15px 0; }
	.copyright{ padding:15px; }
	.tit{ font-size:16px; padding:0 0 10px 0; text-align:center; font-weight:bold; }
	.tit li{ display:none; display:inline-block; width:46%; font-size:18px; line-height:40px; background:#eee; font-weight:normal; margin:1% 0.5%;}
	.tit span{ font-size:16px; }
.tit li.w1{ width:46%; }
	.tit li.w2{ width:46%; }
	.tit li.w3{ width:46%; }
	.tit li.w4{ width:46%; }
	.tit li span{ background:#eee; font-size:18px; font-weight:normal; }
	.tmp-right{ text-align:center; }
	li.tit-current a{ color:orange; }

	.s-desc{ width:100%; margin-bottom:30px;}
	.s-imgs{ width:100%;}
	.s-relate li{ width:32.5%;}
}

@media screen and (min-width:768px) and (max-width:1024px){
	.header{  }
   .swiper-container{
   width: 100%;
   height: 627px;
   }
	.logo{ width:100%; padding:20px 0; text-align:center; border-bottom:1px solid #666;  }
	.logo img{ width:auto; margin:0 auto; }
	.nav{ width:50%; border-right:1px solid #666; }
	.nav ul{ margin-top:0;}
	.nav li{ text-align:center; width:100%; padding:5px 0; margin:0; border-bottom:1px solid #333; }
	.nav li:hover{ background:#333;}
	.info{ width:45%; margin:20px 0; border:none; padding:0; }
	.info p{ margin:10px 0 18px 0; text-align:left; padding-left:20%; }
	.entry{ padding:0 20px; }
	.tit li{ display:none; display:inline-block; width:24%; }
	.tit li span{ font-size:16px; }
	.tit li.w1{ width:20%; }
	.tit li.w2{ width:30%; }
	.tit li.w3{ width:20%; }
	.tit li.w4{ width:26.8%; }
}

.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(232, 98, 86, 0.8) url(cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #e86256;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 60px;
    width: 60px;
    right: 30px;
    bottom: 30px;
  }
}
