File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
/* 메인 CSS */
table {
width: 100%;
border-collapse: collapse;
padding: 0;
border: 0;
border-spacing: 0px;
}
.w1400 {
max-width: 1300px;
margin: 0 auto;
/* overflow-x: hidden */
position: relative;
clear: both;
min-height: inherit;
}
/* 메뉴 */
/* 메인 */
.main-box {
width: 100%;
background: linear-gradient(#425fed, #5dadf6);
}
.main-box-wrap {
padding: 5rem 0;
display: grid;
grid-template-columns: 0.8fr 1fr;
}
.main-text {
color: white;
}
.main-text p {
width: 45rem;
font-family: SBaggroM;
font-weight: 300 !important;
text-shadow: 2px 2px 2px #33333382;
font-size: 3rem;
line-height: 200%;
}
.main-text span {
font-size: 5.7rem;
font-weight: 300 !important;
text-shadow: 2px 2px 2px #33333382;
}
.main-benner {
flex: 0 0 60%;
height: 338px;
background: url(../jpg/main.png) no-repeat;
background-size: cover;
box-shadow: 2px 2px 4px #33333382;
}
.main-notice {
grid-column: 1/3;
padding: 0 0 5rem;
}
.main-notice h2 {
font-size: 1.8rem;
color: white;
padding: 1rem;
}
.main-notice h2 i {
margin-right: 1rem;
}
.main-notice ul {
border-radius: 0.5rem;
border: 1px solid white;
background-color: #00000034;
padding: 0.5rem 2rem;
}
.main-notice ul li {
color: white;
font-size: 1.5rem;
padding: 0.5rem;
}
.main-notice ul li:nth-child(1) {
border-bottom: 1px dotted white;
}
/* 퍼즐 */
.main-content-wrap {
width: 100%;
height: 100%;
padding: 60px;
}
.main-puzzle-container {
margin: 0 auto;
display: grid;
overflow: visible;
grid-template-columns: 1fr 1fr 1fr;
}
.main-puzzle-container > div:nth-child(4) {
position: relative;
}
.main-puzzle-container > div:nth-child(4)::after {
position: absolute;
content: "";
width: 90px;
height: 90px;
bottom: -45px;
left: 50%;
background-color: #009d46;
border-radius: 45px;
transform: translateX(-50%);
z-index: -1;
}
.main-grid-name {
width: 100%;
height: 7rem;
display: flex;
font-family: SBaggroM;
background: url(../jpg/notice-banner.png) no-repeat center center;
background-size: cover;
position: relative;
}
.main-grid-name::after {
position: absolute;
content: "";
width: 90px;
height: 90px;
top: -45px;
left: 50%;
background-color: #3f87f7;
border-radius: 45px;
transform: translateX(-50%);
}
.main-grid-name h3 {
width: 77%;
height: 7rem;
padding-left: 1rem;
line-height: 7rem;
font-size: 2.4rem;
color: white;
background-size: cover;
position: relative;
}
.main-grid-name button {
border: 0;
padding: 1rem;
font-family: "Pretendard-Regular";
font-size: 1.3rem;
font-weight: 800;
text-shadow: 2px 2px 2px #33333382;
color: white;
background-color: #009d4700;
}
.m-p-table tr {
width: 100%;
height: 10%;
border-top: 1px solid #333;
}
.m-p-table {
overflow: hidden;
}
.m-p-table td {
padding: 1rem;
font-size: 1.6rem;
color: #333;
font-family: "Pretendard-Regular";
font-weight: 700;
}
.m-p-table td p {
font-size: 1.4rem;
padding-top: 1rem;
font-family: "Pretendard-Regular";
font-weight: 500;
}
.main-wrap-grid {
grid-row: 1 / span 2;
border: 1px solid #3f87f7;
}
.main-wrap-grid-2 {
background: url(../jpg/main-pu.png) no-repeat;
background-size: cover;
z-index: 1;
}
.main-wrap-grid-2 div,
.main-wrap-grid-3 div,
.main-wrap-grid-4 div,
.main-wrap-grid-5 div {
width: 100%;
height: 100%;
background-size: 123px 123px;
margin: 0 auto;
}
.main-wrap-grid-2 button,
.main-wrap-grid-3 button,
.main-wrap-grid-4 button,
.main-wrap-grid-5 button {
border: 0;
font-size: 2.5rem;
font-weight: 300;
color: white;
font-family: SBaggroM;
cursor: pointer;
text-shadow: 2px 2px 2px #3333335b;
background-color: #33333300;
text-align: center;
width: 100%;
padding-bottom: 2.8rem;
}
.main-wrap-grid-4 div img {
width: 110px !important;
text-align: center;
margin: 0 auto;
padding-top: 6rem;
padding-bottom: 2.5rem;
}
.main-wrap-grid-1 div img,
.main-wrap-grid-2 div img,
/* .m-p-c-4 d/iv jpg, */
.main-wrap-grid-3 div img,
.main-wrap-grid-5 div img {
width: 80px !important;
text-align: center;
margin: 0 auto;
padding-top: 5rem;
padding-bottom: 2.5rem;
}
.main-wrap-grid-3 {
background: url(../jpg/m3.png) no-repeat center right;
background-size: cover;
}
.main-wrap-grid-4 {
background: url(../jpg/m4.png) no-repeat;
}
.main-wrap-grid-5 {
background: url(../jpg/main-pu2.png) no-repeat center center;
background-size: cover;
}
/* 메인 홍보/뉴스 */
.main-content-news {
width: 100%;
padding: 1rem;
background: url(../jpg/123.png) no-repeat center center;
background-size: cover;
}
.mmain-wrap-news {
width: 100%;
height: 100%;
padding: 30px;
}
.main-wrap-news-hidden {
width: 100%;
margin: 0 auto;
}
.main-wrap-news h3 {
width: 100%;
padding: 30px;
font-size: 2rem;
color: white;
}
/* 히스토리 */
.main-history {
width: 100%;
padding: 3rem;
background-color: #ededed;
}
.main-history-wrap {
text-align: center;
}
.main-history-wrap h1 {
text-align: center;
font-size: 3rem;
padding: 5rem;
font-family: SBaggroM;
color: #3f87f7;
}
.main-history-box {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.main-history-box div {
height: 300px;
}
.main-history-box-1,
.main-history-box-2,
.main-history-box-3 {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 6rem;
justify-content: center;
}
.main-history-box-1 div,
.main-history-box-2 div,
.main-history-box-3 div {
width: 100%;
height: 100%;
}
.main-history-box-1 div span,
.main-history-box-2 div span,
.main-history-box-3 div span {
font-size: 1.8rem;
font-family: "Pretendard-Regular";
}
.main-history-box-1 p:nth-child(2) {
width: 10rem;
margin: 0 auto;
justify-content: center;
background: url(../jpg/m-h-g.png) no-repeat;
height: 10rem;
background-size: contain;
}
.main-history-box-2 p:nth-child(2) {
width: 10rem;
margin: 0 auto;
justify-content: center;
background: url(../jpg/m-h-g-1.png) no-repeat;
height: 10rem;
background-size: contain;
}
.main-history-box-3 p:nth-child(2) {
width: 10rem;
margin: 0 auto;
justify-content: center;
background: url(../jpg/m-h-g-3.png) no-repeat;
height: 10rem;
background-size: contain;
}
.main-history-box-1 h3,
.main-history-box-2 h3,
.main-history-box-3 h3 {
padding: 1rem;
font-size: 1.7rem;
font-family: "Pretendard-Regular";
}
.main-history-box-1 p:nth-child(3),
.main-history-box-2 p:nth-child(3),
.main-history-box-3 p:nth-child(3) {
padding: 1rem;
font-size: 3rem;
font-family: SBaggroM;
color: #09365e;
}
/* 파트너사 */
.main-partner {
width: 100%;
height: 100%;
}
.main-partner-wrap {
width: 100%;
padding-top: 60px;
margin: 0 auto;
text-align: center;
}
.main-partner-wrap h3,
.main-partner-wrap h1 {
text-align: center;
font-size: 3rem;
}
.main-partner-wrap h1 {
font-family: SBaggroM;
color: #3f87f7;
}
.main-partner-logo {
width: 100%;
height: 100px;
padding: 2rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
flex-wrap: nowrap;
justify-content: space-between;
}
.main-partner-img {
width: 100%;
justify-content: center;
}
.lo1 {
background: url(../jpg/logo/ko-w.png) no-repeat;
background-size: 50%;
background-position: center;
}
.lo2 {
background: url(../jpg/logo/keris.gif) no-repeat;
background-size: 50%;
background-position: center;
}
.lo3 {
background: url(../jpg/logo/kefa.png) no-repeat;
background-size: 50%;
background-position: center;
}
.lo4 {
background: url(../jpg/logo/ko-go.jpg) no-repeat;
background-size: 50%;
background-position: center;
}
.lo5 {
background: url(../jpg/logo/edutech.png) no-repeat;
background-size: 50%;
background-position: center;
}
/* ------------------------------------------------------------------------------------------------------ */
/* matching css */
.matching-box-wrap {
width: 100%;
background: linear-gradient(#5dadf6, #2e87da, #5dadf6);
}
.matching-wrap {
padding: 30px 30px;
display: grid;
width: 100%;
/* border: 1px solid red; */
justify-content: center;
grid-template-columns: 1fr 1fr 1fr;
}
.matching-wrap div {
/* width: 40%; */
width: 100%;
/* border: 1px solid red; */
}
.matching-wrap img {
width: 100%;
margin: 0 auto;
/* text-align: center; */
justify-content: center;
}
.matching-text {
margin: 0 auto;
text-align: center;
font-size: 5rem;
/* padding-bottom: 50px; */
font-family: SBaggroM;
margin-top: 25%;
color: white;
}
.matching-box-wrap-one {
width: 100%;
height: 100%;
padding: 3rem;
margin: 0 auto;
text-align: center;
color: #3f87f7;
background-color: #e2e2e2;
}
.matching-box-grid > h3 {
font-size: 2.6rem;
padding: 3rem;
font-family: SBaggroM;
}
.matching-box-bos {
width: 100%;
place-items: center;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.matchingbox {
width: 90%;
padding: 2rem;
}
.matchingbox h3 {
padding: 1rem;
font-size: 2rem;
color: #3f87f7;
font-family: "Pretendard-Regular";
}
.matchingbox img {
/* padding: 2rem; */
height: 119px;
width: 80%;
margin: 0 auto;
object-fit: contain;
}
.matchingbox p:nth-child(3) {
text-align: left;
color: #333;
font-size: 1.5rem;
padding: 1rem;
}
.matchingbox p:nth-child(4) {
text-align: right;
font-size: 1.5rem;
color: #333;
padding: 1rem;
}
.matchingbox div {
padding: 1rem;
background-color: #ffffff;
box-shadow: 2px 2px 2px #33333332;
position: relative;
}
.matchingbox div:nth-child(1):before {
position: absolute;
content: "AA등급";
line-height: 40px;
color: white;
font-size: 1.5rem;
font-weight: 800;
width: 90px;
height: 40px;
top: -25px;
right: -5%;
background-color: #3f87f7;
border-radius: 45px;
transform: translateX(-50%);
}
.matchingbox-1 {
display: flex;
box-shadow: 0px 0px 0px white !important;
flex-direction: row;
justify-content: flex-end;
}
.matchingbox-1 p {
text-align: right;
font-size: 1.5rem;
padding: 1rem;
color: rgb(6, 6, 6);
}
.matchingbox-text {
text-align: right;
font-size: 1.3rem;
padding: 1rem;
font-weight: 700;
color: rgb(6, 6, 6);
}
.matchingbox-text span {
font-weight: 400;
}
.matching-box-main-two {
width: 100%;
margin: 0 auto;
}
.matching-box-grid-two {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
margin: 0 auto;
place-items: center;
padding: 3rem;
}
.matching-box-2 {
padding: 2rem;
margin: 1rem;
background-color: #f9f9f9;
box-shadow: 2px 2px 5px #33333332;
}
.matching-box-2 div {
display: flex;
flex-wrap: wrap;
}
.matching-box-2 h5 {
width: 100%;
font-size: 1.5rem;
font-family: "Pretendard-Regular";
}
.matching-box-2 p {
width: 100%;
font-size: 1.5rem;
text-align: right;
justify-content: right;
font-family: "Pretendard-Regular";
}
.matchingbox-2 {
width: 100%;
display: flex;
padding: 1.5rem 0px;
flex-wrap: nowrap;
justify-content: flex-end;
flex-direction: row !important;
}
.matchingbox-2 p {
width: 25%;
}
.mat-bos {
padding: 6rem 6rem 1rem 6rem;
width: 100%;
}
.mat-bos img {
width: 50px;
/* transform: translateY(10px);/ */
z-index: -1;
}
.mat-bos h1 {
font-size: 2.7rem;
z-index: 100 !important;
font-family: SBaggroM;
}
.matDtail-sec {
width: 100%;
padding: 0rem 6rem 6rem 6rem;
display: grid;
grid-template-columns: 1fr;
}
.mat-sec1 {
display: grid;
grid-template-columns: 85% 15%;
padding: 2rem 3rem 1rem 3rem;
background-color: #f4f4f4;
border-top: 1px solid rgb(199, 199, 199);
}
.mat-sec1 h2 {
font-size: 2rem;
color: #3f87f7;
}
.mat-sec1 h2 span {
color: #90baff;
font-size: 1.5rem;
}
.mat-sec1 div {
padding: 1rem;
border-radius: 0.5rem;
margin-top: 3rem;
/* text-align: right; */
text-align: center;
background-color: #3f87f7;
}
.mat-sec1 div label {
color: white;
font-size: 1.5rem;
margin-right: 1rem;
}
.mat-sec1 div i {
font-size: 1.5rem;
}
.mat-sec2 {
border-top: 1px solid rgb(199, 199, 199);
border-bottom: 1px solid rgb(199, 199, 199);
}
.mat-sec2 div {
padding: 2rem 0;
}
.mat-sec2-end {
display: grid;
grid-template-columns: 1fr 1fr;
}
.mat-sec2 p {
font-size: 1.7rem;
}
.mat-sec2-end p {
font-size: 1.5rem;
}
.mat-sec2-end p span {
color: #3f87f7;
margin-right: 1rem;
}
.mat-sec2-end p:nth-child(2) {
text-align: right;
}
.mat-sec2-bt {
text-align: right;
width: 100%;
padding: 2rem 0;
}
.mat-sec2-bt button {
width: 15%;
padding: 1rem;
background-color: #3f87f7;
color: white;
border-radius: 0.5rem;
font-family: "Pretendard-Regular";
}
/* ---------------------------------------------------------------------------------------------- */
/* Data css */
.data-main {
width: 100%;
}
.data-b {
width: 100%;
}
.data-b-b {
width: 100%;
padding: 6rem;
font-size: 4rem;
color: #0e0077;
font-family: SBaggroM;
}
.data-text img {
width: 80px;
}
.data-text p {
position: relative;
}
.data-text p::before {
content: "";
position: absolute;
top: -30px;
background-size: 60px 30px;
background-image: url("../jpg/tdata-img-text.png");
width: 60px;
height: 30px;
}
.data-b-main {
width: 100%;
}
.data-b-grid {
width: 100%;
padding: 3rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.data-table {
width: 100%;
}
.da1 {
width: 80%;
height: 40rem;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
align-content: start;
}
.da1 h2 {
font-family: SBaggroM;
font-weight: 500;
font-size: 2rem;
}
.da1 h2 span {
font-size: 4rem;
}
.data-b-1 {
/* background-color: #007aff; */
background: url(../jpg/data-img.png) no-repeat center center;
background-size: cover;
position: relative;
text-align: center;
/* border-radius: 2rem; */
}
.data-b-1 h2 {
text-align: left;
padding: 3rem;
color: #014099;
}
.data-b-1 p {
font-size: 2rem;
padding: 3rem;
padding-top: 5rem;
width: 100%;
font-family: SBaggroM;
font-weight: 400;
text-align: left;
color: #014099;
cursor: pointer;
}
.data-b-1::after {
position: absolute;
content: "";
width: 90px;
height: 90px;
right: -90px;
top: 40%;
background-color: #e2ecfc;
border-radius: 45px;
transform: translateX(-50%);
z-index: -1;
}
.data-b-2 {
background: url(../jpg/data-img3.png) no-repeat center center;
background-size: cover;
position: relative;
text-align: center;
cursor: pointer;
}
.data-b-2 h2 {
text-align: center;
padding: 3rem;
color: #0e5e2e;
}
.data-b-2 p {
font-size: 2rem;
padding: 3rem;
padding-top: 5rem;
font-family: SBaggroM;
text-align: center;
color: #1a8445;
}
.data-b-2 p span {
font-size: 3.5rem;
color: #0e5e2e;
}
.data-b-3 {
background: url(../jpg/data-img2.png) no-repeat center center;
background-size: cover;
position: relative;
text-align: center;
cursor: pointer;
/* border: 1px solid red; */
}
.data-b-3::after {
position: absolute;
content: "";
width: 90px;
height: 90px;
left: 0px;
top: 40%;
background-color: #f8e7cd;
border-radius: 45px;
transform: translateX(-50%);
z-index: -1;
}
.data-b-3 h2 {
text-align: right;
padding: 3rem;
color: #c26400;
}
.data-b-3 p {
font-size: 2rem;
padding: 3rem;
padding-top: 5rem;
width: 100%;
font-family: SBaggroM;
text-align: right;
color: #e07e27;
}
.data-b-3 p span {
font-size: 3.5rem;
color: #c26400;
}
.data-table-tr {
padding: 12rem 6.5rem;
}
.data-table-tr th {
font-size: 1.5rem;
background-color: #007aff;
color: white;
padding: 1.1rem;
font-family: "Pretendard-Regular";
}
.data-table-tr td {
background-color: white;
padding: 2rem;
border-top: 1px solid rgb(187, 187, 187);
text-align: center;
font-size: 1.5rem;
font-weight: 500;
color: #333;
cursor: pointer;
font-family: "Pretendard-Regular";
}
.data-table-tr td:nth-child(2) {
text-align: left;
}
.input:focus,
.input:focus-visible {
border-color: #3898ec;
outline: none;
}
.data-t p {
width: 80%;
padding: 0rem 0rem 1rem 3rem !important;
}
.data-t2 p {
padding: 0rem 0rem 0rem 0rem !important;
margin: 0 auto;
}
.guide-logo-bt {
float: right;
/* margin: 0 auto; */
font-size: 3rem;
width: 70%;
padding-right: 3rem;
font-family: SBaggroM;
text-align: right;
cursor: pointer;
}
.guide-logo-bt a {
color: #e07e27;
}
/* --------------------------------------------------------------------------------------------------------- */
/* News css */
.new-logo img {
width: 50px;
height: 50px;
z-index: -1;
/* transform: translateY(-40px); */
}
/* 모달 */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9998;
}
.modal-content {
top: 50%;
left: 50%;
position: fixed;
z-index: 9999;
/* bottom: auto; */
padding: 4rem;
border-radius: 2rem;
background-color: #f9f9f9;
transform: translate(-50%, -50%);
/* margin: 0 auto; */
box-shadow: 2px 2px 5px #86868644;
width: 70%;
margin: 0 auto;
height: 70%;
}
.modal-content button {
position: relative;
/* margin: 50%; */
transform: translate(-52%, 0);
top: 10%;
left: 50%;
padding: 2rem 6rem 2rem;
background-color: #007aff;
border-radius: 2rem;
color: white;
font-family: "Pretendard-Regular";
}
/* ----------------------------------- */
.news-bos {
width: 100%;
display: grid;
gap: 3rem;
grid-template-columns: 1fr 1fr 1fr;
padding: 6rem 6rem 12rem 6rem;
/* border: 1px solid red; */
}
.news-bos-box {
display: grid;
grid-template-columns: 1fr;
margin: 0 auto;
border-radius: 2rem;
padding: 2rem;
background-color: #f7f7f7;
box-shadow: 2px 2px 5px #8484847c;
}
.news-bos-box div {
padding: 1rem;
}
.modal-img {
width: 100%;
height: 195px;
/* border: 1px solid/ red; */
}
.news-bos-box div h3 {
font-size: 1.7rem;
padding: 1rem;
}
.news-bos-box img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 2.5rem;
box-shadow: 2px 2px 5px #8484847c;
}
.news-box-end {
display: grid;
grid-template-columns: 1fr 1fr;
}
.news-box-sed p {
font-size: 1.5rem;
/* padding: 1rem; */
/* background-color: aquamarine; */
}
.news-box-end p {
font-size: 1.5rem;
color: #3f87f7;
/* padding: 1rem; */
}
.news-box-end p span {
color: #333;
}
.news-box-end p:nth-child(2) {
text-align: right;
}
/* ---------------------------------------------------------------- */
/* Notice css */
.noti-bos {
width: 100%;
}
.noti-sec {
width: 100%;
padding: 12rem 3rem;
}
.noti-sec-table table {
background-color: white;
border-bottom: 1px solid #cccccc;
}
.noti-sec-table th {
padding: 1.5rem;
color: white;
background-color: #007aff;
font-size: 1.5rem;
}
.noti-sec-table td {
padding: 1.5rem;
font-size: 1.5rem;
cursor: pointer;
border-bottom: 1px solid #cccccc;
text-align: center;
}
/* ----------------------------------------------------------------------- */
/* Guide css */
.guide-bos {
width: 100%;
height: 100%;
}
.guide-logo {
width: 100%;
display: grid;
grid-template-columns: 80% 20%;
}
.guide-logo-bt {
background-color: hsl(217, 92%, 61%);
margin: 0 auto;
padding: 1.5rem;
border-radius: 2rem;
text-align: center;
}
.guide-logo-bt i,
.guide-logo-bt a {
color: white;
}
.guide-sec {
padding: 3rem;
}
/* ------------------------------------------------------------------------------ */
/* Technology css */
.tech-logo {
padding: 6rem 2rem 2rem 2rem;
width: 85%;
}
.tech-logo h1 {
font-size: 4rem;
font-family: SBaggroM;
font-weight: 500;
color: #0e0077;
/* position: relative; */
}
.tech-logo img {
width: 10rem;
}
.tech-bos {
width: 90%;
margin: 0 auto;
/* place-items: center; */
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 4rem;
padding: 6rem 3rem 6rem 3rem;
text-align: center;
/* border: 1px solid red; */
}
.tech-box-sec {
padding: 2rem;
/* border-radius: 2rem; */
background-color: #f9f9f9;
box-shadow: 2px 2px 5px rgba(191, 191, 191, 0.447);
/* border: 1px solid rgb(191, 191, 191); */
}
.tech-box-sec-h3 {
padding: 1rem;
font-size: 1.7rem;
font-family: "Pretendard-Regular";
}
.tech-box-sec div img {
/* border: 1px solid blue; */
box-shadow: 3px 3px 6px rgba(191, 191, 191, 0.447);
width: 85%;
height: 15rem;
margin: 0 auto;
background-size: cover;
border-radius: 1.5rem;
}
.tech-box-sec div p {
width: 85%;
padding: 1rem;
margin: 0 auto;
font-size: 1.5rem;
font-family: "Pretendard-Regular";
}
.tech-box-sec div button {
width: 85%;
border-radius: 2rem;
padding: 2rem;
font-size: 1.5rem;
color: white;
font-family: "Pretendard-Regular";
background-color: #3f87f7;
}
.tech-logo {
padding: 6rem 2rem 2rem 2rem;
width: 85%;
}
.tech-logo h1 {
font-size: 4rem;
font-family: SBaggroM;
font-weight: 500;
color: #0e0077;
/* position: relative; */
}
.tech-logo img {
width: 10rem;
}
.tech-sec {
width: 100%;
padding: 2rem;
}
.tech-sec1 {
display: grid;
grid-template-columns: 85% 15%;
padding: 2rem 3rem 1rem 3rem;
background-color: #f4f4f4;
border-top: 1px solid rgb(199, 199, 199);
}
.tech-sec1 h2 {
font-size: 2rem;
color: #3f87f7;
}
.tech-sec1 div {
padding: 1rem;
border-radius: 0.5rem;
margin-top: 3rem;
/* text-align: right; */
text-align: center;
background-color: #3f87f7;
}
.tech-sec1 div label {
color: white;
font-size: 1.5rem;
margin-right: 1rem;
}
.tech-sec1 div i {
font-size: 1.5rem;
}
.tech-sec2 {
border-top: 1px solid rgb(199, 199, 199);
border-bottom: 1px solid rgb(199, 199, 199);
}
.tech-sec2 section {
display: grid;
grid-template-columns: 50% 1fr;
}
.tech-sec2 section div:nth-child(1) {
/* background-color: gainsboro; */
padding: 6rem;
/* border: 1px solid red; */
/* justify-content: space-between; */
text-align: right;
}
.tech-sec2 section div:nth-child(2) {
/* border: 1px solid red; */
padding: 6rem;
display: grid;
grid-template-columns: 1fr;
}
.tech-sec2 section div:nth-child(2) p {
border-top: 1px solid gainsboro;
padding: 4rem;
}
.tech-sec2 section div:nth-child(2) span {
color: #3f87f7;
font-size: 2rem;
font-weight: 700;
}
.tech-sec2 section img {
padding: 5rem;
margin: 0 auto;
box-shadow: 1px 1px 5px 5px #b2b2b236;
background-color: rgb(190, 190, 190);
/* border: 1px solid red; */
width: 50%;
}
.tech-sec2 div {
padding: 2rem 0;
}
.tech-sec2 p {
font-size: 1.7rem;
}
.tech-sec2-end p {
text-align: right;
font-size: 1.5rem;
}
.tech-sec2-end p span {
color: #3f87f7;
margin-right: 1rem;
}
.tech-sec2-end p:nth-child(2) {
text-align: right;
}
.tech-sec2-bt {
text-align: right;
width: 100%;
padding: 2rem 0 6rem 0;
}
.tech-sec2-bt button {
width: 15%;
padding: 1rem;
background-color: #3f87f7;
color: white;
border-radius: 0.5rem;
font-family: "Pretendard-Regular";
}
/* --------------------------------------------------------------------------- */
/* lnfo css */
.info-box-button {
width: 60%;
margin: 0 auto;
display: grid;
padding: 0 0 6rem 0;
grid-template-columns: 1fr 1fr;
}
.info-sec-bt {
/* border: 1px solid red; */
width: 60%;
margin: 0 auto;
padding: 6rem;
text-align: right;
}
.info-sec-bt button {
width: 30%;
padding: 2rem;
color: white;
border-radius: 1.5rem;
background-color: #3f87f7;
}
.info-box-button button {
padding: 3rem 2rem 3rem 2rem;
margin-right: 3rem;
color: white;
border-radius: 2rem;
}
.info-sec,
.info-sec-1 {
padding: 6rem;
margin: 0 auto;
border: 1px soli/d #333;
width: 60%;
}
.info-sec div,
.info-sec-1 div {
display: grid;
border-bottom: 1px solid #333;
grid-template-columns: 30% 2fr;
}
.info-sec div p {
padding: 3rem;
font-size: 1.5rem;
}
.info-sec-1 div a {
padding: 3rem;
}
.info-sec-1 div p {
padding: 3rem;
font-size: 1.5rem;
/* border-bottom: 1px solid #333; */
}
.info-sec-1 section {
padding: 3rem;
}
.info-sec-1 section img {
width: 200px;
height: 200px;
border-radius: 50%;
/* border: 1px solid red; */
margin: 0 auto;
box-shadow: 2px 2px 5px #33333345;
}
.info-td {
/* border: 1px solid red; */
height: 250px;
}
.info-pw {
display: grid;
grid-template-columns: 30% 1fr 1fr !important;
}
.info-pw button {
margin: 2rem;
border-radius: 0.5rem;
background-color: #3f87f7;
color: white;
}
.info-box-button {
width: 60%;
margin: 0 auto;
display: grid;
padding: 0 0 6rem 0;
grid-template-columns: 1fr 1fr;
}
.info-sec-bt {
/* border: 1px solid red; */
width: 60%;
margin: 0 auto;
padding: 6rem;
text-align: right;
}
.info-sec-bt button {
width: 30%;
padding: 2rem;
color: white;
border-radius: 1.5rem;
background-color: #3f87f7;
}
.info-box-button button {
padding: 3rem 2rem 3rem 2rem;
margin-right: 3rem;
color: white;
border-radius: 2rem;
}
.info-sec,
.info-sec-1 {
padding: 6rem;
margin: 0 auto;
border: 1px soli/d #333;
width: 60%;
}
.info-sec div,
.info-sec-1 div {
display: grid;
border-bottom: 1px solid #333;
grid-template-columns: 30% 2fr;
}
.info-sec div p {
/* border-bottom: 1px solid #333; */
padding: 3rem;
font-size: 1.5rem;
}
.info-sec-1 div p {
padding: 3rem;
font-size: 1.5rem;
}
.info-sec-1 section {
margin: 0 auto;
width: 30%;
text-align: center;
}
.info-sec-1 section img {
width: 100%;
margin: 0 auto;
}
.info-td {
/* border: 1px solid red; */
height: 250px;
}
.info-input {
width: 100%;
padding: 2rem;
border-radius: 0.5rem;
}
.info-td input {
height: 100%;
width: 100%;
padding: 2rem;
border-radius: 0.5rem;
}
/* Introduction css */
.intro {
width: 100%;
padding: 6rem;
}
.intro-logo {
width: 100%;
padding: 6rem 2rem;
}
.intro-logo h1 {
font-size: 3rem;
font-family: SBaggroM;
font-weight: 500;
color: #2c407f;
}
.intro-text {
padding: 3rem;
}
.intro-text h3 {
padding: 1rem 1rem 3rem;
font-size: 2rem;
color: #00335a;
font-family: "Pretendard-Regular";
}
.intro-text i {
padding: 1rem;
color: #00335a;
font-family: "Pretendard-Regular";
}
.intro-text p {
padding: 1rem;
font-size: 1.5rem;
color: #00335a;
font-family: "Pretendard-Regular";
}
.intro-img {
width: 100%;
padding: 3rem;
display: grid;
gap: 0;
grid-template-columns: 1fr 1fr 1fr;
}
.intro-img img {
width: 100%;
}
.intro-img img:nth-child(2) {
transform: translateY(-4.8rem);
}
.intro-img img:nth-child(3) {
transform: translateY(-9.7rem);
}