@charset "utf-8";
/*----- HTML5 -----*/
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display:block;
}
audio, canvas, video {
  display:inline-block;
}
audio:not([controls]) {
  display:none;
  height:0;
}
[hidden], template {
  display:none;
}


/* Base */
* {
  margin:0;
  padding:0;
}
html {
  font-family:sans-serif;
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  
  -webkit-overflow-scrolling:touch;
  overflow-scrolling:touch;
}
body {
  position:relative;
  background:#FFF;
  color:#000;
  font:12px/24px "Microsoft YaHei", SimSun, Arial, Helvetica, sans-serif;
  cursor:default;
}

.unfold body {
  height:100%;
  overflow:hidden;
}
.unfold .main-r {
  height:100%;
  overflow:hidden;
}

ol, ul {list-style:none;}
img {
  display:inline;
  border:none;
}
table {
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
}
.hide {display:none;}
.clearfix{zoom:1;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content: " ";clear:both;height:0;}
a {
  color:#333;
  background:transparent;
  outline:none;
  text-decoration:none;
  cursor:pointer;
  transition:color 0.3s ease;
}
a:hover {
  color:#b61a1a;
  text-decoration:underline;
}


/* wrap */
.wrap {
  width:980px;
  margin:0 auto;
  overflow:hidden;
}


/* body-top */
.body-top {
  position:relative;
  width:100%;
  height:70px;
  background:#3b3b3b;
  border-top:10px solid #161616;
}
.body-top .logo a {
  position:absolute;
  top:-10px;
  margin-left:10px;
  width:152px;
  height:168px;
  background:url(../../_images/ccmh/logo.png) no-repeat;
  background-size:contain;
  text-indent:-999px;
  white-space:nowrap;
  overflow:hidden;
}

.body-top .nav {
  float:right;
  width:725px;
  color:#f8f7f4;
  font-size:16px;
  line-height:70px;
}
.body-top .nav li {
  float:left;
  margin-right:20px;
}
.body-top .nav li a {
  color:#f8f7f4;
}
.body-top .nav li.last {
  float:right;
  margin-right:30px;
  color:#AAA;
}
.body-top .nav li.last a {
  color:#AAA;
}


.body-foot {
  width:100%;
  margin-top:50px;
}

/* footer */
.footer{ width:100%; height:40px; background:#585858; line-height:40px;color:#9e9e9e;}
.footer-con{width:980px; margin:0 auto; background:#585858;}
.footer-nav{padding-left:15px;}
.footer-nav a{padding:0 10px;color:#9e9e9e;}
.footer .copyright{ float:right; margin-right:25px;}



/* main-l */
.main-l {
  float:left;
  width:200px;
  margin-top:120px;
  padding-bottom:340px;
  background:url(../../_images/ccmh/icon2.png) right bottom no-repeat;
  overflow:hidden;
}

.main-l .logo1 {
  width:170px;
  height:157px;
  margin:0 auto;
  background:url(../../_images/ccmh/icon1.png) no-repeat;
  text-indent:-999px;
  white-space:nowrap;
  overflow:hidden;
}

.btn-fold,
.btn-unfold {
  display:none;
}
.btn-fold {
  position:absolute;
  bottom:10px;
  right:15px;
 width:40px;
  height:40px;
  background:url(../../_images/ccmh/btn1.png) center no-repeat;
  background-size:contain;
}

.btn-unfold {
  position:fixed;
  bottom:55px;
  left:10px;
  width:40px;
  height:40px;
  background:url(../../_images/ccmh/btn4.png) center no-repeat;
  background-size:contain;
  opacity:0.5;
}


/* listBox */
.listBox {
  float:left;
  width:100%;
  margin-top:70px;
}
.listBox .item {
  margin-top:30px;
}
.listBox .caption {
  height:38px;
  background:url(../../_images/ccmh/title1.png) no-repeat;
  border-right:3px solid #fc738f;
  text-indent:-999px;
  white-space:nowrap;
  overflow:hidden;
  cursor:pointer;
  transition:background-color 0.4s ease;
}

.listBox .ren .caption {
  background-position:82% 2px;
  border-color:#fc738f;
}
.listBox .ren:hover .caption {
  background-position:82% -62px;
}
.listBox .ren.current .caption {
  background-position:center -62px;
}

.listBox .wu .caption {
  background-position:82% -126px;
  border-color:#fc8a73;
}
.listBox .wu:hover .caption {
  background-position:82% -190px;
}
.listBox .wu.current .caption {
  background-position:center -190px;
}

.listBox .cheng .caption {
  background-position:82% -254px;
  border-color:#ff5252;
}
.listBox .cheng:hover .caption {
  background-position:82% -318px;
}
.listBox .cheng.current .caption {
  background-position:center -318px;
}

.listBox .shi .caption {
  background-position:82% -382px;
  border-color:#50b345;
}
.listBox .shi:hover .caption {
  background-position:82% -446px;
}
.listBox .shi.current .caption {
  background-position:center -446px;
}

.listBox .shu .caption {
  background-position:82% -510px;
  border-color:#5ed39d;
}
.listBox .shu:hover .caption {
  background-position:82% -574px;
}
.listBox .shu.current .caption {
  background-position:center -574px;
}

.listBox .li .caption {
  background-position:82% -638px;
  border-color:#5ae4d8;
}
.listBox .li:hover .caption {
  background-position:82% -702px;
}
.listBox .li.current .caption {
  background-position:center -702px;
}

.listBox .yue .caption {
  background-position:82% -766px;
  border-color:#9ede65;
}
.listBox .yue:hover .caption {
  background-position:82% -830px;
}
.listBox .yue.current .caption {
  background-position:center -830px;
}


.listBox .mei .caption {
  background-position:82% -894px;
  border-color:#fa73fc;
}
.listBox .mei:hover .caption {
  background-position:82% -958px;
}
.listBox .mei.current .caption {
  background-position:center -958px;
}

.listBox .wei .caption {
  background-position:82% -1023px;
  border-color:#c569ff;
}
.listBox .wei:hover .caption {
  background-position:82% -1086px;
}
.listBox .wei.current .caption {
  background-position:center -1086px;
}

.listBox .shige .caption {
  background-position:82% -1150px;
  border-color:#945afe;
}
.listBox .shige:hover .caption {
  background-position:82% -1214px;
}
.listBox .shige.current .caption {
  background-position:center -1214px;
}





.listBox .caption:hover,
.listBox .caption:focus,
.listBox .current .caption {
  background-color:#dcdcdc;
}


.listBox .list {
  display:none;
  margin-top:20px;
}
.listBox .list li {
  padding:10px 0;
  background:#f0f0f0;
  border-bottom:1px dashed #a2a2a2;
  color:#000;
  font-size:12px;
  line-height:1;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
}
.listBox .list li a {
  color:#000;
}
.listBox .list li a:hover,
.listBox .list li.current a {
  color:#b61a1a;
}


/* main-r */
.main-r {
  float:right;
  width:600px;
  margin-top:150px;
  padding-right:70px;
  overflow:hidden;
}

.article-info {
  width:100%;
  padding:10px 0;
  border-top:1px dashed #bfbfbf;
  border-bottom:1px dashed #bfbfbf;
  letter-spacing:1px;
}
.article-info .title {
  width:96%;
  padding:5px 2% 5px;
  background:#f0f0f0;
  font-size:30px;
  line-height:1.3;
  font-weight:bold;
}
.article-info .info {
  width:96%;
  padding:10px 2% 5px;
  background:#f0f0f0;
  color:#787878;
  font-size:12px;
  line-height:1.6;
}

.article-info .info span {
  margin:0 25px 0 0;
}

.article {
  padding:35px 0;
  border-bottom:1px dashed #bfbfbf;
  font-size:14px;
  line-height:1.8;
  text-align:justify;
  text-justify:distribute;
  word-wrap:break-word;

}
.article p {
  text-indent:2em;
}
.article img {
  display:block;
  max-width:100%;
  height:auto;
  margin:0 auto;
}

.related {
  width:360px;
  margin-top:55px;
}
.related-top {
  width:100%;
  padding-bottom:10px;
  border-bottom:1px solid #737373;
}
.related-top h4 {
  color:#b61a1a;
  font-size:14px;
  line-height:16px;
  text-indent:3px;
}
.related-con {
  padding-left:3px;
  line-height:1;
  overflow:hidden;
  white-space:nowrap;
}

.related-con a {
  float:left;
  clear:both;
  margin-top:10px;
}


/* btn-goTop */
.btn-goTop {
  display:none;
  position:fixed;
  z-index:5;
  bottom:30px;
  right:30px;
  
  width:60px;
  height:60px;
  background:url(../../_images/ccmh/btn3.png) center no-repeat;
  background-size:contain;
  cursor:pointer;
  opacity:0.75;
}


/* Width <= 980 */
@media (max-width:980px) {
  .wrap {
    width:100%;
  }
  
  /* body-top */
  .body-top {
    height:50px;
    border-top:5px solid #161616;
  }
  .body-top .logo a {
    position:absolute;
    top:-5px;
    margin-left:4px;
    width:90px;
    height:100px;
  }
  
  .body-top .nav {
    width:auto;
    font-size:13px;
    line-height:50px;
    font-weight:bold;
  }
  .body-top .nav li {
    float:left;
    margin-right:2em;
  }
  .body-top .nav li.last {
    float:right;
    margin-right:10px;
    color:#AAA;
  }
  
  .body-foot {
    margin-top:40px;
  }
  
  /* footer */
  .footer{
    height:auto;
    padding:10px 0;
    line-height:1.6;
    font-weight:bold;
  }
  .footer-con {
    width:100%;
    text-align:center;
  }
  .footer-nav {
    padding:0;
  }
  .footer .copyright {
    float:none;
    display:block;
    margin:0;
  }
  
  
  /* main-l */
  .main-l {
    position:fixed;
    z-index:9;
    top:0;
    left:-100%;
    float:none;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    background:rgba(255, 255, 255, 0.96);
    
    overflow-y:auto;
  }
  
  .main-l .logo1 {
    position:absolute;
    top:15px;
    right:15px;
    width:60px;
    height:60px;
    margin:0;
    background-size:contain;
    text-indent:-999px;
    white-space:nowrap;
    overflow:hidden;
  }
  
  .btn-fold,
  .btn-unfold {
    display:block;
  }
  
  .unfold .main-l .logo1,
  .unfold .btn-fold {
    position:fixed;
  }
  
  .btn-goTop {
    bottom:55px;
    right:10px;
    
    width:40px;
    height:40px;
    opacity:0.5;
  }
  
  
  /* listBox */
  .listBox {
    float:left;
    width:85%;
    min-height:100%;
    margin-top:0;
    padding:0 0 10px;
    background:rgba(220, 220, 220, 0.4);
  }
  .listBox .item {
    margin:0;
    padding:10px 0;
  }
  .listBox .caption {
    height:38px;
    background:url(../../_images/ccmh/title1.png) no-repeat;
    border-right:3px solid #fc738f;
    text-indent:-999px;
    white-space:nowrap;
    overflow:hidden;
    cursor:pointer;
    transition:background-color 0.4s ease;
  }
  
  .listBox .list {
    margin-top:0;
  }
  .listBox .list li {
    font-size:16px;
  }

  
  
  /* main-r */
  .main-r {
    float:none;
    width:90%;
    margin-top:60px;
    padding:0 5%;
    overflow:hidden;
  }
  
  .article-info .title {
    font-size:24px;
  }
  .article-info .info span {
    margin:0 1.5em 0 0;
  }
  
  .article {
    padding:15px 0;
    font-size:18px;
    line-height:1.6;
  }
  .article p {
    padding:10px 0;
  }

  .related {
    width:80%;
    margin-top:30px;
  }
  
  .related-top {
    width:100%;
    padding-bottom:5px;
    border-bottom:2px solid #737373;
  }
  .related-top h4 {
    color:#b61a1a;
    font-size:18px;
    line-height:1;
    text-indent:5px;
  }
  .related-con {
    padding-left:5px;
    font-size:16px;
    overflow:hidden;
    white-space:nowrap;
  }
  
}


/* 橫屏： Width <= 600 */
@media (max-width:600px) {
  .main-l .logo1 {
    width:50px;
    height:50px;
  }
  
  /* listBox */
  .listBox {
    width:83%;
  }
}


@media (max-width:450px) {
  .main-l .logo1 {
    width:40px;
    height:40px;
  }
  
  /* listBox */
  .listBox {
    width:83%;
  }
}

@media (max-width:380px) {
  .main-l .logo1 {
    width:40px;
    height:40px;
  }
  
  /* listBox */
  .listBox {
    width:78%;
  }
}

@media (max-width:290px) {
  .main-l .logo1 {
    width:30px;
    height:30px;
  }
  
  .btn-fold {
    width:30px;
    height:30px;
  }
  
  /* listBox */
  .listBox {
    width:78%;
  }
}



/* 豎屏： Width <= 479 */
@media (max-width:479px) {
  /* body-top */
  .body-top .nav li {
    margin-right:1.2em;
  }
  
  /* footer */
  .footer-nav a {
    padding:0 8px;
  }


  /* main-r */
  .related {
    width:100%;
    margin-top:30px;
  }
}


/* Width <= 320 */
@media (max-width:320px) {
  .body-top .nav {
    font-size:12px;
  }
  .body-top .nav li {
    margin-right:1em;
  }
  .body-top .nav li.last {
    margin-right:6px;
  }
}