@import url('../css/reset.css');

html,body{width:100%;height:100%;background: #02538B;margin:0;font-family: "微軟正黑體";font-size:20px;}
#container{position:relative; width:100%;height:100%; overflow-x:hidden;overflow-y:scroll;}
#content{position:relative; width:1024px;height:768px;margin:0 auto ;}
#container img{position:relative;}
#div1{position:absolute;top:0px;left:0px;z-index:2;}
#div2{position:absolute;top:0px;left:0px;z-index:2;}
#div3{position:absolute;top:0px;left:0px;z-index:3;margin:0 auto;}
#div4{position:absolute;top:0px;left:0px;z-index:3;margin:0 auto;}
#title img{position:relative;top:15px;}
#title{position:absolute;top:30px;left:70px;z-index:5;color:yellow;font-size:38px;}
#title span{color:yellow;font-size:25px;color:white;position:relative;top:-5px;}

.subject{z-index:4;position:relative;}
.subject > div{position:absolute;cursor:pointer;background-color:white; filter:alpha(opacity=0); opacity:0;}
#activity{top:555px;left:470px;width:230px;height:70px;}
#cloud{top:510px;left:290px;width:120px;height:100px}
#contact{top:610px;left:180px;width:120px;height:100px}
#azure{top:560px;left:750px;width:100px;height:100px}
#knight{top:340px;left:840px;width:100px;height:200px}
#app{top:330px;left:700px;width:120px;height:120px}
#girls{top:120px;left:770px;width:100px;height:140px}
#php{top:270px;left:560px;width:80px;height:100px}
#asp{top:270px;left:440px;width:80px;height:100px}
#server{top:385px;left:455px;width:170px;height:95px}
#test{top:210px;left:280px;width:100px;height:230px}
#VM{top:420px;left:130px;width:140px;height:120px}
#global{top:210px;left:60px;width:140px;height:120px}

.nav{position:relative;}
#cloud1,#azure1,#knight1,#app1,#girls1,#php1,#asp1,#server1,#girl1,#test1,#VM1{opacity:1;z-index:9;position:absolute;top:170px;left:30px;}
#cloud2,#azure2,#knight2,#app2,#girls2,#php2,#asp2,#server2,#girl2,#test2,#VM2{opacity:1;z-index:9;position:absolute;top:170px;left:231px;}
#cloud3,#azure3,#knight3,#app3,#girls3,#php3,#asp3,#server3,#girl3,#test3,#VM3{opacity:1;z-index:9;position:absolute;top:170px;left:432px;}
#cloud4,#azure4,#knight4,#app4,#girls4,#php4,#asp4,#server4,#girl4,#test4,#VM4{opacity:1;z-index:9;position:absolute;top:170px;left:633px;}
#cloud5,#azure5,#knight5,#app5,#girls5,#php5,#asp5,#server5,#girl5,#test5,#VM5{opacity:1;z-index:9;position:absolute;top:170px;left:834px;}
#cloudName,#azureName,#knightName,#appName,#girlsName,#phpName,#aspName,#serverName,#girlName,#testName,#VMName{
  opacity:1;z-index:9;position:absolute;top:110px;left:30px;background:url(../images/activityName.png);font-size:40px;padding:10px 20px 10px 20px;color:#F0E535;}

#phpclose,#aspclose{opacity:1;z-index:9;position:absolute;top:170px;left:1035px;cursor:pointer;}
#azureclose,#cloudclose,#testclose,#VMclose,#appclose,#serverclose{opacity:1;z-index:9;position:absolute;top:170px;left:834px;cursor:pointer;}
#knightclose{opacity:1;z-index:9;position:absolute;top:170px;left:433px;cursor:pointer}

#knight1,#knight2,#knightclose,#knightName{margin:0 0 0 30%}

#activity1{opacity:1;z-index:9;position:absolute;top:170px;left:-95px}
#activity2{opacity:1;z-index:9;position:absolute;top:170px;left:104px;}
#activity3{opacity:1;z-index:9;position:absolute;top:170px;left:305px;}
#activity4{opacity:1;z-index:9;position:absolute;top:170px;left:504px;}
#activity5{opacity:1;z-index:9;position:absolute;top:170px;left:705px;}
#activity6{opacity:1;z-index:9;position:absolute;top:170px;left:904px;}
#activityclose{opacity:1;z-index:9;position:absolute;top:170px;left:1105px;cursor:pointer;}
#activityName{opacity:1;z-index:9;position:absolute;top:110px;left:-95px;background:url(../images/activityName.png);font-size:40px;padding:10px 20px 10px 20px;color:#F0E535;}

#global1,#girl1,#contact1{background:#F0E535;width:810px;height:310px;opacity:1;z-index:9;position:absolute;top:170px;left:100px;padding:30px 20px 0 20px;line-height:1.5em;}
#globalclose,#girlclose,#contactclose{opacity:1;z-index:9;position:absolute;top:170px;left:910px;cursor:pointer;}
#globalName,#girlName,#contactName{opacity:1;z-index:9;position:absolute;top:110px;left:100px;background:url(../images/activityName.png);font-size:40px;padding:10px 20px 10px 20px;color:#F0E535;}
#global1 span,#girl1 span{background:white;display:block;padding:15px 25px 0 25px;height:60px;position:absolute;top:220px;left:630px;color:#27A4D0;}
#global1 span a,#girl1 span a{text-decoration:none;color:#27A4D0}

#footer{position:absolute;top:850px;left:25px;z-index:5;color:white;font-size:16px;height:100px}
#footer hr{ border-top:1px solid white;border-left:none;border-bottom:none;border-right:none;}
#footer img{margin-right:22px;position:relative;top:2px;}
#footer span{margin-left:60px;}
#footer a{text-decoration:none;color:white;}
#footer a:hover{text-decoration:underline ;color:#EDE8E8}

a img:hover{border:none;border-bottom:3px solid red;}

#footer #fb{margin:0 0 0 50px;position:relative;top:4px}
#footer #fb img:hover{border:none}
#footer span img{position:relative;top:4px}

/*----------------------------------------------------------------------------------------------Edit By Toto---*/

#girl1{background:#fff;height:467px;}
#girl1 p{width:475px;font-size:.8em}
#girl1 span{position:relative;top:140px!important;left:45px;background:#26519F!important;width:150px;}
#girl1 span:hover{background:#1C4081!important;}
#girl1 span a{color:#fff!important;}

#news{width:886px;height:82px;position:absolute;bottom:-75px;left:48px;background:url(../images/news.png) 0 0 no-repeat;z-index:9;padding:18px 0 0 0}
#news .frame{width:748px;height:54px;position:relative;overflow:hidden;left:133px}
#news ul{width:100%;height:100%;position:relative;}
#news li{font-size:15px;height:100%;padding:20px 0 0 20px}
#news a{font-size:15px;text-decoration:none;color:#003A57}
#news a:hover{color:#24739B}

.mcloud{position:absolute;z-index:3;/*opacity:.5;filter:alpha(opacity=50);*/}
#mcloud-1{top:300px;left:-20%}
#mcloud-2{top:500px;left:55%}
#mcloud-3{top:200px;left:50%}
#mcloud-4{top:650px;left:0%}