@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.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 {margin-right: 5px; font-weight: 500; border:0; background:#aeaeae; color:#fff; height: 35px;padding:0 15px; min-width: 100px; font-size: 1.3rem; font-weight: 400; -webkit-transition: background .3s; -o-transition: background .3s;transition: background .3s; cursor: pointer; float: left; border-radius: 5px; line-height: 35px}
.btn-wrap button:last-child {margin-right:0;}
.btn-wrap button.small-btn {background: #aeaeae; color: #fff; padding: 3px 15px; height: 25px; min-width: 90px; font-size: 1.2rem; font-weight: 500; border-radius: 20px; transition: background .2s, color .2s; 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:#4e8cd7;}
.btn-wrap button.blue-btn:hover {background:#166BD3}
.btn-wrap button.deep-blue-btn {background: #005ed0}
.btn-wrap button.deep-blue-btn:hover {background: #0057C1}
.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.white-border-btn { background: rgba(255,255,255,0.0); border: 1px solid #c1c1c1; color:#c1c1c1; }
.btn-wrap button.white-border-btn:hover { background: rgba(255,255,255,0.1); border: 1px solid #fff; color:#fff;}
.btn-wrap button.pink-btn {background: #c211a1}
.btn-wrap button.pink-btn:hover {background: #A9088B}



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


/* 기본 테이블 */
table.normal-table { width: 100%; table-layout: fixed;  margin-bottom:10px}
table.normal-table tr { border-bottom: 1px solid #e5e5e5 }
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}


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



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


/* 셀렉트박스 */
.select-box { width: 100%; height:35px; position: relative; display: inline-block; float: left;}
.select-box select {border:1px solid #cecece; border-radius: 5px; width: 100%; height: 100%; padding: 0 10px; font-size: 1.3rem; background: url(../../img/common/select_arrow.png) 90%; background-repeat: no-repeat; -webkit-background-size: 9px 6px; background-size: 9px 6px; padding-right: 20px; color: #4C4C4C;background-color: #fff;}
.select-box select:hover {border-color: #b2b2b2}

/* 핸드폰 인증 UI */
.contact-wrap .select-box.contact {width: 100px; margin-right: 5px; margin-bottom:5px }
.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.contact input[type="text"].text-input {width: 100px}
.contact-wrap .btn-wrap.phone-btn {float: left}
.contact-wrap .btn-wrap.authorize-btn {margin-top: 0; position: static}
.contact-wrap .authorize-txt p {color: #ed6c5f; font-size: 1.3rem; font-weight: 600; line-height: 20px; padding-top: 5px;}
.contact-wrap .authorize-txt p:last-child {padding-top: 0}

/* 인풋 텍스트 */
input[type="text"].text-input { height: 35px;  width: 100%; display: inline-block; font-size: 1.3rem; padding:0 10px; border: 1px solid #cecece; color: #333; border-radius: 5px;}
input[type="text"].text-input:hover { border-color: #b2b2b2 }

/* 인풋 패스워드 */
input[type="password"].text-input { height:35px;  width: 100%; display: inline-block; font-size: 1.3rem; padding:0 10px; border: 1px solid #cecece; color: #333; border-radius: 5px;}
input[type="password"]:hover {border-color: #b2b2b2; background: #fff;}

/* 텍스트아레아 */
textarea {width: 100%; resize: none; padding:10px; font-size: 1.3rem; min-height: 200px;border:1px solid #cecece; border-radius: 5px}
textarea:hover {border-color: #b2b2b2}


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


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


/* 체크박스 */
.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.3rem}
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.3rem}

/* 라디오 */
.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 0; 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 0;  vertical-align: middle ;position: relative; top:0; line-height:20px; 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 0; position: relative; top:0; margin-right: 10px;font-size: 1.4rem}