@charset "utf-8";
:root {
   --primary: #27B06E;
   --primary-hover: #33C859;
}
body { 
   font-family:'Pretendard', -apple-system,BlinkMacSystemFont,"Helvetica Neue","Apple SD Gothic Neo",Arial,sans-serif;
   color:#282828; 
   font-size: 16px;
   background:transparent; 
   -webkit-text-size-adjust:none; 
   -moz-osx-font-smoothing: grayscale; 
   -webkit-font-smoothing: antialiased; 
   word-break:keep-all;
}

/*건너뛰기 메뉴*/
#skip {
   position:relative;
   z-index:9999
}
#skip a {
   position:absolute;
   top:-40px;
   left:0;
   width:100%;
   padding:5px 0;
   background-color:#009fdc;
   font-size:16px;
   line-height:30px;
   color:#fff;
   text-align:center;
   transition:all 0.4s
}
#skip a:hover,#skip a:focus,#skip a:active {
   top:0;
   text-decoration:none
}
.clearfix {
   display:block;
}
.clearfix:after {
   content:"";
   display:table;
   clear:both
}
.clear {
   clear:both
}
.blind {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   opacity: 0;
   z-index: 6;
   width: 100%;
   height: 100%;
   background: #000;
}

/* align */
.tal {text-align:left !important;}
.tac {text-align:center !important;}
.tar {text-align:right !important;}

.position_re {position:relative;}
.scrollX {overflow-x:scroll !important;}
.scrollY {overflow-y:scroll !important;}
.overflowH {overflow:hidden !important;}

/* float */
.floatl {float:left !important;}
.floatr {float:right !important;}

/* display */
.disBlock { display: block !important;}
.disNone { display: none !important;}
.disInline {display:inline !important;}
.disIB {display:inline-block !important;}

.ml5 {margin-left:5px}
/* ------------------------------------------------------------------- radio checkBox - Start ------------------------------------------------------------------- */
/* Radio */
.def-input[type="radio"] {
   -webkit-appearance: none;
   -moz-appearance: none;
   height: 21px;
   width: 21px;
   border-radius: 9999px;
   outline: none;
   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;
   vertical-align: unset;
   position: relative;
   margin: 0;
   cursor: pointer;
   border: 1px solid #bbc1e1;
   background: #fff;
   -webkit-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
}
.def-input[type="radio"]:hover {
   border-color: var(--primary);
}
.def-input[type="radio"]:after {
   content: "";
   width: 19px;
   height: 19px;
   position: absolute;
   border-radius: 9999px;
   background: #fff;
   opacity: 0;
   -webkit-transform: scale(0.7);
   -ms-transform: scale(0.7);
      transform: scale(0.7);
   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;
   -webkit-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
}
.def-input[type="radio"]:checked {
   background: var(--primary);
   border-color: var(--primary);
}
.def-input[type="radio"]:checked:after {
   -webkit-transform: scale(0.5);
   -ms-transform: scale(0.5);
      transform: scale(0.5);
   opacity: 1;
}
.def-input[type="radio"]:focus {
   border-color: var(--primary);
}

 /* CheckBox */
.def-input[type="checkbox"] {
   -webkit-appearance: none;
   -moz-appearance: none;
   height: 20px;
   width: 20px;
   border-radius: 3px;
   outline: none;
   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;
   vertical-align: unset;
   position: relative;
   margin: 0;
   cursor: pointer;
   border: 1px solid #dfdfdf;
   background: #fff;
   -webkit-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
}
.def-input[type="checkbox"]:hover {
   border-color: var(--primary);
}
.def-input[type="checkbox"]:after {
content: "";
   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;
   width: 6px;
   height: 9px;
   border: 0.15rem solid #fff;
   border-top: 0;
   border-left: 0;
   top: 2px;
   position: absolute;
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
      transform: rotate(0deg);
   -webkit-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
}
.def-input[type="checkbox"]:checked {
   background: var(--primary);
   border-color: var(--primary);
}
.def-input[type="checkbox"]:checked:after {
   -webkit-transform: rotate(43deg);
   -ms-transform: rotate(43deg);
      transform: rotate(43deg);
}
.def-input[type="checkbox"]:focus {
   border-color: var(--primary);
}

/* label */
.def-form-label{
   text-transform: capitalize;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
      -ms-flex-align: center;
         align-items: center;
   -webkit-box-pack: justify;
      -ms-flex-pack: justify;
         justify-content: space-between;
   -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
         user-select: none;
   margin-left: 4px;
   line-height: normal;
   letter-spacing: -1px;
}
/* ------------------------------------------------------------------- radio checkBox - End ------------------------------------------------------------------- */


/* ------------------------------------------------------------------- input select - Start ------------------------------------------------------------------- */
.def-input[type="text"], 
.def-input[type="email"], 
.def-input[type="password"],
.def-input[type="date"],
.def-input[type="number"],
select.def-input{
   height: 50px;
   padding-top: 0;
   padding-bottom: 0;
   border: 1px solid #dfe2e6;
   color: #232333;
   -webkit-box-shadow: none;
         box-shadow: none;
   width: 100%;
   padding: 6px 12px;
   background: white;
   border-radius: .4rem;
   outline: none;
   -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
   transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
   -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
   transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
   transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
   -webkit-appearance: none;
      -moz-appearance: none;
         appearance: none;
   -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
         user-select: none;
   position: relative;
   text-align: left;
}
.def-input[type="text"]:hover, 
.def-input[type="password"]:hover,
.def-input[type="email"]:hover,
.def-input[type="date"]:hover,
.def-input[type="number"]:hover,
select.def-input:hover{
   border-color: var(--primary);
}
.def-input[type="text"]:focus, 
.def-input[type="password"]:focus,
.def-input[type="email"]:focus,
.def-input[type="date"]:focus,
.def-input[type="focus"]:hover,
select.def-input:focus{
   border-color: var(--primary);
}
.def-select-arrow {
   position: absolute;
   right: 0.7rem;
   cursor: pointer;
   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;
   -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
            user-select: none;
   background: white;
   color: #737577;
}
.def-form-area {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   justify-content: flex-start;
   width: 100%;
   position: relative;
}
/* ------------------------------------------------------------------- select - End ------------------------------------------------------------------- */

/* ------------------------------------------------------------------- Button - Start ------------------------------------------------------------------- */
button.def-btn {
   background: var(--button-bg-color);
   color: var(--button-color);
   padding: .65rem 1rem;
   font-weight: 400;
   text-align: center;
   border-radius: .4rem;
   width: auto;
   /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.05); */
   font-size: 1rem;
}
button.def-btn {
   --button-color: #ffffff;
   --button-bg-color: #27B06E;
   --button-hover-bg-color: #16A05E;
}
button.def-btn.success {
   --button-bg-color: #28a745;
   --button-hover-bg-color: #218838;
}
button.def-btn.error {
   --button-bg-color: #EC132E;
   --button-hover-bg-color: #DB132C;
}
button.def-btn.warning {
   --button-color: #212529;
   --button-bg-color: #FFC041;
   --button-hover-bg-color: #F8AE1A;
}
button.def-btn:active,
button.def-btn:hover,
button.def-btn:focus {
   background: var(--button-hover-bg-color);
   outline: 0;
}
button.def-btn:disabled {
   opacity: 0.5;
}
/* ------------------------------------------------------------------- Button - End ------------------------------------------------------------------- */


/* ------------------------------------------------------------------- Button 효과 - Start ------------------------------------------------------------------- */
/* 기본 */
.def-btn {
   display:inline-block; 
   padding:.7rem 1.5rem; 
   color:#fff !important; 
   background:#372d29; 
   text-align:center; 
   vertical-align:middle; 
   border-radius: .625rem;
}

/* 버튼효과 */
.effect {
   position:relative;
   display:inline-block;
   overflow:hidden; 
   text-align:center;
}
.effect:before {
   content:'';
   position:absolute;
   top:0;
   right:0;
   bottom:0;
   left:-1px;
   background: var(--primary);
   -webkit-transform:translateX(-100%);
   transform:translateX(-100%);
}
.effect:before,.effect:after {
   box-sizing:border-box;
   transition:0.2s ease-in-out;
   z-index:1;
}
.effect:hover:before {
   -webkit-transform: translateX(0); 
   transform: translateX(0);
}
.effect span {
   display:block;
   position:relative;
   left:0;
   text-align:center;
   width:100%;
   color:#fff;
   font-weight:300;
   z-index:1;
}
/* ------------------------------------------------------------------- Button 효과 - End ------------------------------------------------------------------- */

/* ------------------------------------------------------------------- Radio Button Yes/No - Start ------------------------------------------------------------------- */
.def-radio-btn {
   height: 45px;
   padding-top: 0;
   padding-bottom: 0;
   border: 1px solid #dfe2e6;
   color: #232333;
   -webkit-box-shadow: none;
           box-shadow: none;
   width: 100%;
   padding: 6px 12px;
   background: white;
   border-radius: .625rem;
   outline: none;
   -webkit-transition: all ease-in-out 0.15s;
   -o-transition: all ease-in-out 0.15s;
   transition: all ease-in-out 0.15s;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   position: relative;
   text-align: center;
   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;
   cursor: pointer;
}
.def-radio-btn:after { 
    content: attr(data-title);
   position: relative;
   color: #757575c7;
   font-size: 14px;
   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;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   line-height: normal;
}
.def-radio-btn:hover:after{
   color: white;
}
.def-radio-btn:checked:after{
   color: white;
}
.def-radio-btn:checked{
   border-color: var(--primary);
   color: white;
   background: var(--primary);
}
.def-radio-btn:active{
     -webkit-transform: scale(.95);
         -ms-transform: scale(.95);
             transform: scale(.95);
}
.def-radio-btn:hover, 
.def-radio-btn:focus {
   border-color: var(--primary);
   color: white;
   background: var(--primary);
}
/* ------------------------------------------------------------------- Radio Button Yes/No - End ------------------------------------------------------------------- */


/* ------------------------------------------------------------------- Quantity - Start ------------------------------------------------------------------- */
.def-form-minus-btn{
   height: 45px;
   padding-top: 0;
   padding-bottom: 0;
   border: 1px solid #dfe2e6;
   color: #232333;
   -webkit-box-shadow: none;
            box-shadow: none;
   width: 20%;
   padding: 6px 12px;
   background: white;
   border-radius: 3px;
   outline: none;
   -webkit-transition: all ease-in-out 0.15s;
   -o-transition: all ease-in-out 0.15s;
   transition: all ease-in-out 0.15s;
   -webkit-appearance: none;
      -moz-appearance: none;
            appearance: none;
   -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
            user-select: none;
   position: relative;
   text-align: center;
   margin-right: 8px;
   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;
   cursor: pointer;
}
.def-form-minus-btn:hover, .def-form-minus-btn:focus{
   border-color: var(--primary);
   color: white;
   background: var(--primary);
}
.def-form-minus-btn:active{
   -webkit-transform: scale(.95);
       -ms-transform: scale(.95);
           transform: scale(.95);
}
.def-form-plus-btn{
   height: 45px;
   padding-top: 0;
   padding-bottom: 0;
   border: 1px solid #dfe2e6;
   color: #232333;
   -webkit-box-shadow: none;
            box-shadow: none;
   width: 20%;
   padding: 6px 12px;
   background: white;
   border-radius: 3px;
   outline: none;
   -webkit-transition: all ease-in-out 0.15s;
   -o-transition: all ease-in-out 0.15s;
   transition: all ease-in-out 0.15s;
   -webkit-appearance: none;
      -moz-appearance: none;
            appearance: none;
   -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
            user-select: none;
   position: relative;
   text-align: center;
   margin-left: 8px;
   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;
   cursor: pointer;
}
.def-form-plus-btn:hover, .def-form-plus-btn:focus{
   border-color: var(--primary);
   color: white;
   background: var(--primary);
}
.def-form-plus-btn:active{
   -webkit-transform: scale(.95);
      -ms-transform: scale(.95);
         transform: scale(.95);
}
/* ------------------------------------------------------------------- Quantity - End ------------------------------------------------------------------- */


/* ------------------------------------------------------------------- Popup - Start ------------------------------------------------------------------- */
#mask {
	position: absolute;
	display: none;
	left: 0;
	top: 0;
	background-color: #000;
	z-index: 50;
}
#campus_pop {
	width: 100%;
	position: fixed;
	top: 5rem;
	left: 50%;
	transform:translateX(-45%);
	z-index: 100;
}
#campus_pop .pop_con {
	position: absolute;
	z-index: 150;
	top: 50px;
	left: 0;
	width: 90%;
	min-height: 260px;
	background: #fff;
	border-radius:.625rem;
}
#campus_pop .pop_con .h4_tit {
   font-size:1.25rem;
   /* border-bottom: 1px solid #e7e7e7; */
   padding: 1.2rem 1.2rem 0;
}
#campus_pop .pop_con .pop_txt {
   padding: 1.2rem 1.2rem;
   line-height: 1.8rem;
}
#campus_pop .pop_con .pop_txt img {
   width: 100%;
   height: auto;
}
#campus_pop .pop_con .pop_btn {
	position: absolute;
	top: 1rem;
   right: 1rem;
}
#campus_pop .pop_con .pop_btn i {
   font-size:2rem
}
.img_data {margin-top: .625rem; text-align: center;}
/* ------------------------------------------------------------------- Popup - End ------------------------------------------------------------------- */


/* ------------------------------------------------------------------- ToggleBtn - Start ------------------------------------------------------------------- */
.switch {
   position: relative;
   display: inline-block;
   width: 56px;
   height: 34px;
}
.switch input { 
   opacity: 0;
   width: 0;
   height: 0;
}
.slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #dfdfdf;
   -webkit-transition: .4s;
   transition: .4s;
}
.slider:before {
   position: absolute;
   content: "";
   height: 24px;
   width: 24px;
   left: 5px;
   bottom: 5px;
   background: linear-gradient(180deg, #FFFFFF 0%, #ededed 100%);
   background: #fff;
   /* filter: drop-shadow(2px 1px 6px rgba(0, 0, 0, 0.25)); */
   -webkit-transition: .4s;
   transition: .4s;
}
input:checked + .slider {
   background: #33C859;
   /* box-shadow: inset 0px 6px 8px 3px rgba(0, 0, 0, 0.1); */
}
/* input:focus + .slider {
   box-shadow: 0 0 1px #33C859;
} */
input:checked + .slider:before {
   -webkit-transform: translateX(22px);
   -ms-transform: translateX(22px);
   transform: translateX(22px);
}
 /* Rounded sliders */
.slider.round {
   border-radius: 100px;
}
.slider.round:before {
   border-radius: 50%;
}
/* ------------------------------------------------------------------- ToggleBtn - End ------------------------------------------------------------------- */


/* ------------------------------------------------------------------- Table - Start ------------------------------------------------------------------- */
/* normal */
.table_area {
   width:100%; 
   height:350px;
   overflow-y: scroll;
   overflow-x: scroll;
   border-top:1px solid #282828;
   border-top:1px solid #DADADA
}
table.table {
   width:100%;
   border-collapse:collapse; 
   letter-spacing:-0.01rem;
   word-break:keep-all;
   /* border-top:1px solid #282828; */
   border-collapse: separate;

}
table.table th,
table.table td {
   padding:0.6rem 0.4rem; 
   text-align:center;
   color:#222;
   font-size: .85rem;
}
table.table thead th {
   font-weight:normal;
   background:#fff;
   /* border-top:1px solid #282828; */
   border-bottom: 1px solid #DADADA;
   position: sticky; 
   top: 0; 
   z-index: 2;
}
table.table tbody th {
   position: sticky; 
   left: 0; 
   z-index: 1;
}
table.table thead th.tline {
   border-top:1px solid #dfdfdf;
}
table.table thead th,
table.table tbody th,
table.table tbody td {
   vertical-align:middle; 
   line-height:1rem;
   border-left:1px solid #DADADA;
   border-bottom:1px solid #DADADA;
}
table.table tbody td:nth-child(2) {
   border-left:1px solid transparent;
}
table.table .line0 { 
   border-left:0
}
table.table tbody th.gray {
   background-color:#f9f9f9;
}
table.table tbody tr th.table_bg {
   background:#edfdff;
}
table.table tbody th,
table.table tbody tr {
   color:#555;
   border-bottom:1px solid #DADADA
}
table.table thead th,
table.table tbody th {
   background:#F4F4F4;
   font-weight:500;
   color: #282828;
}
table.table th.left,
table.table td.left {
   text-align:left;
   padding-left: 5px;
   /* padding:1.25rem 1.563rem; */
}
table.table tbody td.right {
   text-align:right;
   padding:1.25rem 1.563rem;
}
table.table tr:hover,
table.table tr:focus { 
   background-color: #F6F7F9; 
}
table.table tbody th {
   font-weight: 400;
   border-right: 1px solid #DADADA;
}
.mw120 {min-width: 120px;}

.pt1rem {padding-top: 1rem !important;}

.table-container {
   position: relative;
   max-width: 100%;
   overflow-x: auto;
   overflow-y: auto;
   height: 400px;
   /* 스크롤을 테스트하기 위해 높이를 제한 */
}

.table-wrapper {
   display: flex;
   position: relative;
}

.table_fix {
   min-width: 100%;
   /* 테이블이 컨테이너를 넘어서도록 최소 너비 설정 */
   border-collapse: collapse;
   table-layout: fixed;
   border-collapse: separate;
   border-right: 1px solid #DADADA;
}

.table_fix .none-data-table {
   text-align: center;
   padding: 30px;
   border-top: 1px solid #DADADA;
   border-left: 1px solid #DADADA;
   border-bottom: 1px solid #DADADA;
   white-space: nowrap;
   font-size: .85rem;
}

.table_fix th,
.table_fix td {
   padding: 8px;
   text-align: center;
   border-left: 1px solid #DADADA;
   border-bottom: 1px solid #DADADA;
   white-space: nowrap;
   font-size: .85rem;
}
.table_fix thead th {
   border-top: 1px solid #DADADA;
}
.table_fix tbody th {
   font-weight: 400;
   border-right: 1px solid #DADADA;
}
.table_fix thead th:first-child {
   border-right:1px solid #DADADA;
}
.table_fix thead th:nth-child(2) {
   border-left:1px solid transparent;
}
.table_fix tbody td:nth-child(2) {
   border-left:1px solid transparent;
}
.fixed-header {
   position: sticky;
   top: 0;
   background-color: #f3f3f3;
   z-index: 5;
   /* 상단 헤더가 위에 나타나도록 설정 */
}

.fixed-header-secondary {
   position: sticky;
   top: 34px; /* 이 값은 상위 헤더의 높이만큼 지정 */
   background-color: #f3f3f3;
   z-index: 4; /* 하위 헤더에 조금 낮은 z-index 적용 */
}
.fixed-col {
   position: sticky;
   left: 0;
   background-color: #f3f3f3;
   z-index: 2;
   /* 첫 번째 열이 위에 나타나도록 설정 */
}

.fixed-header.fixed-col {
   z-index: 6;
   /* 첫 번째 열의 헤더가 가장 위에 나타나도록 설정 */
}

/* ------------------------------------------------------------------- Table - End ------------------------------------------------------------------- */


/* 탭스타일 */
.tab_top {position:relative; overflow:hidden; z-index:1;}
.tab_top ul.tab {width:100%; overflow:hidden; margin-bottom:20px; display:table; table-layout:fixed;}
.tab_top ul.tab li {display:table-cell; text-align:center}
.tab_top ul.tab li a {position:relative;height:46px;line-height:46px;padding:0 10px; background-color:#f6f6f6; border-top:1px solid #d8d8d8; border-bottom:1px solid #d8d8d8; border-left:1px solid transparent; border-right:1px solid transparent;}
.tab_top ul.tab li > a {display:block;color:#333;}
.tab_top ul.tab li > a.active {border-top:2px solid #dd6e55; border-bottom-color:transparent; border-left:1px solid #d8d8d8; border-right:1px solid #d8d8d8; background-color:#fff; color:#dd6e55;}
.tab_top ul.tab li a:last-child {border-right: 1px solid #d8d8d8;}


/* tab_box */
.tab_area {position:relative;text-align:center;overflow:hidden;border-left:1px solid #e8e9eb;margin-bottom:2rem;}
.tab_area > li {position:relative;width:25%;float:left;}
.tab_area > li > a {display:block;text-align:center;height:60px;line-height:60px;font-size:18px;background:#fff;border:1px solid #ddd;border-left:none;}
.tab_area > li a:hover {text-decoration:none; background:#4c4c4d;color:#fff;}
.tab_area > li.active > a {background:#333;color:#fff;}

.tab_area2 {position:relative;height:52px;text-align:center;overflow:hidden;border-left:1px solid #e8e9eb;margin-bottom:30px;}
.tab_area2 > li {position:relative;width:25%;float:left;}
.tab_area2 > li > a {display:block;text-align:center;height:50px;line-height:50px;font-size:18px;background:#f6f7f9;border:1px solid #e8e9eb;border-left:none;}
.tab_area2 > li a:hover {text-decoration:none;}
.tab_area2 > li.active {border-bottom:0;z-index:2;}
.tab_area2 > li.active > a {border-top:2px solid #2c2e31;background:#fefefe;color:#000;border-bottom:1px solid #fff;}

.tab_area3 {position:relative;height:50px;text-align:center;margin-bottom:30px;}
.tab_area3 > li {position:relative;width:30%;height:55px;display:inline-block;border:1px solid lightgray;}
.tab_area3 > li:first-child {margin-right:6px;}
.tab_area3 > li > a {display:block;text-align:center;height:55px;line-height:55px; border-left:none;}
.tab_area3 > li a:hover {text-decoration:none;}
.tab_area3 > li.active {border:1px solid #222;}
.tab_area3 > li.active a {color:#222; font-weight:500}

.tab_area.num2 li {width:50%;}
.tab_area.num3 li{width:33%;}
.tab_area.num3 li:nth-child(2){width:34%;}
.tab_area.num4 li{width:24%;}
.tab_area.num4 li:nth-child(3){width:28%;}
.tab_area.num5 li{width:20%;}
.tab_area.num6 li{width:auto;min-width:111px;}
.tab_area.num6 li a{padding:0 31px;}
.tab_area.num6.ty2 > li a{padding:0 33px;}


/* table */
.form_table{width:100%; border-collapse:separate; border-spacing:0px; border-top:2px solid #0e4194; /* border-left:1px solid #e1e1e1; border-right:1px solid #e1e1e1; */}
.form_table th{color:#222; font-weight:normal; text-align:left; padding:15px 15px 15px 20px; border-bottom:1px solid #e1e1e1;letter-spacing:-0.5pt; background:#f9f9f9}
.form_table th span{color:#e51d28}
.form_table td{border-bottom:1px solid #e1e1e1; padding:10px 20px; text-align:left}
.form_table td .sub_txt{text-align:left; font-size:15px;}


.form_table td input[size='50']{width:80%; }
.form_table td input[size='30']{width:50%; }
.form_table td input[size='4']{width:15%; }
.form_table td select{width:15%; }
.form_table td select.only{width:20%; }
.form_table td input[size='15']{width:30%; }
.form_table td .norobot{padding:4px;}

.form_table td label{display:inline-block; margin-right:20px; line-height:44px;}
input.btn_address {height:35px; line-height:35px; padding:0 10px; border:0; text-align:center; font-size:13px; color:#666; border:1px solid #aaa; background:#fff; vertical-align:top;}



.zip_button {width:9%; vertical-align:bottom; background:#636b7e; height:40px; color:#fff}


.datepicker_wrap {display:inline-block;box-sizing:border-box;}
.datepicker_wrap .pick_area{display:inline-block;position:relative;}
.datepicker_wrap .pick_area:first-child{margin-left:0}
.datepicker_wrap .pick_area:first-child:before{display:none}
.datepicker_wrap .pick_area label{position:absolute; top:2px; right:0; width:40px; text-align:center; font-size:22px; color:#202a40; margin-right:0;}
.datepicker_wrap .pick_area input[type=text].hasDatepicker{width:100%;height:40px;}

/* 스크롤 테이블 */
.table_scroll{margin:10px 0 10px;clear:both;}
.table_scroll table{margin:0;}
.table_scroll:before, .table_scroll_acitve:before{display: none;}
.table_scroll .scroll_notice{display: none;}
@media all and (max-width:800px){
   .table_scroll{position:relative; max-width:100%; overflow-x:auto;}
   .table_scroll_acitve.table_scroll:before{display: none;}
   .table_scroll .scroll_notice{display: block;}
   .table_scroll table{min-width:800px;}
}

input::placeholder {
   color: #8B8B8B;
}

#mmenu {
   position: relative;
   width: 100%;
}

#mmenu>ul {
   
}

#mmenu>ul>li>a {
   display: block;
   background: url("/images/plus.png") no-repeat 95% 22px; 
   font-weight: 600;
   padding: 20px;
   text-decoration: none;
   color: #282828;
   border-bottom: 1px solid #F1F1F1;
   font-size: 17px;
}


#mmenu>ul>li.on>a {
   color: #27B06E;
   background: url("/images/minus.png") no-repeat 95% 21px;
}

#mmenu>ul>li ul {
   display: none;
   padding: 10px 0;
   background-color: #F4F4F4
}

#mmenu>ul>li>ul>li>a {
   position: relative;
   display: block;
   padding: 8px 20px 8px 35px;
   font-size: 15px;
   font-weight: 600;
   background: url("/images/plus.png") no-repeat 95% 7px; 
}

#mmenu>ul>li>ul>li>a:before {
   content: "";
   width: 5px;
   height: 2px;
   background: #535353;
   position: absolute;
   left: 24px;
   top: 18px;
}

#mmenu>ul>li>ul>li.on a {
   background: url("/common/minus.png") no-repeat 95% 6px;
}

#mmenu>ul>li>ul li ul {
   display: none;
   padding-bottom: 8px;
}

#mmenu>ul>li>ul li li a {
   position: relative;
   display: block;
   padding: 0 25px 7px 42px;
   color: #333;
   font-size: 14px;
   font-weight: 500;
}
#mmenu>ul>li>ul li li a:before {
   content: "";
   width: 2px;
   height: 2px;
   background: #333;
   position: absolute;
   left: 33px;
   top: 9px;
   border-radius: 2px;
}

#mmenu>ul>li>ul>li li a:hover {
   color: #C62C4E;
}

#mmenu>ul li.noDepth a {
   background-image: none !important;
}