/**
 * 메인페이지(index.html) 공지 팝업 스타일.
 * 작성일 : 23년 06월 17일
 * 작성자 : 류정현
 */
.popup-container {
	position:fixed;
	width:100vw;
	height:100vh;
	z-index:10000;
	backdrop-filter: brightness(0.7);
}
.popup-wrap {
    position: fixed;
    left: calc(50% - 18rem);
    top: 7%;
    width: 36rem;
    /* height: 65%; */
    aspect-ratio: 1 / 1;
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0px 0px 5px 3px #9d9d9d;
    z-index:10000;
    backdrop-filter: blur(5px);
}
.popup-wrap-inactive{
	display:none;
}
.popup-x {
	width:1.2rem;
	height:1.2rem;
    position:absolute;
    right:10px;
    top:10px;
    cursor: pointer;
}
.popup-x span{ 
    font-size:1.2rem;
    color:gray;
}
.popup-header {
    height:calc(2.2rem);
    /* padding:1.5rem 2.5rem 1rem 2.5rem; */
    background-color: #ffffff;
    display:flex;
    flex-direction: column;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    /* border-bottom: 1px solid rgb(218, 218, 218); */
}
.popup-header-top {
    font-size:1rem;
    font-weight: 700;
}
.popup-header-bottom {
    font-size:1.2rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.popup-body {
	/*
    KERIS 강민지 연구원님 스크롤 제거 요청 25.01.22
    height:calc(100% - 2.2rem - 2.5rem);
    */
    height:100%;
    /* padding:2rem 2.5rem 1rem 2.5rem; */
    background-color: #ffffff;
    overflow-y: auto;
}

.popup-body::-webkit-scrollbar {
	width:10px;
	height:10px;
}

.popup-body::-webkit-scrollbar-thumb {
	background: #c0cee3;
	border-radius:16px;
}

.popup-body p {
    font-size: 1rem;
}

.popup-footer {
    height:2.5rem;
    display:flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #ffffff;
    border-top: 1px solid rgb(218, 218, 218);
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
.popup-footer-left {
    width:50%;
    padding: 0.5rem 0;
    text-align: center;
    cursor: pointer;
    color: #000000;
    font-size: 1rem;
    font-weight: bold;
}

.popup-footer-right {
    width:50%;
    padding: 0.5rem 0;
    display:flex;
    justify-content: space-evenly;
}
.popup-footer-right-check {
    display:flex;
    align-items: center;
}
.popup-footer-right-check label {
    color:#000000;
    font-size: 1rem;
    font-weight: 500;
}
.popup-footer-right-check input{
    appearance: auto;
    height:1rem;
    width:1rem;
    cursor: default;
    margin-left: 0.3rem;
}

.popup-footer-right-close {
    cursor:pointer;
    color: #000000;
    font-size: 1rem;
    font-weight: 500;
}


@media (max-width:576px) {
    .popup-wrap {
        /* left: calc(50% - 9rem); */
        left:0.15rem;
        width: calc(100% - 0.3rem);
        aspect-ratio: 1 / 1;
        /* iPonee SE */
        top: 10%;
    }
    .popup-header {
        height:calc(2.2rem);
        /* padding:1.5rem 1.5rem 1rem 1.5rem; */
    }
    .popup-header-top {
        font-size:0.8125rem;
    }
    .popup-header-bottom {
        font-size:1rem;
    }
    .popup-footer-left {
        width:35%;
    }
    .popup-footer-right {
        width:65%;
    }
    .popup-footer-right-check label {
	    font-size: 0.8125rem;
	}
	.popup-footer-right-close {
	    font-size: 0.8125rem;
	}
    .popup-body {
    	/*
    	KERIS 강민지 연구원님 스크롤 제거 요청 25.01.22
        height:calc(100% - 2.2rem - 2.5rem);
        
        KERIS 이초은 연구원님 스크롤 사이즈에 맞춰 생성 요청 25.05.07
        */
        height:calc(100% - 2.5rem);
        padding:0rem 1.5rem 1rem 1.5rem;
    }
    .popup-body p, .popup-body li{
        font-size:0.8125rem;
    }
}
@media (min-width:577px) and (max-width:768px) {
    .popup-wrap {
        left: 10%;
        width: 80%;
        aspect-ratio: 1 / 1;
        /* iPad Mini */
        top: 7%;
    }
    .popup-header {
        height:calc(2.2rem);
        font-size: 1.2rem;
    }
    .popup-header-top {
        font-size:0.9rem;
    }
    .popup-header-bottom {
        
        font-size:1.1rem;

    }
    .popup-body {
	    /*
	    KERIS 강민지 연구원님 스크롤 제거 요청 25.01.22
        height:calc(100% - 2.2rem - 2.5rem);
        
        KERIS 이초은 연구원님 스크롤 사이즈에 맞춰 생성 요청 25.05.07
        */
        height:calc(100% - 2.5rem);
        padding:0rem 1.5rem 1rem 1.5rem;
    }
    .popup-body p, .popup-body li{
        font-size:0.8125rem;
    }
    .popup-footer-right-check label {
	    font-size: 0.8125rem;
	}
	.popup-footer-right-close {
	    font-size: 0.8125rem;
	}
}
@media (min-width:769px) and (max-width:991px) {
    .popup-wrap {
        left: 17.5%;
        width: 65%;
        aspect-ratio: 1 / 1;
        /* iPad Air */
        top: 6%;
    }
    .popup-header {
        height:calc(2.2rem);
    }
    .popup-header-top {
        font-size:1rem;
    }
    .popup-header-bottom {
        font-size:1.2rem;
    }
    .popup-body {
    	/*
    	KERIS 강민지 연구원님 스크롤 제거 요청 25.01.22
        height:calc(100% - 2.2rem - 2.5rem);
        
        KERIS 이초은 연구원님 스크롤 사이즈에 맞춰 생성 요청 25.05.07
        height:calc(100% - 2.5rem);
        */
    }
    .popup-body p, .popup-body li{
        font-size:0.875rem;
    }
    .popup-footer-right-check label {
	    font-size: 0.875rem;
	}
	.popup-footer-right-close {
	    font-size: 0.875rem;
	}
}
@media (min-width:992px) and (max-width:1200px) {
    .popup-wrap {
        left: calc(50% - 19rem);
        width: 36rem;
        aspect-ratio: 1 / 1;
        /* 보통 가로 사이즈 */
        top: 8%;
    }
    .popup-header {
        height:calc(2.2rem);
    }
    .popup-header-top {
        font-size:1rem;
    }
    .popup-header-bottom {
        font-size:1.2rem;
    }
    .popup-body {
    	/*
    	KERIS 강민지 연구원님 스크롤 제거 요청 25.01.22
        height:calc(100% - 2.2rem - 2.5rem);
        
        KERIS 이초은 연구원님 스크롤 사이즈에 맞춰 생성 요청 25.05.07
        */
        height:calc(100% - 2.5rem);
    }
    .popup-body p, .popup-body li{
        font-size:1rem;
    }
}
@media (min-width:1201px){
    .popup-wrap {
        left: calc(50% - 18rem);
        width: 36rem;
        aspect-ratio: 1 / 1;
        /* 보통 가로 사이즈 */
        top: 8%;
    }
    .popup-header {
        height:calc(2.2rem);
    }
    .popup-body {
    	/*
    	KERIS 강민지 연구원님 스크롤 제거 요청 25.01.22
        height:calc(100% - 3.4rem);
        KERIS 이초은 연구원님 스크롤 사이즈에 맞춰 생성 요청 25.05.07
        */
        height:100%;
    }
}

   /*onboardIng style추가*/
    .mobile{display:none}
    .tablet{display:block}
    @media (max-width:500px) {
     .mobile{display:block}
     .tablet{display:none}
    }
.onboarding_swiper{position: fixed;  width: 100%;  height: 100vh;  z-index: 11000;}
.onboarding_swiper .onboarding_wrapper{ width: 100%; height: 100%;   z-index: 11;}
.onboarding_swiper .onboarding_slider{ width: 100%; height: 100%; background-color: #ddd;}
.onboarding_swiper  .onboarding_pagination{ position: absolute;  top: 82%; z-index: 13;}
.onboarding_swiper  .onboarding_pagination .swiper-pagination-bullet{background-color: #fff;}
.onboarding_swiper  .onboarding_pagination .swiper-pagination-bullet-active{background-color: #fff;  width: 24px;  border-radius: 24px;}
.onboarding_swiper  .onboarding_pagination .swiper-pagination-bullet:nth-child(1){display:none;}
.onboarding_swiper  .onboarding_pagination:has(.swiper-pagination-bullet:last-child:is(.swiper-pagination-bullet-active)){display:none;}

.onboarding_swiper  .onboarding_navigation {     position: absolute;  top: calc(80% - 60px);   z-index: 999;  width: calc(100% - 60px);  height: 30px; right: 30px;}
.onboarding_swiper  .onboarding_navigation > div{     height: 26px;  line-height: 26px;   font-size: 0.8rem;   font-weight: bold;  color: #575757;}
.onboarding_swiper  .onboarding_navigation .onboarding_prev{float: left;}
.onboarding_swiper  .onboarding_navigation .onboarding_prev:before{content: "<"; float:left;}
.onboarding_swiper  .onboarding_navigation .onboarding_prev:after{content: "이전";display: block;  text-align: center;float:right;     margin-left: 6px;}
.onboarding_swiper  .onboarding_navigation .onboarding_next{float: right;}
.onboarding_swiper  .onboarding_navigation .onboarding_next:before{content: ">";float:right;}
.onboarding_swiper  .onboarding_navigation .onboarding_next:after{content: "다음";display: block;  text-align: center; float:left;     margin-right: 6px;}
.onboarding_swiper  .onboarding_navigation .onboarding_prev.swiper-button-disabled,
.onboarding_swiper  .onboarding_navigation .onboarding_next.swiper-button-disabled{display: none;}
.onboarding_swiper  .onboarding_slider .onboarding_img{width: 100%; height: 100%; background-size: contain;  background-repeat: no-repeat;  background-position: center;}
.onboarding_swiper  .onboarding_slider .onboarding_content{width: 100%; height: 80%;  border-radius: 0 0 44px 44px; overflow: hidden; background-color: #fff;}
.onboarding_swiper .slide_button_wrap{position: absolute;  top: calc(80% + 15px);  width: 100%;}
.onboarding_swiper .slide_button{margin: 0 auto 7px; width: 90%; border-radius: 7px; padding: 8px 0;  text-align: center;  background-color: #fff;  font-weight: bold;  font-size: 0.8rem;  color: #333;    cursor: pointer; }
.onboarding_swiper .footer_btn_wrap{position: absolute;  bottom: 10px;  width: 90%;  margin: 0 5%;  display: flex;  justify-content: space-between;  z-index: 11200;}
.onboarding_swiper .skip_btn a{color: #fff; display: flex; font-size: 0.86rem; cursor: pointer;}
.onboarding_swiper .close_btn{display: flex; }
.onboarding_swiper .skip_btn .arrow {  background-position: 50%; background-repeat: no-repeat; width: 20px; height: 20px; background-size: 100% auto;}
.onboarding_swiper .close_btn, .onboarding_swiper .close_btn label{color: #fff; font-size: 0.8125rem; margin-right:5px}
.onboarding_swiper .close_btn >div {display: flex;}
.onboarding_swiper .close_btn >div.ftr_close{ margin-left: 12px; border-radius: 2px; padding: 1px 5px 3px; border: 1px solid #fff; font-size: 0.7rem; cursor: pointer;}
.onboarding_swiper  .slid_blck_bg{width: 100%;  height: 100vh;  background-color: rgba(0, 0, 0, 0.8);position: absolute;   background-size: 280px auto; background-repeat: no-repeat;  background-position: center;}