/* bbs paging style common  */
.bbs-paging {font-size:18px; color:#999; line-height:100%;}
.bbs-paging .pg-s1 {display:inline-block; padding:10px 0; text-align:center; background-color:#fff; border:#f6f7f9 solid 1px; border-left:none; min-width:40px; vertical-align:middle;}
.bbs-paging .pg-s1:first-child {border-left:#f6f7f9 solid 1px;}
.bbs-paging .pg-s1.selected {background-color:#dfdfdf; color:#333;}
.bbs-paging .pg-s1>a {display:block;}
.bbs-paging .pg-s1>a:hover {color:#ff0000;}

/* bbs inpo page mesege common style */
.pageinfo {text-align:center; padding:100px 0;}
.pageinfo .info-box {text-align:center; font-size:18px; padding-left:60px; margin:0 auto; display:inline-block; position:relative;}
.pageinfo .info-box>[class*="zicon-"] {-webkit-animation:ani05 3s ease infinite; -moz-animation:ani05 3s ease infinite; -o-animation:ani05 3s ease infinite; animation:ani05 3s ease infinite; font-size:40px; vertical-align:middle; position:absolute; top:0; left:0; margin-top:-18px;}
.pageinfo .info-box span {vertical-align:middle;}
.pageinfo .fixed-box {position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.7); -webkit-animation:ani03a 1s ease; -moz-animation:ani03b 1s ease; -o-animation:ani03b 1s ease; animation:ani03b 1s ease; z-index:1000;}
.pageinfo .msg-box {position:absolute; top:50%; left:50%; background-color:#fff; border-radius:10px; transform:translate(-50%, -50%); box-shadow:rgba(0,0,0,0.9) 2px 2px 4px; -webkit-animation:ani03a 1s ease; -moz-animation:ani03a 1s ease; -o-animation:ani03a 1s ease; animation:ani03a 1s ease;}
.pageinfo .msg-box .hd-box {padding:30px 10px 10px 10px; background-color:#f1c6c6; position:relative; border-radius:10px 10px 0 0;}
.pageinfo .msg-box .hd-box h3 {font-size:20px; font-weight:bold;}
.pageinfo .msg-box .hd-box h3 [class*="zicon-"] {font-size:50px; vertical-align:middle; margin-right:10px; color:#ff0000; position:absolute; top:0; left:50%; transform:translate(-50%, -50%); background-color:#f1c6c6; width:50px; height:50px; border-radius:100%; line-height:100%; text-shadow:#999 0 1px 1px;}
.pageinfo .msg-box .hd-box h3 span {vertical-align:middle;}
.pageinfo .msg-box .hd-box .info-txt {font-size:14px;}
.pageinfo .msg-box .ft-box {padding:20px; text-align:center;}
.pageinfo .msg-box .ft-box .info-txt {margin-bottom:20px;}
.pageinfo .msg-box .ft-box form {margin:0; padding:0;}
.pageinfo .msg-box .ft-box input {outline:none;}
.pageinfo .msg-box .ft-box .input {font-size:14px; padding:10px; display:inline-block; width:100%; height:auto; margin-bottom:10px; border:#dfdfdf solid 2px; height:40px; border-radius:5px; text-align:center;}
.pageinfo .msg-box .ft-box .input:focus {border:#c64949 solid 2px !important;}
.pageinfo .msg-box .ft-box .btn-blue, .pageinfo .msg-box .ft-box .btn-gray {padding:10px 20px; font-size:16px; color:#fff; border:none; border-radius:3px;}
.pageinfo .msg-box .ft-box .btn-blue {background-color:#0c87df;}
.pageinfo .msg-box .ft-box .btn-blue:hover {background-color:#1c7fc6; cursor:pointer;}
.pageinfo .msg-box .ft-box .btn-gray {background-color:#9caac2;}
.pageinfo .msg-box .ft-box .btn-gray:hover {background-color:#7e8eaa; cursor:pointer;}

@keyframes ani03a {
	0% {opacity:0; top:30%;}
	100% {opacity:1; top:50%;}
}
@keyframes ani05 {
	0% {transform:rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); opacity:1;}
	25% {transform:rotate(90deg); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); opacity:.5;}
	50% {transform:rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); opacity:1;}
	75% {transform:rotate(270deg); -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); opacity:.5;}
	100% {transform:rotate(360deg); -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); opacity:1;}
}