/* bma : SNS */
.m_con_sns  {background:#fff;border:1px solid #c4c4c4;padding:0 24px;margin-top:8px;}
.m_con_sns .role-head {position:relative;padding:25px 0 46px}
.m_con_sns .role-head ul {display:block;position:relative;width:100%;text-align:center;font-size:0;margin:26px 0 0}
/*.m_con_sns .role-head ul:after {content:"";display:block;position:absolute;width:100%;height:1px;background:#b2b2b2;left:0;top:50%;z-index:1} */
.m_con_sns .role-head ul li {display:inline-block;position:relative;vertical-align:top;margin:0 15px;z-index:2}
.m_con_sns .role-head ul li a {display:block;position:relative;width:68px;height:68px;border-radius:50%}
.m_con_sns .role-head ul li a:before {content:"";display:block;position:absolute;width:40px;height:40px;top:0;right:0;bottom:0;left:0;margin:auto;background:url(/img/bmasns_ico.png) no-repeat;z-index:2}
.m_con_sns .role-head ul li a.blog:before {width:50px}
.m_con_sns .role-head ul li a.fab {background:#2b4b8e}
.m_con_sns .role-head ul li a.fab:before {background-position:0px 0px}
.m_con_sns .role-head ul li a.inst {background:url(/img/bmasns_bg1.jpg) no-repeat center center}/* background:radial-gradient(circle at 33% 100%, #fed373 4%, #f15245 30%, #d92e7f 62%, #9b36b7 85%, #515ecf); */
.m_con_sns .role-head ul li a.inst:before {background-position:-60px 0px}
.m_con_sns .role-head ul li a.blog {background:#2ba203}
.m_con_sns .role-head ul li a.blog:before {background-position:-300px 2px}
.m_con_sns .role-head ul li a.kaka {background:#f9e000}
.m_con_sns .role-head ul li a.kaka:before {background-position:-180px 2px}
.m_con_sns .role-head ul li a.yout {background:#ff001e}
.m_con_sns .role-head ul li a.yout:before {background-position:-240px 0px}
.m_con_sns .role-body {max-width:1200px;position:relative;margin:0 auto;text-align:center;padding:0 0 73px;}
.m_con_sns .role-body .sns-wr {}
.m_con_sns .role-body .sns-wr.face {}
.m_con_sns .role-body .sns-wr.inst {}
.m_con_sns .role-body ul {display:block;width:100%;transition:all .3s ease}
.m_con_sns .role-body ul:after {content:"";display:block;clear:both}
.m_con_sns .role-body ul li {display:block;float:left;width:30.66%;margin:0 0 10px 0;padding: 0 10px;}
.m_con_sns .role-body ul li:last-child{margin-bottom: 90px;}
.m_con_sns .role-body ul li .grid-gutter {display:block;width:7.89%;height:0}
.m_con_sns .role-body ul li a {display:block;background:#fff}
.m_con_sns .role-body ul.face_gr li a {border-bottom:3px solid #2b4b8e}
.m_con_sns .role-body ul.inst_gr li a {border-bottom:3px solid #d83f7f}
.m_con_sns .role-body ul.you_gr li a {border-bottom:3px solid #e44356}
.m_con_sns .role-body ul li a .imgBox {width:100%;overflow:hidden}
.m_con_sns .role-body ul li a .imgBox img {display:block;position:relative;width:100%;z-index:1;transition:all .5s ease}
.m_con_sns .role-body ul li a .txtBox {padding:24px 30px;text-align:left;background:#f3f3f3;}
.m_con_sns .role-body ul li a .txtBox p {display:block;font-size:16px; font-weight:bold; letter-spacing:-0.8px;color:#444;line-height:25px;margin:0 0 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:normal;height:auto;max-height:50px;word-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.m_con_sns .role-body ul li a .txtBox span {display:block;position:relative;font-size:15px;color:#777;padding:0 0 0 43px}
.m_con_sns .role-body ul li a .txtBox span:before,
.m_con_sns .role-body ul li a .txtBox span:after {content:"";display:block;position:absolute;width:32px;height:32px;left:0;top:50%;margin:-18px 0 0;border-radius:50%;background:#2b4b8e;}
.m_con_sns .role-body ul li a .txtBox span:before {z-index:2}
.m_con_sns .role-body ul.face_gr li a .txtBox span:after {background:#2b4b8e}
.m_con_sns .role-body ul.inst_gr li a .txtBox span:after {background: url(/img/bmasns_bg1.jpg) no-repeat center center;}
.m_con_sns .role-body ul.you_gr li a .txtBox span:after {background:#ee2e24}
.m_con_sns .role-body ul.face_gr li a .txtBox span:before {background:url(/img/bmasns_ico.png) -2px -62px no-repeat;}
.m_con_sns .role-body ul.inst_gr li a .txtBox span:before {background:url(/img/bmasns_ico.png) -58px -62px no-repeat;}
.m_con_sns .role-body ul.you_gr li a .txtBox span:before {background:url(/img/bmasns_ico.png) -113px -62px no-repeat;}
.m_con_sns .role-body ul li a .txtBox span:after {z-index:1}
.m_con_sns .role-body ul li a:focus .imgBox img,
.m_con_sns .role-body ul li a:hover .imgBox img {transform:scale(1.1)}
.m_con_sns .role-body ul.no-data-ul {opacity:1}
.m_con_sns .role-body ul.no-data-ul li.no-data {display:block;width:100%;text-align:center;padding:110px 0 50px;background:url(/img/Board/default/ico_nodata.png) no-repeat center 30px;border-bottom:1px solid #ddd !important;margin:0;font-size:17px;color:#222}
.m_con_sns .role-body button {display:block;position:relative;clear:both;font-size:16px;font-weight:500;line-height:1;color:#444;border:1px solid #444;background:none;padding:15px 64px 17px 36px;margin: 0 auto;transition:all .3s ease;}.m_con_sns .role-body button:after {content:"";display:block;position:absolute;width:10px;height:10px;right:37px;top:50%;margin:-5px 0 0;background:url(/img/bmasns_ico.png) no-repeat 0px -116px;transition:all .3s ease}
.m_con_sns .role-body button:focus,
.m_con_sns .role-body button:hover {background:#fff}
.m_con_sns .role-body button:focus:after,
.m_con_sns .role-body button:hover:after {transform:rotate(90deg)}


.face_gr .grid-sizer{float:left;margin-bottom:35px;max-width:320px;width:100%}
.inst_gr .grid-sizer{float:left;margin-bottom:35px;max-width:320px;width:100%}
.you_gr .grid-sizer{float:left;margin-bottom:35px;max-width:320px;width:100%}

