@charset "utf-8";
#myBtn {
    outline:0
}
@keyframes animatetop {
    0% {
        transform:translateY(-50%);
        opacity:0
    }
    100% {
        transform:translateY(0);
        opacity:1
    }
}
.modal {
    display:none;
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:100%;
    height:100%;
    overflow:auto;
    background-color:rgba(0,0,0,.4);
    margin:auto;
    z-index:9999999999
}
@keyframes slideToCenter {
    0% {
        top:0;
        opacity:0
    }
    100% {
        top:50%;
        opacity:1
    }
}
.modal-content {
    position:absolute;
    background-color:#fefefe;
    margin:auto;
    padding:0;
    overflow:auto;
    width:50%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    box-shadow:0 4px 8px 0 rgba(0,0,0,.2),
    0 6px 20px 0 rgba(0,0,0,.19);
    -webkit-animation:1.25s ease-in-out slideToCenter;
    animation:1.25s ease-in-out slideToCenter;
    will-change:transform,
    opacity
}
.close {
    color:#b9b9b9;
    float:right;
    font-size:34px;
    line-height:4px;
    transition:.25s ease-out;
    position:absolute;
    top:15px;
    right:1%
}
.close:focus,
.close:hover {
    color:#a4bde4;
    text-decoration:none;
    cursor:pointer
}
.modal-body {
    width:100%;
    float:left;
    text-align:center;
    margin:0;
    padding:45px 8% 30px
}
.modal-body p {
    font-size:17px;
    color:#706f6f;
    line-height:26px;
    margin:0 0 16px
}
.modal-body h2 {
    font-size:24px;
    color:#a4bde4;
    line-height:33px;
    margin:0 0 22px
}
.direction-modal .modal-body {
    padding:55px 8% 34px;
    overflow-y:auto
}
.direction-modal .modal-body h2 {
    color:#000;
    padding:0 0 10px;
    font-family:Geist,
    sans-serif
}
.direction-modal .modal-content {
    background:#fff;
    border-radius:12px;
    border:3px solid #87937b!important
}
.direction-modal .close.closeaddapt {
    top:17px;
    right:17px;
    border-radius:50%;
    border:1px solid #000;
    height:31px;
    width:31px;
    display:flex;
    align-items:center;
    padding:7px 7px 11px 5.5px;
    line-height:1;
    color:#000
}
.direction-modal .dir-contet p {
    color:#000;
    font-size:16px;
    font-weight:400;
    letter-spacing:normal;
    line-height:1.5
}
.direction-modal .close.closeaddapt:hover {
    color:#3d4f6b;
    border-color:#3d4f6b
}
.direction-modal .dir-contet ul li {
    font-size:16px;
    color:#000;
    margin:0 0 6px;
    padding:0;
    font-weight:400
}
.direction-modal .modal-body .direction-icon {
    width:100%;
    display:block
}
.direction-modal .modal-body .direction-icon img {
    width:56px;
    display:block;
    margin:0 auto 15px
}
.direction-modal .modal-body .commomodal {
    width:100%;
    display:block;
    float:left;
    margin:0
}
.direction-modal .dir-contet ol li {
    padding:0
}
.direction-modal .dir-contet ol li:before {
    position:relative;
    left:-3px
}
.direction-modal .dir-contet ul li:before {
    color:#000;
    position:relative;
    left:3px;
    top:-3px
}
@media screen and (max-width:480px) {
    .modal-content {
        width:90%;
        transform:translate(-50%,-46%)
    }
    .modal-body p {
        margin:0 0 14px
    }
    .modal-body h2 {
        font-size:21px;
        line-height:29px;
        margin:0 0 16px
    }
    .modal-body {
        padding:45px 5% 30px
    }
    .direction-modal .dir-contet p {
        font-size:14px
    }
    .direction-modal .modal-body .direction-icon img {
        width:50px
    }
    .direction-modal .dir-contet ul li {
        font-size:14px
    }
    .direction-modal .dir-contet ul li:before {
        font-size:12px;
        left:4px
    }
    .direction-modal .dir-contet ol li,
    .direction-modal .dir-contet ol li:before {
        font-size:14px
    }
    .direction-modal .modal-body .commomodal {
        max-height:68vh
    }
    .direction-modal .modal-body h2 {
        padding:10px 0 6px;
        font-size:18px
    }
    .direction-modal .modal-body {
        padding:45px 8% 25px
    }
}
@media screen and (min-width:481px) and (max-width:600px) {
    .modal-content {
        width:90%
    }
    .modal-body p {
        margin:0 0 14px
    }
    .modal-body h2 {
        font-size:21px;
        line-height:29px;
        margin:0 0 16px
    }
    .modal-body {
        padding:45px 5% 30px
    }
    .direction-modal .dir-contet p {
        font-size:14px
    }
    .direction-modal .modal-body .direction-icon img {
        width:50px
    }
    .direction-modal .dir-contet ul li {
        font-size:14px
    }
    .direction-modal .dir-contet ul li:before {
        font-size:12px;
        left:4px
    }
    .direction-modal .dir-contet ol li,
    .direction-modal .dir-contet ol li:before {
        font-size:14px
    }
    .direction-modal .modal-body h2 {
        padding:10px 0 6px
    }
    .direction-modal .modal-body {
        padding:45px 8% 25px
    }
}
@media screen and (min-width:601px) and (max-width:767px) {
    .modal-content {
        width:90%
    }
    .modal-body p {
        margin:0 0 14px
    }
    .modal-body h2 {
        font-size:21px;
        line-height:29px;
        margin:0 0 16px
    }
    .modal-body {
        padding:45px 5% 30px
    }
    .direction-modal .dir-contet p {
        font-size:14px
    }
    .direction-modal .modal-body .direction-icon img {
        width:50px
    }
    .direction-modal .dir-contet ul li {
        font-size:14px
    }
    .direction-modal .dir-contet ul li:before {
        font-size:12px;
        left:4px
    }
    .direction-modal .dir-contet ol li,
    .direction-modal .dir-contet ol li:before {
        font-size:14px
    }
    .direction-modal .modal-body h2 {
        padding:10px 0 6px
    }
    .direction-modal .modal-body {
        padding:45px 8% 25px
    }
}
@media screen and (min-width:768px) and (max-width:900px) {
    .modal-content {
        width:60%
    }
    .modal-body p {
        margin:0 0 10px
    }
    .modal-body h2 {
        font-size:20px;
        line-height:29px;
        margin:0 0 20px
    }
    .direction-modal .dir-contet p {
        font-size:14px
    }
    .direction-modal .modal-body .direction-icon img {
        width:50px
    }
    .direction-modal .dir-contet ul li {
        font-size:14px
    }
    .direction-modal .dir-contet ul li:before {
        font-size:12px;
        left:4px
    }
    .direction-modal .dir-contet ol li,
    .direction-modal .dir-contet ol li:before {
        font-size:14px
    }
    .direction-modal .modal-body h2 {
        font-size:20px;
        padding:0
    }
}
@media screen and (min-width:901px) and (max-width:1024px) {
    .modal-content {
        width:55%
    }
    .modal-body p {
        margin:0 0 13px
    }
    .modal-body h2 {
        font-size:22px;
        line-height:31px;
        margin:0 0 23px
    }
    .direction-modal .dir-contet p {
        font-size:15px
    }
    .direction-modal .modal-body .direction-icon img {
        width:50px
    }
    .direction-modal .dir-contet ol li,
    .direction-modal .dir-contet ol li:before,
    .direction-modal .dir-contet ul li {
        font-size:15px
    }
    .direction-modal .modal-body h2 {
        font-size:21px;
        padding:0
    }
}
@media screen and (min-width:1025px) and (max-width:1240px) {
    .direction-modal .modal-body h2 {
        font-size:21px;
        padding:0
    }
}