@charset"utf-8";

*{
list-style:none;
margin:0;
padding:0;
}



/*===================content====================*/

#content{
width:1080px;
height:1450px;
padding:0px;
margin:0px auto;
background:rgba(255,255,255,0.8);
border-bottom:1px solid;
overflow:hidden;
}

/*===================responsible====================*/

@media screen and (max-width:768px)
{
#content{
width:768px;
height:1300px;
}
}

@media screen and (max-width:375px)
{
#content{
width:375px;
height:980px;}
}


/*===================left&right====================*/

#left{
float:left;
width:248px;
height:1450px;
bo rder:1px solid;
background:rgba(255,255,238,0.8);
bac kground-size:80%;
padding:0;
margin:0px;
}

#right{
float:right;
width:828px;
height:1450px;
bo rder:1px solid;
padding:0;
margin:0px;
}

/*===================responsible====================*/

@media screen and (max-width:768px)
{
#left{
width:192px;
height:1300px;
}

#right{
width:576px;
height:1300px;
}

}

@media screen and (max-width:375px)
{
#left{
clear:left;
width:375px;
height:90px;
}

#right{
clear:left;
width:375px;
height:980px;
}

}


/*===================left‘¤====================*/

ul#kind{
margin-top:80px;
}

li.kind{
width:200px;
height:30px;
line-height:30px;
border:1px solid #ffcc00;
margin:15px auto;
text-align:center;
background:#ffffcc;
border-radius:15px 5px;

}

li.kind a{
text-decoration:none;
display:block;
}

li.kind a:hover{
font-weight:bold;
background:#ffff66;
border-radius:15px 5px;
}
/*--------------------/-----------------------*/

/*===================responsible====================*/

@media screen and (max-width:768px)
{
li.kind{
width:185px;
height:30px;
}

#back{
position:fixed;
left:56px;
bottom:150px;
z-index:10;
}
}

@media screen and (max-width:375px)
{
ul#kind{
margin-top:0px;
}

li.kind{
float:left;
width:90px;
height:60px;
}

#back{
position:fixed;
left:50%;
margin-left:-35px;
bottom:150px;
z-index:10;
}
}/*@media screen and (max-width:375px)*/

/*===================right‘¤====================*/


#right h1 {
color: #010079;
text-shadow: 0 0 5px white;
b order-left: solid 7px #010079;
background: -webkit-repeating-linear-gradient(-45deg, #FFDBC9, #FFDBC9 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #FFDBC9, #FFDBC9 3px,#e9f4ff 3px, #e9f4ff 7px);
width:700px;
height:50px;
margin:15px auto;
text-align:center;
position:relative;
}
.row{
width:800px;
height:440px;
margin:0 auto;
overflow:hidden;
bo rder:1px solid;
}



#kasi1,#kasi2,#kasi3,#kasi4,#kasi5,#kasi6{
float:left;
width:350px;
height:300px;
background:#fbfbfb;
margin:20px 5px 10px 30px;
pa dding: 0.2em 0.5em;
box-shadow: 0px 0px 0px 5px #dddddd;
overflow:hidden;
}

.row p{
width:350px;
height:300px;
ma rgin:0px auto 0;
text-align:center;
line-height:35em;
}

#comme{
width:340px;
height:100px;
margin:0 auto;
padding:5px;
bo rder:1px solid;
background:#ffeeff;
}



#comme p{
width:330px;
height:90px;
font-size:14px;
text-align:left;
padding-left:8px;
vertical-align:top;
line-height:1.5em;
margin:0 auto;
bo rder:1px solid;
}





#pic1{background:url("img/kasi/kasi_1.png") no-repeat top;}
#pic2{background:url("img/kasi/kasi_2.png") no-repeat top;}
#pic3{background:url("img/kasi/kasi_3.png") no-repeat top;}
#pic4{background:url("img/kasi/kasi_4.png") no-repeat top;}
#pic5{background:url("img/kasi/kasi_5.png") no-repeat top;}
#pic6{background:url("img/kasi/kasi_6.png") no-repeat top;}

#pic1,#pic2,#pic3,#pic4,#pic5,#pic6{
background-size:300px 300px; 
}


#kasi1:hover,#kasi2:hover,#kasi3:hover,#kasi4:hover,#kasi5:hover,#kasi6:hover{
height:400px;}


/*===================responsible====================*/

@media screen and (max-width:768px)
{
#right h1{
width:576px;
margin-top:15px;
}

.row{
width:576px;
height:390px;
}

#kasi1,#kasi2,#kasi3,#kasi4,#kasi5,#kasi6{
float:left;
width:270px;
height:360px;
margin-left:10px;
box-shadow: 0px 0px 0px 3px #dddddd;
}

.row p{
font-size:16px;
width:280px;
height:240px;
line-height:28em;
}

#comme{
width:270px;
height:120px;
padding:2px;
}

#comme p{
width:265px;
height:90px;
font-size:14px;
padding-left:3px;
}

#pic1,#pic2,#pic3,#pic4,#pic5,#pic6{
background-size:240px 240px; 
}
}

@media screen and (max-width:375px)
{
#right h1{
width:375px;
margin-top:5px;
}

.row{
width:375px;
height:265px;
}

#kasi1,#kasi2,#kasi3,#kasi4,#kasi5,#kasi6{
float:left;
width:175px;
height:235px;
margin-left:6px;
box-shadow: 0px 0px 0px 3px #dddddd;
}

.row p{
font-size:12px;
width:175px;
height:150px;
line-height:23em;
}

#comme{
width:170px;
height:100px;
padding:2px;
}

#comme p{
width:165px;
height:90px;
font-size:10px;
padding-left:3px;
}

#pic1,#pic2,#pic3,#pic4,#pic5,#pic6{
background-size:150px 150px; 
}

}

/*===================footer====================*/