/*
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.in {
	-webkit-animation-name: flipintoright;
	-webkit-animation-duration: 320ms;
	animation-name: flipintoright;
	animation-duration: 320ms;
}
.flip.out {
	-webkit-transform: rotateY(-90deg) scale(.9);
	-webkit-animation-name: flipouttoleft;
	-webkit-animation-duration: 320ms;
	transform: rotateY(-90deg) scale(.9);
	animation-name: flipouttoleft;
	animation-duration: 320ms;
}
.flip.in.reverse {
	-webkit-animation-name: flipintoleft;
	animation-name: flipintoleft;
}
.flip.out.reverse {
	-webkit-transform: rotateY(90deg) scale(.9);
	-webkit-animation-name: flipouttoright;
	transform: rotateY(90deg) scale(.9);
	animation-name: flipouttoright;
}

@-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.ShowIcon 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.ShowIcon:hover img
{ -webkit-filter:grayscale(0); -moz-filter:grayscale(0); -ms-filter:grayscale(0); -o-filter:grayscale(0); filter:grayscale(0); filter:none; }

[class^=ICONGroup] { width:100%; display:flex; }
*/

[id^=ICONGroup],.Item-list,.Item-list dl,.Item-list div.first,.Item-list div.ShowIcon { box-sizing:border-box; position:relative; }
[id^=ICONGroup]:before,[id^=ICONGroup]:after,[id^=ICONGroup] *:before,[id^=ICONGroup] *:after { content:""; position:absolute; z-index:0; transition:all .5s ease; }

.Item-list { min-height:90px; float:left; z-index:8; }
.Item-list dl { width:100%; height:100%; font-size:10.5pt; text-align:center; float:left; }
.Item-list dl dt,.Item-list dl dd,.Item-list dl [class*="Title"],.Item-list .PlayNums { width:100%; padding:0 5%; text-align:center; box-sizing:border-box; position:relative; }

.Item-list dl .Title { height:50px; font-size:20px; line-height:65px; }
.Item-list dl .Title span { width:auto; height:100%; font-size:inherit; display:inline-block; padding:0; position:relative; }
.Item-list dl .Title span:before { width:0; height:1px; left:50%; top:93%; background-color:#333; z-index:0; }
.Item-list dl .ETitle { font-size:16px; line-height:25px; }

.Item-list dd { min-height:44px; text-align:justify; padding:1% 5%; }
.Item-list tt,.Item-list pre { width:100%; text-align:center; display:inline-block; }
.Item-list pre t { font-size:24px; line-height:1.5; padding:2%; }
.Item-list *,.Item-list a,#HOT_Body .Item-list a { color:inherit; }

.Item-list .PlayNums { font-family:'Arial Black',Verdana,Geneva;font-size:36pt;line-height:65px;font-weight:bold;white-space:nowrap; }
.Item-list .ItemNums { height:65px; font-size:18pt; text-align:center; margin-top:8px; color:inherit; }
.Item-list .ItemNums sup,.Item-list .ItemNums sub { font-size:inherit;color:inherit;margin-left:5px;top:0; }
.Item-list .ItemNums sup { top:-25px; }

.Item-list div.ShowIcon { width:130px; height:130px; text-align:center; border-radius:50%; margin:20px auto 10px; z-index:1; }
.Item-list div.ShowIcon img { width:100%; height:100%; transition:all .5s ease; }


.Item-list:hover div.ShowIcon img {
	transform:scale(1.2);
}

.Item-list:hover div.ShowIcon img.Circle {
	transform:rotate(360deg);
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
}

.Item-list div.ShowIcon img.Flip.out { position:absolute; left:0; top:0; transform:translate(0,0); }
.Item-list:hover div.ShowIcon img.Flip,.Item-list div.ShowIcon img.Flip.out {
	transform: rotateY(-90deg);
	animation-name: flipouttoleft;
	animation-duration: 320ms;
	-webkit-transform: rotateY(-90deg);
	-webkit-animation-name: flipouttoleft;
	-webkit-animation-duration: 320ms;
}
.Item-list:hover div.ShowIcon img.Flip.out {
	transform: rotateY(0deg);
	animation-duration: 320ms;
	-webkit-transform: rotateY(0deg);
	-webkit-animation-duration: 320ms;
}


.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%; font:normal normal 9pt/32px Arial; text-align:center; position:absolute; left:0; bottom:5%!important; display:inline-block; }
.Item-list tt.More span { font-family:Arial, Helvetica, sans-serif; font-size:inherit; line-height:inherit; color:inherit; padding:8px 12px; }

.Item-list dl.ShowPics [class*="Title"],.Item-list .ShowPics * { text-align:left; }
.Item-list dl.ShowPics div.Remarks { position:relative; box-sizing:border-box; }
.Item-list dl.ShowPics tt.More { width:auto; left:5%; }

.Item-list dl.ShowPics div.ShowIcon,.Item-list dl.ShowSize div.ShowIcon { border-radius:0; }
.Item-list dl.ShowPics div.ShowIcon img,.Item-list dl.ShowSize div.ShowIcon img { width:auto; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.Item-list dl.ShowSize div.ShowIcon img { width:100%; height:auto; }

.Item-list:hover dl.ShowPics div.ShowIcon img,.Item-list:hover dl.ShowSize div.ShowIcon img { transform:scale(1.1) translate(-45%,-45%); }
.Item-list dl.ShowPics div.ShowIcon img.Circle,.Item-list dl.ShowPics div.ShowIcon img.Flip,
.Item-list dl.ShowSize div.ShowIcon img.Circle,.Item-list dl.ShowSize div.ShowIcon img.Flip
{ transform:translate(-50%,-50%)!important; }

.Item-list dl dd.Briefly.Floattext { background-color:rgba(0,0,0,.6);color:#FFF; }
.Item-list dl dd.Floattext { padding:15% 5%;position:absolute; top:-100%; left:0; transition:all .5s ease; }
.Item-list dl:hover dd.Floattext { top:0;transition:all .5s ease;}


.Item-list div.first { width:100%; height:100%; text-align:center; float:left; }
.Item-list div.first dl.flip-box { width:100%!important; height:100%; position:absolute; left:0; top:0; }
.Item-list div.first dl.flip-box dd.Briefly { top:0; padding:15px 5%; }

.Item-list div.first div[class*=ItemShow],.Item-list div[class*=ItemShow] img { width:100%; height:100%; margin:0 auto; background-size:auto 100%!important; }
.Item-list div.first div[class*=ItemText] { width:100%; height:auto; box-sizing:border-box; position:absolute; top:50%; transform:translateY(-50%); }
.Item-list div.first div[class*=ItemText] tt.More { width:100%; text-align:center; position:inherit; margin-top:8%; }
.Item-list div.first div[class*=ItemText] dd.Briefly { width:100%; padding:15px 10%; }

.Item-list div.LeftIcon { margin:0; float:left; }
.Item-list div.RightIcon { margin:0; float:right; }
.Item-list div.AlignRight .Title,.Item-list div.AlignRight .ETitle,.Item-list div.AlignRight pre { text-align:left; }
.Item-list div.AlignRight .Title { min-height:35px; line-height:35px; padding-top:12px; }


/* 六边形带阴影 */
ul.Hexagon { width:100%; height:100%; text-align:center; line-height:25px; box-sizing:border-box; }
ul.Hexagon img { width:100%; height:100%; position:absolute; top:0; left:0; background-size:auto 100%; background-position:center; background-repeat:no-repeat; }
ul.Hexagon:hover img { transform:scale(1.1); -webkit-transform:scale(1.1); }

ul.Hexagon .SixAngleIcon {
	width:110px; height:130px; background-color:#CCC; position:absolute; left:50%; margin-left:-55px;
    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 .SixEdgeIcon {
	width:150px; height:130px; background-color:#CCC; position:absolute; left:50%; margin-left:-75px;
    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 dt,ul.Hexagon dd,ul.Hexagon .ETitle,ul.Hexagon tt.More { width:100%; padding:0 5%; text-align:center; color:inherit; box-sizing:border-box; }
ul.Hexagon dd { width:100%; padding:2% 5%; text-align:justify; color:inherit; }
ul.Hexagon dt { height:35px; margin-top:30px; font-size:20px; }
ul.Hexagon tt.ETitle { height:25px; font-size:16px; }

ul.Hexagon tt.More { height:0; bottom:-50%; margin-bottom:0; z-index:2; }
ul.Hexagon tt.More span { background-color:transparent!important; }
ul.Hexagon:hover tt.More { margin-top:0; height:50px; padding:9px 5%; bottom:0!important; }
ul.Hexagon:hover dt { height:0; display:inherit; }

ul.Hexagon.Floattext div.Readtext * { width:100%!important; text-align:center!important; box-sizing:border-box; }
ul.Hexagon.Floattext div.Readtext { width:80%!important; position:absolute; top:-100%; left:10%; opacity:0; transition:all .5s ease; }
ul.Hexagon.Floattext:hover div.Readtext { top:0; margin-top:28%!important; opacity:1; transition:all .5s ease; }
ul.Hexagon.Floattext img { width:100%; height:100%; position:absolute; top:0; left:0; }
ul.Hexagon.Floattext:hover img { width:35%; height:35%; left:32.5%; top:5%; }
ul.Hexagon.Floattext dt { height:30px; font-size:20px; }


/* 四边矩形带阴影 */
dl.Rectangle
{ width:calc(100% - 10px); height:calc(100% - 20px); margin:8px 5px 5px; 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;
}
dl.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);
}

dl.Rectangle.Pics { height:calc(100% - 10px); position:relative; }
dl.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);
}

dl.Rectangle.Textsize { width:100%; height:100%; margin:0 auto; box-shadow:0!important;transform:translate(0); }

dl.Rectangle .SeeText { text-align:center; position:relative; }
dl.Rectangle .SeeIcon { width:100%; height:150px; text-align:center; position:relative; color:#FFF!important; font-size:18px; line-height:1.5; }
dl.Rectangle dd,dl.Rectangle .Briefly { width:90%; min-height:44px; line-height:22px; text-align:justify; padding:18px 5%; }
dl.Rectangle tt.ETitle { width:90%; height:30px; text-align:center; padding:0 5%; color:inherit; display:block; }

dl.Rectangle div.SeeIcon dt.Title { width:100%; min-height:0; height:0; padding:0 5%!important; position:absolute!important; left:0; bottom:0; background:rgba(0,0,0,.6); }
dl.Rectangle div.SeeIcon dt.Title { text-align:inherit!important; color:inherit!important; font-size:inherit!important; line-height:45px!important; box-sizing:border-box!important; }
dl.Rectangle:hover div.SeeIcon dt.Title { height:50px!important; }

dl.Rectangle img.imgsty,dl.Rectangle img.js-Popuppics { width:100%; height:auto; margin:0; padding:0; }
dl.Rectangle img.imgsty,dl.Rectangle img.js-Popuppics { position:absolute; left:0; top:50%; transform:translateY(-50%); }


/*
dl.Rectangle img.Pic2 { -webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%); }
*/
dl.Rectangle.Pics .Briefly { margin-left:100%; text-align:justify; line-height:1.5; }
dl.Rectangle.Pics .SeeTitle { width:85%; height:90%; padding:15px 7.5%; position:absolute; left:0; top:0; margin-left:0; text-align:center; }
dl.Rectangle.Pics dt.Title { height:55px; font-size:22px; line-height:55px; font-weight:bold; color:inherit; position:relative; background-color:transparent; }
dl.Rectangle.Pics tt.More { font-size:12px; line-height:1.5; bottom:50px; clear:both; }

dl.Rectangle.Pics img.Pic1,dl.Rectangle.Pics:hover img.Pic2,dl.Rectangle.Pics:hover .Briefly { margin-left:0; }
dl.Rectangle.Pics img.Pic2,dl.Rectangle.Pics:hover img.Pic1,dl.Rectangle.Pics:hover .SeeTitle { margin-left:-100%; }

.Item-list div,.Item-list *:not(.Briefly) { transition:all .05s ease; }
.Item-list,.Item-list:hover *,.Item-list dl { transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; }



/* ClaItem 布局样式 */
[id^=ClaItem] { display:flex; }
[id^=ClaItem] * { text-align:center; position:relative; }
[id^=ClaItem] div.ClaItem { box-sizing:border-box; float:left; flex:1; }
[id^=ClaItem] div.ShowIcon { width:100%; height:130px; border-radius:0; margin:20px auto 10px; }
[id^=ClaItem] div.ShowIcon img { max-width:100%; height:100%; }
[id^=ClaItem] dl dt,[id^=ClaItem] dl dd { width:100%; }



/* 菱形布局样式 */
.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);

/* 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%; }