﻿.full-banner-container {
	position: relative
}
.full-banner-container .graylight-bg-container {
	position: absolute;
	bottom: 35px;
	width: 100%;
	z-index: 2;
	height: 220px
}
.full-banner-container .graylight-bg-container .section-wrap {
	position: relative
}
.full-banner-container .graylight-bg-container .section-wrap .graylight-bg {
	background: rgba(0,0,0,0.5);background:#000\9;
	height: 180px;
	width:90%; max-width:1200px;
}
.full-banner-container .graylight-bg-container .section-wrap .item-box .text { float: left; width:100%; padding-top: 25px; padding-left: 20px}
.full-banner-container .graylight-bg-container .section-wrap .item-box .text h3 { padding-bottom: 15px}
.full-banner-container .graylight-bg-container .section-wrap .item-box .text p { color: #ddd; font-size: 14px; line-height: 1.4em; width:50%}
.full-banner-container .graylight-bg-container .section-wrap .item-box .text .compare-phantoms a { font-size: 18px; float:right; color: #fff; text-align:right; font-size:14px}
.full-banner-container .graylight-bg-container .section-wrap .item-box .text .compare-phantoms a:hover { color: #c5c5c5}
.full-banner-container .graylight-bg-container .section-wrap .item-box .item1 {
	float: right;
	padding-top: 20px;
	padding-right: 20px
}
.full-banner-container .graylight-bg-container .section-wrap .item-box .text .syb_img{ margin:0px 20px}
.full-banner-container .graylight-bg-container .section-wrap .item-box .text .syb_ts{ width:760px}

@media screen and (max-width: 1300px){
	.full-banner-container .graylight-bg-container .section-wrap .item-box .text .syb_ts{ width:700px}
}
@media screen and (max-width: 1024px){
	.full-banner-container .graylight-bg-container .section-wrap .item-box .text p { color: #ddd; font-size: 14px; line-height: 1.4em; width:70%}

	.full-banner-container .graylight-bg-container .section-wrap .item-box .text .syb_ts{ width:450px}
}
.swiper-container {
  /*width: 100%;
  height: 954px;
  max-height: 954px;*/
  background: url(../images/loader.gif) center center no-repeat;
  -webkit-font-smoothing:antialiased;
}
/*.swiper-wrapper{
  height: 100%;
  opacity: 0;
}*/
.swiper-container:hover .swiper-button-white{
  opacity: 1;
}
.swiper-slide {
	position: relative;
  /*height: 100%;*/
  /*background:no-repeat center ;
  background-size: cover;*/
}
.swiper-slide .slider-detail{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}
.swiper-slide .slider-detail .slider-text{
	display: inline-block;
	box-sizing: border-box;
	vertical-align: middle;
	text-align: center;
	-webkit-transform: translate(0,-30px);
	transform: translate(0,-30px);
	opacity: 0;
	-webkit-transition: transform ease .7s, opacity ease .7s;
	transition: transform ease .7s, opacity ease .7s;
}
.swiper-wrapper .swiper-pagination{
	display: none;
}
.swiper-slide .slider-detail .slider-text.pc-show{
	display: inline-block;
}
.swiper-slide .slider-detail .slider-text.wap-show{
	display: none;
}
.swiper-slide .video-slogan{
	position: absolute;
	bottom: 40px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background: rgba(0,0,0,0.5);
	padding: 15px 20px;
	box-sizing: border-box;
	overflow: hidden;
}
.swiper-slide .video-slogan .slogan-text{
	width: 70%;
	box-sizing: border-box;
	float: left;
	padding-left: 20px;
	color: #fff;
	text-align: left;
}
.swiper-slide .video-slogan .slogan-text .logo-link{
	display: block;
	margin-bottom: 10px;
}
.swiper-slide .video-slogan .learn-more{
	color: #fff;
  position: absolute;
  bottom: 15px;
}
.swiper-slide .video-slogan .video-preview img{
	width: 100%;
}
.swiper-slide .video-slogan .slogan-text .logo-royolex{
	width: 150px;
	margin-bottom: 6px;
}
.swiper-slide .video-slogan .slogan-text .product-desc{
	padding-bottom: 24px;
	font-size: 15px;
	line-height: 1.4em;
}
.swiper-slide.swiper-slide-active .slider-detail .slider-text{
	opacity: 1;
	-webkit-transform: translate(0,0);
	transform: translate(0,0);
}
.swiper-slide .slider-detail .slider-text .banner-ctn-img{
	margin: 0 auto;
}
.swiper-slide .slider-detail .slider-text .slider-text-title{
	margin-bottom: 10px;
	font-size: 40px;
	font-weight: 500;
	color: #000;
}
.swiper-slide .slider-detail .slider-text .slider-text-desc{
	margin-bottom: 20px;
	font-size: 22px;
	color: #333;
	text-shadow: 1px 1px 1px rgba(255,255,255,.5);
}
.swiper-slide .slider-detail:after{
	content: " ";
	display: inline-block;
	width: 0;
	height: 100%;
	vertical-align: middle;
}
.swiper-slide .slider-imgs{
	width: 100%;
}
.swiper-slide .slider-detail .banner-royolex-slogan-mobile{
	display: none;
}
.swiper-slide .slider-detail .banner-royolex-slogan-pc{
	display: inline-block;
}
.swiper-slide .slider-caption{
  font-size: 48px;
  color: white;
  text-shadow: 0px 2px 0px rgba(51, 51, 51, 0.3);
  position: absolute;
  top: 40%;
  margin-top: -30px;
  font-weight: 300;
  transform: translateY(-30px);
  transition: 0.7s;
  opacity: 0; letter-spacing:8px; font-family:"方正兰亭超细黑","\5FAE\8F6F\96C5\9ED1" ,Verdana,"宋体";
}
.swiper-slide .slider-caption p{ margin-top:20px;letter-spacing:10px; font-size:24px}
.swiper-slide .video-slogan .video-preview{
	width: 30%;
}

@media screen and (max-width: 980px){
/*.full-banner-container { margin-top:-30%}*/
.full-banner-container .containter{ width:100%}
.full-banner-container .fL{ float:inherit}
.swiper-slide .slider-caption{
  font-size: 30px;
  color: white;
  text-shadow: 0px 2px 0px rgba(51, 51, 51, 0.3);
  position: absolute;
  top: 38%;
  margin-top: -30px;
  font-weight: 300;
  transform: translateY(-30px);
  transition: 0.7s;
  opacity: 0;letter-spacing:0px;
}
.swiper-slide .slider-caption p{ margin-top:14px;letter-spacing:0px; font-size:18}
.full-banner-container .graylight-bg-container .section-wrap .graylight-bg {
	background: rgba(0,0,0,0.5);
	height:auto;
	width: 100%;
}
.full-banner-container .graylight-bg-container .section-wrap .item-box .text { float:inherit; width:100%; padding-top: 25px; padding-left: 0px}

.full-banner-container .graylight-bg-container .section-wrap .item-box .text .syb_img{ margin:auto; width:90%;}
.full-banner-container .graylight-bg-container .section-wrap .item-box .text .syb_img img{ width:100%}
.full-banner-container .graylight-bg-container .section-wrap .item-box .text .syb_ts{ width:90%; margin:auto; padding:20px 0px; padding-bottom:50px}
/*.swiper-container {
  height: 954px;
  max-height: 954px;
  background: url(../images/loader.gif) center center no-repeat;
  -webkit-font-smoothing:antialiased;
}*/
.full-banner-container .graylight-bg-container .section-wrap .item-box .text h3 { padding-bottom: 15px}
.full-banner-container .graylight-bg-container .section-wrap .item-box .text p { color: #ddd; font-size: 14px; line-height: 1.4em; width:100%}
.full-banner-container .graylight-bg-container {
	position: absolute;
	bottom: -20px;
	width: 100%;
	z-index: 2;
	height:auto
}
.swiper-slide .slider-detail .banner-royolex-slogan-mobile{
	display: inline-block;
}
.swiper-slide .slider-detail .banner-royolex-slogan-pc{
	display: none;
}
.swiper-slide .video-slogan{
	display: none;
}
.swiper-wrapper .swiper-pagination{
	display: block;
}
.swiper-container:hover .swiper-button-white{
	display: none;
}
.swiper-slide .slider-imgs{
	width: 140%;
	margin-left: -20%;
}
.swiper-slide.swiper-slide-active .slider-detail .slider-text{
	max-width: 90%;
}
}

@media screen and (max-width: 414px){
	.swiper-slide .slider-detail .slider-text{
  	max-width: 98%;
		padding: 0 15px;
	}
	.swiper-slide .slider-detail .slider-text .slider-text-title{
		margin-bottom: 8px;
		font-size: 20px;
	}
	.swiper-slide .slider-detail .slider-text .slider-text-desc{
		margin-bottom: 10px;
		font-size: 14px;
	}
	.swiper-slide .textstyle{
		display: none;
		font-size: 14px;
	}
	.bn-btn-wh,.bn-btn-bl{
  	padding: 5px 16px !important;
	}
}

a.current{ color: red; font-weight: bold; }
