/**********************************************/
/* INDEX.CSS 為 INDEX.html <main> 內用 CSS */
/**********************************************/

/* ________________________________________________________________________________ */
/* XS 超小屏幕（手机，大於 0px） 及共用 ___________________________________________ */
/* ________________________________________________________________________________ */
@media (min-width: 0px) {
    .wrap {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        font-family: 'VW Headline Book', 'VW Headline',"文鼎黑體",'文鼎新中黑',"微軟正黑體","Microsoft JhengHei","Apple LiGothic Medium", "Helvetica",  "Arial","sans-serif";
        background:#7f7f7f url(../image/wrap_bg.png) repeat-x top ;
    }
    .logo {
        width:50%;
        margin: 25%;
    }

    header {
        position: fixed;
        height: 100%;
        width: 10%;
        background:#FFF url(../image/head_bg_v.png) repeat-y right;
        z-index:100;
    }
        header .tools {  
            position:absolute;       
            width:50%;
            height:25%;
            left:25%; 
            bottom:-10%; 
        }
        header .official {
            display:block;
            width:100%;
            height:25%;
            background: url(../image/head_official.png) no-repeat center center;
        }
            header .official:hover {
                background: url(../image/head_official_ov.png) no-repeat center center;
            }
        header .fans {
            display:block;
            width:100%;
            height:25%;
            background: url(../image/head_fans.png) no-repeat center center;
        }
            header .fans:hover {
                background: url(../image/head_fans_ov.png) no-repeat center center;
            }

    main {
        position:relative;
        margin-top: 0px;
        margin-left:10%;
        padding-top:8%;
        background:url(../image/main_bg.png) repeat-y left;
    }

    footer {
        position: relative;
        display:block;
        height: 200px;
        width: 90%;
        color: #7D7D7D;
        font-size: 12px;
        padding:5%;
        margin-left:10%;
        background:url(../image/main_bg.png) repeat-y left;
    }
        footer a {
            color: #7D7D7D;
        }
        footer .left {
            padding-top:5px;
            width: 100%;
            text-align: left;
        }
        footer .right {
            margin-top:16px;
            margin-bottom:5px;
            width: 100%;
            text-align: left;
        }


    .kv.visible-xs {
        padding-left: 0;
        margin:50px 0 0 0;
        height:50%;
    }

        .kv.visible-xs .title {
            margin-left:15px;
            width:50%;
        }
    .kv .cars {
        display:block;
        width:100%;
        height:100%;
        background:url(../image/cars/The_midsize_sedan.png) no-repeat center center;
        background-size:contain;
     }

    .form {       
        font-size:13px;
        margin:0;
        color:#2f2f2f;
        z-index:50;
    }
    .form-group {
        margin-bottom:8px;
    }
    label {
        font-weight:normal;
    }
    .form-horizontal .control-label {
        color:#666;
        font-weight:bold;
        padding-top:3px;
        padding-right:0;
        text-align:left;
        letter-spacing:0px;
    }
    .form-horizontal .radio-inline {
        padding-top:3px;
    }
    .form-control {
        height: 20px;
        padding: 0px 6px;
        font-size: 13px;
        color: #2f2f2f;
        background:rgba(255,255,255,0);
        border:1px solid #a0a0a0;
        border-radius: 0px;
        box-shadow:none;
    }
        .form .form_title {
            width:100%;
            padding:0 0 15px 5px;
        }
    .form .code_reset {
        position:absolute;
        width:30px;
        height:30px;
        background:url(../image/code_reset.png) center center no-repeat;
        background-size:cover;
    }

    .code img {
        height:30px;
        width:80%;
    }
    .mcode {
        height:30px;
    }
    .address {
        text-align:left;
    }
    .btn-submit:active,
    .btn-submit {
        min-width:100px;
        height:37px;
        border-radius:5px;
        background: url(../image/btn.png) center center no-repeat;
    }
    .form-group.submit {
        margin-top:0px;
    }

    .form-group.submit label {
        margin-bottom:10%;
    }

    .bg-white {
        background:#FFF;
    }
    .tc-sky {
        color:#2274ac;
    }
    .tc-dark {
        color:#666;
    }


    /*POPUP*/
    .modal-dialog {
        margin:80px auto;
    }
    .modal-header,
    .modal-footer,
    .modal-body {
        border:none;
    }
    .modal-content {
        border-radius:0;
        border:6px solid rgba(52,52,52,0.3);
    }

    button.close {
        position:absolute;
        top:-25px;
        right:-5px;
        width:20px;
        height:18px;
        opacity:0.8;
        background:url(../image/btn_close.png) center center no-repeat;
    }
}

/* ________________________________________________________________________________ */
/* SM 小屏幕（平板，大於等於 768px） ______________________________________________ */
/* ________________________________________________________________________________ */
@media (min-width: 768px) {
    .wrap {
        position: absolute;
        width: 100%;
        min-height: 600px;
        overflow: hidden;
    }
    .logo {
        margin: 18px;
    }

    header {
        position: fixed;
        height: 100%;
        width: 72px;
        background:#FFF url(../image/head_bg_v.png) repeat-y right;
    }
        header .tools {
            position:absolute;            
            height:72px;
            width:18px;
            bottom:18px;
            left:27px;
        }
        header .official {
            display:block;
            margin:18px auto;
            width:18px;
            height:18px;
            background:#FFF url(../image/head_official.png) no-repeat center center;
        }
            header .official:hover {
                background:#FFF url(../image/head_official_ov.png) no-repeat center center;
            }
        header .fans {
            display:block;
            margin:18px auto;
            width:18px;
            height:18px;
            background:#FFF url(../image/head_fans.png) no-repeat center center;
        }
            header .fans:hover {
                background:#FFF url(../image/head_fans_ov.png) no-repeat center center;
            }

    main {
        position:relative;
        margin-top:0;
        margin-left:0;
        padding-top:0;
        background:url(../image/main_bg.png) repeat-y 72px;
    }
    footer {
        position: absolute;
        height: 92px;
        bottom: 0;
        width: 100%;
        color: #7D7D7D;
        padding: 8px 16px 8px 90px;
        margin-left:0;
    }



        footer a {
            color: #7D7D7D;
        }
        footer .left {
            width: 100%;
            text-align: right;
            margin:0;
        }
        footer .right {
            width: 100%;
            text-align: right;
            margin:0;
        }

    .kv {
        position: relative;
        float: left;
        left:72px;
        width: 55%;        
        text-align:center;
    }
        .kv .title {
            position:relative;
            padding:0 58px;
            height:32px;
        }

        .kv .cars {
            position:relative;
            margin-top:30px;
            width:100%;
            height:90%;
            background:url(../image/cars/BeetleDune.png) no-repeat center center;
            background-size:contain;
        }

    .form {
        position: relative;
        float: right;
        width: 40%;
        padding-right: 10px;
    }
    .form-control {
        height: 24px;
        padding: 0px 6px;
        font-size: 13px;
        color: #2f2f2f;
        background:rgba(255,255,255,0);
        border:1px solid #A0A0A0;
        border-radius: 0px;
        box-shadow:none;
    }

    option {
        background:rgba(255,255,255,0.9);
    }
    .form-horizontal .control-label {
        color:#666;
        font-weight:bold;
        padding-top:3px;
        padding-right:0;
        text-align:left;
        letter-spacing:2px;
    }
        .form .form_title {
            width:100%;
            padding:0 0 15px 5px;
        } 

    .form-group.submit {
        margin-top:30px;
    }

    .control-label.address,
    .control-label.code {
        text-align:left;
    }
    .ruleCheck {
        text-align:left;
    }

    .mcode {
        height:30px;
    }
    #POLICY .modal-content {
        padding:5px;
    }
    #POLICY .modal-body {
        height:500px;
        overflow-y:scroll;
    }
}

/* ________________________________________________________________________________ */
/* MD 中等屏幕（桌面显示器，大於等於 992px） ______________________________________ */
/* ________________________________________________________________________________ */
@media (min-width: 992px) {
    /*.control-label.address,
    .control-label.code {
        text-align:right;
    }*/

    .form {
        position: relative;
        float: right;
        width: 45%;
        padding-right: 50px;
    }

    .form-horizontal {
        width:400px;
    }

}

/* ________________________________________________________________________________ */
/* LG 大屏幕（大桌面显示器，大於等於 1200px） _____________________________________ */
/* ________________________________________________________________________________ */
@media (min-width: 1200px) {
    footer {
        height: 77px;
    }

    footer .left {
        float: left;
        width: 60%;
        text-align: left;
    }

    footer .right {
        float: left;
        width: 40%;
        text-align: right;
        padding-top:37px;
    }

    .form {
        position: relative;
        float: right;
        width: 40%;
        padding-right: 36px;
    }


}