@charset "utf-8";
/* CSS Document */

body{background:url(../images/deskc_bg.png) center top;}

/* HEADER */
.topBarBg{width:100%; height:90px; position:absolute; left:0; top:0; background:url(../images/topbarbg.png); margin-top:-100px;}
.topBarBgOn{margin-top:0px;}
.logo{position:absolute; left:50%; top:392px; margin-left:-76px;}

/* BOD */
/* hexagon: a=130; b=75; x=-81px; y=332px; */
.hexagon a,.hexagon span{width:162px; height:140px; display:block; position:absolute; left:50%;}
.hexagon span{opacity:.5; filter:alpha(opacity=50);}

.hexagon1{margin-left:calc(-81px + 130px*0); top:calc(332px - 75px*2);}
.hexagon2{margin-left:calc(-81px + 130px*1); top:calc(332px - 75px*1);}
.hexagon3{margin-left:calc(-81px + 130px*1); top:calc(332px + 75px*1);}
.hexagon4{margin-left:calc(-81px + 130px*0); top:calc(332px + 75px*2);}
.hexagon5{margin-left:calc(-81px - 130px*1); top:calc(332px + 75px*1);}
.hexagon6{margin-left:calc(-81px - 130px*1); top:calc(332px - 75px*1);}

.hexagon7{margin-left:calc(-81px + 130px*0); top:calc(332px - 75px*4);}
.hexagon8{margin-left:calc(-81px + 130px*1); top:calc(332px - 75px*3);}
.hexagon9{margin-left:calc(-81px + 130px*2); top:calc(332px - 75px*2);}
.hexagon10{margin-left:calc(-81px + 130px*2); top:calc(332px - 75px*0);}
.hexagon11{margin-left:calc(-81px + 130px*2); top:calc(332px + 75px*2);}
.hexagon12{margin-left:calc(-81px + 130px*1); top:calc(332px + 75px*3);}
.hexagon13{margin-left:calc(-81px + 130px*0); top:calc(332px + 75px*4);}
.hexagon14{margin-left:calc(-81px - 130px*1); top:calc(332px + 75px*3);}
.hexagon15{margin-left:calc(-81px - 130px*2); top:calc(332px + 75px*2);}
.hexagon16{margin-left:calc(-81px - 130px*2); top:calc(332px - 75px*0);}
.hexagon17{margin-left:calc(-81px - 130px*2); top:calc(332px - 75px*2);}
.hexagon18{margin-left:calc(-81px - 130px*1); top:calc(332px - 75px*3);}

.hexagon a.hexagonTop1{left:300px; top:10px; margin-left:0; width:81px; height:70px; background-size:100%;}
.hexagon a.hexagonTop2{left:400px; top:10px; margin-left:0; width:81px; height:70px; background-size:100%;}
.hexagon a.hexagonTop3{left:500px; top:10px; margin-left:0; width:81px; height:70px; background-size:100%;}
.hexagon a.hexagonTop4{left:600px; top:10px; margin-left:0; width:81px; height:70px; background-size:100%;}
.hexagon a.hexagonTop5{left:700px; top:10px; margin-left:0; width:81px; height:70px; background-size:100%;}
.hexagon a.hexagonTop6{left:800px; top:10px; margin-left:0; width:81px; height:70px; background-size:100%;}

.btn_deskc{background:url(../images/btn_deskc.png) center center no-repeat;}
.btn_deskc:hover{background-image:url(../images/btn_deskc2.png);}
.btn_design{background:url(../images/btn_design.png) center center no-repeat;}
.btn_design:hover{background-image:url(../images/btn_design2.png);}
.btn_notes{background:url(../images/btn_notes.png) center center no-repeat;}
.btn_notes:hover{background-image:url(../images/btn_notes2.png);}
.btn_links{background:url(../images/btn_links.png) center center no-repeat;}
.btn_links:hover{background-image:url(../images/btn_links2.png);}


.btn_design_original{background:url(../images/btn_design_original.png) center center no-repeat;}
.btn_design_original:hover{background-image:url(../images/btn_design_original2.png);}
.btn_design_creative{background:url(../images/btn_design_creative.png) center center no-repeat;}
.btn_design_creative:hover{background-image:url(../images/btn_design_creative2.png);}

.btn_links_cool{background:url(../images/btn_links_cool.png) center center no-repeat;}
.btn_links_cool:hover{background-image:url(../images/btn_links_cool2.png);}
.btn_links_usually{background:url(../images/btn_links_usually.png) center center no-repeat;}
.btn_links_usually:hover{background-image:url(../images/btn_links_usually2.png);}
.btn_links_partners{background:url(../images/btn_links_partners.png) center center no-repeat;}
.btn_links_partners:hover{background-image:url(../images/btn_links_partners2.png);}

.btn_notes_demo{background:url(../images/btn_notes_demo.png) center center no-repeat;}
.btn_notes_demo:hover{background-image:url(../images/btn_notes_demo2.png);}
.btn_notes_as{background:url(../images/btn_notes_as.png) center center no-repeat;}
.btn_notes_as:hover{background-image:url(../images/btn_notes_as2.png);}
.btn_notes_css{background:url(../images/btn_notes_css.png) center center no-repeat;}
.btn_notes_css:hover{background-image:url(../images/btn_notes_css2.png);}
.btn_notes_jsjq{background:url(../images/btn_notes_jsjq.png) center center no-repeat;}
.btn_notes_jsjq:hover{background-image:url(../images/btn_notes_jsjq2.png);}
.btn_notes_html{background:url(../images/btn_notes_html.png) center center no-repeat;}
.btn_notes_html:hover{background-image:url(../images/btn_notes_html2.png);}
.btn_notes_other{background:url(../images/btn_notes_other.png) center center no-repeat;}
.btn_notes_other:hover{background-image:url(../images/btn_notes_other2.png);}


/* INPAGEBOX */
.inpageBox{width:960px; height:540px; background:#fff; position:absolute; left:50%; top:125px; margin-left:-480px; overflow:hidden;}
.inpageBox ul li{width:240px; height:60px; line-height:60px; text-align:center; float:left;}
.inpageBox ul li.tit{font-size:24px; font-family:Verdana, Geneva, sans-serif; color:#bbb;}
.inpageBox ul li a{width:100%; height:60px; display:block; color:#444;}
.inpageBox ul li a:hover{background:#444; color:#ddd; border-radius:8px;}

/* FOOTER */
.footer{width:620px; height:20px; line-height:20px; text-align:right; color:#bbb; font-size:12px; position:absolute; right:20px; top:20px;}


/* TIPS */


/* Hexagon Ctrl */
.hexagon0{margin-left:-81px; top:332px; background-image:url(../images/btn_back.png);}
.hexagon0:hover{background-image:url(../images/btn_back2.png);}
.hexagon a.hexagonTop0{left:200px; top:10px; margin-left:0; width:81px; height:70px; background-size:100%;}

.hexagon_logo{left:100px; top:35px;}


/* TRANSITION */
.logo,.hexagon a,.hexagon span,#TBB{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}


/* BodCon */
#blackBox{z-index:1002;}
.bodCon{width:80%; margin:0 5%; padding:0 5%; overflow:auto; position:absolute; left:0; top:0; background:#fff; border:#fff 0 solid; border-radius:20px; box-shadow:#000 0px 0px 15px; z-index:1003;}
.bodCon h1{line-height:50px; font-size:30px; color:#111;}
.bodCon h2{line-height:30px; font-size:18px; color:#333; padding-top:10px;}
.bodCon p{line-height:24px; font-size:14px; margin:10px 0; color:#333;}
.bodCon h6{line-height:24px; font-size:14px; margin:10px 0; color:#888; padding:0 20px; font-style:italic; font-weight:normal;}
.bodCon a,.bodCon a:visited{color:#888;}
.bodCon i{color:#888; margin:0 10px;}
.bodCon i strong{color:#333;}
.bodCon a.closeBodCon{width:20px; height:20px; line-height:20px; font-size:12px; font-family:"Comic Sans MS"; text-align:center; text-decoration:none; display:block; background:#ddd; color:#000; border-radius:10px; position:fixed; right:6%; top:6%;}
.bodCon a.closeBodCon:hover{background:#000; color:#fff;}