/*!
*******************************************************************************************************
* ATTENTION: THIS IS NOT FREE EDITION. FOR COMMERCIAL PURPOSES, PLEASE PURCHASE A COMMERCIAL LICENSE! *
*******************************************************************************************************
* File: Centcount Analytics Caesar Edition CA Common CSS Code                                         *
* Version: 2.0 Caesar                                                                                 *
* Author: WM Jonssen                                                                                  *
* Date: 04/02/2021                                                                                    *
* Copyright 2015-2021 WM Jonssen <wm.jonssen@gmail.com> - All rights reserved.                        *
* License: Dual licensed under the Free License and Commercial License.                               *
* Website: https://www.centcount.com                                                                  *
*******************************************************************************************************
*/
 
@charset "utf-8";

html, body{font-size:12px; font-family:'Microsoft Yahei',Arial,Verdana; color:#555; padding:0px; margin:0px; border:0px; background-color:#fff;}
*{color:#555; font-family:"Microsoft Yahei",Arial,Verdana; font-weight:400; padding:0px; margin:auto; border:0; border-radius:0;}
h1, h2, h3, h4{color:#222; margin-top:15px; margin-bottom:15px;}
h1{height:auto; line-height:50px; font-size:32px; font-weight:600; letter-spacing:1px;}
h2{font-weight:500; letter-spacing:0px; color:#f63;}
a{color:#0f84c6; text-decoration:none; word-wrap:break-word;}
a:hover{text-decoration:underline;}


.errmsg, .successmsg, .retmsg, .successbtn{width:calc(100% - 32px); height:auto; font-size:13px; line-height:18px; text-align:center; color:rgb(181,68,123); display:none; padding:15px; background-color:rgb(242,222,222); border-radius:4px; border:rgb(235,204,209) 1px solid; word-wrap:break-word; float:left;}
.successmsg, .successbtn{width:calc(100% - 26px); display:block; padding:12px;}
.successbtn{border-color:rgb(6,105,161); background-color:rgb(16,151,228); color:#fff; margin-top:15px; font-size:16px;}
.successbtn:hover{opacity:0.7; text-decoration:none;}
.retmsg{display:block; text-align:left;}



#header{width:100%; min-width:360px; height:auto; font-size:12px; text-align:left; color:#aaa; background-color:#fff; float:left; border-top:#f63 3px solid; border-bottom:#ddd 1px solid; position:fixed; z-index:99999999;}

#logo{width:auto; height:auto; line-height:16px; font-size:12px; text-align:left; color:#222; float:left; padding:5px;}
img.mid{vertical-align:middle; float:left; height:32px}

#guide{width:auto; height:auto; font-size:13px; text-align:right; color:#aaa; float:right; padding:0px; padding-left:10px; padding-right:5px;}
.guidebtn,.guidespan,.langbtn,.lastbtn{width:auto; height:42px; line-height:42px; color:#4283C4; text-align:center; padding-left:10px; padding-right:10px; font-size:14px; float:left;}
.langbtn{background:url(../images/menu.png) top right no-repeat; padding-right:20px; background-position:right 15px;}
.lastbtn{padding-right:20px; padding-left:20px;}
.guidebtn:hover,.langbtn:hover,.lastbtn:hover{text-decoration:none;}
.guidespan{height:16px; line-height:16px; background:none; padding-right:10px; color:#333;}

#guide ul{background-color:#fff; list-style:none; width:auto; height:auto; float:right; margin:0; padding:0;}
#guide li{background-color:#fff; width:auto; height:auto; font-size:14px; float:left;}
#guide li:hover{background-color:#eee;}

#guide li ul{display:none; width:auto; height:auto; border:#ddd 1px solid; position:absolute; z-index:999; margin-right:5px; right:0px; background-color:#fff; overflow:hidden; margin-top:42px;}
#guide li:hover ul{display:block;}
#guide li li {display:block; width:auto; height:auto; float:none; text-align:left; overflow:hidden;}

#guide li ul li a{display:block; font-size:14px; text-align:left;}
#guide li ul li a:hover{text-decoration:none; background-color:#eee;}

#title, .title{width:100%; min-width:360px; height:80px; font-size:16px; text-align:center; float:left; border-bottom:#ddd 1px solid; font-weight:700; letter-spacing:0px; background-color:#f7f7f7; margin-top:46px;}

#bodyframe{border-bottom:#ddd 1px solid; text-align:center; padding-top:50px; padding-bottom:50px; width:100%; height:auto; min-width:520px; min-height:calc(100vh - 292px); float:left; font-size:14px; display:flex; justify-content:center; align-items:center;}

.framebody{margin:auto; text-align:center; width:490px; min-width:490px; height:auto; font-size:12px;}
p{font-size:14px; color:#333; font-weight:300;}

.regnotice{width:100%; height:auto; margin:auto; padding-top:20px; text-align:center; float:left;}
.noticetext{width:auto; max-width:720px; min-width:300px; height:auto; line-height:18px; text-align:left; font-size:13px; padding:0px; font-weight:400;}



#footer{font-size:12px; line-height:18px; font-family:Arial,"Microsoft Yahei",Verdana; background-color:#f7f7f7; color:#2c7cb0; text-align:center; float:left; width:100%; min-width:360px; padding-top:20px; padding-bottom:20px;}
.footbar{width:100%; max-width:1200px; float:none; margin:auto; padding:0px;}
.footmenu, .footbtn{width:calc(20% - 90px); margin:30px; margin-top:0px; margin-left:60px; font-size:12px; line-height:24px; float:left;}
.footbtn{width:calc(100% - 90px); text-align:left; margin-bottom:40px;}
.footbtn a{width:32px; height:32px; text-align:left; float:left; margin-right:10px; opacity:1; border-radius:4px; overflow:hidden;}
.footbtn a:hover{opacity:0.8;}
.footmenu span{width:100%; text-align:left; float:left; font-size:14px; line-height:28px; color:#333;}
.footmenu a{width:100%; text-align:left; float:left; color:#2c7cb0;}
.copyright{width:100%; line-height:24px; float:left; text-align:center; font-size:12px; color:#777;}



.section{width:100%; height:auto; font-size:14px; margin:auto; text-align:center; float:left; overflow:hidden;}
.sImgL, .sImgR, .sImgC, .sImgLC, .sImg3L, .sImg3R, .sTxtC, .sTxtL, .sTxtR, .sBoxC, .sLogL, .sLogR{width:50%; height:450px; margin:auto; background-color:#f7f7f7; text-align:left; float:right; overflow:hidden;}
.sImgL, .sImgC, .sImgLC{background-position:top left; background-repeat:no-repeat; background-size:100% auto; float:left;}
.sImgR{background-position:top right; background-repeat:no-repeat; background-size:100% auto; float:right;}
.sImgC{background-color:#fff; background-size:100% 100%; background-position:center;}
.sImgLC{background-color:#fff; background-size:100% auto;}
.sImg3L, .sImg3R{width:calc(33.33% - 1px); height:300px; background-color:#eee; background-size:50% 50%; background-position:center; background-repeat:no-repeat; border-left:#ccc 1px solid;}
.sImg3R{border:0px; background-size:40% 40%;}

.sTxtL{text-align:right; float:left;}
.sTxtC{width:100%; height:auto; padding:0px; text-align:center; float:left;}

.sBoxC{height:auto; background-color:#fff; float:left; overflow:hidden;}
.sLogL, .sLogR{height:auto; float:left;}
.logoImg{width:550px; height:550px; margin:auto; margin-top:-50px;}

.sText{width:70%; min-width:330px; height:auto; padding:45px; padding-top:60px; margin:auto; text-align:left; float:none;}
.pBoxL, .pBoxC{width:100%; line-height:28px; font-size:16px; font-weight:400; font-family:Roboto,Arial,"Microsoft Yahei",Verdana; float:left;}
.pBoxC{padding-top:15px; padding-bottom:30px;}
.sWord{max-width:960px; line-height:42px; margin:auto; color:#fff; font-family:Arial,Tahoma,"Microsoft Yahei",Serif; font-size:24px; font-weight:500; letter-spacing:1px;}

.bBox{width:250px; text-align:center; margin:auto; padding:30px;}
.word{font-size:15px; font-family:Tahoma,"Microsoft Yahei",Arial,Verdana; color:#555; letter-spacing:1px;}
.btnB, .btnR, .btnG, .btnO{opacity:0.85; display:block; margin:auto; text-align:center; width:220px; height:18px; line-height:18px; margin-top:10px; margin-bottom:10px; padding:10px; padding-top:11px; background-color:#0f84c6; color:#fff; font-size:16px; border-radius:4px; float:none;}
.btnR{background-color:rgb(229,14,14);}
.btnG{background-color:#070707;}
.btnO{background-color:#e55827;}
.btnB:hover, .btnR:hover, .btnG:hover, .btnO:hover{opacity:1; text-decoration:none;}
.bImgC{width:auto; height:480px; margin:30px;}
.lnkBtn{margin-top:15px; float:left; font-weight:bold;}

.sRed{background-color:#e50e0e;}
.sBlue{background-color:#448aff;}
.sGray{background-color:#f7f7f7;}
.sWhite{background-color:#fff;}
.sP30{padding:90px;}
.sP15{padding:15px;}
.p45{padding-top:45px; padding-bottom:10px; letter-spacing:0px;}
.p60{padding-top:60px; padding-bottom:60px;}
.bTop{border-top:#ddd 1px solid;}
.bBot{border-bottom:#ddd 1px solid;}
.fR, .tR{float:right;}
.fL, .tL{float:left;}
.fN{float:none;}
.tC{text-align:center;}
.h545{height:545px;}
.h480{height:480px;}
.h475{height:475px;}
.mh450{max-height:450px;}
.h415{height:415px;}
.NoBorder{border:0px;}
.NoBB{border-bottom:0px;}
.NoBT{border-top:0px;}
.WBA{word-wrap:break-all;}





td{width:100%; height:auto; line-height:16px; font-size:14px; text-align:left; margin-top:10px; margin-bottom:10px; float:left;}
tr, tbody, table, form{width:100%; border:0px; margin:0px; padding:0px; outline-style:none; outline-width:0px; border-spacing:0px; float:left;}
input, button, select{width:100%; height:50px; line-height:50px; color:#333; border:#777 1px solid; float:left; padding-left:5px; padding-right:5px; font-size:16px; outline-style:none; outline-width:0px; ime-mode:disabled;}
input{width:calc(100% - 12px); background-size:30px;} 

textarea{width:100%; font-size:14px; font-weight:300; color:#333; border:#777 1px solid; resize:none; float:left; padding-left:5px; padding-right:5px;}
button{opacity:0.85; background-color:#0f84c6; color:#fff; border-color:#0c86e7; border-radius:5px;}
button:hover{opacity:1; border-color:#08538e;}

.email, .pwd, .short{width:calc(100% - 57px); padding-left:50px; background:url(../images/login.svg) top left no-repeat; background-size:42px auto; background-position:2px -6px; border-radius:7px;}
.pwd{background-position:2px -48px;}
.short{background-position:2px -90px; width:180px; margin-right:15px; border-radius:0px;}
.vcode{width:237px; height:52px; float:right;}

.chk{width:16px; height:16px; margin-right:5px;}
.name{width:65px; font-size:16px; text-align:right; float:none;}
.sug{width:100%; height:30px; line-height:30px; font-size:18px; text-align:center; margin-top:0px; float:left;}

.suggestion{text-align:left; width:auto; float:left;}
.strength{width:255px; height:16px; background-image:url(../images/user_pw_strength.svg); background-size:256px 64px; background-repeat: no-repeat; float:right;}
.fresh{width:auto; height:34px; float:right; margin:0; padding:0;}



.frameform{width:100%; margin:auto; text-align:center; float:left;}

.frameagree{width:100%; height:100%; display:none; position:fixed; top:0; left:0; text-align:center; margin:auto; background:rgba(0,0,0,1); float:left;}
.agreebox{width:auto; max-width:600px; min-width:330px; height:-moz-calc(100% - 120px); height:-webkit-calc(100% - 120px); height:calc(100% - 120px); line-height:20px; text-align:justify; font-size:14px; margin:auto; background:#eee; color:#555; float:none; overflow-y:auto; border-radius:5px;}
.agreebtn{width:100%; height:60px; line-height:60px; font-size:16px; font-weight:700; color:#fff; text-align:center; margin:auto; background-color:transparent; float:left;}

.mTop{margin-top:0px;}
.mTop15{margin-top:15px;}
.dShow{display:block;}

.rbtBtn{width:auto; padding:15px; text-align:left; font-size:12px; color:#888;}



@media only screen and (max-width: 1920px) {
.sImgL, .sImgR{background-size:100% 100%;}
.sImgC{background-size:auto 100%;}

h1{line-height:50px; font-size:28px;}
#title, .title{height:80px;}
#bodyframe{min-width:420px; min-height:calc(100vh - 292px); padding-top:50px; padding-bottom:50px;}
.framebody{width:390px; min-width:390px;}
.email, .pwd, .short{width:calc(100% - 47px); padding-left:40px; background-size:32px auto; background-position:2px -4px; border-radius:5px;}
.pwd{background-position:2px -35px;}
.short{background-position:2px -69px; width:140px; border-radius:0px;}
.vcode{width:187px; height:42px;}
.name{font-size:14px;}
.sug{height:24px; line-height:24px; font-size:16px;}
input, button, select{height:40px; line-height:40px; font-size:16px;}
}


@media only screen and (max-width: 1800px) {
.sImgL, .sImgR{background-size:auto 100%;}
.sImgLC{background-size:200%;}
}


@media only screen and (max-width: 1280px) {
.sText{width:auto; padding:30px;}
}


@media only screen and (max-width: 1000px) {
.sBoxC, .sImgL, .sLogL, .sImgR, .sImgC, .sImgLC{width:100%; float:left;}
.sImgLC{background-size:100%;}
.sBoxC{text-align:center;}
.sTxtL, .sTxtR, .sLogR{width:100%; height:auto; float:left;}
.sText{padding:45px; float:left;}
.fR{max-width:640px; float:left; margin:auto;}
.bBox{padding:30px;}
.logoImg{width:420px; height:420px; margin-top:30px;}
.guidespan{display:none;}
.sP30{padding:60px;}
.p60{padding-top:0px; padding-bottom:30px;}
.footmenu{width:calc(33% - 60px); margin:15px; margin-left:45px;}
.footbtn{width:calc(100% - 60px); margin:15px; margin-left:45px; margin-bottom:40px;}
}


@media only screen and (max-width: 640px) {
*{font-weight:400;}
#logo{width:30px; overflow:hidden; padding-right:0px;}
#guide{padding-left:0px;}

h1{line-height:40px; font-size:24px; font-weight:bold;}
h2{font-weight:bold;}
#title, .title{height:70px;}
#bodyframe{min-width:360px; min-height:calc(100vh - 262px); padding-top:40px; padding-bottom:40px;}
.framebody{width:330px; min-width:330px;}
.email, .pwd, .short{width:calc(100% - 47px); padding-left:40px; background-size:32px auto; background-position:2px -4px; border-radius:5px;}
.pwd{background-position:2px -35px;}
.short{background-position:2px -69px; width:110px; border-radius:0px;}
.vcode{width:157px; height:42px;}
.name{font-size:14px;}
.sug{height:20px; line-height:20px; font-size:14px;}
input, button, select{height:40px; line-height:40px; font-size:14px;}

.sWord{font-size:20px; line-height:32px;}
.sImgL, .sImgR, .sImgLC{width:100%; height:360px; float:left; background-size:auto 100%; background-position:top left;}
.sImgC{width:100%; height:360px; float:left;}
.sImgLC{background-size:200%;}
.sLogL{width:100%; float:left;}
.bBox{padding-left:15px; padding-right:15px;}
.sText{width:auto; padding:15px; padding-top:60px;}
.sP30{padding:30px;}
.p45{padding-top:30px; padding-bottom:0px;}
.logoImg{width:300px; height:300px;}
.footmenu{width:calc(50% - 45px); margin:15px; margin-left:30px; margin-right:0px;}
.footbtn{width:calc(100% - 45px); margin:15px; margin-left:30px; margin-right:0px; margin-bottom:35px;}
.sImg3L, .sImg3R{height:150px;}
.lnkBtn{float:none;}
}



