@charset "utf-8";
.section { position: relative; }
@media (max-width: 1024px){
    .section { height: auto!important; }
}
.banner { position: relative; width: 100%; height:100vh; overflow: hidden; }
.banner .swiper-container { position: relative; width: 100%; height:100vh; }
.banner .swiper-container .swiper-slide,
.banner .swiper-container .swiper-slide a { display: block; width: 100%; height: 100%; }
.banner .swiper-container .swiper-slide .swiper-slide-img { position: relative; width: 100%; height: 100%; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; transform: scale3d(1, 1, 1); transition: all 5s cubic-bezier(0.04, 0.79, 1, 1); }
.banner .swiper-container .swiper-slide-active .swiper-slide-img { }
.banner .swiper-container .swiper-pagination { position:absolute;bottom: 12%;left:0;height:13px;width: 100%;text-align: center;z-index: 999;}
.banner .swiper-container .swiper-pagination .swiper-pagination-bullet { background: #fff; margin: 0 10px; color:#fff; border-radius: 24px; position:relative; transition:all 0.3s; display:inline-block; width:13px; height:13px; font-size:0; line-height:13px; vertical-align: top; }
.banner .swiper-container .swiper-pagination .swiper-pagination-bullet-active { width: 33px; }
.banner .swiper-button-prev,
.banner .swiper-button-next { position: absolute; display: block; width: 43px; height: 43px; top: 50%; transform: translateY(-50%); z-index: 9; }
.banner .swiper-button-prev { left: 3%; background: url(../images/pv2.png) no-repeat;}
.banner .swiper-button-next {right: 3%;background: url(../images/nv2.png) no-repeat;}

.banner-down { position: absolute; bottom: 2%; left: 50%; width: 25px; height: 68px; background: url(../images/part-arrow.png) no-repeat; transform: translateX(-50%); z-index: 4; cursor: pointer; transition: all 0.3s; animation:scrollDown 2s linear 0.5s infinite both  }
@keyframes scrollDown{
    0%{opacity:0.9; bottom: 2%;}
    30%{opacity:1; bottom: 4%;}
    100%{opacity:0.9; bottom: 2%;}
}

@media (max-width: 1680px){
    .banner,
    .banner .swiper-container { height: 100vh!important; }
    .banner .swiper-container .swiper-pagination { bottom: 50px; }
    .banner .swiper-container .swiper-pagination .swiper-pagination-bullet { margin: 0 5px; width:8px; height:8px; line-height:8px; }
    .banner .swiper-container .swiper-pagination .swiper-pagination-bullet-active { width: 18px; }
}
@media (max-width: 1280px){
    .banner,
    .banner .swiper-container { height:calc( ( 1280/1920 ) * 100vh ); }
    .banner .swiper-container .swiper-pagination { bottom: 50px; }
}
@media (max-width: 992px){
    .banner { margin-top: 55px; }
    .banner,
    .banner .swiper-container { height:32vh!important; }
    .banner .swiper-container .swiper-pagination { bottom: 10px; }
    .banner-down,
    .banner .swiper-container .swiper-button-prev,
    .banner .swiper-container .swiper-button-next { display: none; }
}



/* 关于洽洽 */
.section2 .g-in { position: relative; width: 100%; height: 100vh; display: flex; justify-content: space-between; align-items: center; }
.video-wp,
.about-wp {position: relative;width: 50vw;height: 100vh;}
.about-wp {background: url(../images/about.jpg) no-repeat center bottom;display: flex;align-items: center;justify-content: center;}
.about {/* position: absolute; *//* top: 50%; *//* left: 50%; */width: 70%;/* transform: translate(-50%,-50%); */text-align: center;}
.about .about-logo { margin-bottom: 18px; }
.about h2 { font-size: 30px; line-height: 40px; }
.about h3 { font-size: 36px; line-height: 36px; font-weight: bold; font-family: Arial; text-transform: uppercase; opacity: .1; }
.about .desc {margin-top: 40px;margin-bottom: 30px;line-height: 24px;}
.about .more { display: inline-block; width: 207px; border-radius: 58px; background-color: #ca141d; color: rgba(255,255,255,0.8); line-height: 58px; z-index: 1; }
.about .more a { display: block; color: rgba(255,255,255,0.8); }
.about .more a:hover { color: #fff; }
.about .more svg { display: inline-block; margin-left: 20px; margin-top: 22px; vertical-align: top; }
.video { position: relative; width: 100%; height: 74%; background: url(../images/video.jpg) no-repeat center; }
.kb-view { width: 100%; height: 26%; background-color: #ca141d; color: #fff; font-size: 18px; line-height: 38px; }
.kb-view ul { position: relative; top: 50%; display: flex; justify-content: space-around; transform: translateY(-50%); padding: 0 10%; }
.kb-view ul li i { display: block; width: 70px; height: 70px; margin: 0 auto; background-color: #fff; }
@media (max-width: 992px){
    .section2 .g-in { height: auto; flex-wrap: wrap; }
    .video-wp,
    .about-wp {position: relative;width: 100%;height: auto;}
    .about-wp {padding: 40px 0 50px;}
    .about {width: 84%;}
    .about .about-logo {margin-bottom: 18px;}
    .about h2 {font-size: 24px;line-height: 34px;}
    .about h3 {font-size: 28px;line-height: 30px;}
    .about .desc {margin-top: 10px;margin-bottom: 10px;line-height: 24px;}
    .about .more {display: inline-block;width: 130px;border-radius: 38px;background-color: #ca141d;color: rgba(255,255,255,0.8);line-height: 38px;z-index: 1;}
    .about .more a { display: block; color: rgba(255,255,255,0.8); }
    .about .more a:hover { color: #fff; }
    .about .more svg {display: inline-block;margin-left: 0px;margin-top: 11px;vertical-align: top;}
    .video {position: relative;width: 100%;height: 50vh;background: url(../images/video.jpg) no-repeat center / cover;}
    .kb-view {height: 15vh;font-size: 13px;line-height: 30px;}
    .kb-view ul {padding: 0 1%;}
    .kb-view ul li i {width: 38px;height: 38px;}
}
.layui-layer-content { overflow: hidden!important; background-color: #000; }

/* 洽洽质造 */
.section3 { position: relative; color: #fff; }
.section3::after { position: absolute; left: 0; right: 0; bottom: 0; height: 50vh; background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.6)); content: ''; }
.section3 .g-in { width: 1400px; height: 100vh; margin: 0 auto; }
.section3 .txt { position: absolute; left: 20px; bottom: 10vh; z-index: 1; }
.section3 .txt h4 { font-size: 30px; line-height: 50px; }
.section3 .txt h3 { margin-bottom: 12px; font-size: 36px; line-height: 54px; }
.section3 .txt .desc { padding: 20px 0; border-top: 1px dashed rgba(255,255,255,0.4); opacity: .7; line-height: 30px; }

@media (max-width: 1440px){
    .section3 .g-in {width: 100%;}
}
@media (max-width: 992px){
    .section3 .g-in {width: 100%;padding: 15px;}
    .section3 .txt {left: 0;bottom: 5vh;padding: 30px;}
    .section3 .txt h4 {font-size: 18px;line-height: 2;}
    .section3 .txt h3 {margin-bottom: 15px;font-size: 20px;line-height: 1.6;}
    .section3 .txt .desc {padding: 15px 0;line-height: 2;font-size: 14px;}
}

/* 洽洽产品 */
.section4 { position: relative; }
.section4 .g-in { width: 100%; height: 100vh; }
.section4 .swiper-container { width: 100%; height: 100vh; }
.section4 .item { width: 25%; height: 100vh; }
.section4 .item .pic { width: 100%; height: 77vh; }
.section4 .item .intro { display: flex; align-items: center; width: 100%; height: 23vh; padding: 0 0 0 10%; background: #eee url(../images/s4_2.png) no-repeat right bottom; }
.section4 .item:nth-child(2n) .intro { background-color: #e6e5e5; }
.section4 .item .intro h3 { font-size: 42px; line-height: 64px; }
.section4 .item .intro h4 { color: #cc0033; font-size: 18px; line-height: 36px; text-transform: uppercase; }
.section4 .item:hover .intro { background-color: #ca141d; }
.section4 .item:hover .intro h3 { color: #fff; }
.section4 .item:hover .intro h4 { color: #fff; }
@media (max-width: 992px){
    .section4 .g-in { width: 100%; height: auto; padding: 0; }
    .section4 .swiper-container { width: 100%; height: auto; }
    .section4 .item { width: 50%; height: auto; }
    .section4 .item .pic {width: 100%;height: 48vh;background-size: cover!important;}
    .section4 .item .intro {height: 14vh;background: #eee url(../images/s4_2.png) no-repeat right bottom / 50%;}
    .section4 .item:nth-child(2n) .intro { background-color: #e6e5e5; }
    .section4 .item .intro h3 {font-size: 26px;line-height: 1.6;}
    .section4 .item .intro h4 {font-size: 14px;line-height: 1.6;}
    .section4 .item:hover .intro { background-color: #ca141d; }
    .section4 .item:hover .intro h3 { color: #fff; }
    .section4 .item:hover .intro h4 { color: #fff; }
}

/* 新闻资讯 */
.section5 .g-in { width: 90%; height: 100vh; display: flex; justify-content: space-between; align-items: center; } 
.information .hd { position: relative; width: 28%; padding: 0 16px; }
.information .hd h3 { font-size: 36px; color: rgba(51, 51, 51,.2); font-weight: bold; line-height: 42px; text-transform: uppercase; }
.information .hd h2 { font-size: 30px; color: rgb(51, 51, 51); line-height: 42px;}
.information .hd ul li {font-size: 24px;line-height: 60px;}
.information .hd ul li.on {font-size: 34px;color: #ca141d;}
.information .hd ul li.on i {display: inline-block;width: 30px;height: 3px;margin: 0 0 0 10px;background-color: #ca141d;vertical-align: middle;}
.information .hd .np { position: relative; width: 140px; height: 54px; margin-top: 35px; }
.information .hd .np .swiper-button-prev,
.information .hd .np .swiper-button-next { width: 54px; height: 54px; top: 0; right: 0; margin-top: 0; background: url(../images/s5nx.png) no-repeat; }
.information .hd .np .swiper-button-prev { left: 0; background: url(../images/s5pv.png) no-repeat; }
.information .bd { width: 72%; border-left: 1px solid #edeff0; }
.information .swiper-slide { width: 33.333%; padding: 15% 0; border-right: 1px solid #edeff0; }
.information .swiper-slide .content { width: 300px; margin: 0 auto; }
.information .swiper-slide .time { border-bottom: 1px solid #e5e5e5; color: #cc0033; font-family: arial; font-size: 36px; line-height: 66px; }
.information .swiper-slide .time span { display: inline-block; color: rgba(102, 102, 102,0.8); margin-top: 14px; margin-left: 10px; font-size: 14px; line-height: 52px; vertical-align: top; }
.information .swiper-slide h4 { margin-top: 5px; margin-bottom: 0; font-size: 18px; line-height: 44px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.information .swiper-slide .desc { height: 48px; margin-bottom: 42px; color: rgba(51, 51, 51,0.6); font-size: 14px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.information .swiper-slide .pic { overflow: hidden; }
.information .swiper-slide .pic img { width: 100%; height: auto; }

@media (max-width: 1680px){
    .section5 .g-in { width: 100%; } 
    .information .swiper-slide {width: 33.333%; padding: 5%;}
    .information .swiper-slide .content { width: 100%; }
}

@media (max-width: 992px){
    .section5 .g-in { width: 100%; height: auto; padding: 15px; flex-wrap: wrap; } 
    .information .hd {width: 100%;padding: 15px 15px 25px;}
    .information .hd h3 {font-size: 24px;line-height: 1.6;}
    .information .hd h2 {font-size: 24px;line-height: 1.6;}
    .information .hd ul { margin-bottom: 10px; text-align: center; }
    .information .hd ul li { display: inline-block; margin: 0 8px; font-size: 18px;line-height: 1.6;}
    .information .hd ul li.on {font-size: 24px; }
    .information .hd ul li.on i {display: none;width: 30px;height: 3px;margin: 0 0 0 10px;background-color: #ca141d;vertical-align: middle;}
    .information .hd .np { width: 84px;height: 34px;margin: 0 auto;}
    .information .hd .np .swiper-button-prev,
    .information .hd .np .swiper-button-next {width: 34px;height: 34px;background: url(../images/s5nx.png) no-repeat center / cover;}
    .information .hd .np .swiper-button-prev { background: url(../images/s5pv.png) no-repeat center / cover;}
    .information .bd { width: 100%; border-left: 0; border-top: 1px solid #edeff0; }
    .information .swiper-slide {width: 33.333%;padding: 5% 0;}
    .information .swiper-slide .content {width: 100%;padding: 0 8px;}
    .information .swiper-slide .time {font-size: 26px;line-height: 44px;}
    .information .swiper-slide .time span {margin-top: 6px;margin-left: 6px;font-size: 14px;line-height: 36px; }
    .information .swiper-slide h4 {font-size: 15px;line-height: 2.2;}
    .information .swiper-slide .desc {height: 40px;margin-bottom: 12px;line-height: 20px;}
}

.col-title .hd { position: relative; }
.col-title .hd h2 { position: relative; color: #fff; font-size: 33px; line-height: 48px; z-index: 1; }

@media (max-width: 992px){
    .col-title .hd h2 { font-size: 20px; line-height: 40px; }
}

/* 联系我们 */
.section6 .g-in { width: 100%; height: 100vh; padding: 0; display: flex; justify-content: space-between; align-items: center; }
.contact-wp,
.msg-wp { position: relative; width: 50vw; height: 100vh; color: #fff; }

.contact-wp { /*background: url(../images/s6_1.jpg) center center / cover;*/ }
.contact-1 { position: absolute; top: 50%; left: 10%; transform: translateY(-50%); }
.contact-1 .hd { margin-bottom: 60px; }
.contact-1 .bd { margin-bottom: 34px; font-size: 16px; line-height: 60px; }
.contact-1 .ft li {float: left; margin-right: 40px; color: #000; font-size: 16px; text-align: center; }
.contact-1 .ft li span { display: block; margin-top: 14px; line-height: 38px; }

.msg-1 { position: relative; width: 100%; height: 60vh; /*background: url(../images/s6_3.jpg) center center / cover;*/ }
.msg-1-1 { position: absolute; top: 50%; left: 8%; right: 8%; transform: translateY(-40%); }
.msg-1-1 .hd { margin-bottom: 40px; }

.contact-form { display: block; width: 100%; }
.contact-form .field { position: relative; float: left; width: 48%; height: 52px; margin-bottom: 30px; }
.contact-form .field:nth-child(2n) { float: right; }
.contact-form .field input[type=text] { width: 100%; height: 52px; padding: 0 20px; border: none; border-bottom:1px solid rgba(255, 255, 255, 0.6); background: none; color: #fff; font-size: 16px; }
.contact-form .field-full { float: none; width: 100%; height: auto; margin-right: 0; clear: both; }
.contact-form .field-full textarea { display: block; width: 100%; height: 64px; padding: 0 20px; resize: none; border: 0; border-bottom:1px solid rgba(255, 255, 255, 0.6); background: none; color: #fff; font-size: 16px; }
.contact-form .field-full input[type=submit] { display: block; width: 171px; height: 52px; padding: 0 54px; cursor: pointer; line-height: 52px; border: 0; background: url(../images/s6_4.png) no-repeat center / cover; font-size: 16px; color: #fff; text-align: left; }
.contact-form .field-full:last-child { margin-bottom: 0; }


.contact-form input::-webkit-input-placeholder,
.contact-form textarea::-webkit-input-placeholder {
color: #fff;
}
.contact-form input::-moz-input-placeholder,
.contact-form textarea::-moz-input-placeholder {
color: #fff;
}
.contact-form input::-ms-input-placeholder,
.contact-form textarea::-ms-input-placeholder {
color: #fff;
}


.msg-2 { position: relative; width: 100%; height: 40vh; /*background: url(../images/s6_2.jpg) center center / cover;*/ }
.msg-2-1 { position: absolute; top: 50%; left: 8%; right: 8%; transform: translateY(-50%); }
.msg-2-1 .hd { margin-bottom: 15px; }
.msg-2-1 .bd .desc { margin-bottom: 15px; font-size: 18px; line-height: 30px; }
.msg-2-1 .bd .more { line-height: 30px; }

@media (max-width: 992px){
    .section6 .g-in { width: 100%; height: auto; padding: 15px; flex-wrap: wrap; }
    .contact-wp,
    .msg-wp { width: 100%; height: auto; }
    .contact-wp {height: auto;}
    .contact-1 {top: 0;left: 0;right: 0;transform: translateY(0);position: relative;padding: 30px;}
    .contact-1 .hd {margin-bottom: 10px;}
    .contact-1 .bd {margin-bottom: 14px;font-size: 14px;line-height: 30px;}
    .contact-1 .ft li {margin-right: 3%;font-size: 14px;width: 30%;}
    .contact-1 .ft li span {margin-top: 10px;line-height: 1.6;}

    .msg-1 { position: relative; width: 100%; height: auto;  }
    .msg-1-1 { top: 0;left: 0;right: 0;transform: translateY(0);position: relative;padding: 30px;}
    .msg-1-1 .hd { margin-bottom: 10px; }

    .contact-form { display: block; width: 100%; }
    .contact-form .field { width: 100%;height: 38px;margin-bottom: 15px;}
    .contact-form .field input[type=text] {height: 38px;padding: 0 10px;font-size: 14px;}
    .contact-form .field-full {height: 60px;margin-bottom: 30px;}
    .contact-form .field-full textarea {height: 60px;padding: 0 20px;font-size: 14px;}
    .contact-form .field-full input[type=submit] { width: 130px;height: 38px;padding: 0 0 0 41px;line-height: 38px; font-size: 14px; }

    .msg-2 {height: auto;}
    .msg-2-1 { top: 0;left: 0;right: 0;transform: translateY(0);position: relative;padding: 30px;}
    .msg-2-1 .hd { margin-bottom: 10px; }
    .msg-2-1 .bd .desc {margin-bottom: 15px;font-size: 14px;line-height: 1.6;text-align: justify;}

}

.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ellipsis-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ellipsis-3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

.section8 .g-in { width: 100%; display: flex; justify-content: space-between; align-items: center; }

.zhibo { position: relative; width: 50vw; height: 100vh; }
.zhibo .swiper-slide { height: 100vh; }
.zhibo .swiper-slide a { display: block; position: relative; width: 100%; height: 100%; }
.zhibo .swiper-slide .pic { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 24px; color: #fff; line-height: 65px; }
.zhibo .swiper-slide .pic i { display: block; margin: 0 auto 15px; line-height: 44px; color: #fff; font-size: 16px; text-align: center; }
.zhibo .swiper-slide .pic i img { display: block; width: 70px; height: 70px; margin: 0 auto; }
.zhibo .swiper-slide h4 { position: absolute; left: 0; bottom: 0; right: 0; padding: 0 155px; font-size: 24px; color: #fff; line-height: 100px; background-color: rgba(0,0,0,0.4); }
.zhibo .swiper-slide h4 span { float: right; font-size: 14px; }
.zhibo .swiper-button-prev,
.zhibo .swiper-button-next { width: 100px; height: 100px; top: auto; bottom: 0; right: 0; margin-top: 0; background: url(../images/s8_3.png) no-repeat #ca151e; }
.zhibo .swiper-button-prev { left: 0; background: url(../images/s8_2.png) no-repeat #ca151e; }

.qiaqia { position: relative; width: 50vw; height: 100vh; }
.qiaqia-wp { position: absolute; left: 5%; right: 5%; top: 50%; transform: translateY(-55%); z-index: 1; }
.qiaqia-wp .hd { text-align: center; }
.qiaqia-wp .hd h3 { display: inline-block; margin-bottom: 20px; padding-left: 54px; background: url(../images/s8_5.png) no-repeat; font-size: 40px; }
.qiaqia-wp .hd ul {}
.qiaqia-wp .hd ul li { display: inline-block; margin-right: 28px; padding: 0 23px; border-radius: 23px; font-size: 16px; line-height: 36px; cursor: pointer; }
.qiaqia-wp .hd ul li.on { background-color: #ca151e; color: #fff; }
.qiaqia-wp .bd { padding: 5% 0; }
.qiaqia-wp .bd ul li { height: 48px; font-size: 16px; line-height: 48px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.qiaqia-wp .bd ul li a { color: #666; transition: all .3s ease; }
.qiaqia-wp .bd ul li:hover  a { color: #ca151e; font-size: 24px; }
.qiaqia-wp .ft { font-size: 16px; text-align: center; }
.qiaqia-wp .ft a { text-decoration: underline; }


@media (max-width: 992px){
    .section8 .g-in { width: 100%; flex-wrap: wrap; }

    .zhibo {position: relative;width: 100vw;height: 60vh;}
    .zhibo .swiper-slide {height: 60vh;}
    .zhibo .swiper-slide a { display: block; position: relative; width: 100%; height: 100%; }
    .zhibo .swiper-slide .pic { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 24px; color: #fff; line-height: 65px; }
    .zhibo .swiper-slide .pic i { margin: 0 auto 10px; line-height: 44px; font-size: 14px; }
    .zhibo .swiper-slide .pic i img { width: 40px; height: 40px; }
    .zhibo .swiper-slide h4 {padding: 0 90px;font-size: 16px;line-height: 80px;}
    .zhibo .swiper-slide h4 span {font-size: 12px;}
    .zhibo .swiper-button-prev,
    .zhibo .swiper-button-next {width: 80px;height: 80px;top: auto;bottom: 0;right: 0;margin-top: 0;background: url(../images/s8_3.png) center no-repeat #ca151e;}
    .zhibo .swiper-button-prev {left: 0;background: url(../images/s8_2.png) center  no-repeat #ca151e;}
    
    .qiaqia {position: relative;width: 100vw;height: 70vh;}
    .qiaqia-wp {position: absolute;left: 5%;right: 5%;top: 50%;transform: translateY(-65%);z-index: 1;}
    .qiaqia-wp .hd {}
    .qiaqia-wp .hd h3 {margin-bottom: 17px;padding-left: 29px;background: url(../images/s8_5.png) no-repeat 0 0;font-size: 22px;background-size: contain;}
    .qiaqia-wp .hd ul {}
    .qiaqia-wp .hd ul li {margin-right: 5px;padding: 0 19px;border-radius: 23px;font-size: 14px;line-height: 32px;}
    .qiaqia-wp .hd ul li.on {}
    .qiaqia-wp .bd { padding: 5% 0; }
    .qiaqia-wp .bd ul li {height: 40px;font-size: 14px;line-height: 40px;}
    .qiaqia-wp .bd ul li a { color: #666; transition: all .3s ease; }
    .qiaqia-wp .bd ul li:hover  a {color: #ca151e;font-size: 20px;}
    .qiaqia-wp .ft { font-size: 16px; text-align: center; }
    .qiaqia-wp .ft a { text-decoration: underline; }
    

}