@charset "utf-8";
/*

*/


/* **** Common Reset **** */
*{margin:0;padding:0;list-style:none;font-size:14px;font-weight:400;font-family: 'Noto Sans KR', sans-serif;box-sizing: border-box;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5{margin:0;padding:0;word-wrap:break-word;word-break:break-all;}
li,p,span,strong,a{font-size:inherit;color:inherit;font-family:inherit;}
body, html{width:100%;height:100%;}
body{overflow-x:hidden;}
body.hide{overflow:hidden;}
input,select,img{vertical-align:middle;}
img{border:0;max-width:100%;max-height:100%;}
table{border-collapse:collapse;width:100%;}
table caption{position: absolute;top: 0px;left: 0px;overflow: hidden;display: block !important;width: 0px !important;height: 0px !important;margin: 0 !important;font-size: 0 !important;line-height: 0 !important;}
button,input,optgroup,select,textarea{margin:0;padding:0;border:1px solid;box-sizing:border-box;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit;vertical-align:middle}
button,input,select{display:inline-block}
button,input{overflow:visible}
input[type=search],input[type=text]{-webkit-border-radius:0;-webkit-appearance:none}
input[type=search]{outline-offset:-2px;-webkit-appearance:none}
input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
input[type=file]{border:none}
input[type=file]::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;-moz-appearance:button;border:1px solid #bbb;background:#e0e0e0;box-shadow:none}
input[type=checkbox],input[type=radio]{padding:0;border:none}
button,select{text-transform:none}
[type=button],[type=reset],[type=submit],button{overflow:visible;border-color:transparent;background-color:transparent;cursor:pointer}
textarea{display:block;overflow:auto;resize:vertical}
input[disabled]{background-color:#ebebeb}
select:disabled{background-color:#ebebeb}
select{border:0;position:relative;background: url(/static/edu/sejongCyber/images/common/select.png) no-repeat right 10px center;padding: 0 30px 0 10px;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-appearance: none;appearance: none;}
select::-ms-expand { display: none;}

[hidden]{display:none!important}

.clear{clear:both;}
.clearfix::after{content:"";display:block;clear:both;}
.blind {position: absolute;top: 0px;left: 0px;overflow: hidden;display: inline-block !important;width: 1px !important;height: 1px !important;margin: 0 !important;font-size: 0 !important;line-height: 0 !important;}
a{display:inline-block;text-decoration:none;}

.skip-nav a {position:absolute; left:-3000%;}
.skip-nav a:focus { display:block; left:0; top:0; z-index:10000000000; width:100%; height:30px; line-height:30px; background:#ee2a32; color:#fff; text-align:center;}

.mt0{margin-top: 0px !important;}
.mt5{margin-top: 5px !important;}
.mt10{margin-top: 10px !important;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}
.mt40{margin-top: 40px !important;}
.mt50{margin-top: 50px !important;}

.txl{text-align:left !important;}
.txc{text-align:center !important;}
.txr{text-align: right !important;}


.inner{max-width: 1410px;margin: 0 auto;padding:0 20px;}

.header{background: #c9e3fc;text-align: center;}
.header .inner{padding-top: 40px;position: relative;height: 320px;/* overflow: hidden; */}
.header .inner::before,
.header .inner::after{content:"";position:absolute;}
.header .inner::before{width: 285px;height: 286px;background: url(/static/edu/sejongCyber/images/bg_l.png) no-repeat;left: 12.5%;bottom: -80px;}
.header .inner::after{width: 284px;height: 216px;background: url(/static/edu/sejongCyber/images/bg_r.png) no-repeat;right: 10%;bottom: 55px;z-index: 0;}
.header .logo{font-size: 22px;color: #0084c4;display: flex;align-items: flex-end;justify-content: center;gap: 5px;font-family: "Nanum Gothic";position: relative;z-index: 1;}
.header .logo span{margin-bottom: -5px;font-weight: 700;}
.header .h2-tit{font-size: 64px;font-weight: 600;font-family: 'Paperozi';color: #263f87;margin: 30px 0;position: relative;z-index: 1;}
.header .search{max-width: 500px;width: 100%;margin: 0 auto;height: 55px;border: 2px solid #263f87;background: #fff;border-radius: 68px;position: relative;overflow: hidden;box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);padding-right: 70px;z-index: 1;}
.header .search input[type="text"]{width: 100%;height: 100%;border: 0;border-radius: 68px;padding-left: 40px;font-size: 20px;font-weight: 200;}
.header .search .search-btn{position: absolute;top: 50%;right: 30px;transform: translateY(-50%);}
 
.container{padding-top: 130px;background: #fff;overflow: hidden;border-radius: 30px 30px 0 0;margin-top: -60px;position: relative;;}
.container .inner{}
.container .list-box{border-bottom: 1px solid #bababa;}  
.container .list-box > ul{display: flex;flex-wrap: wrap;gap: 0 20px;margin-top: -100px;overflow: hidden;}
.container .list-box > ul > li{  width: calc((100% - 20px * 2) / 3);margin-top: 30px;padding-bottom: 30px;position: relative;}
.container .list-box > ul > li::after{content:"";position:absolute;bottom: 0;left:0;right: -30px;height:1px;background: #bababa;}
 .container .list-box > ul > li:last-child::after {
  display: none;
} 
.container .list-box > ul > li > a {
  display: block;  
} 
.container .list-box > ul > li > a .img{} 
.container .list-box > ul > li > a .img img{max-width:100%;width: 100%;border-radius: 15px; min-height: 214px;}
.container .list-box > ul > li > a .tit {
  display: flex;
  align-items: center;   /* 세로 중앙 정렬 */
  gap: 5px;              /* 간격 균일하게 */
  margin: 16px 0 0;
}

.container .list-box > ul > li > a .tit .lectureNo {
  display: flex;          /* 내부 텍스트도 중앙 정렬 */ 
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 26px; 
  border: 1px solid #0074ff;
  border-radius: 20px; 
  font-size: 15px;
  font-weight: 500;
  color: #0074ff;
}

.container .list-box > ul > li > a .tit strong {
  flex: 1;                /* 남는 공간 다 사용 */
  font-size: 18px;
  font-weight: 500;
  color: #000;
  line-height: 1.2;       /* 뱃지와 균형 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}
 
.container .list-box > ul > li > a .info .mem{background: url(/static/edu/sejongCyber/images/icon_rm.png) no-repeat left center;}
.container .list-box > ul > li > a .count {
  display: inline-flex;
  align-items: center;         /* 세로 중앙 정렬 */
  gap: 5px;                    /* 아이콘과 숫자 간격 */
  font-family: 'NanumSquareNeo';
  font-size: 14px;
  color: #616161;
  line-height: 1;              /* 글자 높이에 딱 맞게 */
  padding-left: 22px;          /* 아이콘 여백 */
  background: url(/static/edu/sejongCyber/images/icon_eye.png) no-repeat left center;
  background-size: 16px 16px;  /* 아이콘 크기 통일 */
  height: 20px;                /* 글자와 균형 */
} 
.paging{display: flex;align-items: center;justify-content: center;margin-top: 75px;}
.paging a{font-size: 18px;font-weight: 500;color: #888888;margin: 0 15px;}
.paging a.img{}
.paging a.on{color:#2274d9;}   
 
.quick{position: fixed;top:70%; right: 40px;z-index: 100;}  
.quick a{width: 116px;height: 116px;background: #fff url(/static/edu/sejongCyber/images/icon_u.png) no-repeat center 16px;padding-top: 64px;text-align: center;font-size: 16px;color: #8262ff;font-weight: 500;font-family: 'Paperozi';border-radius: 35px;box-shadow: 4px 4px 21px rgba(134, 114, 215, 0.5);}

.pop-box{display:none;position:fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);z-index: 500;}
.pop-box .box{position: absolute;top: 50%;left: 50%;max-width: 932px;width: 90%;border-radius: 20px;overflow: hidden;margin: auto;transform: translate(-50%, -50%);}
.pop-box .box .img{background: linear-gradient(to right, #eaf2f5, #fff);display: flex;align-items: center;justify-content: center;padding: 10px 10px 20px;}
.pop-box .box .pop-ft{display: flex;align-items: center;justify-content: space-between;height: 54px;background: #2b3545;font-size: 20px;color: #fff;padding: 0 5.37%;}
.pop-box .box .pop-ft span{}
.pop-box .box .pop-ft span input[type="checkbox"]{position: absolute;left: -9999px;} 
.pop-box .box .pop-ft span input[type="checkbox"] + label{position: relative;font-size: 20px;padding-left: 44px;}
.pop-box .box .pop-ft span input[type="checkbox"] + label::before{content:"";position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 22px;height: 22px;border-radius: 3px;border: 1px solid #fff;}
.pop-box .box .pop-ft span input[type="checkbox"]:checked + label::after{content: "";position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 24px;height: 24px;background: url(/static/edu/sejongCyber/images/pop_true.png) no-repeat center;background-size: 100%;}
.pop-box .box .pop-ft .pop-close{padding: 0 15px;}

.footer{background: #4d5a69;padding: 30px 0 40px;color: #fff;}
.footer .inner{}
.footer .ft-tp{display: flex;flex-wrap: wrap;padding-bottom: 40px;border-bottom: 1px solid #a6adb4;}
.footer .ft-tp .ft-logo{flex: 0 0 auto;width: 244px;}
.footer .ft-tp .txt-box{font-size: 16px;font-weight: 200;padding-top: 5px;}
.footer .ft-bt{margin-top: 10px;}
.footer .ft-bt > ul{display: flex;}
.footer .ft-bt > ul > li{position: relative;margin-left: 38px;}
.footer .ft-bt > ul > li:first-child{margin-left:0;}
.footer .ft-bt > ul > li:first-child::before{display:none;}
.footer .ft-bt > ul > li::before{content:"";position:absolute;left: -19px;top:50%;width:1px;height:18px;background:#b6bcc2;transform: translateY(-50%);}
.footer .ft-bt > ul > li a{font-size: 16px;font-weight: 200;}


@media screen and (max-width: 1024px){
    .quick{right:10px;}
    .quick a{width:80px;height:80px;background-size: 20px;background-position: center 10px;border-radius: 20px;padding-top: 35px;font-size: 14px;}
}
@media screen and (max-width: 768px){
    .header .inner::before{left:10px;}
    .header .inner::after{right:10px;}
    .header .h2-tit{font-size: 40px;}
    .container{margin-top: -90px;padding-bottom:50px;}
    .container .list-box{padding-bottom:30px;}
    .container .list-box > ul > li{width: calc((100% - 20px * 1) / 2);padding-top:30px;margin-top:30px;}
    .container .list-box > ul > li:nth-child(3)::before,
    .container .list-box > ul > li:nth-child(4)::before{display:block;}
    .container .list-box > ul > li:nth-last-child(-n+4)::after{bottom: -31px;}
    .paging{margin-top:30px;flex-wrap: wrap;}
}
@media screen and (max-width: 480px){
    .header .inner{height:auto;padding-top: 30px;}
    .header .logo{font-size: 18px;}
    .header .logo img{width:100px;}
    .header .inner::before,
    .header .inner::after{display:none;}
    .header .h2-tit{font-size:30px;margin: 15px 0;}
    .header .search{height:50px;padding-right: 55px;box-shadow: none;}
    .header .search input[type="text"]{font-size: 16px;padding-left: 20px;}
    .header .search .search-btn{right:15px;}

    .container{margin-top: -30px;border-radius: 20px 20px 0 0;}
    .container .list-box > ul > li{width:100%;}
    .container .list-box > ul > li:nth-child(2)::before{display:block;}
    .container .list-box > ul > li > a .tit span,
    .container .list-box > ul > li > a .tit strong{font-size:15px;}

    .paging a{margin:0 10px;}
    .footer .ft-tp{padding-bottom:20px;}
    .footer .ft-bt > ul > li{margin-left:15px;}
    .footer .ft-bt > ul > li::before{left: -8px;}
}



    /* 모달 배경 */
    .modal-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.6);
      justify-content: center;
      align-items: center;
      z-index: 999;
    }

    /* 모달 창 */
    .modal {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      width: 90%;
      max-width: 900px;
      height: 80%;
      display: flex;
      flex-direction: column;
    }

    .modal-header {
	  background: #c9e3fc;
	  color: #263f87; 
	  padding: 12px 16px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}



    .modal-body {
      flex: 1;
      background: #000;
    }

    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }

    /* 제목 + 전체화면 버튼 묶음 */
	.title-wrap {
	  display: flex;
	  align-items: center;
	  gap: 10px; /* 제목과 버튼 사이 간격 */
	}

	.fullscreen-btn {
	  background: #263f87;
	  color: #fff;
	  border: none;
	  border-radius: 6px;
	  padding: 5px 10px;
	  font-size: 13px;
	  font-weight: 600;
	  cursor: pointer;
	  transition: background 0.2s ease;
	}
	.fullscreen-btn:hover {
	  background: #1b2f6d;
	}

	.close-btn {
	  background: transparent;
	  border: none;
	  color: #263f87;
	  font-size: 20px;
	  cursor: pointer;
	  line-height: 1;
	}


	@media screen and (max-width: 480px){
    .modal {
      max-height: 400px;
    }