@charset "utf-8";
/* CSS Document */
*{margin:0; padding:0;}
body{font:12px/1.5 PingFangSC,微软雅黑, 黑体, Arial, Helvetica, sans-serif;overflow-x: auto;-webkit-font-smoothing: antialiased;}
table{width:100%; border:0; border-collapse:collapse; border-spacing:0;}
table th{font-weight:normal;}
ul,ol,li{list-style-type:none;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
input,select,textarea{vertical-align:middle; color:#000;border:none;border:0; outline:none; resize:none;}
a{text-decoration:none;}
b,i,strong,em{font-weight:normal; font-style:normal;}
img{ border:0;}
.fr{float:right}
.fl{float:left}
.clear{clear:both}
.clearfix{zoom:1;overflow:hidden}
/*input-placeholder-color*/
::-webkit-input-placeholder{ color: #E1E1E5; text-overflow: ellipsis;}
:-moz-placeholder{ color: #E1E1E5 !important; text-overflow: ellipsis;}
::-moz-placeholder{ color: #E1E1E5 !important; text-overflow: ellipsis;}
:-ms-input-placeholder{ color: #E1E1E5 !important; text-overflow: ellipsis;}
.fs18{font-size:18px;}


/************渐变按钮样式************/
.jb_btn{display:inline-block;box-shadow: 0 3px 12px 0 rgba(39,125,255,0.30);color: #FFFFFF;text-align:center;line-height:36px;border-radius: 20px;}
.jb_btn_92{width:92px;height:36px;background:url(../../images/live/jb_btn_92.png) no-repeat 0 0;}
.jb_btn_92:hover{background-position:0 -48px;}
.jb_btn_92:active{background-position:left -96px}
.jb_btn_92_disable{width:92px;height:36px;background:url(../../images/jb_disable.png) no-repeat;box-shadow: 0 4px 11px 0 rgba(86,82,255,0.17);
border-radius: 20px;}


.btnBlue{border: 1px solid #94C1FF;border-radius: 20px;display:inline-block;width:90px;height:34px;text-align:center;line-height:34px;color: #3A8BFF;}
.btnBlue:hover{background: #EAF0FF;}
.btnBlue:active{background: #E4ECFF;}
.btn_92_cancel:hover{background:none}
.btn_92_cancel:active{background:none}
.btn_104{width:102px;}
.btn_92{width:90px;}



 .pop_wid470_live{width:470px;/*margin-left:-235px;margin-top:-241px;*/}
 .popDiv_live{min-height:100px;background: #FFFFFF;border-radius: 10px;position:fixed;left:50%;top:50%;overflow:hidden}
 .popHead_live{line-height:60px;height:60px;background: #FFFFFF;position:absolute;left:0;top:0;width:100%;padding:0 30px;box-sizing: border-box;background:#fff}
 .popClose_live{display:inline-block;width:18px;height:18px;margin-top:19px}
 .fr_live{float:right}
 .padTm90_live{padding:90px 0;text-align:center;}
 .dl_con_live{text-align:center;margin-bottom:50px;}
 .dl_con_live dt{width:100px;height:100px;margin:0 auto;margin-bottom:36px;}
 .dl_con_live dd{font-size:18px;color:#475466;}
 .open_btn_live{display:block;width:224px;height:53px;text-align:center;line-height:53px;color:#fff;font-size:20px;
     border-radius:35px;background:#3A8BFF;margin:0 auto;}
 .xz_info_live{font-size:16px;color:#8A9099;margin-top:16px;}
 .xz_info_live a{color:#5990FF;}
 .maskDiv_1_live{width:100%;height:100%;position:fixed;top:0;left:0;background: rgba(16,26,41,0.76);z-index:10}
 .jb_btn_104{width:104px;height:36px;background:url(../../images/jb_btn_104.png) no-repeat 0 0;}
 .jb_btn_104:hover{background-position:0 -48px;}
 .jb_btn_104:active{background-position:left -96px}
 .jb_btn_168{width:168px;height:44px;line-height:44px;background:url(../../images/jb_btn_168.png) no-repeat 0 0;}
 .jb_btn_168:hover{background-position:0 -56px;}
 .jb_btn_168:active{background-position:left -112px}
 .jb_btn_132{width:132px;height:44px;line-height:44px;background:url(../../images/jb_btn_132.png) no-repeat 0 0;background-size:100%}
 .jb_btn_132:hover{background-position:0 -44px;background-size:100%}
 .jb_btn_132:active{background-position:left -88px;background-size:100%}
 .btnBlue{border: 1px solid #8cbbff;border-radius: 20px;display:inline-block;width:90px;height:34px;text-align:center;line-height:34px;color: #3A8BFF;}
 .btnBlue:hover{background: #EAF0FF;}
 .btnBlue:active{background: #E4ECFF;}
 .btn_92_cancel:hover{background:none}
 .btn_92_cancel:active{background:none}
 .btn_104{width:102px;}
 .btn_92{width:90px;}
 /*搜索*/
 .dataSearch{ width:200px; height:36px; border-radius:40px;position:relative}
 .dataSearch_input{ width:122px; height:34px;font-size:14px; color:#131B26 ;  border:1px solid #E5E5E5;background:none;position:absolute;left:0;top:0;z-index:2;padding:0 62px 0 14px; border-radius:40px;font-family:microsoft Yahei}
 .dataSearch_bnt{ width:18px; height:18px;background:url(../../images/search_ico.png) no-repeat center; border:0 none; cursor:pointer;position:absolute;right:14px;top:8px;z-index:3;outline:none}
 .dataSearch_input:hover{border: 1px solid #CCDEF3;}
 .dataSearch_input:focus {outline:none;border: 1px solid #CCDEF3;box-shadow: 0 0 4px 0 #75BAFF;border-radius: 40px;}
 .dataSearch:hover .dataSearch_bnt{opacity:0.7}
 .dataSearch_dele{ width:14px; height:14px; background:url(../../images/search_dele.png) no-repeat center/14px;display:block; position:absolute; right:40px; top:50%; margin-top:-7px; z-index:3;}
 /*位置路径*/
 .RoutePosiiton{width:100%;line-height:40px;padding-top:10px;}
 .dataNum{ color:#8A8B99 ; }
 .breadcrumb{ display:table;}
 .breadcrumb>li{ color:#8A8B99 ; float:left;}
 .breadcrumb>li.active{ color:#8A8B99 ;}
 .breadcrumb>li>a{ font-size:12px; color:#3A8BFF; display:block; max-width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
 .breadcrumb>li>a:hover{ text-decoration:underline;}
 .breadcrumb>li+li { background:url(../../images/breadcrumb.png) no-repeat 4px center; padding-left:14px;}
 .PlusIcon{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:middle;margin-top:-2px;}
 /*********Reset************/
 body{background: #f2f4f7;}
 .box{width:100%;height:100%; position: relative;}
 .Header{width:100%;height:52px;background: #FFFFFF;box-shadow: 0 1px 12px 0 rgba(1,39,78,0.12);position: fixed;top:0;left:0;z-index:4;padding:0 30px;    box-sizing: border-box;}
 .Logo{width:82px;height:28px;margin-top:13px;}
 .Logo img{width:100%;height:100%}
 .headRight{padding-top:11px;}
 .backOld{display:inline-block;font-size: 14px;color: #6B89B3 ;background: #F7FAFC;border: 1px solid #E1EBFA;border-radius: 20px;width:98px;height:28px;text-align:center;line-height:28px;}
 .backOld:hover{background: rgba(247,250,252,0.7);color: rgba(145,160,181,0.7);}
 /*****登陆后*******/
 .loginAfter{margin-left:40px;}
 .headPic{display:inline-block;width:30px;height:30px;border-radius:50%;overflow:hidden;margin-right:10px;}
 .name{width:200px;position:relative;line-height:30px;height:34px}
 .name p{max-width:68px;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis; overflow: hidden;float:left;color:#131B26 ;font-size:14px;}
 .name p:hover{color:#474C59 }
 .arrowDown{display:inline-block;width:12px;height:12px;background:url(../../images/arrowDown.png) no-repeat;margin-left:5px;float:left;margin-top:10px; -webkit-transition: -webkit-transform .2s ease-in;
     -moz-transition: -moz-transform .2s ease-in;
     -o-transition: -o-transform .2s ease-in;}
 /*气泡小弹窗开始*/
 .Bubble_Popup{width:116px;background: #FFFFFF;box-shadow: 0 2px 12px 0 rgba(175,187,204,0.75);border-radius: 6px;position:absolute;padding:6px 0;display:none}
 .Bubble_Popup li{width:100%;height:48px;}
 .Bubble_Popup li a{display:block;width:100%;height:48px;line-height:48px;text-align:center;font-size: 14px;color: #474C59 ;}
 .Bubble_Popup li a:hover{background: #F5F8FB;color: #3B90FF;}
 /*气泡小弹窗结束*/
 .loginCon li a i{display:inline-block;width:16px;height:16px;vertical-align:middle;margin-right:8px;margin-top:-1px;}
 .loginCon{position:absolute;left:-25px;top:34px;height:0}
 .loginCon li a i.user{background:url(../../images/user.png) no-repeat}
 .loginCon li a i.eidt{background:url(../../images/eidt.png) no-repeat}
 .loginCon li a:hover i.user{background:url(../../images/user_hover.png) no-repeat}
 .loginCon li a:hover i.eidt{background:url(../../images/eidt_hover.png) no-repeat}
 .name:hover .arrowDown{-moz-transform: rotate(180deg);-moz-transform-origin: 50% 30%;-webkit-transform: rotate(180deg);-webkit-transform-origin: 50% 30%;-o-transform: rotate(180deg);-o-transform-origin: 50% 30%;
     transform: rotate(180deg);transform-origin: 50% 30%;    margin: 12px 0 0 8px;    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}
 /******左侧开始*****/
 .nav_side{width:180px;height:100%;position: fixed;left: 0;top:0px; z-index: 2;background: #FFFFFF;box-shadow: 2px 0 10px 0 rgba(237,238,240,0.50);padding-top:52px;}
 .classDl{width:138px;margin:0 auto;margin-top:30px}
 .classDl dt{width:138px;height:78px;border-radius:6px;overflow:hidden;position:relative;}
 .classDl dt:hover{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;}
 .classDl dt span{display:inline-block;width:100%;height:24px;background:rgba(0,0,0,0.2);position:absolute;bottom:0;left:0;text-align:center;line-height:24px;font-size:12px;color:#fff;}
 .classDl dt span .left_join{display:inline-block;width:10px;height:10px;vertical-align:middle;background:url(../../images/left_join.png) no-repeat;margin-left:4px;margin-top:-2px;}
 .classDl dd{font-size: 16px;text-align:center;width:100%;line-height:21px;margin-top:12px;}
 .nav-content{margin-top:8px; padding-bottom:30px;}
 .nav-content ul{border-bottom:2px solid  #F8F8F8;padding:12px 0;}
 .nav-content ul:last-child{border-bottom:none}
 .nav-content ul li{width:100%;height:54px;position: relative;}
 .nav-content ul li a{display:block;height:54px;line-height:54px;font-size: 14px;color: #737886;}
 .nav-content ul li a:hover{background:#f6f9fd}
 .nav-content ul li a{padding-left:47px;}
 .nav-content ul li a i{display:inline-block;width:24px;height:24px;background:url(../../images/nav_icon.png) no-repeat;background-size:1600%;vertical-align:middle;margin-right:6px;margin-top:-2px;}
 .nav-content ul li a i.hd{background-position:0 0;}
 .nav-content ul li a i.ppt{background-position:-24px 0;}
 .nav-content ul li a i.zj{background-position:-48px 0;}
 .nav-content ul li a i.zl{background-position:-72px 0}
 .nav-content ul li a i.tz{background-position:-96px 0}
 .nav-content ul li a i.tl{background-position:-120px 0}
 .nav-content ul li a i.zy{background-position:-144px 0}
 .nav-content ul li a i.ks{background-position:-168px 0}
 .nav-content ul li a i.tj{background-position:-192px 0}
 .nav-content ul li a i.gl{background-position:-216px 0}
 .nav-content ul li.curNav a{color: #3B90FF;background:#f6f9fd}
 .nav-content ul li.curNav a i.hd{background-position:0 -24px;}
 .nav-content ul li.curNav a i.ppt{background-position:-24px -24px;}
 .nav-content ul li.curNav a i.zj{background-position:-48px -24px;}
 .nav-content ul li.curNav a i.zl{background-position:-72px -24px}
 .nav-content ul li.curNav a i.tz{background-position:-96px -24px}
 .nav-content ul li.curNav a i.tl{background-position:-120px -24px}
 .nav-content ul li.curNav a i.zy{background-position:-144px -24px}
 .nav-content ul li.curNav a i.ks{background-position:-168px -24px}
 .nav-content ul li.curNav a i.tj{background-position:-192px -24px}
 .nav-content ul li.curNav a i.gl{background-position:-216px -24px}
 /*新加题库*/
 .nav-content ul li a i.tk{display:inline-block;background:url(../../images/tiku_icon.png) no-repeat;background-size:200%;background-position:0 0;}
 .nav-content ul li.curNav a i.tk{background-position:-24px 0;}
 /*12.25学生端新加*/
 .nav-content ul li a i.ctj{background-position:-240px 0}
 .nav-content ul li a i.zc{background-position:-264px 0}
 .nav-content ul li a i.cj{background-position:-288px 0}
 .nav-content ul li a i.dy{background-position:-312px 0}
 .nav-content ul li.curNav a i.ctj{background-position:-240px -24px}
 .nav-content ul li.curNav a i.zc{background-position:-264px -24px}
 .nav-content ul li.curNav a i.cj{background-position:-288px -24px}
 .nav-content ul li.curNav a i.dy{background-position:-312px -24px}
 .nav-content ul li a  b.number{display:inline-block;padding:0 5px;height:18px;color:#fff;border-radius:50%;background:#F33131;line-height:18px;font-size:13px;margin-left:10px;}
 /*7.23学生端新加*/
 .nav-content ul li a i.xxjl{background-position:-336px 0}
 .nav-content ul li a i.kcsm{background-position:-360px 0}
 .nav-content ul li.curNav a i.xxjl{background-position:-336px -24px}
 .nav-content ul li.curNav a i.kcsm{background-position:-360px -24px}
 /******右侧开始*****/
 .content{width:100%; position: relative;left: 0;top:0px;}
 .content .main{margin: 82px 30px 30px 210px;min-width: 1040px;background: #FFFFFF;box-shadow: 0 2px 10px 0 rgba(237,238,240,0.50);border-radius: 8px;position:relative}
 /***************分页****************/
 .HetPage106{width:100%;height:106px;}
 .pagePosition{position:absolute;bottom:0;right:0;padding:40px 0;width:100%;height:26px;}
 #page {text-align: center;height:26px;}
 #page li {display:inline-block;min-width:24px;height:24px;border-radius:99px;text-align:center;line-height:24px;color: #8A8B99 ;font-size:14px;margin:0 2px;cursor: pointer;overflow:hidden;padding:0 8px;box-sizing:border-box;}
 #page li:hover{color: #3A8BFF;}
 #page li.xl-nextPage i{display:block;width:9px;height:14px;background:url(../../images/page_next.png) no-repeat;margin:0 auto;vertical-align:middle;margin-top:5px;}
 #page li.xl-prevPage i{display:block;width:9px;height:14px;background:url(../../images/page_prve.png) no-repeat;margin:0 auto;vertical-align:middle;margin-top:5px;}
 #page li.xl-active {background: linear-gradient(139.98deg, #6CC7FF -38.96%, #5A33FF 168.95%), #FFFFFF;color:#fff;    box-shadow: 0 2px 6px 0 rgba(39,125,255,0.30);}
 #page li.xl-disabled i{display:block;width:9px;height:14px;background:url(../../images/disable_page_prve.png) no-repeat;vertical-align:middle;margin-top:5px;}
 #page li.xl-nextPage.xl-disabled i{display:block;width:9px;height:14px;background:url(../../images/disable_page_next.png) no-repeat;vertical-align:middle;margin-top:5px;}
 /*防止按钮分页点击按钮有蓝色底*/
 #page li{　-moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/-ms-user-select: none; /*IE10*/-khtml-user-select: none; /*早期浏览器*/user-select: none;}
 /*开关与文字注解*/
 .mui-switch { width:38px; height:20px; position: relative;  display: inline-block;background: #D0D5DB;border-radius: 14px;-webkit-appearance: none; user-select: none; outline: none; }
 .mui-switch:before { content: ''; width:16px; height:16px; position: absolute; top: 50%; left:2px;top:2px; border-radius: 50%; background: #fff;; }
 .mui-switch:checked { border-color: #3A8BFF;; box-shadow: #09f 0 0 0 .16rem inset; background-color: #09f; }
 .mui-switch:checked:before { left:20px; }
 .mui-switch.mui-switch-animbg { transition: background-color ease 0.4s; }
 .mui-switch.mui-switch-animbg:before { transition: left 0.3s; }
 .mui-switch.mui-switch-animbg:checked { box-shadow: #dfdfdf 0 0 0 0 inset; background-color: #3A8BFF;transition: border-color 0.4s, background-color ease 0.4s; }
 .mui-switch.mui-switch-animbg:checked:before { transition: left 0.3s; }
 /*开关按钮2*/
 .switch{display:inline-block;width:38px; height:20px; position: relative;  display: inline-block;background: #D0D5DB;border-radius: 14px;-webkit-appearance: none; user-select: none; outline: none;position:relative;}
 .switch.Dgblue{background: #3A8BFF; }
 .switch i{width:16px; height:16px; position: absolute; top: 50%; left:2px;top:2px; border-radius: 50%; background: #fff}
 .switch.Dgblue i{left:20px;background:#fff;}
 /*8.14红点*/
 .redRound{display:inline-block;width:6px;height:6px;border-radius:50%;background:#F33131;position:absolute;top:18px;right:51px}
 .into_ItemBank{margin:0 auto;width:102px;height:74px;}
 .into_ItemBank a{display:inline-block;width:76px;height:32px;border: 1px solid #94c1ff;;border-radius: 16px;text-align:center;line-height:32px;font-size: 14px;color: #3a8bff;;}
 .into_ItemBank a:hover{background: #eaf0ff;border: 1px solid #93bfff;}
 .into_ItemBank a:active{background: #e4ecff;border: 1px solid #93bfff;}
 /*公共二级导航*/
 .subNav{width:100%;height:40px;background: #3A4357;box-shadow: 0 2px 17px 0 rgba(211,211,211,0.50);text-align:center;line-height:40px;font-size: 16px;
     color: #8A8B99 ;position:fixed;left:0;top:0;z-index:2}
 .het40{height:40px;width:100%}
 .sub-button a{display:inline-block;min-width:94px;height:40px;border-left:1px solid #313A4C;font-size: 14px;color: #FFFFFF;}
 .sub-button a:hover{background:#48536B;}
 .sub-button a:active{background:#32394A;color:rgba(255,255,255,0.7);}
 .sub-button a.completeBtn{ background:#3A8BFF;}
 .sub-button a.completeBtn:hover{ background:#5CA0FF;}
 .sub-button a.completeBtn:active{background:#2F70CC;color:rgba(255,255,255,0.7);}
 .subBack{font-size: 14px;color: #878996;margin-left:30px;position:absolute;left:0;top:0}
 .subBack:hover{color:#8A8B99 ;}
 .subBack:hover .icon-BackIcon{color:#8A8B99 ;}
 .sub-button{position:absolute;right:0;top:0}
 .bcNext{padding:0 20px}
 /*右侧下载按钮*/
 .DownloadaDiv{position:fixed;right:20px;bottom:94px;box-shadow: 0 1px 7px 0 rgba(198,204,217,0.58);border-radius: 4px;}
 .Downloada{display:inline-block;overflow:hidden;width:40px;height:40px;background: #FFF;border-radius: 4px;overflow:hidden}
 .Downloada em{font-size: 13px;color: #FFFFFF;display:inline-block;min-width:12px;height:18px;background: #F33131;line-height:18px;border-radius:10px;font-style:normal;position:absolute;right:-7px;top:-9px;font-family: PingFangSC-Regular;padding:0 3px;}
 .Downloada:before {  content: "\e605";}
 .Downloada:hover{color:#fff;background:#3A8BFF;}
 .DownloadaHover{position:absolute;right:50px;bottom:0px;width: 82px;height:40px;background: rgba(24,30,51,0.80);border-radius: 4px;margin-left: -28px;opacity: 0; visibility: hidden;-webkit-transition: opacity 0.3s 1s, visibility 0s 0.3s;transition: opacity 0.3s 1s, visibility 0s 0.3s;transition: opacity 0.3s 1s, visibility 0s 0.3s;text-align:center;line-height:40px;color:#fff;}
 .DownloadaHover i{ display:block; width:0px; height:0px; border:solid rgba(24,30,51,0.80) 4px; position:absolute; right:-8px; top:16px; bottom:auto; border-color:rgba(24,30,51,0.80) transparent transparent transparent;transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);}
 .bntHoverTips i.active{ display:block; width:0px; height:0px; border:solid rgba(24,30,51,0.80) 4px; position:absolute; left:50%; margin-left:-4px; bottom:40px; top:auto; border-color:transparent transparent rgba(24,30,51,0.80) transparent;}
 .DownloadaDiv:hover .DownloadaHover{ display:block; opacity:1; visibility:visible;
     -webkit-transition:opacity 0.3s 1s, visibility 0.3s 1s;
     transition:opacity 0.3s 1s, visibility 0.3s 1s;}
 /*空值页面*/
 .nullMain{width:100%;  height: calc(100vh);}
 .null_wid700{width:700px;height:250px;margin:0 auto;position: relative;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);-moz-transform: translateY(-50%);}
 .null_img{width:237px;height:192px;}
 .word_null{width:355px;padding-top:32px;}
 .popWord{padding:0 30px;}
 .word_null p{color:#8A8B99 ;font-size:16px;margin-bottom:30px;}
 .mui-switch { width:38px; height:20px; position: relative;  display: inline-block;background: #D0D5DB;border-radius: 14px;-webkit-appearance: none; user-select: none; outline: none; }
 .mui-switch:before { content: ''; width:16px; height:16px; position: absolute; top: 50%; left:2px;top:2px; border-radius: 50%; background: #fff;; }
 .mui-switch.checked { border-color: #3A8BFF;box-shadow: #09f 0 0 0 .16rem inset; background-color: #09f; }
 .mui-switch.checked:before { left:20px; }
 .mui-switch.mui-switch-animbg { transition: background-color ease 0.4s; }
 .mui-switch.mui-switch-animbg:before { transition: left 0.3s; }
 .mui-switch.mui-switch-animbg.checked { box-shadow: #dfdfdf 0 0 0 0 inset; background-color: #3A8BFF;; transition: border-color 0.4s, background-color ease 0.4s; }
 .mui-switch.mui-switch-animbg.checked:before { transition: left 0.3s; }
 .mui-switch>input{ opacity:0;}


 /*2021.1.26日新加公共样式*/


 /*文字颜色*/
 .color0{color:#3A8BFF;}/*标准蓝*/
 .color1{color:#131B26;}/*一级文字*/
 .color2{color:#474C59;}/*二级文字*/
 .color3{color:#8A8B99;}/*三级文字*/
 .color4{color:#acb4bf;}/*四级文字*/
 .color5{color:#6B89B3;}/*可点文字*/
 .color6{color:#a3bad9;}/*重要icon*/
 .color7{color:#dadfe6;}/*次要icon*/
 .color_green{color:#00B368;}/*绿色文字*/
 .color_yellow{color:#F28C24;}/*黄色文字*/
 .color_red{color:#F33131;}/*红色文字*/

 /*需要hover的才加带_hover的class*/
 .color1_hover:hover{color:#3A8BFF;}
 .color2_hover:hover{color:#131B26;}
 .color3_hover:hover{color:#474C59;}

 /*输入框border颜色*/
 .border_color{border:1px solid #D5D7D9}
 .border_color:hover{border:1px solid #3A8BFF}
 .border_color:focus{border:1px solid #3A8BFF}
 .border_color_red{border:1px solid #f36161}
 .border_color_red:hover{border:1px solid #f36161}
 .border_color_red:focus{border:1px solid #f36161}