@charset "utf-8";
main .more-btn {font-size: max(14px,1.8rem); padding: 1.5rem 5rem; border-radius: 5rem; display: inline-block; font-weight: 500;} 
 
.main01 .inner {display: grid; grid-template-columns: 1.55fr 2fr; gap: 2rem 2.5rem; transition: all 0.4s;}
.main01 .box {padding: 4.5rem; height: 34.5rem; transition: all 0.4s; position: relative;justify-content: space-between;align-items: flex-start; overflow: hidden;}
.main01 .box1 {grid-row: 1 / span 2; height: auto;color: #fff; }
.main01 .box3 {color: #fff;}
.main01 .box .more-btn {background: #fff; position: relative; z-index: 2; color: #000; transform: translateY(200%); transition: all 0.4s; opacity: 0;}
.main01 .txt {position: relative; z-index: 2;}
.main01 .txt h2 {font-size: 4.5rem; font-weight: 600; line-height: 1.3em;}
.main01 .box1 .txt h2 span {font-size: 5.5rem;}
.main01 .txt h2 span {font-weight: 500; font-size: 5rem;}
.main01 .txt p {font-size: 2rem; font-weight: 500; margin-top: .8rem;}
.main01 .img {position: absolute; top:0;left: 0; width: 100%; height: 100%; border-radius: 2rem; overflow: hidden;}
.main01 .img img {width: 100%; height: 100%; transition: all 0.4s; object-fit: cover;}
@media (min-width:1081px) {
    .main01 .box:hover .more-btn {transform: translateY(0); opacity: 1;}
    .main01 .inner:has(.box1:hover) {grid-template-columns: 2.1fr 2fr;}
    .main01 .inner:has(.box2:hover), .main01 .inner:has(.box3:hover) {grid-template-columns: 1.55fr 2.6fr;}
}

@media (max-width:1080px) {
    .main01 .inner {grid-template-columns: 1fr; }
    .main01 .box {grid: 1; height: 28em;}
    .main01 .box1 {grid: 1; height: 36rem;}
}

.main02 {margin: 7rem auto;}
.main02 .search-wrap {background: #eee;  border-radius: 6.5rem;position: relative; cursor: pointer; transition: all 0.2s;}
.main02 .search-wrap .box1 {justify-content: space-between; transition: all 0.2s; padding: 4.4rem 8rem;}
.main02 .search-wrap .box1 h3 {font-size: 2.5rem; font-weight: 600; position: relative; width: 26rem;}
.main02 .search-wrap .box1 h3::before {content:""; position: absolute; top:50%; right:0; transform: translateY(-50%); width: 1px; height: 20px; background: #aaa;}
.main02 .search-wrap .box1 h4 {font-size: 2.5rem; color: #666; width: calc(100% - 52rem); text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;}
.main02 .search-wrap .box1 .img {width: 26rem; justify-content: flex-end;}
.main02 .search-wrap .box1 img {max-width: max(25px,3rem);}
.main02 .search-wrap:hover {background: #014fc2;}
.main02 .search-wrap:hover .box1 * {color: #fff;}
.main02 .search-wrap:hover .box1 img {filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);}
@media (max-width:1400px) {
    .main02 .search-wrap  {padding: 0 4%;}
    .main02 .search-wrap .box1 {padding: 4rem 6rem;}
    .main02 .search-wrap .box1 h3, .main02 .search-wrap .box1 .img {width: 22rem;}
    .main02 .search-wrap .box1 h4 {width: calc(100% - 44rem);}
}
@media (max-width:1080px) {
    .main02 .search-wrap .box1 {padding: 3rem 4%;}
}
@media (max-width:1080px) {
    .main02 .search-wrap .box1 h4 {width: calc(100% - 30rem);} 
    .main02 .search-wrap .box1 .img {width: 5rem;}
}

.main02 .search-wrap .box2 {width: min(1240px,100%); margin: 4rem auto; display: none; padding: 9rem 0;}
.main02 .search-wrap .box2 .close-btn {width: 22px; position: absolute; top:4rem; right:6rem; cursor: pointer;} 
.main02 .search-wrap .box2 .close-btn img {filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);}
.main02 .search-wrap .box2 .search-link {justify-content: space-between; padding:0 1rem 1rem; margin-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.5);}
.main02 .search-wrap .box2 .search-link h3 {font-size: 3rem; font-weight: 600; color: #fff; opacity: 0.5;font-family: 'Pretendard';}
.main02 .search-wrap .box2 .search-link img {width: 28px; filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);}
.main02 .search-wrap .box2 .tag {gap: 1.2rem 1rem;}
.main02 .search-wrap .box2 .tag a {align-items: center; padding: .7rem 1.5rem .7rem 1rem; border:1px solid rgba(255,255,255,0.5); border-radius: 5rem; transition: all 0.2s;}
.main02 .search-wrap .box2 .tag .all-tag .img {background:#052974;}
.main02 .search-wrap .box2 .tag .img {width: 35px; height: 35px; background: #04419c; color: #fff; font-size: 13px; align-items: center; justify-content: center;border-radius: 50%; transition: all 0.2s;}
.main02 .search-wrap .box2 .tag .img img {width: 60%;}
.main02 .search-wrap .box2 .tag p {font-size: max(15px,1.8rem); font-weight: 400; color: #fff; margin-left: 1rem; font-family: 'Pretendard';}
.main02 .search-wrap .box2 .tag li:hover a {border-color: #fff;}
.main02 .search-wrap .box2 .tag li:nth-of-type(2) .img {background: #fff;}
.main02 .search-wrap.open .box1 {display: none;}
.main02 .search-wrap.open {background: #014fc2;}
.main02 .search-wrap.open .box2 {display: block; }
@media (max-width:1080px) {
    .main02 .search-wrap .box2 {padding: 9rem 0 6rem;}
}

.main03 {overflow: hidden;}
.main03 .txt-animation {overflow: hidden;}
.main03 .txt-animation h2 {font-size: 8.4rem;  font-family: "Syne", serif; font-weight: 800; color:var(--point); letter-spacing: -0.03em; width: max-content; transform: translateX(-50%); position: relative; line-height: .95;}
.main03 .txt-animation .txt1 { left: 20%;}
.main03 .txt-animation .txt2 {color: #fff; text-shadow: -1px 0px #052974, 0px 1px #052974, 1px 0px #052974, 0px -1px #052974; left: 10%;}
.main03 .txt-animation .txt3 { left:80%;}

.main03 .inner {padding-top: 9rem; justify-content: space-between;}
.main03 .left {width: min(720px,48%); padding-left: 8rem;}
.main03 .left h4 {font-size: 2.8rem; font-weight: 500; letter-spacing: -0.03em; color: var(--point);}
.main03 .left h3 {font-size: 5.5rem; font-weight: 700; font-family: 'Pretendard'; line-height: 1.3; margin: 0.5rem 0 2.5rem;}
.main03 .left h3 span {color: #0160ee;}
.main03 .left p {font-size: 2.4rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.main03 .left .more-btn {background: #000; color: #fff; margin-top: 4rem;}
.main03 .right {width: 52%; position: relative; } 
.main03 .right .people {margin: 0 auto;}
.main03 .right .people-info {font-size: 2rem; color: #fff; position: absolute; bottom:10%; right:10%;}
.main03 .right .img-animation img {position: absolute; left: 42%; bottom:0; transform: translate(-50%, 46%); z-index: -1; max-width: max-content;}
.main03 .right .img-animation img:nth-of-type(2) {animation: main_rotate-ani 20s linear infinite;}
.main03 .right .img-animation img:nth-of-type(3) {animation: main_rotate-ani 20s linear infinite;}
@keyframes main_rotate-ani {
    0% {
        transform: translate(-50%, 46%) rotate(0)
    }

    to {
        transform: translate(-50%, 46%) rotate(1turn)
    }
}

@media (max-width:1400px) {
    .main03 .left {padding-left: 0; width: 60%;}
    .main03 .right {width: 40%;}
    .main03 .right .img-animation img {width: 200%;}
    .main03 .right .img-animation img:nth-of-type(2) {width: 140%;}
    .main03 .right .img-animation img:nth-of-type(3) {width: 100%;}
}
@media (max-width:1080px) {
    .main03 .inner {align-items: flex-end;}
    .main03 .left {padding-bottom: 9rem ;}
}
@media (max-width:768px) {
    .main03 .left {width: 100%;}
    .main03 .right {width: 100%;}
    .main03 .right .people {max-width: 400px; width: 90%;}
    /* .main03 .right .img-animation img {width: 160%; left: 52%;}
    .main03 .right .img-animation img:nth-of-type(2) {width: 120%;}
    .main03 .right .img-animation img:nth-of-type(3) {width: 100%;} */

    .main03 .right .img-animation img  {width: clamp(550px,185%, 830px);  left: 50%;}
    .main03 .right .img-animation img:nth-of-type(2)  {width: clamp(400px,135%,630px);  left: 50%;} 
    .main03 .right .img-animation img:nth-of-type(3)  {width: clamp(300px,120%,480px); left: 50%;}
}



.main04 {padding: 10rem 0; background: #e4eef5;}
.main04 .inner {display: grid; grid-template-columns: repeat(2, 1fr); gap:3rem 6rem;}
.main04 .box-title {font-size: 4.8rem; font-weight: 800;}
.main04 .box-title span {font-weight: 700;}
.main04 ul {padding: 0 5rem; background: #fff; border-radius: 2rem;}
.main04 ul li a { position: relative; padding: 3.5rem 0; display: block; border-bottom: 1px solid #ddd;}
.main04 ul li a p {font-size: 2.2rem; font-family: 'Pretendard'; font-weight: 500; width: calc(100% - 5.5rem); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.main04 ul li a p span {font-weight: 600; color: var(--point); display: inline-block; margin-right: 1rem;}
.main04 ul li:last-child a {border-bottom: 0;}
.main04 ul li.border a {border-bottom: 1px solid #ddd;}
.main04 ul li img {position: absolute; top:50%; transform: translateY(-50%); right:0; filter: brightness(6) grayscale(1); padding: 1rem 1.4rem 1rem 1.8rem; border-radius: 2rem; border: 1px solid #fff; transition: border-color 0.3s;} 
.main04 ul li a:hover img {filter: none; border: 1px solid var(--point);}
@media (max-width:1400px) {
    .main04 .inner {gap: 3rem 4rem;}
    .main04 ul {padding: 0 4rem;}
}
@media (max-width:1080px) {
    .main04 .inner {grid-template-columns: 1fr;}
    .main04 .box-title:nth-of-type(1), .main04 ul:nth-of-type(1) {order:1;}
    .main04 .box-title:nth-of-type(2), .main04 ul:nth-of-type(2) {order:2;}
}
@media (max-width:768px) {
    .main04 ul li a p {width: 100%;}
    .main04 ul li img {display: none;}
}