@charset "utf-8";
/*************************************************************************
* @ 서비스명   : popup
* @ 파일명     : /css/popup.css
* @ 페이지설명  : popup.css
* @ 작성자     : 한주현
* @ 작성일     : 2024.01.05
**************************************************************************/

.modal-layer{display:none;position: fixed;top:50%;left:50%;transform: translate(-50%, -50%);width:100%;max-width: 615px;z-index: 999999;}
.modal-layer .modal-top{display: flex;align-items:center;justify-content:space-between;height:50px; background-image: linear-gradient(to right, #5189fa 28%, #64bdff);padding:0 40px;}
.modal-layer .modal-top h3{ font-size: 15px;font-weight: normal;line-height: 1.2;color: #fff;}
.modal-layer .modal-top .close-modal{position:relative;font-size:0;display: inline-block;width:25px;height:25px;}
.modal-layer .modal-top .close-modal:before{content: "";display: inline-block;width:20px;height:1px;background: #fff;position: absolute;transform:rotate(45deg);left: 3px;top: 12px;}
.modal-layer .modal-top .close-modal:after{content: "";display: inline-block;width:20px;height:1px;background: #fff;position: absolute;transform:rotate(-45deg);left: 3px;top: 12px;}
.modal-layer .modal-con{background: #fff;}
.modal-layer .modal-con .button-box{display: flex;justify-content: center;align-items: center;padding:20px;gap:11px;}
.modal-layer .modal-con .button-box button{display: inline-block;width:92px;height:30px;text-align: center; border: solid 1px #4d79ee;background-color: #4d79ee;color:#fff;font-size:13px;border-radius: 20px;}
.modal-layer .modal-con .button-box button:first-child{background-color: #fff;color:#4d79ee;}



.modal-charge .modal-con section{padding:25px 40px 39px}
.modal-charge .modal-con section + section{border-top:1px solid #d7dce5;border-bottom:1px solid #d7dce5;background: #f9f9f9;}
.modal-charge .modal-con section h4{margin-bottom:10px;font-size: 16px;font-weight: bold;line-height: 1.2;color: #000;}
.modal-charge .modal-con section .radio-group{display: flex;flex-wrap: wrap;gap:16px;}
.modal-charge .modal-con section .radio-group .radio{position: relative;width: calc(33.3333% - 11px);}
.modal-charge .modal-con section .radio-group .radio input[type="radio"]{position: absolute;opacity: 0;}
.modal-charge .modal-con section .radio-group .radio label{display: flex;flex-direction: column;align-items: center;justify-content: center;padding:20px;border-radius: 15px;border: solid 1px #9e9e9e;text-align: center;gap:5px;cursor: pointer;height: 83px;}
.modal-charge .modal-con section .radio-group .radio label p{font-size: 14px;font-weight: normal;line-height: 1.2;text-align: center;color: #686868;}
.modal-charge .modal-con section .radio-group .radio label strong{display:block;font-size: 16px;font-weight: 500;line-height: 1.2;text-align: center;}
.modal-charge .modal-con section .radio-group .radio input[type="radio"]:checked + label{border:2px solid #4d79ee;}


.modal-bill .modal-con section{padding:25px 40px 39px}
.modal-bill .modal-con section dl{}
.modal-bill .modal-con section dl + dl{margin-top:29px;border-top:1px solid #d7dce5;padding-top:30px;}
.modal-bill .modal-con section dl dt{position:relative;width:120px;font-size: 16px;font-weight: bold;line-height: 1.2;color: #000;}
.modal-bill .modal-con section dl dd{font-size: 16px;font-weight: normal;line-height: 1.2;text-align: right;color: #686868;padding:0 0 19px 120px}
.modal-bill .modal-con section dl dd em{font-size: 18px;}
.modal-bill .modal-con section dl.total dt{top:2px;}
.modal-bill .modal-con section dl.total dd{font-size: 18px;}
.modal-bill .modal-con p{text-align: center;border-top:1px solid #d7dce5;border-bottom:1px solid #d7dce5;font-size: 16px;padding:35px 0;font-weight: normal;line-height: 1.2;color: #686868;}


.modal-material{max-width:670px;}
.modal-material .modal-top{background: #fff;border-bottom: 1px solid #cfcfcf}
.modal-material .modal-top h3{color: #000;}
.modal-material .modal-top .close-modal:before{background: #000;}
.modal-material .modal-top .close-modal:after{background: #000;}
.modal-material .modal-con section{padding:25px 40px 39px;display: flex;gap:30px;}
.modal-material .modal-con section > div{flex:1;}
.modal-material .modal-con section figure{}
.modal-material .modal-con section figure + figure{margin-top:30px;}
.modal-material .modal-con section figure figcaption{font-size:16px;}
.modal-material .modal-con section dl{}
.modal-material .modal-con section dl dt{font-size:18px;font-weight: bold;}
.modal-material .modal-con section dl dd{margin-top:10px;}
.modal-material .modal-con section dl dd + dt{margin-top:20px;}
.modal-material .modal-con section dl dd input[type="text"]{width: 100%;height: 37px;border: 1px solid #c9c9c9;padding: 0 17px;font-size: 15px;font-weight: normal;color: #000;border-radius: 7px;}
.modal-material .modal-con section dl dd textarea{width: 100%;border: 1px solid #c9c9c9;padding:17px;height:120px;font-size: 15px;font-weight: normal;color: #000;border-radius: 7px;resize: none}
.modal-material .modal-con section dl dd select{width: 100%;height: 37px;border: 1px solid #c9c9c9;padding: 0 17px;font-size: 15px;font-weight: normal;color: #000;border-radius: 7px;   background: url(../images/ico/select_icon2.svg) no-repeat;background-position: 95% 50%;}
.modal-material .modal-con ul{margin-top:20px;}
.modal-material .modal-con ul li{position:relative;padding-left:10px;font-size:14px;color:#686868;}
.modal-material .modal-con ul li:before{content: "";display: inline-block;width:5px;height:1px;background: #686868;position: absolute;top:9px;left:0;}
.modal-material .modal-con ul li + li{margin-top:5px;}
.modal-material .modal-con .price{border-top: 1px solid #d7dce5;border-bottom: 1px solid #d7dce5;text-align: center;padding:35px 0;}
.modal-material .modal-con .price strong{font-size:18px;}
.modal-material .modal-con .price p{font-size:16px;color:#686868;}



.modal-material2{max-width:670px;}
.modal-material2 .modal-top{background: #fff;border-bottom: 1px solid #cfcfcf}
.modal-material2 .modal-top h3{color: #000;}
.modal-material2 .modal-top .close-modal:before{background: #000;}
.modal-material2 .modal-top .close-modal:after{background: #000;}
.modal-material2 .modal-con section{padding:25px 40px 39px}
.modal-material2 .modal-con section{padding:25px 40px 39px;display: flex;gap:30px;}
.modal-material2 .modal-con section > div{flex:1;}
.modal-material2 .modal-con section figure{}
.modal-material2 .modal-con section figure + figure{margin-top:30px;}
.modal-material2 .modal-con section figure figcaption{font-size:16px;}
.modal-material2 .modal-con dl{padding:0 40px 0}
.modal-material2 .modal-con dl dt{font-size:18px;font-weight: bold;}
.modal-material2 .modal-con dl dd{margin-top:10px;}
.modal-material2 .modal-con dl dd + dt{margin-top:20px;}
.modal-material2 .modal-con dl dd textarea{width: 100%;border: 1px solid #c9c9c9;padding:17px;height:120px;font-size: 15px;font-weight: normal;color: #000;border-radius: 7px;resize: none}

/* tablet */
@media all and (max-width:1280px) {

}


/* mobile */
@media all and (max-width:768px) {
    .modal-layer{width:100%;height:100%;left:0;top:0;transform: none;background: #fff;}
    .modal-layer .modal-top{padding:0 20px;}
    .modal-layer .modal-con{background: #fff;max-height: calc(100% - 50px);overflow-y: auto;}


    .modal-charge .modal-con section{padding:30px 20px;}
    .modal-charge .modal-con section .radio-group{gap:10px;}
    .modal-charge .modal-con section .radio-group .radio{width:calc(50% - 5px);}

    .modal-bill .modal-con section{padding:30px 20px;}
    .modal-bill .modal-con section dl.total dd{color:#4d79ee;}

    .modal-material .modal-con section{padding:30px 20px;flex-direction: column;}

    .modal-material2 .modal-con section{padding:30px 20px;flex-direction: column;}
    .modal-material2 .modal-con dl{padding:0 20px;}
}