@charset "utf-8";

/* 레이아웃 */
#header {background-color: #0f3561;}
#header .inner {display: flex; align-items: center; justify-content: space-between; height: 60px; color: #fff;}
#header .inner * { font-size: 20px;}

#footer {height: 171px; padding: 45px 0 60px 0; background-color: #f5f5f5; box-sizing: border-box;}
#footer .inner {display: flex; gap: 40px;}
#footer ul {display: flex; flex-direction: column; gap: 8px;}
#footer ul li {font-size: 13px; color: #333333;}
#footer ul li:not(:last-child) {font-weight: 600;}
#footer ul li:last-child {margin-top: 5px;}

#wrap {min-height: 100%; display: flex; flex-direction: column;}
#container {flex: 1;}

h4.sec-tit {margin: 70px 0 15px; padding-left: 12px; border-left: 2px solid #0d79c2; font-size: 18px; font-weight: 600; line-height: 1.3em; box-sizing: border-box;}

/* 테이블 공통 */
.tbl-wrap {position:relative; border-top: 1px solid #6d6d6d;}
.tbl {width: 100%; border-collapse: collapse; vertical-align: top; border-bottom: 1px solid #ececec;}
.tbl th, 
.tbl td {height: 45px; padding: 8px 10px; border: 1px solid #ececec;}
.tbl th{background-color: #f9f9f9; border-bottom: 1px solid #cdcdcd;}
.tbl th label {line-height: 1.5;}
.tbl tr > *:first-child {border-left: none;}
.tbl tr > *:last-child {border-right: none;}
.tbl tbody > tr:last-child > * {border-bottom: none;}

/* 행테이블 */
.tbl.row th{border-bottom: 1px solid #ececec;}
.tbl.row tr th[rowspan] ~ th {height: 30px;}

.tbl td:has(.context) {padding: 10px}
.tbl .context {position: relative; z-index: 1; padding: 40px; background-color: #eef5f8; background:url(../../images/bg_line.jpg); box-sizing: border-box;}
.tbl .context:before {content: ''; position: absolute; z-index: -1; display: block; top: 5px; left: 5px; width: calc(100% - 10px); height: calc(100% - 10px); background-color: #fff;}
.tbl .context .context-tit {display:flex; align-items: center; margin-bottom: 20px; padding: 0 0 0 44px; color:#363c5a; font-size: 18px; height: 40px; background-image: url(../../images/img_promote.png); background-size: 34px; background-repeat: no-repeat; background-position: left top 6px;}

.list-tit {color: #363c5a; font-weight: 600; font-size: 15px;}
ol + .list-tit,
ul + .list-tit {margin-top: 18px;}
.list-tit + ol,
.list-tit + ul {font-size: 13px; margin-top: 8px;}
.list-tit + * > li {min-height: 20px;}
.list-tit + * > li + li {margin-top: 4px;}

ul.dot li,
ol.dot li {position: relative; min-height: 20px; padding-left: 14px;}
ul.dot li:before,
ol.dot li:before {content:''; position:absolute; left:0; top:4px; width: 8px; height: 8px; border-radius: 50%; border: 1px solid #363c5a;}
ul.dot li strong,
ol.dot li strong {color: #363c5a;}
ul.dot li+li,
ol.dot li+li{margin-top: 4px;}

.highlight {padding: 0 2px; background-color: #d7ecff;}

/* 폼 */
.form-section select,
.form-section [type=text],
.form-section [type=email],
.form-section textarea {display: flex; width: 100%; height: 35px; padding: 0 10px; border: 1px solid #ccc; box-sizing: border-box;;}

.form-section select:disabled,
.form-section [type=text]:disabled,
.form-section textarea:disabled {background-color: #eee;}

.form-section select:disabled::placeholder,
.form-section [type=text]:disabled::placeholder,
.form-section textarea:disabled::placeholder {color: #eee;}


.form-section [type=text]:read-only,
.form-section textarea:read-only {background-color: #fafafa;}


.form-section textarea {height: 100px; padding: 8px 10px; resize: none; /* 변경 불가능 */}

.form-section button {display: inline-flex; align-items: center; height: 35px; border: 1px solid #9f9f9f; cursor: pointer;}
.form-section th button {margin-top: 20px;}

.addr-wrap {display: flex; flex-direction: column; gap: 4px;}
.addr-wrap > div {display: flex; gap: 4px;}
.addr-wrap button {border: 1px solid #9f9f9f; cursor: pointer;}
.addr-wrap > div:has( > button) [type=text] {width: 130px;}

.chk-box {position:relative; display: flex; min-height: 35px;}
.chk-box [type=radio],
.chk-box [type=checkbox] {width: 0px; height: 0px;}
.chk-box [type=radio] + label,
.chk-box [type=checkbox] + label {position:relative; display: flex; align-items: center; padding: 4px 0 4px 20px;}
.chk-box [type=radio]:focus + label,
.chk-box [type=checkbox]:focus + label {outline: 2px solid #000; border-radius: 2px;}
.chk-box [type=radio] + label::before,
.chk-box [type=radio] + label::after,
.chk-box [type=checkbox] + label::before,
.chk-box [type=checkbox] + label::after {content: ''; position: absolute; top: calc(50% - (16px / 2)); left: 0; width: 16px; height: 16px; box-sizing: border-box;}
.chk-box [type=radio] + label::before,
.chk-box [type=checkbox] + label::before {border: 1px solid #ccc;}
.chk-box [type=radio] + label::after,
.chk-box [type=checkbox] + label::after {top: calc(50% - (10px / 2)); left:calc((16px / 2) - (10px / 2)); width: 10px; height: 10px;}

.chk-box [type=radio] + label::before,
.chk-box [type=radio] + label::after {border-radius: 50%;}
.chk-box [type=radio]:checked + label::before {border: 1px solid #3795ff;}
.chk-box [type=radio]:checked + label::after {background-color: #3795ff;}

.chk-box [type=checkbox] + label::before,
.chk-box [type=checkbox] + label::after {border-radius: 4px;}
.chk-box [type=checkbox]:checked + label::before {border: 1px solid #3795ff; background-color: #3795ff;}
.chk-box [type=checkbox]:checked + label::after { background-size: 10px 10px; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l5 5l10 -10' /%3E%3C/svg%3E");}

.chk-box [type=radio]:disabled + label::before,
.chk-box [type=checkbox]:disabled + label::before {background-color: #eee;}

.chk-box-wrap {display: flex; gap: 2px 20px; flex-wrap: wrap;}

.pl-20 {padding-left: 20px;}
.h-300 {height: 300px !important;}
.caps {display: flex; gap: 2px; min-height: 20px; font-size: 14px;}
.tbl-wrap + .caps {margin-top: 5px;}


.conts-wrap {display: none;}
.btn-group {display: flex; justify-content: center; margin-top: 40px;}
.btn-submit {display: inline-flex; justify-content:center; align-items:center; width: 180px; height: 50px; border: none; background-color: #0d79c2; color: #fff; font-size: 15px; cursor: pointer; font-weight: 500;}
.btn-submit:hover {background-color: #0967a7; }

.col2 {flex-wrap: wrap; gap:0 20px;}
.col2 > * {flex:0 0 49%;}