header {
    max-width: unset;
}

footer {
    max-width: unset;
    padding: 30px 80px;
}

.introduction-main { width: auto; height: 100%; background-color: #FFFFFF; padding-top: 47px; margin: 0 auto; }

.introduction-main h1 {
    font-family: NotoSansKR;
    font-size: 50px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-align: center;
    color: #222222;
 }

.img-top {
    width: auto;
    height: 434px;
    margin: 120px 80px 0px 80px;
    background-image: url("../img/techno.png");
}

.img-top-content {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 50%;
}

.img-top-content p {
    font-family: NotoSansKR;
    font-size: 40px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 0.75;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;

}

.img-top-content p span {
    font-weight: 500;
}

.img-top-content-img {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 50%;
}

.img-top-content-img img {
    width: 202px;
    height: 49px;
    margin: 51px 192px 0 194px;
    object-fit: contain;
}

.introduction-middle h3 {
    margin: 150px 0px 100px 0px;
    font-family: NotoSansKR;
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: normal;
    text-align: center;
    color: #000000;
}

.introduction-middle-about {
    display: flex;
    align-items: center;
    margin: 0 auto;
    width: 100%;
}

.introduction-middle-about-left {
    width: 50%;
    text-align: right;
    padding-right: 151px;
}

.introduction-middle-about-left img {
    width: 321px;
    height: 70px;
}

.introduction-middle-about-right {
    width: 50%;
}

.introduction-middle-about-right p {
    font-family: NotoSansKR;
    font-size: 18px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.83;
    letter-spacing: normal;
    text-align: left;
    color: #000000;
}

.introduction-middle-about-right p:nth-child(1){
    font-family: NotoSansKR;
    font-size: 30px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: left;
    color: #000000;
}
.introduction-middle-about-right p:nth-child(2){
    font-family: NotoSansKR;
    font-size: 30px;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: left;
    color: #000000;
    font-weight: bold;
    margin-bottom: 24px;
}

.introduction-middle-about-content {
    display: flex;
    justify-content: space-around;
    align-content: center;
    width: 100%;
    max-width: 923px;
    margin: 78px auto 0px auto;
}
.introduction-middle-about-bottom-left, .introduction-middle-about-bottom-right, .introduction-middle-about-bottom-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.introduction-middle-about-bottom-middle img {
    width: 98px;
}

.introduction-middle-about-content hr {
    width: 1px;
    height: 72px;
    margin: 0px 121px;
    transform: rotate(0deg);
    background-color: #222222;
}

.introduction-service-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 923px;
    margin: 0 auto;
}

.introduction-service p {
    font-family: NotoSansKR;
    font-size: 16px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 22px;
    letter-spacing: normal;
    text-align: left;
    color: #000000;
}

.introduction-service p:nth-child(1) {
    font-family: NotoSansKR;
    font-size: 30px;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.37;
    letter-spacing: normal;
    text-align: left;
    color: #000000;
    font-weight: 500;
}

.introduction-service p:nth-child(2), .introduction-service p:nth-child(3) {
    font-family: NotoSansKR;
    font-size: 30px;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.37;
    letter-spacing: normal;
    text-align: left;
    color: #000000;
    font-weight: 300;
}

.introduction-service p:nth-child(3) {
    margin-bottom: 45px;
}

.introduction-service p:nth-child(4), .introduction-service p:nth-child(5) {
    margin-bottom: 20px;
}

.introduction-service-content-2 {
    padding-right: 25px;
}

.introduction-service-content-2 img {
    width: 292px;
    height: 122px;
    object-fit: contain;
}

.introduction-service-content2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 923px;
    margin: 150px auto;
}

.introduction-service-content2-2 {
    text-align: left;
}

.introduction-service-content2-2 img {
    width: 363px;
    height: 366px;
    object-fit: contain;
}

.introduction-service-content3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 923px;
    margin: 0 auto;
}

.introduction-service-content3-2 {
    padding-right: 16px;
}

.introduction-service-content3-2 img {
    width: 310px;
    height: 228px;
    object-fit: contain;
}

.introduction-bottom {
    margin-top: 170px;
    width: auto;
    max-width: 1920px;
    height: 653px;
    padding-top: 80px;
    background-image: url("../img/company_introduction/vision.png");
}

.introduction-bottom h3 {
    margin: 0 0px 100px 0px;
    font-family: NotoSansKR;
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
}

.introduction-bottom-content {
    display: flex;
    justify-content: center;
}

.introduction-bottom-content p {
    font-family: NotoSansKR;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.89;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
}

.introduction-bottom-content p span, .introduction-bottom-content span {
    font-family: NotoSansKR;
    font-size: 18px;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.89;
    letter-spacing: normal;
    text-align: center;
    font-weight: bold;
    color: #00aeef;
}

.introduction-bottom-content1, .introduction-bottom-content2, .introduction-bottom-content3 {
    width: 341px;
    height: 338px;
    border: solid 1px #595959;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.introduction-bottom-content2 {
    margin: 0 -40px;
}
.introduction-bottom-content1-1, .introduction-bottom-content2-1, .introduction-bottom-content3-1{
    text-align: center;
}

p {
    margin: 0;
}

@media screen and (max-width:767px) {
    .introduction-middle { margin: 0 20px;}
    .img-top { height: 384px;}
    .img-top p { font-size: 18px;}
    .img-top-content-img img { width: 148px;}
    .introduction-main h1 {font-size: 30px;}
    .introduction-service-content-2 img, .introduction-service-content2-2 img, .introduction-service-content3-2 img { width: 210px; height: auto; margin: 40px 0 60px 0;}
    .introduction-service-content-2, .introduction-service-content3-2 { padding: 0;}
    .introduction-bottom-content { position: relative;}
    .introduction-bottom-content p { font-size: 12px;}
    .introduction-bottom-content span { font-size: 14px;}
    .introduction-bottom { background: none; padding-top: 0; height: 786px;}
    .introduction-bottom h3 { color: #222; font-size: 12px; }
    .introduction-bottom-content { flex-direction: column; align-items: center; }
    .introduction-bottom-content span { color: #ffffff;}
    .introduction-bottom-content1, .introduction-bottom-content2, .introduction-bottom-content3 { width: 230px; height: 230px; border: none; mix-blend-mode: multiply; margin-bottom: -26px; }
    .introduction-bottom-content1 { background-color: #00aeef; }
    .introduction-bottom-content2 { background-color: #2f80ed;}
    .introduction-bottom-content3 { background-color: #05367B;}
    .introduction-bottom-content1-1 p>span { color: #ffffff; font-size: 14px; }
}
@media screen and (min-width:414px) and (max-width:767px) {
    .introduction-bottom-content1 { position: absolute; top: 120px;}
    .introduction-bottom-content2 { position: absolute; top: 0; left: 60px;}
    .introduction-bottom-content3 { position: absolute; top: 0; right: 20px;}
    .introduction-bottom-content1, .introduction-bottom-content2, .introduction-bottom-content3 { width: 39.113vw; height: 39.113vw; mix-blend-mode: multiply; }
    .introduction-bottom { height: 500px;}

}

@media screen and (min-width:410px) and (max-width:1024px) {
    .img-top p { font-size: 26px;}
    .introduction-main h1 {font-size: 30px;}
    .introduction-middle { margin: 0 30px;}
    .introduction-bottom-content {position: relative;margin: 0 20px;}
    
}
@media screen and (max-width:768px) {
    .introduction-middle h3 { margin: 100px 0 80px 0; font-size: 12px; } 
    .introduction-middle-about-right p { font-size: 16px;}
    .img-top { margin: 30px 0 20px 0; }
    .introduction-middle-about { flex-direction: column; }
    .introduction-middle-about-right { width: auto; }
    .introduction-middle-about-left { padding-right: 0; margin-bottom: 40px; width: auto;}
    .introduction-middle-about-left img { width: auto; max-height: 8vw; }
    .introduction-middle-about-content img { width: auto; height: 10vw; align-items: center;}
    .introduction-service-content, .introduction-service-content2, .introduction-service-content3 { flex-direction: column-reverse; }
    
}
@media screen and (max-width:1023px) {
    .introduction-middle-about-content {  margin: 0 auto; margin-top: 50px;}
    .introduction-middle-about-content p { font-size: 12px; font-weight: 500; margin-top: 10px;}
    .introduction-middle-about-content hr { margin: 0; margin-top: 14px; height: 5vw;}
    
}