﻿.BgCover,
.BgCoverW {
    position: fixed;
    top: 0;
    left: 0;
    height: 160%;
    width: 100%;
    z-index: 1000;
    overflow: hidden;
    transition: 0.05s;
}

.BgCover {
    background: rgba(0, 0, 0, 0.7);
}

.ModalDialog-BgCoverW {
    background: transparent;
}

#ModalDialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    overflow-y: scroll;
    z-index: 1010;
    font: 1em / 1.2em Arial, "微軟正黑體", "繁黑體", "Microsoft JhengHei", "Microsoft YaHei", "Heiti TC", "LiHei Pro", sans-serif, "新細明體", PMingLiU;
}

#ModalDialog img[src=""] {
    display: none;
}

#ModalDialog a[href=""] {
    display: none;
}

#ModalDialog .ModalContImg {
    position: relative;
    width: 80%;
    max-width: 700px;
    margin: 2% auto;
    pointer-events: auto;
    text-align: center;
}

#ModalDialog .ModalCont {
    position: relative;
    width: 50%;
    margin: 2% auto;
    pointer-events: auto;
    animation: translateModalY 0.3s 1;
}

@media (max-width:1000px) {

    /*視窗最大寬度小於1000 px時,就設定為寬滿版*/
    #ModalDialog .ModalCont {
        position: relative;
        width: 100%;
        margin: 2% auto;
        pointer-events: auto;
        animation: translateModalY 0.3s 1;
    }

    #ModalDialog .g-recaptcha {
        transform: scale(0.77);
        -webkit-transform: scale(0.77);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
    }
}



#ModalDialog .Modal-bd,
#Popovers .Modal-bd,
#ModalDialog-pu .Modal-bd {
    animation: translateModalY 0.3s 1;
}

#ModalDialog .Modal-tt,
#Popovers .Modal-tt,
#ModalDialog-pu .Modal-tt {
    padding: 10px 0 10px 60px;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.35);
    background: #231815;
    /* color: white; */
    color: #4460ae;
    font-size: 1.2em;
}

#ModalDialog .Modal-tt {
    position: relative;
    padding: 15px 30px 10px 30px;
    box-shadow: 0px 6px 3px 0px rgba(0, 0, 0, 0.35);
    background: #231815;
    color: white;
    font-size: 1.2em;
    text-align: left;
}

#ModalDialog .Modal-ct,
#ModalDialog .Modal-cont {
    width: 100%;
    margin: 0 auto;
    padding: 10px 30px 30px;
    color: #575757;
    border: 2px solid #231815;
    background: white;
}

#ModalDialog .ModalBN {
    margin: 0 auto;
    padding: 10px 0 0;
    text-align: center;
}

#ModalDialog .ModalUrl {
    display: block;
    margin-top: 10px;
    text-decoration: underline;
}

#ModalDialog .btnLink {
    padding: 5px 20px;
}

#ModalDialog .forget {
    padding-bottom: 10px;
}

#ModalDialog .forget a {
    color: #ff5722;
}

#ModalDialog .ps {
    padding: 10px 0;
}

#ModalDialog .icon-cross {
    position: absolute;
    right: 15px;
    top: 12px;
    border: none;
    background: none;
    color: white;
    cursor: pointer;
    z-index: 9;
}

/* #ModalDialog .form-control {
    margin-bottom: 22px;
} */

#ModalDialog .form-control+.has-error {
    position: absolute;
    /* top: 43px; */
    margin-left: 5px;
    font-size: 10px;
    color: #ff5722;
}

#MsgAlert {
    position: fixed;
    top: 20%;
    left: 25%;
    width: 50%;
    margin: 0 auto;
    padding: 15px 15px 15px 15px;
    border-radius: 10px;
    box-shadow: 0 4px 10px 2px rgba(51, 51, 102, 0.1);
    font: 1em / 1.2em Arial, "微軟正黑體", "繁黑體", "Microsoft JhengHei", "Microsoft YaHei", "Heiti TC", "LiHei Pro", sans-serif, "新細明體", PMingLiU;
    text-align: center;
    background: #f2f2f2;
    z-index: 1010;
}

#MsgAlert .icon-cross {
    position: absolute;
    right: 5px;
    top: 5px;
    border: none;
    background: none;
    color: gray;
}

#Loading {
    position: fixed;
    top: calc(50% - 60px);
    left: calc(50% - 100px);
    z-index: 1010;
}

#ModalDialog.Login .btn-block,
#ModalDialog.Login .btnCode {
    font-size: 1.2em;
}

#ModalDialog.Login .btnLogin {
    background: #231815;
    color: white;
}

#ModalDialog.Login .btnLoginOutline {
    background: rgba(35, 24, 21, 0.05);
    color: #231815;
    border: solid 0.8px #231815;
}

#ModalDialog.Login .btnLoginOutline:hover {
    background: rgba(35, 24, 21, 0.3);
}


#ModalDialog.Login .btnCode {
    padding: 10px 40px 11px;
    background: #e7e3e2;
    color: #231815;
}

#ModalDialog.Login .tips {
    position: absolute;
    left: 0;
    top: 43px;
    font-size: 0.9em;
}

#ModalDialog.Login .btnFB {
    position: relative;
    margin-top: 30px;
    background: #4460ae;
    color: white;
}

#ModalDialog.Login .btnFB:before {
    position: absolute;
    top: -27px;
    left: calc(50% - 8px);
    content: "or";
    color: #b3b3b3;
}

#ModalDialog.Login .icon-fb {
    position: relative;
    top: 1px;
}

#ModalDialog.Login .icon-fb:before {
    color: white;
}

#ModalDialog.Login .link {
    position: absolute;
    top: 65px;
    right: 30px;
}

#ModalDialog.Login .Modal-ct,
#ModalDialog.Login .Modal-cont {
    padding-top: 50px;
}

#ModalDialog.Login .pos-tt {
    padding: 10px;
    text-align: right;
}

#ModalDialog.Login .pos-radio {
    padding: 10px;
    margin-bottom: 22px;
}

/* #ModalDialog.Login .form-group {
    margin-bottom: 5px;
    padding: 10px 0;
} */

#ModalDialog.Login .img {
    position: relative;
    width: 100%;
    text-align: center;
    float: left;
}

#ModalDialog.Login .help {
    margin-bottom: 22px;
    text-align: center;
    color: #ff5722;
}

#ModalDialog.Login .help:before {
    position: relative;
    top: 5px;
    content: "＊";
    font-size: 1.2em;
}

#ModalDialog .form-check-label a {
    color: #ff5722;
    text-decoration: none;
}

#loginArea .bgcASOdarkBrown {
    background-color: #231815;
}

#forgetpassword .bgcASOdarkBrown {
    background-color: #231815;
}

#loginArea .colorWhite,
#forgetpassword .colorWhite {
    color: #f2f2f2;
}

.bgWhite {
    background-color: white;
}