@charset "utf-8";

body		{background:#F4F4F4;}
#idcard-wrap	{background:#0B3D91;margin:0 auto;max-width:400px;}
#header			{text-align:center;font-size:20px;color:#fff;background:rgba(0,0,0,0.2);padding:10px 0;}
#header img		{height:22px;}
#header span	{margin-left:10px;}
#content		{position:relative;width:calc(100% - 20px);margin:80px 20px 0 0;background:#fff;border-radius:0 30px 0 0;padding:120px 30px 30px 60px;min-height:400px;}
#content:before	{content:"MOBILE STUDENT IDENTITY CARD";font-size:9px;color:#ccc;letter-spacing:5px;position:absolute;left:15px;top:50%;margin-top:150px;width:300px;height:15px;transform:rotate(-90deg);transform-origin:0 0;}
#content:after	{content:"";position:absolute;left:50%;top:50%;margin-left:-90px;margin-top:-100px;display:block;width:200px;height:200px;background:url(img/idcard_contbg.png) no-repeat 50% 50%;}
#content>.img-area	{position:absolute;left:50%;margin-left:-55px;top:-50px;display:block;width:130px;height:130px;background:#fff url(../HOME/data/img/emblem.png) no-repeat 50% 50%;border-radius:50%;box-shadow:0 0 20px rgba(0,0,0,0.25);z-index:1;}
#content>.img-area .img	{position:relative;width:100%;height:100%;overflow:hidden;border-radius:50%;}
#content>.img-area img	{min-width:100%;height:100%;object-fit:cover;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
.img-area a		{position:absolute;right:-10px;bottom:0;display:block;width:40px;height:40px;background:#768395;border:none;border-radius:50%;text-align:center;line-height:38px;color:#fff;box-shadow:0 10px 10px rgba(0,0,0,0.2);}
.img-area .noimg	{display:block;width:100%;height:100%;background:url(img/noimg.jpg) no-repeat 50% 50% / 100% auto;}
#footer			{text-align:center;padding:20px 0;background:#F4F4F4;font-size:20px;letter-spacing: 0.1em;font-weight: 500;}
#footer img			{display:inline-block;}
#footer .f-logo		{display:block;height:22px;vertical-align:middle;}
#footer .f-logo img	{height:22px;vertical-align:top;}
#footer.sign		{background:#fff;border-top:1px solid rgba(0,0,0,0.1);}
#footer.sign img	{vertical-align:middle;}
#footer.sign img:first-of-type		{height:22px;margin-top:-2px;}
/* #footer .sign img:last-of-type		{height:36px;margin-top:-2px;} */
#footer.sign img:last-of-type		{height:36px;margin:-2px 0 0 -30px;}
#footer.sign span	{position:relative;z-index:1;}

.tv-checkbox input[type="checkbox"]	{display:none;}
.tv-checkbox input[type="checkbox"] + label	{position:relative;display:block;padding-left:20px;font-size:13px;color:#000;}
.tv-checkbox input[type="checkbox"] + label:before	{content:"";position:absolute;left:0;top:50%;margin-top:-7px;display:block;width:14px;height:14px;border:2px solid #ccc;}
.tv-checkbox input[type="checkbox"]:checked + label:before	{content:"\f00c";font-family:FontAwesome;line-height:10px;font-size:8px;background:#0A3C89;border-color:#0A3C90;color:#fff;}

.login, .idcard	{position:relative;z-index:2;}

.login .tit	{font-size:32px;font-weight:600;color:#0B3D91;letter-spacing:-1.5px;margin:0 0 25px;line-height:1;}
.login .input-wrap input	{display:block;width:100%;height:40px;margin:0 0 3px;border-radius:3px;}
.login .input-wrap input::placeholder	{font-size:13px;color:#999;}
.login .input-wrap input:focus::placeholder	{color:transparent;}
a.login-btn	{display:block;background:#0A3C89;padding:15px 0;font-size:14px;color:#fff;margin:10px 0 0 0;text-align:center;border-radius:3px;}

.idcard ul			{margin:25px 0 0 0;}
.idcard li			{padding:2px 0;}
.idcard li:after	{content:"";display:block;float:none;clear:both;}
.idcard span		{display:block;float:left;font-size:18px;}
.idcard span:nth-of-type(1)	{width:80px;color:#0B3D91;}
.idcard span:nth-of-type(2)	{width:calc(100% - 80px);font-weight:500;color:#333;}
.idcard .barcode	{text-align:left;margin:60px auto 0;}
.idcard .barcode img{max-width:100%;}
.idcard.nodata		{text-align:center;padding:30px 0 0 0;word-break:keep-all;}
.idcard.nodata .tit	{font-size:20px;color:#0B3D91;font-weight:500;letter-spacing:-0.5px;line-height:1.2;}
.idcard.nodata .txt	{font-size:15px;margin:20px 0;line-height:1.5;}
.idcard.nodata a	{display:block;background:#0A3C89;padding:15px 0;font-size:14px;color:#fff;border-radius:3px;}

.layer-wrap		{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:99;}
.layer-cont		{border-radius:6px;background:#fff;padding:20px;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:calc(100% - 40px);}
#setImg-layer	{text-align:center;}
#setImg-layer .txt	{font-size:16px;color:#666;line-height:1.4;word-break:keep-all;margin:0 0 20px;}
#setImg-layer input	{font-size:13px;padding:7px;text-indent:0;}
#setImg-layer .btn_d	{font-size:14px;margin:10px 0 0 0;border-radius:3px;height:40px;padding:10px 10px;background:#0B3D91;border-color:#0B3D91;color:#fff;}