@charset "utf-8";

/* ---------- 공통  ---------- */
.radio {display: flex; align-items: center; justify-content: flex-start; gap: 1rem; position: relative;}
.radio label.radio-label {display: inline-flex; align-items: center; justify-content: center; position: relative; cursor: pointer; vertical-align: top;}
.radio input[type="radio"] {appearance: none; display: block; width: 1.8rem; height: 1.8rem; background: url('/portal/img/Default/radio_icon.svg')center center no-repeat; background-size: 1.8rem auto; cursor: pointer;}
.radio input[type="radio"]:checked {background: url('/portal/img/Default/radio_icon_active.svg')center center no-repeat; background-size: 1.8rem auto;}
.radio input[type="radio"] + .label-text {width: calc(100% - 1.8rem); padding-left: 8px; font-size: 1.4rem; font-weight: 500; line-height: 1.3; color: #555; cursor: pointer;}

input[type="file"]{position: absolute; width: 0px;height: 0px; padding: 0;overflow: hidden; border: none;}


.top-infomation_box{width:100%; margin-bottom:4rem;}
.top-infomation_box .title{font-size: 1.8rem; font-family: 'SebangGothic', sanserif;     line-height: 1.5; margin-bottom: 0.5rem;}
.top-infomation_box ul{ width: 100%; background: #f9f9f9; border: 1px solid #ececec; padding: 3rem; display: flex; align-items: center; gap:1rem 3rem; flex-wrap:wrap; border-radius: 6px;}
.top-infomation_box ul li{position:relative;}
.top-infomation_box ul li:nth-child(1):before{display:none;}
.top-infomation_box ul li:before{content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: -15px; width: 1px; height: 14px; background: #d3d3d3;}
.top-infomation_box ul li span{font-weight:500;}
.top-infomation_box ul .timer{display: flex; align-items:center; gap:1rem;}
.top-infomation_box ul .timer .col{display: flex;align-items:center;/* gap:0.5rem; */}
.top-infomation_box ul .timer .col input{height:3.5rem; max-width: 11rem; padding: 0 1rem;border-radius: 5px 0 0 5px;}
.top-infomation_box ul .timer .btn{padding: 0.6rem 1rem;background: #fff;border: 1px solid #e3e3e3;height: 3.5rem;border-radius: 5px;}
.top-infomation_box ul .timer .btn span{font-size: 1.4rem; font-weight: 400;}
.top-infomation_box ul .timer .start_btn{background: var(--color-point);border-color: var(--color-point);border-radius: 5px;margin-left: 1rem;}
.top-infomation_box ul .timer .start_btn span{color:#fff;}


.media #board_box{margin-top:4rem;}
.media .board-search .search .srcSel{background-color: #fff;}
.media .board-search .search .srcTxt{width:100%; max-width:20rem;}
.media .board-search .search .srcTxt.ty01{max-width: 100%; width: 32rem;}
.search-wrap_box .input-group{display:flex; align-items:center;gap:1rem;}
.search-wrap_box .input-group .ttxt{max-width:11rem; line-height:1.4;}
.search-wrap_box .input-group + .input-group{margin-left:2.5rem;} 
.ip-wrap_box .srcSel{height: 4.5rem; width: 100%;}
.ip-wrap_box .tbInput{height: 4.5rem; width: 100%; border: 1px solid var(--color-grayLine); padding: 0 2rem; border-radius: 0 5px 5px 0;}
.media .input-Txt{height: 6rem; width:100%; border: 1px solid var(--color-grayLine); padding: 0 2rem; border-radius: 0 5px 5px 0;}
.media .textarea-Txt{width:100%; height:10rem; resize:none;border: 1px solid var(--color-grayLine); padding:2rem; border-radius: 0 5px 5px 0;}

.size_ch{height:3.7rem;}


/* ---------- 로그인 영역 ---------- */
.media-login_type .tab-content{height:36rem;}
.media-login_type .inputItemWrap_radio{width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 3.5rem; padding:0 1.5rem;}
.media-logout{display: flex;align-items: center;width: 8rem;height:2.4rem;background: url(/portal/img/Layout/icon_logout.svg) no-repeat center left / 2.4rem;margin-left: 3rem;}
.media-logout span{display: flex; align-items: center; padding-left: 3rem; font-size: 1.5rem; font-weight: 500;}

/* ---------- 상담방 관리 ---------- */
.counseling-tab .tab-nav{border-bottom:1px solid #ececec;}
.counseling-tab .tab-nav ul {display:flex;}
.counseling-tab .tab-nav li {position:relative;}
.counseling-tab .tab-nav a {width:16rem;height:5.5rem;padding:1rem;display:flex;align-items:center;justify-content:center;background:var(--color-gray);}
.counseling-tab .tab-nav a span {font-family: 'SebangGothic', sanserif;}
.counseling-tab .tab-nav li:first-child a {border-radius:10px 0 0 0;}
.counseling-tab .tab-nav li:last-child a {border-radius:0 10px 0 0;}
.counseling-tab .tab-nav li a[aria-selected="true"] {position:relative;z-index:1;}
.counseling-tab .tab-nav li a[aria-selected="true"] {background:#5190cc; box-shadow:7px 15px 10px rgba(43, 64, 146, 0.1);}
.counseling-tab .tab-nav li a[aria-selected="true"] span {color:#fff;}


.matching_btn{min-width: 15rem; height: 4rem; border-radius: 3px; border: 1px solid var(--color-point);}
.matching_btn span{position:relative; padding-left:2rem; color:var(--color-point);}
.matching_btn span:before{content:'';display:block;position:absolute;top: 50%;transform: translateY(-50%);left:0;background:url(/portal/img/Default/icon_matching.svg) no-repeat center / 1.6rem;width: 1.6rem;height: 1.6rem;}

/* --------- 사례게시판 ---------- */
.media .boardLst > li{padding:3.5rem 0;}
.reply-wrapper .total{margin-bottom:2rem;}
.reply-wrapper .empty{background:none; border-bottom:1px solid #ddd; }
.reply-wrapper{margin:7rem 0 3rem;}
.reply-wrapper .reply-header{padding-bottom:2.4rem; border-bottom:0.1rem solid #000; margin-bottom: 0.1rem;}
.reply-wrapper .reply-header .title{font-size:2rem; font-weight: 700;}
.reply-wrapper .reply-item{border-bottom:0.1rem solid #eee; padding:2.4rem; display:flex;align-items: flex-start; flex-wrap: wrap; position: relative;}
.reply-wrapper .reply-item .item-content pre {white-space:pre-wrap;line-height:160%;}
.reply-wrapper .reply-item .item-content{flex:1; padding-right:1.6rem; position: relative; min-width:0; line-height:1.5;}
.reply-wrapper .reply-item .item-control{display:flex; gap:1.5rem;}
.reply-wrapper .reply-item .item-control a{position:relative;}
.reply-wrapper .reply-item .item-control a:before{content:''; display: block; width: 0.1rem; height: 1.2rem;  background: #ddd; position: absolute; left: -0.7rem;  top: 50%; transform: translateY(-50%);}
.reply-wrapper .reply-item .item-control a:first-child:before{display:none;}
.reply-wrapper .reply-list .reply-btn{font-size:1.5rem;}
.reply-wrapper .reply-item .item-meta{margin-bottom:1.5rem;display: flex;align-items: center;flex-wrap: wrap;gap: 1rem;}
.reply-wrapper .reply-item .item-meta .name{font-size:1.5rem; font-weight:500; color:#000;}
.reply-wrapper .reply-item .item-meta .cp{font-size:1.5rem; font-weight:500; color:#034EA2; padding-left: 0.6rem;}
.reply-wrapper .reply-item .item-meta .date{font-size:1.4rem;letter-spacing: 0;color:#888;/* padding-left:1.6rem; *//* margin-left:1.6rem; */position: relative;}
.reply-wrapper .reply-list .reply-list .reply-item{background:#f8f9fa;padding-left: 5.5rem;}
.reply-wrapper .reply-list .reply-list .reply-list .reply-item{padding-left:8.5rem;}
.reply-wrapper .reply-list .reply-list .reply-item .item-meta:before{content:"";display:block;width: 1.8rem;height: 1.8rem;background:url(/portal/img/Default/icon_reply.svg) no-repeat center;position: absolute;left: -3rem;top:0}
.reply-wrapper .reply-list .reply-list .reply-list .reply-list .reply-item{padding-left:14.4rem;}
.reply-wrapper .reply-list .reply-list .reply-list .reply-list .reply-list .reply-item{padding-left:18.4rem;}
.reply-wrapper .reply-list .reply-list .reply-list .reply-list .reply-list .reply-list .reply-item{padding-left:22.4rem;}
.reply-wrapper .reply-list .reply-list .reply-list .reply-list .reply-list .reply-list .reply-list .reply-item{padding-left:26.4rem;}
.reply-wrapper .reply-list .reply-item.on .reply-btn{text-decoration: underline; text-underline-position: under;}
.reply-wrapper .reply-list .reply-item.on ~ .reply-form:before{content:""; display:block; width:100%; height:100%; border-top:0.1rem solid #eee; pointer-events: none; position: absolute; left:0; top:0;}
.reply-wrapper .reply-list .reply-item.on-modify:before{content:""; display:block; width:100%; height:100%; border:0.1rem solid #034EA2; pointer-events: none; position: absolute; left:0; top:0}
.reply-wrapper .reply-list .reply-item.on-modify .modify-btn{background:#034EA2; border-color: #034EA2; color:#fff;}
.reply-wrapper .reply-list .reply-item.on-modify ~ .reply-form:before{content:""; display:block; width:100%; height:100%; border:0.1rem solid #034EA2; pointer-events: none; position: absolute; left:0; top:0}
.reply-wrapper .reply-list .reply-add{background: #f8f9fa;}
.reply-wrapper .reply-list .add-list01 .reply-item{padding-left: 5.5rem;}
.reply-wrapper .reply-list .add-list02 .reply-item{padding-left: 8.5rem;}
.reply-wrapper .reply-list .add-list03 .reply-item{padding-left: 11.5rem;}
.reply-wrapper .reply-list .add-list04 .reply-item{padding-left: 14.5rem;}
.reply-wrapper .reply-list .add-list05 .reply-item{padding-left: 17.5rem;}
.reply-wrapper .reply-list .add-list06 .reply-item{padding-left: 20.5rem;}
.reply-wrapper .reply-list .add-list07 .reply-item{padding-left: 23.5rem;}
.reply-wrapper .reply-list .add-list08 .reply-item{padding-left: 26.5rem;}
.reply-wrapper .reply-list .add-list09 .reply-item{padding-left: 29.5rem;}
.reply-wrapper .reply-list .add-list10 .reply-item{padding-left: 32.5rem;}
.reply-wrapper .reply-list .add-list11 .reply-item{padding-left: 35.5rem;}
.reply-wrapper .reply-list .add-list12 .reply-item{padding-left: 38.5rem;}
.reply-wrapper .reply-list .add-list13 .reply-item{padding-left: 41.5rem;}
.reply-wrapper .reply-list .add-list14 .reply-item{padding-left: 44.5rem;}
.reply-wrapper .reply-list .add-list15 .reply-item{padding-left: 47.5rem;}
.reply-wrapper .reply-list .add-list16 .reply-item{padding-left: 50.5rem;}
.reply-wrapper .reply-list .add-list17 .reply-item{padding-left: 53.5rem;}
.reply-wrapper .reply-list .add-list18 .reply-item{padding-left: 56.5rem;}
.reply-wrapper .reply-list .add-list19 .reply-item{padding-left: 59.5rem;}
.reply-wrapper .reply-list .add-list20 .reply-item{padding-left: 62.5rem;}
.reply-wrapper .reply-list .reply-add .reply-item .item-meta:before {content: ""; display: block; width: 1.8rem;  height: 1.8rem;  background: url(/portal/img/Default/icon_reply.svg) no-repeat center; position: absolute; left: -3rem; top: 0;}

.reply-form{background:#f8f9fa; padding:3rem 2.4rem; width: 100%; border-bottom:0.1rem solid #eee; position: relative; margin-top:-0.2rem}
.reply-form .form-item + .form-item{margin-top:1rem;}
.reply-form .item-content{flex:1;}
.reply-form .form-item{display:flex;}
.reply-form .name input{width:100%; max-width:30rem; font-size:1.5rem;}
.reply-form .content textarea{width:100%; height:100%; min-height: 8rem; resize: none; font-size:1.5rem; border-radius:0;}
.reply-form [class*="form-item"] .item-label{width:7rem; padding-right:1rem; font-size:1.5rem;}
.reply-top{margin-top:3rem; border-bottom:0.1rem solid #eee; border-top:0.1rem solid #000}
.reply-top .reply-form{background:none; border:none; width: 100%; display: flex; align-items: stretch; gap: 0.5rem;}
.reply-top .reply-form .form-item{width: calc(100% - 12.5rem); height: 100%;}
.btns-wrapper{width: 12rem;}
.btns-wrapper.right{display: flex; align-items: center;  gap: 0.5rem; margin-left: auto; margin-top:1rem;}
.btns-wrapper .btn-white-sm{display: flex; align-items: center; justify-content: center; padding:1rem 0; border-radius:3px; width: 100%; height: 100%;}
.btns-wrapper .apply-btn{background: var(--color-point2); color: #fff;}
.btns-wrapper .cancel-btn{background: #fff; border: 1px solid #eee;}
.board-write-warp{border-top:1px solid #222; padding:3rem 2rem;}
.board-write-warp li + li{margin-top:4rem;}
.board-write-warp .title{font-weight: 600; margin-bottom: 1rem;}
.board-write-warp .fileIpBox{display: flex; gap: 0.5rem;}
.board-write-warp .fileIpBox + .fileIpBox{margin-top:1rem;}
.board-write-warp .fileIpBox .fileInput{height: 6rem; width:100%; max-width:50rem; border: 1px solid var(--color-grayLine); padding: 0 2rem; border-radius: 0 5px 5px 0;}
.board-write-warp .fileIpBox .fileInputReal{padding: 0 !important; border: none; height: 0 !important; line-height: 0!important;visibility:hidden;}
.board-write-warp .fileIft{font-size: 1.4rem; margin-top: 1rem; line-height:1.3;}
.board-write-warp .file_del{ display: block; width: 4rem; height: 6rem; background: url(/portal/img/Default/icon_del.svg) no-repeat center center / 2rem;}
.board-write-warp .file_add{ display: block; width: 4rem; height: 6rem; background: url(/portal/img/Default/icon_add.svg) no-repeat center center / 2rem;}
.board-write-warp .file-veiw{margin:2rem;}
.board-write-warp .file-view_atag{width:100%; display:flex; align-items:center; gap:0.5rem;}
.board-write-warp .file-veiw .file_nm{display: flex; word-break: break-all; line-height: 1.2;font-size:1.5rem; color:#999; text-decoration: underline; text-underline-position: under;}
.board-write-warp .file-veiw .file_del{height:4rem;}


/* --------- 채팅상담 ---------- */
.chat-wrap{ width: 100%;  display: flex; align-items: start; gap: 4rem;}
.chat-wrap .chatBox{width:calc(100% / 2 - 2rem);}
.chat-wrap .chatBox .list_box{height: 66.5rem; overflow-y: auto; }
.chat-wrap .chatBox .list_box::-webkit-scrollbar { width: 0.5rem; }
.chat-wrap .chatBox .list_box::-webkit-scrollbar-thumb{ background:#ddd; border-radius:1rem; }
.chat-wrap .chatBox .list_box::-webkit-scrollbar-track{ background:#eee;}
.chat-wrap .chat-wrap_list .title{width: 100%; height: 5.5rem; padding: 1rem; display: flex; align-items: center; justify-content: center;font-family: 'SebangGothic', sanserif; border-radius: 1rem 1rem 0 0; background: #5190cc; color: #fff;}
.chat-wrap .chat-wrap_list .tbl01{margin-top:0; border: 1px solid #eee;}
.chat-wrap .chat-wrap_list .tbl01:before{display:none;}
.chat-wrap .chat-wrap_list .tbl01 th{font-weight: 600;}
.chat-wrap .chat-people_info{width:100%; padding:0.5rem;    position: relative; padding-right: 12rem;}
.chat-wrap .chat-people_info .item{width: 100%; display: flex; align-items: center; gap: 1rem;}
.chat-wrap .chat-people_info .item + .item{margin-top:0.5rem;}
.chat-wrap .chat-people_info .item .tit{border: 1px solid #222;border-radius: 5rem;width: 5.5rem;padding: 0.5rem;font-size: 1.3rem;}
.chat-wrap .chat-people_info .instructor .tit{background: #c7c7c7;color: #222;border-color: #c7c7c7;}
.chat-wrap .chat-people_info .item .infotxt{width: calc(100% - 6.5rem);display: flex;align-items:center;gap:0 2rem;flex-wrap:wrap;}
.chat-wrap .chat-people_info .item .infotxt .state{font-size:1.5rem; }
.chat-wrap .chat-people_info .item .infotxt .no{color:#999;}
.chat-wrap .chat-people_info .item .infotxt .yes{color: var(--color-point3);font-weight: 600;}
.chat-wrap .chat-people_info .btn{position: absolute; top: 50%; transform: translateY(-50%); right: 0.5rem;}
.chat-wrap .chat-wrap_chating .chating_header{width:100%;background:var(--color-point);display: flex;justify-content: space-between;padding: 2rem;border-radius: 1rem 1rem 0 0;}
.chat-wrap .chat-wrap_chating .chating_header .title{font-family: 'SebangGothic', sanserif; color: #fff; margin-bottom: 1rem;}
.chat-wrap .chat-wrap_chating .chating_header .timer{font-size: 1.4rem; color: #9aa9e5;}
.chat-wrap .chat-close{font-size:1.4rem; color:#fff; display:flex; align-items:center;}
.chat-wrap .chating_body{border: 1px solid #eee; width: 100%; background:#fff; padding: 3rem;height: 46rem; overflow-y: auto; }
.chat-wrap .chating_body::-webkit-scrollbar { width: 0.5rem; }
.chat-wrap .chating_body::-webkit-scrollbar-thumb{ background:#ddd; border-radius:1rem; }
.chat-wrap .chating_body::-webkit-scrollbar-track{ background:#eee;}
.chat-wrap .chating_conversation .list-item{width: 100%;}
.chat-wrap .chating_conversation .list-item + .list-item{margin-top:2rem;}
.chat-wrap .chating_conversation .list-item .name{font-weight: 600; margin-bottom: 0.8rem;}
.chat-wrap .chating_conversation .list-item .talk{color: #555;line-height: 1.4;}
.chat-wrap .chating_conversation .list-item .time{font-size: 11px;color: #888;margin-top: 3px;}
.chat-wrap .chating_conversation .list-item.right{text-align: right;}
.chat-wrap .chating_conversation .intxt{margin-top:2rem; font-size:1.4rem; color:#999; text-align:center;}
.chat-wrap .chating_footer{border:1px solid #eee; border-top:0;}
.chat-wrap .chating_footer .role_check{width: 100%; background: #f9f9f9; padding: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;}
.chat-wrap .chating_footer .role_check .ttxt{font-size:1.5rem; color: #000;}
.chat-wrap .chating_footer .role_check .inputItemWrap_radio{margin-left:auto; display: flex; align-items: center; gap: 1.5rem;}
.chat-wrap .chating_footer .role_check .role_btn{padding: 0.6rem 1rem; border-radius:3px; background: #fff; border: 1px solid #e3e3e3;}
.chat-wrap .chating_footer .role_check .role_btn span{ font-size: 1.4rem; font-weight: 400;}
.chat-wrap .chating_footer .chting_write .verti{width: 100%;  display: flex; padding: 2rem;}
.chat-wrap .chating_footer .chting_write .textarea-Txt{font-size:1.5rem; border:0; padding:0; height:8rem; width:calc(100% - 8rem);}
.chat-wrap .chating_footer .chting_write .textarea-Txt::place-holder{color:#999;}
.chat-wrap .chating_footer .chting_write .chatbtn{width: 8rem; height: 8rem; background: var(--color-point); color: #fff;}
.chating_end{width:100%; margin: 5rem auto; text-align: center;}
.chating_end .txt{position:relative; padding-top: 23rem; font-family: 'SebangGothic', sanserif; color:var(--color-point); font-size:2rem;}
.chating_end .txt:before{content:''; display:block; background:url(/portal/img/Default/chating_end_img.png) no-repeat center center / 20rem; width:20rem; height:20rem; position:absolute; top:0; left: 50%; transform: translateX(-50%);}

	@media screen and (min-width:1200px){
	
		/* hover */
		.login-tab .loginBtn {transition:all .3s;}
		.login-tab .loginBtn:hover,
		.login-tab .loginBtn:focus-visible {background:var(--color-point2);}
	}
		
	@media screen and (max-width:1400px){
	
		.size_ch{height:3rem;}
	}
	
	@media screen and (max-width:1200px){
		
		.board_btn .btn { min-width: 10rem;}

	}
	
	@media screen and (max-width:980px){
		
		/* ---------- 채팅상담  ---------- */
		.chat-wrap{flex-direction: column; }
		.chat-wrap .chatBox{width:100%;}
		.chat-wrap .chatBox .list_box{height:22rem;}
	}
	
	@media screen and (max-width:768px){
		
		.search-wrap_box{width: 100%; flex-direction: column; align-items: flex-start;gap: 1rem;}
		.search-wrap_box .input-group{width:100%; flex:1;}
		.search-wrap_box .input-group .ttxt{max-width:100%; width:11rem !important;}
		.media .board-search .search .srcTxt{max-width: 100%; width: calc(100% - 12rem)!important; height:5rem;}
		.media .board-search .search .srcSel{ width: calc(100% - 12rem) !important; height:5rem;}
		.search-wrap_box .input-group + .input-group{margin-left:0;}
		.media .board-search .search .srcBtn{width:100%;margin-left: 0;}
	
		/* ---------- 상담방 관리  ---------- */		
		.tbl01 .m_n{display:none;}	
		.tbl01.rspvn_table { clear: both;}
		.tbl01.rspvn_table colgroup{display:none;}
		.tbl01.rspvn_table thead{display:none;}
		.tbl01.rspvn_table tbody{overflow:hidden;}
		.tbl01.rspvn_table tbody tr{overflow:hidden;}
		.tbl01.rspvn_table tbody tr:first-child { margin-top: 0; border-top: none;}
		.tbl01.rspvn_table tbody tr + tr{border-top: 2px solid #444;  margin-top: 1rem; display: block;}
		.tbl01.rspvn_table tbody td{position: relative; width: 100%;  min-height: 3.8rem; float: left;  text-align: left; padding: 1.2rem 1.2rem 1.2rem 12.5rem; border: 0;font-size:1.5rem !important;vertical-align:middle;}
		.tbl01.rspvn_table td + td {border-bottom: 1px solid var(--color-grayLine);}
		.tbl01.rspvn_table td[data-cell-header]:before {content: attr(data-cell-header);  float: left;  position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 2; width: 15rem; font-weight: 600;  padding: 0 1rem;}
		.tbl01.rspvn_table td[data-cell-header]:after{ border: 0;  position: absolute;  left: 0;  top: 0;  width: 10rem;  height: 100%;  display: block;  content: "";  z-index: 1;}
		.tbl01.rspvn_table td[data-cell-header]:before {text-align:center; font-size:1.5rem; content: attr(data-cell-header);  float: left;  position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 2; width: 11rem; font-weight: 600;  padding: 0 1rem;}
		.tbl01.rspvn_table td[data-cell-header]:after{background:var(--color-gray);border: 0;  position: absolute;  left: 0;  top: 0;  width: 11rem;  height: 100%;  display: block;  content: "";  z-index: 1;}

	}
	
	@media screen and (max-width:480px){
		
		.media-logout{margin-left:1rem;}
		
		/* ---------- 사례게시판  ---------- */
		.media .boardLst > li{flex-wrap:wrap;}
		.media .boardLst .flexItem.btnbox{width: 100%; margin-top: 2rem; text-align: right;}	
		
		/* ---------- 채팅상담  ---------- */
		.chat-wrap .chat-people_info .btn{padding:0.6rem 1rem;}	
		
	}