#listTeacherStyle4{padding:20px calc((100% - 1200px)/2)}
#listTeacherStyle4 .title{text-align:center; margin-bottom: 20px;}
#listTeacherStyle4 .title h3{text-transform:uppercase;font-size:24px;padding:0 40px;height:50px;display:inline-block;color:#fff;position:relative;clip-path:polygon(0 0,100% 0,95% 100%,5% 100%);background:#000}
#listTeacherStyle4 .title h3 span{display:flex;align-items:center;height:100%}
#listTeacherStyle4 img{vertical-align:middle;max-width:100%}
#listTeacherStyle4 ul{list-style:none}
#listTeacherStyle4>ul{margin-bottom:15px;display:flex;flex-wrap:wrap}
#listTeacherStyle4>ul li{flex-grow:1;flex-basis:0}
#listTeacherStyle4>ul li a{display:block;text-decoration:none;padding:10px 0;position:relative;text-align:center;color:#000;text-transform:uppercase;line-height:20px}
#listTeacherStyle4>ul li a.active,#listTeacherStyle4>ul li a:hover{background:#000;color:#fff;font-weight:bold}
#listTeacherStyle4>ul li:not(:last-child) a:not(:hover):not(.active):before{content:"";display:block;width:1px;background:#000;height:20px;position:absolute;right:-1px;top:10px}
#listTeacherStyle4>ul li a:after{content:"";position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;border-top:5px solid #000;bottom:-5px;left:50%;margin-left:-10px;display:none}
#listTeacherStyle4>ul li a.active:after,#listTeacherStyle4>ul li a:hover:after{display:block}
#listTeacherStyle4>div .wrapperSubject:first-child{display:flex}
#listTeacherStyle4>div .wrapperSubject:not(:first-child){display:none}
#listTeacherStyle4>div .wrapperSubject>img{width:400px;height:400px}
#listTeacherStyle4>div .wrapperSubject>div{width:calc(100% - 410px);margin-left:10px}
#listTeacherStyle4>div .wrapperSubject>div .navTeacher{display:flex;flex-wrap:wrap}
#listTeacherStyle4>div .wrapperSubject>div .navTeacher a{display:block;min-width:calc(25% - 11px);font-size:24px;color:#000;margin: 0 10px 10px 0;text-align:center;padding:10px;border:1px dashed #000;text-decoration:none}
#listTeacherStyle4>div .wrapperSubject>div .navTeacher a.active,#listTeacherStyle4>div .wrapperSubject>div .navTeacher a:hover{font-weight:bold;color:#fff;background:#000;border:1px solid #000}
#listTeacherStyle4>div .wrapperSubject>div .wrapperTeacher>div{padding:10px 0 20px}
#listTeacherStyle4>div .wrapperSubject>div .wrapperTeacher>div:not(:first-child){display:none}
#listTeacherStyle4>div .wrapperSubject>div .wrapperTeacher>div ul{margin-bottom:20px}
#listTeacherStyle4>div .wrapperSubject>div .wrapperTeacher>div ul li{padding-left:30px;margin-bottom:10px;display:block;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE0QTg0MkM3MUNGMzExRUI5M0JDQUM0M0ZDQjNBNjZEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE0QTg0MkM4MUNGMzExRUI5M0JDQUM0M0ZDQjNBNjZEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTRBODQyQzUxQ0YzMTFFQjkzQkNBQzQzRkNCM0E2NkQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTRBODQyQzYxQ0YzMTFFQjkzQkNBQzQzRkNCM0E2NkQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6b5HOXAAAApElEQVR42mL4//8/AzoGAg8g/gjEbljlcWg6CcQgxkmiNAGBM1QDDDvh1AQEHECsB8TH0DSB+PogeSS1DP1AfB+I/6IpRsd/oer6QJoeE1CMjkHqwVa/IVIDSJ0BzI1GQPyegAaQvBF6QCQT0JQMU8vEgACiDPgBXB5ZkxYBTVrYNGkisU8AcSKUxjQUyU8rgPg6EIcCMSNUjBHKB4kvh6kFCDAAbcbIKvDKNy0AAAAASUVORK5CYII=) left 4px no-repeat}
#listTeacherStyle4>div .wrapperSubject>div .wrapperTeacher>div>div{background:#ccc;display:flex}
#listTeacherStyle4>div .wrapperSubject>div .wrapperTeacher>div>div>div{width:50%;height:70px;text-transform:uppercase;display:flex;align-items:center;padding:0 30px}
#listTeacherStyle4>div .wrapperSubject>div .wrapperTeacher>div>div>div img{width:45px;display:block}
#listTeacherStyle4>div .wrapperSubject>div .wrapperTeacher>div>div>div strong{margin-left:20px}
#listTeacherStyle4>div .wrapperSubject>div .wrapperButton{display:flex;justify-content:center;flex-wrap:wrap}
#listTeacherStyle4>div .wrapperSubject>div .wrapperButton a{border-radius:10px;background:#000;padding:10px 30px;color:#fff;text-decoration:none;line-height:20px;margin:0 5px}
#popupListTeacher4{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.7);z-index:1;display:none;justify-content:center;align-items:center}
#popupListTeacher4 .popup{position:relative;width:75%;background:#fff;border-radius:10px}
#popupListTeacher4 .popup>a{position:absolute;top:12px;right:12px;z-index:1}
#popupListTeacher4 .popup>div{position:relative;height:0;padding-bottom:56.25%}
#popupListTeacher4 .popup>div>iframe{position:absolute;width:100%;height:100%;border-radius:10px}
@media all and (max-width:1023px){
    #popupListTeacher4 .title h3{font-size:14px}
}
@media all and (max-width:768px){
    #listTeacherStyle4{padding:10px}
    #listTeacherStyle4>ul li{min-width:20%}
    #listTeacherStyle4>div .wrapperSubject{flex-direction:column}
    #listTeacherStyle4>div .wrapperSubject>img{width:100%;height:100%}
    #listTeacherStyle4>div .wrapperSubject>div{width:100%;margin-left:0}
    #listTeacherStyle4>div .wrapperSubject>div .wrapperTeacher>div>div>div{flex-direction:column;padding:10px;height:auto}
    #listTeacherStyle4>div .wrapperSubject>div .wrapperTeacher>div>div>div img{margin-bottom:10px}
    #listTeacherStyle4>div .wrapperSubject>div .wrapperTeacher>div>div>div strong{margin-left:0;font-size:14px;display:flex;height:50px;align-items:center;text-align:center}
    #popupListTeacher4 .popup{position:relative;width:calc(100% - 40px);background:#fff;border-radius:10px}
}