﻿#Contact {
}

    #Contact.Main {
        margin: 110px auto;
        width: 650px;
    }

        #Contact.Main h3 {
            margin: 0;
            padding: 5px 0;
            display: block;
            font-size: 32px;
            font-weight: 300;
            border-bottom: 1px solid #0C68AB;
        }

        #Contact.Main p {
            margin: 23px 0;
            font-size: 16px;
            font-weight: 300;
        }

        #Contact.Main > .Content > p:nth-of-type(2) {
            margin: 20px 0 50px 0;
            padding: 100px 0 100px 272px;
            font-size: 18px;
            line-height: 30px;
            letter-spacing: 1px;
            word-spacing: 15px;
            background-position: left center;
            background-size: 212px;
            background-repeat: no-repeat;
            background-image: url(/_Image/Contact-01.jpg);
        }

            #Contact.Main > .Content > p:nth-of-type(2) br {
                display: none;
            }

            #Contact.Main > .Content > p:nth-of-type(2) span {
                display: inline;
                font-size: 23px;
                font-weight: 400;
                word-spacing: normal;
            }

        #Contact.Main > .Content > p:nth-of-type(3) {
            font-size: 20px;
        }

        #Contact.Main span {
            margin: 20px 0 5px 0;
            display: block;
            font-size: 12px;
        }

        #Contact.Main input,
        #Contact.Main textarea {
            padding: 10px;
            border: 1px solid #EBEEEF;
            width: calc(100% - 22px);
            font-size: 12px;
            resize: none;
            border-radius: 0; /*i Phnoe*/
            -webkit-appearance: none; /*i Phnoe*/
        }

            #Contact.Main input:focus,
            #Contact.Main textarea:focus {
                border: 1px solid #50422D;
            }

        #Contact.Main .Checkbox {
            margin: 14px 0 20px 0;
            position: relative;
        }

            #Contact.Main .Checkbox input[type="checkbox"] {
                visibility: hidden;
            }

                #Contact.Main .Checkbox input[type="checkbox"] + label {
                    position: absolute;
                    top: 0;
                    left: 25px;
                    font-size: 12px;
                    font-weight: 300;
                    letter-spacing: 0.5px;
                    cursor: pointer;
                }

                    #Contact.Main .Checkbox input[type="checkbox"] + label span {
                        width: 16px;
                        height: 16px;
                        position: absolute;
                        top: -19px;
                        left: -25px;
                        border: 1px solid #EBEEEF;
                    }

                #Contact.Main .Checkbox input[type="checkbox"]:checked + label span {
                    background-image: url(/_Image/Contact-01.png);
                }

        #Contact.Main a {
            padding: 5px 15px;
            display: inline-block;
            font-size: 16px;
            font-weight: 200;
            color: #fff;
            letter-spacing: 3px;
            background-color: #0C68AB;
            border-radius: 50px;
            margin-top: 20px;
        }

            #Contact.Main a:hover {
                background-color: #1b79bc;
            }
/* 小於768 */
@media screen and (max-width:767px) {
    #Contact.Main {
        margin: 30px auto;
        padding: 30px;
        width: 100%;
    }

        #Contact.Main p:nth-of-type(2) {
            margin: 30px 0;
            padding: 242px 0 0 0;
            background-position: center top;
        }

            #Contact.Main p:nth-of-type(2) br {
                display: inline;
            }

        #Contact.Main a {
            display: block;
            text-align: center;
        }
}
