@charset "UTF-8";
@import url("/fnc_css/font/font.css");

.fs18-lh27 { font-size: 18px; line-height: 27px; } 
/* 본문 */
.sub-wrap { width: 1700px; display: block; position: relative; margin: 0 auto; padding-top: 150px; margin-bottom: 80px; } 
.vision-wrap { margin-bottom: 100px; } 

/* 서브 탑 */
.sub-title { width: 100%; display: flex; flex-direction: column; align-items: center; margin-bottom: 80px; } 
.sub-title > h1 { font-size: 35px; line-height: 52px; font-weight: bold; margin-bottom: 15px; } 
.sub-title > div { width: 50px; height: 3px; background-color: #000; } 
.sub-banner { width: 100%; height: 450px; display: flex; align-items: end; justify-content: start; padding-left: 145px; padding-bottom: 90px; margin-bottom: 60px; border-radius:10px;} 
.hello-wrap .sub-banner { background: url("../fnc_images/sub/sub_banner1.jpg") no-repeat center; background-size: cover; } 
.vision-wrap .sub-banner { background: url("../fnc_images/sub/sub_banner2.jpg") no-repeat center; background-size: cover; } 
.history-wrap .sub-banner { background: url("../fnc_images/sub/sub_banner3.jpg") no-repeat center; background-size: cover; margin-bottom: 5px; } 
.bus-wrap .sub-banner { background: url("../fnc_images/sub/sub_banner4.jpg") no-repeat center; background-size: cover; } 
#notice3 .sub-banner { background: url("../fnc_images/sub/sub_banner6.jpg") no-repeat center; background-size: cover; } 
.sub-banner-box { color: #fff; } 
.sub-banner-box > div { width: 40px; height: 3px; background-color: #fff; margin-bottom: 15px; } 
.sub-banner-box > h3 { font-size: 30px; line-height: 45px; font-weight: bold;font-family: "Noto Sans KR", sans-serif;} 
.sub-banner-box > h3 > span { position: relative; display: inline-block; z-index: 9; } 
.sub-banner-box > h3 > span::before { content: ""; position: absolute; width: 100%; height: 20px; background-color: #3d76ff9c; bottom: -5px; z-index: -1; } 

/* 인사말 텍스트 */
.sub-text { width: 100%; display: flex; align-items: start; gap: 40px; justify-content: space-between; word-break: keep-all; } 
.sub-text > div { width: calc(50% - 20px); font-size: 18px; line-height: 30px; } 
.sub-text > div > p { margin-bottom: 20px; } 
.sub-text-bye { font-weight: 500; font-size: 17px; line-height: 30px; } 

/* 비전상단 박스 */
.sub-box { width: 100%; word-break: keep-all; } 
.sub-box-title { width: 100%; font-size: 30px; line-height: 45px; font-weight: bold; padding-bottom: 10px; display: flex; align-items: center; justify-content: start; border-bottom: 1px solid #002d51; margin-bottom: 30px; } 
.sub-box-title > span { margin-right: 20px; height: 20px; width: 6px; background-color: #003876; border-radius: 5px; } 
.sub-box-detail { font-size: 20px; line-height: 33px; } 
.sub-box-detail > p { margin-bottom: 40px; } 

/* 비전도식화 */
.sub-schema { margin-top: 100px; width: 100%; } 
.sub-schema-box { width: 100%; display: flex; align-items: start; justify-content: space-between; gap: 80px; margin-bottom: 20px; } 
.schema-left { width: 290px; background-color: #e7edf5; border: 1px solid #bfc3cf; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 20px; line-height: 33px; position: relative; } 
.schema-right { width: calc(100% - 370px); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } 
.schema1 .schema-left { height: 110px; border-radius: 20px 20px 0 0; } 
.schema1 .schema-right { height: 110px; border: 1px solid #bfc3cf; border-radius: 20px 20px 0 0; color: #fff; background-color: #002d51; font-size: 26px; line-height: 33px; font-weight: bold; } 
.schema2 .schema-left { height: 110px; } 
.schema2 .schema-right { color: #003875; border: 1px solid #bfc3cf; height: 110px; font-size: 25px; line-height: 33px; font-weight: bold; } 
.schema3 .schema-left { height: 170px; } 
.schema3 .schema-right { display: flex; flex-direction: column; justify-content: space-between; height: 170px; } 
.schema3-up { width: 100%; display: flex; justify-content: space-around; align-items: start; color: #fff; position: relative; } 
.schema3-up::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 70px; height: 1px; width: 80%; background-color: #bfc3cf; } 
.schema3-up > div { width: 140px; position: relative; height: 60px; font-size: 20px; line-height: 51px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } 
.schema3-up > div > span { font-weight: 900; color: #fdb826; } 
.schema3-up > div::after { content: ""; position: absolute; left: 50%; top: 60px; width: 1px; height: 10px; background-color: #bfc3cf; } 
.schema3-up > div:nth-child(3)::after { display: none; } 
.schema3-up > div::before { width: 290px; height: 60px; z-index: -1; content: ""; position: absolute; border-radius: 50px; background-color: rgba(0, 56, 118, 0.8); top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: url('../fnc_images/main/plus_white.png'); background-repeat: no-repeat; background-position: 5px; } 
.schema3-up > div:first-child:before { background-image: none; } 
.schema3-down { width: 100%; height: 90px; display: flex; align-items: center; justify-content: center; color: #003875; font-size: 28px; line-height: 51px; font-weight: bold; background: url("../fnc_images/sub/sub_schema.png") no-repeat center; background-size: cover; border: 1px solid #bfc3cf; position: relative; } 
.schema3-down::after { content: ""; position: absolute; left: 50%; top: -21px; width: 1px; height: 21px; background-color: #bfc3cf; } 
.schema3-down > span { position: relative; display: block; z-index: 1; } 
.schema3-down > span::before { content: ""; position: absolute; width: 136px; height: 9px; opacity: 0.5; left: 50%; transform: translateX(-50%); background-color: #fdb826; bottom: 10px; border-radius: 5px; z-index: -1; } 
.schema4 .schema-left { height: 150px; } 
.schema4 .schema-right { height: 150px; display: flex; align-items: start; justify-content: space-between; gap: 15px; } 
.schema4-box { border-radius: 400px; background-color: #0075bf; width: 25%; height: 100%; display: flex; flex-direction: column; align-items: center; color: #fff; position: relative; } 
.schema4-box::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 149px; width: 1px; height: 20px; background-color: #bfc3cf; } 
.schema4-box > p { text-align: center; width: 80%; padding-top: 20px; padding-bottom: 15px; border-bottom: 1px solid #4d9fd3; margin-bottom: 25px; font-size: 16px; line-height: 24px; } 
.schema4-box > h3 { font-size: 20px; font-weight: 500; line-height: 29px; } 
.schema5 .schema-left { height: 265px; text-align: center; } 
.schema5 .schema-right { height: 265px; display: flex; align-items: start; justify-content: space-between; gap: 15px; } 
.schema5-box { width: 25%; height: 100%; display: flex; flex-direction: column; align-items: center; position: relative; text-align: center; border: 1px solid #bfc3cf; font-size: 16px; line-height: 24px; padding: 20px 25px; word-break: keep-all; } 
.schema5-box > div > h3 { font-weight: 500;margin-bottom:10px; } 
.schema5-box-up { width: 100%; padding-bottom: 15px; border-bottom: 1px dashed #bfc3cf; } 
.schema5-box-down { padding-top: 15px; } 
.schema45-mo { display: flex; flex-direction: column; align-items: center; gap: 20px; display: none; width: 100%; } 
.schema45-mo-box { width: 100%; } 
.schema45-mo-box > .schema4-box { width: 100%; height: 60px; margin-bottom: 10px; flex-direction: row; } 
.schema45-mo-box > .schema4-box > p { padding: 0; width: 50%; border-bottom: none; border-right: 1px solid #4d9fd3; margin: 0; text-align: center; } 
.schema45-mo-box > .schema4-box > h3 { width: 50%; padding: 0; text-align: center; } 
.schema45-mo-box > .schema5-box { width: 100%; height: auto; } 
.schema-line .schema-left::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 289px; height: 1px; width: 80px; background-color: #bfc3cf; } 

/* 연혁 */
.history-box { width: 100%; padding: 50px 0; border-bottom: 1px solid #d6d6d6; display: flex; } 
.history-box:last-child { border: none; } 
.history-left { width: 290px; } 
.history-left > h3 { line-height: 74px; font-weight: bold; font-size: 50px; } 
.history-right { width: calc(100% - 290px); } 
.history-right-list > li { display: flex; align-items: center; justify-content: start; padding: 10px 0; gap: 60px; } 
.history-right-list > li > h3 { font-weight: bold; } 

/* 지도박스 */
.way-box { width: 100%; display: flex; gap: 40px; height: 550px; align-items: start; justify-content: space-between; } 
.way-left { border: 1px solid #d6d6d6; width: 1120px; height: 100%; } 
.way-right { width: 542px; } 
.way-right-list { width: 100%; border-top: 1px solid #d6d6d6; } 
.way-right-list > li { padding: 40px 0; border-bottom: 1px solid #d6d6d6; } 
.way-right-list > li > h3 { font-weight: bold; margin-bottom: 23px; } 

.root_daum_roughmap_landing {width:100% !important;height:100% !important;}
.root_daum_roughmap .wrap_map{height:calc(100% - 32px) !important;}

/* 사업분야 */
.bus-intro { width: 100%; margin-bottom: 120px; text-align: center; word-break: keep-all; } 
.bus-intro.product-intro {margin-bottom:60px;}
.bus-intro > h3 { font-size: 23px; font-weight: bold; line-height: 29px; margin-bottom: 30px; } 
.bus-intro > p { font-size: 20px; line-height: 29px; margin-bottom:10px; } 
.bus-product { width: 100%; display: grid; grid-template-columns: 1fr 1fr; row-gap: 70px; column-gap: 40px; word-break: keep-all; } 
.product-box { width: 100%; display: flex; align-items: start; justify-content: center; gap: 40px; position: relative;} 
.product-box > img {position:absolute;left:50%;transform: translateX(-50%);bottom:-200px;max-width:100%;}
.product-box2 {width: 100%; display: flex; flex-direction:column; gap: 70px;} 
.product-box-left { width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; border: 9px solid #ffffff; box-shadow: 0px 0px 20px #00000029; background-color: #3255a8; flex-shrink: 0; border-radius: 50%; } 
.product-box-right { width: 100%; } 
.product-box-right > h3 { color: #003876; font-size: 30px; font-weight: bold; line-height: 45px; margin-bottom: 15px; } 
.antenna {margin-bottom:200px;}
.pl-10 { padding-left:10px;}
.mb-10 {margin-bottom:10px; }

.bus-ctf-wrap {width:100%;}
.bus-ctf-wrap > h3 {color: #003876; font-size: 45px; font-weight: bold; line-height: 45px; margin:100px 0 50px; text-align:center;}
.bus-ctf1{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr; gap:30px;}
.bus-ctf2 {display: grid;grid-template-columns: 1fr 1fr 1fr; gap:30px;}
.bus-ctf1 > img {width:100%;}
.bus-ctf2 > img {width:100%;}

/* 제품소개 */
.sub-banner.item-img1 { background: url("../fnc_images/sub/product_img_sub1.jpg") no-repeat center; background-size: cover; } 
.sub-banner.item-img2 { background: url("../fnc_images/sub/product_img_sub2.jpg") no-repeat center; background-size: cover; } 
.sub-banner.item-img3 { background: url("../fnc_images/sub/product_img_sub3.jpg") no-repeat center; background-size: cover; } 
.item-wrap { display: flex; justify-content: center; gap: 40px; height:auto;} 
.item-box { width: 33%; background-color: #e7edf5; border: 1px solid #bfc3cf; border-radius: 10px; position: relative; display: flex; flex-direction: column; align-items: center; padding: 50px; word-break: keep-all; text-align: center; } 
.item-box-bg { position: absolute; z-index: 1; right: 0; bottom: 0; width:50%;} 
.item-box-img{max-width:100%;z-index:2;margin-top:20px;}
.item-box > h4 { font-weight: bold; font-size: 20px; line-height: 29px; color: #bfc3cf; margin-bottom: 20px;z-index: 2; } 
.item-box > h3 { font-weight: bold; font-size: 23px; line-height: 34px; margin-bottom: 25px; color:#003876;z-index: 2;} 
.item-box-line { display: block; width: 100%; height: 1px; background-color: #bfc3cf; margin-bottom: 25px; flex-shrink: 0; } 
.item-box > p { display: block; z-index: 2; font-size: 18px; margin-bottom: 18px; line-height:30px;} 

.item-img-box{width:100%;display:flex; align-items: center; justify-content: center;height:auto;gap:20px;margin-top:50px;flex-wrap:wrap}
.item-img-box> img {width:47%;}
.item-img-box> img.long{width:96%;}
/* 게시판 임시 */
#user_board_list table { text-align:center; } 

/* 반응형 */
@media (max-width: 1700px){
 .sub-wrap { width: 100%; padding: 150px 30px 0; } 
 .schema-left { width: 230px; } 
 .schema-line .schema-left::after { left: 229px; } 
 .schema-right { width: calc(100% - 310px); } 
 .schema3-up > div::before { width: 17vw; } 
 .schema5-box br { display: none; } 
 .way-left { width: 100%; } 
 }
@media (max-width: 1439px){
 .schema-left { display: none; } 
 .schema-right { width: 100%; } 
 .schema3-up > div::before { width: 21vw; } 
  .item-box { padding: 20px; } 
.sub-banner {padding-left:100px;}
 }
 @media (max-width: 1279px){
 .bus-product { grid-template-columns: 1fr; } 
 }
@media (max-width: 1023px){
.item-img-box{flex-direction:column;height:auto;gap:30px;}
.item-img-box > img{width:100%;}
 .fs18-lh27 { font-size: 16px; line-height: 24px; } 
 .sub-title > h1 { font-size: 30px; line-height: 40px; } 
 .sub-wrap { padding: 100px 20px 0; } 
 .sub-banner { height: 300px; padding-left: 50px; padding-bottom: 50px; } 
 .sub-banner-box > h3 { font-size: 22px; line-height: 34px; } 
 .schema1 .schema-right,
 .schema2 .schema-right { font-size: 20px; line-height: 30px; height: 70px; text-align: center; word-break: keep-all; } 
 .schema3 .schema-right { justify-content: center; } 
 .schema3-up { flex-wrap: wrap; background-color: rgba(0, 56, 118, 0.8); } 
 .schema3-up > div { height: 40px; width: auto; padding: 0 5px; } 
 .schema3-down::after,
 .schema3-up::after,
 .schema3-up > div::after,
 .schema3-up > div::before { display: none; } 
 .schema45 { display: flex; } 
 .schema4 { width: 150px; margin-right: 20px; } 
 .schema4 .schema-right { flex-direction: column; height: auto; width: 150px; } 
 .schema4-box { width: 150px; height: 200px; border-radius: 20px; } 
 .schema4-box > p { padding-top: 40px; } 
 .schema4-box::after { display: none; } 
 .schema5 .schema-right { flex-direction: column; height: auto; width: 100%; } 
 .schema5-box { width: 100%; height: 200px; padding: 10px;justify-content: center; } 
 .schema5-box-up { padding-bottom: 10px; } 
 .schema5-box-down { padding-bottom: 10px; } 
 .history-left { width: 120px; } 
 .history-left > h3 { font-size: 32px; line-height: 40px; } 
 .history-right { width: 100%; } 
 .history-right-list > li { gap: 30px; } 
 .way-box { height: 400px; } 
 .way-right-list > li { padding: 20px 0; } 
 .sub-text > div { font-size: 16px; line-height: 26px; } 
  .item-wrap { flex-direction: column; } 
 .item-box { width: 100%; height: auto; padding: 50px; min-height: 300px; } 
 }
@media (max-width: 767px){
 .sub-title { margin-bottom: 30px; } 
 .sub-banner { padding: 0 20px; align-items: center; justify-content: center; word-break: keep-all; } 
 .sub-banner br { display: none; } 
 #notice3 .sub-banner br { display: block; } 
 .schema4,
 .schema5 { display: none; } 
 .schema45-mo { display: flex; } 
 .history-box { flex-direction: column; padding: 30px 0; } 
 .history-left > h3 { margin-bottom: 20px; } 
 .history-right-list > li { align-items: start; } 
 .history-right-list > li > h3 { flex-shrink: 0; } 
 .way-box { flex-direction: column; height: auto; } 
 .way-left { height: 400px; } 
 .way-right { width: 100%; } 
 .sub-text { flex-direction: column; } 
 .sub-text > div { width: 100%; } 
 .bus-intro > h3 { font-size: 20px; } 
 .bus-intro > p { font-size: 16px; line-height: 25px; margin-bottom:20px;} 
 .product-box { flex-direction: column; align-items: center; } 
 .product-box-left { width: 150px; height: 150px; } 
 .product-box-right { padding: 0 20px; } 
 .product-box-right > h3{text-align:center;}
  .sub-banner-box > h3 > span::before { display:none; } 
  .bus-ctf1{grid-template-columns: 1fr 1fr;}
.bus-ctf2 {grid-template-columns: 1fr 1fr;}
 }
@media (max-width: 479px){
 .fs18-lh27 { font-size: 15px; line-height: 24px; } 
 .sub-title > h1 { font-size: 24px; line-height: 34px; } 
 .sub-box-title { font-size: 24px; line-height: 34px; } 
 .sub-box-detail { font-size: 16px; line-height: 26px; } 
 .schema1 .schema-right,
 .schema2 .schema-right { font-size: 18px; line-height: 28px; } 
 .schema3-up > div { font-size: 18px; line-height: 28px; } 
 .schema45-mo-box > .schema4-box > h3 { font-style: 18px; line-height: 28px; } 
.sub-text{gap: 20px;}
 .bus-product { row-gap: 0; } 
 .product-box-right { padding: 0; height: auto; } 
 .product-box > img {bottom:-120px;}
 }