@charset "utf-8";

/* common */
#subWrap { overflow: hidden; min-height: calc(100vh - var(--header-H) - 251px); }
.sub-visual { display: flex; flex-direction: column; justify-content: center; width: calc(100% - 40px); height: clamp(140px,10.41vw,200px); margin: 0 auto; border-radius: 30px; background-color: rgba(0, 126, 204, 0.1); text-align: center; }
.sub-visual .sub-title { font-size: clamp(20px,1.198vw,23px); font-weight: 700; letter-spacing: 0.04em; color: var(--main-color); }
.sub-visual .main-title { position: relative; font-size: clamp(36px,3.85vw,74px); font-weight: 700; color: var(--main-color); }
.sub-visual .sub-title + .main-title { top: -0.135em; }
.content { padding: 100px 0 200px; }

.about__content .title { font-size: clamp(32px,3.23vw,62px); font-weight: 700; color: #111;  text-align: center;}
.about__content .text { margin-top: 60px; font-size: 20px; font-weight: 300; line-height: 1.6; color: #444; text-align: center; }
.about-swiper { height: clamp(200px,26.04vw,500px); border-radius: 50px; margin-top: 70px; }
.about-swiper::before { content: ""; position: absolute; left: 0; bottom: 0;  display: block; width: 100%; height: 100%; background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.00) 72.3%); z-index: 5;}
.about-swiper .swiper-logo { position: absolute; width: clamp(200px,25.83vw,496px); right: 1.875%; bottom: -2px; z-index: 5; }
.about-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }

.partners__content .title__box { display: flex; align-items: center; gap: 110px; animation: fadeUp 1s ease-out both; visibility: hidden; opacity: 0; transform: translateY(30px);}
.partners__content .title__box .title { width: 46.68%; }
.partners__content .title__box .title span { font-size: 42px; font-weight: 600; line-height: 1.6; letter-spacing: -0.04em; }
.partners__content .title__box .title .line-box { position: relative; display: block; }
.partners__content .title__box .title .line-box::after { content: ""; position: absolute; right: -1%; top: -1%; display: block; width: 102%; height: 102%; background-color: rgba(255, 255, 255, 0.9); animation: lineBox 1.6s ease-out both;}
.partners__content .title__box .title em { color: var(--main-color); line-height: inherit; letter-spacing: inherit; }
.partners__content .title__box .text { width: 41.25%; max-width: 644px; font-size: 20px; font-weight: 300; line-height: 1.6; color: #444; word-break: break-all; }
.world-map { margin-top: 100px; animation: fadeUp 1s ease-out both; visibility: hidden; opacity: 0; transform: translateY(50px); }
.world-map svg { width: 100%; }
.world-map #korea #korea_2 { animation: upDown 1.9s ease-out infinite both; }
.world-map #korea .ani-circle { transform-box: fill-box; transform-origin: center center; transform: scale(1); opacity: 0; animation: circleScale 1.7s ease-out infinite both;  }
.world-map g.ani-hover g rect,
.world-map g.ani-hover g path { transition: 0.3s ease-out; }
.world-map g.ani-hover:hover > g > g { animation: upDown 1.9s ease-out infinite both; }
.world-map g.ani-hover:hover g rect { fill: #fff; stroke:#007ECC }
.world-map g.ani-hover:hover g path { fill: var(--main-color); }
.world-map g.ani-hover .ani-circle { transform-box: fill-box; transform-origin: center center; opacity: 0; animation: circleOpacity 1.7s ease-out infinite both; }
.world-map g.ani-hover:hover .ani-circle { animation: circleOpacity1 1.7s ease-out infinite both; }

.history__wrap { display: flex; }
.history__wrap .left { width: 33%; }
.history__wrap .right { position: relative; width: calc(67% - var(--history-gap)); margin-left: var(--history-gap); padding-left: calc(var(--history-gap) + 1px); }
.history__wrap .right::before { content: ""; position: absolute; left: 0; top: 44px; display: block; width: 1px; height: calc(100% - 46px); background-color: #DDD; }
.history__wrap .img-box { overflow: hidden; border-radius: 35px; }
.history__wrap .img-box + .img-box { margin-top: 35px; }
.history__wrap .img-box img { width: 100%; }
.year__item + .year__item { margin-top: 140px; }
.year__item > .year { position: relative; font-family: 'Play','Pretendard',sans-serif; font-size: 48px; font-weight: 700; color: #111; }
.year__item > .year::before { content: ""; position: absolute; left: calc(var(--history-gap) * -1); top: 50%; display: block; width: 26px; height: 26px; border-radius: 50%; background-color: var(--main-color); opacity: 0.2; transform: translate(-50%, -50%); }
.year__item > .year::after { content: ""; position: absolute; left: calc(var(--history-gap) * -1); top: 50%; display: block; width: 14px; height: 14px; border-radius: 50%; background-color: var(--main-color); transform: translate(-50%, -50%); }
.history__list { margin-top: 40px;}
.history__list > li { display: flex; align-items: baseline; }
.history__list > li + li { margin-top: 20px; }
.history__list > li .date { width: 142px; font-size: 21px; font-weight: 500; line-height: 1.28; color: #222; }
.history__list > li .text-box { width: calc(100% - 142px); }
.history__list > li .text-box > p { font-size: 19px; font-weight: 300; letter-spacing: -0.03em; color: #555; }

.vision__content .title__box { margin-bottom: 100px; text-align: center; }
.vision__content .title__box .title { margin-bottom: 20px; font-size: 62px; font-weight: 700; color: #111; }
.vision__content .title__box .text { font-size: 23px; color: #777; }
.vision__area:not(:first-child) { padding: 140px 0; }
.vision__area:last-child { padding-bottom: 0; }
.vision__area:first-child { padding-bottom: 140px; }
.vision__area:nth-child(2) { background-color: #F5F5F5; }
.vision__area .inner { display: flex; }
.vision__area .left { width: 31.25%; padding-right: 30px;}
.vision__area .right { width: 68.75%; }
.vision__area .vision-title { font-size: 48px; font-weight: 600; color: #111; }
.vision__area .vision-text { margin-top: 25px; font-size: 20px; font-weight: 300; line-height: 1.6; color: #444; }
.card__list { display: flex; gap: 15px; }
.card__list .card__item { position: relative; flex: 1; height: 384px; border-radius: 35px; }
.vision__area.people .card__item{ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 10px; background: linear-gradient(43deg, #007ECC 1.82%, #88D1FF 98.18%); text-align: center; transition: 0.3s ease-out; }
.vision__area.people .card__item * { transition: 0.3s ease-out; position: relative; z-index: 3; }
.vision__area.people .card__item::before{ content: ""; position: absolute; left: 0; top: 0; width: calc(100% - 2px); height: calc(100% - 2px); border: 1px solid #DDDDDD; border-radius: 35px; background: #fff; z-index: 1; transition: 0.3s ease-out; }
.vision__area.people .card__item .icon { width: 100px; height: 75px; margin-bottom: 40px; }
.vision__area.people .card__item:nth-child(1) .icon { background: url('/img/sub/people_icon_01.svg') no-repeat center center/contain; }
.vision__area.people .card__item:nth-child(2) .icon { background: url('/img/sub/people_icon_02.svg') no-repeat center center/contain; }
.vision__area.people .card__item:nth-child(3) .icon { background: url('/img/sub/people_icon_03.svg') no-repeat center center/contain; }
.vision__area.people .card__item .title { margin-bottom: 35px; font-size: 26px; font-weight: 600; color: #222; }
.vision__area.people .card__item .text { font-size: 19px; font-weight: 300; line-height: 1.6; letter-spacing: -0.03em; color: #555; }
.vision__area.people .card__item:hover::before { opacity: 0; }
.vision__area.people .card__item:nth-child(1):hover .icon { background-image: url("/img/sub/people_icon_01_on.svg"); }
.vision__area.people .card__item:nth-child(2):hover .icon { background-image: url("/img/sub/people_icon_02_on.svg"); }
.vision__area.people .card__item:nth-child(3):hover .icon { background-image: url("/img/sub/people_icon_03_on.svg"); }
.vision__area.people .card__item:hover .title,
.vision__area.people .card__item:hover .text { color: #fff; }
.vision__area.mission .card__item { overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;  height: 400px; padding: 50px 45px 50px 50px; }
.vision__area.mission .card__item::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.55); opacity: 0; z-index: 1; transition: 0.4s ease-out; }
.vision__area.mission .card__item > img { position: absolute; left: 50%; top: 50%; width: 100%; min-height: 100%; object-fit: cover; transform: translate(-50%, -50%); transition: 0.4s ease-out; }
.vision__area.mission .card__item .title { position: relative; font-size: 26px; font-weight: 700; color: #fff; z-index: 5; }
.vision__area.mission .card__item .text { position: relative; font-size: 20px; line-height: 1.6; color: #fff; visibility: hidden; opacity: 0; transform: translateY(30px); z-index: 5; transition: 0.4s ease-out; }
.vision__area.mission .card__item:hover::after { opacity: 1; }
.vision__area.mission .card__item:hover > img { transform: translate(-50%, -50%) scale(1.045); }
.vision__area.mission .card__item:hover .text {  visibility: visible; opacity: 1; transform: translateY(0); }

.card__grid { display: grid; }
.card__grid .card__item { overflow: hidden; position: relative; border-radius: 30px; height: 230px; padding: 35px; background-color: #F5F5F5; }
.card__grid .card__item * { position: relative; z-index: 3; transition: 0.3s ease-out; }
.card__grid .card__item > img { position: absolute; left: 50%; top: 50%; width: 100%; min-height: 100%; object-fit: cover; transform: translate(-50%, -50%); }
.card__grid .card__item .num { font-family: var(--font-Play); font-size: 20px; font-weight: 700; color: #007ECC; }
.card__grid .card__item .text { margin-top: 15px; font-size: 19px; font-weight: 300; line-height: 1.6; letter-spacing: -0.03em; color: #222; }
.card__grid .card__item.bg-gradient { overflow: visible; background: linear-gradient(43deg, #007ECC 1.82%, #88D1FF 98.18%); }
.card__grid .card__item.bg-gradient::before { content: ""; position: absolute; left: -0.5px; top: -0.5px; width: calc(100% + 1px); height: calc(100% + 1px); border-radius: 28px; background-color: #F5F5F5; opacity: 1; z-index: 1; transition: opacity 0.3s ease-out;  }
.vision__area .card__grid { grid-template-columns: repeat(4,1fr); gap: 15px; }
.vision__area .card__grid .card__item:last-child { border:1px solid #DDDDDD; }
.vision__area .card__grid .card__item:not(:last-child):hover > img { transform: translate(-50%, -50%) scale(1.085); }
.vision__area .card__grid .card__item.bg-gradient:hover::before { opacity: 0; }
.vision__area .card__grid .card__item:hover .num,.vision__area .card__grid .card__item:hover .text { color: #fff; }

.location-tab { display: flex; height: 90px; padding: 10px 11px; border-radius: 27px; background-color: #F5F5F5; }
.location-tab .tab-item { flex: 1; height: 100%; border-radius: 20px; background: transparent; padding: 0 5px; font-family: var(--font-Pretendard); font-size: 21px; font-weight: 600; color: #AAA; }
.location-tab .tab-item.on { background: linear-gradient(90deg, #007ECC 0%, #88D1FF 100%);  color: #fff; }
.map__wrap { position: relative; height: 650px; margin-top: 40px; }
.map__area { position: absolute; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; opacity: 0; pointer-events: none; z-index: 0; }
.map__area.on { visibility: visible; opacity: 1; pointer-events: auto; z-index: 1; }
.map__area .map-box { overflow: hidden; position: relative; width: 100%; height: 100%; border-radius: 45px; }
.map__area .map-box::after { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%); opacity: 0.1; z-index: 10; pointer-events: none;}
.map-box .root_daum_roughmap { width: 100%; height: 100%; }
.map-box .root_daum_roughmap .wrap_map { height: 100% !important; }
.root_daum_roughmap .cont { display: none; }
.map-box iframe { width: 100%; height: 100%; }
.location-name{ position: absolute; left: 3%; bottom: 35px; display: flex; align-items: baseline; width: 53.4%; padding: 27px 50px; border-radius: 99px; background-color: #fff; z-index: 10; }
.location-name .name { position: relative; height: fit-content; padding-right: 30px; font-family: var(--font-Inter); font-size: 20px; font-weight: 600; color: var(--main-color); white-space: nowrap; }
.location-name .name::after { content: ""; position: absolute; right: 15px; top: 50%; display: block; width: 1px; height: 0.75em; background-color: #CCC; transform: translateY(-50%); }
.location-name .address { font-family: var(--font-Inter); font-size: 18px; font-weight: 300; letter-spacing: -0.04em; color: #555; }
.map__area.oversea .location-name { width: 94%; }
.map-link__box { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; width: 40.3%; padding: 35px 0 35px 39px; border-radius: 43px 0 43px 0; background-color: #fff; z-index: 10; }
.map-link__box::before { content: ""; position: absolute; left: -45px; bottom: 0; display: block; width: 45px; height: 45px; background: url("/img/sub/map_mask_corner.svg") no-repeat center center/contain; }
.map-link__box::after { content: ""; position: absolute; right: 0; top: -45px; display: block; width: 45px; height: 45px; background: url("/img/sub/map_mask_corner.svg") no-repeat center center/contain; }
.map-link__box .btn-map-link { display: flex; justify-content: center; align-items: center; column-gap: 13px; width: calc(50% - 6px); height: 80px; border-radius: 99px; padding: 0 5px; background-color: #F7F7F7; font-size: 18px; font-weight: 500; color: #666; transition: 0.3s ease-out; }
.map-link__box .btn-map-link .icon { width: 30px; height: 30px; }
.map-link__box .btn-map-link.kakao .icon { background: url("/img/sub/icon_kakao_map.svg") no-repeat center center/contain; }
.map-link__box .btn-map-link.naver .icon { background: url("/img/sub/icon_naver_map.svg") no-repeat center center/contain; }
.map-link__box .btn-map-link.kakao:hover { background-color: #FFE500; color: #222; }
.map-link__box .btn-map-link.naver:hover { background-color: #00C046; color: #fff; }

.rnd__content { padding-bottom: 0; }
.rnd__area.process { padding-bottom: 140px; }
.rnd__area.process .inner { display: flex; }
.rnd__area .title__box { width: 31.25%; padding-right: 20px; }
.rnd__area .title__box .title { font-size: 48px; font-weight: 600; letter-spacing: -0.04em; color: #111; }
.rnd__area.process .process__area { width: 68.75%; }
.process__area .text-box p { font-family: var(--font-Pretendard); font-size: 20px; line-height: 1.7; color: #555; }
.process__area .text-box p + p { margin-top: 20px; }
.process__area .text-box p > b { font-family: inherit; font-weight: 600; line-height: inherit; letter-spacing: inherit; }
.process__area .text-box p:nth-child(2) { color: #222; }
.process__area .circle-box { display: flex; align-items: center; margin-top: 75px; }
.process__area .circle { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 45px; min-width: clamp(200px,21.87vw,420px); aspect-ratio: 1/1; border-radius: 50%; background-color: rgba(217,217,217,0.2); transition: 0.3s ease-out; z-index: 1;}
.process__area .circle:nth-child(2) { transform: translateX(-19.05%); }
.process__area .circle:nth-child(3) { transform: translateX(calc(-19.05% * 2));}
.process__area .circle:hover { background-color: #fff; box-shadow: 0 0 25px 5px rgba(192, 200, 208, 0.25); z-index: 3; }
.process__area .circle .text > span { display: block; font-size: 22px; font-weight: 600; color: #222; text-align: center; }
.process__area .circle .text > span.eng { margin-top: 10px; font-size: 18px; font-weight: 500; letter-spacing: -0.03em; color: #888; }
.rnd__area.desc { padding: 140px 0 200px; background-color: #F5F5F5; }
.rnd__area .card__grid { display: block; }
.rnd__area .card__grid .row { display: grid; grid-template-columns: repeat(2,1fr); gap: 30px; }
.rnd__area .card__grid .row + .row { margin-top: 30px; }
.rnd__area .card__grid .card__item { display: flex; flex-direction: column; justify-content: space-between; height: 439px; padding: 65px 70px; border-radius: 35px; }
.rnd__area .card__grid .card__item.bg-gradient::before {border-radius: 33px; background-color: #fff; }
.rnd__area .card__grid .card__item .num { font-size: 23px; }
.card__grid .card__item .title { margin-top: 20px; font-size: 34px; font-weight: 600; color: #222; letter-spacing: -0.03em; }
.card__grid .card__item .desc__list > li { position: relative; padding-left: 13px; font-size: 20px; font-weight: 300; color: #555; }
.card__grid .card__item .desc__list > li::before { content: ""; position: absolute; left: 0; top: 0.5em; display: block; width: 3px; height: 3px; border-radius: 50%; background-color: var(--main-color); transition: 0.3s ease-out; }
.card__grid .card__item .desc__list > li + li { margin-top: 15px; }
.card__grid .row:hover .card__item > img { transform: translate(-50%, -50%) scale(1.07); }
.card__grid .row:hover .card__item.bg-gradient::before { opacity: 0; }
.card__grid .row:hover .card__item .num, .card__grid .row:hover .card__item .title, .card__grid .row:hover .card__item .desc__list > li { color: #fff; }
.card__grid .row:hover .card__item .desc__list > li::before { background-color: #fff; }

.business__content { overflow: hidden; }
.business__content .inner { display: flex; justify-content: space-between; gap: 40px; }
.lnb__list > li + li { margin-top: 20px; }
.lnb__list > li > a { font-size: 22px; font-weight: 600; color: #CCC; }
.lnb__list > li > a.on { font-style: italic; font-size: 27px; color: #222; }
.business__wrap { width: 75%; }
.business__wrap .text__area { display: flex; align-items: center; gap: 35px; padding: 40px; border-radius: 20px; background-color: #F9F9F9; }
.business__wrap .text__area .icon-box{ width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; border-radius: 20px; background-color: #fff; box-shadow: 0 3px 8px 0 rgba(170,170,170,0.18); }
.business__wrap .text__area .text-box { width: calc(100% - 135px); }
.business__wrap .text__area .text-box p { font-family: var(--font-Pretendard); font-size: 18px; font-weight: 300; line-height: 1.6; color: #444; }
.business__wrap .text__area .text-box p > .mo-br { display: none; }
.business__wrap .img__area { display: flex; align-items: center; gap: 20px; margin-top: 20px; }
.business__wrap .img__area .img-box { overflow: hidden; position: relative; width: calc(50% - 10px); height: 480px; border-radius: 35px; transition: width 0.3s ease-out; }
.business__wrap .img__area .img-box img { position: absolute; left: 50%; top: 50%; width: 100%; min-height: 100%; object-fit: cover; transform: translate(-50%, -50%); transition: 0.3s ease-out; }
.business__wrap .img__area .img-box:hover img { transform: translate(-50%, -50%) scale(1.043); }
.contact__wrap { text-align: center; }
.contact__wrap .text { margin-top: 50px; font-size: 22px; font-weight: 600; line-height: 1.65; color: #111; }
.contact__wrap .btn-radius { column-gap: 15px; width: fit-content; height: 70px; border-radius: 99px; padding: 0 40px; margin: 50px auto 0; background-color: #111; transition: 0.3s ease-out; }
.contact__wrap .btn-radius span { font-size: 22px; font-weight: 500; color: #fff; }
.contact__wrap .btn-radius:hover { background-color: var(--main-color); }

@media screen and (max-width:1700px) {
    .partners__content .title__box { gap:clamp(30px,5.3vw,90px) }
    .partners__content .title__box .title span { font-size: clamp(24px,2.35vw,40px); }
    .partners__content .title__box .text { width: 43%; font-size: clamp(14px,1.176vw,20px); word-break: keep-all; }

    .vision__content .title__box .title { font-size: clamp(30px,3.64vw,62px); }
    .vision__content .title__box .text { font-size: clamp(16px,1.35vw,23px); }

    .rnd__area .title__box .title { font-size: clamp(26px,2.82vw,48px); }
    .process__area .text-box p { font-size: clamp(16px,1.06vw,18px); }

    .card__grid .card__item  { height: clamp(100px,13.53vw,230px); }
    .business__wrap .img__area .img-box { height: clamp(300px,28.23vw,480px); }
}
@media screen and (max-width:1600px) {
    .vision__area .card__item .text > br { display: none; }
    .vision__area.mission .card__item { padding: 40px 24px; }
    .card__grid .card__item .text { font-size: 16px; }

    .process__area .text-box p > br { display: none; }
    .business__wrap .text__area .text-box p { font-size: 16px; }
}
@media screen and (max-width:1400px) {
    .card__grid .card__item { border-radius: 20px; padding: 20px; }
    .card__grid .card__item.bg-gradient::before { border-radius: 18px; }

    .location-name { padding: 20px 40px; }
    .location-name .name { font-size: 18px; padding-right: 20px; }
    .location-name .name::after { right: 10px; }
    .location-name .address { font-size: 16px; }
    .map-link__box { padding: 20px 0 20px 20px; }
    .map-link__box .btn-map-link { width: 100%; height: 50px;  font-size: 16px; }

    .rnd__area .card__grid .card__item .num { font-size: 20px; }
    .card__grid .card__item .title { font-size: 30px; }
    .card__grid .card__item .desc__list > li { padding-left: 10px; font-size: 16px; }

    .lnb__list > li > a { font-size: 18px; }
    .lnb__list > li > a.on { font-size: 22px; }
    .business__wrap { width: 80%; }
    .business__wrap .text__area .text-box p > br:not(.mo-br) { display: none; }
    .business__wrap .text__area .text-box p > .mo-br { display: inline; }
}
@media screen and (max-width:1200px) {
    .about__content .text { font-size: 16px; }
    .vision__area .left { width: 28%; }
    .vision__area .right { width: 72%; }
    .vision__area .vision-title { font-size: 36px; }
    .vision__area .vision-text { font-size: 16px; }
    .card__list .card__item { height: 300px; }
    .vision__area.people .card__item .icon { margin-bottom: 30px; }
    .vision__area.people .card__item .title { font-size: 24px; margin-bottom: 20px; }
    .vision__area.people .card__item .text { font-size: 16px; }
    .vision__area.mission .card__item { height: 300px; }
    .vision__area.mission .card__item .title { font-size: 24px; }
    .vision__area.mission .card__item .text { font-size: 16px; }

    .vision__area.behaviors .inner { flex-direction: column; row-gap: 40px; }
    .vision__area.behaviors .left { padding-right: 0; text-align: center; }
    .vision__area.behaviors .left, .vision__area .right { width: 100%; }
    .card__grid .card__item  { height: clamp(100px,19.58vw,235px); }

    .location-name { width: calc(94% - 260px); padding: 20px 30px; }
    .map-link__box {flex-direction: column; width: 260px; }

    .process__area .circle { row-gap: 20px; }
    .process__area .circle > img { height: 60px; }
    .process__area .circle .text > span { font-size: 20px; }
    .process__area .circle .text > span.eng { margin-top: 8px; font-size: 16px; }
    
    .rnd__area .card__grid .card__item { padding: 40px; height: 400px; border-radius: 20px; }
    .rnd__area .card__grid .card__item.bg-gradient::before { border-radius: 18px; }
    .card__grid .card__item .title { margin-top: 10px; font-size: 26px; }

}
@media screen and (max-width:1024px) {
    :root {
        --history-gap: 50px;
    }
    #subWrap { min-height: calc(100vh - var(--header-H) - 224px); }
    .content:not(.rnd__content) { padding: 60px 0 120px; }
    .sub-visual { border-radius: 15px; }
    .sub-visual .sub-title + .main-title  { top: 0; }

    .about__content .text > br { display: none; }
    .about-swiper { border-radius: 20px; }

    .history__wrap .right::before { top: 22px; height: calc(100% - 24px); }
    .partners__content .title__box { flex-direction: column; text-align: center; }
    .partners__content .title__box .title,
    .partners__content .title__box .text { width: 100%; }

    .history__wrap .img-box { border-radius: 20px; }
    .history__wrap .img-box + .img-box { margin-top: 20px; }
    .year__item > .year { font-size: 36px; }
    .history__list > li .date { width: 100px; font-size: 16px; }
    .history__list > li .text-box { width: calc(100% - 100px); }
    .history__list > li .text-box > p { font-size: 16px; }
    
    .vision__area:first-child { padding-bottom: 60px; }
    .vision__area:not(:first-child) { padding: 60px 0; }
    .vision__content .title__box { margin-bottom: 60px; }
    .vision__area .inner { flex-direction: column; row-gap: 40px; }
    .vision__area .left { padding-right: 0; text-align: center; }
    .vision__area .left, .vision__area .right { width: 100%; }
    .card__list { flex-direction: column; }
    .card__list .card__item { border-radius: 20px; }
    .vision__area.people .card__item::before { border-radius: 18px; }
    .vision__area.people .card__item { flex: none; width: 100%; height: auto; padding: 50px 10px; }
    .vision__area.mission .card__item {  flex: none; height: 240px; }
    .vision__area.mission .card__item::after { opacity: 1; }
    .vision__area.mission .card__item .text {  visibility: visible; opacity: 1; transform: translateY(0); }
    .vision__area.mission .card__item .text > br { display: none; }
    .vision__area .left[data-aos=fade-right] { transform: translate3d(0, 100px, 0); }
    .vision__area .right[data-aos=fade-left] { transform: translate3d(0, 100px, 0); }
    .vision__area .left[data-aos=fade-right].aos-animate,
    .vision__area .right[data-aos=fade-left].aos-animate { opacity: 1; transform: translateZ(0);}

    .card__grid .card__item { height: 160px; }
    .card__grid .card__item .text { margin-top: 8px; }

    .location-tab { height: 60px; border-radius: 20px; }
    .location-tab .tab-item { font-size: 16px; border-radius: 14px; }
    .map__wrap { height: 600px; }
    .location-name .name { font-size: 16px;  }
    .location-name .address { font-size: 14px; }

    .rnd__content { padding-top: 60px; }
    .rnd__area.process .inner { flex-direction: column; row-gap: 40px; }
    .rnd__area .title__box { width: 100%; text-align: center; padding: 0; }
    .rnd__area .title__box .title > br { display: none; }
    .rnd__area.process .process__area { width: 100%; }
    .process__area .text-box p { text-align: center; }
    .process__area .text-box p + p { margin-top: 16px; }
    .process__area .circle { min-width: initial; width: 420px; }
    .process__area .circle:nth-child(1) { transform: translateX(19.05%); }
    .process__area .circle:nth-child(2) { transform: none; }
    .process__area .circle:nth-child(3) { transform: translateX(-19.05%); }
    .rnd__area.process { padding-bottom: 60px; }
    .rnd__area.desc { padding: 60px 0 120px; }

    .business__content .inner { flex-direction: column; }
    .lnb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
    .lnb__list > li + li { margin-top: 0; }
    .business__wrap { width: 100%; }
    .business__wrap .img__area .img-box { border-radius: 20px; }
    .side-lnb[data-aos=fade-right] { transform: translate3d(0, 0, 0); }
    .business__wrap[data-aos=fade-left] { transform: translate3d(0, 100px, 0); }

    .contact__wrap > img { width: 70px; }
    .contact__wrap .text { margin-top: 30px; font-size: 18px; }
    .contact__wrap .btn-radius { height: 50px; margin-top: 30px; }
    .contact__wrap .btn-radius span { font-size: 18px; }
}
@media screen and (min-width:769px) {
    .business__wrap .img__area .img-box:first-child:hover,
    .business__wrap .img__area .img-box:last-child:hover { width: 53.1%; }
    .business__wrap .img__area:has(.img-box:first-child:hover) .img-box:last-child { width: calc(46.9% - 20px); }
    .business__wrap .img__area:has(.img-box:last-child:hover) .img-box:first-child { width: calc(46.9% - 20px); }
}
@media screen and (max-width:768px) {
    :root {
        --history-gap: 30px;
    }
    .about__content .text { margin-top: 40px; }
    .world-map { margin-top: 60px; }
    .history__wrap .left { display: none; }
    .history__wrap .right { width: 100%; margin-left: 13px; }
    .history__list { margin-top: 30px; }
    .year__item > .year { font-size: 30px; }
    .vision__area .vision-title { font-size: 28px; }
    .vision__area .card__grid { grid-template-columns: repeat(3,1fr); }

    .location-tab { flex-wrap: wrap; height: auto; }
    .location-tab .tab-item { flex: none; width: calc(100%/3); height: 40px; border-radius: 10px; font-size: 14px; }
    .map__wrap { height: 550px; }
    .map__area .map-box { height: 300px; border-radius: 20px; }
    .location-name { position: static; width: 100%; padding: 0; margin-top: 30px; border-radius: 0; }
    .map-link__box { position: static; width: 100%; padding: 0; margin-top: 30px; border-radius: 0; }
    .map-link__box .btn-map-link .icon { width: 24px; height: 24px; }
    .map-link__box .btn-map-link { font-size: 14px; }

    .process__area .circle-box { margin-top: 40px; }
    .process__area .circle { row-gap: 14px; }
    .process__area .circle > img { height: 45px; }
    .process__area .circle .text > span { font-size: 16px; }
    .process__area .circle .text > span.eng { margin-top: 8px; font-size: 14px; }

    .rnd__area .card__grid .row { gap: 20px; grid-template-columns: repeat(1,1fr); }
    .rnd__area .card__grid .row + .row { margin-top: 20px; }
    .rnd__area .card__grid .card__item { height: auto; row-gap: 40px; padding: 30px 20px; }
    .rnd__area .card__grid .card__item.img { display: none; }
    .rnd__area .card__grid .card__item .num { font-size: 18px; }
    .card__grid .card__item .title { font-size: 22px; }
    .card__grid .card__item .desc__list > li { font-size: 14px; }
    .card__grid .card__item .desc__list > li + li { margin-top: 8px; }

    .lnb__list > li > a, .lnb__list > li > a.on { font-size: 16px; }
    .lnb__list > li > a.on { font-weight: 700; }
    .business__wrap .text__area { padding: 20px; gap: 20px; }
    .business__wrap .text__area .text-box { width: calc(100% - 90px); }
    .business__wrap .text__area .text-box p { font-size: 14px; text-align: center; }
    .business__wrap .img__area { flex-direction: column; }
    .business__wrap .img__area .img-box { position: relative; width: 100%; height: auto; }
    .business__wrap .img__area .img-box::before { content: ""; display: block; width: 100%; height: 0; padding-top: 75.3%; }
    .business__wrap .text__area .icon-box { width: 70px; height: 70px; border-radius: 10px; }
    .business__wrap .text__area { flex-direction: column; }
    .business__wrap .text__area .text-box { width: 100%; }

    .contact__wrap > img { width: 50px; }
    .contact__wrap .btn-radius > img { width: 22px; }
    .contact__wrap .btn-radius span { font-size: 16px; }
}

@media screen and (max-width:640px) {
    .vision__area .card__grid { grid-template-columns: repeat(2,1fr); }
    .card__grid .card__item .num { font-size: 16px; }
    .card__grid .card__item .text { font-size: 14px; }

    .process__area .circle-box { flex-direction: column; max-width: 300px; margin: 0 auto; }
    .process__area .circle { width: 100%; }
    .process__area .circle:nth-child(1) { transform: translateY(19.05%); }
    .process__area .circle:nth-child(2) { transform: none; }
    .process__area .circle:nth-child(3) { transform: translateY(-19.05%); }
    .process__area .circle > img { height: 60px; }
    .process__area .circle .text > span { font-size: 20px; }
    .process__area .circle .text > span.eng { margin-top: 8px; font-size: 16px; }

}
@media screen and (max-width:500px) {
    .card__grid .card__item { height: 140px; }
}

@keyframes upDown {
    0%{ transform: translateY(0); }
    42%{ transform: translateY(0); }
    68%{ transform: translateY(5px); }
    73%{ transform: translateY(5px); }
    99%{ transform: translateY(0px); }
    100%{ transform: translateY(0px); }
}
@keyframes circleOpacity {
    0%{ opacity: 0; }
    58%{ opacity: 0.25;}
    75%{ opacity: 0.25;}
    100%{ opacity: 0; }
}
@keyframes circleOpacity1 {
    0%{ opacity: 0; }
    58%{ opacity: 0.25;}
    75%{ opacity: 0.25;}
    100%{ opacity: 0; }
}
@keyframes circleScale {
    0%{ transform: scale(1); opacity: 0; }
    23%{ transform: scale(1); opacity: 0.25;}
    81%{ transform: scale(6.5); }
    100%{ transform: scale(6.5); opacity: 0; }
}
@keyframes fadeUp {
    100%{ visibility: visible; opacity: 1; transform: translateY(0px); }

}
@keyframes lineBox {
    0%{ width: 100%; }
    100%{ width: 0; }
}