.main {padding:210px 60px 0 60px; background:url('../img/main_bg.png')no-repeat left top 100px; position: relative; overflow-x:hidden; }
.main .sec1 {max-width:1600px; margin:0 auto; width:100%; padding-bottom:115px; }
.main .sec1:after {content:''; clear:both; display: table;}
.main .sec1 .txt {float:left; width:calc(100% - 940px); height: 440px; display: flex; flex-direction: column; justify-content: center; margin-top:-35px;}
.main .sec1 .txt h2 {font-size:35px; color:#000;}
.main .sec1 .txt p {margin-top:30px; font-size:15px; color:#222; line-height:1.5em;}
.main .sec1 .txt p .mo {display: none;}
.main .sec1 .txt .bt_box {max-width:515px; width:100%; margin-top:35px;}
.main .sec1 .txt .bt_box:after {content:''; clear:both; display: table;}
.main .sec1 .txt .bt_box button {float:left; width:Calc((100% - 10px) / 2); margin-bottom:10px; height:55px; border:1px solid #111; color:#fff; background:#111; font-size:16px;}
.main .sec1 .txt .bt_box button:nth-child(2n) {float:right;}
.main .sec1 .txt .bt_box button.w_bt {background:#fff; color:#111;}
.main .sec1 .txt .bt_box button:nth-child(5) {width:100%;}

.main .sec1 .img {float:right; width:900px; height:auto; position: absolute; right:60px; top:105px;}
.main .sec1 .img .img_posi {width:100%; padding-top:61.8%; position: relative}
.main .sec1 .img .swiper {width:100%; height:100%;  position: absolute; left:0; top:0;}
.main .sec1 .img .swiper .swiper-slide {width:100%; height:100%; position: relative;}

.main .sec1 .banner-img {width: 100%;height: 100%;object-fit: cover;display: block; object-position:center;}

.main .sec1 .img.swiper_pc_cont {display:block;}
.main .sec1 .img.swiper_mobile_cont {display:none;}


.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after, .swiper-button-next:after, .swiper-button-prev:after {content:none !important;}
.main .sec1 .img .arrow_box_wid {position: absolute; right:-60px; bottom:0; width:100%; z-index: 1; width:120px; cursor: pointer}
.main .sec1 .img .arrow_box_wid .swiper-button-next_top-banner {float:right;}
.main .sec1 .img .arrow_box_wid .swiper-button-prev_top-banner {float:left;}

.main .sec1 .img .page_box {position: absolute; left:0; bottom:0 ; width:230px; height:60px; background:rgba(0,0,0,.75); z-index: 1; padding:28px 50px;}
.main .sec1 .img .swiper-pagination { display: flex; flex-wrap: nowrap; position: relative !important; height:2px; background:rgba(255,255,255,.2); bottom:0 !important; top:0 !important}
.main .sec1 .img .swiper-pagination-bullet {flex:1 0 0; margin:0 !important; height:2px !important; background:rgba(255,255,255,0) !important; border-radius:0 !important; transition: .5s;}
.main .sec1 .img .swiper-pagination-bullet-active {background:#fff !important; opacity:1 !important; }
.main .sec1 .img .page_box .first_txt {position: absolute; left:20px; top:20px; font-size:17px; color:#fff; font-weight:500;}
.main .sec1 .img .page_box .last_txt {position: absolute; right:20px; top:20px; font-size:17px; color:#fff; font-weight:500;}










.main .sec2 {max-width:1600px; margin:0 auto 40px auto; width:100%; position: relative; padding-bottom:40px;}
.main .sec2 h2 {font-size:25px; color:#000; margin-bottom:25px; font-weight:600;}
.main .sec2 h2:after {content:''; clear:both; display: table}
.main .sec2 .more_bt {height:38px; font-size:14px; color:#8a8a8a; background:#fff; border:1px solid #d4d4d4; padding:0 15px 2px 18px; float:right; position: absolute; right:0; top:-4px; transition: .3s}
.main .sec2 .more_bt img {margin:-2px 0 0 15px; filter: opacity(.6);}
.main .sec2 .more_bt:hover {border:1px solid #111; background:#111; color:#fff;}
.main .sec2 .more_bt:hover img {filter:brightness(0) invert(1) opacity(1)}
.main .sec2 .swiper2 {overflow: visible;}
.main .sec2 .swiper2 .swiper-slide {width:300px !important; }
.main .sec2 .swiper2 .swiper-slide .img {width:100%; padding-top:100%; position: relative; box-shadow: 0 0 7px rgba(0,0,0,.1); cursor:pointer;}
.main .sec2 .swiper2 .swiper-slide .img img.front {position: absolute; left:0; top:0; width:100%; height:100%;}
.main .sec2 .swiper2 .swiper-slide .img img.back {position: absolute; left:0; top:0; width:100%; height:100%; opacity: 0; z-index: 1; transition: .5s;}
.main .sec2 .swiper2 .swiper-slide:hover img.back {opacity: 1;}
.main .sec2 .swiper2 .swiper-slide .banner_icon {position: absolute; right:5px; bottom:-12px; z-index: 2;}
.main .sec2 .swiper2 .swiper-slide .banner_icon img {float:left; margin-left:5px;}
.main .sec2 .swiper2 .swiper-slide p {font-size:17px; margin-top:21px; color:#000; font-weight:600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.main .sec2 .swiper2 .swiper-slide span {display: inline-block; width:100%; margin-top:6px; font-size:14px; color:#777; font-weight:300; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.main .sec2 .swiper2 .swiper-slide .go_bt:after {content:''; clear:both; display: table}
.main .sec2 .swiper2 .swiper-slide .go_bt {margin-top:20px;}
.main .sec2 .swiper2 .swiper-slide .go_bt .write {float:left; width:calc(100% - 45px); font-size:15px; color:#fff; border:none; background:#111; transition: .3s; height:40px; font-weight:500;}
.main .sec2 .swiper2 .swiper-slide .go_bt .write:hover {background:#111; color:#fff;}
.main .sec2 .swiper2 .swiper-slide .go_bt .preview_open {float:right; width:40px; height:40px; border:1px solid #111; background:none;}
.main .sec2 .swiper2 .swiper-slide .go_bt .preview_open img {width:20px; margin-top:-1px;}
.swiper-scrollbar {opacity: 1 !important; max-width:1600px !important; width:100% !important; left:50% !important; transform: translate(-50%,0) !important; background:#F8F8F8 !important; height:6px !important; z-index: 0 !important;}
.swiper-scrollbar-drag {background:#E0E0E0 !important}








.main .sec3 {margin:100px 0 0 0; width:100%; background:url('../img/sec3_bg.png')no-repeat center; background-size:cover; margin-left:-60px; width:calc(100% + 120px); padding:165px 60px 0 60px; height:555px;}
.main .sec3 .wid {max-width:1600px;  margin:0 auto; width:100%;}
.main .sec3 h2 {font-size:25px; color:#000; margin-bottom:25px; font-weight:600; padding-left:60px;}
.main .sec3 ul:after {content:''; clear:both; display: table;}
.main .sec3 ul li {float:left; width:calc(100% / 3); padding-left:60px; border-right:1px dashed #E5DBD1;}
.main .sec3 ul li:last-child {border-right:none;}
.main .sec3 ul li img {margin-bottom:30px;}
.main .sec3 ul li b {display: inline-block; padding:4px 10px; font-size:13px; color:#fff; background:#C8BEBA; border-radius:50px; font-weight:400;}
.main .sec3 ul li p { font-size:18px; margin-top:10px; color:#111; font-weight:600; }
.main .sec3 ul li span {display: inline-block; width:100%; line-height:1.35em; margin-top:10px; font-size:14px; color:#777;}












.main .sec4 {max-width:1600px; margin:80px auto 0px auto; width:100%; position: relative; padding-bottom:40px;}
.main .sec4:after {content:''; clear:both; display: table;}
.main .sec4 h2 {font-size:25px; color:#000; margin-bottom:25px; font-weight:600;}
.main .sec4 .box1 {float:left; width:calc(100% - 570px); position: relative; padding-bottom:20px; display: none;}
.main .sec4 .box1 .swiper3 {width:calc(100% + 40px); overflow: hidden; padding:20px; margin:-20px 0 0 -20px; }
.main .sec4 .box1 .swiper3 .swiper-slide { overflow: hidden;  cursor: pointer; padding:10px; border-radius:10px; box-shadow: 5px 5px 20px rgba(0,0,0,.1); min-width:280px;}
.main .sec4 .box1 .swiper3 .swiper-slide .quick {position: absolute; right:20px; top:20px; border:none; background:none; z-index: 1;}
.main .sec4 .box1 .swiper3 .swiper-slide .img {width:100%; padding-top:78%; border:1px solid #eee; background:#f6f6f6; border-radius:8px; position: relative}
.main .sec4 .box1 .swiper3 .swiper-slide .txt {padding:7px 5px 10px 5px;}
.main .sec4 .box1 .swiper3 .swiper-slide .txt .name {font-size:15px; color:#111; margin-top:10px; font-weight:500;}
.main .sec4 .box1 .swiper3 .swiper-slide .txt .loca {margin-top:5px; font-size:13px; color:#999; line-height:1.3em; height:46px;}
.main .sec4 .box1 .swiper3 .swiper-slide .tag:after {content:''; clear:both; display: table}
.main .sec4 .box1 .swiper3 .swiper-slide .tag span {display: inline-block; padding:5px 10px; font-size:14px; color:#fff; background:#bdb1ac; border-radius:50px; float:left; margin-right:4px; }

.main .sec4 .box3 {float:left; width:calc(100% - 520px); position: relative;  border-radius:25px; overflow: hidden; cursor:pointer;}
.main .sec4 .box3 .img { background:url('../img/main_banner_img.jpg')no-repeat center left; background-size:cover; width:100%; height:380px; }

.tag{display:flex;white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action: pan-y;}
.tag::-webkit-scrollbar{ display:none; }
.tag span{flex:0 0 auto;display:inline-block;padding:4px 10px;border-radius:999px;background:#f3f5f7;font-size:12px;line-height:1;max-width:180px;overflow:hidden;text-overflow:ellipsis;}
.tag.dragging{ cursor:grabbing; user-select:none; }

.main .sec4 .box1 .swiper-button-next_mid-banner {position: absolute; right:-62px; top:202px; cursor: pointer;}
.main .sec4 .box1 .swiper-button-prev_mid-banner {position: absolute; left:-62px; top:202px; cursor: pointer;}

.main .sec4 .box2 {float:right; width:450px; }
.main .sec4 .box2 ul li {padding:22px 0 22px 100px; border-bottom:1px solid #e8e8e8; font-size:14px; color:#222; font-weight:500;position: relative; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height:1.45em;}
.main .sec4 .box2 ul li span {position: absolute; left:0; top:22px; font-size:14px; color:#777; font-weight:400;}
.main .sec4 .box2 ul li:last-child {border-bottom:none;}
.main .sec4 .box2 ul li b {display: inline-block; color:#FF6262; padding:2px 7px; background:#FFE7E7; border-radius:3px; font-size:13px; margin-right:6px;}
.main .sec4 .box2 button {width:100%; border:1px solid #111; color:#111; font-size:15px; background:none; text-align: left; padding:0 20px; transition: .3s; height:45px; margin-top:20px;}
.main .sec4 .box2 button:after {content:''; clear:both; display: table;}
.main .sec4 .box2 button img {float:right; margin-top:1px;}
.main .sec4 .box2 button:hover {background:#111; color:#fff;}
.main .sec4 .box2 button:hover img {filter:invert(1);}









.main .sec5 {max-width:1600px; margin:80px auto 60px auto; width:100%; position: relative; padding-bottom:40px;}
.main .sec5:after {content:''; clear:both; display: table;}
.main .sec5 .box {float:left; width:calc((100% - 30px) / 2); position: relative;   display: inline-block;}
.main .sec5 .box .img {width:100%; padding-top:30%; border-radius:15px; background:#eee; background:url('../img/sec5_img1.jpg')no-repeat center; background-size:cover;}

.main .sec5 .box .img.pc_img {display:block;}
.main .sec5 .box .img.mobile_img {display:none;}

.main .sec5 .box:last-child {float:right;}
/*.main .sec5 .box:last-child .img { background:url('../img/sec5_img2.jpg')no-repeat center; background-size:cover;}*/










@media screen and (max-width:1600px) {
    .main .sec1 {padding-bottom:65px;}
    .main .sec1 .img {width:750px; top:135px;}
    .main .sec1 .txt {width:calc(100% - 740px);}


}

@media screen and (max-width:1440px) {
    .main {padding-top:160px;}
    .main .sec1 .img {width:620px; }
    .main .sec1 .txt {width:calc(100% - 660px);}
    .main .sec1 .txt h2 {font-size:30px;}
    .main .sec1 .txt p {font-size:14px; margin-top:20px;}
    .main .sec1 .txt p br {display: none;}
    .main .sec1 .txt .bt_box {margin-top:35px;}


    .main .sec3 {padding:165px 20px 0 20px;}
}


@media screen and (max-width:1200px) {
    .main {padding:160px 40px 0 40px;}
    .main .sec1 .txt {width:100%; height:auto; display: initial}
    .main .sec1 .img {width:calc(100% + 120px); position: relative; right:-60px; top:0; margin-top:50px;}
    .main .sec1 .img .arrow_box_wid {right:0; background:rgba(255,255,255,.7);}
    .main .sec1 .txt p br {display: block;}
    .main .sec1 {padding-bottom:60px;}


    .main .sec3 {margin-top:50px;}
    .main .sec3 h2 {padding-left:30px;}
    .main .sec3 ul li {padding-left:30px;}

    .main .sec4 {margin-top:50px;}
    .main .sec4 .box1 {width:100%;}
    .main .sec4 .box2 {width:100%; margin-top:50px;}
    .main .sec4 .box1 .swiper-button-next_mid-banner, .main .sec4 .box1 .swiper-button-prev_mid-banner {display: none;}

    .main .sec5 {margin-top:0; margin-bottom:30px;}
    .main .sec5 .box {width:100%; margin-top:15px;}

    .main .sec4 .box3 {width:100%;}
    .main .sec4 .box3 .img {width:100%; height:auto; padding-top:35%;}
}



@media screen and (max-width:767px) {
    .main .sec5 .box .img.pc_img {display:none;}
    .main .sec5 .box .img.mobile_img {display:block;}

    .main .sec1 .img.swiper_pc_cont {display:none;}
    .main .sec1 .img.swiper_mobile_cont {display:block;}


    .main {padding:115px 20px 0 20px; background-position:left top 50px;}
    .main .sec1 {padding-bottom:20px;}
    .main .sec1 .txt h2 {font-size:25px;}
    .main .sec1 .txt p span {display: none;}
    .main .sec1 .txt p {margin-top:15px;}
    .main .sec1 .txt p .mo {display: block;}

    .main .sec1 .txt .bt_box {margin-top:30px;}
    .main .sec1 .txt .bt_box button {height:45px; font-size:14px; margin-bottom:8px; padding-bottom:2px;}

    .main .sec1 .img {right:-20px; width:calc(100% + 40px);  margin-top:17px;}
    .main .sec1 .img .page_box {transform: scale(0.7); left:-35px; bottom:-9px;}
    .main .sec1 .img .arrow_box_wid {transform: scale(0.7); right:-18px; bottom:-9px;}

    .main .sec2 {padding-bottom:60px;}
    .main .sec2 h2 {display: none;}
    .main .sec2 .more_bt {position: relative; top:0; width:100%; margin-top:45px;}
    .swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {bottom:35px !important;}
    .main .sec2 .swiper2 .swiper-slide {width:185px !important}
    .main .sec2 .swiper2 .swiper-slide p {font-size:14px; margin-top:16px;}
    .main .sec2 .swiper2 .swiper-slide span {font-size:12px;}
    .main .sec2 .swiper2 .swiper-slide .go_bt {margin-top:15px;}
    .main .sec2 .swiper2 .swiper-slide .go_bt .write {height:35px; font-size:14px; width:calc(100% - 40px);}
    .main .sec2 .swiper2 .swiper-slide .go_bt .preview_open {width:35px; height:35px;}
    .main .sec2 .swiper2 .swiper-slide .go_bt .preview_open img {width:17px;}
    .main .sec2 .swiper2 .swiper-slide .banner_icon {bottom:-9px;}
    .main .sec2 .swiper2 .swiper-slide .banner_icon img {height:18px;}

    .main .sec3 {background:url('../img/sec3_bg2.jpg')no-repeat center top; background-size:cover; width:calc(100% + 40px); margin-left:-20px; padding:65px 0 0 0; height:525px;}
    .main .sec3 h2 {font-size:20px; margin-bottom:20px;}
    .main .sec3 ul li {width:100%; position: relative; padding-left:160px; margin-bottom:30px;}
    .main .sec3 ul li img {width:120px; position: absolute; left:25px; top:0;}
    .main .sec3 ul li:last-child img {top:-6px;}
    .main .sec3 ul li b {padding:3px 8px; font-size:11px;}
    .main .sec3 ul li p {font-size:15px; margin-top:8px;}
    .main .sec3 ul li span {margin-top:4px; font-size:13px;}

    .main .sec4 {margin-top:35px;}
    .main .sec4 h2 {font-size:20px; margin-bottom:15px;}
    .main .sec4 .box2 {margin-top:0;}
    .main .sec4 .box2 ul li {font-size:13px; padding:16px 0 16px 85px}
    .main .sec4 .box2 ul li span {font-size:13px; top:16px;}
    .main .sec4 .box1 .swiper3 .swiper-slide {width:280px !important;;}

    .main .sec5 .box .img {padding-top:60%; background:url('../img/sec5_img1_mo.jpg')no-repeat center; background-size:cover;}
    .main .sec5 .box:last-child .img { background:url('../img/sec5_img2_mo.jpg')no-repeat center; background-size:cover;}


    .main .sec4 .box3 {width:100%; border-radius:15px; display: none;}
    .main .sec4 .box3 .img {padding-top:35%; height:auto;}

}













.main_pop {position: fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.7); display: none; z-index: 100;}
.main_pop.on {display: block;}
.main_pop .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:650px; aspect-ratio: 1 / 1; }
.main_pop .view .col {position: absolute; right:0; top:-45px; }
.main_pop .view .col button {width:auto; padding:0 20px; height:34px; border-radius:5px; background:rgba(0,0,0,.6); font-size:12px; color:#fff; font-weight:300; border:none; transition: .3s;}
.main_pop .view .col button:hover {background:#a90f0f;}
.main_pop .view .col button.main_pop_close {width:34px; padding:0; position: relative }
.main_pop .view .col button.main_pop_close:after {content:''; width:2px; height:16px;  transform: rotate(45deg); margin:-8px 0 0 -1px; display: block; position: absolute; top:50%; left:50%; transform-origin: 50% 50%;background:#fff;}
.main_pop .view .col button.main_pop_close:before {content:''; width:2px; height:16px;  transform: rotate(-45deg); margin:-8px 0 0 -1px; display: block; position: absolute; top:50%; left:50%; transform-origin: 50% 50%;background:#fff;}

.main_pop .view .swiper_pop {position: absolute; left:0; top:0; width:100%; height:100%;}
.main_pop .view .swiper_pop .swiper-slide {width:100%; height:100%; position: relative}
.main_pop .view .swiper_pop .swiper-slide img {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); max-width:100%; max-height:100%; width:100%; height:100%; object-fit: cover}
.main_pop .view .swiper_pop .swiper-slide { opacity: 0 !important; transition: opacity 0.5s ease !important;}
.main_pop .view .swiper_pop .swiper-slide-active {opacity: 1 !important;}
.main_pop .view .swiper_pop {overflow: hidden; }

.main_pop .view .swiper-horizontal>.swiper-pagination-bullets, .main_pop .view  .swiper-pagination-bullets.swiper-pagination-horizontal, .main_pop .view .swiper-pagination-custom, .swiper-pagination-fraction {bottom:-22px !important;}
.main_pop .view .swiper-pagination-bullet {width:15px !important; height:5px !important; border-radius:1px !important; margin:0 3px !important; background:#ffffff60 !important;opacity: 1 !important; transition: .3s;}
.main_pop .view .swiper-pagination-bullet-active {width:30px !important; background:#a90f0f !important;}

.main_pop .view .swiper-button-prev, .main_pop .view .swiper-rtl .swiper-button-next {left:-50px; }
.main_pop .view .swiper-button-next, .main_pop .view .swiper-button-prev {color:#fff !important; font-size:24px !important; width:24px !important; height:24px !important; opacity: 0; transition: .3s;}
.main_pop .view .swiper-button-next:after, .main_pop .view .swiper-button-prev:after {font-size :24px !important; }
.main_pop .view .swiper-button-next, .main_pop .view .swiper-rtl .swiper-button-prev {right:-50px;}
.main_pop .view .swiper-button-next:before {content:''; position:absolute; width:45px; height:57px; border-radius:10px; background:#00000080; left:-12PX; top:-16px; z-index: -1;}
.main_pop .view .swiper-button-prev:before {content:''; position:absolute; width:45px; height:57px; border-radius:10px; background:#00000080; left:-9PX; top:-16px; z-index: -1;}

.main_pop .view:hover .swiper-button-next, .main_pop .view:hover .swiper-button-prev {opacity: 1;}

.main_pop .view .swiper-button-next:after {
    content: 'next' !important;
    font-family: swiper-icons !important;
}

.main_pop .view .swiper-button-prev:after {
    content: 'prev' !important;
    font-family: swiper-icons !important;
}


@media (max-width:767px) {
    .main_pop .view {width:100%; top:initial; bottom:0; left:0; transform:initial;}
    .main_pop .view .col{border-radius:0; right:12px;}

    .main_pop .view .swiper_pop .swiper-slide img {top:initial; bottom:0; transform: translate(-50%,0); width:100%; height:auto; max-height:initial}
    .main_pop .view {aspect-ratio:initial}
    .main_pop .view .swiper_pop {position: relative; height:auto; max-height:90vh; overflow-y: scroll}
    .main_pop .view .swiper_pop .swiper-slide {height:auto;}
    .main_pop .view .swiper_pop .swiper-slide img {position: relative; left:0; top:0; transform: initial; width:100%; height:auto;}
}