@charset "utf-8"; /* CSS Document */ .mlist.videom .content_wrapper { position: relative; margin-right: -2%; } .mlist.videom .content_list .item_block { float: left; width: calc(100% / 3 - 2%); margin-right: 2%; margin-bottom: 2%; } .mlist.videom .content_list .item_block img { display: block; float: none; width: 100%; height: auto; transition: all ease-out .3s; } .mlist.videom .content_list .item_block .item_link { display: block; } .mlist.videom .content_list .item_block .item_img { position: relative; display: block; overflow: hidden; } .mlist.videom .content_list .item_block .item_img .rectborder { position: absolute; top: -10px; left: -10px; width: calc(100% + 20px); height: calc(100% + 20px); transition: all ease-out .3s; border: #f8f8f8 1px solid; } .mlist.videom .content_list .item_block .item_img .icon { font-size: 32px; line-height: 50px; position: absolute; top: 50%; left: 50%; display: block; width: 50px; height: 50px; margin-top: 0; margin-left: -25px; transition: all ease-out .3s; text-align: center; opacity: 0; color: #fff; background: #963947; ; } .mlist.videom .content_list .item_block .item_wrapper { box-sizing: border-box; height: auto; padding: 15px 20px; transition: all ease-out .3s; background-color: #232323; } .mlist.videom .content_list .item_block .item_info .title { font-size: 16px; color: #000; } .mlist.videom .content_list .item_block .item_info .subtitle { font-size: 13px; margin-top: 3px; color: #5d5d5d; } .mlist.videom .content_list .item_block:hover .rectborder { top: 10px; left: 10px; width: calc(100% - 22px); height: calc(100% - 22px); } .mlist.videom .content_list .item_block:hover .icon { margin-top: -25px; opacity: 1; } .mlist.videom .content_list .item_block .item_wrapper { background-color: #f8f8f8; } .mlist.videom .content_list .item_block:hover .item_wrapper { background-color: #f8f8f8; } .mlist.videom .content_list .item_block:hover .item_ico:after { transform: translateY(-50%); opacity: 1; } .mlist.videom .item_ico { font: normal normal normal 14px/1 FontAwesome; font-size: inherit; font-size: 14px; font-size: 60px; position: absolute; top: 0; left: 0; display: inline-block; display: inline-block; width: 100%; width: 32px; width: 100%; height: 100%; height: 100%; margin: 0; margin-right: 10px; text-align: right; text-align: center; color: rgb(247, 247, 247); text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .mlist.videom .item_ico:after { position: relative; top: 50%; display: block; content: "\f144"; transition: .36s ease; transform: translateY(-120%); opacity: 0; }