@charset "UTF-8";@import url("/fnc_css/font/font.css");.sub-banner { width: 100%; height: 380px; padding-top: 100px; display: flex; align-items: center; justify-content: center; align-items: center; }
.sub-banner > h3 { font-size: 45px; line-height: 65px; font-weight: 600; color: #fff; }
.sub-banner1 { background: url("/fnc_images/sub/subbanner1.jpg") no-repeat center/cover; }
.sub-banner2 { background: url("/fnc_images/sub/subbanner2.jpg") no-repeat center/cover; }
.sub-banner3 { background: url("/fnc_images/sub/subbanner3.jpg") no-repeat center/cover; }
.sub-banner4 { background: url("/fnc_images/sub/subbanner4.jpg") no-repeat center/cover; }

.sub-menu { width: 100%; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #d8d8d8; }
.sub-menu > a { width: 220px; height: 70px; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 29px; text-align: center; }
.sub-menu > a:hover,
.sub-menu > a.active { color: #21bee9; font-weight: 500; border-bottom: 3px solid #21bee9; }
.sub-title { width: 100%; max-width: 1480px; margin: 0 auto 50px; padding: 80px 0px 0px; text-align: center; border-bottom: 1px solid #d8d8d8; }
.sub-title > h3 { font-size: 35px; font-weight: bold; line-height: 52px; padding-bottom: 20px; border-bottom: 3px solid #21bee9; width: fit-content; margin: 0 auto; transform: translateY(2px); }
.sub-wrap { width: 100%; max-width: 1540px; padding: 0 30px; margin: 0 auto 80px; }
/* Àλ縻 */
.hello { background: url("/fnc_images/sub/hello_bg.jpg") no-repeat center/cover; width: 100%; max-width: 1920px; margin: 0 auto 80px; height: 740px; }
.hello > div { width: 100%; height: 100%; }
.hello-text { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 40px; }
.hello-text > h2 { font-size: 35px; font-weight: 600; line-height: 54px; }
.hello-text > p { font-size: 18px; line-height: 28px; }
.hello-text > h3 { text-align: right; font-size: 22px; line-height: 34px; font-weight: bold; }
/* ºñÀü */
.sub-logo { padding: 30px 0 70px; text-align: center; }
.sub-subtitle { font-size: 30px; font-weight: bold; line-height: 45px; position: relative; text-align: center; margin-bottom: 15px; }
.sub-subtitle::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -15px; width: 50px; height: 3px; background-color: #21bee9; }
.vision > p { font-size: 18px; line-height: 28px; text-align: center; margin-bottom: 55px; }
.vision > p > span { color: #21bee9; font-weight: 700; }
.vision-gnt { width: 100%; height: 400px; margin-top: 50px; background: url("/fnc_images/sub/vision_bg.png") no-repeat center/cover; display: flex; align-items: center; justify-content: center; gap: 140px; margin-bottom: 100px; }
.vision-gnt > div { width: 250px; height: 250px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #f6f6f6; flex-shrink: 0; }
.vision-video { width: 100%; background-color: #d8d8d8; margin-bottom: 100px; margin-top:50px;aspect-ratio: 16/9;max-height:650px;}
.vision-video iframe {width:100%;height:100%;}
.cert { width: 100%; margin-top: 50px; display: flex; align-items: center; justify-content: center; gap: 90px; }
.cert1 { justify-content: space-between; gap: 20px; }
.cert > div { width: 300px; text-align: center; display: flex; flex-direction: column; gap: 20px; align-items: center; }
/* ¿¬Çõ */
.history > .sub-logo { padding-bottom: 20px; }
.history > h2 { font-size: 60px; font-weight: bold; line-height: 89px; color: #d8d8d8; text-align: center; margin-bottom: 65px; }
.history-wrap { position: relative; }
.history-line { position: absolute; left: 50%; top: 10px; width: 1px; height: 100%; background-color: #dcdcdc; }
.history-box { width: 100%; display: flex; justify-content: center; gap: 80px; }
.history-box > div { width: 50%; padding-bottom: 50px; position: relative; }
.history-left { text-align: right; }
.history-box > div > h3 { font-size: 20px; line-height: 30px; font-weight: bold; color: #21bee9; }
.history-box > div > p { font-size: 18px; line-height: 26px; margin-bottom: 8px; }
.history-right > h3::after { content: ""; position: absolute; left: -44px; top: 10px; width: 9px; height: 9px; border-radius: 50%; background-color: #21bee9; }
.history-left > h3::after { content: ""; position: absolute; right: -45px; top: 10px; width: 9px; height: 9px; border-radius: 50%; background-color: #21bee9; }
/* Á¶Á÷µµ */
.org-top { padding-top: 30px; width: 100%; margin-bottom: 150px; background: url("/fnc_images/sub/vision_bg.png") no-repeat center/cover; }
.org-boss { width: 180px; height: 180px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: transparent linear-gradient(180deg, #215de9 0%, #21bee9 100%) 0% 0% no-repeat; font-size: 25px; font-weight: bold; color: #fff; margin: 0 auto; margin-bottom: 160px; position: relative; }
.org-boss::before { content: ""; position: absolute; left: 50%; top: 180px; width: 1px; height: 160px; background-color: #dcdcdc; }
.org-team { display: flex; align-items: center; justify-content: space-between; }
.org-team > div { width: 220px; height: 65px; border-radius: 35px; background-color: #e5f5ff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 500; flex-shrink: 0; }
.org-team > span { display: block; width: 100%; height: 1px; background-color: #dcdcdc; }
.org-bot { padding: 65px 0 30px; display: flex; justify-content: center; gap: 160px; }
.org-bot > div > h3 { width: 540px; height: 65px; border-radius: 35px; background-color: #21bee9; font-size: 20px; font-weight: 500; color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; }
.org-bot > div > p { font-size: 18px; line-height: 26px; text-align: center; }
.mo-org{display:none;margin-bottom:50px;}
.pc-org{margin-bottom:100px;}
/* ¿À½Ã´Â±æ */
.way { display: flex; align-items: end; gap: 20px; }
.way > div { width: 50%; }
.way-info > h3 { text-align: center; font-size: 30px; line-height: 44px; font-weight: 600; margin-bottom: 20px; }
.way-info > div { width: 100%; border-top: 1px solid #21bee9; border-bottom: 1px solid #21bee9; }
.way-info > div > div { padding: 20px; }
.way-info > div > div:not(:last-child) { border-bottom: 1px solid #d8d8d8; }
.way-info-box { display: flex; gap: 20px; align-items: center; }
.way-info-box > p { font-size: 18px; line-height: 26px; }
.way-info-box > p > span { font-size: 22px; line-height: 28px; margin-bottom: 5px; }
.way-info-flex { display: flex; align-items: center; gap: 100px; }
.way-map { height: 550px; }
.root_daum_roughmap_landing { width: 100% !important; height: 100% !important; }
.root_daum_roughmap .wrap_map { height: calc(100% - 32px) !important; }
/* Á¦Ç°¾È³» »ó¼¼ */
.product-detail-top { display: flex; gap: 30px; margin-bottom: 50px; }
.product-detail-top-left { width: 600px; height: 500px; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.product-detail-top-right { width: 100%; }
.product-detail-top-right > p { padding-left: 20px; font-size: 18px; line-height: 26px; margin-bottom: 5px; position: relative; }
.product-detail-top-right > p::before { content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 8px; border-radius: 50%; background-color: #21bee9; }
.product-detail-top-right-title { padding-top: 40px; width: 100%; margin-bottom: 30px; }
.product-detail-top-right-title > p { font-size: 16px; font-weight: 700; color: #21bee9; }
.product-detail-top-right-title > h3 { font-size: 30px; line-height: 44px; font-weight: 500; padding-bottom: 20px; border-bottom: 1px solid #d8d8d8; }
.product-detail-img { width: 100%; margin-top: 70px; display: flex; justify-content: center; }

.product-tap { width: 100%; display: flex; margin: 50px 0; }
.product-tap > div { width: 100%; height: 60px; border-bottom: 1px solid #d8d8d8; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #a2a2a2; font-size: 20px; }
.product-tap > div.active { font-weight: 500; color: #21bee9; border-bottom: 1px solid #21bee9; }
.product-tap > div:not(.active):hover { background-color: #d8d8d8; }
.product-tap-div { display: none; }
.product-tap-div.active { display: block; }
.product-table { width: 100%; height: auto; overflow: auto; max-width: 1000px; margin: 70px auto 0; }
.product-table > table { width: 100%; min-width: 700px; }
.product-table > table th { background-color: #eee; padding: 10px; border: 1px solid #dcdcdc; text-align: center; font-size: 14px; }
.product-table > table td { padding: 10px; border: 1px solid #dcdcdc; text-align: center; font-size: 14px; line-height: 20px; }
.product-table > p { margin-top: 10px; font-size: 16px; line-height: 24px; }

/* Á¦Ç°Àüü */
.product-all { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(350px,auto)); column-gap: 20px; row-gap: 50px; }
.product-all-item { width: 100%; }
.product-all-item > span { width: 100%; display: flex; align-items: center; justify-content: center; aspect-ratio: 3/2; margin-bottom: 15px; border: 1px solid #ddd; }

.product-all-item > p { font-size: 18px; font-weight: 500; line-height: 24px; }
/* ¾à°ü */
.terms > h3 {font-size:20px;line-height:28px;font-weight:500;margin-top:50px;margin-bottom:10px;}
.terms > p {font-size:16px;line-height:26px;margin-bottom:10px;}

/* °ßÀû¹®ÀÇ */
.mail-box { width: 100%; padding: 75px 90px; box-shadow: 0px 0px 20px #00000029; }
.mail-box form { width: 100%; }
.mail-flex { width: 100%; display: flex; gap: 20px; }
.mail-label { display: block; width: 100%; margin-bottom: 40px; }
.mail-label.mb10 { margin-bottom: 10px; }
.mail-label > p { font-size: 20px; font-weight: bold; line-height: 28px; margin-bottom: 10px; }
.mail-label > input { width: 100%; height: 45px; border: 1px solid #c9c9c9; border-radius: 20px; background-color: #f1f1f1; padding-left: 20px; font-size: 18px; }
.mail-label > textarea { width: 100%; resize: none; height: 250px; border: 1px solid #c9c9c9; border-radius: 20px; background-color: #f1f1f1; outline: 0; padding: 20px; font-size: 18px; line-height: 24px; }
.mail-label > select { width: 100%; height: 45px; border: 1px solid #c9c9c9; border-radius: 20px; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; background: url("/fnc_images/sub/mail_select_icon.png") no-repeat, #f1f1f1; background-position: right 20px top 50%; padding-left: 20px; padding-right: 35px; }
.mail-check { width: 100%; display: flex; align-items: center; gap: 15px; }
.mail-check > p { font-size: 16px; line-height: 24px; font-weight: bold; padding-top: 3px; }
.mail-check input[type="checkbox"] { -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: middle; flex-shrink: 0; border-radius: 50%; width: 24px; height: 24px; border: 1px solid #ababab; background-color: #f1f1f1; }
.mail-check input[type="checkbox"]:checked { position: relative; border: 2px solid #21bee9; }
.mail-check input[type="checkbox"]:checked::after { position: absolute; content: ""; width: 14px; height: 14px; background-color: #21bee9; border-radius: 50%; top: 3px; left: 3px; }
.mail-label > input[type="file"] { padding-top: 5px; padding-left: 8px; display: flex; align-items: center; }
.mail-label > input[type="file"]::file-selector-button {cursor:pointer; border-radius: 20px; height: 33px; font-size: 16px; line-height: 33px; border: 1px solid #bebebe; background: url("/fnc_images/sub/file_icon.png") no-repeat, #fff; background-position: left 10px top 50%; padding-left: 50px; padding-right: 20px; color: #bebebe; margin-right: 20px; }
.mail-label:hover > input[type="file"]::file-selector-button { color: #fff; background: url("/fnc_images/sub/file_icon_white.png") no-repeat, #bebebe; background-position: left 10px top 50%; }
.mail-select { width: calc(50% - 10px); }
.mail-btn { width: 100%; height: 65px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; line-height: 28px; color: #fff; background-color: #21bee9; border: 2px solid #21bee9; border-radius: 20px; transition: all 0.2s; margin-top: 70px; }
.mail-btn:hover { background-color: #fff; color: #21bee9; }
/* ¹ÝÀÀÇü */
@media (max-width: 1439px){
 .org-bot { width: 100%; gap: 50px; }
 .org-bot > div { width: 50%; }
 .org-bot > div > h3 { width: 100%; }
 }
@media (max-width: 1279px){
 .vision-gnt { gap: 40px; }
 .org-boss { margin: 0 auto 50px; }
 .org-boss::before { height: 50px; }
 .org-team { flex-direction: column; gap: 20px; }
 .org-team > span { display: none; }
 .org-team > div { width: 100%; }
 .way-info > h3 { font-size: 24px; line-height: 30px; }
 .way-info-box > p > span { font-size: 20px; line-height: 26px; }
 .product-detail-img { flex-direction: column; align-items: center; }
 .product-detail-top-left { width: 450px; height: 450px; }
 .mail-box {padding:40px;}
 }
@media (max-width: 1023px){
 .sub-wrap { padding: 0 20px; }
 .sub-banner { padding-top: 60px; height: 280px; }
 .sub-banner > h3 { font-size: 32px; }
 .sub-menu { flex-wrap: wrap; }
 .sub-menu > a { width: 50%; height: 50px; font-size: 16px; line-height: 22px; border-bottom: 1px solid #d8d8d8; }
 .sub-menu > a:nth-child(2n) { border-left: 1px solid #d8d8d8; }
 .sub-menu > a:nth-child(5) { border: none; }
 .sub-title { padding: 50px 20px 0; }
 .sub-title > h3 { font-size: 24px; line-height: 30px; padding-bottom: 10px; }
 .sub-subtitle { font-size: 22px; line-height: 30px; }
 .hello-text > h2 { font-size: 24px; line-height: 36px; }
 .hello-text > p { font-size: 16px; line-height: 24px; }
 .vision > p br { display: none; }
 .vision-gnt { flex-direction: column; height: auto; }
 .vision-gnt > div { width: 200px; height: 200px; }
 .vision-gnt > div > img { width: 100px; }
 .cert { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 50px; }
 .cert1 { margin-top: 50px; }
 .cert > div { width: 100%; display: flex; flex-direction: column; align-items: center; }
 .history-line { left: 0; }
 .history-box { gap: 0; justify-content: start; padding-left: 40px; }
 .history-box > div { width: auto; }
 .history-left { text-align: left; }
 .history-left > h3::after { right: unset; left: -45px; }
 .history > h2 { font-size: 32px; line-height: 45px; }
 .sub-logo > img { width: 250px; }
 .org-bot { flex-direction: column; }
 .org-bot > div { width: 100%; }
 .way { flex-direction: column-reverse; gap: 50px; }
 .way > div { width: 100%; }
 .way-map { height: 400px; }
 .way-info-box > p > span { font-size: 16px; line-height: 24px; font-weight: 500; }
 .way-info-box > p { font-size: 16px; line-height: 24px; }
 .way-info > div > div { padding: 20px 10px; }
 .way-info-box { gap: 10px; }
 .way-info-flex { gap: 50px; }
 .product-detail-top { flex-direction: column; }
 .product-detail-top-left { width: 100%; height: 300px; }
 .product-detail-top-right-title { padding-top: 0; margin-bottom: 15px; }
 .product-detail-top-right-title > h3 { font-size: 24px; line-height: 30px; padding-bottom: 10px; }
 .product-detail-top-right > p { font-size: 16px; line-height: 24px; padding-left: 15px; }
 .product-detail-top-right > p::before { top: 9px; }
 .product-detail-img { margin-top: 50px; }
 .product-all-item > p{font-size:16px;}
 .mail-flex{flex-direction:column;gap:0;}
 .mail-select{width:100%;}
 .mail-box{padding:0px;box-shadow:none;}
 .mail-label > p{font-size:18px;}
 .mail-label > input{font-size:16px;}
 .mail-label > textarea{font-size:16px;}
 .mail-btn{font-size:18px;}
 }
@media (max-width: 767px){
 .history-box { padding-left: 20px; }
 .history-right > h3::after { left: -24px; }
 .history-left > h3::after { left: -24px; }
 .history-box > div > p { font-size: 16px; line-height: 24px; }
 .history-box > div > h3 { font-size: 18px; line-height: 26px; }
 .org-bot > div > h3 { height: 50px; font-size: 18px; }
 .org-bot > div > p { font-size: 16px; line-height: 24px; }
 .mo-org{display:block;}
 .pc-org{display:none;}
 }
@media (max-width: 479px) { }