@charset "utf-8";

/* Clinic Mangement System
-----------------------------------------------------*/
.sp {
  display: none;
}

.eng {
  font-family: "Poppins";
  font-weight: 500;
}

.sec-clinic-advantages {
  margin: 0;
  padding-top: 90px;
  background: url("../img/clinic/bg_clinic.png") no-repeat center/cover;
}

.sec-clinic-advantages .system {
  display: flex;
  justify-content: space-between;
  margin-bottom: 83px;
  padding: 51px 0px 49px 0px;
  border-bottom: 1px solid #2dbb54;
}

.sec-clinic-advantages .system-left {
  width: 48.5%;
}

.sec-clinic-advantages .system-list {
  padding-top: 29px;
}

.sec-clinic-advantages .system-list li:before {
  background: url(../img/clinic/ico_plus.png) no-repeat center/100%;
}

.sec-clinic-advantages .system-right {
  width: 47.1%;
  margin-top: -60px;
}

/* ________________advantages section end________________ */

.sec-clinic-functions .functions {
  position: relative;
  padding: 120px 0px 84px 0px;
  border-bottom: 1px solid #67D686;
}

.sec-clinic-functions .function-txt-wrap {
  display: flex;
  flex-direction: column;
  background: url(../img/clinic/bg_functions_tree.png) no-repeat top;
  gap: 130px;
  background-size: auto 97%;
}

.sec-clinic-functions .function-blk {
  width: 450px;
  min-height: 160px;
  line-height: 1.8;
}

[lang='my'] .sec-clinic-functions .function-blk {
  line-height: 1.9;
}

.sec-clinic-functions .function-blk:nth-child(odd) {
  align-self: flex-end;
}

.sec-clinic-functions .function-blk ul {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  gap: 15px;
}

.sec-clinic-functions .function-blk h3 {
  font-weight: 600;
}

.sec-clinic-functions .function-blk li {
  position: relative;
  margin-left: 10px;
  padding-left: 15px;
  color: #606060;
  font-weight: 500;
}

[lang="my"] .sec-clinic-functions .function-blk li {
  font-weight: 400;
}

.sec-clinic-functions .function-blk li::before {
  position: absolute;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  color: #606060;
  content: "•";
}

/* _____________function section end______________ */

.sec-clinic-more-func {
  padding: 83px 0px 70px;
}

.sec-clinic-more-func .more-functions-list {
  padding-top: 28px;
}

.sec-clinic-more-func .more-functions-list li {
  padding: 20px 24px 20px 30px;
}

.sec-clinic-more-func .more-functions-list li:nth-child(4n) {
  padding: 14px 24px 14px 30px;
}

.sec-clinic-more-func .more-functions-list li p {
  position: relative;
  line-height: 1.8;
  padding-left: 20px;
  color: #606060;
  font-weight: 500;
}

[lang="my"] .sec-clinic-more-func .more-functions-list li p {
  font-weight: 400;
}

.sec-clinic-more-func .more-functions-list p::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  transform: translate(-100%, 25%);
  background: url(../img/clinic/ico_checkmark.svg) no-repeat center/cover;
  content: '';
}

.sec-clinic-more-func .related-systems {
  display: flex;
  justify-content: space-between;
  padding-top: 96px;
  gap: 35px;
}

.sec-clinic-more-func .system-box {
  position: relative;
  width: 330px;
  padding: 0px 15px;
  border: 1px solid #67D686;
  border-radius: 10px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
  font-weight: 500;
  text-align: center;
}

[lang="my"] .sec-clinic-more-func .system-box {
  font-weight: 400;
}

.sec-clinic-more-func .system-img img {
  border-radius: 50%;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.30), 0px 8px 12px 0px rgba(0, 0, 0, 0.15);
}

.sec-clinic-more-func .system-box .brief-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 165px;
  line-height: 1.8;
  padding-top: 42px;
}

[lang='my'] .sec-clinic-more-func .system-box .brief-intro {
  line-height: 1.9;
}

.sec-clinic-more-func .system-box .brief-intro::before {
  position: absolute;
  top: -21%;
  left: 50%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.30), 0px 8px 12px 0px rgba(0, 0, 0, 0.15);
  transform: translate(-50%, 0%);
  content: '';
}

.sec-clinic-more-func .system-box.box1 .brief-intro::before {
  background: url(../img/clinic/ico_funcion01.svg) no-repeat center/cover;
}

.sec-clinic-more-func .system-box.box2 .brief-intro::before {
  background: url(../img/clinic/ico_function02.svg) no-repeat center/cover;
}

.sec-clinic-more-func .system-box.box3 .brief-intro::before {
  background: url(../img/clinic/ico_function03.svg) no-repeat center/cover;
}

.sec-clinic-more-func .clinic-intro {
  padding-top: 5px;
}

.sec-clinic-more-func .system-box .sys-name {
  line-height: 1.5;
  padding: 20px 0px;
  color: #67D686;
  font-size: 18px;
  font-weight: 600;
}

[lang='my'] .sec-clinic-more-func .system-box .sys-name {
  line-height: 1.9;
}

@media only screen and (min-width:769px) and (max-width:1024px) {
  .pc {
    display: none;
  }

  .sec-clinic-advantages {
    padding-top: 8.789vw;
  }

  .sec-clinic-advantages .system {
    flex-direction: column-reverse;
    gap: 3vw;
  }

  .sec-clinic-advantages .system-left {
    width: 100%;
  }

  .sec-clinic-advantages .system-list li:before {
    top: 15%;
  }

  .sec-clinic-advantages .system-list li:nth-child(2n)::before {
    top: 11%;
  }

  .sec-clinic-advantages .system-right {
    width: 100%;
    margin-top: 0;
    text-align: center;
  }

  .sec-clinic-advantages .system-list {
    padding-top: 2.832vw;
  }

  /* ________________advantages section end________________ */

  .sec-clinic-functions .functions {
    padding: 11.719vw 0px 7.715vw 0vw;
    border-bottom: 0.091vw solid #67D686;
  }

  .sec-clinic-functions .function-txt-wrap {
    gap: 10.909vw;
  }

  .sec-clinic-functions .function-blk {
    width: 43.945vw;
    min-height: 15.625vw;
    font-size: 1.465vw;
  }

  [lang="my"].sec-clinic-functions .function-blk {
    font-size: 1.563vw;
  }

  .sec-clinic-functions .function-blk ul {
    margin-top: 0.977vw;
    gap: 1.465vw;
  }

  .sec-clinic-functions .function-blk li {
    margin-left: 0.977vw;
    padding-left: 1.465vw;
  }

  .sec-clinic-functions .function-blk li::before {
    width: 0.195vw;
    height: 0.195vw;
  }

  /* _____________function section end______________ */

  .sec-clinic-more-func {
    padding: 8.105vw 0vw 6.836vw;
  }

  .sec-clinic-more-func .more-functions-list {
    padding-top: 2.734vw;
  }

  .sec-clinic-more-func .more-functions-list li {
    padding-block: 1.953vw;
    font-size: 1.465vw;
  }

  .sec-clinic-more-func .more-functions-list li:nth-child(4n) {
    padding: 1.464vw 2.344vw 1.464vw 2.93vw;
  }

  [lang="my"] .sec-clinic-more-func .more-functions-list li {
    font-size: 1.563vw;
  }

  .sec-clinic-more-func .more-functions-list p::before {
    width: 1.953vw;
    height: 1.953vw;
  }

  .sec-clinic-more-func .related-systems {
    padding-top: 8.727vw;
  }

  .sec-clinic-more-func .system-box {
    width: 29.5vw;
    padding: 0 1.465vw;
    border: 0.098vw solid #67D686;
    border-radius: 0.977vw;
    box-shadow: 0vw 0.098vw 0.293vw 0vw rgba(0, 0, 0, 0.3), 0vw 0.391vw 0.781vw 0.293vw rgba(0, 0, 0, 0.15);
    font-size: 1.465vw;
  }

  .sec-clinic-more-func .system-box .brief-intro {
    height: 16.113vw;
    padding-top: 4.102vw;
  }

  .sec-clinic-more-func .system-box .brief-intro::before {
    width: 8.886vw;
    height: 8.886vw;
    box-shadow: 0vw 0.391vw 0.391vw 0vw rgba(0, 0, 0, 0.30), 0vw 0.781vw 1.172vw 0vw rgba(0, 0, 0, 0.15);
  }

  .sec-clinic-more-func .clinic-intro {
    padding-top: 0.488vw;
  }

  .sec-clinic-more-func .system-box .sys-name {
    padding: 1.953vw 0vw;
    font-size: 1.758vw;
  }
}

@media only screen and (max-width : 768px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  .sec-clinic-advantages {
    padding-top: 6.25vw;
    background: url("../img/clinic/bg_clinic_sp.png") no-repeat center/cover;
  }

  .sec-clinic-advantages .system {
    flex-direction: column-reverse;
    gap: 10vw;
    margin-bottom: 6.641vw;
    padding: 6.641vw 2.344vw 6.381vw;
    border-bottom: 0.13vw solid #2dbb54;
  }

  .sec-clinic-advantages .system-list li:before {
    top: 13%;
  }

  .sec-clinic-advantages .system-list li:nth-child(2n)::before {
    top: 9%;
  }

  .sec-clinic-advantages .system-left {
    width: 100%;
  }

  .sec-clinic-advantages .system-right {
    width: 94.359vw;
    height: 76.923vw;
    margin-top: 0;
    text-align: center;
  }

  .sec-clinic-advantages .system-right img {
    width: 100%;
    height: 100%;
  }

  .sec-clinic-advantages .system-list {
    padding-top: 4.063vw;
  }

  /* ________________advantages section end________________ */

  .sec-clinic-functions .functions {
    padding: 12.821vw 0vw 7.693vw 0px;
    border-bottom: 0.998px solid #67D686;
  }

  .sec-clinic-functions .function-txt-wrap {
    background: url(../img/clinic/bg_functions_tree_sp.png) no-repeat top left;
    gap: 15.385vw;
    background-size: auto 93.5%;
  }

  .sec-clinic-functions .function-blk {
    width: 68.205vw;
    min-height: 48.718vw;
  }

  .sec-clinic-functions .function-blk:nth-child(even) {
    align-self: flex-end;
  }

  .sec-clinic-functions .function-blk h3 {
    font-size: 3.59vw;
    font-weight: 600;
  }

  .sec-clinic-functions .function-blk ul {
    display: flex;
    flex-direction: column;
    margin-top: 2.051vw;
    gap: 1.282vw;
  }

  .sec-clinic-functions .function-blk li {
    position: relative;
    margin-left: 2.564vw;
    padding-left: 3.846vw;
    color: #606060;
    font-size: 3.59vw;
    font-weight: 500;
  }

  .sec-clinic-functions .function-blk li::before {
    width: 0.513vw;
    height: 0.513vw;
  }

  /* _____________function section end______________ */

  .sec-clinic-more-func {
    padding: 12.821vw 2.344vw 15.897vw;
  }

  .sec-clinic-more-func .more-functions-list {
    padding-top: 8.974vw;
  }

  .sec-clinic-more-func .more-functions-list li {
    position: relative;
    padding-block: 3.128vw;
  }

  .sec-clinic-more-func .more-functions-list li p {
    padding-left: 2.82vw;
    font-size: 3.59vw;
  }

  .sec-clinic-more-func .more-functions-list p::before {
    display: inline-block;
    position: absolute;
    width: 4.873vw;
    height: 4.873vw;
    background: url(../img/clinic/ico_checkmark.svg) no-repeat center/cover;
    content: '';
  }

  .sec-clinic-more-func .related-systems {
    align-items: center;
    flex-direction: column;
    padding-top: 24.615vw;
    gap: 24.615vw;
  }

  .sec-clinic-more-func .system-box .brief-intro::before {
    width: 23.077vw;
    height: 23.077vw;
    box-shadow: 0vw 1.026vw 1.026vw 0vw rgba(0, 0, 0, 0.30), 0vw 2.051vw 3.077vw 0vw rgba(0, 0, 0, 0.15);
  }

  .sec-clinic-more-func .system-box {
    width: 84.615vw;
    padding: 0 3.846vw;
    border: 0.256vw solid #67D686;
    border-radius: 2.564vw;
    box-shadow: 0px 0.256vw 0.769vw 0px rgba(0, 0, 0, 0.3), 0px 1.026vw 2.051vw 0.769vw rgba(0, 0, 0, 0.15);
  }

  .sec-clinic-more-func .system-box .brief-intro {
    height: 42.308vw;
    padding-top: 11.538vw;
    font-size: 3.59vw;
  }

  .sec-clinic-more-func .clinic-intro {
    padding-top: 0;
  }

  .sec-clinic-more-func .system-box .sys-name {
    padding: 5.128vw 0px;
    font-size: 4.103vw;
  }
}