@charset "UTF-8";
/* 초기화 및 초기 세팅 */
:root {
--hd_height: 9rem;
--hd_height_m: 5.6rem;
--ic_date: url("data:image/svg+xml,%3Csvg id='ic_calenda' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg id='vuesax_linear_calendar' data-name='vuesax/linear/calendar'%3E%3Cg id='calendar'%3E%3Cpath id='Vector' d='M0,0V3' transform='translate(8 2)' fill='none' stroke='%23515151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath id='Vector-2' data-name='Vector' d='M0,0V3' transform='translate(16 2)' fill='none' stroke='%23515151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath id='Vector-3' data-name='Vector' d='M0,0H17' transform='translate(3.5 9.09)' fill='none' stroke='%23515151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath id='Vector-4' data-name='Vector' d='M18,5v8.5c0,3-1.5,5-5,5H5c-3.5,0-5-2-5-5V5C0,2,1.5,0,5,0h8C16.5,0,18,2,18,5Z' transform='translate(3 3.5)' fill='none' stroke='%23515151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath id='Vector-5' data-name='Vector' d='M0,0H24V24H0Z' fill='none' opacity='0'/%3E%3Cpath id='Vector-6' data-name='Vector' d='M.495.5H.5' transform='translate(15.2 13.2)' fill='none' stroke='%23515151' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Vector-7' data-name='Vector' d='M.495.5H.5' transform='translate(15.2 16.2)' fill='none' stroke='%23515151' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Vector-8' data-name='Vector' d='M.495.5H.5' transform='translate(11.501 13.2)' fill='none' stroke='%23515151' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Vector-9' data-name='Vector' d='M.495.5H.5' transform='translate(11.501 16.2)' fill='none' stroke='%23515151' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Vector-10' data-name='Vector' d='M.495.5H.5' transform='translate(7.8 13.2)' fill='none' stroke='%23515151' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Vector-11' data-name='Vector' d='M.495.5H.5' transform='translate(7.8 16.2)' fill='none' stroke='%23515151' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
--ic_time: url("data:image/svg+xml,%3Csvg id='ic_clock' xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25'%3E%3Crect id='사각형_9176' data-name='사각형 9176' width='25' height='25' fill='none'/%3E%3Cpath id='schedule_FILL0_wght400_GRAD0_opsz24_1_' data-name='schedule_FILL0_wght400_GRAD0_opsz24 (1)' d='M94.319-864.173l1.507-1.507-3.984-3.984v-4.953H89.69v5.814Zm-3.553,5.706a10.484,10.484,0,0,1-4.2-.848,10.873,10.873,0,0,1-3.418-2.3,10.873,10.873,0,0,1-2.3-3.418,10.484,10.484,0,0,1-.848-4.2,10.484,10.484,0,0,1,.848-4.2,10.873,10.873,0,0,1,2.3-3.418,10.875,10.875,0,0,1,3.418-2.3,10.485,10.485,0,0,1,4.2-.848,10.485,10.485,0,0,1,4.2.848,10.875,10.875,0,0,1,3.418,2.3,10.872,10.872,0,0,1,2.3,3.418,10.484,10.484,0,0,1,.848,4.2,10.484,10.484,0,0,1-.848,4.2,10.873,10.873,0,0,1-2.3,3.418,10.873,10.873,0,0,1-3.418,2.3A10.484,10.484,0,0,1,90.766-858.467ZM90.766-869.234Zm0,8.613a8.3,8.3,0,0,0,6.1-2.517,8.3,8.3,0,0,0,2.517-6.1,8.3,8.3,0,0,0-2.517-6.1,8.3,8.3,0,0,0-6.1-2.517,8.3,8.3,0,0,0-6.1,2.517,8.3,8.3,0,0,0-2.517,6.1,8.3,8.3,0,0,0,2.517,6.1A8.3,8.3,0,0,0,90.766-860.62Z' transform='translate(-78 882)' fill='%23707070'/%3E%3C/svg%3E%0A");
--wrap_wd:100%;
}
div::-webkit-scrollbar {
width: 0.6rem;
height: 0.6rem;
}
div::-webkit-scrollbar-thumb {
background-color: #ddd;
border-radius: 100px;
}
html { font-size:10px; }
body {
background:#F1EDE8;
overflow-x: hidden;
margin: 0 auto;
padding: 0;
}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin:0; padding:0; border:0 }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block }
ul, dl,dt,dd { margin:0; padding:0; list-style:none }
legend { position:absolute; margin:0; padding:0; font-size:0; line-height:0; text-indent:-9999em; overflow:hidden }
label, input, button, select, img { vertical-align:middle; }
input, button { margin:0; padding:0;}
input[type="submit"] {cursor:auto;}
button {cursor: auto;word-break: keep-all;}
select {margin:0}
p { margin:0; padding:0;}
hr { display:none }
a { text-decoration:none;}
a:hover { text-decoration: none; }
.un_reboot_a { color: var(--text); text-decoration: underline; }
*, :after, :before {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
word-break: normal;
word-wrap: break-word;
}
img { max-width:100%; display:inline-block; height: auto; }
.mobile_wr {
/*border-left: 1px solid #F2F2F2;
border-right: 1px solid #F2F2F2;*/
box-sizing: content-box;
min-height: 100vh;
}
/* 초기 상태에서는 화살표 아래 아이콘을 보여줌 */
.collapse_ex .btn[aria-expanded="false"] img{transform: rotate(0deg);}
/* 펼쳐진 상태에서는 화살표 위 아이콘을 보여줌 */
.collapse_ex .btn[aria-expanded="true"] img{transform: rotate(180deg);}
/****************************************/
/* 폰트 설정 */
/****************************************/
.line_h1 { line-height:1.0em; }
.line_h1_1 { line-height:1.1em; }
.line_h1_2 { line-height:1.2em; }
.line_h1_3 { line-height:1.3em; }
.line_h1_4 { line-height:1.4em; }
.line_h1_5 { line-height:1.5em; }
.line_h1_6 { line-height:1.6em; }
.line_h1_7 { line-height:1.7em; }
.line_h1_8 { line-height:1.8em; }
.line_h1_9 { line-height:1.9em; }
.line_h2 { line-height:2.0em; }
/*폰트커스텀 기본사이즈 10px*/
.tit_h1 { font-size: 2.8rem; font-weight: 700; color: var(--text); line-height: 130%;}
.tit_h2 { font-size: 2.6rem; font-weight: 700; color: var(--text); line-height: 130%;}
.tit_h3 { font-size: 2.4rem; font-weight: 700; color: var(--text); line-height: 130%;}
.tit_h4{ font-size: 1.8rem; font-weight: 700; color: var(--text); line-height: 130%;}
.tit_h5{ font-size: 2.0rem; font-weight: 500; line-height: 1.3;}
.fs_8 { font-size: 0.8rem; }
.fs_9 { font-size: 0.9rem; }
.fs_10 { font-size: 1.0rem; }
.fs_11 { font-size: 1.1rem !important; }
.fs_12 { font-size: 1.2rem !important; }
.fs_13 { font-size: 1.3rem !important; }
.fs_14 { font-size: 1.4rem !important; }
.fs_15 { font-size: 1.5rem !important; }
.fs_16 { font-size: 1.6rem !important; }
.fs_17 { font-size: 1.7rem !important; }
.fs_18 { font-size: 1.8rem !important; }
.fs_19 { font-size: 1.9rem !important; }
.fs_20 { font-size: 2.0rem !important; }
.fs_21 { font-size: 2.1rem !important; }
.fs_22 { font-size: 2.2rem; }
.fs_23 { font-size: 2.3rem; }
.fs_24 { font-size: 2.4rem; }
.fs_25 { font-size: 2.5rem; }
.fs_26 { font-size: 2.6rem; }
.fs_27 { font-size: 2.7rem; }
.fs_28 { font-size: 2.8rem; }
.fs_29 { font-size: 2.9rem; }
.fs_30 { font-size: 3.0rem; }
.fs_31 { font-size: 3.1rem; }
.fs_32 { font-size: 3.2rem; }
.fs_33 { font-size: 3.3rem; }
.fs_34 { font-size: 3.4rem; }
.fs_35 { font-size: 3.5rem; }
.fs_36 { font-size: 3.6rem; }
.fs_37 { font-size: 3.7rem; }
.fs_38 { font-size: 3.8rem; }
.fs_39 { font-size: 3.9rem; }
.fs_40 { font-size: 4.0rem; }
.fs_41 { font-size: 4.1rem; }
.fs_42 { font-size: 4.2rem; }
.fs_43 { font-size: 4.3rem; }
.fs_44 { font-size: 4.4rem; }
.fs_45 { font-size: 4.5rem; }
.fs_46 { font-size: 4.6rem; }
.fs_47 { font-size: 4.7rem; }
.fs_48 { font-size: 4.8rem; }
.fs_49 { font-size: 4.9rem; }
.fs_50 { font-size: 5.0rem; }
.fs_51 { font-size: 5.1rem; }
.fs_52 { font-size: 5.2rem; }
.fw_100 { font-weight: 100; }
.fw_200 { font-weight: 200; }
.fw_300 { font-weight: 300; }
.fw_400 { font-weight: 400; }
.fw_500 { font-weight: 500; }
.fw_600 { font-weight: 600; }
.fw_700 { font-weight: 700; }
.fw_800 { font-weight: 800; }
.fw_900 { font-weight: 900; }
.wh_pre { white-space: pre-line; }
.wh_nowrap { white-space: nowrap; }
.break_all{word-break: break-all;}
.keep_all{word-break: keep-all;word-wrap: break-word;}
/*글자 줄임말/자르기*/
.line_text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: break-all;word-break: break-all;}
.line1_text { white-space: normal; overflow: hidden; text-overflow: ellipsis;word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;word-break: break-all;}
.line2_text { white-space: normal; overflow: hidden; text-overflow: ellipsis;word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;word-break: break-all;}
.line3_text { white-space: normal; overflow: hidden; text-overflow: ellipsis;word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;word-break: break-all;}
/* 폰트컬러 */
/* 부트스트랩 class는 --var값으로 설정이 되어 있지 않아서 따로 만들었습니다. 필요시 추가해서 사용 */
.fc_primary{color: var(--primary);}
.fc_secondary{color: var(--secondary);}
.fc_text{color: var(--text);}
.fc_gray_100{color: var(--gray-100);}
.fc_gray_200{color: var(--gray-200);}
.fc_gray_300{color: var(--gray-300);}
.fc_gray_400{color: var(--gray-400);}
.fc_gray_500{color: var(--gray-500);}
.fc_gray_600{color: var(--gray-600);}
.fc_gray_700{color: var(--gray-700);}
.fc_orange{ color: #FF7A48;}
.text-black{color:#000;}
.text-orange{color:#FF7A48;}
/****************************************/
/* 여백 */
/****************************************/
/*마진*/
.mt_8{margin-top:0.8rem;}
.mt_12{margin-top:1.2rem;}
.mt_16{margin-top:1.6rem;}
.mt_20{margin-top:2.0rem;}
.mt_25{margin-top:2.5rem;}
.mt_35{margin-top:3.5rem;}
.mt_36{margin-top:3.6rem;}
.mt_40{margin-top:4.0rem;}
.mb_4{margin-bottom:0.4rem;}
.mb_6{margin-bottom:0.6rem;}
.mb_8{margin-bottom:0.8rem;}
.mb_10{margin-bottom:1.0rem;}
.mb_12{margin-bottom:1.2rem;}
.mb_14{margin-bottom:1.4rem;}
.mb_15{margin-bottom:1.5rem;}
.mb_16{margin-bottom:1.6rem;}
.mb_18{margin-bottom:1.8rem;}
.mb_20{margin-bottom:2.0rem;}
.mb_24{margin-bottom:2.4rem;}
.mb_25{margin-bottom:2.5rem;}
.mb_40{margin-bottom:4.0rem;}
.mb_50{margin-bottom:5.0rem;}
.mb_60{margin-bottom:6.0rem;}
.mr_4{margin-right:0.4rem;}
.mr_6{margin-right:0.6rem;}
.mr_8{margin-right:0.8rem;}
.mr_12{margin-right:1.2rem;}
.mr_16{margin-right:1.6rem;}
.mr_20{margin-right:2.0rem;}
.ml_6{margin-left:0.6rem;}
.ml_8{margin-left:0.8rem;}
.ml_16{margin-left:1.6rem;}
.ml_20{margin-left:2.0rem;}
.mx_n16{margin-left:-1.6rem;margin-right:-1.6rem;}
.mx_n20{margin-left:-2.0rem;margin-right:-2.0rem;}
/*패딩*/
.pt_6{padding-top:0.6rem;}
.pt_20{ padding-top: 2.0rem;}
.pt_24{padding-top:2.4rem;}
.pt_25{padding-top:2.5rem;}
.pt_40{ padding-top: 4.0rem;}
.pt_50{ padding-top: 5.0rem;}
.pt_60{ padding-top: 6.0rem;}
.pb_6 { padding-bottom: 0.6rem;}
.pb_8 { padding-bottom: 0.8rem;}
.pb_10{padding-bottom: 1.0rem;}
.pb_15{padding-bottom: 1.5rem;}
.pb_16 { padding-bottom: 1.6rem;}
.pb_18{padding-bottom:1.8rem;}
.pb_20{padding-bottom:2.0rem;}
.pb_24{ padding-bottom: 2.4rem;}
.pb_25{padding-bottom:2.5rem;}
.pb_30{padding-bottom:3.0rem;}
.pb_40{padding-bottom:4.0rem;}
.pb_50{padding-bottom:5.0rem;}
.pb_60{padding-bottom:6.0rem;}
.pl_16 { padding-left: 1.6rem;}
.pr_16{padding-right:1.6rem;}
.py_8{ padding-top: 0.8rem; padding-bottom: 0.8rem;}
.py_16{ padding-top: 1.6rem; padding-bottom: 1.6rem;}
.py_20{padding-top:2.0rem;padding-bottom:2.0rem;}
.py_35{padding-top:3.5rem;padding-bottom:3.5rem;}
.px_8{padding-left:0.8rem;padding-right:0.8rem;}
.px_12{padding-left:1.2rem;padding-right:1.2rem;}
.px_18{padding-left:1.8rem;padding-right:1.8rem;}
.px_16{padding-left:1.6rem;padding-right:1.6rem;}
.px_20{padding-left:2.0rem;padding-right:2.0rem;}
.p_20{ padding: 2rem;}
.p_24{ padding: 2.4rem;}
/****************************************/
/* 공통 class / 스타일 */
/****************************************/
.vh_min100{min-height:100vh;}
.vh_100_vh{height:100vh;}
.w-auto{width:auto;}
.curs_pointer{ cursor: pointer;}
.zd_2{position:relative;z-index:2;}
.flex-center{ align-items: center; justify-content: center;}
/* 스크롤바 none */
.scroll_bar_none { -ms-overflow-style: none; }
.scroll_bar_none::-webkit-scrollbar { display: none; }
/*테이블 반응형때*/
.touch_scroll { overflow-x: auto; overflow-y: hidden; }
/* gap */
.gap_5{ gap: 0.5rem;}
.gap_6{ gap:0.6rem;}
.gap_8{ gap:0.8rem;}
.gap_10{ gap:1.0rem;}
.gap_12{ gap:1.2rem;}
.gap_15{ gap:1.5rem;}
.gap_16{ gap:1.6rem;}
.gap_20{ gap: 2.0rem;}
.gap_25{ gap:2.5rem;}
.gap_30{ gap:3.0rem;}
.gap_40{ gap:4.0rem;}
.gap_50{ gap:5.0rem;}
.gap_60{ gap:6.0rem;}
/* 아이콘 너비 */
.icon_4{ width: 0.4rem; flex-shrink: 0;}
.icon_6{ width: 0.6rem; flex-shrink: 0;}
.icon_7{ width: 0.7rem; flex-shrink: 0;}
.icon_8{ width: 0.8rem; flex-shrink: 0;}
.icon_10{ width: 1.0rem; flex-shrink: 0;}
.icon_12{ width: 1.2rem; flex-shrink: 0;}
.icon_14{ width: 1.4rem; flex-shrink: 0;}
.icon_15{ width: 1.5rem; flex-shrink: 0;}
.icon_16{ width: 1.6rem; flex-shrink: 0;}
.icon_18{ width: 1.8rem; flex-shrink: 0;}
.icon_20{ width: 2.0rem; flex-shrink: 0;}
.icon_24{ width: 2.4rem; flex-shrink: 0;}
.icon_25{ width: 2.5rem; flex-shrink: 0;}
.icon_28{ width: 2.8rem; flex-shrink: 0;}
.icon_30{ width: 3.0rem; flex-shrink: 0;}
.icon_32{ width: 3.2rem; flex-shrink: 0;}
.icon_35{ width: 3.5rem; flex-shrink: 0;}
.icon_36{ width: 3.6rem; flex-shrink: 0;}
.icon_38{ width:3.8rem;flex-shrink: 0;}
.icon_40{ width: 4.0rem; flex-shrink: 0;}
.icon_48{ width:4.8rem !important;flex-shrink: 0;}
.icon_50{ width: 5.0rem; flex-shrink: 0;}
.icon_56{ width:5.6rem;flex-shrink: 0;}
.icon_60{ width: 6.0rem; flex-shrink: 0;}
.icon_120{ width:12.0rem;flex-shrink: 0;}
/* 컨테이너 설정 */
/*.container-fluid {max-width: 1920px;}*/
.container, .container-xl, .container-lg, .container-md, .container-sm{
padding-right: 0;
padding-left: 0;
}
/*
@media (max-width:1100px){
.container{ padding-left: 1.6rem; padding-right: 1.6rem;}
}
*/
/* 폼 사각형 */
.sq_guide { display:flex; flex-wrap: wrap; }
.sq_guide li {
width: 80px;
height: 40px;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
margin: 0.5rem;
}
/* 페이지네이션 */
.pagination {display: flex; justify-content: center; align-items: center; }
.pagination li { height: 100%; }
.pagination a {
color: var(--gray-300);
font-size: 1.9rem;
font-weight: 400;
width: 4.7rem; height: 4.7rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.pagination a.on {
background-color: var(--light);
color: var(--text);
}
.pagination a.arrow img{ filter: invert(8%) sepia(0%) saturate(44%) hue-rotate(154deg) brightness(98%) contrast(86%);}
.pagination a.arrow{margin:0;}
.pagination a.arrow.disabled img{ filter: invert(69%) sepia(12%) saturate(0%) hue-rotate(269deg) brightness(85%) contrast(81%);}
/* 페이저 */
.pager {
background: #ffffff;
border-radius: 15rem;
display: flex;
justify-content: center;
align-items: center;
width: 170px;
height: 45px;
margin: 3rem auto 0;
border: 1px solid var(--border);
}
/* 테이블 */
.table_01 {width:100%; border-collapse: collapse; border-bottom:1px solid #e3e3e3;border-top: 1px #eee solid;line-height: 140%;}
.table_01 th {
border-bottom: 1px solid #eee;
color: #1C1C1E;
font-weight: 500;
padding: 0.7rem 1.2rem 0.7rem 1.2rem;
background: #F8F8F8;
vertical-align: top;
}
.table_01 td {border-bottom:1px solid #eee; padding:0.7rem 1.2rem;color: #1C1C1E;}
/* 테이블 슬래쉬 */
.table_01 th.slash {
background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat;
}
.table_01 th.backslash {
background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat;
}
.table_01 th.slash, .table_01 th.backslash { text-align: left; }
.slash div, .backslash div { text-align: right; }
/*테이블 반응형때*/
.table_scroll { overflow-x: auto; overflow-y: hidden; padding: 0px !important; }
/* 이미지 크롭 */
.rect{width: 100%;position: relative;overflow: hidden; }
.rect:after{content: "";display: block;padding-bottom: 100%; }
.rect img{ position: absolute;width: 100%;height: 100%;object-fit: cover;object-position: center;top: 50%;left: 50%;transform: translate(-50%,-50%);}
/* 뱃지 */
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 2.4rem;
padding: 0.4rem 1.0rem;
border-radius: 0.6rem;
font-weight: 500;
font-size: 1.4rem;
word-wrap: break-word;
word-break: keep-all;
}
.badge-primary {
background: var(--primary);
color: var(--secondary);
}
.badge-secondary{
background: var(--secondary);
color: #fff;
}
.badge-light{
background: var(--light);
color: var(--gray-400);
}
.badge-outline-light{
background: #fff;
border:1px solid var(--border);
color:var(--text);
}
.badge-gray{
background: var(--gray-300);
color: #fff;
}
.badge-disabled {
color: #999;
background: #ddd;
}
/* 키워드 뱃지 */
.keyword_gr{
display: flex;
flex-wrap: wrap;
gap: 1.0rem;
}
.keyword_badge{
display: flex;
align-items: center;
background: #FEF8F1;
border-radius: 1.0rem;
padding: 0.8rem 1.2rem 0.8rem 1.5rem;
font-size: 1.4rem;
color: #FF7A48;
}
.keyword_badge .del_btn{
width: 1.6rem;
height: 1.6rem;
margin-left: 0.6rem;
flex-shrink: 0;
}
/*터치*/
.touch_scroll { overflow-x: auto; overflow-y: hidden; }
/* List Style */
.list_style_1 li {display: flex;padding-bottom: 0.7rem;line-height: 1.4;}
.list_style_1 li:last-child{padding-bottom:0;}
.list_style_1 li > span{display: inline-block; width:8.0rem; padding-right: 0.5rem;flex-shrink: 0;}
.list_style_2 li{display: flex; padding-bottom:0.8rem;}
.list_style_2 li:before{content:'-';display: inline-block;margin-right:1.0rem;}
.list_style_3 li {display: flex;justify-content: space-between;flex-wrap: wrap;}
.list_style_3 li:last-child{margin-bottom:0 !important;}
.list_style_3 li div{}
/*탭*/
.tab_sticky{
position: sticky;
top: 4.8rem;
z-index: 15;
}
/*nav-tabs*/
.nav-tabs {
background: #F5F6F8;
border-radius: 0.8rem;
padding: 0.8rem;
border: 0;
flex-wrap: nowrap;
}
.nav-tabs .nav-link {
height: 4.4rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
color: #999;
border: 0;
margin-bottom: 0px;
padding-left: 0.2rem;
padding-right: 0.2rem;
border-radius: 0.8rem;
font-weight: 600;
word-break: keep-all;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
color: #495057;
background: #fff;
color: #000;
box-shadow: 0 0.3rem 0.6rem rgba(0,0,0,0.06);
}
/*nav-pills*/
.nav-pills{
margin-left:-0.4rem;
margin-right:-0.4rem;
flex-wrap: nowrap;
}
.nav-pills .col{
padding-left:0.4rem;
padding-right:0.4rem;
}
.nav-pills .nav-link {
background: none;
border: 0;
border-radius: 1rem;
background: #AAB1B7;
color: #fff;
}
/*nav_tab_line*/
.nav_tab_line{
width: 100%;
margin: 0;
background-color: #fff;
}
.nav_tab_line {
border: unset;
border-bottom:1px solid #E3E3E3;
}
.nav_tab_line .nav-item{
text-align: center;
background-color: #fff;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
width: 100%;
}
.nav_tab_line .nav-link {
border: 1px solid white;
color: #000;
height: 6.0rem;
padding: 1rem;
width: 100%;
font-size: 1.6rem;
font-weight: 600;
background: transparent;
}
.nav_tab_line .nav-link.active, .nav_tab_line .nav-item.show .nav-link {
border-bottom: 0.2rem solid var(--primary);
color: var(--primary);
transform: translateY(0.15rem);
padding-bottom:1.15rem;
}
/*드롭다운*/
.dropdown-menu{padding:1.0rem 0.5rem;}
.dropdown-menu .dropdown-item{padding-top:0.7rem;padding-bottom:0.7rem;border-radius:0.6rem;}
.dropdown-menu .dropdown-item:hover{background:#F7F7F7;}
/*커스텀 스위치*/
.custom-switch {
padding: 0;
width: 4.9rem;
height: 2.5rem;
}
.custom-switch .custom-control-label::after {
width: 1.9rem;
height: 1.9rem;
background-color: #fff;
border-radius: 3rem;
top: 0.3rem;
left: 0.3rem;
}
.custom-control-label::after {
position: absolute;
top: 0.3rem;
display: block;
width: 1rem;
height: 1rem;
content: "";
cursor: pointer;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
background-color: #fff;
left: 1.9rem;
}
.custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
border-color: var(--primary);
background-color: var(--primary);
}
.custom-control-label::before {
background-color: #E3E3E3;
border: 0;
top: 0;
cursor: pointer;
}
.custom-switch .custom-control-label::before {
left: 0;
width: 4.9rem;
height: 2.5rem;
border-radius: 2rem;
}
/* 알람 토글 버튼 */
.toggle_btn.alarm_toggle_btn{
padding: 0.7rem;
}
.toggle_btn.alarm_toggle_btn img{ width: 2.4rem;}
.toggle_btn.alarm_toggle_btn.active{
border-color: var(--primary) !important;
background: var(--primary) !important;
}
.toggle_btn.alarm_toggle_btn.active img{ filter: invert(99%) sepia(60%) saturate(0%) hue-rotate(309deg) brightness(120%) contrast(100%);}
/* 알람 토글 버튼 배경 투명 */
.toggle_btn.alarm_toggle_btn2{}
.toggle_btn.alarm_toggle_btn2 .on_icon{ display: none;}
.toggle_btn.alarm_toggle_btn2.active .on_icon{ display: block;}
.toggle_btn.alarm_toggle_btn2.active .off_icon{ display: none;}
/* 탭 디자인 (탭메뉴02 커스텀) */
.tab_style{ margin-bottom: 3.0rem;}
.tab_style ul{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(auto, 25.8rem));
}
.tab_style li .btn{
padding: 0 1.0rem;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.tab_style li .btn.btn-light.active{
background: var(--secondary);
border-color: var(--secondary);
color: #fff;
}
/* 회색 정보 박스 */
.gray_info_box{
row-gap: 1.6rem;
padding: 2.4rem;
border-radius: 1.6rem;
background: var(--light);
font-size: 1.5rem;
}
.gray_info_box .tit{
font-weight: 600;
color: var(--gray-300);
margin-bottom: 0.5rem;
word-wrap: break-word;
word-break: break-word;
}
.gray_info_box .info{
word-wrap: break-word;
word-break: break-word;
}
/*노데이터*/
.no_data {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.no_data img{ width: 9.0rem; margin-bottom: 2.0rem;}
/****************************************/
/* 인풋, 버튼 */
/****************************************/
/* 버튼 */
.btn {
height: var(--height);
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 1.0rem;
font-weight: 600;
padding-left: 1.5rem;
padding-right: 1.5rem;
word-wrap: break-word;
word-break: keep-all;
}
.btn-sm {
height: var(--height_sm);
border-radius: 0.8rem;
font-size: 1.4rem;
font-weight: 500;
padding-left: 1.0rem;
padding-right: 1.0rem;
}
.btn-md {
height: var(--height_md);
border-radius: 1.0rem;
font-size: 1.4rem;
font-weight: 500;
}
.btn-lg {
height: var(--height_lg);
border-radius: 1.2rem;
}
.btn-link {
height: auto;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
border-radius: 0;
background: transparent;
flex-shrink: 0;
border: 0;
}
.btn-icon {
height: auto;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
border-radius: 0;
background: transparent;
flex-shrink: 0;
border: 0;
}
.btn-icon img {
flex-shrink: 0;
}
.btn-naver{background:#1CC800;border-color:#1CC800;color:#fff;}
.btn-naver:hover, .btn-naver:focus{background:#1ABB00;border-color:#1ABB00;}
.btn-kakao{background:#FFDD00;border-color:#FFDD00;color:#333;}
.btn-kakao:hover, .btn-kakao:focus{background:#FFCC00;border-color:#FFCC00;}
.btn-apple{background:#000;border-color:#000;color:#fff;}
.btn-apple:hover, .btn-apple:focus{background:#222;border-color:#222;}
/* 버튼 hover / diabled 설정 */
.btn.disabled, .btn:disabled {
opacity: 1;
color: #FFFFFF !important;
background: #D2D2D2;
border-color: #D2D2D2;
}
.btn-outline-primary:not(:disabled):not(.disabled):hover,.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled):focus {
color: var(--text);
background-color: #F7AD00;
border-color: #F7AD00;
}
.btn-outline-secondary:not(:disabled):not(.disabled):hover, .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled):focus {
color: #fff;
background-color: #332D2B;
border-color: #332D2B;
}
.btn-outline-border:not(:disabled):not(.disabled):hover, .btn-outline-border:not(:disabled):not(.disabled):active, .btn-outline-border:not(:disabled):not(.disabled):focus {
color: var(--text);
background-color: #FBFBFB;
border-color: var(--border);
}
.btn-light:not(:disabled):not(.disabled):hover, .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled):focus {
color: #515151;
background-color: #E5E5E5;
border-color: #E5E5E5;
}
/* 버튼그룹 설정 */
.btn-group-full{display:flex;}
.btn-group-full .btn{display:flex;padding-left:0.4rem;padding-right:0.4rem;}
.btn-group:not(.btn_group_pill) .btn{ margin-right: 0.8rem;}
.btn-group .btn-outline-border:not(:disabled):not(.disabled):active, .btn-group .btn-outline-border:not(:disabled):not(.disabled).active, .btn-group .show > .btn-outline-border.dropdown-toggle {
color: var(--secondary);
background-color: #fff;
border-color: var(--secondary);
}
.btn-group .btn-light:not(:disabled):not(.disabled):active, .btn-group .btn-light:not(:disabled):not(.disabled).active, .btn-group .show > .btn-light.dropdown-toggle {
color: #fff;
background-color: var(--secondary);
border-color: var(--secondary);
}
/* 인풋 자동완성 초기화 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-text-fill-color: var(--text);
-webkit-box-shadow: 0 0 0px 1000px var(--bg) inset;
box-shadow: 0 0 0px 1000px var(--bg) inset;
transition: background-color 5000s ease-in-out 0s;
}
input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active {
-webkit-text-fill-color: var(--text);
-webkit-box-shadow: 0 0 0px 1000px var(--bg) inset;
box-shadow: 0 0 0px 1000px var(--bg) inset;
transition: background-color 5000s ease-in-out 0s;
}
/* 입력 인풋 */
.form-control {
height: var(--height);
font-size: 1.5rem;
font-weight: 300;
}
.form-control-sm {height: var(--height_sm);border-radius: 0.8rem;}
.form-control-md {height: var(--height_md);border-radius: 1.0rem;}
.form-control-lg {height: var(--height_lg);}
.form-control-auto {height: auto;}
input.form-control {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
.ip_wr .ip_tit { margin-bottom:1.0rem; }
.ip_tit h5 {
font-size: 1.5rem;
font-weight: 500;
display: inline-block;
position: relative;
}
.ip_tit.required h5::after {
content: "*";
position: absolute;
color: #F97272;
top: 0;
right: -1.0rem;
}
.ip_wr .form-row .col-3{flex: 0 0 30.4%; max-width: 30.4%;}
/* form-text */
.form-text {
display: none;
font-size:1.5rem;
font-weight: 300;
line-height: 1.2;
color: var(--text);
}
.ip_valid .ip_valid{display: flex; color: var(--success);}
/*.ip_valid input.form-control{border-color: var(--danger);}*/
.ip_invalid .ip_invalid{display: flex; color: var(--danger);}
/*.form-row*/
.form-row{margin-left:-0.4rem;margin-right:-0.4rem;}
.form-row > .col, .form-row > [class*=col-]{padding-left:0.4rem;padding-right:0.4rem;}
.form-row > .col-3 .btn{padding-left:0.5rem;padding-right:0.5rem;}
/* textarea 높이 */
textarea.form-control {
/* min-height: 20rem;*/
padding: 1.4rem 1.5rem;
line-height: 1.5;
resize: none;
}
.form-control textarea{min-height: 14rem; padding: 0; line-height: 130%;border:0;width:100%;}
.form-control textarea:focus {
color: var(--text);
background-color: var(--bg);
border-color: var(--gray);
outline: 0;
box-shadow: 0 0 0 0 var(--border);
}
.form-control textarea::placeholder {
color: var(--input_placeholder);
opacity: 1;
}
.form-control textarea:disabled, .form-control textarea[readonly] {
background-color: var(--input_disabled);
opacity: 1;
}
/* 셀렉트 박스 */
.custom-select, .custom-select2 {
padding-right: 3.5rem;
background-size: 1.2rem;
padding-left: 1.5rem;
font-size: 1.5rem;
font-weight: 300;
min-width: 13.5rem;
text-align: left;
position:relative;
}
.custom-select {
background: url(../image/ic_ip_select.png)no-repeat center right 1.7rem;
background-color: #fff;
background-size: 1.2rem;
}
.custom-select2:after {
content: '';
display: block;
width: 1.2rem;
height: 1.2rem;
background: url(../image/ic_ip_select.png)no-repeat center center;
background-size: cover;
position: absolute;
right: 1.7rem;
top: 50%;
transform: translateY(-50%);
}
.custom-select2[aria-expanded="true"] {}
.custom-select2[aria-expanded="true"]:after {
transform: translateY(-50%) rotate(180deg);
}
.custom-select2 + .dropdown-menu {
width: 100%;
min-width: 13.0rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
border-color: var(--border);
font-size: 1.4rem;
border-radius: 0.8rem;
padding: 0.5rem;
box-shadow: 0 0.3rem 0.6rem rgb(0 0 0 / 6%);
}
.custom-select2 + .dropdown-menu a {
padding: 1.1rem 1.5rem 1.1rem 2.0rem;
white-space: break-spaces;
word-break: break-all;
border-radius: 0.6rem;
}
.custom-select2 + .dropdown-menu a:hover {
background: var(--light);
color: var(--text);
}
.dropdown_gray .custom-select2{
background-color: var(--light);
border-color: var(--light);
}
/* 날짜 선택 */
input.form-control[type="date"], input.form-control[type="time"]{position: relative;}
input.form-control[type="date"]::-webkit-calendar-picker-indicator, input.form-control[type="time"]::-webkit-calendar-picker-indicator{
-webkit-appearance: none;
background: none;
width: 100%; height: 100%; cursor: pointer;
position: absolute; left: 0; top: 0;
}
input.form-control[type="date"]::before, input.form-control[type="time"]::before{
content: ''; display: block; width: 2.4rem; height: 2.4rem; position: absolute; top: 50%;
transform: translateY(-50%); right: 1.6rem; background: var(--gray-400); cursor: pointer;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain !important;
}
input.form-control[type="time"]::before{
-webkit-mask: var(--ic_time); mask: var(--ic_time);
}
input.form-control[type="date"]::before{
-webkit-mask: var(--ic_date); mask: var(--ic_date);
}
input.form-control.no-icon[type="date"]::before, input.form-control.no-icon[type="time"]::before{ display: none;}
/* iOS에서 날짜선택 후 텍스트가 상단으로 쏠리는 현상 없애기 */
@supports (-webkit-touch-callout: none) {
input.form-control[type="date"],
input.form-control[type="time"]{
appearance: none;
-webkit-appearance: none;
display: flex;
align-items: center;
}
}
/*검색*/
.sch_ip {
display: flex;
border: 1px solid var(--border);
background: #fff;
padding: 0 1.5rem 0 1.7rem;
border-radius: 1.0rem;
}
.sch_ip .form-control {
height: 4.4rem;
padding: 0.5rem 0;
font-size: 1.5rem;
font-weight: 300;
}
.sch_ip .form-control:focus {background-color: transparent;}
.sch_ip button {
width: 2.4rem;
height: 2.4rem;
border: 0;
background: transparent;
padding: 0;
}
/*회색 검색*/
.sch_gray_wr{
display: flex;
align-items: center;
height: var(--height-md);
padding: 0.7rem 1.5rem 0.7rem 1.0rem;
border-radius: 2.0rem;
background: var(--light);
max-width: 34.3rem;
}
.sch_gray_wr .dropdown .custom-select2{
background: none;
border: none;
border-radius: 0;
height: 1.9rem;
min-width: 9.8rem;
padding: 0 2.7rem 0 1.0rem;
border-right: 1px solid var(--border);
flex-shrink: 0;
}
.sch_gray_wr .dropdown .custom-select2:after{ right: 1.0rem;}
.sch_gray_wr .sch_ip{
background: none;
border: 0;
border-radius: 0;
flex-grow: 1;
padding-right: 0;
}
.sch_gray_wr .sch_ip .form-control{
background: none;
padding: 0;
height: 2.4rem;
}
.sch_gray_wr .custom-select2 + .dropdown-menu{
margin-top: 1.4rem;
margin-bottom: 1.4rem;
}
/* 검색어 삭제 버튼 */
input[type=search]::-ms-clear, input[type=search]::-ms-reveal {
display:none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{
display:none;
}
.sch_ip .sch_clear_btn{
width: 2.4rem;
height: 2.4rem;
display: none;
}
.sch_ip .sch_clear_btn img{
width: 2.4rem;
height: 2.4rem;
}
/* 체크박스*/
.checks_wr{display: flex; flex-wrap: wrap; margin-bottom: -1rem; }
.checks_wr .checks{margin-right: 3rem; margin-bottom: 1rem;}
.checks label{display: flex; align-items: center; cursor: pointer;}
.checks label.chk_right{flex-flow: row-reverse; justify-content: flex-end;}
.checks input{display: none;}
.checks .ic_box {
display: inline-block;
width: 2.2rem;
height: 2.2rem;
border:1px solid var(--border-200);
border-radius:0.6rem;
background-image: url(../image/check01_off.png);
background-position: center;
background-size: 1.0rem auto;
background-repeat: no-repeat;
background-color: #fff;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1.0rem;
flex-shrink: 0;
}
.checks input:checked + .ic_box {
background-image: url(../image/check01_on.png);
background-color: var(--secondary);
border-color: var(--secondary);
}
.chk_right .ic_box{margin-right: 0; margin-left: 0.5rem;}
.checks input:checked ~ .chk_p{}
.chk_p {
font-size: 1.5rem;
color: var(--text);
padding-top: 0.1rem;
}
.checks.primary_checks .ic_box{background-color: #eae9f0;border-radius: 50%;background-image:none;}
.checks.primary_checks input:checked + .ic_box{background-image: url(../image/check01_on.png);}
.radios_wr{display: flex; flex-wrap: wrap;}
.radios_wr .radios{margin-right: 2rem; margin-bottom: 1rem;}
.radios label{display: flex; align-items: center; cursor: pointer;}
.radios label.chk_right{flex-flow: row-reverse; justify-content: flex-end;}
.radios input{display: none;}
.radios .ic_box{display: inline-flex;flex-shrink: 0;position:relative; width: 2.2rem; height: 2.2rem; text-align: center; background-color: #fff;display: flex; align-items: center; justify-content: center; margin-right: 0.5rem;border-radius:2.0rem;border:1px solid var(--gray2);}
.radios input:checked + .ic_box{border-color: var(--primary);border-width:2px;}
.radios input:checked + .ic_box:after {
content: '';
display: block;
width: 1.2rem;
height: 1.2rem;
border-radius: 50%;
background-color: var(--primary);
border: 0.03rem solid #fff;
}
/* 이미지 업로드 */
.image_upload{display: inline-block;position: relative;margin-right:1.0rem;}
.upload_box{
width: 11rem;
border: 1px solid var(--border);
overflow: hidden;
cursor: pointer;
background: url(../image/btn_add_img.png) no-repeat center top 35% / 4.0rem;
border-radius: 1.0rem;
position: relative;
}
.upload_box .max_img {
position: absolute;
bottom: 20%;
width: 100%;
left: 0;
font-size: 1.3rem;
text-align: center;
color: var(--gray2);
font-weight:500;
}
.image_upload.on .upload_box{background: none;}
.upload_del {
position: absolute;
top: 0.8rem;
right: 0.8rem;
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
background-color: transparent;
padding: 0 !important;
display: none;
}
.upload_del img{width:100%;}
.image_upload.on .upload_del{display: flex;}
/* 비밀번호 인풋 */
.form-password{position:relative;}
.form-password .form-control{padding-right:5.0rem;}
.form-password .pw_icon {
width: 2.5rem;
height: 2.5rem;
border: 0;
background: transparent;
padding: 0;
position: absolute;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
}
/****************************************/
/* 모달 */
/****************************************/
/*기본모달*/
body{padding-right: 0px !important;}
body.modal-open{overflow: auto;}
body.modal-open[style]{padding-right: 0px !important;}
.modal{ padding-right: 0px !important; overflow-y: auto;}
.modal-dialog {max-height: 100%;height: 100%;}
.modal .modal-content {
border: 1px solid var(--border);
border-radius: 1.6rem;
}
.modal .modal-header {
align-items: center;
padding: 2.5rem 2rem 1.5rem;
justify-content: space-between;
border-bottom: 0;
}
.modal .modal-header .modal-title {
font-weight: 700;
font-size: 2.4rem;
flex: 1 1 auto;
}
.modal .modal-header .close {
text-shadow: none;
opacity: 1;
width: 2.4rem;
padding: 0;
margin: 0;
}
.modal .modal-body {
position: relative;
flex: 1 1 auto;
padding: 1.5rem 2.0rem 2.0rem;
}
.modal .modal-body .close_bar {
width: 4.4rem;
height: 0.4rem;
background: #E3E3E3;
border-radius: 1.0rem;
margin: 0 auto 1.0rem;
border: 0;
display: block;
}
.modal .modal-footer > *{margin:0;}
.modal .modal-footer {
padding: 2.0rem 2.0rem 3.0rem;
border: 0;
display: block;
}
.modal .modal-footer .form-row{margin-right: -0.4rem; margin-left: -0.4rem;}
.modal-default{max-width:56.7rem;margin: 0 auto;padding-left:0;padding-right:0;padding: 2.0rem 1.6rem;}
/* modal-sm */
.modal-sm {
max-width: calc(31.0rem + 3.2rem);
margin: 0 auto;
padding: 1.5rem;
padding: 0rem 1.6rem;
text-align: center;
}
.modal .modal-sm .modal-header{ padding: 1.5rem 2rem;}
.modal .modal-sm .modal-header .modal-title{ font-size: 1.7rem;}
.modal .modal-sm .modal-body {
border: 0;
padding: 0.5rem 2.0rem 2.0rem;
}
.modal .modal-sm .modal-body h5{
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 1.0rem;
}
.modal .modal-sm .modal-body p{
font-size: 1.5rem;
color: var(--gray-400);
}
.modal .modal-sm .modal-footer{
padding: 2.0rem;
}
/* modal-md */
.modal-md {
max-width: calc(46.0rem + 3.2rem);
margin: 0 auto;
padding: 1.5rem;
padding: 0rem 1.6rem;
max-height: calc(100% - 3.5rem);
min-height: calc(100% - 3.5rem);
}
.modal .modal-md .modal-header{}
.modal .modal-md .modal-body{}
.modal-md .modal-footer{padding: 0 2.0rem 2.0rem;}
/*전체사이즈*/
.modal_full.modal{overflow-y: auto;}
.modal_full.modal .modal-header {
width: 100%;
background: #fff;
padding: 0rem 1.6rem;
display: flex;
align-items: center;
justify-content: space-between;
height: var(--hd_height_m);
}
.modal_full.modal .modal-header button{border:0;background:transparent;width:3.0rem;}
.modal_full.modal .modal-content {border-radius: 0;max-height: 100vh;height: 100vh;}
.modal_full.modal .modal-dialog{margin:0 auto;max-width:var(--wrap_wd);transform: translate(0%, 0);max-height: 100%;}
.modal_full.modal .modal-body{border:0;padding-left:1.6rem;padding-right:1.6rem;}
.modal_full.modal .modal-footer{padding-top:1.4rem;padding-bottom:1.4rem;display: block;padding-left: 1.6rem;padding-right: 1.6rem;}
.modal_full.modal .modal-footer .form-row{margin-left: -5px;margin-right: -5px;}
.modal_full.modal .bg-black .modal-title{background:#000;}
/*하단 팝업*/
.modal_bottom.modal {
padding-right: 0 !important;
overflow-y: hidden;
}
.modal_bottom.modal.fade{}
.modal_bottom.modal.show .modal-dialog {
padding-right: 0 !important;
transform: translate(-50%, 0);
}
.modal_bottom.modal .modal-dialog {
transform: translate(0, 5rem);
position: fixed;
bottom: 0;
width: 100%;
max-width: 100%;
transform: translate(-50%, 5rem);
left: 50%;
}
.modal_bottom.modal .modal-title{
font-size: 1.8rem;
}
.modal_bottom.modal .modal-title button {
border: 0;
background: transparent;
width: 3.2rem;
position: absolute;
right: 2.0rem;
top: 1.6rem;
}
.modal_bottom.modal .modal-dialog {
justify-content: flex-end;
margin: 0 auto;
min-height: 100%;
max-width: var(--wrap_wd);
}
.modal_bottom.modal .modal-content {
border-radius: 2.0rem 2.0rem 0 0;
margin-top: 3.0rem;
}
.modal_bottom.modal .modal-header{
padding: 2.0rem 1.6rem;
}
.modal_bottom.modal .modal-body {
border-bottom: 0;
padding: 0 1.6rem 1.5rem;
}
.modal_bottom.modal .modal-footer {
padding: 1.5rem 1.6rem 1.6rem;
}
.modal-backdrop {
left: 50%;
width: 100%;
transform: translateX(-50%);
max-width: var(--wrap_wd);
}
/* 토스트팝업 */
.toast{
color: #fff;
border-radius: 0.6rem;
font-size: 1.5rem;
font-weight: 500;
padding: 0.5rem 1rem;
}
/* toast */
.toast{
position: fixed;
top: 7.2rem;
left: 50%;
transform: translateX(-50%);
padding: 0 1.4rem;
box-shadow: none;
font-weight: 300;
z-index: 9999;
border: 0;
background: transparent;
}
.toast-body {
padding: 1.0rem 3.0rem;
background-color: rgba(0, 0, 0, 0.8);
color: var(--white);
font-size: 1.6rem;
font-weight: 400;
border-radius: 2.0rem;
text-align: center;
}
.toast-body p{
display: flex;
align-items: center;
line-height: 1.3;
justify-content:center;
}
.toast-body p i{
margin-right: 0.6rem;
}
/****************************************/
/* 서브 */
/****************************************/
/*서브 공통*/
.sub_tit { position: relative; }
.sub_pg {
min-height: 780px;
padding-top: var(--hd_height);
position: relative;
}
.over_hidden{ overflow:hidden;}
/*반응형 max 1200 xl*/
@media (max-width: 1199.98px) {
.tab_style ul{
grid-template-columns: repeat(auto-fit, minmax(33%, auto));
}
}
/*반응형 max 992px lg 모바일 시작 */
@media (max-width: 991.98px) {
body{ font-size: 1.4rem;}
.tit_h1 { font-size: 2.2rem;}
.tit_h2 { font-size: 1.9rem;}
.tit_h3 { font-size: 1.8rem;}
.tit_h4{ font-size: 1.5rem;}
/* 탭 디자인 (탭메뉴02 커스텀) */
.tab_style{ margin-bottom: 2.0rem;}
.tab_style li .btn{
height: 4.0rem;
font-size: 1.4rem;
}
}
/*반응형 max 767px md*/
@media (max-width: 767.98px) {
/* 컨테이너 설정 */
.container, .container-xl, .container-lg, .container-md, .container-sm{
padding-right: 1.6rem;
padding-left: 1.6rem;
}
/* 페이지네이션 */
.pagination a {
font-size: 1.6rem;
width: 3.6rem; height: 3.6rem;
}
}
/*반응형 max 576px sm*/
@media (max-width: 575.98px) {
.mobile_wr {
border-left: 0;
border-right: 0;
}
.gray_info_box .col{
display: flex;
flex-wrap: wrap;
}
.gray_info_box .info{
text-align: right;
margin-left: auto;
}
}
/*반응형 max 375px*/
@media (max-width: 375px) {
html { font-size:9.2px; }
.chat_item .rect {
width: 4.4rem;
margin-right: 1.0rem;
}
}