*{margin: 0;padding: 0;outline: none;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: PingFang SC,Verdana,Microsoft YaHei;}
ul,li{ list-style: none;}
a img{ border: none;}
a{ text-decoration: none;-moz-transition:all 0.3s ease 0s;-webkit-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition:all 0.3s ease 0s;}
html{}
body{ /*background:linear-gradient(#110860 5%,#01498f 10%,#028BDF 75%) ;*/ background:linear-gradient(#2354c1, #57b9f5);}
.container{ width: 1200px; margin: 0 auto; position: relative;overflow: hidden; padding: 0 0 100px 0;}
h1{background: url(/aitoolbox/img/title.png) no-repeat; width: 350px; height:200px; background-size:contain;display: block;position: absolute; top: 120px; left: 0;}
.bg{background: url(/aitoolbox/img/iconbg.png) no-repeat; width: 200px; height:200px; background-size:contain;display: block;position: absolute; top: 100px; left: 360px;}
.cnkilogo{background: url(/aitoolbox/img/cnkilogo.png) no-repeat;width: 140px; height:50px; background-size:contain;display: block; position: absolute; top: 20px; left: 15px;}
.bbg{background: url(/aitoolbox/img/bbg.png) no-repeat;width: 100%;background-size:cover; height:500px;position: absolute;top:0px; opacity: 0.5;}
.titleS{position: absolute; top:260px;font-size: 20px;color:#28eff7;left: 10px;}
.subbtn{ display: block; width: 140px; height: 40px; line-height: 40px; text-align: center; background: linear-gradient(#0046ff,#01d1c8); color:#fff; font-size: 18px; font-weight: bold; border-radius: 5px;box-shadow: 0px 0px 10px #110760;position: absolute; right: 0; top: 20px; }
a:hover.subbtn{background: linear-gradient(#154bdb,#138782); }
.main{padding: 530px 0 0 0;color: #fff;}
h2{background: linear-gradient(to right, #073e87,#063f8800); padding: 0 0 0 50px;position: relative; line-height: 50px; border-radius: 5px 0 0 5px;margin: 0 0 30px 0;}
h2::before{content: ""; background: url(/aitoolbox/img/list.png) no-repeat; background-size:contain; width: 40px; height: 40px; display: block; position: absolute; left: 10px; top: 5px;}
.info{margin: 0 0 30px 0; border-radius: 8px;text-align: center; line-height: 50px;color:#fda645;border: 1px solid #ff8700;font-size: 18px;}
.zone {padding: 30px 0;}
.zone p {margin: 0 0 30px 0;}
.zone img{ width: 400px; height: auto; display: block; border-radius: 8px; margin: 0 auto;border:10px solid #ffffff33; box-shadow: 10px 10px 10px #004c8b;}
.zone2{ background: linear-gradient(to right, #0046ff,#01d1c8);padding: 20px 40px; border-radius: 10px; line-height: 24px;box-shadow: 0px 0px 10px #004c8b; width: 600px;margin: 020px auto;}
.zone2 h3{ line-height:40px; text-align: center;font-size: 20px;margin: 0 0 10px 0;}
.zone2 p{text-align: justify;}
.zone table{width:600px;text-align: center;margin: 0 auto;}
.zone table td{line-height: 60px;font-size: 18px;}
img.qrimg{ width: 150px; }
.subbtn2{ display: block; width: 200px; height: 36px; line-height: 36px; text-align: center; background:#ffffffbd; color:#0064a4; font-size: 16px; font-weight: bold; border-radius: 5px; margin:20px auto; }
a:hover.subbtn2{box-shadow: 0px 0px 10px #0266a5; background:#fff;}

/* login */

.bbg2{background: url(/aitoolbox/img/bbg.png) no-repeat;width: 100%;background-size:cover; height:400px;position: absolute;top:150px; opacity: 0.4;}
.cnkilogo2{background: url(/aitoolbox/img/cnkilogo.png) no-repeat;width: 140px; height:50px; background-size:contain;display: block; position: absolute; top: 20px; left:30px;}
.loginbg{background:#028BDF ;}
.container2{background:linear-gradient(#110860,#028BDF) ;overflow: hidden;padding: 0 0 60px 0;}
.loginOuter{width: 800px; height: auto;overflow: hidden; margin:100px auto 0 auto;border-radius: 8px;padding: 14px; background: #ffffff2e;box-shadow: 0px 0px 10px #00395d;position: relative;z-index: 9999;}
.login{width: 800px; height: auto; border-radius: 8px;background: #fff;overflow: hidden;}
.loginL{ width:300px; float: left;background:linear-gradient(to right bottom, #1662b787,#e3eefe);padding: 30px 0 60px 0;}
.loginR{ width: 500px; float: right;position: relative;padding: 100px 0 0 0;}
.loginL h2{background: linear-gradient(to right, #073e87,#063f8800);padding: 0 0 0 30px;line-height: 50px; margin: 0 0 30px 0;color: #fff;border-radius: 0;}
.loginL h2::before{display: none;}
.loginL p{margin: 0 0 30px 0; padding:30px; font-size: 14px; text-align: justify; color:#124b6b;line-height: 24px;}
.loginL span{display: block;margin: 0 0 10px 0;font-size: 14px; font-weight: bold;padding: 0 0 0 30px;text-indent: 30px;position: relative;color:#073e87;}
.tel::before{content: ""; width:20px;height: 20px; display: block;position: absolute; left: 32px; top:0;background: url(/aitoolbox/img/tel.png) no-repeat; background-size: cover; }
.qq::before{content: ""; width:20px;height: 20px; display: block;position: absolute; left: 32px; top:0;background: url(/aitoolbox/img/qq.png) no-repeat;  background-size: cover;}
.loginTxt,.loginPass{ width: 380px; height: 40px; line-height: 40px; padding: 0 10px; border-radius: 5px; border: 1px solid #ccc;margin: 0 auto 20px auto; display: block;font-size: 16px;}
.loginBtn{ background:linear-gradient(to right bottom, #0c4e90,#88c7ff); width: 400px; height: 40px;font-size: 18px; color: #fff;border-radius: 5px; border: none;margin:20px auto 0 auto; display: block; cursor: pointer;box-shadow: 0 0 5px #a2a2a2;font-weight: bold; text-align: center;line-height: 40px;}
.checkb{width: 16px;height: 16px;border: 1px solid #ccc;}
.fogLink{text-decoration: none; color:#0c4e90; font-size: 14px;padding: 0 0 0 10px;margin: 0 0 20px 0; display: inline-block;vertical-align:3px;}
.ver{margin: 0 auto; width: 400px;overflow: hidden;}
.verCode{ width:230px;float: left;border-radius: 5px ;}
.verCodeZone{ width:112px;float: right; height: 42px; background: #eee; line-height: 40px;border-radius: 5px;padding: 0 5px;text-align: center;}
.testBtn{color: #09c; font-size: 14px;position: absolute; right: 50px; top: 46px;text-decoration: underline;text-underline-offset:5px;}
a:hover.testBtn{color:#0c4e90;}
.loginR h4{  font-size: 20px;position: absolute; left: 50px; top: 42px;}

/*  list  */

.main2{   position: relative;overflow: hidden; min-height: 400px; width: 1200px; height: auto; background: #fff; padding: 20px 0 0 0; }
.header{ height: 100px; line-height: 80px; background:linear-gradient(to right bottom, #0c4e90,#88c7ff); box-shadow: 0px 0px 10px #ccc;padding: 15px 0 0 0; }
.header h1{color: #fff;  font-size: 28px; padding: 0 0 0 240px;float: left;position: relative;top: 0; left: 0; background: none; width: auto; height: auto;}
.header h1::before{content: "";width: 171px;height: 60px;display: block;position: absolute;left: 33px; top: 8px;background: url(/aitoolbox/img/cnkilogo.png);background-size: cover;}
.header span{color:#fff; float: right; padding: 0 30px 0 0;}
.header span a,.header span b{margin: 0 14px; color:#fff;}
.header span a{color:#326193;}
.header span b {text-decoration: underline; text-underline-offset:5px;}
.header span b samp{font-size: 16px;}
.header span a:hover{ color:#16477a;}
.main_tt{ border-bottom: 1px solid #eee; padding:10px 20px; }
.main_tt h2{font-size:18px; font-weight: 400;text-indent: 20px;}
.main_tt h2::before{content: "";  width: 6px; height: 26px; background:#3C628B; display: block;position: absolute; top:10px; left: 20px;}
.footer{background:#333; color: #fff; text-align: center; width: 100%;padding: 30px 0;font-size: 14px;}
.footer p{ width:400px; display: inline-block; margin: 0 60px;text-align: left; min-height: 120px;vertical-align: top;line-height: 24px;}
.footer p b{font-size: 18px; display: block;margin: 0 0 10px 0;}
.sel_journal{font-size: 12px;padding: 20px; }
.sel_journal_search{clear: both; overflow: hidden;}
.searchJournal{line-height: 30px;height: 30px;border: 1px solid #ccc; padding: 0 4px;border-radius: 2px;width: 250px;float: right;} 
.addBtn{display: inline-block;line-height: 40px;padding:0 10px; background: #4e8dca; color: #fff;font-size: 16px; text-align: center;border-radius: 5px; margin: 0 0 10px 0;}
a:hover.addBtn{ background:#285e93;}	
.sel_journal_main{padding: 20px 0;}
.sel_journal_main table{ font-size: 14px; width: 100%;}
.sel_journal_main table tr {background: #f7f7f7;}
.sel_journal_main table tr:nth-child(odd){background: #e7e7e7;}
.sel_journal_main table td,.sel_journal_main table th{line-height:24px;padding: 10px;}
.sel_journal_main table td{text-align: center;}
.sel_journal_main table thead tr{background:#f7f7f7 !important;}
.sel_journal_main table thead tr th:first-child{text-align: left;padding: 0 0 0 20px;}
.sel_journal_main table tbody tr th{font-weight: 400; text-align: left;padding: 0 0 0 20px;}
.sel_journal_main table a{color:#4e8dca; }
.sel_journal_main table a:hover{color:#285e93;}
.sel_journal_page{ line-height: 24px; text-align: center;padding: 10px 0;}
.sel_journal_page a{ display: inline-block;border-radius: 5px; color: #999;  text-align: center;  -moz-transition:all 0.3s ease 0s;-webkit-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition:all 0.3s ease 0s; width: 20px;  line-height: 20px;cursor: pointer;}
a.preBtn,a.nextBtn{color: #999;}
a.nowBtn{background: #4e8dca; color: #fff;}
.sel_journal_page a:hover{ background: #28b4e2; color: #fff;}
.jumperPg{border: 1px #ccc solid; background: #fff; width: 24px; height: 20px; line-height: 20px;text-align: center;margin: 0 5px;}

/* 修改  */

.layerEle{position: absolute;left:0;top: 105px;display: none; width:100%; height: 100%; z-index: 10000;}
.maskEle{width: 100%; height: 100%; left: 0; top: 0px; position: fixed; background:rgba(0,0,0,0.5);backdrop-filter:blur(2px); z-index: 20;}
.closebtn{ width: 30px; height: 30px; position: absolute; top: 10px;right:10px;transition: transform .2s;-moz-transition: transform .2s;	-webkit-transition: transform .2s;-o-transition: transform .2s; z-index: 9999;}
.closebtn::before,.closebtn::after {content: '';position: absolute;height: 2px;width: 18px;top: 15px;left: 7px;margin-top: -1px;background:  #999999;}
.closebtn::before {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
.closebtn::after {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
a:hover.closebtn{  transform:rotate(90deg);}
a:hover.closebtn::before,a:hover.closebtn::after {background: #5299CA;}
.layerEle_box_main{ width: 600px; margin: 0 auto; padding: 20px 0 0 0;}
.loginOuter{width: 500px; height: auto;overflow: hidden; margin:0 auto ;border-radius: 8px;padding: 14px; background: #ffffff2e;box-shadow: 0px 0px 10px #00395d;position: relative;z-index: 9999;}
.login{width: 500px; height: auto; border-radius: 8px;background: #ffffffbf;overflow: hidden;position: relative;padding: 100px 0 60px 0;}
.login h4{  font-size: 20px;position: absolute; left: 50px; top: 42px;}
.subbtn {display: block; width: 170px; height: 50px; line-height: 50px;text-align: center; background: linear-gradient(#0046ff, #01d1c8); color: #fff;font-size: 23px;font-weight: bold; border-radius: 5px;box-shadow: 0px 0px 10px #073d62; position: absolute;left: 50%; top: 420px; margin: 0 0 0 -85px;}
.main2{padding-bottom: 40px;}
.AD{width:1180px;  padding:20px 10px;background:#eaeef1;}
.AD table {margin: 0 auto;}
.AD table td{ width: 50%;vertical-align: top;}
.AD table td h4{ font-size: 18px; line-height:50px;}
.AD table td p{ padding:10px 0;font-size: 14px;}
.AD table td a{font-size: 14px; color: #09c;cursor: pointer;}
.AD table td a:hover{color: #004c8b;}
.AD table td a.loginBtn { background: linear-gradient(to right bottom, #0c4e90, #88c7ff); width: 350px; height: 36px; font-size: 18px; color: #fff;  border-radius: 5px; border: none; margin: 20px 0 0 0; display: block; box-shadow: 0 0 5px #a2a2a2; font-weight: bold;text-align: center;line-height: 36px;cursor: pointer;}
/*.layerEle2 .loginOuter,.layerEle2 .login{ width: 800px;}
.layerEle2 .login{padding: 0;}*/
.layerEle2 span{ margin: 0 0 10px 0;font-size: 14px; font-weight: bold;padding: 0 0 0 80px; position: relative;color:#073e87;}
.tel::before{content: ""; width:20px;height: 20px; display: block;position: absolute; left: 50px; top:0px;background: url(/aitoolbox/img/tel.png) no-repeat; background-size: cover; }
.qq::before{content: ""; width:20px;height: 20px; display: block;position: absolute; left: 50px; top:0px;background: url(/aitoolbox/img/qq.png) no-repeat;  background-size: cover;}
.darkZ{background: #bac1cf;padding: 30px 0;margin: 20px 0 0 0;}
.layerEle2 .login{padding: 100px 0 0 0;}
.layerEle3 .login{padding: 100px 0 50px 0;}
.layerEle3 .login p{padding: 0 50px 30px 50px;}
 


@media (max-width: 800px){
.container{width: 100%;}
.info{ width: 90%; line-height: 30px;display: block;margin: 0 auto;padding: 20px 10px; text-align: left;}
.zone p,h2,.zone2{width: 90%; line-height: 30px;margin: 0 auto;padding: 20px 10px;}
h2::before{display: none;}
.zone img{margin: 10px auto;}
.zone2 p{padding: 0 20px;}
.zone table{width: 100%;margin: 30px auto;}
.main2{width: 100%;}
.header h1::before{display: none; }
.header h1{padding: 0;text-align: center;margin: 0 auto;float: none;line-height: 60px;}
.header span{float: none;line-height: 30px; display: block; margin: 0 auto;text-align: center;padding: 0;font-size: 14px;}
.addBtn{  margin:0 auto; width: 140px; display: block;}
.sel_journal_main,.sel_journal_main table{width: 100%;}
.layerEle,.loginOuter,.ver{ width: 90%;}
.login{ width: 100%;}
.loginTxt, .loginPass,.loginBtn{ width: 80%;}
.layerEle2 span{display: block;}
.loginOuter{left:50%;transform: translate(-45%);}

}



.fadeinZone {display: block;animation: fadein 0.5s;animation-fill-mode: forwards;}
.fadeoutZone {animation: fadeout 0.5s;animation-fill-mode: forwards;}

@keyframes fadein {
	from {opacity: 0;}
	to {opacity: 1;}
}

@keyframes fadeout {
	from {opacity: 1;}
	to {opacity: 0;}
}