@charset "UTF-8";@import url("/fnc_css/font/font.css");.sub-banner { width: 100%; height: 500px; display: flex; align-items: center; justify-content: center; padding-top: 60px; position: relative; }
.sub-banner h3 { font-size: 50px; font-weight: 500; color: #fff; }
.sub-banner1 { background: url("/fnc_images/sub/subbanner1.jpg") no-repeat center; background-size: cover; }
.sub-banner2 { background: url("/fnc_images/sub/subbanner2.jpg") no-repeat center; background-size: cover; }
.sub-banner3 { background: url("/fnc_images/sub/subbanner3.jpg") no-repeat center; background-size: cover; }
.sub-banner4 { background: url("/fnc_images/sub/subbanner4.jpg") no-repeat center; background-size: cover; }
.sub-banner5 { background: url("/fnc_images/sub/subbanner5.jpg") no-repeat center; background-size: cover; }
.sub-menu { position: absolute; bottom: 0; max-width: 1420px; width: 100%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; height: 60px; z-index: 11; }
.sub-menu > a { width: 25%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; line-height: 20px; color: #fff; background-color: rgba(0, 69, 171, 0.8); border-right: 1px solid #fff; text-align: center; }
.sub-menu > a:last-child { border: none; }
.sub-menu > a.active,
.sub-menu > a:hover { background-color: #fff; color: rgba(0, 69, 171, 1); }
.sub-wrap { width: 100%; max-width: 1480px; margin: 0 auto; padding: 70px 30px; }
.sub-title { display: flex; flex-direction: column; gap: 25px; align-items: center; }
.sub-title h1 { font-size: 40px; font-weight: 500; line-height: 46px; margin-bottom: 65px; }
.sub-subtitle { font-size: 22px; font-weight: bold; line-height: 26px; margin-bottom: 25px; color: #0045AB; text-align: center; }
/* vision */
.vision { text-align: center; padding-top: 30px; }
.vision > h2 { font-size: 24px; font-weight: 500; line-height: 32px; margin-bottom: 80px; }
.vision > p { font-size: 20px; line-height: 35px; margin-bottom: 80px;}
.misson { display: grid; grid-template-columns: repeat(1, 1fr); gap: 30px; margin-bottom:50px;}
.misson > div { padding: 60px 50px; background-color: #f6f6f6; border-radius: 20px; position: relative; }
.misson > div > h3 { font-size: 28px; font-weight: 500; line-height: 36px; color: #2e2e2e; /* margin-bottom: 30px; */}
.misson > div > p { font-size: 18px; line-height: 26px; color: #484848; font-weight:500;margin-bottom:5px;}
.misson > div > div { position: absolute; right: 20px; bottom: 10px; display: flex; justify-content: end; }
/* way */
.way-info { display: flex; align-items: center; gap: 40px; margin-bottom: 70px; }
.way-info > div > h3 { font-size: 22px; font-weight: bold; line-height: 26px; margin-bottom: 10px; color: #0045AB; }
.way-info > div > p { font-size: 20px; line-height: 23px; font-weight: 500; color: #484848; }

.way-info > span { display: block; height: 60px; width: 1px; background-color: #e1dfdf; }
.map { width: 100%; height: 600px; }
.root_daum_roughmap_landing { width: 100% !important; height: 100% !important; }
.root_daum_roughmap .wrap_map { height: calc(100% - 32px) !important; }

/* 사업분야 */
.business > div { width: 100%; padding: 45px 60px; border-radius: 20px; background-color: #f6f6f6; margin-bottom: 60px; }
.business > div > h3 { font-size: 30px; font-weight: 500; line-height: 35px; color: #2e2e2e; display: flex; align-items: baseline; gap: 40px; margin-bottom: 30px; }
.business > div > h3 > span { font-size: 80px; font-weight: bold; line-height: 92px; color: #0045AB; }
.business > div > p { font-size: 20px; line-height: 28px;  margin-bottom:20px;}
/* 제품안내 */
.product-text { margin-bottom: 60px; }
.product-text > p { font-size: 18px; line-height: 30px; margin-bottom: 5px; font-weight: 500; padding-left: 20px; position: relative; }
.product-text > p::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background-color: #0045AB; }
.product-top { display: flex; gap: 40px; margin-bottom: 50px; }
.product-top > div { width: 50%; }
.product-top-img { display: flex; align-items: center; justify-content: center; border-radius: 20px; border: 1px solid #ddd; padding: 30px; overflow: hidden; }
.product-top .sub-subtitle { text-align: left; }
/* 연혁 */
.history-wrap { display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; }
.history-wrap > img { height: 80px; position: relative; right: 4px; flex-shrink: 0; }
.history-line { position: absolute; top: 80px; bottom: 0px; left: 50%; transform: translateX(-50%); width: 2px; background-color: #0045AB; }
.history-box { width: 100%; display: flex; align-items: center; justify-content: center; gap: 120px; margin-top: 60px; position: relative; }
.history-box::after { content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; background-color: #fff; border: 3px solid #0045AB; border-radius: 50%; }
.history-box > div { width: calc(50% - 60px); flex-shrink: 0; }
.history-box > div > h3 { font-size: 30px; font-weight: 500; line-height: 40px; color: #0045AB; margin-bottom: 20px; }
.history-box > div > p { font-size: 20px; font-weight: 500; line-height: 24px; position: relative; margin-bottom: 15px; }
.history-box-left { text-align: right; }
.history-box-left p { padding-right: 20px; }
.history-box-left p::before { content: ""; position: absolute; right: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background-color: #0045AB; }
.history-box-right { text-align: left; }
.history-box-right p { padding-left: 20px; }
.history-box-right p::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background-color: #0045AB; }
/* 약관 */
.terms { width: 100%; }
.terms > h3 { font-size: 22px; font-weight: bold; line-height: 26px; color: #0045AB; margin-bottom: 15px; }
.terms > p { font-size: 16px; line-height: 22px; margin-bottom: 30px; }
/* 인증 */
.cert { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; margin-bottom: 70px; }
.cert > div { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 15px; }
.cert > div > p { font-size: 18px; line-height: 24px; font-weight: 500; text-align: center; }
.patent-table table { min-width: 800px; }
/* new 사업분야 */
.bus-wrap { width: 100%; padding: 70px 0; }
.new-bus { width: 100%; height: 1080px; color: #fff; }
.new-bus1 { background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("/fnc_images/sub/bus_bg1.jpg") no-repeat center; background-size: cover; }
.new-bus2 { background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("/fnc_images/sub/bus_bg2.jpg") no-repeat center; background-size: cover; }
.new-bus3 { background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("/fnc_images/sub/bus_bg3.jpg") no-repeat center; background-size: cover; }
.new-bus4 { background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("/fnc_images/sub/bus_bg4.jpg") no-repeat center; background-size: cover; }
.new-bus5 { background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("/fnc_images/sub/bus_bg5.jpg") no-repeat center; background-size: cover; }
.new-bus-text { max-width: 1480px; padding: 0 30px; margin: 0 auto; padding-top: 200px; }
.new-bus-text > h1 { font-size: 45px; font-weight: 700; line-height: 60px; margin-bottom: 50px; }
.new-bus-text > p { font-size: 24px; line-height: 32px; }
/* 인사말 */
.hello { width: 100%; max-width: 950px; margin: 0 auto; }
.hello > h3 { width: 100%; text-align: center; font-size: 26px; line-height: 38px; font-weight: 500; margin-bottom: 70px; position: relative; }
.hello > h3::before { content: ""; position: absolute; width: 100%; height: 20px; background-color: #0045AB; bottom: 0; left: 0; opacity: 0.2; z-index: -1; }
.hello > h3 > span { font-weight: bold; color: #0045AB; }
.hello > p { margin-bottom: 40px; font-size: 20px; line-height: 30px; text-align: center; }
/* 반응형 */
/* @media (max-width: 1439px) { } */
@media (max-width: 1279px){
 .way-info { gap: 20px; }
  .sub-menu { flex-wrap: wrap; height: auto; bottom:-60px;}
 .sub-menu > a { height: 60px; border-bottom: 1px solid #fff !important; }
 .sub-banner .sub-menu > a {width:50%;}
.sub-banner1 .sub-menu > a {width:33.3%;}
.sub-banner .sub-menu > a:nth-last-child(-n+2) {width:50%;}
 .sub-wrap { padding: 100px 20px 50px; }
 .bus-wrap {padding:120px 0 ;}
 }
@media (max-width: 1023px){
.business > div > p br {display:none;}
.vision > h2 br {display:none;}
 .sub-wrap { padding: 120px 20px 50px; }
 .sub-banner { height: 400px; padding-top: 0; }
 .sub-banner h3 { font-size: 28px; line-height: 40px; }
.sub-menu-long{word-break:normal;}
 .sub-title h1 { font-size: 28px; line-height: 40px; margin-bottom: 40px; }
 .sub-subtitle { font-size: 20px; line-height: 26px; }
 .vision > h2 { font-size: 20px; line-height: 28px; }
 .misson > div { padding: 40px; padding-right: 80px; }
 .misson > div > h3 { font-size: 20px; line-height: 30px; text-align: left; }
 .misson > div > div { width: 70px; right: 10px; }
 .history-wrap { align-items: start; }
 .history-wrap > img { height: 60px; }
 .history-line { left: 32px; top: 60px; transform: unset; }

 .history-box > div > p { font-size: 16px; line-height: 24px; }
 .history-box { gap: 0px; justify-content: start; }
 .history-box > div { width: auto; }
 .history-box::after { left: 25px; transform: unset; }
 .history-box-left { text-align: left; padding-left: 60px; }
 .history-box-left p::before { right: unset; left: 0; }
 .history-box-left p { padding-right: 0; padding-left: 20px; }
 .history-box > div { flex-shrink: 1; }
 .way-info { flex-direction: column; align-items: start; margin-bottom: 50px; }
 .way-info > div > h3 { font-size: 20px; line-height: 26px; }
 .way-info > div > p { font-size: 18px; line-height: 24px; }
 .way-info > span { display: none; }
 .map { height: 450px; }
 .business > div { padding: 30px; }
 .business > div > h3 > span { font-size: 40px; line-height: 60px; }
 .business > div > h3 { font-size: 24px; line-height: 32px; gap: 20px; align-items: center; }
 .business > div > p { font-size: 18px; line-height: 28px; }


  .cert { grid-template-columns: repeat(2, 1fr); gap: 30px; }

  .new-bus-text {padding: 150px 20px 0;}
 .new-bus-text > h1 { font-size: 28px; font-weight: 700; line-height: 40px; }
.new-bus-text > p { font-size: 18px; line-height: 26px; }
.new-bus { height: 800px; }
.hello > h3{font-size:22px;line-height:30px;}
.hello > h3 br {display:none;}
.hello > p{font-size: 18px; line-height: 30px;}
.hello > h3::before{display:none;}

 .product-top { flex-direction: column; }
 .product-top > div { width: 100%; }
 .product-top .sub-subtitle { text-align: center; }
 .product-top .product-text { margin-bottom: 30px; }
 }
@media (max-width: 767px){
.sub-banner h3{padding-bottom:50px;}
  .sub-menu { flex-wrap: wrap; height: auto; bottom:-70px;}
 .sub-menu > a { font-size: 16px; height:70px;letter-spacing:-0.7px;}
 .misson > div { padding: 40px 20px 60px; }
 .history-line { left: 0; top: 30px; }
 .history-wrap > img { height: 30px; right: 17px; }
 .history-line { height: 2600px; }
 .history-box-left { padding-left: 20px; }
 .history-box::after { left: -7px; }
 .business > div { padding: 30px 20px; }
 .product-img { flex-direction: column; }
 .product-img > div { height: 200px; }
 .cert { grid-template-columns: repeat(1, 1fr); gap: 30px; }
 }
@media (max-width: 479px){
 .map { height: 400px; }
  .new-bus  {  height: 600px; }

 }
@media (max-width: 400px){
   .history-line { height: 2800px; }
}