@charset "utf-8";

#content { margin: 0; padding: 0;}
.page-banner { display: none; }

.container{ padding: 0; margin: 0; }

.rowGroup { padding: 30em 10em 30em 15em; box-sizing: border-box; }
.hd-cloumn { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30rem; }
.hd-cloumn h3 { flex-shrink: 0; display: flex; flex-direction: column; gap: 10em; }
.hd-cloumn h3 a,
.hd-cloumn li { font-size: var(--text-title-font); font-weight: bold; }
.hd-cloumn .eng { font-size: var(--text-intro-font); color: var(--color-text-date); display: flex; text-transform: uppercase; line-height: 20rem; align-items: center; gap: 5rem; }
.hd-cloumn .eng::before { content: "\E719"; font-family: iconfont; color: #006EB3; font-size: 3em; position: relative; top: -4rem;}
.hd-cloumn .more { padding: 0 20rem 0 25rem; transition: 0.5s; flex-shrink: 0; gap: 4px; border: 1px solid #ddd; border-radius: 50rem; line-height: 2.375em; display: flex; align-items: center; font-size: var(--text-title3-font); color: var(--color-text-date); }
.hd-cloumn .more::after { content: "\E709"; font-family: iconfont; font-size: 1.2em; }
.hd-cloumn .more:hover { padding-left: 30rem; padding-right: 15rem; border-color: var(--color-default); background-color: var(--color-default); color: #fff; }
.hd-cloumn ul { display: flex; gap: 60rem; position: relative; }
.hd-cloumn ul::before { display: block; content: ""; background-color: rgba(255, 255, 255, 0.2); width: 20rem; height: 2px; position: absolute; top: 50%; transform: translate(-50%,-50%); left: 50%; }
.hd-cloumn li a { color: rgba(255, 255, 255, 0.5); transition: 0.5s; }
.hd-cloumn li.active a { color: #fff; } 
.hd-cloumn-center { justify-content: center; position: relative; padding-bottom: 10rem; margin-bottom: 50rem; }
.hd-cloumn-center::after { display: block; position: absolute; bottom: 0; left: 0; right: 0; content: ""; height: 1px; background: linear-gradient(90deg, rgba(223, 228, 241, 0) 0%, rgba(223, 228, 241, 0) 25%, #DFE4F1 50%, rgba(223, 228, 241, 0) 75%, rgba(223, 228, 241, 0) 100%); }
.hd-cloumn-center .more { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.hd-cloumn-center h3 { align-items: center; }
.hd-cloumn-center .eng::before { display: none; }
.hd-cloumn-center .eng::after { display: block; content: ""; background-size: cover; position: absolute; width: 32px; z-index: 1; height: 9px; background: url(../img/focus-blue.png) no-repeat; bottom: -5px; left: 50%; transform: translateX(-50%); }

/* section */
.bg01 { background: url(../img/row-bg01.jpg) no-repeat center; background-size: cover; }
.bg02 { background: url(../img/row-bg02.jpg) no-repeat center; background-size: cover; }
.bg04 { background: url(../img/row-bg04.jpg) no-repeat center; background-size: cover; }
.bg06 { background: linear-gradient(180deg, #E8F1F6 0%, rgba(232, 241, 246, 0) 100%); padding-bottom: 0;}
.bg07 { background: url(../img/row-bg05.jpg) no-repeat center bottom; background-size: cover; padding-bottom: 250em; }

/* swiper-banner */
.swiper-banner { width: 100%; height: auto;  }
.swiper-banner .pic video,
.swiper-banner .pic img { width: 100% !important; height: auto; object-fit: cover; }
.swiper-banner .pic a::after { display: block; content: ""; position: absolute; bottom: 0; right: 0; left: 0; height: 130rem; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%); }
.swiper-banner .swiper-slide-active { opacity: 1;}
.swiper-banner .swiper-pagination { bottom: 40rem; right: 0; z-index: 1; left: 0; display: flex; align-items: center; justify-content: center; }
.swiper-banner .swiper-pagination-bullets .swiper-pagination-bullet { transition: all 0.5s; width: 36px; height: 10px; display: flex; align-items: center; position: relative; margin: 0 5rem; opacity: 0.8; border-radius: 0; background: none; }
.swiper-banner .swiper-pagination-bullets .swiper-pagination-bullet::before { display: block; content: ""; width: 30px; height: 4px; background-color: rgba(255, 255, 255, 0.6); }
.swiper-banner .swiper-pagination-bullets .swiper-pagination-bullet-active { opacity: 1; background: url(../../base-new/img/focus-on.png) no-repeat center; background-size: cover;}
.swiper-banner .swiper-pagination-bullets .swiper-pagination-bullet-active::before { display: none; }
.swiper-banner .titleBg { background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%); position: absolute; width: 100%; height: 120rem; bottom: 0; left: 0; }
.swiper-banner .con { display: none; }
.swiper-banner .title { position: absolute; bottom: 20rem; left: 0; font-size: 18em; width: 100%; z-index: 2; line-height: 60rem; height: 60rem; color: #fff; text-align: left;}
.swiper-banner .title a { color: inherit; padding-left: 30rem;}

/* top-news */
.top-news { display: flex; flex-direction: column; height: 100%; }
.top-news li { flex: 1; display: flex; align-items: center; border-bottom: 1px solid #ddd; padding: 10em 0; position: relative; }
.top-news .con { transition: 0.5s; position: relative; z-index: 1; }
.top-news li::before,
.top-news li::after { display: block; content: ""; width: 0; transition: 0.4s; position: absolute; left: 0; }
.top-news li::before { height: 100%; background-color: var(--color-default); opacity: 0.1;}
.top-news li::after { height: 1px; background-color: var(--color-default); bottom: -1px; z-index: 5; }
.top-news li:hover::before,
.top-news li:hover::after { width: 100%; }
.top-news .title { display: flex; align-items: center; }
.top-news .title a { font-size: var(--text-title2-font);  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis;}
.top-news .title a::after { display: block; content: ""; inset: 0; position: absolute;  }
.top-news .date { flex-shrink: 0; width: 100em; gap: 5px; line-height: 1; margin-right: 20em; text-align: left; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.top-news .date::after { width: 1px; height: 100%; background-color: #ddd; content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.top-news .date .dd { font-weight: bold; color: var(--color-default); font-size: 32em; }
.top-news .date .ym { font-size: var(--text-title3-font); color: #999;}
.top-news li:hover .con { transform: translateX(10px);  }

/* bg02 ------------------------ */
.bg02 .hd-cloumn .more { color: #fff; }
.bg02 .hd-cloumn .more:hover { background-color: rgba(255, 255, 255, 0.2); }
.bg02 .list-info li,
.bg02 .list-topic .n { border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: #fff; }
.bg02 .list-info li a,
.bg02 .list-topic .n a { color: inherit; }
.bg02 .list-info .date,
.bg02 .list-topic .n .date { color: rgba(255, 255, 255, 0.5); }
.bg02 .list-info li:before,
.bg02 .list-topic .n:before { background-color: rgba(255, 255, 255, 0.2); }
.bg02 .list-info li:hover::before,
.bg02 .list-topic .n:hover::before { background-color: #fff; }
.bg02 .list-topic { padding-left: 1px; margin-top: 18rem; }
.bg02 .list-topic .t .intro { color: rgba(255, 255, 255, 0.5); }
.bg02 .list-topic .t .title { color: #fff; }
.bg02 .list-topic .t .title a { color: inherit; }

.list-topic .t { background-color: rgba(255, 255, 255, 0.1); border-radius: 10rem; overflow: hidden; }
.list-topic .t .title { display: flex; flex-direction: column; border-color: rgba(255, 255, 255, 0.1); gap: 10rem; position: relative; }
.list-topic .t .title a { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.list-topic .t .title .date { font-size: 0.875em; color: rgba(255,255,255,0.5); }
.list-topic .t .title::after { width: 100rem; transition: 0.5s; height: 1px; display: block; content: ""; position: absolute; bottom: -1px; left: 0; background-color: #fff; }
.list-topic .t .title:hover::after { width: 100%; }

/* bg03 ------------------------ */
.bg03 .container { padding-top: 30em; position: relative; }
.bg03 .bg { background: url(../img/row-bg03.png) no-repeat center top; background-size: 100% auto; position: absolute; top: 0; left: 0; right: 0; height: 336em; }
.bg03 .bd { position: relative; }


/* slide-container1 */
.slide-container1 .pic a { position: relative; display: block; height: 0; overflow: hidden; padding-bottom: 242.3%; }
.slide-container1 .pic img { position: absolute;  z-index: 1 position: relative; left: 0; top: 0; width: 100%; height: 100%; transition: .5s; object-fit: cover;}


/* 容器支持 3D 变换 */
.box-fusion .swiper-wrapper { transform-style: preserve-3d; pointer-events: none; }

/* 所有 slide 默认圆弧排列 */
.box-fusion .swiper-slide { transition: all 0.8s cubic-bezier(0.3, 0, 0.2, 1); overflow: hidden; position: relative; transform-origin: center center; }
.box-fusion .swiper-slide .pic { border-radius: 10rem; overflow: hidden; }
.box-fusion .swiper-slide img { height: 520em; }

/* 只加透视，不破坏布局 */
.box-fusion { perspective: 1000px; touch-action: pan-y; overflow: visible !important; transform-style: preserve-3d; }
.box-fusion .swiper-wrapper { transform-style: preserve-3d; }

/* 所有slide统一过渡，不改变宽度间距 */
.box-fusion .swiper-slide { transition: transform 0.8s ease; backface-visibility: visible; transform-style: preserve-3d; opacity: 0; }

/* 中间保持正视（不倾斜、不变形） */
.box-fusion .swiper-slide-active { transform: rotateY(0deg); }

/* 左侧依次倾斜 pr1 → pr4 */
.box-fusion .pr1 { transform: translate3d(-58.5em, 0, -337.5em) rotateY(20deg); }
.box-fusion .pr2 { transform: translate3d(-58.5em, 0, -217.5em) rotateY(40deg); opacity: 1; }
.box-fusion .pr3 { transform: translate3d(18em, 0, -24em) rotateY(60deg); opacity: 1; }
.box-fusion .pr4 { transform: translate3d(18em, 0, -24em) rotateY(60deg); }

/* 右侧依次倾斜 ne1 → ne4 */
.box-fusion .ne1 { transform: translate3d(58.5em, 0, -337.5em) rotateY(-20deg); }
.box-fusion .ne2 { transform: translate3d(58.5em, 0, -217.5em) rotateY(-40deg); opacity: 1; }
.box-fusion .ne3 { transform: translate3d(-18em, 0, -24em) rotateY(-60deg); opacity: 1; }
.box-fusion .ne4 { transform: translate3d(-18em, 0, -24em) rotateY(-60deg); }

/* item-flex */
.item-flex { display: flex; align-self: stretch; padding: 10em 10em 10em 0;}
.item-flex .title { font-size: var(--text-menue-font); margin-bottom: 10rem; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.item-flex .intro { color: var(--color-text-intro); line-height: 1.6; font-size: var(--text-intro-font); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; }
.item-flex .date { font-size: var(--text-title3-font);  flex-shrink: 0; align-self: stretch; justify-content: center; border-right: 1px solid var(--color-border-table); display:flex; flex-direction: column; gap: 10rem; line-height: 1; padding: 0 25rem; margin-right: 25rem; }
.item-flex .date .dd { font-size: 2em; }
.item-flex .date .ym { color: var(--color-text-intro); }
.item-flex .con { flex: 1; min-width: 0; }

/* box-fusion2 */
.box-fusion2 { border-radius: 10rem; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2); z-index: 2; margin: 0 auto;}
.box-fusion2 .swiper-slide .pic { position: relative; display: block; height: 0; overflow: hidden; padding-bottom: 59.72%; }
.box-fusion2 .swiper-slide .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.5s }
.box-fusion2 .swiper-slide .pic:hover img { transform: scale(1.05); }

.swiBtn a { display: flex; transition: 0.5s; align-items: center; justify-content: center; z-index: 5; position: absolute; top: 40%; transform: translateY(-50%); width: 50em; height: 50em; border-radius: 100%; background-color: rgba(255, 255, 255, 0.6);  }
.swiBtn a::before { content: "\E686"; font-family: iconfont; font-size: var(--text-menue-font); color: var(--color-default); }
.swiBtn a.prev { left: 25em; }
.swiBtn a.next { right: 25em; }
.swiBtn a.next::before { content: "\E687"; }
.swiBtn a:hover { background-color: var(--color-default); }
.swiBtn a:hover::before { color: #fff; }

/* slide-container3 */
.box-fusion3 { width: 720em; margin: 0 auto; padding: 20em 0; }


/* bg04 ------------------------ */

/* box-default-bg */
.box-default-bg .bd { background-color: #fff; padding: 20rem; border-radius: 10rem; }
.box-default-bg .list-topic .t .title { border-color: var(--color-border-table); }
.box-default-bg .list-topic .t .title::after,
.box-default-bg .list-topic .n:after { background-color: var(--color-default); }
.box-default-bg .list-topic .t .title .date { color: var(--color-text-date); }

/* top-list */
.top-list { display: flex; gap: 2.6%; }
.top-list li { flex-shrink: 0; width: 48.7%; box-sizing: border-box; transition: 0.5s; padding: 20rem; background: #fff url(../img/con-bg.png) no-repeat right bottom; border-radius: 10rem; }
.top-list .pic a { position: relative; display: block; height: 0; overflow: hidden; padding-bottom: 66.74%; }
.top-list .pic img { position: absolute; left: 0; top: 0; transition: 0.5s;}
.top-list .con { padding: 10rem 0; display: flex; gap: 8rem; flex-direction: column; transition: 0.4s; }
.top-list .title { font-size: var(--text-title2-font); line-height: 1.667em; height: 3.334em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; }
.top-list .intro { line-height: 1.714em; height: 3.428em; font-size: var(--text-intro-font); color: var(--color-text-intro);  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; }
.top-list .date { color: var(--color-text-date); font-size: var(--text-intro-font); }
.top-list li:hover { background-color: #006EB3; }
.top-list li:hover .con { transform: translateY(5px); }
.top-list li:hover .pic img { transform: scale(1.05); }
.top-list li:hover .title,
.top-list li:hover .intro,
.top-list li:hover .date { color: #fff; }
.top-list li:hover .title a { color: inherit; }


/* bg05 ------------------------ */

/* box-photo */
.box-photo .bd .pic { margin-bottom: 15rem; }
.box-photo .bd .pic a { position: relative; display: block; height: 0; overflow: hidden; padding-bottom: 66.5%; border-radius: 10rem; }
.box-photo .bd .pic img { position: absolute; left: 0; top: 0; transition: 0.5s; }
.box-photo .bd .pic:hover img { transform: scale(1.05); }
.box-photo .bd .title { line-height: 1.5; font-size: var(--text-title2-font); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; }


/* bg07 ------------------------ */

/* icon-list */
.icon-list { display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 30rem; }
.icon-list li { flex-shrink: 0; width: 32%; position: relative; margin-bottom: 15rem; }
.icon-list .in { text-align: center; transition: 0.4s; font-size: var(--text-title2-font); display: flex; flex-direction: column;  align-items: center;}
.icon-list i { width: 5.556em; height: 5.556em; overflow: hidden; padding: 0.5556em; position: relative; border-radius: 100%; background-color: #fff; margin-bottom: 20rem; }
.icon-list i::before,
.icon-list i::after { content: ""; border: 1px dashed var(--color-default); transition: 0.5s; border-radius: 100%; display: block; width: 100%; height: 100%; box-sizing: border-box; }
.icon-list i::after { border-style: solid; position: absolute; top: 50%; left: 50%; opacity: 0; transform: translate(-50%,-50%); width: 0; height: 0; }
.icon-list li:hover i::after { width: 85%; height: 85%; opacity: 1; }
.icon-list li:hover i::before { transform: scale(1.4); }
.icon-list li:hover .in { transform: translateY(-5px); }
.icon-list span { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; height: 100%; display: flex; justify-content: center; align-items: center;}
.icon-list span::before { font-family: iconfont; transition: 0.5s; color: var(--color-default); font-size: 3em; content: "\E710"; display: flex; }
.icon-list li a::after { position: absolute; inset: 0; display: block; content: ""; z-index: 3; }
.icon-list .li2 span::before { content: "\E711"; }
.icon-list .li3 span::before { content: "\E712"; }
.icon-list .li4 span::before { content: "\E713"; }
.icon-list .li5 span::before { content: "\E714"; }
.icon-list .li6 span::before { content: "\E715"; }
.icon-list .li7 span::before { content: "\E716"; }
.icon-list .li8 span::before { content: "\E717"; }
.icon-list .li9 span::before { content: "\E718"; }
.icon-list li:hover span::before { transform: rotateY(180deg); }

/* index-nav --------------------------- */
.index-nav { position: fixed; right: 10px; top: 50%; transform: translateY(-50%); z-index: 8; width: 100px; }
.index-nav .inner::before,
.index-nav .inner::after { display: block; content: ""; width: 100%; background: url(../img/side-fixed-bg.png) no-repeat; position: relative; }
.index-nav .inner::before { background-position: center top; height: 35px; bottom: -2px; }
.index-nav .inner::after { background-position: center bottom; height: 25px; top: -2px;}
.index-nav .bd { background: #0f6aa4; position: relative; z-index: 1;}
.index-nav .bd li { font-size: var(--text-title3-font); line-height: 2.5em; cursor: pointer; }
.index-nav .bd li a { color: #fff;}
.index-nav .bd li:hover { background-color: rgba(0,0,0,0.2); }
.index-nav .bd li.goTop a { display: flex; justify-content: center; flex-direction: column; line-height: 1.2; padding-bottom: 10rem;}
.index-nav .bd li.goTop a::before { content: "\E708"; font-family: iconfont; font-size: 2em; }

#goTop { display: none !important; }


/* @media ------------------------ */
@media (min-width:768px) {
   
   .bg03 .container { padding-top: 50em; }
   .item-flex { padding-top: 20em; padding-bottom: 20em; }

}   

@media (min-width: 992px) {

    .bg03 .container { padding-top: 60em; }
    .top-news li { padding: 0; }

    .top-list .con { padding: 13em; }
    .bg04 .list-topic .n:nth-child(3) { display: none; }
    .box-fusion2 { padding: 0 10em 10em; border-radius: 0; box-shadow: none; }
    .box-fusion2 .swiper-slide { border-radius: 10rem; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2); }
}   

@media (min-width: 1200px) {
    
    /* swiper-banner */
    .swiper-banner { height: 100vh; }
    .swiper-banner .pic video { width: 100% !important; height: 100% !important; }
    .swiper-banner .swiper-slide .pic img { width: 100%; height: calc(100vh + 80px); transform: translateY(0); transition: 1s linear 2s; object-fit: cover; }
    .swiper-banner .swiper-slide-active .pic img { transition: 8s linear; transform: translateY(-80px); }

    .bg03 .container { overflow: hidden; }
    .bg03 .bd { margin-bottom: 20em; }
    .box-fusion .item-flex,
    .box-fusion2 .item-flex { display: none; }
    .box-fusion2 { position: absolute; padding: 0; border-radius: 10rem; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);  top: 50%; left: 50%; width: 720em; height: 430em; margin-left: -360em; margin-top: -215em;  }
    .box-fusion2 .swiper-slide { border-radius: 0; box-shadow: none; }

    .swiBtn a { top: 50%; }
    .item-flex { padding-top: 0; padding-bottom: 0; }

    .icon-list li { width: auto; }

    .top-list .con { padding: 6em; }
}


@media (min-width: 1400px) {
  .rowGroup { padding: 40rem 10rem; }
  .bg07 { padding: 0 0 250em 0; }

  .item-flex { padding-top: 20em; }
  .top-list .con { padding-top: 13em; padding-bottom: 13em; }
}


@media (min-width: 1600px) {
  .bg04 .list-topic .n:nth-child(3) { display: block; }

  .top-list .intro { height: 5.142em; -webkit-line-clamp: 3; }
  .top-list .con { padding-top: 10em; padding-bottom: 10em; }

  .box-fusion3 { padding: 0; }
  .bg03 .container { padding-top: 80em; }
  .bg03 .bd { margin-bottom: 10em; }
  .bg03 .hd-cloumn-center { margin-bottom: 30rem; }
  .item-flex { padding-top: 0; }

  .rowGroup { padding: 60rem 10rem; }
  .bg07 { padding: 0 0 250em 0; }
}

@media (min-width:1900px) {
	.box-fusion3 { margin-top: -30em; }
	.top-list .con { padding-top: 6em; padding-bottom: 6em;  }
	.top-list .intro { -webkit-line-clamp: 2; height: 3.52em; }
}