@charset "utf-8";
.container {background-image: url(/assets/_img/sub/pyramidalWaveBG.png);background-size: 75px;z-index: -2;content: "";width: 100%;height: 100%;background-repeat: repeat;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pyramidalWaveBG.png', sizingMethod='scale');-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pyramidalWaveBG.png', sizingMethod='scale')"; }

.studentViewBG{margin:0 auto;background-color:#FFF;border:1px solid #e0e0e0;}
.displayBlock{display:block;}

.mb0{margin-bottom: 0 !important; }
.fwb{font-weight: bold; }
.box3{width: 100%; box-sizing: border-box; }
.box3 *{box-sizing: border-box; }
.box3 > div > label {width:100%;display:block;cursor:pointer;font-weight:bold;color:#333;border-bottom: 1px solid #ccc;padding:10px; cursor: auto; }
.box3 > div > label > span {font-weight:normal;color:#777;margin-left:5px; line-height: inherit; }
.box3 > .replyView{background-color: #F3F3F7;}
.box3 > .replyView > ul > li {border-bottom: 1px solid #ccc;}
.box3 > .replyView > ul > li > div {float: left; }
.box3 > .replyView > ul > li > div >h3 {float: left; color: #006cb8;font-weight:bold;}
.box3 > .replyView > ul > li > div >div {float: left; }
.box3 > .replyView > ul > li > div >div > pre {display: block; }
.box3 > .replyView > ul > li > div:after {content: ""; display: block; clear: both; }
.box3 > .replyView > ul > li:after{content: ""; display: block; clear: both; }
.box3 > .replyView > ul > li > div:after{content: ""; display: block; clear: both; }
.box3 > div > ul > li > .commentFormBox {float: right; }
.box3 > div > ul > li > .commentFormBox > div:after {content: ""; display: block; clear: both; }
.box3 > div > ul > li > .commentFormBox > div > h4 {color: #aaa; margin-bottom: 5px;}
.box3 > div > ul > li > .commentFormBox > div >a {color: #555; display: block; float: left; text-align: center; }
.box3 > div > ul > li > .commentFormBox > div >span {border-right: 1px solid #555; display: block; float: left; height: 14px; }
.box3 > div > ul > li > .commentFormBox > div >a:hover {color: #006cb8; }
.btnCommentEditGo {display:block;color:#fff;background-color:#1c4682;text-align:center;border-radius:3px;text-decoration: none;border:0;font-weight:bold;float:none;}
 .btnCommentEditDel {display:block;color:#fff;background-color:#999;text-align:center;border-radius:3px;text-decoration: none;border:0;font-weight:bold;float:none;}

.box3 > ul > li > div > div > a:hover {color: #006cb8; }
.box3 > ul > li > div > div > *{float: left;color: #595959;text-align:center;cursor:pointer;}
.box3 > ul > li > div > div > .btnEditGo {border-right: 1px solid #595959; }
.box3 > ul > li > div > .modified > .btnCommentEditGo {display:block;color:#fff;background-color:#1c4682;text-align:center;border-radius:3px;text-decoration: none;border:0;font-weight:bold;float:none;}
.box3 > ul > li > div > .modified > .btnCommentEditDel {display:block;color:#fff;background-color:#999;text-align:center;border-radius:3px;text-decoration: none;border:0;font-weight:bold;float:none;}
.box3 > ul > li > div > .modified > .btnCommentEditGo:hover {color: #ffff00; }
.box3 > ul > li > div > .modified > .btnCommentEditDel:hover {color: #555; }
.box3 > ul > li > .commentFormBox > .commentFormBox {color: #333;display:block; }
.box3 > ul > li > .commentFormBox > .editCommentArea {overflow-y: scroll;border: 1px solid #ccc; }
.box3 > ul > li div:after {content: ""; display: block; clear: both;}
.box3 > div {border:0;}
.box3 > div:after {content: ""; display: block; clear: both; }

.box3 > div > textarea {overflow-y: scroll;border: 1px solid #ccc; }

.frameBox{height: 0; padding-bottom: 56.25%; position: relative; margin-top: 40px;}
.frameBox > iframe{width: 100%;height: 100%;margin: 0 auto;display: block;position: absolute;}


/* For larger displays */
@media all and (min-width:1080px){
.container {padding:94px 0;width: 100%;height: 100%;}
.studentViewBG{width:1080px;}
.titleInfoBox{margin:0 auto;margin-top:40px;margin-bottom:40px;width:980px ;border-top:2px solid #484848;border-bottom:1px solid #aaaaaa;}
.studentViewTitle{margin:20px auto;width:940px;font-size:20px;font-weight:bold;color:#333333;line-height:22px;}
.studentClass{padding:0px 20px 10px 20px;margin:0 auto;width:940px;}
.studentClass li{float:left;padding-right:22px;display:inline-block;font-size:14px;color:#595959;}
.studentViewInfo{padding:0px 20px 20px 20px;margin:0 auto;width:940px;margin-bottom:20px;border-bottom:1px solid #aaaaaa;}
.studentViewInfo li{float:left;padding-right:22px;display:inline-block;font-size:14px;color:#595959;}
.studentViewBar span{display:inline-block;padding-left:22px;}
.studentViewBar:before{content:"|";}
.studentViewText{margin:20px;padding:15px;font-size:16px;line-height:32px;color:#333333;border:1px solid #efefef;}
.studentViewText img{max-width:100%;}

.btns{display:inline-block;margin-bottom:100px;width:100%;text-align:center;}
.btns a{display:inline-block;margin:0 10px;width:100px;height:35px;color:#fff;font-size:16px;font-weight:bold;line-height:35px;text-decoration:none;text-align:center;}
.interviewListBtn{background-color:#006cb8;}
.interviewModifyBtn{background-color:#00aeef;}
.interviewDelBtn{background-color:#595959;}

.studentViewText > h3{margin:20px 0px;font-size:30px;color:#006cba;font-weight:bold;}
.preText{margin-bottom:30px;font-size:16px;color:#333;line-height:28px;}
.personImage{width:475px;height:217px;}
.personImage img{width:100%;}
.personImgEx{font-size:13px;color:#595959;line-height: 22px;}
.interview_view > ul > li:last-child > div > div > .personImgEx {text-align: left !important;}
.studentViewText > .question{margin:20px 0px 10px 0px;font-size:25px;line-height:38px;color:#006cba;font-weight:bold;}
.studentViewText > .answer{font-size:16px;color:#333333;line-height:28px; margin-bottom: 60px; }

.emphasisTitle{text-align:center;font-size:50px;}
.emphasisBlue{margin: 20px 0px 10px 0px;color:#64A996;font-size:20px;font-weight:bold;}

.box3 {width: 100%; margin: 0 auto; padding:3% 5%;border-radius: 4px; }

.box3 > div > label {font-size:12px;}
.box3 > div > label > span {font-weight:normal;color:#777;margin-left:5px; }
.box3 > div {padding: 0 15px; }
.box3 > .replyView{background-color: #f5f5fd; border-radius: 5px; margin-bottom: 20px;}
.box3 > .replyView > ul {width: 100%;margin:15px 0; padding-bottom: 15px; }
.box3 > .replyView > ul > li {width: 100%;padding:20px 0; }
.box3 > .replyView > ul > li > div {width: 85%; margin-bottom:3px; }
.box3 > .replyView > ul > li > div >h3 {width: 20%; height: 100%; font-size: 14px; padding-left: 10px; line-height: 18px;}
.box3 > .replyView > ul > li > div >div {width: 80% !important;  }
.box3 > .replyView > ul > li > div >div > pre {line-height: 20px; }
	.editCommentArea{width: 85%; float: left; }
	.modified{width: 13%; float: right; }
.box3 > .replyView > ul > li > .commentFormBox > div > h4 {font-size: 11px; padding-left: 20px; }
.box3 > .replyView > ul > li > .commentFormBox > div > .btnEditGo {width:50px; height: 14px; font-size: 12px; margin-top: 8px; line-height: 14px;}
.box3 > .replyView > ul > li > .commentFormBox > div > .btnDelGo {width:50px; font-size: 12px; margin-top: 8px;line-height: 14px;}
.box3 > .replyView > ul > li > .commentFormBox > div > span {margin-top: 8px;line-height: 14px;}
.box3 > .replyView > ul > li:after{content: ""; display: block; clear: both; }
.box3 > .replyView > ul > li > div:after{content: ""; display: block; clear: both; }
.box3 > div > ul > li > .commentFormBox {width: 15%; }
.box3 > div > ul > li > .commentFormBox > h4 {color: #aaa; margin-bottom: 5px;}
.btnCommentEditGo {width: 120px;height:30px;line-height:30px;font-size:14px;margin-bottom:10px;}
.btnCommentEditDel {width: 120px;height:30px;line-height:30px;font-size:14px;}
.box3 > .replyWrite > div > input{width: 120px;font-size: 14px;line-height: 18px;}
.box3 > .replyWrite > div > textarea{width: 710px;height:70px;margin-right:10px;margin-left: 10px;}
.box3 > .replyWrite > div >  button {width: 120px;height:30px;line-height:30px;font-size:14px;}
}

/* For smaller displays like laptops */
@media (min-width: 641px) and (max-width: 1079px) {
.container {padding:58px 0;width: 100%;height: 100%;}
.studentViewBG{width:95%;}
.titleInfoBox{margin:0 auto;margin-top:68px;margin-bottom:26px;width:95% ;border-top:2px solid #484848;border-bottom:1px solid #aaaaaa;}
.studentViewTitle{margin:15px auto;width:100%;font-size:20px;font-weight:bold;color:#333333;line-height:22px;}
.studentClass{margin:0 auto;}
.studentClass li{float:left;padding-bottom:8px;padding-right:22px;display:inline-block;font-size:14px;color:#595959;}
.studentViewInfo{padding-bottom:7px;margin:0 auto;border-bottom:1px solid #aaaaaa;}
.studentViewInfo li{float:left;padding-bottom:7px;padding-right:22px;display:inline-block;font-size:14px;color:#595959;}
.studentViewBar span{display:inline-block;padding-left:22px;}
.studentViewBar:before{content:"|";}
.studentViewText{margin:20px;padding:10px;font-size:14px;line-height:32px;color:#333333;border:1px solid #efefef;}
.studentViewText img{width:100%;}

.btns{display:inline-block;margin-bottom:50px;width:100%;text-align:center;}
.btns a{display:inline-block;margin:0 10px;width:80px;height:30px;color:#fff;font-size:14px;font-weight:bold;line-height:30px;text-decoration:none;text-align:center;}
.interviewListBtn{background-color:#006cb8;}
.interviewModifyBtn{background-color:#00aeef;}
.interviewDelBtn{background-color:#595959;}

.studentViewText > h3{margin:20px 0px;font-size:30px;color:#006cba;font-weight:bold;}
.preText{margin-bottom:30px;font-size:16px;color:#333;line-height:28px;}
.personImage{width:475px;height:217px;}
.personImage img{width:100%;}
.personImgEx{font-size:13px;color:#595959;line-height: 22px;}
.studentViewText > .question{margin:20px 0px 10px 0px;font-size:25px;line-height:28px;color:#006cba;font-weight:bold;}
.studentViewText > .answer{font-size:16px;color:#333333;line-height:28px;margin-bottom: 80px;}

	.emphasisTitle{text-align:center;font-size:30px;}
	.emphasisBlue{margin: 20px 0px 10px 0px;color:#64A996;font-size:20px;font-weight:bold;}
.box3 {width: 100%; }
.box3 > div {padding: 0 15px; }
.box3 > div > label {width:auto;font-size:14px;}
.box3 > div > label > span {font-weight:normal;color:#777;margin-left:5px; }
.box3 > .replyView{background-color: #f5f5fd; border-radius: 5px; margin-bottom: 20px;}
.box3 > .replyView > ul {width: 100%; padding-bottom: 20px; }
.box3 > .replyView > ul > li {width: 100%;padding:20px 0;}
.box3 > .replyView > ul > li > div {width: 80%; margin-bottom:5px;  }
.box3 > .replyView > ul > li > div >h3 {width: 20%; font-size: 15px; line-height: 24px; }
.box3 > .replyView > ul > li > div > div {width:80%;height: auto; padding: 0 10px; }
.box3 > .replyView > ul > li > div > div > pre {font-size: 14px;line-height: 22px; }
	.editCommentArea{width: 100%;  }
	.modified{width: 100%; }
.box3 > .replyView > ul > li > .commentFormBox > div{padding: 0; }
.box3 > .replyView > ul > li > .commentFormBox > div > h4 {font-size: 12px;margin-top:5px; padding-left: 10px; }
.box3 > .replyView > ul > li > .commentFormBox > div > .btnEditGo {width:40px; font-size: 12px;}
.box3 > .replyView > ul > li > .commentFormBox > div > .btnDelGo {width:40px; font-size: 12px; }
.box3 > .replyView > ul > li > .commentFormBox > div > span {line-height: 14px;}
.box3 > .replyView > ul > li:after{content: ""; display: block; clear: both; }
.box3 > .replyView > ul > li > div:after{content: ""; display: block; clear: both; }
.box3 > div > ul > li > .commentFormBox {width: 20%; }
.box3 > div > ul > li > .commentFormBox > h4 {color: #aaa; margin-bottom: 5px;}
.btnCommentEditGo {width: 49.5%;height:40px;line-height:40px;font-size:16px;float:left;}
.btnCommentEditDel {width: 49.5%;height:40px;line-height:40px;font-size:16px;float:right;}
.box3 > .replyWrite > div > input{width: 100%;font-size: 15px;margin:5px 0; line-height: 20px;}
.box3 > .replyWrite > div > textarea{width: 100%;height:100px;margin-bottom:4px;}
.box3 > .replyWrite > div >  button {width: 100%;height:50px;line-height:40px;font-size:16px;}
}

/* For smartphones */
@media (max-width: 640px) {
.container {padding:40px 0;width: 100%;height: 100%;}
.studentViewBG{width:95%;}
.titleInfoBox{margin:0 auto;margin-top:38px;margin-bottom:26px;width:93% ;border-top:2px solid #484848;border-bottom:1px solid #aaaaaa;}
.studentViewTitle{margin:15px auto;width:100%;font-size:14px;font-weight:bold;color:#333333;line-height:16px;}
.studentClass{margin:0 auto;}
.studentClass li{float:left;padding-bottom:8px;padding-top:5px;padding-right:5px;display:inline-block;font-size:11px;line-height:12px;color:#595959;}
.studentViewInfo{padding-bottom:7px;margin:0 auto;border-bottom:1px solid #aaaaaa;}
.studentViewInfo li{float:left;padding-bottom:8px;padding-top:5px;padding-right:5px;display:inline-block;font-size:11px;color:#595959;}
.studentViewBar span{display:inline-block;padding-left:5px;}
.studentViewBar:before{content:"|";}
.studentViewText{margin:20px 0px;padding:5px;font-size:12px;line-height:24px;color:#333333;border:1px solid #efefef; word-break: break-all !important;box-sizing: border-box; width: 100%; }
.studentViewText img{width:100%;}

.btns{display:inline-block;margin-bottom:50px;width:100%;text-align:center;}
.btns a{display:inline-block;margin:0 5px;width:69px;height:24px;color:#fff;font-size:12px;font-weight:bold;line-height:24px;text-decoration:none;text-align:center;}
.interviewListBtn{background-color:#006cb8;}
.interviewModifyBtn{background-color:#00aeef;}
.interviewDelBtn{background-color:#595959;}

.studentViewText > h3{margin:20px 0px;font-size:16px;color:#006cba;font-weight:bold;}
.preText{margin-bottom:15px;font-size:12px;color:#333;line-height:18px;}
.personImage{width:100%;}
.personImage img{width:100%;}
.personImgEx{font-size:10px;color:#595959;line-height: 12px;}
.studentViewText > .question{margin:20px 0px 10px 0px;font-size:14px;line-height:20px;color:#006cba;font-weight:bold;}
.studentViewText > .answer{font-size:12px;color:#333333;line-height:17px;margin-bottom: 30px; }

	.emphasisTitle{text-align:center;font-size:25px;}
	.emphasisBlue{margin: 20px 0px 10px 0px;color:#64A996;font-weight:bold;}
.box3 > div > label {width:auto;font-size:12px; line-height: 18px; }
.box3 > div > label > span {font-weight:normal;color:#777;margin-left:5px;  }
.box3 > .replyView{background-color: #f5f5fd; border-radius: 5px; margin-bottom: 20px; padding: 10px; }
.box3 > .replyView > ul {width: 100%; padding-bottom: 10px; }
.box3 > .replyView > ul > li {width: 100%;padding:15px 0; position: relative; }
.box3 > .replyView > ul > li > div {width: 100%; margin-bottom:5px;  }
.box3 > .replyView > ul > li > div >h3 {width: 100%; font-size: 12px;line-height: 18px; float: none; }
.box3 > .replyView > ul > li > div > div {width:100%; float: none; padding-top: 10px; }
.box3 > .replyView > ul > li > div > div > pre {width:100%; line-height: 18px; }
	.editCommentArea{width: 100%; }
.box3 > .replyView > ul > li > .commentFormBox {width: 70px; position: absolute; right: 0; }
.box3 > .replyView > ul > li > .commentFormBox > div > h4 {font-size: 11px;margin-top:5px;}
.box3 > .replyView > ul > li > .commentFormBox > div > .btnEditGo {width:25px; font-size: 12px;}
.box3 > .replyView > ul > li > .commentFormBox > div > .btnDelGo {width:25px; font-size: 12px; }
.box3 > .replyView > ul > li > .commentFormBox > div > span {line-height: 14px;}
.box3 > .replyView > ul > li:after{content: ""; display: block; clear: both; }
.box3 > .replyView > ul > li > div:after{content: ""; display: block; clear: both; }
.box3 > div > ul > li > .commentFormBox {width: 15%; }
.box3 > div > ul > li > .commentFormBox > h4 {color: #aaa; margin-bottom: 5px;}
.btnCommentEditGo {width: 49%;height:30px;line-height:30px;font-size:14px;float:left;}
.btnCommentEditDel {width: 49%;height:30px;line-height:30px;font-size:14px;float:right;}
.box3 > .replyWrite > div > input{width: 100%; font-size: 12px;margin:5px 0; line-height: 18px;}
.box3 > .replyWrite > div > textarea{width: 100%;height:80px;margin-bottom:4px;}
.box3 > .replyWrite > div >  button {width: 100%;height:30px;line-height:30px;font-size:14px;}
}