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

.onlyPC { display: block;}
.onlyTablet { display: none;}
.onlyMobile { display: none;}
.area { position: relative; width: 100%; max-width: 1320px; margin: 0 auto;}
body {overflow-x: hidden;}
body.noScroll { overflow: hidden;}
.pcHide {display: none;}

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


#wrap {height: 100%;}

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

/* 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) {display: block; width: calc(100% - 30px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.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 120px;  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;}


/* 공통 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;}
.mr10 { margin-right: 1rem !important;}
.mrAuto { margin-right: auto;}

/* 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;}
.flexColumn {display: flex;flex-direction: column; gap: .6rem;}

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

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

.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 { margin-top: 6rem; font-size: 2.4rem; font-weight: bold;}
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;}

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

.downloadBtn { display: flex; align-items: center; justify-content: center; height: 3.6rem; margin-right: .7rem; padding: 0 1.2rem; border: 1px solid #20599b; 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: #20599b;}
.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: 0 .5rem 3rem; color: #767676; line-height: 1.6;}
.acoList >li .accopanel * { font-family: "Noto Sans KR" !important; font-size:1.6rem !important; font-weight: 400 !important;}

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

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

/* 검색 조건 */
.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;}
.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],
.layerComm .termListLayer >li select { width: 100%;}
.layerComm .termListLayer .selectBtns { display: flex; align-items: center; margin-top: 1rem;}
.layerComm .termListLayer .selectBtns button { display: flex; align-items: center; justify-content: center; height: 3.5rem; padding: 0 3.3rem; font-size: 1.4rem; border: 1px solid #d8d8d8; border-radius: 5rem; transition: color, border-color, background-color .2s ease-in-out;}
.layerComm .termListLayer .selectBtns button:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;}
.layerComm .termListLayer .selectBtns button.active { color: #fff; border-color: #20599b; background-color: #20599b;}
.layerComm .termListLayer .selectBtns button ~ button { margin-left: .5rem;}
.layerComm .termListLayer .cfListLayer { display: flex; flex-wrap: wrap; margin: .3rem 0 0 -1.2rem;}
.layerComm .termListLayer .cfListLayer li { width: calc(33% - 1rem); margin: 1.2rem 0 0 1.2rem;}
.layerComm .termListLayer .cfListLayer li .checkboxBox label { font-size: 1.5rem;}
.layerComm .termListLayer .row .label {margin-bottom: 1.2rem;}
.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; 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(../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: 520px; }
      .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;}
    .searchBox .patternList li {margin-right: 10%;}
    .searchBox .patternList li a {display: flex; flex-direction: column; 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; margin-bottom: 16px; 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;}
    /* .searchBox .patternList li:first-of-type div {background: rgba(255,255,255,0.15) url(../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(../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(../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(../images/main/ico-intro-menu04.svg) no-repeat center center;} */
    .chatBox {position: absolute; z-index: 101; left:-500px;  opacity:0; width:346px; height:200px; top:70%; background-color:#27ABD4; border-radius:0px 15px 15px 15px; transition:all 1s 0.3s ease; padding: 32px 40px;}
      .chatLink:link {color: #fff; font-size: 24px; line-height: 32px; font-weight: 500; margin-bottom: 12px; display: inline-block; position: relative; letter-spacing: -0.06em; } 
      .chatLink:link::after {content: ""; display: block; width: 20px; height: 20px; background: url(../images/common/ico_aside_arrow_w.svg) no-repeat center center; position: absolute; right: -25px; bottom: 5px; transition: all 0.3s;}
      .chatLink:link:hover::after {transform: translateX(10px);}
    .chatBox .cicon {position: absolute; right:30px; top:-25px;}
    .chatBox .cText {font-size: 18px; line-height: 24px; color: rgba(255,255,255,0.8);}
    .chatQuickBox {position: fixed; left: -300px; top: 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; height: 150px; box-sizing: border-box;} */
      .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('../images/main/m5.jpg'); background-size: cover;}
    .maskBox .m2 {position: absolute; width: 100%; height:100%; opacity:0;  transition:opacity 1s ease; background: url('../images/main/m6.jpg'); background-size: cover;}
    .maskBox .m3 {position: absolute; width: 100%; height:100%; opacity:0;  transition:opacity 1s ease; background: url('../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);}
}

/* 마켓플레이스
**********************************************/

.market .marketSearch { padding: 3rem; background-color: #f0f7fa; border-radius: 1rem;}
.market .marketSearch.bg-none {background: transparent;}
.market .marketSearch .search { display: flex; align-items: center; position: relative; margin-top: 2rem; border: .2rem solid #5c8fcb; background-color: #fff; border-radius: 1rem;}
.market .marketSearch .search .normalInput { flex: 1; position: relative;}
.market .marketSearch .search .normalInput .searchScrollBody { display: none; position: relative;}
.market .marketSearch .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;}
.market .marketSearch .search .normalInput .searchScrollBody.active { display: block;}
.market .marketSearch .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;}
.market .marketSearch .search .normalInput .searchScroll ul li ~ li { border-top: 1px solid #ddd;}
.market .marketSearch .search .normalInput .searchScroll ul li button { display: block; width: 100%; padding: 1rem; text-align: left;}
.market .marketSearch .search input[type=text] { width: 100%; height: 4.6rem; padding-right: 8rem; border: none; border-radius: 0 1rem 1rem 0;}
.market .marketSearch .search .btnDone { display: block; position: absolute; right: 0; top: 0; padding: 1rem;}
.market .marketSearch .search .btnDone .icon { display: block; width: 2.8rem; height: 2.8rem; background: url(../images/common/ico_search_done.png) no-repeat center/cover;}
.market .marketSearch .search .selectD .choice { width: 10rem; height: 2.5rem; padding: 0 0 .2rem 2rem; color: #20599b; border: none; line-height: 1.7rem; border-right: 1px solid #939393; border-radius: 0;}
.market .marketSearch .search .selectD .choice::after { right: 1.2rem; top: 50%; width: 1.8rem; height: .8rem; margin-top: -.4rem; background: url(../images/common/ico_selectD_arrow_main.png) no-repeat center/cover;}

.market .marketSearch .keywordBody { display: flex; align-items: center; justify-content: space-between; margin-top: 2rem;}
.market .marketSearch .keywordBody .keywordLeft { display: flex; align-items: center; padding-left: .6rem;}
.market .marketSearch .keywordBody .label { display: block; width: 10rem; font-size: 1.5rem;}
.market .marketSearch .keyword { display: flex; align-items: center; justify-content: center; margin-top: -.2rem;}
.market .marketSearch .keyword button { font-size: 1.4rem; color: #656565; white-space: nowrap;}
.market .marketSearch .keyword button ~ button { margin-left: 2.3rem;}
.market .marketSearch .keyword button::before { content: '#';}
.market .marketSearch .iconSet {  display: flex; align-items: center; justify-content: center; gap: .4rem;}
.market .marketSearch .iconSet .icon { display: block; width: 1.7rem; height: 1.7rem; background: url(../images/common/ico_iconSet.png) no-repeat center/cover;}
.market .marketSearch .iconSet span { display: block; margin: -.2rem 0 0 .5rem; font-size: 1.5rem;}

.market .marketSearch .selectGroup { display: flex; align-items: baseline; padding-left: .6rem;}
.market .marketSearch .selectGroup .label { display: block; width: 5rem; font-size: 1.6rem;}
.market .marketSearch .selectGroup .select { display: flex; flex-wrap: wrap; flex: 1; margin: -.7rem 0 0 -.7rem;}
.market .marketSearch .selectGroup button { display: flex; align-items: center; justify-content: center; height: 3.5rem; margin: .7rem 0 0 .7rem; padding: 0 2.5rem .2rem; font-size: 1.4rem; border: 1px solid #d8d8d8; background-color: #fff; border-radius: 1.8rem; transition: color, border-color, background-color .2s ease-in-out;}
.market .marketSearch .selectGroup button:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;}
.market .marketSearch .selectGroup button.active { color: #fff; border-color: #20599b; background-color: #20599b;}
.market .marketSearch .typeBody { margin-top: 2.5rem;}
.market .marketSearch .selectGroup { margin-top: 1.7rem;}

.market .marketSearch .selectD { position: relative;}
.market .marketSearch .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;}
.market .marketSearch .selectD .choice::after { content: ''; display: block; position: absolute; right: 1.2rem; top: 50%; width: 1.1rem; height: .6rem; margin-top: -.3rem; background: url(../images/main/ico_selectD_arrow.png) no-repeat center/cover;}
.market .marketSearch .selectD .choice.rotate::after { transform: rotate(-180deg); }
.market .marketSearch .selectD .list { display: none; position: absolute; left: 0; top: 5rem; z-index: 10; width: 100%; padding: .7rem 0; border: 1px solid #20599b; background-color: #fff; border-radius: .4rem;}
.market .marketSearch .selectD .list li button { display: block; width: 100%; padding: .7rem 1.3rem; text-align: left;}
.market .marketSearch .selectD .list li button.active { color: #20599b;}
.market .marketSearch .selectD .list.show { display: block;}

.market .tabMarket { display: flex; height: 6.1rem; margin-top: 4rem; border-bottom: 1px solid #20599b;}
.market .tabMarket button { display: flex; align-items: center; flex-direction: column; width: 16rem; height: 6rem; padding-top: 1.3rem; border: 1px solid #d0d0d0; border-bottom: none; background-color: #f5f5f5; border-radius: .8rem .8rem 0 0 ;}
.market .tabMarket button ~ button { margin-left: .3rem;}
.market .tabMarket button .text { display: block; font-weight: 700;}
.market .tabMarket button .num { display: block; margin-top: .7rem; font-size: 1.4rem;}
.market .tabMarket button.active { position: relative; z-index: 1; height: 6.1rem; border-color: #20599b; background-color: #fff;}
.market .tabMarket button.active .text { color: #20599b;}
.market .tabMarket button.active .num { color: #20599b;}

.market .viewCode >.inline { display: flex; align-items: center; justify-content: flex-end; margin-top: 1.4rem;}
.market .viewCode >.inline .btn { display: flex; align-items: center; justify-content: center; height: 3.3rem; margin-left: .6rem; padding: 0 1.7rem; font-size: 1.4rem; border: 1px solid #bcbcbc; border-radius: .6rem;}
.market .viewCode >.inline .btn span { margin-top: -.1rem;}
.market .viewCode >.inline >.btn { margin-left: 1.4rem; }
.market .viewCode >.inline .btn .icon { display: block; width: 1.7rem; height: 1.7rem; margin-left: .8rem; background: url(../images/common/ico_search_detail.png) no-repeat center/cover;}
.market .viewCode >.inline select { height: 3.3rem; font-size: 1.4rem;}
.market .viewCode >.inline select ~ select { margin-left: 1.4rem;}

.market .viewCode .keywordBg { min-height: 6.1rem; margin-top: 1.5rem; padding: 1.3rem 2rem; background-color: #f0f7fa; border-radius: 5rem;}
.market .viewCode .keywordBg:not(:has(.keyBox)) { display: none;}
.market .viewCode .keywordChoice { display: flex; align-items: center; flex-wrap: wrap; margin: -.9rem 0 0 -.9rem;}
.market .viewCode .keywordChoice .keyBox { display: flex; align-items: center; justify-content: center; height: 3.5rem; margin: .9rem 0 0 .9rem; padding: 0 .3rem 0 2rem; border: 1px solid #83b2e9; background-color: #fff; border-radius: 3rem;}
.market .viewCode .keywordChoice .text { margin-top: -.1rem; font-size: 1.4rem; font-weight: 700; color: #20599b;}
.market .viewCode .keywordChoice .keyBox button { margin-left: 1rem; padding: 1rem;}
.market .viewCode .keywordChoice .keyBox button .icon { display: block; width: 1rem; height: 1rem; background: url(../images/common/ico_keyBox.png) no-repeat center/cover;}

.boxList { display: flex; flex-wrap: wrap; margin-top: 1.1rem;}
.boxList .boxListDiv { position: relative; width: calc(50% - .75rem);}
.boxList a { display: block; position: relative; padding: 2.4rem; border: 1px solid #e3e3e3; background-color: #fff; border-radius: 1rem; transition: border-color, background-color .2s ease-in-out;}
.boxList a:hover { border-color: #20599b; background-color: #f0f7fa;}
.boxList a img { width: auto !important; max-height: 15rem;}
.boxList mark { display: inline-block; padding: .1rem; background-color: #ffe793;}
.boxList .blet { display: flex; align-items: center;}
.boxList .blet span:first-child { font-size: 2rem; color: #20599b;}
.boxList .blet span.data { color: #4786cf;}
.boxList .blet span.service { color: #4e9d00;}
.boxList .blet span.sw { color: #c20600;}
.boxList .blet span.block { color: #0084a5;}
.boxList .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;}
.boxList .title { overflow:hidden; margin-top: 2.6rem; font-size: 2.2rem; font-weight: 700; text-overflow:ellipsis; white-space:nowrap;}
.boxList .hBody .data { display: flex; align-items: center; margin-top: 2.5rem;}
.boxList .hBody .data span:first-child { font-weight: 700;}
.boxList .hBody .data span ~ span { position: relative; margin-left: 1.5rem; padding-left: 1.5rem;}
.boxList .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;}
.boxList .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;}
.boxList .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;}
.boxList .pvGroup { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 5.2rem;}
.boxList .pvGroup .price { display: none; align-items: baseline;}
.boxList .pvGroup .price b { font-size: 2.6rem; font-weight: 700; color: #20599b; letter-spacing: -1px;}
.boxList .pvGroup .price b.free { color: #13a508;}
.boxList .pvGroup .price span { font-size: 2.2rem;}
.boxList .pvGroup .vi { display: flex; align-items: center; font-size: 1.4rem;}
.boxList .pvGroup .vi >span { display: block;}
.boxList .pvGroup .vi >span ~ span { position: relative; margin-left: 1.3rem; padding-left: 1.3rem;}
.boxList .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;}
.boxList .pvGroup .vi >span .highlight { color: #20599b;}
.boxList .com { display: flex; align-items: center; margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid #dedede;}
.boxList .com span { display: block; font-size: 1.4rem; color: #767676;}
.boxList .com span::before { content: '#';}
.boxList .com span ~ span { margin-left: 2.7rem;}

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

.dataReview { margin-top: 1.5rem;}
.dataReview .dataTxt { font-size: 1.8rem; line-height: 1.4;}
.dataReview select { flex: 1;}
.dataReview .btn { display: flex; align-items: center; justify-content: center; height: 4rem; margin-left: .7rem; padding: 0 2.6rem; color: #fff; background-color: #20599b; border-radius: .6rem; transition: background-color .2s ease-in-out;}
.dataReview .btn:hover { background-color: #366cc3;}
.reviewText { padding: 2rem .4rem 3rem; font-weight: 400; color: #6f6f6f; line-height: 1.4; border-bottom: 1px solid #d4d4d4;}
.reviewTextEtc { font-weight: 400; color: #6f6f6f; word-break: break-all; line-height: 1.4}
.dataReview-line { padding-top: 2rem; border-top: 1px solid #000;}
.linkBtn { display: inline-flex; align-items: center; justify-content: center;}
.linkBtn span { padding-bottom: .5rem; border-bottom: 1px solid #959595;}
.linkBtn .icon { display: block; width: 2.1rem; height: 2.1rem; margin-left: 1.2rem; background: url(../images/common/ico_linkBtn.png) no-repeat center/cover;}
.linkBtn:hover { color: #20599b;}
.linkBtn-mt { margin-top: 4rem;}

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

.market .viewBody { margin-top: 1.4rem; padding-top: 2.5rem; border-top: 1px solid #000;}
.market .viewBody .boxList { display: block;}
.market .viewBody .boxList .boxListDiv { width: 100%;}
.market .viewBody .boxList .boxListDiv .hBody p { font-family: "Noto Sans KR" !important; font-size: 1.4rem !important;}
.market .viewBody .boxList .title { overflow: initial; font-size: 2rem; font-weight: 600; text-overflow: initial; white-space: inherit; line-height: 1.4;}
.market .viewBody .boxList .text { overflow: initial; height: initial; -webkit-line-clamp: initial; word-break: break-all;}
.market .viewBody .boxList .pvGroup { display: block; margin-top: 5rem;}
.market .viewBody .boxList .com { padding-top: 0; border: none;}
.market .viewBody .boxList .com span ~ span { margin-left: 2rem;}
.market .viewBody .boxList .favorite { right: 4.7rem; top: -2rem;}
.market .viewBody .boxList .favorite .icon { width: 3.5rem; height: 4rem; background-image: url(../images/common/ico_favorite@3x.png); background-size: 3.5rem 15.7rem;}
.market .viewBody .boxList .favorite.active .icon { background-position-y: -10.2rem}
.market .viewBody .boxList .snsBtn { display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: -2rem; width: 4rem; height: 4rem; border: 1px solid #e3e3e3; border-radius: 50%; transition: border-color, background-color .2s ease-in-out;}
.market .viewBody .boxList .snsBtn:hover { border-color: #9dd2f2; background-color: #d0e9f8;}
.market .viewBody .boxList .snsBtn .icon { display: block; width: 2rem; height: 2rem; background: url(../images/common/ico_sns.png) no-repeat center/cover;}
.market .viewBody .boxList .snsBtn:hover .icon { background-image: url(../images/common/ico_sns_blue.png);}


/* .market .fileList .boxList .boxListDiv { width: 100%; padding: 3rem; border: 1px solid #e3e3e3; border-radius: 1rem;} */
.market .fileList .boxList .hBody { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem;}
.market .fileList .boxList .pvGroup { align-items: center; margin-top: 0;}
.market .fileList .boxList .pvGroup .price { margin-left: 4.5rem;}
.market .fileList .boxList .title { overflow: initial; font-size: 1.8rem; font-weight: 600; text-overflow: initial; white-space: inherit; line-height: 1.4;}
.market .fileList .boxList .hBody .data { margin-top: 0;}
.market .fileList .boxList .hBody .data span:first-child { font-weight: 600;}
.market .fileList >div >p { font-family: "Noto Sans KR" !important; word-break: break-word;}
.market .fileList.inline { display: block;}
.market .fileList.inline .boxListDiv { width: 100%;}
.market .fileList.inline .boxListDiv ~ .boxListDiv { margin-top: .9rem;}
.market .fileList.inline .boxListDiv a {height: 100%;}
.market .fileList .boxList.row-3 {gap: 1.6rem; flex-wrap: wrap;}
.market .fileList .boxList.row-3 .boxListDiv {width: calc( (100% - 3.2rem) / 3)!important; }
.market .fileList .boxList.row-3 .boxListDiv ~ .boxListDiv {margin-top: 0;}

.market .controlBtns { display: flex; align-items: center; justify-content: center; margin-top: 2.5rem; padding-top: 2.5rem; text-align: center; border-top: 1px solid #dedede;}
.market .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: color, border-color, background-color .2s ease-in-out;}
.market .controlBtns .btn:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;}
.market .controlBtns .btn ~.btn { margin-left: .9rem;}
.market .controlBtns .btn.blackStyle { color: #000; border-color: #818181; background-color: #fff;}
.market .controlBtns .btn.blackStyle:hover { color: #20599b; border-color: #9dd2f2; background-color: #d0e9f8;}
.market .controlBtns .btn.orangeStyle { color: #fff; background-color: #20599b;}
.market .controlBtns .btn.orangeStyle:hover { background-color: #366cc3;}

.market .operBox { margin-top: 3rem; padding: 3rem; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; background-color: #f4f4f4;}
.market .operList { display: flex; flex-wrap: wrap; margin-top: .5rem;}
.market .operList li { display: flex; align-items: center; width: 50%; margin-top: 2rem;}
.market .operList li .lable { display: block;}
.market .operList li .text { display: block; margin-left: 1.7rem; padding-left: 1.7rem; font-weight: 400; border-left: 1px solid #d6d6d6;}

.market .tabRound { display: flex; align-items: center; justify-content: center; margin: 3.5rem auto 2.8rem;}
.market .tabRound li { background-color: #ececec; flex: 1;}
.market .tabRound li .btn { background: transparent; border: 0; display: flex; align-items: center; justify-content: center; width: 100%; position: relative; z-index: 1; height: 5.2rem; margin: 0; padding: 0 3.5rem; border-radius: 2.5rem; cursor: pointer; font-size: 2rem; font-weight: 500; color: #666;}
.market .tabRound li .btn.active { color: #fff; font-weight: 700; background-color: #1B32C3;}
.market .tabRound li:first-child { border-radius: 2.5rem 0 0 2.5rem;}
.market .tabRound li:last-child { border-radius: 0 2.5rem 2.5rem 0;}

.market .fileDataGroup { display: flex; align-items: center; margin-top: 2rem;}
.market .fileDataGroup >div { display: flex; align-items: center; justify-content: center; flex-direction: column; flex: 1; height: 13rem; border-radius: .8rem;}
.market .fileDataGroup >div ~ div { margin-left: 1.5rem;}
.market .fileDataGroup >div >span { margin-top: 1.5rem; font-size: 1.5rem;}
.market .fileDataGroup .title { font-size: 2rem;}
.market .fileDataGroup .btn { display: flex; align-items: center; justify-content: center; margin-top: 1.3rem; height: 3.6rem; padding: 0 1.2rem; color: #20599b; border: 1px solid #3785dc; border-radius: .6rem; transition: background-color .2s ease-in-out;}
.market .fileDataGroup .btn .icon { display: block; width: 1.5rem; height: 1.5rem; margin-right: 1rem; background: url(../images/common/ico_fileDataGroup.png) no-repeat center/cover;}
.market .fileDataGroup .btn span { display: block; margin-top: -.2rem;}
.market .fileDataGroup .btn:hover { background-color: #d0e9f8;}
.market .fileDataGroup .bgRed { background-color: #fff5ef;}
.market .fileDataGroup .bgGreen { background-color: #f7f6e6;}
.market .fileDataGroup .bgBlue { background-color: #eff6ff;}

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




/** 사용자 포털에서 복사해옴 */
.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;}

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

/* util */
.mt0 {margin-top: 1.2rem;}
.mt36 {margin-top: 3.6rem;}


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

.subTop--bg {position: relative; overflow: hidden; padding-bottom: 7rem; margin-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;}