@charset "euc-kr";

/* ==============================
   mexx-hero
============================== */
.mexx-hero {display: flex; flex-direction: column; justify-content: flex-end; height: 100vh; height: 100dvh; background: var(--mexx-color-navy); background-image: radial-gradient(circle, rgba(255,255,255,0.14) 1px, transparent 1px); background-size: 29px 29px; background-position: 13px 13px; z-index: 900; position: relative; overflow: hidden;}
.mexx-hero__symbol {position: absolute; right: -5%; bottom: 0; width: 80%; max-width: 860px; pointer-events: none;}
.mexx-hero__symbol svg {width: 100%; height: auto;}
.symbol-base {fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 1;}
.symbol-light {fill: none; stroke-width: 1.2;}
.mexx-hero__box {padding: 60px 0; color: var(--mexx-color-white); transition: all .3s ease-in-out;}
.mexx-hero__box h4 {font-size: 74px; line-height: 1.2; transition: all .3s ease-in-out; white-space: nowrap;}
.mexx-hero__box h4 .mexx-hero__line-wrap {display: inline-block; vertical-align: top; overflow: hidden;}
.mexx-hero__box p {font-size: 18px; font-weight: 200; margin-top: 40px; transition: all .3s ease-in-out;}
.mexx-hero__box p svg {width: 18px; fill: #fff; display: inline; vertical-align: middle; margin-top: -3px;}
.mexx-hero__box p br {display: none;}
.mexx-hero__line-wrap {display: block; overflow: hidden;}
.mexx-hero__line {display: block; will-change: transform, opacity;}
.mexx-hero__line b {font-weight: 600; display: inline-block; margin: 0 4px;}

/* ==============================
   mexx-focus
============================== */
.mexx-focus {padding: 120px 0; max-width: 1560px; margin: 0 auto;}
.mexx-focus__grid {display: grid; grid-template-columns: repeat(4, 1fr);}
.mexx-focus__intro {padding-bottom: 40px;grid-column: span 2;display: flex;flex-direction: column;justify-content: space-between;}
.mexx-focus__title {font-size: 60px;font-weight: 700;color: var(--mexx-color-navy);line-height: 1;display: flex;align-items: flex-start;}
.mexx-focus__title:after {content: '';display: block;width: 8px;height: 8px;margin-left: 6px;background: var(--mexx-color-navy);border-radius: 50%;}
.mexx-focus__desc {font-size: 23px;color: var(--mexx-color-gray2);margin-top: 14px;line-height: 1.74;}
.mexx-focus__btn {display: flex;align-items: center;height: 54px;padding: 0 48px;font-size: 16px;font-weight: 500;color: var(--mexx-color-white);background: var(--mexx-color-navy);border-radius: 30px;align-self: flex-start;}
.mexx-focus__item {position: relative;padding: 0 18px;}
.mexx-focus__item:before {content: ''; position: absolute; left: -1px; top: 0; width: 1px; height: 100%; background: var(--mexx-color-navy); transform: scaleY(0); transform-origin: top; transition: transform 0.9s ease;}
.mexx-focus__item:after {content: ''; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background: var(--mexx-color-navy); transform: scaleY(0); transform-origin: top; transition: transform 0.9s ease;}
.mexx-focus__item.is-drawn:after {transform: scaleY(1);}
.mexx-focus__item:nth-child(2).is-drawn:before,
.mexx-focus__item:nth-child(4n).is-drawn:before {transform: scaleY(1);}
.mexx-focus__item:nth-child(4n-1):after {display: none;}
.mexx-focus__card {position: relative;/* min-height: clamp(220px, calc(220px + (370 - 220) * ((100vw - 1199px) / 361)), 370px); *//* padding: 10px 0; */}
.mexx-focus__card a {display: flex;flex-direction: column;justify-content: space-between;height: 100%;min-height: clamp(220px, calc(220px + (370 - 220) * ((100vw - 1199px) / 361)), 370px);padding: clamp(24px, calc(24px + (40 - 24) * ((100vw - 1199px) / 361)), 40px) clamp(10px, calc(10px + (40 - 10) * ((100vw - 1199px) / 361)), 40px);margin: 0 -18px;color: inherit;transition: all .3s ease-in-out;}
.mexx-focus__card:before {content: ''; display: none; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--mexx-color-navy); transform: scaleX(0); transform-origin: left; transition: transform 1s ease 0.15s;}
.mexx-focus__card:after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--mexx-color-navy); transform: scaleX(0); transform-origin: left; transition: transform 1s ease 0.4s;}
.mexx-focus__item.is-drawn .mexx-focus__card:before {transform: scaleX(1);}
.mexx-focus__item.is-drawn .mexx-focus__card:after {transform: scaleX(1);}
.mexx-focus__item:nth-child(2) .mexx-focus__card:before,
.mexx-focus__item:nth-child(3) .mexx-focus__card:before,
.mexx-focus__item:nth-child(4) .mexx-focus__card:before,
.mexx-focus__item:nth-child(5) .mexx-focus__card:before {display: block;}
.mexx-focus__card-top {display: flex; flex-direction: column; gap: 10px;}
.mexx-focus__card-cate {font-size: clamp(14px, calc(14px + (20 - 14) * ((100vw - 1199px) / 361)), 20px);color: var(--mexx-color-navy);font-weight: 500;}
.mexx-focus__card-title {font-size: clamp(18px, calc(18px + (28 - 18) * ((100vw - 1199px) / 361)), 28px);font-weight: 700;color: var(--mexx-color-navy);line-height: 1.4;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
.mexx-focus__card-bottom {display: flex;flex-direction: column;margin-top: 28px;}
.mexx-focus__card-label {font-size: clamp(14px, calc(14px + (16 - 14) * ((100vw - 1199px) / 361)), 16px); color: var(--mexx-color-gray2);}
.mexx-focus__card-date {font-size: clamp(14px, calc(14px + (18 - 14) * ((100vw - 1199px) / 361)), 18px);color: var(--mexx-color-gray2);}


@media (min-width: 1200px){

   /* --- mexx-focus --- */
   .mexx-focus__card a:hover {background: var(--mexx-color-bluegray5);}

}
@media (max-width: 1199px){

   /* --- mexx-hero --- */
   .mexx-hero__box h4 {font-size: 60px;}

   /* --- mexx-focus --- */
   .mexx-focus {padding: 90px 0;}
   .mexx-focus__grid {grid-template-columns: repeat(3, 1fr);}
   .mexx-focus__intro {grid-column: span 3;padding-bottom: 30px;}
   .mexx-focus__title {font-size: 34px;}
   .mexx-focus__desc {font-size: 16px;margin-top: 6px;font-weight: 300;}   
   .mexx-focus__btn {margin-top:50px;height: 42px;font-size: 14px;padding: 0 34px;}
   .mexx-focus__item {padding: 0 10px;}
   .mexx-focus__item:before {left: -1px; width: 1px;}
   .mexx-focus__item:after {width: 1px;}
   .mexx-focus__item.is-drawn:before {transform: scaleY(1);}
   .mexx-focus__item:nth-child(4n-1):after {display: block;}
   .mexx-focus__item:nth-child(3n+1):after {display: none;}
   .mexx-focus__card:before {height: 1px;}
   .mexx-focus__card:after {height: 1px;}
   .mexx-focus__item:nth-child(5) .mexx-focus__card:before {display: none;}
   .mexx-focus__card a {margin: 0;}
   .mexx-focus__card-top {gap: 5px;}
   .mexx-focus__card a .mexx-focus__card-title:hover {text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px;}
}

@media (max-width: 767px){

   /* --- mexx-hero --- */
   .mexx-hero__box {padding: 40px 0;}
   .mexx-hero__box h4 {font-size: 40px; white-space: normal;}
   .mexx-hero__box h4 .mexx-hero__line-wrap {display: block;}
   .mexx-hero__box p {font-size: 14px; margin-top: 20px;}
   .mexx-hero__box p svg {width: 14px; margin-top: -2px;}
   .mexx-hero__box p br {display: block;}

   /* --- mexx-focus --- */
   .mexx-focus {padding: 50px 0;}
   .mexx-focus__grid {grid-template-columns: 1fr;}
   .mexx-focus__intro {grid-column: span 1;}
   .mexx-focus__title {font-size: 24px;}
   .mexx-focus__title:after {content: ''; display: block; width: 5px; height: 5px;}
   .mexx-focus__item.is-drawn:before {transform: scaleY(1);}
   .mexx-focus__item:after {display: none;}
   .mexx-focus__item:nth-child(4n-1):after {display: none;}
   .mexx-focus__item:nth-child(3) .mexx-focus__card:before,
   .mexx-focus__item:nth-child(4) .mexx-focus__card:before {display: none;}
   .mexx-focus__btn {margin-top:40px;}
   .mexx-focus__card {min-height: 160px;}
   .mexx-focus__card a {min-height: 140px; padding: 20px 10px;}
   .mexx-focus__card-title {-webkit-line-clamp: 2;}
   .mexx-focus__card-title br {display: none}

}