/* common */

.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(http://fetchak.com/ie-css3/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(http://fetchak.com/ie-css3/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(http://fetchak.com/ie-css3/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:200px;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}