.s1 {padding-top: 120px;padding-bottom: 120px;}
.s1 .title{display: flex;align-items: center;justify-content: center;flex-direction: column;}
.s1 .title h2 {
    font-size: 50px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #1d3865;
    padding-top: 10px;
    line-height: 1.3;
}
.s1 .title > div{overflow: hidden;}

.s1 .profileBx{padding-top: 90px;display: flex;align-items: center;justify-content: center;gap: 88px;}
.s1 .profileBx .profile{max-width: 285px;width: 100%;position: relative;cursor: pointer;}
.s1 .profileBx .profile:hover .img{transition: border-color 0.2s, border-radius 0.2s;border-color: #0b386d;}
.s1 .profileBx .profile .img{position: relative;width: 100%;box-sizing: border-box;border-radius: 21px; border: 2px solid transparent;
    transition: border-color 0.2s, border-radius 0.2s;    
}
.s1 .profileBx .profile .img:before{content:'';display: block; padding-bottom: calc(285/285*100%);width: 100%;}
.s1 .profileBx .profile .img img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: 2;border-radius: 20px;}

.s1 .profileBx .profile .txt{text-align: center;}
.s1 .profileBx .profile .txt > div{
    display: flex;
    align-items: center;
    justify-content: center;
}
.s1 .profileBx .profile .txt strong{font-size: 24px;font-weight: 700;color: #1d3865;line-height: 1.3;padding-top: 15px;display: block;white-space: nowrap;}
.s1 .profileBx .profile .txt p{font-size: 18px;font-weight: 400;color: #727272;line-height: 1.4;padding-top: 10px;white-space: nowrap;}
.s1 .profileBx .profile .txt span{font-size: 18px;font-weight: 400;color: #727272;line-height: 1.4;white-space: nowrap;}

.s1 .profileBx .profile .line{position: absolute;top: 25%;left: -20%;width: 100%;}



.popup{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 99999;  transition: opacity .4s, visibility .4s; opacity: 0; visibility: hidden; line-height: 1.4; }
.popup.on{opacity: 1;visibility: visible;}
.popup .eleBg{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); }
.popup .inn{ width: 95%; max-width: 900px; margin: 0 auto; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 16px; box-sizing: border-box; padding: 50px;padding-top: 90px;max-height: 90%;overflow: auto;}
.popup .inn .cont .close{position: absolute;top: 8%;right: 6%;cursor: pointer;}
.popup .inn .cont .close i{font-size: 30px;color: #000;}

.popup .inn .cont{display: flex;justify-content: space-between;padding-top: 20px;}
.popup .inn .cont .left .row{font-family: 'Manrope', sans-serif;}
.popup .inn .cont .left .row:not(:first-child){padding-top: 40px;}
.popup .inn .cont .left .row .tit h3{font-size: 20px;font-weight: 700;color: #1d3865;line-height: 1.3;}
.popup .inn .cont .left .row .name{width: fit-content;padding-top: 10px;}
.popup .inn .cont .left .row .name p{font-size: 24px;font-weight: 700;color: #000;line-height: 1.3;}
.popup .inn .cont .left .row .name .line{width: 100%;height: 2px;background-color: #0b386d;margin-top: 5px;}
.popup .inn .cont .left .row .sub{padding-top: 10px;white-space: nowrap;display: flex;align-items: flex-start;}
.popup .inn .cont .left .row .sub p{font-size: 24px;font-weight: 700;color: #000;line-height: 1.3;}
.popup .inn .cont .left .row .sub span{font-size: 20px;font-weight: 400;color: #000;line-height: 1.3;display: inline-block;}
.popup .inn .cont .left .row .sub:before{content:'';display: inline-block;width: 2px;height: 18px;background-color: #0b386d;margin-right: 10px;margin-top: 5px;}

.popup .inn .cont .right{max-width: 300px;width: 100%;}
.popup .inn .cont .right img{width: 100%;}
.popup .inn .cont .popup_logo{position: absolute;top: 61%;
    left: 27%;transform: translate(-50%,-50%);}

.popup .inn .cont .left .row .sub .min{min-width: 55px;font-size: 18px;font-weight: 700;color: #0b386d;line-height: 1.3;}
.popup .inn .cont .left .row .sub em{font-size: 18px;font-weight: 400;color: #000;line-height: 1.3;display: inline-block;}

.popup .inn .line2{width: 100%;height: 2px;background-color: #0b386d;margin-top: 40px;}




@media screen and (max-width: 1680px) {
    .s1 .title h2 {font-size: 46px;}
    .s1 .profileBx{gap: 75px;}
    .s1 .profileBx .profile .txt strong {font-size: 22px;}
}
@media screen and (max-width: 1440px) {
    .s1 .title h2 {font-size: 40px;}
    .s1 .profileBx {gap: 50px;}
    .s1 .profileBx .profile{max-width: 250px;}
    .s1 .profileBx .profile .txt strong {font-size: 20px;}
    .s1 .profileBx .profile .line img{width: 95%;}
    .s1 .profileBx .profile .line {top: 42%;left: -15%;}
}
@media screen and (max-width: 1280px) {
    .s1 .title h2 {font-size: 36px;}
    .s1 .profileBx {
        flex-wrap: wrap;
        gap: 60px;
        justify-content: center;
        max-width: 610px;
        margin: 0 auto;
    }
    .s1 .profileBx .profile {width: calc(50% - 40px);max-width: 285px;}
}
@media screen and (max-width: 1024px) {
    .s1 .title h2 {font-size: 32px;}


    .popup .inn{padding: 30px;padding-top: 70px;}
    .popup .inn .cont .close {top: 6%;right: 4%;}
    .popup .inn .cont{gap: 20px;}
    .popup .inn .cont .left .row .name p {font-size: 22px;}
    .popup .inn .cont .left .row .tit h3 {font-size: 18px;}
    .popup .inn .cont .left .row .sub span{font-size: 18px;}
    .popup .inn .cont .left .row .sub em {font-size: 16px;}
    .popup .inn .cont .right {max-width: 260px;}

    .popup .inn .cont .popup_logo{display: none;}
    .popup .inn .cont .left .row .sub:before{margin-top: 3px;}

}
@media screen and (max-width: 820px) {
    .s1 .title h2 {font-size: 28px;}
    .s1 .profileBx .profile .txt strong {font-size: 18px;}
    .s1 .profileBx .profile .txt p {font-size: 16px;}
    .s1 .profileBx .profile .txt span {font-size: 16px;}
    .s1 .profileBx .profile .txt p{white-space: wrap;}
    .s1 .profileBx {align-items: flex-start;gap: 40px;}

    .popup .inn{padding-top: unset;max-width: 450px;padding: 30px;}
    .popup .inn .cont{padding-top: 0;}
    .popup .inn .cont .close {top: 3%;right: 4%;}
    .popup .inn .cont{flex-direction: column-reverse;}
    .popup .inn .cont .left .row .name p {font-size: 20px;}
    .popup .inn .cont .left .row:not(:first-child){padding-top: 20px;}

    .popup .inn .cont .left .row .sub:before {height: 12px;}
    .popup .inn .cont .left .row .sub span {font-size: 16px;}
    .popup .inn .cont .left .row .tit h3 {font-size: 16px;}
    .popup .inn .cont .left .row .sub .min {font-size: 16px;}
    .popup .inn .cont .left .row .sub em {font-size: 14px;}

    .popup .inn .cont .left .row .sub:before {
        margin-top: 5px;
    }
    
}
@media screen and (max-width: 500px) {
    .s1 .title h2 {font-size: 24px;}
    .s1 .profileBx .profile{width: 100%;}

    

    .popup .inn{padding: 20px;width: 90%;}
    .popup .inn .line2 {margin-top: 20px;}
    .popup .inn .cont .close i {font-size: 24px;}

    
    .popup .inn .cont .popup_logo{display: none;}
    .popup .inn .cont .left .row .sub {
        padding-top: 10px;
        white-space:wrap;
        display: flex;
        align-items: flex-start;
    }       
    /* .popup .inn .cont .left .row .sub:before{margin-top: 5px;} */
    .popup .inn .cont .left .row .tit h3 {
        font-size: 14px;
    }
    .popup .inn .cont .left .row .sub span {
        font-size: 14px;
    }
    .popup .inn .cont .left .row .sub .min {
        font-size: 14px;
    }
    .popup .inn .cont .right img {
        width: 70%;
    }
    .popup .inn .cont .left .row .sub:before {
        width: 1.2px;
        height: 14px;
        margin-top: 3px;
    }
}
    /* .popup .inn .cont .left .row .tit h3 {font-size: 14px;}
    .popup .inn .cont .left .row .sub span{font-size: 14px;} */

@media screen and (max-width: 360px) {
    .s1 .title h2 {
        font-size: 22px;
        text-align: center;
    }
    
    .popup .inn .cont .right img {
        width: 60%;
    }
    .s1 .profileBx .profile {
        width: 90%;
    }
    .popup .inn .cont .left .row .sub .min {
        min-width: 40px;
    }
    .popup .inn .cont .left .row .sub:before {
        margin-top: 3.5px;
    }
}




































/* 안쓰는코드 line rotate, gradient */
/* .s1 .profileBx .profile .line {
    width: 330px;
    height: 330px;
    position: absolute; 
    z-index: -1;
    border-radius: 50%;
    top: 25%;
    left: -16%;
}

.s1 .profileBx .profile .line::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from var(--gradient-angle),
        #9b9b9b,
        #fff,
        #9b9b9b
    );
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    0% {
        --gradient-angle: 0deg;
    }
    100% {
        --gradient-angle: 360deg;
    }
} */