@charset "utf-8";

/* ==================================================
	공통 틀 CSS
================================================== */
.mcontents::before{
	content: '';
	position:absolute;
    top: 55rem;
    left: 0;
    width: 30%;	max-width: 50rem;
    height: 50%;	max-height: 75rem;
	background: url('../images/main/bg_befor.png') no-repeat;
	background-size: contain;
	z-index: -10;
}

.mcontents::after{
	content: '';
	position:absolute;
    top: 36rem;
    right: 5%;
    width: 30%;	max-width: 48rem;
    height: 50%;	max-height: 62rem;
	background: url('../images/main/bg_after.png') no-repeat;
	background-size: contain;
	z-index: -10;
}
.m_content {
	position: relative;
	width: 100%;
    max-width: var(--px-base);
    margin: 0 auto;
    padding-left: var(--spacing);
    padding-right: var(--spacing);
	overflow: hidden;
}

/* 모바일CSS */
@media screen and (max-width: 1920px) {
	.mcontents::before{
		top: 55rem;
		left: 0;
		width: 30%;	max-width: 50rem;
		height: 50%;	max-height: 75rem;
	}
	
	.mcontents::after{
		top: 36rem;
		right: 2%;
		width: 30%;	max-width: 48rem;
		height: 50%;	max-height: 62rem;
	}
}

/* ==================================================
	공통 사항
================================================== */
/* 버튼 */
a.mbtn {
	position: relative;
	display: inline-block;
	font-size: 1.7rem;
	vertical-align: middle;
	transition: all .25s ease;
	line-height: 1;
	color: #fff;
	background: #000000;
	border-radius: 50px;
	font-style: normal;
	font-weight: 600;
}

a.mbtn:hover,
a.mbtn:focus {
	background: #272727;
	color: #fff;
}

a.mbtn span {
	display: block;
	padding: 18px 75px 18px 45px;
	line-height: 1;
}

a.mbtn .mbtn_icon {
	position: absolute;
	right: 25px;
	top: 50%;
	padding: 0;
	-webkit-transition: right .25s ease;
	transition: right .25s ease-out
}

a.mbtn:hover .mbtn_icon {
	right: 20px;
}

.mbtn_link {
	width: 31px;
	height: 11px;
	margin-top: -7px;
	background: url('../images/icon/arrow.png') no-repeat 0 0;
}

/* 모바일CSS */
@media screen and (max-width:1200px) {

	/* 버튼 */
	a.mbtn {
		font-size: 1.6rem;
	}

	a.mbtn span {
		display: block;
		padding: 15px 65px 15px 35px;
		line-height: 1;
	}

	a.mbtn .mbtn_icon {
		right: 23px;
	}

	a.mbtn:hover .mbtn_icon {
		right: 18px;
	}
}

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

	/* 버튼 */
	a.mbtn {
		font-size: 1.5rem;
	}

	a.mbtn span {
		padding: 15px 60px 15px 30px;
	}
}

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

	/* 버튼 */
	a.mbtn {
		font-size: 1.4rem;
	}

	a.mbtn span {
		padding: 15px 55px 15px 25px;
	}

	a.mbtn .mbtn_icon {
		right: 20px;
	}

	a.mbtn:hover .mbtn_icon {
		right: 15px;
	}
}

/* ==================================================
	메인비주얼
================================================== */
.mainvisual {
/*	width: 100%;*/
	position: relative;
/*	height: 40rem;*/
    width: calc(66% - 1.5rem);
	border-radius: var(--rem-30);
	overflow: hidden;
}

.mainvisual .visual {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	max-height: 40rem;
}

.main-visual-con .slick-track,
.main-visual-con .slick-list {
	-webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}

.main-visual-con,
.main-visual-con .slick-list,
.main-visual-con .slick-track,
.main-visual-item {
	height: 100%;
	width: 100%;
}

.main-visual-con {
	z-index: 1;
}

/* 메인 비주얼 :: 이미지 */
.main-visual-item {
	position: relative;
	overflow: hidden;
}

.main-visual-item .main-visual-pc-img {
	width: 100%;
	height: 100%;
	background-size: cover !important;
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
	-webkit-transition: transform 4000ms ease-in-out;
	transition: transform 4000ms ease-in-out;
}

.main-visual-item:nth-child(1) .main-visual-pc-img {
	background: #fff url('../images/main/main_visual01.jpg?v=0401') no-repeat 50% 50%;
}

.main-visual-item:nth-child(2) .main-visual-pc-img {
	background: #fff url('../images/main/main_visual02.jpg?v=0401') no-repeat 50% 50%;
}

.main-visual-item:nth-child(3) .main-visual-pc-img {
	background: #fff url('../images/main/main_visual03.jpg?v=0401') no-repeat 50% 50%;
}

.main-visual-item .main-visual-m-img {
	display: none;
}

/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con {
	position: absolute;
	top: 30%;
	left: 0px;
	width: 100%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.main-visual-item .main-visual-txt-con .main-visual-txt1,
.main-visual-item .main-visual-txt-con .main-visual-txt2,
.main-visual-item .main-visual-txt-con .box_wrap {
	opacity: 0;
}

.main-visual-txt-inner {
	display: flex;
	padding-left: 12rem;
}

.main-visual-txt-all {}

.main-visual-item .main-visual-txt-con .main-visual-txt1 {
	font-size: var(--rem-26);
	font-weight: var(--font-sb);
	color: #fff;
	margin-bottom: 10px;
	line-height: 1.3;
}

.main-visual-item .main-visual-txt-con .main-visual-txt1 span {
	display: block;
	font-size: var(--rem-50);
}

.main-visual-item .main-visual-txt-con .main-visual-txt2 {
	font-size: var(--rem-19);
	color: #fff;
	font-weight: var(--font-md);
	line-height: 1.5;
}

/* 메인 비주얼 :: active효과 */
.main-visual-item.active-item .main-visual-pc-img {
/*	-webkit-transform: scale(1.06, 1.06) rotate(0.002deg);
	transform: scale(1.06, 1.06) rotate(0.002deg);*/
}

.main-visual-item.active-item .main-visual-txt1,
.main-visual-item.active-item .main-visual-txt2,
.main-visual-item.active-item .box_wrap {
	-webkit-animation: text-active-animation 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.main-visual-item.active-item .main-visual-txt-con .main-visual-txt1 {
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

.main-visual-item.active-item .main-visual-txt-con .main-visual-txt2 {
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
}

.main-visual-item.active-item .main-visual-txt-con .box_wrap {
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

@keyframes text-active-animation {
	from {
		opacity: 0;
		filter: Alpha(opacity=0);
		-webkit-transform: translateY(50px);
		transform: translateY(50px);
	}

	to {
		opacity: 1.0;
		filter: Alpha(opacity=100);
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

/* 메인 비주얼 :: 컨트롤러 */
.main-visual-control {
	position: absolute;
	bottom: 42%;
	left: 0;
	z-index: 99;
	width: 100%
}

.main-visual-control .inner {
/*	display: flex;*/
}

.slide-control {
	margin: 0 auto
}

/* Dot */
.main-visual-control .main-slide-dot {
	display: inline-block;
	vertical-align: middle;
	margin: -1px -8px 0 7px;
	/* 250131 추가 */
	padding: 6px 2rem;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 30px;
    position: absolute;
    bottom: -14rem;
    right: 4rem;
}

.main-visual-control .main-slide-dot li {
	position: relative;
	display: inline-block;
	margin-right: 12px;
	transition: all 0.8s
}

.main-visual-control .main-slide-dot li:after {
	position: absolute;
	content: "";
	width: 0;
	height: 6px;
	background-color: var(--brand-color-main);
	left: 25px;
	top: 6px;
	border-radius: 3px;
}

.main-visual-control .main-slide-dot li.slick-active {
	margin-right: 65px
}

.main-visual-control .main-slide-dot li.slick-active:last-child {
	margin-right: 45px
}

.main-visual-control .main-slide-dot li.slick-active:after {
	animation: LoadingBar 4s both;
	animation-delay: 0.2s
}

.main-visual-control .main-slide-dot li button {
	position: relative;
	display: inline-block;
	padding-left: 10px;
	font-weight: var(--font-bd);
	font-size: 14px;
	color: var(--color-gray5);
	opacity: 0.4
}

.main-visual-control .main-slide-dot li button:before {
	position: absolute;
	content: "0";
	left: 0;
	top: 0
}

.main-visual-control .main-slide-dot li.slick-active button {
	color: var(--brand-color-main);
	opacity: 1
}

@-webkit-keyframes LoadingBar {
	from {
		width: 0px;
	}

	to {
		width: 45px;
	}
}

@keyframes LoadingBar {
	from {
		width: 0px;
	}

	to {
		width: 45px;
	}
}

/* 화살표 */
.main-visual-control .main-arrow {
	display: inline-block;
	vertical-align: middle;
/*	width: 25px;*/
	text-align: center
}
.main-visual-control .main-arrow.main-arrow-next {
    position: absolute;
    right: var(--spacing);
}

.main-visual-control .main-arrow a {
	transition: all 0.3s;
	position: relative;
	display: block !important;
	/* 250131 추가 */
	width: 40px;	height: 40px;
	border-radius: 25px;
	border: 2px solid var(--brand-color-main);
	background: rgba(255, 255, 255, 0.20);
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(10px);
}
	
.main-visual-control .main-arrow.main-arrow-prev:hover a {
	transform: translateX(-5px)
}

.main-visual-control .main-arrow.main-arrow-next:hover a {
	transform: translateX(5px)
}

.main-visual-control .main-arrow a i {
	color: var(--brand-color-main);
	font-weight: bold;
	/* 250131 추가 */
	line-height: 36px;
}

/* 메인 비주얼 :: pause,play */
.main-visual-control .main-play-control {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	top: 1px;
	margin-left: 10px;
}

.main-visual-control .slick-control-btns {
	display: inline-block;
	vertical-align: top;
	margin-left: 5px;
}

.main-visual-control .slick-control-btns button {
	color: #fff;
	vertical-align: top;
}

.main-visual-control .slick-control-btns button i {
	vertical-align: top;
	font-size: 22px;
	position: relative;
}

.main-visual-control .slick-control-btns .slick-play-btn {
	display: none;
}

/* 모바일CSS */
@media screen and (max-width: 1100px) {
	/* 메인 비주얼 :: 이미지 */
	.mainvisual {
		width: calc(62% - 1.5rem);
	}

	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-inner {
		padding-left: 9rem;
	}
	
	.main-visual-item .main-visual-txt-con .main-visual-txt1 {
		font-size: var(--rem-22);
	}

	.main-visual-item .main-visual-txt-con .main-visual-txt1 span {
		font-size: var(--rem-40);
	}

	.main-visual-item .main-visual-txt-con .main-visual-txt2 {
		font-size: var(--rem-18);
	}

	/* Dot */
	.main-visual-control .main-slide-dot {
		padding: 4px 1.8rem;
		bottom: -12rem;
	}

	/* 화살표 */
	.main-visual-control .main-arrow a {
		width: 35px;
		height: 35px;
	}

	.main-visual-control .main-arrow a i {
		line-height: 31px;
	}
}

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

    .mainvisual {
        width: 100%;
        height: 34rem;
    }
	/* 메인 비주얼 :: 이미지 */
/*	.main-visual-item:nth-child(1) .main-visual-pc-img {
		background: url('../images/main/main_mvisual01.jpg?v=0401') no-repeat 50% 50%;
	}

	.main-visual-item:nth-child(2) .main-visual-pc-img {
		background: url('../images/main/main_mvisual02.jpg?v=0401') no-repeat 50% 50%;
	}

	.main-visual-item:nth-child(3) .main-visual-pc-img {
		background: url('../images/main/main_mvisual03.jpg?v=0401') no-repeat 50% 50%;
	}*/

	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-inner {
		display: block;
		padding-left: 8rem;
	}
	
	.main-visual-item .main-visual-txt-con {
		top: 30%;
	}

	.main-visual-item .main-visual-txt-con .main-visual-txt1 {
		font-size: 3.6rem;
	}

	.main-visual-item .main-visual-txt-con .main-visual-txt1 span {
		display: block;
	}

	.main-visual-item .main-visual-txt-con .main-visual-txt2 {
		font-size: 1.9rem;
	}

	/* Dot */
	.main-visual-control .main-slide-dot {
		padding: 4px 1.8rem;
		bottom: -12rem;
	}

	/* 화살표 */
	.main-visual-control .main-arrow a {
		width: 35px;
		height: 35px;
	}

	.main-visual-control .main-arrow a i {
		line-height: 31px;
	}
	
	/* 메인 비주얼 :: 컨트롤러 */
	.main-visual-control .main-slide-dot li {
		margin-right: 10px
	}

	.main-visual-control .main-slide-dot li button {
		font-size: 12px
	}

	.main-visual-control .main-arrow a i {
		font-size: 15px;
	}

	/* 메인 비주얼 :: pause,play */
	.main-visual-control .main-play-control {
		margin-left: 3px
	}

	.main-visual-control .slick-control-btns button i {
		font-size: 19px;
	}
}

@media screen and (max-width: 640px) {
    .mainvisual {
        height: 30rem;
    }

	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con {
		top: 26%;
	}

	.main-visual-item .main-visual-txt-con .main-visual-txt1 {
		font-size: var(--rem-20);
		margin-bottom: 4px;
	}

	.main-visual-item .main-visual-txt-con .main-visual-txt1 span {
		font-size: var(--rem-30);
	}

	.main-visual-item .main-visual-txt-con .main-visual-txt2 {
		font-size: var(--rem-17);
	}

	.main-visual-item .main-visual-txt-con .main-visual-txt2 br {
		display: none;
	}
	
	/* Dot */
	.main-visual-control .main-slide-dot {
		bottom: -10rem;
	}

	/* 화살표 */
	.main-visual-control .main-arrow a {
		width: 30px;
		height: 30px;
	}

	.main-visual-control .main-arrow a i {
		line-height: 26px;
	}
}

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

    .mainvisual {
        height: 24rem;
    }

	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-inner {
		padding-left: var(--rem-60);
	}
	
	.main-visual-item .main-visual-txt-con .main-visual-txt1 {
		font-size: var(--rem-18);
	}

	.main-visual-item .main-visual-txt-con .main-visual-txt1 span {
		font-size: var(--rem-30);
	}

	.main-visual-item .main-visual-txt-con .main-visual-txt2 {
		font-size: var(--rem-15);
	}
	
	/* Dot */
	.main-visual-control .main-slide-dot {
		bottom: -8rem;
	}

	/* 화살표 */
	.main-visual-control .main-arrow a {
		width: 26px;
		height: 26px;
	}

	.main-visual-control .main-arrow a i {
		line-height: 21px;
	}
}

/* ==================================================
	메인비주얼 + 농협
================================================== */
#main_Visual{
    margin-top: var(--header-hei);
	padding: 3rem 0;
}

#main_Visual .m_content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
/*    align-items: center;*/
    height: 40rem;
	padding-top: 4px;	padding-bottom: 8px;
}

/* 모바일CSS */
@media screen and (max-width: 1100px) {

	#main_Visual .m_content{
		height: 34rem;
	}
}
@media screen and (max-width: 880px) {

	#main_Visual {
		padding: 2.0rem 0 3rem;
	}

	#main_Visual .m_content{
		height: auto;
		gap: var(--rem-30);
	}
}
@media screen and (max-width: 450px) {

	#main_Visual {
		padding: 1.5rem 0 3rem;
	}
}

/* ==================================================
	농협
================================================== */
.main_nh {
    width: calc(34% - 1.5rem);
/*    height: 100%;*/
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr) [1];
    grid-template-columns: repeat(1, 1fr);
    gap: var(--rem-20);
}

.main_nh>div{
    height: 100%;
}

.main_nh a {
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border-radius: var(--rem-20);
	border: solid 1px #ffffff00;
}

.main_nh .m_nh_top{
    width: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr) [2];
    grid-template-columns: repeat(2, 1fr);
    gap: var(--rem-20);
}

.main_nh .m_nh_top a{
    width: 100%;
	padding-top: 2.4rem;
}

.main_nh .m_nh_top a:nth-child(1){
	background: url('../images/main/m_nh_top_bg01.png') center no-repeat #C8DEE9;
	background-size: contain;
}
.main_nh .m_nh_top a:nth-child(2){
	background: url('../images/main/m_nh_top_bg02.png') center no-repeat #ffffff;
	background-size: contain;
}

.main_nh .m_nh_top p{
	font-weight: var(--font-bd);
	font-size: var(--rem-17);
	line-height: 1.5;
    text-align: center;
}

.main_nh .m_nh_top span{
    display: block;
	font-size: var(--rem-20);
}

.main_nh .m_nh_btm a{
	position: relative;
	padding-left: var(--rem-40);
	color: var(--color-white);
	background: url('../images/main/main_nh_bg.jpg') center no-repeat;
    background-size: cover;
	overflow: hidden;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
	border: 0;
}

.main_nh .m_nh_btm a::after{
	content: '';
	position: absolute;
	top: 10%;
	right: 10%;
	width: 36%;
	height: 100%;
	background: url('../images/main/nh_symbol.png') center no-repeat;
    background-size: 90%;
}

.main_nh .m_nh_btm .logo{
	display: block;
	margin-bottom: 1rem;
	max-width: 76%;
}

.main_nh .m_nh_btm p{
	display: inline-block;
	padding-right: 5px;
}

.main_nh .m_nh_btm img{
	vertical-align: middle;
}

/* 모바일CSS */
@media screen and (max-width: 1100px) {

	.main_nh {
		width: calc(38% - 1.5rem);
	}
}

@media screen and (max-width: 880px) {
	.main_nh {
		width: 100%;
		display: flex;
		gap: var(--rem-22);
	}

	.main_nh a {
		border-radius: 10px;
	}

	.main_nh .m_nh_top {
        width: calc(66.666% - 1rem);
        gap: var(--rem-22);
	}

	.main_nh .m_nh_top a {
		width: 100%;
		padding: 2.2rem 3rem;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	}
	.main_nh .m_nh_top a:nth-child(1) {
        background-position-x: 138%;
        background-position-y: 120%;
        background-size: 55%;
	}
	.main_nh .m_nh_top a:nth-child(2) {
        background-position-x: 120%;
        background-position-y: bottom;
        background-size: 55%;
    }

	.main_nh .m_nh_top p {
		font-weight: var(--font-sb);
		font-size: var(--rem-16);
		text-align: left;
	}
	.main_nh .m_nh_top span {
		display: block;
		font-size: var(--rem-19);
	}

	.main_nh .m_nh_btm {
        width: calc(33.333% - 1rem);
	}

	.main_nh .m_nh_btm a {
        padding-top: var(--rem-24);
        padding-bottom: var(--rem-24);
        padding-left: var(--rem-30);
	}

	.main_nh .m_nh_btm .logo {
		max-width: 70%;
	}
}

@media screen and (max-width: 640px) {
	.main_nh {
        display: grid;
        gap: var(--rem-20);
    }

	.main_nh .m_nh_top {
        width: 100%;
        gap: var(--rem-20);
    }

	.main_nh .m_nh_top a:nth-child(1) {
        background-position-x: 140%;
        background-position-y: 101%;
        background-size: 54%;
    }

	.main_nh .m_nh_btm {
        width: 100%;
    }

	.main_nh .m_nh_btm a {
        padding-top: var(--rem-26);
        padding-bottom: var(--rem-26);
    }

	.main_nh .m_nh_btm a::after {
		top: 0%;
		right: 5%;
		width: 36%;
		height: 120%;
        background-size: contain;
	}
	
	.main_nh .m_nh_btm .logo {
        width: 22rem;
	}
}
@media screen and (max-width: 450px) {
	.main_nh {
        gap: var(--rem-15);
    }
}


/* ==================================================
	mainQuick
================================================== */
#mainQuick .quick_box{
    display: flex;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border-radius: 7rem 0 0 7rem;
	background: var(--color-white);
	overflow: hidden;
	font-weight: var(--font-bd);
	line-height: 1.3;
	margin: 4px 0 8px;
}

/* 금융상품 소개 */
#mainQuick .q_finance{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    flex-basis: 50%;
    width: 50%;
    padding: var(--rem-20) var(--rem-60);
    color: var(--color-white);
    background: linear-gradient(90deg, #29863A 0%, #37B24D 100%);
}

#mainQuick .q_finc_tit{
	position: relative;
	width: calc(35% - 2.5rem);
	padding-left: 6.6rem;
	background: url('../images/main/q_finc_tit.png') center left no-repeat;
    background-size: 5.25rem;
}

#mainQuick .q_finc_tit::after{
	content: '';
	position: absolute;
	top: 0;
	right: -2.5rem;
	width: 1px;
	height: 100%;
	background: var(--color-white);
	opacity: .2;
}

#mainQuick .q_finc_tit p{
	font-size: var(--rem-24);
}

#mainQuick .q_finance ul {
	width: calc(65% - 2.5rem);
    display: flex;
    flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}

#mainQuick .q_finance li a{
    position: relative;
    display: block;
    padding-top: var(--rem-60);
    text-align: center;
}

#mainQuick .q_finance li a::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 5rem;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

#mainQuick .q_finance li:nth-child(1) a::after{
	background-image: url('../images/main/q_finance_icon01.png');
}
#mainQuick .q_finance li:nth-child(2) a::after{
	background-image: url('../images/main/q_finance_icon02.png');
}
#mainQuick .q_finance li:nth-child(3) a::after{
	background-image: url('../images/main/q_finance_icon03.png');
}

/* 그외 링크 */
#mainQuick .q_comunity{
    flex-basis: 50%;
    width: 50%;
	padding: var(--rem-20) var(--rem-40);
}

#mainQuick .q_comunity ul{
	position: relative;
    display: flex;
    flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}

#mainQuick .q_comunity li{
    flex-basis: 25%;
    width: 25%;
	text-align: center;
	border-right: solid 1px rgba(0, 0, 0, 0.1);
}

#mainQuick .q_comunity li:last-child{
	border-right: 0;
}

#mainQuick .q_comunity a{
	position: relative;
	display: block;
	padding-top: var(--rem-60);
	text-align: center;
}

#mainQuick .q_comunity li a::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 5rem;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

#mainQuick .q_comunity li:nth-child(1) a::after{
	background-image: url('../images/main/q_comunity_icon01.png');
}
#mainQuick .q_comunity li:nth-child(2) a::after{
	background-image: url('../images/main/q_comunity_icon02.png');
}
#mainQuick .q_comunity li:nth-child(3) a::after{
	background-image: url('../images/main/q_comunity_icon03.png');
}
#mainQuick .q_comunity li:nth-child(4) a::after{
	background-image: url('../images/main/q_comunity_icon04.png');
}

/* 애니메이션 */
#mainQuick .q_finance li,
#mainQuick .q_comunity a{
	opacity: 0;
	transform: translateY(-50px);
	-webkit-transform: translateY(-50px);
	transition: all 1s cubic-bezier(0.42, 0.0, 0.58, 1.0);
	-webkit-transition: all 1s cubic-bezier(0.42, 0.0, 0.58, 1.0);
}

#mainQuick.active .q_finance li,
#mainQuick.active .q_comunity a{
	opacity: 1;
	transform: translateY(0);
	-webkit-transform: translateY(0);
}
/* 모바일CSS */
@media screen and (max-width:1280px) {

	#mainQuick .q_finance {
		padding: var(--rem-20) var(--rem-50);
	}

	#mainQuick p {
		font-size: var(--rem-16);
	}

	/* 금융상품 소개 */
	#mainQuick .q_finc_tit p {
        font-size: var(--rem-20);
    }

	/* 그외 링크 */
	#mainQuick .q_comunity {
		padding: var(--rem-20);
	}
}

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

	/* 금융상품 소개 */
	#mainQuick .q_finance {
		padding: var(--rem-20) var(--rem-30);
	}
	#mainQuick .q_finance p {
		font-weight: var(--font-md);
	}

	#mainQuick .q_finc_tit {
		width: calc(35% - 2rem);
		padding-left: 6rem;
		background-size: 5rem;
	}
	#mainQuick .q_finance li a{
		padding-top: var(--rem-50);
	}
	#mainQuick .q_finance li a::after {
		height: var(--rem-40);
	}

	/* 그외 링크 */
	#mainQuick .q_comunity a {
		padding-top: var(--rem-50);
	}
	#mainQuick .q_comunity li a::after {
		height: var(--rem-40);
	}
}

@media screen and (max-width:880px) {
	#mainQuick .quick_box {
		border-radius: 5rem 5rem 0 0;
	}

	/* 금융상품 소개 */
	#mainQuick .q_finance {
		flex-basis: 100%;
		width: 100%;
		padding: var(--rem-20) var(--rem-50);
	}

    #mainQuick .q_finc_tit {
        display: flex;
		align-items: center;
		height: 100%;
    }

	/* 그외 링크 */
	#mainQuick .q_comunity {
		flex-basis: 100%;
		width: 100%;
	}
}

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

	/* 금융상품 소개 */
	#mainQuick .q_finance {
        justify-content: space-between;
        padding: var(--rem-20) var(--rem-40);
	}

	#mainQuick .q_finc_tit {
        width: calc(40% - 10%);
    }
	#mainQuick .q_finc_tit::after {
		right: -35%;
	}

	#mainQuick .q_finance ul {
		width: calc(60% - 10%);
		justify-content: space-between;
	}
}

@media screen and (max-width:450px) {
	#mainQuick .quick_box {
		border-radius: 5rem 5rem 0 0;
	}

    #mainQuick p {
        font-size: var(--rem-15);
    }

	/* 금융상품 소개 */
	#mainQuick .q_finance {
        padding: var(--rem-26) var(--rem-20);
        text-align: center;
    }

	#mainQuick .q_finc_tit {
		display: none;
/*		width: 100%;
        padding-left: 4.5rem;
        background-size: 3.8rem;
        height: 3.8rem;*/
    }

	#mainQuick .q_finc_tit::after {
/*        right: -10%;*/
    }

    #mainQuick .q_finance ul {
		width: 100%;
		align-items: center;
    }

	#mainQuick .q_finance li {
		flex-basis: 33.3%;
		width: 33.3%;
		text-align: center;
        border-right: solid 1px rgba(255, 255, 255, 0.1);
	}

	#mainQuick .q_finance li a{
        padding-top: var(--rem-40);
		display: block;
    }
	#mainQuick .q_finance li:last-child {
        border-right: 0;
    }
	
    #mainQuick .q_finance li a::after {
        height: var(--rem-30);
    }

	/* 그외 링크 */
	#mainQuick .q_comunity {
        padding: var(--rem-26) 1rem;
    }

	#mainQuick .q_comunity a {
        padding-top: var(--rem-40);
    }

	#mainQuick .q_comunity li a::after {
        height: var(--rem-30);
    }
}

/* ==================================================
mainComunity
================================================== */
#mainComunity {
	margin: 7rem 0;
}

#mainComunity .m_content {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

#mainComunity .comun_box{
	flex-basis: calc(50% - 1rem);
	width: calc(50% - 1rem);
    padding: 4rem 5.5rem 3rem;
	border-radius: 3rem;
	background: var(--color-white);
}

#mainComunity .comun_tit {
    position: relative;
    margin-bottom: var(--rem-26);
	padding-bottom: var(--rem-20);
    color: var(--color-black);
    text-align: var(--text-ag-left);
	border-bottom: solid 1px rgba(33, 37, 41, 0.5);
}

#mainComunity .comun_box  a{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#mainComunity .comun_tit .mtit{
	font-weight: var(--font-bd);
	font-size: var(--rem-24);
}

#mainComunity .comun_tit .mbtn_more {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 0;
	width: var(--rem-30);
	height: var(--rem-30);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#mainComunity .comun_box .tit{
	overflow: hidden;
	color: #212529;
	width: calc(100% - 10rem);
	text-overflow: ellipsis;
	font-size: var(--rem-16);
	font-weight: var(--font-rg);
}

#mainComunity .comun_box .date{
	font-weight: var(--font-md);
	font-size: var(--rem-16);
	color: var(--color-gray3);
} 


#mainComunity .comun_box .point .date{
    width: 8rem;
    height: 8rem;
    /* flex-basis: 8rem; */
    border: solid 4px #2F83F7;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    font-weight: var(--font-bd);
    text-align: center;
    gap: 0;
    align-content: center;
    justify-content: center;
    padding: 0rem 0;
}

#mainComunity .comun_box .point span{
	font-size: var(--rem-13);
	color: var(--color-gray5);
}

#mainComunity .comun_box .point .day{
	font-size: var(--rem-30);
	color: var(--color-gray5);
}

#mainComunity .comun_box .point .tit{
	font-weight: var(--font-sb);
	font-size: var(--rem-18);
	line-height: 1.4;
}


#mainComunity .comun_box:not(.gallery) .list{
	padding-top: var(--rem-30);
	padding-bottom: var(--rem-15);
	border-bottom: solid 1px var(--color-gray2);
}

#mainComunity .comun_box:not(.gallery) .list li+li{
	margin-top: var(--rem-15);
}


#mainComunity .comun_box .list .tit{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 공지사항 */
#mainComunity .comun_box.notic{
	border: solid 6px #ECF4FF;
}

#mainComunity .comun_box.notic .comun_tit .mtit span{
	color: #2F83F7;
}

#mainComunity .comun_box.notic .comun_tit .mbtn_more {
	background: rgba(47, 130, 247, 0.5);
}

#mainComunity .comun_box.notic .point .date {
	gap: 3px;
    border: solid 4px #2F83F7;
}

/* 경영공시 */
#mainComunity .comun_box.disclosure{
	border: solid 6px #EEF6F9;
}

#mainComunity .comun_box.disclosure .comun_tit .mtit span{
	color: #09AFC8;
}

#mainComunity .comun_box.disclosure .comun_tit .mbtn_more {
	background: rgba(9, 174, 200, 0.5);
}

#mainComunity .comun_box.disclosure .point .date {
    border: solid 4px #09AFC8;
}

/* 운영공개 */
#mainComunity .comun_box.operation{
	border: solid 6px #FFF0F6;
}

#mainComunity .comun_box.operation .comun_tit .mtit span{
	color: #E64980;
}

#mainComunity .comun_box.operation .comun_tit .mbtn_more {
	background: rgba(230, 73, 128, 0.5);
}

#mainComunity .comun_box.operation .point .date {
    border: solid 4px #E64980;
}

/* 갤러리 */
#mainComunity .comun_box.gallery{
	border: solid 6px #E6FCF5;
}

#mainComunity .comun_box.gallery .comun_tit .mtit span{
	color: #0CA678;
}

#mainComunity .comun_box.gallery .comun_tit .mbtn_more {
	background: rgba(33, 37, 41, 0.4);
}

#mainComunity .comun_box.gallery .point .date {
    border: solid 4px #0CA678;
}

#mainComunity .comun_box.gallery .list {
    width: 100%;
}

#mainComunity .comun_box.gallery .list ul{
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

#mainComunity .comun_box.gallery .list li {
    flex-basis: calc(50% - 1rem);
    width: calc(50% - 1rem);
}

#mainComunity .comun_box.gallery .list a {
    display: block;
}

#mainComunity .comun_box.gallery .pic {
    position: relative;
    width: 100%;
	height: 0;
	padding-top: 67.5%;
    border-radius: 6px;
    overflow: hidden;
    background-color: #FFFFFF;
}

#mainComunity .comun_box.gallery .pic .img {
    position: absolute;
	top: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    display: block;
/*    background-size: contain !important;*/
}

#mainComunity .comun_box.gallery .list .tit {
    padding-top: 1.5rem;
    width: 100% ;
}

/* 애니메이션 */
#mainComunity .comun_box:nth-child(odd) {
	opacity: 0;
	transform: translateX(-50px);
	-webkit-transform: translateX(-50px);
	transition: all 1s cubic-bezier(0.42, 0.0, 0.58, 1.0);
	-webkit-transition: all 1s cubic-bezier(0.42, 0.0, 0.58, 1.0);
}

#mainComunity .comun_box:nth-child(even) {
	opacity: 0;
	transform: translateX(50px);
	-webkit-transform: translateX(50px);
	transition: all 1s cubic-bezier(0.42, 0.0, 0.58, 1.0);
	-webkit-transition: all 1s cubic-bezier(0.42, 0.0, 0.58, 1.0);
}

#mainComunity .active .comun_box:nth-child(odd),
#mainComunity .active .comun_box:nth-child(even) {
	opacity: 1;
	transform: translateX(0);
	-webkit-transform: translateX(0);
}

/* 모바일CSS */
@media all and (max-width:1100px) {
	#mainComunity .comun_box {
		padding: 4rem 4.5rem 2.6rem;
	}
}

@media all and (max-width:880px) {
	#mainComunity {
		margin: var(--rem-60) 0;
	}

	#mainComunity .comun_box {
		/* flex: unset; */
		flex-basis: 100%;
		width: 100%;
		border-radius: 2rem;
	}
}

/* ==================================================
	mainCustomer
================================================== */
#mainCustomer{
	padding: var(--rem-30) 0;
	background-color: rgba(23, 75, 159, 0.08);
}

.customer {
	width: 100%;
	opacity: 0;
	transform: translateY(30px);
}

.customer.active {
	opacity: 1;
	transform: translateY(0);
	transition: all 0.6s 0.3s;
}

#bannerzone {
	position: relative;
}

#bannerzone .list {
}

#bannerzone .mainbanner_left {
	padding-top: var(--rem-40);
}

#bannerzone .list ul {
	width: 200%;
}

#bannerzone .list li {
	float: left;
	width: 245px;
	max-width: 20%;
	padding: 10px;
}

#bannerzone .list li a{
	display: block;
	text-align: center;
	background: var(--color-white);
	border-radius: 8px;
	box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.10);
	overflow: hidden;
}

#bannerzone .list img {
	width: 100%;
}

#bannerzone .bx-controls {
	position: absolute;
    right: 12px;
    top: 2rem;
    width: 8rem;
	transform: translateY(-50%);
}

#bannerzone .bx-controls div {
	display: inline;
}

#bannerzone .bx-controls a {
	overflow: hidden;
	float: left;
	width: 3rem;
	height: 3rem;
    border-radius: 50%;
    background: var(--color-gray3);
	text-align: center;
	line-height: 2.4rem;
}

#bannerzone .bx-controls a:before {
	display: block;
	font-family: 'xeicon';
	font-size: 1.6rem;
	color: var(--color-white);
	content: "\e93b";
}

#bannerzone .bx-controls-direction .bx-next {
	float: right;
}

#bannerzone .bx-controls-direction .bx-next:before {
	content: "\e93e";
}

#bannerzone .bx-controls-auto-item .active {
	display: none;
}

#bannerzone .bx-controls-auto-item a {
	border-right: 0 none;
	border-left: 0 none;
	display: none;
}

#bannerzone .bx-controls-auto-item a::before {
	content: "\ea3b";
}

#bannerzone .bx-controls-auto-item .bx-start::before {
	content: "\ea3e";
}

/* 모바일CSS */
@media screen and (max-width:1023px) {
}

@media screen and (max-width:800px) {
	#bannerzone .list li {
    float: left;
    width: 200px !important;
    max-width: 20% !important;
    padding: 0;
	}
}