@import url("sub.css");

.teacher {
	font-family: 'Cafe24Ohsquareair', sans-serif;
}
.teacher .select_form {
	background: #F3F3F3;
	margin-bottom: 30px;
	padding: 30px;
	box-sizing: border-box;
}
.teacher .select_form h3 {
	font-size: 30px;
	color: #1D224F;
	font-family: 'Cafe24Ohsquareair';
	font-weight: 300;
	margin-bottom: 15px;
}
.teacher .select_form ul.flex {
	flex-direction: row;
    flex-wrap: wrap;
}
.teacher .select_form li {
	width: 14.35%;
    border: 1px solid #1D224F;
    margin: 0 -1px -1px 0;
    box-sizing: border-box;
    font-family: "Nanumsquare";
}
.teacher .select_form li > div {
	border-bottom: 1px solid #e1e1e1;
    font-weight: 400;
    font-size: 20px;
    background: #fff;
    padding: 17px 0 17px 20px;
    line-height: 1;
}
.teacher .select_form li > div img {
	display: block;
	max-width: 40px;
	height: 40px;
	margin: 0 auto 10px;
}
.teacher .select_form li input[type=checkbox] {
	display: none;
}
.teacher .select_form li input[type=checkbox] + label {
	font-size: 20px;
}
.teacher .select_form li input[type=checkbox] + label:before {
	content: '';
	display: inline-block;
	vertical-align: -2px;
	width: 15px;
	height: 15px;
	border: 1px solid #787878;
	background: #fff;
	margin-right: 10px;
}
.teacher .select_form li input[type=checkbox]:checked + label {
	color: #000B6C;
}
.teacher .select_form li input[type=checkbox]:checked + label:before {
	background: #fff url("../images/ico-check.svg")no-repeat 50% 50% / 95%;
}
.teacher .form_contents li > div {
	text-align: center;
	padding: 22px 0;
	line-height: 1;
}

.teacher .select_result {
	position: relative;
    width: 100%;
    min-height: 90px;
    box-sizing: border-box;
    background: #f3f3f3;
    padding: 0 255px 0 30px;
    font-family: "Nanumsquare";
}
.teacher .select_result #s_result {
	float: left;
    width: 100%;
    padding: 22px 0;
    min-height: 90px;
    box-sizing: border-box;
}
.teacher .select_result #s_result span {
	display: inline-block;
	border: 1px solid #6e6e6e;
	background: #fff;
	color: #6e6e6e;
	text-align: center;
	padding: 8px 12px;
	border-radius: 5px;
	margin: 5px;
	font-size: 15px;
	line-height: 1;
}
.teacher .select_result #s_result span button {
	background: url("../images/ico-del.png")no-repeat 50% 50%;
	display: inline-block;
	vertical-align: 0px;
	width: 10px;
	height: 10px;
	margin-left: 5px;
}
.teacher .select_result .btn_cancel {
	display: block;
	position: absolute;
	top: 15px;
	right: 30px;
	width: 190px;
	text-indent: 30px;
	height: 60px;
	border: 1px solid #1D224F;
	box-sizing: border-box;
	font-size: 20px;
	background: #fff;
}
.teacher .select_result .btn_cancel span {
	display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: url(../images/ico-refresh.svg)no-repeat 13% 55%;
    width: 100%;
    text-align: center;
}

.teacher .result_cont {
	margin-top: 80px;
	padding-top: 80px;
	border-top: 1px solid #1D224F;
}

.teacher .list {
    flex-direction: row;
    flex-wrap: wrap;
}
.teacher .list li {
    width: calc(25% - 15px);
    margin: 0 20px 30px 0;
    background: #F3F3F3;
    padding: 20px;
    box-sizing: border-box;
    transition: all .3s;
}
.teacher .list li:hover {
	box-shadow: 0 0 10px rgb(0 0 0 / 30%);
}
.teacher .list li:nth-child(4n) {
	margin-right: 0;
}
.teacher .list li .thumb {
	border: 2px solid #1D224F;
	box-sizing: border-box;
	height: 0;
	padding-bottom: 100%;
	overflow: hidden;
}
.teacher .list li .thumb img {
	width: 100%;
	min-height: 339px;
}
.teacher .list li .info_box {
	padding: 10px 0 0;
}
.teacher .list li .info_box .name {
	width: 100%;
	display: inline-block;
	vertical-align: middle;
	font-size: 25px;
	color: #2d2d2d;
	overflow: hidden; 
	text-overflow: ellipsis; 
	white-space: nowrap;
}
.teacher .list li .info_box .en-name {
	font-size: 18px;
	overflow: hidden; 
	text-overflow: ellipsis; 
	white-space: nowrap;
}
.teacher .list li .info_box .job {
	position: relative;
	color: #181A27;
	font-size: 18px;
    text-align: left;
    font-weight: 400;
    font-family: "Malgun Gothic","맑은 고딕";
    margin: 15px 0;
    overflow: hidden; 
	text-overflow: ellipsis; 
	white-space: nowrap;
}
.teacher .list li .hash {
	height: 60px;
	padding: 13px 20px 10px;
	box-sizing: border-box;
	margin-top: 10px;
	background: #fff;
}
.teacher .list li .hash .box {	
	white-space: nowrap; 
	overflow: hidden; 
	text-overflow: ellipsis; 
	white-space: normal; 
	word-wrap: break-word; 
	display: -webkit-box; 
	-webkit-line-clamp: 2; 
	-webkit-box-orient: vertical;
}
.teacher .list li .hash .box br {
	display: none;
}
.teacher .list li .hash span {
	font-family: "Malgun Gothic","맑은 고딕";
	font-size: 15px;
	color: #000;
	margin: 0 3px;
    display: inline-block;
}
.teacher .list li > a {
	display: block;
    width: 100%;
    height: 60px;
    line-height: 62px;
    margin: 10px auto 0;
    box-sizing: border-box;
    font-size: 20px;
    background: #1D224F;
    text-align: center;
    color: #fff;
}




@media screen and (max-width: 1600px) {
	.teacher .select_form li h3 {
		font-size: 16px;
	}
	.teacher .select_form li input[type=checkbox] + label {
	    font-size: 17px;
	}
	.teacher .select_form li input[type=checkbox] + label:before {
		vertical-align: -3px;
	}
	.teacher .select_result #s_result {
		padding: 10px 0;
	}
}
@media screen and (max-width: 1280px) {
	.teacher .select_form h3 {
		font-size: 25px;
	}
    .teacher .select_form li {
    	width: 25%;
    }
    .teacher .form_contents li {
    	width: 20%;
    }
    .teacher .select_result .btn_cancel {
    	font-size: 17px;
    }

    .teacher .list li {
    	width: calc(25% - 8px);
    	margin: 0 10px 30px 0;
    }
    .teacher .list li .thumb img {
		min-height: 265px;
	}
    .teacher .list li .info_box .name {
	    font-size: 18px;
	}
	.teacher .list li .info_box .en-name {
		font-size: 18px;
	}
	.teacher .list li .info_box .job {
		font-size: 15px;
	}
	.teacher .list li .hash span {
		font-size: 14px;
	}
	.teacher .list li a {
		font-size: 18px;
	}
}
@media screen and (max-width: 1024px){
	.teacher .select_form h3 {
		font-size: 20px;
	}

	.teacher .select_form li {
    	width: 33.333%;
    }
    .teacher .select_result .btn_cancel {
    	width: 165px;
    }

    .teacher .result_cont {
    	margin-top: 40px;
    	padding-top: 40px;
    }
    .teacher .list li {
    	width: calc(33% - 5px);
    }
    .teacher .list li .thumb img {
		min-height: 280px;
	}
    .teacher .list li:nth-child(4n) {
    	margin-right: 10px;
    }
    .teacher .list li:nth-child(3n) {
    	margin-right: 0;
    }
}
@media screen and (max-width: 768px){
	.teacher .select_form {
		padding: 20px;
	}
	.teacher .select_form li {
	    width: 33.333%;
	}
	.teacher .select_form li > div {
		padding: 13px 0 13px 10px;
	}
	.teacher .form_contents li > div {
		padding: 13px 0;
	}
	.teacher .select_form li input[type=checkbox] + label {
	    font-size: 14px;
	}
	.teacher .select_form li input[type=checkbox] + label:before {
		margin-right: 5px;
	}
	.teacher .select_result #s_result span {
		font-size: 13px;
	}
	.teacher .select_result #s_result {
	    padding: 0 0 5px;
	    float: none;
	    min-height: auto;
	}
	.teacher .select_result #s_result span {
		margin: 5px 5px 5px 0;
	}
	.teacher .select_result {
		padding: 15px;
		min-height: 80px;
	}
	.teacher .select_result .btn_cancel {
		position: static;
	    width: 100%;
	    height: 50px;
	    font-size: 15px;
	    transform: none;
	}
	.teacher .select_result .btn_cancel span {
		position: static;
		transform: none;
	    height: 50px;
    	line-height: 50px;
    	background-position: calc(50% - 50px) 50%;
	}

	.teacher .list li {
		padding: 10px;
	}
	.teacher .list li .thumb img {
		min-height: 220px;
	}
	.teacher .list li .info_box .name {
	    font-size: 15px;
	}
	.teacher .list li .info_box .en-name {
	    font-size: 15px;
	}
	.teacher .list li .info_box .job {
	    font-size: 13px;
	}
	.teacher .list li .hash {
		padding: 13px 15px 10px;
	}
	.teacher .list li .hash span {
	    font-size: 13px;
	}
	.teacher .list li > a {
		height: 50px;
    	line-height: 52px;
	    font-size: 15px;
	}
}
@media screen and (max-width: 640px){
	.teacher .list li {
	    width: calc(50% - 5px);
	    margin-right: 10px;
	    margin-bottom: 10px;
	}
	.teacher .list li .thumb img {
		min-height: 280px;
	}
	.teacher .list li:nth-child(3n) {
		margin-right: 10px;
	}
	.teacher .list li:nth-child(2n) {
		margin-right: 0;
	}
}