@charset "utf-8";
#banner .text{ position: absolute; bottom: 11.1%; left: 0; right: 0;}
#banner .text:before{ content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; background-color: rgba(0,0,0,.24);}
#banner .info{ width: 86.61%; padding: 35px; box-sizing: border-box; color: #fff;}
#banner .info h2{ position: relative; z-index: 10; font-size: 34px; font-weight: 900; letter-spacing: 3px;}
#banner .info p{ position: relative; z-index: 10; padding-top: 15px; font-size: 18px; line-height: 1.67;}
#banner .detail{ position: absolute; right: 0; top: 0; bottom: 0; width: 13.39%; color: #fff; background-color: rgba(193,161,141,.6); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s;}
#banner .detail:hover{ background-color: rgba(193,161,141,.9);}
#banner .detail span{ position: absolute; top: 50%; left: 0; width: 100%; padding: 0 10px 8px 3px; box-sizing: border-box; text-align: center; line-height: 1; -webkit-transform: translate3d(0,-50%,0); -moz-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); background: url("images/index/detail.png") no-repeat center bottom;}

.section .title{ position: relative; margin: 80px 0 60px; padding-top: 20px; font-size: 30px; text-align: center;}
.section .title a{ color: #bda08d;}
.section .title a:hover{ color: #ddccc1;}
.section .title:before{ content: ''; position: absolute; top: 0; left: 50%; width: 42px; height: 2px; margin-left: -21px; background-color: #bda08d;}

@media screen and (max-width: 1200px) {
    #banner .text,
    #banner .ctrl{ width: 90%;}
    #banner .info h2{ font-size: 30px;}
    #banner .info p{ font-size: 14px;}
    .section .title{ margin-bottom: 40px;}
}
@media screen and (max-width: 820px) {
    #banner{ height: 300px;}
    #banner ul li{ background: no-repeat center; background-size: cover;}
    #banner ul li img{ display: none;}
}
@media screen and (max-width: 640px) {
    #banner .info{ padding: 20px;}
    #banner .info h2{ font-size: 16px;}
    #banner .info p,
    #banner .detail{ font-size: 12px;}
    #banner .info h2,
    #banner .info p{ line-height: 1.2;}
    #banner .info p{ padding-top: 8px;}
    #banner .prev, #banner .next{ width: 18px; background-size: 100%;}
    #banner .swiper-pagination-bullet, #banner .swiper-pagination-switch{ width: 20px; height: 3px; margin: 0 2px;}
    #banner .detail span{ padding: 11%; line-height: 1.2; background-size: 80%;}
    .section .title{ margin-top: 60px; padding-top: 12px; font-size: 24px;}
}

/*热点资讯*/
#sec1{ padding-top: 60px; text-align: center; font-size: 0; letter-spacing: normal;}
#sec1 .item{ letter-spacing: 1px;}
#sec1 .item a{ display: block;}
#sec1 .item:nth-of-type(2){ margin: 0 20px;}
#sec1 .text-link,
#sec1 .image-link{ display: inline-block; vertical-align: top;}
#sec1 .text-link{ width: 340px; text-align: left;}
#sec1 .text-link h2{ font-size: 20px; border: 5px solid #f4f0ed; text-align: center;}
#sec1 .text-link h2 a{ line-height: 48px; color: #c1a18d;}
#sec1 .text-link h2 a:hover{ color: #ddccc1;}
#sec1 .text-link ul{ padding: 10px 0 17px; border-bottom: 5px solid #f4f0ed;}
#sec1 .text-link ul li{ position: relative; padding-left: 20px; line-height: 2.2; font-size: 16px; color: #505050;}
#sec1 .text-link ul li a{ color: #505050;}
#sec1 .text-link ul li a:hover{ color: #c1a18d;}
#sec1 .text-link ul li:before{ content: ''; position: absolute; top: 50%; left: 0; width: 5px; height: 5px; margin-top: -3px; border: 1px solid #c1a18d; border-radius: 100%;}
#sec1 .image-link{ position: relative; width: 400px; height: 300px; overflow: hidden;}
#sec1 .image-link img{ width: 100%; height: 100%; object-fit: cover;}
#sec1 .image-link:hover img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); transform: scale(1.1);}
#sec1 .image-link .text{ position: absolute; left: 0; bottom: 0; width: 100%; height: 225px; color: #fff;}
#sec1 .image-link .text:before{ content: ''; position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; background: url("images/index/shadow.png");}
#sec1 .image-link .text h2{ padding-top: 110px; font-size: 24px; font-weight: bold;}
#sec1 .image-link .text h3{ width: 80%; margin: 15px auto 0; font-size: 18px;}
#sec1 .image-link .text .date{ padding-top: 15px; font-size: 18px; font-weight: bold;}

@media screen and (max-width: 1200px){
    #sec1{ padding-top: 40px;}
    #sec1 .text-link,
    #sec1 .image-link{ margin: 20px auto 0;}
    #sec1 .text-link{ display: block; width: auto;}
    #sec1 .item:nth-of-type(2){ margin: 20px 20px 0 0;}
}
@media screen and (max-width: 820px){
    #sec1 .item:nth-of-type(2){ margin: 20px 0 0 0;}
    #sec1 .image-link{ display: block; width: auto; height: auto;}
    #sec1 .image-link img{ width: 100%;}
}
@media screen and (max-width: 640px){
    #sec1{ padding-top: 0;}
    #sec1 .text-link ul li{ font-size: 16px;}
    #sec1 .image-link .text h2{ padding-top: 130px; font-size: 22px;}
    #sec1 .image-link .text h3{ font-size: 14px;}
    #sec1 .image-link .text .date{ padding-top: 8px; font-size: 14px;}
}

/*区域聚焦*/
#sec2 .list{ padding-bottom: 30px;}
#sec2 .list li{ display: inline-block; width: 340px; height: 289px; margin: 30px 10px 0 ; border-bottom: 6px solid #f4f0ed; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s;}
#sec2 .list li a{ display: block;}
#sec2 .list li:hover{ border-color: #fff; box-shadow: 0 6px 15px 0 rgba(185, 159, 141, 0.3); -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); transform: translateY(-6px);}
#sec2 .list .image{ height: 145px; overflow: hidden;}
#sec2 .list .image img{ width: 100%; height: 100%; object-fit: cover;}
#sec2 .list .text{ padding: 30px; text-align: left;}
#sec2 .list h3{ font-size: 20px; color: #000;}
#sec2 .list h3:hover{ color: #c1a18d;}
#sec2 .list p{ height: 50px; padding-top: 15px; font-size: 16px; color: #505050; line-height: 1.5; letter-spacing: 1px; overflow: hidden;}
#sec2 .angle{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1;}
#sec2 .angle span{ position: absolute; width: 36px; height: 36px; border-top: 2px solid #b99f8d; border-left: 2px solid #b99f8d; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; transform-origin: 50% 50%;}
#sec2 .angle span:nth-of-type(2){ right: 0; top: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg);}
#sec2 .angle span:nth-of-type(3){ left: 0; bottom: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg);}
#sec2 .angle span:nth-of-type(4){ right: 0; bottom: 0; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg);}

@media screen and (max-width: 1200px){
    #sec2 .list li:hover{ border-color: #f4f0ed; box-shadow: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0);}
}
@media screen and (max-width: 820px){
    #sec2 .angle{ display: none;}
    #sec2 .list li{ display: block; width: auto; height: auto; margin: 30px 0 0;}
    #sec2 .list .image{ height: auto;}
    #sec2 .list .image img{ width: 100%;}
    #sec2 .list p{ height: auto;}
}
@media screen and (max-width: 640px){
    #sec2 .list li{ width: auto; height: auto; margin: 0 0 20px 0;}
    #sec2 .list li .image{ height: auto;}
    #sec2 .list li img{ width: 100%;}
    #sec2 .list .text{ padding: 20px;}
}

/*市场前瞻*/
#sec3 .image{ width: 635px; height: 430px; margin-right: 15px; overflow: hidden;}
#sec3 .text{ width: 500px;}
#sec3 .text .item{ margin-bottom: 30px;}
#sec3 .text h3 .icon{ width: 40px; height: 40px; margin-right: 20px; text-align: center; line-height: 40px;}
#sec3 .text h3 img{ max-width: 40px; max-height: 40px; vertical-align: middle;}
#sec3 .text h3 a{ display: block; font-size: 20px; color: #000; line-height: 40px; overflow: hidden;}
#sec3 .text h3 a:hover{ color: #c1a18d;}
#sec3 .text p{ height: 70px; padding-top: 15px; font-size: 16px; color: #505050; line-height: 1.5; overflow: hidden;}
#sec3 .text .more{ margin-top: 15px;}

@media screen and (max-width: 1200px) {
    #sec3 .image,
    #sec3 .text{ float: none; width: auto;}
    #sec3 .image{ margin: 0 0 20px 0; text-align: center;}
    #sec3 .text p{ height: auto;}
}
@media screen and (max-width: 820px) {
    #sec3 .image{ height: auto;}
    #sec3 .image img{ width: 100%;}
}

/*行业趋势*/
#sec4{ margin-top: 40px; font-size: 0; letter-spacing: normal; text-align: center;}
#sec4 ul li{ display: inline-block; position: relative; width: 280px; height: 285px; margin: 20px 20px 0 0;  box-sizing: border-box; border: 1px solid #bda08d; letter-spacing: 1px;}
#sec4 ul li:before{ content: ''; position: absolute; top: -1px; left: 50%; width: 104px; height: 2px; margin-left: -52px; box-sizing: border-box; border-left: 36px solid #fff; border-right: 36px solid #fff; background-color: #bda08d;}
#sec4 ul li a{ display: block; height: 100%; padding: 0 10%;}
#sec4 ul li:hover{ background-color: #fefaf7;}
#sec4 ul li:hover:before{ border-color: #fefaf7;}
#sec4 ul li:last-of-type{ margin-right: 0;}
#sec4 .icon{ display: inline-block; width: 60px; height: 45px; margin-top: 25px; line-height: 45px;}
#sec4 .icon img{ max-width: 60px; max-height: 45px; vertical-align: middle;}
#sec4 h3{ margin-top: 25px; font-size: 20px; color: #000;}
#sec4 p{ height: 48px; margin: 25px auto 0; font-size: 16px; color: #505050; text-align: left; overflow: hidden;}
#sec4 .more{ margin-top: 35px; color: #4ecde3;}

@media screen and (max-width: 1200px) {
    #sec4 ul li:nth-of-type(2){ margin-right: 0;}
}
@media screen and (max-width: 640px) {
    #sec4 ul li{ display: block; width: auto; margin-right: 0;}
}

/*关于我们*/
#sec6 .title{ margin-top: 35px;}
#sec6 .content{ padding-bottom: 100px; border-bottom: 1px solid #f4f0ed; text-align: center; font-size: 0; letter-spacing: normal;}
#sec6 .content li{ position: relative; display: inline-block; width: 32%; margin-top: 20px; overflow: hidden; letter-spacing: 1px;}
#sec6 .content li img{ width: 100%;}
#sec6 .content li:hover{ box-shadow: 0 4px 20px 0 rgba(185, 159, 141, 0.5); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); z-index: 100;}
#sec6 .content li a{ display: block;}
#sec6 .content li:nth-of-type(2){ margin: 0 1.5%;}
#sec6 .content li p{ position: absolute; left: 0; bottom: 0; width: 100%; box-sizing: border-box; padding-left: 20px; color: #fff; font-size: 18px; line-height: 35px; text-align: left; background-color: rgba(51,47,44,.3);}

@media screen and (max-width: 1200px) {
    #sec6 .content{ padding-bottom: 60px;}
    #sec6 .content li:hover{ -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1);}
}
@media screen and (max-width: 820px) {
    #sec6 .content li:nth-of-type(2){ margin: 20px 0 0 0;}
    #sec6 .content li{ display: block; width: auto; height: auto;}
    #sec6 .content li img{ width: 100%;}
    #sec6 .content li p{ font-size: 24px; line-height: 64px;}
}
@media screen and (max-width: 640px) {
    #sec6 .content li p{ font-size: 16px; line-height: 35px;}
}

/*邮件留言*/
#send-email{ position: relative; text-align: center; background: no-repeat center; background-size: cover;}
#send-email .bg{ width: 100%;}
#send-email .text{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%;}
#send-email .text h2{ position: absolute; top: 11.6%; left: 0; width: 100%; font-size: 28px; color: #00bcd5;}
#send-email .text .mail{ display: inline-block; position: absolute; top: 25.15%; left: 0; right: 0; width: 180px; height: 40px; margin: 0 auto; border-radius: 23px; box-sizing: border-box; line-height: 36px; font-size: 18px; color: #fff; background-color: #c1a18d;}
#send-email .text .mail:hover{ background-color: #ddccc1;}
#send-email .text .mail:active{ background-color: #c7a793;}
#send-email .text .mail img,
#send-email .text .mail span{ vertical-align: middle;}
#send-email .text .mail img{ width: 26px; margin-right: 12px;}

@media screen and (max-width: 1200px) {
    #send-email{ height: 356px;}
    #send-email .bg{ display: none;}
    #send-email .text h2{ font-size: 24px;}
    #send-email .text .mail{ width: 170px; height: 40px; line-height: 38px; font-size: 16px;}
}
@media screen and (max-width: 640px) {
    #send-email .text h2{ font-size: 16px;}
    #send-email .text .mail img{ width: 18px; margin-right: 8px;}
    #send-email .text .mail{ width: 130px; height: 32px; line-height: 30px; font-size: 14px;}
}

/*专题*/
#subject{ margin-top: 60px; font-size: 0;}
#subject .item{ display: inline-block; vertical-align: middle;}
#subject .header{ width: 340px; height: 290px; margin-right: 18px; line-height: 1; text-align: center; background: url("images/index/subject_bg.png") no-repeat center; background-size: 100%;}
#subject .header h2{ margin-top: 75px; font-size: 33px; color: #333333;}

#subject .header h3{ margin-top: 14px; font-size: 18px; color: rgba(51, 51, 51, .4); letter-spacing: 8px;}
#subject .header .more{ display: block; width: 260px; height: 50px; margin: 63px auto 0; padding-left: 79px; box-sizing: border-box; font-size: 18px; color: #fff; text-align: left; line-height: 50px; background-color: #BDA08D;}

#subject .header .more span{ vertical-align: middle;}
#subject .header .more::after{ content: ''; display: inline-block; width: 41px; height: 17px; margin-left: 14px; vertical-align: middle; background: url("images/index/more_subject.png") no-repeat center; background-size: 100%;}
#subject .image-link{ width: 400px; height: 292px; margin-right: 19px; box-sizing: border-box; border-bottom: 6px solid rgba(185, 159, 141, 0.16);}
#subject .image-link:last-of-type{ margin-right: 0;}
#subject .image-link img{ width: 100%; height: 220px; object-fit: cover;}
#subject .image-link .text{ padding-left: 9px; line-height: 65px; font-size: 20px;}

@media screen and (max-width: 640px) {
    #subject .image-link{ width: 100%; margin: 20px 0 0;}
}