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

.onlyPC { display: block;}
.onlyTablet { display: none;}
.onlyMobile { display: none;}
.area { position: relative; width: 100%; max-width: 1360px; margin: 0 auto;}
.subInner {width: 100%; max-width: 1360px; margin: 0 auto;}
body {overflow-x: hidden;}
body.noScroll { overflow: hidden;}
.pcHide {display: none;}
.mobileHide {display: none;}
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.text_blue {color: #1D34C3;}
.mw1000 {min-width: 1000px;}
.mw700 {min-width: 700px;}
.mw400 {min-width: 400px;}


#wrap {height: 100%;}
#wrap2 {display: block;}

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

/* GNB */
.header { overflow: hidden; position:fixed; z-index:100; width:100%; height:100px; border-bottom:1px solid rgba(255,255,255,0.2); background-color: rgba(255,255,255,0); transition:all .3s ease; z-index: 1000; }
.header::after {content: ''; display: block; width: 100%; top: 100px; border-bottom: 1px solid #F3F3F3; position: absolute; opacity: 0; transition: all 0.3s;}
/* .header.on {background-color: rgba(255,255,255,0.9); } */

.header h1 { width: 40.3rem; position: absolute; left: 0; top: 0; height: 100%;}
.header h1 a { display: block; width: 100%; height: 100%;}
.header .area { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; max-width: none;}
.header .logo1 {position: absolute; width: 100%; top:36px; left:0; opacity:0; transition:all 1s ease;}
.header .logo2 {position: absolute; width: 100%; top:36px; left:0; opacity:1; transition:all 1s ease;}
/* .header h1 .icon { display: block; width: 16rem; height: 4rem; background: url(../images/common/header_logo.png) no-repeat center/cover;} */

.header .global { height: 100%; max-height: 100px; position: absolute; right: 0; top: 0; display: flex; align-items: center;}
.header .global .loginBox {height: 100%;}
.header .global .loginBox .inner { display: flex; align-items: center; justify-content: flex-end; height: 100%;}
.header .global .providerPotal {transition: all 0.3s; background: #2727C0; border-radius: 50px; padding: 8px 14px; color: #fff; font-weight: 600; font-size: 15px; line-height: 1.2; margin-right: 24px; border: 1px solid #2727C0;}
.header .global .providerPotal.green {background-color: #00a777; border-color: #00a777;}
.header .global .providerPotal:hover {border-color: #1FA7D2; background: #1FA7D2; color: #fff;}
.header .global .loggedInfo { margin-right: 20px; color: #fff; font-size: 15px; font-weight: 600; background: rgba(0, 0, 0, 0.3); border-radius: 50px; display: flex; padding: 8px 12px; max-width: 120px; gap: 6px; line-height: 1.2; word-break:keep-all; transition: all 0.6s ease; border: 1px solid rgba(0, 0, 0, 0.3);}
#btn_my span:not(:last-child)s {display: block; width: 100%; margin: 2px 0;}
.header .global .login { display: flex; align-items: center; justify-content: center; width: 125px; height: 100%; color: #fff; text-align: center; font-weight: 500; font-size: 17px; background-color: #E62D4E; transition: color, border-color, background-color .2s ease-in-out;}
.header .global .login.blue {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; background-color: #24327f;}
.header .global .login.blue > div {display: flex;  flex-direction: column; justify-content: center; align-items: center; gap: 8px;}
/* .header .global .login:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;} */
.header .global .login svg { flex-shrink: 0; }
.header .global .login span { display: block; margin-top: -.1rem; white-space: nowrap; }
.header .global .join { display: flex; align-items: center; justify-content: center; width: 140px; height: 100%; color: #fff; text-align: center; font-weight: 500; font-size: 17px; background-color: #20559b; transition: color, border-color, 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; border: 1px solid #83b2e9; border-radius: 1.8rem; transition: color, border-color, background-color .3s ease-in-out;}
.header .global .mypotalBtn:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;}
.header .global .mypotalBtn .icon { display: block; width: 2.4rem; height: 2.4rem; background: url(../images/common/ico_global.png) no-repeat center/cover;}
.header .global .mypotalBtn span {overflow:hidden; display: block; max-width: 8rem; margin-left: .6rem; font-size: 1.4rem; font-weight: 600; color: #20599b; text-overflow:ellipsis; white-space:nowrap;}
.header .global .logout { display: flex; align-items: center; justify-content: center; height: 3.5rem; margin-left: .7rem; padding: 0 1.8rem; font-size: 1.4rem; white-space: nowrap; border: 1px solid #d4d4d4; background-color: #fff; border-radius: 1.8rem; transition: color, border-color, background-color .3s ease-in-out;}
.header .global .logout:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;}
.header .global .loginBtmBox {height: 100%;}

/* 로그인 후 */
.header .global.after .providerPotal {margin-right: 12px;}

/* hover 후 */
.header.show { border-bottom: none; box-shadow: 0 4px 15px rgba(0, 0, 0, .2);}
.header.show::after {opacity: 1;}
.header.show .gnb .depth2 { display: block;}

body.scroll .header .global .loggedInfo {font-weight: 500; color: #1B32C3; border: 1px solid #1B32C3; background: none;}
body.scroll .header .global .loggedInfo svg path {transition: 0.6s ease; stroke: #1B32C3;}

.gnb { display: flex; align-items: center; justify-content: space-between; flex: 1; margin-left: 3.3rem; width: 100%; max-width: 730px; height: 100%;}
.gnb .mPosition { width: 100%; height: 100%; }
.gnb .depth1 { display: flex; align-items: center; justify-content: space-between; height: 99px;}
.gnb .depth1 >li { position: relative; width: 25%; }
.gnb .depth1 >li >a { display: flex; align-items: center; justify-content: center; height: 9.9rem; font-weight: 500; font-size: 20px; color: #000;}
.gnb .depth1 >li >a:hover { color: #2443BD;}
.gnb .depth1 >li >a.active { 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:hover { background: linear-gradient(to top, #FFFFFF, #ECF3FA);}
.gnb .depth2 li a { display: block; padding: 1rem 0; font-size: 1.8rem; font-weight: 500; text-align: center; transition: all 0.3s; color: #333;}
.gnb .depth2 li a:hover { color: #2443BD;}
.gnb .depth2 li a.active { font-weight: 600; color: #2443BD;}
.header .subMenuBlind { position: absolute; left: 0; top: 9.5rem; width: 100%; height: 0; transition: height .2s ease-in-out;}

@media screen and (max-width:1500px){
  .gnb {margin-left: -2%;}
}

/* main gnb 기본 상태 */
.header.main {padding: 0; background: none; position: fixed;}
.header.main .logo1 {opacity: 1;}
.header.main .logo2 {opacity: 0;}
.header.main .gnb .depth1 >li >a {color: #fff;}
/* main gnb hover 상태 */
.header.show.main {background-color: rgba(255,255,255); }
.header.show.main .logo1 {opacity:0;}
.header.show.main .logo2 {opacity:1; }
.header.show.main .gnb .depth1 >li >a {color: #000;}
.header.show.main .gnb .depth1 >li >a:hover { color: #2443BD;}
/* gnb scroll */
.scroll .header{background-color: rgba(255,255,255,0.9); border-bottom: 1px solid #e1e1e1; box-shadow: 0 4px 15px rgba(0, 0, 0, .2);}
.scroll .header .depth1 > li > a {color:#000;}
.scroll .header.main .gnb .depth1 > li > a {color: #000;}
.scroll .header .logo1 {opacity:0;}
.scroll .header .logo2 {opacity:1; }

/* subpage gnb 기본 */
.header.sub {background-color: rgba(255,255,255,0.9); border-bottom: 1px solid #e1e1e1;}
.header.sub:hover {background-color: rgba(255,255,255,1);}
.header.sub .depth1 > li > a {color:#000;}
.header.sub.main .gnb .depth1 > li > a {color: #000;}
.header.sub .logo1 {opacity:0;}
.header.sub .logo2 {opacity:1; }

/* container */
.contents { padding: 100px 0px 150px; background-color: #f7f7f7; overflow-x: hidden;}
.contents.white { background-color: #fff;}
.contents .area {padding: 0 20px; box-sizing: border-box;}
.contents .area:first-child {position: relative;}
/*.contents .area:first-child:before {content: ""; position: absolute; background: url(../images/common/subpage_bg.png); width: 584px; height: 191px; top:0; right: -226px;}*/

/* 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 { background-color: #32374B; z-index: 1; position: relative; padding: 0 2rem;}
.footer .area { display: flex; align-items: center; width: 100%; max-width: 1320px;}
.footer .flogo { display: block; width: 24.8rem; }
.footer .flogo img { width: 100%;} 
.footer .contextTop {padding: 20px 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1);}
.footer .context { flex: 1; position: relative;}
.footer .context .links { display: flex; align-items: center;}
.footer .context .links a { display: block; font-size: 1.7rem; color: #FFFFFF; font-weight: 500; transition: all 0.3s;}
.footer .context .links a ~ a { margin-left: 1.5rem;}
.footer .context .links a.highlight { color: #1CCAD7;}
.footer .context .links a.highlight:hover { color: #1CCAD7;}
.footer .snsGroup { display: flex; align-items: center; }
.footer .snsGroup a { display: block;}
.footer .snsGroup a ~ a { margin-left: 1.2rem;}
.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 .contextBtm {padding: 40px 0 60px; border-bottom: 1px solid rgba(255,255,255,0.1);}
.footer .address {margin-top: 3.2rem; font-size: 1.8rem; color: #fff; line-height: 30px;}
.footer .address p:first-child { font-weight: 400;}
.footer .address p ~ p { margin-top: 4.2rem;}
.footer .address p span ~ span { margin-left: 1.5rem;}
.footer .address p span:last-child { font-weight: 400;}
.footer .address p.copyright { font-size: 1.6rem; font-weight: 300; color: rgba(255,255,255,0.7);}
.footer .contextAsk {display: flex; flex-wrap: wrap; column-gap: 14px;}
.footer .contextAsk li > span {display: inline-block; margin-right: 5px;}
.footer .contextAsk li a:link {color: #fff;}

.footer .wamark {margin-top: 0.8rem;}
.footer .wamark img { width: auto; height: 4.2rem;}

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

/* 공통 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;}
.mt40 { margin-top: 4rem !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;}

/* 색상 */
/* .highlight { color: #20599b;} */
.highlight { color: #1D34C3;}

/* 현재위치 [ 20250605 웹접근성 수정 , 수정자 : phh] */
.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 { font-size: 42px; font-weight: 700; margin-bottom:60px;}
.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; padding-left: 2.2rem; margin-top: 6rem; font-size: 3.2rem; font-weight: 700; letter-spacing: -1.92px;}
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-mt { margin-top: 5rem;}

.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; transition: background-color .2s ease-in-out;}
.h3Between .btn:hover { background-color: #d0e9f8;}
.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.5rem; border: 1px solid #bcbcbc; border-radius: .6rem; transition: color, border-color, background-color .2s ease-in-out;}
.h3Between .selectBtn span { display: block; margin-top: -.2rem;}
.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: border-color, background-color .2s ease-in-out;}
.h3Between .roundBtn:hover { 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.4rem;}
.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;}

/* 버튼 */
.downloadBtn { display: flex; align-items: center; justify-content: center; height: 3.6rem; margin-right: .7rem; padding: 0 1.2rem; border: 1px solid #1D34C3; background-color: #fff; border-radius: .6rem; transition: background-color .2s ease-in-out;}
.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; color: #1D34C3;}
.downloadBtn-ml { margin-left: 1.8rem;}


.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 2.7rem; border: 1px solid #d7d7d7; background-color: #f6f7f9; border-radius: .6rem; transition: color, border-color, background-color .2s ease-in-out;}
.largeBtns .btn ~ .btn { margin-left: .6rem;}
.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: #20599b; background-color: #20599b;}
.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 .btn.lineBlack { border-color: #000;}
.largeBtns .btn.lineBlack:hover { border-color: #20599b; 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; margin-bottom: 60px; }
.tabRound, .tabApplist { 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 .lable { font-weight: 700;}
.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; text-decoration: underline;}
.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;}

/* 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: 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 left top/3.4rem 6.8rem; 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 left top/3.4rem 6.8rem; border-radius: 50%;}
.swiper-button-prev:hover,
.swiper-button-next:hover { border-color: #9dd2f2; background-color: #f0f7fa; background-position-y: -3.4rem;}
.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;}

/* 서브 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;}

/* 검색 콘트롤 */
.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 .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; justify-content: center; padding: .8rem; border-top: 1px solid #20599b; border-bottom: 1px solid #20599b; background-color: #efefff;}
.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;}
.searchGroup .singleBox .btn span { display: block; margin-top: -.2rem;}
.searchGroup .singleBox .btn.orangeStyle { color: #fff; background-color: #20599b;}

/* 자원목록 */
.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 { min-height: 3rem; 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%; transition: color, border-color, background-color .2s ease-in-out;}
.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;}

.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;}



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

/* 인풋 성공 실패 메세지 */
.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 center/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 center/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; 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;}
.fileStyle .labelBtn { display: inline-flex; align-items: center; justify-content: center; min-width: 80px; min-height: 4rem; height: 4rem; margin-left: .4rem; padding: 0 1.6rem; border: 1px solid #333; background-color: #fff; transition: background-color .2s ease-in-out, border-color .2s ease-in-out; cursor: pointer;}
.fileStyle .labelBtn:hover { color: #366cc3; border-color: #366cc3;}

/* 체크, 라디오 */
.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;}
.layerComm.show { display: block; z-index: 1000;}
.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 { 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: hidden; width: 50rem; 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 .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 .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 .singleGroupLayer { display: flex; align-items: center; justify-content: center; padding: 1.8rem 0; border-bottom: 1px solid #dedede; background-color: #f0f7fa;}
.layerComm .singleGroupLayer .lable {  font-size: 2rem; font-weight: bold; color: #20599b;}
.layerComm .singleGroupLayer .inlineBody { display: flex; align-items: center; position: relative; margin-left: 2rem; border: 2px solid #5c8fcb; background-color: #fff; border-radius: .6rem;}
.layerComm .singleGroupLayer .inlineBody .JS-resetBtn { right: 5rem;}
.layerComm .singleGroupLayer select { height: 4.6rem; border: none;}
.layerComm .singleGroupLayer input { width: 33.5rem; height: 4.6rem; padding-right: 7rem; border: none;}
.layerComm .singleGroupLayer .searchReset { position: relative;}
.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; padding: .6em;}
.layerComm .singleGroupLayer .done .icon { display: block; width: 2.7rem; height: 2.7rem; background: url(../images/common/ico_search_layer.png) no-repeat center/cover;}

/* 토스트 팝업 메세지 */
.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; position: relative; margin-top: 1.4rem; border-top: 1px solid #d4d4d4;}
.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 td.textLeft p { font-family: "Noto Sans KR" !important; font-size:1.6rem !important; font-weight: 400 !important;}
.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 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;}s
.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: break-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 textarea { height: 10rem;}
.hTableBody table td +th { border-left: 1px solid #dbdbdb;}
.hTableBody table td a { text-decoration: underline;}
.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 { width: 15rem;}
.hTableBody .inline .text { margin-left: 1rem; font-size: 1.4rem;}
.hTableBody .inline .btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; 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 .deText { margin-top: .5rem; font-size: 1.3rem; color: #cf2222;}

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




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

/* 본 문 contents */

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


/* 메인
**********************************************/
/* start 페이지 */
.introLayout {background:url(/user/images/main/MaskGroup.png) no-repeat center; background-size: cover; height: 100%; overflow: hidden; position: relative;}
    .introBox {position: absolute; z-index: 101; left:50%; top:50%;  width: 550px; height: 300px; margin-left:-275px; margin-top:-150px; transform:scale(1.5); transition:all 3s ease; transform-origin: center;}
    .introBox .introT1 {position:absolute; top:7%; left:9%; color:#fff; font-size:70px; font-weight: 500; transform:scale(1.6); opacity:0; transition:all 3s ease; padding: 0px 10px; line-height: 120%; border-radius: 10px; padding-bottom: 2px;}
    .introBox .introT2 {position:absolute; top:7%; left:38%; color:#fff; font-size:70px; font-weight: 500; transform:scale(1.6); opacity:0; transition:all 3s 0.5s ease; padding: 0px 10px; line-height: 120%; border-radius: 10px; padding-bottom: 2px; }
    .introBox .introT3 {position:absolute; top:7%; left:67%; color:#fff; font-size:70px; font-weight: 500; transform:scale(1.6); opacity:0; transition:all 3s 1s ease; padding: 0px 10px; line-height: 120%; border-radius: 10px; padding-bottom: 2px;}
    .introBox .introT4 {position:absolute; top:35%; left:17%; color:#fff;font-size:60px; font-weight: 500; overflow: hidden; height:0px;  transition:all 3s 0.8s ease;}
    .introBox .introT5 {position:absolute; top:60%; left:10%; color:#fff;font-size:70px; font-weight: 500; transform:scale(1.6); opacity:0; transition:all 3s 1.7s ease;} 
    .introBox .introD1 {position:absolute; top:22%; left:36%; background-color: #fff; width:8px; height:8px; border-radius:50%; opacity:0; transition:all 1s ease;}
    .introBox .introD2 {position:absolute; top:22%; left:65%; background-color: #fff; width:8px; height:8px; border-radius:50%; opacity:0; transition:all 1s ease;}
    .searchBox {position: absolute; z-index: 101; left:-500px; top:22%; opacity:0; transition:all 1s ease; width: 100%; max-width: 546px; }
      .introTitle {font-size: 36px; line-height: 46px; color: #fff; font-weight: 400; margin-bottom: 36px;}
      .introSearch { position: relative; background: #fff; height: 64px; border-radius: 10px; display: flex; align-items: center; padding: 4px; box-sizing: border-box; column-gap: 2px; margin-bottom: 30px;}
      .introSearch .selectD {position: relative; height: 100%;}
      .introSearch .selectD > button {height: 100%; border: none; width: 90px; padding: 0 3.2rem .1rem 1.6rem; font-size: 18px; font-weight: 500; color: #444; background: #fff url(../images/common/ico_intro_select_arrow.svg) no-repeat calc(100% - 1.2rem) 2.5rem / 13px;}
      /* .introSearch .selectD .choice { display: block; position: relative; width: 100%; height: 4.5rem; padding: 0 3rem 0 1.2rem; color: #20599b; text-align: left; border: 1px solid #20599b; border-radius: .6rem;} */
      .introSearch > .selectD .choice::after { content: ''; display: block; position: absolute; right: 1.2rem; top: 50%; width: 1.8rem; height: .9rem; margin-top: -.4rem; background: none;}
      .introSearch .selectD .choice.rotate::after { transform: rotate(-180deg); }
      .introSearch .selectD .list { display: none; position: absolute; left: 0; top: 6rem; z-index: 10; width: 100%; padding: .7rem 0; border: 1px solid #20599b; background-color: #fff; border-radius: .4rem;}
      .introSearch .selectD .list li button { display: block; width: 100%; padding: .7rem 1.3rem; text-align: left; transition: background-color .2s ease-in-out;}
      .introSearch .selectD .list li button:hover { background-color: #d0e9f8;}
      .introSearch .selectD .list li button.active { color: #2443BD;}
      .introSearch .selectD .list.show { display: block;}
      .introSearch .normalInput {width: calc(100% - 90px); height: 100%;}
      .introSearch .normalInput > input {border: none; width: 100%; height: 100%; font-size: 2rem; letter-spacing: -0.06em; padding-left: 16px;}
      .introSearch .btnDone {position: absolute; right: 14px; top: 0; bottom: 0; margin: auto 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;}
      .introSearch .btnDone .icon {display: block; width: 3rem; height: 3rem; background: url(../images/main/ico_search_done@2x.png) no-repeat 0.2rem -0.1rem / contain;}
      .introSearch .normalInput .searchScrollBody { display: none; position: relative;}
      .introSearch .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;}
      .introSearch .normalInput .searchScrollBody.active { display: block;}
      .introSearch .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;}
      .introSearch .normalInput .searchScroll ul li ~ li { border-top: 1px solid #ddd;}
      .introSearch .normalInput .searchScroll ul li button { display: block; width: 100%; padding: 1rem; text-align: left;}
    .searchBox .patternList {display: flex; gap: 4rem;}
    .searchBox .patternList li {/* margin-right: 10%; */}
    .searchBox .patternList li a {display: flex; gap: 1.6rem; align-items: center;}
    .searchBox .patternList li div {overflow: hidden; background: rgba(255,255,255,0.15); width: 78px; height: 78px; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: all 0.3s; position: relative;}
    .searchBox .patternList li div::before {content: ""; position: absolute; backdrop-filter: blur(6px); z-index: 1; inset: 0;}
    .searchBox .patternList li a div img {position: relative; z-index: 2;}
    .searchBox .patternList li a:hover div {background-color: #0095FF;}
    .searchBox .patternList li a:hover div::before {opacity: 0;}
    .searchBox .patternList li p {color: #fff; font-size: 1.8rem; line-height: 2rem; flex-shrink: 0;}
    /* .searchBox .patternList li:first-of-type div {background: rgba(255,255,255,0.15) url(/user/images/main/ico-intro-menu01.svg) no-repeat center center;}
    .searchBox .patternList li:nth-of-type(2) div {background: rgba(255,255,255,0.15) url(/user/images/main/ico-intro-menu02.svg) no-repeat center center;}
    .searchBox .patternList li:nth-of-type(3) div {background: rgba(255,255,255,0.15) url(/user/images/main/ico-intro-menu03.svg) no-repeat center center;}
    .searchBox .patternList li:last-of-type div {background: rgba(255,255,255,0.15) url(/user/images/main/ico-intro-menu04.svg) no-repeat center center;} */
    .chatBox {position: absolute; z-index: 101; left:-500px;  opacity:0; width:346px; min-height:200px; top:70%; background-color:#27ABD4; border-radius:0px 15px 15px 15px; transition:all 1s 0.3s ease; padding: 32px 36px;}
      .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(/user/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); word-break:keep-all;}
    .chatQuickBox {position: fixed; left: -300px; top: 150px; 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: 190px; min-height: 150px; box-sizing: border-box;}
      .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(/user/images/common/ico_aside_arrow_w.svg) no-repeat center center; position: absolute; right: -15px; bottom: 2px; transition: all 0.3s;}
      .quickBlock strong {font-weight: 500;}
      .quickBlock p {font-size: 16px; line-height: 22px; color: rgba(255,255,255,0.8);}
      .quickBlock a:hover .chatLink::after {transform: translateX(5px);}
      .quickImg {position: absolute; right: 16px; top: -10px; width: 50px; height: 50px;}
      .quickList li {display: flex; align-items: center; justify-content: space-between; border-bottom: 1px dashed #D7D7D7; padding: 13px 9px; font-size: 17px; line-height: 33px; font-weight: 500; transition: all 0.3s;}
      .quickList li a {display: flex; justify-content: space-between; align-items: center; width: 100%; color: #444;}
      .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(/user/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;}
    .maskBox {position: absolute; width: 100%; top:0px; bottom: 0px;}
    .maskBox .wonBox {position: absolute; z-index: 1; width:30px; height:30px; background:#fff; border-radius:50%; opacity:0.3; transition:all 6s ease; box-shadow: 0px 0px 20px rgb(255,255,255);}
    .maskBox .won1 {top:-10%; left:-10%; transition:all 4s ease-out;transform:translate(-50%, -50%) scale(1.5);}
    .maskBox .won2 {top:20%; left:-10%; transition:all 4s 2.2s ease-out;transform:translate(-50%, -50%) scale(1.2);}
    .maskBox .won3 {top:60%; left:-10%; transition:all 4s 0.5s ease-out;transform:translate(-50%, -50%) scale(1);}
    .maskBox .won4 {top:80%; left:-10%; transition:all 4s 1.6s ease-out;transform:translate(-50%, -50%) scale(1.1);}
    .maskBox .won5 {top:-10%; left:120%; transition:all 4s 1.2s ease-out;transform:translate(-50%, -50%) scale(1.2);}
    .maskBox .won6 {top:30%; left:120%; transition:all 4s 2.2s ease-out;transform:translate(-50%, -50%) scale(1.4);}
    .maskBox .won7 {top:70%; left:120%; transition:all 4s 1.8s ease-out;transform:translate(-50%, -50%) scale(1.3);}
    .maskBox .won8 {top:90%; left:120%; transition:all 4s 1.7s ease-out;transform:translate(-50%, -50%) scale(1);}

    .maskBox .won11 {top:-20%; left:-10%; transition:all 2s 0.3s ease-out;transform:translate(-50%, -50%) scale(1);}
    .maskBox .won12 {top:30%; left:-10%; transition:all 2s 2.4s ease-out;transform:translate(-50%, -50%) scale(0.5);}
    .maskBox .won13 {top:50%; left:-10%; transition:all 2s 0.9s ease-out;transform:translate(-50%, -50%) scale(1);}
    .maskBox .won14 {top:90%; left:-10%; transition:all 2s 1.3s ease-out;transform:translate(-50%, -50%) scale(1.1);}
    .maskBox .won15 {top:-30%; left:120%; transition:all 2s 2.8s ease-out;transform:translate(-50%, -50%) scale(0.3);}
    .maskBox .won16 {top:40%; left:120%; transition:all 2s 2.6s ease-out;transform:translate(-50%, -50%) scale(0.8);}
    .maskBox .won17 {top:60%; left:120%; transition:all 2s 2.4s ease-out;transform:translate(-50%, -50%) scale(0.7);}
    .maskBox .won18 {top:70%; left:120%; transition:all 2s 1.9s ease-out;transform:translate(-50%, -50%) scale(1);}


    .maskBox .m0 {position: absolute; height: 100%; animation:bgA 12s infinite;  transition:opacity 1s ease;}
    .maskBox .m1 {position: absolute; width: 100%; height:100%; opacity:0;  transition:opacity 1s ease; background: url('/user/images/main/m5.jpg'); background-size: cover;}
    .maskBox .m2 {position: absolute; width: 100%; height:100%; opacity:0;  transition:opacity 1s ease; background: url('/user/images/main/m6.jpg'); background-size: cover;}
    .maskBox .m3 {position: absolute; width: 100%; height:100%; opacity:0;  transition:opacity 1s ease; background: url('/user/images/main/m7.jpg'); background-size: cover;}
.start .introBox {transform:scale(1)}    
.start .introBox .introT1 {transform:scale(1); opacity:1}
.start .introBox .introT2 {transform:scale(1); opacity:1}  
.start .introBox .introT3 {transform:scale(1); opacity:1}    
.start .introBox .introT4 {height:100px;}  
.start .introBox .introT5 {transform:scale(1); opacity:1}
.start .wonBox {top:50%; left:50%;  transform:translate(-50%, -50%) scale(1); opacity:0;}    

.start2 .introBox {transform: scale(0.8) translateX(80%); transition:all 1s ease;}  
.start2 .introT1 {transition:all 1s ease;}
.start2 .introT2 {transition:all 1s ease;}
.start2 .introT3 {transition:all 1s ease;}
/*.start2 .introD1 {opacity:1;}
.start2 .introD2 {opacity:1;}*/
.start2 .searchBox {opacity:1; left: 7%;}
.start2 .chatBox {opacity:1; left: 7%;}
.start2 .maskBox .m0 {opacity:0;}

.bgB {animation:bgB 8s;}
.start2.index1 .introT1 {background-color:#0095FF; transform:scale(1.1) translateY(-10px); }
.start2.index2 .introT2 {background-color:#0095FF; transform:scale(1.1) translateY(-10px); }
.start2.index3 .introT3 {background-color:#0095FF; transform:scale(1.1) translateY(-10px); }
.start2.index1 .m1 {opacity:1; z-index:2;}
.start2.index2 .m2 {opacity:1; z-index:2;}
.start2.index3 .m3 {opacity:1; z-index:2;}

.scroll .headLayout {background-color: rgba(255,255,255,0.9); border-bottom:1px solid rgba(0,0,0,0.5);}
.scroll .headLayout ul li {color:#000;}
.scroll .headLayout .logo1 {opacity:0;}
.scroll .headLayout .logo2 {opacity:1; }
.scroll .chatQuickBox {left: 30px;}

.sub .chatQuickBox {bottom: 45px;}

@keyframes bgA {
    0% {transform: translateX(0px);}
    100% {transform: translateX(-500px);}
}
@keyframes bgB {
    0% {transform: scale(1);}
    100% {transform: scale(1.2);}
}

/* 맞춤 정보로 알아보는 ~ start */
.bodyLayout { text-align: center; }
.bodyTopBox { padding: 100px 20px; text-align: center; background: linear-gradient(#ffffff, #ECF3FA); position: relative; }
.bodyTopBox .bg1 { position: absolute; top: 0px; right: 0px; }
.bodyTopBoxIn { width: 100%; max-width: 1320px; margin: 0 auto; position: relative; z-index: 1; }
.bodyTopBoxL { position: absolute; width: 520px; border-radius: 20px; background-color: #1B32C3; box-shadow: 0px 0px 50px rgba(27,50,195,0.4); }
.bodyTopLTop { height: 340px; margin: 0px 50px; text-align: left; background: url(/user/images/main/mainIcon01.png) no-repeat center right; }
.bodyTopLTop > p { font-size: 20px; color: #ADEAFF; padding-top: 50px; margin: 0px 0px 70px; line-height: 29px; }
.bodyTopLTop > p > span { display: block; }
.bodyTopSelect {}
.bodyTopSelect .bodyTopSTop { font-size: 24px; color: #fff; display: block; }
.bodyTopSelect select { font-size: 36px; height: auto; color: #fff; background-color: transparent; border: 0px; border-bottom: 1px solid #fff; border-radius: 0; padding: 10px 30px 10px 0px; appearance: none; background: url(/user/images/main/icon_next.svg) no-repeat center right; letter-spacing: -0.06em; vertical-align: unset; width: 195px; }
.bodyTopSelect select option { color: #000; font-size: 18px; }
.bodyTopSelect .bodyTopSText { font-size: 24px; color: #fff; padding-left: 20px; }
.bodyTopLBottom { background-color: #fff; border-radius: 20px; height: 230px; position: relative; }
.bodyTopLBottom ul { height: 100%; display: flex; justify-content: space-around; position: absolute; width: 100%; opacity: 0; z-index: -1; transition: 0.6s ease; }
.bodyTopLBottom ul li { height: 100%; width: 100%; text-align: left; position: relative; }
.bodyTopLBottom ul li:first-child::after { content: ""; border-right: 1px dotted #ccc; height: 79%; position: absolute; top: 25px; right: 0px; }
.bodyTopLBottom ul li a { padding: 40px; display: block; color: #555; font-size: 22px; height: 100%; }
.bodyTopLBottom ul li strong { max-width: 136px; display: block; font-weight: 500; line-height: 28px; }
.bodyTopLBottom ul li strong > b {display: block; font-weight: 500;}
.bodyTopLBottom ul li strong svg { display: block; margin-top: 25px; }
.bodyTopLBottom ul li strong svg path { stroke: #B5B5B5; transition: all 0.3s ease; }
.bodyTopLBottom ul li span { position: absolute; display: block; right: 14%; bottom: 20%; width: 92px; text-align: center; padding-bottom: 12px; /* border: 1px solid red; */
}
.bodyTopLBottom ul li span img { z-index: 3; position: relative; transition: all 0.3s ease; }
.bodyTopLBottom ul li span::before { content: ""; position: absolute; z-index: 1; display: block; width: 92px; height: 24px; border-radius: 50%; background: #E3E3E3; left: 0px; bottom: 0px; }
.bodyTopLBottom ul li span::after { content: ""; position: absolute; z-index: 2; display: block; width: 92px; height: 24px; border-radius: 50%; background: linear-gradient(90deg, #1B32C3, #24A6F8); left: 0px; bottom: 0px; transition: all 0.6s ease; opacity: 0; }
.bodyTopLBottom ul li a:hover span::after { opacity: 1; }
.bodyTopLBottom ul li a:hover strong { color: #1B32C3; }
.bodyTopLBottom ul li a:hover strong svg path { stroke: #1B32C3; }
.bodyTopLBottom ul li a:hover img { transform: translateY(-5px); }
.bodyTopLBottom ul.on { opacity: 1; z-index: 100; }
.bodyTopBoxR { margin-left: 590px; text-align: left; height: 570px; }
.bodyTopBoxR .bodyTopBoxRInner { border-bottom: 1px solid #000; height: 100%; position: absolute; top: 0; z-index: -1;}
.bodyTopBoxR .bodyTopBoxRInner > p { color: #555; font-size: 22px; line-height: 1.45; transform: translateY(30px); opacity: 0;}
.bodyTopBoxR .bodyTopBoxRInner .bodyTRText {font-size: 17px; color: #666; line-height: 28px; border: 1px solid #D8D8D8; display: inline-block; padding: 0px 15px; border-radius: 15px; opacity: 0; }
.bodyTopBoxR .bodyTopBoxRInner .bodyTRTitle { font-size: 36px; color: #2443BD; font-weight: 600; margin-bottom: 24px; margin-top: 16px; line-height: 52px; word-break: keep-all; transform: translateY(30px); opacity: 0;}
.bodyTopBoxR .bodyTopBoxRInner .bodyTRImgWrap { position: absolute; bottom: 22px; left: 22px; display: flex; align-items: end; justify-content: space-between; }
.bodyTopBoxR .bodyTopBoxRInner .bodyTRImgWrap > img {opacity: 0; transform: translateY(35px);}
.bodyTopBoxR .bodyTopBoxRInner .bodyTRImgWrap > img:first-child { margin-right: 10px; }
.bodyTopBoxR .bodyTopBoxRInner.on {z-index: 100; transition: 0.6s;}
.bodyTopBoxR .bodyTopBoxRInner.on .bodyTRText {transition:all 0.6s ease; opacity:1;}
.bodyTopBoxR .bodyTopBoxRInner.on .bodyTRTitle {transform: translateY(0px);  transition:all 0.6s ease; opacity:1; letter-spacing: -0.06em;}
.bodyTopBoxR .bodyTopBoxRInner.on > p {transform: translateY(0px);  transition:all 0.6s 0.3s ease; opacity:1;}
.bodyTopBoxR .bodyTopBoxRInner.on .bodyTRImgWrap > img:first-child { opacity: 1; transform: translateY(0px); transition: all 0.6s 0.6s ease; max-width: 50%;}
.bodyTopBoxR .bodyTopBoxRInner.on .bodyTRImgWrap > img:last-child { opacity: 1; transform: translateY(0px); transition: all 0.6s 0.8s ease; max-width: 50%;}
.bodyTopBoxR > p { font-size: 20px; color: #555; }
.bodyBottomBox { position: relative; padding: 150px 0px; text-align: center; }
.bodyBottomBox > img { position: relative; z-index: 10; }
.bodyBottomBox .bg1 { position: absolute; top: 350px; left: 0%; }
.bodyBottomBox .bg2 { position: absolute; bottom: 0px; right: 0px; }
.footerLayout { background-color: #32374B; height: 330px; padding-top: 20px; text-align: center; }
.subLayout { text-align: center; padding: 160px 0px 130px; }
.subBgTop { position: absolute; top: 0px; left: 50%; transform: translateX(300px); }
.linkBox1 { position: absolute; top: 307px; width: 422px; height: 50px; left: 50%; margin-left: -660px; }
.linkBox2 { position: absolute; top: 307px; width: 422px; height: 50px; left: 50%; margin-left: -213px; }
.linkBox3 { position: absolute; top: 307px; width: 422px; height: 50px; left: 50%; margin-left: 235px; }
/* 맞춤 정보로 알아보는 ~ end */

.container .main { padding: 11rem 0 17rem; overflow-x: hidden;}
.main .area {padding: 0 20px;}
.main .mainObj01 {position: absolute; left: 0%; top: 50%;}
.main .mainObj02 {position: absolute; right: -5%; bottom: 0;}

.main .mainSearch { margin-bottom: 6rem; padding-top: 11rem; position: relative;}
.main .mainSearch .area { width: 100%; max-width: 132rem;}
.main .mainSearch .area .space .flexBetween { align-items: flex-end; margin-bottom: 40px;}
.main .mainSearch .area .space .flexBetween h2 { font-size: 3.6rem; font-weight: 400; color: #000000; line-height: 4.8rem; letter-spacing: -0.06em;}
.main .mainSearch .area .space .flexBetween h2 span {font-weight: 600;}
.main .mainSearch .area .space .flexBetween .more {position: relative; top: auto; width: 4.3rem; height: 4.3rem; background: #838A96; right: auto; border: none;}
.main .mainSearch .area .space .flexBetween .more:hover {background: #1B32C3;}
.main .mainSearch .area .space .flexBetween .iconSet { display: flex; align-items: center; justify-content: center;}
.main .mainSearch .area .space .flexBetween .iconSet .icon { display: block; width: 2.1rem; height: 2.1rem; background: url(../images/main/ico_iconSet.png) no-repeat center/cover;}
.main .mainSearch .area .space .flexBetween .iconSet span { display: block; margin: -.2rem 0 0 .4rem;}
.main .mainSearch .area .space .flexBetween .iconSet:hover span { color: #20599b;}
/* .main .mainSearch .search { display: flex; align-items: center; position: relative; border: .4rem solid #5c8fcb; 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;}
.main .mainSearch .search .btnDone { display: block; position: absolute; right: 0; top: 0; padding: 1rem;}
.main .mainSearch .search .btnDone .icon { display: block; width: 4rem; height: 3.9rem; background: url(../images/main/ico_search_done.png) no-repeat center/cover;}
.main .mainSearch .search .selectD .choice { width: 10rem; height: 4.2rem; padding: 0 0 .4rem 2rem; font-size: 1.8rem; color: #20599b; border: none; border-right: 1px solid #939393; border-radius: 0;}
.main .mainSearch .search .selectD .choice::after { right: 1.2rem; top: 50%; width: 1.8rem; height: .8rem; margin-top: -.4rem; background: url(../images/main/ico_selectD_arrow_main.png) no-repeat center/cover;}
.main .mainSearch .condition { display: flex; align-items: center; justify-content: center; margin-top: 2rem; column-gap: 3.5rem; background: linear-gradient(to right, #192B59, #132F74); padding: 26px 40px; box-sizing: border-box; border-radius: 10px;}
.main .mainSearch .condition .title { margin-top: .3rem; padding: 0 1.2rem 0 .6rem; font-size: 1.8rem; font-weight: 700; color: #fff;}
.main .mainSearch .condition .selectDGroup { display: flex; flex: 1;}
.main .mainSearch .condition .selectDGroup .selectD { flex: 1; display: flex; align-items: center;}
.main .mainSearch .condition .selectDGroup .selectD span {color: #fff; font-size: 2rem; font-weight: 500; flex-shrink: 0; margin-right: 2rem;}
.main .mainSearch .condition .selectDGroup .selectD div {width: 100%; position: relative;}
.main .mainSearch .condition .selectDGroup .selectD ~ .selectD { margin-left: 3%;}
.main .mainSearch .condition .searchBody {position: relative;}
.main .mainSearch .condition .searchBody::after {content: ''; border-left: 1px solid rgba(255,255,255,0.2); position: absolute; width: 0; height: 45px; top: 0; bottom: 0; margin: auto 0; left: 0;}
.main .mainSearch .condition .search { transition: all 0.3s; display: flex; align-items: center; height: 4.8rem; padding: 0 1.7rem; margin-left: 3.5rem; background: #1B32C3; border-radius: 1rem; color: #fff; font-weight: 500; font-size: 2rem; width: 13.3rem; box-sizing: border-box; justify-content: center;}
.main .mainSearch .condition .search .icon { display: block; width: 2.2rem; height: 2.2rem; margin-right: .7rem; background: url(../images/main/ico_search_w@2x.png) no-repeat center/cover;}
.main .mainSearch .condition .search:hover {background: #0095FF;}
.main .mainSearch .condition .search:hover span { color: #fff;}

.selectD { position: relative;}
.selectD .choice { display: block; position: relative; width: 100%; height: 4.5rem; font-size: 1.8rem; font-weight: 500; padding: 0 3.6rem 0 1.7rem; color: #fff; text-align: left; border: none; background: rgba(255,255,255,0.2); border-radius: .6rem;}
.selectD .choice::after { content: ''; display: block; position: absolute; right: 2.4rem; top: 50%; width: 1.4rem; height: .7rem; margin-top: -.2rem; background: url(../images/main/icon_next.svg) no-repeat center/cover;}
.selectD .choice.rotate::after { transform: rotate(-180deg); }
.selectD .list { display: none; position: absolute; left: 0; top: 5rem; z-index: 20; 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; font-weight: 400; }
.selectD .list li button:hover { background-color: #d0e9f8;}
.selectD .list li button.active { color: #20599b;}
.selectD .list.show { display: block;}

.main .mainSearch .keyword { display: flex; align-items: center; justify-content: center; margin-top: 1.5rem;}
.main .mainSearch .keyword .title { margin-right: 3.2rem; font-size: 1.4rem; font-weight: 700; color: #555;}
.main .mainSearch .keyword button { font-size: 1.4rem; font-weight: 400; color: #656565; white-space: nowrap;}
.main .mainSearch .keyword button ~ button { margin-left: 2.3rem;}
.main .mainSearch .keyword button::before { content: '#';}
.main .mainSearch .keyword button:hover { color: #20599b;}

.main .pattern { margin-top: 4.2rem;}
.main .patternList { display: flex; align-items: center;}
.main .patternList li { flex: 1;}
.main .patternList li ~ li { margin-left: .8rem;}
.main .patternList li a { display: block; position: relative; height: 18rem; padding: 2rem; border: 2px solid transparent; background-color: #fff; border-radius: 1rem; box-shadow: 0 .1rem 1rem .1rem rgba(0, 0, 0, 0.094); transition: border-color .2s ease-in-out;}
.main .patternList li a .title {  font-weight: bold; font-size: 1.8rem;}
.main .patternList li a .icon { display: block; width: 8.4rem; height: 8.4rem; margin: 1.5rem auto 0;}
.main .patternList li a .icon.img01 { background: url(../images/main/img_pattern01.png) no-repeat center/cover;}
.main .patternList li a .icon.img02 { background: url(../images/main/img_pattern02.png) no-repeat center/cover;}
.main .patternList li a .icon.img03 { background: url(../images/main/img_pattern03.png) no-repeat center/cover;}
.main .patternList li a .icon.img04 { background: url(../images/main/img_pattern04.png) no-repeat center/cover;}
.main .patternList li a .number { margin-top: .5rem;  font-weight: bold; font-size: 1.74rem; text-align: center;}
.main .patternList li a .arrow { display: block; position: absolute; right: 2rem; top: 1.8rem; width: .8rem; height: 1.4rem; background: url(../images/main/ico_pattern_arrow.png) no-repeat center/cover;}
.main .patternList li a:hover { border-color: #5c8fcb; background-color: #f0f7fa;}
.main .patternList li a:hover .title { color: #20599b;}
.main .patternList li a:hover .number { color: #20599b;}
.main .patternList li a:hover .arrow { background-image: url(../images/main/ico_pattern_arrow_blue.png);}

.main .classGroup { display: flex; position: relative; height: 13rem;  margin-top: -6.4rem; padding-left: 13.6rem; background-color: #fff; border-radius: 2rem; box-shadow: 0 .1rem 1rem .1rem rgba(0, 0, 0, 0.094);}
.main .classGroup h3 { display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; width: 13.6rem; height: 100%; font-size: 2rem;  font-weight: 500; color: #fff; text-align: center; line-height: 1.3; background-color: #20599b; border-radius: 2rem 0 0 2rem;}
.main .JS-classSwiper { overflow: hidden;  position: relative; height: 18rem; padding: 1rem 10rem 0;}
.main .JS-classSwiper .swiper-slide a { display: block; height: 11rem; padding-top: 1rem; text-align: center; transition: background-color .2s ease; border-radius: 1rem;}
.main .JS-classSwiper .swiper-slide a:focus { outline-offset: -2px;}
.main .JS-classSwiper .swiper-slide a:hover { background-color: #f0f7fa;}
.main .JS-classSwiper .swiper-slide a img { width: 6rem; height: 6rem;}
.main .JS-classSwiper .swiper-slide a .title { margin-top: .4rem;}
.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(-125%);}
.main .JS-classSwiper .position .swiper-pagination-bullet { background-color: #d1d1d1;}

.main .mainTitle { margin-top: 10.6rem; font-size: 3.3rem; font-weight: bold; text-align: center;}
.main .mainTitle-white { margin-top: 0; color: #000;}
.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-bottom: 2.4rem; font-size: 2.8rem; font-weight: 500;}

.swiperWrap {display: flex; column-gap: 4%; margin-bottom: 150px;}
.swiperWrap > .usage {width: calc(64% + 8px);}
.swiperWrap > .usage .swiper-container {padding: 0 1px; box-sizing: border-box;}
.swiperWrap > .new {width: 100%; max-width: calc(32% - 8px);}
.swiperWrap > .new .swiper-container {padding: 0 1px; box-sizing: border-box;}

.main .JS-manySwiper,
.main .JS-newSwiper,
.main .JS-recommendSwiper { position: relative; margin-top: 2rem;}
.main .JS-manySwiper .swiper-slide,
.main .JS-newSwiper .swiper-slide,
.main .JS-recommendSwiper .swiper-slide { position: relative;}

.main .more { display: flex; align-items: center; justify-content: center; position: absolute; right: .3rem; top: -5.2rem; width: 3.8rem; height: 3.8rem; background-color: #838A96; border-radius: 50%; transition: background-color, border-color .3s ease-in-out;}
.main .more:hover { background-color: #1B32C3;}
.main .more .icon { display: block; width: 1.5rem; height: 1.5rem; background: url(../images/common/ico_more.svg) no-repeat center/cover; transition: all 0.3s;}
.main .more:hover .icon { transform: rotate(180deg); }

.main .JS-manySwiper .position,
.main .JS-newSwiper .position,
.main .JS-recommendSwiper .position { display: flex; align-items: center; justify-content: center; margin-top: 2.8rem;}
.main .JS-manySwiper .position .swiper-pagination-bullet,
.main .JS-newSwiper .position .swiper-pagination-bullet,
.main .JS-recommendSwiper .position .swiper-pagination-bullet { background-color: #d1d1d1;}

.boxList a { display: block; position: relative; padding: 3.6rem 4rem; border: 1px solid #e3e3e3; box-sizing: border-box; background-color: #fff; border-radius: 1rem; transition: border-color, background-color .3s ease-in-out; height: 464px; overflow: hidden; z-index: 1;}
.boxList a * {z-index: 2; position: relative;}
.boxList a::before {content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(to bottom, #FFFFFF, #EBEFFF); left: 0; top: 0; display: block; z-index: 0; opacity: 0; transition: all 0.3s;}
.boxList a .blet {margin-bottom: 1.8rem;}
.boxList a .blet span { display: inline-block; height: 36px; line-height: 18px; background: #DFF4E6; padding: 9px 9px 7px 9px; font-size: 1.7rem; color: #1F9D49; transition: all 0.3s; }
.boxList a:focus { outline-offset: -2px;}
.boxList a:hover { border-color: #1B32C3; box-shadow: 0 4px 20px rgba(255,255,255,0.25); }
.boxList a:hover::before {opacity: 1;}
.boxList a:hover .blet span {background: #1B32C3; color: #fff;}
/* .boxList a .blet span.data { color: #4786cf;}
.boxList a .blet span.service { }
.boxList a .blet span.sw { color: #c20600;}
.boxList a .blet span.block { color: #0084a5;} */
.boxList a .title { overflow:hidden; margin-bottom: 2.4rem; font-size: 2.2rem; font-weight: 500; line-height: 3rem; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 6rem;}
.boxList a .hBody .data { display: flex; align-items: center; margin-top: 2rem;}
.boxList a .hBody .data span:first-child { border: 1px solid #D8D8D8; border-radius: 50px; padding: 4px 12px; font-size: 1.6rem; line-height: 2.2rem; color: #666; font-weight: 500; box-sizing: border-box;} 
.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: 3; -webkit-box-orient: vertical; margin-bottom: 3rem; font-weight: 400; color: #666; line-height: 2.4rem; font-size: 1.6rem; height: 7.2rem;}
.boxList a .pvGroup {position: absolute; bottom: 0; width: 100%; height: 63px; left: 0; display: flex; justify-content: center; align-items: center; border-top: 3px solid #F3F3F3;}
.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 {font-size: 1.6rem; font-weight: 500; color: #666;}
.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: #1B32C3;}

.boxList a .pvGroup2 {position: relative; bottom: 0; width: 100%; height: 63px; left: 0; display: flex; justify-content: center; align-items: center; border-top: 3px solid #F3F3F3;}
.boxList a .pvGroup2 .price { display: flex; align-items: center;}
.boxList a .pvGroup2 .price b { font-size: 2.6rem; font-weight: 700; color: #4786cf; letter-spacing: -1px;}
.boxList a .pvGroup2 .price span { margin-left: .2rem; font-size: 2.2rem;}
.boxList a .pvGroup2 .price b.free { color: #13a508;}
.boxList a .pvGroup2 .vi { display: flex; align-items: center;}
.boxList a .pvGroup2 .vi >span {font-size: 1.6rem; font-weight: 500; color: #666;}
.boxList a .pvGroup2 .vi >span ~ span { margin-left: 1.3rem; padding-left: 1.3rem; border-left: 1px solid #ddd;}
.boxList a .pvGroup2 .vi >span .highlight {color: #1B32C3;}

.boxList a .com { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem; height: 4.2rem; overflow: hidden;}
.boxList a .com span { display: block; font-size: 1.7rem; font-weight: 500; color: #666; flex-shrink: 0;}
.boxList a .com span::before { content: '#';}

.favorite { display: block; position: absolute; right: 4rem; top: 3.6rem; z-index: 2;}
.favorite .icon { display: block; width: 2.4rem; height: 2.9rem; background: url(../images/common/ico_favorite.svg) no-repeat left top/cover; position: relative;}
.favorite.active .icon  {background: url(../images/common/ico_favorite_on.svg) no-repeat left top/cover;}
.favorite.active .icon::before {content: ''; display: block; width: calc(100% + 10px); height: 2px; position :absolute; top: -4px; left: -5px; background-color: red; } 

.main .mainInfo { padding-bottom: 17rem; position: relative; overflow: hidden;}
.main .mainInfo .mainTitle {text-align: left; font-size: 3.6rem; line-height: 4.8rem; font-weight: 600; letter-spacing: -0.06em; margin-top: 0;}
.main .mainInfo .mainTitle > span {font-weight: 400;}
.main .newInfo { display: flex; gap: 4.4rem; margin-top: 3rem;}
.main .newInfo .newInfo-banner {width: 41rem;}
.main .JS-infoSwiper { position: relative; width: 100%; height: 35.5rem; padding-top: 0; margin-bottom: 35px; border: 1px solid #eee;}
.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: center; 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 .position { display: flex; align-items: center; position: relative; margin-top: 1.5rem;}
.main .JS-infoSwiper .position .inner { width: 5rem;}
.main .JS-infoSwiper .position .swiper-pagination { flex: 1; text-align: center; padding-top: .2rem;}
.main .JS-infoSwiper .position .fraction { width: 5rem; font-size: 1.3rem; color: #fff; text-align: right;}
.main .newInfo-board { position: relative; width: calc(100% - 454px); background: #F4F5FF; padding: 14px 3% 7px;}
.main .newInfo-board .mainTab { display: flex; align-items: center; padding-right: 4.5rem; column-gap: 10px;}
.main .newInfo-board .mainTab button { display: block;}
.main .newInfo-board .mainTab button > span { display: block; padding: 23px 10px; font-size: 24px; font-weight: 400; color: #666; border-bottom: 2px solid transparent; letter-spacing: -0.06em; transition: all 0.3s;}
.main .newInfo-board .mainTab button > span .onlyPC {display: inline-block;}
.main .newInfo-board .mainTab button:hover span { color: #1B32C3;}
.main .newInfo-board .mainTab button.active span { font-weight: 600; color: #000; border-color: #000;}
.main .newInfo-board .target { margin-top: -.2rem; border-top: 2px solid #e0e0e0;}
.main .newInfo-board .tablist-list li { transition: background-color .2s ease-in-out;}
.main .newInfo-board .tablist-list li ~ li { border-top: 1px dashed #E1E1E1;}
.main .newInfo-board .tablist-list a { display: flex; padding: 2.5rem 0; justify-content: space-between; align-items: center;}
.main .newInfo-board .tablist-list a .title { overflow:hidden; display: block; font-size: 2rem; color: #555; text-overflow:ellipsis; white-space:nowrap; line-height: 2rem; transition: all 0.3s; font-weight: 500; width: calc(100% - 100px);}
.main .newInfo-board .tablist-list a .subTitle { overflow:hidden; display: block; width: 100%; font-weight: 400; color: #fff; text-overflow:ellipsis; white-space:nowrap;}
.main .newInfo-board .tablist-list a .date { display: block; margin-top: .2rem; font-size: 1.6rem; font-weight: 400; color: #999; line-height: 1.6;}
.main .newInfo-board .tablist-list a:hover .title {color: #1B32C3;}
.main .newInfo-board .tabpanel { position: relative;}
.main .newInfo-board .tabpanel .more { top: -6rem; width: 43px; height: 43px;}

.main .JS-infoSwiper .infoComponent {position: absolute; display: flex; align-items: center; bottom: -11px; background: #636E84; padding: 0 16px 0 20px; height: 44px;}
.main .JS-infoSwiper .infoComponent > span {font-size: 2rem; color: #fff; line-height: 22px;}
.main .JS-infoSwiper .infoComponent .position {margin: 1px 0 0 3px;}  
.main .JS-infoSwiper .infoComponent .position .inner {width: auto; display: flex; align-items: center; height: 24px;}
.main .JS-infoSwiper .infoComponent .position .fraction {width: fit-content; line-height: auto; margin: 0 3px; font-size: 1.5rem; height: 17px;}
  .infoComponent .stopControl { display: block; width: 2.4rem; height: 2.4rem; background: url(../images/common/ico_stopControl.svg) no-repeat left top/cover;}
  .infoComponent .stopControl.play { background-position-y: -2.6rem;}
  .infoComponent .swiper-button-prev {position: relative; top: 0; left: auto; margin-top: 0; background: url(/user/images/main/ico_alarmzone_prev.svg) no-repeat center center; border: none; width: 20px; height: 20px;}
  .infoComponent .swiper-button-next {position: relative; top: 0; right: auto; margin-top: 0; background: url(/user/images/main/ico_alarmzone_next.svg) no-repeat center center; border: none; width: 20px; height: 20px;}
  .infoComponent .swiper-button-prev:hover {position: relative; left: auto; margin-top: 0; background: url(/user/images/main/ico_alarmzone_prevOn.svg) no-repeat center center; border: none; width: 20px; height: 20px;}
  .infoComponent .swiper-button-next:hover {position: relative; right: auto; margin-top: 0; background: url(/user/images/main/ico_alarmzone_nextOn.svg) no-repeat center center; border: none; width: 20px; height: 20px;}

.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(/user/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: 20px 16px; background: #49AF1A; transition: all 0.3s;}
  .guideImg {margin-right: 20px; position: relative;}
  .guideImg::before {content: ''; display: block; width: 25px; height: 25px; border-radius: 50%; background: rgba(255,255,255,0.3); position: absolute; left: 0px; top: 0px; transition: all 0.3s;}
  .guideImg::after {content: ''; display: block; width: 41px; height: 41px; border-radius: 50%; background: rgba(255,255,255,0.3); position: absolute; right: -10px; bottom: -10px; transition: all 0.3s;}
  .guideImg img {position: relative; z-index: 2; width: 54px;}
  .guideBannerText {display: flex; flex-direction: column; justify-content: flex-start;}
  .guideBannerText > p {font-size: 1.8rem; line-height: 2.6rem; color: #fff; font-weight: 500; margin-bottom: .2rem; word-break: keep-all;}
  .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;}

.swiperWrap .usageComponent,
.swiperWrap .newComponent {position: absolute; top: -30px; right: 0; display: flex; column-gap: 9px;}
.swiperWrap .usageComponent > div,
.swiperWrap .newComponent > div {position: relative; transition: all 0.3s;}
.swiperWrap .swiper-button-prev {left: auto; background: #fff url(../images/common/ico_swiperjs_left.svg) no-repeat -3px -3px / 36px;}
.swiperWrap .swiper-button-next {right: auto; background: #fff url(../images/common/ico_swiperjs_right.svg) no-repeat -2px -3px / 36px;}
.swiperWrap .swiper-button-prev:hover {background: #1B32C3 url(../images/common/ico_swiperjs_left.svg) no-repeat -3px -3.6rem / 36px; border-color: #1B32C3;}
.swiperWrap .swiper-button-next:hover {background: #1B32C3 url(../images/common/ico_swiperjs_right.svg) no-repeat -2px -3.6rem / 36px; border-color: #1B32C3;}





/* DPG허브 소개
**********************************************/
.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; }
.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; 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; 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 { margin-top: -20px; 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;}
.licenceGroup .viewBox {padding: 1.6rem; border: 1px solid #ddd; border-radius: 0.6rem; }
.terms {margin-top: 2rem;}
.terms .agreeBox {height: 10rem; margin-top: 1rem; color: #333; border: 1px solid #ddd; padding: 1.6rem; border-radius: .6rem;}

.fontH3.line {border-top: 1px solid #dedede; padding-top: 1.6rem;}
.contentTitle {margin-top: 2rem;}
.contentTitle .title {margin-bottom: 1.4rem; font-size: 1.8rem;}
.contentTitle p {color: #666; font-size: 1.5rem;}

.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;}


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

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

/* TODO : 추후 삭제 예정 */
/*.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;}*/

/* 댓글 화면 수정 */
.commentBody { margin-top: 1.7rem;}
.commentBody .commentList > li {position:relative; padding: 2.5rem 0;}
.commentBody .commentList > li:first-child::before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; border-top: 1px solid #d4d4d4; }
.commentBody .commentList > li:last-child::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; border-top: 1px solid #d4d4d4; }
.commentBody .commentList > li ~ li {border-top: 1px solid #d7d8d9;}
.commentBody .commentList .between { display: flex; align-items: center; font-size: 1.4rem;}
.commentBody .commentList .between span:not(:last-child)::after { content: " | "; margin: 0 6px; color: #ccc; }
.commentBody .commentList .between .date { 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.6rem;}
.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 .depth { padding-left: 3rem;}
.commentBody .depth li { margin-top: 3rem;}
.commentBody .depth li .label { color: #20599b;}


.commentBox { display: flex; gap: .8rem;}
.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;}

.goodCount { padding: 2.7rem 0; border-bottom: 1px solid #d4d4d4;}
.goodCount >div { position: relative; width: 14rem; margin: 0 auto;}
.goodCount input { position: absolute; left: -.4rem; top: -.3rem; width: 100%; height: 100%; appearance: none;}
.goodCount label { display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; height: 4.2rem; border: 1px solid #acacac; border-radius: 2.1rem; cursor: pointer;}
.goodCount label::before { content: ''; display: block; width: 1.8rem; height: 2rem; margin: -.2rem .9rem 0 0; background: url(../images/common/ico_goodCount.png) no-repeat left top/cover;}
.goodCount input:checked + label { color: #20599b; border-color: #83b2e9;}
.goodCount input:checked + label::before { background-position-y: -3rem;}


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

.mypotal >.fontH3:first-child { 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: 0 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 .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 .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 a:hover { border-color: #20599b; background-color: #f0f7fa;}
.mypotal .informList li a:hover .informGroup .blet { color: #20599b;}
.mypotal .informList li a:hover .title { color: #20599b;}
.mypotal .informList li a:hover .informGroup .date { color: #20599b;}
.mypotal .informList li a:hover .icon { background-image: url(../images/common/ico_arrow_myInfo_blue.png);}
.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 */
.h3Between-select { display: flex; align-items: center;}
.h3Between-select select { height: 3.3rem; margin-left: 1rem; font-size: 1.5rem;}
.h3Between-select .selectBtn { display: flex; align-items: center; justify-content: center; height: 3.3rem; margin-left: .6rem; padding: 0 1.9rem; font-size: 1.5rem; border: 1px solid #bcbcbc; border-radius: .6rem; transition: color, border-color, background-color .2s ease-in-out;}
.h3Between-select .selectBtn span { display: block; margin-top: -.2rem;}
.h3Between-select .selectBtn:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;}

.reviewBody.seachControleBody{ justify-content: flex-end; }
/* 활용사례 & 사용 후기 사용 - End */

/* 디지털자원목록 테이블 - 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 */
.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 .author::after { content: " | "; margin: 0 6px; color: #ccc; }
.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;}

/* --------------------- 디지털융합플랫폼 소개 --------------------- */
.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;}
.contents.intro .area:first-child:before {display: none;}
.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;}
.intro .introGraph .usageComponentWrap {position: sticky; left: 0; margin-right: 2.0rem;}
.intro .introGraph .usageComponent {display: flex; justify-content: space-between; gap: 0.8rem; margin-bottom: 1.0rem;}
.intro .introGraph .usageComponent > div {width: 3.4rem; height: 3.4rem; border: 1px solid #e3e3e3; border-radius: 50%; }
.intro .introGraph .usageComponent .image-button-left {left: auto; background: #fff url(../images/common/ico_swiperjs_left.svg) no-repeat -3px -3px / 36px;}
.intro .introGraph .usageComponent .image-button-right {right: auto; background: #fff url(../images/common/ico_swiperjs_right.svg) no-repeat -2px -3px / 36px;}
.intro .introGraph .usageComponent .image-button-left:hover {background: #1B32C3 url(../images/common/ico_swiperjs_left.svg) no-repeat -3px -3.6rem / 36px; border-color: #1B32C3;}
.intro .introGraph .usageComponent .image-button-right:hover {background: #1B32C3 url(../images/common/ico_swiperjs_right.svg) no-repeat -2px -3.6rem / 36px; border-color: #1B32C3;}
.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; text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.6), 1px -1px 2px rgba(0, 0, 0, 0.6), -1px 1px 2px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.6);}
       .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;}

.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);}

/* 사용후기 답변 - End */
/* util class */
.w10per {width: 10% !important;}
.w20per {width: 20% !important;}
.w30per {width: 30% !important;}
.w40per {width: 40% !important;}
.w50per {width: 50% !important;}
.w60per {width: 60% !important;}
.w70per {width: 70% !important;}
.w80per {width: 80% !important;}
.w90per {width: 90% !important;}
.w100per {width: 100% !important;}

@media screen and (max-width:1600px){
  .header h1 {width: 30.2rem;}
  .header .logo1,
  .header .logo2 {top: 38px;}  
}

/* MCP 3rd / 외부 플랫폼 */
.boxListB { display: flex; flex-wrap: wrap; margin-top: 1.1rem; gap: 1.6rem;}
.boxListB .boxListDiv { position: relative; width: calc((100% - 3.2rem) / 3);}
.boxListB 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; height: 100%;}
.boxListB a:hover { border-color: #20599b; background-color: #f0f7fa;}
.boxListB a img { width: auto !important; max-height: 15rem;}
.boxListB mark { display: inline-block; padding: .1rem; background-color: #ffe793;}
.boxListB .blet { display: flex; align-items: center;}
.boxListB .blet span:first-child { font-size: 2rem; color: #20599b;}
.boxListB .blet span.data { color: #4786cf;}
.boxListB .blet span.service { color: #4e9d00;}
.boxListB .blet span.sw { color: #c20600;}
.boxListB .blet span.block { color: #0084a5;}
.boxListB .blet .round { display: flex; align-items: center; justify-content: center; height: 3rem; margin-left: 1.5rem; padding: 0 1.8rem; font-size: 1.4rem; color: #5e5e5e; border: 1px solid #868686; border-radius: 1.5rem;}
.boxListB .title { overflow:hidden; margin-top: 2.6rem; font-size: 2.2rem; font-weight: 700; text-overflow:ellipsis; white-space:nowrap;}
.boxListB .hBody .data { display: flex; align-items: center; margin-top: 2.5rem;}
.boxListB .hBody .data span:first-child { font-weight: 700; word-break: break-all;}
.boxListB .hBody .data span ~ span { position: relative; margin-left: 1.5rem; padding-left: 1.5rem;}
.boxListB .hBody .data span ~ span::after { content: ''; display: block; position: absolute; left: 0; top: 50%; width: 1px; height: 1.5rem; margin-top: -.6rem; background-color: #ddd;}
.boxListB .text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 5.1rem; margin-top: 2rem; font-weight: 400; color: #5e5e5e; line-height: 1.6;}
.boxListB .text + p { font-family: "Noto Sans KR" !important; font-size: 1.6rem !important; font-weight: 400 !important; color: #5e5e5e !important; line-height: 1.6 !important;}
.boxListB .pvGroup { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 5.2rem;}
.boxListB .pvGroup .price { display: none; align-items: baseline;}
.boxListB .pvGroup .price b { font-size: 2.6rem; font-weight: 700; color: #20599b; letter-spacing: -1px;}
.boxListB .pvGroup .price b.free { color: #13a508;}
.boxListB .pvGroup .price span { font-size: 2.2rem;}
.boxListB .pvGroup .vi { display: flex; align-items: center; font-size: 1.4rem;}
.boxListB .pvGroup .vi >span { display: block;}
.boxListB .pvGroup .vi >span ~ span { position: relative; margin-left: 1.3rem; padding-left: 1.3rem;}
.boxListB .pvGroup .vi >span ~ span::after { content: ''; display: block; position: absolute; left: 0; top: 50%; width: 1px; height: 1.5rem; margin-top: -.6rem; background-color: #ddd;}
.boxListB .pvGroup .vi >span .highlight { color: #20599b;}
.boxListB .com { display: flex; align-items: center; margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid #dedede;}
.boxListB .com.over {text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.boxListB .com span { display: block; font-size: 1.4rem; color: #767676;}
.boxListB .com span::before { content: '#';}
.boxListB .com span ~ span { margin-left: 2.7rem;}
.boxListB .icon_img {display: block; position: absolute; right: 2rem; top: 2rem; width: auto; height: 6.5rem;}
.boxListB .underline {padding-bottom: 2.5rem; margin-bottom: 2rem; border-bottom: 1px solid #dedede;}
.boxListB .com_d { display: flex; align-items: center; margin-bottom: 2rem; padding-top: 1.6rem; border-top: 1px solid #dedede;}
.boxListB .com_d span { display: block; font-size: 1.4rem; color: #767676;}
.boxListB .com_d span::before { content: '#';}
.boxListB .com_d span ~ span { margin-left: 2.7rem;}

.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 {max-height: 30rem; overflow-y: auto; }
/* tr hover 등 기존 효과 유지 */
.tableBody.scrollTbody .tbl-body tr:hover td {background-color: #f0f7fa;}