/* navigation.css - 컴퓨터 네비게이션 페이지 */

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

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

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

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

/* --------------------- header */
#navigation_header {
}
#navigation_header .container {
}
#navigation_header .container .wrapper {
}
#navigation_header .container .wrapper .main-banner {
}
#navigation_header .container .wrapper .main-banner img {
  position: relative;
}
#navigation_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: var(--font-heading);
  text-shadow: 5px 0 #0000002c;
  /*  */
}

#navigation_header .container .wrapper .main-banner .txt h1 {
  font-size: var(--text-xl);
}
#navigation_header .container .wrapper .main-banner .txt h1 span {
  color: #00d8b5;
}

/* --------------------- navigation section 1 */

#navigation_1 {
  background-color: #f7f7f7;
}

#navigation_1 .container .wrapper .content {
  text-align: center;
}

#navigation_1 .container .wrapper .content p {
  font-size: var(--text-lg);
  font-weight: var(--font-light);
  line-height: 1.4;
}

#navigation_1 .container .wrapper .content p:nth-child(2) {
  padding-bottom: 60px;
}

#navigation_1 .container .wrapper .content p span {
  font-weight: 600;
}

#navigation_1 .container .wrapper .content img {
  padding: 75px 0;
}

/* --------------------- navigation section 02 */

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

#navigation_main #navigation_2 .container .wrapper h2 {
  padding-bottom: 10px;
}

#navigation_2 .container .wrapper h4 {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  opacity: 0.9;
  line-height: 1.45;
  color: #00d8b5;
  text-align: center;
  padding-bottom: 20px;
}

#navigation_2 .container .wrapper .content {
  text-align: center;
}

#navigation_2 .container .wrapper .content p {
  font-size: var(--text-lg);
  font-weight: var(--font-light);
  line-height: 1.4;
}

#navigation_2 .container .wrapper .content p:nth-child(3) {
  padding: 30px 0;
}

#navigation_2 .container .wrapper .content p span {
  font-weight: 600;
}

#navigation_2 .container .wrapper .content .list {
  margin-top: 50px;
  margin-bottom: 50px;
  padding: 0px 0px 35px 0px;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  max-width: 1140px;
  justify-content: space-evenly;
}

#navigation_2 .container .wrapper .content .list .item {
  width: 33.33%;
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  text-transform: none;
  font-style: normal;
  letter-spacing: -5px;
  color: #c8c5cc;
}
#navigation_2 .container .wrapper .content .list .item:nth-child(2) {
  border: 1px solid #525252;
  border-top: 0;
  border-bottom: 0;
}

/* --------------------- navigation section 03 */

#navigation_3 {
  background: url("../assets/images/navigation/section3-bg.jpg");
  background-size: contain;
}

#navigation_3 .container .wrapper .num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-bold);
  font-size: 1.5rem;
  color: #fff;
  width: 3.225rem;
  height: 3.225rem;
  background-color: #00d9b6;
  border-radius: 50%;
  position: relative;
  left: 50%;
  transform: translate(-50%, -50%);
}

#navigation_3 .container .wrapper .content .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
  padding: 50px 0;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}

#navigation_3 .container .wrapper .cards .card {
  width: calc(100% / 2.5);
}

#navigation_3 .container .wrapper .content p {
  font-size: var(--text-lg);
  font-weight: var(--font-light);
  line-height: 1.4;
  padding: 15px 0;
  text-align: center;
}

/* --------------------- navigation section 04 */

#navigation_4 {
  background: url("../assets/images/navigation/section4-bg.jpg");
  background-size: contain;
}

#navigation_4 .container .wrapper .num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-bold);
  font-size: 1.5rem;
  color: #fff;
  width: 3.225rem;
  height: 3.225rem;
  background-color: #00d9b6;
  border-radius: 50%;
  position: relative;
  left: 50%;
  transform: translate(-50%, -50%);
}

#navigation_4 .container .wrapper .content .img {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 30px 0;
}

#navigation_4 .container .wrapper .content .img img {
  padding: 0 20px;
}

#navigation_4 .container .wrapper .content p {
  font-size: var(--text-lg);
  font-weight: var(--font-light);
  line-height: 1.4;
  padding: 15px 0;
  text-align: center;
}
/* --------------------- navigation section 05 */

#navigation_5 {
  background: url("../assets/images/navigation/section5-bg.jpg");
  background-size: contain;
}

#navigation_5 .container .wrapper .num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-bold);
  font-size: 1.5rem;
  color: #fff;
  width: 3.225rem;
  height: 3.225rem;
  background-color: #00d9b6;
  border-radius: 50%;
  position: relative;
  left: 50%;
  transform: translate(-50%, -50%);
}

#navigation_main section .container .wrapper .content {
  text-align: center;
}

#navigation_5 .container .wrapper .content img {
  padding: 30px 0 65px 0;
}

#navigation_5 .container .wrapper .content p {
  font-size: var(--text-lg);
  font-weight: var(--font-light);
  line-height: 1.4;
  padding: 15px 0;
  text-align: center;
}

/* --------------------- navigation section 06 */

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

#navigation_6 .container .wrapper .content .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px 40px;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}

#navigation_6 .container .wrapper .cards .card {
  width: unset;
  width: calc((100% - 15px) / 2.5);
  min-height: 320px;
  background-color: #f7f7f7;
}

section .container .wrapper .cards .card .first-card {
  background-image: url("/gangnamafter/assets/images/navigation/section6-01.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

section .container .wrapper .cards .card .second-card {
  background-image: url("/gangnamafter/assets/images/navigation/section6-02.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

section .container .wrapper .cards .card .third-card {
  background-image: url("/gangnamafter/assets/images/navigation/section6-03.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

section .container .wrapper .cards .card .forth-card {
  background-image: url("../assets/images/navigation/section6-04.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f7f7f7;
}

#navigation_6 .container .wrapper .cards .card .card-txt {
  text-align: left;
}

#navigation_6 .container .wrapper .cards .card .card-txt h5 {
  font-size: var(--text-md);
  padding-bottom: 15px;
  opacity: 1;
}

#navigation_6 .container .wrapper .cards .card .card-txt h3 {
  font-size: var(--text-md);
  font-weight: var(--font-normal);
  margin: 5px 0 10px 0;
}

/* --------------------- navigation section 07 */

#navigation_7 {
  background: #f7f7f7;
}

#navigation_7 .container .wrapper .content img {
  max-width: 820px;
}

/* --------------------- navigation section 08 */

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

#navigation_main section .container .wrapper .content {
  text-align: center;
}

#navigation_8 .container .wrapper .content img {
  padding: 30px 0 65px 0;
}

#navigation_8 .container .wrapper .content p {
  font-size: var(--text-lg);
  font-weight: var(--font-light);
  line-height: 1.4;
  padding: 15px 0;
  text-align: center;
}

#navigation_8 .container .wrapper .content p span {
  font-weight: 600;
}

/* --------------------- navigation section 9 */

#navigation_9 {
  background: #fafafa;
}

#navigation_9 .container .wrapper .content {
  display: flex;
  justify-content: space-evenly;
}

#navigation_main #navigation_9 .container .wrapper .content {
  padding-top: 65px;
}

#navigation_9 .container .wrapper .content .img {
  align-self: center;
}
#navigation_9 .container .wrapper .content .txt,
#navigation_9 .container .wrapper .content .txt .list li.list-item .txt {
  align-self: center;
}

#navigation_9 .container .wrapper .content .txt .title {
  font-size: var(--text-lg);
  line-height: 1.4;
  padding-bottom: 40px;
}
#navigation_9 .container .wrapper .content .txt span {
  font-weight: 600;
}

#navigation_9 .container .wrapper .content .txt .list li.list-item {
  display: flex;
  font-size: var(--text-md);
  padding: 20px 0;
  gap: 10px;
}

/* --------------------- navigation section 10 */

#navigation_10 {
  background: #ccfef5;
  background: linear-gradient(
    109deg,
    rgba(230, 254, 249, 1) 0%,
    rgba(225, 229, 224, 1) 100%
  );
}
#navigation_10 .container .wrapper .candidates {
  text-align: center;
  padding-left: 110px;
}
/* --------------------- navigation section 11 */

#navigation_11 {
  background: #e9f8f3;
  min-height: 1050px;
}

#navigation_11 .container .wrapper p {
  text-align: center;
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  padding: 45px 0 75px;
}

/* --------------------- navigation section 12 */

#navigation_12 {
  background: url("../assets/images/one_day/section10.png");
  background-repeat: no-repeat;
}

#navigation_main #navigation_12 .container .wrapper .content {
  text-align: left;
}

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

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

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

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

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