@charset "utf-8";
#protfolio_sec ul.filter li {margin-bottom: 5px;}

#protfolio_sec .single-portfolio.textonly {width: 100% !important; font-size: 16px; line-height: 1.5;}
.text-box {width: 100%;}
/* tab */
.tab_container {margin: auto; width: 100%;}
  /* 메뉴 바 */
.tab_menu {display: flex; justify-content: center; margin: auto; margin-bottom: 30px; box-shadow: 0 0 8px rgba(0, 0, 0, .1); border-radius: 50px; width: fit-content; max-width: 100%; align-items: center}
.tab_menu .tab {font-size: 20px; font-weight: 600; text-align: center; padding: 10px 20px; cursor: pointer; color: #666; width: 150px; white-space: nowrap;}
.tab_menu .tab:hover {background-color: #EEF4FF;}
.tab_menu .tab:first-child:hover {border-top-left-radius: 50px; border-bottom-left-radius: 50px;}
.tab_menu .tab:last-child:hover {border-top-right-radius: 50px; border-bottom-right-radius: 50px;}
.tab_menu .tab.active {color: #fff; background-color: #2340B4;}
.tab_menu .tab.active:first-child {border-top-left-radius: 50px; border-bottom-left-radius: 50px;}
.tab_menu .tab.active:last-child {border-top-right-radius: 50px; border-bottom-right-radius: 50px;}

  /* 탭 컨텐츠 */
  /* li */
.tab_con_wrap {padding: 30px 24px; background: #fff; border-radius: 6px; display: block; gap: 10px 40px; width: 100%; box-sizing: border-box; display: none;}
.tab_con_wrap.on {display: block;}

.tab_title {font-size: 30px; font-weight: bold; line-height: 150%; font-family: NanumSquare; text-align: center; color: #171818; max-width: 1200px;}
.tab_subtitle {font-size: 20px; text-align: center; margin: 20px 0 40px; font-weight: 600; color: #00AAD2;}

  /* 분야 / 효과 */
.tab_subtitle + ul {display: flex; max-width: 800px; margin: 0 auto 40px; justify-content: center;}
.tab_subtitle + ul>li {display: flex; align-items: center; gap: 10px; background: #fff; color: #171818; border: 1px solid #DDDDDD; border-right: 1px solid transparent; border-radius: 30px; padding: 10px; margin-right: -19px; padding-right: 20px; position: relative; width: 52%; word-break: keep-all;}
.tab_subtitle + ul>li:last-child {border: 1px solid #DDDDDD; border-left: 1px solid transparent;}

.tab_subtitle + ul>li>p:first-child {display: flex; align-items: center; justify-content: center; padding: 10px; border-radius: 50px; width: 72px; height: 60px; background: #EEF4FF; color: #2340B4; font-size: 16px; font-weight: 600; line-height: 1.2; word-break: keep-all;}
.tab_subtitle + ul>li:last-child>p:first-child {background: #FFFBCF; color: #CC6600;}
.tab_subtitle + ul>li>p:last-child {width: 100%; word-wrap: normal;}

.tab_con_wrap div {margin-bottom: 40px;}
.con_title {font-size: 20px; font-weight: 600; margin-bottom: 8px;}
.con_contents {margin-bottom: 20px;}
.con_subtitle {font-size: 18px; color: #171818; margin-bottom: 10px; font-weight: 600;}



  /* 숫자 리스트 */
ol {padding-left: 26px; display: flex; flex-direction: column; gap: 8px;}
ol li::before {content: "1"; font-size: 12px; color: #fff; display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; position: absolute; background: #00AAD2; border-radius: 50%; margin-left: -26px; margin-top: 2px;}
ol li:nth-of-type(2):before {content: "2";}
ol li:nth-of-type(3):before {content: "3";}
ol li:nth-of-type(4):before {content: "4";}
ol li:nth-of-type(5):before {content: "5";}


  /* 점 리스트 */
.dot_list_wrap {display: flex; flex-direction: column; gap: 10px; text-align: left;}
.dot_list {position: relative; padding-left: 12px;}
.dot_list::before {content: ""; width: 4px; height: 4px; background: #939393; position: absolute; left: 0; top: 8px; border-radius: 50%;}


  /* card */
.card_wrap {display: flex; width: 100%; gap: 10px 24px; margin-top: 20px;}
.card_wrap li {padding: 20px 10px; border: 2px solid #00AAD2; border-radius: 5px; width: 25%; word-break: keep-all;}
.card_title {font-size: 20px; color: #171818; font-weight: 600; line-height: 1.4; height: 62px; margin-bottom: 30px; position: relative; display: flex; text-align: center; align-items: center; justify-content: center;}
.card_title::after {content: ""; width: 50px; border: 1px solid #DDDDDD; border-radius: 5px; position: absolute; bottom: -10px; left: 50%; transform: translate(-50%);}
.card_con {font-size: 16px; text-align: center;}

.mob_only {display: none;}

@media (max-width: 1280px) {
.card_wrap {flex-wrap: wrap;}  
.card_wrap li {width: 48%;}



}

@media (max-width: 767px) {
#protfolio_sec ul.filter li:last-child {padding: 10px;}
}

@media (max-width: 714px) {
.pc_only {display: none;}
.tab_menu .tab {width: 130px; font-size: 18px;}

.tab_title {font-size: 24px;}
.tab_subtitle {font-size: 18px;}

.con_title {text-align: center;}
.tab_subtitle + ul>li {padding: 20px; padding-top: 26px;}
.tab_subtitle + ul>li>p:first-child {position: absolute; width: auto; height: auto; top: -20px; left: 50%; transform: translateX(-50%);}

.card_wrap {flex-wrap: wrap;}  
.card_wrap li {width: 100%;}
}

@media (max-width: 460px) {
  .mob_only {display: block;}
  .tab_menu .tab {width: 27%; font-size: 16px; text-align: center;}

  .tab_subtitle + ul>li {padding: 12px; padding-top: 26px;}
  .tab_subtitle + ul>li>p:first-child {white-space: nowrap;}
  .tab_subtitle + ul>li>p:last-child {text-align: center;}
}