@charset "utf-8";

.main-info {display: flex; flex-direction: column; row-gap: 180px;}

.main-visual {display: flex; align-items: center; justify-content: center; column-gap: 80px;}
.main-visual .visual-img {width: 100%; max-width: 362px; height: 460px; border-radius: 10px; overflow: hidden;}
.main-visual .visual-text h1,
.main-visual .visual-text h1 span {font-size: 96px; font-weight: 800;}
.main-visual .visual-text p {font-size:19px; margin-top: 30px; margin-bottom: 40px;}

.main-profile {display: flex; column-gap: 280px;}
.main-profile .profile-l {max-width: 620px;}
.main-profile .profile-l h2 {font-size: 40px; font-weight: 700; margin-bottom: 30px;}
.main-profile .profile-desc {font-size: 17px; line-height: 1.8;}
.main-profile .profile-info {max-width: 530px; display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 80px; border-top: 1px solid var(--color-primary-light); border-left: 1px solid var(--color-primary-light);}
.main-profile .profile-info .info-box {height: 125px; display: flex; flex-direction: column; justify-content: center; row-gap: 2px; padding: 0 30px; border-right: 1px solid var(--color-primary-light); border-bottom: 1px solid var(--color-primary-light);}
.main-profile .profile-info .info-box strong {font-size: 40px; font-weight: 800; color: var(--color-secondary);}
.main-profile .profile-info .info-box span {color: var(--color-text-gray); font-size: 15px;}
.main-profile .profile-r {flex-shrink: 0;}
.main-profile .profile-r .timeline {position: relative; display: flex; flex-direction: column; row-gap: 73px;}
.main-profile .profile-r .timeline::before {content: ""; position: absolute; top: 8px; left: 126px; width: 1px; height: calc(100% - 28px); background-color: var(--color-border);}
.main-profile .profile-r .timeline-item {display: flex; align-items: center; column-gap: 60px; position: relative;}
.main-profile .profile-r .section-label {margin-bottom: 40px;}
.main-profile .profile-r .year {width: 60px;}
.main-profile .profile-r .dot {width: 12px; height: 12px; border: 1px solid #D0D4DF; border-radius: 50%; background-color: #fff; position: relative; z-index: 2;}
.main-profile .profile-r .school strong {display: block; font-weight: 600; margin-bottom: 4px;}
.main-profile .profile-r .school p {font-size: 15px;}
.main-profile .profile-r .tag {font-size: 15px; padding: 2px 8px; background-color: var(--color-primary-light); margin-top: 4px;}
.main-profile .profile-r .birth-box {display: flex; flex-direction: column; row-gap: 16px; margin-top: 80px; padding: 20px 50px; border-left: 10px solid var(--color-primary-light); background-color: #fff; box-shadow: 0 2px 12px rgba(66, 66, 66, 0.08);}
.main-profile .profile-r .birth-box > span {font-size: 15px; font-weight: 600;}
.main-profile .profile-r .birth-box h3 {font-size: 40px; font-weight: 800;}
.main-profile .profile-r .birth-box .line {width: 30px; height: 1px; background-color: var(--color-secondary);}
.main-profile .profile-r .birth-box > p {font-size: 15px; line-height: 1.6;}

.main-activity {background-color: var(--color-bg);}
.main-activity .section-top {display: flex; align-items: center; justify-content: space-between; margin-bottom: 50px;}
.main-activity .section-top h2 {font-size: 52px; font-weight: 700;}

/* 반응형 */
@media screen and (max-width: 1520px) {
    .main-profile {column-gap: 14vw;}

}
@media screen and (max-width: 1440px) {

}
@media screen and (max-width: 1280px) {

}
@media screen and (max-width: 1024px) {

    .main-info {row-gap: 140px; padding: 80px 0 140px 0;}
    .main-visual {column-gap: 60px;}
    .main-visual .visual-text h1,
    .main-visual .visual-text h1 span {font-size: 76px;}
    
    .main-profile {flex-direction: column; row-gap: 100px;}
    .main-profile .profile-info {max-width: 272px;}
    
}
@media screen and (max-width: 768px) {
    
    .main-info {padding: 60px 0 140px 0;}
    .main-visual {flex-direction: column; row-gap: 60px;}
    .main-visual .visual-text {width: 100%;}
}
@media screen and (max-width: 640px) {
    
}
@media screen and (max-width: 500px) {

    .main-info {padding: 20px 0 140px 0; row-gap: 100px;}
    .main-visual .visual-img {max-width: 100%;}
    .main-visual .visual-text h1,
    .main-visual .visual-text h1 span {font-size: 64px;}

    .main-profile .profile-info {margin-top: 100px; grid-template-columns: repeat(1, 1fr);}
    .main-profile .profile-r .timeline {row-gap: 60px;}
    .main-profile .profile-r .timeline-item {column-gap: 22px;}
    .main-profile .profile-r .timeline::before {left: 88px;}

    .main-activity .section-top {flex-direction: column; row-gap: 30px; align-items: flex-start;}

}
@media screen and (max-width: 340px) {

}

/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/