@charset "utf-8";



/* **************************************** *
 * GLOBAL
 * **************************************** */
body { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; }
a { color: var(--color-black); text-decoration: none; }
button { background: none; border: none; margin: 0; padding: 0; }

/* COLOR */
:root {
    --color-white: #FFF;
    --color-black: #000;
    --color-gray: #4D4D4D;
    --color-primary: #bf0002;
}

.wrap { max-width: 1392px; margin: 0 auto; position: relative; }



/* **************************************** *
 * HEADER
 * **************************************** */
#header { width: 100%; position: absolute; top: 0; left: 0; padding: 20px 0; z-index: 10; }
#header .wrap { display: flex; justify-content: space-between; align-items: center; }
#header .logo { width: 100px; }

.menu { display: flex; }
.menu > li { text-align: center; position: relative; width: 120px; }
.menu > li > a { color: var(--color-white); }
.sub-menu { margin-top: 30px; position: absolute; width: 100%; opacity: 0; overflow: hidden; }
.sub-menu > li:not(:first-child) { margin-top: 13px; }
.sub-menu > li > a { color: var(--color-white); }
.lang-menu { position: relative; width: 100px; }
.lang-menu-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--color-white); padding: 10px; color: var(--color-white); font-size: 14px; }
.lang-menu-select { display: none; width: 100%; border: 1px solid var(--color-white); position: absolute; top: 38px; left: 0; }
.lang-open .lang-menu-select { display: block; }
.lang-menu-select li {  width: 100%; }
.lang-menu-select li + li a { padding-top: 0; }
.lang-menu-select li a { display: block; width: 100%; padding: 12px 10px; color: var(--color-white); font-size: 14px; }
.lang-menu-select li a:hover { color: rgba(255,255,255,0.5); }
.menu-open .sub-menu { display: block; }
.menu-overlay { position: absolute; background: var(--color-primary); width: 100%; height: 0px; top: 0; z-index: -1; }
.menu a { position: relative; }
.menu a::before { position: absolute; content: ''; bottom: -2px; left: 0; width: 0%; height: 1px; background: var(--color-white); transition: width .3s; }
.menu a:hover:before { width: 100%; }

.menu-mo { display: none; position: relative; width: 40px; height: 40px; }
.menu-mo-btn { width: 100%; height: 100%; }
.menu-mo-btn-line { position: relative;  top: 50%; left: 50%; translate: -50% -50%; display: block; width: 30px; height: 2px; background: var(--color-white); }
.menu-mo-btn-line::before { position: absolute; content: ''; width: 100%; height: 2px; top: -10px; left: 0; background: var(--color-white); }
.menu-mo-btn-line::after { position: absolute; content: ''; width: 100%; height: 2px; top: 10px; left: 0; background: var(--color-white); }
.menu-mo-contant { position: fixed; background: var(--color-primary); top: 0; right: 0; width: 50%; height: 100%; padding: 100px 60px 60px; z-index: 30; transform: translateX(100%); }
.menu-mo-close { position: absolute; top: 32px; right: 40px; }
.menu-mo-close svg { width: 30px; }
.menu-mo-list li a { color: var(--color-white); }
.menu-mo-list > li > a { font-size: 28px; font-weight: 700; }
.menu-mo-list > li:not(:first-child) { margin-top: 32px; }
.menu-mo .lang-menu { position: absolute; bottom: 60px; width: calc(100% - 120px); }
.menu-mo .lang-menu-select { top: auto; bottom: 38px; }
.menu-mo .lang-menu-select li a { background: var(--color-black); }
.sub-menu-mo { margin-top: 16px; margin-left: 8px; }
.sub-menu-mo > li > a { font-size: 18px; }
.sub-menu-mo > li:not(:first-child) { margin-top: 8px; }
.menu-mo-overlay { position: fixed; background: rgba(0, 0, 0, 0.4); width: 100%; height: 100%; top: 0; left: 0; z-index: 20; opacity: 0; visibility: hidden; }



/* **************************************** *
 * CONTENT
 * **************************************** */
/* visual */
.main-visual { position: relative; /*height: 100vh;*/ }
.main-visual__bg { width: 100%; height: 100%; overflow: hidden; }
.main-visual__bg video { width: 100%; height: 100%; object-fit: cover; }
.main-visual__contents { width: 100%; position: absolute; left: 0; bottom: 110px; color: var(--color-white); }
.main-visual__contents h1 { opacity: 0; font-size: 80px; font-weight: 700; margin-bottom: 40px; }
.main-visual__contents p { opacity: 0; font-size: 22px; line-height: 32px; }

/* card */
.main-card { padding: 150px 0; }
.main-card__title { margin-bottom: 90px; width: 100%; text-align: center; }
.main-card__title h2 { font-size: 50px; font-weight: 700; margin-bottom: 20px; }
.main-card__title p { font-size: 22px; line-height: 32px; }
.main-card__list { display: flex; justify-content: center; gap: 30px; }
.main-card__list-item { position: relative; }
.main-card__list-item-bg { width: 100%; height: 100%; border-radius: 10px; overflow: hidden; }
.main-card__list-item-bg img { width: 100%; height: 100%; }
.main-card__list-item-desc { width: 100%; color: var(--color-white); text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.main-card__list-item-desc span { font-size: 19px; }
.main-card__list-item-desc h3 { font-size: 30px; font-weight: 700; margin-top: 6px; word-break: keep-all; padding: 0 20px; }

/* service */
.main-service { position: relative; padding: 184px 0 100px; background: var(--color-primary); color: var(--color-white); }
.main-service::after { position: absolute; content: 'MODUE PLATFORM'; font-size: 205px; letter-spacing: 0.1em; top: 29%; left: -30px; width: calc(100% + 30px); overflow: hidden; color: rgba(226,226,226,0.2); font-weight: 700; white-space: nowrap; }
.main-service__title { margin-bottom: 60px; width: 100%; text-align: center; }
.main-service__title h2 { font-size: 50px; font-weight: 700; }
.main-service__slider-item { display: flex; gap: 100px; justify-content: center; align-items: center; }
.main-service__slider-content h3 { font-size: 32px; line-height: 42px; font-weight: 700; margin-bottom: 12px; }
.main-service__slider-content > span { font-size: 14px; line-height: 25px; letter-spacing: 1em; margin-bottom: 60px; display: block; }
.main-service__slider-content p { font-size: 22px; line-height: 32px; margin-bottom: 30px; }
.main-service__slider-content-tag { display: flex; gap: 10px 12px; flex-wrap: wrap; }
.main-service__slider-content-tag li { background: var(--color-white); color: var(--color-primary); padding: 6px 14px; border-radius: 8px; }
.main-service__slider-content-tag li span { font-size: 22px; line-height: 32px; }
.main-service__slider-img { width: 39%; border-radius: 10px; overflow: hidden; }
.main-service__slider-img-inner { position: relative; width: 100%; padding-top: 63%; }
.main-service__slider-img img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.main-service__slider .swiper-wrapper { margin-bottom: 60px; }
.main-service__slider .swiper-scrollbar { width: 300px; height: 5px; left: 50%; transform: translateX(-50%); background: var(--color-white); }
.main-service__slider .swiper-scrollbar-drag { background: #7D0001; border: 1px solid #7D0001; }

/* contact */
.main-contact { padding: 150px 0; }
.main-contact .wrap { display: flex; }
.main-contact__content { width: 40%; background: var(--color-primary); color: var(--color-white); padding: 50px; }
.main-contact__content h2 { text-align: center; font-size: 32px; font-weight: 700; margin-bottom: 62px; }
.main-contact__content-list li { display: flex; align-items: flex-start; }
.main-contact__content-list li:not(:first-child) { margin-top: 47px; }
.main-contact__content-list-desc { margin-left: 23px; }
.main-contact__content-list-desc h3 { margin-bottom: 11px; font-size: 22px; font-weight: 600; }
.main-contact__content-list-desc p + p { margin-top: 8px; }
.main-contact__content-list-desc p > b { display: inline-block; margin-right: 8px; font-weight: normal; }
.main-contact__content-list-desc a { color: var(--color-white); font-size: 21px; }
.main-contact__content-btn { margin-top: 60px; display: flex; }
.main-contact__content-btn > button { padding: 12px 15px 8px; width: 50%; }
.main-contact__content-btn > button span { font-size: 15px; display: inline-block; margin-left: 10px; vertical-align: top; }
.main-contact__content-btn-address { background: var(--color-white); color: var(--color-black); }
.main-contact__content-btn-map { background: var(--color-black); color: var(--color-white); }
.main-contact__map { width: 60%; }
.main-contact__map iframe { width: 100%; height: 100%; }



/* **************************************** *
 * FOOTER
 * **************************************** */
#footer { background: var(--color-gray); padding: 20px 0; }
#footer .wrap { display: flex; align-items: center; justify-content: center; gap: 20px; }
.footer-logo { width: 70px; }
.footer-copyright p { font-size: 13px; color: var(--color-white); }