select_object.css
3.49 KB
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}