@charset "utf-8";
/* 최종수정 2019-09-17 ver2.0 */
body { background-color: #43BAFF; }
a.main_link { display: inline-block; }




/* 메인 HNB */
div.main_header_mid { height: 90px; position: relative; box-sizing: border-box; min-width: 990px; }
div.main_header_mid .area_wibee { position: absolute; top: 10px; left: 50%; margin-left: -485px; }
div.main_header_mid div { vertical-align: top; }
div.main_header_mid div.gnb { padding-top: 30px; }
div.main_header_mid .gnb>ul>li { position: relative; float:left; height: 60px; line-height: 60px; padding: 0 12px; box-sizing: border-box; }
div.main_header_mid .gnb>ul>li:last-child { padding-right: 0; }
div.main_header_mid .gnb>ul>li a { color: #FFFFFF; font-size: 18px; display: block; }

/* 메인 컨텐츠 */
#wrap.main { clear: both; width: 100%; min-width: 1000px;  background: #43BAFF url('../images/main/bg_main_color.png') repeat-x left bottom; }
div.wrap_bg { width: 100%; min-width: 980px; height: 100%; background: url('../images/main/bg_main.png') no-repeat center bottom; }
div.main_wrapper { width: 1000px;  min-height: 672px; margin: 0 auto;  }

div.main_top { width: 100%; padding: 20px 60px 0; color: #152E54; font-size: 24px; line-height: 28px; text-align: center; box-sizing: border-box; }
div.main_top p { width: 860px; margin: 0 auto; word-break: keep-all; }
div.main_top p.title { font-size: 32px; line-height: 36px; margin-bottom: 10px; letter-spacing: -1px; }
div.main_top p.sub_title, div.main_top p.sub_title strong { font-family: 'NotoSansKR'; }
div.main_top p.sub_title strong.name { text-decoration: underline; }
div.main_top div.btn_wrap { width: 860px; margin: 2px auto 40px; text-align: center; }
div.main_top div.btn_wrap > div { display: table; margin: 0 auto; border-spacing: 10px; }
div.main_top div.btn_wrap span.btn_page_link { position: relative; display: table-cell; width: 50%; min-width: 120px; max-width: 425px; height: 36px; line-height: 36px; padding: 0 28px; border-radius: 25px; background: #0085EC; color: #FFFFFF; font-size: 16px; text-align: center; vertical-align: top; cursor: pointer; box-sizing: border-box; }
div.main_top div.btn_wrap span.btn_page_link.darkblue { background-color: #0F3772; }
div.main_top div.btn_wrap span.btn_page_link.pink { width: 100%; background-color: #F65F8D; }


/*div.main_top div.btn_wrap span.btn_page_link { position: relative; display: table-cell; width: 50%; min-width: 120px; max-width: 425px; height: 36px; line-height: 36px; padding: 0 28px; background: #0085EC; color: #FFFFFF; font-size: 16px; text-align: center; vertical-align: top; cursor: pointer; box-sizing: border-box; }
div.main_top div.btn_wrap span.btn_page_link:before { position: absolute; left: 0; top: 0; content: ''; display: inline-block; width: 17px; height: 36px; background: #3eb3ff url('../images/main/btn_blue_left.png') no-repeat left center; }
div.main_top div.btn_wrap span.btn_page_link:after { position: absolute; right: 0; top: 0; content: ''; display: inline-block; width: 17px; height: 36px; background: #3eb3ff url('../images/main/btn_blue_right.png') no-repeat right center; }
div.main_top div.btn_wrap span.btn_page_link.darkblue { background-color: #0F3772; }
div.main_top div.btn_wrap span.btn_page_link.darkblue:before { position: absolute; left: 0; top: 0; content: ''; display: inline-block; width: 17px; height: 36px; background: #3eb3ff url('../images/main/btn_darkblue_left.png') no-repeat left center; }
div.main_top div.btn_wrap span.btn_page_link.darkblue:after { position: absolute; right: 0; top: 0; content: ''; display: inline-block; width: 17px; height: 36px; background: #3eb3ff url('../images/main/btn_darkblue_right.png') no-repeat right center; }
div.main_top div.btn_wrap span.btn_page_link.pink { width: 100%; background-color: #F65F8D; }
div.main_top div.btn_wrap span.btn_page_link.pink:before { position: absolute; left: 0; top: 0; content: ''; display: inline-block; width: 17px; height: 36px; background: #3eb3ff url('../images/main/btn_pink_left.png') no-repeat left center; }
div.main_top div.btn_wrap span.btn_page_link.pink:after { position: absolute; right: 0; top: 0; content: ''; display: inline-block; width: 17px; height: 36px; background: #3eb3ff url('../images/main/btn_pink_right.png') no-repeat right center; }
*/
div.main_top div.btn_wrap span.btn_page_link a { display: block; color: #FFFFFF; }


div.main_middle {  padding-bottom: 190px; box-sizing: border-box; }
div.main_middle div.main_swiper { position: relative; width: 100%; height: 300px; padding: 0 60px; box-sizing: border-box; }
div.main_middle .bx-prev { overflow: hidden; z-index: 50; position: absolute; top: 50%; left: 0; width: 60px; height: 45px; margin-top: -22.5px; background: url('../images/main/swiper_btn_prev_on.png') no-repeat right center; font-size: 0; text-indent: -9999px; }
div.main_middle .bx-next { overflow: hidden; z-index: 50; position: absolute; top: 50%; right: 0; width: 60px; height: 45px; margin-top: -22.5px; background: url('../images/main/swiper_btn_next_on.png') no-repeat left center; font-size: 0; text-indent: -9999px; }



ul.bxslider > li { display: table; width: 100%; float:left; }
ul.bxslider > li > div.slide { display: table-cell; vertical-align: top; position: relative; width: 264px; height: 300px; text-align: center; box-sizing: border-box; padding-top: 57px;}
ul.bxslider > li > div.slide.slide3 { vertical-align: middle; padding-top: 0; }
ul.bxslider > li > div.slide.slide4 { vertical-align: middle; padding-top: 0; }
ul.bxslider > li > div.slide.slide5 { vertical-align: middle; padding-top: 0; }
ul.bxslider > li > div.slide.slide6 { vertical-align: middle; padding-top: 0; }
ul.bxslider > li > div.slide p.slide_title { color: #0F3772; font-size: 18px; font-weight: bold; margin-bottom: 15px; }
ul.bxslider > li > div.slide ul.fixed_height { width: 100%; max-height: 170px; }
/* 메인 슬라이더 페이저기능 추가 2017-02-10 */
ul.bxslider > li > div.slide div.inner_slide_wrap { width: 100%; height: 164px; padding: 0 15px; box-sizing: border-box; position: relative; }

ul.inner_bxslider { position: relative; width: 100%; height: 185px; overflow: hidden; }
ul.inner_bxslider02 { position: relative; width: 100%; height: 185px; overflow: hidden; display: none; }

div.slide div.bx-controls { position: absolute; bottom: 35px; left: 0; width: 100%; height: 20px; padding-top: 5px; text-align: center; box-sizing: border-box; }
div.slide div.bx-pager-item { display: inline-block; width: 10px; height: 10px; margin: 0 2px; vertical-align: middle; }
div.slide div.bx-pager-item:first-child { margin-left: 0; }
div.slide div.bx-pager-item a.bx-pager-link { overflow: hidden; display: inline-block; width: 100%; height: 100%; background: url('../images/main/bullet_slide02_off.png') no-repeat center; font-size: 0; text-indent: -9999px; }
div.slide div.bx-pager-item a.bx-pager-link.active { background: url('../images/main/bullet_slide02_on.png') no-repeat center; }

div.bx-controls-auto { width: 60px;  margin: 0 auto; margin-top: 5px;  }
div.bx-controls-auto > div { display: inline-block; width: 50%; text-align: center; }
div.bx-controls-auto > div a { overflow: hidden; display: inline-block; width: 24px; height: 24px; font-size: 0; text-indent: -9999px; }
div.bx-controls-auto > div a.bx-start { background: url('../images/main/btn_start.png') no-repeat center; }
div.bx-controls-auto > div a.bx-stop { background: url('../images/main/btn_stop.png') no-repeat center; }

/* 메인 슬라이더 페이저기능 추가 2017-02-10 */
.slide1 .area_pager { position: absolute; bottom: 23px; left:50%; margin-left: -27px; width: 55px; height: 40px; line-height: 40px; color: #FFFFFF; }
.slide1 .area_pager span { vertical-align: top; }
.slide1 .area_pager .txt_current { color: #FFFFFF; font-weight: bold; }
.slide1 .area_pager .txt_total { color: #DCDCDC; }
.slide.slide1 div.bx-controls { width:55px; bottom: 35px; left:50%; margin-left: -27px; }
.slide.slide1 div.bx-controls a { overflow: hidden; z-index: 50; position: absolute; top: 27px; left: 0; width: 7px; height: 12px; margin-top: -22.5px; background: url('../images/main/bg_inner_pager2.png') no-repeat 0 0; font-size: 0; text-indent: -9999px; }
.slide.slide1 div.bx-controls .bx-next { left: auto; right:0; background-position: 0 -12px; }


.slide2 .inner_slide_wrap .area_pager { position: absolute; bottom:-35px; left:50%; margin-left: -27px; width: 55px; height: 40px; line-height: 40px }
.slide2 .inner_slide_wrap .area_pager span { vertical-align: top; }
.slide2 .inner_slide_wrap .area_pager .txt_current { color: #676767; font-weight: bold; }
.slide2 .inner_slide_wrap .area_pager .txt_total { color: #808080; }
.slide.slide2 div.bx-controls { width:55px; bottom: -23px; left:50%; margin-left: -27px; }
.slide.slide2 div.bx-controls a { overflow: hidden; z-index: 50; position: absolute; top: 27px; left: 0; width: 7px; height: 12px; margin-top: -22.5px; background: url('../images/main/bg_inner_pager.png') no-repeat 0 -12px; font-size: 0; text-indent: -9999px; }
.slide.slide2 div.bx-controls .bx-next { left: auto; right:0; background-position: 0 0 }


/* notice */
div.slide1 { background: url('../images/main/bg_slide02.png') no-repeat center top;}
div.slide1.slide_text { padding: 0 15px; color: #FFFFFF; }
div.slide1.slide_text p.date { padding-top: 5px; padding-bottom: 15px; font-size: 14px; }
div.slide1.slide_text div.title { overflow: hidden; width: 100%; min-height: 90px; max-height: 90px; margin-bottom: 15px; font-size: 16px; line-height: 20px; font-weight: bold; text-decoration: underline; }
div.slide1.slide_text div.title > p { display: table; width: 100%; height: 90px; }
div.slide1.slide_text div.title > p > span { display: table-cell; width: 100%; height: 100%; vertical-align: middle; }
div.slide1.slide_text span.btn_slide_inner { position: relative; height: 32px; line-height: 32px; padding: 0 17px; text-align: center; cursor: pointer; box-sizing: border-box; }
div.slide1.slide_text span.btn_slide_inner em { display: inline-block; width: 100%; height: 32px; border: 1px solid #FFFFFF; border-left: none; border-right: none; color: #FFFFFF; font-size: 12px; font-style: normal; box-sizing: border-box; }
div.slide1.slide_text span.btn_slide_inner:before { position: absolute; left: 2px; top: 0px; content: ''; display: inline-block; width: 17px; height: 32px; background: url('../images/main/btn_inner_left.png') no-repeat left center; }
div.slide1.slide_text span.btn_slide_inner:after { position: absolute; right: 2px; top: 0px; content: ''; display: inline-block; width: 17px; height: 32px; background: url('../images/main/btn_inner_right.png') no-repeat right center; }
div.slide1 div.bx-pager-item a.bx-pager-link { background: url('../images/main/bullet_slide_off.png') no-repeat center;  }
div.slide1 div.bx-pager-item a.bx-pager-link.active { background: url('../images/main/bullet_slide_on.png') no-repeat center; }

/* branch information */
ul.bxslider > li > div.slide.slide2 { padding-top: 47px; }
ul.bxslider > li > div.slide.slide2 p.slide_title { margin-bottom: 10px; }
div.slide2 { background: url('../images/main/bg_slide01.png') no-repeat center top; }
div.slide2 div.branch_box { text-align: left; }
div.slide2 div.branch_box p.title { padding: 0 0 5px 10px; background: url('../images/main/bg_title_dot.png') no-repeat left 5px; color: #303030; font-size: 14px; font-weight: bold; }
div.slide2 div.branch_box p.phone span { display: inline-block; padding-bottom: 3px; color: #707070; font-size: 12px; }
div.slide2 div.branch_box p.phone strong { display: inline-block; width: 100%; padding: 2px 0 5px 35px; margin-bottom: 15px; border-bottom: 1px dashed #006DE8; background: url('../images/main/icon_phone_num.png') no-repeat 10px 1px; color: #006DE8; font-size: 20px; text-align: center; box-sizing: border-box; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
div.slide2 div.branch_link { width: 100%; }
div.slide2 div.branch_link span { display: inline-block; width: 50%; padding: 36px 5px 0; font-size: 12px; text-align: center; box-sizing: border-box; cursor: pointer; vertical-align: top; }
div.slide2 div.branch_link span.btn_branch { border-right: 1px solid #E5E5E5; background: url('../images/main/btn_branch.png') no-repeat center top; }
div.slide2 div.branch_link span.btn_manager { background: url('../images/main/btn_manager.png') no-repeat center top; }

/* exchange rate */
div.slide3 { background: url('../images/main/bg_slide01.png') no-repeat center top; }
div.slide3 ul.choice_box { display: table; table-layout: fixed; width: 100.3%; }
div.slide3 ul.choice_box li { z-index: 1; position: relative; display: table-cell; vertical-align: middle; width: 50%; padding: 7px; border: 1px solid #D1D6DC; background-color: #F0F3F6; color: #707070; text-align: center; box-sizing: border-box; cursor: pointer; }
div.slide3 ul.choice_box li:nth-child(2n) { left: -1px; }
div.slide3 ul.choice_box li:nth-child(3n) { left: -2px; }
div.slide3 ul.choice_box li:first-child { border-radius: 2px 0 0 2px; }
div.slide3 ul.choice_box li:last-child { border-radius: 0 2px 2px 0; }
div.slide3 ul.choice_box li.on { z-index: 2; border: 1px solid #00A8F0; border-radius: 2px; background: #FFFFFF; color: #00A8F0; font-weight: bold; }
div.slide3 div.tab_wrap { position: relative; width: 100%; height: 100px; }
div.slide3 div.tab_wrap div.tabs_in { position: relative; width: 100%; height: 155px; top:0px; left: 0px; padding: 10px 0; }
div.slide3 div.tab_wrap div.tabs_in.on { position: absolute; top:5000px; left: 0px;  }
table.exchange_table { width: 100%; height: 80px; }
table.exchange_table th { position: relative; height: 80px; padding: 10px; background-color: #F2F2F2; color: #707070; font-size: 12px; text-align: right; vertical-align: bottom; box-sizing: border-box; font-weight: normal; }
table.exchange_table th > strong { color: #303030; font-size: 14px; }
table.exchange_table th > span.img_flag { position: absolute; left: 10px; top: 10px; }
table.exchange_table td.space {  }
table.exchange_table td.td_title { text-align: left; color: #707070; font-size: 12px; }
table.exchange_table td.td_num { border-bottom: 1px solid #E5E5E5; font-size: 14px; text-align: right; font-weight: bold; }





/* banner */
ul.bxslider > li > div.slide4 { background: url('../images/main/bg_slide01.png') no-repeat center; }
ul.bxslider > li > div.slide5 { background: url('../images/main/bg_slide01.png') no-repeat center; }
ul.bxslider > li > div.slide6 { background: url('../images/main/bg_slide01.png') no-repeat center; }
