@charset "UTF-8";@import url("/fnc_css/font/font.css");
.sub-banner { width: 100%; height: 320px; display: flex; align-items: center; justify-content: center;}
.sub-banner1{background:url("/fnc_images/sub/sub_banner1.jpg")no-repeat center/cover;}
.sub-banner2{background:url("/fnc_images/sub/sub_banner2.jpg")no-repeat center/cover;}
.sub-banner3{background:url("/fnc_images/sub/sub_banner3.jpg")no-repeat center/cover;}
.sub-banner4{background:url("/fnc_images/sub/sub_banner4.jpg")no-repeat center/cover;}
.sub-banner > h2 { font-size: 40px; line-height: 48px; font-weight: 500; color: #fff; }
.sub-wrap { display: flex; gap: 30px; width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 30px; }
.sub-side { width: 330px; flex-shrink: 0; transform: translateY(-50px); }
.sub-side-top { width: 100%; height: 250px; border-radius: 50px; box-shadow: 0px 0px 10px #00000029; background-color: #233d4d; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding-top: 50px; margin-bottom: 30px; }
.sub-side-top > h3 { color: #fff; font-size: 32px; line-height: 40px; font-weight: 500; }
.sub-side > a { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 70px; border-bottom: 1px solid #dcdcdc; padding: 0 35px; color: #b6b6b6; font-size: 22px; line-height: 30px; font-weight: 500; }
.sub-side > a:has(+ .active),
.sub-side > a:has(+ :hover) { border: none; }
.sub-side > a:hover,
.sub-side > a.active { background-color: #D3E498; color: #fff; box-shadow: 0px 0px 10px #00000029; border-radius: 20px; border: none; }

.sub-side > a > span { display: block; width: 12px; height: 12px; border-radius: 50px; background-color: #b7b7b7; }
.sub-side > a:hover > span,
.sub-side > a.active > span { background-color: #fff; }
.sub-main { width: 100%; padding: 70px 0; }
.sub-main .main-title { margin-bottom: 50px; }
/* 인사말 */
.hello-img { width: 100%; height: 450px; margin-bottom: 50px; border-radius: 30px; overflow: hidden; }
.hello-img > img { object-fit: cover; width: 100%; height: 100%; }
.hello-text > h4 { font-size: 20px; line-height: 28px; font-weight: 500; margin-bottom: 30px; }
.hello-text > p { font-size: 18px; line-height: 26px; margin-bottom: 30px; }
.hello-text > h3 { text-align: right; font-weight: 500; font-size: 18px; line-height: 30px; margin-top: 50px; position: relative; }
.hello-text > h3 > span { margin-left: 20px; font-size: 23px; line-height: 30px; }

/* 비전 */
.vision-top { width: 100%; padding: 40px; color: #fff; background:url("/fnc_images/sub/vision_bg1.jpg")no-repeat center/cover; text-align: center; border-radius: 30px; overflow: hidden; margin-bottom: 50px; }
.vision-top > h2 { font-weight: bold; font-size: 24px; line-height: 30px; margin-bottom: 30px; }
.vision-top > h3 { font-weight: 500; font-size: 22px; line-height: 28px; margin-bottom: 30px; }
.vision-top > p { font-size: 18px; line-height: 26px; }
.vision-bot { width: 100%; border-radius: 30px; overflow: hidden; padding: 70px; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 70px; row-gap: 50px; background:url("/fnc_images/sub/vision_bg2.jpg")no-repeat center/cover; }
.vision-bot > div { background-color: #fff; border-radius: 30px; padding: 40px 30px; text-align: center; }
.vision-bot > div > h3 { font-size: 24px; font-weight: 500; line-height: 30px; margin-bottom: 30px; }
.vision-bot > div > p { font-size: 18px; line-height: 28px; }
/* 오시는길 */
.way { width: 100%; height: 600px; margin-bottom: 50px; }
.root_daum_roughmap_landing { width: 100% !important; height: 100% !important; }
.root_daum_roughmap .wrap_map { height: calc(100% - 32px) !important; }
.way-bot { width: 100%; padding: 50px; background-color:#D3E498; box-shadow: 0px 0px 10px #00000029; border-radius: 20px; position:relative;}
.way-bot::after{content:"";position:absolute;right:30px;bottom:30px;width:100px;height:100px;background:url("/fnc_images/sub/way_logo.svg")no-repeat center/contain;}
.way-bot h3 { color: #fff; font-size: 24px; line-height: 30px; font-weight: bold; margin-bottom: 10px; }

.way-bot p { font-size: 20px; line-height: 26px; font-weight:500;color:#484848;}
.way-bot > div {display: flex;gap:50px;margin-top:50px;}
/* 사업분야 */
.bus-box { display: flex; align-items: center; gap: 50px; margin-bottom: 100px; }
.bus-box-left { flex-shrink: 0; width: 360px; height: 360px; border-radius: 50%; overflow: hidden; background-color: yellowgreen; }
.bus-box-left > img { width: 100%; height: 100%; object-fit: cover; }
.bus-box-right { width: 100%; }
.bus-box-right > h2 { font-size: 50px; font-weight: 500; letter-spacing: 2px; line-height: 58px; margin-bottom: 5px; color: #adc178; }
.bus-box-right > h3 { font-size: 24px; line-height: 30px; margin-bottom: 25px; font-weight: 500; color: #adc178;}
.bus-box-right > p { font-size: 18px; line-height: 28px; }
.bus-box-right > p.pl20 { padding-left: 20px; }
.bus-box-right > p.mt10 { margin-top: 20px; font-weight:500;position:relative;padding-left:20px;}
.bus-box-right > p.mt10::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:#ADC178;}

/* 제품안내 */
.product-img { width: 100%; height: 450px; border-radius: 150px; overflow: hidden; }
.product-img > img { width: 100%; height: 100%; object-fit: cover; }
.product-text { width: 100%; padding: 40px; border-radius: 90px; background: #d3e498; text-align: center; margin: 30px 0 50px; }
.product-text > p { font-size: 18px; line-height: 30px; font-weight: 500; }
.product-box { width: 100%; padding: 40px 0; border-radius: 20px; }
.product-box > h2 { font-size: 50px; font-weight: 500; letter-spacing: 2px; line-height: 58px; margin-bottom: 5px; color: #adc178; }
.product-box > h3 { font-size: 24px; line-height: 30px; margin-bottom: 25px; font-weight: 500; color: #adc178; }
.product-box > h3 > span { font-size: 50px; margin-right: 15px; color: #adc178; letter-spacing: 2.5px; }
.product-box > p { font-size: 18px; line-height: 28px; margin-bottom: 10px; position: relative; padding-left: 20px; }
.product-box > p::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #adc178; }
.product-box > p.bold { margin-top: 20px; font-weight: 500; }
.product-box > p.bold::before { display: none; }
.product-flex { display: flex; gap: 30px; }

.product > h3 { font-size: 24px; line-height: 30px; margin-bottom: 25px; font-weight: 500; color: #adc178; margin-top: 80px; }
.product > h3 > span { font-size: 50px; margin-right: 15px; color: #adc178; letter-spacing: 2.5px; }
.product-link { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 90px; row-gap: 70px; }
.product-link > a { width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; }
.product-link > a > span { display: block; width: 100%; height: 450px; border-radius: 40px; overflow: hidden; border: 1px solid #eee; transition: all 0.2s;}
.product-link > a:hover > span{filter:brightness(0.8);}
.product-link > a > span > img { width: 100%; height: 100%; object-fit: cover; }
.product-link > a > p { font-size: 20px; line-height: 28px; font-weight: 500; }
/* 인증 */
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cert-item { width: 100%; border: 1px solid #ccc; padding: 10px; }
.cert-item > p { font-size: 18px; line-height: 26px; margin-top: 10px; text-align: center; }
/* 연혁 */
.history { display: flex; gap: 65px; }
.history-left { flex-shrink: 0; width: 330px; border-radius: 20px;  background:url("/fnc_images/sub/history_bg.png")no-repeat center/cover;}
.history-right { width: 100%; }
.history-box { width: 100%; border-left: 2px dashed #D3E498; padding-left: 40px; padding-bottom: 50px; position: relative; }
.history-box::after { content: ""; position: absolute; left: -9px; top: 0; width: 16px; height: 16px; border-radius: 50%; background-color: #fff; border: 3px solid #D3E498; }
.history-box > h3 { font-size: 25px; line-height: 29px; font-weight: 500; color: #adc178; margin-bottom: 10px; }
.history-box > p { font-size: 18px; line-height: 26px; margin-bottom: 10px; font-weight: 500; display: flex; gap: 10px; }
.history-box > p > span { width: 30px; color: #233d4d; }

/* esg */
.esg > h3 { font-size: 22px; line-height: 30px; font-weight: 500; margin-bottom: 60px; text-align: center; }
.esg > p { font-size: 18px; font-weight: 500; line-height: 26px; margin-bottom: 60px; text-align: center; }
.esg > h4 { text-align: right; font-size: 18px; line-height: 28px; font-weight: 500; margin-bottom: 20px; }
.esg > h4 > span { font-size: 24px; line-height: 32px; font-weight: 500; margin-left: 20px; }
.esg-flex { width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 40px; }
.esg-flex > span { display: block; width: 30px; height: 1px; background-color: #cccccc; flex-shrink: 0; }
.esg-flex > div {width:100%; max-width: 350px; padding: 30px 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; border: 1px solid #ccc; border-radius: 20px; text-align: center; }
.esg-flex > div > p { font-size: 16px; line-height: 26px; }
/* 약관 */
.terms > h3 {font-size:20px;line-height:30px;margin-bottom:20px;margin-top:30px;font-weight:500;}
.terms > p{font-size:16px;line-height:26px;margin-bottom:10px;}
/* 반응형 */
@media (max-width: 1439px){
 .history-left { display: none; }
  .sub-side { width: 280px; }

 .sub-side > a { font-size: 20px; line-height: 28px; height: 60px; }
 .product-link{gap:40px;}
 .product-link > a > span{height:400px;}
 }
@media (max-width: 1279px){

 .vision-bot { padding: 40px; column-gap: 20px; row-gap: 40px; grid-template-columns: 1fr; }
 .way { height: 450px; }
 .way-bot { padding: 30px; }
 .bus-box { gap: 30px; flex-direction: column; }
 .bus-box-left { width: 320px; height: 320px; }
 .bus-box-right > h2 { font-size: 32px; line-height: 40px; }
 .bus-box-right > h3 { font-size: 22px; line-height: 30px; }
 .product-img { height: 400px; }

 .cert-grid { grid-template-columns: repeat(2, 1fr); }
 .esg-flex{flex-direction: column;margin-bottom:30px;gap:30px;}
  .esg-flex > div {flex-direction: row;max-width:100%;padding:25px;}
    .esg-flex > div > img {width:80px;}
  .esg-flex > span {display:none;}
   .product-link > a > span{height:350px;}
 }
@media (max-width: 1023px){
 .sub-wrap { padding: 0 20px; }
 .sub-banner { height: 250px; }
 .sub-banner > h2 { font-size: 28px; line-height: 36px; }
 .sub-main { padding: 50px 0; }
 .sub-side { display: none; }
 .hello-img { height: 400px; }
 .hello-text > h4 { font-size: 18px; line-height: 26px; }
 .hello-text > p { font-size: 16px; line-height: 24px; }
 .hello-text > h3 > span { font-size: 20px; line-height: 28px; }
 .vision-top { padding: 30px; }
 .vision-bot { padding: 30px; }
 .vision-bot > div { padding: 30px 20px; }
 .vision-top > h2 { font-size: 22px; line-height: 30px; }
 .vision-top > h3 { font-size: 20px; line-height: 28px; }
 .vision-bot > div > h3 { font-size: 20px; line-height: 28px; }
 .way-bot > h3 { font-size: 20px; line-height: 28px; }
 .way-bot > p { font-size: 18px; line-height: 26px; }
 .bus-box-right > h2 { font-size: 28px; line-height: 38px; }
 .bus-box-right > h3 { font-size: 20px; line-height: 28px; }
 .bus-box-left { width: 300px; height: 300px; }
 .product-box > h3 { font-size: 20px; line-height: 28px; }

 .history-box { padding-left: 20px; }
 .product-flex{flex-direction:column;}

 .way-bot > div {flex-direction:column;}
 .product-text{padding:30px;    border-radius: 50px;}
 .product-box > h3 > span{font-size:32px;}
 .esg > h3{font-size:20px;}
 }
@media (max-width: 767px){
 .sub-banner { height: 200px; }
 .hello-img { height: 300px; }
 .vision-top { padding: 30px 20px; }
 .vision-bot { padding: 0; background: none; }
 .vision-bot > div { border: 1px solid #ddd; }
 .way { height: 350px; margin-bottom: 30px; }
 .bus-box-left { width: 250px; height: 250px; }
 .bus-box-right > p { font-size: 16px; line-height: 26px; }
 .product-img { height: 300px; }
 .way-bot::after {display:none;}
 .product-text{padding:0;background:transparent;}
  .product-link{gap:40px;    grid-template-columns:1fr;}
 .product-link > a > span{height:300px;}
 .product-link > a > p{font-size:18px;}
 }
@media (max-width: 479px){
 .product-img { height: 250px; }
 }