@charset "utf-8";

/************************************** 버튼 **************************************/


/* 버튼 스타일 */
.btn-wrap {position: relative; text-align: center;}
.btn-wrap:after { content: ''; display: block; clear: both; }
.btn-wrap.inline { display: inline-block; }
.btn-wrap.mg-t20 { margin-top: 20px;}
.btn-wrap.inline button { float: none; }
.btn-wrap .btn-right {float:right;}
.btn-wrap .btn-left {float:left;}
.btn-wrap .btn-center {display: inline-block; float:none }
.btn-wrap button { text-align: center; margin-right: 5px; font-weight: 300; border:0; background:#aeaeae; color:#fff; height: 40px;padding:0 20px; min-width: 100px; font-size: 1.4rem; -webkit-transition: background .3s, color .3s; -o-transition: background .3s,color .3s;transition: background .3s, color .3s; cursor: pointer; float: left; border-radius: 10px;}
.btn-wrap button:last-child {margin-right:0; display: flex; align-items: center;}
.btn-wrap button.small-btn {padding: 3px 15px; height: 25px; min-width: 90px; font-size: 1.2rem; font-weight: 500; border-radius: 20px; line-height: 20px;}

/* 버튼 색상 */
.btn-wrap button.white-btn {background:#fff; border: 1px solid #7C7C7C; color:#7C7C7C;}
.btn-wrap button.white-btn:hover {background:#F9F9F9;}
.btn-wrap button.gray-btn {background: #a5a5a5; color: white}
.btn-wrap button.gray-btn:hover {background: #949494}
.btn-wrap button.blue-btn {background:#417AE8;}
.btn-wrap button.blue-btn:hover {background:#2C65D2}
.btn-wrap button.yellow-btn {background: #FFB900}
.btn-wrap button.yellow-btn:hover {background: #FFA900}
.btn-wrap button.red-btn {background: #ff4a4a}
.btn-wrap button.red-btn:hover {background: #F13333}
.btn-wrap button.theme-btn {background:#13a6b2}
.btn-wrap button.theme-btn:hover {background:#00b2c1}
.btn-wrap button.green-btn {background:#3CA54E}
.btn-wrap button.green-btn:hover {background:#2a7c38}


@media all and (max-width: 572px) {
	.btn-wrap button { padding: 0 16px; font-size: 14px;	}
	.btn-wrap button .export { display: none; }
}


/************************************** 테이블 **************************************/


/* 기본 테이블 */
table.normal-table { width: 100%; table-layout: fixed;  margin-bottom:10px}
table.normal-table tr { border-bottom: 1px solid #d5d5d5 }
table.normal-table tr:not(thead tr):hover {background-color: #f9f9f9}
table.normal-table tr th { font-size: 1.5rem; font-weight: 600; height: 55px; word-break: break-all; color: #3e3e3e;;text-align: center; border-top: 1px solid #222}
table.normal-table tr td { padding:10px 5px; font-size: 1.5rem; height: 40px; word-break: break-all; color: #7e7e7e; line-height: 20px; text-align: center}

@media(max-width: 572px) {
	table.normal-table tr td { font-size: 1.3rem; padding: 10px; }
	table.normal-table tr th { font-size: 1.3rem; padding: 10px; }
}

/* 버티컬 테이블 */
table.vertic-table { table-layout: fixed; width: 100%; border-bottom: 1px solid #d5d5d5; border-right:0; border-top:1px solid #7e7e7e }
table.vertic-table tr {border-bottom: 1px solid #d5d5d5;}
table.vertic-table tr th { width:140px; padding:15px 5px; text-align: center; font-size: 1.5rem; word-break: keep-all; border-bottom: 1px solid #d5d5d5; color: #3e3e3e;  font-weight: 600;}
table.vertic-table tr td { padding:15px 15px 15px 60px; font-size: 1.5rem; height: 35px; word-break: keep-all; color: #7e7e7e }

@media all and (max-width: 768px) {
	table.vertic-table tr td .file-input { width: calc(100% - 57px); }
	table.vertic-table tr td .file-row .add-wrap { margin-left: 4px; }
	table.vertic-table tr td .add-wrap { width: 50px; }
	table.vertic-table tr td .file-input > .button { width: 60px; }
}
@media all and (max-width: 572px) {
	table.vertic-table tr td { font-size: 1.3rem; padding: 10px; }
	table.vertic-table tr th { font-size: 1.3rem; padding: 10px; width: 85px; }
	table.vertic-table tr td input[type="text"].text-input { width: 100%; }
	table.vertic-table tr td.num input[type="text"].text-input { width: 30%; }
}


/************************************** 인풋, 셀렉트박스, 첨부파일 **************************************/


/* 핸드폰 인증 UI */
.contact-wrap .select-box.contact {width: 100px; margin-right: 5px; margin-bottom:5px; float:left}
.contact-wrap .input-box.contact {float: left; margin-right:5px; }
.contact-wrap .input-box.authorize {float: left; margin-right: 5px; width:310px; }
.contact-wrap .input-box.authorize input[type="text"].text-input {width:100%}
.contact-wrap .input-box.contact input[type="text"].text-input {width: 100px}
.contact-wrap .btn-wrap { float: left; }
.authorize-wrap {margin-top:5px;}
.phone-wrap .phone-btn {float: left;}
.contact-wrap .send-second-wrap {float:left; padding-left:5px}
.contact-wrap .send-second-wrap .send-second {font-size:1.2rem; padding-top:5px; color:#7c94c2}
.contact-wrap .authorize-txt { clear: both;}
.contact-wrap .authorize-txt p {color: #ed6c5f;font-weight: 600; line-height: 20px; padding-top: 5px; font-size: 1.4rem;}
.contact-wrap .authorize-txt .success {color: #4e8cd7;}
.contact-wrap .btn-wrap button {height:30px; font-size:1.2rem;}

@media (max-width: 800px) {
	.select-box {width: 100%;}
	.contact-wrap .input-box.authorize {width: calc(100% - 210px)}
	.contact-wrap .input-box.contact {width:  calc(50% - 121px)}
	.contact-wrap .input-box.contact input[type="text"].text-input {width: 100%}
}
@media (max-width: 768px) {
	.select-box { width: 100%; }
	.contact-wrap .select-box.contact {width: 65px}
	.contact-wrap .input-box.contact {width:  calc(50% - 90px)}
	.contact-wrap .select-box.contact select {font-size: 1.2rem}
	.contact-wrap .input-box.contact input[type="text"].text-input {font-size: 1.2rem}
}

@media(max-width: 500px) {
	.contact-wrap .input-box.contact {width:  calc(50% - 38px); margin-bottom: 5px}
	.contact-wrap .input-box.contact.last-input {margin-right: 0}
	.contact-wrap .input-box.authorize {width: 100%; margin-bottom: 5px;}
	.contact-wrap .btn-wrap { top: 0; width: 100%; }
	.contact-wrap .btn-wrap button {width: 100%; margin-bottom: 5px}
	.contact-wrap .btn-wrap.authorize-btn button {width:  calc(50% - 3px); min-width: inherit; padding: 0;}
	.contact-wrap .send-second-wrap{float:none; width:100%; text-align: center; padding-bottom:5px}
}


/* 셀렉트박스 */
.select-box { position: relative; height: 30px; width: 300px;}
.select-box select { display: inline-block; border: 1px solid #d5d5d5; border-radius: 5px; width: 100%; height: 100%; padding: 0 10px; background: url(../../img/common/select_arrow.png) 95%; background-repeat: no-repeat; -webkit-background-size: 7px 5px; background-size: 7px 5px; padding-right: 30px; color: #4C4C4C;background-color: #fff; font-size: 1.2rem;}
.select-box select:hover {box-shadow: 0 0 0 3px #d7e4fa; border-color: #adc4ee; }

/* 서브탭 버튼 */
.sub-tab .active { background: #3CA54E; border: 1px solid #3CA54E;}
.sub-tab .active a { color: #ffffff;}
.sub-tab { display: flex; width: 100%;}
.sub-tab a { word-break: keep-all; display: block; padding: 12px 12px;}
.tab-wrap { padding-top: 50px;}
.fromleft { clear: both; margin-left: 0px; font-size: 16px; width: 100%;  color: #333; text-align: center; background-color: #ffffff; border: 1px solid #ddd;}


@media all and (max-width: 1200px) {
	.sub-tab { width: 100%;}
}


@media all and (max-width: 768px) {
.content-wrap { width: 100%; padding-top: 30px;}
.sub-tab { width: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: 30px;}
}




/* 인풋 텍스트 */
input[type="text"].text-input { height: 30px; width: 600px; display: inline-block; font-size: 1.3rem; padding:0 10px; border: 1px solid #d5d5d5; color: #333; border-radius: 5px;}
input[type="text"].text-input:hover { box-shadow: 0 0 0 3px #d7e4fa; border-color: #adc4ee; }
input[type="text"].text-input::placeholder {font-size: 1.2rem;}

/* 인풋 패스워드 */
input[type="password"].text-input { height: 30px; width: 600px; display: inline-block; font-size: 1.3rem; padding:0 10px; border: 1px solid #d5d5d5; color: #333; border-radius: 5px;}
input[type="password"].text-input:hover {box-shadow: 0 0 0 3px #d7e4fa; border-color: #adc4ee; }

/* textarea */
.text-area-wrap {position: relative;}
textarea {width: 100%; resize: none; padding:10px; font-size: 1.3rem; min-height: 200px; border:1px solid #d5d5d5; border-radius: 5px; position: relative;}
textarea:hover {box-shadow: 0 0 0 3px #d7e4fa; border-color: #adc4ee; }
.text-area-wrap .text-limit-wrap { position: absolute; z-index: 2; bottom: 6px; right: 20px; color: #999; cursor: default; display: inline-block; background: #fff; }
.text-area-wrap .text-limit-wrap span { font-family: 'Arial','dotum'; font-size: 1.1rem; }
.text-area-wrap .text-limit-wrap span.excess { color: #F05050; font-weight: bold; }
.text-area-wrap .text-limit-wrap span.unit { font-size: 11px; margin-left: 2px; }


/************************************** width size **************************************/
.width-full { width: 100% !important; }
.width-600 { width: 600px !important; }
.width-300 { width: 300px !important; }
.width-200 { width: 200px !important; }
.width-100 { width: 100px !important; }
.width-60 { width: 60px !important; }


/* 첨부파일 */

.added-file { display: inline-block; cursor: pointer; background: #fbfbfb; height: 28px; line-height: 24px; padding: 0 10px; border-radius: 5px; border: 1px solid #f5f5f5; margin-right: 10px; box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2); font-size: 1.3rem; color: #7f7f7f; margin-bottom:5px}
.added-file:last-of-type { margin-right: 0; }
.added-file:hover {background: #efefef}
.added-file span.material-icons { margin-right: 5px; opacity: 0.7; font-size:1.8rem; }

@media(max-width: 768px) {
	.added-file {font-size: 1.3rem}
}

@media(max-width: 500px) {
	.added-file {font-size: 1.2rem}
	.added-file img {width: 10px; height: 12px;}
}

/* 파일 커스텀 */
.file-input { display: inline-block; text-align: left; width: calc(100% - 70px); position: relative; padding-left: 10px; font-size: 1.2rem; line-height: 35px; vertical-align: middle; background-color: #fff; cursor: pointer; border: 1px solid #e1e1e1; font-weight: 400; border-radius: 5px;}
.file-input > input[type='file'] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 301; cursor: pointer; }
.file-input > .button { display: inline-block; padding: 0; font-size: 1.2rem; vertical-align: top; background-color: #1f1f1f; cursor: pointer; border: 1px solid #1f1f1f; border-bottom-color: #1f1f1f; border-radius: 5px; font-weight: 400; color: #fff; height: 37px; border-top-left-radius: 0; border-bottom-left-radius: 0; position: absolute; z-index: 2; top: -1px; right: -1px; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; width: 70px; text-align: center; line-height: 35px; }
.file-input:hover > .button { background: #000; color: #fff; border-color: #000; }
.file-input > .label { color: #333; white-space: nowrap; opacity: .5; vertical-align: top; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding-right: 55px; display: block;}
.file-row:not(:first-child) { margin: 5px 0 0; }

/* 파일 추가 제거 버튼  */
.file-row .add-wrap { display: inline-block; margin-left: 10px; position: relative; }
.file-row .add-wrap button { border-style: none; background: transparent; width: 20px; height: 20px; margin-right: 3px; }
.file-row .add-wrap button img {opacity: .4; cursor: pointer; width:20px; height:20px}
.file-row .add-wrap button:hover img {opacity: .5;}

/* 날짜 선택 */
.date-wrap {float: left; margin-right: 5px}
.date-wrap:last-child {margin-right: 0}
.date-select {display: inline-block; position: relative;}
.normal-txt-input {height: 28px; border: 1px solid #d5d5d5; border-radius: 5px; outline: 0; font-size: 12px; transition: border-color .2s ease, box-shadow .2s ease; padding: 0 30px 0 10px; line-height: 26px; font-weight: 300;  color: #2d2d2d;}
.date-select .calendar-btn { position: absolute; display: block; width: 14px; height: 20px; top: 7px; right: 4%; opacity: 0.5; z-index: 1; transition: opacity .2s ease;}


/************************************** 체크박스, 라디오 버튼 **************************************/


/* 체크박스 */
.check-input-box {display: inline-block}
input[type=checkbox]:not(old) { margin:0; padding:0; background:url("../../img/common/check_box_off.png") no-repeat 0 0; opacity:0; width: 0} 
input[type=checkbox]:not(old) + label { display: inline-block; text-align: left; padding-left: 20px; background: url("../../img/common/check_box_off.png") no-repeat 0 0;vertical-align: top;position: relative; top:0;  line-height:16px;margin-right: 10px; color: #000;font-size: 1.4rem}
input[type=checkbox]:not(old):checked + label { background: url("../../img/common/check_box_on.png") no-repeat 0 0;  top:0; margin-right: 10px;font-size: 1.4rem}

/* 라디오 */
.radio-input-box {display: inline-block}
input[type=radio]:not(old) { margin:0; padding:0; opacity:0; background:url("../../img/common/radio_box_off.png") no-repeat 0 3px; width:0; } 
input[type=radio]:not(old) + label {text-align: left; padding-left: 20px; background: url("../../img/common/radio_box_off.png") no-repeat 0 3px;  vertical-align: middle ;position: relative; top:0; line-height:15px; margin-right: 10px; color: #000;width: 15px; font-size: 1.4rem}
input[type=radio]:not(old):checked + label { background: url("../../img/common/radio_box_on.png") no-repeat 0 3px;  }



/************************************** 팝업 CSS **************************************/


.popup-wrap {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index:5}
.popup-wrap .popup {position: absolute; top: 50%; left: 50%; width: 800px; height: 50vh; background-color: #fff; transform: translate(-50%,-50%); border-radius: 30px 0 30px 0; box-shadow: 0px 10px 20px rgba(0,0,0,0.2); overflow:hidden; }
.popup-wrap .popup .modal-title-area {padding: 15px 30px; font-size: 1.7rem; font-weight: 600;
    border-bottom: 1px solid #d5d5d5; position: relative;}
.popup-wrap .popup .modal-title-area .close-btn { position: absolute; right:20px; top: 17px; cursor: pointer}
.popup-wrap .popup .modal-title-area .close-btn:hover {opacity: 0.8}
.popup-wrap .popup .modal-title-area .close-btn img {width: 22px; height: 22px; opacity: 0.5}

.popup-wrap .popup .modal-text-area {overflow-y: auto; height: calc(100% - 50px); padding:30px;}
.popup-wrap .popup .modal-text-area iframe {height: calc(100% - 5px); width:100%} 
/* .popup-wrap .popup .modal-text-area video {height: calc(100% - 5px); width:100%} */

@media(max-width:1200px) {
	.popup-wrap .popup {width: calc(100% - 120px); height:60vh;}
}

@media(max-width: 768px) {
	.popup-wrap .popup {height:44vh; width: calc(100% - 60px)}
	.popup-wrap .popup .modal-text-area { padding: 15px; }
	.popup-wrap .popup .modal-title-area {font-size: 1.6rem;padding: 15px;}
	.popup-wrap .popup .modal-title-area .close-btn {top: 14px; right: 15px;}
}

@media(max-width: 500px) {
	.popup-wrap .popup {height:30vh; width:calc(100% - 40px)}
	.popup-wrap .popup .modal-title-area {font-size: 1.5rem;}
	.popup-wrap .popup .modal-title-area .close-btn {top: 13px}
}