@charset "utf-8";
@import url('common.font.css'); /* 웹폰트 */
@import url('common.reset.css'); /* 전역변수, 초기화 */
@import url('common.layout.css'); /* 전체레이아웃, 브레드크럼 */
@import url('common.form.css'); /* 데이터 관련 요소 스타일 정의 - 버튼, 텍스트필드, 캘린더, 셀렉트박스, 텍스트에어리어, 라디오버튼, 체크박스, 칩, 스위치, 토글라디오버튼 */
@import url('common.module.css'); /* 그룹화 된 구성 요소 스타일 정의 - 공지사항, 박스, 탭, 아코디언, 등록폼, 폼도움말, 검색, 게시판형목록, 카드형목록, 테이블, 요소분할, 페이지진행상황바(⚠) */
@import url('common.element.css'); /* 단일 요소 스타일 정의 - 스크롤바, 아이콘, 뱃지, 태그, 스텝, 링크, 헤드라인, 제목, 텍스트, 폰트, 정렬, 사이즈, 여백 */

/* 
기본정보
- 생성일 : 2023-11-30
- 파일명 : content.css
- 포함내용 : 브릿지
*/
/* 
수정정보
- 수정일 : 2023-04-01
- 수정내용 : XXX(홍길동)
*/

.sr-only { overflow: hidden; position: absolute; clip: rect(0, 0, 0, 0); clip-path: polygon(0 0, 0 0, 0 0); width: 1px; height: 1px; margin: -1px; } 

/* 전체레이아웃 */
#wrap { min-width: 128rem; height: 100%; overflow: hidden; } 
#page { position: relative; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; } 
#header { position: sticky; z-index: 11; top: 0; height: 8rem; background-color: var(--color-light); box-shadow: 0 0.5rem 1.5rem 0 rgba(0, 0, 0, 0.10); } 
.main { min-height: calc(100% - 8rem - 10rem); } 
#page.has-space .main { min-height: calc(100% - 6.4rem - 9.8rem - 8.8rem); min-height: calc(100% - 6.4rem - 9.8rem - 8.8rem - constant(safe-area-inset-bottom)); min-height: calc(100% - 6.4rem - 9.8rem - 8.8rem - env(safe-area-inset-bottom)); } 
#content { position: relative; } 
.position-rel { position: relative; } 

#footer { height: 10rem; border-top: var(--line-sm) solid var(--color-bg-dark); background-color: var(--color-bg-light); } 
#page.has-space #footer { margin-bottom: 8.8rem; margin-bottom: calc(constant(safe-area-inset-bottom) + 8.8rem); margin-bottom: calc(env(safe-area-inset-bottom) + 8.8rem); } 
.footer-inner { position: relative; display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 2.4rem 2.8rem; } 
#footer .copyright { font-size: var(--font-xxs); color: var(--color-line-base); line-height: 1.35;}
#footer .family-site { position: relative; } 
#footer .family-site .btn-familysite { position: relative; min-width: 13.9rem; padding: .55rem 2.7rem .55rem 1.2rem; font-size: var(--font-xs); text-align: left; background-color: var(--color-light); border: var(--line-sm) solid var(--color-bg-dark); border-radius: var(--radius-sm); } 
#footer .family-site .btn-familysite:after { content: ''; position: absolute; display: block; width: 1.2rem; height: 1.2rem; top: 50%; right: .7rem; margin-top: -.6rem; background: url('../../image/com/ico-footer-arr.svg') no-repeat center; transition: var(--animation-speed) all var(--animation-timing-base); transform: rotate(180deg); } 
#footer .family-site .familysite-list { position: absolute; display: none; min-width: 13.9rem;background-color: var(--color-light); border: var(--line-sm) solid var(--color-bg-dark); border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden;}
#footer .family-site .familysite-list > .item + .item { border-top: var(--line-sm) solid var(--color-bg-dark);}
#footer .family-site .familysite-list > .item a { display: block; padding: .55rem 1.2rem; color: #333; font-size: var(--font-xs);} 
#footer .family-site .familysite-list > .item a:hover { background-color: var(--color-primary-bg-light); } 
#footer .family-site .btn-familysite[aria-expanded='true'] { color: var(--color-line-base); border-radius: 0 0 var(--radius-sm) var(--radius-sm);}
#footer .family-site .btn-familysite[aria-expanded='true']::after { transform: rotate(0); } 
#footer .family-site .btn-familysite[aria-expanded='true'] + .familysite-list { display: block; bottom: 3.3rem; } 

/** 전체레이아웃 - 건너뛰기 */
#skip { position: relative; z-index: 5000; } 
.skip-menu > a { position: fixed; z-index: 11; width: 100%; top: -10rem; font-size: var(--font-11-xmin); text-align: center; color: var(--color-light); border: var(--line-sm) solid var(--color-bg-dark); background-color: var(--color-dark); } 
.skip-menu > a:active,
.skip-menu > a:focus-visible { top: 0; } 

/** 전체레이아웃 - 헤더 */
.header-title { position: absolute; display: flex; z-index: 2; top: 3rem; left: 3.2rem; padding: 0; line-height: 1.35; text-align: center; font-weight: var(--font-semibold); font-size: var(--font-title-sm); color: var(--color-dark); word-break: keep-all; text-overflow: ellipsis; white-space: nowrap; } 

.logo { display: block; width: 23.6163rem; height: 2.2rem; margin: 0 auto; background-image: url('../../image/com/logo.svg'); background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; } 
.logo > a { display: block; width: 100%; height: 100%; } 
.header-title > .head-serve { position: relative; padding-left: 1rem; margin-left: .6rem; font-size: 1.4rem; color: var(--color-highlight); line-height: 2.2rem;}
.header-title > .head-serve::before { content: ''; display: block; position: absolute; width: .1rem; height: 1.1rem; left: 0; top: 50%; background-color: var(--color-line-base); transform: translateY(-50%); }

/** Front */
.front-wrap .logo {background-image: url('../../../image/com/logo-front.svg');}

/* 셀렉트박스 */
.select { position: relative; display: inline-block; vertical-align: middle; } 
.select-data { overflow: hidden; position: absolute; clip: rect(0, 0, 0, 0); clip-path: polygon(0 0, 0 0, 0 0); width: 1px; height: 1px; margin: -1px; border: 0; } 

.select-button { position: relative; display: inline-block; width: 100%; padding: 1.5rem 4.3rem 1.5rem 1.5rem; background-color: var(--color-light); border: var(--line-sm) solid var(--color-bg-dark); border-radius: var(--radius-md); outline: none; line-height: 1.5; text-align: left; font-size: var(--font-md); color: var(--color-dark); transition: all 0s var(--animation-timing-base); } 
.select-button:after { content: ''; position: absolute; top: 50%; right: 1.1rem; width: var(--icon-md); height: var(--icon-md); margin: -1.2rem 0 0; background: var(--bg-url-md) no-repeat calc(var(--icon-md) * -3) calc(var(--icon-md) * -1); background-size: var(--bg-size-md); } 

.select.option-sm .select-button { padding: .5rem 2.7rem .475rem 1.1rem; border-radius: var(--radius-sm); line-height: 1.35; font-size: var(--font-sm); color: var(--color-txt-body); } 
.select.option-sm .select-button:after { right: .7rem; width: var(--icon-xs); height: var(--icon-xs); margin-top: -.6rem; background: var(--bg-url-xs) no-repeat 0 0; background-size: var(--bg-size-xs); } 

.select.option-txt .select-button { padding: 0 1.8rem 0 0; border-top: 0; border-left: 0; border-right: 0; border-color: var(--color-primary); border-radius: 0; line-height: 1.334; font-weight: var(--font-semibold); font-size: var(--font-lg); color: var(--color-primary); } 
.select.option-txt .select-button:after { right: 0; width: var(--icon-sm); height: var(--icon-sm); margin-top: -.8rem; background: var(--bg-url-sm) no-repeat calc(var(--icon-sm) * -9) calc(var(--icon-sm) * -2); background-size: var(--bg-size-sm); } 

.select-button > span { display: block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 
.select-button > span.is-placeholder { color: var(--color-line-base); } 
.select-button:active,
.select-button:focus { border-color: var(--color-primary); transition-duration: var(--animation-speed-fast); } 

.select-data.is-error ~ .select-button { border-color: var(--color-highlight); } 
.select-data.is-error ~ .select-button:active,
.select-data.is-error ~ .select-button:focus { border-color: var(--color-primary); } 
.select-data:disabled ~ .select-button { background-color: var(--color-bg-light); border-color: var(--color-bg-base); color: var(--color-disable); pointer-events: none; } 
.select-data.is-readonly ~ .select-button { background-color: var(--color-bg-light); border-color: var(--color-bg-dark); color: var(--color-dark); pointer-events: none; } 

.select-ui { position: relative; width: 100%; z-index: 2; } 
.select-ui.is-open { z-index: 3; } 
.select-ui .label { position: relative; display: inline-block; width: 100%; padding: 1.5rem 4.4rem 1.5rem 1.6rem; background-color: var(--color-light); border: var(--line-sm) solid var(--color-bg-dark); border-radius: var(--radius-md); line-height: 1.5; text-align: left; font-size: var(--font-md); overflow-x: hidden; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; transition: all 0s var(--animation-timing-base); } 
.select-ui .label:after { content: ""; position: absolute; top: 50%; right: 1.2rem; width: 2.4rem; height: 2.4rem; margin: -1.2rem 0 0; background: url('../../../image/com/ico-select-arr.svg') no-repeat center; background-size: contain; transition: all var(--animation-speed-fast) var(--animation-timing-base); } 
.select-ui .label > span { display: block; width: 100%; overflow: hidden; white-space: nowrap; } 
.select-ui .label > span.is-placeholder { color: var(--color-disable); } 
.select-ui .label:active,
.select-ui.is-open .label { border-color: var(--color-primary); box-shadow: 0 .4rem 1.6rem 0 rgba(85, 141, 255, .2); transition-duration: var(--animation-speed-fast); } 
.select-ui.is-open .label::after { transform: rotate(180deg); } 
.select-ui .options { opacity: 0; height: 0; position: absolute; z-index: 1; overflow: hidden; width: max-content; min-width: 100%; max-width: calc(100vw - (var(--space-lg) * 2)); border-radius: var(--radius-md); background-color: var(--color-light); transition: opacity var(--animation-speed-fast) var(--animation-timing-base); box-shadow: 0 0.4rem 1.4rem 0 rgba(0, 0, 0, 0.10); } 
.select-ui .options[class*="show-"] { overflow-y: auto; max-height: 25.4rem; height: auto; opacity: 1; } 
.select-ui .options.show-down { top: 5.6rem; } 
.select-ui .options.show-up { bottom: 5.6rem; } 
.select-ui .options > .item { padding: 1.2rem 1.6rem; background-color: var(--color-light); text-align: left; font-size: var(--font-md); color: #333; cursor: pointer; } 
.select-ui .options > .item + .item { border-top: var(--line-sm) solid rgba(0, 0, 0, 0.10); } 
.select-ui .options > .item.is-active,
.select-ui .options > .item:active,
.select-ui .options > .item:hover { background-color: var(--color-primary-bg-light); } 
.select-ui .options > .item.is-active { color: #333; } 
.select-ui .options > .item.is-placeholder { display: none; } 
.select-data.is-error ~ .select-ui .label { border-color: var(--color-highlight); } 
.select-data.is-error ~ .select-ui .label:active,
.select-data.is-error ~ .select-ui.is-open .label { border-color: var(--color-primary); } 
.select-data:disabled ~ .select-ui .label { background-color: var(--color-bg-light); border-color: var(--color-bg-base); color: var(--color-line-base); pointer-events: none; } 
.select-data:disabled ~ .select-ui .label:after { border-color: var(--color-bg-base); } 
.select-data.is-readonly ~ .select-ui .label { padding-right: 1.5rem; color: var(--color-base); pointer-events: none; } 
.select-data.is-readonly ~ .select-ui .label:after { display: none; } 
.select-ui .options.scrollbar::-webkit-scrollbar-thumb { border-right: 0; } 
.select-ui .options.scrollbar::-webkit-scrollbar-track { margin: 2rem 0 1rem; } 

/* 로딩바 */
#loading { position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; right: 0; display: none; align-items: center; justify-content: center; } 
#loading.is-active { display: flex; } 
.loading-bar > span { display: block; width: 9.6rem; height: 9.6rem; } 

/* 보안프로그램 설치(PC) */
#content > .section.security-program {padding-top: 12rem; width: 928px;}
.section.security-program .main-title {padding-top:.8rem; text-align:center;}
.section.security-program .main-title .icon {display:flex; width:24rem; height:14.4rem; margin:0 auto 1.6rem; background: url('../../image/com/bg-avatar.svg') no-repeat 0 0; background-size: 100% auto;}
.section.security-program .data-list td {padding: 1.2rem 1rem 1.15rem; color:var(--color-txt-sub)}
.btn-group.security-program {display: flex; justify-content: center; padding-top: 4rem;}
.section.security-program .btn.icon::after { background-image: url(../../image/com/ico-common-sm.svg);}