/* 섹션 공통 */
.section {
  padding: 80px 0;
  /* min-height: 100vh; */
  scroll-margin-top: 80px;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}



@media (max-width: 768px) {
  .section {
    padding-top: 60px;
    padding-bottom: 80px;
    scroll-margin-top: 60px;
  }
  .container {
    width: 90%;
  }
}


/* 섹션1 */
#diagnosis {
  background-image: url('../img/renew/section1_background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  padding-top: 130px;
  padding-bottom: 0;
}

.bg-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 34, 0, 0.3);
  z-index: 1;
  /* backdrop-filter: blur(10px); */
}
#diagnosis .container{
  position: relative;
  z-index: 2;
}
#diagnosis .container h2 {
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: var(--font-size-title);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  margin-bottom: 20px;
}
#diagnosis .container h3{
  width:70%;
  margin:auto;
  text-align:center;
  color:#fff;
  font-size:var(--font-size-3xlarge);
  background:#061e1a;
  padding:5px;
}

#diagnosis .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* width: 892px; */
  margin: 0 auto;
}
#diagnosis .content .img-box {
  width: 60%;
  position: relative;
}
#diagnosis .content .form-box {
  width: 50%;
}
#diagnosis .content .img-box>img{
  width: 100%;
  transition: all 0.2s linear;
}
#diagnosis .content .img-box>img:hover{
  transform: scale(1.03);
}
#diagnosis .content .img-box .img-box-sign{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
#diagnosis .content .img-box .img-box-sign p{
  font-size: var(--font-size-2xlarge);
  color: #fff;
  margin-bottom: 10px;
}
#diagnosis .content .img-box .img-box-sign img{
  width: 120px;
}
/* 자가진단 폼 */
#diagnosis .diagnosis-form, #diagnosis .result-form {
  max-width: 600px;
  padding: 50px 40px;
  padding-bottom: 30px;
  background: #fff;
  border-radius: 30px;
  box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px;
}
#diagnosis .result-form{
  padding-top: 55px;
}
#diagnosis .input-group {
  margin-bottom: 20px;
}
#diagnosis .input-group label {
  display: block;
  font-weight: bold;
  font-size: var(--font-size-xlarge);
  margin-bottom: 5px;
}
#diagnosis .input-group:nth-child(4) label{
  margin-bottom: 10px;
}

#diagnosis h4.main_h4{
  text-align:center;
  font-size:medium;
  color:#555;
}

#diagnosis .sub-text {
  font-size: var(--font-size-small);
  margin-bottom: 10px;
  margin-left: 28px;
}
#diagnosis .input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 30px;
  min-width: 280px;
}
#diagnosis .input-wrapper .unit {
  position: absolute;
  right: 16px;
  color: #666;
  font-size: var(--font-size-large);
  font-weight: 300;
}
#diagnosis input {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid #000;
  border-radius: 8px;
  font-size: var(--font-size-large);
  background-color: #F2F2F2;
  padding-right: 34px;
}
#diagnosis input::placeholder{
  color: #999999;
  font-weight: 300;
}
#diagnosis input:focus{
  outline: none;
}

#diagnosis input:read-only {
  background-color: #F2F2F2;
}

#diagnosis button {
  width: 100%;
  padding: 15px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: var(--font-size-xlarge);
  font-weight: 600;
  cursor: pointer;
  margin-top: 20px;
}

#diagnosis #calculateBtn {
  background-color: var(--primary-color);
  animation: buttonPulse 1.5s infinite;
}

@keyframes buttonPulse {
  0% {
      background-color: var(--primary-color);
  }
  50% {
      background-color: #264A45;
  }
  100% {
      background-color: var(--primary-color);
  }
}

#diagnosis #calculateBtn:hover {
  background-color: #264A45;
  animation: none;
}

/* #diagnosis .diagnosis-form{
  display: none;
} */
#diagnosis .result-form{
  /* display: block !important; */
  min-width: 400px;
  position: relative;
}

#diagnosis .result-form .input-group{
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  margin: 0 auto;
  margin-bottom: 10px;
}
#diagnosis .result-form .input-group label {
  font-size: var(--font-size-large);
  margin-bottom: 0;
  min-width: 80px;
}
#diagnosis .result-form .input-group:nth-child(4) label{
  margin-bottom: 0;
}


#diagnosis .result-form .input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  min-width: unset;
}
/* #diagnosis .result-form .input-wrapper .unit {
  position: absolute;
  right: 16px;
  color: #000;
  font-size: var(--font-size-medium);
} */
#diagnosis .result-form input {
  /* width: 100%;
  padding: 8px 12px;
  padding-left: 20px;
  padding-right: 34px;
  border-radius: 8px;
  font-size: var(--font-size-medium);
  background-color: #F2F2F2; */
  color: var(--primary-color);
  font-weight: bold;
}

#diagnosis .result-form .sub-text2{
  font-size: var(--font-size-xsmall);
  margin: 20px 0;
  text-align: center;
}
#diagnosis .result-form .contact-info {
  margin-top: 60px;
}
#diagnosis .result-form .contact-info>p{
  font-size: var(--font-size-2xlarge);
  line-height: 1.5;
  text-align: center;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 20px;
}

#diagnosis .result-form .contact-info .input-group {
  width: 85%;
}
#diagnosis .result-form .contact-info .input-group label{
  font-size: var(--font-size-2xlarge);
}
#diagnosis .result-form .contact-info .input-group input{
  padding-left: 16px;
  font-size: var(--font-size-large);
  color: #000;
  font-weight: normal;
  padding-right: 16px;
}
#diagnosis .result-form .sub-text3{
  font-size: var(--font-size-small);
  text-align: center;
  margin-top: 60px;
  margin-bottom: 30px;
  color: #686868;
}
#diagnosis #consultBtn {
  width: 85%;
  margin-top: 20px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}


#diagnosis .back-btn {
  all: unset;
  position: absolute;
  top: 20px;
  left: 40px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
}
#diagnosis .back-btn i {
  font-size: var(--font-size-2xlarge);
  color: var(--primary-color);
}
#diagnosis .back-btn:hover i {
  color: #264A45;
}


@media (max-width: 768px) {
  #diagnosis {
    padding-top: 100px;
    padding-bottom: 20px;
  }
#diagnosis .container h3{
  width:85%;
  font-size:var(--font-size-large);
  margin-bottom:20px;
  padding:10px;
}
#diagnosis .container h3 .mobile-br{
  display:none;
}

  #diagnosis .content {
    justify-content: center;
  }
  #diagnosis .content .img-box {
    display: none;
  }
  #diagnosis .diagnosis-form, #diagnosis .result-form {
    max-width: clamp(300px, 80vw, 500px);
    padding: 30px 20px;
    padding-bottom: 20px;
    padding-top: 50px;
  }
  #diagnosis .input-wrapper {
    align-items: center;
    margin: 0 28px;
    min-width: 210px;
  }
  #diagnosis .result-form {
    min-width: clamp(300px, 80vw, 500px);
  }
  #diagnosis .result-form .input-group {
    width: 100%;
    gap: 16px;
  }
  #diagnosis .result-form .contact-info .input-group {
    width: 100%;
  }
  #diagnosis .result-form .input-group label {
    min-width: 75px;
  }
  #diagnosis #consultBtn {
    width: 100%;
  }
  #diagnosis .back-btn {
    left: 20px;
  }
  #diagnosis .result-form .contact-info {
    margin-top: 30px;
  }
  #diagnosis .result-form .sub-text3 {
    margin-top: 30px;
    margin-bottom: 16px;
  }
}


/* 섹션2 */
#intro {
  background: #EFEFEF;
  padding-bottom: 100px;
}
#intro .container h2 {
  text-align: center;
  font-size: var(--font-size-title);
  font-weight: bold;
  color: var(--text-color);
  margin-bottom: 20px;
}
#intro .container>p {
  text-align: center;
  font-size: var(--font-size-4xlarge);
  color: var(--text-color-sub);
  margin-bottom: 60px;
  font-weight: 500;
}
#intro .swiper {
	width: 100%;
	margin-bottom: 50px;
  padding: 20px 0;
}
#intro .swiper-slide {
	cursor: pointer;

}
#intro .intro-img-box { 
  width: 100%;
}
#intro .intro-img {
	width: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  box-sizing: border-box;
  overflow: hidden;
}
#intro .swiper-slide:hover .intro-img {
	transform: scale(1.02);
}

/* 모달 스타일 */
.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
}

.modal .modal-content {
	margin: auto;
	display: block;
	max-width: 90%;
	max-height: 90vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal .close {
	position: absolute;
	right: 35px;
	top: 15px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	cursor: pointer;
}
#intro .intro-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
#intro .intro-list-item{
  display: flex;
  align-items: center;
  gap: 16px;
}
#intro .intro-list-item img{
  width: 30px;
}
#intro .intro-list-item p{
  font-size: var(--font-size-3xlarge);
  font-weight: 500;
  color: var(--text-color-sub);
}
@media (max-width: 1024px) {
  #intro .swiper-pagination-bullet-active {
    background: #32655F !important;
  }
  #intro .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, 0px);
  }
}
@media (max-width: 768px) {
  #intro .container>p {
    font-size: var(--font-size-medium);
    margin-bottom: 30px;
  }
  #intro .container .content {
    display: flex;
    flex-flow: column-reverse;
    align-items: center;
  }
  #intro .intro-list {
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }
  #intro .intro-list-item p {
    font-size: var(--font-size-large);
  }
  #intro .intro-list-item img {
    width: 16px;
  }
  #intro .intro-list-item {
    gap: 8px;
    width: 100%;
    margin: auto;
  }
  #intro .swiper {
    margin-bottom: 0;
    padding: 30px 0;
  }
  #intro .intro-img {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 8px;
  }
  #intro .swiper-pagination-bullet-active {
    background: #32655F !important;
  }
  #intro .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, 5px);
  }
  .modal .close {
    right: 20px;
  }
}

/* 섹션3 */
#lawyers .container .content{
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
#lawyers .container .content .lawyer-profile{
  flex: 1;
  display: flex;
  flex-flow: column;
  gap: 80px;
}
#lawyers .container .content .lawyer-profile .lawyer-header{
  display: flex;
  flex-flow: column;
  gap: 16px;
}
#lawyers .container .content .lawyer-profile .lawyer-header h2{
  font-size: var(--font-size-3xlarge);
  font-weight: 500;
  color: var(--text-color);
}
#lawyers .container .content .lawyer-profile .lawyer-header h2 span{
  font-size: var(--font-size-title);
  font-weight: bold;
  white-space: nowrap;
}
#lawyers .container .content .lawyer-profile .lawyer-header p{
  display: inline-block;
  width: fit-content;
  padding: 10px 20px;
  background-color: var(--text-color);
  color: #fff;
  font-size: var(--font-size-3xlarge);
}
#lawyers .container .content .lawyer-profile .career-list{
  display: flex;
  flex-flow: column;
  gap: 24px;
}
#lawyers .container .content .lawyer-profile .career-list li{
  display: flex;
  align-items: center;
  gap: 10px;
}
#lawyers .container .content .lawyer-profile .career-list li .bar{
  display: inline-block;
  width: 5px;
  height: 24px;
  background-color: var(--text-color);
}
#lawyers .container .content .lawyer-profile .career-list li p{
  font-size: var(--font-size-2xlarge);
  font-weight: 500;
  color: var(--text-color-sub);
  white-space: nowrap;
}
#lawyers .container .content .lawyer-intro{
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 60px;
}
#lawyers .container .content .lawyer-intro .lawyer-image-wrapper{
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
}
#lawyers .container .content .lawyer-intro .lawyer-image-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transform: scale(1.5);
  margin-top: 50px;
}
#lawyers .container .content .lawyer-intro .lawyer-message{
  display: flex;
  flex-flow: column;
  gap: 40px;
}
#lawyers .container .content .lawyer-intro .lawyer-message>p{
  font-size: var(--font-size-xlarge);
  color: var(--text-color);
  text-align: center;
  line-height: 1.5;
}
#lawyers .container .content .lawyer-intro .lawyer-message .lawyer-signature{
  display: flex;
  gap: 16px;
  justify-content: center;
}
#lawyers .container .content .lawyer-intro .lawyer-message .lawyer-signature p{
  font-size: var(--font-size-medium);
  font-weight: 500;
  color: var(--text-color);
  margin-top: 6px;
}
#lawyers .container .content .lawyer-intro .lawyer-message .lawyer-signature img{
  width: 70px;
}

@media (max-width: 768px) {
  #lawyers{
    padding-bottom: 0;
  }
  #lawyers .container{
    width: 100%;
    padding: 0;
  }
  #lawyers .container .content {
    gap: 30px;
    flex-flow: column;
  }
  #lawyers .container .content .lawyer-profile {
    gap: 40px;
    width: 90%;
    margin: auto;
    padding: 0 20px;
  }
  #lawyers .container .content .lawyer-profile .lawyer-header h2 {
    font-size: var(--font-size-xlarge);
  }
  #lawyers .container .content .lawyer-profile .lawyer-header p {
    padding: 8px 10px;
    font-size: var(--font-size-large);
  }
  #lawyers .container .content .lawyer-profile .career-list {
    gap: 10px;
  }
  #lawyers .container .content .lawyer-profile .career-list li p {
    font-size: var(--font-size-xlarge);
  }
  #lawyers .container .content .lawyer-profile .career-list li {
    gap: 8px;
  }
  #lawyers .container .content .lawyer-profile .career-list li .bar {
    width: 3px;
    height: 16px;
  }
  #lawyers .container .content .lawyer-intro {
    flex-flow: row;
    align-items: start;
    gap: 0;
    position: relative;
  }

  #lawyers .container .content .lawyer-intro .lawyer-image-wrapper {
    width: clamp(0px, 50.6vw, 1000px);
    height: clamp(0px, 63.3vw, 1000px);
    border-radius: unset;
    overflow: hidden;
  }
  #lawyers .container .content .lawyer-intro .lawyer-image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top;
    transform: scale(1);
    margin-top: -18px;
  }

  #lawyers .container .content .lawyer-intro .lawyer-message {
    gap: 16px;
    position: absolute;
    right: clamp(20px, 5.33vw, 100px);
    top: clamp(0px, 6.4vw, 75px);
  }
  #lawyers .container .content .lawyer-intro .lawyer-message>p {
    font-size: var(--font-size-small);
    color: var(--text-color);
    text-align: right;
    line-height: 1.5;
  }
  #lawyers .container .content .lawyer-intro .lawyer-message .lawyer-signature p {
    font-size: var(--font-size-xsmall);
    margin-top: 6px;
  }
  #lawyers .container .content .lawyer-intro .lawyer-message .lawyer-signature {
    gap: 10px;
    justify-content: end;
  }
  #lawyers .container .content .lawyer-intro .lawyer-message .lawyer-signature img {
    width: clamp(0px, 12vw, 70px);

  }
}

/* 섹션4 */
#reviews .container{
  width: 100%;
  max-width: unset;
  padding: 0;
}
#reviews .title{
  color: rgba(51, 51, 51, 0.1);
  font-size: 100px;
  font-weight: bold;
  text-align: center;
  margin-bottom: -38px;
}
#reviews .container h2{
  font-size: var(--font-size-title-sub);
  font-weight: bold;
  color: var(--text-color);
  text-align: center;
  margin-bottom: 40px;
}
#reviews .reviewSwiper-mobile {
  display: none;
}
#reviews .review-grid {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#reviews .reviewSwiper .review-row {
	display: grid;
	grid-template-columns: repeat(28, 1fr);
	gap: 10px;
	height: 120px;
	width: 100%;
	box-sizing: border-box;
  overflow: hidden;
}
#reviews .reviewSwiper-mobile .review-row {
	display: grid;
	grid-template-columns: repeat(20, 1fr);
	gap: 10px;
	height: 60px;
	width: 100%;
	box-sizing: border-box;
  overflow: hidden;
}
#reviews .review-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	box-sizing: border-box;
  object-position: top;
}
/* 4가지 너비 클래스로 수정 (합이 28이 되는 조합을 만들기 위해) */
#reviews .review-img.extra-wide {
	grid-column: span 6;  /* 6칸 */
}
#reviews .review-img.wide {
	grid-column: span 5;  /* 5칸 */
}
#reviews .review-img.medium {
	grid-column: span 4;  /* 4칸 */
}
#reviews .review-img.narrow {
	grid-column: span 3;  /* 3칸 */
}
#reviews .review-img.mobile-wide {
  grid-column: span 5;
}
#reviews .review-img.mobile-medium {
  grid-column: span 4;
}
#reviews .review-img.mobile-narrow {
  grid-column: span 3;
}
/* Swiper 커스텀 스타일 */
#reviews .reviewSwiper {
	padding: 20px 0;
  margin-bottom: 60px;
}
#reviews .swiper-pagination-bullet-active {
	background: #32655F !important;
}
#reviews .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: var(--swiper-pagination-bottom, 30px);
}

#reviews .review-swiper2-container{
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  /* padding: 0 50px; */
}
#reviews .reviewSwiper2 {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
}
#reviews .reviewSwiper2 .swiper-slide img {
  width: 100%;
  height: auto;
}
#reviews .review-swiper2-container .swiper-button-prev,
#reviews .review-swiper2-container .swiper-button-next {
  width: 60px;
  height: 60px;
  background-color: rgba(165, 165, 165, 0.4);
  border-radius: 50%;
}
#reviews .review-swiper2-container .swiper-button-prev i,
#reviews .review-swiper2-container .swiper-button-next i {
  font-size: var(--font-size-3xlarge);
  color: #fff;
}
#reviews .review-swiper2-container .swiper-button-prev:after,
#reviews .review-swiper2-container .swiper-button-next:after {
  all: unset;
}
#reviews .review-swiper2-container .swiper-button-prev {
  left: 0;
}
#reviews .review-swiper2-container .swiper-button-next {
  right: 0;
}
#reviews .review-swiper2-container .swiper-button-prev,
#reviews .review-swiper2-container .swiper-button-next {
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
}

@media (max-width: 768px) {
  #reviews .title{
    font-size: clamp(0px, 16vw, 100px);
    margin-bottom: -24px;
    line-height: 0.9;
  }
  #reviews .container h2 {
    font-size: var(--font-size-title);
    margin-bottom: 20px;
  }
  #reviews .reviewSwiper {
    padding: 0;
    margin-bottom: 30px;
  }
  #reviews .reviewSwiper {
    display: none !important;
  }
  #reviews .reviewSwiper-mobile {
    display: block !important;
    margin-bottom: 30px;
  }
  #reviews .reviewSwiper-mobile .review-row {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    gap: 5px;
    height: clamp(60px, 16vw, 200px);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  #reviews .review-grid {
    gap: 5px;
  }

  #reviews .reviewSwiper2 {
    position: relative;
    max-width: clamp(0px, 66vw, 400px);
    margin: 0 auto;
  }
  #reviews .review-swiper2-container {
    position: relative;
    max-width: clamp(0px, 90vw, 600px);
    margin: 0 auto;
  }
  #reviews .review-swiper2-container .swiper-button-prev, #reviews .review-swiper2-container .swiper-button-next {
    width: clamp(0px, 8vw, 40px);
    height: clamp(0px, 8vw, 40px);
  }
  #reviews .review-swiper2-container .swiper-button-prev i, #reviews .review-swiper2-container .swiper-button-next i {
    font-size: var(--font-size-xlarge);
    color: #fff;
  }
}

/* 섹션5 */
#service{
  background-color: #EFEFEF;
}
#service .container .service-title{
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  margin-bottom: 60px;
}
#service .container .service-title .service-title-img{
  width: 40px;
}
#service .container .service-title .service-title-img img{
  width: 100%;
}
#service .container .service-title h2{
  font-size: var(--font-size-title-sub);
  font-weight: bold;
  color: var(--primary-color);
}
#service .container .content{
  display: flex;
  flex-flow: column;
  gap: 60px;
}
#service .container .content .service-grid{
  display: flex;
  flex-flow: column;
  gap: 16px;
}
#service .container .content .service-grid .service-item{
  display: flex;
  gap: 16px;
}
#service .container .content .service-grid .service-item.mobile{
  display: none;
}
#service .container .content .service-grid .service-item .service-item-content{
  padding: 20px 22px;
  border-radius: 20px;
  position: relative;
  height: 100px;
  flex: 1;
}
#service .service-item:nth-child(1) .service-item-content:nth-child(1){
  background: linear-gradient(to top, #416F52, #1E4940);
}
#service .service-item:nth-child(1) .service-item-content:nth-child(2){
  background: linear-gradient(to top, #418607, #1D6207);
}
#service .service-item:nth-child(1) .service-item-content:nth-child(3),
#service .service-item:nth-child(1) .service-item-content:nth-child(4){
  background: linear-gradient(to top, #2BA667, #1B5B4B);
}
#service .service-item:nth-child(1) .service-item-content:nth-child(5){
  background: linear-gradient(to top, #5F9C8D, #599813);
}
#service .service-item:nth-child(2) .service-item-content:nth-child(1){
  background: linear-gradient(to top, #42787A, #43876E);
}
#service .service-item:nth-child(2) .service-item-content:nth-child(2){
  background: linear-gradient(to top, #1C4F4A, #2B6856);
}
#service .service-item:nth-child(2) .service-item-content:nth-child(3){
  background: linear-gradient(to top, #42787A, #43876E);
}
#service .service-item:nth-child(2) .service-item-content:nth-child(4){
  background: linear-gradient(to top, #2BA667, #1B5B4B);
}
#service .service-item:nth-child(2) .service-item-content:nth-child(5){
  background: linear-gradient(to top, #5F9C8D, #599813);
}
#service .service-item:nth-child(3) .service-item-content:nth-child(1){
  background: linear-gradient(to top, #42787A, #43876E);
}
#service .service-item:nth-child(3) .service-item-content:nth-child(2){
  background: linear-gradient(to top, #1C4F4A, #2B6856);
}
#service .service-item:nth-child(3) .service-item-content:nth-child(3){
  background: linear-gradient(to top, #42787A, #43876E);
}
#service .service-item:nth-child(3) .service-item-content:nth-child(4){
  background: linear-gradient(to top, #2BA667, #1B5B4B);
}
#service .service-item:nth-child(3) .service-item-content:nth-child(5){
  background: linear-gradient(to top, #5F9C8D, #599813);
}

#service .container .content .service-grid .service-item .service-item-content.icon-content1{
  padding-right: 90px;
}
#service .container .content .service-grid .service-item .service-item-content.icon-content2{
  padding-right: 90px;
}
#service .container .content .service-grid .service-item .service-item-content.icon-content3{
  padding-right: 160px;
}
#service .container .content .service-grid .service-item .service-item-content .service-icon{
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
}
#service .container .content .service-grid .service-item .service-item-content .service-icon2{
  width: 55px;
  top: 50%;
  bottom: unset;
  transform: translateY(-50%);
  right: 22px;
}
#service .container .content .service-grid .service-item .service-item-content .service-icon3{
  width: 70px;
  top: 50%;
  bottom: unset;
  transform: translateY(-50%);
  right: 22px;
}
#service .container .content .service-grid .service-item .service-item-content .service-icon img{
  width: 100%;
}
#service .container .content .service-grid .service-item .service-item-content h3{
  font-size: var(--font-size-large);
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}
#service .box {position:relative; overflow:hidden}
#service .box:after {display:block;visibility:hidden;clear:both;content:""}
#service .box ul{
  width: 70%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  grid-gap: 20px;
}
#service .box li {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  box-sizing: border-box; 
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#service .box li:first-child {background:#f4f2ff}
#service .box li:nth-child(2) {background:#ffeceb}
#service .box li:nth-child(3) {background:#ecffe9}
#service .box li:nth-child(4) {background:#ecffe9}
#service .box li:nth-child(5) {background:#fff7e2}
#service .box li:last-child {background:#f4f2ff}
#service .box .bp_wrap {
	width:100%;
  display: flex;
  flex-flow: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#service .box h3 {
  font-size: var(--font-size-xlarge);
  color: var(--text-color);
  font-weight: 800;
}
#service .box p {
  font-size: var(--font-size-medium);
  color: var(--text-color);
  font-weight: 400;
}
#service .bp_wrap img{
  transform: scale(0.7);
  transform-origin: bottom;
}
#service ul li:nth-child(1) .bp_wrap .bp1{
  margin-top: -26px;
}
#service ul li:nth-child(2) .bp_wrap .bp1{
  margin-top: -34px;
}
#service ul li:nth-child(3) .bp_wrap .bp1{
  margin-top: -37px;
} 
#service ul li:nth-child(4) .bp_wrap .bp1{
  margin-top: -61px;
}
#service ul li:nth-child(5) .bp_wrap .bp1{
  margin-top: -46px;
}
#service ul li:nth-child(6) .bp_wrap .bp1{
  margin-top: -8px;
}

@media (max-width: 1200px) {
  #service .container .content .service-grid {
    gap: 5px;
  }
  #service .container .content .service-grid .service-item {
    gap: 5px;
  }
  #service .container .content .service-grid .service-item .service-item-content {
    padding: 10px 12px;
    border-radius: 8px;
    height: clamp(0px, 11.7vw, 80px);
  }
  #service .container .content .service-grid .service-item .service-item-content h3 {
    font-size: var(--font-size-medium);
  }
  #service .container .content .service-grid .service-item .service-item-content.icon-content1{
    padding-right: 23px;
  }
  #service .container .content .service-grid .service-item .service-item-content.icon-content2{
    padding-right: 38px;
  }
  #service .container .content .service-grid .service-item .service-item-content.icon-content3{
    padding-right: 50px;
  }
  #service .container .content .service-grid .service-item .service-item-content .service-icon{
    width: clamp(0px, 5vw, 100px);
  }
  #service .container .content .service-grid .service-item .service-item-content .service-icon2{
    width: clamp(0px, 4.5vw, 65px);
    right: clamp(0px, 1.5vw, 26px);
  }
  #service .container .content .service-grid .service-item .service-item-content .service-icon3{
    width: clamp(0px, 4vw, 80px);
    right: clamp(0px, 1.5vw, 26px);
  }
  #service .box ul {
    width: 90%;
    gap: 10px;
    justify-items: center;
  }
}

@media (max-width: 900px) {
  #service .container .content .service-grid .service-item.mobile{
    display: flex;
  }
  #service .container .content .service-grid .service-item .service-item-content.pc{
    display: none;
  }
  #service .service-item:nth-child(1) .service-item-content:nth-child(1){
    background: linear-gradient(to top, #416F52, #1E4940);
  }
  #service .service-item:nth-child(1) .service-item-content:nth-child(2){
    background: linear-gradient(to top, #418607, #1D6207);
  }
  #service .service-item:nth-child(1) .service-item-content:nth-child(3),
  #service .service-item:nth-child(2) .service-item-content:nth-child(1){
    background: linear-gradient(to top, #2BA667, #1B5B4B);
  }
  #service .service-item:nth-child(2) .service-item-content:nth-child(2){
    background: linear-gradient(to top, #5F9C8D, #599813);
  }
  #service .service-item:nth-child(2) .service-item-content:nth-child(3){
    background: linear-gradient(to top, #42787A, #43876E);
  }
  #service .service-item:nth-child(2) .service-item-content:nth-child(4){
    background: linear-gradient(to top, #1C4F4A, #2B6856);
  }
  #service .service-item:nth-child(3) .service-item-content:nth-child(1){
    background: linear-gradient(to top, #42787A, #43876E);
  }
  #service .service-item:nth-child(3) .service-item-content:nth-child(2){
    background: linear-gradient(to top, #2BA667, #1B5B4B);
  }
  #service .service-item:nth-child(3) .service-item-content:nth-child(3){
    background: linear-gradient(to top, #5F9C8D, #599813);
  }
  #service .service-item:nth-child(3) .service-item-content:nth-child(4){
    background: linear-gradient(to top, #2BA667, #1B5B4B);
  }
  #service .box li {
    width: 200px;
    height: 200px;
  }
  #service .box .bp_wrap {
    gap: 10px;
  }
  #service .box h3 {
    font-size: var(--font-size-large);
  }
  #service .box p {
    font-size: var(--font-size-small);
  }
}

@media (max-width: 768px) {
  #service .container{
    width: 100%;
  }
  #service .container .service-title {
    gap: 8px;
    margin-bottom: 40px;
  }
  #service .container .service-title h2 {
    font-size: var(--font-size-title);
  }
  #service .container .service-title .service-title-img {
    width: clamp(0px, 6.4vw, 40px);
  }
  #service .container .content {
    gap: 20px;
  }
  #service .box ul {
    width: 100%;
    gap: 10px;
    justify-items: center;
  }

}

@media (max-width: 620px) {
  #service .container .content .service-grid .service-item .service-item-content h3 {
    font-size: var(--font-size-2xsmall);
  }

  #service .box li {
    width: clamp(100px, 26.67vw, 180px);
    height: clamp(100px, 26.67vw, 180px);
  }
  #service .box .bp_wrap {
    gap: 4px;
  }
  #service .box h3 {
    font-size: var(--font-size-xsmall);
  }
  #service .box p {
    font-size: var(--font-size-3xsmall);
  }
  #service .bp_wrap img{
    transform: scale(0.3);
  }
  #service ul li:nth-child(1) .bp_wrap .bp1{
    margin-top: -45px;
  }
  #service ul li:nth-child(2) .bp_wrap .bp1{
    margin-top: -53px;
  }
  #service ul li:nth-child(3) .bp_wrap .bp1{
    margin-top: -45px;
  } 
  #service ul li:nth-child(4) .bp_wrap .bp1{
    margin-top: -66px;
  }
  #service ul li:nth-child(5) .bp_wrap .bp1{
    margin-top: -52px;
  }
  #service ul li:nth-child(6) .bp_wrap .bp1{
    margin-top: -12px;
  }
}


/* FAQ 섹션 */
#faq{
  background-color: #EFEFEF;
}
#faq .container .faq-title{
  margin-bottom: 40px;
}
#faq .container .faq-title h2{
  font-size: var(--font-size-title);
  font-weight: 800;
  color: var(--primary-color);
  text-align: center;
  margin-bottom: 20px;
}
#faq .container .faq-title h3{
  font-size: var(--font-size-title-sub);
  font-weight: 500;
  color: #666666;
  text-align: center;
}
#faq .content{
  display: flex;
  flex-flow: column;
  gap: 40px;
}
#faq .content .faq-container {
  display: flex;
  flex-flow: column;
  gap: 30px;
}
#faq .content .faq-item {
  border-radius: 30px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
}
#faq .content .faq-question {
  padding: 20px 40px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, #42787A, #43876E);
  color: #fff;
  border-radius: 30px;
}
#faq .content .faq-question span {
  font-size: var(--font-size-xlarge);
  font-weight: 500;
}
#faq .content .faq-question i {
  transition: transform 0.3s ease;
  font-size: var(--font-size-xlarge);
}
#faq .content .faq-question i.rotate {
  transform: rotate(90deg);
}
#faq .content .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: 0.3s ease;
  padding: 0 40px;
  display: flex;
  gap: 5px;
}
#faq .content .faq-answer span {
  color: #231815;
  font-weight: bold;
  font-size: var(--font-size-large);
  line-height: 1.5;
}
#faq .content .faq-answer p {
  line-height: 1.5;
  color: #231815;
  font-size: var(--font-size-large);
}
#faq .content .faq-answer.active {
  padding: 20px 40px;
}

@media (max-width: 768px) {
  #faq .container{
    width: 100%;
  }
  #faq .container .faq-title h2{
    font-size: var(--font-size-title);
    margin-bottom: 20px;
  }
  #faq .container .faq-title h3{
    font-size: var(--font-size-title);
  }

  #faq .content .faq-container {
    gap: 16px;
  }
  #faq .content .faq-item {
    border-radius: 20px;
  }
  #faq .content .faq-question {
    padding: 16px 20px;
    border-radius: 20px;
    gap: 16px;
  }
  #faq .content .faq-question span {
    font-size: var(--font-size-medium);
  }
  #faq .content .faq-question i {
    font-size: var(--font-size-medium);
  }
  #faq .content .faq-answer {
    padding: 0 20px;
    gap: 4px;
  }
  #faq .content .faq-answer span {
    font-size: var(--font-size-small);
  }
  #faq .content .faq-answer p {
    font-size: var(--font-size-small);
  }
  #faq .content .faq-answer.active {
    padding: 16px 20px;
  }
}

/* 섹션6 */
#location .container h2{
  font-size: var(--font-size-title-sub);
  font-weight: bold;
  color: var(--text-color);
  margin-bottom: 40px;
  text-align: center;
}
#location .container .content{
  display: flex;
  flex-flow: column;
  gap: 80px;
}
#location .container .content .root_daum_roughmap{
  width: 100%;
  height: 600px;
}
#location .container .content .root_daum_roughmap .wrap_map{
  height: 100%;
}
#location .container .content .root_daum_roughmap .hide{
  display: none;
}
#location .container .content .root_daum_roughmap .map-info{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: space-around;
  gap: 20px;
  padding: 20px;
  background-color: var(--text-color);
  color: #fff;
  border-radius: 20px 20px 0 0;
}
#location .container .content .root_daum_roughmap .map-info p:nth-child(1){
  font-size: var(--font-size-2xlarge);
  font-weight: bold;
}
#location .container .content .root_daum_roughmap .map-info p:nth-child(2){
  font-size: var(--font-size-large);
  font-weight: 500;
}


#location .location-grid {
  column-count: 3;
  column-gap: 16px;
}

#location .location-item {
  break-inside: avoid;
  margin-bottom: 16px;
}

#location .location-item img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  #location .container{
    width: 100%;
  }
  #location .container h2{
    font-size: var(--font-size-title);
  }
  #location .container .content{
    gap: 40px;
  }
  #location .container .content .root_daum_roughmap{
    width: 100%;
    height: clamp(0px, 80vw, 600px);
  }
  #location .container .content .root_daum_roughmap .map-info{
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
  }
  #location .container .content .root_daum_roughmap .map-info p:nth-child(1){
    font-size: var(--font-size-medium);
    white-space: nowrap;
  }
  #location .container .content .root_daum_roughmap .map-info p:nth-child(2){
    font-size: var(--font-size-small);
  }
  #location .location-grid {
    column-gap: 6px;
  }
  #location .location-item {
    margin-bottom: 6px;
  }
}




/* 플로팅 아이콘 */
.floating-icons {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.floating-icon {
  display: flex;
  flex-flow: column;
  align-items: center;
  text-decoration: none;
  transition: transform 0.3s ease;
  gap: 6px;
}

.floating-icon:hover {
  transform: translateX(-5px);
}

.floating-icon img {
  width: 60px;
  height: 60px;
}
.floating-icon-content{
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #008D00;
}
.floating-icon-content i{
  font-size: var(--font-size-2xlarge);
  color: #fff;
}

.floating-icon span {
  font-size: var(--font-size-small);
  font-weight: 600;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 30px;
}
.floating-icon.kakao span{
  background: #FFE404;
  color: #3B2828;
}
.floating-icon.counsel span{
  background: #008D00;
  color: #fff;
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .floating-icons {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    flex-direction: row;
    justify-content: center;
    padding: 15px;
    background: linear-gradient(to right, #32655F, #000000);
    gap: 60px;
    border-radius: 20px 20px 0 0;
  }
  .floating-icon img {
    width: 40px;
    height: 40px;
  }
  .floating-icon-content{
    width: 40px;
    height: 40px;
  }
  .floating-icon:hover {
    transform: none;
  }
  .floating-icon span {
    padding: 0;
    border-radius: unset;
  }
  .floating-icon.kakao span,
  .floating-icon.counsel span{
    background: unset;
    color: #fff;
  }

  /* 모바일에서 최하단 여백 추가 */
  main {
    padding-bottom: 70px;
  }
}