@charset "UTF-8";

/* Modal */
.modal {
    display: none;
    z-index: 110;
    /* position: absolute; */
    position: fixed;
    top: 50%;
    left: 50%;
    max-height: 97vh;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 36px;
    width: 720px;
}
.modal>.inner {
    display: flex;
    flex-direction: column;
    padding: 40px;    
    max-height: calc(97vh - 215px);
    /* word-break: break-all; */
}
.modal .modal-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    /* padding-bottom: 19px; */
    padding-bottom: 16px;
    border-bottom: 1px solid #d8dfe6;
}
.modal .modal-header>.tit-area {

}
.modal .modal-header>.tit-area .tit {
    font-size: 24px;
    font-weight: 500;
    color: #111;
    letter-spacing: -0.64px;
}
.modal .modal-header>.tit-area.type02 .tit {
    display: inline-block;
    margin-right: 5px;
}
.modal .modal-header>.tit-area.type01 .desc {
    color: #666;
    font-size: 14px;
    line-height: 1.3;
    margin-top: 8px;
}
.modal .modal-header>.tit-area.type02 .desc {
    display: inline-block;
    color: #999;
    font-size: 12px;
}
.modal .modal-header>.tit-area.type03 {
    /* border: 1px solid red; */
    display: flex;
    column-gap: 8px;
}
.modal .modal-header>.tit-area.type03 .logo {
    width: 24px;
    height: 24px;
}
.modal .modal-header .btn-close {
    width: 36px;
    height: 36px;
    background: url(../../images/icon/close.png) no-repeat 50% 50%;
    background-size: contain;
    border: 0;
    text-indent: -9999px;
    cursor: pointer;
    position: relative;
    top: -4px;
}
.modal .modal-header .btn-close-white {
    width: 36px;
    height: 36px;
    background: url(../../images/icon/close_white.png) no-repeat 50% 50%;
    background-size: contain;
    border: 0;
    text-indent: -9999px;
    cursor: pointer;
    position: relative;
    top: -4px;
}
.modal .modal-header .btn-trash {
    width: 36px;
    height: 36px;
    background: url(../images/icon/ic_trash_36.svg) no-repeat 50% 50%;
    border: 0;
    text-indent: -9999px;
    cursor: pointer;
    position: relative;
    top: -10px;
    /* border: 1px dashed red; */
}
.modal .modal-header .btn-close-txt { 
    position: relative;
    top: -6px;
}
.modal .modal-con {
    flex-grow: 1;
    /* background: green; */
    overflow-y: auto;
    overflow-x: hidden;
    line-height: 1.4;
}
.modal .modal-con .wide-pannel {
    width: calc(100% + 64px);
    margin-left: -32px;
    background: #f7f7f7;
    padding-top: 32px;
    padding-bottom: 32px;
}
.modal .modal-footer {
    /* background: yellow; */
    text-align: center;
    margin-top: 24px;
}
.modal.active {display: block;}
.modal+.dim {
    display: none;
    z-index: 100;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: black;
    opacity: 0.7;
}
.modal+.dim.active {display: block;}
@media (max-width: 999px) { /*mobile*/
    .modal {
        width: auto;
        border-radius: 20px;
        max-width: none;
        left: 16px;
        right: 16px;
        transform: translate(0, -50%);
        /* max-height: calc(100vh - 32px); */
    }
    .modal>.inner {
        padding: 24px 16px 24px 16px;
        max-height: none;
        max-height: calc(100vh - 30px);
        max-height: calc(100dvh - 30px); /*dvh로 대체*/
    }        
    .modal .modal-header,
    .modal .modal-footer {
        flex-shrink: 0;
        flex-grow: 0;
    }
    .modal .modal-header {
        /* padding-bottom: 15px; */
        padding-bottom: 12px;
        margin-bottom: 16px;
    }
    .modal .modal-header>.tit-area .tit {
        font-size: 20px;
    }    
    .modal .modal-header .btn-close {
        width: 28px;
        height: 28px;
    }
}

/* txt-link modal */
.modal-popup {
    display: none;
    z-index: 110;
    /* position: absolute; */
    position: fixed;
    top: 50%;
    left: 50%;
    max-height: 97vh;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 36px;
    width: 720px;
}
.modal-popup>.inner {
    display: flex;
    flex-direction: column;
    padding: 40px;    
    max-height: calc(97vh - 215px);
    /* word-break: break-all; */
}
.modal-popup .modal-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    /* padding-bottom: 19px; */
    padding-bottom: 16px;
    border-bottom: 1px solid #d8dfe6;
}
.modal-popup .modal-header>.tit-area {

}
.modal-popup .modal-header>.tit-area .tit {
    font-size: 24px;
    font-weight: 500;
    color: #111;
    letter-spacing: -0.64px;
}
.modal-popup .modal-header>.tit-area.type02 .tit {
    display: inline-block;
    margin-right: 5px;
}
.modal-popup .modal-header>.tit-area.type01 .desc {
    color: #666;
    font-size: 14px;
    line-height: 1.3;
    margin-top: 8px;
}
.modal-popup .modal-header>.tit-area.type02 .desc {
    display: inline-block;
    color: #999;
    font-size: 12px;
}
.modal-popup .modal-header>.tit-area.type03 {
    /* border: 1px solid red; */
    display: flex;
    column-gap: 8px;
}
.modal-popup .modal-header>.tit-area.type03 .logo {
    width: 24px;
    height: 24px;
}
.modal-popup .modal-header .btn-close {
    width: 36px;
    height: 36px;
    background: url(../../images/icon/close.png) no-repeat 50% 50%;
    background-size: contain;
    border: 0;
    text-indent: -9999px;
    cursor: pointer;
    position: relative;
    top: -4px;
}
.modal-popup .modal-header .btn-close-white {
    width: 36px;
    height: 36px;
    background: url(../../images/icon/close_white.png) no-repeat 50% 50%;
    background-size: contain;
    border: 0;
    text-indent: -9999px;
    cursor: pointer;
    position: relative;
    top: -4px;
}
.modal-popup .modal-header .btn-trash {
    width: 36px;
    height: 36px;
    background: url(../images/icon/ic_trash_36.svg) no-repeat 50% 50%;
    border: 0;
    text-indent: -9999px;
    cursor: pointer;
    position: relative;
    top: -10px;
    /* border: 1px dashed red; */
}
.modal-popup .modal-header .btn-close-txt { 
    position: relative;
    top: -6px;
}
.modal-popup .modal-con {
    flex-grow: 1;
    /* background: green; */
    overflow-y: auto;
    overflow-x: hidden;
    line-height: 1.4;
}
.modal-popup .modal-con .wide-pannel {
    width: calc(100% + 64px);
    margin-left: -32px;
    background: #f7f7f7;
    padding-top: 32px;
    padding-bottom: 32px;
}
.modal-popup .modal-footer {
    /* background: yellow; */
    text-align: center;
    margin-top: 24px;
}
.modal-popup.active {display: block;}
.modal-popup+ .modal-dim {
    display: none;
    z-index: 100;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: black;
    opacity: 0.7;
}
.modal-popup+.modal-dim.active {display: block;}
@media (max-width: 999px) { /*mobile*/
    .modal-popup {
        width: auto;
        border-radius: 20px;
        max-width: none;
        left: 16px;
        right: 16px;
        transform: translate(0, -50%);
        /* max-height: calc(100vh - 32px); */
    }
    .modal-popup>.inner {
        padding: 24px 16px 24px 16px;
        max-height: none;
        max-height: calc(100vh - 30px);
        max-height: calc(100dvh - 30px); /*dvh로 대체*/
    }        
    .modal-popup .modal-header,
    .modal-popup .modal-footer {
        flex-shrink: 0;
        flex-grow: 0;
    }
    .modal-popup .modal-header {
        /* padding-bottom: 15px; */
        padding-bottom: 12px;
        margin-bottom: 16px;
    }
    .modal-popup .modal-header>.tit-area .tit {
        font-size: 20px;
    }    
    .modal-popup .modal-header .btn-close {
        width: 28px;
        height: 28px;
    }
}

/* 2024-04-04 추가 */
.modal-wrapper {
    display: none;
}
.modal-wrapper.active {
    display: block;
}
.modal-wrapper.active .modal {
    display: block;
}
.modal-wrapper.active .dim {
    display: block;
}

/* 상담지원 팝업 추가 */
.chat-wrap .modal-con {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.chat-wrap .modal-con .list a.link  {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    height: 88px;
    background-color: #f9f9fd;
    border-radius: 24px;
}
.chat-wrap .modal-con .list a.link > p  {
    font-size: 16px;
    font-weight: 500;
    color: #32394a;
}
.chat-wrap .modal-con .list a.link > img {
    height: 60px;
}
.chat-wrap .modal-con .list a.chat-btn > img    {
    height: 40px;
}
/* //상담지원 팝업 추가 */

/* 잇다 시작하기 팝업 */
.modal-txt-popup.img .modal {
    max-width: 500px;
    min-width: 400px;
    border-radius: 16px;
    /* margin: 0 auto; */
}
.modal-txt-popup.img .modal .modal-header   {
    padding: 14px 0px 10px;
    margin: 0;
    border-bottom: none;
}
.modal-txt-popup.img .modal .modal-header .btn-close    {
    width: 28px;
    color: #fff;
}
.modal-txt-popup.img .modal .main-inner {
    /* background: linear-gradient(47deg, #59b0ff, #7bc5fc, #2696ff); */
    background: linear-gradient(47deg, #aac0d9, #7ea8d9, #4e78a9);
    padding: 0px 24px 24px;
    border-radius: 8px;
}
.modal-txt-popup.img .modal .main-inner .modal-con  {
    background: #fff;
    padding: 24px 24px;
    border-radius: 24px;
}
.modal-txt-popup.img .modal .main-inner .modal-con .tit {
    padding: 0 0 24px;
    border-bottom: 1px solid #ddd;
}
.modal-txt-popup.img .d-flex    {
    justify-content: space-between;
    align-items: center;
    margin: 0 0 20px;
    gap: 1rem;
}
.modal-txt-popup.img .d-flex .txt-wrap  {text-align: left;}
.modal-txt-popup.img .d-flex .btn-group {margin: 30px 0 0;}
.modal-txt-popup.img .d-flex .icon-img    {
    width: 26%;
    min-width: 90px;
}
@media (max-width: 999px)   {
    .modal-txt-popup.img .modal {
        min-width: 300px;
    }
    .modal-txt-popup.img .d-flex    {
        justify-content: space-between;
        align-items: center;
        margin: 0 0 14px;
        gap: 1rem;
    }
}
/* //잇다 시작하기 팝업 */

/* 그라데이션 모달 s */
.main-wrapper.type2 .modal-inner	{
    width: 420px !important;
    box-sizing: border-box;
    border-radius: 16px;
    top: 3.5% !important;
    right: 3%;
    transform: translate(0%, 0%);
    position: absolute;
    z-index: 110;
    text-align: center;
}
.modal-popup-wrap .modal-con.bg-gradient	{
    padding: 24px;
    background: linear-gradient(319deg, #a2e0ff, #7ac4fc, #2696ff);
}
.modal-popup-wrap .modal-con.bg-gradient .content	{
    background: #fff;
    padding: 24px 14px 32px;
    border-radius: 14px;
}
.modal-popup-wrap .modal-con.bg-gradient .tit.t-red1	{
    color: #ff2643;
    font-size: 26px;
    font-weight: 700;
    padding: 0 0 20px;
}
.modal-popup-wrap .modal-con.bg-gradient .t-blue	{
    color: #00427d;
}
.modal-popup-wrap .modal-con.bg-gradient .popup-icon	{
    padding: 4px 0 12px;
    display: inline-block;
    width: 70px;
}
.main-wrapper .main-popup-wrap .modal.top-down   {top: 210px;}
.main-wrapper .main-popup-wrap .modal.width-fix {width: 400px;}
@media (max-width: 999px)	{
.main-wrapper.type2 .modal-inner	{
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    position: fixed;
    max-width: 90%;
    }
    .main-wrapper .main-popup-wrap .modal.top-down   {top: 50%;}
    .main-wrapper .main-popup-wrap .modal.width-fix {
        width: 400px;
        margin: 0 auto;
    }
}
@media (max-width: 499px)	{
    .main-wrapper .main-popup-wrap .modal.width-fix {
        width: auto;
        min-width: 300px;
        max-width: 400px;
    }
}
/* 그라데이션 모달 e */

/* btn close s */
.btn-close1	{
    width: 50px;
    height: 50px;
    position: absolute;
    content: "";
    right: 16px;
    top: 16px;
}
.btn-close1::before, .btn-close1::after	{
    position: absolute;
    content: "";
    right: 0px;
    top: 0px;
    height: 38px;
    width: 2px;
    background-color: #222;
}
.btn-close1::before{rotate: 45deg;}
.btn-close1::after{rotate: -45deg;}
/* btn close e */


/* 2411 대통령상 팝업 (배너 폰트, 팝업 )s */
/* #kv.popup-add .main-kv-slide-txt-box {
    top: 25%;
} */
.main-wrapper .main-popup-wrap .modal {
    left: initial;
    top: 160px;
    transform: translate(0, 0);
    /* width: 433px; */
    width: 400px;
    right: 2%;
}
@media  (max-width: 1320px)   {
.main-wrapper .main-popup-wrap .modal {
    right: 10%;
}
}
#kv.popup-add .main-kv-slide-arrow  {
    left: 49.7%;
    bottom: 13%;
    transform: translate(-50%, 22%);
    z-index: 9;
}

.main-wrapper .modal-popup-wrap .main-modal-swiper .swiper-slide    {width: 420px !important;}
@media  (max-width: 999px)  {
    .main-wrapper .main-popup-wrap .modal {
        left: 50%;
        right: 0;
        top: 50%;
        transform: translate(-50%, -50%);
        min-width: 420px;
        width: auto;
    }
    .main-wrapper .modal-popup-wrap .main-modal-swiper .swiper-slide    {
        width: 100% !important;
    }
}
@media  (max-width: 599px)  {
    .main-wrapper .main-popup-wrap .modal {
        left: calc(16/var(--base-font-size)*var(--default-font-size));
        right: calc(16/var(--base-font-size)*var(--default-font-size));
        top: 50%;
        transform: translate(0, -50%);
        min-width: auto;
    }
}
/* 2411 대통령상 팝업 e */

/* 2412 롤링 팝업 추가 s */
.main-popup-slide .main-kv-slide-item .bg .bg-inner img	{
    height: 100% !important;
    max-height: initial !important;
    object-fit: contain !important;
    transform: translate(0%, 0%) !important;
    position: relative !important;
    top: initial !important;
left: initial !important;
}
.main-popup-slide .main-kv-top	{
    height: 100% !important;
    max-height: auto !important;
}
.main-popup-slide .main-kv-slide-item .bg	{
    height: auto !important;
    max-height: auto !important;
    padding: 0 0 0rem
}

.main-popup-slide .main-kv-slide-item .bg .bg-inner	{
    position: initial !important;
    width: auto;
    height: auto !important;
}
.main-popup-slide .popup-add .main-kv-slide-arrow	{
    bottom: 4% !important;
}
.main-popup-slide .btn-chev-2--lg	{
    background: #0065d069;
    width: 40px !important;
    height: 40px !important;
}
.main-popup-slide .btn-chev-2--lg.arrow-prev	{
    position: absolute;
    top: 50%;
    left: 5px;
}
.main-popup-slide .btn-chev-2--lg.arrow-next	{
    position: absolute;
    top: 50%;
    right: 5px;
}
.main-popup-slide .btn-chev-2--lg::before	{
    /* border: 1px solid #233a85; */
    
}
.main-popup-slide .btn-chev-2--lg svg	{
    /* stroke: #233a85; */
}
@media (max-width: 999px)	{
    .main-popup-slide .btn-chev-2--lg	{display: none;}
}
@media (max-width: 599px)	{
    .main-popup-slide .main-kv-slide-item .bg	{
        padding-top: 0 !important;
    }
}
/* 2412 롤링 팝업 추가 e */

/* text 모달 팝업 s */
div.modal-txt-popup .modal    {
    max-width: 590px;
    width: 90%;
    left: 50%;
    right: 0;
    transform: translate(-50%, -50%);
}
.modal-popup-wrap .modal.modal-shadow {
    box-shadow: 0 0 30px 0 rgba(0,0,0,0.15);
    border-radius: 36px;
}
div.modal-txt-popup .modal .modal-con  {
    border-radius: 15px 15px 0 0;
}
div.modal-txt-popup .modal .modal-con h3 {
    margin: 14px 0;
}
div.modal-txt-popup .modal .modal-con .mdal-date-bg  {
    background-color: #f0f7fd; 
    border-radius: 20px;
    padding: 16px;
    display: inline-block;
}
div.modal-txt-popup .modal-footer .btn-group  {
    border-radius: 0 0 15px 15px;
    overflow: hidden;
}
div.modal-txt-popup .modal-footer .btn-group   {
    background: #3178e3;
    gap: 1px;
}
.list-wrap .shrink0	{flex-shrink: 0;}
.modal-popup-wrap .list-wrap ul	{
    display: flex;
    gap: 8px;
    text-align: left;
    margin-top: 10px;
}	
.modal-popup-wrap .list-wrap ul	li	{}
.modal-popup-wrap .list-wrap ul li:first-child	{
    flex-shrink: 0;
    width: 112px;
}	
div.modal-txt-popup.active .dim  {display: block !important;}

.main-wrapper .main-popup-wrap .modal.modal-top	{
    position: absolute;
    z-index: 90;
}
.modal-popup-wrap.modal-popup-wrap .modal-con	{padding: 0px;}
.modal-popup-wrap.modal-popup-wrap .modal-con img   {
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
transform: translateZ(0);
backface-visibility: hidden;
}
@media (max-width: 999px) {
    .modal-popup-wrap .list-wrap ul li:first-child {
        width: 96px;
    }
    .main-wrapper .main-popup-wrap .modal.modal-top	{
        position: fixed;
        z-index: 999;
    }
}
/* text 모달 팝업 e */

/* modal-main */
.modal-main {
    display: none;
    z-index: 110;
    position: fixed;
    top: 50%;
    left: 50%;
    max-height: 97vh;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 36px;
    width: 720px;
}

.main-wrapper .main-popup-wrap .modal-main {
    width: 405px;
    display: block;
    position: absolute;
    z-index: 90;
    top: 210px;
    transform: translate(0, 0);
    left: initial;
    right: 2%;
}

.modal-popup-wrap.active .dim   {
    display: none;
    z-index: 99;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: black;
    opacity: 0.7;
}
@media  (max-width: 999px)  {
    .main-wrapper .main-popup-wrap .modal-main {
        position: fixed;
        width: auto;
        z-index: 999;
        left: 50%;
        right: 0;
        top: 50%;
        transform: translate(-50%, -50%);
        min-width: 420px;
    }
    .main-wrapper .modal-popup-wrap .main-modal-swiper .swiper-slide    {
        width: 100% !important;
    }
    .modal-popup-wrap.active .dim  {display: block;}
}
@media  (max-width: 599px)  {
    .main-wrapper .main-popup-wrap .modal-main {
        left: calc(16/var(--base-font-size)*var(--default-font-size));
        right: calc(16/var(--base-font-size)*var(--default-font-size));
        top: 50%;
        transform: translate(0, -50%);
        min-width: auto;
    }
}