/* project_area */
#project_area{width: 100%;margin:0 auto;border-radius: 0;}

#project_area .titleBox .h2title, #project_area .titleBox .subtitle, #book_area .titleBox .h2title, #book_area .titleBox .subtitle{text-align:center;}
#project_area .titleBox .subtitle:after, #book_area .titleBox .subtitle:after ,.titleBox .subtitle:after{position:relative;display: block;margin: 10px auto 0;}
#project_area .projectBox{width: 1450px;margin:0 auto;display:flex;flex-wrap: wrap;justify-content: center;max-width: 100%;}
#project_area .projectBox .item{box-shadow: 0 0 10px rgb(0 0 0 / 10%);margin: 12.5px;padding: 45px 30px;border-radius: 20px;border: 5px solid #fff;background: #fff;width: calc((100%/4) - 95px);text-align: center;position: relative;}
#project_area .projectBox .item:hover{border: 4px solid #036eb8;}
#project_area .projectBox .item img{-webkit-filter: contrast(0) brightness(0);width: 120px;}
#project_area .projectBox .item:hover img{-webkit-filter: unset;}
#project_area .projectBox .item h3 a{color: #131414;text-align: center;margin-top: 40px;font-size: 25px;display: block;margin-bottom: 10px;}
#project_area .projectBox .item p{
    font-size: 14px;
    color: #1c1b1b;
}
#project_area .projectBox .item:hover h3{color: #036eb8;}

#project_area .inftxt{
    display: flex;
    flex-direction: column;
}
#project_area .inftxt .title{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 50px 0 10px;
}
.titleBox{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#project_area .inftxt .title .subtitle{text-transform:uppercase;font-size: 23px;font-family: 'Lato', sans-serif;color: #45484d;position: relative;padding-bottom: 23px;display: flex;justify-content: center;}
#project_area .inftxt .title .subtitle:after{content:'';position:absolute;width: 70px;height: 5px;background: #036eb8;border-radius: 50px;left: 0;bottom: 6px;margin: 30px auto 0;left: calc(50% - 35px);}
#project_area .inftxt .title .subtitle b{font-family: 'Lato', sans-serif;font-size: 23px;vertical-align: baseline;margin-right: 5px;color: #45484d;}


#project_area .inftxt .title h2{
    color: #036eb8;
    font-size: 36px;
    padding: 20px 0 0;
    font-weight: 600;
    text-align: center;
    word-break: keep-all;
}
#project_area .inftxt .bbox{
    width: 100%;
    display: flex;
    box-shadow: 0px 0px 12px #bdbdbd54;
    margin: 40px 0 10px;
    border-radius: 10px;
}
#project_area .inftxt .bbox .ttxtbox{
    width: 50%;
    padding: 50px;
}
#project_area .inftxt .bbox .ttxtbox p{
    margin-left: 9px;
    line-height: 200%;
    font-size: 17px;
    color: #101010;
    font-weight: 300;
}
#project_area .inftxt .bbox .ttxtbox h2{
    font-size: 36px;
    position: relative;
    margin-bottom: 23px;
}
#project_area .inftxt .bbox .ttxtbox h2:before{
	content:"";
	position:absolute;
	width:90%;
	height: 1px;
	background: #7474747d;
	bottom: -6px;
}
#project_area .inftxt .bbox .imggbox{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#project_area .inftxt .bbox .imggbox img{
    padding: 20px;
    border-radius: 30px;
    width: 90%;
    margin: 0 auto;
}
#project_area .mantime{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30px 0 0;
}
#project_area .mantime a{
    padding: 20px 20px;
    background: #036eb8;
    border-radius: 10px;
    color: white;
}
#project_area .mantime a:hover{
    background: #045c99;
    color: #ffffff;
}
@media screen and (max-width: 1024px){
	#project_area .projectBox{width: 85%;}
}
@media screen and (max-width: 980px){
	
	#project_area{width:100%;border-radius: 0;}
	#project_area .projectBox .item{width: calc((100%/2) - 95px);}	
}
@media screen and (max-width: 640px){
	#project_area .inftxt .title h2{
	    font-size: 30px;
	}
	#project_area .inftxt .title .subtitle{
	    font-size: 18px;
	}
	#project_area .inftxt .title .subtitle b{
		font-size: 18px;
	}
	#project_area .inftxt .bbox{
	    display: flex;
	    flex-direction: column;
	}
	#project_area .inftxt .bbox .ttxtbox{
	    width: calc(100% - 40px);
	    padding: 20px;
	}
	#project_area .inftxt .bbox .imggbox{
    width: 100%;
}
}
@media screen and (max-width: 550px){
	#project_area .projectBox .item h3{font-size: 21px;}
	#project_area .projectBox .item{padding: 30px 10px;width: calc((100%/2) - 55px);}
	#project_area .projectBox{width: 100%;}
	#project_area .projectBox .item p{
    padding: 0 4px;
    margin-top: 10px;
}
}
@media screen and (max-width: 480px){
	
	#project_area .projectBox .item img{
	    width: 78px;
	}
	#project_area .projectBox .item:hover{
	    border: 2px solid #036eb8;
	}
	#project_area .projectBox .item{
	    width: calc((100%/2) - 28px);
	    padding: 30px 2px;
	    margin: 7px;
	    border-radius: 10px;
	}
	#project_area .projectBox .item h3{
    margin-top: 20px;
}
}