/* CSS Document */
*{ padding:0;margin:0; list-style:none;}
img{ border: none;}

.row{ display:flex;}
.row .col-24{ width: 100%;}
.row .col-12{ width: 50%;}
.row .col-6{ width: 33.33%;}
.row .col-4{ width: 25%;}
.row .col-3{ width: 16.66%;}

.wrapper{height: 100%; /*display: flex;align-items: center;*/ margin: auto; position: relative;}
@media only screen and (max-width:480px) {
	.wrapper{ width: auto; margin: 0 20px;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
	.wrapper{ width: auto; margin: 0 20px;}
}
@media only screen and (min-width:1025px) {
	.wrapper{ width: 95%;}
}

.limited{ display: none !important;}

.navList{ display:flex;}
.navList li{ padding:0 1em;}

.modalNavList{}
.modalNavList li{ color: #fff; border-bottom: solid 1px #666; line-height: 4em; text-align: center;}
.modalNavList li a{ color: #fff; }


.subNavList{}
.subNavList li{ line-height: 3em;}



.articleList{ padding: 0px 0;}
.articleList li{ border-bottom: solid 1px #ddd; position: relative;}
.articleList .preview{ width: 200px; height:200px; border: solid 1px #ddd;overflow: hidden;}
.articleList .preview img{ width: 100%; height: 100%; object-fit: cover;}
.articleList .columnName{}
.articleList .title{ overflow: hidden;}
.articleList .desc{ opacity: 0.8;overflow: hidden;}
.articleList .createDate{ opacity: 0.8;}



.articleList.attachStyle_1{}
.articleList.attachStyle_1 li{ display: flex; justify-content: space-between;line-height: 3em; padding: 0 20px;}
.articleList.attachStyle_1 .preview{ display: none;}
.articleList.attachStyle_1 .columnName{ margin-right: 10px;}
.articleList.attachStyle_1 .title{ margin-right: auto;}
.articleList.attachStyle_1 .desc{ display: none;}




.articleList.attachStyle_2{}
.articleList.attachStyle_2 li{ line-height: 3em; padding: 10px 0; }
.articleList.attachStyle_2 .preview{ display: none;}
.articleList.attachStyle_2 .columnName{display: none;}
.articleList.attachStyle_2 .title{line-height: 3em;font-size: 1.2em;}
.articleList.attachStyle_2 .desc{line-height: 2em;font-size: 0.8em; }
.articleList.attachStyle_2 .createDate{line-height: 2em;font-size: 0.8em; }



.articleList.attachStyle_3{}
.articleList.attachStyle_3 li{ line-height: 3em; padding: 20px 0; padding-left: 200px; height: 160px;}
.articleList.attachStyle_3 .preview{ width: 160px; height:160px; position: absolute; left: 20px; top: 20px;}
.articleList.attachStyle_3 .columnName{ display: none;}
.articleList.attachStyle_3 .title{line-height: 1.5em; max-height:4.5em;font-size: 1.2em;}
.articleList.attachStyle_3 .desc{ line-height: 1.5em; height: 3em; margin:10px 0; }


.articleList.attachStyle_4{ display: flex; justify-content:space-between; flex-wrap: wrap;}
.articleList.attachStyle_4 li{width: 200px; height: 350px; border: none;}
.articleList.attachStyle_4 .preview{ margin-bottom: 10px;}
.articleList.attachStyle_4 .columnName{ display: none;}
.articleList.attachStyle_4 .title{line-height: 3em; height: 3em;font-size: 1.2em;}
.articleList.attachStyle_4 .desc{line-height: 2em; height: 4em;}
.articleList.attachStyle_4 .createDate{line-height: 2em;}



@media only screen and (max-width:480px) {
	.articleList.attachStyle_4 li{width: 150px; height: 300px; border: none;}
	.articleList.attachStyle_4 .preview{ width: 150px; height: 150px;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
}
@media only screen and (min-width:1025px) {
}



.articleDetail{}
.articleDetail .title{ line-height: 3em; text-align: center;}
.articleDetail .info{ line-height: 2em; text-align: center;}
.articleDetail .content{ line-height: 2em; padding: 20px 0;}






.pagination{ padding: 20px 0;line-height: 2em;}

.pagination{ display:flex; flex-wrap: wrap;}
.pagination li{ width: auto; height: 30px; margin-right:10px; margin-bottom: 10px;}
.pagination li a{ width:100%; height:100%; line-height: 30px; background-color:#eee; display:block; text-align:center;    padding: 0 10px; border:solid 1px #ddd; cursor: pointer;box-sizing: border-box;}
.pagination li a:hover{ background-color: #ddd;}
.pagination li.active a{ background-color: #999; color: #fff;}


.pagination li.prev{ width: 70px;}
.pagination li.next{ width: 70px;}




.inputForm{ width:100%; max-width: 600px; margin: auto}
.inputForm ul{}
.inputForm li{ padding:5px 0;}
.inputForm .label{ padding:5px 0; padding:0; display: flex; font-weight: bold;}
.inputForm .required{margin-right:5px; color:  #f60; display: inline-block;}
.inputForm .value{ padding:5px 0;
/*display: flex; align-items: center;*/
    
}
.inputForm .tips{ font-size: 10px; color: #666;}
.inputForm input[type=text],.inputForm input[type=password],.inputForm input[type=email]{ height:20px; line-height:20px; width:100%; padding:5px 0; margin:0; border:none; border:solid 1px #ddd; border-radius:5px; text-indent: 1em; margin-right: 10px;}
.inputForm select{ height:30px; line-height:30px; width:100%; padding:5px 0; margin:0; border:none; border:solid 1px #ddd; border-radius:5px;}
.inputForm input[type=button]{ height:40px; line-height:20px; width:100%; padding:5px 0; margin:0; border:none; border:none; border-radius:0; cursor: pointer;}
.inputForm .yJIdO input{
       float: left;
    width: auto !important;
    margin-top: 5px;
    margin-right: 5px;
}
.inputForm label.error{
    color: #f00;
    line-height: 1.4em;
    margin-top: 3px;
    width: 100%;    display: block;
} 
.inputForm .submitButton{ width: 100%; height: 40px; padding:5px 0; display: block; color: #fff; background-color: #00adbc; border: solid 1px #00adbc;line-height: 30px; text-align: center; font-size: 16px; margin-top: 10px; cursor: pointer;}


.tabs{}
.tabList{ display: flex;}
.tabList li{ width: 100px; height: 30px; background-color: #eee; text-align: center; line-height: 30px; margin: 0 10px;}
.tabList li.active{ background-color: #999; font-weight: bold;}
.tabList li.active a{ color: #fff; cursor: pointer;}

.tabContentGroup{}
.tabContent{ display: none;}
.tabContent.active{ display: block;}




.numberGroup{
  display: inline-block;
}
.numberGroup div{
  display: flex;
}
.numberGroup .number{
  width: 24px;
  line-height: 24px;
  height: 24px;
  text-align: center;
  border: solid 1px #ccc;
  background: #fff;
  text-align: center;
  display: block;
}
.numberGroup .button{
  width: 24px;
  line-height: 24px;
  height: 24px;
  text-align: center;
  border: solid 1px #ccc;
  background: #fff;
  color: #666;
  border-radius: 0;
  display: block;
}
.numberGroup .button:nth-child(1){ border-right: none; cursor: pointer;}
.numberGroup .button:nth-child(3){ border-left: none; cursor: pointer;}




/*.columnContent p{ text-align:justify;}*/


.preview img{ width: 100%; height: 100%; object-fit: cover;}