*{margin:0;padding:0;}
body{font-family:  "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", 
    "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
ul{list-style:none;}
a{text-decoration:none;}
button{background-color: inherit;border:none; box-shadow:none; cursor:pointer;}
 
#Wrapper{
    position:relative; width:100%;
}
#Wrapper .btn01{  /* -- 수강신청-- */
    position:absolute;top:105px;right:0px;  
    width:320px; height:90px; 
    border-radius: 10px;
}
/* --------------------------------------------------------------------------------- */
#Wrapper .mainHeader{  
    width:100%;
    background-image: url('/images/jobplat/2025/roadmap/pc/images//00_bg.jpg');
    background-position: center;
    background-size: cover;
}
#Wrapper .mainHeader .inner{ 
    position:relative;
    width:1100px; height:950px;
    margin:0 auto;
}
.tit1{
    position: absolute;top:160px; left:200px; 
}
.tit2{
    position: absolute;top:250px; left:140px;
    animation-delay: 0.2s;
}
.pin1{
    position:absolute;bottom:100px; right:250px;    
    animation-delay: 0.2s;
}
.pin2{
    position:absolute;bottom:340px; left:230px;  
}
/* --------------------------------------------------------------------------------- */
#Wrapper .conWrap{
    width:100%;
}
#Wrapper .conWrap .inner{ /*(공통) 컨텐츠 박스 */    
    position:relative;
    width:1100px;
    height:auto;
    margin:0 auto;
}
/* --------------------------------------------------------------------------------- */
#Wrapper .conWrap .con01{
    height:auto; 
    background-color: #e4e6fc;
}
#Wrapper .conWrap .inner2{ /* -------첫번째 탭 시작-------- */
    position:relative;
    width:100%;
    height:70px;
    background-color: #454eff;
    margin:0 auto;
}
#Wrapper .conWrap .tab {
    width:1100px; 
    margin: 0 auto;
}
#Wrapper .conWrap .tab .tabmenu{
    width:1100px; 
    height:90px;
    display: flex; 
    justify-content:center;
}
#Wrapper .conWrap .tab .tabmenu li {
    width: 500px; 
    height:60px;
    margin:0;
    color:#999;
    text-align: center;
    line-height: 60px;
    font-size: 22px;
    font-weight: 700;
    cursor:pointer;
}
#Wrapper .conWrap .tab .tabmenu li.on {
    color:#fff;
}
#Wrapper .conWrap .inner .tabcon {
    width:1100px;
    height: auto;
    padding-bottom:20px;
}
#Wrapper .conWrap .inner .tabcon .conbox {
    display: none;
}
#Wrapper .conWrap .inner .tabcon .on { /* -------첫번째 탭 끝-------- */
    display: block;   
}

/* --------------------- -------------------------- */
 
#Wrapper .conWrap .con02{
    height:auto;
    background-color: #fff;
}
#Wrapper .conWrap .inner3{ /* ------- 두번째 탭 시작-------- */
    position:relative;
    width:100%;
    height:70px;
    background-color: #454eff;
    margin:0 auto;
}
#Wrapper .conWrap .tab {
    width:1100px; 
    margin: 0 auto;
}
#Wrapper .conWrap .tab .tabmenu2{

    width:1100px; 
    height:90px;
    display: flex; 
    justify-content:center;
}
#Wrapper .conWrap .tab .tabmenu2 li {
    width: 500px; 
    height:60px;
    margin:0;
    color:#999;
    text-align: center;
    line-height: 60px;
    font-size: 22px;
    font-weight: 700;
    cursor:pointer;
}
#Wrapper .conWrap .tab .tabmenu2 li.on {
    color:#fff;
}
#Wrapper .conWrap .inner .tabcon2 {
    width:1100px;
    height: auto;

}
#Wrapper .conWrap .inner .tabcon2 .conbox {
    display: none;
}
#Wrapper .conWrap .inner .tabcon2 .on { /* -------두번째 탭 끝-------- */
    display: block;   
}

.listbox{  /* -------강의리스트 css 시작------- */
    margin:70px 0;
    display: flex;
    _justify-content: space-between;
    flex-wrap:wrap;
    margin-right: calc(-0.5* 2rem);
    margin-left: calc(-0.5* 2rem);
}
.listbox li{
    float: left;
    position:relative;
    width:250px; 
    height:400px;
    cursor:pointer;
    margin-bottom:70px;
    padding-right: calc(2rem* 0.5);
    padding-left: calc(2rem* 0.5);
}
.listbox li .thumb{
    width:250px; 
    height:250px;
    background-color: #ddd;
}
.listbox li .tit{
    display: inline-block;
    margin-top:10px;
    font-size:18px;
    font-weight: 600;
    letter-spacing:-0.2px; 
}
.listbox li .state{
    position: absolute; 
    bottom:0px;
    width:250px;
    height:52px;
    line-height:52px;
    background-color:#111;
    font-size:15px;
    font-weight:600;
    color:#fff;
    letter-spacing:-0.2px; 
    text-align: center;
}
.listbox li .on{
    background-color:#2740ff;
}

/* --------------------------------------------------------------------------------- */
#Wrapper .conWrap .con03{
    height:300px;
    background:url("/images/jobplat/2025/roadmap/pc/images//ending_bg.jpg");
    background-position: center;
    background-size: cover;
}