@charset "UTF-8";
/*
* @Author: DoDo
* @Date:   2020-07-06 10:27:55
* @Last Modified by:   DoDo
* @Last Modified time: 2021-01-04 19:16:31
*/
@font-face { font-family: "SourceHanSerifSC"; src: url("../fonts/SourceHanSerifSC-CN.ttf") format("truetype"); }
@font-face { font-family: "SourceHanSerifSCH"; src: url("../fonts/SourceHanSerifSC-Heavy.ttf") format("truetype"); }
body { font-family: "宋体","微软雅黑"; overflow-x: hidden; background: #f7f7f7; }

body.on { overflow: hidden; }

img { max-width: 100%; }

a { outline: none; }

@media screen and (min-width: 1460px) { .w1400.container { width: 1400px; } }
@media (min-width: 1460px) and (max-width: 1599px) { .w1400.container { width: 1100px; }
  .about-works-main { width: 1100px !important; }
  .index-works-swiper .swiper-slide.on0 { width: 248px !important; }
  .index-works-swiper .swiper-slide.on1 { width: 228px !important; }
  .index-works-swiper .swiper-slide.on1 .div-img { margin-top: 18px !important; }
  .index-works-swiper .swiper-slide.on2 { width: 204px !important; }
  .index-works-swiper .swiper-slide.on2 .div-img { margin-top: 38px !important; }
  .about-works-main .swiper-slide.on0 { width: 240px !important; }
  .about-works-main .swiper-slide.on1 { width: 210px !important; }
  .about-works-main .swiper-slide.on1 .div-img { margin-top: 28px !important; }
  .about-works-main .swiper-slide.on2 { width: 196px !important; }
  .about-works-main .swiper-slide.on2 .div-img { margin-top: 38px !important; } }
@media (min-width: 1366px) and (max-width: 1459px) { .w1400.container { width: 1050px; }
  .about-works-main { width: 1050px !important; }
  .index-works-swiper .swiper-slide.on0 { width: 238px !important; }
  .index-works-swiper .swiper-slide.on1 { width: 218px !important; }
  .index-works-swiper .swiper-slide.on1 .div-img { margin-top: 18px !important; }
  .index-works-swiper .swiper-slide.on2 { width: 194px !important; }
  .index-works-swiper .swiper-slide.on2 .div-img { margin-top: 38px !important; }
  .about-works-main .swiper-slide.on0 { width: 240px !important; }
  .about-works-main .swiper-slide.on1 { width: 210px !important; }
  .about-works-main .swiper-slide.on1 .div-img { margin-top: 28px !important; }
  .about-works-main .swiper-slide.on2 { width: 196px !important; }
  .about-works-main .swiper-slide.on2 .div-img { margin-top: 38px !important; } }
@media screen and (min-width: 1366px) { .container { width: 1200px; padding-left: 0; padding-right: 0; } }
.f0 { font-size: 0; }

.text-gradient { background: linear-gradient(to right, #a38414, #e2c354); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/*============================= public =============================*/
/* header */
.header { position: fixed; left: 0; right: 0; top: 3.7%; z-index: 100; padding-left: 2%; padding-right: 2%; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.header.scroll { top: 0; padding-top: 15px; padding-bottom: 15px; background: #e3ede5; }
.header.scroll .nav-two { top: 35px; }

.header-bream { position: relative; width: 38px; height: 21px; display: flex; align-items: center; justify-content: flex-end; cursor: pointer; margin-top: 18px; }
.header-bream span { display: inline-block; width: 28px; height: 3px; background: linear-gradient(to right, #e2c354, #a38414); -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.header-bream::before, .header-bream::after { content: " "; position: absolute; left: 0; width: 28px; height: 3px; background: linear-gradient(to right, #e2c354, #a38414); -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.header-bream::before { top: 0; }
.header-bream::after { bottom: 0; }
.header-bream.on span { filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; }
.header-bream.on::before { transform: rotate(45deg) translate(10px, 3px); }
.header-bream.on::after { transform: rotate(-45deg) translate(10px, -3px); }
.header-right {
    /* position: relative; */
    height: 21px;
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
    margin-top: 18px;
    align-items: center;}
.header-right .a-01{
        display: block;
        width: 40px;
        height: 40px;
        background: #c3a435;
        font-size: 14px;
        color: #fff;   
        font-family: "Arial";
        text-transform: uppercase;
        text-align: center;
        line-height: 40px;
        &.on{
            background: #007cc2;
        
    }
}
.nav-two { position: absolute; left: 20%; right: 10%; top: 20px; text-align: center; }
.nav-two ul { display: inline-block; white-space: nowrap; }
.nav-two ul li { float: left; margin-left: 60px; }
.nav-two ul li:first-child { margin-left: 0; }
.nav-two ul li a { position: relative; display: block; font-size: 16px; color: #111; line-height: 1; padding: 0 20px 19px; }
.nav-two ul li a::after { content: " "; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: #a28413; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.nav-two ul li:hover a::after, .nav-two ul li.on a::after { right: 0; }

.left-submenu { position: fixed; left: 0; bottom: 28px; top: 175px; z-index: 2; width: 160px; border-right: 2px solid #999; }
.left-submenu.ling { width: auto; border: none; }
.left-submenu.ling .nav-three::after { display: none; }

.nav-three::after { content: " "; position: absolute; right: -2px; top: 0; width: 2px; height: 60px; background: #dae0db; }
.nav-three ul li { margin-top: 30px; }
.nav-three ul li:first-child { margin-top: 0; }
.nav-three ul li .span-01 { padding-left: 50px; background: url("../images/line-05.png") left center no-repeat; }
.nav-three ul li .span-01 a { display: block; font-size: 14px; color: #666; line-height: 1.5; }
.nav-three ul li .span-01 a:hover { background: linear-gradient(to right, #a38414, #e2c354); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.nav-three ul li .span-01.on a { background: linear-gradient(to right, #a38414, #e2c354); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.nav-three ul li .div-down { margin-top: 12px; }
.nav-three ul li .span-02 { margin-left: 50px; padding-left: 10px; background: url("../images/bg-01.png") left center no-repeat; }
.nav-three ul li .span-02 a { font-size: 12px; line-height: 32px; color: #666; }
.nav-three ul li .span-02:hover, .nav-three ul li .span-02.on { background: url("../images/bg-01h.png") left center no-repeat; }
.nav-three ul li .span-02:hover a, .nav-three ul li .span-02.on a { background: linear-gradient(to right, #a38414, #e2c354); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.public-share { position: fixed; left: 40px; bottom: 28px; z-index: 2; }
.public-share .bshare-custom { display: flex; flex-direction: column; }
.public-share .bshare-custom a, .public-share .bshare-custom span { margin: 0 0 40px; padding: 0; width: 20px; height: 20px; background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; }
.public-share .bshare-custom a:last-child, .public-share .bshare-custom span:last-child { margin-bottom: 0; }
.public-share .bshare-custom a.bshare-more2, .public-share .bshare-custom span.bshare-more2 { display: inline-block; background-image: url("../images/s-icon1.png"); }
.public-share .bshare-custom a.bshare-weixin, .public-share .bshare-custom span.bshare-weixin { background-image: url("../images/s-icon2.png"); }
.public-share .bshare-custom a.bshare-qqim, .public-share .bshare-custom span.bshare-qqim { background-image: url("../images/s-icon3.png"); }
.public-share .bshare-custom a.bshare-sinaminiblog, .public-share .bshare-custom span.bshare-sinaminiblog { background-image: url("../images/s-icon4.png"); }

.bsTop { width: 100% !important; }

.bsFrameDiv > div { width: 100% !important; height: 208px !important; }
.bsFrameDiv > div img { width: 168px !important; height: 168px !important; }

#bsPanelHolder { display: none !important; }

#bsMorePanel { width: 100% !important; }

.bFind-wrapper-top { height: 26px !important; }

/*============================= index =============================*/
.index-scroll { position: fixed; right: 2%; bottom: 3.7%; z-index: 100; cursor: pointer; }

.index-scroll img { animation: banner_scroll 1.2s infinite linear; -moz-animation: banner_scroll 1.2s infinite linear; /* Firefox */ -webkit-animation: banner_scroll 1.2s infinite linear; /* Safari and Chrome */ -o-animation: banner_scroll 1.2s infinite linear; /* Opera */ }

@keyframes banner_scroll { 0% { transform: translateY(0); }
  25% { transform: translateY(-3px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(3px); }
  100% { transform: translateY(0); } }
.public-scal-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; min-height: 100%; -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("../images/index-bg.jpg"); }

.index .main { position: fixed; z-index: 1; width: 100%; left: 0; top: 0; bottom: 0; margin: 0; }

.index-bk { position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; transform: translateY(100%); -webkit-transform: translateY(100%); transition: 0.8s all; -webkit-transition: 0.8s all; display: flex; align-items: center; justify-content: center; }

.index-bk.index-bg { -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center; }

.no-ts .index-bk { top: 100%; transform: translateY(0%); -webkit-transform: translateY(0%); }

.no-ts .index-bk.index-1 { top: 0; }

.lt9 .no-ts .index-bk { top: 0; }

.index-bk.index-1 { z-index: 10; top: 0; transform: translateY(0%); -webkit-transform: translateY(0%); }

.index-bk.index-2 { z-index: 50; }

.index-bk.index-3 { z-index: 60; }

.index-bk.index-4 { z-index: 70; }

.index-bk.index-5 { z-index: 80; }

.index-bk.index-6 { z-index: 90; }

.index-bk.index-7 { z-index: 100; }

.anim2_down .index-1 { transform: translateY(-100%); -webkit-transform: translateY(-100%); }

.anim2_down .index-2 { transform: translateY(0%); -webkit-transform: translateY(0%); }

.anim2_up .index-1 { transform: translateY(-100%); -webkit-transform: translateY(-100%); }

.anim2_up .index-3 { transform: translateY(100%); -webkit-transform: translateY(100%); }

.anim2_up .index-2 { transform: translateY(0%); -webkit-transform: translateY(0%); }

.anim3_down .index-1 { transform: translateY(-100%); -webkit-transform: translateY(-100%); }

.anim3_down .index-2 { transform: translateY(-50%); -webkit-transform: translateY(-50%); }

.anim3_down .index-3 { transform: translateY(0%); -webkit-transform: translateY(0%); }

.anim3_up .index-2 { transform: translateY(-50%); -webkit-transform: translateY(-50%); }

.anim3_up .index-3 { transform: translateY(0%); -webkit-transform: translateY(0%); }

.anim3_up .index-4 { transform: translateY(100%); -webkit-transform: translateY(100%); }

.anim4_down .index-1 { transform: translateY(-100%); -webkit-transform: translateY(-100%); }

.anim4_down .index-2 { transform: translateY(-100%); -webkit-transform: translateY(-100%); }

.anim4_down .index-3 { transform: translateY(-50%); -webkit-transform: translateY(-50%); }

.anim4_down .index-4 { transform: translateY(0%); -webkit-transform: translateY(0%); }

.anim4_up .index-2 { transform: translateY(-100%); -webkit-transform: translateY(-100%); }

.anim4_up .index-3 { transform: translateY(-50%); -webkit-transform: translateY(-50%); }

.anim4_up .index-4 { transform: translateY(0%); -webkit-transform: translateY(0%); }

.anim4_up .index-5 { transform: translateY(100%); -webkit-transform: translateY(100%); }

.anim5_down .index-1 { transform: translateY(-100%); -webkit-transform: translateY(-100%); }

.anim5_down .index-2 { transform: translateY(-100%); -webkit-transform: translateY(-100%); }

.anim5_down .index-3 { transform: translateY(-100%); -webkit-transform: translateY(-100%); }

.anim5_down .index-4 { transform: translateY(-50%); -webkit-transform: translateY(-50%); }

.anim5_down .index-5 { transform: translateY(0%); -webkit-transform: translateY(0%); }

.anim5_up .index-1 { transform: translateY(-100%); -webkit-transform: translateY(-100%); }

.anim5_up .index-2 { transform: translateY(-100%); -webkit-transform: translateY(-100%); }

.anim5_up .index-3 { transform: translateY(-100%); -webkit-transform: translateY(-100%); }

.anim5_up .index-4 { transform: translateY(-50%); -webkit-transform: translateY(-50%); }

.anim5_up .index-5 { transform: translateY(0%); -webkit-transform: translateY(0%); }

.anim5_up .index-6 { transform: translateY(100%); -webkit-transform: translateY(100%); }

.anim6_down .index-1 { transform: translateY(-100%); -webkit-transform: translateY(-100%); }

.anim6_down .index-2 { transform: translateY(-100%); -webkit-transform: translateY(-100%); }

.anim6_down .index-3 { transform: translateY(-100%); -webkit-transform: translateY(-100%); }

.anim6_down .index-4 { transform: translateY(-100%); -webkit-transform: translateY(-100%); }

.anim6_down .index-5 { transform: translateY(-50%); -webkit-transform: translateY(-50%); }

.anim6_down .index-6 { transform: translateY(0%); -webkit-transform: translateY(0%); }

.index-main { position: relative; z-index: 2; }
.index-main > .public-scal-bg { display: none; }

.banner-owl .owl-dots { position: absolute; left: 0; right: 0; bottom: 3.7%; z-index: 20; line-height: normal; font-size: 0; text-align: center; }
.banner-owl .owl-dots button.owl-dot { width: 12px; height: 12px; border-radius: 50%; margin: 0 5px; background: url("../images/b-dot.png"); background-size: cover; }
.banner-owl .owl-dots button.owl-dot.active { background: url("../images/b-dots.png"); }

.banner-a1 { width: 100%; height: 100vh; }

.banner-a1 .public-scal-bg { position: static; width: 100%; height: 100vh; -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center; }

.banner-a1 .span-slogan { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }

.owl-item .banner-a1 .span-slogan img { width: auto; max-width: 80%; max-height: calc(0.7 * 100vh); }

.index-title { display: inline-block; margin-left: auto; margin-right: auto; font-size: 0; background-image: url("../images/line-01.png"); background-repeat: no-repeat; background-size: 100% 100%; background-position: center; }
.index-title .span-cn { font-size: 44px; color: #111; line-height: 78px; letter-spacing: 10px; padding-left: 20px; }
.index-title .span-en { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 60px; color: rgba(0, 0, 0, 0.05); text-transform: uppercase; white-space: nowrap; font-family: "SourceHanSerifSCH"; }

.index-title-en { font-size: 16px; line-height: 26px; margin-top: 6px; font-family: "SourceHanSerifSCH"; }

.index-about-main { margin-left: 100px; background: rgba(255, 255, 255, 0.4); margin-top: 50px; }

.index-about-left { float: left; width: calc(57% + 100px); margin-left: -100px; height: 502px; }

.index-about-owl { position: relative; top: 50px; }
.index-about-owl .owl-dots { position: absolute; left: 0; right: 30px; bottom: 30px; z-index: 20; line-height: normal; font-size: 0; text-align: right; }
.index-about-owl .owl-dots button.owl-dot { width: 10px; height: 10px; border-radius: 50%; margin-left: 10px; background: rgba(0, 0, 0, 0.4); background-size: cover; }
.index-about-owl .owl-dots button.owl-dot:first-child { margin-left: 0; }
.index-about-owl .owl-dots button.owl-dot.active { background: url("../images/b-dots.png"); }

.index-about-owl .owl-item img { display: none; }

.index-about-img { width: 100%; height: 502px; background-size: cover; background-repeat: no-repeat; background-position: center; }

.index-about-word { float: right; width: 43%; padding: 50px; }

.index-about-des { font-size: 16px; line-height: 36px; color: #333; margin-top: 30px; height: 180px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; text-align: justify; }

.index-about-title { position: relative; display: inline-block; font-size: 36px; line-height: 1; padding-top: 40px; padding-bottom: 20px; }
.index-about-title::after { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 5px; background: url("../images/line-02.png") left bottom repeat-x; background-size: 100% 5px; }

.index-about-more { float: right; width: 222px; margin-right: -50px; }
.index-about-more a { position: relative; display: inline-block; font-size: 22px; color: #111; line-height: 1; padding-bottom: 22px; margin-top: 50px; }
.index-about-more a::after { content: " "; position: absolute; left: 0; bottom: 0; height: 2px; background: url("../images/line-03.jpg") center no-repeat; background-size: 100% 2px; width: 222px; }

.index-works-swiper { margin-top: 52px; }

.index-works .swiper-button-prev, .index-works .swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); width: 24px; height: 37px; background-size: cover; background-repeat: no-repeat; background-position: center; font-size: 0; }
.index-works .swiper-button-prev::before, .index-works .swiper-button-prev::after, .index-works .swiper-button-next::before, .index-works .swiper-button-next::after { display: none; }
.index-works .swiper-button-prev { left: 10px; background-image: url("../images/arrow-left.png"); }
.index-works .swiper-button-prev:hover { background-image: url("../images/arrow-lefth.png"); }
.index-works .swiper-button-next { right: 10px; background-image: url("../images/arrow-right.png"); }
.index-works .swiper-button-next:hover { background-image: url("../images/arrow-righth.png"); }
@media (min-width: 1200px){
    .index-works .swiper-button-prev, .index-works .swiper-button-next{ -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
    }
}
@media (min-width: 1366px){
  .index-works .swiper-button-prev{
    left: -50px;
  }
  .index-works .swiper-button-next{
    right: -50px;
  }
    .index-works .swiper-button-prev, .index-works .swiper-button-next{
      margin-top: 0;
    }
}
@media (min-width: 1600px){
    .index-works .swiper-button-prev, .index-works .swiper-button-next{
      margin-top: 15px;
    }
}

.index-works-01 .div-img { position: relative; }
.index-works-01 .div-img .span-img { margin: 0 7px 15px; -webkit-box-shadow: 0 8px 4px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 8px 4px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 4px rgba(0, 0, 0, 0.3); }
.index-works-01 .div-img .span-img::after { content: " "; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.index-works-01 .div-img a { display: block; background-size: cover; background-position: center; background-repeat: no-repeat; }
.index-works-01 .div-img img { width: 100%; }

.index-works-swiper .swiper-slide-active .index-works-01 .div-img { position: relative; }
.index-works-swiper .swiper-slide-active .index-works-01 .div-img .span-img::after { filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; visibility: hidden; }
.index-works-swiper .swiper-slide-active .index-works-01 .dots { margin-top: 30px; }

.index-works-01.ling { padding-bottom: 0; }

.index-works-01 { position: relative; }

.index-works-01 .index-works-info { position: absolute; left: 22px; right: 22px; padding-bottom: 10px; bottom: 20px; background: url("../images/icon-02.png") left bottom no-repeat; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.index-works-01 .index-works-info .div-cn { font-size: 18px; color: #666; line-height: 28px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.index-works-01 .index-works-info .div-en { font-size: 16px; color: #666; line-height: 26px; margin-top: 2px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.index-works-01 .index-works-info .div-des { display: none; }

.index-works-swiper .swiper-slide-active .index-works-01 .index-works-info { display: none; }

.index-works-swiper .swiper-button-prev, .index-works-swiper .swiper-button-next, .gsty-active-swiper .swiper-button-prev, .gsty-active-swiper .swiper-button-next { width: 24px; height: 37px; background-size: cover; background-repeat: no-repeat; background-position: center; font-size: 0; }
.index-works-swiper .swiper-button-prev::before, .index-works-swiper .swiper-button-prev::after, .index-works-swiper .swiper-button-next::before, .index-works-swiper .swiper-button-next::after, .gsty-active-swiper .swiper-button-prev::before, .gsty-active-swiper .swiper-button-prev::after, .gsty-active-swiper .swiper-button-next::before, .gsty-active-swiper .swiper-button-next::after { display: none; }
.index-works-swiper .swiper-button-prev, .gsty-active-swiper .swiper-button-prev { left: 20px; background-image: url("../images/arrow-left.png"); }
.index-works-swiper .swiper-button-prev:hover, .gsty-active-swiper .swiper-button-prev:hover { background-image: url("../images/arrow-lefth.png"); }
.index-works-swiper .swiper-button-next, .gsty-active-swiper .swiper-button-next { right: 20px; background-image: url("../images/arrow-right.png"); }
.index-works-swiper .swiper-button-next:hover, .gsty-active-swiper .swiper-button-next:hover { background-image: url("../images/arrow-righth.png"); }

.index-works .swiper-pagination { position: static; margin-top: 30px; }

.index-works .swiper-pagination-bullet { width: 12px; height: 12px; background-size: cover; background-repeat: no-repeat; background-position: center; margin: 0 5px; background-image: url("../images/b-dot.png"); }
.index-works .swiper-pagination-bullet.swiper-pagination-bullet-active { background-image: url("../images/b-dots.png"); }

.about-works-details .div-01 { width: 1000px; margin: 30px auto 0; max-width: calc(100vw - 400px); text-align: center; display: none; }
.about-works-details .div-01 .div-year { font-size: 30px; line-height: 40px; color: #111; }
.about-works-details .div-01 .div-en { font-size: 18px; color: #666; line-height: 28px; }
.about-works-details .div-01 .div-des { display: none; font-size: 16px; color: #666; line-height: 30px; margin-top: 16px; }
.about-works-details .div-01.on { display: block; }

.about-works-swiper + .about-works-details .div-year { background: linear-gradient(to right, #a38414, #e2c354); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.about-works-swiper + .about-works-details .div-en { display: none; }
.about-works-swiper + .about-works-details .div-des { display: block; }

.about-works-main .index-works-swiper { margin-top: 0; }

.index-gsty-main { height: 580px; background: rgba(255, 255, 255, 0.4); margin-top: 107px; }

.index-gsty-left { float: left; width: 23.58%; padding-left: 50px; padding-right: 20px; padding-top: 55px; }

.index-gsty-title .div-cn { font-size: 26px; color: #111; }
.index-gsty-title .div-en { font-size: 18px; line-height: 28px; color: #111; }

.index-gsty-more { position: absolute; left: 50px; bottom: 110px; width: 14.28%; }
.index-gsty-more a { display: inline-block; font-size: 22px; color: #111; line-height: 1; padding-bottom: 22px; margin-top: 50px; }
.index-gsty-more::after { content: " "; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: url("../images/line-03.jpg") center no-repeat; background-size: 100% 2px; }

.index-gsty-right { float: right; width: 76.42%; }

.index-gsty-owl { position: relative; top: -50px; }
.index-gsty-owl .owl-dots { margin-top: 20px; margin-right: 20px; line-height: normal; font-size: 0; text-align: right; }
.index-gsty-owl .owl-dots button.owl-dot { width: 10px; height: 10px; border-radius: 50%; margin-left: 10px; background: rgba(0, 0, 0, 0.4); background-size: cover; }
.index-gsty-owl .owl-dots button.owl-dot:first-child { margin-left: 0; }
.index-gsty-owl .owl-dots button.owl-dot.active { background: url("../images/b-dots.png"); }

.index-gsty-owl .owl-item img { display: none; }

.index-gsty-img { width: 100%; height: 580px; background-size: cover; background-repeat: no-repeat; background-position: center; }

.news-main { padding-top: 80px; width: 100%; }

.index-news-owl { position: relative; margin-top: 50px; }
.index-news-owl .owl-dots { margin-top: 40px; line-height: normal; font-size: 0; text-align: center; }
.index-news-owl .owl-dots button.owl-dot { width: 10px; height: 10px; border-radius: 50%; margin-left: 10px; background: rgba(0, 0, 0, 0.4); background-size: cover; }
.index-news-owl .owl-dots button.owl-dot:first-child { margin-left: 0; }
.index-news-owl .owl-dots button.owl-dot.active { background: url("../images/b-dots.png"); }

.index-news-owl .owl-item .div-img img, .news-owl .owl-item .div-img img { display: none; }

.index-news-owl .owl-item .span-qiu img, .news-owl .owl-item .span-qiu img { width: auto; }

.index-news-a1 { background: rgba(255, 255, 255, 0.6); padding: 60px 40px 40px; }
.index-news-a1 .div-img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 10; background-size: cover; background-repeat: no-repeat; background-position: center; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.index-news-a1 .span-date { position: relative; font-size: 0; }
.index-news-a1 .span-date .bdo-cont { position: relative; z-index: 1; padding-left: 50px; font-size: 8px; line-height: 14px; color: #a28413; }
.index-news-a1 .span-date .bdo-num { position: absolute; left: 0; bottom: -2px; font-size: 36px; line-height: 1; font-family: "SourceHanSerifSCH"; }
.index-news-a1 .span-date::after { content: " "; position: absolute; left: 0; right: -9px; bottom: 0; top: 1px; background: #e5e5e5; }
.index-news-a1 .div-title { font-size: 16px; color: #111; line-height: 28px; margin-top: 42px; height: 56px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.index-news-a1 .div-des { font-size: 14px; line-height: 26px; color: #666; margin-top: 16px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; text-align: justify; }
.index-news-a1 .span-qiu { position: relative; margin-top: 110px; }
.index-news-a1 .span-qiu::after { content: " "; position: absolute; left: 40px; top: 50%; transform: translateY(-50%); right: 0; height: 2px; background: #e5e5e5; }
.index-news-a1 .span-qiu img { animation: dot_scroll 1.2s infinite linear; -moz-animation: dot_scroll 1.2s infinite linear; /* Firefox */ -webkit-animation: dot_scroll 1.2s infinite linear; /* Safari and Chrome */ -o-animation: dot_scroll 1.2s infinite linear; /* Opera */ }

@keyframes dot_scroll { 0% { transform: translateX(0); }
  25% { transform: translateX(3px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(3px); }
  100% { transform: translateX(0); } }
.index-contact-main { display: flex; align-items: center; justify-content: space-between; padding-left: 50px; padding-right: 50px; padding-top: 53px; }
.index-contact-main::before, .index-contact-main::after { display: none; }

.index-contact-cont { width: 49.23%; }

.index-contact-list li { padding-left: 47px; background-position: left top; background-repeat: no-repeat; line-height: 30px; margin-top: 42px; font-size: 20px; color: #111; }
.index-contact-list li:first-child { margin-top: 0; }

.index-contact-ewm { display: flex; justify-content: space-between; padding-top: 20px; }
.index-contact-ewm .div-01 { padding: 20px 20px 10px; background: rgba(255, 255, 255, 0.4); margin-top: 20px; }
.index-contact-ewm .div-01 .div-txt { font-size: 18px; color: #111; text-align: center; line-height: 28px; margin-top: 15px; }

.index-contact-copy { font-size: 16px; color: #111; padding-top: 30px; }

.index-contact-map { width: 38.46%; border-radius: 50%; background: url("../images/pic-map-bg.png") center no-repeat; background-size: cover; padding: 20px; }
.index-contact-map img { width: 100%; }

/*============================= 23_资讯与动态_列表页 =============================*/
.public-main { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; max-width: 100%; height: 100%; min-height: 100vh; }
.public-main.ling { padding-top: 155px; padding-bottom: 30px; }
.public-main.ling2 { padding-top: 120px; }
.public-main .public-scal-bg { position: fixed; left: 0; top: 0; right: 0; bottom: 0; }

.fullScroll-main { width: 100vw; min-height: 100vh; overflow: hidden; }

.news-owl .owl-nav { display: flex; justify-content: space-between; margin-top: 40px; }
.news-owl .owl-nav button.owl-next, .news-owl .owl-nav button.owl-prev { font-size: 0; background-size: cover; background-position: center; background-repeat: no-repeat; width: 24px; height: 37px; }
.news-owl .owl-nav button.owl-prev { background-image: url("../images/arrow-left.png"); }
.news-owl .owl-nav button.owl-prev:hover { background-image: url("../images/arrow-lefth.png"); }
.news-owl .owl-nav button.owl-next { background-image: url("../images/arrow-right.png"); }
.news-owl .owl-nav button.owl-next:hover { background-image: url("../images/arrow-righth.png"); }
.news-owl .index-news-a1 { padding-top: 40px; }
.news-owl .index-news-a1 .span-date .bdo-cont { font-size: 18px; padding: 0 10px; line-height: 22px; }
.news-owl .index-news-a1 .span-date::after { top: 2px; }
.news-owl .index-news-a1 .div-title { line-height: 30px; font-size: 18px; }
.news-owl .index-news-a1 .div-des { line-height: 30px; font-size: 16px; color: #333; margin-top: 24px; }
.news-owl .index-news-a1 .span-qiu { margin-top: 68px; }

/*============================= 07_成桥作品_影视音乐作品 =============================*/
.works-music-main { display: flex; flex-direction: row; flex-wrap: wrap; }
.works-music-main::before, .works-music-main::after { display: none; }

.works-music-a1 { padding-top: 48px; margin-bottom: 63px; }
.works-music-a1 .span-num { position: absolute; left: 0; top: 0; font-size: 68px; line-height: 1; filter: alpha(opacity=50); -moz-opacity: .5; -khtml-opacity: .5; opacity: .5; }
.works-music-a1 .span-img { position: relative; z-index: 2; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); }
.works-music-a1 .span-img .bdo-img { background-size: cover; background-repeat: no-repeat; background-position: center; padding-top: 142%; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }
.works-music-a1 .div-name { font-size: 24px; color: #111; line-height: 34px; margin-top: 16px; }
.works-music-a1 .div-des { font-size: 16px; color: #666; margin-top: 9px; }
.works-music-a1:hover .span-img .bdo-img { transform: scale(1.1); }

.z-10 { position: relative; z-index: 10; }

/*============================= 26_联系成桥 =============================*/
.contact-main .index-contact-ewm .div-txt { font-size: 16px; margin-top: 5px; }
.contact-main .index-contact-map { padding: 15px; background: url("../images/pic-map-bg2.png") center no-repeat; background-size: cover; }

/*============================= 24_资讯与动态_详情页 =============================*/
.news-art { padding: 60px; background: rgba(255, 255, 255, 0.3); }
.news-art .div-des { font-size: 16px; color: #666; line-height: 30px; margin-top: 23px; text-align: justify; }

.news-art-title { padding-bottom: 13px; border-bottom: 2px solid rgba(255, 255, 255, 0.4); }
.news-art-title .span-date { position: relative; font-size: 18px; color: #a28413; line-height: 28px; padding: 0 10px; }
.news-art-title .span-date::after { content: " "; position: absolute; left: 0; top: 3px; right: 0; bottom: 0; background: #e5e5e5; z-index: -1; }
.news-art-title .div-title { font-size: 30px; color: #111; line-height: 40px; margin-top: 15px; }

.news-pages { display: flex; justify-content: space-between; align-items: center; margin-top: 33px; }
.news-pages a { display: inline-block; width: 24px; height: 37px; background-size: cover; background-position: center; background-repeat: no-repeat; }
.news-pages .a-prev { background-image: url("../images/arrow-left.png"); }
.news-pages .a-prev:hover { background-image: url("../images/arrow-lefth.png"); }
.news-pages .a-next { background-image: url("../images/arrow-right.png"); }
.news-pages .a-next:hover { background-image: url("../images/arrow-righth.png"); }

/*============================= 18_古诗童韵_原创音乐作品_作品欣赏 =============================*/
.works-show-title { position: relative; font-size: 18px; line-height: 28px; color: #111; padding-top: 20px; }
.works-show-title::before { content: " "; position: absolute; left: 0; top: 2px; width: 80px; height: 1px; background: #a28413; }
.works-show-title::after { content: " "; position: absolute; left: 85px; top: 0; width: 21px; height: 5px; background: url("../images/icon-01.png") center no-repeat; animation: dot_scroll 1.2s infinite linear; -moz-animation: dot_scroll 1.2s infinite linear; /* Firefox */ -webkit-animation: dot_scroll 1.2s infinite linear; /* Safari and Chrome */ -o-animation: dot_scroll 1.2s infinite linear; /* Opera */ }

.works-show-cont { margin-top: 75px; }

.works-show-01 { display: flex; justify-content: space-between; margin-bottom: 100px; }
.works-show-01 .div-img { width: 260px; max-width: 45%; }
.works-show-01 .div-img .a-img { display: block; padding-top: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }
.works-show-01 .div-cont { width: 280px; max-width: 50%; }
.works-show-01 .div-title a { display: inline-block; font-size: 18px; color: #111; line-height: 34px; overflow: hidden; text-overflow: ellipsis; /* white-space: nowrap; */ -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.works-show-01 .div-info { font-size: 16px; line-height: 30px; color: #666; margin-top: 10px; }
.works-show-01 .a-play { position: relative; padding-left: 34px; background: url("../images/icon-03.png") left center no-repeat; font-size: 20px; color: #111; line-height: 70px; margin-top: 10px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.works-show-01 .a-play::after { content: " "; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: url("../images/line-03.jpg") center no-repeat; background-size: cover; }

/*============================= 08_成桥作品_舞台剧 =============================*/
.works-living-list li { display: flex; justify-content: space-between; align-items: center; margin-bottom: 100px; }
.works-living-list li .div-img { width: 32.14%; }
.works-living-list li .div-cont { width: 62.85%; }
.works-living-list li .div-title a { display: inline-block; font-size: 24px; color: #111; line-height: 34px; }
.works-living-list li .div-des { font-size: 16px; color: #333; line-height: 30px; margin-top: 17px; max-height: 60px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.works-living-list li .div-dimg { display: flex; flex-wrap: wrap; padding-top: 30px; }
.works-living-list li .div-dimg .span-img { position: relative; margin: 0 6px; width: 100px; height: 100px; cursor: pointer; margin-top: 10px; }
.works-living-list li .div-dimg .span-img .bdo-img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-size: cover; background-repeat: no-repeat; background-position: center; }
.works-living-list li .div-dimg .span-img .bdo-mc { display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; background: rgba(0, 0, 0, 0.8); border: 2px solid #9e873b; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.works-living-list li .div-more { margin-top: 45px; }
.works-living-list li .div-more a { position: relative; display: inline-block; width: 200px; max-width: 100%; font-size: 22px; line-height: 1.5; color: #111; padding-bottom: 16px; }
.works-living-list li .div-more a::after { content: " "; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: url("../images/line-03.jpg") center no-repeat; background-size: cover; }

/*============================= 13_古诗童韵_关于《古诗童韵》_简介 =============================*/
.know-right-word .index-about-des, .gsty-right-word .index-about-des { display: block; height: auto !important; }

.gsty-right-word .index-about-des { margin-top: 0; }

.gsty-main .gsty-about-img { position: relative; }
.gsty-main .gsty-about-img::before { content: " "; position: absolute; right: -20px; top: 36px; z-index: 2; width: 60px; height: 1px; background: #a28413; }
.gsty-main .gsty-about-img::after { content: " "; position: absolute; right: -45px; top: 34px; z-index: 2; width: 21px; height: 5px; background: url("../images/icon-01.png") center no-repeat; animation: dot_scroll 1.2s infinite linear; -moz-animation: dot_scroll 1.2s infinite linear; /* Firefox */ -webkit-animation: dot_scroll 1.2s infinite linear; /* Safari and Chrome */ -o-animation: dot_scroll 1.2s infinite linear; /* Opera */ }

/*============================= 19_古诗童韵_保利·古诗童韵艺术团_艺术团简介 =============================*/
.gsty-intro-main { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }

.gsty-intro-img { width: 51.42%; }

.gsty-intro-img-01 { height: 520px; background-size: cover; background-repeat: no-repeat; background-position: center; }
.gsty-intro-img-01 img { width: 100%; display: none; }

.gstygsty-intro-word { width: 42.85%; }

.gstygsty-intro-title { position: relative; font-size: 36px; line-height: 46px; }
.gstygsty-intro-title::before { content: " "; position: absolute; right: calc(100% + 40px); top: calc(50% + 1px); z-index: 2; width: 60px; height: 1px; background: #a28413; }
.gstygsty-intro-title::after { content: " "; position: absolute; right: calc(100% + 5px); top: 50%; z-index: 2; width: 21px; height: 5px; background: url("../images/icon-01.png") center no-repeat; animation: dot_scroll 1.2s infinite linear; -moz-animation: dot_scroll 1.2s infinite linear; /* Firefox */ -webkit-animation: dot_scroll 1.2s infinite linear; /* Safari and Chrome */ -o-animation: dot_scroll 1.2s infinite linear; /* Opera */ }

.gstygsty-intro-des { font-size: 16px; line-height: 30px; color: #333; margin-top: 25px; max-height: 450px; text-align: justify;overflow: auto; }

/*============================= 06_认识成桥_核心业务 =============================*/
.know-core-main { display: flex; justify-content: space-between; flex-wrap: wrap; background: rgba(255, 255, 255, 0.3); height: 520px; max-height: calc(100vh - 250px); margin-left: 280px; }

.know-core-img { position: relative; width: calc(39.3% + 280px); top: -60px; margin-left: -280px; }

.know-core-img-01 { height: 500px; max-height: calc(100vh - 270px); background-size: cover; background-repeat: no-repeat; background-position: center; }
.know-core-img-01 img { width: 100%; display: none; }

.know-core-word { width: 60.6%; padding: 60px 60px 0 80px; }

.know-core-title { position: relative; font-size: 36px; line-height: 46px; font-weight: bold; }
.know-core-title::before { content: " "; position: absolute; right: calc(100% + 40px); top: calc(50% + 1px); z-index: 2; width: 80px; height: 1px; background: #a28413; }
.know-core-title::after { content: " "; position: absolute; right: calc(100% + 10px); top: 50%; z-index: 2; width: 21px; height: 5px; background: url("../images/icon-01.png") center no-repeat; animation: dot_scroll 1.2s infinite linear; -moz-animation: dot_scroll 1.2s infinite linear; /* Firefox */ -webkit-animation: dot_scroll 1.2s infinite linear; /* Safari and Chrome */ -o-animation: dot_scroll 1.2s infinite linear; /* Opera */ }

.know-core-word-des { font-size: 16px; line-height: 30px; color: #333; margin-top: 25px; height: 330px; max-height: calc(100vh - 430px); }
.know-core-word-des .div-link { display: flex; justify-content: space-between; flex-wrap: wrap; padding-top: 27px; }
.know-core-word-des .div-link > div { width: 41.46%; margin-top: 20px; }
.know-core-word-des .div-link a {display: inline-block;padding-left: 20px;font-size: 18px;line-height: 28px;color: #333;background: url("../images/line-06.jpg") left top 13px no-repeat;}

/*============================= 17_古诗童韵_原创音乐作品_作品介绍 =============================*/
.gsty-works-intro { display: flex; flex-wrap: wrap; justify-content: center; }

.gsty-works-intro-word, .gsty-works-intro-img { height: 500px; max-height: calc(100vh - 250px); }

.gsty-works-intro-word { width: 50%; padding: 60px; background-size: cover; background-repeat: no-repeat; background-position: right bottom; background-image: url("../images/bg-02.png"); font-size: 16px; color: #333; line-height: 30px; }
.gsty-works-intro-word .div-des { position: relative; padding-top: 17px; text-align: justify; }
.gsty-works-intro-word .div-des::before { content: " "; position: absolute; left: 0; top: 2px; width: 80px; height: 1px; background: #a28413; }
.gsty-works-intro-word .div-des::after { content: " "; position: absolute; left: 85px; top: 0; width: 21px; height: 5px; background: url("../images/icon-01.png") center no-repeat; animation: dot_scroll 1.2s infinite linear; -moz-animation: dot_scroll 1.2s infinite linear; /* Firefox */ -webkit-animation: dot_scroll 1.2s infinite linear; /* Safari and Chrome */ -o-animation: dot_scroll 1.2s infinite linear; /* Opera */ }

.gsty-works-intro-img { width: 50%; background-size: cover; background-repeat: no-repeat; background-position: center; }
.gsty-works-intro-img img { display: none; }

/*============================= 14_古诗童韵_关于《古诗童韵》_创立背景与愿景 =============================*/
.gsty-about-vision { display: flex; flex-wrap: wrap; margin-right: 360px; background: rgba(255, 255, 255, 0.3); margin-bottom: 60px; }

.gsty-about-vision-word, .gsty-about-vision-img { max-height: calc(100vh - 250px); }

.gsty-about-vision-word { width: 63.5%; padding: 60px; height: 500px; font-size: 16px; color: #333; line-height: 30px; }
.gsty-about-vision-word .div-des { position: relative; padding-top: 17px; text-align: justify; }
.gsty-about-vision-word .div-des::before { content: " "; position: absolute; left: 0; top: 2px; width: 80px; height: 1px; background: #a28413; }
.gsty-about-vision-word .div-des::after { content: " "; position: absolute; left: 85px; top: 0; width: 21px; height: 5px; background: url("../images/icon-01.png") center no-repeat; animation: dot_scroll 1.2s infinite linear; -moz-animation: dot_scroll 1.2s infinite linear; /* Firefox */ -webkit-animation: dot_scroll 1.2s infinite linear; /* Safari and Chrome */ -o-animation: dot_scroll 1.2s infinite linear; /* Opera */ }

.gsty-about-vision-img { position: relative; top: 60px; width: calc(36.5% + 360px); height: 500px; max-height: calc(100vh - 250px); margin-right: -360px; background-size: cover; background-repeat: no-repeat; background-position: center; }
.gsty-about-vision-img img { display: none; }

/*============================= 02_走进成桥_成桥简介 =============================*/
.about-intro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }

.about-intro-word { width: 38.57%; max-height: calc(100vh - 250px); }
.about-intro-word .div-des { font-size: 16px; color: #333; line-height: 30px; margin-top: 32px; max-height: calc(100vh - 400px); text-align: justify; overflow: auto;}

.about-intro-scroll { position: relative; width: 52.85%; }
.about-intro-scroll .index-about-owl { top: 0; }
.about-intro-scroll .index-about-img { height: 500px; max-height: calc(100vh - 250px); }

.about-intro-year { position: absolute; left: 5.4%; transform: translateY(40%); bottom: 0; z-index: 10; font-size: 16px; color: #333; }
.about-intro-year .span-num { font-size: 72px; background: linear-gradient(to bottom, #e2c354, #a38414); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/*============================= 20_古诗童韵_保利·古诗童韵艺术团_指导专家 =============================*/
.gsty-person-main { display: flex; flex-wrap: wrap; justify-content: space-between; }

.gsty-person-word { width: 46.42%; padding: 11% 0 30px; font-size: 16px; color: #333; line-height: 30px; max-height: calc(100vh - 250px); }
.gsty-person-word .div-des { position: relative; padding-top: 17px; text-align: justify; }
.gsty-person-word .div-des::before { content: " "; position: absolute; left: 0; top: 2px; width: 80px; height: 1px; background: #a28413; }
.gsty-person-word .div-des::after { content: " "; position: absolute; left: 85px; top: 0; width: 21px; height: 5px; background: url("../images/icon-01.png") center no-repeat; animation: dot_scroll 1.2s infinite linear; -moz-animation: dot_scroll 1.2s infinite linear; /* Firefox */ -webkit-animation: dot_scroll 1.2s infinite linear; /* Safari and Chrome */ -o-animation: dot_scroll 1.2s infinite linear; /* Opera */ }

.gsty-person-img { width: 34.2%; margin-right: 10px; margin-top: 10px; height: 646px; max-height: calc(100vh - 250px); background-size: cover; background-repeat: no-repeat; background-position: top center; }
.gsty-person-img img { width: 100%; display: none; }
.gsty-person-img::before { content: " "; position: absolute; left: 50px; top: -10px; right: -10px; bottom: 26px; z-index: -1; background: linear-gradient(to right, #a38414, #e2c354); }
.gsty-person-img .div-name { position: absolute; left: 0; bottom: 0; transform: translateY(50%); font-size: 60px; font-weight: bold; }

/*============================= 25_加入成桥 =============================*/
.join-main { padding-left: 5.35%; padding-right: 5.35%; display: flex; justify-content: space-between; flex-wrap: wrap; }

.join-01 { position: relative; width: 48%; background: rgba(255, 255, 255, 0.3); padding: 50px; margin-bottom: 100px; }
.join-01 .div-title .b-name { position: relative; font-size: 24px; color: #111; line-height: 1.3; font-weight: normal; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.join-01 .div-title .b-name::after { content: " "; position: absolute; left: 0; bottom: 2px; right: 0; z-index: -1; height: 4px; background: linear-gradient(to right, #a38414, #e2c354); -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.join-01 .div-title .div-area { font-size: 16px; line-height: 26px; color: #333; margin-top: 34px; }
.join-01 .div-des { font-size: 16px; line-height: 28px; color: #666; height: 370px; max-height: calc(100vh - 500px); margin-top: 30px; text-align: justify; }
.join-01 .div-info { position: absolute; left: 50px; right: 50px; top: calc(100% - 25px); background: #333; font-size: 24px; color: #fff; padding-left: 10px; padding-right: 15px; line-height: 50px; text-align: center; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }

/*============================= 22_古诗童韵_演出与活动 =============================*/
.gsty-active-01 .div-img a { display: block; background-size: cover; background-repeat: no-repeat; background-position: center; }
.gsty-active-01 .a-play { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; font-size: 0; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.gsty-active-01 .div-mc { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; background: rgba(0, 0, 0, 0.5); }

.gsty-active-02 { margin-bottom: 25px; }
.gsty-active-02 .a-play { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.2); }

.gsty-active-swiper .swiper-slide-active .gsty-active-01 .a-play { filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }
.gsty-active-swiper .swiper-slide-active .gsty-active-01 .div-mc { visibility: hidden; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; }

.gsty-active-details .div-01 { width: 1000px; margin: 30px auto 0; max-width: calc(100vw - 400px); text-align: center; display: none; font-size: 30px; line-height: 40px; font-weight: bold; background: -webkit-linear-gradient(left, #a38414, #e2c354); background: -o-linear-gradient(left, #a38414, #e2c354); background: linear-gradient(to right, #a38414, #e2c354); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.gsty-active-details .div-01.on { display: block; }

/*============================= 03_走进成桥_主创团队 =============================*/
.about-team-title { width: 1000px; max-width: 100%; }

.about-team-cont { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 8%; }

.about-team-word { width: 35.71%; }
.about-team-word .div-01 { display: none; }
.about-team-word .div-01.on { display: block; }
.about-team-word .div-title .div-name { font-size: 36px; color: #a28413; line-height: 46px; }
.about-team-word .div-title .div-info { font-size: 20px; color: #333; line-height: 30px; margin-top: 30px; }
.about-team-word .div-des { font-size: 16px; color: #666; line-height: 30px; margin-top: 26px; text-align: justify; }

.about-team-img { width: 55.71%; display: flex; justify-content: space-between; }

.about-team-01 { width: 39.74%; }
.about-team-01 .span-img { position: relative; padding-left: 10px; padding-bottom: 10px; }
.about-team-01 .span-img bdo { -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); }
.about-team-01 .span-img bdo img { -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.about-team-01 .span-img::before { content: " "; position: absolute; left: 0; top: 10px; right: 10px; bottom: 0; border: 1px solid #a28413; z-index: -1; }
.about-team-01 .span-cont { position: relative; padding: 15px 10px 0; }
.about-team-01 .span-cont .bdo-name { font-size: 24px; color: #000; line-height: 34px; }
.about-team-01 .span-cont .bdo-info { font-size: 16px; color: #666; line-height: 26px; margin-top: 2px; }
.about-team-01 .span-cont::after { content: " "; position: absolute; right: 0; top: 15px; height: 230px; width: 1px; background: #a28413; }
.about-team-01.on .span-cont .bdo-name, .about-team-01:hover .span-cont .bdo-name { color: #a28413; }

/*============================= 21_古诗童韵_保利·古诗童韵艺术团_艺术团风采 =============================*/
.gsty-fc { height: calc(100vh * 0.70); }

.gsty-fc-bottom { position: relative; margin-left: 40px; margin-right: 40px; height: 15%; }
.gsty-fc-bottom > div { width: 100%; height: 100%; padding-left: 10px; padding-right: 10px; }

.gsty-fc .swiper-container { width: 100%; margin-left: auto; margin-right: auto; }

.gsty-fc .swiper-slide { background-size: cover; background-position: center; }

.gsty-fc .gallery-top { height: 85%; width: 100%; }

.gsty-fc .gallery-thumbs { height: 100%; box-sizing: border-box; padding-top: 10px; padding-bottom: 10px; overflow: visible; }

.gsty-fc .gallery-thumbs .swiper-slide { height: 100%; position: relative; }
.gsty-fc .gallery-thumbs .swiper-slide .span-mc { display: block; position: absolute; padding: 0; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); }

.gsty-fc .gallery-thumbs .swiper-slide-thumb-active { -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.gsty-fc .gallery-thumbs .swiper-slide-thumb-active .span-mc { opacity: 0; }

.gsty-fc .swiper-button-prev, .gsty-fc .swiper-button-next { width: 24px; height: 37px; top: 50%; transform: translate(0); margin-top: -18px; background-size: cover; background-repeat: no-repeat; background-position: center; font-size: 0; }
.gsty-fc .swiper-button-prev::before, .gsty-fc .swiper-button-prev::after, .gsty-fc .swiper-button-next::before, .gsty-fc .swiper-button-next::after { display: none; }
.gsty-fc .swiper-button-prev { left: -40px; background-image: url("../images/arrow-left.png"); }
.gsty-fc .swiper-button-prev:hover { background-image: url("../images/arrow-lefth.png"); }
.gsty-fc .swiper-button-next { right: -40px; background-image: url("../images/arrow-right.png"); }
.gsty-fc .swiper-button-next:hover { background-image: url("../images/arrow-righth.png"); }

/*============================= 12_成桥作品_影视剧制作 =============================*/
.works-music-art-main { display: flex; flex-wrap: wrap; justify-content: space-between; }

.works-music-art-word { width: 26%; padding-top: 4%; }
.works-music-art-word .index-about-title { display: block; }
.works-music-art-word .div-des { font-size: 16px; line-height: 30px; color: #333; margin-top: 33px; text-align: justify; }

.works-music-art-cont { width: 65.71%; }
.works-music-art-cont .gsty-fc { width: 100%; }

.works-music-art-cont { height: calc(100vh * 0.65); }

.works-music-art-cont-bottom { position: relative; height: 26%; }
.works-music-art-cont-bottom > div { width: 100%; height: 100%; }

.works-music-art-cont .swiper-container { width: 100%; margin-left: auto; margin-right: auto; }

.works-music-art-cont .swiper-slide { background-size: cover; background-position: center; }

.works-music-art-cont .gallery-top2 { height: 74%; width: 100%; }

.works-music-art-cont .gallery-top2 .swiper-slide { position: relative; }
.works-music-art-cont .gallery-top2 .swiper-slide a { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; }
.works-music-art-cont .gallery-top2 .swiper-slide a:hover { -webkit-animation: tada .7s ease 0s 1; -moz-animation: tada .7s ease 0s 1; animation: tada .7s ease 0s 1; }

.works-music-art-cont .gallery-thumbs2 { height: 100%; box-sizing: border-box; padding-top: 10px; padding-bottom: 10px; overflow: visible; }

.works-music-art-cont .gallery-thumbs2 .swiper-slide { height: 100%; position: relative; }
.works-music-art-cont .gallery-thumbs2 .swiper-slide .span-mc { display: block; position: absolute; padding: 0; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); }

.works-music-art-cont .gallery-thumbs2 .swiper-slide-thumb-active { -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.works-music-art-cont .gallery-thumbs2 .swiper-slide-thumb-active .span-mc { opacity: 0; }

.works-music-art-cont .swiper-button-prev, .works-music-art-cont .swiper-button-next { width: 24px; height: 37px; top: 50%; transform: translate(0); margin-top: -18px; background-size: cover; background-repeat: no-repeat; background-position: center; font-size: 0; }
.works-music-art-cont .swiper-button-prev::before, .works-music-art-cont .swiper-button-prev::after, .works-music-art-cont .swiper-button-next::before, .works-music-art-cont .swiper-button-next::after { display: none; }
.works-music-art-cont .swiper-button-prev { left: 20px; background-image: url("../images/arrow-left.png"); }
.works-music-art-cont .swiper-button-prev:hover { background-image: url("../images/arrow-lefth.png"); }
.works-music-art-cont .swiper-button-next { right: 20px; background-image: url("../images/arrow-right.png"); }
.works-music-art-cont .swiper-button-next:hover { background-image: url("../images/arrow-righth.png"); }

/*============================= 11_成桥作品_音乐创作与文化交流 =============================*/
.works-curture-main { display: flex; flex-wrap: wrap; justify-content: space-between; height: calc(100vh * 0.6); }

.works-curture-left { width: 85%; height: 100%; }

.works-curture-right { width: 13.2%; height: 100%; }

.gallery-left, .gallery-right { height: 100%; }

.gallery-left { overflow: visible; }

.gallery-right{ position: relative; }
.gallery-right .swiper-slide { background-size: cover; }

.gallery-right .swiper-slide { height: 100%; position: relative; }
.gallery-right .swiper-slide .span-mc { display: block; position: absolute; padding: 0; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); }

.gallery-right .swiper-slide-thumb-active { -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.gallery-right .swiper-slide-thumb-active .span-mc { opacity: 0; }


.works-curture-img { height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; margin-left: 100px; }

.works-curture-word { position: absolute; left: 0; bottom: 0; right: 100px; padding: 46px 80px 40px 180px; background: rgba(255, 255, 255, 0.8); }
.works-curture-word .div-num { position: absolute; top: 0; left: 0; bottom: 0; width: 100px; background: linear-gradient(to bottom, #e2c354, #a38414); display: flex; justify-content: center; align-items: flex-end; }
.works-curture-word .div-num span { display: block; position: relative; font-size: 30px; color: rgba(255, 255, 255, 0.5); line-height: 40px; margin-bottom: 30px; }
.works-curture-word .div-num span::after { content: " "; position: absolute; left: 50%; top: 50px; height: 40px; width: 1px; background: #fff; }
.works-curture-word .div-title { position: relative; font-size: 24px; line-height: 34px; color: #111; padding-top: 14px; }
.works-curture-word .div-title::after { content: " "; position: absolute; left: 5px; top: 0; width: 21px; height: 5px; background: url("../images/icon-01.png") center no-repeat; animation: dot_scroll 1.2s infinite linear; -moz-animation: dot_scroll 1.2s infinite linear; /* Firefox */ -webkit-animation: dot_scroll 1.2s infinite linear; /* Safari and Chrome */ -o-animation: dot_scroll 1.2s infinite linear; /* Opera */ }
.works-curture-word .div-des { font-size: 16px; line-height: 30px; color: #333; margin-top: 15px; max-height: 90px; text-align: justify; }

/*============================= 09_成桥作品_舞台剧_弹窗 =============================*/
.works-tc { position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; overflow: hidden; z-index: 110;display: flex;  justify-content: center; align-items: center; visibility: hidden; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 1; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.works-tc .container { position: relative; z-index: 10; }
.works-tc.on { visibility: visible; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }

.works-tc-main { display: flex; flex-wrap: wrap; justify-content: space-between; }

.works-tc-left { width: 51.42%; padding-top: 5%; }
.works-tc-left .works-tc-title .index-about-title { display: block; }
.works-tc-left .works-tc-title span { position: absolute; right: 0; top: 50%; font-size: 20px; font-weight: bold; color: #666; }
.works-tc-left .works-tc-title span::before { content: " "; position: absolute; right: calc(100% + 10px); top: 50%; width: 23px; height: 5px; margin-top: -2px; background: url("../images/icon-07.png") center no-repeat; animation: dot_scroll 1.2s infinite linear; -moz-animation: dot_scroll 1.2s infinite linear; /* Firefox */ -webkit-animation: dot_scroll 1.2s infinite linear; /* Safari and Chrome */ -o-animation: dot_scroll 1.2s infinite linear; /* Opera */ }
.works-tc-left .div-des { font-size: 16px; line-height: 30px; color: #333; margin-top: 30px; max-height: 300px; text-align: justify; overflow: auto;}

.words-tc-right { width: 40%; }

.words-tc-owl { background-image: url("../images/pic-76.jpg"); background-position: right bottom; background-repeat: no-repeat; }
.words-tc-owl .owl-dots { position: absolute; left: 31.6%; right: 0; bottom: 17px; z-index: 20; line-height: normal; font-size: 0; }
.words-tc-owl .owl-dots button.owl-dot { width: 5px; height: 5px; border-radius: 50%; margin: 0 5px; background: #d1c289; background-size: cover; }
.words-tc-owl .owl-dots button.owl-dot.active { background: #666; }

.words-tc-01 { padding-right: 80px; padding-bottom: 36px; }
.words-tc-01 .span-num { position: absolute; top: 30px; left: 89%; display: inline-block; }
.words-tc-01 .div-img { height: 646px; max-height: calc(100vh - 200px); background-size: cover; background-repeat: no-repeat; background-position: center; }

.works-tc-icon { position: absolute; left: 0; bottom: 0; }

/*============================= 15_古诗童韵_关于《古诗童韵》_主创团队 =============================*/
.about-creativeteam { display: flex; align-items: flex-end; flex-wrap: wrap; justify-content: space-between; height: 630px; max-height: calc(100vh * 0.58); }

.about-creativeteam-scroll { width: 42.14%; }
.about-creativeteam-scroll .div-num { font-size: 16px; color: #333; font-weight: bold; margin-bottom: 100px; }

.about-creativeteam-owl .owl-nav button.owl-next, .about-creativeteam-owl .owl-nav button.owl-prev { position: absolute; top: 50%; transform: translateY(-50%); font-size: 0; background-size: cover; background-position: center; background-repeat: no-repeat; width: 19px; height: 29px; font-size: 0; }
.about-creativeteam-owl .owl-nav button.owl-prev { left: 20px; background-image: url("../images/arrow-left.png"); }
.about-creativeteam-owl .owl-nav button.owl-prev:hover { background-image: url("../images/arrow-lefth.png"); }
.about-creativeteam-owl .owl-nav button.owl-next { right: 20px; background-image: url("../images/arrow-right.png"); }
.about-creativeteam-owl .owl-nav button.owl-next:hover { background-image: url("../images/arrow-righth.png"); }
.about-creativeteam-owl .owl-dot { display: none; }

.about-creativeteam-01 { padding: 0 5px 10px; }
.about-creativeteam-01 .div-img { position: relative; background-size: cover; background-repeat: no-repeat; background-position: center top; }
.about-creativeteam-01 .div-img::before { content: " "; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); }

.about-creativeteam-owl .center .about-creativeteam-01 .div-img::before { filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; }

.about-creativeteam-word { width: 57.14%; top: -10px; height: 100%; }
.about-creativeteam-word .about-creativeteam-02 { height: 100%; position: absolute; left: 0; top: 0; visibility: hidden; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; }
.about-creativeteam-word .about-creativeteam-02.on { position: relative; visibility: visible; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }
.about-creativeteam-word .about-creativeteam-flex { height: 100%; display: flex; align-items: center; justify-content: space-between; position: relative; }
.about-creativeteam-word .about-creativeteam-flex .div-img { width: 28.75%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center top; }
.about-creativeteam-word .about-creativeteam-flex .div-cont { width: 61.25%; }
.about-creativeteam-word .about-creativeteam-flex .div-cont .div-title { font-size: 36px; }
.about-creativeteam-word .about-creativeteam-flex .div-cont .div-des { font-size: 16px; line-height: 30px; color: #666; margin-top: 27px; text-align: justify; }
.about-creativeteam-word .about-creativeteam-flex .div-cont .div-more { margin-top: 45px; }
.about-creativeteam-word .about-creativeteam-flex .div-cont .div-more a { position: relative; display: inline-block; width: 200px; max-width: 100%; font-size: 22px; line-height: 1.5; color: #111; padding-bottom: 16px; }
.about-creativeteam-word .about-creativeteam-flex .div-cont .div-more a::after { content: " "; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: url("../images/line-03.jpg") center no-repeat; background-size: cover; }

/*============================= 04_走进成桥_成桥大事记 =============================*/
.about-history-main { width: 100vw; padding-left: 6.25%; padding-right: 6.25%; height: 253px; background-position: center; background-repeat: no-repeat; background-size: 100%; }

.about-history-swiper { width: 100%; height: 253px; }
.about-history-swiper .swiper-slide { height: 253px; }

.about-history-year { width: 130px; height: 130px; border-radius: 50%; background: #fff; border: 10px solid #dacea1; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #333; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; cursor: pointer; }

.about-history-year.on0 { position: relative; top: 43px; }

.about-history-year.on-1 { position: relative; top: 110px; }

.about-history-year.on-3 { position: relative; top: 123px; }

.about-history-circular { position: fixed; z-index: 110; width: 430px; height: 430px; background-size: cover; background-repeat: no-repeat; background-position: center bottom; background-image: url("../images/bg-03.png"); padding: 75px; display: flex; justify-content: center; align-items: center; color: #fff; flex-direction: column; visibility: hidden; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }
.about-history-circular .div-title { font-size: 36px; padding-bottom: 20px; background: url("../images/line-08.jpg") center bottom no-repeat; }
.about-history-circular .div-des { font-size: 16px; line-height: 36px; margin-top: 50px; }
.about-history-circular.on { visibility: visible; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }

.about-history-arrows { display: flex; justify-content: space-between; margin-top: 55px; }
.about-history-arrows .swiper-button-prev, .about-history-arrows .swiper-button-next { font-size: 0; background-size: cover; background-position: center; background-repeat: no-repeat; width: 24px; height: 37px; }
.about-history-arrows .swiper-button-prev::after, .about-history-arrows .swiper-button-prev::before, .about-history-arrows .swiper-button-next::after, .about-history-arrows .swiper-button-next::before { display: none; }
.about-history-arrows .swiper-button-prev { background-image: url("../images/arrow-left.png"); }
.about-history-arrows .swiper-button-prev:hover { background-image: url("../images/arrow-lefth.png"); }
.about-history-arrows .swiper-button-next { background-image: url("../images/arrow-right.png"); }
.about-history-arrows .swiper-button-next:hover { background-image: url("../images/arrow-righth.png"); }

body { font-family: "SourceHanSerifSC","宋体","微软雅黑"; }

/*# sourceMappingURL=style.css.map */