/* =========================================================
   FARO CREAFORM Á¦Á¶»ç ¼Ò°³
========================================================= */


.mf-page{
  font-family:'Noto Sans KR','Malgun Gothic',sans-serif;
  color:#17212b;
  word-break:keep-all;
  overflow:hidden;
}


.mf-page *{box-sizing:border-box}


.mf-container{
  width:calc(100% - 40px);
  max-width:1180px;
  margin:0 auto;
}


.mf-section{padding:105px 0}


.mf-section-label{
  display:block;
  margin-bottom:16px;
  color:#2572b8;
  font-size:13px;
  font-weight:800;
  letter-spacing:.12em;
}


.mf-section-head{
  max-width:760px;
  margin-bottom:52px;
}


.mf-section-head.mf-center{
  margin:0 auto 56px;
  text-align:center;
}


/* ¼½¼Ç Á¦¸ñ - ±âÁ¸ »çÀÌÆ® h4 ½ºÅ¸ÀÏ ¿µÇâ ¹æÁö */
.mf-page .mf-section-head h4,
.mf-page .mf-portfolio-intro h4{
  margin:0 !important;
  padding:0 !important;
  color:#17212b !important;
  font-family:'Noto Sans KR','Malgun Gothic',sans-serif !important;
  font-size:40px !important;
  font-weight:400 !important;
  line-height:1.38 !important;
  letter-spacing:-1.7px !important;
}


.mf-page .mf-section-head h4 strong,
.mf-page .mf-portfolio-intro h4 strong{
  color:inherit !important;
  font-size:inherit !important;
  font-weight:800 !important;
  line-height:inherit !important;
}


.mf-section-head>p{
  margin:22px 0 0;
  color:#667482;
  font-size:16px;
  line-height:1.9;
}




/* =========================================================
   HERO
========================================================= */


.mf-hero{
  position:relative;
  padding:110px 0 105px;
  background:linear-gradient(135deg,#082038 0%,#0b3352 55%,#134d77 100%);
  overflow:hidden;
}


.mf-hero:before{
  content:'';
  position:absolute;
  width:620px;
  height:620px;
  right:-180px;
  top:-250px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
}


.mf-hero:after{
  content:'';
  position:absolute;
  width:420px;
  height:420px;
  right:30px;
  bottom:-310px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:50%;
}


.mf-hero .mf-container{
  position:relative;
  z-index:2;
}


.mf-eyebrow{
  margin-bottom:24px;
  color:#63b8ff;
  font-size:14px;
  font-weight:800;
  letter-spacing:.16em;
}


/* HERO Á¦¸ñ - Èò»ö + ÆĶõ»ö °­Á¶ °íÁ¤ */
.mf-page .mf-hero h4{
  max-width:820px;
  margin:0 !important;
  padding:0 !important;
  color:#fff !important;
  font-family:'Noto Sans KR','Malgun Gothic',sans-serif !important;
  font-size:56px !important;
  font-weight:300 !important;
  line-height:1.24 !important;
  letter-spacing:-2px !important;
}


.mf-page .mf-hero h4 strong{
  display:block;
  margin-top:8px;
  color:#59b8ff !important;
  font-size:inherit !important;
  font-weight:800 !important;
  line-height:inherit !important;
}


.mf-hero-desc{
  max-width:700px;
  margin:30px 0 0;
  color:rgba(255,255,255,.84);
  font-size:17px;
  line-height:1.9;
}


.mf-hero-btns{
  display:flex;
  gap:12px;
  margin-top:38px;
}


.mf-btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  min-width:190px;
  height:56px;
  padding:0 22px;
  border-radius:8px;
  font-size:14px;
  font-weight:700;
  text-decoration:none!important;
  transition:.25s;
}


.mf-btn span{
  margin-left:26px;
  font-size:18px;
}


.mf-btn-primary{
  background:#fff;
  color:#102d45!important;
}


.mf-btn-primary:hover{
  background:#eaf4fb;
  transform:translateY(-2px);
}


.mf-btn-line{
  border:1px solid rgba(255,255,255,.34);
  color:#fff!important;
  background:rgba(255,255,255,.04);
}


.mf-btn-line:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.75);
}




/* =========================================================
   BRAND
========================================================= */


.mf-brand{background:#fff}


.mf-brand-grid{
  display:grid;
  grid-template-columns:1fr 80px 1fr;
  align-items:stretch;
  margin-top:54px;
}


.mf-brand-card{
  position:relative;
  padding:45px;
  border:1px solid #dfe7ed;
  border-radius:18px;
  background:#fff;
}


.mf-brand-no{
  position:absolute;
  right:28px;
  top:23px;
  color:#d7e2ea;
  font-size:42px;
  font-weight:800;
}


.mf-brand-name{
  margin-bottom:34px;
  color:#176dad;
  font-size:24px;
  font-weight:900;
  letter-spacing:.03em;
}


.mf-page .mf-brand-card h5{
  margin:0 0 16px !important;
  padding:0 !important;
  color:#182633 !important;
  font-family:'Noto Sans KR','Malgun Gothic',sans-serif !important;
  font-size:22px !important;
  font-weight:800 !important;
  line-height:1.4 !important;
}


.mf-brand-card p{
  margin:0;
  color:#687785;
  font-size:15px;
  line-height:1.9;
}


.mf-brand-plus{
  display:flex;
  align-items:center;
  justify-content:center;
}


.mf-brand-plus span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#eef5fa;
  color:#176dad;
  font-size:27px;
  font-weight:300;
}


.mf-brand-result{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin-top:36px;
  padding:25px 30px;
  border-radius:12px;
  background:#f4f8fb;
  color:#7a8995;
  font-size:17px;
  font-weight:700;
}


.mf-result-mark{color:#adc0cd}
.mf-result-arrow{margin:0 8px;color:#9eb0bd}


.mf-brand-result strong{
  color:#176dad;
  font-size:21px;
  font-weight:900;
}




/* =========================================================
   VALUE
========================================================= */


.mf-value{background:#f5f8fa}


.mf-value-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}


.mf-value-card{
  position:relative;
  min-height:270px;
  padding:38px 30px 34px;
  border:1px solid #e1e8ed;
  border-radius:15px;
  background:#fff;
  transition:.25s;
}


.mf-value-card:before{
  content:'';
  display:block;
  width:36px;
  height:3px;
  margin-bottom:36px;
  border-radius:3px;
  background:#176dad;
}


.mf-value-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 35px rgba(26,62,89,.08);
}


.mf-value-num{
  position:absolute;
  right:24px;
  top:24px;
  color:#d7e1e8;
  font-size:13px;
  font-weight:800;
}


.mf-page .mf-value-card h5{
  margin:0 0 7px !important;
  padding:0 !important;
  color:#182633 !important;
  font-family:'Noto Sans KR','Malgun Gothic',sans-serif !important;
  font-size:19px !important;
  font-weight:800 !important;
  line-height:1.4 !important;
}


.mf-page .mf-value-subtitle{
  margin:0 0 24px !important;
  padding:0 !important;
  color:#176dad !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.5 !important;
}


.mf-value-card p{
  margin:0;
  color:#70808d;
  font-size:14px;
  line-height:1.85;
}




/* =========================================================
   PORTFOLIO
========================================================= */


.mf-portfolio{background:#fff}


.mf-portfolio-intro{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:80px;
  align-items:end;
  margin-bottom:58px;
}


.mf-portfolio-intro>p{
  margin:0;
  padding-bottom:4px;
  color:#687785;
  font-size:15px;
  line-height:1.9;
}


.mf-product-list{
  border-top:1px solid #17212b;
}


.mf-product-item{
  display:grid;
  grid-template-columns:75px 1fr 50px;
  align-items:center;
  min-height:105px;
  border-bottom:1px solid #dce4e9;
  color:inherit;
  text-decoration:none!important;
  transition:.2s;
}


.mf-product-num{
  color:#98a8b4;
  font-size:13px;
  font-weight:700;
}


.mf-page .mf-product-text h5{
  margin:0 0 7px !important;
  padding:0 !important;
  color:#192734 !important;
  font-family:'Noto Sans KR','Malgun Gothic',sans-serif !important;
  font-size:20px !important;
  font-weight:800 !important;
  line-height:1.4 !important;
  transition:.2s;
}


.mf-product-text p{
  margin:0;
  color:#81909c;
  font-size:14px;
}


.mf-product-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#f1f5f7;
  color:#526878;
  font-size:18px;
  transition:.2s;
}


.mf-product-item:hover{
  padding-left:12px;
}


.mf-page .mf-product-item:hover .mf-product-text h5{
  color:#176dad !important;
}


.mf-product-item:hover .mf-product-arrow{
  background:#176dad;
  color:#fff;
}




/* =========================================================
   QUALITY
========================================================= */


.mf-quality{
  background:#0d293f;
}


.mf-quality .mf-section-label{
  color:#6eb8ed;
}


/* ¾îµÎ¿î ¹è°æ¿¡¼­ Á¦¸ñ Èò»ö °íÁ¤ */
.mf-page .mf-quality .mf-section-head h4,
.mf-page .mf-quality .mf-section-head h4 strong{
  color:#fff !important;
}


.mf-quality .mf-section-head>p{
  color:rgba(255,255,255,.68);
}


.mf-quality-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
}


.mf-quality-card{
  padding:35px 27px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:13px;
  background:rgba(255,255,255,.035);
}


.mf-quality-card strong{
  display:block;
  margin-bottom:10px;
  color:#fff;
  font-size:22px;
  font-weight:800;
}


.mf-quality-card span{
  display:block;
  margin-bottom:24px;
  color:#70b9ec;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}


.mf-quality-card p{
  margin:0;
  color:rgba(255,255,255,.68);
  font-size:14px;
}




/* =========================================================
   CTA
========================================================= */


.mf-cta{
  padding:90px 0;
  background:#eef5f9;
}


.mf-cta-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:50px;
}


.mf-cta-text>span{
  display:block;
  margin-bottom:18px;
  color:#176dad;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
}


.mf-page .mf-cta-text h4{
  margin:0 !important;
  padding:0 !important;
  color:#162532 !important;
  font-family:'Noto Sans KR','Malgun Gothic',sans-serif !important;
  font-size:38px !important;
  font-weight:400 !important;
  line-height:1.4 !important;
  letter-spacing:-1.5px !important;
}


.mf-page .mf-cta-text h4 strong{
  color:#162532 !important;
  font-size:inherit !important;
  font-weight:800 !important;
  line-height:inherit !important;
}


.mf-cta-text p{
  max-width:670px;
  margin:22px 0 0;
  color:#667783;
  font-size:15px;
  line-height:1.85;
}


.mf-cta-action{
  flex:0 0 auto;
}


.mf-cta-action a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:190px;
  height:62px;
  padding:0 23px;
  border-radius:8px;
  background:#176dad;
  color:#fff!important;
  font-size:14px;
  font-weight:800;
  text-decoration:none!important;
  transition:.25s;
}


.mf-cta-action a span{
  font-size:20px;
}


.mf-cta-action a:hover{
  background:#0d568d;
  transform:translateY(-2px);
}




/* =========================================================
   TABLET
========================================================= */


@media(max-width:980px){


  .mf-section{padding:80px 0}


  .mf-hero{padding:90px 0}


  .mf-page .mf-hero h4{
    font-size:46px !important;
  }


  .mf-brand-grid{
    grid-template-columns:1fr 60px 1fr;
  }


  .mf-brand-card{
    padding:35px 30px;
  }


  .mf-value-grid{
    grid-template-columns:repeat(2,1fr);
  }


  .mf-quality-grid{
    grid-template-columns:repeat(2,1fr);
  }


  .mf-portfolio-intro{
    grid-template-columns:1fr;
    gap:22px;
  }


}




/* =========================================================
   MOBILE
========================================================= */


@media(max-width:640px){


  .mf-container{
    width:calc(100% - 32px);
  }


  .mf-section{
    padding:65px 0;
  }


  .mf-section-label{
    margin-bottom:12px;
    font-size:11px;
  }


  .mf-section-head{
    margin-bottom:38px;
  }


  .mf-section-head.mf-center{
    margin-bottom:40px;
    text-align:left;
  }


  .mf-page .mf-section-head h4,
  .mf-page .mf-portfolio-intro h4{
    font-size:29px !important;
    line-height:1.4 !important;
    letter-spacing:-1.2px !important;
  }


  .mf-section-head>p{
    margin-top:17px;
    font-size:14px;
    line-height:1.8;
  }


  .mf-hero{
    padding:72px 0 75px;
  }


  .mf-eyebrow{
    margin-bottom:18px;
    font-size:12px;
  }


  .mf-page .mf-hero h4{
    font-size:36px !important;
    line-height:1.32 !important;
    letter-spacing:-1.7px !important;
  }


  .mf-page .mf-hero h4 strong{
    margin-top:6px;
    color:#59b8ff !important;
  }


  .mf-hero-desc{
    margin-top:22px;
    font-size:14px;
    line-height:1.85;
  }


  .mf-hero-btns{
    display:grid;
    grid-template-columns:1fr;
    margin-top:30px;
  }


  .mf-btn{
    width:100%;
  }


  .mf-brand-grid{
    display:block;
  }


  .mf-brand-card{
    padding:32px 25px;
  }


  .mf-brand-plus{
    height:60px;
  }


  .mf-brand-plus span{
    width:38px;
    height:38px;
    font-size:22px;
  }


  .mf-brand-name{
    margin-bottom:25px;
    font-size:21px;
  }


  .mf-brand-no{
    font-size:34px;
  }


  .mf-page .mf-brand-card h5{
    font-size:20px !important;
  }


  .mf-brand-result{
    flex-wrap:wrap;
    gap:10px;
    margin-top:25px;
    padding:20px 15px;
    font-size:13px;
  }


  .mf-brand-result strong{
    font-size:16px;
  }


  .mf-value-grid{
    grid-template-columns:1fr;
  }


  .mf-value-card{
    min-height:auto;
    padding:29px 25px;
  }


  .mf-page .mf-value-card h5{
    font-size:18px !important;
  }


  .mf-portfolio-intro{
    margin-bottom:38px;
  }


  .mf-product-item{
    grid-template-columns:45px 1fr 38px;
    min-height:93px;
  }


  .mf-page .mf-product-text h5{
    font-size:17px !important;
  }


  .mf-product-text p{
    font-size:12px;
    line-height:1.5;
  }


  .mf-product-arrow{
    width:34px;
    height:34px;
  }


  .mf-quality-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }


  .mf-quality-card{
    padding:27px 18px;
  }


  .mf-quality-card strong{
    font-size:17px;
  }


  .mf-quality-card span{
    font-size:9px;
    line-height:1.4;
  }


  .mf-quality-card p{
    font-size:12px;
  }


  .mf-cta{
    padding:65px 0;
  }


  .mf-cta-inner{
    display:block;
  }


  .mf-page .mf-cta-text h4{
    font-size:29px !important;
  }


  .mf-cta-text p{
    font-size:14px;
  }


  .mf-cta-action{
    margin-top:30px;
  }


  .mf-cta-action a{
    width:100%;
  }


}