@charset "UTF-8";
/*
 * 참가비 납부 페이지(iif/iif_pay.jsp) 전용 스타일.
 *
 * 이 페이지는 siif_en 페이지를 복사해 만들어져서 /siif/css/siif_main.css,
 * response.css, /siif/kipa/css/layout.css 를 통째로 불러 쓰고 있었다.
 * 그 결과 IIF 스킨(/iif/css/main.css)과 헤더 높이(80 vs 100px)·반응형
 * 브레이크포인트(1020 vs 1060px)·부트스트랩 세트가 충돌했다.
 * 필요한 규칙만 여기로 옮겨 IIF 스킨 한 벌만 쓰도록 정리한 것이다.
 *
 * 원본: siif/css/siif_main.css 277-283, 303-321, 329-335
 *       siif/css/response.css 52-53, 57, 81
 */

/*------------------------- 본문 박스 -------------------------*/
.con_wrapper .con-box { width: 100%; margin: 20px auto; position: relative; }
.con_wrapper .con-box .row { margin-bottom: 2rem; }
.con_wrapper .con-box .con-tit { width: 134px; color: #4285bc; font-weight: 600; display: inline-flex; }
.con_wrapper .con-box .con-tit::before { content: '\00B7'; height: 1.2rem; width: 1.2rem; font-size: 2rem; line-height: 1.4rem; }
.con_wrapper .con-box .con-detail { width: calc(100% - 140px); color: #333333; }

/*------------------------- 표 -------------------------*/
.con_wrapper .con-box table { border-top: 1px solid #9a9a9a; }
.con_wrapper .con-box table > :not(:first-child) { border-top: none; }
.con_wrapper .con-box table th,
.con_wrapper .con-box table td { vertical-align: middle; text-align: center; border-color: #dee2e6; padding: .75rem; font-size: 1rem; }
.con_wrapper .con-box table th { background: #f7f7f7; font-weight: 500; color: #333333; }
.con_wrapper .con-box table td { border-left: 1px solid #dee2e6; color: #3f4344; }

/*------------------------- 입력 폼 -------------------------*/
.con_wrapper input { border-radius: 0; }
.con_wrapper .con-box table.input-form th { max-width: 180px; width: 20%; }
.con_wrapper .con-box table.input-form td .input-group,
.con_wrapper .con-box table.input-form td .select-group { position: relative; max-width: 320px; }
.con_wrapper .con-box table.input-form td .select-group select { border-radius: 0; }
.con_wrapper .con-box table.input-form td .input-group input,
.con_wrapper .con-box table.input-form td .select-group { border-radius: 0; width: calc(90% - 120px); }
.con_wrapper .con-box table.input-form td .input-group button { position: relative; display: block; height: calc(1.5em + .75rem + 2px); padding: .375rem .75rem; border: none; background: #475264; color: #ffffff; }
.con_wrapper .con-box table.input-form td .input-group span { padding: .375rem 0 0 0; }
/* main.css 의 select{-webkit-appearance:none} 때문에 화살표를 직접 그린다 */
.con_wrapper .con-box table.input-form td .select-group::after { content: ''; display: inline-block; position: absolute; background-position: center; background-repeat: no-repeat; top: .9rem; right: 1.2rem; width: 1rem; height: .8rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23565656' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); }

/*------------------------- 버튼 -------------------------*/
.con_wrapper .con-box .apply_btn,
.con_wrapper .con-box .normal_btn { transition: background .8s; -moz-transition: background .8s; -webkit-transition: background .8s; -o-transition: background .8s;
	font-size: 1rem; font-weight: 400; min-width: 200px; height: 56px; text-align: center; color: #ffffff; line-height: 56px; background: #4285bc; border-radius: 5px; display: inline-block; margin: 3rem 0 5rem; padding: 0 1.25rem; }
.con_wrapper .con-box .apply_btn:hover { background: #2b6594; }
.con_wrapper .con-box .normal_btn { background: #475264; margin-left: 1.2rem; }
.con_wrapper .con-box .normal_btn:hover { background: #252b35; }

/*-------------------------
 * 반응형 — IIF 스킨(main.css)의 1020px 브레이크포인트에 맞춘다.
 * SIIF response.css 는 1060px/984px/854px 를 쓰기 때문에 그대로 쓰면
 * 1021~1060px 구간에서 헤더 메뉴와 햄버거 버튼이 동시에 사라졌다.
 -------------------------*/
@media (max-width: 1020px) {
	.con_wrapper .con-box .con-tit { width: 100%; }
	.con_wrapper .con-box .con-detail { width: 100%; margin-top: 10px; }
	.con_wrapper .con-box .apply_btn,
	.con_wrapper .con-box .normal_btn { min-width: 40%; }
	.con_wrapper .con-box table.input-form td .select-group { width: 100%; }
}