@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

html {overflow-y:scroll}

#wrap {width:100%;}
#container {position:relative; width:100%; max-width:1000px; margin:0 auto;}
.top_tit img {max-width:100%;}

@media all and (max-width:640px){
	#container {position:relative; width:100%; max-width:640px; margin:0 auto;}
}

.top_banner {position:relative; width:100%; display:inline-block; border:1px solid #d1d1d1; margin:2% 0; text-align:center; font-size:0; padding-left:0; padding-right:0;}
.top_banner span {display:inline-block; padding:1% 1%; vertical-align:middle;}
.top_banner span img {/*width:151px; */height:54px; vertical-align:middle;}

.gnb {position:relative; width:100%; display:inline-block; margin-bottom:20px;}
.gnb ul {}

.gnb .menu1 {width:100%; display:inline-block;}

.gnb .menu2 {text-align:center; font-size:0; padding-top:1px;}


.gnb ul li {float:left; background:#969696; height:50px; line-height:46px; border-right:1px solid #fff; letter-spacing:-1px; text-align:center;}
.gnb ul li a {font-size:20px; font-weight:700; color:#fff;}

.quit_box {color:#000;}
.quit_box dl {width:100%; display:inline-block; border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; margin:2% 0 2% 0;}
.quit_box dl dt {background:#e1e7f1; width:15%; height:103px; line-height:98px; float:left; text-align:center; font-size:18px;}
.quit_box dl dd {width:85%; float:left;}
.quit_box dl dd textarea {width:94%; height:50px; margin:2%; padding:1%; border:1px solid #dddddd; font-size:16px;}

.btn {width:100%; text-align:center;}
.btn input {font-family:'Noto Sans KR', sans-serif; font-size:16px; color:#000; letter-spacing:-1px; padding:1% 5% 1% 5%;}

/* 03.¿Â¶óÀκνº */
.both {position:relative; font-size:0; padding-bottom:5%; display:inline-block;}

.both ul {width:100%; display:inline-block;}
.both ul li {width:230px; float:left; position:relative; box-shadow: 0 0 20px #bebebe; margin:9px;}
.both ul li:nth-child( 1 ) {}

.both ul li img {width:230px; height:138px;}
.both ul li span {display:inline-block; width:90%; height:36px; line-height:34px; background:url('/img/bg_both.gif') no-repeat 0 0; color:#fff; font-size:14px; font-weight:700; padding:0 5%;}
.both ul li:nth-child(21) {}


@media all and (max-width:640px){
	.both ul li {width:29%; margin:2%;}
	.both ul li img {width:100%;}
	.both ul li:nth-child(3n) {margin:2% 0 2% 2%;}
	.both ul li:nth-child(4) {margin:2%;}
	.both ul li:nth-child(9) {border:1px solid #fff;}
	.both ul li:nth-child(10) {}
	/*
	.both ul li:nth-child(3n) {margin:2% 0 2% 2%;}
	.both ul li:nth-child(4) {margin:2%;}
	.both ul li:nth-child(10) {margin:2%; border:1px solid red;}
	*/
}

/*
.both p {display:inline-block; box-shadow: 0 0 20px #bebebe; margin:1%; border:1px solid green;}
.both p span.img {border:1px solid red; width:230px; height:138px;}
*/

/*
.loginbox {width:35%; margin:70px auto 0 auto;}
.loginbox label {font-size:18px; color:#000; width:30%; display:inline-block; margin-right:1%;}
.loginbox input {width:65%; height:40px; border:1px solid #adadad; padding:0 2%; margin-bottom:4%; font-size:18px;}
*/

.loginbox {width:40%; margin:70px auto 0 auto;}
.loginbox label {width:41%; font-size:18px; color:#000; display:inline-block; margin-right:1%;}
.loginbox input {width:57%; height:40px; border:1px solid #adadad; padding:0 2%; margin-bottom:4%; font-size:18px;}

@media all and (max-width:640px){
	.top_banner span {display:inline-block; padding:3% 2%;}
	.top_banner span img {/*width:100px; */height:36px;}


	.quit_box dl dd textarea {height:67px; font-size:18px;}

	.btn input {font-size:24px; padding:1.5% 7% 2% 7%;}

	.loginbox {width:60%; margin:5% auto 5% auto;}
	.loginbox label {width:40%;}

	#container {position:relative; width:100%; max-width:640px; margin:0 auto;}

	.gnb ul li {height:60px; line-height:54px;}
	.gnb ul li:nth-child( 4 ) {}



}

.vp_txt {font-size:14px; color:red; text-align:left;}


.add_txt {position:relative; width:100%; font-size:17px; letter-spacing:-1px; font-weight:600; color:#003d74; display:inline-block; margin-top:3%; text-align:center;}


.program {text-align:center;}
.program img {max-width:100%;}

.noticebox {width:90%; margin:4% auto 0 auto;}
.noticebox .tit {font-size:18px; color:#002e87; font-weight:600; margin-bottom:1%;}
.noticebox .cont {font-size:16px; color:#585858; margin-bottom:1%;}

.noticebox table {font-size:16px; text-align:center; border:1px solid #afafaf; margin:1% 0 2% 0;}
.noticebox table th {background:#e4e4e4; border-right:1px solid #afafaf; font-size:0.925em; font-weight:500; color:#000; padding:4px 0 8px 0;}
.noticebox table th.last {border-right:none;}
.noticebox table td {border:1px solid #afafaf; padding:3px 0 5px 0; color:#585858; font-size:0.925em;}

.notice_section {border:1px solid #003d74; margin-bottom:3%;}
.notice_section h3 {background:#003d74; border-bottom:1px solid #003d74; color:#fff; font-size:1.2em; padding:5px 10px;}
.notice_cont {margin:2% 3%; font-size:1.2em; color:#797979; line-height:26px; word-break:keep-all;}
.notice_cont h4 {color:#BB9F8D; font-size:1.2em;}
.notice_cont ul li {background:url('/img/dot.png') no-repeat 4px 11px; padding-left:16px;}
.notice_cont img {vertical-align:middle;}
.txt_red {color:#ec0000;}
.txt_black {color:#000; font-weight:500;}

.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #3d3d3d;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 20px;
  font-weight:500;
  letter-spacing:-1px;
  padding: 10px 20px;
  width: 228px;
  transition: all 0.5s;
  cursor: pointer;
  float:right;
  /*margin-right:1.5%;*/
}

.button2 {
  display: inline-block;
  border-radius: 4px;
  background-color: #3d3d3d;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 25px;
  font-weight:500;
  letter-spacing:-1px;
  padding: 10px 20px;
  width: 228px;
  transition: all 0.5s;
  cursor: pointer;
  margin-right:3%;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}


/*Player */
.vod {position:relative; width:95%; max-width:1000px;}
.p_main {font-family:"±¼¸²"; font-size:13px; color:#494949}
.p_title {font-family:"±¼¸²"; font-size:13px; color:#444444; font-weight:bold}
.p_input {font-family:"±¼¸²"; font-size:13px; color:#494949; background-color:#FFFFFF; border:1px solid #DDDDDD; height:28px}
.p_submit {font-family:"±¼¸²"; font-size:13px; color:#333333; border:1px solid #BFBFBF; cursor:pointer; background-color:#EEEEEE; position:relative}

@media all and (max-width:1000px){
	.wrap {width:100%;}
}

@media all and (max-width:640px){
	.wrap {width:100%;}
}



/*20260320 Å×À̺í Ãß°¡*/
.status-wrap {
      max-width: 1200px;
      margin: 0 auto;
      /* padding: 1px 16px 40px; */	  
      background: #fff;
	  color:#323232;
    }

    .notice {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 18px;
      line-height: 1.5;
      word-break: keep-all;
    }

    .status-box {
      position: relative;
      border: 1px solid #cfcfcf;
      background: #fff;
      overflow: hidden;
    }

    .status-title {
      text-align: center;
      font-size: 22px;
      font-weight: 700;
      padding: 14px 16px 10px;
      border-bottom: 1px solid #d7d7d7;
    }

    .sample-badge {
      position: absolute;
      top: 10px;
      right: 14px;
      background: #d9d9d9;
      color: #333;
      font-size: 18px;
      font-weight: 700;
      padding: 10px 18px;
      min-width: 160px;
      text-align: center;
      overflow: hidden;
    }

    .sample-badge::before,
    .sample-badge::after {
      content: "";
      position: absolute;
      left: 10%;
      width: 80%;
      height: 2px;
      background: #e11;
      top: 50%;
      transform-origin: center;
    }

    .sample-badge::before {
      transform: rotate(16deg);
    }

    .sample-badge::after {
      transform: rotate(-16deg);
    }

    .table-wrap {
      width: 100%;
    }

    .session-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }

    .session-table th,
    .session-table td {
      border-right: 1px solid #d7d7d7;
      border-bottom: 1px solid #d7d7d7;
      text-align: center;
      padding: 14px 8px;
    }

    .session-table th:last-child,
    .session-table td:last-child {
      border-right: none;
    }

    .session-table th {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.5;
      background: #fff;
    }

    .session-time {
      display: block;
      font-size: 16px;
      font-weight: 500;
      color: #444;
    }

    .session-table td {
      font-size: 17px;
      white-space: nowrap;
    }

    .io {
      display: flex;
      justify-content: center;
      gap: 28px;
      flex-wrap: wrap;
    }

    .io span {
      display: inline-block;
    }

    /* ¸ð¹ÙÀÏ */
    @media (max-width: 768px) {
      .wrap {
        padding: 16px 12px 28px;
      }

      .notice {
        font-size: 16px;
        margin-bottom: 14px;
      }

      .status-title {
        font-size: 18px;
        padding: 12px 90px 10px 90px;
      }

      .sample-badge {
        top: 8px;
        right: 8px;
        font-size: 12px;
        min-width: auto;
        padding: 8px 10px;
      }

      .table-wrap {
        display: none;
      }

      .mobile-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
      }

      .session-card {
        border: 1px solid #d7d7d7;
        border-radius: 10px;
        padding: 14px 12px;
        background: #fff;
      }

      .session-card h3 {
        margin: 0 0 6px;
        font-size: 16px;
        text-align: center;
      }

      .session-card .time {
        text-align: center;
        font-size: 14px;
        color: #555;
        margin-bottom: 10px;
      }

      .session-card .row {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        font-size: 15px;
      }
    }

    /* PC¿¡¼­´Â ¸ð¹ÙÀÏ Ä«µå ¼û±è */
    @media (min-width: 769px) {
      .mobile-cards {
        display: none;
      }
    }