@charset "utf-8";

#mainBanner{position:relative;float:left;width:68%;height:600px;padding:55px 50px;border-radius:15px;background:#353646;font-family:'notokr-regular'}

/* 메인 텍스트 */
#mainBanner .txt_area{position:relative;padding:30px 0 0 20px;color:#fff}
#mainBanner .txt_area .txt01{opacity:0;margin-left:20px;font-size:42px;line-height:1.3;word-break:keep-all;font-family:'notokr-thin'}
#mainBanner .txt_area .txt01 span{font-family:'notokr-bold'}
#mainBanner .txt_area .txt02{opacity:0;margin-top:35px;font-size:16px;color:rgba(255,255,255,.4);word-break:keep-all}
#mainBanner .pro{display:block;position:absolute;top:55px;right:50px;z-index:1;width:170px;border-radius:10px;font-size:15px;line-height:50px;color:rgba(255,255,255,.6);text-align:center;background:rgba(255,255,255,.1);transition:all .2s;-webkit-transition:all .2s;font-family:'notokr-medium'}

/* 대출상품 슬라이드 */
#mainBanner .slide_wrap{padding-top:90px}
#mainBanner .swiper-slide{position:relative}
#mainBanner .swiper-slide:after{position:absolute;content:'';top:35px;right:32px;width:3px;height:20px;background:url(/sh_img/index/main_banner/img/slide_dot.png) no-repeat}
#mainBanner .swiper-slide a{display:block;height:100%;padding:40px 30px;color:#fff;border-radius:15px;background-color:rgba(255,255,255,.1);transition:all .3s;-webkit-transition:all .3s}
#mainBanner .swiper-slide a p{margin-bottom:30px;font-size:20px;font-family:'notokr-bold'}
#mainBanner .swiper-slide a img{position:absolute;bottom:10px;right:30px}
#mainBanner .swiper-slide:before{opacity:0;position:absolute;content:'대출상품';top:-25px;left:20px;z-index:1;width:87px;height:46px;color:#353646;text-align:center;line-height:40px;background:url(/sh_img/index/main_banner/img/ballon.png) no-repeat;-webkit-transition:all .2s;transition:all .2s;font-family:'notokr-bold'}
#mainBanner .swiper-slide-active{position:relative}
#mainBanner .swiper-slide-active a{-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px);color:#777;background:#fff}
#mainBanner .swiper-slide-active a p{color:#222}
#mainBanner .swiper-slide-active:before{opacity:1;top:-45px}

/* 컨트롤러 */
#mainBanner .controls{position:absolute;top:30px;right:0}
#mainBanner .controls .arrow span{color:rgba(255,255,255,.5);cursor:pointer;transition:all .3;-webkit-transition:all .3s}
#mainBanner .controls .next{margin-left:85px}
#mainBanner .controls .swiper-pagination{position:absolute;z-index:-1;bottom:-1px;font-weight:700;color:#fff;font-family:'Play', sans-serif}
#mainBanner .controls .swiper-pagination span{margin:0 5px}

/* 반응형 메뉴 [s] */
@media (hover:hover){
#mainBanner .swiper-slide:not(.swiper-slide-active):hover a{background-color:rgba(255,255,255,.2)}
#mainBanner .controls .arrow span:hover{color:#fff}
}
@media (max-width:1400px){
#mainBanner .swiper-slide a p{margin-bottom:20px}
#mainBanner .txt_area .txt01{font-size:39px}
}
@media (max-width:1024px){
#mainBanner{float:none;width:100%;height:auto;margin:0 auto;padding:55px 45px}
#mainBanner .swiper-slide a img{max-width:58px;max-height:72px}
#mainBanner .txt_area .txt01{font-size:39px}
#mainBanner .txt_area .txt02{margin-top:20px}
}
@media (max-width:900px){
#mainBanner .swiper-slide a{padding:92px 25px 32px}
#mainBanner .swiper-slide a p{margin-bottom:5px}
#mainBanner .swiper-slide a img{left:18px;top:29px;bottom:auto;right:auto}
}
@media (max-width:768px){
#mainBanner{padding:45px 25px;background-image:url(/sh_img/index/main_banner/img/dv_bg.png);background-position:center;background-size:cover;background-repeat:no-repeat}
#mainBanner .pro{display:none}
#mainBanner .txt_area{padding:0}
#mainBanner .txt_area .txt01{font-size:30px}
#mainBanner .txt_area .txt02{margin-top:10px;font-size:15px;white-space:pre-line}
#mainBanner .txt_area .txt02 span{display:none}
#mainBanner .slide_wrap{padding-top:80px}
}
@media (max-width:480px){
#mainBanner{padding:40px 45px 35px}
#mainBanner .swiper-slide{text-align:center}
#mainBanner .swiper-slide a{padding:25px 0}
#mainBanner .swiper-slide a img{position:relative;left:auto;top:auto}
#mainBanner .txt_area{text-align:center}
#mainBanner .txt_area .txt01{word-break:keep-all}
}
@media (max-width:380px){
#mainBanner{padding:35px 25px 16px}
#mainBanner .txt_area .txt01{font-size:25px}
#mainBanner .txt_area .txt02{display:none}
}
/* 반응형 메뉴 [e] */