@charset "UTF-8";
/* CSS Document */
.header{
	position:absolute;
	top:0;
	left:0;
	height:7.81vw;
	width:100%;
	z-index: 6;
    transform: perspective(5.20vw) translate3d(0,0,0);
	/*background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 100%);*/
}
.headerBkContainer{
    	position:absolute;
	top:0;
	left:0;
    width:100%;
    height: 100%;
    z-index: -1;
    
}
.headerMenuDown {
    position: absolute;
    top: 0;
    left: 0;
    height: 18vw;
    width: 100%;
    z-index: 4;
    transform: perspective(5.20vw) translate3d(0,0,0);
    /* background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 100%); */
    background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0) 100%);
}
.menuNoBk{
    background:none;
}
.menuOut{
    /*transform: translate3d(0,-20vw,0);*/
	
}
.menuOut .headerMenuStroke{
    /*transform: translate3d(0,-20vw,0);*/
	visibility: hidden;
}

.menuMouseIn{
    transform: translate3d(0,0,0) !important;
}
.menuOutBottom{
    transform: translate3d(0,-25vw,0);
    opacity:0 !important;
    -webkit-transition: all 1ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
    -moz-transition: all 1ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
    -o-transition: all 1ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
    transition: all 1ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;

}
.headerFatTitle{
   position: absolute;
    top: 2.5vw;
    width: 30vw;
    height: 5vw;
    left: 5vw;
    z-index: 0;
    font-size: 2.7vw;
    line-height: 5vw;
    opacity: 0;
    vertical-align: middle;
    letter-spacing: 0.1vw;
}
.headerFatTitleSelect{
    /*opacity:1;*/
}
.headerFatTitlemouseIn{
    opacity:0 !important;
}
.headerContainer{
	position: relative;
    z-index: 1;
    height: 7.81vw;
    top: 0;
    left: 0;
    margin-right: 5.20vw;
    margin-left: 5.20vw;
	
	
}
.headerContainerBottom{
	position: relative;
    z-index: 1;
    height: 7.81vw;
    top: 29vw;
    left: 0;
    margin-right: 5.20vw;
    margin-left: 5.20vw;
	
	
}
.contentHeader {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    z-index: 0;
}
.contentHeaderV {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    z-index: 0;
}
.chCenter {
	flex: 1;
	height: 100%;
	text-align: center;
	white-space: nowrap;
    position: relative;
    z-index: 0;
}
.menuHeader{
	text-align: center;
	white-space: nowrap;
    position: relative;
    font-size:  1.20vw;
    z-index: 0;
    transform: perspective(5.2vw) translate3d(0,0,0);
    transform-style: preserve-3d;
}
.menuHeaderBottom{
	text-align: center;
	white-space: nowrap;
    position: relative;
    font-size:  2.40vw;
    z-index: 0;
    transform: perspective(5.2vw) translate3d(0,0,0);
    transform-style: preserve-3d;
}

.menuHeaderV{
	text-align: left;
    position: absolute;
    width: 34vw;
    left: 4.41vw;
    font-size:  2vw;
    z-index: -1;
    transform: perspective(5.2vw) translate3d(0,0,0);
    transform-style: preserve-3d;
    top:50%;
    transform: translate(0,-50%);
    
}
.menuHeaderV_iph_{
	text-align: left;
    position: absolute;
    width: 46vw;
   /* margin-top: 15.62vw;
    margin-left: 9vw;*/
    font-size:  5vw;
    z-index: -1;
    transform: perspective(5.2vw) translate3d(0,0,0);
    transform-style: preserve-3d;
    top:50%;
    left:15.62vw;
     transform: translate(0,-50%);
    
}
.menuHeaderV_ipad_{
	
    text-align: left;
    position: absolute;
    width: 34vw;
    top: 50%;
    left:10.41vw;
    font-size: 2.7vw;
    z-index: -1;
    transform: perspective(5.2vw) translate3d(0,0,0);
    transform-style: preserve-3d;
    transform: translate3d(0,-50%,0);
    transform-origin: 50% 50%
}
.menuHeaderV_ipad_portrait {
    text-align: left;
    position: absolute;
    width: 34vw;
    top: 50%;
    left: 10.41vw;
    font-size: 3.5vw;
    z-index: -1;
    transform: perspective(5.2vw) translate3d(0,0,0);
    transform-style: preserve-3d;
    transform: translate3d(0,-50%,0);
    transform-origin: 50% 50%;
}
.menuHeaderVout{
    transform: perspective(5.2vw) translate3d(-15.62vw,-50%,-1vw);
    
    opacity:0.3;
    
}
.chCenterV {
    text-align: left;
    position: relative;
    width: 13.02vw;
    margin-top: 10.41vw;
    margin-left: 5.20vw;
    z-index: 0;
    
}
.chCenterItem {
	width: 4.16vw;
	height: 100%;
	position: relative;
	margin-left: 0.26vw;
	margin-right: 0.26vw;
	display: inline-block;
    z-index: 0;
}
.chRight {
	/*flex: 0;*/
	height: 100%;
	width:11.97vw;
    position: relative;
    z-index: 0;
}
.chRightBottom {
	/*flex: 0;*/
	height: 100%;
	width:11.97vw;
    position: absolute;
    z-index: 0;
}
.headerRightContent{
	position: relative;
    right: 0;
    height: 100%;
    width: 5.46vw;
    z-index: 0;
}

.chLeft {
	flex: 0;
	height: 100%;
    position: relative;
    z-index: 0;
}
.chLeftBottomMenu {
	flex: 0;
	height: 100%;
    position: absolute;
    z-index: 0;
    top:-30vw;
}

.mainLogo{
	position: relative;
    left: 0;
    top: 3.02vw;
    width: 10.41vw;
    height: 3.38vw;
    background-size: contain;
	margin-left: 0.52vw;
    z-index: 0;
}
.mainLogoV {
    position: relative;
    left: 0;
    top: 2.60vw;
    width: 17.18vw;
    height: 5.57vw;
    background-size: contain;
    margin-left: 0.52vw;
    z-index: 0;
}
.mainLogoV_iph_ {
       position: relative;
    left: 0;
    top: 12.8vw;
    width: 43.18vw;
    height: 13.57vw;
    background-size: contain;
    margin-left: 5.52vw;
    z-index: 0;
}
.headerCenterItem{
    height: 2.08vw;
    position: relative;
    margin-left: 1.3vw;
    margin-right: 1.3vw;
    display: inline-block;
    margin-top: 2.9vw;
    z-index: 0;
}
.headerCenterItemV{
       height: 2.08vw;
    position: relative;
    margin-left: 1.56vw;
    margin-right: 1.56vw;
    margin-top: 2.08vw;
    z-index: 0;
}
.headerCenterItemV_iph_{
   height: 12vw;
    position: relative;
    margin-left: 1.56vw;
    margin-right: 1.56vw;
    z-index: 0;
}

.headerCenterItemV_ipad_{
   height: 6vw;
    position: relative;
    margin-left: 1.56vw;
    margin-right: 1.56vw;
    z-index: 0;
}
.headerCenterItemV_ipad_portrait {
    height: 8vw;
    position: relative;
    margin-left: 1.56vw;
    margin-right: 1.56vw;
    z-index: 0;
}

.headerItemTxt{
	position: relative;
    height: 2.08vw;
    top: 0;
	margin-top: 0;
	margin-bottom: 0;
	letter-spacing: 0.15vw;
    z-index: 0;
}
.headerItemTxtV{
	position: relative;
    height: 2vw;
    top: 0;
    margin-top: 0.52vw;
    margin-bottom: 0.52vw;
    letter-spacing: 0.15vw;
    z-index: 0;
    line-height: 2vw;
    vertical-align: middle;
}
.headerItemTxtV_iph_{
	position: relative;
    height: 12vw;
    top: 0;
    letter-spacing: 0.15vw;
    z-index: 0;
    line-height: 12vw;
    vertical-align: middle;
}
.headerItemTxtV_ipad_{
	position: relative;
    height: 3vw;
    top: 0;
    letter-spacing: 0.15vw;
    z-index: 0;
    line-height: 3vw;
    vertical-align: middle;
}
.headerSelected{
	opacity:1;
}
.subMenuContainer{
	position: relative;
	height:3.125vw;
	width:100%;
	z-index: 10;
	text-align: center;
	white-space: nowrap;
	margin-top: 1.56vw;
}
.headerSubButton{
	position: relative;
	display: inline-block;
	height:2.08vw;
	border-radius: 1.04vw;
	color:#d1d1d1;
	font-family: _light;
	font-size: 0.98vw;
	line-height: 2.08vw;
	margin-top: 0.78vw;
	margin-left: 0.78vw;
	margin-right: 0.78vw;
	padding-left: 1.04vw;
	padding-right: 1.04vw;
	text-align: center;
	background:none;
	border: 1px #d1d1d1 solid;
    z-index: 0;
}
.headerSubButtonSelect{
	color:#fff;
	background: #26a16b;
    border: 1px #26a16b solid;
	
	
}
.headerMenuStroke{
	position: absolute;
    height: 0.15vw;
    width: 3.90vw;
    background: rgb(58, 245, 177);
    top: 6.1vw;
    left: 0;
    z-index: 0;
    display:none;
    transform: translate3d(50vw, 0px, 0px)
}

.headerMenuStrokeBottom{
	position: absolute;
    height: 0.15vw;
    width: 5vw;
    background: rgb(58, 245, 177);
    top: 7.6vw;
    left: 0;
    z-index: 0;
    display:none;
    transform: translate3d(50vw, 0px, 0px)
}

.iph_headerMenuStrokeV{
	    position: absolute;
    height: 5.08vw;
    width: 0.6vw;
    background: rgb(58, 245, 177);
    top: 3vw;
    margin-left: -3vw;
    z-index: 0;
}
.headerMenuStrokeV {
    position: absolute;
    height: 2vw;
    width: 0.25vw;
    background: rgb(58, 245, 177);
    top: 0vw;
    margin-left: 0.2vw;
    z-index: 0;
}
.headerMenuStrokeV_iph_{
    position: absolute;
    height: 5.08vw;
    width: 0.4vw;
    background: rgb(58, 245, 177);
    top: 3.5vw;
    margin-left: -3vw;
    z-index: 0;
}

.topRightHeader {
	position: absolute;
	z-index: 100;
	height: 2.08vw;
	/*top: 0.5vw;*/
    top:1.87vw;
	right: 5.2vw;
	float: right;
	font-family: _light;
	font-size: 0.78vw;
	text-align: right;
	color: #fff;
	width:14vw;
}
.headerAccount {
	display: inline-block;
	width: 6.25vw;
	height: 100%;
	top: 0;
	line-height: 1.56vw;
	vertical-align: middle;
	text-align: center;
	margin-top: 0.41vw;
    z-index: 0;
}
.headerLanguage {
	display: inline-block;
	width: 6.25vw;
	height: 100%;
	top: 0;
	line-height: 2.08vw;
	vertical-align: middle;
	text-align: right;
    z-index: 0;
}
.headerSetting {
	display: inline-block;
	width: 3.02vw;
	height: 100%;
	top: 0;
	line-height: 2.08vw;
	vertical-align: middle;
	text-align: center;
	margin-top: 0.52vw;
    z-index: 0;
}
.headerArrowDown {
	display: inline-block;
	background: url(../../images/headerArrowDown.png) center right no-repeat;
	background-size: contain;
	width: 0.52vw;
	height: 0.46vw;
    z-index: 0;
}

.gear {
	display: inline-block;
	height: 1.56vw;
	width: 1.56vw;
	top: 0;
	left: 0;
	background: url(../../images/gear.svg) center 0.26vw no-repeat;
	background-size: 65%;
}


.menuExtraContainer{
    position: absolute;
    width: 30vw;
    height: 9vw;
    bottom: -15vh;
    font-size: 3vw;
    letter-spacing: 0.6vw;
    z-index: 1;
    left: 8vw;
    line-height: 9vw;
    vertical-align: middle;
    
    
}
.menuExtraButtonV{
     position: relative;
    display: inline-block;
    height: 6.7vw;
    line-height: 5vw;
    vertical-align: middle;
    /*color: #CED1D1;*/
}
    

.logoutPic_mob_{
    position: relative;
    display: inline-block;
    height: 3.4vw;
    width: 3.4vw;
    background: url(/clientTest/src/common/images/header/ic_SignOut.png) no-repeat center center;
    background-size: contain;
    margin-right: 2.5vw;
    
}
.stikyHeader{
    position: sticky;
    position: -webkit-sticky; /* Safari */
    background: rgba(0,0,0,0.75);
    margin-bottom: 7vw;
}
.menuPip {
    height: calc((21vw /16 ) * 9);
    position: relative;
    margin-left: 0vw;
    margin-right: 0vw;
    margin-top: 0vw;
    z-index: 0;
    top: 10vw;
    overflow: hidden;
}
.menuHeaderBC{
    height: auto;
    position: relative;
    margin-left: 0vw;
    margin-right: 0vw;
    margin-top: 0vw;
    z-index: 0;
    width:100%;
    top:5vw;
    
}
.menumContainer{
    height: 30vw;
    position: relative;
    margin-left: 0vw;
    margin-right: 0vw;
    margin-top: 0vw;
    z-index: 0;
    width:100%;
    top:10vw;
    overflow: hidden;
    
}
.mycIconuser {
    position: absolute;
    width: 3vw;
    height: 3vw;
    top: 2.7vw;
    right: 9.5vw;
    /* background: url(../src/common/images/userIcon.png) center center no-repeat; */
    border-radius: 50%;
    /*border: 2px outset rgba(0,0,0,0);*/
	
}
.mycIconuserBorder{
	border: 2px solid rgba(0,0,0,0);
	z-index: 1;
	 border-radius: 50%;
	width: calc(100% - 1px);
	height: calc(100% - 1px);
	position: absolute;
	top:-1px;
	left:-1px;
	
	
}