/* AB模版网 做最好的织梦整站模板下载网站 Www.AdminBuy.Cn */
/* QQ：9490489 */
/* 仿站：Fang.AdminBuy.Cn */
/* 素材：Sc.AdminBuy.Cn */


.fl {

    float: left;

}



.fr {

    float: right;

}



.abs {

    position: absolute;

}



.clear {

    clear: both;

    height: 0;

    font-size: 0;

    zoom: 1;

}



.mask {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



/* header */



.hrforce-header {

    height: 80px;

    width: 100%;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 9999;

    transition: all 1s;

    -webkit-transition: all 1s;

    -moz-transition: all 1s;

    -ms-transition: all 1s;

}



.hrforce-header > .hrforce-log {

    float: left;

    width: 300px;

    height: 53px;

    margin: 15px 0 0 30px;

    background: url("../images/hrforce-log.png") no-repeat;

    transition: all 1s;

    -webkit-transition: all 1s;

    -moz-transition: all 1s;

    -ms-transition: all 1s;

    cursor: pointer;

}



.hrforce-r-list {

    float: right;

}



.hrforce-header .zyc-log {

    width: 130px;

    height: 60px;

    margin: 10px 10px 0 55px;

    background: url("../images/zyc-log.png") no-repeat;

    transition: all 1s;

    -webkit-transition: all 1s;

    -moz-transition: all 1s;

    -ms-transition: all 1s;

}



.hrforce-r-list ul,

.hrforce-r-list ul li,

.hrforce-r-list span,

.zyc-log {

    float: left;

}



.hrforce-r-list ul,

.hrforce-r-list ul li,

.hrforce-r-list ul li a,

.hrforce-r-list span {

    height: 80px;

    line-height: 80px;

}



.hrforce-header > .hrforce-r-list ul li a {

    display: block;

    color: #fff;

    font-size: 14px;

    transition: all 1s;

    -webkit-transition: all 1s;

    -moz-transition: all 1s;

    -ms-transition: all 1s;



}



.hrforce-header > .hrforce-r-list > span {

    display: block;

    margin: 0 20px;

    color: #fff;

    font-size: 15px;

    transition: all 1s;

    -webkit-transition: all 1s;

    -moz-transition: all 1s;

    -ms-transition: all 1s;

}



.hrforce-grenn-header {

    background: #fff;

    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.33);

    -moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.33);

    -ms-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.33);

    behavior: url(../other/ie-css3.htc);

}



.hrforce-grenn-header > .hrforce-r-list ul li a {

    color: #232323;

}



.hrforce-grenn-header > .hrforce-r-list > span {

    color: #0e4d92;

}



.hrforce-grenn-header > .hrforce-log {

    background: url("../images/hrforce-green-log.png") no-repeat;

}



.hrforce-grenn-header .zyc-log {

    background: url("../images/zyc-grenn-log.png") no-repeat;

}



.hrforce-nav {

    position: relative;

}



.hrforce-nav li {

    text-align: center;

}



.hrforce-nav li a {

    padding: 0 15px;

}



.hrforce-nav div.active {

    position: absolute;

    height: 4px;

    background: #0e4d92;

    bottom: 0;

}



.state-nav{margin-right:20px}

.state-nav li {

}



.state-nav li a {

    float: left;

}



.state-nav li > span {

    display: inline-block;

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: #0e4d92;

    float: left;

    margin: 38px 15px;

    behavior: url(../other/ie-css3.htc);

}



/* banner */

.hrforce-banner {

    position: relative;

}



/* slide */

.slide-main{height:580px;position:relative;}

.prev,.next{display:block;width:44px;height:44px;position:absolute;z-index:222;top:267px;overflow:hidden;cursor:pointer;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);_border:1px solid none;}

.prev{left:70px;}

.next{right:70px;}

.prev:hover,.next:hover,.nav-main a:hover,.nav-main a.cur{opacity:1;-moz-opacity:1;filter:alpha(opacity=100);}

.item{display:block;width:100%;height:5px;position:absolute;z-index:124;top:540px;left:0;text-align:center;}

.item a{display:inline-block;width:24px;height:5px;margin-right:11px;background:#444;opacity:0.3;-moz-opacity:0.3;filter:alpha(opacity=30);overflow:hidden;}

.item a.cur{background:#fff;}

.slide-box,.slide{display:block;width:100%;height:580px;overflow:hidden;}

.slide-box{position:relative;}

.slide{display:none;height:490px;padding-top:89px;background:#193d85;position:relative;position:absolute;z-index:8;}

.bgstylea{background:#193d85;}

.bgstyleb{background:#193d85;}

.bgstylec{background:#000;}

.slide a{display:block;width:100%;height:490px;cursor:pointer;}

.obj-a,.obj-b,.obj-c,.obj-d,.obj-e,.obj-f{position:absolute;z-index:9;left:50%;}

.obj-a,.obj-b{width:952px;margin-left:-476px;text-align:center;}

.obj-a{display:block;height:352px;top:100px;}

.obj-b{top:406px;height:100px;}

.obj-c{display:block;height:582px;top:0;margin-left:-540px;}

.obj-d{top:228px;height:164px;}

.obj-d p{display:block;padding-top:20px;font-size:16px;color:#fff;clear:both;}

.obj-e{width:366px;height:170px;margin-left:-460px;top:223px;z-index:12;}

.obj-f{width:692px;height:394px;top:158px;margin-left:-180px;}

.banAnimate .obj-a{display:block;animation-name:baoAni;-webkit-animation:baoAni 0.4s linear 0s normal none;-moz-animation:baoAni 0.4s linear 0s normal none;animation:baoAni 0.4s linear 0s normal none;}

@-webkit-keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }

@-moz-keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }

@keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }

.banAnimate .obj-b{display:block;animation-name:saAni;-webkit-animation:saAni 0.4s linear 0s normal none;-moz-animation:saAni 0.4s linear 0s normal none;animation:saAni 0.4s linear 0s normal none;}

@-webkit-keyframes saAni{from{opacity:0;-webkit-transform:scale(0,0);} to{opacity:1;-webkit-transform:scale(1,1);} }

@-moz-keyframes saAni{from{opacity:0;-moz-transform:scale(0,0);} to{opacity:1;-moz-transform:scale(1,1);} }

@keyframes saAni{from{opacity:0;transform:scale(0,0);} to{opacity:1;transform:scale(1,1);} }

.watch-code.code-show{display:block;animation-name:scode;-webkit-animation:scode 0.3s linear 0s normal none;-moz-animation:scode 0.3s linear 0s normal none;animation:scode 0.3s linear 0s normal none;}

@-webkit-keyframes scode{from{opacity:0;-webkit-transform:scale(1,0);transform-origin:left bottom;} to{opacity:1;-webkit-transform:scale(1,1); transform-origin: left bottom;} }

@-moz-keyframes scode{from{opacity:0;-moz-transform:scale(1,0); transform-origin:left bottom;} to{opacity:1;-moz-transform:scale(1,1);transform-origin:bottom bottom;} }

@keyframes scode{from{opacity:0;transform:scale(1,0);transform-origin:left bottom;} to{opacity:1;transform:scale(1,1);transform-origin: left bottom;} }

.banAnimate .obj-c,.banAnimate .obj-e{display:block;animation-name:saAnic;-webkit-animation:saAnic 0.3s linear 0s normal none;-moz-animation:saAnic 0.3s linear 0s normal none;animation:saAnic 0.3s linear 0s normal none;}

@-webkit-keyframes saAnic{from{opacity:0;left:47%;} to{opacity:1;left:50%;} }

@-moz-keyframes saAnic{from{opacity:0;left:47%;} to{opacity:1;left:50%;} }

@keyframes saAnic{from{opacity:0;left:47%;} to{opacity:1;left:50%;} }

.banAnimate .obj-d,.banAnimate .obj-f{display:block;animation-name:saAnid;-webkit-animation:saAnid 0.3s linear 0s normal none;-moz-animation:saAnid 0.3s linear 0s normal none;animation:saAnid 0.3s linear 0s normal none;}

@-webkit-keyframes saAnid{from{opacity:0;left:53%;} to{opacity:1;left:50%;} }

@-moz-keyframes saAnid{from{opacity:0;left:53%;} to{opacity:1;left:50%;} }

@keyframes saAnid{from{opacity:0;left:53%;} to{opacity:1;left:50%;} }



.searchbox{float:left;width:300px;margin:20px;height:40px;line-height:40px;font-size:14px;}

.hrforce-header .searchbox input{height:18px;line-height:18px;padding:10px;border:1px solid #fff;color:#000;width:210px;float:left}

.hrforce-header .searchbox a{display:inline-block;width:60px;height:40px;line-height:40px;text-align:center;background:#f0f0f0;color:#000}

.hrforce-grenn-header .searchbox input{height:18px;line-height:18px;padding:10px;border:1px solid #193d85;color:#000;width:210px;float:left}

.hrforce-grenn-header .searchbox a{display:inline-block;width:60px;height:40px;line-height:40px;text-align:center;background:#193d85;color:#fff}



/* chunck01 */

.hrforce-chunck{overflow:hidden}

.hrforce-chunck-tit {

    height: 200px;

    text-align: center;

}



.hrforce-chunck-tit > h2 {

    color: #232323;

    font-size: 30px;

    height: 100px;

    line-height: 200px;

    letter-spacing: 5px;

    text-indent: 5px;

    font-family: "Gotham Bold";

}



.hrforce-chunck-tit > span {

    font-size: 14px;

    height: 100px;

    display: block;

    line-height: 70px;

    color: #232323;

    letter-spacing: 5px;

    text-indent: 5px;

    font-family: "Gotham-Black";

}



#hrforce-chunck01 {

    display: flex;

    flex-flow: column;

}



.hrforce-chunck01-con {

    position: relative;

    height: 100%;

    min-height: 600px;

    background: #f4f4f4;

}



.chunck01-box {

    width: 50%;

    height: 100%;

    position: relative;

}



.chunck01-left {

    float: left;

    background: url("../images/chunk01-img.jpg") no-repeat;

    background-size: 100%;

}



.chunck01-right {

    float: right;

}



.chunck01-ani01 {

    position: absolute;

    top: 50%;

    left: 50%;

    margin: -124px 0 0 -124px;

    width: 248px;

    height: 248px;

    display: block;

    opacity: 0;

    background: url("../images/chunck01-ani01.png") no-repeat;

    transition: all 0.5s ease-out;

    -webkit-transition: all 0.5s ease-out;

    -moz-transition: all 0.5s ease-out;

    -ms-transition: all 0.5s ease-out;

}



.chunck01-ani01:hover {

    background: url("../images/chunck01-ani02.png") no-repeat;

}



.zoomIn {

    animation-fill-mode: forwards;

    opacity: 1;

}



.chunck01-right ul {

    position: absolute;

    top: 50%;

    left: 40%;

    width: 380px; 

    margin: -237px 0 0 -190px;

}



.chunck01-right ul li {

    margin: 15px 0;

    float: left;

    width: 100%;

}



.chunck01-right ul li,

.chunck01-right ul li a {

    height: 88px;

}



.chunck01-right ul li a {

    display: block;

    /*padding-left: 130px;*/

    white-space: nowrap;

}



.chunck01-right ul li a b,

.chunck01-right ul li a span,

.chunck01-right ul li a p {

    display: block;

    height: 30px;

    font-size: 14px;

}



.chunck01-right ul li a b {

    line-height: 40px;

    font-size: 16px;

    color: #232323;

}



.chunck01-right ul li a span {

    line-height: 25px;

    color: #999;

    font-family: "Helvetica Neue";

}



.chunck01-right ul li a p {

    line-height: 10px;

    color: #666;

} 

.ico-box {

    width: 88px;

    height: 88px;

    background: #fff;

    margin-right: 48px;

    border-radius: 50%;

    float: left;

    position: relative;

    behavior: url(../other/ie-css3.htc);

}



.rd-fg, .rd-bg {

    position: absolute;

    border-radius: 50%;

}



.rd-fg {

    z-index: 999;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

}



.rd-bg {

    z-index: 998;

    background: #0e4d92;

    width: 100%;

    height: 100%;

    opacity: 0;

}



.chunck01-right ul li a:hover b {

    color: #0e4d92;

}



.chunck01-right ul li a div {

    transition: all 0.5s ease-out;

    -webkit-transition: all 0.5s ease-out;

    -moz-transition: all 0.5s ease-out;

    -ms-transition: all 0.5s ease-out;

}



.chunck01-right ul li a:hover div.ico-box {

    transform: rotate(360deg);

    -webkit-transform: rotate(360deg);

    -moz-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

}



.chunck01-right ul li a:hover div.rd-bg {

    opacity: 1;

}



.chunck01-right ul li.euser a div.e-user-fg {

    background: url("../images/eu-ico.png") center no-repeat;

}



.chunck01-right ul li.euser a:hover div.e-user-fg {

    background: url("../images/eu-active-ico.png") center no-repeat;

}



.chunck01-right ul li.puser a div.i-user-fg {

    background: url("../images/pu-ico.png") center no-repeat;

}



.chunck01-right ul li.puser a:hover div.i-user-fg {

    background: url("../images/pu-active-ico.png") center no-repeat;

}



.chunck01-right ul li.business a div.coop-fg {

    background: url("../images/peu-ico.png") center no-repeat;

}



.chunck01-right ul li.business a:hover div.coop-fg {

    background: url("../images/peu-active-ico.png") center no-repeat;

}

.chunck01-right ul li.coop a div.coop-fg {

    background: url("../images/coop-ico.png") center no-repeat;

}



.chunck01-right ul li.coop a:hover div.coop-fg {

    background: url("../images/coop-active-ico.png") center no-repeat;

}



.chunck01-right ul li a.active b {

    color: #0e4d92;

    font-family: "Gotham-Black";

}



.chunck01-right ul li a.active {

    transition: all 1s;

    -webkit-transition: all 1s;

    -moz-transition: all 1s;

    -ms-transition: all 1s;

}



.hrforce-chunck02 {

    position: relative;

}



#hrforce-chunck02 {

    overflow: hidden;

}



.hrforce-video-box {

    position: relative;

    width: 1000px;

    margin: 0 auto;

    padding-bottom: 80px;

}



.hrforce-video {

    width: 1000px;

    margin: 0 auto;

}



.video {

    margin-top: 30px;

}



.hrforce-video-bg {

    width: 692px;

    height: 480px;

    margin: 0 auto;

    text-align: center;

    position: relative;

    background: url("../images/hrforce-video-bg.png") no-repeat;

}



.hrforce-glare {

    position: absolute;

    top: 0;

    right: 0;

    width: 260px;

    height: 404px;

    z-index: 999;

    background: url("../images/hrforce-glare.png") no-repeat;

}



.video-bottom {

    background: url("../images/hrforce-video-bottom.png");

    width: 848px;

    height: 52px;

    margin: -26px auto 0 auto;

    position: relative;

    z-index: 999;

}



.video-con {

    width: 1000px;

    margin: 0 auto;

    position: relative;

}



.chunck02-ani01 {

    display:none;

    margin: -207px 0 0 -72px;

    position: relative;

    z-index: 9998;

    float: left;

    width: 287px;

    height: 400px;

    /* background: url("../images/hrforce-mobile.png") no-repeat; */

}



.chunck02-ani02 {

    margin:60px auto 0 auto;

    color: #232323;

    font-size: 14px;

    text-indent: 20px;

    line-height: 30px;

    letter-spacing: 2px;

    text-align: left;

}



.chunck02-ani02 span.txt-green {

    color: #0e4d92;

}



.chunck02-roate {

    position: absolute;

    right: -90px;

    top: -120px;

    width: 0;

}



.chunck02-ani03 {

    width: 77px;

    height: 706px;

    position: absolute;

    right: -100px;

    top:-100px;

    background: url("../images/chunck02-ani03.png") no-repeat;

    background-size:auto 100%

}



/* chunck03 */



#hrforce-chunck03 {

    background: #fff;

}

#hrforce-chunck06 {

    background: #f4f4f4;

}



.hrforce-chunck03-con {

    width: 1000px;

    height: 603px;

    min-height: 500px;

    margin: 0 auto;

    padding: 50px 0;

}



.chunck03-l-box,

.chunck03-r-box {

    width: 500px;

    position: relative;

}



.chunck03-l-box {

    float: left;

}



.chunck03-r-box {

    float: right;

}



/* swiper css reset */



.chunck03-l-box .swiper-container {

    position: relative;

    width: 390px;

    height: 380px;

    overflow: hidden;

    float: right;

    margin-right: 60px;

}



.chunck03-l-box div.swiper-wrapper {

    position: absolute;

}



.chunck03-l-box div.swiper-slide {

    float: left;

    width: 390px;

    height: 380px;

}



.chunck03-l-box .shops {

    float: left;

    width: 120px;

    height: 120px;

    margin: 0 10px 10px 0;

    opacity: 0;

}

 

.chunck03-l-box .chunck03-l-pagingBtn {

    width: 380px;

    margin-bottom: 50px;

    text-align: center;

    float: right;

    margin-right: 70px;

}



.chunck03-l-box .swiper-pagination-bullet {

    width: 40px;

    height: 6px;

    background: #e6e6e6;

    border-radius: inherit;

    margin: 0 15px;

    opacity: 1;

    display: inline-block;

    cursor: pointer;

}



.chunck03-l-box .swiper-pagination-bullet-active {

    background: #0e4d92;

}



.chunck03-r-box {

    padding-top: 100px;

}



.mid_line {

    position: absolute;

    right: 0;

    top: 67px;

    width: 1px;

    height: 380px;

    background: #d6d6d6;

}



.chunck03-r-box .swiper-container {

    width: 420px;

    height: 300px;

    position: relative;

    overflow: hidden;

    float: left;

    margin-left: 60px;

}



.chunck03-r-box .swiper-wrapper {

    position: relative;

}



.chunck03-r-box .swiper-slide {

    overflow: hidden;

    background: #f2f2f2;

    position: absolute;

    left: 0;

    top: 0;

    display: none;

}



.shop-white-log02 {

    width: 120px;

    height: 120px;

    background: #0e4d92 url("../images/shop-white-log02.png") center no-repeat;

}



.chunck03-r-box .swiper-slide b,

.chunck03-r-box .swiper-slide span,

.chunck03-r-box .swiper-slide p {

    display: block;

}



.chunck03-r-box .swiper-slide b {

    font-size: 18px;

    color: #0e4d92;

    height: 40px;

    line-height: 50px;

    font-family: "Gotham-Book";

}



.chunck03-r-box .swiper-slide span {

    font-size: 14px;

    height: 30px;

    line-height: 30px;

    color: #b7b7b7;

    font-family: "Gotham-Book";

}



.chunck03-r-box .swiper-slide p {

    font-size: 14px;

    color: #232323;

    line-height: 24px;

}

 



/* chunck04 */



.hrforce-chunck04-con {

    width: 1000px;

    margin: 0 auto;

}



.chunck04-top {

    padding-bottom: 120px;

}



.chunck04-l-form,

.chunck04-r-info {

    width: 500px;

    font-family: "Gotham-Book";

}



#index-form > div {

    float: left;

}



.chunck04-l-form {

    float: left;

}



.hrforce-form {

    float: right;

    width: 350px;

    margin-right: 30px;

}



.chunck04-r-info {

    float: right;

    font-family: "Gotham-Book";

}



.hrforce-txt {

    margin: 5px 0;

    position: relative;

}



.hrforce-type {

    position: relative;

}

.hrforce-type label{

    display: block;

    height: 100%;

    border: none;

    color: #232323;

    font-size: 14px;

    padding: 0 10px;

    box-sizing: border-box;

}

.hrforce-type ul {

    position: absolute;

    width: 100%;

    left: -1px;

    top: 38px;

    background: #fff;

    z-index: 1;

    border: 1px solid #e3e3e3;

    display: none;

    /* border-top: none; */

}

.hrforce-type ul li {

    padding: 0 10px;

    line-height: 40px;

    font-size: 14px;

    color: #232323;

    transition: all 0.1s;

    cursor: pointer;

}

.hrforce-type ul li:hover {

    background: #0e4d92;

    color: #fff;

    transition: all 0.1s;

}



.hrforce-username,

.hrforce-phone,

.hrforce-type,

.hrforce-message {

    width: 348px;

    border: 1px solid #e3e3e3;

}



#hrforce-message {

    outline: none;

    resize: none;

}



.hrforce-txt input,

.hrforce-txt textarea {

    width: 100%;

    height: 100%;

    border: none;

    color: #232323;

    font-size: 14px;

    padding: 0 10px;

    box-sizing: border-box;

}



.hrforce-txt,

.hrforce-txt input {

    height: 38px;

    line-height: 38px;

}



.hrforce-message,

.hrforce-message textarea {

    height: 90px;

    line-height: 38px;

}



.hrforce-submit {

    position: relative;

    width: 348px;

    height: 38px;

    line-height: 38px;

    border: 2px solid #0e4d92;

    overflow: hidden;

}



.hrforce-submit input, .hrforce-submit button {

    width: 100%;

    height: 38px;

    border: none;

    background: none;

    color: #232323;

    font-size: 16px;

    transition: all 0.3s;

    -webkit-transition: all 0.3s;

    -moz-transition: all 0.3s;

    -ms-transition: all 0.3s;

}



.hrforce-submit-bg {

    width: 100%;

    height: 38px;

    position: absolute;

    background: #0e4d92;

    top: 0;

    left: -100%;

    z-index: -1;

    transition: all 0.3s;

    -webkit-transition: all 0.3s;

    -moz-transition: all 0.3s;

    -ms-transition: all 0.3s;

}



.hrforce-submit:hover .hrforce-submit-bg {

    left: 0;

}



.hrforce-submit:hover input, .hrforce-submit:hover button {

    color: #fff;

}



.message-box {

    background: #ff7578;

    border-radius: 30px;

    color: #fff;

    font-size: 14px;

    position: absolute;

    right: 0;

    top: 23px;

    z-index: 999;

    height: 30px;

    line-height: 30px;

    padding: 0 30px;

    opacity: 0;

}



.message-box:after {

    content: "";

    position: absolute;

    left: -2px;

    bottom: -6px;

    width: 0;

    height: 0;

    border-top: 10px solid transparent;

    border-right: 20px solid #ff7578;

    border-bottom: 10px solid transparent;

    transform: rotate(-40deg);

    -webkit-transform: rotate(-40deg);

    -moz-transform: rotate(-40deg);

    -ms-transform: rotate(-40deg);

}



.hrforce-info-box {

    margin: 5px 0 5px 30px;

    padding-left: 30px;

    border-left: 1px solid #e5e5e5;

    position: relative;

    height: 245px;

}



.hrforce-info01,

.hrforce-info02 {

    cursor: pointer;

}



.hrforce-info01 {

    margin-bottom: 40px;

}



.hrforce-info b {

    font-size: 18px;

    line-height: 18px;

    color: #232323;

}



.hrforce-info p {

    font-size: 14px;

    line-height: 24px;

    margin-top: 14px;

    color: #666;

}



.hrforce-info-line {

    position: absolute;

    width: 4px;

    height: 50%;

    background: #0e4d92;

    left: -2px;

    top: 0;

}



/* footer */



.hrforce-footer-con {

    height: 80px;

    background: #353535;

}

  

.hrforce-copyright {

    height: 60px;

    padding: 10px 0;

    margin:0 auto

}



.hrforce-copyright p {

    text-align:center;

    height:60px;

    line-height:60px;

    width: 100%;

    color: #999;

    overflow: hidden;

}



.hrforce-copyright  a {

    font-size: 14px;

    color:#999

}



/* loadding */

.loadding-bg {

    position: fixed;

    width: 100%;

    height: 100%;

    background: #fff;

    top: 0;

    left: 0;

    z-index: 99997;

}



.loadding-box {

    position: fixed;

    top: 45%;

    left: 50%;

    width: 900px;

    height: 40px;

    margin: -20px 0 0 -450px;

    z-index: 99998;

    white-space: nowrap;

}



.loadding-txt {

    font-size: 40px;

    font-family: "Gotham Bold";

    position: absolute;

    top: 0;

    left: 0;

    text-align: justify;

    width: 900px;

    overflow: hidden;

    letter-spacing: 25px;

    white-space: nowrap;

}



.loadding-txt-bg {

    color: #f2f2f2;

    z-index: 99998;

}



.loadding-txt-fg {

    width: 0;

    color: #0e4d92;

    z-index: 99999;

}

 





.myspecial{margin:20px auto;overflow:hidden}

.myspecial li{position:relative;width:208px;height:198px;margin:0 20px;float:left;overflow:hidden;text-align:center;border:1px solid #e6e5e5;transition:.5s}

.myspecial li .myicons{margin:40px auto 20px;text-align:center;height:60px;line-height:60px}

.myspecial li .myicons i.icons{color:#0e4d92;font-size:60px;}

.myspecial li p{height:30px;line-height:30px}

.shade{position: absolute;left:0;bottom:-198px;width:208px;height:198px;background:#0e4d92;transition:.5s;z-index:-1}

.myspecial li:hover{border-color:#0e4d92;color:white}

.myspecial li:hover .myicons i.icons{color:white}

.myspecial li:hover .shade{bottom:0}



.knowmore{transition:.5s;margin:30px auto;width:200px;height:40px;line-height:40px;text-align:center;border:2px solid #0e4d92;color:#0e4d92;display:block;}

.knowmore:hover{background:#0e4d92;color:white}



.secure_source{margin:20px auto;overflow:hidden}

.secure_source li{cursor:pointer;background:#f6f6f6;position:relative;width:312px;height:380px;margin:0 10px;float:left;overflow:hidden;text-align:center;transition:.5s}

.secure_source li .myimgs{height:200px;overflow:hidden}

.secure_source li .myimgs img{width:100%;height:200px;transition:.5s;}

.secure_source li .info{padding:10px 20px}

.secure_source li .info  h2{line-height:30px;color:#000;font-size:16px;font-weight: bold;} 

.secure_source li .info  p{line-height:24px;margin-top:5px;color:#555;font-size:14px} 

.secure_source li:hover{background:#fff;transform:translatey(-10px);}

.secure_source li:hover p,.secure_source li:hover h2{color:#0e4d92}

.secure_source li:hover img{transform:scale(1.2);}



.hyfg{width:1000px;height:527px;position:relative;background:url(../images/hyfg.png) no-repeat}

.hyfg li{width:212px;height:212px;line-height:212px;font-size:16px;color:white;text-align:center;position: absolute;}

.hyfg li:nth-child(1){left:60px;top:58px}

.hyfg li:nth-child(2){left:281px;top:58px}

.hyfg li:nth-child(3){left:513px;top:58px}

.hyfg li:nth-child(4){left:735px;top:58px}

.hyfg li:nth-child(5){left:171px;top:170px}

.hyfg li:nth-child(6){left:396px;top:170px}

.hyfg li:nth-child(7){left:624px;top:170px}

.hyfg li:nth-child(8){left:60px;top:280px}

.hyfg li:nth-child(9){left:281px;top:280px}

.hyfg li:nth-child(10){left:513px;top:280px}

.hyfg li:nth-child(11){left:735px;top:280px}