@charset "utf-8";

.common-board-list {
    .webjin-list {
      .list-header {
        text-align: center;
        margin-bottom: 85px;

        & p {
          font-size:25px;
          font-weight:700;
          letter-spacing:-1px;
          color:#00AD1D;
          margin-bottom: 20px;
        }
        & h2 {
          color:#222;
          font-weight: 700;
          font-size:40px;
          letter-spacing:-1px;
        }
      }

      .list-body {

        .search-box {
          background: #F8FAFB;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 50px 0;
          column-gap: 15px;
          margin-bottom: 20px;

          & select {
            width:146px;
            height: 50px;
            border-radius: 6px;
            border: solid 1px #ddd;
            font-size:16px;
            font-weight: 500;
            line-height: 20px;
            padding:15px;
            color:#757575;
            appearance: none;
            background: #fff url('/theme/basic/img/sub/down_select.svg') no-repeat right 1.75rem center;
            box-shadow: none;
          }

          & input {
            width: 469px;
            height: 50px;
            border-radius: 6px;
            background: #fff;
            border: solid 1px #ddd;
            font-size: 16px;
            font-weight: 500;
            padding: 0 15px;
            box-shadow: none;
          }

          & button {
            width:147px;
            height: 48px;
            background: #000;
            border-radius: 6px;
            color: #fff;
            font-size:16px;
            font-weight: 400;
            border: 0;
          }
        }

        .search-fillter-box {
            .total-box {
              & span {
                color:#222;
                font-size:15px;
                font-weight:600;
                line-height:20px;
                margin-bottom:10px;
                display: block;

                & b {
                  font-weight: 700;
                  color:#00AD1D;
                }
              }
            }
          .fillter-wrap {
            flex-wrap: wrap;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .fillter-check-box {
              flex-wrap: wrap;
              column-gap: 15px;
              display: flex;
              align-items: center;

              & input[type="checkbox"] {
                width: 20px;
                height: 20px;
                border: solid 1px #d9d9d9;
                border-radius: 6px;
                accent-color: #00AD1D;
                box-shadow: none;
              }

              & input[type='checkbox']:checked {
                background-color: #00AD1D;
                border-color: transparent;
              }

              & input[type=checkbox]:indeterminate {
                background-color: #00AD1D;
                border-color: transparent;
              }

              & label {
                font-size:15px;
                font-weight: 400;
                color:#000;
                margin-left: 3px;
              }
            }

            .view-fillter-box {
                & select {
                  width:120px;
                  height: 35px;
                  border-radius: 6px;
                  font-size:15px;
                  font-weight: 500;
                  line-height: 20px;
                  padding:5px 8px;
                  border:solid 1px #ddd;
                  appearance: none;
                  background: #fff url('/theme/basic/img/sub/down_select.svg') no-repeat right 0.6rem center;
                  box-shadow: none;
                }
            }

          }
        }
        .list-box {
            margin-top:15px;
            padding: 35px;
            border:solid 1px #CDD4E3;
            border-radius: 20px;
            transition: background 0.2s ease-in;
            margin-bottom: 25px;

          .col-xl-4 {
            width:30%;

            .img-box {
              & img {
                width: 311px;
                height: 200px;
                aspect-ratio: 16 / 9;
              }
            }
          }
          .col-xl-8 {
            width: 70%;
          }

          .info-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-bottom:25px;

            .info-header-title-box {
              display: flex;
              align-items: center;
              justify-content: start;
              column-gap: 13px;

              .bedge-span {
                padding: 4px 13px;
                border-radius: 6px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size:15px;
                font-weight: 500;
                color: #fff;
              }
              .bedge-1 {
                background: #269A74;
              }

              .bedge-2 {
                background: #2C77BC;
              }
              .bedge-3 {
                background: #F89E53;
              }
              .bedge-4 {
                background: #8363AA;
              }
              .bedge-5 {
                background: #F47A63;
              }

              & strong {
                font-size:27px;
                font-weight: 700;
                color: #000;
              }
            }
            .info-header-button-box {
              width:40px;
              height: 40px;
              border-radius: 15px;
              background: #fff;
              border:0;
              box-shadow: 0 2px 5px 0 #00000012;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }

          .info-body {
            border-top:solid 1px #CDD4E3;
            border-bottom:solid 1px #CDD4E3;
            padding: 20px 0;
            .info-body-top {
              display: flex;
              align-items: center;
              justify-content: start;
              column-gap: 125px;
              margin-bottom: 15px;
            }
            .info-body-bottom {
              display: flex;
              align-items: center;
              justify-content: start;
              column-gap: 40px;
            }
            .info-body-text-box {
              display: flex;
              align-items: center;
              justify-content: start;

              .icon-span {
                margin-bottom:5px;
                margin-right:3px;
              }

              & strong {
                font-size:17px;
                font-weight: 700;
                color: #000;
                margin-right:7px;
              }
              .vr {
                display: inline-block;
                width: 1px;
                height: 13px;
                background: #CDD4E3;
                margin-right:7px;
                opacity: 1;
                position: relative;
                top:6px;
              }

              .text-span {
                font-size:17px;
                font-weight: 400;
                color: #000;
              }
            }
          }

          .info-bottom {
            margin-top:40px;

            .info-bottom-text-box {
              & p {
                color: #757575;
                font-size:17px;
                font-weight: 400;
                line-height: 30px;
                letter-spacing: -0.5px;
              }
            }
            .info-bottom-end-box {
              margin-top:20px;

              & dl {
                & dd {
                  font-size:17px;
                  font-weight: 400;
                  line-height: 30px;
                  color: #000;
                  position: relative;
                 padding-left: 10px;

                  & strong {
                    font-weight: 600;
                  }

                  &:before {
                    position: absolute;
                    content: '';
                    width: 3px;
                    height: 3px;
                    border-radius: 300px;
                    background: #000;
                    top:13px;
                    left:0;
                  }
                }
              }
            }
          }

        }

        .list-box:hover {
          background: #F8FAFB;
        }
      }
    }
}