html,body,div,span,iframe,h1,h2,h3,h4,p,pre,del,em,img,b,i,dl,dt,dd,ol,ul,li,form,table,tbody,tr,th,td,article,aside,footer,header,nav,section


{margin:0;padding:0;border:0;outline:0;

vertical-align:baseline;background:transparent;box-sizing:border-box}

article,aside,footer,header,nav,section,textarea{display:block}

body{line-height:1;overflow-wrap:break-word;word-wrap:break-word}

input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;vertical-align:middle}

a{margin:0;padding:0;text-decoration:none;outline:none;font-size:100%;vertical-align:baseline;background:transparent}

a img{border-style:none}

ul,li{list-style-type:none}

.if-container{display:inline-block;margin:0 auto;height:100%;width:100%;overflow:auto;-webkit-overflow-scrolling:touch}

.ifrm{border:none;display:block;height:100%;width:100%}

.cf:before,.cf:after{content:" ";display:table}.cf:after{clear:both}


html{

font-size:13px;
font-family:Verdana, Georgia;
letter-spacing:2px;
height:100%

}

body{

background:#ffffff;
font-size:13px;
font-family:Verdana, Georgia;
letter-spacing:2px;
color:#000000;

padding:20px 20px 60px

}

a{

color:#7a96ff;

}

a:hover{

background:#fff1c2;

border-radius:5px;

color:#000000;

-webkit-transition:.6s;

transition:.6s

}

#page{
font-size:13px;
font-family:Verdana, Georgia;
letter-spacing:2px;
background:#ffffff;

color:#000000;

padding:20px;

height:100%

}

#page a{

color:#7a96ff;

}

#wrapper{

margin:0 auto;

text-align:left;

height:100%;

width:1000px; 

}

header{

min-height:80px;

padding-bottom:16px;

}

#contents{

position:relative;

width:100%

}

#rightcolumn{

background:#ffffff;

border:2px solid #000000;

float:right;

padding:10px;

width:680px

}

#leftcolumn{

background:#ffffff;

border:2px solid #000000;

float:left;

width:300px

}

#leftcolumn-inner{

height:100%;

padding:20px;

overflow:auto;

-webkit-overflow-scrolling:touch

}

footer{

min-height:20px

}


#pagetop{

background:#7a96ff;

box-shadow:0 0 0 4px #000000;

-webkit-box-shadow:0 0 0 4px #000000;

display:block;

position:fixed;

height:40px;width:40px;

right:20px;bottom:-100px;

z-index:50;

-webkit-transition:.5s;

transition:.5s

}

.arrow{

border-left:2px solid #fff;

border-top:2px solid #fff;

position:absolute;

top:40%;left:32%;

height:16px;width:16px;

-ms-transform:rotate(45deg);

-webkit-transform:rotate(45deg);

transform:rotate(45deg)

}



#menu{

display:block;

margin:0 auto

}

nav li a,nav li span{

color:#000000;

display:block;

padding:5px 0; 

position:relative

}

nav li a:hover,nav li span:hover{

background:#fff1c2;

border-radius:5px;

color:#fffff;

transition:.6s

}

.sub-menu{

display:none;

margin:0;

overflow:hidden

}

.sub-menu li{

text-indent:1em

}

.sub-menu li a:after{

display:none

}

nav li span:after{

border-top:solid 2px #000000;

border-right:solid 2px #000000;

content:"";

display:block;

margin-top:-5px;

width:5px;height:5px;

top:50%;right:10px;

position:absolute;

-ms-transform:rotate(45deg);

-webkit-transform:rotate(45deg);

transform:rotate(45deg);

transition:.3s

}

nav li span.open:after{

-ms-transform:rotate(135deg);

-webkit-transform:rotate(135deg);

transform:rotate(135deg)

}

#open{display:none}



#index{

margin:20px auto;

padding:20px

}

.indexbox{

background:#fff;

border:2px solid #000000;

margin: 2px auto 20px;

padding:20px;

text-align:left;

width:580px

}



h1{

text-align: right;
border-bottom:2px #fef1c5 solid;

font-size:16px;

font-weight:400;

line-height:18px;

margin:20px 0

}

h2{

color:#ffffff;

background:#FFAEC9;

font-size:18px;

font-weight:700;

margin:20px ;

padding: 20px 20px;



box-shadow:0 0 0 4px #000000;

-webkit-box-shadow:0 0 0 4px #000000

}

.h2{

color:#ffffff;

background:#FFAEC9;

font-size:15px;

font-weight:700;

margin:20px 0;

padding: 3px 20px;

border:0px dashed #ffffff;

box-shadow:0 0 0 4px #000000;

-webkit-box-shadow:0 0 0 4px #000

}

h2:first-letter,.h2:first-letter{

color:#000000

}

h3,.h3{

border-bottom:2px #FFAEC9 solid;

font-size:17px;

font-weight:400;

line-height:18px;

margin:20px 0

}



.summary{

border-bottom:1px #000000 dotted;

font-size:10px;
padding: 50px;
line-height:18px;

margin:20px 0

}

dt{

color:#FFAEC9;

font-weight:700;

float:left;

margin:0 0 5px;

width:192em

}

dd{

border-bottom:1px solid #000000;

margin:0 0 5px 208px;
}

dl:after{

content:"";

clear:both;

height:0;

display:block;

visibility:hidden

}

em{

background:#FFAEC9; 


font-weight:700

}

input,textarea{

background:#ffffff;

border:1px solid #000000;

color:#000000;

margin:3px 0;

width:200px

}

textarea{

height:50px

}

hr{

display:block;

border:0;  

border-top:0px dashed #000000;

margin:16px 0;

padding:0;

height:1px

}

.marker{
margin: 5px;
background:#c6ffc2 ;

}

.ln01{

border-left:8px solid #7a96ff;

margin:8px 0;

padding:3px

}

.ln02{

border-left:8px solid #000000;

margin:8px 0;

padding:3px

}

.textbox{

border:2px #000 solid;

margin:10px 0;

padding:3px;

text-align:center

}

.title{

color:#7a96ff;

font-size:24px;

font-weight:700;

margin:32px 0;

text-align:right;

text-shadow:2px 2px 2px #000000;

}

.txt{

border-left:1px dotted #ffaec9;

margin:16px;

padding:0 0 0 16px;

}

.frame{

background:#000000;

border:1px dashed #fff;


padding:5px;margin:5px

}


@media screen and (max-width: 840px){

#wrapper{width:100%}

#rightcolumn{width:60%}

#leftcolumn{width:38%}

#leftcolumn input,#leftcolumn textarea{width:80%}

}




@media screen and (max-width: 600px){

body{font-size:20px}

#wrapper{position:relative;width:100%}

header{position:relative;padding-right:70px}
#contents{position:static}

#leftcolumn{float:none;border:0}

#leftcolumn-inner{padding:0}

#rightcolumn{float:none;width:100%}

footer{text-align:center}

.indexbox{width:auto}

dt{float:none;clear:none;width:auto}

dd{margin-left:20px}

img{max-width:100%;height:auto} 





#leftcolumn{

color:#ffffff;

background:#000000;

padding:80px 20px 20px;

width:300px; 

transition:all .3s;

transform:translate(300px); 

-ms-transform:translate(300px);

-webkit-transform:translate(300px);







position:fixed;

top:0;right:0;

z-index:1000

}

#leftcolumn a{

color:#ffffff;

}

#leftcolumn.open{

transform:translate(0);

-ms-transform:translate(0);

-webkit-transform:translate(0)

}



nav li a,nav li span{

color:#ffffff;

padding:10px 0; 

}

nav li span:after{

border-top:solid 2px #ffffff; 
border-right:solid 2px #ffffff; 

}



#open{

color:#ffaec9;

display:inline-block;

margin:0 5px;

position:absolute;

text-align:center;

height:60px;width:60px;

top:0;right:0;

z-index:1001

}

.open-text{position:absolute;bottom:0;left:0;width:100%}

#open .close + .open-text{color:#ffffff}

#open-icon,#open-icon:before,#open-icon:after{background:#000000}
#open-icon{display:block;margin:-1px 0 0 -10px;position:absolute;top:20px;left:50%;height:2px;width:20px}

#open-icon:before,#open-icon:after{content:"";display:block;position:absolute;top:50%;left:0;height:2px;width:20px;transition:.3s}

#open-icon:before{margin-top:-8px}

#open-icon:after{margin-top:6px}

#open .close{background:solid}

#open .close:before,#open .close:after{margin-top:0}

#open .close:before{-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);background:#ffffff}
#open .close:after{-ms-transform:rotate(-135deg);-webkit-transform:rotate(-135deg);transform:rotate(-135deg);background:#ffffff}
}