@font-face {

    font-family:'MalgunGothic';

    src: url('images/MalgunGothic.eot');

    src: url('images/MalgunGothic.eot?#iefix') format('embedded-opentype'),

         url('images/MalgunGothic.woff') format('woff'),

         url('images/MalgunGothic.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}

/* ------------------------------------------------------------------------------------------------------------
    Common
------------------------------------------------------------------------------------------------------------ */
* { box-sizing: border-box; font-size:10px; }
body { margin:0; }
a { text-decoration:none; }
h1, h2, h3, h4, h5, h6 { margin:0; }
.noPadding { padding:0 !important; }
.noMargin { margin:0 !important; }
sup { font-size:1.0rem; color:#d3023b; }
.img-responsive { max-width:100%; }
.pc { display:block; }
.mobile { display:none; }

.memberRegStep1 { display:flex; justify-content: flex-start; align-items: center; flex-flow:column; width:100%; height:auto; padding:0rem 0rem; }
.memberRegStep1 .pageTitle { display:flex; justify-content:center; align-items: center; width:100%; height:9.0rem; padding:1.0rem 0; border-bottom: 1px solid #c4c4c4; }
.step1Body { display:flex; justify-content: flex-start; align-items: center; flex-flow:column; width:1200px; height:100%; max-width:100%; padding:1rem 1rem; margin:4.0rem 0 0; }
.step1Body img:first-child { margin:0 0 10px; }
.step1Body .copyright { font-size:1.4rem; color:#c4c4c4; margin:15.0rem 0 0; }


.memberRegStep2 { display:flex; justify-content: flex-start; align-items: center; flex-flow:column; width:100%; height:auto; padding:0rem 0rem; }
.memberRegStep2 .pageTitle { display:flex; justify-content:center; align-items: center; width:100%; height:9.0rem; padding:1.0rem 0; border-bottom: 1px solid #c4c4c4; }
.step2Body { display:flex; justify-content: center; align-items: center; flex-flow:column; width:1200px; height:100%; max-width:100%; padding:1rem 1rem 15.0rem; margin:4.0rem 0 0; }
.step2Body img:first-child { margin:0 0 10px; }
.step2Body .copyright { font-size:1.4rem; color:#c4c4c4; margin:5.0rem 0 0; }

.memberRegStep3 { display:flex; justify-content: flex-start; align-items: center; flex-flow:column; width:100%; height:auto; padding:0rem 0rem; }
.memberRegStep3 .pageTitle { display:flex; justify-content:center; align-items: center; width:100%; height:9.0rem; padding:1.0rem 0; border-bottom: 1px solid #c4c4c4; }
.step3Body { display:flex; justify-content: center; align-items: center; flex-flow:column; width:1200px; height:100%; max-width:100%; padding:1rem 1rem 4rem; margin:4.0rem 0 0; }
.step3Body .copyright { font-size:1.4rem; color:#c4c4c4; margin:5.0rem 0 0; }


.memberRegStep4 { display:flex; justify-content: flex-start; align-items: center; flex-flow:column; width:100%; height:100%; padding:0rem 0rem; }
.memberRegStep4 .pageTitle { display:flex; justify-content:center; align-items: center; width:100%; height:9.0rem; padding:1.0rem 0; border-bottom: 1px solid #c4c4c4; }

.step4Body { display:flex; justify-content: flex-start; align-items: center; flex-flow:column; width:1200px; height:100%; max-width:100%; padding:10rem 1rem; margin:4.0rem 0 0; }
.step4Body img:first-child { margin:0 0 10px; }
.step4Body .copyright { font-size:1.4rem; color:#c4c4c4; margin:5.0rem 0 0; }

@media screen and (max-width:768px){
    * { font-size:9px; }
    .pc { display:none; }
    .mobile { display:block; }
    .memberRegStep2 { height:auto; }
    .step2Body { height:auto; }
    .memberRegStep3 { height:auto; }
    .step3Body { height:auto; }
}


/* ------------------------------------------------------------------------------------------------------------
    Button
------------------------------------------------------------------------------------------------------------ */
.buttonArea { display:flex; justify-content:center; align-items: center; flex-flow: row ; width:100%; margin:4rem 0 0; }
.buttonArea a:last-child { margin:0 0 0 3.0rem; }


/* .buttonArea a:last-child { margin:1.0rem 0 0; } */
@media screen and (max-width:1200px){
    .buttonArea { width:75%; }
}

@media screen and (max-width:768px){
    .buttonArea { justify-content:flex-start; flex-flow: column wrap; width:100%; }
    .buttonArea a:last-child { margin:1.0rem 0 0 0; }
}



.btn { display: flex; justify-content: center; align-items: center; width:35%; height:3.0rem; padding:0 1.2rem; font-size:1.2rem; line-height:1.5; white-space:nowrap; box-shadow:inset 0 1px 0 rgb(255 255 255 / 15%), 0 1px 1px rgb(0 0 0 / 8%); background-image:none; border:1px solid #d9d9d9; border-radius:10px; -ms-touch-action:manipulation; touch-action:manipulation; cursor:pointer;  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; transition:background; transition-duration:0.5s; }
.btn:active, .btn.active { box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125); background-image:none; }
.btn:focus { outline:none !important; }
.btn.disabled { opacity: 0.65; box-shadow: none; cursor: not-allowed; }
.btn > i { margin-left:0; }
.btn > i[class*=" minia-icon-"], .btn > i i[class*=" entypo-icon-"], .btn > i i[class*=" cut-icon-"] { margin-top:0; }

.btnXs { height:2.0rem; padding:0 0.8rem; font-size:1.2rem; }
.btnSm { height:2.5rem; padding:0 1.0rem; font-size:1.2rem; }
.btnMd { height:3.0rem; padding:0 1.5rem; font-size:1.2rem; }
.btnLg { height:4.0rem; padding:0 2.5rem; font-size:1.2rem; }
.btnXl { height:10.0rem; padding:0 3.5rem; font-size:2.0rem; font-weight:900; }

.btn.btnInfo i { color:#ffffff; }

.btn.btnCreate { background:#d3023b; color:#fff; }
.btn.btnCreate:hover, .btn.btnCreate:focus { background-color:#d3023bc2; background-position:0 -20px; }
.btn.btnCreate:active, .btn.btnCreate.active { background-color:#d3023bc2; border-color:#dbdbdb; }

.btn.btnGenerate { background:#454545; color:#fff; }
.btn.btnGenerate:hover, .btn.btnGenerate:focus { background-color:#454545c2; background-position:0 -20px; }
.btn.btnGenerate:active, .btn.btnGenerate.active { background-color:#454545c2; border-color:#dbdbdb; }

.btn.btnPost { background:#d3023b; color:#fff; font-weight:700; }
.btn.btnPost:hover, .btn.btnPost:focus { background-color:#d3023b; background-position:0 -20px; }
.btn.btnPost:active, .btn.btnPost.active { background-color:#d3023b; border-color:#d3023b; }

.btn.btnAddoption { width:100%; background:#454545; color:#fff; margin:2.0rem 0 0; }
.btn.btnAddoption:hover, .btn.btnAddoption:focus { background-color:#454545c2; background-position:0 -20px; }
.btn.btnAddoption:active, .btn.btnAddoption.active { background-color:#454545c2; border-color:#dbdbdb; }


/* .btn.btnGenerate { background-image:linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%); background-repeat:repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0); border-color:#ccc; }
.btn.btnGenerate:hover, .btn.btnGenerate:focus { background-color:#e0e0e0; background-position:0 -20px; }
.btn.btnGenerate:active, .btn.btnGenerate.active { background-color:#e0e0e0; border-color:#dbdbdb; } */

/* ------------------------------------------------------------------------------------------------------------
    termArea
------------------------------------------------------------------------------------------------------------ */
.termArea { display:flex; justify-content:flex-start; align-items: center; flex-flow: column wrap; width:100%; margin:5rem 0 0; }
.termTitle { display:flex; justify-content:flex-start; align-items: center; flex-flow: row; width:100%; }
.termTitle h5 { font-size:1.6rem; font-weight:700; margin:0 0 1.0rem; }
.termContent { display:flex; justify-content:flex-start; align-items: center; flex-flow: row; width:100%; padding:1rem 0; margin:1.5rem 0 0; border-bottom:1px solid #d4d4d4; }
.termContent a { font-size:1.4rem; font-weight:500; }
.termContent .contentDetail { margin:0 0 0 auto; }
.termContent .contentDetail a { cursor: pointer; }
.termArea .detailArea { display:none; justify-content:flex-start; align-items: flex-start; flex-flow: row; width:100%; height:150px; padding:1rem 1rem; border-bottom:1px solid #d4d4d4; overflow-y: scroll; font-family:'맑은고딕', 'MalgunGothic' !important; font-size:13px !important; }
/* ------------------------------------------------------------------------------------------------------------
    form-checkbox
------------------------------------------------------------------------------------------------------------ */
.termArea.formArea { width:50%; display: flex; justify-content:flex-start; align-items: flex-start; flex-flow: column; }
.termArea.formArea .formItem { display: flex; justify-content:flex-start; align-items: flex-start; flex-flow: column; margin:0 0 0; }


/* input 기본 스타일 초기화 */
input { -webkit-appearance:none; -moz-appearance:none; appearance:none; border:1px solid #d9d9d9; /* width:2.0rem; height:2.0rem; */ }
/*input:disabled { cursor: not-allowed; }*/

.checkGroup { display: flex; justify-content:flex-start; align-items: flex-start; }
.checkGroup h4 { font-size:1.4rem; font-weight:500; margin:0 0 0 1rem; }
.checkGroup h4 span { font-size:1.4rem; color:#d3023b; }
.checkGroup h4.bold { font-size:1.6rem; font-weight: 900; }

.checkGroup input[type="checkbox"]{ display:none; }
.checkGroup input[type="checkbox"] + label{ position:relative; display:inline-block; width:2.0rem; height:2.0rem; border:2px solid #d9d9d9; transition: all .75s;  }
.checkGroup input[type="checkbox"] + label::after{ position:absolute; left:0.1rem; top:-0.3rem; content:'✔'; width:1.5rem; height:1.5rem; font-size:1.6rem; color:#dddddd; text-align:center; transition: all .75s; opacity: 0; }
.checkGroup input[type="checkbox"]:hover + label::after{ color:#d3023b; }
.checkGroup input[type="checkbox"]:checked + label { border-color:#d3023b; }
.checkGroup input[type="checkbox"]:checked + label::after{ color:#d3023b; opacity: 1; }
.checkGroup input[type="checkbox"]:checked + label:hover::after{ color:#d3023b; }

/* 추가된 부분 - unchecked 상태일 때의 스타일 */
.checkGroup input[type="checkbox"]:not(:checked) + label::after{ color:rgba(221,221,221,1); }
  .checkGroup input[type="checkbox"]:not(:checked) + label {
    border-color: #d9d9d9;
  }

/* underLine Center Input */
/* .regArea .underlineCenterInput .title { margin:0 0 10px; }
.regArea .underlineCenterInput label {display:block; position:relative; height:38px; border-bottom:1px solid #ccc;}
.regArea .underlineCenterInput input { font-size: 1.4rem; margin:0; }
.regArea .underlineCenterInput input:hover, .underlineCenterInput input:active, .underlineCenterInput :focus { outline:none; box-shadow:none; }
.regArea .underlineCenterInput label i {position:absolute; left:50%; right:50%; bottom:-3px; border-bottom:2px solid #d3023b; transition:all .3s;}
.regArea .underlineCenterInput label input[type="text"]:focus input { width:100%;}
.regArea .underlineCenterInput label input[type="text"]:focus + i {left:0; right:0; transition:all .3s;} */

/* ------------------------------------------------------------------------------------------------------------
    regArea
------------------------------------------------------------------------------------------------------------ */
.regArea { display:flex; justify-content:flex-start; align-items: center; flex-flow: column wrap; width:100%; }
.regTitle { display:flex; justify-content:center; align-items: center; flex-flow: row; width:100%; margin:0 0 5rem; }
.regTitle h3 { font-size:3.2rem; font-weight:900; }


.regArea.formArea { width:75%; display: flex; justify-content:center; align-items:center; flex-flow: column; }
.regArea .formItem { display: flex; justify-content:flex-start; align-items: flex-start; flex-flow: column; margin:0 0 0; width:50%; }
.regArea .formGroup { position:relative; width:100%; margin:1.5rem 0 0; }

.regArea .formControl { width:100%; height:4.0rem; font-size:1.4rem; padding:0.6rem 1rem; border-radius:5px; }
.regArea .formControl:hover, .regArea .formControl:active, .regArea .formControl:focus { outline:none; box-shadow:0px 0px 3px 1px #d3023bc7; }

.regArea .formGroup label { font-size: 1.4rem; font-weight:700; }
.regArea .formGroup label span { font-size: 1.4rem; color:#d3023b; }
.regArea .formGroup span b { font-size:1.4rem; font-weight:900; }

/*input:disabled { cursor: not-allowed; }*/
.regArea .formGroup input { font-size: 1.4rem; margin:1rem 0 0; }
.regArea .formGroup input::placeholder { font-size: 1.2rem; } 

.regArea .formGroup.withOver .formControl { padding:0.6rem 8rem 0.6rem 1rem; }
.regArea .formGroup.withOver a { cursor:pointer; }
.regArea .formGroup.withOver a:hover .overBTn { background:#d3023b; }
.regArea .formGroup.withOver .overBTn { position:absolute; bottom:0; right:0; display: flex; justify-content:center; align-items:center; width:25%; height:4.0rem; background:#d3023b; font-size:1.2rem; font-weight:900; color:#fff; z-index:8000; border-radius:0 5px 5px 0; }
.regArea .formItem .formExplain { font-size:1.1rem; font-weight:500; color:#c4c4c4; }
.regArea .formItem .formExplain span { font-size:1.1rem; color:#d3023b; }

.regArea .formGroup .divide2 { display: flex; justify-content:space-between; align-items:center; }  
.regArea .formGroup .divide2 .formControl { width:38%; height:4.0rem; font-size:1.4rem; padding:0.6rem 8rem 0.6rem 1rem; }
.regArea .formGroup .divide2 .formControl:last-child { width:60%; }
.regArea .formGroup .divide2 .formControl.sponsor:last-child { width:64%; }

.regArea .formGroup .divide3 { display: flex; justify-content:space-between; align-items:center; }  
.regArea .formGroup .divide3 .formControl { width:32%; height:4.0rem; font-size:1.4rem; padding:0.6rem 1rem; }
.regArea .formGroup .divide3 .formControl::placeholder { text-align:right; }

.regArea input::-webkit-outer-spin-button, .regArea input::-webkit-inner-spin-button { -webkit-appearance: none; }
.regArea input[type=number] { -moz-appearance: textfield; }

/* ------------------------------------------------------------------------------------------------------------
    form-radio
------------------------------------------------------------------------------------------------------------ */
.regArea .formItem .labelOption { display: flex; justify-content:flex-start; align-items: center; flex-flow: row; margin:0 0 0; width:100%; }
.regArea .formItem .labelOption .radioGroup { display: flex; justify-content:flex-start; align-items: flex-start; flex-flow: column; margin:0 0 0 1rem; }
.regArea .formItem .labelOption .radioGroup label { font-size: 1.4rem; }
.regArea .formItem .labelOption .radioGroup input[type="radio"]{ display: none; }
.regArea .formItem .labelOption .radioGroup input[type="radio"] + label{ position: relative; display: inline-block; padding-left:2rem; cursor: pointer; line-height:14px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.regArea .formItem .labelOption .radioGroup input[type="radio"] + label:before, .regArea .formItem .labelOption .radioGroup input[type="radio"] + label:after{ content: ''; position: absolute; top: 0; left: 0; width:1.5rem; height:1.5rem; text-align: center; color: #fff; border-radius: 50%; -webkit-transition: all .3s ease; transition: all .3s ease; }
.regArea .formItem .labelOption .radioGroup input[type="radio"] + label:before { -webkit-transition: all .3s ease; transition: all .3s ease; box-shadow: inset 0 0 0 0.1em #d9d9d9, inset 0 0 0 1em #fff; }
.regArea .formItem .labelOption .radioGroup input[type="radio"] + label:hover:before { -webkit-transition: all .3s ease; transition: all .3s ease; box-shadow: inset 0 0 0 0.3em #fff, inset 0 0 0 1em #d3023b; }
.regArea .formItem .labelOption .radioGroup input[type="radio"]:checked + label:before { -webkit-transition: all .3s ease; transition: all .3s ease; box-shadow: inset 0 0 0 0.2em white, inset 0 0 0 1em #d3023b; border:1px solid #d3023b; }
.regArea .formItem .labelOption .radioGroup input[type="radio"]:disabled + label:before { -webkit-transition: all .3s ease; transition: all .3s ease; box-shadow: inset 0 0 0 0.2em white, inset 0 0 0 1em #c4c4c4; border:1px solid #c4c4c4; }

/* ------------------------------------------------------------------------------------------------------------
    selectBox
------------------------------------------------------------------------------------------------------------ */
.selectBox { display: flex; width:100%; flex-direction: column; position: relative; margin:1.0rem 0 0; }
.selectBox .options-container { max-height: 0; width:100%; opacity: 0; transition: all 0.4s; overflow: hidden; border-radius: 5px; border: solid 1px #dcdfe5; background-color: #ffffff; order: 1; position: absolute; top:0; }
.selected { display: flex; justify-content: center; align-items: center; flex-flow:column; position: relative; width:100%; height:4.0rem; padding:0 1.2rem; margin:0 0 0; background: #fff; border-radius: 5px; border: solid 1px #dcdfe5; order: 0; }
.selected::after { content: ''; width: 7px; height: 7px; position: absolute; top:1.5rem; right: 1.5rem; border-top: 2px solid #d9d9d9; border-left: 2px solid #d9d9d9; transform: rotate(225deg); transition: all 1s; }
.selected .selectedTxt { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column; width:100%; }
.selected h3, .selectBox label h3 { font-size: 1.4rem; font-weight: 400; line-height: 1.57; color: #1f2949; width:100%;   }
.selectBox .options-container.active { position:relative; max-height:150px; opacity: 1; overflow-y: scroll; }
.selectBox .options-container.active + .selected::after { transform: rotate(45deg); transition: all 1s; }
.selectBox .options-container::-webkit-scrollbar { width: 8px; background: #0d141f; background: #81878f; background: #f1f2f3; border-radius: 0 5px 5px 0; }
.selectBox .options-container::-webkit-scrollbar-thumb { background: #525861; background: #81878f; border-radius: 0 5px 5px 0; }
.selectBox .option { padding:0 1.2rem; cursor: pointer; }
.selectBox .option:hover { background: #dcdfe5; }
.selectBox label { display: flex; justify-content: center; align-items: center; flex-flow:column; position: relative; width:100%; height:3.0rem; cursor: pointer; }
.selectBox .option .radio { display: none; }

.regArea .formGroup .divide2 .selectBox { display: flex; width:34%; flex-direction: column; position: relative; margin:1.0rem 0 0; }
.regArea .formGroup .divide2 .selectBox .options-container { max-height: 0; width:100%; opacity: 0; transition: all 0.4s; overflow: hidden; border-radius: 5px; border: solid 1px #dcdfe5; background-color: #ffffff; order: 1; position: absolute; top:4.0rem; }
.regArea .formGroup .divide2 .selected { display: flex; justify-content: center; align-items: center; flex-flow:column; position: relative; width:100%; height:4.0rem; padding:0 1.2rem; margin:0 0 0; background: #fff; border-radius: 5px; border: solid 1px #dcdfe5; order: 0; }
.regArea .formGroup .divide2 .selected::after { content: ''; width: 7px; height: 7px; position: absolute; top:1.5rem; right: 1.5rem; border-top: 2px solid #d9d9d9; border-left: 2px solid #d9d9d9; transform: rotate(225deg); transition: all 1s; }
.regArea .formGroup .divide2 .selected .selectedTxt { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column; width:100%; }
.regArea .formGroup .divide2 .selected h3, .regArea .formGroup .divide2 .selectBox label h3 { font-size: 1.4rem; font-weight: 400; line-height: 1.57; color: #1f2949; width:100%;   }
.regArea .formGroup .divide2 .selectBox .options-container.active { z-index:9999; max-height:120px; opacity: 1; overflow-y: scroll; }
.regArea .formGroup .divide2 .selectBox .options-container.active + .selected::after { transform: rotate(45deg); transition: all 1s; }
.regArea .formGroup .divide2 .selectBox .options-container::-webkit-scrollbar { width: 8px; background: #0d141f; background: #81878f; background: #f1f2f3; border-radius: 0 5px 5px 0; }
.regArea .formGroup .divide2 .selectBox .options-container::-webkit-scrollbar-thumb { background: #525861; background: #81878f; border-radius: 0 5px 5px 0; }
.regArea .formGroup .divide2 .selectBox .option { padding:0 1.2rem; cursor: pointer; }
.regArea .formGroup .divide2 .selectBox .option:hover { background: #dcdfe5; }
.regArea .formGroup .divide2 .selectBox label { display: flex; justify-content: center; align-items: center; flex-flow:column; position: relative; width:100%; height:3.0rem; cursor: pointer; }
.regArea .formGroup .divide2 .selectBox .option .radio { display: none; }

.regArea .formGroup .divide3 .selectBox { display: flex; width:32%; flex-direction: column; position: relative; margin:1.0rem 0 0; }
.regArea .formGroup .divide3 .selectBox .options-container { max-height: 0; width:100%; opacity: 0; transition: all 0.4s; overflow: hidden; border-radius: 5px; border: solid 1px #dcdfe5; background-color: #ffffff; order: 1; position: absolute; top:4.0rem; }
.regArea .formGroup .divide3 .selected { display: flex; justify-content: center; align-items: center; flex-flow:column; position: relative; width:100%; height:4.0rem; padding:0 1.2rem; margin:0 0 1rem; background: #fff; border-radius: 5px; border: solid 1px #dcdfe5; order: 0; }
.regArea .formGroup .divide3 .selected::after { content: ''; width: 7px; height: 7px; position: absolute; top:1.5rem; right: 1.5rem; border-top: 2px solid #d9d9d9; border-left: 2px solid #d9d9d9; transform: rotate(225deg); transition: all 1s; }
.regArea .formGroup .divide3 .selected .selectedTxt { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column; width:100%; }
.regArea .formGroup .divide3 .selected h3, .regArea .formGroup .divide3 .selectBox label h3 { font-size: 1.4rem; font-weight: 400; line-height: 1.57; color: #1f2949; width:100%;   }
.regArea .formGroup .divide3 .selectBox .options-container.active { z-index:9999; max-height:120px; opacity: 1; overflow-y: scroll; }
.regArea .formGroup .divide3 .selectBox .options-container.active + .selected::after { transform: rotate(45deg); transition: all 1s; }
.regArea .formGroup .divide3 .selectBox .options-container::-webkit-scrollbar { width: 8px; background: #0d141f; background: #81878f; background: #f1f2f3; border-radius: 0 5px 5px 0; }
.regArea .formGroup .divide3 .selectBox .options-container::-webkit-scrollbar-thumb { background: #525861; background: #81878f; border-radius: 0 5px 5px 0; }
.regArea .formGroup .divide3 .selectBox .option { padding:0 1.2rem; cursor: pointer; }
.regArea .formGroup .divide3 .selectBox .option:hover { background: #dcdfe5; }
.regArea .formGroup .divide3 .selectBox label { display: flex; justify-content: center; align-items: center; flex-flow:column; position: relative; width:100%; height:3.0rem; cursor: pointer; }
.regArea .formGroup .divide3 .selectBox .option .radio { display: none; }

.regArea .formGroup .addSearch { display: flex; justify-content:flex-start; align-items:center; } 
.regArea .formGroup .addSearch .formControl { width:65%; }
.regArea .formGroup .addSearch .btn.btnPost { width:30%; margin:1.0rem 0 0 auto; }

.regArea .extraInfo { width:100%; }
.regArea .extraContent { display:none; width:50%; }
.regArea .extraContent .formItem { width:100%; }


.memberRegStep2 .buttonArea .btn.disabled { background:#c4c4c4; }

.memberRegStep3 .buttonArea { display:flex; justify-content:flex-start; align-items: center; flex-flow: column wrap; width:100%; margin:5rem 0 0; }
.memberRegStep3 .buttonArea .btn { width:25%; }
.memberRegStep3 .buttonArea .btn.disabled { background:#c4c4c4; }
.memberRegStep3 .buttonArea .btnXl { height: 6.0rem; padding: 0 3.5rem; font-size: 2.0rem; font-weight: 900; }


/* ------------------------------------------------------------------------------------------------------------
    Modal
------------------------------------------------------------------------------------------------------------ */
.modal { display:none; position: fixed; top:0; right:0; flex-direction: column; align-items: center; justify-content: center; width:100%; height:100%; background:rgb(0, 0, 0, 0.6); transition: all 1s ease-in-out; z-index:8887; }
.modalContent { width:25%; height:50vh; background: #fff; color:#545454; }
.modalHeader { display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px solid #d9d9d9; padding:1.5rem; }
.modalHeader .title { font-size:1.6rem; font-weight:700; }
.modalClose { color: red; text-decoration: none; font-size:2.8rem; font-weight: 300; }
.modalClose:hover, .modalClose:focus { text-decoration: none; cursor: pointer; }
.modalBody { display: flex; justify-content:flex-start; align-items:center; flex-flow:column; padding:1.5rem; }

.modalBody .formItem { display: flex; justify-content:flex-start; align-items: flex-start; flex-flow: column; margin:0 0 0; width:100%; }
.modalBody .formGroup { position:relative; width:100%; margin:1.5rem 0 0; }
.modalBody .searchBox { position:relative; }
.modalBody .searchBox img { position:absolute; top:6px; right:6px; }
.modalBody .formControl { width:100%; height:4.0rem; font-size:1.4rem; padding:0.6rem 1rem; border-radius:5px; }
.modalBody .formControl:hover, .regArea .formControl:active, .regArea .formControl:focus { outline:none; box-shadow:0px 0px 3px 1px #d3023bc7; }

.modalBody .searchList { display: flex; justify-content:flex-start; align-items:flex-start; flex-flow:column; width:100%; height:240px; overflow-y: scroll; margin:1.0rem 0 0; border-radius:5px; border:1px solid #c4c4c4; }
.modalBody .listItem { display: flex; justify-content:flex-start; align-items:center; width:100%; height:4.0rem; padding:0 1rem; border-bottom:1px solid #c4c4c4; }
.modalBody .listItem h5 { font-size:1.4rem; font-weight:500; }

.modalBody .listItem:hover { border:1px solid #d3023b;}
.modalBody .listItem:hover h5 { font-size:1.4rem; font-weight:700; }


.modalBody .reSearch { display: flex; justify-content:center; align-items:center; width:100%; font-size:1.8rem; font-weight:900; margin:10.0rem 0 0; cursor: pointer; }

@media screen and (max-width:1900px){
    .modalContent { width:37%; }
}
@media screen and (max-width:1200px){
    .memberRegStep { padding:0rem 0rem; }
    .btn { width:50%; }
    .regArea.formArea { width:75%; }
    .regArea .formItem { width:75%; }
    .memberRegStep3 .buttonArea .btn { width:57%; }
    .regArea .extraContent { display:none; width:75%; }
    .modalContent { width:54%; }
}
@media screen and (max-width:993px){
    .btn { width:50%; }
    .termArea.formArea { width:75%; }
    
}
@media screen and (max-width:768px){
    .btn { width:75%; }
    .btnXl { height:7.5rem; font-size:1.6rem; }
    .termArea.formArea { width:90%; }
    .regArea.formArea { width:100%; }
    .regArea .formItem { width:100%; }
    .memberRegStep3 .buttonArea .btn { width:100%; }
    .regArea .extraContent { display:none; width:100%; }
    .modalContent { width:90%; height:80vh; }
}
@media screen and (max-width:414px){
    .regTitle h3 { font-size:2.7rem; }
    .memberRegStep3 .buttonArea { margin:0 0 0; }
}