@charset "utf-8";

/**************************************

                通用格式

**************************************/

html {
    font-size: 62.5%;
}

body {
    padding: 0;
    margin: 0;
    border: 0;
    font-family: 'Bodoni_Regular', "微軟正黑體", "新細明體", "標楷體" , Arial;
    background-color: #514021;
}

a {
    text-decoration: none;
    color: #434343;
}

a:hover {}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.clear:after {
	content:"";
    clear: both;
    display: block;
}


/**************************************

                網站版型

**************************************/
.BkeyinList{}
.BkeyinList li {
    margin: 0 0 20px 0;
    position: relative;
}

.BkeyinList li .head {
    width: 120px;
    text-align: right;
    display: inline-block;
    margin: 0 10px 0 0;
    position: relative;
    font-size: 18px;
}

.BkeyinList li .head.icon:after {
    content: "*";
    position: absolute;
    top: 0px;
    right: -10px;
    color: #e60012;
    font-size: 13px;
}

.BkeyinList li .note {
    font-size: 14px;
}

.BkeyinList li input.keyin {
    height: 28px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #ccc;
    width: 100%;
    padding: 0 0 0 10px;
    box-sizing: border-box;
}

.BkeyinList li input.checkbox {
    margin: 3px 3px 3px 4px;
}

.BkeyinList li .text {
    margin: 0 20px 12px 0;
    font-style: inherit;
    display: inline-block;
    vertical-align: top;
}

.BkeyinList li input.account {
    width: 236px;
}

.BkeyinList li input.address {
    width: 235px;
}

.BkeyinList li input.mail {
    width: 400px;
}

.BkeyinList li input.num {
    width: 80px;
}

.BkeyinList li select {
    padding: 3px 0;
    height: 33px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #ccc;
    width: 80px;
    vertical-align: top;
}

.BkeyinList li .box {
    display: inline-block;
    vertical-align: top;
    width: 580px;
}

.BkeyinList li .info {
    font-size: 15px;
    margin: 14px 0 0 0;
    display: block;
    color: #777;
}

.BkeyinList li.btnBg {
    text-align: center;
}

.BkeyinList li .btnSend {
    font-size: 21px;
    padding: 7px 5px 9px 5px;
    width: 241px;
    transition: 0.3s;
    box-shadow: 0 0 0 0 #ccc inset;
    border: none;
    background-color: #ccc;
    color: #fff;
}

.BkeyinList li .btnSend:hover {
    transition: 0.8s;
    box-shadow: 0 -220px 0 0 #32b16c inset;
    color: #fff;
}

.BkeyinList li .btnCancel {
    font-size: 21px;
    padding: 7px 5px 9px 5px;
    width: 241px;
    border: none;
    margin: 0 0 0 30px;
    transition: 0.3s;
    box-shadow: 0 0 0 0 #ccc inset;
    background-color: #ccc;
    color: #fff;
}

.BkeyinList li .btnCancel:hover {
    transition: 0.8s;
    box-shadow: 0 -220px 0 0 #32b16c inset;
    color: #fff;
}
.wrapperBodyBg{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
.wrapperBody{
    background-color: #201b15;
    background: url(../images/formBg.jpg) 0 0 repeat;
    position: relative;
}
.wrapperBody > img{
    width: 100%;
}
.footer{}
.footer img{
    width: 100%;
}

/* 回到top-start */
#page-top {
    position: fixed;
    bottom:80px;
    right: -90px;
    z-index:999;
    }
#page-top a {
    display:block;
    width:145px; 
    border-radius: 100px;
    text-align: center;
    transition: 0.3s;
    }
#page-top a:hover {
    
}
#page-top a img{
    width: 100%;
}

#page-join {
    position: fixed;
    bottom:230px;
    right: -90px;
    z-index:999;
    }
#page-join a {
    display:block;
    width:145px; 
    border-radius: 100px;
    text-align: center;
    transition: 0.3s;
    }
#page-join a:hover {
    
}
#page-join a img{
    width: 100%;
}
/* 回到top-end */
/**************************************

                首頁內容

**************************************/
.wrapperBodyBtn{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 600px;
}
/**************************************

                表單內容

**************************************/
.formBody{
    padding: 50px 30px;
}
.formHeadBg{
    text-align: center;
}
.formHeadBg img{
    width: 100%;
    max-width:457px;
}
.formList{
    color: #c8aa74;
}
.formList li .head{
    font-size: 24px;
    font-weight: 900;
    display: block;
    text-align: left;
    width: 100%;    
}
.formList li select{
    background-color: #fff;
    border: 1px solid #000;
    width: 100%;
    padding: 3px 0 3px 10px;
    height: 50px;
    font-size: 18px;    
}
.formList li .text{
    width: 100%;
}
.formList li input.keyin{
    height: 50px;
    font-size: 18px;
}
.formList li .note{
    color: #f71919;
}
.formList li .formHeadTwo{
    background-color: #c8aa74;
    color: #211c18;
    text-align: center;
    padding: 8px 0;
    box-sizing: border-box;    
}
.formList .formInfo{
    font-size: 20px;
    color: #fff;
}
.formList textarea{
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #ccc;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    font-size: 18px;
    height: 200px;
}
.formBtn{
    border: 5px solid #fff;
    border-radius: 10px;
    color: #45210e;
    box-shadow: 0 0 0 2px rgba(219, 183, 120 ,1);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffb5+1,fff168+100 */
    background: #ffffb5; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffb5 1%, #fff168 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffb5 1%,#fff168 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffb5 1%,#fff168 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffb5', endColorstr='#fff168',GradientType=0 ); /* IE6-9 */
    width: 100%;
    height: 50px;
    font-size: 20px;
    font-weight: 900;
    font-family: "微軟正黑體";
    cursor: pointer;
    margin: 0 0 30px 0;   
}
.formBtn:hover{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffd1+1,fff491+100 */
    background: #ffffd1; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffd1 1%, #fff491 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffd1 1%,#fff491 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffd1 1%,#fff491 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffd1', endColorstr='#fff491',GradientType=0 ); /* IE6-9 */
}
.formBtnC{
    margin: 30px 0 30px 0; 
}
.formClose{
    display: none;
}
.formBox{
    background-color: #fff;
    padding: 27px 25px;
    box-sizing: border-box;
    margin: 0 0 10px 0;
    border-radius: 18px;
    text-align: center;
    border: 1px solid #000;
    box-shadow: 0 0 20px 0px rgba(0,0,0,0.5) inset;
}
.formBox .text{
    font-size: 22px;
    font-weight: 900;
    color: #000;
}
.formBox .cashTitle{
    font-size: 16px;
    font-weight: 900;
    color: #000;
    margin: 10px 0 0 0;
    border-top: 1px solid #ccc;
    padding: 10px 0 0 0;
    box-sizing: border-box;
}
.formBox .num{
    font-size: 25px;
    font-weight: 900;
    color: #1d82dc;
}
.formBox .note{
    font-size: 19px;
    font-weight: 900;
    color: #e21a1a;
    width: 54%;
    margin: 0 auto;
}
.formBox .search{
    border-top: 1px solid #ccc;
    padding: 10px 0;
    box-sizing: border-box;
    margin: 9px 0 0 0;
    font-size: 16px;
}
.searchBtn{
    color: #1d82dc;
}
.formBox .cash{
    font-size: 25px;
    font-weight: 900;
    color: #f00;
}


/*  lightBox  */
.lightBoxLoginBg{
    width: 500px;
    height: 430px;
    padding: 30px 40px;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 15px;
    position: relative;
    text-align: center;
    }
.lightBoxLoginBg.lightBoxLoginBgAuto{
    height: auto;
}
.lightBoxLoginBg .logo{
    width: 148px;
    text-align: center;
    margin: 0 auto;
    }
.lightBoxLoginBg .logo img{
    width: 100%;
    max-width: 180px;
    }
.lightBoxLoginBg .lightBoxInputBg{
    position: relative;
    margin: 15px 0 0 0;
    }
.lightBoxLoginBg .lightBoxInputLast{
    margin: 15px 0 25px 0;      
    }
.lightBoxLoginBg .lightBoxInputLastConnect{
    margin: 15px 0 15px 0;      
    }
.lightBoxLoginBg .lightBoxInputBg:before{
    content: "";
    position: absolute;
    top: 1px;
    left: 10px;
    width: 28px;
    height: 38px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 28px auto;
    }
.lightBoxLoginBg .lightBoxInput{
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 10px 0 7px 50px;
    box-sizing: border-box;
    font-size: 22px;
    display: block;
    width: 100%;
    }
.lightBoxLoginBg .loginAccountBg{
    }
.lightBoxLoginBg .loginAccountBg:before{
    background-image: url(../images/loginAccount.png);
    }
.lightBoxLoginBg .loginPasswordBg{

    }
.lightBoxLoginBg .loginPasswordBg:before{
    background-image: url(../images/loginPassword.png);
    }

.lightBoxLoginBg .loginConfirmBg{   
    }
.lightBoxLoginBg .loginConfirmBg:before{
    background-image: url(../images/loginConfirm.png);
    }
.lightBoxLoginBg .loginMailBg{  
    }
.lightBoxLoginBg .loginMailBg:before{
    background-image: url(../images/loginMail.png);
    }
.lightBoxLoginBg .loginNumberBg{    
    }
.lightBoxLoginBg .loginNumberBg:before{
    background-image: url(../images/loginNumber.png);
    }
.lightBoxLoginBg .loginForget{
    position: absolute;
    top: 174px;
    right: 54px;
    }
.lightBoxLoginBg .loginOtherHead{
    text-align: center;
    font-size: 16px;
    margin: 25px 0 8px 0;
    color: #7b7b7b;
    font-weight: 900;
    background: url(../images/line.png) center center repeat-x;
    }
.lightBoxLoginBg .loginOtherHead span{
    background-color: #fff;
    padding: 0 13px;
    box-sizing: border-box;
    }

.lightBoxLoginBg .lightBoxBtn{
    padding: 15px 52px;
    box-sizing: border-box;
    font-size: 22px;
    border-radius: 10px;
    font-weight: 900;
    -webkit-appearance: none;
    border: none;
    cursor: pointer;
    }
.lightBoxLoginBg .loginLogin{
    float: right;
    background-color: #4163B0;
    color: #fff;
    }
.lightBoxLoginBg .loginRegister{
    float: left;
    background-color: #d23d3d;
    color: #fff;
    }
.lightBoxLoginBg .loginComplete{
    background-color: #d23d3d;
    color: #fff;
    width: 222px;
    margin: 0 auto;
    display: block;
    }
.lightBoxLoginBg .loginForgetComplete{
    margin: 135px auto 0 auto;
    }
.lightBoxLoginBg .loginChangeComplete{
    margin: 76px auto 0 auto;   
    }
.lightBoxLoginBg .loginPlay{
    float: right;
    font-size: 19px;
    color: #4163B0;
    border: 2px solid #4163B0;
    padding: 11px 25px;
    }
.lightBoxLoginBg .loginBack{
    width: 52px;
    height: 46px;
    background-image: url(../images/loginBack.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    position: absolute;
    top: 30px;
    left: 48px;
    font-size: 0;
    background-size: 52px auto;
    }
.lightBoxLoginBg .loginNumber{
    background-color: #4163b0;
    color: #fff;
    position: absolute;
    top: 150px;
    right: 46px;
    padding: 8px 16px;
    font-size: 18px;
    border-radius: 6px;
    }
.lightBoxLoginBg .loginInfo{
    float: inherit;
    background-color: #4163B0;
    color: #fff;
    margin: 0 9px;
    font-size: 20px;
    padding: 10px 28px;   
}
.lightBoxLoginBg .lightBoxGroup{}

.lightBoxLoginBg .loginOtherList{
    margin: 0;
    padding: 0;
    float: left;
    }
.lightBoxLoginBg .loginOtherList li{
    padding: 0;
    margin: 0 5px 0 0;
    display: inline-block;
    }
.lightBoxLoginBg .loginOtherList li .lightBoxIcon{
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    }
.lightBoxLoginBg .loginOtherList li .lightBoxIcon{
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    }

.lightBoxLoginBg .loginOtherList li .lightBoxIcon img{
    width: 100%;
    max-width: 81px;
    }

.lightBoxLoginBg .loginOtherConnectList{
    width: 100%;
    text-align: center;
    }

.lightBoxLoginBg .loginRule{
    text-align: center;
    margin: 0 0 10px 0;
    }
.lightBoxLoginBg .loginRule input{}
.lightBoxLoginBg .loginRule span{}
.lightBoxLoginBg .loginRule a{
    color: #10bebf;
    text-decoration: underline;
    }
.lightBoxLoginBg .lightBoxTextBg{
    font-size: 20px;
    font-weight: bold;
    color: #000;
    margin: 20px 0;
}