/* memberBox */
.memberBox { min-height: 627px; }

/* shadowBox */
.shadowBox {overflow: hidden;margin: 10px 10px 20px;padding: 30px;background: #fff;}
.shadowBox form#joinform { padding-right: 40px; float: left; width: calc(100% - 411px); border-right: 1px #000 solid; }
.shadowBox form#loginform { padding-left: 40px; float: right; width: 320px; }
.shadowBox form b.required { font-weight: normal; color: #FF0004; }
.shadowBox form h3.title , #memberCenter h3.title {padding-left: 30px;background: url(/images/01/icon-user.png) no-repeat 0 50%;font-size: 25px;text-transform: uppercase;font-weight: bold;}
.shadowBox form article { margin: 10px 0; }
.shadowBox form article.login { margin-top: 30px; padding-top: 10px; border-top: 1px #d8d8d8 solid; text-align: center; }
.shadowBox form article a , #memberInfo #bindingBox a { margin-bottom: 10px; padding: 5px 0; background: #3b589a; border-radius: 5px; display: block; text-align: center; color: #fff; }
.shadowBox form article.login a , #memberInfo #bindingBox a { margin: 5px 10px; padding: 5px 30px; display: inline-block; }
.shadowBox form article a.line , #memberInfo #bindingBox a.line { background: #00B900; }
.shadowBox form article a font , #memberInfo #bindingBox a font { display: inline-block; vertical-align: middle; }
.shadowBox form article a i , #memberInfo #bindingBox a i { margin-right: 15px; font-size: 32px; display: inline-block; vertical-align: middle; }
.shadowBox form ul { overflow: hidden; margin: 20px auto; }
.shadowBox form#form1 ul { width: 60%; }
.shadowBox form#joinform ul { margin-bottom: 12px; }
.shadowBox form ul li { position: relative; margin: 10px 15px 10px 0; float: left; width: calc((100% - 15px) / 2); color: #0b0b0b; }
.shadowBox form ul li:nth-child(2n) { margin-right: 0; }
.shadowBox form ul li.large { margin-right: 0; width: 100%; }
.shadowBox form ul li label {
    display: block;
    width: 100%;
    margin-bottom: 5px;
}
.shadowBox form ul li.upimg label { display: block; }
.shadowBox form ul li input[type="text"] ,
.shadowBox form ul li input[type="password"] ,
.shadowBox form ul li input[type="tel"] ,
.shadowBox form ul li input[type="number"] {padding: 5px 10px;width: calc(100% - 22px);border: 1px #ccc solid;border-radius: 0;display: inline-block;vertical-align: middle;appearance: none;-moz-appearance: none;-webkit-appearance: none;}
.shadowBox form ul li.upimg #result { margin-right: 15px; background: url(/images/01/upimage.png) no-repeat 50%; background-size: contain; display: inline-block; }
.shadowBox form ul li.upimg a#chImages { position: relative; margin: 5px 10px 5px 0; padding: 2px 15px; background: #c18317; display: inline-block; color: #fff; }
.shadowBox form ul li.upimg a#chImages input[type="file"] ,
#memberInfo .infoBox .links input[type="file"] { position: absolute; width: 100px; height: 28px; top: 0; left: 0; opacity: 0; cursor: pointer; }
.shadowBox form ul li input.checknum {width: calc(100% - 332px);}
.shadowBox form ul li i.chkinput { position: absolute; right: 28px; top: calc(50% - 8px); }
.shadowBox form ul li i.fa-check-circle { color: #0abf12; }
.shadowBox form ul li i.fa-times-circle { color: #f50000; }
.shadowBox form ul li a.agree , .shadowBox form ul li font.agree { position: relative; display: inline-block; vertical-align: middle; }
.shadowBox form ul li a.agree input { position: absolute; width: 22px; height: 22px; top: 2px; left: 1px; opacity: 0; cursor: pointer; }
.shadowBox form ul li a.agree i { font-size: 22px; color: #969696; }
.shadowBox form ul li a.agree.chk i { color: #00da09; }
.shadowBox form ul li font.agree { margin-left: 5px; }
.shadowBox form ul li select#sendtype { padding: 5px 10px; width: 100px; border: 1px #ccc solid; display: inline-block; vertical-align: middle; }
.shadowBox form p.send { text-align: center; }
.shadowBox form p.send.text { margin-bottom: 10px; color: #636363; }
.shadowBox form p.warning { color: #676767; }
.shadowBox form p.send a.sendBtn { padding: 5px 40px; background: #13448f; border-radius: 5px; display: inline-block; text-align: center; color: #fff; vertical-align: middle; }
.shadowBox form p.send a.forget {margin-left: 20px;padding: 5px 0;display: inline-block;color: #7d7d7d;}
.shadowBox form p.send a.back { margin-left: 10px;  background: #797979; }

/* memberInfo */
#memberInfo { position: relative; }
#memberInfo >div { float: left; width: calc(100% - 220px); }
#memberInfo .imgBox { margin-right: 20px; width: 200px; background-position: 50%; background-repeat: no-repeat; background-size: contain; }
#memberInfo .imgBox img { width: 100%; }
#memberInfo .infoBox h3 { padding: 5px 0 5px 25px; background: url(/images/01/icon-member.png) no-repeat 0 50%; font-size: 20px; }
#memberInfo .infoBox p { margin: 5px 0; }
#memberInfo .infoBox p i.fab { margin: 0 2px 0 5px; font-size: 22px; color: #3b589a; vertical-align: sub; }
#memberInfo .infoBox p i.fab.fa-line { color: #00B900; }
#memberInfo .infoBox .links a { position: relative; margin: 5px 10px 5px 0; padding: 2px 15px; background: #12448f; display: inline-block; color: #fff; }
#memberInfo .infoBox .links a:nth-child(2) { background: #c18317; }
#memberInfo .infoBox .links a:nth-child(3) { background: #000; }

#memberInfo .infoBox .container { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.56); top: 0; left: 0; z-index: 10000; }
#memberInfo .infoBox .container .row { position: relative; margin: 10% auto 0; padding: 30px 0 20px; width: 630px; background: #fff; }
#memberInfo .infoBox .container .row a#closeRow { position: absolute; right: -10px; top: -10px; background: #12448f; font-size: 18px; color: #fff; width: 30px; height: 30px; line-height: 28px; text-align: center; border-radius: 50%; }
#memberInfo .infoBox .container .row #crop { text-align: center; }
#memberInfo .infoBox .container .row .bootmList { text-align: center; }
#memberInfo .infoBox .container .row #UpdateImg { position: relative; margin-top: 15px; padding: 5px 30px; background: #12448f; display: inline-block; font-size: 16px; color: #fff; }

/* bindingBox */
#memberInfo #bindingBox { margin-top: 30px; padding-top: 10px; width: 100%; border-top: 1px #d8d8d8 solid; }
#memberInfo #bindingBox a.fb { margin-left: 0; }

/* commentList */
#commentList h6.title { margin-bottom: 10px; }
#commentList h6.title:before { margin-right: 10px; width: 5px; height: 18px; background: #13448f; display: inline-block; vertical-align: middle; content: ""; }
#commentList h6.title font { display: inline-block; font-size: 20px; vertical-align: middle; }
#commentList ul li { overflow: hidden; position: relative; border-bottom: 1px #ccc dashed; }
#commentList ul li a.link { position: absolute; width: 100%; height: 100%; display: block; z-index: 2; }
#commentList ul li >div { position: relative; margin: 5px 0; float: left; width: 48px; background-position: 50%; background-repeat: no-repeat; background-size: contain; z-index: 1; }
#commentList ul li .info { margin: 5px 10px; width: calc(100% - 185px); }
#commentList ul li .info p { height: 23px; -webkit-line-clamp: 1; }
#commentList ul li .info a.more { font-size: 12px; color: #090404; }
#commentList ul li .stars { position: relative; width: 165px; text-align: right; font-size: 12px; }
#commentList ul li .stars b { margin-right: 5px; display: inline-block; font-weight: normal; vertical-align: middle; }
#commentList ul li .cName { position: absolute; font-size: 12px; right: 5px; bottom: 7px; }

/* previewImgs */
#previewImgs p { overflow: inherit; position: relative; margin: 10px 10px 10px 0; width: calc(20% - 15px); background-position: 50%; background-repeat: no-repeat; background-size: 100% auto; border: 1px #ccc solid; display: inline-block; }
#previewImgs p.noPicture { width: calc(20% - 12px); border: 0; }
#previewImgs p img { width: 100%; }
#previewImgs p a { position: absolute; width: 20px; height: 20px; background: #f50202; border-radius: 50%; text-align: center; line-height: 20px; color: #fff; top: -5px; right: -10px; z-index: 1; }

@media screen and (max-width: 1024px){
	.shadowBox form#joinform , .shadowBox form#loginform {  float: none; padding-left: 0; padding-right: 0; width: 100%; border-right: 0; }
	.shadowBox form#joinform ul { margin-bottom: 20px; }
	.shadowBox form#loginform .title , .shadowBox form#loginform ul , .shadowBox form#loginform p.send { display: none; }
	.shadowBox form p.send { text-align: right; }
	.shadowBox form#loginform article { margin-top: 30px; padding-top: 10px; border-top: 1px #d8d8d8 solid; text-align: center; }
	.shadowBox form article a { margin: 5px 10px; padding: 5px 30px; display: inline-block; }
}
@media screen and (max-width: 980px){
	.shadowBox form#form1 ul { width: 100%; }
}
@media screen and (max-width: 700px){
	.shadowBox { margin: 10px 10px 20px; padding: 10px 20px; }
}
@media screen and (max-width: 680px){
	.shadowBox form ul li { margin: 10px 0; width: calc(100% - 15px); }
	#memberInfo .imgBox { width: 48px; }
	#memberInfo .infoBox { width: calc(100% - 68px); }
	#memberInfo #bindingBox { text-align: center; }
	.shadowBox form article.login a , #memberInfo #bindingBox a { margin: 5px; padding: 5px 15px; }
	.shadowBox form article a i , #memberInfo #bindingBox a i { font-size: 20px; }
}
@media screen and (max-width: 480px){
	#memberInfo .imgBox { position: absolute; top: 10px; left: 20px; }
	#memberInfo .infoBox { width: 100%; }
	#memberInfo .infoBox h3 { margin: 0 0 20px 60px; }
	#commentList ul li .info , #commentList ul li .stars { margin: 0 10px; float: none; width: calc(100% - 20px); text-align: left; }
	#commentList ul li .cName { position: relative; left: 10px; right: auto; bottom: auto; }
	#previewImgs p { width: calc(50% - 12px); }
	#previewImgs p.noPicture { width: calc(50% - 12px); }
}
@media screen and (max-width: 375px){
	.shadowBox form article a { padding: 5px 15px; }
	.shadowBox form ul li label { display: block; }
	.shadowBox form ul li input[type="text"] ,
	.shadowBox form ul li input[type="password"] ,
	.shadowBox form ul li input[type="tel"] ,
	.shadowBox form ul li input[type="number"] { width: calc(100% - 12px); }
	.shadowBox form ul li input.checknum { width: calc(100% - 76px); }
}