@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500;700&display=swap');

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/


/*reset*/
html, 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 { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; font-family: 'Noto Sans KR', sans-serif; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; }
table { border-collapse: collapse; border-spacing: 0; }
a {text-decoration: none; color: #333; }

/*float 해제*/
.clear {clear:both;}
.clear:after { content:""; display:block; clear:both;}

/* bank scan - style */
.wrap { position: relative; overflow: hidden; }
.container { position: relative; width: 1200px; height: 100%; margin: 0 auto; }

/*cert-guide*/
header.otherpage-header { position:relative;border-bottom:1px #e5e5e5 solid; }
header.otherpage-header .gnb-wrap { height: 100%; padding: 35px 0px 0 0px; width:1200px; margin:0 auto; box-sizing: border-box; }
header.otherpage-header .gnb-wrap .logo a { color: #333; background: url('../bank/images/logo-color.png') no-repeat left top / contain; }
header.otherpage-header .gnb-wrap .menu-wrap li a { color: #333; }
header.otherpage-header .ham-wrap .ham-btn { display:none; background: url('../bank/images/ham-black.png') no-repeat left top / contain; }

html, body { height:100%; }


.container { position: relative; width: 1200px; height: 100%; margin: 0 auto; }
footer .container { height: auto; }


.cert-wrap { background:#fafafa; height:700px; }
.cert-wrap .container { display:flex; align-items:center; }

.cert-guide { width:50%; text-align:center; }
.cert-guide h3 { font-size:30px; font-weight:500; color:#333; margin-bottom:20px; letter-spacing:-2px; text-align:left; }
.cert-guide .cert-howto-list li { border-bottom:1px #eee solid; padding:40px 0 10px 0; text-align:left; }
.cert-guide .cert-howto-list li .num { width:27px; height:13px; display:block; margin-bottom:20px; background:url('../bank/images/cert-num.png') no-repeat 0 0; overflow:hidden; text-indent:-9999px; }
.cert-guide .cert-howto-list li .num.n2 { background-position:0 -13px; }
.cert-guide .cert-howto-list li .num.n3 { background-position:0 -26px; }


.cert-guide .cert-howto-list li p { font-size:16px; line-height:40px; letter-spacing:-0.5px; color:#333; font-weight:300; }
.cert-guide .cert-howto-list li p span { display:inline-block; vertical-align:middle; height:40px; line-height:40px; background:#ffbc46; border-radius:20px; padding:0 20px; font-weight:500; }
.cert-guide .cert-button { cursor:pointer; font-size:20px; border:0; width:340px; height:60px; line-height:1; vertical-align:middle; background:#ffbc46; border-radius:30px; font-weight:500; letter-spacing:-2px; margin-top:20px; margin-left:auto; margin-right:auto; outline:none;}
.cert-mobile-thumb { text-align:right; width:50%; }
.cert-mobile-thumb img { height:600px; }

/*top 버튼*/
.btn-scrtop { position:fixed; display: block; width: 60px; height: 60px; border-radius:50%; bottom:30px; right:30px; overflow: hidden; background: url('../bank/images/btn-scrtop.png') no-repeat center center / cover; transition-duration:.3s; }

header { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 80px; background: transparent; overflow: hidden; transition: background 0.3s; z-index: 10; }
header.active { position: fixed; top: 0; left: 0; background: #fff; border-bottom: 1px solid #e5e5e5; }
.gnb-wrap { height: 100%; padding: 35px 30px 0 30px; box-sizing: border-box; }
.gnb-wrap .logo { display: block; width: 130px; height: 100%; float: left; }
.gnb-wrap .logo a { display: block; height: 100%; background: url('../bank/images/logo-white.png') no-repeat left top / contain; }
.gnb-wrap .menu-wrap { position: relative; float: right; /*padding-right: 50px;*/ }
.gnb-wrap .menu-wrap li { display: inline-block; margin-left: 30px; }
.gnb-wrap .menu-wrap li a { display: block; height: 100%; color: #fff; font-size: 16px; font-weight: 300; ;}
header.active .gnb-wrap .logo a { color: #333; background: url('../bank/images/logo-color.png') no-repeat left top / contain; }
header.active .gnb-wrap .menu-wrap li a { color: #333; }
.ham-wrap { display:none; position: absolute; top: 0; right: 0; width: 20px; height: 16px;}
.ham-wrap .ham-btn { display: block; height: 100%; background: url('../bank/images/ham-white.png') no-repeat left top / contain; cursor: pointer; }
header.active .ham-wrap { display:none; }
header.active .ham-wrap .ham-btn { background: url('../bank/images/ham-black.png') no-repeat left top / contain; }

main { background: url('../bank/images/main.png') no-repeat center center / cover; position:absolute; left:0; top:0; right:0; bottom:0; }
main .container { position: relative; margin: 0 auto; height: 100%; }
main .title-area { position: absolute; width: 100%; top: 50%; left: 50%; transform: translate( -50%,-50%); }
main .title-area h2 { display: block; font-size: 60px; font-weight: 300; color: #fff; text-align: center; line-height:1.2; letter-spacing:-0.1em;}
main .title-area h2 .point-color { color: #ffbc46; }
main .title-area ul { text-align: center; margin-top: 50px; }
main .title-area ul li { display: inline-block; width: 220px; border: 1px solid rgba(255,255,255,0.2); border-radius: 35px; margin-right: 10px; padding: 0 35px; }
main .title-area ul li a { display: inline-block; position: relative; color: #fff; font-weight: 300; padding: 20px 0 20px 35px; }
main .title-area ul li span { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 28px; height: 28px; }
.icon-google { background: url('../bank/images/icon-google.png') no-repeat left top / contain;}
.icon-app { background: url('../bank/images/icon-app.png') no-repeat left top / contain;}


.contents-wrap { position: relative; height:100%;}
.navigation-wrap { position: fixed; left: 0; top:50%; transform: translate(-300px , -50%); transform-origin:left; z-index: 10; transition-duration:.3s; }
.navigation-wrap.active {  transform: translate(0px , -50%); transform-origin:left; transition-duration:.3s; }

.navigation-wrap .navigation-item { cursor: pointer; padding: 17px 5px 17px 0; font-size: 16px; font-weight: 500; color: #333; opacity: 0.5; transition:0.3s; }
.navigation-wrap .navigation-item:hover,
.navigation-wrap .navigation-item:hover .icon-area,
.navigation-wrap .navigation-item.active,
.navigation-wrap .navigation-item.active .icon-area { opacity: 1; }

.navigation-wrap .navigation-item.depth { padding-top: 5px; padding-bottom: 5px; }
.navigation-wrap .navigation-item.depth .navi-icon { background: transparent; }
.navigation-wrap .navigation-item.depth .navi-icon:after { width: 5px; height: 5px; top: 2px; }
.navigation-wrap .navigation-item.depth .navi-text { font-size: 12px; }

.navigation-item .icon-area { position: relative; display: inline-block; width: 30px; height: 10px; }
.navigation-item.active .icon-area { width:40px; transition-duration:.3s; }

.navi-text { display: inline-block; padding-left: 5px; letter-spacing:-0.05em; }
.icon-area .navi-icon { display: block; margin-top: 5px; width: 100%; height: 1px; background: #333; }
.icon-area .navi-icon.depth { background: transparent; }
.icon-area .navi-icon.depth:after { width: 5px; height: 5px; }
.icon-area .navi-icon:after { position: absolute; top: 0; right: 0; display: block; content:''; width: 10px; height: 10px; background: #333; border-radius: 50%; }

.navigation-item.depth .icon-area.active { animation-play-state: paused;}

.section { height: 100vh; background: #fff; border-bottom:1px #eee solid; }
.section .position-area { width: 100%; position: absolute; top: 50%; transform: translateY(-50%); }
.section .position-area .title-area { float: left; position: absolute; top: 50%; transform: translateY(-50%); }
.section .position-area .title-area .title-box .text-num { position: relative; display: block; height: 30px; overflow: hidden; }
.section .position-area .title-area .title-box .text-num p { position: absolute; top: 6px; left: 0; font-size: 30px; color: #333; font-weight: bold; font-family: 'Montserrat', sans-serif; letter-spacing: -0.05em; }
.section .position-area .title-area .title-box .text-num p sub { font-size: 24px;}
.section .position-area .title-area .title-box .sub-title { position: relative; display: inline-block; font-size: 18px; color: #333; border-bottom: 1px solid #000; padding: 10px 0; letter-spacing:-0.1em; }
.section .position-area .title-area .title-box h3 { font-size: 40px; line-height: 1.2; font-weight: 500; padding-top: 35px; letter-spacing:-0.05em; }
.section .position-area .title-area .title-box .text { margin-top: 34px; font-size:18px; font-weight: 300; color: #666; line-height: 1.4; letter-spacing:-0.05em;}
.section .position-area .img-area { float: right; text-align: right; }
.section .position-area .img-area img {display: inline-block; }

#section2 { background: #b6d6b4; }
#section3 { background: #c5e4e9; }
#section4 { background: #a1cafd; }
#section5 { background: #ffe4ce; }
#section5 .container { background:url('../bank/images/section3.png') no-repeat right bottom; background-size:650px; }
footer { padding: 30px 0 30px; text-align: center; }
footer p { font-size: 12px; color: #333; line-height: 1.5; font-weight: 300; }

.benefit-list { margin-top:20px; }
.benefit-list li { padding:0 3px; display:inline-block; line-height:0; box-sizing: border-box; width:100%; max-width:180px; }
.benefit-list .content { background:#fff; border-radius:5px; padding:15px 10px; text-align:center; }
.benefit-list .icon { width:40px; height:40px; margin:0 auto; line-height:0; }
.benefit-list .content h5 { color:#333; font-weight:400; font-size:18px; letter-spacing:-1.5px; margin:10px 0 5px; line-height:1; }
.benefit-list .content span { display:block; font-size:13px; line-height:1.3; color:#777; letter-spacing:-1px; }

@media screen and (max-width: 1440px)	{

  .container { width:1060px; }
  .navi-text { display: none; }
}

@media screen and (max-width: 1200px)	{

  header { height: 60px; }
  header .gnb-wrap { padding: 20px 15px; }
  header .gnb-wrap .logo { width: 100px; }
  /*header .gnb-wrap .gnb-menu { display: none; }*/
  .ham-wrap { width: 15px; }

  .navi-text { display: none; }

  .container {width: 90%; padding: 0 20px; box-sizing: border-box;}
  .section .position-area .title-area,
  .section .position-area .img-area { max-width:500px; margin: 0px auto; }
  .section .position-area .title-area .title-box { text-align: left; }
  .section .position-area .title-area .title-box .sub-title { font-size: 14px; padding: 10px 0; }
  .section .position-area .title-area .title-box .sub-title:before { top: -10px; font-size: 18px; }
  .section .position-area .title-area .title-box h3 { font-size: 24px; padding-top: 20px; }
  .section .position-area .img-area img { width: 100% }
  .section .position-area .title-area .title-box .text { display: none; }

	.benefit-list { margin-top:20px; }
	.benefit-list li { padding:0; width:100%; max-width:100%; display:block; margin-bottom:10px; }
	.benefit-list .content { background:#fff; border-radius:5px; padding:20px; text-align:left; }
	.benefit-list .icon { width:36px; height:36px; float:left; }
	.benefit-list .content h5 { font-size:16px; letter-spacing:-1px; margin-top:0; padding-left:50px; }
	.benefit-list .content span { font-size:12px; letter-spacing:0px; padding-left:50px; }
	.benefit-list .content span br { display:none; }

}

@media screen and (max-width: 768px)	{

	.section .position-area .title-area .title-box .text-num p { font-size:18px; }
	.section .position-area .title-area .title-box .text-num p sub { font-size:14px; }

	.section .position-area .title-area { float:none; position:relative; }
	.section .position-area .img-area { float:none; width:100%; margin:40px auto 0; }

	header { position:fixed; border-bottom:1px #e5e5e5 solid; background:#fff; }
	header .gnb-wrap { margin:0 auto; box-sizing: border-box; }
	header .gnb-wrap .logo a { color: #333; background: url('../bank/images/logo-color.png') no-repeat left top / contain; }
	header .gnb-wrap .menu-wrap li a { color: #333; }
	/*header .ham-wrap { display:block; }*/
	header .ham-wrap .ham-btn { background: url('../bank/images/ham-black.png') no-repeat left top / contain; }

	#section5 .container { background-size:90%; }

}

@media screen and (max-width: 500px)	{
	#section1 .position-area .img-area { margin-top:0; }
	.section .position-area .title-area .title-box h3 { font-size:18px; }
	.container { padding:0; }
	.navigation-wrap { display:none; }
	.btn-scrtop-area { height: 45px; bottom: 130px; }
	.btn-scrtop { width: 45px; height: 45px; margin-top: 20px; }
	main .title-area h2 { font-size: 23px; }
	main .title-area ul { margin-top: 35px; }
	main .title-area ul li { width: 130px; padding: 0 16px; }
	main .title-area ul li+li { margin-top:10px; }
	main .title-area ul li a { font-size: 10px; padding: 15px 0 15px 18px; }
	main .title-area ul li span { width: 13px; height: 13px; }
	.navigation-wrap .navigation-item { padding: 5px 5px 5px 0; font-size: 10px; }
	.icon-area { height: 5px;}
	.icon-area .navi-icon { margin-top: 2px; }
	.icon-area .navi-icon:after { width: 5px; height: 5px; }
	.section .position-area .img-area { margin:20px 0 0; }
	footer { padding: 15px 0 70px; }
	footer p { font-size: 10px; }
	.section .position-area .title-area { top:auto; position:relative; transform:translateY(0); }

	.benefit-list .content { padding:10px; }
	.benefit-list .icon { width:24px; height:24px; }
	.benefit-list .content h5 { height:13px; }


}


.container.tos { margin:80px auto; }
.container.tos h3 { font-size:20px; font-weight:500; margin-bottom:10px; margin-top:20px; }
.container.tos p { line-height:1.5; font-size:13px; margin:10px 0; font-weight:300; }
.container.tos li { padding-left:10px; margin:5px 0 15px; font-size:13px; font-weight:300; line-height:1.5; }
.container.tos li b { font-size:16px; font-weight:500; display:block; margin-bottom:8px; margin-top:20px; }
.container.tos table { border:1px #eee solid; width:100%; margin-top:10px; margin-bottom:10px; }
.container.tos table th,table td { padding:10px; border-bottom:1px #eee solid; border-right:1px #eee solid; }
.container.tos table tr:last-child th, table tr:last-child td { border-bottom:0; }
.container.tos table th:last-child,table td:last-child { border-right:0; }
.container.tos .width10_1lixt { width:10%; }
.container.tos .width20__BHhs { width:20%; }
.container.tos .width40_2TN4Y { width:40%; }

@media all and (max-width: 757px) {
	.container.tos { margin:20px auto; }
}

footer .link-line { margin-bottom:10px; }
footer .link-line a { font-weight:500; font-size:13px; line-height:13px; height:13px; color:#111; display:inline-block; }
footer .link-line a+a { padding-left:8px; margin-left:8px; border-left:1px #ddd solid; }

.intro-body { height:100%; }
.intro-body section { position:relative; padding:60px 0; border-bottom:1px #eee solid; }
.intro-body .visual-section { background:url('../bank/images/intro-section01.jpg') no-repeat center center; background-size:cover; height:100vh; box-sizing: border-box; }
.intro-body .visual-copy { position:absolute; width:100%; margin:0 auto; top:50%; transform: translateY(-50%); text-align: center; }
.intro-body .visual-section .visual-copy .section-label { font-size:20px; color:#fff; letter-spacing:-0.05em; margin-bottom:30px; border-bottom:2px #fff solid; padding-bottom:12px; }
.intro-body .visual-section .visual-copy .section-maincopy { font-size:46px; letter-spacing:-0.05em; color:#fff; margin:30px 0 0; line-height:1.5; font-weight:300; }
.intro-body .visual-section .visual-copy .section-maindesc { font-size:18px; letter-spacing:-0.05em; color:#fff; margin-top:40px; line-height:1.5; font-weight:500; }
.intro-body .visual-section .arr-down { position:absolute; width:53px; height:28px; background:url('../bank/images/arr-down.png') no-repeat; left:50%; bottom:30px; transform: translateX(-50%); }

.intro-body .intro-section  { background:url('../bank/images/intro-section02.jpg') no-repeat center center; background-size:cover; height:800px; }
.intro-body .intro-section .section-maincopy { color:#333; font-size:40px; font-weight:600; letter-spacing:-0.05em; margin:0; }
.intro-body .intro-section .section-maindesc { font-size:18px; letter-spacing:-0.05em; color:#333; margin-top:40px; line-height:1.3; font-weight:500; }

.intro-body .section-maincopy { color:#333; font-size:30px; font-weight:600; letter-spacing:-0.05em; margin:0; text-align: center; }
.intro-body .section-maindesc { font-size:18px; letter-spacing:-0.05em; color:#888; margin-top:40px; margin-bottom:40px; line-height:1.3; font-weight:300; text-align: center; }
.intro-body .section-img-wrapper img { max-width:1300px; width:95%; display:block; margin:0 auto; }

.history .section-maincopy { margin-bottom:60px; }

.contact .section-maincopy { margin-bottom:60px; }
.contact .map-wrapper { max-width:1200px; width:100%; margin:0 auto; position:relative; }
.contact .contact-line { border-bottom:1px #eee solid; margin-bottom:20px; padding-bottom:20px; padding-top:20px; }
.contact .contact-line span { display:inline-block; padding-left:30px; font-size:14px; height:20px; line-height:20px; }
.contact .contact-line span+span { margin-left:40px; }
.contact .contact-line .address { background:url('../bank/images/contact-icon.png') no-repeat; }
.contact .contact-line .tel { background:url('../bank/images/contact-icon.png') no-repeat; background-position-y: -20px;}
.contact .contact-line .email { background:url('../bank/images/contact-icon.png') no-repeat; background-position-y: -40px; }

.subway-wrapper:after { display: block; content:''; clear: both; }
.subway-wrapper .dt { float:left; font-size:14px; line-height:20px; width:220px; }
.subway-wrapper .ellipse { display:inline-block; width:20px; height:20px; font-size:14px; text-align: center; line-height:20px; color:#fff; background:#5dbd6f; border-radius:50%; margin-left:5px; }
.subway-wrapper .color { color:#5dbd6f; font-size:14px; }
.subway-wrapper .exit { font-size:14px; }
.subway-wrapper .dd { padding-left:220px; position:relative; }
.subway-wrapper .dd p { font-size:14px; line-height:20px; font-weight:400; color:#666; margin:0; }
.subway-wrapper .dd p+p { margin-top:10px; }

.rnd-list li { float:left; width:33.3%; padding:20px; box-sizing: border-box; }
.rnd-list li .title {background: rgb(250,204,5); background: linear-gradient(180deg, rgba(250,204,5,1) 0%, rgba(246,167,1,1) 100%); width:180px; margin:0 auto; text-align:center; color:#fff; font-size:20px; height:40px; border-radius:20px; line-height:40px; }
.rnd-list li .icon-wrap { margin:20px auto; width:220px; height:220px; position:relative; border:1px #ddd solid; border-radius:50%; overflow:hidden; background:#fff; }
.rnd-list li .icon-wrap img { width:70px; height:70px; position:absolute; left:50%; top:50%; transform:translate3d(-50%, -50%, 0) }
.rnd-list li h4 { font-size:20px; font-weight:600; color:#333; margin:10px 0; text-align:center; }
.rnd-list li span { display:block; font-size:12px; height:24px; font-weight:400; color:#666; margin:10px 0; text-align:center; }
.rnd-list li p { font-size:16px; line-height:1.5; font-weight:400; color:#666; text-align:center; margin:30px 0; }
.rnd-list:after { display: block; content:''; clear: both; }

.history-list { max-width:600px; width:100%; margin:0 auto; position:relative; }
.history-list:before { content:''; top:0; bottom:0; left:100px; width:1px; height:100%; background:#eee; position:absolute; z-index:0; }
.history-list li { margin-bottom:40px; }
.history-list li:after { display: block; content:''; clear: both; }
.history-list li .year { font-size:24px; line-height:24px; font-weight:600; color:#111; float:left; width:96px; letter-spacing: -0.05em; font-family: 'Montserrat Alternates', 'NotoSansKR'; }
.history-list li .career-line { margin-bottom:15px; line-height:24px; padding-left:30px; position:relative; margin-left:96px; }
.history-list li .career-line:after { display: block; content:''; clear: both; }
.history-list li .career-line:before { content:''; left:0; top:9px; width:9px; height:9px; background:#f8d230; border-radius:4px; position:absolute; }
.history-list li .career-line .month { font-weight:600; float:left; width:50px; margin-left:0; }
.history-list li .career-line p { margin-left:50px; font-weight:300; }
.history-list li .career-line p small { font-size:13px; display:block; color:#666; }

@media screen and (max-width: 768px)	{
	.intro-body .visual-section .visual-copy .section-maincopy  { font-size:30px; }
	.intro-body .intro-section .section-maincopy, .intro-body .section-maincopy { font-size:24px; }
	.intro-body .visual-section .visual-copy .section-maindesc { font-size:14px; }
	.intro-body .intro-section .section-maindesc { font-size:14px; }
	.intro-body .section-maindesc { font-size:14px; margin:20px 0; }

	.rnd-list li { width:50%; }
	.rnd-list li p { font-size:13px; height:58px; }

	.contact .contact-line { text-align:center; }
	.contact .contact-line span+span { margin:10px 0 0; }

	.subway-wrapper .dt { float:none; width:auto; text-align:center; margin-bottom:15px; }
	.subway-wrapper .dd { padding-left:0; text-align:center; }

}
@media screen and (max-width: 600px) {
	.history-list li { padding:0 20px; }
	.history-list li .year {
		float: none;
		margin-bottom:20px;
		font-size:20px;
	}

	.history-list li .career-line {
		margin-left: 0;
		padding-left:20px;
	}
	.history-list li .career-line p { font-size:13px; }
	.history-list:before { display:none; }

	.history-list li { margin-bottom:20px; border-bottom:1px #eee solid; margin-top:20px; }

}
@media screen and (max-width: 500px)	{
	.intro-body .visual-section .visual-copy .section-maincopy { font-size:24px; }
	.intro-body .visual-section .visual-copy .section-maindesc { font-size:12px; font-weight:300; }
	.intro-body .visual-section .visual-copy .section-maindesc br,
	.intro-body .intro-section .section-maindesc br { display:none; }
	.intro-body .intro-section .section-maincopy, .intro-body .section-maincopy { font-size:20px; }
	.intro-body .intro-section .section-maindesc { padding:0 30px; }
	.intro-body .section-maindesc { padding-left:30px; padding-right:30px; }
	.rnd-list li { width:100%; float:none; }

	.contact .contact-line span { display:block; }
	header { height:auto; }
	header .gnb-wrap { padding:20px 0; }
	header .gnb-wrap .logo a { width:100px; height:17px; }
	.gnb-wrap .menu-wrap li { margin-left:0; }
	.gnb-wrap .menu-wrap li a { font-size:14px; font-weight:600; letter-spacing:-0.05em; }
	.gnb-wrap .menu-wrap li+li { margin-left:15px; }
	.gnb-wrap .logo { margin:0 auto; float:none; }
	.gnb-wrap .menu-wrap { float:none; text-align: center; border-top:1px #f0f0f0 solid; padding-top:15px; margin-top:15px; }

}