a {text-decoration: none; color: #282525;}
.fadein {opacity: 0; transform: translateY(50px);}
.fadein.on {opacity: 1; transform: translateY(0); transition: all 1s;}


.container {padding: 200px 0 140px;}
.tit-wrap .bx-txt {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tit-wrap .left>h4 {font-size: 44px; font-weight: 700; line-height: 65px;}
.tit-wrap .left>p {display: flex; flex-direction: column; margin-top: 40px;}
.tit-wrap .left>p.mob {display: none;}
.tit-wrap .left>p>span {font-size: 20px; font-weight: 500; line-height: 32px;}

/* category */
.category-wrap {padding: 60px 0 40px; border-bottom: 1px solid #515153;}
.category-wrap .category-item {display: flex; justify-content: center; gap: 16px;}
.category-wrap .category-item .category-btn {
  width: 140px;
  padding: 11px 2px;
  /* margin-right: 16px; */
  border-radius: 8px;
  background: #ededed;
  text-align: center;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #282525;
  border: none;
  cursor: pointer;
  flex: 1;
}
.category-wrap .category-item .category-btn.on {background: #00BD5A; color: #fff;}
.list-portfolios {margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.list-portfolios .line {display: flex; justify-content: space-between; margin-top: 100px;}
.list-portfolios .line:first-child {margin: 0;}

.bx-card {width: calc(50% - 12px); margin-bottom: 100px; animation: fadeIn 1s;}
/* @keyframes fadeIn {
  from {opacity: 0;transform: translateY(50px);}
  to {opacity: 1; transform: translateY(0);}
} */

.bx-card.invisible {display: none;}
.bx-card .img-card {display:flex; align-items: flex-end; justify-content: flex-end; gap: 10px; height: 334px; padding: 20px; border-radius: 12px; background: #D7E4FA; background-size: cover; box-sizing: border-box;}

/* portfolios img */
/* 2026 추가 */
.bx-card .img-card.ibk_dcsp {background-image: url(../images/ibk_dcsp.png);}
.bx-card .img-card.kdap {background-image: url(../images/kdap.png);}
.bx-card .img-card.ibk_ews {background-image: url(../images/ibk_ews.png);}
.bx-card .img-card.ibk_meds {background-image: url(../images/ibk_meds.png);}

/* 기존 */
.bx-card .img-card.ibk_policy_funds {background-image: url(../images/ibk_policy_funds.png);}
.bx-card .img-card.kb-uxcunsulting {background-image: url(../images/kb_uxcunsulting.png);}
.bx-card .img-card.dgb-mydata {background-image: url(../images/dgb_mydata.png);}
.bx-card .img-card.shinhan-back {background-image: url(../images/shinhan-back.png);}
.bx-card .img-card.dbback-new {background-image: url(../images/dbback-new.png);}
.bx-card .img-card.nicesys {background-image: url(../images/nicesys.png);}
.bx-card .img-card.kibo {background-image: url(../images/kibo.png);}
.bx-card .img-card.shinhan-payment {background-image: url(../images/shinhan.png);}
.bx-card .img-card.nicenibs {background-image: url(../images/nicenibs.png);}
.bx-card .img-card.lottepos {background-image: url(../images/lotte_pos.png);}
.bx-card .img-card.ibkapp {background-image: url(../images/ibkapp.png);}
.bx-card .img-card.lotterental {background-image: url(../images/lotteretal.png);}
.bx-card .img-card.niceinfo {background-image: url(../images/niceinfo.png);}
.bx-card .img-card.ccrs {background-image: url(../images/ccrs.png);}
.bx-card .img-card.heyyoung {background-image: url(../images/heyyoung.png);}
.bx-card .img-card.kbmydata {background-image: url(../images/kbmydata.png);}
.bx-card .img-card.creditmydata {background-image: url(../images/creditmydata.png);}
.bx-card .img-card.lotteai {background-image: url(../images/lotteai.png);}
.bx-card .img-card.kyobomydata {background-image: url(../images/kyobomydata.png);}
.bx-card .img-card.kbchatbot {background-image: url(../images/kbchatbot.png);}
.bx-card .img-card.hf {background-image: url(../images/hf.png);}
.bx-card .img-card.jbmoney {background-image: url(../images/jbmoney.png);}
.bx-card .img-card.hanainfo {background-image: url(../images/hanainfo.png);}
.bx-card .img-card.dwtango {background-image: url(../images/dw_tango.png);}
.bx-card .img-card.emartsco {background-image: url(../images/emartsco.png);}
.bx-card .img-card.shinhanm {background-image: url(../images/shinhanM.png);}
.bx-card .img-card.kjb {background-image: url(../images/kjb.png);}
.bx-card .img-card.kbthek {background-image: url(../images/kb_theK.png);}
.bx-card .img-card.lottecard-bond {background-image: url(../images/lottecard_bond.png);}
.bx-card .img-card.lottemart-pos {background-image: url(../images/lottemart_pos.png);}
.bx-card .img-card.nicednb {background-image: url(../images/nicednb.png);}
.bx-card .img-card.kbcard {background-image: url(../images/kbcard.png);}
.bx-card .img-card.etax {background-image: url(../images/etax.png);}
.bx-card .img-card.esafe {background-image: url(../images/esafe.png);}
.bx-card .img-card.entob {background-image: url(../images/eNtoB.png);}
.bx-card .img-card.barofn {background-image: url(../images/barofn.png);}
.bx-card .img-card.ksurepi {background-image: url(../images/ksure_pi.png);}
.bx-card .img-card.woori-sbcplan {background-image: url(../images/woori_sbcplan.png);}
.bx-card .img-card.goodneighbors {background-image: url(../images/goodneighbors.png);}
.bx-card .img-card.skb {background-image: url(../images/skb.png);}
.bx-card .img-card.ibkcredit {background-image: url(../images/ibk_credit.png);}
.bx-card .img-card.ibkrpa {background-image: url(../images/ibk_rpa.png);}
.bx-card .img-card.koreaexim {background-image: url(../images/korea_exim.png);}
.bx-card .img-card.kbstar {background-image: url(../images/kbstar.png);}
.bx-card .img-card.sgi {background-image: url(../images/sgi.png);}
.bx-card .img-card.kumho {background-image: url(../images/kumho.png);}
.bx-card .img-card.creditinfo {background-image: url(../images/credit_info.png);}
.bx-card .img-card.hmm {background-image: url(../images/hmm.png);}
.bx-card .img-card.jbobp {background-image: url(../images/jb_obp.png);}
.bx-card .img-card.ibkcontrol {background-image: url(../images/ibk_control.png);}
.bx-card .img-card.amoreslt {background-image: url(../images/amore_slt.png);}
.bx-card .img-card.shinhanwiss {background-image: url(../images/shinhan_wiss.png);}
.bx-card .img-card.uplussmart {background-image: url(../images/uplus_smart.png);}
.bx-card .img-card.woorinps {background-image: url(../images/woori_nps.png);}
.bx-card .img-card.dbbank {background-image: url(../images/dbbank.png);}
.bx-card .img-card.wooricurrency {background-image: url(../images/wooricurrency.png);}
.bx-card .img-card.daehong {background-image: url(../images/daehong.png);}
.bx-card .img-card.uplushome {background-image: url(../images/uplushome.png);}
.bx-card .img-card.sampio {background-image: url(../images/sampio.png);}
.bx-card .img-card.koica {background-image: url(../images/koica.png);}
.bx-card .img-card.kcomwel {background-image: url(../images/kcomwel.png);}
.bx-card .img-card.eland {background-image: url(../images/eland.png);}
.bx-card .img-card.shinhanbank {background-image: url(../images/shinhanbank.png);}
.bx-card .img-card.shinhanbranch {background-image: url(../images/shinhanbranch.png);}
.bx-card .img-card.kb {background-image: url(../images/kb.png);}
.bx-card .img-card.l7 {background-image: url(../images/l7.png);}
.bx-card .img-card.ksure {background-image: url(../images/ksure.png);}
.bx-card .img-card.ex {background-image: url(../images/ex.png);}
.bx-card .img-card.arex {background-image: url(../images/arex.png);}
.bx-card .img-card.lottedeppos {background-image: url(../images/lottedeppos.png);}
.bx-card .img-card.kdb {background-image: url(../images/kdb.png);}
.bx-card .img-card.khistory {background-image: url(../images/khistory.png);}
.bx-card .img-card.housebank {background-image: url(../images/housebank.png);}
.bx-card .img-card.banktbd {background-image: url(../images/banktbd.png);}
.bx-card .img-card.koreatrade {background-image: url(../images/koreatrade.png);}
.bx-card .img-card.wooribank {background-image: url(../images/wooribank.png);}
.bx-card .img-card.ibkinfo {background-image: url(../images/ibkinfo.png);}
.bx-card .img-card.ktng {background-image: url(../images/ktng.png);}
.bx-card .img-card.nps {background-image: url(../images/nps.png);}
.bx-card .img-card.skdirect {background-image: url(../images/skdirect.png);}
.bx-card .img-card.lpoint {background-image: url(../images/lpoint.png);}
.bx-card .img-card.ssg {background-image: url(../images/ssg.png);}
.bx-card .img-card.nature {background-image: url(../images/nature.png);}
.bx-card .img-card.ksfc {background-image: url(../images/ksfc.png);}
.bx-card .img-card.samsunghr {background-image: url(../images/samsunghr.png);}
.bx-card .img-card.miraeasset {background-image: url(../images/miraeasset.png);}
.bx-card .img-card.niceinfoui {background-image: url(../images/niceinfoui.png);}

.bx-card .img-card .img-label {padding: 12px 14px; border-radius: 10px; font-size: 16px; font-weight: 700; letter-spacing: -0.4px; color: #fff; background: #282525;}
.bx-card .img-card .img-label.blog:hover{background: #42D31A;}

.bx-card .txt-card {margin-top: 32px;}
.bx-card .txt-card>p {margin-bottom: 16px; font-size: 26px; font-weight: 700; line-height: 38px;}
.bx-card .txt-card>span {font-size: 18px; line-height: 26px; white-space: nowrap;}

.footer .bx-btn {
  position: fixed;
  right: 120px;
  top: 80px;
  display: none;
}

.footer .bx-btn .btn-top {
  display: block;
  width: 50px;
  height: 60px;
  background: url(../images/btn_top.png) no-repeat center;
}
.footer .bx-btn .btn-top:hover {background: url(../images/btn_top_hover.png) no-repeat center;}


/* ============= 3/18 MEDIA QUERIES =============== */

@media screen and (max-width: 1600px){ 
  .tit-wrap .left>h4 {font-size: 44px; font-weight: 700; line-height: 65px;}
  .tit-wrap .left>p>span {font-size: 18px; line-height: 28px;}
  .tit-wrap .left>p {margin-top: 40px;}
  .container {padding: 140px 0 120px;}
  .category-wrap {padding: 40px 0 40px;} 
}


@media screen and (max-width: 800px){
  .bx-card {width: 100%; margin-bottom: 48px;}
  .bx-card .img-card {height: 424px;}
  .bx-card .txt-card {text-align: center;}
}

@media screen and (max-width: 768px){
  .container.portfolios {padding: 110px 0 32px;}
  .tit-wrap .bx-txt {flex-direction: column; align-items: unset;}
  .portfolios .project {padding-top: 16px; padding-bottom: 70px;}
  .portfolios .project .count {text-align: right;}
  .tit-wrap .left>h4 {}
  .tit-wrap .left>p.pc {}
  .tit-wrap .left>p.mob {display: none;}
  .tit-wrap .left>p>span {}

  .category-wrap {padding: 0 0 24px;}
  .category-wrap .category-item { gap: 5px;}
  .category-wrap .category-item .category-btn{
    width: calc(20% - 2px);
    /* margin-right: 5px; */
    font-size: 13px;
  }
  .category-wrap .category-item .category-btn:last-child {margin-right: 0;}

  .list-portfolios .line {flex-direction: column; align-items: center;}
  .bx-card .img-card { margin: 0 auto; height: 400px; background-size: 100% 100%;}
  .bx-card .img-card .img-label {
    right: 10px;
    bottom: 10px;
    padding: 7px 12px;
    border-radius: 4px;
    font-size: 12px;
  }

  .bx-card .txt-card {text-align: center;}
  .bx-card .txt-card>p {margin-bottom: 9px; font-size: 20px; line-height: 29px;}
  .bx-card .txt-card>span {font-size: 13px; line-height: 19px;}

  .footer .bx-btn {top: 74px; right: 22px;}
  .footer .bx-btn .btn-top {width: 40px; height: 48px;}

  .list-portfolios {margin-top: 24px; }
}

@media screen and (max-width:500px) {
  .bx-card .img-card {height: 248px;}
}

@media screen and (max-width:480px) {
  .container.portfolios {padding: 80px 0 32px;}
  .tit-wrap .bx-txt {flex-direction: column; align-items: unset;}
  .portfolios .project {padding-top: 16px;}
  .portfolios .project .count {text-align: right;}
  .tit-wrap .left>h4 {font-size: 28px;}
  .tit-wrap .left>p.pc {display: none;}
  .tit-wrap .left>p.mob {display: flex; flex-direction: column; margin-top: 40px;}
  .tit-wrap .left>p>span {font-size: 18px; line-height: 26px;}

  .category-wrap {padding: 0 0 24px;}
  .category-wrap .category-item .category-btn{
    width: calc(20% - 2px);
    /* margin-right: 5px; */
    line-height: 1.2;
    font-size: 13px;
    word-break: keep-all;
    text-align: center;
    letter-spacing: -1px;
  }
  .category-wrap .category-item .category-btn:last-child {margin-right: 0;}

  .list-portfolios .line {flex-direction: column; align-items: center;}
  .bx-card {width: 100%; margin-bottom: 48px;}
  .bx-card .img-card {height: 177px; width: 312px; margin: 0 auto;}
  .bx-card .img-card .img-label {
    right: 10px;
    bottom: 10px;
    padding: 7px 12px;
    border-radius: 4px;
    font-size: 12px;
  }

  .bx-card .txt-card {text-align: center;}
  .bx-card .txt-card>p {margin-bottom: 9px; font-size: 20px; line-height: 29px;}
  .bx-card .txt-card>span {font-size: 13px; line-height: 19px;}

  .footer .bx-btn {top: 74px; right: 22px;}
  .footer .bx-btn .btn-top {width: 40px; height: 48px;}

  .list-portfolios {margin-top: 24px; }
}