/* 모달 */
.modal-area{display: none; position: fixed;top:0;left: 0;z-index: 999;width: 100vw;height: 100vh;}
.modal-area .bread{width: 100%;height: 100%;opacity: .4;background-color: #333;}
.modal-area .area{position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); border-radius: 5px;background-color: #fff; min-width: 250px;}
.modal-area .area .modal-header{padding:40px 30px 0; display: flex;justify-content: space-between;align-items: center }
.modal-area .area .modal-header >h3{width: 90%;text-align: left}
.modal-area .area .modal-header >div{width: 10%;text-align: right;margin-right: -8px}
.modal-area .area .modal-body{padding:0px 30px 0; }
.modal-area .area .modal-body .imgs{display: flex;justify-content: space-between;align-items: center;}
.modal-area .area .modal-body .imgs .share{width: 62px;margin-right: 10px;}
.modal-area .area .modal-body .imgs .share:last-child{width: 140px; margin-right: 0;padding:10px 0; text-align: center;border-radius: 3px; background-color: #f7f7f7}
.modal-area .area .modal-body .imgs .share:last-child:hover{background-color: #ccc;}
.modal-area .area .modal-btn{padding:0px 30px 40px; }
.modal-area .area .modal-body .scroll-h-bar{max-height: 480px; overflow-y:scroll;max-width: 400px;}
.modal-area .area .modal-body .scroll-h-bar::-webkit-scrollbar {
    width: 5px;  /* 세로축 스크롤바 길이 */
}
.modal-area .area .modal-body .scroll-h-bar::-webkit-scrollbar-thumb {
    background: #e3e3e3;
}
.modal-area.category-modal .area{width: 484px;}
.modal-area.category-modal .area .category-ul >li{width: 100%;}

.modal-area.share-modal .area .modal-header{padding: 30px 30px 0;}
.modal-area.share-modal .area .modal-body{padding: 0 30px 0;}
.modal-area.share-modal .area .modal-btn{padding: 0 30px 30px;}


.modal-area.passNote-modal .modal-body .category-ul{width: 500px;}
.modal-area.passNote-modal .modal-body .category-ul .tab{display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;margin-right: -6px;}
.modal-area.passNote-modal .modal-body .category-ul ul li {display: inline-block; width: 44%; margin-right: 8%;padding: 10px 0 ;}
.modal-area.passNote-modal .modal-body .category-ul ul li:nth-child(2n+1){margin-right: 0;}
.modal-area.passNote-modal .modal-body .category-ul.pass-order ul li{margin-right: 8%}
.modal-area.passNote-modal .modal-body .category-ul.pass-order ul li:last-child{margin-right: 0}
.modal-area.passNote-modal .modal-body .category-ul ul li.first-li {width: 45%;display: block;}
.modal-area.passNote-modal .modal-body .category-ul ul li:hover div span,
.modal-area.passNote-modal .modal-body .category-ul ul li div span.on{color: #F67D10 !important}
.modal-area.passNote-modal .modal-btn{display: flex;justify-content: space-between;align-items: center}
.modal-area.passNote-modal .modal-btn .small-btn{width: calc(100% - 100px);}
.modal-area.passNote-modal .modal-btn .clean-btn{width: 100px;text-align: center}
.modal-area.passNote-modal .modal-btn .clean-btn:hover{color: #F67D10 !important}

.modal-area.pay-si-modal .area{min-width: 300px; max-width: 481px; }
.modal-area.pay-si-modal .modal-body .si-area-list{display: flex}
.modal-area.pay-si-modal .modal-body .scroll-h-bar .si-area-list{display: block}
.modal-area.pay-si-modal .modal-body .si-area-list .si-area.si-area-1{width: 40%}
.modal-area.pay-si-modal .modal-body .si-area-list .si-area.si-area-2{width: 60%}
.modal-area.pay-si-modal .modal-body .scroll-h-bar .si-area-list .si-area{width: 100%;}
.modal-area.pay-si-modal .modal-body .si-area-list .si-area .icon-list{display: flex}
.modal-area.pay-si-modal .modal-body .si-area-list .si-area .icon-list .icon-area{padding:0; text-align: center}
.modal-area.pay-si-modal .modal-body .si-area-list .si-area.si-area-1 .icon-list .icon-area{width: 50%}
.modal-area.pay-si-modal .modal-body .si-area-list .si-area.si-area-2 .icon-list .icon-area{width: calc(100% / 3);}
.modal-area.pay-si-modal .modal-body .si-area-list .si-area .icon-list .icon-area .icon{width: 70px; height: 70px; line-height: 70px; background-color: #f7f7f7; margin: 0 auto; }
.modal-area.pay-si-modal .modal-body .scroll-h-bar .si-area-list .si-area .icon-list .icon-area .icon {width: 100%;}
.modal-area.pay-si-modal .modal-body .si-area-list .si-area .icon-list .icon-area .text{margin-top: 10px; white-space: nowrap}
.modal-area.pay-si-modal .modal-body .si-area-list .si-area .content{position: relative ;margin: 15px 10px 5px;}
.modal-area.pay-si-modal .modal-body .si-area-list .si-area .content .model-bar{height: 8px;width: 100%; border-width: 0 2px;border-style: none solid;  }
.modal-area.pay-si-modal .modal-body .si-area-list .si-area .content .model-bar:before{content: ''; position: absolute; width: 100%;height: 2px; top:3px;left: 2px;}
.modal-area.pay-si-modal .modal-body .si-area-list .si-area .content .model-bar.bar-cp{border-color: #fff #F67D10;}
.modal-area.pay-si-modal .modal-body .si-area-list .si-area .content .model-bar.bar-cp:before{background-color: #F67D10}
.modal-area.pay-si-modal .modal-body .si-area-list .si-area .content .model-bar.bar-a5{border-color: #fff #a5a5a5;}
.modal-area.pay-si-modal .modal-body .si-area-list .si-area .content .model-bar.bar-a5:before{background-color: #a5a5a5}
.modal-area.pay-si-modal .modal-body .si-area-list .si-area .content p{text-align: center}

.not_scroll{
    overflow: hidden !important;
}