@charset "UTF-8";
/* 초기화 및 초기 세팅 */
:root {
/* 버튼 및 인풋 폼 높이 세팅 */
--hd_height: 5.5rem;
--hd_height_md: 8rem;
--height: 5rem;
--height_sm: 3.5rem;
--height_md: 5.5rem;
--height_lg: 6rem;
--ic_date: url('../img/ic_calendar.svg');
}
@font-face {
font-family: 'LotteMartHappy';
font-style: normal;
font-weight: 400;
src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartHappy/LotteMartHappyMedium.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartHappy/LotteMartHappyMedium.woff') format('woff');
}
/* @font-face {
font-family: 'LotteMartHappy';
font-style: normal;
font-weight: 700;
src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartHappy/LotteMartHappyBold.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartHappy/LotteMartHappyBold.woff') format('woff');
} */
html { font-size:10px; }
body { margin:0 auto; padding:0; min-height: 100vh;}
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:pointer }
button { cursor:pointer }
select { margin:0 }
p { margin:0; padding:0; word-break:keep-all; }
hr { display:none }
a { text-decoration:none }
a:hover { text-decoration: none; }
.un_reboot_a { color: var(--main); text-decoration: underline; }
*, :after, :before {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
word-break: keep-all;
}
img { max-width:100%; display:inline-block; height: auto; }
.ff_lotte {
font-family: 'LotteMartHappy', sans-serif;
}
hr.line{
display: block;
height: 0.6rem;
/* margin: 3rem -3rem; */
background: var(--light_gray);
border-top: 1px solid var(--border);
}
hr.line2{
display: block;
/* margin: 0 -3rem; */
border-top: 1px solid var(--border);
}
/*메인*/
.idx_pg { padding-top: var(--hd_height_md); padding-bottom:100px;}
/*서브*/
.sub_tit { position: relative; }
.sub_tit i { position: absolute; top:-8px; right:-12px; width:1.2rem; }
.sub_pg { padding-top: var(--hd_height_md); padding-bottom:100px;}
.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; }
.tit_h2 { font-size: 2.4rem; font-weight: 700; }
.tit_h3 { font-size: 2.0rem; font-weight: 700; }
.tit_h4 { font-size: 1.8rem; font-weight: 700; }
.fs_8 { font-size: 0.8rem; }
.fs_9 { font-size: 0.9rem; }
.fs_10 { font-size: 1.0rem; }
.fs_11 { font-size: 1.1rem; }
.fs_12 { font-size: 1.2rem; }
.fs_13 { font-size: 1.3rem; }
.fs_14 { font-size: 1.4rem; }
.fs_15 { font-size: 1.5rem; }
.fs_16 { font-size: 1.6rem; }
.fs_17 { font-size: 1.7rem; }
.fs_18 { font-size: 1.8rem; }
.fs_19 { font-size: 1.9rem; }
.fs_20 { font-size: 2.0rem; }
.fs_21 { font-size: 2.1rem; }
.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; }
.cursor_default{cursor:default !important;}
.cursor_pointer{cursor:pointer !important;}
.gap_15{gap:1.5rem;}
.z_index_5{z-index:5;}
.select_none{user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none;}
/*글자 줄임말*/
.line_text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: break-all; }
.line1_text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
.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;
}
.line3_text {
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/* width */
.mw-130{max-width:13rem !important;}
.mw-410{max-width:41rem !important;}
.mw-450{max-width:45rem !important;}
.mw-470{max-width:47rem !important;}
.mw-600{max-width:60rem !important;}
.mw-660{max-width:66rem !important;}
.mw-885{max-width:88.5rem !important;}
/*border radius*/
/* .rounded { border-radius: 0.5rem!important; }
.rounded-lg { border-radius: 1.0rem!important; } */
.rounded-xl { border-radius: 2rem!important; }
/* 폼 사각형 */
.sq_guide { display:flex; flex-wrap: wrap; }
.sq_guide li {
width: 90px;
height: 90px;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
margin: 0.5rem;
}
/* 스크롤바 none */
.none_scroll_bar { -ms-overflow-style: none; }
.none_scroll_bar::-webkit-scrollbar { display: none; }
/* 버튼 */
.btn { height: var(--height); }
.btn-sm { height: var(--height_sm); }
.btn-md { height: var(--height_md); }
.btn-lg { height: var(--height_lg); }
/* 인풋 자동완성 초기화 */
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); }
.form-control-sm { height: var(--height_sm); }
.form-control-md { height: var(--height_md); }
.form-control-lg { height: var(--height_md); padding: 0.5rem 1.5rem; }
.ip_wr .ip_tit { margin-bottom:0.8rem; }
.ip_wr .ip_tit h5 { font-size:1.6rem; font-weight:500; display:inline-block; line-height: 1.4; }
/* form-text */
.form-text{font-size: 1.3rem; display: none; align-items: center;}
.form-text i{margin-right: 0.25rem;}
.ip_valid .ip_valid{display: flex; color: var(--success);}
.ip_invalid .ip_invalid{display: flex; color: var(--danger);}
/* textarea 높이 */
textarea.form-control { height: 20rem; padding: 1.5rem;}
.cmt_wr textarea.form-control { height: 6.5rem;}
/* 셀렉트 박스 */
.custom-select{
padding-left: 1.5rem;
padding-right: 3.5rem;
color: var(--input_placeholder);
background-size: 2.4rem;
border-radius: 1rem;
background: url(../img/ic_arrow_down.png) no-repeat center right 1.5rem / 2rem;
}
.custom-select:disabled{background-color:var(--input_disabled) !important;}
/* 날짜 선택 */
input.form-control[type="date"],
input.form-control[type="month"]{position: relative; line-height: calc(var(--height) - 0.5rem - 0.5rem );}
input.form-control[type="date"]::-webkit-calendar-picker-indicator,
input.form-control[type="month"]::-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="month"]::before{content: ''; display: block; width: 2rem; height: 2rem; position: absolute; top: 50%; transform: translateY(-50%); right: 1.5rem; background: var(--light); cursor: pointer; -webkit-mask: var(--ic_date); mask: var(--ic_date); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;}
/* 체크박스 및 라디오 */
.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;}
.ic_box{display: inline-block; width: 2.5rem; height: 2.5rem; font-size: 2rem; text-align: center; display: flex; align-items: center; justify-content: center; margin-right: 0.6rem; background: url(../img/ic_check_off.svg) no-repeat; background-position: center; background-size: cover;}
input:checked + .ic_box{ background: url(../img/ic_check_on.svg) no-repeat; background-position: center; background-size: cover;}
.chk_right .ic_box{margin-right: 0; margin-left: 0.6rem;}
.checks.checks-sm .ic_box{ width: 2rem; height: 2rem; }
/* 페이지네이션 */
.pagination { margin-top: 50px; display: flex; justify-content: center; align-items: center; }
.pagination li { height: 100%; }
.pagination a { font-size: 1.6rem; padding: 0 10px; font-weight: 400; display: flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; color: #777; }
.pagination a.disabled { color: #AAA; }
.pagination a.on { color: var(--primary); font-weight: 500; }
.pagination a.page_btn{ width: 3.6rem; height: 3.6rem; border-radius: 50%; background-color: var(--white); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.pagination a.page_btn.prev{ margin-right: 2rem; }
.pagination a.page_btn.next{ margin-left: 2rem; }
.pagination a.page_btn img{ max-width: 100%; }
/* 테이블 */
.table_01 {width:100%; border-collapse: collapse; border-bottom:1px solid #e3e3e3; text-align:center; border-top: 2px var(--primary) solid;}
.table_01 th {background: #F6F6F6; text-align:center; border:1px solid #e3e3e3; }
.table_01 td { border:1px solid #e3e3e3; }
.table_01 th, .table_01 td{ padding:1rem 0.8rem;}
/* 테이블 슬래쉬 */
.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; }
/* 페이저 */
.pager {
background: #F5F5F5;
border-radius: 15rem;
display: flex;
justify-content: center;
align-items: center;
width: 250px;
height: 65px;
margin: 3.5rem auto 0;
}
/* 이미지 크롭 */
.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%);
}
.rect.sizefull img{
object-fit: inherit;
}
.rect img.loading{
width:auto;
height:70%;
}
.rect i.no_img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#f5f5f5 url('../img/img_icon.png') no-repeat center center / 44px;
}
/* 이미지 업로드*/
.image-upload {
width: 8rem;
height: 8rem;
font-size: 2rem;
border: 1px solid var(--border);
border-radius: 0.4rem;
overflow: hidden;
min-width: 8rem;
}
.image-upload > input {
display: none;
}
.upload-icon {
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: #fff url(../img/ic_plus_g.png) no-repeat;
background-position: center;
background-size: 1.6rem;
}
.image-upload.on .upload-icon {
background: none;
cursor: pointer;
}
.upload-icon img {
position: absolute;
width: 100%;
height: 100%;
}
.image-upload label {
cursor: pointer;
width: 100%;
height: 100%;
margin: 0;
}
.image-upload .upload-icon .btn.del{
display: none;
position: absolute;
top: 0.5rem;
right: 0.5rem;
font-size: 0;
background-color: rgb(5 5 5 / 35%);
width: 2rem;
height: 2rem;
border-radius: 50%;
padding: 0;
z-index: 99;
min-width: auto;
}
.image-upload .upload-icon .btn.del::after{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
background: url(../img/ic_delete_sm.png) no-repeat;
background-position: center;
background-size: contain;
}
.image-upload.on .upload-icon .btn.del {
display: block;
}
/* 이미지 업로드 변경 */
.image-upload2 {
width: 8rem;
height: 8rem;
font-size: 2rem;
border: 1px solid var(--border);
border-radius: 0.4rem;
overflow: hidden;
min-width: 8rem;
display: none;
}
.image-upload2.on, .image-upload2.addBtn, .image-upload2.addBtn2, .image-upload2.addBtn3 {
display: block;
}
.image-upload2 > input {
display: none;
}
.upload-icon2 {
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: #fff url(../img/ic_plus_g.png) no-repeat;
background-position: center;
background-size: 1.6rem;
}
.image-upload2.on .upload-icon2 {
background: none;
cursor: pointer;
}
.upload-icon2 img,
.upload-icon2 video {
position: absolute;
width: 100%;
height: 100%;
object-fit: fill;
}
.image-upload2 label {
cursor: pointer;
width: 100%;
height: 100%;
margin: 0;
}
.image-upload2 .upload-icon2 .btn.del,.image-upload2 .upload-icon2 .btn.del2,.image-upload2 .upload-icon2 .btn.del3{
display: none;
position: absolute;
top: 0.5rem;
right: 0.5rem;
font-size: 0;
background-color: rgb(5 5 5 / 35%);
width: 2rem;
height: 2rem;
border-radius: 50%;
padding: 0;
z-index: 99;
min-width: auto;
}
.image-upload2 .upload-icon2 .btn.del::after,.image-upload2 .upload-icon2 .btn.del2::after, .image-upload2 .upload-icon2 .btn.del3::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
background: url(../img/ic_delete_sm.png) no-repeat;
background-position: center;
background-size: contain;
}
.image-upload2.on .upload-icon2 .btn.del,.image-upload2.on .upload-icon2 .btn.del2,.image-upload2.on .upload-icon2 .btn.del3 {
display: block;
}
/* loading */
@keyframes loading {
0% {
transform-origin:100% 100%;
transform:rotate(0deg);
}
100% {
transform-origin:100% 100%;
transform:rotate(360deg);
}
}
.loading_wrap {width:100%; height:100%; position:fixed; top:0px; left:0px; z-index:999999; background-color:rgba(255, 255, 255, 0.8);}
.loading_text {position: relative;top: 0px;left: 0px; width: 100%; height: 100%;}
.loading_text span {position:absolute; top:50%; left:50%; z-index:100; font-size:14px; color: var(--primary); font-weight:900; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%);}
.loading_circle {position:relative; display:block; z-index:13; top: calc(50% - 50px); left: calc(50% - 50px); width:100px; height:100px; border:5px solid transparent; border-radius:50%; background-color:transparent;}
.loading_circle:hover:before {background-color:#fff;}
.loading_circle:before {position:absolute; display:block; content:''; z-index:12; top:4px; left:4px; width:82px; height:82px; border-radius:50%; background-color:#fff; }
.loading_circle:after {position:absolute; display:block; top:0; content:''; z-index:11; top:0px; left:0px; width:45px; height:45px; border-radius:200px 0 0 0; background:linear-gradient(45deg, var(--primary) 0%, transparent 100%); animation:loading 0.9s linear infinite;}
@media (min-width: 1199.98px) {
}
/*반응형 max 1200 xl*/
@media (max-width: 1199.98px) {
}
/*반응형 max 992px lg*/
@media (max-width: 991.98px) {
}
/*반응형 max 767px md*/
@media (max-width: 991.98px) {
body { font-size: 1.4rem; }
.idx_pg { padding-top: var(--hd_height); padding-bottom:60px; }
.sub_pg { padding-top: var(--hd_height); padding-bottom:60px; }
/* .tit_h1 { font-size: 2.4rem; }
.tit_h2 { font-size: 2.2rem; }
.tit_h3 { font-size: 1.8rem; }
.tit_h4 { font-size: 1.6rem; } */
.mw-130{max-width:100% !important;}
.mw-410{max-width:100% !important;}
.mw-450{max-width:100% !important;}
.mw-470{max-width:100% !important;}
.mw-600{max-width:100% !important;}
.mw-660{max-width:100% !important;}
.mw-885{max-width:100% !important;}
hr.line{
margin: 3rem -2rem;
}
hr.line2 {
margin: 0 -2rem;
}
/* 스크롤바 none mobile */
.none_scroll_bar_lg { -ms-overflow-style: none; }
.none_scroll_bar_lg::-webkit-scrollbar { display: none; }
}
/*반응형 max 576px sm*/
@media (max-width: 575.98px) {
}
/*반응형 max 380px*/
@media (max-width: 380px) {
html { font-size: 9px; }
}
.scrollDisable {height:100%; min-height:100%; overflow:hidden !important; touch-action:none;}