@charset 'utf-8';
@import '/common/css/reset.css';
@import url('/common/font/SpoqaHanSans-kr.css');
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:700&display=swap&subset=korean');

/* layout */
html { height: 100%; width: 100%; font-size: 18px; }
body { position: relative; box-sizing: border-box; min-width: 320px; height: 100%; color: #333; word-break: keep-all; font: 300 18px/30px 'Spoqa Han Sans', sans-serif; letter-spacing: -.05em; padding-top: 80px; }
.en { font-family: 'Nunito Sans', sans-serif; }

/* base */
a,
input,
button,
label { transition: all .3s; text-align: left; -webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
input::-webkit-input-placeholder { color: #999; }
input:-ms-input-placeholder { color: #999; }
textarea::-webkit-input-placeholder { color: #999; }
textarea:-ms-input-placeholder { color: #999; }
input::placeholder { color: #999; }
textarea::placeholder { color: #999; }

img { max-width: 100%; }
section>.wrap,
footer>.wrap { width: 1100px; margin: 0 auto; position: relative; height: 100%; max-width: 100%; }
section>.wrap:after { content: ''; display: block; clear: both; max-width: 100%; background: #fff; }
.rw { display: block; }
.ww { display: inline-block; }
/*.rw.br:before { content: ''; display: block; }*/

input,
select { border: 1px solid #e1e1e1; border-radius: 0; height: 40px; box-sizing: border-box; padding: 0 10px 2px; line-height: 36px; max-width: 100%; width: 200px; background: #fff no-repeat; }
input[type=radio],
input[type=checkbox] { border: 0 none; width: auto; height: auto; }
select { -moz-appearance: none; -webkit-appearance: none; appearance: none; padding-right: 30px; background-image: url('/common/images/common/icon-select.png'); background-position: right center; background-size: auto 38px; transition: all .2s; }
.loaded select { background-color: #333; }
select:after { content: '123'; display: block; position: absolute; }
select::-ms-expand { display: none; }
input:focus,
select:focus,
input:active,
select:active { border-color: #343275; }
select:focus { background-color: #ffaa00; }
label { display: inline-block; vertical-align: middle; }

input._datepicker { width: 180px; background-image: url('/common/images/common/icon-calendar.png'); background-position: right center; margin-left: 7px; }
.loaded input._datepicker { background-color: #ccc; }
input._datepicker:focus { background-color: #fa0; }
span.hyphen { display: inline-block; vertical-align: middle; height: 40px; line-height: 38px; position: relative; text-indent: -999px; overflow: hidden; width: 20px; }
span.hyphen:before { content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 10px; height: 1px; background: #e1e1e1; margin: auto; }

figure { margin-top: 10px; }
figure img { display: block; margin: 0 auto; }


figcaption.desc { display: none; }

ul.box { font-size: 0; margin: -10px 0 0 -10px; }
ul.box li { position: relative; display: inline-block; vertical-align: middle; margin: 10px 0 0 10px; font-size: 1rem; }
ul.box input { position: absolute; opacity: 0; }
ul.box span { display: block; border: 1px solid #e1e1e1; background: #fff; color: #999; text-align: center; line-height: 37px; font-size: .89rem; font-weight: 400; transition: all .3s; box-sizing: border-box; padding: 0 18px; }
ul.box input:active+span { border-color: #fa0; color: #000; }
ul.box input:checked+span { background: #fa0; border-color: #fa0; color: #000; }
ul.box~div > * { margin-top: 10px; }
ul.box.term span { min-width: 100px; height: 40px; }
ul.box.select { margin-left: -20px; }
ul.box.select li { margin-left: 20px; }
ul.box label select { margin-left: 5px; width: 160px; }

ul.category { margin: 0 auto -40px; text-align: center; max-width: 1140px; margin-top: 60px; }
ul.category:after { content: ''; display: block; clear: both; }
ul.category li { margin: 0 20px 40px; float: left; width: 340px; max-width: 100%; }
ul.category dl { position: relative; padding-top: 60px; line-height: 179px; background: #f9f9f9; border: 1px solid #ccc; }
article:nth-child(2n) ul.category dl { background: #fff; }
ul.category dt { background: #343275; color: #fff; font-weight: 700; padding: 15px; position: absolute; left: 0; right: 0; top: 0; line-height: 30px; }
ul.category dd { display: inline-block; vertical-align: middle; line-height: 1.67rem; padding: 0 5%; }
ul.category.ea2 li { width: 530px; }

.ui-datepicker { width: 238px; background: #fff; border: 1px solid #e1e1e1; font-size: .89rem; padding: 5px 3px; letter-spacing: 0; position: absolute; top: 0; }
.ui-datepicker-header { position: relative; text-align: center; }
.ui-datepicker-header a { position: absolute; display: block; width: 24px; height: 24px; border-radius: 50%; background: #e1e1e1; text-indent: -999px; overflow: hidden; top: 1px; bottom: 0; margin: auto 0; }
.ui-datepicker-header a:hover,
.ui-datepicker-header a:focus { background: #aaa; }
.ui-datepicker-header a:after { content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: solid transparent; border-width: 4px 5px; width: 0; height: 0; margin: auto; }
.ui-datepicker-header a.ui-datepicker-prev { left: 7px; }
.ui-datepicker-header a.ui-datepicker-prev:after { border-right-color: #fff; right: 6px; }
.ui-datepicker-header a.ui-datepicker-next { right: 7px; }
.ui-datepicker-header a.ui-datepicker-next:after { border-left-color: #fff; left: 6px; }
.ui-datepicker-header .ui-datepicker-year:after { content: '년'; color: #aaa; }
.ui-datepicker-header .ui-datepicker-month:after { content: '월'; color: #aaa; }
.ui-datepicker table { border: 0 none; margin-top: 0; }
.ui-datepicker th,
.ui-datepicker td { padding: 2px; height: 30px; text-align: center; border: 0 none; line-height: 0; }
.ui-datepicker th { color: #aaa; }
.ui-datepicker td a { display: block; height: 100%; width: 100%; text-align: center; width: 30px; height: 30px; border-radius: 50%; line-height: 29px; margin: 0; background: #fff; }
.ui-datepicker td a:hover,
.ui-datepicker td a:focus { background: #e1e1e1; }
.ui-datepicker td a.ui-state-highlight { text-decoration: underline; }
.ui-datepicker td a.ui-state-active { background: #24235e; color: #fff; }
@media (max-width: 830px) {
    ul.box.term span { min-width: 70px; }
    input._datepicker { width: 150px; }
}


/* layout */
header.common { height: 79px; border-bottom: 1px solid #e1e1e1; background: #fff; line-height: 80px; position: fixed; left: 0; right: 0; top: 0; z-index: 100; }
header.common h1 { position: absolute; left: 50px; top: 0; background: url('/common/images/common/header-logo.png') center no-repeat; width: 166px; text-indent: -999px; overflow: hidden; z-index: 100; line-height: 77px; }
header.common h1.fo { background-image:url('/common/images/common/header-logo-fo.png'); }
header.common h1 a { display: block; width: 100%; height: 100%; }
header.common button.menu { position: absolute; right: 0; top: 0; width: 80px; height: 79px; text-indent: -999px; overflow: hidden; margin-right: 26px; z-index: 100; }
header.common button.menu:before,
header.common button.menu:after,
header.common button.menu i:before,
header.common button.menu i:after { position: absolute; display: block; content: ''; background: #333; width: 32px; height: 2px; left: 0; right: 0; margin: auto; transition: all .3s; transform-origin: center; }
header.common button.menu:before { top: 28px; }
header.common button.menu:after { bottom: 27px; }
header.common button.menu i:before,
header.common button.menu i:after { top: 0; bottom: 0; }
header.common button.menu:hover:before,
header.common button.menu:hover:after,
header.common button.menu:hover i,
header.common button.menu:focus:before,
header.common button.menu:focus:after,
header.common button.menu:focus i { background-color: #343275; }
.megaOn header.common button.menu:before,
.megaOn header.common button.menu:after { opacity: 0; }
.megaOn header.common button.menu:before { top: 20px; }
.megaOn header.common button.menu:after { bottom: 20px; }
.megaOn header.common button.menu i:before { transform: rotate(-45deg); }
.megaOn header.common button.menu i:after { transform: rotate(45deg); }
header.common .gnb { text-align: center; font-size: 0; color: #000; font-weight: 400; font-size: 0; transition: padding .3s; }
header.common .gnb a { display: inline-block; font-size: 1.1rem; padding: 0 20px; background: transparent; transition: all .3s; text-align: center; }
header.common .gnb a:hover,
header.common .gnb a:focus { background-color: #343275; color: #fff;  }
header.common .gnb a.on { color: #fa0; }
header.common .gnb .new,
header.common .mega .new { color: #fa0; position: relative; }
header.common .gnb .new:before,
header.common .mega .new:before { content: 'N'; display: block; position: absolute; left: -1.25rem; top: -.45rem; color: #fff; width: 16px; height: 16px; border-radius: 50%; background: #fa0; font-size: .61rem; line-height: 15px; text-align: center; font-weight: 900; letter-spacing: -.5px; }
header.common .gnb .new:before { left: .3rem; top: 1rem; }
header.common .mega { display: block; height: 0; position: absolute; background: #fff; top: 0; left: 0; right: 0; text-align: center; z-index: 99; transition: height .3s; overflow: hidden; box-sizing: border-box; border-bottom: 0 solid #fff; line-height: 1.9rem; }
.megaOn header.common .mega { height: 300px; border-bottom: 1px solid #e1e1e1; }
header.common .mega ul { display: inline-block; vertical-align: top; height: 100%; border-left: 1px solid #e1e1e1; margin-left: 17px; }
header.common .mega li { width: 109px; float: left; border-right: 1px solid #e1e1e1; height: 100%; font-size: 1rem; font-weight: 700; padding-top: 20px; transition: all .3s; }
header.common .mega li.mobile { display: none; }
header.common .mega li button { cursor: default; }
header.common .mega li ul { border-left: 0 none; margin-top: 1px; margin-left: 0; }
header.common .mega li li { border-right: 0 none; height: auto; font-size: .85rem; font-weight: 400; padding-top: 0; color: #666; }
header.common .mega li li a { display: block; text-align: center; }
header.common .mega li:hover { background: #343275; }
header.common .mega li:hover li { background: transparent; }
header.common .mega li:hover button { color: #fa0; }
header.common .mega li:hover a { color: #fff; }
header.common .mega li:hover a:hover,
header.common .mega li:hover a:focus { color: #fa0; background: transparent; }
header.common .language { position: absolute; top: 0; right: 110px; font-family: 'Nunito Sans', sans-serif; z-index: 98; transition: right .3s; font-size: 0; }
header.common .language a { padding: 2px 7px 0; color: #999; line-height: 28px; font-size: 13px; color: #999; letter-spacing: 0; background: #eee; border: 1px solid #ccc; display: inline-block; position: relative; vertical-align: middle; }
header.common .language a+a { margin-left: -1px; }
header.common .language a.on { color: #fff; background: #343275; z-index: 1; border-color: #343275}
header.common .language a:hover,
header.common .language a:focus { color: #343275; }
header.common .language a.on:hover,
header.common .language a.on:focus { color: #fff; }
footer.common { overflow: hidden; background: #555; padding: 46px 0 50px; }
footer.common header { text-indent: -999px; overflow: hidden; background: url('/common/images/common/footer-logo.png') center no-repeat; width: 166px; height: 28px; float: left; }
footer.common article { padding-left: 264px; color: #949494; font-size: .89rem; line-height: 1.5em; padding-top: 8px; }
footer.common dl,
footer.common dt,
footer.common dd { display: inline-block; }
footer.common dl+dl { margin-left: 6px; }
footer.common p.copyrights { margin-top: 1em; font-weight: 400; font-family: 'Nunito Sans', sans-serif; }

button._top { position: fixed; left: 1280px; right: 0; bottom: 50px; margin: 0 auto; width: 60px; height: 60px; border-radius: 50%; background: #343275; text-indent: -999px; overflow: hidden; transition: opacity .2s; z-index: 90; }
button._top:before,
button._top:after { content: ''; position: absolute; display: block; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
button._top:before { width: 0; height: 0; bottom: 20px; border: solid transparent; border-width: 0 12px 15px; border-bottom-color: #fff; }
button._top:after { top: 6px; width: 5px; height: 26px; background: #fff; }

nav.lnb.fixed { position: fixed; top: 80px; }

@media (max-width: 1560px) and (min-width: 1440px) {
    header.common button.menu { margin-right: 0; }
    header.common .gnb a { padding: 0 15px; }
    header.common .gnb .new:before { left: .2rem; top: .8rem; }
    header.common .gnb,
    header.common .mega { padding-left: 50px; }
    header.common .mega li { width: 102px; }
    header.common .language { right: 84px; }
}
@media (max-width: 1477px) and (min-width: 1200px) {
    header.common .language { right: 43px; }
    header.common button.menu { top: 60px; height: 60px; }
    header.common button.menu:before { top: 18px; }
    header.common button.menu:after { bottom: 18px; }
}
@media (max-width: 1477px) {
    button._top { right: 30px; left: auto; bottom: 30px; opacity: .5; }
    button._top:hover,
    button._top:focus { opacity: 1; }
}

@media (max-width: 1477px) and (min-width: 1024px) {
    body { padding-top: 120px; }
    header.common h1 { left: 0; right: 0; margin: 0 auto; }
    header.common .gnb { line-height: 60px; }
    header.common { padding-top: 60px; height: 59px; }
    
    nav.lnb.fixed { top: 120px; }
}

@media (max-width: 1439px) {
    header.common .gnb a { padding: 0; width: 130px; text-align: center; }
    header.common .gnb .new:before { left: 1rem; }
    header.common .mega { top: 120px; }
    header.common .mega ul { margin-left: 0; }
    header.common .mega li { padding-top: 5px; width: 129px; }
    header.common .mega>ul>li>a { display: none; }
    header.common button.menu.on~.mega { height: 250px; }
}

@media (max-width: 1439px) {
    header.common .gnb a { width: 102px; font-size: 1rem; }
    header.common .mega li { width: 101px; }
}

@media (max-width: 1199px) {
    header.common .gnb .new:before { left: 1rem; }
    header.common button.menu { margin-right: 0; }
    header.common .language { right: 86px; }
    
    footer.common header { margin-left: 2rem; }
}

@media (max-width: 1023px) {
    body { padding-top: 80px; }
    header.common h1 { left: 20px; }
    /*header.common { position: absolute; top: 0; left: 0; right: 0; z-index: 99; }*/
    header.common .gnb { display: none; }
    header.common .mega .new:before { left: 0; right: 4.5rem; margin: 0 auto; }
    header.common .mega { top: 80px; height: 0%; position: fixed; box-sizing: border-box; border: 0 none; overflow: hidden; }
    header.common .mega:before,
    header.common .mega:after { content: ''; display: block; width: 1px; position: absolute; top: 0; bottom: 0; background: #e1e1e1; z-index: 0; }
    header.common .mega:before { left: 33.3%; }
    header.common .mega:after { right: 33.3%; }
    header.common .mega ul,
    header.common .mega li { width: 100%; height: auto; position: relative; z-index: 1; }
    header.common .mega ul { border-left: 0 none; display: block; }
    header.common .mega>ul { height: 100%; overflow: auto; padding: 1rem 0; box-sizing: border-box; }
    header.common .mega>ul:after { content: ''; display: block; clear: both; }
    header.common .mega li { font-size: 1.5rem; transition: none; }
    header.common .mega li li { font-size: 1rem; line-height: 2em; }
    header.common .mega>ul>li { float: left; width: 33.3%; border: 0 none; padding: .8em 0; }
    header.common .mega>ul>li:nth-child(3n+2) { width: 33.4%; }
    header.common .mega>ul>li:nth-child(3n+1) { clear: left; }
    header.common .mega>ul>li>a { display: block; text-align: center; margin-bottom: .3em; }
    header.common .mega li:hover { background: transparent; }
    header.common .mega li:hover a { color: inherit; }
    header.common .mega li.mobile { display: block; }
    
    body.megaOn { overflow: hidden; }
    .megaOn header.common { position: fixed; }
    .megaOn header.common .mega { height: calc(100% - 80px); border-bottom: 0 none; }
    
    button._top { right: -90px; transition: opacity .2s, right .2s; }
    button._top.show { right: 30px; }
}

@media (max-width: 820px) {
    footer.common header { float: none; }
    footer.common article { padding-left: 2rem; padding-top: 1rem; }
}
@media (max-width: 600px) {
    footer.common article { width: 300px; }
    footer.common p.copyrights { width: 215px; }
    header.common .language { transition: none; }
}
@media (max-width: 550px) {
    header.common .mega>ul>li { width: 50%; }
    header.common .mega>ul>li:nth-child(3n+2) { width: 50%; }
    header.common .mega>ul>li:nth-child(3n+1) { clear: none; }
    header.common .mega>ul>li:nth-child(2n+1) { clear: left; }
    header.common .mega:before { left: 50%; }
    header.common .mega:after { content: none; }
}
@media (max-width: 500px) {
    header.common .mega { top: 80px; transition: all .3s linear; }
    header.common .language { right: 0; padding-right: 20px; top: 80px; line-height: 40px; background: #fff; width: 100%; text-align: right; background: #e1e1e1; overflow: hidden; height: 0; transition: height .3s linear; }
    header.common .language a { color: #333; }
    .megaOn header.common .mega { top: 120px; height: calc(100% - 120px); }
    .megaOn header.common .language { height: 40px; }
}
@media (max-width: 340px) {
    footer.common article { font-size: .8rem; }
}

/* table */
table { table-layout: fixed; border-collapse: separate; border-top: 2px solid #333; border-bottom: 1px solid #333; margin: 0 auto; width: 100%; text-align: left; }
table th,
table td { padding: 9px 10px 11px; height: 40px; border-right: 1px solid #e1e1e1; }
table th:last-child,
table td:last-child { border-right: 0 none;  }
table thead.multirow th { height: 20px; line-height: 20px; }
table thead+tbody tr th,
table thead+tbody tr td,
table tbody+tbody tr th,
table tbody+tbody tr td { border-top: 1px solid #333; }
table thead th { text-align: center; background: #eee; font-weight: 700; }
table thead th span.unit { font-size: .8rem; color: #999; }
table tbody tr+tr th,
table tbody tr+tr td { border-top: 1px solid #e1e1e1; }
table .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

table .sum th,
table .sum td { font-weight: 400; }
table a.link { border-bottom: 1px solid #fff; padding: 0 1px; }
table a.link:hover { border-bottom: 1px solid #fa0; }

.left th,
.left td,
.thLeft th,
.tdLeft td { text-align: left; }
.center th,
.center td,
.thCenter th,
.tdCenter td { text-align: center; }
.right th,
.right td,
.thRight th,
.tdRight td { text-align: right; }
th.left,
td.left { text-align: left; }
th.center,
td.center { text-align: center; }
th.right,
td.right { text-align: right; }

table.list { text-align: center; font-size: 1rem; font-weight: 400; }
table.list th,
table.list td { border-right: 0 none; }
table.list th:first-child,
table.list td:first-child { padding-left: 15px; }
table.list th:last-child,
table.list td:last-child { padding-right: 15px; }
@media (max-width: 600px) {
    table.list th,
    table.list td { padding: 10px 5px; }
table.list th:first-child,
table.list td:first-child { padding-left: 5px; }
table.list th:last-child,
table.list td:last-child { padding-right: 5px; }
}
table.state th,
table.state td { padding-left: 20px; padding-right: 20px; }
table.info thead th { border-right-color: #333; }
table.info thead tr+tr th { border-top: 1px solid #333; }

dl.view dt { font-size: 1.67rem; color: #343275; }
dl.view dd.date { color: #999; margin-top: 1rem; }
dl.view dd.attached { margin-top: 1.2rem; }
dl.view dd.text { border: solid #e1e1e1; border-width: 1px 0; margin: 40px 0; padding: 50px 0; }
dl.view dd.text { text-align: initial !important; }
dl.view dd.text p { line-height:30px; }
/* 
dl.view dd.text:after { display:block; clear:both; content:""; }
*/
dl.view dd.text img { display: inline-block; margin: 0; }
dl.view dd.text.recruit { text-align: left; }


dl.view > dd > .image-style-side {float:right; }
dl.view > dd > .image-style-side.image_resized { text-align:right !important; width: 100%; }
dl.view > dd > figure.image {text-align:center;}
dl.view > dd > figure.image.image_resized { text-align:center; margin: 10 auto; }
dl.view > dd > figure.image.image_resized > img { max-width: 100%; min-width: 100%; }
dl.view > dd > figure.image-style-side.image_resized > img { max-width: 100%; min-width: 100%; }


th.gray,
td.gray { color: #999; }
td.bold { font-weight: 700; }

.hScroll { overflow: auto; }
*+.hScroll,
*+table { margin-top: 56px; }
header.table+.hScroll,
header.table+table { margin-top: 0; }

header.table { font-size: .89rem; line-height: 3em; }
header.table:after { content: ''; display: block; clear: both; }
header.table dl { float: left; color: #999; text-align: left; }
header.table dl.right { float: right; }
header.table dt,
header.table dd { display: inline-block; }
header.table dd { }
header.table dd:before { content: ': '; }

nav.chartTab { font-size: 0; text-align: center; margin-bottom: 70px; }
.leftCol nav.chartTab { text-align: left; }
nav.chartTab button { display: inline-block; vertical-align: top; min-width: 120px; height: 50px; font-size: 1rem; color: #999; position: relative; border: 1px solid #e1e1e1; text-align: center; padding-bottom: 1px; box-sizing: border-box; line-height: 27px; }
nav.chartTab button+button { margin-left: -1px; }
nav.chartTab button:hover,
nav.chartTab button:focus { background: #f9f9f9; color: #333; }
nav.chartTab button.on { color: #fff; background: #343275; border-color: #343275; z-index: 1; }
header.info { text-align: left; }
header.info:after { content: ''; display: block; clear: both; }
*+header.info { margin-top: 4.2rem; }
header.info h4 { float: left; margin-bottom: 0; }
header.info p.standard { float: right; font-size: 0.78rem; line-height: 1.2em; margin-top: 16px; }
header.info nav.tab { float: right; padding-top: 5px; font-size: 0; }
header.info nav.tab button { display: inline-block; vertical-align: top; min-width: 80px; height: 30px; font-size: .78rem; color: #999; position: relative; border: 1px solid #e1e1e1; text-align: center; padding-bottom: 1px; box-sizing: border-box; line-height: 27px; }
header.info nav.tab button+button { margin-left: -1px; }
header.info nav.tab button:hover,
header.info nav.tab button:focus { background: #f9f9f9; color: #333; }
header.info nav.tab button.on { color: #fff; background: #343275; font-weight: 700; border-color: #343275; z-index: 1; }

@media (max-width: 549px) {
    header.info h4 { float: none; text-align: center; }
    header.info p.standard { text-align: center; float: none; }
    header.info nav.tab { clear: both; float: none; margin-bottom: -30px; padding-top: 30px; text-align: center; }
}
@media (max-width: 419px) {
    header.table dl { line-height: 1em; margin-bottom: .8em; }
    header.table dl+dl.right { float: none; clear: both; }
}

/* main */
.main .visual { background: url('/common/images/main/visual.png') center no-repeat; background-size: 100%; background-size: cover; height: 540px; position: relative; padding-top: 0; }
.main .visual .slogan { text-align: center; padding-top: 110px; }
.main .visual .slogan * { text-indent: -999px; overflow: hidden; }
.main .visual .slogan strong { display: inline-block; width: 200px; height: 123px; background: url('/common/images/main/slogan-strong.png') center no-repeat; margin: 0 20px; vertical-align: top; }
.main .visual .slogan.fo strong { width: 215px; height: 69px; background: url('/common/images/main/slogan-strong-fo.png') center top no-repeat; margin: 0 5px;}
.main .visual .slogan span { display: inline-block; width: 90%; max-width: 471px; height: 140px; background: url('/common/images/main/slogan-text.png') center top no-repeat; vertical-align: top; background-size: 100% auto; margin: 4px 20px 0; }
.main .visual .slogan.fo span { width: 90%;  max-width: 488px; height: 69px; background: url('/common/images/main/slogan-text-fo.png') center top no-repeat; background-size: 100% auto; }
.main .visual .state { position: absolute; bottom: 0; left: 0; right: 0; background: #000; background: rgba(0,0,0,.8); color: #fff; font-weight: 700; font-family: 'Nunito Sans', sans-serif; font-size: 0; line-height: 60px; height: 60px; white-space: nowrap; overflow: hidden; }
.main .visual .state li,
.main .visual .state dt,
.main .visual .state dd { display: inline-block; }
.main .visual .state dt,
.main .visual .state dd { font-size: 1.2rem; }
.main .visual .state dd { color: #fd0; }
.main .visual .state li { width: 300px; }
.main .visual .state li+li { margin-left: 50px; }
.main .visual .state dt { margin-right: 15px; padding-left: 8px; }
.main .visual .state dd.rate { margin-left: 15px; font-size: .9rem; }
.main .visual .state dd.rate.up { color: #ff7e7e; }
.main .visual .state dd.rate.down { color: #8ab4fb; }
.main .visual .state dd.rate.up:before { content: '▲ '; }
.main .visual .state dd.rate.down:before { content: '▼ '; }
.main .today header { float: left; background: url('/common/images/main/today-icon.png') 0 188px no-repeat; height: 300px; width: 210px; }
.main .today header h2 { font-size: 2.33rem; font-weight: 700; color: #ccc; line-height: 1.1em; padding-top: 35px; }
.main .today header h2 strong { color: #343275; }
.main .today header .date { font-size: 0.89rem; }
.main .today ul:after { content: ''; display: block; clear: both; }
.main .today li { float: left; width: 200px; }
.main .today li+li { margin-left: 30px; }
.main .today h3 { font-size: 1.33rem; line-height: 3.67rem; padding-top: 20px; font-weight: 300; margin-bottom: 0; color: inherit; }
.main .today h3 a { float: right; font-size: 14px; font-weight: 300; color: #333; }
.main .today dl { border: solid #333; border-width: 5px 0 1px 0; padding: 14px 10px; line-height: 2em; height: 145px; }
.main .today dl.ea3 { line-height: 2.71em; }
.main .today dl dt { float: left; }
.main .today dl dd { text-align: right; font-size: 1.11rem; font-weight: 700; }
.main .service { height: 540px; text-align: center; background: url('/common/images/main/service-bg.png') center no-repeat; background-size: 100%; background-size: cover; }
.main .service p { font-size: 1.11rem; padding-top: 90px; margin-bottom: 40px; }
.main .service p strong { font-weight: 900; color: #343275; font-size: 4rem; line-height: 1em; }
.main .service p strong .sign { font-weight: 200; }
.main .service ul { font-size: 0; }
.main .service li { display: inline-block; width: 200px; height: 200px; margin: 0 30px; }
.main .service a { display: block; position: relative; width: 100%; height: 100%; border-radius: 50%; background: #fff center 49px no-repeat; vertical-align: top; font-size: 1.33rem; line-height: 1em; box-sizing: border-box; padding-top: 135px; text-align: center; }
.main .service a:before { content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 50%; border: 0 solid #d6d6e3; transition: all .3s; }
.main .service a:hover:before,
.main .service a:focus:before { border: 5px solid #d6d6e3; }
.main .service li.fund a { background-image: url('/common/images/main/service-icon-1.png'); }
.main .service li.bond a { background-image: url('/common/images/main/service-icon-2.png'); }
.main .service li.exchange a { background-image: url('/common/images/main/service-icon-3.png'); }
.main .service li.derivation a { background-image: url('/common/images/main/service-icon-4.png'); }
.main .notice { height: 80px; line-height: 80px; overflow: hidden; }
.main .notice .wrap { padding-right: 83px; box-sizing: border-box; }
.main .notice h2 { font-weight: 700; float: left; width: 100px; height: 40px; line-height: 40px; color: #fff; font-size: 18px; font-weight: 700; border-radius: 20px; text-align: center; background: #ea9a40; margin-top: 20px; }
.main .notice ul { height: 100%; overflow: hidden; position: relative; margin-left: 150px; }
.main .notice li { position: absolute; left: 0; right: 0; transition: all .3s linear; top: 100%; background: #fff; }
.main .notice ul .on { top: 0; z-index: 2; }
.main .notice ul .prev { top: -100%; }
.main .notice ul .next { top: 100%; }
.main .notice ul.prev .next { z-index: 1; }
.main .notice ul.next .prev { z-index: 1; }
.main .notice a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.main .notice nav { position: absolute; right: 3px; top: 0; bottom: 0; font-size: 0; }
.main .notice nav button { width: 40px; height: 40px; position: relative; text-indent: -999px; overflow: hidden; vertical-align: middle; font-size: 1rem; }
.main .notice nav button:before { content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: solid #898989; border-width: 1px 1px 0 0; width: 13px; height: 13px; margin: auto; }
.main .notice nav button:hover:before,
.main .notice nav button:focus:before { border-color: #343275; }
.main .notice nav button.prev:before { transform: rotate(-135deg); }
.main .notice nav button.prev:active:before { left: -2px; }
.main .notice nav button.next:before { transform: rotate(45deg); }
.main .notice nav button.next:active:before { left: 2px; }
nav.sitemap { width: 100%; max-width: 1100px; margin: 0 auto; border-top: 5px solid #333; font-size: .89rem; text-align: center; font-size: 0; padding: 20px 0 45px; font-weight: 400; }
nav.sitemap ul:after { content: ''; display: block; clear: both; }
nav.sitemap li { display: inline-block; font-size: 1rem; vertical-align: top; line-height: 2.5em; }
nav.sitemap li+li { margin-left: 75px; }
nav.sitemap li li { font-size: .72rem; color: #666; display: block; line-height: 2em; }
nav.sitemap li li+li { margin: 0; }
nav.sitemap a:hover,
nav.sitemap a:focus { color: #fa0; }

.popup { position: absolute; box-shadow: 0 10px 10px rgba(0,0,0,.3); background: #fff; max-width: 90%; z-index: 98;  }
.popup article { text-align: center; background-size: cover; max-width: 100%; color: #000; font-size: 1rem; width: 360px; height: 400px; box-sizing: border-box; background-position: center; background-repeat: no-repeat; }
.popup article p { display: inline-block; vertical-align: middle; line-height: 1.5em; }
.popup article a { border: 1px solid #000; display: block; width: 140px; height: 40px; box-sizing: border-box; line-height: 38px; text-align: center; margin: 20px auto 0; }
.popup footer { height: 40px; line-height: 39px; background: #403f5a; color: #fff; font-size: .83rem; font-weight: 300; padding: 0 12px; }
.popup footer label { float: left; }
.popup footer label input[type=checkbox] { opacity: 0; position: absolute; }
.popup footer label input[type=checkbox]+i { width: 15px; height: 15px; display: inline-block; vertical-align: middle; box-sizing: border-box; border: 1px solid #fff; margin-bottom: 3px; margin-right: 2px; position: relative; transition: all .3s; }
.popup footer label input[type=checkbox]+i:before,
.popup footer label input[type=checkbox]+i:after { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; width: 1px; height: 0; background: #fff; transition: all .1s; }
.popup footer label input[type=checkbox]+i:before { transform: rotate(45deg); }
.popup footer label input[type=checkbox]+i:after { transform: rotate(-45deg); }
.popup footer label input[type=checkbox]:checked+i:before,
.popup footer label input[type=checkbox]:checked+i:after { height: 19px; }
.popup footer button.close { float: right; position: relative; padding-right: 23px; }
.popup footer button.close i { transition: all .3s; }
.popup footer button.close i:before,
.popup footer button.close i:after { content: ''; display: block; width: 1px; height: 15px; background: #fff; position: absolute; right: 7px; top: 0; bottom: 0; margin: auto 0; }
.popup footer button.close i:before { transform: rotate(45deg); }
.popup footer button.close i:after { transform: rotate(-45deg); }
.popup footer label input[type=checkbox]:hover+i,
.popup footer label input[type=checkbox]:focus+i,
.popup footer button.close:hover i,
.popup footer button.close:focus i,
.popup article a:hover,
.popup article a:focus  { opacity: .5; }

@media (max-width: 1200px) {
    .main .today { padding-bottom: 3rem; }
    .main .today header { float: none; height: auto; margin: 0 auto; padding-left: 80px; background-position: 0 30px; width: 140px}
    .main .today ul { width: 890px; margin: 0 auto; }
}
@media (max-width: 1080px) {
    nav.sitemap li+li { margin-left: 65px; }
}
@media (max-width: 1050px) {
    .main .service { height: 470px; }
    .main .service li { width: 160px; height: 160px; margin: 0 15px; }
    .main .service a { padding-top: 105px; background-position: center 34px; }
    .main .service a:hover,
    .main .service a:focus { padding-top: 100px; }
}
@media (max-width: 1023px) {
    nav.sitemap { display: none; }
}
@media (max-width: 1000px) {
    .main .today ul { width: 430px; }
    .main .today li:nth-child(3) { margin-left: 0; }
}
@media (max-width: 768px) {
    .main .visual { height: 480px; background-position: center top; background-size: auto 570px; }
    .main .visual .slogan { padding-top: 60px; }
    
    .main .service { height: auto; padding-bottom: 2rem; }
    .main .service p { padding-top: 3rem; }
    .main .service ul { width: 500px; line-height: 140px; margin: 0 auto; }
    
    .main .notice h2 { width: 75px; }
}
@media (max-width: 500px) {
    .main .today dl { height: auto; }
    .main .today dl.ea3 { line-height: 2em; }
    .main .today ul { width: 240px; }
    .main .today li { width: 100%; }
    .main .today li+li { margin-left: 0; }
    
    .main .service ul { width: auto; max-width: 400px; line-height: 120px; }
    .main .service p { font-size: .8rem; }
    .main .service p strong { font-size: 2.7rem; }
    .main .service li { width: 120px; height: 120px; }
    .main .service a { background-size: 40% auto; padding-top: 75px; background-position: center 30px; font-size: 1.1rem; }
    .main .service a:hover,
    .main .service a:focus { padding-top: 70px; }
}

/* sub */
.visual { height: 300px; background: center no-repeat; background-size: 100%; background-size: cover; color: #fff; text-align: center; padding-top: 123px; box-sizing: border-box; line-height: 177px; position: relative; }
.visual h2 { font-size: 2.67rem; line-height: 1.25em; position: absolute; left: 0; right: 0; top: 70px; font-weight: 100; }
.visual p { padding: 0 20px; line-height: 1.67em; display: inline-block; vertical-align: middle; width: 100%; box-sizing: border-box; font-size: 1.2em; }
nav.lnb { text-align: center; background: #000; color: #fff; height: 70px; line-height: 68px; overflow: auto; white-space: nowrap; font-size: 0; position: absolute; left: 0; right: 0; z-index: 98; }
nav.lnb a { font-size: 1.1rem; display: inline-block; height: 100%; padding: 0 25px; transition: background .3s; vertical-align: top; }
h3 { font-size: 2rem; margin-bottom: 1.7em; font-weight: 700; color: #343275; line-height: 1em; }
h3 .ruby { display: block; font-weight: 300; font-size: 1.67rem; line-height: 1.25em; }
h4 { font-size: 1.67rem; line-height: 2rem; color: #343275; font-weight: 400; margin-bottom: 55px; }
*+h4 { margin-top: 2.6em; }
main article { padding: 100px 0; text-align: center; margin: 0 auto; background: center no-repeat; }
main article:nth-child(2n+1) { background: #f9f9f9; }
main nav.lnb+article { margin-top: 70px; }
main nav.lnb~article { background-color: #fff; }
main nav.lnb~article:nth-child(2n) { background-color: #f9f9f9; }
/* 수정
main article p+p { margin-top: 1.67rem; }
*/
main article.blue { background: #343275; }
main article>* { width: 90%; margin-left: auto; margin-right: auto; max-width: 1100px; }
main nav.lnb { background: #343275; }
main nav.lnb a.on { color: #fcbf48; }
main nav.lnb a:hover,
main nav.lnb a:focus { background: #282660; }

.filter { margin-bottom: 60px; }
.filter:last-child { margin-bottom: 0; }
.filter table th,
.filter table td { vertical-align: top; line-height: 40px; font-size: 1rem; }
.filter table th { font-weight: 700; background: #eee; }
.filter table col.th { width: 13%; }
.filter table input,
.filter table select,
.filter table label { vertical-align: top; }
.filter table input._datepicker:first-child { margin-left: 0; }
.filter table label input._datepicker:first-child { margin-left: 7px; }
.filter button.search { background: #343275; width: 240px; height: 60px; text-align: center; margin-top: 2.22rem; color: #fff; }
.filter button.search:hover,
.filter button.search:active,
.filter button.search:focus { background: #24235e; }

.filter+section.graph { margin-top: 60px; width: 100%; z-index: 0; position: relative; }
.info+section.graph { z-index: 0; position: relative; width: 100%; margin-top: 30px; }

.keyword { max-width: 600px; border-bottom: 5px solid #333; margin-bottom: 60px; padding-bottom: 2px; text-align: left; position: relative; width: 80%; }
.keyword input { border: 0 none; height: 50px; line-height: 48px; padding-right: 60px; width: 100%; }
.keyword button.search { position: absolute; right: 0; top: 0; height: 50px; width: 50px; text-indent: -999px; overflow: hidden; }
.keyword button.search:before,
.keyword button.search:after { content: ''; display: block; position: absolute; transition: all .3s; }
.keyword button.search:before { width: 20px; height: 20px; border: 2px solid #333; border-radius: 50%; top: 14px; right: 11px; box-sizing: border-box; }
.keyword button.search:after { width: 2px; height: 8px; background: #333; transform: rotate(45deg); left: 16px; bottom: 14px; transform-origin: center bottom; }
.keyword button.search:hover:before,
.keyword button.search:focus:before { border-width: 4px; }
.keyword button.search:hover:after,
.keyword button.search:focus:after { width: 4px; }
.keyword button.search:active:before { border-color: #aaa; transition: none; }
.keyword button.search:active:after { background-color: #aaa; transition: none; }

ul.no li { text-indent: -16px; padding-left: 16px; }

a.file { overflow: hidden; display: inline-block; vertical-align: top; position: relative; padding-left: 37px; }
a.file:before { content: ''; display: block; position:absolute; left: 1px; width: 28px; bottom: 1px; top: 1px; transition: all .3s; }
.loaded a.file:before { background: #999; }
a.file:after { content: ''; display: block; position:absolute; left: 0; width: 30px; bottom: 0; top: 0; background: center no-repeat; }
a.file.pdf:after { background-image: url('/common/images/common/icon-pdf.png'); }
a.file.pdf:hover:before,
a.file.pdf:focus:before { background: #fa0; }
a.file.icon {text-indent: -999px; width: 30px; height: 30px; padding: 0; }

footer.function { margin-top: 40px; font-size: 0; }
footer.function:after { content: ''; display: block; clear: both; }
footer.function button { width: 46%; max-width: 240px; height: 60px; border: 1px solid #e1e1e1; background: #fff; float: left; text-align: center; font-size: 1rem; color: #999; padding-bottom: 1px; min-width: 120px; }
footer.function div button { width: 100%; }
footer.function .right { float: right; }
footer.function button:hover,
footer.function button:focus { background: #f9f9f9; color: #333; }
footer.function button:active { background: #e1e1e1; }
footer.function button.more { padding-right: 49px; position: relative; }
footer.function button.more strong { color: #eb7e03; }
footer.function button.more:before,
footer.function button.more:after { content: ''; display: block; position: absolute; width: 3px; height: 11px; border-radius: 1px; background: #aaa; transform-origin: center bottom; top: 0; bottom: 2px; margin: auto 0; }
footer.function button.more:before { transform: rotate(45deg); right: 33px; }
footer.function button.more:after { transform: rotate(-45deg); right: 31px; }
footer.function button.xls { border-color: #207245; color: #207245; }
footer.function button.xls:hover,
footer.function button.xls:focus { background: #207245 !important; color: #fff; }
footer.function button.xls:active { border-color: #185f38; background: #185f38 !important; }
footer.function .paging { float: left; white-space: nowrap; font-size: 0; letter-spacing: 0; }
footer.function .paging ol,
footer.function .paging li,
footer.function .paging button { display: inline-block; vertical-align: top; float: none; }
footer.function .paging ol { margin: 0 15px; }
footer.function .paging li { margin: 0 5px; }
footer.function .paging button { width: 40px; height: 40px; min-width: 0; font-size: 18px; color: #999; position: relative; }
footer.function .paging button,
main nav.lnb~article:nth-child(2n) footer.function .paging button { background: #fff; }
footer.function .paging button:hover,
footer.function .paging button:focus { border-color: #fa0; z-index: 1; }
footer.function .paging button[disabled] { opacity: .5; border-color: #e1e1e1; }
footer.function .paging>button { overflow: hidden; text-indent: -999px; }
footer.function .paging>button+button { margin-left: -1px; }
footer.function .paging>button:before,
footer.function .paging>button:after { content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 0; height: 0; margin: auto; border: 5px solid transparent; }
footer.function .paging>button.first:before,
footer.function .paging>button.first:after,
footer.function .paging>button.prev:before { border-right-color: #a3a3a3; }
footer.function .paging>button.first:before { right: 12px; }
footer.function .paging>button.first:after { left: 2px; }
footer.function .paging>button.prev:before { right: 6px; }
footer.function .paging>button.last:before,
footer.function .paging>button.last:after,
footer.function .paging>button.next:before { border-left-color: #a3a3a3; }
footer.function .paging>button.last:before { left: 12px; }
footer.function .paging>button.last:after { right: 2px; }
footer.function .paging>button.next:before { left: 6px; }
footer.function .paging .on button { border-color: #fa0; color: #fff; }
footer.function .paging .on button,
main nav.lnb~article:nth-child(2n) footer.function .paging .on button,
main nav.lnb~article:nth-child(2n+1) footer.function .paging .on button { background: #fa0; z-index: 2; }

main article:nth-child(2n+1) footer.function button { background: #f9f9f9; }
main nav.lnb~article:nth-child(2n+1) footer.function button { background: #fff; }
main nav.lnb~article:nth-child(2n) footer.function button { background: #f9f9f9; }
main article:nth-child(2n+1) footer.function button:hover,
main article:nth-child(2n+1) footer.function button:focus { background: #fff; }
main nav.lnb~article:nth-child(2n+1) footer.function button:hover,
main nav.lnb~article:nth-child(2n+1) footer.function button:focus { background: #f9f9f9; }
main nav.lnb~article:nth-child(2n) footer.function button:hover,
main nav.lnb~article:nth-child(2n) footer.function button:focus { background: #fff; }


nav.footer { background: #ddd; font-size: 0; font-weight: 400; color: #666; line-height: 50px; height: 50px; }
nav.footer .wrap { width: 90%; margin: 0 auto; max-width: 1100px; }
nav.footer a { font-size: .89rem; height: 50px; display: inline-block; vertical-align: top; padding: 0 14px; }
nav.footer a:first-child { margin-left: -14px; }
nav.footer a:hover,
nav.footer a:focus { background: #eee; }

div.multiCol { margin-top: 60px; }
div.multiCol:after { content: ''; display: block; clear: both; }
div.half { float: left; width: 50%; box-sizing: border-box; text-align: left; padding-right: 30px; }
div.half+div.half { padding-left: 30px; padding-right: 0; }
h5 { color: #343275; font-size: 1.33rem; line-height: 1em; margin-bottom: 1.67rem; font-weight: 400; }
img.mobile { display: none; }

@media (max-width: 1270px) {
    ul.category { max-width: 760px; }
    ul.category.ea2 li { width: 340px; }
    ul.category.ea2 .rw { display: inline; }
}
@media (max-width: 1180px) {
    main article .long .rw { display: inline; }
}
@media (max-width: 1023px) {
    main article .long2 .rw { display: inline; }
    nav.footer { display: none; height: 0; }
}
@media (max-width: 899px) {
    ul.category { width: 80%; }
    ul.category li { float: none; margin-left: auto; margin-right: auto; }
    ul.category.ea2 li { float: none; width: 100%; max-width: 500px; }
    ul.category.ea2 .rw { display: block; }
}
@media (max-width: 800px) {
    main article .rw { display: inline; }
    div.half { float: none; padding: 0; width: auto; }
    div.half+div.half { padding: 0; margin-top: 3.3rem; }
    footer.function .paging { float: none; margin-bottom: 20px; text-align: left;}
}
@media (max-width: 760px) {
    img.desktop { display: none; }
    img.mobile { display: block; }
}
@media (max-width: 580px) {
    .visual p { font-size: 1em; }
    ul.category.ea2 .rw { display: inline; }
}
@media (max-width: 490px) {
    footer.function .paging { text-align: center; }
    footer.function .paging ol { margin: 0 5px; }
    footer.function .paging li { margin: 0; }
    footer.function .paging li+li { margin-left: -1px; }
}
@media (max-width: 410px) {
    footer.function .paging button { width: 30px; height: 30px; font-size: 14px; line-height: 27px; }
}
@media (max-width: 400px) {
    footer.function button { width: auto; padding: 0 10px; }
    footer.function button.more { padding-right: 35px; padding-left: 10px; }
    footer.function button.more:before { right: 21px; }
    footer.function button.more:after { right: 19px; }
}

/* rate */
.rate .visual { background-image: url('/common/images/rate/visual.png'); }
.rate .rate { white-space: nowrap}
.rate .rate.up { color: #e21000; }
.rate .rate.down { color: #205bbd; }
.rate .rate.up:before { content: '▲ '; font-size: .6em; margin-right: 3px; position: relative; top: -2px; }
.rate .rate.down:before { content: '▼ '; font-size: .6em; margin-right: 3px; position: relative; top: -2px; }
@media (max-width: 550px) {
    .rate .visual .rw { display: inline; }
}
@media (max-width: 680px) {
    .rate .filter table,
    .rate .filter table th,
    .rate .filter table td { display: block; height: auto; }
    .rate .filter table th { line-height: 20px; border-right: 0; }
    .rate .filter table td { border-right: 0; }
    .rate .filter table thead+tbody tr td,
    .rate .filter table tbody+tbody tr td { border-top: 0 none; }
}
    /* rate exchange */
.rate.exchange .hScroll table.list { min-width: 800px; }
.rate.exchange col.date { width: 15%; }
.rate.exchange col.rate { width: 12%; }
.rate.exchange col.total { width: 140px; }
@media (max-width: 800px) {
    .rate.exchange col.date { width: 110px; }
    .rate.exchange col.total { width: 130px; }
}
@media (max-width: 680px) {
    .rate.exchange .filter th { float: left; line-height: 40px; margin-right: 10px; }
    .rate.exchange .filter td+th,
    .rate.exchange .filter td+th+td { border-top: 1px solid #333; }
    .rate.exchange .filter tbody+tbody th { float: none; }
}
    /* rate financial */
.rate.financial .hScroll table.list { min-width: 360px; }
@media (max-width: 680px) {
    .rate.financial .filter th { float: left; line-height: 40px; margin-right: 10px; }
}
    /* rate call */
.rate.call .hScroll table.list { min-width: 360px; }
@media (max-width: 480px) {
    .rate.call col.date { width: 120px; }
}
    /* rate repo */
.rate.repo .hScroll table.list { min-width: 360px; }
@media (max-width: 480px) {
    .rate.repo col.date { width: 120px; }
}
    /* rate repo */
.rate.bond .hScroll table.list { min-width: 360px; }
@media (max-width: 480px) {
    .rate.bond col.date { width: 120px; }
}
    /* rate swap */
.rate.swap .byDate .hScroll table.list { min-width: 480px; }
.rate.swap .byTerm .hScroll table.list { min-width: 440px; }
@media (max-width: 600px) {
    .rate.swap .byTerm col.date { width: 120px; }
}

/* trendi */
.trendi .visual { background-image: url('/common/images/trendi/visual.png'); }
.trendi col.no { width: 96px; }
.trendi col.attached { width: 80px; }
.trendi col.date { width: 156px; }
@media (max-width: 600px) {
    .trendi .visual .rw { display: inline; }
    .trendi col.no { width: 50px; }
    .trendi col.attached { width: 40px; }
    .trendi col.date { width: 100px; }
}

/* market */
ul.circle { font-size: 0; margin-top: 50px; }
ul.circle li { display: inline-block; vertical-align: middle; width: 150px; height: 150px; border-radius: 50%; background: #343275; margin: 10px; font-size: 1rem; color: #fff; box-sizing: border-box; line-height: 144px; }
ul.circle span { display: inline-block; vertical-align: middle; line-height: 1.67em; position: relative; width: 70%; }
ul.circle .ruby { color: #8e8cc9; font-size: 0.8em; display: block; line-height: 1em; position: absolute; left: 0; right: 0; bottom: -1em; width: 100%; }
ul.circle .ruby.row2 { bottom: -2em; }
.market .hScroll table { min-width: 580px; }
.market col.type { width: 150px; }
.market col.note { width: 210px; }
.market col.hTh { width: 220px; }
.market th,
.market td { height: 30px; line-height: 30px; padding-left: 20px; padding-right: 20px; }
.info article.more,
.market article.more { padding: 40px 0; }
.info article.more,
.market article.more { font-size: 0; }
.info article.more li,
.market article.more li { font-size: 1.11rem; color: #fff; background: #343275; width: 360px; height: 60px; display: inline-block; vertical-align: top; }
.info article.more li+li,
.market article.more li+li { margin-left: 10px; }
.info article.more a,
.market article.more a { display: block; width: 100%; height: 100%; line-height: 58px; box-sizing: border-box; text-align: left; padding-left: 30px; position: relative; transition: background .3s, color .3s; border: 1px solid #fff; transition: all .3s; }
.info article.more a:after,
.market article.more a:after { content: ''; display: block; position: absolute; top: 0; bottom: 0; right: 34px; width: 12px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; margin: auto 0; transform: rotate(-45deg); transition: border .3s; }
.info .more a:hover,
.info .more a:focus,
.info .more a:active,
.market .more a:hover,
.market .more a:focus,
.market .more a:active { background: #47439b; color: #fa0; border-color: #fa0; }
.info .more a:hover:after,
.info .more a:focus:after,
.info .more a:active:after,
.market .more a:hover:after,
.market .more a:focus:after,
.market .more a:active:after { border-color: #fa0; }
@media (max-width: 1230px) {
    .info article.more li,
    .market article.more li { width: 32%; }
}
@media (max-width: 1130px) {
    ul.circle.ea6 { width: 600px; }
}
@media (max-width: 949px) {
    ul.circle.ea5 { width: 600px; }
}
@media (max-width: 769px) {
    ul.circle.ea4 { width: 420px; }
}
@media (max-width: 760px) and (min-width: 631px) {
    .info article.more li,
    .market article.more li { width: 31%; height: auto; }
    .info article.more li+li,
    .market article.more li+li { margin-left: 2%; }
    .info article.more li a,
    .market article.more li a { padding: .5rem 2rem .5rem 1rem; line-height: 2.25rem; }
    .info article.more li a:after,
    .market article.more li a:after { right: 1.2rem; }
}
@media (max-width: 649px) {
    .market.money .visual .rw { display: inline; }
    ul.circle.ea5 { width: auto; }
    ul.circle.ea5 li:nth-child(3) { display: block; margin: -10px auto; }
    .market col.type { width: 110px; }
    .market col.note { width: 180px; }
    .market col.hTh { width: 160px; }
}
@media (max-width: 630px) {
    .info article.more li,
    .market article.more li { width: 100%; max-width: 320px; display: block; margin: 0 auto; }
    .info article.more li+li,
    .market article.more li+li { margin-left: auto; margin-top: 10px; }
    ul.circle.ea6 { width: auto; }
}
@media (max-width: 439px) {
    ul.circle { width: auto; }
    .market ul.circle.ea4 { width: 280px; }
    ul.circle li { width: 120px; height: 120px; line-height: 112px; font-size: 1rem; }
    ul.circle .ruby { font-size: .8rem; }
}
    /* market money */
.market.money .visual { background-image: url('/common/images/introduce/money-visual.png'); }
    /* market bond */
.market.bond .visual { background-image: url('/common/images/introduce/bond-visual.png'); }
@media (max-width: 659px) {
    .market.bond .visual .rw { display: inline; }
}
    /* market repo */
.market.repo .visual { background-image: url('/common/images/introduce/repo-visual.png'); }
@media (max-width: 439px) {
    .repo .visual .rw { display: inline; }
}

/* company */
.company .visual { background-image: url('/common/images/introduce/company-visual.png'); }
.company .between { position: absolute; left: 0; right: 0; max-width: 1100px; width: 100%; padding: 37px 0; background: center no-repeat; background-size: cover; font-size: 1.33rem; color: #fff; line-height: 1.45em; }
.company p.between { padding: 49px 0; }
.company .between strong { color: #fa0; }
.company .between.slogan { background-image: url('/common/images/introduce/company-slogan-bg.png'); }
.company .between.slogan dt { font-size: 1.67rem; font-weight: 400; color: #fa0; line-height: 1.2em; }
.company .between.slogan dd { margin-top: 1em; }
.company .sign,
.company .object { margin-bottom: 100px; }
.company .sign { margin-top: 3.33rem; line-height: 2.67rem; }
.company .sign dd { font-family: 'nanum myeongjo', serif; font-size: 1.67rem; font-weight: 700; }
.company article.overview { background-image: url('/common/images/introduce/company-overview-bg.png'); background-position: left 134px; }
.company article.overview h3,
.company article.history h3 { margin-top: 100px; }
.company p.vision { color: #fa0; font-size: 2.67rem; font-family: 'nanum myeongjo', serif; line-height: 1.2em; }
.company p.vision+p { margin-top: 1.67rem; }
.company .between.since { background-image: url('/common/images/introduce/company-since-bg.png'); }
.company ul.category.object { position: relative; }
.company ul.category.object:before { content: ''; display: block; position: absolute; right: 171px; top: 121px; left: 171px; bottom: 161px; border: 9px solid #f2f2f2; outline: 1px solid #343275; background: url('/common/images/introduce/company-object-logo.png') center no-repeat; }
.company ul.category.object li { float: left; }
.company ul.category.object li:nth-child(2n) { float: right; }
.company ul.category.object li:nth-child(2)+li { clear: both; }
.company ul.category.object li:nth-child(2)~li { margin-top: 180px; }
.company article.history { background-image: url('/common/images/introduce/company-history-bg.png'); background-position: right bottom; }
.company article.history table { border-top-width: 1px; }
.company article.history col.year { width: 115px; }
.company article.history th,
.company article.history td { vertical-align: top; }
.company article.history th { font-weight: 700; font-size: 1.33rem; padding: 30px; }
.company article.history td { padding: 31px; }
.company article.history dt { float: left; width: 125px; font-weight: 400; }
.company article.history dd { overflow: hidden; text-align: left; }
.company article.financial { background-image: url('/common/images/introduce/company-financial-bg.png'); background-position: center 103px; background-size: 100% auto; }
.company article.financial table { min-width: 600px; }
.company article.financial col.subject1 { width: 15.5%; }
.company article.financial col.subject2 { width: 21%; }
.company article.financial col.subject3 { width: 31.5%; }
.contact { margin-top: 60px; padding-left: 390px; text-align: left; box-sizing: border-box; background: url('/common/images/introduce/company-map-logo.png') left top no-repeat; position: relative; }
.contact dt { width: 123px; float: left; font-weight: 400; }
.contact dd { overflow: hidden; }
.contact .office { position: absolute; left: 0; top: 0; font-weight: 700; color: #343275; font-size: 2rem; letter-spacing: 0; white-space: nowrap; line-height: 1em; }

@media (max-width: 1920px) {
    .company article.financial { background-size: auto; }
}
@media (max-width: 1800px) {
    .company article.history { background-size: 40% auto; }
    .company article.overview { background-size: 40% auto; }
}
@media (max-width: 1269px) {
    .company article.overview { background-position: left 550px; }
}
@media (max-width: 1100px) {
    .company .between { position: static; padding-left: 2.5%; padding-right: 2.5%; box-sizing: border-box; }
    .company .sign,
    .company .object { margin-bottom: 100px; }
    .company article.greeting,
    .company article.vision { padding-bottom: 0; }
    .company article.overview h3,
    .company article.history h3 { margin-top: 0; }
}
@media (max-width: 899px) {
    .company ul.category.object li { clear: both; }
    .company ul.category.object li:nth-child(2) { margin-bottom: 0; }
    .company ul.category.object li:nth-child(2)~li { margin-top: 0; }
    .company ul.category.object li:nth-child(2)~li:nth-child(3) { margin-top: 200px; }
    .company ul.category.object:before { left: 15%; right: 15%; background-size: 140px; top: 126px; }
}
@media (max-width: 890px) {
    .contact { padding-left: 0; padding-top: 60px; background-size: auto 40px; }
    .contact dt { width: 80px; }
    .contact .office { position: static; float: none; width: auto; margin-bottom: 1rem; }
    .company article.financial col.subject1 { width: 100px; }
    .company article.financial col.subject2 { width: 160px; }
    .company article.financial col.subject3 { width: 220px; }
    .company article.history dt { text-align: left; width: 100px; }
}
@media (max-width: 600px) {
    .company p.vision { font-size: 2.3rem; }
    .company article.history { padding-bottom: 160px; background-size: 300px auto; }
    .company article.history table,
    .company article.history tbody,
    .company article.history th,
    .company article.history td { display: block; height: auto; text-align: left; }
    .company article.history td { padding-top: 0; border-top: 0 none; }
    .company article.history dt { width: 80px; padding-left: 4px; }
}
@media (max-width: 490px) {
    .company .visual .rw { display: inline; }
    .company ul.category.object:before { top: 156px; }
    .company ul.category.object li,
    .company ul.category.object li:nth-child(2n) { float: none; }
    
}

/* info */
.info .visual { background-image: url('/common/images/infoservice/visual.png'); }
.info col.date { width: 140px; }
.info .multicol:after { content: ''; display: block; clear: both; }
.info .leftCol { float: left; max-width: 780px; }
.info table { min-width: 500px; }
.info aside.link { overflow: hidden; padding-left: 40px; }
.info aside.link a { display: block; width: 100%; height: 100%; line-height: 58px; box-sizing: border-box; text-align: left; padding-left: 30px; position: relative; transition: background .3s, color .3s; border: 1px solid #343275; transition: all .3s; color: #343275; font-size: 1rem; }
.info aside.link a:after { content: ''; display: block; position: absolute; top: 0; bottom: 0; right: 34px; width: 12px; height: 12px; border: solid #343275; border-width: 0 2px 2px 0; margin: auto 0; transform: rotate(-45deg); transition: border .3s; }
.info aside.link a+a { margin-top: 20px; }
.info aside.link a:hover,
.info aside.link a:focus,
.info aside.link a:active { background: #47439b; color: #fa0; border-color: #47439b; }
.info aside.link a:hover:after,
.info aside.link a:focus:after,
.info aside.link a:active:after { border-color: #fa0; }

.info.bond table { min-width: 690px; }

@media (max-width: 1149px) {
    .info .leftCol { float: none; margin: 0 auto; }
    .info aside.link { max-width: 780px; margin: 100px auto 0; padding: 0; white-space: nowrap; font-size: 0; }
    .info aside.link a { display: inline-block; vertical-align: top; width: calc((100% - 40px) / 3); box-sizing: border-box; max-width: 320px; }
    .info aside.link.ea2 a { width: calc((100% - 20px) / 2); }
    .info aside.link a+a { margin-top: 0; margin-left: 20px; }
}
@media (max-width: 715px) {
    .info aside.link a { display: block; margin: 0 auto; width: 100%; max-width: 320px; }
    .info aside.link.ea2 a { width: auto; }
    .info aside.link a+a { margin-top: 20px; margin-left: auto; }
}
@media (max-width: 550px) {
    .info .visual .rw { display: inline; }
    .info col.date { width: 120px; }
}

/* customer */
.customer .visual { background-image: url('/common/images/customer/customer-visual.png'); }
.customer col.no { width: 96px; }
.customer col.attached { width: 80px; }
.customer col.date { width: 156px; }
@media (max-width: 600px) {
    .customer .visual .rw { display: inline; }
    .customer col.no { width: 50px; }
    .customer col.attached { width: 40px; }
    .customer col.date { width: 100px; }
}

.recruit .visual { background-image: url('/common/images/customer/recruit-visual.png'); }
.recruit col.no { width: 96px; }
.recruit col.attached { width: 80px; }
.recruit col.date { width: 156px; }
@media (max-width: 600px) {
    .recruit .visual .rw { display: inline; }
    .recruit col.no { width: 50px; }
    .recruit col.attached { width: 40px; }
    .recruit col.date { width: 100px; }
}

/* guide */
.guide .visual { background-image: url('/common/images/customer/guide-visual.png'); }
.guide article { text-align: left; }
.guide article h3 { text-align: center; }
.guide col.th { width: 220px; }
.guide article *+p { margin-top: 1.67rem; }
.guide p strong { font-weight: 700; margin-right: 1em; }
.guide ul li { margin-top: 1em; }
.guide ul li li { margin-top: 0; }
.guide ul.no>li { text-indent: -.9em; padding-left: .9em; }
.guide ul.han>li { text-indent: -1.3em; padding-left: 1.3em; }
.guide ul.circleNo>li { text-indent: -1.08em; padding-left: 1.08em; }
.guide table { min-width: 500px; }

.guide.relativeSite article { text-align: center; }
.guide.relativeSite ul { margin-bottom: 1rem; letter-spacing: 0; }
.guide.relativeSite ul:after { content: ''; display: block; clear: both; }
.guide.relativeSite li { float: left; width: 340px; height: 80px; margin: 0 40px 40px 0; }
.guide.relativeSite li:nth-child(3n) { margin-right: 0; }
.guide.relativeSite li a { display: block; box-sizing: border-box; width: 100%; height: 100%; border: 1px solid #ccc; text-align: center; line-height: 78px; font-size: 1rem; }
.guide.relativeSite li a span { display: inline-block; vertical-align: middle; line-height: 1.4em; margin-bottom: .4em; }
.guide.relativeSite li a:hover,
.guide.relativeSite li a:focus { color: #fff; background: #343275; border-color: #343275; }

.guide ul.sitemap { max-width: 1140px; width: 100%; font-size: 0; text-align: center; }
.guide ul.sitemap:after { content: ''; display: block; clear: both; }
.guide ul.sitemap li { display: inline-block; vertical-align: top; width: 150px; margin: 0 20px 40px 20px; text-align: center; font-size: 1rem; }
.guide ul.sitemap li header { background: #343275; font-weight: 700; color: #fff; line-height: 60px; }
.guide ul.sitemap li ul { border: 1px solid #ccc; border-top: 0 none; padding: .7rem 0 .9rem; }
.guide ul.sitemap li li { display: block; width: auto; margin: 0; }
.guide ul.sitemap a { display: block; text-align: center; font-size: .89rem; font-weight: 300; }
.guide ul.sitemap a:hover,
.guide ul.sitemap a:focus { background: #f0f0f0; }

@media (max-width: 1229px) {
    .guide.relativeSite ul { width: 720px; }
    .guide.relativeSite li:nth-child(3n) { margin-right: 40px; }
    .guide.relativeSite li:nth-child(2n) { margin-right: 0; }
}
@media (max-width: 1100px) {
    .main .notice h2 { margin-left: 10px; }
}
@media (max-width: 749px) {
    .guide.relativeSite ul { width: 340px; max-width: 90%; }
    .guide.relativeSite li,
    .guide.relativeSite li:nth-child(3n) { margin-right: 0; }
    .guide.relativeSite li,
    .guide.relativeSite li a { max-width: 100%; }
}
@media (max-width: 600px) {
    .guide col.th { width: 140px; }
    .guide .visual .rw { display: inline; }
}
@media (max-width: 389px) {
    .guide ul.sitemap li { width: 140px; margin-left: 5px; margin-right: 5px; }
}

/* global market */
.global .visual { background-image: url('/common/images/introduce/global-visual.png'); }
.global .contact { background: none; }
.global .contact dd { letter-spacing: 0; }

@media (max-width: 890px) {
    .global .contact { padding-top: 0; }
}
@media (max-width: 864px) {
    .global .beijing .rw { display: inline; }
}
@media (max-width: 559px) {
    .global .visual .rw { display: inline; }
}

/* graph */
.graph header:after { content: ''; display: block; clear: both; }
.graph header dl.unit { color: #999; font-size: .89rem; line-height: 3em;}
.graph header dl.unit.left { float: left; }
.graph header dl.unit.right { float: right; }
.graph header dl.unit dt,
.graph header dl.unit dd { display: inline-block; }
.graph header dl.unit dt:after { content: ' : '; }
.tui-chart .tui-chart-tooltip-area .tui-chart-tooltip .tui-chart-default-tooltip.tui-chart-group-tooltip>.tui-chart-tooltip-head { line-height: 1.6em; letter-spacing: 0; padding-top: 10px}
.tui-chart .tui-chart-tooltip-area .tui-chart-tooltip .tui-chart-default-tooltip.tui-chart-group-tooltip>.tui-chart-tooltip-body { table-layout: auto; margin-top: 0; border: 0 none; }
.tui-chart .tui-chart-tooltip-area .tui-chart-tooltip .tui-chart-default-tooltip.tui-chart-group-tooltip>.tui-chart-tooltip-body th,
.tui-chart .tui-chart-tooltip-area .tui-chart-tooltip .tui-chart-default-tooltip.tui-chart-group-tooltip>.tui-chart-tooltip-body td { border: 0 none; padding: 5px 0; height: auto; font-weight: 400; letter-spacing: 0; line-height: 1em; }
.tui-chart .tui-chart-chartExportMenu-area ul { line-height: 0; }
.tui-chart .tui-chart-chartExportMenu-area ul>li.tui-chart-chartExportMenu-head { line-height: 1em; }
.tui-chart .tui-chart-chartExportMenu-area ul>li.tui-chart-chartExportMenu-body>li { line-height: 1em; }
.tui-chart .tui-chart-tooltip-area .tui-chart-tooltip .tui-chart-default-tooltip.tui-chart-group-tooltip .tui-chart-legend-rect { top: -3px; }
main article:nth-child(2n+1) .graph>div>svg>rect:first-child { fill: #f9f9f9; }
main nav.lnb~article:nth-child(2n+1) .graph>div>svg>rect:first-child { fill: #fff; }
main nav.lnb~article:nth-child(2n) .graph>div>svg>rect:first-child { fill: #f9f9f9; }
.graph text { font-weight: 400 !important; letter-spacing: 0; }
.info .graph table,
.info.bond .graph table { min-width: 0; }

/* 210728 */
.hScroll.list { max-width: 1100px; }
.hScroll.list > ul { margin-bottom: 25px; clear: both; }
.hScroll.list > ul > li { float: left !important; margin: 0 25px 25px 0; max-width: 341px; }
.gallery { font-weight: 900 !important; padding: 25px 0 15px 0; text-align: left; }
.gray { color: #999 !important; text-align: left; font-size: 16px !important; }

/*210811*/
.dd.text ul, dd.text ul > li { list-style: disc !important; }
.dd.text ol, dd.text ol > li { list-style: decimal !important; }
.hScroll.list > ul > li > a > img { height: 226px; }
.hScroll.list > ul > li { text-align: left; }
.gallery { height: 50px; overflow: hidden; }