@CHARSET "UTF-8";

:root {
	--special-font: 'g-sans', 'Roboto', 'Noto Sans KR', 'Apple SD Gothic Neo', helvetica, 'Malgun Gothic', '맑은 고딕',helvetica, sans-serif;
	--basic-color: #2d4798;
	--basic-color-rgb: 45, 71, 152;
	--basic-color-deep: #172b6b;
	--basic-color-bright: #e7eaf3;
	--special-color: #fdc436;
	--special-color-deep: #e5a506;
	--special-color-bright: #fdf3da;
	--blue-color: #3c69dd;
	--blue-color-deep: #244db8;
	--blue-color-bright: #7799ee;
	--red-color: #ff4d5e;
	--red-color-deep: #e72033;
	--red-color-bright: #fef2f2;
	--gray-color: #c1c1c1;
	--gray-color-deep: #9f9f9f;
	--gray-color-bright: #f2f5f6;
	--yellow-color: #f5cf4b;
	--yellow-color-deep: #e8b70d; 
	--yellow-color-bright: #f3e3ad;	
}
* { font-family: 'Roboto', 'Noto Sans KR', 'Apple SD Gothic Neo', helvetica, 'Malgun Gothic', '맑은 고딕',helvetica, sans-serif; }


html { font-size:10px; }
html.no-js body, html.js body { opacity: 0; }
html.-ms- body { opacity: 1; }

@media (max-width: 500px){ html { font-size: 9.5px; } }
@media (max-width: 420px){ html { font-size: 9px; } }
@media (max-width: 360px){ html { font-size: 8px; } }

* { line-height: 130%; word-break: keep-all; overflow-wrap: break-word; margin:0; padding:0; } html, body { height: 100%; } body{ background:#fff; font-size: 1.7rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
#map * { box-sizing: content-box; }

.mT0 { margin-top: 0 !important; } .mT5 { margin-top: 0.5rem; } .mT10 { margin-top: 1rem; } .mT15 { margin-top: 1.5rem; } .mT20 { margin-top: 2rem; } 
.mT25 { margin-top: 2.5rem; } .mT30 { margin-top: 3rem; } .mT35 { margin-top: 3.5rem; } .mT40 { margin-top: 4rem; } .mT50 { margin-top: 5rem; }
.mB0 { margin-bottom: 0 !important; } .mB5 { margin-bottom: 0.5rem; } .mB10 { margin-bottom: 1rem; } .mB15 { margin-bottom: 1.5rem; } .mB20 { margin-bottom: 2rem; } 
.mB25 { margin-bottom: 2.5rem; } .mB30 { margin-bottom: 3rem; } .mB35 { margin-bottom: 3.5rem; } .mB40 { margin-bottom: 4rem; } .mB50 { margin-bottom: 5rem; }
.pT0 { padding-top: 0 !important; } .pT5 { padding-top: 0.5rem; } .pT10 { padding-top: 1rem; } .pT15 { padding-top: 1.5rem; } .pT20 { padding-top: 2rem; } 
.pT25 { padding-top: 2.5rem; } .pT30 { padding-top: 3rem; } .pT35 { padding-top: 3.5rem; } .pT40 { padding-top: 4rem; } .pT50 { padding-top: 5rem; }
.pB0 { padding-bottom: 0 !important; } .pB5 { padding-bottom: 0.5rem; } .pB10 { padding-bottom: 1rem; } .pB15 { padding-bottom: 1.5rem; } .pB20 { padding-bottom: 2rem; } 
.pB25 { padding-bottom: 2.5rem; } .pB30 { padding-bottom: 3rem; } .pB35 { padding-bottom: 3.5rem; } .pB40 { padding-bottom: 4rem; } .pB50 { padding-bottom: 5rem; }
.width-50 { width: 5rem; } .width-100 { width: 10rem; } .width-120 { width: 12rem; } 
.width-150 { width: 15rem; } .width-200 { width: 20rem; } .width-250 { width: 25rem; } 
.width-300 { width: 30rem; } .width-350 { width: 35rem; } .width-400 { width: 40rem; }


fieldset,img{ border:0 none; }
dl,ul,ol,menu,li {list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,q:before, q:after { content:''; content:none; }
input,select,textarea,button { vertical-align:middle; }
button { border: 0; background-color:transparent; cursor:pointer; outline:none; appearance: none; }
body,th,td,input,select,textarea,button { -webkit-text-size-adjust:none; } 
a { text-decoration:none; color: #333; }
a:active, a:hover { text-decoration:none; }
address,caption,cite,code,dfn,em,var { font-style:normal; font-weight:normal; }
table { border-collapse:collapse; border-spacing:0; }
legend, caption, hr, .skip, .hide, .hidden { display: none; }
img { vertical-align:middle; -ms-interpolation-mode: bicubic; }
.fullImg { display: block; width: 100%; } .maxImg { display: block; max-width: 100%; } .fullWidth { width: 100%; }
.orangeText { color: #eb6100; }  .blueText { color: #4179c6; } .grayText { color: var(--gray-color-deep); }.redText { color: var(--red-color); }
.grayBg { background-color: #f1f4f6; } .warningText { font-size: 0.95em; }

@media (min-width: 1360px){ .preText { white-space: pre-wrap; word-break: keep-all; } }

.alignLeft { text-align: left !important; } .alignRight { text-align: right !important; } .alignCenter { text-align: center !important; }
.float-wrap:after { content: ''; display: block; clear: both; }
.float-wrap > * { float: left; } .float-wrap > .floatRight { float: right; }

.divisionLine { border-top: 1px solid #cecece; margin: 3rem 0; height: 1px; width: 100%; }
.divisionLine-dot { border-top: 1px dashed #cecece; margin: 3rem 0; height: 1px; width: 100%; }

*, *:after, *:before { box-sizing: border-box; -webkit-tap-highlight-color : transparent; }

input[type='button'], input[type='date'], input[type='datetime-local'], input[type='email'], input[type='hidden'], input[type='image'], input[type='month'], input[type='number'],
input[type='password'], input[type='search'], input[type='submit'], input[type='tel'], input[type='text'], input[type='time'], input[type='url'], input[type='week'],
textarea, select, .customSelect, .imgPreview-wrap > a, .initialBtn { border-radius: 4px; }



/* ------ cut-text ------ */

.cutText { display:block; overflow:hidden; width:100%; text-overflow:ellipsis; white-space:nowrap; }



/* ------ clamp ------ */

.lineClamp { position: relative; font-size: 1.5rem; line-height: 150%; word-break: break-all; overflow: hidden; display: block; }
.lineClamp::before, .lineClamp::after { position: absolute; }
.lineClamp::before {
  content: '...'; top: 0; right: 0; width: 2.5em; text-align: right; font-weight: 300;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%);
}
.lineClamp::after { content: ''; width: 100%; height: 100%; }

@supports (-webkit-line-clamp: 1) {
 	.lineClamp { display: -webkit-box; -webkit-box-orient: vertical; }
 	.lineClamp:before { display: none !important; }
}
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; max-height: calc(1.5em * 2); }
.lineClamp-fix.clamp-2 { height: calc(1.5em * 2); }
.lineClamp-fix.clamp-2:before { top: calc(1.5em * 1); }
.clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; max-height: calc(1.5em * 3); }
.lineClamp-fix.clamp-3 { height: calc(1.5em * 3); }
.lineClamp-fix.clamp-3:before { top: calc(1.5em * 2); }
.clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; max-height: calc(1.5em * 4); }
.lineClamp-fix.clamp-4 { height: calc(1.5em * 4); }
.lineClamp-fix.clamp-4:before { top: calc(1.5em * 3); }
.clamp-5 { -webkit-line-clamp: 5; line-clamp: 5; max-height: calc(1.5em * 5); }
.lineClamp-fix.clamp-5 { height: calc(1.5em * 5); }
.lineClamp-fix.clamp-5:before { top: calc(1.5em * 4); }
.clamp-6 { -webkit-line-clamp: 6; line-clamp: 6; max-height: calc(1.5em * 6); }
.lineClamp-fix.clamp-6 { height: calc(1.5em * 6); }
.lineClamp-fix.clamp-6:before { top: calc(1.5em * 5); }



/* ------ object-fit ------ */

.imgContainer-fit { width:100%; padding-bottom:100%; position:relative; display:block ;}
.imgContainer-fit img { width:100%; height:100%; -o-object-fit:cover; object-fit:cover; position:absolute; top:0; left: 0; }
.customObject-fit { position:relative; background-size:cover; background-position:center center; }
.customObject-fit img { opacity:0; }

.imgContainer-fit.fit-contain img { width:100%; height:100%; -o-object-fit:contain; object-fit:contain; position:absolute; top:0; left: 0; }
.customObject-fit.fit-contain { position:relative; background-size:contain; background-position:center center; }



/* ------ input / select ------ */

input[type='button'], input[type='checkbox'], input[type='color'], input[type='date'], input[type='datetime-local'], input[type='email'], input[type='file'], input[type='hidden'], input[type='image'], input[type='month'], input[type='number'],
input[type='password'], input[type='radio'], input[type='range'], input[type='reset'], input[type='search'], input[type='submit'], input[type='tel'], input[type='text'], input[type='time'], input[type='url'], input[type='week'],
textarea, select { -webkit-appearance:none; -moz-appearance:none; appearance:none; box-shadow: none; outline: 0; }

input[type='button'], input[type='date'], input[type='datetime-local'], input[type='email'], input[type='hidden'], input[type='image'], input[type='month'], input[type='number'],
input[type='password'], input[type='search'], input[type='submit'], input[type='tel'], input[type='text'], input[type='time'], input[type='url'], input[type='week'],
textarea, select { padding: 1rem; max-width:100%; border: 1px solid #dedede; font-size: inherit; }

input:focus, textarea:focus { border-color: var(--basic-color); outline:0; transition: all 0.2s ease; }
input[type="file"] { border: 0; padding: 0; }

input::-ms-input-placeholder { color:#aeaeae; } /* ie10~ */
input::-webkit-input-placeholder { color:#aeaeae; } /* webkit */
input::-moz-placeholder { color:#aeaeae; } /* Firefox */
input::placeholder { color:#aeaeae; }

textarea::-ms-input-placeholder { color:#aeaeae; }
textarea::-webkit-input-placeholder { color:#aeaeae; }
textarea::-moz-placeholder { color:#aeaeae; }
textarea::placeholder { color:#aeaeae; }

input[type='email']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='url']:focus,
textarea:focus,
select:focus {
  border:1px solid var(--basic-color);
  outline:0;
  transition:all 0.2s ease;
}
select:focus { background-image: url("/style_www/img/common/icon/select_arrow_u.png"); }


select { padding-right: 2.5rem; background-image: url("/style_www/img/common/icon/select_arrow_d.png"); background-size: 2rem; background-repeat: no-repeat; background-position: right center;}
select:focus { background-image: url("/style/img/common/icon/select_arrow_u.png"); }
select[multiple].checkSelect { background-image: none; overflow-y: auto; padding: 1rem 2rem; }
select[multiple].checkSelect option { padding: 12px 12px 12px 28px; position: relative; color: #888; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
select[multiple].checkSelect option:hover { color: #333; }
select[multiple].checkSelect option + option { border-top: 1px solid #dedede; }
select[multiple].checkSelect option:before { content: ""; position: absolute; height: 18px; width: 18px; top: 0; bottom: 0; margin: auto; left: 0px; border: 1px solid #ccc; border-radius: 3px; z-index: 1; }
select[multiple].checkSelect option:checked { background-color: #fff; color: #000; }
select[multiple].checkSelect option:checked:before { border-color: var(--blue-color); background-color: var(--blue-color); background-image: url(/style/img/common/icon/check.png); background-size: 10px; background-repeat: no-repeat; background-position: center; }
.ui-datepicker-title select { padding-top: 0.3rem; padding-bottom: 0.2rem; border-radius: 0.2rem; }

input[type=file].customFile::file-selector-button {
  padding: 1rem 2rem; line-height: 1; background: #fff; border: 1px solid var(--basic-color);
  color: var(--basic-color); border-radius: 5px; cursor: pointer; margin-right: 1rem;
}

.imgPreview-wrap { position: relative; padding-left: 5.5rem; }
.imgPreview-wrap > * { display: inline-block; vertical-align: middle; }
.imgPreview-wrap > a { position: absolute; left: 0; top: 0; width: 5rem; height: 100%; border: 1px solid #ccc; overflow: hidden; }
.imgPreview-wrap > a .imgContainer-fit { padding-bottom: 0; height: 100%; }
.imgPreview-wrap .removebtn { position: absolute; top: 0; left: 5rem; transform: translate(-50%, -50%); border: 1px solid #da2957; width: 20px; height: 20px; border-radius: 50%; background-color: #fff; color: #da2957; z-index: 10; }

.imgPreview-wrap > label { display: inline-block; max-width: 120px; text-align: center; color: #999; margin: 0; border: 1px solid var(--basic-color); color: var(--basic-color); font-weight: normal; }
.imgPreview-wrap > input[type="file"] { position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; visibility: hidden; }




/* ------ customSelect ------ */

.customSelect { position: relative; width: 200px; border: 1px solid #dcdcdc; z-index: 1; }
.customSelect:before { content: ""; position: absolute; top: 50%; right: 15px; width: 0; height: 0; margin-top: -2px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #979fa6; }
.customSelect > label { display: block; padding: 1rem; color: #555; z-index: -1; font-weight: 400; margin: 0; }
.customSelect > select { width: 100%; position: absolute; top: 0px; right: 0px; bottom: 0; left: 0px;  font-family: inherit; padding: 1rem; border: 0; opacity: 0; filter:alpha(opacity=0); appearance: none; }



/* ------ scriptSelect ------ */

.scriptSelect-wrap { position: relative; }
.scriptSelect-wrap > select { width: 0; height: 0; visibility: hidden; position: absolute; z-index: -1; } 
.scriptSelect { position: relative; display: block; width: 100%; }
.scriptSelect-trigger, 
.scriptSelect-option { display: block; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.scriptSelect-trigger { position: relative; padding: 10px 40px 10px 10px; border-radius: 2px; cursor: pointer; border: 1px solid #dedede; transition: all 0.3s; }
.scriptSelect-trigger:hover { background-color: #efefef; transition: all 0.3s; }
.scriptSelect-trigger:after { 
	content: ''; position: absolute; display: block; width: 8px; height: 8px; top: 50%; right: 15px; border-bottom: 1px solid #cdcdcd; border-right: 1px solid #cdcdcd;
	margin-top: -3px; transform: rotate(45deg) translateY(-50%); transition: all 0.4s ease-in-out; transform-origin: 50% 0;
}
.scriptSelect-options { 
	position: absolute; display: block; top: 100%; left: 0; right: 0; margin: 15px 0; border: 1px solid #dedede;
	border-radius: 2px; box-shadow: 0 2px 1px rgba(0,0,0,.07); background-color: #fff; pointer-events: none; 
	transition: all 0.4s ease-in-out; transform: translateY(-15px); opacity: 0; visibility: hidden;
}
.scriptSelect-options:before {
	content: ''; position: absolute; display: block; bottom: 100%; right: 15px; width: 9px; height: 9px; margin-bottom: -4px;
	border-top: 1px solid #dedede; border-left: 1px solid #dedede; background: #fff; transform: rotate(45deg); transition: all 0.4s ease-in-out;
}
.scriptSelect-option { position: relative; display: block; padding: 10px; border-bottom: 1px solid #dedede; cursor: pointer; transition: all 0.15s ease-in-out; }
.scriptSelect-option:last-of-type { border-bottom: 0; }
.scriptSelect-option:hover,
.scriptSelect-option.active { background-color: #efefef; }
.scriptSelect.opened .scriptSelect-trigger:after { margin-top: 3px; transform: rotate(-135deg) translateY(-50%); }
.scriptSelect.opened .scriptSelect-options { opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0); }



/* ------ initialBtn ------ */

.initialBtn { display: block; position: relative; line-height: 1; text-align: center; cursor: pointer; width: 100%; border:1px solid #bbbfc6; color: #555; padding: 1rem 0.8rem; text-shadow: 0 0 5px rgba(0,0,0,0.1); outline: 0; outline: none; text-decoration: none !important; }
.initialBtn:before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.15); z-index: 0; opacity: 0; transition: .3s ease-out; }
.initialBtn:hover { background-color: #ebeff5; transition: all 0.15s ease; }
.initialBtn:hover::before { opacity: 1; }
.initialBtn:foucs { outline: 0; outline: none; }
.initialBtn * { line-height: 1; }

.basicBtn { background-color: var(--basic-color); border-color: var(--basic-color-deep); color:#fff; overflow: hidden; } 
.basicBtn:hover { color: #fff !important;  background-color: var(--basic-color-deep);  }

.radiusBtn { border-radius: 10rem; }

.blueBtn { color: #fff !important; background-color: var(--blue-color); border-color: var(--blue-color-deep); }
.blueBtn:hover { background-color: var(--blue-color-deep); }
.greenBtn { color: #fff !important; background-color: #03c75a; border-color: rgba(0,0,0,.15); }
.greenBtn:hover { background-color: #03b351; }
.redBtn { color: #fff !important; background-color: var(--red-color); border-color: var(--red-color-deep) }
.redBtn:hover { background-color: var(--red-color-deep); }
.yellowBtn { color: #fff !important; background-color: #f5cf4b; border-color: #ecc439; }
.yellowBtn:hover { background-color: #ecc439; }
.grayBtn { color: #fff !important; background-color: #bcbcbc; border-color: #a0a0a0; }
.grayBtn:hover { background-color: #a0a0a0; }
.blackBtn { color: #fff !important; background-color: #444b59; border-color: #282b32; }
.blackBtn:hover { background-color: #282b32; }

.btnGroup { position: relative; }
.btnGroup * { display: inline-block; vertical-align: middle; }
.btnGroup-center { text-align: center; }
.btnGroup-right { text-align: right; }



/* ------ burgerBtn ------ */

.burgerBtn { display: block; width: 2rem; }
.burgerBtn span { display: block; height: 1px; width: 100%; background-color: #555; font-size: 0; }
.burgerBtn span + span { margin-top: 0.5rem; }



/* ------ gridWrap ------ */

.grid-wrap > ul { display: flex; flex-wrap: wrap; margin-left: -1rem; margin-top: -1rem; }
.grid-wrap > ul > li { display: inline-block; padding-left: 1rem; padding-top: 1rem; vertical-align: middle; width: 100%; }
.grid-wrap > ul > li > .inner { display: block; width: 100%; }

.grid-wrap.grid-2 > ul > li { width: 50%; }
.grid-wrap.grid-3 > ul > li { width: 33.33333%; }
.grid-wrap.grid-4 > ul > li { width: 25%; }



/* ------ Checkbox ------ */

.customCheckbox { position: relative; font-size: 0; }
.customCheckbox label { display: inline-block; position: relative; height: 1.8rem; padding-left: 1.8rem; cursor: pointer; }
.customCheckbox label i { display: block; width: 1.8rem; height: 1.8rem;  position: absolute; left: 0; top: 50%; padding: 0.2rem; border-radius: 20%; transform: translateY(-50%); border: 2px solid var(--basic-color); }
.customCheckbox label i:before { content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.customCheckbox label span { display: inline-block; font-size: 1.4rem; vertical-align: middle; line-height: 1.8rem; padding-left: 0.5rem; }
.customCheckbox input[type="checkbox"] { display: none; }
.customCheckbox input[type="checkbox"]:checked ~ label i { background-color: var(--basic-color); } 
.customCheckbox input[type="checkbox"]:checked ~ label i:before { background-image: url("/style/img/common/icon/check.png"); background-size: 100% 100%; background-color: inherit; }



/* ------ Radio ------ */

.customRadio { font-size: 0; }
.customRadio > .inner { position: relative; display: inline-block; vertical-align: middle; padding-right: 1.5rem; }
.customRadio label { display: block; position: relative; padding-left: 1.8rem; cursor: pointer; }
.customRadio label i { display: block; width: 1.8rem; height: 1.8rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%); border-radius: 9rem; border: 2px solid var(--basic-color); cursor: pointer; }
.customRadio label i:before { content: ''; display: block; width: 100%; padding-bottom: calc(100% - 2px); background-color: #fff; border-radius: 50%; border: 1px solid #fff; }
.customRadio label span { display: inline-block; font-size: 1.4rem; vertical-align: middle; line-height: 1.8rem; padding-left: 0.5rem; }
.customRadio input[type="radio"] { display: none; }
.customRadio input[type="radio"]:checked + label i:before { background-size: 100% 100%; background-color: inherit; background-color: var(--basic-color);  }



/* ------ swith checkBox ------ */

.switchCheckbox { position: relative; font-size: 0; }
.switchCheckbox label { cursor: pointer; }
.switchCheckbox label i { display: inline-block; vertical-align: middle; position: relative; width:3.5rem; height: 1.9rem; margin: 0; padding: 0; background-color: #c3c8c9; border-radius: 4rem; }
.switchCheckbox label i:before { content: ''; display: block; width: 1.5rem; height: 1.5rem; border-radius: inherit; position: absolute; z-index: 2; left: 0.2rem; top: 0.2rem; background: #fff; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%); }
.switchCheckbox label span { display: inline-block; font-size: 1.4rem; vertical-align: middle; padding-left: 0.5rem; }
.switchCheckbox input[type="checkbox"] { display: none; }
.switchCheckbox input[type="checkbox"]:checked ~ label i { background-color: var(--basic-color); }
.switchCheckbox input[type="checkbox"]:checked ~ label i:before { left: 100%; margin-left: -1.7rem; }



/* ------ slick ------ */

.slick-dots	{ text-align: center; margin-left: -4px; font-size: 0; }
.slick-dots li { position: relative; display: inline-block; padding-left: 4px; cursor: pointer; }
.slick-dots li button { font-size: 0; line-height: 0; display: block; width: 8px; height: 8px; cursor: pointer; outline: none; border: 1px solid var(--special-color);; border-radius: 1rem; opacity: 1;  }
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li button:hover,
.slick-dots li button:focus { opacity: 1; }
.slick-dots li.slick-active button{ opacity: 1; color: black; background-color: var(--special-color); width: 20px; }

.sliderControl-wrap > .inner { padding: 0; font-size: 0; }
.sliderControl-wrap > .inner > * { display: inline-block; vertical-align: middle; }

.sliderControl-wrap .sliderCount { padding: 0 0.3rem 0 1rem; font-size: 1.4rem; line-height: 1.8rem; height: 1.8rem; }
.sliderControl-wrap .prev i:before, .sliderControl-wrap .next i:before { display: block; line-height: 1.8rem; height: 1.8rem; font-size: 1.4rem; color: var(--special-color); font-weight: 900; }
.sliderControl-wrap .play,
.sliderControl-wrap .pause { font-size: 0; padding: 0 0.5rem; }
.sliderControl-wrap .play *,
.sliderControl-wrap .pause * { font-size: 0; }
.sliderControl-wrap .play i:before,
.sliderControl-wrap .pause i:before { font-size: 1.5rem; display: block; color: var(--special-color); line-height: 1.8rem; height: 1.8rem; }



/* ------ dotList ------ */

.dotList em, .dotList-num em, .dotList-kr em, .dotList-s em { font-weight: 700; }

.dotList > li { padding-left: 1.8rem; position: relative; }
.dotList > li, .dotList li > * { line-height: 1.5; }
.dotList > li + li { margin-top: 0.5rem; }
.dotList > li:before { content:''; display: block; width: 0.6rem; height: 0.6rem; position: absolute; left: 0; top: 0.52em; background-color: var(--special-color); border-radius: 50%; }

.dotList-num { counter-reset: number 0; }
.dotList-num > li { padding-left: 2.8rem; position: relative; }
.dotList-num > li, .dotList-num li > * { line-height: 1.7; }
.dotList-num > li + li { margin-top: 0.5rem; }
.dotList-num > li:before { counter-increment: number 1; content: counter(number); display: block; width: 1.8rem; height: 1.8rem; line-height: 1.8rem; text-align: center; color: #fff; font-weight: 700; position: absolute; left: 0; top: 0.4rem; background-color: #1b55c3; border-radius: 50%; }

.dotList-kr > li:nth-child(1):before { content: '가'; }
.dotList-kr > li:nth-child(2):before { content: '나'; }
.dotList-kr > li:nth-child(3):before { content: '다'; }

.dotList-s > li { padding-left: 1.8rem; position: relative; font-size: 0.95em; }
.dotList-s > li, .dotList-s li > * { line-height: 1.5; }
.dotList-s > li + li { margin-top: 0.3rem; }
.dotList-s > li:before { content:''; display: block; width: 0.6rem; height: 0.2rem; position: absolute; left: 0; top: 1.1rem; background-color: #999; border-radius: 0.2rem; }

.dotList-info > li { padding-left: 1.8rem; position: relative; line-height: 1.6; font-size: 0.95em;  }
.dotList-info > li + li { margin-top: 0.3rem; }
.dotList-info > li:before { content:'※'; color: var(--basic-color-deep);  display: block; width: 0.6rem; height: 0.6rem; position: absolute; left: 0; top: 0; }


/* ------ basicTable-warp ------ */

.basicTable-wrap table { width: 100%; table-layout: fixed;  }
.basicTable-wrap table tr > * { padding: 1.4rem 1.5rem; line-height: 1.6; }
.basicTable-wrap table thead tr:first-child > * { border-top: 2px solid #555; }
.basicTable-wrap table thead th { background-color: #f3f6fa; color: #0f3c6e; padding: 1.5rem 0; border-bottom: 1px solid #dedede; }
.basicTable-wrap table tbody th { background-color: #f3f6fa; color: #0f3c6e; }
.basicTable-wrap tr > * { border-right: 1px solid #dedede; border-bottom: 1px solid #dedede; }
.basicTable-wrap tr > *:last-child { border-right: 0; }
.basicTable-wrap tbody td:nth-child(2) { text-align: left; }
.basicTable-wrap.alignCenter tbody td:nth-child(2) { text-align: center; }
.basicTable-wrap tr > .rightLine { border-right: 1px solid #dedede; }
.linkTable tr:hover > * { background-color: #f5fbfd; }
.linkTable tr:hover > * a { text-decoration: underline; }

.colorThead-table thead tr th { background-color: var(--basic-color); color: #fff; border-right: 1px solid var(--basic-color-brigth); border-color: var(--basic-color-brigth);  }
.colorThead-table thead tr th:last-child { border-right: 0; }

@media (max-width: 950px){
	.basicTable-wrap.xScroll-wrap table tr > * { padding: 1.4rem 0.5rem;} 
	.basicTable-wrap.xScroll-wrap table tr * { font-size: 1.5rem; }
}



/* ------ boxTitle-warp ------ */

.boxTitle-wrap { margin-bottom: 3rem; }
.boxTitle-wrap { position: relative; padding: 3rem 2rem; border: 0.7rem solid #ededed; word-break: keep-all; }
.boxTitle-wrap:before {  content: ''; position: absolute; top: -0.7rem; left: -0.7rem; width: 3rem; height: 3rem; border-top: 0.7rem solid var(--special-color-bright); border-left: 0.7rem solid var(--special-color-bright); }
.boxTitle-wrap:after {  content: ''; position: absolute; bottom: -0.7rem; right: -0.7rem; width: 3rem; height: 3rem; border-bottom: 0.7rem solid var(--special-color-deep); border-right: 0.7rem solid var(--special-color-deep); }

@media (min-width: 950px){
	.boxTitle-wrap { padding: 3rem 3rem; margin-bottom: 5rem;} 
}




/* ------ noneData ------ */

.noneData { padding: 3vw 0; text-align: center; display: block; color: #999; }
.noneData-border { border: 1px solid #dedede; border-radius: 5px; }
.noneData > * { display: block; }
.noneData i { font-size: 3rem; margin-bottom: 1rem; color: var(--basic-color); }




/* ------ docuZone ------ */

.dropzoneCustom { border: 1px dashed #ccc; border-radius: 2px; background: #fcfcfc; padding: 10px; min-height: 90px; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; }
.dropzoneCustom .dz-message { margin: 10px 0 15px; }
.dropzoneCustom .dz-message > * { display: block; }
.dropzoneCustom .dz-message i { color: var(--gray-color); font-size: 25px; margin-bottom: 10px; }
.dropzoneCustom .dz-message span { color: var(--basic-color); font-size: 0.85em; margin-top: 5px; }

.dropzoneCustom .dz-preview { margin: 4px 8px 0; width: 70px; min-height: initial; }
.dropzoneCustom .dz-preview .dz-details { padding: 0; font-size: 13px; top: 50%; transform: translateY(-50%); margin-top: -12px; }
.dropzoneCustom .dz-preview .dz-image { width: 70px; height: 70px; border: 1px solid #dedede; }
.dropzoneCustom .dz-preview .dz-image img { object-fit: cover; width: 100%; }
.dropzoneCustom .dz-preview .dz-success-mark, 
.dropzoneCustom .dz-preview .dz-error-mark  { margin-left: -27px; margin-top: -39px; height: 54px; width: 54px; }
.dropzoneCustom .dz-preview .dz-remove { font-size: 14px; line-height: 16px; display: block; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; margin-top: 8px; color: var(--red-color-deep); }
.dropzoneCustom .dz-preview .dz-details .dz-size { font-size: 13px; margin-bottom: 3px; }
.dropzoneCustom .dz-error .dz-filename, .dropzoneCustom .dz-error .dz-filename .dz-size{ display: none; }
.dropzoneCustom .dz-error-message { top: 100px; left: -45px; }