﻿@import "../../Template/BaseStyles/font-awesome.min.css";
.mktoFroms {
    font-family: Ubuntu, 'Arial', '微軟正黑體', sans-serif !important;
    padding: 70px 0;
}
.mktoFroms .mktoFormCol[style] {
    float: none !important;
    position: relative;
    min-height: auto;
    margin: 0 !important;
}
.mktoFroms .mktoForm div, .mktoFroms .mktoForm span, .mktoFroms .mktoForm label, .mktoFroms .mktoForm p {
    line-height: 1.5;
}
.mktoFroms .mktoForm span[style] {
color: #666!important;
font-weight: 500;
}
.mktoFroms input[type=text], .mktoFroms input[type=url], .mktoFroms input[type=email], .mktoFroms input[type=tel], .mktoFroms input[type=number], .mktoFroms input[type=date], .mktoFroms select.mktoField, .mktoFroms textarea.mktoField {
    outline: none;
    display: block;
    font-weight: 300;
    font-size: 13px;
    padding: 5px 10px;
    line-height: 1.5;
    color: #212529;
    background-color: rgba(0, 0, 0, .02);
    background-clip: padding-box;
    border: 1px solid #ccc !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    box-shadow: none;
    min-height: 1.9em;
    width: inherit !important;
}
.mktoFroms input:-webkit-autofill, .mktoFroms input:-webkit-autofill:hover, .mktoFroms input:-webkit-autofill:focus, .mktoFroms input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}
.mktoForm input[type=checkbox] + label:before, .mktoForm input[type=radio] + label:before {
    width: 1.3em !important;
    height: 1.3em !important;
    box-shadow: none;
    border: 1px solid #aeb0b6;
    background-color: rgba(0, 0, 0, .02);
}
.mktoForm input[type=checkbox]:checked + label:before {
    content: "";
    background: #bbbebe;
    border-color: #bbbebe;
}
.mktoForm input:checked + label:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    background: white;
    width: 2px;
    height: 2px;
    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
    transform: rotate(45deg);
}
.mktoFroms *, forms-main *::before, .mktoFroms *::after {
    box-sizing: border-box;
}
.mktoFroms h2 {
    text-align: center;
    padding: 0 0 15px;
    border-bottom: 1px solid #dedede;
    margin: 0 0 15px;
	font-weight: bold;
}
.mktoFroms_content {
    margin: 0 auto;
    width: 88%;
    max-width: 480px;
}
.forms-card {
    display: block;
    background: #fff;
    overflow: hidden;
    padding: 30px;
    background-color: #fff;
    border: 1px solid #f1f1f1;
    box-shadow: 2px 2px 5px #dedede;
}
.mktoForm .mktoRequiredField .mktoAsterix {
    display: inline-block;
    float: none;
    padding: 0;
    position: absolute;
    top: 2px;
    left: 0;
    vertical-align: middle
}
.mktForms .mktoRequiredField label.mktoLabel {
    font-size: 16px;
}
.mktoFroms .mktoFormRow .mktoCheckboxList > label {
    position: relative;
}
.mktoFroms form[style] {
    font-family: Ubuntu, 'Arial', '微軟正黑體', sans-serif !important;
    font-size: 16px !important;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
    width: inherit !important;
    margin: 0 auto;
}
.mktoFroms .mktoHtmlText[style] {
    width: inherit !important;
}
.mktoFroms .mktoForm .mktoFormRow .mktoRequiredField label.mktoLabel[style] {
    width: 100% !important;
    font-size: 16px;
    font-weight: 400;
    float: none;
    margin: 0 0 3px;
    position: relative;
    padding: 0 0 0 12px;
}
.mktoFroms .mktoFormRow {
    position: relative;
    width: 100%;
    padding: 0 15px;
    margin: 6px 0;
}
.mktoFroms .mktoForm .mktoRadioList[style], .mktoFroms .mktoForm .mktoCheckboxList[style] {
    padding: 0 !important;
    float: none;
    width: inherit !important;
    border: 0;
}
.mktoFroms .mktoForm .mktoFormRow .mktoFieldWrap {
    float: none;
    width: 100% !important;
}
.mktoFroms .mktoOffset, .mktoFroms .mktoGutter.mktoHasWidth, .mktoClear {
    float: none;
    display: none;
}
/***** 送出按鈕  *************************************************/
.mktoFroms .mktoButtonRow {
    position: relative;
    border-top: 1px solid #dedede;
    width: 100% !important;
    text-align: center;
    padding: 15px 0 0;
}
.mktoFroms .mktoForm .mktoButtonRow span[style] {
    display: inline-block;
    width: auto;
    margin: 0 !important;
}
.mktoFroms .mktoButtonRow .mktoButton {
    font-size: 20px !important;
    font-weight: 400 !important;
    color: #fff !important;
    background-color: #d0343a !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    padding: 12px 0 14px 0 !important;
    text-shadow: none !important;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    width: 150px;
}
.mktoFroms .mktoButtonRow .mktoButton:hover {
    background-color: #ee432e !important;
}
.mktoForm .mktoError .mktoErrorMsg {
    background-color: #d0343a;
    background-image: -webkit-linear-gradient(#d0343a 43%, #d0343a 100%);
    background-image: -moz-linear-gradient(#d0343a 43%, #d0343a 100%);
    background-image: linear-gradient(#d0343a 43%, #d0343a 100%);
    background-image: -ms-linear-gradient(#d0343a 43%, #d0343a 100%);
    border: 1px solid #9f1300;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: rgb(0 0 0 / 50%) 0 2px 5px, inset #ff3c3c 0 1px 0px;
    box-shadow: rgb(0 0 0 / 50%) 0 2px 5px, inset #ff3c3c 0 1px 0px;
}
@media (min-width: 980px) {
    .mktoFroms_content {
        max-width: 1024px;
    }
    .mktoFroms .mktoForm .mktoFormRow .mktoFieldWrap {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
    }
    .mktoFroms .mktoForm .mktoFormRow .mktoRequiredField label.mktoLabel[style] {
        width: 230px !important;
    }
    .mktoFroms .mktoFormRow {
        width: 50%;
    }
.mktoFroms form[style] {
    margin: 0 -15px;
}
}