/* 포커스 */
/* 키보드로 버튼에 포커스 시 */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
.swiper-pagination-bullet:focus-visible {
  outline: 3px solid #000;
}

/* 마우스, 터치로 버튼에 포커스 시 */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
select:focus:not(:focus-visible),
input:focus:not(:focus-visible),
.swiper-pagination-bullet:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

/* 공통 */
input, select, textarea, optgroup, button {font-family: 'Pretendard', 'sans-serif';}
.head-title {font-size:20px; line-height:1.5; font-weight:bold;}
.head-title-sm {font-size:18px; line-height:1.33; font-weight:bold;}
.head-title-lg {font-size:28px; line-height:1.21; font-weight:bold;}
.head-title-mid {font-size:26px; line-height:1.15; font-weight:bold;}
.fl-right {float: right;}
.inner-box {padding:20px;}
.mn-guide-banner {margin-top: 0; padding: 0;}
.fs-13 {font-size: 13px !important;}

/* 메인 튜토리얼 스와이퍼 버튼 */
.swiper-button-next, .swiper-button-prev {width: 24px; height: 24px;top: 63%;}
.swiper-button-next {background: url(../images/sub/new/next_btn.png)no-repeat center / 100% auto;}
.swiper-button-prev {background: url(../images/sub/new/prev_btn.png)no-repeat center / 100% auto;}
.swiper-button-next::after, .swiper-button-prev::after {display: none;}
.swiper-button-next span {color: #000;}

/* 메인 상단정보 */
.mn-head-wrap{display: flex; align-items: center; padding:19px 10px 5px 20px;}
.mn-head-wrap .logo{width:72px; height:22px; background:url('../images/main/logo_main_new.png') no-repeat 0/100%;}
.mn-head-wrap .logo > a {width: 100%;height: 100%;}
.mn-head-wrap .slogan{width:80px; height:30px; background:url('../images/main/slogan_main.png') no-repeat 0/100%;}
.mn-head-wrap .mh-btn {display: flex; margin-left: auto;}
.mn-head-wrap .btn-mypage{width:36px;height:30px;background:url('../images/main/btn_ico_mypage.png') no-repeat center/16px;}
.mn-head-wrap .btn-noti{position:relative; width:37px;height:30px; background:url('../images/main/btn_ico_noti.png') no-repeat center/17px;}
.mn-head-wrap .btn-noti .new{position:absolute;top:3px;right:7px;width:11px;height:11px;background:url('../images/main/ico_noti_new.png') no-repeat center/10px; border-radius:50%}
.mn-head-wrap .btn-menu{width:37px;height:30px;background:url('../images/common/btn_ico_menu.png') center/17px no-repeat;}

/* 로그인 정보 */
.main-my-info {position: relative; z-index: 2;margin-bottom: 40px;}
.main-my-info .login-info-wrap {display: flex;justify-content: space-between;align-items: center; margin-top: 4px;}
.main-my-info .login-info-wrap .login-info {font-size:18px; line-height: 1.67;}
.main-my-info .login-info-wrap .login-info em {font-size:18px; color:#0d6fb8; font-weight:bold;}
.main-my-info .list, .main-my-info .noti{display: none; width: 100%;height:auto;background: #f2f2f2;border-radius: 10px;margin-top: 10px;padding: 5px 10px;font-size: 13px;font-weight: 500;line-height: 2.3;letter-spacing: -0.33px;color: #000;}
.main-my-info .list li a, .main-my-info .noti li a{width: 100%; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: left;}
.main-my-info .list li a em, .main-my-info .noti li a em {font-size: 13px; font-weight: bold; color: #0d6fb8;margin-right: 8px;}
.main-my-info .noti li a span {color: #c24138;font-weight: 700;}
.main-my-info.on {margin-bottom: 0px;}
.main-my-info.on .list {display: block;}
.main-my-info.on2 {margin-bottom: 0px;}
.main-my-info.on2 .noti {display: block;}

/* 메인 링크 박스 */
.main-top-wrap {margin-top: 15px;}
.main-link-wrap {display: flex; justify-content: space-between; width: 100%; padding-top: 10px; margin-bottom: 10px;position: relative;}
.main-link-wrap::after {content: ""; display: inline-block; width: 142px; height: 80px; background: url(../images/main/main_link_bg.png) no-repeat; position: absolute; right: 8px; top: -69px;}
.main-link-wrap .right {width: calc((100% - 10px) / 2);}
.main-link-wrap .link-card {padding: 20px; text-align: left; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.5px; color: #fff; border-radius: 10px;}
.main-link-wrap .link-card.type01 {width: calc((100% - 10px) / 2); height: 210px; background:#01587a url(../images/main/main_btn_bg_01.png) no-repeat center / 100%;}
.main-link-wrap .link-card.type02 {width: 100%; height: 100px; background: #922143 url(../images/main/main_btn_bg_02.png) no-repeat center / 100%; margin-bottom: 10px;}
.main-link-wrap .link-card.type03 {width: 100%; height: 100px; background: #2f4280 url(../images/main/main_btn_bg_03.png) no-repeat center / 100%; }

/* 메인 링크 리스트 */
.list-wrap.type02 {border: 1px solid #588acc;border-radius: 8px;padding: 27px 20px 26px 20px;}
.list-wrap.type02 > ul > li {padding: 0 0 26px;}
.list-wrap.type02 > ul > li:last-child {border-bottom: none; padding: 26px 0 0;}
.list-wrap.type02 > ul > li .tit {width: 100%; font-size: 18px;line-height: 1.13; font-weight: 500; letter-spacing: -0.32px; color: #0d6fb8; padding-right: 0; background: url(../images/sub/new/icon_main_arrow.png)no-repeat right / 9px 16px;}
.list-wrap.type02 > ul > li .txt {display: inline-block; font-size: 14px; line-height: 1.29; letter-spacing: -0.7px; color: #62777f; font-weight: 400; margin-top: 4px;}
.list-wrap.type02 .btn {background: url(../images/sub/new/icon_main_arrow.png) no-repeat center / 9px 16px; position: relative;}

/* 메일 배너 슬라이드 가이드 */
.swiper-backface-hidden .swiper-slide.mg-banner {width: 100%; height: 125px; border-radius: 8px; padding: 20px; margin: 0 0 20px;}
.swiper-backface-hidden .swiper-slide.mg-banner.type01 {background: #f9f4ec url(../images/main/main_banner_type_01.png) no-repeat right 20px center / 80px 79px;}
.swiper-backface-hidden .swiper-slide.mg-banner.type02 {background: #e7f2d1 url(../images/main/main_banner_type_02.png) no-repeat right 12px bottom / 113px 77px;}
.swiper-backface-hidden .swiper-slide.mg-banner.type03 {background: #d3f0ee url(../images/main/main_banner_type_03.png) no-repeat right 10px bottom / 123px 89px;}
.swiper-backface-hidden .swiper-slide.mg-banner.type04 {background: #ecf2fa url(../images/main/main_banner_type_04.png) no-repeat right bottom / 158px 81px;}
.swiper-backface-hidden .swiper-slide.mg-banner.type05 {background: #f3ecfa url(../images/main/main_banner_type_05.png) no-repeat right bottom / 125px 125px;}
.swiper-backface-hidden .swiper-slide.mg-banner .tit {font-size: 20px; line-height: 1.2; color: #000; font-weight: 500; letter-spacing: -0.4px; margin: 0 0 10px;}
.swiper-backface-hidden .swiper-slide.mg-banner.type03 .tit {margin: 0;}
.swiper-backface-hidden .swiper-slide.mg-banner.type03 .noti-info02 {margin: 0 0 7px; font-size: 15px; font-weight: 500; letter-spacing: -0.3px; line-height: 1.6; color: #007584;}
.swiper-backface-hidden .swiper-slide.mg-banner .btn-linktxt span {margin-left: 15px; font-size: 18px; line-height: 1.11; letter-spacing: -0.36px; font-weight: 500;}
.swiper-backface-hidden .swiper-slide.mg-banner.type01 .btn-linktxt {background: url('../images/main/Icon_arrow_circle_right_01.png') no-repeat left center/16px;}
.swiper-backface-hidden .swiper-slide.mg-banner.type02 .btn-linktxt {background: url('../images/main/Icon_arrow_circle_right_02.png') no-repeat left center/16px;}
.swiper-backface-hidden .swiper-slide.mg-banner.type04 .btn-linktxt {background: url('../images/main/Icon_arrow_circle_right_04.png') no-repeat left center/16px;}
.swiper-backface-hidden .swiper-slide.mg-banner.type05 .btn-linktxt {background: url('../images/main/Icon_arrow_circle_right_05.png') no-repeat left center/16px;}
.swiper-backface-hidden .swiper-slide.mg-banner.type01 .btn-linktxt span {color: #c95500;}
.swiper-backface-hidden .swiper-slide.mg-banner.type02 .btn-linktxt span {color: #2b4e14;}
.swiper-backface-hidden .swiper-slide.mg-banner.type04 .btn-linktxt span {color: #41569b;}
.swiper-backface-hidden .swiper-slide.mg-banner.type05 .btn-linktxt span {color: #83419b;}
.swiper-pagination-bullet {background: #959595; opacity: 1;}
.swiper-pagination-bullet-active {background: #0d7bf1;}

/* 슬라이드 하단 버튼 */
.mn-guide-banner .swiper-pagination{margin-right: 15px; padding-left:0;text-align: center;position: static;}
.mn-guide-banner .swiper-pagination-bullet { width: 8px; height: 8px; opacity: 1; background: #959595; margin: 0 5px !important; }
.mn-guide-banner .swiper-pagination-bullet-active { background: #0d7bf1; border:1px solid #000;}
.mn-guide-banner .bn-swiper .swiper-btn{z-index:10;position:absolute;left:50%;transform: translateX(-50%); bottom:0;display: flex;align-items: center;}
.mn-guide-banner .bn-swiper .swiper-btn [class^="btn-sw-"]{width:11px;height:10px;background-repeat:no-repeat;background-position:0 0;background-size:cover;}
.mn-guide-banner .bn-swiper .swiper-btn .btn-sw-pause{background-image:url('../images/main/btn_ico_pause02.png');}
.mn-guide-banner .bn-swiper .swiper-btn .btn-sw-pause.on{background-image:url('../images/main/btn_ico_play.png');}

/* 더 자세한 안내 */
.mn-guide-detail {margin-top: 40px;}
.mn-guide-detail .mg-detail-wrap .tit-wrap {font-size: 20px; line-height: 1.2; letter-spacing: -0.5px; color: #000; font-weight: bold; margin-bottom: 10px;}
.mn-guide-detail .mg-dg-list-wrap{background:#f5f5f5;overflow:hidden;}
.mn-guide-detail .mg-dg-list-wrap .list-toggle > li{padding:0;}
.mn-guide-detail .mg-dg-list-wrap .list-toggle > li:last-child{border-bottom:1px solid #e0e0e0;}
.mn-guide-detail .mg-dg-list-wrap .list-toggle > li~li{margin-top:0;border-top:1px solid #e0e0e0;}
.mn-guide-detail .mg-dg-list-wrap .list-toggle .btn-wrap{padding:0; background: #fff;}
.mn-guide-detail .mg-dg-list-wrap .list-toggle .toggle-btn{height:auto;padding:20px 40px 20px 0px;border:0;border-radius:0;}
/* .mn-guide-detail .mg-dg-list-wrap .list-toggle .toggle-btn:after{right:20px;background-image:url('../images/main/arrw_toggle.png');background-size:13px auto;} */
.mn-guide-detail .mg-dg-list-wrap .list-toggle .toggle-btn:after{right:0px;background-image:url('../images/sub/new/icon_main_arrow.png');background-size:9px 15px;transform: rotate(90deg);}
.mn-guide-detail .mg-dg-list-wrap .list-toggle .toggle-btn em{position:absolute;left:15px;top:18px;display:inline-block;width:24px;height:24px;color:#fff;line-height:24px;font-weight:500;font-size:13px;text-align:center;background:linear-gradient(110deg,#009edb,#0d7bf1);border-radius:50%;}
.mn-guide-detail .mg-dg-list-wrap .list-toggle .toggle-btn.on{background:#fff;}
.mn-guide-detail .mg-dg-list-wrap .list-toggle .toggle-btn.on span{color:#000;}
.mn-guide-detail .mg-dg-list-wrap .list-toggle .toggle-btn.on:after{transform:rotate(270deg);}
.mn-guide-detail .mg-dg-list-wrap .list-toggle .toggle-btn span {font-size: 16px; line-height: 1.38; letter-spacing: -0.4px;}
.mn-guide-detail .mg-dg-list-wrap .list-toggle .toggle-area{padding: 20px;}
.mn-guide-detail .mg-dg-list-wrap .list-toggle .toggle-area::before {display: none;}
.mn-guide-detail .mg-dg-list-wrap .list-toggle .toggle-area .txt{line-height:1.7;font-size:15px;color:#555;}

/* 메인 가이드 (임차인/세입자) */
.main-card {margin-top:30px;}
.main-card .swiper-pagination{position:relative; bottom:auto !important; text-align:left; margin-bottom:20px;}
.main-card .swiper-pagination-bullet { width: auto; height: auto; padding-bottom:4px; line-height: 20px; font-size: 16px; line-height: 1.25; letter-spacing: -0.4px; color: #666; opacity: 1; background: #fff; border-radius:0; }
.main-card .swiper-pagination-bullet ~ .swiper-pagination-bullet {margin-left:20px !important;}
.main-card .swiper-pagination-bullet-active { color: #000; font-weight:700; background: #fff; border-bottom:4px solid #000; }
.main-card .swiper-slide {min-height:342px; border-radius: 10px; padding:20px;}
.main-card .title {font-size:18px; line-height:1.36; color: #00334e; }
.main-card .title strong {font-size:22px; font-weight: bold;}
.main-card .title-top {margin-bottom:10px; font-size:18px; line-height: 1.11;}
.main-card .person-type01 {background-color:#98d4ff; background-image:url('../images/main/main-img-top01.png'); background-repeat: no-repeat; background-size:130px auto; background-position: right 36px bottom 110px;}
.main-card .person-type02 {background-color:#c8fceb; background-image:url('../images/main/main-img-top02.png'); background-repeat: no-repeat; background-size:202px auto; background-position: right 20px bottom 50px;}
.link-box {position: absolute; width:100%; padding:0 20px; left:0; bottom:20px;}
.link-box a {display:block; height:40px; line-height:38px; padding:0 10px; border-radius: 20px; font-size:15px; color:#fff;}
.link-box li + li {margin-top:10px;}

/* 카테고리 */
.main-category {margin-top:10px; padding:20px 0;}
.main-category ul {display: flex; align-items: center; justify-content: center;}
.main-category li {position:relative; width:calc(100%/3)}
.main-category li + li::before {content:''; display:block; width:1px; height:100px; position: absolute; top:0; left:0; background:#ddd;}
.main-category a {display:block; text-align: center;}
.main-category a:before {content:''; display:block; width:48px; height:48px; margin:0 auto 10px; border-radius: 50%; background-color: #bfdaf0; background-repeat: no-repeat; background-position: 50% 50%;}
.main-category .title {font-size:15px; font-weight:500; line-height:1.2}
.main-category .type01 a:before {background-image: url('../images/main/icon-main-category01.png'); background-size:48px auto;}
.main-category .type02 a:before {background-image: url('../images/main/icon-main-category02.png'); background-size:32px auto;}
.main-category .type03 a:before {background-image: url('../images/main/icon-main-category03.png'); background-size:30px auto;}

.main-category-02 {width: 100%; height: 80px; margin: 10px 0; padding: 20px 0; border-radius: 8px; background: #f0f6ff;}
.main-category-02 > ul {display: flex; justify-content: space-around; align-items: center; height: 100%; position: relative;}
.main-category-02 > ul > li {width: calc(100%/2); height: 100%; position: relative; display: flex; align-items: center; padding: 0 7px 0 20px;}
.main-category-02 > ul > li .title {display: block; padding-left: 40px;font-size: 17px; line-height: 1.06; letter-spacing: -0.3px; font-weight: 500; color: #41569b; text-align: left;}
.main-category-02 > ul > li.type01::before {content: ''; display: block; width: 30px; height: 30px; position: absolute; background: url(../images/main/icon-main-category_01.png)no-repeat left center / 30px 30px;}
.main-category-02 > ul > li.type02::before {content: ''; display: block; width: 30px; height: 30px; position: absolute; background: url(../images/main/icon-main-category_02.png)no-repeat left center / 30px 30px;}
.main-category-02 > ul > li.type02::after {content: ''; display: block; width: 1px; height: 100%; background: #588acc; position: absolute; left: 0; top: 0;}

/* 메인 가이드 */
.main-guide {margin-top: 10px;}
.main-guide .title, .main-guide .title strong {font-size:20px; line-height: 1.5; color: #404040;}
.main-guide .title strong {font-weight:bold;}
.main-guide .list {margin-top:20px;}
.main-guide .list li {min-height:96px; padding:20px; border-radius:8px;}
.main-guide .list li + li {margin-top:10px;}
.main-guide .list li:after {content:''; display:block; clear:both;}
.main-guide .txt {color:#fff; font-size:15px;}
.main-guide .type01 {background: #a59c8e url('../images/main/main_img_guide01.png') no-repeat; background-size: 70px auto; background-position: bottom right 20px}
.main-guide .type02 {background: #56bfb3 url('../images/main/main_img_guide02.png') no-repeat; background-size: 135px auto; background-position: 0 0;}
.main-guide .type03 {background: #52a2c1 url('../images/main/main_img_guide03.png') no-repeat; background-size: 128px auto; background-position: 100% 0;}
.main-guide .link-cta {margin-top:10px; padding-left:20px; color:#fff8a7; font-size:16px; background: url('../images/common/icon-link-arrow.png') no-repeat 0 50%; background-size:16px auto;}


/* 자주찾는 메뉴 */
.main-menu {margin-top:40px;}
.menu-wrap ul:after {content: ''; display: block; clear: both;}
.menu-wrap ul {margin:0 0 0 -10px; display: flex;flex-wrap: wrap;}
.menu-wrap li {width:calc((100% - 30px)/3); margin: 20px 0 0 10px; text-align:center}
.menu-wrap li > a{display:inline-block;text-align:center}
.menu-wrap li > a:before{display:block;width:48px;height:48px;margin:0 auto 10px;background-repeat:no-repeat;background-color:#f7f7f7;background-position:50% 50%;border-radius:50%;content:'';}
.menu-wrap .type01 > a:before{background-image:url('../images/main/menu_ico_01.png');background-size:21px auto;}
.menu-wrap .type02 > a:before{background-image:url('../images/main/menu_ico_02.png');background-size:26px auto;}
.menu-wrap .type03 > a:before{background-image:url('../images/main/menu_ico_03.png');background-size:28px auto;}
.menu-wrap .type04 > a:before{background-image:url('../images/main/menu_ico_04.png');background-size:25px auto;}
.menu-wrap .type05 > a:before{background-image:url('../images/main/menu_ico_05.png');background-size:28px auto;}
.menu-wrap .type06 > a:before{background-image:url('../images/main/menu_ico_06.png');background-size:28px auto;}

.menu-wrap li > a > span {font-size: 16px;line-height: 1.38;letter-spacing: -0.8px;color: #333;}

/* 공지사항 */
.main-noti {display: flex; align-items: center; background:#767676;border-radius:10px;padding:0 13px;}
.main-noti a{overflow: hidden; font-size:16px;color:#fff; text-overflow: ellipsis; -webkit-line-clamp: 1; white-space:nowrap; height:40px; line-height:40px;}
.main-noti .ico-noti {flex-shrink: 0; display: block; width:20px; height:14px; margin-right: 13px;background:url('../images/main/ico_noti_02.png') no-repeat 0 center/18px; font-size: 0;}

/* 메인푸터 */
.main-footer{position:relative; padding:20px; background:#f2f2f2; min-height:120px;}
.main-footer .main-logo-footer{height:20px;background:url('../images/main/main_footer_logo02.png') no-repeat 0 0;background-size:auto 20px;}
.main-footer .footer-copy{margin-top:10px;font-size:10px;color:#666}
.footer-addr {margin:10px 0 3px;}
.footer-info li {display:flex; align-items:center; color:#666;}
.footer-info-tit {font-size:12px; margin-right:10px;}
.footer-info-txt {font-size:13px; font-weight:bold;}
.main-footer .float-area {position: absolute; top:23px; right:20px;}
.main-footer .btn-ft-pv {width:110px;height:20px;padding:0 5px;line-height:19px;font-size:12px;color:rgb(50, 115, 172);background:#fff;border:1px solid #009edb;}
.main-footer .web-accessibility p {margin:8px 0 0 auto;}
.main-footer .web-accessibility .web {width:50px;}
.main-footer .web-accessibility .mobile {width:71px;}
.main-footer .web-accessibility { display:block;}
.footer-sns{margin-top:20px;}
.footer-sns > li{display:inline-block;}
.footer-sns > li~li{margin-left:7px}
.footer-sns > li > a{display:block;width:29px;height:29px;background-repeat:no-repeat;background-position:center center;background-color:#585858;border-radius:50%}
.footer-sns > li > a.type-f{background-image:url('../images/main/main_ft_sns_f.png');background-size:8px auto}
.footer-sns > li > a.type-t{background-image:url('../images/main/main_ft_sns_t.png');background-size:18px auto}
.footer-sns > li > a.type-y{background-image:url('../images/main/main_ft_sns_y.png');background-size:18px auto}
.footer-sns > li > a.type-i{background-image:url('../images/main/main_ft_sns_i.png');background-size:17px auto}
.footer-sns > li > a.type-k{background-image:url('../images/main/main_ft_sns_k.png');background-size:19px auto}
.footer-sns > li > a.type-b{background-image:url('../images/main/main_ft_sns_b.png');background-size:11px auto}
.footer-sns > li > a.type-n{background-image:url('../images/main/main_ft_sns_n.png');background-size:11px auto}
.footer-sns > li > a .blind {color: #fff;}

/* 튜토리얼 */
.tutorial-wrap {display:none; position: fixed; top:0; left:0; width:100%; height:100%; background-color: #fff; z-index:10;}
.tutorial-wrap .head-title {font-weight:normal;}
.tutorial-wrap .in-box {display:flex; padding:60px 0 20px; flex-direction: column; align-items: center; justify-content: center; text-align: center;}
.tutorial-wrap .img-wrap {margin-top:40px; width:170px;}
.tutorial-wrap .swiper-pagination {bottom: 0 !important}
.tutorial-wrap .btn-skip {color:#666; border-bottom:1px solid #666;font-size: 13px;}
.btn-skip-wrap {display:flex; justify-content: end;}
.tutorial-wrap .footer {display:none;}
.tutorial-wrap.is-show {display:block}

/* 튜토리얼 스크롤 모션 */
[data-role="scrollMotion"] {opacity:0;}
[data-role="scrollMotion"].is-active {opacity:1;}
.is-active {-webkit-animation:ani_scrollUp 1s ease; animation:ani_scrollUp 1s ease;}
@-webkit-keyframes ani_scrollUp {
	0% {
		opacity:0;
		-webkit-transform: translateY(40px);
		transform: translateY(40px);
	} 
	100% {
		opacity:1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	} 
}

@keyframes ani_scrollUp {
	0% {
		opacity:0;
		-webkit-transform: translateY(40px);
		transform: translateY(40px);
	} 
	100% {
		opacity:1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	} 
}

