@charset "utf-8";
#font-size{
	font-size: 15px;
line-height: 25px;
	}
/*header*/
#header{
	position:relative;
	width:1000px;
	margin:0 auto;
	}
#hearderBG{
	position:relative;
	background:url(../images/headerBG.jpg)center 0  no-repeat;
	width:100%;
	height:163px;
	min-width:1000px;
	}
#MsLogo{
	position:absolute;
	left:0;
	top:20px;
	}
.title{
	position:absolute;
	left:0;
	top:114px;
	}
#blog{
	position:absolute;
	right:0;
	top:20px;
	}
#blog li{
	float:left;
	margin-left:5px;
	}
#blog ul #game{
	background-image:url(../images/g.jpg);
	width:25px;
	height:25px;	
	}
#blog ul #game:hover{
	background-position:25px 0;	
	}
#blog ul #fb{
	background-image:url(../images/f_25.jpg);
	width:25px;
	height:25px;	
	}
#blog ul #fb:hover{
	background-position:25px 0;	
	}
#blog ul #twitter{
	background-image:url(../images/t_25.jpg);
	width:25px;
	height:25px;
	}
#blog ul #twitter:hover{
	background-position:25px 0;	
	}
#blog ul #plurk{
	background-image:url(../images/p_25.jpg);
	width:25px;
	height:25px;
	}
#blog ul #plurk:hover{
	background-position:25px 0;	
	}
#blog ul #mail{
	background-image:url(../images/m_25.jpg);
	width:25px;
	height:25px;
	}
#blog ul #mail:hover{
	background-position:25px 0;	
	}
#blog ul #index{
	background-image:url(../images/index.jpg);
	width:83px;
	height:25px;
	}
#blog ul #index:hover{
	background-position:83px 0;	
	}
	
/*content*/
#content-index{
	position:relative;
	width:1000px;
	margin:0 auto;
	margin-top: -33px;
	}
#content{
	position:relative;
	width:1000px;
	margin:0 auto;
	}
#contentBG{
	position:relative;
	background:url(../images/bg1.jpg)center 0;
	width:100%;
	min-width:1000px;
	}
#contentBG2{
	position:relative;
	background:url(../images/bg2.jpg)center 0;
	width:100%;
	min-width:1000px;
	}
.paperBGup{
	position:relative;
	background-image:url(../images/paperBG_up.png);
	width:1000px;
	height:22px;
	}
.paperBGcontent{
	position:relative;
	background-image:url(../images/paperBG_contact.png);
	width:1000px;
	background-repeat:repeat-y;
	padding:40px 45px 80px 45px;
	}
/*StartProgram*/	
#txt1{
	float:left;
	width:410px;
	height:290px;	
	}
#step-title{
	position: relative;
    left: 140px;
	}
.ss{
	border: 1px solid #2B5F74;
	-moz-box-shadow:0px 2px 2px #999 inset;              /* For Firefox3.6+ */
	-webkit-box-shadow:0px 2px 2px #999 inset;         /* For Chrome5+, Safari5+ */
	box-shadow:0px 2px 2px #999 inset;                  /* For Latest Opera */
	}
#step{
	position: relative;
	left: 70px;
	display: inline-block;
	width:427px;
	font-size: 15px;
	color: #2B5F74;
	font-weight: bold;
	font-family:"微軟正黑體";
	line-height: 22px;
	}
#step1{
	background-image: url(../images/step_bg.png);
	background-repeat:repeat;
	border: 1px solid #31cae6;
	width: 453px;
	height: 444px;

	}
#state{
	font-size: 15px;
color: #2B5F74;
font-weight: bold;
font-family: "微軟正黑體";
line-height: 22px;
position: absolute;
top:394px;
	}
#step1-agree{
	position:absolute;
	top: 64px;
    left: 23px;
	background-color:#eb730c;
	width:405px;
	height:55px;
	}
#step1-agree #agree-box input{
	width: 18px;
	height: 18px;
	position: absolute;
	top: 5px;
	left: 5px;
	}
#step1-agree #agree-txt{
	color: white;
	position: absolute;
	top: 6px;
	left: 29px;
	}
#step1-privacy{
	width: 405px;
	position:absolute;
	top: 146px;
    left: 23px;
	}
	
#step2{
	background-image: url(../images/step_bg.png);
	background-repeat:repeat;
	border: 1px solid #31cae6;
	width: 427px;
	height: 274px;
	position: relative;
	top: 20px;
	}
#step2-phone{
	position: absolute;
	top: 80px;
	left: 23px;
	width: 384px;
	}
#step2-txt{
	position: absolute;
	top: 120px;
	left: 23px;
	width: 384px;
	
	}
#step2-submit{
	background-image: url(../images/submit_btn.png);
	width: 155px;
	height: 33px;
	position: absolute;
	top: 224px;
    left: 257px;
	}
#step2-submit:hover{
	background-position:155px 0;
	}

#step3{
	background-image: url(../images/step_bg.png);
	background-repeat:repeat;
	position: relative;
	top: 40px;;
	border: 1px solid #31cae6;
	width: 427px;
	height:395px;
	}

#step3-password{
	position: absolute;
	top: 80px;
	left: 30px;
	}
#step3-account{
	position: absolute;
	top: 122px;
	left: 30px;
	}
#step3-company{
	position: absolute;
	top: 286px;
	left: 30px;
	}
#step3-lastname{
	position: absolute;
	top:  204px;
	left: 30px;
	}
#step3-name{
	position: absolute;
	top:  244px;
	left: 30px;
	}
#step3-howto-btn{
	background-image:url(../images/RegistrationAzure_btn.png);
	width: 266px;
    height: 33px;
	position:absolute;
	top: 159px;
left: 29px;
	}
#step3-howto-btn:hover{
	background-position:266px 0;
    }
#step3-btn{
	background-image: url(../images/next.png);
	width: 155px;
	height: 33px;
	position: absolute;
	top: 382px;
	left: 247px;
	}
#step3-btn:hover{
	background-position:155px 0;
	}
#step4{
	background-image: url(../images/step_bg.png);
	background-repeat:repeat;
	position: relative;
	top: 60px;
	border: 1px solid #31cae6;
	width: 427px;
	height:368px;
	margin-bottom: 50px;
	}
#step4-girl-lastname{
	position: absolute;
	top: 80px;
	left: 30px;
	}
#step4-girl-name{
	position: absolute;
	top: 122px;
	left: 30px;
	}
#step4-howto{
	position: absolute;
	top: 164px;
	left: 30px;
	}
#step4-upload{
	position: absolute;
	top:  236px;
	left: 30px;
	}
#howto-btn2{
	background-image:url(../images/SetUpAzure_btn.png);
	width:249px;
	height:33px;
	position: absolute;
    display: inline-block;
	}
#howto-btn2:hover{
	background-position:249px 0;
    }

#step4-btn{
	background-image: url(../images/complete.png);
	width: 155px;
	height: 33px;
	position: absolute;
	top: 313px;
	left: 247px;
	}
#step4-btn:hover{
	background-position:155px 0;
	}
#compelete-img{
	position:relative;
	top: 0px;
	left: 80px;
	bottom:200px;
	width:817px;
	height:475px;
	padding-bottom:90px;
	}
#more-mission{
	position:absolute;
	top: 346px;
    right: 26px;
	background-image: url(../images/mission.png);
	width: 212px;
	height:33px;
	}
#more-mission:hover{
	background-position:213px;
	}
/*Achievement-report*/
#Achievement-reportBG{
	position:relative;
	background-image:url(../images/Achievement_reportBG.png) ;
	background-repeat:no-repeat;
	width:909px;
	height:754px;
	padding-bottom:90px;
	}
#progress{
	position:absolute;
	width:320px;
	height:320px;
	top:122px;
	left:103px;
	}
#circle{
	position:absolute;
	}
#percent{
	color:#eb6363;
	font-family: 'Arial Black', Gadget, sans-serif;
	font-size:59px;
    position: absolute;
    top: 146px;
    left: 111px;
	}
#greenline{
	float: left;
margin-left: 13px;
	}
#girl-status{
	position: absolute;
    left: 33px;
    top: 547px;
	}
#status-txt-blue{
	color: #FFF;
	padding-right: 10px;
	float: right;
	margin-top: 7px;
	font-size: 15px;
	/*display:none;*/
	}
#status-txt-yellow{
	color: #FFF;
	padding-right: 10px;
	float: right;
	margin-top: 7px;
	font-size: 15px;
	/*display:none;*/
	}
#status-txt-green{
	color: #FFF;
	padding-right: 10px;
	float: right;
	margin-top: 7px;
	font-size: 15px;
	/*display:none;*/
	}
#status-txt-blue2{
	color: #548cbd;
	padding-right: 10px;
	font-size: 15px;
	float: left;
	margin-left: 10px;
	margin-top: 7px;
	/*display:none;*/
	}
#status-txt-green2{
	color: #89ba54;
	padding-right: 10px;
	font-size: 15px;
	float: left;
	margin-left: 10px;
	margin-top: 7px;
	/*display:none;*/
	}
#status-txt-yellow2{
	color: #ebb427;
	padding-right: 10px;
	font-size: 15px;
	float: left;
	margin-left: 10px;
	margin-top: 7px;
	/*display:none;*/
	}

#green{
	width:440px;
	height:30px;
	position:absolute;
	top:0
	}
#yellow{
	width:440px;
	height:30px;
	position:absolute;
	top:40px
	}
#yellowline{
	float: left;
margin-left: 13px;
	}
#blue{
	width:440px;
	height:30px;
	position:absolute;
	top:80px
	}
#blueline{
	float: left;
margin-left: 13px;
	}
#rank{
	position:absolute;
	top: 54px;
	left: 513px;
	}
.rank1{
	width:374px;
	height:38px;
	background-color:#44bdd2;
	margin-top:5px;
	position:relative;
	}
.rank-number{
	font-family: Arial Black;
	font-size: 21px;
	position: absolute;
	top: 11px;
	color: #fff;
	left: 5px;
	}
.rank-name{
	color: #FFF;
	font-size: 15px;
	position: absolute;
	top: 13px;
	left: 40px;
	}
.player-t{
	color: #FFF;
	font-size: 15px;
	position: absolute;
	top: 13px;
	left: 237px;
	}
.player{
	color: #FFF;
	font-size: 15px;
	position: absolute;
	top: 13px;
	left: 297px;
	}
.rank2{
	width:374px;
	height:38px;
	background-color:#FFF;
	margin-top:5px;
	position:relative;
	border: 1px solid #44bdd2;	
	}
.rank-number2{
	font-family: Arial Black;
	font-size: 21px;
	position: absolute;
	top: 11px;
	color: #44bdd2;
	left: 5px;
	}
.rank-name2{
	color: #44bdd2;
	font-size: 15px;
	position: absolute;
	top: 13px;
	left: 40px;
	}
.player-t2{
	color: #44bdd2;
	font-size: 15px;
	position: absolute;
	top: 13px;
	left: 237px;
	}
.player2{
	color: #44bdd2;
	font-size: 15px;
	position: absolute;
	top: 13px;
	left: 297px;
	}
#clear{
	clear:both;	}
/*footer*/
#footer{
	position:relative;
	width:1000px;
	margin:0 auto;
	}
#footerBG{
	position:relative;
	top:-25px;
	background:url(../images/footerBG.png)center 0 no-repeat;
	height:94px;
	}
#copyright{
	position: absolute;
	left: 300px;
	top: 66px;
	text-align: center;
	line-height: 18px;
	font-size: 11px;
	}
#copyright a:hover{
	text-decoration: underline;
	color:#000;
    }
#copyright a{
	text-decoration: none;
	color:#000;
    }
	
/*建立AZURE說明頁*/
#explanation-bg {
	position: relative;
	background-image: url(../images/paperBG_contact.png);
	width: 1000px;
	background-repeat: repeat-y;
	padding: 0px 0px 80px 7px;
	position: relative;
	}

.explanation{
	font-size:15px;
	color:#4b4b4b;
	}
.explanation-title-bg{
	background:url(../images/e_title.png);
	width:985px;
	height:84px;
	position: relative;
	}
.explanation-title-bg2{
	background-image: url(../images/e_title2.jpg);
	width:985px;
	height:84px;
	position: relative;	
	}
.explanation-title{
	font-size: 17px;
	font-weight: bold;
	color: #24a2b9;
	width:163px;
	height:30px;
	position: absolute;
	top: 36px;
    left: 33px;
	}
.explanation-title2 {
	font-size: 17px;
	font-weight: bold;
	color: #24a2b9;
	width: 210px;
	height: 30px;
	position: absolute;
	top: 36px;
	left: 33px;
	}
.explanatio-area{
	position:relative;
	margin: 30px;
    width: 950px;
	margin: 30px 30px 50px 30px;
	}
.explanation-txt{
	position:relative;
	margin: 10px 20px 10px 0px;
	line-height:24px;
	}
.explanation-img{
	position: relative;
	margin: 0 0 0 0px;
	}
.step-icon{
	position: relative;
    top: 7px;
	}
	
/*養成攻略頁*/
.informatation-paperBGcontent {
	position: relative;
	background-image: url(../images/paperBG_contact.png);
	width: 1000px;
	background-repeat: repeat-y;
	padding: 0;
	}

.informatation-title1-bg{
	background-image:url(../images/p_title_bg1.png);
	position:relative;
	left:8px;
	width:985px;
	height:77px;
	}
.informatation-title2-bg{
	background-image:url(../images/p_title_bg2.png);
	position:relative;
	left:8px;
	width:985px;
	height:77px;
	}
.informatation-title3-bg{
	background-image:url(../images/p_title_bg3.png);
	position:relative;
	left:8px;
	width:985px;
	height:77px;
	}
.informatation-title{
	font-size: 17px;
	font-weight: bold;
	color: #FFF;
	width:250px;
	height:30px;
	position: absolute;
	top:32px;
	}
.informatation-area{
	position:relative;
	width:930px;
	margin: 20px 35px 10px 35px;
	font-size:15px;
	color:#4b4b4b;
	line-height: 25px;
	}
.dot-list{
	list-style-type: disc;
	margin: 0 0 30px 25px;
	}
.number-list{
	list-style-type: decimal;
	margin: 0 0 30px 25px;}
.spacing{
	left: 8px;
	position: relative;
	}
.spacing2{
	position:relative;
	height:75px;
	}
.highlight-txt{
	font-size:15.5px;
	color:#24a2b9;
	}
.informatation-left1{
	width: 53%;
	margin-right: 10px;
	float:left;
	}
.informatation-right1{
	width: 45%;
	float:left;
	}
.informatation-left2{
	width: 33%;
	float: left;
	margin-right: 20px;
	}
.informatation-right2{
	float: left;
    width: 55%;
	}
.informatation-bottom{
	margin:20px 0 20px 0;
	}
.informatation-bottom2{
	margin: 20px 0px 20px 60px;
	}

/* 以下是喜米新增的部分 */

#divcss5{
	padding:5px 0 0 0;
	width:92%;
}
#divcss5 p{
	margin:10px 0 10px 0;
}
#divcss5 .arrow{
	position: relative;
    top: 7px;
	}

/* Definition Lists */

#divcss5 dt{
	color:#24a2b9;
	font-size:17px;
	left:0;
	position:relative;
	cursor:pointer;
	margin-top:15px;
	margin-left:21px;
	display:block;
}

#divcss5 li{
	list-style:decimal;
	margin-left:24px;
}

#divcss5 dt:hover{ color:#24a2b9;}

#divcss5 dt .icon{
	background:url('../images/oc_icon.png') no-repeat;
	height:15px;
	left:-20px;
	position:absolute;
	top:0;
	width:15px;
}

#divcss5 dt.opened .icon{ background-position:left bottom;}

#divcss5 dt .icon2{
	background:url('../images/oc_icon.png') no-repeat;
	height:15px;
	left:-20px;
	position:absolute;
	top:13px;
	width:15px;
}

#divcss5 dt.opened .icon2{ background-position:left bottom;}

#divcss5 dd .box{ width:100% auto; position:relative;}

#divcss5 dd .box2{ width:100% auto; position:relative; margin-top:20px;}

#divcss5 dd .icon{ position:absolute; top:-6px; left:0px;}

#divcss5 dd .icon_text{ margin-left:35px;}

#divcss5 dd .img{ margin-left:35px; margin-top:10px; display:block;}

#divcss5 dd{
	font-size:15px;
	color:#4b4b4b;
	display:none;
	margin:15px 0 0 21px;
	line-height:21px;
}


/* 第一排圖示 */ 
.rule_box1 {
	position:relative;
	width:100%;
	height:190px;
}
.rule_box1 .blue1_img {
	position:absolute;
	left:0;
	top:10px;
	right:0px;
}
.rule_box1 .blue1_text {
	color:#24a2b9;
	position:absolute;
	left:80px;
	top:28px;
	right:0px;
}
.rule_box1 .blue2_img {
	position:absolute;
	left:0;
	top:90px;
	right:0px;
}
.rule_box1 .blue2_text {
	color:#24a2b9;
	position:absolute;
	left:80px;
	top:105px;
	right:0px;
}
.rule_box1 .blue3_img {
	position:absolute;
	left:400px;
	top:10px;
	right:0px;
}
.rule_box1 .blue3_text {
	color:#24a2b9;
	position:absolute;
	left:480px;
	top:28px;
	right:0px;
}
.rule_box1 .blue4_img {
	position:absolute;
	left:400px;
	top:90px;
	right:0px;
}
.rule_box1 .blue4_text {
	color:#24a2b9;
	position:absolute;
	left:480px;
	top:105px;
	right:0px;
}


/* 第二排圖示 */ 
.rule_box2 {
	position:relative;
	width:100%;
	height:60px;
}
.rule_box2 .blue1_img {
	position:absolute;
	left:0;
	top:10px;
	right:0px;
}
.rule_box2 .blue1_text {
	color:#24a2b9;
	position:absolute;
	left:80px;
	top:28px;
	right:0px;
}
.rule_box2 .blue2_img {
	position:absolute;
	left:400px;
	top:10px;
	right:0px;
}
.rule_box2 .blue2_text {
	color:#24a2b9;
	position:absolute;
	left:480px;
	top:28px;
	right:0px;
}


/* 新增文字定位 */
p { 
	width:91%;
}

/* 內文 標題加數字圖標 */

.title_box {
	position:relative;
	width:100%;
	height:40px;
	margin-bottom:20px;
}

.title_box .icon {
	position:absolute;
	top:0;
	left:0;	
}
.title_box .text {
	position:absolute;
	top:10px;
	left:40px;	
}
.title_box2 {
	position:relative;
	width:91%;
	height:60px;
	top:20px;
	margin-bottom:20px;
}
.title_box2 .icon {
	position:absolute;
	top:0;
	left:0;	
}
.title_box2 .text {
	position:absolute;
	top:10px;
	left:40px;	
}


/* 分隔線 */ 
.rule_line {
	position:relative;
	width:100% auto;
	margin-bottom:20px;
	left:-39px;
}

/* 首頁設計 */

.index_box {
	position:relative;
	width:100%;
	height:530px;
	margin-top:-76px;
}
.index_box .person{
	position:absolute;
	top: -22px;
	right:20px;
}
.index_box .logo{
	position:absolute;
	bottom:0;
	left:-10px;
}



.index_btnbox{
	position:absolute;
	width:100%;
	top:60px;
	left:87px;
}


/* 首頁按鈕第一組 */
.index_box .btn1 {
	position:absolute;
    background:url('../images/index_btn1.png') no-repeat;
	width:203px;
	height:50px;
}
.index_box .btn1 li a{height:50px; width:203px; display:block; line-height: 9000px; overflow: hidden;}
.index_box .btn1 ul{list-style:none; margin: 0; padding: 0;}
.index_box .btn1 a:hover{background:url(../images/index_btn1.png) 0 50px}


/* 首頁按鈕第二組 */
.index_box .btn2 {
	position:absolute;
    background:url('../images/index_btn2.png') no-repeat;
	width:203px;
	height:50px;
	top:60px;
}
.index_box .btn2 li a{height:50px; width:203px; display:block; line-height: 9000px; overflow: hidden;}
.index_box .btn2 ul{list-style:none; margin: 0; padding: 0;}
.index_box .btn2 a:hover{background:url(../images/index_btn2.png) 0 50px}


/* 首頁按鈕第三組 */
.index_box .btn3 {
	position:absolute;
    background:url('../images/index_btn3.png') no-repeat;
	width:203px;
	height:50px;
	top:120px;
}
.index_box .btn3 li a{height:50px; width:203px; display:block; line-height: 9000px; overflow: hidden;}
.index_box .btn3 ul{list-style:none; margin: 0; padding: 0;}
.index_box .btn3 a:hover{background:url(../images/index_btn3.png) 0 50px}


/* 首頁按鈕第四組 */
.index_box .btn4 {
	position:absolute;
    background:url('../images/index_btn4.png') no-repeat;
	width:203px;
	height:50px;
	top:180px;
}
.index_box .btn4 li a{height:50px; width:203px; display:block; line-height: 9000px; overflow: hidden;}
.index_box .btn4 ul{list-style:none; margin: 0; padding: 0;}
.index_box .btn4 a:hover{background:url(../images/index_btn4.png) 0 50px}


/* 首頁按鈕第五組 */
.index_box .btn5 {
	position:absolute;
    background:url('../images/index_btn5.png') no-repeat;
	width:203px;
	height:50px;
	top:240px;
}
.index_box .btn5 li a{height:50px; width:203px; display:block; line-height: 9000px; overflow: hidden;}
.index_box .btn5 ul{list-style:none; margin: 0; padding: 0;}
.index_box .btn5 a:hover{background:url(../images/index_btn5.png) 0 50px}

.explanation-title-bg3{
	background-image: url(../images/e_title3.jpg);
	width:985px;
	height:84px;
	position: relative;	
	}
.explanation-title-bg4{
	background-image: url(../images/e_title4.jpg);
	width:985px;
	height:84px;
	position: relative;	
	}
.explanation-title-bg5{
	background-image: url(../images/e_title5.jpg);
	width:985px;
	height:84px;
	position: relative;	
	}
.explanation-title4 {
	font-size: 17px;
	font-weight: bold;
	color: #24a2b9;
	width: 260px;
	height: 30px;
	position: absolute;
	top: 36px;
	left: 33px;
	}
.explanation-title3 {
	font-size: 17px;
	font-weight: bold;
	color: #24a2b9;
	width: 240px;
	height: 30px;
	position: absolute;
	top: 36px;
	left: 33px;
	}
.step-arrow{
	position: relative;
    top: 7px;
	}
.step-red_font{
	color:#F00;
	}
.explanation-txt table{
	border:1px #cdcdcd solid;
}
.explanation-txt table th{
	background-color:#000;
	color:#fff;
	padding:3px;
	margin:3px;
}
.explanation-txt table td{
	padding:3px;
	margin:3px;
	border:1px #cdcdcd solid;
}
.font-red {
    color:#F00;
}
.font_15p{
font-size: 18px;
line-height: 24px;
font-weight: 700;
margin-top: -31px;
}
#mymenu ul{
	margin-top:10px;
}

#mymenu li{
	list-style:none;
	margin:0;
}

.hight-light{
	height: 33px;
background-color: #134050;
color: white;
padding: 4px;	
	}