@charset "utf-8";



h2{font-family:"SBAggro";font-weight:400;color:var(--color1)}
.f_agr{font-family:"SBAggro";}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  /* 말줄임 적용 */
}

.multi_ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.2em;
  max-height: 2.4em;
}

/* Mobile */
.m_top{background:#eff0f4 url("/images/24_safety/main/visual_bg.png") no-repeat left top;background-size:100%;padding: 20px;}
.main_visual{text-align:center;padding-top:200px;font-size:28px;color:var(--color2);font-weight:200;}
.main_visual strong{display:inline-block;font-size:36px;margin-top:-5px;color:var(--color1)}


.m_link{padding:20px 0;}
.m_link ul:afteR{display:block;content:"";clear:both;}
.m_link li{float:left;width:50%;}
.m_link li:nth-child(1){padding-right:5px;}
.m_link li:nth-child(2){padding-left:5px;}
.m_link li a{position:relative;display:block;background:var(--color1);text-align:center;color:var(--white);border-radius:10px;padding:15px 0 15px 15px;letter-spacing:-1px;}
.m_link li:nth-child(1) a:before{display:block;content:"";width:24px;height:24px;background:url("/images/24_safety/main/icon_set.png") no-repeat left top;position:absolute;left:10px;}
.m_link li:nth-child(2) a:before{display:block;content:"";width:24px;height:24px;background:url("/images/24_safety/main/icon_set.png") no-repeat left -50px;position:absolute;left:10px;}

.m_link2{background:var(--color2);border-radius:10px;padding:15px 20px;}
.m_link2 li a{display:block;color:var(--white);font-weight:200;font-size:15px;padding:5px 0;background:url("/images/24_safety/main/mt_arr.png") no-repeat 97% center;}


.m_bbs{position:relative;background:var(--gra1);padding:30px 20px;height:720px;}
.m_bbs h2{font-size:24px;padding-bottom:20px;}
.m_bbs h3{float:left;width:50%;padding:0 10px;}
.m_bbs h3 a{display:block;font-size:18px;font-weight:100;text-align:center;background:var(--white);border-radius:10px;padding:15px 0 10px 0;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.m_bbs h3 a.on{background:var(--color1);color:var(--white)}

.m_bbs .b_box{position:absolute;top:130px;left:0;width:100%;padding:20px 30px;}
.m_bbs .b_box li{background:var(--white);border-radius:20px;padding:20px;box-shadow: 0 0 10px rgba(0,0,0,0.1);margin-bottom:15px;}
.m_bbs .b_box li a{display:block;color:var(--color2)}
.m_bbs .b_box li a strong{display:block;font-size:18px;height: 2.6em;overflow: hidden;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.m_bbs .b_box li a span{margin:20px 0;color:var(--gray2);}
.m_bbs .b_box li a span{display: none;margin:20px 0;color:var(--gray2);}
.m_bbs .b_box li:first-child a span{display: block;}
.m_bbs .b_box li a em{display:inline-block;position:relative;font-style:normal;color:var(--gray2)}
.m_bbs .b_box li a em.date{padding:0 10px 0 20px;margin-right:10px;}
.m_bbs .b_box li a em.date:before{display:block;content:"";width:15px;height:15px;background:var(--btnbg) no-repeat -90px -50px;position:absolute;top:3px;left:0;}
.m_bbs .b_box li a em.date:after{display:block;content:"";width:1px;height:10px;background:var(--gray5);position:absolute;top:5px;right:0;}

.m_bbs .b_box .more{position:absolute;top:-100px;right:30px;}
.m_bbs .b_box .more a{position:relative;display:block;color:var(--color2);font-weight:500;padding-left:20px;}
.m_bbs .b_box .more a:before{display:block;content:"";width:11px;height:11px;background:var(--btnbg) no-repeat -169px -30px;position:absolute;top:5px;left:0;}


/* Tablet */
@media (min-width: 768px) {


.m_top{height:450px;background-size:70%;}
.mt_box{width:50%;float:right;}
.main_visual{padding-top:40px;}


.m_bbs{height:570px;}
.m_bbs .b_box{width:100%;}
.m_bbs .b_box ul:after{display:block;content:"";clear:both;}
.m_bbs .b_box li{float:left;width:calc(50% - 20px);margin:10px;}
.m_bbs .b_box li a span{display:block;}


    
    
    
}

/* Desktop */
@media all and (min-width:1023px) {

 header .gnb *{color:var(--color2)}
.gnb li.sns span:after, .gnb li.lang span:after{background-position:-20px -32px;}
.gnb li.fm{background:var(--white);}
.gnb li.fm:after{background-position:-169px -30px;}
    
.m_top{padding:0;}
.mt_box{width:470px;margin-right:60px;}
.main_visual{padding-top:140px;text-align:left;}
    
 
.m_link2{padding:20px 10px;}
.m_link2 ul:after{display:block;content:"";clear:both;}
.m_link2 li{float:left;width:50%;padding:0 10px;}

.m_link li a{padding:20px 0 20px 20px;letter-spacing:0;}
.m_link li:nth-child(1) a:before,
.m_link li:nth-child(2) a:before{left:unset;}


.m_bbs{padding:60px;z-index:1;overflow: hidden;}
.m_bbs:after{display:block;content:"";background:var(--white);width:100%;height:300px;border-radius:50px 0 0 0;position:absolute;top:110px;left:60px;z-index:-1;}
.m_bbs h2{padding-bottom:60px;}
.m_bbs h3{float:none;width:170px;margin-bottom:10px;padding:0;}
.m_bbs h3 a{background:none;box-shadow:none;}
.m_bbs .b_box{top:60px;left:300px;padding:0 60px 0 0;width:calc(100% - 300px);}
.m_bbs .b_box li{width:calc(50% - 10px);margin:5px;}
.m_bbs .b_box li a strong{display:block;height:2.4em;}

.m_bbs .b_box .more{top:225px;lefT:-200px;right:inherit;}

}



@media all and (min-width:1600px) {
    

.l_search{margin-top:0;}
  
.m_top{height:570px;}

.main_visual{font-size:36px;}
.main_visual strong{font-size:48px;}
.m_link{padding:30px 0;}
.m_link2 li{padding:10px 15px;}

  
.m_bbs{height:auto;}  
.m_bbs .b_box li{width:calc(25% - 20px);margin:10px;padding:40px 30px;}
.m_bbs .b_box li a strong{font-size:20px;}
.m_bbs .b_box li a span{max-height:3.6em; -webkit-line-clamp: 3;}

  
}

/*번역*/
.translated-ltr .m_link li a{text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;}
.translated-ltr .m_link2 li a{padding-right: 15px;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;}
.translated-ltr .m_bbs h3 a{padding-bottom: 0;height: 46px;font-size: 14px;letter-spacing: -1px;}
.translated-ltr .m_bbs .b_box li a em{max-width: calc(100% - 145px);text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;}
.translated-ltr .m_bbs .b_box li a em.date{max-width: none;}

@media all and (max-width:767px) {
.translated-ltr .m_link li{width: 100%;margin: 5px 0;padding: 0;}
.translated-ltr .m_bbs h2{padding-right: 100px;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;}
}

@media all and (min-width:768px) {
.translated-ltr .mt_box{width: calc(100% - 120px);}
.translated-ltr .m_link2 li a{text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;}
}
@media all and (min-width:1023px) {
.translated-ltr .m_bbs h2{width: 240px;padding-right: 0;}
.translated-ltr .mt_box:after{display: block;clear: both;content: "";}
.translated-ltr .main_visual{text-align: right;}
.translated-ltr .m_link, .translated-ltr .m_link2{width: calc(100% - 120px);max-width: 800px;float: right;}
}