.people-detail {
margin: 16rem 0 8rem 0;
}
.people-detail .arrow-down {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.people-detail .arrow-down:hover {
-webkit-transform: translateY(15%);
transform: translateY(15%);
}
@media (width <= 1290px) {
.people-detail .arrow-down {
left: 0;
}
}
@media (width <= 705px) {
.people-detail .arrow-down {
display: none;
}
}
.people-detail__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
max-width: 113.6rem;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin: 0 auto;
-webkit-box-shadow: 0px 5px 10px 0px rgba(77, 83, 88, 0.1);
box-shadow: 0px 5px 10px 0px rgba(77, 83, 88, 0.1);
}
.people-detail__content-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-item-align: stretch;
align-self: stretch;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
border-radius: 2.4rem;
}
.people-detail__content-box-text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
max-width: 57.6rem;
padding: 4rem;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 4rem;
-ms-flex-item-align: stretch;
align-self: stretch;
background: var(--White, #fff);
}
.people-detail__content-box-text .col-left {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 2.4rem;
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.people-detail__content-box-text .col-left__header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 2.4rem;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.people-detail__content-box-text .col-left__header .name-position {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 0.8rem;
}
.people-detail__content-box-text .col-left__header .name-position .name {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 2.4rem;
}
.people-detail__content-box-text .col-left__header .name-position .name img {
width: 100%;
max-width: 6rem;
height: 6rem;
}
.people-detail__content-box-text .col-left__tel-description {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 2.4rem;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.people-detail__content-box-text .col-left__tel-description .tel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 2.4rem;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.people-detail__content-box-text .col-left__tel-description .tel__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 0.8rem;
}
.people-detail__content-box-text .col-left__tel-description .tel__content .mobile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 1.6rem;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.people-detail__content-box-text .col-left__tel-description .tel__content .mobile svg {
width: 100%;
max-width: 2.4rem;
height: 2.4rem;
margin-top: 0.5rem;
}
.people-detail__content-box-text .col-left__tel-description .tel__content .email {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 1.6rem;
}
.people-detail__content-box-text .col-left__tel-description .tel__content .email svg {
width: 100%;
max-width: 2.4rem;
height: 2.4rem;
margin-top: 0.5rem;
}
.people-detail__content-box-image {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.people-detail__content-box-image img {
width: 100%;
max-width: 56rem;
height: 56rem;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 50% 25%;
object-position: 50% 25%;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(242, 244, 248, 0.24)), to(rgba(242, 244, 248, 0.24))), lightgray 50%/cover no-repeat;
background: linear-gradient(0deg, rgba(242, 244, 248, 0.24) 0%, rgba(242, 244, 248, 0.24) 100%), lightgray 50%/cover no-repeat;
}
@media (width <= 600px) {
.people-detail__content-box {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.people-detail__content-box-image img {
max-width: 100%;
}
}