@charset "utf-8";

/* main-popup */
.popup{border-radius: 15px;overflow: hidden;}
.popup .popup-contents{background: #fff;}
.popup a{display:block;}
.popup img{display:block;}
.popup .popup-bottom{display: flex;}
.popup .popup-bottom button{display:inline-block;padding: 15px 5px;width:30%;color:#fff;text-align: center;background:#001d61;font-size: 13px;}
.popup .popup-bottom button:first-child{width:70%;background:#8c919b;}

.modal-popup{display:none;position: fixed;top:50%;left:50%;transform: translate(-50%, -50%);width:100%;z-index: 999999;}

.modal-img{max-width: 1420px;height:100%;max-height: 799px;}
.modal-img .close-modal{position: absolute;top:30px;right: 30px;display: inline-block;z-index: 10;}
.modal-img .close-modal img{display: block;}
.modal-img .img-wrap{overflow-y: auto;max-height: 799px;}
.modal-img .img-wrap img{display: block;width:100%;}


.layer-password{position: fixed;top:0;left:0;width:100%;height:100%;z-index:1000;line-height: normal;}
.layer-password .layer-password-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius: 10px;box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.14);border: solid 1px #d4d4e8;background-color: #f5f5f8;padding:60px;width:100%;max-width: 550px;}
.layer-password .layer-password-wrap .pop-title{padding-left:37px;position: relative; font-size: 25px;font-weight: 800;color: #202020;}
.layer-password .layer-password-wrap .pop-title:before{content:"";position: absolute;left:0;width:32px;height:32px;background: url(/_public/images2/icon/password_ico.svg) no-repeat;background-size: cover;}
.layer-password .layer-password-wrap .layer-body{margin-top:20px;}
.layer-password .layer-password-wrap .layer-body .form-wrap{text-align: center;font-size:0;}

.layer-password .layer-password-wrap .layer-body .form-wrap input[type="password"]{border-radius: 10px;border: solid 1px #ccc;background-color: #fff;width:100%;height:60px;font-size: 18px;font-weight: 500;letter-spacing: 0.45px;padding:0 20px;}
.layer-password .layer-password-wrap .layer-body .form-wrap input[type="password"]::placeholder{color:#787878;}
.layer-password .layer-password-wrap .layer-body .form-wrap .button{margin-top:15px;display: block;width:100%;border-radius: 10px;background-color: #333;height:60px;font-size: 18px;font-weight: 500;letter-spacing: 0.45px;color:#fff;}
.layer-password .layer-password-wrap .layer-body .form-wrap .button:hover{background: #001039;}
.layer-password .layer-password-wrap .layer-body .layer-password-close{position:absolute;top:20px;right:20px;width:40px;height:40px;background: url(/_public/images2/icon/close_off.svg) no-repeat;background-size: cover;font-size:0;}
.layer-password .layer-password-wrap .layer-body .layer-password-close:hover{background: url(/_public/images2/icon/close_on.svg) no-repeat;background-size: cover;}

@media all and (max-width:1280px) {
  .modal-img .img-wrap{padding:0 20px;/*position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;*/}
    .modal-img .close-modal{right:50px;}
}

/* mobile */
@media all and (max-width:768px) {
    .layer-password .layer-password-wrap{max-width:90%;padding:40px 20px;}
    .layer-password .layer-password-wrap .pop-title{font-size:20px;padding-left:30px;}
    .layer-password .layer-password-wrap .pop-title:before{width:25px;height:25px;}
    .layer-password .layer-password-wrap .layer-body .layer-password-close{width:30px;height:30px;}
    .layer-password .layer-password-wrap .layer-body .form-wrap input[type="password"]{height:50px;font-size:14px;}
    .layer-password .layer-password-wrap .layer-body .form-wrap .button{height:50px;font-size:16px;margin-top:10px;}

    .popup{top:50% !important;left:50% !important;transform: translate(-50%, -50%);width:100%;max-width: 90%;}
    .popup .popup-contents img{display: block;width:100% !important;}

    .modal-popup{transform: none;top:0;left:0;width:100%;height:100%;}
    .modal-img .close-modal{width:30px;top:20px;right:20px;}
    .modal-img .img-wrap{padding:0;}
}