.container {
  position: relative;
  overflow: hidden
}

.container .sec1 {
  padding: 11.71875vw 13.4375vw 6.30208vw
}

.container .sec1 .pt {
  color: #333;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 2.5vw;
  text-align: center
}

.container .sec1 .pt span {
  color: #EF7C27;
}

.container .sec1 .des {
  color: #75B79F;
  line-height: 1.5
}

.container .sec2 {
  padding: 5.46875vw 13.22917vw 6.97917vw
}

.container .sec2 .item {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.container .sec2 .item:not(:last-child) {
  margin-bottom: 10.88542vw
}

.container .sec2 .item:nth-child(2n) {
  flex-direction: row-reverse
}

.container .sec2 .item:nth-child(2n) .text {
  padding: 0 7.34375vw 0 0
}

.container .sec2 .item:nth-child(2n) .text::before {
  left: auto;
  right: 0
}

.container .sec2 .item .text {
  width: 33.54167vw;
  position: relative;
  padding-left: 7.34375vw
}

.container .sec2 .item .text::before {
  content: '';
  position: absolute;
  left: 0;
  width: .15625vw;
  height: 11.71875vw;
  background: linear-gradient(270deg, #037D6F -7.89%, #ABCAA2 100%)
}

.container .sec2 .item .text .p1 {
  color: #333;
  font-weight: 500;
  margin-bottom: 2.5vw
}

.container .sec2 .item .text .des {
  color: #696969;
  line-height: 1.5
}

.container .sec2 .item .pic img {
  display: block;
  width: 29.0625vw;
  height: 29.0625vw;
  border-radius: 50%;
  object-fit: cover;
  transition: all 600ms
}

.container .sec2 .item .pic:hover img {
  transform: scale(1.05)
}

.container .sec3 {
  padding: 10.15625vw 13.28125vw 6.30208vw
}

.container .sec3 .title {
  text-align: center
}

.container .sec3 .title .p1 {
  color: #333;
  font-weight: 700;
  margin-bottom: 1.09375vw
}

.container .sec3 .title .p2 {
  color: #696969;
  line-height: 1.5;
  margin-bottom: 4.47917vw
}

.container .sec3 .pics {
  display: flex;
  justify-content: space-between
}

.container .sec3 .pics .pic1 {
  width: 34.47917vw;
  position: relative
}

.container .sec3 .pics .pic1 img {
  display: block;
  width: 100%
}

.container .sec3 .pics .pic1 svg {
  position: absolute;
  display: block;
  width: 31.45833vw;
  left: 1.71875vw;
  top: 1.25vw;
  height: auto
}

.container .sec3 .pics .pic2 {
  width: 34.47917vw
}

.container .sec3 .pics .pic2 img {
  display: block;
  width: 100%
}

.container .sec4 {
  background: url("https://www.drkimrossdmd.com/images/pb.jpg") no-repeat;
  background-size: cover;
  padding: 18.02083vw 0 15.41667vw
}

.container .sec4 .content {
  text-align: center;
  color: white
}

.container .sec4 .content .p1 {
  font-weight: 700;
  line-height: 1.5
}

.container .sec4 .content .p2 {
  margin: 1.25vw 0
}

.container .sec4 .content .btn {
  display: inline-flex;
  align-items: center;
  gap: .72917vw;
  color: white;
  transition: all 300ms;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  font-weight: 700
}

.container .sec4 .content .btn svg {
  display: block;
  width: .57292vw;
  height: auto;
  margin-top: .10417vw
}

@media screen and (max-width: 768px) {
  .container .sec1 {
    padding: 30px 5% 60px
  }

  .container .sec1 .pt {
    font-size: 18px;
    margin-bottom: 25px
  }

  .container .sec1 .des {
    font-size: 14px
  }

  .container .sec2 {
    padding: 30px 5% 60px
  }

  .container .sec2 .item {
    flex-direction: column !important
  }

  .container .sec2 .item:not(:last-child) {
    margin-bottom: 80px
  }

  .container .sec2 .item .text {
    width: 100%;
    padding-left: 30px !important;
    padding-right: 0 !important
  }

  .container .sec2 .item .text::before {
    width: 3px;
    min-height: 100px;
    height: 100%;
    right: auto !important;
    left: 0 !important
  }

  .container .sec2 .item .text .p1 {
    font-size: 16px;
    margin-bottom: 15px
  }

  .container .sec2 .item .text .des {
    font-size: 14px
  }

  .container .sec2 .item .pic {
    margin-top: 20px
  }

  .container .sec2 .item .pic img {
    width: 200px;
    height: 200px
  }

  .container .sec3 {
    padding: 60px 5%
  }

  .container .sec3 .title .p1 {
    font-size: 18px;
    margin-bottom: 15px
  }

  .container .sec3 .title .p2 {
    font-size: 14px;
    margin-bottom: 30px
  }

  .container .sec3 .pics {
    flex-direction: column;
    gap: 15px
  }

  .container .sec3 .pics .pic1,
  .container .sec3 .pics .pic2 {
    width: 100%
  }

  .container .sec3 .pics .pic1 svg {
    width: 90%
  }

  .container .sec4 {
    padding: 80px 5%
  }

  .container .sec4 .content .p1 {
    font-size: 18px
  }

  .container .sec4 .content .p2 {
    margin: 15px 0;
    font-size: 14px
  }

  .container .sec4 .content .btn {
    font-size: 14px;
    gap: 10px
  }

  .container .sec4 .content .btn svg {
    width: 10px
  }
}