@charset "UTF-8";
/* 컴퓨터활용능력2급 250625 */
.computerM_250625{position: relative; width: 100%; height: 100%; overflow-x: hidden;}
.computerM_250625 *{font-family: 'Montserrat', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important; margin: 0; padding: 0;}

.computerM_250625 .visual{position: relative;}
.computerM_250625 .visual ul { position: absolute; bottom: 13vw; display:flex; padding:0 4.17vw; gap:3.33vw; margin-bottom:5vw; z-index: 1;}
.con03 {position: relative;}
.button { width: 40%; position: absolute; bottom: 2vw; right: 7vw; }
.btn_T {display: block; position: relative; height: 12vw; border-radius: 2vw; background-color: #fffc00; margin-bottom: 3.5vw;}
.btn_T p { color: #000; font-size: 4.4vw; font-weight: 500; text-align: center; line-height: 12vw; }
.con05 { position: relative;}
.btn_B {display: block; position: absolute; bottom: 23vw; left: 10vw;  height: 15vw; border-radius: 2vw; background-color: #010a51; width: 80%;}
.btn_B p { color: #fff; font-size: 5vw; font-weight: 500; text-align: center; line-height: 15vw;}
.con06 { background: #e4e4eb; padding: 8vw;}
.con06 h2 { font-size: 5vw; font-weight: 800; border-bottom: 1px solid #888; padding-bottom: 3vw;  }
.con06 li { padding:2vw 0 0 2vw; font-size: 4vw;}
.con06 .noti li:first-child { padding-top: 5vw;}
.con06 .evt_info { position: relative; width: 84.21vw; margin: 6vw auto 0; }
.con06 .evt_info .info { width: auto; padding: 5vw 4vw; font-size: 3.5vw; color: #000; line-height: 1.5; font-weight: 700; background-color: #d3d3da; border-radius: 0 0 0 2vw; }
.con06 details { position: relative; line-height: 5vw; }
.con06 details summary { font-size: 4vw; font-weight: 800; color: #000;  margin: 0 auto; padding: 2.4vw 0; cursor: pointer; list-style-type: none; text-align: center; background-color: #e4e4eb; border-radius:1.3vw; border: 1px solid #000; }
.con06 summary::-webkit-details-marker { display: none; }
.con06 details summary .arrow { position: absolute; top: 2.4vw; right: 13vw; }
.con06 details[open] summary .arrow { top: 1vw; right: 15vw; }
.con06 details[open] summary { border-bottom: 1px solid #000; padding: 2.4vw; width: auto; }
.con06 details[open] summary .arrow::after { position: absolute; top: 3.2vw; left: 3vw; content: ""; width: 2vw; height: 2vw; border-top: 3px solid #000; border-right: 3px solid #000; transform: rotate(-45deg); }
.con06 details summary .arrow::after { position: absolute; top: 0.5vw; left: 1vw; content: ""; width: 2vw; height: 2vw; border-top: 3px solid #000; border-right: 3px solid #000; transform: rotate(135deg); }
.con06 details div { width: 1000px; margin: 0 auto; padding: 50px 0 100px; text-align: left; }
.con06 details div p { padding: 3px 0 0 10px; font-weight: 400; color: #333; font-size: 3vw; }
.con06 details div p::before { content: " ·"; margin-left: -10px; padding-right: 5px; }
.con06 details div strong { padding-top: 20px; display: block; color: #0027ca; }

/* popup */
.popup-wrapper{position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.8); display: inline-flex; align-items: center; z-index: 3; word-spacing: 0; overflow-x: hidden;}
.closeX{position: absolute; top: 0.3em; right: -0.2em; width: 1em; line-height: 0.8rem; font-size: 4em; text-align: center; cursor: pointer; color: #000; text-decoration: none;}
.pop_wrap{position: relative; background: #fff; width: 80%; margin: 0 auto; padding: 1em; border-radius: 0.3em; border: 0.15em solid #000;}

.pop_conts{overflow-y: auto; margin-bottom: 30%;}
.popup-wrapper .pop_tit{text-align: center; font-size: 0.9em;}
.popup-wrapper .tit{font-weight: 800; font-size: 1.5em; border-bottom: 0.01em solid #000; margin: 0 0 0.5em; padding-bottom: 0.2em; color: #000 !important}

.pop_conts table{table-layout: fixed; word-break: break-all; width: 92%; margin: 1em auto 0;}
.pop_conts table th,
.pop_conts table td{text-align: left; font-size: 1em; color: #555; font-weight: 500;}
.pop_conts table tr:nth-child(4) td{padding-top: 6%;}
.pop_conts table img{ width: 23px; vertical-align: middle;}
.pop_conts table span{margin:0 5px;}

.pop_wrap .btn{position: absolute; bottom: 0; left: 0; width: 100%; margin: 0 auto; background: #e41545; text-align: center; padding: 0.7em 0; color:#fff; font-weight: 900; font-size: 1.5em;}
.pop_conts a{color: #fff; text-decoration: none;}
.btn_view{background: #333; text-align: center; border-radius: 0.2em; padding: 0.8em 1.2em; font-size: 0.7em; position: absolute;}

.popup-wrapper input{width: 90%; border: 0; border-bottom: 0.1em solid #aaa; padding: 0; font-size: 1em; color: #000; font-weight: 600; height: 2.5em; border-radius: 0; margin-bottom: 0.5em;}
.popup-wrapper select{font-size: 1em;}

.popup-wrapper input[type='text'].data{width:35%;}
.popup-wrapper select{padding: 1em; border:1px solid #ccc; }
.popup-wrapper select option{font-size: 0.5em;}
.popup-wrapper button{border:0; cursor: pointer; padding: 0; margin-right: 15px;}

.popup-wrapper textarea,
.popup-wrapper select{border-radius: 0.5em; width: 19em; padding: 0.7em; color: #000; font-size: 0.7em; height: 3em}
.popup-wrapper label{cursor: pointer; font-size: 1em; padding: 0; letter-spacing: -0.1em;}
.popup-wrapper input[type='checkbox']{width: 20px; height: 20px; vertical-align: middle; accent-color: #e41545; margin-right: 5px;}

.popup-wrapper button{background: none;}
.popup-wrapper input:focus,
.popup-wrapper textarea:focus,
.popup-wrapper select:focus{outline: none;}
.popup-wrapper textarea::placeholder{font-size: 13px; color: #ccc;}

/* layer */
.layer-pop{position:fixed; top:0; left:0; display: inline-flex; align-items: center; background:rgba(0,0,0,0.2); width:100%; height:100%; z-index:2;}
.layer-pop .tit{font-size: 1.3em; text-align: center;}
.pop_layer{background: #fff; width: 75%; position: relative; margin: 0 auto; padding: 1em; box-shadow: 0px 0.1em 0.5em 0.3em rgb(0 0 0 / 0.2); border-radius: 0.3em; text-align: left;}
.layer_conts{position: relative; width: 95%; font-size: 1em; overflow-y: auto; line-height: 1.5; height: 18em; margin: 0 auto; padding: 0 2.5%;}
.layer_conts strong{padding-top: 0.5em; display: block; font-weight: 500;}
.layer-pop a{position: absolute; top: 0.5em; right: 0; width: 1em; line-height: 0.8rem; font-size: 3em; text-align: center; cursor: pointer; color: #000; text-decoration: none;}
.noti_txt{font-size: 12px;}
.red{color:#e41545;}
.bg_gray{ background: #efefef; margin: 0.5em 0; padding: 1em; text-align: left; font-size: 0.8em; width: 92%;}

/* 학점인정 전공 기준 레이어 */
.layer_credit { display:none; position:fixed; width: 700px; max-width: 90%; top: 50%; left: 50%;transform: translate(-50%, -50%); text-align:left; z-index:1001;background:#fff; border-radius: 8px;overflow: auto; }
.layer_credit .layer_content dl { background:#fff; color:#333; }
.layer_credit .layer_content { padding:30px; box-sizing:border-box; background:#fff; }
.layer_credit .layer_content table th { text-align:center !important; }
.layer_credit h4 { position:relative;height:50px; font-size:20px; text-align:center; background:#00bd41; color:#fff; line-height:50px; box-sizing:border-box; border-top-left-radius: 8px;border-top-right-radius: 8px;}
.layer_credit h4 a.btn_close { position: absolute; right: 15px;top: 50%;transform: translateY(-50%); width: 24px; height: 24px;}
.layer_credit h4 a.btn_close img { width: 100%;height: 100%;}
.layer_credit h4 strong { color:#ffd800; }
.layer_credit p { padding-top:10px; text-align:center; }
.layer_credit p a { color:#c90909; text-decoration:underline;}
.table_basic th { background:#ededf2; border:1px solid #cfcfda; border-top:none;}
.table_basic td {border:1px solid #d8dde8 }

/* 모달레이어 폼 */
.modal_layer { display:none; position:absolute; z-index:1001; }
.modal_layer .header { background:#3e3e55; height:40px; width:100%; }
.modal_layer .header .title { box-sizing:border-box; font-weight:bold; font-size:20px; text-align:center; padding-top:8px; color:#fff; font-weight:normal; }
.modal_layer .header .comment { font-size:18px; margin-top:8px; }
.modal_layer .layer_content { padding:20px; min-height:150px; background:#fff; }
.modal_layer .btn_section { padding:0 20px 20px; box-sizing:border-box; text-align:center;background:#fff; }
.modal_layerBg { position:fixed; left:0; top:0; z-index:1000; width:100%; height:100%; background-color:rgba(0,0,0,0.8); }
.modal_layer .btn_modalClose { position: absolute; right:0; bottom:-40px; z-index:1000; color:#fff; line-height:1.5; }
.modal_layer .btn_modalClose a { display:inline-block; width:20px; padding:10px 10px 10px 2px;}

/* 유튜브 영상 레이어 */
.youTube_layer {display:none; position:fixed; top:40%; left: 5%; width:90%; max-width:800px; height:auto; box-sizing:border-box; z-index:1001; background-color: #000;}
.youTube_layer > .youTube_view  { position: relative; padding:0 0 56.25%; height:0; overflow:hidden;}
.modal_layer .youTube_view iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
.modal_layer .btn_youTubeClose { position:absolute; top:-35px; right:0; width:30px; width: 30px; height: 30px;background:none; border:none; padding:0; z-index:1002;}

@media (min-width: 481px) and (max-width: 767px)
{ .youTube_layer
    { top:50px; width:60%; margin:0 20%; } 
}
.btn_youTubeClose img { width:100%; height:100%;}

/* 약력확인하기 */
.layer_resume { width: 400px; max-width: 90%; top: 56%; left: 50%;transform: translate(-50%, -50%);}
.layer_resume .layer_content { font-size: 5vw; border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;}
.modal_layer h4 { position:relative;height:50px; font-size:20px; text-align:center; background:#00bd41; color:#fff; line-height:50px; box-sizing:border-box; border-top-left-radius: 8px;border-top-right-radius: 8px; }
.modal_layer h4 a.btn_close { position: absolute; right: 15px;top: 50%;transform: translateY(-50%); width: 24px; height: 24px;}
.modal_layer h4 a.btn_close img { width: 100%;height: 100%;}