/*********************/
/****** myInfo *******/
/*********************/

.s4InnerItem.myInfo .sectionTitleWrapper
{
	position: relative;
	margin-bottom: 50px;
}

.s4InnerItem.myInfo .sectionInnerContent .inputSectionWrapper
{
	position: relative;
	width: 100%;
	margin-bottom: 15px;
}

.s4InnerItem.myInfo .sectionInnerContent .inputSectionWrapper .formRowItem
{
	position: relative;
	width: 100%;
	margin-bottom: 20px;
}

.s4InnerItem.myInfo .sectionInnerContent .inputSectionWrapper .formRowItem .columnStyle
{
	position: relative;
	width: 30%;
}

.s4InnerItem.myInfo .sectionInnerContent .inputSectionWrapper .formRowItem .columnStyle .innerW50
{
	position: relative;
	width: 50%;
}

.s4InnerItem.myInfo .sectionInnerContent .inputSectionWrapper .formRowItem .columnStyle.middle
{
	width: 36%;
	margin: 0% 2%;
}

.s4InnerItem.myInfo .sectionInnerContent .inputSectionWrapper .formRowItem .columnStyle.middle .innerW50
{
	position: relative;
	width: 50%;
}

.s4InnerItem.myInfo .sectionInnerContent .inputSectionWrapper .formRowItem .columnStyle .formTitleStyle
{
	position: absolute;
	height: 40px;
	padding-left: 10px;
}

.s4InnerItem.myInfo .sectionInnerContent .inputSectionWrapper .formRowItem .columnStyle .formContentStyle.withHeight
{
	height: 40px;
}

.s4InnerItem.myInfo .sectionInnerContent .inputSectionWrapper .formRowItem .columnStyle .formContentStyle
{
	position: relative;
}

.s4InnerItem.myInfo .sectionInnerContent .inputSectionWrapper .formRowItem .columnStyle.w50 .formTitleStyle
{
	width: 50px;
}

.s4InnerItem.myInfo .sectionInnerContent .inputSectionWrapper .formRowItem .columnStyle.w50 .formContentStyle
{
	margin-left: 50px;
}

.s4InnerItem.myInfo .sectionInnerContent .inputSectionWrapper .formRowItem .columnStyle.w80 .formTitleStyle
{
	width: 80px;
}

.s4InnerItem.myInfo .sectionInnerContent .inputSectionWrapper .formRowItem .columnStyle.w80 .formContentStyle
{
	margin-left: 80px;
}

.s4InnerItem.myInfo .sectionInnerContent .inputSectionWrapper .btnWrapper
{
	text-align: right;
}

.s4InnerItem.myInfo .sectionInnerContent .inputSectionWrapper .btnWrapper .btnStyle
{
	width: 190px;
}



.s4InnerItem.myInfo .sectionInnerContent .courseHistoryWrapper
{
	position: relative;
	width: 100%;
	margin-bottom: 15px;
}

.s4InnerItem.myInfo .sectionInnerContent .courseHistoryWrapper .infoHeaderTitle
{
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	
	padding: 10px 0px;
	border-bottom: 2px solid #fbf8f3;
	font-size: 16px;
	color: #D05E25;
	font-weight: bold;
	margin-bottom: 10px;
}

.s4InnerItem.myInfo .sectionInnerContent .courseHistoryWrapper .infoRow
{
	position: relative;
	padding-bottom: 10px;
	border-bottom: 2px solid #fbf8f3;
	margin-bottom: 10px;
}

.s4InnerItem.myInfo .sectionInnerContent .courseHistoryWrapper .infoRow .rowColumnItem
{
	position: relative;
}

.s4InnerItem.myInfo .sectionInnerContent .courseHistoryWrapper .infoRow .rowColumnItem p.titleColor
{
	color: #76542F;
}

.s4InnerItem.myInfo .sectionInnerContent .courseHistoryWrapper .infoRow .rowColumnItem.w5 {width: 5%;}
.s4InnerItem.myInfo .sectionInnerContent .courseHistoryWrapper .infoRow .rowColumnItem.w10 {width: 10%;}
.s4InnerItem.myInfo .sectionInnerContent .courseHistoryWrapper .infoRow .rowColumnItem.w15 {width: 15%;}
.s4InnerItem.myInfo .sectionInnerContent .courseHistoryWrapper .infoRow .rowColumnItem.w20 {width: 20%;}
.s4InnerItem.myInfo .sectionInnerContent .courseHistoryWrapper .infoRow .rowColumnItem.w25 {width: 25%;}
.s4InnerItem.myInfo .sectionInnerContent .courseHistoryWrapper .infoRow .rowColumnItem.w30 {width: 30%;}

/*********************/
/*** myRecordIndex ***/
/*********************/

.sectionItem.section4 .sectionScrollContent .mainInnerScrollContent.myRecord
{
	/*width: 960px;
	max-width: 960px;*/
	width: 860px;
	max-width: 860px;
}

.s4InnerItem.myRecordIndex
{
	/*padding: 0px 50px;*/
}

.s4InnerItem.myRecordIndex .sectionTitleWrapper
{
	position: relative;
	margin-bottom: 50px;
}

.s4InnerItem.myRecordIndex .sectionTitleWrapper .my330TripIco
{
	position: absolute;
	width: 480px;
	height: 300px;
	top: 0px;
	right: 0px;
	background: url('../images/freeExperience/my330TripIco.gif');
}

.s4InnerItem.myRecordIndex .sectionColumnItem.w50
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

.s4InnerItem.myRecordIndex .sectionColumnItem.leftItem .recordItem
{
	position: relative;
	width: 50%;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;

	padding-right: 20px;
	float: left;

	height: 150px;
}

.s4InnerItem.myRecordIndex .sectionColumnItem.rightItem .recordItem
{
	position: relative;
	width: 100%;
}

/*** recordItem ***/
.s4InnerItem.myRecordIndex .recordItem .headerTitle
{
	position: relative;
	padding: 10px 0px;
	border-bottom: 1px solid #F1EEE9;
	color: #F1EEE9;
	font-size: 17px;
	line-height: 1em;
	font-family: "DFYuanHK", "DFYuanHK_IE";
	letter-spacing: 3px;
	
}

.s4InnerItem.myRecordIndex .recordItem .recordInnerContent
{
	position: relative;
	margin-top: 10px;
}

.s4InnerItem.myRecordIndex .recordItem .recordInnerContent span
{
	vertical-align: top;
}

.s4InnerItem.myRecordIndex .recordItem .recordInnerContent span.largeText
{
	font-size: 80px;
	line-height: 1em;
	color: #76542F;
}

.s4InnerItem.myRecordIndex .recordItem .recordInnerContent span.unit
{
	position: relative;
	font-size: 20px;
	line-height: 1em;
	color: #76542F;
	top: 5px;
	font-family: "DFYuanHK", "DFYuanHK_IE";
	letter-spacing: 2px;
}

.s4InnerItem.myRecordIndex .recordItem .recordInnerContent .recordCartoon
{
	width: 20%;
}

.s4InnerItem.myRecordIndex .recordItem .recordInnerContent .recordCartoon .icoName
{
	position: relative;
	display: block;
	text-align: center;
	font-size: 12px;
	line-height: 1em;
	color: #fbf8f3;
	margin-bottom: 10px;
}

.s4InnerItem.myRecordIndex .recordItem .recordInnerContent .recordCartoon .icoPercentage
{
	position: relative;
	display: block;
	text-align: center;
	font-size: 20px;
	line-height: 1em;
	color: #76542F;
}

/************************/
/*** myRecordTimeList ***/
/************************/
.s4InnerItem.myRecordTimeList .sectionTitleWrapper
{
	position: relative;
	margin-bottom: 120px;
	/*padding: 0px 50px;*/
	padding: 0px 0px;
}

.s4InnerItem.myRecordTimeList .sectionTitleWrapper h2
{
	color: #76542F;
}

.s4InnerItem.myRecordTimeList .timeListWrapper
{
	position: relative;
	width: 100%; /*900*/
	/*height: 320px;
	background-color: #000;*/
}

.s4InnerItem.myRecordTimeList .timeListWrapper .titleWrapper
{
	position: relative;
	margin-bottom: 30px;
	padding: 0px 50px;
}

.s4InnerItem.myRecordTimeList .timeListWrapper .titleWrapper h2
{
	color: #76542F;
}

.s4InnerItem.myRecordTimeList .sliderSettingWrapper
{
	position: relative;
	height: 270px;
	padding: 0px 50px;
	/*background-color: #CCC;*/
}

.s4InnerItem.myRecordTimeList .sliderSettingRemark
{
	position: absolute;
	width: 40px;
	height: 100%;
}

.s4InnerItem.myRecordTimeList .sliderSettingRemark .sliderRow p
{
	position: absolute;
	top: -10px;
	color: #fbf8f3;
}


.s4InnerItem.myRecordTimeList .sliderSettingContent
{
	position: relative;
	padding-left: 40px;
}

.s4InnerItem.myRecordTimeList .sliderRow
{
	position: relative;
	width: 100%;
	height: 30px;
}

.s4InnerItem.myRecordTimeList .sliderRowStroke
{
	position: relative;
	width: 100%;
	height: 30px;
	border-top: 2px solid #fbf8f3;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

.s4InnerItem.myRecordTimeList .sliderSettingContent .innerSliderMoveWrapper
{
	position: relative;
	/*width: 810px;*/
	width: 710px;
	height: 270px;
	overflow: hidden;
}

.s4InnerItem.myRecordTimeList .sliderSettingContent .innerSliderMoveWrapper .sliderBg
{
	position: absolute;
	/*width: 810px;*/
	width: 710px;
	height: 270px;
	top: 0px;
	left: 0px;
}

.s4InnerItem.myRecordTimeList .sliderSettingContent .innerSliderMoveWrapper .sliderMainMoveContent
{
	position: relative;
	/*width: 1460px;*/
	width: 1260px;
	left: 0px;
}

.s4InnerItem.myRecordTimeList .sliderSettingContent .innerSliderMoveWrapper .sliderMainMoveContent .moveNowWrapper
{
	position: relative;
	/*width: 810px;*/
	width: 710px;
	height: 270px;
}

.s4InnerItem.myRecordTimeList .timerArrow
{
	position: absolute;
	width: 30px;
	height: 30px;
	top: 50%;
	margin-top: -30px;
}

.s4InnerItem.myRecordTimeList .timerArrow.arrowLeft
{
	left: -50px;
	background: url('../images/common/popSliderArrowLeft.png');
}

.s4InnerItem.myRecordTimeList .timerArrow.arrowRight
{
	right: -30px;
	background: url('../images/common/popSliderArrowRight.png');
}

.s4InnerItem.myRecordTimeList .sliderDisplayItem
{
	position: relative;
	width: 14.2857%;
	height: 200px;
}

.s4InnerItem.myRecordTimeList .circleDisplayItem
{
	position: absolute;
	width: 20px;
	height: 25px;
	left: 50%;
	margin-left: -10px;
	background: url('../images/myRecord/myRecordCircle.png');
}

.s4InnerItem.myRecordTimeList .circleDisplayItem.degree6{top: 20px;}
.s4InnerItem.myRecordTimeList .circleDisplayItem.degree5{top: 50px;}
.s4InnerItem.myRecordTimeList .circleDisplayItem.degree4{top: 80px;}
.s4InnerItem.myRecordTimeList .circleDisplayItem.degree3{top: 110px;}
.s4InnerItem.myRecordTimeList .circleDisplayItem.degree2{top: 140px;}
.s4InnerItem.myRecordTimeList .circleDisplayItem.degree1{top: 170px;}

/*** dateDisplay ***/
.s4InnerItem.myRecordTimeList .dateDisplay
{
	position: absolute;
	width: 100%;
	text-align: center;
	top: 220px;
	color: #76542F;
}

.s4InnerItem.myRecordTimeList .dateDisplay .date,
.s4InnerItem.myRecordTimeList .dateDisplay .week
{
	position: relative;
	display: block;
	font-size: 18px;
}

.s4InnerItem.myRecordTimeList .dateDisplay .date
{
	margin-bottom: 3px;
}

/******************/
/*** support330 ***/
/******************/
.s4InnerItem.support330 .sectionTitleWrapper
{
	position: relative;
	margin-bottom: 50px;
}

.s4InnerItem.support330 .commonCircleItem
{
	width: 270px;
	margin: 0px 70px;
}

.s4InnerItem.support330 .commonCircleItem .circleItemImg 
{
	height: 310px;
}


/*******************************/
/*** game audioAnswerWrapper ***/
/*******************************/
.audioAnswerWrapper
{
	position: relative;
	width: 100%;
	text-align: center;
	margin-bottom: 100px;
	display: none;
}

.questionaireWrapper
{
	/*position: relative;*/
	/*width: 100%;*/
	/*text-align: center;*/
	/*margin-bottom: 100px;*/
	display: none;
}

.questionaireWrapper .questionaire2{
	display: none;
}

.questionaireWrapper .questionaire3 {
	display: none;
}

.questionaireWrapper .questionaire4 {
	display: none;
}

/*** audioAnswerTitle ***/
.audioAnswerWrapper .audioAnswerTitle h1
{
	font-size: 32px;
	color: #76542F;
}

.audioAnswerWrapper .audioAnswerTitle h2
{
	position: relative;
	margin-bottom: 60px;
	color: #76542F;
}

.audioAnswerWrapper .audioAnswerTitle h2.white
{
	color: #fbf8f3;
	margin-bottom: 0px;
}

.audioAnswerWrapper .audioAnswerContent
{
	margin: 40px 0px;
}

.audioAnswerWrapper .commonCircleItem
{
	width: 20%;
	margin: 0px;	
}

.audioAnswerWrapper .commonCircleItem .circleItemImg
{
	height: 220px;
	background: url('../images/common/circleStyle3.png');
}

.audioAnswerWrapper .commonCircleItem.selected .circleItemImg,
.audioAnswerWrapper .commonCircleItem:hover .circleItemImg
{
	background-position: 0px 100%;
}


/*** game others radar***/

.sectionItem .gameRadarChart .sectionTitleWrapper h2
{
	color: #76542F;
}

.gameRadarChart .sectionInnerContent
{
	position: relative;
	width: 540px;
	margin: 0px auto 30px;
}

.gameRadarChart .textArea
{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

.gameRadarChart .textArea .text
{
	position: absolute;
	width: 100px;
	height: 20px;
	color: #FFFFFF;
	font-size: 18px;
}

.gameRadarChart .textArea .text.text1
{
	left: 50%;
	margin-left: -50px;
	top: 35px;
	text-align: center;
}

.gameRadarChart .textArea .text.text2
{
	right: 50px;
	top: 80px;
	text-align: left;
}

.gameRadarChart .textArea .text.text8
{
	left: 50px;
	top: 80px;
	text-align: right;
}

.gameRadarChart .textArea .text.text3
{
	right: 0px;
	top: 210px;
	text-align: left;
}

.gameRadarChart .textArea .text.text7
{
	left: 0px;
	top: 210px;
	text-align: right;
}

.gameRadarChart .textArea .text.text4
{
	right: 50px;
	bottom: 70px;
	text-align: left;
}

.gameRadarChart .textArea .text.text6
{
	left: 50px;
	bottom: 70px;
	text-align: right;
}

.gameRadarChart .textArea .text.text5
{
	left: 50%;
	margin-left: -50px;
	bottom: 20px;
	text-align: center;
}


canvas#radarResult
{
	position: relative;
	display: block;
	margin: 0px auto;
}


/*************************/
/*** myRecordRadarList ***/
/*************************/

.sectionItem .s4InnerItem.myRecordRadarList
{
	position: relative;
	/*padding: 0px 0px 0px 50px;*/
}

.sectionItem .s4InnerItem.myRecordRadarList .strokeTitle
{
	margin-bottom: 55px;
}

.sectionItem .s4InnerItem.myRecordRadarList .strokeTitle h2
{
	color: #76542F;
}

.s4InnerItem.myRecordRadarList
{
	position: relative;
}

.s4InnerItem.myRecordRadarList .sectionColumnItem.w360px
{
	position: relative;
	/*width: 360px;*/
	width: 320px;
}

.s4InnerItem.myRecordRadarList .sectionColumnItem.w360px .leftIndicator
{
	position: relative;
	padding: 5px 0px 30px;
}

.captionWrapper
{
	position: relative;
	/*width: 120px;*/
	width: 90px;
}

.captionWrapper .stroke
{
	position: relative;
	width: 30px;
	height: 5px;
	margin-right: 10px;
}

.captionWrapper.color1 .stroke
{	
	background-color: #C54705;	
}

.captionWrapper.color1 .text
{
	color: #C54705;
}

.captionWrapper.color2 .stroke
{	
	background-color: #6D4912;	
}

.captionWrapper.color2 .text
{
	color: #6D4912;
}

.captionWrapper.color3 .stroke
{	
	background-color: #EECB86;	
}

.captionWrapper.color3 .text
{
	color: #EECB86;
}

.s4InnerItem.myRecordRadarList .sectionColumnItem.w360px p
{
	font-size: 18px;
	line-height: 1.5em;
	color: #76542F;
	margin-bottom: 20px;
}

.s4InnerItem.myRecordRadarList .sectionColumnItem.w360px p.white
{
	color: #EBE3DA;
	margin-bottom: 25px;
}

.s4InnerItem.myRecordRadarList .sectionColumnItem.w540px
{
	position: relative;
	width: 540px;
	height: 400px;
}

.s4InnerItem.myRecordRadarList .sectionColumnItem.w540px .textArea
{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

.s4InnerItem.myRecordRadarList .sectionColumnItem.w540px .textArea .text
{
	position: absolute;
	width: 100px;
	height: 20px;
	color: #FFFFFF;
	font-size: 18px;
}

.s4InnerItem.myRecordRadarList .sectionColumnItem.w540px .textArea .text.text1
{
	left: 50%;
	margin-left: -50px;
	top: 15px;
	text-align: center;
}

.s4InnerItem.myRecordRadarList .sectionColumnItem.w540px .textArea .text.text2
{
	right: 50px;
	top: 60px;
	text-align: left;
}

.s4InnerItem.myRecordRadarList .sectionColumnItem.w540px .textArea .text.text8
{
	left: 50px;
	top: 60px;
	text-align: right;
}

.s4InnerItem.myRecordRadarList .sectionColumnItem.w540px .textArea .text.text3
{
	right: 0px;
	top: 190px;
	text-align: left;
}

.s4InnerItem.myRecordRadarList .sectionColumnItem.w540px .textArea .text.text7
{
	left: 0px;
	top: 190px;
	text-align: right;
}

.s4InnerItem.myRecordRadarList .sectionColumnItem.w540px .textArea .text.text4
{
	right: 50px;
	bottom: 70px;
	text-align: left;
}

.s4InnerItem.myRecordRadarList .sectionColumnItem.w540px .textArea .text.text6
{
	left: 50px;
	bottom: 70px;
	text-align: right;
}

.s4InnerItem.myRecordRadarList .sectionColumnItem.w540px .textArea .text.text5
{
	left: 50%;
	margin-left: -50px;
	bottom: 20px;
	text-align: center;
}

/*.questionaire2*/
/*{*/
	/*position: relative;*/
	/*width: 100%;*/
/*}*/
/*.questionaire2 .questionaireq*/
/*{*/
	/*position: relative;*/
	/*width : 50%;*/
	/*float: left;*/
/*}*/

canvas#radar1
{
	position: relative;
	display: block;
	margin: 0px auto;
}