@charset "utf-8";

#book_main{
width:960px;
height:680px;
padding:0;
margin-top:0;
margin-left:-480px;
margin-bottom:0;
margin-right:0;

background:rgba(255,255,100,0.5);

border-bottom:1px solid rgba(100,150,100,0.4);
box-shadow:0px 2px 2px 0px rgba(51,51,51,0.3);

-webkit-transition:all 1s linear;
transition:all 1s linear;

position:absolute;

overflow:hidden;

z-index:10;
}

.bm_def_posi{
top:70px;
left:50%;

-webkit-animation:bm_anime 1s ease -0.5s 1;
animation:bm_anime 1s ease -0.5s 1;
}

@-webkit-keyframes bm_anime{
0%{top:70px;}
50%{top:-2000px;}
100%{top:70px;}
}
@keyframes bm_anime{
0%{top:70px;}
50%{top:-2000px;}
100%{top:70px;}
}

#book_main > h1{
color:#006a38;
color:rgba(0,106,56,1.0);
font-size:14px;
line-height:12px;
height:10px;
padding:10px 20px 10px 30px;
margin:0;
background:#f4b633;
background:rgba(244,182,51,0.8);
position:relative;
top:0;
left:0;
text-shadow:2px 2px 4px rgba(0,0,0,0.5),-1px -1px 1px rgba(255,255,255,0.8),0px 0px 1px rgba(0,255,0,0.8);
overflow:hidden;
box-shadow:0px 2px 2px 0px rgba(51,51,51,0.3);
-webkit-transition:all 1s ease;
transition:all 1s ease;
z-index:55;
}

#book_main > h1:after{
content:url("../img/hmmk_c.png");
width:20px;
height:20px;
position:absolute;
top:5px;
left:5px;
}

#book_main > h1:before{
content:"";
width:100px;
height:30px;
background:#F00;
background:rgba(200,255,200,0.2);
position:absolute;
top:0px;
left:0px;
-webkit-animation:h1a1 10s linear infinite;
animation:h1a1 10s linear infinite;
}

@-webkit-keyframes h1a1{
0%{left:-100px;width:0px;}
4%{left:-100px;width:100px;}
8%,100%{left:1000px;width:0px;}
}
@keyframes h1a1{
0%{left:-100px;width:0px;}
4%{left:-100px;width:100px;}
8%,100%{left:1000px;width:0px;}
}

#kizi_foot{
color:#006a38;
color:rgba(0,106,56,0.8);
font-size:14px;
line-height:12px;
height:10px;
padding:10px 20px 10px 30px;
margin:0;
background:rgba(244,182,51,1.0);
-webkit-transition:all 1s ease;
transition:all 1s ease;
z-index:55;
position:relative;
bottom:0;
left:0;
}
#kizi_foot > p,div{
font-size:12px;
padding:0;
margin:0;
}

#kizi_shield{
width:100%;
height:100%;
font-size:300px;
line-height:200%;
text-align:center;
background:rgba(50,50,50,0.7);
color:#FFF;
cursor:pointer;
position:absolute;
top:0;
right:0;
z-index:300;
}

#kizi_cont{
display:block;
width:870px;
height:600px;
padding:10px 20px 10px 20px;
margin:0;
background:rgba(224,224,224,0.5);
-webkit-transition:all 1s ease;
transition:all 1s ease;
overflow:auto;
}

#cmboxs{
position:relative;
top:0;
left:0;
}

#leftbox{
width:340px;
min-height:400px;
padding:5px;
margin:0;
background:rgba(200,200,200,0.8);
position:absolute;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
.klb_posi{
top:44px;
left:20px;
-webkit-animation:ljani1 1s ease 1;
animation:ljani1 1s ease 1;
}

@-webkit-keyframes ljani1{
0%{top:-1000px;left:20px;}
100%{top:44px;left:20px;}
}
@keyframes ljani1{
0%{top:-1000px;left:20px;}
100%{top:44px;left:20px;}
}

#leftbox > h3{
font-size:12px;
padding:4px;
margin:0 0 2px;
background:#EEE;
border:1px solid #AAA;
text-shadow:1px 1px 2px gray;
}

#cmntbox{
width:500px;
min-height:400px;
padding:0px;
margin:0;
position:absolute;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
.kcl_posi{
top:44px;
left:20px;
}
.kcr_posi{
top:40px;
left:380px;
}

.wara_posi{
top:44px;
right:20px !important;
-webkit-animation:ljani2 1s ease 1;
animation:ljani2 1s ease 1;
}

@-webkit-keyframes ljani2{
0%{top:-1000px;right:20px;}
100%{top:44px;right:20px;}
}
@keyframes ljani2{
0%{top:-1000px;right:20px;}
100%{top:44px;right:20px;}
}

#cmntbox > p{
background:rgba(255,255,255,0.6);
padding:8px;
margin:0;
line-height:180%;
}

#cmntbox > div.ctb{
background:rgba(255,255,255,0.6);
padding:8px;
margin:0;
line-height:180%;
}

.main_p{
position:relative;
top:0px;
left:0;
z-index:50;
}

.sub_p1{
position:absolute;
top:-200px;
left:490px;
-webkit-transform: scale(0.25);
transform: scale(0.25);
cursor:pointer;
z-index:40;
box-shadow:4px 4px 10px rgba(51,51,51,0.2);
}

.sub_p2{
position:absolute;
top:0px;
left:490px;
-webkit-transform: scale(0.25);
transform: scale(0.25);
cursor:pointer;
z-index:40;
box-shadow:4px 4px 10px rgba(51,51,51,0.2);
}

.sub_p3{
position:absolute;
top:200px;
left:490px;
-webkit-transform: scale(0.25);
transform: scale(0.25);
cursor:pointer;
z-index:40;
box-shadow:4px 4px 10px rgba(51,51,51,0.2);
}

#cntmenu{
width:260px;
height:660px;
padding:10px 10px 10px 10px;
margin:0;
background:rgba(100,120,100,0.2);
overflow:hidden;
-webkit-transition:all 1s ease;
transition:all 1s ease;
z-index:45;
position:absolute;
top:0px;
right:0px;
}
#cntmenu:after{
font-family:'Impact','Verdana';
letter-spacing:0.1em;
content:"MENU";
color:rgba(255,255,255,0.8);
font-size:24px;
width:30px;
position: absolute;
top:20px;
right:6px;
-webkit-transition:all 1s ease;
transition:all 1s ease;
-webkit-transform: rotateZ(80deg);
transform: rotateZ(80deg);
}
#cntmenu:hover:after{
top:4px;
right:240px;
-webkit-transform: rotateZ(-10deg);
transform: rotateZ(-10deg);
color:#006;
color:rgba(0,0,102,1);
}

#cntmenu:before{
width:0;
height:0;
border-top:10px solid rgba(0,0,0,0);
border-bottom:10px solid rgba(0,0,0,0);
border-left:20px solid rgba(255,255,255,0.8);
content:"";
position: absolute;
top:100px;
right:10px;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}

#cntmenu:hover:before{
width:0;
height:0;
border-top:10px solid rgba(0,0,0,0);
border-bottom:10px solid rgba(0,0,0,0);
border-left:20px solid rgba(0,0,102,0.1);
content:"";
position: absolute;
top:100px;
right:10px;
-webkit-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}

#cntmenu:hover{
top:0px;
right:0px;
background:rgba(100,150,100,0.9);
}

.hm_defo_menu{
top:0px;
right:240px;
}

#cntmenu:hover > #mmnu{
opacity:1.0;
}

#mmnu{
display:block;
border:1px dotted #003;
width:220px;
position: absolute;
top:40px;
left:10px;
min-height:50px;
height:auto !important;
-webkit-transition:all 1s ease;
transition:all 1s ease;
opacity:0;
}

#mainmenu{
width:220px;
padding:0;
margin:0;
position:relative;
top:0px;
left:0px;
}

nav#cntmenu:hover ~ section#kizi_cont_1{
position:relative;
top:0px;
left:-230px;
opacity:0.5;
}
nav#cntmenu:hover ~ h1{
position:relative;
top:0px;
left:-230px;
opacity:0.5;
}
nav#cntmenu:hover ~ section#kizi_foot{
position:relative;
top:0px;
left:-230px;
opacity:0.5;
}

nav#cntmenu:hover ~ #menu_shield{
right:-100px;
}

.hm_l_menu_ul{
list-style: none;
overflow: hidden;
}

.hm_l_menu_ul > li{
overflow: hidden;
margin:0;
padding:0;
border-bottom:2px solid rgba(0,0,0,0);
font-size:14px;
line-height:14px;
}
.hm_l_menu_ul > li:last-of-type{
overflow: hidden;
margin:0;
padding:0;
font-size:14px;
line-height:14px;
border-bottom:0px solid rgba(0,0,0,0);
}

#mainmenu > li a{
color:#0000ff;
text-decoration:none;
display:block;
position:relative;
height:20px;
margin:0;
padding:5px;
background-color:rgba(200,200,200,0.3);
font-size:14px;
line-height:15px;
-webkit-transition:all 0.5s ease;
transition:all 0.5s ease;
}
#mainmenu > li a:hover{
background-color:rgba(255,255,255,0.6);
}

.fs_s{
font-size:12px !important;
line-height:14px !important;
}

ul.defo_sub{
list-style: none !important;
}

ul.defo_sub > li{
list-style:none !important;
overflow: hidden !important;
margin:0 0 0 -10px !important;
padding:0 !important;
height:0px;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
ul.defo_sub > li > a{
text-decoration:none !important;
display:block !important;
margin:0px !important;
padding:5px !important;
width:220px !important;
height:0px;
font-size:15px !important;
line-height:15px !important;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
ul.defo_sub > li > a:hover{
background:rgba(100,100,255,0.4) !important;
}

#lb_box{
display:block;
width:415px;
padding:0 10px 10px 10px;
margin:0;
background:rgba(255,255,255,0.5);
}
#rb_box{
display:block;
width:415px;
padding:0 10px 10px 10px;
margin:0;
background:rgba(255,255,0,0.5);
}

.lb_defp{
position:absolute;
top:44px;
left:20px;
}
.rb_defp{
position:absolute;
top:44px;
left:455px;
}

.add_clastest1{
-webkit-animation:anime_op1 4s ease infinite alternate;
animation:anime_op1 4s ease infinite alternate;
}
.add_clastest2{
-webkit-animation:anime_op1 4s ease 4s infinite alternate;
animation:anime_op1 4s ease 4s infinite alternate;
}

@-webkit-keyframes anime_op1{
0%{opacity:1;-webkit-transform:scale(1);}
100%{opacity:0.5;-webkit-transform:scale(2);}
}
@keyframes anime_op1{
0%{opacity:1;transform:scale(1);}
100%{opacity:0.5;transform:scale(2);}
}

.c_p{cursor:pointer;}
.cl_r{color:#D00;}
.cl_b{color:#00D;}
.cl_g{color:#0D0;}
.cl_y{color:#DD0;}
.cl_l{color:#0DD;}
.cl_p{color:#D0D;}
.cl_g{color:#DDD;}
.cl_w{color:#FFF;}