@import url(/css/2022_category_menu.css?0722);

#container-m {
    margin: 0 auto;
    font-size: 1em;
    max-width: 960px
}

.none {
    display: none
}

#query_banner {
    width: 100%;
    max-width: 960px;
    display: block
}

#query_banner img {
    width: 100%;
    height: auto
}

#customer_contact {
    width: 75%;
    display: block;
    margin: 0 auto
}

#customer_contact .wr {
    color: #a80000
}

#customer_contact .tab {
    width: 100%;
    display: inline-block
}

.form-control {
    padding: 5px 0 5px 10px;
    box-sizing: border-box
}

#customer_contact label {
    text-align: right;
    float: left;
    width: 18%;
    font-size: 1.3em;
    padding-right: .5em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    line-height: 35px
}

#customer_contact input {
    box-sizing: border-box;
    float: left;
    width: 50%
}

#description {
    width: 65%;
    padding: .5em
}

#customer_contact .clearall,
#customer_contact .submit-i {
    width: 100px
}

#customer_requirement .tab {
    width: 100%;
    display: inline-block
}

#customer_requirement label {
    width: 28%;
    text-align: right;
    display: inline-block
}

#customer_requirement input {
    width: 70%;
    box-sizing: border-box;
    display: inline-block
}

#description_txt {
    width: 100%;
    display: block;
    margin: 1em auto .5em
}

#description_txt span {
    float: left;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box
}

#description_txt span label,
#description_txt h3 {
    width: 100%;
    text-align: center;
    padding: .5em 0;
    display: block;
    background-color: #0091e8;
    color: #FFF;
    font-size: 1.1em
}

#description_txt span textarea {
    width: 100%;
    height: 8em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    resize: none;
    padding: .5em 1em;
    margin: 1em 0
}

.customer-tab .tab {
    margin: .5em auto
}

#description_txt .w100,
#img_upload {
    padding: 0 .5em
}

#description_txt .w20 input {
    margin: 0 auto;
    display: block;
    padding: 1.5em 0
}

#img_upload {
    box-sizing: border-box;
    -moz-box-sizing: border-box
}

#img_upload span {
    width: 100%;
    padding: 1em .125em;
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box
}

#img_upload span h3 {
    width: 100%;
    text-align: center;
    background-color: #0091e8;
    display: block;
    padding: .5em 0;
    color: #FFF;
    font-size: 1.1em
}

.img_upload_tool li {
    margin-bottom: .5em;
    display: block;
    padding: .25em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    text-align: center
}

#img_upload .img_upload_tool li input {
    width: 100%
}

#img_upload .upload,
#img_upload img,
#img_upload li p {
    margin-top: 5px
}

.btnall .clearall {
    line-height: 1.8em;
    font-size: 1.25em;
    padding: 0 5px 0 5px;
    color: #fff;
    border: #3f3f3f 1px solid;
    text-shadow: 0 0 0 #3f3f3f;
    font-family: "微軟正黑體", "Microsoft JhengHei", "宋体", "SimSun";
    background: #585858;
    background: -moz-linear-gradient(top, #686868 0%, #585858 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #686868), color-stop(100%, #585858));
    background: -webkit-linear-gradient(top, #686868 0%, #585858 100%);
    background: -o-linear-gradient(top, #686868 0%, #585858 100%);
    background: -ms-linear-gradient(top, #686868 0%, #585858 100%);
    background: linear-gradient(to bottom, #686868 0%, #585858 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#686868', endColorstr='#585858', GradientType=0);
    border-radius: 3px
}

.btnall .submit-i {
    line-height: 1.8em;
    font-size: 1.25em;
    padding: 0 5px 0 5px;
    color: #fff;
    border: #0088df 1px solid;
    text-shadow: 0 0 0 #0058b8;
    font-family: "微軟正黑體", "Microsoft JhengHei", "宋体", "SimSun";
    background: #00a8ff;
    background: -moz-linear-gradient(top, #00a8ff 0%, #006fd8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00a8ff), color-stop(100%, #006fd8));
    background: -webkit-linear-gradient(top, #00a8ff 0%, #006fd8 100%);
    background: -o-linear-gradient(top, #00a8ff 0%, #006fd8 100%);
    background: -ms-linear-gradient(top, #00a8ff 0%, #006fd8 100%);
    background: linear-gradient(to bottom, #00a8ff 0%, #006fd8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a8ff', endColorstr='#006fd8', GradientType=0);
    border-radius: 3px
}

#in-topw {
    float: left;
    clear: both;
    width: auto;
    height: auto;
    padding-left: 18px;
    margin-bottom: 5px;
    font-family: "微軟正黑體", "Microsoft JhengHei", "宋体", "SimSun";
    font-size: 1.05em;
    line-height: 1.5em;
    color: #686868;
    text-decoration: none;
    background: url(../images/tab-dot.png) left center no-repeat
}

#in-topw a {
    color: #68c0ff
}

#customer_requirement .btnall input {
    width: 150px
}

.a-upload {
    position: relative;
    height: 2em;
    width: 100px;
    font-size: 1.2em;
    text-align: center;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, .3);
    font-weight: bold;
    color: #FFFFFF;
    line-height: 2em;
    box-sizing: border-box;
    border-radius: 5px;
    display: block;
    float: left;
    background-color: #ff5db1;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ff5db1), to(#ef007c));
    background-image: -webkit-linear-gradient(top, #ff5db1, #ef007c);
    background-image: -moz-linear-gradient(top, #ff5db1, #ef007c);
    background-image: -ms-linear-gradient(top, #ff5db1, #ef007c);
    background-image: -o-linear-gradient(top, #ff5db1, #ef007c);
    background-image: linear-gradient(to bottom, #ff5db1, #ef007c);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ff5db1, endColorstr=#ef007c);
    box-shadow: 1px 1px 2px #999
}

.a-upload:hover {
    background-color: #ff2a98;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ff2a98), to(#bc0062));
    background-image: -webkit-linear-gradient(top, #ff2a98, #bc0062);
    background-image: -moz-linear-gradient(top, #ff2a98, #bc0062);
    background-image: -ms-linear-gradient(top, #ff2a98, #bc0062);
    background-image: -o-linear-gradient(top, #ff2a98, #bc0062);
    background-image: linear-gradient(to bottom, #ff2a98, #bc0062);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ff2a98, endColorstr=#bc0062)
}

#customer_contact .a-upload input {
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    margin: 0;
    width: 100px;
    height: 2em
}

#sex_script1,
#sex_script2 {
    margin-top: 10px
}

#sex_script1+label,
#sex_script2+label {
    text-align: center
}

#customer_contact .upload-data {
    width: 80%
}

#customer_contact .upload-data li {
    margin: .5em 0
}

#customer_contact .upload-data .row {
    text-align: left
}

#customer_contact .btnall input {
    float: none;
    display: inline-block;
    text-align: center
}

.footer-wrapper {
    margin-top: 0
}

.f_l.upload-data span+span {
    margin-top: 0
}

#menu_2022 {
    display: none
}

input[name="deadline"]+i{display: none;}

@media only screen and (max-width:960px) {
    #container-m {
        height: auto !important;
    }

    #customer_contact label {
        display: none
    }

    #customer_contact .tab,
    #customer_contact input {
        width: 100%
    }

    #customer_contact #your_name {
        width: 70%;
        float: left
    }

    #customer_contact #personal_sex {
        width: 30%;
        float: left
    }

    #sex_script1+label,
    #sex_script2+label {
        display: block;
        float: left;
        font-size: 1.2em;
        line-height: 35px
    }

    #sex_script1,
    #sex_script2 {
        margin-top: 6px
    }

    #customer_contact #personal_sex input {
        width: 2em;
        float: left;
        margin-top: 10px
    }

    #upload_tool_mobile li input {
        width: 100%
    }

    #upload_tool_mobile li {
        padding: 0 .5em;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        -webkit-box-sizing: border-box
    }

    #customer_requirement .btnall input {
        float: none
    }

    #customer_requirement .btnall {
        margin: 0
    }

    #description {
        width: 100%
    }

    #footer {
        margin-top: 0 !important;
    }
    #customer_contact .tab{position: relative;}
    input[name="deadline"]+i{display: block;position: absolute;top:calc(50% - 10px);right: 20px;font-size: 20px;color: #fa3a00;background: #fff;}
}

@media only screen and (max-width:960px) and (min-width:601px) {
    #customer_requirement .btnall input {
        float: right
    }
}

@media only screen and (max-width:600px) {
    #customer_contact #personal_sex {
        display: none
    }

    #customer_contact #your_name {
        width: 100%
    }

    #customer_contact .btnall {
        text-align: left;
        margin: 1em 0
    }
}