﻿@charset "UTF-8";

.section1{background: #444; padding: 0 10rem;}
.c-home-section .title{display: inline-block; vertical-align: top; padding: 10rem 10rem 0 0; position: relative; z-index: 2;}
.c-home-section .title h3{font-family: 'Poiret One'; font-size: 60px; margin: 0; text-transform: uppercase; opacity: 0;}
.c-home-section .title p{font-size: 20px; margin: 30px 0; opacity: 0;}
.c-home-section .title span{width: 60px; height: 2px; background: #e50012; display: block; opacity: 0;}
.c-home-section .title h3{-webkit-transform: translateX(120px); transform: translateX(120px); -webkit-transition: opacity .8s cubic-bezier(.215,.61,.355,1) .3s,-webkit-transform .8s cubic-bezier(.215,.61,.355,1) .3s; transition: opacity .8s cubic-bezier(.215,.61,.355,1) .3s,transform .8s cubic-bezier(.215,.61,.355,1) .3s;}
.c-home-section .title p{-webkit-transform: translateX(120px); transform: translateX(120px); -webkit-transition: opacity .8s cubic-bezier(.215,.61,.355,1) .4s,-webkit-transform .8s cubic-bezier(.215,.61,.355,1) .4s; transition: opacity .8s cubic-bezier(.215,.61,.355,1) .4s,transform .8s cubic-bezier(.215,.61,.355,1) .4s;}
.c-home-section .title span{-webkit-transform: translateX(120px); transform: translateX(120px); -webkit-transition: opacity .8s cubic-bezier(.215,.61,.355,1) .5s,-webkit-transform .8s cubic-bezier(.215,.61,.355,1) .5s; transition: opacity .8s cubic-bezier(.215,.61,.355,1) .5s,transform .8s cubic-bezier(.215,.61,.355,1) .5s;}
.c-home-section .title.is-show h3,.c-home-section .title.is-show p,.c-home-section .title.is-show span{opacity: 1; -webkit-transform: none; transform: none;}


.c-nav-button.-top .search{width: 16px; height: 25px; display: inline-block; vertical-align: middle; margin-left: 10px; position: relative;}
.c-nav-button.-top .search a{width: 16px; height: 24px; display: block; background-position: center; background-repeat: no-repeat; background-image: url(../images/head_icon3.png); -webkit-transition: all 500ms ease; transition: all 500ms ease;}
.c-nav-button.-top .search form{position: absolute; width: 0; height: 25px; border-bottom: 1px solid #ccc; position: absolute; right: 0; top: 0; overflow: hidden; -webkit-transition: all 500ms ease; transition: all 500ms ease;}
.c-nav-button.-top .search form.active{width: 190px;}
.c-nav-button.-top .search form .close{width: 14px; height: 14px; background: url(../images/close.png); position: absolute; left: 0; top: 5px; transition: all 500ms ease; cursor: pointer;}
.c-nav-button.-top .search form .close:hover{transform: rotate(180deg);}
.c-nav-button.-top .search form input{width: 160px; margin-left: 24px; height: 24px; background: none; display: block; font-size: 14px; color: #fff; -webkit-transition: all 500ms ease; transition: all 500ms ease;padding-right:15px;}
.c-nav-button.-top .search form input::-webkit-input-placeholder{color:#fff;}
.c-nav-button.-top .search form input::-moz-placeholder{color:#fff;}
.c-nav-button.-top .search form input:-moz-placeholder{color:#fff;}
.c-nav-button.-top .search form input:-ms-input-placeholder{color:#fff;}
.c-nav-button.-top .search form button{width: 16px; height: 24px; position: absolute; right: 0; top: 0; background: none; background-position: center; background-repeat: no-repeat; background-image: url(../images/head_icon3.png); -webkit-transition: all 500ms ease; transition: all 500ms ease; cursor: pointer;}


.section1 .main{display: inline-block; vertical-align: top; width: 620px; margin-top: 60px; position: relative; z-index: 2;}
.section1 .main:after{content: ''; display: block; clear: both;}
.section1 .item{width: 50%; float: left; margin-bottom: 25px; opacity: 0;}
.section1 .item i{width: 33px; height: 28px; display: block; margin-bottom: 10px; background-position: left top; background-repeat: no-repeat;}
.section1 .item:nth-of-type(1) i{background-image: url(../images/icon5.png);}
.section1 .item:nth-of-type(2) i{background-image: url(../images/icon6.png);}
.section1 .item:nth-of-type(3) i{background-image: url(../images/icon7.png);}
.section1 .item:nth-of-type(4) i{background-image: url(../images/icon8.png);}
.section1 .item:nth-of-type(5) i{background-image: url(../images/icon9.png);}
.section1 .item:nth-of-type(6) i{background-image: url(../images/icon10.png);}
.section1 .item:nth-of-type(7) i{background-image: url(../images/icon11.png);}
.section1 .item:nth-of-type(8) i{background-image: url(../images/icon12.png);}
.section1 .item p{font-size: 16px; color: #fff;}
.section1 .item span{font-size: 40px; color: #e50012; font-family: 'Raavi';}
.section1 .item:nth-of-type(1),.section1 .item:nth-of-type(2){-webkit-transform: translateX(120px); transform: translateX(120px); -webkit-transition: opacity .8s cubic-bezier(.215,.61,.355,1) .3s,-webkit-transform .8s cubic-bezier(.215,.61,.355,1) .3s; transition: opacity .8s cubic-bezier(.215,.61,.355,1) .3s,transform .8s cubic-bezier(.215,.61,.355,1) .3s;}
.section1 .item:nth-of-type(3),.section1 .item:nth-of-type(4){-webkit-transform: translateX(120px); transform: translateX(120px); -webkit-transition: opacity .8s cubic-bezier(.215,.61,.355,1) .4s,-webkit-transform .8s cubic-bezier(.215,.61,.355,1) .4s; transition: opacity .8s cubic-bezier(.215,.61,.355,1) .4s,transform .8s cubic-bezier(.215,.61,.355,1) .4s;}
.section1 .item:nth-of-type(5),.section1 .item:nth-of-type(6){-webkit-transform: translateX(120px); transform: translateX(120px); -webkit-transition: opacity .8s cubic-bezier(.215,.61,.355,1) .5s,-webkit-transform .8s cubic-bezier(.215,.61,.355,1) .5s; transition: opacity .8s cubic-bezier(.215,.61,.355,1) .5s,transform .8s cubic-bezier(.215,.61,.355,1) .5s;}
.section1 .item:nth-of-type(7),.section1 .item:nth-of-type(8){-webkit-transform: translateX(120px); transform: translateX(120px); -webkit-transition: opacity .8s cubic-bezier(.215,.61,.355,1) .6s,-webkit-transform .8s cubic-bezier(.215,.61,.355,1) .6s; transition: opacity .8s cubic-bezier(.215,.61,.355,1) .6s,transform .8s cubic-bezier(.215,.61,.355,1) .6s;}
.section1 .item.is-show{opacity: 1; -webkit-transform: none; transform: none;}


.c-home-section.min{min-width: 50%;}
.c-home-section.auto{overflow: inherit; vertical-align: top; position: relative; z-index: 2;}
.section2{height: 100%;}
.section2 ul{position: absolute; right: -5vw; bottom: 0; transition: all 500ms ease; transition: all 500ms ease; opacity: 0;}
.section2 ul li{text-align: right; margin-bottom: 10px; list-style: none; width: 140px; font-size: 0;}
.section2 ul li a{position: relative; font-size: 15px; color: #fff; line-height: 24px; display: inline-block;}
.section2 ul li a:before{content: ''; width: 100%; height: 2px; background: #e50012; position: absolute; top: 100%; right: 0; width: 0; margin-top: -1px; transition: all 500ms ease; transition: all 500ms ease;}
.section2 ul li a:hover{color: #e50012;}
.section2 ul li a:hover:before{width: 100%;}
.c-action:hover ul{opacity: 1;}
.c-action:last-child ul{right: 5vw;}

.section3{padding: 0 10rem; height: 100%; background: #444 url(../images/img6.png) 5rem center no-repeat;}
.section3 .title{padding-top: 20rem;}
.section3 .items{display: inline-block; vertical-align: top; font-size: 0; height: 100%;}
.section3 .item{display: inline-block; vertical-align: top; width: 50vw; height: 100%;}
.section3 .item .img_block{overflow: hidden;}
.section3 .item .img_block img{width: 100%; display: block; -webkit-transition: all 500ms ease; transition: all 500ms ease;}
.section3 .item .img_block:hover img{transform: scale(1.1);}
.section3 .item .txt_block{margin: -3rem 6rem 0;}
.section3 .item .logo img{display: block;}
.section3 .item h3{margin: 20px 0;}
.section3 .item h3 a{font-size: 24px; color: #fff;}
.section3 .item p{font-size: 14px; line-height: 28px; color: #fff; text-align: justify; white-space: normal; margin: 0;}
.section3 .item a.view{display: inline-block; margin-top: 40px; font-size: 14px; color: #fff; border-bottom: 2px solid #fff; padding-bottom: 3px; -webkit-transition: all 500ms ease; transition: all 500ms ease;}
.section3 .item a.view:hover{color: #e50012; border-color: #e50012;}
.section3 .item:nth-of-type(2)::before{display: inline-block; height: 100%; content: ""; vertical-align: middle;}
.section3 .item:nth-of-type(2) .block{display: inline-block; vertical-align: middle;}
.section3 .more a{position: absolute; right: 0; top: 50%; font-size: 40px; color: #fff; display: inline-block; padding-top: 20px;}
.section3 .more a:before,.section3 .more a:after{content: ''; top: 0; width: 500px; height: 2px; background: #fff; position: absolute; right: 0;}
.section3 .more a:hover:before{display: none;}
.section3 .more a:after{width: 0; -webkit-transition: all 500ms ease; transition: all 500ms ease; background: #e50012;}
.section3 .more a:hover:after{width: 500px;}
.section3 .more a:hover{color: #e50012;}


.section4{padding: 0 10rem; height: 100%; background: #444;}
.section4 .title{padding-top: 20rem;}
.section4 .main{display: inline-block; vertical-align: top; font-size: 0; height: 100%;}
.section4 .main::before{display: inline-block; height: 100%; content: ""; vertical-align: middle;}
.section4 .items{display: inline-block; vertical-align: middle; width: 90vw;}
.section4 .item .img_block{width: 60%; position: relative; float: left; overflow: hidden;}
.section4 .item .img_block img{width: 100%; display: block;}
.section4 .item .txt_block{width: 40%; padding: 100px 0 0 70px; float: left;}
.section4 .item .txt_block h3{white-space: normal; margin: 0;}
.section4 .item .txt_block h3 a{font-size: 50px; color: #fff; line-height: 70px; display: block; height: 140px; overflow: hidden;}
.section4 .item .txt_block .time{font-size: 50px; color: #fff; line-height: 40px; margin: 10px 0 20px; font-family: 'Raavi'; padding-top: 15px;}
.section4 .item .txt_block p{font-size: 14px; color: #fff; line-height: 28px; max-height: 112px; overflow: hidden; text-align: justify; white-space: normal; margin: 0;}
.section4 .item .txt_block a.view{display: inline-block; padding: 25px 90px; margin-top: 30px; background: #fff; font-size: 16px; -webkit-transition: all 500ms ease; transition: all 500ms ease;}
.section4 .item .txt_block a.view:hover{background: #e50012; color: #fff;}
.section4 .more{position: absolute; right: 50px; top: 0; padding-top: 20vh; padding-bottom: 3vh;}
.section4 .more:before{content: ''; width: 2px; height: 100%; background: #e50012; position: absolute; left: 10px; top: 0;}
.section4 .more a{font-size: 40px; color: #fff; line-height: 40px; position: relative; z-index: 2; transition: all 500ms ease;}
.section4 .more a:hover{color: #e50012;}
.section4 .slick-dots{width: 40%; position: absolute; right: 0; bottom: 40px; padding-left: 70px; text-align: left;}
.section4 .slick-dots li{width: 16px; height: 16px; display: inline-block; margin-right: 5px; background-position: center; background-repeat: no-repeat; background-image: url(../images/icon13.png);}
.section4 .slick-dots li.slick-active{background-image: url(../images/icon14.png);}
.section4 .item .line_box{position: absolute; bottom: 60px; left: 90px; right: 0; height: 3px; padding-left: 90px;}
.section4 .item .line_box i{width: 10px; height: 10px; position: absolute; left: 0; top: -3px; background: #e50012; border-radius: 50%;}
.section4 .item .line_box span.dot{display: block; width: 100%; height: 3px; background: url(../images/icon15.png) left center repeat-x; position: relative;}
.section4 .item .line_box span.line{position: absolute; left: 0; top: 0; background: #e50012; height: 3px;}
.section4 .item.slick-active .line_box span.line{-webkit-animation: loadLine 8s linear 1; animation: loadLine 8s linear 1;}
@-webkit-keyframes loadLine {
    0% {width:0;}
    100% {width:100%;}
}
@keyframes loadLine {
    0% {width:0;}
    100% {width:100%;}
}

.c-logo_wrap{background: #fff;}
.has-logo-big .c-logo_wrap{background: transparent;}
.c-logo_wrap .show{display: none;}
.has-logo-big .c-logo_wrap .show{display: block;}
.c-logo_wrap .hide{display: block}
.has-logo-big .c-logo_wrap .hide{display: none;}

.c-nav_main ul{position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; opacity: 0; padding: 0; list-style: none; transition: right 500ms ease,opacity 500ms ease;}
.c-nav_main ul li{height: 16.666%; position: relative; border-bottom: 1px solid rgba(255,255,255,.2); transition: background 500ms ease;}
.c-nav_main ul li:before{content: ''; display: inline-block; vertical-align: middle; height: 100%;}
.c-nav_main ul li .block{display: inline-block; vertical-align: middle; width: 70%;}
.c-nav_main ul li h3{margin: 0;}
.c-nav_main ul li h3 a{font-size: 30px; color: #fff; text-align: right; display: block; transition: color 500ms ease;}
.c-nav_main ul li .item{margin-top: 15px; text-align: right; margin-right: -50px; opacity: 0; height: 0; width: 400px; float: right; overflow: hidden; transition: all 500ms ease; font-size: 0;}
.c-nav_main ul li .item a{font-size: 16px; color: #808080; display: inline-block; margin-left: 20px; transition: color 500ms ease;}
.c-nav_main ul li .item a:hover{color: #e50012;}
.c-nav_main_item:hover ul{right: -10rem; opacity: 1;}
.c-nav_main ul li:hover{background: rgba(255,255,255,5);}
.c-nav_main ul li:hover h3 a{color: #333;}
.c-nav_main ul li:hover h3 a:hover{color: #e50012;}
.c-nav_main ul li:hover .item{min-height: 24px; height: auto; opacity: 1; margin-right: 0;}
.c-nav_main_item:nth-of-type(2):hover .c-nav_main_content{visibility: hidden;}


.newNav{padding: 0; margin: 0; opacity: 0; visibility: hidden; transition: all 500ms ease; position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%);}
.newNav li{list-style: none; text-align: center; font-size: 14px; color: #222; line-height: 48px;}
.newNav li a{color: #fff;}
.newNav li:hover a{color: #e50012;}
.has-scroll .newNav{opacity: 1; visibility: visible;}
.has-nav-open .newNav{opacity: 1; visibility: visible;}

.dom-is-loaded .fixed_mouse{opacity: 1; transition-delay: 0.3s;}
.fixed_mouse{position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.3); z-index: 999; opacity: 0; transition: all 500ms ease;}
.fixed_mouse .main{width: 240px; height: 240px; position: fixed; bottom: 60px; right: 60px; border-radius: 50%; background: #272424; padding-top: 55px;}
.fixed_mouse .main .mouse{width: 37px; height: 70px; margin: 0 auto; background: url(../images/mouse_icon1.png) center no-repeat; position: relative;}
.fixed_mouse .main .mouse i{width: 5px; height: 13px; position: absolute; top: 9px; left: 16px; background: url(../images/mouse_icon2.png) center no-repeat; -webkit-animation: flashing 2s linear infinite; animation: flashing 2s linear infinite;}
@keyframes flashing{
	0%{opacity: 1;}
	50%{opacity: 0;}
	100%{opacity: 1;}
}
.fixed_mouse .main h3{font-size: 16px; color: #fff; text-align: center; font-weight: normal; margin: 20px 0 0; letter-spacing: 1px;}
.fixed_mouse .main p{font-size: 12px; color: #fff; text-align: center; margin: 0; font-family: 'Arial'; opacity: .3;}



.ieShow{background: #f9fcd2; width: 100%; height: 300px; position: absolute; top: 100px; left: 0; padding: 45px 0; z-index: 9999; display: none;}
.ieShow .close{position: absolute; right: 30px; top: 30px; background: #ccc url(../images/close.png) center no-repeat; width: 30px; height: 30px; cursor: pointer; border-radius: 50%;}
.ieShow .content{width: 1000px; margin: 0 auto; text-align: center;}
.ieShow .content h3{font-size: 18px; color: #333; margin-bottom: 25px;}
.ieShow .content p{font-size: 13px; color: #666; margin-bottom: 45px;}
.ieShow .content .dowmload a{display: inline-block; width: 100px; margin: 0 20px; text-decoration: none;}
.ieShow .content .dowmload span{color: #666; display: block; font-size: 12px;}
.ieShow .content .dowmload span.gray{color: #999;}

@media screen and (max-width: 1700px){
	.section4 .item .txt_block{padding: 30px 0 0 60px;}
}
@media screen and (max-width: 1500px){
	.newNav li{line-height: 32px;}
	.c-home-section .title h3{font-size: 50px;}
	.c-home-section .title p{font-size: 18px;}
	.section1 .main{width: 550px;}
	.section1 .item{margin-bottom: 10px;}
	.section1 .item i{margin-bottom: 0;}
	.section1 .item p{margin: 5px 0;}
	.section1 .item span{line-height: 40px; display: inline-block; font-size: 34px;}
	.section2 ul li{margin-bottom: 5px;}
	.section3 .title{padding-top: 15rem;}
	.section3 .item{width: 36vw;}
	.section3 .item .txt_block{margin: -2rem 1rem 0;}
	.section3 .item .logo img{max-width: 200px;}
	.section3 .item h3{margin: 15px 0;}
	.section3 .item h3 a{font-size: 20px; display: block; line-height: 26px;}
	.section3 .item p{line-height: 22px; /*height: 72px;*/ max-height: 132px; overflow: hidden;}
	.section3 .item a.view{margin-top: 20px;}
	.section3 .more a{font-size: 30px;}
	.section3 .more a:before, .section3 .more a:after{width: 300px;}
	.section3 .more a:hover:after{width: 300px;}
	.section4 .title{padding-top: 15rem;}
	.section4 .items{width: 70vw;}
	.section4 .more a{font-size: 30px; line-height: 30px;}
	.section4 .item .line_box{padding-left: 50px; left: 30px;}
	.section4 .item .txt_block{padding: 0 0 0 40px;}
	.section4 .item .txt_block h3 a{font-size: 26px; line-height: 34px; height: 68px; overflow: hidden;}
	.section4 .item .txt_block .time{font-size: 20px; line-height: 30px; padding-top: 8px; margin: 10px 0;}
	.section4 .item .txt_block p{line-height: 22px; height: 132px; max-height: none; overflow: hidden;}
	.section4 .item .txt_block a.view{padding: 10px 40px;}
	.section4 .slick-dots{bottom: 0; padding-left: 40px;}
}
@media screen and (max-width: 1200px){
	.c-home-section:first-child .c-home-section_content{padding-left: 7rem;}
	.c-home-section_heading .fz{font-size: 40px;}
	.c-glitch_content p{font-size: 30px;}
	.c-home-section_heading_line{margin: 15px 0;}
	.section3 .more a{font-size: 24px; padding-top: 10px;}
	.section3 .more a:before, .section3 .more a:after{width: 200px;}
	.section3 .more a:hover:after{width: 200px;}
	.section4 .item .txt_block h3 a{font-size: 24px; line-height: 34px; height: 68px;}
	.section4 .item .txt_block .time{padding-top: 5px; margin: 8px 0 5px;}
	.section4 .item .txt_block a.view{margin-top: 20px;}
	.section4 .more a{font-size: 24px;}
}

