@charset "utf-8";

.list:before,.list:after { content:""; position:absolute; transition:all .5s ease; z-index:1; }
.IMG_List_1 div.list { width:100%; height:auto; display:inline; float:left; position:relative; box-sizing:border-box; }

.IMG_List_2 .list { width:calc(95%/2); display:inline; margin-bottom:3%; float:left; position:relative; box-sizing:border-box; }
.IMG_List_2 .list:nth-child(even) { margin-left:5%; }
.IMG_List_2 .list:nth-child(odd) { clear:both; }


.IMG_List_3 .list { width:calc(90%/3); display:inline; margin-bottom:1.5%; float:left; position:relative; box-sizing:border-box; }
.IMG_List_3 .list + .list { margin-left:5%; }
.IMG_List_3 .list + .list:nth-child(3n+1) { margin-left:0; clear:both; }

#Body_Main .IMG_List_3 .list { width:calc(97%/3); }
#Body_Main .IMG_List_3 .list + .list { margin-left:1.5%; }
#Body_Main .IMG_List_3 .list + .list:nth-child(3n+1) { margin-left:0; clear:both; }


.IMG_List_4 .list { width:calc(92%/4); display:inline; margin-bottom:0.8%; float:left; position:relative; box-sizing:border-box; }
.IMG_List_4 .list + .list { margin-left:calc(8%/3); }
.IMG_List_4 .list + .list:nth-child(4n+1) { margin-left:0; clear:both; }

#Body_Main .IMG_List_4 .list { width:calc(95.5%/4); }
#Body_Main .IMG_List_4 .list + .list { margin-left:1.5%; }
#Body_Main .IMG_List_4 .list + .list:nth-child(4n+1) { margin-left:0; clear:both; }


.IMG_List_5 .list { width:calc(98%/5); display:inline; margin-bottom:0.5%; float:left; position:relative; box-sizing:border-box; }
.IMG_List_5 .list + .list { margin-left:.5%; }
.IMG_List_5 .list + .list:nth-child(5n+1) { margin-left:0; clear:both; }

.IMG_List_6 .list { width:calc(98%/6); display:inline; margin-bottom:0.4%; float:left; position:relative; box-sizing:border-box; }
.IMG_List_6 .list + .list { margin-left:.4%; }
.IMG_List_6 .list + .list:nth-child(6n+1) { margin-left:0; clear:both; }

.IMG_List_7 .list { width:calc(97.9%/7); display:inline; margin-bottom:0.35%; float:left; position:relative; box-sizing:border-box; }
.IMG_List_7 .list + .list { margin-left:.35%; }
.IMG_List_7 .list + .list:nth-child(7n+1) { margin-left:0; clear:both; }

.IMG_List_8 .list { width:calc(98%/8); display:inline; margin-bottom:calc(2%/7); float:left; position:relative; box-sizing:border-box; }
.IMG_List_8 .list + .list { margin-left:calc(2%/7); }
.IMG_List_8 .list + .list:nth-child(8n+1) { margin-left:0; clear:both; }

.IMG_List_10 .list { width:calc(98%/10); display:inline; margin-bottom:calc(2%/9); float:left; position:relative; box-sizing:border-box; }
.IMG_List_10 .list + .list { margin-left:calc(2%/9); }
.IMG_List_10 .list + .list:nth-child(10n+1) { margin-left:0; clear:both; }


.KE_IMG_Show [class*="zoom"] { display:inline; float:left; position:relative; box-sizing:border-box; }
.IMG_List_2 .zoom { width:calc(100%/2); }
.IMG_List_3 .zoom { width:calc(100%/3); }
.IMG_List_4 .zoom { width:calc(100%/4); }
.IMG_List_5 .zoom { width:calc(100%/5); }


/* 产品列表样式设置 */
div.mask,div.mpg4 {
	width:100%; height:100%; opacity:0; filter:alpha(opacity=0); position:absolute; top:0; left:0; z-index:88;
	background:#000; background-repeat:no-repeat; background-position:center -50%;
}

div.mpg4 {
	opacity:.5; filter:alpha(opacity=50); position:absolute; top:0; left:0; z-index:88;
	background-image:url(/OAction/Images/MPG4.png); background-position:center center;
}


.KE_IMG_Show .XSales,.KE_IMG_Show .Moneys { width:100%;text-align:left; }
.KE_IMG_Show .Moneys { height:39px; font:normal bold 15pt/22px Arial, Helvetica; color:#D00; letter-spacing:-1px; padding:0; }
.KE_IMG_Show .Moneys span { font:normal bold 10pt/22px Arial,Helvetica; color:inherit; letter-spacing:-2px; }

.KE_IMG_Show label.Title { width:100%; height:48px; padding-top:12px; text-align:center; font-size:12pt; line-height:22px; position:relative; }
.KE_IMG_Show label.Title * { font-size:inherit; line-height:inherit; color:inherit; }

.KE_IMG_Show label.Title.Author { height:55px; padding-top:5px; text-align:left; }
.KE_IMG_Show label.Title p.Author { width:100%; height:25px; display:inline-block; white-space:nowrap; text-overflow:ellipsis; }
.KE_IMG_Show label.Title p.Author { position:absolute; bottom:10px; left:0; }


.KE_IMG_Show ul.Zfloat { height:0; position:absolute; bottom:0; z-index:100; }
.KE_IMG_Show div:hover ul.Zfloat { height:48px; background:rgba(0,0,0,.6); color:#FFF; }


/* -webkit-box-sizing:border-box; -moz-box-sizing:border-box; */
.KE_IMG_Show div.show { width:100%; height:0; margin:0; padding:0; position:relative; box-sizing:border-box; }
.KE_IMG_Show div.show img.imgsty { width:auto; height:100%; position:absolute; top:0; left:50%; transform:translateX(-50%); }
.KE_IMG_Show.IMG_List_1 div.show { height:auto; margin:0; padding:0; float:left; }
.KE_IMG_Show.IMG_List_1 div.show img.imgsty { height:auto; position:relative; }


div.Mold { width:18.8%; display:inline; margin-bottom:1%; float:left; position:relative; }
div.Mold + div.Mold { margin-right:1.5%; }
div.Mold + div.Mold:nth-child(5n+2) { margin-right:0; }
div.Mold + div.Mold:nth-child(2) { margin-right:1.5%; }
div.Mold + div.Mold:nth-child(4) { margin-right:0; }
div.Mold + div.Mold:nth-child(8) { clear:both; }

div.Mold:nth-child(1) { width:39.1%; margin-right:1.5%; float:left; }
.IMG_List_8 div.Mold:nth-child(1) { margin-left:1.5%; margin-right:0; float:right; }


div.Eight { width:16.5%; display:inline; margin-bottom:.2%; float:left; text-align:center; position:relative; }
div.Eight:nth-child(1) { width:33.2%; margin-right:0.2%; float:left; }
div.Eight:nth-child(1).Right { margin-right:0; float:right; }
div.Eight + div.Eight { margin-right:.2%; }
div.Eight + div.Eight:nth-child(6n+3) { margin-right:0; }
div.Eight + div.Eight:nth-child(3) { margin-right:.2%; }
div.Eight + div.Eight:nth-child(5) { margin-right:0; }
div.Eight + div.Eight:nth-child(10) { clear:both; }

.IMG_List_13 div.Eight:nth-child(1) { position:absolute; left:33.4%; float:left; }
.IMG_List_13 div.Eight + div.Eight:nth-child(4),.IMG_List_13 div.Eight + div.Eight:nth-child(8) { margin-left:33.4%!important; }



div.Boxs { width:calc(49.1%/2); display:inline; margin-bottom:.6%; float:left; text-align:center; position:relative; }
div.Boxs:nth-child(1) { width:49.7%; margin-right:.6%; float:left; }
div.Boxs:nth-child(1).Right { margin-right:0; float:right; }
div.Boxs + div.Boxs { margin-right:.6%; }
div.Boxs + div.Boxs:nth-child(4n+1) { margin-right:0; }
div.Boxs + div.Boxs:nth-child(3) { margin-right:0; }
div.Boxs + div.Boxs:nth-child(6) { clear:both; }


div.Sixes { width:19.6%; display:inline; margin-bottom:.5%; float:left; position:relative; }
div.Sixes:nth-child(1) { width:39.7%; margin-right:.5%; float:left; }
div.Sixes:nth-child(1).Right { margin-right:0; float:right; }
div.Sixes + div.Sixes { margin-right:.5%; }
div.Sixes + div.Sixes:nth-child(5n+2) { margin-right:0; }
div.Sixes + div.Sixes:nth-child(2) { margin-right:.5%; }
div.Sixes + div.Sixes:nth-child(4) { margin-right:0; }
div.Sixes + div.Sixes:nth-child(8) { clear:both; }



/* 正方形 5:5 */
.AStyle div.show,.AStyle figure { padding-bottom:100%; }
.AStyle div.Mold:nth-child(1) div.show { padding-bottom:calc(100% + 54px); }


/* 宽横屏 4:3 */
.BStyle div.show,.BStyle figure { padding-bottom:calc((6/8)*100%); }
.BStyle div.Zoom_E div.show,.BStyle div.Zoom_F div.show { padding-bottom:calc((6/8)*100%); }
.BStyle .IMG_List_7 div.Mold:nth-child(1) div.show,.BStyle .IMG_List_8 div.Mold:nth-child(1) div.show { padding-bottom:calc(calc((6/8)*100%) + 60px); }


/* 竖矩形 3:4 */
.CStyle div.show,.CStyle figure { padding-bottom:125%; }
.CStyle div.Zoom_E div.show,.CStyle div.Zoom_F div.show { padding-bottom:124.7%; }
.CStyle .IMG_List_7 div.Mold:nth-child(1) div.show,.CStyle .IMG_List_8 div.Mold:nth-child(1) div.show { padding-bottom:calc(123% + 60px); }


/* 横竖默认比例 9:6 */
.DStyle div.show,.DStyle figure { padding-bottom:calc((6/9)*100%); }
.DStyle .IMG_List_7 div.Mold:nth-child(1) div.show,.DStyle .IMG_List_8 div.Mold:nth-child(1) div.show { padding-bottom:calc((6/9)*100% + 60px); }
.DStyle div.Boxs:nth-child(1) div.show,.DStyle div.Boxs:nth-child(1) figure { padding-bottom:calc((6/9)*100% + .5%); }
.DStyle div.Sixes:nth-child(1) div.show,.DStyle div.Sixes:nth-child(1) figure { padding-bottom:calc((6/9)*100% + .5%); }
.DStyle div.Eight:nth-child(1) div.show { padding-bottom:calc((6/9)*100% + .2%); }



/* 窄横屏 16:9 */
.FStyle div.show,.FStyle figure { padding-bottom:56.25%; }
.FStyle div.show img.imgsty { width:100%; height:auto; left:0; top:50%; transform:translateY(-50%); }
.FStyle div.Mold_L div.show,.FStyle div.Mold_R div.show { padding-bottom:calc(56% + 60px); }
.FStyle div.Zoom_E div.show,.FStyle div.Zoom_F div.show { padding-bottom:56.5%; }

/*
#Body_Main .BStyle div.Zoom_C div.show,#Body_Main .BStyle div.Zoom_D div.show {  padding-bottom:78.2%; }
#Body_Main .CStyle div.Zoom_C div.show,#Body_Main .CStyle div.Zoom_D div.show {  padding-bottom:137.5%; }
#Body_Main .DStyle div.Zoom_C div.show,#Body_Main .DStyle div.Zoom_D div.show {  padding-bottom:81.5%; }
#Body_Main .FStyle div.Zoom_C div.show,#Body_Main .FStyle div.Zoom_D div.show {  padding-bottom:71.2%; }
*/



/* 信息样式 - 11 */
ol.IMG_List_11 dl.IMG { width:calc((100% - 30px)/4); height:195px; position:relative; line-height:50px; }
ol.IMG_List_11 dl.IMG dt.Title { width:95%; height:50px; padding:0 2.5%; line-height:50px; background-color:rgba(0,0,0,.5); color:#FFF; position:absolute; bottom:0; left:0; }
ol.IMG_List_11 dl.IMG + dl.IMG { margin-left:10px; }

ol.IMG_List_11 div.Show { width:100%; height:100%; position:relative; }
ol.IMG_List_11 div.Show img { width:100%; height:auto; position:absolute; top:50%; left:0; transform:translateY(-50%); transition:all .5s; }
ol.IMG_List_11 div.Show:hover img { transform:translateY(-50%) scale(1.2); transition:all .5s; }

ol.IMG_List_11 dl.IMG:nth-child(4) { float:right; }
ol.IMG_List_11 dl.IMG:nth-child(5) { width:calc(50% - 5px); margin-top:10px; }
ol.IMG_List_11 dl.IMG:nth-child(1),ol.IMG_List_11 dl.IMG:nth-child(4) { height:400px; }

ol.IMG_List_11 dl.IMG:nth-child(1) img,ol.IMG_List_11 dl.IMG:nth-child(4) img { width:auto; height:100%; top:0; left:50%; transform:translateX(-50%); }
ol.IMG_List_11 dl.IMG:nth-child(1) div.Show:hover img,ol.IMG_List_11 dl.IMG:nth-child(4) div.Show:hover img { transform:translateX(-50%) scale(1.2); }




/* 横宽比样式 2:1 */
#Main_10 .list { padding:2px; border:0; box-sizing:border-box; }
#Main_10 .list div.show img.imgsty { width:100%; }
#Main_10 label.Title { width:100%; height:48px; text-align:center; position:relative; }
#Main_10 label.Title,#Main_10 label.Title a { line-height:3; }

.EStyle div.show,.EStyle figure { padding-bottom:50%; }

div[class*=varying] { background:#FFF; cursor:pointer; }
div[class*=A_varying] { border:1px solid #CCC; }

div.B_varying img.imgsty,div.C_varying img.imgsty
{ -webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%); }
div.B_varying:hover img.imgsty,div.C_varying:hover img.imgsty
{ -webkit-filter:grayscale(0);-moz-filter:grayscale(0);-ms-filter:grayscale(0);-o-filter:grayscale(0);filter:grayscale(0); }

div.C_varying img.imgsty,div.D_varying img.imgsty
{ backface-visibility:hidden; transform:translateX(-50%) rotateY(0deg);}

div.C_varying:hover img.imgsty,div.D_varying:hover img.imgsty
{ transform:translateX(-50%) rotateY(360deg); }



/* 叠加水印图特效 */
div.marker {
	width:100%; height:100%; opacity:0; filter:alpha(opacity=0); position:absolute; z-index:50;
	background-repeat:no-repeat; background-position:center 100%; background-size:auto;
	background-color:transparent; background-image:url(/OAction/Images/MTOP.png);
}
div.show:hover div.marker {
	opacity:1; filter:alpha(opacity=100); background-position:center center; background-size:auto;
}



/* Ainkeys style */
div[class*=A-In]:hover img.imgsty {
	-webkit-transform:translateX(-50%) scale(1.2);
	transform:translateX(-50%) scale(1.2);
}

.FStyle div[class*=A-In]:hover img.imgsty {
	-webkit-transform:translateY(-50%) scale(1.2);
	transform:translateY(-50%) scale(1.2);
}

div.show div.mask i.icon { width:70px; height:70px; margin-left:-35px; margin-top:-35px; text-align:center; font-size:24pt; line-height:70px; color:#DDD; }
div.show div.mask i.icon { position:absolute; left:50%; top:200%; z-index:20; transition:all .5s ease; }

div.show:hover div.mask { opacity:1; filter:alpha(opacity=100); background-color:transparent; }
div.show:hover div.mask i.icon { background:rgba(0,0,0,.1); border-radius:50%; top:50%; transition:all .5s ease; }

div.show div.mask tt { width:95%; height:39px; padding:0 2.5%; text-align:center; position:absolute; left:0; bottom:0; z-index:15; }
div.show div.mask tt {
	text-transform:uppercase;
	transform:rotateY(360deg) scale(0);
	background-color:transparent;
	height:35px; bottom:5%;
	transition:all .5s ease;
}
div.show:hover div.mask tt {
	background-color:transparent;
	transform:rotateY(0) scale(1);
	transition:all .5s ease;
	line-height:2;
}

div.A-Inbox div.show { background-color:#FFF; }
div.A-Inbox:hover .show { box-shadow:0 5px 10px #CCC; }

div.A-Inzoom div.mask:before,div.A-Inzoom div.mask:after,div.A-Inzoom div.show:before,div.A-Inzoom div.show:after {
	width:100%; height:50%; background:rgba(0,0,0,.6);
	content:""; position:absolute; top:-50%; left:50%; z-index:1!important;
	transform:translateX(-50%) translateY(0%);
	-webkit-clip-path:polygon(0 0, 50% 100%, 100% 0);
	clip-path:polygon(0 0, 50% 100%, 100% 0);
	transition:all .3s;
}
div.A-Inzoom div.mask:after {
	top:auto; bottom:-50%;
	transform:translateX(-50%) translateY(0%);
	-webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
	clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
}
div.A-Inzoom div.show:before {
	width:50%; height:100%; top:50%; left:auto; right:-50%;
	transform:translateX(0%) translateY(-50%);
	-webkit-clip-path:polygon(100% 0, 0 50%, 100% 100%);
	clip-path:polygon(100% 0, 0 50%, 100% 100%);
}
div.A-Inzoom div.show:after {
	width:50%; height:100%;
	top:50%; right:auto; left:-50%;
	transform:translateX(0%) translateY(-50%);
	-webkit-clip-path:polygon(0 100%, 100% 50%, 0 0);
	clip-path:polygon(0 100%, 100% 50%, 0 0);
}

div.A-Inzoom div.mask:hover:before { top:0; }
div.A-Inzoom div.mask:hover:after { bottom:0; }
div.A-Inzoom div.show:hover:before { right:0; }
div.A-Inzoom div.show:hover:after { left:0; }


div.A-Infour div.show:before,div.A-Infour div.show:after,div.A-Infour div.mask:before,div.A-Infour div.mask:after {
	width:25%; height:100%; background:linear-gradient(transparent,rgba(0,0,0,.6));
	content:''; position:absolute; left:0;top:0; z-index:1!important;
	transform:translateY(-100%);
	transition:all 0.3s;
}
div.A-Infour div.show:hover:before,div.A-Infour div.show:hover:after,div.A-Infour div.mask:hover:before,div.A-Infour div.mask:hover:after { transform:translateY(0); }
div.A-Infour div.show:after{ left:25%; }
div.A-Infour div.mask:before{ left:50%; }
div.A-Infour div.mask:after{ left:75%; }
div.A-Infour div.show:hover:before{ transition-delay:0.225s; }
div.A-Infour div.show:hover:after{ transition-delay:0.075s; }
div.A-Infour div.mask:hover:before{ transition-delay:0.15s; }
div.A-Infour div.mask:hover:after{ transition-delay:0s; }



/* 图文平铺列表样式 */
dl.K-Shadow,dl.K-Shadow dt { position:relative; }
dl.K-Shadow { width:90%; height:auto; padding:15px 5%; }
dl.K-Shadow .Title { width:100%; height:58px; font-size:13pt; line-height:65px; margin-bottom:15px; }
dl.K-Shadow .Remarks { width:100%; height:90px; margin-bottom:5px; }

dl.K-Shadow dt a { font-size:inherit; line-height:inherit;white-space:inherit; }
dl.K-Shadow dt:before,dl.K-Shadow dt:after { content:""; position:absolute; left:0; bottom:3px; }
dl.K-Shadow dt:after { width:28px; border-bottom:1px solid #333; z-index:0; transition:all .5s; }
dl.K-Shadow dt:before { width:100%; border-bottom:1px solid #DDD; z-index:-1; }
dl.K-Shadow:hover dt:after { width:100%; transition:all .5s; }


dl.K-Shadow:before,dl.K-Shadow:after {
  width:150%; height:8px;
  content: ''; position: absolute; left:0; top:-40px; z-index: -1;
  -webkit-box-shadow: 0 15px 16px #666;
  -moz-box-shadow: 0 15px 16px #666;
  box-shadow: 0 15px 16px #666;
  -webkit-transform: skew(-15deg) rotate(-6deg);
  -moz-transform: skew(-15deg) rotate(-6deg);
  -ms-transform: skew(-15deg) rotate(-6deg);
  -o-transform: skew(-15deg) rotate(-6deg);
  transform: skew(-15deg) rotate(-6deg); 
}

dl.K-Shadow:after {
  left:auto; right:0;
  -webkit-transform: skew(15deg) rotate(6deg);
  -moz-transform: skew(15deg) rotate(6deg);
  -ms-transform: skew(15deg) rotate(6deg);
  -o-transform: skew(15deg) rotate(6deg);
  transform: skew(15deg) rotate(6deg); 
}

.IMG_List_2 .K-Shadow:before,.IMG_List_2 .K-Shadow:after { top:-55px; }
#Body_Main .IMG_List_2 .K-Shadow:before,#Body_Main .IMG_List_2 .K-Shadow:after { top:-50px; }


.KE_IMG_Show div.show,.KE_IMG_Show div.show:hover,.KE_IMG_Show div img.imgsty,.KE_IMG_Show div:hover img.imgsty,
.KE_IMG_Show div label.Title,.KE_IMG_Show div:hover label.Title,.KE_IMG_Show div p.Author,.KE_IMG_Show div:hover p.Author,
.KE_IMG_Show div ul.Zfloat,.KE_IMG_Show div:hover ul.Zfloat,div.marker,div.show:hover div.marker
{ transition:all .5s ease; -moz-transition:all .5s ease; -webkit-transition:all .5s ease; -o-transition:all .5s ease; }