.cal-main{width: 80%;display: flex;}
.cal{background-color: #fff; padding: 20px;}
.cal>form>div{padding-bottom: 20px;}
.cal>form>div>ul{padding: 20px;background-color: #f1f5f8;display: flex; flex-wrap: wrap;}
.cal>form>div>ul>li{    padding-bottom: 10px;    width: 50%;display: flex;align-items: center;}
.cal>form>div>ul>li>span{width: 25%; display: block;text-align-last: justify;}
.cal>form>div>ul>li>input{padding: 5px 4PX; font-size: 16px; width: 45%;margin-right: 4px;}
.cal>form>div>div{border-bottom: 3px solid #065693;}
.cal>form>div>div>h2{background-color: #065693; display: inline-block; color: #fff; padding: 2px 14px; font-size: 18px; border-radius: 6px 6px 0 0;}

.cal>form>div:nth-child(2){ text-align: center;}
.cal>form>div:nth-child(2)>input{background-color: #b1851d; border: none; font-size: 20px; padding: 4px 20px; color: #fff;}
.cal>form>div:nth-child(2)>input:nth-child(2){background-color: #848484;}
.cal>form>div:nth-child(3)>div{border-bottom: 3px solid #b1851d;}
.cal>form>div:nth-child(3)>div>h2{background-color: #b1851d;}

@media screen and (max-width: 768px) {
    .cal-main{width: 100%;}
    .cal>form>div>ul>li{width: 100%;}
    .cal{padding: 8px;}
    .cal>form>div>ul{padding: 10px;}
    .cal>form>div>ul>li>input{width: 45%;}
    .cal>form>div>div{text-align:center;}
}
input:disabled,textarea:disabled{ opacity: 1; -webkit-text-fill-color:#000; }
input:disabled, input[disabled]{ -webkit-opacity:1; opacity: 1; }