@charset "utf-8";

/********************
// tablet 분기점
********************/
@media only screen and (max-width: 1200px) {

  .inner{width:calc(100% - 120px);margin:0 auto;}


    /** mainBanner **/
    .mainBanner {background:url('/img/mainBanner-t.jpg'); background-position:center; background-size:cover;}


  /** header **/
  .toggleBtn{display:block;}
  header{height:auto !important; min-height:0 !important;}
  .menu{position:fixed !important; top:0; right:-100dvw; width:100dvw; height:100dvh; overflow-y:auto; background:#fff; transition:right .3s ease-in-out; z-index:898;}
  header.active .menu{right:0;}
  .menu li{border-bottom:1px solid #eeeef0;}
  .dropDownMenu .dropDownCnt{position:static; width:auto; min-width:auto; border:0; opacity:1; visibility:visible; transform:none; transition:none; display:none;}
  .dropDownMenu.active .dropDownCnt{display:block;}
  .dropDownCnt > a{height:auto;border-bottom:1px solid #eeeef0; background:#F7F8F8;}

  .chat_bubble::after {content:'';position:absolute;left:-8px;top:10px;}
  .chat_bubbleR::before{content:'';position:absolute;right:-8px;top:10px;}
  .portalLifeLeft{border-radius:12px 0 0 12px;}

  .introduceCnts {display:grid; grid-template-columns:repeat(3, 1fr);}
  .memberGrid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 60px;}
  .premierGrid {display: grid; grid-template-columns: repeat(3, 1fr); row-gap:60px;}


  .catTabs{ grid-template-columns:repeat(2, 1fr); }
  .catTabs a:nth-child(3n){ border-right:1px solid #E6E8EE; }
  .catTabs a:nth-last-child(-n+2){border-bottom:1px solid #E6E8EE;}
  .catTabs a:nth-child(5n){border-bottom:0;}


  /********************
  ** special
  ********************/
  .specialBg {background:url('/img/service-004-main.jpg'); background-position:center; background-size:cover;}
  .specialCnts {display:grid; grid-template-columns:repeat(3, 1fr); row-gap:48px;}
  .specialCnts2 {display:grid; grid-template-columns:repeat(4, 1fr);}

  /********************
  ** factory
  ********************/
  .factoryBg {background:url('/img/service-003-main.jpg'); background-position:center; background-size:cover;}
  .factoryCnts {display:grid; grid-template-columns:repeat(3, 1fr); row-gap:48px;}
  .factoryCnts2 {display:grid; grid-template-columns:repeat(4, 1fr);}

  /********************
  ** office
  ********************/
  .officeBg {background:url('/img/service-002-main.jpg'); background-position:center; background-size:cover;}
  .officeCnts {display:grid; grid-template-columns:repeat(3, 1fr); row-gap:48px;}
  .officeCnts2 {display:grid; grid-template-columns:repeat(4, 1fr);}

  /********************
  ** building
  ********************/
  .buildingBg {background:url('/img/service-001-main.jpg'); background-position:center; background-size:cover;}
  .buildingCnts {display:grid; grid-template-columns:repeat(3, 1fr); row-gap:48px;}
  .buildingCnts2 {display:grid; grid-template-columns:repeat(4, 1fr);}
  .buildingCnts3 {display:grid; grid-template-columns:repeat(3, 1fr);}
  
  /********************
  ** logoList
  ********************/
  .logoLists {display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); row-gap:46px;}
}

/* ✅ 데스크탑에서는 햄버거 숨김 */
@media only screen and (min-width: 1201px) {
  .toggleBtn{display:none;}
}

/********************
// 모바일 분기점
********************/
@media only screen and (max-width: 768px) {

  .inner{width:calc(100% - 40px);margin:0 auto;}

  .stepBox{grid-template-columns:repeat(2, 1fr);}
  .inner{width:calc(100% - 40px);margin:0 auto;}
  .portalLifeLeft{border-radius:8px 0 0 8px;}
  .stepPoint{left:50%;top:-25px;animation:bounce 2s infinite ease-in-out;}

  @keyframes bounce{
    0%{transform:translate(-50%,0);}
    50%{transform:translate(-50%,-5px);}
    100%{transform:translate(-50%,0);}
  }


  .newsGrid{display: grid; grid-template-columns: repeat(1, minmax(0, 1fr));}
  .businessGrid {display: grid; grid-template-columns: repeat(2, 1fr);}
  .memberGrid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px;}
  .premierGrid {display: grid; grid-template-columns: repeat(2, 1fr); row-gap:40px;}

  .mainnewsCard > div{aspect-ratio: 4 / 3; width: 100%;}

  .catTabs{ grid-template-columns:repeat(1, 1fr); }
  .catTabs a:nth-child(3n){ border-right:1px solid #E6E8EE; }
  .catTabs a:nth-last-child(-n+2){border-bottom:1px solid #E6E8EE;}
  .catTabs a:nth-child(5n){border-bottom:0;}

  /********************
  ** special
  ********************/
  .specialCnts {display:grid; grid-template-columns:repeat(2, 1fr); row-gap:28px;}
  .specialCnts2 {display:grid; grid-template-columns:repeat(2, 1fr); row-gap:24px;}

  /********************
  ** factory
  ********************/
  .factoryCnts {display:grid; grid-template-columns:repeat(2, 1fr); row-gap:28px;}
  .factoryCnts2 {display:grid; grid-template-columns:repeat(2, 1fr); row-gap:24px;}

  /********************
  ** office
  ********************/
  .officeCnts {display:grid; grid-template-columns:repeat(2, 1fr); row-gap:28px;}
  .officeCnts2 {display:grid; grid-template-columns:repeat(2, 1fr); row-gap:24px;}

  /********************
  ** building
  ********************/
  .buildingCnts {display:grid; grid-template-columns:repeat(2, 1fr); row-gap:28px;}
  .buildingCnts2 {display:grid; grid-template-columns:repeat(2, 1fr); row-gap:24px;}
  .buildingCnts3 {display:grid; grid-template-columns:repeat(2, 1fr); row-gap:24px;}

  /********************
  ** logoList
  ********************/
  .logoLists {display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); row-gap:36px;}

}