.bannerBox {
    background-color: #fafafa;
    overflow: hidden;
}

.bannerBox .banner:after {
    content: '';
    width: 10%;
    height: 100vh;
    position: absolute;
    top: 30%;
    left: 0;
    background-image: url(../images/contact/banner_img.jpg);
    background-size: auto 150%;
    background-position: bottom;

}

.bannerBox .banner i {
    text-align: left;
    display: block;
    width: 100%;
    transform: translateY(20px);
}

.bannerBox .banner .Txt {
    width: 80%;
    position: absolute;
    top: 50%;
    left: 15%;
    transform: translateY(-50%);
    z-index: 50;
}

.bannerBox .banner .ImgBox {
    text-align: right;
    padding: 10% 0;
}

.bannerBox .banner .ImgBox .InnerImg {
    width: 70%;
    display: inline-block;
    padding-top: 30%;

}

.bannerBox .banner .ImgBox .InnerImg .image {
    background-size: cover;
    background-position: bottom;

}


@media(max-width: 768px) {
    .bannerBox .banner .ImgBox {
        height: auto;
        padding: 0;

    }


    .bannerBox .banner .ImgBox .InnerImg {
        padding-top: 100%;
    }
}


/*ContactInfo*/
.ContactInfo{
background: -webkit-linear-gradient(bottom, #fafafa 0%, #ffffff 100%);
        background: -o-linear-gradient(bottom, #fafafa 0%, #ffffff 100%);
        background: linear-gradient(to bottom, #fafafa 0%, #ffffff 100%);
}
.ContactInfo .content {
    background-color: #F0F0F0;
    padding: 5%;
}

.companyInfo {

    background-color: #F0F0F0;
}

.ContactInfo .content .companyName {
    padding-top: 9%;
    padding-bottom: 3%;
    border-bottom: 1px solid #444;
    font-family: 'Noto Serif TC', serif;
}

.ContactInfo .content .info {
    padding-top: 30%;
}

.formBox {
    padding: 9% 3% 3%;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #fff;
    box-shadow: 3px 2px 10px rgba(0, 0, 0, 0.2);
}

.formBox:before {
    content: '';
    width: 60px;
    height: 60px;
    display: block;
    background-image: url(../images/logo_gold.svg);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
}

.formBox .Txt {
    text-align: center;

}

.formBox .Txt h3 {
    font-family: 'Noto Serif TC', serif;

}


.form-group {
    border-bottom: 1px solid #888;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea {
    width: 100%;
    border: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background: transparent;
}

input,
textarea {
    color: #888;
    border: none;
    letter-spacing: 1px;
    border-radius: 0px !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;

}

textarea {
    border: none !important;
}

.col-form-label {
    text-align: center;
    border-bottom: 1px solid #333;
}

button {
    margin-top: 2rem;
}

input:focus,
textarea:focus {
    outline: 0;
    /* border:1px solid #999; */
}

::-webkit-input-placeholder {
    color: #fff;
    letter-spacing: 2px;
}

:-moz-placeholder {
    color: #fff;
    letter-spacing: 2px;
}

::-moz-placeholder {
    color: #fff;
    letter-spacing: 2px;
}

:-ms-input-placeholder {
    color: #fff;
    letter-spacing: 2px;
}

@media(max-width: 768px) {
    .formBox {
        position: relative;
    }

    .companyInfo {
        padding: 5%;
        padding-bottom: 20%;
    }

    .ContactInfo .content {
        background: -webkit-linear-gradient(bottom, #F0F0F0 0%, #F0F0F0 50%, #ffffff 50%, #ffffff 100%);
        background: -o-linear-gradient(bottom, #F0F0F0 0%, #F0F0F0 50%, #ffffff 50%, #ffffff 100%);
        background: linear-gradient(to bottom, #F0F0F0 0%, #F0F0F0 50%, #ffffff 50%, #ffffff 100%);

    }

    .ContactInfo .content .info {
        padding-top: 10%;
    }
}




.JoinBox {

    margin-top: 10%;
    background-position: bottom;
    background-image: url(../images/contact/join_bg.jpg);
}

.JoinBox>div {
    min-height: 60vh;

}

.JoinBox .titleBox:before {
    content: '';
    width: 50%;
    min-height: 70vh;
    position: absolute;
    background-color: #E3DAD5;
    top: -20%;
    left: 10%;
}

.JoinBox .titleBox h3 {
    color: #fff;
    margin-bottom: 2rem;
    line-height: 1;
    text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
    padding-top: 15%;
}



.JoinBox .Txt {
    position: absolute;
    bottom: 6%;
    left: 40%;
}

@media(max-width: 768px) {
    .JoinBox>div {
        min-height: 40vh;
    }

    .JoinBox .titleBox:before {
        min-height: 47vh;
        width: 40%;
    }
}

@media(max-width: 768px) {
    .JoinBox>div {
        min-height: 50vh;
    }

    .JoinBox .titleBox:before {
        min-height: 60vh;
    }

}
@media(max-width: 480px) {
    .JoinBox{
        margin-top: 20%;
    }
    .JoinBox .titleBox:before{
        width: 100%;
        height: 20vh;
        left: 0;

    }
    .JoinBox .titleBox h3{
        padding-top: 10%;
        padding-bottom: 15%;
    }
}