@charset "UTF-8";
/* CSS Document */
a:link, a:visited {
    color: #2e3e4a;
}
body {background-color: rgb(0, 0, 0);}
/*--------------------------Submenu---------------------------------*/
.submenuWrap { 
	position: absolute; 
	bottom: 50px; 
	width: 100%;
	z-index: 10;
	/*transition-property: width, left; 
	transition-duration: 1s, 1s ; */
}
.submenuBar {
	height: auto;
    margin: 0 auto;
    max-width: 1180px;
    position: relative;
	text-align:center;
	border: 1px solid #D7D5D5; 
	background: rgba(0,0,0,0.8);
	-webkit-border-radius: 5px;
     -khtml-border-radius: 5px;
	   -moz-border-radius: 5px;
            border-radius: 5px;
}
.itemWrap {
	margin: 20px auto 18px auto;
	display:inline-block;
}
.subItem{
	margin: 0 15px;
	font-size: 16px;
	letter-spacing: 5px;
	line-height: 25px;
	color:#FFFFFF;
	display:inline-block;
}
.subItem a { color:#FFFFFF;}
/*---------------------------------Sections--------------------------------- */
#fullPageScroll {
	bottom: 0;
    left: 0;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 70px;
    width: 100%;
	/*background:#DDDACB;*/
}
/*-----------------------Scroll Down Button-----------------*/
.downArrWrap { position:absolute; bottom: 1%; width:100%; height:40px; text-align:center; z-index: 20; transition:all 1s linear; 
	animation: arrowAni 3s ease-out infinite;
    -moz-animation: arrowAni 3s ease-out infinite;
    -webkit-animation: arrowAni 3s ease-out infinite;
    -o-animation: arrowAni 3s ease-out infinite; 
}
.downArr { 
	display: inline-block; 
	width:40px; 
	height: 40px;
}
@keyframes arrowAni {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}
@-moz-keyframes arrowAni {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}
@-webkit-keyframes arrowAni {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}
@-o-keyframes arrowAni {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}

/*--------------------------------------Title Bar-------------------------------------*/
.fullConWrap { position:absolute; top:0; bottom:0; left: 0; right: 0; width: 100%; box-sizing:border-box;}
.serviceTitBar { position:relative; width: 380px;  height: auto; color:#e7e7ef ; font-size: 28px; letter-spacing: 5px; line-height: 35px; padding: 12px 0 10px; background:#000000; z-index: 1; margin: 0 auto; -webkit-box-shadow: 1px 1px 10px 0px rgba(41,35,33,0.4); -moz-box-shadow: 1px 1px 10px 0px rgba(41,35,33,0.4); box-shadow: 1px 1px 10px 0px rgba(41,35,33,0.4); }
.serviceTitBar.otg { 
	/* background: #3e867e; */
	background-color: rgba(176, 25, 8, 0.9); 
}
.serviceTitBar.screen { 
	background: #4b2d6f; 
}
.serviceTitBar.mine { /*background: #c29a28;*/ background:#469312; }
.serviceTitBar.news { background: #484fad; }
.serviceTitBar.history { background: #4f3a3e; }
.serviceTitBar.memory { background: #b91f80; }
.serviceTitBar.vox { background: #5996d1; }
.serviceTitBar.cube { background: #57832a; }
.serviceTitBar.ad { background: rgba(51, 123, 134, 0.9);}
.secTitleEn { font-size: 18px;}
.secTitleCh p {font-size: 22px;}
/*-----------------------------------Introduction----------------------------------*/

/*----------------------------------8 block layout------------------------------------*/
.introWrap { width: 100%; height: 100%; text-align: center; }
.fullPicsWrap {position:absolute; top:0; width: 100%; height: 100%; }
.cubeWrap { 
	position:absolute; width:80%; height:55%; 
	top:50%; left:50%; 
	transform: translate(-50%, -50%); 
	text-align:center;
	/* background-color: #9acb69;   */
}
.topRow { position:absolute; width: 100%; }
.leftRow { position:absolute; width: 100%; }
.rightRow { position:absolute; width: 100%; }
.appCube { position:relative; float:left; width: 15%; padding-bottom: 15%; margin-right:6%; }
.appCube.fir { 
	/* margin: 0 42.5%; */
	margin: 0 38%;  
	z-index:4; 
}
.appCube.sec { 
	/* margin: -4.5% 6% 0 32%; */
	margin: -4.5% 6% 0 27.5%;
	z-index:3; 
}
.appCube.trd { 
	margin: -4.5% 30% 0 0; 
	z-index:2; 
}
.appCube.fou { 
	margin: -4.5% 0 0 42.5%; 
	z-index:1; 
}
.appCube.leftFir { 
	/* margin: 0 63% 0 21.5%; */
	margin: 0 63% 0 17%;  
	z-index:2; 
}
.appCube.leftSec { 
	margin: -4.5% 63% 0 11.1%; 
	z-index:1;  
}
.appCube.rightFir { 
	/* margin: 0 0 0 63.5%; */
	margin: 0 0 0 59%;
	z-index:1; 
}
.appCube.rightSec { 
	/* margin: -4.5% 0 0 74%;  */
	margin: -4.5% 0 0 69.5%;
}
.appCubeBack { 
	position:relative;
	position:absolute;
	top:0;  
	width:100%; 
	transform: rotate(45deg); 
	-webkit-box-shadow: 6px 4px 25px -1px rgba(0,0,0,0.75);
	-moz-box-shadow: 6px 4px 25px -1px rgba(0,0,0,0.75);
	box-shadow: 6px 4px 25px -1px rgba(0,0,0,0.75);
}
.appCubeBack.otg { transform: rotate(-45deg);}
.appConWrap{ position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); text-align:center; width: 100%;}
.appCon { 
	width: 50%; 
	display:inline-block;
	
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	 
	-webkit-box-shadow: 6px 4px 25px -1px rgba(0,0,0,0.75);
	-moz-box-shadow: 6px 4px 25px -1px rgba(0,0,0,0.75);
	box-shadow: 6px 4px 25px -1px rgba(0,0,0,0.75); 
}
.appName { width: 100%; margin-top: 10px; color:#EFEFEF; font-size: 14px; letter-spacing: 3px; line-height: 18px; }


/*-------------------------------Nav Dot-------------------------------*/
.navDotWrap { position:fixed; text-align:right; right: 20px; top: 50%; z-index: 1000; transform: translate(0, -50%); /*overflow: hidden;*/}
.dotWrap { position:relative; margin-bottom: 15px; float:right;}
.navDot { float:left; width: 8px; height: 8px; background: rgba(255,255,255, 0.9);  -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;  -webkit-box-shadow: 1px 1px 2px 0px rgba(41,35,5,0.4); -moz-box-shadow: 1px 1px 2px 0px rgba(41,35,5,0.4); box-shadow: 1px 1px 2px 0px rgba(41,35,33,0.4);}
a.active .navDot { background: rgba(188,57,31,1.00); }
a.main.active .navDot { background: rgba(188,57,31,1.00); }
a.onTheGo.active .navDot { background: rgba(188,57,31,1.00); }
a.screen.active .navDot { background: rgba(188,57,31,1.00); }
a.mine.active .navDot { background: rgba(188,57,31,1.00); }
a.news.active .navDot { background: rgba(188,57,31,1.00); }
a.ad.active .navDot { background: rgba(188,57,31,1.00); }
a.history.active .navDot { background: rgba(188,57,31,1.00); }
a.memory.active .navDot { background: rgba(188,57,31,1.00); }
a.vox.active .navDot { background: rgba(188,57,31,1.00); }
a.cube.active .navDot { background: rgba(188,57,31,1.00); }

.navTag {
	color: white;
    font-size: 2px;
	white-space: nowrap;
    margin: -8px -20px 0 0;
    opacity: 0;
    padding: 6px 30px 3px 15px;

	position:absolute;
	letter-spacing: 3px;
	background: rgba(44,47,60,0.6);
	z-index: -1;
	
	/*transform: scale(0.3);*/
	transform: translate(0, 0);
    /*transform-origin: 100% 50% 0;*/
    /*transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;*/
	transition: all 0.3s ease;
	text-shadow: 1px 1px 1px #000;
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; 
}
.navTag.show { opacity: 1; transform: translate(-85%, 0); font-size: 15px; }

/*---------------------------------Phone Slide----------------------------------*/
.slideWrap { position: relative; width: 100%; height:100%; text-align:center; overflow: hidden; box-sizing:border-box; }
.fullSlideWrap { position:absolute; top:0; bottom:0; left: 0; right: 0; width: 100%; box-sizing:border-box;}
.appPanelWrap { position:absolute; top:0; height: 100%; overflow: hidden;  width: 100%; }
.slideConWrap { position:absolute; width:60%; height:65%; top:45%; left:50%; transform: translate(-50%, -50%); text-align:center; }
.slideConWrap.news { width:100%; height: 100%; bottom: 0; top: 0; left: 0; right:0; transform:none; }
.leftBlo { float:left; width: 50%; height: 100%; position:absolute; z-index: 100; }
.leftBlo.otgPhone { width: 40%; height: auto; left: 0; }
.leftBlo.screenPhone { position:relative; float:right; width: 50%; }
.leftBlo.mine { width: 32%;}
.leftBlo.news { width: 100%; height:auto; right:0; bottom: 0; }
.leftBlo.history { width: 32%;}
.leftBlo.memory { position:relative; float:right; width: 32%; }
.leftBlo.cube { position:relative; width: 52%; float:right; }
.leftBlo.vox { width: 60%; height:auto; }
.phoneApos { float: right; width: 43%;}
.phoneBpos { float: left; width: 43%; margin: 30% 14% 0 0;}

.conBlo { position:relative; float:right; width: 100%; height: 100%; margin: 0; }
.conBlo.news { padding-left:20%; width: 80%;}
.appGistWrap { float:right; width: 35%; margin-top: 10%; padding: 2%; background: rgba(255,255,255,0.6) ;-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; transition: all 0.3s ease }
.appGistWrap.screen{ background: rgba(255, 255, 255, 0.4); }
.appGistWrap.fL { float: left; }
.appGistWrap.mine { background: #6ea08738; }
.appGistWrap.news { margin-top: 20%; }
.appGistWrap.history { background: rgba(236,233,220,0.5); }
.appGistWrap.cube { float:left;  }

.topGistBlo { position:relative; width: 100%; padding: 0 0 15px 0; border-bottom: 1px solid #BCC4CC; }
.topGistBlo.tv { border-bottom: 1px solid #e2dbdb; }
.topGistBlo.history { border-bottom: 1px solid #A18A8B;}
.topGistBlo.vox { border-bottom: 1px solid #C2CBCC;}
.storeIconBlo { position:absolute; right:0; bottom: 15px; float: right;}
.storeIconBlo.mine a { /*color:#F3E29F;*/ color: #DADCC4; }
.storeIcon { float: left; height: 20px; font-size:14px; letter-spacing: 5px; margin: 0 0 0 10px; padding: 6px 6px 0 10px; text-align:center; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;  border: 1px solid #FFFFFF;}
.storeIcon.scr { color: #534366; border: 1px solid #534366;}
.storeIcon.blk { border: 1px solid #595757;}
.storeIcon.mine.ios, .storeIcon.mine.and { background:#2F302800;}
.storeIcon.history { background:#2F302800; color: #4f3a3e;}

.bottomGistBlo { position:relative; width: 100%; padding: 15px 0 0 0; font-size: 14px; letter-spacing: 5px; line-height: 24px; text-align:left; color: #313A43; }
.bottomGistBlo.scr { color:#534366;}
.bottomGistBlo.eng { letter-spacing: 3px;}
.bottomGistBlo.mine { color:#EDEDED; }
.bottomGistBlo.mine a { color:#EDEDED; }
.appLogo { float: left; width: 80px; -webkit-box-shadow: 1px 1px 10px 0px rgba(41,35,33,0.4); -moz-box-shadow: 1px 1px 10px 0px rgba(41,35,33,0.4); box-shadow: 1px 1px 10px 0px rgba(41,35,33,0.4); -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 20px; }
.detail { display:inline; padding: 5px 5px 0 0; }
.detail.scr { color: #534366; }
.detailArr { display:inline; font-size: 20px; padding: 5px 0 0 0; vertical-align:bottom; }
.detailArr.scr { color: #534366; }
.moreGistBtn { text-align:right; width: 80%; }
.moreGistBtn.eng { font-size: 13px; }
.appsPics { display: none; }
.dingB {font-size: 14px; opacity: 0.6; vertical-align: top; }
.detLink.mine a { /*color:#F3E29F;*/ color: #F7FCF4; }


.cubeWrap.Hori { 
	display: block;
	/* display: none;  */
}
.cubeWrap.padLand { display: none; }
.cubeWrap.Hori-Squ { 
	/* display: none; */
	display: none; 
}
.cubeWrap.Vert { 
	display: none; 
}
.cubeWrap.VertHP { display: none;}


@media screen and (max-width: 1640px) {
.cubeWrap {
	width: 90%;
	height: 40%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.appConWrap {
	width: 100%;
  }

 /*---------------------------------Phone Slide----------------------------------*/
.slideConWrap.cube { width:70%; top:55%; left:50%; transform: translate(-50%, -50%); }
.leftBlo.otgPhone { width: 50%; }
.leftBlo.mine { width: 32%; margin-top: 10%; }
.leftBlo.news { width: 100%; }
.leftBlo.history { width: 38%; margin-top: 7%; }
.leftBlo.memory {  width: 40%; }
.leftBlo.vox { width: 70%; }
.leftBlo.cube { width: 58%; }
}
@media screen and (max-width: 1440px) {
 /*---------------------------------Phone Slide----------------------------------*/
.slideConWrap.cube { width:70%; top:48%; }
}

/*--------------- ipad portrait ----------------*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1280px) 
and (orientation : portrait) {
	.cubeWrap.Vert .appCube { 
		width: 28%;
		padding-bottom: 20%;
		/* margin-right:6%;  */
	}
	.cubeWrap.Vert .leftRow { margin: 0 0 0 0; }
	.cubeWrap.Vert .rightRow { margin: 0 0 0 0; }
	.cubeWrap.Vert .appCube.fir { margin: 39% 37.5% 0 37.5%; }
	.cubeWrap.Vert .appCube.leftFir { margin: 0 0 0 37.5%; }
	.cubeWrap.Vert .appCube.trd { margin: 0 0 0 0; }
	.cubeWrap.Vert .appCube.sec { margin: 0 10.2% 0 18%; }
	.cubeWrap.Vert .appCube.rightSec { margin: 37% 0 0 37%; }
	.cubeWrap.Vert .appCube.rightFir { margin: 20% 0 0 57%; }
	.cubeWrap.Vert .appCube.leftSec { margin: 0% 0 0 18%; }
	.appConWrap { top: 50%; }

}
/*--------------- ipad landscape ----------------*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1280px) 
and (orientation : landscape) {
	

	/* .cubeWrap.padLand .appCube.sec { margin: -6% 8% 0 41%; }
	.cubeWrap.padLand .appCube.trd { margin: -6% 0 0 0; }
	.cubeWrap.padLand .appCube.fir { margin: 0 55%; } */
}

@media screen and (max-width: 1280px) {
/*--------------- ipad landscape ----------------*/
	.cubeWrap.padLand { 
		display: block;
		width: 80%;
		height: 65%;
		top: 50%;
		left: 49%;
		transform: translate(-50%, -50%);
	}
	.cubeWrap.padLand .appCube { 
		width: 20%;
		padding-bottom: 20%; 
	}
	.cubeWrap.padLand .appCube.leftFir { 
		margin: 0 0 0 40%; 
	}
	.cubeWrap.padLand .appCube.rightSec { 
		margin: 14% 0 0 8%; 
	}
	.cubeWrap.padLand .appCube.rightFir { 
		margin: 14% 0 0 26%; 
	}
	.cubeWrap.padLand .appCube.rightThd { 
		margin: -6% 0 0 12%; 
	}
	.cubeWrap.padLand .appCube.rightFou { 
		margin: -6% 0 0 8%; 
	}
	.cubeWrap.padLand .appCube.rightFiv { 
		margin: -6% 0 0 8%; 
	}
	.appConWrap { top: 50%; }
/* ------------App Cube (Hori-Squ) */
.cubeWrap.Hori { 
	display: none;
	/* display: block;  */
} 
.cubeWrap.Hori-Squ { 
	display: block;
	/* display: none; */
}
/* .cubeWrap.Vert {
	display: block;
} */
.cubeWrap.Hori-Squ .appCube { 
	width: 20%;
	padding-bottom: 20%; 
	/* margin-right:6%;  */
}
.cubeWrap.Hori-Squ .appCube.fir { margin: 0 55%; }
.cubeWrap.Hori-Squ .appCube.leftFir { margin: 0 0 0 27%; }
.cubeWrap.Hori-Squ .appCube.sec { margin: -6% 8% 0 41%; }
.cubeWrap.Hori-Squ .appCube.trd { margin: -6% 0 0 0; }
.cubeWrap.Hori-Squ .appCube.rightSec { margin: 28% 0 0 22%; }
.cubeWrap.Hori-Squ .appCube.rightFir { margin: 14% 0 0 13%; }
.cubeWrap.Hori-Squ .appCube.leftSec { margin: 8% 63% 0 27%; }

/*--------------------------Submenu---------------------------------*/
.submenuWrap { max-width: 88%; bottom: 90px; margin-left: 6%; }
.itemWrap { margin: 10px auto 10px auto; width: 80%;  }
/*--------------------------------------Title Bar-------------------------------------*/
.serviceTitBar { font-size: 22px; line-height: 28px;  padding: 10px 0 7px; height: 55px;}
.serviceTitBar.ad {height: 85px;}
.serviceTitBar.history { height: 40px;}
.secTitleEn {font-size: 18px; line-height: 30px; }
.moreLink { width: 40px; height: 25px; font-size: 12px; }



/*---------------------------------Phone Slide----------------------------------*/
.leftBlo.otgPhone { width: 40%; }
.leftBlo.mine { width: 36%; margin-top: -14%; }
.leftBlo.news { width: 120%; }
.leftBlo.history { width: 38%; margin: -10% 0 0 10%; }
.leftBlo.vox { width: 70%; margin-top: -10%; }
.slideConWrap { width:80%; height: auto; }
.slideConWrap.screen { top:55%; }
.slideConWrap.cube { width:75%; top:42%; }
.storeIcon { clear:both; width: 80px; padding: 8px 6px 0 6px; }
.storeIcon.ios { margin: 0 0 10px 0; }
.storeIcon.and { margin: 0 0 0 0; }

.appGistWrap.memory { margin-left: 5%;}
.bottomGistBlo.eng { letter-spacing: 2px; }
}

@media screen and (max-width: 960px) {
	.cubeWrap.padLand { display: None; }
	/* --------App Cube (Vert)------- */
	.cubeWrap.Hori { display: none; } 
	.cubeWrap.Hori-Squ { display: none; }
	.cubeWrap.Vert { 
		display: block;
		width: 80%;
		height: 65%;
		top: 50%;
		left: 49%;
		transform: translate(-50%, -50%); 
	}
	.cubeWrap.Vert .appCube { 
		width: 28%;
		padding-bottom: 20%;
		/* margin-right:6%;  */
	}
	.cubeWrap.Vert .leftRow { margin: 0 0 0 0; }
	.cubeWrap.Vert .rightRow { margin: 0 0 0 0; }
	.cubeWrap.Vert .appCube.fir { margin: 39% 37.5% 0 37.5%; }
	.cubeWrap.Vert .appCube.leftFir { margin: 0 0 0 37.5%; }
	.cubeWrap.Vert .appCube.trd { margin: 0 0 0 0; }
	.cubeWrap.Vert .appCube.sec { margin: 0 10.2% 0 18%; }
	.cubeWrap.Vert .appCube.rightSec { margin: 37% 0 0 37%; }
	.cubeWrap.Vert .appCube.rightFir { margin: 20% 0 0 57%; }
	.cubeWrap.Vert .appCube.leftSec { margin: 0% 0 0 18%; }
	.appConWrap { top: 70%; }
}

@media screen and (max-width: 1000px) {
/*--------------------------Submenu---------------------------------*/
#fullPageScroll { top: 50px;}
.itemWrap { margin: 10px auto 10px auto; width: 80%;  }
.subItem{ font-size: 14px; margin: 0 10px; }

/*---------------------------------Phone Slide----------------------------------*/
.storeIcon { width: 70px; font-size: 13px; letter-spacing: 3px; }
.leftBlo.otgPhone { width: 50%; }
.leftBlo.history { width: 38%; margin: 0 0 0 10%; }
.bottomGistBlo.eng { font-size: 13px; letter-spacing: 2px; line-height: 22px; }
}
@media screen and (max-width: 825px) {
#fullPageScroll { top: 44px;}
/*--------------------------Submenu---------------------------------*/
.submenuWrap { max-width: 96%; bottom: 90px; margin-left: 2%; }
.subItem{ font-size: 14px; margin: 0 7px; }
/*-----------------------Scroll Down Button-----------------*/
.downArrWrap { top: 85px; }
.downArrWrap.app { bottom: 10%; top:auto; }
/*-----------------------------------Introduction----------------------------------*/

/*---------------------------------8 block layout----------------------------------*/
.cubeWrap { width:80%; height:65%; top:50%; left:50%; transform: translate(-50%, -50%); }
.leftRow { width: 100%; margin: 35.3% 0 0 0; }
.rightRow { width: 100%; margin: 35.3% 0 0 0; }
.appConWrap { top:65%; width: 100%; }
.appCube { width: 25%; padding-bottom: 20%; margin-right:6%; }
.appCube.fir { margin: 0 37.5%; }
.appCube.sec { margin: -2.4% 10.2% 0 19.9%; }
.appCube.trd { margin: -2.4% 0 0 0; }
.appCube.fou { margin: -2.4% 0 0 37.5%; }
.appCube.leftFir { margin: 0 63% 0 2.4%;}
.appCube.leftSec { margin: -2.4% 50% 0 19.9%; }
.appCube.rightFir { margin: 0 0 0 72.5%;}
.appCube.rightSec { margin: -2.4% 0 0 55%; }
.appName { font-size: 13px; letter-spacing: 2px; margin-top: 7px; }


/*---------------------------------7 block layout----------------------------------*/
/* .appCube { width: 22%; padding-bottom: 20%; margin-right:6%; }
.appCube.leftFir { margin: -9.5% 40% 0 40%;}
.appCube.leftSec { margin: -4.5% 40% 0 24.5%; }
.appCube.leftTrd { margin: 10.5% 40% 0 24.5%; }
.appCube.fir { margin: 6% 40% 0 55.5%}
.appCube.sec { margin: -5% 8% 0 40%; }
.appCube.trd { margin: -4.5% 20% 0 55.5%; }
.appCube.fou { margin: -5% 0 0 40%;}
.appName { font-size: 13px; letter-spacing: 2px; margin-top: 7px; } */



/*---------------------------------Phone Slide----------------------------------*/
.slideConWrap { width:80%; height:65%; height: auto; top:50%; left:50%; transform: translate(-50%, -50%); }
.slideConWrap.screen { top: 50%; }
.slideConWrap.cube { width:80%; top:42%; }
.leftBlo.otgPhone { position:relative; float:none; width: 50%; height:auto; margin: 0 auto 0 auto; }
.leftBlo.screenPhone { position:relative; float:none; width: 60%; height:auto; margin: 0 auto; }
.leftBlo.mine { position:relative; float:none; width: 36%; height:auto; margin: 0 auto 0 auto; }
.leftBlo.news { margin-top: 20%; bottom: 25%; right:10%; width: 140%; z-index: 0; }
.leftBlo.history { position:relative; float:none; width: 36%; height:auto; margin: 0 auto; }
.leftBlo.memory { position:relative; float:none; width: 40%; height:auto; margin: 0 auto; }
.leftBlo.vox { position:relative; float:none; width: 70%; height:auto; margin: 0 auto; z-index: 0; }
.leftBlo.cube { position:relative; float:none; width: 65%; height:auto; margin: 0 auto; z-index: 0;  }
.conBlo { width: 100%; }
.conBlo.news { position:absolute; bottom: 15%; height:auto; padding-left:10%; width: 90%; float:none; }
.appGistWrap {
	float: none;
	position:relative;
	width: 94%;
	padding: 0% 3% 3% 3%;
	margin-top: 0;
	background: rgba(255,255,255,0.9); 
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 51%, rgba(255,255,255,1) 100%); 
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 51%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 51%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); 
}
.appGistWrap.screen { 
	margin-top: -20%;
	/* background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(118,126,142,1) 100%); 
	background: -webkit-linear-gradient(top, rgba(118,126,142,0) 0%,rgba(118,126,142,0) 1%,rgba(118,126,142,1) 100%);
	background: linear-gradient(to bottom, rgba(118,126,142,0) 0%,rgba(118,126,142,0) 1%,rgba(118,126,142,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00767e8e', endColorstr='#767e8e',GradientType=0 ); */

	background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0) 100%);
}
.storeIcon.scr.ios { background: none; }
.storeIcon.scr.and { background: none; }
.appGistWrap.news { margin-top: 20%; width: 83%; }
.appGistWrap.history {
	margin-top: -10%;
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(245,244,237,1) 51%, rgba(236,233,220,1) 100%); 
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(245,244,237,1) 51%,rgba(236,233,220,1) 100%); 
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(245,244,237,1) 51%,rgba(236,233,220,1) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ece9dc',GradientType=0 );
}
.appGistWrap.memory { margin-left: 0; margin-top: -10%;}
.appGistWrap.cube { margin-top: -10%;}
.phoneApos { width: 44%; }
.phoneBpos { width: 44%; margin: 20% 12% 0 0; }
.storeIcon.ios { margin: 0 0 10px; background: rgba(255,255,255,0.6); border: 1px solid #454F57;  }
.storeIcon.ios.history { background:#2F302800; color: #4f3a3e;}
.storeIcon.and.history { background:#2F302800; color: #4f3a3e;}
.storeIcon.and { background: rgba(255,255,255,0.6); border: 1px solid #454F57;  }
.appLogo { width: 65px; }

}
@media screen and (max-width: 760px) {
/*---------------------------------Phone Slide----------------------------------*/
.leftBlo.otgPhone { margin-top:80px; }
.appGistWrap { margin-top: -10%; }
}
.appGistWrap.mine {
	background: rgb(42,53,47);
	background: linear-gradient(0deg, rgba(42,53,47,0.7994047960981268) 0%, rgba(42,58,50,0.6957633395154936) 60%, rgba(255,255,255,0) 100%);
}

@media screen and (max-width: 625px) {
.submenuWrap { display: none; }

/*--------------------------Title Bar-------------------------------*/
.serviceTitBar { padding: 8px 0 0; font-size: 18px; line-height: 24px; height:58px; width:100%; cursor: pointer; }
.serviceTitBar.history { padding: 12px 0 0; height:40px; }
.secTitleBar { padding: 12px 0 0; font-size: 22px; line-height: 30px; cursor: pointer; }
.secTitleCh p{ font-size: 18px; letter-spacing: 1px; padding-top: 2px;}

.memberBar { font-size: 22px; }
.secTitleEn { font-size: 16px; }
.secTitleCh { line-height: 20px;}
.openBtn { width: 100%; height: 20px; background:#000000; }
.secOpenIcon { 
	width: 40px; 
	height:20px; 
	margin: 0 auto;
	-webkit-border-radius: 5px 5px 0 0;
     -khtml-border-radius: 5px 5px 0 0;
	   -moz-border-radius: 5px 5px 0 0;
            border-radius: 5px 5px 0 0;
	background: #a23026 url(../img/cs_ad.png) no-repeat; background-position: center -10px; background-size: cover;  
}
/*-----------------------Scroll Down Button-----------------*/
.downArrWrap.app { /*bottom: 15%;*/ bottom: 40px; top:auto; }
/*-----------------------------------Introduction----------------------------------*/
/*---------------------------------8 block layout----------------------------------*/
.cubeWrap { width:70%; height:65%; top:38%; left:50%; transform: translate(-50%, -50%); }
.leftRow { width: 100%; margin: 63% 0 0 0; }
.rightRow { width: 100%; margin: 63% 0 0 0; }
.appConWrap { top:85%; }
.appCube { width: 30%; padding-bottom: 20%; margin-right:6%; }
.appCon { width: 65%; }
.appCube.fir { margin: 0 35%; }
.appCube.sec { margin: 1% 12% 0 14%; }
.appCube.trd { margin: 1% 0 0 0; }
.appCube.fou { margin: 1% 0 0 35%; }
.appCube.leftFir { margin: 0 63% 0 14%;}
.appCube.leftSec { margin: 22% 50% 0 14%; }
.appCube.rightFir { margin: 0 0 0 56%;}
.appCube.rightSec { margin: 22% 0 0 56%; }
.appName { width: 100%; font-size: 12px; letter-spacing: 1px; margin-top: 6px; line-height: 14px; }
/*-------------------------------Nav Dot-------------------------------*/
.navDotWrap { right: 15px; }
.navDot { width: 5px; height: 5px; }

/* ------------App Cube (Vert)---------- */
.cubeWrap.Vert { width:80%; height:65%; top:50%; left:47%; transform: translate(-50%, -50%); }
.cubeWrap.Vert .appCube { 
	width: 34%;
	padding-bottom: 20%; 
	/* margin-right:6%;  */
}
.appConWrap {
	top: 90%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
}
.cubeWrap.Vert .leftRow { margin: 0 0 0 0; }
.cubeWrap.Vert .rightRow { margin: 0 0 0 0; }
.cubeWrap.Vert .appCube.fir { margin: 48% 37.5% 0 38%; }
.cubeWrap.Vert .appCube.leftFir { margin: 0 0 0 37.5%; }
.cubeWrap.Vert .appCube.trd { margin: 4% 0 0 3%; }
.cubeWrap.Vert .appCube.sec { margin: 4% 10.2% 0 14%; }
.cubeWrap.Vert .appCube.rightSec { margin: 50% 0 0 37%; }
.cubeWrap.Vert .appCube.rightFir { margin: 24% 0 0 62%; }
.cubeWrap.Vert .appCube.leftSec { margin: 4% 0 0 14%; }

/*---------------------------------Phone Slide----------------------------------*/
.slideConWrap { width:100%; height: 100%; }
.slideConWrap.screen { background:none; }
.slideConWrap.news { background:none; }
.slideConWrap.history { background:none; }
.slideConWrap.cube{ width:100%; top:50%; background:none;}
.leftBlo.otgPhone { width: 80%; max-height: 85%; margin-top: 10%; z-index: -1; position:absolute; left:50%; top:35%; transform: translate(-50%, -50%); }
.leftBlo.screenPhone { position:absolute; width: 80%; margin-top: 10%; left:50%; top:35%; transform: translate(-50%, -50%); z-index: -1;  }
.leftBlo.mine { position:absolute; width: 65%; left:50%; top:40%; transform: translate(-50%, -50%); z-index: -1; }
.leftBlo.news { width: 200%; right: 0; bottom: 24%; }
.leftBlo.history { position:absolute; width: 75%; left:50%; top:40%; transform: translate(-50%, -50%); z-index: -1; }
.leftBlo.memory { position:absolute; width: 65%; left:50%; top:40%; transform: translate(-50%, -50%); z-index: -1; }
.leftBlo.vox { position:absolute; width: 85%; left:50%; top:40%; transform: translate(-50%, -50%); z-index: -1; }
.leftBlo.cube { position:absolute; width: 85%; left:50%; top:40%; transform: translate(-50%, -50%); z-index: -1; }
.phoneBpos { margin: 10% 12% 0 0; }
.conBlo.news { padding-left:0; width: 100%; float:none; bottom: 0; height: 100%; }
.appsPics { width: 100%; height: 55%; overflow:hidden; opacity:1; }

.appGistWrap { position:absolute; bottom: 0; padding: 5% 8% 15% 8%; width: 84%; margin-left:0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background: #FFFFFF; opacity:0.9; }
.appGistWrap.screen { background: #fefeffdc;  }
.storeIcon.scr.ios { border: 1px solid #9bacb9; }
.storeIcon.scr.and { border: 1px solid #9bacb9; }
.detLink.scr { margin-top: 0px; }

.appGistWrap.openGist { opacity:1; }
.appGistWrap.history.openGist { background: rgba(236,233,220,1); }
.appGistWrap.mine { background: rgba(50,46,46,0.2); }
.appGistWrap.news { width:auto; margin-top: 0; opacity: 1; }
.appGistWrap.history { background: rgba(236,233,220,0.8); }
.detLink { margin-top: -10px; }
.detLink.eng { margin-top: 0px; }
.bottomGistBlo { font-size: 14px; letter-spacing: 5px; line-height: 21px; }
.bottomGistBlo.eng { font-size: 13px; letter-spacing: 1px; line-height: 20px; }
.moreGistBtn.eng { font-size: 12px; }
}

@media screen and (max-width: 480px) {
	.cubeWrap.Vert { 
		width: 88%;
	}
	.appConWrap {
		width: 90%;
	}
	
}

@media screen and (max-width: 425px) {
/*-----------------------------------Introduction----------------------------------*/
/*.cubeWrap { width:80%; }
.appName { font-size: 10px; margin-top: 4px;  }*/

/*---------------------------------7 block layout----------------------------------*/
/* .cubeWrap { width:80%; top:38%; }
.appConWrap{ top:80%;}
.appCube { width: 32%; padding-bottom: 20%; margin-right:6%; }
.appCube.leftFir { margin: -7.5% 40% 0 35%;}
.appCube.leftSec { margin: 2.5% 40% 0 12.5%; }
.appCube.leftTrd { margin: 24% 40% 0 12.5%; }
.appCube.fir { margin: 14.5% 40% 0 57%}
.appCube.sec { margin: 2% 8% 0 35%; }
.appCube.trd { margin: 3% 20% 0 57%; }
.appCube.fou { margin: 2% 0 0 35%;}
.appName { font-size: 10px; margin-top: 4px;  } */
/*---------------------------------Phone Slide----------------------------------*/
.leftBlo.news { width: 280%; right: -10%; bottom: 24%; }
.leftBlo.vox { width: 90%;}
.bottomGistBlo { font-size: 13px; letter-spacing: 3px; line-height: 21px; }
.bottomGistBlo.eng { font-size: 12px; letter-spacing: 1px; line-height: 19px; }
}