@charset "utf-8";

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

/* 버튼 스타일 */
.btn-wrap { position: relative; text-align: center; }
.btn-wrap:after { content: ""; display: block; clear: both; }
.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; border: 0; background: #aeaeae; color: #fff; font-size: 1.3rem; cursor: pointer; float: left; padding: 0px 15px; height: 36px; min-width: 110px; font-weight: 500; border-radius: 5px; }
.btn-wrap button:last-child { margin-right: 0; }
.btn-wrap button.small { min-width: 70px; height: 32px;}

.btn-wrap.inline { display: inline-block; }
.btn-wrap.inline button { float: none; }
.btn-wrap.mg-t20 { margin-top: 20px; }
.btn-wrap.mg-b20 { margin-bottom: 20px;}

/* 버튼 색상 */
.btn-wrap button.theme-btn { background: #000; color: white; }
.btn-wrap button.gray-btn { background: #f4f4f4; color: white; color: #1f0042; }
.btn-wrap button.blue-btn { background: #6d7dff;  color: #fff; }
.btn-wrap button.gray-btn:hover { background: #e5e5e5; }
.btn-wrap button.btn-border { background: #fff; color: #c4c4c4; box-shadow: none; border: 1px solid #CCCFD4;  }
.btn-wrap button.clear-btn { background:none; border: none; color: #202020;} 
/************************************** mypage **************************************/

.sso-form-container .sso-form-wrap .logo-area { background-color: #fff; border-bottom: 1px solid #dee3eb; margin-bottom: 50px; }
.section-width { width: 1200px; margin: 0 auto; position: relative; padding-top: 10px; }
.info-area .button { border: 0; font-size: 1.3rem; border-radius: 3px; height: 30px; background: #000; color: #fff; padding: 0 20px; margin: 10px 0; }

/* 회원정보 수정, 비밀번호 수정 알림  */
.tit-area { padding-bottom: 10px; }
.tit-area .tit { float: left; font-size: 2.1rem; font-weight: 600; }
.section .tit-area p { padding-top: 5px; font-size: 1.4rem; font-weight: 400; color: #5a5a5a;} 
.sub-table { width: 100%; letter-spacing: 0px; font-size: 16px; color: #555;}
.sub-table .con { position: relative; width: 100%; height: 100%; background: #f9f9f9; border: 1px solid #dedede; padding: 15px 20px; display: flex; align-items: center;}
.sub-table .con .icon-area {  position: relative; padding-right: 20px;}
.sub-table .con .icon-area .icon { width: 45px;}
.sub-table .con .text-area { flex: 1; }
.sub-table .con .text-area .sub-tit { font-size: 1.8rem; }
.sub-table .con .text-area .sub-tit .content-text { font-size: 1.4rem;font-weight: 400;}

@media (max-width: 768px) {
  .tit-area .tit { font-size: 1.8rem; }
}




/* 버티컬 테이블 */
table.vertic-table { table-layout: fixed; width: 100%; border-bottom: 1px solid #d3d3d3; border-right: 0; border-top: 1px solid #333333; }
table.vertic-table tr { border-bottom: 1px solid #d3d3d3; }
table.vertic-table tr.tr-bg { background: #f3f3f3; }
table.vertic-table tr th { width: 140px; padding: 15px; font-size: 1.4rem; word-break: keep-all; border-bottom: 1px solid #ddd; color: #3e3e3e; font-weight: 600; }
table.vertic-table tr td { padding: 15px; font-size: 1.5rem; height: 35px; word-break: keep-all; color: #3c3c3c; }
table.vertic-table tr td.detail-cont { min-height: 150px; height: 150px; vertical-align: top; line-height: 20px; }
span.th-important { display: inline-block; height: 4px; width: 4px; border-radius: 50%; margin: 0 0 8px 5px; background: #f05050; }

table.vertic-table tr td .btn-wrap button { height: 36px; font-size: 1.2rem; }


/* 헤더 */
.header-container { position: relative; width: 100%; border-bottom: 1px solid #dee3eb; margin-bottom: 20px;}
.header-container .header-wrap { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 30px 0; align-items: flex-end;}

.header-logo-area { position: relative; cursor: pointer;}
.header-logo-area .logo-image { display: inline-block; width: 260px; height: auto;}
.sec-width { width: 1200px; margin: 0 auto;}

.user-area .user-tool { display: flex; align-items: center; gap: 30px; justify-content: flex-end;}
.user-area .user-tool .login-area { display: inline-block;}

@media (max-width: 1300px) {
  .sec-width { width: 100%;}
}

@media (max-width: 550px) {
  .header-logo-area .logo-image { width: 220px; }
}

@media (max-width: 360px) {
  .header-logo-area .logo-image { width: 190px; }
}





/* 사이드 메뉴 */
.my-container { display: flex; flex-wrap: nowrap; gap: 50px; position: relative; width: 1200px; margin: 0 auto; padding: 0;}
.aside-wrap { flex-basis: 200px; }
.aside-wrap .nav-title { font-size: 3rem; letter-spacing: 0; padding-bottom: 18px; border-bottom: 1px solid #333; font-weight: 900;}
.aside-wrap.section-width { position: relative; width: 1380px; margin: 0 auto;}
.aside-wrap .nav-area ul.nav { padding: 15px 0;}
.aside-wrap .nav-area ul.nav li a { display: block; padding: 14px 15px 10px 15px; font-size: 1.4rem; font-weight: 500; background: transparent;}
.aside-wrap .nav-area ul.nav li.on a { background: #000000; color: #fff;}



@media (max-width: 890px) {
  .body-container { margin-top: 0; }
  .aside-wrap {display: none; padding: 12px 30px; position: absolute; top:0; left: 0; z-index: 10; width: 100%; height: 50px; padding-right: 60px; cursor: pointer; border: 0; background: #031423; }
  .aside-wrap:before { content: ''; position: absolute; top: 20px; right: 30px; width: 10px; height: 6px; transform: rotate(0); transition: transform .25s; background-image: url(../../img/common/dropdown_arr_w.svg); background-repeat: no-repeat; background-size: 100%; }
  .aside-wrap .nav-title { position: relative; top: 0; font-size: 1.6rem; padding-bottom: 0; border-bottom: 0; color: #fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
  .aside-wrap .nav-area { display: none; background: #fff; position: absolute; top:100%; left:0; width: 100%; border-top: 1px solid var(--line-color); padding: 10px 0; border-bottom: 1px solid var(--line-color); box-shadow: 0 3px 4px rgba(0,0,0,0.08); }
  .aside-wrap .nav-area ul.nav { padding: 0; }
  .aside-wrap .nav-area ul.nav li a { padding:13px 30px; font-size: 1.3rem; font-weight: 600; }
  .aside-wrap .nav-area ul.nav li.on a { background:rgba(0,0,0,0.05); color: #000; }
  .aside-wrap.mo-nav-open:before { transform: rotate(180deg); }
  .aside-wrap.mo-nav-open .nav-area { display: block; }

  .aside-wrap:before { content: ''; position: absolute; top: 20px; right: 30px; width: 10px; height: 6px; transform: rotate(0); transition: transform .25s; background-image: url("../../img/common/dropdown_arr_w.svg"); background-repeat: no-repeat; background-size: 100%;}

  .my-container { display: block; }
  .my-container .mycontent-wrap { padding: 100px 0 0; border: 0; }
  .my-container .mycontent-wrap .title-area { border: 0; }
  .sso-form-container .sso-form-wrap .logo-area {  padding: 40px 0 50px;}
}


/* 탭 메뉴 */
.tab-menu-wrap .tab-menu { margin-bottom: 20px; position: relative; }
.tab-menu-wrap .tab-menu ul { position: relative; overflow: hidden;  font-size: 14px; z-index: 1; white-space: nowrap; }
.tab-menu-wrap .tab-menu ul:after { content: ""; position: absolute; width: 100%; height: 1px; background: #000000; bottom: 0; left: 0; z-index: -1; }
.tab-menu-wrap .tab-menu ul li { position: relative; display: inline-block; height: 37px; }
.tab-menu-wrap .tab-menu ul li a { min-width: 90px; display: block; line-height: 35px; border: 1px solid transparent; border-left: none; border-bottom: 1px solid #000000; text-align: center; padding: 0 15px; font-size: 1.4rem; }
.tab-menu-wrap .tab-menu ul li a:hover { color: #000000; }
.tab-menu-wrap .tab-menu ul li.on a {  color: #ffffff;  font-weight: 600; background: #000000; }
.tab-menu-wrap .tab-menu ul li.disabled { opacity: 0.2; }
.tab-menu-wrap .tab-menu ul li.disabled a { cursor: no-drop; }
.tab-menu-wrap .tab-menu .tab-control { position: absolute; top: 6px; right: 0; z-index: 10; background: #f5f6f9; }
.tab-menu-wrap .tab-menu .tab-control .arr-btn { border: 0; outline: 0; background: none; display: inline-block; border-radius: 3px; }
.tab-menu-wrap .tab-menu .tab-control .arr-btn:hover { background: rgba(0, 0, 0, 0.05); }
.tab-menu-wrap .tab-menu .tab-control .arr-btn.next { transform: rotate(180deg); padding-bottom: 2px; }
.tab-menu-wrap .tab-menu .tab-control-with-index { position: absolute; top: -24px; right: 0; z-index: 10; background: #f5f6f9; }
.tab-menu-wrap .tab-menu .tab-control-with-index .arr-btn { border: 0; outline: 0; background: none; display: inline-block; border-radius: 3px; }
.tab-menu-wrap .tab-menu .tab-control-with-index .arr-btn:hover { background: rgba(0, 0, 0, 0.05); }
.tab-menu-wrap .tab-menu .tab-control-with-index .arr-btn.next { transform: rotate(180deg); padding-bottom: 2px; }
.tab-menu-wrap .tab-menu .tab-control-with-index span span span.current_tab_num { color: #000000; margin-right: 3px; }

@media (max-width: 690px) { 
  .tab-menu-wrap .tab-menu ul { display: flex; flex-wrap: wrap; height: auto;}
  .tab-menu-wrap .tab-menu ul li { width: 50%;}
}




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

/* 셀렉트박스 */
.select-box { width: 100%; height: 36px; position: relative; display: inline-block; float: left; }
.select-box select { border: 1px solid #c4c4c4; border-radius: 1px; width: 100%; height: 100%; padding: 0 40px 0 10px; font-size: 1.4rem; background: url(../../img/common/select_arrow.png); background-repeat: no-repeat; -webkit-background-size: 10px 6px; background-size: 10px 6px; color: #4c4c4c; background-color: #fff; background-position: calc(100% - 20px); cursor: pointer; }
.select-box select:disabled { cursor: no-drop; }
.select-box select:hover { border-color: #9f9f9f; }
@media (max-width: 800px) {
  .select-box { width: 100%;}
}

/* 인풋 텍스트 */
.input-box.margin-top { margin-top: 5px;}
input[type="text"].text-input,
input[type="password"].text-input { height: 36px; width: 100%; display: inline-block; font-size: 1.3rem; padding: 0 10px; border: 1px solid #CCCFD4; color: #686868; border-radius: 1px; transition: box-shadow 0.3s ease; }
input[type="text"].text-input:hover,
input[type="password"].text-input:hover { border-color: #9f9f9f; }

/* 텍스트아레아 */
textarea { width: 100%; resize: none; padding: 10px; font-size: 1.4rem; min-height: 200px; border: 1px solid #c4c4c4; }
textarea:hover { border-color: #9f9f9f; }

/* 첨부파일된 파일 */
.file-set-wrap .added-file { display: flex; align-items: center; cursor: pointer; font-size:1.2rem; color:#424242; padding: 2px 10px;}
.file-set-wrap .added-file:last-of-type { margin-right: 0; }
.file-set-wrap .added-file:hover {background: #f2f2f2}
.file-set-wrap .added-file img { margin-right: 5px; opacity: 0.7; width: 11px; height: auto; }

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

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

/* 약관보기 */
.agreement { display: flex; justify-content: space-between; align-items: center;}
.pop-text-area { cursor: pointer;}
.pop-text { font-size: 1.3rem; color: #5594e1; text-decoration: underline;}



@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: 250px; position: relative; padding-left: 20px; font-size: 1.5rem; line-height: 35px; vertical-align: middle; background-color: #fff; cursor: pointer; border: 1px solid #c4c4c4; font-weight: 400; border-radius: 7px; height: 36px; }
.file-input:hover { border-color: #9f9f9f; }
.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 { position: absolute; top: 0px; right: 20px; font-size: 18px; }
.file-input > .label { color: #333; white-space: nowrap; vertical-align: top; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; 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: 0.4; cursor: pointer; width: 20px; height: 20px; }
.file-row .add-wrap button:hover img { opacity: 1; }

@media (max-width: 500px) {
  .file-input { font-size: 1.3rem; }
}

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

/* 체크박스 */



.option-area { margin-top: 25px; line-height: 1.9; }
.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: 25px; background: url("../../img/common/check_box_off.png") no-repeat 0 0; vertical-align: top; position: relative; top: 0; line-height: 17px; 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 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: 17px; 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; }

/* 셀렉트+인풋 텍스트 */
.search-select .select-box { float: left; margin-right: 5px; }
.search-select input[type="text"].text-input { float: left; width: calc(100% - 205px); }
.search-select .check-input { margin-left: 10px; }
.search-select .check-input input[type="checkbox"] + label { top: 5px; }

/* 버튼+인풋 */
.input-btn input[type="text"].text-input { width: calc(100% - 128px); }
.input-btn .btn-wrap { margin-left: 5px; }

/* 날짜 선택 */
.date-select-wrap { display: inline-block; }
.date-select-wrap .date-select { display: inline-block; position: relative; cursor: pointer; }
.date-select-wrap .date-select .calendar-btn { position: absolute; display: block; top: 4px; right: 10px; opacity: 0.5; z-index: 1; transition: opacity 0.2s ease; font-size: 16px; }
.date-select-wrap .date-select .calendar-btn:hover { opacity: 1; }
span.unit { font-size: 1.2rem; padding: 0 5px; font-weight: 500; color: #999; position: relative; }
.date-select-wrap .check-input { margin-left: 10px; }

/* 토글 버튼 */
.toggle-switch .switch { width: 35px; height: 18px; display: inline-block; position: relative; border-radius: 30px; background-color: #b7b7b7; cursor: pointer; background-image: none; vertical-align: middle; margin-right: 0 !important;}
.toggle-switch .switch .button { width: 12px; height: 12px; position: absolute; top: 50%; left: 5px; transform: translateY(-50%); border-radius: 50%; background: #fff;}
.toggle-switch .label { display: inline-block; font-size: 1.2rem; font-weight: 500; padding: 0 3px; color: #999; position: relative; top: 1px;}
.toggle-switch #toggle:checked ~ .label { color: #6d7dff;}
.toggle-switch #toggle:checked ~ .switch { background: #6d7dff;}
.toggle-switch #toggle:checked ~ .switch .button { left: calc(100% - 17px); background: #fff;}
.toggle-switch .label,
.toggle-switch .switch,
.toggle-switch .button { transition: color 0.2s ease-in, background 0.2s ease-in, left 0.2s ease-in;}

.notice-area { margin-top: 5px; font-size: 1.3rem; }
.notice-area .text-red {color: #db5f5f;;}
.notice-area .text-blue { color: #5594e1;;}

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

@media (max-width: 1300px) {
  .section-width { width: 100%; /* padding-top: 70px;*/ }
  .my-container { width: 100%;}
}

@media (max-width: 768px) {
  table.vertic-table tbody tr th { width: 120px; font-size: 1.2rem; }
  .select-box select { font-size: 1.2rem; }
  .file-input > .label { font-size: 1.2rem; }
  table.vertic-table tr td { font-size: 1.4rem; }
  table.vertic-table tr td .file-input { width: calc(100% - 60px); }
  table.vertic-table tr td .file-row .add-wrap { margin-left: 4px; }
  table.vertic-table tr td .add-wrap { width: 50px; }
}

@media all and (max-width: 572px) {
  table.vertic-table tr td { font-size: 1.3rem; padding: 10px; }
  table.vertic-table tr th { padding: 10px; width: 90px; }
  .search-select .select-box { margin-bottom: 5px; width: 100% !important; margin-right: 0; }
  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%; }
  .input-btn .btn-wrap { margin-left: 0; margin-top: 5px; display: block; }
  table.vertic-table tr td .btn-wrap button { width: 100%; float: none; }
}