@charset "utf-8";


.search_tab li.tab_li .right .box label span, #tag_area li span{
    font-weight: 600;
}
button {
    border: 0;
    background-color: transparent;
    vertical-align: middle;
    cursor: pointer;
    outline: none;
}

.article_title {
    font-size: 3.2rem;
    font-weight: bold;
    line-height: 1.25;
    margin-left: 0px;
    letter-spacing: -0.05em;
    margin-bottom: 0;
    font-family:  'NotoSansKR', sans-serif;
}

/* tabmenu2 */
.title_wrap2 + .tabmenu2 {margin-top:0rem;}
.tabmenu2_wrap {position:relative; margin-top:2rem; border:1px solid #dddddd;}
.tabmenu2_wrap .tabmenu_prev,
.tabmenu2_wrap .tabmenu_next {display:none;}
.tabmenu2_body {padding:5rem 0;}
.tabmenu2 {display:-webkit-box;display:-ms-flexbox;display:flex; position:relative; width:100%; -ms-flex-wrap:nowrap; flex-wrap:nowrap;    background: #f8f8f8;
    border-radius: 50px;    max-width: 400px;margin: 0 auto;margin-bottom:1rem;}
.tabmenu2 li {position:relative; flex:1 1 auto; width:100%; display: inline-block;
    vertical-align: middle;
    width: 50%;
    text-align: center;}
.tabmenu2 li a {position:relative; display:-webkit-box; display:-ms-flexbox; display:flex; width:100%; height:100%; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; font-size:1.6rem; font-weight:600; /*border-bottom:1px solid #dddddd;*/ color:#424242;padding: 14px 10px 14px;}
.tabmenu2 li:hover a,
.tabmenu2 li:focus a, 
.tabmenu2 li.on a {font-weight:bold;  color: #fff;
 }

 .tabmenu2 li:hover a{
color: #2c7fdf;

 }

  .tabmenu2 li.on:hover a{
color: #fff;

 }

.tabmenu2 li.on{   color: #fff;
    background: #2c7fdf;
    border-radius: 50px;    width: 55%;background: linear-gradient(#3b92e5,#2c7fdf);}


.tabmenu2 li a:hover::after,
.tabmenu2 li a:focus::after, 
.tabmenu2 li.on a::after {content:''; display:block; position:absolute; bottom:-1px; left:0; width:100%; height:0.3rem; /*background-color:#2c7fdf;*/}
.tabmenu2.has_outline {border:1px solid #dddddd; border-bottom:0;}
.tabmenu2_summary {position:relative; margin-bottom:3.5rem;}
.tabmenu2_summary .tit {margin-bottom:0.5rem; font-size:2rem; font-weight:bold; color:#000000; line-height:2.8rem;}
.tabmenu2_summary .explain {font-size:1.6rem; font-weight:300; color:#898989; line-height:2.8rem;}
.tabmenu2_summary.has_btn {padding-right:6rem;}
.tabmenu2_summary.has_btn button {position:absolute; right:0; bottom:0;}

.tabmenu2_wrap.type_noline {margin-top:0; border:0; border-bottom:0px solid #ddd;}
.tabmenu2_wrap.type_noline .tabmenu2_body {padding:0rem 0 3rem 0;}

.tabmenu2_wrap.type_purple li:hover a,
.tabmenu2_wrap.type_purple li:focus a, 
.tabmenu2_wrap.type_purple li.on a {color:#5b64b6;}
.tabmenu2_wrap.type_purple li a:hover::after,
.tabmenu2_wrap.type_purple li a:focus::after, 
.tabmenu2_wrap.type_purple li.on a::after {background-color:#5b64b6;}

.search_box + .tabdepth2 {padding-top:3rem;}
.tabmenu + .tabdepth2 {margin-top:3rem;}
.tabdepth2 {display:-webkit-box;display:-ms-flexbox;display:flex; position:relative; width:100%;}
.tabdepth2 li {position:relative;}
.tabdepth2 li + li {margin-left:0.4rem;}
.tabdepth2 li a {display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; min-width:18rem; padding:0 3rem; border:1px solid #898989; height:3.6rem; font-size:1.6rem; color:#898989; border-radius:18px; text-align:center;}
.tabdepth2 li a:hover,
.tabdepth2 li a:focus, 
.tabdepth2 li.on a {color:#fff; background-color:#2c7fdf; border-color:transparent;}
.tabdepth2.ea6 li a {min-width:1px;}
.tabdepth2.ea8 li a {min-width:1px;}
.tabdepth2.ea9 li a {min-width:1px;}
.tabdepth2_wrap {position:relative; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
.tabdepth2_wrap .tabdepth2 {width:auto;}
.tabdepth2_wrap .label_wrap .label_check {display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; color:#5267d0; font-size:1.6rem; font-weight:bold;}
.tabdepth2_wrap .label_wrap .label_check::before {content:''; display:inline-block; position:relative; top:1px; width:1.4rem; height:1.6rem; margin-right:0.8rem; background:url(../images/common/ico_comp_check.png) no-repeat center center / 100% auto;}
.tabdepth2_wrap .label_wrap .label_prgs {display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; color:#ff5b5b; font-size:1.6rem; font-weight:bold;}
.tabdepth2_wrap .label_wrap .label_prgs::before {content:''; display:inline-block; position:relative; top:1px; width:1.4rem; height:1.6rem; margin-right:0.8rem; background:url(../images/common/ico_comp_prgs.png) no-repeat center center / 100% auto;}
.tabdepth2_explain {margin-top:1rem; font-weight:300; font-size:1.4rem; line-height:1.5;}


.quick_lecture .tabmenu2_wrap {
    margin-top: 0rem;
}
/* 빠른강좌 영역찾기 */
.quick_nodata {padding:3rem 0 5rem;}
.quick_nodata dl {display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-box-align:center; -ms-flex-align:center; align-items:center; line-height:1; width:100%; padding:0 2rem; text-align:center;}
.quick_nodata dl::before {/*content:''; display:block; width:18.3rem; height:14.7rem; margin-left:-3.6rem; background:url(../images/common/ico_quickTabselect.png) no-repeat center center / 100% 100%;*/}
.quick_nodata dt {margin-top:3rem; color:#212121; font-size:2.6rem;}
.quick_nodata dd {margin-top:2.6rem; color:#919191; font-size:1.8rem; line-height: 1.5;}
.step_nodata .quick_nodata {padding:6rem 0;}

/*
.nicescroll_area {
    width: 100%;
    height: 100%;
    padding-right: 0px;
    position: relative;
	   overflow: hidden;
}


 .nicescroll_area {
    max-height: 215px;
}


.nicescroll_area_outer {

}

.nicescroll_area_outer {
    height: 100%;
    padding: 10px 26px 10px 25px;
    border: none;
    position: relative;
	    overflow: hidden;
}

.nicescroll_area_outer {
    padding-left: 15px;
    padding-right: 15px;
}
*/



.step_box2 .step_items {display:-webkit-box;display:-ms-flexbox;display:flex;}
.step_box2 .step_items > li {display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; width:100%; -webkit-box-flex:1; -ms-flex:1 1 auto; flex:1 1 auto;}
.step_box2 .step_items > li .title {position:relative; -webkit-box-flex:0; -ms-flex:none; flex:none; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-flex:1; -ms-flex:1 1 auto; flex:1 1 auto; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; height:100%; height:5rem; font-size:1.8rem; color:#999; font-weight:bold;     border: 1px solid #d8e2e5;
    border-width: 1px 0;
    background: #f7f9fa;
	border-width:1px 0;}
.step_box2 .step_items > li:first-child .title {border-left-width:1px;}
.step_box2 .step_items > li:last-child .title {border-right-width:1px;}
.step_box2 .step_items > li .title button {height:100%; width:100%; line-height:1; color:#2e3d61; font-size:1.6rem; font-weight:700;}
.step_box2 .step_items > li .title button span {display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;}
.step_box2 .step_items > li .title button span::after {content:''; display:inline-block; position:absolute; left:-9px; top:50%;border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 9px solid #2e3d61;-webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%);}
.step_box2 .step_items > li:first-child .title button span::after {display:none;}
.step_box2 .step_items > li .cont {height:18rem; overflow:hidden; overflow-y:auto; -webkit-box-flex:1; -ms-flex:1 1 auto; flex:1 1 auto; border:1px solid #e5e7ee; border-width:0 0 1px 0;}
.step_box2 .step_items > li:first-child .cont {border-left-width:1px;}
.step_box2 .step_items > li:last-child .cont {border-right-width:1px;}
.step_box2 .step_items > li .cont button {width:100%; height:auto; padding:0 2rem; font-size:1.4rem; color:#666666; text-align:left; font-weight:500; line-height:1.5;letter-spacing: -0.023em;}
.step_box2 .step_items > li .cont ul {height:100%; padding:0; border-right:1px solid #e5e7ee;}



.step_box2 .step_items > li .cont ul li{ padding:0; border-right:0px solid #e5e7ee;}
.step_box2 .step_items > li:last-child .cont ul {border-right:0;}
.step_box2 .step_items > li .cont .on button {background-color:#f9f9f9; font-weight:bold; color:#2e3d61;}



.step_box2 .step_items .step_submit {display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; margin-top:3rem;}
.step_box2 .step_options {display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align:center; -ms-flex-align:center; align-items:center; min-height:6rem; padding:10px 10px; background-color:#fff; border:1px solid #e5e7ee; border-top:0;    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;}
.step_box2 .step_options dl {display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
/* .step_box2 .step_options dl dt {color:#000000; font-size:1.6rem; margin-right:6rem; padding-left:2rem; line-height:1;} */
.step_box2 .step_options dl dt {position:fixed; overflow: hidden; border: 0; margin:-1px; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%);}
.step_box2 .step_options dl dd {display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; }
.step_box2 .step_options dl dd .chk_box {margin:0;}
.step_box2 .step_options dl dd .chk_box + .chk_box {margin-left:3rem;}
.step_box2 .step_options dl dd .msg {margin-left:2rem; font-size:1.4rem; color:#666; font-weight:300;}
.step_box2 .step_options dl dd .msg::before {content:'※ ';}
.step_box2 .step_options .btn_L_col2 {font-size: 12px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
    border-radius: 4px;
    position: relative;
    min-height: auto;
    height: auto;
    min-width: 80px;    line-height: normal;margin-right:0;height: 37px;
    padding: 8px 8px 8px 8px;}
	.step_box2 .step_options .btn_L_col1 {margin-right:0; font-size: 12px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;    line-height: normal;
    border-radius: 4px;
    position: relative;
    min-height: auto;margin-right:3px;
    height: auto;
    min-width: 80px;height: 37px;
    padding: 8px 8px 8px 8px;}


.step_box2 .step_options .btn_L_col1:after {
    content: '\e925';
    font-family: 'nc-font';
    font-size: 1.3rem;
    color: #fff;
    line-height: 1;font-weight: normal;    position: relative;
    top: 0px;
}

.step_box2 .step_options .btn_L_col2:after {
    content: '\E932';
    font-family: 'nc-font';
    font-size: 1.3rem;
    color: #fff;
    line-height: 1;font-weight: normal;    position: relative;
    top: 0px;
}
.step_box2 .step_options .btn_L_col1:disabled:after {
    color: #a0a0a0;
}

.step_box2 .step_options .btn_L_col1:disabled span {
    color: #a0a0a0;
}


.btn_area{
width:100%;margin-bottom: 1px;
    display: flex;
    align-items: center;
    justify-content: space-between;


}

#tag_area ul{
    display: inline-block;

}
#tag_area li {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    padding: 9px 12px 9px 12px;
    margin-right: 5px;
    border: 2px solid #00aa9e;
    background: #fff;
    font-size: 1.0rem;
	line-height:1;
    font-weight: 600;
    color: #00aa9e;
    letter-spacing: -0.01em;
    border-radius: 30px;
    position: relative;

}


#tag_area .first li {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    padding: 9px 12px 9px 12px;
    margin-right: 5px;
    border: 2px solid #00aa9e;
    background: #00aa9e;
    font-size: 1.0rem;
	line-height:1;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
    border-radius: 30px;
    position: relative;

}


#tag_area .select_cancel {
    background: none;
    border: none;
    padding: 0px 0px 0 0px;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    margin-left: 6px;
    margin-top: -5px;
}
#tag_area .select_cancel:before {
    font-family: 'nc-font';
    content: '\E828';
    font-size: 10px;
    font-weight: normal;
    color: #00aa9e;
}

#tag_area .first .select_cancel:before {
    font-family: 'nc-font';
    content: '\E828';
    font-size: 10px;
    font-weight: normal;
    color: #fff;
}


.button_area{
display:inline-block;
float:right;

}

#tag_area{
display:inline-block;
float:left;

}

/*
.step_box .step_cont {margin-top:2rem; padding:3em 3rem; border:1px solid #dbdbdb;}
.step_box2 .step_items {display:flex; border:1px solid #d8e9f6; background-color:#f2f7fb;}
.step_box2 .step_items li {position:relative; display:flex; flex:1 1 auto; justify-content:center; align-items:center; height:100%; height:5.9rem; font-size:1.8rem; color:#999; font-weight:bold;}
.step_box2 .step_items li.completed,
.step_box2 .step_items li.current {color:#0b408c;}
.step_box2 .step_items li + li::after {content:''; display:block; position:absolute; left:-0.7rem; top:50%; border-top:0.4rem solid transparent; border-bottom:0.4rem solid transparent; border-left:0.7rem solid #0b408c; transform:translateY(-50%);}
.step_box2 .step_cont {border:1px solid #e5e7ee; border-top:0;}
*/

[class^='btn_L_col'] {
    display: inline-block;
    min-width: 10rem;
    min-height: 3.8rem;
    margin-right: 0.5rem;
    padding: 0 1.7rem;
    font-size: 1.6rem;
    line-height: 3.6rem;
    color: #fff;
    text-align: center;
    border: 0px solid transparent;
}
.btn_L_col2 {
    background: #090f33;
}
.btn_L_col1{
    background: #FF404B;
}

.btn_L_col2:disabled {
    background: #e8e8e8;
    border: 1px solid #dbdbdb;
    color: #a0a0a0;
    line-height: 3.6rem;
}
.btn_L_col1:disabled {
    background: #e8e8e8;
    border: 1px solid #dbdbdb;
    color: #a0a0a0;
    line-height: 3.6rem;
}


.step_box2 .step_options .btn_L_col1:disabled {
    background: #e8e8e8;
    border: 1px solid #dbdbdb;
    color: #a0a0a0;
    padding: 7px 0px 7px 0px;
}



.step_box2 + .thumb_list_wrap, .list_keyword + .thumb_list_wrap, .list_keyword + .card_list_wrap, .list_keyword + .thumb_list_wrap + .card_list_wrap {
    margin-top: 3.5rem;
}
.board_head {
    /* display: -webkit-box; */
    display: -ms-flexbox;
    /* display: flex; */
    /* height: auto; */
    padding-bottom: 1rem;
    /* -webkit-box-pack: justify; */
    -ms-flex-pack: justify;
    /* justify-content: space-between; */
    line-height: 1;
    position: relative;
    width: 100%;    margin-top: 20px;
}

.board_head.top_txt {
    /* display: -webkit-box; */
    display: -ms-flexbox;
    /* display: flex; */
    /* height: auto; */
    padding-bottom: 6px;
    /* -webkit-box-pack: justify; */
    -ms-flex-pack: justify;
    /* justify-content: space-between; */
    line-height: 1;
    position: relative;
    width: 100%;
}

.board_head .count_area {
    /* display: -webkit-box; */
    display: -ms-flexbox;
    /* display: flex; */
    /* -webkit-box-align: center; */
    -ms-flex-align: center;
    align-items: center;
    font-size: 16px;
    color: #000;
    font-weight: 500;
    /* width: 100%; */
    /* position: relative; */
    text-align: right;
}
.board_head .count_area .tot {
    color:#5a4398;font-size: 18px;
}


body.state .board_head .count_area .tot {
    color:#5a4398;font-size: 16px;
}

.board_head.top_txt .count_area {
    color:#808080;font-size: 1.4rem;
}


.board_head .order_area {
    /*display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;*/
}

.quick_lecture {
    position: relative;
    z-index: 0;
    top: 0rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 128rem;
    width: 100%;
    margin: auto;
    background-color: white;
   
}

@media screen and (max-width: 1023px){



.step_box2 .step_items {-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;}
    .step_box2 .step_items > li .title {border-width:1px !important; height:48px;}
    .step_box2 .step_items > li .title button {font-size:16px;}
    .step_box2 .step_items > li .title button span::after {position:relative; left:0; top:-0.2rem;     width: 10px;
    height: 10px; margin-left:8px; border:4px solid #0b408a; border-width:2px 2px 0 0; }
    .step_box2 .step_items > li:first-child .title button span::after {display:inline-block;}

    .step_box2 .step_items > li:first-child .title button span:after {top: 2px;    border: 0;
    content: '\E839';
    font-family: 'nc-font';
    font-size: 13px;
    color: #2e3d61;
    line-height: 1;
    font-weight: bold;
    transform: translateY(-50%);
   -webkit-transition: -webkit-transform 300ms;
    transition: -webkit-transform 300ms;
    transition: transform 300ms;
    transition: transform 300ms, -webkit-transform 300ms;-webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);  }




    .step_box2 .step_items > li .title button span:after {top: 2px;    border: 0;
    content: '\E839';
    font-family: 'nc-font';
    font-size: 13px;
    color: #2e3d61;
    line-height: 1;
    font-weight: bold;
    transform: translateY(-50%);
   -webkit-transition: -webkit-transform 300ms;
    transition: -webkit-transform 300ms;
    transition: transform 300ms;
    transition: transform 300ms, -webkit-transform 300ms;  

	}






    .step_box2 .step_items > li.on .title.on button span:after {top: 0px;    border: 0;
    content: '\E839';
    font-family: 'nc-font';
    font-size: 13px;
    color: #2e3d61;
    line-height: 1;
    font-weight: bold;
    transform: translateY(-50%);
	-webkit-transition: -webkit-transform 300ms;
    transition: -webkit-transform 300ms;
    transition: transform 300ms;
    transition: transform 300ms, -webkit-transform 300ms;    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
		

	
	}
 

    .step_box2 .step_items > li.last-child .title button span:after {
display:none;
	}
.step_box2 .step_items > li .cont ul{

    border-right: 0px solid #e5e7ee;
}



	.step_box2 .step_items > li .cont {display:none; max-height:350px; height:auto; border-width:0 1px !important;}
    .step_box2 .step_items > li.on .cont {display:block;}
    .step_box2 .step_items > li .cont ul {padding:0;}
    .step_box2 .step_items > li:last-child .cont {border-bottom-width:1px !important;}
    .step_box2 .step_items > li .cont button {height:42px; padding:0 15px; font-size:1.4rem;}
	 .tabmenu2_body {
    padding: 3rem;
}


.thumb_list_wrap {
    display: block;
    position: relative;
}
.board_head {
    height: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding-bottom: 1rem;
}
.quick_lecture .board_head {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}
.board_head .count_area {
font-size: 20px;
    text-align: left;
    display: inline-block;
  
}
.board_head .count_area .tot {
   font-size: 21px;
}
.board_head .order_area {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
}
.board_head .count_area + .order_area {
    margin-top: 2rem;
}
.quick_lecture .board_head .count_area + .order_area {
    width: auto;
    margin-top: 0;
  float: none;
}
.quick_lecture {
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 0;
}
.btn_order span {
    height: 3rem;
    line-height: 3rem;
    font-size: 2.4rem;
}
.btn_wrap .note {
    margin-top: -18px;
    text-align: right;
    font-size: 14px;
    color: #999;
    letter-spacing: -0.05em;
    display: none;
    float: right;
}


}

@media screen and (max-width:1023px){
.step_box2 .step_items > li:first-child .title {
    border-width: 1px !important;
    height: 48px;
}
.step_box2 .step_items > li:nth-child(2) .title {
border-width: 1px !important;
border-bottom:0px;
}

.step_box2 .step_items > li:nth-child(2) .title.on {
border-width: 1px !important;
    border-bottom: 1px solid #d8e2e5;
}

.step_box2 .step_items > li:nth-child(3) .title {
    border-width: 1px !important;
    height: 48px;
border-bottom:0px;
}

.step_box2 .step_items > li:nth-child(3) .title.on {
    border-width: 1px !important;
    height: 48px;
    border-bottom: 1px solid #d8e2e5;
}
.step_box2 .step_items > li .cont ul {
    border-left: 0px solid #e5e7ee;
}

}

@media screen and (max-width:890px){
.btn_area {
        width: 100%;
        margin-bottom: 1px;
        display: flex;
        align-items: center;
        justify-content: space-between;
}
}
@media screen and (max-width:768px){
.step_box2 .step_items > li:first-child .title {
    border-width: 1px !important;
    height: 48px;
}
.step_box2 .step_items > li:nth-child(2) .title {
border-width: 1px !important;
border-bottom: 1px solid #d8e2e5;
}

.step_box2 .step_items > li:nth-child(2) .title.on {
border-width: 1px !important;
    border-bottom: 1px solid #d8e2e5;
}

.step_box2 .step_items > li:nth-child(3) .title {
    border-width: 1px !important;
    height: 48px;
border-bottom:0px;
}

.step_box2 .step_items > li:nth-child(3) .title.on {
    border-width: 1px !important;
    height: 48px;
    border-bottom: 1px solid #d8e2e5;
}

.step_box2 .step_items > li .cont ul {
    height: 100%;
    padding: 0;
    border-right: 0px solid #e5e7ee;
}
#tag_area li {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    padding: 6px 8px 8px 9px;
    margin-right: 5px;
    background: #029f6d;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
    border-radius: 30px;
    position: relative;
}
#tag_area .select_cancel {
    background: none;
    border: none;
    padding: 0px 0px 0 0px;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    margin-left: 6px;
    margin-top: -5px;
}

.step_box2 .step_items > li .title{
    border-width: 0px !important;
    height: 48px;
}

.button_area {
    display: block;
    float: none;
	text-align:center;
}
#tag_area {
    display: block;
    float: none;
	margin-bottom:10px;
}
.btn_area {
    width: 100%;
    margin-bottom: 1px;
    text-align: center;
}
.step_box2 .step_options .btn_L_col1:after {
    content: '\e925';
    font-family: 'nc-font';
    font-size: 1.3rem;
    color: #fff;
    line-height: 1;font-weight: normal;    position: relative;
    top: -2px;
}

.step_box2 .step_options .btn_L_col2:after {
    content: '\E932';
    font-family: 'nc-font';
    font-size: 1.3rem;
    color: #fff;
    line-height: 1;font-weight: normal;    position: relative;
    top: -2px;
}


.step_box2 .step_options .btn_L_col1 {

    min-width:90px;

}
.step_box2 .step_options .btn_L_col2 {
 
    min-width: 90px;

}
}
@media screen and (max-width:768px){
.tabmenu2 {display:-webkit-box;display:-ms-flexbox;display:flex; position:relative; width:100%; -ms-flex-wrap:nowrap; flex-wrap:nowrap;    background: #f8f8f8;
    border-radius: 50px;    max-width: 300px;margin: 0 auto;margin-bottom:1rem;}

.tabmenu2 li a {
    font-size: 1.3rem;

}
.btn_area {
        width: 100%;
        margin-bottom: 1px;
         display: flex;
        align-items: center;
        justify-content: center;
}
}



.online #quickmenu_wrap, .online .quickmenu_control{

display:none;

}
@media screen and (max-width:480px){
.board_head .count_area {
    font-size: 1.8rem;
}
.board_head .count_area .tot {
   font-size: 2rem;
}
.board_head {
    height: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding-bottom: 1rem;
}
.btn_wrap .note {
    margin-top: -12px;
    text-align: right;
    font-size: 14px;
    color: #999;
    letter-spacing: -0.05em;
   }
   .btn_wrap .note {

    text-align: right;
    font-size: 14px;
    color: #999;
    letter-spacing: -0.05em;
   }
.button_area {
    display: block;
    float: none;
	text-align:center;
}
#tag_area {
    display: block;
    float: none;
	margin-bottom:10px;
    display: none;
}
.btn_area {
    width: 100%;
    margin-bottom: 1px;
    text-align: center;
}
#tag_area .select_cancel {
    background: none;
    border: none;
    padding: 0px 0px 0 0px;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    margin-left: 6px;
    margin-top: -5px;
}
#tag_area li {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    padding: 6px 8px 6px 8px;
    margin-right: 5px;
    background: #029f6d;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
    border-radius: 30px;
    position: relative;
}

}
.board_head.top_txt .count_area {
  text-align:left;
}
</style>
<style>
.rank_list2 table{
  width:100%;
}
.rank_list2 td, .rank_list2 td > a, .rank_list2 td > div {
    height: 70px;width:100%;
}
.rank_list2 td{
    height: 70px;
    padding-right: 3px;
    border-top: 1px solid #e4e8eb;    float: none;padding-left: 15px;vertical-align: middle;
    display: table-cell;
}
.rank_list2 tr{
display:none;
}

.rank_list2 tr.cc, .rank_list2 tr.tt{
display:block;display: table;
width: 100%;
}
.rank_list2 tr.cc{
height:80px;
    float: left;
    width: 100%;    
	position: relative;display: table;
}
.rank_list2 tr.tt{
height:120px;
    float: left;
    width: 100%;    
	position: relative;display: table;
}
.rank_list2 tr.pp{
    height: 160px;
    float: left;
    width: 100%;    
	position: relative;display: table;
}
.rank_list2 tr.ee{
    height: 200px;
    float: left;
    width: 100%;
	    position: relative;display: table;
}
.rank_list2 tr.ff{
    height: 240px;
    float: left;
    width: 100%;
	    position: relative;display: table;
}
.rank_list2 tr.ss{
    height: 280px;
    float: left;
    width: 100%;
	    position: relative;display: table;
}
.rank_list2 tr.vv{
    height: 320px;
    float: left;
    width: 100%;
	    position: relative;display: table;
}
.rank_list2 tr.gg{
    height: 360px;
    float: left;
    width: 100%;
	    position: relative;display: table;
}
.rank_list2 tr.nn{
    height: 400px;
    float: left;
    width: 100%;
	    position: relative;display: table;
}
.rank_list2 tr.jone{
    height: 80px;
    float: left;
    width: 100%;
	    position: relative;display: table;
}
.rank_list2 tr.jtwo{
    height: 120px;
    float: left;
    width: 100%;
	    position: relative;display: table;
}
.rank_list2 tr.jthree{
    height: 160px;
    float: left;
    width: 100%;
	    position: relative;display: table;
}
.rank_list2 tr.jfour{
    height: 200px;
    float: left;
    width: 100%;
	    position: relative;display: table;
}
.rank_list2 tr.jfive{
    height: 240px;
    float: left;
    width: 100%;
	    position: relative;display: table;
}

.rank_list2 tr.jone td{
    height: 70px;
    padding-right: 3px;
    border-top: 1px solid #e4e8eb;
    float: none;
    padding-left: 15px;
    vertical-align: middle;
    display: table-cell;
}
.rank_list2  tr.jone td, .rank_list2  tr.jone td > a, .rank_list2  tr.jone td > div {
    height: 50px;width:100%;
}
.rank_list2  tr.jtwo td, .rank_list2  tr.jtwo td > a, .rank_list2  tr.jtwo td > div {
    height: 79px;width:100%;
}
.rank_list2  tr.jthree td, .rank_list2  tr.jthree td > a, .rank_list2  tr.jthree td > div {
    height: 119px;width:100%;
}

.record_table tr.jone td {
    height: 40px !important;
    padding: 1px 8px;
}

.record_rank div.title {
   background-color: #f4f5f6;
    width: 100%;
}
.rank_list2  tr.tt td,.rank_list2  tr.pp td,.rank_list2  tr.ee td,.rank_list2  tr.ff td,.rank_list2  tr.ss td,.rank_list2  tr.vv td,.rank_list2  tr.gg td ,.rank_list2  tr.nn td  {
    height: 100%;
    padding-right: 0px;padding-left: 15px;
    border-top: 1px solid #e4e8eb;
    float: none;
    vertical-align: middle;display: table-cell;
}

.record_table tr.cc {
    visibility: visible;
}


.record_table tr.xx td {
    background-color: #f9f9f9;height: 40px;padding: 10px 8px;
}
.record_table td {
    height: 40px !important;
    padding: 1px 8px;    border-top: 1px solid #e4e8eb;border-right: 1px solid #e4e8eb;border-left: 1px solid #fff;    line-height: 1.2;
}


.record_table td.evt {
    overflow: hidden;
    text-overflow: ellipsis;
    /* display: -webkit-box; */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1;
    vertical-align: middle;
}
.record_table td.gry {
   
}
.record_table td:first-child {
    border-left: 1px solid #fff;
}
.record_table td:last-child {
   border-right: 0px solid #e4e8eb;
}

@media (min-width: 768px){

}
@media screen and (max-width:1024px){
.rank_list2 td {

    padding-right: 2px;

}
}


@media screen and (max-width: 786px){
.record_table tr.xx td {
    background-color: #f9f9f9;
    height: 40px;
    padding: 10px 8px;font-size: 12px;
}
}
</style>
<style>
	
	.record_table tr{
    visibility: hidden;
}
.record_table tr.cc{
    visibility: visible;
}
.record_table #record_header{
    visibility: visible;
}
.record_table .cc{
    visibility: visible;
	font-size:12px;
}

.record_table tr.pp td.cc{
    height: auto !important;
}
.record_table tr.pp td.cnc{
   
}
.record_table tr.cc.pp td.cnc.cc {
    height: 70px !important;
}

.record_table tr.pp td:first-child{
   
 
}
.record_table tr.pp td:nth-child(2),.record_table tr.pp td:nth-child(3),.record_table tr.pp td:nth-child(4),.record_table tr.pp td:nth-child(5){
   
    

}
.record_table tr.pp td:nth-child(6),.record_table tr.pp td:nth-child(7),.record_table tr.pp td:nth-child(8),.record_table tr.pp td:nth-child(9),.record_table tr.pp td:nth-child(10){
   
    height: 40px !important;

}
.progress-bar-holder{
        width: 100%;
        border:0px solid #ccc;
        padding: 0;
         -webkit-border-radius: 13px;
        -moz-border-radius: 13px;
        border-radius: 13px;
		height: 19px;position: relative;
		background: #f2f5f9; border-radius: 13px;
      }
      .progress-bar{
        height:19px;
        text-align: right;
        background:#27b4c5;
        width: 0px;
        padding: 0px;
		-webkit-border-radius: 13px;
        -moz-border-radius: 13px;
        border-radius: 13px;
		    float: left;background-image: linear-gradient(142deg, rgba(8, 150, 106, 1) 0%, rgba(0, 126, 116, 1) 100%);


			/*background-image:linear-gradient(142deg, rgba(31,80,193,1) 0%, rgba(1,146,190,1) 100%);
			background-image:linear-gradient(139deg, rgba(47, 91, 193, 1) 0%, rgba(4, 140, 110, 1) 100%);*/
			box-shadow: 0 2px 5px rgb(50 50 50 / 10%);
      }


  body.state .progress-bar{
        height:19px;
        text-align: right;
        background:#27b4c5;
        width: 0px;
        padding: 0px;
		-webkit-border-radius: 13px;
        -moz-border-radius: 13px;
        border-radius: 13px;
		    float: left;background-image: linear-gradient(142deg, rgba(8, 150, 106, 1) 0%, rgba(0, 126, 116, 1) 100%);


			/*background-image:linear-gradient(142deg, rgba(31,80,193,1) 0%, rgba(1,146,190,1) 100%);
			background-image:linear-gradient(139deg, rgba(47, 91, 193, 1) 0%, rgba(4, 140, 110, 1) 100%);*/
			box-shadow: 0 2px 5px rgb(50 50 50 / 10%);
      }

.progress-bar.end {
    height: 19px;
    text-align: right;
    background: #27b4c5;
    width: 0px;
    padding: 0px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
    float: left;
    background-image: linear-gradient( -45deg,#090f33,#090f33, #090f33,#090f33,#090f33, #090f33,#090f33,#090f33,#090f33,#090f33,#090f33) !important;
    background-size: 1000%;
    box-shadow: 0 2px 5px rgb(50 50 50 / 10%);
}
.btn_area {
    margin-bottom: 0px;
}

.progress-bar span{
       /* margin-right: 10px; */
    /* margin-top: 5px; */
    font-size: 11px;
    color: rgb(35, 31, 32);
    /* height: 15px; */
    line-height:2;
    vertical-align: middle;
    position: absolute;
    z-index: 10;
    right: 18px;
	left:auto;
    letter-spacing: 0.04em;

      }
 .progress-bar-holder span.t_left{
       /* margin-right: 10px; */
    /* margin-top: 5px; */
    font-size: 10px;
    color: #fff;
    /* height: 15px; */
    line-height:1.8;
    vertical-align: middle;
    position: absolute;
    z-index: 10;float:left;
    left: 8px;
	float:left;
	    right: auto;

    letter-spacing: 0.04em;
 
      }
	  
 .progress-bar-holder span.t_right{
       /* margin-right: 10px; */
    /* margin-top: 5px; */
    font-size: 10px;
    color: rgb(35, 31, 32);
    /* height: 15px; */
    line-height:1.8;
    vertical-align: middle;
    position: absolute;
    z-index: 10;float:left;
    right: 8px;
	    left: auto;
		float:right;
    letter-spacing: 0.04em;

      } 
	  
 .end .progress-bar span{
 color:#fff;

}
.end .progress-bar {
    background: #e60012;
}

.record_table td{
height: 40px !important;
padding: 1px 8px;
}

.record_table tr {
    visibility:visible;
}

@media (max-width: 1024px){
.btn_wrap .note {
   
    display: block;
}
.btn_wrap .note:after{
    content: '';
    display: inline-block;
    width: 40px;
    height: 11px;
    background: url(../img/scroll_arrow.png) -32.5px 0 no-repeat;
    background-size: 200px auto;
    -webkit-background-size: 200px auto;
    margin-left: 4px;
}
.tableWrap .note {
    display: block;
}
.tableWrap .note:after{
    content: '';
    display: inline-block;
    width: 40px;
    height: 11px;
    background: url(../img/scroll_arrow.png) -32.5px 0 no-repeat;
    background-size: 200px auto;
    -webkit-background-size: 200px auto;
    margin-left: 4px;
}

}

.rank_list2 .wrap span{
    letter-spacing: -0.023em;

}
.record_rank div.title {
    font-size: 12px; letter-spacing: -0.023em;
}
.record_table th{
font-size: 12px; letter-spacing: -0.023em;
}
.record_table td{
    font-size: 11px; letter-spacing: -0.023em;
}
.record_table td:nth-child(2){
    font-size: 11px;
    line-height: 1.2;
}

.record_table td > span{
    font-size: 11px; letter-spacing: -0.023em;
}
.record_table td > span.price{
font-size: 11px; letter-spacing: -0.023em;
}
.record_table td > span.sm {
    height: auto;
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    margin-top: 4px; letter-spacing: -0.023em;
}


.rbf,.rbx,.rbn.ss,.rbb,.rbn,.rbd,.rbx,.rbd.ss,.rbw{
font-size: 11px; letter-spacing: -0.023em;
}
	</style>

<style>
.step_box2 .step_items > li .cont ul li {
    padding: 0;
    border-right: 0px solid #e5e7ee;
	
    /* display: inline-block; */
    /* width: calc((100% / 8) - 8px); */
    /* margin: 4px;*/
}
.step_box2 .step_items > li .cont button {
   /*width: 100%; */
    /* height: 4rem; */
    padding: 0 2rem;
    font-size: 1.6rem;
    color: #666666;
    /* text-align: center; */
    font-weight: 500;
    line-height: 1;
    /* border: 1px solid #dae1e6; */
    background: #ffffff;
    word-break: keep-all;
    padding: 10px;
    /* border-radius: 4px; */
    box-sizing: border-box;
    background-color: #FEFEFE;
    /* border-radius: 10px; */
    height: 45px;
    font-size: 1.5rem;letter-spacing: -0.023em;
}
.step_box2 .step_options{
/*display:none;*/
}
.step_box2 .step_items > li .cont{
/*
height:auto;
*/
position:relative;
}
.step_box2 .step_items > li .cont ul {
    min-height:100%;
    height: auto;
    padding: 0;
}
.step_box2 .step_items > li:first-child .cont {
    /*border-left-width:0px;
	border: 0px solid #e5e7ee;*/ 
}
.step_box2 .step_items {
    text-align: center;
}
.step_box2 .step_items > li .cont .on button {
    background-color: #004932;
    color: #fff;
}
.step_box2 .step_items > li:nth-child(2) .cont .on button {
    background-color: #2f874b;
    color: #fff;
}
.step_box2 .step_items > li:last-child .cont{
padding: 1.2rem 0 0;
}
.step_box2 .step_items > li .cont .search{

 position: relative;
   
}
.step_box2 .step_items > li .cont ul li.blink {
    border-right: 0px solid #e5e7ee;
}
.cont .search {
    position: absolute;
    top: 2rem;
    left: 50%;
    margin-left: -45%;
    width: 90%;
    height: 4.4rem;
    z-index: 105;margin-bottom:40px;
}

 .cont .search input {display:inline-block; width:100%; height:100%; line-height:1.5; padding-left:1rem; padding-right:5rem; font-size:1.6rem; border:0; vertical-align:middle; border:0.2rem solid #e5e7ee; border-radius:4px; background:#fff; -webkit-transition:-webkit-box-shadow 0.2s ease; transition:-webkit-box-shadow 0.2s ease; -o-transition:box-shadow 0.2s ease; transition:box-shadow 0.2s ease; transition:box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;}
 .cont .search input:focus {outline:0; -webkit-box-shadow:0 0 0 0px rgb(82, 68, 68); box-shadow:0 0 0 0px rgb(82, 68, 68);border:0.2rem solid #2e3d61;}
 .cont .search input:-ms-input-placeholder {color:#707070;}
 .cont .search .btn_search {position:absolute; right:1rem; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); display:inline-block; width:4.6rem; height:4.6rem; background:url('../images/common/ico_head_search.png') no-repeat center center; background-size:2.6rem 2.6rem; vertical-align:middle;}
 .cont .search label > button {width:4.6rem;height:4.6rem;text-indent:-9999px;}

@media screen and (max-width: 1023px){
.step_box2 .step_items > li .cont {
    display: none;
    max-height: 300px;
    height: 100%;
    min-height: 90px;
    border-width: 0;
}

.step_box2 .step_items > li:last-child .cont.tt{
    display: block;
    max-height: 300px;
    height: 200px;
    border-width: 1px !important;
	position:relative;padding: 0 2rem;
}
.step_box2 .step_items > li .cont .search {
    position: absolute;
    top: 24px;
    /* left: 0; */
    right: 0;
    /* margin-left: 0; */
    width: 90%;
    /* height: 6.2rem; */
    border: 0.2rem solid #e5e7ee;
    background: #fff;
}
.step_box2 .step_items > li .cont .search input {
    font-size: 1.4rem;
    border: 0;
    vertical-align: middle;
}
.step_box2 .step_items > li:last-child .title button span:after{
display:none;
}

.step_box2 .step_items > li .cont button {

    font-size: 1.3rem;
}

}

@media (min-width: 1024px){
.online .wrap {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    position: relative;
    max-width: 1480px;
    padding: 0 0px;
    width: 100%;
    z-index: 0;
    margin: 0 auto;
}

}

@media (max-width: 1400px){
.online .wrap {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    position: relative;
    max-width: 100%;
    padding: 0 0px;
    width: 100%;
    z-index: 0;
    margin: 0 auto;
}
.quick_lecture {
    position: relative;
    z-index: 0;
    top: 0rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
    margin: auto;
    background-color: white;
}
}



@media screen and (max-width: 768px){
.step_box2 .step_items > li .cont ul li {
    padding: 0;
    border-right: 0px solid #e5e7ee;/*    float: left;
    display: inline-block;    width: calc((100% / 3) - 6px);margin: 0 3px 10px;;*/
}
.article_title{
    font-size: 2.2rem;
}
.step_box2 .step_items > li .cont button {
    height: 42px;font-size: 1.2rem;
}
.step_box2 .step_items > li:first-child .title {
    height: 40px;
}
.step_box2 .step_items > li .title {
   height: 40px;
}
.step_box2 .step_items > li:nth-child(3) .title {
    height: 40px;
}
.step_box2 .step_items > li:last-child .cont.tt{
    display: block;
    height: 140px;
    border-width: 1px 1px !important;
}
.step_box2 .step_items > li .cont .search input {
    font-size: 1.3rem;
    border: 0;
    vertical-align: middle;    padding-left: 1rem;
}
.step_box2 .step_items > li .cont .search {
    position: relative;
    top: 15px;
    left: auto;
    right: auto;
    margin-left: auto;
    width: 100%;
    margin: 0 auto;
    height: 3.5rem;
    border: 0.2rem solid #e5e7ee;
    background: #fff;
}
.step_box2 .step_items > li:last-child .title button span:after {
display:none;
}
}

.step_box2 .step_items > li .cont .search .srcBox {
    margin: 7px 0 2px;
    padding: 0px 5px 0px 22px;
    background: transparent;
	border-radius:0px;
    position: relative;  font-size: 1.3rem;
    font-weight: 400;
    text-align: left;color: #808080;
}
.step_box2 .step_items > li .cont .search .srcBox:before {
    content: '\E846';
     top: 10%;
    /* left: 50%; */
    transform: translate(-50%, -10%);
    font-size: 15px;
    font-family: 'nc-font';
    left: 10px;
	color:#b2b2c1;
    position: absolute;
}
.step_box2 .step_items > li .cont .search .srcBox.nodis:before {
    content: '\E846';
     top: 10%;
    /* left: 50%; */
	display:none;
    transform: translate(-50%, -10%);
    font-size: 15px;
    font-family: 'nc-font';
    left: 10px;
	color:#b2b2c1;
    position: absolute;
	display:none;
}
.step_box2 .step_items > li .cont .search .srcBox.nodis {
    color: #808080;margin: 3px 0 2px;
}
.step_box2 .step_items > li .cont .search .srcBox .txt {
    line-height: 1.5;
}

.guide_wrap {
    margin-top: 0px;
    width: 100%;
    padding: 15px 0px;
}

@media only screen and (max-width: 768px){

 .step_box2 .step_items > li .cont .search .srcBox {
    margin-top: 6px;
    padding: 4px 0% 0px;
    background-position: center 25px;
    background-size: 40px;
}
.step_box2 .step_items > li .cont .search .srcBox .txt {
    font-size: 12px;
    line-height: 19px;margin-left: 0px;
	letter-spacing: -0.023em;
}
.step_box2 .step_items > li .cont .search .srcBox:before {
    top: 33%;
    /* left: 50%; */
    left: 5px;
    transform: translate(-50%, -33%);display:none;

}

.step_box2 .step_items > li .cont button {

    font-size: 1.3rem;
}
.rank_list2 td {
     padding-left: 12px;

}
.record_rank div.title {
    padding-left: 12px;
}
.board_head.top_txt .count_area {
    color: #808080;
    font-size: 11px;
    text-align: right;
    float: right;
}
.step_box2 .step_items > li:last-child .cont.tt {
    display: block;
    height: 160px;
    border-width: 1px 1px !important;
}
.board_head.top_txt {
    /* display: -webkit-box; */
    display: -ms-flexbox;
    /* display: flex; */
    /* height: auto; */
	 margin-top: 6px;
   margin-bottom: 16px;
    /* -webkit-box-pack: justify; */
    -ms-flex-pack: justify;
    /* justify-content: space-between; */
    line-height: 1;
    position: relative;
    width: 100%;
}
}
.step_box2 .step_items > li .cont ul li.blink{
    font-weight: 400;
    /* line-height: 1; */
    /* border: 1px solid #dae1e6; */

    /* word-break: keep-all; */
    padding: 10px;
    /* border-radius: 4px; */
    box-sizing: border-box;
  
    /* border-radius: 10px; */
    /* height: 100%; */
    color: #2c7fdf;
    font-size: 16px;
    color: #b2b2c1;
    width: 100%;
    vertical-align: middle;
    position: absolute;
    left: 50%;
    top: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	}

.search_tab {/*background-color: #f7f9fa;*/ padding: 18px 24px; border-top: 0px solid #999;border-radius:0 0 0px 0px;    border: 1px solid #e5e7ee;    margin-top: 0px;    position: relative;}


.search_tab:after {
        z-index: -1;
        position: absolute;
        right: 0;
        left: 0;
        top: 0;
        bottom: -100px;
        content: "";
        background: rgba(239, 241, 243, 0.2);
    }

.search_tab > ul > li {display: flex;
    border-bottom: 1px solid #e5e7ee;
    padding-bottom: 10px;
    align-items: center;
	border-bottom: 1px dashed #e5e7ee;}
.search_tab > ul > li + li {padding-top: 10px;}
.search_tab li .tit {width: 120px; font-weight: 600; font-size: 14px ; margin-right: 30px; flex-shrink: 0; padding-top: 0px;margin-bottom: 0px;color: #121e34;
    margin-left: 0px;}
.search_tab li.tab_li .right {display: flex; flex-wrap: wrap; gap: 6px;}


.search_tab li.tab_li .right form{display: flex; flex-wrap: wrap; gap: 6px;}

.search_tab li.tab_li .right .box{}
.search_tab li.tab_li .right .js_select{display: inline-block;}

.search_tab li.tab_li .right .js_select button{
    border: 0;
    background-color: transparent;
    vertical-align: middle;
    cursor: pointer;
    outline: none;padding:0;}

.search_tab li.tab_li .right .js_select input:checked + label {
    background-color: #0e6458;
    color: #fff;
}

.search_tab li.tab_li .right .box{}
.search_tab li.tab_li .right .box label{display: inline-block; height: 37px; padding: 0 18px; background-color: #fff; border-radius: 5px; font-size: 13px; color: #121e34; line-height: 35px; cursor: pointer;font-weight: 600;     border: 1.5px dashed #e5e7ee;}
.search_tab li.tab_li .right .box label.active{background-color:#004932; font-size: 13px; color: #fff;border: 1px solid #004932;}
.search_tab li.tab_li .right .box.act input:checked + label{background-color: #46b2ab;font-size: 13px; color: #fff;border: 1px solid #46b2ab;}

.search_tab li.tab_li .right .box input:checked + label{    display: inline-block;
    color: #121e34;
    border: 1px solid #e5e7ee;
}



.search_tab li.tab_li .right .js_select span{display: inline-block; height: 37px; padding: 0 18px; background-color: #fff; border-radius: 5px; font-size: 13px; color: #121e34; line-height: 35px; cursor: pointer;font-weight: 600;     border:  1.5px dashed #e5e7ee;}



.search_tab li.tab_li .right .js_select.on span{background-color:#0d5d54; font-size: 13px; color: #fff;border: 1px solid #0d5d54;}


.search_tab li.tab_li:nth-child(2) .right .js_select.on span{background-color: #029f6d;font-size: 13px; color: #fff;border: 1px solid #029f6d;}

.search_tab li.sea_li {border-bottom: none; padding-top: 10px; padding-bottom: 0;}

.search_tab li.sea_li.two {border-bottom: none; padding-top: 0px; padding-bottom: 0;display:none;}

.search_tab li.sea_li .tit{padding-bottom: 0px;}

.search_tab .search_inp {width:700px; position: relative; border-bottom: 1px solid #e5e7ee; max-width: 100%;    padding: 10px;
    border-radius: 5px;    border: 2px solid #e5e7ee;background:#fff;}
.search_tab .search_inp .inp {width:100%; height:100%; ; padding:0 0px 0px 0px; border:none; outline: none; display: block}
.search_tab .search_inp input {
    font-family: inherit;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    outline: none;
    border: none;
}
.search_tab .search_inp input {width:100%; height:100%; background-color: transparent; color: #888; font-size: 14px; font-weight: 500;}
.search_tab .search_inp input::placeholder {color: #888; font-size:14px; font-weight: 500;font-weight: 400;letter-spacing:-0.023em;}
.search_tab .search_inp button {font-size:0; position: absolute; top:0px; right:10px; height:100%; padding:3px;}
.search_tab .search_inp button:after{font-size:16px; color: #555;    content: '\E932';
    font-family: 'nc-font';
    font-size: 14px;
    color: #555;
    line-height: 1;
    font-weight: normal;
    position: relative;
    top: 0px;}

.search_tab .search_txt {float:right;position: relative;display: flex;
    width: calc(100% - 610px);
    justify-content: flex-end;}



.search_tab .search_txt .srcBox {
    margin: 0px 0 2px;
    padding: 0px 5px 0px 22px;
    background: transparent;
	border-radius:0px;
    position: relative;  font-size: 13px;
    font-weight: 500;
    text-align: left;color: #808080;    margin-left: 10px;letter-spacing: -0.023em;
}
.search_tab .search_txt .srcBox:before {
    content: '';
     top: 10%;
    /* left: 50%; */
    transform: translate(-50%, -10%);
    font-size: 13px;
    left: 10px;
	color:#b2b2c1;
    position: absolute;

    background: url(../img/common/comm_ico_popup.svg) center no-repeat;
    background-size: 14px;
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: top;
    border: 1px solid #DDE0E3;
    border-radius: 16px;
    transition: background 0.2s ease-out;
    background-color: #fff;



}
.search_tab .search_txt .srcBox.nodis:before {
    content: '\E846';
     top: 10%;
    /* left: 50%; */
	display:none;
    transform: translate(-50%, -10%);
    font-size: 15px;
    font-family: 'nc-font';
    left: 10px;
	color:#b2b2c1;
    position: absolute;

}
.search_tab .search_txt .srcBox.nodis {
    color: #808080;margin: 3px 0 2px;
}
.search_tab .search_txt .srcBox .txt {
    line-height: 1.5;
}
.search_tab .search_txt2{
display:none;
}


@media only screen and (max-width: 1082px){

 .search_tab .search_txt .srcBox {
    margin-top: 6px;
    padding: 4px 0% 0px;
    background-position: center 25px;
    background-size: 40px;display:none;
}
.search_tab .search_txt .srcBox .txt {
    font-size: 12px;
    line-height: 19px;margin-left: 0px;
	letter-spacing: -0.023em;
}
.search_tab .search_txt .srcBox:before {
    top: 33%;
    /* left: 50%; */
    left: 5px;
    transform: translate(-50%, -33%);

}
.search_tab .search_txt {
    float: none;
    position: relative;
    display: none;
    width: 100%;
    justify-content: flex-end;
}
.search_tab li.sea_li .tit {
    padding-bottom: 0px;font-size: 13px;
}
.search_tab li.sea_li.two{display: flex;}
.search_tab .search_txt2 {display: block;}



.search_tab .search_txt2 .srcBox {
    margin: 0px 0 2px;
    padding: 0px 5px 0px 22px;
    background: transparent;
	border-radius:0px;
    position: relative;  font-size: 12px;
    font-weight: 500;
    text-align: left;color: #808080;    margin-left: 0px;
}
.search_tab .search_txt2 .srcBox::before {
    content: '\E846';
     top: 10%;
    /* left: 50%; */
    transform: translate(-50%, -10%);
    font-size: 13px;
    font-family: 'nc-font';
    left: 10px;
	color:#b2b2c1;
    position: absolute;
}
.search_tab li.sea_li.two .tit {
       width: 50px;    margin-right: 15px;
}
.search_tab .search_txt2 .srcBox .txt {
    line-height: 1.5;
}
.search_tab li.sea_li {
    border-bottom: none;
    padding-top: 30px;
    padding-bottom: 0;
}

}




.mobile-search{display:none;}
.mobile_slect{display:none;}



.nice-select {
    -webkit-tap-highlight-color: transparent;
    background-color: #fff;
    border-radius: 5px;
    border: solid 1px #e8e8e8;
    box-sizing: border-box;
    /*clear: both;*/
    cursor: pointer;
    display: block;
    /*float: left;*/
    font-family: inherit;
    font-size: 14px;
    font-weight: normal;
    height: 42px;
    line-height: 40px;
    outline: none;
    padding-left: 18px;
    padding-right: 30px;
    position: relative;
    text-align: left !important;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    width: auto; }
.nice-select:hover {
    border-color: #dbdbdb; }
.nice-select:active, .nice-select.open, .nice-select:focus {
    border-color: #999; }
.nice-select:after {
    border-bottom: 2px solid #999;
    border-right: 2px solid #999;
    content: '';
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 5px; }
.nice-select.open:after {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg); }
.nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0); }
.nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none; }
.nice-select.disabled:after {
    border-color: #cccccc; }
.nice-select.wide {
    width: 100%; }
.nice-select.wide .list {
    left: 0 !important;
    right: 0 !important; }
.nice-select.right {
    float: right; }
.nice-select.right .list {
    left: auto;
    right: 0; }
.nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px; }
.nice-select.small:after {
    height: 4px;
    width: 4px; }
.nice-select.small .option {
    line-height: 34px;
    min-height: 34px; }
.nice-select .list {
    background-color: #fff;
    border-radius: 0px;
    box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
    box-sizing: border-box;
    margin-top: 2px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9; }
.nice-select .list:hover .option:not(:hover) {
    background-color: transparent !important; }
.nice-select .option {
    cursor: pointer;
    font-weight: 500;
    line-height: 40px;
    list-style: none;
    min-height: 40px;
    outline: none;
    padding-left: 18px;
    padding-right: 29px;
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s; }
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
    background-color: #f6f6f6; }
.nice-select .option.selected {
    font-weight: 600; }
.nice-select .option.disabled {
    background-color: transparent;
    color: #999;
    cursor: default; }

.no-csspointerevents .nice-select .list {
    display: none; }

.no-csspointerevents .nice-select.open .list {
    display: block; }


@media screen and (max-width: 1080px){

.search_tab li.tab_li .right .box label {
    display: block;
    padding: 6px 12px;
    background-color: #fff;
    border-radius: 5px;
    font-size: 13px;
    color: #121e34;
	height:auto;
	line-height:1.3;
    cursor: pointer;
    font-weight: 600;
    border: 1px solid #e5e7ee;
	display: inline-block;
    height: 37px;
    padding: 0 18px;
    background-color: #fff;
    border-radius: 5px;
    font-size: 13px;
    color: #121e34;
    line-height: 35px;
    cursor: pointer;
    font-weight: 600;
    border: 1px dashed #e5e7ee;
}
.search_tab .search_inp input {
    width: 100%;
    height: 100%;
    background-color: transparent;
    color: #888;
    font-size: 13px;
    font-weight: 500;
}
.search_tab li.sea_li {
    border-bottom: none;
    padding-top: 10px;
    padding-bottom: 0;
}
.search_tab .search_inp input::placeholder {color: #888; font-size:13px; font-weight: 400;letter-spacing:-0.023em;}
.quick_lecture {
top: 0rem;
}
.search_tab li.sea_li.two {
    border-bottom: none;
    padding-top: 10px;
    padding-bottom: 0;
}
.search_tab li.sea_li.two .tit {
       width: 50px;    margin-right: 15px;
}
#tag_area .first li {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    padding: 6px 7px 6px 7px;
    margin-right: 5px;
    border: 2px solid #00aa9e;
    background: #00aa9e;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
    border-radius: 30px;
    position: relative;
}
#tag_area .second li {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    padding: 6px 7px 6px 7px;
    margin-right: 5px;
    border: 2px solid #00aa9e;
    background: #fff;
    font-size: 1rem;
    font-weight: 600;
    color: #00aa9e;
    letter-spacing: -0.01em;
    border-radius: 30px;
    position: relative;
}
.search_tab li.sea_li.two .tit {
    width: 130px;
    margin-right: 15px;
}

}
	#subStepList2 .blink{
	width: 120px;
    font-weight: 600;
    font-size: 14px;
    margin-right: 30px;
    flex-shrink: 0;
    padding-top: 0px;
    margin-bottom: 0px;
    color: #121e34;
    margin-left: 0px;
     width: 100%;line-height: 40px;
	}
@media screen and (max-width: 560px){
.search_tab .search_txt2 .srcBox .txt {
        line-height: 1.5;
        font-size: 11px;
        letter-spacing: -0.026em;
    }
}
@media screen and (max-width: 768px){
#subStepList2 .blink{

display:none;
}
.search_tab li .tit{
width: 10%;
}
.quick_lecture {
top: 0rem;
}
.search_tab li.tab_li .right .js_select span {

    font-size: 12px;
	height: 32px;
    line-height: 30px;

}
.search_tab li.tab_li .right .js_select.on span {

    font-size: 12px;

}
#tag_area li {
    font-size: 12px;

}
.step_box2 .step_options .btn_L_col1, .step_box2 .step_options .btn_L_col2 {
     font-size: 13px; height: auto;
 
}
.step_box2 .step_options .btn_L_col1:after, .step_box2 .step_options .btn_L_col2:after{

   font-size: 13px;    top: -1px;
}
  #tag_area {
    display: none;
}
	#subStepList2{
     width: 100%;
	}
	.search_tab li.tab_li .right{display: none;}
    .mobile_slect{display:block; flex: 1;width: 100%;}
	form .mobile_slect .inp_box .nice-select{ width: 100%;}
    .mobile_slect .inp_box .nice-select{height:45px; line-height: 43px; border-radius:0; width: 100%; font-size: 13px;    font-weight: 600;border-radius: 5px;
    border: 1px solid #e5e7ee;}
    .mobile_slect .inp_box .nice-select:after{right: 18px;}
    .mobile_slect .inp_box .nice-select .list{max-height:200px; overflow: auto; line-height: 43px; font-size: 13px;width: 100%;    font-weight: 600;}
#cont_head {
    padding-top: 22px;
    padding-bottom: 22px;
    margin-bottom: 0px;
}
.step_box2 .step_options {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 4rem;
    padding: 10px 10px;
    background-color: #fff;
    border: 1px solid #e5e7ee;
    border-top: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.search_tab .search_inp .inp {
    width: 100%;
    height: 100%;
    padding: 0 0px 0px 0px;
    border: none;
    outline: none;
    display: block;
}
.search_tab li.sea_li {
    border-bottom: none;
    padding-top: 10px;
    padding-bottom: 0;
}
.search_tab li .tit {
    width: 50px;
}
.search_tab li .tit {
    margin-right: 15px;
}
.search_tab li.sea_li .tit p {
     margin-bottom: 0px;
}


 .search_tab .search_txt .srcBox {
    margin-top: 6px;
    padding: 4px 0% 0px;
    background-position: center 25px;
    background-size: 40px;display:none;
}
.search_tab .search_txt .srcBox .txt {
    font-size: 12px;
    line-height: 19px;margin-left: 0px;
	letter-spacing: -0.023em;
}
.search_tab .search_txt .srcBox:before {
    top: 33%;
    /* left: 50%; */
    left: 5px;
    transform: translate(-50%, -33%);

}
.search_tab .search_txt {
    float: none;
    position: relative;
    display: none;
    width: 100%;
    justify-content: flex-end;
}
.search_tab li.sea_li .tit {
    padding-bottom: 0px;font-size: 13px;
}
.search_tab .search_txt2 { display: block;}


.search_tab .search_inp {
    height: 45px;
}
#cont_head {
    padding-top: 22px;
    padding-bottom: 22px;
    margin-bottom: 18px;
}
.search_tab .search_txt2 .srcBox {
    margin: 0px 0 2px;
    padding: 0px 5px 0px 22px;
    background: transparent;
	border-radius:0px;
    position: relative;  font-size: 12px;
    font-weight: 500;
    text-align: left;color: #808080;margin-left:0px;
    margin-top: 0px;
}
.search_tab .search_txt2 .srcBox::before {
    content: '\E846';
    top: 7%;
    /* left: 50%; */
    transform: translate(-50%, -7%);
    font-size: 13px;
    font-family: 'nc-font';
    left: 10px;
    color: #b2b2c1;
    position: absolute;
}

#tag_area .first li {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    padding: 6px 7px 6px 7px;
    margin-right: 5px;
    border: 2px solid #00aa9e;
    background: #00aa9e;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
    border-radius: 30px;
    position: relative;
}
#tag_area .second li {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    padding: 6px 7px 6px 7px;
    margin-right: 5px;
    border: 2px solid #00aa9e;
    background: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    color: #00aa9e;
    letter-spacing: -0.01em;
    border-radius: 30px;
    position: relative;
}
.search_tab li .tit{
font-size: 13px;
}

.search_tab .search_txt2 .srcBox .txt {
    line-height: 1.5;
}
.search_tab .search_inp button {
    font-size: 0;
    position: absolute;
    top: 0px;
    right: 5px;
    height: 100%;
    padding: 3px;
}
.rank_list2 .player {
    margin-top: 0px;
    color: #000;
    font-size: 11px;
    -webkit-line-clamp: 1;
    word-break: keep-all;
}
.search_tab li.sea_li.two .tit {
    width: 50px;
    margin-right: 15px;
}
.record_table td {
    padding: 1px 4px;
}
.tag-md {
    padding: 2px 4px 3px;
    border-radius: 20px;
}
.record_table td > span.sm {
    margin-top: 0px;
}
.record_table td:last-child a > span {
font-size: 11px !important;
}

}
.hidden {
    display: block;
    height: 0;
    width: 0;
    font-size: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: none;
}

.record_table td:last-child a{
    font-size: 0;
    margin-top: -1px;
    margin-left: -2px;
    margin-right: -1px;
    margin-bottom: -2px;

}

.record_table td:last-child a > span{
    overflow: hidden;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    vertical-align: top;
    border: 1px solid #DDE0E3;
    background-color: #fff;
	padding:0;
	margin:0;min-height: auto;min-width: auto;    height: 23px;
    padding: 2px 7px 3px;

}


.record_table td:last-child a > span.daegi{
    overflow: hidden;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    vertical-align: top;
    border: 0px solid #DDE0E3;
    background-color: #fff;
	padding:0;
	margin:0;min-height: auto;min-width: auto;    height: 23px;
    padding: 2px 7px 3px;

}


.record_table td:last-child a > span.rbb{

    border: 1px solid #5f87ff;


}

.record_table td:last-child a > span.rbb.daegi{

    border: 1px solid #FF404B;


}

.record_table td:last-child a span.rbx.daegi {
    display: inline-block;
    position: relative;
    vertical-align: top;
    font-weight: 400;  border-radius: 20px;font-size: 12px;    line-height: 19px; background:rgb(255, 115, 86);
}

.rbb.daegi {
    background-image: linear-gradient(to right, #FF404B, #FF404B, #FF404B, #FF404B);
}

.record_table td:last-child a span  > span{
    display: inline-block;
    position: relative;
    vertical-align: top;
    font-weight: 400;

}