@charset "utf-8";
body, html { width:100%; height:auto; min-width: 1200px; min-height:100vh; } 
body::-webkit-scrollbar,
html::-webkit-scrollbar { width: 8px; height: 8px; } 
body::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb { background-color: #666666; border-radius: 14px; } 
body::-webkit-scrollbar-track,
html::-webkit-scrollbar-track { background-color: #ffffff; } 

/* Fonts */
.ft_pop { font-family: 'Poppins'; } 

.hide { display: none !important; } 

#wrap { position: relative; width: 100%; height: auto; margin: 0 auto; background-color: #ffffff; min-height: 100%; } 
.hd_wrap, .ft_wrap, .inner { width: 1200px; min-width: 1200px; margin: 0 auto; } 

/*? margin-top */
.mt18 { margin-top: 18px; }
.mt24 { margin-top: 24px; }
.mt32 { margin-top: 32px; }
.mt44 { margin-top: 44px; }
.mt56 { margin-top: 56px; }
.mt64 { margin-top: 64px; }
.mt72 { margin-top: 72px; }
.mt110 { margin-top: 110px; }

/*? btn */
.btn_box { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; } 
.btn_box .btn { display: inline-block; min-width: 64px; height: 32px; line-height: 32px; font-weight: 500; font-size: 13px; border-radius: 8px; padding: 0 12px; margin-left: 6px; } 
.btn_box .btn:first-of-type { margin-left: 0; }
.btn_box .btn_gray { background-color: #f0f0f0; color: #666666; }
.btn_box .btn_black { background-color: #231815; color: #ffffff; } 

.btn_download { display: inline-block; height: 32px; font-size: 12px; font-weight: 700; color: #222222; line-height: 31px; background-color: #fee934; border-radius: 8px; padding: 0 14px; }
.btn_download i { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; background-image: url(../image/icon_download.svg); background-repeat: no-repeat; background-position: center center; }

.bottom_btn_box { display: flex; justify-content: center; align-items: center; } 
.bottom_btn_box .btn { width: 124px; height: 48px; font-size: 14px; font-weight: 500; color: #ffffff; line-height: 48px; border-radius: 8px; } 
.bottom_btn_box .btn.btn_gray { background-color: #d0d0d0; margin-right: 8px; } 
.bottom_btn_box .btn.btn_black { background-color: #231815; } 

/*? input - wrap */
.input_wrap { display: block; }
.input_wrap label { position: relative; display: inline-block; font-size: 16px; font-weight: 400; line-height: 20px; margin-bottom: 8px; z-index: 1; }
.input_wrap label.req { padding: 0 8px; }
.input_wrap label.req::before { position: absolute; left: 0; top: 1px; width: 100%; height: 100%; background: #fee934; content: ''; display: block; z-index: -1; }
.input_title { display: block; font-size: 16px; font-weight: 400; line-height: 20px; cursor: pointer; margin-bottom: 12px; }
.input_title em,
.input_wrap label em { display: inline-block; font-size: 12px; font-weight: 300; color: #999999; margin-left: 6px; }

.type_search { display: flex; justify-content: flex-start; align-items: center; } 
.type_search input[type="text"] { width: 288px; height: 32px; font-size: 12px; font-weight: 500; line-height: 32px; padding: 0 12px; background-color: #ffffff; border: 1px solid #d0d0d0; box-sizing: border-box; border-radius: 8px; margin-right: 16px; } 
.type_search input::placeholder { color: #999999; } 
.type_search .btn { display: inline-block; width: 64px; height: 32px; line-height: 32px; background-color: #231815; border-radius: 8px; color: #ffffff; font-weight: bold; font-size: 12px; border: 0; } 

.input_list { margin-top: 24px; }
.input_list > li { margin-top: 32px; }
.input_list > li:first-of-type { margin-top: 0; }
.input_list > li .preview_link { display: inline-block; font-size: 12px; font-weight: 400; color: #666666; line-height: 20px; text-decoration: underline; margin-top: 8px; }
.input_list .input_box { position: relative; display: block; }
.input_list .input_box input[type="text"] { width: 352px; height: 48px; font-size: 14px; font-weight: 400; color: #231815; background-color: #ffffff; border: 1px solid #d0d0d0; box-sizing: border-box; border-radius: 8px; padding: 0 16px; transition: all 0.1s ease-in-out; }
.input_list .input_box input[type="text"]:read-only { color: #999999; border-color: #f7f7f7; background-color: #f7f7f7; pointer-events: none; }
.input_list .input_box input[type="text"]:focus,
.input_list .input_box input[type="text"]:focus-visible { border: 1px solid #fee934; }
.input_list .input_box input[type="file"] { position: absolute; left: 0; top: 0; width: 450px; height: 100%; opacity: 0; cursor: pointer; z-index: 5;  }
.input_list .input_box.type_btn .btn{ display: inline-block; width: 92px; height: 48px; font-size: 13px; font-weight: 500; color: #ffffff; line-height: 48px;  border-radius: 8px; background-color: #d0d0d0; margin-left: 6px; }

.input_list_slim > li { position: relative; margin-top: 24px; }
.input_list_slim > li:first-of-type { margin-top: 0; }
.input_list_slim .input_box { position: relative; }
.input_list_slim .input_box input { width: 362px; height: 40px; font-size: 16px; font-weight: 400; color: #231815; background-color: #ffffff; border: 1px solid #d0d0d0; border-radius: 8px; padding: 0 20px; transition: all 0.1s ease-in-out; }
.input_list_slim .input_box input:focus,
.input_list_slim .input_box input:focus-visible { border: 1px solid #222222; }
.input_list_slim .input_box p { font-size: 12px; font-weight: 400; line-height: 20px; margin: -4px 0 8px; }

.input_list_slim .input_box input[type="file"] { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 5;  }
.input_list_slim .input_box.type_file input { font-size: 14px; }
.input_list_slim .input_box.type_file input::placeholder { color: #d0d0d0; }
.input_list_slim .input_box.type_btn .btn{ position: absolute; right: 0; top: 0; display: inline-block; width: 92px; height: 40px; font-size: 14px; font-weight: 500; color: #666666; line-height: 40px; border-radius: 8px; background-color: #d0d0d0; margin-left: 6px; z-index: 1; }

.input_date_box { margin-top: 8px; }
.input_date_box input { width: 164px; height: 32px; font-size: 12px; font-weight: 500; color: #666666; letter-spacing: 0.25px; text-align: center; border: 1px solid #f0f0f0; background-color: #ffffff; box-sizing: border-box; border-radius: 8px; }

/*? warning_txt */
.warning_txt { font-size: 12px; font-weight: 400; color: #ff525b; line-height: 14px; margin-top: 8px; }

/*? tooltip */
.tooltip_wrap { position: absolute; left: 50%; top: 0; width: 515px; background: #f7f7f7; border-radius: 16px; z-index: 5; overflow: hidden; transform-origin: left top; transform: scaleY(1); transition: all 0.5s; }
.tooltip_wrap.tt02 { top: auto; bottom: 0; transform-origin: left bottom; }
.tooltip_wrap.off { width: 0; transform: scaleY(0.6); }
.tooltip_box { width: 100%; min-width: 515px; padding: 32px; }
.tooltip_box .tt_title { font-size: 22px; font-weight: 400; line-height: 28px; margin-bottom: 20px; }
.tooltip_box .tt_desc { font-size: 15px; font-weight: 400; color: #666666; line-height: 24px; margin-top: 12px; }
.tooltip_box .tt_img { margin-top: 18px; }
.tooltip_box .tt_ex { margin-bottom: 20px; }
.tooltip_box .tt_ex dt { font-size: 16px; font-weight: 400; color: rgba(0, 0, 0, 0.6); line-height: 19px; }
.tooltip_box .tt_ex dt::before { width: 21px; height: 21px; background: url(../image/radio01_on.png) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -4px; margin-right: 12px; }
.tooltip_box .tt_ex dd { font-size: 15px; font-weight: 400; line-height: 24px; margin-top: 8px; }
.tooltip_box .tt_chk li { font-size: 15px; font-weight: 400; line-height: 24px; margin-bottom: 10px; }
.tooltip_box .tt_chk li:last-of-type { margin-bottom: 0; }
.tooltip_box .tt_chk li span { display: inline-block; width: 120px;  }
.tooltip_box .tt_chk li span::before { width: 24px; height: 24px; vertical-align: -5px; content: ''; display: inline-block; margin-right: 10px; }
.tooltip_box .tt_chk li:nth-of-type(1) span::before { background: url(../image/checkbox01_on.svg) no-repeat center center; background-size: 24px; }
.tooltip_box .tt_chk li:nth-of-type(2) span::before { background: url(../image/checkbox02_off.svg) no-repeat center center; background-size: 24px; }

/*? check_box */
.check_box { margin-bottom: 8px; }
.check_box input[type="checkbox"] { display: none; }
.check_box input[type="checkbox"] + label { display: inline-block; font-size: 16px; font-weight: 400; line-height: 20px; }
.check_box input[type="checkbox"] + label::before { width: 24px; height: 24px; vertical-align: -4px; background: url(../image/checkbox01_off.svg) no-repeat center center; background-size: 24px; border-radius: 50%; content: ''; display: inline-block; margin-right: 8px; }
.check_box input[type="checkbox"]:checked + label::before { background: url(../image/checkbox01_on.svg) no-repeat center center; background-size: 24px; }

/*? radio_box */
.radio_wrap { display: flex; flex-wrap: wrap; }
.radio_box { margin-right: 40px; }
.radio_box input[type="radio"] { display: none; }
.radio_box input[type="radio"] + label { display: inline-block; font-size: 14px; font-weight: 500; line-height: 20px; }
.radio_box input[type="radio"] + label::before { width: 21px; height: 21px; vertical-align: -4px; background: #d0d0d0; border: 5px solid #d0d0d0; border-radius: 50%; box-sizing: border-box; content: ''; display: inline-block; margin-right: 8px; }
.radio_box input[type="radio"]:checked + label::before { background: #231815; }
.radio_box input[type="text"] { display: inline-block; height: 40px; font-size: 14px; font-weight: 500; color: #888888; line-height: 18px;  border: 1px solid #efefef; box-sizing: border-box; border-radius: 6px; padding: 0 16px; margin-left: 12px; margin-top: -8px; }

/*? select_box */
.select_box select { display: inline-block; height: 48px; font-size: 14px; font-weight: 500; color: #666666; background: url(../image/icon_arrow03.svg) no-repeat calc(100% - 16px) center,#f7f7f7; background-size: 14px; border: none; box-sizing: border-box; border-radius: 8px; padding: 0 36px 0 16px; margin-right: 24px; }
.select_box_slim { display: inline-block; padding: 0 40px 0 16px; height: 32px; line-height: 30px; background-color: #ffffff; border-radius: 38px; border: 0; font-weight: 500; font-size: 14px; background-image: url(../image/icon_arrow03.svg); background-repeat: no-repeat; background-position: calc(100% - 16px) center; border: 1px solid #231815; box-sizing: border-box; border-radius: 8px; } 
.select_box_basic select { width: 100%; height: 40px; font-size: 16px; font-weight: 400; background: url(../image/icon_arrow05.svg) no-repeat calc(100% - 16px) center, #ffffff; border: 1px solid #d0d0d0; box-sizing: border-box; border-radius: 8px; padding: 0 32px 0 20px; }
.select_box_basic select:focus,
.select_box_basic select:focus-visible { border: 1px solid #fee934; }

/*? on off */
.onoff input[type="checkbox"] { display: none; }
.onoff input[type="checkbox"] + label { position: relative; width: 40px; height: 20px; border-radius: 10px; background-color: #d0d0d0; display: block; transition: all 0.2s linear; }
.onoff input[type="checkbox"] + label span { position: absolute; left: 1px; top: 1px; width: 18px; height: 18px; border-radius: 50%; background-color: #ffffff; transition-duration: 0.2s; z-index: 1; }
.onoff input[type="checkbox"]:checked + label { background-color: #231815; }
.onoff input[type="checkbox"]:checked + label span { transform: translateX(20px); }

/*? warning_text */
.warning_text { font-weight: 300; color: #ff0000; margin: 8px 0; }

/*! ==================== HEADER ==================== */
#hd { position: fixed; left: 0; top: 0; width: 100%; height: 56px; background: #ffffff; border-bottom: 1px solid #efefef; z-index: 99; } 
#hd .hd_wrap { display: flex; align-items: center; justify-content: space-between; padding: 0 56px; } 
/* logo */
#logo a { display: block; width: 190px; text-align: left; } 
#logo a img { max-width: 100%; } 
#logo a .test_logo { display: inline-block; font-size: 12px; font-weight: 500; color: #fee934; line-height: 36px; background: #231815; padding: 0 20px; border-radius: 8px; } 
/* gnb */
#gnb { width: calc(100% - 190px); display: flex; align-items: center; justify-content: center; } 
#gnb .state_box { width: 100px; } 
#gnb .state_box .state { display: inline-block; font-weight: 500; font-size: 12px; height: 56px; line-height: 56px; color: #999999; } 
#gnb .nav_box { width: calc(100% - 220px); } 
#gnb .nav_box ul { width: 100%; display: flex; align-items: center; justify-content: space-between; } 
#gnb .nav_box ul > li { position: relative; } 
#gnb .nav_box ul > li > a { display: block; font-size: 14px; font-weight: 500; line-height: 56px; padding: 0 12px; } 
#gnb .nav_box .depth_02 { display: none; position: absolute; top: 48px; left: 50%; transform: translateX(-50%); padding: 0 8px; background-color: #ffffff; border-radius: 16px; box-sizing: border-box; border: 1px solid #efefef; overflow: hidden; } 
#gnb .nav_box .depth_02 li { display: block; border-bottom: 1px solid #efefef; text-align: center; } 
#gnb .nav_box .depth_02 li:last-of-type { border-bottom: 0; } 
#gnb .nav_box .depth_02 li a { display: block; width: 104px; font-size: 12px; font-weight: 700; color: #999999; line-height: 40px; transition: all 0.1s ease-in-out; } 
#gnb .nav_box .depth_02 li.on a,
#gnb .nav_box .depth_02 li a:hover { color: #231815; } 
#gnb .logout_box { width: 100px; display: flex; justify-content: flex-end; } 
#gnb .logout_box .btn { font-size: 12px; font-weight: 500; color: #999999; } 



/*! ==================== FOOTER ==================== */
#ft { position: fixed; left: 0; bottom: 0; width: 100%; border-top: 1px solid #efefef; background-color: #ffffff; z-index: 10; } 
#ft .ft_wrap { padding: 16px 0; } 
#ft .copyright { font-size: 12px; font-weight: 500; line-height: 18px; color: #999999; text-align: center; } 



/*! ==================== CONTENTS ==================== */
#container { position: relative; width: 100%; min-height: 100vh; background-color: #fafafa; padding-top: 56px; padding-bottom: 51px; } 
#container.bg_white { background-color: #ffffff; } 

.sc_wrap { padding: 56px 0 96px; } 
.inner { padding: 0 56px; }
.flex { display: flex; } 
.flex_between { display: flex; justify-content: space-between; }
.flex_item { width: calc(50% - 12px); }
.sc_title { display: block; font-size: 24px; font-weight: 700; color: #222; line-height: 30px; } 

/* pagination */
.pagination { width: 100%; text-align: center; display: flex; justify-content: center; align-items: center; margin-top: 40px; } 
.pagination .prev,
.pagination .next { width: 32px; height: 32px; background-image: url(../image/pager_arrow_on.svg); background-repeat: no-repeat; background-position: center center; text-indent: -999999px; overflow: hidden; } 
.pagination .next { transform: rotate(180deg); }
.pagination .prev.disabled,
.pagination .next.disabled,
.pagination .prev:disabled,
.pagination .next:disabled { background-image: url(../image/pager_arrow.svg); }
.pagination .first,
.pagination .last { width: 34px; height: 32px; font-size: 12px; font-weight: 500; line-height: 32px; text-align: center; } 
.pagination .first.disabled,
.pagination .last.disabled,
.pagination .first:disabled,
.pagination .last:disabled { color: #d0d0d0; } 
.pagination ul { display: inline-block; width: auto; margin: 0 24px; } 
.pagination li { display: inline-block; margin-right: 8px; }
.pagination li:last-of-type { margin-right: 0px; } 
.pagination .page { display: inline-block; width: 32px; height: 32px; font-weight: 500; font-size: 16px; color: #d0d0d0; line-height: 32px; } 
.pagination .page.active { color: #231815; }

/* tab_contents_wrap */
.tab_contents_wrap .tab_contents_box { display: none; }
.tab_contents_wrap .tab_contents_box.active { display: block; } 

/* Datepicker */
.date_select_area { display: flex; justify-content: flex-start; } 
.date_select_area .date_area { position: relative; width: 196px; height: 32px; } 
.date_select_area .date_view_area { position: absolute; left: 0; top: 0; } 
.date_select_area .datepicker_area,
.date_select_area .date_view_area { display: flex; justify-content: space-between; } 
.date_select_area .datepicker_area .datepicker:nth-of-type(1) { display: inline-block; width: 88px; height: 32px; line-height: 32px; text-align: center; border: 1px solid #f0f0f0; background-color: #ffffff; box-sizing: border-box; border-radius: 8px; } 
.date_select_area .datepicker_area em { display: inline-block; width: 20px; height: 32px; line-height: 32px; text-align: center; } 
.date_select_area .datepicker_area .datepicker:nth-of-type(2) { display: inline-block; width: 88px; height: 32px; line-height: 32px; text-align: center; border: 1px solid #f0f0f0; background-color: #ffffff; box-sizing: border-box; border-radius: 8px; } 
.date_select_area .datepicker_area .datepicker,
.date_select_area .datepicker_area em { font-weight: 500; font-size: 12px; letter-spacing: 0.25px; color: #666666; } 
.date_select_area .date_view_area .start { display: inline-block; width: 88px; height: 32px; line-height: 32px; text-align: center; border: 1px solid #f0f0f0; background-color: #ffffff; box-sizing: border-box; border-radius: 8px; } 
.date_select_area .date_view_area em { display: inline-block; width: 20px; height: 32px; line-height: 32px; text-align: center; } 
.date_select_area .date_view_area .end { display: inline-block; width: 88px; height: 32px; line-height: 32px; text-align: center; border: 1px solid #f0f0f0; background-color: #ffffff; box-sizing: border-box; border-radius: 8px; } 
.date_select_area .date_view_area .start,
.date_select_area .date_view_area em,
.date_select_area .date_view_area .end { font-weight: 500; font-size: 12px; letter-spacing: 0.25px; color: #666666; } 
.date_select_area .period_area { margin-left: 24px; } 
.date_select_area .period_area input[type="radio"] { display: none; } 
.date_select_area .period_area input[type="radio"] + label { padding: 0 8px; height: 32px; display: inline-block; background-color: #f7f7f7; border-radius: 8px; line-height: 32px; font-weight: 500; font-size: 12px; letter-spacing: 0.25px; color: #666666; } 
.date_select_area .period_area input[type="radio"]:checked + label { background-color: #231815; color: #ffffff; } 
.date_select_area .period_area ul { display: flex; justify-content: flex-start; } 
.date_select_area .period_area li { margin-right: 8px; } 
.date_select_area .period_area li:last-of-type { margin-right: 0px; } 

.dcalendarpicker .dudp__calendar-header { background-color: #231815; } 
.dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week .dudp__date.selected { background-color: #fee934; border-radius: 50%; font-weight: 900; font-size: 14px; }