:root{
    --main-c: #815636;
    --sec-c:#b17f4e;
    --text-c:#7a6766;
}
html{
    background-color: #f4ecdc;
}
body{
    font-size: 3.6vw;
    background-color: #f4ecdc;
    font-family: 'Noto Sans TC','微軟正黑體', sans-serif;
    font-weight: 400;
    font-size: 3.6vw;
    color: var(--text-c);
    line-height: 1.75;
    letter-spacing: 0.5px;
    background-image: url(../img/bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;

}
p{
    margin: 2vw 0;
}
label{
    font-size: 3.8vw;
}
h4{
    /* color: var(--main-c); */
    color: var(--text-c);
    font-size: 3.8vw;
}
h4 span{
    color: #fff;
    margin-right: 10px;
    font-size: 4vw;
}
h4.square-title{
    background-color: var(--sec-c);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 2.2vw;
    color: #fff;   
}
h4.square-title .line{
    flex-grow: 1;
    width: 100%;
    height: 3vw;
    display: flex;
    background-image: url(../img/line.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
h4.square-title .line:first-child{
    margin-right: 3vw;
    margin-left: 1vw;
}
h4.square-title .line:last-child{
    margin-right: 1vw;
    margin-left: 3vw;
    transform: rotate(-180deg);
}
h4.square-title .text{
    flex-shrink: 0;
}
h5{
    color: var(--main-c);
}
.mt-6{
    margin-top: 20vh;
}
.project .content{
    padding: 6vw 6vw 16vw 6vw;
    /* background-image: none;   */
    min-height: 100%;
}
.project .content:before{
    display: none;
}

.inside-border{
    border: none;
    padding: 0;
}
.bottom-deco{
    margin-left: -6vw;
    margin-right: -6vw;
    width: calc(100% + 12vw);
    margin-top: -25%;
    pointer-events: none;
}
.fw-md{
    font-weight: 500;
}
.my-md{
    margin: 6vw 0 !important;
}

.logo{
    width: 60%;
    margin: 2vw auto;
}

.main-btn{
    width: 150px;
    height: 40px;
    background-color: var(--main-c);
    color: #fff !important;
    border: none;
    border-radius: 0px;
    letter-spacing: 2px;
    font-size: 3.6vw;
}
.sec-btn{
    background-color: #a08e85;
    width: 150px;
    height: 40px;
    color: #fff !important;
    border: none;
    border-radius: 0px;
    letter-spacing: 2px;
    font-size: 3.6vw;
}
.third-btn{
    width: 150px;
    height: 40px;
    background-color: rgba(129,86,54,0.5);
    color: #fff !important;
    border: none;
    border-radius: 0px;
    letter-spacing: 2px;
    font-size: 3.6vw;
}
.btn-area{
    padding: 6vw 0;
}
.input-g+.input-g{
    margin-top: 5vw;
}
.input-style{
    border: 1px solid var(--text-c);
    background-color: #fff;
    width: 100%;
    outline: none !important;
    -webkit-appearance: none;
    height: 36px;
    padding: 1vw 3vw;
    /* color: var(--sec-c); */
    color: var(--text-c);
    border-radius: 0px;
    display: flex;
    align-items: center;
}
.input-style::placeholder{
    /* color: #AFAFAF; */
    color: #afafaf;
}
select.input-style{
    background-image: url(../img/select-icon.svg);
    background-size: 3.8vw;
    background-repeat: no-repeat;
    background-position: right 2vw top 13px;
}
.input-birth .year{
    margin-bottom: 8px;
}
.input-birth .month{
    margin-right: 8px;
}
.error-text{
    margin: 0;
    margin-top: 2px;
    font-size: 3vw;
    color: var(--sec-c);
}
.agree {
    margin: 3vw 0;
}
.agree label{
    font-size: 3.6vw;
    color: var(--text-c);
    display: flex;
    justify-content: center;
    align-items: center;
}
input[type='checkbox']:checked + label span:after{
    transition: 0.3s;
    opacity: 1;
}
.agree span{
    border: 2px solid #b17f4e;
}
.agree span:after{
    border-color: #b17f4e;
}

.agree a img{
    height: auto;
}
.close-modal{
    font-size: 4vw;
    /* line-height: 25px; */
    width: 6vw;
    height: 6vw;
    right: 0;
    top: 0;
    background-color: var(--sec-c);
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff !important;
    font-size: 18px;
}
.option-area{
    /* background-color: #beb6b6; */
    background-color: #e7d6b9;
    color: #4b3a38;
    color: #2e2a2a;
}
.option-area label {
    padding: 8px;
    width: 100%;
}
.active-bar{
    background-color: rgba(0,0,0,0.1);
    z-index: -1;
}
.active-bar:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-clip-path: polygon(0%0%, 0% 100%,100% 100%,100% 0%);
    background-color: transparent;
}
.select-action{
    background-color: #e7d6b9;
}
.input-style.hasArrow{
    background-position: right 2vw top 50%;
}
.modal-style-1{
    background-color: #3f2b29;
    color: #736665;
}
.modal-style-1 h4{
    color: var(--sec-c);
}
.hint{
    font-size: 2.8vw;
    color: #9e8f82;
    margin: 0;
    margin-top: 1vw;
    line-height: 1.5;
}
.hint-main{
    color: var(--text-c);
}
.form-mg{
    margin: 2vw 0;
}
.form-mg label{
    margin-bottom: 4px;
    margin-top: 0;
    font-weight: 500;
}
.font-focus{
    font-size: 5.8vw;
    margin: 0 2px;
}
.send-code{
    height: 34px;
    font-size: 3.6vw;
}
span.icon{
    display: inline-block;
    width: 3.6vw;
    font-size: 0;
    margin-right: 5px;
}
hr{
    border-top: 1px solid var(--main-c);
    width: 100%;
}
.wait-icon{
    width: 33%;
    height: auto;
    margin: 4vw auto 2vw auto;
    text-align: center;
}
.wait-icon img{
    width: 100%;
}

.gps h5{
    color: var(--main-c);
    font-size: 4.2vw;
    margin-top: 0;
}
.list-style-none{
    list-style: none;
}
.result-deco{
    margin-right: -6vw;
    margin-left: -6vw;
    width: calc( 100% + 12vw);
    margin-top: 3vw;
}
.project .resultdeco2-page{
    padding-bottom: 0;
}
[v-cloak] {
    display: none;
}
.content.results{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.content.results .btn-area{
    margin-bottom: 22vw;
}