@charset "utf-8";

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


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

#application .flex .item { position: relative; width: 340px; margin-right: 34px; margin-top: 46px;}
#application .flex .item:nth-child(3n) { margin-right: 0;}
#application .flex .item:nth-of-type(-n+3)  { margin-top: 0;}

#application .flex .item .thumb { position: relative; width: 100%; height: auto; margin-bottom: 22px; border-radius: 10px; box-shadow: 10px 17.321px 30px 0px rgba(24, 25, 46, 0.2);}
#application .flex .item .title { position: absolute; top: 20px; left: 0;}
#application .flex .item .title .sub { display: inline-block; font-size: 14px; line-height: 1.4; color: #fff; padding: 5px 15px 6px; 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: 0 15px 15px 0; margin-bottom: 13px;}
#application .flex .item .title h3 { font-size: 16px; margin-left: 15px; }
#application .flex .item .title h3 span { display: inline-block; font-weight: 700; padding: 6px 10px; background: #fff; border: 1px solid #000; margin-bottom: 8px;}
#application .flex .item .title h3 span:last-child { margin-bottom: 0;}
#application .flex .item .content { font-size: 14px; line-height: 2;}

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

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

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

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

#application .flex .item .title { position: absolute; top: 20px; left: 0;}
#application .flex .item .title .sub { display: inline-block; font-size: 12px; line-height: 1.4; color: #fff; padding: 5px 15px 6px; margin-bottom: 13px;}
#application .flex .item .title h3 { font-size: 14px;}
#application .flex .item .title h3 span { padding: 6px 10px; margin-bottom: 8px;}
#application .flex .item .content { font-size: 12px; line-height: 2;}

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

}