@charset "UTF-8";
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
  transition: all 0.3s;
}

.container {
  max-width: 60%;
  padding: 5% 0;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .container {
    max-width: 100%;
  }
}

.servicePageMoreBtn {
  padding: 10px 0;
}
.servicePageMoreBtn a {
  font-size: 24px;
  color: #ffb300;
}
.servicePageMoreBtn a:hover {
  color: #333333;
}

#topFixedMenu {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px;
  background: rgba(51, 51, 51, 0.8);
}
#topFixedMenu #backMainMenuBtn {
  opacity: 0;
  pointer-events: none;
}
#topFixedMenu #backMainMenuBtn.active {
  opacity: 1;
  pointer-events: initial;
}
#topFixedMenu #navLogo {
  display: block;
  position: absolute;
  top: 50%;
  left: 6%;
  transform: translate(-50%, -50%);
}
@media (max-width: 1024px) {
  #topFixedMenu #navLogo {
    left: 115px;
  }
}
#topFixedMenu #navLogo.active {
  left: 50%;
}
#topFixedMenu #menuBtn {
  display: inline-block;
  cursor: pointer;
}
#topFixedMenu #menuBtn:hover .bar1,
#topFixedMenu #menuBtn:hover .bar2,
#topFixedMenu #menuBtn:hover .bar3 {
  background-color: #ffb300;
}
#topFixedMenu #menuBtn .bar1,
#topFixedMenu #menuBtn .bar2,
#topFixedMenu #menuBtn .bar3 {
  width: 35px;
  height: 5px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}
#topFixedMenu #menuBtn.active .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
#topFixedMenu #menuBtn.active .bar2 {
  opacity: 0;
}
#topFixedMenu #menuBtn.active .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

#menuContent {
  width: 100%;
  height: calc(100vh - 79px);
  position: fixed;
  top: 79px;
  left: -100%;
  z-index: 9;
  background: rgba(51, 51, 51, 0.8);
  transition: all 0.4s;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -moz-column-gap: 50px;
       column-gap: 50px;
  row-gap: 50px;
  padding: 10% 15%;
}
@media (max-width: 1024px) {
  #menuContent {
    padding: 0;
    -moz-column-gap: 0px;
         column-gap: 0px;
    row-gap: 0px;
    grid-template-columns: repeat(1, 1fr);
  }
}
#menuContent .menuItemBox {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 30px;
}
@media (max-width: 1024px) {
  #menuContent .menuItemBox {
    border-radius: 0px;
  }
}
#menuContent .menuItemBox .menuItemBg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#menuContent .menuItemBox .menuItemText {
  position: absolute;
  bottom: 5%;
  left: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
}
#menuContent .menuItemBox .menuItemText span {
  color: #fff;
  font-size: 26px;
  text-shadow: 0px 0px 3px #666;
  transition: all 0.3s;
}
#menuContent .menuItemBox:hover .menuItemText span {
  color: #ffb300;
}

#menuContent.active {
  left: 0%;
}

.innerPageBanner {
  width: 100%;
  height: 40vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.innerPageBanner .bannerTitle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;
  color: #fff;
}
.innerPageBanner .bannerTitle h2 {
  font-size: 44px;
  letter-spacing: 4px;
  text-shadow: 0.3px 0.3px 3px #666;
  margin-bottom: 10px;
}
.innerPageBanner .bannerTitle p {
  font-size: 28px;
  letter-spacing: 2px;
  text-shadow: 0.3px 0.3px 3px #666;
  font-family: sans-serif;
}

#footer {
  display: flex;
}
@media (max-width: 1024px) {
  #footer {
    flex-direction: column-reverse;
  }
}
#footer .leftPhoneList,
#footer .rightFormSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  padding: 50px 0;
}
#footer .leftPhoneList h4,
#footer .rightFormSection h4 {
  font-size: 36px;
  letter-spacing: 2px;
  margin-bottom: 20px;
}
#footer .leftPhoneList h6,
#footer .rightFormSection h6 {
  font-size: 16px;
  margin: 10px 0;
}
#footer .leftPhoneList p,
#footer .rightFormSection p {
  text-align: center;
  letter-spacing: 2px;
  margin: 10px 0;
}
#footer .leftPhoneList {
  background: url(../img/footer_phone_bg.jpg);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 1024px) {
  #footer .leftPhoneList {
    width: 100%;
  }
}
#footer .leftPhoneList #footerPhoneList {
  padding-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -moz-column-gap: 40px;
       column-gap: 40px;
  row-gap: 30px;
}
@media (max-width: 1024px) {
  #footer .leftPhoneList #footerPhoneList {
    grid-template-columns: repeat(1, 1fr);
    -moz-column-gap: 10px;
         column-gap: 10px;
    row-gap: 30px;
  }
}
#footer .leftPhoneList #footerPhoneList .phoneListBox {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#footer .leftPhoneList #footerPhoneList .phoneListBox .phoneNumber {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
}
@media (max-width: 1024px) {
  #footer .leftPhoneList #footerPhoneList .phoneListBox .phoneNumber {
    align-items: flex-start;
    overflow: hidden;
    height: 0;
    transition: all 0.3s;
  }
  #footer .leftPhoneList #footerPhoneList .phoneListBox .phoneNumber.active {
    height: 250px;
  }
}
#footer .leftPhoneList #footerPhoneList .phoneListBox .phoneNumber a {
  font-size: 24px;
  margin-bottom: 5px;
}
#footer .leftPhoneList #footerPhoneList .phoneListBox .phoneNumber a:hover {
  color: #fff;
}
#footer .leftPhoneList #footerPhoneList .phoneListBox h5,
#footer .leftPhoneList #footerPhoneList .phoneListBox a {
  color: #ffb300;
  letter-spacing: 4px;
}
#footer .leftPhoneList #footerPhoneList .phoneListBox h5 {
  font-size: 26px;
  margin-bottom: 10px;
}
@media (max-width: 1024px) {
  #footer .leftPhoneList #footerPhoneList .phoneListBox h5 {
    color: #fff;
    background: #ffb300;
    padding: 10px 20px;
    border-radius: 10px;
  }
  #footer .leftPhoneList #footerPhoneList .phoneListBox h5:hover {
    background: rgb(204, 143.2, 0);
  }
}
#footer .rightFormSection {
  background: url(../img/footer_form_bg.jpg);
  background-position: center;
  width: 0%;
}
@media (max-width: 1024px) {
  #footer .rightFormSection {
    width: 100%;
  }
}
#footer .rightFormSection #form {
  width: 60%;
}
@media (max-width: 1024px) {
  #footer .rightFormSection #form {
    width: 90%;
  }
}
#footer .rightFormSection #form .form1 .form-name label {
  display: block;
  margin-bottom: 5px;
}
#footer .rightFormSection #form .form1 .form-name input {
  width: 100%;
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 10px;
  border: none;
}
#footer .rightFormSection #form .form1 .form-name input:focus {
  outline: none;
}
#footer .rightFormSection #form .form1 .form-sex {
  margin-bottom: 5px;
}
#footer .rightFormSection #form .form2 label {
  display: block;
  margin-bottom: 5px;
}
#footer .rightFormSection #form .form2 input {
  width: 100%;
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 10px;
  border: none;
}
#footer .rightFormSection #form .form2 input:focus {
  outline: none;
}
#footer .rightFormSection #form .form3 label {
  display: block;
  margin-bottom: 5px;
}
#footer .rightFormSection #form .form3 select {
  width: 100%;
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 10px;
  border: none;
}
#footer .rightFormSection #form .form3 select:focus {
  outline: none;
}
#footer .rightFormSection #form .form-message label {
  display: block;
  margin-bottom: 5px;
}
#footer .rightFormSection #form .form-message textarea {
  width: 100%;
  height: 200px;
  margin-bottom: 20px;
  border-radius: 10px;
  border: none;
  padding: 5px;
}
#footer .rightFormSection #form .form-message textarea:focus {
  outline: none;
}
#footer .rightFormSection #form .form-btn {
  display: flex;
  justify-content: space-evenly;
}
#footer .rightFormSection #form .form-btn button {
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  border: none;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s;
}
#footer .rightFormSection #form .form-btn button:hover {
  background-color: rgb(229.5, 229.5, 229.5);
}
#footer .rightFormSection #form .form-btn #submit-btn {
  background-color: #ffb300;
  color: #fff;
}
#footer .rightFormSection #form .form-btn #submit-btn:hover {
  background-color: rgb(204, 143.2, 0);
}

#copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #fff;
  background-color: #000;
  padding: 15px 10px;
  position: relative;
}
@media (max-width: 1024px) {
  #copyright {
    flex-direction: column-reverse;
  }
}
#copyright a {
  color: #fff;
}
#copyright a:hover {
  color: #ffb300;
}
#copyright .lefeSide {
  letter-spacing: 2px;
}
#copyright .lefeSide br {
  display: none;
}
@media (max-width: 1024px) {
  #copyright .lefeSide br {
    display: block;
  }
}
@media (max-width: 1024px) {
  #copyright .lefeSide {
    letter-spacing: 0;
    text-align: center;
  }
}
#copyright .centerLogo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#copyright .centerLogo img {
  max-width: 120px;
}
@media (max-width: 1024px) {
  #copyright .centerLogo {
    position: relative;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    order: 1;
  }
}
#copyright .rightSide a {
  border-left: 1px solid #fff;
  padding: 0 5px;
}
#copyright .rightSide a:hover {
  color: #ffb300;
}
#copyright .rightSide a:first-child {
  border-left: none;
}

.fixedBtn {
  position: fixed;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: 9;
}

.lineBtn1,
.lineBtn2,
.lineBtn3 {
  background: #59af0d;
  left: 10px;
  font-family: sans-serif;
  color: #fff;
  display: grid;
  place-content: center;
  font-size: 12px;
  letter-spacing: 2px;
  text-align: center;
}

.lineBtn1 {
  bottom: 140px;
}

.lineBtn2 {
  bottom: 80px;
}

.lineBtn3 {
  bottom: 20px;
}

.fixPhoneBtn1 {
  background: #ff6600;
  right: 10px;
  bottom: 140px;
  font-family: sans-serif;
  color: #fff;
  display: grid;
  place-content: center;
  font-size: 20px;
}

.fixPhoneBtn2 {
  background: #ff6600;
  right: 10px;
  bottom: 80px;
  font-family: sans-serif;
  color: #fff;
  display: grid;
  place-content: center;
  font-size: 20px;
}

.fixPhoneBtn3 {
  background: #ff6600;
  right: 10px;
  bottom: 20px;
  font-family: sans-serif;
  color: #fff;
  display: grid;
  place-content: center;
  font-size: 20px;
}

/**************************/
#indexPage {
  width: 100%;
}
#indexPage .groupPhoto {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: -2;
  width: 100%;
  height: 100dvh;
  background: url("../img/ABOUT_BG.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 1024px) {
  #indexPage .groupPhoto {
    background: url("../img/ABOUT.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }
}
#indexPage .videoBanner {
  position: relative;
  width: 100%;
  height: 100dvh;
}
#indexPage .videoBanner #videoBg {
  display: block;
  width: 100%;
  height: 100dvh;
  -o-object-fit: cover;
     object-fit: cover;
}
#indexPage .videoBanner .bannerText,
#indexPage .videoBanner .bannerPhone,
#indexPage .videoBanner .bannerLiveBtn {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
#indexPage .videoBanner .bannerText {
  top: 40%;
  width: 100%;
  text-align: center;
}
@media (max-width: 1024px) {
  #indexPage .videoBanner .bannerText {
    top: 40%;
    width: 80%;
  }
}
#indexPage .videoBanner .bannerText h1 {
  color: #fff;
  font-size: 36px;
  letter-spacing: 2px;
}
@media (max-width: 1024px) {
  #indexPage .videoBanner .bannerText h1 {
    text-align: center;
    font-size: 24px;
  }
  #indexPage .videoBanner .bannerText h1 br {
    display: none;
  }
}
#indexPage .videoBanner .bannerPhone {
  top: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 1024px) {
  #indexPage .videoBanner .bannerPhone {
    width: 100%;
  }
}
#indexPage .videoBanner .bannerPhone p {
  font-size: 32px;
  color: #fff;
  margin-bottom: 10px;
}
@media (max-width: 1024px) {
  #indexPage .videoBanner .bannerPhone p {
    font-size: 20px;
  }
}
#indexPage .videoBanner .bannerPhone a {
  font-size: 40px;
  color: #fff;
  letter-spacing: 2px;
}
@media (max-width: 1024px) {
  #indexPage .videoBanner .bannerPhone a {
    font-size: 22px;
    margin-bottom: 10px;
  }
}
#indexPage .videoBanner .bannerLiveBtn {
  top: 85%;
}
#indexPage .videoBanner .bannerLiveBtn a {
  padding: 15px 30px;
  background: skyblue;
  color: #fff;
  letter-spacing: 2px;
  font-size: 32px;
  border-radius: 30px;
}
@media (max-width: 1024px) {
  #indexPage .videoBanner .bannerLiveBtn a {
    font-size: 16px;
  }
}
#indexPage .indexAboutUs {
  width: 100%;
  height: 100dvh;
  position: relative;
}
#indexPage .indexAboutUs .aboutTopText {
  position: absolute;
  bottom: 100px;
  left: 30px;
}
@media (max-width: 1024px) {
  #indexPage .indexAboutUs .aboutTopText {
    width: 100%;
    bottom: initial;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
#indexPage .indexAboutUs .aboutTopText .topText {
  color: #fff;
  text-shadow: 0px 0px 3px #666;
  font-weight: bold;
  font-size: 52px;
}
@media (max-width: 1024px) {
  #indexPage .indexAboutUs .aboutTopText .topText {
    font-size: 42px;
    text-align: center;
  }
}
#indexPage .indexAboutUs .aboutTopText img {
  max-width: 100%;
}
@media (max-width: 1024px) {
  #indexPage .indexAboutUs .aboutTopText img {
    max-width: 60%;
    margin-top: 30px;
  }
}
#indexPage .indexAboutUs .aboutUnderText {
  position: absolute;
  bottom: 30px;
  left: 30px;
}
@media (max-width: 1024px) {
  #indexPage .indexAboutUs .aboutUnderText {
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
}
#indexPage .indexAboutUs .aboutUnderText .bottomText {
  display: flex;
  align-items: end;
  color: #fff;
}
@media (max-width: 1024px) {
  #indexPage .indexAboutUs .aboutUnderText .bottomText {
    flex-direction: column;
    align-items: center;
  }
}
#indexPage .indexAboutUs .aboutUnderText .bottomText h2 {
  font-size: 60px;
  padding-right: 20px;
  text-shadow: 0px 0px 3px #666;
}
@media (max-width: 1024px) {
  #indexPage .indexAboutUs .aboutUnderText .bottomText h2 {
    padding-right: 0;
  }
}
#indexPage .indexAboutUs .aboutUnderText .bottomText span {
  font-size: 36px;
  text-shadow: 0px 0px 3px #666;
}
@media (max-width: 1024px) {
  #indexPage .indexAboutUs .aboutUnderText .bottomText span:nth-child(3) {
    display: none;
  }
}
@media (max-width: 1024px) {
  #indexPage #fullService.indexService {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  #indexPage #fullService.indexService .serviceBox {
    height: 150px;
  }
  #indexPage #fullService.indexService .serviceBox img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
#indexPage #indexFeedback {
  width: 100%;
  height: auto;
  background: url("../img/CUSTOMER.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10%;
}
@media (max-width: 1024px) {
  #indexPage #indexFeedback {
    padding: 0 5%;
  }
}
#indexPage #indexFeedback .feedbackSwiperTitle h2,
#indexPage #indexFeedback .feedbackSwiperTitle p {
  color: #fff;
  text-align: center;
  letter-spacing: 2px;
  text-shadow: 0px 0px 3px #666;
}
#indexPage #indexFeedback .feedbackSwiperTitle h2 {
  font-size: 42px;
  margin-bottom: 10px;
}
#indexPage #indexFeedback .feedbackSwiperTitle p {
  font-size: 20px;
  font-family: sans-serif;
}
#indexPage #indexFeedback .indexFeedbackSwiper {
  width: 100%;
  height: 100%;
  padding-bottom: 2%;
  margin: 5% 0;
}
#indexPage #indexFeedback .indexFeedbackSwiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
#indexPage #indexFeedback .indexFeedbackSwiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px;
  box-shadow: 1px 1px 3px #666;
}
#indexPage #indexProcess {
  width: 100%;
  height: 100dvh;
}
@media (max-width: 1024px) {
  #indexPage #indexProcess {
    height: 150dvh;
  }
}
#indexPage #indexProcess .processSwiper {
  width: 100%;
  height: 100%;
}
#indexPage #indexProcess .processSwiper .processBox {
  width: 100%;
  height: 100%;
  position: relative;
}
#indexPage #indexProcess .processSwiper .processBox .processBoxBg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#indexPage #indexProcess .processSwiper .processBox .processBoxContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
}
#indexPage #indexProcess .processSwiper .processBox .processBoxContent p {
  padding: 20px 0;
  color: #fff;
  font-size: 20px;
  text-align: center;
  text-shadow: 0px 0px 3px #666;
}
#indexPage #indexProcess .processSwiper .processBox .contactBtn {
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

#aboutPage h1 {
  font-size: 26px;
  letter-spacing: 2px;
  text-align: left;
  margin-bottom: 20px;
}
@media (max-width: 1024px) {
  #aboutPage h1 {
    text-align: center;
  }
}
#aboutPage h2,
#aboutPage h3 {
  margin: 20px 0;
}
@media (max-width: 1024px) {
  #aboutPage h2,
  #aboutPage h3 {
    padding: 0 5%;
    font-size: 20px;
  }
}
#aboutPage p {
  line-height: 1.75;
  letter-spacing: 2px;
  margin-bottom: 20px;
}
@media (max-width: 1024px) {
  #aboutPage p {
    padding: 0 5%;
  }
}
#aboutPage ul {
  list-style: none;
}
#aboutPage ul li {
  margin-bottom: 10px;
}
@media (max-width: 1024px) {
  #aboutPage ul li {
    padding: 0 5%;
  }
}
#aboutPage img {
  width: 100%;
}
#aboutPage .aboutPageBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 1024px) {
  #aboutPage .aboutPageBox {
    flex-direction: column;
  }
}
#aboutPage .aboutPageBox .leftText {
  flex: 1;
  padding-right: 20px;
}
@media (max-width: 1024px) {
  #aboutPage .aboutPageBox .leftText {
    padding-right: 0;
  }
}
#aboutPage .aboutPageBox .rightImg {
  flex: 1;
}

#aboutFeedback {
  padding: 0 10%;
  padding-top: 50px;
}
#aboutFeedback .aboutSwiperTitle h2,
#aboutFeedback .aboutSwiperTitle p {
  text-align: center;
  letter-spacing: 2px;
}
#aboutFeedback .aboutSwiperTitle h2 {
  font-size: 42px;
  margin-bottom: 10px;
}
#aboutFeedback .aboutSwiperTitle p {
  font-size: 20px;
  font-family: sans-serif;
}
#aboutFeedback .aboutSwiper {
  width: 100%;
  height: 100%;
  padding: 5% 0;
  margin: 5% 0;
}
#aboutFeedback .aboutSwiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
#aboutFeedback .aboutSwiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px;
  box-shadow: 1px 1px 3px #666;
}

#casePage h1 {
  text-align: center;
  letter-spacing: 2px;
  font-size: 40px;
}

#caseList {
  padding-top: 50px;
}
#caseList .casebox {
  margin-bottom: 10px;
}
#caseList .casebox .caseTitle {
  background: #efefef;
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  border-left: 5px solid #000;
  box-shadow: 0.5px 0.5px 1px #333;
  cursor: pointer;
  transition: all 0.3s;
}
@media (max-width: 1024px) {
  #caseList .casebox .caseTitle {
    padding: 10px 10px;
    border-left: none;
  }
}
#caseList .casebox .caseTitle:hover, #caseList .casebox .caseTitle:focus {
  background: #d8d8d8;
}
#caseList .casebox .caseTitle h2 {
  font-size: 26px;
}
@media (max-width: 1024px) {
  #caseList .casebox .caseTitle h2 {
    font-size: 16px;
  }
}
#caseList .casebox .caseTitle h2 a {
  color: #000;
}
#caseList .casebox .caseTitle img {
  width: 32px;
  transform: rotate(0 deg);
  transition: all 0.3s;
}
@media (max-width: 1024px) {
  #caseList .casebox .caseTitle img {
    width: 24px;
  }
}
#caseList .casebox .caseTitle.active {
  background: #d8d8d8;
}
#caseList .casebox .caseTitle.active img {
  transform: rotate(180deg);
}
#caseList .casebox .caseContent {
  margin-top: 20px;
  padding: 0 10px;
  font-size: 18px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease;
}
#caseList .casebox .caseContent p {
  margin-bottom: 10px;
  line-height: 1.8;
}
@media (max-width: 1024px) {
  #caseList .casebox .caseContent p {
    padding: 0 10px;
  }
}
#caseList .casebox .caseContent.active {
  max-height: 3000px;
}

#pagination {
  display: flex;
  justify-content: center;
}
#pagination a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #efefef;
  font-size: 24px;
  margin: 0 10px;
  text-decoration: none;
  color: #333333;
}
#pagination a.active {
  background-color: #333333;
  color: #efefef;
  font-weight: bold;
}

#articleContent h1 {
  text-align: center;
  letter-spacing: 2px;
  font-size: 40px;
}
#articleContent p {
  margin-top: 20px;
  padding: 0 20px;
}

.priceTabel {
  width: 100%;
  text-align: center;
  margin: 50px 0;
  width: 100%;
  border-collapse: separate;
  border-spacing: 5px 10px;
}
@media (max-width: 1024px) {
  .priceTabel {
    display: none;
  }
}
.priceTabel th {
  background-color: #333333;
  color: #fff;
  padding: 15px;
  border-radius: 10px;
  letter-spacing: 2px;
}
.priceTabel td {
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0px 1px 3px #aaa;
  letter-spacing: 2px;
}
.priceTabel tr {
  transition: all 0.3s;
}
.priceTabel tr:nth-child(even) {
  background-color: #efefef;
}
.priceTabel tr:hover {
  background-color: #ddd;
}

.accordion {
  display: none;
}
@media (max-width: 1024px) {
  .accordion {
    display: block;
    margin: 50px 0;
  }
}
.accordion .accordion-item {
  margin: 10px 0px;
}
.accordion .accordion-item:nth-of-type(even) .accordion-button {
  background: #efefef;
  color: #333333;
}
.accordion .accordion-item .accordion-button {
  font-size: 22px;
  width: 100%;
  background: #d8d8d8;
  color: #fff;
  border: none;
  outline: none;
  padding: 10px;
  position: relative;
}
.accordion .accordion-item .accordion-button::after {
  position: absolute;
  content: "▲";
  top: 50%;
  right: 5%;
  transform: translate(-50%, -50%) rotate(180deg);
  color: #fff;
  transform-origin: center center;
  transition: all 0.3s;
}
.accordion .accordion-item .accordion-button.active {
  background-color: #333333;
  color: #fff;
}
.accordion .accordion-item .accordion-button.active::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.accordion .accordion-item .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.accordion .accordion-item .accordion-content .Availableinformation,
.accordion .accordion-item .accordion-content .workdays,
.accordion .accordion-item .accordion-content .servicefee {
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  width: 95%;
  margin: 10px auto;
  padding: 10px;
  box-shadow: 1px 1px 5px #999;
}
.accordion .accordion-item .accordion-content .Availableinformation h3,
.accordion .accordion-item .accordion-content .workdays h3,
.accordion .accordion-item .accordion-content .servicefee h3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

#servicePage h1[id], #servicePage h2[id], #servicePage h3[id] {
  scroll-margin-top: 100px;
}
#servicePage h1 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 40px;
}
#servicePage .serviceContent {
  padding: 20px 0px;
}
@media (max-width: 1024px) {
  #servicePage .serviceContent {
    padding: 5%;
  }
}
#servicePage .serviceContent h2,
#servicePage .serviceContent h3 {
  margin-bottom: 10px;
}
#servicePage .serviceContent p {
  margin-bottom: 20px;
}
#servicePage .serviceContent ul,
#servicePage .serviceContent ol {
  list-style: none;
}
#servicePage .serviceContent ul li,
#servicePage .serviceContent ol li {
  font-weight: bold;
  margin-bottom: 10px;
}
#servicePage .article-toc {
  border: 1px solid #ddd;
  background: #f9f9f9;
  margin-bottom: 40px;
  border-radius: 8px;
  overflow: hidden;
}
#servicePage .article-toc .toc-title {
  background: #333;
  color: #fff;
  padding: 10px 20px;
  font-weight: bold;
}
#servicePage .article-toc ul {
  padding: 15px 20px;
  margin: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 768px) {
  #servicePage .article-toc ul {
    grid-template-columns: 1fr;
  }
}
#servicePage .article-toc ul li {
  border-bottom: 1px dashed #ccc;
  padding: 5px 0;
}
#servicePage .article-toc ul li a {
  color: #555;
  text-decoration: none;
  transition: 0.3s;
}
#servicePage .article-toc ul li a:hover {
  color: #ed702d;
  padding-left: 5px;
}
#servicePage .highlight-under {
  text-decoration: underline;
  font-weight: bold;
  color: #333;
}
#servicePage .emphasize-text {
  color: brown;
  font-weight: bold;
  font-size: 20px;
}
#servicePage .info-card {
  background: #fff;
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 25px;
}
#servicePage .info-card ul li {
  margin-bottom: 15px;
  position: relative;
  padding-left: 20px;
}
#servicePage .info-card ul li:before {
  content: "•";
  color: #ed702d;
  position: absolute;
  left: 0;
  font-size: 20px;
}
#servicePage .case-study {
  padding: 30px;
  border-left: solid 6px #ed702d;
  background: #f2f2f2;
  margin: 30px 0;
  border-radius: 0 10px 10px 0;
}
#servicePage .case-study h4 {
  color: #333;
  font-size: 22px;
  margin-bottom: 15px;
}
#servicePage .contactBtn {
  padding-top: 30px;
  text-align: center;
}
@media (max-width: 1024px) {
  #servicePage .contactBtn {
    padding-bottom: 30px;
  }
}
#servicePage .contactBtn a {
  letter-spacing: 4px;
  font-size: 22px;
  color: #fff;
  background-color: #333;
  padding: 20px 40px;
  border-radius: 30px;
}
#servicePage .contactBtn a:hover {
  color: #ed702d;
  background-color: #000;
}

#fullService {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1024px) {
  #fullService {
    display: none;
  }
}
#fullService .serviceBox {
  overflow: hidden;
  position: relative;
}
#fullService .serviceBox img {
  display: block;
  width: 100%;
  filter: brightness(1);
  transform: scale(1);
  transition: all 0.5s;
}
#fullService .serviceBox span {
  color: #fff;
  text-shadow: 0px 0px 3px #000;
  letter-spacing: 2px;
  font-size: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: all 0.5s;
}
#fullService .serviceBox:hover img {
  filter: brightness(0.3);
  transform: scale(1.2);
}
#fullService .serviceBox:hover span {
  color: #ed702d;
}

@media (max-width: 1024px) {
  #fullService.serviceIndex {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
#fullService.serviceIndex .serviceBox {
  overflow: hidden;
  position: relative;
}
#fullService.serviceIndex .serviceBox img {
  display: block;
  width: 100%;
  filter: brightness(1);
  transform: scale(1);
  transition: all 0.5s;
}
#fullService.serviceIndex .serviceBox span {
  color: #fff;
  text-shadow: 0px 0px 3px #000;
  letter-spacing: 2px;
  font-size: 26px !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: all 0.5s;
}

.affairsBtn {
  margin-top: 50px;
  text-align: center;
}
.affairsBtn a {
  font-size: 18px;
  padding: 15px 20px;
  border-radius: 20px;
  background-color: #ed702d;
  color: #000;
}
.affairsBtn a:hover {
  background-color: rgb(212.7631578947, 86.1184210526, 18.2368421053);
}

.service-phone-box {
  display: grid;
  place-items: center;
  padding-top: 10px;
  background: #ed702d;
  border-radius: 20px;
}
@media (max-width: 1024px) {
  .service-phone-box {
    margin: 3%;
  }
}
.service-phone-box p {
  font-size: 18px;
  color: #fff;
}
.service-phone-box p a {
  font-size: 18px;
  color: #fff;
}
.service-phone-box p a:hover {
  color: #00f;
}

#ProcessPage .ProcessPageSection {
  position: relative;
}
#ProcessPage .ProcessPageSection .processBg {
  position: relative;
  z-index: -1;
  display: block;
  width: 100%;
}
#ProcessPage .ProcessPageSection .number {
  position: absolute;
  transform: translate(-50%, -50%);
}
@media (max-width: 1024px) {
  #ProcessPage .ProcessPageSection .number {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 50px;
  }
}
#ProcessPage .ProcessPageSection .oddNumber {
  top: 50%;
  left: 10%;
}
@media (max-width: 1024px) {
  #ProcessPage .ProcessPageSection .oddNumber {
    top: 25%;
    left: 50%;
  }
}
#ProcessPage .ProcessPageSection .evenNumber {
  top: 50%;
  right: 0%;
}
@media (max-width: 1024px) {
  #ProcessPage .ProcessPageSection .evenNumber {
    top: 25%;
    left: 50%;
    right: initial;
  }
}
#ProcessPage .ProcessPageSection .processContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 1024px) {
  #ProcessPage .ProcessPageSection .processContent {
    top: 60%;
  }
}
#ProcessPage .ProcessPageSection .processContent p {
  text-align: center;
  font-size: 24px;
  color: #fff;
  text-shadow: 0px 0px 5px #333;
  margin: 20px 0;
}
#ProcessPage .ProcessPageSection .processContent #processPageBtn {
  font-size: 24px;
  background: #ed702d;
  color: #333;
  padding: 10px 30px;
  border-radius: 30px;
  letter-spacing: 2px;
  font-weight: bold;
  transition: all 0.3s;
}
#ProcessPage .ProcessPageSection .processContent #processPageBtn:hover {
  background: rgb(212.7631578947, 86.1184210526, 18.2368421053);
}
@media (max-width: 1024px) {
  #ProcessPage .ProcessPageSection .processContent #processPageBtn {
    font-size: 16px;
  }
}
#ProcessPage .ProcessPageSection .nextIcon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

#extramaritalAffairs .affairs {
  width: 100%;
  min-height: 100dvh;
}
@media (max-width: 1024px) {
  #extramaritalAffairs .affairs {
    min-height: auto;
  }
}
#extramaritalAffairs .affairs img {
  width: 100%;
  vertical-align: top;
}
@media (max-width: 1024px) {
  #extramaritalAffairs #affairs1 {
    padding-top: 30px;
    background-color: black;
  }
}

#maritalPropertyBanner img {
  width: 100%;
}
@media (max-width: 1024px) {
  #maritalPropertyBanner .pcBanner {
    display: none;
  }
}
#maritalPropertyBanner .mBanner {
  display: none;
}
@media (max-width: 1024px) {
  #maritalPropertyBanner .mBanner {
    display: block;
  }
}

#maritalPropertyArticle {
  width: 900px;
  margin: 0 auto;
  padding: 50px 0;
}
@media (max-width: 1024px) {
  #maritalPropertyArticle {
    width: 100%;
  }
}
#maritalPropertyArticle h2,
#maritalPropertyArticle h3 {
  color: #5e4c9d;
  margin-bottom: 10px;
}
#maritalPropertyArticle p {
  margin-bottom: 10px;
}
#maritalPropertyArticle li {
  margin-left: 20px;
  margin-bottom: 10px;
}
#maritalPropertyArticle .section1 {
  margin-bottom: 20px;
}
@media (max-width: 1024px) {
  #maritalPropertyArticle .section1 {
    padding: 0 5%;
  }
}
#maritalPropertyArticle .section2 {
  display: flex;
  margin-bottom: 20px;
}
@media (max-width: 1024px) {
  #maritalPropertyArticle .section2 {
    flex-direction: column;
  }
}
#maritalPropertyArticle .section2 .leftImg,
#maritalPropertyArticle .section2 .rightText {
  flex: 1;
}
#maritalPropertyArticle .section2 .leftImg img {
  width: 100%;
}
#maritalPropertyArticle .section2 .rightText {
  padding-left: 20px;
}
@media (max-width: 1024px) {
  #maritalPropertyArticle .section2 .rightText {
    padding: 0 5%;
  }
}
#maritalPropertyArticle .section3 {
  margin-bottom: 20px;
}
@media (max-width: 1024px) {
  #maritalPropertyArticle .section3 {
    padding: 0 5%;
  }
}

#maritalPropertyCenterBanner {
  background: #5e4c9d;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
}
#maritalPropertyCenterBanner p {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}
@media (max-width: 1024px) {
  #maritalPropertyCenterBanner p {
    font-size: 28px;
    padding: 0 15px;
  }
}
#maritalPropertyCenterBanner .contactBtn {
  margin-top: 50px;
}
#maritalPropertyCenterBanner .contactBtn a {
  background: #fff;
  font-size: 24px;
  padding: 10px 30px;
  border-radius: 60px;
}
#maritalPropertyCenterBanner .contactBtn a:hover {
  background: #f1e9fd;
}

#mpQASection {
  width: 900px;
  margin: 0 auto;
  margin-top: 30px;
}
@media (max-width: 1024px) {
  #mpQASection {
    width: 100%;
  }
}
#mpQASection h2 {
  text-align: center;
  color: #5e4c9d;
  font-size: 32px;
}
#mpQASection button {
  width: 100%;
  padding: 10px 20px;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  background-color: #f1e9fd;
  color: #5e4c9d;
  border: none;
  outline: none;
  border-left: 5px solid #5e4c9d;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}
#mpQASection button::after {
  content: ">";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(-50%, -50%) rotate(0);
  transition: all 0.3s;
}
#mpQASection button:hover {
  background-color: rgb(211.25, 186.25, 248.75);
}
#mpQASection button.active {
  border-right: 1px solid #5e4c9d;
}
#mpQASection button.active::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
#mpQASection #QAbox {
  margin-top: 20px;
}
#mpQASection #QAbox .expand-enter-active,
#mpQASection #QAbox .expand-leave-active {
  transition: max-height 0.5s ease-in-out;
}
#mpQASection #QAbox .expand-enter,
#mpQASection #QAbox .expand-leave-to {
  max-height: 0px;
}
#mpQASection #QAbox .content {
  overflow: hidden;
  max-height: 1500px;
  transition: all 0.3s;
}
#mpQASection #QAbox .content .QAtext {
  border: 1px solid #5e4c9d;
  border-top: none;
  border-radius: 0px 0px 10px 10px;
  padding: 10px;
}
#mpQASection #QAbox .content .QAtext p {
  margin-bottom: 10px;
}
#mpQASection #QAbox .content .QAtext li {
  margin-left: 20px;
}

#maritalPropertyCaseSection {
  width: 900px;
  margin: 0 auto;
  margin-top: 50px;
}
@media (max-width: 1024px) {
  #maritalPropertyCaseSection {
    width: 100%;
  }
}
#maritalPropertyCaseSection h2 {
  text-align: center;
  color: #5e4c9d;
  font-size: 32px;
}
#maritalPropertyCaseSection .articlesIndexBox {
  padding: 0;
  padding-bottom: 50px;
}
#maritalPropertyCaseSection .articlesIndexBox .articlesIndex .articleBox {
  padding: 10px;
  border-left: 5px solid #5e4c9d;
  background-color: #f1e9fd;
  box-shadow: none;
}
#maritalPropertyCaseSection .articlesIndexBox .articlesIndex .articleBox .articleNumber {
  color: #5e4c9d;
}
#maritalPropertyCaseSection .articlesIndexBox .articlesIndex .articleBox .articlePreview {
  justify-self: flex-start;
}
#maritalPropertyCaseSection .articlesIndexBox .articlesIndex .articleBox .articlePreview .articleTitle {
  font-size: 16px;
  font-weight: bold;
  color: #5e4c9d;
}
#maritalPropertyCaseSection .articlesIndexBox .articlesIndex .articleBox .articlePreview .articlePart {
  display: none;
}
#maritalPropertyCaseSection .pagination {
  display: none;
  margin-top: 50px;
  text-align: center;
}
#maritalPropertyCaseSection .pagination button {
  margin: 0 10px;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
#maritalPropertyCaseSection .pagination button.active {
  color: #fff;
  background-color: #5e4c9d;
}

.maritalPropertyArticle h1,
.maritalPropertyArticle h2,
.maritalPropertyArticle h3,
.maritalPropertyArticle strong {
  color: #5e4c9d;
}

.abusivePartnerBanner {
  width: 100%;
  height: 55vh;
  background: url(../img/abusivePartner/banner.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.abusivePartnerBanner .bannerText {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 1024px) {
  .abusivePartnerBanner .bannerText {
    width: 100%;
    top: 45%;
  }
}
.abusivePartnerBanner .bannerText h1 {
  color: #fff;
  text-align: center;
}
.abusivePartnerBanner .bannerText h1 span {
  display: block;
}
.abusivePartnerBanner .bannerText h1 span:first-child {
  letter-spacing: 4px;
  font-size: 48px;
}
.abusivePartnerBanner .bannerText h1 span:last-child {
  letter-spacing: 4px;
  font-size: 34px;
}
.abusivePartnerBanner > img {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 0);
}
@media (max-width: 1024px) {
  .abusivePartnerBanner > img {
    width: 90%;
  }
}

#abusivePartnerContent {
  width: 900px;
  margin: 0 auto;
  padding: 5% 0;
}
@media (max-width: 1024px) {
  #abusivePartnerContent {
    width: 100%;
    padding: 5% 3%;
  }
}
#abusivePartnerContent .topText {
  color: #921b83;
  margin-bottom: 20px;
  line-height: 1.5;
  letter-spacing: 2px;
  font-weight: bold;
}
#abusivePartnerContent .firstList p {
  background: #ffe6fc;
  text-align: center;
  color: #921b83;
  border-radius: 10px 5px 10px 5px;
  margin-bottom: 10px;
  padding: 10px;
  font-weight: bold;
}
#abusivePartnerContent .firstList p:nth-child(even) {
  background: #f3d5f0;
}
#abusivePartnerContent .ourStrategy {
  text-align: center;
  color: #3a6ea2;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 36px;
}
#abusivePartnerContent .ourStrategyText {
  line-height: 1.5;
  letter-spacing: 2px;
  font-weight: bold;
  color: #3a6ea2;
  padding-bottom: 20px;
}
#abusivePartnerContent .secondList .listBox {
  padding: 10px 20px;
  background: #e1f0ff;
  margin-bottom: 10px;
  border-radius: 10px;
}
#abusivePartnerContent .secondList .listBox:nth-child(even) {
  background: #cfe7ff;
}
#abusivePartnerContent .secondList .listBox h3 {
  font-weight: bold;
  color: #3a6ea2;
  margin-bottom: 20px;
}
#abusivePartnerContent .secondList .listBox ul {
  margin-left: 60px;
}
@media (max-width: 1024px) {
  #abusivePartnerContent .secondList .listBox ul {
    margin-left: 20px;
  }
}
#abusivePartnerContent .secondList .listBox ul li {
  margin-bottom: 10px;
}
#abusivePartnerContent #faq {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 36px;
  color: #502fac;
}
#abusivePartnerContent .faqLists .faqList button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: #502fac;
  background: #f3e9ff;
  border: none;
  margin-bottom: 10px;
  padding: 10px;
  font-weight: bold;
  font-size: 18px;
  border-left: 6px solid #502fac;
  border-radius: 5px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
@media (max-width: 1024px) {
  #abusivePartnerContent .faqLists .faqList button {
    font-size: 16px;
    text-align: left;
  }
}
#abusivePartnerContent .faqLists .faqList button:nth-child(even) {
  background: #ebdbfe;
}
#abusivePartnerContent .faqLists .faqList button .bx-chevron-right {
  transition: transform 0.3s ease;
  font-size: 20px;
}
#abusivePartnerContent .faqLists .faqList button .bx-chevron-right.rotate {
  transform: rotate(90deg);
}
#abusivePartnerContent .faqLists .faqList .faqText {
  background: #f9f5ff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  margin-bottom: 10px;
  border-radius: 10px;
}
#abusivePartnerContent .faqLists .faqList .faqText p {
  padding: 20px;
}
#abusivePartnerContent .whyChooseUs {
  text-align: center;
  color: #298235;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 36px;
}
#abusivePartnerContent .whyChooseUsCards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
@media (max-width: 1024px) {
  #abusivePartnerContent .whyChooseUsCards {
    grid-template-columns: repeat(1, 1fr);
  }
}
#abusivePartnerContent .whyChooseUsCards .whyChooseUsCard {
  border-radius: 10px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
#abusivePartnerContent .whyChooseUsCards .whyChooseUsCard img {
  border-radius: 10px 10px 0 0;
  width: 100%;
  height: 180px;
  -o-object-fit: cover;
     object-fit: cover;
}
#abusivePartnerContent .whyChooseUsCards .whyChooseUsCard h4 {
  margin: 20px 0;
  text-align: center;
  color: #298235;
  font-size: 26px;
}
#abusivePartnerContent .whyChooseUsCards .whyChooseUsCard p {
  padding: 0 30px;
  margin-bottom: 20px;
}

.divorceAssistanceProgram {
  width: 100%;
  height: 55vh;
  background: url(../img/banner/service/service12.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.divorceAssistanceProgram .bannerText {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 1024px) {
  .divorceAssistanceProgram .bannerText {
    width: 100%;
    top: 65%;
  }
}
.divorceAssistanceProgram .bannerText h1 {
  color: #fff;
  text-align: center;
  font-size: 60px;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
@media (max-width: 1024px) {
  .divorceAssistanceProgram .bannerText h1 {
    font-size: 48px;
  }
}
@media (max-width: 1024px) {
  .divorceAssistanceProgram .bannerText h1 span {
    display: none;
  }
}
.divorceAssistanceProgram .bannerText h1 br {
  display: none;
}
@media (max-width: 1024px) {
  .divorceAssistanceProgram .bannerText h1 br {
    display: block;
  }
}

#divorceAssistanceProgram {
  width: 900px;
  margin: 0 auto;
  padding: 5% 0;
}
@media (max-width: 1024px) {
  #divorceAssistanceProgram {
    width: 100%;
    padding: 5% 3%;
  }
}
#divorceAssistanceProgram .topText {
  text-align: center;
  color: #921b83;
  margin-bottom: 20px;
  line-height: 1.5;
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 36px;
}
@media (max-width: 1024px) {
  #divorceAssistanceProgram .topText {
    font-size: 26px;
  }
}
#divorceAssistanceProgram .topTextArea {
  margin-bottom: 20px;
}
#divorceAssistanceProgram .topTextArea p {
  color: #f06ede;
  text-align: center;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 10px;
}
#divorceAssistanceProgram .topTextArea p:last-child {
  margin-top: 20px;
}
@media (max-width: 1024px) {
  #divorceAssistanceProgram .topTextArea p {
    text-align: left;
  }
}
#divorceAssistanceProgram .firstListTitle {
  text-align: center;
  color: #3a6ea2;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 36px;
}
@media (max-width: 1024px) {
  #divorceAssistanceProgram .firstListTitle {
    font-size: 26px;
  }
}
#divorceAssistanceProgram .firstListTitleText {
  margin-bottom: 20px;
  font-weight: bold;
}
#divorceAssistanceProgram .firstListTitleText p {
  text-align: center;
  color: #3a6ea2;
  margin-bottom: 10px;
}
#divorceAssistanceProgram .bottomText {
  text-align: center;
  color: #502fac;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 36px;
}
@media (max-width: 1024px) {
  #divorceAssistanceProgram .bottomText {
    text-align: left;
    font-size: 26px;
  }
}
#divorceAssistanceProgram .bottomTextArea p {
  text-align: center;
  color: #502fac;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 10px;
}
@media (max-width: 1024px) {
  #divorceAssistanceProgram .bottomTextArea p {
    text-align: left;
  }
}
#divorceAssistanceProgram .firstList p {
  background: #e4f1fc;
  text-align: center;
  color: #5380ae;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 10px;
  font-weight: bold;
}
#divorceAssistanceProgram .firstList p:nth-child(even) {
  background: #cee7ff;
}
#divorceAssistanceProgram .secondListTitle {
  text-align: center;
  color: #316a14;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 36px;
}
@media (max-width: 1024px) {
  #divorceAssistanceProgram .secondListTitle {
    font-size: 26px;
  }
}
#divorceAssistanceProgram .secondList .listBox {
  padding: 10px 20px;
  background: #f2ffec;
  margin-bottom: 10px;
  border-radius: 10px;
}
#divorceAssistanceProgram .secondList .listBox:nth-child(even) {
  background: #e4fed7;
}
#divorceAssistanceProgram .secondList .listBox h3 {
  font-weight: bold;
  color: #316a14;
  margin-bottom: 20px;
}
#divorceAssistanceProgram .secondList .listBox ul {
  margin-left: 60px;
}
@media (max-width: 1024px) {
  #divorceAssistanceProgram .secondList .listBox ul {
    margin-left: 20px;
  }
}
#divorceAssistanceProgram .secondList .listBox ul li {
  margin-bottom: 10px;
}

.sloganSection {
  width: 100%;
  background-color: #ffeffd;
  text-align: center;
  padding: 20px;
}
.sloganSection h3 {
  font-size: 36px;
  color: #8e2020;
  margin-bottom: 20px;
}
.sloganSection p {
  font-size: 24px;
  color: #d43737;
  margin-bottom: 10px;
  font-weight: bold;
}

.whyChooseUs {
  text-align: center;
  color: #827929;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 36px;
}
@media (max-width: 1024px) {
  .whyChooseUs {
    font-size: 26px;
  }
}

.whyChooseUsCards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
@media (max-width: 1024px) {
  .whyChooseUsCards {
    grid-template-columns: repeat(1, 1fr);
  }
}
.whyChooseUsCards .whyChooseUsCard {
  border-radius: 10px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
.whyChooseUsCards .whyChooseUsCard img {
  border-radius: 10px 10px 0 0;
  width: 100%;
  height: 180px;
  -o-object-fit: cover;
     object-fit: cover;
}
.whyChooseUsCards .whyChooseUsCard h4 {
  margin: 20px 0;
  text-align: center;
  color: #827929;
  font-size: 26px;
}
.whyChooseUsCards .whyChooseUsCard p {
  padding: 0 30px;
  margin-bottom: 20px;
}

.debtCollectionTracing {
  width: 100%;
  height: 55vh;
  background: url(../img/service_area/INDEX_SBTN14.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.debtCollectionTracing .bannerText {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 1024px) {
  .debtCollectionTracing .bannerText {
    width: 100%;
    top: 65%;
  }
}
.debtCollectionTracing .bannerText h1 {
  color: #fff;
  text-align: center;
  font-size: 60px;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
@media (max-width: 1024px) {
  .debtCollectionTracing .bannerText h1 {
    font-size: 48px;
  }
}
@media (max-width: 1024px) {
  .debtCollectionTracing .bannerText h1 span {
    display: none;
  }
}
.debtCollectionTracing .bannerText h1 br {
  display: none;
}
@media (max-width: 1024px) {
  .debtCollectionTracing .bannerText h1 br {
    display: block;
  }
}

#debtCollectionTracing {
  width: 900px;
  margin: 0 auto;
  padding: 5% 0;
}
@media (max-width: 1024px) {
  #debtCollectionTracing {
    width: 100%;
    padding: 5% 3%;
  }
}
#debtCollectionTracing .topText {
  padding: 50px 0;
  text-align: center;
  font-size: 22px;
  color: #666;
  font-weight: bold;
}
#debtCollectionTracing .topText a {
  color: #f00;
}
#debtCollectionTracing .secondListTitle {
  text-align: center;
  color: #3a6ea2;
  font-size: 36px;
  margin-bottom: 30px;
}
#debtCollectionTracing .secondList .listBox {
  padding: 10px 20px;
  background: #eff7ff;
  margin-bottom: 10px;
  border-radius: 10px;
}
#debtCollectionTracing .secondList .listBox:nth-child(even) {
  background: #dbedff;
}
#debtCollectionTracing .secondList .listBox h3,
#debtCollectionTracing .secondList .listBox h4 {
  font-weight: bold;
  color: #3a6ea2;
  margin-bottom: 20px;
}
#debtCollectionTracing .secondList .listBox ul {
  margin-left: 60px;
}
@media (max-width: 1024px) {
  #debtCollectionTracing .secondList .listBox ul {
    margin-left: 20px;
  }
}
#debtCollectionTracing .secondList .listBox ul li {
  margin-bottom: 10px;
}
#debtCollectionTracing .secondList .listBox .lastList li {
  color: #3a6ea2;
  font-weight: bold;
}

.otherServicesPage {
  width: 100%;
  height: 55vh;
  background: url(../img/banner/service/service15.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.otherServicesPage .bannerText {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 1024px) {
  .otherServicesPage .bannerText {
    width: 100%;
    top: 65%;
  }
}
.otherServicesPage .bannerText h1 {
  color: #fff;
  text-align: center;
  font-size: 60px;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
@media (max-width: 1024px) {
  .otherServicesPage .bannerText h1 {
    font-size: 48px;
  }
}
@media (max-width: 1024px) {
  .otherServicesPage .bannerText h1 span {
    display: none;
  }
}
.otherServicesPage .bannerText h1 br {
  display: none;
}
@media (max-width: 1024px) {
  .otherServicesPage .bannerText h1 br {
    display: block;
  }
}

#otherServicesPage {
  width: 900px;
  margin: 0 auto;
  padding: 5% 0;
}
@media (max-width: 1024px) {
  #otherServicesPage {
    width: 100%;
    padding: 5% 3%;
  }
}
#otherServicesPage .topText {
  padding: 50px 0;
  text-align: center;
  font-size: 22px;
  color: #666;
  font-weight: bold;
}
#otherServicesPage .secondListTitle {
  text-align: center;
  color: #d16868;
  font-size: 36px;
  margin-bottom: 30px;
}
#otherServicesPage .secondList .listBox {
  padding: 10px 20px;
  background: #ffe8e8;
  margin-bottom: 10px;
  border-radius: 10px;
}
#otherServicesPage .secondList .listBox:nth-child(even) {
  background: #fff2f2;
}
#otherServicesPage .secondList .listBox h3 {
  font-weight: bold;
  color: #d16868;
  margin-bottom: 20px;
}
#otherServicesPage .secondList .listBox h4 {
  color: #f00;
}
#otherServicesPage .secondList .listBox ul {
  margin-left: 60px;
}
@media (max-width: 1024px) {
  #otherServicesPage .secondList .listBox ul {
    margin-left: 20px;
  }
}
#otherServicesPage .secondList .listBox ul li {
  margin-bottom: 10px;
}
#otherServicesPage .secondList .listBox .lastList li {
  color: #3a6ea2;
  font-weight: bold;
}

.chinaDetective {
  width: 100%;
  height: 55vh;
  background: url(../img/banner/service/service8.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.chinaDetective .bannerText {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 1024px) {
  .chinaDetective .bannerText {
    width: 100%;
    top: 65%;
  }
}
.chinaDetective .bannerText h1 {
  color: #fff;
  text-align: center;
  font-size: 60px;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
@media (max-width: 1024px) {
  .chinaDetective .bannerText h1 {
    font-size: 48px;
  }
}
@media (max-width: 1024px) {
  .chinaDetective .bannerText h1 span {
    display: none;
  }
}
.chinaDetective .bannerText h1 br {
  display: none;
}
@media (max-width: 1024px) {
  .chinaDetective .bannerText h1 br {
    display: block;
  }
}

#chinaDetective {
  width: 900px;
  margin: 0 auto;
  padding: 5% 0;
}
@media (max-width: 1024px) {
  #chinaDetective {
    width: 100%;
    padding: 5% 3%;
  }
}
#chinaDetective .topText {
  padding: 20px 0;
  text-align: center;
  font-size: 26px;
  color: #a23a3a;
  font-weight: bold;
}
#chinaDetective .topParagraphText {
  text-align: center;
  margin-bottom: 20px;
}
#chinaDetective .listSectionTitle {
  text-align: center;
  color: #3a6ea2;
  font-size: 36px;
  margin-bottom: 30px;
}
@media (max-width: 1024px) {
  #chinaDetective .listSectionTitle {
    font-size: 26px;
  }
}
#chinaDetective .listSectionTitle.third {
  color: #502fac;
}
#chinaDetective .listSectionTitle.fourth {
  color: #316a14;
}
#chinaDetective .listSectionTitle.fifth {
  color: #921b83;
}
#chinaDetective .listParagraphText {
  text-align: center;
  margin-bottom: 20px;
}
#chinaDetective .listParagraphText.fourth {
  font-weight: bold;
  text-align: left;
  color: #316a14;
}
#chinaDetective .listParagraphText.fifth {
  font-weight: bold;
  text-align: left;
  color: #921b83;
}
#chinaDetective .listSectionSubTitle {
  color: #3a6ea2;
  font-size: 20px;
  margin-bottom: 10px;
}
@media (max-width: 1024px) {
  #chinaDetective .listSectionSubTitle {
    font-size: 18px;
  }
}
#chinaDetective .listGroup .listBox {
  padding: 10px 20px;
  background: #eff7ff;
  margin-bottom: 10px;
  border-radius: 10px;
}
#chinaDetective .listGroup .listBox:nth-child(even) {
  background: #dbedff;
}
#chinaDetective .listGroup .listBox h3,
#chinaDetective .listGroup .listBox h4 {
  font-weight: bold;
  color: #3a6ea2;
  margin-bottom: 20px;
}
#chinaDetective .listGroup .listBox ul {
  margin-left: 60px;
}
@media (max-width: 1024px) {
  #chinaDetective .listGroup .listBox ul {
    margin-left: 20px;
  }
}
#chinaDetective .listGroup .listBox ul li {
  margin-bottom: 10px;
}
#chinaDetective .listGroup .listBox .lastList li {
  color: #3a6ea2;
  font-weight: bold;
}
#chinaDetective .listGroup.third .listBox {
  background: #f2eeff;
}
#chinaDetective .listGroup.third .listBox:nth-child(even) {
  background: #e3d9ff;
}
#chinaDetective .listGroup.third .listBox h3 {
  color: #502fac;
}
#chinaDetective .listGroup.third .listBox ul {
  padding-top: 10px;
}
#chinaDetective .listGroup.third .listBox li {
  color: #8568d6;
}
#chinaDetective .listGroup.fourth .listBox {
  background: #f2ffec;
}
#chinaDetective .listGroup.fourth .listBox:nth-child(even) {
  background: #e4fed7;
}
#chinaDetective .listGroup.fourth .listBox h3 {
  color: #316a14;
}
#chinaDetective .listGroup.fifth .listBox {
  background: #fff5fe;
}
#chinaDetective .listGroup.fifth .listBox:nth-child(even) {
  background: #ffccf8;
}
#chinaDetective .listGroup.fifth .listBox h3 {
  color: #921b83;
}

.articlesIndexBox {
  padding: 0 20%;
  padding-bottom: 100px;
}
@media (max-width: 1024px) {
  .articlesIndexBox {
    padding: 0;
    padding-bottom: 50px;
  }
}
.articlesIndexBox .articlesIndex .articleBox {
  border-left: 5px solid #333;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #ddd;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 3px 3px 3px #666;
  position: relative;
}
.articlesIndexBox .articlesIndex .articleBox:nth-child(odd) {
  background-color: #eee;
}
.articlesIndexBox .articlesIndex .articleBox .articleNumber {
  color: #000;
  font-size: 28px;
  font-weight: bold;
  margin-right: 30px;
}
@media (max-width: 1024px) {
  .articlesIndexBox .articlesIndex .articleBox .articleNumber {
    margin-right: 10px;
  }
}
.articlesIndexBox .articlesIndex .articleBox .articlePreview {
  justify-self: flex-start;
}
.articlesIndexBox .articlesIndex .articleBox .articlePreview .articleTitle {
  color: #000;
  font-size: 24px;
}
@media (max-width: 1024px) {
  .articlesIndexBox .articlesIndex .articleBox .articlePreview .articleTitle {
    font-size: 18px;
    padding-right: 10px;
  }
}
.articlesIndexBox .articlesIndex .articleBox .articlePreview .articlePart {
  color: #000;
}
@media (max-width: 1024px) {
  .articlesIndexBox .articlesIndex .articleBox .articlePreview .articlePart {
    display: none;
  }
}
.articlesIndexBox .articlesIndex .articleBox .rightArrowIcon {
  position: absolute;
  right: 20px;
}

.pagination {
  margin-top: 50px;
  text-align: center;
}
.pagination button {
  margin: 0 10px;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.pagination button.active {
  color: #fff;
  background-color: #666;
}

.caseSection {
  padding-top: 50px;
}
.caseSection h2 {
  font-size: 42px;
  letter-spacing: 4px;
  padding-top: 50px;
  padding-bottom: 10px;
  text-align: center;
}
.caseSection > p {
  font-size: 22px;
  text-align: center;
  padding-bottom: 30px;
  font-family: sans-serif;
  letter-spacing: 2px;
}

#loveissue .affairs {
  width: 100%;
  min-height: 120dvh;
  overflow: hidden;
}
#loveissue #affairs1 {
  background-image: url(../img/loveissue/section1/pcBg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
@media (max-width: 1024px) {
  #loveissue #affairs1 {
    background-image: url(../img/loveissue/section1/mBg.jpg);
  }
}
#loveissue #affairs1 .text1 {
  position: absolute;
  bottom: 10%;
  padding-left: 7%;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 2px;
}
@media (max-width: 1024px) {
  #loveissue #affairs1 .text1 {
    width: 100%;
    flex-direction: column-reverse;
    align-items: end;
    bottom: initial;
    padding-top: 80px;
    padding-left: 0;
    padding-right: 20px;
    font-size: 18px;
    letter-spacing: 0;
  }
}
#loveissue #affairs1 .text1 > div {
  margin: 10px 0;
}
@media (max-width: 1024px) {
  #loveissue #affairs1 .text1 > div {
    display: flex;
    flex-direction: column;
  }
}
#loveissue #affairs1 .text1 > div span {
  text-align: right;
}
@media (max-width: 1024px) {
  #loveissue #affairs1 .text1 > div span:nth-child(1) {
    font-size: 16px;
  }
}
#loveissue #affairs1 .text1 > div span:nth-child(2) {
  font-size: 58px;
  margin: 0 20px;
}
@media (max-width: 1024px) {
  #loveissue #affairs1 .text1 > div span:nth-child(2) {
    font-size: 32px;
    margin: 2px 0;
  }
}
@media (max-width: 1024px) {
  #loveissue #affairs1 .text1 > div span:nth-child(3) {
    font-size: 24px;
  }
}
#loveissue #affairs1 .text2 {
  position: absolute;
  top: 30%;
  right: 8%;
  display: flex;
  flex-direction: column;
  color: #fff;
  font-size: 60px;
  font-weight: bold;
  letter-spacing: 8px;
}
@media (max-width: 1024px) {
  #loveissue #affairs1 .text2 {
    width: 100%;
    align-items: center;
    top: 33%;
    right: initial;
    font-size: 16px;
    letter-spacing: 0;
  }
}
#loveissue #affairs1 .text2 > div {
  display: flex;
  margin: 10px;
}
@media (max-width: 1024px) {
  #loveissue #affairs1 .text2 > div {
    flex-direction: column;
  }
}
#loveissue #affairs1 .text2 > div:first-child {
  align-items: end;
}
@media (max-width: 1024px) {
  #loveissue #affairs1 .text2 > div:first-child {
    align-items: center;
  }
}
@media (max-width: 1024px) {
  #loveissue #affairs1 .text2 > div:first-child p {
    font-size: 40px;
  }
}
#loveissue #affairs1 .text2 > div:last-child {
  flex-direction: column;
}
@media (max-width: 1024px) {
  #loveissue #affairs1 .text2 > div:last-child p:first-child {
    font-size: 34px;
    text-align: center;
  }
}
#loveissue #affairs1 .text2 > div:last-child p:last-child {
  color: #f00;
  font-size: 80px;
  text-align: right;
}
@media (max-width: 1024px) {
  #loveissue #affairs1 .text2 > div:last-child p:last-child {
    font-size: 44px;
    text-align: center;
    margin-top: 10px;
  }
  #loveissue #affairs1 .text2 > div:last-child p:last-child span {
    display: block;
  }
}
#loveissue #affairs1 .text2 > div img {
  width: 400px;
  margin-right: 40px;
}
@media (max-width: 1024px) {
  #loveissue #affairs1 .text2 > div img {
    width: 250px;
    margin: 0;
  }
}
#loveissue #affairs1 .text3 {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 150px;
  bottom: 100px;
  color: #ff9100;
  font-size: 50px;
  font-family: sans-serif;
}
@media (max-width: 1024px) {
  #loveissue #affairs1 .text3 {
    text-align: center;
    width: 100%;
    right: initial;
    bottom: 30px;
    font-size: 32px;
  }
}
#loveissue #affairs1 .text3 a {
  color: #ff9100;
  letter-spacing: 7px;
}
@media (max-width: 1024px) {
  #loveissue #affairs1 .text3 a {
    margin-top: 10px;
  }
}
#loveissue #affairs2 {
  background-color: #ecd9ff;
  position: relative;
}
#loveissue #affairs2 #section2Person {
  position: absolute;
  top: 0;
  right: 0%;
  width: 37%;
  z-index: 0;
}
@media (max-width: 1024px) {
  #loveissue #affairs2 #section2Person {
    width: 60%;
  }
}
#loveissue #affairs2 #q {
  width: 45%;
  position: absolute;
  top: 40px;
  left: 30px;
  z-index: 0;
}
@media (max-width: 1024px) {
  #loveissue #affairs2 #q {
    width: 150%;
    top: 0;
    left: -250px;
  }
}
#loveissue #affairs2 .title {
  position: relative;
  z-index: 1;
  padding-left: 15%;
  padding-top: 100px;
  padding-bottom: 60px;
}
@media (max-width: 1024px) {
  #loveissue #affairs2 .title {
    padding-left: 0;
    padding-bottom: 0;
    text-align: center;
  }
}
#loveissue #affairs2 .title p {
  font-size: 68px;
  color: #8545bc;
  letter-spacing: 2px;
}
@media (max-width: 1024px) {
  #loveissue #affairs2 .title p {
    font-size: 24px;
  }
}
#loveissue #affairs2 .title h1 {
  font-size: 100px;
  color: #8545bc;
  letter-spacing: 2px;
}
@media (max-width: 1024px) {
  #loveissue #affairs2 .title h1 {
    font-size: 60px;
  }
}
#loveissue #affairs2 .title h1 span {
  display: inline-block;
  margin-left: 20px;
  transform: rotate(10deg);
}
#loveissue #affairs2 .QABox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
  z-index: 1;
  place-items: center;
  padding-left: 10%;
  padding-right: 10%;
}
@media (max-width: 1024px) {
  #loveissue #affairs2 .QABox {
    grid-template-columns: repeat(1, 1fr);
    padding-left: 0%;
    padding-right: 0%;
  }
}
#loveissue #affairs2 .QABox .box {
  position: relative;
  margin: 10px;
}
@media (max-width: 1024px) {
  #loveissue #affairs2 .QABox .box {
    margin: 5px 0;
  }
}
#loveissue #affairs2 .QABox .box img {
  width: 600px;
}
@media (max-width: 1024px) {
  #loveissue #affairs2 .QABox .box img {
    width: 100%;
  }
}
#loveissue #affairs2 .QABox .box p {
  color: #8545bc;
  font-size: 32px;
  position: absolute;
  z-index: 3;
  top: 45%;
  left: 8%;
  transform: translateY(-50%);
}
@media (max-width: 1024px) {
  #loveissue #affairs2 .QABox .box p {
    font-size: 20px;
  }
}
#loveissue #affairs2 .QABox .box p span {
  font-weight: bold;
}
#loveissue #affairs3 {
  background-color: #cef3f2;
  background-image: url(../img/loveissue/section3/pcBg.jpg);
  background-size: cover;
  position: relative;
}
@media (max-width: 1024px) {
  #loveissue #affairs3 {
    background-image: url(../img/loveissue/section3/mBg.jpg);
  }
}
#loveissue #affairs3 > img:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
}
@media (max-width: 1024px) {
  #loveissue #affairs3 > img:first-child {
    top: 0;
    right: 0;
    left: initial;
  }
}
#loveissue #affairs3 .svgImage {
  position: absolute;
  top: 30%;
  left: 43%;
}
@media (max-width: 1024px) {
  #loveissue #affairs3 .svgImage {
    display: none;
  }
}
#loveissue #affairs3 .leftText {
  width: 50%;
  position: absolute;
  top: 5%;
  right: 10%;
  display: flex;
  flex-direction: column;
  align-items: end;
}
@media (max-width: 1024px) {
  #loveissue #affairs3 .leftText {
    width: 100%;
    top: 10%;
    right: 0;
    align-items: center;
  }
}
#loveissue #affairs3 .leftText > h2 {
  color: #44876d;
  font-size: 68px;
  font-weight: bold;
  letter-spacing: 4px;
}
@media (max-width: 1024px) {
  #loveissue #affairs3 .leftText > h2 {
    font-size: 38px;
    text-align: center;
  }
}
#loveissue #affairs3 .leftText > h2 br {
  display: none;
}
@media (max-width: 1024px) {
  #loveissue #affairs3 .leftText > h2 br {
    display: block;
  }
}
#loveissue #affairs3 .leftText > h2 span {
  font-size: 120px;
  font-family: sans-serif;
}
@media (max-width: 1024px) {
  #loveissue #affairs3 .leftText > h2 span {
    font-size: 60px;
  }
}
#loveissue #affairs3 .leftText .listBoxes .listBox {
  background-color: rgba(229, 249, 248, 0.8);
  display: flex;
  align-items: center;
  margin: 20px 0;
  padding: 20px;
  border-radius: 20px;
}
#loveissue #affairs3 .leftText .listBoxes .listBox img:first-child {
  width: 100px;
}
@media (max-width: 1024px) {
  #loveissue #affairs3 .leftText .listBoxes .listBox img:first-child {
    width: 60px;
  }
}
#loveissue #affairs3 .leftText .listBoxes .listBox img:last-child {
  width: 30px;
}
#loveissue #affairs3 .leftText .listBoxes .listBox p {
  color: #44876d;
  font-size: 42px;
  font-weight: bold;
  margin: 0px 10px;
}
@media (max-width: 1024px) {
  #loveissue #affairs3 .leftText .listBoxes .listBox p {
    font-size: 20px;
  }
}
#loveissue #affairs4 {
  background-color: #8da3b4;
  position: relative;
}
#loveissue #affairs4 .personImg {
  position: absolute;
  right: 10px;
  width: 55%;
  z-index: 0;
}
@media (max-width: 1024px) {
  #loveissue #affairs4 .personImg {
    opacity: 0.2;
    right: initial;
    top: -5%;
    left: -35%;
    width: 120%;
  }
}
#loveissue #affairs4 .sectionText {
  position: relative;
  z-index: 2;
  padding-top: 50px;
  padding-left: 100px;
}
@media (max-width: 1024px) {
  #loveissue #affairs4 .sectionText {
    padding-left: 0;
  }
}
#loveissue #affairs4 .sectionText .text1 {
  padding-top: 50px;
  display: flex;
  flex-direction: column;
  color: #fff;
  font-size: 80px;
  font-weight: bold;
  letter-spacing: 2px;
}
@media (max-width: 1024px) {
  #loveissue #affairs4 .sectionText .text1 {
    font-size: 38px;
  }
}
@media (max-width: 1024px) {
  #loveissue #affairs4 .sectionText .text1 > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #loveissue #affairs4 .sectionText .text1 > div:last-child {
    font-size: 20px;
  }
}
#loveissue #affairs4 .sectionText .text1 img {
  width: 300px;
}
@media (max-width: 1024px) {
  #loveissue #affairs4 .sectionText .text1 img {
    width: 200px;
    margin: 10px 0;
  }
}
#loveissue #affairs4 .sectionText .text2 {
  padding-top: 50px;
  display: flex;
}
@media (max-width: 1024px) {
  #loveissue #affairs4 .sectionText .text2 {
    padding-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 20px;
    text-align: center;
    padding-left: 5%;
  }
}
#loveissue #affairs4 .sectionText .text2 span {
  padding: 10px 30px;
  background-color: #f00;
  color: #fff;
  margin-right: 20px;
  font-weight: bold;
  font-size: 60px;
  border-radius: 20px;
}
@media (max-width: 1024px) {
  #loveissue #affairs4 .sectionText .text2 span {
    padding: 5px 10px;
    font-size: 32px;
  }
}
#loveissue #affairs4 .sectionText .text3 {
  padding-top: 50px;
  color: #fff;
  font-size: 60px;
  font-weight: bold;
}
@media (max-width: 1024px) {
  #loveissue #affairs4 .sectionText .text3 {
    padding-top: 20px;
    font-size: 38px;
    text-align: center;
  }
}
#loveissue #affairs4 .sectionText .text3 > div {
  display: flex;
}
@media (max-width: 1024px) {
  #loveissue #affairs4 .sectionText .text3 > div {
    flex-direction: column;
    align-items: center;
  }
  #loveissue #affairs4 .sectionText .text3 > div span {
    display: block;
    margin-top: 10px;
  }
}
#loveissue #affairs4 .sectionText .text4 {
  padding-top: 50px;
  display: flex;
  align-items: center;
}
@media (max-width: 1024px) {
  #loveissue #affairs4 .sectionText .text4 {
    padding-top: 20px;
    flex-direction: column;
  }
}
#loveissue #affairs4 .sectionText .text4 span {
  color: #fff;
  font-size: 50px;
  font-weight: bold;
  margin-right: 40px;
  letter-spacing: 2px;
}
@media (max-width: 1024px) {
  #loveissue #affairs4 .sectionText .text4 span {
    margin-right: 0px;
    font-size: 24px;
    margin-bottom: 10px;
  }
}
#loveissue #affairs4 .sectionText .text4 a {
  color: #fff;
  font-size: 100px;
  font-weight: bold;
  font-family: sans-serif;
  letter-spacing: 10px;
}
@media (max-width: 1024px) {
  #loveissue #affairs4 .sectionText .text4 a {
    font-size: 32px;
    letter-spacing: 4px;
  }
}/*# sourceMappingURL=main.css.map */