*,*:before,*:after {
    box-sizing: border-box;
    word-break: keep-all;
    margin: 0;
    padding: 0;
}

html, body {
  font-family: 'Pretendard';
    font-size: 16px;
    font-weight: 500;
}

/* @font-face {
    font-family: NanumSquareNeo;
    src: url(../fonts/NanumSquareNeo-Variable.ttf);
} */

@font-face {
  font-family: 'Pretendard';
  font-weight: 100;
  font-style: normal;
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.eot');
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.eot?#iefix') format('embedded-opentype'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff2') format('woff2'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff') format('woff'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.ttf') format("truetype");
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 200;
  font-style: normal;
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.eot');
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.eot?#iefix') format('embedded-opentype'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.woff2') format('woff2'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.woff') format('woff'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.ttf') format("truetype");
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 300;
  font-style: normal;
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.eot');
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.eot?#iefix') format('embedded-opentype'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.woff2') format('woff2'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.woff') format('woff'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.ttf') format("truetype");
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-style: normal;
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot');
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot?#iefix') format('embedded-opentype'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff2') format('woff2'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff') format('woff'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.ttf') format("truetype");
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 500;
  font-style: normal;
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.eot');
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.eot?#iefix') format('embedded-opentype'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff2') format('woff2'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff') format('woff'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.ttf') format("truetype");
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 600;
  font-style: normal;
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.eot');
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.eot?#iefix') format('embedded-opentype'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.woff2') format('woff2'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.woff') format('woff'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.ttf') format("truetype");
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  font-style: normal;
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot');
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot?#iefix') format('embedded-opentype'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff2') format('woff2'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff') format('woff'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.ttf') format("truetype");
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 800;
  font-style: normal;
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.eot');
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.eot?#iefix') format('embedded-opentype'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.woff2') format('woff2'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.woff') format('woff'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.ttf') format("truetype");
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 900;
  font-style: normal;
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.eot');
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.eot?#iefix') format('embedded-opentype'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.woff2') format('woff2'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.woff') format('woff'),
      url('https://fastly.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.ttf') format("truetype");
  font-display: swap;
}

a {
    color: inherit;
    text-decoration: none;
}
p {
    margin: 0;
}
ul,ol,li{list-style: none;}

textarea{
    font-family: 'Pretendard';
    font-weight: 500;
}

img {
  vertical-align: baseline;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    /* -webkit-text-fill-color: #fff !important; */
}


/*************************************************************************/
/*
.pop{
    position: fixed;
    top: 27%;
    right: 40px;
    width:152px;
    height: 557px;
    background: url(../img/pop.png)no-repeat;
    z-index: 10;
}
*/
.pop{
    position: fixed;
    top: 27%;
    right: 40px;
    width:152px;
    height: 557px;
    z-index:51;
}

.pop .pop_text{
    margin: 140px 16px 0 16px;
    text-align: center;

}
.pop .pop_text>li{
    font-size: 17px;
    font-weight: bold;
    line-height: 50px;
    margin: 10px 0;
    cursor: pointer;
}
.pop .pop_text>li::before{
    content: '';
    display: block;
    position: relative;
    top:-5px;
    width:80px;
    height:1px;
    background:#ccc;
    margin:0 auto;
}
.pop > h4{
    font-size: 34px;
    font-weight: bold;
    line-height: 36px;
    margin: -6px 16px 0 13px;
    text-align: center;
    color:#0C356A;
}

.pop > .top_btn{
    position: relative;
    top:50px;
    left:0;
    width: 84px;
    height: 84px;
    margin: 0 auto;
    padding: 0 16px 0 5px;
    background: url(../img/top_btn.png)no-repeat;
    display: block;
}

/* 메인 수강후기 부분 */

.main_review {
    width: 480px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}


/***********************************************************************/

/*HEADER*/
#top{
    width: 100%;
    height: 180px;
    background: #fff;
}
#header_wrap{
    width: 1450px;
    height: 100px;
    margin: 0 auto;
}
/*header_logo*/
#header_wrap h1{
    float: left;
    margin: 6px 0 0 0;
}
.logo {
    width:300px;
    height:90px;
    object-fit: contain;
}

#header_wrap .text_box{
    position: relative;
    top: 27px;
    left: 120px;
    float: left;
}
.mcourse-text{
    font-size: 16px;
    width: 360px;
    height: 35px;
    border-bottom: 2px solid #ccc;
    float: left;
}

#header_wrap .text_box .icon{
    font-size:16px;
    width:37px;
    display: inline-block;
    cursor: pointer;
}

.search-menu{
    float:right;
    width:30%; 
    height: 66px; 
    text-align:center; 
    position: relative;
    margin-top: 10px;
}

.right-menu{
    float: right;
    width: 420px;
    margin-left: 8%;
    text-align: center;
}


/*header_util*/
#header_wrap .util{float:right; margin: 31px 70px 0 0;}
#header_wrap .util>li{
    float:left;
    margin-top:10px;
    margin-left:40px;
    text-align:center;
}
#header_wrap .util>li:after{
    content: '';
    position: relative;
    top: 3px;
    left: -20px;
    width: 2px;
    height: 18px;
    background:#ccc;
    display: block;
}
#header_wrap .util>li:after{
    content: '';
    position: relative;
    top: 3px;
    left: -20px;
    width: 2px;
    height: 18px;
    background:#ccc;
    display: block;
}
#header_wrap .util>.util1:after{display: none;}
#header_wrap .util>li>a{
    color:#000;
    font-weight:bold;
    display:block;
    height:23px;
    line-height:23px;
    font-size:12px;
    float: left;
}
#header_wrap .util>li>a:hover{color:#a2a1a2;}



/*header_menu*/
#header{
    width:100%;
    height: 80px;
    background: #0C356A;
    z-index: 10;
}
#header .header_inner{
    width:1450px;
    margin:0 auto;
    display: flex;
}
/*header_gnb*/
#header .header_inner .gnb{
    width: 100%;
    clear:right;
    /* float:left; */
    margin:15px 0;
    z-index: 10;
}
#header .header_inner .gnb>li{
    float:left;
    margin-right:2%;
    position:relative;
    text-align: center;
}
#header .header_inner .gnb>.gnb5{margin-left:89px;}
#header .header_inner .gnb>li>a{
    color:#fff;
    display:block;
    font-size:16px;
    font-weight:bold;
    padding:15px 20px;
}
#header .header_inner .gnb>li:hover>a{color:rgb(255, 249, 73);}


/*****************************************************************************/

.swiper {
    width: 100%;
    height: 500px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.middle-slide-area{
  display: flex;
  justify-content: space-between;
  margin: 50px 0;
}

.middle-slide{
  width: 100%;
  height: auto;
  border-radius: 25px;
  overflow: hidden; 
}

.sub-slide-area {
  display: flex;
  justify-content: space-between;
  margin: 50px 0;
}

.sub-slide{
    width: 60%;
    height: auto;
    border-radius: 25px;
    overflow: hidden; 
}

.sub-slide-right{
  width: 38%;
  font-size: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.middle-banner1 {
  width: 100%;
  font-size: 0;
}
.middle-banner1 a{
  width: auto;
  height: auto;
  display: block;
}
.middle-banner2 a{
  width: auto;
  height: auto;
  display: block;
}
.middle-banner2 {
  width: 100%;
  font-size: 0;
}
.sub-banner1 {
  width: 100%;
  font-size: 0;
}
.sub-banner1 a{
  width: auto;
  height: auto;
  display: block;
}
.sub-banner2 a{
  width: auto;
  height: auto;
  display: block;
}
.sub-banner2 {
  width: 100%;
  font-size: 0;
}

.main {
    width: 1920px;
    margin: 0 auto; 
}


/* 로그인 */

.login_section {
  background: #e7f1ff;
  width: 100%;
}
.login_section .form {
  width: 1400px;
}
.logbox{
    width: 100%; 
    height: auto;
    margin: 0 auto;
    padding: 20px 0;
    background: #e7f1ff;
    /* border-radius: 30px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2); */
}
.log_inlist {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* .logbox>ul>li{
    float: left;
    width: 180px;
    height: 50px;
    margin: 25px 15px;
    line-height: 50px;
    border-radius: 7px;
    cursor: pointer;
} */

.logbox>ul>.in1{
    display: flex;
}
.usertxt1{
  width: 120px;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  border-radius: 7px;
}
.newLogin{
    width: 180px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    border-radius: 7px;
    color: #fff;
    font-weight: 600;
    background: linear-gradient( #0068e9, #0093d0);
    text-align: center;
    cursor: pointer;
    font-family: 'Pretendard';
    margin-right: 100px;
}
.newLogin:hover {
    background: #0093d0;
}
.login_area{
    border-radius: 7px;
    width: 165px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    display: flex;
    justify-content: flex-end;
    margin-right: 10px;
}
.login_id {
  background: url('/assets/newdesign/img/icon1.png') left 10px center no-repeat;
  background-size: 20px;
  background-color: #fff;
}
.login_pw {
  background: url('/assets/newdesign/img/icon2.png') left 10px center no-repeat;
  background-size: 20px;
  background-color: #fff;
}
.in2 {
  display: flex;
  align-items: center;
  color: #001070;
}
.in2>div>a {
  display: block;
}
.in2>div:hover {
  color: #0093d0;
}
.in3{
    color: #fff;
    font-weight: 600;
    text-align: center;
    display: flex;
}
.search_idpw {
  width: auto;
  display: flex;
  margin-right:70px;
}
.logbox>ul>.in4{
    font-weight: 600;
    text-align: center;
    color: #001070;
}
.logbox>ul>.in4:hover {
    color : #0093d0;
}
.logbox>ul>.in5{
    font-weight: 600;
    text-align: left;
    color: #001070;
}
.logbox>ul>.in5:hover {
    color : #0093d0;
}

.login_qna{
  width: 180px;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient( #0068e9, #0093d0);
  cursor: pointer;
  margin-right: 10px;
}
.login_qna:hover {
    background: #0093d0;
}

.login_faq{
  width: 180px;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(#fc397c, #ff6d9f);
  cursor: pointer;
}
.login_faq:hover {
    background: #ff6d9f;
}
.logbox>ul>.inx{
    width:500px;
    color: #0174BE;
    font-weight: bold;
    text-align: center;
}

/* 공통 부분 */

.section1,.section2,.section3,.section4,.section5{width:100%;}
.section1>div,.section2>div,.section3>div,.section4>div,.section5>div{width: 1400px; margin: 0 auto;}
div>div>h2{
    font-size: 30px;
    font-weight: 700;
    margin: 50px 0 0;
    padding: 0 0 30px 0;
    text-indent: 10px;
    font-family: 'Pretendard';
    text-align: left;
}

.board-title{
    font-size: 50px;
    font-weight: normal;
    /* margin: 60px 40px 0; */
    padding: 0 0 30px 0;
    text-indent: 10px;
    border-bottom: 3px solid #0174BE;
    font-family: 'Pretendard';
}

textarea{
    width: 120px;
    height: 35px;
    line-height: 36px;
    margin: 7px 0 0 0;
    background: transparent;
    overflow: hidden;
    resize: none;
    outline: none;
    border: 0;
    display: inline-block;
}


/* 클래스 추천과정 부분 */
.section1 .content_list{
    width: 1400px; 
}

.section1 .content_list .list li{
    float: left;
    background-color: #FFF;
    /* box-shadow: 2px 2px 5px rgba(0,0,0,0.2); */
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
    width: 266px;
    height: 302px;
    margin: 20px 7px;
    text-align: left;
}

.section1 .content_list .list li .mask{
    overflow: hidden;
    height: 164px;
}

.mask img{
    width: 275px;
    height: 164px;
    overflow: hidden;
    transition: 0.5s;
}

.mask:hover img {
    transform: scale(1.08);
    object-fit: cover;
}

.section1 .content_list .list li h3{
    width: 164px;
    height:40px;
    font-size: 20px;
    padding: 9px 13px 0;
    font-weight: normal;
    float: left;
}

.recommend-box{
    padding: 15px 10px 0 10px;
}

.recommend-box p{
    height: 60px;
    border-bottom: 1px solid #ccc;
}

.sub_box{
    float: right;
    position: relative;
    top: 8px;
    left: 0px;
    width: 100px;
    height: 30px;
    color: #fff;
    display: block;
    background: #0174BE;
    border-radius: 50px;
    text-align: center;
    line-height: 30px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}

.sub_box:hover {
    background : #0C356A;
    transition: all .3s;
}

.section1 .content_list .list li .txt{
    font-size: 12px;
    color: #000;
    line-height: 15px;
    text-overflow: ellipsis;
    padding: 16px 95px 2px 14px;
}



/*슬라이드 이미지 부분*/
.section2{
    position: relative;
    width: 1400px;
    height: 401px;
    margin: 40px auto;
}

.slide_list > .page-btns {
    text-align:center;
    position:absolute;
    bottom:20px;
    left:0;
    width:100%;
}
.slide_list > .page-btns > div {
    width:20px;
    height:20px;
    background-color:rgba(255,255,255,.5);
    border-radius:4px;
    display:inline-block;
    cursor:pointer;
}
.slide_list > .page-btns > div.active {
    background-color:rgba(255,255,255,1);
}

.slides > div {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity:0;
    transition: opacity 0.3s;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;

    width:1401px;
    height:401px;
    overflow: hidden;
    border-radius: 25px;
}
.slides > div.active {
    opacity:1;
}

.side-btns > div {
    position:absolute;
    top:45%;
    left:0px;
    cursor:pointer;
    padding:1px 13px;
}
.side-btns > div:last-child {
    left:auto;
    right: 0px;
}

.slider-2 .page-nav {
    position:absolute;
    width:100%;
    text-align:center;
    bottom: 20px;
    left: 0;
    right: 0;
}

.slider-2 .page-nav > div {
    display:inline-block;
    width:10px;
    height:10px;
    background-color:rgba(255,255,255,1);
    border-radius:50px;
    cursor:pointer;
    margin: 0 3px;
}
.slider-2 .page-nav > div.active {
    background-color:rgba(255,255,255,1);
    width:40px;
}

/* 공지 ~ 학습지원 영역 배경 */
.content_section_bottom {
  width: 100%;
  background: #eff6ff;
}


/* 공지사항,수강후기 박스부분 */
.section3{
    width: 1400px; 
    height: 455px;
    padding-top: 100px;
}
.section3>div {
  display: flex;
  justify-content: space-between;
}
.noitce_title_box>h2{
    font-weight: bold;
    font-size: 30px;
    color : #4390ee;
    margin : 40px 0 0 0;
    padding: 0 0 23px 0;
}
.noitce_title_box{
  /* font-size: 30px;
  margin-top: 40px;
  color:#4390ee; */
  border-bottom: 1px solid #4390ee;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.section3>div>ul{
    /* margin: 0 60px; */
    margin-left: 15px;
}
.section3>div>ul>li{
    margin: 20px 0;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}

.notice_more_btn {
  background: url('/assets/newdesign/img/na_btn.png') no-repeat center;
  background-size: cover;
  width: 25px; height: 25px;
  display: block;
}

.section3>div>.btn{
    width: 650px;
    height: 50px;
    background: rgba(0, 0, 0, 0.1);
    text-align: center;
    line-height: 35px;
    margin: 0 auto;
    border-radius: 10px;
}
.section3>div>.btn>a{width:100%; height:100%; display: block;}

.section3>div>.btn:hover {
    box-shadow: 0 0 10px 2px rgba(0,0,0,.1);
    font-weight: bold;
}

.btn_list_notice_after {
  width: 48%;
  height: auto;
  background: #fff;
  border-radius: 17px;
border:2px solid transparent;
background-image:linear-gradient(#fff, #fff), linear-gradient(#a6b7ef,#a6e2d2);
background-origin: border-box;
background-clip: content-box, border-box;
}

.tlist{
  margin: 5px 0 20px 0;
}

.tlist li {
  display: flex;
  justify-content: space-between;
  padding: 12px;
}

.tlist li a {
  width: 480px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  color: #212d50;
}

.tlist li span {
  color: #8491b7;
}

.tlist > li > a:hover {
    color: #0174BE;
    font-weight: bold;
}

.category-tablist{
    width: 1400px;
    height: 50px;
    display: block;
    float: left;
}

.cat-tab{
    float: left;
    height:100%; 
    border: 1px solid #e7e7e7;
    color: #333;
    /* background-color: #2F58CD; */
    font-size: 18px;
    cursor: pointer;
    padding: 10px;
    border-collapse: collapse;
    /* margin : 20px 0 10px 0; */
}

.tab-active{
    font-weight: bold;
    color: #333;
    border-bottom: 3px solid #0C356A;
}

/*학습지원센터 박스*/
.section4 .btn_list_box{
    width: 1400px; 
    height: 307px;
    margin: 20px auto 100px auto;
    background: #fff;
    border-radius: 17px;
  border:2px solid transparent;
  background-image:linear-gradient(#fff, #fff), linear-gradient(#a6b7ef,#a6e2d2);
  background-origin: border-box;
  background-clip: content-box, border-box;
    /* border-radius: 50px;
    border: 1px solid #2F58CD; */
    /* box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); */
}
.section4 .btn_list_box .btn_list_inner>h2{
    font-size: 30px;
    margin-top: 40px;
    color:#4390ee;
    border-bottom: 1px solid #4390ee;
}
.section4 .btn_list_box .btn_list>li{
    text-align: center;
    cursor: pointer;
    position: relative;
}
.section4 .btn_list_box .btn_list>li:hover {
    transform: translateY(-8px);
    transition: all .3s;
}
.section4 .btn_list_box .btn_list>li p{
    color: #4390ee;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 117px;
    font-size: 14px;
}

.btn_list {
  display: flex;
  justify-content: space-between;
}

.btn_list_inner {
  padding: 0 20px;
}

.btn_list li a {
  display: block;
  width: 140px; height: 140px;
  margin-top: 15%;
}
.main_cscenter_qna {
  background: url('/assets/newdesign/img/btn1.png') no-repeat center;
  background-size: cover;
}
.main_cscenter_faq {
  background: url('/assets/newdesign/img/btn2.png') no-repeat center;
  background-size: cover;
}
.main_cscenter_eduqna {
  background: url('/assets/newdesign/img/btn3.png') no-repeat center;
  background-size: cover;
}
.main_cscenter_remote {
  background: url('/assets/newdesign/img/btn4.png') no-repeat center;
  background-size: cover;
}
.main_cscenter_illegal {
  background: url('/assets/newdesign/img/btn5.png') no-repeat center;
  background-size: cover;
}
.main_cscenter_manual {
  background: url('/assets/newdesign/img/btn6.png') no-repeat center;
  background-size: cover;
}
.main_cscenter_certificate {
  background: url('/assets/newdesign/img/btn7.png') no-repeat center;
  background-size: cover;
}



/* 이미지 공지 */

.section5 .sub_img_list {width:1400px; height: 250px; margin: 0 auto;}
.section5 .sub_img_list>img{float: right; }

/*****************************************************************************/

.footer_top {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #ccc;
    height: 40px;
}
.footer_top .footer_list2{
    width: 1400px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
}										
.footer_top .footer_list2>li{
    float: left;
    margin: 0px 31px;
}	
.footer_top .footer_list2>li:hover{
    color: #0072FF;
    font-weight: bold;
}

.footer_inner{
    position: relative;
    width: 1400px;
    height: 200px;
    margin: 0 auto;
}
.footer_inner h1{
    position: absolute;
    top: 26px;
}


.footer_inner p{
    position: absolute;
    top: 26px;
    left: 300px;
    color: #000;
    font-size: 14px;
    line-height: 30px;
}


.footer_bottom{
    height: 120px;
    margin: 0px auto;
    padding: 40px 14%;
    border-top: 1px solid #ccc;
}

.other-company{
    width: 100%;
    height: 80px;
    margin: auto;
    padding: 20px 0; 
    border-bottom : 1px solid #cddbec;
}

.other-company ul {
  display: flex;
  justify-content: space-between;
}

.other-company ul li a{
  display: block;
  height: 35px;
}

.moel {
  background: url('/assets/image/fam1.png') no-repeat center;
  background-size: cover;
  width: 127px;
}
.hrdkorea {
  background: url('/assets/image/fam2.png') no-repeat center;
  background-size: cover;
  width: 84px;
}
.comwel {
  background: url('/assets/image/fam3.png') no-repeat center;
  background-size: cover;
  width: 170px;
}
.hrdp {
  background: url('/assets/image/fam4.png') no-repeat center;
  background-size: cover;
  width: 147px;
}
.ksqa {
  background: url('/assets/image/fam5.png') no-repeat center;
  background-size: cover;
  width: 124px;
}
.kosha {
  background: url('/assets/image/fam6.png') no-repeat center;
  background-size: cover;
  width: 108px;
}

/* 마이페이지 */
#surveyBanner{
	background: url("./img/myclassbanner.png");
	display: block;
	width: 750px;
	height: 250px;
	cursor: pointer;
	margin-bottom: 20px;
}

/* 상세페이지 추가 */

/* 과정검색 */

.course_text {
    font-size: 14px;
    width: 300px;
    height: 35px;
    border: none;
    border: 1px solid #ddd;
    vertical-align: top;
}
.content_title {
    display: flex;
    justify-content: space-between;
}
.course_search_btn {
    display: inline-block;
    cursor: pointer;
}

.contentTitle_line {
    float: left;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #EC7000 ,#FCCF00);
}

.site_wrap {
    width: 100%; height: 400px;
    overflow: hidden;
}

.other_wrap {
    width: 100%; height: 400px;
    overflow: hidden;
    background: url("../img/bg_intro.png") no-repeat center center;
}

.class_wrap_title {
    color: #fff;
    font-size: 50px;
    text-shadow: 1px 1px #ddd;
    text-align: center;
    line-height: 400px;
    font-weight: 700;
}

.location {
    width: 100%;
    height: 80px;
    /* background: linear-gradient(to right, #3A1078 ,#3795BD); */
    background: linear-gradient(to right, #EC7000 ,#FCCF00);
}

.location > ul{
    line-height: 80px;
}

.location > ul > li {
    width: 1400px;
    margin: 0 auto;
}

.location > ul > li > a {
    padding-right: 8px;
}

.location > ul > li > span {
    color: #fff;
    padding-right: 8px;
}


/* 서브 메뉴 및 게시판 부분 */
.main_wrap {
    width: 1400px; 
    height: auto;
    margin: 0 auto;
    display: flex;
    padding-top: 50px;
    justify-content: center;
}

#subPageTitle { 
    font-size: 27px;
    font-weight: 700;
}
#subTitleLine {
    margin-top: 20px;
    width: 250px;
    height: 3px;
    background: linear-gradient(to right, #EC7000 ,#FCCF00);
}
.subMenuList {
    width: 250px;
    position: relative;
}
.meNu {
    display: block;
    position: relative;
    width: 100%;
}
.menulink{
    display: block;
    padding-top: 20px;
    color: #333;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    padding-left: 10px;
}
.subopen {
    position: absolute;
    width:8px;
    height:8px;
    right:15px;
    padding:0;
    top:0;
    bottom:0;
    margin-top: 22px;
    border-right:1px solid #333;
    border-bottom:1px solid #333;
    transform:rotate(45deg);
    cursor: pointer;
}
.subMenuList ul li{
    padding: 5px 20px;
}
.subMenuList > ul {
    background-color: #F7F8F8;
}
.subMenuList > ul > li {
    border-bottom: 1px solid #C9CACA;
    height: 60px;
}
.subMenuList > ul > li > a {
    color: #444;
}

/* 상단 메뉴(메뉴바) */

.subMenu1:hover .sideMenu {
    opacity: 1;
/*  visibility: visible;*/
    visibility: hidden;
}

.subMenu2:hover .sideMenu {
    opacity: 1;
/*  visibility: visible;*/
    visibility: hidden;
}

.subMenu3:hover .sideMenu {
    opacity: 1;
/*  visibility: visible;*/
    visibility: hidden;
}

.subMenu4:hover .sideMenu {
    opacity: 1;
/*  visibility: visible;*/
    visibility: hidden;
}

.subMenu5:hover .sideMenu {
    opacity: 1;
/*  visibility: visible;*/
    visibility: hidden;
}

.subMenu6:hover .sideMenu {
    opacity: 1;
/*  visibility: visible;*/
    visibility: hidden;
}

.subMenu7:hover .sideMenu {
    opacity: 1;
/*  visibility: visible;*/
    visibility: hidden;
}

.subMenu8:hover .sideMenu {
    opacity: 1;
/*  visibility: visible;*/
    visibility: hidden;
}

.subMenu9:hover .sideMenu {
    opacity: 1;
/*  visibility: visible;*/
    visibility: hidden;
}

.subMenu10:hover .sideMenu {
    opacity: 1;
/*  visibility: visible;*/
    visibility: hidden;
}

.subMenu11:hover .sideMenu {
    opacity: 1;
/*  visibility: visible;*/
    visibility: hidden;
}

.subMenu12:hover .sideMenu {
    opacity: 1;
/*  visibility: visible;*/
    visibility: hidden;
}

.subMenu13:hover .sideMenu {
    opacity: 1;
/*  visibility: visible;*/
    visibility: hidden;
}

.subMenu14:hover .sideMenu {
    opacity: 1;
/*  visibility: visible;*/
    visibility: hidden;
}

.subMenu15:hover .sideMenu {
    opacity: 1;
/*  visibility: visible;*/
    visibility: hidden;
}

.gnbSub {
    width: 250px;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 100;
    position: absolute;
    top: 65px;
    /* border-radius: 0 0 10px 10px; */
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    visibility: hidden;
    transition: all .5s;
    opacity: 0%;
}

.sub3 {
    display: block;
    padding: 5px 0;
    line-height: 33px;
    /* border-bottom: 1px solid #ddd; */
}
.sub3:hover {
    color: #fff949;
    /* font-weight: 700; */
    /* background: rgba(242, 255, 211, 0.226); */
    transition: all .3s;
}



/* 과정 검색 */

#contentRight {
width: 1400px;
}
#contentTitle {
/* text-align: center; */
padding: 50px 0 0 0;
font-size: 32px;
font-weight: 700;
margin-bottom: 15px;
}
#findCourseForm {
width: 900px;
height: 200px;
border: 1px solid #0877AF;
border-radius: 30px;
background-color: #F6F6F6;
text-align: left;
padding-top: 25px;
padding-left: 25px;
}
#search_key {
width: 170px;
height: 30px;
font-size: 14px;
padding-left: 10px;
color: #CCCCCC;
border: 1px solid #ccc;
}
.findCourse {
height: 44px;
width: 500px;
border-radius: 22px;
border: 1px solid #ccc;
}
#search_btn {
width: 160px;
height: 44px;
border-radius: 22px;
border: 0px;
background-color: #0877AF;
color: #fff;
font-size: 16px;
margin-top: 20px;
cursor: pointer;
}
#search_btn:hover {
background-color: #001D6E;
transition: all 0.3s;
}
#checkbox {
margin-top: 20px;
}

#checkbox > label {
margin-right: 20px;
}



/* 과정목록 */
.table-custom {
color: #333;
font-weight: 500;
width: 100%;
}
.table-custom > thead > tr {
border-top: 2px solid #222;
border-bottom: 1px solid #d9d9d9;
line-height: 54px;
}
.table-custom thead tr th.line1 {
height: 0;
/* border-bottom: 2px solid #222; */
}
.table-custom thead tr th {
text-align: center;
}

.table-custom tbody tr td {
text-align: left;
height: 54px;
color: #666;
font-size: 14px;
}
.thumbImg > img {
width: 230px;
margin-bottom: 5px;
}
.table-custom tbody tr td {
text-align: left;
height: 54px;
color: #666;
font-size: 14px;
}
.courseInform {
vertical-align: top;
padding: 25px 15px;
width: 515px;
}

.courseTitle {
padding: 10px 0;
font-size: 20px;
font-weight: 700;
}
.courseTitle > a:hover {
color: #001D6E;
transition: all 0.3s;
border-bottom: 1px solid #001D6E;
}
.courseDetail1 {
margin: 8px 0;
}
.courseDetail1 dl {
width: 300px;
}
.courseDetail1 dl dt {
float: left;
padding: 5px 5px 5px 0;
display: block;
width: 50px;
font-size: 13px;
}
.courseDetail1 dl dd {
float: left;
width: 80px;
padding: 5px;
padding-left: 19px;
display: block;
font-size: 13px;
font-weight: 700;
}
.courseDetail1 dl dt.third {
float: left;
clear: both;
padding: 5px 5px 5px 0;
display: block;
width: 50px;
font-size: 13px;
}
.courseTooltip {
position: absolute;
z-index: 1;
width: 160px;
background-color: #fff;
color: #333;
text-align: left;
padding: 15px 0;
border: 1px solid #000;
height: 90px;
margin-top: 10px;
}
.courseTooltip dl {
margin-top: 10px;
margin-left: 18px;
}
.courseDetail2 {
padding: 5px 0;
font-size: 13px;
height: 28px;
width: 100%;
/* overflow: hidden; */
/* text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
line-height: 1.3em; */
}

.detailBtn {
background-color: #0877AF;
float: left;
width: 110px;
height: 40px;
font-size: 15px;
color: #fff;
cursor: pointer;
text-align: center;
padding: 0;
border: 1px solid #eee;
}
.previewBtn {
background-color: #fff;
float: right;
width: 110px;
height: 40px;
font-size: 15px;
color: #000;
cursor: pointer;
text-align: center;
padding: 0;
border: 1px solid #eee;
}
.detailBtn:hover {
background-color: #001D6E;
transition: all 0.5s;
}
.previewBtn:hover {
border: 1px solid #0877AF;
transition: all 0.5s;
}
.table-custom tbody tr td.line {
height: 0;
border-top: 1px solid #d9d9d9;
}
.pagination {
width: 100%;
text-align: center;
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
.pagination li.active {
background-color: #444;
color: #fff;
padding: 5px 8px;
}
.pagination li {
display: inline;
font-size: 13px;
color: #666;
margin-right: 8px;
border: 1px solid #eee;
padding: 5px 8px;
}

/* 공통 부분 */

.borderline{
    float:left; 
    width: 1000px; 
    border-bottom: 3px solid transparent;
    background: linear-gradient(to right, #EC7000 ,#FCCF00);
    border-image-slice: 1;
}

/* 버튼 부분 */


.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  
  .btn:hover, .btn:focus {
    text-decoration: none;
  }
  
  .btn:focus, .btn.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }
  
  .btn.disabled, .btn:disabled {
    opacity: 0.65;
  }
  
  .btn:not(:disabled):not(.disabled) {
    cursor: pointer;
  }
  
  .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active {
    background-image: none;
  }
  
  a.btn.disabled,
  fieldset:disabled a.btn {
    pointer-events: none;
  }
  
  .btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
  }
  
  .btn-primary:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
  }
  
  .btn-primary:focus, .btn-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
  }
  
  .btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
  }
  
  .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
  .show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #0062cc;
    border-color: #005cbf;
  }
  
  .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
  .show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
  }
  
  .btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
  }
  
  .btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
  }
  
  .btn-secondary:focus, .btn-secondary.focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
  }
  
  .btn-secondary.disabled, .btn-secondary:disabled {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
  }
  
  .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
  .show > .btn-secondary.dropdown-toggle {
    color: #fff;
    background-color: #545b62;
    border-color: #4e555b;
  }
  
  .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
  .show > .btn-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
  }
  
  .btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
  }
  
  .btn-success:hover {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
  }
  
  .btn-success:focus, .btn-success.focus {
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
  }
  
  .btn-success.disabled, .btn-success:disabled {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
  }
  
  .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
  .show > .btn-success.dropdown-toggle {
    color: #fff;
    background-color: #1e7e34;
    border-color: #1c7430;
  }
  
  .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
  .show > .btn-success.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
  }
  
  .btn-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
  }
  
  .btn-info:hover {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
  }
  
  .btn-info:focus, .btn-info.focus {
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
  }
  
  .btn-info.disabled, .btn-info:disabled {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
  }
  
  .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
  .show > .btn-info.dropdown-toggle {
    color: #fff;
    background-color: #117a8b;
    border-color: #10707f;
  }
  
  .btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus,
  .show > .btn-info.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
  }
  
  .btn-warning {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
  }
  
  .btn-warning:hover {
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00;
  }
  
  .btn-warning:focus, .btn-warning.focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
  }
  
  .btn-warning.disabled, .btn-warning:disabled {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
  }
  
  .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
  .show > .btn-warning.dropdown-toggle {
    color: #212529;
    background-color: #d39e00;
    border-color: #c69500;
  }
  
  .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus,
  .show > .btn-warning.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
  }
  
  .btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
  }
  
  .btn-danger:hover {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130;
  }
  
  .btn-danger:focus, .btn-danger.focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
  }
  
  .btn-danger.disabled, .btn-danger:disabled {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
  }
  
  .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
  .show > .btn-danger.dropdown-toggle {
    color: #fff;
    background-color: #bd2130;
    border-color: #b21f2d;
  }
  
  .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus,
  .show > .btn-danger.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
  }
  
  .btn-light {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
  }
  
  .btn-light:hover {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
  }
  
  .btn-light:focus, .btn-light.focus {
    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
  }
  
  .btn-light.disabled, .btn-light:disabled {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
  }
  
  .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
  .show > .btn-light.dropdown-toggle {
    color: #212529;
    background-color: #dae0e5;
    border-color: #d3d9df;
  }
  
  .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
  .show > .btn-light.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
  }
  
  .btn-dark {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
  }
  
  .btn-dark:hover {
    color: #fff;
    background-color: #23272b;
    border-color: #1d2124;
  }
  
  .btn-dark:focus, .btn-dark.focus {
    box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
  }
  
  .btn-dark.disabled, .btn-dark:disabled {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
  }
  
  .btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
  .show > .btn-dark.dropdown-toggle {
    color: #fff;
    background-color: #1d2124;
    border-color: #171a1d;
  }
  
  .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus,
  .show > .btn-dark.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
  }
  
  .btn-outline-primary {
    color: #007bff;
    background-color: transparent;
    background-image: none;
    border-color: #007bff;
  }
  
  .btn-outline-primary:hover {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
  }
  
  .btn-outline-primary:focus, .btn-outline-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
  }
  
  .btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: #007bff;
    background-color: transparent;
  }
  
  .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
  .show > .btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
  }
  
  .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
  .show > .btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
  }
  
  .btn-outline-secondary {
    color: #6c757d;
    background-color: transparent;
    background-image: none;
    border-color: #6c757d;
  }
  
  .btn-outline-secondary:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
  }
  
  .btn-outline-secondary:focus, .btn-outline-secondary.focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
  }
  
  .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
    color: #6c757d;
    background-color: transparent;
  }
  
  .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
  .show > .btn-outline-secondary.dropdown-toggle {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
  }
  
  .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
  .show > .btn-outline-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
  }
  
  .btn-outline-success {
    color: #28a745;
    background-color: transparent;
    background-image: none;
    border-color: #28a745;
  }
  
  .btn-outline-success:hover {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
  }
  
  .btn-outline-success:focus, .btn-outline-success.focus {
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
  }
  
  .btn-outline-success.disabled, .btn-outline-success:disabled {
    color: #28a745;
    background-color: transparent;
  }
  
  .btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active,
  .show > .btn-outline-success.dropdown-toggle {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
  }
  
  .btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus,
  .show > .btn-outline-success.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
  }
  
  .btn-outline-info {
    color: #17a2b8;
    background-color: transparent;
    background-image: none;
    border-color: #17a2b8;
  }
  
  .btn-outline-info:hover {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
  }
  
  .btn-outline-info:focus, .btn-outline-info.focus {
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
  }
  
  .btn-outline-info.disabled, .btn-outline-info:disabled {
    color: #17a2b8;
    background-color: transparent;
  }
  
  .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active,
  .show > .btn-outline-info.dropdown-toggle {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
  }
  
  .btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus,
  .show > .btn-outline-info.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
  }
  
  .btn-outline-warning {
    color: #ffc107;
    background-color: transparent;
    background-image: none;
    border-color: #ffc107;
  }
  
  .btn-outline-warning:hover {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
  }
  
  .btn-outline-warning:focus, .btn-outline-warning.focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
  }
  
  .btn-outline-warning.disabled, .btn-outline-warning:disabled {
    color: #ffc107;
    background-color: transparent;
  }
  
  .btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active,
  .show > .btn-outline-warning.dropdown-toggle {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
  }
  
  .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus,
  .show > .btn-outline-warning.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
  }
  
  .btn-outline-danger {
    color: #dc3545;
    background-color: transparent;
    background-image: none;
    border-color: #dc3545;
  }
  
  .btn-outline-danger:hover {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
  }
  
  .btn-outline-danger:focus, .btn-outline-danger.focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
  }
  
  .btn-outline-danger.disabled, .btn-outline-danger:disabled {
    color: #dc3545;
    background-color: transparent;
  }
  
  .btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active,
  .show > .btn-outline-danger.dropdown-toggle {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
  }
  
  .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
  .show > .btn-outline-danger.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
  }
  
  .btn-outline-light {
    color: #f8f9fa;
    background-color: transparent;
    background-image: none;
    border-color: #f8f9fa;
  }
  
  .btn-outline-light:hover {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
  }
  
  .btn-outline-light:focus, .btn-outline-light.focus {
    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
  }
  
  .btn-outline-light.disabled, .btn-outline-light:disabled {
    color: #f8f9fa;
    background-color: transparent;
  }
  
  .btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active,
  .show > .btn-outline-light.dropdown-toggle {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
  }
  
  .btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus,
  .show > .btn-outline-light.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
  }
  
  .btn-outline-dark {
    color: #343a40;
    background-color: transparent;
    background-image: none;
    border-color: #343a40;
  }
  
  .btn-outline-dark:hover {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
  }
  
  .btn-outline-dark:focus, .btn-outline-dark.focus {
    box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
  }
  
  .btn-outline-dark.disabled, .btn-outline-dark:disabled {
    color: #343a40;
    background-color: transparent;
  }
  
  .btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active,
  .show > .btn-outline-dark.dropdown-toggle {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
  }
  
  .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus,
  .show > .btn-outline-dark.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
  }
  
  .btn-link {
    font-weight: 400;
    color: #007bff;
    background-color: transparent;
  }
  
  .btn-link:hover {
    color: #0056b3;
    text-decoration: underline;
    background-color: transparent;
    border-color: transparent;
  }
  
  .btn-link:focus, .btn-link.focus {
    text-decoration: underline;
    border-color: transparent;
    box-shadow: none;
  }
  
  .btn-link:disabled, .btn-link.disabled {
    color: #6c757d;
  }
  
  .btn-lg, .btn-group-lg > .btn {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
  }
  
  .btn-sm, .btn-group-sm > .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
  }
  
  .btn-block {
    display: block;
    width: 100%;
  }
  
  .btn-block + .btn-block {
    margin-top: 0.5rem;
  }
  
  input[type="submit"].btn-block,
  input[type="reset"].btn-block,
  input[type="button"].btn-block {
    width: 100%;
  }

  /* 나의 강의실(사이트) */

  .courseIngInform {
    padding: 10px;
  }
  .courseIngInform h3 {
      padding: 10px 0;
  }
  .my_course_detail > dl {
      display: flex;
  }
  .classEnterBtn {
    font-family: 'Pretendard';
      width: 275px;
      height: 35px;
      border: none;
      border-radius: 30px;
      color: #fff;
      font-weight: 700;
      background: linear-gradient(to right, #EC7000 ,#FCCF00);
      cursor: pointer;
      font-size: 15px;
      float: left;
  }
  .classFinishBtn {
      /* font-family: 'NanumSquareNeo-Variable'; */
      font-family: 'Pretendard';
      width: 135px;
      height: 35px;
      border: none;
      border-radius: 30px;
      color: #fff;
      font-weight: 700;
      background: linear-gradient(to right, #EC7000 ,#FCCF00);
      cursor: pointer;
      font-size: 15px;
      display: inline-block; 
      text-align: center; 
      padding-top: 6px;
      float: left;
  }
  .classFinishBtn:hover{
      color:#ccc;
  }
  .my_course_detail dl dt{
      padding: 5px 5px 5px 0;
      display: block;
      width: 50px;
      font-weight: 700;
  }
  .my_course_detail dl dd{
      padding: 5px 5px 5px 30px;
      display: block;
  }
















/*=================================================================================================
 * css가 많이 섞여 있으므로 추후에 필요 없는것 따로 모아서 관리하고 정리할것 2024-04-25 ::: 테스트 서버 기준
 *-----------------------------------------------------------------------------------------------*/

/*
* 2024년 02월18일 메인 페이지 추가 수정에 따른 css 추가분 :S
*/
/* 0. 인풋에 placeholder 들어가 있을 경우 포커스시( 글쓰기 위한 클릭시 ) 플레이스 홀더 문구가 보이지 않도록 */
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder { /* WebKit browsers */
  color:transparent;
}
input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color:transparent;
}
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:transparent;
}
input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder { /* Internet Explorer 10+ */
  color:transparent;
} 

/* 1. 상단 대메뉴 마우스 오버에 따른 펼침 메뉴 */
	#header{position:relative;background:#fff;}
	#header .header_inner .gnb>li>a{color:#333;}
	#header .header_inner .gnb>li:hover>a{color:#333;}
	table.opn_tbl{ width: 100%;border-collapse: collapse;}
	table.opn_tbl th, table.opn_tbl td {padding:0px;text-align:left;}
	table.opn_tbl th:nth-child(2n), table.opn_tbl td:nth-child(2n) {}
	table.opn_tbl th:nth-child(2n+1), table.opn_tbl td:nth-child(2n+1) {padding:0 0 0 0px;min-width:100px;font-weight:bold}
	.open_menu{
    display: none;
    position:absolute;
    top:80px;
    left:0px;
    z-index:5;
    width:100%;
    height:285px;
    background:#fff;
    border-bottom:1px solid #ccc;}
	.opn_tbl{width:1450px !important;margin:0px auto;padding:0px 0px 0px 40px;}
	.open_submenu_ul {display:inline-grid;margin: 0px 0px 0px 0px;padding:20px 0px 20px 0px;width:12.2857142857%;height:auto;border:0px solid #ccc;font-size:14px;line-height:25px;text-align:center;} 
	.open_submenu_ul li{margin: 0px 0px 0px 0px;padding:0px 0px 0px 0px;width:100%;height:35px;}
	/* 대메뉴 간격이 맞지 않아 펼침 메뉴를 대메뉴 좌측기준으로 맞춤 1번은 라인바 hr */
	.opn_tbl ul:nth-child(2){position:relative;top:-16px;left:0px;}
	.opn_tbl ul:nth-child(3){position:relative;top:-16px;left:29px;}
	.opn_tbl ul:nth-child(4){position:relative;top:-16px;left:58px;}
	.opn_tbl ul:nth-child(5){position:relative;top:-16px;left:87px;}
	.opn_tbl ul:nth-child(6){position:relative;top:-16px;left:116px;} 
	.opn_tbl ul:nth-child(7){position:relative;top:-16px;left:145px}
	.opn_tbl ul:nth-child(8){position:relative;top:-16px;left:226px;width:140px;}
	 /* 메뉴 마우스 오버시 보여지는 밑줄 라인바 hr */
	.opn_tbl ul:nth-child(2) hr{left: 0px; top: -48px;width:100%;} 
	.opn_tbl ul:nth-child(3) hr{left: 0px; top: -48px;width:100%;} 
	.opn_tbl ul:nth-child(4) hr{left: 0px; top: -48px;width:100%;} 
	.opn_tbl ul:nth-child(5) hr{left: 0px; top: -48px;width:100%;} 
	.opn_tbl ul:nth-child(6) hr{left: 0px; top: -48px;width:100%;} 
	.opn_tbl ul:nth-child(7) hr{left: 0px; top: -48px;width:100%;} 
	.opn_tbl ul:nth-child(8) hr{left: 0px; top: -48px;width:100%;} 
	/*소스 변경으로 인한 첫번째 메뉴의 폰트 지정*/
	.first_submenu_title.firstli{font-size:17px;}  
	/* 마우스 오버에 따른 색지정*/
	#header .header_inner .gnb>li>a:hover{color:#ff6633} 
	.opn_tbl ul:hover hr{top:-49px;height:2px;background:#ff6633;border-radius:2px;} 
	.opn_tbl ul li:hover{color:#ff6633} 
	/*중간 라인 넣으려면 루프를 두번 돌릴수도 있어서 편법으로... */
	.line_bar{position:relative;top:1px;left:0px;width:100%;height:2px;background:#ccc}
	.line_bar2{position:relative;top:8px;left:0px;width:100%;height:2px;background:#ccc}

/* 2. 서비스 바로가기*/
	.service_menu{width:100%;height:auto;background:#fff;}
	.sm_title{margin:0px;padding:20px 20px 10px 20px;width:calc(100% - 0px);height:120px;background:#fff;font-size:35px;text-align:center;}
	.sm_body{width:100%;height:700px;background:#fff;}
	.sml_logo{display:inline-block; width:auto; height:45px;}
	.center_div{display:flex;margin: 0px auto;width: 1332px;height: auto;padding: 20px;}
	.content_box{display:inline-block;margin:10px 10px 10px 10px;width:300px;height:183px;}
	.sv_title{margin:0px 0px 3px 0px;padding:10px;width:300px;height:50px;border:1px solid #ccc;border-top-left-radius:5px;border-top-right-radius:5px;background:#f2f2f2;}
	.sv_content{margin:0px 0px 20px 0px;padding:10px;width:300px;height:120px;border:1px solid #ccc;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background:#fff;}
	.edu_cate{font-size:17px;font-weight:bold;}
	.btn_edu_type1{display:inline-block;margin:10px 2px 5px 2px;padding:0px;width:60px; height:30px;background:#0066cc;border:1px solid #ccc;border-radius:5px;color:#fff;line-height:15px;letter-spacing:2px;}
	.btn_edu_type2{display:inline-block;margin:10px 2px 5px 2px;padding:0px;width:60px; height:30px;background:#cc9900;border:1px solid #ccc;border-radius:5px;color:#fff;line-height:15px;letter-spacing:4px;}
	.btn_edu_type3{display:inline-block;margin:10px 2px 5px 2px;padding:0px;width:60px; height:30px;background:#0aa95e;border:1px solid #ccc;border-radius:5px;color:#fff;line-height:15px;letter-spacing:2px;}
	.btn_edu_type4{display:inline-block;margin:10px 2px 5px 2px;padding:0px;width:60px; height:30px;background:#ffa54a;border:1px solid #ccc;border-radius:5px;color:#fff;line-height:15px;letter-spacing:2px;}
	.btn_div{position: relative;top: 15px; text-align:center}
/* 2024년 02월18일 메인 페이지 추가 수정에 따른 css 추가분 :End */

/*
* 2024-04-08 상단 대메뉴 수정에 따른 2차 변경 css::Start
*/
.evt .div1{font-size: 17px;color: #3468C0;height: 30px;line-height: 30px;}
.evt .div2{margin: 0px 0px 0px 0px;font-size: 23px;color: #333;height: 30px;line-height: 30px;}
.evt .div3{font-size: 15px;color: #333;height:27px;line-height:27px;}
.evt .div4{font-size: 15px;color: #333;height:27px;line-height:27px;}
.evt .div5{font-size: 15px;color: #333;height:27px;line-height:27px;}
.evt .div6{margin-top: 30px;font-size: 20px;color: #3468C0;}
.evt .div6 .left_span{text-align:left;display:inline-block;width:calc(50% - 20px);}
.evt .div6 .right_span{text-align:right;display:inline-block;width:calc(50% - 0px);font-size:13px;color:#333;cursor:pointer;}
.evt .div6 .right_span:hover{color:#cc3300;}
.evt .div6 .right_span img{margin: 0 0 0 5px;width: 25px;height: auto;}

.evt .div7{display: inline-block;margin:15px 20px 0px 0px;padding: 20px;
width: 200px;height: 85px;font-size:18px;color: #333;
border-radius: 10px;background: #ffcc66;text-align: left;line-height: 25px;}
.evt .div8{ display: inline-block;margin:15px 0px 0px 0px;
padding: 20px;width: 200px;height: 85px;font-size:18px;color: #333;
border-radius: 10px;background: #66cc99;text-align: left;line-height: 25px;} 
.evt .div7, .evt .div8{width: 252px;cursor:pointer}

.all_div_right .evt .div1{font-size:20px;}
.all_div_right .evt .div2{margin:12px 0;font-size:35px;}
.all_div_right .evt .div2 .telephone_icon{width:35px;}
.evt .div3 span{margin:0 20px 0 0}
.evt .div4 span{margin:0 10px 0 0}

.menu_area{} 
#gnb{margin:0;padding:0;width:100%;height:auto;}
.top_ribbon_banner{position:relative;margin:0;padding:0;width:100%;height:auto;min-height:50px;}
/* 리본 배너 닫기 버튼*/
.top_ribbon_banner button{position:absolute;top:15px;right:50px;width:25px;height:25px;
font-size:25px;color:#9b9ba0;background:transparent;transition:all 0.95s;cursor:pointer;}
.top_ribbon_banner button:hover{ color:#eee;transform: rotate(360deg); transform-origin: 50% 50%;}
 
/* 최상단 리본 배너 링크 */
.main_top_banner_link{display: flex;align-items: center;justify-content: center;width: 100%;height: 100%; 
background:#332fd0;}
.top_menu_list{margin:0;padding:0;width:100%;height:50px;background:linear-gradient(45deg, #00d096,#0034e2);}
.top_menu_list a{color:#fff;    font-size: 14px;font-weight: normal;}
.top_header_right{display:flex;justify-content: space-between;margin:0 auto;padding:0;width:1400px;height:50px;text-align: right;}
.top_header_right li{display:inline-block;width:100px;height:50px;line-height:50px;}
.top_header_right li button{font-weight:bold;color:#fff;background:transparent;}
.top_logo_zone{margin:0;padding:0;width:100%;height:100px;}
.top_logo_zone_in{margin:0 auto;padding:0;width:1400px;height:100px;}
/* 상단 찾기 폼 */
.top_main_search{position: relative;top: -35px;display: inline-block;margin: 0 0 0 10px;padding:0;width: 450px;
height: 40px;border: 1px solid #f5f5f5;background: #f5f5f5;border-radius: 50px;line-height: 40px;color: #41ccaf; font-size: 14px;
font-weight: bold;}
.search_wrap{}
.search_input{
position: absolute;top: 0px;left: 0px;display: inline-block;margin: 0 0 0 0px;padding: 0;
width: calc(100% - 0px);height: 40px;text-indent: 45px;
color: #41ccaf; 
border-radius: 50px;
border:2px solid transparent;
background-image:linear-gradient(#fff, #fff), linear-gradient(45deg, #00d096,#0034e2);
background-origin: border-box;
background-clip: content-box, border-box;}

.findbtn{position: relative;top: -2px;left: 381px;z-index: 2;width: 68px;height: 38px;cursor: pointer;
background: none;border-top-right-radius: 50px;border-bottom-right-radius: 50px;}
input.search_input:focus{border-color: rgba(229, 103, 23, 0.8);
box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 3px rgba(229, 103, 23, 0.6);outline: 0 none;}
/* 상단 메뉴 */
.top_menu_div{position: sticky;top:0px;z-index:50;width:100%;}
.top_menu_zone{margin:0;padding:0;width:100%;height:60px;background:#e7f1ff;color: #001070;font-weight: 700;}
/* 상단 메뉴 UL*/
.top_menu_ul{display:flex;margin:0 auto;padding:0;width:1400px;height:60px;justify-content: space-between;}
.top_menu_ul li{
width:calc(12% - 1px);height:58px;text-align:left;line-height:60px;}
.top_menu_ul li a{display:block;width:100%;height:100%;padding-left:12px;}
.top_menu_ul li:last-child{width:14.3%;text-align:right;}
.top_menu_ul li button{
  display:flex;height:60px;line-height:35px;
  width:100%;color:#fff;font-size:16px;
  text-indent:20px;letter-spacing:2px;cursor:pointer;font-family: 'Pretendard';
  background: linear-gradient(#0034e2, #007ad0);
  justify-content: center; align-items: center;
}
 /*호버링*/
.top_menu_ul li a:hover{color:#4b9bff;}
.top_submenu_ul li:hover{color:#4b9bff;} 
.top_allmenu_ul li a:hover{color:#4b9bff;}
hr.bar_line{display:none;position:absolute;left:0px;bottom:-1px;width:100%;height:3px;border:none;background:#4b9bff;}
hr.bar_line.on{display:block;}
.chgBar_button{cursor: pointer;}
.chgBar_button .bar1,.chgBar_button .bar2,.chgBar_button .bar3 {width:16px;height:2px;background-color:#fff;margin:4px 0px;transition: 0.4s; border-radius:10px;}
.open_all_menu .change1 .bar1 {transform: rotate(-45deg) translate(-4.5px, 4px);}
.open_all_menu .change1 .bar2 {opacity: 0;}
.open_all_menu .change1 .bar3 {transform: rotate(45deg) translate(-4px, -4.5px);}
.open_all_menu .change2 .bar1 {transform: rotate(0deg) translate(0px, 12px);}
.open_all_menu .change2 .bar2 {opacity: 1;}
.open_all_menu .change2 .bar3 {transform: rotate(0deg) translate(0px, -12px);}
.open_all_menu .change3 .bar1 {transform: rotate(45deg) translate(4px, 4.5px);}
.open_all_menu .change3 .bar2 {opacity: 0;}
.open_all_menu .change3 .bar3 {transform: rotate(-45deg) translate(4px, -4.5px);}
.open_all_menu .change4 .bar1 {transform: rotate(0deg) translate(0px, 0px);}
.open_all_menu .change4 .bar2 {opacity: 1;}
.open_all_menu .change4 .bar3 {transform: rotate(0deg) translate(0px, 0px);}

.top_main_sub_menu{display:none;position:absolute;top:60px;left:0px;z-index:2;margin:0px;padding:0px;width:100%;
/*height:150px; 메인 하부 메뉴 높이 */
/*min-height:150px;*//*최소 높이를 지정 자동으로 높낮이가 맞도록*/
min-height:270px;
border-bottom:1px solid #ccc;background:#fff;box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);overflow:hidden;}
.menu_sub_wrap_div{display:flex;margin:0 auto;padding:0px;width:1400px;height:auto;min-height:265px;border:0;justify-content: space-between;}
.top_submenu_ul{float:left;display:inline-block;margin:10px 1px 20px 0px;padding:10px
10px 0px 10px;
height:auto;/*background: #eee;*/border-left:1px solid #ccc;}
.top_submenu_ul li{display:block;margin:0px;padding:0px;height:35px;width:100%;line-height:17px;cursor:pointer;}
.top_submenu_ul li a{font-size:14px;}
.top_main_all_menu {display: none;position: absolute;top: 60px;left: 0px;z-index: 2;margin: 0px;
padding: 20px 0px 20px 0px;width: 100%;border-bottom: 1px solid #ccc;background: #fff;overflow: hidden;
 
box-shadow: 6px 8px 15px -3px rgba(0,0,0,0.33);
-webkit-box-shadow: 6px 8px 15px -3px rgba(0,0,0,0.33);
-moz-box-shadow: 6px 8px 15px -3px rgba(0,0,0,0.33);}

.main_all_wrap_div{display:flex;justify-content: space-between;margin:0 auto;padding:0px;width:1400px;height:100%;border:0;}
.all_div_left{float:left;margin:0;width:calc(60% - 10px);height:auto;/*background:#ffcc99;*/display: flex;}
.all_div_right{float:right;margin:0;width:calc(40% - 10px);height:100%;/*background:#00cccc;*/}
.clear{clear:both} 
.top_allmenu_ul{ display:table;margin:10px 1px 20px 0px;padding:0 10px 0px 10px;width:calc(100% - 1px);
height:auto;}
/*3개 이후에  개체가 아래로 떨어지게 ( 줄 바꿈 )*/
.top_allmenu_ul55:nth-child(4n){  clear:both; } 
.top_allmenu_ul li {display: block;margin: 0px;padding: 0px;height: auto;width: 100%;line-height:15px; }


.top_allmenu_ul li a{font-size:15px;}
.head_icon{margin:0 5px 0 0;width:13px;height:auto;font-size:12px;color:#3468C0;}
.telephone_icon{margin:0 5px 0 0;width:20px;height:auto;font-size:12px;color:#3468C0;}
.top_allmenu_ul li.first_menu a{padding:0px;font-size:17px;color:#3468C0;}
.top_allmenu_ul li a{padding-left:20px;}   
.two_in{float: left;width: 30%;height: auto;border-right: 1px solid #ccc;}


/*자바스크립트를 활용한 호버링*/
.top_menu_ul li.on{color:#007ad0;}

/*
* 2024-04-08 상단 대메뉴 수정에 따른 2차 변경 css::End
*/
 
/*메뉴간 간격 조정:: 각사이트마다 메뉴가 틀려서 넓이가 달라진다*/
.top_menu_ul li{width:calc(17.2% - 1px);}
.top_submenu_ul{width:14.5%} 
 
/*전체 메뉴 > 2차 서브 메뉴 ( li ) */
.top_allmenu_ul .first_menu{display: block;margin:0;padding: 0px;height: auto;width: 100%;line-height:30px;
cursor: pointer;text-indent:10px;font-size: 17px;color: #3468C0;}
/*전체 메뉴 > 2차 서브 메뉴 ( li ) */
.top_allmenu_ul .sub_menu{display: block;margin:0;padding: 0px;height: auto;
width: 100%;line-height:27px;cursor: pointer;text-indent:20px;font-size: 15px;color: #000;}
 
.top_ribbon_banner_img{
    margin: 0 auto;
    width: 1400px;
    height: 50px;
    background-image: url('/assets/image/top_ribbon_banner.jpg');
    text-align: center;
    font-size: 23px;
    color: #2d8b33;
    background-position-x: -248px;
    line-height: 53px;
} 
/*===============================================
/* 로딩중 표시하기 ( 로딩중 이미지, 로딩 프로그래스 바 )
**---------------------------------------------*/
/* 로딩중 이미지 */
#page_loading{position: fixed;top: 0px;left: 0px;z-index:10000;width: 100%;height: 100%;}
#page_loading.off{animation-name: main_loading_bg;animation-duration:0.3s; 
animation-timing-function: ease-in-out;animation-delay:0s;
animation-iteration-count:1;animation-direction: alternate;
animation-fill-mode:forwards;animation-play-state:running;} 
/*에니메이션에서 display:none이 안됨*/
@keyframes main_loading_bg { 0% {opacity: 1;visibility:visible; } 50% {opacity: 0.5; } 100% {opacity: 0; visibility: hidden;} }
#loading_backpannel{position:absolute;top: 0px;left: 0px;z-index: 1;}
#loading_backpannel{width: 100%;height: 100%;opacity:1;background:#fff;}
.main_loading {position:absolute;top:calc(40% - 50px);left:calc(50% - 50px);z-index:2;}
.main_loading {margin:0px;padding:30px 0;width: 100px;height:40px;text-align:center;}
.main_loading span {display:inline-block;width: 10px;height: 10px;background-color: gray;border-radius: 50%;}
.main_loading span {animation: main_loading 1s linear infinite;}
.main_loading span:nth-child(1) {background-color: #202020;animation-delay: 0s;}
.main_loading span:nth-child(2) {background-color: #202020;animation-delay: 0.2s;margin: 0px 10px}
.main_loading span:nth-child(3) {background-color: #202020;animation-delay: 0.4s;}
.main_loading p{margin:10px 0 0 0;font-weight:bold;font-size:12px;color:#555;}
@keyframes main_loading { 0%, 100% {opacity: 0;transform: scale(0.5);} 50% {opacity: 1;transform: scale(1.2);}}

/*로딩 프로그래스 바*/
#loading_progress_bar{position:fixed;top:0px;left:0px;z-index:1002;margin:0px;padding:0px;width:100%;height:2px;opacity:1;}
#loading_progress_bar.off{
animation-name: main_loading_bar;animation-duration:0.3s; 
animation-timing-function: ease-in-out;animation-delay:0s;
animation-iteration-count:1;animation-direction: alternate;
animation-fill-mode:forwards;animation-play-state:running;}
@keyframes main_loading_bar{ 0% {opacity: 1;visibility:visible; } 50% {opacity: 0.5; } 100% {opacity: 0; visibility: hidden;} }
#loading_progress{width:100%;height:100%;border:0px solid #ccc;background:#fff;}
progress { -webkit-appearance: none; }
::-webkit-progress-bar   { background-color:#f2f2f2; }
::-webkit-progress-value { background-color:#e87400; box-shadow: 0 0 3px #e87400, 0 0 3px #e87400;}
#code_percent_div{position:absolute;top:10px;left:10px;z-index:1;margin:0px;
padding:5px;width:38px;height:15px;background:#fff;color:#333;
text-align:center;font-size:10px;border:1px solid #ccc;border-radius:5px;}
#live_percent_arrow{position: relative;top:-2px;left:29px;z-index:2;content:" ";
display: inline-block;width:10px;height:10px;border-width: 1px 0 0 1px;border-style: solid;
border-color: #ccc;background: #fff;transform: rotate(45deg);border-radius:2px;}
#live_percent_div{position: absolute;top: 7px;left: 10px;z-index:3;margin: 0px;padding: 5px;width: 38px;height: 12px; 
color: #333;text-align: center;font-size: 10px; }
/*-----------------------------------------------
/* 로딩중 표시하기 ( 로딩중 이미지, 로딩 프로그래스 바 )
**===============================================*/

/* 프로그레스 인디게이터 */
progress {display: block;}
.Progress_Indicator{position:fixed;top:0;z-index:1001;width:100%;height:2px;background:#e6e6e6}
/* Progress Indicator */
#barProgress{display:block;height:100%;width:0;background:#5593f5}


/* 메인:: 신규과정::S */
.content_in{width:1400px;height:auto;}
.cont_title{margin:0;padding:0;}
.cont_title .row1{margin:0 auto;width:100%;padding:0 0 11px 0;font-weight:500;font-size:18px;color:#0071bc;}
.cont_title .row2{margin:0 auto;width:100%;padding:0 0 25px 0;font-weight:800;font-size:40px;color:#000;}
.cont_title .row3{margin:0 auto;width:100%;padding:0 0 50px 0;font-weight:500;font-size:21px;color:#333;}
.cont_list{display:flex;justify-content: space-between;margin:0 0 0px 0;padding:0;}
.cont_list .cont_box{
  margin:0 0 2% 0;
  padding:0 0 0 0;
  width:calc(25% - 20px);
  height: fit-content;
  border-radius: 18px;
  border: 3px solid transparent;
  background-image:linear-gradient(#fff, #fff), linear-gradient(#a6b7ef,#a6e2d2);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

.cont_box .cont_thumb{margin:0;padding:0;width:100%;height:187px;border-radius:15px 15px 0 0;background:#f2f2f2;overflow:hidden;}
.cont_box .cont_thumb img{width:100%;height:187px;}
.cont_box .edu_tit{text-align: center;
width:100%;height:70px;color:#2f3d69;font-size:17px;font-weight:600;
overflow:hidden;text-overflow:ellipsis;/*white-space:nowrap;*/
display: -webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;word-wrap:break-word;}
.cont_box .edu_msg{width:100%;height:50px;line-height:25px;color:#2f3d69;font-size:15px;font-weight:500;
overflow:hidden;text-overflow:ellipsis;
display: -webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;word-wrap:break-word;display:none;}
.cont_box .edu_tit a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.cont_box .edu_tit a span {
  width: 85%;
}
/* 메인:: 신규과정::E */

/* 메인:: 추천과정::S */
.cont_tab{display: flex;justify-content: space-evenly;margin: 50px auto 25px auto;width: 100%;}
.tab_btn{display:inline-block;
  color: #8e9ee3;
  width:330px;height:50px;
  line-height:50px;text-align:center;
  border-top:2px solid transparent;
  border-left:2px solid transparent;
  border-right:2px solid transparent;
  background-image:linear-gradient(#fff, #fff), linear-gradient(#a6b7ef,#a6e2d2);
  background-origin: border-box;
  background-clip: content-box, border-box;
  font-weight:700;cursor:pointer;}
.tab_btn.on{
  border-top:2px solid transparent;
  border-left:2px solid transparent;
  border-right:2px solid transparent;
  background-image:linear-gradient(#fff, #fff), linear-gradient(#a6b7ef,#a6e2d2);
  background-origin: border-box;
  background-clip: content-box, border-box;
  background: url('/assets/image/tab_bg.png') no-repeat center;
  background-size: cover;
  height: 60px;
  color:#fff;font-weight:700;
}
.tab_btn:hover{
  border-top:2px solid transparent;
  border-left:2px solid transparent;
  border-right:2px solid transparent;
  background-image:linear-gradient(#fff, #fff), linear-gradient(#a6b7ef,#a6e2d2);
  background-origin: border-box;
  background-clip: content-box, border-box;
  background: url('/assets/image/tab_bg.png') no-repeat center;
  background-size: cover;
  height: 60px;
  color:#fff;font-weight:700;}
.cont_tab_in_div{position:relative;min-height:350px;width:100%;background:#fff;}
.content_tab_in{display:none;}
.content_tab_in.on{display:block;}
/* 메인:: 추천과정::E */




/* cdn서버 문제 없을시 이곳만 걷어 낼 것*/
.top_allmenu_ul .sub_menu{font-size: 9px !important;}
.evt .div7, .evt .div8{width: 250px !important;}