@charset "utf-8";

html {background-color: #fff; font-size:16px;}
html.ready {background-color: #2a2a2d;}
body {min-width:1080px; min-height:100%; color:#666; background-color: #fff; line-height:1.6; letter-spacing:-0.03em; /*word-break:break-all; word-wrap:break-word;*/}
body.isChrome:not(.tabFocus) * {outline:none !important;}

/* skipNavi */
#skipNavi a {display:block; position:fixed; top:0; left:0; width:100%; height:0; background-color:#2b64ce; color:#fff; font-size:14px; font-weight:bold; line-height:1; text-align:center; overflow:hidden; z-index:9999;}
#skipNavi a:focus,
#skipNavi a:active {height:auto; margin-top:0; padding:10px 0px;}

/*================================================ Layout ================================================*/
body.windowPop {background: #fff}
html:not(.popFullScroll) body.hasScroll .header.sticky .gradient {overflow: hidden;}
.wrapper {position: relative; width:100%; background: #fff; overflow: hidden;}

body:not(.hScroll) {left: 0 !important; margin-right: 0 !important;}
body.hScroll {position:relative; min-width: 1224px;}
body.hScroll.fit {min-width: 1142px}
body.hScroll.fit #content section,
body.hScroll.fit .crumbWrap,
body.hScroll.fit .header [class*=Wrap] {width:1080px; margin-left:0;}
body.hScroll.fit .header.sticky .gnbArea {width: 1142px;}

body.hScroll.fit .footer .topWrap,
body.hScroll.fit .footer .appGroup,
body.hScroll.fit .footer .bottomWrap {margin-left: 0;}

body.hScroll.fit #content .pageTit,
body.hScroll.fit #content .pageTab,
body.hScroll.fit #content .progress,
body.hScroll.fit #content .srchBox,
body.hScroll.fit #content section {margin-left: 0;}

#content section.full {width:100%;}
#content section.onlyBtn {margin-top: -20px; margin-bottom: 70px;}

body.printMode .wrapper {display: none !important;}
body.srchOpen .d1.dimmed {display: block !important;}


/*================================================ Content ================================================*/
#content {padding-bottom:150px;}
#content .pageTit,
#content .pageTab,
#content .progress,
#content .srchBox,
#content section {position:relative; width:1080px; margin:0 auto;}
#content .tabPanel section {width:100%;}
#content .pageTab {margin-bottom:40px;}
#content .progress {margin-bottom:30px;}
#content section {margin-bottom:50px;}

.full {width:100% !important;}
.pageTit.full {background-color:#e2fdfe;}

/*================================================ Header & GNB ================================================*/
/* header 기본속성 */
.header {position:relative; min-width:1080px; background-color: #fff; z-index: 900; opacity: 0;}
.header.onLoad {opacity: 1;}  
.header [class*=Wrap], 
.crumbWrap,
.sitemapContain [class*=Wrap] {width:1080px; margin:0 auto; box-sizing: border-box;}
.header [class*=Wrap]:after, 
.header [class*=Wrap]:before {content: ''; display: table}
.header [class*=Wrap]:after {clear: both;}
.header .left {float: left;}
.header .right {float: right;}
.header .left li, 
.header .right li {float: left;}
.header:not(.onLoad) .subArea {display: none;}
.header a {display: block; line-height: 1em; transition: color 0.15s ease-out}
.header a.fc:focus {border-radius:10px;  padding:4px;  outline-offset: -1px;} 
.d1.dimmed {display:none; position: fixed; top:0; left:0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 500;}

/* header topArea */
.header .topArea {position :relative; height:78px; padding:24px 0 20px 0; background-color:#fff; z-index: 4; transition: height 0.25s ease-out;}
.header .topWrap .gate {float: left;}
.header .topWrap li {float: left; color:#888;}
.header .logo {float: left; margin-right: 5px; overflow: hidden;}
.header .gate li {position: relative;}
.header .gate li:before {content:''; position:absolute; left:0px; top:8px; bottom:6px; width:2px; height:100%px; background-color:#d9d9d9;}
.header .gate li:first-child:before {content: none;}
.header .gate li.on {color:#222;}
.header .gate li a {padding:6px 16px 7px 15px; font-size: 20px; font-weight: 700;}

.header li.special {margin-top: 4px; border-radius: 19px; color: #61ffec; background-color: #000; font-size: 13px;}
.header li.special > * {font-size: 13px !important;}
.header li.special:before {content: none;}

.header .topArea li a:hover, 
.header .topArea li a:focus {color:#2b64ce;}
.header .util {float: right;}
.header .util li a {position: relative; padding: 8px 10px 10px 10px; font-size: 13px; color:#666;}
.header .util li a:before {content: ''; display:block; position:absolute; top: 12px; bottom: 9px; right: 0; width: 1px; background-color:#d9d9d9}
.header .util li:last-child a:before {content: none;}
.header .util .reflashLog {margin-right:10px; line-height: 1;}
.header .util .reflashLog img {width: 28px; height: 28px; vertical-align: top;}
.header .util .reflashLog .user {display: inline-block; margin-right:10px; vertical-align: middle;}
.header .util .reflashLog .user em {display: inline-block; max-width:115px; margin-left:5px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; color:#222; font-size: 14px; line-height: 28px;}
.header .util .reflashLog .time {display:inline-block; padding-left:18px;background:url(../img/pc/common/ico_gnb.png) no-repeat 0 -470px; font-size: 14px; color:#222; line-height: 30px; font-weight: 700;}
.header .util .reflashLog a {display: inline-block; height:32px; margin-left:7px; border:1px solid #c8c8c8; padding:0px 10px; border-radius: 3px; color:#333; font-size: 14px; line-height: 28px; font-weight: 700; transition: all 0.15s;}
.header .util .reflashLog a:hover,
.header .util .reflashLog a:focus {border-color: #2b64ce}
.header .util .reflashLog a:before {content: none;}

/* 1차메뉴 */
.gnbArea {position:relative; padding: 0; background-color:#fff; box-shadow: 0 4px 8px rgba(0,0,0,0.1); z-index: 3;}
.gnb .menu {float:left; width: 850px; display: flex; display: -ms-flexbox; display: -webkit-box; flex-grow: 1; -ms-flex: 1; -webkit-box-flex:1; justify-content: space-between; -ms-flex-pack:justify; -webkit-box-pack:justify; padding-left:0px; box-sizing: border-box; transition: padding 0.2s ease-out;}
.gnb .menu > li > a {position:relative; display:block; width:auto; height: 58px; padding:0; color:#222; font-size:18px; font-weight:700; line-height:58px; text-align:center; box-sizing: border-box; overflow:hidden; transition: all 0.2s ease-out;}
.gnb .menu > li:first-child > a {padding-left: 0 !important;}
.gnb .menu > li:last-child > a {padding-right: 0 !important;}
.gnb .menu li.on > a, 
.gnb .menu li > a:hover, 
.gnb .menu li > a:focus, 
.gnb .subWrap li > a:hover, 
.gnb .subWrap li > a:focus {color:#2b64ce;}
.gnb .cateTit {position:absolute; top:18px;}
.gnbArea .d1bar {position: absolute; transition: left 0.25s ease-out, width 0.2s ease-in-out; pointer-events: none;}
.gnbArea .d1bar:before {content:''; position: absolute;  left:auto; right: auto; bottom: 0px; margin-left: -50%; width:100%; border-bottom: 6px solid #22e3a6;}
.gnbArea .right {position: relative; top:0; transition: top 0.25s ease-out;}
.gnb .menu li.hiddenMenu {width: 0px; height:0px; visibility: hidden;}
body:not(.sitemapOpen) .gnb .menu li.hiddenMenu {display: none;}

.oldIE .gnb .menu {float: left; display: block; width: 900px;}
.oldIE .gnb .menu > li {float: left;}
.oldIE .gnb .menu > li > a {padding-left: 27px; padding-right: 27px;}
.oldIE .sticky .gnb .menu > li > a {padding-left: 21px; padding-right: 21px;}

/* 2차메뉴 */
.gnb .subArea {position: absolute; top:58px; left:0px; right:0px; padding-bottom:40px; border-top:1px solid #e0e0e0; background: #fafafa; z-index: 3}
.gnb .subWrap {position:relative; min-height: 340px; padding-left: 177px; overflow: hidden;}
.gnb .leftBanner {position: absolute; top:40px; left:0; bottom:0; min-width: 190px; }
.gnb .leftBanner .banner {position: absolute; bottom: 0;}
.gnb .leftBanner .tit {display:block; font-size: 32px; color:#222; line-height: 1;}
.gnb .leftBanner .showAll {display:inline-block; padding-right:14px; margin-top:10px; background:url(../img/pc/common/ico_gnb.png) no-repeat right -177px; font-size: 16px; color:#333;}
.gnb .banner > span {display: block; margin-top:10px; font-size: 16px; color:#333; line-height: 1.2em;}
.gnb .banner .link {display:inline-block; padding-right:14px; margin-top:15px; background:url(../img/pc/common/ico_gnb.png) no-repeat right -238px; font-size: 14px; color:#2b64ce;}
.gnb .depth2 {margin-top:-2px; font-size: 0;}
.gnb .depth2 > li {display: inline-block; position:relative; width: 179px; margin-top:40px; padding: 0 5px 0 15px; box-sizing: border-box; font-size: 16px; vertical-align: top;}
.gnb .depth2 > li:before {content: ''; position:absolute; left:-1px; top:2px; width:1px; height: 1000px; background-color: #f1f1f1;}
.gnb .depth2 > li > a {color:#222; font-weight:700; font-size: 15px; line-height: 1.25em;}

/* 3차메뉴 */
.gnb .depth3 {margin: 8px -10px 0;}
.gnb .depth3 li {position: relative; overflow: hidden;}
.gnb .depth3 a {float:left; display: inline-block; position:relative; padding: 3px 10px; font-size: 13px; color:#333; line-height: 1.25em; word-break: break-all;}
.gnb .depth3 a > span {position: relative; z-index: 2}
.gnb .depth3 a:before,
.gnb .depth3 a span:after {content: ''; position: absolute; width:0; top: 15px; left:5px; right:100%; border-bottom: 4px solid #7bf4d1; transition: all 0.25s ease-out; z-index: 1}
.gnb .depth3 a span:after {top:26px; left:-5px; bottom:auto; border-color: rgba(0,255,188,0.5); transition: all 0.2s ease-out; }
.gnb .depth3 a:hover:before,
.gnb .depth3 a:focus:before {width: auto; left:10px; right:10px;}
.gnb .depth3 a:hover span:after,
.gnb .depth3 a:focus span:after {width: 100%; left:0px; right:auto;}

/* 비활성화 */
.subWrap li.disabled > a {color:#bbb !important;}
.subWrap li.disabled > a:hover, 
.subWrap li.disabled > a:focus, 
.subWrap li.disabled > a:hover, 
.subWrap li.disabled > a:focus {color:#bbb !important; cursor: default;}
.subWrap li.disabled a:before,
.subWrap li.disabled a span:after {content: none !important}

/* GNB Icon Button */
.gnb .right > li {float: left;}
.header .gnbArea [class^=gnb_] {float:left; position:relative; width:64px; height: 58px;}
.header .gnbArea [class^=gnb_] button:hover, 
.header .gnbArea [class^=gnb_] button:focus {color:#2b64ce; background-position: 0 -34px;}
.header .gnbArea [class^=gnb_] button:focus {outline-color: #ddd; outline-style: dotted;  outline-width: 1px;}
.header .gnbArea .gnb_search {background-color: #e5e5e5; transition: background-color 0.2s;}
.header .gnbArea .gnb_search > span:after,
.header .gnbArea .gnb_search > span:before {content: ''; position: absolute; top:17px; left:17px; width:22px; height: 22px; border-radius: 50%; border:2px solid #000; box-sizing: border-box;  transition: all 0.25s; }
.header .gnbArea .gnb_search > span:after {top: 36px; left: 34px; width: 2px; height: 10px; border-radius: 0; border:none; background-color: #000; transform-origin: 0 0; transform: rotate(-45deg); -ms-transform-origin: 0 0; -ms-transform: rotate(-45deg);}
.header .gnbArea .gnb_search:focus,
.header .gnbArea .gnb_search:hover {background-color: #ccd2d5;}
.header .gnbArea .gnb_search:focus > span:after,
.header .gnbArea .gnb_search:hover > span:after {top:37px; left:34px; width:3px; height: 12px; /*background-color: #fff;*/}
.header .gnbArea .gnb_search:focus > span:before,
.header .gnbArea .gnb_search:hover > span:before {transform:scale(1.15); -ms-transform:scale(1.15); /*border-color: #fff*/}
.header .gnb_search:before,
.header .gnb_search:after {content:''; position:absolute; top:30px; left:32px; width:2px; height: 0px; border-radius: 2px; background-color:#fefefe; transition: all 0.45s; transition-timing-function: inherit; transform: rotate(0); -ms-transform: rotate(0);}
.header .gnb_search:before {transform: rotate(45deg); -ms-transform: rotate(45deg);}

.srchOpen .header .gnb_search {background: #5e6b74 !important;}
.srchOpen .header .gnb_search:after {top:16px; height:28px; transform: rotate(-135deg); -ms-transform: rotate(-135deg);}
.srchOpen .header .gnb_search:before {top:16px; height:28px; transform: rotate(-225deg); -ms-transform: rotate(-225deg);}
.srchOpen .header .gnbArea .gnb_search > span:before {transform:scale(0); -ms-transform:scale(0)}
.srchOpen .header .gnbArea .gnb_search > span:after {height: 0; width: 0;}
.searchFocus {display: none;}
.srchOpen .searchFocus {display: block;}

.header .gnbArea .gnb_sitemap {background-color: #000; transition: background-color 0.5s;}
.header .gnbArea .gnb_sitemap:before,
.header .gnbArea .gnb_sitemap:after,
.header .gnbArea .gnb_sitemap > span:after {content: ''; display:block; position:absolute; top: 21px; left:22px; right:22px; height: 2px; background-color: #fff; transition: all 0.45s; transition-timing-function: inherit; transform:rotate(0deg); -ms-transform:rotate(0deg);}
.header .gnbArea .gnb_sitemap:after {top:auto; bottom: 21px;}
.header .gnbArea .gnb_sitemap > span:after {top: 50%; margin-top:-1px;}
.header .gnbArea .gnb_sitemap:hover,
.header .gnbArea .gnb_sitemap:focus {background-color: #333;}
.header .gnbArea .gnb_sitemap:hover:after,
.header .gnbArea .gnb_sitemap:hover:before,
.header .gnbArea .gnb_sitemap:focus:after,
.header .gnbArea .gnb_sitemap:focus:before {left:20px; right:20px;}
.header .gnbArea .gnb_sitemap:hover > span:after,
.header .gnbArea .gnb_sitemap:focus > span:after {left:24px; right:24px;}

.sitemapOpen .header .gnbArea .gnb_sitemap {position: relative; z-index: 1100; background-color: #000}
.sitemapOpen .header .gnbArea .gnb_sitemap > span:after {left:50%; right:50%;}
.sitemapOpen .header .gnbArea .gnb_sitemap:after {top:50%; left:15px; right:15px; transform:rotate(-135deg); -ms-transform:rotate(-135deg);}
.sitemapOpen .header .gnbArea .gnb_sitemap:before {top:50%; left:15px; right:15px; transform:rotate(-225deg); -ms-transform:rotate(-225deg);}
.sitemapOpen .gnb .menu li.hiddenMenu {width:auto; height:auto; visibility: visible;}
.oldIE .sitemapOpen .gnbArea .menu > li {display: inline-block;}

/* Crumb Area */
.crumbArea {position:relative; background-color: #e2f3fc; z-index: 20;}
.crumbArea a:hover,
.crumbArea a:focus {color:#2b64ce}
.crumb .home a {padding: 0 9px 0 19px; background: url(../img/pc/common/ico_gnb.png) no-repeat 0 -285px;}
.crumb .home:before, 
.crumb .home a:before,
.crumb .home a:after {content: none;}
.crumb > li {float: left; position:relative; color:#222; font-size: 13px;}
.crumb > li:before {content: ''; position: absolute; top: 0; left: 0; width:5px; height: 44px; background: url(../img/pc/common/ico_gnb.png) no-repeat 0 -343px;}
.crumb > li > a {position:relative; display: block; height:44px; padding:0 30px 0 15px; line-height: 44px; color:#222; z-index: 1; transition: color 0.15s linear}
.crumb > li > a:before {content: ''; position: absolute; right: 8px; top:14px; width: 14px; height: 12px; border:1px solid #c8c8c8; border-radius: 2px; background-color: #fff;}
.crumb > li > a:after {content: ''; position: absolute; top:19px; right:13px; width:6px; height: 4px; background: url(../img/pc/common/ico_gnb.png) no-repeat 0 -420px; transition: transform 0.15s ease-in-out;}
.crumb > li > a .blind[class *=o],
.crumb > li.on > a .blind.off {display: none;}
.crumb > li > a .blind.off, 
.crumb > li.on > a .blind.on {display: block;}
.crumb > li.on {z-index: 2;}
.crumb > li.on > a:after {transform:rotate(180deg); -ms-transform:rotate(180deg);} 
.crumbArea .dropMenu {display: none; position:absolute; top:40px; left:17px; padding:10px 0px; border:1px solid #333; background: #fff; box-sizing: border-box; min-width: 100px; box-shadow: 0 4px 8px rgba(0,0,0,0.1)}
.crumbArea .dropMenu li {float: none}
.crumbArea .dropMenu a {display:block; position:relative; padding:3px 15px; white-space: nowrap;}
.crumbArea .dropMenu li a span {position: relative;}
.crumbArea .dropMenu li a span:after {content: ''; position: absolute; bottom: -2px; left:0; width:0; height: 1px; background-color: #2b64ce; transition: width 0.15s ease-out;}
.crumbArea .dropMenu a:hover span, .crumbArea .dropMenu a:focus span, .crumbArea .dropMenu li.on a span {color:#2b64ce;}
.crumbArea .dropMenu li.on a span:after {width:100%;}

/* header sticky */
.header.sticky {position: fixed; left:0; right: 0; top:-78px;}
.sitemapOpen .header {position:fixed; top:0 !important; left:0; right:0;}
.header.sticky .gnb .menu {padding-left: 153px;}
/*.header.sticky .gnb .menu > li > a {padding: 0;}*/

/*.header.sticky:not(.searchOpen) .crumb > li > a, .header.sticky:not(.searchOpen) .crumb > li > span {color:#fff}
.header.sticky:not(.searchOpen) .crumb > li > a:after {background-position: 0 bottom;}
.header.sticky:not(.searchOpen) .crumb > li:before {background-position: 0 -55px;}
.header.sticky:not(.searchOpen) .crumbArea {border-bottom: none}
.header.sticky:not(.searchOpen) .crumbArea [class^=gnbBtn] > a, .header.sticky:not(.searchOpen) .crumbArea [class^=gnbBtn] > strong {color:#fff}
.header.sticky:not(.searchOpen) .crumbArea [class^=gnbBtn] > a, .header.sticky:not(.searchOpen) .crumbArea [class^=gnbBtn] > strong {background-position: 0 bottom;}
.header.sticky:not(.searchOpen) .gradient.gradientOn:before, .header.sticky:not(.searchOpen) .gradient.gradientOn:after {top: 0}
.header.sticky:not(.searchOpen) [class^=gnbBtn] span:after {border-color: #fff}*/

/*.header.sticky:not(.notThin) .gnb .menu > li > a {padding-right: 11px; padding-left: 10px;}*/
/*.header.sticky.hasCrumb:not(.init) .d1bar {opacity: 0}*/

/*================================================ 검색 ================================================*/
.header .srchContain {display:none; position: absolute; left: 0; right: 0; background-color: #fff; z-index: 1000;}
.header .searchArea {padding:40px 0; background-color: #5e6b74;}
.header .srchBar {width: auto; height: auto; margin-bottom:20px; border: none;}
.header .srchBar .ipt {width: 100%; height: 60px; padding: 0 110px 0 26px; line-height: 60px; font-size: 20px; color:#333;}
.header .srchBar .ipt::-moz-placeholder {font-size: 20px; color:#909090}
.header .srchBar .ipt:-ms-input-placeholder {font-size: 20px; color:#909090}
.header .srchBar .ipt::-webkit-input-placeholder {font-size: 20px; color:#909090}
.header .srchBar .btnIco_srch {top:0; right:0; width: 60px; height: 60px; background: url(../img/pc/common/btn_srch.png) no-repeat 10px center;}
.header .srchBar .btnIco_del {top: 0; right: 60px; width: 30px; height: 60px;}
.header .srchBar .btnIco_del:after,
.header .srchBar .btnIco_del:before {top: 50%; left: 50%; height: 20px; margin-top: -12px; background-color: #b1b1b1;}
.header .keyword {position:relative; padding-left: 110px;}
.header .keyword > * {display: inline-block; margin: 0 15px; color:#fff;}
.header .keyword .tit {position:absolute; left: 0; top:0; margin-left:0; font-weight: 700;}
.header .keyword .tit:after {content: ''; position: absolute; top:5px; bottom:5px; right:-30px; width:1px; background-color: #959ca0;}

.header .eventArea {padding:50px 0 60px 0;}
.header .recomCard li {float:left; width:179px; padding-right:20px;}
.header .recomCard {width: 50%;}
.header .recomMenu {width: 22%;}
.header .recomEvent {width: 28%;}
.header [class^=recom] {float: left;}
.header [class^=recom] strong.tit {display: block; margin-bottom:15px; color:#006cea; font-size: 20px; font-weight: 700;}
.header [class^=recom] ol li a {display: block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; line-height:1.2;}
.header [class^=recom] ol li a:hover,
.header [class^=recom] ol li a:focus {text-decoration: underline; color: #2b64ce;}
.header [class^=recom] ol li {margin-top:19px;}
.header [class^=recom] [class^=txtList_] {margin: 0;}
.header [class^=recom] ol li:first-child a {font-weight: 700; color:#333;}
.header .recomCard .link >.tit {display:block; margin: 18px 0 16px; font-size:16px; color:#333; font-weight: 700; line-height:1.25em; display:-webkit-box; height:40px; text-overflow:ellipsis; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-all; word-wrap:break-word;}
.header .recomCard .desc {font-size:14px; color:#666; letter-spacing:-0.05em; display:inline-block; width:100%; height:18px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.header .recomCard .cardImg {display: block; height: 83px;}
.header .recomCard .cardImg img {width: auto; height: 100%;}
.header .recomCard .cardImg.rotate img {transform:rotate(270deg); -ms-transform:rotate(270deg); width: 83px; height: 130px;transform-origin: 64% 40%; -ms-transform-origin: 64% 40%; margin-top: -21px;}
.header .txtList_numS  .> li {padding-left:29px;}
.header .txtList_numS > li:before {display:block; top:0; width:19px; height:20px; padding:0 1px 0 0; border:none; background-color: #e3e5e5; color:#666; font-size: 12px; line-height: 20px !important; font-weight: 700;}
.header .txtList_numS > li:first-child:before {background-color:#006cea; color:#fff;}

.header .chat {display:block; height:70px; margin-top:70px; background-color:#eef5f8; text-align: center; line-height: 70px; font-size: 20px; color:#222;}
.header .chat span {display: inline-block; position:relative; padding:0 23px 0 74px; background: url(../img/pc/common/gnb_chat.png) no-repeat 0 center;}
.header .chat span:after {content: ''; position: absolute; right:0; top:50%; width:9px; height: 16px; margin-top:-8px; background: url(../img/pc/common/gnb_chat_arrow.png) no-repeat 0 0;}

/*================================================ 자동완성 ================================================*/
.ui-autocomplete {max-height: 365px; border-color: #c8c8c8; overflow: auto; z-index: 900; border-radius:  0 0 5px 5px}
.ui-menu-item {text-align: left;}
.ui-menu-item > span {display: block; height:60px; padding-left: 24px !important; color:#222; line-height: 60px; font-size: 20px;}
.ui-menu-item:hover, 
.ui-menu-item:focus, 
.ui-widget-content .ui-state-active {margin:0 !important; background-color: #ecfeff !important; border: none !important; color:#222 !important;}
.customSrchBox .ui-autocomplete {max-height: 235px; display: block;}
.customSrchBox .ui-menu-item > span {height:46px; padding-left: 13px !important; line-height: 46px; font-size: 16px;}

.popWrap .ui-autocomplete{height:165px; overflow:auto;}
.popWrap .ui-menu-item > span{height:40px; padding-left:15px !important; line-height:40px; font-size:14px;}
/*================================================ 전체메뉴 ================================================*/
.sitemapOpen .topArea {height:118px;}
.zIndex .topArea {z-index: 3;}
.zIndex .gnbArea {z-index: 4;}
.sitemapOpen .gnbArea .gnbWrap {position: relative;}
.sitemapOpen .gnbArea .right {position:absolute; right:0; top: -89px;}
.sitemapOpen .gnbArea .menu {float:none; width: 90%; margin:0 auto; text-align: center;}
.sitemapOpen .gnbArea .menu > li {float: none;}
.sitemapOpen .gnbArea .menu > li > a:focus {color: #222;}
.sitemapOpen .gnb.smallFont .menu > li > a {font-size: 16px;}
.sitemapOpen .gnbArea .menu > li.on > a:focus {color: #2b64ce;}
.sitemapOpen .gnbArea .subArea {display: none !important;}
.sitemapTit {display:none; position: absolute; top:0; left:0; right:0; bottom:0; background-color: #000; font-size: 40px; font-weight: bold; line-height: 118px; text-align: center; color:#fff;}
.sitemapTit > * {display: inline;}
.isIE .sitemapTit > *:focus {outline: 1px dotted white;}
.sitemapContain {display:none; position: absolute; top: 184px; width: 100%; padding-bottom:100px; background-color: #fff; z-index: 800; line-height: 1;} /* top의 값은 sitemap 위의 전체 높이값*/
.sitemapContain .sitemapWrap {width: 1080px; margin: 0 auto;}
.sitemapContain .subWrap {border-top: 1px solid #e0e0e0; margin-top:50px;}
.sitemapContain .subWrap:first-child {border: none; margin-top: 0;}
.sitemapContain .gnb .subWrap {min-height: 0;}
.sitemapContain .gnb .leftBanner {top: 50px;}
.sitemapContain .gnb .depth2 {margin-top: 10px;}

/*================================================ Footer ================================================*/
.footer {background-color: #303134; color:#ddd; position:relative; z-index:1;}
.footer [class*=Wrap] {width:1080px; padding-top:40px; margin:0 auto;}
.footer [class*=Wrap]:after, 
.footer [class*=Wrap]:before {content: ''; display: table}
.footer [class*=Wrap]:after {clear: both;}

.footer .contact {float:left; position:relative; width: 50%; padding: 0 0 0 110px;}
.footer .contact > * {float:left;}
.footer .csTit {display:inline-block; position:absolute; left:0; bottom:0; padding:3px 15px 4px; border-radius: 18px; background-color:#252528; font-size: 18px;} 
.footer .csTit:before {content: ''; position:absolute; top:-43px; left:0; right:0; bottom:0; background: url(../img/pc/common/footer_cs.png) no-repeat center 0;} 
.footer .csNumber {font-size: 26px;}
.footer .csNumList {float:right; width: 250px;}
.footer .csNumList li {position:relative; margin-top:11px; color:#848486; line-height: 1em}
.footer .csNumList li:first-child {margin-top:5px;}
.footer .csNumList strong {position:absolute; right: 0; font-size:16px; color:#ddd;}
 
.footer .topWrap .linkGroup {float: right;} 
.footer .topWrap .linkGroup > .links {color:#9e9fa1;}
.footer .topWrap .linkGroup > .links:last-child:before {content: ''} 
.footer .topWrap .linkGroup > .links:before {width:7px; height:11px; margin-top:-5px; border: none; background: url(../img/pc/common/footer_arrow.png) no-repeat 0 0; }
.footer .linkGroup > .links:hover, 
.footer .linkGroup > .links:focus {color:#fff !important;}
.footer .linkGroup > .links:hover:after, 
.footer .linkGroup > .links:focus:after {border-color:#fff !important;}

.footer .snsGroup {float: right; margin-top: 15px; line-height: 1em;}
.footer .snsGroup a {display:inline-block; position:relative; width:38px; height:38px; margin-left:5px; border-radius: 50%; background-color: #4b4d51;}
.footer .snsGroup img {display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}
 
.footer .appGroup {display:table; width:1080px; margin: 40px auto 0; padding: 36px 0; border-top:1px solid #252528;}
.footer .appGroup > * {display: table-cell; /* min-width:240px; min-width:160px; */ min-width:320px; vertical-align: top;}
.footer .appGroup > *:last-child {float: right; min-width: 0}
.footer .appGroup img {margin-right: 8px;}
.footer .appGroup span {display: inline-block; line-height: 52px; color:#fff; font-size: 13px;}
.footer .appGroup a:hover span,
.footer .appGroup a:focus span {text-decoration: underline;}

.footer .bottomArea {padding-bottom:50px; background-color:#2a2a2d; font-size: 13px; color: #828282;}
.footer .bottomWrap {position:relative; padding-left:160px;}
.footer .bottomWrap .logo {position: absolute; left:0;}
.footer .bottomWrap .links {margin:3px 13px 3px 12px !important; font-size: 13px; font-weight: 700;}
.footer .bottomWrap .links.bold {color:#fff;} 
.footer .bottomWrap .links:first-child {margin-left: 0 !important;}
.footer .bottomWrap .linkGroup > .links:before {right:-12px; height:10px; border-color: #464545;}
.footer address {margin-top:15px; font-style: normal;}
.footer .waMark{position:absolute; top:70px; right:35px;}
/* footer 인증마크 영역 */
.footer .footerCertMarkGroup{display:block;position: absolute;top: 80px;right: 35px;max-width: 360px; font-size: 0;}
.footer .footerCertMarkGroup .fcmItem{display: inline-block;margin-left: 8px;}
.footer .footerCertMarkGroup .fcmItem:first-child{margin-left: 0;}
.footer .footerCertMarkGroup .fcmImage{max-height: 42px;}
.hasCrdSticky .footer {padding-bottom: 60px;}

/*================================================ 한자 깨질때 ================================================*/
.fixFont {font-family: '맑은 고딕', 'Malgun Gothic', 'Dotum', '돋움', 'gulim', '굴림', Helvetica, sans-serif }

/*================================================ LoadingWrap ================================================*/
.loadingWrap {position: fixed; top:0; left:0; right:0; bottom:0; background-color: rgba(255,255,255,0.5); z-index: 2000;}
.loadingWrap span {display: block; position: absolute; top:50%; left:50%; width: 90px; height: 90px; margin: -45px auto auto -45px; border-radius:50%; background: rgba(0,0,0,.7) url(../img/pc/common/ico_load.png) no-repeat center 0; overflow: hidden; -webkit-animation: mainLoading 0.6s steps(4,end) infinite; animation: mainLoading 0.6s steps(4,end) infinite;}
.loadingWrap .txt {position:absolute; top:50%; left:50%; width:400px; color:#222; font-weight:700; text-align:center; margin:60px -200px 0;}
@-webkit-keyframes mainLoading {to{background-position: center -360px}}
@-ms-keyframes mainLoading {to{background-position: center -360px}}
@keyframes mainLoading {to{background-position: center -360px}}

/*=========================================== quick menu ==============================================*/
.quick {position:fixed; bottom:30px; right:54px; padding-bottom:0; text-align:left; z-index: 400; transition: bottom 0.3s ease-in-out, padding 0.3s ease-in-out;}
.quick ul {height:0px; overflow: hidden; transition-property:height; transition-duration:0.5s;}
.quick li {position:relative; max-width:160px; margin-top: 6px; white-space: nowrap; transition-property:top; transition-duration:0.45s;}
.quick li > a,
.quick button {display: table; width:52px; height:52px; margin: 0 0 0 auto; border-radius:26px; background-color: rgba(51,51,51,0.8); white-space: nowrap; overflow: hidden; color:#fff; font-size: 14px; transition: all 0.23s ease-in-out, box-shadow 1.5s linear; box-shadow: 0px 10px 15px 0 rgba(0,0,0,0.25); table-layout: fixed;}
.quick li:first-child {margin-top: 0;}
.quick li > a {box-shadow: 0px 0px 0px 0 rgba(0,0,0,0);}
.quick li .icoWrap {display:table-cell; width: 52px; height: 52px; vertical-align: middle;}
.quick li .img {display: block; margin:0 auto;}
.quick li .txt {position:relative; left:120px; display:inline-block; padding-right:15px; line-height: 48px; transition: all 0.3s ease-in-out;}
.hasCrdSticky .quick {bottom: 90px;}

/* 챗봇 */
.quick .chatbot {display:table; position:relative; width:52px; height:52px; margin:12px 0 0 auto; border-radius:26px; font-size:14px; color:#fff; white-space:nowrap; table-layout:fixed; text-align:right; box-shadow: 0px 10px 15px 0 rgba(0,0,0,0.25);}
.quick .chatbot .commentBox {display:block; position:absolute; top:0; bottom:0; right:0; width:52px; border-radius:26px; background-color:#4976e2; overflow:hidden; transition:all 0.3s ease-in-out, box-shadow 1.5s linear;}
.quick .chatbot .commentBox .txt {display:block; position:absolute; top:50%; left:21px; right:60px; width:209px; color:rgba(255,255,255,1); line-height:normal; white-space:normal; text-align:left; vertical-align:middle; transform:translate(0,-50%); -ms-transform:translate(0,-50%);}
.quick .chatbot .inner {display:block; position:relative; width:52px; height:52px; border-radius:26px; background-color:#4976e2;}
.quick .chatbot .inner > div,
.quick .chatbot .face:before,
.quick .chatbot .face span,
.quick .chatbot .face:after {position:absolute; transition: 0.25s ease-out; transition-property: top,left,right,width,height, transform;}
.quick .chatbot .body {top:8px; left:10px; width:33px; height:44px; background:url(../img/pc/common/quick_chatbot_body.png) no-repeat 0 0;}
.quick .chatbot .head_left {top:10px; left:6px; width:6px; height:19px; background:url(../img/pc/common/quick_chatbot_head_left.png) no-repeat 0 0;}
.quick .chatbot .head_right {top:10px; right:6px; width:5px; height:19px; background:url(../img/pc/common/quick_chatbot_head_right.png) no-repeat 0 0; border-radius: 2px;}
.quick .chatbot .arm_left {top: 37px; left: -8px; width: 20px; height: 15px; background: url(../img/pc/common/quick_chatbot_arm_left.png) no-repeat right 0; transform-origin: 17px 2px;}
.quick .chatbot .arm_right {top: 37px; right: 6px; width: 20px; height: 15px; background: url(../img/pc/common/quick_chatbot_arm_left.png) no-repeat right -20px; transform-origin: 17px 2px;}

.quick .chatbot:not(.on) .face:before,
.quick .chatbot:not(.on) .face:after {animation: eyes 5.3s infinite linear 0.5s;}
.quick .chatbot:not(.on) .arm_left {animation: leftArm 20.3s infinite 0.5s;}
.quick .chatbot:not(.on) .arm_right {animation: rightArm 20.3s infinite 0.5s;}

@keyframes leftArm {
	0%{transform: rotate(0deg);}
	0.5%{transform: rotate(55deg);}
	1%{transform: rotate(25deg);}
	1.5%{transform: rotate(55deg);}
	2%{transform: rotate(25deg);}
	2.5%{transform: rotate(55deg);}
	3%{transform: rotate(25deg);}
	3.5%{transform: rotate(55deg);}
	6%{transform: rotate(25deg);}
	6.25%{transform: rotate(25deg);}
	7.25%{transform: rotate(95deg);}
	7.75%{transform: rotate(0deg);}
}

@keyframes rightArm {
	0%{transform: rotate(0deg);}
	0.5%{transform: rotate(-55deg);}
	1%{transform: rotate(-25deg);}
	1.5%{transform: rotate(-55deg);}
	2%{transform: rotate(-25deg);}
	2.5%{transform: rotate(-55deg);}
	3%{transform: rotate(-25deg);}
	3.5%{transform: rotate(-55deg);}
	6%{transform: rotate(-25deg);}
	6.25%{transform: rotate(-25deg);}
	7.25%{transform: rotate(-95deg);}
	7.75%{transform: rotate(0deg);}
}

@keyframes eyes{
	38%{top:8px; height:4px}
	40%{top:10px; height:1px}
	42%{top:8px; height:4px}
	44%{top:10px; height:1px}
	46%{top:8px; height:4px}
}



.quick .chatbot .belt {top:45px; left:24px; width:6px; height:6px; background:url(../img/pc/common/quick_chatbot_belt.png) no-repeat 0 0;}
.quick .chatbot .face {position:absolute; top:13px; left:15px; width:22px; height:22px; border-radius:50px; background-color:#e4f3fc;}
.quick .chatbot .face span {top:14px; left:8px; width:6px; height:4px; background:url(../img/pc/common/quick_chatbot_mouse.png) no-repeat 0 0;}
.quick .chatbot .face:before,
.quick .chatbot .face:after {content:""; display:inline-block; top:8px; width:4px; height:4px; border-radius:50%; background-color: #000;}
.quick .chatbot .face:before {left:4px;}
.quick .chatbot .face:after {right:4px;}

.quick .chatbot.on .commentBox {left:auto; right:0; width:290px; height:100%;}
.quick .chatbot.on .inner > div {z-index:1;}
.quick .chatbot.on .inner .body {left:14px; background-position:100% 0;}
.quick .chatbot.on .inner .head_left {top:9px; left:11px; background-position:100% 0; z-index:0;}
.quick .chatbot.on .inner .head_right {top:9px; right:2px; width:8px; background-position:100% 0;}
.quick .chatbot.on .inner .arm_left {top: 26px; left: 1px; height: 20px; background-position: right bottom;}
.quick .chatbot.on .inner .arm_right {top:37px; right:3px; width:8px; height:15px; background:url(../img/pc/common/quick_chatbot_arm_right.png) no-repeat 0 0;}
.quick .chatbot.on .inner .belt {top:44px; left:22px;}
.quick .chatbot.on .inner .face {width:21px; left:16px;}
.quick .chatbot.on .inner .face span {top:13px; left:6px; width:5px; background-position:0 100%;}
.quick .chatbot.on .face:before {left:2px;}
.quick .chatbot.on .face:after {right:7px;}

/*.quick ul ~ button {margin-top:12px;}*/
.quick .openBtn {position:relative; background-color: #000;}
.quick .openBtn:before,
.quick .openBtn:after {content: ''; position:absolute; left:50%; top:50%; width:2px; height: 16px; margin-top:-8px; margin-left:-1px; background-color: #fff; transition: transform 0.45s; transition-timing-function: inherit;}
.quick .openBtn:before {transform:rotate(90deg); -ms-transform:rotate(90deg);}
.quick.on .openBtn:after {transform:rotate(-270deg); -ms-transform:rotate(-270deg);}
.quick.on .openBtn:before {transform:rotate(-270deg); -ms-transform:rotate(-270deg);}
.quick li > *:focus,
.quick li > *:hover,
.quick li > *.on {width: 100%; background-color: rgba(51,51,51,1);}
.quick li > *:focus .txt,
.quick li > *:hover .txt,
.quick li > *.on .txt {left:-5px;}
.quick.active li > a {box-shadow: 0px 10px 15px 0 rgba(0,0,0,0.25);} 
.quick.active ul {overflow: visible; outline:rgba(0,0,0,0)}
.quick .quickTopBtn {position: absolute; bottom:0; right:0; height:0; margin-top:12px !important; background: rgba(69,69,69,0) url(../img/pc/common/quick_top.png) no-repeat center; z-index: 10; transition: all 0.3s ease-in-out;}
.quick.topVisible {padding-bottom: 64px;}
.quick.topVisible .quickTopBtn {display: table; height:52px; background-color: rgba(69,69,69,1);}

/* 커튼 팝업 */
.noticePop {opacity:0; text-align:center; width:100%; position:relative; background-color:#006ec1;}
.noticePop.uiAct {opacity:1;}
.noticePop .inner {position:relative; width:1080px; margin:0 auto;}
.noticePop .imgArea img {width:1080px; height:84px;}
.noticePop .closeBox {position:absolute; bottom:17px; right:0; max-width:240px; white-space:nowrap;}
.noticePop .closeBox .btn_close {width:14px; height:14px; padding:0; margin:0 0 0 10px; text-indent:-9999px; background: url(../img/pc/content/btn_curtain_close.png) no-repeat; min-width:14px; z-index:1; position:relative;}
.noticePop .closeBox .singleIpt {font-size:14px; vertical-align:middle;}
.noticePop .ipt[type='checkbox'] + label {color:#fff; font-size:14px; padding-left:23px;}
.noticePop .ipt[type='checkbox'] + label:before {width:18px; height:18px; top:2px;}
.noticePop  .ipt[type='checkbox']:checked + label:before {background-position:1px 3px;}

.noticePop .swiper-controls {left:auto; right:262px; bottom:20px;}
.noticePop .swiper-controls .swiper-counter {color:#fff}
.noticePop .swiper-controls .swiper-counter em {color:#fff}

.noticePop .swiper-button-stop:before,
.noticePop .swiper-button-stop:after {background-color:#fff;}
.noticePop .swiper-button-play:after {border-left:6px solid #fff;}

.noticePop .swiperWrap [class^=btn] {position:absolute; bottom:22px; right:0; width:8px; height:14px; background: url(../../img/pc/content/btn_popslide_notice.png) no-repeat 0 0; z-index: 10;}
.noticePop .swiperWrap .btnPrev {background-position:0 0; right:330px;}
.noticePop .swiperWrap .btnNext {background-position:right 0; right:243px;}

/*************** 복지 GNB ***************/
/************ 헤더 ************/
.header.welfare .util li a > * {vertical-align: top; display: inline-block;}
.header.welfare .util li a:before {top:9px; bottom: 12px;}
.header.welfare .util li a span {color:#222;}
.header.welfare .util li a em {font-weight:100;}
.header.welfare .util li a:hover em,
.header.welfare .util li a:hover span,
.header.welfare .util li a:focus em,
.header.welfare .util li a:focus span {color: #2b64ce;}
.header.welfare .gnb .menu {width:780px; justify-content:normal; -ms-flex-pack:inherit; -webkit-box-pack:inherit;}
.header.welfare .gnb .menu > li {margin-left:40px;}
.header.welfare .gnb .menu > li:first-child {margin-left:0;}
.header.welfare .gnb .menu > li > a > span {line-height:100%;}
.header.welfare .gnbWrap .right [class*=rightMenu_] {height:58px; font-size:12px; color:#222; padding:16px 10px 0; text-align:center;}
.header.welfare .gnbWrap .right [class*=rightMenu_]:before {content: ''; width:22px; height:22px; display:inline-block; margin:3px 6px 10px 0; background:url(../img/pc/common/ico_gnb_welfare.png) no-repeat 0 0; vertical-align:middle;}
.header.welfare .gnbWrap .right .rightMenu_joinInfo:before {background-position:0 0;}
.header.welfare .gnbWrap .right .rightMenu_logout:before {background-position:0 -26px;}
.header.welfare .gnb .subWrap {min-height: 140px;}
.header.welfare .logo a {width:208px; height:34px; background-size:contain; background-repeat:no-repeat; background-position:0 50%;}
.header.welfare .gnb .cateTit {width:134px; height:22px; background-size:contain; background-repeat:no-repeat; background-position:0 50%;}

.header.sticky.welfare .gnb .menu > li > a {font-size:15px;}
.header.sticky.welfare .gnb .menu {padding-left:170px;}

.sitemapOpen .header.welfare .gnb .menu {justify-content:space-between; -ms-flex-pack:justify; -webkit-box-pack:justify;}
.sitemapOpen .header.welfare .gnb .menu > li {margin-left:0;}
.header.welfare ~ .sitemapContain .gnb .subWrap {min-height:115px;}
.header.welfare .gnb .leftBanner .tit,
.header.welfare ~ .sitemapContain .gnb .leftBanner .tit {font-size:26px;}

.oldIE .header.welfare .gnb .menu > li {margin-left:0;}
.oldIE .header.welfare .gnb .menu > li > a {padding-left:20px; padding-right:20px;}

/************ 푸터 ************/
.footer.welfare .topWrap {margin-bottom:40px;}
.footer.welfare .topWrap > [class*=Area] {position:relative;}
.footer.welfare .topWrap > [class*=Area] .tit {display:block; float:none; padding-bottom:20px;}
.footer.welfare .topWrap > [class*=Area] .mask {padding:0 0 0 80px; position:relative; float:left;}
.footer.welfare .topWrap > [class*=Area] .mask:before {content:''; display:inline-block; width:60px; height:60px; position:absolute; top:0; left:0; border-radius:50%; background:url(../img/pc/common/footer_welfare.png) #252528 no-repeat 0 0;}
.footer.welfare .topWrap > [class*=Area] .mask * {display:block;}
.footer.welfare .topWrap > [class*=Area] .mask em {font-size:26px; color:#fff;}
.footer.welfare .topWrap > [class*=Area] .mask span {color:#bebfbf; font-size:15px;}
.footer.welfare .topWrap > [class*=Area] .infoList {float:right;}
.footer.welfare .topWrap > [class*=Area] .infoList li {position:relative; font-size:14px; color:#949494; line-height:1em; margin-top:18px;}
.footer.welfare .topWrap > [class*=Area] .infoList li:first-child {margin-top:10px;}
.footer.welfare .topWrap > [class*=Area] .infoList li em {font-size:15px;}
.footer.welfare .topWrap > [class*=Area] .infoList li strong {position:absolute; top:0; right:0;}

/* 헬프데스크 */
.footer.welfare .contArea {float:left; width:620px;}
.footer.welfare .contArea .mask:before {background-position:0 0;}
.footer.welfare .contArea .infoList li {width:210px;}
/* 환율우대 */
.footer.welfare .rateArea {float:right; width:460px; padding-left:80px;}
.footer.welfare .rateArea:before {content:''; display:inline-block; position:absolute; top:5px; left:40px; width:1px; height:85px; background-color:#252528;}
.footer.welfare .rateArea .mask:before {background-position:-60px 0;}

/* 배너 리스트 */
.footer .bannerSwiper {position:relative; width:1080px; margin: 40px auto 0; padding: 36px 52px; border-top:1px solid #252528; text-align:center;}
.footer .bannerSwiper li {display:inline-block; width:168px; padding:0 14px; vertical-align:top; text-align:center;}
.footer .bannerSwiper li a {display: block; background-color: #46494d;}
.footer .bannerSwiper li a img {width: 100%; height: 50px;}
.footer .bannerSwiper .btnPrev,
.footer .bannerSwiper .btnNext {background:url(../img/pc/common/footer_bnrList_btn.png) no-repeat 0 0; width:20px; height:32px; position:absolute; margin-top:-16px; top:50%; left: 0; z-index: 20}
.footer .bannerSwiper .btnNext {background-position:100% 0; right:0; left: auto;}

/*.footer .bannerSwiper li a {font-size:14px; background-color:#46494d; display:block; height:50px; border-radius:2px; display:table; width:100%;}
.footer .bannerSwiper li a em {font-weight:100; display:table-cell; vertical-align:middle;}
.footer .bannerSwiper li a em span {display:block; font-size:11px; line-height:1em; margin-top:3px;}*/

/*챗봇 헤더 */
.chatHeader {height: 50px;display: flex;text-align: center;justify-content: space-between;align-items: center;border-bottom: 1px solid #eaeaea;}
.chatHeader .btnIco_chatBack{width: 50px;height: 50px;background: url(../img/mw/btn_chat_back.png?v=1) no-repeat center/75% 75%;}
.chatHeader .btnIco_chatReload{width: 50px;height: 50px;background: url(../img/mw/btn_chat_reload.png?v=1) no-repeat center/75% 75%;}

/*챗봇 새로 추가*/
.chatbot .txt-wrap {display: flex;position: absolute;right: 0;top: 0; width: 48px;height: 52px;overflow: hidden;background-color: rgba(24, 35, 54, 0.8);border-radius: 500px;transition: all 0.5s ease-in-out;align-items: center;z-index: 1; opacity:0;}
.chatbot.on .txt-wrap, .quick-wrap:hover .txt-wrap, .chatbot:focus .txt-wrap {width: 290px;max-width: 100vw;transition: all 0.5s ease-in-out; opacity:1;}
.chatbot:hover .txt-wrap, .chatbot:focus .txt-wrap {opacity:1;} 
.chatbot .txt-wrap .tit {display: block;position: absolute;width: 290px;padding: 5px 58px 5px 20px;font-size: 14px;color: #fff;line-height: 18px;font-weight: 400;box-sizing: border-box; text-align:left !important; white-space:normal; }
#lottie {position: relative;width: 52px;height: 52px;display: block;overflow: hidden;border-radius: 100%;transform: translate3d(0,0,0);text-align: center;z-index: 2; background:#0040B3;}
#cbDiv {max-height:calc(100% - 60px);}
#cbIframeNew {max-height:calc(100% - 110px);}