.project_background_pic_project { width: 100%; height: 420px; background: url("../images/project/banner_project.png") no-repeat center center; background-size:cover; } .middle { padding: 72px 0; } .middle .main .shadow { opacity: 0; } .trade { border-radius: 4px; width:100%; height:100%; position: absolute; top:0; left:0; z-index: 5; /*background:rgba(0,0,0,0);*/ } .photo_item_one,.photo_item_two,.photo_item_three,.photo_item_four { width: 100%; } .small_width { width: 17.625em; } .middle_width { width: 22.875em; } .big_width { width:37.5em; } .small_height { height:282px; } .middle_height { height:366px; } .big_height { height:600px; } .photo_item_one_left,.photo_item_one_right, .photo_item_one_right>div, .photo_item_two>div, .photo_item_three_left,.photo_item_three_right, .photo_item_three_left>div, .photo_item_four>div { border-radius: 4px; position: relative; overflow: hidden; } .desc { position: absolute; width: 100%; top: 50%; left: 50%; transform: translateX(-50%) translateY(-24px); z-index: 9999; } .desc_title { width: 10.25em; height: 48px; font-size: 1.25em; text-align: center; line-height: 48px; color: #fff; border: 2px solid #fff; margin-bottom: 24px; position: relative; left: 50%; z-index: 6; transform: translateX(-50%); } .desc_content { width: 100%; font-size: 12px; color: #fff; text-align: center; display: none; } .desc_content.show { display: block; } .desc_content p { line-height: 1; margin: 7px 0; } .photo_item_one_left,.photo_item_one_right { float: left; } .big_width img{ width: 100%; height: 100%; } .photo_item_one_left { margin-right: 36px; } .photo_item_one_right>div:first-child { margin-bottom: 36px; } .photo_item_two{ margin: 36px 0; } .photo_item_two>div,.photo_item_four>div { float: left; } .photo_item_two>div:nth-child(-n+2),.photo_item_four>div:nth-child(-n+2) { margin-bottom: 36px; } .photo_item_two>div:nth-child(2n),.photo_item_four>div:nth-child(2n) { margin-left: 36px; } .photo_item_three_left,.photo_item_three_right { float: left; } .photo_item_three_left { margin-right: 36px; } .photo_item_three_left>div { float: left; } .photo_item_three_left>div:first-child { margin-bottom: 36px; } .photo_item_three_left>div:nth-child(2) { margin: 0 36px 0 0; } .photo_item_four { margin-top: 36px; }