/*reset*/
* {
	padding: 0;
	margin: 0;
}

@media (min-width:992px){
	.container{width:970px}
}
@media (min-width:1200px){
	.container{width:970px}
}

.hidden{visibility: hidden;}

img.full{display: block; width: 100%;}

.fullWidth{width: 100%;}

.box{display: -webkit-flex; display: flex;}
.flex-direction-row{flex-direction: row;}
.flex-direction-row-r{flex-direction: row-reverse;}
.flex-direction-column{flex-direction: column;}
.flex-direction-column-r{flex-direction: column-reverse;}
.flex-wrap-now{flex-wrap: nowrap}
.flex-wrap-wrap{flex-wrap: wrap}
.flex-wrap-wrap-r{flex-wrap: wrap-reverse}
.justify-content-start{justify-content: flex-start}
.justify-content-end{justify-content: flex-end}
.justify-content-center{justify-content: center}
.justify-content-between{justify-content: space-between}
.justify-content-around{justify-content: space-around}
.align-items-start{align-items: flex-start}
.align-items-end{align-items: flex-end}
.align-items-center{align-items: center}
.align-items-baseline{align-items: baseline}
.align-items-stretch{align-items: stretch}
.align-content-start{align-content: flex-start}
.align-content-end{align-content: flex-end}
.align-content-center{align-content: center}
.align-content-between{align-content: space-between}
.align-content-around{align-content: space-around}
.align-content-stretch{align-content: stretch}


/*css variables*/
:root {
	--thumbnail-width: 20px;
	--thumbnail-height: 3px;
	--shadow: rgba(0, 0, 0, .25);
}

html, body {
	/* height: 100%; */
	position: relative;
}

body {
	background: #fff;
}

#kvBanner{position: relative;}

#sections-wrapper {
	width: 100%;
	top: 0px; left: 0px;
	position: absolute;
	overflow: hidden;
	height: 100%;
	background: #fff;
}

section {
	height: 100%;
	font-size: 0;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.hide-bottom {
	transform: translateY(100%);
}

.hide-top {
	transform: translateY(-100%);
}

.segment {
	height: 100%;
	display: inline-block;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
}

.segment-inner {
	position: absolute;
	top: 0;
	background: no-repeat center center / cover; 
	height: 100%;
	width: 100vw;
}

.sections-control {
	text-align: center;
	font-size: 0;
	position: fixed;
	right: 25px;
	bottom: 25px;
	box-sizing: border-box;
	display: none;
}

.section-thumbnail {
	width: var(--thumbnail-width);
	height: var(--thumbnail-height);
	display: block;
	margin-top: 4px;
	padding: 4px 0;
	position: relative;
	transition: .3s all ease;
	opacity: 1;
	cursor: pointer;
	transform-origin: right top;
}

.section-thumbnail:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: var(--thumbnail-height);
	top: 50%;
	margin-top: calc(var(--thumbnail-height)/2 * -1);
	background: #fff;
}

.section-thumbnail:hover {
	opacity: 1;
}

.section-thumbnail.active {
	transform: scaleX(2);
	opacity: 1;©∫
}

ul, li{list-style: none; margin: 0px; padding: 0px;}


#main{width: 960px; margin: 0px auto;}

.selectList{
	padding: 0px 0px 10px;
	text-align: center;
}

.text-center{text-align: center;}


.clearfix:after { content: '\20'; display: block; height: 0; clear: both; }
.clearfix { *zoom: 1; }
.clear{clear:both;}

.top{height: 800px; width: 100%; background: url('/minisite/mobile_connect/images/top.jpg') center center no-repeat;}
.top img{display: none;}

.banner{height: 480px; width: 100%; background: url('/minisite/mobile_connect/images/banner01.jpg') center center no-repeat;}
.banner02{height: 420px; width: 100%; background: url('/minisite/mobile_connect/images/banner02.jpg') center center no-repeat;}
.banner img{display: none;}
.banner02 img{display: none;}

.video{height: 781px; width: 100%; background: url('/minisite/mobile_connect/images/imgnew04.jpg') center center no-repeat; position: relative;}
.video img{display: none;}
.videoMain{position: absolute; width: 100%; top: 20%;}
.videoBlock{width: 96%; margin: 0px auto;}
.videoBlock img{display: block;}

.wrap .content01,
.wrap .content02{position: relative;}

.wrap .content01 .content-block,
.wrap .content02 .content-block{width: 1000px; position: absolute; top: 0px; left: 50%; margin-left: -500px; height: 100%;}
.wrap .content02{max-height: 705px; overflow: hidden; min-height: 705px; background: #dcdcdc;}

.content-img-01{width: 64.6%; top: 15%; left: 2%; position: absolute;}
.content-img-02{width: 52.6%; top: 0px; left: 2%; position: absolute}

.content{width: 1000px; margin: 0px auto;}
.text{font-size: 20px; color: #808080; line-height: 1.5;}
.contentText01{width: 65%; margin: 40px auto; text-align: center;}

.main-content{width: 70%; margin: 80px auto;}
.main-content .text{width: 50%; float: left;}
.main-content .text p,
.main-content .text ul{padding: 0px 10px; margin-bottom: 10px;}
.main-content .text ul li{padding-left: 22px; margin-bottom: 10px; background: url('/minisite/mobile_connect/images/dot.jpg') left center no-repeat}
.main-content .text p,
.main-content .text li{font-size: 18px; color: #969696;}
.main-content .img{width: 50%; float: left;}
.main-content .img>div{padding: 0px 15px;}

.bottom{background: #dfe0fe; padding: 40px 0px;}
.bottom .content{width: 1000px; margin: 0px auto; position: relative}
.bottom-content{width: 70%; margin-left: 30%; position: relative;}
.bottom-content .icon{width: 60%; position: absolute; left: -70%;}
.bottom-content .title{font-size: 20px; color: #9696FF; margin-bottom: 40px;}
.bottom-content .listtext{margin-bottom: 40px;}
.bottom-content .listtext .img{width: 20%; float: left; }
.bottom-content .listtext .text{width: 75%; margin-left: 5%; padding-top: 40px; float: left; font-size: 20px; color: #969696;}

@media (max-width:768px){

	.wrap{width: 100%; overflow-x: hidden;}

	.top{height: auto; width: 100%; background: none; overflow: hidden}
	.top img{display: block; width: 160%; margin-left: -42%;}

	.banner{height: auto; width: 100%; background: none; overflow: hidden}
	.banner img{display: block; width: 170%; margin-left: -33%;}

	.banner02{height: auto; width: 100%; background: none; overflow: hidden}
	.banner02 img{display: block; width: 170%; margin-left: -46%;}

	.video{height: auto; width: 100%; background: none; overflow: hidden; position: relative;}
	.video>img{display: block; width: 180%; margin-left: -38%;}
	.videoMain{width: 90%; left: 5%;}

	.content{width: 100%;}
	.main-content{width: 100%; margin: 40px 0;}
	.main-content .text p,
	.main-content .text li{font-size: 12px; color: #969696;}
	
	.bottom{margin: 20px 0px;}
	.bottom .content{width: 100%;}
	.bottom-content{width: 100%; margin: 0px;}
	.bottom-content .title{padding: 10px; margin: 20px 0px; font-size: 14px; text-align: center;}
	.bottom-content .icon{width: 40%; display: block; position: static; margin: 0px auto;}
	.bottom-content .listtext{padding: 0px 10px;}
	.bottom-content .listtext .text{font-size: 12px; padding-top: 20px;}

	.text{font-size: 12px;}
	.contentText01{width: 70%; margin: 20px auto;}
}

/* footer style begin */

/* ft-sitemap style end */

.ft-menulist{font-size: 14px;}

.ft-menulist{background-color: #ffffff; padding: 1em 0;}
.ft-menulist ul, .ft-menulist li{padding: 0px; margin: 0px; list-style: none;}
.ft-menulist ul{text-align: center; font-size: 0px;}
.ft-menulist ul li{display: inline-block; font-size: 0px;}
.ft-menulist ul li a{display: inline-block; padding: 0px 10px; font-size: 14px; border-right: 1px solid #636363; font-size: 12px;}
.ft-menulist ul li:last-child a{border: 0px;}
.ft-menulist p{margin: 0.5em 0 0; font-size: 12px;}

@media (min-width:768px){
	.ft-menulist{padding: 4em 0;}
	.ft-menulist ul li a{font-size: 16px; padding: 0px 30px;}
	.ft-menulist p{font-size: 16px;}
}

.boxText{width: 53%;}
.boxImg{width: 47%;}
.color01{background: #e3e3e3;}

.boxText>div{padding: 0px 80px; width: 50%;}
.boxText h2{font-size: 32px; line-height: 1.5; margin-bottom: 20px; color: #13c8ff}
.boxText p{font-size: 18px; color: #808080; line-height: 1.5; margin-bottom: 20px;}

@media (max-width:1280px){
	.boxText>div{padding: 0px 40px; width: 50%;}
	.boxText h2{font-size: 20px; line-height: 1.5; margin-bottom: 20px; color: #13c8ff}
	.boxText p{font-size: 14px; color: #808080; line-height: 1.5; margin-bottom: 20px;}
}

.mobile{display: none;}
@media (max-width:768px){
	.mobile{display: block;}
	.pc{display: none;}
	.mobileMain{width: 140%; margin-left: -20%;}
}

.mobile .boxText,
.mobile .boxImg{
	width: 100%;
}

.mobile .boxText>div{padding: 20px 20px; width: 100%;}
/* footer style end */


video.full{display: block; width: 100%;}





























<!--0.00015091896057129-->