﻿@import url(style.css);
@import url(mobile.css);
@import url(custom.css);
@import url(pscroll.css);
@import url(swiper.min.css);
/*首页*/
/*轮显*/
.banner_page{ position:absolute; width:110px; text-align:center; left:50%; margin-left:-881px; color:#fff; font-size:14px; z-index:10; bottom:50px; line-height:40px; z-index:5; /*font-style:italic;*/transition:all 0.3s;}
.banner_page .current{ font-size:32px; color:#00468c;}
.banner_page .a{ display:block; z-index:0; overflow:hidden; position:relative; color:#fff;}
.banner_page .a:before{ z-index:-1; content:""; position:absolute; left:0; top:0; width:40px; height:40px; background:#e40027; border-radius:50%;transition:all 0.3s;}
/*.banner_page:hover{ padding-left:5px; width:95px;}*/
.banner_page .a:hover:before{ width:100%; border-radius:30px;}
.banner_tit{position:absolute;left:50%; margin-left:-881px; color:#fff; font-size:18px;  bottom:140px; line-height:30px; letter-spacing:4px;}
.main .banner .swiper-button-next{ position:relative; right:0;}
/*登录*/
.i_login{ position:absolute; height:0; width:100%; top:50%; left:0; z-index:12;}
.i_login .boxs{ float:right; width:474px; background:#ffffff; height:380px; margin-top:-190px;}
.i_login .boxs .cons{ width:416px; margin:0 auto; overflow:hidden;}
.i_login .boxs .img{ width:auto; margin:0 auto; margin-top:21px; display:block; height:63px;}
.i_login .boxs .form{ margin-top:11px; border-top:1px solid #d9d9d9;}
.i_login .boxs .inputs2{ background-repeat:no-repeat; background-position:11px center; background-size:18px 18px;height:52px; width:100%;border:1px solid #d9d9d9; line-height:52px; font-size:16px; color:#333;  outline:none;  font-family:"微软雅黑"; text-indent:40px;  margin-top:19px;-webkit-box-sizing: border-box;  box-sizing: border-box; border-radius:4px;}
.i_login .boxs .inputs2:focus{ border:1px solid #004a97;}
.i_login .boxs .inputs2::-webkit-input-placeholder{color:#777777;}
.i_login .boxs .inputs2::-moz-placeholder{   /* Mozilla Firefox 19+ */ color:#777777;}
.i_login .boxs .inputs2:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */ color:#777777;}
.i_login .boxs .inputs2:-ms-input-placeholder{  /* Internet Explorer 10-11 */ color:#777777;}
.i_login .boxs .inputs2.bgs1{ background-image:url(../images/i_pic1.png);}
.i_login .boxs .inputs2.bgs2{ background-image:url(../images/i_pic2.png);}
.i_login .boxs .bnts2{  border: none; display:block; margin:0 auto;  width:100%;font-size: 18px; height: 50px; line-height:50px; background: #004a97; font-family:"微软雅黑"; text-align: center;color: #fff; outline: none;  cursor: pointer; -webkit-appearance: none; border-radius:4px;transition:all 0.3s; margin-top:30px;}
.i_login .boxs .bnts2:hover{ background:#0a5db2;}
.i_login .boxs .content{ line-height:30px; font-size:15px; overflow:hidden; color:#555555; margin-top:22px;}
.i_login .boxs .content a{color:#555555;}
.i_login .boxs .content a:hover{color:#004a97;}
.i_login .boxs .content span{ min-width:193px; display:inline-block; vertical-align:top;}
/*第一屏*/
.i_one{ overflow:hidden; position:relative;}
.i_one .i_one_l{ float:left; width:50%; overflow:hidden; position:relative;}
.i_one .i_one_l img{width:100%; height:100%; display:block;-webkit-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;-o-transition: all 0.8s ease-out;transition: all 0.8s ease-out;}
.i_one .i_one_l:hover img{-webkit-transform:scale(1.12, 1.12); -moz-transform:scale(1.12, 1.12); -o-transform:scale(1.12, 1.12); -ms-transform:scale(1.12, 1.12); transform:scale(1.12, 1.12);}
.i_one .i_one_l .bgs{ top:0; left:0; width:100%; height:100%; position:absolute; background:url(../images/encyclopedias_bg3.png) rgba(0,0,0,0.48) center center no-repeat; background-size:60px 60px; cursor:pointer;transition:all 0.3s;}
.i_one .i_one_l .bgs:hover{ background-size:65px 65px;}
.i_one .i_one_r{ width:50%; overflow:hidden; position:absolute; top:0; right:0;}
/*主要產品*/
.i_product_bg{ overflow:hidden; background-repeat:no-repeat; background-position:center bottom; background-size:cover;}
.i_title{ text-align:center; overflow:hidden; margin-top:6%; color:#333333;}
/*全方位的金融平台*/
.i_two{ margin-top:5%; margin-bottom:2%; display:flex;}
.i_two ul{ width:100%;}
.i_two ul li{ float:left; width:32%; margin-right:2%;transition:all 0.3s; margin-bottom:2%;}
.i_two ul li:hover{ background:url(../images/i_bg1.png) center bottom no-repeat; background-size:100% auto;}
.i_two ul li:nth-child(3n+0){ margin-right:0;}
.i_two ul li:nth-child(3n+1){ clear:both;}
.i_two ul li i{ display:block; width:165px; height:152px; margin:0 auto;  position:relative;}
.i_two ul li i:after{ content:""; position:absolute; top:0; left:0; width:100%; height:100%;background:url(../images/i_bg9.png) no-repeat; background-size:100% 100%;transition:all 0.6s;}
.i_two ul li:hover i:after{transform: rotate(180deg);}
.i_two ul li i img{ width:100%;transition:all 0.6s;}
.i_two ul li:hover i img{transform: rotate(-60deg);}
.i_two ul li .h3{ font-weight:normal; color:#333333; overflow:hidden; text-align:center; font-size:26px;margin-top:53px; line-height:36px; height:36px;white-space:nowrap;text-overflow:ellipsis;}
.i_two ul li .p{ width:90%; max-width:330px; margin:0 auto;  overflow:hidden; margin-top:15px; line-height:30px; color:#999999; font-size:16px;text-align:center; margin-bottom:40px;}
/*弹窗*/
.dialog5{position: fixed;width:470px;  left: 0%; bottom:0; z-index: 2147483601;}
.dialog5 #show_con{width:100%; position:relative; z-index:2; background:#004a97;  bottom:0%; }
.dialog5 #show_con .txts{font-size:14px;  line-height:26px; padding:30px; overflow:hidden;/* text-align:justify; text-justify:inter-ideograph;*/ color:#fff;}
.dialog5 #show_con .txts .h3{ margin-top:5px;line-height:30px; color:#fff; font-size:18px; font-weight:bold; margin-bottom:25px;}
.dialog5 #show_con .closed{ cursor:pointer; position:absolute; top:10px; height:16px; right:3%; text-decoration:none; font-size:16px; color:#e3a604; font-weight:bold;}
/*.dialog5 .bgs{background:#000; opacity:0.5;filter:alpha(opacity=50); position:absolute; left:0px; top:0px; height:100%; width:100%;}*/
@media screen and (max-width: 1800px) {
/*轮显*/
.banner_page{ margin-left:-48%;}
.banner_tit{margin-left:-48%;}
}
@media screen and (max-width: 1600px) {
/*登录*/
.i_login .boxs{ height:340px; margin-top:-170px;}
.i_login .boxs .img{ height:60px;}
.i_login .boxs .inputs2{ margin-top:15px; height:46px; line-height:46px;}
.i_login .boxs .bnts2{ margin-top:20px;height:46px; line-height:46px;}
.i_login .boxs .content{ line-height:26px; font-size:14px;}

}
@media screen and (max-width: 1400px) {
/*轮显*/
.main .banner .down{ bottom:35px;}
.banner_page{ bottom:35px;}
.main .banner .btn{ bottom:75px;}
.banner_tit{ bottom:125px;}
/*登录*/
.i_login .boxs{ height:310px; margin-top:-155px; /*width:380px;*/}
.i_login .boxs .img{ height:52px; margin-top:16px;}
.i_login .boxs .inputs2{ margin-top:10px; height:42px; line-height:42px; font-size:14px;}
.i_login .boxs .bnts2{ margin-top:15px;height:42px; line-height:42px; font-size:16px;}
.i_login .boxs .content{ line-height:24px; font-size:13px;}
}

@media screen and (max-width: 1260px) {
/*轮显*/
.banner_page{ bottom:30px;}
.main .banner .btn{ bottom:70px;}
.banner_tit{ bottom:120px; font-size:17px;}
/*弹窗*/
.dialog5 #show_con .txts{ padding:20px;}
.dialog5 #show_con .txts .h3{ margin-bottom:15px;}
}
@media screen and (max-width: 1200px) {
/*登录*/
.i_login{ display:none;}
/*全方位的金融平台*/
.i_two ul li .h3{ font-size:22px; margin-top:40px;}
.i_two ul li .p{ margin-top:10px; line-height:26px; font-size:15px;}
}
@media screen and (max-width: 1100px) {


}

@media screen and (max-width: 960px) {
/*轮显*/
.banner_page .current{ font-size:26px;}
.main .banner .btn{ bottom:60px;}
.main .banner .btn .boxs{ width:72px;}
.main .banner .swiper-button-prev, .main .banner .swiper-button-next, .main .banner .swiper_button_play{ width:32px; height:32px;}
.banner_page{ line-height:32px; width:92px; bottom:28px; font-size:13px;}
.banner_page .a:before{ width:32px; height:32px;}
.banner_tit{ bottom:118px; font-size:16px;}
/*第一屏*/
.i_one .i_one_l{ float:none; width:100%;}
.i_one .i_one_l .bgs{ background-size:50px 50px;}
.i_one .i_one_r{ width:100%; position:relative;}

/*全方位的金融平台*/
.i_two ul li{ width:49%; margin-bottom:4%;}
.i_two ul li:nth-child(3n+0){ margin-right:2%;}
.i_two ul li:nth-child(2n+0){ margin-right:0%;}
.i_two ul li:nth-child(3n+1){ clear:none;}
.i_two ul li:nth-child(2n+1){ clear:both;}
.i_two ul li i{ width:150px; height:138px;}
/*弹窗*/
.dialog5{ width:360px;}
}

@media screen and (max-width: 780px) {
/*弹窗*/
.dialog5{ width:300px;}

}
@media screen and (max-width: 640px) {
/*轮显*/
.main .banner .down{bottom:20px;}
.main .banner .btn{bottom:55px;}
.banner_tit{ bottom:100px; font-size:15px;}
/*全方位的金融平台*/
.i_two{ margin-bottom:6%;}
.i_two ul li i{ width:140px; height:129px;}
.i_two ul li .h3{ margin-top:20px; font-size:20px; height:30px; line-height:30px;}
.i_two ul li .p{ font-size:14px; line-height:24px; margin-bottom:20px;}
/*弹窗*/
.dialog5{ width:250px;}
.dialog5 #show_con .txts{ padding:12px;}
.dialog5 #show_con .txts .h3{ font-size:16px; /*height:30px;*/ line-height:30px; margin-bottom:10px; margin-top:5px;}
.dialog5 #show_con .txts{ font-size:13px; line-height:24px;}
.dialog5 #show_con .closed{ right:4%;}
}

@media screen and (max-width: 480px) {
/*轮显*/
.main .banner .down{bottom:18px;}
.main .banner .btn{bottom:52px;}
.banner_page{ bottom:20px;}
.banner_tit{ bottom:70px; font-size:14px; line-height:26px;}
/*全方位的金融平台*/
.i_two ul li i{ width:110px; height:101px;}
.i_two ul li .h3{ font-size:18px;}
.i_two ul li .p{ font-size:13px; line-height:22px;}
/*弹窗*/
.dialog5{ width:220px;}
.dialog5 #show_con .txts{ padding:10px;}
.dialog5 #show_con .txts .h3{ font-size:15px;/* height:26px;*/ line-height:26px; margin-bottom:8px; margin-top:10px; }
.dialog5 #show_con .txts{ font-size:12px; line-height:22px;}
.dialog5 #show_con .closed{ height:12px;}
}
@media screen and (max-width: 420px) {
/*全方位的金融平台*/
.i_two ul li .h3{ font-size:16px; height:26px; line-height:26px;}
.i_two ul li .p{ margin-top:5px;}
}
@media screen and (max-width: 360px) {

}
@keyframes mymove6
{
	from {filter:alpha(opacity=0);opacity:0;  -webkit-transform: translateY(100px) translateX(0);
  -moz-transform: translateY(60px) translateX(0);
  transform: translateY(60px) translateX(0);
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;}
	to { filter:alpha(opacity=100);opacity:1; -webkit-transform: translateY(0px) translateX(0);
  -moz-transform: translateY(0px) translateX(0);
  transform: translateY(0px) translateX(0);}
}

@-webkit-keyframes mymove6
{
	/*from { filter:alpha(opacity=0);opacity:0; margin-bottom:-20%;}
	to {margin-bottom:3%;filter:alpha(opacity=1);opacity:1;}*/
	from {filter:alpha(opacity=0);opacity:0;  -webkit-transform: translateY(100px) translateX(0);
  -moz-transform: translateY(60px) translateX(0);
  transform: translateY(60px) translateX(0);
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;}
	to { filter:alpha(opacity=100);opacity:1; -webkit-transform: translateY(0px) translateX(0);
  -moz-transform: translateY(0px) translateX(0);
  transform: translateY(0px) translateX(0);}
}

@keyframes animate1 {
  0% {
    transform: translate(-50%, 0%);
  }
  50% {
    transform: translate(-50%, 50%);
  }
  100% {
    transform: translate(-50%, 0%);
  }
}
/*圆圈*/
.cycle-box ,
.cycle-box * {
        box-sizing: border-box;
}
.cycle-box .cycle-son::before{box-sizing: border-box;}
.cycle-box .cycle-son::after{box-sizing: border-box;}

.cycle-box {
  --size: 40px;
  --time: 4s;
  width: var(--size);
  height: var(--size);
}
.cycle-box .cycle-son {
  position: absolute;
  top: 0;
  height: var(--size);
  width: calc(var(--size)*0.5);
  overflow: hidden;
}
.cycle-box .cycle-son::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
 
}
.cycle-box .left-c {
  left: 0;
}
.cycle-box .left-c::before {
  transform-origin: right center;
  border-radius: calc(var(--size)*0.5) 0 0 calc(var(--size)*0.5);
  border: 1px solid #ffffff;
  border-right: 0;
  transform: rotate(-180deg);
}
.cycle-box .right-c {
  right: 0;
}
.cycle-box .right-c::before {
  transform-origin: left center;
  border-radius: 0 calc(var(--size)*0.5) calc(var(--size)*0.5) 0;
  border: 1px solid #ffffff;
  border-left: 0;
  transform: rotate(-180deg);
}
.cycle-box.run .left-c::before {
  animation: cycle-left var(--time) linear;
}
.cycle-box.run .right-c {
  right: 0;
}
.cycle-box.run .right-c::before {
  animation: cycle-right var(--time) linear;
}
@keyframes cycle-left {
  0% {
    transform: rotate(-180deg);
  }
  50% {
    transform: rotate(-180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes cycle-right {
  0% {
    transform: rotate(-180deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.btn .swiper-btn .cycle-box {
  position: absolute;
  left: -1px;
  top: -1px;
}
@media (max-width: 1200px) {
  .btn .swiper-btn {
    width: 0.6rem;
    height: 0.6rem;
  }
  .btn .swiper-btn .cycle-box {
    --size: 0.6rem;
  }
}
