#AboutUs-content-1 { display: flex; flex-direction: column; align-items: start; } #AboutUs-content-1 img { width: 100%; } #AboutUs-content-text-1 { width: 100%; padding: 5vw 0 5vw 0; background-color: whitesmoke; justify-content: center; /* 중앙 정렬 */ text-align: center; align-items: center; line-height: 2vw; font-size: 1.3vw; } #AboutUs-content-2 { padding: 5vw; } #AboutUs-content-head-text-2 { color: #51e6ef; padding: 0 10px 10px 10px; font-size: 3vw; font-weight: bold; } #AboutUs-content-grid-2 { display: grid; grid-template-rows: 4fr 5fr; grid-template-columns: 2fr 2fr; grid-gap: 2.5vw; } #AboutUs-content-img1-2 { grid-column: 1/3; } .AboutUs-img-2 { width: 100%; position: relative; } .AboutUs-img-2 img { width: 100%; } #AboutUs-text-2-1 { position: absolute; top: 45%; left: 60%; transform: translate(-10%, -50%); font-size: 2vw; /* Adjust font size as needed */ color: black; } #AboutUs-text-2-2 { position: absolute; top: 65%; left: 20%; transform: translate(-5%, -50%); font-size: 1.7vw; /* Adjust font size as needed */ color: black; } #AboutUs-text-2-3 { position: absolute; top: 69%; left: 30%; transform: translate(-10%, -50%); font-size: 1.7vw; /* Adjust font size as needed */ color: black; } .AboutUs-text-2 h1 { font-size: 1.8em; } .AboutUs-text-2 p { font-size: 0.7em; line-height: 2; font-weight: bold; } #AboutUs-content-center-3{ display: flex; justify-content: center; align-items: center; flex-direction: row; } #AboutUs-content-center-3 img{ width: 15vw; } #AboutUs-content-head-text-3{ padding: 0 0 0 5vw; } #AboutUs-head-text-3{ font-size: 2vw; } #AboutUs-body-text-3{ font-size: 1.6vw; font-weight: bold; } #AboutUs-foot-text-3{ font-size: 1vw; } #AboutUs-content-3-1{ display: grid; padding: 7vw 0px 4vw 0px; grid-template-columns: 1fr 9fr 1fr; } .AboutUs-page_btn-3{ display: flex; justify-self: center; align-items: center; } .AboutUs-content-3-img{ display: flex; flex-direction: row; justify-content: space-around; text-align: center; } .AboutUs-content-3-img img{ width: 15vw; } .AboutUs-content-3-img p{ font-size: 2vw; color: gray; opacity: 0.7; } /*---------------------------*/ .prev-1, .next-1 { width: 3vw; height: 3vw; background-color: #51e6ef; color: white; font-weight: bold; font-size: 1.8vw; border-radius: 0.5vw 0.5vw 0.5vw 0.5vw; border: 0 solid white; } /* On hover, add a black background color with a little bit see-through */ .prev-1:hover, .next-1:hover { background-color: #51e6ef; } /*---------------------------*/ #AboutUs-content-4 { grid-template-columns: 1fr 2.5fr 1fr; grid-template-rows: 1fr 5fr 1fr; display: grid; background-color: #51e6ef; } #AboutUs-content-grid-4 { grid-column: 2/3; grid-row: 2/3; color: white; display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr; grid-gap: 3vw; } #AboutUs-content-4 img { width: 4vw; } #AboutUs-content-4 h1 { font-size: 4vw; margin: 0; padding: 0; } #AboutUs-content-4 p { font-size: 1vw; } #AboutUs-content-5 { grid-template-rows: 1.3fr 3fr 3fr 3fr 1fr; display: grid; background-color: #fafafa; grid-gap: 2em; } #AboutUs-content-text-head-5 { color: #51e6ef; font-size: 2.5vw; font-weight: bold; padding: 3.3em 1em 1em 4.5em; } .AboutUs-content-grid-5 { grid-template-columns: 1fr 2.2fr 1fr; background-color: white; display: grid; } .AboutUs-grid-5 { margin: 20px; grid-column: 2/3; grid-template-columns: 1fr 1fr; background-color: #fafafa; display: grid; } .AboutUs-text-5 { padding: 0 0 0 2.5vw; } .AboutUs-text-5 h5 { font-size: 1.5vw; } .AboutUs-text-5 p { line-height: 1.4; font-size: 1.2vw; } .About-text-foot-5 { color: #51e6ef; } #AboutUs-content-6 { display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #51e6ef; color: white; padding: 5em 6em 5em 6em; } #AboutUs-content-head-6 { font-size: 1.7em; } #AboutUs-content-grid-6 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1.5fr 1.2fr; grid-gap: 1.2vw; } #AboutUs-content-map-6 { grid-row: 1/3; grid-column: 3/5; } #AboutUs-content-map-6 img { width: 100%; } .AboutUs-content-img-6 { border: 0.3vw solid white; padding: 2.2vw 2vw 2vw 2vw; } .AboutUs-content-img-6 img { width: 3vw; } .AboutUs-content-img-6 h4 { font-size: 1.3vw; margin: 0; line-height: 2vw; } .AboutUs-content-img-6 p { font-size: 1vw; margin: 0; line-height: 1.7vw; } #AboutUs-content-grid-7{ display: grid; grid-template-rows: 1fr 8fr 1fr; } #AboutUs-center-7{ display: flex; grid-row: 2/3; align-items: center; justify-content: center; flex-direction: column; padding: 0 14vw 0 14vw; } #AboutUs-head-7{ display: grid; grid-template-columns: 1.7fr 1fr; } #AboutUs-head-7 p{ font-size: 3.5vw; font-weight: bold; } #AboutUs-head-7 img{ width: 100%; } .AboutUs-main-content-7{ display: grid; background-color: #f4f4f4; width: 100%; grid-template-columns: 1fr 4fr 1fr; } .AboutUs-main-grid-7{ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 2fr 1fr; grid-gap: 2vw; padding: 2vw 0 1vw 0; } .AboutUs-main-grid-7 p{ font-size: 1.3vw; font-weight: bold; } .AboutUs-main-grid-7 p{ font-weight: bold; margin: 0 0 1vw 0; } .AboutUs-main-grid-7 input{ width: 100%; height: 3vw; max-height: 10vw; border: 1px solid gray; border-radius: 0.5vw; font-size: 1.1vw; padding: 0.3vw; } #AboutUs-content-button-7{ display: flex; justify-self: center; align-items: center; grid-column: 1/3; } #AboutUs-button-7{ border-radius: 0.3vw; height: 3.5vw; width: 12vw; background-color: black; color: white; font-weight: bold; font-size: 1vw; } #mini_logo_w{ display: flex; background-color: #51e6ef; width: 4.5vw; height: 7vw; grid-column: 3/4; align-items: end; justify-content: center; border-radius: 0 0 0.5vw 0.5vw; } #mini_logo_w img{ width: 3.5vw; padding: 0 0 0.5vw 0; } #AboutUs-logo-7{ display: flex; justify-content: center; } #AboutUs-inquiry-7{ grid-column: 1/3; grid-row: 3/4; } #AboutUs-inquiry-7 input{ height: 10vw; max-height: 70vw; }