@charset "utf-8";

/* 강사진 리스트페이지 */
#instructor .apyWrap{display:flex;align-items:center;gap:30px;}
#instructor .apyThumb{width:200px;min-width:200px;height:200px;display:flex;align-items:center;justify-content:center;}
#instructor .apyThumb>button{position:relative;width:100%;height:100%;display:inline-block;overflow:hidden;}
#instructor .apyList>li{cursor:pointer;}
#instructor .apyList>li .apyThumb>button{border:none;}
#instructor .apyList>li .apyThumb>button::before{content:'상세정보 보기 +';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex;align-items:center;justify-content:center;width:100%;height:100%;opacity:0;visibility:hidden;background-color:rgba(0, 0, 0, 0.5);font-size:18px;font-weight:700;color:#fff;transition:opacity 0.25s;z-index:1;}
#instructor .apyList>li:hover .apyThumb>button::before{opacity:1;visibility:visible;}
#instructor .apyList>li .apyThumb>button>em{width:100%;height:100%;display:inline-block;padding:0;transform-origin:center;transition:transform 0.25s;}
#instructor .apyList>li:hover .apyThumb>button>em{transform:scale(1.15);}
#instructor .apyCont{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:0;}
#instructor .apyCont>h6, #instructor .apyCont>h5, #instructor .apyCont dl{margin:0;}
#instructor .apyCont>h5{font-weight:700;}
#instructor .apyList li{border-right:none;border-left:none;margin:0;}
#instructor .apyCont-info{display:flex;flex-direction:column;gap:2px;}
#instructor .apyCont-info>li{border:none;padding:0;}
#instructor .apyCont-info>li em{font-style:normal;font-weight:600;}

/* 강사진 상세페이지 */
#instructorDetail .apyiTop{padding:15px 20px;}
#instructorDetail .apyiThumb{width:250px;min-width:250px;height:250px;overflow:hidden;}
#instructorDetail .apyiThumb>em{width:100%;height:100%;padding:0;}
#instructorDetail .apyInfo{margin-bottom:70px;}
#instructorDetail .apyiMid{display:flex;align-items:center;gap:30px;padding:20px;box-sizing:border-box;}
#instructorDetail .apyiTxt{width:calc(100% - 320px);padding:0;}
#instructorDetail .ist-info-wrap{width:100%;display:flex;flex-direction:column;gap:15px;}
#instructorDetail .ist-info-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:15px;border-bottom:1px dashed #d6d6d6;}
#instructorDetail .ist-info-top .ist-name{font-size:25px;font-weight:700;}
#instructorDetail .ist-info-top .ist-name .ist-detail{display:flex;align-items:center;gap:5px;}
#instructorDetail .ist-info-top .ist-name .ist-detail[class*=gender-]::after{content:'';display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:3px;font-family:'Material Icons';font-size:15px;font-weight:400;color:#fff;}
#instructorDetail .ist-info-top .ist-name .ist-detail.gender-male::after{content:'\e58e';background-color:#006EF5;}
#instructorDetail .ist-info-top .ist-name .ist-detail.gender-female::after{content:'\e590';background-color:#EB0046;}
#instructorDetail .ist-info-top .ist-email{display:flex;align-items:center;}
#instructorDetail .ist-info-top .ist-email .ist-title{line-height:1;padding:5px 10px;border:1px solid #757575;background-color:#757575;color:#fff;border-radius:3px 0 0 3px;box-sizing:border-box;}
#instructorDetail .ist-info-top .ist-email .ist-detail{line-height:1;padding:5px 10px;border:1px solid #757575;color:#757575;border-radius:0 3px 3px 0;border-left:none;box-sizing:border-box;}
#instructorDetail .ist-info-middle{width:100%;display:flex;}
#instructorDetail .ist-info-items{width:100%;display:flex;flex-wrap:wrap;}
#instructorDetail .ist-info-item{width:50%;display:flex;align-items:flex-start;}
#instructorDetail :where(.ist-info-item, .ist-able-area, .con-list-item, .con-detail-item) span,
#instructorDetail .con-list-item{font-size:16px;}
#instructorDetail .ist-info-item span{line-height:1.8;}
#instructorDetail .ist-info-item .ist-title{display:flex;align-items:center;gap:5px;font-weight:600;white-space:nowrap;}
#instructorDetail .ist-info-item .ist-title::before{content:'\e061';display:inline-block;font-family:'Material Icons';font-size:5px;}
#instructorDetail .ist-info-item .ist-title::after{content:'|';display:inline-block;margin-right:5px;}
#instructorDetail .ist-able-area{display:flex;align-items:flex-start;gap:5px;padding:8px;border:1px solid #d6d6d6;border-radius:3px;}
#instructorDetail .ist-able-area .ist-title{font-weight:600;color:#00377A;white-space:nowrap;}
#instructorDetail .ist-desc{display:flex;flex-direction:column;gap:70px;}
#instructorDetail .ist-desc-title{padding-bottom:20px;border-bottom:1px dashed #d6d6d6;margin-bottom:20px;font-size:25px;color:#00377A;}
#instructorDetail .ist-con-wrap{display:flex;gap:2%;}
#instructorDetail .ist-con{flex:1;display:flex;flex-direction:column;gap:10px;border:1px solid #d6d6d6;padding:20px 25px;border-radius:10px;box-sizing:border-box;box-shadow:0 5px 8px 0 rgba(0, 0, 0, 0.1);}
#instructorDetail .ist-con .con-title{display:flex;align-items:center;gap:10px;font-size:18px;}
#instructorDetail .ist-con .con-title::before{content:'\e666';display:inline-block;font-family:'Material Icons';color:#6CAF00;}
#instructorDetail .con-detail-item{display:flex;align-items:flex-start;gap:5px;padding:8px 0;border-top:1px dashed #d6d6d6;}
#instructorDetail .con-detail-item:first-child{border-top:none;}
#instructorDetail .con-detail-item .con-subject{display:flex;align-items:center;gap:5px;font-weight:600;white-space:nowrap;}
#instructorDetail .con-detail-item .con-subject::before{content:'\e061';display:inline-block;font-family:'Material Icons';font-size:5px;}
#instructorDetail .con-detail-item .con-subject::after{content:'|';display:inline-block;}
#instructorDetail .con-list-items{display:flex;flex-direction:column;gap:15px;}
#instructorDetail .con-list-item{display:flex;align-items:flex-start;gap:5px;}
#instructorDetail .lt-performance .con-list-item::before{content:'\e862';display:inline-block;font-family:'Material Icons';font-size:20px;color:#6CAF00;}
#instructorDetail .lt-performance .con-list-item .date{display:flex;align-items:center;gap:5px;font-weight:600;white-space:nowrap;}
#instructorDetail .lt-performance .con-list-item .date::after{content:'|';display:inline-block;}
#instructorDetail .lt-sample{width:100%;flex-direction:row;flex-wrap:wrap;gap:2%;}
#instructorDetail .lt-sample .con-list-item{display:flex;align-items:flex-start;gap:10px;width:32%;border:1px solid #006EF5;padding:15px 20px;margin-bottom:10px;border-radius:10px;box-shadow:0 5px 8px 0 rgba(0, 0, 0, 0.1);}
#instructorDetail .lt-sample .con-title{line-height:unset;margin-top:0;padding:3px 0;font-size:inherit;white-space:nowrap;color:#00377A;}
#instructorDetail .lt-sample ul{display:flex;flex-direction:column;border-left:1px solid rgba(0, 0, 0, 0.1);padding-left:10px;}
#instructorDetail .lt-sample ul li{color:#737373;}
#instructorDetail .lt-sample ul li a{display:inline-block;line-height:unset;padding:5px 0;border-top:1px dashed rgba(0, 0, 0, 0.1);}
#instructorDetail .lt-sample ul li:first-child a{border-top:none;padding-top:0;}
#instructorDetail .lt-sample ul li a::after{content:'\e2c4';display:inline-block !important;margin-left:10px;font-family:'Material Icons';transform:translateY(3px);font-size:20px;text-decoration:none;}
#instructorDetail .lt-sample ul li a:hover{text-decoration:underline;}
#instructorDetail :where(.lt-history, .lt-qualifications) .con-list-item::before{content:'\e061';display:inline-block;font-family:'Material Icons';font-size:5px;}

@media (max-width:1024px) {
	#instructorDetail .apyInfo{margin-bottom:50px;}
	#instructorDetail .apyiMid{gap:15px;}
	#instructorDetail .apyiThumb{width:200px;min-width:200px;height:200px;}
	#instructorDetail .apyiTxt{width:calc(100% - 220px);}
	#instructorDetail .ist-info-wrap{gap:10px;}
	#instructorDetail .ist-info-top{padding:10px;}
	#instructorDetail .ist-info-top .ist-name{font-size:20px;}
	#instructorDetail .ist-info-top .ist-name .ist-detail[class*=gender-]::after{width:18px;height:18px;font-size:13px;}
	#instructorDetail .ist-info-top .ist-email{font-size:13px;}
	#instructorDetail .ist-desc{gap:50px;}
	#instructorDetail .ist-desc-title{font-size:20px;}
	#instructorDetail .ist-con-wrap:not(*:has(.lt-sample), *:has(.lt-field)){padding:10px;}
}

@media (max-width:916px) {
	#instructorDetail .apyInfo{margin-bottom:40px;}
	#instructorDetail :where(.ist-info-item, .ist-able-area, .con-list-item, .con-detail-item) span,
	#instructorDetail .con-list-item{font-size:14px;}
	#instructorDetail .ist-desc{gap:40px;}
	#instructorDetail .ist-desc-title{padding-bottom:10px;margin-bottom:10px;}
	#instructorDetail .lt-sample .con-list-item{flex-direction:column;gap:0;}
	#instructorDetail .lt-sample ul{padding-left:0;border-left:none;}
}

@media (max-width:880px) {
	#instructorDetail .apyiMid{flex-direction:column;}
	#instructorDetail .apyiThumb{border-radius:50%;}
	#instructorDetail .apyiTxt{width:100%;}
	#instructorDetail .ist-info-item{width:100%;}
	#instructorDetail .con-detail-item{flex-direction:column;}
	#instructorDetail .con-detail-item .con-subject::after{content:none;}
}

@media (max-width:660px) {
	#instructorDetail .ist-con-wrap,
	#instructorDetail .lt-sample{flex-direction:column;gap:15px;}
	#instructorDetail .lt-sample .con-list-item{width:100%;margin-bottom:0;}
	#instructorDetail .ist-con-wrap:not(*:has(.lt-sample), *:has(.lt-field)){padding:0;}
}

@media (max-width:640px) {
	#instructor .apyWrap{gap:20px;}
	#instructor .apyThumb{width:170px;min-width:170px;height:170px;}
	#instructor .apyCont{gap:5px;}
	#instructor .apyCont>h6{padding:0;border:0;height:auto;line-height:1;}
	#instructor .apyCont-info{gap:0;}
}

@media (max-width:597px) {
	#instructor .apyWrap{gap:15px;}
	#instructor .apyThumb{width:120px;min-width:120px;height:120px;}
	#instructor .apyCont-info>li{font-size:14px;line-height:1.5;}
}

@media (max-width:525px) {
	#instructor .apyThumb{display:none;}
}

@media (max-width:440px) {
	#instructorDetail .apyiMid{gap:3px;}
	#instructorDetail .apyiThumb{width:170px;min-width:170px;height:170px;}
	#instructorDetail .ist-info-top{flex-direction:column;align-items:center;gap:15px;}
	#instructorDetail .ist-info-items{gap:5px;}
	#instructorDetail .ist-able-area{flex-direction:column;}
	#instructorDetail .ist-info-item{justify-content:space-between;}
	#instructorDetail .ist-info-item .ist-title::before,
	#instructorDetail .ist-info-item .ist-title::after{content:none;}
	#instructorDetail .lt-performance .con-list-item .date::after{content:none;}
	#instructorDetail .lt-performance .con-list-item{flex-wrap:wrap;}
	#instructorDetail .lt-performance .con-list-item .desc{width:100%;}
}