@charset "utf-8";

/* 1. Reset 基礎重置 */
body, div, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 2. Layout 布局相關 */
.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.col-md-3, .col-md-6, .col-md-7, .col-md-12,
.col-sm-3, .col-sm-7 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 10px;
}

/* 3. 基礎元件樣式 */
.contact-conent {
    width: auto;
    text-align: left;
    margin-bottom: 20px;
}

.contact-conent h2 { 
    font-size: 18px; 
    font-weight: normal; 
    line-height: 1.4;
}


.contact-conent p { 
    margin-top: 4px;
    margin-bottom: 4px;
}

.contact-conent p.require:after,
.contact-conent span.require:after { 
    position: relative; 
    display: inline-block; 
    content: "※"; 
    bottom: -2px; 
    color: #f00; 
    font-weight: bold; 
    margin-left: 3px;
}

/* 4. 表單元素基礎樣式 */
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;    
    margin-top: 4px;
}

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

textarea.form-control {
    height: auto;
}

/* 5. 輸入框樣式 */
input[type=text], input[type=password], input[type=url], 
input[type=email], input[type=tel], select, textarea {
    width: 100%;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}


.contact-conent input[type=url],
.contact-conent input[type=email],
.contact-conent input[type=password],
.contact-conent input[type=text],
.contact-conent input[type=tel],
.contact-conent textarea[class=form-control],
.contact-conent select[class=form-control],
.contact-conent select,
.contact-conent textarea {
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
    margin: 4px 0;
}

/* 6. 按鈕樣式 */
input[type=button] {
    width: 90%;
    padding: 8px; 
    font-size: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

input[type=submit], input[type=reset] {
    background-color: #4CAF50;
    color: white;
    margin-top: 10px;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit] {
    float: right-10px;
}

input[type=reset] {
    float: left-10px;
}

input[type=submit]:hover,
input[type=reset]:hover {
    background-color: #45a049;
}

/* 7. Radio按鈕樣式 */
input[type="radio"] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
}

.gender-options input[type="radio"] {
    display: none;
}

.gender-options label {
    display: inline-block;
    padding: 0.1rem 0.8rem;
    margin-right: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
}

.gender-options input[type="radio"]:checked + label {
    background-color: #007bff;
    color: #fff;
}

/* 8. 下拉選單樣式 */
.select {
    display: inline-block;
    width: 300px;
    position: relative;
    vertical-align: middle;
    padding: 0;
    overflow: hidden;
    background-color: #fff;
    color: #555;
    border: 1px solid #aaa;
    border-radius: 4px;  
    transition: box-shadow 0.25s ease;
    z-index: 2;
}

.select:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.select:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #ccc;
    top: 14px;
    right: 10px;
    cursor: pointer;
    z-index: -2;
}

.select select {
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.select select:focus {
    outline: none;
}

/* 9. Responsive 響應式設計 */
@media (min-width: 992px) {
    .col-md-3 { float: left; width: 25%; }
    .col-md-6 { float: left; width: 50%; }
    .col-md-7 { float: left; width: 58.33333333%; }
    .col-md-12 { float: left; width: 100%; }
}

@media (min-width: 768px) {
    .col-sm-3 { float: left; width: 25%; }
    .col-sm-7 { float: left; width: 58.33333333%; }
    
    .col-md-3 p,
    .col-md-12 p {
        padding-left: 2px !important;
    }
    
    .col-sm-3 {
        padding-left: 20px !important;
    }
}

@media screen and (max-width: 768px) {
    .contact-conent {
        margin-left: 0px;
        margin-right: 0px;
    }

    .form-control {
        width: 92% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 15px;
    }

    .col-md-3 p,
    .col-md-12 p {
        margin-bottom: 15px;
        padding-left: 6px !important;
    }

    .button {
        display: block;
        margin: 0 auto;
    }

    table {
        max-width: 92%;
        overflow-x: auto;
    }
}

/* contact-conent 響應式設計 */
@media only screen and (min-width: 1600px) {
    .contact-conent {
        padding-left: 80px;
        padding-right: 70px;
        font-size: 24px;
    }
}

@media only screen and (min-width: 1280px) and (max-width: 1599px) {
    .contact-conent {
        padding-left: 80px;
        padding-right: 70px;
        font-size: 23px;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1279px) {
    .contact-conent {
        padding-left: 40px;
        padding-right: 50px;
        font-size: 20px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .contact-conent {
        padding-left: 35px;
        padding-right: 45px;
        font-size: 18px;
    }
}

@media only screen and (min-width: 544px) and (max-width: 767px) {
    .contact-conent {
        padding-left: 30px;
        padding-right: 40px;
        font-size: 18px;
    }
}

@media only screen and (max-width: 543px) {
    .contact-conent {
        padding-left: 20px;
        padding-right: 30px;
        font-size: 22px;
    }
}


 /* ▼▼▼有其他干擾 - 暫保留 */

.container-fluid:before,.container-fluid:after,.row:before,.row:after,.btn-group-vertical>

.modal-footer:after{display:table;content:" "}

.clearfix:after,.container-fluid:after,.row:after{clear:both}

 /* ▲▲▲有其他干擾 - 暫保留 */


.contact-conent-ask .button  { display: block; margin: 0; padding: 0 20px; width: 100%; background-color: #3f3f3f; font-size: 18px; line-height: 35px; color: #fff; font-weight: 700; border: 0; border-radius: 3px; transition: all linear 0.2s; }
.contact-conent-ask .pull-left { float: none !important; }
.contact-conent-ask .button: hover , 
.contact-conent-ask .button: focus { background-color: #ffbf00; color: #3f3f3f; box-shadow: inset 0 1px 2px rgba(0 ,  0 ,  0 ,  0.1) ,  0 0 8px rgba(255 ,  190 ,  0 ,  0.6); }