@charset "utf-8";

#top .top_bg { background-image: url(../images/application/bg_case_top.jpg);}


#case { padding: 50px 0 100px;}
#case .flex { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; margin-bottom: 70px;}

#case .flex .item { width: 320px; margin-right: 70px; margin-top: 40px; border-radius: 10px; box-shadow: 10px 17.321px 30px 0px rgba(24, 25, 46, 0.2);}
#case .flex .item:nth-child(3n) { margin-right: 0;}
#case .flex .item:nth-of-type(-n+3)  { margin-top: 0;}

#case .flex .item .title { padding: 20px 30px 22px; border-bottom: 2px solid #c9c9c9;}
#case .flex .item .title .circle { display: block; font-size: 16px; line-height: 1.4; color: #fff; padding: 22px 11px 23px; background-image: -moz-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); background-image: -webkit-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); background-image: -ms-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); border-radius: 50px; margin: 0 auto 14px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#case .flex .item .title h3 { min-height: 145px; font-size: 20px; line-height: 1.8; font-weight: 700;}
#case .flex .item .name { position: relative; font-size: 18px; line-height: 1.667; font-weight: 500; padding: 13px 60px 23px 30px;}
#case .flex .item .name:before,
#case .flex .item .name:after { position: absolute; content: ""; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
#case .flex .item .name:before { width: 30px; height: 30px; background-image: -moz-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); background-image: -webkit-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); background-image: -ms-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); border-radius: 50%; right: 30px;}
#case .flex .item .name:after { border-top: solid 2px #fff; border-right: solid 2px #fff; width: 8px; height: 8px; transform: translateY(-50%) rotate(45deg); -webkit-transform: translateY(-50%) rotate(45deg); right: 42px;}

#case .none_list { padding: 30px 0 80px; }
#case .none_list p { text-align: center; font-size: 18px; }

/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {


#case { padding: 50px 0;}
#case .flex { display: block; margin-bottom: 50px;}

#case .flex .item { display: block; width: 100%; margin-right: 0; margin-top: 35px;}
#case .flex .item:nth-child(3n) { margin-right: 0;}
#case .flex .item:nth-of-type(-n+3)  { margin-top: 35px;}
#case .flex .item:first-child  { margin-top: 0;}

#case .flex .item .title { padding: 20px 20px 15px;}
#case .flex .item .title .circle { font-size: 13px; padding: 11px 0 12px; margin: 0 auto 14px;}
#case .flex .item .title h3 { min-height: inherit; font-size: 18px;}
#case .flex .item .name { position: relative; font-size: 14px; padding: 13px 20px 15px;}

#case .none_list { padding: 0 0 50px; }
#case .none_list p { font-size: 14px; }

}