body {font-family: 'Microsoft JhengHei UI', 微軟正黑體, SimSun, 'Segoe UI', Tahoma, Helvetica, Sans-Serif; background: #000;}

/* loading process */
.loading {
	position: fixed; top:45%; left:0; width: 100%; height:34px; text-align: center; z-index:1002; background: url(/images/loadwrap.png) center no-repeat; _background:none;
}
.process_img {
	position:relative; height: 6px; width: 100%; text-align: center; line-height: 0; padding:0; margin:14px 0 0 0; background: url(/images/loading_blue.gif) center no-repeat; 
}

.backbox {
    position: fixed;
    _position: absolute;
    z-index: 1001;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff url(/images/overlay_bg.png) 0 0;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
}
hr {border: 0; height: 1px; background-color: #545454; border-bottom: #000 1px solid; margin-top: 20px; margin-bottom: 20px; width: 95%;}
hr.hrw100 {width: 100%;}
.sub_title2, .sub_title3 {
    text-align: center;
    display: block;
    font-weight: bold;
    color: #00ffdc;
    margin: -30px auto 10px auto;
    background-color: #000;
    font-size: 18px;
    line-height: 1;
}
.sub_title2 {width: 100px;}
.sub_title3 {width: 200px;}
.well-m50 { margin: 0 50px;}
#wrap {overflow: hidden;}
.container { padding:0 !important; max-width: 860px;}
.wrap { padding-right: 15px !important; padding-left: 15px !important; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;}
.header1 { width:100%; height:10px; margin:0; padding:0; }
.header2 { width:100%; background-color:rgba(255,255,255,0.5); margin:0; padding:17px 0 15px 0; display:table;}
.header2 .logo {margin:0 auto 0 20px; width:246px; height: 30px;}
.banner1 {width:100%; }
.banner2 {width:100%; padding:20px 0 10px; text-align:center; position: relative; z-index: 1;}
.banner2 .img-circle {width:120px; height:120px; margin:-50px auto 0px; text-align:center; background-color: rgba(16,16,31,0.75);}
#validate_title {max-width:320px;}
#icon_gamer {margin: 0 5px; padding: 5px 0; width:110px; height:120px;}
.banner2 h4 {display:inline-block; margin:40px 0 0 36px;}
.margin-x-20 {margin:0 20px;}
.padding-t-10 {padding-top:10px;}
.padding-t-20 {padding-top:20px;}
.padding-y-30 {padding-top:30px; padding-bottom:30px;}
.colorWhite, .colorWhite i {color:#fff !important;}
#result {margin-bottom: -80px; display: none; width: 100%; text-align:center; background-color: #eaeaea; padding-top: 20px;}
#zoom2 {max-width: 700px; width: 100%; margin-right: auto; margin-left: auto; display:block; }
#ima_BC {max-width: 700px; width: 100%;}
.msg a {cursor:default;}
form .form-group label:not(.radio-inline) { padding-left: 4px; margin-bottom: 5px;}
.text-white {color:#fff;}
#sample { margin :0 20px; padding:0 0 30px 0;}
#sample p.pt26 {display:inline-block; padding:26px 0 0 0;}
#sample img {border:1px solid #808080; border-radius: 5px;}
#sample h4 {margin-bottom:0;}
#sample .alert{margin-bottom:0px !important;}
#LRSN { width: 70%; float: left; border-bottom-right-radius: 0; border-top-right-radius: 0;}
#submit { width: 30%; float: right; border-bottom-left-radius: 0; border-top-left-radius: 0;}
.zoom { left: 0; top: 0; width: 100%; height: 100%; z-index: 1;}
.zoom:before {
    position: absolute;
    left: 12%;
    bottom: 5%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    opacity: 1;
    display: block;
    z-index: 3;
    content: '';
    background: url(images/zoom.png) no-repeat;
    background-size: 100% 100%;
    transition: opacity .3s cubic-bezier(0.165,0.840,0.440,1.000),transform .3s cubic-bezier(0.165,0.840,0.440,1.000);
    -webkit-transition: opacity .3s cubic-bezier(0.165,0.840,0.440,1.000),transform .3s cubic-bezier(0.165,0.840,0.440,1.000);
    -moz-transition: opacity .3s cubic-bezier(0.165,0.840,0.440,1.000),transform .3s cubic-bezier(0.165,0.840,0.440,1.000);
    -o-transition: opacity .3s cubic-bezier(0.165,0.840,0.440,1.000),transform .3s cubic-bezier(0.165,0.840,0.440,1.000);
}
.zoom:hover:before, .zoom:focus:before {
    opacity: 1;
    -webkit-transform: scale(1.1,1.1) rotate(0.001deg);
    -ms-transform: scale(1.1,1.1) rotate(0.001deg);
    transform: scale(1.1,1.1) rotate(0.001deg);
    background-position: 0 50%;
}
.help-block {
    margin-left: 6px;
    margin-bottom: -22px;
    padding-left: 16px;
    background-image: url(/images/icon_has-error.png);
    background-repeat: no-repeat;
    background-position: left 92%;
    line-height: 22px;
}
.form-control-feedback {line-height:34px !important;}

.footer-bottom {
    padding-top: 20px;
    padding-bottom: 10px;
    min-height: 62px;
    border-top: 1px solid #464646;
}

.list_item {
    margin: 0;
    padding: 15px 0 30px 0;
    list-style:none;
}

.list_item li {
    background: url(images/arrow2.png) 0 4px no-repeat;
    padding: 0 0 8px 12px;
    padding-bottom: 8px!important;
    font-weight: normal;
    line-height: 18px;
    margin: 0;
}

#get_result {display: none;}
#research { margin-top: 5px;}

#policy {padding-top:30px; padding-bottom:8px; text-align:center; margin:0 50px;}
.bootbox .modal-header {display:none;}

@media (max-width: 992px) {    
    #sample p {width:100%; text-align:center; padding-top:34px; font-size:16px;}
}

@media (max-width: 991px) and (min-width: 768px) {
    #zoom2 { margin-right: 3rem; margin-left: 3rem;}
}

@media (min-width: 768px) {
    body { background-image: url('images/bk.jpg'); background-position: center top; background-repeat:no-repeat;}
    .navbar-toggle {display: block !important; }
    .header2 {border-radius: 5px;}
    .colorWhite {font-size :26px;}
    #result { width: calc(100% - 40px); margin-right: 20px; margin-left: 20px;}    
    .well {margin:0 20px !important;}
}

@media (max-width: 767px)
 {
    #wrap {padding-left: 10px !important; padding-right: 10px !important;}
    .logo {max-width:180px; margin-left:20px !important;}
    .header2 {background-color:#fff;}
    .colorWhite {font-size :20px;} 
    .list_item { padding: 0px 0 0 8px; margin:0 -2px 0 -6px; font-size:13px;}
    .wrap {padding-right:8px !important; padding-left:8px !important;}
    #sample p {width:100%; text-align:center; padding-top:34px; font-size:16px;}
    #sample, .well {margin:0 6px 8px 6px !important;}
    #sample {padding:0 !important;}
    .banner2 h4 {margin:40px 0 0 20px;}
    #result { margin-bottom: -50px; width: calc(100% - 10px); margin-left: 5px; margin-right: 5px;}
    #zoom2 { margin-right: 2rem; margin-left: 2rem; width: calc(100% - 4rem);}
    .well-m50 {margin: 0 20px;}
}

@media (max-width: 580px) {
    .banner2 .img-circle { width: calc(20vw); height: calc(20vw);}
    #icon_gamer {margin: 0 auto; width: calc(20vw); height: calc(20vw);}
}

@media all and (-ms-high-contrast:none) and (min-width: 768px) {
    #result {height: 280px;}
    *::-ms-backdrop, #result { height: 280px}
}