@charset "UTF-8";
/* CSS Document */

/* .listCover
------------------------- */
.listCover {
    margin: 0 auto;
	text-align:center;
    padding:5px;
}
.listCover:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden; } 
  
/* .listItem
------------------------- */

.listItem, .listItem2 {
  list-style-type:none;
  margin: 8px;
  width: 210px;
  padding: 8px;
  text-align:center;
  box-shadow:0 2px 5px #aaa;
  background:#FFF;
  float: left;
}

.listItem img,.listItem2 img {
    width: 100%;
	margin-bottom:20px;
}
.listCover .active {
    background: url(../images/activeArrow.gif) no-repeat bottom center;
}
.listItem .selfRep {
    display: none;
}

 
/* .expandField
------------------------- */
.expandField {
    padding: 10px 0;
    width: 100%;
    text-align: left;
    display: block;
    background: #222;
    float: left;
    position: relative;
    overflow-y: scroll;
}
.expandField .btnClose {
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    display: block;
    background: url(../images/btnClose.gif) no-repeat top left;
    position: absolute;
    overflow: hidden;
    cursor: pointer;
}
/*.expandField .btnPrev {
    top: 220px;
    left: 0;
    width: 60px;
    height: 60px;
    display: block;
    background: url(../images/btnPrev.gif) no-repeat top left;
    position: absolute;
    overflow: hidden;
    cursor: pointer;
}
.expandField .btnNext {
    top: 220px;
    right: 0;
    width: 60px;
    height: 60px;
    display: block;
    background: url(../images/btnNext.gif) no-repeat top left;
    position: absolute;
    overflow: hidden;
    cursor: pointer;
}*/
.expandField .selfRepInner {
    padding: 50px 80px;
    text-align: center;
    position: relative;
}
.expandField .selfRepInner .secLeft {
    width: 47%;
    float: left;
	text-align: center;
}

.expandField .selfRepInner .secRight {
    width: 47%;
    float: right;
	text-align: left;
    color: #fff;
}
    .expandField .selfRepInner .secLeft img,
	.expandField .selfRepInner .secRight img {
        width: 80%;
    }	

/* =======================================
    ClearFix
======================================= */
.listCover:before,
.listCover:after,
.expandField .selfRepInner:before,
.expandField .selfRepInner:after {
    content: " ";
    display: table;
}
.listCover:after,
.expandField .selfRepInner:after {clear: both;}
.listCover,
.expandField .selfRepInner {*zoom: 1;}



@media print, screen and (max-width: 992px) {
	.expandField .selfRepInner .secLeft,
    .expandField .selfRepInner .secRight {
        width: 90%;
        float: none;
		margin:0 auto 20px;
    }	
}

@media print, screen and (max-width: 767px) {
	
.listItem, .listItem2 {
  width: 280px;
  float:none;
  margin:15px auto;
}
	
.listItem img, .listItem2 img {
	display:none; }
	.expandField .selfRepInner .secRight {
		font-size:90%; }

.expandField .btnClose {
	background-size:50%;
	background-position:top right;
}
.expandField .btnPrev {
	background-size:50%;
	background-position:top left;
}
.expandField .btnNext {
	background-size:50%;
	background-position:top right;
}
.expandField .selfRepInner {
    padding: 20px 30px; }
	.expandField .selfRepInner .secLeft img,
	.expandField .selfRepInner .secRight img {
        width: 70%;
    }	
}

@media print, screen and (max-width: 479px) {

		.expandField .selfRepInner .secRight {
		font-size:80%; }
	
}
/*2025.11add*/

.listItem:hover {
  background-color: #f9f9f9;
  transition: background-color 0.2s ease;
}
ul.listCover li.listItem,
ul.listCover li.listItem * {
  cursor: pointer !important;
}