@charset "UTF-8";
/*-------------------------------------------------
title       : 설정
Author      : 플랜아이 광주
Create date : 2025-06-17
Last revision : 
-------------------------------------------------*/
@import url("/public/kor/css/contents.css");
/*-------------------------------------------------
title       : 서브
Author      : 플랜아이 moni
Create date : 2025-06-17
Last revision : 
-------------------------------------------------*/
/*#gnb1 > ul > li > a{color: #111;}


#hnb .hnb1 a{
    color: #111;
    &::before{background: #111;}
}
#gnb1 {
    position: relative;
    &::before {@include bg2(type1); height: 8rem; top: 0rem;  background-color: #FDF4EE;}
    & > ul > li{
        & > a{color: #111;}
        &.active{
            & > a{color: $point2 !important;}
        }   
    }
}
#gnb2 .control.open [class*=bar]{
    background: #111;
}



#main{background:#FDF4EE; font-family: $ff4; padding-bottom: 14.4rem;}
.main_wrap {
}

// 비주얼
#visual {
    @include width($width1);
    position: relative; padding-top: 8rem; 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%; background: #FDF4EE;


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

// 서브메뉴
#snb {   
    .list{
        width: 100%; overflow: hidden; padding-top: 6.4rem; padding-bottom: 1.4rem;//border-bottom: 1px solid #cecece;
        position: absolute; left: 50%; top: 12rem; transform: translateX(-50%);

        & > ul > li {
            &.active {
                & > ul {@include visible; }
            }
            & > a{@include hidden; display: none;}

            & > ul  {
                @include hidden; padding-bottom: 1rem;
                display: flex !important; align-items: center; justify-content: center;

                li{
                    a {
                        color: #11111180; font-size: 1.6rem; font-weight: 400; position: relative; transition: $time2; line-height: 3.4rem; display: inline-block;
                        &::before {content: ''; width: 0; height: 1px; position: absolute; left: 0; bottom: 0; background: #111; transition: $time2;}
                        &:hover,
                        &:focus{
                            color: #111;
                        }
                    }
                    & + li{padding-left:3.2rem; }

                    &.active{
                        a{
                            color: #111;
                            &::before{width: 100%;}
                        }
                    }
                }                
            }
        }
    }
    a.newlink{
        position: relative;
        &::after{content: "\EA6C"; font-family: $ff1; padding-left: 0.3rem; vertical-align: top; font-weight: 400;}
    }
    .space{
        position: relative;
        &::before{content: 'Showcase 안내'; width: 0; height: 3.2rem; line-height: 3.2rem; background: #333; color: #fff; font-size: 1.4rem; font-weight: 400; border-radius: 2rem; position: absolute; left: calc(50% + 1.6rem); transform: translateX(-50%) ; top: -4rem ; opacity: 0; transition: opacity 0.3s ease-in-out, width 0.4s ease-in-out .1s;}
        &::after{content: ''; @include triangle(1.6rem, bottom, #333); position: absolute; left: calc(50% + 1.6rem); transform: translateX(-50%); top: -1rem; opacity: 0; transition: all 0.3s ease-in-out ;}


        &.on::before{  width: 13.2rem; opacity: 1;  transition: width 0.3s ease-in-out, opacity 0.4s ease-in-out .1s; }
        &.on::after{opacity: 1; transition: all 0.4s ease-in-out .1s;}


    }
}*/
#contents_title {
  width: 140rem;
  max-width: calc(100% - 8rem);
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 8rem 0;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #contents_title {
    max-width: calc(100% - 5rem);
  }
}

/*.main_wrap.is2d {
    #contents_title {padding:12.2rem 2rem 12rem;}
}*/
.contents_wrap {
  width: 140rem;
  max-width: calc(100% - 8rem);
  margin-left: auto !important;
  margin-right: auto !important;
}
@media screen and (max-width: 768px) {
  .contents_wrap {
    max-width: calc(100% - 5rem);
  }
}

.contents_wrap2 {
  width: 128.6rem;
  max-width: calc(100% - 8rem);
  margin-left: auto !important;
  margin-right: auto !important;
}
@media screen and (max-width: 768px) {
  .contents_wrap2 {
    max-width: calc(100% - 5rem);
  }
}

.contents_wrap3 {
  width: 70rem;
  max-width: calc(100% - 8rem);
  margin-left: auto !important;
  margin-right: auto !important;
}
@media screen and (max-width: 768px) {
  .contents_wrap3 {
    max-width: calc(100% - 5rem);
  }
}

.location {
  width: 100%;
  padding: 1.2rem 0;
}
.location .path {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.location .path li {
  display: inline-block;
  vertical-align: top;
  color: #7A7A7A;
  font-size: 1.3rem;
  line-height: 1.5rem;
  position: relative;
}
.location .path li + li {
  padding-left: 2.8rem;
}
.location .path li + li::before {
  content: "\ea6e";
  font-family: "remixicon";
  width: 2.8rem;
  height: 1.5rem;
  text-align: center;
  color: #aaa;
  position: absolute;
  left: 0;
  top: 0;
}
.location a:hover, .location a:focus {
  color: #111;
  text-decoration: underline;
}
.location .list {
  display: inline-block;
  width: calc(100% - 7rem);
}
.location .list > li {
  float: left;
  position: relative;
  width: 20rem;
  max-width: 20%;
  height: 6.9rem;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  line-height: 6.8rem;
}
.location .list > li button {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 4rem 0 2rem;
  background-color: #303b50;
  text-align: left;
  color: #fff;
  line-height: inherit;
}
.location .list > li button::after {
  position: absolute;
  top: auto;
  left: auto;
  right: auto;
  font-family: "remixicon";
  right: 2rem;
  top: 0;
  content: "\e942";
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.location .list > li ul {
  visibility: hidden;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 0;
  padding: 0 1rem;
  border: 1px solid #303b50;
  background-color: #fff;
  line-height: 1.5;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.location .list > li.active button::after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.location .list > li.active ul {
  visibility: visible;
  height: auto;
  padding: 1rem;
}

.contents_util {
  background-image: url(/public/kor/img/sub/sub_ti_bg.png);
  background-size: cover;
  background-position: center;
  margin-bottom: 6rem;
}
.contents_util .contents_title {
  color: #222;
  text-align: center;
  font-size: 4rem;
  font-weight: 700;
  line-height: 100%;
  padding: 10rem 0;
}

.depth3_tab ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 12rem;
  margin-top: -7.5rem;
}
.depth3_tab ul li + li {
  margin-left: 0.8rem;
}
.depth3_tab ul li a {
  display: inline-block;
  line-height: 4.3rem;
  border: 1px solid #333;
  border-radius: 5rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.depth3_tab ul li a:hover, .depth3_tab ul li a:focus {
  background: rgba(17, 17, 17, 0.0509803922);
}
.depth3_tab ul li.active a {
  background: #111;
  color: #fff;
}
.depth3_tab ul a {
  display: block;
  padding: 0 2rem;
  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_textbox {
  width: 100%;
  height: 4rem;
  max-height: 100%;
  padding: 0 1rem;
  border: 1px solid #ddd;
  text-align: left;
  vertical-align: top;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.form_textbox:focus {
  border-color: #000;
}

.form_radio {
  display: inline-block;
  position: relative;
  z-index: 0;
  margin-right: 2rem;
  padding-left: 2rem;
  vertical-align: top;
}
.form_radio input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.form_radio input:focus + label::before {
  outline: 1px dotted #000;
}
.form_radio input:checked + label::after {
  background-color: #484c58;
}
.form_radio label {
  cursor: pointer;
}
.form_radio label::before {
  position: absolute;
  left: 0;
  top: 0.5rem;
  z-index: -2;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 100%;
  border: 1px solid #ddd;
  background-color: #fff;
  content: "";
}
.form_radio label::after {
  position: absolute;
  left: 0.5rem;
  top: 1rem;
  z-index: -1;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 100%;
  content: "";
}
.form_radio:last-child {
  margin-right: 0;
}

.contact {
  min-height: 50rem;
}