/* 공통 구조
**********************************************/

/* 툴팁 박스 스타일 (S) 
* ( 20250630 phh )
*/
.tooltip-box { position: absolute; background: rgba(30, 30, 30, 0.75); /* 배경 조금 더 진하게 */ color: #fff; padding: 16px 22px; /* 여백 증가 */ font-size: 15px; /* 글씨 약간 키움 */ border-radius: 12px; /* 둥근 정도 증가 */ white-space: pre-wrap; max-width: 460px; /* 최대 너비 증가 */ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* 그림자 강조 */ transition: opacity 0.25s ease, transform 0.25s ease; opacity: 0; z-index: 9999; pointer-events: none; line-height: 1.8; /* 줄 간격 넓힘 */ transform: translateY(4px); }
.tooltip-box.show { opacity: 1; transform: translateY(0); }
.tooltip-icon { display: inline-flex; justify-content: center; align-items: center; width: 18px; height: 18px; margin-left: 6px; border: 2px solid #5b9bd5; /* 파란색 테두리 */ background-color: #fff; /* 흰 배경 */ color: #5b9bd5; /* 파란 텍스트 */ font-size: 12px; font-weight: bold; border-radius: 50%; cursor: pointer; box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); transition: background-color 0.2s ease, color 0.2s ease; }
.tooltip-icon:hover { background-color: #5b9bd5; /* hover 시 파란 배경 */ color: #fff; /* hover 시 흰색 텍스트 */ }
@media screen and (max-width:1700px){ .tooltip-box { max-width: 70vw; font-size: 14px; padding: 20px 14px; } }
/* 툴팁 박스 스타일 (E) */

.onlyPC { display: block;}
.onlyTablet { display: none;}

.onlyMobile { display: none;}
.area { position: relative; width: 1280px; width: 1360px; margin: 0 auto;}
body {letter-spacing: -0.06em;}
body.noScroll { overflow: hidden;}

/* skipnav */
.skipnav a { display: block; position: fixed; left: 0; top: -100px; z-index: 300; width: 100%; padding: 10px 0; color: #fff; text-align: center; background-color: #111;}
.skipnav a:focus { top: 0;}

/* header */


/* wrap */

/* GNB */
.header { overflow: hidden; position: fixed; left: 0; right: 0; top: 0; z-index: 101; height: 10rem;background-color: #fff; transition: height .3s ease;}

.header .area { display: flex; align-items: center; width: 100%; justify-content: center; max-width: none;}
.header h1 {  display: flex; align-items: center;position: absolute; left: 0;top: 0; width: 16rem; height: 10rem;}
.header h1 a { display: block;}
.header h1 .icon { display: block; width: 40.3rem; height: 2.8rem; background: url(../images/common/header_logo_white.svg) no-repeat center/100% auto;}

.header .global {height: 100%;max-height: 100px;position: absolute;right: 0;top: 0;display: flex;align-items: center;}
.header .global.after { flex-shrink: 0;}
.header .global .loginBefore .inner { display: flex; align-items: center; justify-content: flex-end;}
.header .global .loginAfter { display: flex; align-items: center; justify-content: flex-end;}
.header .global .login,
.header .global .logout { width: 14rem; height: 10rem; border: 0; color: #fff; text-align: center; font-weight: 500; font-size: 1.7rem; background-color: #E62D4E;}
.header .global .login svg { flex-shrink: 0; }
.header .global .login span { display: block; margin-top: -.1rem;}
.header .global .providerPotal {transition: all 0.3s; background: #2727C0; border-radius: 5rem; padding: 0 1.6rem; margin-right: 1.2rem; color: #fff; font-weight: 600; font-size: 1.6rem; line-height: 3.8rem; margin-right: 1rem; border: 1px solid #2727C0; height: 3.8rem; white-space: nowrap;}
.header .global .providerPotal:hover {border-color: #1FA7D2; background: #1FA7D2; color: #fff;}
.header .global .join { display: flex; align-items: center; justify-content: center; height: 3.5rem; margin-left: .4rem; padding: 0 1.8rem; font-size: 1.4rem; color: #fff; background-color: #20599b; border-radius: 1.8rem; transition: background-color .2s ease-in-out; transition: background-color .2s ease-in-out;}
.header .global .join:hover { background-color: #366cc3;}
.header .global .join span { display: block; margin-top: -.1rem;}
.header .global .mypotalBtn { display: flex; align-items: center; justify-content: center; height: 3.5rem; padding: 0 1.1rem 0 .7rem; font-weight: 500; color: #fff; background: rgba(0, 0, 0, 0.30); border-radius: 1.8rem; height: 3.8rem; line-height: 3.8rem; padding: 0 1.6rem; border-radius: 5rem; transition: color, border-color, background-color .2s ease-in-out;}
.header .global .mypotalBtn .icon { display: block; width: 1.6rem; height: 1.6rem; background: url(../images/common/ico_global_white.svg) no-repeat 50% / 100% auto;}
/*.header .global .mypotalBtn span {overflow:hidden; display: block; max-width: 4.7rem; margin-left: .6rem; font-size: 1.6rem; font-weight: 600;  letter-spacing: -0.96px; color: #fff;  text-overflow:ellipsis; white-space:nowrap;}*/
#btn_my span {display: block; width: 100%; margin: 2px 0;}

.header .global .login.green {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; background-color: #369e6e;}
.header .global .login.green > div {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px;}


.header.show { border-bottom: none; box-shadow: .8rem .3rem .8rem rgba(0, 0, 0, .1);}
.header.show h1 .icon {background-image: url(../images/common/header_logo.svg);}
.header.show .gnb .depth2 { display: block;}
.header.show .gnb .depth2:hover { background: linear-gradient(to top, #FFFFFF, #ECF3FA);}
.gnb { display: flex; align-items: center; justify-content: center; flex: 1; margin-left: 0%;}
.gnb .mPosition { width: 100%;}
.gnb .depth1 { display: flex; align-items: center; justify-content: center;}
.gnb .depth1 >li { position: relative; width: auto;}
.gnb .depth1 >li >a { display: flex; align-items: center; justify-content: center; height: 10rem; padding: 0 3.4rem;  font-family: "Pretendard"; font-size: 2rem; font-weight: 600; }
.gnb .depth1 >li >a:hover { color: #2443BD;}
.gnb .depth1 >li >a.active +.depth2 { background-color: #f0f7fa;}
.gnb .depth2 { display: none; align-items: center; position: absolute; left: 0; top: 10rem; z-index: 1; width: 100%; padding: 3rem 0;}
.gnb .depth2 li a { display: block; padding: 1rem 0;  font-family: "Pretendard"; font-size: 1.7rem; font-weight: 500; text-align: center;}
.gnb .depth2 li a:hover { color: #2443BD; font-weight: 600;}
.gnb .depth2 li a.active {  font-weight: 600; color: #2443BD;}
.header .subMenuBlind { position: absolute; left: 0; top: 9.9rem; width: 100%; height: 0;  transition: height .2s ease-in-out;}

/* header - 메인 일때 */
.header.header-main {background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.20);}
.header.header-main .gnb .depth1 >li >a {color: #fff;}
.header.header-main.is-login {background-color: rgba(255,255,255); border-bottom: 1px solid #F3F3F3;}
.header.header-main.is-login .gnb .depth1 >li >a {color: #000;}
.header.header-main.is-login .gnb .depth1 >li >a:hover { color: #2443BD;}
.header.header-main.is-login h1 .icon {background-image: url(../images/common/header_logo.svg);}

/* header - sub 일때 */
.header.sub {border-bottom: 1px solid #F3F3F3;}
.header.sub h1 .icon {background-image: url(../images/common/header_logo.svg);}

/* header sticky */
.header.sticky {box-shadow: 0 4px 15px rgba(0, 0, 0, .2);}
.header.header-main.sticky {background-color: rgba(255, 255, 255); border-bottom: 1px solid #e1e1e1;}
.header.header-main.sticky .gnb .depth1 >li >a {color: #000;}
.header.header-main.sticky h1 .icon {background-image: url(../images/common/header_logo.svg);}

/* main gnb hover 상태 - 메인일 때, 로그인 했을 시 header */
.header.show.header-main {background-color: rgba(255,255,255); box-shadow: 0 4px 15px rgba(0, 0, 0, .2);}
.header.show.header-main .logo1 {opacity:0;}
.header.show.header-main .logo2 {opacity:1;}
.header.show.header-main .gnb .depth1 >li >a{color: #000;}
.header.show .subMenuBlind {border-top: 1px solid #d4d4d4; }

/* container */
.contents { padding: 9.5rem 0 9rem; background-color: #f7f7f7;}
.contents.white { background-color: #fff; overflow-x: hidden;} 
.contents.white .area {padding: 0 2rem;}

/* aside */
.aside { position: fixed; left: 50%; bottom: 5rem; z-index: 30; margin-left: 75rem; }
.aside .row {  overflow: hidden; width: 9.4rem; margin-left: 0; text-align: center; background-color: #20599b; border-radius: .8rem;}
.aside .key { display: block; width: 100%; padding: 1.9rem 0 1.5rem; color: #f8bd5c; background-color: #0a2c55;}
.aside .key:hover { text-decoration: underline;}
.aside .key span { display: block;  font-weight: bold;}
.aside .key p { margin-top: .8rem; font-size: 1.4rem; font-weight: 600;}
.aside dl { padding: 0 1.3rem;}
.aside dl dt { padding-top: 1.4rem; font-size: 1.4rem; color: #fff;}
.aside dl dd { padding: 1.2rem 0 1.4rem;  font-weight: 300; color: #fff; border-bottom: 1px solid #4179bb;}
.aside .titleBody { display: block; margin: 1.4rem auto 1.8rem; color: #fff;}
.aside .titleBody:hover { color: #f8bd5c;}
.aside .titleBody:hover .iconSet .icon { background-image: url(../images/common/ico_aside_folder_gold.png);}
.aside .titleBody .iconSet { display: inline-flex; align-items: center; justify-content: center; width: 3.7rem; height: 3.7rem; background-color: #0a2c55; border-radius: 50%;}
.aside .titleBody .iconSet .icon { display: block; width: 2.2rem; height: 1.5rem; background: url(../images/common/ico_aside_folder.png) no-repeat center/cover;}
.aside .titleBody .text { display: block; margin-top: .4rem; font-size: 1.4rem; font-weight: 300;}
.aside .chatbot { display: block; width: 9.4rem; height: 9.4rem; margin-top: 1.6rem; background: url(../images/common/ico_aside_chatting.png) no-repeat center/cover;}
.aside .topBtn { display: none; width: 5rem; height: 5rem; margin: 1.3rem auto 0; text-align: center; border: 1px solid #e3e3e3; background-color: #fff; border-radius: 50%; opacity: 0; transition: all .2s ease-in-out;}
.aside .topBtn:hover { border-color: #5c8fcb; background-color: #f0f7fa;}
.aside .topBtn .icon { display: block; width: 1.8rem; height: 1.5rem; margin: 0 auto; background: url(../images/common/ico_aside_arrow.png) no-repeat center/cover;}
.aside .topBtn:hover .icon { background-image: url(../images/common/ico_aside_arrow_blue.png);}
.aside.active .topBtn { display: block;}
.aside.active.show .topBtn { opacity: 1;}
@media screen and (max-width:1700px){
  .aside  { left: initial; right: 1rem; margin-left: 0;}
}

/* 푸터 */
.footer { padding: 2.8rem 0 6rem; background-color: #32374B;}
.footer .area { display: flex; align-items: center; width: 100%; max-width: 131.8rem; padding: 0 2rem;} 
.footer .context { flex: 1; position: relative; }
.footer .context .links { display: flex; align-items: center; padding-bottom: 2.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.10);}
.footer .context .links a { display: block; font-size: 1.7rem; font-weight: 600; letter-spacing: -1.02px; color: #fff;}
.footer .context .links a ~ a { margin-left: 2rem;}
.footer .context .links a.highlight { color: #1CCAD7;}
.footer .flogo {display: block; margin-top: 4rem; width: 25.2rem; height: 2.8rem;}
.footer .flogo img {width: 100%;}
.footer .address { margin-top: 4rem; font-size: 1.8rem; font-weight: 400; letter-spacing: -1.08px; color: #fff;}
.footer .address p:first-child { font-weight: 400;}
.footer .address p ~ p { margin-top: 1.2rem;}
.footer .address p span ~ span { margin-left: 1.5rem;}
.footer .address p span:last-child { font-weight: 400;}
.footer .address p.copyright {margin-top: 4.4rem; font-size: 1.6rem; font-weight: 400; color: rgba(255, 255, 255, 0.70);}
.footer .snsGroup { display: flex; align-items: center; position: absolute; right: 0; top: -.6rem;}
.footer .snsGroup a { display: block;}
.footer .snsGroup a ~ a { margin-left: .8rem;}
.footer .snsGroup a .icon { display: block; width: 3.1rem; height: 3.1rem;}
.footer .snsGroup a.youtube .icon { background: url(../images/common/ico_youtube.png) no-repeat center/cover;}
.footer .snsGroup a.facebook .icon { background: url(../images/common/ico_facebook.png) no-repeat center/cover;}
.footer .snsGroup a.instagram .icon { background: url(../images/common/ico_instagram.png) no-repeat center/cover;}
.footer .snsGroup a.naver .icon { background: url(../images/common/ico_naver.png) no-repeat center/cover;}
.footer .wamark { position: absolute; right: 0; top: 8rem;}
.footer .wamark img { width: auto; height: 4.2rem;}
.footer .contextAsk {display: flex; flex-wrap: wrap; column-gap: 14px; margin-top: 1.2rem;}
.footer .contextAsk li > span {display: inline-block; margin-right: 5px;}
.footer .contextAsk li a:link {color: #fff;}

/* 20250730 답변 줄바꿈+스크롤 처리 */
.commentContent { max-height: 150px; overflow: auto; white-space: pre-wrap;}

/* 공통 STYLE
**********************************************/

/* margin */
.mt0 { margin-top: 0 !important;}
.mt10 { margin-top: 1rem !important;}
.mt15 { margin-top: 1.5rem !important;}
.mt20 { margin-top: 2rem !important;}
.mt30 { margin-top: 3rem !important;}
.mt60 { margin-top: 6rem !important;}

.ml0 { margin-left: 0 !important;}

.mr0 { margin-right: 0 !important;}

/* hr */
hr.h40 { height: 4rem;}

/* 정렬 */
.flexLeft { display: flex; align-items: center;}
.flexCenter { display: flex; align-items: center; justify-content: center;}
.flexBetween { display: flex; align-items: center; justify-content: space-between;}
.flexEnd { display: flex; align-items: center; justify-content: flex-end;}

/* 색상 */
.highlight { color: #1D34C3;}
.colorGreen { color: #53b429;}
.colorRed { color: #ff0000;}

/* 현재위치 [ 20250605 웹접근성 수정 , 수정자 : phh] */
/* .location { display: flex; align-items: center; justify-content: flex-end; list-style: none; margin: 2.4rem 0 1rem; padding: 0; font-size: 1.2rem;}
.location li { position: relative; padding-left: 1.3rem; margin-right: 1rem; }
/* 첫번째 li(홈): 홈 아이콘 표시 */
/* .location li:first-child::before { content: ''; position: absolute; left: .8rem; top: -.1rem; width: 1.7rem; height: 1.5rem; background: #fff url(../images/common/ico_location_home.png) no-repeat center/cover; } */
/* 첫번째 li 이후: 구분자 표시 (→) */
/* .location li:not(:first-child)::before { content: ''; position: absolute; left: 0; top: .4rem; width: .4rem; height: .7rem; background: url(../images/common/ico_location.png) no-repeat center/cover; } */
/* 마지막 li: 강조색상 */
/* .location li:last-child { color: #20599b; } */

.location { display: flex; align-items: center; list-style: none; margin: 0; padding-top: 60px; margin-bottom: 30px; font-size: 1.2rem; }
.location li { position: relative; margin-right: 29px; font-size: 16px; color: #555; font-weight: 600; line-height: 16px; }
.location li:first-child::before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: #fff url(../images/common/ico_home.svg) no-repeat center/cover; }
.location li:not(:first-child)::before { content: ''; position: absolute; left: -17px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; background: #ddd; border-radius: 50%; }
.location li:last-child { color: #333333; }

.subPageTitle {position: relative; font-size: 42px; font-weight: 700; margin-bottom:60px;}
/*.subPageTitle::before { content: ''; position: absolute; bottom: -4rem; right: -16%; width: 53.8rem; height: 22.8rem; transform: rotateY(180deg); background: url(../images/main/main_decobg.png) no-repeat 50% / auto 100%;}*/
.subPageTitle2 { position: relative; font-weight: 700; font-size: 32px; display: flex; align-items: center; gap: 10px; display: flex; }
.subPageTitle2:before { content: ""; background: #E62D4E; width: 13px; height: 13px; border-radius: 5px; }
.subPageTitle3 { margin-top: 40px; font-size: 2.8rem; font-weight: bold; }
.subPageTitle4 { margin-top: 40px; font-size: 2.6rem; font-weight: 600; line-height: 1.2;}
.subPageTitle5 { margin-top: 40px; font-size: 22px; font-weight: 600; color: #1D34C3; margin-bottom: 16px; }

/* Heading */
h3.fontH3 {position: relative; margin-top: 6rem; font-size: 3.2rem; font-weight: 700; letter-spacing: -1.92px; color: #000; padding-left: 2.2rem;}
h3.fontH3::before {content: ''; position: absolute; top: 8px; left: 0; width: 1rem; height: 1rem; background-color: #E62D4E;}
h3.fontH3-mt { margin-top: 3rem;}
h4.fontH4 { font-size: 2.2rem; font-weight: bold;}
h4.fontH4-line { margin-top: 2.3rem; padding-top: 2.3rem; border-top: 1px solid #d4d4d4;}
h4.fontH4.addRequired { display: flex; align-items: center; }
h4.fontH4.addRequired .required { display: block; height: 1.4rem; margin-left: 1rem; color: #ff0000;}
h4.fontH4-mt { margin-top: 5rem;}
h4.fontH4-mt2 { margin-top: 4rem;}

.h3Between { display: flex; align-items: center; justify-content: space-between; margin-top: 6rem;}
.h3Between h3.fontH3 { margin-top: 0;}
.h3Between .btn { display: flex; align-items: center; justify-content: center; height: 3.2rem; padding: 0 1.9rem; font-size: 1.4rem; color: #20599b; border: 1px solid #20599b; border-radius: 1.6rem;}
.h3Between select { height: 3.3rem; margin-left: 1rem; font-size: 1.5rem;}
.h3Between .selectBtn { display: flex; align-items: center; justify-content: center; height: 3.3rem; margin-left: .6rem; padding: 0 1.9rem; font-size: 1.4rem; border: 1px solid #bcbcbc; border-radius: .6rem; transition: color, border-color, background-color .2s ease-in-out;}
.h3Between .selectBtn:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;}
.h3Between .roundBtn { display: flex; align-items: center; justify-content: center; height: 3.3rem; margin-left: .6rem; padding: 0 1.9rem; font-size: 1.4rem; border: 1px solid #bcbcbc; border-radius: 1.7rem; transition: color, border-color, background-color .2s ease-in-out;}
.h3Between .roundBtn:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;}
.h3Between .roundBtn span { margin-top: -.1rem;}
.h3Between .roundBtn .icon { display: block; width: 1.2rem; height: 1.1rem; margin-right: .9rem; background: url(../images/common/ico_roundBtn.png) no-repeat center/cover;}
.h3Between .selectNum { margin-right: .6rem; font-size: 1.5rem;font-weight: 600; letter-spacing: -0.9px; color: #444;}
.h3Between-mt { margin-top: 3rem;}
.h3Between-pd { padding: 0 .7rem;}
.h3Between-pd-right { padding-right: .7rem;}
.h3Between-right { justify-content: flex-end;}

.h3Flex { display: flex; align-items: center; margin-top: 3.5rem;}
.h3Flex .btn { display: flex; align-items: center; height: 3.2rem; margin: -.2rem 0 0 1.5rem; padding: 0 1.7rem; border: 1px solid #bcbcbc; border-radius: 1.6rem; transition: border-color, background-color .2s ease-in-out;}
.h3Flex .btn:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;}
.h3Flex .btn:hover .icon { background-image: url(../images/common/ico_search_detail_blue.png);}
.h3Flex .btn span { display: block; margin-top: -.2rem;}
.h3Flex .btn .icon { display: block; width: 1.7rem; height: 1.7rem; margin-left: 0.7rem; background: url(../images/common/ico_search_detail.png) no-repeat center/cover;}

/* 버튼 */
.button { display: inline-flex; align-items: center; justify-content: center; padding: 0 1.6rem; transition: background-color .2s ease-in-out, border-color .2s ease-in-out;}
.button.h40 { min-width: 8rem; min-height: 4rem; height: 4rem;}
.button[disabled] { color: #959595 !important; border-color: #EAEAEA !important; background-color: #EAEAEA !important; cursor: not-allowed;}
.button.black { color: #fff; background-color: #333;}
.button.black:hover, 
.button.black:active { background-color: #000;}
.button.blue { color: #fff; background-color: #366cc3;}
.button.blue:hover,
.button.blue:active { background-color: #2b569c;}
.button.gray { background-color: #eaeaea;}
.button.gray:hover,
.button.gray:active { background-color: #dbdbdb;}
.button.lineBlack { border: 1px solid #333; background-color: #fff;}
.button.lineBlack:hover,
.button.lineBlack:active { color: #366cc3; border-color: #366cc3;}
.button.lineBlack[disabled] { background-color: #f7f7f7 !important;}

#wrap .downloadBtn { display: flex; align-items: center; justify-content: center; height: 3.6rem; margin-right: .7rem; padding: 0 1.2rem; text-decoration: none; line-height: 1; border: 1px solid #1D34C3; background-color: #fff; border-radius: .6rem; transition: background-color .2s ease-in-out;}
#wrap .downloadBtn:hover { background-color: #d0e9f8;}
.downloadBtn .icon { width: 1.6rem; height: 1.6rem; margin-right: .6rem; background: url(../images/common/ico_button_down.png) no-repeat center/cover;}
.downloadBtn .icon2 { width: 1.6rem; height: 1.7rem; background-image: url(../images/common/ico_button_down2.png);}
.downloadBtn span { margin-top: -.2rem; font-size: 1.4rem; font-weight: 600; color: #1D34C3;}
.downloadBtn-ml { margin-left: 1.8rem;}
.downloadBtn-single { display: inline-flex; margin-right: 0;}

.controlBtns { display: flex; align-items: center; justify-content: center; margin-top: 1.8rem; text-align: center;}
.controlBtns .btn { display: flex; align-items: center; justify-content: center; width: 17.3rem; height: 5.3rem; font-size: 1.8rem; font-weight: 500; color: #20599b; border: 1px solid #20599b; border-radius: .6rem; transition: background-color .2s ease-in-out;}
.controlBtns .btn ~.btn { margin-left: .9rem;}
.controlBtns .btn:hover { background-color: #d0e9f8;}
.controlBtns .btn.orangeStyle { color: #fff; background-color: #20599b;}
.controlBtns .btn.orangeStyle:hover { background-color: #366cc3;}

.largeBtns { display: flex; align-items: center; justify-content: center; margin-top: 2.2rem; text-align: center;}
.largeBtns .btn { display: flex; align-items: center; justify-content: center; height: 4rem; padding: 0 2rem; border: 1px solid #1D34C3; background-color: #fff; color: #1D34C3; letter-spacing: -0.96px; border-radius: .5rem; transition: color, border-color, background-color .2s ease-in-out;}
.largeBtns .btn ~ .btn { margin-left : 1.2rem;}
 /*.largeBtns .btn:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;} */
.largeBtns .btn span { margin-top: -.2rem;}
.largeBtns .btn.lineOrange { color: #20599b; border-color: #20599b; background-color: #fff;}
.largeBtns .btn.lineOrange:hover { background-color: #d0e9f8;}
.largeBtns .btn.save { color: #fff; border-color: #1D34C3; background-color: #1D34C3;}
.largeBtns .btn.save:hover { background-color: #366cc3;}
.largeBtns .btn.black { color: #fff; border-color: #5c5c5c; background-color: #5c5c5c;}
.largeBtns .btn.black:hover { background-color: #000;}
.largeBtns .btn.white { background-color: #fff;}
.largeBtns .btn.white:hover { background-color: #d0e9f8;}
.largeBtns-mt { margin-top: 3rem;}

.seachWrite { display: flex; align-items: center; height: 3.5rem; padding: 0 2rem; font-size: 1.5rem; border: 1px solid #727272; border-radius: 1.8rem; transition: color, border-color, background-color .2s ease-in-out;}
.seachWrite span { margin-top: -.2rem;}
.seachWrite .icon { display: block; width: 1.6rem; height: 1.5rem; margin-right: .6rem; background: url(../images/common/ico_write.png) no-repeat center/cover;}
.seachWrite:hover { color: #20599b;  border-color: #9dd2f2; background-color: #d0e9f8;}
.seachWrite:hover .icon { background-image: url(../images/common/ico_write_blue.png);}
.seachWrite.iconPlus .icon { width: 1.2rem; height: 1.1rem; margin-right: .5rem; background: url(../images/common/ico_plus.png) no-repeat center/cover;}
.seachWrite.iconPlus:hover .icon { background-image: url(../images/common/ico_plus_blue.png);}

/* FAQ 아코디언 */
.acoList { margin-top: 1.3rem; border-top: 2px solid #000;}
.acoList >li { border-bottom: 1px solid #d4d4d4;}
.acoList >li button { display: block; position: relative; width: 100%; padding: 2rem 5rem 2rem .5rem; text-align: left; line-height: 24px; transition: color, background-color .2s ease-in-out;}
.acoList >li button:hover { color: #20599b; background-color: #f0f7fa;}
.acoList >li button::after { content: ''; display: block; position: absolute; right: 1.8rem; top: 2.9rem; width: 2rem; height: 1.8rem; background: url(../images/common/ico_acoList.png) no-repeat left top/cover;}
.acoList >li button.active { color: #20599b;}
.acoList >li button.active::after { background-position-y: -2.8rem;}
.acoList >li .accopanel { display: none; padding: 2rem .5rem 3rem; color: #767676; line-height: 1.6;}
.acoList >li .accopanel * { font-family: "Noto Sans KR" !important; font-size:1.6rem !important; font-weight: 400 !important;}

/* 탭 */
/* .tablist { display: flex; align-items: center; margin-top: 2rem;}
.tablist button,
.tablist a { display: flex; align-items: center; justify-content: center; height: 4.8rem; padding: 0 2rem; border: 1px solid #dbdbdb;}
.tablist a ~ a { border-left: none;}
.tablist button.active,
.tablist a.active { color: #fff; border-color: #366cc3; background-color: #366cc3;}
.target .tabpanel { display: none;}
.target .tabpanel.active { display: block;}

.tabBody { text-align: center;}

.tabRound,
.tabApplist { display: inline-flex; align-items: center; justify-content: center; margin: 3.5rem auto 1.7rem;}
.tabRound li,
.tabApplist li { background-color: #f6f6f6;}
.tabRound li .btn,
.tabApplist li button { display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; height: 5rem; padding: 0 3.5rem; border-radius: 2.5rem; cursor: pointer; transition: color, background-color .2s ease-in-out;}
.tabRound li .btn:hover,
.tabRound li .btn.active,
.tabApplist li button:hover,
.tabApplist li button.active { color: #fff; font-weight: 500; background-color: #20599b;}
.tabRound li .btn span,
.tabApplist li .tab span { display: block; margin-top: -.2rem; white-space: nowrap;}
.tabRound li:first-child,
.tabApplist li:first-child { border-radius: 2.5rem 0 0 2.5rem;}
.tabRound li:last-child,
.tabApplist li:last-child { border-radius: 0 2.5rem 2.5rem 0;} */

.tablist { display: flex; align-items: center; margin-top: 2rem;}
.tablist button,
.tablist a { display: flex; align-items: center; justify-content: center; height: 4.8rem; padding: 0 2rem; border: 1px solid #dbdbdb;}
.tablist a ~ a { border-left: none;}
.tablist button.active,
.tablist a.active { color: #fff; border-color: #366cc3; background-color: #366cc3;}
.target .tabpanel { display: none;}
.target .tabpanel.active { display: block;}

.tabBody { text-align: center; margin-bottom: 60px; }
.tabRound, .tabApplist, .tabList  { display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.tabRound li, .tabApplist li { background-color: #F0F0F0; flex: 1;}
.tabRound li .btn, .tabApplist li button { display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; width: 100%; height: 52px; padding: 0; border-radius: 2.5rem; cursor: pointer; transition: color, background-color .2s ease-in-out; font-size: 20px; font-weight: 500; color: #666; }
.tabRound li .btn:hover, .tabRound li .btn.active, .tabApplist li button:hover, .tabApplist li button.active { color: #fff; font-weight: 500; background-color: #1B32C3; }
.tabRound li .btn span, .tabApplist li .tab span { display: block; margin-top: -.2rem; white-space: nowrap; }
.tabRound li:first-child, .tabApplist li:first-child { border-radius: 2.5rem 0 0 2.5rem; }
.tabRound li:last-child, .tabApplist li:last-child { border-radius: 0 2.5rem 2.5rem 0; }


/* 검색 조건 */
.seachControleBody { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 2rem;}
.seachControleBody .flexLeft select { height: 3.3rem; margin-left: 1.6rem; font-size: 1.4rem;}
.seachControleBody .flexLeft .selectBtn { display: flex; align-items: center; justify-content: center; height: 3.3rem; margin-left: .6rem; padding: 0 1.9rem; font-size: 1.4rem; border: 1px solid #bcbcbc; border-radius: .6rem; transition: color, border-color, background-color .2s ease-in-out;}
.seachControleBody .flexLeft .selectBtn span { display: block; margin-top: -.2rem;}
.seachControleBody .flexLeft .selectBtn:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;}
.seachControle { display: flex; align-items: center;}
.seachControle .inlineBody { display: flex; align-items: center; position: relative; margin-left: 1.4rem; border: 2px solid #6e6e6e; border-radius: .6rem;}
.seachControle .inlineBody select { font-size: 1.4rem; border: none;}
.seachControle .inlineBody .rightLine { position: relative;}
.seachControle .inlineBody .rightLine::after { content: ''; display: block; position: absolute; right: 0; top: 50%; width: 1px; height: 1.9rem; margin-top: -1rem; background-color: #9395a5;}
.seachControle .inlineBody input { width: 23rem; padding-right: 5.5rem; font-size: 1.4rem; border: none;}
.seachControle .inlineBody .JS-resetBtn { right: 4rem;}
.seachControle .done { display: block; position: absolute; right: 0; top: 0; padding: .9rem;}
.seachControle .done .icon { display: block; width: 2.2rem; height: 2.2rem; background: url(../images/common/ico_search_controle.png) no-repeat center/cover;}

/* 페이지 넘버 */
.pageNumber { display: flex; align-items: center; justify-content: center; margin-top: 2rem;}
.pageNumber a { display: flex; align-items: center; justify-content: center; padding: .8rem; font-size: 1.8rem;}
.pageNumber a:hover,
.pageNumber a.active { color: #20599b;}
.pageNumber a.prev,
.pageNumber a.next,
.pageNumber a.first,
.pageNumber a.last { width: 3.2rem; height: 3.2rem; margin-bottom: -.1rem; border: 1px solid #d9d9d9; border-radius: 50%;}
.pageNumber a.prev:hover,
.pageNumber a.next:hover,
.pageNumber a.first:hover,
.pageNumber a.last:hover { background-color: #f0f7fa;}
.pageNumber a.prev { margin: 0 1.4rem -.1rem .7rem;}
.pageNumber a.next { margin: 0 .7rem -.1rem 1.4rem;}
.pageNumber a i { display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem;}
.pageNumber a.prev i { background: url(../images/common/ico_pageNumber_prev.png) no-repeat center/cover;}
.pageNumber a.next i { background: url(../images/common/ico_pageNumber_next.png) no-repeat center/cover;}
.pageNumber a.first i { background: url(../images/common/ico_pageNumber_first.png) no-repeat center/cover;}
.pageNumber a.last i { background: url(../images/common/ico_pageNumber_last.png) no-repeat center/cover;}

/* 검색 조건 등 */
.listControle { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; padding: 1.1rem .7rem 1.1rem 1.4rem; border-top: 1px solid #000;}
.listControle .btn { display: flex; align-items: center; height: 4rem; padding: 0 1.8rem; font-size: 1.6rem; border-radius: .6rem; transition: color, border-color, background-color .2s ease-in-out;}
.listControle .btn ~.btn { margin-left: 1.2rem;}
.listControle .btn.single,
.listControle .btn.multiple {display: flex; align-items: center; color: #1D34C3; border: 1px solid #1D34C3;}
.listControle .btn.single::before,
.listControle .btn.multiple::before {content: ''; margin-right: 0.4rem; width: 1.2rem; height: 1.2rem; background: url(../images/common/icon_add_point.svg) no-repeat 50% / 100% auto;}
.listControle .btn.single:hover,
.listControle .btn.multiple:hover { background-color: #d0e9f8;}

/* .listControle .downloadBtn { display: flex; align-items: center; justify-content: center; height: 3.6rem; padding: 0 1.2rem; border: 1px solid #bcbcbc; border-radius: .6rem;}
.listControle .downloadBtn .icon { width: 1.6rem; height: 1.6rem; margin-right: .6rem; background: url(../images/common/ico_button_down.png) no-repeat center/cover;}
.listControle .downloadBtn span { font-size: 1.4rem;} */
.listControle--right { justify-content: flex-end;}
.h3Between .listControle {border-top: 0; margin: 0;}

/* viewBody */
.viewBody .notice { display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem 0 1rem;}
.viewBody .notice >span { padding-top: .7rem; font-size: 2rem; color: #20599b;}
.viewBody h4 { margin-top: 1.5rem; padding: 0 1rem; font-size: 2rem; font-weight: 500; word-break: break-all; line-height: 1.6;}
.viewBody .lineSpace { display: flex; align-items: center; justify-content: flex-end; margin-top: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid #d4d4d4;}
.viewBody .lineSpace >span { display: flex; align-items: center; font-size: 1.4rem;}
.viewBody .lineSpace >span ~ span { margin-left: 4.5rem;}
.viewBody .lineSpace >span span { margin-left: .4rem;}
.viewBody .lineSpace >span span:last-child { font-weight: 400;}
.viewBody .article { padding: 4rem 1rem; font-weight: 400; line-height: 1.6; border-bottom: 1px solid #d4d4d4;}
.viewBody .article * { font-family: "Noto Sans KR" !important; color: #000 !important; word-break: break-word;}
.viewBody .article p ~ p { margin-top: 2rem;}
.viewBody .article img { max-width: 100% !important; height: auto !important;}
.viewBody-lineTop { margin-top: 2.2rem; padding-top: 1.5rem; border-top: 1px solid #000;}

.postGroup { margin-top: 3.2rem; border-top: solid 1px #d4d4d4;}
.postGroup li { display: flex; align-items: center; padding: 2rem; border-bottom: solid 1px #d4d4d4;}
.postGroup li .colorGray { width: 11rem;}
.postGroup li a { display: inline-block; font-weight: 400; line-height: 1.4;}
.postGroup li .ellipsis { font-weight: 400;}
.postGroup li a:hover { color: #20599b; text-decoration: underline;}

.snsGroup .sns-link { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border: 1px solid #e3e3e3; border-radius: 50%; transition: border-color, background-color .2s ease-in-out;}
.snsGroup .sns-link:hover { border-color: #9dd2f2; background-color: #d0e9f8;}
.snsGroup .sns-link .icon { display: block; width: 2rem; height: 2rem; background: url(../images/common/ico_sns.png) no-repeat center/cover;}
.snsGroup .sns-link:hover .icon { background-image: url(../images/common/ico_sns_blue.png);}


/* overflow */
/* .overflowY { overflow-x: hidden; overflow-y: auto;}
.overflowY510 { height: 51rem;}
.overflowY::-webkit-scrollbar { width: 1.3rem;}
.overflowY::-webkit-scrollbar-track { background-color: #e9e9e9; border-radius: .7rem;}
.overflowY::-webkit-scrollbar-thumb { border: 1px solid #e9e9e9; background-color: #fff; border-radius: .6rem;}
.overflowX { overflow-x: scroll; overflow-y: hidden;}
.overflowX::-webkit-scrollbar { display: none;} */
#wrap .pcOverflowX { overflow-x: auto; width: 100%;}
#wrap .pcOverflowX table { table-layout: auto; width: auto; min-width: 100%; border-collapse: collapse;}
#wrap .pcOverflowX table th,
#wrap .pcOverflowX table td { white-space: nowrap;}

.overflowY { overflow-x: hidden; overflow-y: auto;}
.overflowY510 { height: 51rem;}
.overflowY::-webkit-scrollbar { width: 2px;}
.overflowY::-webkit-scrollbar-track { background: #f2f2f2;}
.overflowY::-webkit-scrollbar-thumb { background: #000;}
.overflowY::-webkit-scrollbar-thumb:hover {background: rgba(0, 0, 0, 0.5);}
.overflowX { overflow-x: auto; overflow-y: hidden;}
.overflowX::-webkit-scrollbar { height: 2px;}
.overflowX::-webkit-scrollbar-track { background: #f2f2f2;}
.overflowX::-webkit-scrollbar-thumb { background: #000;}
.overflowX::-webkit-scrollbar-thumb:hover {background: rgba(0, 0, 0, 0.5);}

/* loading */
.load8 { overflow: hidden; position: fixed; z-index: 1000; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.7); outline: none; display: none;}
.load8::after { content: ""; display: inline-block; height: 100%; vertical-align: middle;}
.load8 .loader { position: absolute; left: 50%; top: 50%; width: 5rem; height: 5rem; margin: -2.5rem 0 0 -2.5rem; text-indent: -9999em; border-top: 6px solid rgba(255, 255, 255, 0.2); border-right: 6px solid rgba(255, 255, 255, 0.2); border-bottom: 6px solid rgba(255, 255, 255, 0.2); border-left: 6px solid #fff; border-radius: 50%; animation: load8 1.1s infinite linear;}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loadBody { overflow: hidden; position: fixed; z-index: 1000; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.7); outline: none;display:none;}
.loadBody::after { content: ""; display: inline-block; height: 100%; vertical-align: middle;}
.loadBody .load8 { all: unset;}
.loadBody .load8 .loader { position: initial; left: initial; top: initial; width: 8rem; height: 8rem; margin: 0 auto; border-width: 1rem; border-top-color: #e3e3e3; border-right-color: #e3e3e3; border-bottom-color: #e3e3e3; border-left-color:#20599b; background-color: #fff;}
.loadBody .load8::after { display: none;}
.loadBody .position { position: relative; left: 50%; top: 50%; width: 50rem; height: 30rem; margin: -15rem 0 0 -25rem; padding: 5rem 1rem 1rem; text-align: center; background-color: #fff; border-radius: 1rem;}
.loadBody .position dl { margin-top: 4rem; line-height: 1.6;}
.loadBody .position dl dt { font-size: 2.4rem; font-weight: bold;}
.loadBody .position dl dd { margin-top: 1rem; font-size: 1.8rem;}

/* 404 */
.notPage { padding: 22rem 0 10rem; text-align: center;}
.notPage .icon { display: block; width: 9.4rem; height: 9.3rem; margin: 0 auto; background: url(../images/common/ico_404.png) no-repeat center/cover;}
.notPage h3 { margin: 1.5rem 0 3rem; font-size: 3.2rem; font-weight: 500;}
.notPage p { font-weight: 400; color: #5e5e5e; line-height: 1.4;}
.notPage p.sub { margin-top: 2rem;}
.notPage .btnGroup { display: flex; align-items: center; justify-content: center;}
.notPage .btnHome { display: inline-flex; align-items: center; justify-content: center; width: 22rem; height: 5rem; margin-top: 6rem; font-size: 1.8rem; font-weight: 500; background-color: #fff; border: 1px solid #e3e3e3; border-radius: 2.5rem; transition: color, border-color, background-color .2s ease-in-out;}
.notPage .btnHome:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;}
.notPage .btnRefresh { display: inline-flex; align-items: center; justify-content: center; width: 22rem; height: 5rem; margin: 6rem 0 0 1rem; font-size: 1.8rem; font-weight: 500; color: #20599b; background-color: #fff; border: 1px solid #83b2e9; border-radius: 2.5rem; transition: color, border-color, background-color .2s ease-in-out;}
.notPage .btnRefresh:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;}

/* swiperJS Hook */
.swiper-slide a { display: block;}
.swiper-button-prev { width: 3.4rem; height: 3.4rem; border: 1px solid #e3e3e3;  background: #fff url(../images/common/ico_swiperjs_left.png) no-repeat center; border-radius: 50%;}
.swiper-button-next { width: 3.4rem; height: 3.4rem; border: 1px solid #e3e3e3;  background: #fff url(../images/common/ico_swiperjs_right.png) no-repeat center; border-radius: 50%;}
.swiper-button-prev:hover,
.swiper-button-next:hover { border-color: #9dd2f2; background-color: #f0f7fa;}
.swiper-button-prev.swiper-button-disabled, 
.swiper-button-next.swiper-button-disabled { opacity: .5;}
.swiper-pagination-bullet { width: 2.4rem; height: 2.4rem; background-color: #fff; border-radius: .8rem; opacity: 1; transition: width .2s ease-in-out;}
.swiper-pagination-bullet ~ .swiper-pagination-bullet { margin-left: 1rem;}
.swiper-pagination-bullet-active { width: 4rem; background-color: #5093e2 !important;}

.stopControl { display: block; width: 2.4rem; height: 2.4rem; background: url(../images/common/ico_stopControl.png) no-repeat left top/cover;}
.stopControl.play { background-position-y: -2.6rem;}

/* SB차트 Hook */
.sbchart-no-data { z-index: 1 !important;}

/* 서브 BG */
.hWrap { display: flex; align-items: center; justify-content: center; height: 13rem; background:#4480cb url(../images/common/bg_submMain.png)  no-repeat center;}
.hWrap h2.h2 { margin-top: .2rem; font-size: 2.7rem; font-weight: bold; color: #fff; text-align: center;}

/* 데이터 없을경우 */
.emptyTable { padding: 5rem 0; text-align: center;}
.emptyTable .icon { display: block; width: 8.6rem; height: 8.7rem; margin: 0 auto; background: url(../images/common/ico_emptyTable.png) no-repeat center/cover;}
.emptyTable p { margin-top: 2rem; font-size: 2rem;}

.noRusult { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 1rem; padding: 14rem 0; text-align: center; line-height: 1.6; border-bottom: 1px solid #d4d4d4;}
.noRusult .icon { display: block; width: 11.6rem; height: 11.8rem; background: url(../images/common/ico_emptyTable_default.png) no-repeat center/cover;}
.noRusult .title { display: block; margin-top: 3rem; font-size: 2.2rem;}
.noRusult .subTitle { display: block; margin-top: 2rem; font-weight: 400;}

.noDigital { padding: 15rem 0;}
.noDigital .title { font-size: 2rem; font-weight: 500; text-align: center;}
.noDigital .largeBtns { margin-top: 3rem;}


/* 챗봇 */
.scroll.sub .chatQuickBox {left: 30px; top: 200px; /* top: 290px; */}
.scroll.sub2 .chatQuickBox {left: 30px; top: 150px;}

.chatBox {position: absolute; z-index: 101; left:-500px;  opacity:0; width:346px; height:200px; top:70%; background-color:#27ABD4; border-radius:0px 15px 15px 15px; transition:all 1s 0.3s ease; padding: 32px 40px;}
    .chatLink:link {color: #fff; font-size: 24px; line-height: 32px; font-weight: 500; margin-bottom: 12px; display: inline-block; position: relative; letter-spacing: -0.06em; } 
    .chatLink:link::after {content: ""; display: block; width: 20px; height: 20px; background: url(../images/common/ico_aside_arrow_w.svg) no-repeat center center; position: absolute; right: -25px; bottom: 5px; transition: all 0.3s;}
    .chatLink:link:hover::after {transform: translateX(10px);} 
    .chatBox .cicon {position: absolute; right:30px; top:-25px;}
    .chatBox .cText {font-size: 18px; line-height: 24px; color: rgba(255,255,255,0.8);}
.chatQuickBox {position: fixed; left: -300px; top: 200px; z-index: 100;  transition:all 0.6s ease;}
.chatQuickBoxIn {position: absolute; left: -300px; transition: all 0.6s;}
.chatQuickBoxIn.on {left: 0px;}
    .quickBlock {display: block; background: #1FA7D2; border-radius: 0 15px 15px 15px; padding: 22px 20px; width: 197px; min-height: 150px; box-sizing: border-box; margin-bottom: 3px;}
    .quickBlock .chatLink {font-size: 20px; line-height: 26px; color: #fff; font-weight: 500; width: 50%; display: block; position: relative; margin-bottom: 7px;}
    .quickBlock .chatLink::after {content: ""; display: block; width: 20px; height: 20px; background: url(../images/common/ico_aside_arrow_w.svg) no-repeat center center; position: absolute; right: -15px; bottom: 3px; transition: all 0.3s;}
    .quickBlock strong {font-weight: 500;}
    .quickBlock p {font-size: 16px; line-height: 22px; color: rgba(255,255,255,0.8); word-break: keep-all;}
    .quickBlock a:hover .chatLink::after {transform: translateX(5px);}
    .quickImg {position: absolute; right: 24px; top: -10px; width: 52px; height: 52px;}
    .quickList li {display: flex; align-items: center; justify-content: space-between; border-bottom: 1px dashed #D7D7D7; padding: 13px 0; font-size: 17px; line-height: 32px; color: #444; font-weight: 500; transition: all 0.3s;}
	.quickList li a {display: flex; justify-content: space-between; align-items: center; width: 100%;}
    .quickList li a:hover {color: #1B32C3;}
    .quickList .key span {font-size: 22px; font-weight: 600; color: #1F41CA; margin-right: 4px;}
    .quickList .use span {width: 16px; height: 16px; display: flex; justify-content: center; align-items: center;}
    .quickList .use a path {transition: all 0.3s;}
    .quickList .use a:hover path {stroke: #1B32C3;}
    .chatClose {border-radius: 50%; border: 1px solid #CFCFCF; width: 22px; height: 22px; background: #fff; position: absolute; right: 0; top: -30px; transition: all 0.3s;}
      .chatClose line {transition: all 0.3s;}
      .chatClose:hover {border-color: #1B32C3;}
      .chatClose:hover line {stroke: #1B32C3;}
      .chatOpen {background: #1FA7D2 url(../images/common/ico_aside_arrow_w.svg) no-repeat 10px center / 7px; position: absolute; left: -130px; top: 0; border-radius: 0 15px 15px 0; width: 94px; height: 60px; transition: all 0.6s;}
      .chatOpen > p {text-align: right; margin-right: 14px; font-size: 13px; line-height: 15px; color: #fff; position: relative;}
      .chatOpen > p::after {content: ""; position: absolute; left: 26px; top: 0; bottom: 0; margin: auto 0; display: block; width: 0; height: 30px; border: 1px dashed rgba(255, 255, 255, 0.2);}
      .miniQuickImg {width: 35px; height: 35px; position: absolute; top: -25px; right: 19px;}
      .chatOpen.on {left: -30px;}



/* 인풋
**********************************************/

/* 인풋 성공 실패 메세지 */
.requireText { position: relative; margin-top: 0.5rem; padding-left: 2rem; font-size: 1.4rem;}
.requireText.error { color: #ee0700;}
.requireText.error::after { content: ''; position: absolute; left: 0; top: 0; width: 1.6rem; height: 1.6rem; background: url(../images/common/ico_error.svg) no-repeat/cover;}
.requireText.success { color: #366cc3;}
.requireText.success::after { content: ''; position: absolute; left: 0; top: 0; width: 1.6rem; height: 1.6rem; background: url(../images/common/ico_success.svg) no-repeat/cover;}

/* 인풋 관련 */
.phone input { width: 10rem;}
.phone span ~ span { position: relative; margin-left: 2.5rem;}
.phone span ~ span::before { content: ''; display: block; position: absolute; left: -1.6rem; top: 2rem; width: .7rem; height: 1px; background-color: #333;}

.email input { width: 20rem;}
.email span { position: relative; margin-left: 3.3rem;}
.email span::before { content: '@'; position: absolute; left: -2.5rem; top: 1rem;}
.email select { width: 20rem; margin-left: .4rem;}

/* 인풋 파일 */
.fileStyle { display: flex; align-items: center; position: relative;}
.fileStyle input[type=text] { position: relative; z-index: 1;}
.fileStyle input[type=file] { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.fileStyle .por { position: relative; flex: 1;}
.fileStyle .labelBtn { display: inline-flex; align-items: center; justify-content: center; min-width: 80px; height: 3.6rem; margin-right: .4rem; padding: 0 1.6rem; border: 1px solid #bcbcbc; background-color: #eaeaea; transition: background-color .2s ease-in-out, border-color .2s ease-in-out; cursor: pointer; border-radius: .6rem;}
.fileStyle .labelBtn:hover { color: #366cc3; border-color: #366cc3;}
.fileStyle .inputText { border-color: #fff; background-color: #fff;}
.fileStyle .inputText:hover { border-color: #fff; background-color: #fff;}
.fileStyle .inputText.wp100 { width: 100% !important;}
.fileStyle .flexLeft .labelText { display: block; margin: 0 1rem;}
.fileStyle .clearBtn { display: block; position: absolute; right: 0; top: 1rem; z-index: 1;}
.fileStyle .clearBtn .icon { display: block; width: 2rem; height: 2rem; background: url(../images/common/ico_clear.svg) no-repeat center/cover;}
.fileStyle.addCheckbox .boxDesign { height: 3.6rem; margin: 0 .5rem;}

/* .fileList li { margin-top: 8px;} */
/* .fileList li a:hover  { border-bottom: 1px solid #333;} */
.fileList .fileBody { display: flex; align-items: center;}
.fileList .fileBody .filePor { display: flex; align-items: center; flex: 1; position: relative; height: 40px; padding: 0 65px 0 16px; background-color: #f7f7f7; border: solid 1px #dbdbdb;}
.fileList .fileBody .filePor .volume { position: absolute; right: 16px; top: 50%; margin-top: -11px; font-size: 12px; color: #767676;}
.fileList .fileBody .filePor.error { border-color: #ee0700; background-color: #fff;}
.fileList .fileBody .button { margin-left: 4px;}

/* 체크, 라디오 */
.checkboxBox,
.radioBox { display: inline-flex; align-items: center; position: relative;}
.radioBox input[type=radio] { display: inline-block; position: relative; width: 2.3rem; height: 2.3rem; margin: 0 .9rem 0 0; vertical-align: top; cursor: pointer; appearance: none;}
.radioBox input[type=radio]::before { content: ''; position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; background-color: #fff; border-radius: 50%; transition: all .2s ease-in-out; border: 1px solid #a5a5a5;}
.radioBox input[type=radio]::after { content: ''; position: absolute; left: .6rem; top: .6rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; transition: all .2s ease-in-out;}
.radioBox input[type=radio]:checked::before { border-color: #20599b;}
.radioBox input[type=radio]:checked::after { background-color: #20599b;}
.radioBox input[type=radio]:disabled + label { color: #767676;}
.radioBox input[type=radio]:disabled::before { border-color: #dbdbdb; background-color: #ddd;}
.radioBox input[type=radio]:checked:disabled::after { background-color: #888;}

.checkboxBox input { display: inline-block; position: relative; width: 2.3rem; height: 2.3rem; margin: 0 .6rem 0 0; vertical-align: top; cursor: pointer; appearance: none;}
.checkboxBox input:focus { outline-offset: 0px;}
.checkboxBox input::before { content: ''; position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; background-color: #fff; border-radius: .3rem; border: 1px solid #d2d2d2;}
.checkboxBox input::after { content: ''; position: absolute; left: 0; top: 0; width: 2.3rem; height: 2.3rem; border-radius: .3rem; transition: all .2s ease-in-out;}
.checkboxBox input:checked::before { border-color: #20599b;}
.checkboxBox input:checked::after { background: #20599b url(../images/common/ico_checkbox_w.png) no-repeat center/cover;}
.checkboxBox input:disabled::before  { border-color: #d2d2d2;}
.checkboxBox input:disabled::after { background-color: #ccc;}

.checkboxBox label,
.radioBox label { /* margin-top: -.2rem; */ cursor: pointer;}
.checkboxBox input:disabled,
.checkboxBox input:disabled + label,
.radioBox input:disabled,
.radioBox input:disabled + label { cursor: inherit;}


/* 검색어 지우기 */
#wrap input[type=text][readonly] + .JS-resetBtn,
#wrap input[type=password][readonly] + .JS-resetBtn,
#wrap input[type=tel][readonly] + .JS-resetBtn { display: none;}
.searchReset { display: block; position: relative;}
.searchReset .JS-resetBtn { display: none; position: absolute; right: 1rem; top: 50%; width: 1.6rem; height: 1.6rem; margin-top: -0.8rem;}
.searchReset .JS-resetBtn .icon { display: block; width: 100%; height: 100%; background: url(../images/common/ico_clear.svg) no-repeat center/cover;}
.searchReset.btnShow .JS-resetBtn { display: block;}

/* jQuery 달력 */
.calendarBody { display: flex; align-items: center;}
.calendarBody input { flex: 1; position: relative; z-index: 1; width: 100%; padding-right: 0; font-size: 1.5rem; color: #000; border: 1px solid #bcbcbc; border-right: none; background-color: #fff !important; border-radius: .6rem 0 0 .6rem;}
.calendarBody input:hover { border-color: #bcbcbc;}
.calendarBody input::placeholder { color: #757575;}
.calendarBody button { display: flex; align-items: center; justify-content: center; position: relative; width: 4rem; height: 4rem; text-indent: -99999px; border: 1px solid #bcbcbc; border-left: none; background-color: #fff; border-radius: 0 .6rem .6rem 0;}
.calendarBody button::after { content: ''; display: block; position: absolute; left: 50%; top: 50%; width: 2.1rem; height: 1.8rem; margin: -1rem 0 0 -1rem; background: url(../images/common/ico_calendar_disable.png) no-repeat center/cover;}
.calendarBody ~.calendarBody { position: relative; margin-left: 1.1rem; padding-left: 2rem;}
.calendarBody ~.calendarBody::before { content: ''; display: block; position: absolute; left: 0; top: 50%; width: .9rem; height: .4rem; margin-top: -.2rem; background: url(../images/common/ico_calendar.png) no-repeat center/cover;}

/* .calendarBody button.active::after { background: url(../images/common/ico_calendar.svg) no-repeat center/cover;} */
.ui-widget { font-family: "NanumBarunGothic", "Apple SD Gothic Neo", "Droid sans", "Microsoft NeoGothic ", sans-serif}
.ui-datepicker { width: 280px; padding: 12px 16px 6px; background-color: #fff;}
.ui-widget-content { color: #333; border-color: #333; border-radius: 0;}
.ui-widget-header { font-size: 16px; border: none;}
.ui-datepicker-calendar thead th { width: 32px; padding: 10px 0 7px; font-size: 12px; font-weight: 700; color: #959595; border-bottom: 1px solid #dbdbdb;}
.ui-datepicker td { padding: 4px 0; text-align: center;}
.ui-datepicker tbody tr:first-child td { padding-top: 8px;}
.ui-datepicker td a { padding: 0;}
.ui-datepicker-today a { background-color: #eee;}
.ui-datepicker td a.ui-state-active { color: #fff !important; background-color: #366cc3;}
.ui-datepicker-days-cell-over a { outline: 2px dashed #000}

/* .ui-state-hover,
.ui-datepicker td a.ui-state-highlight { background-color: #f7f7f7;} */
.ui-datepicker td.ui-datepicker-week-end a { color: #ee0700;}
.ui-datepicker td:last-child.ui-datepicker-week-end a { color: #0052bb;}
.ui-state-default, 
.ui-widget-content .ui-state-default { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0 auto; font-size: 14px; color: #333; text-align: center; border: none; border-radius: 50%;}
.ui-datepicker .ui-datepicker-prev { display: block; left: -6px; top: 6px; cursor: pointer;}
.ui-datepicker .ui-datepicker-next { display: block; right: -6px; top: 6px; cursor: pointer;}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span { display: block; width: 16px; height: 16px;}
.ui-datepicker .ui-datepicker-prev span { background: url(../images/common/ico_arrow_left.svg) no-repeat center/cover;}
.ui-datepicker .ui-datepicker-next span { background: url(../images/common/ico_arrow_right.svg) no-repeat center/cover;}
.ui-datepicker-year::after { content: '년';}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {	border: none;	font-weight: inherit;	color: inherit;}
/* .ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover { top: 2px;} */
.ui-datepicker .ui-datepicker-title { display: flex; align-items: center; margin: 0; padding: 0 25px;}
.ui-datepicker .ui-datepicker-title select { height: 32px; padding-right: 5px; font-size: 14px; background-position: right 12px top 50%;}
.ui-datepicker .ui-datepicker-title .ui-datepicker-year { flex: 1;}
.ui-datepicker .ui-datepicker-title .ui-datepicker-month { width: 85px; margin-left: 4px;}
.ui-datepicker table { margin: 6px 0 2px;}


/* 레이어
**********************************************/

.layerComm { display: none; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 300; padding: 0 1rem; background-color: rgba(0, 0, 0, 0.61);}
.layerComm .body { overflow: hidden; position: relative; left: 50%; top: 50%; background-color: #fff; transform: translate(-50%, -51%); transition: transform .2s ease-in-out;}
.layerComm .body.w470 { width: 47rem;}
.layerComm .body.w1000 { width: 100rem; max-width: 76vw;}
.layerComm .body.w1200 {width: 120rem; max-width: 78vw;}
.layerComm .body.wLarge { width: 82vw; max-width: 128rem;}
.layerComm.show { display: block; z-index: 300;}
.layerComm.active .body { transform: translate(-50%, -50%);}

.layerComm .style1 { width: 70rem; border: 1px solid #e3e3e3; border-radius: 1.5rem;}
.layerComm .style1 h3 { font-size: 2rem; font-weight: 700;}
.layerComm .style1 .hGroup { display: flex; align-items: center; height: 6.2rem; padding: 0 2rem; border-bottom: 1px solid #dedede;}
.layerComm .style1 .pContents { position: relative; padding: 2rem;}
.layerComm .style1 >.close { position: absolute; right: 0; top: 0; padding: 2.2rem;}
.layerComm .style1 >.close .icon { display: block; width: 1.8rem; height: 1.8rem; background: url(../images/common/ico_layer_close.png) no-repeat center/cover;}

.layerComm .style2 { overflow: auto; width: 50rem; max-height: 80vh; border-radius: 1.5rem 1.5rem 1rem 1rem;}
.layerComm .style2 .swiper { position: relative;}
.layerComm .style2 .swiper-slide img { width: 100%; height: auto;}
.layerComm .style2 .swiper-pagination-bullet { width: 1rem; height: 1rem; margin: 0 0.5rem;}
.layerComm .style2 .position { display: flex; align-items: center; position: absolute; left: 1rem; bottom: -3.2rem; z-index: 10;}
.layerComm .style2 .position .fraction { margin: -.3rem 0 0 1rem;}
.layerComm .style2 .todayGruup { display: flex; align-items: center; justify-content: flex-end; height: 4.2rem; padding: 0 1rem;}
.layerComm .style2 > .popup-layer-header {height: 6.0rem;}
.layerComm .style2 > .popup-layer-header .close { position: absolute; right: 0; top: 0; padding: 2.2rem;}
.layerComm .style2 > .popup-layer-header .close .icon { display: block; width: 1.8rem; height: 1.8rem; background: url(../images/common/ico_layer_close.png) no-repeat center/cover;}


.layerComm .style3 { width: 37rem; border: 1px solid #e3e3e3; border-radius: 1.5rem;}
.layerComm .style3 .pContents { padding: 5rem 3rem; text-align: center; line-height: 1.6;}
.layerComm .style3 .btnSet { display: flex; align-items: center;}
.layerComm .style3 .btnSet button { display: block; flex: 1; height: 6rem;}

.layerComm *:focus { outline-offset: -2px}

/* 하단 버튼 */
.layerComm .btnSet { display: flex; align-items: center; border-top: 1px solid #dedede;}
.layerComm .btnSet button { display: flex; align-items: center; justify-content: center; flex: 1; height: 5rem; transition: color, background-color .2s ease-in-out;}
.layerComm .btnSet button:hover { color: #20599b; background-color: #d0e9f8;}
.layerComm .btnSet button span { font-size: 1.6rem;}
.layerComm .btnSet button ~ button { border-left: 1px solid #dedede;}

/* 토스트 팝업 */
.toast { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 100; padding: 2rem; color: #fff; background-color: rgba(0, 0, 0, .8); border-radius: 1rem;}
.toast .toastClose { position: absolute; right: 0; top: 0; color: #fff;}
.dimmedToast { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 99; background-color: rgba(0, 0, 0, .4);}

/* SNS 아이콘 그룹 */
.layerComm .snsLinks { display: flex; align-items: center; justify-content: center; padding: 4rem 0;}
.layerComm .snsLinks li ~ li { margin-left: 3.5rem;}
.layerComm .snsLinks button { display: block;}
.layerComm .snsLinks button span { display: block; margin-top: .8rem; font-size: 1.4rem;}
.layerComm .snsLinks .icon { display: block; width: 5.3rem; height: 5.3rem; margin: 0 auto;}
.layerComm .snsLinks .facebook .icon { height: 5.4rem; background: url(../images/common/ico_sns_facebook.png) no-repeat center/cover;}
.layerComm .snsLinks .kakao .icon { background: url(../images/common/ico_sns_kakao.png) no-repeat center/cover;}
.layerComm .snsLinks .naver .icon { background: url(../images/common/ico_sns_naver.png) no-repeat center/cover;}
.layerComm .snsLinks .url .icon { background: url(../images/common/ico_sns_link.png) no-repeat center/cover;}

/* 리스트 형태 */
.layerComm .termListLayer >li ~ li { margin-top: 2rem;}
.layerComm .termListLayer >li input[type=text],
.layerComm .termListLayer >li input[type=password],
.layerComm .termListLayer >li input[type=tel] { width: 100%;}
.layerComm .termListLayer .selectBtns button { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border: 1px solid #000; border-radius: 5rem;}
.layerComm .termListLayer .selectBtns button.active { border-color: red;}

.layerComm .managerList { border-top: 1px solid #000;}
.layerComm .managerList li { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.2rem 1.2rem 2rem; border-bottom: 1px solid #d4d4d4;}
.layerComm .managerList li >span { font-size: 1.5rem; font-weight: 400;}
.layerComm .managerList li .btn { display: flex; align-items: center; justify-content: center; height: 3.6rem; padding: 0 1.7rem; font-size: 1.4rem; white-space: nowrap; border: 1px solid #bcbcbc; border-radius: .6rem; transition: color, border-color, background-color .2s ease-in-out;}
.layerComm .managerList li .btn:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;}
.layerComm .managerList li.empty { justify-content: center;}

/* 레이어 검색 콘트롤 */
.layerComm .searchGroupLayer .singleBoxLayer { display: flex; align-items: center;}
.layerComm .searchGroupLayer .singleBoxLayer .label { width: 9rem;}
.layerComm .searchGroupLayer .singleBoxLayer .flexOne { flex: 1;}
.layerComm .searchGroupLayer .singleBoxLayer .flexOne input { width: 100%; border-width: .2rem;}
.layerComm .searchGroupLayer .largeBtnsLayer { display: flex; align-items: center; justify-content: center; margin-top: 1.5rem;}
.layerComm .searchGroupLayer .largeBtnsLayer .btn { display: flex; align-items: center; justify-content: center; min-width: 10rem; height: 4rem; padding: 0 2.6rem; color: #20599b; border: 1px solid #20599b; border-radius: .6rem; transition: background-color .2s ease-in-out;}
.layerComm .searchGroupLayer .largeBtnsLayer .btn:hover { background-color: #d0e9f8;}
.layerComm .searchGroupLayer .largeBtnsLayer .btn ~.btn { margin-left: .6rem;}
.layerComm .searchGroupLayer .largeBtnsLayer .btn.orangeStyle { color: #fff; background-color: #20599b;}
.layerComm .searchGroupLayer .largeBtnsLayer .btn.orangeStyle:hover { background-color: #366cc3;}

.layerComm .singleGroupLayer {display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; align-items: center;  padding: 1.8rem 2rem;}
.layerComm .singleGroupLayer.align-left {justify-content: flex-start;}
.layerComm .singleGroupLayer.align-left input[type="text"] {width: 24.5rem;}
.layerComm .singleGroupLayer .lable { font-size: 1.6rem; font-weight: 600;}
.layerComm .singleGroupLayer .inlineBody { display: flex; align-items: center; position: relative; margin-left: 2rem; border: 2px solid #6e6e6e; background-color: #fff; border-radius: .6rem;}
.layerComm .singleGroupLayer .inlineBody .JS-resetBtn { right: 5rem;}
.layerComm .singleGroupLayer select { height: 4rem; border: none; font-size: 1.4rem;}
.layerComm .singleGroupLayer input { width: 33.5rem; height: 4rem; padding-right: 5.2rem; border: none; font-size: 1.4rem;}
.layerComm .singleGroupLayer .searchReset::after { content: ''; display: block; position: absolute; left: 0; top: 50%; width: 1px; height: 1.6rem; margin-top: -.8rem; background-color: #b9bbc6;}
.layerComm .singleGroupLayer .searchReset-noline::after { display: none;}
.layerComm .singleGroupLayer .done { display: block; position: absolute; right: 0; top: 0; bottom: 0; padding: .5em;}
.layerComm .singleGroupLayer .done .icon { display: block; width: 2.2rem; height: 2.2rem; background: url(../images/common/ico_search_controle.png) no-repeat center / 100% auto;}
.layerComm .largeBtns {padding: 0 2rem 3rem;}
.layerComm .tableBody  .noRusult {border-bottom: 0;}
.layerComm .tableBody  .noRusult .title,
.tableBody .noRusult .title {margin-top: 0; padding: 1rem 0; font-size: 1.6rem; }
.tableBody .noRusult {border-bottom: 0;}
.layerComm .largeBtns .btn.w100 {width: 100%; flex: 1;}

/* 토스트 팝업 메세지 */
.errorToastFlex { display: none; position: absolute; left: 0; bottom: 10.6rem; width: 100%; text-align: center;}
.errorToastFlex .errorToast { display: inline-flex; align-items: center; justify-content: center; min-height: 4rem; padding: 0 2.2rem; background-color: #20599b; border-radius: 2rem;}
.errorToastFlex .errorToast .icon { display: block; width: .6rem; height: 2.3rem; margin-right: 1.4rem; background: url(../images/common/ico_toast_layer.png) no-repeat center/cover;}
.errorToastFlex .errorToast span { display: block; font-size: 1.4rem; color: #fff;}
.errorToastFlex.active { display: block;}



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

/* tableBody */
.tableBody { overflow: hidden; margin-top: 1.4rem; border-top: 1px solid #d4d4d4;}
.tableBody .tdSize { width: 25rem;}
.tableBody table { table-layout: fixed; width: 100%; border-bottom: 1px solid #d4d4d4;}
.tableBody table th { padding: 1.6rem 0; font-size: 1.4rem; line-height: 1.2; border-bottom: 1px solid #d4d4d4; background-color: #f6f7f9;}
.tableBody table td { padding: 1rem 1rem; font-size: 1.4rem; font-weight: 400; text-align: center; line-height: 2.4rem; word-break: break-word; border-bottom: 1px solid #d4d4d4; background-color: #fff; transition: background-color .2s ease-in-out;}
.tableBody table td.textLeft { text-align: left;}
.tableBody table td.textLeft label { cursor: pointer;} /* 디지털자원 조회 레이어 사용 */
.tableBody table td.textLeft label:hover { color: #20599b; text-decoration: underline;}
.tableBody table tr:hover td { background-color: #f0f7fa;}
.tableBody table tr.fixed td { font-weight: 600; color: #20599b; background-color: #f0f7fa;}
.tableBody table tr.fixed td a { color: #20599b;}
.tableBody table td .fail { color: #ff0000;}
.tableBody table td .checkboxBox { top: .3rem;}
.tableBody table .checkboxBox input { margin-right: 0;}
.tableBody table td a { display: block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tableBody table td a:hover { color: #20599b; text-decoration: underline;}
.tableBody table td a.scret span::before { content: ''; display: inline-block; width: 1.4rem; height: 2.1rem; margin: -.3rem 1rem 0 0; vertical-align: middle; background: url(../images/common/ico_secret.png) no-repeat center/cover;}
.tableBody.fontSize16 table td { font-size: 1.6rem;}
.tableBody.smallPD { margin-top: 0;}
.tableBody.smallPD table th { padding: 1.2rem 0 1.4rem;}
.tableBody .mo-slideView { display: none;}

/* hTableBody */
.hTableBody { border-collapse: collapse; overflow: hidden; margin-top: 1.2rem; border-top: 1px solid #d4d4d4;}
.hTableBody .thSize { width: 18rem;}
.hTableBody .thSize2 { width: 31rem;}
.hTableBody .thSize3 { width: 21rem;}
.hTableBody .tdSize { width: calc((100% - 36rem) / 2);}
.hTableBody .tdSize2 { width: calc((100% - 62rem) / 2);}

.hTableBody table { table-layout: fixed;}
.hTableBody table th { padding: 1.1rem 0 1.1rem 1.7rem; font-size: 1.5rem; font-weight: 600; text-align: left; line-height: 1.4; border-bottom: 1px solid #d4d4d4; background-color: #f6f7f9;}
.hTableBody table th .required { display: block; height: 1.6rem; margin: 0 0 0 1.1rem; color: #ff0000;}
.hTableBody table th .flexLeft { min-height: 3.7rem;}
.hTableBody table td { padding: 1.1rem 1.7rem; font-size: 1.5rem; font-weight: 400; word-break: keep-all; line-height: 1.4; border-left: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4;}
.hTableBody table td input[type=text],
.hTableBody table td input[type=tel],
.hTableBody table td input[type=file],
.hTableBody table td input[type=password],
.hTableBody table td select { width: 100%;}
.hTableBody table td input[type=text].w-200 {width: 20rem;}
.hTableBody table td textarea { height: 10rem;}
.hTableBody table td +th { border-left: 1px solid #dbdbdb;}
.hTableBody table td a { text-decoration: underline;}
.hTableBody table td a:hover { color: #20599b;}
.hTableBody .wHalf { flex: initial; width: 45%;}
.hTableBody .wDate { flex: initial; width: 14rem;}
.hTableBody .inlineStyleList { display: flex; align-items: center; flex-wrap: wrap; margin: -.5rem 0 0 -3.6rem;}
.hTableBody .inlineStyleList li { margin: .5rem 0 0 4rem;}
.hTableBody .inline { display: flex; align-items: center;}
.hTableBody .inline input[type=text],
.hTableBody .inline input[type=tel],
.hTableBody .inline input[type=paassword] { width: 15rem;}
.hTableBody .inline .flex { flex: 1;}
.hTableBody .inline .text { margin-left: 1rem; font-size: 1.4rem;}
.hTableBody .inline .btn { display: inline-flex; align-items: center; justify-content: center; height: 3.6rem; margin-left: 1.3rem; padding: 0 1.8rem; font-size: 1.4rem; border: 1px solid #bcbcbc; border-radius: .6rem; transition: color, border-color, background-color .2s ease-in-out;}
.hTableBody .inline .btn:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;}
.hTableBody .inline.inlineBlock { display: initial;}
.hTableBody .inline.etc-style .fileStyle { flex: 1;}
.hTableBody .inline.etc-style .fileStyle .por { flex: 1;}
.hTableBody .afterList { padding: .5rem 0;}
.hTableBody .afterList li { display: flex; align-items: center; padding: 1rem 0;}
.hTableBody .afterList li ~ li { padding: 1rem 0; border-top: 1px solid #e6e6e6;}
.hTableBody .afterList li .radioBox { width: 13.7rem;}
.hTableBody .afterList li p { font-weight: 500; line-height: 1.4;}
.hTableBody .fileBtn { display: inline-block;}
.hTableBody .fileBtn span { position: relative; line-height: 1.6;}
.hTableBody .fileBtn span::after { content: ''; display: inline-block; width: 3rem; height: 3rem; margin-left: 1rem; vertical-align: middle; border: 1px solid #bcbcbc; background:#fff url(../images/common/ico_button_down.png) no-repeat center; background-size: 1.6rem; border-radius: .6rem; transition: border-color, background-color .2s ease-in-out;}
.hTableBody .fileBtn span:hover::after { border-color: #9dd2f2; background-color: #d0e9f8;}

.hTableBody .selectBtn { display: flex; align-items: center; justify-content: center; height: 3.3rem; margin-left: .6rem; padding: 0 1.5rem; font-size: 1.4rem; border: 1px solid #bcbcbc; background-color: #fff; border-radius: .6rem; transition: color, background-color .2s ease-in-out;}
.hTableBody .selectBtn:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;}
.hTableBody .selectBtn.blueStyle { color: #fff; border-color: #0271b9; background-color: #2d8fce;}
.hTableBody .selectBtn span { display: block; margin-top: -.1rem;}
.hTableBody .flex-column {display: flex; align-items: flex-start; flex-direction: column; gap: .8rem;}
.hTableBody .inline input[type=text].full, 
.hTableBody .inline input[type=tel].full, 
.hTableBody .inline input[type=paassword].full {width: 100%;}

.hTableBody .dateTwins { display: flex; align-items: center;}
.hTableBody .dateTwins select { width: 10rem;}

.tableBody.scrollTbody .tbl-head,
.tableBody.scrollTbody .tbl-body {width: 100%; table-layout: fixed; border-collapse: collapse;}
.tableBody.scrollTbody .tbl-head th,
.tableBody.scrollTbody .tbl-body th {padding: 1.6rem 0; font-size: 1.4rem; line-height: 1.2; border-bottom: 1px solid #d4d4d4; background-color: #f6f7f9; }
.tableBody.scrollTbody .tbl-body td {padding: 1rem 1rem; font-size: 1.4rem; font-weight: 400; line-height: 2.4rem; word-break: break-word; border-bottom: 1px solid #d4d4d4; background-color: #fff; transition: background-color .2s ease-in-out;}
.tableBody.scrollTbody .tbl-body-wrap {height: 185px; overflow-y: auto; }

/* tr hover 등 기존 효과 유지 */
.tableBody.scrollTbody .tbl-body tr:hover td {
  background-color: #f0f7fa;
}

/* 스크롤 테이블 */
.table-scrollWrap {max-height: 232px; overflow-y: auto;}
.table-scrollWrap table {width: 100%; border-collapse: collapse;}
.table-scrollWrap table thead th {position: sticky; top: 0; z-index: 1;}

/* **********************************************************************************************************************************/

/* 본 문 contents */

/* **********************************************************************************************************************************/

/* 메인
**********************************************/

.main { padding: 0; background-color: transparent;}
.main .mainSearch { position: relative; background: url(../images/main/bg_main_visual_new.png) no-repeat center / cover;}
.main .mainSearch .area { max-width: 135.8rem; width: 100%; padding: 18.2rem 2rem 6rem; color: #fff;}
.main .mainSearch .area .space .flexBetween { max-width: 85.2rem; margin: 0 auto; flex-direction: column; align-items: center;}
.main .mainSearch .area .space .flexBetween h2 { font-size: 3.6rem; font-weight: 400; letter-spacing: -2.16px; color: #fff;}
.main .mainSearch .area .space .flexBetween br {display: none;}
.main .mainSearch .area .space .flexBetween .iconSet { display: flex; align-items: center; justify-content: center; margin-top: 34px; margin-left: auto; color: #fff;}
.main .mainSearch .area .space .flexBetween .iconSet .icon { display: block; width: 2.1rem; height: 2.1rem; background: url(../images/main/ico_iconSet_white.png) no-repeat center/cover;}
.main .mainSearch .area .space .flexBetween .iconSet span { display: block; margin: -.2rem 0 0 .4rem;}
.main .mainSearch .search { display: flex; align-items: center; position: relative; max-width: 85.2rem; margin: 1.5rem auto 0; background-color: #fff; border-radius: 1rem;}
.main .mainSearch .search .normalInput { flex: 1; position: relative;}
.main .mainSearch .search .normalInput .searchScrollBody { display: none; position: relative;}
.main .mainSearch .search .normalInput .searchScrollBody .autoCloseBtn { display: block; position: absolute; right: -3rem; top: 1rem; width: 2.2rem; height: 2.2rem; background: url(../images/common/ico_clear.svg) no-repeat center/cover;}
.main .mainSearch .search .normalInput .searchScrollBody.active { display: block;}
.main .mainSearch .search .normalInput .searchScroll { overflow-x: hidden; overflow-y: auto; position: absolute; left: 0; top: .8rem; z-index: 11; width: 100%; max-height: 19rem; border: 2px solid #20599b; background-color: #fff; border-radius: .4rem;}
.main .mainSearch .search .normalInput .searchScroll ul li ~ li { border-top: 1px solid #ddd;}
.main .mainSearch .search .normalInput .searchScroll ul li button { display: block; width: 100%; padding: 1rem; text-align: left;}

.main .mainSearch .search input[type=text] { width: 100%; height: 5.8rem; padding-right: 8rem; font-size: 1.8rem; border: none; font-weight: 500; letter-spacing: -1.2px;}
.main .mainSearch .search .btnDone { display: block; position: absolute; right: 1.4rem; bottom: 0; top: 0; padding: 1rem;}
.main .mainSearch .search .btnDone .icon { display: block; width: 2.8rem; height: 2.8rem; background: url(../images/main/ico_search.png) no-repeat center/cover;}
.main .mainSearch .search .selectD .choice { width: 10rem; padding: 0 0 .4rem 2rem; border: none;  border-radius: 0; height: 3.2rem; border-right: 1px solid #E9E5E5; color: #444; font-weight: 500; letter-spacing: -1.08px;}
.main .mainSearch .search .selectD .choice::after { right: 1.2rem; top: 50%; width: 10px; height: 7px; margin-top: -.4rem; background: url(../images/main/ico_selectD_arrow_gray.png) no-repeat center/cover;}
.main .mainSearch .condition { display: flex; align-items: center; justify-content: center; margin-top: 3.4rem;}
.main .mainSearch .condition .title { margin-top: .3rem; padding: 0 2rem 0 0; color: #fff; letter-spacing: -1.08px; font-size: 1.8rem; font-weight: 700;}
.main .mainSearch .condition .selectDGroup { display: flex; flex: 0 0 auto;}
.main .mainSearch .condition .selectDGroup .selectD { flex: 0 0 auto;}
.main .mainSearch .condition .selectDGroup .selectD ~ .selectD { margin-left: 1.6rem;}
.mainSearch .selectD .choice {width: 30rem; border: 1px solid #fff; border-radius: 1rem; font-size: 1.8rem; font-weight: 500; height: 5.5rem; padding: 0 3.6rem 0 2rem; color: #fff; letter-spacing: -1.08px;}
.mainSearch .selectD .choice::after {width: 1.2rem; height: .6rem; background-image: url(../images/main/ico_select_arrow.png);}
.main .mainSearch .condition .reset { display: flex; align-items: center; height: 4rem; padding: 0 1.7rem; padding: 0 0 0 2rem; font-size: 1.7rem; font-weight: 600;}
.main .mainSearch .condition .reset .icon { display: block; width: 2.4rem; height: 2.3rem;  margin-right: .6rem; background: url(../images/main/ico_reset_white.png) no-repeat center/cover;}
.main .mainSearch .condition .reset span { margin-top: -.4rem; color: #fff;}
.main .mainSearch .keyword { display: flex; align-items: center; justify-content: center; margin-top: 3.4rem;}
.main .mainSearch .keyword .title { margin-right: 3.2rem; font-size: 1.8rem; font-weight: 700; letter-spacing: -1.08px; color: #fff;}
.main .mainSearch .keyword button { font-size: 1.8rem; font-weight: 500; letter-spacing: -1.08px; color: #fff;white-space: nowrap;}
.main .mainSearch .keyword button ~ button { margin-left: 2.2rem;}
.main .mainSearch .keyword button::before { content: '#';}
.main .mainSearch .keyword button:hover { color: #20599b;}

.regiBody {display: flex; gap: 5rem; padding: 5.2rem 6.2rem; margin-top: 6rem; border-radius: 20px;background: rgba(0, 0, 0, 0.20);backdrop-filter: blur(2px);}
.regiBody .regiGroup {flex: 1 1 auto;}
.main .mainSearch h3 { font-family: "Pretendard"; font-size: 2.8rem; font-weight: 400; line-height: 4rem; letter-spacing: -1.68px;}
.main .mainSearch h3 strong {font-weight: 600;}
.main .mainSearch .regiGroup .stepList { display: flex; align-items: center;}
.main .mainSearch .regiGroup .stepList li { flex: 1; position: relative; height: 100%; border-radius: 10px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(5px);}
.main .mainSearch .regiGroup .stepList li:hover {background: #0090D8;}
.main .mainSearch .regiGroup .stepList li ~ li { margin-left: 2.6rem;}
.main .mainSearch .regiGroup .stepList li .stepNumber {position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 1rem 1.2rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.6px; border-radius: 0 0 5px 5px; background: rgba(0, 0, 0, 0.10); white-space: nowrap;}
.main .mainSearch .regiGroup .stepList li .noAnchor, 
.main .mainSearch .regiGroup .stepList li a:link {display: flex; justify-content: center; align-items: center; text-align: center; padding: 0 1.6rem; min-height: 18rem; font-size: 1.8rem; font-weight: 500; letter-spacing: -1.08px; line-height: 2.4rem; color: #fff; word-break: keep-all;}
.main .mainSearch .regiGroup dl { margin-top: 3rem;}
.main .mainSearch .regiGroup dt {color: #fff; font-size: 2.4rem;  font-weight: 600; line-height: 32px; letter-spacing: -1.44px;}
.main .mainSearch .regiGroup dd ul { margin-top: 1rem;}
.main .mainSearch .regiGroup dd ul li { position: relative; padding-left: 1rem; font-size: 1.7rem; font-weight: 400; letter-spacing: -1.02px; line-height: 1.2;}
.main .mainSearch .regiGroup dd ul li ~ li { margin-top: .8rem;}
.main .mainSearch .regiGroup dd ul li::after { content: ''; display: block; position: absolute; left: 0; top: .7rem; width: .3rem; height: .3rem; background: #fff; border-radius: 50%;}

.selectD { position: relative;}
.selectD .choice { display: block; position: relative; width: 100%; height: 4.5rem; padding: 0 3rem 0 1.2rem; color: #20599b; text-align: left; line-height: 1.7rem; border: 1px solid #20599b; border-radius: .6rem;}
.selectD .choice::after { content: ''; display: block; position: absolute; right: 1.2rem; top: 50%; width: 1.1rem; height: .6rem; margin-top: -.3rem; background: url(../images/main/ico_selectD_arrow.png) no-repeat center/cover;}
.selectD .choice.rotate::after { transform: rotate(-180deg); }
.selectD .list { display: none; position: absolute; left: 0; top: 5rem; z-index: 10; width: 100%; padding: .7rem 0; border: 1px solid #20599b; background-color: #fff; border-radius: .4rem;}
.selectD .list li button { display: block; width: 100%; padding: .7rem 1.3rem; text-align: left; transition: background-color .2s ease-in-out;}
.selectD .list li button:hover { background-color: #d0e9f8;}
.selectD .list li button.active { color: #20599b;}
.selectD .list.show { display: block;}

.main .classGroup { display: flex; position: relative; height: 13rem;  margin-top: -6.4rem; padding-left: 20.8rem; background-color: #20599b; border-radius: 2rem;}
.main .classGroup h3 { display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; width: 20.8rem; height: 100%; font-size: 2.4rem; font-weight: 500; color: #fff; background-color: #474747; border-radius: 2rem 0 0 2rem;}
.main .JS-classSwiper { overflow: hidden;  position: relative; height: 18rem; padding: 2rem 10rem 0;}
.main .JS-classSwiper .swiper-slide a { display: block; text-align: center;}
.main .JS-classSwiper .swiper-slide a img { width: 6rem; height: 6rem;}
.main .JS-classSwiper .swiper-slide a .title { margin-top: .4rem; font-size: 1.8rem; color: #fff;}
.main .JS-classSwiper .swiper-button-prev { top: 7rem; left: 4.4rem;}
.main .JS-classSwiper .swiper-button-next { top: 7rem; right: 4.4rem;}
.main .JS-classSwiper .position { display: inline-flex; align-items: center; justify-content: space-between; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);}
.main .JS-classSwiper .position .swiper-pagination-bullet { background-color: #d1d1d1;}

.main .mainTitle { text-align: left; font-size: 3.6rem; font-weight: 600; letter-spacing: -2.16px;}
.main .mainTitle span {font-weight: 400;}

.main .mainTitle-white { margin-top: 0; color: #fff;}
.main .mainTitleSub { margin-top: 1.5rem; font-size: 1.5rem; font-weight: 300; text-align: center;}
.main .mainTitleSub-white { color: #fff;}
.main .h2Body h3 { margin-top: 2.5rem; font-size: 2.6rem; font-weight: 500;}

.favorite { display: block; position: absolute; right: 2rem; top: 2rem;}
.favorite .icon { display: block; width: 3.1rem; height: 3.5rem; background: url(../images/common/ico_favorite.png) no-repeat left top/cover;}
.favorite.active .icon  { background-position-y: -6.5rem;}

.main .mainInfo { position: relative; padding: 13rem 0 16rem;background:#fff;}
.main .mainInfo::before {content: ''; position: absolute; right: 0; top: 0; width: 61.8rem; height: 28.8rem; background: url(../images/main/main_decobg.png) no-repeat 50%; background-size: 100% auto;}
.main .mainInfo .area {padding: 0 2rem; max-width: 135.8rem; width: auto;}

.main .newInfo { display: flex; justify-content: space-between; margin-top: 2.4rem; gap: 4.4rem;}
.main .newInfo-board {flex: 1; padding: 1.2rem 3.4rem .6rem; border: 1px solid #FFF; background: #F4F5FF;}
.main .newInfo-banner {width: 41rem;}
.newInfo-board .mainTab {display: flex; border-bottom: 1px solid #ddd;}
.newInfo-board .mainTab li button { padding: 2.4rem 2rem; font-size: 2.4rem; font-weight: 500; letter-spacing: -0.96px; color: #666;}
.newInfo-board .mainTab li button.active { position: relative; font-weight: 700; color: #000; }
.newInfo-board .mainTab li button.active::before {content: ''; position: absolute; bottom: 0;  left: 2rem; right: 2rem; height: 2px; background: #000;}
.newInfo-board .target .tabpanel {position: relative;}
.newInfo-board .tabpanel .more {display: flex; align-items: center; justify-content: center; position: absolute; right:0; top: -6rem; width: 4.2rem; height: 4.2rem; background-color: #838A96; border-radius: 50%;}
.newInfo-board .tabpanel .more .icon {    display: block;width: 1.6rem;height: 1.6rem;background: url(../images/common/ico_more_white.png) no-repeat center / cover;}
.newInfo-board .tablist-list {margin-top: 0.6rem;}
.newInfo-board .tablist-list li {padding: 2.8rem 0; border-bottom: 1px solid #E1E1E1;}
.newInfo-board .tablist-list li:last-child {border-bottom: 0;}
.newInfo-board .tablist-list li a {display: flex; justify-content: space-between;}
.newInfo-board .tablist-list .title {font-size: 2rem; font-weight: 500; letter-spacing: -1.2px; color: #555;}
.newInfo-board .tablist-list .date { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.96px; color: #999;}

.main .JS-infoSwiper { position: relative; width: 100%; height: 35.5rem; }
.main .JS-infoSwiper .swiper-container { overflow: hidden; z-index: initial; height: 100%;}
.main .JS-infoSwiper .swiper-container .swiper-wrapper { position: initial; z-index: initial; height: 100%;}
.main .JS-infoSwiper .swiper-slide a { display: flex; align-items: flex-start; height: 100%;}
.main .JS-infoSwiper .swiper-slide a img { width: 100%; height: 100%; object-fit: cover;}
.main .JS-infoSwiper .swiper-slide a:focus { outline-offset: -3px; outline-color: red;}

.main .JS-infoSwiper .infoComponent {position: absolute;display: flex;align-items: center;bottom: -1.1rem;background: #636E84;padding: 0 1.6rem 0 2rem;height: 4.4rem;}
.main .JS-infoSwiper .infoComponent .alarm-title {margin-right: 0.8rem; font-size: 2rem;font-weight: 500;color: #fff;line-height: 22px;letter-spacing: -1.2px;}
.main .JS-infoSwiper .infoComponent .position {margin: 1px 0 0 3px;display: flex; align-items: center; position: relative; }
.main .JS-infoSwiper .infoComponent .inner {width: auto;display: flex;align-items: center;height: 2.4rem;}
.main .JS-infoSwiper .position .swiper-pagination { flex: 1; text-align: center; padding-top: .2rem;}
.main .JS-infoSwiper .position .fraction { width: 5rem; text-align: right;width: fit-content; margin: 0 3px; font-size: 1.5rem; font-weight: 600; color: #9199B4;}
      .JS-infoSwiper .infoComponent .swiper-button-prev {position: relative;top: 0;left: auto;margin-top: 0;background: url(../images/main/ico_alarmzone_prev.svg) no-repeat center center;border: none;width: 2rem;height: 2rem;}
      .JS-infoSwiper .infoComponent .swiper-pagination-current {color: #fff;}
      .JS-infoSwiper .infoComponent .stopControl {display: block;margin-right: 0.4rem;width: 2.4rem;height: 2.4rem;background: url(../images/common/ico_stopControl.svg) no-repeat left top/cover;}
      .JS-infoSwiper .infoComponent .stopControl.play {background-position-y: -2.6rem;}
      .JS-infoSwiper .infoComponent .swiper-button-next {position: relative;top: 0;right: auto;margin-top: 0;background: url(../images/main/ico_alarmzone_next.svg) no-repeat center center;border: none;width: 2rem;height: 2rem;}
      .JS-infoSwiper .infoComponent .swiper-button-prev:hover {position: relative;left: auto;margin-top: 0;background: url(../images/main/ico_alarmzone_prevOn.svg) no-repeat center center;border: none;width: 2rem;height: 2rem;}
      .JS-infoSwiper .infoComponent .swiper-button-next:hover {position: relative;right: auto;margin-top: 0;background: url(../images/main/ico_alarmzone_nextOn.svg) no-repeat center center;border: none;width: 2rem;height: 2rem;}

/* 알림 배너 */
.main .guideBanner {margin-top: 3.5rem;}
.guideBanner {box-sizing: border-box;position: relative;}
.guideBanner::after {content: "";position: absolute;top: 0;bottom: 0;margin: auto 0;right: 14px;width: 1.6rem;height: 2rem;background: url(../images/main/icon_next.svg) no-repeat center center / contain;transform: rotate(-90deg);opacity: 0.7;transition: all 0.3s;}
.guideBanner > a {border-radius: 5px;display: flex;align-items: center;width: 100%;height: 100%;padding: 2rem 1.6rem;background: #49AF1A;transition: all 0.3s;}
.guideImg {margin-right: 20px;position: relative;}
.guideImg::before {content: '';display: block;width: 2.5rem;height: 2.5rem;border-radius: 50%;background: rgba(255,255,255,0.3);position: absolute;left: 0;top: 0;transition: all 0.3s;}
.guideImg::after {content: '';display: block;width: 4.1rem;height: 4.1rem;border-radius: 50%;background: rgba(255,255,255,0.3);position: absolute;right: -1rem;bottom: -1rem;transition: all 0.3s;}
.guideImg img {position: relative;z-index: 2;width: 5.4rem;}
.guideBannerText {display: flex;flex-direction: column;justify-content: flex-start;}
.guideBannerText > p {font-size: 1.9rem;line-height: 2.6rem;color: #fff;font-weight: 500;margin-bottom: .2rem;}
.guideBannerText > p .onlyPC {display: inline-block;}
.guideBannerText > span {font-size: 1.5rem;line-height: 2.6rem;color: #EEEEEE;}
.guideBanner:hover::after {opacity: 1;}
.guideBanner > a:hover .guideImg::before, .guideBanner > a:hover .guideImg::after {background: #FFD900;}

.boxList a { display: block; position: relative; padding: 2.4rem; border: 1px solid #e3e3e3; background-color: #fff; border-radius: 1rem; transition: border-color, background-color .2s ease-in-out;}
.boxList a:hover { border-color: #20599b; background-color: #f0f7fa;}
.boxList a .blet span { font-size: 2rem; font-weight: 700; color: #20599b;}
.boxList a .blet span.data { color: #4786cf;}
.boxList a .blet span.service { color: #4e9d00;}
.boxList a .blet span.sw { color: #c20600;}
.boxList a .blet span.block { color: #0084a5;}
.boxList a .title { overflow:hidden; margin-top: 2.6rem; font-size: 1.8rem; font-weight: 600; text-overflow:ellipsis; white-space:nowrap;}
.boxList a .hBody .data { display: flex; align-items: center; margin-top: 2.5rem;}
.boxList a .hBody .data span:first-child { font-weight: 600;}
.boxList a .hBody .data span ~ span { margin-left: 1.5rem; padding-left: 1.5rem; border-left: 1px solid #ddd;}
.boxList a .text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 5.1rem; margin-top: 2rem; font-weight: 500; color: #6e6e6e; line-height: 1.6;}
.boxList a .pvGroup { display: flex; align-items: flex-end; justify-content: flex-end; margin-top: 3rem;}
.boxList a .pvGroup .price { display: flex; align-items: center;}
.boxList a .pvGroup .price b { font-size: 2.6rem; font-weight: 700; color: #4786cf; letter-spacing: -1px;}
.boxList a .pvGroup .price span { margin-left: .2rem; font-size: 2.2rem;}
.boxList a .pvGroup .price b.free { color: #13a508;}
.boxList a .pvGroup .vi { display: flex; align-items: center;}
.boxList a .pvGroup .vi >span { display: block; font-size: 1.4rem;}
.boxList a .pvGroup .vi >span ~ span { margin-left: 1.3rem; padding-left: 1.3rem; border-left: 1px solid #ddd;}
.boxList a .pvGroup .vi >span .highlight { color: #20599b;}
.boxList a .com { display: flex; align-items: center;display: flex; align-items: center; margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid #dedede;}
.boxList a .com span { display: block; font-size: 1.4rem; font-weight: 400; color: #767676;}
.boxList a .com span::before { content: '#';}
.boxList a .com span ~ span { margin-left: 2rem;}

.favorite { display: block; position: absolute; right: 2.5rem; top: 2.5rem;}
.favorite .icon { display: block; width: 3.1rem; height: 3.5rem; background: url(../images/common/ico_favorite.png) no-repeat left top/cover;}
.favorite.active .icon  { background-position-y: -6.5rem;}

.main .flexHeader { display: flex; align-items: baseline; margin-top: 5rem;}
.main .flexHeader .btn { display: flex; align-items: center; justify-content: center; margin-left: 2rem; padding: 1rem; background-color: #fff; border: 1px solid #e3e3e3; border-radius: .6rem;}
.main .chartGroup { display: flex; flex-wrap: wrap; margin-top: 2.5rem;}
.main .chartGroup h4 { font-size: 1.8rem;}
.main .btnGroup { display: flex; align-items: center;}
.main .btnGroup button { display: flex; align-items: center; height: 3.8rem; padding: 0 1.7rem; font-size: 1.5rem; color: #767676; border: 1px solid #e3e3e3; background-color: #fff; border-radius: .8rem;}
.main .btnGroup button ~ button { margin-left: .8rem;}
.main .btnGroup button.active { color: #20599b; border-color: #20599b;}
.main .chartGroup >div { position: relative; width: calc(50% - 1rem); padding: 1.8rem 3rem 4rem; background-color: #fff; border: 1px solid #e3e3e3; border-radius: .6rem;}
.main .chartGroup >div ~ div { margin-left: 2rem;}
.main .chartGroup >div .more { position: absolute; right: 0; top: 0;}
.main .chartGroup .chartGroup-line { margin-top: 3rem;}

.main .pres { display: flex; margin-top: 5rem;}
.main .presList { display: flex; align-items: center; margin-top: 1rem;}
.main .presList li { flex: 1; position: relative; height: 22rem; background-color: #fff; border: 1px solid #e3e3e3; border-radius: .8rem;}
.main .presList li .title {  font-size: 2.2rem; font-weight: bold;}
.main .presList li .num { display: block; font-size: 3rem; font-weight: bold;}
.main .presList li .num.cOrange { color: #20599b;}
.main .presList li .num.cGreen { color: #53b429;}
.main .presList li .num.cBlack { color: #000;}
.main .presList li .num.cRed { color: #f24253;}
.main .presList li .img { display: block; position: absolute; right: 3rem; bottom: 3.5rem; width: 5.7rem; height: 5.7rem;}
.main .presList li .img.img-01 { background: url(../images/main/img_presList01.png) no-repeat center/cover;}
.main .presList li .img.img-02 { background: url(../images/main/img_presList02.png) no-repeat center/cover;}
.main .presList li .img.img-03 { background: url(../images/main/img_presList03.png) no-repeat center/cover;}
.main .presList li .img.img-04 { background: url(../images/main/img_presList04.png) no-repeat center/cover;}
.main .pres-left { position: relative; width: 87.5rem;}
.main .pres-left li { padding: 2rem 2.8rem;}
.main .pres-left li .num { margin-top: 3rem;}
.main .pres-left li ~ li { margin-left: .9rem;}
.main .pres-right { flex: 1; position: relative; margin-left: 2rem;}
.main .pres-right li { display: flex; align-items: center; justify-content: space-between; height: initial; padding: 3.6rem 4rem 3.6rem 3.5rem;}
.main .pres-right li ~ li { margin-top: 1.2rem;}
.main .presList.presList-row { flex-direction: column;}
.main .presList.presList-row li { width: 100%;}

.main .pres .more { display: flex; align-items: center; justify-content: center; position: absolute; right: .3rem; top: -1rem; width: 3.8rem; height: 3.8rem; border: 1px solid #e3e3e3; background-color: #fff; border-radius: 50%;}
.main .pres .more .icon { display: block; width: 1.5rem; height: 1.5rem; background: url(../images/common/ico_more.png) no-repeat center/cover;}

.main .loginAfter { padding-bottom: 5.4rem;}
.main .loginAfter .alram { display: flex; align-items: center; justify-content: space-between; margin-top: 2rem; padding: 1.2rem 1.8rem; border: 1px solid #e3e3e3; background-color: #fff; border-radius: .6rem;}
.main .loginAfter .alram .inline { display: flex; align-items: center;}
.main .loginAfter .alram .icon { display: block; width: 2.4rem; height: 2.5rem; margin-right: 1.5rem; background: url(../images/main/ico_bell.png) no-repeat center/cover;}
.main .loginAfter .alram a { display: block;}
.main .loginAfter .alram a:hover { text-decoration: underline;}
.main .loginAfter .alram .num { display: flex; align-items: center; justify-content: center; height: 2.6rem; padding: 0 1rem; font-size: 1.4rem; color: #fff; background-color: #333; border-radius: 1.3rem;}
.main .loginAfter .positionHdeader { margin-top: 5rem;} 
.main .loginAfter .posi { position: relative;}
.main .loginAfter .posi a { display: block; padding: 3.4rem 2.5rem; background-color: #fff; border: 1px solid #e3e3e3; border-radius: .5rem;}
.main .loginAfter .posi a .title { overflow: hidden; font-size: 2.2rem; text-overflow:ellipsis; white-space:nowrap; line-height: 1.6;}
.main .loginAfter .posi a .num { display: block; margin-top: 2rem; font-size: 1.8rem;}
.main .loginAfter .posi a .sub { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; height: 10rem; margin-top: 2rem; font-size: 1.8rem; line-height: 1.4;}
.main .loginAfter .JS-posiSwiper { margin-top: 2rem;}
.main .loginAfter .posi .more { display: flex; align-items: center; justify-content: center; position: absolute; right: .3rem; top: -5.8rem; width: 3.8rem; height: 3.8rem; border: 1px solid #e3e3e3; background-color: #fff; border-radius: 50%;}
.main .loginAfter .posi .more .icon { display: block; width: 1.5rem; height: 1.5rem; background: url(../images/common/ico_more.png) no-repeat center/cover;}
.main .loginAfter .posi .position { margin-top: 2.8rem; text-align: center;}
.main .loginAfter .posi .swiper-pagination-bullet { background-color: #dedede;}

/* 신규 로그인 */
.main .loginAfter { padding: 1.9rem 0 2.2rem;}
.main .loginAfter .newBody {position: relative; padding-top: 4.4rem; background: linear-gradient(180deg, #FFF -23.63%, #ECF3FA 100%); background-size: 100% 94%; }
.main .loginAfter .newBody::before {content: ''; position: absolute; top: 0; right: 0; width: 61.8rem; height: 28.8rem; background: url(../images/main/main_decobg.png) no-repeat 50%; }
.main .loginAfter .newBody .info {position: relative; display: flex; gap: 3.5rem; margin-top: 2.8rem; }
.main .loginAfter .newBody .info::before {content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; height: 2.6rem; background: #DCEDFB;}
.main .loginAfter .newBody .info .box,
.main .loginAfter .newBody .info .tBox { position: relative; width: calc( (100% - 14rem) / 5 ); display: block; padding: 2.4rem 3.6rem; border: 1px solid #1B32C3; background: #fff; border-radius: 1rem; box-shadow: 0 0 30px 0 rgba(141, 189, 238, 0.30); }
.main .loginAfter .newBody .info .box h4,
.main .loginAfter .newBody .info .tBox .row .tit { display: flex; align-items: center; justify-content: space-between; font-size: 2rem; font-weight: 600; letter-spacing: -0.8px; color: #333;} 
.main .loginAfter .newBody .info .box .contenxt { margin-top: 3.4rem;  text-align: right;}
.main .loginAfter .newBody .info .box .contenxt span,
.main .loginAfter .newBody .info .tBox .row .number { font-size: 4rem; font-weight: 800; letter-spacing: -1.6px; color: #1B32C3;}
.main .loginAfter .newBody .info .tBox {  padding: 2rem 1.6rem;}
.main .loginAfter .newBody .info .tBox .row { display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem 0 1rem;}
.main .loginAfter .newBody .info .tBox .row ~ .row { margin-top: 1.8rem; padding-top: 1.8rem; border-top: 1px solid #E6E6E6;}

.main .loginAfter .newBody .chartInfo { display: flex; flex-wrap: wrap; margin: 4.4rem 0 0 0; gap: 4rem;}
.main .loginAfter .newBody .chartInfo .cHeader { width: calc(50% - 2rem); padding: 0 2.4rem; background-color: #fff; border-radius: 1rem; border: 1px solid #D1E2F5; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.10);
}
.main .loginAfter .communityBody { margin-top: 5.8rem; }
.main .loginAfter .communityBody .area {display: flex; gap: 4rem; }
.main .loginAfter .communityBody .board { width: calc((100% - 4rem) / 2); padding: 2.4rem 2.2rem 2.4rem 2.8rem; background-color: #F2F3FB; }
.main .loginAfter .communityBody .board table { table-layout: fixed;}
.main .loginAfter .communityBody .board th { padding: 1rem; font-size: 1.3rem; border-top: 1px solid #cfcfcf; background-color: #f5f5f5;}
.main .loginAfter .communityBody .board td { padding: .9rem 2rem; }
.main .loginAfter .communityBody .board td.textLeft { text-align: left;}
.main .loginAfter .communityBody .board td a { display: block;}
.main .loginAfter .communityBody .board td a:hover { color: #20599b;}
.main .loginAfter .communityBody .board .empty {padding:2rem 0; text-align: center; font-size: 1.7rem; font-weight: 400; color: #666; border-top: 1px solid #cfcfcf;}
.main .loginAfter .communityBody .boardHeader { display: flex; align-items: center; justify-content: space-between;  padding-bottom: 2.2rem;}
.main .loginAfter .communityBody .boardHeader .h3 { font-size: 2.2rem; font-weight: 600; color: #333; letter-spacing: -0.88px;}
.main .loginAfter .communityBody .boardHeader .btn { display: flex; align-items: center; font-size: 1.3rem; font-weight: 700;}
.main .loginAfter .communityBody .boardHeader .btn .round { display: flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem;  border: 1px solid #E0E0E0; background-color: #fff; border-radius: 50%;}
.main .loginAfter .communityBody .boardHeader .btn .round .icon { display: block; width: 1rem; height:1rem; background: url(../images/main/ico_plus_gray.svg) no-repeat center/100% auto;}

.loginAfter .communityBody .boardList {}
.loginAfter .communityBody .boardList li {}
.loginAfter .communityBody .boardList li ~ li {margin-top: 1.8rem;}
.loginAfter .communityBody .boardList .boardWrap {display: flex; align-items: center;}
.loginAfter .communityBody .boardList .badge {min-width: 9rem; height: 2.6rem; line-height: 2.6rem; margin-right: 1rem; background: #D3E6FF; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.9px; color: #1176A1; text-align: center;}
.loginAfter .communityBody .boardList a {padding-right: 1rem; font-size: 1.7rem; font-weight: 500; letter-spacing: -1.02px; color: #666;}
.loginAfter .communityBody .boardList .date { white-space: nowrap; margin-left: auto; font-size: 1.5rem; font-weight: 400; letter-spacing: -0.9px; color: #666;}



.main .loginAfter .rBox { overflow: hidden; position: relative; border: 1px solid #d6d6d6; background-color: #fff; border-radius: 1rem; }
.main .loginAfter .rBoxh3 { display: flex; justify-content: space-between; padding: 2.2rem 0; border-bottom: 1px solid #E6E6E6;}
.main .loginAfter .rBoxh3 .h3 { font-size: 2.2rem; font-weight: 600; color: #333; letter-spacing: -0.88px;}
.main .loginAfter .rBoxh3 .btns { display: flex; align-items: center; }
.main .loginAfter .rBoxh3 .btns .blet { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.6px; color: #297BF5;}
.main .loginAfter .chartBody { padding: 2rem 0 2rem 4.2rem;}
.main .loginAfter .chartBody svg.sbchart { width: 100%;}


/* DPG허브 소개
**********************************************/
.text_blue {color: #1D34C3;}
.mw1000 {min-width: 1000px;}
.mw700 {min-width: 700px;}
.mw400 {min-width: 400px;}

.infomation .title { margin-top: 1.6rem; font-weight: 400; color: #333; font-size: 20px; line-height: 1.6; }
.infomation .title:first-child { margin-top: 16px; }
.infomation .videoRow { display: flex; margin-top: 2rem; border: 1px solid #dfdfdf; border-radius: 10px; padding: 36px; }
.infomation .videoTag { flex: 1; padding: 3px 0; }
.infomation .videoTag .view video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.infomation .videoTag .viewBtn { display: flex; justify-content: space-between; margin-top: 1rem; }
.infomation .videoTag .viewBtn .btn { width: calc(100% / 3); }
.infomation .videoTag .viewBtn .btn ~ .btn { margin-left: 1.3rem; }
.infomation .videoTag .viewBtn .btn img { width: 100%; height: auto; }
.infomation .scriptTag { width: 480px; display: flex; flex-direction: column; margin-right: 57px; }
.infomation .scriptTag h3 { padding: 1.8rem 2.2rem; font-size: 1.9rem; font-weight: 600; color: #20599b; }
.infomation .scriptTag .target { flex: 1; }
.infomation .scriptTag .target h4 { margin-bottom: 1.5rem; font-size: 22px; font-weight: 600; }
.infomation .scriptTag .target >div { display: none; line-height: 1.6; }
.infomation .scriptTag .target >div.active { display: block; flex: 1; }
.infomation .scriptTag .target .overflowY { height: 36rem; padding-right: 10px; }
.infomation .scriptTag .target .vidoeBody >div { display: flex; font-size: 1.4rem; font-weight: 400; }
.infomation .scriptTag .target .vidoeBody >div ~ div { margin-top: 20px; }
.infomation .scriptTag .target .vidoeBody >div span { margin-left: 12px; font-size: 18px; line-height: 1.2; }
.infomation .scriptTag .target .vidoeBody >div time { color: #1D34C3; font-size: 18px; line-height: 1.2; }
.infomation .viwControl { display: block; position: absolute; left: 50%; bottom: 3rem; z-index: 9; width: 4rem; height: 4rem; margin-left: -2rem; background: url(../images/common/ico_stopControl@3x.png) no-repeat left top/cover; background-position-y: -5.3rem; }
.infomation .viwControl.stop { background-position-y: 0; }
.infomation .viwControl:focus { outline-color: #fff; }
.infomation .view { position: relative; background-color: #000; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.infomation .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 1; }
.infomation .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; z-index: 2; text-align: center; padding: 0 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.infomation .message { font-weight: bold; text-shadow: 2px 2px 8px rgba(0,0,0,0.7); opacity: 0; transition: opacity 1s ease-in-out; }
.infomation .message.show { opacity: 1; }
.subContentsWrap { overflow-x: auto; padding-bottom: 16px; margin-bottom: 34px; margin-top: 30px; display: flex; }
.subContentsWrap.borderImg { box-sizing: border-box; border: 1px solid #DFDFDF; border-radius: 10px; padding-bottom: 0;}
.subContentsWrap > img { max-width: 100%; }
.subContentsWrap.borderImg > .mw700 {margin: 50px;}
.subContentsWrap.borderImg > .mw700.noMargin {margin: 0;}


/* 디지털 자원활용
**********************************************/

.toolBox { margin-top: 30px; display: flex; gap: 35px; }
.toolBox > li { flex: 1; border: 1px solid #dfdfdf; border-radius: 10px; padding: 20px 33px 20px 0; }
.toolBox > li .icoCont {    display: flex; height:100%; }
.toolBox > li .icoCont .ico { display: flex; flex-direction: column; gap: 12px; font-size: 18px; color: #1D34C3; font-weight: 500; text-align: center; white-space: nowrap; width: 196px; border-right: 1px dashed #DFDFDF; }
.toolBox > li .icoCont .ico img { width: 100px; margin: 0 auto; }
.toolBox > li .icoCont > span { flex: 1; padding-left: 28px; align-items: center; display: flex; color: #555; font-size: 18px; font-weight: 400; line-height: 1.6; word-break: keep-all; }
.strengthLists { margin-top: 40px; gap: 20px; display: flex; flex-direction: column; margin-bottom: 80px; }
.strengthLists > li { background: #F3F8FD; background: linear-gradient(135deg, rgba(243, 248, 253, 1) 0%, rgba(251, 252, 255, 1) 100%); border-radius: 10px; border: 1px solid #efefef; display: flex; align-items: center; padding: 20px 0; }
.strengthLists > li p { width: 212px; text-align: center; color: #1D34C3; font-size: 22px; font-weight: 600; flex: 0 0 auto; }
.strengthLists > li span { padding-left: 28px; color: #555; font-size: 20px; font-weight: 400; padding-right: 28px; word-break: keep-all; line-height: 1.5; border-left: 1px solid #C7CBCF; }
.mentBox { margin-top: 30px; display: flex; background: #F2F3FF; border-radius: 10px; font-size: 24px; justify-content: center; padding: 15px 0; font-weight: 500; }
.mentBox .quote { color: #666666; }
.phoneCapture { background: #F3F8FD; border-radius: 10px; display: flex; justify-content: center; gap: 125px; padding: 50px 0; }
.calendarGroup { display: flex; align-items: center;}

.application >.fontH3:first-child { margin-top: 0;}

.application .fileList { margin-top: 2rem; padding-top: 2.5rem; border-top: 1px solid #000;}
.application .fileList ul { margin-top: 1.7rem; padding: .2rem 2rem; border: 1px solid #d4d4d4; background-color: #f6f7f9; border-radius: 1rem;}
.application .fileList ul li ~ li { border-top: 1px solid #d4d4d4;}
.application .fileList ul li .row { display: flex; align-items: center; justify-content: space-between; padding: 0 .4rem;}
.application .fileList ul li .row a { display: inline-block; padding: 2.4rem 0;}
.application .fileList ul li .row a:hover { color: #20599b; text-decoration: underline;}

.application .terms{ margin-top: 1.5rem; border-top: 1px solid #828282;}
.application .terms__row { margin-top: 1rem;}
.application .terms__row span { color: #20599b;}
.application .terms__row .overflowY { height: 14.5rem; margin-top: 1rem; padding: 1.5rem; border: 1px solid #d2d2d2; border-radius: .6rem;}
.application .terms__row .overflowY >p { font-family: "Noto Sans KR" !important; font-size:1.6rem !important; font-weight: 400 !important;}
.application .terms__row ~.terms__row { padding-top: 1rem; border-top: 1px solid #e0e0e0;}
.application .terms__row .termsContext { line-height: 1.6;}
.application .terms__row .termsContext >li h3 { font-size: 1.8rem; font-weight: 700; color: #000;}
.application .terms__row .termsContext >li >ol >li { margin-top: 2rem;}
.application .terms__row .termsContext >li >ol >li h4 { font-weight: 700; color: #494949;}
.application .terms__row .termsContext >li >ol >li >p { margin-top: .5rem; font-size: 1.4rem; color: #585858;}
.application .terms__row .termsContext >li >ol >li >ol { margin-top: .5rem;}
.application .terms__row .termsContext >li >ol >li >ol >li { padding-left: 1.8rem; font-size: 1.4rem; color: #585858; text-indent: -1.8rem;}
.application .terms__row .termsContext >li >ol >li >ol >li ~ li { margin-top: 1rem;}
.application .terms__row .termsContext >li >ol >li >ol >li >ol >li { position: relative; margin-top: 1rem; padding-left: 1.2rem; text-indent: 0;}
.application .terms__row .termsContext >li >ol >li >ol >li >ol >li::after { content: ''; display: block; position: absolute; left: 0; top: 1rem; width: .4rem; height: .4rem; background-color: #595959; border-radius: 50%;}
.application .terms__row .termsContext >li >ol >li >ol >li >ol >li h5 { margin-bottom: .5rem; font-size: 1.4rem; font-weight: 700;}
.application .terms__row .termsContext >li >ol >li >ol >li >ol >li p { font-size: 1.4rem; font-weight: 700;}
.application .terms__row .termsContext >li >ol >li >ul >li { margin-top: 1rem; font-size: 1.4rem; color: #585858;}
.application .terms__row .termsContext >li >ol >li >ul >li >p { position: relative; padding-left: 1.4rem;}
.application .terms__row .termsContext >li >ol >li >ul >li >p::after { content: ''; display: block; position: absolute; left: 0; top: 1rem; width: .4rem; height: .4rem; background-color: #595959; border-radius: 50%;}
.application .terms__row .termsContext >li >ol >li >ul >li >ul >li { padding-left: 1.5rem;}
.application .terms__row .termsContext table { margin: 1.5rem 0 0 -1.8rem;}
.application .terms__row .termsContext table th { padding: 1.4rem 1rem; font-size: 1.3rem; font-weight: 700; color: #585858; text-align: center; border-top: 1px solid #727272; border-bottom: 1px solid #d7d7d7; background-color: #f3f3f3;}
.application .terms__row .termsContext table td { padding: 1.4rem 1rem; font-size: 1.3rem; font-weight: 700; color: #585858; text-align: center; border-bottom: 1px solid #d7d7d7;}
.application .terms__row .termsContext table td.textLeft { text-align: left;}

.application .guideList { margin-top: 2rem; border-top: 1px dashed #000;}
.application .guideList li { display: flex; align-items: center; padding: 2rem 0; border-bottom: 1px dashed #000;}
.application .guideList li .f { width: 10rem;}
.application .guideList li .c { width: 40rem;}
.application .guideList li a { display: block; flex: 1; text-decoration: underline;}

.guideText { display: flex; margin-top: .5rem;}
.guideText .icon { display: block; width: 1.6rem; height: 1.6rem; margin-top: .1rem; background: url(../images/main/ico_iconSet.png) no-repeat center/cover;}
.guideText span { display: block; flex: 1; margin: -.1rem 0 0 .4rem; font-size: 1.4rem; line-height: 1.4;}
.guideText.fontSize16 { margin-top: 1.5rem;}
.guideText.fontSize16 span { margin-top: -.3rem; font-size: 1.6rem;}

.application .datafileList { margin-top: 1rem; border-top: 1px solid #000;}
.application .datafileList li { display: flex; align-items: center; padding: 2rem 0; font-weight: 700; line-height: 1.4; border-bottom: 1px solid #d4d4d4;}
.application .datafileList li a { display: block; width: 30rem; padding: 0 .5rem;}
.application .datafileList li a span { padding-bottom: .5rem; border-bottom: 1px solid #000;}
.application .datafileList li .article { flex: 1; color: #767676;}
.application .datafileList li .con { width: 9rem; padding: 0 .5rem; text-align: center;}
.application .datafileList li .date { width: 17rem; padding: 0 .5rem; text-align: center;}
.application .datafileList li.empty .article { padding: 5rem 0; color: #000; text-align: center;}

.licenceGroup { margin-top: 1.5rem;}
.licenceGroup > div { display: flex; align-items: center;}
.licenceGroup > div a { display: block; text-decoration: none !important;}
.licenceGroup .icon { display: block;}
.licenceGroup .icon02 { display: block; width: 14.9rem; height: 5.4rem; background: url(../images/common/img_licence1.png) no-repeat center/cover;}
.licenceGroup .icon03 { display: block; width: 18.3rem; height: 5.4rem; background: url(../images/common/img_licence2.png) no-repeat center/cover;}
.licenceGroup .icon04 { display: block; width: 17.8rem; height: 5.4rem; background: url(../images/common/img_licence3.png) no-repeat center/cover;}
.licenceGroup .icon05 { display: block; width: 21.3rem; height: 5.4rem; background: url(../images/common/img_licence4.png) no-repeat center/cover;}
.licenceGroup .icon06 { display: block; width: 15.4rem; height: 5.4rem; background: url(../images/common/img_licence5.png) no-repeat center/cover;}
.licenceGroup .icon07 { display: block; width: 15.4rem; height: 5.4rem; background: url(../images/common/img_licence6.png) no-repeat center/cover;}
.licenceGroup > div > div { margin-left: 1rem;}
.licenceGroup span.title { font-size: 1.8rem; font-weight: 700;}
.licenceGroup span + span { display: block; margin-top: .5rem;}
.licenceGroup .btn { display: flex; align-items: center; justify-content: center; height: 3.6rem; margin: 0 0 0 1.6rem; padding: 0 2.2rem; font-size: 1.4rem; border: 1px solid #bcbcbc; border-radius: .6rem; transition: color, border-color, background-color .2s ease-in-out;}
.licenceGroup .btn:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;}
.licenceText { margin-top: 1rem;}

.application .dataReview { margin-top: 1.5rem;}
.dataReview .dataTxt { font-size: 1.8rem; line-height: 1.4;}
.application .dataReview select { flex: 1;}
.application .dataReview .btn { display: flex; align-items: center; justify-content: center; height: 4rem; margin-left: .7rem; padding: 0 2.6rem; color: #fff; background-color: #20599b; border-radius: .6rem; transition: background-color .2s ease-in-out;}
.application .dataReview .btn:hover { background-color: #366cc3;}
.application .dataReview .btn span { display: block; margin-top: -.2rem;}
.application .reviewText { margin: 2.3rem 0 3rem; padding: 2.5rem .4rem; font-weight: 400; color: #6f6f6f; line-height: 1.4; border-top: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4;}
.application .reviewText-noline { margin-top: 2rem; padding-top: 0; border-top: none;}
.application .dataReview-line { padding-top: 2rem; border-top: 1px solid #000;}

.application .tabCode { margin-top: 1.7rem; padding: 1rem .6rem 1rem 2.6rem; font-size: 1.4rem; border: 1px solid #d4d4d4; background-color: #f6f7f9; border-radius: 1rem;}
.application .tabCode .tabpanel { overflow-x: hidden; overflow-y: auto; height: 40rem;}
.application .tabCode code { font-family: 'Noto Sans KR'; line-height: 1.4;}

.application .textareaEtc { margin-top: 3rem;}
.application .textareaEtc label { font-size: 1.8rem;}
.application .textareaEtc .checkboxBox { margin-bottom: 1rem;}
.application .textareaEtc .checkboxBox span { color: #20599b;}
.application .textareaEtc .target { display: none;}
.application .textareaEtc .target.active { display: block;}
.application .textarea { flex: 1; position: relative; padding-bottom: 4rem; border: 1px solid #d4d4d4; background-color: #fff; border-radius: .6rem;}
.application .textarea textarea { height: 10rem; border: none;}
.application .textarea .textarea--num { position: absolute; right: 1.5rem; bottom: 1rem;}

.application .guidePD { padding: 0 1.1rem;}
.application .guideTxt { margin-top: 2rem; color: #6f6f6f; line-height: 1.4;}

.application .guideStep h4 { display: flex; align-items: center; margin-top: 7.5rem;}
.application .guideStep li:first-child h4 { margin-top: 2.4rem;}
.application .guideStep h4 .step { font-size: 2.6rem; font-weight: bold; color: #20599b;}
.application .guideStep h4 .text { margin-left: 1.4rem; font-size: 2.2rem; font-weight: 600;}
.application .guideStep h5 { margin-top: 5rem; font-size: 2.2rem; font-weight: bold; color: #20599b;}
.application .guideStep .box { overflow: hidden; margin-top: 1.8rem; border: 1px solid #dedede; border-radius: .6rem;}
.application .guideStep .box img { width: 100%; height: auto; vertical-align: top;}
.application .guideStep .subTxt { margin-top: 1.8rem; text-align: right;}

.application .guideStep2 { position: relative; padding-left: 27.8rem;}
.application .guideStep2.mt1 { margin-top: 6rem;}
.application .guideStep2.mt2 { margin-top: 8rem;}
.application .guideStep2 h3.fontH3 { margin-top: 0;}
.application .guideStep2 .img { position: absolute; left: 1.5rem; top: 0; width: 20.5rem;}
.application .guideStep2.img1 { min-height: 14.1rem;}
.application .guideStep2.img1 .img { display: block; height: 14.1rem; background: url(../images/application/img_02_step1.png) no-repeat center/cover;}
.application .guideStep2.img2 { min-height: 15.8rem;}
.application .guideStep2.img2 .img { display: block; height: 15.8rem; background: url(../images/application/img_02_step2.png) no-repeat center/cover;}
.application .guideStep2.img3 { min-height: 15.6rem;}
.application .guideStep2.img3 .img { display: block; height: 15.6rem; background: url(../images/application/img_02_step3.png) no-repeat center/cover;}
.application .guideStep2.img4 { min-height: 15.1rem;}
.application .guideStep2.img4 .img { display: block; top: -1.5rem; height: 15.1rem; background: url(../images/application/img_03_step1.png) no-repeat center/cover;}
.application .guideStep2.img5 { min-height: 14.2rem;}
.application .guideStep2.img5 .img { display: block; top: -1.5rem; height: 14.2rem; background: url(../images/application/img_03_step2.png) no-repeat center/cover;}
.application .guideStep2.img6 { min-height: 13.2rem;}
.application .guideStep2.img6 .img { display: block; top: -1.5rem; height: 13.2rem; background: url(../images/application/img_03_step3.png) no-repeat center/cover;}

.dotLists li {color: #333; font-size: 20px; line-height: 1.6; font-weight: 400;}

/* 디지털 자원관리
**********************************************/

/*.searchGroup .controlBox { display: flex; flex-wrap: wrap; min-height: 5rem; margin-top: 1.5rem; border-top: 1px solid #9dd2f2; border-bottom: 1px solid #9dd2f2; background-color: #f0f7fa;}*/
/*.searchGroup .controlBox li { display: flex; align-items: center; padding: 1rem 1rem 1rem 0; border-bottom: 1px solid #d0e9f8;}*/
/*.searchGroup .controlBox li.w25 { width: 25%;}*/
/*.searchGroup .controlBox li.w33 { width: calc(100% / 3);}*/
/*.searchGroup .controlBox li.w50 { width: 50%;}*/
/*.searchGroup .controlBox li.w64 { width: calc(100% - (100% / 3));}*/
/*.searchGroup .controlBox li input[type=text],*/
/*.searchGroup .controlBox li input[type=tel],*/
/*.searchGroup .controlBox li select { width: 100%;}*/
/*.searchGroup .controlBox li .flexOne { flex: 1;}*/
/*.searchGroup .controlBox li .inline { display: flex; align-items: center;}*/
/*.searchGroup .controlBox li .inline *:first-child ~ * { margin-left: .5rem;}*/
/*.searchGroup .label { display: block; width: 12rem; margin: -.4rem 1rem 0 0; text-align: right;}*/
/*.searchGroup .label-widthAdd { width: 17rem;}*/
/*.searchGroup .controlBox.center { justify-content: center;}*/
/*.searchGroup .controlBox.center .label { margin-top: 0;}*/
/*.searchGroup .controlBox.center .flexOne { font-weight: 400; color: #20599b;}*/
/*.searchGroup .controlBox .calendarBody { flex: 1;}*/
/*.searchGroup .singleBox { display: flex; align-items: center; justify-content: center; margin-top: 1.5rem; padding: .8rem; border-top: 1px solid #20599b; border-bottom: 1px solid #20599b; background-color: #f0f7fa;}*/
/*.searchGroup .singleBox .label { all: unset; margin-right: 1.4rem;}*/
/*.searchGroup .singleBox .btn { display: flex; align-items: center; justify-content: center; height: 4rem; margin-left: .6rem; padding: 0 2.4rem; color: #20599b; border: 1px solid #20599b; background-color: #fff; border-radius: .6rem; transition: background-color .2s ease-in-out;}*/
/*.searchGroup .singleBox .btn span { display: block; margin-top: -.2rem;}*/
/*.searchGroup .singleBox .btn:hover { background-color: #d0e9f8;}*/
/*.searchGroup .singleBox .btn.orangeStyle { color: #fff; background-color: #20599b;}*/
/*.searchGroup .singleBox .btn.orangeStyle:hover { background-color: #366cc3;}*/

.searchGroup .controlBox { display: flex; flex-wrap: wrap; min-height: 5rem; margin-top: 1.5rem; border-top: 1px solid #9dd2f2; border-bottom: 1px solid #9dd2f2; background-color: #f0f7fa;}
.searchGroup .controlBox li { display: flex; align-items: center; padding: 1rem 1rem 1rem 0; border-bottom: 1px solid #d0e9f8;}
.searchGroup .controlBox li.w25 { width: 25%;}
.searchGroup .controlBox li.w33 { width: calc(100% / 3);}
.searchGroup .controlBox li.w50 { width: 50%;}
.searchGroup .controlBox li.w64 { width: calc(100% - (100% / 3));}
.searchGroup .controlBox li input[type=text],
.searchGroup .controlBox li input[type=tel],
.searchGroup .controlBox li select { width: 100%;}
.searchGroup .controlBox li .flexOne { flex: 1; display: flex; gap: .8rem; }
.searchGroup .label { display: block; width: 12rem; margin: -.4rem 1rem 0 0; text-align: right;}
.searchGroup .controlBox.center { justify-content: center;}
.searchGroup .controlBox.center .label { margin-top: 0;}
.searchGroup .controlBox.center .flexOne { font-weight: 400; color: #20599b;}
.searchGroup .controlBox .calendarBody { flex: 1;}
.searchGroup .singleBox { display: flex; align-items: center;}
.searchGroup .singleBox .label { all: unset; margin-right: 1.4rem;}
.searchGroup .singleBox .btn { display: flex; align-items: center; justify-content: center; height: 4rem; margin-left: .6rem; padding: 0 2rem; color: #20599b; border: 1px solid #20599b; background-color: #fff; border-radius: .6rem;}
.searchGroup .singleBox .btn span { display: block; margin-top: -.2rem;}
.searchGroup .singleBox .btn.orangeStyle { color: #fff; background: #3B4061; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.96px; border-radius: 0.5rem;}

.searchGroup.none-bg {display: flex; justify-content: space-between; flex-wrap: wrap;}
.searchGroup .singleBox select {min-width: 26rem;}

.calendarGroup { display: flex; align-items: center;}
.calendarGroup .radioBox ~ .radioBox {margin-left: 0.8rem;}
.calendarGroup.date-month,
.calendarGroup.date-day {flex-wrap: wrap; gap: .8rem;}

.fileList { margin-top: 2rem; padding-top: 2.5rem; border-top: 1px solid #000;}
.fileList ul { margin-top: 1.7rem; padding: .2rem 2rem; border: 1px solid #d4d4d4; background-color: #f6f7f9; border-radius: 1rem;}
.fileList ul li ~ li { border-top: 1px solid #d4d4d4;}
.fileList ul li .row { display: flex; align-items: center; justify-content: space-between; padding: 0 .4rem;}
.fileList ul li .row a { display: inline-block; padding: 2.4rem 0;}
.fileList ul li .row a:hover { text-decoration: underline;}

.application >.fontH3:first-child { margin-top: 0;}
.application >.hTableBody:first-child { margin-top: 2rem;}

.application .contArticle { margin-top: 3rem; padding: 15rem; text-align: center; border: 1px solid #000;}

.application .terms__row { margin-top: 2rem;}
.application .terms__row span { color: red;}
.application .terms__row .overflowY { margin-top: 1rem; padding: 1rem; border: 1px solid #ddd;}

.application .guideList { margin-top: 2rem; border-top: 1px dashed #000;}
.application .guideList li { display: flex; align-items: center; padding: 2rem 0; border-bottom: 1px dashed #000;}
.application .guideList li .f { width: 10rem;}
.application .guideList li .c { width: 40rem;}
.application .guideList li a { display: block; flex: 1; text-decoration: underline;}

.guideText { display: flex; margin-top: .5rem;}
.guideText .icon { display: block; width: 1.6rem; height: 1.6rem; margin-top: .1rem; background: url(../images/main/ico_iconSet.png) no-repeat center/cover;}
.guideText span { display: block; flex: 1; margin: -.1rem 0 0 .4rem; font-size: 1.4rem; line-height: 1.4;}

.application .datafileList { margin-top: 1rem; border-top: 1px solid #000;}
.application .datafileList li { display: flex; align-items: center; padding: 2rem 0; font-weight: 700; line-height: 1.4; border-bottom: 1px solid #d4d4d4;}
.application .datafileList li a { display: block; width: 30rem; padding: 0 .5rem;}
.application .datafileList li a span { padding-bottom: .1rem; border-bottom: 1px solid #000;}
.application .datafileList li .article { flex: 1; color: #767676;}
.application .datafileList li .con { width: 9rem; padding: 0 .5rem; text-align: center;}
.application .datafileList li .date { width: 17rem; padding: 0 .5rem; text-align: center;}
.application .datafileList li.empty .article { padding: 5rem 0; color: #000; text-align: center;}

.dataReview { margin-top: 1.5rem;}
.dataReview .dataTxt { font-size: 1.8rem; line-height: 1.4;}
.dataReview select { flex: 1;}
.dataReview .btn { display: flex; align-items: center; justify-content: center; height: 4rem; margin-left: .7rem; padding: 0 2.6rem; color: #fff; background-color: #20599b; border-radius: .6rem; transition: background-color .2s ease-in-out;}
.dataReview .btn:hover { background-color: #366cc3;}
.reviewText { margin: 2.3rem 0 3rem; padding: 2.5rem .4rem; font-weight: 400; color: #6f6f6f; line-height: 1.4; border-top: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4;}
.reviewText-noline { margin-top: 2rem; padding-top: 0; border-top: none;}
.dataReview-line { padding-top: 2rem; border-top: 1px solid #000;}

.tabCode { margin-top: 1.7rem; padding: 1rem .6rem 1rem 2.6rem; font-size: 1.4rem; border: 1px solid #d4d4d4; background-color: #f6f7f9; border-radius: 1rem;}
.tabCode .tabpanel { overflow-x: auto; overflow-y: auto; height: 40rem;}
.tabCode code { font-family: 'Noto Sans KR'; line-height: 1.4;}


/* 사용 및 계약 관리
**********************************************/

.contract >div:first-child .fontH3 { margin-top: 0;}

.contract .chart { display: flex; align-items: center; justify-content: center; padding: 2rem; border: 1px solid #e2e2e2; border-radius: .6rem;}
.contract .statistic { margin-top: 2rem;}
.contract .statistic .twins { display: flex; justify-content: space-between;}
.contract .statistic .twins .left { width: 50%;}
.contract .statistic .twins .left th,
.contract .statistic .twins .left td { padding: 1.3rem 1rem}
.contract .statistic .twins .right { width: 50%; margin-left: 1.5rem;}
.contract .statistic .twins .right .chart { height: 34.8rem}
.contract .inputBody { display: flex; align-items: center;}
.contract .inputBody span {margin-right: 1.2rem;}
.contract .inputBody .radioBox label {margin-right: 1rem;}
.contract .inputBody .calendarGroup { width: 31rem;}
.contract .inputBody .downloadBtn {height: 4rem; margin-left: 0.8rem;}
.contract .inputBody .btn { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin-left: .8rem; border: 1px solid #bcbcbc; border-radius: .6rem; transition: border-color, background-color .2s ease-in-out;}
.contract .inputBody .btn:hover { border-color: #9dd2f2; background-color: #d0e9f8;}
.contract .inputBody .btn .icon { display: block; width: 1.7rem; height: 1.7rem; background: url(../images/common/ico_search_small.png) no-repeat center/cover;}
.contract .statisticControl { margin-top: 2rem;}
.contract .statisticControl .printBtn { display: flex; align-items: center; justify-content: center; height: 4rem; margin-right: 1rem; padding: 0 2rem; color: #fff; background-color: #20599b; border-radius: .6rem; transition: background-color .2s ease-in-out;}
.contract .statisticControl .printBtn:hover { background-color: #366cc3;}
.contract .statisticControl .printBtn .icon { display: block; width: 1.7rem; height: 1.7rem; margin-left: 1rem; font-size: 1.5rem; font-weight: 500; background: url(../images/common/ico_print_small.png) no-repeat center/cover;}
.statisticControlGuide { display: flex; align-items: center; margin-top: 1.8rem; padding: .6rem .6rem .6rem 1.9rem; border: 1px solid #adcaea; background-color: #edf9ff; border-radius: .8rem;}
.statisticControlGuide #view { overflow-x: hidden; overflow-y: auto; width: 100%; min-height: 4rem; max-height: 19.6rem; padding: 1rem 0;}
.statisticControlGuide #view li ~ li { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #dee6ef;}
.statisticControlGuide #view .remove-digital { display: inline-flex; align-items: center; margin-top: -.3rem; padding: .6rem; border: 1px solid #aaa; background-color: #fff; border-radius: 50%;}
.statisticControlGuide #view .remove-digital:hover { background-color: #f0f7fa;}
.statisticControlGuide #view .remove-digital .icon { display: block; width: .6rem; height: .6rem; background: url(../images/common/ico_resourceList.png) no-repeat center/cover;}

.contract .fommatSet { display: flex; align-items: center; margin-top: 1rem; padding: 1.6rem 0; border: 1px solid #e2e2e2; border-radius: .6rem;}
.contract .fommatSet dl { width: 50%; padding: 2rem; text-align: center;}
.contract .fommatSet dl ~ dl { border-left: 1px solid #ececec;}
.contract .fommatSet dl dt { font-size: 2rem;}
.contract .fommatSet dl dd { display: flex; align-items: center; justify-content: center; margin-top: 2.2rem; font-size: 2.4rem;}
.contract .fommatSet dl dd .num { font-weight: bold; font-size: 3.6rem;}

.licenceGroup { margin-top: 1.5rem;}
.licenceGroup > div { display: flex; align-items: center;}
.licenceGroup > div a { display: block; text-decoration: none !important;}
.licenceGroup .icon { display: block;}
.licenceGroup .icon02 { display: block; width: 14.9rem; height: 5.4rem; background: url(../images/common/img_licence1.png) no-repeat center/cover;}
.licenceGroup .icon03 { display: block; width: 18.3rem; height: 5.4rem; background: url(../images/common/img_licence2.png) no-repeat center/cover;}
.licenceGroup .icon04 { display: block; width: 17.8rem; height: 5.4rem; background: url(../images/common/img_licence3.png) no-repeat center/cover;}
.licenceGroup .icon05 { display: block; width: 21.3rem; height: 5.4rem; background: url(../images/common/img_licence4.png) no-repeat center/cover;}
.licenceGroup .icon06 { display: block; width: 15.4rem; height: 5.4rem; background: url(../images/common/img_licence5.png) no-repeat center/cover;}
.licenceGroup .icon07 { display: block; width: 15.4rem; height: 5.4rem; background: url(../images/common/img_licence6.png) no-repeat center/cover;}
.licenceGroup > div > div { margin-left: 1rem;}
.licenceGroup span.title { font-size: 1.8rem; font-weight: 700;}
.licenceGroup span + span { display: block; margin-top: .5rem;}
.licenceGroup .btn { display: flex; align-items: center; justify-content: center; height: 3.6rem; margin: 0 0 0 1.6rem; padding: 0 2.2rem; font-size: 1.4rem; border: 1px solid #bcbcbc; border-radius: .6rem; transition: color, border-color, background-color .2s ease-in-out;}
.licenceGroup .btn:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;}
.licenceText { margin-top: 1rem;}

.contract .etcStyle { display: flex; align-items: center;}
.contract .etcStyle .inlineStyleList { margin-top: 0;}
.contract .etcStyle .searchReset { flex: 1; margin-left: 5rem;}








/* 커뮤니티
**********************************************/

.community >.fontH3:first-child { margin-top: 0;}

.community .tabRound { margin-top: 0;}

.resourceList .list { max-height: 30.6rem; margin-top: 1.7rem; padding: 0 2rem; border: 1px solid #d4d4d4; background-color: #f6f7f9; border-radius: 1rem;}
.resourceList ul li { padding: 1.8rem 0; font-size: 1.5rem; line-height: 1.6;}
.resourceList ul li ~ li { border-top: 1px solid #d4d4d4;}
.resourceList ul li .btn { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin: -.2rem 0 0 1.5rem; background-color: #fff; border: 1px solid #b4b4b4; border-radius: 50%;}
.resourceList ul li .btn .icon { display: block; width: 1.2rem; height: 1.2rem; background: url(../images/common/ico_resourceList.png) no-repeat center/cover;}
.resourceList ul li .btn:hover { border-color: #9dd2f2; background-color: #d0e9f8;}
.resourceList ul li .btn:hover .icon { background-image: url(../images/common/ico_resourceList_blue.png);}
.sAccodian .sAccodianBtn { display: block; width: 3.4rem; height: 3.4rem; background: url(../images/mypotal/ico_toggle.png) no-repeat left top/cover;}
.sAccodian .sAccodianBtn.active { background-position-y: -3.4rem;}

/*.commentBody { margin-top: 1.7rem; padding: 3rem 2.4rem; border: 1px solid #d4d4d4; background-color: #f6f7f9; border-radius: .6rem;}*/
.commentBody .commentList .between { display: flex; align-items: center; justify-content: space-between;}
.commentBody .commentList .between .date { font-size: 1.2rem; font-weight: 400; color: #717171;}
.commentBody .commentList .article { margin-top: 1.5rem; line-height: 1.6;}
.commentBody .commentList .article .row { display: flex; align-items: baseline;}
.commentBody .commentList .article .row .pGroup { flex: 1; font-weight: 400; font-size: 1.4rem;}
.commentBody .commentList .article .row .btnset { display: flex; align-items: center; justify-content: flex-end; width: 14rem;}
.commentBody .commentList .article .done { width: 100%; height: 4.4rem;}
.commentBody .commentList .article .cancle { width: 100%; height: 4.4rem; margin-top: .8rem; transition: background-color .2s ease-in-out;}
.commentBody .commentList .article .cancle:hover { background-color: #000;}
.commentBody .commentList .article .btnset { width: 10rem;}
.commentBody .commentList .btn { display: flex; align-items: center; justify-content: center; height: 3rem; padding: 0 1.6rem; border: 1px solid #acacac; background-color: #fff; border-radius: .4rem; transition: color, border-color, background-color .2s ease-in-out;}
.commentBody .commentList .btn:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;}
.commentBody .commentList .btn span { font-size: 1.4rem;}
.commentBody .commentList .btn ~ .btn { margin-left: .6rem;}
.commentBody .commentList .comBtn { margin-top: 2rem; color: #20599b;}
.commentBody .commentList .comBtn span { border-bottom: 1px solid #20599b;}
.commentBody .commentList .commentBox { display: none;}
.commentBody .commentList >li ~ li { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid #d7d8d9;}
.commentBody .depth { padding-left: 3rem;}
.commentBody .depth li { margin-top: 3rem;}
.commentBody .depth li .label { color: #20599b;}

.commentBox { display: flex; gap: 1rem;}
.commentBox .textarea { overflow: hidden; flex: 1; position: relative; border: 1px solid #d4d4d4; background-color: #fff; border-radius: .6rem;}
.commentBox .textarea textarea { height: 100%; padding-right: 7.4rem; vertical-align: top; border: none;}
.commentBox .textarea .textarea--num { position: absolute; right: 1.5rem; bottom: .5rem; font-size: 1.4rem; line-height: 1.4;}
.commentBox .btnset { margin-left: 1rem;}
.commentBox .done { display: flex; align-items: center; justify-content: center; width: 12.5rem; height: 9.4rem; background-color: #20599b; border-radius: .6rem; transition: background-color .2s ease-in-out;}
.commentBox .done:hover { background-color: #366cc3;}
.commentBox .done span { display: block; margin-top: -.1rem; font-weight: 500; color: #fff;}
.commentBox .cancle { display: flex; align-items: center; justify-content: center; width: 17rem; background-color: #666; border-radius: .6rem;}
.commentBox .cancle span { display: block; margin-top: -.1rem; font-weight: 500; color: #fff;}
.commentBox-mt { margin-top: 1.8rem;}

.cautionList { margin-top: 3.5rem;}
.cautionList .fontH3 { color: #20599b;}
.cautionList .target { margin-top: 1.5rem; padding: 2rem 2.5rem; background-color: #f0f7fa; border-radius: .6rem;}
.cautionList .target ul li { position: relative; padding-left: 1rem; font-size: 1.4rem; font-weight: 400; line-height: 1.6;}
.cautionList .target ul li::after { content: ''; display: block; position: absolute; left: 0; top: 1.1rem; width: .3rem; height: .3rem; background-color: #000; border-radius: 50%;}
.cautionList .target ul li ~ li { margin-top: .5rem;}

.community .seachList { margin-top: 1rem; padding: 2rem; border: 1px solid #ddd;}

.community .btns { margin-top: 2rem; text-align: center;}

/* 20250624 답변 줄바꿈+스크롤 처리 */
.commentContent { max-height: 150px; overflow: auto; white-space: pre-wrap;}

/* My Potal
**********************************************/

.mypotal >.fontH3:first-child { margin-top: 0;}
.mypotal .tabRound { margin-top: 0;}

.mypotal .myInfo .title { display: flex; align-items: center;}
.mypotal .myInfo .title span { font-size: 2.2rem;}
.mypotal .myInfo .title span ~ span { margin-left: 1rem;}
.mypotal .myInfo .title .btn { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin: -.3rem 0 0 1.6rem; border: 1px solid #d5d5d5; background-color: #fff; border-radius: .4rem; transition: background-color .2s ease-in-out;}
.mypotal .myInfo .title .btn:hover { background-color: #d0e9f8;}
.mypotal .myInfo .title .btn .icon { display: block; width: 2.5rem; height: 2.5rem; background: url(../images/common/ico_myInfo.png) no-repeat center/cover;}
.mypotal .myInfo .keyView { display: flex; align-items: center; justify-content: center; height: 13rem; margin-top: 1.5rem; border: 1px solid #e3e3e3; background-color: #fff; border-radius: .6rem;}
.mypotal .myInfo .keyView p { font-size: 1.8rem;}
.mypotal .myInfo .keyView .btn { display: flex; align-items: center; justify-content: center; height: 4rem; margin-left: 2rem; padding: 0 2.5rem; border: 1px solid #20599b; border-radius: 2rem; transition: background-color .2s ease-in-out;}
.mypotal .myInfo .keyView .btn:hover { background-color: #d0e9f8;}
.mypotal .myInfo .keyView .btn span { display: block; margin-top: -.2rem; font-size: 1.7rem; color: #20599b;}

.mypotal .listApp { display: flex; align-items: center; margin-top: 2rem;}
.mypotal .listApp li { flex: 1;}
.mypotal .listApp li ~ li { margin-left: .7rem;}
.mypotal .listApp li a { display: block; position: relative; height: 20rem; padding: 2.4rem 0 2.9rem; border: 1px solid #e3e3e3; background-color: #fff; border-radius: .8rem; transition: border-color, background-color .2s ease-in-out;}
.mypotal .listApp li a dl { text-align: right;}
.mypotal .listApp li a dt { display: flex; align-items: center; justify-content: flex-end; padding-right: 2.2rem; font-size: 2rem; font-weight: 500;}
.mypotal .listApp li a dt::after { content: ''; display: block; width: .9rem; height: 1.8rem; margin: -.5rem 0 0 1.5rem; background: url(../images/common/ico_arrow_myInfo.png) no-repeat center/cover;}
.mypotal .listApp li a dd { display: flex; align-items: flex-end; justify-content: flex-end; margin-top: 10rem; padding-right: 2.5rem; }
.mypotal .listApp li a dd span { margin-left: .7rem; font-size: 2.2rem; font-weight: 500;}
.mypotal .listApp li a dd .num { font-size: 2.6rem; font-weight: bold; color: #20599b;}
.mypotal .listApp li a::after { content: ''; display: block; position: absolute;}
.mypotal .listApp li a.pattern1::after { left: 3.4rem; top: 4rem; width: 6.9rem; height: 8.9rem; background: url(../images/mypotal/img_pattern01.png) no-repeat center/cover;}
.mypotal .listApp li a.pattern2::after { left: 3.4rem; top: 5rem; width: 9rem; height: 8.1rem; background: url(../images/mypotal/img_pattern02.png) no-repeat center/cover;}
.mypotal .listApp li a.pattern3::after { left: 4rem; top: 4.2rem; width: 6.8rem; height: 7rem; background: url(../images/mypotal/img_pattern03.png) no-repeat center/cover;}
.mypotal .listApp li a.pattern4::after { left: 4.2rem; top: 4.4rem; width: 6.6rem; height: 6.7rem; background: url(../images/mypotal/img_pattern04.png) no-repeat center/cover;}
.mypotal .listApp li a:hover { border-color: #5c8fcb; background-color: #f0f7fa;}
.mypotal .listApp li a:hover dt { color: #20599b;}
.mypotal .listApp2 { overflow: hidden; display: flex; align-items: center; margin-top: 2rem; border: 1px solid #e3e3e3; background-color: #fff; border-radius: .8rem;}
.mypotal .listApp2 li { flex: 1;}
.mypotal .listApp2 li ~ li { position: relative;}
.mypotal .listApp2 li ~ li::after { content: ''; display: block; position: absolute; left: .1rem; top: 1.5rem; bottom: 1.5rem; width: .1rem; background-color: #ededed;}
.mypotal .listApp2 li a { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; position: relative; height: 13.5rem; padding: 2.2rem 2.8rem 1.5rem; border: 1px solid transparent; border-radius: .8rem; transition: border-color, background-color .2s ease-in-out;}
.mypotal .listApp2 li a .icon {flex-shrink: 0;  width: 5.3rem;}
.mypotal .listApp2 li a.pattern1 .icon { left: 4.8rem; top: 3.5rem; height: 5.8rem; background: url(../images/mypotal/img_2_pattern01.png) no-repeat center/cover;}
.mypotal .listApp2 li a.pattern2 .icon { left: 4.6rem; top: 3.7rem; height: 5.3rem; background: url(../images/mypotal/img_2_pattern02.png) no-repeat center/cover;}
.mypotal .listApp2 li a.pattern3 .icon { left: 4.2rem; top: 4rem; height: 4.7rem; background: url(../images/mypotal/img_2_pattern03.png) no-repeat center/cover;}
.mypotal .listApp2 li a.pattern4 .icon { left: 4.3rem; top: 4.1rem; height: 4.9rem; background: url(../images/mypotal/img_2_pattern04.png) no-repeat center/cover;}
.mypotal .listApp2 li a .title { display: flex; align-items: center;  font-size: 2rem; line-height: 2.4rem; font-weight: 500; transition: color .2s ease-in-out;}
.mypotal .listApp2 li a .title::after { content: ''; display: block; flex-shrink: 0; width: .7rem; height: 1.4rem; margin: 0 0 0 1.2rem; background: url(../images/common/ico_arrow_myInfo.png) no-repeat center/cover;}
.mypotal .listApp2 li a:hover { border-color: #5c8fcb; background-color: #edf9ff;}
.mypotal .listApp2 li a:hover span { color: #20599b;}
.mypotal .listApp2 li a:focus { outline-offset: -4px;}
.mypotal .listApp2 li .contsBox {}
.mypotal .listApp2 li .contsBox .number {display: block; margin-top: 2rem; font-size: 2.4rem; font-weight: 700; color:#1B32C3; text-align: right;}

.mypotal .remt { margin-top: 2.5rem;}

.mypotal .boxList { display: flex; flex-wrap: wrap; margin: 1.3rem 0 0 -1.5rem;}
.mypotal .boxList .boxListDiv { position: relative; width: calc(50% - 1.5rem); margin: 1.4rem 0 0 1.5rem;}

.mypotal .informList { margin-top: 2.5rem;}
.mypotal .informList li ~ li { margin-top: .7rem;}
.mypotal .informList li a { display: block; position: relative; padding: 2.5rem 3rem; background-color: #fff; border: 1px solid #e3e3e3; border-radius: .6rem; transition: border-color .2s ease-in-out;}
.mypotal .informList li a:hover { border-color: #20599b; background-color: #f0f7fa;}
.mypotal .informList li .informGroup { display: flex; align-items: center;}
.mypotal .informList li .informGroup .blet { font-size: 1.8rem;}
.mypotal .informList li .informGroup .date { display: block; position: relative; margin: .2rem 0 0 1.6rem; padding-left: 1.6rem; font-size: 1.4rem; font-weight: 400; color: #767676;}
.mypotal .informList li .informGroup .date::after { content: ''; display: block; position: absolute; left: 0; top: .1rem; width: 1px; height: 1.5rem; background-color: #ddd;}
.mypotal .informList li .title { margin-top: 1.6rem; line-height: 1.6; font-weight: 400;}
.mypotal .informList li .icon { display: block; position: absolute; right: 2.5rem; top: 50%; width: .9rem; height: 1.8rem; margin-top: -.9rem; background: url(../images/common/ico_arrow_myInfo.png) no-repeat center/cover;}
.mypotal .informList li .noLink { padding: 2.5rem 3rem; background-color: #f9fafb; border: 1px solid #eff0f1;}
.mypotal .informList li .noLink .icon { display: none;}
.mypotal .informList li .noLink .informGroup .blet,
.mypotal .informList li .noLink .title,
.mypotal .informList li .noLin .informGroup .date { color: #727272;}


/* 2026년 추가 css */
/************************************************************************************************************************/
/* 사용후기 답변 - Start */
.commentBody { margin-top: 1.7rem;}
.commentBody .commentTable tr {border-bottom: 1px solid #d7d8d9;}
.commentBody .commentTable tr:first-child {border-top: 1px solid #d7d8d9;}
.commentBody .commentTable td {padding: 2rem;}
.commentBody .commentTable .noComment {text-align: center;}
.commentBody .commentTable .tblNo {text-align: center; width: 10%; }
.commentBody .commentTable .authorArea .commentData { font-size: 1.4rem; font-weight: 400; }
.commentBody .commentTable .authorArea .commentData .date { font-weight: 400; color: #717171;}
.commentBody .commentTable .authorArea .comment{ margin-top: 1.6rem; line-height: 1.6; font-size:1.6rem;}
/* 사용후기 답변 - End */

/* 통계 */
.tabList { height: 4rem; border-radius: 10px 10px 0 0; border-bottom: 1px solid #20599b;}
.tabList li { display: flex; background: #fff; height: 100%; align-items: center; justify-content: center; flex: 1;}
.tabList li.active { background-color: #d0e9f8; font-weight: 700; }
.largeBtns.stats {justify-content: center; margin: 0;}
.largeBtns.stats  .downloadBtn {margin-left: 1rem; height: 4rem !important;}
.btn_graph { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin-left: .8rem; border: 1px solid #bcbcbc; border-radius: .6rem; transition: border-color, background-color .2s ease-in-out;}
.btn_graph:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;}

.searchGroup.statsSearch {padding: 1.6rem 8%; display: flex; justify-content: center; margin: 2rem 0; background: #edf9ff; border-radius: 10px; }
.searchGroup.statsSearch .label {margin-top: 0; width: fit-content; font-weight: 700; color: #666; flex-shrink: 0;}
.searchGroup.statsSearch .flexLeft input {width: 20rem;}

.stats1, .stats2 { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; width:100%; gap: 1rem;}
.statsCriteria, .searchCriteria, .dataTypeArea {display: flex; align-items: center;}

.stats2 {margin-top: 2rem;}
.stats2 .resourceCategory { display: flex; align-items: baseline;}
.stats2 .resourceCategory .selectedCategory {display: flex; flex-wrap: wrap; gap: 1rem; width: 70rem;}

.offererContainer{ display: flex;  gap: 10px;}

.selectBox, .calendarGroup .calendarBody select, .calendarGroup .calendarBody input { width: 10rem;}
.calendarBody select ~ select {margin-left: 0.8rem;}

/* 통계 목록 화면 */
.statsTableBody { overflow: hidden; position: relative; margin-top: 1.4rem; border-top: 1px solid #d4d4d4;}
.statsTableBody table { table-layout: fixed; width: 100%;}
.statsTableBody table th { padding: 1rem 1rem; font-size: 1.4rem; line-height: 1.2; border-bottom: 1px solid #d4d4d4; background-color: #f6f7f9;}
.statsTableBody table td { padding: 1rem 1rem; font-size: 1.4rem; font-weight: 400; text-align: center; line-height: 2.4rem; word-break: break-word; border-bottom: 1px solid #d4d4d4; background-color: #fff; transition: background-color .2s ease-in-out;}
.statsTableBody table td.textLeft { text-align: left; word-break: keep-all; }
.statsTableBody table tr:hover td a { color: #20599b; text-decoration: underline;}
.searchGroup.statsSearch .flexLeft .longText { width: 40rem; }


/** 임시 추가 */
.input-grid {display: grid;grid-template-columns : auto 1fr auto auto 1fr auto;gap : .6rem 1rem;column-gap : .6rem;align-items: center;}
.input-grid input {width: 100%;min-width: 100px;}
.input-grid span {text-align: left;}
.checkBox-inline {display: inline-flex;align-items: center;gap : 4px;margin-left: 10px;}
.checkBox-inline input[type="checkbox"] {width: 2rem;;height: 2rem;margin : 0;cursor: pointer;}
.checkBox-inline label {white-space: nowrap;}
.scroll-wrap {max-height: 300px; overflow-y : auto;}
.scroll-wrap thead th{position: sticky;}
.odpHadListRows .selectBtn,
.odpCertDtlListRows .selectBtn {height: 4rem; margin-left: 0; white-space: nowrap;}

.layerComm .tableDivide {display: flex; padding: 0 2rem; gap: 2rem;}
.layerComm .tableDivide .tableDivide-left {width: 34%; display: flex; flex-direction: column;}
.layerComm .tableDivide .tableDivide-left .largeBtns {margin-top: auto;}
.layerComm .tableDivide .pContents {padding: 0 0 0; margin-top: 2rem;}
.layerComm .tableBody  .ellipsis {display: block;}
.layerComm .tableDivide .tableDivide-right {overflow-x: auto; width: 66%;}
.layerComm .tableDivide .tableDivide-right .pContents { min-width:76rem; padding-left: 2rem; border-left: 1px solid #ddd; }
.tableDivide .tableDivide-left .scroll-wrap {max-height: 56rem;}

/* --------------------- 메인 컨텐츠 (로그인 후) --------------------- */
.container .main .loginAfter {position: relative; padding: 10rem 0 7.8rem; overflow: hidden;}
.container .main .loginAfter::before {content: ''; position: absolute; right: -4%; bottom: 0; transform: rotate(180deg); width: 66.8rem; height: 33.8rem; background: url(../images/main/main_decobg.png) no-repeat 50%; background-size: 100% auto; }

/* --------------------- 디지털융합플랫폼 소개 --------------------- */
.subTop--bg {position: relative; overflow: hidden; padding-bottom: 7rem; background: linear-gradient(284deg, #EEF6FF 32.64%, #FBFCFF 73.74%);}
.subTop--bg::before {content: ''; position: absolute; top: -6rem; right: 8.4rem; width: 60.6rem; height: 26rem; background: url(../images/common/sub_top_deco.png) no-repeat 50% / 100% auto;}
.subTop--bg .subPageTitle {margin-bottom: 0;}
.subTop--bg .subPageTitle::before {display: none;}
.subTop--bg .subDesc {margin-top: 2.8rem; font-size: 1.7rem; font-weight: 400; line-height: 2.4rem; color: #666;}

.contents.intro {padding-bottom: 0;}
.intro .introSection1,
.intro .introSection2 {padding-top: 7rem; }
.intro .introSection2 {background: linear-gradient(180deg, #FFF 0%, #E5F1FF 100%);}
.subSectionTitle {font-size: 4rem; font-weight: 700; letter-spacing: -2.4px; line-height: 5.2rem; color: #222;}
.subSectionTitle .highlight {font-weight: 700;}
.subEtcTitle {display: block; margin-bottom: 1rem; font-size: 1.7rem; font-weight: 600; letter-spacing: -1.02px;}
.subEtcTitle.white {color: #fff;}
.subSectionTitle2 {font-size: 3rem; font-weight: 700; letter-spacing: -1.8px; color: #000;}
.intro .introImg {margin-top: 3rem; border-radius: 1rem;}
.intro .introDesc {margin-top: 3.2rem; font-size: 2rem; font-weight: 400; letter-spacing: -1.2px; line-height: 4.4rem; color: #333;} 
.intro .introGraph {margin-top: 6rem; text-align: center;}
/* 반입 css */
.intro {position: relative;}
.intro .lang-toggle {margin: -3px 0 0 .4px; height: 3.6rem; line-height: 3.4rem; padding: 0 1.6rem; border: 1px solid #000; border-radius: 5px; font-size: 1.7rem; font-weight: 500; }
.intro .diagram {position: relative; min-width: 132rem;}
.intro .diagram .sect-1 {display: flex; justify-content: space-between; align-items: center; max-width: 804px; margin: 0 auto;}
       .diagram .sect-1 .ellipse-item {position: relative; display: flex; align-items: center; justify-content: center; height: 8rem; width: 310px; border-radius: 50px; text-align: center;}
       .diagram .sect-1 .ellipse-item::before {content: ''; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); width: 7.6rem; height: 1.8rem; background: no-repeat 50%; background-size: 100% auto;}
       .diagram .sect-1 .ellipse-item.public::before {background-image: url(../images/sub/public_deco.svg);}
       .diagram .sect-1 .ellipse-item.private::before {background-image: url(../images/sub/private_deco.svg);}
       .diagram .sect-1 .ellipse-item::after {content: ''; position: absolute; bottom: -58px; left: 50%; width: 24.2rem; height: 4.9rem; background: url(../images/sub/diagram_arrow.svg) no-repeat 50%; background-size: 100% auto;}
       .diagram .sect-1 .ellipse-item.private::after {transform: rotateY(180deg) translateX(100%);}
       .diagram .sect-1 .ellipse-item .title {display: flex; align-items: center; font-size: 2.1rem; font-weight: 600;}
       .diagram .sect-1 .ellipse-item .title::before {content: ''; width: 2.8rem; height: 2.4rem; margin-right: 1rem; background: no-repeat 50%; background-size: 100% auto;}
       .diagram .sect-1 .ellipse-item.public {background: #CDE8FF; border: 1px solid #C8E5FF; color: #002E56;}
       .diagram .sect-1 .ellipse-item.public .title::before { background-image: url(../images/sub/icon_public.svg); }
       .diagram .sect-1 .ellipse-item.private {background: #D0F3DC; border: 1px solid #C5E8D2; color: #0D592B;}
       .diagram .sect-1 .ellipse-item.private .title::before {width: 2.7rem; height: 2.7rem; background-image: url(../images/sub/icon_private.svg);}
       .diagram .sect-1 .ellipse-item .text {position: absolute; bottom: -36px; left: 50%; margin-left: -36px; font-size: 16px; font-weight: 500; color: #666666;}
       .diagram .sect-1 .ellipse-item.private .text {margin-left: 1.2rem;}
.intro .diagram .sect-2 {margin-top: 9.8rem; display: flex; justify-content: space-between; align-items: center; padding: 0 2rem;}
       .diagram .sect-2 .main-box {position: relative; margin: 0 auto; width: 74rem; height: 28.5rem; padding: 0 6rem; border-radius: 10rem; background: linear-gradient(358deg, #FFF 7.88%, #EDF5FF 90.2%); border: 1px solid #BFC8FF; }
       .diagram .sect-2 .main-box::before {content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 100.2rem; height: 23.6rem; background: url('../images/sub/intro_bg_grad.png') no-repeat 50%; background-size: 100% auto;}
                .sect-2 .main-box .main-box__title {display: flex; align-items: center; justify-content: center; max-width: 38.2rem; margin: -2.2rem auto 0; height: 7rem; background: #0D347C; border-radius: 5.4rem; font-size: 2.4rem; font-weight: 700; color: #fff; }
                .sect-2 .main-box .main-box__title::before {content: ''; margin-right: 1.5rem; width: 2.8rem; height: 2.6rem; background: url(../images/sub/intro_icon_platform.svg) no-repeat 50%; background-size: 100% auto;}
                .sect-2 .main-box__list {display: flex; align-items: flex-start; justify-content: space-between; margin-top: 3rem;}
                .sect-2 .main-box__list li {display: flex; flex-direction: column; align-items: center; gap: 1.2rem; font-size: 2rem; font-weight: 600; color: #0d347c; line-height: 2.8rem;}
                .sect-2 .main-box__list li::before {content: ''; width: 8.5rem; height: 8.5rem; background: no-repeat 50%; background-size: 100% auto;}
                .sect-2 .main-box__list li:nth-child(1):before {background-image: url(../images/sub/intro_iconlist_1.svg);}
                .sect-2 .main-box__list li:nth-child(2):before {background-image: url(../images/sub/intro_iconlist_2.svg);}
                .sect-2 .main-box__list li:nth-child(3):before {background-image: url(../images/sub/intro_iconlist_3.svg);}
                .sect-2 .main-box__list li:nth-child(4):before {background-image: url(../images/sub/intro_iconlist_4.svg);}
                .sect-2 .main-box__list li:nth-child(5):before {background-image: url(../images/sub/intro_iconlist_5.svg);}
                .sect-2 .side-box {width: 20rem; height: 18.7rem; display: flex; flex-direction: column; gap: 1.4rem; justify-content: center; align-items: center; background-color: #1767BD; border-radius: 4rem; font-size: 2rem; font-weight: 600; color: #fff; line-height: 2.4rem;} 
                .sect-2 .side-box::before {content: ''; background: no-repeat 50%; background-size: 100% auto;}
                .sect-2 .side-box.left::before {width: 3.9rem; height: 3.9rem; background-image: url(../images/sub/intro_icon_ai.svg);}
                .sect-2 .side-box.right::before {width: 3.5rem; height: 3.8rem; background-image: url(../images/sub/intro_icon_hand.svg);}
                .sect-2 .left-etc,
                .sect-2 .right-etc {position: absolute; top: 13rem; display: flex; flex-direction: column; gap: 1.6rem; align-items: center; font-size: 1.6rem; font-weight: 500; color: #666;}
                .sect-2 .left-etc { left: -6rem;}
                .sect-2 .right-etc {right: -6rem;}
                .sect-2 .left-etc:before,
                .sect-2 .right-etc::before {content: ''; width: 6rem; height: 0.7rem; background: url(../images/sub/diagram_arrow2.svg) no-repeat 50%; background-size: 100% auto;}
                .sect-2 .right-etc::before {transform: rotateY(-180deg);}
.intro .diagram .sect-3 {position: relative; margin: 5.2rem auto 0; width: 66rem; height: 30.6rem; overflow: hidden;}
       .diagram .sect-3 .circle-box {position: absolute; top: 0; left: 0; margin: 2.6rem auto 0; width: 66rem; height: 33rem; border-radius: 33rem 33rem 0 0; background-color:#1FA7D2;;}
       .diagram .sect-3 .circle-box::before {content: ''; position: absolute; top: 4.4rem; left: 50%; transform: translateX(-50%); width: 53.4rem; height: 26.7rem; border-radius: 26.7rem 26.7rem 0 0; border: 1px dashed #fff}
       .diagram .sect-3 .title {position: absolute; top: 13.8rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 1.6rem; align-items: center; justify-content: center; font-size: 2.8rem; font-weight: 600; color: #fff;}
       .diagram .sect-3 .title::before {content: ''; width: 3.4rem; height: 5.3rem; background: url(../images/sub/intro_icon_innovate.svg); background-size: 100% auto;}
       .diagram .sect-3 .circle-list {position: absolute; top: 7.8rem; left: 50%; transform: translateX(-50%); width: 57rem; display: flex; justify-content: space-between; }
       .diagram .sect-3 .circle-list li {display: flex; align-items: center; justify-content: center; width: 11rem; height: 11rem; background: #fff; border-radius: 100%; border: 1px dashed #1FA7D2; font-size: 2.2rem; font-weight: 600; color:#0086B0; }
       .diagram .sect-3 .circle-list li:nth-child(2) {margin-top: -7.8rem;}
       .eng-conts {display: none;}
       .eng-conts .sect-2 .main-box__list li {min-width: 12.8rem; font-size: 1.8rem; line-height: 2.6rem;}
       .eng-conts .sect-3 .circle-list li {font-size: 1.8rem;}
       .eng-conts .sect-2 .left-etc, 
       .eng-conts .sect-2 .right-etc {font-size: 1.4rem;}
       .eng-conts .sect-2 .left-etc:before, 
       .eng-conts .sect-2 .right-etc::before {width: 6.6rem;}
       .eng-conts .sect-2 .left-etc {left: -6.7rem;}
       .eng-conts .sect-2 .right-etc {right: -6.7rem;}
       .eng-conts .sect-2 .main-box .main-box__title {max-width: 44rem;}
/* 반입 css end */

.intro .introSection3 h2 {font-size: 3.6rem; font-weight: 700; letter-spacing: -2.16px; color: #fff; line-height: 4.8rem;}
.intro .introSection3 {position: relative; padding: 11rem 0 17rem; background: url(../images/sub/intro_blue_bg.png) no-repeat 50%; background-size: cover; overflow: hidden;}
.intro .introSection3 .area {z-index: 1;}
.intro .introList {display: flex; gap: 1.6rem; margin-top: 4rem;}
.intro .introList li {position: relative; flex: 1 1 auto; padding: 3rem 2rem; min-height: 47rem; width: calc(20% - .8rem); background: #fff; border-radius: 1rem; border: 1px solid #dbdbdb; overflow: hidden;}
.introList li h3 {font-size: 2.4rem; font-weight: 600; letter-spacing: -1.4px; line-height: 3.4rem; color: #222;}
.introList li p {position: relative; z-index: 1; margin-top: 1rem; font-size: 1.7rem; font-weight: 400; letter-spacing: -1.02px; line-height: 2.6rem; color: #333;}
.introList li .decoImg {position: absolute; right: 0; bottom:0; background: no-repeat 100% / auto 100%;}
.introList li .decoImg1 {width: 22.6rem; height: 21rem ;background-image: url(../images/sub/list_deco_img1.png);}
.introList li .decoImg2 {width: 23rem; height: 20.6rem ;background-image: url(../images/sub/list_deco_img2.png);}
.introList li .decoImg3 {width: 24.2rem; height: 22.2rem ;background-image: url(../images/sub/list_deco_img3.png);}
.introList li .decoImg4 {width: 23.7rem; height: 21.5rem ;background-image: url(../images/sub/list_deco_img4.png);}
.introList li .decoImg5 {width: 23.7rem; height: 21.9rem ;background-image: url(../images/sub/list_deco_img5.png);}
.intro .introImg .pcImg,
.intro .introImg .moImg {height: 40rem; border-radius: 1rem; overflow: hidden; background: no-repeat 50%; background-size: cover;}
.intro .introImg .pcImg {background-image: url(../images/sub/intro_bg_pc.png);}
.intro .introImg .moImg {display: none; background-image: url(../images/sub/intro_bg_mo.png);}



















.inputRowItem {display: flex; align-items: center; margin-top: 1rem; gap: .8rem;}
.inputRowItem .title {white-space: nowrap;}

/* util class */
.w10per {width: 10%;}
.w20per {width: 20%;}
.w30per {width: 30%;}
.w40per {width: 40%;}
.w50per {width: 50%;}
.w60per {width: 60%;}
.w70per {width: 70%;}
.w80per {width: 80%;}
.w90per {width: 90%;}
.w100per {width: 100%;}

@media screen and (max-width:1600px){
  .header h1 .icon {width: 30.2rem; height: 3rem;}
  .gnb .depth1 >li >a {font-size: 1.8rem;}
  .gnb .depth1 {padding-left: 7%;}
  .header .global .login { margin-left: 1.8rem;}
}


/* 디지털자원목록 테이블 - Start */
.digitalTableBody { overflow: hidden; position: relative; margin-top: 1.4rem; border-top: 1px solid #d4d4d4;}
.digitalTableBody table { table-layout: fixed; width: 100%;}
.digitalTableBody table th { padding: 1rem 1rem; font-size: 1.4rem; line-height: 1.2; border-bottom: 1px solid #d4d4d4; background-color: #f6f7f9;}
.digitalTableBody table td { padding: 1rem 1rem; font-size: 1.4rem; font-weight: 400; text-align: center; line-height: 2.4rem; word-break: break-word; border-bottom: 1px solid #d4d4d4; background-color: #fff; transition: background-color .2s ease-in-out;}
.digitalTableBody table td a {display: block;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}
.digitalTableBody table tr:hover td { background-color: #f0f7fa; font-weight: 600; color: #20599b; }
.digitalTableBody table tr:hover td a { color: #20599b; text-decoration: underline;}

.hTableBody.digitalList table td:hover{  background-color: #f0f7fa; font-weight: 600; color: #20599b; }
.hTableBody.digitalList table td a {display: block;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}
.hTableBody.digitalList table td a:hover {color: #20599b;}
/* 디지털자원목록 테이블 - End */

/* 디지털자원 목록 팝업 - Start */
#resourceDigitalModal.layerComm .style1 .pContents { padding: 0 2rem;}
#resourceDigitalModal.layerComm .singleGroupLayer { display: flex; align-items: center; justify-content: center; padding: 1rem 0; border-bottom: 1px solid #dedede; background-color: #f0f7fa;}

#resourceDigitalModal #digitalListPaging a.disabled { pointer-events: none; opacity: 0.4; cursor: not-allowed; }

#resourceDigitalModal .list-head-area { padding: 10px; }
#resourceDigitalModal .list-head-area.aco-head { display: flex; align-items: center; justify-content: space-between; }

#resourceDigitalModal .selectedList button.remove-digital { margin : 0; }

#resourceDigitalModal .selectedList { margin-top: 1.3rem; }
#resourceDigitalModal .selectedList button.accordionBtn { display: block; position: relative; width: 100%; padding: 1rem 5rem 1rem .5rem; text-align: left; line-height: 24px; transition: color, background-color .2s ease-in-out;}
#resourceDigitalModal .selectedList button.accordionBtn:hover {  background-color: #f0f7fa;}
#resourceDigitalModal .selectedList button.accordionBtn::after { content: ''; display: block; position: absolute; right: 1.8rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 1.8rem; background: url(../images/common/ico_acoList.png) no-repeat left top/cover;}
#resourceDigitalModal .selectedList button.accordionBtn.active { color: #20599b;}
#resourceDigitalModal .selectedList button.accordionBtn.active::after { background-position-y: -2.8rem;}

#resourceDigitalModal  .selectedList .btn { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin: -.2rem 0 0 1.5rem; background-color: #fff; border: 1px solid #b4b4b4; border-radius: 50%; transition: color, border-color, background-color .2s ease-in-out;}
#resourceDigitalModal  .selectedList .btn .icon { display: block; width: 1.2rem; height: 1.2rem; background: url(../images/common/ico_resourceList.png) no-repeat center/cover;}
#resourceDigitalModal  .selectedList .btn:hover { border-color: #9dd2f2; background-color: #d0e9f8;}
#resourceDigitalModal  .selectedList .btn:hover .icon { background-image: url(../images/common/ico_resourceList_blue.png);}
/* 디지털자원 목록 팝업 - End */

/* 제공자 포털 이용 가이드 - Start */
.portalguide .portalguideSection {padding-top: 7rem;}
.portalguide .portalguideSection .userguide--section + .userguide--section {margin-top: 60px;}
.portalguide .portalguideSection .userguide--section .section-title,
.portalguide .userguide-tabinsection .section-title {color: #000; font-size: 3rem; font-weight: 700; line-height: 1.05; letter-spacing: -1.8px;}
.portalguide .portalguideSection .userguide--section .section-desc,
.portalguide .userguide-tabinsection .section-desc {margin-top: 3.2rem; font-size: 1.7rem; font-weight: 400; line-height: 1.5; letter-spacing: -1.02px; color: #333;}
.portalguide .userguide-tabinsection .section-desc img {display:block; max-width: 800px;}
.portalguide .userguide-tabinsection .section-desc img.popimg{width:auto; max-width:100%;}
.portalguide .steps + .steps {margin-top: 3.2rem;}
.portalguide .steps .steps-title {color: #1B31C3; font-size: 2.4rem; font-weight: 600; line-height: 1.4; letter-spacing: -1.44px;}
.portalguide .steps .steps-title + p {margin-top: 1.6rem;}
.portalguide .steps .steps-desc {margin-top: 1.6rem;}
.portalguide .steps .steps-desc > .check-list:first-child {margin-top: 0;}
.portalguide .portalguideSection .userguide--tabs {display: flex; margin-top: 80px; justify-content: flex-start; border-bottom: 1px solid #000; gap: 2px;}
.portalguide .portalguideSection .userguide--tabs a,
.portalguide .portalguideSection .userguide--tabs button {background: #888d97; padding: 18px 26px; color: #fff; font-size: 1.8rem; letter-spacing: -1.08px; line-height: 1; font-weight: 700; border-radius: 5px 5px 0 0; border-top: 1px solid #888d97; border-left: 1px solid #888d97; border-right: 1px solid #888d97;}
.portalguide .portalguideSection .userguide--tabs a.active,
.portalguide .portalguideSection .userguide--tabs button.active {position: relative; color: #454545; background: none; border-color: #000;}
.portalguide .portalguideSection .userguide--tabs button.active:after {content: ''; display: block; width: 100%; height: 1px; background: #fff; position: absolute; left: 0; bottom: -1px;}
.portalguide .portalguideSection .userguide--nameTag {display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem; margin-top: 3rem;}
.portalguide .portalguideSection .userguide--nameTag a {display: flex; align-items: center; justify-content: center; padding: 1rem 1.6rem; border-radius: .5rem; font-size: 1.6rem; font-weight: 600; color: #fff; background-color: #0d347c; transition: background-color .2s ease-in-out; border: 1px solid #0d347c;}
.portalguide .portalguideSection .userguide--nameTag a:hover {background-color: #fff; border: 1px solid #0d347c; color: #0d347c;}
.portalguide .userguide-table {margin-top: 2rem;}
.portalguide .userguide-table table {width: 100%; table-layout: fixed; border-top: 1px solid #d4d4d4; border-collapse: collapse;}
.portalguide .userguide-table th {padding: 1rem; font-size: 1.7rem; font-weight: 700; color: #000; text-align: center; vertical-align: middle; background-color: #f6f7f9; border-bottom: 1px solid #d4d4d4;}
.portalguide .userguide-table td {padding: 2.2rem 1.8rem; font-size: 1.7rem; font-weight: 500; line-height: 1.6; color: #333; text-align: left; vertical-align: middle; background-color: #fff; border-bottom: 1px solid #d4d4d4;}
.portalguide .userguide-table td.tac {text-align: center;}
.portalguide .userguide-table th + th {border-left: 1px solid #d4d4d4;}
.portalguide .userguide-table td + td {border-left: 1px solid #d4d4d4;}
.portalguide .userguide-table td ul li {padding-left: 1rem; position: relative;}
.portalguide .userguide-table td ul li:before {content: '•'; position: absolute; left: 0; top: -2px;}
.portalguide .userguide-tabWrap {margin-top: 60px;}
.portalguide .userguide-tabWrap > div + div {margin-top: 60px;}
.portalguide .check-list {margin-top: 32px;}
.portalguide .check-list li {padding-left: 2rem; position: relative; line-height: 1.5;}
.portalguide .check-list li:before {content: ''; display: block; width: 2px; height: 2px; background: #000; border-radius: 50%; position: absolute; left: 1rem; top: 12px;}
.portalguide .check-list.num li:before {width: auto; height: auto; background: none; border-radius: 0; left: 0; top: 1px; font-size: 1.5rem; line-height: 1.5;}
.portalguide .check-list.num li:nth-child(1):before {content: '①';}
.portalguide .check-list.num li:nth-child(2):before {content: '②';}
.portalguide .check-list.num li:nth-child(3):before {content: '③';}
.portalguide .check-list.num li:nth-child(4):before {content: '④';}
.portalguide .check-list.num li:nth-child(5):before {content: '⑤';}
.portalguide .check-list.num li:nth-child(6):before {content: '⑥';}
.portalguide .check-list.num li:nth-child(7):before {content: '⑦';}
.portalguide .check-list.num li:nth-child(8):before {content: '⑧';}
.portalguide .check-list.num li:nth-child(9):before {content: '⑨';}
.portalguide .check-list.num li:nth-child(10):before {content: '⑩';}
.portalguide .check-list + * {margin-top: 20px;}
.portalguide .steps-wrap + .steps-wrap {margin-top: 3rem;}
.portalguide .steps-wrap .steps-wrap-tit {color: #275317; font-size: 2.6rem; font-weight: 600; line-height: 1.4; letter-spacing: -1.44px;}
.portalguide .steps-wrap .steps-wrap-tit + .steps {margin-top: 2rem;}
/* 제공자 포털 이용 가이드 - End */

/* 제공자 포털 이용가이드 이미지 - Start */
.scroll-img-wrapper {margin-top: 6rem; text-align: center; padding-bottom: 2.2rem; overflow-x: auto;}
.scroll-img-wrapper .usageComponentWrap {position: sticky; left: 0; margin-right: 2.0rem;}
.scroll-img-wrapper .usageComponent {display: flex; justify-content: space-between; gap: 0.8rem; margin-bottom: 1.0rem;}
.scroll-img-wrapper .usageComponent > div {width: 3.4rem; height: 3.4rem; border: 1px solid #e3e3e3; border-radius: 50%; }
.scroll-img-wrapper .usageComponent .image-button-left {left: auto; background: #fff url(../images/common/ico_swiperjs_left.svg) no-repeat -3px -3px / 36px;}
.scroll-img-wrapper .usageComponent .image-button-right {right: auto; background: #fff url(../images/common/ico_swiperjs_right.svg) no-repeat -2px -3px / 36px;}
.scroll-img-wrapper .usageComponent .image-button-left:hover {background: #1B32C3 url(../images/common/ico_swiperjs_left.svg) no-repeat -3px -3.6rem / 36px; border-color: #1B32C3;}
.scroll-img-wrapper .usageComponent .image-button-right:hover {background: #1B32C3 url(../images/common/ico_swiperjs_right.svg) no-repeat -2px -3.6rem / 36px; border-color: #1B32C3;}
/* 제공자 포털 이용가이드 이미지 - End */

/* 0622 추가 수정사항 */
.userguide--section + .tabBody{
  margin-top:60px;
}