@charset "utf-8";

/******************* 핏(문제은행) & 모의고사 공통 *****************/
.sub_wrap {
    padding-bottom:50px;
}
.sub_top_wrap {}
.sub_top_wrap .top_desc {
    margin: 75px auto 60px;
    position: relative;
}
.sub_top_wrap .top_desc ul  {

}
.sub_top_wrap .top_desc ul li {}
.sub_top_wrap .top_desc ul li {
    font-size:16px;
}
.sub_top_wrap .top_desc ul li.txt_red {
    color:red;
}
.sub_top_wrap .top_desc .txt_note {
    padding-left:10px;
    color:red;
}
.sub_top_wrap .btn_details {
    float: right;
    display: block;
    position: absolute;
    top: 19px;
    right: 16px;
    width: 154px;
    height: 34px;
    font-size: 14px;
    border: 1px solid #bebebe;
    box-sizing: border-box;
    padding: 10px 0;
    line-height: 12px;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    z-index: 1;
    letter-spacing: -1px;
}
.sub_top {}
.sub_top .inner {
    padding: 95px 0 45px;
}
.sub_top strong {
    display: block;
    font-size: 53px;
    line-height: 1;
    margin-bottom: 20px;
    font-family: 'noto6';
}
.sub_top span {
    font-size:21px;
    color:#222222;
}
.sub_top .top_img {
    margin-top: -100px;
}

.snb-list-wrap {
    width:100%;
    /* overflow: hidden; */
    background-color: #fff;
    /* border-top:2px solid #1e232e; */
    border-bottom:1px solid #1e232e;
    margin:0 auto;
    background-color: #352125;
}
.snb-list-wrap .snb-list {

}
.snb-list-wrap .snb-list .snb-list-menu {
    position:relative;
    box-sizing: border-box;
    border-left: 1px solid #27181a;
    border-right:1px solid #462e33;
}
.snb-list-wrap .snb-list.snb2 .snb-list-menu {
    width:50%;
}
.snb-list-wrap .snb-list.snb3 .snb-list-menu {
    width:33.333%;
}
.snb-list-wrap .snb-list.snb4 .snb-list-menu {
    width:25%;
}
.snb-list-wrap .snb-list.snb5 .snb-list-menu {
    width:20%;
}
.snb-list-wrap .snb-list {
    border-left:1px solid #462e33; 
    border-right: 1px solid #27181a;
}
.snb-list-wrap .snb-list .snb-list-menu:last-child {
    border-right:1px solid #462e33; 
}
.snb-list-wrap .snb-list .snb-list-menu a {
    display:block;
    position:relative;
    font-size:19px;
    line-height:96px;
    /* padding: 0 10px; */
    box-sizing: border-box;
    text-align: center;
    color:#655e60;
    z-index: 0;
    font-family: 'noto6', 'sans-sarif';
}
.snb-list-wrap .snb-list .snb-list-menu a:hover {
    color:#fff;  
}
.snb-list-wrap .snb-list .snb-list-menu a.selected {
    color:#fff;  
}
.snb-list-wrap .snb-list .snb-list-menu a.selected:after {
    display:inline-block;
    content: '';
    width: 50px;
    height: 50px;
    margin-left: -30px;
    border-top: 5px solid #352125;
    border-right: 20px solid #352125;
    transform: rotate(135deg);
    position: absolute;
    left: 50%;
    bottom: -5px;
    background-color: #352125;
    z-index: -1;
}
.snb-list-wrap .snb-list .snb-list-menu a:after {
    display: none;
}
.snb-list-wrap .snb-list .snb-list-menu .price_off {
    position: absolute;
    top: -30px;
    left: 50%;
    display: block;
    padding: 10px 20px;
    box-sizing: border-box;
    background: linear-gradient(to right, #1554e0, #14aaa4);
    border-radius: 30px;
    color: #fff;
    font-size: 16px;
    line-height: 16px;
    transform: translateX(-50%);
    z-index: 1;
    min-width: 200px;
}
.snb-list-wrap .snb-list .snb-list-menu .price_off:before {
    display: block;
    position: absolute;
    bottom: -7px;
    left: calc(50% - 17.5px);
    width: 25px;
    height: 8px;
    font-size: 14px;
    clear: both;
    content: "";
    background: url(//static-sdedu.akamaized.net/img1/_skin/pass_sidae_new/sub/ico_arr_priceoff.png) no-repeat;
}

.fit,
.specialty {
  	border-top:1px solid #bebfc3;
}
.sub_wrap .btn_refresh {
    display:block;
    position: absolute;
    height: 34px;
    font-size: 15px;
    background: url(//static-sdedu.akamaized.net/img1/_skin/pass_sidae_new/sub/btn_refresh.png) no-repeat left 22.5px center;
    border: 1px solid #575757;
    border-radius: 5px;
    font-family: 'noto5';
}

.sub_wrap {
    padding-bottom: 130px;
}
.sub_wrap .sub_con_top {}
.sub_wrap .sub_con_top .con_top_ttl {
    position:relative;
    border-top: 1px solid #bbbdc0;
    border-bottom: 1px solid #bbbdc0;
}
.sub_wrap .con_top_ttl strong {
    display: block;
    font-size: 20px;
}
.sub_wrap .con_top_ttl .txt_desc {
    line-height: 1;
    font-family: 'noto6', 'sans-sarif';
    font-size: 18px;
    padding: 25px 0;
}
.sub_wrap .con_top_ttl .btn_refresh {
    right: 0;
    top: 27.5%;
    width: 134px;
    padding-left: 30px;
}
.sub_wrap .con_top_select {
    padding: 36px 0 50px;
}
.sub_wrap .con_top_select span {
    font-size:18px;
}
.sub_wrap .con_top_select input[type=checkbox] + label > em {
    border:2px solid #575757!important;
}
.sub_wrap .con_top_select > div + div {
    margin-top:25px;
}
.sub_wrap .con_top_select span.box_ttl {
    display:block;
    float:left;
    width:112px;
    font-family: 'noto5';
}
.sub_wrap .con_top_select ul {
    width:100%;
    margin-left:112px;
}
.sub_wrap .con_top_select ul li {
    float:left;
    margin-right:30px;
}
.sub_wrap .select_number_box ul li input {
    width: 113px;
    height: 33px;
    padding: 0 16px;
    margin-right: 10px;
    box-sizing: border-box;
    border:2px solid #575757;
}
.sub_wrap .sub_con_box {
    height: 615px;
    border:1px solid #e5e7e9;
    box-sizing: border-box;
    overflow: hidden;
}
.sub_wrap .sub_con_box span {
    font-size:15px;
    line-height: 1.4;
}
.sub_wrap .step_box_wrap {
    box-sizing: border-box;
}
.sub_wrap .step_box_wrap + .step_box_wrap {
    border-left:1px solid #e5e7e9;
}
.sub_wrap .step_box01_wrap {
    width:200px;
}
.sub_wrap .step_box02_wrap {
    width:390px;
}
.sub_wrap .step_box03_wrap {
    width:408px;
}
.sub_wrap .step_box_wrap strong {
    display:block;
    position:relative;
    font-size:16px;
    font-family: 'noto5';
    background-color:#e5e7e9;
    line-height: 52px;
    padding: 0 30px;
}
.sub_wrap .step_box_wrap strong:after {
    content: '';
    clear: both;
    display: block;
    position: absolute;
    top: 0;
    left: -1px;
    width: 1px;
    height: 52px;
    z-index: 1;
    background-color: #d2d4d5;
}
.sub_wrap .step_box_wrap label {
    float:right;
    margin-top: 2.5px;
}
.sub_wrap .step_box_wrap label.change {
    margin-top:12.5px;
}
.sub_wrap .step_box_wrap label em {
    margin-right:0;
    width: 17px;
    height: 17px;
}
.sub_wrap .step_box_wrap .step_box {
    position:relative;
    overflow-y: auto;
    height: 502px;
    box-sizing: border-box;
}
.sub_wrap .step_box_wrap .list_box {
  
}
.sub_wrap .step_box01_wrap .step_box {
    height: 563px;
}
.sub_wrap .step_box01_wrap .list_box li {
    min-height: 59px;
    padding: 15px 10px 15px 20px;
    box-sizing: border-box;
    border-top: 1px solid #e5e7e9;
    cursor: pointer;
}
.sub_wrap .step_box01_wrap .list_box li.on {
    display:block;
}
.sub_wrap .step_box01_wrap .list_box li:last-child {
    border-bottom: 1px solid #e5e7e9;
}
.sub_wrap .step_box01_wrap .list_box li span {
    vertical-align: middle;
}
.sub_wrap .step_box01_wrap .list_box li:hover,
.sub_wrap .step_box_wrap .list_box li.selected {
    background-color:#324051;
    color:#fff;
}
.sub_wrap .step_box_wrap .step_box .txt_bold {
    width: 290px;
    /* display:block; */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 2.8em;
}
.sub_wrap .step_box_wrap .list_box .ttl_open_box {
    overflow: hidden;
}
.sub_wrap .step_box_wrap .list_box .ttl_open_box span {
    cursor: pointer;
}
.sub_wrap .step_box02_wrap .step_box {
    margin: 30px 10px;
    padding: 0 30px 0 20px;
}
.sub_wrap .step_box02_wrap .step_box .box {
    display:none;
}
.sub_wrap .step_box02_wrap .step_box .box.on {
    width:315px;
    display:block;
}
.sub_wrap .step_box02_wrap .list_box {
    border-top:2px solid #324051;
    margin-top:20px;
}
.sub_wrap .step_box02_wrap .list_box .open_box {
    padding: 11px 0 0 35px;
    display:none;
}
.sub_wrap .step_box02_wrap .list_box .lists {
    border-bottom:1px solid #bbbfc5;
    padding: 10px 0;
}
.sub_wrap .step_box02_wrap .list_box .lists.fixed_height {
    height: 63.9px;
    box-sizing: border-box;
}
.sub_wrap .step_box02_wrap .list_box .lists span {
    display:block;
    width: 250px;
    max-height: 2.8em;
    max-height:44px;
    word-break: keep-all;
    font-size:14px;
}
.sub_wrap .step_box02_wrap .list_box .open_box li {
    min-height: 24px;
    line-height: 24px;
}
.sub_wrap .step_box02_wrap .list_box .open_box li + li {
    margin-top: 10px;
}
.sub_wrap .step_box02_wrap .list_box .open_box ul label.change {
    margin-top:12.5px;
}
.sub_wrap .step_box02_wrap .list_box input[type="checkbox"]:checked + label + span {
    color:#006bd1;
}
.sub_wrap .step_box02_wrap .lists .ttl_open_box span {
    padding-left:0;
}
.sub_wrap .step_box02_wrap .lists .btn_more_box span {
    padding-left:35px;
    position:relative;
    width: 250px;
}
.sub_wrap .step_box02_wrap .lists .btn_more_box span.hidden {
    padding-left:0;

}
.sub_wrap .step_box02_wrap .lists .btn_more_box span.shown:after{
    display: block;
    content:'+';
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left:0;
    width: 23px;
    height: 23px;
    margin-right: 0;
    background-color: #324051;
    color: #fff;
    font-size: 16px;
    line-height: 20px;
}
.sub_wrap .step_box02_wrap .lists .btn_more_box span.hidden:after{
    display: none;
}
.sub_wrap .step_box02_wrap .lists .btn_more_box span.opened:after {
    content: '-';
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    background-color: #999;
}
.sub_wrap .step_box03_wrap .step_box {
    margin: 30px 10px;
    padding: 0 30px 0 20px;
}
.sub_wrap .step_box03_wrap .step_box .step_boxes {
    display:none;
}
.sub_wrap .step_box03_wrap .step_box .step_boxes.on {
    display:block;
}
.sub_wrap .step_box03_wrap .step_box  .box + .box {
    margin-top:40px;
}
.sub_wrap .step_box03_wrap .step_box .txt_bold i {
    margin-right:10px;
}
.sub_wrap .step_box03_wrap .list_box {
    border-top:2px solid #324051;
    margin-top:20px;
}
.sub_wrap .step_box03_wrap .list_box .lists {
    padding: 10px 0;
    border-bottom: 1px solid #bbbfc5;
}
.sub_wrap .step_box03_wrap .list_box .lists span {
    display:block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width:87%;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 2.8em;
    font-size:14px;
}
.sub_wrap .step_box03_wrap .list_box .desc_list_box {
    margin-top: 5px;
}
.sub_wrap .step_box03_wrap .list_box .desc_list_box li {
   position:relative;
    font-size:13px;
    color:#838383;
    padding:0 18px;
}
.sub_wrap .step_box03_wrap .list_box .desc_list_box li:before {
    display: block;
    content: '|';
    position: absolute;
    left: 0;
    top: 0;
    color: #838383;
    font-size: 13px;
}
.sub_wrap .step_box03_wrap .list_box .desc_list_box li:first-child {
    padding-left:0;
}
.sub_wrap .step_box03_wrap .list_box .desc_list_box li:first-child:before {
    font-size:0;
}
.sub_wrap .step_box03_wrap .list_box .desc_list_box li.txt_red {
    color:#e51b00;
    padding-right:14px;
}
.sub_wrap .step_box03_wrap .list_box .desc_list_box li + li {
    
}
.sub_wrap .step_box03_wrap .list_box .desc_list_box li.preview:before {
    display:none;
}
.sub_wrap .step_box03_wrap .list_box .desc_list_box li.preview {
    padding:0;
}
.sub_wrap .step_box03_wrap .preview .btn_preview {
    width: 58px;
    height: 21px;
    line-height: 19px;
    font-size: 12px;
    color: #555555;
    background: #ececec;
    border: 1px solid #d1d1d1;
    border-radius: 3px;
    box-sizing: border-box;
    cursor: pointer;
    font-family: 'noto3', 'sans-serif';
    vertical-align: text-bottom;
}
.sub_wrap .step_box03_wrap .list_box label {
    margin:12.5px 0 0;
}
.sub_wrap .step_box03_wrap .list_box label em {

}
/******************* //핏(문제은행) & 모의고사 공통*****************/




/******************* 핏(문제은행) *****************/
.fit_top_wrap {

}
.fit_top_wrap .sub_top {
    position:relative; 
}
.fit_top_wrap .sub_top .inner {
    height:535px;  
    background: url(//static-sdedu.akamaized.net/img1/_skin/pass_sidae_new/sub/fit_topimg.png) no-repeat center;
    box-sizing: border-box;
}
.fit_top_wrap .sub_top:before {
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background: linear-gradient(to left, #e86215, #eb1841 50%);
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
/******************* //핏(문제은행) *****************/




/******************* 모의고사 *****************/
.mock_top_wrap {

}
.mock_top_wrap .sub_top {
    position:relative; 
}
.mock_top_wrap .sub_top .inner {
    height:454px;  
    background: url(//static-sdedu.akamaized.net/img1/_skin/pass_sidae_new/sub/online_topimg.png) no-repeat center;
    box-sizing: border-box;
}
.mock_top_wrap .sub_top:before {
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background: linear-gradient(to left, #024dbf, #1080d3 50%);
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.sub_wrap.specialty .con_top_ttl .txt_desc {
    
}
/******************* //모의고사 *****************/




/*******************  이벤트 쿠폰 *****************/
.ev_coupon {
    border-top: 1px solid #bebfc3;
}
.ev_coupon .con_top_ttl strong.txt_top {
    height: 58px;
    background-color: #324051;
    color:#fff;
    line-height:58px;
    text-align:center;
    border-radius: 10px;
}
.ev_coupon .con_top_ttl .btn_refresh {
    top:60%;
}
/*******************  //이벤트 쿠폰 *****************/




/******************* 이벤트 *******************/
.event_wrap {}
.event_wrap .top_visual .img_box {
    position:relative;
    height:452px;
    background-color: #f6bb2d;
}
.event_wrap .top_visual .img_box img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.event_wrap .line_ttl_box {
    background-color:#324051;
}
.event_wrap .line_ttl_box p {
    line-height:80px;
    font-size:28px;
    color:#fff;
    text-shadow: 2px 2px 5px #111; 
}
.event_wrap .coupon_wrap {

}
.event_wrap .coupon_wrap .inner {
    padding:75px 0 140px;
}
.event_wrap .coupon_wrap strong  {
    display:block;
    font-size:21px;
    font-weight:100;
}
.event_wrap .coupon_wrap span {
    font-size:16px;
    color:#5f5f5f
}
.event_wrap .coupon_wrap strong b {
    display:block;
    font-family: 'noto4';
}
.event_wrap .coupon_wrap .col3 {
    padding: 20px 15px;
    box-sizing:border-box;
    background-color:#ededed;
    border-radius: 10px;
    margin:50px auto 15px;
}
.event_wrap .coupon_wrap .col3 li {
    margin: 0 7px;
}
.event_wrap .coupon_wrap .col3 li em {
    display: inline-block;
    width: 27px;
    height: 27px;
    color: #fff;
    background-color: #324051;
    font-style: normal;
    border-radius: 50%;
    margin-right: 4px;
    font-size: 13px;
    line-height: 25px;
}
.event_wrap .registered_coupon {
    padding:40px;
    border:3px solid #324051;
    box-sizing: border-box;
}
.event_wrap .registered_coupon .fl {
    /* width:267px; */
}
.event_wrap .registered_coupon .coupon_num_wrap {
    margin:5px 0 0 18px;
}
.event_wrap .registered_coupon .coupon_num_wrap li input {
    border:1px solid #4e3ec4;
    width:152px;
    height:45px;
    padding:0 20px;
    box-sizing: border-box;
}
.event_wrap .registered_coupon .coupon_num_wrap li i {
    display:inline-block;
    width:20px;
    text-align: center;
}
.event_wrap .registered_coupon .coupon_num_wrap li:last-child input {
    padding: 0 10px;
    font-size: 18px;
    background-color:#4e3ec4;
    color:#fff;
    font-size:19px;
    font-weight:600;
    margin-left:7px;
}
.event_wrap .registered_coupon .coupon-btn{
	cursor: pointer;
}
.event_wrap .registered_coupon .coupon_num_wrap li:last-child input.no_next{
	cursor: auto;
    border:1px solid #afacc3;
    background-color:#afacc3;
}
.event_wrap .registered_coupon  .txt_red {
    float: left;
    width: 100%;
    font-size: 16px;
    color: red;
}
.event_wrap .popup_wrap {
    display:none;
}
/******************* //이벤트 *******************/




/************** 커뮤니티&고객센터 네비게이션 메뉴 공통 *************/
.snb-list-wrap2 {
    width: 100%;
    overflow: hidden;
}
.snb-list-wrap2 .snb-list {
    border-top:none;
}
.snb-list-wrap2 {
    background-color:#2A2E34;
    margin-bottom: 60px;
}
.snb-list-wrap2 .snb-list .snb-list-menu a {
    position:relative;
    line-height:50px;
    font-size:18px;
    color:#fff;
    font-family: 'noto3', 'sans-sarif';
}
.snb-list-wrap2 .snb-list .snb-list-menu a:hover, 
.snb-list-wrap2 .snb-list .snb-list-menu a.selected {
    color:#fff;
    font-family: 'noto6', 'sans-sarif';
}
.snb-list-wrap2.active{
    width: 100%;
    top:68px;
    z-index: 21;
}
.snb-list-wrap2.active .snb-list {
    margin-bottom:0;
}
.snb-list-wrap2  .snb-list .snb-list-menu {
    border:none;
}
.snb-list-wrap2 .snb-list .snb-list-menu:last-child {
    border:none;
}
.snb-list-wrap2 .snb-list .snb-list-menu a.selected:after {
    content: '';
    width: 100%;
    height: 3px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    bottom: -12px;
}
/************** //커뮤니티&고객센터 네비게이션 메뉴 공통 *************/




/********************** 커뮤니티 *******************/

/* netyet */

/********************** //커뮤니티 *******************/




/********************** 고객센터 *******************/

/* FAQ */
.faq {
    width: 100%;
}
.faq.sub_wrap {
    padding-bottom:60px;
}
.faq .tab_wrap {

}
.faq .snb-list-wrap {

}
.faq .snb-list-wrap .snb-list {
 
}
.faq .list-ttl{
    font-size:23.5px;
}
.faq .tab_wrap .total-title {
    margin-bottom:13px;
    overflow: hidden;
}
.faq .tab_wrap .list-total {
    position: relative;
    font-family: 'noto5';
    cursor: pointer;
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: top;
    float: left;
    font-size: 16px;
    color: #000;
    font-family: 'noto5';
    font-weight: 100;
    margin-top: 4px;
}
.faq .tab_box {
    border-top: 2px solid #000;
}
.faq .tab_box li div {
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
}
.faq .tab_box li .cs-q{
    position: relative;
    padding-left: 20px;
    box-sizing: border-box;
}
.faq .tab_box li .cs-q a:before {
    position: absolute;
    left: 0;
    content: "Q";
    font-family: 'noto5';
}
.faq .tab_box li .cs-q:after {
    position: absolute;
    content: "";
    right: 20px;
    top: calc(50% - 6px);
    background: url(/_skin/sidae/images/board_new/arrow_down.png) no-repeat center;
    display: block;
    width: 21px;
    height: 15px;
}
.faq .tab_box li .cs-q.selected:after {
    background: url(/_skin/sidae/images/board_new/arrow_up.png) no-repeat center;
}

.faq .tab_box li .cs-a{
    display: none;
    clear: both;
    width: 100%;
    height: auto;
    margin: 0;
    line-height: 1.5;
    box-sizing: border-box;
    background: #f6f6f6;
    font-size: 14px;
    color: #000;
    padding: 20px;
}
.faq .tab_box li .cs-q a {
    display: block;
    width: 100%;
    height: 100%;
    text-align: left;
    position: relative;
    color: #000;
    line-height: 36px;
    font-family: 'noto5';
    box-sizing: border-box;
    cursor: pointer;
    margin: 0;
    padding: 20px 0 20px 20px;
    font-size: 15px;
    min-height: 60px;
    transition: all 3s;
}
/* //FAQ */

/********************** //커뮤니티 *******************/




/********************** step 박스 스크롤 스타일 *******************/
.sub_wrap .sub_con_box {scrollbar-3dLight-Color: #d3d3d3; scrollbar-arrow-color: #d3d3d3; scrollbar-base-color: #d3d3d3; scrollbar-Face-Color: #444; scrollbar-Track-Color: #d3d3d3; scrollbar-DarkShadow-Color: #d3d3d3; scrollbar-Highlight-Color: #d3d3d3; scrollbar-Shadow-Color: #d3d3d3; }

/* width */
.sub_wrap ::-webkit-scrollbar {
    width: 4px;
}

/* Track */

.sub_wrap ::-webkit-scrollbar-track {
  background: #d3d3d3; 
}
 
/* Handle */
.sub_wrap ::-webkit-scrollbar-thumb {
  background: #222; 
}

/* Handle on hover */
.sub_wrap ::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
/********************** //step 박스 스크롤 스타일 *******************/




/********************* 미리보기 팝업 *******************/

/* 팝업공통 */
.view_popup_wrap {
    display:none;
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    border:2px solid #324051;
    z-index: 999;
}
.view_popup_wrap .popup_ttlbox {
    height: 44px;
    background: #324051;
    padding: 10px 20px 12px;
    box-sizing: border-box;
}
.view_popup_wrap .popup_ttlbox strong {
    display: inline-block;
    color: #fff;
    line-height: 1;
    font-size: 16px;
}
.view_popup_wrap .btn_close {
    display: block;
    width: 56px;
    height: 20px;
    line-height: 20px;
    background: #fff;
    color: #555555;
    border-radius: 5px;
    position: absolute;
    top: 12px;
    right: 12px;
    letter-spacing: -1px;
    border-radius: 3px;
    font-family: 'noto3', sans-serif;
}
.view_popup_wrap .popup_body {
    padding: 20px 5px 20px 20px;
    box-sizing: border-box;
    background-color:#fff;
}
.view_popup_wrap .popup_body .popup_scroll {
    overflow-y: auto;
    padding-right: 15px;
    height: 336px;
    scrollbar-Face-Color: #bbbbbb;
}
.view_popup_wrap .popup_body * {
    color:#324051;
    font-size:14px; 
    line-height: 1.6em;
    box-sizing: border-box;
}
.view_popup_wrap ::-webkit-scrollbar-track {
    background: #dcdcdc; 
}
.view_popup_wrap ::-webkit-scrollbar-thumb {
    background: #bbbbbb; 
}
.apply-popup-bg {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.5);
    z-index: 998;
}
/*//팝업공통 */


/* 문제미리보기 */
.popup_box01 {
    width:650px;
}
.popup_box01 .popup_body {
    max-height:436px;
}
.popup_box01 .popup_scroll {
    margin-top: 18px;
    padding-top:15px;
}
.popup_box01 .item_lists {
    position:relative;  
}
.popup_box01 .item_lists:before {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% - 15px);
    height: 2px;
    background-color: #474747;
    bottom: -18px;
}
.popup_box01 .desc_list + .desc_list {
    margin-top:20px;
}
.popup_box01 .desc_list .list-dot {
    margin-bottom:8px;
}
.popup_box01 .desc_list .desc_details {
    border:1px solid #adb3b9;
    padding: 13px 20px;
}
.popup_box01 .desc_list .desc_details .txt {
    display: block;
}
/* //문제미리보기 */


/* 영역별 문제 구성 미리보기 */
.popup_box02 {
    width: 430px;
    height: 315px;
}
.popup_box02 .popup_body .popup_scroll {
    height: 230px;
}
.popup_box02 .popup_body .item_lists ul {
    margin: 0 0 10px;
}
.popup_box02 .popup_body .item_lists ul li{
    padding: 0 0 0 10px;
    line-height: 1;
}
.popup_box02 .popup_body .item_lists ul li:after {
    top:8px;
}
.popup_box02 .popup_body .item_lists ul li + li {
    margin: 10px 0 0;
}
.popup_box02 table.list-table {
    margin-top: 19px;
}
.popup_box02 table.list-table th {
    text-align: center;
    background: #EEE;
    font-size: 14px;
    font-weight: normal;
    font-family: 'noto5';
    padding: 6px 20px;
    border: 1px solid #afafaf;
}
.popup_box02 table.list-table td {
    border: 1px solid #afafaf;
    padding: 6px 20px;
}
/* //영역별 문제 구성 미리보기 */

/********************* //미리보기 팝업 *******************/

 .snb-list-wrap .tab-area{
     display: flex;
     justify-content: center;
     flex-flow: row wrap;
     /* min-width: 1920px; */
     width: 1000px;
    margin: 0 auto;
 }
.snb-list-wrap .tab-area li{
    width:calc((100% - 0px) / 5);
}