/*author:starttemplate*/
/*reference site : starttemplate.com*/

body {
    background: #000000 url("/image/loginbg/1.jpg") center center fixed no-repeat;
    background-position: center;
    background-size: cover;

    -webkit-font-smoothing: antialiased;
    font: normal 14px Roboto, arial, sans-serif;
    font-family: '微軟正黑體,Dancing Script', cursive !important;
}

/*bootstrap專用*/

.form-control{ 
    background: transparent !important;
    font-size:18px;
    color: #FFAF60 !important;
}
.form-control:hover{
    color: #FFFFFF;
}
.form-group {    margin-bottom: 0.4rem;}

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #ffffff !important;
    opacity: 1;
    /* Firefox */
    font-size: 18px !important;
}
/*bootstrap專用END*/


body,
html {  height: 100%;}
a{  color: #3FF;    text-decoration: none;  border: 0;}
a:hover, a:active, a:focus{ color: #FF0;    outline: 0;}

.clear-txtline:hover, .clear-txtline:active, .clear-txtline:focus { text-decoration: none;}
.clear-txtline a:hover, .clear-txtline a:active, .clear-txtline a:focus {   text-decoration: none;}


.loginBg{
    margin:0;
    padding:35px 10px 25px;   
    -moz-background-size: cover;
    background-size: cover;
    min-height: calc(100vh - 0px);
}
.login-logo{ width:200px; margin:0 auto}
/*輸入from div*/
.login-box{ width:80%; margin:25px auto 15px; padding:15px; background-color:rgba(0, 0, 0, 0.55);box-shadow:0px 0px 8px 3px #003D79;border-radius: 10px;}
.login-box .input-group .form-control{ font-size:18px;letter-spacing: 3px; height:40px}
.login-btn{margin:20px auto 10px}
.login-btn a{   text-decoration: none;}
.login-btn .btn{ font-size:17px}
.login-freeBtn{
    background-color: #ffdf51;  box-shadow: 0px 5px 0px 0px #ab6c00;
    border-radius: 5px; padding: 10px 25px; font-size: 18px;    text-decoration: none;  margin: 0 auto; 
    color: #3a1700; position: relative; width:73%;  display:block;  text-align:center; font-weight:bold
}
.login-freeBtn:hover {  background-color: #FFDE29;
                       color:#1A4793
}
.login-freeBtn:active {
    transform: translate(0px, 5px);
    -webkit-transform: translate(0px, 5px);
    box-shadow: 0px 1px 0px 0px;
}


.login-box .input-group{ margin:15px 0}
.login-re{    position: relative; text-align:right; padding-right:5px}

/*********/
input[type=checkbox] {
    display: none;
}
.check-L, .check-R{ display:inline-block;   vertical-align: top;}
.check-R{ }
.check-L{ width:25px}
.check-set{
    height:20px;
    width: 20px;
    background-color: transparent;
    border: 2px solid #8a8a8a;/*方框color*/
    border-radius: 3px;
    position: relative;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: border-color ease 0.2s;
    -o-transition: border-color ease 0.2s;
    -webkit-transition: border-color ease 0.2s;
    transition: border-color ease 0.2s;
    cursor: pointer;
}
.check-set::before, .check-set::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    height: 0;
    width: 3px;
    background-color: #ffcd06;/*勾勾color*/
    display: inline-block;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-radius: 3px;
    content: ' ';
    -webkit-transition: opacity ease .5;
    -moz-transition: opacity ease .5;
    transition: opacity ease .5;
}
.check-set::before {
    top: 14px;
    left: 9px;
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
.check-set::after {
    top:7px;
    left: 2px;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

input[type=checkbox]:checked + .check-set,
.check-set.checked {
    border-color: #6cc8eb;/*勾選後,方框color*/
}
input[type=checkbox]:checked + .check-set::after,
.check-set.checked::after {
    height: 8px;
    -moz-animation: dothabottomcheck 0.2s ease 0s forwards;
    -o-animation: dothabottomcheck 0.2s ease 0s forwards;
    -webkit-animation: dothabottomcheck 0.2s ease 0s forwards;
    animation: dothabottomcheck 0.2s ease 0s forwards;
}
input[type=checkbox]:checked + .check-set::before,
.check-set.checked::before {
    height: 18px;
    -moz-animation: dothatopcheck 0.4s ease 0s forwards;
    -o-animation: dothatopcheck 0.4s ease 0s forwards;
    -webkit-animation: dothatopcheck 0.4s ease 0s forwards;
    animation: dothatopcheck 0.4s ease 0s forwards;
}

/*******/


.check-R {    width: 83%;}


/*輸入驗證碼*/
.code{vertical-align: top; margin-left:0}
#captcha{    float: left;    width: 40%;}

/*驗證碼圖*/
#captchaImage{       height: 40px;}
#myCaptchaImage{       height: 40px;}
@media (max-width: 320px) {

.login-box{ width:90%}
.searchBar-L .form-control, .searchBar-R .form-control{ font-size:15px;padding: 6px 5px;}
.serachBar .input-group>.input-group-btn>.btn{    padding: 5px 10px;}
.select-list li{margin: 5px 0;}

}

}


@media screen and (min-width:360px) {

}
@media screen and (min-width:413px) {

}
@media screen and (min-width:768px) {
    .loginBg{ padding-top:100px}
    .login-box{ width:450px; padding:30px}
    .login-freeBtn{ width:390px}



}