.cimg{
width: 100%;
height: 250px;
background-color: #3c8ddc;
background-image: url("../img/topimg_s.jpg");
background-position: center 75%;
background-repeat: no-repeat;
background-size: cover;
overflow:hidden;
position:relative;
}
.ai1{
position:absolute;
top:0;
right:800px;
width:200px;
height:250px;
background-color: #3c8ddc;
background-image: url("../img/slimg_1s.jpg");
background-position: right top;
opacity:0;
-webkit-animation:mva 20s linear infinite;
animation:mva 20s linear infinite;
}
.ai2{
position:absolute;
top:0;
right:800px;
width:200px;
height:250px;
background-color: #3c8ddc;
background-image: url("../img/slimg_2s.jpg");
background-position: right top;
opacity:0;
-webkit-animation:mva 20s linear 5s infinite;
animation:mva 20s linear 5s infinite;
}
.ai3{
position:absolute;
top:0;
right:800px;
width:200px;
height:250px;
background-color: #3c8ddc;
background-image: url("../img/slimg_3s.jpg");
background-position: right top;
opacity:0;
-webkit-animation:mva 20s linear 10s infinite;
animation:mva 20s linear 10s infinite;
}
.ai4{
position:absolute;
top:0;
right:800px;
width:200px;
height:250px;
background-color: #3c8ddc;
background-image: url("../img/slimg_4s.jpg");
background-position: right top;
opacity:0;
-webkit-animation:mva 20s linear 15s infinite;
animation:mva 20s linear 15s infinite;
}


.ai1:before{
display:block;
content:"";
position:absolute;
top:0;
right:200px;
width:200px;
height:250px;
background-color: #3c8ddc;
background-image: url("../img/slimg_1s.jpg");
}
.ai2:before{
display:block;
content:"";
position:absolute;
top:0;
right:200px;
width:200px;
height:250px;
background-color: #3c8ddc;
background-image: url("../img/slimg_2s.jpg");
}
.ai3:before{
display:block;
content:"";
position:absolute;
top:0;
right:200px;
width:200px;
height:250px;
background-color: #3c8ddc;
background-image: url("../img/slimg_3s.jpg");
}
.ai4:before{
display:block;
content:"";
position:absolute;
top:0;
right:200px;
width:200px;
height:250px;
background-color: #3c8ddc;
background-image: url("../img/slimg_4s.jpg");
}

@-webkit-keyframes mva{
0%{left:900px;opacity:0;}
7%{opacity:1;}
15%{left:50%;opacity:1;}
25%{left:50%;opacity:1;}
60%{left:-900px;opacity:1;}
100%{left:-900px;opacity:0;}
}
@keyframes mva{
0%{left:900px;opacity:0;}
7%{opacity:1;}
15%{left:50%;opacity:1;}
25%{left:50%;opacity:1;}
60%{left:-900px;opacity:1;}
100%{left:-900px;opacity:0;}
}


header > h1{
font-size:100%;
width:100%;
margin: 0 auto;
padding: 18px 5px;
box-sizing:border-box;
text-shadow:1px 1px 2px rgba(100,100,100,0.5);
}

.nvpd > ul > li {
display: block;
width: auto;
background:#01a3c6;
overflow:hidden;
}

.nvpd > ul li > a{
display: block;
width:100%;
height:40px;
line-height:35px;
padding:5px;
text-align: center;
text-decoration: none;
font-size:15pt;
color:#FFF;
background:#01a3aa;
-webkit-transition:all 0.3s linear;
transition:all 0.3s linear;
position:relative;
}

.nvpd > ul li > span{
display: block;
width:100%;
height:40px;
line-height:35px;
padding:5px;
text-align: center;
text-decoration: none;
font-size:15pt;
color:rgba(50,50,50,1);
background:#01a3aa;
position:relative;
}
.nvpd > ul li > span:before{
display:inline-block;
background-color:rgba(50,50,50,0.2);
width:100%;
height:40px;
position:absolute;
top:0px;
left:0px;
content:"";
}

.nvpd > ul li > a:before{
display:inline-block;
background-color:rgba(255,255,255,0.3);
width:0px;
height:40px;
position:absolute;
top:0px;
left:0px;
content:"";
-webkit-transform-origin:left center;
transform-origin:left center;
-webkit-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.nvpd > ul li > a:hover:before{
width:100%;
}

article{
border: 1px solid #FFF;
width: 95%;
height: auto;
margin: 0 auto;
padding: 25px 0px 0;
}

section{
padding: 0 0 20px;
}

.ctbx{
padding:10px 0 0;
}
.ctbx p{
line-height:1.5;
margin:0 0 15px;
padding:0;
}

section > h2{
margin: 0 0 10px 0;
border-bottom: 3px solid #bbb;
color: #666;
font-size: 120%;
font-weight: bold;
}

.wnew > dt{
display:block;
margin:0 0 5px;
}
.wnew > dd{
display:block;
margin:0 0 15px 10px;
}

/* top bk block */

.top_bk{
border:2px solid #FFF;
text-align:center;
margin:15px 0 0;
}

.bkk{
display:inline-block;
width:250px;
background:rgba(255,255,255,0);
color:#FFF;
border:2px solid #DDD;
margin:0 0 10px;
border-radius: 10px;
font-size:120%;
padding:60px 30px;
box-sizing:border-box;
-webkit-transition:all 0.3s linear;
transition:all 0.3s linear;
text-shadow:
1px 0px rgba(0,0,0,1),
-1px 0px rgba(0,0,0,1),
0px 1px rgba(0,0,0,1),
0px -1px rgba(0,0,0,1),
0px 2px 4px rgba(0,0,0,1);
letter-spacing:2px;
line-height:120%;
overflow:hidden;
}

a:hover > .bkk{
background-color: #01a3c6;
color:#ffc60c;
box-shadow:inset 0px 250px rgba(255,255,255,0.7);
}
.bkk_bg_1{
background-image: url("../img/tbb_st_s.jpg");
}
.bkk_bg_2{
background-image: url("../img/tbb_ss_s.jpg");
}
.bkk_bg_3{
background-image: url("../img/tbb_pt_s.jpg");
}
.bkk_bg_4{
background-image: url("../img/tbb_ot_s.jpg");
}

footer{
width: 100%;
background-color: #01a3c6;
color: #fff;
text-align: left;
padding: 5px;
position: relative;
bottom: 0;
font-size:80%;
-webkit-box-sizing: border-box;
box-sizing:border-box;
}

#nop{
display: inline-block;
vertical-align: middle;
border:3px solid #BBB;
border-radius: 3px;
text-align:center;
padding:0;
margin:5px 0 0 5px;
cursor:pointer;
}
#nop img{
vertical-align: bottom;
}

#ncl{
display: none;
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0,0,0);
opacity: 0;
transition: 0.3s ease-in-out;
}

#nav_cnt{
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 90%;
max-width: 330px;
height: 100%;
background: #01a3aa;
transition:0.3s ease-in-out;
-webkit-transform: translateX(-120%);
transform: translateX(-120%);
box-shadow: 8px 0 5px rgba(0,0,0,0.3);
}

#nav_ckbx:checked ~ #ncl{
display: block;
opacity: 0.5;
}
#nav_ckbx:checked ~ #nav_cnt{
-webkit-transform: translateX(0%);
transform: translateX(0%);
}