*,:after,:before {
box-sizing: border-box
}
html {
font-size: 62.5%;
font-family:  'Open Sans', sans-serif, Arial, Verdana;
color: #282412;
line-height: 1.6875
}
body, html {
}
body {
font-size: 1.4rem
}
a {
text-decoration: none;
color: #054897;
font-weight: bold;
}
a:hover{
color: #800017;
}
.border img, .box img {
max-width: 100%
}
span {
font-weight: bold;
}
div {
}
#red {
color: #ff0000;
}
#azk{
max-width: 1240px;
margin: auto;
}
#azk_header {
width: 100%;
//height: 190px;
}
#azk_logo {
float: left;
}
#azk_title {
text-align: center;
padding: 10px 10px 20px 10px;
font-size: calc( (100vw - 480px)/(1280 - 480) * (22 - 16) + 16px);
color: #666;
}
#azk_title_bottom {
text-align: center;
padding: 10px;
font-size: 14px;
border-top: 1px solid #eee;
color: #555;
background-color: #f6f6f6;
box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
#azk_content{
padding: 15px 0 0 0;
}
*{box-sizing:border-box}
.tabs {
max-width: 1240px;
padding: 0px;
margin: 10px auto;
position: relative;
border: 1px solid #76b5ff; 
}
section {
display: none;  
padding: 15px;
background: #fff;
position: absolute;
top: 0;
left: 280px;
}
#content1 {
text-align: center;
}
#content1 a{
text-decoration: none;
color: #054897;
padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 20px;
background: linear-gradient(1deg, #D7D7D7, #FFF);
font-weight: bold;
margin: 10px;
}
#content1 a:hover{
color: #800017;
background: linear-gradient(181deg, #FFF, #FFF);
}
p {
margin: 0;
}
input {
display: none;
}
label {
display: block;
width: 280px;
padding: 15px;
color: #fff;
background: #054897;
font-weight: bold;
cursor: pointer;
border-bottom: 1px solid #ddd;
}
label:hover {
color: #bbb;
}
label:active {
color: #bbb;
}
input:checked + label {
color: #555;
background: white;
}
#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4, #tab5:checked ~ #content5 {
display: block;
}
section {
animation: scale 0.7s ease-in-out;
}