﻿body { font-family: "微軟正黑體"; margin: 0px; padding: 0px; width: 100%; background: #252525; }

.wrapper { width: 1000px; margin: 0 auto; position: relative; }
.wrapper .left, .wrapper .right { width: 500px; float: left; z-index: 102; }
.wrapper .left img, .wrapper .right img  { display: block; vertical-align: top; font-size: 0; overflow: hidden; }

.wrapper .logo { position: absolute; left: 40px; top: 125px; z-index: 107; width: 604px; height: 264px; }

.wrapper .youtube { position: absolute; left: 29px; top: 605px; z-index: 107; width: 477px; height: 268px; overflow: hidden; }
.wrapper .youtube iframe { width: 477px; height: 268px; border: 0; }

.wrapper .signup_form { position: absolute; left: 550px; top: 583px; z-index: 106; width: 400px; height: 246px; }
.wrapper .signup_form div input[type="text"],
.wrapper .signup_form div input[type="tel"],
.wrapper .signup_form div input[type="email"] {
    border: 1px solid #CCC;
    border-radius: 8px;
    font-size: 12pt;
    width: 270px;
    height: 23px;
    padding: 5px 5px;
    color: #2a2522;
    background-color: #FFF;
    box-shadow: 2px 2px 3px rgba(20%, 20%, 40%, 0.5);
}
.wrapper .signup_form div select {
    width: 282px; 
    height: 35px;
    border: 1px solid #CCC;
    border-radius: 8px;
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
    background: url(../../img/arr_down.png) no-repeat right;
    padding: 5px 15px 5px 5px;
    margin-bottom: 0.25em;
    vertical-align: middle;
    font-size: 12pt;
    color: #2a2522;
    background-color: #FFF;
    box-shadow: 2px 2px 3px rgba(20%, 20%, 40%, 0.5);
}
.signup_form div select::-ms-expand { display: none; }

/*.wrapper .signup_form div input[type="email"] { width: 655px; }*/

.wrapper .signup_form div { color: #622f0e; font-size: 12pt; height: 45px; float: left; margin-right: 10px; margin-bottom: 0px; }
.wrapper .signup_form div span { float: left; display: block; height: 45px; line-height: 38px; font-size: 14pt; margin-left: 8px; }
.wrapper .signup_form div input[type="text"], 
.wrapper .signup_form div input[type="tel"],
.wrapper .signup_form div input[type="email"],
.wrapper .signup_form div select { float: left; margin-left: 5px; margin-bottom: 0.25em; vertical-align: middle; }
.wrapper .signup_form div.send { position: absolute; top: 210px; left: 10px; height: 88px; width: 397px; overflow: hidden; }
.wrapper .signup_form div.send input[type=image] { outline: none; }

.footer-outer { background-color: #FFF; }

/* 行動版 */
@media only screen and (max-width: 1023px) {
    body { background: url(img/mobile.jpg) top center no-repeat #252525; }

    .top, .footer, .footer2 { display: none; }
    .wrapper .left, .wrapper .right { display: none; }

    .wrapper .logo { display: none; }

    .wrapper .youtube { left: 25px; top: 785px; width: 280px; height: 158px; }
    .wrapper .youtube iframe { width: 280px; height: 158px; border: 0; }

    .wrapper { width: 320px; height: 1670px; }
    .wrapper .signup_form { left: 5px; top: 510px; width: 320px; height: 280px; }
    .wrapper .signup_form div { margin-bottom: 3px; margin-left: 15px; margin-top: 0; height: 30px; }
    .wrapper .signup_form div span { height: 35px; line-height: 35px; font-size: 12pt; color: #622f0e; font-weight: bold; }

    .wrapper .signup_form div input[type="text"],
    .wrapper .signup_form div input[type="tel"],
    .wrapper .signup_form div input[type="email"] {  width: 176px; height: 15px; font-size: 10pt; }
    .wrapper .signup_form div select { width: 188px; height: 25px; font-size: 10pt; padding: 3px 15px 5px 5px; }

    .wrapper .signup_form div.send { top: 160px; left: 15px; height: 60px; width: 280px; margin-left: 0; margin-right: 0; }
    .wrapper .signup_form div.send input[type=image] { width: 100%; height: 100%; }

    .mobile-phone { position: absolute; left: 10px; top: 1585px; width: 300px; height: 72px; }

}

@media only screen and (min-width: 1024px) {
    .mobile-phone { display: none; }
}
