@CHARSET "UTF-8";

@font-face { 
	font-family: 'KorailRoundGothic'; src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/Korail/KorailRoundGothicBold.woff2') format('woff2');
	font-weight: 700; font-style: bold;
}

@font-face {
	font-family: 'KorailRoundGothic'; src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/Korail/KorailRoundGothicMedium.woff2') format('woff2');
	font-weight: 500; font-style: normal;
}

@font-face {
	font-family: 'KorailRoundGothic'; src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/Korail/KorailRoundGothicLight.woff2') format('woff2');
	font-weight: 300; font-style: normal;
}


:root {
	--special-font: 'KorailRoundGothic', 'Noto Sans KR', 'Apple SD Gothic Neo', helvetica, 'Malgun Gothic', '맑은 고딕',helvetica, sans-serif;
			
	--basic-color-5: 255,247,242; --basic-color-10: 255,231,217; --basic-color-20: 255,206,179; --basic-color-30: 255,182,140; --basic-color-40: 255,157,102; 
	--basic-color-45: 255,117,39; --basic-color-50: 255,92,0; --basic-color-60: 204,74,0; --basic-color-70: 153,55,0; --basic-color-80: 102,37,0; --basic-color-90: 51,18,0;
	
	--basic-gray-color-5: 252,252,253; --basic-gray-color-10: 246,247,248; --basic-gray-color-20: 238,239,240; --basic-gray-color-30: 229,231,233; --basic-gray-color-40: 221,223,225;
	--basic-gray-color-50: 198,202,205; --basic-gray-color-60: 158,162,164; --basic-gray-color-70: 119,121,123; --basic-gray-color-80: 79,81,82; --basic-gray-color-90: 40,40,41;
	
	--special-color-5: 248,244,251; --special-color-10: 233,222,242; --special-color-20: 211,188,229; --special-color-30: 188,155,216; --special-color-40: 166,122,203;
	--special-color-50: 107,33,168; --special-color-60: 86,26,134; --special-color-70: 64,20,101; --special-color-80: 43,13,67; --special-color-90: 21,7,34;
	
	--red-color-5: 255,246,247; --red-color-10: 255,228,231; --red-color-20: 255,202,207; --red-color-30: 255,175,183; --red-color-40: 255,148,158;
	--red-color-50: 255,77,94; --red-color-60: 204,62,75; --red-color-70: 153,46,56; --red-color-80: 102,31,38; --red-color-90: 51,15,19;
	
	--orange-color-5: 255,247,244; --orange-color-10: 255,231,221; --orange-color-20: 255,207,188; --orange-color-30: 255,183,154; --orange-color-40: 255,159,121;
	--orange-color-50: 255,95,31; --orange-color-60: 204,76,25; --orange-color-70: 153,57,19; --orange-color-80: 102,38,12; --orange-color-90: 51,19,6;
	
	--green-color-5: 242,252,247; --green-color-10: 217,247,230; --green-color-20: 179,238,205; --green-color-30: 141,230,180; --green-color-40: 103,221,155;
	--green-color-50: 2,199,89; --green-color-60: 2,159,71; --green-color-70: 1,119,53; --green-color-80: 1,80,36; --green-color-90: 0,40,18;
	
	--blue-color-5: 242,247,255; --blue-color-10: 217,232,255; --blue-color-20: 179,209,254; --blue-color-30: 140,186,254; --blue-color-40: 102,163,254;
	--blue-color-50: 0,101,253; --blue-color-60: 0,81,202; --blue-color-70: 0,61,152; --blue-color-80: 0,40,101; --blue-color-90: 0,20,51;
	
	--yellow-color-5: 255,253,245; --yellow-color-10: 255,250,224; --yellow-color-20: 255,245,194; --yellow-color-30: 255,240,163; --yellow-color-40: 255,235,133;
	--yellow-color-50: 255,221,51; --yellow-color-60: 204,177,41; --yellow-color-70: 153,133,31; --yellow-color-80: 102,88,20; --yellow-color-90: 51,44,10;
	
	--purple-color-5: 248,244,251; --purple-color-10: 233,222,242; --purple-color-20: 211,188,229; --purple-color-30: 188,155,216; --purple-color-40: 166,122,203;
	--purple-color-50: 107,33,168; --purple-color-60: 86,26,134; --purple-color-70: 64,20,101; --purple-color-80: 43,13,67; --purple-color-90: 21,7,34;
	
	--pink-color-5: 254,246,249; --pink-color-10: 252,228,237; --pink-color-20: 249,201,220; --pink-color-30: 246,174,202; --pink-color-40: 242,148,184;
	--pink-color-50: 234,76,137; --pink-color-60: 187,61,110; --pink-color-70: 140,46,82; --pink-color-80: 94,30,55; --pink-color-90: 47,15,27;
	
	--gray-color-5: 252,252,252; --gray-color-10: 245,246,246; --gray-color-20: 235,236,237; --gray-color-30: 225,227,228; --gray-color-40: 215,217,220;
	--gray-color-50: 189,192,196; --gray-color-60: 151,154,157; --gray-color-70: 113,115,118; --gray-color-80: 76,77,78; --gray-color-90: 38,38,39;
}
* { font-family: 'Wanted Sans Std', 'Noto Sans', 'Apple SD Gothic Neo', helvetica, 'Malgun Gothic', '맑은 고딕',helvetica, sans-serif; }


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

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

* { line-height: 150%; 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 !important; } .mT10 { margin-top: 1rem !important; } .mT15 { margin-top: 1.5rem !important; } .mT20 { margin-top: 2rem !important; } 
.mT25 { margin-top: 2.5rem !important; } .mT30 { margin-top: 3rem !important; } .mT35 { margin-top: 3.5rem !important; } .mT40 { margin-top: 4rem !important; } .mT50 { margin-top: 5rem !important; }
.mB0 { margin-bottom: 0 !important; } .mB5 { margin-bottom: 0.5rem !important; } .mB10 { margin-bottom: 1rem !important; } .mB15 { margin-bottom: 1.5rem !important; } .mB20 { margin-bottom: 2rem !important; } 
.mB25 { margin-bottom: 2.5rem !important; } .mB30 { margin-bottom: 3rem !important; } .mB35 { margin-bottom: 3.5rem !important; } .mB40 { margin-bottom: 4rem !important; } .mB50 { margin-bottom: 5rem !important; }
.pT0 { padding-top: 0 !important; } .pT5 { padding-top: 0.5rem !important; } .pT10 { padding-top: 1rem !important; } .pT15 { padding-top: 1.5rem !important; } .pT20 { padding-top: 2rem !important; } 
.pT25 { padding-top: 2.5rem !important; } .pT30 { padding-top: 3rem !important; } .pT35 { padding-top: 3.5rem !important; } .pT40 { padding-top: 4rem !important; } .pT50 { padding-top: 5rem !important; }
.pB0 { padding-bottom: 0 !important; } .pB5 { padding-bottom: 0.5rem !important; } .pB10 { padding-bottom: 1rem !important; } .pB15 { padding-bottom: 1.5rem !important; } .pB20 { padding-bottom: 2rem !important; } 
.pB25 { padding-bottom: 2.5rem !important; } .pB30 { padding-bottom: 3rem !important; } .pB35 { padding-bottom: 3.5rem !important; } .pB40 { padding-bottom: 4rem !important; } .pB50 { padding-bottom: 5rem !important; }
.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; }
/* button:focus { outline: auto; } */
body,th,td,input,select,textarea,button { -webkit-text-size-adjust:none; } 
i { font-style: normal; }
a { text-decoration:none; color: #333; cursor: pointer; }
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%; }
.fullHeight { height: 100dvh; }
.orangeText { color: #eb6100; }  .blueText { color: #4179c6; } .grayText { color: rgb(var(--gray-color-70)); }.redText { color: rgb(var(--red-color-50)); }

@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; }
.verticalCenter { display: flex; align-items: center; }
.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; margin: clamp(2rem, 4vw, 4rem) 0; height: 1px; width: 100%; }
.divisionLine-dot { border-top: 1px dashed #cecece; }

*, *: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, .initialBtn:before { border-radius: var(--padding-s); }

.hiddenTitle { font-size: 0; visibility: hidden; height: 0; overflow: hidden; }
.comingSoon-wrap { margin-top: 2rem;  padding: 0 0 3rem; border-radius: 1rem; background-color: #fff; border: 1px solid #dedede; text-align: center; }
.comingSoon{ width: 60rem; max-width: 80%; display: block; margin: 2rem auto 2rem; }


/* ------ warning ------ */

.warningText { font-size: 0.95em; }

.warningBox-wrap { 
	font-size: 1.5rem; color: #767678; padding: 1.6rem 1.7rem 1.3rem 4rem; border-radius: 0.8rem; background-color: #FFFCE3; 
	border: 1px solid rgba(132, 104, 5, 0.1); background-image: url("/style_www/img/common/icon/bulb.png"); background-repeat: no-repeat; background-size: 2.3rem auto; background-position: 1rem 1.35rem;
}
.warningBox-wrap ul { display: block; margin-top: 0.8rem; font-size: 0.92em; color: #FF5252; line-height: 1.4; }  
.warningBox-wrap ul li { padding-left: 0.7rem; position: relative; }
.warningBox-wrap ul li:before { content: ''; display: block; width: 0.2rem; height: 0.2rem; background-color: #FF5252; position: absolute; left: 0; top: 0.6em; }
.warningBox-wrap ul li + li { margin-top: 0.3rem; }
.warningBox-wrap a { color: rgb(var(--blue-color-50)); text-decoration: underline; }


@media (min-width: 980px){  .warningBox-wrap { padding: 1.7rem 1.7rem 1.4rem 4rem; background-size: 2.5rem auto; background-position: 1rem 1.2rem; } }

/* ------ 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 !important; -webkit-box-orient: vertical; }
 	.lineClamp:before { display: none !important; }
}
.clamp-2 { -webkit-line-clamp: 2; -webkit-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; -webkit-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; -webkit-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; -webkit-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; -webkit-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 { -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='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='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; line-height: 1.2; text-overflow: ellipsis; }

input:focus, textarea:focus { border-color: rgb(var(--basic-color-50)); 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 { line-height: 1.5; }
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 rgb(var(--basic-color-50));
  outline:0;
  transition:all 0.2s ease;
}
select:focus { background-image: url("/style_www/img/common/icon/select_arrow_u.png"); }

input:read-only { background-color: #f8f8f8 !important; }

select { padding-right: 3rem; background-image: url("/style_www/img/common/icon/select_arrow_d.png"); background-size: 2rem; background-repeat: no-repeat; background-position: right center; background-color: #fff; }
select:focus { background-image: url("/style_www/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: rgb(var(--blue-color-50)); background-color: rgb(var(--blue-color-50)); background-image: url("/style_www/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.2; background: #fff; border: 1px solid rgb(var(--basic-color-50));
  color: rgb(var(--basic-color-50)); border-radius: 4px; 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 rgb(var(--basic-color-50)); color: rgb(var(--basic-color-50)); 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: 1.2rem; 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.2; 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; }
@media (hover: hover) and (pointer: fine) { .initialBtn:hover::before, .initialBtn:focus::before { opacity: 1; }}
.initialBtn:foucs { outline: 0; outline: none; }
.initialBtn * { line-height: 1.2; }

.basicBtn { background-color: rgb(var(--basic-color-50)); border-color: rgb(var(--basic-color-60)); color:#fff; overflow: hidden; } 
.basicBtn:hover, .basicBtn:active, .basicBtn:focus { color: #fff !important;  background-color: rgb(var(--basic-color-70));  }
.specialBtn { background-color: rgb(var(--special-color-50)); border-color: rgb(var(--special-color-60)); color:#fff; overflow: hidden; } 
.specialBtn:hover, .specialBtn:focus { color: #fff !important;  background-color: rgb(var(--special-color-70));  }

.radiusBtn { border-radius: 10rem; }

.blueBtn { color: #fff !important; background-color: rgb(var(--blue-color-50)); border-color: rgb(var(--blue-color-70)); }
.blueBtn:hover,.blueBtn:active, .blueBtn:focus { background-color: rgb(var(--blue-color-70)); }
.greenBtn { color: #fff !important; background-color: rgb(var(--green-color-50)); border-color: rgba(0,0,0,.15); }
.greenBtn:hover,.greenBtn:active, .greenBtn:focus  { background-color: rgb(var(--green-color-60)); }
.redBtn { color: #fff !important; background-color: rgb(var(--red-color-50)); border-color: rgb(var(--red-color-70)) }
.redBtn:hover,.redBtn:active, .redBtn:focus { background-color: rgb(var(--red-color-70)); }
.yellowBtn { color: #000100 !important; background-color: rgb(var(--yellow-color-50)); border-color: rgb(var(--yellow-color-60)); }
.yellowBtn:hover,.yellowBtn:active, .yellowBtn:focus { background-color: rgb(var(--yellow-color-70)); }
.purpleBtn { color: #fff !important; background-color: rgb(var(--purple-color-50)); border-color: rgb(var(--purple-color-60)); }
.purpleBtn:hover,.purpleBtn:active, .purpleBtn:focus { background-color: rgb(var(--purple-color-70)); }
.pinkBtn { color: #fff !important; background-color: rgb(var(--pink-color-50)); border-color: rgb(var(--pink-color-60)); }
.pinkBtn:hover,.pinkBtn:active, .pinkBtn:focus { background-color: rgb(var(--pink-color-70)); }
.grayBtn { color: #fff !important; background-color: rgb(var(--gray-color-50)); border-color: rgb(var(--gray-color-60)); }
.grayBtn:hover,.grayBtn:active, .grayBtn:focus { background-color: rgb(var(--gray-color-60)); }
.lightgrayBtn { color: #333 !important; background-color: #F2F3F6; border-color: #D7D9DB; }
.lightgrayBtn:hover,.lightgrayBtn:active, .lightgrayBtn:focus{ background-color: #D7D9DB; }
.blackBtn { color: #fff !important; background-color: #222; border-color: #111; }
.blackBtn:hover,.blackBtn:active, .blackBtn:focus { background-color: #111; }
.disabledBtn { color: rgb(var(--gray-color-60)) !important; border-color: rgb(var(--gray-color-40)) !important; background-color: rgb(var(--gray-color-40)); cursor: default; }
.disabledBtn:hover { color: rgb(var(--gray-color-60)) !important; background-color: rgb(var(--gray-color-40)); }

.lineBtn { background-color: transparent; text-shadow: none; }
.lineBtn:hover, .lineBtn:focus { background-color: transparent; }

.lineBtn.basicBtn { color: rgb(var(--basic-color-50)) !important; border-color: rgb(var(--basic-color-50)) !important; }
.lineBtn.specialBtn { color: rgb(var(--special-color-50)) !important; border-color: rgb(var(--special-color-50)) !important }
.lineBtn.blueBtn { color: rgb(var(--blue-color-50)) !important; border-color: rgb(var(--blue-color-50)) !important; }
.lineBtn.greenBtn { color: rgb(var(--green-color-50)) !important; border-color: rgb(var(--green-color-50)) !important; }
.lineBtn.redBtn { color: rgb(var(--red-color-50)) !important; border-color: rgb(var(--red-color-50)) !important; }
.lineBtn.yellowBtn { color: #000100 !important; border-color: #000100 !important; }
.lineBtn.grayBtn { color: rgb(var(--gray-color-70)) !important; border-color: rgb(var(--gray-color-70)) !important; }
.lineBtn.blackBtn { color: #111 !important; }

.whiteBtn { background-color: #fff; }

.initialBtn[disabled=disabled], .initialBtn:disabled { background-color: #8990a0 !important; cursor: default !important; color: #eff6f6 !important; border-color: #8990a0 !important; }
.initialBtn[disabled=disabled]:before, .initialBtn:disabled::before { display: none !important; }

.btnGroup { display: flex; gap: 1rem; }
.btnGroup-full * { flex: 1; }
.btnGroup-center { justify-content: center; }
.btnGroup-left { justify-content: flex-start; }
.btnGroup-right { justify-content: flex-end; }


/* ------ 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; }


/* ------ flex-wrap ------ */

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

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


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

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


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

.customRadio { display: flex; }
.customRadio > .inner { position: relative; vertical-align: middle; padding-right: 1.5rem; }
.customRadio input[type="radio"] { display: none; }
.customRadio input[type="radio"]:checked + label i:before { width: 100%; height: 100%; background-size: 100% 100%; background-color: inherit; background-color: rgb(var(--basic-color-50));  }
.customRadio label { display: flex; align-items: center; cursor: pointer; }
.customRadio label i { display: block; width: 1.8rem; height: 1.8rem; border-radius: 9rem; border: 2px solid rgb(var(--basic-color-50)); 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; vertical-align: middle; padding-left: 0.5rem; }


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

.switchCheckbox { position: relative; font-size: 0; }
.switchCheckbox input[type="checkbox"] { display: none; }
.switchCheckbox input[type="checkbox"]:checked ~ label i { background-color: rgb(var(--basic-color-50)); }
.switchCheckbox input[type="checkbox"]:checked ~ label i:before { left: 100%; margin-left: -1.7rem; }
.switchCheckbox label { cursor: pointer;  display: flex; align-items: center; }
.switchCheckbox label > * { display: inline-block; }
.switchCheckbox label i { 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.6rem; vertical-align: middle; padding-left: 0.5rem; }


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

.sliderControl-wrap > .inner { display: flex; align-items: center; gap: 4px;}
.sliderControl-wrap .sliderControl { display: flex; align-items: center; }
.sliderControl-wrap .sliderControl * { font-size: 0; line-height: 1.2; }
.sliderControl-wrap .sliderControl i:before { font-size: 1.6rem; }
.sliderControl-wrap .sliderControl i.xi-angle-left:before { padding-right: 0.1em; }
.sliderControl-wrap .sliderControl i.xi-angle-right:before { padding-left: 0.1em; }
.sliderControl-wrap .sliderControl button:hover *,
.sliderControl-wrap .sliderControl button:focus * { color: rgb(var(--special-color-50)); }

.sliderControl-wrap .sliderControl .inner { padding: 0; display: flex; align-items: center; }
.sliderControl-wrap .sliderControl .sliderCount { font-size: 1.4rem; padding: 0 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.sliderControl-wrap .sliderControl .sliderCount * { font-size: 1em; }
.sliderControl-wrap .sliderControl .sliderCount em { font-size: 0.8em; }

.slick-dots	{ text-align: center; display: flex;  font-size: 0; gap: 4px; }
.slick-dots li { position: relative; 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 rgb(var(--gray-color-50)); border-radius: 1rem; opacity: 1;  }
.slick-dots li.slick-active button{ opacity: 1; color: black; background-color: rgb(var(--gray-color-50)); width: 20px; }
.slick-dots li button:hover, .slick-dots li button:focus { opacity: 1; border-color: rgb(var(--special-color-70)); background-color: rgb(var(--special-color-70));  }

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

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

.dotList > li { padding-left: 1.8rem; position: relative; text-align: left; }
.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: rgb(var(--special-color-50)); border-radius: 50%; }

.dotList-num { counter-reset: number 0; }
.dotList-num > li { padding-left: 2.8rem; position: relative; text-align: left; }
.dotList-num > li, .dotList-num li > * { line-height: 1.5; }
.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.94em; text-align: left; }
.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: rgb(var(--basic-color-70));  display: block; width: 0.6rem; height: 0.6rem; position: absolute; left: 0; top: 0; }

.dotList-icon > li {  line-height: 1.6em; display: flex; align-items: flex-start; gap: 1rem; }
.dotList-icon > li * { line-height: 1.6em; }
.dotList-icon > li + li { margin-top: 0.5rem; }



/* ------ basicTable-wrap ------ */

.basicTable-wrap table { width: 100%; table-layout: fixed; }
.basicTable-wrap table tr > * { padding: 1.2rem 1.5rem; line-height: 1.6; }
.basicTable-wrap table.alignCenter * { text-align: center !important; }
.basicTable-wrap table thead tr:first-child > * { border-top: 2px solid #555; }
.basicTable-wrap table thead th { background-color: #f3f6fa; color: #0f3c6e; padding: 1.3rem 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: rgb(var(--basic-color-50)); color: #fff; border-right: 1px solid rgb(var(--basic-color-30)); border-color: rgb(var(--basic-color-30));  }
.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-wrap ------ */

.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 rgb(var(--special-color-50)); border-left: 0.7rem solid rgb(var(--special-color-50)); }
.boxTitle-wrap:after {  content: ''; position: absolute; bottom: -0.7rem; right: -0.7rem; width: 3rem; height: 3rem; border-bottom: 0.7rem solid rgb(var(--basic-color-50)); border-right: 0.7rem solid rgb(var(--basic-color-50)); }

@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: rgb(var(--basic-color-50)); }


/* ------ 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: rgb(var(--gray-color-50)); font-size: 25px; margin-bottom: 10px; }
.dropzoneCustom .dz-message span { color: rgb(var(--basic-color-50)); 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: rgb(var(--red-color-70)); }
.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; }


/* ------ contentTitle ------ */

.contentTitle-wrap { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; margin-bottom: clamp(1rem, 2vw, 1.7rem);  }
.contentTitle-wrap .initialBtn { font-size: 1.6rem; width: 8rem; width: max-content; padding: 0.7rem 0.8rem; }

.contentTitle { font-size: 2.2rem; font-size: clamp(2.2rem, 3vw, 2.4rem); display: flex; gap: 1rem; align-items: center;  }
.contentTitle:before { content: ''; display: block; background-size: contain; }

h3.contentTitle { padding-bottom: 0rem; }
h3.contentTitle * { font-family: var(--special-font); display: inline-block; vertical-align: middle; }
h3.contentTitle span { font-weight: normal; padding-right: 0.5em; font-size: 0.8em; }
h3.contentTitle strong { font-size: 1em; color: #252525; font-weight: 500;  }
h3.contentTitle:before {  width: 1.9rem; height: 1.9rem; background: url("/style_www/img/common/icon/title_dot.png") no-repeat center; }

h4.contentTitle * { font-family: var(--special-font); display: inline-block; vertical-align: middle; font-weight: normal; }
h4.contentTitle strong { font-size: 0.9em; color: #252525; }
h4.contentTitle span { font-weight: normal; padding-right: 0.5em; font-size: 0.7em; }
h4.contentTitle:before { margin-left: 0.25rem; margin-right: 0.25rem; width: 1.4rem; height: 1.4rem; border-radius: 0.3rem; border: 0.2rem solid rgb(var(--special-color-50)); border-right-color: rgb(var(--basic-color-50)); border-bottom-color: rgb(var(--basic-color-40)); }

* ~ .contentTitle-wrap { margin-top: 2.5rem; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.contentTitle-wrap + .contentTitle-wrap { margin-top: 1.5rem; margin-top: clamp(1.5rem, 3vw, 2rem); }

/* ------ subContent-wrap ------ */

.subContent-wrap { margin-top: 2rem; margin-top: clamp(2rem, 3vw, 3rem); }
.subContent-wrap > .subContent { max-width: var(--max-width); margin-left: auto; margin-right: auto; }
.subContent-wrap > .subContent ~ .subContent { margin-top: 3rem; margin-top: clamp(3rem, 3vw, 4rem);}


/* ------ datepicker ------ */

.ui-datepicker { padding: 0; display: none; border: 0; margin-top: 0.5rem; width: calc(26.6rem + 2rem); }
.ui-widget.ui-widget-content { border: 0; border-radius: 0.5rem; overflow: hidden; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,0.3); padding-bottom: 0.5rem; }
.ui-datepicker .ui-widget-header { position: relative; padding: 1rem 0 3.6rem 0; border: 0; background: rgb(var(--basic-color-50)); color: #fff; border-radius: 0; }
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 7.5rem; height: 3.2rem; line-height: 3.2rem; background-color: rgba(0,0,0,0.15); margin: 0 0.4rem; padding: 0 1rem; border: 0; border-radius: 0.3rem; color: #fff; font-weight: bold; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; /* 화살표 없애기 */ }
.ui-datepicker select.ui-datepicker-month:hover, .ui-datepicker select.ui-datepicker-year:hover { background: rgba(0,0,0,0.3) url("/style_www/css/../img/common/icon/arrow-button.png") 100% -27px no-repeat; }
.ui-datepicker select::-ms-expand { display: none; /* 화살표 없애기 for IE10, 11*/ }
.ui-datepicker .ui-datepicker-title { line-height: 3rem; text-align: center; margin: 0px 2.3em; font-size: 1.5rem; font-weight:bold; letter-spacing:0; }
.ui-datepicker-title .ui-datepicker-year option, .ui-datepicker-title .ui-datepicker-month option { background: #fff; color: #333; }
.ui-datepicker .ui-datepicker-calendar { position: relative; width: calc(26.6rem + 2rem); margin: 0 auto; }
.ui-datepicker-calendar thead { display: block; margin-bottom: 0.8rem; }
.ui-datepicker-calendar thead tr { display: flex; justify-content: space-between; position: absolute; top: -24px; left: 0; width: 100%; }
.ui-datepicker-calendar thead th { flex: 1; display: block; padding: 0; color: #fff; font-size:11px; letter-spacing:1px; opacity: 0.6 }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 1rem; width: 3rem; height: 3rem; text-indent: -9999px; cursor: pointer }
.ui-datepicker .ui-datepicker-prev.ui-state-hover, .ui-datepicker .ui-datepicker-next.ui-state-hover { background: rgba(0,0,0,0.1); border: 0; }
.ui-datepicker .ui-datepicker-prev .ui-icon, .ui-datepicker .ui-datepicker-next .ui-icon { background-image: none; border: 1px solid #fff; width: 1.3rem; height: 1.3rem; transform: translate(-50%, -50%) rotate(45deg); transform-origin: center center; margin: 0; }
.ui-datepicker .ui-datepicker-prev { left: 5px; }
.ui-datepicker .ui-datepicker-next { right: 5px; }
.ui-datepicker .ui-datepicker-prev .ui-icon { border-width: 0 0 1px 1px; left: 60%; }
.ui-datepicker .ui-datepicker-next .ui-icon { border-width: 1px 1px 0 0; left: 40%; }

.ui-datepicker td { padding: 0.3rem; }
.ui-datepicker .ui-state-default { display: block; border: 0; border-radius: 1.6rem; width: 3.2rem; height: 3.2rem; line-height: 3.5rem; padding: 0; margin: auto; font-size: 1.5rem; text-align: center; background: #fff; font-weight: normal; color: #333; box-sizing: border-box; }
.ui-datepicker .ui-state-default.ui-state-hover { background: rgba(0,0,0,0.05); }
.ui-datepicker-today .ui-state-default { color: rgb(var(--basic-color-50)); font-weight: bold; background: #fffa90 !important; }
.ui-datepicker-current-day .ui-state-default { background: rgb(var(--basic-color-50)) !important; color: #fff; font-weight: bold; }
.ui-datepicker-buttonpane { overflow: hidden; border-top: 1px solid #eee; }
.ui-datepicker-buttonpane button[data-handler="today"] { color: rgb(var(--basic-color-50)); }

/* ie add Style */
.ui-datepicker td, .ui-datepicker th { border: 0 }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; cursor: pointer; width: auto; margin: 0.5em 0.2em 0.4em; padding: 0.2em 0.6em 0.3em; overflow: visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }
.ui-corner-all { border-radius: 3px; }
.ui-icon { display: block; width: 16px; height: 16px; }

/* mobile Responsive */
 @media screen and (max-width:480px) {
	.ui-datepicker { left: 50% !important; margin-left: -14.3rem !important; }
}


/* ------ warningModal-wrap ------ */

.warningModal-wrap .mfp-content > * { max-width: 45rem; border-radius: 1rem; text-align: center; padding: 3.5rem 2rem; }
.warningModal i { width: 4rem; height: 4rem; border-radius: 2rem; font-size: 0; text-align: center; background-color: rgb(var(--blue-color-10)); color: rgb(var(--blue-color-50)); }
.warningModal i:before { line-height: 4rem; font-size: 2rem; }
.warningModal i.xi-warning { background-color: rgb(var(--red-color-10)); color: rgb(var(--red-color-50)); }
.warningModal h3 { font-size: 1.8rem; font-weight: 500; display: block; margin-top: 2rem;}
.warningModal p { font-size: 1.6rem; line-height: 1.5; color: #999; margin-top: 0.4rem; }
.warningModal-btn { margin-top: 2rem;  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.warningModal-btn > .initialBtn { width: 8rem; }