.section{ overflow: hidden; display: block !important;} .section1{ background: url(bg1.jpg) no-repeat center center; background-size: 100% 100%;} .section2{ background: url(bg2.jpg) no-repeat center center; background-size: 100% 100%;} .section3{ background: url(bg3.jpg) no-repeat center center; background-size: 100% 100%;} .section4{ background: url(bg4.jpg) no-repeat center center; background-size: 100% 100%;} .section5{ background: url(bg5.jpg) no-repeat center center; background-size: 100% 100%;} .section6{ background: url(bg6.jpg) no-repeat center center; background-size: 100% 100%;} .section7{ background: url(bg7.jpg) no-repeat center center; background-size: 100% 100%;} .section8{ background-color: #0E0A0B;} .canvasMain{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:999999; background: url(banner.jpg) no-repeat center center; background-size: 100% 100%; } .nextscreen{ position: absolute; left: 0; bottom: 3%; width: 100%; text-align: center; z-index: 9999999; animation: opactive 1s ease alternate infinite 0s; -webkit-animation: opactive 1s ease alternate infinite 0s; } @keyframes opactive{ 0%{ opacity: 1;} 50%{ opacity: 0.6;} 100%{ opacity: 1;} } @-webkit-keyframes opactive{ 0%{ opacity: 1;} 50%{ opacity: 0.6;} 100%{ opacity: 1;} } @-moz-keyframes opactive{ 0%{ opacity: 1;} 50%{ opacity: 0.6;} 100%{ opacity: 1;} } .totalTit{ width: 1200px; height: 610px; position: absolute; left: 50%; margin-left: -600px; top: 50%; margin-top: -305px; z-index: 9999999;} .totalTit .waperlines{ position: absolute; left: 0; top: 0; width: 1200px; height: 610px; } .totalTit .waperlines .sublines{ fill: none; stroke: rgba(255,255,255,0.5); stroke-width: 2px; stroke-dasharray: 0,410; transition: all 3s ease-in-out 0s; -webkit-transition: all 3s ease-in-out 0s; -moz-transition: all 3s ease-in-out 0s; } .totalTit.acitve .waperlines .sublines{ stroke-dasharray: 820,0;} .totalTit .worlds{ width: 100%; text-align: center; position: absolute; left: 0; top: 30%;} .totalTit .pictures{ width: 100%; text-align: center; position: absolute; left: 0; bottom: 15%;} .totalTit .worlds .op{ position: absolute; left: 0; top: 0; width: 100%; height: 90px; background: url(ds4.png) no-repeat center center;} .totalTit .worlds .aq{ position: absolute; left: 0; top: 0; width: 100%; height: 90px; opacity: 0;} /*.ctx_out{ animation:opact1 10s ease 0s infinite normal; -webkit-animation:opact1 10s ease 0s infinite normal; }*/ .ctx_in{ animation:opact2 10s ease 5s infinite alternate; -webkit-animation:opact2 10s ease 5s infinite alternate; opacity: 0; } .totalTit .worlds .aq1{ background: url(ds1.png) no-repeat center center; animation: .8s linear 0.8s normal none infinite running Flicker; -webkit-animation: .8s linear 0.8s normal none infinite running Flicker; } .totalTit .worlds .aq2{ background: url(ds2.png) no-repeat center center; animation: .6s linear 1s normal forwards infinite running pIn; -webkit-animation: .6s linear 1s normal forwards infinite running pIn; } .totalTit .worlds .aq3{ background: url(ds3.png) no-repeat center center; animation: .2s linear 0s normal none infinite running FlickerSec; -webkit-animation: .2s linear 0s normal none infinite running FlickerSec; } .totalTit .worlds .aq4{ background: url(ds4.png) no-repeat center center; animation: .4s linear 0s normal forwards infinite running pOut; -webkit-animation: .4s linear 0s normal forwards infinite running pOut; } /*@keyframes opact1 { 0% {opacity: 1;} 40% {opacity: 0;} 100% {opacity: 1;} } @-webkit-keyframes opact1 { 0% {opacity: 1;} 40% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes opact1 { 0% {opacity: 1;} 40% {opacity: 0;} 100% {opacity: 1;} }*/ @keyframes opact2 { 0% {opacity: 0;} 20% {opacity: 1;} 40% {opacity: 0;} 60% {opacity: 1;} 100% {opacity: 0;} } @-webkit-keyframes opact2 { 0% {opacity: 0;} 20% {opacity: 1;} 40% {opacity: 0;} 60% {opacity: 1;} 100% {opacity: 0;} } @-moz-keyframes opact2 { 0% {opacity: 0;} 20% {opacity: 1;} 40% {opacity: 0;} 60% {opacity: 1;} 100% {opacity: 0;} } @keyframes Flicker { 0% {opacity: 0.5;} 10% {opacity: 0;} 15% {opacity: 1;} 25% {opacity: 0;} 40% {opacity: 0.8;} 45% {opacity: 1;} 60% {opacity: 0.8;} 100% {opacity: 0;} } @-webkit-keyframes Flicker { 0% {opacity: 0.5;} 10% {opacity: 0;} 15% {opacity: 1;} 25% {opacity: 0;} 40% {opacity: 0.8;} 45% {opacity: 1;} 60% {opacity: 0.8;} 100% {opacity: 0;} } @-moz-keyframes Flicker { 0% {opacity: 0.5;} 10% {opacity: 0;} 15% {opacity: 1;} 25% {opacity: 0;} 40% {opacity: 0.8;} 45% {opacity: 1;} 60% {opacity: 0.8;} 100% {opacity: 0;} } @keyframes pIn { 0% {opacity: 1;} 100% {opacity: 0;} } @-webkit-keyframes pIn { 0% {opacity: 1;} 100% {opacity: 0;} } @-moz-keyframes pIn { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes FlickerSec { 0% { opacity: 0.5;} 10% {opacity: 0;} 15% {opacity: 1;} 25% { opacity: 0;} 40% {opacity: 0.8;} 45% {opacity: 1;} 60% {opacity: 0.8;} 100% {opacity: 0;} } @-webkit-keyframes FlickerSec { 0% { opacity: 0.5;} 10% {opacity: 0;} 15% {opacity: 1;} 25% { opacity: 0;} 40% {opacity: 0.8;} 45% {opacity: 1;} 60% {opacity: 0.8;} 100% {opacity: 0;} } @-moz-keyframes FlickerSec { 0% { opacity: 0.5;} 10% {opacity: 0;} 15% {opacity: 1;} 25% { opacity: 0;} 40% {opacity: 0.8;} 45% {opacity: 1;} 60% {opacity: 0.8;} 100% {opacity: 0;} } @keyframes pOut { 0% {opacity: 0;} 100% {opacity: 1;} } @-webkit-keyframes pOut { 0% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes pOut { 0% {opacity: 0;} 100% {opacity: 1;} } .aboutclmax{ position: absolute; left: 50%; top: 50%; margin-top: -287px; margin-left: -444px; width: 888px; height: 574px; text-align: center; display: table; } .imglogo{ display: inline-block; width: 280px; height: 270px; position: relative; z-index: 9;} .imglogo img{ display: inline-block; margin-top: -60px; opacity: 0; transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); transition: all .6s ease-out .5s; -webkit-transition: all .6s ease-out .5s; -moz-transition: all .6s ease-out .5s; } .imglogo .text{ display: inline-block; width: 0px; height: 30px; margin-top: 15px; overflow: hidden; transition: width 3s ease 1s; -webkit-transition: width 3s ease 1s; -moz-transition: width 3s ease 1s; position: absolute; left: 50%; margin-left:-93px; top: 184px; } .imglogo .text P{ display: inline-block; width: 186px; height: 30px;} .imglogo .text P font, .imglogo .text P strong{ vertical-align: top; display: inline-block; margin: 0 2px; font-size: 30px; height: 30px; color: #fff;} .imglogo .text P font{ font-family: 'Conv_Square721BT-RomanCondensed';} .imglogo .text P strong{ font-family: 'Conv_helveticaneueltstd-xblkcn';} .imglogo .page2line{ width: 280px; height: 230px; position: absolute; left: 0; top: 25px; z-index: -1;} .imglogo .page2line .subpage{ fill: none; stroke: rgba(255,255,255,0.7); stroke-width: 3px; stroke-dasharray: 0,740; transition: all 5s ease-out 0s; -webkit-transition: all 5s ease-out 0s; -moz-transition: all 5s ease-out 0s; } .aboutTxt{ width: 100%; height: 0px; overflow: hidden; margin-top: 30px; transition: all 2.2s ease-out 2s; -webkit-transition: all 2.2s ease-out 2s; -moz-transition: all 2.2s ease-out 2s; } .aboutTxt p{ font-size: 14px; color: #D5D5D4; line-height: 1.8;} .IndexList{ width: 892px; margin: 0 auto; display: table; } .IndexList ul{ font-size: 0; padding-top: 50px;} .IndexList li{ display: inline-block; width: 25%; text-align: center; position: relative; transform: translateY(100px); -webkit-transform: translateY(100px); -moz-transform: translateY(100px); opacity: 0; } .IndexList li:nth-of-type(1){ transition: all 2s cubic-bezier(.1,.72,.22,1.35) 3.2s; -webkit-transition: all 2s cubic-bezier(.1,.72,.22,1.35) 3.2s; -moz-transition: all 2s cubic-bezier(.1,.72,.22,1.35) 3.2s; } .IndexList li:nth-of-type(2){ transition: all 2s cubic-bezier(.1,.72,.22,1.35) 3.4s; -webkit-transition: all 2s cubic-bezier(.1,.72,.22,1.35) 3.4s; -moz-transition: all 2s cubic-bezier(.1,.72,.22,1.35) 3.4s; } .IndexList li:nth-of-type(3){ transition: all 2s cubic-bezier(.1,.72,.22,1.35) 3.4s; -webkit-transition: all 2s cubic-bezier(.1,.72,.22,1.35) 3.4s; -moz-transition: all 2s cubic-bezier(.1,.72,.22,1.35) 3.4s; } .IndexList li:nth-of-type(4){ transition: all 2s cubic-bezier(.1,.72,.22,1.35) 3.6s; -webkit-transition: all 2s cubic-bezier(.1,.72,.22,1.35) 3.6s; -moz-transition: all 2s cubic-bezier(.1,.72,.22,1.35) 3.6s; } .IndexList li:after{ position: absolute; content: ''; right: 0; top: 8px; height: 90%; border-right: 1px solid #fff;} .IndexList li:last-child:after{ display: none;} .IndexList li i{ font-size: 16px; color: #fff;} .IndexList li span{ display: block; font-size: 13px; color: #fff; letter-spacing: 4px; padding-top: 5px; text-shadow: 0 0 1px #fff; transition: all .5s ease 0s; -webkit-transition: all .5s ease 0s; -moz-transition: all .5s ease 0s; } .NumContent{ height: inherit; display: inherit; overflow: hidden; position: relative; line-height: inherit; font-size: inherit;} .NumContent>div{line-height: inherit; color: inherit; font-size: inherit; display: inline-block;} .NumContent>div>div{line-height: inherit; color: inherit; font-size: inherit;} .NumContent>div:nth-child(1){ transition: all 1.5s cubic-bezier(.35,.75,.55,1); -webkit-transition: all 1.5s cubic-bezier(.35,.75,.55,1); -moz-transition: all 1.5s cubic-bezier(.35,.75,.55,1); } .NumContent>div:nth-child(2){ transition: all 1.5s cubic-bezier(.35,.75,.55,1) .2s; -webkit-transition: all 1.5s cubic-bezier(.35,.75,.55,1) .2s; -moz-transition: all 1.5s cubic-bezier(.35,.75,.55,1) .2s; } .NumContent>div:nth-child(3){ transition: all 1.5s cubic-bezier(.35,.75,.55,1) .4s; -webkit-transition: all 1.5s cubic-bezier(.35,.75,.55,1) .4s; -moz-transition: all 1.5s cubic-bezier(.35,.75,.55,1) .4s; } .NumContent>div:nth-child(4){ transition: all 1.5s cubic-bezier(.35,.75,.55,1) .6s; -webkit-transition: all 1.5s cubic-bezier(.35,.75,.55,1) .6s; -moz-transition: all 1.5s cubic-bezier(.35,.75,.55,1) .6s; } .NumContent>div:nth-child(5){ transition: all 1.5s cubic-bezier(.35,.75,.55,1) .8s; -webkit-transition: all 1.5s cubic-bezier(.35,.75,.55,1) .8s; -moz-transition: all 1.5s cubic-bezier(.35,.75,.55,1) .8s; } .nub{ font-size: 56px; color: #fff; line-height: 56px; height: 56px; display: inline-block; font-family: 'Conv_Reducto Condensed SSi Condensed';} .IndexList li:hover .nub{ color: #999999;} .IndexList li:hover span{ color: #999999; text-shadow: 0 0 1px #999999;} .aboutclmax.active .imglogo .page2line .subpage{stroke-dasharray: 740,0;} .aboutclmax.active .imglogo img{opacity: 1; transform: scale(1.0); -webkit-transform: scale(1.0); -moz-transform: scale(1.0); } .aboutclmax.active .imglogo .text{width: 186px;} .aboutclmax.active .aboutTxt{height: 102px;} .aboutclmax.active .IndexList li{opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); } .theMoves{ position: absolute; left: 50%; top: 50%; margin-left: -600px; margin-top: -216px; width: 1200px; height: 432px; transform: translateY(100px); -webkit-transform: translateY(100px); -moz-transform: translateY(100px); transition: all 1s ease-in-out 0s; -webkit-transition: all 1s ease-in-out 0s; -moz-transition: all 1s ease-in-out 0s; opacity: 0; } .theMoves.active{ transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); opacity: 1; } .moviesPhoto{ width: 100%; height: 432px;} .moviesPhoto .swiper-slide{} .moviesPhoto .swiper-slide:nth-of-type(odd) .neislide{ transform: translateY(60px); -webkit-transform: translateY(60px); -moz-transform: translateY(60px); } .moviesPhoto .swiper-slide .neislide{ width: 100%; height: 360px; position: relative;} .moviesPhoto .swiper-slide .neislide img{ display: block; width: 100%; height: 100%;} .moviesPhoto .swiper-slide .neislide .morbox{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: table; background-color: #000; background-color: rgba(0,0,0,0.85); transition: all .8s ease 0s; -webkit-transition: all .8s ease 0s; -moz-transition: all .8s ease 0s; opacity: 0; } .moviesPhoto .swiper-slide .neislide .morbox:before{ position: absolute; content: ''; left: 0; top: 0; width: 0px; height: 0px; border-top: 2px solid #FAC840; border-left: 2px solid #FAC840; } .moviesPhoto .swiper-slide .neislide .morbox:after{ position: absolute; content: ''; right: 0; bottom: 0; width: 0px; height: 0px; border-bottom: 2px solid #FAC840; border-right: 2px solid #FAC840; } .moviesPhoto .swiper-slide .neislide .morbox:before, .moviesPhoto .swiper-slide .neislide .morbox:after{ opacity: 0; transition: all 1s ease .6s; -webkit-transition: all 1s ease .6s; -moz-transition: all 1s ease .6s; } .moviesPhoto .swiper-slide .neislide .morbox .sub{ width: 100%; text-align: center; display: table-cell; vertical-align: middle; transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); opacity: 0; transition: all .6s ease .2s; -webkit-transition: all .6s ease .2s; -moz-transition: all .6s ease .2s; } .moviesPhoto .swiper-slide .neislide .morbox .sub h4{ font-size: 18px; font-weight: bold; color: #fff;} .moviesPhoto .swiper-slide .neislide .morbox .sub font{ display: block; margin: 5px 0 15px; width: 100%; font-size: 13px; color: #544B4B;} .moviesPhoto .swiper-slide .neislide .morbox .sub a{ display: inline-block; width: 96px; height: 47px; border: 1px solid #373637; line-height: 47px; color: #fff; font-family: 'arial'; font-weight: bold; } .moviesPhoto .swiper-slide .neislide .morbox .sub a:hover{ color: #000; background-color: #FAC840; border-color: #FAC840;} .moviesPhoto .swiper-slide .neislide:hover .morbox{ opacity: 1;} .moviesPhoto .swiper-slide .neislide:hover .morbox:before, .moviesPhoto .swiper-slide .neislide:hover .morbox:after{ width: 50px; height: 78px; opacity: 1;} .moviesPhoto .swiper-slide .neislide:hover .morbox .sub{ opacity: 1; transform: scale(1.0); -webkit-transform: scale(1.0); -moz-transform: scale(1.0); } .starPeople{ width: 1200px; height: 362px; position: absolute; left: 50%; margin-left: -600px; top: 50%; margin-top: -181px; transform: translateY(100px); opacity: 0; transition: all 1s ease-in-out 0s; } .starPeople.active{ transform: translateY(0px); opacity: 1; } .starPeople .starphoto article{ position: relative; width: 100%; height: auto; overflow: hidden;} .starPeople .starphoto article img{ display: block; width: 100%; height: auto;} .starPeople .starphoto .textg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); text-align: center; opacity: 0; transition: all .5s ease 0s; -webkit-transition: all .5s ease 0s; -moz-transition: all .5s ease 0s; } .starPeople .starphoto .textg:before, .starPeople .starphoto .textg:after{ position: absolute; content: ''; transition: all 1.2s ease .3s; -webkit-transition: all 1.2s ease .3s; -moz-transition: all 1.2s ease .3s; opacity: 0; } .starPeople .starphoto .textg:before{ border-left: 2px solid #fac840; border-top: 2px solid #fac840; height: 0; left: 0; position: absolute; top: 0; width: 0; } .starPeople .starphoto .textg:after{ border-right: 2px solid #fac840; border-bottom: 2px solid #fac840; height: 0; right: 0; position: absolute; bottom: 0; width: 0; } .starPeople .starphoto .textg .neis{ position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); width: auto; height: 0; overflow: hidden; } .starPeople .starphoto .textg h3{ font-size: 20px; color: #fff; margin-bottom: 5px;} .starPeople .starphoto .textg font{ font-size: 13px; font-family: 'arial'; color: #585858; text-transform: capitalize;} .starPeople .starphoto .textg i{ display: inline-block; margin-top: 15px; width: 170px; height: 1px; border-top: 1px solid #484848;} .starPeople .starphoto .textg p{ font-size: 14px; color: #DFDFDF; margin-bottom: 10px;} .starPeople .starphoto .textg em{font-size: 14px; color: #DFDFDF;} .starPeople .starphoto .mores{ width: 94px; height: 50px; margin: 25px auto 0; position: relative;} .starPeople .starphoto .mores font{ display: block; width: 100%; height:98%; position: absolute; left: 0; top: 0; text-align: center;} .starPeople .starphoto .mores font.name{ transition: all .6s ease 0s; -webkit-transition: all .6s ease 0s; -moz-transition: all .6s ease 0s; opacity: 1; } .starPeople .starphoto .mores font.name strong{ display: block; margin-bottom: 5px; font-size: 16px; color: #FFFFFF;} .starPeople .starphoto .mores font.name small{ font-size: 13px; color: #393A3B; font-family: 'arial';} .starPeople .starphoto .mores font.gd{ border-bottom: 1px solid #5C5C5C; line-height: 50px; transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); transition: all .6s ease 0s; -webkit-transition: all .6s ease 0s; -moz-transition: all .6s ease 0s; opacity: 0; } .starPeople .starphoto .mores font.gd i{ font-size: 14px; font-family: arial;} .starPeople .starphoto .swiper-slide:hover .textg{ opacity: 1;} .starPeople .starphoto .swiper-slide:hover .neis{ height: 165px; transition: all .8s ease .3s; -webkit-transition: all .8s ease .3s; -moz-transition: all .8s ease .3s; } .starPeople .starphoto .swiper-slide:hover .textg:after, .starPeople .starphoto .swiper-slide:hover .textg:before{width: 33px; height: 49px; opacity: 1;} .starPeople .starphoto .swiper-slide:hover .mores font.name{ opacity: 0; transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); } .starPeople .starphoto .swiper-slide:hover .mores font.gd{ opacity: 1; transform: scale(1.0); -webkit-transform: scale(1.0); -moz-transform: scale(1.0); } .teamPhoto{ width: 1200px; height: 480px; position: absolute; left: 50%; top: 50%; margin-left: -600px; margin-top: -240px; z-index: 9;} .teamPhoto:before, .teamPhoto:after{position: absolute; content: ''; z-index: -1;} .teamPhoto:before{width: 3000px; height: 99.9%; top: 0%; left: 50%; margin-left: -1500px; border-top: 1px solid #695751; border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid #695751; border-bottom: 1px solid rgba(255,255,255,0.2); } .teamPhoto:after{width: 99.9%; height: 2000px; left: 0%; top: 50%; margin-top: -1000px; border-left: 1px solid #695751; border-left: 1px solid rgba(255,255,255,0.2); border-right: 1px solid #695751; border-right: 1px solid rgba(255,255,255,0.2); } .teamPhoto .peophoto{ height: 100%;} .teamPhoto .peophoto a{ display: block; position: relative; left: 0; top: 0; width: 100%; height: 100%;} .teamPhoto .peophoto img{ display: block; width: 100%; height: 50%; position: absolute; left: 0; top: 0; filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); opacity: 0; } .teamPhoto .peophoto .peoName{ display:table; position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; z-index: 2; transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); opacity: 0; transition: all .5s ease-in-out .5s; -webkit-transition: all .5s ease-in-out .5s; -moz-transition: all .5s ease-in-out .5s; } .teamPhoto .peophoto .peoName:after{ position: absolute; content: ''; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; background-color: transparent;} .teamPhoto .peophoto .peoName .peotextg{ display: table-cell; vertical-align: middle; width: 100%; text-align: center;} .teamPhoto .peophoto .peoName .peotextg h4{width: 100%; font-size: 24px; color: #fff; font-family: 'Myriad Pro'; margin-bottom: 10px;text-transform: uppercase;} .teamPhoto .peophoto .peoName .peotextg i{ display: inline-block; width: 30px; height: 2px; background-color: #999999;} .teamPhoto .peophoto .peoName .peotextg font{display: inline-block; width: 100%; font-size: 16px; color: #fff; } .teamPhoto .peophoto img, .teamPhoto .peophoto .peoName:after, .teamPhoto .peophoto .peoName .peotextg i{ transition: all .5s ease-in-out 0s; -webkit-transition: all .5s ease-in-out 0s; -moz-transition: all .5s ease-in-out 0s; } .teamPhoto .peophoto .swiper-slide:hover img{ filter: grayscale(0%); -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); } .teamPhoto .peophoto .swiper-slide:hover .peoName:after{ background-color: #999999;} .teamPhoto .peophoto .swiper-slide:hover .peoName .peotextg i{ background-color: #fff;} .teamPhoto .peophoto .swiper-slide:nth-of-type(even) img{ top: auto; bottom: 0;} .teamPhoto .peophoto .swiper-slide:nth-of-type(even) .peoName{ top: 0; bottom: auto;} .teamPhoto.active .peophoto .peoName, .teamPhoto.active .peophoto img{ transform: scale(1.0); -webkit-transform: scale(1.0); -moz-transform: scale(1.0); opacity: 1; } .ourNews{ width: 1200px; height: 424px; position: absolute; left: 50%; margin-left: -600px; top: 50%; margin-top: -212px; z-index: 2; display: table;} .ourNews:after{ width: 3000px; height: 100%; position: absolute; content: ''; left: 50%; top: 0; margin-left: -1500px; z-index: -1; border-top: 1px solid #695751; border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid #695751; border-bottom: 1px solid rgba(255,255,255,0.2); } .ourNews .left_news_cont{ float: left; width: 720px; height: 100%;} .ourNews .left_list_cont{ float:left; width: 520px; height: 100%; position: relative; z-index: 2; transform: translateX(50px); -webkit-transform: translateX(50px); -moz-transform: translateX(50px); } .ourNews .left_list_cont:after{ position: absolute; content: ''; left: 0; top: 50%; margin-top: -1000px; height: 2000px; z-index: -1; border-left: 1px solid #695751; border-left: 1px solid rgba(255,255,255,0.2); } .ourNews .left_list_cont .newList{ height: 524px;} .ourNews .left_list_cont .newList ul{ width: 100%; height: 100%; display: table;} .ourNews .left_list_cont .newList ul li{ width: 100%; height: 61px; line-height:5px; position: relative; border-bottom: 1px solid #7D7C7C; box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 20px; padding-top: 30px; z-index: 2; overflow: hidden; } .ourNews .left_list_cont .newList ul li a{ display: block;} .ourNews .left_list_cont .newList ul li time{ width:90px; float:right; font-size: 15px; color: #C1C0BD; display: block; font-family: 'Conv_Square721BT-RomanCondensed';} .ourNews .left_list_cont .newList ul li p{ float:left; font-size: 15px; color: #fff;} .ourNews .left_list_cont .newList ul li i{ position: absolute; right: 20px; top: 38px; font-size: 42px; color: #2D2728; opacity: 0; transform: translateX(-50px); -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); } .ourNews .left_list_cont .newList ul li, .ourNews .left_list_cont .newList ul li time, .ourNews .left_list_cont .newList ul li p, .ourNews .left_list_cont .newList ul li:after{ transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; } .ourNews .left_list_cont .newList ul li:hover{ border-color: #999999;} .ourNews .left_list_cont .newList ul li:hover:after{ transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); } .ourNews .left_list_cont .newList ul li:hover time, .ourNews .left_list_cont .newList ul li:hover p{ color: #272728;} .ourNews .left_list_cont .newList ul li:hover i{ opacity: 1; transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transition: all 1s ease .5s; -webkit-transition: all 1s ease .5s; -moz-transition: all 1s ease .5s; } .ourNews .left_list_cont img{ transition: all 1s ease-in-out 0s; -webkit-transition: all 1s ease-in-out 0s; -moz-transition: all 1s ease-in-out 0s; opacity: 0; } .ourNews.active .left_list_cont img{ transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); opacity: 1; } .left_list_cont .news-prev, .left_list_cont .news-next{ width: 61px; height: 61px;} .left_list_cont .news-prev{ background: url(ll2.png) no-repeat left top; left: 2px; bottom: 0; margin-top: auto; top: auto;} .left_list_cont .news-prev:hover{ background: url(ll1.png) no-repeat left top;} .left_list_cont .news-next{ background: url(ll1.png) no-repeat right top; left: 65px; bottom: 0; margin-top: auto; top: auto;} .left_list_cont .news-next:hover{ background: url(ll2.png) no-repeat right top;} .ourNews .right_list_cont{ float: right; width: 520px; height: 100%; position: relative; z-index: 2; transform: translateX(50px); -webkit-transform: translateX(50px); -moz-transform: translateX(50px); } .ourNews .right_list_cont:after{ position: absolute; content: ''; left: 0; top: 50%; margin-top: -1000px; height: 2000px; z-index: -1; border-left: 1px solid #695751; border-left: 1px solid rgba(255,255,255,0.2); } .ourNews .right_list_cont .newList{ height: 524px;} .ourNews .right_list_cont .newList ul{ width: 100%; height: 100%; display: table;} .ourNews .right_list_cont .newList ul li{ width: 100%; height: 61px; position: relative; border-bottom: 1px solid #7D7C7C; box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 20px; padding-top: 20px; z-index: 2; overflow: hidden; } .ourNews .right_list_cont .newList ul li:last-child{ border: none;} .ourNews .right_list_cont .newList ul li:after{ position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background-color: #999999; z-index: -1; transform: translateX(-105%); -webkit-transform: translateX(-105%); -moz-transform: translateX(-105%); } .ourNews .right_list_cont .newList ul li a{ display: block;} .ourNews .right_list_cont .newList ul li time{ width:90px; float:right; font-size: 15px; color: #C1C0BD; display: block; font-family: 'Conv_Square721BT-RomanCondensed';} .ourNews .right_list_cont .newList ul li p{ float:left; font-size: 15px; color: #fff;} .ourNews .right_list_cont .newList ul li i{ position: absolute; right: 20px; top: 38px; font-size: 42px; color: #2D2728; opacity: 0; transform: translateX(-50px); -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); } .ourNews .right_list_cont .newList ul li, .ourNews .right_list_cont .newList ul li time, .ourNews .right_list_cont .newList ul li p, .ourNews .right_list_cont .newList ul li:after{ transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; } .ourNews .right_list_cont .newList ul li:hover{ border-color: #999999;} .ourNews .right_list_cont .newList ul li:hover:after{ transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); } .ourNews .right_list_cont .newList ul li:hover time, .ourNews .right_list_cont .newList ul li:hover p{ color: #272728;} .ourNews .right_list_cont .newList ul li:hover i{ opacity: 1; transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transition: all 1s ease .5s; -webkit-transition: all 1s ease .5s; -moz-transition: all 1s ease .5s; } .ourNews .right_list_cont, .ourNews .left_news_cont dl dd, .ourNews .left_news_cont dl dt:after, .ourNews .left_news_cont dl dt img{ transition: all 1s ease-in-out 0s; -webkit-transition: all 1s ease-in-out 0s; -moz-transition: all 1s ease-in-out 0s; opacity: 0; } .ourNews.active .right_list_cont, .ourNews.active .left_news_cont dl dt:after, .ourNews.active .left_news_cont dl dt img{ transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); opacity: 1; } .right_list_cont .news-prev, .right_list_cont .news-next{ width: 61px; height: 61px;} .right_list_cont .news-prev{ background: url(ll2.png) no-repeat left top; left: 2px; bottom: 0; margin-top: auto; top: auto;} .right_list_cont .news-prev:hover{ background: url(ll1.png) no-repeat left top;} .right_list_cont .news-next{ background: url(ll1.png) no-repeat right top; left: 65px; bottom: 0; margin-top: auto; top: auto;} .right_list_cont .news-next:hover{ background: url(ll2.png) no-repeat right top;} .newList .newFyq{ width: 354px; height: 61px; background-color: #fff; bottom: 0; left: auto; right: 0; line-height: 61px; text-align: right; padding-right: 20px; font-size: 18px; font-family: 'Conv_Square721BT-RomanCondensed'; font-style: italic; box-sizing: border-box; -moz-box-sizing: border-box; } .newList .newFyq .swiper-pagination-current{ font-size: 24px;} .waperTit{ width: 100%; position: absolute; left: 0; top: 10%; text-align: center;} .waperTit h3{ font-size: 30px; color: #fff;} .waperTit p{ color: #D2D2D2; font-family: 'Conv_Square721BT-RomanCondensed'; font-size: 16px; margin-top: 5px;} .waperTit i{ display: inline-block; width: 33px; height: 3px; background-color: #fff; margin-top: 30px;} .aboutUs{ width: 1200px; height: 270px; position: absolute; left: 50%; margin-left: -600px; top: 50%; margin-top: -135px; z-index: 2;} .aboutUs:before{ width: 3000px; height: 100%; position: absolute; content: ''; left: 50%; margin-left: -1500px; z-index: -1; border-top: 1px solid #8F8E89; border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid #8F8E89; border-bottom: 1px solid rgba(255,255,255,0.2); } .aboutUs ul{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;display: table;} .aboutUs ul li{ float:left; width: 25%; height: 100%; display: table; position: relative;} .aboutUs ul li:after{ position: absolute; content: ''; right: 0; top: 0; height: 100%; border-right: 1px solid #8F8E89; border-right: 1px solid rgba(255,255,255,0.2); } .aboutUs ul li:last-child:after{ display: none;} .aboutUs ul li article{ display: table-cell; vertical-align: middle; transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); opacity: 0; transition: all .6s ease-in-out 0s; -webkit-transition: all .6s ease-in-out 0s; -moz-transition: all .6s ease-in-out 0s; } .aboutUs ul li i, .aboutUs ul li font, .aboutUs ul li span{ display: block; width: 100%; text-align: center;} .aboutUs ul li i{ color: #fff; font-size: 40px;} .aboutUs ul li font{ font-size: 18px; color: #fff; text-transform: uppercase; margin-top: 30px; font-family: 'Conv_Square721BT-RomanCondensed';} .aboutUs ul li span{ font-size: 14px; color: #BBBABA; line-height: 1.6; margin-top: 10px;} .qrCode{ width: 170px; position: absolute; left: 50%; margin-left: -85px; bottom: 5%; text-align: center;} .qrCode .opportunity{ display: block; width: 100%; height: 50px; border: 2px solid #9E9794; font-size: 20px; color: #fff; text-align: center; line-height: 50px;} .qrCode .opportunity:hover{ background-color: #999999; color: #fff; border-color: #999999;} .qrCode img{ display: inline-block; margin-top: 20px;} .aboutUs.active ul li article, .ourNews.active .left_news_cont dl dd{ transform: scale(1.0); -webkit-transform: scale(1.0); -moz-transform: scale(1.0); opacity: 1; } .totalTit.acitve .waperlines .sublines.phonesvg{ display: none;} .aboutUs ul li article{ display: table-cell; vertical-align: middle; transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); opacity: 0; transition: all .6s ease-in-out 0s; -webkit-transition: all .6s ease-in-out 0s; -moz-transition: all .6s ease-in-out 0s; } .contch{ width: 470px; height: 158px; position: absolute; left: 50%; margin-left: -235px; top: 50%; margin-top: -79px; display: none;} .contch .swiper-slide{ border-right: 1px solid #fff; border-right: 1px solid rgba(255,255,255,0.2);} .contch .swiper-slide:last-child{ border: none;} .contch .swiper-slide i, .contch .swiper-slide font, .contch .swiper-slide span{ display: block; width: 100%; text-align: center;} .contch .swiper-slide i{ color: #fff; font-size: 40px;} .contch .swiper-slide font{ font-size: 18px; color: #fff; text-transform: uppercase; margin-top: 30px; font-family: 'Conv_Square721BT-RomanCondensed';} .contch .swiper-slide span{ font-size: 17px; color: #BBBABA; line-height: 1.6; margin-top: 10px;}