.warp-pop-up{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;background-color:rgba(0,0,0,0.7);overflow:auto;opacity:0;color:#fff;transition:.5s all;box-sizing:border-box;scrollbar-width:none;-ms-overflow-style:none}
.warp-pop-up .warp.show{opacity:1}
.warp-pop-up.show{display:block}
.warp-pop-up.showing{opacity:1}
.warp-pop-up.message.show{display:flex;align-items:center;justify-content:center}
.warp-pop-up .pop-bg{background:rgba(0,0,0,0.6);min-height:100vh;padding:100px 0;transition:.5s all;opacity:0}
.warp-pop-up .pop-bg.show{opacity:1}
.warp-pop-up .form-group label{color:#6D6E71;font-size:13pt}
.warp-pop-up .form-group ::placeholder{color:#6D6E71}
.warp-pop-up .warp{margin:0 auto;transition:.5s all;position:relative}
.warp-pop-up .pop-bg .close{text-shadow:none;position:absolute;top:15px;right:15px;cursor:pointer;color:#fff}
.massage-pop{display:flex;background:rgba(255,255,255,0.8);border:5px solid #6D6E71;box-sizing:border-box;color:#000;border-radius:20px;width:100%;align-items:center;padding:15px;transition:.5s all}
#PopMassage{width:60%;min-height:400px}
#PopMassage .carousel-control-prev{left:-50px}
#PopMassage .carousel-control-next{right:-50px}
#PopMassage .carousel-control-next,#PopMassage .carousel-control-prev{width:initial}
.massage-pop .icon-massage{text-align:center;width:20%}
.massage-pop .icon-massage img{width:90px}
.massage-pop .text{padding-right:40px;padding-left:10px;width:80%}
.massage-pop .detail{height:300px;margin-left:-25px;}
.massage-pop .text ol{margin:0;text-align:justify}
.massage-pop .text li{font-size:.9rem!important}
.message .img-info{width:500px;margin:0 auto}
.massage-pop .button-warp{margin-top:15px}
.massage-pop .hblack-outline-btn{padding:4.9px 13px;margin-left:10px}
.message .close-icon{position:absolute;right:30px;top:20px}
.message .close-icon img{width:18px;cursor:pointer}
.massage-pop p{color:#2B2B2B}
.pengaduan .white{margin-top:20px;position:relative;background:#fff;border-radius:20px;padding:60px 120px}
.pengaduan .warp{width:65%}
.pengaduan .white .close{top:-3px;right:-50px}
.pengaduan .head{display:flex;padding:0 10px}
.pengaduan .left{display:flex;align-items:center;width:60%}
.pengaduan .right{width:40%;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end}
.pengaduan .rep{margin-left:25px}
.pengaduan .img-icon{display:flex}
.pengaduan .date p{font-size:.9rem}
.pengaduan .form-group{margin-bottom:2.5rem}
.pengaduan .form-group:last-child{margin-bottom:0}
.pengaduan .right img{width:30px;margin-right:10px}
.pengaduan .custom-file{padding-bottom:60px}
.pengaduan .custom-file-input{height:calc(2em + 1.2rem + 4px)}
.pengaduan .custom-file-label{border:1px solid #6D6E71;padding-left:230px;width:100%;padding-top:15px;padding-bottom:40px}
.pengaduan .custom-file-label::after{height:auto;width:200px;border-left:none;left:0;text-align:center;border-radius:0;margin:8px;margin-left:15px}
.pengaduan .custom-file-label.hover::after{box-shadow:0 3px 3px}
.pengaduan .btn.more-btn{padding:10px 40px;font-weight:400;box-shadow:initial;text-transform:capitalize}
.pengaduan .left img{width:120px}
.pengaduan .form-group label,.pengaduan .form-group ::placeholder{font-style:italic;font-weight:300}
.login-pop .blue{background:rgba(30,154,215,0.6);border-radius:20px;padding:70px 100px 35px}
.login-pop .warp{width:45%}
.login-pop .img-logo{position:absolute;left:-75px;top:25px}
.login-pop .welcom{margin-left:90px;margin-bottom:15px}
.login-pop .bottom-warp{display:flex;justify-content:flex-end;align-items:center}
.login-pop .blue-btn{border:2px solid #fff;padding:5px 70px;font-weight:400}
.login-pop .checkbox-warp{display:flex}
.login-pop .checkbox-warp p{margin-right:20px}
.login-pop .custom-checkbox{display:block;position:relative;padding-left:0;margin-right:60px;margin-bottom:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.login-pop .custom-checkbox input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}
.login-pop .checkmark{position:absolute;top:2px;left:0;height:20px;width:20px;border:1px solid #fff;background-color:#fff}
.login-pop .checkmark:after{content:"";position:absolute;display:none}
.login-pop .custom-checkbox input:checked ~ .checkmark:after{display:block}
.login-pop .custom-checkbox .checkmark:after{left:6px;top:4px;width:5px;height:10px;border:solid #000;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
@media only screen and (max-width: 1300px) {
.login-pop .warp{width:50%}
}
@media only screen and (max-width: 1199px) {
#PopMassage{width:70%}
.pengaduan .warp{width:75%}
.pengaduan .form-group{margin-bottom:2rem}
.pengaduan .custom-file-label::after{width:160px}
.pengaduan .custom-file-label{padding-left:190px}
.pengaduan .white{padding:60px}
.login-pop .warp{width:60%}
}
@media only screen and (max-width: 991px) {
.warp-pop-up .pop-bg .close{font-size:1.3rem}
.login-pop .blue{padding:50px 65px 30px;font-size:.9rem}
.login-pop .img-logo{left:-53px;top:29px;width:120px}
.login-pop .welcom h2{font-size:1.5rem}
.login-pop .welcom{margin-left:60px}
.login-pop .checkbox-warp p{margin-right:15px}
.login-pop .blue-btn{padding:5px 55px}
.login-pop .custom-checkbox{margin-right:50px}
.login-pop .form-control{font-size:.85rem}
.massage-pop .icon-massage img{width:70px}
.massage-pop p{font-size:.9rem}
.massage-pop .btn{font-size:.8rem}
.message .close-icon img{width:15px}
.pengaduan .warp{width:80%}
.pengaduan .left img{width:90px}
.pengaduan .rep h3,.pengaduan .img-icon h3{font-size:1.5rem}
.pengaduan .date p{font-size:.8rem}
.pengaduan .right img{width:25px}
.pengaduan .rep{margin-left:15px}
}
@media only screen and (max-width: 767px) {
.warp-pop-up .form-group label,.warp-pop-up .form-group ::placeholder,.warp-pop-up select.form-control{font-size:11pt}
.login-pop .warp{width:65%}
.login-pop .blue{padding:40px 50px 20px}
.login-pop .custom-checkbox{margin-right:0}
.login-pop .checkbox-warp{display:flex;flex-direction:row-reverse;justify-content:flex-end}
.login-pop .welcom{margin-left:50px}
.login-pop .welcom h2{font-size:1.4rem}
.login-pop .bottom-warp{display:block}
.login-pop .img-logo{left:-42px;top:33px;width:100px}
.login-pop .checkbox-warp p{margin-right:0;margin-left:25px}
.login-pop .blue-btn{padding:5px 43px}
.massage-pop{flex-direction:column}
.massage-pop .text{margin-top:20px;padding:0;width:100%}
.massage-pop .icon-massage{width:100%}
.pengaduan .white{padding:30px}
.pengaduan .form-group{margin-bottom:1.5rem}
.pengaduan .left img{width:50px}
.pengaduan .rep h3,.pengaduan .img-icon h3{font-size:1.1rem}
.pengaduan .date p{font-size:.5rem}
.pengaduan .white .close{right:-30px}
.pengaduan .right img{width:20px}
.pengaduan .custom-file-label{padding-bottom:35px}
}
@media only screen and (max-width: 576px) {
.pengaduan .warp{width:90%}
.pengaduan .custom-file-label::after{width:100px}
.pengaduan .custom-file-label{padding-left:130px}
.pengaduan .btn.more-btn{padding:10px 30px;font-size:.8rem}
.pengaduan .date p{font-size:.4rem}
.pengaduan .right img{width:15px}
.pengaduan .rep h3,.pengaduan .img-icon h3{font-size:.8rem}
.pengaduan .white .close{right:10px;top:-95px}
.pengaduan .left img{width:40px}
.pengaduan .rep{margin-left:10px}
.login-pop .warp{width:80%}
.login-pop .blue-btn{font-size:.8rem}
.login-pop .blue{padding:30px 40px 20px;font-size:.8rem}
.login-pop .form-control{font-size:.8rem}
.login-pop .img-logo{left:-22px;top:40px;width:60px}
.login-pop .welcom{margin-left:40px}
.login-pop .welcom h2{font-size:1.1rem}
.login-pop .checkmark{height:15px;width:15px;top:1px}
#PopMassage{width:90%}
.massage-pop .text li{font-size:.7rem!important}
.massage-pop .detail h6{font-size:9pt}
#PopMassage .carousel-control-prev,#PopMassage .carousel-control-next{display:none}
.message .img-info{width:100%}
}