@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Lato');
@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css);
/* CSS Document */
html {font-size: 62.5%;}
body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button, input, select, textarea{
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 1.4rem;
    font-family: 'Open Sans', sans-serif;
    vertical-align: baseline;
    box-sizing: border-box;
    text-decoration: none;
    color: #666;
    list-style: none;
    background: none;
    line-height: 1;
    outline: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a, span {display: inline-block;}
p, span {line-height: 1.4;}
button {cursor: pointer;}
button:focus, button:active, input:focus {outline: none;}
label {cursor: pointer;}
legend {display: none;}
/*main*/
.wrap { overflow: hidden; position: relative; }
.header_wrap {width: 100%; z-index: 999; border-bottom: 1px solid rgba(255, 255, 255, .2);}
.header_wrap .header { position:relative; max-width: 1200px; margin:0 auto; overflow: hidden; height: 90px;}
.header_wrap .header h1 {position:absolute; top:20px; left: 0; z-index: 9;} 
.header_wrap .header .btn {position:absolute; top:27px; right: 0; z-index: 9;} 
.header_wrap .header .btn a{font-size: 17px; font-weight: 500; letter-spacing: -0.5px; display: inline-block; background: #003366; color: #fff; padding: 12px 30px;} 

.header_wrap .header .nav_box {position: absolute; top:0px; left: 0; padding-left: 220px; width: 100%; }
.header_wrap .header .nav_box li {float: left; width: 15%; }
.header_wrap .header .nav_box li a {font-size: 1.8rem; color: #333; letter-spacing: -0.5px; font-weight: bold; height: 90px; line-height: 90px; display: block; text-align: center; }
.header_wrap .header .nav_box li a:hover {color:#be1e2d;}
.header_wrap .header .nav_box li a.on {color:#be1e2d;}
.header_wrap .nav_drop_wrap { background:#663200; display: none; width: 100%; position: absolute; top:90px; z-index: 99; }
.header_wrap .nav_drop_wrap .nav_drop {max-width: 1200px; margin:0 auto; overflow: hidden; padding:20px 0 20px 220px;} 
.header_wrap .nav_drop_wrap .nav_drop ul {float: left; width: 15%;}
.header_wrap .nav_drop_wrap .nav_drop ul li a {padding:15px 0; color: #fff; display: block; text-align: center; font-size: 1.5rem;}
.header_wrap .nav_drop_wrap .nav_drop ul li a:hover {color: #fff; font-weight: bold;}
.header_wrap .header_link {position:absolute; top:30px; right: 0; height: 35px; margin:0 auto; text-align: right; overflow: hidden; z-index: 1}
.header_wrap .header_link > a { color: #999; height: 35px; line-height: 33px; padding:0 1.5rem; border:1px solid #ddd; float: left;}
.header_wrap .header_link > a:last-child { vertical-align: middle; border-left: 0;}

.mobile_gnb {display: none;}
.mobile_gnb_open_btn {position: absolute; top:40px; right: 20px;}
.mobile_gnb_list {position: absolute; top:0px; left: 100%; width: 100%; background: #663300; z-index: 99999; 
-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    overflow-y: auto;
}
.mobile_gnb_list .gnb_area {margin:30px; margin-top: 50px;}
.mobile_gnb_list .gnb_area a {display: block; padding:20px 0; color: #fff; }
.mobile_gnb_close_btn { position: absolute; top:20px; right: 20px; }
.mobile_gnb_list .gnb_area .oneD {border-bottom: 1px solid #572c00; font-size: 15px;}
.mobile_gnb_list .gnb_area .oneD.on {font-weight: bold;}
.mobile_gnb_list .gnb_area .nodep {border-bottom: 1px solid #572c00; font-size: 15px;}
.mobile_gnb_list .gnb_area .twoD {display: none; border-bottom: 1px solid #572c00; padding: 15px 0;}
.mobile_gnb_list .gnb_area .twoD a {padding:7px 0; font-size: 13px; padding-left: 10px;}

/* 탭설정 */
.tabsContainer{overflow:hidden;}
.tabs-nav{overflow:hidden;}
.tabs-nav li {display: inline-block;}
.tabs-nav li a {display: block;}
.tabs-content {overflow:hidden;}
.tabs-content .tabs{overflow:hidden; display:none; }
.tabs-content .tabs.active{display:block;}


/*메인비주얼*/
.main_visual_wrap {width: 100%;}
.main_visual_wrap .item {background: url('../images/main_visual1.jpg') no-repeat 0 0;}
.main_visual_wrap .inner { max-width: 1200px; margin:0 auto; position: relative;}
.main_visual_wrap .inner strong {font-size:7rem; color:#a9a392; line-height: 1.2; font-weight: lighter; color: #fff; font-family: 'Roboto', sans-serif; }
.main_visual_wrap .inner strong:after {content: ''; display: block; width: 70px; border-bottom: 1px solid #fff; margin-top: 2rem;}
.main_visual_wrap .inner p {font-size:3.5rem; color: #fff; margin:30px 0 5%; font-weight: lighter; letter-spacing: -2px;}
.main_visual_wrap .inner span {font-size: 6rem; color: #31475b; font-family: 'Roboto', sans-serif; font-weight: 100; text-transform: uppercase;}
.main_visual_wrap .rate {position: absolute; bottom:14%; left: 4%; right:0; margin:0 auto; }
.main_visual_wrap .rate span {font-size: 10rem; color: #ff3300; font-weight: bold; font-family: 'Lato', sans-serif; }
.main_visual_wrap .rate span.per {display: inline-block; font-size:7rem; line-height: 2.1; vertical-align: top; margin-left: 8px;}
.main_visual_wrap .rate span.per:after {content: '~'; display: inline-block; font-size:7rem; margin-left: 5px; vertical-align: top; line-height: 1.9;}
.main_visual_wrap .notice_pop {position: absolute; right: 10px; bottom:20px; width: 250px; border:1px solid #000; z-index: 99;}
.main_visual_wrap .notice_pop.on {display: none;}
.main_visual_wrap .notice_pop .tit {background: #000; color: #fff; font-size: 1.5rem; text-align: center; padding:7px 0;}
.main_visual_wrap .notice_pop .txt {padding:10px; font-size: 1.4rem; height: 250px; overflow-y: scroll; line-height: 1.3; letter-spacing: -1px; background: url('../images/notice_bg.jpg') no-repeat 0 0; background-size: cover; color: #000;}
.main_visual_wrap .notice_pop .close_box {background: #eee; padding:7px; text-align: right;}
.main_visual_wrap .notice_pop .close_box a {width: 50px; text-align: center; padding:5px 0; background: #ccc; font-size: 13px; color: #000; font-weight: bold;}

/*메인컨텐츠*/
.main_content  {overflow: hidden;}
.main_content .inquiry_box {background: #003366; padding:4rem 0; overflow: hidden;}
.main_content .inquiry_box form {max-width: 1180px; margin:0 auto; }
.main_content .inquiry_box .tit { font-size: 2.6rem; color: #feba12; font-weight: bold; font-family: 'NanumSquare', sans-serif; float: left; vertical-align: middle; width: 17%; line-height: 40px; height: 40px;}
.main_content .inquiry_box .form {float: left; vertical-align: middle; width:58%; color: #fff; border-left: 1px dotted #fff; padding-left: 3%;}
.main_content .inquiry_box .form span {color: #fff; width: 7%;}
.main_content .inquiry_box .form span.wid_s {width: 15%;}
.main_content .inquiry_box .form span.wid_m {width: 30%;}
.main_content .inquiry_box .form input[type=text] { border:0; background: #fff; height: 40px; box-shadow: border-box; width: 85%; padding:0 10px;}
.main_content .inquiry_box .form select {border:0; background: #fff; height: 40px; width: 85%;}
.main_content .inquiry_box .btn {float: left; width: 25%;}
.main_content .inquiry_box .btn .confirm_btn {display: block; width: 100%; background: #feba12; color: #333333; height: 40px; line-height: 40px; text-align: center;padding:0 10px; padding:0 10px; font-size: 2rem; font-weight: bold; letter-spacing: -1px; font-family: 'NanumSquare', sans-serif; margin-bottom: 10px;}
.main_content .inquiry_box .btn span {color: #fff; letter-spacing: -1px; }
.main_content .inquiry_box .btn span .more_btn {color: #ffcc00; margin-left: 10px;}

.main_content {}
.main_content .banner_box {overflow: hidden; max-width: 1200px; margin:5rem auto; display: table;}
.main_content .banner_box > div {width: 33.3%; display: table-cell; vertical-align: top; position: relative;}
.main_content .banner_box > div button {display: block;}
.main_content .banner_box .bn1 img {width: 100%;}
.main_content .banner_box .bn2 img {width: 100%;}
.main_content .banner_box .deposit_rate {background: #f4f4f4; padding:4rem;}
.main_content .banner_box .deposit_rate h3 {font-size: 2.5rem; color: #282828; margin-bottom: 20px; letter-spacing: -1.5px;}
.main_content .banner_box .deposit_rate > table {width: 100%; border:1px solid #ddd;}
.main_content .banner_box .deposit_rate > table tr td {border:1px solid #ddd; border-collapse: collapse; background: #f2f2f2; padding:15px;}
.main_content .banner_box .deposit_rate > table tr:nth-child(1) td:nth-child(2) {background: #e6e6e6;}
.main_content .banner_box .deposit_rate > table tr:nth-child(2) td:nth-child(1) {background: #e6e6e6;}
.main_content .banner_box .deposit_rate > table tr td span {display: block; color: #666;}
.main_content .banner_box .deposit_rate > table tr td span:first-child {font-size: 1.7rem; color: #000; font-family: 'NanumSquare', sans-serif; }
.main_content .banner_box .deposit_rate > table tr td span:last-child {font-size: 3rem; color: #ff3333; font-weight: bold; text-align: right;}
.main_content .banner_box .more_btn {padding:10px 20px; background:rgba(255,255,255,0.5); position: absolute; bottom:30px; left: 0; right: 0; margin:0 auto; display: inline-block; width: 120px; border-radius: 30px;}
.modal .tit_box {background:#666; padding:20px; font-size: 2.2rem; text-align: center; font-weight: bold; color: #fff; position: relative;}
.modal .txt_box {padding:20px;}
.modal .txt_box textarea {width: 100%; height: 400px; border:1px solid #ddd; padding:20px; box-sizing: border-box; font-size: 1.3rem; line-height: 1.4;}
.modal .txt_box h5 {font-size: 2rem; color: #000; margin: 1rem 0; padding-left: 20px; background: url('../images/tit_ico.png') no-repeat 0 center; font-weight: bold;}
.modal .notice_txt {margin-top: 1rem; margin-bottom: 4rem;}
.modal .notice_txt p {color: #ff6600; margin-top: 5px; letter-spacing: -1px; font-size: 1.3rem;}

/*섬네일설정*/
.thumbnail {position: relative; padding-top: 87%; overflow: hidden;}
.thumbnail img {position: absolute; top:0; left:0; height: auto; width: 100%;}
.thumbnail .centered {position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%);}
.thumbnail .centered img { position: absolute; top: 0; left: 0; max-width: 100%; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.thumbnail .landscape {width: auto !important; max-width:none !important; height: 100% !important;}
.thumbnail .portrait  {width: 100% !important; height: auto !important;}

.footer_wrap {width: 100%; border-top:20px solid #f2f2f2; background: #1c222e; }
.footer_wrap .footer .footer_inner {max-width: 1200px; margin:0 auto; position: relative; padding: 4rem 0;}
.footer_wrap .footer .footer_inner h2 {display: inline-block; margin-right: 2rem;}
.footer_wrap .footer .footer_inner .add_info {display: inline-block; vertical-align: top; padding-left: 2rem; margin-top: 10px; }
.footer_wrap .footer .footer_inner .add_info span {display: inline-block; margin-right: 20px; line-height: 1.5; color: #888;}
.footer_wrap .footer .footer_inner .add_info span:last-child {display: block;}
.footer_wrap .footer .footer_inner .social_link {position: absolute; top:3rem; right: 0;}

.modal {
    display: none; 
    position: fixed; 
    z-index: 8888;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.7); 
}
.modal-content {
    background-color: #fefefe;
    margin: 10vh auto; 
    border: 1px solid #888;
    width: 900px;
}
.modal-content .close {
    color: #aaa;
    position: absolute;
    top:6px;
    right:25px;
    font-size: 40px;
    font-weight: bold;
}
.modal-content .close:hover,
.modal-content .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* 표 */


table.chart02 {
    width:99.8%;
    border:1px solid #ddd;
}
table.chart02 thead th:first-child {    
    border-left:1px solid #ddd;
}
table.chart02 thead tr:nth-child(2) th {    
    background: #ffde8e;
}
table.chart02 thead th {    
    background:#feba12;
    font-weight:600;    
    text-align:center;
    letter-spacing:-1px;
    color:#333;
    border-right:1px solid #ddd;
    padding:10px 6px;
}
table.chart02 tbody th {    
    background:#f6f6f6;
    font-weight:600;    
    text-align:center;  
    letter-spacing:-1px;
    line-height:17px;
    color:#333;
    border-bottom:1px solid #ddd;
    border-left:1px solid #ddd;
    padding:10px 5px 9px 5px;
    vertical-align: middle;
}
table.chart02 tbody th.bg2 {    
    background:#d6f5ff;
    color:#2981b4;
    border-bottom:1px solid #bedaef;
    border-left:1px solid #bedaef;
    border-right:1px solid #bedaef;
}
table.chart02 tbody td {    
    border:1px solid #ddd;
    border-top:none;
    text-align:center;
    padding:10px 10px 9px 10px;
    vertical-align: middle;
    line-height: 1.4;
    font-size: 1.3rem;
}
table.chart02 tbody td b {font-weight: bold;}
table.chart02 tbody td.align-l {text-align: left;}
table.chart02 .min_h {height:80px;}
table.chart02 .min_h2 {height:50px;}
table.chart03 {
    width:99.8%;
}

.view_pc {display: block !important;}
.view_m {display: none !important;}
.view_m > a {display: block;}

@media all and (max-width: 1200px) {
    html {font-size: 59%;}
    .main_content .inquiry_box {padding:2rem 2rem 3rem 2rem;}
}

@media all and (max-width: 1000px) {
    .main_content .inquiry_box .tit {font-size: 2rem;}
    .main_content .banner_box {display: block; overflow: hidden;}
    .main_content .banner_box > div {display: block; float: left; width: 50%;}
    .main_content .banner_box .deposit_rate {float: none; width: 100%; clear: both; padding-bottom: 10rem;}
    .main_content .banner_box .bn1 > .button {display: block;}
    .main_content .banner_box .bn2 > a {display: block;}
    .main_content .banner_box {margin:2rem auto;}
    .main_content .banner_box .deposit_rate {padding:3rem 2rem 10rem 2rem;}
    .main_visual_wrap .rate {bottom: 9%;}

}

@media all and (max-width: 800px) {
    .main_content .inquiry_box .tit {float: none; width: 100%; margin-bottom: 5px;}
    .main_content .inquiry_box .form {padding-left: 0; border-left: 0; float: none; width: 100%; margin-bottom: 10px;}
    .main_content .inquiry_box .btn {width: 100%; float: none;}
    .main_content .inquiry_box .form span {width: 10%;}

}


@media all and (max-width: 768px) {
    html {font-size: 50%;}
    .header_wrap .header {height: 6rem;}
    .header_wrap .header h1 {top:1.2rem; left: 10px;}
    .header_wrap .header h1 img {width: 250px;}
    .main_content .inquiry_box .form span.wid_m {width: 25%;}
    .main_content .banner_box > div {width: 100%; float: none;}

    .footer_wrap .footer .footer_inner {padding:2rem;}
    .footer_wrap .footer .footer_inner h2 img {width: 250px;}
    .footer_wrap .footer .footer_inner .add_info {display: block; border:0; padding-left: 0; padding-top: 1rem;}
    .footer_wrap .footer .footer_inner .social_link img {width: 35px;}

    .view_pc {display: none !important;}
    .view_m {display: block !important;}

    .main_content .inquiry_box {padding:1rem 2rem 3rem 2rem;}

    .main_visual_wrap .rate {bottom: 20%; left: 9%;}
    .modal-content { width:700px;}
    .main_visual_wrap .notice_pop {position: absolute; right: 0px; left: 0; margin:0 auto; bottom:10px; width: 80%; border:1px solid #000; z-index: 99;}
    .main_visual_wrap .notice_pop .txt {height: 170px; background-position: 0 70%;}

}
@media all and (max-width: 560px) {
    .main_visual_wrap .rate {bottom: 15%; left: 8%;}
}
@media all and (max-width: 450px) {
    .main_content .inquiry_box .form span {width: 100%; margin-bottom: 7px;}
    .main_content .inquiry_box .form span.wid_s {width: 32%;}
    .main_content .inquiry_box .form select {width: 90%;}
    .main_content .inquiry_box .form span.wid_m {width: 100%;}

    .main_visual_wrap .rate {bottom: 13%; left: 8%; font-size: }
    .main_visual_wrap .rate span {font-size: 7rem;}
    .main_visual_wrap .rate span.per {font-size:5rem;}
    .main_visual_wrap .rate span.per:after {font-size:5rem;}
    .footer_wrap .footer .footer_inner .add_info span:first-child {display: block;}
}