html,body {width:100%; height:100%} .select_object a {display:block} .select_object div:nth-child(4), .select_object div:nth-child(5), .select_object div:nth-child(6) {width:33.33333%} .select_object a:last-child:before {display:block; content:""; height:8px; background:#535353} .animation div {visibility:visible; -webkit-animation:m_b_t ease-out both; -moz-animation:m_b_t ease-out both; animation:m_b_t ease-out both} .animation div:nth-child(2) {animation-duration:0.3s; -webkit-animation-duration:0.3s; -moz-animation-duration:0.3s} @-webkit-keyframes m_b_t {0% {transform:translateY(100%); -webkit-transform:translateY(100%); opacity:0} 100% {transform:translateY(0); -webkit-transform:translateY(0); opacity:1}} @keyframes m_b_t {0% {transform:translateY(100%); -webkit-transform:translateY(100%); opacity:0} 100% {transform:translateY(0); -webkit-transform:translateY(0); opacity:1}} .select_object a {display:block; font-size:0} .select_object a span {display:block; line-height:2rem; height:2rem; text-align:center; font-size:1.125rem; background-color:rgba(0,0,0,0.5); color:#FFF; position:absolute; left:0; right:0; bottom:0; z-index:2} .select_object .single_people {display: block; overflow: hidden; width: 98%; padding: 2%; padding-right: 0; background-color: #e83016;} .single_people div {float: left;} .select_object .single_people .single_left {padding-top: 32%;} .single_people .single_right {width: 75%;} .single_right div:nth-child(1), .single_right div:nth-child(2) {width: 48%; margin-right: 2%; margin-bottom: 1.5%;} .single_right div:nth-child(2) img:first-child {margin-bottom: 5%;} .single_right div:nth-child(3) {width: 100%} .single_right div:nth-child(3) img {float: left; width: 31.3%; margin-right: 2%;} .select_object img {display: block; width:100%;} .select_object .many_people div {overflow: hidden; width: 96%; padding: 2%; background-color: #f8931f;} .select_object img {-webkit-animation:m_b_t ease-out both; -moz-animation:m_b_t ease-out both; -ms-animation:m_b_t ease-out both; animation:m_b_t ease-out both;} .single_right div:nth-child(2) img:nth-child(1) {-webkit-animation-duration: 0.6s; -moz-animation-duration: 0.6s; -ms-animation-duration: 0.6s; animation-duration: 0.6s;} .single_right div:nth-child(2) img:nth-child(2) {-webkit-animation-duration: 0.7s; -moz-animation-duration: 0.7s; -ms-animation-duration: 0.7s; animation-duration: 0.7s;} .single_right div:nth-child(3) img:nth-child(1) {-webkit-animation-duration: 0.6s; -moz-animation-duration: 0.6s; -ms-animation-duration: 0.6s; animation-duration: 0.6s;} .single_right div:nth-child(3) img:nth-child(2) {-webkit-animation-duration: 0.7s; -moz-animation-duration: 0.7s; -ms-animation-duration: 0.7s; animation-duration: 0.7s;} .single_right div:nth-child(3) img:nth-child(3) {-webkit-animation-duration: 0.8s; -moz-animation-duration: 0.8s; -ms-animation-duration: 0.8s; animation-duration: 0.8s;} .single_people .single_left, .select_object .many_people img:nth-child(1) {float: left; width: 16%; padding: 2% 1%; margin-left: 2.5%; margin-right: 4.5%; -webkit-animation-duration: 0.6s; -moz-animation-duration: 0.6s; -ms-animation-duration: 0.6s; animation-duration: 0.6s;} .select_object .many_people img:nth-child(2) {float: right; width: 75%; -webkit-border-radius: 0.25rem; -moz-border-radius: 0.25rem; -ms-border-radius: 0.25rem; border-radius: 0.25rem; -webkit-animation-duration: 0.8s; -moz-animation-duration: 0.8s; -ms-animation-duration: 0.8s; animation-duration: 0.8s;} #copyright {background:#535353} #copyright p:nth-child(3) {border-top-color:#595959}