/* general.css */
#wrapper{width: 100%; max-width:100%; margin: 0 auto; }
.content_wrap#content{ padding:0 !important; }
.content_wrap#content section{ overflow:hidden; font-family:'Noto Sans KR', sans-serif; }
.flex_wrap{display:flex; flex-flow:row wrap;}
.sub_wrap{max-width:100%; width: 100%;margin: 0 auto; }
.sub_con{ max-width:100%; width:100%; margin:0 auto; }

.sub_sec{padding:120px 20px;overflow: hidden;}


/* sub */

#sub01{width:100%; max-width:1240px;margin: 0 auto;}

.tb_box_wrap {padding: 0 15px;width:50%; float: left;margin: 14px 0;}
.tb_box{position: relative; border: 1px solid #cecece;  display: block; cursor: pointer; padding:40px; transition:0.4s all;height: 100%;}
.title{font-size:20px; color:#333; font-weight:600; text-align: left; margin-bottom:15px;width: 100%; max-width: 750px;}

.info{display: flex;}

.info_pt{display: flex;}
.info_wrap .user{color:#888; font-size:14px;}
.info_wrap .user:after{content:''; width:1px; height: 13px; background:#eee; display: inline-block; margin: 0 8px;}
.info_wrap .date{color:#888; font-size:14px;}
/*.info_wrap .icon{width: 55px; height: 55px; background-color: #e5e5e5; border-radius: 100%; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 20px; transition: all .4s;position: absolute; top: 50px; right: 40px;}*/

.tb_box:hover{border: 1px solid #009ad9; transition:0.4s all;}
.tb_box:hover .title{color:#009ad9; transition:0.4s all;}
.tb_box:hover .info_wrap .icon{background-color:#009ad9;transition:0.4s all; }
.tb_box:hover .info_wrap .arr:before{background-color:#009ad9;transition:0.4s all;}
.tb_box:hover .info_wrap .arr:after{border-top: 2px solid #009ad9;transition:0.4s all;}

.info_wrap { display: flex; justify-content: space-between; align-items: center;}
.info_wrap .arr {width: 24px; height: 12px; margin-left: 10px; position: relative; margin-top: 6px;}
.info_wrap .arr:before {content: ''; position: absolute; z-index: 1; width: 100%; height: 2px; top: 5px; left: 0; background-color: #e5e5e5;}
.info_wrap .arr:after {content: ''; position: absolute; z-index: 1; width: 10px; height: 10px; top: 1px; right: 0; transform: rotate( 45deg); box-sizing: border-box; border-top: 2px solid #e5e5e5;}



@media(max-width:920px){
    .info_wrap .icon{display: none;}
    .tb_box_wrap {width:100%; padding:0;}
    .tb_box{padding:28px;}

}