@charset "UTF-8";
html,body{-webkit-user-drag:none; }
.wrap{ overflow-y: auto;} 
.article_head{ display: flex; flex-direction: column; gap:10px; position: relative; justify-content: flex-start; align-items: flex-start; padding-bottom: 30px; border-bottom: 2px solid var(--tit-line); margin-bottom: 30px;} 
h2{ font-weight: 700; color: #222; font-size: 36px; line-height: 1 } 
h2 > span{ font-weight: 400; line-height: 1} 
.article_head h2{ width: 100%; white-space: nowrap; vertical-align: unset} 
.article_head > p{ font-weight: 300; font-size: 20px; letter-spacing: -0.5px; color:#212234;  } 
.article_head .tooltab{ position: absolute; right: 0; top: 30px} 
.headcate_bx{width: 100%; overflow-x: auto; max-width:450px; z-index: 3; margin-top: -10px; } 
.headcate_bx::-webkit-scrollbar {display: none;}
.headcate_bx ul{ display: flex; gap:0 20px; min-width: 100%; height: 100%; align-items: center; flex-wrap: wrap} 
.headcate_bx ul li{ white-space: nowrap; flex: none; position: relative;} 
.headcate_bx ul li.current{} 
.headcate_bx ul li:after{ position: absolute; left: 0; bottom:5px; content: ""; height: 2px; width: 100%; display: block; background:rgba(0,0,0,0)} 
.headcate_bx ul li.current:after{ background:var(--primary)} 


.headcate_bx button, .headcate_bx a{ display: flex; margin: 0; padding: 10px 0; color: var(--color); font-size: 1rem; font-weight: 700; height: 100%; justify-content: center; align-items:center; font-size: 16px} 
.headcate_bx ul li.current  button,.headcate_bx ul li.current a{ color: var(--primary)} 

.bt_goback{ width:32px; height: 32px; background: url("../img/bt_goback.svg") no-repeat 50% 50%; transform: translate(-10px,-7px); margin-bottom: -12px; position: absolute; left: 0; top: 5px} 
/*.bt_goback ~ *{ padding-left: 40px} */


@media all and (max-width:1023px){  
    h2{ font-size: 22px} 
    .article_head{ gap:0px;  padding-bottom:17px; margin: 0 0 20px 0; flex-direction: row; align-items: center;  } 
    .article_head > p.cmt{ display: none} 
    .article_head .tooltab{ display: none} 
    #footer{ padding: 0; height: 107px; justify-content: center; align-items: center} 
    .headcate_bx{ margin-bottom: -10px} 
	.bt_goback{ position: relative; left: auto; top: auto} 
	.bt_goback ~ *{ padding-left: 0} 
	
	.headcate_bx ul li:last-of-type:after{ width: calc(100% - 25px)} 
    .headcate_bx ul{ flex-wrap: nowrap} 
  
}

/******************
element
******************/
/* 네임카드 */
.user_profile{ display: flex; gap:10px; align-items: center} 
.user_profile > .user_pic{ flex: none; width:38px; height: 38px; position: relative; background:#f6f6f6 url("../img/ico_user_default.svg") no-repeat 50% 50%; background-size: 20px; border-radius: 100%; overflow: hidden; align-items: center } 
.user_profile > .user_pic img{ width: 100%; height: 100%; object-fit: cover} 
.user_profile > .user_txt{ display: flex; flex-direction: column; flex: none; white-space: nowrap; align-items: flex-start} 
.user_profile > .user_txt > strong{ font-weight: 400} 

/* like */
.like .num{ display: flex; align-items: center !important; gap:5px !important; line-height: 1  }
.like .num:before{ content: ""; display: block; background: url("../img/btn_saved.svg") no-repeat 50% 50%; background-size: 100%; width: 8px; height: 7px; flex: none } 
td .like .num{ justify-content: center !important} 
.like_btn{ width: 46px; height: 46px; background:var(--primary-light-bg) !important; border-radius: 100% !important; display: inline-flex; flex-direction: column; padding: 0 !important; min-width: auto !important; align-items: center; justify-content: center }
.like_btn:before{ content: ""; background: url("../img/btn_saved.svg") no-repeat 50% 50%; width:18px; height: 18px; display: block; position: relative } 
.like_btn .count{ display: none} 
.like_btn.end{ background: var(--primary) !important;}  
.like_btn.end  .count{ display: block; font-weight: 500 !important; font-size: 12px !important; color: #fff } 
.like_btn.end:before{ filter: brightness(30)} 
.view_foot_like .like_btn{ position: relative; margin-bottom: 20px} 
.view_foot_like .like_btn:after{ position: absolute; left: 50%; bottom: -17px; transform: translate(-50%);font-size: 12px;font-weight: 700; content: "추천"} 



/******************
보기화면
******************/
.article.grid_view01{} /*일반적인 보기등록화면*/
.article.grid_view02{} /* 박스가 있음. ex:전략등록 */
.view_w{ display: flex; flex-direction: column; gap:20px} 
.view_head > *, .view_head > * > strong{ font-size: 1rem; font-weight: 400 }
.view_head { display: flex; justify-content: space-between; gap:75px; border-bottom: 1px solid var(--gray); border-top:0px solid var(--tit-line); padding:0 0px 25px 0px; align-items: center } 
.view_head .tit{ display: flex; justify-content: space-between; width: 100%; align-items: center; gap:50px}  
 .view_head .tit > strong{ font-size:16px; font-weight: 700} 
.headcate_bx + .view_head {padding: 17px 0px; border-width: 2px } 
.view_head .etc{ flex: none; white-space: nowrap; display: flex; justify-content: flex-end; gap:75px; align-items: center} 
.view_head .etc dl, .view_head .etc dl dt, .view_head .etc dl dd{white-space: nowrap; display: flex; justify-content: flex-end; gap:10px; line-height: 1}
.view_body{ border-bottom: 2px solid var(--gray); padding: 10px 0px 40px 0px; min-height: 200px} 


.grid_view01 .view_foot{ margin-top: -10px; border-bottom:2px solid var(--tit-line); margin-bottom: 5px } 
.grid_view01 .view_body + .view_foot{ margin-top: 0; margin-bottom: 0; border-bottom: none} 
.headcate_bx + .view_foot{ border-top: 1px solid var(--gray); padding-top: 20px; margin-bottom: 0; border-bottom: none; margin-top: 0} 
.headcate_bx + .view_foot  .bottom_btn{ margin-bottom: 0px} 
.view_foot + .view_head{ border-top: 1px solid var(--color); padding: 30px 0}  

.view_w + .list_w{ margin-top: 50px; border-top: 2px solid #707070; padding-top: 50px} 
.view_head{}/* 일반 게시판 보기등록 스타일 타이틀. 글씨가 작음 */
[class^="view_head_"], .sub_bx.head, .view_body.type02 .head{ flex-direction: column; display: flex; gap:20px; position: relative; padding-bottom: 20px; border-bottom: 1px solid var(--gray)} /* 타이틀 강조하는 경우, 본문에 타이틀이 들어간 경우 */
[class^="view_head_"] .tit strong,.sub_bx.head .tit strong { font-size: 18px; font-weight: 700}
[class^="view_head_"] .tit .badge, .sub_bx.head .tit .badge, .view_body.type02 .head .tit .badge{ margin-left: 10px; vertical-align:text-bottom } 
[class^="view_head_"] .date, .sub_bx.head .date,  .view_body.type02 .head .date{font-size: 1rem;font-weight: 300;color: var(--tit-line);} 
[class^="view_head_"] .point_box, .sub_bx .point_box,  .view_body.type02 .head  .point_box{position: absolute;right: 30px;bottom: 18px;display: flex;align-items: center;gap: 20px;}
.sub_bx.head{ margin-bottom: -20px} /* 본문에 타이틀이 들어간 경우 */

.grid_view01 .view_w .view_foot + .view_head{ border-top: 0; margin-top:-25px} 
.grid_view01 .view_w .headcate_bx + .view_foot + .view_head{    border-top: 1px solid var(--color); margin-top: 0} 


.grid_view02 .view_body{ border: 1px solid var(--gray); border-radius:18px; padding: 30px;  display: flex; flex-direction: column; gap:60px} 
.grid_view02 h4{ display: flex; align-items: center; gap:10px; font-size: 16px; font-weight: 700} 
.grid_view02 h4 .ico_tit{ width: 34px; height: 34px; background:#EBEBEB; border-radius: 100%; display: inline-flex; align-items: center; justify-content: center } 

.sub_bx [class^="item_"]:not(.item_eximg_plan){ padding-left: 44px} 
.sub_bx ol li{ display: flex; position: relative} 
.pdf_bx{ border-radius: 18px; border: 1px solid var(--gray); padding: 0px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap:10px; padding: 10px} 
.pdf_bx + .editor_box, [class^="file_box"] + .editor_box{ margin-top: 25px} 
 [class^="file_box"]{ border: 1px solid var(--gray); border-radius:var(--radius-S) } 
[class^="file_box"] p.tit{ padding: 20px; position: absolute; left: 0; top:0} 
.view_body.type02{ padding: 0 0 30px 0} 
.view_body.type02  .head{ border: none; padding: 0 0 0 145px} 
.view_body.type02  .head .tit em, .view_body.type02 > .head .tit strong{ font-weight: 700}
.view_body.type02  .head .img{ position: absolute;left: 0px;top: 0px;width: 112px; height: 112px;border-radius: 100%; overflow: hidden; background: #EFEEEE;} 
.view_body.type02  .head .img img{position: absolute;width: 100%;height: 100%;left: 0;top: 50%;transform: translateY(-50%);object-fit: cover;}
.view_body.type02  .head .point_box{ bottom: 0; right: 0} 



.view_list_body{ display: flex; gap:40px; border-bottom: none} 
.view_list_body .head{ max-width: 240px; flex: none; width: 100%} 
.view_list_body .head .card_bx li{ width: 100%} 
.view_body.view_list_body .head{ padding: 0; border: none} 
.view_list_body .view_foot{ margin-top: 20px} 
.view_list_body .list_head{ align-items:center}
.view_list_body .list_head > div:last-child{ display: flex} 
@media all and (max-width:1023px){  
    .grid_view01 .view_foot{ margin-top: 0}    
    .view_body.type02 .head{ padding-left: 90px} 
    .view_body.type02 .head .img{ width: 70px; height: 70px} 
}

/******************
글쓰기화면
******************/
.view_w.write_w{ gap:25px} 
/* 기본 */
.view_w.write_w .view_head{ padding: 0; border-bottom: none}
.view_w.write_w .headcate_bx + .view_head{ padding-top: 5px} 
.view_w.write_w .view_body{ padding: 0; border: none} 
.view_w.write_w .view_body .editor_box{ border: 1px solid var(--gray); border-radius: var(--radius-S); position: relative;; padding-bottom: 30px} 
.view_w.write_w .view_body .editor_box:focus-within{ border-color:var(--tit-line); } 
.view_w.write_w .view_body > * + .editor_box{ margin-top: 25px} 
.editor_box > textarea{ min-height: 320px; border: none !important; box-shadow: none; padding: 20px 20px 0 20px} 
.editor_box > .count{ position: absolute; bottom: 6px; left: 20px;color: var(--gray-t1); font-size: 12px; line-height: 28px;} 


.view_w.write_w .view_body .editor_box + *{ margin-top: 40px} 
/* grid_view02 */
.write_w .form_bx{ display: flex; gap:40px; flex-direction: column} 
.write_w .form_bx dl[class^="item_"]{ display: flex; flex-direction: column; gap:15px; min-height: 46px} 
.write_w .form_bx dl[class^="item_"] dt{}
.write_w .form_bx dl[class^="item_"] dd [class*="_g"].required, .editor_box.required{position: relative} 
.write_w .form_bx dl[class^="item_"] dd [class*="_g"].required:before,  .editor_box.required:before{ content: "*"; position: absolute; left: 10px; top: 8px; color: var(--primary); font-size: 16px; font-weight: 700} 

.url_g, .upload_g{ display: flex; flex-direction: column; gap:10px; position: relative;    align-items: flex-end;; width: 100%} 
.url_g > div{ display: flex;border: 1px solid var(--gray);border-radius: var(--radius-S);position: relative;margin: 0; align-items: center; padding: 0 0 0 20px } 
.url_g > div input{ border: none !important} 
.url_g > div strong{ flex: none; font-weight: 400; color: var(--gray-t2); flex: none} 
.url_g > div .input_g{ width: 100%} 
.write_w .form_bx dl.item_time{ flex-direction: row; align-items: center;height: 46px;border: 1px solid var(--gray);font-size: 1rem;border-radius: var(--radius-S); gap:0px; min-height: auto; } 
.write_w .form_bx dl.item_time dt{ color: var(--gray-t2); font-size: 14px; font-weight: 400; padding-left: 20px; line-height: 44px; height: 100%; flex: none; white-space: nowrap;  width: 65px} 
.write_w .form_bx dl.item_time dd{ height: 100%; width: 100%; } 
.write_w .form_bx dl.item_time dd .input_g{ padding-left: 15px} 


.write_w .form_bx dl.item_time dd .input_g.required:before{ left: 0} 
.write_w .form_bx dl.item_time .dates{ border: none; width: 100%; padding-left: 0; height:44px; min-height: auto} 
.write_w .form_bx dl.item_time p[class^="guide"]{ margin-left: -65px} 
.write_w .form_bx dl.item_tit + .flex{ margin-top: -15px} 
.view_w.write_w .view_body .form_bx + .form_bx{ margin-top: 40px} 

.view_w.write_w .view_foot[data-only_web] .bottom_btn{ margin-bottom: 0} 


@media all and (max-width:1400px){ 
    .view_head, .view_head .etc{ gap:30px}       
}
@media all and (max-width:1300px){ 
    .view_head, .view_head .tit{ flex-direction: column; gap:10px 50px; align-items: flex-start} 
    .view_head .tit{ flex-direction: row}      
    .view_head .tit > .writer .user_profile .user_txt{flex-direction: row} 
    .view_head  .user_profile > .user_pic{ width: 22px; height: 22px; background-size: 13px} 
    .user_txt .dfn_grd{ color: var(--gray-t2)}     
    .view_head .etc{ width: 100%} 
}


@media all and (max-width:1023px){  
    .view_head{ flex-direction: column; gap:10px; padding:0 0 20px 0; align-items: flex-start}   
    .headcate_bx + .view_head{padding: 0 0 20px 0; border-width: 0} 
    .view_w.write_w .headcate_bx + .view_head{ padding-top: 0} 
    .view_head .etc{ font-size: 12px; color:var(--gray-t1); gap:10px; justify-content: flex-start} 
     .view_head .tit{ flex-direction: column; gap:6px} 
    .view_head .tit > strong{ order: 5} 
    .view_head .tit > .writer{ order: 1; }   
   
    .view_body{ padding: 0 0 10px 0; min-height:150px } 
    .view_head .tit > .writer .user_profile .user_txt{ font-size: 12px} 
    .grid_view02 .view_body{ padding: 20px} 
    [class^="view_head_"] .point_box, .sub_bx .point_box, .view_body.type02 .head .point_box{ position: relative; right: auto; bottom: auto; margin-top: 0px} 
    .sub_bx [class^="item_"]:not(.item_eximg_plan){ padding-left: 0} 
}


/******************
공지사항
******************/
/* 모바일 관리자용 버튼 처리 */
.mobile body[class^="noti-"] .admin_wp .list_foot .bottom_btn{ display: none} 
.mobile body[class^="noti-"] .admin_wp .list_foot .bottom_btn + .paging_bx{ margin-top: 0} 
body[class^="noti-"] .headcate_bx{ width: 100%; max-width: none} 

/******************
전략등록
******************/
.sub_bx{ display: flex; flex-direction: column; gap:20px} 
.sub_bx [class^="item_eximg"]{ display: flex; flex-wrap: wrap; gap:15px} 
.sub_bx [class^="item_eximg"] li{ width:calc(33.33% - 10px); border-radius: 18px; overflow: hidden; }
.sub_bx [class^="item_eximg"] .img{ width: 100%;  position: relative;padding-top:63.88%; } 
.sub_bx [class^="item_eximg"] img{ position: absolute; left: 50%; top:50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%,-50%)} 

.sub_bx .img.nopic{background: #EFEEEE}
.sub_bx li{ position: relative} 
[class^="item_link"]{ display: flex; flex-direction: column;align-items: flex-start; gap:20px} 
[class^="item_link"] li{ display: inline-flex; padding-right: 20px; gap:6px; align-items: baseline } 
[class^="item_link"] li:hover{ color: var(--primary-txt)} 
[class^="item_link"] .bt_linkgo{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("../img/bt_upload.svg") no-repeat 100% 4px; background-size: 12px} 

.item_link_plan li > strong{ text-decoration: underline;text-underline-position: under; line-height: 1.6; word-break: break-all } 

.item_link_plan  li:before{ background:var(--color); display: flex; width: 16px; height: 16px; flex: none; content: "1"; border-radius: 100%; text-decoration: none; color: #fff; align-items: center; justify-content: center; line-height: 1; font-size: 10px; font-weight: 500;  } 
.item_link_plan > li:nth-of-type(1):before{ content: "1"} 
.item_link_plan > li:nth-of-type(2):before{ content: "2"} 
.item_link_plan > li:nth-of-type(3):before{ content: "3"} 
.item_link_plan > li:nth-of-type(4):before{ content: "4"} 
.item_link_plan > li:nth-of-type(5):before{ content: "5"}
.item_link_plan > li:nth-of-type(6):before{ content: "6"} 
.item_link_plan > li:nth-of-type(7):before{ content: "7"} 
.item_link_plan > li:nth-of-type(8):before{ content: "8"} 
.item_link_plan > li:nth-of-type(9):before{ content: "9"} 
.item_link_plan > li:nth-of-type(10):before{ content: "10"} 
.item_link_plan > li:nth-of-type(11):before{ content: "11"}
.item_link_plan > li:nth-of-type(12):before{ content: "12"}
[class^="item_stand"] .card_list{ gap:16px} 
[class^="item_stand"] .card_list li{ padding: 0; border-color: var(--gray); overflow: hidden; gap:0;width: calc(25% - 12px);} 
[class^="item_stand"] .card_list .tit{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; text-align: center; padding:15px; line-height: 20px; background: #FAFAFA; border-bottom: 1px solid var(--gray); color: #707070; line-height: 1} 
[class^="item_stand"] .card_list li:hover .tit, [class^="item_stand"] .card_list li:focus-within .tit {background: var(--secondary-bg); }
[class^="item_stand"] .card_list .img{ border-radius: 0; padding-top: 75%; height: 0 } 
[class^="item_stand"] .card_list .img.nopic{ background: #fff} 
.write_w .form_bx dl.item_upload.stand{ min-height: 60px} 

.bt_more_txt{ text-decoration: underline; gap:0; line-height: 24px; font-weight: 700} 
.bt_more_txt:after{font-family: "remixicon";font-style: normal;font-weight: normal;speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content:"\EA6E"; line-height: 23px;} 

.jconfirm-type-pop_store_list{ max-width: 660px} 
.store_list{ display: flex; flex-wrap: wrap; gap:0px 0px; position: relative } 
.store_list:after{ content: ""; display: block; width: 100%; height: 3px; border-bottom: 1px dashed var(--gray-t3); position: absolute; left: 0; bottom: 0; background: #fff} 
.store_list li{  width: 50%; display: flex; gap:20px; text-align: left; justify-content:  flex-start; padding: 14px 0 12px 0; border-bottom: 1px dashed var(--gray-t3); word-break: break-all} 
.store_list li .name{word-break: break-all} 
.store_list li:nth-of-type(2n+1){ padding-right:30px} 
.store_list li:nth-of-type(2n){ padding-left: 30px} 

.step_bx .step{ display: flex; gap:60px; } 
.step_bx li{ color: var(--gray-t1); font-size: 16px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap:14px; position: relative} 
.step_bx li.curr{ color:var(--color); font-weight: 700 } 
.step_bx li:before{ content: "1"; display: flex; align-items: center; justify-content: center; width:46px; height: 46px; border: 1px solid var(--gray); background: #fff; color:  var(--gray-t1); font-size: 16px; border-radius: 100% }
.step_bx li:nth-child(2):before{ content: "2"} 
.step_bx li:nth-child(3):before{ content: "3"} 
.step_bx li.curr:before{ font-weight: 400; color: #fff; background: #FF5F66; border: none} 
.step_bx li + li:after{content: ""; background-image: linear-gradient(to right, #E2E2E2 33%, rgba(255,255,255,0) 0%);background-position: 0;background-size: 8px 4px;background-repeat: repeat-x; content: ""; display: block; width:63px; height: 3px; position: absolute; left: -55px; top:22px; } 
.view_w > article[class^="step"]{ border-top: 1px solid var(--gray); padding-top: 30px; display: flex; flex-direction: column; gap:20px} 
.write_w .step01 .part_wrap, .write_w .step01 .code_wrap{ margin-top: -10px; display: flex; flex-direction: column; gap:10px} 
.form_bx p.total{ font-weight: 500;} 
.form_bx p.total>strong{ font-weight: 500; color: var(--primary)} 
.part_wrap .part_list{ display: flex; flex-direction: column; gap:10px;} 
.part_wrap .part_list li{ border: 1px solid var(--gray);border-radius: var(--radius-S); position: relative; margin: 0} 
.part_wrap .part_list li > label{ display: flex; width: 100%; padding:0 20px; align-items: center}
.part_wrap .part_list li > label>strong{ flex: none; white-space: nowrap; font-weight: 500; padding-left: 30px} 
.part_wrap .part_list li input{ border: none; width: 100%; text-align: right; padding-right:15px;font-weight: 500 } 
.part_wrap .part_list li input[type="checkbox"]{ position: absolute; left: 20px; top:10px; width:30px; height: 30px; opacity:0; z-index: 2}
.part_wrap .part_list li input[type="checkbox"] + strong:before{content: "";display: block;background: #fff;cursor: pointer;border: 1px solid var(--gray);width: 20px;height: 20px;box-sizing: border-box;border-radius: 6px;flex: none; position: absolute; left: 20px; top:50%; transform: translateY(-50%)}
.part_wrap .part_list li input[type="checkbox"]:checked + strong:before {background: var(--primary-txt);border-color: var(--primary-txt);}
.part_wrap .part_list li input[type="checkbox"]:checked + strong:after{position: absolute; left:20px; top:50%; width:20px; height:20px; display: block;font-family: "remixicon"; font-style: normal; speak: none;  text-decoration: inherit; text-align: center; font-variant: normal;  text-transform: none; -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale; content: "\EB7B";  color: #fff; font-weight: 400; font-size:14px; display: flex;  justify-content: center; opacity: 1; transform: translateY(-50%); align-items: center} 

.part_wrap .part_list li .unit{ color: var(--gray-t1); font-size: 16px} 
.part_wrap .part_list li button{ width: 100%; height: auto; min-height: 46px; text-align: left; padding: 5px 20px;flex: none;font-weight: 400; display: flex; flex-wrap: wrap; gap:0 5px; align-items: center; align-content: center; line-height: 1.5} 
.part_wrap .part_list li button > .plan{ margin-left: 10px} 
.part_wrap h3{font-size: 16px;font-weight: 700; margin-bottom: 15px} 
.file_box_error{ padding: 20px; } 
.file_box_error .guide + p{ margin-top: 15px} 
.file_box_error .guide ~ p{ display: flex; align-items: center; gap:6px} 
.file_box_error .guide ~ p:before{ content: ""; display: flex; width: 3px; height: 3px; background: var(--color); border-radius: 100%; flex: none} 
.item_url dd{ display: flex; flex-direction: column; gap:40px; align-items: flex-end} 
[class^="item_"] dd .bt_add{ margin-top: -20px; border: 1px solid var(--gray); min-height: auto; height: 28px; background:#F7F7FA; padding: 0 10px;align-self: flex-end; font-weight:600; font-size: 12px; border-radius: 6px} 
[class^="item_"] dd .bt_add:before{font-family: "remixicon"; font-style: normal; font-weight: normal; speak: none; display:block;  text-decoration: inherit; text-align: center; font-variant: normal;  text-transform: none; -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale; content:"\ea13";} 
.url_g + .url_g:before, .upload_g + .upload_g:before{ content: ""; width: 100%; height: 1px; display: block; border-bottom: 1px dashed var(--gray); position: absolute; left: 0; top:-20px} 
.url_g .bt_del, .upload_g .bt_del{ order: 1; width: 16px; height: 16px; background:#aeaeae; border-radius: 100%; flex: none; min-width: auto; min-height: auto} 
.url_g .bt_del:before,  .upload_g .bt_del:before{    content: "\eb99"; font-size: 12px; color: #fff; width: 100%; height: 100%; line-height: 16px} 
.url_g > div,  .upload_g > div{ order: 2; width: 100%} 


.channel .select2-search { } 

dl.item_upload dd{display: flex;flex-direction: column;gap: 40px;align-items: flex-end;} 
dl.item_upload dd .item_chk_tab{ margin-bottom: -20px} 
.write_w .form_bx [class^="item_"] dd > .flex{ gap:20px} 
.write_w .form_bx [class^="item_"] dd > .flex > div{ width: 100%} 
.write_w .form_bx [class^="item_"] dd .point{ display: flex; flex-direction: column; gap:10px; position: relative} 
.write_w .form_bx [class^="item_"] dd > .flex [class*="_g"].point.required:before{ top:30px} 

.write_w .form_bx .point > strong{ font-weight: 400; line-height: 1} 
.write_w .form_bx .point input{ position: relative} 
.write_w .form_bx .point:after{ content: "P"; width: 24px; height:24px;  display: block; position: absolute; right:20px; bottom:11px; z-index: 3; border: 1px solid var(--color); font-weight: 500; display: flex; align-items: center; justify-content: center; border-radius: 100%; line-height: 25px} 
.write_w .form_bx .point input:disabled + .point:after{ opacity: 0.5} 
.point.disabled:after{ opacity: 0.14} 
.item_time.disabled{ background:#FBFBFB} 

input.dates:disabled{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='21' viewBox='0 0 19 21'%3E%3Cg transform='translate(0.5 0.5)'%3E%3Crect id='Rectangle' width='18' height='18' rx='3' transform='translate(0 2)' fill='none' stroke='%23e2e2e2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1'/%3E%3Cpath id='Path' d='M.75,0V3.25' transform='translate(4.25)' fill='none' stroke='%23e2e2e2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1'/%3E%3Cpath id='Path-2' data-name='Path' d='M.75,0V3.25' transform='translate(12.25)' fill='none' stroke='%23e2e2e2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1'/%3E%3Cg transform='translate(4.998 10.333)'%3E%3Cpath id='Path-3' data-name='Path' d='M.743.75H.757' transform='translate(-0.733 -0.75)' fill='none' stroke='%23e2e2e2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='2'/%3E%3Cpath id='Path-4' data-name='Path' d='M.743.75H.757' transform='translate(3.266 -0.75)' fill='none' stroke='%23e2e2e2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='2'/%3E%3Cpath id='Path-5' data-name='Path' d='M.743.75H.757' transform='translate(-0.743 3.25)' fill='none' stroke='%23e2e2e2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='2'/%3E%3Cpath id='Path-6' data-name='Path' d='M.743.75H.757' transform='translate(3.257 3.25)' fill='none' stroke='%23e2e2e2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='2'/%3E%3Cpath id='Path-7' data-name='Path' d='M.743.75H.757' transform='translate(7.265 -0.75)' fill='none' stroke='%23e2e2e2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='2'/%3E%3Cpath id='Path-8' data-name='Path' d='M.743.75H.757' transform='translate(7.256 3.25)' fill='none' stroke='%23e2e2e2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='2'/%3E%3C/g%3E%3Cpath id='Path-9' data-name='Path' d='M0,.75H17.485' transform='translate(0.515 5.088)' fill='none' stroke='%23e2e2e2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E%0A");}

@media all and (max-width:1023px){  
    [class^="item_stand"] .card_list li{width: 100%;} 
    [class^="item_stand"] .card_list .img{ width:100%; padding-top: 70%; left: auto; top: auto} 
}

/******************
과정관리
******************/
.card_long2_bx .card_list{ gap:0} 
.card_long2_bx .card_list > li{ border: none; border-radius: 0; display: flex; flex-wrap: wrap; gap:0 40px; padding: 0; background: #fff !important; padding-bottom: 50px} 
.card_long2_bx .card_list > li + li{ border-top: 10px solid var(--dvdline2); padding: 50px 0}
.card_long2_bx .card_list > li:last-of-type{ padding-bottom: 0} 
.card_long2_bx .card_list > li .reply_bx{ width: 100%} 
.card_long2_bx .txt_bx{ width: 100%;} 
.card_long2_bx .txt_bx > *{ float: right; width: calc(50% - 20px)} 
.card_long2_bx .img_bx{ overflow: hidden; position: relative; padding-bottom: 20px; width: calc(50% - 20px);  float: left; margin-right: 40px; height:  calc(100% + 50px)} 
.card_long2_bx .bx-wrapper{ width: 100%;margin: 0 !important; box-shadow:  none !important; border: none !important} 

.list_body .card_long2_bx .txt{ text-overflow: unset;-webkit-line-clamp: unset; } 
.card_long2_bx .plan_tit{ margin-bottom: 20px; padding-right:35px } 

.card_long2_bx .plan_tit{ font-weight: 700; font-size: 16px} 

.card_long2_bx .user_profile{ position: relative; } 
.card_long2_bx .user_profile > .user_pic{ position: absolute; right: 0; top: -5px} 
.card_long2_bx .reply_bx .user_profile > .user_pic{ position: relative; right: auto; top: auto} 

.card_long2_bx  .user_profile > .user_txt{ flex-direction: row; align-items: center; gap:4px} 
.card_long2_bx  .user_profile > .user_txt > strong{ font-size: 16px;} 
.card_long2_bx  .user_profile > .user_txt > strong .name{ font-weight: 700; } 
.card_long2_bx .user_profile > .user_txt .dfn_grd{ font-size: 12px} 
.list_body .card_long2_bx .txt_bx .tit{ display: block; padding-right: 50px} 


.card_long2_bx .store_info{font-size: 12px; color:var(--grat-t1)}
.card_long2_bx .txt_bx > .txt{ padding: 20px 0; border-top: 1px solid var(--gray); margin-top: 10px} 
.card_long2_bx .txt_bx  .stand_info{ margin-top: 40px; margin-bottom: 40px} 
.card_long2_bx .img_bx .date{ color: var(--color); font-weight: 400;position: absolute; left: 0; bottom:40px} 
.card_long2_bx .img_bx .img{ width: 100%; height: auto; position: relative; left: auto; top: auto; border-radius: 0;border: 1px solid var(--gray); border-radius:18px; overflow: hidden; display: flex; align-items: center  } 
.card_long2_bx .img_bx .img img{ position: relative; transform: none; width: 100%; height: auto; left: auto; top:auto; } 
.card_long2_bx .img_bx .img ~ div{ padding: 0} 

.card_long2_bx .img_bx .img.nopic{ min-height: 150px} 
.card_long2_bx .img_bx .img.nopic img{ position: absolute} 
.card_long2_bx .card_list > li .tool_bx{ clear: both; float: none; justify-content: flex-end;display: flex; width: 100%; margin-top: -20px; position: relative; z-index: 2 } 
.foot_btn{ display: flex; gap:10px; position: relative} 
.foot_btn button{ display: flex; flex-direction: column; font-size: 12px; font-weight: 700; flex: none; gap:8px; position: relative;; -webkit-tap-highlight-color:rgba(0,0,0,0)} 
.foot_btn button:before{ border: 1px solid var(--gray); width: 52px; height: 52px; background: #fff url("../img/btn_edit.svg") no-repeat 50% 50%; content: ""; background-size: 20px; border-radius: 100%} 
.foot_btn button.bt_reply:before{ background-image: url("../img/btn_reply.svg")} 
.foot_btn button.bt_save:before{ background-image: url("../img/btn_save.svg")} 
.foot_btn button.bt_save.on:before{} 
.foot_btn button.bt_best:before{ background-image: url("../img/btn_best.svg");background-color: #FFF1F2;border-color: #FFF1F2;} 
.foot_btn button.bt_good:before{ background-image: url("../img/btn_good.svg");background-color: #FFF1F2;border-color: #FFF1F2;} 
.foot_btn button.bt_okay:before{ background-image: url("../img/btn_good.svg");background-color: #FFF1F2;border-color: #FFF1F2;}
.foot_btn button.bt_bad:before{ background-image: url("../img/btn_bad.svg");background-color: #FFF1F2;border-color: #FFF1F2;}
.foot_btn button.bt_recommend:before{ background-image: url("../img/btn_saved.svg")}
.foot_btn button.bt_recommend.on:before{}  


.evabox.toggleinfo{ width: auto; top:90px; right: auto; left:-80px; background: #F7F7FA; padding: 20px} 
.evabox.toggleinfo:before{ display: none} 
.evabox.toggleinfo .bt_g{ display: flex; gap:10px} 
.evabox.toggleinfo button.bt_best:before, .evabox.toggleinfo button.bt_good:before, .evabox.toggleinfo button.bt_bad:before, .evabox.toggleinfo button.bt_okay:before { background-color: #fff;    border: 1px solid var(--gray);}


.card_long2_bx .card_list > li:last-of-type .evabox.toggleinfo{ top: auto; bottom: 80px} 

.foot_btn button.on:before{ background-color: #FFF1F2; border-color:  #FFF1F2} 
.foot_btn button  strong.num:before{content: "("}
.foot_btn button  strong.num:after{content: ")"}
.reply_bx{ position: relative; margin-top: 50px; display: none; z-index: 1} 
.reply_bx.on{ display: block} 

.view_w > .reply_bx{ margin-top: 0} 
.reply_list { padding: 30px 0} 


.reply_bx h3{ font-size: 16px; font-weight: 700; border-bottom: 1px solid var(--gray); padding-bottom: 10px } 
.reply_bx > .bt_close{ width: 20px; height: 20px; position: absolute; right: 0; top: 0; background: url("../img/bt_close.svg") no-repeat 50% 50%; background-size: 10px} 
.dep1_reply, .dep2_reply{ position: relative} 
.reply_list .user_profile{ font-size: 12px;} 
.reply_list .user_profile .name{ font-weight: 700; font-size: 1rem} 
.reply_list .badge_group{ position: absolute; left:25px; top:0px; z-index: 3 } 
.replytxt .txt{ margin-top: 20px; padding-left: 48px} 

.replytxt pre, .cmt_box pre{text-wrap: unset; } 

.replytool{ padding-left: 48px; margin-top: 25px; display: flex; justify-content: space-between } 
.replytool .date{ font-size: 12px}
.replytool .bt_comment{ border-bottom: 1px solid var(--gray-t1); color:var(--gray-t1); min-height: 18px; line-height: 18px } 
[class^="more_bx"]{ position: absolute; right: 0; top: 0}
.card_long2_bx .card_list > li + li > .more_bx{ top:50px} 
[class^="more_bx"] .more{ color: var(--gray-t2)} 
[class^="more_bx"] .more:before{font-family: "remixicon"; font-style: normal; font-weight: normal; speak: none; display:block;  text-decoration: inherit; text-align: center; font-variant: normal;  text-transform: none; -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale; content:"\EF78"; font-size: 20px} 




.reply_bx [class*="_write"]{ margin-left: 0px; margin-top: 40px;  border: 1px solid var(--gray); background: #FCFCFC; border-radius: var(--radius-S); padding: 20px; margin-bottom: 30px} 
.reply_bx .reply_list [class*="_write"]{ margin-left: 56px; margin-bottom: 0; } 
.reply_bx [class*="_write"] textarea{ border: none; margin-top: 20px; padding: 0; height: 60px } 
.reply_bx [class*="_write"] textarea:-ms-input-placeholder{ color: #999}    
.reply_bx [class*="_write"] textarea::placeholder{color: #999} 

.reply_bx [class*="_write"] .btn_box{ display: flex; justify-content: flex-end; gap:10px; position: relative} 
.reply_bx [class*="_write"] .btn_box button{ height: 28px; background: #FFF1F2; color:#FF535A; padding: 0 7px; border-radius: 8px  } 
.reply_bx [class*="_write"] .btn_box button.bt_cancel{ background:#F2F2FF; color:#5D5DFF} 
.reply_bx [class*="_write"] .btn_box .count{ position: absolute; left: 0; top: 0; color: var(--gray-t1); font-size: 12px; line-height: 28px } 
.reply_bx [class*="_write"] .txt{ margin-top: 0} 
.dep2_reply{ margin-left:56px} 
.dep2_reply .replytxt .txt, .dep2_reply .replytool{ padding-left: 0} 
.dep2_reply:before{ content: ""; width: 10px; height: 12px; border: 1px  solid #c9c9c9; border-width: 0 0 1px 1px; position: absolute; left:-20px; top: 0} 
.dep2_reply.replymodi_write:before{ display: none} 
.dep1_reply + .dep1_reply{ margin-top: 40px} 
.reply_bx .reply_list [class*="_write"] + [class*="_reply"]{ margin-top: 40px} 
.replymodi_write{ margin-left: 0 !important} 
.replymodi_write .txt{ padding-left: 0} 
.dep2_reply.replymodi_write{ margin-left: 56px !important} 
.dep2_reply.replymodi_write .txt{ padding-left: 0}
.reply_bx .reply_write{ margin-bottom: 0} 
.dep2_reply + .dep2_reply{ margin-top: 40px} 
.replytool + .dep2_reply{ margin-top: 40px} 
.replymodi_write:not(.dep2_reply){ margin-top: 0} 
.dep02_write{ display: none} 
.dep02_write.on{ display: block} 
.card_long2_bx .txt_bx .tit, .card_long2_bx .user_profile{ padding-right: 50px} 

.card_list .bx-wrapper .bx-controls-direction a{ height: 100%; top: 0; margin-top: 0; border-radius: 0; width: 60px; background: rgba(0,0,0,0) !important} 
.card_list .bx-wrapper .bx-controls-direction a.bx-next{ right: 0;} 
.card_list .bx-wrapper .bx-controls-direction a.bx-prev{ left: 0;} 
.card_list .bx-wrapper .bx-controls-direction a:before{ content: ""; width: 40px; height: 40px; display: block; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);background:var(--color) url("../img/bt_next.svg") no-repeat 50% 50% !important; z-index: 3; border-radius: 100%} 
.card_list .bx-wrapper .bx-controls-direction a.bx-prev:before{ background-image: url("../img/bt_prv.svg") !important} 
.card_list .pic_more{ position: absolute ;left: 50%; bottom:0; transform: translate(-50%, -100px); z-index: 3} 
.card_list .pic_more button{ background: rgba(0,0,0,0.58); text-align: center; height: 46px; border-radius:26px; color: #fff; font-size: 14px; padding: 0 20px; font-weight: 400} 
@media all and (min-width:1024px){  
.jconfirm-light.type2 .jconfirm-holder{ max-width: 30vw; transform: translateX(calc(-50% + 100px))} 
.jconfirm-light.type2 .jconfirm-scrollpane, .jconfirm.jconfirm-light.type2  .jconfirm-row, .jconfirm.jconfirm-light.type2  .jconfirm-cell{ justify-content: flex-start} 
}

.card_long2_bx .card_list .form_bx textarea{ min-height: 80px}


@media all and (max-width:1023px){  	
	.card_long2_bx .card_list > li:before{ content: ""; width: 100vw; height: 10px; position: absolute; left: 50%; top:-5px; transform: translateX(-50%);  background: var(--dvdline2)} 
	.card_long2_bx .card_list > li{ padding-top: 35px; flex-direction: column; flex-wrap: nowrap; padding-bottom: 30px}
	.card_long2_bx .card_list > li + li{ border: none; padding: 35px 0} 
	.card_long2_bx .img_bx, .card_long2_bx .txt_bx{ width: 100%} 
	.card_long2_bx .txt_bx{ display: flex; flex-direction: column} 
	.card_long2_bx .txt_bx > *{ float: none; width: 100%; order: 1} 
	.card_long2_bx .txt_bx > .img_bx{ width: 100% ; height: auto; order: 2} 
	.card_long2_bx .txt_bx > .txt{ order: 3; border: none;  padding: 0} 
	.card_long2_bx .img_bx{ padding-bottom: 0px} 
	.card_long2_bx .card_list > li > .more_bx, .card_long2_bx .card_list > li + li > .more_bx{ top:30px} 

	.card_long2_bx .txt_bx .plan_tit{ } 
	 .card_long2_bx .txt_bx .tit{ margin-bottom: 20px} 
	.card_long2_bx .img_bx .date{ position: relative; left: auto; bottom: auto; margin-top: -10px; color: var(--gray-t1); font-size: 12px; font-weight: 300} 
	.bx-wrapper .bx-pager{ bottom: -2px} 
	.card_long2_bx .img_bx .img{ overflow: visible} 
	.card_long2_bx .img_bx .img[aria-hidden="false"]{ position: relative} 
	.card_long2_bx .img_bx .img[aria-hidden="false"]:before{ content: ''; background: var(--bg-image) no-repeat 50% 95%; position: absolute; width: 100%;left: 0; top: 0; filter:blur(9px);; display: block; height: calc(100% + 10px); z-index:1; background-size:90%}
	.card_long2_bx .img_bx .img img{ z-index: 2; border-radius:18px} 
	.bx-viewport{ padding-bottom:30px} 
	.card_long2_bx .txt_bx .stand_info{ margin-top: 25px; margin-bottom: 30px} 
	.card_long2_bx .card_list > li .tool_bx{ margin-top: 0}
	.evabox.toggleinfo{ left: -50%}
	.foot_btn button strong.num:before, .foot_btn button strong.num:after{ display: none} 
	.foot_btn button strong.num{ color:#FF5F66; padding-left:3px } 
	.reply_bx{ border-top: 1px solid var(--gray); margin-top: 30px} 
	.reply_bx h3{ display: none}
	.reply_bx > .bt_close{ top:10px} 
	.reply_list{ padding: 35px 0 0 0} 
	[class^="more_bx"]{ top:10px}
	.replytool{ margin-top: 18px} 
	.replytxt .txt{ margin-top: 6px} 
	.reply_bx .reply_list [class*="_write"] + [class*="_reply"], .dep1_reply + .dep1_reply,.dep2_reply + .dep2_reply, .reply_bx .dep02_write{ margin-top: 20px} 
	.view_w > .view_foot_like + .reply_bx{ border: none; margin: 0} 
	.view_w > .view_foot_like + .reply_bx .reply_list{ padding-top: 0} 
	.view_w  .reply_bx > .reply_write{ margin-top: 0} 
	.view_w  .reply_bx > .reply_list + .reply_write{ margin-top: 40px} 
	

	body[class*="_plan"] .write_w .form_bx [class^="item_"] dd > .flex{ flex-direction: column} 
	 body[class*="_plan"]  .write_w .form_bx .item_input.brand{ margin-top:40px} 
    .card_long2_bx .plan_tit{ margin-bottom: 15px} 
    .card_list .pic_more{    transform: translate(-50%, -60px);}
}

/* 과정등록 */

.plan_sel_tit{ font-size: 16px; font-weight: 700; padding-bottom: 20px;border-bottom: 10px solid var(--dvdline2); margin-bottom: -30px  } 
.plan_sel_tit > strong{ color: var(--primary)} 
.tit_store > strong{ font-size: 16px} 
.headtit_box{ border-bottom: 1px solid var(--gray); padding-bottom: 20px} 
.write_w .card_long2_bx .form_bx .headtit_box{ margin-bottom: -20px} 
.headtit_box .user_profile > .user_pic{ width: 52px; height: 52px} 
.card_long2_bx [class^="item_"] dd .bt_add{ position: absolute; right: 0; top:-20px; cursor: pointer} 
.numset_bx{ display: flex; gap:20px} 
.numset_bx .pic {position: relative;padding: 0;margin: 0;padding-top:112px;width: 120px;height: 0;border: 1px solid var(--gray);border-radius: var(--radius-S);overflow: hidden; flex: none}
.numset_bx .pic img{width: 100%;height: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.numset_bx .num_box{ display: flex; flex-direction: column; justify-content: space-between} 
.numset_bx .num_box > label{ display: flex; width: 100%; border: 1px solid var(--gray); padding: 26px 20px 0px 10px; position: relative; align-items: center; border-radius:var(--radius-S)} 
.numset_bx .num_box > label input{ border: none; min-width: auto; width: 100%; text-align: right; font-size: 20px; font-weight: 700; padding-right: 10px} 
.upload_g > .name{ width: 100%} 

.numset_bx .num_box > label span:not(.unit){ position: absolute; left: 10px; top:10px; font-size: 12px;} 
.numset_bx .num_box > label span.unit{ font-size: 16px; color: var(--gray-t1)} 


.card_long2_bx .card_list > li .bottom_btn{ margin-top: 20px} 
.fwn{ font-weight: normal !important} 

.write_w .card_long2_bx .form_bx dl.item_upload.stand dd{ display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start;} 
.write_w .card_long2_bx .form_bx dl.item_upload.stand dd > div{ width: 100%} 
.write_w .card_long2_bx .form_bx dl.item_upload.stand dd > div.item_chk_tab{ margin-bottom: -10px} 
.write_w .card_long2_bx .form_bx dl.item_upload.stand dd > div.upload_g{ width: calc(33.33% - 27px); border: none !important; gap:15px 40px} 
.write_w .card_long2_bx .form_bx dl.item_upload.stand dd > div.upload_g:before{ width: 1px; height:112px; border: none; background: var(--gray); left: -20px; bottom: 0; top: auto}
.write_w .card_long2_bx .form_bx dl.item_upload.stand dd > div.upload_g .numset_bx .num_box{ width: 100%} 
.write_w .card_long2_bx .item_upload.stand div.upload_g:nth-child(3n+2):before{ display: none !important}
.write_w .card_long2_bx .form_bx dl.item_upload.stand dd > div.upload_g .name{ font-size: 16px; } 
.write_w .card_long2_bx .card_list > li:last-of-type{ padding-bottom: 50px; border-bottom: 10px solid var(--dvdline2);} 

@media all and (max-width:1023px){ 
	.plan_sel_tit{ border: none; margin-bottom: -60px} 
	.grid_view02 .view_body{ } 
	.file_box_pic_upload .dropzone_box{ padding: 20px} 
	.file_box_pic_upload .filelist li{ min-width: auto;    width: calc(33.333% - 10px); max-width: 90px; border-radius: 8px}
	.file_box_pic_upload .filelist ul{ gap:10px} 
	.card_long2_bx .txt_bx > .txt{ margin-top: 22px} 
    .write_w .card_long2_bx .form_bx textarea{ min-height: 100px} 
    .write_w .card_long2_bx .form_bx dl.item_upload.stand dd > div.upload_g{ width: 100%} 
    .numset_bx .pic{ width: 112px; padding-top: 110px}
    .write_w .card_long2_bx .form_bx dl.item_upload.stand dd > div.upload_g:before{ display: none} 
    .write_w .card_long2_bx .form_bx dl.item_upload.stand dd > div.upload_g .name{ font-size: 1rem} 
    .numset_bx .num_box > label input{ height: 40px; min-height: auto} 
    .write_w .card_long2_bx .card_list > li:last-of-type{ border: none; padding-bottom: 30px } 
    
    
    .write_w .card_long2_bx .card_list > li:last-of-type:after{content: ""; width: 100vw; height: 10px; position: absolute; left: 50%; bottom:0px; transform: translateX(-50%);  background: var(--dvdline2)} 



    
}

/* 활동관리 */
.sub_bx.act + .sub_bx.act{ margin-top: 60px} 
.sub_bx.act h4{font-size: 16px;font-weight: 700;}
@media all and (max-width:1023px){ 
    .sub_bx [class^="item_eximg"] li,.sub_bx [class^="item_eximg"] .img{ width: 100%; padding: 0} 
    .sub_bx [class^="item_eximg"] .img{} 
    .sub_bx [class^="item_eximg"] img{ position: relative; left: auto; top: auto; transform: none} 	
    .sub_bx [class^="item_eximg"] .img.nopic{ min-height:160px} 	
    .sub_bx [class^="item_eximg"] .img.nopic img{ position: absolute} 	
    .sub_bx.act .img.nopic{ height:200px} 	
}


/*os처 등록*/
[class$="_os"] .view_w{ gap:40px} 
.view_head .item_month{ position: relative} 
.view_head .item_month dt{ position: absolute; left:20px; top: 50%; transform: translateY(-50%); font-weight: 400; font-size: 1rem; color: var(--gray-t2)} 
.view_head .item_month .select_g select{ padding-left: 80px} 
.item_company dd{ display: flex; gap:10px}
.item_company dd strong{ position: absolute; left: 10px; top: 10px; font-weight: 500; font-size: 12px; color: var(--gray-t1)} 
.item_company dd .required strong{ left: 20px} 
.item_company dd .unit{ position: absolute; right: 10px; bottom:10px; font-size: 12px; color:var(--gray-t1)}
.item_company dd input{ height: 60px; padding: 20px 28px 0 20px !important; text-align: right; font-weight: 500; font-size: 16px; width: 100%} 
[class$="_os"] .item_company{ position: relative} 
[class$="_os"] .item_company:before{ content: ""; display: block; width: 100%; height: 1px; border-top: 1px dashed var(--gray-t3); position: absolute; left: 0; top:-15px} 
[class$="_os"] .form_bx .flex:first-of-type .item_company:before{ display: none} 
.item_company [type="number"]:disabled, .item_company [type="number"]:read-only, .item_company [type="text"]:disabled, .item_company [type="text"]:read-only{ background:var(--background); border: 1px solid var(--gray)} 
.form_bx .item_ossum{ border-top: 1px solid var(--gray); padding:25px 0 20px 0; display: flex; justify-content: space-between; flex-direction: row !important; align-items: center; border-bottom: 1px solid var(--gray);  } 
.form_bx .item_ossum dt{ font-size: 20px; font-weight: 700;} 
.form_bx .item_ossum dd strong, .form_bx .item_ossum dd .unit{font-size: 12px; color:var(--gray-t1); font-weight: 500} 
.form_bx .item_ossum dd em{ text-align: right; padding-left:60px; min-width: 100px; color: var(--primary); font-size: 22px;font-weight: 500  } 
[class$="_os"] .item_upload dd .bt_add{ position: absolute; right: 0; top:-40px; margin: 0; } 
[class$="_os"] .form_bx textarea{ min-height: 130px} 

.cmt_box{ min-height: 150px} 
.sub_bx + .cmt_box, .sub_bx.overf_x + .sub_bx{ margin-top: 60px} 

.sub_bx.overf_x{ overflow: hidden; overflow-x: auto; width: 100%; align-items: flex-start} 
.dataT{ width: auto; table-layout: auto; border-top: 1px solid var(--gray);} 
.dataT th, .dataT td{ border-left: 1px solid var(--gray); } 
.dataT tr th:first-of-type{ border-left: 0} 
.dataT td p{ text-align: right; font-size: 12px} 
.dataT td p .unit{ color: var(--gray-t1); font-weight: 400 !important} 
.dataT thead th{ background: #FAFAFA}
.dataT tbody th{ background: var(--background); font-weight: 500} 
.dataT tfoot th, .dataT tfoot td{ background:#FFF8F8 } 
.dataT tfoot td p{ font-weight: 700; color: var(--primary)} 
.dataT.type02 tbody th,.dataT.type02 tbody td{ background: #fff; font-weight: 400} 
.dataT tbody .hd th, .dataT tbody .hd td{background: var(--background); font-weight: 500} 
.dataT tbody .hd td{ font-weight: 700; color: var(--color)} 

@media all and (max-width:1023px){ 
	[class$="_os"] .form_bx .flex:first-of-type .item_company:before{ display: block} 
	[class$="_os"] .form_bx .flex:first-of-type .item_company:first-of-type:before{ display: none} 
	[class$="_os"] .form_bx .flex{ gap:40px}
	.form_bx .item_ossum dd em{ padding-left: 10px} 
	.dataT th, .dataT td{ padding: 0 5px} 
	.dataT{ min-width: 100%} 
   
}


/******************
나의 노하우 
******************/
[class^="tab_type_"]{ display: inline-flex; overflow: hidden; overflow-x: auto; background:#F1F1F1; border-radius: 25px; height: 46px; position: relative; width: fit-content; justify-content: flex-start; max-width: 100%; } 



[class^="tab_type_"] li, [class^="tab_type_"] li button{ display: flex; flex: none; height: 100%; align-items: center; gap:0; position: relative; z-index: 3} 
[class^="tab_type_"] li button{ padding: 0 16px; min-width: 78px; position: relative; justify-content: center;transition: ease-in 0.3s ;} 
[class^="tab_type_"] li button.curr{ color: #fff} 
.tab_type_01 li.marker {display:block; position: absolute; height: 100%; padding: 0; background:#FF5F66; -webkit-transition: ease-in 0.3s; transition: ease-in 0.3s; top: 0;  left: 0px; min-width: 78px; z-index: 2;border-radius: 25px;}
.tab_type_01 li.anim { -webkit-animation: 0.3s shake ease-in;  animation: 0.3s shake ease-in;}

.web .tab_type_01{} 
.web .tab_type_01::-webkit-scrollbar {height:4px;  }
.web .tab_type_01::-webkit-scrollbar-thumb {background: #B9BBC1;border-radius: 4px}
.web .tab_type_01::-webkit-scrollbar-track {background-color:#fff;}




@media all and (min-width:1200px){ 
.tab_type_01::-webkit-scrollbar {display: none;}

}




@-webkit-keyframes shake { 0% { -webkit-transform: translateX(5px); transform: translateX(5px);}50% {-webkit-transform: translateX(-5px);transform: translateX(-5px);}100% {-webkit-transform: translateX(0px);transform: translateX(0px);}}
@keyframes shake {0% {-webkit-transform: translateX(5px);transform: translateX(5px);}50% {-webkit-transform: translateX(-5px);transform: translateX(-5px);}100% {-webkit-transform: translateX(0px);transform: translateX(0px);}}
.headcate_bx + .tab_bx{ margin-top: 10px} 
.tab_bx{ display: flex; flex-direction: column; gap:20px} 
.tab_bx .card_topic,.view_w .card_topic, .tab_bx .topic_all{ flex: none; width: 100%; background: var(--primary-light-bg); border-radius:var(--radius-S); overflow: hidden; padding: 30px; position: relative; min-height: 150px; padding-right: 150px; flex-direction: column; justify-content: center; align-items: flex-start; gap:10px } 
[role="tabpanel"].curr{ display: block} 
.card_topic.curr{ display: flex} 
.view_w .card_topic{ display: flex} 
[class^=topic] .img{ position: absolute; right: 30px; top:30px; border-radius: 100%; width:90px; height: 90px; overflow: hidden  } 
[class^=topic] .img img{ width: 100%; height: 100%; object-fit: cover; position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%)} 
[class^=topic] .tit{ color: var(--gray-dark); font-size: 16px; font-weight: 700} 
[class^=topic] .txt{ color: var(--gray-dark); }
[class^=topic] .date{ color: var(--gray-t1); margin-top: 16px }
[class^=topic] .tit > .cmt{ font-size: unset !important; padding-left: 5px} 
.tab_bx .topic_all{ background: #FFF3CA; display: flex; padding-right: 200px} 
.tab_bx .topic_all .img{ border-radius: 0; overflow: hidden; right: 50px; top:50%; transform: translateY(-50%); width: auto; height: 105px} 
.tab_bx .topic_all .img img{ position: relative; transform: none; height: 100%; width: auto; left: auto; top: auto} 
.tab_bx .topic_all .tit{ font-size: 26px; font-weight: 600} 
.tab_bx .topic_all .tit strong{ font-weight: 900; color:#DC0012 } 
.tab_bx .topic_all .tit em{ font-weight: 700; } 
.tab_bx .topic_all .txt{ font-size: 16px; font-weight: 500} 

td .tit_topic{ display: flex; flex-direction: column; align-items: flex-start; gap:10px; } 
td .tit_topic > strong{ width: 100%; display: block; text-overflow: ellipsis; white-space: nowrap; flex: none; overflow: hidden;font-weight: 400} 
.tit_topic > .badge{ line-height: 20px; flex: none; padding: 0 6px;}
.tit_topic > .badge.ing{ background: var(--primary-light-bg); color:var(--primary) } 
.tit_topic > .badge.end{ background: #F2F2FF; color:var(--gray-t1) } 
.shorttit{ flex: none} 
.filter_group .filter-topic > div.list_g .chk input[type="radio"] + span{  flex-direction: column; align-items: flex-start; gap:5px} 

@media all and (max-width:1300px){ 
	td .tit_topic{ display: flex; flex-direction: column; align-items: flex-start; gap:30px; flex: auto; width: auto; min-width: calc( 100% - 100px)} 
	.list_body table tbody tr td .tit_topic > strong{ width: 100%; display: block; text-overflow: ellipsis; white-space: nowrap; flex: none; overflow: hidden;font-weight: 700} 
	.list_body table tbody tr .type02_tit02 a{  padding-top: 20px !important}
	.list_body table tbody tr .type02_tit02 a .pic{ margin-top:25px} 
	.list_body table tbody tr .type02_tit02 + [data-th="작성자"]{ margin-top: 25px; margin-bottom: -5px} 
}
@media all and (max-width:1023px){ 
body[class^=kwhw-] .headcate_bx + .filter_bx{ margin-top: -10px; margin-bottom: 0px}
	.tab_bx .card_topic.curr, .tab_bx .topic_all{ padding: 20px; display: block; min-height: 110px} 
	.tab_bx .card_topic{ display: none} 
	.view_w .card_topic{ display: block; padding: 20px} 
	[class^=topic] .img{ right: auto; top:auto; float: right; position: relative; margin: 0 0 10px 20px} 
	[class^=topic] .tit, [class^=topic] .txt, [class^=topic] .tit > strong{ word-break: break-all; font-size: 1rem} 
	[class^=topic] .txt, [class^=topic] .date{ font-size: 12px;margin-top: 8px} 
	[class^=topic] .date{ margin-top: 18px} 
	.tab_type_01 li button{ font-size: 12px; min-width: 65px; padding: 0 12px} 
	.tab_type_01 li.marker{ min-width: 65px} 
	.tab_bx{ order: 1} 
	.tab_bx .topic_all{} 
	.tab_bx .topic_all .img{ border-radius: 0; overflow: hidden; right: 20px; top:auto; bottom:0; transform: translateY(-5px); width: auto; height:76px; position: absolute} 
	.tab_bx .topic_all .img img{ position: relative; transform: none; height: 100%; width: auto; left: auto; top: auto} 
	.tab_bx .topic_all .tit{ font-size: 14px; font-weight: 600} 
	.tab_bx .topic_all .tit strong{ display: block; font-size: 20px;   } 
	.tab_bx .topic_all .txt{ font-size: 12px; font-weight: 500; padding-right: 110px} 
	
}

/******************
제품반응 
******************/
 /*설정*/
.view_list_body .avg_w{ display: flex; flex-direction: column; gap:20px} 
.view_list_body .avg_w > *{ width: 100%} 
button.bt_opinion_txt{ font-size:1rem; font-weight: 700; color:var(--primary-txt);  border-bottom: 1px solid var(--primary-txt); background: #fff !important; min-height: auto; padding: 0} 
button.bt_opinion_txt:after{font-family: "remixicon"; font-style: normal; speak: none;  text-decoration: inherit; text-align: center; font-variant: normal;  text-transform: none; -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale; content: "\EA6E";  }
.view_list_body .avg_w td{ font-weight: 500; } 
.view_list_body .avg_w td .num{ font-weight: 400; color: var(--gray-t1)} 
.view_list_body .avg_w .view_foot{ margin-top: 0} 
.view_list_body .avg_w h4{font-size: 16px;font-weight: 700;margin-bottom: 15px;} 
.view_list_body .avg_w .table_bx + .table_bx{ margin-top: 40px} 
.jconfirm-type-opinion_list .opinion_list{display: flex;flex-direction: column; gap: 0px 0px;position: relative;} 
.jconfirm-type-opinion_list .opinion_list li{width: 100%; display: flex; gap:0px; text-align: left; justify-content:  flex-start; padding: 14px 0 12px 0; border-bottom: 1px dashed var(--gray-t3); word-break: break-all; padding-right: 20px; flex-direction: column; gap:5px} 
.jconfirm-type-opinion_list .opinion_list .user_txt{ font-size: 12px; flex-direction: row; width: 100%; flex: none; gap:5px} 
.jconfirm-type-opinion_list .opinion_list .user_txt .name{ font-weight: 700; padding-right: 5px} 
.jconfirm-type-opinion_list{ max-width: 800px} 


/* 별점 */
.star_g{ display: flex; gap:5px}
.star_g .star{ width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; color: #E6E6E6; font-size: 26px} 
.star_g .star:before{font-family: "remixicon"; font-style: normal; font-weight: normal; speak: none; display:block;  text-decoration: inherit; text-align: center; font-variant: normal;  text-transform: none; -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale; content:"\F186";} 
.star_g .star.on{ color:#FDB833} 
.star_g .star:disabled{ opacity: 1; cursor: default} 
li.end .star_g{ gap:0} 
li.end .star_g .star{width: 16px; height: 16px; font-size: 1rem; flex: none} 
.star_bx{ display: flex; gap:40px} 
.item_star{ position: relative;} 
.form_bx dl.item_star{ flex-direction: row; gap:30px; width: auto; align-items: center} 
.form_bx dl.item_star dt{ font-size: 1rem; font-weight: 400; color: var(--gray-t1); line-height: 1} 
li.end .form_bx dl.item_star{ gap:12px; flex: none} 
li.end .form_bx dl.item_star dt{ font-size: 12px} 
/* 한줄평 */
.line1cmt_bx p.line1cmt{ background: #FAFAFA; border-radius: var(--radius-S); width: 100%; flex: none; padding: 15px 20px;}
.line1cmt_bx dd{ display: flex; flex-direction: row; gap:20px} 
.line1cmt_bx dd .input_g{ width: 100%} 
.line1cmt_bx dd .bottoms.primary{ flex: none; white-space: nowrap} 
/* toast */
.toast{ position: fixed; bottom: 30px;  left: 50%; transform: translateX(-50%); background:rgba(33, 34, 52, 0.8); width: 90%; border-radius: 100px; font-size:1rem; font-weight: 700; color: #fff; padding: 17px; max-width: 310px; display: none; text-align: center } 
.toast p + .count{ margin-top: 5px; font-size: 12px; font-weight:400; color: var(--gray-t3) } 
/*반응*/
.grid_list01 .card_long2_bx .card_list > li{ min-height: 140px; padding: 20px 0; padding-left: 120px; flex-wrap: nowrap; flex-direction: column; gap:20px; position: relative; transition: .2s ease; cursor: pointer} 
.grid_list01 .card_long2_bx .card_list > li:after{ content: "평가하기"; display: flex; width:76px; height: 28px; background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12'%3E%3Cpath d='M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z' fill='rgba(255,255,255,1)'%3E%3C/path%3E%3C/svg%3E") no-repeat right 7px center;; position: absolute; right: 0; top: 50%; transform: translateY(-50%); align-items: center; justify-content: center; color: #fff; border-radius: var(--radius-S); font-size: 12px; font-weight: 500; padding-right: 10px } 
.grid_list01 .card_long2_bx .card_list > li.open{ padding: 25px 0; padding-left:180px; min-height: 210px } 
.grid_list01 .card_long2_bx .card_list > li.open, .grid_list01 .card_long2_bx .card_list > li.end{ cursor: default} 
.grid_list01 .card_long2_bx .card_list > li.open:after, .grid_list01 .card_long2_bx .card_list > li.end:after{ display: none} 
.grid_list01 .card_long2_bx .card_list > li + li{ border-top:  1px solid var(--gray)} 
.grid_list01 .card_long2_bx .card_list > li .img{ width: 100px; height: 100px; border-radius: 0; left: 0; top: 20px;transition: .2s ease} 
.grid_list01 .card_long2_bx .card_list > li.open .img{ width: 160px; height: 160px}
.grid_list01 .card_long2_bx .card_list > li .img ~ div{ padding-left: 0} 
.grid_list01 .card_long2_bx .card_list > li .tit strong{display: block;-webkit-line-clamp: unset; font-size: 16px} 
.grid_list01 .card_long2_bx .card_list > li:not(.end) .form_bx{ display: none; position: unset} 
.grid_list01 .card_long2_bx .card_list > li.open .form_bx, .grid_list01 .card_long2_bx .card_list > li.end .form_bx{ } 

.grid_list01 .card_long2_bx .card_list > li .line1cmt_bx{ margin-top: 25px} 
.grid_list01 .card_long2_bx .card_list > li .line1cmt_bx .bt_close_txt{ position: absolute; right: 0; top: 25px; background: #fff !important; justify-content: space-between; align-items: center; white-space: nowrap; flex: none; display: none} 
.grid_list01 .card_long2_bx .card_list > li.open .line1cmt_bx .bt_close_txt{ display: flex}
.grid_list01 .card_long2_bx .card_list > li .line1cmt_bx .bt_close_txt:after{font-family: "remixicon"; font-style: normal; font-weight: normal; speak: none; display:block;  text-decoration: inherit; text-align: center; font-variant: normal;  text-transform: none; -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale; content:"\EA78";} 





@media all and (max-width:1300px){ 
    .view_list_body .avg_w .table_bx{ border-top: 0} 
    .view_list_body .avg_w .table_bx h4{ border-bottom: 1px solid  var(--gray-dark); padding-bottom: 15px; margin-bottom: 0} 
    .view_list_body .avg_w td:before{ content: attr(data-th)} 
    .view_list_body .avg_w table tbody tr{ gap:10px 30px; padding: 20px 0 } 
    .view_list_body .avg_w table tbody tr td{ font-size: 14px; font-weight: 500; color: var(--color); width: 100%; text-align: left} 
    .view_list_body .avg_w table tbody tr td[data-th="개인평가"],.view_list_body .avg_w table tbody tr td[data-th="영업사원"], .view_list_body .avg_w table tbody tr td[data-th="거래처 반응"]{ width: auto; } 
   .view_list_body .avg_w table tbody tr td[data-th="개인평가"]:before,.view_list_body .avg_w table tbody tr td[data-th="영업사원"]:before, .view_list_body .avg_w table tbody tr td[data-th="거래처 반응"]:before{ font-weight: 400; padding-right: 10px} 
}
@media all and (max-width:1023px){ 
    .view_list_body .head{ max-width: 200px} 
	.grid_list01 .card_long2_bx{ margin-top:	-20px}
	.grid_list01 .card_long2_bx .card_list > li{ min-height: 110px; padding-left: 85px; gap:13px; transition:none} 
	.grid_list01 .card_long2_bx .card_list > li:last-of-type{ border-bottom: 1px solid var(--gray);} 
	.grid_list01 .card_long2_bx .card_list > li:before, .grid_list01 .card_long2_bx .card_list > li:after{ display: none} 
    
    .commu-goods .grid_list01 .card_long2_bx .card_list > li:after{ display: flex; padding: 0 25px 0 10px ; width: auto; top: auto; bottom: 0 }
    .grid_list01 .card_long2_bx .card_list > li.open:after, .grid_list01 .card_long2_bx .card_list > li.end:after{ display: none !important} 
    
    
    
	.grid_list01 .card_long2_bx .card_list > li .img{ width: 70px; height: 70px} 
	.form_bx dl.item_star{ flex-direction: column; align-items: flex-start;} 
	li.end .form_bx dl.item_star{ gap:4px}
	.grid_list01 .card_long2_bx .card_list > li .line1cmt_bx{ margin-top: 13px} 
	.line1cmt_bx p.line1cmt{ padding: 12px; font-size: 12px} 
	.grid_list01 .card_long2_bx .card_list > li.open{ flex-direction: column; padding: 20px 0; align-items: center} 
	.grid_list01 .card_long2_bx .card_list > li.open .img{ position: relative; left: auto; top:	auto; margin: 0 auto} 
	.grid_list01 .card_long2_bx .card_list > li.open .star_bx{ flex-direction: column; align-items: center; margin-top: 15px; gap:25px} 
	.grid_list01 .card_long2_bx .card_list > li.open .form_bx dl.item_star{ flex-direction: row; align-items: center} 
	.grid_list01 .card_long2_bx .card_list > li.open .form_bx dl.item_star dt{ width: 65px; flex: none}
	.grid_list01 .card_long2_bx .card_list > li.open  .line1cmt_bx{ margin-top:30px} 
	.line1cmt_bx dd{ flex-direction: column;} 
	.grid_list01 .card_long2_bx .card_list > li.open .line1cmt_bx .bt_close_txt{ position: relative; right: auto; top: auto; justify-content: center} 
    .item_cate.w300{ width: 100% !important} 
}
@media all and (max-width:600px){ 
    .view_list_body{ flex-direction: column; } 
    .view_list_body .head{width: 100%; max-width: none}
}

/******************
통계
******************/
.grid_list02 .card_bx li.ing .badge, .spss_tit .ing .badge{ background:var(--primary)} 
.grid_list02 .card_bx li.end .badge,.spss_tit .end .badge{ background:var(--secondary)} 
.grid_list02 .card_bx li > a{ gap:10px} 
.grid_list02 .card_bx li > a:hover{ color: inherit} 
.grid_list02 .card_bx .tit, .spss_tit .tit { flex-direction: row; justify-content: flex-start} 
.grid_list02 .card_bx .tit strong{ width: auto !important; max-width: 100%; font-size: 16px;    text-overflow: ellipsis; white-space: nowrap} 
.grid_list02 .card_bx .txt{ margin-top: 0} 
.grid_list02 .card_bx li  .txt + .date { margin-top: 12px}
.grid_list02 .card_bx li .chart_bx, .spss_tit .chart_bx{ min-height: 84px; display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; padding-top: 30px} 
.grid_list02 .card_bx li .chart, .spss_tit  .chart{ width: 100%; height: 8px; position: relative; background: #F2F4F7; border-radius: 8px; flex: none} 
.grid_list02 .card_bx li .chart_bx dl, .spss_tit .chart_bx dl{ margin-top: 18px }
.grid_list02 .card_bx li .chart ~ dl, .spss_tit .chart ~ dl{ margin-top: 10px} 
.grid_list02 .card_bx li .chart > strong, .spss_tit .chart > strong{ display: block; width: 0; height: 8px; background: #FF5F66; border-radius: 8px; position: relative} 
.grid_list02 .card_bx li.end .chart > strong, .spss_tit .end .chart > strong{ background:var(--secondary) } 
.grid_list02 .card_bx li .chart > strong:before, .grid_list02 .card_bx li .chart > strong:after, .spss_tit .chart > strong:before, .spss_tit .chart > strong:after{ position: absolute; right: 0; top: -33px; transform: translate(50%); text-align: center; content: ""}
.grid_list02 .card_bx li .chart > strong:before, .spss_tit .chart > strong:before{content: attr(data-chart); background: var(--gray-dark); font-size: 1rem; font-weight: 500; padding:0 6px; height:23px; line-height: 23px; min-width:22px; color: #fff  } 
.grid_list02 .card_bx li .chart > strong:after, .spss_tit .chart > strong:after{ border-top: 7px solid var(--gray-dark); border-left: 4px solid rgba(0,0,0,0);border-right: 4px solid rgba(0,0,0,0); top:-10px} 
.grid_list02 .card_bx li .chart_bx dl dt, .spss_tit .chart_bx dl dt{ font-size: 12px} 
.grid_list02 .card_bx li .chart_bx dl dd, .spss_tit .chart_bx dl dd{ font-weight: 700} 
.grid_list02 .card_bx li .chart_bx dl.now dd, .spss_tit .chart_bx dl.now dd{ color:var(--primary) } 
.grid_list02 .card_bx li.end .chart_bx dl.now dd, .spss_tit .end  .chart_bx dl.now dd{ color:var(--secondary) } 
.grid_list02 .card_bx li, .spss_tit .chart_bx dl.plan{text-align: right} 
.grid_list02 .card_bx li .stand, .spss_tit .stand{ background:#F9FBFF; border-radius: var(--radius-S); color:var(--gray-t1); font-size: 12px; padding: 10px 20px; }
.spss_tit{ width: 100%} 
.spss_tit > div, .spss_detail{ background: #fff; display: flex; justify-content: space-between; align-items: flex-start} 
.spss_tit > div{ position: relative} 
.spss_tit > div > div{ width: calc(50% - 50px); flex: none;} 

.spss_tit .tit{ gap:10px; align-items: flex-start} 
.spss_tit .tit  .badge{ margin-top: 1px} 
.spss_tit .tit_bx{ display: flex; flex-direction: column; gap:10px} 
.spss_tit .date{font-size: 1rem;font-weight: 300;color: var(--tit-line);font-family: 'Roboto', sans-serif; margin-top: 12px} 
.spss_tit .chart_bx{ position: relative; align-items: flex-start; padding-top: 0; min-height: auto; gap:10px; position: unset }
.spss_tit > div:before{ position: absolute; content: ""; display: block; width: 1px; height: calc(100% + 60px); top:-30px; left: 50%; background: var(--gray);} 
.spss_tit > div+div{ padding-top: 30px} 
.spss_tit .stand{ width: 100%; margin-top: 5px} 
.spss_tit .chart_bx dl{ margin-top: 0} 
.spss_tit .chart{ margin-top: 30px} 
.spss_detail h3{ font-size: 16px; font-weight: 700; padding-bottom: 16px} 
.spss_detail [class^="part_"]{ position: relative; width: calc(50% - 20px)}
.spss_detail .bt_stand{ position: absolute; right: 0; top: 0; height: 28px; background:#B5BAC4; color: #fff; font-size: 12px; padding: 0 15px; font-weight: 500; border-radius: var(--radius-SS)  } 
.spss_detail .part_box{ width: 100%; border: 1px solid var(--dvdline); border-radius: var(--radius-S); padding: 25px} 
.spss_detail dl{ display: flex; position: relative; padding-bottom: 30px; width: 100%; align-items: center; gap:10px} 
.spss_detail.noplan dl{ padding-bottom: 10px}

.spss_detail dl dt{ flex: none} 
.spss_detail .part_1bx dl dt{ font-size: 14px; font-weight: 500} 
.spss_detail .part_2bx dl dt{ font-size: 12px; font-weight: 500} 
.spss_detail dl dd{width: 100%; display: flex; } 

.spss_detail dl dd .count{ color: var(--gray-t2); font-size: 12px; width: 100%; text-align: right} 
.spss_detail dl dd .chart_bx + .count{ width: auto; text-align: left} 
.spss_detail .chart_bx{ display: flex;justify-content: space-between; position:  absolute; left: 0; top: 20px; width: 100%; align-items: center } 
.spss_detail .chart_bx  .chart{ width: calc(100% - 50px); height: 6px; position: relative; background: #F2F4F7; border-radius: 8px; flex: none} 
.spss_detail .chart_bx .chart > strong{ display: block; width: 0; height: 6px; background:#B5BAC4; border-radius: 8px; position: relative} 
.spss_detail .chart_bx > span{ font-weight: 700; font-size: 12px} 
.spss_detail .parts{ margin-bottom: 20px; padding-bottom: 35px; position: relative; border-bottom: 1px dashed var(--dvdline)} 

.spss_detail .parts_item + .parts_item{ padding-top: 20px; position: relative; margin-top: 15px}


.spss_detail .part_2bx dl+dl.parts:before{} 
.spss_detail .total{ margin-top: 15px; padding-top:20px; position: relative } 
.spss_detail .total:before, .spss_detail .part_2bx .parts_item + .parts_item:before{ content: ""; display: block; width: calc(100% + 50px); height: 1px; background:var(--dvdline); top:0; left: -25px; position: absolute} 
.spss_detail .parts dt{ font-size: 14px !important;font-weight: 700 !important;} 
.spss_detail .total dt{ font-weight: 700 !important; color: var(--primary) !important; font-size: 14px !important} 
.spss_detail.end .total dt{color: var(--secondary) !important; } 
.spss_detail .total dd  .count{ color: var(--color);} 
.spss_detail .total .chart_bx{ top:40px} 
.spss_detail .total .chart_bx  .chart{ height: 8px;} 
.spss_detail .total .chart_bx  .chart > strong{ height: 8px; background: #FF5F66} 
.spss_detail.end .total .chart_bx  .chart > strong{ background:var(--secondary)} 
.spss_detail .parts .chart_bx  .chart > strong{ background:#49505D} 
.spss_detail .total .chart_bx > span{ font-size: 14px; color:var(--primary) } 
.spss_detail.end .total .chart_bx > span{  color:var(--secondary) } 
.spss_detail + .spss_detail{ margin-top:  30px} 
.card_bx .lanking_list{ gap:10px} 
.lanking_list li{ background: #fff; width: 100%; text-align: left; border-radius: var(--radius-S); flex-direction: row; padding: 17px 20px; align-items: center; position: relative} 
.grid_list02 .card_bx .lanking_list li{ text-align: left} 

.lanking_list .user_profile > .user_txt{ flex-direction: row; gap:10px; font-size: 1rem; align-items: center ; line-height: 1} 
.lanking_list .user_profile .name{ font-weight: 700} 
.lanking_list .user_profile > .user_txt .dfn_grd{ font-size: 12px; color: var(--gray-t1)} 
.lanking_list li .lank{ min-width: 34px; height: 34px; text-align: center; font-size: 16px; font-weight: 400; line-height: 34px } 

.lanking_list li .lank[data-rank="1"],.lanking_list li .lank[data-rank="2"],.lanking_list li .lank[data-rank="3"]{ font-size: 0; background: url("../img/Ranking_1st.png") no-repeat 50% 50%; background-size: 34px}  
.lanking_list li .lank[data-rank="2"]{ background-image: url("../img/Ranking_2nd.png")} 
.lanking_list li .lank[data-rank="3"]{ background-image: url("../img/Ranking_3rd.png")} 


.lanking_list li .updn{ width: 45px} 
.lanking_list li .updn > span{ color: #999; display: block; min-width: 100%; font-size: 22px; } 
.lanking_list li .updn > span.up,.lanking_list li .updn > span.dn{ font-size: 12px; color:var(--primary); position: relative; display: flex; align-items: center; justify-content: flex-start; gap:2px  } 
.lanking_list li .updn > span.dn{ color: var(--secondary)} 
.lanking_list li .updn > span.up:before,.lanking_list li .updn > span.dn:before{ content: ""; display: block; border-bottom: 6px solid var(--primary); border-left: 4px solid rgba(0,0,0,0);border-right: 4px solid rgba(0,0,0,0)} 
.lanking_list li .updn > span.dn:before{ border-bottom: none; border-top: 6px solid var(--secondary)} 
.lanking_list li .updn > span.new{ font-size: 12px; color: var(--primary-txt)} 
.lanking_list li .score{ color: var(--primary); font-weight: 500; color: var(--primary); font-size: 18px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%)} 
.guide_more{ width: 20px; height: 20px; border-radius: 100%; border: 1px solid #e2e2e2; margin-top: -18px; display: inline-flex; justify-content: center; align-items: center }
.guide_more:before{ content: ""; display: block; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; content: "?"; font-size: 1rem; font-weight: 700; color: var(--gray-t1) } 

.jconfirm-type-lanking_info  .jconfirm-buttons { } 
.lankinginfo dl{ display: flex; justify-content: space-between; width:320px }
.lankinginfo dl + dl, .lankinginfo ul li + li{ margin-top: 17px} 
.lankinginfo dl dd{ font-weight: 700} 
.lankinginfo ul li{ position: relative; display: flex; align-items: flex-start; gap:8px; white-space: nowrap; justify-content: flex-start; text-align: left}
.lankinginfo ul li:before{ content: ""; flex: none; width: 4px; height: 4px; background: var(--color); border-radius: 100%; display: block; margin-top: 8px} 

.spss-spss_2 .filtering button, .spss-spss_3 .filtering button{ min-width: 260px; text-align: left} 
.spss-spss_2 .filtering button:after, .spss-spss_3 .filtering button:after{background: url("../img/bt_monthly.svg") no-repeat right 0px top 50%;    background-size: 18px; width: 20px; height: 20px} 
.spss-spss_2 .filtering button.on:after, .spss-spss_3 .filtering button.on:after{ transform: translateY(-50%) ; filter: none} 



@media all and (max-width:1023px){ 
    [class^="spss"] .article_head .tooltab{ display: block; top:-15px } 
    .spss_tit > div, .spss_detail{ flex-direction: column; gap:10px} 
    .spss_tit > div > div, .spss_detail [class^="part_"]{ width: 100%; padding-bottom: 15px} 
    .spss_tit > div:before{ display: none} 
    .spss_tit .tit{flex-direction: column;gap: 10px;} 
    .spss_tit .date{ margin-top: 0} 
    .spss_detail{ margin-top: 10px; gap:30px} 
    .spss-spss_2 .headcate_bx + .filter_bx, .spss-spss_3 .filter_bx{ margin-top: 0} 
    .spss-spss_2 .filtering button, .spss-spss_3 .filtering button{ width: 100%; text-align: left} 
    
    .lankinginfo dl{ width:100% }
    .guide_more{ margin-top: -10px} 
    .lanking_list li{ padding: 15px; gap:5px} 
    .lanking_list .user_profile > .user_txt{ flex-direction: column; align-items: flex-start; gap:0} 
    .lankinginfo ul li{ white-space: normal}
    .lanking_list li .updn{ width: 36px} 
    .lanking_list li .score{ right: 15px} 
}

@media all and (max-width:600px){ 
    .grid_list02 .card_bx .tit{ flex-direction: column-reverse} 
    
}


/******************
로그인
******************/
.login .cnt_wrap{ position: relative; padding: 145px 25px 140px 25px; justify-content: center; align-items: center} 
.login .cnt_wrap header{ position: absolute; left:50px; top:50px; width: auto} 
.login .hbx h1{ display: flex; align-items:center; flex-direction: row} 
.login .hbx h1 .logo{  background-size: 100px; background-position: 0 0; flex: none; height: 21px; width: 120px} 
.login .hbx h1 .tit{ margin-top: 0; flex: none; position: relative} 
.login .hbx h1 .tit:before{ content: ""; width: 1px; height: 15px; background: #777; display: block; position: absolute; left: -10px; top:50%; transform: translateY(-50%)} 
.login .cnt_wrap .login_bx{ width: 100%; max-width: 350px; text-align: center}
.login_bx h2{ display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 34px; color: var(--color); flex-direction: column; gap:20px; margin-bottom: 10px}
.login_bx h2:before{ content: ""; display: block; width:92px; height:69px; background: url("../img/symbol.svg") no-repeat 50% 50%; background-size: 91px} 
.login_bx h2 + p{ color: var(--gray-t1)} 
.login_box input[type="text"], .login_box input[type="password"],.login_box  input[type="number"], .login_box input[type="email"], .login_box input[type="tel"], .login_box input[type="time"], .login_box input[type="url"]{ width: 100%; max-width:350px; height: 46px; border-color: var(--gray) } 

.login_box{ margin-top: 50px; display: flex; flex-direction: column; gap:30px; text-align: left} 
.login_box dl{ display: flex; flex-direction: column; gap:15px} 
.login_box dt{ font-size: 16px; font-weight: 700} 
.login_box label + label{ margin-left: 30px} 
.bt_login.primary{ background: var(--primary); width: 100%; height: 46px; border-radius: var(--radius-S); color:#fff} 
.login_bx .bt_login.primary{ font-size: 16px; font-weight: 700} 
.login_box .chk input + span{ color: var(--color)} 
.login_box .chk input + span:before{ border-radius: 100%} 
.login_box .chk input:checked + span:before{ background: none; border-color: var(--primary)} 
.login_box .chk input:checked + span:after{ content: ""; display: block; width: 10px; height: 10px; background: var(--primary); border-radius: 100%; left: 5px} 

@media all and (max-width:1023px){
	.login .cnt_wrap{ padding:40px 25px; min-height: 100vh; display: flex; flex-direction: column;  justify-content: center} 	
	.login .cnt_wrap header{ display: none} 
}

@media all and (max-width:500px) and (max-height:570px){
    .login_box{ gap:23px; margin-top: 15px} 
    .login_bx h2:before{  background-size:75px; background-position: 50% 0 } 
    .login_bx h2{ gap:0; margin-bottom: 5px} 
    .login_box dl{ gap:5px} 
    .login .cnt_wrap{ padding: 30px 25px; justify-content: flex-start} 
    .login_bx h2{ font-size: 30px} 
}

/******************
마이페이지
******************/

.quick_w{ display: flex; gap:20px; padding-bottom: 50px; border-bottom: 10px solid var(--dvdline2); margin-bottom: 30px; position: relative; } 
.quick_w > a{ width: calc(33.33% - 14px); max-width: 178px; height: 148px; flex: none} 
.quick_w dl{ width: 100%; max-width: 178px; height: 100%; max-height: 148px; border-radius:18px; background:var(--primary-light-bg) url("../img/bg_mypage01.png") no-repeat right 5px bottom 15px; padding: 20px; position: relative; display: flex; flex-direction: column; gap:12px; background-size: 64px  } 
.quick_w dl.point{ background:#FFF5E9 url("../img/bg_mypage02.png") no-repeat right 6px bottom 17px; background-size: 42px } 
.quick_w dl.join{ background:#F2F2FF url("../img/bg_mypage03.png") no-repeat right 16px bottom 16px; background-size: 58px } 
.quick_w dl:after{ content: ""; z-index: -1; background:rgba(0,0,0,0.15); width: 80%; height: calc(100% - 20px); display: block; position: absolute; left: 50%; top: 20px; transform: translate(-50%, 0); filter: blur(17px); border-radius:18px; } 
.quick_w dl dt{ font-size: 16px; font-weight: 700;} 
.quick_w dl dd{ font-size: 32px} 
.quick_w dl dd .score{ position: absolute; right: 20px; top: 20px; font-size:12px; font-weight: 500; color: #fff; background:var(--secondary); border-radius: 20px; height: 26px; display: flex; flex: none; padding: 0 10px; align-items: center; justify-content: center  } 
.quick_w .guide{ position: absolute; right: 0; top: -22px; left: auto; bottom: auto; color: var(--gray-t1);} 
.orion .headcate_bx{ margin-bottom: 15px} 
.orion .list_w [role="tabpanel"] { flex-direction: column; gap:20px} 
.orion .list_w [role="tabpanel"].curr{display: flex; } 
.orion .tab_bx  .tab_type_01{ margin-bottom: 20px} 
.orion .headcate_bx + .tab_bx{ margin-top: -10px;} 

[class^="tablist_reply_"] .list_bx ul{ border-top: 1px solid var(--color);border-bottom: 2px solid var(--gray)} 
[class^="tablist_reply_"] .list_bx ul li a{ padding:20px 0; display: flex; gap:12px; flex-direction: column  } 
[class^="tablist_reply_"] .list_bx ul li + li{ border-top: 1px solid var(--gray)} 
[class^="tablist_reply_"] .list_bx ul li .date{ color: var(--gray-t1); font-size: 12px} 
[class^="tablist_reply_"] .list_bx ul li .tit{ white-space: normal} 
.fixed .orion .article_head{ position: fixed; top: 0; width: 100%; padding-top: 38px; background: #fff; z-index: 5} 
.fixed .orion .quick_w{ position:fixed; top:175px; width: 100%; background: #fff; z-index: 5} 
.fixed .orion .quick_w:before{ content: ""; display: block; position: absolute; left: 0; top: -30px; width: 100%; height: 35px; display: block; background: #fff} 
.fixed .orion .article{ padding-top:375px} 

.bt_gomove{height: 46px; color: #fff; background:#AEAEAE; border-radius: var(--radius-S); padding: 0 25px; font-size: 16px; font-weight: 400  } 
.article_head h2 em, .article_head h2 em *{ vertical-align:unset; line-height: 1; } 
.list_body table td em.planing{ font-weight: 500} 
@media all and (max-width:1300px){
.orion .list_body table tbody tr td[data-th="댓글"]:before, .list_body table tbody tr td[data-th="댓글수"]:before {content: attr(data-th);}
.list_body table.type02 tbody tr{ gap:35px} 
}



@media all and (max-width:1023px){
    .orion .article:not(.type02){} 
    .orion .article:not(.type02) .article_head{ border-bottom: 1px solid var(--gray); z-index: 3; background: #fff;} 
    .article_head .user_pic{flex: none;width: 56px;height: 56px;position: relative;background: #f6f6f6 url(../img/ico_user_default.svg) no-repeat 50% 50%;background-size: 20px;border-radius: 100%;overflow: hidden;align-items: center; font-size: 0}
    
    .article_head .user_pic img{ position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover} 
    .article_head .welcome{ display: flex; flex-direction: column; gap:0; line-height: 30px} 
    .quick_w{ gap:10px; padding-bottom: 40px; border: none; padding-top: 25px; z-index: 3; background: #fff}
    .quick_w:after{ display: block; width: 100vw; content: ""; position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0); content: ""; height:10px; background:var(--dvdline2) } 
    .quick_w > a{ width: calc(33.33% - 6px)} 
    .quick_w .guide{ top:5px} 
    .quick_w dl{ padding: 10px; gap:6px; border-radius: var(--radius-S)} 
    .quick_w dl dt{ font-size: 1rem} 
    .quick_w dl dd{ font-size: 20px; letter-spacing: -1px} 
    .quick_w dl dd .score{ font-size: 10px; padding: 0 5px; height: 20px; right: 8px; top: 40px} 
    .orion .headcate_bx{ margin-bottom: 0} 
    .orion .headcate_bx + .tab_bx{ margin-top: 0px; } 
    .orion .tab_bx  .tab_type_01{ margin-bottom:0px} 
    .orion .list_w{ position: relative; z-index: 1} 
    .orion .list_w [role="tabpanel"] > div{ order: 2} 
    .orion .list_w [role="tabpanel"] > div.list_sch{ order: 1} 
    .orion .tooltab{ display: block; top:0} 
    .bt_gomove{height: 28px; padding: 0 14px; font-weight: 500; font-size: 12px; margin-top: -5px }  
    
    .list_body table.type02 td em.planing{ display: block} 
    
    
}

/******************
메인
******************/
.orion .article.main{ display: flex; gap:60px 40px; flex-wrap: wrap; justify-content: space-between } 
[class*="_mainwrap"]{ display: flex; gap:20px; flex-direction: column; width: 100%; position: relative; order: 2} 
[class*="_mainwrap"] h3{ font-size:20px; font-weight: 700;  } 
[class*="_mainwrap"] .tab_type_02{ position: absolute; right: 0; top: 0; height: 30px} 
[class*="_mainwrap"]:not(.noti_mainwrap) a{ transition: transform .2s} 
[class*="_mainwrap"]:not(.noti_mainwrap) a:hover{ color: var(--color); transform: translateY(-5px)} 
[class*="_mainwrap"] h3 a{ color: var(--color); transition: none; transform: none !important} 

[class*="_mainwrap"] .nodata{ color: #D1D1D1; font-size: 1rem} 
[class*="_mainwrap"] .nodata:before{background-size: 30px; height: 30px} 
.tab_type_02{ height: 20px} 

.tab_type_02 li button{ min-width:  45px; font-size: 14px; font-weight: 500; border-radius: 16px; transition: none;} 
.tab_type_02 li button.curr{ background:var(--primary-bg)} 

.quick_mainwrap .quick_w{ border: none; margin: 0; padding: 0} 
.quick_mainwrap, .noti_mainwrap{ width: calc(50% - 20px)} 
[class*="_mainwrap"] .tit > strong{ text-overflow: ellipsis; white-space: nowrap; display: block; width: 100%; overflow: hidden} 
.quick_mainwrap h3 {display:flex;justify-content:space-between;align-items:center;}
.quick_mainwrap h3 button {height:30px; min-width:auto;padding:0 20px;font-size:14px;font-weight:500;}

.noti_mainwrap .list_box{ background:#F7F7FA; border-radius: 18px; height: 148px; padding: 30px; } 
.noti_mainwrap .noti ul{flex-direction: column; gap:15px} 
.noti_mainwrap .noti.curr ul{ display: flex !important; } 
.noti_mainwrap .noti li a, .noti_mainwrap .noti li{ display: flex; justify-content: space-between; width: 100%; gap:15px; flex: none; overflow: hidden; color: var(--gray-t1); align-items: center} 
.noti_mainwrap .noti li .date{ flex: none; font-size: 12px; text-align: right} 
.noti_mainwrap .noti li a .tit > strong{ font-weight: 400} 
.noti_mainwrap .noti li a:hover .tit > strong{ text-decoration: underline; color: var(--color); font-weight: 500}
.noti_mainwrap .noti li .tit{ display: flex; gap:6px; max-width: calc(100% - 100px)} 
.noti_mainwrap .noti .badge.new{ flex: none} 
.noti_mainwrap .noti .nodata{ color:#D1D1D1; font-weight: 500; font-size: 1rem; min-height:88px ; align-items: center; }
.noti_mainwrap .noti .nodata:before{ display: none;} 

.kwhw_mainwrap{ margin-top: 60px; gap:8px; margin-bottom: 60px} 
.kwhw_mainwrap:before{ content: ""; display: block; width: calc(100% + 98px); height: calc(100% + 110px); background:#FFE8E9; position: absolute; left: 50%; top:-50px; transform: translate(-50%,0); z-index: -1}
.kwhw_mainwrap > *{ position: relative} 

.kwhw_mainwrap h3, .kwhw_mainwrap h3 a,.kwhw_mainwrap h3 +p{ text-align: center; font-size: 30px; color: #222; font-weight: 300; } 
.kwhw_mainwrap h3,.kwhw_mainwrap h3 *{line-height: 29px} 
.kwhw_mainwrap h3 +p{ color: var(--color); font-size: 16px; font-weight: 400; } 
.kwhw_mainwrap .kwhw_w{} 
.kwhw_mainwrap .kwhw_g{ display: flex; gap:26px; padding-top:  65px; } 
.kwhw_mainwrap .swiper-container .kwhw_g{ gap:0; height: auto;    transition-property: transform;transition-timing-function: var(--swiper-wrapper-transition-timing-function,initial);} 
.kwhw_mainwrap .kwhw_g > *{ width: calc(25% - 20px); flex: none;padding: 0px; position: relative; min-width: 274px} 
.kwhw_mainwrap .kwhw_g > *:before{content: "";  background:rgba(132, 5, 10, 0.24) ; width: 70%; height: calc(100% - 30px); display: block; position: absolute; left: 50%; top: 40px; transform: translate(-50%, 0); filter: blur(21px); border-radius:18px;z-index:-1} 
.kwhw_mainwrap .user_profile{ flex-direction: column; align-items: center; margin-bottom: 30px } 
.kwhw_mainwrap .user_profile .user_pic{ width: 84px; height: 84px} 
.kwhw_mainwrap .user_profile .name{ font-weight: 700; font-size: 16px; } 
.kwhw_mainwrap .user_profile .team{ font-size: 1rem} 
.kwhw_mainwrap .card .tit strong{ font-size: 18px; font-weight: 700} 
.kwhw_mainwrap .card .tit + .txt{ margin-top: 20px} 
.kwhw_mainwrap .card .txt{ line-height:1.71;overflow: hidden;text-overflow: ellipsis;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; }
.kwhw_mainwrap .card + .cate{ margin-top: 24px;white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: calc(100% - 80px)} 
.kwhw_mainwrap .like{ position: absolute; right: 30px; bottom: 30px; font-size: 15px; color: var(--gray-t1)} 
.kwhw_mainwrap .like .num:before{ width: 12px; height: 12px} 

.kwhw_mainwrap .kwhw_g > .kwhw{ transition:transform .3s; height: auto}
.kwhw_mainwrap .kwhw_g .kwhw.current{ transform: translateY(-26px)} 

.kwhw_mainwrap .kwhw_g > .kwhw > a{ background: #fff;  display: block; position: relative; z-index: 2; padding:40px 30px 30px 30px;border-radius: var(--radius-L); width: 100%; height: 100% } 
.kwhw_mainwrap .kwhw_g > .kwhw.dv > a{ background: #FF5F66 url("../img/bg_main_process.svg") no-repeat right 23px; background-size: 50%; color: #fff; display: flex; flex-direction: column; justify-content: center} 
.kwhw_mainwrap .kwhw_g > .kwhw.dv:before{ background:rgba(132, 5, 10, 0.4)}
.kwhw_mainwrap .kwhw_g > .kwhw.dv dt{ font-size: 30px; font-weight: 700; line-height: 1.13; margin-bottom: 32px} 
.kwhw_mainwrap .kwhw_g > .kwhw.dv dd p{ font-size: 20px; letter-spacing: -0.4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%} 
.kwhw_mainwrap .kwhw_g > .kwhw.dv dd .more{ background: #fff; color: var(--primary-txt); font-size:12px; height: 26px; padding: 0 10px; border-radius: 20px; display: inline-flex;  align-items: center; justify-content: center; width: auto; gap:4px} 
.kwhw_mainwrap .kwhw_g > .kwhw.dv dd .more:after{ content: ">";font-family: 'Roboto',"Pretendard Variable", Pretendard; font-size: 12px } 
.kwhw_mainwrap .kwhw_g > .kwhw.dv dd p + .more{ margin-top:14px} 
.kwhw_mainwrap .bx-wrapper .bx-controls-direction a.bx-prev{ display: none} 
.kwhw_mainwrap .bx-wrapper .bx-controls-direction a.bx-next{ right: -20px} 
.prs_mainwrap{ width: calc(50% - 40px); height:510px}


.kwhw_mainwrap .kwhw_g > .kwhw.dv .nodata{ color: rgba(255,255,255,0.5); font-size: 1rem; min-height: auto; margin-bottom: 30px} 

.kwhw_mainwrap .kwhw_g > .kwhw.dv .nodata:before{filter:  brightness(35) opacity(0.5);  } 

.joinlank_mainwrap, .goods_mainwrap{ width: calc(25% - 20px)} 
.joinlank_mainwrap .lank_box{ background: rgba(247, 247, 250, 0.8); border-radius: 16px; overflow: hidden; padding-bottom: 12px; min-height: 460px} 

.joinlank_mainwrap .lanking_list li{ background: none; border-radius: 0; padding: 16px 25px; position: relative; display: flex; align-items: center; gap:10px} 
.joinlank_mainwrap .lanking_list li:first-of-type{ background:#FFE8E9; padding:25px 25px } 
.joinlank_mainwrap .lanking_list li + li + li:before{ content: ""; display: block; width: calc(100% - 50px); height: 2px; border-top: 1px dashed var(--dvdline); position: absolute; left: 25px; top: 0} 

.joinlank_mainwrap .lanking_list .user_profile{ align-items: flex-start;    overflow: hidden;} 
.joinlank_mainwrap .lanking_list .user_pic{ width: 50px; height: 50px} 
.joinlank_mainwrap .lanking_list .user_txt{ margin-top: 5px; display: block;overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; padding-right: 10px; flex: auto } 
.joinlank_mainwrap .lanking_list li .score{ left:0; right: auto; transform: translate(127px, -50%); font-size: 18px; font-weight: 700; top:calc(50% + 10px)}
.joinlank_mainwrap .lanking_list li .lank{ min-width: auto; width: 28px; height: 28px; line-height: 28px; font-size: 14px; font-weight: 700; background-size: 28px; margin-right: 2px; flex: none} 
.joinlank_mainwrap .lanking_list li .lank[data-rank="1"], .joinlank_mainwrap .lanking_list li .lank[data-rank="2"], .joinlank_mainwrap .lanking_list li .lank[data-rank="3"]{ font-size: 0} 
.joinlank_mainwrap .user_profile > .user_pic{ background-color: rgba(255,255,255,0.85)} 

.joinlank_mainwrap .lanking_list li:first-of-type .user_pic{ width: 70px; height: 70px} 
.joinlank_mainwrap .lanking_list li:first-of-type .user_txt{ margin-top: 10px; max-width:120px;   } 
.joinlank_mainwrap .lanking_list li:first-of-type .score{ font-size: 22px;transform: translate(147px, -50%);top: calc(50% + 12px);} 
.joinlank_mainwrap .user_profile > .user_txt > strong{white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%; display: block}
.joinlank_mainwrap .lankbox > .nodata{ height:440px} 

.joinlank_mainwrap .lanking_list li .nodata:before{ display: none} 
.joinlank_mainwrap .lanking_list li .nodata{ min-height: 50px; text-align: left; color: var(--color); align-items: flex-start} 
.joinlank_mainwrap .lanking_list li:first-of-type .nodata{ min-height: 70px} 

.goods_mainwrap .card_list{ display: flex; flex-direction: column; gap:10px} 
.goods_mainwrap [class^="card_"] li{ border: none; background: none; padding:1px 0 0 0; min-height: auto; min-height: 107px; display: flex; flex-direction: column; gap:6px; justify-content: flex-start} 
.goods_mainwrap [class^="card_"] li .tit{ display: flex; align-items: center; gap:6px} 
.goods_mainwrap [class^="card_"] li .tit strong{ line-height: 1} 
.goods_mainwrap [class^="card_"] li .tit .badge_group{ flex: none; flex-wrap: nowrap} 
.goods_mainwrap [class^="card_"] li .star_bx{ flex-direction: column; gap:3px} 
.goods_mainwrap [class^="card_"] li .star_bx dl{ flex-direction: column-reverse; display: flex} 
.goods_mainwrap [class^="card_"] li .star_bx dl dt{ font-size: 12px; color: var(--gray-t1)} 
.goods_mainwrap [class^="card_"] li .img{ background:#F7F7FA; border-radius: 16px; width: 107px; height: 107px; left: 0; top: 0; border: 1px solid #F7F7FA; overflow: hidden} 
.goods_mainwrap [class^="card_"] li .img img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover} 
.goods_mainwrap [class^="card_"] li .img ~ div{ padding-left:127px } 

.goods_mainwrap [class^="card_"] li .rate-was{ font-weight: 500; font-size: 14px;  width: 30px}
.goods_mainwrap [class^="card_"] li .star_g{ align-items: center} 

.goods_mainwrap [class^="card_"] li .star_g .star{ width: 76px; height:20px; display: block; position: relative}
.goods_mainwrap [class^="card_"] li .star_g .star:before{ content: ""; width: 100%; height: 100%; display: block; background: url("../img/ico_main_star.svg") no-repeat 0 50%; background-size: auto 12px; filter: grayscale(1) opacity(0.5)} 

.goods_mainwrap [class^="card_"] li .star_g .star .rate{ position: absolute; left: 0; top: 50%; transform: translate(0,-50%); display: block; width: 100%; background: url("../img/ico_main_star.svg") no-repeat 0 50%; background-size: auto 12px; height: 12px}
.goods_mainwrap [class^="card_"] li .bt_gogoods{display: flex;width: 76px;height: 28px;align-items: center;justify-content: center;color: #fff;border-radius: var(--radius-S);font-size: 12px;font-weight: 500;padding-right: 10px;background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12'%3E%3Cpath d='M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z' fill='rgba(255,255,255,1)'%3E%3C/path%3E%3C/svg%3E") no-repeat right 7px center; margin-left: 127px; margin-top: 4px} 
.goods_mainwrap .nodata{ min-height: auto; flex-direction: row; ;justify-content: flex-start; height:107px; align-items: center } 
.goods_mainwrap .nodata:before{ display: none} 

.kwhw_w .bx-wrapper{ border: none; background: none; box-shadow: none; margin: 0} 
.kwhw_w.swiper-css-mode.swiper-horizontal>.swiper-wrapper{    scroll-snap-type: x mandatory;    overflow: auto;} 

.prs_mainwrap .chartbox{ display: block !important; opacity: 0 !important; z-index: -100 !important; position: absolute; left: 0; top: 45px} 
.prs_mainwrap .chartbox.curr{ opacity: 1 !important; z-index: 1 !important; position: relative !important; top: auto !important; left: auto !important} 
.prs_mainwrap .chartbox .chart{ } 
.prs_mainwrap .nodata{ height:465px; width: 100%; background:#FBFBFE; border: 1px solid #E0E4EE; border-radius: 16px} 
.prs_mainwrap .nodata:before{ display: none} 

@media all and (max-width:1640px){
    .kwhw_mainwrap:before{ height: calc(100% + 100px)}  
     .kwhw_mainwrap .kwhw_g{  padding-top: 40px} 
    
}


@media all and (max-width:1500px){
  .quick_mainwrap{ width: calc(60% - 20px)}   
  .noti_mainwrap{ width: calc(40% - 20px)} 
  .quick_mainwrap .quick_w dl dd{ font-size: 28px; letter-spacing: -1px; word-break: keep-all}    
   .noti_mainwrap .noti li .tit{ max-width: calc(100% - 85px)} 
   
    .kwhw_mainwrap .kwhw_g > .kwhw{ min-width: 234px} 
   /*.kwhw_mainwrap .kwhw_g.swiper-wrapper > .kwhw{ min-width: auto !important}  */   
    .joinlank_mainwrap{    width: calc(40% - 40px);} 
    .prs_mainwrap{ width:60%;} 
    .prs_mainwrap .chart{ height:100%;overflow: hidden} 
    .prs_mainwrap .nodata{max-height: 450px; } 
   .joinlank_mainwrap .lankbox > .nodata{ max-height: 430px} 
     .goods_mainwrap{ width: 100%;} 
    
}
@media all and (min-width:1501px) and (max-width:1620px){    
    .menuopened .joinlank_mainwrap .tab_type_02 li button{ padding: 0 8px} 
    .menuopened .article.main{ gap:60px 20px} 
    .menuopened .joinlank_mainwrap,.menuopened .goods_mainwrap{    width: calc(25% - 5px);} 
}

@media all and (min-width:1024px) and (max-width:1500px){
    .goods_mainwrap{ width: 100%;} 
    .goods_mainwrap .card_list{ flex-direction: row; flex-wrap: wrap; gap:20px } 
    .goods_mainwrap .card_list li{ width: calc(50% - 20px)} 
}

@media all and (max-width:1300px){
    .quick_mainwrap .quick_w dl{ padding: 20px 12px} 
    .quick_mainwrap .quick_w dl dd .score{ right: 12px} 
    .quick_mainwrap .quick_w{ gap:10px; flex-wrap: wrap} 
    .quick_mainwrap .quick_w > a{    width: calc(33.33% - 10px);} 
    .orion .article.main{ gap:60px 20px} 
     .quick_mainwrap{ width: calc(60% - 10px)}   
  .noti_mainwrap{ width: calc(40% - 10px)}
    .tab_type_02 li button{ padding: 0 10px}
    .noti_mainwrap .noti li .date{ width: auto} 
   
}

@media all and (max-width:1200px){
    .quick_mainwrap .quick_w dl dd{ font-size: 20px; } 
    .quick_mainwrap .quick_w dl dd .score{ padding: 0 5px; right: 8px}     
    .noti_mainwrap .list_box{ padding: 30px 15px} 
    .noti_mainwrap .noti li a, .noti_mainwrap .noti li{ gap:10px} 
    .noti_mainwrap .noti li .date{ width: auto} 
    .noti_mainwrap .noti li .tit{ max-width: calc(100% - 75px)} 
    .joinlank_mainwrap {width: calc(40% - 20px);}
   
}

@media all and (min-width:1024px) and (max-width:1200px){
     .joinlank_mainwrap .lanking_list li{ padding-left: 10px !important; padding-right: 10px !important; gap:5px} 
    .joinlank_mainwrap .lanking_list .user_profile{ gap:5px} 
    .joinlank_mainwrap .lanking_list li .score{transform: translate(100px, -50%);} 
    .joinlank_mainwrap .lanking_list li:first-of-type .score{transform: translate(123px, -50%);}
}

@media all and (max-width:1023px){
   .orion .article.main{ padding-top:0px; flex-wrap: nowrap; gap:40px; flex-direction: column}  
    .quick_mainwrap .quick_w{ position: relative; width: 100%;top:auto; left: auto; padding-top: 0; z-index:auto} 
    .quick_mainwrap .quick_w dl dd .score{ letter-spacing: 0; } 
    .quick_mainwrap .quick_w dl dt{ font-weight: 400} 
    .noti_mainwrap{ order: 4} 
    [class*="_mainwrap"]{ width: 100% !important} 
    .quick_mainwrap .quick_w:after{ display: none} 
    [class*="_mainwrap"] h3{ font-size: 22px} 
    .quick_mainwrap .quick_w > a{width: calc(33.33% - 7px);} 
    .kwhw_mainwrap h3, .kwhw_mainwrap h3 a{ font-size: 24px} 
    .kwhw_mainwrap .kwhw_g > .kwhw.dv dt{ font-size: 26px; margin-bottom: 20px} 
    .kwhw_mainwrap .kwhw_g > .kwhw.dv dd p{ font-size: 16px} 
    .kwhw_mainwrap .kwhw_g > .kwhw.dv dd p + .more{ font-size: 14px; height: 32px} 
    .kwhw_mainwrap .user_profile .user_pic{ width: 72px; height: 72px} 
    .kwhw_mainwrap .user_profile .name{ font-size: 14px} 
    .kwhw_mainwrap .user_profile{ margin-bottom: 22px} 
    .kwhw_mainwrap .card .tit + .txt{ margin-top: 10px; line-height: 1.4} 
    .kwhw_mainwrap .kwhw_g > .kwhw > a{ padding: 30px 25px} 
    .kwhw_mainwrap .card + .cate{ margin-top: 18px} 
    .kwhw_mainwrap .like{ font-size: 14px; } 
    .kwhw_mainwrap .like .num:before{ width: 10px; height: 10px} 
    .kwhw_mainwrap .kwhw_w{} 
    .kwhw_mainwrap:before{ width: calc(100% + 50px) !important} 
    .kwhw_mainwrap .bx-wrapper .bx-controls-direction a.bx-next{ right: 0} 
    .prs_mainwrap{ padding-bottom: 40px} 
    .prs_mainwrap:after, .joinlank_mainwrap:after, .goods_mainwrap:after{ content: ""; display: block; position: absolute; bottom: 0; width: 100vw; height: 10px; background:var(--dvdline2); transform: translateX(-25px)}
    .joinlank_mainwrap{ padding-bottom:50px} 
    .joinlank_mainwrap .lanking_list li:not(:first-of-type) .score{ font-size: 20px} 
    .lanking_list .user_profile .name{ font-size: 16px} 
    .joinlank_mainwrap .lanking_list li:not(:first-of-type) .score{top: calc(50% + 13px);} 
    .goods_mainwrap{ padding-bottom: 50px} 
    .goods_mainwrap .card_list{ gap:20px} 
    .goods_mainwrap [class^="card_"] li{ min-height: 125px; gap:10px; padding-top: 7px} 
    .goods_mainwrap [class^="card_"] li .img{ width: 125px; height: 125px} 
    .goods_mainwrap [class^="card_"] li .img img{ width: 90px; height: 90px} 
    .goods_mainwrap [class^="card_"] li .img ~ div{ padding-left: 150px} 
    .goods_mainwrap [class^="card_"] li .star_bx{ gap:8px} 
    .goods_mainwrap [class^="card_"] li .bt_gogoods{ margin-left: 150px} 
    .goods_mainwrap [class^="card_"] li .tit strong{ font-size: 16px} 
    .noti_mainwrap .list_box{ background: none; padding: 0; height: auto} 
    .noti_mainwrap h3{ border-bottom: 1px solid #212234; padding-bottom: 20px} 
    .noti_mainwrap .noti li a, .noti_mainwrap .noti li{ flex-direction: column; color:var(--color); align-items: flex-start;  } 
    .noti_mainwrap .noti li a .tit > strong{ font-weight: 700; font-size: 16px; text-decoration: none !important; font-weight: 500} 
    .noti_mainwrap .noti li .date{ font-size: 14px} 
    .noti_mainwrap .noti li{ border-bottom: 1px solid var(--dvdline); padding-bottom: 20px;background: url("../img/paging_nxt.svg") no-repeat right -10px top calc(50% - 10px)} 
    .noti_mainwrap .noti li:last-of-type{ border-bottom-width: 2px} 
    .noti_mainwrap .noti.curr ul{ gap:20px} 
    .noti_mainwrap .noti li .tit{ max-width: calc(100% - 30px); align-items: center} 
    .prs_mainwrap{ height: auto; } 
    .noti_mainwrap .noti .nodata{ background: #fff} 
    .prs_mainwrap .chartbox .chart{ width: calc(100vw - 50px) !important; height:30vh !important} 
}

@media all and (max-width:767px){
    
    
}
@media all and (max-width:1023px) and (orientation:landscape){
	.prs_mainwrap .chartbox .chart{ width: calc(100vw - 50px) !important; height:60vh !important} 
}

.loading_bx{ position: relative; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; z-index: 10; flex-direction: column} 
.loading_bx .dimmed{ background: rgba(0,0,0,0.8); width: 100%; height: 100%; z-index: 1; position: absolute} 
.loading{width: 60px; height: 60px; box-sizing: border-box; position: relative; z-index: 2; flex: none;animation: wrapper 10s linear infinite;}

.dot { height: 60px;  width: 1px; box-sizing: border-box; position: absolute; left: 50%; display: block; transform: translateX(-50%)}
.loading.big{ width: 100px; height: 100px} 
.loading.big .dot{ height: 100px} 
.loading.small{ width: 40px; height: 40px} 
.loading.small .dot{ height: 40px} 
.loading.micro{ width: 20px; height: 20px} 
.loading.micro .dot{ height: 20px} 
body > .loading_bx{ position: fixed; left: 0; top: 0; z-index: 9999} 



.dot:before { content: "";  display: block;  width: 30px;  height: 30px;background: url("../img/load_star.svg") no-repeat 50% 50%; box-sizing: border-box;
margin-top: -15px; -webkit-animation: before 1.2s ease-in infinite;animation: before 1.2s ease-in infinite;}
.loading.big .dot:before{ background-size: 25px} 
.loading.big .micro:before{ background-size:4px;width: 10px;  height: 10px;} 

.dot:nth-of-type(1) {transform: rotate(0deg) translateX(-50%);}
.dot:nth-of-type(1):before {animation-delay: -0.00s;}
.dot:nth-of-type(2) { transform: rotate(40deg) translateX(-50%);}
.dot:nth-of-type(2):before {animation-delay: -0.1s;}
.dot:nth-of-type(3) {transform: rotate(80deg) translateX(-50%);}
.dot:nth-of-type(3):before {animation-delay: -0.2s;}
.dot:nth-of-type(4) {transform: rotate(120deg) translateX(-50%);}
.dot:nth-of-type(4):before {animation-delay: -0.3s;}
.dot:nth-of-type(5) {  transform: rotate(160deg) translateX(-50%);}
.dot:nth-of-type(5):before {animation-delay: -0.4s;}
.dot:nth-of-type(6) { transform: rotate(200deg) translateX(-50%);}
.dot:nth-of-type(6):before {animation-delay: -0.5s;}
.dot:nth-of-type(7) { transform: rotate(240deg) translateX(-50%);}
.dot:nth-of-type(7):before {animation-delay: -0.6s;}
.loading_bx p{ color: #fff; position: relative; margin-top:25px; font-weight: 500; font-size: 1rem; z-index: 3} 
@keyframes wrapper {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
@keyframes before {
  0% {transform: scale(1);opacity: 1;}  
  45% {transform: scale(0.4);  }
  50% {transform: scale(0.4);opacity: 0.4; }
  55% {transform: scale(0.4);opacty: 0.4;}
  100% {transform: scale(1);opacity: 1; }
}

/* 20230925 에디터이미지 강제처리 향후 문제시 삭제예정 - width 에 따라서 height auto로 조정*/
.se-drawing-object-wrapper.se-image img{height:auto !important}
/*.se-contents-edit img{max-width:none}*/