@charset "utf-8";

/* 모바일용 CSS */
/* 기본 CSS */
#wrap{
display:flex;
flex-flow:column nowrap;
width:100%;
margin:0 auto;
}

#wrap section{
box-sizing:border-box;
}

/* 슬라이더 영역 CSS */
.slider_section{
display:flex;
justify-content:space-between;
align-items:center;
order:2;
width:100%;    
}


/* 인기 검색어 영역 CSS */
.rankup_section{
order:3;
display:flex;
flex-direction:column;
justify-content:center;
padding:40px 8.5%;
/* 40px ÷ 320px */
background-color:#ffa9af;
}

.rankup_list{
padding-bottom:10px;    
}

.rankup_list li{
width:100%;
/* 115px ÷ 240px */
margin-top:10px;
list-style: none;
padding:3px 10px;
vertical-align:middle;
border-bottom: 1px solid #DDD;
}

.rankup_list li:first-child{
margin-top:10;
}

.rankup_list li a{
display:block;
}

/* 회원 및 기타 영역 CSS */
.mem_section{
order:4;
display:flex;
flex-direction:column;
justify-content:center;
padding:40px 8.5%;
/* 40px ÷ 320px */
background-color:#c5bd96;
}

.mem_list li{
width:100%;
/* 115px ÷ 240px */
margin-top:10px;
list-style: none;
padding:3px 10px;
vertical-align:middle;
border-bottom: 1px solid #DDD;
}
.rankup_list li a, .mem_list li a{
    font-size:1.688em;
    line-height:1.888em;  
    color:#fff;
    font-weight: bold;
}

.mem_list li:first-child{
margin-top:10;
}

/* 공지사항 영역 CSS */
.latest_post_section{
order:5;
/*background:url("../images/latest_bg.png") top;*/
background:#604a7b;
}
/* 행사안내 영역 CSS */
.promote_section{
order:6;
background:#558ed5;
/*background:url("../images/promote_bg.png") top;*/
}
/* 자격과정 영역 CSS */
.recruit_section{
order:7;
background:#ff7d7f;
/*background:url("../images/recruit_bg.png") top;   */
}
/* 협회동정 영역 CSS */
.popular_post_section{
order:8;
/*background:url("../images/popular_bg.png") top;*/
background:#9bbb58;  
}

.latest_post_section, .promote_section, .recruit_section,.popular_post_section{
display:flex;
flex-direction:column;
padding-top:20px;  
/*padding:20px 5.5%;
/* 40px ÷ 320px */
}
.latest_list{
margin-top:8px;
margin-left:10px;    
margin-bottom:20px;
}

.title{
margin-top:7px;
margin-bottom:8px;    
margin-left:15px;       
font-size:1.788em;
color:#fff;
}
.popular_post_section .lt_news ul{
 margin-top:15px;
 margin-bottom:20px;
}
.recruit_section .latest_list ul{
margin-top:12px;
margin-left:30px;    
margin-bottom:30px;     
padding:3px 10px;
} 

.recruit_section .latest_list li{    
    list-style: square outside none;    
}
.recruit_section .latest_list li a{    
    font-size:1.688em;
    line-height:2.2em;  
    color:#fff;
    font-weight: bold;
    vertical-align: middle;
}

/* 태블릿용 CSS */
@media all and (min-width:650px){
/* 기본 CSS */
#wrap{
flex-flow:row wrap;
}

/* 슬라이더 영역 CSS */
.slider_section{
order:2;
width:100%;
/* 550px ÷ 768px */
height:auto;
}

.slider_section span{
position:relative;
z-index:10;
}
.rankup_section{
order:3; 
width:50%;    
}
.mem_section{
order:4; 
width:50%;        
}    
/* 최근 글 영역, 인기 글 영역 CSS */
.latest_post_section{
order:5;
width:50%; 
}

/* 행사안내 영역 CSS */
.promote_section{
order:6;
width:50%; 
}
/* 자격과정 영역 CSS */
.recruit_section{
order:7;
width:50%; 
}
.popular_post_section{
order:8;
width:50%; 
}
    
.latest_head {
    width: 96%;
    margin: 0 auto;
}

.popular_head {
    width: 96%;
    margin: 0 auto;    
}
.latest_post_section, .popular_post_section{
width:50%;
display:flex;
flex-direction:column;
}
    
}

/* PC용 CSS */
@media all and (min-width:969px){
/* 기본 CSS */
#wrap{
position:relative;
width:100%;
max-width:1100px;
}

/* 슬라이더 영역 CSS */
.slider_section{
order:2;
width:50%;
/* 543px ÷ 1100px */
}

/* 인기 검색어 영역 CSS */
.rankup_section{
order:3;    
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
width:25%;
/* 275px ÷ 1100px */
padding:0;
}

.rankup_list{
display:block;
}

.rankup_list li{
width:auto;    
text-align:left;
}

.rankup_list li:before{
padding-right:6px;
padding-right:0.375rem;
}

.rankup_list li a{
display:inline;
padding:0;
border:0;
}
/* 주요 안내 CSS */
.mem_section{
order:4;    
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
width:25%;
/* 275px ÷ 1100px */
padding:0;
}

.mem_list{
display:block;
}

.mem_list li{
width:auto;
text-align:left;
}

.mem_list li:before{
padding-right:6px;
padding-right:0.375rem;
}

.mem_list li a{
display:inline;
padding:0;
border:0;
}
/* 최근 글 영역, 인기 글 영역 CSS */
.latest_post_section, .popular_post_section, .promote_section, .recruit_section{
display:flex;
flex-direction:column;
width:25%;
/* 275px ÷ 1100px */
padding-left:0;
padding-right:0;
}
.latest_list{  
margin-bottom:10px;
}
.popular_post_section .lt_news ul{
 margin-top:20px;    
 margin-bottom:10px;
}
.recruit_section .latest_list ul{ 
padding:0px 0px;
} 
.recruit_section .latest_list li a{    
    font-size:1.488em;
}
}