@charset "utf-8";
/* 공통영역 */
/* table */
.tableCol {border-left: none; border-top: none; border-bottom: 1px solid #dddddd;}
.tableCol thead th {background: #f1f4f8; border-top: 1px solid #222222;}
.tableCol>tbody>tr:first-child>td {border-top: 1px solid #dddddd;}
.tableCol thead th:last-child,
.tableCol tbody td:last-child {border-right: none;}

/* button */
a.dwn {display: inline-block; width: 155px; height: 45px; background-color: #303030; border: 1px solid #040000; box-sizing: border-box; font-family: 'Noto Sans KR'; color: #fff; font-size: 16px; font-weight: 500; line-height: 45px; text-align: center;}
a.dwn span {position: relative; padding-left: 30px; box-sizing: border-box;}
a.dwn span::before {content: ''; position: absolute; top: 5px; left: 0; background: url('/humanframe/theme/globalhubcity/assets/img/sub/dwnIcon.png') no-repeat; width: 20px; height: 14px; background-size: 100%;}

/* cont-title */
h4.cont-title {font-family: 'Gmarket-B'; font-size: 32px; color: #1f6a9c; position: relative; line-height: 1.3; margin-bottom:30px;}
h5.cont-title {font-family: 'Gmarket-B'; font-size: 26px; color: #222222; padding-left: 11px; position: relative; margin-bottom: 20px;}
h5.cont-title::before {content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 22px; background: #1f6a9c;}
.h4_bx {margin-bottom: 80px;}
.h5_bx {margin-bottom: 50px;}

/* yeaerList */
.year_bx {padding: 30px; border: 1px solid #dddddd;}
.yearList li {position: relative; display: flex; font-family: 'Noto Sans KR'; padding-bottom: 35px; line-height: 1; letter-spacing: -0.02em;}
.yearList li:last-child {padding-bottom: 0;}
.yearList li:not(:last-of-type)::before {content: ''; position: absolute; top: 12px; left: 12px; width: 1px; height: 100%; background-color: #1f6a9c; opacity: 0.4;}
.yearList li .year {flex-shrink: 0; position: relative; width: 150px; font-size: 22px; color: #000000; font-weight: 700; padding-left: 45px; margin-right: 30px; box-sizing: border-box;}
.yearList li .year::before {content: ''; position: absolute; top: -1px; left: 0; background: url('/humanframe/theme/dental/assets/img/sub/yearAssets.png') no-repeat; width: 25px; height: 25px; background-size: 100%;}
.yearList li .year::after {content: ''; position: absolute; top: 5px; right: 0; width: 1px; height: 12px; background-color: #e2e2e2;}
.yearList li .txt {font-size: 19px; color: #333333; font-weight: 500; line-height: 1.3;}
.yearList li .txt span {position: relative;}
.yearList li .txt span::before {position: absolute; bottom: -20px; left: 0; width: max-content; font-size: 15px;}
.yearList li .txt span:first-child::before {content: '(19차례)';}
.yearList li .txt span:last-child::before {content: '(360건)'; left: 10px;}

/* list_flex */
.list_flex {display: flex; gap: 50px 40px; flex-wrap: wrap;}
.list_flex li {width: calc(50% - 20px);}

@media screen and (max-width: 1025px) {
  .list_flex {gap: 30px;}
  .list_flex li {width: 100%;}
}

/* text_bx */
.text_bx {display: flex; align-items: center; padding: 2rem 3rem; min-height: 7.7rem; box-sizing: border-box; background: #f7f7f7;}
.text_bx p {font-size: 20px; font-weight: 500; color: #222222; letter-spacing: -0.05em;}
.text_bx p span {font-weight: 400; color: #666666;}
.text_bx p span.blue {color: #1f6a9c !important; font-weight: 500;}

@media screen and (max-width: 768px) {
  .text_bx {padding: 20px;}
  .text_bx p {font-size: 16px;}
}

/* box_list */
.box_list {display: flex; flex-wrap: wrap; gap: 20px 25px; margin-bottom: 30px;}
.box_list li {width: calc(33.333% - 16.666px); padding: 30px 0; text-align: center; background: #f7f7f7;}
.box_list li p {font-size: 18px; font-weight: 700; color: #222222; line-height: 26px;}
.box_list li p span {font-weight: 400; color: #666666; word-break: break-all;}
.box_list li p.blue, .box_list li p.blue span {color: #1f6a9c !important;}

@media screen and (max-width: 1400px) {
  .box_list li {width: calc(50% - 12.5px);}
}

@media screen and (max-width: 1025px) {
  .box_list li {width: 100%;}
}

@media screen and (max-width: 768px) {
  .box_list li {padding: 20px 0;}
  .box_list li p {font-size: 16px;}
}

/* img_bx */
.img_bx img {display: block; width: 100%;}
.img_bx.flex {display: flex; gap: 40px;}
.img_bx.flex li {position: relative; width: calc(50% - 20px);}

/* img_text */
.img_text {width: 100%; padding: 20px 0; background: #f7f7f7; text-align: center;}
.img_text p {font-size: 20px; font-weight: 500; color: #222222;}
.img_bx.flex li .img_text {position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px 0; background: rgba(0,0,0,0.6); color: #fff; font-size: 20px;}

@media screen and (max-width: 768px) {
  .img_bx.flex {flex-wrap: wrap; gap: 20px;}
  .img_bx.flex li {width: 100%;}
  .img_bx.flex li .img_text {padding: 10px 0; font-size: 15px;}
  .img_text {padding: 10px 0;}
  .img_text p {font-size: 15px;}
}

/* icon_list */
.icon_list {display: flex;}
.icon_list li {width: 25%; position: relative; text-align: center; padding-top: 40px;}
.icon_list li .icon_bx {position: relative; margin-bottom: 20px;}
.icon_list li .icon_bx::before {content: ''; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 360px; height: 180px; background: url('/humanframe/theme/dental/assets/img/sub/icon_bg.png') no-repeat; background-size: 100%; z-index: -1;}
.icon_list li .icon_bx img {margin: 0 auto;}
.icon_list li .txt {font-size: 20px; font-weight: 600; color: #222222; letter-spacing: -0.02em; line-height: 28px;}
.icon_list li .txt span {font-weight: 700; color: #076cc1;}

@media screen and (max-width: 1280px) {
  .icon_list {flex-wrap: wrap; row-gap: 50px;}
  .icon_list li {width: 50%;}
}

@media screen and (max-width: 768px) {
  .icon_list li {width: 100%;}
  .icon_list li .icon_bx {margin-bottom: 15px; padding-bottom: 15px;}
  .icon_list li .txt {font-size: 16px;}
}

@media screen and (max-width: 480px) {
  .icon_list li .icon_bx::before {width: 100%;}
}

@media screen and (max-width: 1025px) {
    /* h4.cont-title */
    h4.cont-title {font-size: 24px;}
    h4.cont-title>br {display: none;}
}

@media screen and (max-width: 768px) {
    .tableCol {font-size: 16px;}
    .mb30 {margin-bottom: 15px !important;}
    /* h4.cont-title */
    h4.cont-title {font-size: 22px; margin-bottom: 20px;}
    h5.cont-title {font-size: 20px; margin-bottom: 15px;}
    h5.cont-title::before {top: 2px;}
    .h4_bx {margin-bottom: 55px;}
    .h5_bx {margin-bottom: 35px;}

    .yearList li:not(:last-of-type)::before {top: 13px; left: 10px;}
    .yearList li .year {width: 100px; font-size: 16px; margin-right: 20px; padding-left: 30px;}
    .yearList li .year::before {width: 20px; height: 20px;}
    .yearList li .txt {font-size: 15px;}
    .yearList li .txt span::before {display: none;}

}

@media screen and (max-width: 480px) {
    /* button */
    a.dwn {width: 130px; height: 40px; line-height: 40px; font-size: 15px;}
    a.dwn span::before {top: 4px;}

    .year_bx {padding: 20px;}
}

/* logo_list */
.logo_list {display: flex; gap: 2rem;}
.logo_list li {width: 21rem; height: 9rem; display: flex; align-items: center; justify-content: center; border: 1px solid #dddddd; padding: 0 1rem; box-sizing: border-box;}

@media screen and (max-width: 768px) {
  .logo_list {flex-wrap: wrap; gap: 1rem;}
  .logo_list li {width: calc(50% - 0.5rem);}
}