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

.fs30-lh45-bold { font-size: 30px; font-weight: bold; line-height: 45px; } 
.fs18-lh30 { font-size: 18px; line-height: 30px; } 

/* 서브배너 */
.sub-banner { font-family: "Noto Sans KR", serif; width: 100%; height: 415px; background: url("../fnc_images/sub/sub_banner1.jpg") no-repeat center; background-size: cover; } 
.sub-banner-wrap { width: 100%; height: 100%; position: relative; display: block; } 
.sub-banner-box { position: absolute; top: 180px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; width: 100%; } 
.sub-banner-box > h1 { font-size: 40px; line-height: 59px; font-weight: bold; margin-bottom: 24px; } 
.sub-banner-box > p { font-size: 17px; line-height: 25px; } 

/* 서브 본문 */
.sub-wrap { font-family: "Noto Sans KR", serif; width: 1400px; height: auto; position: relative; margin: 0 auto; margin-bottom: 80px; display: flex; } 
/* 사이드바 */
.side-bar { flex-shrink: 0; width: 290px; } 
.side-bar-menu > li { border-bottom: 1px solid #c4c4c4; } 
.side-bar-menu > li > a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: start; padding: 0 20px; height:65px;font-size: 17px; line-height: 25px; text-align:center;word-break:keep-all;} 
.side-bar-menu > li.active > a { font-weight: bold; color: #0058a6; background-color: #f4f7fe; } 

/* 서브타이틀*/
.main { width: calc(100% - 290px); padding-left: 40px; position: relative; display: block; } 
.main-title { width: 100%; margin-top: 70px; display: flex; align-items: end; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid #c4c4c4; } 
.main-title > h3 { font-size: 35px; line-height: 52px; font-weight: bold; } 
.main-title-way { display: flex; align-items: center; justify-content: end; gap: 9px; color: #464646; } 
.icon-home { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid #c4c4c4; border-radius: 50%; } 
.main-title-way-last { color: #111; } 
/* 서브 타이틀 끝 */

/* 서브내용 */
.hello-wrap { width: 100%; display: flex; padding-top: 40px; align-items: start; justify-content: space-between; gap: 30px; } 
.hello-title { word-break: keep-all; margin-bottom: 50px; } 
.hello-detail { margin-bottom: 30px; } 
.hello-boss { margin-top: 20px; display: flex; align-items: center; justify-content: end; gap: 25px; } 
.hello-boss > p { font-size: 17px; line-height: 30px; } 
.hello-boss > h3 { font-weight: 600; line-height: 30px; font-size: 21px; } 
.business-wrap { padding-top: 60px; } 
.bus-box { width: 100%; display: flex; align-items: start; justify-content: start; gap: 50px; padding-bottom: 100px;} 
.bus-box > div:first-child {    width: 430px;    display: flex;    align-items: center;    justify-content: center;}
.bus-box > div > img {max-width:100%;max-height:100%;}
.bus-box-text { width: calc(100% - 480px); } 
.bus-box-text > h3 { width: 100%; font-size: 35px; line-height: 52px; font-weight: bold; color: #05276b; padding-bottom: 10px; border-bottom: 1px dotted #111; }  
.bus-box-text > h4 {display: flex; align-items: center;font-size:22px;font-weight:bold;line-height:30px;margin-top:30px;}
.bus-box-text > h4 >span{margin-right:10px;width:4px;height:20px;background-color:#05276b;border-radius:20px;}
.bus-box-text-list {padding-top:20px;}
.bus-box-text-list > li { list-style: square; } 
.bus-box-text-list > li::marker { font-size: 4px; color: #05276b; width: 4px; height: 4px; } 
.bus-box-text-imgbox {width:100%;display:flex;margin:10px 0;align-items: center;max-height:300px;}
.bus-box-text-imgbox > div {max-width:50%;}
.bus-box-text-imgbox img {max-height:300px;max-width:100%;}
.product-box{width:100%; border-top:1px dashed #707070;padding:40px 0;}
.product-box > p {margin-bottom:10px;}
.product-box > h3{font-size:22px;font-weight:bold;line-height:40px;margin-bottom:20px;display: flex;align-items: center;}
.product-box > h3 > span{margin-right:10px;width:4px;height:20px;background-color:#05276b;border-radius:20px;}

.portfolio {display: grid !important;grid-template-columns: 1fr 1fr; width:100% !important;;gap:20px;}
.portfolio {width:100%}
/* 오시는 길 */
.way-wrap{padding-top:60px;}
#map{width:100%; height:600px;border: 1px solid #c4c4c4;margin-bottom:50px;}
.map-info {  display: flex;  align-items: center;  gap: 10%;}
.map-info > div > h3 {  font-size: 20px;  font-weight: bold;  margin-bottom: 20px;display: flex;align-items: center;}
.map-info > div> h3 > span{margin-right:10px;width:4px;height:20px;background-color:#05276b;border-radius:20px;}
.map-info > div > p{line-height: 24px;font-size:18px;}

.root_daum_roughmap_landing {width:100% !important;height:100% !important;}
.root_daum_roughmap .wrap_map{height:calc(100% - 32px) !important;}
/* 연혁 */
.history-box { padding-top: 45px; padding-bottom: 15px; border-bottom: 1px dashed #d6d6d6; word-break: keep-all; } 
.history-box-left { width: 240px; } 
.history-box-left > h2 { font-size: 50px; line-height: 74px; color: #05276b; font-weight: bold; } 
.history-box-right { padding-top: 20px; } 
.history-box-right > h3 { font-size: 20px; line-height: 29px; font-weight: bold; color: #707070; margin-bottom: 5px; } 
.history-box-right > li { list-style: square; margin-bottom: 25px; font-size: 24px; line-height: 40px;font-weight:bold; transform: translateX(15px); } 
.history-box-right > li::marker { font-size: 4px; color: #05276b; } 

.customer{  display: grid;  grid-template-columns: 1fr 1fr 1fr;  gap: 40px;    justify-items: center;    align-items: center;padding-top:50px;}
.customer2{  display: grid;  grid-template-columns: 1fr 1fr 1fr;  gap: 70px;    justify-items: center;    align-items: end;padding-top:50px;}
.customer2 li{width:100%;display:flex; align-items: center; justify-content: center; gap:25px;flex-direction:column; word-break:keep-all;text-align:center;}
.customer2 li img {max-width:100%;width:auto;}
.customer2 li p {font-size:18px;font-weight:500; margin-bottom:20px;}
.customer img {width:70%;}
/* 비전&미션 */
.vision-box { display: flex; align-items: center; justify-content: start; padding-top: 40px; word-break:keep-all;} 
.vision-box-left { width: 110px; font-weight: bold; line-height: 37px; font-size: 25px; flex-shrink: 0; } 
.vision-box-line { width: 80px; height: 1px; border-top: 1px dashed #05276b; margin-right: 40px; flex-shrink: 0; } 
.vision-box-vision {padding:0 20px; border-radius: 54px; width: 100%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: bold; line-height: 33px; text-align: center; color: #fff; background-color: #203864; border: 1px solid #707070; height: 110px; } 
.vision-box-misson { width: 100%; background: url("../fnc_images/sub/vision_bg.png") no-repeat center; background-size: contain; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; font-size: 22px; font-weight: bold; line-height: 33px; text-align: center; color: #3f5eaa; } 
.core-box { align-items: start; width: 100%; margin-top: 70px; } 
.core-box > .vision-box-left { padding-top: 50px; } 
.core-box > .vision-box-line { margin-top: 70px; } 
.vision-box-core { width: 100%; } 
.core-detail { width: 100%; display: flex; align-items: center; justify-content: start; margin-bottom: 40px; } 
.core-detail-left { flex-shrink: 0; width: 130px; height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-shadow: 0px 0px 12px #00000026; border-radius: 50%; position: relative; margin-right: 40px; } 
.core-detail-left::after { content: ""; width: 30px; height: 1px; background-color: #000; position: absolute; right: -30px; top: 50%; transform: translateY(-50%); } 
.core1 .core-detail-left { background-color: #5a81b5; } 
.core2 .core-detail-left { background-color: #5ab5a7; } 
.core3 .core-detail-left { background-color: #87d9a0; } 
.core-detail-left > img { height: 55px; } 
.core-detail-left > p { font-weight: bold; font-size: 18px; line-height: 27px; color: #fff; } 
.core-detail-right { width: 100%; padding-left: 40px; padding-right: 10px; border-radius: 20px; display: flex; flex-direction: column; justify-content: center; gap: 8px; position: relative; height: 130px; word-break: keep-all; } 
.core1 .core-detail-right { border: 3px solid #5a81b5; } 
.core2 .core-detail-right { border: 3px solid #5ab5a7; } 
.core3 .core-detail-right { border: 3px solid #87d9a0; } 
.core-detail-right > h3 { font-weight: bold; font-size: 18px; line-height: 27px; } 
.core-detail-right > p { font-size: 16px; line-height: 24px; display: flex;  align-items: center; justify-content: center;} 
.core-detail-right > p > img {height:100px;}
.core-detail-right > img { position: absolute; left: -11px; } 

/* 게시판 임시 */
#user_board_whole { margin-top: 50px !important; } 
#user_board_list table { text-align: center; } 

/* 반응형 */
@media (max-width: 1440px){
 .sub-wrap { width: 100%; padding: 0 30px; } 
 .side-bar { width: 230px; } 
 .main { width: calc(100% - 230px); padding-left: 20px; } 
 .hello-right > img { width: 300px; } 
 .bus-box > img { width: 380px; } 
 .bus-box-text { width: calc(100% - 380px); } 
 }
@media (max-width: 1023px){
 .fs30-lh45-bold { font-size: 24px; line-height: 34px; } 
 .fs18-lh30 { font-size: 16px; line-height: 26px; } 
 .sub-wrap { padding: 0; flex-direction: column; } 
 .side-bar { width: 100%; } 
 .side-bar-menu { width: 100%; display: flex; } 
 .side-bar-menu > li { width: 100%; } 
 .side-bar-menu > li > a { justify-content: center; } 
 .main { padding: 0 20px; width: 100%; } 
 .main-title { margin-top: 50px; } 
 .bus-box { gap: 30px; } 
 .bus-box > img { width: 300px; } 
 .bus-box-text { width: calc(100% - 300px); } 
 #map{height:400px;}
 .map-info{flex-direction:column;align-items: flex-start;}
 .map-info > div {width:100%;margin-bottom:30px;}
 }
@media (max-width: 767px){
 .vision-wrap {padding-top:50px;}
 .hello-wrap { flex-direction: column; gap: 0; padding-top: 60px; } 
 .hello-left { width: 100%; } 
 .hello-right { width: 100%; display: flex; flex-direction: column; align-items: end; justify-content: end; } 
 .side-bar-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } 
 .main-title > h3 { font-size: 28px; line-height: 40px; } 
 .bus-box { flex-direction: column-reverse;padding-bottom:40px; } 
 .bus-box > img { width: 100%; } 
 .bus-box-text { width: 100%; } 
 .bus-box-text-list { padding-left: 20px; } 
 .history-box-right{padding-top:30px;}
 .vision-box {padding-top:30px;}
 .vision-box-left,
 .vision-box-line { display: none; } 
 .vision-box-vision,
 .vision-box-misson { font-size: 17px; line-height: 30px; } 
  .main-title { position: relative; } 
 .main-title-way { font-size: 14px; position: absolute; right: 0; bottom: -40px; } 
 .product-box>div>img{max-width:100%;}
 .customer{ grid-template-columns: 1fr 1fr;padding-top:100px;}
 .customer2{ grid-template-columns: 1fr 1fr;padding-top:100px;gap:40px;}
 }
@media (max-width: 479px){
 .customer{ grid-template-columns: 1fr 1fr;padding-top:100px;gap:20px;}
  .customer2{ grid-template-columns: 1fr 1fr;padding-top:100px;gap:30px;}
  .customer2 li p{font-size:16px;}
 .customer img{width:100%;}
.portfolio{grid-template-columns: 1fr ;}
.bus-box > div:first-child {width:100%;}
 .sub-banner {height:300px;}
 .sub-banner-box{top:110px;}
 .icon-home { width: 25px; height: 25px; } 
 .fs30-lh45-bold { font-size: 20px; line-height: 30px; } 
 .bus-box-text > h3 {font-size: 28px; line-height: 36px;}
  .vision-box {padding-top:100px;}
 .vision-box-vision { height: 120px; border-radius: 100px; letter-spacing: -1px; font-weight: 500; } 
 .vision-box-misson { letter-spacing: -1px; font-weight: 500; } 
 .core-box { margin: 0; } 
 .core-detail { flex-direction: column; } 
 .core-detail-left { margin: 0; margin-bottom: 30px; } 
 .core-detail-left::after { width: 1px; height: 30px; top: unset; right: unset; left: 50%; bottom: -30px; transform: translateX(-50%); } 
 .core-detail-right > img { left: 50%; transform: translateX(-50%); top: -11px; } 
 .core-detail-right { padding: 10px; text-align: center; height: 150px; } 

 }