@font-face {
    font-family: 'tc';
    src: url('/static/assets/FuturaLTCondensedMedium.ttf');
}

.root {
    width: 100%;
    margin-top: 220rem;
}

.root a {
    font-size: 0;
}

.root img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* 内容区域 */

.root .top-gg-box
{
    width:100%;
    height: calc(376rem + 44rem);
    background: #F5F5F5;
}


/**************slider*****************/
.swiper {
    width: 100%;
    height: 376rem;
}

.swiper-slide {
    text-align: center;
    font-size: 18rem;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-pagination {
    position: relative !important;
    padding-top: 10rem !important;
}
.swiperbottom
{
    position: relative;
    height: 44rem;
    line-height: 44rem;
    background: #F7F7F7;
}
.swiper-pagination-bullet {
    width: 40rem;
    height: 4rem;
    background: #FFFFFF;
    border-radius: 2rem;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    width: 40rem;
    height: 4rem;
    background: #00A040;
    border-radius: 2rem;
}


/******************************/
.main {
    width: 100%;
    min-height: 100rem;
    background: #FFFFFF;
}

.main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box1 {
    width: calc(100% - 64rem);
    margin: 0 auto;
    background: #FFFFFF;
    padding-top: 60rem;
}
.root .top {
    width: 100%;
    height: 102rem;
    position: relative;
}
.root .top .categorytitle {
    min-width: 200rem;
    height: 64rem;
    font-size: 46rem;
    font-weight: bold;
    color: #282828;
    line-height: 64rem;
}

.root .top .engname {
    width: 100%;
    height: 38rem;
    font-size: 24rem;
    font-weight: normal;
    color: #00a040;
    line-height: 38rem;
    display: flex;
    font-family: tc;
}
.root .top .engname div:first-child{
    font-family: 'tc';
}

.root .top .engname .englinebox {
    position: relative;
    height: 38rem;
    width: 100%;
}

.root .top .engname .engline {
    width: 100%;
    height: 2rem;
    background: #00a040;
    position: absolute;
    top: 16rem;
}

.root .top .more {
    width: 98rem;
    height: 22rem;
}

.root .top .more img {
    width: 100%;
    height: 100%;
}
/******************************/
.box1 .grid {
    margin-top: 60rem;
    display: flex;
    flex-wrap: wrap;
}
.box1 .grid .itemlist {
    width: 100%;
    height: calc(458rem + 222rem);
    position: relative;
    background: #F5F5F5;
    overflow: hidden;
    margin-bottom: 40rem;
}
.box1 .grid .itemlist .cover{
    width: 100%;
    height: 458rem;
}
.box1 .grid .itemlist .tags
{
    height:32rem;
    padding:30rem 30rem 26rem 30rem;
    width: calc(100% - 60rem);
    display: flex;
}
.box1 .grid .itemlist .tags .tagsline
{
    width: 6rem;
    height: 32rem;
    background: #00A040;
    border-radius: 0rem 200rem 0rem 200rem;
}
.box1 .grid .itemlist .tags .tagsname
{
    width: 164rem;
    height: 32rem;
    font-size: 24rem;
    font-weight: bold;
    color: #282828;
    line-height: 32rem;
    padding-left:20rem;
}
.box1 .grid .itemlist .title
{
    margin:0rem 30rem 20rem 30rem;
    width: calc(100% - 60rem);
    overflow: hidden;

    height: 40rem;
    font-size: 28rem;
    font-weight: bold;
    color: #282828;
    line-height: 40rem;
}
.box1 .grid .itemlist .remark
{
    margin:0rem 30rem 40rem 30rem;
    width: calc(100% - 60rem);
    overflow: hidden;

    height: 34rem;
    font-size: 24rem;
    font-weight: 300;
    color: #A2A2A2;
    line-height: 34rem;
}
/******************************/
.main2{
    width: 100%;
    min-height: 100rem;
    background: #F5F5F5;
}

.main2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box2 {
    width: calc(100% - 64rem);
    margin: 0 auto;
    padding-top: 60rem;
    padding-bottom: 20rem;
}
.box2 .grid {
    margin-top: 60rem;
    display: flex;
    flex-wrap: wrap;
}
.box2 .grid .itemlist {
    width: 100%;
    height: 240rem;
    position: relative;
    background: #FFFFFF;
    margin-bottom: 40rem;
    display: flex;
}
.box2 .grid .itemlist .cover{
    width:338rem;
}
.box2 .grid .itemlist .cover img{
    width:298rem;
    height:calc(100% - 40rem);
    padding: 20rem;
}
.box2 .grid .itemlist .right{
    width:100%;
}
.box2 .grid .itemlist .title
{
    margin:20rem 20rem 20rem 0rem;
    width: 100%;
    overflow: hidden;

    max-height: 72rem;
    font-size: 26rem;
    font-weight: bold;
    color: #282828;
    line-height: 36rem;
}
.box2 .grid .itemlist .remark
{
    margin:0rem 20rem 0rem 0rem;
    width: calc(100% - 20rem);
    overflow: hidden;

    max-height: 56rem;
    font-size: 20rem;
    font-weight: 300;
    color: #666666;
    line-height: 28rem;
    text-align: justify;
}
/******************************/
.main3{
    width: 100%;
    min-height: 100rem;
    background: #FFFFFF;
}

.main3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box3 {
    width: calc(100% - 64rem);
    margin: 0 auto;
    padding-top: 60rem;
    padding-bottom: 20rem;
}
.box3 .grid {
    margin-top: 60rem;
    display: flex;
    flex-wrap: wrap;
}
.box3 .grid .itemlist {
    width: 100%;
    height: 240rem;
    position: relative;
    background: #F5F5F5;
    margin-bottom: 40rem;
    display: flex;
}
.box3 .grid .itemlist .cover{
    width:338rem;
}
.box3 .grid .itemlist .cover img{
    width:298rem;
    height:calc(100% - 40rem);
    padding: 20rem;
}
.box3 .grid .itemlist .right{
    width:100%;
}
.box3 .grid .itemlist .title
{
    margin:20rem 20rem 20rem 0rem;
    width: 100%;
    overflow: hidden;

    max-height: 72rem;
    font-size: 26rem;
    font-weight: bold;
    color: #282828;
    line-height: 36rem;
}
.box3 .grid .itemlist .remark
{
    margin:0rem 20rem 0rem 0rem;
    width: calc(100% - 20rem);
    overflow: hidden;

    max-height: 56rem;
    font-size: 20rem;
    font-weight: 300;
    color: #666666;
    line-height: 28rem;
    text-align: justify;
}

.box3 .grid .firstbox
{
    width: 100%;
    height: 686rem;
    position: relative;
    margin-bottom: 40rem;
}


.box3 .grid .firstbox .cover {
    width: 100%;
    height: 686rem;
    overflow: hidden;
}


.box3 .grid .firstbox .zhezhao {
    width: 100%;
    height: 301rem;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
    position: absolute;
    left: 0rem;
    bottom: 0rem;
}

.box3 .grid .firstbox .title {
    width: 626rem;
    height: 40rem;
    font-size: 28rem;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 40rem;

    overflow: hidden;
    position: absolute;
    left: 30rem;
    bottom: 94rem;
}

.box3 .grid .firstbox .remark {
    width: 626rem;
    height: 34rem;
    font-size: 24rem;
    font-weight: 300;
    color: #FFFFFF;
    line-height: 34rem;

    overflow: hidden;
    position: absolute;
    left: 30rem;
    bottom: 40rem;
}
/******************************/
.main5{
    width: 100%;
    min-height: 100rem;
    background: #FFFFFF;
}

.main5 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box5 {
    width: calc(100% - 64rem);
    margin: 0 auto;
    padding-top: 60rem;
    padding-bottom: 20rem;
}
.box5 .grid {
    margin-top: 60rem;
    display: flex;
    flex-wrap: wrap;
}
.box5 .grid .itemlist {
    width: 100%;
    height: 240rem;
    position: relative;
    background: #F5F5F5;
    margin-bottom: 40rem;
    display: flex;
}
.box5 .grid .itemlist .cover{
    width:338rem;
}
.box5 .grid .itemlist .cover img{
    width:298rem;
    height:calc(100% - 40rem);
    padding: 20rem;
}
.box5 .grid .itemlist .right{
    width:100%;
}
.box5 .grid .itemlist .title
{
    margin:20rem 20rem 20rem 0rem;
     width: calc(100% - 20rem);
    overflow: hidden;

    max-height: 72rem;
    font-size: 26rem;
    font-weight: bold;
    color: #282828;
    line-height: 36rem;
}
.box5 .grid .itemlist .remark
{
    margin:0rem 20rem 0rem 0rem;
    width: calc(100% - 20rem);
    overflow: hidden;

    max-height: 56rem;
    font-size: 20rem;
    font-weight: 300;
    color: #666666;
    line-height: 28rem;
    text-align: justify;
}

.box5 .grid .firstbox
{
    width: 100%;
    height: 686rem;
    position: relative;
    margin-bottom: 40rem;
}


.box5 .grid .firstbox .cover {
    width: 100%;
    height: 686rem;
    overflow: hidden;
}


.box5 .grid .firstbox .zhezhao {
    width: 100%;
    height: 154rem;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
    position: absolute;
    left: 0rem;
    bottom: 0rem;
}

.box5 .grid .firstbox .title {
    width: 626rem;
    height: 40rem;
    font-size: 28rem;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 40rem;

    overflow: hidden;
    position: absolute;
    left: 30rem;
    bottom: 50rem;
}

/******************************/
/******************************/
.maingg {
    width: 100%;
    background: #F5F5F5;
}

.maingg .ggbox {
    margin: 0 auto;
    width: 100%;
    height: 126rem;
    padding: 30rem 0rem;
}

.maingg .cover {
    width: 100%;
    height: 100%;
}

.hide {
    display: none;
}

/******************************/
.root .top .eng2 {
    font-size: 24rem;
    width:194rem;
}
.root .top .line2 {
    font-size: 12rem;
    width:calc(100% - 98rem - 40rem - 194rem) !important;
}

.root .top .eng8 {
    font-size: 24rem;
    width:121rem;
}
.root .top .line8 {
    font-size: 12rem;
    width:calc(100% - 98rem - 40rem - 121rem) !important;
}

.root .top .eng9 {
    font-size: 24rem;
    width:145rem;
}
.root .top .line9 {
    font-size: 12rem;
    width:calc(100% - 98rem - 40rem - 145rem) !important;
}
/******************************/