@charset "utf-8";

/* ====================
	메인
==================== */
.line-divide{margin:40rem 0 !important;border-top:12rem solid #f8f8f8;}

/* swiper */
.page-wrap.main .swiper-pagination{position:static;display:inline-flex;align-items:center;gap:0 6rem;white-space: nowrap;}
.page-wrap.main .swiper-pagination .swiper-pagination-bullet{display:inline-flex;width:6rem;height:6rem;margin:0 !important;border-radius:12rem;background-color:#1e5bc5;opacity:0.4;transition: width .4s;}
.page-wrap.main .swiper-pagination .swiper-pagination-bullet-active{width:16rem;opacity: 1;}

.page-wrap.main .swiper-controls{display:inline-flex;align-items: center;width:auto;}
.page-wrap.main .swiper-pagination-fraction{gap:0 1rem;font-size:13rem;color:#666;}
.page-wrap.main .swiper-pagination-fraction .swiper-pagination-current{font-weight: 500;color:var(--color-black-0);}

.popup-wrap .swiper-controls {position:static; display: inline-flex;align-items: center;margin: 10px 0px;}


/* 메인 - 비주얼 */
.main-screen{position:relative;}
.screen-item .item-title{display:block;font-size:24rem;font-weight:300;color:#fff;line-height:1.3;}
.screen-item .item-title.sm{font-size:20rem;line-height: var(--line-height-20);}
.screen-item .item-title .sub{display:block;margin-bottom:8rem;font-size:16rem;font-weight: 500;line-height:1.12;}
.screen-item .item-desc{margin-top:8rem;font-size:13rem;color:#fff;line-height:1.34;}
.screen-item .item-title span,
.screen-item .item-desc span{font-weight:600;}
.screen-item .item-title .sm{font-size:18rem;}
.screen-item .item-link{display:inline-flex;align-items:center;margin-top:16rem;font-size:12rem;font-weight:500;color:#fff;line-height: var(--line-height-12);}
.screen-item .item-link::after{content: '';display:inline-flex;width:12rem;height:10rem;margin-left:6rem;background: url(../images/main/link_arrow.png) no-repeat center /auto 100%;}
.main-screen.sub{padding:0;background:#fff;}
.main-screen.sub .screen-item{min-height:240rem;padding:76rem 24rem 93rem;border-radius:0 0 24rem 24rem;background-color: #4949db;}
.main-screen.sub .screen-info{margin:-79rem 24rem 0;border-radius:16rem;background-color:#fff;box-shadow:0 4rem 8rem rgba(0, 0, 0, .08);} 
.main-screen.sub .screen-info .info-cont{display:flex;align-items:flex-start;gap:0 24rem;height:123rem;padding:28rem 24rem 24rem;}
.main-screen.sub .screen-info .info-cont .item{flex:1;display:inline-flex;flex-direction: column;height:100%;}
.main-screen.sub .screen-info .info-cont .item .tit:after{content: '';display: inline-block;margin:4rem 0 0 4rem;width:12rem;height:12rem;background: url(../images/main/btn_arrow_gray.png) no-repeat center / auto 100%;vertical-align: top;}
.main-screen.sub .screen-info .info-cont .item strong{display: inline-flex;justify-content: space-between;align-items: center;margin-top:20rem;font-size:32rem;font-weight:600;color:#154292;line-height: 1.2;}
.main-screen.sub .screen-info .info-cont .item strong::before{content:'';display:inline-block;width:40rem;height:40rem;background-repeat: no-repeat;background-size: auto 100%;background-position: center;}
.main-screen.sub .screen-info .info-cont .info1 strong::before{background-image: url(../images/main/ico_info1.png);}
.main-screen.sub .screen-info .info-cont .info2 strong::before{background-image: url(../images/main/ico_info2.png);}
.main-screen.sub .screen-info .info-etc{display:flex;align-items:center;gap:0 24rem;padding:19rem 22rem 16rem;background: url(../images/main/dot_line.png) repeat-x left top / auto 1rem;}
.main-screen.sub .screen-info .info-etc .item{flex: 1;display:inline-flex;justify-content: space-between;align-items:center;font-size:13rem;color:#050f26;line-height: var(--line-height-13);}
.main-screen.sub .screen-info .info-etc .item .btn{font-size:16rem;font-weight:500;line-height:var(--line-height-16);color:#154292;text-decoration: underline;text-underline-position: under;}

.main-screen.main .slide1{background-color: #476EF3;}
.main-screen.main .slide2{background-color: #796AFF;}
.main-screen.main .slide3{background-color: #2298F2;}
.main-screen.main .slide4{background-color: #00A1A6;}
.main-screen.main .slide5{background-color: #EC51A4;}
.main-screen.main .screen-item{overflow:hidden;}
.main-screen.main .swiper-slide{padding:68rem 24rem 73rem;border-radius: 0 0 0 32rem;}

.main-screen.main .item-title{transform:translateX(20%);opacity: 0;transition: all 0.7s cubic-bezier(0.4, 0, 1, 1);}
.main-screen.main .item-desc{transform:translateX(20%);opacity: 0;transition: all 1s cubic-bezier(0.390, 0.575, 0.565, 1.000);}
.main-screen.main .item-link{opacity: 0;transition: all 1s cubic-bezier(0.390, 0.575, 0.565, 1.000); transition-delay: .8s;}
.main-screen.main .img{position: absolute;bottom:-16rem;right:0;width:180rem;transform:translateY(16rem);opacity: 0;transition: all 1.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);transition-delay: .2s;}
.swiper-slide-active .screen-item .item-title{transform: translateX(0);opacity: 1;}
.swiper-slide-active .screen-item .item-desc{transform: translateX(0);opacity: 1;}
.swiper-slide-active .screen-item .item-link{opacity: 1;}
.swiper-slide-active .screen-item .img{transform:translateY(0);opacity: 1;}

.main-screen.main .slidem{background-color: #12264b;height: 238px;}
.main-screen.main .item-desc.m{margin-top:72rem;}
.main-screen.main .imgm{position: absolute;bottom:-1rem;right:0rem;width:272rem;transition: all 1.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);transition-delay: .2s;}
.item-titlem{opacity: 1;top:48rem;left:8%;width:125px;position: absolute;z-index: 100;} /*left:-70rem;top:-12rem}*/
.item-titlem img{width: 100%;}

.main-screen .swiper-controls{bottom:32rem;left:24rem;padding:7rem 12rem;height:20rem;border-radius:16rem;background-color: rgba(0, 0, 0, .12);}
.main-screen .swiper-controls .swiper-pagination .swiper-pagination-bullet{background-color: rgba(0, 0, 0, .32);opacity: 1;}
.main-screen .swiper-controls .swiper-pagination .swiper-pagination-bullet-active{background-color: #fff;}
.page-wrap.main .main-screen .swiper-controls .play{background-image: url(../images/main/btn_play_white.png);}
.page-wrap.main .main-screen .swiper-controls .stop{background-image: url(../images/main/btn_pause_white.png);}

/* 메인 - 로그인 */
.main-login{margin:48rem 24rem 0;}
.main-login .box-member{position:relative;min-height:139rem;padding:32rem 24rem 24rem;border-radius: 16rem;border:1rem solid #e5e5e5;background-color:#fff;box-shadow:0 2rem 8rem rgba(0, 0, 0, .08);z-index: 1;}
.main-login .box-member .title{font-size:16rem;font-weight: 300;color:var(--color-black-1);line-height: var(--line-height-16);}
.main-login .box-member .title span{font-weight: 600;}
.main-login .box-member .btn-group{display:inline-flex;justify-content:space-between;width:100%;margin-top:24rem;padding:0;}
.main-login .box-member .btn-group .btn{display:inline-flex;align-items:center;justify-content: center;width:100%;height:40rem;margin:0 4rem;border-radius: 20rem;background-color:#154292;font-size:13rem;font-weight:500;line-height: var(--line-height-13);color:#fff;box-shadow:0 4rem 8rem rgba(0, 0, 0, .2);}
.main-login .box-member .btn-group .btn::before{content: '';display:inline-flex;width:20rem;height:20rem;margin-right:4rem;background-position: center;background-repeat: no-repeat;background-size: auto 100%;}
.main-login .box-member .person::before{background-image: url(../images/main/ico_login_person.png);} 
.main-login .box-member .building::before{background-image: url(../images/main/ico_login_building.png);} 
.main-login .box-free{margin-top:-24rem;padding:36rem 20rem 12rem;border-radius:0 0 16rem 16rem;background-color: #f6f8fd;box-shadow: -2rem 4rem 8rem rgba(0, 0, 0, .08);transition-delay: .5s;}
.main-login .box-free .title{font-size:13rem;font-weight: 300;line-height:1.2;}
.main-login .box-free .btn-group{display:inline-flex;justify-content:flex-end;gap:0 12rem;width:100%;padding:0;margin-top:6rem;}
.main-login .box-free .btn-group li{line-height:1;}
.main-login .box-free .btn-group .btn{display:inline-flex;align-items:center;font-size:13rem;font-weight:500;color:#385673;}
.main-login .box-free .btn-group .btn:after{content: '';display:inline-block;width:12rem;height:12rem;margin-left:4rem;background: url(../images/main/btn_arrow.png) no-repeat center / auto 100%;}

/* 메인 - 자주 찾는 서비스 */
.main-service{margin:40rem 24rem 0;}
.main-service .title{font-size:20rem;font-weight: 600;color:#050f26;}
.main-service .service-list ul{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24rem 12rem;margin-top:24rem;}
.main-service .service-list ul li{position:relative;flex:1 0 33.33%;}
.main-service .service-list ul li a{display: flex;flex-direction: column;align-items: center;gap:8rem 0;text-align: center;letter-spacing:-.48rem;}
.main-service .service-list ul li a::before,
.main-service .service-list ul li a::after{content: '';display: inline-block;width:80rem;height:80rem;}
.main-service .service-list ul li a::before{border-radius:50%;background-color:#F9F8FF;transition: .9s var(--easeOutSine);transform:scale(0.1);transition-delay:0.45s;}
.main-service .service-list.on ul li a::before{transform:scale(1);}
.main-service .service-list ul li a::after{position:absolute;top:0;left:50%;margin-left:-40rem;background-repeat: no-repeat;background-size: auto 100%;background-position: center;}
.main-service .item1 a::after{background-color: transparent;background-image: url(../images/main/service_1.png);}
.main-service .item2 a::after{background-color: transparent;background-image: url(../images/main/service_2.png);}
.main-service .item3 a::after{background-color: transparent;background-image: url(../images/main/service_3.png);}
.main-service .item4 a::after{background-color:transparent;background-image: url(../images/main/service_4.png);}
.main-service .item5 a::after{background-color: transparent;background-image: url(../images/main/service_5.png);}
.main-service .item6 a::after{background-color: transparent;background-image: url(../images/main/service_6.png);}
.main-service .item7 a::after{background-color: transparent;background-image: url(../images/main/service_7.png);}
.main-service .item8 a::after{background-color: transparent;background-image: url(../images/main/service_8.png);}
.main-service .item9 a::after{background-color: transparent;background-image: url(../images/main/service_9.png);}

.main-service .title.on{transition-delay:0.2s;}
.main-service .service-list.on {transition-delay:0.3s;}

/* 메인 - 상품 */
.main-prd{position:relative;margin:40rem 0 0;padding-bottom:36rem;overflow: hidden;}
.main-prd::before{content: '';position: absolute;left:0;right:0;bottom:0;height:176rem;background-color: #f8f8f8;z-index: -1;}
.main-prd .title{margin:0 24rem -24rem;font-size:20rem;font-weight:600;line-height: var(--line-height-20);color:var(--color-black-1);}
.main-prd .title.on{transition-delay:0.4s;}
.main-prd .prd-item{display:flex;flex-direction: column;justify-content:stretch; min-height:172rem;height:100%;padding:32rem 16rem 24rem 24rem;border:1rem solid #dbdbdb;border-radius:12rem;background-color:#fff;box-shadow:0 4rem 12rem rgba(0, 0, 0, .04);}
.main-prd .prd-item .item-title{font-size: 18rem;font-weight: 500;color:var(--color-black-1);line-height: 1.2;}
.main-prd .prd-item .item-title span{margin-left:8rem;font-size:16rem;font-weight: 300;}
.main-prd .prd-item .item-desc{margin-top:12rem;color:var(--color-primary);}
.main-prd .prd-item [class^="ico"]{display: block;align-self: flex-end;width:112rem;min-height:80rem;margin-top:13rem;background-position: center;background-repeat: no-repeat;background-size: auto 100%;transition: .4s var(--easeOutSine);opacity: 1;}
.main-prd .prd-item .ico1{background-image: url(../images/main/main_prd_1.png);}
.main-prd .prd-item .ico2{background-image: url(../images/main/main_prd_2.png);}
.main-prd .prd-item .ico3{background-image: url(../images/main/main_prd_3.png);}
.main-prd .prd-item .ico4{background-image: url(../images/main/main_prd_4.png);}
.main-prd .prd-item .ico5{background-image: url(../images/main/main_prd_5.png);}
.main-prd .prd-item .ico6{background-image: url(../images/main/main_prd_6.png);}
.main-prd .prd-item .ico7{background-image: url(../images/main/main_prd_7.png);}
.main-prd .prd-item .ico8{background-image: url(../images/main/main_prd_8.png);}
.main-prd .prd-item .ico9{background-image: url(../images/main/main_prd_9.png);}
.main-prd .swiper-container{padding:48rem 0 0 0;margin:0;}
.main-prd .swiper-container.on{transition-delay:0.8s;}
.main-prd .swiper-container .swiper-slide{margin:0;width:240rem;height:auto;transition: transform 0.3s, all 0.3s;transform:scale(1);}
.main-prd .swiper-container .swiper-slide:not(.swiper-slide-active){transform:scale(0.84);}
.main-prd .swiper-container .swiper-slide:not(.swiper-slide-active) [class^="ico"]{opacity: 0;}

.main-prd .swiper-container .swiper-controls{top:0;right:24rem;padding:7rem 12rem;width:auto;height:24rem;border-radius:12rem;background-color:#f6f8fd;}

/* 메인 - 공지사항 */
.main-notice{margin:32rem 24rem 0;}
.main-notice .title,
.main-notice .title a{display:inline-flex;align-items:center;font-size:16rem;font-weight:600;color:#222;line-height: var(--line-height-16);}
.main-notice .title::before{content:'';display:inline-block;width:16rem;height:16rem;margin-right:6rem;background: url(../images/main/ico_notice.png) no-repeat center / auto 100%;}
.main-notice .title.on{transition-delay:0.4s;}
.main-notice .notice_list{position:relative;height:48rem;padding:13rem 16rem 14rem;margin-top:8rem;border-radius:8rem;background-color: #f9faff;}
.main-notice .notice_list.on{transition-delay:0.8s;}
.main-notice .noti_item{display:flex;align-items:center;gap:0 16rem;}
.main-notice .noti_item a em{font-weight:500;color:#154292;}
.main-notice .noti_item a{max-width:100%;text-overflow:ellipsis;overflow: hidden;white-space: nowrap;}
.main-notice .noti_item .date{flex: 0 0 auto;margin-left: auto;font-size:13rem;color: #666;line-height: var(--line-height-13);}
.main-notice .btn-more::after{content: '';width:20rem;height:20rem;background: url(../images/main/btn_more.png) no-repeat center / auto 100%;}

.main-notice .notice_list .swiper-container{overflow: hidden;}
.main-notice .notice_list .swiper-slide{height:21rem !important;}
.main-notice .swiper-controls{top:-20rem;right:0;padding:0;border-radius:0;background:none;}
.main-notice .swiper-controls .swiper-pagination{transform:none;}

/* 메인 - 고객지원센터 */
.main-help-desk{position:relative;padding-top:32rem;margin:24rem 24rem 0;border-top:1rem solid #e5e5e5;}
.main-help-desk::before{content: '';position:absolute;top:32rem;right:0;width:48rem;height:48rem;border-radius:50%;background: #f8f8f8 url(../images/main/ico_help_desk.png) no-repeat center /auto 24rem;}
.main-help-desk .title{font-weight:500;color:#222;}
.main-help-desk .tel{margin-top:12rem;font-size: 18rem;font-weight: 600;color:#154292;line-height: var(--line-height-18);}
.main-help-desk .tel a{color:inherit;font-weight: inherit;}
.main-help-desk .time{display:block;margin-top:8rem;font-size:13rem;color:#666;line-height: var(--line-height-13);}
.main-help-desk .btn-group{display:inline-flex;gap:0 8rem;margin-top:24rem;padding:0;}
.main-help-desk .btn-group .btn{display:inline-flex;align-items:center;height:32rem;padding:0 16rem;border-radius:16rem;font-size:13rem;font-weight:500;line-height: var(--line-height-13);box-shadow:0 0 4rem rgba(5, 15, 38, .08);}
.main-help-desk .btn-group .btn::after{content: '';display:inline-block;width:12rem;height:12rem;margin-left:4rem;background:url(../images/main/btn_arrow.png) no-repeat center / auto 100%;}
.main-help-desk .btn-group .btn.primary{background-color: var(--color-primary);color:#fff;}
.main-help-desk .btn-group .btn.primary::after{background-image:url(../images/main/btn_arrow_white.png);}


/* 서브메인 - 대리점 */
.main-agency{margin-top:40rem;padding:0 24rem;}
.main-agency .title{font-size:20rem;color:#050f26;font-weight: 600;}
.main-agency .title .point-line{position:relative;color:var(--color-primary);}
.main-agency .title .point-line::after{content: '';position:absolute;bottom:3rem;left:0;width:100%;height:8rem;border-radius: 4rem;background-color: rgba(30, 91, 197, .08);}
.main-agency .title .point-line span{font-size: 16rem;}
.main-agency .info{position:relative;padding:24rem;margin-top:24rem;border-radius:16rem;background-color: #f9faff;box-shadow:0 4rem 8rem rgba(0, 0, 0, .08);}
.main-agency .info::before{content: '';position:absolute;top:-24rem;right:0;width:100rem;height: 100rem;background: url(../images/main/agency_info.png) no-repeat center / auto 100%;}
.main-agency .info .info-title{display:block;padding:0 70rem 12rem 0;border-bottom:1rem solid #e5e5e5;font-size:16rem;line-height: var(--line-height-16);}
.main-agency .info .info-title span{font-weight: 600;}
.main-agency .info .point{color:#1e5bc5;}
.main-agency .info .info-list{margin-top:16rem;}
.main-agency .info .info-list li{padding:0 0 0 17rem;background: url(../images/main/ico_check.png) no-repeat left top 1rem / auto 16rem;font-size:13rem;line-height: var(--line-height-13);}
.main-agency .info .info-list li ~ li{margin-top:8rem;}
.main-agency .info .info-list .point{font-size:14rem;font-weight: 500;}
.main-agency .info  .info-desc{margin-top:16rem;font-size:13rem;color:#666;line-height: var(--line-height-13);}
.main-agency .card{margin:24rem -24rem 0;padding:0 24rem;}
.agency-item{display:flex;flex-direction: column;justify-content: flex-start;gap:16rem 0;height:100%;padding:24rem;border-radius:8rem;border:1rem solid #e5e5e5;box-shadow:0 4rem 8rem rgba(0, 0, 0, .08);}
.agency-item .head{display: flex;justify-content: space-between;align-items: center;}
.agency-item .item-title{flex:1;margin-right:4rem;font-size:16rem;font-weight: 600;line-height: var(--line-height-16);}
.agency-item .item-area{margin-left:auto;font-size:13rem;color:#666;line-height: var(--line-height-13);}
.agency-item .item-addr{font-size:14rem;color:#385673;word-break: keep-all;}
.main-agency .swiper-container{padding-bottom:16rem;}
.main-agency .swiper-container .swiper-controls{width:calc(100% - 48rem);}

/* no-data */
.no-data.ico-box{margin-top:24rem;padding:16rem;border:1rem solid #e5e5e5;border-radius:8rem;}
.no-data.ico-box::before{content:'';display:inline-block;width:32rem;height:32rem;margin-bottom:8rem;background: url(../images/main/ico_no_data.png) no-repeat center / auto 100%;vertical-align: top;}


@media screen and (min-width: 530px) and (max-width: 600px){
	.main-screen.main .imgm{right: 18%}
	.item-titlem{width:128px;left:15%;}
	}
@media screen and (min-width: 768px) and (max-width: 1023px){
	.main-screen.main .imgm{right:20%;}
	.item-titlem{width:170px;top:35rem;left:50%;margin-left:-166px;}
	}
@media screen and (min-width: 1024px) and (max-width: 1100px){
	.main-screen.main .imgm{right:26%;}
	.item-titlem{width:170px;top:35rem;left:50%;margin-left:-166px;}
}