:root {
    --bg_1: url("https://company-website-1253454674.cos.ap-beijing.myqcloud.com/img/bg_1.png");
    --button_next_prev: url("https://company-website-1253454674.cos.ap-beijing.myqcloud.com/img/button_next_prev.png");
    --triangle: url("https://company-website-1253454674.cos.ap-beijing.myqcloud.com/img/triangle.png");
    --up: url("https://company-website-1253454674.cos.ap-beijing.myqcloud.com/img/up.png");
    --down: url("https://company-website-1253454674.cos.ap-beijing.myqcloud.com/img/down.png");
    --right: url("https://company-website-1253454674.cos.ap-beijing.myqcloud.com/img/right.png");
    --game_bottom: url("https://company-website-1253454674.cos.ap-beijing.myqcloud.com/img/game_bottom.png");
    --pause: url("https://company-website-1253454674.cos.ap-beijing.myqcloud.com/img/pause.png");
    --game_text: url("https://company-website-1253454674.cos.ap-beijing.myqcloud.com/img/game_text.png");
    --arrow: url("https://company-website-1253454674.cos.ap-beijing.myqcloud.com/img/arrow.png");
    --thumbs: url("https://company-website-1253454674.cos.ap-beijing.myqcloud.com/img/thumbs.png");
    --arrow_prev: url("https://company-website-1253454674.cos.ap-beijing.myqcloud.com/img/arrow_prev.png");
    --news_more_bg: url("https://company-website-1253454674.cos.ap-beijing.myqcloud.com/img/news_more_bg.png");
    --news_bottom: url("https://company-website-1253454674.cos.ap-beijing.myqcloud.com/img/news_bottom.png");
}
body{font-family:'Microsoft Yahei';font-size:14px;color:#fff;}
html,body{height:100%;min-width: 1000px;min-height: 1000px;}
.bg_img{
    pointer-events:none;
    position:fixed;
    z-index:-1;
    top:0;left:0;height:0;bottom:0;
    height:100%;
    width:100%;
    opacity:0;
    background:no-repeat var(--bg_1);
    background-size: cover;
    -webkit-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 0.8s ease-in-out;
}

.active_img {
    opacity:1;
}
.down_nav {
	background:rgba(0,0,0,45%);
	position: fixed; 
	bottom: 0; 
	width: 100%; 
	height: 100px;
    /*background: no-repeat 100% url(../img/title_head.png);*/
}
.head_nav {
    height: 8%;
    /*background: no-repeat 100% url(../img/title_head.png);*/
}
.index_con {
    height: 100%;
    width: 100%;
}
.index_line {
    width: 80%;
    margin: auto;
}
.index_line_cut {
    width: 100%;
    position: relative;
    top:5rem
}
.index_logo {
    width: 80%;
    margin: auto;
    position: relative;
    top: 1rem;
}
.index_text {
    font-size: 2rem;
    color: #F2F2F2;
    display: inline-block;
    margin-top: 2rem;
}
.index_next_page {
    cursor: pointer;
    display: inline-block;
    width: 11%;
    height: 4rem;
    font-size: 1.5rem;
    margin-top: 4rem;
    outline: none;
    text-align:center;
    line-height:100%;
    padding:0.3em;
    border: 0px;
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.2);
            box-shadow:0px 1px 2px rgba(0,0,0,0.2);
    text-shadow:0px 1px 1px rgba(0,0,0,0.3);
    background: var(--button_next_prev);
}
.index_next_page:hover {
    background: #e27a3f;
}
.index_img {
    width: 80%;
    margin-left: 15%;
    position: absolute;
    bottom: 25%;
}
.index_img ul {
    list-style: none;
    display: flex;
}
.index_img ul li {
    background: #f58e8e;
    width: 20rem;
    height: 10rem;
    margin-top:12rem;
    opacity: 0;
    margin-left: 5rem;
    transition: all 1s ease-in-out;
}
.to {
    font-size: 1.5rem;
    position: absolute;
    right:2rem;
}
.index_footer {
    position: absolute;
    bottom: 2rem;
    left: 4.5rem;
    right: 3rem;
}
.body_con {
	position:relative;
	overflow:hidden;
	z-index:0;
	min-width:800px;
	max-width:2560px;
	height:82%;
	margin:0 auto
	}
.body_container {
    height: 100%;
    width: 100%;
}
.logo {
    display: inline-block;
    padding-left: 5%;
    height: 100%;
    width: 10rem;
}
.title_link {
    font-size:1.2rem;
    text-align: center;
    display: inline-block;
    height: 100%;
    width: 40rem;
    float: right;
}

.title_link ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: inline-block;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    list-style:none;
    height: 100%;
    width: 35rem;
    transition: all 0.8s ease-in-out;
}
.hide_title{
    cursor: pointer;
    display: inline-block;
    position: relative;
    float: right;
    width: 3rem;
    height: 4rem;
    margin: 1.6rem 1rem;
    top: 0;
    right: 1%;
}

.title_link ul li{
    display: inline-block;
    width: 8rem;
    text-align: center;
    -webkit-transition: 0.2s all liner;
    -o-transition: 0.2s all liner;
    transition: 0.2s all liner;
    cursor: pointer;
}

.title_link ul li a{
    display: inline-block;
    height: 4rem;
    color: #F2F2F2;
    line-height: 5rem;
}
.title_link ul li a:hover {
    border-bottom: 2px solid #e27a3f;

}
.active {
    border-bottom: 2px solid #e27a3f;
}
.active_right {
    content: '<hr />';
}
.right_hr {
    border: 0;
    border-bottom: 2.3px solid;
    margin-top: 7px;
    height: 1px;
    display: inline-block;
    opacity: 0.6;
    width: 100%;
    margin-left: 60%;
    transition: 0.8s all ease-in-out;
}

.right_icon {
    opacity:1;
    transition: 1s opacity ease-in-out;
    background: no-repeat 0 0 var(--triangle);
}
.right_nav {
    font-size: 0.7rem;
    width: 10%;
    height: 90%;
    float: right;
}
.right_nav_span {
    position:relative;
    margin-left:-1.5rem;
    font-size:0.9rem;
    opacity:0;
    transition:all 0.5s ease-in-out;
}
.right_up {
    background: no-repeat 83.3% var(--up);
    background-color: transparent;
    height: 2rem;
    margin-top: 1rem;
}
.right_down {
    background: no-repeat 83.3% var(--down);
    background-color: transparent;
    height: 2rem;

}
.right_nav ul {
    background: no-repeat 80% var(--right);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    list-style:none;
    height: 19rem;
    width: 100%;
}
.right_nav ul li{
    /*background: no-repeat 0 1.4rem url(../img/triangle.png);*/
    display: inline-block;
    height: 20%;
    width: 77%;
    overflow: hidden;

}
.right_nav ul li a{
    display: inline-block;
    width: 80%;
    color: #F2F2F2;
    margin-left: 1rem;
    text-align: center;
}
.game_show {
    width: 100%;
    height: 100%;
    z-index: 1;
}
.game_con {
    width: 57rem;
    height: 34.5rem;
    margin-top: 10rem;
    margin-left: 3%;
    background: var(--game_bottom);
    display: inline-block
}
.display_video {
    height:100%;
    width:100%;
    object-fit:fill;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}
.video_control {
    cursor: pointer;
    background: no-repeat var(--pause);
    height: 3rem;
    width: 3rem;
    top: 5rem;
    left: 9rem;
    float: right;
    position: absolute;
    z-index: 99;
}
.name_logo {
    width: 40%;
    margin-top: 1.2rem;
    margin-left: -7rem;
    opacity: 0;
    transition: 0.4s all ease-in-out;
}
.game_text {
    background: var(--game_text);
    height: 21rem;
    width: 34rem;
    margin-top: 6rem;
    opacity: 0;
    position: relative;
    transition: 0.4s all ease-in-out;
}
.go_game {
    cursor: pointer;
    width: 12rem;
    height: 3.5rem;
    font-size: 1.5rem;
    margin-top: 1rem;
    border: 0;
    color: #272727;
    background: no-repeat #EFC94C 83% 55% var(--arrow);
}
.go_game:hover {
    background:no-repeat #e27a3f 83% 55% var(--arrow);
}
.text_content {
    position: relative;
    float: left;
    margin-left: 16rem;
    margin-top: 1.5rem;
    margin-right: 1rem;
    text-align:left;
    text-indent: 2rem;
    color: #F2F2F2;
}
.text_content_down {
    position: relative;
    float: left;
    margin-left:1rem;
    margin-top: 2rem;
    margin-right: 1rem;
    text-indent: 2rem;
    text-align: left
}
.game_video {
    height: 11.25rem;
    width: 20rem;
    margin-top: 1rem;
    position: absolute;
    left: -4.5rem;
}
.game_dinosaur {
    position: absolute;
    margin-left: 13rem;
    display: inline-block;
    top:15%;
    opacity: 0;
    transition: 0.4s all ease-in-out;
    /*transition-delay: 0.5s;*/
}
.swiper-container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0);
    overflow: hidden;
    text-align: center;
    font-size: 18px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.news_box {
    opacity: 1;
    display: block;
    height: 100%;
    width: 100%;
}
.thumbs {
    width: 23rem;
    position: relative;
    float: left;
    /* margin: 3rem 2rem 3rem 20%; */
    height: 55rem;
    margin-right: 3rem;
    left: 12%;
    top: 3%;
    /*background: no-repeat 0 -1.9rem url(../img/thumbs.png);*/
}

.thumbs_bg {
    background: no-repeat 0 -1rem var(--thumbs);
}

.swiper-news {
    width: 60rem;
    height: 36rem;
    overflow: hidden;
    position: absolute;
    top: -0.8rem;
    margin-left: auto;
    right: -1.5rem;
    --swiper-theme-color: #ff6600;
    --swiper-preloader-color: #00ff33;
}
/* 自定义分页器样式 */
.news_box button {
    display:none;
}
.button_div {
    width: 88rem;
    position: relative;
    top: 37rem;
    left: -36.5rem;
}
.news_box .button_news {
    cursor: pointer;
    display: inline-block;
    width: 11%;
    height: 4rem;
    font-size: 1.5rem;
    margin:0 2rem;
    margin-top: -1.2rem;
    outline: none;
    text-align:center;
    line-height:100%;
    padding:0.3em;
    border: 0px;
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.2);
            box-shadow:0px 1px 2px rgba(0,0,0,0.2);
    text-shadow:0px 1px 1px rgba(0,0,0,0.3);
    background: #45b29d;
}

#prev_news {
    background: no-repeat #45b29d 15% 50% var(--arrow_prev)
}
#next_news {
    background: no-repeat #45b29d 86% 52% var(--arrow)
}
.news_box .button_news:hover{
    background:#e27a3f;
}
.news_box .button_news_prev {
  margin-left:20%;
}
.news_box .button_news_more{
    background: #45b29d;
    margin-left: 3rem;
}
.news_img {
    display:block;
    height: 100%;
    width: 100%;
    transition: all 1s ease-in-out;
}
.thumbs_img {
    height: 10rem;
    width: 16rem;
    margin-top:0.3rem;
    margin-left:-2rem;
    opacity: 0.4;
    background-color: rgba(255, 255, 255, 0);
}
.thumbs .swiper-slide {
    height: 100%;
    opacity: 1;
}
.thumbs .swiper-slide-thumb-active {
    opacity: 1;
}
.thumbs .swiper-slide-thumb-active img{
    opacity: 1;
}
.thumbs .swiper-slide-thumb-active > div > span{
    display: none;
}
.img_box_con {
    width: 58rem;
    height: 40rem;
}
.img_box {
    cursor: pointer;
    width: 46rem;
    height: 27rem;
    overflow: hidden;
    display: inline-block;
    margin-top: 2.9rem;
    margin-left: 0.8rem;
}

.img_box_bg {
    position: relative;
    width: 56.3rem;
    height: 35rem;
    left: 40%;
    top: 9.5rem;
    background: no-repeat var(--news_bottom)
}
.img_box_title {
    display: inline-block;
    width: 47rem;
    text-align: left;
    color: #F2F2F2;
    height: 3rem;
    font-size: 2rem;
    position: relative;
    top:2rem;
    left:0;
    overflow: hidden;
    text-overflow:ellipsis;
    -o-text-overflow: ellipsis;
    white-space:nowrap;
}
.thumbs_title {
    position:absolute;
    text-align: center;
    width: 13rem;
    height: 2rem;
    line-height: 2rem;
    bottom:6%;
    left: 4rem;
    font-size: 1.2rem;
    color: #F2F2F2;
    font-style: bold;
    background-color: transparent;
    /*标题内容过长显示省略号*/
    overflow: hidden;
    text-overflow:ellipsis;
    -o-text-overflow: ellipsis;
    white-space:nowrap;
}
.img_thumbs_box {
    border: 1px solid black;

}
.news_img:hover{
    transform:scale(1.2);
}
/*页尾隐藏在页面下方，完全透明显示出来后多高内容 -webkit- -moz- 不同浏览器的布局属性*/
.box_footer{width:100%;position:fixed;top:auto;left:0;right:0;bottom:-10rem;z-index:1;height:11rem;opacity:0;background:rgba(0,0,0,0.6);-webkit-transition:all .1s;-o-transition:all .1s;transition:all .1s}
/*鼠标移动到什么区域可以显示页尾，中间高两边低*/
.box_footer::before{content:'';display:block;position:absolute;top:auto;left:0;right:0;bottom:0;z-index:0;width:20rem;height:130%;margin:0 auto}
/*鼠标移动到该区域，显示出来，y轴向上移动页面下方的距离，从下向上滑入的效果*/
.box_footer:hover{opacity:0.6;-webkit-transform:translateY(-2rem);-ms-transform:translateY(-2rem);transform:translateY(-10rem)}
/*显示出来后footer的大小*/
.box_footer .footer{height:11rem}
.footer {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 6rem;
}
/*footer显示区域*/
.footer .box {
    position: relative;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
}
/*底部logo显示，可有可无*/
.footer .box .logo {
    display: block;
    position: absolute;
    top: 0;
    left: auto;
    right: 0.3rem;
    bottom: 0;
    margin: auto 0;
    width: 0.83rem;
    height: 0.82rem;
    background: url('#');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.83rem 0.82rem;
}
/*内容显示*/
.footer .box .content {
    position: relative;
    overflow: hidden;
    width: calc(100% - 60 * 0.01rem - 83 * 0.01rem);
    height: 100%;
    padding: 0.2rem 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.footer .box .content p {
    margin-bottom: 0.05rem;
    text-align: center;
    font-size: 0;
}
/*最后一个子元素*/
.footer .box .content p:last-child {
    margin: 0;
}

.footer .box .content p a, .footer .box .content p span {
    display: inline-block;
    text-align: center;
    line-height: 2rem;
    color: #ffffff;
    font-size: 1rem;
}

.footer .box .content p a {
    padding: 0 0.05rem;
    text-indent: 0.02rem;
    letter-spacing: 0.02rem;
}

.footer .box .content p a:hover {
    color: #42ad46;
}

.footer .box .content p a:hover span {
    color: #42ad46;
}

.footer .box .content p a.m {
    text-indent: 0rem;
    letter-spacing: 0rem;
    padding: 0 0.08rem;
}

.footer .box .content p a span {
    text-indent: 0rem;
    letter-spacing: 0rem;
}

.footer .box .content p > span {
    padding: 0 0.05rem;
}
.footer_tip {
    position: absolute;
    bottom: 1rem;
    right: 2rem;
    transform: rotate(180deg);
}
.page_down {
    position:absolute;bottom:0;left:54.5%;
}
.about_box {
    display: block;
    height: 100%;
    width: 100%;
}
.about_us {
    display: inline-block;
    height:50%;
    width: 80%;
    color: #F2F2F2;
    margin-left: 10%;
    margin-top: 3rem;
    text-align: left;
}
.about_us p{
    font-size:1.5rem;
    margin:10px;
    text-align: left;
}
.contact_us {
    display: inline-block;
    height: 50%;
    width: 80%;
    color: #F2F2F2;
    margin-left: 10%;
    text-align:left;
}
.contact_us p {
    font-size:1.5rem;
    margin: 10px;
    text-align: left;
}

.news {
    width: 100rem;
    height: 50rem;
    margin: auto;
    margin-top: 4rem;
    background: no-repeat var(--news_more_bg);
    background-color: transparent;
    overflow: auto;
}
.news_graphic {
    color: #f7f7f7;
    display: inline-block;
    height: 74%;
    width: 100%;
    margin-top:3%;
}
.news_change {
    font-size: 16px;
    display: inline-block;
    height: 20%;
    width: 100%;
}
.news_change .pre_next {
    display: inline-block;
    height: 100%;
    width: 70%;
}
.news_change .pre_next ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    list-style:none;
    height: 100%;
    width: 100%;
}
.news_change .pre_next ul li{
    display: inline-block;
    width: 20%;
    text-align: center;
}
.news_change .pre_next ul li a{
    display: inline-block;
    border:2px solid #42ad46;
    padding:0px 35px;
    height: 50%;
    line-height: 5rem;
}
.news_change .more {
    display: inline-block;
    height: 100%;
    width: 30%;
    float: right;
}
.news_change .more ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    list-style:none;
    height: 100%;
    width: 100%;
}
.news_change .more ul li{
    display: inline-block;
    width: 50%;
    text-align: center;
}
.news_change .more ul li a{
    display: inline-block;
    border: 2px solid #42ad46;
    padding: 2px 35px;
    height: 50%;
    line-height:5rem;
}