/*서브탭메뉴*/


.page {
    width: 100%;
    background: #fff;
    position: relative;
    padding-bottom: 3vw;
    margin-bottom: 7vw;
    box-sizing: border-box;
}

.tabwrap {
    transform: rotate(-0.03deg);
    width: 95%;
    margin: 0 auto;
    z-index: 9999;
    border: 1px solid #eaeaea;
    display: none;
    margin-top: 7vw;
}

.tabwrap ul {
    width: 95vw;
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    flex-wrap: nowrap;
    flex-direction: row;
}

.tabwrap>ul>li {
    width: 100%;
    display: block;
    font-size: 11px;
    line-height: 8vw;
    transform: rotate(-0.03deg);

}

.tw50>ul>li{ width: 50% !important;}
.tw33>ul>li{ width: 33.3333% !important;}
.tw25>ul>li{ width: 25% !important;}
.tw20>ul>li{ width: 20% !important;}
.tabwrap ul a {
    display: block;
    background: #fff;
    color: #301955;
    font-weight: 400;
    width: 100%;
    height: 100%;
    font-size: 2.2vw;
}
.tabwrap>ul>li>a {
    border-right: 1px solid #eaeaea;
    border-left: 1px solid #eaeaea;

    
}

.tabwrap.tw_list {
    margin-bottom:19vw
}

.tabwrap ul li:first-child a {
    border-left: none;
}



.tabwrap > ul > li > a.tab_on {
    background: #301955 !important;
    color: #fff !important;
}


.tabwrap > ul > li > a:hover {
    color: #fff !important;
    font-weight: 400 !important;
    z-index: 11111;
    background: #301955 !important;
}

.tab_on {
    background: #301955 !important;
    color: #fff !important;
    font-weight: 400 !important;
    z-index: 11111;
}

/* 하위탭 */

.tabwrap ul > li > .bt_li {
   width: 90%;
   margin: 0 auto;
   position: absolute;
   top:12vw;
   display: none;
}

.tabwrap ul > li > .bt_li li {
    position: relative;
    width: 100%;    
}

.tabwrap ul > li > .bt_li li.tab_on {
    background: #ffffff !important;
    color: #636363 !important;
}

.tabwrap ul > li > .bt_li li:after {
    content: "ㅣ";
    display: block;
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 100;
    color: #bbb;
    z-index: 111;
}

.tabwrap ul > li > .bt_li li:last-child:after {
    display: none;
}

.tabwrap ul > li > .bt_li li a {
    border-right: 0;
}

.tabwrap .bt_tab2 {
    left: -21vw;
}

.intab_on {
    font-weight: 700 !important;
    color: #23201f !important;
    background: #ffffff !important;
}




/************************* depth_area start ****************************/



  .depth_area {
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
  }

  .depth_area .depth_two {
    display: flex;
    width:100%;
    flex-wrap: nowrap;
    border: 0;
  }


  .depth_area .depth_two li{
    position: relative;
    width: 100%;
    height: 76px;
    box-sizing: border-box;
    color: #afafaf;
    display: block;
    text-align: center;
    border: none;

  }

  .depth_area .depth_two li a {
       width: 100%;
    /* line-height: 4vw; */
    height: 76px;
    line-height: 76px;
    /* padding-top: 3.5vw; */
    box-sizing: border-box;
    font-size: 16px;
    color: #afafaf;
    background: #ffffff;
    display: block;
    text-align: center;
    border: none;
  }

  .depth_area .depth_two li::after {
    content: "ㅣ";
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 100;
    color: #bbb;
    z-index: 111;
  }

  .depth_area .depth_two li:last-child::after {
    display: none;
  }

  .depth_on {
    color: #333 !important;
    font-weight: 600 !important;
    z-index: 11111;
  }


/************************* depth_area end ****************************/