.box.on { display: block; } .box.off { display: none; } .fix_top { position: fixed; position: absolute; width: 100px; height: 100px; border-radius: 50%; top: 5px; right: 62px; z-index: 10; cursor: pointer; -webkit-transition: opacity 100ms; -o-transition: opacity 100ms; transition: opacity 100ms; outline: none; } .fix_top::before { content: ''; display: block; background: url(../images/side_prev.png) center no-repeat; width: 4px; height: 65px; position: absolute; left: 50%; margin: 0 0 0 -2px; bottom: -44px; z-index: 3; } .fix_bottom { position: fixed; position: absolute; width: 100px; height: 100px; border-radius: 50%; bottom: 5px; right: 62px; z-index: 10; cursor: pointer; -webkit-transition: opacity 100ms; -o-transition: opacity 100ms; transition: opacity 100ms; outline: none; } .fix_bottom::before { content: ''; display: block; background: url(../images/side_next.png) center no-repeat; width: 4px; height: 65px; position: absolute; left: 50%; margin: 0 0 0 -2px; top: -44px; z-index: 3; } .fix_bottom1 { background: #eee5df; } .fix_top2 { background: #93000b; } .fix_top2 .titleIn { color: #fff; } .fix_top3 { background: #eee5df; } .fix_bottom3 { background: #eee5df; } .fix_top4 { background: #fbf3e8; } .fix_bottom4 { background: #fbf3e8; } .fix_top5 { background: #efe5df; } .fix_bottom5 { background: #efe5df; } .fix_top6 { background: #FDF4E8; } .fix_bottom6 { background: #EFE5DF; } .fix_top7 { background: #F0E5E0; } .fix_bottom7 { background: #720000; } .fix_bottom7 .titleIn { color: #fff; } .cover { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; border-radius: 50%; z-index: 1; } .fix .title { z-index: 2; background: url(../images/index_title.png) left center no-repeat; position: absolute; background-size: 14px auto; width: calc(100% - 31px); padding: 0 0 0 19px; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: table; } .titleIn { font-size: 16px; display: table-cell; vertical-align: middle; } .index_041 ul { margin: 0 0 0 0; } .index_041 li {} .index_041 a { margin: 0 0 0; display: block; position: relative; } .index_041 .video { content: ''; display: block; background: url(../images/mode07_video.png) bottom center no-repeat; height: 113px; width: 12.8%; position: absolute; right: 9.09%; bottom: 15.8%; z-index: 2; max-width: 113px; background-size: 100% auto; } .index_041 a::after { content: ''; display: block; background: url(../images/mode04_cover.png) center no-repeat; position: absolute; right: 0; bottom: 0; left: 0; z-index: 0; padding-bottom: calc(148% / 9.24); background-size: 100% 100%; display: none; } .index_041 .title { margin: 0 0 0; position: absolute; left: 120px; right: 30px; bottom: 38px; color: #fff; z-index: 2; display: none; } .index_041 .img { position: relative; } .index_041 .img video { display: block; width: 100%; position: absolute; height: 100%; left: 0; top: 0; } .index_042 { margin: 0 0 0 10px; padding: 0px 0 138px 0; } .index_042 ul { margin: 0 0 0 0; } .index_042 li {} .index_042 a { margin: 0 0 2px; padding: 55px 0 27px; position: relative; border-bottom: 1px solid #fff; display: block; } .index_042 a::before { content: ''; display: block; width: 49px; height: 49px; background: url(../images/mode072_video1.png) center no-repeat; position: absolute; left: -9px; top: 58px; transition: all ease-in-out .3s; -ms-transition: all ease-in-out .3s; -moz-transition: all ease-in-out .3s; -webkit-transition: all ease-in-out .3s; -o-transition: all ease-in-out .3s; } .index_042 a:hover:before { background-image: url(../images/mode072_video2.png); } .index_042 .title { margin: 8px 0 0 47px; } .index_042 .info { color: #555; } .index_042 .slick-list { margin-left: -10px; } /* .index_042 .slick-current a, .index_042 a:hover { background: #94070a; } */ .index_042 .slick-current a::before, .index_042 a:hover::before { background-image: url(../images/mode072_video2.png); } .index_042 .slick-current .title, .index_042 .slick-current .info, .index_042 a:hover .title, .index_042 a:hover .info { color: #9F0401; } .index_042 .slick-arrow { border: 0; width: 37px; height: 37px; font-size: 0; outline: none; background: center no-repeat; transform: none; } .index_042 .slick-arrow:after { display: none; } .index_042 .slick-prev { right: 0px; background-image: url(../images/mode07_prev.png); bottom: -92px; } .index_042 .slick-next { right: 0px; background-image: url(../images/mode07_next.png); bottom: -138px; top: auto; } /* .index_042 .slick-prev:hover { background-image: url(../images/mode04_prev2.png); } .index_042 .slick-next:hover { background-image: url(../images/mode04_next2.png); } */ .fullpage_swiper { height: 100vh; overflow: hidden; position: relative; } .fullpage_swiper>.swiper-wrapper { transition-duration: 0ms !important; } .fullpage_swiper .section { position: relative; height: 100vh; overflow: hidden; } .fullpage_swiper .section.footer { height: auto; } .fullpage_swiper>.arrow { position: absolute; width: 88px; height: 88px; border-radius: 50%; bottom: 5px; right: 62px; z-index: 10; cursor: pointer; -webkit-transition: opacity 100ms; -o-transition: opacity 100ms; transition: opacity 100ms; outline: none; } .fullpage_swiper>.arrow.fullpage_prev { bottom: auto; top: 5px; } .fullpage_swiper>.arrow::before { content: ''; display: block; background: url(../images/side_next.png) center no-repeat; width: 4px; height: 65px; position: absolute; left: 50%; margin: 0 0 0 -2px; top: -44px; z-index: 3; } .fullpage_swiper>.arrow.fullpage_prev::before { top: auto; bottom: -44px; background-image: url(../images/side_prev.png); } .fullpage_swiper>.arrow.swiper-button-disabled { display: none; } .fullpage_swiper>.arrow .cover { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; border-radius: 50%; z-index: 1; } .fullpage_swiper>.arrow .title { z-index: 2; background: url(../images/index_title.png) left center no-repeat; position: absolute; background-size: 14px auto; width: calc(100% - 31px); padding: 0 0 0 19px; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } /* .fullpage_swiper > .arrow .title[num='3'], */ .fullpage_swiper>.arrow .title[num='0'], .fullpage_swiper>.arrow .title[num='8'] { color: #fff; } .fullpage_pagination { position: fixed; top: 50%; transform: translateY(-50%); z-index: 10; right: 96px; } .fullpage_pagination .swiper-pagination-bullet { width: 10px; height: 10px; margin: 10px auto !important; background: transparent; border: 1px solid #865D5D; opacity: 1; } .fullpage_pagination .swiper-pagination-bullet-active { width: 17px; height: 17px; background: #fff; border-color: #fff; } .wrap_mode01, .wrap_mode02, .wrap_mode03, .wrap_mode04, .wrap_mode05, .wrap_mode06, .wrap_mode07 { width: 100%; box-sizing: border-box; height: 100vh; padding: 0 !important; /* background: none !important; */ position: relative; } .mode01, .mode02, .mode03, .mode04, .mode05, .mode06, .mode07 { vertical-align: middle; display: inline-block; width: 100%; transform-origin: left top !important; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } .index_title { margin: 16px 0 0 20px; display: inline-block; width: 211px; height: 211px; background: #fff; border-radius: 50%; position: relative; text-align: center; z-index: 10; position: absolute; left: 0; top: 0; } .index_title::after { content: ''; display: block; clear: both; } .index_title::before { content: ''; display: block; width: 80px; height: 80px; background: url(../images/index_title.png) center no-repeat #fff; position: absolute; left: -18px; top: -16px; border-radius: 50px; } .index_title .channel_title { padding: 63px 0 6px; color: #911810; font-weight: bold; font-family: 'fzrzh'; width: 4em; margin: 0 auto; text-align: left; } .index_title .channel_title::after { content: ''; display: block; width: 4em; margin: 0 auto; height: 1px; background: #EDD6D5; } .index_title .vicetitle { position: relative; z-index: 2; width: 135px; margin: 0 auto; color: #959595; } .index_title .vicetitle2 { color: #911810; font-weight: bold; font-family: 'fzrzh'; } .index_more { position: absolute; display: block; line-height: 37px; height: 37px; padding: 0 50px 0 0; background: url(../images/index_more.png) right center no-repeat; } .wrap_mode01 { padding: 127px 0 92px; background: #FCF3E8; overflow: hidden; } .mode01 {} .mode01 .lf { width: calc(100% - 373px); float: left; overflow: hidden; } .mode01 .rt { width: 338px; float: right; overflow: hidden; } .mode01 .index_more { white-space: nowrap; right: 0; top: 0; } .index_011 { position: relative; padding: 244px 0 0; } .index_011 .btns_box { position: absolute; right: 15px; top: 421px; z-index: 10; } .index_011 .arrow { border: 2.5px solid #A10400; background: center no-repeat; border-radius: 50%; width: 20px; height: 20px; display: inline-block; vertical-align: middle; margin: 0 4px; } .index_011 .arrow.prev { background-image: url(../images/mode01_prev.png); } .index_011 .arrow.next { background-image: url(../images/mode01_next.png); } .index_011 .pagination { display: inline-block; vertical-align: middle; font-size: 20px; } .index_011 .pagination span.swiper-pagination-bullet { padding: 0 6px; width: auto; height: auto; background: none; opacity: .6; } .index_011 .pagination span.swiper-pagination-bullet-active { opacity: 1; } .index_011 ul { margin: 0 0 0 0; } .index_011 li {} .index_011 .item { margin: 0 0 0; position: relative; } .index_011 .info_box { position: absolute; right: 2px; left: 275px; top: -140px; padding: 27px 46px 258px; border: 5px solid #9F0401; } .index_011 .title { margin: 0 0 0; font-weight: bold; } .index_011 .img_box { margin: 0 155px 0 0; } .index_012 {} .index_012 ul { margin: 0 0 0 0; } .index_012 li { overflow: hidden; } .index_012 .item { margin: 0 0 35px; background: #fff; padding: 0 0 12px; } .index_012 .title { margin: 8px 30px 0; } .wrap_mode02 { padding: 126px 0 141px; background: #FCF3E8; } .mode02 {} .index_02 { padding: 137px 0 40px 220px; position: relative; } .index_02::before { content: ''; display: block; position: absolute; left: 75px; top: 62px; border: 5px solid #9F0401; width: 544px; bottom: 0; } .index_02 ul { margin: 0 0 0 0; } .index_02 li { width: 50%; } .index_02 .item { margin: 0 0 33px 60px; background: #fff; padding: 23px 40px 28px; position: relative; } .index_02 .title { margin: 0 0 19px; } .index_02 .img_box { margin: 0 110px 0 0; } .index_02 .time { width: 105px; border-bottom: 1px solid #C39999; padding: 0 0 8px 0; } .index_02 .slick-arrow { border: 0; width: 37px; height: 37px; font-size: 0; outline: none; background: center no-repeat; /* border: 2px solid #A10400; */ background: center no-repeat; border-radius: 50%; bottom: 145px; top: auto; transform: none; } .index_02 .slick-arrow:after { display: none; } .index_02 .slick-prev { left: -103px; background-image: url(../images/mode02_prev.png); } .index_02 .slick-next { right: auto; left: -46px; background-image: url(../images/mode02_next.png); } .index_02 .index_more { left: 96px; bottom: 25px; } .wrap_mode03 { padding: 125px 0 120px; position: relative; } .mode03 {} .index_03_bg, .index_03_bg ul, .index_03_bg li, .index_03_bg .item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background: center no-repeat; background-size: cover; } .index_03_bg li.off, .index_032 .box.off, .index_033 .box.off { display: none; } .mode03 .lf { width: 500px; float: left; } .index_031 {} .index_031 ul { text-align: right; overflow: hidden; } .index_031 li { width: auto; } .index_031 .item { margin: 104px 8px 56px; width: 108px; height: 108px; background: #fff; line-height: 108px; text-align: center; border-radius: 50%; position: relative; } .index_031 .item::before { content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; z-index: 2; } .index_031 .title { margin: 0 0 0; color: #B1ADAD; } .index_031 .on .title { color: #911810; } .index_031 .on .item::before { display: none; } .mode03 .rt { margin: 0 0 0 522px; position: relative; overflow: hidden; } .index_032 .box1, .index_032 .box2, .index_0331, .index_0332 { overflow: hidden; position: relative; padding-bottom: 30px } .index_032 { position: relative; padding: 11px 0 0; } .index_032::before { content: ''; display: block; position: absolute; top: 0; bottom: 75px; left: 148px; border-right: 1px dashed #B2B2B2; } .index_032 ul { margin: 0 0 -8px; } .index_032 li {} .index_032 .item { margin: 0 0 0; position: relative; padding: 0 0 24px 8px; overflow: hidden; } .index_032 .item::before { content: ''; display: block; width: 13px; height: 13px; border: 3px solid #B2B2B2; background: #fff; border-radius: 50%; position: absolute; left: 138px; top: 4px; } .index_032 .time { float: left; color: #3A3A3A; } .index_032 .title { margin: -2px 0 0 180px; color: #3A3A3A; } .index_032 .swiper-slide-thumb-active .item::before { border-color: #A10400; } .index_032 .swiper-slide-thumb-active .time, .index_032 .swiper-slide-thumb-active .title { color: #931810; } .index_032 .swiper-slide { opacity: 0; pointer-events: none; } .index_032 .swiper-slide-visible { opacity: 1; pointer-events: auto; } .index_032 .arrow { display: block; margin: 0 0 13px 135px; border: 1px solid #393939; border-radius: 50%; background: center no-repeat; width: 22px; height: 22px; position: relative; z-index: 2; } .index_032 .prev { background-image: url(../images/mode03_prev.png); } .index_032 .next { background-image: url(../images/mode03_next.png); } .index_032 .index_more { bottom: 0; right: 0; } .index_0331 { padding: 0; position: relative; margin: 95px 0 0; } .index_0331 li { display: none; } .index_0331 li:first-child { display: block; } .index_0331::before { content: ''; display: block; position: absolute; left: 0; top: 0; right: 126px; height: 355px; border: 5px solid #A10400; } .index_0331 .item { padding: 47px 0 0 38px; } .index_0331 .title { margin: 0 160px 49px 34px; font-weight: bold; color: #393939; } .index_0332 { padding: 0 0 77px; position: relative; margin: 4px 12px 0 62px; } .index_0332 li { display: none; } .index_0332 li:first-child { display: block; } .index_0332::before { content: ''; display: block; position: absolute; left: 0; bottom: 0; right: 132px; height: 360px; border: 5px solid #A10400; } .index_0332 .item { margin: 0 0 0 66px; position: relative; background: url(../images/mode032_bg1.png) bottom center no-repeat; background-size: 100% auto; } .index_0332 .item::before { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; background: url(../images/mode032_bg2.png) bottom center no-repeat; padding-bottom: 31.55%; z-index: 3; background-size: 100% auto; } .index_0332 .info_box { background: #EFEBEA; padding: 63px 63px 21.3% 99px; margin: 0 81px; position: relative; z-index: 2; } .index_0332 .title { margin: 0 0 52px; font-weight: bold; } .index_0332 .article { height: 360px; margin: 0 0 16px; } .index_0332 .time { position: absolute; z-index: 3; color: #931810; text-align: center; left: 0; right: 0; bottom: 0; padding-bottom: 10.8%; } .index_0331.on::before, .index_0332.on .swiper-wrapper { animation: index_0331 .7s ease-out; } @keyframes index_0331 { 0% { top: 30px; opacity: .5; } 100% { top: 0px; opacity: 1; } } .index_0332.on::before, .index_0331.on .swiper-wrapper { animation: index_0332 .7s ease-out } @keyframes index_0332 { 0% { bottom: 30px; opacity: .5; } 100% { bottom: 0px; opacity: 1; } } .wrap_mode04 { padding: 127px 0 155px; background: #EFE5DF; } .mode04 {} .index_04 { padding: 77px 0 0 380px; position: relative; } .index_04::before { content: ''; display: block; position: absolute; left: 210px; top: 223px; border: 5px solid #9F0401; bottom: 148px; right: 200px; } .index_04 ul { margin: 0 0 0 0; } .index_04 li { width: 50%; } .index_04 .item { margin: 0 1px 60px 80px; background: #fff; padding: 30px 50px 68px; position: relative; } .index_04 .title { margin: 0 0 10px; } .index_04 .tip { display: block; position: absolute; right: 0; bottom: 0; background: #931810; color: #fff; min-width: 100px; text-align: center; } .index_04 .slick-arrow { border: 0; width: 37px; height: 37px; font-size: 0; outline: none; background: center no-repeat; /* border: 2px solid #A10400; */ background: center no-repeat; border-radius: 50%; bottom: 175px; top: auto; transform: none; } .index_04 .slick-arrow:after { display: none; } .index_04 .slick-prev { left: -121px; background-image: url(../images/mode02_prev.png); } .index_04 .slick-next { right: auto; left: -68px; background-image: url(../images/mode02_next.png); } .mode04 .index_more { left: 260px; bottom: 172px; } .wrap_mode05 { padding: 130px 0 60px; background: #FCF3E8; } .mode05::before { content: ''; display: block; position: absolute; right: 86px; left: 130px; top: 168px; bottom: 125px; border: 5px solid #9F0401; z-index: -1; } .mode05 .lf { width: calc(100% - 350px); position: absolute; left: 0; top: 0; bottom: 0; } .mode05 .rt { width: 325px; float: right; } .mode05 .index_more { right: 0; bottom: 0; z-index: 2; } .index_052 li.off { display: none; } .index_051 { position: absolute; left: 100px; right: 0; top: 0; bottom: 0; width: calc(100% - 100px); } .index_051 ul { position: absolute; padding-bottom: 82.83%; top: 50%; transform: translateY(-50%); width: 100%; } .index_051 li { width: auto; position: absolute; transition: all ease-in-out .3s; -ms-transition: all ease-in-out .3s; -moz-transition: all ease-in-out .3s; -webkit-transition: all ease-in-out .3s; -o-transition: all ease-in-out .3s; } .index_051 li[pos='0'] { width: 48.18%; top: 13.4%; left: 25.86%; } .index_051 li[pos='1'] { width: 21.62%; top: 36.6%; left: 0; } .index_051 li[pos='2'] { width: 22.73%; top: 70.73%; left: 20.2%; } .index_051 li[pos='3'] { width: 25.75%; top: 62.2%; left: 66.77%; } .index_051 li[pos='4'] { width: 23.53%; top: 14.15%; left: 76.7%; } .index_051 .item { margin: 0 0 0; position: relative; border-radius: 50%; overflow: hidden; } .index_051 .img { padding-bottom: 100%; border-radius: 50%; } .index_051 li.off .item::before { content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background: #382828; opacity: .6; z-index: 2; } .index_052 { background: #951810; height: 820px; } .index_052 ul { margin: 0 0 0 0; } .index_052 li {} .index_052 .item { margin: 0 0 0; padding: 79px 35px 150px; color: #fff; position: relative; top: 0; } .index_052 .img_box { width: 126px; margin: 0 auto 10px; } .index_052 .img { padding-bottom: 100%; border-radius: 50%; } .index_052 .title { margin: 0 0 0; color: #fff; text-align: center; } .index_052 .vicetitle { margin: 40px 0 70px; font-weight: bold; color: #fff; display: block; } .index_052 .info { margin: 0 0 0; max-height: 264px; } .index_052 li.on .item { animation: index_052 .7s ease-out } @keyframes index_052 { 0% { top: 30px; opacity: .5; } 100% { top: 0px; opacity: 1; } } .wrap_mode06 { padding: 0; background: #FDF4E8; } .mode06 { padding-top: 260px; padding-bottom: 60px; } .mode06::before { content: ''; display: block; position: absolute; right: 86px; top: 134px; bottom: 0; border: 5px solid #9F0401; z-index: -1; width: 57.8%; } /* .mode06 .index_more{position: absolute;right: 120px;display: block;top: 173px;line-height: 37px;height: 37px;padding: 0 50px 0 0;background: url(../images/index_more.png) right center no-repeat;} */ .mode06 .index_more { right: 120px; top: 173px; } .index_06 .img { padding-bottom: calc(100vh - 440px); } .wrap_mode07 { background: #F0E5E0; overflow: hidden; } /* .mode07{ padding-top: 140px; opacity: .6; } */ .mode07 .index_more { right: 150px; top: 205px; } .mode07 .index_title .channel_title { white-space: nowrap; width: auto; margin: 0 auto; letter-spacing: -2px; text-align: center; } .mode07 .lf { width: calc(100% - 560px); float: left; overflow: hidden; position: relative; padding-top: 270px; padding-bottom: 53px; } .mode07 .lf::before { content: ''; display: block; position: absolute; left: 130px; right: 130px; top: 120px; bottom: 0; border: 5px solid #9F0401; } .mode07 .rt { width: 470px; float: right; overflow: hidden; padding: 180px 0 0; } .index_071 { position: relative; padding: 0 0 0; z-index: 2; } .index_071 ul { margin: 0 0 0 0; } .index_071 li {} .index_071 .item { margin: 0 1px 0; position: relative; } .index_071 .img_box { margin: 0 0 0; } .index_071 .img { position: relative; } .index_071 .img::before { content: ''; display: block; background: url(../images/mode07_video.png) bottom center no-repeat; height: 113px; width: 12.8%; position: absolute; right: 9.09%; bottom: 15.8%; z-index: 2; max-width: 113px; background-size: 100% auto; } .index_072 { overflow: hidden; padding: 0 0 0 9px; } .index_072 ul { margin: 0 0 0 0; } .index_072 li { /* padding: 0 0 24px; */ /* height: auto !important; */ } .index_072 .item { margin: 0 0 2px; padding: 55px 0 27px; position: relative; border-bottom: 1px solid #fff; } .index_072 .item::before { content: ''; display: block; width: 49px; height: 49px; background: url(../images/mode072_video1.png) center no-repeat; position: absolute; left: -9px; top: 58px; transition: all ease-in-out .3s; -ms-transition: all ease-in-out .3s; -moz-transition: all ease-in-out .3s; -webkit-transition: all ease-in-out .3s; -o-transition: all ease-in-out .3s; } .index_072 .title { margin: 8px 0 0 47px; } .index_072 .item:hover::before { background-image: url(../images/mode072_video2.png); } .mode07 .arrow_box { float: right; margin: 52px 0 0; } .mode07 .arrow { width: 37px; height: 37px; display: block; margin: 9px 0; background: center no-repeat; } .mode07 .prev { background-image: url(../images/mode07_prev.png); } .mode07 .next { background-image: url(../images/mode07_next.png); } .mode01 .lf, .mode01 .rt { position: relative; } .swiper-slide-active .banner_logo { animation: banner_logo 1.6s ease-out } @keyframes banner_logo { 0% { top: 80%; opacity: .5; } 100% { top: 50%; opacity: 1; } } .swiper-slide-active .mode01 .lf { animation: lfenter .8s ease-out 1s } @keyframes lfenter { 0% { left: -100px; opacity: .5; } 100% { left: 0; opacity: 1; } } .swiper-slide-active .mode01 .rt { animation: rtenter .8s ease-out 1s } @keyframes rtenter { 0% { right: -100px; opacity: .5; } 100% { right: 0; opacity: 1; } } .swiper-slide-active .index_02::before { animation: lefttop .8s ease-out 1s; } @keyframes lefttop { 0% { opacity: .5; transform: translate(-50px, -30px); } 100% { opacity: 1; transform: translate(0px, 0px); } } .swiper-slide-active .index_02 ul { animation: rightbottom .8s ease-out 1s; } @keyframes rightbottom { 0% { opacity: .5; transform: translate(50px, 30px); } 100% { opacity: 1; transform: translate(0px, 0px); } } .swiper-slide-active .mode03 .lf, .swiper-slide-active .index_04 ul, .swiper-slide-active .index_06, .swiper-slide-active .mode07 .rt { animation: left .8s ease-out 1s; } @keyframes left { 0% { opacity: .5; transform: translate(-50px, 0px); } 100% { opacity: 1; transform: translate(0px, 0px); } } .swiper-slide-active .mode03 .rt, .swiper-slide-active .index_04::before, .swiper-slide-active .mode06 .index_more, .swiper-slide-active .mode07 .lf { animation: right .8s ease-out 1s; } @keyframes right { 0% { opacity: .5; transform: translate(50px, 0px); } 100% { opacity: 1; transform: translate(0px, 0px); } } @media screen and (max-width:1640px) {} @media screen and (max-width: 1480px) {} @media screen and (max-width:1220px) {} @media screen and (max-width: 992px) { .index_041 .img { padding-top: 40px; } .fix { display: none; } .fullpage_swiper, .fullpage_swiper>.swiper-wrapper, .fullpage_swiper .section, .wrap_mode01, .wrap_mode02, .wrap_mode03, .wrap_mode04, .wrap_mode05, .wrap_mode06, .wrap_mode07 { height: auto; display: block; } .fullpage_swiper>.arrow { display: none; } .wrap_mode01, .wrap_mode02, .wrap_mode03, .wrap_mode04, .wrap_mode05, .wrap_mode06, .wrap_mode07 { padding: 30px 0 !important; } .mode01, .mode02, .mode03, .mode04, .mode05, .mode06, .mode07 { left: 0%; top: 0%; transform: translateX(0%) translateY(0%); display: block; position: relative; width: auto; } .wrap_mode01 { background: #EFE5DF !important; } .wrap_mode02 { background: #FCF3E8 !important; } .wrap_mode04 { background: #EFE5DF !important; } .wrap_mode05 { background: #FCF3E8 !important; } .wrap_mode06 { background: #FDF4E8 !important; } .wrap_mode07 { background: #F0E5DF !important; } .index_title { display: block; width: auto; height: auto; position: relative; height: 60px; line-height: 60px; margin: 0; background: transparent; text-align: left; } .index_title::before { left: 0; top: 0; width: 60px; height: 60px; background-size: 70% auto; } .index_title .vicetitle, .index_title .channel_title::after { display: none; } .index_title .channel_title, .mode07 .index_title .channel_title { padding: 0; text-align: left; margin: 0 0 0 70px; width: auto; float: left; } .index_more { line-height: 24px; height: 24px; background-size: auto 100%; padding-right: 30px; } .mode01 .rt { display: none; } .mode01 .lf { width: auto; float: none; } .mode01 .index_more { bottom: 0; top: auto; } .index_011 { padding: 120px 0 0; } .index_011 .info_box { left: 36px; padding: 13px 24px 238px; top: -100px; } .index_011 .btns_box { top: 300px; } .index_02 { padding: 20px 0 50px 20px; } .index_02 .item { margin: 0 0 20px 30px; padding: 16px 24px; } .index_02::before { left: 0; bottom: 0; top: 20%; } .index_02 .slick-arrow { bottom: -30px; } .index_02 .slick-prev { left: 0px; } .index_02 .slick-next { right: auto; left: 50px; } .index_02 .index_more { left: 40px; } .mode03 .lf { width: auto; float: none; } .mode03 .rt { margin: 0; } .mode03 .index_title {} /* .mode03 .index_title .channel_title,.mode03 .index_title .vicetitle2{color: #fff;} */ .index_031 ul { text-align: center; } .index_031 .item { margin: 20px 10px; } .index_032 { clear: both; } .index_032 .item { padding-bottom: 20px; } .index_0331 { margin: 30px 0 0; } .index_0331 .item { padding: 30px 0 0 30px; } .index_0331 .title { margin: 0 160px 30px 0px; } .index_0332 { margin: 0; padding: 0 0 40px; } .index_0332 .item { margin: 0 0 0 40px; } .index_0332 .info_box { padding: 30px 50px 21.3%; margin: 0 40px; } .mode04 .index_more { left: 40px; bottom: 30px; } .index_04 { padding: 20px 0 50px 20px; } .index_04::before { left: 0; bottom: 0; top: 50%; right: 20%; } .index_04 .item { margin: 0 1px 30px 20px; padding: 16px 22px 38px; } .index_04 .slick-arrow { bottom: -30px; } .index_04 .slick-prev { left: 0px; } .index_04 .slick-next { right: auto; left: 50px; } .mode05 .lf { width: auto; position: relative; } .mode05 .index_more { bottom: auto; top: 30px; } .index_051 { position: relative; width: auto; left: 0; } .index_051 ul { position: relative; top: -50px; transform: translateY(0%); } .mode05 .rt { width: auto; float: none; } .index_052 { height: auto; } .index_052 .item { padding: 30px 20px 50px; } .index_052 .vicetitle { margin: 10px 0 20px; height: auto; -webkit-line-clamp: initial; } .mode06 { padding-top: 0px; padding-bottom: 30px; } .mode06 .index_more { top: 10px; right: 0; } .index_06 { padding-top: 20px; } .index_06 .img { padding-bottom: 0; height: auto; } .mode06::before { top: 50px; } .mode07 .lf::before { top: 60px; right: 30px; } .mode07 .index_more { right: 0; top: 20px; } .mode07 .lf { width: auto; float: none; padding-top: 0px; padding-bottom: 20px; } .index_071 { padding-top: 30px; } .mode07 .rt { width: auto; float: none; padding: 0px 0 0; } .index_042 a{ padding: 20px 0; } .index_042 a::before{top:20px} .index_072 .item { padding: 20px 0; } .index_072 .item::before { top: 20px } .mode07 .arrow_box { margin: 10px 0 0; float: none; text-align: center; } .mode07 .arrow { display: inline-block; margin: 0 10px; } } @media screen and (max-width:767px) { .index_title { line-height: 40px; height: 40px; } .index_title::before { width: 40px; height: 40px; } .index_title .channel_title, .mode07 .index_title .channel_title { margin-left: 50px; } .index_011 .item { padding: 0 0 40px; } .index_011 .info_box { padding-bottom: 160px; } .index_011 .img_box { margin: 0; } .index_011 .btns_box { top: auto; bottom: 0; } .index_02::before { width: auto; right: 30px; } .index_031 .item { width: 80px; height: 80px; line-height: 80px; } .index_0331::before { height: auto; bottom: 30%; right: 40px; } .index_0331 .title { margin: 0 60px 30px 0; } /* .mode05 .index_more{top: 0;} */ .index_051 ul { top: -10px; } } @media screen and (max-width:639px) { .index_04 li,.index_02 li{display: none;} .index_04 li:first-child,.index_02 li:first-child,.index_04 li:nth-child(2),.index_02 li:nth-child(2){display: block;} .index_02 li, .index_04 li { width: 100%; } .mode05::before { right: 30px; left: 30px; top: 90px; } } @media screen and (max-width:413px) { .mode06 .index_more { top: 0; position: relative; display: inline-block; } .mode06::before { display: none; } .mode06 { padding-bottom: 0; } }