@charset "utf-8";
body{ background: #f5f3ed;}

.banner{ background: url(../images/cell_bg.png); padding-left: 70px; position: relative;}
/* .slick li{ position: relative;} */
.slick a{ position: relative;}
.slick a::after{ content: ''; display: block; width: 100%; height: 280px; background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(255,255,255.0.7));
    position: absolute; bottom: 0px; left: 0px;}
.slick .gp-img-responsive{ padding-bottom: 35.24%;}
.slick .title{ font-weight: bold; color: #fff; position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); margin-left: -35px;}
.slick-arrow{ display: flex; display: -webkit-flex; margin-left: -100px;}
.addDots{ position: absolute; bottom: 129px; right: 50%; transform: translateX(50%);}
.addDots .slick-dots{ display: flex; display: -ms-flexbox; justify-content: end;}
.addDots li{ padding: 10px 0; margin-right: 20px; box-sizing: border-box; font-size: 0;}
.addDots button{ width: 20px; height: 2px; font-size: 0px; border: none; outline: none; background: #fff; opacity: 0.5; transition: 0.3s ease;}
.addDots li.slick-active button{ opacity: 1;}
.addDots li:last-child{ margin-right: 0;}
.arrow{ position: absolute; top: 189px; left: 18px;}
.prevArrow, .nextArrow{ width: 34px; height: 54px; background: #fff url(../images/prev_icon.png) no-repeat center;  margin-left: 0px;}
.nextArrow{ margin-top: 10px; background: #fff url(../images/next_icon.png) no-repeat center;}
.mouse{ width: 16px; height: 29px; background: url(../images/mouse_icon.png) no-repeat center/cover; animation: mouse 1.5s ease infinite;
    position: absolute; left: 27px; bottom: 100px;}
@-webkit-keyframes mouse {
    0%{ transform: translateY(-10px); opacity: 0;}
    50%{ opacity: 1;}
    90%{ opacity: 1;}
    100%{ transform: translateY(10px); opacity: 0;}
}
@-moz-keyframes mouse {
    0%{ transform: translateY(-10px);}
    50%{ opacity: 1;}
    90%{ opacity: 1;}
    100%{ transform: translateY(10px);}
}
@-o-keyframes mouse {
    0%{ transform: translateY(-10px);}
    50%{ opacity: 1;}
    90%{ opacity: 1;}
    100%{ transform: translateY(10px);}
}
@-ms-keyframes mouse {
    0%{ transform: translateY(-10px);}
    50%{ opacity: 1;}
    90%{ opacity: 1;}
    100%{ transform: translateY(10px);}
}

.modeTitle{ align-items: baseline; line-height: 1; padding-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,0.06);}
.modeTitle .CN{ font-family: '楷体'; }
.modeTitle .EN{ color: #a13e36;}
.modeTitle .more{ color: #999999; display: block;}
/* row1 */
.row1{ background: url(../images/row1_bg.png) no-repeat bottom center; background-size: 100% auto; position: relative;}
/* .row1::before{ content: ''; display: block;} */
.mode1{ transform: translateY(-40px); background-color: #fff; padding: 40px 40px 60px; box-sizing: border-box;}
.mode1 .modeCon{ margin-top: 20px;}
.mode1 .modeLf{ width: 65.5%; float: left; overflow: hidden;}
.mode1 .modeLf ul{ margin-left: -20px; margin-right: -20px;}
.mode1 .modeLf li{ float: left; width: 50%;}
.mode1 .modeLf a{ display: block; margin: 0 20px; transition: all 0.35s ease;}
.mode1 .modeLf a:hover{ transform: translateY(-8px);}
.mode1 .modeLf .gp-img-responsive{ padding-bottom: 66.828%;}
.modeLf .box{ padding: 28px 29px 50px; border: 1px solid rgba(0,0,0,0.08); border-top: none;}
.mode1 .title{ font-family: '楷体'; line-height: 1.2;}
.mode1 .summary{ line-height: 1.667; margin-top: 24px; color: #999;}
.mode1 .date{ margin-top: 26px; padding-left: 37px; color: #a13e36; font-size: 12px; line-height: 1; position: relative;}
.mode1 .date::before{ content: ''; display: block; width: 25px; height: 13px; background: url(../images/date_before.png) no-repeat center/cover;
    position: absolute; left: 0px; top: 50%; transform: translateY(-50%);}
.mode1 .modeRt{ width: 31.467%; float: right;}
.mode1 .modeRt li{ margin-bottom: 17px;}
.mode1 .modeRt li:last-child{ margin-bottom: 0px;}
.mode1 .modeRt a{ display: block; padding: 20px 29px; border: 1px solid rgba(0,0,0,0.08); box-sizing: border-box; transition: all 0.35s ease;}
.mode1 .modeRt a:hover{ transform: translateX(8px);}
.mode1 .modeRt .date{ margin-top: 11px;}

/* mode2 */
.mode2{ padding-bottom: 68px;}
.mode2 .modeTitle{ padding-bottom: 25px; border-bottom: none;}
.mode2 .text{ width: 61.14%; float: left; font-family: '楷体'; padding: 20px 0 0 30px; box-sizing: border-box; color: #333; position: relative;}
.mode2 .text::before{ content: ''; display: block; width: 1px; height: 100px; background-color: #a13e36;
    position: absolute; top: 20px; left: 0px;}
.mode2 .text p{ -webkit-line-clamp: 5; line-height: 1.889; height: 9.44em; overflow: hidden; text-align: justify;}
.mode2 .img{ float: right; width: 444px;}
.mode2 .gp-img-responsive{ padding-bottom: 56.31%;}


/* row2 */
.row2{ background: #fff; padding: 60px 0 70px;}
.mode3{ position: relative; z-index: 1;}
.mode3 .tab{ position: relative;}
.tab .tilList{ justify-content: start; align-items: end; border-bottom: 1px solid rgba(0, 0, 0, 0.06); position: relative;}
.tab .tilList .til_tab{ border-bottom: 1px solid rgba(0,0,0,0.2); padding-bottom: 19px; margin-right: 72px; color: #757575; font-size: 20px; font-family: '楷体';
    display: flex; display: -ms-flexbox; float: left; align-items: end;
    transition: border-bottom 0.35s ease; position: relative; }
.tab .tilList .til_tab:last-child{ margin-right: 0;}
.tab .tilList .til_tab.on{  border-bottom: 1px solid rgba(0,0,0,0);}
.tab .tilList .til_tab.on{ color: #222; font-size: 30px; padding-bottom: 18px;}
.tab .tilList .til_tab.on .CN{ flex-shrink: 0;}
.tab .tilList .til_tab .CN::after{ content: ''; display: block; width: 0%; height: 2px; background: #a13e36;
    position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); transition: width 0.35s ease;}
.tab .tilList .til_tab.on .CN::after{ width: 100%;}
.tab .tilList .til_tab .CN::before{ content: ''; display: block; width: 1px; height: 27px; background: rgba(0,0,0,0.1);
    position: absolute; right: -36px; bottom: 20px;}
.tab .tilList .til_tab:last-child .CN::before{ display: none;}
.tab .tilList .til_tab .EN{ font-size: 14px; color: #a13e36; margin-left: 0px; width: 0%; overflow: hidden; position: absolute;}
.tab .tilList .til_tab.on .EN{ width: 100%; margin-left: 9px; position: relative;}
.tab .moreList{ position: absolute; right: 0px; top: 0px;}
.tab .more_tab{ display: none; color: #999999; padding: 20px 0; line-height: 1;}
.tab .more_tab.on{ display: block;}
.tab .boxList{ margin-top: 20px;} 
.tab .tabListBox{ display: none;}
.tab .tabListBox.on{ display: block;}

.mode3 .boxList{ min-height: 405px;} 
.mode3 .tabListBox{ margin-left: -10px; margin-right: -10px; line-height: 1; font-family: '楷体';}
.mode3 .tabListBox li{ width: 20%; float: left;}
.mode3 .tabListBox a{ display: block; margin: 0 10px; padding: 0 0 20px 40px; border: 1px solid rgba(0,0,0,0.1); transition: all 0.35s ease;}
.mode3 .tabListBox a:hover{ transform: translateY(-8px);}
.mode3 .tab .img{ margin-right: -1px; border: 1px solid rgba(0,0,0,0.1);}
.mode3 .tab .gp-img-responsive{ padding-bottom: 140%;}
.mode3 .infoBox{ padding-top: 20px;}
.mode3 .name{ position: relative;}
.mode3 .name::before{ content: ''; display: block; width: 4px; height: 4px; background: #a13e36; 
    position: absolute; left: -20px; top: 50%; transform: translateY(-505);}
.mode3 .post{ color: #757575; margin-top: 12px;}

/* row3 mode4 */
.row3{ padding: 60px 0 80px; background: url(../images/bowl.png) no-repeat left center/cover; position: relative;}
.row3::after{ content: ''; display: block; width: 997px; height: 1073px; background: url(../images/grass_medicine.png) no-repeat right center;
    position: absolute; right: 0px; bottom: 177px; z-index: 0;}
.mode4{ position: relative; z-index: 1;}
.mode4 .boxList{ min-height: 408px;}
.mode4 .tabListBox{ margin-left: -15px; margin-right: -15px; line-height: 1;}
.mode4 .tabListBox li{ width: 25%; float: left;}
.mode4 .tabListBox a{ display: block; margin: 0 15px; transition: all 0.35s ease;}
.mode4 .tabListBox a:hover{ transform: translateY(-8px);}
.mode4 .tab .img{ margin-right: -1px; border: 1px solid rgba(0,0,0,0.1);}
.mode4 .tab .gp-img-responsive{ padding-bottom: 66.97%;}
.mode4 .infoBox{ padding: 30px 30px 50px; background: #fff; position: relative;}
.mode4 .title{ line-height: 1.2; height: 2.4em; font-family: '楷体';}
.mode4 .summary{ color: #999999; margin-top: 20px; line-height: 1.667;}
.mode4 .date{ width: 67px; height: 72px; color: #fff; text-align: center; background: url(../images/date_bg.png) no-repeat top center/cover; box-sizing: border-box;
    position: absolute; left: 29px; top: -60px;}
.mode4 .date .day{ margin-top: 23px; line-height: 1;}
.mode4 .date .month{ margin-top: 7px; line-height: 1;}

/* row4 */
.row4{ background: #fff; padding: 70px 0 100px;}
.mode5 .modeTitle{ padding-bottom: 27px; border-bottom: none;}
.link{ margin-left: -30px; margin-right: -30px;}
.link li{ width: 25%; float: left;}
.link a{ display: block; margin: 0 30px; position: relative; transition: all 0.35s ease;}
.link a:hover{ transform: translateY(-8px);}
.link .gp-img-responsive{ padding-bottom: 56.23%;}
.linkName{ width: 100%; max-height: 78px; box-sizing: border-box; background: #fff; padding: 26px 10px 24px 36px; font-family: '楷体';
    position: absolute; left: 30px; top: 20px; box-shadow: 20px 0px 50px 7.5px rgba(0, 0, 0, 0.06);
    display: flex; display: -ms-flexbox; align-items: center;}
.linkName::before{ content: ''; display: block; width: 10px; height: 64px; background: #a13e36;
    position: absolute; left: 6px; top: 50%; transform: translateY(-50%);}
.linkName span{ display: block; max-height: 2.2em; overflow: hidden; }

.summary, .title{ text-align: justify;}

/* Hack */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .tab .tilList{ display: block;}
    .tab .tilList .til_tab{ display: inline-block; float: none;}
    .mode2 .text p{ display: block;}
}




/* 响应式样式 */
@media screen and (max-width:1540px){
    .slick .title{ margin-left: 0px;}
}

@media screen and (max-width:1480px) {
    .banner{ padding-left: 50px;}
    .arrow{ left: 5px;}
    .slick .title{ margin-left: -25px;}
    .mouse{ left: 15px;}
    .mode1 .modeLf ul{ margin-left: -10px; margin-right: -10px;}
    .mode1 .modeLf a{ margin: 0 10px;}
    .mode1 .modeRt a{ padding: 15px 20px;}
    .mode2 .text{ width: calc(100% - 460px);}
    .mode3 .tabListBox a{ padding: 0 0 20px 20px;}
    .mode3 .post{ max-height: 1em; overflow: hidden;}
    .mode3 .name::before{ left: -10px;}
    .mode1{ padding: 30px;}
    .mode2{ padding-bottom: 40px;}
    .row2, .row3, .row4{ padding: 40px 0;}
    .mode4 .tabListBox{ margin-left: -10px; margin-right: -10px;}
    .mode4 .tabListBox a{ margin: 0 10px;}
    .mode4 .boxList{ min-height: 380px;}
    .mode2 .text p{ -webkit-line-clamp: 6; height: 11.334em;}

}

@media screen and (max-width:1400px) {
    .row3::after{ width: 557px; height: 600px;}
    .mode1 .modeRt li{ margin-bottom: 10px;}
    .mode4 .infoBox{ padding: 20px 30px 25px;}
    .mode4 .boxList{ min-height: 340px;}
}

@media screen and (max-width:1300px) {
    .slick .title{ margin-left: 0px;}
}
@media screen and (max-width:1280px) {
    .mouse{ display: none;}
    .banner{ padding-left: 0;}
    .arrow{ left: auto; right: 20px;}
    .modeLf .box{ padding: 20px 20px 25px;}
    .mode1{ transform: translateY(0); margin-top: 20px;}
    .addDots{ bottom: 40px;}
    .slick .title{ bottom: 50px;}
    .mode2{ margin-top: 20px;}
}

@media screen and (max-width:1080px) {
    .banner .gp-container{ margin: 0; width: 100%;}
}

@media screen and (max-width:1100px) {
    .mode1 .modeLf{ width: 100%;}
    .mode1 .modeRt{ width: 100%; margin-top: 20px}
    .mode1 .modeRt li{ width: 50%; float: left;}
    .mode1 .modeRt li:nth-of-type(odd) a{ margin-right: 10px;}
    .mode1 .modeRt li:nth-of-type(even) a{ margin-left: 10px;}
    .mode1 .title{ height: 2.4em;}
    .tab .boxList{ min-height: unset;}
    .mode3 .tabListBox, .mode4 .tabListBox{ margin-left: -6px; margin-right: -6px;}
    .mode3 .tabListBox a, .mode4 .tabListBox a{ margin: 0 6px;}
    .row2, .row3, .row4{ padding: 30px 0;}
}
@media screen and (max-width:1024px) {
    .gp-container{ padding-left: 20px; padding-right: 20px;}
    .mode2 .text{ width: 100%;}
    .mode2 .img{ width: 100%; margin-top: 10px;}
    .mode2, .mode3, .mode4, .mode5{ padding: 0;}
    .mode3 .tabListBox li{ width: 33%; margin-bottom: 15px;}
    .mode4 .tabListBox li{ width: 50%; margin-bottom: 10px;}
    .link li{ width: 33.3%; margin-bottom: 10px;}
    .linkName{ top: 20%;}
    .arrow{ top: 50%; transform: translateY(-25%);}
    .mode2 .modeTitle{ padding-bottom: 0; padding-top: 20px;}
}

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

@media screen and (max-width:767px) {
    .slick a::after{ height: 80px;}
    .slick .title{ left: 0; transform: translateX(0); font-size: 24px;}
    .link li{ width: 50%;}
}

@media screen and (max-width:680px) {
    .arrow,
    .addDots{ display: none;}
    .addDots{ bottom: 10px;}
    .slick .title{ bottom: 20px; width: 75%; font-size: 24px;}
    .mode1{ padding: 20px;}
    .tab .tilList{ padding-right: 50px; flex-wrap: wrap;}
    .tab .tilList .til_tab{ padding-bottom: 10px; margin-bottom: 5px;}
    .tab .tilList .til_tab.on{ padding-bottom: 9px; margin-bottom: 5px;}
}

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

}

@media screen and (max-width:479px) {
    .gp-container{ margin-left: 15px; margin-right: 15px;}
    .mode2 .text{ padding: 0 0 0 20px;}
    .mode2 .text::before{ top: 0px;}
    .modeLf .box{ padding: 15px 10px;}
    .mode1 .summary, .mode1 .date{ margin-top: 10px;}
    .mode1 .modeLf li,
    .mode1 .modeRt li{ width: 100%; margin-bottom: 10px;}
    .mode1 .modeRt{ margin-top: 10px;}
    .mode1 .modeRt li:nth-of-type(even) a,
    .mode1 .modeRt li:nth-of-type(odd) a{ margin: 0;}
    .mode3 .tabListBox li{ width: 50%;}
    .tab .tilList .til_tab{ margin-right: 30px; margin-bottom: 10px;}
    .tab .tilList .til_tab .CN::before{ right: -16px; bottom: 7px;}
    .tab .more_tab{ padding: 10px 0;}
    .tab .tilList .til_tab.on .CN{ font-size: 26px;}
    .link li{ width: 90%;}
    .mode4 .tabListBox li{ width: 100%;}
    .tab .boxList{ margin-top: 0;}
    .slick .title{ display: none;}
    
    
}

@media screen and (max-width:375px) {
    .mode3 .tabListBox li{ width: 100%;}
}