.shade_tay { /* background:#fff; */ background: #000; top: 3.75em; opacity: 0.05; } .product_h_background_pic_hard { height: 420px; background: url("../images/hard/banner_hardware.png") no-repeat center center; background-size:cover; /* margin-bottom: 56px; */ } .middle { width: 100%; padding-bottom: 80px; } .middle .hards dl { margin:64px 0 -36px 0; width: 100%; display: flex; justify-content: start; flex-wrap: wrap; } .middle .hards dl dt { width:100%; height: 26px; line-height: 32px; border-left: 3px solid #db1b21; margin: 0 0 36px 0; padding-left: 16px; color: #333; font-size: 18px; line-height:24px; } .middle .hards dl dd { margin: 0 50px 0 0; cursor: pointer; } .show_item img{ width: 300px; height: 400px; } .hide_show_img img{ /*width:18.125em;*/ width:300px; /*height:376px;*/ height:100%; } .show_item p{ line-height: 28px; padding:14px 0 26px; text-align: center; font-size: 16px; color: #333; } .middle .hards dl dd .show_item img:hover { transition-delay: 0s; transition-duration: 0.5s; transition-property: all; box-shadow: 0px 0px 10px 5px rgba(0,0,0,.1); } .middle .hards dl dd:nth-child(3n+1){ margin-right: 0; } .hide_item{ background-color: #fff; } .hide_item,.hardvideo_wrap { display: none; position: fixed; width:600px; /* height:450px; */ top: 50%; left: 50%; z-index: 8888; transform: translate(-50%,-50%); } .hardvideo_wrap { z-index: 9998; background: gray; } .closeVideo { position: absolute; top: 6px; right: 6px; display: block; background: #555; text-align: center; width: 32px; height: 32px; border-radius: 6px; line-height: 32px; color: #fff; z-index: 9999; } .hardvideo_wrap video{ width: 100%; height:100%; } .hide_item>div { /*height: 376px;*/ height:400px; float: left; } .hide_item .hide_show_text { width: 50%; position:relative; padding: 32px 20px 16px 0; box-sizing: border-box; } .hide_item .hide_show_text h2 { font-size: 16px; font-weight: 700; color: #252525; line-height: 28px; } .hide_item .hide_show_text h3{ font-size: 15px; line-height: 24px; margin-bottom: 20px; } .hide_item .hide_show_text h2.spac { margin: 28px 0 20px 0; } /* .hide_item .hide_show_text p { font-size: 14px; color: #666; line-height: 32px; padding:0 6px; } .hide_item .hide_show_text p:nth-of-type(2n+1){ background-color: rgba(000,000,000,.03); } */ .hide_item .hide_show_text >div{ font-size: 14px; color: #666; line-height: 32px; padding-left: 10px; width: 100%; } .hide_item .hide_show_text >div{ display: flex; /* align-items: center; */ } .hide_item .hide_show_text >div p{ width: 58px; } .hide_item .hide_show_text div:nth-of-type(2n+1){ background-color: rgba(000,000,000,.03); } .hide_item .hide_show_text >div p { display: inline-block; width: 56px; text-align: justify; } .hide_item .hide_show_text >div p:first-of-type{ height: 32px; } .hide_item .hide_show_text >div p:nth-of-type(2){ width:215px; } .hide_item .hide_show_text >div p,span{ line-height: 32px; } .hide_item .hide_show_text >div p i{ display: inline-block; width: 100%; } .hide_item .hide_show_text >div p{ padding: 0; } .other .hide_item .hide_show_text p .foo_right_one { width: 2em; } .other .hide_item .hide_show_text p .foo_right_one i { display: inline-block; width: 4px; height: 4px; background: #db1b21; border-radius: 50%; } .other .hide_item .hide_show_text .playVideo { font-size: 1em; color: #DB1B21; margin: 0; padding-right: 24px; text-align: right; position: absolute; right: 0; bottom: 20px; } .other .hide_item .hide_show_text .playVideo a { color: #DB1B21; } .other .hide_item .hide_show_text .playVideo a:hover { font-weight: 700; }