@charset "UTF-8";

section.index-title-section { width: 100%; height: 950px; background-image: var( --main-title-bg-url ); background-repeat: no-repeat; background-size: cover; }
/* 2025.03.07 임시배너 추가 2025.03.17 임시배너 제거 */
/* section.index-title-section { width: 100%; height: 700px; background-image: var( --main-title-bg-url ); background-repeat: no-repeat; background-size: cover; }  */

section.index-title-section div { background: none; }
section.index-title-section div.index-header { position: absolute; top: 0; left: 0; display: flex; flex-wrap: wrap; width: 100%; min-width: 1600px; height: 120px; align-items: center; justify-content: center; color: #fff; z-index: 1; }
section.index-title-section div.index-header img.logo { position: absolute; left: calc( ( 100% - 1600px ) / 2 ); top: 50%; transform: translateY( -50% ); }
section.index-title-section div.index-header img.logo.def {}
section.index-title-section div.index-header img.logo.hov { display: none; }
section.index-title-section div.index-header div.menu { display: flex; flex-wrap: wrap; align-items: center; width: 220px; height: 100%; justify-content: center; }
section.index-title-section div.index-header div.menu > a { font-size: 1.8rem; }
section.index-title-section div.index-header div.menu > a > i { display: inline-block; margin-left: 0.6rem; width: 4px; height: 4px; vertical-align: top; border-radius: 4px; background-color: var( --color-of-notice ); }
section.index-title-section div.index-header div.menu div.under-line { position: absolute; bottom: 0; left: 0; transform: translateY( 2px ); width: 100%; height: 3px; background: none; }
section.index-title-section div.index-header div.menu div.sub-menu { display: none; position: absolute; bottom: 0; left: 0; width: 100%; transform: translateY( 100% ); }
section.index-title-section div.index-header div.menu div.sub-menu a { display: block; padding: 1.2rem 0; width: 100%; font-size: 1.6rem; text-align: center; color: var( --color-of-gray ); cursor: pointer; }
section.index-title-section div.index-header div.menu div.sub-menu a:hover { color: var( --default-font-color ); }
section.index-title-section div.index-header div.menu div.sub-menu a.emphasis { color: var( --color-of-theme ); }
section.index-title-section div.index-header div.menu div.sub-menu a.emphasis:hover { color: var( --color-of-theme ); }
section.index-title-section div.index-header div.user-if { position: absolute; right: calc( ( 100% - 1600px ) / 2 ); top: 50%; transform: translateY( -50% ); }
section.index-title-section div.index-header div.user-if > div { position: relative; background: none;  }
section.index-title-section div.index-header div.user-if > div > a { position: relative; padding: 0 1rem; font-size: 1.2rem; }
section.index-title-section div.index-header div.user-if > div > a > i { position: absolute; top: 0; right: 0; width: 4px; height: 4px; border-radius: 4px; background-color: var( --color-of-notice ); }
section.index-title-section div.index-header div.locale { position: absolute; right: calc( ( 100% - 1600px ) / 2 ); top: 20%; padding: 0 1rem; transform: translateY( -50% ); }
section.index-title-section div.index-header div.locale button { margin-left: 0.6rem; padding: 0.4rem 1.6rem; font-size: 1.2rem; background: rgba( 255, 255, 255, 0.25 ); color: var( --color-of-white ); }
section.index-title-section div.index-header div.locale button.on { background: var( --color-of-theme ); border-color: var( --color-of-theme ); }
section.index-title-section div.index-header div.sub { display: none; width: 100%; background-color: #fff; border-top: 1px solid var( --color-of-soft-border ); }
section.index-title-section div.index-header:hover { background: #fff;  }
section.index-title-section div.index-header:hover img.logo.def { display: none; }
section.index-title-section div.index-header:hover img.logo.hov { display: block; }
section.index-title-section div.index-header:hover div.menu { position: relative; color: var( --default-font-color ); }
section.index-title-section div.index-header:hover div.menu:hover { color: var( --color-of-theme ); }
section.index-title-section div.index-header:hover div.menu:hover div.under-line { background-color: var( --color-of-theme ); }
section.index-title-section div.index-header:hover div.menu div.sub-menu { display: block; padding-top: 1rem; }
section.index-title-section div.index-header:hover div.user-if > div > a { color: var( --color-of-gray ); }
section.index-title-section div.index-header:hover div.locale button:not(.on) { color: var( --color-of-gray ); }
section.index-title-section div.index-header:hover div.sub { display: flex; }
section.index-title-section div.header-contents { position: relative; display: flex; flex-direction: column; height: calc( 1050px - 56px ); align-items: center; justify-content: center; color: #fff; }
section.index-title-section div.header-contents > * { display: block; }
section.index-title-section div.header-contents > p { font-size: 1.8rem; }
section.index-title-section div.header-contents > h1 { margin: 5rem 0 0 0; font-size: 4rem; }
section.index-title-section div.header-contents > h2 { margin: 0; font-size: 4rem; font-weight: lighter; }
section.index-title-section div.header-contents > a { margin: 12rem 0 18rem 0; font-size: 2rem; font-weight: var( --font-weight-thin ); }
section.index-title-section div.header-contents > i { position: absolute; left: 50%; bottom: 60px; width: 30px; height: 52px; transform: translateX( -50% );
	background-image: var( --scroll-icon-url ); background-repeat: no-repeat; background-size: cover; }


div.body-content { margin: 0; padding: 95px 0; width: 100%; text-align: center; }
/* 2025.03.07 임시배너 추가 2025.03.17 임시배너 제거 */
/* div.body-content { margin: 0; padding: 10px 0; width: 100%; text-align: center; } */
div.body-content section { padding: 95px 0; }
/* 2025.03.07 임시배너 추가 2025.03.17 임시배너 제거 */
/*div.body-content section { padding: 25px 0; }*/
div.body-content section > div.section-wrap { margin: 0 auto; width: 1600px; min-width: 1600px; max-width: 1600px; }

div.body-content section.introduce > div.section-wrap { display: flex; }
div.body-content section.introduce > div.section-wrap > div { display: flex; flex-direction: column; height: 600px; width: -webkit-fill-available; justify-content: center;
	background-size: 100%; background-repeat: no-repeat; background-position: center; color: #fff; filter: brightness( 1.0 ); transition: background 0.75s, filter 0.5s; }
div.body-content section.introduce > div.section-wrap > div.intro-find { background-image: var( --intro-find-url ); }
div.body-content section.introduce > div.section-wrap > div.intro-mf-req { background-image: var( --intro-mf-req-url ); }
div.body-content section.introduce > div.section-wrap > div.intro-req-quot { background-image: var( --intro-req-quot-url ); }
div.body-content section.introduce > div.section-wrap > div > h4 { margin: 0; font-size: 2.4rem; font-weight: var( --font-weight-normal ); }
div.body-content section.introduce > div.section-wrap > div > p { margin: 25px 0; line-height: 2.6rem; font-size: 1.6rem; display: none; }
div.body-content section.introduce > div.section-wrap > div > p > button { margin: 0 auto; padding: 1rem 2rem; font-size: 1.6rem; background: none; border: 1px solid #fff; border-radius: 2rem; color: #fff; display: none; }
div.body-content section.introduce > div.section-wrap > div > p > button:hover { font-weight: var( --font-weight-bolder ); }
div.body-content section.introduce > div.section-wrap > div:hover { background-size: 120%; filter: brightness( 1.25 ); transition: background 0.75s, filter 0.5s; }
div.body-content section.introduce > div.section-wrap > div:hover * { display: block; }
div.body-content section.introduce > div.section-wrap > div:hover h4 { margin: 0 0 25px 0; transition: margin 0.5s; }

div.body-content section.recommend > div.section-wrap > p.label { font-size: 2rem; color: var(--color-of-theme); }
div.body-content section.recommend > div.section-wrap > p.title { position: relative; margin-top: 3rem; font-size: 3rem; }
div.body-content section.recommend > div.section-wrap > p.title > a { position: absolute; bottom: 0; right: 0; font-size: 1.6rem; color: var( --color-of-light-gray ); }
div.body-content section.recommend > div.section-wrap > div.video-list { margin-top: 8rem; display: flex; justify-content: space-between; }
div.body-content section.recommend > div.section-wrap > div.video-list > div.video { display: flex; flex-direction: column; width: calc( ( 100% - 120px ) / 4 ); }
div.body-content section.recommend > div.section-wrap > div.video-list > div.video > div.img { position: relative; height: 230px; }
div.body-content section.recommend > div.section-wrap > div.video-list > div.video > div.img > img { height: 100%; width: 100%; border-radius: 1rem; }
div.body-content section.recommend > div.section-wrap > div.video-list > div.video > div.img > i { position: absolute; top: 50%; left: 50%; width: 31px; height: 34px; transform: translate( -50%, -50% );
	background-image: var( --play-icon-url ); background-repeat: no-repeat;  z-index: 1; }
div.body-content section.recommend > div.section-wrap > div.video-list > div.video > p { margin-top: 3rem; font-size: 1.6rem; text-align: left; font-weight: var( --font-weight-bolder ); }
div.body-content section.recommend > div.section-wrap > div.video-list > div.video > div.content { margin-top: 2rem; font-size: 1.4rem; text-align: left; color: var( --color-of-light-gray );
	overflow: hidden; text-overflow: ellipsis; display: -webkit-inline-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

div.body-content section.banner > div.section-wrap { position: relative; height: 400px; }
div.body-content section.banner > div.section-wrap img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; }
div.body-content section.banner > div.section-wrap div.conetent { display: flex; flex-direction: column; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: none; color: #fff; z-index: 1;
	align-items: center; justify-content: center; }
div.body-content section.banner > div.section-wrap div.conetent > p { font-size: 1.8rem; }
div.body-content section.banner > div.section-wrap div.conetent > h1 { margin-top: 3rem; font-size: 3rem; font-weight: var( --font-weight-normal ); }
div.body-content section.banner > div.section-wrap div.conetent > p > button { margin: 4rem 0 0 0; padding: 1rem 2rem; font-size: 1.6rem; background: none; border: 1px solid #fff; border-radius: 2rem; color: #fff; }
div.body-content section.banner > div.section-wrap div.conetent > p > button:hover { font-weight: var( --font-weight-bolder ); }

/* 2025.03.07 임시배너 추가 -> 2025.03.17 임시배너 제거 */
/*
div.body-content section.temp-banner > div.section-wrap { position: relative; height: 400px; }
div.body-content section.temp-banner > div.section-wrap img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; }
div.body-content section.temp-banner > div.section-wrap div.conetent { display: flex; flex-direction: column; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: none; color: #fff; z-index: 1;
	align-items: center; justify-content: center; }
div.body-content section.temp-banner > div.section-wrap div.conetent > p { font-size: 1.8rem; }
div.body-content section.temp-banner > div.section-wrap div.conetent > h1 { margin-top: 3rem; font-size: 3rem; font-weight: var( --font-weight-normal ); }
div.body-content section.temp-banner > div.section-wrap div.conetent > p > button { margin: 22rem 0 0 0; padding: 1rem 2rem; font-size: 1.6rem; background: none; border: 0px;}
div.body-content section.temp-banner > div.section-wrap div.conetent > p > button:hover { font-weight: var( --font-weight-bolder ); }
*/

div.body-content section.new-company > div.section-wrap > p.label { text-align: left; font-size: 2rem; color: var(--color-of-theme); }
div.body-content section.new-company > div.section-wrap > div.company-wrap { display: flex; margin-top: 3rem; }
div.body-content section.new-company > div.section-wrap > div.company-wrap > div { display: flex; flex-direction: column; }
div.body-content section.new-company > div.section-wrap > div.company-wrap > div.discription { width: 400px; }
div.body-content section.new-company > div.section-wrap > div.company-wrap > div.discription > h1 { margin: 0; font-size: 3.4rem; font-weight: var( --font-weight-normal ); text-align: left; }
div.body-content section.new-company > div.section-wrap > div.company-wrap > div.discription > p { margin-top: 7rem; text-align: left; font-size: 1.6rem; }
div.body-content section.new-company > div.section-wrap > div.company-wrap > div.discription > p span { vertical-align: super; }
div.body-content section.new-company > div.section-wrap > div.company-wrap > div.discription > p button.go-arrow { margin-left: 1rem; padding: 0; width: 28px; height: 28px;  border: none; border-radius: 28px;
	background-image: var( --go-arrow-url ); background-repeat: no-repeat; background-size: contain; }
div.body-content section.new-company > div.section-wrap > div.company-wrap > div.companies { display: flex; flex-direction: row; padding-left: 300px; width: calc( 100% - 400px ); height: 600px; justify-content: space-between; }
div.body-content section.new-company > div.section-wrap > div.company-wrap > div.companies > div.company { display: flex; flex-direction: column; width: 280px; }
div.body-content section.new-company > div.section-wrap > div.company-wrap > div.companies > div.company div.item { width: 282px; height: 282px; box-shadow: 8px 10px 20px 0px #efefef;
	background-image: var( --company-icon-sample-url ); background-repeat: no-repeat; background-size: cover; }
div.body-content section.new-company > div.section-wrap > div.company-wrap > div.companies > div.company div.item:first-child { margin-bottom: 30px; }

div.body-content section.news { background-color: #f6f8fc; }
div.body-content section.news > div.section-wrap { background: none; }
div.body-content section.news > div.section-wrap > p.label { font-size: 2rem; color: var(--color-of-theme); }
div.body-content section.news > div.section-wrap > p.title { position: relative; margin-top: 3rem; font-size: 3rem; }
div.body-content section.news > div.section-wrap > p.title > a { position: absolute; bottom: 0; right: 0; font-size: 1.6rem; color: var( --color-of-light-gray ); }
div.body-content section.news > div.section-wrap > div.news-list { margin-top: 8rem; display: flex; justify-content: space-between; background: none; }
div.body-content section.news > div.section-wrap > div.news-list > div.news { display: flex; flex-direction: column; width: calc( ( 100% - 130px ) / 3 ); }
div.body-content section.news > div.section-wrap > div.news-list > div.news > img { height: 245px; border-radius: 1rem 1rem 0 0; }
div.body-content section.news > div.section-wrap > div.news-list > div.news > p { margin-top: 4rem; padding: 0 3rem; height: 4.2rem; font-size: 1.6rem; text-align: left; font-weight: var( --font-weight-bolder );
	overflow: hidden; text-overflow: ellipsis; display: -webkit-inline-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
div.body-content section.news > div.section-wrap > div.news-list > div.news > div.content { margin-top: 3rem; padding: 0 3rem; font-size: 1.4rem; text-align: left; color: var( --color-of-light-gray );
	overflow: hidden; text-overflow: ellipsis; display: -webkit-inline-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
div.body-content section.news > div.section-wrap > div.news-list > div.news > div.date { margin-top: 2rem; padding: 0 3rem 4rem 3rem; font-size: 1.4rem; font-weight: var( --font-weight-bolder ); text-align: left; color: var( --color-of-gray ); }

div.body-content section.process > div.section-wrap > p.label { font-size: 2rem; color: var(--color-of-theme); }
div.body-content section.process > div.section-wrap > p.title { position: relative; margin-top: 3rem; font-size: 3rem; }
div.body-content section.process > div.section-wrap > p.title > a { position: absolute; bottom: 0; right: 0; font-size: 1.6rem; color: var( --color-of-light-gray ); }
div.body-content section.process > div.section-wrap > div.video-list { margin-top: 8rem; display: flex; justify-content: space-between; }
div.body-content section.process > div.section-wrap > div.video-list > div.video { display: flex; flex-direction: column; width: calc( ( 100% - 120px ) / 4 ); }
div.body-content section.process > div.section-wrap > div.video-list > div.video > div.img { position: relative; height: 230px; }
div.body-content section.process > div.section-wrap > div.video-list > div.video > div.img > img { height: 100%; width: 100%; border-radius: 1rem; }
div.body-content section.process > div.section-wrap > div.video-list > div.video > div.img > i { position: absolute; top: 50%; left: 50%; width: 31px; height: 34px; transform: translate( -50%, -50% );
	background-image: var( --play-icon-url ); background-repeat: no-repeat;  z-index: 1; }
div.body-content section.process > div.section-wrap > div.video-list > div.video > p { margin-top: 3rem; font-size: 1.6rem; text-align: center; font-weight: var( --font-weight-bolder ); }

div.body-content section.keywords { background-color: #f6f8fc; }
div.body-content section.keywords > div.section-wrap { display: flex; flex-direction: column; background: none; }
div.body-content section.keywords > div.section-wrap > h1 { font-size: 8rem; font-weight: var( --font-weight-bolder ); }
div.body-content section.keywords > div.section-wrap > p { margin-top: 120px; font-size: 3rem; }
div.body-content section.keywords > div.section-wrap > div.tags { display: flex; flex-wrap: wrap; justify-content: center; margin: 100px auto calc( 160px - 95px ) auto; width: 1440px; background: none; }
div.body-content section.keywords > div.section-wrap > div.tags > span { display: inline-block; margin: 0 1rem 2rem 1rem; padding: 2rem 4rem; font-size: 2rem; border-radius: 4rem; color: var( --color-of-gray ); background-color: #fff; }

div.body-content section.faq > div.section-wrap > h1 { font-size: 3.4rem; font-weight: var( --font-weight-bolder ); }
div.body-content section.faq > div.section-wrap table { margin: 8rem auto 0 auto; padding: 0; width: 1110px; border-top: 2px solid var( --default-font-color ); }
div.body-content section.faq > div.section-wrap table:not(.no-hover) tr:not(.empty):hover { background-color: var( --color-of-soft-theme ); }
div.body-content section.faq > div.section-wrap table tr td { position: relative; padding: 3rem 0; border-bottom: 1px solid var( --default-font-color ); cursor: pointer; }
div.body-content section.faq > div.section-wrap table tr td.date { padding: 3rem 0; font-size: 1.6rem; text-align: center; color: var( --color-of-light-gray ); }
div.body-content section.faq > div.section-wrap table tr td > button.flip { position: absolute; top: 3rem; right: 3rem; padding: 0; width: 2rem; height: 1rem; transform: translateY(50%); border: none; background: none;
	background-image: var( --icon-unfold-url ); background-repeat: no-repeat; }
div.body-content section.faq > div.section-wrap table tr td > button.flip.fold { background-image: var( --icon-fold-url ); }
div.body-content section.faq > div.section-wrap table tr td > span { display: block; margin-left: 3rem; width: 920px; font-size: 2rem; text-align: left; color: var( --color-of-dark-gray ); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
div.body-content section.faq > div.section-wrap table tr td > span i { margin-right: 2rem; font-size: 2rem; font-weight: var( --font-weight-bold ); font-style: normal; color: var( --default-font-color ); }
div.body-content section.faq > div.section-wrap table tr td div.faq-ans { display: flex; padding: 3rem; background-color: var( --color-of-bg ); border-top: 1px solid var( --color-of-soft-border); cursor: default; }
div.body-content section.faq > div.section-wrap table tr td div.faq-ans > span { width: 96%; text-align: left; font-size: 1.6rem; color: var( --color-of-gray ); }
div.body-content section.faq > div.section-wrap table tr td div.faq-ans > span.ttl { margin-right: 2rem; width: fit-content; font-size: 2rem; font-weight: var( --font-weight-bold ); font-style: normal; color: var( --default-font-color ); }
div.body-content section.faq > div.section-wrap table tr td div.attchment { padding: 1rem 3rem 1rem 0; text-align: right; font-size: 1.4rem; background-color: var( --color-of-bg ); cursor: default; }
div.body-content section.faq > div.section-wrap table tr td div.attchment span { color: var( --color-of-light-gray ); }
div.body-content section.faq > div.section-wrap table tr td div.attchment button { margin: 1rem 0 0 1.2rem; padding: 0 0.4rem 0.4rem 2.6rem; width: fit-content; max-width: 460px; font-size: 1.4rem; border: none; border-radius: 0; background: none; color: var( --color-of-theme );
	background-image: var( --clip-icon-url ); background-repeat: no-repeat; background-size: 1.5rem; background-position: center left 0.4rem; border-bottom: 1px solid var( --color-of-theme);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
div.body-content section.faq > div.section-wrap table tr td > button.flip.fold + div.faq-ans { display: none; }
div.body-content section.faq > div.section-wrap table tr td > button.flip.fold + div.faq-ans + div.attchment { display: none; }
div.body-content section.faq > div.section-wrap table tr.faq-list td { padding-bottom: 0; }
div.body-content section.faq > div.section-wrap table tr.faq-list td > span { margin-bottom: 3rem; }
div.body-content section.faq > div.section-wrap table tr.empty td { padding: 8rem 0; font-size: 1.8rem; color: var( --color-of-light-gray ); border-bottom: 1px solid var( --default-font-color ); cursor: default; }


section.index-footer-section { display: flex; flex-direction: column; padding-bottom: 8rem; background-color: #3a3a3c;  }
section.index-footer-section div { position: relative; width: 100%; background: none; }
section.index-footer-section div.footer-title { margin-top: 8rem; height: 56px; color: #d0d0d3; }
section.index-footer-section div.footer-title div.footer-functions { display: flex; margin: 0 auto; width: 1020px; height: 100%; font-size: 1.5rem; font-weight: var( --font-weight-bolder ); text-align: left; }
section.index-footer-section div.footer-title div.footer-functions > span { margin: 0 2rem; width: 1px; height: 1rem; background-color: #d0d0d3; }
section.index-footer-section div.footer-title div.footer-functions > a { font-weight: var( --font-weight-light ); }
section.index-footer-section div.footer-title div.footer-functions > a.accent { font-weight: var( --font-weight-bolder ); color: white; }
section.index-footer-section div.footer-title div.footer-functions > img.logo { position: absolute; left: calc( ( 100% - 1600px ) / 2 ); top: 0; }
section.index-footer-section div.footer-title div.footer-functions > div.sns { position: absolute; right: calc( ( 100% - 1600px ) / 2 ); top: 0; width: fit-content; }
section.index-footer-section div.footer-title div.footer-functions > div.sns button { width: 4rem; height: 4rem; padding: 0; margin-left: 2rem; border: none; background: none; background-size: contain; }
section.index-footer-section div.footer-title div.footer-functions > div.sns button#sns-btn-blog { background-image: var( --sns-blog-icon-url ); }
section.index-footer-section div.footer-title div.footer-functions > div.sns button#sns-btn-facebook { background-image: var( --sns-facebook-icon-url ); }
section.index-footer-section div.footer-title div.footer-functions > div.sns button#sns-btn-instagram { background-image: var( --sns-instagram-icon-url ); }
section.index-footer-section div.footer-title div.footer-functions > div.sns button#sns-btn-youtube { background-image: var( --sns-youtube-icon-url ); }
section.index-footer-section div.address { margin-top: 1rem; color: #939397; font-size: 1.4rem; }
section.index-footer-section div.address > div { margin: 0 auto; width: 1020px; height: 100%; line-height: 2.4rem; text-align: left; }
section.index-footer-section div.address > div > span { display: inline-block; margin: 0 1.2rem; width: 1px; height: 1rem; background-color: #939397; }
section.index-footer-section div.address > div > label {  }
section.index-footer-section div.copyright { margin-top: 2rem; color: #939397; font-size: 1.4rem; }
section.index-footer-section div.copyright > div { margin: 0 auto; width: 1020px; height: 100%; text-align: left; }