@charset "utf-8";



/* 1댑스 탭 */
.tab_area {}
.tab_head {display: flex; justify-content: space-between; align-items: center; margin-bottom:24px;}
.tab_head ul {display: flex; width: 100%; justify-content:space-between; align-items: center; border: 1px solid #d1d1d1;}
.tab_head li {width: 100%;}
.tab_head li + li {border-left: 1px solid #d1d1d1;}
.tab_head li button {display: flex; width: 100%; height: 56px; padding:0 5px; justify-content: center; align-items: center; font-size: 17px; font-family:'S-CoreDream-4Regular'; font-style:normal; transition: all 100ms;}
.tab_head li button.on {color: #fff; background: #004098; transition: all 100ms;}

.tab_body {}
.tab_body .tab-content.on {display: block;}
.tab_body > div {display: none; background: #fff;}




/* 2댑스 탭 */
.tab_in_tab ul {display:flex; overflow-x:auto; white-space:nowrap; gap: 8px; padding-bottom:15px; -webkit-overflow-scrolling:touch;}
.tab_in_tab li {flex: 0 0 auto;}
.tab_in_tab ul li button {display: flex; justify-content:center; align-items:center; height:40px; padding:0 20px; border:1px solid #D1D1D1; border-radius: 100px; background: #fff; white-space: nowrap;}
.tab_in_tab ul li button.on {color:#fff; border:1px solid #004098; background:#004098;}


.table_scroll_area {position: relative;}
.table_scroll_area h3.main-ver {font-size: 36px; font-weight: 700; font-family:'S-CoreDream-6Bold';}
.table_scroll_area .date {display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
.table_scroll_area .date .more-plus {position: relative; top:-5px}
.table_scroll_area .fn_print {position: absolute; right:0; top:-50px;}
.table_scroll_fn {width: 100%; -webkit-overflow-scrolling: touch;}


.table_box {margin-top: 60px;}
.table_title {display: flex; justify-content: space-between; align-items: self-end; margin-bottom: 16px; }
.table_title h3 {font-size:26px; color: #333; font-family:'S-CoreDream-6Bold';}



/* 테이블 상단 검색 영역 */
.top_search_box {display: flex; justify-content: center; align-items: center; padding:20px 40px; gap:8px; background: #f5f6f8;}
.search_tit {flex:0 0 auto;}
.top_search_box .top_calendar {display: flex; align-items: center; gap: 8px; }
.top_search_box .top_calendar span {display: inline-block; padding:0 5px;}
.top_search_box .top_calendar input {width:160px; height:40px; font-size:13px; padding:0 24px 0 12px;}
.top_search_box .top_search {display: flex; gap:8px; align-items: center;}
.top_search_box .top_search button {display: flex; min-width:30px; height: 40px; padding: 8px 21px; justify-content: center;align-items:center; color: #fff; gap:5px; font-size: 15px; border-radius: 8px; background: #4F5663; flex:0 0 auto}


        @media (max-width: 768px) {

            .top_search_box {flex-direction: column; margin:0 -20px; padding:20px; } 
            .top_search_box .top_calendar {width:100%;}
            .top_search_box .top_calendar input {width: 100%;}

            .top_search_box .top_search {width: 100%;}

            .top_search .inp {width:100%; flex:1; min-width:0}

        }




.ui_cal, .experience-date {height:40px; padding:0 24px 0 12px; background:#fff url(../../images/experience/cal_icon.png) right 12px center / 24px no-repeat; outline: none; min-width:0;}
.ui_cal.mode01,
.experience-date.mode01 {border-radius:8px; height:50px; padding:0 10px; border: 1px solid #ccc; font-size: 15px; color: #000; font-family:'S-CoreDream-5Medium';}
.ui_cal.mode01::placeholder,
.experience-date.mode01::placeholder {font-size: 15px; color: #666;}



/* 정보형 테이블 */
.info_table {border: none; border-collapse: collapse; border-top: 2px solid #000; table-layout: fixed;}
.info_table thead {background: #f7f8f9;}
.info_table thead th {padding:12px; font-size: 16px; font-family:'S-CoreDream-5Medium'; font-weight: 500; border: 1px solid #c4c4c4;}
.info_table tbody {}
.info_table tbody tr {}
.info_table tbody th {padding:12px; border: 1px solid #c4c4c4; background: #f7f8f9; font-family:'S-CoreDream-5Medium'; font-weight: 500;}
.info_table tbody td {padding:12px; border: 1px solid #c4c4c4; font-size: 16px; font-family:'S-CoreDream-4Regular'; font-weight: 200;}
.info_table tbody td span.br {display: block;}
.info_table tfoot th,
.info_table tfoot td {padding:12px; border: 1px solid #c4c4c4; font-size: 16px; font-family:'S-CoreDream-5Medium'; font-weight: 500;}

.info_table td:first-child,
.info_table th:first-child { border-left: none; }

.info_table td:last-child, 
.info_table th:last-child { border-right: none; }





        @media (max-width:1024px) {
            .table_scroll_fn {overflow-x: auto;}
            .t_scroll_1200 {width:1200px !important;}
            .t_scroll_1024 {width:1024px !important;}
        }

        @media (max-width:768px) {
            .t_scroll_768 {width:768px !important;}
        }



.form_btn {display:inline-flex; min-width:60px; height:40px; padding:0 16px; justify-content: center; align-items: center; font-size: 13px; font-family:'S-CoreDream-5Medium';}
.form_btn.gray {color: #333; border: 1px solid #bac4ce; background: #edf1f5;}
.form_btn.blue {color: #fff; border: 1px solid #005bac; background: #005bac;}
.form_btn.white {color: #000; border: 1px solid #666; background: #fff;}
.form_btn.green {color: #fff; border: 1px solid #4F5663; background: #4F5663;}
.form_btn.round5 {border-radius:5px;}
.form_btn.round8 {border-radius:8px;}

.form_btn.sm {width:auto; padding:0 20px;}
.form_btn.xsm {height:auto; width:auto; min-width:70px; padding:7px 14px; border-radius:5px; flex:0 0 auto;}
.form_btn.md {height:50px; padding:0 24px;}








.special-intro-wrap {width: 100%; position: relative; margin-top: 24px; padding:40px 20px; background: #F7F8F9;}
.special-intro-inner {max-width:1440px; margin:0 auto; display: flex; justify-content: space-between; align-items: center; gap: 60px;}

.special-intro-swipe {position: relative; width:100%; min-width:0; flex:2; max-width:800px; position: relative; }


/* 주문상세 swipe */
.swiper {width: 100%;}
.swiper-slide {display:flex; text-align:center; font-size:18px; background: #444; justify-content: center; align-items: center; background-size: cover; background-position: center;}
.swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}
.swiper-slide a { display: block; width: 100%}

.mother-swipe {width: 100%; height:450px; border-radius: 16px;}

.thumb-swipe {position: absolute; left:50%; bottom:24px; transform: translateX(-50%);  box-sizing: border-box;}
.thumb-swipe .swiper-wrapper {justify-content: center;}
.thumb-swipe .swiper-slide {display: inline-block; position: relative; width:48px !important; height: 48px; opacity: 1; border-radius: 8px; overflow: hidden;}

.thumb-swipe .swiper-slide-thumb-active::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2.5px #fff, 0 0 8px rgba(255, 255, 255, 1); border-radius: 8px;}


.swiper-button-prev svg,
.swiper-button-next svg{display: none;}

.swiper-button-prev,
.swiper-button-next {width:48px; height:48px; border-radius: 50%; background: rgba(255,255,255,0.7);}
.special-intro-swipe .swiper-button-prev {left:24px;}
.swiper-button-prev:before {content: ''; display: block; width:32px; height:32px; position: absolute; left:50%; top: 50%; transform: translate(-50%, -50%); background:url(../images/chevron_left.png) center center / cover no-repeat;}
.special-intro-swipe .swiper-button-next {right:24px;}
.swiper-button-next:before {content: ''; display: block; width:32px; height:32px; position: absolute; left:50%; top: 50%; transform: translate(-50%, -50%); background:url(../images/chevron_right.png) center center / cover no-repeat;}


/* .special-intro-swipe .swiper-controller {display: flex; justify-content: center; align-items: center; height:32px; padding:8px 17px 8px 15px; position: absolute; left:50%; bottom:20px; z-index: 10; transform: translateX(-50%); border-radius: 100px; background:rgba(0,0,0,0.5);}
.special-intro-swipe .swiper-pagination {position: static; opacity: 1;}
.special-intro-swipe .swiper-pagination .swiper-pagination-bullet {width:10px; height:10px; border-radius: 50%; background: none; border: 1px solid #fff; opacity: 1; margin:0 5px;}
.special-intro-swipe .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background: #fff;} */
.special-intro-swipe .btn-start {display: none; width:16px; height:16px; margin-top: 1px; text-indent: -9999px; background:url(../images/go.png) center center / cover no-repeat;}
.special-intro-swipe .btn-stop {width:16px; height:16px; margin-top: 1px; text-indent: -9999px; background:url(../images/stop.png) center center / cover no-repeat;}


.special-intro-title {display: flex; flex:1; justify-content: flex-start; align-items: flex-start; flex-direction: column;}
.special-intro-str {font-size: 48px; color: #333; font-weight: 600; font-family:'S-CoreDream-6Bold'; word-break: keep-all; margin-bottom: 10px;}
.special-intro-subtext {color: #333; font-size: 18px; line-height: 1.7; font-family:'S-CoreDream-3Light'; font-weight: 200;}


@media (max-width: 1400px) {
    .special-intro-inner {gap: 40px;}
    .special-intro-swipe {flex:1.5}
}

@media (max-width: 1300px) {
    .special-intro-swipe {flex:1}
    .special-intro-str {font-size: 42px;}
}

@media (max-width: 1024px) {
    .special-intro-wrap {width: calc(100% + 40px); max-width: max-content; margin-left: -20px; margin-right: 0; position: static; padding:0; border-radius:0;}
    .special-intro-inner {flex-direction: column; gap: 40px;}
    .special-intro-swipe {max-width: 100%;}


    .mother-swipe {width:100%; height:auto; aspect-ratio: 2/1; border-radius: 0;}

    .special-intro-swipe .swiper-button-prev,
    .special-intro-swipe .swiper-button-next {width:40px; height:40px;}
    .special-intro-swipe .swiper-button-prev {left:20px;}
    .special-intro-swipe .swiper-button-prev:before {width:20px; height:20px;}
    .special-intro-swipe .swiper-button-next {right:20px;}
    .special-intro-swipe .swiper-button-next:before {width:20px; height:20px;}

    .special-intro-title {padding:40px 20px 40px;}
    .special-intro-str {font-size: 38px;}

}



@media (max-width: 768px) {

    .mother-swipe {aspect-ratio: 1.5/1;}

    .mother-swipe .swiper-wrapper {animation: swipeHint 1.8s ease-in-out 1;}

    @keyframes swipeHint {
        0% {transform: translateX(0);}
        50% {transform: translateX(-45px);}
        100% {transform: translateX(0);}
    }

}



.special-intro-info {margin:30px 0 80px;}
.special-intro-info ul li {padding:10px 20px; display: flex; align-items: center; border-bottom: 1px solid #d9d9d9;}
.special-intro-info ul li strong {flex: 0 0 80px; color: #666; font-size: 14px; font-family:'S-CoreDream-4Regular'; font-weight: 500;}
.special-intro-info ul li p {flex:1 1 auto; color: #333; font-size: 18px; font-family:'S-CoreDream-5Medium'; font-weight: 500; word-break: keep-all;}


.special-info-sub {margin-bottom:16px;}
.special-info-sub div {margin-top: 60px;}
.special-info-sub strong {display: block; margin-bottom: 12px; font-size: 24px; color: #333; font-weight: 500; font-family:'S-CoreDream-5Medium';}
.special-info-sub p {color: #333; font-size: 16px; font-family:'S-CoreDream-3Light'; font-weight: 200;}


.special-bottom-info {margin-top: 80px;}
.special-bottom-info h3 {font-size: 26px; color: #333; font-weight: 500; font-family:'S-CoreDream-5Medium';}
.special-bottom-info .imgs {display: flex; margin-top:16px; justify-content: space-between; align-items: center; gap:40px; }
.special-bottom-info .imgs li {border-radius:16px; overflow: hidden;/* aspect-ratio: 2/1;*/}
.special-bottom-info .imgs-sub-txt {margin-top:32px; color: #333; font-size: 16px; font-weight: 200; font-family:'S-CoreDream-3Light';}
.special-bottom-info .tel {font-size: 26px;}

@media (max-width: 1024px) {

    .special-bottom-info .imgs {gap: 20px;}

}

@media (max-width: 768px) {
    .special-bottom-info {margin-top: 60px;}
    .special-bottom-info .imgs {flex-direction: column;}

}




.relevant_list {margin-top: 80px;}
.relevant_list ul li {display: flex; align-items: center; gap: 60px;}
.relevant_list ul li ~ li {margin-top: 40px;}

.relevant_list ul li.left-align .flip-card {order:1}
.relevant_list ul li.left-align .relevant-swipe {order:1}
.relevant_list ul li.left-align .text-info {order:2}

.relevant_list ul li.right-align .flip-card {order:2}
.relevant_list ul li.right-align .relevant-swipe {order:2}
.relevant_list ul li.right-align .text-info {order:1}

.relevant_list .text-info {float: 1;}
.relevant_list .text-info strong {color: #333; font-size: 28px; font-family:'S-CoreDream-6Bold'; font-weight: 600;}
.relevant_list .text-info p {margin-top:6px; margin-bottom: 16px; color: #666; font-size: 18px; font-family:'S-CoreDream-3Light'; font-weight: 200; line-height: 1.6;}



/* .flip-card {position: relative; width: 400px; height:300px; perspective: 1000px; aspect-ratio: 4/3;}
.flip-inner {position: relative; width: 100%; height: 100%; transition: transform 900ms cubic-bezier(0.58, -0.45, 0.265, 1.35); transform-style: preserve-3d;}
.flip-inner.is-flipped {transform: rotateY(180deg);}
.flip-front, .flip-back {position: absolute; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius:24px; overflow: hidden;}
.flip-front:after, 
.flip-back:after {content: ''; display: block; position: absolute; right:20px; top:20px; width:48px; height: 48px; background:url(/sites/module_new/images/saas20/flip.png) center center / cover no-repeat;}
.flip-back {transform: rotateY(180deg);}
.flip-inner img {display: block; width:100%; height:100%; object-fit:cover;} */



/* 내 경락내역 조회 */
.doc-settlement {margin-top:48px;}
.doc-settlement .doc-title {font-size: 28px; padding-bottom: 30px; color: #333; font-weight: 500; font-family:'S-CoreDream-5Medium'; letter-spacing:10px; text-align: center; line-height: 1;}
.doc-branch {padding:30px; border: 1px solid #ddd;}
.doc-branch-name {display: block; margin-bottom: 16px; font-size: 20px; color: #333; font-weight: 500; font-family:'S-CoreDream-5Medium';}
.doc-branch-info {padding-left: 10px;}
.doc-branch-info li {position: relative; display: flex; padding-left:12px; color: #666;}
.doc-branch-info li ~ li {margin-top: 2px;}
.doc-branch-info li:before {content: ''; position: absolute; left:0; top:50%; transform: translateY(-50%); width:3px; height:3px; border-radius: 50%; background: #666;}
.doc-meta {margin-top: 20px;}
.doc-meta li {font-size: 16px; font-weight: 200; font-family:'S-CoreDream-4Regular'; color: #333;}






@media (max-width: 1024px) {

    

    .relevant_list ul li {gap: 40px; justify-content:flex-start; align-items: flex-start;}
    /* .flip-card {width:280px; height:210px;} */

}



@media (max-width: 768px) {
    
    
    

    /* .flip-card {width:100%; height:251px; aspect-ratio: 4/3;}
    .flip-front, .flip-back {border-radius:18px;} */

    .relevant_list ul li {flex-direction: column; gap: 20px;}

    .relevant_list ul li.right-align .flip-card {order:1}
    .relevant_list ul li.right-align .relevant-swipe {order:1}
    .relevant_list ul li.right-align .text-info {order:2}

    .relevant_list .btn-box {text-align: center;}

}


/* 공통컨텐츠-금리안내(메인) */
.interest-summary {position: relative; padding:80px 0;}

.interest-summary .top {display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px;}
.interest-summary .top h3 {margin-right: 10px; font-size: 36px; color: #000; font-weight: 700; font-family:'S-CoreDream-6Bold';}
.interest-summary .top ul {display: flex; justify-content: flex-start;}
.interest-summary .top ul li button {padding:0 24px; font-size: 28px; color: #000; font-weight: 500; font-family:'S-CoreDream-5Medium';}
.interest-summary .top ul li button.on {color: #004fd2;}
.interest-summary .top ul li ~ li:before {content: ''; display: inline-block; width:1px; height:20px; background: #aaa;}
.interest-summary .top .more {position: relative; top: 50px; padding-right: 28px; margin-left: auto; color:#333; font-size: 18px; font-weight: 500; font-family:'S-CoreDream-5Medium';}
.interest-summary .top .more:before {content: ''; position: absolute; right:13px; top:6px; display: inline-block; width:2px; height:16px; border-radius: 2px; background: #020616;}
.interest-summary .top .more:after {content: ''; position: absolute; right:6px; top:13px; display: inline-block; width:16px; height:2px; border-radius: 2px; background: #020616;}

.interest-date {font-size: 18px; color: #333;}

.interest-summary .body {position: relative;}
.interest-summary .interest-list {margin-top: 30px;}
.interest-summary .interest-list .swiper-slide {display: flex; flex-direction: column; padding:40px; border-radius:12px; border: 1px solid #ddd; background: #fff;}
.interest-list .item-title {display: block; width: 100%; padding-bottom:20px; margin-bottom: 20px; color: #000; font-size: 24px; white-space: nowrap; font-family:'S-CoreDream-5Medium'; font-weight: 500; border-bottom: 1px solid #ddd; text-overflow: ellipsis; overflow: hidden; text-align: left;}
.item-info {width: 100%;}
.interest-list .item-info li {display: flex; justify-content: space-between; align-items: center;}
.interest-list .item-info li em {color:#666; font-size: 18px; font-weight: 200; font-family:'S-CoreDream-3Light';}
.interest-list .item-info li strong {color: #000; font-size: 22px; font-weight: 500; font-family:'S-CoreDream-5Medium';}

.interest-summary .swiper-button-prev::before,
.interest-summary .swiper-button-next::before {display: none;}
.interest-summary .swiper-button-prev,
.interest-summary .swiper-button-next {width:48px; height:48px;}
.interest-summary .swiper-button-prev {background:url(/sites/module_new/images/saas20/white-round-prev.png) center center / cover no-repeat; left:-24px} 
.interest-summary .swiper-button-next {background:url(/sites/module_new/images/saas20/white-round-next.png) center center / cover no-repeat; right:-24px}



        @media (max-width: 768px) {

            .interest-summary .top {flex-direction: column; justify-content: center; align-items: flex-start; }
            .interest-summary .top h3 {font-size: 30px; margin-bottom: 16px;}
            .interest-summary .top ul {margin-left: -18px;}
            .interest-summary .top ul li button {padding:0 18px; font-size:24px;}
            .interest-summary .top .more {top:0; margin-top: -20px}
            .interest-date {font-size: 16px;}

            .interest-summary .interest-list .swiper-slide {padding:30px; border-radius: 8px;}

            .interest-list .item-title {padding-bottom:16px; margin-bottom: 16px; font-size: 20px;}
            .interest-list .item-info li em {font-size: 16px;}
            .interest-list .item-info li strong {font-size: 20px;}

            .interest-summary .swiper-button-prev,
            .interest-summary .swiper-button-next {width:40px; height:40px;}
            .interest-summary .swiper-button-prev {left:-20px} 
            .interest-summary .swiper-button-next {right:-20px}


        }






/* 공통 */
.w100p {width: 100%;}
.space-between {display:flex; justify-content:space-between;}

@media (max-width: 1024px) {
    .tablet-hidden {display: none !important;}
    
}

@media (max-width: 768px) {
    .mw100 {width: 100% !important;}
    .mobile-hidden {display: none !important;}
    .mb_br {display: block;}
    .mb-text-left {text-align: left !important;}
    .mb-text-light {font-family:'S-CoreDream-3Light' !important; font-weight: 400 !important;}
    .mb-mb10 {margin-bottom: 10px !important;}
    .self-l {align-self: flex-start;}
    
}