@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

:root{
    --main-color:#0FAF57;
    
}

html{font-size: 10px; box-sizing: border-box; word-break: keep-all; scroll-behavior: smooth;}
body{font-family: "Pretendard Variable", sans-serif; font-size:1.6rem; line-height: 1.5; color:#333;}
img{max-width: 100%;}
.inner{padding-left:2rem; padding-right: 2rem; width: 100%; max-width:150rem ; margin: auto; box-sizing: border-box;}

/* 헤더 */ 
header{display: flex; height: 8rem; align-items: center; position: fixed; top: 0; left: 0; width: 100%; z-index: 9; background: #fff;}
h1{font-weight: bold; color:var(--main-color); font-size:2.2rem; padding-left: 6rem; }
.topmenu{display: flex; gap:5.7rem; margin-left: 10.7rem;}
.topmenu li a{font-weight: bold; font-size:1.8rem; transition: .5s; color:#333}
.topmenu li a:hover{color:var(--main-color)}
.right_menu{display: flex; gap:1.4rem; position: absolute; right: 6rem;}
.right_menu a{display: flex; padding:1.5rem 3rem; font-weight: bold;}
.right_menu li:first-child a{display: flex; gap:1rem; color:var(--main-color); font-weight: bold;}
.right_menu li:nth-child(2) a{border:1px solid var(--main-color); border-radius: 5px; color:var(--main-color)}
.right_menu li:nth-child(3) a{background: var(--main-color); color:#fff; border-radius: 5px;}

/* 메인비주얼 */
.main_visual{display: flex; justify-content: space-between; margin-top: 8rem;}
.main_text{padding-left:21rem; padding-top:22.8rem}
.main_text dl{margin-bottom: 6rem;}
.main_text dt{font-weight: bold; font-size:4.5rem; margin-bottom: 4.8rem;}
.main_text dt span{display: block; color:var(--main-color)}
.main_text ul{display: flex; gap:1.6rem}
.main_text ul li a{display: flex; width: 15rem; height: 4.5rem; align-items: center; justify-content: center; gap:2rem; border-radius: 5px; border:1px solid var(--main-color); color:var(--main-color); font-weight: bold;}
.main_text ul li:first-child a{background: var(--main-color); color:#fff}



/* 메인타이틀 */
.main_tit{text-align: center; margin-bottom: 3rem;}
.main_tit dl dt{font-weight: bold; font-size: 3.6rem; margin-bottom: 3.4rem;}
.main_tit dl dt span{display: block; color: var(--main-color);font-size: 1.8rem;}
.main_tit dl dt em{color:var(--main-color)}


/* 탭메뉴 */
.tab {overflow: hidden; display: flex; gap:1rem; justify-content: center;}
.tab button {background-color: inherit;  border: none; outline: none; cursor: pointer; background: #F3FBF6; border-radius: 100px; padding:1.8rem 2.5rem; transition: 0.3s; color:var(--main-color); font-weight: bold; }
.tab button:hover,
.tab button.active {background: var(--main-color); color:#fff;}
.tabcontent {display: none; padding: 6px 12px; text-align: center;}


/* 특징 */
.features{padding:9rem 0; position: relative;}
.features_text{text-align: left; width: 30rem;}
.features_text:nth-child(2){text-align: right; position: absolute; top: 50%; left: 250px;}
.features_text:nth-child(3){text-align: right; position: absolute; top: 70%; left: 250px;}
.features_text:nth-child(4){position: absolute; top: 50%; right:250px}
.features_text:nth-child(5){position: absolute; top: 70%; right:250px}
.features_text dt{font-weight: bold; font-size: 2rem;}


/* 고객지원 */
.support_list{ display: flex; gap:3.3rem; justify-content: space-between; text-align: center;}
.support_list li{flex:1; border-radius: 15px; box-shadow: 0 0 2rem rgba(28,119,103,0.2); padding:4.5rem 0}
.support_list li dl dt{font-weight: bold; font-size: 2rem; color:#007C69}

/* 가격 */
.price{padding: 10rem 0; text-align: center;}

.price_table{width: 80%; margin: auto; margin-top: 3rem; margin-bottom:2.5rem ;}
.price_table th{padding: 2rem; font-weight: bold; font-size:2.4rem; border-bottom: 1px solid #ccc;}
.price_table th span{display: block; color:#007C69; font-size: 1.6rem;}
.price_table th em{display: block;  font-size: 1.4rem; color:#666}
.price_table th:nth-child(3){background: linear-gradient(90deg, rgba(0,124,105,1) 0%, rgba(87,172,125,1) 100%); color:#fff; border-top-left-radius: 5rem; border-top-right-radius: 5rem;}
.price_table th:nth-child(3) span,
.price_table th:nth-child(3) em{color:#fff}
.price_table td{padding:2rem; border-bottom: 1px solid #ccc; vertical-align: middle;}
.price_table td:first-child{font-weight: bold;}
.price_table td:nth-child(3){border-right:2px solid #0FAF57; border-left:2px solid #0FAF57}

.refund{display: flex; gap:3rem; width: 80%; margin: auto;}
.refund p{font-weight: bold; font-size: 1.8rem;}
.refund_list{font-size: 1.5rem;}
.refund_list dl{display: flex; gap:1rem}
.refund_right{text-align: left;}

/* 사례 */
.case_list{display: flex; margin-bottom: 6rem;}
.case_list li{flex:1; position: relative; padding:5rem}
.case_list li dl dt{font-weight: bold; color:#007C69; margin-bottom: 2.8rem;}
.case_list li dl dd{font-weight: bold; font-size:2rem ;}
.case_list li dl dd span{color:var(--main-color)}
.case_list li p{position: absolute; top: 2rem; right: 2rem;}

/* FAQ */
.faq{padding: 10rem;}


/* 도입문의 */
.inquiry{margin-bottom: 10rem;}
.inquiry .inner{display: flex; justify-content: space-between;}
.inquiry_text{width: 50%;}
.inquiry_text dl dt{font-size: 1.8rem; color:var(--main-color); margin-bottom: 4.8rem;}
.inquiry_text dl dd{font-weight: bold; font-size: 3.2rem;}
.inquiry_text dl dd span{color:var(--main-color)}
.inquiry_text ul{display: flex; gap:1.6rem; margin-top: 7rem;}
.inquiry_text ul li a{display: flex; justify-content: center; align-items: center; gap:1rem; width:15rem; height: 4.5rem; border-radius: 5px; border:1px solid var(--main-color); color:var(--main-color)}
.inquiry_text ul li:first-child a{background: var(--main-color); color:#fff}

.inquiry_form{width: 50%;}
.inquiry_form h2{font-size: 2rem; color:var(--main-color); font-weight: bold; margin-bottom: 3.5rem;}
.inquiry_list{display: flex; flex-wrap: wrap; gap:3rem} 
.inquiry_list dl{width: calc(50% - 3rem);}
.inquiry_list dl dt{font-weight: bold; color:var(--main-color)}
.inquiry_list dl:nth-child(5),
.inquiry_list dl:nth-child(6){width: 100%;}
.inquiry_list textarea{border:none; border-bottom: 1px solid #ccc; width: 100%;}
.inquiry_input{border: none; border-bottom: 1px solid #ccc; width:calc(100% - 4rem); padding:1rem 2rem; color:#666}

.filebox label {display: inline-block; color: #fff;background-color:var(--main-color);  cursor: pointer; padding: .5rem 2rem; }
.filebox input[type="file"] {position: absolute ;width: 0;height: 0;padding: 0;overflow: hidden;border: 0;}
.filebox input{border: none; border-bottom: 1px solid #ccc; padding:1rem 2rem}

.inquiry_bototm{display: flex; justify-content: space-between; align-items: center; margin-top: 2rem;}
.inquiry_btn{background: var(--main-color); color:#fff; padding:1rem 2rem; border-radius: 5px; display: flex; gap:2rem; border: none; cursor: pointer;}


.container {display: block;  position: relative; padding-left: 35px; margin-top: 2rem; cursor: pointer; user-select: none; font-size: 1.4rem; font-weight: bold;}
.container input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;  }
.checkmark {position: absolute;top: 0;left: 0;height: 25px;width: 25px;background-color: #eee;}
.container:hover input ~ .checkmark {background-color: #ccc}
.container input:checked ~ .checkmark {background-color: var(--main-color); border-radius: 100px;}
.checkmark:after {content: "";position: absolute;display: none;  }
.container input:checked ~ .checkmark:after {display: block;}
.container .checkmark:after {left: 9px;top: 5px;width: 5px;height: 10px;border: solid white;border-width: 0 3px 3px 0;transform: rotate(45deg);}

/* 모달 */
#myBtn{color:var(--main-color); text-decoration: underline;}
.modal {display: none; position: fixed; z-index: 1;padding-top: 100px; left: 0;top: 0;width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);}
.modal-content {background-color: #fefefe;margin: auto;padding: 20px;border: 1px solid #888;width: 80%;}
.close {color: #aaaaaa;float: right;font-size: 28px;font-weight: bold;  }
.close:hover,
.close:focus {color: #000;text-decoration: none;  }

/* 아코디언 */

.addui-Accordion {border-radius: 10px;overflow: hidden;}
.addui-Accordion .addui-Accordion-header {
  display: flex; 
  align-items: center;
  text-align: left;
  font-weight: bold;
  line-height: 24px;
  padding: 16px;
  margin-bottom: 3rem;
  cursor: pointer;
  border:1px solid #ccc; 
  border-radius: 10px; 
  position: relative;
}
.addui-Accordion .addui-Accordion-header i{display: inline-flex; align-items: center; justify-content: center; width: 41px; height: 37px; margin-right: 2.2rem; background: url(../images/icon_q.png) no-repeat; font-weight: bold; color:va(--main-color)}
  
  .addui-Accordion .addui-Accordion-header::after {
    content: '';
    background: url(../images/arrow_down.png) no-repeat;
    width: 15px;
    height: 15px;
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0) rotate(0deg);
    position: absolute;
    top: 30px;
    right: 20px;
    transition: transform 0.4s;
  }
  
  .addui-Accordion-open{
    background: linear-gradient(90deg, rgba(0,124,105,1) 0%, rgba(87,172,125,1) 100%); 
    border:none !important; 
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important; 
    color:#fff;
    margin: 0 !important;
  }

  .addui-Accordion-open i{color:var(--main-color) !important}
    .addui-Accordion .addui-Accordion-header.addui-Accordion-open::after {
    transform: translate(0, 0) rotate(180deg);
  }
  
  .addui-Accordion .addui-Accordion-content {
    color:#fff;
    padding: 16px;
    background: linear-gradient(90deg, rgba(0,124,105,1) 0%, rgba(87,172,125,1) 100%); 
    border-bottom-right-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    text-align: left;
    margin-bottom: 3rem  !important;
    padding-left:8rem;
  }
  
  

  .addui-Accordion .addui-Accordion-content.addui-Accordion-last {
    border-bottom: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
  }

  #faq01,
  #faq02,
  #faq03,
  #faq04{margin-top:5rem}


/* 카피라이트 */
footer .inner{display: flex; justify-content: space-between; font-size: 1.4rem;}
.address b{display: inline-block; font-weight: bold; margin-right: 1rem;}
.sns_list{display: flex; gap:1rem}
.foot_bg{border-top: 1px solid #ccc; padding: 1rem 0; margin-top: 1rem;}
.foot_bg p{font-weight: bold;}





/* 태블릿 */
@media all and (max-width:1280px){
  .main_text{padding-left:2rem}
  .features_text:nth-child(2),
  .features_text:nth-child(3){left: 0;}
  .features_text:nth-child(4),
  .features_text:nth-child(5){right: 0;}
  
  .features p{width: 50%; margin:auto;}
  
  .features_text p{width:auto !important; margin: 0;}
  .case_list li br{display: none;}
  .support_list li{padding:4.5rem}
  
    
}
@media all and (max-width:1279px){
  h1{padding-left: 2rem;}
  .topmenu{display: none;}
  .main_text{width:40%; padding-top:5rem}
  .main_visu {width: 60%;}
  .features p{width: 40%;}
  .case_list{flex-wrap: wrap;}
  .case_list li{flex:none; width:39%;}
  
}

/* 모바일 */
@media all and (max-width:1023px){
  h1{padding-left: 1rem;
  font-size: 1.2rem;}
  /* .right_menu{display: none;} */
  .right_menu {
    display: flex !important;
    position: static !important; /* 필요시 */
    justify-content: flex-end;   /* 필요시 */
    width: 100%;
    gap: 1rem;
    margin-right: 4rem;
  }
  .right_menu a{display: flex; padding:0.5rem 1rem; font-weight: bold;}
  .main_visual{flex-direction: column; gap:5rem}
  .main_text{width:100%}
  .main_text dt{font-size: 3rem;}
  .main_visu{width: 100%;}
  .main_tit dl dt{font-size: 3rem;}
  .tab{flex-wrap: wrap;}
  .features p{width: 100%;}
  .features_text:nth-child(2),
  .features_text:nth-child(3),
  .features_text:nth-child(4),
  .features_text:nth-child(5){width: 100%; top: auto; left:auto; right:auto; position: relative; text-align: left;}
  .support_list{flex-wrap: wrap;}
  .support_list li{flex:none; width: 100%; padding:4.5rem 0}
   .table_wrap{overflow: scroll;}
   .price_table{width: 100%; white-space: nowrap;}
   .refund{width: 100%; flex-wrap: wrap;}
   .case_list li{width:calc(100% - 10rem);}
   .faq{padding: 0;}
   .inquiry .inner{flex-direction: column; gap:5rem}
   .inquiry_text{width:100%;}
   .inquiry_form{width: 100%;}
   .inquiry_text dl dd{font-size: 2.5rem;}
   .inquiry_list dl{width: 100%;}
   .tab button{padding:1rem 2rem}
}

/* 팝업 오버레이 */
.popup-overlay {
  display: flex; /* 처음부터 중앙 정렬 유지 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* 팝업 내용 */
.popup-content {
  background: greenyellow;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  max-width: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 제목과 문구 간격 조정 */
.popup-content h2 {
  font-size: 24px;
  margin-bottom: 15px; /* 제목과 문구 간격 */
}

/* 문구와 버튼 간격 */
.popup-content p {
  font-size: 16px;
  line-height: 1.6; /* 가독성 개선 */
  margin-bottom: 20px; /* 문구와 버튼 간격 */
}

/* 버튼과 체크박스를 가로로 정렬하는 컨테이너 */
.popup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 좌측(체크박스) & 우측(버튼) */
  margin-top: 15px;
  width: 100%;
}

/* 체크박스 스타일 */
.popup-footer label {
  font-size: 14px;
  color: #555;
  display: flex;
  align-items: center;
  white-space: nowrap; /* 줄바꿈 방지 */
}

/* 체크박스와 텍스트 사이 간격 */
.popup-footer label input {
  margin-right: 5px;
}

/* 버튼 스타일 */
.popup-footer button {
  margin-left: auto; /* 버튼을 오른쪽으로 이동 */
  padding: 8px 16px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 버튼 호버 효과 */
.popup-footer button:hover {
  background-color: #0056b3;
}

/* 모든 해상도에서 right_menu 항상 보이기 */
.right_menu {
  display: flex !important;
}