/*
Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear
when -webkit-visibility:hidden
*/

.flip {
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateX(0);
	backface-visibility: hidden;
	transform: translateX(0);
}
.flip.out {
	-webkit-transform: rotateY(-90deg) scale(.9);
	-webkit-animation-name: flipouttoleft;
	-webkit-animation-duration: 175ms;
	transform: rotateY(-90deg) scale(.9);
	animation-name: flipouttoleft;
	animation-duration: 175ms;
}
.flip.in {
	-webkit-animation-name: flipintoright;
	-webkit-animation-duration: 225ms;
	animation-name: flipintoright;
	animation-duration: 225ms;
}
.flip.out.reverse {
	-webkit-transform: rotateY(90deg) scale(.9);
	-webkit-animation-name: flipouttoright;
	transform: rotateY(90deg) scale(.9);
	animation-name: flipouttoright;
}
.flip.in.reverse {
	-webkit-animation-name: flipintoleft;
	animation-name: flipintoleft;
}

@-webkit-keyframes flipouttoleft {
    from { -webkit-transform: rotateY(0); }
    to { -webkit-transform: rotateY(-90deg) scale(.9); }
}
@keyframes flipouttoleft {
    from { transform: rotateY(0); }
    to { transform: rotateY(-90deg) scale(.9); }
}
@-webkit-keyframes flipouttoright {
    from { -webkit-transform: rotateY(0) ; }
    to { -webkit-transform: rotateY(90deg) scale(.9); }
}
@keyframes flipouttoright {
    from { transform: rotateY(0); }
    to { transform: rotateY(90deg) scale(.9); }
}
@-webkit-keyframes flipintoleft {
    from { -webkit-transform: rotateY(-90deg) scale(.9); }
    to { -webkit-transform: rotateY(0); }
}
@keyframes flipintoleft {
    from { transform: rotateY(-90deg) scale(.9); }
    to { transform: rotateY(0); }
}
@-webkit-keyframes flipintoright {
    from { -webkit-transform: rotateY(90deg) scale(.9); }
    to { -webkit-transform: rotateY(0); }
}
@keyframes flipintoright {
    from { transform: rotateY(90deg) scale(.9); }
    to { transform: rotateY(0); }
}




/*
黑白滤镜
.item-list div.PicShow img,.item-list div.PicZoom img
{ -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:grayscale(100%); filter:gray; }

.item-list div.PicShow:hover img,.item-list div.PicZoom:hover img
{ -webkit-filter:grayscale(0); -moz-filter:grayscale(0); -ms-filter:grayscale(0); -o-filter:grayscale(0); filter:grayscale(0); filter:none; }

.ItemGroup { width:100%; display:flex; }
*/
.ItemGroup { position:relative; }
.ItemGroup:before,.ItemGroup:after,.ItemGroup *:before,.ItemGroup *:after { content:""; position:absolute; z-index:0; transition:all .5s ease; }

.item-list { min-height:90px; float:left; z-index:9; position:relative; }

.item-list dl { width:100%; height:100%; text-align:center; float:left; position:relative; }
.item-list dl dt,.item-list dl .Title { width:90%; min-height:50px; padding:0 5%; text-align:center; font-size:20px; line-height:50px; }

.item-list dl dd { width:90%; min-height:44px; line-height:22px; text-align:justify; padding:1% 5%; }
.item-list dl tt,.item-list pre { width:100%; text-align:center; display:block; }

.item-list p.History { height:65px; font-size:18pt; text-align:center; margin-top:21px; color:inherit; }
.item-list p.History .NumPlays { font-family:'Arial Black',Verdana,Geneva; font-size:39pt; font-weight:bold; line-height:65px; padding:0 2%; }
.item-list p.History sup,.item-list p.History sub { font-size:18pt; margin-left:5px; color:inherit; top:0; }
.item-list p.History sup { font-size:11.5pt; font-weight:lighter; top:-25px; }

.item-list div.first { width:100%; height:100%; text-align:center; float:left; position:relative; }
.item-list div.first:not(.last):after { content:""; position:absolute; width:2px; height:2px; right:-2px; }
.item-list div.first dl.flip-box,.item-list div.first dt.TypeName,.item-list div.first dd.Briefly { position:absolute; left:0; top:0; }
.item-list div.first dl.flip-box { width:100%; height:100%; position:absolute; left:0; top:0; }
.item-list div.first dl.flip-box dt.TypeName { height:50px; font-size:15pt; line-height:50px; top:50%; margin-top:-50px; }
.item-list div.first dl.flip-box dd.Briefly { top:50%; }

.item-list div.PicShow,.item-list div.PicZoom { width:130px; height:130px; text-align:center; border-radius:50%; margin:20px auto 10px; }
.item-list div.PicShow img,.item-list div.PicZoom img { width:100%; height:100%; }

.item-list div.IocnShow { margin:0; float:left; }
.item-list div.Readtxt .Title,.item-list div.Readtxt pre { text-align:left; }
.item-list div.Readtxt .Title { min-height:35px; line-height:35px; padding-top:18px; }

.item-list:hover div.PicZoom img {
	transform: scale(1.2);
	-webkit-transform: scale(1.2);
}

.item-list:hover div.PicZoom img.Circle {
	transform: scale(1);
	-webkit-transform: scale(1);
}

.item-list:hover div.PicZoom img.Circle {
	transform:rotate(360deg);
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
}

.item-list div.TypeShow,.item-list div.TypeShow img { width:100%; height:100%; margin:0 auto; background-size:auto 100%; }
.item-list dl:hover,.item-list dl.out,.item-list dl:hover.out { background-color:rgba(0,0,0,0); }

.item-list tt.More { width:100%; text-align:center; position:absolute; left:0; bottom:36px; display:inline-block; }
.item-list tt.More span { padding:8px 12px; background-color:#F8F8F8; color:#555; }
.item-list tt.More,.item-list tt.More span { font:normal normal 9pt/32px Arial; }
.item-list:hover tt.More span { color:#555; }


/* 六边形带阴影 */
ul.Hexagon { width:100%; height:100%; margin-top:80px; padding:0; text-align:center; line-height:25px; }
ul.Hexagon dt,ul.Hexagon dd,ul.Hexagon tt.More { width:90%; padding:0 5%; text-align:center; position:absolute; left:0; z-index:1; }
ul.Hexagon dt { text-align:center; margin-top:85px; font-size:20px; z-index:2; }

ul.Hexagon tt.More { bottom:-50%; margin-bottom:0; z-index:2; }
ul.Hexagon:hover tt.More { height:30px; padding:8px 5%; bottom:0; }
ul.Hexagon:hover dt,ul.Hexagon tt.More { height:0; }

ul.Hexagon dd { height:100%; position:relative; padding:130px 5% 5px; text-align:justify; }
ul.Hexagon:hover dd { padding-top:90px; padding-bottom:30px; }

ul.Hexagon .SixAngle {
	width:125px; height:150px; background-color:#CCC; position:absolute; left:50%; margin-left:-62.5px; margin-top:-75px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
ul.Hexagon .SixAngle .Sharp {
	width:100%; height:100%; line-height:100%; text-align: center;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

ul.Hexagon .SixEdge {
	width:150px; height:125px; background-color:#CCC; position:absolute; left:50%; margin-left:-75px; margin-top:-63px;
    clip-path: polygon(25% 0%,75% 0%,100% 50%, 75% 100%, 25% 100%, 0% 50%);
    -webkit-clip-path: polygon(25% 0%,75% 0%,100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
ul.Hexagon .SixEdge .Sharp {
	width:100%; height:100%; line-height:100%; text-align: center;
    clip-path: polygon(25% 0%,75% 0%,100% 50%, 75% 100%, 25% 100%, 0% 50%);
    -webkit-clip-path: polygon(25% 0%,75% 0%,100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

ul.Hexagon img { width:100%; height:100%; background-size:auto 125px; background-position:center; background-repeat:no-repeat; }
ul.Hexagon:hover img { transform:scale(1.1); -webkit-transform:scale(1.1); }



/* 四边矩形带阴影 */
ul.Rectangle
{ width:calc(100% - 10px); height:calc(100% - 20px); margin:15px 5px 5px; box-sizing:content-box; position:relative;
  transition:All .4s ease-in-out;
  -webkit-transition:All .4s ease-in-out;
  -moz-transition:All .4s ease-in-out;
  -o-transition:All .4s ease-in-out;
}
ul.Rectangle:hover
{
  box-shadow:0 5px 10px #CCC;
  -webkit-box-shadow:0 5px 10px #CCC;
  -moz-box-shadow:0 5px 10px #CCC;
  transform:translate(0,-5px);
  -webkit-transform:translate(0,-5px);
  -moz-transform:translate(0,-5px);
  -ms-transform:translate(0,-5px);
  -o-transform:translate(0,-5px);
}

ul.Rectangle.Pics { padding-bottom:5px; margin-top:10px; position:relative; }
ul.Rectangle.Pics:hover
{
  box-shadow:0 0 10px #CCC;
  -webkit-box-shadow:0 0 10px #CCC;
  -moz-box-shadow:0 0 10px #CCC;
  transform:translate(0,0);
  -webkit-transform:translate(0,0);
  -moz-transform:translate(0,0);
  -ms-transform:translate(0,0);
  -o-transform:translate(0,0);
}


ul.Rectangle .TextBox { text-align:center; position:relative; }
ul.Rectangle dt.IMG,ul.Rectangle .PicBox { width:100%; height:150px; text-align:center; position:relative; }
ul.Rectangle dd,ul.Rectangle .Remarks { width:90%; min-height:44px; line-height:22px; text-align:justify; padding:18px 5%; }

ul.Rectangle p.Title { width:90%; height:0; text-align:center; padding:0 5%; position:absolute; bottom:0; background:rgba(0,0,0,0); }
ul.Rectangle:hover p.Title { height:30px!important; padding:7.5px 5%; font-size:20px; color:#FFF!important; background:rgba(0,0,0,.5); }

ul.Rectangle img { width:100%; height:auto; margin:0; padding:0; }
ul.Rectangle img { position:absolute; left:0; top:50%; transform:translateY(-50%); }


/*
ul.Rectangle img.Pic2 { -webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%); }
*/
ul.Rectangle.Pics .Remarks { margin-left:100%; text-align:justify; line-height:1.5; }
ul.Rectangle.Pics .ReadText { width:85%; height:90%; padding:15px 7.5%; position:absolute; left:0; top:0; margin-left:0; text-align:center; }
ul.Rectangle.Pics dt.Title { width:100%; text-align:center; font-size:20px; line-height:1.5; font-weight:bold; margin-top:10px; }
ul.Rectangle.Pics tt.More { font-size:12px; line-height:1.5; bottom:60px; clear:both; }

ul.Rectangle.Pics img.Pic1,ul.Rectangle.Pics:hover img.Pic2,ul.Rectangle.Pics:hover .ReadText { margin-left:-100%; }
ul.Rectangle.Pics img.Pic2,ul.Rectangle.Pics:hover img.Pic1,ul.Rectangle.Pics:hover .Remarks { margin-left:0; }


.item-list dl,.item-list dl:hover,.item-list tt.More span,.item-list:hover tt.More span,.item-list div img,.item-list div:hover img,
.item-list ul,.item-list ul:hover,.item-list ul dd,.item-list ul:hover dd,.item-list ul div,.item-list ul:hover div,
.item-list ul p,.item-list ul:hover p,.item-list ul tt,.item-list ul:hover tt,.item-list ul dt,.item-list ul:hover dt
{ transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; }



/* 菱形布局样式 */
.Diamond div.box { background:#FFF; float:left; border:1px solid #DDD; box-sizing:border-box; position:absolute; z-index:88;
/* Rotate */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);

/* Rotate Origin */
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
.Diamond div.box img {
	width:110%; height:110%;
	position:absolute; margin-left:-5%; margin-top:-5%; z-index:66;
    -webkit-transform: rotate(45deg) scale(1);
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -o-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);

	-webkit-transition:all .2s ease-in;
	-moz-transition:all .2s ease-in;
	-ms-transition:all .2s ease-in;
	transition:all .2s ease-in;
}

.Diamond div.box:hover img {
    -webkit-transform: rotate(45deg) scale(1.3);
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -o-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}



.Diamond.A_Style  { min-height:500px; max-height:500px; position:relative; margin:0 auto; }
.Diamond.A_Style div.box { width:200px; height:200px; margin-top:9%; margin-left:12.5%; }

.Diamond.A_Style div#Case1 { top:0; left:0; }
.Diamond.A_Style div#Case2 { top:0; left:25%; }
.Diamond.A_Style div#Case3 { top:0; left:50%; }
.Diamond.A_Style div#Case4 { top:0; left:75%; }
.Diamond.A_Style div#Case5 { top:31%; left:12.5%; }
.Diamond.A_Style div#Case6 { top:31%; left:37.5%; }
.Diamond.A_Style div#Case7 { top:31%; left:62.5%; }
.Diamond.A_Style div#Case8 { top:31%; left:25%; display:none; }
.Diamond.A_Style div#Case9 { top:31%; left:50%; display:none; }
.Diamond.A_Style div#Case10 { top:55%; left:37.5%; display:none; }



.Diamond.B_Style  { min-height:500px; max-height:500px; position:relative; margin:0 auto; }
.Diamond.B_Style div.box { width:170px; height:170px; margin-top:6%; margin-left:12.5%; } 

.Diamond.B_Style div#Case1 { top:0; left:0; }
.Diamond.B_Style div#Case2 { top:0; left:21.35%; }
.Diamond.B_Style div#Case3 { top:0; left:53.7%; }
.Diamond.B_Style div#Case4 { top:0; left:74.75%; }
.Diamond.B_Style div#Case5 { top:25.7%; left:10.65%; }
.Diamond.B_Style div#Case6 { top:20.7%; left:37.5%; width:258px; height:258px; }
.Diamond.B_Style div#Case7 { top:25.7%; left:64.3%; }
.Diamond.B_Style div#Case8 { top:51.5%; left:0%; }
.Diamond.B_Style div#Case9 { top:51.5%; left:21.35%; }
.Diamond.B_Style div#Case10 { top:51.5%; left:53.7%; }
.Diamond.B_Style div#Case11 { top:51.5%; left:74.75%; }



.Diamond.C_Style  { min-height:500px; max-height:500px; position:relative; margin:0 auto; }
.Diamond.C_Style div.box { width:160px; height:160px; margin-top:7%; margin-left:12.5%; } 

.Diamond.C_Style div#Case1 { top:0; left:-2.5%; }
.Diamond.C_Style div#Case2 { top:0; left:17.5%; }
.Diamond.C_Style div#Case3 { top:0; left:37.5%; }
.Diamond.C_Style div#Case4 { top:0; left:57.5%; }
.Diamond.C_Style div#Case5 { top:0%; left:77.5%; }
.Diamond.C_Style div#Case6 { top:23.8%; left:7.5%; }
.Diamond.C_Style div#Case7 { top:23.8%; left:27.5%; }
.Diamond.C_Style div#Case8 { top:23.8%; left:47.5%; }
.Diamond.C_Style div#Case9 { top:23.8%; left:67.5%; }
.Diamond.C_Style div#Case10 { top:47.6%; left:17.5%; }
.Diamond.C_Style div#Case11 { top:47.6%; left:37.5%; }
.Diamond.C_Style div#Case12 { top:47.6%; left:57.5%; }