*{margin: 0;padding: 0;}
html{width: 100%; height: 100%; margin: 0 auto;}
font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Segoe UI,Arial,Roboto,PingFang SC,miui,Hiragino Sans GB,Microsoft Yahei,sans-serif;
}
body { font-size: 28px; line-height: 1.5; -webkit-touch-callout: none; height: 100%; max-width: 750px!important; min-width: 320px!important;  margin: 0 auto; color: #333333;}
a,ul,dl,dd,dt,div,p,h1,h2,h3,h4,h5,span,form,label,input,b,strong,em,i{padding: 0;margin: 0;}
strong{font-style: normal;}
h1,h2,h3,h4,h5,h6{font-weight: normal;}
input,a,select{outline: none;}
input{border: none;max-width:100%;text-indent:6px;}
input:focus {outline: none;}
textarea:focus {outline: none;}
select:focus{outline: none;}
a,a:hover{text-decoration: none; color: #333;}
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
a:active{text-decoration:none;}
textarea{margin-left: 5px;margin-right: 5px;outline:none;}
li{list-style: none;}
textarea{resize: none;}
input,a,select,textarea,label{-webkit-tap-highlight-color: transparent;}
input {-webkit-appearance:none; /*去除input默认样式*/}

.hidden{overflow: hidden }
.clear_fix:after{content: "";display: block;height: 0;clear: both;}
.fl{float: left;}
.fr{float: right;}
.wrap { width: 100%; }
.wrap-margin { margin: 0 20px; }
.container130 { width: 100%; height: 130px; }
.container220 { width: 100%; height: 220px; background: url("../images/bottom-background.png") no-repeat top;}
.grey-line { width: 100%; height: 20px; background: #F4F4F4; }


.default-submit,.default-submit:hover{ margin: 0px auto 30px auto; width: 80%; height: 60px; background: #F84D58; color: #fff; font-size: 26px; line-height: 60px; border-radius: 50px; display: block; text-align: center;}
.submit-orange,.submit-orange:hover{ background:#FF7E28;  }
.height80,.height80:hover{ height: 80px; line-height: 80px; }


body{ background-image: url('../images/background-img.jpg'); background-repeat: no-repeat; background-position: center top; background-color: #94080B; background-size: 100%; min-width: 750px; }
.main-about { width: 100%; padding: 40px 60px; background: #F6F6F6; }
.container-title-1 { width: 100%; font-size: 36px; font-weight: 500; color: #910A06; text-align: center; } 
.container-title-1 i{ margin-left: 20px; margin-right: 20px; }

.container-title-2 { width: 100%; font-size: 36px; font-weight: 500; color: #fff; text-align: center; margin-top: 30px; margin-bottom: 30px; } 
.container-title-2 i{ margin-left: 20px; margin-right: 20px; }
.container-title-2 a{ color: #fff; font-size: 26px; font-weight: normal; line-height: 50px; position: absolute; right: 5px;}

.about-contents{ width: 100%; margin-top: 20px; font-size: 24px; line-height: 1.8; color: #333; }

.main-swiper { position: relative; width: 100%; margin: 0 auto; }
.main-swiper .swiper-container { padding-bottom: 60px; }
.main-swiper .swiper-slide { width: 340px; height: 520px; background: #fff; }
.main-swiper .swiper-slide img{ display:block; }
.main-swiper .swiper-pagination { width: 100%; bottom: 20px; }
.main-swiper .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; border: 3px solid #fff; background-color: #d5d5d5; width: 10px; height: 10px; opacity: 1; }
.main-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active { border: 3px solid #00aadc; background-color: #fff; }

.thumbnail-img {overflow: hidden; text-align: center; padding-top: 5px; padding-bottom: 5px;}
.thumbnail-img .caption h4{ font-size: 18px; line-height: 1.5; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; }
.thumbnail-img img { cursor: pointer; transition: all 0.6s; }
.thumbnail-img img:hover { transform: scale(1.1);}
.caption h4{ color: #94080B }

.main-news-content{ width: 100%;}
.main-news-content ul li { line-height: 48px; height: 48px; border-bottom:1px dashed #F5C5D2; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; }
.main-news-content ul li span{ float: right;  color: #D7D7D7;}
.main-news-content ul li a{ font-size: 24px; color: #EFE6E7; font-weight: normal;  }

.main-news-img .swiper-container { width: 100%; height: 100%; margin: 10px auto; }

.details_contents { font-size: 24px; color: #333; line-height: 1.6; }

.container-line { border-bottom: 1px dotted #333; margin-bottom: 20px; }

.draw-frame{ margin-top: 40px; font-size: 30px; color: #666; }
.draw-frame label{ font-weight: normal; text-align: right; margin-top: 5px; color: #999;}
.draw-frame label i{ color: #ff0000; font-weight: normal; }

/*底部导航*/
.footer{width: 100%; height: 110px; position: fixed; bottom: 0; background: #fff; z-index: 100; box-shadow: #666 0 -5px 5px -5px;}
.footer .footer_li{width: 20%;float: left;}
.footer .footer_li a{display: block; width: 100%;height: 100%;}
.footer_icon{height: 40px;margin: 16px 0px 12px 0px; text-align: center; font-size: 34px; color: #94080B}
.footer .footer_li p{font-size: 22px;color: #666;text-align: center; display: block;}
.footer .footer_li p.on{color: #FB4106;}



/*弹窗*/
.webalert { border-radius: 20px!important; }
.webalert .layui-layer-content { font-size: 32px!important; padding: 35px!important; text-align: center!important; line-height: 1.6!important;}
.webalert .layui-layer-btn { width: 100%; background: #F94D59; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.webalert .layui-layer-btn a{ width: 100%; text-align: center; height: 60px; line-height: 60px; background:#F94D59; border: 0px; font-size: 28px; color: #fff!important; }

/*弹窗*/
.webconfirm { border-radius: 20px!important; }
.webconfirm .layui-layer-content { font-size: 32px!important; padding: 35px!important; text-align: center!important; line-height: 1.6!important;}
.webconfirm .layui-layer-btn { width: 100%; background: linear-gradient(to right,#009688 50%,#F94D59 0); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.webconfirm .layui-layer-btn a{ width: 48%; text-align: center; height: 60px; line-height: 60px; background:#F94D59; border: 0px; font-size: 28px; color: #fff!important; }
.webconfirm .layui-layer-btn0 {background: #009688!important;}


* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative
}

.csstransforms .cn-wrapper {
  font-size: 1em;
  width: 26em;
  height: 26em;
  overflow: hidden;
  position: fixed;
  z-index: 10;
  bottom: -13em;
  left: 50%;
  border-radius: 50%;
  margin-left: -13em;
  -webkit-transform: scale(0.1);
  -ms-transform: scale(0.1);
  -moz-transform: scale(0.1);
  transform: scale(0.1);
  pointer-events: none;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
}

.csstransforms .opened-nav {
  border-radius: 50%;
  pointer-events: auto;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.cn-overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
  z-index: 2;
}

.cn-overlay.on-overlay {
  visibility: visible;
  opacity: 1;
}

.cn-button {
  border: none;
  background: none;
  color: #f06060;
  text-align: center;
  font-size: 1.8em;
  padding-bottom: 1em;
  height: 3.5em;
  width: 3.5em;
  background-color: #fff;
  position: fixed;
  left: 50%;
  margin-left: -1.75em;
  bottom: -1.75em;
  border-radius: 50%;
  cursor: pointer;
  z-index: 11;
}

.cn-button:hover,
.cn-button:active,
.cn-button:focus {
	color: #aa1010;
}

.csstransforms .cn-wrapper li {
  position: absolute;
  font-size: 1.5em;
  width: 10em;
  height: 10em;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  overflow: hidden;
  left: 50%;
  top: 50%;
  margin-top: -1.3em;
  margin-left: -10em;
  -webkit-transition: border .3s ease;
  -moz-transition: border .3s ease;
  transition: border .3s ease;
}

.csstransforms .cn-wrapper li a {
  display: block;
  font-size: 1.18em;
  height: 14.5em;
  width: 14.5em;
  position: absolute;
  position: fixed; /* fix the "displacement" bug in webkit browsers when using tab key */
  bottom: -7.25em;
  right: -7.25em;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  padding-top: 1.8em;
  text-align: center;
  -webkit-transform: skew(-50deg) rotate(-70deg) scale(1);
  -ms-transform: skew(-50deg) rotate(-70deg) scale(1);
  -moz-transform: skew(-50deg) rotate(-70deg) scale(1);
  transform: skew(-50deg) rotate(-70deg) scale(1);
  -webkit-backface-visibility: hidden;
	-webkit-transition: opacity 0.3s, color 0.3s;
  -moz-transition: opacity 0.3s, color 0.3s;
  transition: opacity 0.3s, color 0.3s;
}

.csstransforms .cn-wrapper li a span {
	font-size: 1.1em;
	opacity: 0.7;
}

/* for a central angle x, the list items must be skewed by 90-x degrees
in our case x=40deg so skew angle is 50deg
items should be rotated by x, minus (sum of angles - 180)2s (for this demo) */

.csstransforms .cn-wrapper li:first-child {
  -webkit-transform: rotate(-10deg) skew(50deg);
  -ms-transform: rotate(-10deg) skew(50deg);
  -moz-transform: rotate(-10deg) skew(50deg);
  transform: rotate(-10deg) skew(50deg);
}

.csstransforms .cn-wrapper li:nth-child(2) {
  -webkit-transform: rotate(30deg) skew(50deg);
  -ms-transform: rotate(30deg) skew(50deg);
  -moz-transform: rotate(30deg) skew(50deg);
  transform: rotate(30deg) skew(50deg);
}

.csstransforms .cn-wrapper li:nth-child(3) {
  -webkit-transform: rotate(70deg) skew(50deg);
  -ms-transform: rotate(70deg) skew(50deg);
  -moz-transform: rotate(70deg) skew(50deg);
  transform: rotate(70deg) skew(50deg)
}

.csstransforms .cn-wrapper li:nth-child(4) {
  -webkit-transform: rotate(110deg) skew(50deg);
  -ms-transform: rotate(110deg) skew(50deg);
  -moz-transform: rotate(110deg) skew(50deg);
  transform: rotate(110deg) skew(50deg);
}

.csstransforms .cn-wrapper li:nth-child(5) {
  -webkit-transform: rotate(150deg) skew(50deg);
  -ms-transform: rotate(150deg) skew(50deg);
  -moz-transform: rotate(150deg) skew(50deg);
  transform: rotate(150deg) skew(50deg);
}

.csstransforms .cn-wrapper li:nth-child(odd) a {
  background-color: #a11313;
  background-color: hsla(0, 88%, 63%, 1);
}

.csstransforms .cn-wrapper li:nth-child(even) a {
  background-color: #a61414;
  background-color: hsla(0, 88%, 65%, 1);
}

/* active style */
.csstransforms .cn-wrapper li.active a {
  background-color: #b31515;
  background-color: hsla(0, 88%, 70%, 1);
}


/* hover style */
.csstransforms .cn-wrapper li:not(.active) a:hover,
.csstransforms .cn-wrapper li:not(.active) a:active,
.csstransforms .cn-wrapper li:not(.active) a:focus {
  background-color: #b31515;
  background-color: hsla(0, 88%, 70%, 1);
}

/* fallback */
.no-csstransforms .cn-button {
  display: none;
}

.no-csstransforms .cn-wrapper li {
  position: static;
  float: left;
  font-size: 1em;
  height: 5em;
  width: 5em;
  background-color: #eee;
  text-align: center;
  line-height: 5em;
}

.no-csstransforms .cn-wrapper li a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  font-size: 1.3em;
  border-right: 1px solid #ddd;
}

.no-csstransforms .cn-wrapper li a:last-child {
  border: none;
}

.no-csstransforms .cn-wrapper li a:hover,
.no-csstransforms .cn-wrapper li a:active,
.no-csstransforms .cn-wrapper li a:focus {
  background-color: white;
}

.no-csstransforms .cn-wrapper li.active a {
  background-color: #6F325C;
  color: #fff;
}

.no-csstransforms .cn-wrapper {
  font-size: 1em;
  height: 5em;
  width: 25.15em;
  bottom: 0;
  margin-left: -12.5em;
  overflow: hidden;
  position: fixed;
  z-index: 10;
  left: 50%;
  border: 1px solid #ddd;
}

@media screen and (max-width:480px) {
  .csstransforms .cn-wrapper {
    font-size: .68em;
  }

  .cn-button {
    font-size: 1em;
  }

  .csstransforms .cn-wrapper li {
    font-size: 1.52em;
  }
}

@media screen and (max-width:320px) {
  .no-csstransforms .cn-wrapper {
    width: 15.15px;
    margin-left: -7.5em;
  }

  .no-csstransforms .cn-wrapper li {
    height: 3em;
    width: 3em;
  }
}