﻿* { margin: 0px; padding: 0px; }
body {width: 100%;height: 100%; font-family: "Microsoft Yahei",Arial, Verdana, Helvetica, sans-serif; font-size: 13px; color: #363636; line-height: 1.5em; background: #e6d8bd; }
/* WebKit browsers */

::-webkit-input-placeholder { color: #666; }
/* Mozilla Firefox 4 to 18 */
:-moz-placeholder { color: #666; }

li { list-style-type: none; }
h1, h2, h3 { font-size: 14px; font-weight: bold; }
em { font-style: normal; }
img { border: none; }

.clear { clear: both; }
.h_4 { height: 4px; overflow: hidden; }
.lefts { float: left; text-align: left; }
.rights { float: right; text-align: right; }
a.more, a.more:link, a.more:visited, a.more:hover { font-size: 12px; font-weight: normal; color: #666; text-decoration: none; margin: 0; }

a { color: #2161b3; text-decoration: none; }

a:hover { text-decoration: none; color: #ff8400; }

.floatL { float: left; }
.floatR { float: right; }
input { outline: none; }


.login_bg{background: url("../images/login_newyear.png") #fff no-repeat center;background-size:cover; }
.login_wrap { position: absolute; left: 50%; top: 50%; width:420px; margin-top: -260px; margin-left: -210px;  background:rgba(255,255,255,.8); box-shadow:0 0 3px #aaa; padding-bottom:5px;}
.login_box { margin: 40px; /*padding-top: 10px;*/ position: relative; }
.login_box i { position: absolute; top: -78px; left: 130px; width: 78px; height: 78px; display: block; background: url("../images/ico_ren.png") no-repeat center; }
.login_box h2 { font-size: 18px; text-align: center; color: #5f89e2; font-weight: normal; margin-bottom: 20px; }
.login_box ul { border:1px solid #bbb; border-radius:3px;}
.login_box li { display: block; background:none; border-bottom:1px solid #ccc; position: relative; }
.login_box li:first-of-type input[type="text"]{ border-radius:3px 3px 0 0}
.login_box li:last-of-type{border-bottom:none }
.login_box li i { width: 62px; line-height: 50px; display: block; background:none; font-style:normal; position: absolute; top: 0px; left: 8px; color:#2161b3;font-family: "Microsoft Yahei",Arial, Verdana, Helvetica, sans-serif; font-size: 14px;  }
.login_box li input[type="text"], .login_box li input[type="password"] { font-family: "Microsoft Yahei",Arial, Verdana, Helvetica, sans-serif; font-size: 14px; line-height: 50px; height: 50px; width: 100%; border: none; text-indent: 65px; }

.login_box li input[type="text"]:focus, .login_box li input[type="password"]:focus { background:#fff9eb; box-shadow:0 0 3px #a0b9eb}
.login_box .ico_user { background: url("../images/ico_user.png") #fff no-repeat center; }
.login_box .ico_pwd { background: url("../images/ico_pwd.png") #fff no-repeat center; }
/*.login_box .ico_key { background: url("../images/ico_key1.png") #fff no-repeat 5px center; }*/
.login_box img { cursor: pointer; }
input:-webkit-autofill,
input:-webkit-autofill:focus { box-shadow: 0 0 0 1000px #fff inset !important; -webkit-box-shadow: 0 0 0 1000px #fff inset !important; }
.login_box dt { float: right; width: 90px; text-align: center; padding: 5px; overflow: hidden; vertical-align: middle; }
.login_box ol { margin-right: 100px; }
 
.login_box .submit_btn { margin-top:15px;display: block; width: 100%; line-height: 50px; height: 50px; text-align: center; border-radius: 3px;  background: url("../images/login_btn.png") repeat-x top; border: none; border: 1px solid #2161b3; color: #fff;  font-size: 18px; font-weight: bold; }
.login_box .submit_btn:hover { background: #2a6bbe; box-shadow:0 0 1px #fff inset }
.login_box .login_tool{ margin-top:15px;}
.login_box .login_tool a{ width:50%; float:left; display:block; height:60px;}
.login_box .login_tool a:last-child{ text-align:right}
.login_box .login_tool a.ico_login{ background: url("../images/ico_mobile.png")no-repeat left center;}
.login_box .login_tool a.ico_gwin{ background: url("../images/ico_gwin.png")no-repeat right center;}
.login_box .login_tool a.ico_aplus{ background: url("../images/ico_aplus.png")no-repeat right center;}

.page_bg { background: url("../images/page_bg.png") #fff repeat-x top center; }
.page_box { position: absolute; left: 50%; top: 50%; margin-top: -300px; margin-left: -365px; width: 770px; background: #fcf9f5; border-radius: 5px; box-shadow: 0px 0px 4px #ae9971; }
.page_box .page_title { display: block; background: #d1b47c; font-size: 18px; color: #fff; text-align: center; height: 44px; line-height: 44px; border-radius: 5px 5px 0 0; border-bottom: 1px solid #cec0a4; font-weight: 500; text-shadow: 1px 1px 0px #ad9360; }

.page_box .page_con ul { padding: 20px 40px; }
.page_box .page_con li { line-height: 15px; margin: 0 0 10px 0; }

.ftcolor_red { color: red; }

.page_btns { margin: 10px; padding: 10px; border-top: 1px solid #ddd; text-align: center; }
.page_btns .submit_btn { display: inline-block; width: 80px; line-height: 32px; height: 32px; text-align: center; border-radius: 5px; background: #d1b47c; border: none; border-bottom: 2px solid #b2965e; color: #fff; text-shadow: 1px 1px 0px #927e57; font-size: 14px; font-weight: bold; margin: 0px 10px; }
.page_btns .submit_btn:hover { background: #c8a767; }

.wel{ display:none}

@media screen and (min-width: 320px) and (max-width: 960px) {
    body { font-size: 1em; }
	.login_bg {
		background: url("../images/login_newyearm.png")no-repeat top center;
		background-size: cover
	}

    .login_wrap { position: absolute; left: 50%; top: 3em; margin-top:0; margin-left: -45%; width: 90%; display:block;background-size: contain; z-index:999}
    .login_box { margin: 20px 30px; padding-top: 15px; position: relative; }
	.login_box h2 {font-size: 16px; margin-bottom:10px;}
    .login_box i { position: absolute; top: -50px; left: 50%; margin-left: -32px; width: 64px; height: 64px; display: block; background: url("../images/ico_ren.png"); background-size: contain }
    .login_box li i { margin: 0; width:5em }
    .login_box li label { font-size: 13px; }
	.login_box li input[type="text"], .login_box li input[type="password"] {text-indent: 65px; }
	.login_box .submit_btn {
		line-height: 46px;
		height: 46px;
	}
.login_box .login_tool{ margin-top:5px}
.login_box .login_tool a.ico_login{ background: url("../images/ico_pc.png")no-repeat left center; background-size:contain}
.login_box .login_tool a.ico_gwin{ background: url("../images/ico_gwin.png")no-repeat right center; background-size:contain}
.login_box .login_tool a.ico_aplus{ background: url("../images/ico_aplus.png")no-repeat right center; background-size:contain}
.wel{ display:block; width:18em; position:absolute; bottom:1em; left:50%; margin-left:-9em;; z-index:99}
.wel img{ width:100%}
}
@media screen and (min-width: 768px) and (max-width: 960px) {
	body { font-size: 2.5em; }
	.login_wrap {padding-bottom:20px;}
}

.login_box .login_tips { margin-bottom: 20px; display: flex; justify-content: space-between; }
.login_box .login_tips .left { background: url("../images/login_l.png") no-repeat left center; width: 100px; height: 30px; }
.login_box .login_tips .right { background: url("../images/login_r.png") no-repeat left center; cursor: pointer; width: 60px; height: 30px;}
.login_box .mfa { display: none; }
.login_box .mfa i { width: 85px; }
.login_box li.mfa input { text-indent: 90px; }

/* ============================================================================
   Horse year (丙午 · 2026) login redesign
   Solid navy gradient + faint gold 馬 calligraphy on the left;
   login card anchored to the right. No photographic background.
   ============================================================================ */
body.login_bg {
    background: linear-gradient(135deg, #0a1834 0%, #142547 45%, #0e1f3d 100%);
    overflow: hidden;
    position: relative;
}

/* Big 馬 calligraphy filling the left half (faint gold; non-interactive). */
body.login_bg::before {
    content: "馬";
    position: absolute;
    left: 4vw;
    top: 50%;
    transform: translateY(-50%);
    font-family: "STKaiti", "KaiTi", "STSong", "SimSun", "Songti SC", "Microsoft YaHei", serif;
    font-size: 42vw;
    font-weight: 900;
    color: rgba(212, 175, 55, 0.09);
    line-height: 0.85;
    letter-spacing: 0;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* Tagline — bottom-left of the dark pane. */
body.login_bg::after {
    content: "丙午年 · 二〇二六 · 馬到成功";
    position: absolute;
    left: 6vw;
    bottom: 8vh;
    font-family: "STKaiti", "KaiTi", "STSong", "SimSun", "Songti SC", "Microsoft YaHei", serif;
    font-size: 1.45rem;
    color: rgba(212, 175, 55, 0.6);
    letter-spacing: 0.5em;
    font-weight: 300;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

/* Anchor the login card to the right pane. */
body.login_bg .login_wrap {
    position: absolute;
    right: 8vw;
    top: 50%;
    left: auto;
    transform: translateY(-50%);
    margin: 0;
    width: 380px;
    background: linear-gradient(160deg, #ffffff 0%, #fbf6e9 100%);
    border: 1px solid rgba(193, 154, 58, 0.22);
    border-top: 3px solid #c19a3a;
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.48), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
    border-radius: 6px;
    padding-bottom: 10px;
    z-index: 2;
    overflow: hidden;
}

/* Faint 馬 watermark in the card's bottom-right. */
body.login_bg .login_wrap::before {
    content: "馬";
    position: absolute;
    bottom: -38px;
    right: -16px;
    font-family: "STKaiti", "KaiTi", "STSong", "SimSun", "Songti SC", serif;
    font-size: 200px;
    font-weight: 900;
    color: rgba(193, 154, 58, 0.07);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* Gentle radial gold accents — top-right + bottom-left. */
body.login_bg .login_wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(193, 154, 58, 0.10) 0%, transparent 55%),
        radial-gradient(circle at bottom left, rgba(193, 154, 58, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Keep the form above the decorations. */
body.login_bg .login_box {
    position: relative;
    z-index: 1;
}

/* Footer area: single brand link, centered, subtle. */
body.login_bg .login_box .login_tool {
    margin-top: 18px;
    padding: 14px 0 0;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.login_bg .login_box .login_tool a.brand_link {
    width: auto;
    float: none;
    display: inline-block;
    height: auto;
    background: none;
    color: #5a6987;
    font-size: 16px;
    letter-spacing: 0.18em;
}
body.login_bg .login_box .login_tool a.brand_link:hover {
    color: #c19a3a;
}

/* Hide legacy decoration that was bound to the old bg image. */
body.login_bg .wel { display: none; }

/* Tablet / mobile — calligraphy shrinks, card centers. */
@media screen and (max-width: 960px) {
    body.login_bg::before { font-size: 70vw; left: -10vw; opacity: 0.6; }
    body.login_bg::after { font-size: 0.95rem; left: 5vw; bottom: 3vh; letter-spacing: 0.3em; }
    body.login_bg .login_wrap { right: 50%; transform: translate(50%, -50%); width: 86vw; max-width: 380px; }
}