.csc-wwd-box {
	margin: auto;
	padding: 20px 20px 50px 20px;
	max-width: 1200px;
	width: 100%;
}
.csc-wwd-title {
	position: relative;
	text-align: center;
	font-size: 2.5em;
}
.csc-wwd-title:before {
	content: "";
	display: block;
	border-top: 2px solid #f9bc55;
	width: 100%;
	height: 2px;
	position: absolute;
	top: 50%;
	z-index: 0;
}
.csc-wwd-title span {
	background: #F5F5F5;
	padding: 0 30px;
	position: relative;
	z-index: 1;
}
.grid-container {
	display: inline-grid;
	grid-template-columns: 600px auto;
	background-color: #ccc;
	box-shadow: 0 2px #ccc;
}
.grid-item {
	background: #ffffff;
	padding: 5px;
    box-shadow: 0 0 5px rgb(0,0,0,0.2);
}
.img-aside {
	width: 100%;
	height: 300px;
	object-fit: cover;
	overflow: hidden;
	border-radius: 3px;
}
.txt-aside {
	padding: 25px 0 20px 20px;
	box-sizing: border-box;
}
.txt-aside strong {
	font-weight: 700;
	font-size: 2em;
	color: #333;
}
.txt-aside p {
	font-size: 1.2em;
	color: #797979;
	line-height: 1.5em;
}

.grid-container-about-solo {
	display: grid;
	grid-template-columns: auto;
	background-color: #ccc;
	border-radius: 6px;
}
.img-aside-about-solo {
	width: 100%;
	height: 450px;
	object-fit: cover;
	overflow: hidden;
	border-radius: 3px;
}

.csc-wwd-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.csc-wwd-lp {
	padding: 20px;
	transition: all 0.3s;
}
.wwd-ico {
	padding: 20px 0px;
}
.ico-bd {
	margin: auto;
	border: 8px solid #EEE;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	transition: all 0.3s;
	background-size: 50%;
	background-position: center;
	background-repeat: no-repeat;
}
.wwd-title, .wwd-detail {
	text-align: center;
}
.wwd-title {
	padding: 10px 0px;
	font-weight: 700;
	font-size: 1.2em;
	color: #333;
}
.wwd-detail {
	padding: 0px 0px 20px 0px;
	font-size: 0.9em;
	color: #797979;
	line-height: 140%;
}
.csc-wwd-lp:hover {
	background-color: #E7E7E7;
}
.csc-wwd-lp:hover .ico-bd {
	border: 8px solid #28b7cc;
	background-color: #FFF;
}
.csc-wwd-lp + .csc-wwd-lp:hover .ico-bd {
	border: 8px solid #f9bc55;
}
.csc-wwd-lp + .csc-wwd-lp + .csc-wwd-lp:hover .ico-bd {
	border: 8px solid #dc2c43;
}
.csc-wwd-lp + .csc-wwd-lp + .csc-wwd-lp + .csc-wwd-lp:hover .ico-bd {
	border: 8px solid #71992b;
}
.csc-wwd-lp:hover .wwd-title {
	color: #28b7cc;
}
.csc-wwd-lp + .csc-wwd-lp:hover .wwd-title {
	color: #dc872b;
}
.csc-wwd-lp + .csc-wwd-lp + .csc-wwd-lp:hover .wwd-title {
	color: #dc2c43;
}
.csc-wwd-lp + .csc-wwd-lp + .csc-wwd-lp + .csc-wwd-lp:hover .wwd-title {
	color: #71992b;
}






.about-box{
    
}
.about-list{
    padding: 25px 0px;
}
.about-list::after{
    content: '';
    display: block;
    clear: both;        
}

.about-list .about-img{
    float: left;
    width: 560px;
    height: 350px;
}
.about-list .about-desc{
    float: right;
    width: calc(100% - 560px);
}
.about-list + .about-list .about-img{float: right;}
.about-list + .about-list .about-desc{float: left;}
.about-list + .about-list + .about-list .about-img{float: left;}
.about-list + .about-list + .about-list .about-desc{float: right;}

.about-img span{
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
	box-shadow: 0 0 5px rgb(0,0,0,0.2);
}
.about-img span img{
    width: 100%;
    height: 100%;
}
.about-desc{
    padding: 20px 40px;
}

.abt-title{
    padding-bottom: 20px;
    font-weight: 700;
    font-size: 2em;
    color: #333;
}
.abt-desc{
    font-size: 1.2em;
    color: #797979;
    line-height: 140%;
}














 @media only screen and (max-width: 1100px) {
	.csc-wwd-box {
		max-width: 800px;
	}
	.csc-wwd-grid {
		grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
	}
	.grid-container {
		display: grid;
		grid-template-columns: 100%;
		background-color: #fff;
		padding: 10px;
	}
	.img-aside {
		height: 260px;
	}
	.img-aside-about-solo {
		width: 100%;
		height: 100%;
		object-fit: cover;
		overflow: hidden;
		border-radius: 3px;
	}
    .about-list .about-img,
    .about-list .about-desc{
        float: none;
        width: 100%;
    }

}
@media only screen and (max-width: 620px) {
	.csc-wwd-lp {
		padding: 0px 20px;
	}
	.csc-wwd-title {
		font-size: 1.5em;
	}
	.csc-wwd-title span {
		padding: 0px 20px;
	}
	.csc-wwd-grid {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}
	.ico-bd {
		width: 150px;
		height: 150px;
	}
	.grid-container {
		display: grid;
		grid-template-columns: 100%;
		background-color: #fff;
		padding: 10px;
	}
	.img-aside {
		height: 260px;
	}
	.img-aside-about-solo {
		width: 100%;
		height: 100%;
		object-fit: cover;
		overflow: hidden;
		border-radius: 3px;
	}

}


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


    .about-list .about-img{
        height: 180px;
    }
    .about-desc{
        padding: 20px 0px 0px 0px;
        font-size: 0.7em;
    }
    .abt-title{
        padding-bottom: 10px;
    }



}