@charset "utf-8";
/* 첫번재 섹션 관련 소스 */
/* latest */

#latest{ margin-bottom: 60px;}
#latest .inner_wrap{font-size: 0; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; word-break: keep-all;}

#latest .latest_l{width: 55%; }
#latest .tit_wrap{display: flex;  align-items: flex-end; position: relative;}
#latest .tit_wrap h2{font-size: 38px; font-weight: bold; width: 100%;  }
#latest .latest_l .tit_wrap ul.tab{display: flex;width: 100%; max-width: 280px; margin-right: 100px;}
#latest .latest_l .tit_wrap ul.tab li{margin: 0 20px 0 0;}
#latest .latest_l .tit_wrap ul.tab li a{display: block;font-size: 22px; font-weight: bold; color: #333; text-align: center;}
#latest .latest_l .tit_wrap ul.tab li.on a{color: #309cc4}
#latest .tit_wrap .more_btn{font-size: 36px; display: block; width:100%; max-width: 22px; position: absolute; top: 5px; right: 0}

#latest .tab_con_cmn{margin-bottom: 30px; display: none;}
#latest .tab_con_01{display: block;}
#latest .tab_con_cmn ul.la_extract{display: flex; flex-wrap: wrap; justify-content: space-between;}
#latest .tab_con_cmn ul.la_extract li{width: 50%;border-bottom: 1px solid #ccc; box-sizing: border-box;}

#latest .tab_con_cmn ul.la_extract li a{display: block; padding: 34px 0; box-sizing: border-box;  display: flex; align-items: center;}
#latest .tab_con_cmn ul.la_extract li:nth-child(3),#latest .tab_con_cmn ul.la_extract li:nth-child(4){border-bottom: 0}
#latest .tab_con_cmn ul.la_extract li a span.date{font-size:16px; color: #a5a5a5; font-weight: bold; display: none; width: 100%; max-width: 80px; text-align: center;}
#latest .tab_con_cmn ul.la_extract li a span.date b{font-size:38px;font-weight: bold; display: block}
#latest .tab_con_cmn ul.la_extract li a .txt{/*width: calc(100% - 100px)*/ width: 100%;padding: 0 20px; box-sizing: border-box;}
#latest .tab_con_cmn ul.la_extract li a span.tit{width: 100%; display: block; font-size: 22px; font-weight: bold; overflow: hidden;text-overflow: ellipsis; white-space: nowrap; margin-bottom: 7px;}
#latest .tab_con_cmn ul.la_extract li a span.tit b{background: #51b7c5; font-size: 16px; padding: 4px 10px; box-sizing: border-box; border-radius: 3px; color: #fff; font-weight: bold; display: inline-block; vertical-align: middle; margin-right: 10px;}
#latest .tab_con_cmn ul.la_extract li a span.exp{display: block; font-size: 18px;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;}



#latest .latest_r{width: 42%;}
#latest .latest_r ul.platform{display: flex;flex-wrap: wrap; justify-content: space-between; width: 100%; margin-top: 35px;}
#latest .latest_r ul.platform li{width: 17.6%; height: 191px;transition: .3s}

#latest .latest_r ul.platform li a{display: block; font-size: 18px; font-weight: 500; line-height: 24px; text-align: center; background: #e6f4d1; padding: 35px 0; box-sizing: border-box; height: 100%; border-radius: 50px; }
#latest .latest_r ul.platform li:nth-child(2) a{background: #d4f2eb}
#latest .latest_r ul.platform li:nth-child(3) a{background: #ffe9d7}
#latest .latest_r ul.platform li:nth-child(4) a{background: #e4e4fb}
#latest .latest_r ul.platform li:nth-child(5) a{background: #ffe1e9}
#latest .latest_r ul.platform li a::before{content: '';background: url(./img/latest_r_spicon.png)0 0 no-repeat; width: 64px; height: 58px; display: block; margin: 0 auto 15px;}
#latest .latest_r ul.platform li:nth-child(2) a::before{background-position: -64px 0;}
#latest .latest_r ul.platform li:nth-child(3) a::before{background-position: -128px 0;}
#latest .latest_r ul.platform li:nth-child(4) a::before{background-position: -192px 0;}
#latest .latest_r ul.platform li:nth-child(5) a::before{background-position: -256px 0;}


#latest .latest_r ul.platform li:hover, #latest .latest_r ul.platform li:focus{margin-top: -20px;}



@media all and (max-width:1200px) {
    #latest{margin-bottom: 60px;}
    #latest .inner_wrap{flex-direction: column;}
    #latest .latest_l{width: 100%;}
    #latest .latest_r{width: 100%;}
}

@media all and (max-width:768px) {
    #latest .tit_wrap h2{font-size: 30px;}
    #latest .latest_l .tit_wrap ul.tab li a{font-size: 18px;}
    
    #latest .tab_con_cmn ul.la_extract li a span.date{font-size: 14px; max-width: 60px;}
    #latest .tab_con_cmn ul.la_extract li a span.date b{font-size: 32px;}
    #latest .tab_con_cmn ul.la_extract li a span.tit{font-size: 17px;}
    #latest .tab_con_cmn ul.la_extract li a span.tit b{font-size: 14px;}
    #latest .tab_con_cmn ul.la_extract li a .txt{width: calc(100% - 60px);}
    #latest .tab_con_cmn ul.la_extract li a span.exp{font-size: 16px;}
    
    #latest .latest_r ul.platform li a{font-size: 16px; line-height: 22px;}

}

@media all and (max-width:640px) {
    #latest .tab_con_cmn ul.la_extract li {width: 100%;}
    #latest .tab_con_cmn ul.la_extract li:nth-child(3) a, #latest .tab_con_cmn ul.la_extract li:nth-child(4) a{border-bottom: 1px solid #ccc;}
}


@media all and (max-width:525px) {
    #latest .tit_wrap{justify-content: space-between;}
    #latest .latest_l .tit_wrap ul.tab{margin-right: 0; justify-content: flex-end}
    #latest .tab_con_cmn ul.la_extract li a .txt{padding: 0 10px;}
    
    
    #latest .latest_r ul.platform li{width: 32%; margin-bottom: 2%; height: auto;}
    #latest .latest_r ul.platform li:nth-child(4), #latest .latest_r ul.platform li:nth-child(5){width: 49%; margin-bottom: 0}
    #latest .latest_r ul.platform li a{padding: 15px 0; border-radius: 20px;}
    #latest .latest_r ul.platform li a::before{zoom:.6}
}

/* 게시판 리스트 관련 소스 */

.control{z-index:2; position:absolute; top:13px; right:30px;}
.control:after{content:''; display:block; clear:both;}
.control button, .control a{position:relative; float:left; width:25px; height:25px; box-sizing:border-box; margin:0 0 0 5px; font-size:0; text-indent:-9999px; vertical-align:top;}
.control button:before{content:''; position:absolute; top:8px; left:10px; width:7px; height:7px; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(-135deg);}
.control .btn_next:before{left:7px; transform:rotate(45deg);}
.control .btn_stop:before{top:7px; left:8px; width:7px; height:10px; border-top:none; border-left:2px solid #fff; border-right-width:2px; transform:none;}
.control .btn_stop.on:before{top:7px; left:4px; border-right:none; border-top:8px solid #fff; border-left:8px solid transparent !important; transform:rotate(45deg);}

.control a:before,
.control a:after{content:''; position:absolute; top:50%; margin:-1px 0 0 -5px; left:50%; width:10px; height:2px; background:#fff;}
.control a:after{top:6px; left:12px; width:2px; height:10px; margin:4px 0 0 -3px;}

.page{float:left; height:25px; line-height:27px; padding:0 3px 0 4px; font-family:'gmarket'; color:#fff; text-align:center;}
.page *{display:inline-block;}
.page .current{color:#fff4be; font-weight:800;}
.page .dash{display:inline-block; width:13px; height:1px; margin:-2px 14px 0; background:rgba(255,255,255,0.8); vertical-align:middle;}

em.tit{display:inline-block !important; max-width:98%; padding:0 20px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box; vertical-align:middle; font-weight:500; font-size: 20px; }
.new{display:inline-block !important; width:16px; height:19px; line-height:19px; margin:-1px 0 0 -20px; text-transform:uppercase; text-align:center; border-radius:3px; background:#d3485f; font-weight:500; font-size:9px; color:#fff; vertical-align:middle;}

.date_wrap{position:absolute; top:2px; right:20px; color:#888; font-size: 20px;}
.date_wrap *{display:inline-block !important;}
.date_wrap span:before,
.date_wrap span:not(.date):after{content:''; display:inline-block; width:17px; height:12px; background:url(/images/kr/main/ico_view.gif) no-repeat; vertical-align:middle; margin:-4px 4px 0 0;}
.date_wrap span:not(.date):after{width:1px; height:11px; margin:-3px 11px 0 11px; background:#ddd;}
.date_wrap span.date:before{width:15px; height:15px; background-image:url(/images/common/ico_date.gif);}

.no_list{width:100% !important; padding:6em 0 0 0 !important; text-align:center;}
.no_list:before{display:none !important;}

@media all and (max-width:568px) {
    .date_wrap .view,
    .date_wrap span.date:before{display:none;}
    
    .no_list{padding:3em 0 0 0 !important;}
}




/* 게시판 */
.board_wrap h4{display:inline-block; font-size:24px; margin:0 0 15px;}
.board_wrap h4 span{font-weight:200;}
.board_wrap h4 + p{display:inline-block; padding:0 0 0 13px; font-size:14px; color:#888;}

#board{float:left; width:calc(100% - 630px);}
#board > ul{position:relative; padding:0 55px 0 0;}
#board > ul:after{content:''; display:block; clear:both;}
#board > ul > li{float:left; width:25%; box-sizing:border-box; border:1px solid #e9e9e9; background:#fbfbfb;}
#board > ul > li:first-child{border-radius:15px 0 0 15px;}
#board > ul > li + li{border-left:none;}

#board li h5{display:block;}
#board li h5 a{position:relative; display:block; width:100%; line-height:50px; font-size:18px; font-weight:300; color:#555; text-decoration:none; text-align:center;}
#board li.on h5 a{font-weight:500; color:#fff;}
#board li h5 a:before{opacity:0; visibility:hidden; content:''; position:absolute; top:-1px; left:-1px; width:calc(100% + 2px); height:calc(100% + 2px); border-radius:15px; background:#4c8dd6; box-shadow:5px 0 15px rgba(153,153,153,0.6);}
#board li.on h5 a:before{opacity:1; visibility:visible;}
#board li h5 a span{position:relative;}

#board .con{opacity:0; visibility:hidden; position:absolute; top:100px; left:0; width:100%; box-sizing:border-box;}
#board .on .con{opacity:1; visibility:visible; top:67px; transition:0.35s ease-in-out;}

#board .con li a{position:relative; display:block; padding:0 230px 0 20px; box-sizing:border-box; text-decoration:none;}
#board .con li a:hover .tit,
#board .con li a:focus .tit,
#board .con li a:active .tit{text-decoration:underline;}
#board .con li a *{display:inline-block;}
#board > ul > li .con li:not(:first-child) a{padding-left:100px;}

#board .tit{font-weight:300; color:#333;}

#board .con li:not(:first-child){padding:9px 0; border-bottom:1px dashed #ddd;}
#board .type{position:absolute; top:0; left:20px; width:70px; height:31px; line-height:31px; border-radius:10px; font-weight:500; font-size:14px; color:#2fa0aa; background:#ecf5f7; text-align:center;}
#board .con li:not(:first-child) .tit{line-height:31px;}

#board .more{display:none; position:absolute; top:0; right:0; width:55px; height:100%; box-sizing:border-box; border:1px solid #e9e9e9; border-left:none; border-radius:0 15px 15px 0; font-size:0; text-indent:-999px;}
#board .more:before,
#board .more:after{content:''; position:absolute; top:50%; left:50%; margin:-8px 0 0 -1px; width:2px; height:15px; background:#555;}
#board .more:after{width:15px; height:2px; margin:-1px 0 0 -8px;}
#board .on .more{display:block;}

/* 게시판 첫번째 글 스타일 */
#board .con li:not(.no_list):first-child{overflow: hidden;padding:20px 0 14px;max-height: 146px;border-radius:10px;background:#f0f4f9;box-sizing: border-box;}
#board .con li:first-child .tit{padding:0 20px 0 0; font-size:20px; font-weight:500; color:#222;}
#board .con li:first-child .txt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%; padding:10px 0 0; color:#555;}



@media all and (max-width:1024px) {
    .board_wrap{padding:50px 0;}
    #board{width:100%; height:365px; margin:0 0 50px;}
}

@media all and (max-width:768px) {
    #board{height:346px;}
    #board li h5 a{line-height:40px; font-size:1em;}
    #board .on .con{top:52px;}
    
    #board .con li:first-child .tit{font-size:1.063em;}
}

@media all and (max-width:568px) {
    .board_wrap{padding:30px 0;}
    .board_wrap h4{font-size:21px; margin:0 0 10px;}
    .board_wrap h4 + p{display:block; padding:5px 0 10px;}
    
    #board{height:358px; margin:0 0 30px;}
    #board h4{margin:0;}
    #board > ul{padding:0 35px 0 0;}
    #board .con li:not(.no_list):first-child {max-height: 135px;}
    #board .more{width:35px;}
    
    #board .con li a{padding:0 100px 0 15px !important;}
    #board .con li .date_wrap{top:6px;}
    #board .type,
    .date_wrap .view{display:none !important;}
    
    #board .con li:first-child .date_wrap{top:0;}
    

}

@media all and (max-width:380px) {
    .board_wrap h4{font-size:19px;}
    #board{height:350px;}
    #board .con li:not(.no_list):first-child {max-height: 126px;}
}

/* 두번재 섹션 스타일 */
table { width: 100%; border-spacing: 0; border-collapse: collapse; table-layout: fixed; word-break: break-all; word-wrap: break-word; empty-cells: show; }
.inner_wrap {width:100%;max-width:1400px;margin:0 auto; word-break: keep-all;}
    /* info */

#info{position: relative;margin-bottom: 60px;}
#info .inner_wrap{display: flex; flex-wrap: wrap; justify-content: space-between;}

#info .tit_wrap{display: flex;  align-items: flex-end; position: relative; margin-bottom: 25px;}
#info .tit_wrap h2{font-size: 38px; font-weight: bold; width: 100%;  }

#info .info_l{width: 55%; }
#info .info_l .con_wrap{position: relative; overflow: hidden; width: 100%; max-width: 768px; height: 349px;border-radius: 20px;box-shadow: 0 0 12px rgba(0,0,0,.1);}

#info .info_l img{display: block; width: 100%; height: 100%; box-sizing: border-box; }
#info .info_l a{display: block; position: absolute; bottom: 0; right: 0; font-size: 18px; font-weight: 500; color: #fff; background: #005737; width: 230px; text-align: center; padding: 20px; border-radius: 20px 0;}
#info .info_l a::after{content: '>'; margin-left: 15px;}
#info .info_l a:hover, #info .info_l a:focus{font-weight: bold;}

#info .info_r{width: 42%; }
#info .info_r::after{content: ''; display: block;width: 655px; height: 460px; background: #e4f2ff; border-radius: 40px 0 0 40px; position: absolute; top:10px; right: 0; z-index: -1}

#info .schedule{width: 100%; display: flex; flex-wrap: wrap; align-items: center; background: #fff;box-shadow: 0 0 12px rgba(0,0,0,.1); border-radius: 20px;}
#info .schedule .schedule_l{width: 60%; padding: 28px 30px; box-sizing: border-box; border-right: 1px dashed #ccc;}
#info .schedule .schedule_l .calendar_tit{text-align: center; margin-bottom: 7px;display: flex; justify-content: space-between; align-items: center; padding: 0 20px; box-sizing: border-box;}
#info .schedule .schedule_l .calendar_tit li{}
#info .schedule .schedule_l .calendar_tit li img{display: block;}
#info .schedule .schedule_l .calendar_tit li{display: block; font-size: 28px; font-weight: bold;}
#info .schedule .schedule_l .calendar_tit li b{font-size: 34px; font-weight: bold; }



#info .schedule .schedule_l .calendar th, #info .schedule .schedule_l td{font-size: 16px; font-weight: 500; text-align: center; background: #fff; height: 34px; padding: 6px 0; box-sizing: border-box;}
#info .schedule .schedule_l .calendar th{color: #999; padding-bottom: 16px; }

#info .schedule .schedule_l .calendar .sun{color:#ff5a4c; }
#info .schedule .schedule_l .calendar .sat{color:#4d42cc; }
#info .schedule .schedule_l .calendar .holiday{color:#de3d00; }
#info .schedule .schedule_l .calendar .disabled{color:#b5b5b5; }

#info .schedule .schedule_l .calendar td span{width: 34px; height: 34px; display: block; line-height: 34px; border-radius: 50%; margin: 0 auto;}
#info .schedule .schedule_l .calendar td span.today{background: #f9aa00; color: #fff; cursor: pointer;}
#info .schedule .schedule_l .calendar td span.schdl{background: #e9e9e9; cursor: pointer;}

#info .schedule .schedule_l ul.schedule_con{ padding:0 23px; box-sizing: border-box; margin-bottom: 30px; width: 100%;}
#info .schedule .schedule_l ul.schedule_con li{}
#info .schedule .schedule_l ul.schedule_con li {display: flex; align-items: center;}
#info .schedule .schedule_r{width: 40%; padding: 30px; box-sizing: border-box;}
#info .schedule .schedule_r ul{width: 100%;}
#info .schedule .schedule_r ul li{margin-bottom: 40px;}
#info .schedule .schedule_r ul li:last-child{margin-bottom: 0;}
#info .schedule .schedule_r ul li span{display: block;}
#info .schedule .schedule_r ul li span.tit{font-size: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 10px;}
#info .schedule .schedule_r ul li span.tit:hover, #info .schedule .schedule_r ul li span.tit:focus{color: #f9aa00}
#info .schedule .schedule_r ul li span.date{font-size: 16px; color: #666;}


@media all and (max-width:1200px) {
    #info .inner_wrap{flex-direction: column;}
    #info .info_l{width: 100%; margin-bottom: 50px;}
    #info .info_l .con_wrap{width: 80%; max-width: none; margin: 0 auto;}
    #info .info_r{width: 100%;}
}
@media all and (max-width:1200px) {
    #info .info_l .con_wrap{width: 100%;}
}


@media all and (max-width:768px) {
    #info .tit_wrap h2{font-size: 30px;}
    #info .info_l .con_wrap{height: auto}
    #info .info_l a{font-size: 16px; padding: 12px; max-width: 160px}
    
    #info .schedule .schedule_l .calendar_tit li{font-size: 24px;}
    #info .schedule .schedule_l .calendar_tit li b{font-size: 28px;}
    #info .schedule .schedule_l .calendar th, #info .schedule .schedule_l td{font-size: 15px;}
    #info .schedule .schedule_r ul li span.tit{font-size: 16px;}
    #info .schedule .schedule_r ul li span.date{font-size: 14px;}
    
}

@media all and (max-width:525px) {
    #info .schedule{flex-direction: column;}
    #info .schedule .schedule_l{width: 100%; border-right: none;}
    #info .schedule .schedule_r{width: 100%;}
}


@media all and (max-width:460px) {
    #info .info_l a{font-size: 14px; padding: 8px; max-width: 130px}
}

/* 세번째 섹션 스타일 */
   /* newsletter */

   #news{background: #f2f8ff; padding: 50px 0; box-sizing: border-box;}
   #news .inner_wrap{display: flex; flex-wrap: wrap; justify-content: space-between;}
   
   #news .tit_wrap{display: flex;  align-items: flex-end; justify-content: space-between; position: relative; margin-bottom: 25px;}
   #news .tit_wrap h2{font-size: 38px; font-weight: bold; width: 100%;  }
   #news .tit_wrap a.more_btn{font-size: 38px;}
   
   
   #news .news_l {width:27% }
   #news .news_c {width:39.28% }
   #news .news_r {width:28% }
   
   
   #news .news_l .newsletter{}
   #news .news_l .newsletter a{display: block; border-radius: 20px; overflow: hidden; box-shadow: 0 0 12px rgba(0,0,0,.1); }
   #news .news_l .newsletter a .thumb{ width: 378px; height: 284px;}
   #news .news_l .newsletter a .thumb img{width: 100%; height: 100%; object-fit: fill;}
   #news .news_l .newsletter a .txt{background: #fff; padding: 30px; box-sizing: border-box;}
   #news .news_l .newsletter a .txt span{display: block; }
   #news .news_l .newsletter a .txt span.tit{font-size: 20px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 10px;}
   #news .news_l .newsletter a .txt span.exp{font-size: 18px; font-weight: 500; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
   
   #news .news_c ul.volunteer{}
   #news .news_c ul.volunteer li{margin-bottom: 25px; border-radius: 20px; overflow: hidden; box-shadow: 0 0 12px rgba(0,0,0,.1)}
   #news .news_c ul.volunteer li:last-child{margin-bottom: 0;}
   #news .news_c ul.volunteer li a{display: flex; flex-wrap: wrap; align-items: center; height: 186px; background:#fff;}
   #news .news_c ul.volunteer li a .thumb{width:40%; height: 186px;}
   #news .news_c ul.volunteer li a .thumb img{width: 100%; height: 100%; object-fit: fill;}
   #news .news_c ul.volunteer li a .txt{width: 60%; background: #fff; padding: 30px; box-sizing: border-box;}
   #news .news_c ul.volunteer li a .txt span{display: block; }
   #news .news_c ul.volunteer li a .txt span.tit{font-size: 20px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 10px;}
   #news .news_c ul.volunteer li a .txt span.exp{font-size: 18px; line-height: 28px; font-weight: 500; color: #666; overflow: hidden; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;-webkit-box-orient: vertical;}
   
   #news .news_r .box{}
   #news .news_r .box .box_t{margin-bottom: 25px;}
   #news .news_r .box .box_t ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
   #news .news_r .box .box_t ul li{width: 46%;}
   #news .news_r .box .box_t ul li a{display: block; font-size: 20px; font-weight: 600; text-align: center; background: #fff; padding: 42px 0; box-sizing: border-box; border-radius: 20px; box-shadow: 0 0 12px rgba(0,0,0,.1);}
   #news .news_r .box .box_t ul li a::before{content: ''; background: url(./img/box_t_spicon.png)0 0 no-repeat; width: 65px; height: 68px; display: block; margin: 0 auto 10px;}
   #news .news_r .box .box_t ul li:nth-child(2) a::before{background-position: -65px 0;}
   
   #news .news_r .box .box_b{background: #fff;border-radius: 20px; box-shadow: 0 0 12px rgba(0,0,0,.1); padding:28px 30px; box-sizing: border-box;}
   #news .news_r .box .box_b h2{font-size: 38px; font-weight: bold; width: 100%; margin-bottom: 10px;}
   #news .news_r .box .box_b ul.hot_list{display: flex; flex-wrap: wrap; justify-content: space-between;}
   #news .news_r .box .box_b ul.hot_list li{width: 31%;}
   #news .news_r .box .box_b ul.hot_list li a{display: block; font-size: 18px; font-weight: 600; text-align: center; border: 1px solid #ff2b30; background: #fff6f6; padding: 7px; border-radius: 10px; }
   #news .news_r .box .box_b ul.hot_list li:nth-child(2) a{background: #eef5ff; border-color: #1777f1;}
   #news .news_r .box .box_b ul.hot_list li:nth-child(3) a{background: #fff5f7; border-color: #ff5f83;}
   #news .news_r .box .box_b ul.hot_list li a::before{content: ''; background: url(./img/hot_spicon.png)0 0 no-repeat; width: 30px; height: 28px; display: block; margin: 0 auto 10px;}
   #news .news_r .box .box_b ul.hot_list li:nth-child(2) a::before{background-position: -30px 0;}
   #news .news_r .box .box_b ul.hot_list li:nth-child(3) a::before{background-position: -60px 0;}
   
   @media all and (max-width:1200px) {
       #news .inner_wrap{flex-direction: column;}
       #news .news_l{width: 100%; margin-bottom: 50px;}
       #news .news_l .newsletter a .thumb{width: 100%;}
       #news .news_c{width: 100%;margin-bottom: 50px;}
       #news .news_r{width: 100%}
       #news .news_r .box .box_t ul li{width: 48%}
   }
   
   @media all and (max-width:768px) {
       #news .tit_wrap h2{font-size: 30px}
       #news .news_c ul.volunteer li a{display: block; height: auto;}
       #news .news_c ul.volunteer li a .thumb{width: 100%;}
       #news .news_c ul.volunteer li a .txt{width: 100%;}
       
       #news .news_l .newsletter a .txt span.tit{font-size: 18px;}
       #news .news_l .newsletter a .txt span.exp{font-size: 16px;}
       #news .news_c ul.volunteer li a .txt span.tit{font-size: 18px;}
       #news .news_c ul.volunteer li a .txt span.exp{font-size: 16px; line-height: 24px;}
       #news .news_r .box .box_t ul li a{font-size: 18px;}
       #news .news_r .box .box_b h2{font-size: 30px;}
       #news .news_r .box .box_b ul.hot_list li a{font-size: 15px;}
       
       
   }