*{margin:0;padding:0;}
body{font-family: "Noto Sans KR", 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%;
    overflow-x:hidden;
}
#Wrapper .btn00{ /* 수강신청 버튼 */
    position:absolute;bottom:160px; right:60px;
    width:380px; height:70px; z-index:50;  
    border-radius: 45px;
}
#Wrapper .btn01{  /* 최상단 배너 - ict 수강신청 이동 버튼 */
    position:absolute; top:0; 
    width:1100px; height:70px;  z-index:100;
     
} 
#Wrapper .btn02{  /* 메인 - 수강신청으로 이동 버튼 */
    position:absolute; bottom:88px;left:285px; 
    width:520px; height:70px; border-radius: 45px;
 
} 

 /* ---- 최상단 띠배너 2 ---- */
#Wrapper .topban2{
    width:100%;        
    text-align: center;
    vertical-align: middle;
}
.bgcol{background-color:#ffe433;}
.bgcol_black{background-color:#222;}
.bgcol_red{background-color:#df1814;}
.toptxt{
    font-size:20px;
    color:#fff;
    letter-spacing:-0.5;
    font-weight: 600;
    padding:10px 0;
}
.txtcol_yellow{color:#2115ff;}
.txtcol_b{color:#111;}


/* (추가) roll ci-------------------------- */
#Wrapper .topban {
    position: relative;
    width: 100%;
    height: 90px;
    overflow: hidden;
    background-color: #f6fcff;
}

#Wrapper .topban .inner {
    position: absolute;
    top: 0;
    left: 0;

    display: flex;
    align-items: center;

    width: max-content;
    height: 90px;
    margin: 0;

    animation: ciRolling 36s linear infinite;
    will-change: transform;
}

#Wrapper .topban .inner img {
    display: block;
    flex-shrink: 0;

    width: auto;
    max-width: none;
    height: 90px;
}

@keyframes ciRolling {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}
/* ---------------- 메인 헤더 시작 -------------------------------------------------- */
#Wrapper .mainHeader{  
    position: relative;
    width:100%;
    height:auto;
    background-image: url("../images/00_bg.jpg");
    background-position: center;
    background-size: cover;
}
 
#Wrapper .mainHeader .inner{ 
    position:relative;
    width:1100px;     height: 700px;
    margin:0 auto;
    z-index: 1;  /* 영상 위에 버튼, 이미지 표시 */
}
#Wrapper .mainHeader .inner .txtbox{
    position:absolute;top:634px;
    width:1100px; height:400; 
    display: flex;
    justify-content:center;
    flex-wrap: wrap;
}
.tit1{
    position: absolute;top:290px;left:400px;
    animation-delay: 20s;
}
.tit2{
    position: absolute;top:480px;left:300px;
    animation-delay: 30s;
}

.main_flo{
    position: absolute;top:10px; left:110px;
}

.openimg{
    position: absolute;top:170px; right:-10px;
}

/*  컨텐츠 영역 wrap---------------------------------------------- */
#Wrapper .conWrap{
    width:100%;
}
#Wrapper .conWrap .inner{ /* --- (공통)이너 박스 --- */    
    position:relative;
    width:1100px;
    height:auto;
    margin:0 auto;
}
 
/*  포인트 박스 + 수강신청  --------------------------------- */
#Wrapper .conWrap .con01{
    height:1240px;
    background-image: url('../images/01_bg.jpg');
    background-position: center;
    background-size: cover;
}
#Wrapper .pointer{
    position:absolute;bottom:120px;right:60px;
}
/*  탭 -------------------------------------------------------- */
#Wrapper .conWrap .con02{
    height:auto;
    background-color:#fff;

}
/*   (공통) 탭 시작 --- ---------------------------- */
#Wrapper .conWrap .tab {
    width:1100px; 
    margin: 0 auto;
    margin-top:80px;
 
}
#Wrapper .conWrap .tab .tabmenu{
    position:absolute;top:300px;/* li높이 값만큼 -요소 넣어주기. */
    width:1100px; 
    display: flex;  
    justify-content:space-between;
}
#Wrapper .conWrap .tab .tabmenu li {
    width: 365px; 
    height:80px;
    margin:0;
    background-color: #d6bed6;
    color:#a18ea1;
    text-align: center;
    line-height: 60px;
    font-size: 22px;
    font-weight: 700;
    cursor:pointer;
    letter-spacing: -0.5px;
}

#Wrapper .conWrap .tab .tabmenu li.on {
    background-color: #2d00de;
    color:#fff;
}
#Wrapper .conWrap .tab .tabcon {
    width:1100px;
    height: auto;
    padding-bottom:100px;
}
#Wrapper .conWrap .tab .tabcon .conbox {
    display: none;
}
#Wrapper .conWrap .tab .tabcon .on {
    display: block;
}
/* 채용경쟁의현재 ------------------------------------------------- */
#Wrapper .conWrap .con03{
    background-image: url('../images/03_bg.jpg');
    background-position: center;
    background-size: cover;
}
 
/* 현주소 ---------------------------------------------- */
#Wrapper .conWrap .con04{
    height:auto;
    background-image: url('../images/04_bg.jpg');
    background-position: center;
    background-size: cover;
    background-color:#18181a;
}
 
 
/* 새롭게 시작하는 철도공기업 ----------------- */
#Wrapper .conWrap .con05{
    height:auto;
    background-image: url('../images/05_bg.jpg');
    background-position: center;
    background-size: cover;
}
/* (추가)-------------------------------------- */
/* 전문가 영역 */
#Wrapper .conWrap .con06 {
    position: relative;
    width: 100%;
    height: 1000px;
    overflow: hidden;
    background-color: #240ea7;
}

/* 06_con.png 원본 크기: 1100 × 1000 */
#Wrapper .conWrap .con06 .inner {
    position: relative;

    width: 1100px;
    height: 1000px;
    margin: 0 auto;
}

/* 전체 틀 이미지 */
#Wrapper .conWrap .con06 .con06-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    display: block;
    width: 1100px;
    height: 1000px;
}

/* 교수 카드 영역 — con06 기준 전체 너비 (left:0, 100vw 미사용) */
#Wrapper .conWrap .con06 .professor-area {
    position: absolute;
    top: 380px;
    left: 0;
    z-index: 2;
    width: 100%;
    overflow: hidden;
}

/* 움직이는 전체 트랙 */
#Wrapper .conWrap .con06 .professor-track {
    display: flex;
    gap: 24px;
    width: max-content;

    animation: professorRolling 30s linear infinite;
    will-change: transform;
}

/* 마우스 오버 시 롤링 일시정지 (실제 hover 가능한 기기만) */
@media (hover: hover) and (pointer: fine) {
    #Wrapper .conWrap .con06 .professor-area:hover .professor-track {
        animation-play-state: paused;
    }
}

/* 클릭·터치하고 있는 동안 롤링 일시정지 */
#Wrapper .conWrap .con06 .professor-area:active .professor-track,
#Wrapper .conWrap .con06 .professor-area.is-paused .professor-track {
    animation-play-state: paused;
}

/* 교수 목록 */
#Wrapper .conWrap .con06 .professor-list {
    display: flex;
    flex-shrink: 0;
    gap: 24px;

    margin: 0;
    padding: 0;

    list-style: none;
}

/* 개별 교수 카드 */
#Wrapper .conWrap .con06 .professor-list li {
    flex: 0 0 350px;
    width: 350px;
}

/* 교수 카드 이미지 */
#Wrapper .conWrap .con06 .professor-list li img {
    display: block;
    width: 350px;
    height: auto;
}

/* 한 세트(+간격) 너비만큼 이동 — 값은 JS에서 --professor-roll 로 설정 */
@keyframes professorRolling {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-1 * var(--professor-roll, 50%)));
    }
}
/* -------------------------------------- */
/*  커리큘럼 --------- */
#Wrapper .conWrap .con07{  
    height:1580px;
    background-image: url('../images/07_bg.jpg');
    background-position: center;
    background-size: cover;
    
}
/*  특전 --------- */
#Wrapper .conWrap .con08{  
    height:1100px;
    background-image: url('../images/08_bg.jpg');
    background-position: center;
    background-size: cover;
    
}
/* 학원안내--------- */
#Wrapper .conWrap .con09{  
    height:auto;
    background-color:#d8e8ff;
    
}
/*  이런분께 추천--------- */
#Wrapper .conWrap .con10{  
    height:auto;
    background-color:#3619df;
}
 
 

/* --------------------------------------------------------------------------------- */
 





#Wrapper .conWrap .ending{
    height:350px;  
    background-image: url("../images/00_bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-color:#000000;
}

/* --------------------------------------------------------------------------------- */
#Wrapper .info{
    width:100%; 
    background-color:#232323;
    color:#888888;
}
#Wrapper .info .inner{
    width:1100px;height:auto;
    margin:0 auto; 
    padding:50px 0; 
}
#Wrapper .info .inner .info_tit{
    font-size: 16px; color:#888888;
    padding-bottom:5px;
    letter-spacing: -1px;
    font-weight: 600;
}
#Wrapper .info .inner .info_con{
    width:1100px;height:auto;
    border-top: 2px solid #777;
    padding:0px 0;
    margin-top:5px;
}
#Wrapper .info .inner .info_con:last-child{
    border-bottom: 2px solid #777;
}
#Wrapper .info .inner .info_con li{
    letter-spacing: -1px;
    width:1100px;height:auto;font-size: 14px;
    display: inline-block;
    padding:16px 0; 
    line-height:26px;
    border-bottom: 1px solid #333;
}
#Wrapper .info .inner li h5{
    display: inline-block;
    box-sizing: border-box;
    width:130px; font-size: 14px;
    padding-left:5px;    
}
#Wrapper .info .inner .info_con li span{
    box-sizing: border-box;
    float:right;font-size: 14px;
    width:920px;height:auto;
    padding-left:30px;
    border-left:1px solid #333;
}
#Wrapper .info .inner .info_con li span .point{
    color:#dddddd;
}