/* treatment.css - 치료과정 페이지 */

/* --------------------- treatment main section container */
#treatment_main section .container {
  padding: 90px 20px;
}

#treatment_main section .container .wrapper h2 {
  font-size: var(--text-lg);
  padding-bottom: 20px;
}

#treatment_main section .container .wrapper p {
  line-height: 1.3;
}

#treatment_main section .container .wrapper .content {
  padding-top: 35px;
}

/* --------------------- header */
#treatment_header {
}
#treatment_header .container {
}
#treatment_header .container .wrapper {
}
#treatment_header .container .wrapper .main-banner {
}
#treatment_header .container .wrapper .main-banner img {
  position: relative;
}
#treatment_header .container .wrapper .main-banner .txt {
  position: absolute;
  width: 100%;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  font-family: "BMDOHYEON";
  text-shadow: 5px 0 #0000002c;
  /*  */
}

#treatment_header .container .wrapper .main-banner .txt h1 {
  font-size: var(--text-xl);
}
#treatment_header .container .wrapper .main-banner .txt h1 span {
  color: #00d8b5;
}
#treatment_header .container .wrapper .main-banner .txt h4 {
  font-size: var(--text-lg);
  font-weight: 300;
  opacity: 0.9;
  padding: 20px;
  line-height: 1.45;
}

/* --------------------- nav tabs */

.nav-tabs {
  display: flex;
  padding: 35px 0;
  font-size: var(--text-lg);
  font-weight: 600;
  justify-content: space-around;
  border-bottom: 2px solid #b7b7b7;
  background: #f7f7f7;
}
.nav-tabs li {
  font-size: var(--text-xl);
}
.nav-tabs li.active {
  color: #00d9b6;
  text-decoration: underline;
  text-underline-offset: 47px;
}
.nav-tabs li a {
  color: #292929;
}

.nav-tabs li.active a {
  color: #00d9b6;
}

/* --------------------- treatment section 00 */

#treatment_main {
  background: #f0f2ef;
}

.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}

#treatment_main section#treatment_intro .container .wrapper .content {
  padding-top: 80px;
}

#treatment_main .container .wrapper .content .point {
  display: flex;
  justify-content: space-evenly;
  gap: 50px;
  padding-bottom: 60px;
  /* justify-content: center;
  gap: 60px; */
}

#treatment_main .container .wrapper .content .point.second,
#treatment_main .container .wrapper .content .point.forth {
  gap: 60px;
  justify-content: flex-start;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

#treatment_main .container .wrapper .content .point .txt {
  align-self: center;
  display: flex;
  flex-direction: column;
  font-size: var(--text-md);
}

#treatment_main .container .wrapper .content .point .txt span.number {
  padding-bottom: 15px;
  font-size: var(--text-lg);
  color: #0e9380;
}
#treatment_main .container .wrapper .content .point .txt span.color {
  font-weight: 700;
  padding-bottom: 15px;
}
#treatment_main .container .wrapper .content .point .txt span.color .green {
  color: #0e9380;
}
#treatment_main .container .wrapper .content .point .txt p {
  font-size: var(--text-sm);
  padding-top: 15px;
  position: relative;
}

#treatment_main .container .wrapper .content .point .txt p:before {
  content: "";
  position: absolute;
  width: 400px;
  height: 2px;
  background-color: #0e9380;
  top: -2px;
}

#treatment_main .container .wrapper .content .point img {
  border-radius: 20px;
}

#treatment_main .container.main {
  max-width: unset;
  padding: 0;
  margin: 0;
}

section.block {
  padding: 120px 0;
}
/* --------------------- treatment section 01 */

#treatment_1,
#treatment_2,
#treatment_3 {
  background: #e7fcf7;
}

.full-content .content p {
  text-align: center;
  font-weight: 300;
  font-size: var(--text-md);
  padding-bottom: 70px;
}
.full-content .content p span {
  font-weight: 600;
}

#treatment_main section .container .wrapper .cards {
  justify-content: center;
  max-width: 1480px;
  margin: 0 auto;
}

#treatment_main section .container .wrapper .cards .card {
  padding: 0px 20px;
  max-width: 300px;
  height: 400px;
  background: #ffffff;
  margin: 0 15px;
  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
}
#treatment_main section .container .wrapper .cards .card .card-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

#treatment_main section .container .wrapper .cards .card .card-wrapper .num {
  color: #009981;
  font-size: var(--text-md);
}
#treatment_main section .container .wrapper .cards .card .card-wrapper .img {
  align-self: center;
  padding: 15px 0;
}
#treatment_main section .container .wrapper .cards .card .card-wrapper .title {
  font-size: var(--text-md);
  font-weight: 700;
  padding: 15px 0;
}
#treatment_main
  section
  .container
  .wrapper
  .cards
  .card
  .card-wrapper
  .title
  span {
  color: #009981;
}
#treatment_main section .container .wrapper .cards .card .card-wrapper .txt {
  font-size: var(--text-xs);
}

/* --------------------- treatment section 02 */

.checklist {
  background: #f7f7f7;
}

.checklist .content .program-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 30px 0;
}
.checklist .content .program-list li {
  display: flex;
  width: calc((100% - 100px) / 2);
  gap: 15px;
  border: 1px solid;
  padding: 25px 30px;
  border: 3px solid transparent;
  background: linear-gradient(to right, white, white) padding-box,
    linear-gradient(22deg, rgb(57, 57, 57) 0%, rgba(57, 57, 57, 1) 100%)
      border-box;
  border-radius: 50px;
}

.checklist .content .program-list li img {
  width: 50px;
  height: 45px;
}
.checklist .content .program-list li .txt {
  font-size: var(--text-md);
  align-self: center;
  font-weight: 500;
}

/* --------------------- treatment section 03 */

.type {
  background: #282828;
}

.type h2 {
  color: #ffffff;
}

.type .content .horizontal-card {
  display: flex;
  max-width: 1250px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 80px;
}

.type .content .horizontal-card.two,
.type .content .horizontal-card.four,
.type .content .horizontal-card.two-2,
.type .content .horizontal-card.two-3,
.type .content .horizontal-card.four-3 {
  flex-direction: row-reverse;
}
.type .content .horizontal-card .left {
  flex: 1;
  padding: 40px 80px;
  background-color: #fff;
  align-self: center;
}
.type .content .horizontal-card .left h2 {
  color: #009688;
  font-size: 32px !important;
  margin-bottom: 20px;
  text-align: left;
  position: relative;
}

.type .content .horizontal-card .left h2:after {
  content: "";
  position: absolute;
  left: 0;
  top: unset;
  bottom: 0;
  width: 70%;
  height: 2px;
  background-color: #0e9380;
}

.type .content .horizontal-card .left p {
  line-height: 1.5 !important;
  font-size: var(--text-sm) !important;
  margin-bottom: 8px;
  padding: 0 !important;
  text-align: left !important;
  font-weight: 400 !important;
}

.type .content .horizontal-card.one .right {
  flex: 0.9;
  background: url("../assets/images/treatment/horizontal-card01.png") center
    center / cover no-repeat;
  min-height: 350px;
}
.type .content .horizontal-card.two .right {
  flex: 0.9;
  background: url("../assets/images/treatment/horizontal-card02.png") center
    center / cover no-repeat;
  min-height: 350px;
}
.type .content .horizontal-card.three .right {
  flex: 0.9;
  background: url("../assets/images/treatment/horizontal-card03.png") center
    center / cover no-repeat;
  min-height: 350px;
}
.type .content .horizontal-card.four .right {
  flex: 0.9;
  background: url("../assets/images/treatment/horizontal-card04.png") center
    center / cover no-repeat;
  min-height: 350px;
}

.type .content .horizontal-card.one-2 .right {
  flex: 0.9;
  background: url("../assets/images/treatment/horizontal-card01-2.png") center
    center / cover no-repeat;
  min-height: 350px;
}
.type .content .horizontal-card.two-2 .right {
  flex: 0.9;
  background: url("../assets/images/treatment/horizontal-card02-2.png") center
    center / cover no-repeat;
  min-height: 350px;
}

.type .content .horizontal-card.one-3 .right {
  flex: 0.9;
  background: url("../assets/images/treatment/horizontal-card01-3.png") center
    center / cover no-repeat;
  min-height: 350px;
}
.type .content .horizontal-card.two-3 .right {
  flex: 0.9;
  background: url("../assets/images/treatment/horizontal-card02-3.png") center
    center / cover no-repeat;
  min-height: 350px;
}
.type .content .horizontal-card.three-3 .right {
  flex: 0.9;
  background: url("../assets/images/treatment/horizontal-card03-3.png") center
    center / cover no-repeat;
  min-height: 350px;
}
.type .content .horizontal-card.four-3 .right {
  flex: 0.9;
  background: url("../assets/images/treatment/horizontal-card04-3.png") center
    center / cover no-repeat;
  min-height: 350px;
}

/* --------------------- treatment section 04 */

.warning {
  background: #cdfff6;
  background: linear-gradient(
    109deg,
    rgba(230, 254, 249, 1) 0%,
    rgba(225, 229, 224, 1) 100%
  );
}

.warning .content .warning-list {
  max-width: 1180px;
  margin: 0 auto;
}

.warning .content .warning-list li {
  background: #ddf3ee;
  border-radius: 25px;
  margin-bottom: 30px;
  text-align: center;
  padding: 40px 0px;
}
.warning .content .warning-list li .inner {
}
.warning .content .warning-list li .inner img {
  max-width: 120px;
}
.warning .content .warning-list li .inner p {
  padding: 0 !important;
  font-weight: 500 !important;
  padding-top: 30px !important;
}

/* --------------------- treatment section 04 */
.qa {
  background: #fafafa;
  background: url("../assets/images/one_day/section10.png");
}

.qa .answer {
  width: 85%;
}

/********************************************* ANESTHESIA ************************************
*/
.container .wrapper .content {
  color: #292929;
}

#anesthesia_main section .container {
  padding: 90px 20px;
}

#anesthesia_main section .container .wrapper h2 {
  font-size: var(--text-lg);
  padding-bottom: 20px;
}

#anesthesia_main section .container .wrapper p {
  line-height: 1.3;
}

#anesthesia_main section .container .wrapper .content {
  padding-top: 35px;
  text-align: center;
}