@charset "utf-8";
/************************************************************************
 * 公司	: suyee inc.
 * 網址	: www.suyee.net.cn
 * 作者QQ: 新月(46780956)
 * 日期	: 20230307
************************************************************************/
* { margin:0; padding:0; list-style:none; }
html { height:100%; width:100%;}
body {
    height:100%; width:100%;
    margin:0; padding:0; position:relative;
    transition:all ease-out 0.3s;
    color:#555; font-family: Arial,"Microsoft YaHei","微软雅黑","宋体"; font-size:16px; line-height:1.4;
    background: #FFF;
}
/* body:after{ content: "";position:absolute; top:0; right:0; bottom:0; left:0; background: rgba(255,255,255,0.8);} */
div, h1, h2, h3, h4, h5, h6 ,p, form, label, input, img, span,ul,ol{margin:0; padding:0; list-style-type:none;}
img {border:0; max-width: 100%; height: auto; width: auto\9; /* ie8 */}
.spacer{ clear:both; font-size:0; line-height:0; height:0;}
.clear:after,#clear:after {content: "";display: table;clear: both;font-size: 0;line-height: 0;height: 0;}
a:link {color: #39F;	text-decoration: none; transition:all ease-out 0.3s;}
a:visited {text-decoration: none;	color: #39F;}
a:hover {text-decoration: none ;	color: #39C;}
a:active {text-decoration: none;	color: #39F;}

.txta{ font-size:14px; padding:0 20px; text-align: center;}
.paddingTop35 {	padding-Top: 35px;}
.paddingTop40 {	padding-Top: 40px;}
.bg_body{display:block; width:98%; max-width:500px; margin:0 auto; background: rgba(255,255,255,0.85);
        position: absolute; z-index:99;top:50%; left:50%; transform: translate(-50%,-50%);
        border-radius:15px; overflow:hidden;box-shadow: 0 0 30px #333;
    }
.bg_body:after{ content: "";clear: both;font-size: 0;height: 0;}

.body_top{position:fixed; top: 0; left: 0; right: 0; background: #FFF; z-index: 11; box-sizing: border-box;}
.body_top dl.top_left{float: left; display: block; padding-left: 15%; }
.body_top dt{float:left; display: inline-block; max-width:200px ;  }
.body_top dd{float:left; display: inline-block; font-size: 18px; line-height: 50px; }

ul.top_right{float:right;  padding-right: 15%; background:#F00;}
ul.top_right li {float:left;font-size: 16px; line-height: 50px; padding-left:25px; }
ul.top_right li a{color:#FFF;}
/*ul.top_right li a:hover{ color:#555;}
ul.top_right li a span{ position:absolute; left:-5px; top:-5px; background:#F00; color:#FFF; border-radius:100%; font-size:12px; line-height:20px; width:20px;height:20px; text-align:center; } */

/* 以上全局，以下 左右框 */
.body_left,.body_right{width: 50%; height: 100vh; float: left; position: relative;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
.body_100{width: 100% !important; }
.body_left{ background: url(../images/maoshuuan02.jpg)  no-repeat center center ;}
.body_right{ background: url(../images/qiche02.jpg)  no-repeat center center ;}
.body_left:after{ content: "";position:absolute; top:0; right:0; bottom:0; left:0; background: rgba(255,255,255,0.8); z-index: 0;}
.body_right:after{ content: "";position:absolute; top:0; right:0; bottom:0; left:0; background: rgba(0,0,0,0.5);z-index: 0;}

.body_title{width: 100%; box-sizing: border-box;float: left; display: block; background: rgba(255,255,255,0.8); color: #f21600;position: relative;z-index: 1;}
.body_title dt{float:left; display: inline-block; max-width:220px ;  }
.body_title dd{float:left; display: inline-block; font-size: 18px; line-height: 50px; }

#login_box:after,#login_left:after,#login_right:after{ content: "";clear: both;font-size: 0;height: 0;}
#login_box{ position: absolute; z-index:99; top:50%; left:50%; transform: translate(-50%,-50%);
    max-width:800px; width:100%;
 /* border-radius:10px; overflow:hidden; box-Shadow:0 0 15px #ccc;width:900px;  */
}
.login_list{float:left; width: 100%; box-sizing: border-box; padding: 10%;}
.login_list li{
    float:left; width:48%;  background: #F5F5F5;  position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,.13); border: #CFCFCF 1px solid; box-sizing: border-box;
    padding: 15px 1%; margin: 10px 1%;
}
.login_list li i{ position: absolute; left: 15px; top: 15px;font-size: 38px;color:rgba(0,0,0,0.25); }
.login_list li h2{font-size: 18px; font-weight: normal; line-height: 22px;  color:#333; text-align: left; padding-left: 50px; padding-bottom: 15px;}
.login_list li h2 span{font-size: 16px; font-weight: normal; line-height: 22px;  color:#666; }



/* 彈出的登錄框 */
#login_user{ position: absolute; z-index:99; top:50%; left:50%; transform: translate(-50%,-50%);
    width:100%; max-width: 880px; height: 100vh;
 /* border-radius:10px; overflow:hidden; width:900px; box-Shadow:0 0 15px #ccc; */
}

#login_left { background:  rgba(35,38,46,0.75); background-size: cover; position: absolute;top:0; right:50%; bottom:0; left:0; box-sizing: border-box;padding:22px 35px;}
#login_left figure{ float:left; width:100%; text-align:center; padding:80px 0 25px 0; font-size: 2em;line-height: 1.5;color:#FFF; font-weight: bold;}
#login_left figure img{ display:block; margin:0 auto; /*width:100%; max-width:100px; border-radius:100%;box-shadow: 0 0 15px #FFF;*/}
#login_left h2{width:100%; text-align:center; font-size:1.4em; line-height:1.4;  color:#FFF; font-weight: normal;}
#login_left h3{width:100%; text-align:center; font-size:1.2em; line-height:1.4;  color:#FFF; font-weight: normal;}
#login_left p{position: absolute; left:0; right:0; bottom:15px; font-size:0.8em;color:#ddd;}
#login_left a{color:#ddd;}
#login_left a:hover{color:#ccc;}

#login_right{ float:right; width:50%; min-height:350px; background: rgba(255,255,255,0.75);box-sizing:border-box;}
#login_right h2{width:100%; font-size:1.3em; line-height:1; padding:50px 0 25px 0; color:#333; text-align: center; text-indent: 0; font-weight:bold;}

/*#login_right form{ float:left; padding-top:80px;}
#login_right form p{ float:left; width:100%; height:35px; font-size:14px; margin-bottom:22px;text-align:left; }
#login_right form input{ color:#333; padding:2px 2px 2px 7px; border:#CCCCCC 1px solid; line-height:30px; border-radius:5px; width:175px;}
input.inname{ background:url(../images/use.png) right center no-repeat #FFF; }
input.inpass{  background:url(../images/pass.png) right center no-repeat #FFF; }*/
.w220 {    width: 220px !important;}
.w100{    width: 123px  !important; margin:0!important;}
.Sub_mit{
     border:none;
     width:100%;
    border-radius:5px;font: bold 18px/43px "微软雅黑","宋体",Arial; color:#FFF; cursor:pointer;word-spacing:2px; letter-spacing: 2px;
	background: linear-gradient(to right,#f21600 0%,#f21600 100%);
	-webkit-transition: -webkit-box-shadow ease-in-out .15s;
	-o-transition: box-shadow ease-in-out .15s;
	transition: box-shadow ease-in-out .15s}
.Sub_mit:hover{ background: linear-gradient(to right,#f21600 50%,#f21600 100%); }
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{opacity:0.3;}

.auth-alert-item{padding:0 0 10px;}
.auth-alert{border-radius:6px;padding:10px 14px;font-size:13px;line-height:1.5;}
.auth-alert-error{background:#fff2f0;border:1px solid #ffccc7;color:#cf1322;}

/* === 登錄 Tab === */
.login-tab{padding:0;border:none;background:transparent;}
.login-tab-title{
    display:flex;list-style:none;margin:0;padding:0;
    background:rgba(255,255,255,0.5);
    border:none !important;border-bottom:1px solid #e8e8e8 !important;
}
.login-tab-title li{
    flex:1;text-align:center;
    margin:0 !important;padding:0 !important;
    font-size:15px;font-weight:500;line-height:46px;
    color:#999;cursor:pointer;
    border:none !important;border-bottom:2px solid transparent !important;
    transition:color .2s,border-color .2s;
    box-sizing:border-box;
}
.login-tab-title li i{margin-right:5px;font-size:14px;}
.login-tab-title li:hover{color:#666;background:transparent !important;}
.login-tab-title .layui-this{
    color:#f21600 !important;
    border-bottom-color:#f21600 !important;
    background:transparent !important;
}
.login-tab-title .layui-this:after{
    display:none !important;
}
.login-tab-content{padding:20px 30px 10px;border:none !important;background:transparent;}
#login_right .layui-tab>.layui-tab-title{border-bottom:1px solid #e8e8e8 !important;}
#login_right .layui-tab>.layui-tab-title li{border:none !important;border-bottom:2px solid transparent !important;}
#login_right .layui-tab>.layui-tab-title .layui-this{border-bottom-color:#f21600 !important;}
#login_right .layui-tab>.layui-tab-content{padding:50px 30px 10px;border:none !important;}

/* === 微軟登錄面板 === */
.microsoft-tab-panel{
    padding:30px 0 10px;text-align:center;
}
.microsoft-icon-wrap{
    width:72px;height:72px;margin:0 auto 20px;
    border-radius:50%;
    background:linear-gradient(135deg,#f21600 0%,#ff4d4f 100%);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 20px rgba(242,22,0,0.25);
}
.microsoft-icon-wrap i{font-size:32px;color:#fff;}
.microsoft-tab-tip{
    margin:0 0 28px;font-size:14px;line-height:1.7;color:#888;
}
.microsoft-login-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:100%;max-width:280px;
    border-radius:6px;border:none;
    background:#f21600;
    color:#fff !important;
    font-size:15px;font-weight:600;
    line-height:46px;letter-spacing:.5px;
    box-shadow:0 4px 12px rgba(242,22,0,0.3);
    transition:background .2s,box-shadow .2s,transform .1s;
}
.microsoft-login-btn i{font-size:20px;margin-right:10px;}
.microsoft-login-btn:hover{
    background:#d41400;color:#fff !important;
    box-shadow:0 6px 16px rgba(242,22,0,0.35);
    transform:translateY(-1px);
}
.microsoft-login-btn:active{transform:translateY(0);}

#login_right form .inname:focus,
#login_right form .inpass:focus{border: 1px solid #f21600; outline:0;  }

#footer{ float:left; width:90%; text-align:center; font:normal 12px/25px "Arial","宋体";  color:#ccc; padding-top:12px; }
#footer a{   color:#ccc; padding:5px; }
#footer a:hover{   color:#999;  }

/* 自適應調整 */
@media screen and (max-width:1370px){
    .login_list{ padding: 1%;}
    .body_top dl.top_left {padding-left: 2%;}
    ul.top_right {padding-right: 2%;}
}



@media screen and (max-width:600px){
    .body_top{position:static; float: left; width: 100%;}
    .body_top dl.top_left{ padding-left: 0; }
    .body_top dt{ max-width:180px ;  }
    .body_top dd{display: none; font-size: 0;  }

    ul.top_right{padding-right: 8px; }
    ul.top_right li {font-size: 16px; line-height: 41px; padding-left:8px; }


    .body_left{width: 100%; height: auto;     }
    .body_right{width: 100%; height: auto;     }
    .body_left:after{ display: none; }
    .body_right:after{ display: none;}
    #login_box{  width:100%; float: left; position: static; transform: none; }
    .login_list li {width: 98%;    margin: 1%; }
    #login_left { width:100%;position: static; padding: 15px 25px;}
    #login_left figure{  padding:0 0 15px 0; }
    #login_left h2 {font-size: 1.4em;}
    #login_right{  width:100%;min-height: 50px;}
    #login_right h2 { padding:15px 0;}
    .login-tab-title{flex-direction:row;}
    .login-tab-content{padding:20px 18px 10px;}
    .microsoft-tab-panel{padding:20px 0 5px;}
    .microsoft-icon-wrap{width:56px;height:56px;margin-bottom:14px;}
    .microsoft-icon-wrap i{font-size:24px;}
    .microsoft-login-btn{max-width:100%;font-size:14px;line-height:42px;}

}