.bannerArea{
    padding: 10% 0;
    background: #071760;
    overflow: hidden;
}

.bannerArea::after{
    content: '';
    width: 39%;
    height: 100%;
    background-image: url(../images/repair/banner-decoPic-1.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    bottom: 0;
}

.bannerArea::before{
    content: '';
    width: 34%;
    height: 100%;
    background-image: url(../images/repair/banner-decoPic-2.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    top: 0;
}

.bannerArea .TxtBox{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    text-align: center;
    color: #fff;
}

.bannerArea .TxtBox .title b{
    font-size: calc(3px + 5vw);
}

.bannerArea .TxtBox .title h2{
    letter-spacing: calc(1px + 0.1vw);
}

/* userName caseName */
.userName,.caseName{
    font-weight: 400;
    font-size: calc(1px + 1vw);
    margin-bottom: 0;
}

.userName span,.caseName span{
    font-size: calc(3px + 1.2vw);
    letter-spacing: 1px;
    margin-right: 5px;
}

.caseName{
    margin-top: 1%;
}

.caseName span{
    margin-left: 10px;
}

/* .titleBox*/
.titleBox{
    border-bottom: 1px solid #5f2f8c;
    padding-bottom: 10px;
}

.titleBox h3{
    font-family: 'Noto Sans TC', sans-serif;
    color: #071760;
    font-weight: 400;
    margin-bottom: 0;
    font-size: calc(3px + 1.3vw);
}

.titleBox .primaryBtn {
    padding: 9px 12px;
    display: inline-block;
    font-family: 'Noto Sans TC', sans-serif;
}

.titleBox .primaryBtn:hover {
    color: #fff;
    transform: scale(1.05);
}

.titleBox .primaryBtn i{
    margin-left: 5px;
}

.titleBox .btnBox{
    text-align: right;
}

/* primaryOutlineBtn */

.primaryOutlineBtn{
    color: #071760;
    display: inline-block;
    background: #fff;
    border: 1px solid #071760;
    padding: 8px 16px;
    border-radius: 0;
    cursor: pointer;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: calc(1px + .8vw);
    line-height: 1;
    z-index: 10;
    text-align: center;
    transition: all 0.4s ease;
}

.primaryOutlineBtn:hover{
    color: #fff;
    background: #071760;
    border: 1px solid #071760;
    transform: scale(1.05);
    transition: all 0.4s ease;
}

.primaryOutlineBtn i{
    margin-left: 5px;
}

.primaryBtn{
    font-family: 'Noto Sans TC', sans-serif;
    border-radius: 0;
}

/* form */
form label{
    margin-bottom: 5px;
}

form .form-control{
    border-radius: 0;
    border-color: #5f2f8c;
    padding: .575rem .75rem;;
}

form .form-control:hover{
    border-color: #5f2f8c;
}

form .form-control:focus{
    border-color: #5f2f8c;
    box-shadow:  0 0 10px #5f2f8c2d;
}

form ::placeholder{
    color: #808080 !important;
}

form .primaryBtn{
    margin-top: 3%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: #fff;
    font-family: 'Noto Sans TC', sans-serif;
}

form .primaryBtn:hover{
    color: #fff;
}

form .form-check-input[type=checkbox] {
    border-radius: 0;
    border-color: #5f2f8c;
}

form .form-check-input[type=radio] {
    border-color: #5f2f8c;
}

form .form-check-input:checked  {
    background:  #5f2f8c; 
    box-shadow:  0 0 10px #5f2f8c2d;
}

form .form-check-input:focus  {
    box-shadow:  0 0 10px #5f2f8c2d;
}

@media (max-width: 991px) {
    .bannerArea{
        padding: 20% 0;
        background: #071760;
    }

    .bannerArea::after{
        width: 83%;
        height: 100%;
        left: -51%;
        top: 0;
        bottom: auto;
        background-image: url(../images/repair/banner-decoPic-1-m.png);
    }

    .bannerArea::before{
        width: 68%;
        height: 100%;
        right: -39%;
    }

    /* userName */

    .userName,.caseName{
        font-weight: 400;
        font-size: calc(12px + .4vw);
        margin-bottom: 0;
    }

    .userName span,.caseName span{
        font-size: calc(16px + 1.2vw);
        letter-spacing: 1px;
        margin-right: 5px;
    }

    /* .titleBox*/
    .titleBox{
        border-bottom: 1px solid #5f2f8c;
        padding-bottom: 10px;
    }

    .titleBox h3{
        font-size: calc(16px + 1.3vw);
    }

    .titleBox .btnBox{
        margin-top: 3%;
    }

    /* primaryOutlineBtn */
    .primaryOutlineBtn{
        font-size: calc(10px + .4vw);
    }

    form .form-control{
        padding: .375rem .75rem;;
    }

    form ::placeholder{
        font-size: calc(12px + .4vw);
    }
}