/* 기본 reset CSS START */
html {font-size: 12px;}
body {font-family: 'Noto Sans KR', sans-serif; background: #fff; font-size: 1rem; }
.pop-width {padding: 0;}
a:hover {text-decoration: none; color: #fff;}
img {width: 100%;}
.row {max-width: 1200px; margin: 0 auto; position: relative;}
ul {list-style: none; padding-left: 0;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-family: 'Noto Sans KR', sans-serif;}
/* 기본 reset CSS END */

/* 컴포넌트화된 디자인 정리 START */
.new-icon {background: #ec4756; font-weight: 700; font-size: 12px; display: inline-block; padding: 2px 5px; border-radius: 50px; color: #fff; line-height: 1;}
.btn-member-type-wrap {display: flex; justify-content: center; align-items: center;}
.btn-member-type-wrap>div {margin: 0 5px;}
.btn-member-type-wrap>div>a {display: block; padding: 5px 20px; font-size: 16px; font-weight: 400; border: 1px solid #000; border-radius: 50px;}
/* 컴포넌트화된 디자인 정리 END */

.header {background: #3490ff;}
.heading-hr { color: #fff; font-weight: 400; font-size: 1.5rem; margin-bottom: 0; padding-bottom: 5px; border-bottom: none; position: relative; margin-top: 0;}
.heading-hr>span {color: #fff; font-size: 36px; font-weight: 700; margin-left: 20px;}
.heading-hr .btn-wrap {position: absolute; right: 15px; top: 1rem;}
.heading-hr .btn-wrap>a {display: inline-block; padding: 5px 10px; font-size: 14px; font-weight: 700; border: 1px solid #fff; color: #fff; border-radius: 50px;}
.header h1 {margin: 0;}
.header h1>a {display: block; padding: 5px; padding-left: 20px; font-weight: 900; color: #fff; font-size: 34px;}

.block {display: grid; grid-template-columns: 3fr 12fr;}
.graph-wrap {display: flex; flex-wrap: wrap; justify-content: space-around; width: 980px;}
.graph-wrap>div{width: 300px; height: 300px; padding: 50px 20px 20px 20px; margin-bottom: 10px;}
.chart-container { border-radius: 20px; position: relative; background: #fafafa; box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);}
.chart-container h3 {position: absolute; left: 50%; top: 15px; transform: translateX(-50%); width: 100%; text-align: center; font-size: 1.2rem; color: #3490ff;}
.tutor-info { color: #000; text-align: center; padding-top: 20px; }
.tutor-info .img-wrap { position: relative; overflow: hidden; border-radius: 50%; height: 130px; width: 128px; margin: 0 auto;  box-shadow: 8px 9px 15px -10px gray;}
.tutor-info .img-wrap>div {height: 100%; width: 100%; border-radius: 50%; overflow: hidden;}
.tutor-info .img-wrap>div>img {width: 100%; height: 100%;}
.img-wrap img {width: 100%;}
.tutor-info .name-wrap {font-weight: 700; text-align: center; font-size: 2.2rem; margin-top: 10px; color: #3490ff;}
.tutor-info .award-wrap {color: #3490ff; font-weight: 700;}
.tutor-info-depth {font-weight: 400; font-size: 14px; color: #000; text-align: center;}
.tutor-info-depth>div {margin-bottom: 15px;}
.tutor-info-depth strong {color: #3490ff; font-size: 1.5rem; font-weight: 700;}
.tutor-info-depth .divided2 div{text-align:left;padding-left:5px;}
.tutor-info-depth .dateBox{font-size:12px;}
.tutor-info-depth .dateBox strong {font-size:inherit;}

.estimator-list {text-align: center;}
.estimator-list-title { font-size: 14px;}
.estimator-list-depth {font-weight: 700; color: #3490ff; margin-top: 5px;}

.info-box {padding: 20px 0; text-align: center; max-width: 720px; margin: 0 auto;}
.info-title {font-size: 1.5rem; font-weight: 700;}

.month-mark {font-weight: 700; font-size: 1.4rem; margin: 0 80px; display: inline-block; vertical-align: -4px; color: #3490ff;}
.btn {padding: 7px 1rem 8px 1rem;}
.btn-info {background: #fff; border-color: #3490ff; color: #3490ff;}

.tag-list { text-align: center; }
.tag-list span {display: inline-block; border: 1px solid #3490ff; color: #3490ff; font-weight: 700; padding: 5px 10px; font-size: 1rem; border-radius: 4px; margin-bottom: 5px;}
.tag-list span:last-child {margin-bottom: 0;}

.user-gnb-wrap {display: flex; position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 10; align-items: center;}
.user-gnb-wrap>div {position: relative;}
.user-gnb-wrap>div>a.btn-util { border-radius: 50px; color: #fff; padding: 5px 20px; display: block; margin-left: 5px; font-weight: 700;}

.student-list-wrap {display: flex; align-items: center; justify-content: space-between; position: relative; padding: 0 10px;}

.messenger-icon {border: 1px solid #3490ff; border-radius: 50px; padding: 5px 10px; color: #3490ff; display: inline-block; transition: none;}
.messenger-icon:hover {background: #3490ff; color: #fff; font-weight: 700;}

.no-list-style {font-size: 1.2rem; padding: 10px 0; font-weight: 700;}

/* 튜터 뱃지 */
.award-wrap {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.best-badge {width: 30px; height: 80px; background: url('/edu/images/tutor_award/best_badge.png') no-repeat 0 0; display: inline-block; background-size: 100%; padding-top: 28px; color: #fff; position: absolute; left: 0; top: 0; font-size: 1rem;}
.rising-badge {width: 30px; height: 50px; background: url('/edu/images/tutor_award/rising_badge.png') no-repeat 0 0; display: inline-block; background-size: 100%; padding-top: 7px; color: #fff; position: absolute; left: 0; top: 50px; font-size: 1rem;}
.master-badge {width: 50px; height: 40px; background: url('/edu/images/tutor_award/master_badge.png') no-repeat 0 0; display: inline-block; background-size: 100%; padding-top: 14px; color: #fff; position: absolute; left: 0; bottom: 0; font-size: 1rem;}
.tlc-badge {width: 50px; height: 40px; background: url('/edu/images/tutor_award/tlc_badge.png') no-repeat 0 0; display: inline-block; background-size: 100%; padding-top: 14px; color: #fff; position: absolute; left: 55px; bottom: 0; font-size: 1rem;}
.p-master-badge {width: 30px; height: 30px; background: url('/edu/images/tutor_award/pm_badge.png') no-repeat 0 0; display: inline-block; background-size: 100%; padding-top: 1rem; color: #000;  position: absolute; right: 0; top: 0; font-size: 1rem;}
.a-grade-badge {width: 30px; height: 30px; background: url('/edu/images/tutor_award/pa_badge.png') no-repeat 0 0; display: inline-block; background-size: 100%; padding-top: 1rem; color: #000; position: absolute; right: 0; top: 35px; font-size: 1rem;}



/* 기타 */
.content-books-list h4
{ font-size: 14px; margin: 8px 0 0; font-weight: 600; font-family: 'malgun Gothic', '맑은고딕', sans-serif; }
.content-books-list h4 small
{ font-size: 13px; }
.content-books-list h4 a i
{ font-size: 1.5rem; color: #AA0000; }

.content-books-list p
{ font-size: 13px; }
.content-books-list p small
{ font-size: 13px; color: #999999; margin-left: 10px; }



/* 사진첩 */
/* .photo-row {display: flex; justify-content: space-around; flex-wrap: wrap;} */
.photo-box-wrap {width: 25%; padding: 0 3px; float: left; margin-bottom: 10px;}
.photo-box-wrap > .photo-box { border: 1px solid #dbdbdb; border-radius: 4px; overflow: hidden; position: relative; height: 280px;} 
.photo-box-wrap > .photo-box .new-icon {position: absolute; left: 10px; top: 10px; z-index: 1;}
.photo-box-wrap > .photo-box > a { display: block; height: auto; color: #000; }

.photo-box-wrap > .photo-box > a > .img-wrap { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; }
.photo-box-wrap > .photo-box > a > .img-wrap2 { position: absolute; left: 0; top: -10%; transform: translateX(-50%); width: 150%; }
.photo-box-wrap > .photo-box > a > .img-wrap > img { width: 100%; }
.photo-box-wrap > .photo-box > a > .img-wrap2 > img { width: 150%; }

.photo-box-wrap > .photo-box > a:hover > .img-wrap { left: -5%; width: 105%;  }
.photo-box-wrap > .photo-box > a:hover > .img-wrap > img { width: 105%;  }
.photo-box-wrap > .photo-box > a:hover > .img-wrap2 { left: -1%; top: -13%; width: 155%;  }
.photo-box-wrap > .photo-box > a:hover > .img-wrap2 > img { width: 150%;  }

.photo-box-wrap > .photo-box > a:hover > .img-wrap > img,
.photo-box-wrap > .photo-box > a:hover > .img-wrap2 > img {
	cursor: pointer;
	-webkit-transform: scale(1.05);
	-moz-transform:scale(1.05);
	-o-transform:scale(1.05);
	transform:scale(1.05);
	transition: transform .35s;
	-o-transition: transform .35s;
	-moz-transition: transform .35s;
	-webkit-transition: transform .35s;
}








.photo-info {position: absolute; bottom: 0; left: 0; width: 100%; background: #fff; border-top: 0; padding: 5px; padding-bottom: 10px; padding-top: 10px; color: #000; font-family: 'Noto Serif', serif;}

.user-info {display: flex; width: 100%; margin: 0; float: none;}
.user-info .user-photo-wrap {border-radius: 50%; width: 30px; height: 30px; overflow: hidden; margin-right: 10px; box-shadow: 8px 9px 15px -14px gray;}
.user-info .user-name-wrap {align-self: center; font-weight: 700; color: #000;}
.comment-wrap {font-weight: 700; font-size: 1.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.btn-comment-wrap {display: flex; justify-content: end; -webkit-justify-content: flex-end; color: #000; position: absolute;
  right: 10px;
  top: 14px;}
.btn-comment-wrap>div {margin-right: 10px; font-size: 1.2rem; font-weight: 700; }
.btn-comment-wrap>div:last-child {margin-right: 0;}
.btn-comment-wrap>div a {color: #666;}
.heart-icon i {font-size: 1.4rem; color: #ec4756;}
.comment-icon i {font-size: 1.5rem; color: #3490ff; transform: rotateY(180deg);}


.tutor-page-title-wrap {position: relative; border-bottom: 2px solid #3490ff; padding-bottom: 15px; margin-bottom: 15px; padding-top: 10px;}
.tutor-page-title {color: #3490ff; font-weight: 700; font-size: 2.5rem;}
.btn-tutor-page-title-wrap {position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}
.btn-tutor-page-title-wrap>a {background: #3490ff; color: #fff; font-weight: 700; display: inline-block; padding: 10px 30px; border-radius: 50px;}
.btn-tutor-page-title-wrap>a:hover {color: #fff;}
.btn-remove-photo {position: absolute; right: 10px; top: 10px;}

.btn-upload-submit {background: #3490ff; color: #fff; font-weight: 700; display: inline-block; padding: 10px 30px; border-radius: 50px; border: none;}
.btn-history-back {margin-right: 30px;display: inline-block; position: relative;}
.btn-history-back,
.btn-history-back:hover {color: #3490ff;}
.btn-history-back:after {content:''; position: absolute; right: -21px; top: 13px;  width: 2px; height: 20px; background: #3490ff; }
.btn-history-back>div:first-child {display: inline-block; width: 15px; padding-right: 2px;}
.btn-history-back>div:last-child {display: inline-block; font-weight: 400;}
.btn-history-back img {width: 100%; vertical-align: -1px;}



/* 톡스클럽 프로필 */
.tutor-info-tap-title {font-weight: 700; font-size: 1.4rem; text-align: left; background: #3490ff; color: #fff; padding: 10px; position: relative; cursor: pointer; }
.tutor-info-tap-title span {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 10px;}
.tutor-info-tap-title span.rotate {transform: translateY(-50%) rotate(180deg ); top: 60%;}
.tutor-info-tap-title span img {width: 100%;}

.tutor-info-tap-title > small.label
{ padding: 2px 6px; font-size: 9px; border-radius: 50%; }


.user-profile {margin-bottom: 10px;}
.main-contents {padding: 0 10px; border-left: 1px solid #dbdbdb;}

.tutor-info-student-list {padding-left: 0; list-style: none; max-height: 320px; overflow: auto; margin-bottom: 0;}
.tutor-info-student-list li a.stduent-info {padding: 5px 0; font-size: 1.2rem; color: #666; display: flex; }

.list-img-wrap {border-radius: 50%; width: 35px; height: 35px; overflow: hidden; box-shadow: 8px 9px 15px -14px gray; margin-right: 10px;}
.list-img-wrap>img {width: 100%; height: 100%;} 
.list-name-wrap {align-self: center;}
.tutor-info-tap-content {display: none;}
.tutor-info-tap-content.on {display: block;}

.btn-mypage {display: block; padding: 5px 10px;}



/* PC 메신저 기록 */
.tutor-info-tap-content > .chat-textarea
{ padding: 10px 4px 5px 0; max-height: 320px; overflow: auto; margin-bottom: 0; cursor: pointer; }
.tutor-info-tap-content > .chat-textarea > table,
.tutor-info-tap-content > .chat-textarea > table > tbody,
.tutor-info-tap-content > .chat-textarea > table > tbody > tr,
.tutor-info-tap-content > .chat-textarea > table > tbody > tr > td { border: 0; text-align: left; padding: 1px 3px; font-weight: 100; }


/*
.tutor-info-tap-content > .chat-textarea > table > tbody > tr > td:nth-of-type(2),
.tutor-info-tap-content > .chat-textarea > table > tbody > tr > td:nth-of-type(2) > a
{ color: #777777; font-weight: 100; vertical-align: top; }
*/
.tutor-info-tap-content > .chat-textarea > table > tbody > tr > td:nth-of-type(2),
.tutor-info-tap-content > .chat-textarea > table > tbody > tr > td:nth-of-type(2) > a
{ color: #000000; font-weight: 500; }
.tutor-info-tap-content > .chat-textarea > table > tbody > tr > td:nth-of-type(3),
.tutor-info-tap-content > .chat-textarea > table > tbody > tr > td:nth-of-type(3) > a
{ text-align: right; color: #999999; font-size: 9px; }

.tutor-info-tap-content > .chat-textarea > table > tbody > tr > td > img,
.tutor-info-tap-content > .chat-textarea > table > tbody > tr > td > a > img
{ border-radius: 50px; }

.tutor-info-tap-content > .chat-textarea > table > tbody > tr > td > span.label
{ padding: 2px 6px; font-size: 9px; border-radius: 50%; margin-left: 3px; }
.tutor-info-tap-content > .chat-textarea > table > tbody:hover > tr > td
{ color: #000000; text-decoration: underline }




/* 사진 상세페이지 */
.admin-default .message-body:before,
.default .message-body:before {display: none;}

.btn-cancel-wrap > a {background: #888;}
.photo-detail-wrap {display: flex; justify-content: space-around;}
.photo-detail-wrap>div {width: 48%;}
.photo-detail-wrap .img-wrap {border: 1px solid #dbdbdb; border-radius: 10px; overflow: hidden; position: relative; align-self: baseline; padding-bottom: 100%; box-sizing: border-box;}
.photo-detail-wrap .img-wrap img {position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.photo-detail-wrap .heart-icon {position: absolute; bottom: 15px; right: 15px; background: #fafafa; padding: 0 20px 2px; display: block; border-radius: 52px; box-shadow: 8px 9px 15px -10px gray;}
.photo-detail-wrap .heart-icon a {font-size: 2rem; color: #666; font-weight: 700;}
.photo-detail-wrap .heart-icon i {font-size: 2rem;}

.photo-contents .photo-title {color: #3490ff; font-size: 2rem; word-break: break-all;  font-family: 'Noto Serif', serif;}
.photo-contents .photo-memo {color: #3490ff; font-size: 1.5rem; margin-top: 10px;}
.photo-contents .box {padding-bottom: 10px; border-bottom: 1px solid #3490ff; margin-bottom: 10px;}

.photo-new-comment textarea {border: 1px solid #3490ff; border-radius: 10px; overflow: hidden; padding: 10px 20px;}
.btn-photo-submit {background: #3490ff; color: #fff; font-weight: 700; display: inline-block; padding: 10px 30px; border-radius: 50px; border: none;}
.comment-list .chat {border: none; max-height: 100%;}
.comment-list .message-img {border-radius: 50%; overflow: hidden; box-shadow: 8px 9px 15px -14px gray; width: 35px; height: 35px;}
.comment-list .message-img img {width: 100%; height: 100%;}
.comment-list .chat .message .message-body {margin-left: 35px; background: transparent; border: none; padding: 3px 14px;}
.comment-list .chat .message .message-body:after {display: none;}
.comment-list .chat .message .message-body .writer {color: #000; font-weight: 700; font-size: 1.6rem;}
.comment-list .chat .message .message-body .memo {color: #000; font-size: 1.2rem;}
/* .comment-list .chat .message .message-body .btn-tool {background: #3490ff; padding: 10px 20px; border-radius: 50px;} */
.comment-list .chat .message .message-body .btn-tool a {color: #3490ff; font-weight: 400;   }
.chat .message.reversed,
.chat .message.admin-reversed,
.chat .message.my-reversed {float: left;}
.chat .message.admin-reversed .message-body {margin-right: 0; margin-left: 85px;}
.reversed .message-img,
.admin-reversed .message-img,
.my-reversed .message-img {left: 50px;}
.admin-reversed .message-body::before {display: none;}

/* admin-gnb-wrap 관리자(강사)용 메뉴 */
.admin-gnb-wrap {display: flex; align-items: center; width: 100%; justify-content: center;}
.admin-gnb-wrap > a {text-align: center; padding: 10px 20px;}
.admin-gnb-wrap > a:hover {color: #000;}
.alert-secondary {border: 1px solid #dbdbdb; border-radius: 4px; background: #fafafa;}

.btn-delete {position: relative; margin-left: 5px;}
.btn-delete:before {content: ''; position: absolute; left: -5px; top: 10px; width: 2px; height: 2px; background: #3490ff;}

/* 강사용 학생 사진 피드(메인페이지) */
.date-wrap {position: absolute; left: 0; bottom: 0;}


/* 노티스 NOTIFICATION */
.notification-box {position: absolute; left: 50%; top: 40px; transform: translateX(-50%); background: #fff; border: 1px solid #dbdbdb; padding: 10px; width: 320px; display: none;}
.notification-box.on {display: block;}
.notification-box:before {content: ''; position: absolute; left: 50%; top: -20px; transform: translateX(-50%); border: 10px solid #fff; border-top: 10px solid transparent; border-left: 10px solid transparent; border-right: 10px solid transparent;}
.notification-row>a {display: flex; border-bottom: 1px solid #dbdbdb; padding: 10px 0; color: #000;}
.notification-row:last-child>a {display: block; border-bottom: none; padding: 10px 0; color: #3490ff;}


/* 첨삭기능추가 */
.btn-correction-wrap {display: inline-block; font-size: 12px; vertical-align: middle; margin-left: 5px;}
.btn-correction-wrap>a {display: block; width: 25px; height: 25px; background: #3490ff; line-height: 25px; text-align: center; border-radius: 100%; color: #fff;}
.correction-wrap {border: 1px solid #dbdbdb; border-radius: 10px; padding: 10px; padding-top: 10px; padding-left: 10px; padding-left: 5px; padding-top: 10px; background: #fafafa; margin-top: 10px;}
.correction-wrap .correction-title {font-size: 16px; font-weight: 800; color: #000; padding-left: 2px;}


/* 대댓글 & 첨삭 css */
.button-venobox-close {position: absolute; right: 0; top: -18px; font-size: 62px; line-height: 1; color: #000;}
.button-venobox-close:hover {color: #212121;}
.validate-comment > h4
{ margin: 0 0 5px; padding: 0; text-align: center; font-size: 2rem;}
.comment-reply {position: relative; display: flex;}
.comment-reply>div:first-child {width: 50px; text-align: center;}
.comment-reply>div:first-child .img-wrap {border-radius: 100%;}
.comment-reply>div:first-child .writer {text-align: center; word-break: break-all;}
.comment-reply > p
{ margin: 0; padding: 0; line-height: 22px; }
.validate-comment > .form-mgroup:last-child
{ margin-bottom: 0; padding: 0; }

.writer-img {display: inline-block; border: 1px solid #dbdbdb; border-radius: 50%; overflow: hidden; width: 35px; height: 35px; vertical-align: middle; box-shadow: 8px 9px 15px -14px gray; }
.writer-img>img {width: 100%; height: 100%;}
.comment-origin {margin-left: 15px; background: #d7e7ed; border-radius: 10px; width: 100%; padding: 5px 10px; position: relative; font-weight: 700; word-break: break-all;}
.comment-origin:before {content: ''; position: absolute; right: 99%; top: 5px; border: 10px solid #d7e7ed; border-top: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid transparent;}
.comment-origin .writer {font-size: 1.6rem; font-weight: 700;}
.comment-origin .memo {font-size: 1.2rem; }

.form-comment {border: 1px solid #3490ff; width: 100%; border-radius: 10px; overflow: hidden; padding: 10px 20px;}


.comment-list .chat .message.my-reversed .message-body {margin-left: 85px;}
.comment-list .chat .message.reversed .message-body {margin-left: 85px;}
.my-reversed .message-body:before {display: none;}
.reversed .message-body:before {display: none;}
.my-default .message-body::before {display: none;}
.comment-reg-date {font-size:  12px; color: #666;}


/* 실장님과 작업영역이 겹쳐서 임시로 헤더에 추가함 */
.photo-reg-date {
  margin: 10px 0 5px;
  }
.new-icon {
  background: #fafafa;
  font-weight: 700;
  font-size: 12px;
  display: inline-block;
  padding: 4px 5px;
  border-radius: 50px;
  color: #000;
  line-height: 1;
}



.btn-chat-list { color: #fff; padding: 0 10px; font-weight: 700;}
.btn-chat-list>div {display: inline-block;}
.btn-chat-list>small {border-radius: 100%;}



.chat-list-popup {background: #fff; width: 320px; position: absolute; border: 1px solid #dbdbdb;
 top: 40px; left: 50%; transform: translateX(-50%);}
 .chat-list-popup:before {content: ''; border: 10px solid #dbdbdb; border-top: 10px solid transparent; border-left: 10px solid transparent; border-right: 10px solid transparent; top: -20px; left: 50%; transform: translateX(-50%); position: absolute;}
 .chat-list-popup:after {content: ''; border: 11px solid #fff; border-top: 11px solid transparent; border-left: 11px solid transparent; border-right: 11px solid transparent; top: -20px; left: 50%; transform: translateX(-50%); position: absolute;}


.error-msg {
	text-align: center;
	font-size: 16px;
	background-color: #fffdfc;
	border: 1px solid #ffcdac;
	border-radius: 7px;
	padding: 10px 5px 10px 14px;
	color: #000000d9;
}

#google_translate_element{
	float:right;
}
#google_translate_element .goog-te-menu-value{
	font-size:18px;
}
#google_translate_element img{
	width: initial;
}

.divided2{
	display:grid;
	grid-template-columns: repeat(2,1fr);
}
.divided2 div{
	margin:5px 0;
}