@charset "utf-8";



/* 레이어 팝업창  /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.layer {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;}
.layer .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.7; filter:alpha(opacity=70); z-index:9;}

/* 코딩용 레이어 */
.layerWrapC450 {display:none; position:absolute; left:50%; top:50%; width:450px; background:#333; z-index:10;}
.layerWrapC500 {display:none; position:absolute; left:50%; top:50%; width:500px; background:#333; z-index:10;}
.layerWrapC600 {display:none; position:absolute; left:50%; top:50%; width:600px; background:#333; z-index:10;}
.layerWrapC700 {display:none; position:absolute; left:50%; top:50%; width:700px; background:#333; z-index:10;}
.layerWrapC800 {display:none; position:absolute; left:50%; top:50%; width:800px; background:#333; z-index:10;}
.layerWrapC900 {display:none; position:absolute; left:50%; top:50%; width:900px; background:#333; z-index:10;}
.layerWrapC1000 {display:none; position:absolute; left:50%; top:50%; width:1000px; background:#333; z-index:10;}

/* 개발용 레이어 */
.layerWrap450 {width:450px; background:#333;}
.layerWrap500 {width:500px; background:#333;}
.layerWrap600 {width:600px; background:#333;}
.layerWrap700 {position:absolute; left:50%; top:50%; width:700px; background:#333; transform:translateY(50%); z-index:10;}
.layerWrap800 {width:800px; background:#333;}
.layerWrap850 {width:850px; background:#333;}
.layerWrap900 {width:900px; background:#333;}
.layerWrap960 {width:960px; background:#333;}
.layerWrap1000 {width:1000px; background:#333;}
.layerWrap680 {width:680px;}
.layerWrap1200 {width:1200px; background:#333; z-index:10;}
.layerWrap985 {min-width:985px; background:#333;}

.layerTLine {height:10px; background:url('../images/layer/layer_topBg.gif') repeat-x;}
.layerBLine {height:25px; margin-bottom:20px; background:url('../images/layer/layer_btnBg.gif') repeat-x;}

.layerTitle {display:flex; justify-content:space-between; align-items:center; width:100%; padding:15px 20px; background:#333; box-shadow:1px 0 10px 8px rgba(0,0,0,0.1);}
.layerTitle p {font-size:20px; font-weight:500; color:#fff;}
.layerTitle a {width:15px; margin-left:25px;}
.layerTitle a i {font-size:24px; color:#fff;}

/* .layerArea {padding:20px; background:#fff;} */
.layerArea {padding:20px 20px 110px;; background:#fff;}

.layerTitle02 {float:left; width:100%; height:35px; margin-bottom:20px; border-bottom:1px solid #e2e2e2; background-color:rgba(240,248,255,.6);}
.layerTitle02 dt {padding:3px 0 0 25px; font-size:15px; line-height:30px; font-weight:500; color:#4f4f4f; letter-spacing:-1px;}

.layerBtnwrap { position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; padding: 15px 20px; background: #f8fafd; box-shadow: -1px 0 10px 1px rgba(0,0,0,0.1); }


/* 전체영역[개발용] */
/* .layerWrap200Dev {width:200px; z-index:10;}
.layerWrap450Dev {width:450px; background:#333; z-index:10;}
.layerWrap500Dev {width:500px; background:#333; z-index:10;}
.layerWrap600Dev {width:600px; background:#333; z-index:10;}
.layerWrap700Dev {width:700px; background:#333; z-index:10;}
.layerWrap800Dev {width:800px; background:#333; z-index:10;}
.layerWrap900Dev {width:900px; background:#333; z-index:10;}
.layerWrap1000Dev{width:1000px; background:#333; z-index:10;} */
.layerWrap200Dev {width:200px; z-index:10; position: relative; }
.layerWrap450Dev {width:450px; background:#333; z-index:10; position: relative;}
.layerWrap500Dev {width:500px; background:#333; z-index:10; position: relative;}
.layerWrap600Dev {width:600px; background:#333; z-index:10; position: relative;}
.layerWrap700Dev {width:700px; background:#333; z-index:10; position: relative;}
.layerWrap800Dev {width:800px; background:#333; z-index:10; position: relative;}
.layerWrap900Dev {width:900px; background:#333; z-index:10; position: relative;}
.layerWrap1000Dev{width:1000px; background:#333; z-index:10; position: relative;}






/* 팝업창  /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 팝업창 레이아웃 - 관리자 전용 팝업 */
.popWrap480 {width:485px;}
.popWrap785 {width:785px;}
.popWrap1225 {width:1225px;}

#popWrap930 {width:930px; padding:0 15px 0 15px; background:url('../images/btnIcn/pop_930Bg.gif') no-repeat; overflow:hidden; overflow-x:hidden;}
#popWrap700 {width:700px; padding:0 15px 0 15px; background:url('../images/btnIcn/pop_700Bg.gif') no-repeat; overflow:hidden; overflow-x:hidden;}
#popWrap450 {width:450px; padding:0 15px 0 15px; background:url('../images/btnIcn/pop_450Bg.gif') no-repeat; overflow:hidden; overflow-x:hidden;}

.popTitle {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:15px 20px; background:#333; overflow:hidden;}
.popTitle p {width:calc(100% - 40px); font-size:22px; font-weight:500; color:#fff;}
.popTitle a {width:15px; margin-left:25px;}
.popTitle a i {font-size:24px; color:#fff;}

.popArea {padding:20px; background:#fff;}




/* 팝업창 기본레이아웃-사용자/관리자 공통 반응형 팝업 */
.webPopup {position:relative; width:100%; min-width:320px; background:#fff;}
.webPopup .webPopTitle {display:flex; justify-content:space-between; align-items:center; width:100%; padding:20px; margin-bottom:20px; background:#333; box-shadow:1px 0 10px 8px rgba(0,0,0,0.1);}
.webPopup .webPopTitle p {width:calc(100% - 30px); font-size:20px; font-weight:500; color:#fff;}
.webPopup .webPopTitle a {display:flex; flex-wrap:wrap; justify-content:end; width:30px;}
.webPopup .webPopTitle a i {font-size:24px; color:#fff;}
.webPopup .webPopCont {width:100%; height:calc(100vh - 180px); padding:0 20px; background:#fff; overflow-y:auto;}
.webPopup .webPopCont textarea {height:200px !important; resize: none; overflow-y:auto;}
.webPopup .webPopButton {position:fixed; left:0; bottom:0; width:100%; text-align:center; padding:15px 20px; background:#f8fafd; box-shadow:-1px 0 10px 1px rgba(0,0,0,0.1);}
/*  */
.nyroModalLink .webPopup .webPopButton {position: absolute; left:0; bottom:0; width:100%; text-align:center; padding:15px 20px; background:#f8fafd; box-shadow:-1px 0 10px 1px rgba(0,0,0,0.1);}



/* ==================================================== 반응형 팝업 레이아웃 (실습정보/활동보고서) ==================================================== */
.rec_title {display:flex; margin-bottom:6rem; padding:1.2rem 2rem; background:#333; justify-content:space-between; align-items:center;}
.rec_title * {font-size:1.6rem; color:#fff;}
.rec_title a {font-size:2.2rem;}

.rec_content {width:100%; max-width:1200px; padding:0 2rem; margin:0 auto 10rem auto; overflow: hidden; }
.rec_content.recBox {padding:0;}
.rec_content .rec_content_tit { margin-bottom: 2rem; font-size: 2.4rem; font-weight: 500;  }
.rec_frame {padding:2rem; border:1px solid #e5e5e5; }

.rec_status {border-radius:5px; border:1px solid #e5e5e5; border-top:5px solid #4179cd; overflow:hidden;}
.rec_status > * {padding:3rem 2rem;}
.rec_status ul {display:flex; flex-wrap: wrap;}
.rec_status span {display: inline-block; font-size:1.4rem; color:#888;}
.rec_status p {font-weight:500;}

.rec_status .status {padding-bottom:2rem;}
.rec_status .status span {margin-bottom:0.8rem;}
.rec_status .status p {display:flex; flex-wrap:wrap; align-items:center; font-size:4rem;}
.rec_status .status select {height:auto; border:none; font-size:4rem; font-weight:600; color:#4179cd;}
.rec_status .status select option {padding:3rem; color:#444; font-size:2rem;}
.rec_status .status .point {margin:0 0.5rem; font-size:4rem; font-weight:600; color:#4179cd;}

.rec_status ul.c_info li {display:flex; flex:1; flex-direction:column; position:relative; margin-left:2rem; padding-right:2rem; border-right:1px solid #e5e5e5;}
.rec_status ul.c_info li:first-child {margin-left:0;}
.rec_status ul.c_info li:last-child {border-right:none;}
.rec_status ul.c_info span {margin-bottom:0.8rem;}
.rec_status ul.c_info p {font-size:2rem;}

.rec_status ul.m_info {background:#f9f9f9;}
.rec_status ul.m_info li {display:flex; align-items:center; margin-right:2.8rem;}
.rec_status ul.m_info li:last-child {margin-right:0;}
.rec_status ul.m_info li span {margin-bottom:0; margin-right:0.8rem;}
.rec_status ul.m_info li p {font-size:1.4rem;}

@media screen and (max-width: 767px) {
	.rec_content.recBox {padding:0 0.5rem;}
	
	.rec_status ul {flex-direction:column;}
	.rec_status ul.c_info li {margin:0; padding:0; border:none; padding-bottom:1rem; margin-bottom:1.2rem;}
    .rec_status ul.c_info li:last-child {margin-bottom:0; border:none;}
    .rec_status > * {padding:2rem;}
    .rec_status ul.m_info li {margin:0; margin-bottom:0.6em;}
    .rec_status ul.m_info li:last-child {margin:0;}
    .rec_frame {padding:0; border:none;}
}
@media (max-width :520px) {
	.rec_title {margin-bottom:5rem;}
	.rec_status span {font-size:1.5rem;}
	.rec_status ul.m_info li p {font-size:1.5rem;}
	.rec_status .status p, .rec_status .status select {font-size:3.2rem;}
}

/* 반응형 탭 */
.tab *, .rec_tab * {font-size:1.6rem;}
.tab-button {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:wrap; margin-bottom:2.5rem; border:1px solid #ddd; background:#f9f9f9;}
.tab-button li {flex:1; border-right:1px solid #ddd;}
.tab-button li:last-child {border:none;}
.tab-button.divd1 li {width:100%;}
.tab-button.divd2 li {width:calc(100% / 2);}
.tab-button.divd3 li {width:calc(100% / 3);}
.tab-button.divd4 li {width:calc(100% / 4);}
.tab-button.divd5 li {width:calc(100% / 5);}
.tab-button.divd6 li {width:calc(100% / 6);}
.tab-button li a {position:relative; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; width:100%; height:100%; font-size:1.5rem; font-weight:500; text-align:center; padding:2rem 1rem; word-break:keep-all;}
.tab-button li a:hover {position:relative; color:#fff; background:#75171c;}
.tab-button li a:hover::after {content:""; position:absolute; width:0; height:0; left:50%; bottom:-1px; border-bottom:5px solid #fff; border-left:5px solid transparent; border-right:5px solid transparent; transform:translate(-50%);}
.tab-button li a.on {color:#fff; background:#75171c;}
.tab-button li a.on::after {content:""; position:absolute; width:0; height:0; left:50%; bottom:-1px; border-bottom:5px solid #fff; border-left:5px solid transparent; border-right:5px solid transparent; transform:translate(-50%);}

.rec_tab ul li a:hover {background:#2177ce;} /* 실습정보 탭 */
.rec_tab ul li a.on {background:#2177ce;}

.rec_tab .tab-select {display:none;}

@media screen and (max-width: 767px) {
	.rec_tab .tab-button {display:none;}
	.rec_tab .tab-button.tab-button-adm {display:block;}
	
	.rec_tab .tab-select {display:block; margin-bottom:2.5rem;}
	.rec_tab .tab-select select {width:100%; height:50px;}
	.rec_tab .tab-select select option {color:#555;}
}



/* ==================================================== 현장실습-반응형 팝업 상세 레이아웃 ==================================================== */
/* 수료증 */
.diploma_wrapper * {word-break:keep-all;}
.diploma_wrapper {position:relative; max-width:210mm; height:297mm; padding:120px 50px; margin:0 auto; border:1px solid #ddd; background:#fff;}
.diploma_wrapper:after {content:""; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:406px; height:410px; background:url('../images/img/diploma_ui.png') no-repeat; background-size:contain;}
.diploma_wrapper > h3 {font-size:36px; text-align:center; font-weight:bold; color:#222; margin-bottom:100px;}
.diploma_wrapper > div.diploma_info > dl {display:flex; margin:15px 0 15px 45px; font-size:22px;}
.diploma_wrapper > div.diploma_info > dl dt {letter-spacing:5px;}
.diploma_wrapper > p {font-size:24px; line-height:1.6; text-align:justify; word-break:break-all; margin:150px 45px;}
.diploma_wrapper > div.diploma_bottom_area {position:absolute; left:50%; bottom:150px; width:100%; transform:translateX(-50%);}
.diploma_wrapper > div.diploma_bottom_area > div {font-size:2.4rem; font-weight:bold; text-align:center;}
.diploma_wrapper > div.diploma_bottom_area > h4 {font-size:32px; line-height:1.4; letter-spacing:2px; text-align:center; margin-top:60px;}
.diploma_wrapper > div.diploma_bottom_area > h4 span {display:inline-block; padding:20px 45px 20px 0; background:url('../images/img/ut_mou.png') right bottom no-repeat; background-size:85px 85px;}

.printWrap .diploma_wrapper {width:210mm;}

@media screen and (max-width: 481px) {
	.diploma_wrapper {padding:40px 30px;}
	.diploma_wrapper:after {width:220px; height:222px; background-size:cover;}
	.diploma_wrapper > h3 {font-size:32px;}
	.diploma_wrapper > p {font-size:22px; margin:150px 0;}
	.diploma_wrapper > p br {display:none;}
	.diploma_wrapper > div.diploma_bottom_area {bottom:40px;}
	.diploma_wrapper > div.diploma_bottom_area > h4 {font-size:22px; letter-spacing:0;}
	.diploma_wrapper > div.diploma_bottom_area > h4 span {padding:5px 5px 5px 0; background-size:65px 65px;}
}

/* 설문조사 */
.survey_wrapper { font-size:15px; }
.survey_wrapper * {word-break:keep-all;}
.survey_wrapper {overflow:hidden;}
.survey_wrapper > h3.survey-title {font-size:22px; text-align:center; font-weight:bold; color:#fff; padding:20px; background:#005aa0;}
.survey_wrapper .survey-text {font-size:15px; text-align:left; padding:20px; background:#f7f8fc; word-break: break-word;}
.survey_wrapper > ul {padding:20px; background:#ecf4fd;}
.survey_wrapper > ul > li {padding:20px; margin-bottom:20px; background:#fff;}
.survey_wrapper > ul > li:last-child {margin:0;}
.survey_wrapper > ul > li > p.survey-ex {position:relative; font-size:14px; color:#828aa0; padding:0 0 10px 18px; word-break:break-all; margin-bottom:10px; border-bottom:1px dashed #ddd;}
.survey_wrapper > ul > li > p.survey-ex::after {content:"※"; display:inline-block; position:absolute; left:0; top:1px;}
.survey_wrapper > ul > li > h4 {font-size:16px; line-height:1.3; font-weight:bold; margin-bottom:10px;}
.survey_wrapper > ul > li > div.short-asw label {display:inline-block;}
.survey_wrapper > ul > li > div.long-asw label {display:block;}
.survey_wrapper > ul > li > div label {font-size:15px; line-height:1.3; margin:5px 10px 5px 0; color:#555;}
.survey_wrapper > ul > li > div label.ect {display:block; width:100%;}
.survey_wrapper > ul > li > div label.ect input[type="text"] {margin:5px;}

/* 출석부 */
.attendDate {display:grid; grid-template-columns:repeat(3, 1fr); gap:0 30px; padding:15px; margin-bottom:20px; border:1px solid #ddd; background:#f7f8fc;}
.attendDate dl {display:flex; justify-content:start; font-size:18px; font-weight:bold;}
.attendDate dl dt {width:120px;}
.attendDate dl dd {width:calc(100% - 100px);}

@media screen and (max-width: 767px) {
	.attendDate {grid-template-columns:1fr; gap:10px 0;}
	.attendDate dl {font-size:16px;}
}

/* 현장실습요청서 작성 */
.applyEditChk > li {margin-top:15px; padding-top:10px; border-top:1px dashed #ddd;}
.applyEditChk > li:first-child {margin:0; padding:0; border:none;}

/* 사전서면점검서 */
.docChkList > li {padding:0.3rem 0; text-align:left; color:#555; word-break:keep-all;}
.docChkList > li.chk_inp {display:flex; flex-direction:column;}
.docChkList > li.chk_inp input[type="text"] {margin:0.5rem 0 0 0; width:100%;}
.docChkList > li.ect {display:flex; align-items:center;}

@media screen and (max-width: 767px) {
	.docChkTitle br {display:none;}
}








/* ==================================================== 현장실습 협약서 ==================================================== */
.mou_wrapper {padding:20px; border:1px solid #ddd;}
.mou_wrapper .mouTitle {font-size:20px; text-align:center; font-weight:bold; color:#222; margin-bottom:25px;}
.mou_wrapper .mouCont {width:100%; color:#555;}
.mou_wrapper .mouCont * {font-size:14px; line-height:1.4; word-break:keep-all;}
.mou_wrapper .mouCont p {margin-bottom:5px;}
.mou_wrapper .mouCont div.detailDivd {font-size:17px; font-weight:500; letter-spacing:50px; margin:30px 0; text-align:center;}
.mou_wrapper .mouCont dl {margin-top:25px;}
.mou_wrapper .mouCont dl dt {font-size:16px; line-height:1.2em; font-weight:bold; color:#333; margin-bottom:10px;}
.mou_wrapper .mouCont dl dd > ol li {padding:5px 0;}
.mou_wrapper .mouCont dl dd .tabIN {margin-left:10px;}
.mou_wrapper .mouCont strong {color:#333;}
.mou_wrapper .mouCont span.underline {display:inline-block; color:#333; font-weight:500; padding:0 10px 2px 10px; border-bottom:1px solid #333;}
.mou_wrapper .mouCont select, .mou_wrapper .mouCont input[type="text"] {margin:3px 5px;}
.mou_wrapper .mou_final_text {margin-top:35px; font-size:16px; color:#333; text-align:center;}
.mou_wrapper .mouDate {margin-top:35px; font-size:22px; color:#333; text-align:center;}
.mou_wrapper .mouDate span {font-weight:bold;}
.mou_wrapper .mouSign * {font-size:13px;}
.mou_wrapper .mouSign {width:100%; display:flex; margin-top:50px; border:1px solid #ddd; background:#fff;}
.mou_wrapper .mouSign > div {width:calc(100%/ 3);}
.mou_wrapper .mouSign > div:nth-child(2) {border-left:1px solid #ddd; border-right:1px solid #ddd;}
.mou_wrapper .mouSign.divd2 > div {width:calc(100%/ 2);}
.mou_wrapper .mouSign.divd2 > div:last-child {border-right:none;}
.mou_wrapper .mouSign > div > dl {display:flex; flex-direction:column;}
.mou_wrapper .mouSign > div > dl > dt {text-align:center; font-weight:bold; color:#333; padding:5px 10px; border-bottom:1px solid #ddd; background:#f7f8fc;}
.mou_wrapper .mouSign > div > dl > dd {padding:10px;}
.mou_wrapper .mouSign > div > dl > dd > dl {position:relative; height:70px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px dashed #ccc;}
.mou_wrapper .mouSign > div > dl > dd > dl:last-child {margin:0; padding:0; border:none;}
/* .mou_wrapper .mouSign > div > dl > dd > dl dt {font-weight:500;} 20230522 정민욱 주석*/
.mou_wrapper .mouSign > div > dl > dd > dl dt {position:relative; z-index:1; font-weight:500; background: transparent; }
.mou_wrapper .mouSign > div > dl > dd > dl dt span {font-weight:bold;}
.mou_wrapper .mouSign > div > dl > dd > dl dd {font-weight:bold;}
.mou_wrapper .mouSign > div > dl > dd > dl.mou_sign dd {position:absolute; right:0; bottom:15px;}
.mou_wrapper .mouSign > div > dl > dd > dl.mou_sign dd span {font-family:'궁서'; font-style:italic; font-size:10pt; font-weight:normal; color:#999;}

.mou_wrapper .mouSign > div > dl > dd > dl.univJoinSign {display:flex; flex-wrap:wrap; justify-content:center; align-items:center;} 
.mou_wrapper .mouSign > div > dl > dd > dl.univJoinSign dt {margin-right:10px;}

.mou_wrapper .mouSign > div > dl > dd > dl.compJoinSign {display:flex; flex-wrap:wrap; justify-content:center; align-items:center;} 
.mou_wrapper .mouSign > div > dl > dd > dl.compJoinSign dt {margin-right:10px;}
.mou_wrapper .mouSign > div > dl > dd > dl.compJoinSign dd span {font-family:'궁서'; font-style:italic; font-size:10pt; color:#222;}

.mou_wrapper .mouSign #stu_sign dl {position:relative; min-height:30px;}
.mou_wrapper .mouSign #stu_sign dd {position:absolute; right:0; /* bottom:3px; */}
.mou_wrapper .mouSign #stu_sign dd em {font-family:'궁서'; font-style:italic; font-size:16pt; font-weight:normal; color:#555;}

@media screen and (max-width: 767px) {
	.mou_wrapper .mouSign {flex-direction:column;}
	.mou_wrapper .mouSign > div {width:100%;}
	.mou_wrapper .mouSign > div:nth-child(2) {border:none; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
	.mou_wrapper .mouSign.divd2 > div {width:100%;}
	.mou_wrapper .mouSign.divd2 > div:last-child {border-right:none; border-bottom:none;}
}