body { background: #fff; }
.content01{width:100%;overflow:hidden;position:relative;}
.userBox { margin:0px auto 0px auto; width: 400px;/* position:absolute;left:50%;top:50%;margin-left:-200px;  */position:relative;z-index:99; }
.userBox.forgot{width: 500px;}
.userBox h2 { margin-bottom: 15px; text-align:center;font-size:36px;color:#2a56b4;font-family: 'Fjalla One', sans-serif;  }
.userBox .message { font-size:12px; border-bottom: 1px solid #e6e6e6; line-height:30px; margin-bottom:10px; padding-bottom:10px; }
.userBox .message p{text-align:center;}
.userBox .userBoxContent { padding:30px; width: 338px; background:#f8f8f8; border-radius:8px; overflow:hidden; }
.userBox.forgot .userBoxContent{width: 438px;}
.userBox .userBoxContent .paragraph { line-height:30px; margin-bottom:10px; }
.userBox .userBoxContent .paragraph  p{margin-bottom:10px;}
.userBox .userBoxContent .paragraph .rememberme input[type=checkbox] { margin-top: -3px; margin-right:3px; }
.userBox .userBoxContent .paragraph input[type=text],
.userBox .userBoxContent .paragraph input[type=password],
.userBox .userBoxContent .paragraph input[type=email] { padding: 5px 10px; width: 316px; height:30px; line-height:30px; font-size:20px; border: 1px solid #DDD; background:#fff; color:#333; font-weight:900; letter-spacing:2px; border-radius:5px;}
.userBox.forgot .userBoxContent .paragraph input[type=email] {width: 416px;}
.userBox .userBoxContent .paragraph input::-webkit-input-placeholder { font-size:15px; font-weight:100; color:#AAA; letter-spacing: 1px; }
.userBox .userBoxContent .paragraph input:-moz-placeholder { font-size:15px; font-weight:100; color:#AAA; letter-spacing: 1px; }
.userBox .userBoxContent .paragraph input[type=submit] { float:right; padding:5px; width:100px; height:35px; line-height:20px;  border:0px; border-radius:5px; color:#FFF; background:#2a56b4; font-size:15px; cursor:pointer; margin-top:5px; }
.userBoxOther { width:250px;padding:15px 0px;margin:0 auto;position:relative;z-index:99; }
.userBoxOther.forgot { width:160px; }
.userBoxOther.register  { width:250px; }
.userBoxOther p { line-height:20px; margin-bottom:5px; float:left;margin:0px 4px; letter-spacing:0.5px; font-size:16px;}
.userBoxOther span{float:left;color:#999; margin:0 15px;}
.userBoxOther a{color:#999;transition:0.3s;-webkit-transition:0.3s;}
.userBoxOther a:hover{color:#2a56b4;}
.userBox .userBoxContent .paragraph label{font-size:14px; font-weight:300;}
[fanswoo-message_show] { margin-top: 20px; }

.bg_triangle_top{width:100%;height:130px;overflow:hidden;transform:scaleX(-1);-webkit-transform:scaleX(-1); margin-top:70px; }
.bg_triangle_top .dot_box{width:100%;height:150px;background:url(../png/dot_bg.png) center center;opacity:0.2;}
.bg_triangle_top .white_box{width:120%;height:200px;background:#fff;position:absolute;top:80px;left:-30px;transform:rotate(3.8deg);-webkit-transform:rotate(3.8deg);}

.bg_triangle_bottom{width:100%;height:130px; overflow:hidden;transform:scaleY(-1);-webkit-transform:scaleY(-1);}
.bg_triangle_bottom .dot_box{width:100%;height:150px;background:url(../png/dot_bg.png) center center;opacity:0.2;}
.bg_triangle_bottom .white_box{width:120%;height:200px;background:#fff;position:absolute;top:60px;left:-30px;transform:rotate(3.8deg);-webkit-transform:rotate(3.8deg);}


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

	.content01{width:100%;overflow:hidden;position:relative;}
	.userBox { margin:60px auto 0px auto; width: 500px; }
	.userBox.forgot{width: 550px;}
	.userBox h2 { font-size:40px; }
	.userBox .userBoxContent { padding:30px; width: 438px;}
	.userBox.forgot .userBoxContent{width: 488px;}
	
	.userBoxOther { width:280px;padding:15px 0px;margin:0 auto; }
	.userBoxOther.forgot { width:160px; }
	.userBoxOther.register  { width:245px; }
	.userBoxOther p { font-size:16px;}
	
	.userBox .userBoxContent .paragraph input[type=text],
	.userBox .userBoxContent .paragraph input[type=password],
	.userBox .userBoxContent .paragraph input[type=email] { padding: 5px 10px; width: 416px;}
	.userBox.forgot .userBoxContent .paragraph input[type=email] {width: 466px;}
	
	
	.bg_triangle_top{width:100%;height:180px;overflow:hidden; margin-top:70px; }
	.bg_triangle_top .dot_box{width:100%;height:180px;}
	.bg_triangle_top .white_box{width:120%;height:200px;top:120px;left:-30px;}

	.bg_triangle_bottom{width:100%;height:180px; overflow:hidden;}
	.bg_triangle_bottom .dot_box{width:100%;height:180px;}
	.bg_triangle_bottom .white_box{width:120%;height:200px;top:80px;left:-30px;}
	
	
}
@media screen and (max-width:1799px) and (min-width:1600px) {
	
	.content01{width:100%;overflow:hidden;position:relative;}
	.userBox { margin:35px auto 0px auto; width: 400px;/* position:absolute;left:50%;top:50%;margin-left:-200px;  */position:relative;z-index:99; }
	.userBox .message { }
	.userBox .message p{text-align:center; font-size:14px;line-height:20px;}
	
	.userBoxOther { width:270px;padding:15px 0px;margin:0 auto;position:relative;z-index:99; margin:0px auto 35px auto;  }
	.userBoxOther.forgot { width:160px; }
	.userBoxOther.register  { width:225px; }
	.userBoxOther p { font-size:15px;}
	
	
}
@media screen and (max-width:1024px) and (min-width:960px){

	.userBox { padding:30px 0px 0px 0px; }
	
}
@media screen and (max-width:959px) and (min-width:700px){

	.userBox {  padding:30px 0px 0px 0px; }
	
}

@media screen and (max-width:699px) {

	.userBox h2 { font-size:30px; }
	
	.userBox {margin:-10px auto 0px auto; width: 90%; padding:20px 0px; background:#f8f8f8;border-radius:8px;  }
	.userBox .userBoxContent { padding:10px 0px; width:94%; margin:0 auto; overflow:hidden; background:#f8f8f8;}

	.userBox.forgot {margin:-10px auto 0px auto; width: 90%; padding:20px 0px; background:#f8f8f8;border-radius:8px;  }
	.userBox.forgot .userBoxContent { padding:10px 0px; width:94%; margin:0 auto; overflow:hidden; background:#f8f8f8;}
	
	.userBox .userBoxContent .paragraph { line-height:30px; margin-bottom:10px; }
	.userBox .userBoxContent .paragraph .rememberme input[type=checkbox] { margin-top: -3px; margin-right:3px; }
	.userBox .userBoxContent .paragraph input[type=text],
	.userBox .userBoxContent .paragraph input[type=password],
	.userBox .userBoxContent .paragraph input[type=email] { padding: 5px 10px; width: 91.5%; height:25px; line-height:25px; font-size:18px; border: 1px solid #DDD; background:#faffbd; color:#333; font-weight:900; letter-spacing:2px; }

	.userBox.forgot .userBoxContent .paragraph input[type=email] { padding: 5px 10px; width: 91.5%; height:25px; line-height:25px; font-size:18px; border: 1px solid #DDD; background:#faffbd; color:#333; font-weight:900; letter-spacing:2px; }
	
	.userBoxOther { width:250px;padding:15px 0px;margin:0px auto 0px auto; }
	
	.bg_triangle_top{width:100%;height:100px;transform:scaleX(-1);-webkit-transform:scaleX(-1); margin-top:90px;}
	.bg_triangle_top .dot_box{width:100%;height:150px;}
	.bg_triangle_top .white_box{width:130%;height:200px;top:35px;left:-60px;transform:rotate(9deg);-webkit-transform:rotate(9deg);}
	
	.bg_triangle_bottom{width:100%;height:110px;transform:scaleY(-1);-webkit-transform:scaleY(-1);}
	.bg_triangle_bottom .dot_box{width:100%;height:150px;}
	.bg_triangle_bottom .white_box{width:130%;height:140px;top:35px;left:-70px;transform:rotate(9deg);-webkit-transform:rotate(9deg);}
	
}