@charset "UTF-8";
@import url("../../css/common.css");
@import url("contents.css");
/*-------------------------------------------------
title       : 서브
Author      : 플랜아이 moni
Create date : 2024-11-11
-------------------------------------------------*/
#main {
  background: #dbdfeb;
  border-radius: 2rem 2rem 0 0;
  position: relative; /*min-height: calc(100vh - 20rem);*/
  overflow: hidden;
  padding-bottom: 6rem;
}

#snb {
  display: none;
}

#footer::before {
  content: "";
  width: 100%;
  height: 4rem;
  background: #dbdfeb;
  position: absolute;
  left: 0;
  top: 0rem;
  z-index: -1;
}

/*.main_wrap {
    @include width($width1);position: relative; 
    &::after{content: ''; display: block; clear: both;}
}*/
/*#visual 
{
    position: relative; height: 38rem; margin-bottom: 15rem; color: #fff; text-align: center;

    .title {@include position(center); @include fs(40); width: 100%;}

    .control 
    {
        @include position(center); @include width($width1);

        a 
        {
            @include fs(18);
            float: left; line-height: 5rem;

            &::before {float: left; width: 5rem; height: 5rem; margin-right: 1rem; border-radius: 100%; background-color: rgba(0, 0, 0, 0.2); font-family: $ff1; content: ''; text-align: center; transition: $time2;}

            &.next 
            {
                float: right;

                &::before {float: right; margin: 0 0 0 1rem; content: '';}
            }

            &:hover,
            &:focus
            {
                &::before {background-color: rgba(0, 0, 0, 0.7);}
            }
        }
    }

    .img
    {
        @include position(center);
        display: block; z-index: -1; width: 1000%; height: 100%;

        img {@include position(center); max-width: inherit; height: 100%;}
    }
}

// 서브메뉴
#snb 
{
    float: left; width: 25rem;

    .title {@include fs(24); @include ellipsis1; margin-bottom: 1rem; padding: 4rem 0; background-color: $point3; font-weight: 400; color: #fff; text-align: center;}

    .list
    {
        overflow: hidden; border-bottom: 1px solid #cecece;

        & > ul > li
        {
            margin-bottom: -0.2rem;

            & > a {display: block; position: relative; padding: 1.5rem 4rem 1.5rem 1.5rem; border-bottom: 1px solid #e5e5e5; color: #333;}
            &.type1 > a::after {@include icon(type2); @include fs(14); right: 1.5rem; color: #a2a3ad; content: '';}

            &:last-child
            {
                & > a,
                & > ul {border-bottom: 0 none;}
            }

            &.active
            {
                &.type1 > a::after {color: #fff; content: '';}

                & > a {background-color: $point4; color: #fff;}
                & > ul {@include visible; padding: 1.5rem; transition: $time2;}
            }

            & > ul 
            {
                @include hidden;
                display: block !important; padding: 0 1.5rem; border-bottom: 1px solid #e5e5e5;

                .active a 
                {
                    font-weight: 600; color: #353541;

                    &::before {background-color: #374156;}
                }

                a 
                {
                    @include bul(1.5rem); 
                    display: block; color: #767676;

                    &::before {top: 1rem; width: 0.4rem; height: 0.4rem; border-radius: 100%; background-color: #aeaeae;}
                }
            }
        }
    }
}*/
.contents_util {
  display: none;
}

#contents_title {
  font-size: 3.4rem;
  margin-bottom: 2.5rem;
  padding-top: 5rem;
  font-family: "Nanum Square";
  font-weight: 500;
  color: #000;
}

.contents_wrap {
  width: 180rem;
  max-width: calc(100% - 4rem);
  margin-left: auto !important;
  margin-right: auto !important;
}

.depth4_tab ul {
  display: table;
  width: calc(100% + 0px);
  table-layout: fixed;
  margin-bottom: 5rem;
}
.depth4_tab ul > * {
  display: table-cell;
  padding-right: 0px;
  vertical-align: middle;
}
.depth4_tab ul li {
  border: 1px solid #ddd;
  background-color: #f8f8f8;
}
.depth4_tab ul li + li {
  border-left: 0 none;
}
.depth4_tab ul li.active {
  border-color: #9b8873;
  background-color: #9b8873;
  font-weight: 600;
  color: #fff;
}
.depth4_tab ul a {
  display: block;
  padding: 1.4rem;
  text-align: center;
}

#depth5_menu_ul {
  overflow: hidden;
  overflow-x: auto;
  margin: -3rem 0 5rem;
  padding-left: 1rem;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
}
#depth5_menu_ul li {
  display: inline;
  margin-right: 1rem;
}
#depth5_menu_ul li.active a {
  font-weight: 400;
  color: #484c58;
}
#depth5_menu_ul li.active a::before {
  width: 100%;
}
#depth5_menu_ul a {
  display: inline-block;
  overflow: hidden;
  position: relative;
  padding: 0 1rem 1.5rem;
  vertical-align: top;
}
#depth5_menu_ul a::before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0.3rem;
  background-color: #484c58;
  content: "";
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#depth5_menu_ul a:hover::before, #depth5_menu_ul a:focus::before {
  width: 100%;
}

.form_radio2 {
  position: relative;
  z-index: 0;
  padding-left: 2.3rem;
  vertical-align: top;
  line-height: 2.3rem;
  margin-bottom: 0.5rem;
}
.form_radio2 input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.form_radio2 input:focus + label::before {
  outline: 1px dotted #000;
}
.form_radio2 input:checked + label::after {
  background-color: #283673;
}
.form_radio2 label {
  cursor: pointer;
  font-size: 1.8rem;
  font-weight: 600;
}
.form_radio2 label::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 0.4rem;
  z-index: -2;
  border: 1px solid #ddd;
  background-color: #fff;
}
.form_radio2 label::after {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  position: absolute;
  left: 0.4rem;
  top: 0.8rem;
  z-index: -1;
  border-radius: 100%;
}
.form_radio2:last-child {
  margin-right: 0;
}
.form_radio2.type2 input:checked + label::after {
  background-color: #0E6B70;
}

.form_check2 {
  position: relative;
  z-index: 0;
  padding-left: 2.3rem;
  vertical-align: top;
  line-height: 2.3rem;
}
.form_check2 input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.form_check2 input:focus + label::before {
  outline: 1px dotted #000;
}
.form_check2 input:checked + label::after {
  background-color: #283673;
}
.form_check2 label {
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 500;
}
.form_check2 label::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  left: 0;
  top: 0.4rem;
  z-index: -2;
  border-radius: 0.2rem;
  border: 1px solid #ddd;
  background-color: #fff;
}
.form_check2 label::after {
  content: "\eb7b";
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  left: 0rem;
  top: 0.4rem;
  z-index: -1;
  border-radius: 0.2rem;
  font-family: "remixicon";
  font-size: 1.3rem;
  line-height: 1.5rem;
  text-align: center;
  font-weight: 600;
  color: #fff;
}
.form_check2:last-child {
  margin-right: 0;
}
.form_check2.type2 input:checked + label::after {
  background-color: #0E6B70;
}