@charset "utf-8";
/* Global */
:root{
    --bs-color-blue:#0032A0;
    --bs-color-red:#ff0000;
    --bs-color-ycred:#ff0044;
    --bs-color-orange:#ff6600;
    --bs-color-green:#00cc00;
    --bs-color-gray:#555555;
    --bs-color-black:#333333;
    --bs-bg-gray:#e3e3e6;
    --link-color-blue:#0031e5;
    --link-color-ycred:#ff0044;
    --bs-font-size:14px;
    --bs-font-weight:400;
}
*{margin:0; padding:0;}
html, body, form{height:100%;}
html, body, table, input, select, textarea, button{font-family:'Open Sans', sans-serif, "Segoe UI", SegoeUI, Tahoma, "Helvetica Neue", "Helvetica", sans-serif, monospace, "Microsoft YaHei", "微软雅黑", "Noto Sans SC", SimHei, "黑体"; font-stretch:wider; font-size:var(--bs-font-size); color:var(--bs-color-gray, #555); font-weight:var(--bs-font-weight);}
input, button, select, textarea, a{outline:none;}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px #f7f7fa inset !important;}/* 去掉 Chrome 黄底 */
input::placeholder{color:#999;}
::-ms-clear,::-ms-reveal{display:none;}
li{list-style:none;}
img{border:0;}
.clearThis:after {display:block; height:0; content:"."; clear:both; visibility:hidden;}
.clear{clear:both;}
a{color:var(--link-color-blue);}
a:hover{text-decoration:underline; color:var(--link-color-ycred);}
.blue{color:var(--bs-color-blue);}
.red{color:var(--bs-color-red);}
.green{color:var(--bs-color-green);}
.redStar{color:#f00; font-family:"宋体"; font-weight:normal;}
.nowrap{white-space:nowrap!important; word-break:keep-all!important;}

::-webkit-input-placeholder {color:#ccc; /* WebKit browsers */}
::-moz-placeholder {color:#ccc; /* Mozilla Firefox */}
:-ms-input-placeholder {color:#ccc; /* Internet Explorer 10+ */}
::-ms-reveal {display: none; /* 隐藏微软浏览器（IE\Edge）密码框小眼睛 */}

.page-wrap{width:100%; min-width:1024px; height:100%; min-height:650px; position:relative; background-image:url(login-bg.webp); background-repeat:no-repeat; background-position:right bottom; background-size:cover; box-sizing:border-box; z-index:0; display:flex; justify-content:flex-start; align-content:center; align-items:center; padding:0 150px; overflow:hidden;}
.page-wrap .bg-mask{position:absolute; top:0; right:0; bottom:0; left:0; background:url(login-bg_mask-lg.png) 0 0 no-repeat; background-size:auto 100%; z-index:1;}
.main-wrap{width:60%; min-width:640px; max-width:1000px; height:100%; max-height:600px; border-radius:10px; background:rgb(255,255,255,0.95); background-size:100% auto; position:relative; z-index:10; box-shadow:0 0 30px rgba(0,0,0,0.3); box-sizing: border-box; padding:0 40px;}
.logo{margin-top:50px; background:none;}
.logo img{display:block; width:100%; max-height:80px; margin:0 auto;}
h2.title{margin:50px auto 30px; font-size:24px; text-align:center; color:var(--bs-color-blue); font-weight:bold;}
h3{color:var(--bs-color-blue); padding:0 10px; font-weight:500; margin-bottom:30px;}
.content{display:flex; justify-content:space-between; align-content:center; align-items:center;}
.content > div{flex:0 0 calc(33.33333% - 10px);}
.content > div a{display:block; padding:10px; color:var(--bs-color-blue); text-decoration:none; font-weight:bold; font-size:16px; box-sizing:border-box; transition:background ease-in 0.5s, background ease-in-out 0.5s;}
.content > div a img{display:block; width:100%; margin-bottom:10px;}
.content > div a:hover{border-radius:10px; background:var(--bs-color-blue); color:#fff;}
.content > div a:hover img{border-radius:6px;}
.language-switch{height:24px; cursor: pointer; display:flex; align-items:center; text-transform:uppercase; margin-left:20px;}
.language-switch .text{position:relative; padding:0 0 0 5px; height:100%; color:#333; display:flex; align-items:center; z-index:1;}
/*.language-switch .text::after{content:""; position:absolute; top:-10px; right:-10px; bottom:-3px; left:-25px; background:#fff; border-radius:0 0 0 10px; border:1px #ededed solid; z-index:-1;}*/
.language-switch > img{display:inline-block; height:20px; vertical-align: middle; position:relative; z-index:2;}
.language-switch:hover > img{opacity:0.6;}
.lang_dropdown{position: absolute; z-index:10; top:12px; right:0; opacity:0; height:0; padding-top:12px; transform: translateY(0); transition: opacity .1s ease-out,transform .1s ease-out; pointer-events:none; font-size:14px;}
.language-switch:hover .lang_dropdown{height:auto; transform: translateY(6px); opacity:1; pointer-events:auto;}
.lang_dropdown ul{background-color: #fff; border-radius: 4px; box-shadow: 0 6px 32px 0 rgba(130,130,140,.24); overflow: hidden;}
.lang_dropdown li{margin:0!important;}
.lang_dropdown li a{display:flex; align-items:center; padding:10px 15px; text-decoration:none; white-space: nowrap;}
.lang_dropdown li a:hover{background:#E9ECEF;}
.lang_dropdown li a.is-active{color:var(--bs-color-ycred); font-size:12px; cursor:default;}
.lang_dropdown li a.is-active::after{content: ""; display: inline-block; width: 16px; height: 16px; vertical-align:middle; margin-left: 5px;background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMTMuMDE0IDQuODkxLTYuMTY4IDcuNzEzTDIgOC41NjZsLjkxNC0xLjA5NyAzLjcyNiAzLjEwNEwxMS45IDRsMS4xMTQuODkxeiIgZmlsbD0iI0ZGMDEzMSIvPgo8L3N2Zz4K); background-position: 50%; background-size: cover; background-repeat: no-repeat; background-color:none;}
.top{height:30px; display:flex; justify-content:flex-end; align-items:center; margin:0 -40px; padding:0 20px; border-bottom:1px #ededed solid; border-radius:10px 10px 0 0; background-color:#fff; position:sticky; top:0;}

@media (max-width:1380px) and (orientation:landscape) {
    .main-wrap{max-height:480px;}
    h2.title{margin:30px auto 20px;}
    h3{margin-bottom:10px;}
    }

@media (max-width:1280px) and (orientation:landscape) {
    .page-wrap .bg-mask{background:url(login-bg_mask-lg.png) -200px 0 no-repeat; background-size:auto 100%;}
    }
/* Pad */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
    .page-wrap .bg-mask{background:url(login-bg_mask-sm.png) 0 -300px no-repeat; background-size:100% auto;}
    .page-wrap{width:100%; min-width:auto; height:100%; min-height:auto; box-sizing:border-box; background-position:right bottom; background-size:100% auto; padding:0; display:block; align-items:unset; align-content:unset; padding-top:100px;}
    .main-wrap{margin:0 auto; height:auto; max-height:unset; padding-top:1px; padding-bottom:30px;}
    }
@media (max-width:767px){
   .page-wrap .bg-mask{background:url(login-bg_mask-sm.png) 0 0 no-repeat; background-size:auto 100%;}
	.page-wrap{width:100%; min-width:auto; height:100%; min-height:auto; box-sizing:border-box; background-position:right bottom; background-size:200% auto; padding:0; padding-top:20px; display:block;}
    .main-wrap{position:absolute; top:20px; right:20px; bottom:20px; left:20px; width:auto; min-width:unset; max-width:unset; height:auto; min-height:unset; max-height:unset; border-radius:10px; background:#fff; overflow:auto; box-sizing:border-box; padding:20px;}
    .logo{margin-top:10px;}
    h2.title{font-size:18px; margin:20px auto 15px;}
    h3{font-size:14px; margin-bottom:10px;}
    .content{display:flex; flex-direction:column; justify-content:flex-start; height:calc(100% - 180px);}
    .content > div{width:auto; height:30%; flex:unset; padding:10px;}
    .content > div a{font-size:16px; height:100%; min-height:140px; text-align:center; position:relative; padding:0; margin:10px auto;}
    .content > div a img{height:100%; min-height:120px; width:auto; margin:0 auto;}
    .content > div a p{position:absolute; height:30px; line-height:30px; left:0; right:0; bottom:0; border-radius:0; background:rgba(0,50,160,0.75); color:#fff;}
    .content > div a:hover{background:none; border-radius:6px;}
    .content > div a:hover img{outline:5px #0032a0 solid; border-radius:5px;}
    .content > div a:hover p{border-radius:0 0 6px 4px; background:rgba(255,0,68,0.8);}
}