@charset "utf-8";

/* ==================================================
Common CSS
================================================== */

@media(min-width:960px){

/* common*/


/* header*/
header {
width:960px;
margin:auto;
padding:20px 0 30px;
position:relative;
}

header .logo {
width:280px;
margin:auto;
}

header .logo img {
width:100%;
}


/* pagetitle*/
.title_area {
background:url(../img/bg.png);
padding:30px 0;
margin-bottom:10px;
}

.title_area .pagetitle {
width:960px;
margin:auto;
font-weight:bold;
font-size:150%;
}

.title_area .icon {
padding-right:5px;
}


/* bread*/
.bread {
width:960px;
margin:auto;
text-align:right;
color:#c969696;
font-size:80%;
padding-bottom:50px;
}


/* flexbox*/
.container {
width:960px;
margin:auto;
display:flex;
}

.container .left_nav {
width:220px;
margin-right:40px;
}

.container .cts {
width:700px;
}



/* nav*/
.menu_title {
padding-bottom:5px;
color:#999;
}

.nav {
background:#329600;
border-radius:10px;
margin-bottom:10px;
display:block;
}

.nav a {
padding:10px 20px;
text-decoration:none;
border-radius:10px;
display:block;
color:#fff;
}

.nav a:hover {
background:#007800;
border-radius:10px;
color:#fff;
}


/* cts*/
.cts {

}

.cts .cts_title {
color:#329600;
border-bottom:#329600 3px solid;
padding-bottom:7px;
font-weight:bold;
}

.cts .infolist {
border-bottom:#c8c8c8 1px dotted;
padding:15px 0;
display:flex;
}

.cts .infolist .photo {
width:150px;
height:150px;
margin-right:20px;
overflow:hidden;
}

.cts .infolist .photo img {
width:150px;
height:150px;
object-fit:cover;
}

.cts .infolist .ex {
width:530px;
}

.cts .infolist .date {
color:#969696;
padding-bottom:5px;
}

.cts .infolist .infoicon {
font-size:70%;
padding:3px 5px;
color:#fff;
border-radius:3px;
margin-right:5px;
}

.cts .infolist .infotitle {
font-weight:bold;
font-size:110%;
padding-bottom:3px;
}


/* pagenation*/
.pagenation {
padding:15px 0 70px;
display:flex;
justify-content:center;
}

.pagenation .btn {
border:#c8c8c8 1px solid;
border-radius:4px;
text-align:center;
font-size:70%;
margin:0 5px;
}

.pagenation a {
display:block;
padding:5px 10px;
text-decoration:none;
font-weight:normal;
color:#c8c8c8;
border-radius:4px;
}

.pagenation a:hover {
background:#eee;
}


/* detail*/
.cts .info {
padding:10px 0 100px;
}

.cts .info .ex {
width:100%;
}

.cts .info .date {
color:#969696;
}

.cts .info .infoicon {
font-size:70%;
padding:3px 5px;
color:#fff;
border-radius:3px;
margin-right:5px;
}

.cts .info .infotitle {
font-weight:bold;
font-size:150%;
padding-bottom:20px;
}

.cts .info .photo {
width:90%;
margin:0 auto 30px;
}

.cts .info .photo img {
width:100%;
}

.cts .info .ex {
border-bottom:#c8c8c8 1px solid;
padding-bottom:50px;
margin-bottom:15px;
}

.cts .back {
width:20%;
margin:auto;
border:#c8c8c8 1px solid;
border-radius:4px;
text-align:center;
font-size:90%;
}

.cts .back a {
display:block;
padding:10px 10px;
text-decoration:none;
font-weight:normal;
color:#c8c8c8;
border-radius:4px;
}

.cts .back a:hover {
background:#eee;
}


/* footer*/
footer {
margin-top:70px;
background:url(../img/bg.png);
}

footer .copyright {
width:960px;
margin:auto;
padding:20px 0;
text-align:center;
font-size:80%;
color:#787878;
}

}