@charset "utf-8";
/* CSS Document */

/* 공통사용추가_231011 */
:root{
	--primary: hsl(199 100% 45% / 1); 
	--secondary: hsla(177, 100%, 35%, 1);

	--red : hsla(0, 71%, 51%, 1);
    --red-alpha10: hsla(0, 70%, 51%, .1);

	--darkblue : hsla(200, 100%, 33%, 1);
	--darkblue-alpha10: hsla(200, 100%, 33%, .1);

	--deepblue : hsl(200.5, 88.4%, 16.9%);

	--teal : hsla(177, 100%, 35%, 1);
	--teal-alpha10:hsla(177, 100%, 35%, .1);
	--teal-alpha20:hsla(177, 100%, 35%, .2);
	--teal-alpha30:hsla(177, 100%, 35%, .3);


	--lightblue :hsla(200, 75%, 94%, 1);


	--fcBlack : hsl(199, 100%, 7%);

	--bcLightcyan : hsl(180, 14%, 99%);

	--line-color-gray : hsl(196.7, 9.3%, 62%);
}


.modal-extra-lg{ max-width: 1300px; width: 100%; }

/* 스타일 추가_220615 */
.flex{ display: flex !important; }
.fcc{ justify-content: center; align-items: center; }
@media(max-width: 1024px){
	.mobile-flex{ display: flex; }
}

.flex1{ flex:1 }
.align-items-center{ align-items: center; }

.margin-auto{ margin: auto; }
.margin-right-auto{ margin-right: auto; }
.margin-left-auto{ margin-left:auto }



.desktop-elem{ display: none; }
/* .mobile-elem{ display: initial;} */
@media( min-width: 1023px){
	.desktop-elem{ display: initial; }
	.mobile-elem{ display: none !important;}
}



/* 아이콘 임시 추가_231011 */
[class*="ico-"]{
    display: inline-block;
    width: 1em; height: 1em;
    color: currentColor;
    vertical-align: middle; /* 수정_230615 */
}
[class*="ico-"]:before {
    content: '';
    display: block; width: 100%; height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    color: currentColor;  background-color: currentColor; 
    -webkit-mask-size: contain;
    -webkit-mask-position-x: 50%;
    -webkit-mask-position-y: calc(50% - 0px);
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    mask-position-x: 50%;
    mask-position-y: 50%;
}
/* svg viewBox  */
.ico-file-download:before{
    -webkit-mask-image: url('../img/ico-file-download.svg');
    mask-image: url('../img/ico-file-download.svg');
}
.ico-circle-num1:before{
	-webkit-mask-image: url('../img/ico-circle-num1.svg');
	mask-image: url('../img/ico-circle-num1.svg');
}
.ico-circle-num2:before{
	-webkit-mask-image: url('../img/ico-circle-num2.svg');
	mask-image: url('../img/ico-circle-num2.svg');
}
.ico-circle-num3:before{
	-webkit-mask-image: url('../img/ico-circle-num3.svg');
	mask-image: url('../img/ico-circle-num3.svg');
}
.ico-circle-num4:before{
	-webkit-mask-image: url('../img/ico-circle-num4.svg');
	mask-image: url('../img/ico-circle-num4.svg');
}
.ico-circle-num5:before{
	-webkit-mask-image: url('../img/ico-circle-num5.svg');
	mask-image: url('../img/ico-circle-num5.svg');
}

.ico-o:before{
	-webkit-mask-image: url('../img/ico-o.svg');
	mask-image: url('../img/ico-o.svg');
}
.ico-x:before{
	-webkit-mask-image: url('../img/ico-x.svg');
	mask-image: url('../img/ico-x.svg');
}

/* //아이콘 임시 추가_231011 */


/* 색상추가_231012 */
.fcDarkBlue{ color: var(--darkblue) }
.fcBlack{ color: var(--fcBlack) }
.fcDeepBlue{ color: var(--deepblue); }













body {display: flex; flex-direction: column; min-height: 100vh;}
#wrap {display: flex; flex-direction: column; min-height: 100vh;}


/* 추가_이미지 비율_ */
.view-img img, .wide-img img, .post-img img {
    object-fit: contain;
    object-position: center;
}








/* main section  공통 */
.main section{ padding: 4em 1em 0; }
@media all and (max-width:1024px){  .main section{ padding: 2em 1em 0; }  }
@media all and (max-width:767px){    }
@media all and (max-width:480px){   }



/* 콘텐츠 영역 */
.inner-box {width: 100%; max-width: 1300px; margin: 0 auto;}
@media all and (max-width:1300px){
    .inner-box {  padding-left: 1rem; padding-right: 1rem;}
}

/* main_carousel banner */
.main_carousel .mainvisual {
    position:relative;
    width: 100%;
    height: 520px;
    z-index:1;
    overflow:hidden;
}
.main_carousel .mainvisual .cycle-slideshow {
    width: 100%;
    height: 100%;
}
.main_carousel .mainvisual .cycle-slideshow .slide {
    width:100%;
    height:100%;
    background-size:cover !important;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #eee;
}
.main_carousel .mainvisual .cycle-slideshow .slide .slideStory{
    position: relative;
    height: 100%;
    font-size:10px;
}
.main_carousel .mainvisual .cycle-slideshow .slide .slideStory .txt {
    position: absolute;
    z-index: 3;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: left;
    padding: 0 1.5em;
}
.main_carousel .mainvisual .cycle-slideshow .slide .slideStory .txt h6{
    font-size: 6em;
    font-weight: 500;
    padding: .3em 0;
    line-height: 1.1;
    color: #fff;
}
.main_carousel .mainvisual .cycle-slideshow .slide .slideStory .txt h6 span{
    display: block;
    font-size: 1.1em;
    padding-top: .2em;
}
.main_carousel .mainvisual .cycle-slideshow .slide .slideStory .txt p{
    font-size: 2.5em;
    line-height: 1.6;
    color: #333;
}
.main_carousel .mainvisual .cycle-slideshow .slide .slideStory img{
    position: absolute;
    display: block;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.main_carousel .mainvisual .pagerWrap {
    position:absolute;
    left:50%;
    bottom:2em;
    transform: translateX(-50%);
    z-index:201;
    font-size: 10px;
}
.main_carousel .mainvisual .pagerWrap #adv-custom-pager { display:inline-block; }
.main_carousel .mainvisual .pagerWrap #adv-custom-pager a{
    display:inline-block;
    width:1.8em;
    height:1.8em;
    margin-left:4px;
    background-color: #fff;
    border-radius: 1.8em;
    transition: width .2s, background-color .2s;
}
.main_carousel .mainvisual .pagerWrap #adv-custom-pager a.cycle-pager-active{
    width: 5.2em;
    background-color: #ec5024;
}
.main_carousel .mainvisual .pagerWrap button {
    position: relative;
    display:inline-block;
    font-size: 10px;
    width: 1.8em;
    height: 1.8em;
    vertical-align:top;
    border:none;
    background-color: #fff;
    border-radius: 50%;
    margin-left: .5em;
    overflow: hidden;
    color: transparent;
}
.main_carousel .mainvisual .pagerWrap .btnStop:before {
    content: '';
    position: absolute;
    display: block;
    width: 32.333333%;
    height: 41.5%;
    top:50%;
    left:calc(50%);
    border-right: 2px solid #555;
    border-left: 2px solid #555;
    transform: translate(-50%, -50%);
}
.main_carousel .mainvisual .pagerWrap button.btnPlay {
    background:url(../img/btn_play.png) 0 0 no-repeat;
    background-size:cover;
}

@media all and (max-width:1024px){
    .main_carousel .mainvisual { height:370px; }
    .main_carousel .mainvisual .cycle-slideshow .slide .slideStory{ font-size:8px;  }
    .main_carousel .mainvisual .cycle-slideshow .slide .slideStory img{width: 100%; }
    .main_carousel .mainvisual .pagerWrap { font-size: 8px; }
    .main_carousel .mainvisual .pagerWrap button { font-size: 8px;  }
}
@media all and (max-width:768px){
    .main_carousel .mainvisual { /* height:350px; */ }
    .main_carousel .mainvisual .cycle-slideshow .slide .slideStory{ font-size:6px; }
}
@media all and (max-width:480px){
    .main_carousel .mainvisual { height:200px; }
    .main_carousel .mainvisual .cycle-slideshow .slide .slideStory{ font-size:5px; }
    .main_carousel .mainvisual .pagerWrap { bottom:7px; }
}






/* main_carousel banner */
.main_carousel2 {
    position:relative;
    width: 100%;
    height: 570px;
    overflow:hidden;
    margin-bottom: 0 !important;
}
/*.main_carousel2 .mainvisual .cycle-slideshow {
    width: 100%;
    height: 100%;
}*/
.main_carousel2 .slick-list,
.main_carousel2 .slick-track,
.main_carousel2  div { height: 100%; }
.main_carousel2 .slick-dots {
    bottom: 2em;
}
.main_carousel2 .slide {
    width:100%;
    height:100%;
    background-size:cover !important;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #eee;
}
.main_carousel2 .slide .slideStory{
    position: relative;
    height: 100%;
    font-size:10px;
}
.main_carousel2 .slide .slideStory .txt {
    position: absolute;
    z-index: 3;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: left;
    padding: 0 1.5em;
}
.main_carousel2 .slide .slideStory .txt h6{
    font-size: 6em;
    font-weight: 500;
    padding: .3em 0;
    line-height: 1.1;
    color: #fff;
}
.main_carousel2 .slide .slideStory .txt h6 span{
    display: block;
    font-size: 1.1em;
    padding-top: .2em;
}
.main_carousel2 .slide .slideStory .txt p{
    font-size: 2.5em;
    line-height: 1.6;
    color: #333;
}
.main_carousel2 .slide .slideStory img{
    position: absolute;
    display: block;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.main_carousel2 .slick-next,
.main_carousel2 .slick-prev{
     width: 100px;
    height: 100px;
    z-index: 5;
    background: none;
    border: 0;
}
.main_carousel2 .slick-next{  right: calc( 50% - 650px );  }
.main_carousel2 .slick-prev{  left: calc( 50% - 650px ); }
.main_carousel2 .slick-prev:before,
.main_carousel2 .slick-next:before {
    margin: unset; /* */
    background: none;/*  */

    width: 50%;
    height: 50%;

    bottom: 0;

    transform-origin: left top;
}
.main_carousel2 .slick-prev:before {
    left: unset;
    right: 22%;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    transform: rotate(-45deg);
    transform-origin: left top;
}
.main_carousel2 .slick-next:before{
    left: 22%;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
    transform-origin: right top;
}
.main_carousel2 .slick-prev:hover, .main_carousel2 .slick-prev:focus, .main_carousel2 .slick-next:hover, .main_carousel2 .slick-next:focus {
    border-radius: 50%;
    background: rgba(255,255,255,.2) !important;
}
.main_carousel2 .slick-prev:hover:before,
.main_carousel2 .slick-prev:focus:before {
    border-top: 1px solid #ababab;
    border-left: 1px solid #ababab;
}
.main_carousel2 .slick-next:hover:before,
.main_carousel2 .slick-next:focus:before {
    border-top: 1px solid #ababab;
    border-right: 1px solid #ababab;
}
@media all and (max-width:1300px){
    .main_carousel2 .slick-next{  right: 2%;  }
    .main_carousel2 .slick-prev{  left: 2%; }
}
@media all and (max-width:1024px){
    .main_carousel2 { height:370px; }
    .main_carousel2 .slide .slideStory{ font-size:8px;  }
    .main_carousel2 .slide .slideStory img{width: 100%; }

}
@media all and (max-width:768px){
    .main_carousel2 { /* height:350px; */ }
    .main_carousel2 .slick-next,
    .main_carousel2 .slick-prev{ display: none !important; }
    .main_carousel2 .slide .slideStory{ font-size:6px; }
}
@media all and (max-width:480px){
    .main_carousel2 { height:200px; }
    .main_carousel2 .slide .slideStory{ font-size:5px; }

}







/* 퀵메뉴 아이콘들 */
.main_quickBnr_icons{  }
.main_quickBnr_icons .grid{
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  margin:0 auto;
  text-align: center;
  font-size: 10px;
}
.main_quickBnr_icons .grid .column a{
    display: block;
    width: 100%;
    height: auto;
}
.main_quickBnr_icons .grid .column a .m_icon{
    position: relative;
    display: block;
    width: 7em;
    height: 7em;
    margin: 0 auto;
    margin-bottom: 2em;
    border-radius: 50%;
    border: 1px solid #eee;
    overflow: hidden;
}
.main_quickBnr_icons .grid .column a:hover .m_icon{
    border: 1px solid #f5f5f5;
    background: #f5f5f5;
}
.main_quickBnr_icons .grid .column a .m_icon img{
    position: absolute;
    display: inline-block;
    height: 34%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.main_quickBnr_icons .grid .column a p{ font-size: 1.6em; }
.main_quickBnr_icons .grid .column a p span{
    display: none;
    width: 100%;
    padding-top: .3em;
}
.main_quickBnr_icons .grid .column a:hover p{ color: var(--hover-txt-color); }

/* 퀵메뉴가 4개 이하일 때,  추가 설명이 보임 */
.main_quickBnr_icons .grid.four .column a,
.main_quickBnr_icons .grid.three .column a{
    display: flex;
    flex-direction:row-reverse;
    justify-content: space-between;
    align-items:center;
    padding: 1em 1em 1em 2em;
    border: 1px solid #eee;

}
.main_quickBnr_icons .grid.four .column a .m_icon,
.main_quickBnr_icons .grid.three .column a .m_icon{
    border: none;
    margin: 0;
}
.main_quickBnr_icons .grid.four .column a p,
.main_quickBnr_icons .grid.three .column a p{
    text-align: left;
}
.main_quickBnr_icons .grid.four .column a p span,
.main_quickBnr_icons .grid.three .column a p span,
.main_quickBnr_icons .grid.two .column a p span
{
    display: block;
    font-size: .85em;
}
@media( max-width: 1280px){
    .main_quickBnr_icons .ui.stackable.grid.ten,
    .main_quickBnr_icons .ui.stackable.grid.eleven,
    .main_quickBnr_icons .ui.stackable.grid.twelve,
    .main_quickBnr_icons .ui.stackable.grid.thirteen,
    .main_quickBnr_icons .ui.stackable.grid.fourteen,
    .main_quickBnr_icons .ui.stackable.grid.fifteen,
    .main_quickBnr_icons .ui.stackable.grid.sixteen{
        justify-content: left;
    }
    .main_quickBnr_icons .ui.stackable.grid.ten .column,
    .main_quickBnr_icons .ui.stackable.grid.eleven .column,
    .main_quickBnr_icons .ui.stackable.grid.twelve .column,
    .main_quickBnr_icons .ui.stackable.grid.thirteen .column,
    .main_quickBnr_icons .ui.stackable.grid.fourteen .column,
    .main_quickBnr_icons .ui.stackable.grid.fifteen .column,
    .main_quickBnr_icons .ui.stackable.grid.sixteen .column{
        width: 25% !important;
    }
}
@media( max-width: 1024px){

    .main_quickBnr_icons .grid .column a p{ font-size: 1.5em; }

    .main_quickBnr_icons .ui.stackable.grid.nine,
    .main_quickBnr_icons .ui.stackable.grid.eight,
    .main_quickBnr_icons .ui.stackable.grid.seven,
    .main_quickBnr_icons .ui.stackable.grid.six,
    .main_quickBnr_icons .ui.stackable.grid.five{
        justify-content: left;
    }
    .main_quickBnr_icons .ui.stackable.grid.nine .column,
    .main_quickBnr_icons .ui.stackable.grid.eight .column,
    .main_quickBnr_icons .ui.stackable.grid.seven .column,
    .main_quickBnr_icons .ui.stackable.grid.six .column,
    .main_quickBnr_icons .ui.stackable.grid.five .column{
        width: 33.333333% !important;
    }
    .main_quickBnr_icons .ui.stackable.grid.ten .column a p,
    .main_quickBnr_icons .ui.stackable.grid.eleven .column a p,
    .main_quickBnr_icons .ui.stackable.grid.twelve .column a p,
    .main_quickBnr_icons .ui.stackable.grid.thirteen .column a p,
    .main_quickBnr_icons .ui.stackable.grid.fourteen .column a p,
    .main_quickBnr_icons .ui.stackable.grid.fifteen .column a p,
    .main_quickBnr_icons .ui.stackable.grid.sixteen .column a p,
    .main_quickBnr_icons .ui.stackable.grid.nine .column a p,
    .main_quickBnr_icons .ui.stackable.grid.eight .column a p,
    .main_quickBnr_icons .ui.stackable.grid.seven .column a p,
    .main_quickBnr_icons .ui.stackable.grid.six .column a p,
    .main_quickBnr_icons .ui.stackable.grid.five .column a p{
        font-size: 1.3em;
    }
}
@media( max-width: 767px){


}
@media( max-width: 480px){
    .main_quickBnr_icons .grid .column a .m_icon{
        margin-bottom: 0em;
        border: none;
    }
    .main_quickBnr_icons .grid .column a p{ padding: 0 .5em; }
}



/* 메인 교육과정_type4 */
.main_course_list {
    font-size: 1em;
}
.main_course_list .tlt{
    margin-bottom: 0.3em;
    font-size: 2em;
    margin: 0 10px 1em;
}
.main_course_list .items{
    display: flex;
    flex-wrap:wrap;
}
.main_course_list .items .card{
    padding: 10px;
}
.main_course_list .items .card .area{
    display: block;
    width: 100%;
    height: 100%;
    text-align: left;
    font-size: 1em;
    background-color: #fff;
    box-shadow: 0px 1px 3px 0px #d4d4d5, 0px 0px 0px 1px #d4d4d5;
    border-radius: 3px;
}
.main_course_list .items .card .area input,
.main_course_list .items .card .area select{
  width: 100%;
}
.main_course_list .items .card .area figure{
    position: relative;
    margin:  0;
    padding-top: 69.964664%; /**/
    background-color: #f5f5f5;
}
.main_course_list .items .card .area figure img{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: contain;
    object-position: center;
}
.main_course_list .items .card .area .cnt{
    padding:  1em;
}
.main_course_list .items .card .area .cnt .name{
    display: -webkit-box;
    width: 100%;
    line-height: 1.5;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.main_course_list .items .card .area .extra{
    border-top:1px solid rgba(0, 0, 0, 0.05);
}
.main_course_list .items .card .area .extra .row{
  display: flex;
}
.main_course_list .items .card .area .extra .row dt:after{
  content: ':';
  padding: 0 .5em;
}
.main_course_list .items .card .area .extra .row label{
  padding-right: 1em;
}
@media all and (max-width:1300px){

}
@media all and (max-width:1024px){

}
@media all and (max-width:768px){
    .main_course_list .inner-box{
        padding-left: calc(1rem - 10px);
        padding-right: calc(1rem - 10px);
    }
}
@media all and (max-width:480px){

}


/* 기존에 있던 교육과정 목록 */
.main_course_list.ori {background: #f7f7f7;}
.main_course_list.ori .inner-box .tit_area {background:url(../img/m_bg_tit.gif) repeat-x left center; }
.main_course_list.ori .inner-box h3 {display: inline-block; padding:.5em; margin-bottom:.3em; background: #f7f7f7; font-size: 2.667em;}
.main_course_list.ori .inner-box .ui.card > .content > .header {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}




/* typeN에 사용한 css */
/* 강의목록 */
/* board_type 공통__ 수정_240521 */
.board {
    position: relative;
    width: 100%;
    font-size: 10px;    
}
.board.bg{  background-color: #f9f9f9; }
.board > .inner-box {
    width: 100%;
    max-width: 1280px;
    /*! padding-left: 1rem; */
    /*! padding-right: 1rem; */
    margin: 0 auto;
    min-height: 300px;
}
.board .btn_showAllItems{
	position: absolute;
	display: inline-block;
	right: 1em;
	bottom: 100%;
	color: hsl(0, 0%, 40%);
	font-size: 16px;
	padding: 4px 16px;
}
.board .btn_showAllItems:after{
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
    right: 4px;
    top: calc(50% + 1px);
    transform: translateY(-50%) rotate(-45deg);
}
.board .btn_showAllItems:hover, .board .btn_showAllItems:active{ color: #555; }

.board:not(:has(.btn_showAllItems)) > .inner-box{ font-size: 16px; }
.board:not(:has(.btn_showAllItems)) > .inner-box .tlt{ margin-bottom: 100px }

.board >.inner-box .tlt{ 
	padding: 7px 28px;
	font-size: 26px; 
	font-weight: bold;
}
.board.bg >.inner-box .tlt{ 
	background: url(../img/m_bg_tit.gif) repeat-x left center;
}
.board.bg >.inner-box .tlt span{
	padding: 0 1em;
 	background-color: #f9f9f9;
}

@media(max-width: 1024px){
    .board { padding: 4em .5em; }
    .board .inner-box { padding-left: 0; padding-right: 0; }
    .board >.inner-box .tlt{  font-size: 24px;  }
}


/*  Main Course Module N,  선택한 항목들만 보이는 게시판 */
.selectedItemsBoard article{
    position: relative;
    width: 100%;
    margin-top: 48px;
  margin-bottom: 24px;
}
.selectedItemsBoard article .itemsList{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
    align-items: stretch;
    align-content: flex-start;
    max-height: initial;

    transition: max-height .5s ease;
    overflow: hidden;
}
.itemsList .card{
    width: 25%;
    height: auto;
    padding: 1em;
}
.itemsList .card.off{  display:none; }
.itemsList .card a{
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
}
.itemsList .wide-img {
    display: block;
    position: relative;
    padding-top: 70%;
    overflow: hidden;
}
.itemsList .wide-img img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center;
}
.itemsList .courseInfo {
    display: block;
    width: 100%;
    list-style: none;
    list-style-type: none;
    text-align: left;
    padding: 0px;
    margin: 0;
    font-size: 10px;
}
.itemsList .courseInfo li{ display: block; padding: .5em .7em; padding-left: 1em;}
.itemsList .courseInfo li:first-child{  padding-top: 1em; }
.itemsList .courseInfo li:nth-child(2){
    padding-top: 1em;
    padding-bottom: 2.3em;
    border-bottom: 1px solid #eee;
}
.itemsList .courseInfo li:nth-child(3){ padding-top: 1.3em;  }
.itemsList .courseInfo li:last-child{  padding-bottom: 2em; }
.itemsList .courseInfo .ciName{
    display: -webkit-box;
    width: 100%;
    line-height: 1.5;
    font-size: 1.6em;
    height: 3em;
    /*max-height: 3em;*/
    overflow: hidden;
    text-overflow: ellipsis;

    -webkit-line-clamp: 2;
    -webkit-box-orient:vertical;
}
.itemsList .courseInfo .ciTeacher, .itemsList .courseInfo .ciPrice{
    font-size: 1.35em;
    color: #555;
}
.itemsList .courseInfo .ciPrice dl{
    display: flex;
    flex-direction: row;
    align-items:flex-start;
    justify-content:left;
    margin: 0;
    padding: 0;
}
.itemsList .courseInfo .ciPrice dl dd, .courseInfo .ciPrice dl dt{ margin: 0; padding: 0; }
.itemsList .courseInfo .ciPrice dl dt{ margin-right: .2em; }
.itemsList .courseInfo .ciPrice dl dd .discount{
    position: relative;
    display: inline-block;
    color: #999;
    margin: 0 .7em 0 0.3em;
}

.itemsList .courseInfo .ciPrice dl dd .discount:before{
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    background: #e3160c;
    top:  calc( 50% + 2px );
    left: 0;
}
.itemsList .courseInfo .ciPrice dl dd .discount:after{
    content: '';
    position: absolute;
    display: block;
    width: 1px;
    height: 6px;
    background: #e3160c;
    top: calc( 50% - 2px );
    left: calc(100% - 3px);
    transform: rotate(-45deg);
}
.btn_itemsMore{
    display:  inline-block;
    font-size: 1.6em;
    line-height: 1;
    padding: 1.1em 3.8em;
    margin: 2em 0;
    border: 1px solid #999;

    color: #333;
    position: relative;
}
.btn_itemsMore:before{
    content: "+";
    position: relative;
    display: inline-block;
    vertical-align:text-top;
    height: 100%;
    margin-right: 5px;
}
.full + .btn_itemsMore:before{
    content: "-";
}
.selectedItem_paging{
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width:  100%;
    font-size: .8em;
    line-height: 1.3;
    color: #999;
    padding-right: 1em;
    text-align: right;
}
.selectedItem_paging span{
    position: relative;
    display: inline-block;
    padding: 0 .7em;
}

.selectedItem_paging .scrollIndicator{
    width: 91%;
    height: 1px;
    background: #ccc;
}
.selectedItem_paging .scrollIndicator .bar{
    height: 1px;
    background: #ec5024;
    width: 0%;
}

@media(max-width: 1024px){
    .selectedItemsBoard article .itemsList{
        flex-wrap: nowrap ;
        overflow-x: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .selectedItemsBoard article .itemsList::-webkit-scrollbar { display:none;   }
    .itemsList .card{ min-width: 31%;   }
    .itemsList .card.off{  display:block ;}
    .btn_itemsMore{ display: none; }
    .itemsList:has(.card:nth-of-type(2)) ~ .selectedItem_paging{ display: flex;   }
}
@media(max-width: 768px){
    .itemsList .card{ min-width: 100%; padding-right: 1em;    }
    .itemsList:has(.card:nth-of-type(2)) .card{ min-width: 70%; padding-right: 0.3em;    }
/*    .itemsList .courseInfo { font-size: 9px; }*/
}
@media( max-width: 480px ){
/*    .itemsList .courseInfo { font-size: 8px; }*/
    .itemsList .courseInfo .ciPrice dl dd{
        display: flex;
        flex-direction: column;
    }
    .itemsList .courseInfo .ciPrice dl dd span:nth-child(1){  margin-bottom: .7em }
    .itemsList .courseInfo .ciPrice dl dd span:nth-child(2){ padding-left: .3em; }
}








/* 교육과정_수강료_추가_210719  */
.coursePrice { }
.coursePrice p{ position: relative; display: inline-block; padding-top: .5em; }
.coursePrice p:nth-child(1) { padding-right: .5em; }
.coursePrice .ori, .coursePrice .discount{
  position: relative;
  display: inline-block;
  color: #333;
  padding: 0 .2em;
}
.coursePrice .price .ori{ color: #777; }
.coursePrice .price .ori:before{
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  top: calc(50% - 1px);
  left: 0;
  background: #f00;
}
/*
.coursePrice .price .ori:after{
  content: '';
  position: absolute;
  width: 5px;
  height: 1px;
  top:calc(50% - 1px );
  left: calc(109% - 5px );
  transform: rotate(35deg);
  background: #f00;
}
*/
/* 과정 옵션 */
.main_course_list.bg{
    background-color: #f7f7f7;
}
.main_course_list.bg h3{
    background: url(../img/m_bg_tit.gif) repeat-x left center;
    text-align: center;
}
.main_course_list.bg h3 span{
    padding: 0 2em;
    background-color: #f7f7f7;
}
.main_course_list .items.four .card{
    width: 25%;
}
@media all and (max-width:1024px){
    .main_course_list .items.four .card {
        width: 50%;
    }
}
.main_course_list .items.three .card{
    width: 33.333333%;
}



/* 후기 스타일 */
.main_review {background-color: #f5f5f5;}
.main_review .inner-box h3 {
    display: inline-block;
    margin-bottom:1.5em;
    padding:7px 28px;
    font-weight: 400;
    font-size: 1.467em;
    color:#333;
}
.main_review .inner-box .subtxt {margin-bottom: 2.5em; padding:  0 1em}

.main_review .inner-box .review_slider {margin:0; padding: 0; margin-bottom: 1.5em; padding-bottom:2em;}
.main_review .inner-box .slick-list .slick-slide .box {width:90% !important; height: max-content; }
.main_review .inner-box .review_slider .box img {display: inline-block; width: 8em; margin-bottom:1.5em; border-radius: 50%;}
.main_review .inner-box .review_slider .box .person {display: block; margin-bottom:.5em; font-size: 1.067em; color:#777;}
.main_review .inner-box .review_slider .box p {display: block; font-weight: 500; font-size: 1.2em; color:#333; line-height: 1.5; padding: 0 1em;}
.main_review .inner-box .slick-prev, .main_review .inner-box .slick-next {    z-index: 5; }
@media all and (max-width:1440px){
    .main_review .inner-box .slick-prev {  left: 0;    }
    .main_review .inner-box .slick-next {   right: 0;   }
}
@media all and (max-width:1300px){

}
@media all and (max-width:1024px){
        .main_review .inner-box .review_slider .box img { width: 6em; }
}
@media all and (max-width:768px){
    .main_review .inner-box .review_slider .slick-prev,
    .main_review .inner-box .review_slider .slick-next { display: none !important;     }
}
@media all and (max-width:480px){
    .main_review .inner-box {padding: 0;}
    .main_review .inner-box h3 {margin-bottom:1em; padding:5px 20px; font-size: 1.2em;}
    .main_review .inner-box .subtxt {margin-bottom: 1.5em;}
    .main_review .inner-box .review_slider {margin:0; padding: 0; margin-bottom: 1.5em; padding-bottom:2em;}
    .main_review .inner-box .review_slider .box p {font-size: 1.067em;}
    .main_review .inner-box .slick-prev, .main_review .inner-box .slick-next {display: none !important;}
}




/* 광고형태의 배너_바로가기 자세히보기 버튼 있는 경우 */
.main_Ads_Bnr { }
.main_Ads_Bnr .grid{
    display: flex !important;
    flex-direction: row;
    width: 100%;
    max-width: 1300px;
    margin:0 auto;
    text-align: left;
    font-size: 10px;
}

.main_Ads_Bnr .grid .column .bnrCnt{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center; /* flex-start */
    width: 100%;
    height: 100%;
    min-height: 13em;
    padding: 3em;
    background: #f5f5f5; /* */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.main_Ads_Bnr .grid .column .bnrCnt div{
    position: relative;
    height: 100%;
}
.main_Ads_Bnr .grid .column .bnrCnt div:nth-child(2){
    width: 7em;
    height: 7em;
}
.main_Ads_Bnr .grid .column .bnrCnt div:nth-child(2) img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* 상자테두리 넣기 */
.main_Ads_Bnr .grid .column .bnrCnt.boxLine{
    border: 1px solid #ddd;
    background-color: transparent;
}

.main_Ads_Bnr .grid .column .bnrCnt h4{
    font-size: 1.9em;
    font-weight: 500;
    margin-bottom: .3em;
}
.main_Ads_Bnr .grid .column .bnrCnt p{
    display: block;
    width: 100%;
    font-size: 1.6em;
    margin-top: .5em;
    margin-bottom: 2.5em;
}
.main_Ads_Bnr .grid .column .bnrCnt .mouseBottomLine{
    position: absolute;
    display: block;
    bottom: -4px;
    font-size: 1.5em;
    margin-top: 1.5em;
    font-style: normal;
}
.main_Ads_Bnr .grid .column .bnrCnt .mouseBottomLine:after{
    content: '';
    position: relative;
    display: inline-block;
    width: .4em;
    height: .4em;
    top: 50%;
    margin-left: .5em;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    transform: rotate(-45deg) translateY(-50%);
}
.main_Ads_Bnr .grid .column .bnrCnt .mouseBottomLine:before{
    content: '';
    position: absolute;
    width: 0;
    height: 4px;
    bottom: -2px;
    left: 0;
    background: var(--brandColor, #009be5);
    transition: width .3s;
    -webkit-transition: width .3s;
}
.main_Ads_Bnr .grid .column .bnrCnt:hover .mouseBottomLine:before{ width: calc(100% - .9em); }
.main_Ads_Bnr .grid .column .bnrCnt:hover .mouseBottomLine{ color:  var(--brandColor, #009be5); }
.main_Ads_Bnr .grid .column .bnrCnt:hover :after{ border-color: var(--brandColor, #009be5); }

.main_Ads_Bnr .bankAccount{
    font-weight : bold;
    font-size: 2.3em !important;
}
.main_Ads_Bnr p img{ width: 100%; }

/*  배너 4개일 때*/
.main_Ads_Bnr .grid.four .column .bnrCnt{
    flex-direction: column;
    min-height: 36em;
    padding: 5em 3em;
   /* background-color: #f0f000; */
}
.main_Ads_Bnr .grid.four .column .bnrCnt div{ text-align: center; background: #f5f5f5; }
.main_Ads_Bnr .grid.four .column .bnrCnt div:nth-child(2){
    position: absolute;
    width: 7em;
    height: 7em;
    bottom: 12.5em;

}
.main_Ads_Bnr .grid.four .column .bnrCnt .mouseBottomLine{
    left: 50%;
    transform: translateX(-50%);
}
.main_Ads_Bnr .grid.four .column .bnrCnt:hover .mouseBottomLine.mouseBottomLine:before{ width: 100%; }
.main_Ads_Bnr .grid.four .column .bnrCnt .mouseBottomLine:after{ display: none; }


@media( max-width: 1280px ){
    .main_Ads_Bnr { /* padding-top: 1.5em !important; */ }
}
@media(max-width: 1024px){
    .main_Ads_Bnr .grid{ font-size: 9px; }
}
@media(max-width: 767px){
    /*  배너 4개일 때*/
    .main_Ads_Bnr .grid.four .column .bnrCnt{
        flex-direction: row;
        min-height: 13em;
        padding: 3em;
    }
    .main_Ads_Bnr .grid.four .column .bnrCnt div{ text-align: left; background: #f5f5f5; }
    .main_Ads_Bnr .grid.four .column .bnrCnt div:nth-child(2){ position: unset; bottom: unset;  }
    .main_Ads_Bnr .grid.four .column .bnrCnt .mouseBottomLine{  left: unset;  transform:unset;  }
    .main_Ads_Bnr .grid.four .column .bnrCnt .mouseBottomLine:after{ display: inline-block; }
}




/* main_cs_service_style1__ cs 안내 */
.main_cs_service{
    background: #eee;
    padding-top: 2em !important;
    padding-bottom: 2em !important;
    margin-top: 2em;
}
.main_cs_service .grid{
  display: flex !important;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 1280px;
  margin:0 auto;
  text-align: left;
  font-size: 10px;
}

.main_cs_service .grid .column dl{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 2.5em 2em;
    background-color: #fff;

}
.main_cs_service .grid .column:nth-child(1) dl{
    background-color: transparent;
}
.main_cs_service .grid .column .m_icon{
    position: relative;
    display: block;
    width: 4em;
    height: 4em;
    overflow: hidden;
}
.main_cs_service .grid .column .m_icon .svgIcon{ background-size: 80%; }
.main_cs_service .grid .column .m_icon img{
    position: absolute;
    display: inline-block;
    height: 34%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.main_cs_service h4{
    font-size: 1.9em;
    font-weight: 500;
}
.main_cs_service small{
    display: block;
    font-size: 1.3em;
    font-weight: normal;
    padding-top: .2em;
}
.main_cs_service .csBigger{
    display: block;
    font-size: 2em;
    font-weight: bold;
    padding: .2em 0;
}



/* footer_공통 */
footer {
    margin-top: 8em;
    border-top:1px solid #ddd;
    padding: 1em 0 6em;
    font-size: 10px;
}
footer .corp_area {
    display: flex;
    flex-direction: row;
    justify-content:left;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1em;
    font-size: 1.5em;

}
footer .corp_area li { position: relative; }
footer .corp_area li:after {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: 30%;
    /* right: 0; */
	left:0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    background: rgba(0, 0, 0, .3);
}
footer .corp_area li:first-child:after { display:none; }
footer .corp_area li a {
    display: block;
    color: #202020;
    padding: .7em 1.3em;
    font-size: 1em;
}
footer .corp_area li:first-child a { padding-left: 0;}
footer .copy {
    display: block;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1em;
    text-align: left;
    font-style: normal;
    font-size: 1.4em;
    line-height: 1.6;
    color: #777;
}
footer .copy span{
    position: relative;
    display: inline-block;
    padding-right: 1.2em;
}
footer .copy span:after{
    content: '';
    position: absolute;
    display: inline-block;
    width: 1px;
    height: .8em;
    top: calc( 50% - .45em );
    right: .48em;
    background-color: #777;
}
footer .copy mark{
    position: relative;
    display: block;
    color: #777;
    font-size: .9em;
    padding-top: 1.3em;
    background: none;
}
footer .copy span:last-of-type:after{ display: none; }

@media all and (max-width:1024px){
    footer .corp_area{ /* justify-content:center; */  }
    footer .copy { /* text-align: center;  */  padding-top: 1em }
	footer .corp_area li + li:before  {  display: none; }
    footer .corp_area li a {  padding: .7em .8em; }
    footer .corp_area li:last-child a { padding-right: 0;}
}
@media all and (max-width:767px){

    footer { font-size: 9px; }
}
@media all and (max-width:480px){
    footer { font-size: 8px; }
    footer .copy span {  display: block; }
    footer .copy span::after {  display: none; }
}





/* lottie area - 애니애이션 영역 */
.lot_area {position:fixed; top:0; left:0; bottom:0; right:0; text-align:center; z-index:999;}
.lot_area .lot_area_fixed {display:flex; flex:1; flex-direction:column; position:absolute; top:0; right:0; left:0; bottom:0; height:100%; background:rgba(0, 0, 0, .5);}

/* lottie loding 로딩바 */
.lot_area .lot_area_fixed .lot_loding {position:relative; margin: auto 0;}
.lot_area .lot_area_fixed .loding_svg {width:200px; height: 100px; margin:0 auto;}
.lot_area .lot_area_fixed .txt_lot_descrip {text-align:center; font-weight:500; font-size:1.067em; color:#fff;}

/* lottie hand_slide 모바일 핸드 슬라이딩 */
.lot_area .lot_area_fixed .ion-close {display:inline-block; position:absolute; right:1.25em; top:1.25em; font-size:1.25em; color:#fff;}
.lot_area .lot_area_fixed .lot_hand_slide {position:relative; margin: auto 0;}
.lot_area .lot_area_fixed .hand_slide_svg {display: block; width:200px; height:auto; margin:0 auto;}
.lot_area .lot_area_fixed .txt_lot_descrip {text-align:center; font-weight:500; font-size:1.067em; color:#fff;}

/* tutorial area 튜토리얼 영역 */
.tutorial .close_tutori {position:absolute; right:1em; top:1em; z-index:9999;}
.ion-close {font-size:1.25em; color:#fff;}

/* sub aside area 서브 페이지 좌측메뉴 */
aside {display: none;}
.lnb {width: 240px; min-width: 240px; margin-right: 2.5em;}
.lng_head {text-align: center; padding:40px 0; border:1px solid rgba(0, 0, 0, .1);}
.lng_head h3 { font-weight:600; font-size:1.5em;}
ul.navList {border-right:1px solid rgba(0, 0, 0, .1); border-left:1px solid rgba(0, 0, 0, .1);}
ul.navList > li {position:relative; text-align:left; border-bottom:1px solid rgba(0, 0, 0, .1);}
ul.navList > li.active > a {background: #f5f5f5; color: var(--brandColor, #ec5024) ;}
ul.navList > li > a {display:block; font-size:1em; font-weight: 500; text-indent:10px; line-height:52px; color:rgba(0, 0, 0, .8);}
ul.navList > li:after {content: '\f3d1'; position: absolute; right: 15px; top: .875em; font-family: "Ionicons"; font-size:1.25em; transition: transform .35s, -webkit-transform .35s; transform: rotate(0deg); transform-origin: 50% 50%;}
ul.navList > li a span {position:inherit; padding:0;}
ul.navList > li.on > a {color:#000;}
ul.navList > li.on:after  {transform: rotate(90deg);}
ul.navList > li.on .twoDep {display:block;}
ul.navList li.subNone:after {display: none;}
ul.navList .twoDep {display:none;}
ul.navList .twoDep ul {}
ul.navList .twoDep ul li {position: relative; border-top: 1px solid rgba(0, 0, 0, .1);}
/*ul.navList .twoDep ul li a:after {content: '\f489'; position: absolute; right: 15px; top: 10px; font-family: "Ionicons"; font-size: 1.5em;}*/
ul.navList .twoDep ul li a {position: relative; display:block; padding: .75em 20px; font-weight: 500; color:rgba(0, 0, 0, .8);}
.g_view {display:block; position:absolute !important; top:50%; right: 10px; width:17px; height:17px; margin-top:-8px; transition:all 0.3s; -webkit-transition:all 0.3s;}
.g_view:before, .g_view:after {content:''; display:block; position:absolute; font-size:1.5em; background:#666; transition:all 0.3s; -webkit-transition:all 0.3s;}
.g_view:before {width:17px; height:1px; top:8px; left:0;}
.g_view:after {width:1px; height:17px; left:8px; top:0;}
a:hover .g_view, .current > a > .g_view, .current > a > .g_view:before {transform:rotate(90deg); -webkit-transform:rotate(90deg);}
.current > a > .g_view:before, a:hover .g_view:before, .current > a > .g_view:after, a:hover .g_view:after {background:#000;}

ul.navList .twoDep ul li.active a {background: #f0f0f0;}
ul.navList .twoDep ul li.active .threeDep ul {background: #ddd;}
ul.navList .twoDep ul li.active .threeDep ul li a {background: #f7f7f7;}
ul.navList .twoDep ul li.active .threeDep ul li.active a {color:#ff6c00 !important;}

ul.navList .twoDep ul li span:before {margin-right:5px;}
ul.navList .twoDep ul li a:hover {color:#000;}
ul.navList .twoDep ul li.subNone a:after {display: none;}
ul.navList .twoDep ul li .threeDep {display:none;}
ul.navList .twoDep ul li.current .threeDep {display:block;}
ul.navList .twoDep ul li .threeDep ul li {position: relative; background: #fff;}
ul.navList .twoDep ul li .threeDep ul li a {padding: .75em 0 .75em 30px; font-weight: 400;}
ul.navList .twoDep ul li .threeDep ul li a:before {content: '\f462'; position: absolute; left: 20px; top: 18px; font-family: "Ionicons"; font-size: 0.667em;}
ul.navList .twoDep ul li .threeDep ul li a:after {display: none;}

/*  aside 모바일 좌측메뉴 */
aside .header {display: inline-flex; align-items: center; position: relative; width: 100%; padding: 0 1em; box-shadow: -3px 1px 5px 0px rgba(0, 0, 0, .3); background: #fff; z-index: 3;     gap: 1rem;  }

aside .header h1{ display: none; } /* 언어변경 드롭다운 ui가 들어갈 공간이 필요해 안쓰는듯한 태그는 안보이게  처리함_240425  */

aside .header h1 a {display: block; width: 120px; margin-right: 10px;}
aside .header h1 img {width: 100%;}
aside .header .login {margin-left: auto;}
aside .header .login .name {font-size: 1.25em; font-weight: 500; color: #999;}
aside .header .login .name:before {content: '\f3c6'; margin-right: 5px; font-family: "Ionicons";}
aside .header .login .login-btn {font-size: 1.25em; font-weight: 500; color: #404ea1;}
aside .header .login .login-btn:before {content: '\f2a9'; margin-right: 5px; font-family: "Ionicons";}
aside .header .close {margin-left: 20px; font-size: 4em; color: #333; line-height: 0;}
aside:after {content: ''; position: absolute; top: 0; left: 0; width: 180px; height: 100%; border-right: 1px solid rgba(0, 0, 0, .1); background: #f1f1f1;}
aside ul.nav {position: relative; height: calc(100% - 104px); overflow-y: auto; z-index: 2;}
aside ul.nav > li {width: 180px;}

/* aside ul.nav > li > a {display: block; font-weight: 700; padding: 2em 0; text-indent: 20px; border-bottom: 1px solid rgba(0, 0, 0, .1); font-size: 1.125em;} */
aside ul.nav > li > a {display: block; font-weight: 700; padding: 2em 10px 2em 20px; border-bottom: 1px solid rgba(0, 0, 0, .1); font-size: 1.125em;} /* 모바일 메뉴 영역 수정_240103 */
aside ul.nav > li.show > a {border-right: 1px solid rgba(0, 0, 0, .1); background: #fff;}
aside ul.nav > li.show > ul.navList {display: block;}
aside ul.nav > li > ul.navList {position: absolute; top: 0; right: 0; width: 300px; display: none; border: none;}
aside ul.nav > li > ul.navList .twoDep > ul > li .threeDep {display:none;}
aside ul.nav > li > ul.navList .twoDep > ul > li.current .threeDep {display:block;}
aside ul.nav > li > ul.navList .twoDep > ul > li .threeDep ul li {position: relative; background: #fff;}
aside ul.nav > li > ul.navList .twoDep > ul > li .threeDep ul li a {text-indent: 60px;}
aside ul.nav > li > ul.navList .twoDep > ul > li .threeDep ul li a:before {content: '\f462'; position: absolute; left: -20px; top: 10px; font-family: "Ionicons"; font-size: 1.5em;}
aside .footer {position: absolute; bottom: 0; width: 100%; z-index: 3;}
aside .footer ul {display: inline-flex; width: 100%; text-align: center; border-top: 1px solid rgba(0, 0, 0, .1); }
aside .footer ul li {flex: 1 1 auto; position: relative; background: #edf0f5;}
aside .footer ul li:before {content:""; position: absolute; top: calc(50% - 7px); left: 0; width:1px; height:14px; margin:0 10px 0 0; background:#d7d7d7;}
aside .footer ul li:first-child:before {display: none;}
aside .footer ul li a {display: block; padding: 1em;}


/********************************************************
        sub-content 서브 페이지 공통 콘텐츠
********************************************************/
.sub-wrap {display: flex; flex: 1 1 auto; padding-top: 5em;}
.content-box {display: flex; flex: 1; flex-direction: column; margin-bottom: 2em; width: calc(100% - 277.5px); }

/* 서브페이지 타이틀 */
.content-box .subtitle {display: flex; margin-bottom:1em; padding:1.75em 0 1em 0; line-height: 1; font-size:2em; font-weight: bold; color: #243052; border-bottom: 1px solid #ddd;}
.content > .title {margin-bottom: 10px; font-size:1.5em; color: #333;}

.option-content .search-box{
    margin-right: auto;
}
.option-content .element{
    flex: 2 1 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0em;
}
.option-content .button-area {
    margin-left: unset;
}
.option-content .element .buttons .button{
    font-size: 1em;
    padding: 0.77em 1em ;
    background-color: rgba(0, 0, 0, 0.03) !important;
}
.option-content .element .buttons .button:hover{
    background: rgba(0, 0, 0, 0.05) !important;
}
@media (max-width: 520px){
    .option-content {
        flex-direction: column;
        align-items: flex-start;
    }
    .option-content .element{
        width: 100%;
    }
    .option-content .element .ui.basic.buttons{
        border: none;
    }
    .option-content .element .buttons .button,
    .option-content .element .buttons .active.button,
    .option-content .element .buttons .button:hover,
    .option-content .element .buttons .button:active,
    .option-content .element .buttons .button:visited{
        padding: 0.77em 0em 0.77em  1em;
        background-color: transparent !important;
    }
    .option-content .button-area {
        display: flex;
        align-items: center;
        width: 100%;
        margin-top: 1em;
        margin-left: unset;
    }
    .option-content .button-area .dropdown {
        flex: 2 1 auto;
        margin-right: .2em;
    }
    .option-content .button-area .dropdown:last-child{
        flex: 1 1 auto;
        margin-right: 0em;
    }

}

/* sub location area 서브 페이지 위치 영역 */
.location {position: absolute; top: 0; left: 0; width: 100%; border-bottom: 1px solid #ddd; background: #f0f0f0;}
.location .inner-box {display: flex; align-items: center;}
.location .inner-box .page_location {margin-left: auto; padding: 1em 0 1em 1em;}
.location .inner-box .page_location ul {display:inline-block; vertical-align:middle;}
.location .inner-box .page_location ul li {display:inline-block; background:url(../img/icon_location_arrow.gif) no-repeat 0 7px; padding:0 8px 0 13px;}
.location .inner-box .page_location ul li:last-child {padding-right: 0; font-weight: 600;}
.location .inner-box .page_location ul li a {}
.location .inner-box .page_location ul li.on {font-weight: 500; color:#333;}
.location .inner-box .page_location ul li.home  {display:inline-block; width:13px; height:15px; margin-right:5px; vertical-align:middle; background:  url(../img/location_home.gif) no-repeat left -2px; overflow:hidden; }
.location .inner-box .page_location ul li.home span {padding-left:200px;}




/* file uploade */
.ui.form .grouped.fields .user-img img {width:120px; height: 120px; border-radius: 50%;}
.ui.form .grouped.fields .field.f_uploader {position: relative; overflow: hidden; border-radius: 5px;}
.ui.form .grouped.fields .field.f_uploader .find {width:75px;}
.ui.form .grouped.fields .field.f_uploader .remove {position:absolute; right:75px; top:0; bottom: 0; border-radius: 0; width:75px; font-size: 14px; white-space: nowrap; line-height: 1.3;}
.ui.form .grouped.fields .field.f_uploader .ui.black.button {width:75px; font-size: 14px; line-height: 1.3;}
.ui.form .grouped.fields .field.f_uploader .ui.input input{flex:1}

.po {display: inline-block; padding: 0 5px; color: #000; background: rgba(101,188,212,.3);}
.anchor {display: block; position: relative; top: -120px; visibility: hidden;}
dl.list-sm {}
dl.list-sm dt {font-size: 1em; font-weight: 500; color: #333;}
dl.list-sm dd {margin-left: 5px; padding:5px 5px 5px 12px; text-align:left; color: #999; background:url(../img/icon_bullet.gif) 0 1em no-repeat;}
ul.list-sm {}
ul.list-sm > li {padding:6px 4px 6px 8px; text-align: left; background:url(../img/icon_dot.gif) 0 1em no-repeat;}
ul.list-sm > li strong {color: #333;}
ul.list-sm > li .name {margin-right: 10px; color: #333;}
ul.list-sm > li.bullet-none {padding-left: 0; background: none;}
ul.list-sm > li.last-word {display: block; width: 100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
ul.list-default li {padding: 4px 0;}
ol.list-sm {}
ol.list-sm > li {padding:2px 0; text-align: left;}
ol.list-sm > li > ul {margin-top: 5px; padding-left: 1em;}
ol.list-sm > li > ul > li {padding:2px 2px 2px 8px; text-align:left; color: #999; background:url(../img/icon_dot.gif) 0 .75em no-repeat;}

/* 강의 소개 Online detail */
table.infoList {width: 100%; border-collapse:separate !important; border-spacing:0 10px;    table-layout: fixed;   }
table.infoList th {padding: 0 1em; background:#7bb4d5; color:#fff; position:relative; width:20%; font-weight:400; font-size: 1.125em; text-align:center;}
table.infoList th:after {content:""; position:absolute; right:-8px; top: 50%; transform:translateY(50%); -webkit-transform:translateY(-50%); background:url("../img/bu_arrRight.png") no-repeat left top; width:8px; height:14px;} 
table.infoList td {background:#f5f5f5; width:80%; padding:1em 2em;}
table.infoList ul.tbl {border-spacing: initial;}
table.infoList ul.tbl > li > dl > dt {background: #fff;}

/* 추가_210809 */
table.infoList tbody tr td img {
  width: 100%;
}

/* 스크롤 테이블 */
.scroll_dtable {overflow-x:auto;}
.scroll_dtable .table {white-space:nowrap;border-collapse:collapse;}

/* 스크롤 테이블 reset & normalize */
* { box-sizing:border-box;}
caption {position:absolute; left:-99999px; font-size:0;}
tr + tr{border-bottom:1px solid #dedede;}
tr:last-child {border-bottom:0;}
th, td {font:500 14px 'spoqa han sans'; background: #fff; word-break: keep-all;}

/* .tb_wrap {position:relative !important; width:100%; margin:20px auto;}
.tb_wrap .tb_box {overflow: auto; border-bottom:1px solid #dedede;}
.tb_wrap .tb_box .slideBox {margin-top: 43px;}
.tb_wrap .tb_box .tb {border-collapse:collapse; border-spacing:0; width:100%;}
.tb_wrap .tb_box .tb th,
.tb_wrap .tb_box .tb td {text-align: center; padding:10px 8px;}
.tb_wrap .tb_box .tb .cell1 {width:20%;}
.tb_wrap .tb_box .tb .cell2 {width:30%;}
.tb_wrap .tb_box .tb .cell3 {width:25%;}
.tb_wrap .tb_box .tb .cell4 {width:25%;}
.tb_wrap .tb_box .tb .fixed_top {display:inline-table; position:absolute; top:0; left:0; width:100%;}
.tb_wrap .tb_box .tb .fixed_top th {color: #333; border-top: 1px solid #999 !important; border-bottom: 1px solid #ddd !important; background: #f5f5f5;}
.tb_wrap .tb_box .tb tr.end {color:#999;} */

/* responsive
@media screen and (max-width: 600px) {
    .tb_wrap {width:100%; overflow:hidden;}
    .tb_wrap .tb_box .tb {width:700px;}
    .tb_wrap .tb_box .tb .fixed_top {width:700px;}
    .tb_wrap .fixed_col {background:yellow;}
    .tb_wrap .cross {background:pink;}
}
 */

/* 스타일 수정_231124 */
.tb_wrap2 {position:relative !important; width:100%; margin:20px auto;       }
.tb_wrap2 .tb_box {border-bottom:1px solid #dedede; width:100%;  overflow: auto;     }
.tb_wrap2 .tb_box .slideBox {}
.tb_wrap2 .tb_box .tb {border-collapse:collapse; border-spacing:0; width:100%; min-width: 500px;}
.tb_wrap2 .tb_box .tb th,
.tb_wrap2 .tb_box .tb td {text-align: center; padding:10px 8px;}
.tb_wrap2 .tb_box .tb .cell1 {width:20%;}
.tb_wrap2 .tb_box .tb .cell2 {width:30%;}
.tb_wrap2 .tb_box .tb .cell3 {width:25%;}
.tb_wrap2 .tb_box .tb .cell4 {width:25%;}

.tb_wrap2 .tb_box .tb tr:first-of-type > * { border-top: 1px solid #999;  }
.tb_wrap2 .tb_box .tb tr.fixed_top > *{
    color: #333;  border-bottom: 1px solid #ddd !important;  background: #f5f5f5;
}
.tb_wrap2 .tb_box .tb tr th:first-of-type {
    position: -webkit-sticky;
    position: sticky;
    left:0;
    z-index: 5;	
}

.tb_wrap2 .tb_box .tb tr.end {color:#999;}

/* responsive */
@media screen and (max-width: 600px) {
    .tb_wrap2 {width:100%; overflow:hidden;}
    .tb_wrap2 .tb_box .tb{  }
	
	.tb_wrap2 .tb_box[data-ui-guide]:before {
		content: attr(data-ui-guide);
		position: -webkit-sticky;
		position: sticky;
		left:0;
		display: block;
		width: 100%;
		font-size: 12px;
		color: #666;

		padding-left: 1.3rem;
		background-image: url(../img/xi-svg-left-right.svg);
		background-repeat: no-repeat;
		background-position: left center;
		background-size: 1rem;

	}
    .tb_wrap2 .tb_box .tb .fixed_top {transform: none !important;}
    .tb_wrap2  { }
    .tb_wrap2 .cross {background:pink;}
}







/* find ID PW */
dl.find-result {margin-bottom:40px; padding:3em 0; border:1px solid #66a4c1; background:url(../img/find_ok.png) 10% 50% #f6f8fc no-repeat; background-size:10%;}
dl.find-result.inline {padding: 4em 1em; text-align: center;}
dl.find-result.inline dt, dl.find-result.inline dd {display: inline-block; margin: 0; font-size: 1.125em;}
dl.find-result dt {margin-left:30%; font-size:1.5em; color:#2e537c;}
dl.find-result dd {margin-left:30%; margin-top:10px; font-size:1.125em; color:#5099b8;}
.find-pw-result {margin-bottom:40px; padding:3em 1em; padding-left: 17%; border:1px solid #66a4c1; background:url(../img/find_pw_ok.png) 4% 50% #f6f8fc no-repeat; background-size:10%;}
.find-pw-result .ui.message {font-size: .91em;}

/* join */
.agree-box {display: flex; align-items: center; padding: 2em 0 1em 0;}
.agree-box .title {display: inline-block; font-size: 1.25em; font-weight: 500;}
.agree-box .title2 {display: inline-block; font-size: 1.1em; font-weight: 500;}
.agree-box .ui.checkbox {margin-left: auto;}
/*.join_box {width:100%; height:180px; font-size:1em; border:9px solid #eaebec; overflow-y:scroll;}
.join_box_val {padding:15px; line-height:170%;}*/
.reg-form {width: 768px; margin: 0 auto;}
.reg-result {margin-top: 2em; padding: 2em; text-align: center; border-top: 2px solid #333; border-bottom: 2px solid #ccc;}
.join_box textarea {height: 180px; font-size: 1em; border: 9px solid #eaebec; overflow-y: scroll;}
/* 추가_팝업내 약관동의 여백 수정_220809 */
.modal .agree-box { padding-top: 1em }

/* Login */
.login_form  {width:100%; padding:2% 10% !important; height: 90%; box-sizing:border-box; border-radius:0 !important; border:0 !important; border-top: 2px solid #333 !important; border-bottom: 2px solid #ccc !important;}
.login_form fieldset {width:90%; margin:15px auto ;}
.login_form .login_box:after {display:block; clear:both; content:''}
.login_form .login_inp {float: left; width: 72%;}
.login_form .login_inp.id {margin-top:0;}
.login_form .login_inp label {display: inline-block; color:#222; line-height:21px; width:95px; font-weight:500; vertical-align:middle;}
.login_form .login_inp .input_txt {display: inline-block; width: calc(100% - 100px); margin: 5px 0; vertical-align:middle;}
.login_form .login_inp .input_txt input {display:block; line-height:50px; box-sizing:border-box; width:100%; height:50px; padding:0 14px; color:#666; border:1px solid #d1d8db; background:#f8f6f5; font-size: 1em}
.login_form .login {float: right; font-size:1.25em; width:26%; height:110px; margin: 5px 0; border: none; color:#fff; background:#333;}
.login_form .login2 {float: right;  font-size:1.25em; width:80%; padding:10px 0; margin: 5px 0; border: none; color:#fff; background:#ff5a20;}
.login_form .btm_cont {margin:10px 0 0 0; text-align:right;}
.login_form .btm_cont .chk_wrap {margin-bottom:20px; font-size:0.933em !important;}
.login_form .btm_cont .link_area {border-top:1px solid #d1d8db; padding-top:20px;}
.login_form .btm_cont .link_area ul li {display: flex; align-items: center; margin-bottom:8px; overflow:hidden; font-size:0.933em;}
.login_form .btm_cont .link_area ul li span:last-child {margin-left: auto;}
a.btn_sns_naver {position: relative; min-width: calc(100% / 3 - 1.5em); background-color: #1ec700; color:#fff; /* border:1px solid #10a800; */ }
a.btn_sns_naver img {position: absolute; left:0; top:50%; margin-top: -18px;z-index: 0;}
a.btn_sns_naver span {/*! display: block; */ /*! padding-left: 30px; */}


/* 추가_임시_회원가입_220523  */
.joinin a { /*margin-bottom: 0em;*/ }
a.btn_sns_naver img{ display: none; }
a.btn_sns_naver{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon fill='%23ffffff' points='15,12.6 8.7,3.6 3.5,3.6 3.5,20.4 9,20.4 9,11.4 15.3,20.4 20.5,20.4 20.5,3.6 15,3.6 '/%3E%3C/svg%3E");
    background-size: auto 24px;
    background-repeat: no-repeat;
    background-position: .8em center;
}
a.btn_sns_naver,
a.btn_sns_kakao,
a.btn_sns_google{
    position: relative;
    width: auto;
    min-width: calc(100% / 3 - 1.5em);
    z-index: 1;
    padding-left: 2.5em;
}
a.btn_sns_naver span,
a.btn_sns_kakao span,
a.btn_sns_google span {display: inline-block; /*! padding-left: 1em; */}
a.btn_sns_kakao{ background: #fee500 ; color: #191919;  }
a.btn_sns_google{ background: #fff; color:#191919; box-shadow: 0 0 0px 1px #c1c1c1; /* border:1px solid #e5e5e5; */ }
a.btn_sns_kakao img,
a.btn_sns_google img{
    position: absolute;
    height: 24px; width: auto;
    top: 50%; left: .8em;
    transform: translateY(-50%);
}
@media(max-width: 1024px){
    .joinin a {   width: 100%;   }
}
/* 로그인 폼 임시 */
@media(max-width: 1024px){
    .login_form .wrap_btn.tc a{
        width: 100%;
        margin-bottom:  1em;

    }
}


/* 임시_회원가입 스타일 추가_220525 */
.ui[data-use="sns"]{
    flex-direction: column;
    width: auto;
    min-width: 37em;
    margin: auto;
}
.ui.form[data-use="sns"]{ flex: 0; }
.ui[data-use="sns"] a, .ui[data-use="sns"] button{ font-size: 1.066666em; padding: 1em 1.3em; margin-left: 0; margin-right: 0; }
.ui.grid.joinin[data-use="sns"]{
    margin-top: 1em;
    padding: 2em 3em 3em;
    border:1px solid #ddd;
    border-radius: 0.28571429rem;
}
.ui.grid.joinin[data-use="sns"] > div { width: 100% !important; text-align: center; }
.ui.grid.joinin[data-use="sns"] > div:not(.sns) h4.tit_comm{ font-size: 2.2em; }
[data-use="sns"] .sns .hr{
    position: relative;
    margin-top: 2em;
    margin-bottom: 4em;
     z-index: 0;
}
[data-use="sns"] .sns .hr:before{
    content: '';
    position: absolute;
    display: block;
    width:70%;
    height: 1px;
    background-color: #ddd;
    top: 50%;
    left: 15%;
    z-index: -1;
}
[data-use="sns"] .sns .hr span{
    background-color: #fff;
    padding: 0 1em;
}
[data-use="sns"] .ui.segment{
    position: relative;
    border:none;
    display: flex;
    flex-direction: column;
    min-height: 18em;
}
[data-use="sns"] .ui.segment .wrap_btn{ margin-top: auto; }
[data-use="sns"] .sns > .ui.segment{ min-height: auto; }
[data-use="sns"] .sns .wrap_btn{
    display: flex;
    justify-content:center;
    flex-wrap: wrap;
    padding: 0 2em;
}
[data-use="sns"] .sns a,
[data-use="sns"] .sns button{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    font-size: 1em;
    padding: .8em .5em;
    margin-right: 0.25em;
    margin-left: 0.25em;
    background-color: transparent;
}
[data-use="sns"] .sns .icon{
    display: inline-block;
    width: 4em;
    height: 4em;
    border-radius: 50%;
/*     border: 1px solid #ddd; */
    background-color: #fff;
    margin: 1em;
    background-size: auto 2em;
    background-repeat: no-repeat;
    background-position: center;
     overflow: hidden;
    color: transparent;
}

[data-use="sns"] .sns .sns_naver .icon{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon fill='%23ffffff' points='15,12.6 8.7,3.6 3.5,3.6 3.5,20.4 9,20.4 9,11.4 15.3,20.4 20.5,20.4 20.5,3.6 15,3.6 '/%3E%3C/svg%3E");
    background-color: #03C75A;
}
[data-use="sns"] .sns .sns_kakao .icon{
    background-image: url(../img/icon_sns_kakao.svg);
    background-color: #FFE600;
}
[data-use="sns"] .sns .sns_google .icon{
    background-image: url(../img/icon_google.svg);
    border: 1px solid #ddd;
}
[data-use="sns"] .sns .sns_naver:hover .icon{  background-color: #00B751;  }
[data-use="sns"] .sns .sns_kakao:hover .icon{   background-color: #F7DE01; }
[data-use="sns"] .sns .sns_google:hover .icon{
    border: 1px solid #4285f4;
    background-color: #4285f4;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns:sketch='http://www.bohemiancoding.com/sketch/ns' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='%23fff' sketch:type='MSShapeGroup' fill-rule='evenodd' clip-rule='evenodd' d='M20.3,12.1c0-0.6-0.1-1.3-0.2-1.8h-8.4v3.5h4.8c-0.2,1.1-0.8,2-1.8,2.7 v2.3h3C19.4,17.2,20.3,14.8,20.3,12.1L20.3,12.1z'/%3E%3Cpath fill='%23fff' sketch:type='MSShapeGroup' fill-rule='evenodd' clip-rule='evenodd' d='M12,20.7 c2.4,0,4.6-0.8,6.1-2.2L15,16.2c-0.8,0.5-1.8,0.9-3.1,0.9c-2.3,0-4.4-1.6-5.1-3.8H3.8v2.2C5.3,18.7,8.4,20.7,12,20.7L12,20.7z'/%3E%3Cpath fill='%23fff' sketch:type='MSShapeGroup' fill-rule='evenodd' clip-rule='evenodd' d='M7,13.7 c-0.2-0.5-0.3-1.1-0.3-1.7s0.1-1.2,0.3-1.7V8H4c-0.6,1.2-1,2.6-1,4s0.3,2.8,1,4L7,13.7L7,13.7z'/%3E%3Cpath fill='%23fff' sketch:type='MSShapeGroup' fill-rule='evenodd' clip-rule='evenodd' d='M12,6.6 c1.3,0,2.5,0.5,3.4,1.3L18,5.3C16.4,3.8,14.4,3,12,3C8.5,3,5.4,5,4,8l3,2.3C7.7,8.2,9.7,6.6,12,6.6L12,6.6z'/%3E%3Cpath fill='none' sketch:type='MSShapeGroup' fill-rule='evenodd' clip-rule='evenodd' d='M3,3h18v18H3V3z'   /%3E%3C/svg%3E");
}

/* a태그 초기화_임시 */
[data-use="sns"] .sns a{
    position: unset;
    width: auto;
    min-width: unset;
    z-index: 1;
    padding: unset;
    box-shadow:  none;
    background-color: transparent;
    color: #222;
}
[data-use="sns"] .sns a img{ display: none; }
[data-use="sns"] .sns a:before{
    content: '';
    display: inline-block;
    width: 4.8em;
    height: 4.8em;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #ddd;
    margin: 1em;
    background-size: auto 2em;
    background-repeat: no-repeat;
    background-position: center;
     overflow: hidden;
    color: transparent;
}
[data-use="sns"] .sns a.btn_sns_naver:before{
    background-image: url(../img/icon_naver.svg);
}
[data-use="sns"] .sns a.btn_sns_kakao:before{
    background-image: url(../img/icon_sns_kakao.svg);
}
[data-use="sns"] .sns a.btn_sns_google:beforen{
    background-image: url(../img/icon_google.svg);
}


/* 임시_로그인 스타일 추가_220525 */
.ui.form[data-use="sns"]{

}
[data-use="sns"] .login_form {
  height: auto;
  border: 1px solid #ddd !important;
  padding: 2em 3em 3em;
  margin-top: 0;
}
[data-use="sns"] .login_form .login_box{
    display: flex;
    flex-direction: column;
    justify-content:center;
}
[data-use="sns"] .login_form fieldset {  width: 100%; }
[data-use="sns"] .login_inp {
  float: none;
  width: 100%;

    display: flex;
    flex-direction: column;
}
[data-use="sns"] .login_inp label{ margin-top: 1em; }
[data-use="sns"] .login_inp input{ background-color: #fff !important; }
[data-use="sns"] .login_inp .input_txt {  width: 100%;}
[data-use="sns"] .login {
    float: none;

    font-size: 1.25em;
    width: 100%;
    height: auto;
    border: none;
    font-size: 1em;
    padding: 1em 1.3em;
    border: none;
    text-shadow: none;
    margin-top: 1em;
    background-color: #404ea1;
}
[data-use="sns"] .btm_cont {   text-align: center;}
[data-use="sns"] .btm_cont .chk_wrap{
    text-align: left;
margin-bottom: 0;
padding: 10px 0;
float: left;
}
[data-use="sns"] .btm_cont .link_area {
  border-top: 0;
  padding-top: 0;
  display: inline-block;
    float: right;

}
[data-use="sns"] .btm_cont .link_area ul { text-align: center; }
[data-use="sns"] .btm_cont .link_area ul li{     display: inline-block; }
[data-use="sns"] .btm_cont .link_area ul li span a{  padding-right: 0;  box-shadow: none; border: none;color: rgba(0, 0, 0, 0.8) !important;}
[data-use="sns"] .btm_cont .link_area ul li span a:hover{ box-shadow: none; color: rgba(0, 0, 0, 1) !important; }
[data-use="sns"] .btm_cont .link_area ul li span:first-of-type {   display: none; }
[data-use="sns"] .btm_cont .link_area ul li span:last-child {   margin-left: unset; }
.ui.form[data-use="sns"] .sns:before{
    content: '';
    clear: both;
    display: block;
}
@media(max-width: 768px){
    .ui[data-use="sns"]{ width: 100%; min-width:auto; }
    .ui.grid.joinin[data-use="sns"]{  /* padding: 2em 0 3em; */ }
    [data-use="sns"] .login_form, .ui.grid.joinin[data-use="sns"] {
         padding: 2em 0em 3em;
        border: none !important;
    }
    .ui.grid.joinin[data-use="sns"] > div{  padding-left: 0; padding-right: 0 }
    .ui.grid.joinin[data-use="sns"] > div > .ui.segment{  padding-left: 0; padding-right: 0 }
    [data-use="sns"] .sns .wrap_btn {  padding: 0 0em; }
}
@media(max-width: 414px){
    [data-use="sns"] .sns .icon{   width: 3em;  height: 3em; background-size: 50%; }
}

/* terms & privacy_policy */
.terms,
.privacy_policy,
.email_secutiry {padding: 1em; counter-reset:section;}
.terms .terms-btit,
.privacy_policy .privacy-btit {position:relative; margin-top:1em; font-size:1.5em; line-height:1.5;}
.terms .terms-tit,
.privacy_policy .privacy-tit,
.email_secutiry .email-tit {position:relative; margin-top:1em; font-size:1.15em; line-height:1.5;}
.terms p,
.privacy_policy p,
.email_secutiry p {margin-top:10px;}
.terms .terms-list,
.privacy_policy .privacy-list{counter-reset: li;}
.terms .terms-list li,
.privacy_policy .privacy-list li {line-height: 1.6}
.terms .terms-list > li:before,
.privacy_policy .privacy-list > li:before {display:inline-block; content: counter(li) '.';counter-increment: li; margin-right:5px;}
.terms .terms-list li .terms-list-num,
.privacy_policy .privacy-list li .privacy-list-num {margin-left:15px;}
.terms .terms-list li .terms-list-num,
.privacy_policy .privacy-list li .privacy-list-num {counter-reset: li;}
.terms .terms-list-num > li:before,
.privacy_policy .privacy-list-num > li:before {display:inline-block; content: counter(li); counter-increment: li; width:15px; height:15px; margin-right:5px; border:1px solid #555; border-radius:100%; font-size:12px; line-height:14px; text-align:center;}
.privacy_policy .privacy-list li .privacy-list-num {counter-reset: none;}
.privacy_policy .privacy-list-dot {margin-left:15px;}
.privacy_policy .privacy-list-dot li {line-height: 1.6}
.privacy_policy .privacy-list-dot > li:before {display:inline-block; content: counter(li, disc); counter-increment:none; margin-right:5px;}

/* error & service end - sub page */
.error_area {text-align: center; padding: 1em;}

/* service end */
.service_end_area {width:60%; height:auto; margin:0 auto; text-align:center; padding:3em 2em; background:#fff;}
.service_end_area h1 {font-weight:600; font-size:3.5em; color:#101010;}
.service_end_area h3 {margin-bottom:1em; font-weight:300; font-size:1.6em; color:#333;}
.service_end_area h5 {margin-bottom:1em; font-weight:300; font-size:1.25em; color:#333;}
.service_end_area img {margin-bottom:2em;}

/* 추가_박민희_시스템 일시 정지_210713  */
.fixedWidth{ max-width: 660px; width: 95%; }
@media all and (max-width:1024px){
    .fixedWidth{ font-size: 10px; background: #fff !important; }
}
.fixedWidth img{ display: block; margin: 4em auto; }
.tempPauseDate{ display: inline-block; text-align: left; padding-bottom: 2em; margin: 0 auto; }
.tempPauseDate p{ font-size: 1.5em; line-height: 1; padding:.5em 0 .3em; color: #222; }
.tempPauseDate p span{ font-size: .9em; font-weight: normal; color: #222; background: #eee; padding: .2em 1em; margin-right: 1em; border-radius: 5em; }

/* 온라인 강의 online-list - sub page */
.online-listBox {display: flex; align-items: center; margin-bottom: 1.5em !important;}
.online-listBox .ui.ribbon.label {position: absolute; top: 1em; left: calc( 1em - 2em - 3px ); z-index: 9;}
.online-listBox .title-cover {min-width: 180px;}
.online-listBox dl.conText {flex: 1; padding: 0 1em; width: calc( 100% - 300px); }
.online-listBox dl.conText dt {padding-bottom: .5em;  width: 100%; }
.online-listBox dl.conText dt a {  display: block; width: 100%; font-size: 1.25em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
.online-listBox dl.conText dt a label {margin-right: 5px !important; vertical-align: middle;}
.online-listBox dl.conText dd {float: left; width: 50%; padding: 5px 0;}
.online-listBox dl.conText dd:last-child {width: 100%;}
.online-listBox dl.conText dd label {display: inline-block; margin-right: 10px; color: #999;}
.online-listBox .edu-button {width: 120px; margin-left: auto;}
.online-listBox .edu-button .ui.button {width: 100%; margin-bottom: 3px; line-height: inherit;}
.online-listBox .edu-button .ui.button:last-child {margin-bottom: 0;}
.online-listBox .ui.card .content.bottom-button {display: flex; flex-direction: row; padding: 0 !important; overflow: hidden;}
.online-listBox .ui.card .content.bottom-button a {display: block; margin: 0 !important; padding: .75em 1em; flex: 1; flex-basis: auto; border-radius: 0;}
.online-listBox .ui.card .ui.form .field {width: auto !important; font-size: .875em;}

/* JSHyun 2021.08.06 : custom.css의 수강료 할인 관련 스타일 온라인 강의 리스트 및 상세보기에 적용  */
.course-price { }
.course-price p{ position: relative; display: inline-block;}
.course-price p:nth-child(1) { padding-right: .5em; }
.course-price .ori, .course-price .discount-span{
  position: relative;
  display: inline-block;
  color: #333;
}
.course-price .discount-span{ padding-left: .7em; }
.course-price .price .ori{ color: #777; }
.course-price .price .ori:before{
  content: '';
  position: absolute;
  width: 109%;
  height: 1px;
  top:50%;
  left: 0;
  background: #f00;
}
.course-price .price .ori:after{
  content: '';
  position: absolute;
  width: 5px;
  height: 1px;
  top:calc(50% - 1px );
  left: calc(109% - 5px );
  transform: rotate(35deg);
  background: #f00;
}



/* 화상 강의 online-list - sub page */
.online-listBox .ui.card .extra.content {display: flex; flex-direction: column; position: relative; height: 140px;}
.online-listBox .ui.card .content .header {font-weight: 500;}
.online-listBox .ui.card .extra.content .ui.button {position: absolute; bottom: 0; left: 0; right: 0; margin-bottom: 0;}
.online-listBox .ui.card .extra.content .ui.label {position: absolute; right: .5em; top: 1em;}

.online-listBox .ui.card .ui.form .field {width: auto !important; margin-bottom: .25em; font-size: 1em; color:#333;}
.online-listBox .ui.card .ui.form .field label {float: left; width: 60px !important; font-size: .875em; color:rgba(0, 0, 0, 0.7)}
.online-listBox .ui.card .raised_box {position: absolute; top:0; right: 0; bottom: 0; left: 0; margin: 0; box-shadow: none; background: transparent; z-index: 10;}
.online-listBox .ui.card .raised_box .close {color:#fff; z-index: 110; opacity: 0.9;}
.online-listBox .ui.card .raised_box .raised_black {position: absolute; top:0; right: 0; bottom: 0; left: 0; z-index: 10; background: rgba(0, 0, 0, 0.7);}
.online-listBox .ui.card .raised_box .raised_cont {position: absolute; top:0; right: 0; bottom: 0; left: 0; z-index: 11; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.online-listBox .ui.card .raised_box .raised_cont ul {margin-top: -15px;}
.online-listBox .ui.card .raised_box .raised_cont ul li {padding: .5em 0; color: #fff;}
.online-listBox .ui.card .raised_box .raised_cont ul li span.tit {display: inline-block; float: left; width:95px; }


/* 온라인 강의 online-detail - sub page */
.online-detailBox {}
.online-detailBox .top-area {display: flex;}
.online-detailBox .top-area .title-cover {min-width: 340px;}
.online-detailBox .top-area .conText {flex: 1 1 auto; padding-left: 2em;}
.online-detailBox .textbook-area {display: flex;}
.online-detailBox .textbook-area .title-cover {min-width: 140px;}
.online-detailBox .textbook-area .conText {flex: 1 1 auto; padding-left: 2em;}
.online-detailBox .textbook-area .conText .field {display: flex;}
.online-detailBox .textbook-area .conText .field label {width: 20%;}
.online-detailBox .textbook-area .conText .field span {flex: 1 1 auto;}
.online-detailBox .wrap_btn {display: flex;}
.online-detailBox .wrap_btn a {flex: 1 1 auto;}
.online-detailBox .tab-box {padding-top: 2em;}

/* 상품몰 goods-list - sub page */
.goods-listBox {display: flex; align-items: center;}
.goods-listBox .ui.ribbon.label {position: absolute; top: 1em; left: calc( 1em - 2em - 3px ); z-index: 9;}
.goods-listBox .title-cover {min-width: 180px;}
.goods-listBox .title-cover .wide-img {padding-top:100%;}
.goods-listBox .title-cover img {width:125px; height:175px; border:1px solid #e1e1e1}
.goods-listBox dl.conText:after {content: ""; display: block; clear: both}
.goods-listBox dl.conText {flex: 1 1 auto; padding: 0 1em;}
.goods-listBox dl.conText.wd80per {width:80%;}
.goods-listBox dl.conText dt {padding-bottom: .5em;}
.goods-listBox dl.conText dt a {font-size: 1.25em;}
.goods-listBox dl.conText dt a label {margin-right: 5px !important; vertical-align: middle;}
.goods-listBox dl.conText dd {float: left; padding: 5px 0; margin-right:10px;}
.goods-listBox dl.conText dd:last-child {width: 100%;}
.goods-listBox dl.conText dd.width_full {width:100%;}
.goods-listBox dl.conText dd label {display: inline-block; margin-right: 3px; color: #999;}
.goods-listBox dl.conText dd .right {display: inline-block; margin-right: 10px;}
.goods-listBox dl.conText dd .right.sm_star .jq-star {width:20px !important; height: 20px !important;}
.goods-listBox dl.conText dd .price {margin-left:10px; font-weight: 600;}
.goods-listBox .edu-button {width: 120px; margin-left: auto;}
.goods-listBox .edu-button .ui.button {width: 100%; margin-bottom: 3px;}
.goods-listBox .edu-button .ui.button:last-child {margin-bottom: 0;}
.goods-listBox .ui.card .content.bottom-button {display: flex; flex-direction: row; padding: 0 !important; overflow: hidden;}
.goods-listBox .ui.card .content.bottom-button a {display: block; margin: 0 !important; padding: .75em 1em; flex: 1; flex-basis: auto; border-radius: 0;}
.goods-listBox .ui.card .ui.form .field {width: auto !important; font-size: .875em;}

.goods-detailBox .top-area {display: flex;}
.goods-detailBox .top-area .title-cover {min-width: 340px;}
.goods-detailBox .top-area .title-cover .view-img {}
.goods-detailBox .top-area .title-cover .view-img img {}
.goods-detailBox .top-area .title-cover .lst_thmb {display: flex; justify-content:center;}
.goods-detailBox .top-area .title-cover .lst_thmb a {display: inline-block; margin:.5em;}
.goods-detailBox .top-area .title-cover .lst_thmb a img {width: 80px; height: 80px; border:1px solid #dcdcdc;}
.goods-detailBox .top-area .conText {flex: 1 1 auto; padding-left: 2em;}

/* 강의상세 결제금액 또는 장바구니 총 결제 금액 영역 영역 */
.total_box {margin-top: 2em; border:1px solid #333}
.total_box > ul {display:table; table-layout:fixed; width:100%;}
.total_box > ul > li {position:relative; display:table-cell; width:33.3%; padding:30px 30px 10px 30px; vertical-align:top;}
.total_box > ul > li:before {position:absolute; top:24px; left:-16px;}
.total_box > ul > li.icon_none {position:relative; display:table-cell; width:100%; padding:20px 30px 5px 30px; vertical-align:top;}
.total_box > ul > li.icon_none:before {display: none}
.total_box > ul > li ~ li {border-left:1px solid #e5e5e5;}
.total_box > ul > li.total {background-color:#f3f3f3;}
.total_box > ul > li dl:after {content:''; display:block; clear:both;}
.total_box > ul > li dl dt {float:left; width:50%; font-size:1.125em; color:#333;}
.total_box > ul > li dl dd {position:relative; top:-4px; float:left; width:50%; text-align:right; font-size:1.5em; color:#333;}
.total_box > ul > li.total dd {top:-8px; color:#c51315; font-size: 1.75em; font-weight: 500;}
.total_box > ul > li .dot_list {margin:15px -30px 5px -30px; padding:10px 30px 0 30px; border-top:1px solid #e5e5e5;}
.total_box > ul > li .dot_list li {display: flex; max-width: 100%; padding-left: 8px; font-size:13px; color:#666; background: url(../img/icon_dot.gif) 0 50% no-repeat;}
.total_box > ul > li .dot_list li span {margin-left: auto; padding-left: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.total_box > ul > li:before {content: ''; font-family: "Ionicons"; border-radius: 100%; background: url(../img/total_ico.png) no-repeat;}
.total_box > ul > li.minus:before {width: 32px; height: 32px; background-position: -32px 0;}
.total_box > ul > li.total:before {width: 32px; height: 32px; background-position: -64px 0;}

/* 강의 목록 리스트 */
.cbp_tmtimeline {padding: 1em 2em; list-style: none; position: relative; background: #f7f7f7; border-bottom: 1px solid #ddd;}
.cbp_tmtimeline > li {position: relative;}
.cbp_tmtimeline > li:before {content: ''; position: absolute; top: 32px; bottom: 0; width: 3px; height: 100%; background: #ddd; left: 12px; margin-left: -1.5px;}
.cbp_tmtimeline > li:last-child:before {display: none;}
.cbp_tmtimeline > li .cbp_tmtime {display: block; width: 25%; padding-right: 100px; position: absolute;}
.cbp_tmtimeline > li .cbp_tmtime span {display: block; margin: 5px 0; line-height: 120%; text-align: right;}
.cbp_tmtimeline > li .cbp_tmtime span:first-child {font-size: 0.9em; color: #6b758d;}
.cbp_tmtimeline > li .cbp_tmtime span:last-child {font-size: 1.5em; font-weight: 500; color: #333;}
.cbp_tmtimeline > li .cbp_tmlabel {display: flex; position: relative; width: 100%; align-items: center; padding: .75em 1em}/* border: 1px solid #d7d7d7; */
/*.cbp_tmtimeline > li .cbp_tmlabel:after {right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-right-color: #d7d7d7; border-width: 8px; top: 10px;}*/
.cbp_tmtimeline > li .cbp_tmicon {width: 24px; height: 24px; font-weight: 500; font-size: 18px; line-height: 24px; -webkit-font-smoothing: antialiased; position: absolute; background: #fff; border-radius: 50%; text-align: center; left: 0; margin: 7px 0 0 0; box-shadow: 0 0 0 3px #ccc;}
.cbp_tmtimeline > li .cbp_tmicon span {font-family: 'Century Gothic'; font-size: 14px; color: #6b758d; vertical-align: bottom;}
.cbp_tmtimeline > li .cbp_box {display: flex; margin: 0 0 5px 46px; background: #fff;}
.cbp_tmtimeline > li .cbp_tmlabel .cont {flex: 1 1 auto; /* padding: .75em 1em; */ }
.cbp_tmtimeline > li .cbp_tmlabel .cont .header {font-size: 1em; color: #333;}
.cbp_tmtimeline > li .cbp_tmlabel .cont ul.viewInfo {}
.cbp_tmtimeline > li .cbp_tmlabel .cont ul.viewInfo li {display:inline-block; padding-left:10px; font-size: .875em; color: #333;}
.cbp_tmtimeline > li .cbp_tmlabel .cont ul.viewInfo li:before {content:""; display:inline-block; width:1px; height:12px; margin-right:10px; vertical-align:middle; background-color:#c3c3c3;}
.cbp_tmtimeline > li .cbp_tmlabel .cont ul.viewInfo li:first-child {padding-left:0;}
.cbp_tmtimeline > li .cbp_tmlabel .cont ul.viewInfo li:first-child:before {display:none;}
.cbp_tmtimeline > li .cbp_tmlabel .cont ul.viewInfo li span {margin-right:10px; color:#acacac; vertical-align: inherit;}
.cbp_tmtimeline > li .cbp_tmlabel .right-btn {
    display: flex; align-items: center; justify-content: center;
    min-width: 100px; /*! height: 70%; */
    padding: 4px ; margin: 0 .25em; 
	flex-basis: 10%;
    color: #0154a4; border: 2px solid rgba(1, 84, 164, .5); border-radius: 7px;
    font-weight: 500;
}
.cbp_tmtimeline > li .cbp_tmlabel .right-btn:hover,
.cbp_tmtimeline > li .cbp_tmlabel .right-btn:active,
.cbp_tmtimeline > li .cbp_tmlabel .right-btn:focus { border: 2px solid rgba(1, 84, 164, 1);}
.cbp_tmtimeline > li .cbp_tmlabel .time {margin-left: auto; margin-right: 1em;}
.cbp_tmtimeline > li .cbp_tmlabel .time:before {content: '\f35a'; margin-right: 5px; font-family: "Ionicons"; font-size: 1.5em; font-weight: 500; vertical-align: middle;}
.prog-not .cbp_tmicon {box-shadow: 0 0 0 3px #c5cae9;}
.prog-go .cbp_tmicon {box-shadow: 0 0 0 3px #05abfc !important;}
.prog-comp .cbp_tmicon {box-shadow: 0 0 0 3px #05abfc !important; background: #05abfc !important;}
.prog-incomp .cbp_tmicon {box-shadow: 0 0 0 3px #ed5353 !important; background: #ed5353 !important;}
.prog-not .cbp_tmicon:after {}
.prog-go .cbp_tmicon:after {content: '\f3a8'; font-family: "Ionicons"; color: #05abfc;}
.prog-comp .cbp_tmicon:after {content: '\f383'; font-family: "Ionicons"; color: #fff;}
/*.prog-comp:before, prog-go:before {background: #404ea1 !important;}*/
.prog-incomp .cbp_tmicon:after {content: '\f209'; font-family: "Ionicons"; color: #fff;}
/*.prog-incomp:before {background: #e57373 !important;}*/


/*  맞춤과정 custmize Edu - sub page */
.online-custmize .info_progress {margin-bottom:10px; padding: 5px 5px 0 5px; background: #f7f7f7;}
.online-custmize .info_progress .progress-state {padding: 1em 0; overflow: hidden;}
.online-custmize .info_progress .progress-state li {float: left; height: 30px;  font-size: 1em; margin-right:1em; }
.online-custmize .info_progress .progress-state  li label {display: inline-block; width: 24px; height: 24px; margin: 0 10px; font-weight: 500; font-size: 18px; line-height: 24px; background: #fff; border-radius: 50%; text-align: center; box-shadow: 0 0 0 3px #c5cae9; vertical-align: middle;}
.online-custmize .info_progress .progress-state li label.prog-not {box-shadow: 0 0 0 3px #ccc;}
.online-custmize .info_progress .progress-state li label.prog-go {box-shadow: 0 0 0 3px #05abfc !important;}
.online-custmize .info_progress .progress-state li label.prog-comp {box-shadow: 0 0 0 3px #05abfc !important; background: #05abfc !important;}
.online-custmize .info_progress .progress-state li label.prog-incomp {box-shadow: 0 0 0 3px #ed5353 !important; background: #ed5353 !important;}
.online-custmize .info_progress .progress-state li label.prog-not:after {}
.online-custmize .info_progress .progress-state li label.prog-go:after {content: '\f3a8'; font-family: "Ionicons"; color: #05abfc;}
.online-custmize .info_progress .progress-state li label.prog-comp:before {content: '\f383'; font-family: "Ionicons"; color: #fff;}
.online-custmize .info_progress .progress-state li label.prog-incomp:before {content: '\f209'; font-family: "Ionicons"; color: #fff;}

.online-custmize > .cbp_tmtimeline {padding: 0; background: none;}
.online-custmize > .cbp_tmtimeline:before {content: ''; position: absolute; top: 32px; bottom: 0; width: 3px; height: 100%; background: #c5cae9; left: 12px; margin-left: -1.5px;}
.online-custmize > .cbp_tmtimeline:last-child:before {display: none;}
.online-custmize > .cbp_tmtimeline > li .cbp_box { flex-direction: column;}
.online-custmize > .cbp_tmtimeline > li .cbp_box {background: #f9f9f9; border:1px solid #d7d7d7;}
.online-custmize > .cbp_tmtimeline > li .cbp_box .online-listBox {display: flex; flex: 1 1 auto; margin:0; border:0;}
.online-custmize > .cbp_tmtimeline > li .cbp_tmlabel {display: flex; flex-direction: column; border:0;}
.online-custmize > .cbp_tmtimeline > li .cbp_tmlabel .msg {width: inherit; padding:15px; font-weight: 500; font-size: 1.125em}
.online-custmize > .cbp_tmtimeline > li .cbp_tmlabel .msg .msg_num {float: right;}
.online-custmize > .cbp_tmtimeline > li .cbp_tmlabel .msg .btn_open_list {display: inline-block; margin-left: 1em;}
.online-custmize > .cbp_tmtimeline > li ul.cus_list {background: #eee;}
.online-custmize > .cbp_tmtimeline > li .cbp_tmlabel dl.conText dd.wd100per {display: block; width:100%;}
.online-custmize > .cbp_tmtimeline > li .cbp_tmlabel dl.conText dd.wd100per .dropdown {max-width: 250px}

.online-custmize > .cbp_tmtimeline > li .total_n_pay > .tt_box {text-align: right; margin-bottom: 10px; padding:.75em 1em; background: #d7d7d7;}
.online-custmize > .cbp_tmtimeline > li .total_n_pay > .tt_box > .txt {font-size: 1.125em; color: #333}
.online-custmize > .cbp_tmtimeline > li .total_n_pay > .tt_box > .total_sum {font-size: 1.125em; }
.online-custmize > .cbp_tmtimeline > li .total_n_pay > .tt_box > .total_sum .red {font-weight: 600; font-size: 1.25em; color:#f00;}
.online-custmize > .cbp_tmtimeline > li .total_n_pay > .wrap_btn {width:100%; margin-top:10px;}
.online-custmize > .cbp_tmtimeline > li .total_n_pay > .wrap_btn a {margin:0;}
.online-custmize > .cbp_tmtimeline > li .cbp_tmlabel {flex-direction:row;}
.online-listBox dl.conText:after {content: ""; display: block; clear: both;}
.online-listBox dl.conText {flex: 1 1 0;}

/* 강의 상세페이지 목록영역 */
.curriculum-box .header ul.progress-state {padding: .2em 0 1em; overflow: hidden;display: flex;flex-direction: row;justify-content: right;}
.curriculum-box .header ul li {float: left; font-size: .875em;}
.curriculum-box .header ul li label {display: inline-block; width: 1.3em; height: 1.3em; margin: 0 10px; font-weight: 500;  line-height: 1.3em; background: #fff; border-radius: 50%; text-align: center; box-shadow: 0 0 0 2px #c5cae9; vertical-align: middle;}
.curriculum-box .header ul li label:after{ font-size: 1em;}
.curriculum-box .header ul li label.prog-not {box-shadow: 0 0 0 2px #ccc;}
.curriculum-box .header ul li label.prog-go {box-shadow: 0 0 0 2px #05abfc !important;}
.curriculum-box .header ul li label.prog-go:after{ content: '\f3a8'; font-family: "Ionicons"; color: #05abfc; }
.curriculum-box .header ul li label.prog-comp {box-shadow: 0 0 0 3px #05abfc !important; background: #05abfc !important;}
/*.curriculum-box .header ul li label.prog-incomp {box-shadow: 0 0 0 3px #e57373 !important; background: #e57373 !important;}*/
.curriculum-box .header ul li label.prog-not:after {}
/*.curriculum-box .header ul li label.prog-go:after {content: '\f3a8'; font-family: "Ionicons"; color: #404ea1;}*/
.curriculum-box .header ul li label.prog-comp:before {content: '\f383'; font-family: "Ionicons"; color: #fff;}
.curriculum-box .header ul li label.prog-incomp:before {content: '\f209'; font-family: "Ionicons"; color: #fff;}
.curriculum-box .lecturer {padding: .75em 1.5em; color: #202020; background: #e0e0e0; font-weight: 500; font-size: 1.063em;}
.curriculum-box .chapter {padding: .75em 1.5em; font-size: 1.063em; color: #333; background: #f7f7f7; border-bottom: 1px solid #ddd;}
.curriculum-box .chapter i {margin-right: 10px;}

/* 추가_강의전체보기-목차보기 버튼_211108 _220616 */
.curriculum-box {
  margin-top: 2em;
}
.curriculum-box > .header {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /*! */
    margin: 1em 0;
    border-bottom: 1px solid rgba(34, 36, 38, 0.15);
    gap: 1rem;
    flex-wrap: wrap;
}
.curriculum-box > .header .home-tit{ border-bottom: 0;  }
.curriculum-box > .header
.curriculum-box > .header section{
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
/* 버튼 설정 수정_240521  */
.curriculum-box > .header section a{
  display: inline-block;
  line-height: 1.21428571em;
  padding: 0.59571429em 0.78571429em;
  border-radius: 5px;
  border: 2px solid rgba(1, 84, 164, .5); 
  color: #0154a4;
  margin: 2px 2px;
  font-size: 90%;
}
.curriculum-box > .header section a:hover{
  border: 2px solid rgba(1, 84, 164, 1); 
  color: #0154a4;
}
.curriculum-box > .header section a.now{
  background-color: #0154a4; 
  border: 2px solid rgba(1, 84, 164, 1);
  color: #fff;
}
.curriculum-box > .header ul.progress-state {
  display: flex;
  flex-direction: row;
  justify-content: right;  
  overflow: hidden;
}
.curriculum-box > .header .ui.selection.dropdown{ 
	word-wrap: anywhere;
	font-size: 90%;
   /* margin-bottom: 1em; */
}
@media(max-width: 768px){
    .curriculum-box > .header{ flex-direction: column; border-bottom: 0; }
    .curriculum-box > .header .home-tit{ border-bottom: 1px solid rgba(34, 36, 38, 0.15);  }
    .curriculum-box > .header ul.progress-state{}
}


/* 수강생 후기 */
.header-conversion {}
.header-conversion .list:first-child .title {border-top: none;}
.header-conversion .title {position: relative; padding-right: 40px !important;}
.header-conversion .title .dropdown.icon {position: absolute; top: calc(50% - 6px); right: 10px; transform: rotate(180deg);}
.header-conversion .title-header {margin-bottom: 4px;}
.header-conversion .title-header section {display: flex; max-width: 100%; padding-bottom: 5px; font-size: 1.125em; color: #333;}
.header-conversion .title-header section p {display: inline-block; width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.header-conversion .title-header section .right {margin-left: auto;}
.header-conversion .title-header .author {margin-right: 10px; color: #999;}
.header-conversion .title-header .author small {margin-right: 10px;}
.header-conversion .title-header ul.viewInfo {}
.header-conversion .title-header ul.viewInfo li {display:inline-block; padding-left:10px; font-size: .875em; color: #333;}
.header-conversion .title-header ul.viewInfo li:before {content:""; display:inline-block; width:1px; height:12px; margin-right:10px; vertical-align:middle; background-color:#c3c3c3;}
.header-conversion .title-header ul.viewInfo li:first-child {padding-left:0;}
.header-conversion .title-header ul.viewInfo li:first-child:before {display:none;}
.header-conversion .title-header ul.viewInfo li span {margin-right:10px; color:#acacac; vertical-align: inherit;}

/* 자주하는 질문 및 쿠폰등록 팝업 검색영역 Search */
.search_area {position:relative; margin-bottom:2em; padding: 1em 0; text-align: center; background: #f4f4f4;}
.search_input {display: inline-block; position:relative; width:60%; height: 48px; line-height: 48px; text-align:left; border:1px solid #cdcdcd; padding-left: 0.8em; vertical-align:middle; overflow:hidden; background: #fff;}
.search_input input {border:0; width: 100%; height: 48px; line-height: 48px; color: #747474; font-size: .938em;}
.search_area .btn_search {display:inline-block; width:100px; height:48px; text-align:center; font-size:1.125em; color: #fff; vertical-align: middle; border:0; background: #17a6bb;}
.search_area .btn_search i {margin-right: 5px; font-size: 1.5em; vertical-align: middle;}

/*  search result header  */
.search_result_header {display: inline-block; margin: calc(1rem - 0.14285714em ) 0em 1rem; padding: 1em 1em; line-height: 1.28571429em; background: #f7f7f7; border:1px solid #eee; border-radius: 0.28571429rem; text-transform: none; font-size: 1.28571429em; color: rgba(0, 0, 0, 0.87);}

/* Tab */
.global_tab:after {height: 0;}
.global_tab a {border-right: 1px solid #ddd; background: #f0f0f0;}
.global_tab a:last-child {border-right: 0;}
.global_tab a.on {background: #999; color: #fff; border-bottom: 0;}

/* 나의 강의실 - 현재 수강과정 */
.dash-box .header {display: flex !important; flex-direction: row; margin-top: 0 !important; font-size: 1em !important;}
.dash-box .header span {flex: 1; flex-basis: auto;}
.dash-box .header small {text-align: right; justify-content: flex-end; color: #ccc;}
.dash-box .description {display: flex; text-align: center; flex-direction: column; height: 100%; margin-top: 0 !important;}
.dash-box .description .count {margin: auto; font-family: "Helvetica Neue", Arial, sans-serif !important;}
.dash-box .huge-text {font-size: 4em !important; font-weight: 500 !important; color: #1e88e5 !important;}
.dash-box ul.lecture-sch {display: flex; align-items: center; width: 80%; margin: auto; overflow: hidden;}
.dash-box ul.lecture-sch li {flex: 1 1 auto; display: inline-grid; flex-direction: column; height: 100%; font-size: 2.5em; color: #1e88e5; font-family: "Helvetica Neue", Arial, sans-serif !important;}
.dash-box ul.lecture-sch li span {display: block; font-size: 14px; color: #ccc;}
.dash-box ul.lecture-sch li small {display: block; font-size: .438em;}
.dash-box ul.lecture-sch li small i {margin-right: 5px;}
.dash-box ul.lecture-sch li .pesentage {margin: 10px auto; font-size: .625em;}
.dash-box .section {display: flex; flex-direction: column; flex-grow: 1;}
.dash-box .section .scrollbox {text-align: left; color: #fff;}
.dash-box .extra {color: rgba(0, 0, 0, .4);}
.dash-box .summary {display: flex; align-items: center; flex: 1 1 auto; font-size: 1.25em; text-align: center;}
.dash-box .summary span {padding: 0 2em; flex: 1 1 auto;}
.dash-box .absence {text-align: center;}
.dash-box .absence small {flex: 1 1 auto; display: inline-block; margin-top: 1em; padding-bottom: 5px; color: rgba(0, 0, 0, 1);}
.dash-box .absence .remain {display: inline-block; font-size: 1.125em;}
.dash-box.ui.card .content.bottom-button {display: flex; flex-direction: row; flex-grow: 0; padding: 0 !important;}
.dash-box.ui.card .content.bottom-button a {display: block; padding: .75em 1em; flex: 1; flex-basis: auto; color: #039be5; text-align: center; border-right: 1px solid rgba(34, 36, 38, 0.1);}
.dash-box.ui.card .content.bottom-button a:last-child {border-right: none !important;}
.dash-box.ui.card .content.bottom-button i {margin: 0;}
.dash-box.ui.card .content.bottom-button .fn-normal {flex: none;}
.dash-box.ui.card .content.bottom-button .fn-red {flex: none; color: #f1584c;}
.dash-box.ui.card.fab-field {align-items: center; justify-content: center; font-size: 1.25em; color: #999; border: 2px dashed #ccc; border-radius: 4px; box-shadow: none; background: rgba(0, 0, 0, .05);}
.dash-box.ui.card.fab-field i {margin-right: 10px; font-size: 1.75em;}

.state * {font-weight: 500; color: rgba(0, 0, 0, .7) !important;}
.state.progress {background: #2196f3 !important;}
.state.complete {background: #4caf50 !important;}
.state.deadline {background: #607d8b !important;}
.state.defer {background: rgb(33,150,243) !important; background: linear-gradient(135deg, rgba(33,150,243,1) 0%, rgba(33,150,243,1) 50%, rgba(96,125,139,1) 50%, rgba(96,125,139,1) 100%) !important;}
.state .header small {font-size: 1.375em;}

/* 나의 강의실 카드 헤더 부분_ 수정 220802 */
.dash-box.ui.card > .content.state {
  padding: 0 !important;
  overflow: hidden;
}
.dash-box.ui.card > .content.state a{
    position: relative;
    display: block;
    width: 100%;
    padding: 1em;
    background: #fff;
    line-height: 1.6;
    font-weight: 600;
}
.dash-box.ui.card > .content.state a .label{ padding: 4px 8px; }
.dash-box.ui.card > .content.state a .title{  display: flex; gap: 1em }
.dash-box.ui.card > .content.state a .title:after{
    content: "\f105";
    font-family: Icons;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    line-height: 1.7em;

    flex-shrink: 0;

    display: block;
    width: 1.7em;
    height: 1.7em;
    margin-left: auto;
    background-color: #f5f5f5;
    border-radius: 50%;

}
.dash-box.ui.card > .content.state a:hover .title:after{ color: #fff; background-color: #009be5; } /* #104057 */
.dash-box.ui.card .section .meta{ margin-top: 8px}
.dash-box.ui.card .section .process-bar{ overflow: hidden ;}
.dash-box.ui.card .section .process-bar li{
    position: relative;
    display: flex;
    justify-content: center;
}
.dash-box.ui.card .section .process-bar li::before{
    content: ' ';   
    display: block;
    width: 100%;
    padding-left: 1.5em;

}
.dash-box.ui.card .section .process-bar li::after{
    content: ' ';   
    display: block;
    width: calc(100% + 1.5em);
}



/* 장바구니 페이지 쿠폰 조회 모달팝업 쿠폰 */
.state-bar {height: 100%; cursor: pointer; overflow: hidden;}
.state-bar > .content:before {position: absolute; top: 0; left: 0; width: 23px; height: 100%; content: '';}
.state-bar > .content.progress:before {background: #2196f3 !important;}
.state-bar > .content.complete:before {background: #4caf50 !important;}
.state-bar > .content.deadline:before {background: #607d8b !important;}
.state-bar > .content .header {font-size: 1.75em !important; font-weight: 600; text-align: right;}
.state-bar > .content .header label {margin-right: 10px; font-weight: 400;}
.state-bar > .content .description {text-align: right;}
.state-bar > .content small {display: block; text-align: right; font-weight: 500; color: #222;}
.state-bar input[type=radio] {display: none;}
.state-bar.active {box-shadow: 0px 1px 3px 0px #bdd0e0, 0px 0px 0px 1px #bdd0e0 !important; background: #f4f8fc !important;}
.state-bar.active > .content:before {padding-left: 3px; font-family: "Ionicons"; font-size: 3em; color: #fff; content: '\f3fd';}
.rating-num {margin-left: 5px; font-size: 100%; color: #333;}

/* 장바구니 절차 */
.step-wrap {width: 100%; padding-bottom: 4em; text-align: center;}
.step-wrap .progressbar {width: 70%; display: inline-block;}
.step-wrap .progressbar li {width: 33.33%; float: left; position: relative; color: #7d7d7d;}
.step-wrap .progressbar li:before {width: 60px; height: 60px; content: ''; font-family: "Ionicons"; font-size: 28px; color: #7d7d7d; line-height: 54px; border: 3px solid #7d7d7d; display: block; margin: 0 auto 5px auto; border-radius: 50%; position: relative; z-index: 2; background-color: #fff;}
.step-wrap .progressbar li:after {width: 100%;  height: 3px;  content: '';  position: absolute;  background-color: #7d7d7d;  top: 30px;  left: -50%;  z-index: 0;}
.step-wrap .progressbar li:first-child:after {content: none;}
.step-wrap .progressbar li.active {color: #404ea1;}
.step-wrap .progressbar li.active:before {color: #fff; border-color: #a7bbe0; background: #404ea1;}
.step-wrap .progressbar li.active + li:after {background-color: #a7bbe0;}
.step-wrap .progressbar li:nth-child(1):before {content: '\f110';}
.step-wrap .progressbar li:nth-child(2):before {content: '\f119';}
.step-wrap .progressbar li:nth-child(3):before {content: '\f127';}
.step-wrap .progressbar li span {margin-left: 10px; font-weight: 500;}

/* 결제완료 및 회원탈퇴 */
.pay-complete {background-color: #6c7bee; width: 560px; margin: 0 auto; margin-top: 40px; padding: 40px;}
.pay-complete .card {background-color: #fff; width: 100%; margin-top: 40px; border-radius: 5px; box-sizing: border-box; padding: 80px 30px 25px 30px; text-align: center; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}
.pay-complete .card-success {position: absolute; top: -50px; left: calc(50% - 50px); width: 100px; height: 100px; border-radius: 100%; background-color: #60c878; border: 5px solid #fff;}
.pay-complete .card-success i {
	color: #fff; line-height: 90px; font-size: 45px;

	display: inline-block;  /* 추가_240418 */
    transform: translateY(50%); /* 추가_240418 */
}
.pay-complete .card-fail {position: absolute; top: -50px; left: calc(50% - 50px); width: 100px; height: 100px; border-radius: 100%; background-color: #ed5353; border: 5px solid #fff;}
.pay-complete .card-fail i { color: #fff; line-height: 90px; font-size: 45px; }
.pay-complete .card-msg {text-transform: uppercase; color: #55585b; font-size: 1.25em; font-weight: 500; margin-bottom: 5px;}
.pay-complete .card-submsg {color: #959a9e; font-size: 1em; font-weight: 400; margin-top: 0px;}
.pay-complete .card-body {background-color: #f8f6f6; border-radius: 4px; width: 100%; margin-top: 30px; text-align: left; padding: 30px;}
.pay-complete .card-body label {width: 80px !important;}
.pay-complete .card-payment {background-color: #fff; border-radius: 4px; width: calc(100% + 40px); margin: 0 -20px -20px -20px; padding: 20px;}

.flexbox-row {display: flex; align-items: center;}
.total-price {display: flex; align-items: center; margin-top: 1em;}
.total-price label {margin-left: auto; margin-right: 20px; font-weight: 500; color: #333;}
.total-price span {font-size: 1.75em; font-weight: 500; color: #c51315;}
.none-page {display: flex; align-items: center; justify-content: center; width: 100%; min-height: 120px; font-size: 1.125em;}

/*******************************
        main page popup
*******************************/
.main .layer_popup_fixed {left:0; top:0; right:0; bottom: 0;  z-index:99999;}
.main .layer_popup_fixed .pop_container {position:relative; width:1280px; margin:0 auto;}
.main .layer_popup {margin:0 5px; border:3px solid #333; background:#fff; z-index:100;}
.main .layer_popup .pop_cont {overflow-x:hidden; width:initial;  min-height: 310px;  /* max-height:500px; */   }
.main .layer_popup .pop_cont p {margin:0;}
.main .layer_popup .pop_close_area {height:37px;background:#333;}
.main .layer_popup .pop_close_area .today_cl {float:left; padding:8px 0 0 10px;}
.main .layer_popup .pop_close_area .today_cl .txtlight {color:#eee !important;}
.main .layer_popup .pop_close_area .link_close {float:right; padding:8px 10px 0 0;}
.main .layer_popup .pop_close_area .link_close .txtlight {color:#eee !important;}
.main .layer_popup .pop_close_area .link_close .txtBold {font-weight:bold;}

/* 팝업제목 추가_210803 */
.main .layer_popup .popupTitle {
    position: relative;
    width: 100%;
    padding: .7em;
    font-size: 1em;
    color: #fff;
    background: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* popup size */
.size-large {width:700px; height:auto;}
.size-medium {width:420px; height:auto;}
.size-small {width:300px; height:auto;}

/* popup image size */
.size-large .pop_cont img {width:100% !important; height:auto;}
.size-medium .pop_cont img {width:100% !important; height:auto;}
.size-small .pop_cont img {width:100% !important; height:auto;}
.layer_popup .pop_cont_body {width:auto; padding:15px; background:#fff;}

/* popup position */
.left_top {position:absolute; left:0; top:100px;}
.size-large.center_top {position:absolute; left:50%; margin-left:-350px; top:100px;}
.size-medium.center_top {position:absolute; left:50%; margin-left:-210px; top:100px;}
.size-small.center_top {position:absolute; left:50%; margin-left:-150px; top:100px;}
.right_top {position:absolute; right:0; top:100px;}


/* 1개 이상 팝업 위치 정렬_수정_220614 */
.main .layer_popup_fixed {
    position: absolute;
    width: 100%;
    left: 0;
    /*transform: translateX(-50%);*/
    top: 0;
    right: 0;
    bottom: unset;
    z-index: 99;
    box-sizing: border-box;
}
#popupDiv .left_topGroup .layer_popup,
#popupDiv .center_topGroup .layer_popup,
#popupDiv .right_topGroup .layer_popup {
    margin: 0;
}
#popupDiv .left_topGroup .layer_popup .pop_cont,
#popupDiv .center_topGroup .layer_popup .pop_cont,
#popupDiv .right_topGroup .layer_popup .pop_cont{
    max-height: none;
}
#popupDiv .left_topGroup, #popupDiv .center_topGroup, #popupDiv .right_topGroup {
    position: absolute;
    width: auto; /* 100% */
    top: 100px;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;

}
#popupDiv .left_topGroup {
    left: 5%;
    z-index: 1;
}
#popupDiv .center_topGroup {
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
#popupDiv .right_topGroup {
    right: 5%;
    z-index: 33;
}
#popupDiv .center_topGroup .layer_popup, #popupDiv .right_topGroup .layer_popup{ box-shadow: 0 5px 10px rgba(0,0,0,.5); }

#popupDiv .left_topGroup .left_top { position: relative;  left: unset;   top: unset; }
#popupDiv .right_topGroup .right_top { position: relative;  right: unset;  top: unset; }
#popupDiv .center_topGroup .center_top { position: relative;  left: unset;  margin-left: unset;  top: unset; }

/* 팝업 내 영상_추가_220614 */
.main .layer_popup .pop_cont[data-ui-design="youtube"],
.main .layer_popup .pop_cont[data-ui-design="video"] {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.main .layer_popup .pop_cont[data-ui-design="youtube"] iframe,
.main .layer_popup .pop_cont[data-ui-design="video"] video{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
}

/* 팝업 위치 개별 설정_추가_220614 */
.main .layer_popup_fixed .container > .layer_popup{
    position: absolute;
}

@media( max-width:1024px ){
    #popupDiv .left_topGroup, #popupDiv .center_topGroup, #popupDiv .right_topGroup { width: 90%; }
    #popupDiv .center_topGroup .layer_popup, #popupDiv .right_topGroup .layer_popup{ box-shadow: unset; }
    #popupDiv .left_topGroup .left_top, #popupDiv .right_topGroup .right_top, #popupDiv .center_topGroup .center_top {
      position: absolute;
      left: 0;
    }
}
@media(max-width: 768px){
 .main .layer_popup {width:100%; margin:0 auto;}
 .main .layer_popup_fixed .container > .layer_popup{ width: 100% !important; left: 0 !important; }
}


/*******************************
        classroom  나의 강의실
*******************************/

/* classroom reponsive NAV  */
.classRoom aside {width:240px; background: #fff;     } /* #1d2b36 */
.classRoom aside:after {display:none;}
.classRoom aside .header {background:#141e27;} /*  */
.classRoom aside .header .close {color:#fff; margin-left:auto;}
.classRoom aside .user_welcom {text-align:center; padding:20px 0; background:#141e27; /*  */  margin:0 auto;}
.classRoom aside .user_welcom p {color:#fff; font-size:0.867em;}
.classRoom aside .user_welcom p span {font-weight:600; display:block;}
.classRoom aside ul.navList{ border-top: 0  }
.classRoom aside ul.navList > li:after {display:none;}
.classRoom aside ul.navList > li {position:relative; text-align:left; border-bottom:1px solid #555; background:#fff; /* #1d2b36 */   }
.classRoom aside ul.navList > li > a {display:block; font-size:16px; text-indent:20px; line-height:48px; color:#849fb0; background:url(../img/m_gnb_down.png) calc(100% - 20px) 50% no-repeat; background-size:16px;}
.classRoom aside ul.navList > li a span {position:inherit; padding:0;}
.classRoom aside ul.navList > li:first-child {border-top:1px solid #555;}
.classRoom aside ul.navList > li.on > a {color:#fff; background:url(../img/m_gnb_up_w.png) calc(100% - 20px) 50% no-repeat; background-size:16px;}
.classRoom aside ul.navList > li.on .twoDep {display:block;}
.classRoom aside ul.navList > li.subNone > a {background:none;}
.classRoom aside ul.navList > li > a:hover {color:#fff !important; background-color:#4f82bc;}
.classRoom aside ul.navList .twoDep {display:none;}
.classRoom aside ul.navList .twoDep ul {padding:0px 0; background:#3c464d;}
.classRoom aside ul.navList .twoDep ul li a {display:block; font-size:0.933em; text-indent:20px; color:#ccc;}
.classRoom aside ul.navList .twoDep ul li span:before {margin-right:5px;}
.classRoom aside ul.navList .twoDep ul li a:hover {color:#fff;}

/* classroom - layout */
.classRoom {background:#eaeaea !important;}
.classRoom header {border-bottom:none; margin-top:2em;}
.classRoom header .inner-box {position:relative; padding:1em 0; color:#202020; background:#f7f7f7; border-bottom: 1px solid rgba(0, 0, 0, .1)}
.classRoom header .inner-box h1 {font-size:1.733em; font-weight:700; margin:0 auto;}
.classRoom header .inner-box .class-close {position:absolute; right:25px; top:25px; width:18px; height:18px; background:url(../img/btn_icon_cancel_b.png) center center; text-indent:-9999px; filter:alpha(opacity=30);opacity:.3}
.classRoom header .inner-box .menu-btn span {background-color:#1d2b36;}


/* 최소높이 추가_210719  */
.classRoom .sub-wrap {width: 1280px !important; min-height: calc(100vh - 130px); margin-top:0; margin-bottom:2em; padding-top: 0; background:#fff;}


.classRoom .inner-box {width: 1280px !important;}
.classRoom .exam-wrap {display: flex; flex-direction: column; min-height: 100vh; }
.classRoom .lnb {width: 240px; min-width: 240px; margin-right: 2.5em; border-left: 0; border-right:1px solid rgba(0, 0, 0, .1);}
.classRoom .lnb .user_welcom {text-align:center; padding:15px 0;}
.classRoom .lnb .user_welcom p { padding-top: 70px; background: url(../img/user.png) no-repeat center top; color:#333;}
.classRoom .lnb .user_welcom p span {font-weight:600; display:block;}
/*.classRoom ul.navList > li {border-bottom:1px solid #0e151a;}*/
.classRoom ul.navList > li:after {color:#c0c4c7;}
.classRoom ul.navList > li > a {color:#333;}
.classRoom ul.navList {border-left:0; border-right:0; border-top:1px solid rgba(0, 0, 0, .1);}
.classRoom ul.navList > li > a:hover {color:#fff; background-color:#068adc;}
.classRoom ul.navList > li.active > a {color:#fff !important; background:#024c93;}
.classRoom ul.navList > li.on .twoDep ul {background:#3c464d;}
.classRoom ul.navList .twoDep ul li a {color:#ccc;}
.classRoom .content-box {margin-top:2.5em; margin-right:2.5em;}
.classRoom .content-box .subtitle {font-size:1.733em; color:#333; padding:0em 0 0.75em 0; margin-bottom:0.75em;}
.classRoom > .class-progress > .ui.segment {border-radius: 0 !important;}

/* classroom - home */
.class-info {display:flex; align-items:center; margin-top:1em; margin-bottom:2em;}
.class-info .title-cover {min-width: 180px;}
.class-info dl.conText {flex: 1 1 auto; padding: 0 0 0 2em;}
.class-info dl.conText dt {padding-bottom: 0.5em; font-size:1.600em; font-weight:500; letter-spacing:-0.05em;}
.class-info dl.conText dd {float: left; width: 50%; padding: 5px 0; font-weight:500; color:#333;}
.class-info dl.conText dd label {display: inline-block; margin-right: 10px; color: #777;}
.class-info dl.conText dd strong {font-weight:600;}
.class-progress .process-bar {border:1px solid #e7e9ea; background:#f9f9f9; border-radius: 7px; overflow: hidden;}
.class-progress h4 {font-size: 1.25em; font-weight:500; color:#333; margin-bottom:.5em;}
.class-progress h4 span {font-size:0.789em; margin-left:5px;}
.class-progress .progress-area {display:flex; align-items:center; margin-bottom:.5em;}
.class-progress .progress-area .bar-tit {min-width:85px; }

.class-progress .process-bar .bar-my .per_area,
.class-progress .process-bar .bar-average .per_area {min-width:30px; position:absolute; z-index:999;}

.class-progress .process-bar {flex:1 1 auto; position: relative; height:3em !important; line-height:3em !important;}
.class-progress .process-bar .lot_area {position: absolute; top:0; left:0; bottom:0; right:0; background:rgba(0, 0, 0, .5);}
.class-progress .process-bar .lot_area .lot_loding {width:5em; margin:auto; margin-top:-17px;}
.class-progress .process-bar li {flex:0 1 auto; color:#000; font-weight:600;}
.class-progress .process-bar .bar-my {background:#05abfc;}
.class-progress .bar-average {background:#c0c0c0;}
.class-progress .bar-attend {background:#81c685;}
.class-progress .bar-work {background:#9574cd;}
.class-progress .bar-exam {background:#fdd24f;}
.class-progress .bar-off {background:#ff8a80;}
.class-progress .bar-quiz {background:#29b4f5;}
.class-progress .bar-label .ui.mini.label {padding:0.4em 0.5em; border-radius:0;}
.class-progress .grade {margin-top:0.5em;}
.classRoom h4.home-tit {display:flex; align-items:center; font-size: 1.25em; font-weight:500; color:#333; padding-bottom:.5em; border-bottom: 1px solid rgba(34, 36, 38, 0.15)}
.classRoom h4.home-tit span {margin-left:auto; font-size:0.737em; color:#fe6270; font-weight:400;}
.cbp_tmtimeline > li .cbp_tmlabel .right-btn.quiz {border-color: rgba(30, 160, 235, .5); color: #1ea0eb;}
.cbp_tmtimeline > li .cbp_tmlabel .right-btn.quiz:hover,
.cbp_tmtimeline > li .cbp_tmlabel .right-btn.quiz:active,
.cbp_tmtimeline > li .cbp_tmlabel .right-btn.quiz:focus { border-color: rgba(30, 160, 235, 1);}

/* classroom - board */
.ui.message.top-box {margin-top:0;}
.ui.blue.message.top-box {box-shadow:0 0 0 1px #bad4ea;}
.total-score {padding:1em 0; text-align:center; border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7;}
.total-score span {color:#000; font-weight:500; font-size:1.133em;}

/* classroom - modal */
.classRoom .modal-img img {max-width:100%;}
ul.txt-small {margin-top:1em;}
ul.txt-small > li {padding:0.2em 0 0.2em 8px; font-size:0.875em; text-align: left; background:url(../img/icon_dot.gif) 0 1em no-repeat;}

.m-caution {padding:0.2em 0; color:#000; font-size:0.938em;}
.upload-area {margin-top:1em; padding:1em 0; border:1px solid #cdcdcd;}
.upload-area .upload_input {width:60%; margin:0 auto; }
.upload-area .upload_input .ui.input {width:100%;}




/*******************************
        Exam
*******************************/
/* classRoom - Exam */
.examArea {background: #fff;}
.examArea .inner-box {position: relative;}
.examArea header .inner-box {position: relative;}
.examArea .sidebar-button{position: fixed; right: 50%; top:100px; margin-right: -600px; z-index: 9999;}
.examArea .exam_box {display: flex; flex: 1 1  auto; flex-direction:column; position: relative; padding: 3em;}
.examArea .exam_box .wrap_btn {}
.question_area {flex: 1; background: #fff;}
.question_area .examTime {display: flex; align-items: center; padding-bottom: 0.5em;}
.question_area .examTime .exam_tit { font-size:1.600em; font-weight:500; letter-spacing:-0.05em;}
.question_area .examTime .time {position: absolute; right: 2.5em; top: 0; z-index: 9999; font-size: 1.25em; font-family: Helvetica,sans-serif;}
.question_area .question-box {margin-bottom: 1em; background:#f9f9f9; border-bottom:1px solid #ddd;}
.question_area .question-box .ui.attached.message {  /* border-radius:0 !important; */ }
.question_area .question-box .ui.attached.segment {border-bottom: 0;}
.question_area .question-box .field  {clear: both; margin: 0em 0em 1em;}
.question_area .question-box .field:last-child  {margin: 0;}
.examArea .exam_box .answer_area { width:300px;}
.examArea .exam_box .answer_area .tit {padding-bottom: 0.5em; margin-bottom: 0.5em; border-bottom:1px solid #ddd; font-size:1.600em; font-weight:500; letter-spacing:-0.05em;}
.examArea .exam_box .wrap_btn .mobile2row {display: inline;}
.modal-dialog.inner-box {padding: 2em 0;}

/* classRoom - Exam Info */
.examArea .exam_box .exam_info { background: url(../img/exam_img01.png) no-repeat 8% 50%;}
.examArea .exam_box .exam_info .info_text {padding:3em 3em 3em 40%;}
.examArea .exam_box .exam_info .info_text h3 {margin-bottom: .75em; font-size: 2.4em; color: #101010;}
.examArea .exam_box .exam_info .info_text ul {display: flex; flex: 1 1 auto; flex-direction: column;}
.examArea .exam_box .exam_info .info_text ul li {display: flex; margin-bottom: 1em; font-size: 1.2em; color: #555; line-height: 1.6;}
.examArea .exam_box .exam_info .info_text ul li span {display: inline-block; margin-right: 10px;}

/* classRoom - Finish Info */
.examArea .exam_box .finish_info {text-align: center; position: relative; margin-top:5em; padding:5em 0; background:#fff;}
.examArea .exam_box .finish_info .card-pass {position: absolute; top: -50px; left: calc(50% - 50px); width: 100px; height: 100px; border-radius: 100%; background-color: #60c878; border: 5px solid #fff;}
.examArea .exam_box .finish_info .card-pass i {color: #fff; line-height: 90px; font-size: 45px;}
.examArea .exam_box .finish_info .card-fail {position: absolute; top: -50px; left: calc(50% - 50px); width: 100px; height: 100px; border-radius: 100%; background-color: #db2828; border: 5px solid #fff;}
.examArea .exam_box .finish_info .card-fail i {color: #fff; line-height: 90px; font-size: 45px;}
.examArea .exam_box .finish_info .card-msg {color: #333; font-size: 1.5em; font-weight: 500; margin-bottom: 5px;}
.examArea .exam_box .finish_info .card-submsg {color: #333; font-size: 1.5em; font-weight: 500; margin-bottom: 5px;}

/*******************************
       Mypage Exam
*******************************/
.modal .modal-header {min-height: 57px;}

/* modal - Exam */
.modal .time {float: right; margin-right: 1em; font-size: 1.25em; font-family: Helvetica,sans-serif;}
.modal .exam_box {display: flex; flex: 1 1  auto; flex-direction:column; position: relative; padding: 0 0 3em 0;}
.modal .exam_box .wrap_btn {margin-top: 0;}
.modal .exam_box .qNa .disNone {display: none; width:0; height: 0; line-height: 0;}
.modal .question_area {flex: 1; background: #fff;}
.modal .question_area .examTime {display: flex; align-items: center; padding-bottom: 0.5em;}
.modal .question_area .examTime .exam_tit { font-size:1.25em; font-weight:500; letter-spacing:-0.05em;}
.modal .question_area .question-box {
	margin-bottom: 1em; background:#f9f9f9; border:1px solid #eee; 
	border-radius: 0.28571429rem; 
	overflow: hidden;
}
.modal .question_area .question-box .ui.attached.message { border-radius:0 !important;/*  */  margin: 0; box-shadow: none; }
.modal .question_area .question-box .ui.attached.segment { 
	/* border-bottom: 0;  */ 
	box-shadow: none;
	border: 0;
	margin: 0;
    max-width: 100%;
}
.modal .question_area .question-box .field  {clear: both; margin: 0em 0em 1em;}
.modal .question_area .question-box .field:last-child  {margin: 0;}
.modal .question_area .question-box .ui.attached.segment ul li {padding:.35em 0 .35em 1.5em;}
.modal .question_area .question-box .ui.attached.segment .selec_exam_check {background: url(../img/bg_check.gif) no-repeat left 5px;}
.modal .exam_box .answer_area { width:300px;}
.modal .exam_box .answer_area .tit {padding-bottom: 0.5em; margin-bottom: 0.5em; border-bottom:1px solid #ddd; font-size:1.600em; font-weight:500; letter-spacing:-0.05em;}
.modal .exam_box .wrap_btn .mobile2row {display: inline;}
.modal-dialog.inner-box {padding: 2em 0;}
.btn span.glyphicon {opacity: 0;}
.btn.active span.glyphicon {opacity: 1;}



/* 퀴즈결과 해설 부분 수정_220315 */
.modal .question_area #quizResult .question-box .field {
    display: none;
}
.modal .question_area #quizResult .question-box .ui.attached.segment {
  padding:0;
}
.modal .question_area #quizResult .question-box .ui.attached.segment > .ui.dimmer {
  position: relative;
}
.modal .question_area #quizResult .question-box .ui.attached.segment > .ui.dimmer .dimmer-box {
    width: 100%;
}
.modal .question_area #quizResult .question-box .ui.attached.segment > .ui.dimmer .dimmer-box::before{
  display: block;
    padding:1.1em 1em;
}
.modal .question_area #quizResult .question-box .ui.attached.segment > .ui.dimmer .ui.small.header{
  background-color: rgba(255,255,255,.85);
  text-align: left;
  font-weight: normal;
  padding:1.1em 1em;
}

/* modal - Exam Info */
.modal .exam_box .exam_info { background: url(../img/exam_img01.png) no-repeat 3% 50%;}
.modal .exam_box .exam_info .info_text {padding:2em 1em 3em 40%;}
.modal .exam_box .exam_info .info_text h3 {margin-bottom: .75em; font-size: 2em; color: #101010;}
.modal .exam_box .exam_info .info_text ul {display: flex; flex: 1 1 auto; flex-direction: column;}
.modal .exam_box .exam_info .info_text ul li {display: flex; margin-bottom: 1em; font-size: 1.2em; color: #555; line-height: 1.6;}
.modal .exam_box .exam_info .info_text ul li span {display: inline-block; margin-right: 10px;}

/* modal - Finish Info */
.modal .exam_box .finish_info {text-align: center; position: relative; margin-top:5em; padding:5em 0 2em 0; background:#fff;}
.modal .exam_box .finish_info .card-pass {position: absolute; top: -50px; left: calc(50% - 50px); width: 100px; height: 100px; border-radius: 100%; background-color: #60c878; border: 5px solid #fff;}
.modal .exam_box .finish_info .card-pass i {color: #fff; line-height: 90px; font-size: 45px;}
.modal .exam_box .finish_info .card-fail {position: absolute; top: -50px; left: calc(50% - 50px); width: 100px; height: 100px; border-radius: 100%; background-color: #db2828; border: 5px solid #fff;}
.modal .exam_box .finish_info .card-fail i {color: #fff; line-height: 90px; font-size: 45px;}
.modal .exam_box .finish_info .card-msg {color: #333; font-size: 1.5em; font-weight: 500; margin-bottom: 5px;}
.modal .exam_box .finish_info .card-submsg {color: #333; font-size: 1.5em; font-weight: 500; margin-bottom: 5px;}

@media all and (max-width:1280px){
    
    /*******************************
        sub-content
    *******************************/

    /* 추가_강의전체보기-목차보기 버튼_211108 */
    .classRoom .lnb {width: 210px; min-width: 210px; }
    .content-box {
        width: calc(100% - 200px);
        margin-right: 0 !important;
    }

    .classRoom .inner-box {width:100% !important;}   

    /* Online - Exam */
    .examArea .sidebar-button{position: fixed; right: 0; top:110px; margin-right: 0;}
    .examArea .exam_box .answer_area .tit {padding-bottom: 0.5em; margin-bottom: 0.5em; border-bottom:1px solid #ddd; font-size:1.600em; font-weight:500; letter-spacing:-0.05em;}
}

@media all and (max-width:1024px){
    body {font-size: .875em;}
    .total_box {font-size: .875em;}
   
    aside {display: block; position: fixed; top: 0; left: -480px; width: 480px; height: 100%; background: #fff; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease; z-index: 99999;}
    aside.active {left: 0;}
    aside.active + .overay {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #000; opacity: .3; overflow-y: auto; z-index: 9999;}
    .lnb {display: none;}
    .classRoom .content-box .subtitle { padding:0;}
    .online-detailBox .tab-box {padding-top: 4em;}
    
    /*******************************
        sub-content 
    *******************************/
    .sub-wrap {display: block;}
    .content-box {padding: 0; width: 100%; }
    .content-box .subtitle {display: block; margin: 0 0 20px 0; padding: 0; text-align: center; line-height: 60px; font-size: 1.75em; background-color: #eff0f4; border-bottom: none;}
    .reg-form {width: 100%;}
    
    
    /*******************************
            classRoom
    *******************************/
    .classRoom header {margin-top:0; z-index: 1000;}
    .classRoom header .inner-box {padding:10px 1em;}
    .classRoom header .inner-box h1 {font-size:1.467em;}
    .classRoom header .inner-box .class-close {position: relative; top:0; right:0;}
    .classRoom .content-box {margin-top:1.2em; margin-right:0;}
    .classRoom aside ul.nav > li > a {padding:1em 0;}
    .classRoom aside ul.nav > li > ul.navList {position:relative; width:100%;}

    /*******************************
            Exam
    *******************************/
    .modal-dialog.inner-box {padding: 0;}
    .examArea .exam_box {padding: 4em 3em 3em 3em;}
    .examArea .exam_box .exam_info {background: url(../img/exam_img01.png) no-repeat 8% 50%; background-size: 30%;}
    /*.question_area .examTime .time {position: fixed; right: 1rem; top: 14px; color: #fff; z-index: 9999; font-size: 1em;}*/
}

@media all and (max-width:768px){
    /*******************************
        sub-content 
    *******************************/
    
    /*  search result header  */
    .search_result_header {text-align: center; border: 0; border-radius: 0;}
    .content-box .subtitle {display: block; text-align: center; font-size: 1.5em; background-color: #eff0f4; border-bottom: none;}
    .login_form {padding: 0 !important;}
    .login_form fieldset {width: 100%;}
    .login_form .login_inp {float: none; width: 100%;}
    .login_form .login {float: none; width: 100%; height: auto; padding: .75em;}
    .login_form .btm_cont .link_area ul li {flex-direction: column; align-items: flex-end;}
    .online-detailBox .top-area {flex-direction: column;}
    .online-detailBox .top-area .conText {padding: 1em 0;}
    .goods-detailBox .top-area .title-cover {min-width: auto;}
    .goods-detailBox .top-area {flex-direction: column;}
    .goods-detailBox .top-area .conText {padding: 1em 0;}
    .total_box > ul > li {width: 100%; display: block; padding: 20px 20px 10px 20px; border-top: 1px solid #333;}
    .total_box > ul > li:first-child {border-top: none;}
    .total_box > ul > li:before {top: -16px; left: 50%; margin-left: -16px;}
    .total_box > ul > li .dot_list {margin: 0 -20px; padding: 10px 20px;}
    .cbp_tmtimeline {padding: 1em;}
    .cbp_tmtimeline > li .cbp_tmlabel .right-btn {flex: none;  min-width: 80px; margin-left:auto;}
    .cbp_tmtimeline > li .cbp_tmlabel .right-btn span { /*padding: 10px;*/ }
    .online-detailBox .textbook-area {flex-direction: column;}
    .online-detailBox .textbook-area .title-cover {min-width: 90px; width: 50%; margin: 0 auto; padding-bottom: 20px;}
    .online-detailBox .textbook-area .conText {padding-left: 0;}
    .online-detailBox .textbook-area .conText .field {display: block;}
    .online-detailBox .textbook-area .conText label {display: block !important; width: 100% !important; padding-bottom: 5px;}
    .header-conversion .title-header section {flex-direction: column;}
    .header-conversion .title-header section p {width: 100%;}
    
    .showmore_content {position: relative; overflow: hidden;}
    .showmore_trigger {width: 100%; height: 45px; line-height: 45px; cursor: pointer;}
    .showmore_trigger span {display: block; text-align: center; border: 1px solid #222; background: #fff;}
    
    .step-wrap .progressbar {width: 100%;}
    .step-wrap .progressbar li span {display: block; margin: 0;}
    
    .pay-complete {width: 100%; padding: 10px;}
    .pay-complete .card {margin-top: 0; padding: 60px 20px 20px 20px;}
    .pay-complete .card-body label {width: 100% !important;}
    
    
    /*******************************
        main page popup
    *******************************/    
    .main .layer_popup {width:85%; margin:0 auto;}
    /*.main .layer_popup_fixed {background: rgba(0, 0, 0, 0.3); position: fixed; left: 0; right: 0; top:0; bottom: 0;}*/
    .main .layer_popup_fixed .pop_container {position: relative; width:100%;}
    .main .layer_popup .pop_cont {overflow-x:hidden; width:initial; max-height:500px;}

    /* popup size */
    .size-large {width:100%; height:auto;}
    .size-medium {width:100%; height:auto;}
    .size-small {width:100%; height:auto;}
    
    /* popup position */
    .left_top {position:absolute; left:0; right: 0;}
    .size-large.center_top {position:absolute; left:0; right: 0;}
    .size-medium.center_top {position:absolute; left:0; right: 0;}
    .size-small.center_top {position:absolute; left:0; right: 0;}
    .right_top {position:absolute; left:0; right:0;}

    
    /*******************************
            custmize sub
    *******************************/
    /* custmize Edu - sub page */
    .online-custmize > .cbp_tmtimeline > li {margin-bottom:10px;}
    .online-custmize > .cbp_tmtimeline > li:before {display: none;}
    .online-custmize > .cbp_tmtimeline > li .cbp_tmicon {display: none;}
    .online-custmize > .cbp_tmtimeline > li .cbp_tmlabel:after {display: none; border:0; background: #000}
    .online-custmize > .cbp_tmtimeline > li .cbp_box {margin:0; }
    .online-custmize > .cus_list > li .cbp_tmlabel { background: transparent; border: 1px solid blue;}
    .online-custmize > .cbp_tmtimeline > li ul.cus_list > li .cbp_tmicon  {display: block}
    .online-custmize > .cbp_tmtimeline > li ul.cus_list > li .cbp_box {border:0; background: none; margin: 0 0 0 40px;}
    .online-custmize > .cbp_tmtimeline > li ul.cus_list > li .cbp_tmlabel { }
    .online-custmize > .cbp_tmtimeline > li ul.cus_list > li .cbp_tmlabel > .online-listBox {width:inherit; border-radius: 0; border:1px solid #ccc;}
    .online-custmize > .cbp_tmtimeline > li .cbp_box .online-listBox{margin-bottom:10px;}
    .online-custmize > .cbp_tmtimeline > li .cbp_tmlabel {background: none;}
    .online-custmize > .cbp_tmtimeline > li .total_n_pay {margin-top:10px;}
    
    /* online */    
    .online-listBox {flex-direction: column;}
    .online-listBox .title-cover {width: 100%;}
    .online-listBox dl.conText {display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; max-width: 100%; padding: 1em 0;}
    .online-listBox dl.conText dd {width: 100%;}
    .online-listBox .edu-button {display: flex; width: 100%;}
        
     /* store */ 
    .goods-listBox {flex-direction: column;}
    .goods-listBox .title-cover {width: 100%;}
    .goods-listBox .title-cover .wide-img {position: relative; text-align: center; padding-top:60%;}
    .goods-listBox dl.conText {width: 100%; max-width: 100%; padding: 1em 0;}
    .goods-listBox dl.conText.wd80per {width:100%;}
    .goods-listBox .edu-button {display: flex; width: 100%;}
    .goods-listBox .title-cover img {width: 100%; height: 100%;}
    
    /*******************************
            classRoom
    *******************************/
    .classRoom .content-box {margin-top: 0}
    .class-info dl.conText dd {float:none; width:auto; padding:2px 0;}
    .classRoom h4.home-tit {flex-direction:column; align-items:baseline;}
    .classRoom h4.home-tit span {margin-left:0;}
    
    /*******************************
            Exam
    *******************************/
    /* Online - Exam */
    .examArea .exam_box {padding: 4em 1em 1em 1em;}
    .question_area {margin-right: 0;}
    /*.question_area .examTime .time {position: fixed; right: 1rem; top: 14px; color: #fff; z-index: 9999; font-size: 1em;}*/
    .examArea .exam_box .answer_area {width:100%;}
    .examArea .exam_box .wrap_btn {display: flex; flex-direction: column; margin: 10px -5px;}
    .examArea .exam_box .wrap_btn .mobile2row {display: flex; width:100%; margin-bottom: 1em;}
    .examArea .exam_box .wrap_btn .mobile2row a {width:50%;}
    .examArea .exam_box .wrap_btn .btn-blue {flex: 1 1 auto}
    
    /* Online - Exam Info */
    .examArea .exam_box .exam_info {background: none;}
    .examArea .exam_box .exam_info .info_text {padding:1em;}
    .examArea .exam_box .exam_info .info_text h3 {font-size: 1.5em;}
  
    /* modal - Exam Info */
    .modal .exam_box .exam_info { background: none;}
    .modal .exam_box .exam_info .info_text {padding:1em 1em 2em 1em;}
    .modal .exam_box .exam_info .info_text h3 {font-size: 1.5em;}
  
    .curriculum-box > .header .ui.selection.dropdown{ 
      display: block;
      width: 100%;
    }
  
  
  
  
  
}
    
@media all and (max-width:480px){
    aside {width: 100%;}
    aside ul.nav > li,
    aside:after {width: 35%;}
    aside ul.nav > li > ul.navList {width: 65%;}
    .location {display:none;}
    
    /*******************************
        sub-content
    *******************************/
    .sub-wrap {padding-top: 0;}
    .content-box .subtitle {display: block; margin: 0 -1rem 1rem -1rem; text-align: center; font-size: 1.5em; background-color: #eff0f4; border-bottom: none;}

    dl.find-result {padding: 1em !important; background-position: 50% 0; background-size: 30%;}
    dl.find-result dt {padding-top: 5em;}
    dl.find-result dt , dl.find-result dd, .find-pw-result {margin-left: 0; text-align: center;}
    .find-pw-result {padding-top: 8em; padding-left: 1em; background-position: 50% 0; background-size: 30%;}
    .agree-box {flex-direction: column;}
    .agree-box .title {margin-right: auto; padding-bottom: .5em;}
    .agree-box .ui.checkbox {margin-right: auto;}

    /* online-detail */
    .online-detailBox .top-area .title-cover {min-width: 100%;}
    
    /*******************************
            Online
    *******************************/
    
    /* Online - Exam */
    /*.examArea .exam_box {padding: 1em 0;}*/
    .examArea .exam_box .qNa {flex-direction:column;}
    .question_area {margin-right: 0;}
    .examArea .exam_box .answer_area {width:100%;}
    .examArea .exam_box .wrap_btn {display: flex; flex-direction: column;}
    .examArea .exam_box .wrap_btn .mobile2row {display: flex; width:100%; margin-bottom: 1em;}
    .examArea .exam_box .wrap_btn .mobile2row a {width:50%;}
    .examArea .exam_box .wrap_btn .btn-blue {flex: 1 1 auto}
    
    /*******************************
            Class
    *******************************/
    .class-info {flex-direction:column;}
    .class-info .title-cover {width:100%; min-width:100%;}
    .class-info dl.conText {width:100%; max-width:100%; padding:1em 0;}
    .upload-area .upload_input {width:80%;}
    .curriculum-box .header ul li {width: auto; line-height: 36px;}
    .cbp_tmtimeline > li .cbp_tmlabel {flex-direction: column; align-items: flex-start;}
    .cbp_tmtimeline > li .cbp_tmlabel .cont {  padding-bottom: 1em;  }
    .cbp_tmtimeline > li .cbp_tmlabel .right-btn {width:100%; /* height:39px; */ margin-bottom: .5em; display:block; text-align:center; line-height:1; padding: 8px 0; }
    .search_input {width: 90%;}
    .search_area .btn_search {width: 90%; margin-top: 5px;}

    /* service_end 서비스 종료 */
    .service_end_area {width:100%; margin:auto; background:transparent;}
    .service_end_area h1 {font-weight:600; font-size:3em; color:#101010;}
    .service_end_area h3 {margin-bottom:1em; font-weight:300; font-size:1.25em; color:#333;}
    .service_end_area img {margin-bottom:2em;}
    .service_end_area .divider {margin:1rem 0 !important;}
    
    /* 강의 소개 Online detail */
    table.infoList tr {display: flex; flex-direction: column;}
    table.infoList th {display: block; width: 100%; padding: .5em;}
    table.infoList th:after {display: none;}
    table.infoList td {display: block; width: 100%; padding: 10px;}
  
  
  .curriculum-box > .header ul.progress-state{
    width: 100%;
  }
  
}

@media all and (max-width:340px){
    .ui.calendar .ui.popup {left: auto !important; right: 0 !important;}
    .ui.calendar.popup:before {left: auto !important; right: 1em !important;}
    .ui.action.input > input[type="text"] {width: 0 !important;}
}

/* 진행상태 */
.process-bar {
    background: #eee;
}

/* 추가_ 모의고사 팝업_스크롤 추가 */
#modal_examUserShow{
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#modal_examUserShow::-webkit-scrollbar{
  display: none;
}



/* 추가_이메일 @ 위치 수정_220509*/
@media (max-width: 480px){
    label[for="emailLabel"] + [class*="equal width"].fields > .field:first-child{
        flex: none;
        width: calc( 100% - 2em ) !important;
    }
    label[for="emailLabel"] + [class*="equal width"].fields > .field:first-child + .time-sort {
        display: inline;
    }
}


/* 추가_집체교육일정_220414 */
.offlineEduSchedule {
    font-size: 1em;
    margin: -15px;
    padding: 1em 3.666666em;
    background-color: #f9f9f9;
}
@media(max-width:992px){
    .offlineEduSchedule {
        padding: 1em 1em;
    }
}
.offlineEduSchedule .month{
    position: relative;
    display: flex;
    justify-content: left;
    align-items: flex-start;
    padding-bottom: 2em;
}
@media(max-width:600px ){
  .offlineEduSchedule .month{
    flex-direction: column;
    align-items: stretch;
  }
}
.offlineEduSchedule .month:last-of-type { padding-bottom: 0; }
.offlineEduSchedule .month h6{
    position: relative;
    width: 4.266666em;
    height: 4.266666em;
    font-size: 1em;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 4.266666em;
    z-index: 3;
    box-shadow: 0 0 5px 0px rgb(99 99 99 / 10%);
}
.offlineEduSchedule .month h6:before{
    content: '';
    position: absolute;
    display: block;
    width: 9px;
    height: 9px;
    top: calc( 50% - 4.5px );
    left: calc( 100% + 50% - 7.5px );
    border-radius: 50%;
    background-color: #ddd;
    z-index: 2;
}
.offlineEduSchedule .month h6:after{
    content: '';
    position: absolute;
    display: block;
    width: calc(100% + 2px);
    height: 1px;
    top: calc( 50% - 1px);
    left: 100%;
    background-color: #ddd;
    z-index: 1;
}
@media(max-width:600px ){
    .offlineEduSchedule .month h6{
        border-radius: 3px;
        height: auto;
        width: 100%;
        line-height: 2;
        background-color: #e4ebf1;
        box-shadow: none;
    }
    .offlineEduSchedule .month h6:before{
        display: none;
    }
    .offlineEduSchedule .month h6:after{
        display: none;
    }
}
.offlineEduSchedule .month .list{
    flex: 1;
    padding-left: 4.466666em;
}
@media(max-width: 600px){
    .offlineEduSchedule .month .list {
        padding-left: 0;
        padding-top: 1em;
    }
    .offlineEduSchedule .month .list:first-of-type{

    }
}
.offlineEduSchedule .month .list .obj{

    padding: 1.3em 2em;
    /*margin-bottom: 3.333333em;*/
    background-color: #fff;
    /*border-radius: 4px;*/
    box-shadow: 0px 3px 6px rgb(0 0 0 / 10%);
    border-bottom: 1px solid rgba(0,0,0,.1);

}
@media(max-width:600px ){
    .offlineEduSchedule .month .list .obj {  padding: 1.3em 1.3em;    }
}
.offlineEduSchedule .month:last-of-type .list .obj:last-of-type{ margin-bottom: 0; }
.offlineEduSchedule .month .list .obj:after{
  content:'';
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: #ddd;
  top: 0;
  left: calc( 4.3em + 1.85em );
}
.offlineEduSchedule .month:first-of-type .list > .obj:after{
    top: calc( 1.3em + 17px);
}
.offlineEduSchedule .month:last-of-type .list .obj:after{
    background-color: #ddd;
}
@media(max-width:600px ){
    .offlineEduSchedule .month .list .obj:after{ display: none;  /*left: calc(1em - 1px);  */   }
    .offlineEduSchedule .month:first-of-type .list > .obj:after{    top: calc( 1.3em  ); }
}
/*.offlineEduSchedule .month:nth-child(2) .list .item:nth-child(1):before{

  background-color: #00f;
  top: 0;
  left: calc( 4.3em + 1.85em );
}*/
.offlineEduSchedule .month .list .obj.none{
    background-color: rgba(221,221,221,.2);
    box-shadow: none;
    border-bottom: none;
}
.offlineEduSchedule .month .list .obj.none .info:before{ background-color: #ddd !important; }
.offlineEduSchedule .month .list .obj .info{
    cursor: pointer;
    position: relative;
}
/*
.offlineEduSchedule .month .list .obj .info:before{
    content: '';
    position: absolute;
    display: block;
    width: 9px;
    height: 9px;
    top: calc(1.13em);
    left: calc( -2em - 9px - 4.466666em / 2);
    border-radius: 50%;
    background-color: #ddd;
    z-index: 2;
}
.offlineEduSchedule .month .list .obj.on .info:before{
    background-color: var(--brandColor, #FB8238);
}
.offlineEduSchedule .month .list .obj .info:after{
    content: '';
    position: absolute;
    display: block;
    width:calc( 5em / 2 );
    height: 1px;
    top: calc(1.13em + 4px);
    left: calc( (-7em - 2em ) / 2);
    background-color: #ddd;
    z-index: 1;
}
.offlineEduSchedule .month .list .obj:first-of-type .info:before{
    top: calc( 4.466666em / 2 - 1.3em - 4.5px);
    left: calc( -2em - 9px - 4.466666em / 2);
}
.offlineEduSchedule .month .list .obj:first-of-type .info:after{
    width:calc( 5em );
    height: 1px;
    top: calc( 4.466666em / 2 - 1.3em);
    left: calc( -5em - 2em);
}
.offlineEduSchedule .month .list .obj.none .info:before{
    top: calc(50% - 4.5px);
}
.offlineEduSchedule .month .list .obj.none .info:after{
    top: calc(50% - 1px);
}
@media(max-width: 600px){
    .offlineEduSchedule .month .list .obj .info:before,
    .offlineEduSchedule .month .list .obj:first-of-type .info:before {
        left: calc(-2em - 1em + 4.5px);
    }
    .offlineEduSchedule .month .list .obj .info:after,
    .offlineEduSchedule .month .list .obj:first-of-type .info:after{
        width: calc( 2em - 9px );
        left: calc(-2em - 1em + 4.5px);
    }
}
*/
.offlineEduSchedule .month .list .obj .info .date{
    position: relative;
    font-size: 0.8666666em;
    color:  #777;
    line-height: 1.6;
}
.offlineEduSchedule .month .list .obj .info .tlt{
    position: relative;
    font-size: 1em;
    font-weight: 700;
    color:  #333;
    line-height: 1.6;
    padding-right: 6em;
}
.offlineEduSchedule .month .list .obj .info .tlt:after{
    content: '';
    position: absolute;
    display: inline-block;
    height: 100%;
    width: 3em;
    top: 0;
    right: 0;
    background-image: url(../img/ico_arrow_grey.svg); /* /assets/responsive/img/ico_arrow_grey.svg */
    background-position: center ;
    background-repeat: no-repeat;
    background-size: 11px 7.5px;
}
.offlineEduSchedule .month .list .obj.on .info .tlt:after{
    background-image: url(../img/ico_arrow_orange.svg); /* /assets/responsive/img/ico_arrow_orange.svg */
}
@media(max-width:600px){
    .offlineEduSchedule .month .list .obj .info .tlt {    padding-right: 2em;    }
    .offlineEduSchedule .month .list .obj .info .tlt:after{ background-position: center right ;     }
}
.offlineEduSchedule .month .list .obj .more{
    display: none;
    padding: 1.733333em 2.266666em;
    background-color: #f9f9f9;
    line-height: 1.6;
    margin-top:  1.3em;
}
@media(max-width:600px){
    .offlineEduSchedule .month .list .obj .more{ padding: 1.3em; }
}
.offlineEduSchedule .month .list .obj .more dl{
    display: flex;
    align-items: center;
    padding: .7em 0;
}
@media(max-width:992px){
    .offlineEduSchedule .month .list .obj .more dl{
        flex-direction:column;
        align-items: stretch;
    padding: 0.4em 0;

    }
}
.offlineEduSchedule .month .list .obj .more dl:first-of-type{ padding-top:0 }
.offlineEduSchedule .month .list .obj .more dl:last-of-type{ padding-bottom:0 }
.offlineEduSchedule .month .list .obj .more dt{
    min-width: 10em;
    color:  #999;
}
.offlineEduSchedule .month .list .obj .more dd{
    flex: 1;
}
.offlineEduSchedule .month .list .obj .more dd .ui.dropdown{
    width: 100%;
}
.offlineEduSchedule .month .list .obj .btnSet{ display: none; }
.offlineEduSchedule .month .list .obj.on .more,
.offlineEduSchedule .month .list .obj.on .btnSet { display: block; }
.offlineEduSchedule .month .list .obj.off .btnSet,
.offlineEduSchedule .month .list .obj.none .btnSet,
.offlineEduSchedule .month .list .obj.none .more { display: none !important; }
.offlineEduSchedule .month .list .obj.none .info{ cursor: default; }

.btnSet{
    text-align: center;
    padding: 1.5em 0;
}
.offlineEduSchedule .month .list .obj .more .coursePrice{
    flex-direction: column;
    align-items: flex-start;
    padding: 0 1em ;
    background-color: #fff;
    margin-top: .7em;
}
.offlineEduSchedule .month .list .obj .more .coursePrice  div{
    display: flex;
    justify-content: space-between;
    padding: 0.7em 0;
}
.offlineEduSchedule .month .list .obj .more .coursePrice .price .ori:after {
    content: '';
    position: absolute;
    width: 5px;
    height: 1px;
    top: calc(50% - 2px );
    left: calc(100% - 5px );
    transform: rotate(35deg);
    background: #f00;
}
.offlineEduSchedule .month .list .obj .more .coursePrice .percent{  color: #999; }
@media(max-width:992px){
    .offlineEduSchedule .month .list .obj .more  .coursePrice{
        align-items: stretch;
    }
    .offlineEduSchedule .month .list .obj .more  .coursePrice dt {
        min-width: auto;
    }
    .offlineEduSchedule .month .list .obj .more  .coursePrice dd {
        flex-grow: 0;
        flex-basis: auto;
        text-align: right;
    }
}
.btn{
    display: inline-block;
    width: 13.8em;
    font-size: 1em;
    padding: .8em 1.3em;
    border: none;
    text-shadow: none;
}
.btn.blue{
    background-color: #2185D0;
    color: #FFFFFF;

}
.label{
    font-size: 12px;
    padding: 2px 5px;
    margin-right: 7px;
    border-radius: 2px;
}
.label.gray{ background-color: #ddd; }
.label.brandColor{
    background-color: var(--brandColor, #FB8238);
    color:  #fff;
}

.btn.wide{
    width: 100%;
}

/* 스타일 추가_220615 */
.flex{ display: flex; }
.fcc{ justify-content: center; align-items: center; }

/* 안내페이지_220615 */
.fullpage_guide{
    font-size: 1.5em;
    font-weight: normal;

    width: 100%; /* max-content 29.166666em*/
    max-width: max-content;
    height: max-content;
    margin: auto;
    padding: 3em 4em;
    border-radius: 8px;
    text-align: center;
    color: #262933;
    background-color: #fff;
    transition: all .2s;
}
.fullpage_guide a:active, .fullpage_guide a:hover { text-shadow: none; box-shadow: 0 3px 5px rgba(200,200,200,.5); }
.fullpage_guide .box{
    display: flex;
    flex-direction: column;
    margin: 1em auto;
}
.fullpage_guide hr{
    width: 100%;
    margin: 1.5em 0 2.5em;
    border: none;
    border-top:  1px solid rgba(50,59,96,.2);
}
.fullpage_guide h1{
    font-size: 1.5em;
    font-weight: bold;
}
.fullpage_guide .btn_wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 2em;
}
.fullpage_guide .btn_wrap .btn{
    flex-shrink: 1;
    width: auto;
    padding: 1.5em 1em 1.3em;
    margin: 8px;
    border-radius: 4px;
}
.fullpage_guide .btn_wrap .btn i{
    width: 100%;
    padding-top: 50%;
    margin-bottom: 1em;
    color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.fullpage_guide .btn_wrap .btn i:before{ display: none;}
.fullpage_guide .btn_wrap .btn i.chrome{  background-image: url(../img/icon_chrome.svg); }
.fullpage_guide .btn_wrap .btn i.edge{  background-image: url(../img/icon_edge.svg); }
@media(max-width: 1024px){
    .fullpage_guide{ font-size: 1em; width: 90%; padding: 2em;}
    .fullpage_guide .btn_wrap .btn {    padding: 1.5em 0em 1.3em;  }
}
@media(max-width: 414px){
    .fullpage_guide br{ display: none; }
    .fullpage_guide{ font-size: .8em; padding: 1em 1em; }
}
@media(max-width: 320px){

}


/* 토론방추가_220905 */
.discuss {
}
.discuss label{
    font-weight: 500;
    color: #333;
}
.discuss textarea{
  flex: 1;
  min-height: auto !important;
  max-height: none !important;
  height: auto !important;
  resize: none !important;
}
.discuss textarea::placeholder{
    
}
.discuss textarea + .btn{
    width: auto;
    display: flex;
    align-items: center;
    margin-right: 0;
}
.discuss .list{
  line-height: 1;
  max-height: 40vh;
  overflow-y: auto;
}
.discuss .list::-webkit-scrollbar {  width: 6px; }
.discuss .list::-webkit-scrollbar-track {background-color: transparent; }
.discuss .list::-webkit-scrollbar-thumb { border-radius: 3px;  background-color:hsla(0, 0%, 90%,1); }
.discuss .list::-webkit-scrollbar-button { width: 0;  height: 0;  }
.discuss .list .item{
  position: relative;
  padding: 1em 0;
}
.discuss .list .item:not(:first-of-type){ 
  border-top: 1px dashed hsla(0,0%,90%,.7);
}
.discuss .list .item .header{
  display: flex;
  align-items: center;
  gap: 1em;
  font-size: .8em;
}
.discuss .list .item .header .user{ font-weight: bold; }
.discuss .list .item .header .btn{
  display: flex;
  gap: 4px;
  width: auto;
  align-items: center;
  margin-left: auto;
  padding: 0;
  background-color: transparent;
  color: hsla(0,0%,10%,.5);
}
.discuss .list .item .txt{
    line-height: 1.6;
  }
.discuss .list .item .header + .txt{
  padding: .5em 0;
}
.discuss .list .item .extra{ 
  font-size: .8em;
  color: hsla(0,0%,10%,.5); 
}
.discuss .list .item .idx{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 1.5em;
  height: 1.5em;
  left: 0em;
  padding: 2px 4px;
  background-color: hsla(0,0%,92%,1);
  border-radius: 3em;
}
.discuss .list .item .idx + .header{  padding-left: 3.3em;}
.discuss .list .item .idx ~ .txt{  padding-left: 2.7em; }
.discuss .list .item .idx ~ .extra{  padding-left: 3.4em;}




/* 온라인강의실 type2 추가_231016 */
/*******************************
        classroom  나의 강의실
*******************************/
.classRoom.type2 {
    background: hsl(180, 14%, 96%) !important;
    font-size: 16px;
}
.classRoom.type2 .inner-box {
	width: 100% !important;
	max-width: 1400px !important;
}
.classRoom.type2 .btn{ width: auto; }
.classRoom.type2 header .inner-box {
    color: var(--fcBlack);
    background:#fff;
    border-bottom: 0;
    display: block;
    text-align: center;
}
.classRoom.type2 header .inner-box::after{
	content: '';
	display: block;
	width: calc(100% - 2em);
	height: 1px;
	margin: 1em;
	background-color: hsl(196.7 9.3% 62% / .1);
}
.classRoom.type2 .sub-wrap{
    width: 100% !important;
    min-height: calc(100vh - 130px - 3em);
    padding-left: 1em;
    padding-right: 1em;
}

.classRoom.type2 aside .header { background: #fff; box-shadow: none; }
.classRoom.type2 aside .user_welcom {
	text-align: left;
	padding: 0;
	background: #fff;
	margin: 0;
}
.classRoom.type2 aside .user_welcom p {	color: #333; }
.classRoom.type2 aside .header .close {
	color: #888;
	margin-left: auto;
}
.classRoom.type2 aside ul.navList > li:first-child {
	border-top: 1px solid hsl(0, 0%, 70%);
}


.classRoom.type2 .lnb{
    border-radius: 8px;
    background-color: #fff;
    overflow: hidden;
    border:0;
    position: -webkit-sticky;
    position: sticky;
    top: 1em;
    height: 100%;
    max-height: calc(100vh - 4em);
    display: flex;
    flex-direction: column;
}
.classRoom.type2 .lnb .user_welcom {
	flex: none;
	text-align: center;
	padding: 3em 0;
	background-color: hsl(196.7 9.3% 82% / .1);
	margin: 1em 0;
	border-radius: 1em;
    
}
.classRoom.type2 .lnb .user_welcom p { 
    padding-top: 70px; 
    background: url(../img/user.png) no-repeat center top; 
    color:#333;
}
.classRoom.type2 .lnb .user_welcom p span {font-weight:600; display:block;}
.classRoom.type2 .lnb ul.navList {
	flex: 1;
    border-left:0;
    border-right:0;
    border-top:0px;
    overflow: auto;
}

.classRoom.type2 .lnb .user_welcom + ul.navList{
    margin-top: 1em;
    
    
}
.classRoom.type2 ul.navList > li::before{ 
    content: '';
	position: absolute;
	display: inline-block;
	width: 4px; height: 100%;
	background-color: transparent;
	z-index: 1;
}

.classRoom.type2 ul.navList > li{  border-bottom: 0; }
.classRoom.type2 ul.navList > li + li{ 
	border-top: 1px solid;
	border-top-color: hsl(196.7 9.3% 62% / .2); 
}
.classRoom.type2 ul.navList > li:after { color : hsl(199 100% 7% / .5)}

.classRoom.type2 ul.navList > li.active::before,
.classRoom.type2 ul.navList > li.on::before{ background-color: var(--primary); }

.classRoom.type2 ul.navList > li > a { display: flex;  color: var(--fcBlack);     }
.classRoom.type2 ul.navList > li > a:hover{
	color: #fff;
	background-color: var(--primary);
}
.classRoom.type2 ul.navList > li.active > a,
.classRoom.type2 ul.navList .twoDep ul li.active > a {
	color: var(--darkblue) !important;
	background: hsl(196.7 9.3% 62% / .1);
  }
.classRoom.type2 ul.navList > li .twoDep{
    background: none;
}
.classRoom.type2 ul.navList > li .twoDep a{ color: var(--fcBlack); }
.classRoom.type2 ul.navList > li .twoDep a:hover{ color: var(--darkblue); background-color: hsl(196.7 9.3% 62% / .1);
  }
.classRoom.type2 ul.navList > li.on .twoDep ul { background: transparent;  }
.classRoom.type2 ul.navList > li.on > a{ color: hsl(199 100% 7% / .7) }
.classRoom.type2 ul.navList .twoDep ul li { border-top: 0;   }


.classRoom.type2 .content-box{ display: block; }

.classRoom.type2 .class-info .wide-img{ background-color: #fcfcfc; }


.classRoom.type2 .footable-header th { background: hsl(196.7 9.3% 62% / .1);  }
.classRoom.type2 .tbl > li > dl > dt { background-color:  hsl(196.7 9.3% 62% / .1);    }


.classRoom.type2 .class-progress .process-bar {
    height: 1em !important;
    line-height: 1em !important;
	border: 0;
}
.classRoom.type2 .class-progress .progress-area + .progress-area{ margin-top: 1em }
.classRoom.type2 h4 { color: var(--fcBlack); }
.classRoom.type2 h4.home-tit + .header{ border-bottom: 0; }

.classRoom.type2 h4.home-tit + .header .progress-state{
	overflow: visible;
	padding: 0;
}
.classRoom.type2 h4.home-tit + .header .progress-state li{ 
	float: none; 
	display: inline-flex; 
	align-items: center; 
}

.classRoom.type2 #curriContentsList,
.classRoom.type2 #contentsList{
	background-color: hsl(196.7 9.3% 62% / .1);
    border-radius: 1em;
    overflow: hidden;
    padding: .5em 0em 1em;
}
.classRoom.type2 #curriContentsList > .header{
        
}
.classRoom.type2 #curriContentsList > .header .lecturer,
.classRoom.type2 #contentsList > .lecturer {
    font-weight: 500;
	padding: .75em 1em;
	color: var(--fcBlack);
	background: none;
}

.classRoom.type2 #curriContentsList > .header .lecturer:after,
.classRoom.type2 #contentsList >  .lecturer:after{
    content: '';
    display: block;
    width: 100%; height: 1px;
    border-top: 1px solid hsl(198 9% 62% / .5);
    margin-top: 1em;
}

.classRoom.type2 #curriContentsList .chapter,
.classRoom.type2 #contentsList .chapter{
    color: var(--fcBlack);
    font-weight: 500;
    margin: .5em 0 0;    
    border-bottom: 0;
	background: none;
}

.classRoom.type2 #curriContentsList .cbp_tmtimeline,
.classRoom.type2 #contentsList .cbp_tmtimeline{    
    border-bottom: 0;
    padding: 0em 2em;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
	background: none;
}

.classRoom.type2 #curriContentsList .cbp_tmtimeline + .chapter:before,
.classRoom.type2 #contentsList .cbp_tmtimeline + .chapter:before{
    content: '';
    display: block;
    width: 100%; height: 1px;
    border-top: 1px dashed hsl(198 9% 62% / .5);
    margin-top: 0em;
    margin-bottom: 1.5em;
}

.classRoom.type2 #curriContentsList .chapter + .cbp_tmtimeline > *:last-child,
.classRoom.type2 #contentsList .chapter + .cbp_tmtimeline > *:last-child{ padding-bottom: 1em; }

.classRoom.type2 #curriContentsList .chapter + .cbp_tmtimeline > li .cbp_box,
.classRoom.type2 #contentsList .chapter + .cbp_tmtimeline > li .cbp_box {
  display: flex;
  margin: 0 0 5px 46px;
    border-radius:.5em;
}

.classRoom.type2 .cbp_tmtimeline .viewInfo{ 
	display: flex; flex-wrap: wrap; 
	gap: .25rem .5em;
	margin-top: .25rem; 
}
.classRoom.type2 .cbp_tmtimeline .viewInfo li{ padding: 0 !important }
.classRoom.type2 .cbp_tmtimeline .viewInfo li:before {
	content:""; 
	display:inline-block; 
	width: 2px !important;
    height: 2px !important;
    margin: 0 8px 0 4px !important;
    vertical-align: middle;
    
}
.classRoom.type2 .cbp_tmtimeline .viewInfo li:first-child:before {display:inline-block !important;}
.classRoom.type2 .cbp_tmtimeline .viewInfo li span {margin-right:10px; color:#777 !important; vertical-align: inherit;}




.classRoom.type2 .total-score {
	padding:1em; text-align:right; 
    border:0;
	background-color: hsl(198 9% 62% / .05);
    border-radius: 1em;
}

.classRoom.type2 .total-score span {
	color:#000; font-weight:500; font-size:1.133em;
    padding: 4px 8px; 
    background-color: #fff;
}


.classRoom.type2 .post_view{ }
.classRoom.type2 .post_view .header h4 { padding: 1em 10px; }
.classRoom.type2 .post_view .header ul.viewInfo{ border:0; padding:0; padding-left: .75rem;}
.classRoom.type2 .post_view .header ul.viewInfo li { margin: .75rem 0; padding-left: unset; }
.classRoom.type2 .post_view .header ul.viewInfo li:not(:first-of-type)::before{
	content: "";
	display: inline-block;
	width: 1px;
	height: .7em;
	margin:0 10px;
	vertical-align: middle;
	background-color: hsl(0, 0%, 76.5%);
}
.classRoom.type2 .post_view .header ul.viewInfo li a { 	color: hsl(0, 0%, 40%);  }
.classRoom.type2 .post_view .header ul.viewInfo + .viewInfo:has( > li){ border-top: 1px solid #eee }



/* 수정_231019 */
.classRoom.type2 .list-item{   margin: 0.5em 0em }
.classRoom.type2 .list-item .ui.input{  }
.classRoom.type2 .list-item .ui.input .ui.label{    padding: 0;    }
.classRoom.type2 .list-item .ui.input .ui.label > .ui.checkbox {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0;
    background-color: hsl(180, 14.3%, 95.9%);
    padding: 0 8px;
    overflow: hidden;
}
.classRoom.type2 .list-item .ui.input .ui.label input{
    width: 100%;
  height: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
    background-color: transparent;
    padding: 0;
}
.classRoom.type2 .list-item .ui.input .ui.label input ~ label{
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0;
    z-index: 0;
    gap:4px;
}
.classRoom.type2 .list-item .ui.input .ui.label input ~ label:before{
    font-family: 'Ionicons';
    content: '\f383';
    position: relative;
    background: none;
    border: 0;
    color: hsl(180, 14.3%, 80%);
}
.classRoom.type2 .list-item .ui.input .ui.label input ~ label:after{
    content: '';
    position: absolute;
    display: block;
    width: 200%;
    height: 100%;
    left:50%;
    transform: translateX(-50%);
    z-index: -1;
}
.classRoom.type2 .list-item .ui.input .ui.label input:checked ~ label{ color: #fff; background-color: var(--primary); }
.classRoom.type2 .list-item .ui.input .ui.label input:checked ~ label:before{ color: #fff; }

.classRoom.type2 .list-item .ui.input .ui.label + input{
    flex:1;
    flex-basis: 70%;
}
.classRoom.type2 .fileHandleType2{  /*! width: 100%; */
    position: relative;
    display: inline-flex;
}
.classRoom.type2 .fileHandleType2 .simple-uploader{ flex:1;  width: auto; }
.classRoom.type2 .fileHandleType2 .simple-uploader >input{ flex:1; min-width: 3em;}
.classRoom.type2 .fileHandleType2 .simple-uploader> .ui.button{
    overflow: hidden;
    display: inline-flex;
    background-image: url(http://designer.hullaro.com/resource/files/55/template/ico-file-search.svg);
    background-repeat: no-repeat;
    background-position: center;
    color: transparent;
    width: 3em;
    background-color: hsl(200.5, 88.4%, 13%);
}
.classRoom.type2 .fileHandleType2 .simple-uploader + .ui.button.remove{
    position: absolute;
    width: auto; 
    height: auto;
    right: 5em;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
   font-size: 12px;
    padding: 4px 8px;
    border-radius: 10em;
}
.classRoom.type2 .list-item .fileHandleType2{ margin-left: 4px }

@media(max-width: 1024px){
	.classRoom.type2 header{
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		box-shadow: none;
	}
	.classRoom.type2 header .inner-box{ display: flex; }
	.classRoom.type2 header .inner-box::after { display: none; }
	.classRoom.type2 #container{ margin-top: 0 !important; }
	.classRoom.type2 .option-content .button-area {	flex-wrap: wrap;  }

	.classRoom.type2 .lnb{ display: none; }
    
    .classRoom.type2 .list-item + .list-item{ margin-top: .7em !important; }    
    .classRoom.type2 .list-item .ui.input{  flex-wrap: wrap;     }
    .classRoom.type2 .fileHandleType2 .simple-uploader{ margin-top: 4px; max-width: 100%; }
    .classRoom.type2 .fileHandleType2 .simple-uploader + .ui.button.remove{ top: calc(100% - 1em);   transform: translateY(-100%);  }
    .classRoom.type2 .list-item .fileHandleType2{ width: 100%; margin-left: 0 }


	.classRoom.type2 .class-info{
		position: -webkit-sticky;
		position: sticky;
		top: 50px;
		padding: .75rem .75rem;
		z-index: 999;
		margin: 0 -1em;
        max-height: 40rem;
		background-color: #fff;
		align-items: stretch;
		
        transition: all .3s;
        overflow: hidden;
	}

	.classRoom.type2 .class-info[data-ui-test="testMarginTop"]{  position: fixed; width: 100%;    } 
	.classRoom.type2 .class-info[data-ui-test="testMarginTop"] + .gutter{
        height: calc( var(--testMarginTop) * 1px + 0px );
        /* background-color: #f5f5f5; */
    }

	.classRoom.type2 .class-info > * { /* background-color: #fcfcfc; */ padding: .75rem 4px; }
	.classRoom.type2 .class-info .title-cover{ min-width: 7rem; }
	.classRoom.type2 .class-info .wide-img{
		background-color: #fff;
		border-radius: .5rem;
	}
    
    .classRoom.type2 .class-info dl.conText{ flex: 1; width: calc(100% - 10rem) }

	.classRoom.type2 .class-info dl.conText dt { font-size: 1.25rem; }
	.classRoom.type2 .class-info dl.conText dd {
		float: none;
		width: auto;
		padding: 2px 0;
		font-size: 14px;
	}

	.classRoom.type2 .class-info + .class-progress{ margin-top: .75rem }
    
    /* 임시_231128 */
    .classRoom.type2 .class-info.testClass{ 
		padding: 0 .75rem;
		max-height: 3rem; 
		background-color: #fcfcfc;
		box-shadow: 0px 9px 15px hsl(0 30% 30% / .13);
	}
	.classRoom.type2 .class-info.testClass > * { max-height: 3rem;   }
    .classRoom.type2 .class-info.testClass .title-cover{  min-width: 3rem; height: 100%;  }
    .classRoom.type2 .class-info.testClass dl.conText dt { 
        height: 100%; 
        padding: 0; 
        font-size: 1rem; 
        overflow: hidden;white-space: nowrap;text-overflow: ellipsis;word-break: break-all;
    }
    .classRoom.type2 .class-info.testClass dd{ opacity: 0; }


	.classRoom.type2 .ui.message {
		font-size: .875rem;
		padding: 1em 1em;
	}
	.classRoom.type2 #curriContentsList .chapter,
	.classRoom.type2 #contentsList .chapter { padding: 0.75em 1em; }
	.classRoom.type2 #curriContentsList .cbp_tmtimeline,
	.classRoom.type2 #contentsList .cbp_tmtimeline { padding: 0em 0.75em; 	}
	.classRoom.type2 #curriContentsList .chapter + .cbp_tmtimeline > li .cbp_box,
	.classRoom.type2 #contentsList .chapter + .cbp_tmtimeline > li .cbp_box {
		margin: 0 0 5px 2em;
	}
}
@media (max-width: 768px){
	.classRoom.type2 .post_view .header ul.viewInfo:not(.file) li { display: inline-block; width: 45%; margin: .2rem 0; }
	.classRoom.type2 .post_view .header ul.viewInfo li::before{ display: none !important; }

}
@media (max-width: 480px){
	.classRoom.type2 .class-info{ flex-direction: row; }
	.classRoom.type2 .class-info .title-cover{ width: auto; min-width: 5rem; }
	.classRoom.type2 h4.home-tit + .header .progress-state li { font-size: .75rem; line-height: 1; }

}




/*******************************
        Exam
*******************************/
/* 시험ui 수정_231011 */
/*-------------------------------------*/
.count { 
	display: inline-block;
	color: hsl(0, 0%, 60%);
	margin: auto;
	vertical-align: middle;
}
.count .now{ color: var(--darkblue); }
.count .all::before{
	content: '/';
	font-size: .7em;
	margin: 0 .7em 0 .4em;
	line-height: 1;
	position: relative;
	top: -.1em;
}

/*-------------------------------------*/
.comp11{
	
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap:1em;
	margin: 20px auto;
	font-size: 16px;
	max-width: 360px;
  width: 100%;
}
.comp11 .btn{ 
    background-color: white; 
    color: hsla(0, 0%, 44%, 1); 
    padding: 0.5em 1em;
    line-height: 150%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
	min-width: auto;
}
@media(max-width: 1024px){
	.comp11 {
		width: auto;
		max-width: none;
		justify-content: left;
    	margin: 20px auto 20px 20px;
	}
	.comp11 .count{ margin-left: 1em; margin-right: 1em; }
}
@media(max-width: 480px){
	.comp11 .count{ margin-left: 0em; margin-right: 0em; }
}
/*-- // -----------------------------------*/


/*--------------------------------------*/
label.checkbox,
label.radio {
	--w : 1.5em;
	--h : 1.5em;	
	font-size: 1em;
    line-height: 150%;
    display: inline-flex;
  gap: .5em;
  cursor: pointer;
}
label.checkbox input,
label.radio input{
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;  
    flex: none;
    font-size: 1em;
    width: var(--w);
	height: var(--w);
    border:1px solid ;
	border-color: var(--line-color-gray);
    border-radius: 100em;
	cursor: pointer;
}
label .select_exam_check:before,
label.checkbox input[type="checkbox"]:before,
label.radio input[type="radio"]:before{
	content: attr(data-list-num); /*  */
	display: inline-flex;
	justify-content: center;
	/* align-items: center; 	 */
	width: 100%;
	height: 100%;
	/* padding-top: 2px;  */
	
	background-position: center ;
    background-repeat: no-repeat ;
    background-size: contain ; 
      
}
label .select_exam_check,
label.checkbox input[type="checkbox"]:checked,
label.radio input[type="radio"]:checked{
 	color: #fff;
	border-color: var(--primary);
	background-color: var(--primary);   
}
label.checkbox input[data-list-num="O"]::before,
label.radio input[data-list-num="O"]::before { 
	/* content: url(../img/ico-o.svg);  */ content: '';
	background-image: url(../img/ico-o.svg);
	background-size: 11px ;
}
label.checkbox input[data-list-num="X"]::before,
label.radio input[data-list-num="X"]::before{ 
	/* content: url(../img/ico-x.svg); */  content: '';
	background-image: url(../img/ico-x.svg); 
	background-size: 11px ;
}
label.checkbox input[data-list-num="V"]::before,
label.radio input[data-list-num="V"]::before { 
	/* content: url(../img/ico-check.svg); */ content: '';
	background-image: url(../img/ico-check.svg);
	background-size: 12px ;
}

label.checkbox input[data-list-num="O"]:checked::before,
label.radio input[data-list-num="O"]:checked::before {  background-image: url(../img/ico-o-white.svg); }
label.checkbox input[data-list-num="X"]:checked::before,
label.radio input[data-list-num="X"]:checked::before{  background-image: url(../img/ico-x-white.svg);  }
label.checkbox input[data-list-num="V"]:checked::before,
label.radio input[data-list-num="V"]:checked::before {  background-image: url(../img/ico-check-white.svg); }


label.inputText,
label.textarea {
	--w : 1.5em;
	--h : 1.5em;	
	font-size: 16px;
    line-height: 150%;

}
label.inputText input[type="text"],
label.textarea textarea{
    -moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
    
    border-radius: 4px;
    width: 100%;
    border: 1px solid;
    border-color: var(--line-color-gray);
    padding: .5em;
}
label.textarea textarea {
	resize: none;
}
/* // --------------------------------------*/


/*-------------------------------------------------------*/
.omrCardArea{
	--numWidth: 48px;
    position: relative;
	display: flex;
	flex-direction: column;
	width: 300px !important;
    background-color: hsla(200, 33%, 98%, 1) !important;
}
.omrCardArea:after{ display: none }
.omrCardArea .title{
	flex:none;
    font-size: 1.2em;
    text-align: center;
    padding: 0 1em;
    line-height: 57px;
    color: white;
    background-color: hsla(198, 31%, 46%, 1);
}
.omrCardArea .answerList{
    
    position: relative;
	flex: 1 1 auto;
    overflow-y: auto;
    height: 1px;
    padding-top: 0;
    scrollbar-color: var(--line-color-gray) hsla(0deg, 0%, 30%, .1);
    scrollbar-width: thin;
    z-index: 0;
}
.omrCardArea .answerList:before{
    content: '';
    position: absolute;
    width: var(--numWidth);
    height: 100%;
    left:0; top: 0;
    background-color: hsla(199, 53%, 89%, 1);
    z-index: -1;
}
.omrCardArea .answerList .item { 
    background-color: transparent; 
    min-height: 40px;
    display:flex;
    align-items:center;
    padding-right: 1em;
}
.omrCardArea .answerList .item:nth-of-type(10n-9),
.omrCardArea .answerList .item:nth-of-type(10n-8),
.omrCardArea .answerList .item:nth-of-type(10n-7),
.omrCardArea .answerList .item:nth-of-type(10n-6),
.omrCardArea .answerList .item:nth-of-type(10n-5)
{
	/*! background-color: hsla(200, 67%, 96%, 1); */
}

/* .omrCardArea .answerList .item:nth-of-type(5n+1){ border-top: 1px dashed hsl(196 23% 72% / .5)} */
.omrCardArea .answerList .item:first-of-type{ border-top: 0 }
.omrCardArea .answerList .num{
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    background-color: hsla(199, 53%, 89%, 1);
    align-self: stretch;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: var(--numWidth); margin-right: 1em
}


.omrCardArea .answerList > .title{     
    font-size: 1em; 
	color: #fff;
	padding: 8px; line-height: 1.3; 
    background-color: hsl(199 60% 45%);
}
/* .omrCardArea .answerList > .title + .item,
.omrCardArea .answerList > .title ~ .item{ background-color: transparent;  } */





.omrCardArea .answerList .item > *:not(.num){ margin: 4px 3.4%; }
.omrCardArea .answerList .item input[type="text"]{ border-radius: 4px; }
.omrCardArea .wrap_btn{
	display: block;
	width: 100%;
	text-align: center;
	padding-top: 20px !important;
	padding-bottom: 20px !important;
	padding-left: var(--numWidth) !important;
	background-color: hsl(200, 53.6%, 89%) !important;
	max-width: 100% !important;
	margin-bottom: 0 !important;
}
.omrCardArea .wrap_btn::after {
	display: none !important;
  }
.omrCardArea .wrap_btn .btn{
	background-color: var(--darkblue);
    padding: 0.5em 1em;
    line-height: 150%;
}
@media(max-width:1024px){
	.omrCardArea{ 
		left: calc(100% + 3em);
    	position: absolute;
	}
	/* .omrCardArea .wrap_btn {
		width: max-content;
		right: 100%;
		transform: translateX(100%);
		margin: 0 !important;
		background-color: transparent !important;
		
	}
    .omrCardArea .wrap_btn:after{
        content: '';
        position: fixed !important;
        display: block !important;
        width: 100vw;
        left: unset !important;
        bottom: 0;
        right: calc(100vw + 1em);
        transform: translateX(100%);
    } */
}
/* @media(max-width: 480px){
    .omrCardArea .wrap_btn:after{
        right: calc(100vw + 0em);
    }
} */


.resetFontSize {
    display: flex;
    font-size: 18px;
    border-radius: 4px;
    overflow: hidden;
	
}
.resetFontSize button{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:2px;
    font-size: 1em;
    width: 62px; height: 60px;
    color: var(--fcBlack);
    background-color: hsla(200, 67%, 96%, 1);
}
.resetFontSize button b{  
    display: block;
    font-style: normal; 
    width: 30px; height: 30px;
    font-size: 1em; line-height: 30px;
    text-align: center; 
    background-color: hsla(198, 57%, 95%, 0);
    border-radius: 100em;
}
.resetFontSize button small{ font-size: 14px; }
.resetFontSize button.large{ font-size: 120%; }
.resetFontSize button.small{ font-size: 80%; }
.resetFontSize button.on{ background-color: var(--darkblue); color: white;  }
.resetFontSize button.on b{ background-color: hsla(198, 57%, 95%, 0.13); }
@media(max-width: 1024px){
	.resetFontSize{ display: none; }
}

.comp22 {
    padding: 1.7em;
    background-color: white;
    border-radius: 1em;
    box-shadow: 0 0 20px hsla(198, 9%, 62%, .1);
}
.comp22 > *{ gap: 8px; }
.comp22 > * + *{ margin-top: 6px }
.comp22 .label{ min-width: 3em;  }
.comp22 .label.teal{
	color: hsl(177 100% 25%); /*var(--teal); */
	background-color: var(--teal-alpha30);
}

.bcCount{ background-color: hsl(201.4, 70%, 96.1%) !important; }
hr.dot{ border: 0; border-top: 1px dashed hsl(0, 0%, 83%); }
.answerList hr{  margin: 0; }

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

#modal_examUserShow,
#modal_examIntro{
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;


    display: none !important; 
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    -webkit-overflow-scrolling: touch;
    outline: 0; 
}
#modal_examUserShow.fade,
#modal_examIntro.fade {
	opacity: 0;
	-webkit-transition: opacity 0.15s linear;
	-o-transition: opacity 0.15s linear;
	transition: opacity 0.15s linear;
	background-color: hsla(0, 0%, 0%, 0.4);
}
#modal_examUserShow.fade.in,
#modal_examIntro.fade.in {
	opacity: 1;
	display: block !important;
}
.modal_examUserShow,
.modal_examIntro {
	overflow: hidden !important;
	
	height: 100%;
	padding:0 !important
}
.modal_examUserShow > form.modal_examUserShow,
.modal_examIntro > form.modal_examIntro{ display: flex ; }
.modal_examUserShow > .modal-dialog,
.modal_examIntro > .modal-dialog{ height: 100%;  max-height: 860px; margin: auto;}

/* 훌라로 기본 내용_231020 */
.modal_examIntro .examInformation {width:100%;  }
.modal_examIntro .examInformation .testImg{
	width: 236px;
	height: auto;
	display:inline-block; 
	margin-right:  2em;										   
	position:relative; top: -10em;  
}
.modal_examIntro .examInformation .testImg + div{ display:inline-block; width: calc(100% - 270px) }
.modal_examIntro .examInformation h5 {padding:75px 35px 0 0px; font-weight:bold; font-size:30px; color:#111; margin-bottom: 16px;}
.modal_examIntro .examInformation ul {padding:0 35px 0 0px; font-size:20px; color:#333;}
.modal_examIntro .examInformation ul li:after {content:""; display:block; clear:both;}
.modal_examIntro .examInformation ul li {padding:7px 0; width:100%; display: flex; }
.modal_examIntro .examInformation ul li .num {display: block; float:left; width:20px; flex: none; }
.modal_examIntro .examInformation ul li .info {display:block; float:left; width:100%;}
.modal_examIntro .examInformation .btn_area {text-align:center; padding:50px 0 132px 0;}

@media(max-width: 1024px){
	.modal_examIntro .examInformation { background: none !important;}
	.modal_examIntro .examInformation .testImg{ display: none  }
	.modal_examIntro .examInformation .testImg + div{ width: calc(100% - 0px) }
	.modal_examIntro .examInformation h5 {padding:2em 1em ;}
	.modal_examIntro .examInformation ul {padding: 0 1em; }
}


.examArea {
	background: #fff;
}
.examArea {
	background: #fff;
}
.examArea .inner-box {position: relative;}
.examArea header .inner-box {position: relative;}
.examArea .sidebar-button{position: fixed; right: 50%; top:100px; margin-right: -600px; z-index: 9999;}
/* .examArea .exam_box {display: flex; flex: 1 1  auto; flex-direction:column; position: relative; padding: 3em;} */


.examArea .label.darkblue{
	color: var(--darkblue);
	background-color: var(--darkblue-alpha10);
}
.examArea .label.red{
	color: var(--red);
	background-color: var(--red-alpha10);
}
.examArea .label.teal{
	color: hsl(177 100% 25%); /*var(--teal); */
	background-color: var(--teal-alpha30);
}

.examArea .btn { width: auto; border-radius: 4px;  padding: 0.5em 1em;  text-align: center;   }
.examArea .btn.btn-blue {
    color: #f1f1f1;
    border-color: var(--darkblue);
    background: var(--darkblue);
}

.examArea .exam_box {
	display: flex; position: relative; 
	padding:0;
	flex: 1;
	flex-direction: column;
	background-color: var(--bcLightcyan);
    overflow: hidden;
}
.examArea .exam_box .wrap_btn { 
    position: relative;
    padding: 0px;
    background-color: hsla(198, 33%, 94%, 1);
	/*! margin: 0px -10px 0px -64px; */
    margin-bottom: -10px;
   z-index: 0;
}
.examArea .exam_box .wrap_btn:after{
    content:'';
    position: absolute;
    display: block;
    width: 100vw;
    height: 100%;
    background-color: hsla(198, 33%, 94%, 1);
    z-index: -1;
    left: -64px;
}
.examArea .exam_box .wrap_btn .omrCardArea{
    flex-direction: row;
	justify-content: center;
	align-items: center;
	background-color: hsl(200, 53.6%, 89%);
	padding: 20px;
}
.examArea .exam_box .wrap_btn .omrCardArea .btn{
	background-color: var(--darkblue);
    padding: 0.5em 1em;
    line-height: 150%;
}




.examArea .question_area {flex: 1; background: #fff;}
.examArea .question_area .examTime {display: flex; align-items: center; padding-bottom: 0.5em;}
.examArea .question_area .examTime .exam_tit { font-size:1.600em; font-weight:500; letter-spacing:-0.05em;}
.examArea .question_area .examTime .time {position: absolute; right: 2.5em; top: 0; z-index: 9999; font-size: 1.25em; font-family: Helvetica,sans-serif;}

.examArea .question_area .question-box {
	margin-bottom: 1em; 
	background:#f9f9f9; 
	border-bottom:1px solid #ddd;
}
.examArea .question_area .question-box + .question-box{ margin-top: 50px; }
.examArea .question_area .question-box .ui.attached.message {border-radius:0 !important;}
.examArea .question_area .question-box .ui.attached.segment {border-bottom: 0;}
.examArea .question_area .question-box .field  {clear: both; margin: 0em 0em 1em;}
.examArea .question_area .question-box .field:last-child  {margin: 0;}
.examArea .examArea .exam_box .answer_area { width:300px;}
.examArea .examArea .exam_box .answer_area .tit {padding-bottom: 0.5em; margin-bottom: 0.5em; border-bottom:1px solid #ddd; font-size:1.600em; font-weight:500; letter-spacing:-0.05em;}
/* .examArea .exam_box .wrap_btn .mobile2row {display: inline;} */



.modal-dialog.inner-box {padding: 2em 0;}

.examArea .question_area img{ max-width: 100%; }
.examArea .question_area .question-box .field.img{
    display: inline-block;
    width: auto;
    min-width: 45%;
	max-width: 50%;
}
.examArea .question_area .question-box .field.img img{ max-width: 100%;}

.examArea .question-box .btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: auto;
	min-width: 3em;
}
.examArea .question-box .btn.darkblue{
	color: #fff;
	background-color: var(--darkblue);
}
.examArea .question-box .btn.small{
	font-size: 14px;
	padding: 4px 8px;
	border-radius: 4px;
}
.examArea .question-box .label{
	margin:0;
	font-size: 14px;
	border-radius: 4px;
	font-weight: 600;
	padding: 2px 8px;
}

.examArea .question-box textarea {
	-moz-default-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	
	resize: none;
	border-color: var(--line-color-gray);
  border-radius: 4px;
}

.examArea .question-box .tip{
	color: hsl(196.7, 9.3%, 40%);
}


.examArea .question-box .ui.checkbox,
.examArea .omrCardArea .ui.checkbox{
	--w : 1.5em;
	--h : 1.5em;	
	font-size: 16px;
    
}

/* 시험 ui 추가_231123 */
[class*="answerText_"]{
	display: inline-block;
	margin: 0 2px;
	padding: 3px 3px;
	border-radius: 4px;
	color: hsl(177 100% 25%) !important;
	background-color: var(--teal-alpha30);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}
[class*="answerText_"]:has(.answer){
	padding: 3px 0px;
	margin: 0 0px;
	color: hsl(177 10% 15%) !important;
	background-color: transparent;
	font-size: 1em;
	font-weight: normal;
}
[class*="answerText_"] .label.answer{
	display: inline-block;
	margin: 0 2px !important;
	padding: 3px 3px !important;
	border-radius: 4px;
	color: hsl(177 100% 25%) !important;
	background-color: var(--teal-alpha30);
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1;
}






.modal .examArea .modal-header {min-height: 57px;flex: none;}
.modal .examArea{
	height: 100%;
	display: flex;
	flex-direction: column;
	background: none;
}
.modal .examArea .modal-header{
	position: relative;
	display: flex;
	align-items: center;
    background-color: var(--primary);
    color: white;
	border:0;
	padding: 24px 64px 16px;
}
.modal .examArea .modal-header .exam_tit{  font-size: 20px;  margin-right:auto; }
.modal .examArea .modal-header .name{ font-size: 16px;  }
.modal .examArea .modal-header .name span{ opacity: .7; padding-right: 8px; }
.modal .examArea .modal-header .close {
	position: absolute;
	float: none;
	font-size: 1em;
	font-weight: 700;
	line-height: 1;
	color: hsl(0, 0%, 0%);
	text-shadow: none;
	filter: none;
	opacity: 1;
	background: none;
	right: 1em;
    color: transparent;
    width: 2.5em; height: 2.5em;
 }
.modal .examArea .modal-header .close span{
    display: block; width: 100%; height: 100%;
    position: relative;
	transform: rotate(45deg);
}
.modal .examArea .modal-header .close span:before,
.modal .examArea .modal-header .close span:after{
    content: '';
    position: absolute;
	display: block;
    border-radius: 100em;
    background-color: white;
}
.modal .examArea .modal-header .close span:before{
    width: 100%; height: 2px;
	top:50%; transform: translateY(-50%);
}
.modal .examArea .modal-header .close span:after{
    height: 100%; width: 2px;
	left:50%; transform: translateX(-50%);
	top: 0;
}


.modal .examArea .time{
    --w: 2.5em;
    position: relative;
	float: none; margin: unset;
	font-size: 18px;
    padding-left:var(--w);
}
.modal .examArea .time::before{
	content: '';
    position: absolute;
	display: inline-block;
	width: var(--w);
    height: 100%;
    left: 0; top:0;
    background-image: url(../img/alarm-clock-check-white.svg);
    background-position: left center;
    background-size: 75%;
    background-repeat: no-repeat;    
}
.modal .examArea .time > div{ line-height: 1.5;}
.modal .examArea .time > div *:first-child { padding-right: 8px; opacity: .8; }

.modal .examArea .exam_box .qNa{
	flex: 1;
    display: flex;
    height: 100%;
	gap: 1em;
}

.modal .examArea .question_area {
    flex: 1; 
    background:none;
    display: flex;
    flex-direction: column;
    height: 100%;     
    padding: 30px 10px 10px 64px;  
	font-size: 18px;
}
.modal .examArea .question_area.fsSmall{
	font-size: 14px;
}
.modal .examArea .question_area.fsLarge{
	font-size: 21px;
}
.modal .examArea .question_area .scrollArea {
	flex: 1 1 auto;
	overflow-y: auto;
	height: 1px;
	padding-top: 0;
	padding-bottom: 10em;

	scrollbar-color: var(--line-color-gray) hsla(0deg, 0%, 30%, .1);
	scrollbar-width: thin;
	font-size: 1em;
}
.scrollArea::-webkit-scrollbar{
/*    display: none;*/
	width: 6px;
}
.scrollArea::-webkit-scrollbar-thumb {
	background-color: var(--line-color-gray); /*  */
	border-radius: 10px;
	/*background-clip: padding-box;
	border: 2px solid transparent;*/
}
.scrollArea::-webkit-scrollbar-track {
	background-color: hsla(0deg, 0%, 30%, .1);
	border-radius: 10px;
/*    box-shadow: inset 0px 0px 5px white;*/
}
.modal .examArea .question_area .examTime {display: flex; align-items: center; padding-bottom: 0.5em;}
.modal .examArea .question_area .examTime .exam_tit { font-size:1.25em; font-weight:500; letter-spacing:-0.05em;}
.modal .examArea .question_area .question-box {
    --paddingLeft: 1.9em;
	margin-bottom: unset; 
	background-color:transparent; 
	border-bottom:0;
	font-size: 1em;
}
.modal .examArea .question_area .question-box .field {
	clear: both;
	margin: 0em 0em .5em;
}
.modal .examArea .question_area .question-box .ui.attached.message {
	border-radius:0 !important;
	background: none;
	box-shadow: none;
	margin:0;
}
.modal .examArea .question_area .question-box .ui.attached.message .header{
    position: relative;
	font-size: 1em;
}
.modal .examArea .question_area .question-box .ui.attached.message .header .listNum{
	position: absolute;
    left: calc(var(--paddingLeft) * -1 + 1px);
	min-width: 1.5em;
	min-height: 1.5em;
	text-align: center;
	font-weight: bold;
}
.modal .examArea .question_area .question-box .ui.attached.message .header .queText{
    
}
.modal .examArea .question_area .question-box .ui.attached.message {
	border-radius:0 !important;
	background: none;
	box-shadow: none;
	margin:0;
    padding: 4px 1.5em;
    padding-left: var(--paddingLeft);
	font-size: 100%;
}
.modal .examArea .question_area .question-box .ui.attached.segment {
	border-bottom: 0; border:0; margin:0; background: none;
	width: 100%; max-width:100%;
	padding: 1em 1.5em;
    padding-left: var(--paddingLeft);
}


.modal_examIntro .modal-body{
	--paddingleft : 1em;
	padding: 2em 1em 0 ;

}
.modal_examIntro .examInformation {
	min-height: 10em;
	flex: 1;
	padding: 1em;
	margin-bottom: 1em;
	overflow: auto;
}
.modal_examIntro .modal-body .wrap_btn{
	justify-content: center;
	background-color: hsl(198, 33.3%, 94.1%);
	padding: 20px ;
	margin-left: calc( -1 * var(--paddingleft));
	margin-right: calc( -1 * var(--paddingleft));
	margin-top: auto;
  margin-bottom: 0;
}
.modal_examIntro .modal-body .wrap_btn::after{ display: none;}
.modal_examIntro .modal-body .wrap_btn .btn{ min-width: 15em;}

/* 퀴즈결과 해설 부분 수정_220315 */
.modal .question_area #quizResult .question-box .field {
    display: none;
}
.modal .question_area #quizResult .question-box .ui.attached.segment {
  padding:0;
}
.modal .question_area #quizResult .question-box .ui.attached.segment > .ui.dimmer {
  position: relative;
}
.modal .question_area #quizResult .question-box .ui.attached.segment > .ui.dimmer .dimmer-box {
    width: 100%;
}
.modal .question_area #quizResult .question-box .ui.attached.segment > .ui.dimmer .dimmer-box::before{
  display: block;
    padding:1.1em 1em;
}
.modal .question_area #quizResult .question-box .ui.attached.segment > .ui.dimmer .ui.small.header{
  background-color: rgba(255,255,255,.85);
  text-align: left;
  font-weight: normal;
  padding:1.1em 1em;
}



/* 퀴즈해설 수정, 추가_디자인 변경으로 약간 수정함_231124 */
.modal .question-box a[href*="download"]{
    display: inline-flex;
    align-items: center;
    color: #fff ;
    background-color: var(--darkblue);
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
    gap: .25rem;
}
.modal .question-box a[href*="download"]:before{
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    background-position: center;
    background-repeat: no-repeat;
    color: currentColor;
    background-color: currentColor;
    -webkit-mask-size: contain;
    -webkit-mask-position-x: 50%;
    -webkit-mask-position-y: calc(50% - 0px);
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    mask-position-x: 50%;
    mask-position-y: 50%;
    
    --src : url('../img/ico-file-download.svg');
    
    -webkit-mask-image: var(--src);
    mask-image: var(--src);
}
.modal .question-box .comp22{ box-shadow: none;  padding: 1rem 0; border-radius: 0; }
.modal .question-box .comp22 > div:first-of-type{ border-top: 1px dashed #ccc; padding-top: 1.7rem }
.modal .question-box .label{
    margin: 0;
    font-size: 14px;
    border-radius: 4px;
    font-weight: 600;
    padding: 2px 8px;
}

.modal .question-box .label.teal{  color: hsl(177 100% 25%);    background-color: var(--teal-alpha30); }




/* modal - Exam Info */
.modal .exam_box .exam_info { background: url(../img/exam_img01.png) no-repeat 3% 50%;}
.modal .exam_box .exam_info .info_text {padding:2em 1em 3em 40%;}
.modal .exam_box .exam_info .info_text h3 {margin-bottom: .75em; font-size: 2em; color: #101010;}
.modal .exam_box .exam_info .info_text ul {display: flex; flex: 1 1 auto; flex-direction: column;}
.modal .exam_box .exam_info .info_text ul li {display: flex; margin-bottom: 1em; font-size: 1.2em; color: #555; line-height: 1.6;}
.modal .exam_box .exam_info .info_text ul li span {display: inline-block; margin-right: 10px;}

/* modal - Finish Info */
.modal .exam_box .finish_info {text-align: center; position: relative; margin-top:5em; padding:5em 0 2em 0; background:#fff;}
.modal .exam_box .finish_info .card-pass {position: absolute; top: -50px; left: calc(50% - 50px); width: 100px; height: 100px; border-radius: 100%; background-color: #60c878; border: 5px solid #fff;}
.modal .exam_box .finish_info .card-pass i {color: #fff; line-height: 90px; font-size: 45px;}
.modal .exam_box .finish_info .card-fail {position: absolute; top: -50px; left: calc(50% - 50px); width: 100px; height: 100px; border-radius: 100%; background-color: #db2828; border: 5px solid #fff;}
.modal .exam_box .finish_info .card-fail i {color: #fff; line-height: 90px; font-size: 45px;}
.modal .exam_box .finish_info .card-msg {color: #333; font-size: 1.5em; font-weight: 500; margin-bottom: 5px;}
.modal .exam_box .finish_info .card-submsg {color: #333; font-size: 1.5em; font-weight: 500; margin-bottom: 5px;}

@media all and (max-width:1280px){

}

@media all and (max-width:1024px){
	    /*******************************
            Exam
    *******************************/
    .modal-dialog.inner-box {padding: 0;}

    .examArea .exam_box {padding: 2em 1em 0em 1em;}
    .examArea .exam_box .exam_info {background: url(../img/exam_img01.png) no-repeat 8% 50%; background-size: 30%;}
    /*.question_area .examTime .time {position: fixed; right: 1rem; top: 14px; color: #fff; z-index: 9999; font-size: 1em;}*/

	.modal .examArea .modal-header{ padding: 24px 64px 16px 20px; 	}
	.modal .examArea .exam_box .wrap_btn {
		margin-top: 0; margin-left: -1em; 	margin-right: -1em; margin-bottom:0;	
		flex-direction: row;
	}

	.examArea .exam_box .question_area .wrap_btn::after{ display: none; }

	.examArea .exam_box .wrap_btn .omrCardArea{
		display: flex;
		width: auto;
    	padding: 0 1em;
		background-color: transparent;
	}

	.modal .examArea .question_area { padding: 0px 0px 0px 0px;  }
	.modal .examArea .exam_box .wrap_btn .comp11 + *{ margin-left: unset;  display:  initial !important; }

	.modal_examIntro .modal-body .wrap_btn{ margin-top: auto !important; }
}

@media all and (max-width:768px){
    /*******************************
            Exam
    *******************************/
    /* Online - Exam */
    .examArea .exam_box {padding: 2em 1em 0em 1em; flex-direction: column; }
    .question_area {margin-right: 0;}
    /*.question_area .examTime .time {position: fixed; right: 1rem; top: 14px; color: #fff; z-index: 9999; font-size: 1em;}*/
    .examArea .exam_box .answer_area {width:100%;}
    /* .examArea .exam_box .wrap_btn {display: flex; flex-direction: column; margin: 10px -5px;} */
    .examArea .exam_box .wrap_btn .mobile2row {display: flex; width:100%; margin-bottom: 1em;}
    .examArea .exam_box .wrap_btn .mobile2row a {width:50%;}
    .examArea .exam_box .wrap_btn .btn-blue {flex: 1 1 auto}
    
    /* Online - Exam Info */
    .examArea .exam_box .exam_info {background: none;}
    .examArea .exam_box .exam_info .info_text {padding:1em;}
    .examArea .exam_box .exam_info .info_text h3 {font-size: 1.5em;}
  
    /* modal - Exam Info */
	.modal .examArea { max-height: 100%; height: 100vh; }
    .modal .exam_box .exam_info { background: none;}
    .modal .exam_box .exam_info .info_text {padding:1em 1em 2em 1em;}
    .modal .exam_box .exam_info .info_text h3 {font-size: 1.5em;}

  
	.modal .examArea .modal-header{
		flex-direction: column;
		align-items: baseline;
		padding: 24px 20px 16px;
	}
	.modal .examArea .modal-header .exam_tit {
		font-size: 16px;
		max-width: 80%;
		margin-right: unset;
	}
	.modal .examArea .examTime .time{
		--w: 1.5em;
		display: flex;
		gap: 1em;
		font-size: 14px;
    margin-top: 8px;
	}

  
}
    
@media all and (max-width:480px){



  
}

@media all and (max-width:340px){

}


@media all and (max-width:767px){

	/* 고객센터 탭메뉴_모바일 수정_231229 */
	.listTab.menuBox:before {
		top: calc(36px / 2 - 6px);
		right: .5em;
		content: "\f123";
		font-size: 1em;
		transition: transform .3s;
		min-width: 14px;
		min-height: 14px;
		line-height: 1;
	} 
	.listTab.menuBox.open:before {  transform: rotate(180deg)  }
	.listTab.menuBox ul li a { text-align: left; }

	.listTab.menuBox > ul{}
	.listTab.menuBox > ul li.select:before{
		content: '';
		display: block;
		position: absolute;
		height: 100%;
		width: 100%;
		max-height: 36px;
		top: 0;
		background-color: transparent;
		z-index: 3;
	}
	.listTab.menuBox.open > ul li{ display: block }
	.listTab.menuBox.open > ul li a{ color: #333 }

	/* 탭 스타일2 추가_240102 */
	.listTab.menuBox2 {
		position: relative; padding-top: unset; border-bottom: none;
		width: 100%;
		overflow: auto;
	}
	.listTab.menuBox2 > ul{ 
		display: flex; /*! flex-wrap: wrap; */ line-height: 1.6; gap: .5rem;
		padding-bottom: .75rem;
	}
	.listTab.menuBox2:before{ display: none };
	.listTab.menuBox2 ul li{
		flex: none;
		display: block;
		min-width: auto;
		border: 0;
		border:1px solid transparent; border-radius: 4px; 
	}
	.listTab.menuBox2 ul li.select{ 
		position: relative;
		width: auto;
		border:1px solid var(--brandColor, #009be5) ;
	}
	.listTab.menuBox2 ul li a{ padding: .35rem .75rem; }


}

/* 추가_250602 */
.table-type2{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0px;
	border-top: 2px solid var(--black, hsl(0, 0%, 13.3%));

}
.table-type2 tr > * {
	padding: 15px 1em;

}
.table-type2 tr th{
	color: var(--black, hsl(0, 0%, 13.3%));
	text-align: center;
	letter-spacing: -0.04em;
	font-weight: 600;
}
.table-type2 thead tr > * {  font-size: 1em; border-bottom: 1px solid #aaa; }
.table-type2 tbody tr > *{ border-bottom: 1px solid var(--border, hsl(0, 0%, 86.7%)); text-align: center; }
.table-type2 tbody tr:has(.contents-none){ }
.table-type2 .contents-none{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1em;
	border-radius: 1em;
	border: 1px solid var(--border, hsl(0, 0%, 86.7%));
	min-height: 10em;
}

.table-type2:has(.contents-none){ display: block; 	border: 0; }
.table-type2:has(.contents-none) colgroup,
.table-type2:has(.contents-none) thead{ display: none }
.table-type2:has(.contents-none) tbody,
.table-type2:has(.contents-none) tbody tr { display: block }
.table-type2:has(.contents-none) tbody tr > *{ display: block; border-bottom: 0; padding: 0; }


.table-type2 tr .idx{ padding-left: 2em; }
.table-type2 tbody tr:hover td{ background-color: var(--gray_opa7, hsla(217.5, 40%, 96.1%, 0.5)); } 
.table-type2 tbody tr.selected td{ background-color: var(--gray_bg, HSL(217.5, 40%, 96.1%)); position: relative; }
.table-type2 tbody tr.selected [class*="material-"]{
	position: absolute;
	left: 4px;
	color: var(--main, hsl(213.9, 100%, 59%));
	font-weight: bold;
	width: 1.5em;
	height: 1.5em;

	--maskimg : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23e3e3e3'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E");
}
.table-type2 tbody tr.selected [class*="material-"]::before{
	position: absolute;

	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-mask-size: contain;
	-webkit-mask-position-x: 50%;
	-webkit-mask-position-y: calc(50% - 0px);
	-webkit-mask-repeat: no-repeat;
	mask-size: contain;
	mask-position-x: 50%;
	mask-position-y: 50%;
	mask-repeat: no-repeat;

	-webkit-mask-image: var(--maskimg);
	mask-image: var(--maskimg);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

}

@media(max-width: 1024px){
	.table-type2{ display: block; border-bottom: 1px solid var(--border, hsl(0, 0%, 86.7%)); }
	.table-type2 colgroup,
	.table-type2 thead{ display: none; }
	.table-type2 tbody{ display: block; }
	.table-type2 tbody tr{
		display: block;
		padding: 4px 0;
	}
	.table-type2 tbody tr > *{
		display: flex;
		gap: 8px;
		border-color: #f9f9f9;
		padding: 8px .5em;
		padding-left: 2em; 
		text-align: left;
	}
	.table-type2 tbody tr > *:last-of-type{ border-color: transparent; }
	.table-type2 tbody tr > *::before{
		flex: none;
		content: attr(data-mobile-label);
		display: inline-block;
		min-width: 5em;
		margin: 0 4px;
		color: var(--black, hsl(0, 0%, 13.3%));
	}
	.table-type2:has(.contents-none) tbody tr > *::before{ display: none; }
	.table-type2 tbody tr + tr{ border-top:1px solid var(--border, hsl(0, 0%, 86.7%));   }

	.table-type2 tbody tr.selected > *{ border-color: var(--gray_bg, HSL(217.5, 40%, 96.1%)); }
}


.tCom456 {
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
	padding: 1.5em;
	border: 1px solid var(--border, hsl(0, 0%, 86.7%));
}
.tCom456 > div  { 
	flex: 0 1 42%; 
	display: flex;
	gap: .5em;
}
.tCom456 > div .title{ 
	align-self: center;
	flex: 0 1 5.5em; 
	color: var(--black);
}
.tCom456 .btn{ 
	flex: 1;
	align-self: flex-end; 
	height: 45px;
	background-color: #ccc;
}
@media(max-width: 1024px){
	.tCom456 > div  {  flex-basis:48%;  }
}
@media(max-width: 900px){
	.tCom456 .btn{ height: 40px; }
}
@media(max-width: 768px){
	.tCom456 > div  { flex-basis: 100%; }
	.tCom456 .btn{ flex: 0 0 100% }
}