@charset "euc-kr";

/**
 * CMSiNet »ç¿ë¼º °³¼± ÇÁ·ÎÁ§Æ® (2021.07 ~ 2021.12)
 *
 * [KO]¸ÞÀÎ ÆäÀÌÁö¿ë
 */

@import url('font.css');

body, input, textarea, select, button, table, h1 { margin:0; font-size:13px; font-family:NotoSans,Roboto,'¸¼Àº°íµñ','Malgun Gothic','Dotum',Tahoma,arial; letter-spacing: -0.2px; line-height: normal; color:#000; }
body, h1, h2, h3, h4, h5, dl, dt, dd, ul, li, ol, th, td, p, form, fieldset, legend, button, section { margin: 0; padding:0; font-weight: normal; box-sizing: border-box;}
span, div { margin: 0; padding:0; box-sizing: border-box;}
img, fieldset{ border:0 none; }
dl, ul, ol, li { list-style: none outside none; }
button { border:0 none; cursor:pointer; display: block; outline: 0; }
table, th, td, div { border-collapse:collapse; }
label { cursor: pointer; }

:focus { outline: solid 2px rgba(0, 226, 230, 0.667); outline-offset: 2px; }

li img { vertical-align:top; }
td img { vertical-align:middle; }

a { text-decoration:none; color:#333; }
a:hover, a:active, a:focus { color:#333; text-decoration:none; }
table a:link, table a:visited { color:#333; }
table a:hover, table a:active { color:#333; text-decoration:underline; }
address, caption, cite, code, dfn, em, var { font-style:normal; }
table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

strong, .strong { font-weight: 600; }
.blind, legend, caption { display:none !important; }
.cursor { cursor: pointer; }
.clear { clear:both; }

body {
	position: relative;
	min-width: 994px;
	min-height: 100%;
	cursor: default;
	background-color: #324755;
}

.inner {
	position: relative;
	width: 994px;
	margin: 0 auto;
}


/*******************************************************************************
 * HEADER
 */
header {
	position: relative;
	z-index: 20;
	background-color: #fff;
}

/* .top_area */
header .top_area {
	position: relative;
	height: 30px;
	background-color: #0d8a8b;
}
header .top_area .menu {
	max-width: 994px;
	margin: 0 auto;
	text-align: right;
}
header .top_area .menu li {
	display: inline-block;
	margin-left: 16px;
	line-height: 30px;
	font-size: 12px;
}
header .top_area .menu li a {
	color: #fff;
}

/* LOGO */
header h1.logo {
	display: inline-block;
	width: 120px;
	padding: 23px 0;
	vertical-align: middle;
}
header h1.logo img {
	width: 100%;
}
.default_logo { height:22px; }	/* [Á¶¼±] Header ·Î°í À̹ÌÁö(.svg)ÀÇ ³ôÀÌ */

/* GMB ¸Þ´º */
#GNB {
	display: inline-block;
	margin-left: 35px;
	vertical-align: middle;
}
#GNB .menu {
	display: flex;
}
#GNB .menu > li {
	height: 80px;
	padding: 28px 26px;
	font-size: 16px;
	font-weight: 600;
	box-sizing: border-box;
}
#GNB .menu li .nav_dp {
	display: none;
	position: absolute;
	left: 0;
	top: 80px;
	z-index: 20;
	width: 994px;
	/* padding: 30px 65px; */
	padding: 20px 25px;
	background-color: rgba(255, 255, 255, 0.95);
	box-sizing: border-box;
	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}
#GNB .menu li.on > a {
	position: relative;
	color: #ed0e65;
}
#GNB .menu li.on .nav_dp {
	display: block;
}
#GNB .menu li .nav_dp > ul > li {
	display: flex;
	font-size: 14px;
	line-height: 24px;
}
#GNB .menu li .nav_dp > ul > li + li {
	margin-top: 15px;
}
#GNB .menu li .nav_dp > ul > li > a {
	min-width: 120px;
	font-weight: 600;
	color: #191919;
}
#GNB .menu li .nav_dp > ul > li li {
	display: inline-block;
	min-width: 130px;
	font-weight: normal;
}
#GNB .menu li .nav_dp > ul > li li a {
	color: #666;
}
#GNB .menu li .nav_dp > ul > li li a:hover {
	color: #ed0e65;
}

/* ¿¹¿Üó¸®) ÀüÀÚ°áÁ¦ Á߸޴º ÃÖ¼Ò³ÐÀÌ */
#GNB .menu > li:nth-child(4) .nav_dp > ul > li > a {
	min-width: 150px;
}
/* ¿¹¿Üó¸®) ÀüÀÚ°áÁ¦ ¼Ò¸Þ´º ÃÖ¼Ò³ÐÀÌ */
#GNB .menu > li:nth-child(4) .nav_dp > ul > li li {
	min-width: 180px;
}
/* ¿¹¿Üó¸®) ¿Üȯ/¼öÃâÀÔ, ÇϳªÄ«µå/ºÎ°¡¼­ºñ½º ¼Ò¸Þ´º ÃÖ¼Ò³ÐÀÌ */
#GNB .menu > li:nth-child(5) .nav_dp > ul > li li,
#GNB .menu > li:nth-child(6) .nav_dp > ul > li li {
	min-width: 160px;
}
/* ¿¹¿Üó¸®) Àڱݰü¸® CMSiNet G-plus À§Ä¡ º¸Á¤ 22.09.15 G-Plus Á¾·á */ 
/*#GNB .menu > li:last-child .nav_dp > ul > li {
	display: block;
	padding-right: 65px;
	text-align: right;
}*/

/* Àüü¸Þ´º */
header .btn_allmenu {
	position: absolute;
	right: 0;
	bottom: 20px;
	width: 40px;
	height: 40px;
	background: #eaecee url('../img/main2021/ico_menu.png') no-repeat center center;
	cursor: pointer;
}
header .btn_allmenu.on {
	background: #eaecee url('../img/main2021/ico_close.png') no-repeat center center;
}
header #allmenu {
	display: none;
	position: absolute;
	left: 0;
	top: 80px;
	z-index: 20;
	width: 994px;
	padding: 20px 0;
	background-color: rgba(255, 255, 255, 0.95);
	box-sizing: border-box;
	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}
header #allmenu .menu {
	display: flex;
}
header #allmenu .menu > li {
	width: 17.78%;
	padding: 0 20px;
	font-size: 14px;
	font-weight: 600;
}
header #allmenu .menu > li > a {
	color: #191919;
}
header #allmenu .menu > li + li {
	border-left: 1px solid #eaecee;
}
header #allmenu .menu .nav_dp {
	margin-top: 12px;
}
header #allmenu .menu .nav_dp li {
	line-height: 28px;
}
header #allmenu .menu .nav_dp li a {
	color: #666666;
}
header #allmenu .menu .nav_dp li a:hover {
	color: #ed0e65;
}
header #allmenu .nav_dp > ul > li > ul { display:none; }
header #allmenu .nav_dp > ul > li > a { font-size:13px; }


/*******************************************************************************
 * ¸ÞÀÎ ºñÁÖ¾ó ¿µ¿ª
 */
.main_area {
	background: #c9dcf2 url('../img/main2021/KO/bg_main.jpg') no-repeat center top;
}
.main_area .inner {
	height: 411px;
}
.main_area .login_menu {
	display: flex;
	position: absolute;
	right: 0;
	bottom: 140px;
	width: 284px;
	height: 90px;
	background: url('../img/main2021/bg_login.png') no-repeat center top;
}
.main_area .login_menu li {
	display: inline-block;
	width: 50%;
	padding: 0 17px;
	box-sizing: border-box;
}
.main_area .login_menu li a {
	display: block;
	padding-left: 45px;
	font-size: 16px;
	font-weight: 600;
	line-height: 90px;
	color: #b4ebf7;
}
.main_area .login_menu li a:focus,
.main_area .login_menu li a:hover {
	color: #fff;
}
.main_area .login_menu li.login a {
	background: url('../img/main2021/ico_login_off.png') no-repeat left center;
}
.main_area .login_menu li.login a:focus,
.main_area .login_menu li.login a:hover {
	background: url('../img/main2021/ico_login_on.png') no-repeat left center;
}
.main_area .login_menu li.certi a {
	padding-left: 40px;
	background: url('../img/main2021/ico_certifi_off.png') no-repeat left center;
}
.main_area .login_menu li.certi a:focus,
.main_area .login_menu li.certi a:hover {
	background: url('../img/main2021/ico_certifi_on.png') no-repeat left center;
}


/*******************************************************************************
 * ºü¸¥¸Þ´º¿µ¿ª
 */
.quick_area {
	margin-top: -110px;
	background-color: rgba(0, 119, 120, 0.4);
}
.quick_area .menu {
	display: flex;
	justify-content: space-between;
}
.quick_area .menu li {
	position: relative;
	width: 14.285%;
	text-align: center;
}
.quick_area .menu li a {
	display: block;
	position: relative;
	height: 110px;
	padding: 16px 0;
	font-size: 15px;
	color: #fff;
	box-sizing: border-box;
}
.quick_area .menu li .ico {
	display: inline-block;
	width: 60px;
	height: 52px;
}
.quick_area .menu li a:focus,
.quick_area .menu li:hover a {
	color: #fff;
	background-color: #e94568;
}
.quick_area .menu li.m01 .ico {
	background: url('../img/main2021/ico_transfer_off.png') no-repeat 6px top;
}
.quick_area .menu li.m01:hover .ico {
	background: url('../img/main2021/ico_transfer_on.png') no-repeat 6px top;
}
.quick_area .menu li.m02 .ico {
	background: url('../img/main2021/ico_account_off.png') no-repeat 6px top;
}
.quick_area .menu li.m02:hover .ico {
	background: url('../img/main2021/ico_account_on.png') no-repeat 6px top;
}
.quick_area .menu li.m03 .ico {
	background: url('../img/main2021/ico_salary_off.png') no-repeat 6px top;
}
.quick_area .menu li.m03:hover .ico {
	background: url('../img/main2021/ico_salary_on.png') no-repeat 6px top;
}
.quick_area .menu li.m04 .ico {
	background: url('../img/main2021/ico_utility_off.png') no-repeat 6px top;
}
.quick_area .menu li.m04:hover .ico {
	background: url('../img/main2021/ico_utility_on.png') no-repeat 6px top;
}
.quick_area .menu li.m05 .ico {
	background: url('../img/main2021/ico_remittance_off.png') no-repeat 6px top;
}
.quick_area .menu li.m05:hover .ico {
	background: url('../img/main2021/ico_remittance_on.png') no-repeat 6px top;
}
.quick_area .menu li.m06 .ico {
	background: url('../img/main2021/ico_exchange_off.png') no-repeat 6px top;
}
.quick_area .menu li.m06:hover .ico {
	background: url('../img/main2021/ico_exchange_on.png') no-repeat 6px top;
}
.quick_area .menu li.m07 .ico {
	background: url('../img/main2021/ico_quickcheck_off.png') no-repeat 6px top;
}
.quick_area .menu li.m07:hover .ico {
	background: url('../img/main2021/ico_quickcheck_on.png') no-repeat 6px top;
}
.quick_area .menu li .txt {
	font-weight: 300;
}


/*******************************************************************************
 * °øÁö»çÇ× & ½½¶óÀ̵å¼î ¹è³Ê ¿µ¿ª
 */
.notice_area {
	background-color: #fff;
}
.notice_area .inner {
	display: flex;
	justify-content: space-between;
	padding: 35px 0 45px 0;
}
.notice_area .board {
	width: 480px;
}
.notice_area .board .title {
	position: relative;
	padding-bottom: 10px;
	font-size: 16px;
	font-weight: 600;
	line-height: 32px;
	border-bottom: 1px solid #010101;
}
.notice_area .board .title .more {
	position: absolute;
	right: 0;
	top: 8px;
	width: 15px;
	height: 15px;
	background: url('../img/main2021/ico_more.png') no-repeat center center;
}
.notice_area .board .list li {
	position: relative;
	font-size: 14px;
	color: #333;
	line-height: 59px;
	/* font-weight: 600; */
	border-bottom: 1px solid #e9e9e9;
}
.notice_area .board .list li:before {
	content: '';
	display: inline-block;
	width: 3px;
	height: 3px;
	margin: -5px 3px 0 0;
	background-color: #9b9b9b;
	border-radius: 50%;
	vertical-align: middle;
}
.notice_area .board .list li .date {
	position: absolute;
	right: 0;
	top: 0;
}
.notice_area .board .list li.no_data {
	height: 120px;
	text-align: center;
	line-height: 120px;
}
.notice_area .board .list li.no_data:before {
	display: none;
}
.notice_area .banner-swiper {
	width: 480px;
	margin: 0;
}
.notice_area .banner-swiper .swiper-slide img {
	width: 100%;
	height: 120px;
}
.notice_area .banner-swiper .swiper-controller {
	text-align: right;
}
.notice_area .banner-swiper .swiper-button-pause {
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-top: -1px;
	background: url('../img/main2021/ico_stop.png') no-repeat center center;
	cursor: pointer;
	vertical-align: middle;
}
.notice_area .banner-swiper .swiper-button-play {
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-top: -1px;
	background: url('../img/main2021/ico_play.png') no-repeat center center;
	cursor: pointer;
	vertical-align: middle;
}
.notice_area .banner-swiper .swiper-pagination {
	display: inline-block;
	position: static;
	line-height: 43px;
}
.notice_area .banner-swiper .swiper-pagination-bullet {
	margin: 0 2px !important;
	background-color: #bdc2c6;
}
.notice_area .banner-swiper .swiper-pagination-bullet-active {
	background-color: #324755;
}


/*******************************************************************************
 * °í°´¼¾ÅÍ / ÀÌ¿ë¾È³» ¿µ¿ª
 */
.guide_area {
	background-color: #e4e4e4;
}
.guide_area .inner {
	display: flex;
	line-height: 54px;
}
.guide_area .section {
	display: flex;
	justify-content: space-between;
	width: 50%;
	box-sizing: border-box;
}
.guide_area .section + .section {
	width: 480px;
	padding-left: 17px;
	margin-left: 17px;
	border-left: 1px solid #f2f2f2;
}
.guide_area .title {
	font-size: 15px;
	font-weight: 600;
	color: #666;
}
.guide_area .title img {
	margin-top: -3px;
	vertical-align: middle;
}
.guide_area ul {
	display: flex;
	justify-content: space-between;
	flex: 1;
}
.guide_area .list {
	margin-left: 20px;
}
.guide_area .list li a {
	position: relative;
	padding-right: 27px;
	margin-right: 10px;
	color: #666;
	font-size: 14px;
	background: url('../img/main2021/ico_small_arrow.png') no-repeat right center;
}
.guide_area .list li a:hover:after {
	content: '';
	display: inline-block;
	position: absolute;
	right: -9px;
	top: -2px;
	width: 21px;
	height: 21px;
	border: 1px solid #919191;
	border-radius: 50%;
}
.guide_area .list li a {
	font-size: 13px;
	font-weight: 600;
	color: #333;
}

.guide_area .info {
	margin-left: 5px;
}
.guide_area .info li {
	color: #666;
	font-size: 13px;
	font-weight: 600;
}
.guide_area .info li strong {
	font-size: 14px;
	color: #000;
}
.guide_area .info li a {
	font-size: 13px;
	font-weight: 600;
	color: #666;
}
.guide_area .info li .small {
	font-size: 10px;
}


/*******************************************************************************
 * FOOTER
 */
footer {
	background-color: #324755;
}
footer .menu_area {
	border-bottom: 1px solid #5d7484;
}
footer .menu_area .menu {
	display: flex;
	justify-content: space-between;
}
footer .menu_area .menu li {
	line-height: 49px;
	font-size: 12px;
	color: #b2bac0;
}
footer .menu_area .menu li a {
	color: #b2bac0;
}
footer .menu_area .menu li strong {
	color: #fff;
}
footer .info_area {
	padding: 15px 0 30px;
}
footer .info_area .copy {
	display: inline-block;
	margin: 6px 0 0 20px;
	font-size: 11px;
	color: #b2bac0;
	font-weight: 600;
	vertical-align: top;
}
footer .info_area .family_site {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 20;
	width: 180px;
	padding: 0 20px;
	line-height: 45px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background-color: #22b2a8;
	box-sizing: border-box;
	cursor: pointer;
}
footer .info_area .family_site:after {
	content: '';
	display: inline-block;
	position: absolute;
	right: 17px;
	top: 15px;
	width: 15px;
	height: 15px;
	background: url('../img/main2021/ico_arrow_down.png') no-repeat center center;
	transition: all ease 0.4s;
}
footer .info_area .family_site.on:after {
	transform: rotate(180deg);
}
footer .info_area .family_site .list {
	display: none;
	position: absolute;
	left: 0;
	bottom: 45px;
	z-index: 20;
	width: 100%;
	max-height: 350px;
	padding: 10px 0;
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
	overflow: auto;
}
footer .info_area .family_site .list li {
	padding: 5px 20px;
	line-height: 18px;
}
footer .info_area .family_site .list li a:hover {
	color: #ed0e65;
}

/* ¿¹¿Üó¸®) ¸ÞÀÎÆäÀÌÁö¿¡¼­ layer process À̹ÌÁö Ä÷¯ Á¶Àý */
.layer_process_box {
	border-radius: 50%;
	overflow: hidden;
	/* filter: hue-rotate(-560deg); */
	box-shadow: 0px 0px 15px 6px rgba(255,255,255,0.8);
}