.join-btn{ width:100%; padding:2rem 0;}
.join-btn a{ display:block; background:url(../images/btn-join.png) no-repeat 0 0; width:310px; height:110px; margin:auto; text-indent:-9999px;}
.join-btn a:hover{ background-position:0 bottom;}

.bg-suc{background:url(../images/bg-suc.jpg) repeat; padding:3rem 0;}
.bg-fail{background:url(../images/bg-fail.jpg) repeat; padding:3rem 0;}

.success, .failure{ background:#fff; -webkit-box-shadow: 3px 3px 8px 0 rgba(0,0,0,0.2); box-shadow: 3px 3px 8px 0 rgba(0,0,0,0.2); width:980px; margin:auto; padding:2rem 5rem; box-sizing:border-box;}
.success img{display:inline-block; margin-right:3rem;}
.failure img{display:inline-block; margin-right:3rem;}

.suc-info{display:inline-block; text-align:center; width:60%; margin-top:2rem;}
.fail-info{display:inline-block; text-align:center; width:60%; margin-top:3rem;}

.suc-info h2, .fail-info h2{font:bold 3rem/1.7 "微軟正黑體"; color:#F93;}
.suc-info h3, .fail-info h3{font:normal 2.4rem/1.7 "微軟正黑體";}
.suc-info span{font:normal 2.4rem/1.7 "微軟正黑體"; color:#C00;}
.suc-info div, .fail-info div{font:normal 2.4rem/1.7 "微軟正黑體"; padding-top:8px; border-top: solid 1px #999;}
.suc-info div p{vertical-align: top; line-height: 1.3;}
/**/
@media screen and (min-width: 1200px) and (max-width:1398px){
}


@media screen and (min-width: 800px) and (max-width:1199px){
}


@media screen and (min-width: 641px) and (max-width: 799px) {
.success, .failure{width:100%; margin:auto; padding:2rem; box-sizing:border-box;}
.success img{display:inline-block; margin-right:2rem; width:20%;}
.failure img{display:inline-block; margin-right:2rem; width:20%;}
.suc-info{display:inline-block; text-align:center; width:70%; margin-top:0rem;}
.fail-info{display:inline-block; text-align:center; width:70%; margin-top:0rem;}
}


@media screen and (min-width: 481px) and (max-width: 640px) {
.success, .failure{width:100%; margin:auto; padding:2rem; box-sizing:border-box; text-align:center;}
.success img{display:inline-block; margin:auto; width:60%;}
.failure img{display:inline-block; margin:auto; width:60%;}
.suc-info{display:inline-block; text-align:center; width:100%; margin-top:0rem; clear:both;}
.fail-info{display:inline-block; text-align:center; width:100%; margin-top:0rem; clear:both;}
}


@media screen and (min-width: 321px) and (max-width: 480px) {
.success, .failure{width:100%; margin:auto; padding:2rem; box-sizing:border-box; text-align:center;}
.success img{display:inline-block; margin:auto; width:60%;}
.failure img{display:inline-block; margin:auto; width:60%;}
.suc-info{display:inline-block; text-align:center; width:100%; margin-top:0rem; clear:both;}
.fail-info{display:inline-block; text-align:center; width:100%; margin-top:0rem; clear:both;}
}


@media screen and (max-width: 320px) {
.suc-info h2, .fail-info h2{font:bold 2.1rem/1.7 "微軟正黑體"; color:#F93;}
.suc-info h3, .suc-info span, .fail-info h3, .fail-info span{font:normal 1.5rem/1.7 "微軟正黑體";}
.suc-info div, .fail-info div{font:normal 1.5rem/1.7 "微軟正黑體";}

.success, .failure{width:100%; margin:auto; padding:2rem; box-sizing:border-box; text-align:center;}
.success img{display:inline-block; margin:auto; width:60%;}
.failure img{display:inline-block; margin:auto; width:60%;}
.suc-info{display:inline-block; text-align:center; width:100%; margin-top:0rem; clear:both;}
.fail-info{display:inline-block; text-align:center; width:100%; margin-top:0rem; clear:both;}
}