.about-page .sub-banner img {
width: 100%;
height: 581px;
object-fit: cover;
border-radius: 30px;
}
.about-page .sub-banner::before {
background: linear-gradient(89deg, #0c51b2 5.63%, #0b7fc3 29.4%, #09acd3 43.49%, #09add3 46.57%, rgba(255, 255, 255, 0) 133.98%);
}
.about-page .sub-banner-content {
display: flex;
align-items: center;
width: fit-content;
top: 8%;
z-index: 2;
}
.about-page .sub-banner-content .left-blk {
width: 50%;
margin-right: 30px;
}
.about-page .sub-description {
font-size: 18px;
}
.about-page .sub-description p {
padding-bottom: 10px;
}
.about-page .sub-banner-content .right-blk {
width: 50%;
margin-top: 80px;
}
.about-page .sub-banner-content .right-blk .counter-list {
display: flex;
flex-wrap: wrap;
}
.counter-list .counter-list-detail {
padding: 25px;
background: #C2DBFF1A;
color: var(--txt-secondary-color);
border: 1px solid#E2E4E9;
width: 45%;
height: 145px;
margin-right: 20px;
margin-bottom: 20px;
border-radius: 10px;
text-align: center;
}
.counter-list .counter-list-detail:nth-child(2n) {
margin-right: 0;
}
.counter-list-detail .number {
font-size: 48px;
display: block;
}
.counter-list-detail .info-ttl {
font-size: 24px;
}
.mission-vision {
margin: 80px 0;
display: flex;
justify-content: space-between;
}
.mission-vision .left-blk {
border: 1px solid var(--stroke-sub-300);
background: var(--bg-weak-100);
border-radius: 30px;
width: 48%;
padding: 40px;
}
.mission-vision .left-blk .our-mission {
margin-bottom: 40px;
}
.mission-vision .left-blk .our-mission h6, .mission-vision .left-blk .our-vision h6 {
font-weight: 600;
margin-bottom: 10px;
}
.mission-vision .left-blk .our-mission p, .mission-vision .left-blk .our-vision p {
color: var(--text-sub-500);
}
.mission-vision .right-blk {
width: 48%;
}
.mission-vision .right-blk img{
border-radius: 30px;
height: 355px;
}
.our-team {
margin: 80px 0;
}
.our-team .ttl-section {
display: flex;
justify-content: space-between;
margin-bottom: 80px;
}
.our-team .ttl-section p {
color: var(--text-sub-500);
width: 45%;
}
.our-team .member-list {
display: flex;
}
.our-team .member-list li {
position: relative;
width: 31%;
margin-right: 29px;
border-radius: 30px;
border: 1px solid var(--text-sub-500);
}
.our-team .member-list li .img-bg img {
height: 500px;
border-radius: 30px;
object-fit: cover;
}
.our-team .member-list li:hover .member-detail {
opacity: 0;
z-index: 1;
transform: translateY(-20px);
}
.our-team .member-list li:hover .member-content {
opacity: 1;
z-index: 2;
transform: translateY(0);
}
.our-team .member-list li .member-detail, .our-team .member-list li .member-content {
position: absolute;
left: 0;
right: 0;
bottom: 15px;
width: 95%;
margin: 0 auto;
background-color: var(--txt-secondary-color);
border-radius: 30px;
padding: 48px 13px;
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.our-team .member-list li .member-detail {
opacity: 1;
z-index: 2;
height: fit-content;
transition: height 0.5s ease-out, transform 0.5s ease-out;
}
.our-team .member-list li .member-detail h5 {
font-size: 34px;
}
.our-team .member-list li .member-content {
opacity: 0;
z-index: 1;
height: 480px;
transform: translateY(20px);
padding: 25px 10px;
background-color: var(--stroke-sub-300);
}
.member-detail p {
text-transform: uppercase;
padding-top: 10px;
}
.member-content p {
font-size: 14px;
line-height: 1.5;
margin-bottom: 10px;
} @media only screen and (min-width: 768px) and (max-width: 1280px) {
.about-page .sub-banner img {
height: 100%;
border-radius: 2.344vw;
}
.about-page .sub-banner-content .left-blk {
margin-right: 2.344vw;
}
.about-page .sub-description {
font-size: 1.406vw;
}
.about-page .sub-description p {
padding-bottom: 0.781vw;
}
.counter-list .counter-list-detail {
padding: 1.953vw;
height: 11.328vw;
margin-right: 1.563vw;
margin-bottom: 1.563vw;
border-radius: 0.781vw;
}
.counter-list-detail .number {
font-size: 3.75vw;
}
.counter-list-detail .info-ttl {
font-size: 1.875vw;
}
.mission-vision {
margin: 3.906vw 0;
}
.mission-vision .left-blk {
border-radius: 2.344vw;
padding: 3.125vw;
}
.mission-vision .left-blk .our-mission {
margin-bottom: 1.563vw;
}
.mission-vision .left-blk .our-mission h6, .mission-vision .left-blk .our-vision h6 {
font-size: 2.813vw;
margin-bottom: 0.781vw;
}
.mission-vision .right-blk img{
border-radius: 2.344vw;
height: 27.734vw;
}
.our-team {
margin: 6.25vw 0;
}
.our-team .ttl-section {
margin-bottom: 6.25vw;
}
.our-team .member-list li {
margin-right: 2.266vw;
border-radius: 2.344vw;
height: 40vw;
}
.our-team .member-list li .member-detail, .our-team .member-list li .member-content {
bottom: 1.172vw;
border-radius: 2.344vw;
padding: 3.75vw 1vw;
}
.our-team .member-list li .img-bg img {
height: 40vw;
border-radius: 2.344vw;
}
.our-team .member-list li .member-content {
height: 37.5vw;
padding: 1.953vw 0.781vw;
}
.our-team .member-list li .member-detail h5 {
font-size: 2.656vw;
}
.member-detail p {
padding-top: 0.781vw;
}
.member-content p {
font-size: 1vw;
margin-bottom: 0.781vw;
}
} @media all and (max-width: 767.9px) {
.about-page .sub-banner img {
height: 785px;
border-radius: 8vw;
}
.about-page .sub-banner-content {
flex-direction: column;
top: 3%;
}
.about-page .sub-banner-content .left-blk {
width: 92%;
margin-right: 20px;
}
.about-page .sub-description {
font-size: 3.733vw;
}
.about-page .sub-description p {
padding-bottom: 2.667vw;
}
.about-page .sub-banner-content .right-blk {
width: 100%;
margin-top: 0;
}
.counter-list .counter-list-detail {
padding: 2.667vw;
height: 26.667vw;
margin-right: 5.333vw;
margin-bottom: 5.333vw;
border-radius: 2.667vw;
}
.counter-list-detail .number {
font-size: 9.6vw;
}
.counter-list-detail .info-ttl {
font-size: 14px;
}
.mission-vision {
margin: 21.333vw 0;
flex-direction: column;
}
.mission-vision .left-blk {
border-radius: 8vw;
width: 100%;
padding: 8vw;
margin-bottom: 5.333vw;
}
.mission-vision .left-blk .our-mission {
margin-bottom: 5.333vw;
}
.mission-vision .left-blk .our-mission h6, .mission-vision .left-blk .our-vision h6 {
font-size: 8.533vw;
margin-bottom: 2.667vw;
}
.mission-vision .right-blk {
width: 100%;
}
.mission-vision .right-blk img{
border-radius: 8vw;
}
.our-team {
margin: 21.333vw 0;
}
.our-team .ttl-section {
flex-direction: column;
margin-bottom: 10.667vw;
}
.our-team .ttl-section p {
margin-top: 5.333vw;
width: 100%;
}
.our-team .member-list {
flex-direction: column;
}
.our-team .member-list li {
width: 100%;
margin-right: 0;
margin-bottom: 8vw;
border-radius: 8vw;
height: 136.533vw;
}
.our-team .member-list li .member-detail, .our-team .member-list li .member-content {
bottom: 4vw;
border-radius: 8vw;
padding: 12.8vw 3.467vw;
}
.our-team .member-list li .member-content {
height: 128vw;
padding: 6.667vw 2.667vw;
}
.our-team .member-list li .img-bg img {
border-radius: 8vw;
height: 136.533vw;
}
.our-team .member-list li .member-detail h5 {
font-size: 5.333vw;
}
.member-detail p {
padding-top: 2.667vw;
}
.member-content p {
font-size: 3.3vw;
margin-bottom: 1.333vw;
}
}