@charset "utf-8";
/**
 * Created by sunJia on 2025/06/24.
 * @Description: Index Style
 */
.date{ font-family: 'Avanti';}
.bannerOut{ position: relative; background: #990000 url(../images/banner-bg.png) no-repeat left bottom;background: #990000;}
.bannerOut::after{ content: '';display: block;width: 100vw;height: 100%;background: #990000;position: absolute;top: 0;right: 0;z-index: -1;}
.bannerOut .listBox{ position: relative;z-index: 1;}
.bannerOut .listBox::before{ content: '';display: block;width: 50vw;height: 100%;}
.bannerOut .listBox > .gp-container{ position: relative;}
.bannerOut .listBoxLimit{position: absolute;left: 0;top: 0;z-index: 20;height: 100%;  width: 34.4375%; }
.bannerOut .listBoxCon{ max-width: 551px; margin-left: auto; margin-right: 0; padding: 0.47rem 0.5rem; box-sizing: border-box;
    background: #7b0808; position: relative;z-index: 1;}
.bannerOut::before{ content: '';display: inline; width: 177px; height: 571px;background: url(../images/boyata.png) no-repeat;
    position: absolute; left: calc((100% - 1600px) / 2 + 37px); transform: translateX(-100%); bottom: 0px; z-index: 10;}

.modeTil{ line-height: 1; align-items: center;}
.modeTil .title{ padding-left: 40px; background: url(../images/index-til-ico-red.svg) no-repeat left center;}
.modeTil .title .en{ padding-left: 22px; line-height: 1.33;color: #123c77;}
.modeTil .title .ch{ margin-top: 3px; color: #111111; line-height: 1;}
.modeTil .modeMore{ display: block; padding-top: 20px; color: #94070a; position: relative;z-index: 1;}
.modeTil .modeMore::before{ content: '';display: block;width: 45px;height: 27px;
    background: url(../images/index-til-ico-more-blue.svg) no-repeat center;
    position: absolute;top: 0;left: -30px;z-index: -1;}

.bannerOut .modeTil .title{ background: url(../images/index-til-ico-white.svg) no-repeat left center;}
.bannerOut .modeTil .title .en,
.bannerOut .modeTil .title .ch{ color: #fff;}
.bannerOut .modeTil .modeMore{ color: #fff;}
.bannerOut .modeTil .modeMore::before{ background: url(../images/index-til-ico-more-white.svg) no-repeat center;}
.bannerOut .listBoxCon ul{ margin-top: 34px;border-top: 1px solid rgba(255,255,255,1);}
.bannerOut .listBoxCon li a{ display: block;padding: 24px 0 30px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.6) 70%, rgba(255, 255, 255, 0.6) 100%);
    background-image: -webkit-linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.6) 70%, rgba(255, 255, 255, 0.6) 100%);
    background-image: -moz-linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.6) 70%, rgba(255, 255, 255, 0.6) 100%);
    background-image: -o-linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.6) 70%, rgba(255, 255, 255, 0.6) 100%);
    background-repeat: repeat-x;
    background-size: 6px 1px;
    background-position: bottom left;
}
.bannerOut .listBoxCon li:nth-last-of-type(1) a{ background-image: none;}
.bannerOut .listBoxCon li .title{ color: #fff; line-height: 1.67;}
.bannerOut .listBoxCon .date{ color: rgba(255, 255, 255, 0.6); margin-top: 16px; line-height: 1;}
.banner-swiper-arrows{ position: absolute; left: 100%;bottom: 0; background: #7b0808; width: 70px; flex-direction: column;}
.banner-swiper-arrows::before{ content: '';display: block;width: 100%;height: 50vh;min-height: 300px; background: #7b0808;
    position: absolute;right: 0;bottom: 0;z-index: -1;}
.banner-swiper-arrows .arrows{ width: 100%; height: 0; padding-bottom: 100%;transition: all 0.2s ease-in-out; position: relative;}
.banner-swiper-arrows .arrows:hover{ background: #990000;}
.banner-swiper-arrows .arrows::before{ content: '';display: block;width: 16px;height: 27px;background: url(../images/arrows-white-left.svg) no-repeat center;
    position: absolute; top: 50%;left: 50%;transform: translate3d(-50%, -50%, 0);z-index: 1; opacity: 0.5;}
.banner-swiper-arrows .arrows:hover::before{ opacity: 1;}
.banner-swiper-arrows .swiper-next::before{ transform: translate3d(-50%, -50%, 0) rotateY(180deg);}

.wrapbanner{position: relative;height: auto;width: 63.02%;width: calc(100% - (100% - 1600px) / 2 - 551px);margin-left: auto;margin-right: 0;z-index: 30; overflow: hidden;}
.banner{position: relative; margin-left: auto; margin-right: 0;}
.banner a{display:block;position:relative;}
/* .banner a::before{ content: '';display: block;width: 100%;height: 0px;padding-bottom: 15.63%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
    background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
    background: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
    background: -ms-linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
    opacity: 0.55;position: absolute;bottom: 0;left: 0;z-index: 1;pointer-events: none;
} */
.banner .gp-img{ position: relative;background-size: 100% auto;padding-bottom: 53.22%;background-size: cover !important;}

.banner .arrow{width: 45px;height: 45px;background: center no-repeat;display: inline-block;vertical-align: top;margin: 0;cursor: pointer;}
.banner .prev{left: 0px;background-image: url(../images/banner_prev.png);}
.banner .next{right: 0px;background-image: url(../images/banner_next.png);}

.content{ position: relative; padding-top: 67px; background: url(../images/index-bg1.png) no-repeat center top/100% auto;}

.row01{ position: relative; padding: 194px 0 0; background: url(../images/index-mode1-bg.png) no-repeat right top;}
.row01 .modeTil{ max-width: 380px;}
.row01 .modeCon{ margin-top: 60px;}
.row01 .modeCon .mainItem{ background: #faf2f3;}
.row01 .picBox{ display: block; width: 351px; min-height: 270px; flex-shrink: 0; color: #fff;text-align: center;position: relative;
    background: url(../images/workshop-bg.png) no-repeat center;}
.row01 .picBox .positionBox{ width: 100%;
    position: absolute; top: 50%;left: 50%;transform: translate3d(-50%,-50%,0);z-index: 1;}
.row01 .picBox .icon{ width: 100px;height: 100px;margin: 0 auto; position: relative;z-index: 1;}
.row01 .picBox .icon::before{ content: '';display: block; width: 100%;height: 100%;border-radius: 50%;background: #a73d75;
    position: absolute;top: 0;left: 0;z-index: -1;}
.row01 .picBox .icon::after{ content: '';display: block;width: 100%;height: 100%;
    background: url(../images/workshop-ico.png) no-repeat center/100% 100%;
    position: absolute; top: 0;left: 0;}
.row01 .mainItem .textBox{ width: calc(100% - 351px); padding-left: 70px; padding-right: 50px;}
.row01 .name{ justify-content: center; align-items: flex-end; line-height: 1; margin: 23px 0 17px;}
.row01 .name span{ margin-right: 5px;}
.row01 .name span:last-child{ margin-right: 0px;}
.row01 .curPeriod{ width: 51.24%; padding: 50px 0;}
.row01 .hy_list li{margin-bottom: 30px;border-bottom: 1px solid rgba(192, 97, 97, 0.25);padding-bottom: 30px;}
.row01 .hy_list .date{ line-height: 1; margin-top: 10px; justify-content: flex-start; color: #94070a;}
.row01 .hy_list .date i{ width: 14px;height: 14px;background: url(../images/time-ico.png) no-repeat center/cover; margin-right: 10px;}
.row01 .hy_list li:last-child{border-bottom:none;padding-bottom: 0;margin-bottom: 0;}
.row01 .curPeriod .title{ line-height: 1.67; color: #282828;}
.row01 .curPeriod .infoBox{ line-height: 2; margin-top: 22px;}
.row01 .curPeriod .infoBox > div{ padding-left: 24px; align-items: flex-start;}
.row01 .curPeriod .speaker{ justify-content: flex-start;align-items: flex-end; line-height: 1; margin-bottom: 9px;
    background: url(../images/speaker-ico.png) no-repeat left 8px/auto 17px;}
.row01 .curPeriod .time{ background: url(../images/time-ico.png) no-repeat left 8px/auto 15px;}
.row01 .curPeriod .addr{ background: url(../images/addr-ico.png) no-repeat left 8px/auto 18px;}
.row01 .curPeriod .infoBox span{ color: #666; }
.row01 .curPeriod .infoBox span:first-child{ flex-shrink: 0;}
.row01 .curPeriod .infoBox .person span{ display: inline-block; color: #282828; line-height: 1;}
.row01 .curPeriod .signIn{ max-width: 177px;border-radius: 18px;line-height: 36px;
    background: #990000;text-align: center; margin: 25px auto 0;}
.row01 .curPeriod .signIn a{ display: block; color: #fff;}
.row01 .itemList{width: 100%;padding-top: 50px;}
.row01 .itemList .label{ line-height: 40px; padding: 0 16px; border-radius: 20px 20px 20px 0; background: #990000; color: #fff;}
.row01 .itemList .more{ color: #94070a; line-height: 40px;}
.row01 .itemList ul{padding-top: 10px;margin: 0 -15px;}
.row01 .itemList ul li{margin-bottom: 13px;}
.row01 .itemList ul li:last-child{ margin-bottom: 0; }
.row01 .itemList ul a{display: block;padding-bottom: 20px;border-bottom: 1px solid rgba(192, 97, 97, 0.25);margin: 0 15px;}
.row01 .itemList ul li:last-child a{ border: none;}
.row01 .itemList ul li:nth-child(3) a{border:none;}
.row01 .itemList ul .title{ line-height: 2; color: #333;}
.row01 .itemList ul .date{ line-height: 1; margin-top: 10px; justify-content: flex-start; color: #94070a;}
.row01 .itemList ul .date i{ width: 14px;height: 14px;background: url(../images/time-ico.png) no-repeat center/cover; margin-right: 10px;}
.row01 .otherItem{ justify-content: flex-start; padding-top: 38px;}
.row01 .otherItem .itemBox{ margin-right: 32px; }
.row01 .itemBox:nth-of-type(1) .picBox{ background: url(../images/annual-bg.png) no-repeat center;}
.row01 .itemBox:nth-of-type(1) .picBox .icon::before{ background: #5836c1;}
.row01 .itemBox:nth-of-type(1) .picBox .icon::after{ background: url(../images/annual-ico.png) no-repeat center/100% 100%;}
.row01 .itemBox:nth-of-type(2) .picBox{ background: url(../images/other-bg.png) no-repeat center;}
.row01 .itemBox:nth-of-type(2) .picBox .icon::before{ background: #1f68e1;}
.row01 .itemBox:nth-of-type(2) .picBox .icon::after{ background: url(../images/other-ico.png) no-repeat center/100% 100%;}
.row01 .picBox:hover .icon{ -webkit-animation-name: rubberBand;animation-name: rubberBand;}
@-webkit-keyframes rubberBand {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    30% {
        -webkit-transform: scaleX(1.25) scaleY(0.75);
        transform: scaleX(1.25) scaleY(0.75)
    }
    40% {
        -webkit-transform: scaleX(0.75) scaleY(1.25);
        transform: scaleX(0.75) scaleY(1.25)
    }
    60% {
        -webkit-transform: scaleX(1.15) scaleY(0.85);
        transform: scaleX(1.15) scaleY(0.85)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
@keyframes rubberBand {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    30% {
        -webkit-transform: scaleX(1.25) scaleY(0.75);
        -ms-transform: scaleX(1.25) scaleY(0.75);
        transform: scaleX(1.25) scaleY(0.75)
    }
    40% {
        -webkit-transform: scaleX(0.75) scaleY(1.25);
        -ms-transform: scaleX(0.75) scaleY(1.25);
        transform: scaleX(0.75) scaleY(1.25)
    }
    60% {
        -webkit-transform: scaleX(1.15) scaleY(0.85);
        -ms-transform: scaleX(1.15) scaleY(0.85);
        transform: scaleX(1.15) scaleY(0.85)
    }
    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

/* row02 */
.row02{  margin-top: -270px; position: relative; overflow: hidden;}
.row02 .leftImgBox{ padding-top: 350px; font-size: 0; pointer-events: none;
    position: absolute; width: 50%;left: 0;top: 0;}
.row02 .rightBox{ width: 50%; margin-left: auto; margin-right: 0; padding: 60px 0 100px 100px; position: relative;z-index: 1;}
.row02 .rightBox::before{ content: '';display: block;width: 100vw;height: 100%;background: #faf2f3;
    position: absolute; top: 0;left: 0;z-index: -1;}
.row02 .modeCon{ margin-top: 45px;}
.row02 ul{}
.row02 ul li{ margin-bottom: 20px;}
.row02 ul li:last-child{ margin-bottom: 0; }
.row02 ul a{ display: block;padding: 10px 0 24px; border-bottom: 1px solid rgba(148, 7, 10, 0.25);}
.row02 ul .tag{ line-height: 38px;border: 1px solid #123c77; color: #123c77; box-sizing: border-box;
    padding: 0 16px;border-radius: 20px 20px 20px 0; transition: all .25s;}
.row02 ul a:hover .tag{ background: #123c77; color: #fff;}
.row02 ul .date{ line-height: 38px;color: #94070a;}
.row02 ul .date i{ display: inline-block;width: 14px;height: 38px; background: url(../images/time-ico.svg) no-repeat center/100% auto;margin-right: 10px;}
.row02 ul .title{ line-height: 1; margin-top: 20px; color: #333333;}

/* row03 */
.row03{ position: relative; z-index: 2;}
.row03 .modeTil{ align-items: flex-end;}
.row03 .lf,
.row03 .rt{ padding-top: 100px;}
.row03 .lf{ width: 50%; padding-right: 80px; position: relative;z-index: 1;}
.row03 .lf::before{ content: '';display: block;width: 100vw;height: 100%;background: #faf2f3;
    position: absolute;right: 0;top: 0;z-index: -1;}
.row03 .lf .modeCon{ padding: 30px 0 70px;}
.row03 .lf ul li{ margin-top: 55px;}
.row03 .lf .img{width: 147px;flex-shrink: 0;}
.row03 .lf .gp-img-responsive{padding-bottom: 123.25%;}
.row03 .lf .infoBox{padding-left: 20px;width: calc(100% - 147px);}
.row03 .lf .title{ line-height: 1;color: #333333;}
.row03 .summary{ color: #999; line-height: 1.625; margin-top: 25px;}
.row03 .date{ line-height: 1; justify-content: flex-start; color: #123c77; margin-top: 25px;}
.row03 .date i{ width: 14px; height: 14px; background: url(../images/time-ico-blue.svg) no-repeat center/cover; margin-right: 10px;}

.row03 .rt{ width: 47.5%;overflow: hidden;}
.row03 .rt .modeCon{ padding-top: 5px;}
.row03 .rt ul{ margin: 0 -20px;}
.row03 .rt li{ margin-top: 40px;}
.row03 .rt li a{ display: block; background: #f3f5f8; padding: 40px 30px 52px; margin: 0 20px;}
.row03 .rt .title{ line-height: 1.5; height: 3em;}
.row03 .rt .summary{ -webkit-line-clamp: 6; height: 9.75em;}
.row03 .rt .date{ color: #94070a;}
.row03 .rt .date i{ background: url(../images/time-ico.svg) no-repeat center/cover;}

/* row04 */
.row04{ padding: 120px 0 125px; position: relative;z-index: 1;}
.row04::before{ content: '';display: block;width: 100%;height: 1086px;background: url(../images/row4-bg.png) no-repeat center bottom/100% auto;
    position: absolute; bottom: 0;left: 0;z-index: -1;}
.row04 .modeTil{ max-width: 710px; align-items: flex-end;}
.row04 .modeCon{ margin-top: 34px;}
.row04 .tag{ display: inline-block; line-height: 1.5; padding: 5px 30px; border-radius: 25px 25px 25px 0; background: #a73d75; color: #fff;}
.row04 .lf,
.row04 .rt{ width: 47.5%;}
.row04 li{ margin-top: 30px;}
.row04 li a{ display: block;}
.row04 li .title{ line-height: 1; color: #333;}
.row04 .date{ position: relative; justify-content: flex-start;overflow: hidden;line-height: 1; margin-top: 25px; color: #a73d75;}
.row04 .date::before{ content: '';display: block;width: 100%;height: 1px;background: #a73d75;opacity: 0.2;
    position: absolute; left: 115px;top: 50%;transform: translateY(-50%);z-index: 1;}
.row04 .date i{ display: inline-block; width: 14px;height: 14px;background: url(../images/time-purple.svg) no-repeat center/cover; margin-right: 10px;}
.row04 .rt .tag{ background: #123c77;}
.row04 .rt .date{ color: #123c77;}
.row04 .rt .date i{ background: url(../images/time-ico-blue.svg) no-repeat center/cover;}



/* Responsive style */
@media screen and (max-width:1700px){
    .bannerOut .listBoxLimit{ width: 33.4%;}
    .bannerOut .listBoxCon{ box-sizing: border-box; padding: 0.3rem; max-width: 503.5px;}
    .bannerOut .listBoxCon li a{ padding: 24px 0;}
    .bannerOut::before{ left: calc((100% - 1500px) / 2 + 37px); }

}

@media screen and (max-width:1520px){
  .bannerOut .listBoxCon ul{ margin-top: 30px;}
  .bannerOut .listBoxCon li a{ padding: 20px 0;}
    .bannerOut::before{ left: calc((100% - 1400px) / 2 + 37px); }
  .row01{ padding: 150px 0 0;}
  .row01 .modeCon{ margin-top: 40px;}
  .row01 .picBox{ width: 320px;}
  .row01 .curPeriod{ padding: 40px 0;}
  .row01 .itemList{ padding-top: 40px;}
  .row01 .otherItem .itemBox{ margin-right: 25px;}
  .row01 .mainItem .textBox{ padding-left: 40px; padding-right: 40px;}
  .row01 .itemList ul a{ padding-bottom: 20px;}
  .row02 .rightBox{ padding: 50px 0 50px 50px;}
  .row03 .lf, .row03 .rt{ padding-top: 50px;}
  .row03 .lf{ padding-right: 40px;}
  .row04{ padding: 50px 0 80px;}
}

@media screen and (max-width:1480px){
    .bannerOut .listBoxLimit{ width: 30%;}
    .bannerOut::before{ left: calc((100% - 1200px) / 2 + 37px); }
    .wrapbanner{ width: calc(100% - (100% - 1200px) / 2 - 360px);}
    .modeTil .title .ch{ font-size: 32px;}
    .bannerOut .listBoxCon li a{ padding: 19px 0;}
    .row01 .curPeriod{ padding: 30px 0;}
    .row01 .itemList{ padding-top: 30px;}
    .row01 .picBox{ width: 280px;}
    .row02 ul li{ margin-bottom: 15px;}
    .row03 .lf .modeCon{padding: 30px 0 20px;}
    .row03 .rt ul{ margin: 0 -10px;}
    .row03 .rt li a{ margin: 0 10px; padding: 25px 20px;}
    .row03 .summary{ margin-top: 15px;}
    .row03 .date{ margin-top: 15px;}
    .row03 .lf ul li{margin-top: 32px;}
    .row03 .lf .img{/* width: 300px; */}
    .row03 .lf .infoBox{/* width: calc(100% - 300px); */}
    
}

@media screen and (max-width:1320px){
  
}

@media screen and (max-width:1280px){
    .bannerOut .listBoxLimit{ width: 28.4%;}
    .bannerOut::before{ left: calc((100% - 1100px) / 2 + 37px); }
    .wrapbanner{ width: calc(100% - (100% - 1100px) / 2 - 311.6px);}
    .bannerOut .listBoxCon li a{ padding: 15px 0;}
    .bannerOut .listBoxCon .date{ margin-top: 10px;}
    .banner-swiper-arrows{ width: 65px;}
    .banner-swiper-arrows .arrows::before{ width: 13px; height: 28px;}
    .content{ padding-top: 40px;}
    .row01{ padding: 130px 0 0;}
    .row01 .picBox{ width: 245px;}
    .row01 .picBox .icon{ width: 80px;height: 80px;}
    .row01 .name{ margin: 15px 0 10px;}
  
}

@media screen and (max-width:1240px){
    .bannerOut .listBoxLimit{ width: 353px;}
    .bannerOut::before{  display: none;}
    .wrapbanner{ width: calc(100% - 353px);}
    .modeTil .title .ch{ font-size: 28px;}
    .bannerOut .listBoxCon li .title{ font-size: 16px;}
    .modeTil .title .ch{ margin-top: 0;}
    .bannerOut .modeTil .title{ background-size: auto 100%;}
    .bannerOut .listBoxCon li a{ padding: 12px 0;}
    .banner-swiper-arrows{ width: 58px;}
}

@media screen and (max-width:1200px){
    .row01 .mainItem .textBox{ padding-left: 20px; padding-right: 20px;}
    .row01 .curPeriod{ width: 54%;}
    .row01 .curPeriod .infoBox{ line-height: 1.67;}
}

@media screen and (max-width:1080px){
    .bannerOut .listBoxLimit{ width: 343px;}
    .wrapbanner{ width: calc(100% - 343px);}
    .bannerOut .listBoxCon{ padding: 0.3rem 0.2rem;}
    .row01{ padding: 150px 0 0;}
}

@media screen and (max-width:998px){
  .bannerOut{ display: flex; display: -ms-flexbox; flex-direction: column-reverse; background: transparent;}
  .wrapbanner{ width: 100%;}
  .bannerOut .listBoxLimit, .bannerOut .listBoxCon{ width: 100%; max-width: unset;}
  .bannerOut .listBoxLimit{ position: relative;}
  .bannerOut .listBox{ z-index: 50; margin-top: 20px;}
  .banner-swiper-arrows{ bottom: calc(100% + 30px); left: auto; right: 0; flex-direction: row; width: auto; background: transparent;}
  .banner-swiper-arrows::before{ display: none;}
  .banner-swiper-arrows .arrows{ width: 45px; padding-bottom: 0;height: 45px; margin-right: 15px; background: #7b0808;}
  .banner-swiper-arrows .arrows:last-child{ margin-right: 0;}
  .content{ padding-top: 0;}
  .row01{ padding-top: 50px;}
  .row01 .modeTil{ max-width: 100%;}
  .row01 .modeCon .mainItem{ flex-wrap: wrap;}
  .row01 .picBox{ width: 100%; min-height: unset; height: auto; background-size: cover;}
  .row01 .picBox .positionBox{ position: relative;top: 0;left: 0;transform: none; padding: 20px 0;}
  .row01 .mainItem .textBox{ width: 100%;}
  .row01 .otherItem{ flex-wrap: wrap; padding-top: 30px;}
  .row01 .otherItem .itemBox{ width: calc(50% - 15px); margin-right: 30px;}
  .row01 .otherItem .itemBox:last-child{ margin-right: 0;}
  .row01 .otherItem .picBox{ padding-bottom: 0%;}
  .row01 .itemBox:nth-of-type(1) .picBox,
  .row01 .itemBox:nth-of-type(2) .picBox{ background-size: cover;}
  .row02{ margin-top: 0;}
  .row02 .rightBox{ width: 100%; margin-top: 30px; padding: 40px 0;}
  .row02 .rightBox::before{ left: 50%;transform: translateX(-50%);}
  .row03{ overflow: hidden;}
  .row03 > .flex{ flex-direction: column;}
  .row03 .lf, .row03 .rt{ width: 100%; padding-left: 0; padding-right: 0; padding-top: 30px;}
  .row03 .lf::before{ right: 50%;transform: translateX(50%);}
  .row03 .rt li{ margin-top: 30px;}
  .row04{ padding: 40px 0;}
  .row04 .modeCon{ flex-direction: column;}
  .row04 .lf, .row04 .rt{ width: 100%;}
  .row04 .rt{ margin-top: 30px;}

}

@media screen and (max-width:768px){
  .row01 .mainItem .textBox{ flex-direction: column;}
  .row01 .curPeriod, .row01 .itemList{ width: 100%;}
  .row01 .itemList{ padding-top: 0;}
  .row01 .otherItem{ padding-top: 20px;}
  .row01 .otherItem .itemBox{ width: 100%; margin-right: 0; margin-bottom: 20px;}
  .row01 .otherItem .itemBox:last-child{ margin-bottom: 0;}
  .row02 .modeCon{ margin-top: 20px;}
  .row02 ul .tag{ line-height: 30px;}
  .row02 ul .date{ line-height: 30px;}
  .row02 ul .date i{ height: 30px;}
  .row02 .rightBox{ padding: 30px 0;}
  .row03 .lf{ padding-top: 0;}
  .row03 .lf ul li{ margin-top: 20px;}
  .row03 .lf ul li:first-child{ margin-top: 0;}
}

@media screen and (max-width:580px){
    .row03 .lf ul li a{ flex-direction: column;}
    .row03 .lf .img, .row03 .lf .infoBox{ width: 100%;}
    .row03 .lf .infoBox{ margin-top: 15px; padding: 0;}
}

@media screen and (max-width:480px){
    .banner-swiper-arrows .arrows{ width: 35px; height: 35px;}
    .banner-swiper-arrows .arrows::before{ width: 12px; height: 15px;}
    .modeTil .title .ch{ font-size: 24px;}
    .row01 .curPeriod{ padding-top: 20px;}
    .row01 .curPeriod .infoBox{ margin-top: 15px;}
    .row01 .curPeriod .signIn{ margin: 15px auto 0;}
    .row03 .rt li{ width: 100%; margin-top: 20px;}
    .row03 .rt .title{ height: auto;}
    .row03 .rt .summary{ height: auto;}
    .row04 .tag{ padding: 3px 20px;}
    .row04 .date{ margin-top: 15px;}
    .row01 .curPeriod .speaker{ line-height: 1.67; background-position: left 3px; margin-bottom: 0;}
}

@media screen and (max-width:414px){
    .row01 .name span{ font-size: 22px;}
    .row01 .curPeriod{ padding-top: 10px;}
    .row01 .curPeriod .title{ font-size: 20px;}
    .row01 .curPeriod .infoBox .person .gp-f24{ font-size: 18px;}
    .row01 .mainItem .textBox{ padding-left: 15px; padding-right: 15px;}
    .row03 .rt li a{ padding: 20px 15px;}
    .row04 .rt .tag{ padding: 3px 10px; font-size: 16px;}
    .row01 .curPeriod .title{ font-size: 18px;}
}

@media screen and (max-width:370px){
  
}