/* °øÅë */
div {
    display: block;
}

/* °³º° */
#nWrap {
    width: 100%;
    padding: 0 auto;
    margin: 0 auto;
}

.evtWrap {
    width: 100%;
}

.visual {
    position: relative;
    /* background: url("./image/image01_bg_full_noB.png") no-repeat center; */
}
.visual > .widthAuto {
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
    position: relative;
    
}
.visual > .widthAuto > img {
	display:block;	
    max-width: 2000px;
    width: 100%;
}


.visual_sub {
    /* position: relative; */
    /* background: url("./image/image01_bg_full_noB.png") no-repeat center; */
}
.visual_sub > .widthAuto {
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
    position: relative;
    
}
.visual_sub > .widthAuto > img {
	display:block;	
    max-width: 2000px;
    width: 100%;
}

.button-top {
  /*position: absolute;
  top: 80px;
  right: 50px;
  width: 156px;
  height: auto;
  z-index:999;*/
  position: fixed;
  top: 340px;
  right: 50px;
  transform: translateY(0px);
  width: 156px;
  height: auto;
  z-index: 9999;
}

.button-top img {
  width: 100%;
  height: auto;
  display: block;
}

.button-top2 {
  position: fixed;
  top: 450px;
  right: 50px;
  transform: translateY(0px);
  width: 156px;
  height: auto;
  z-index: 9999;
}

.button-top2 img {
  width: 100%;
  height: auto;
  display: block;  
}

.button-top3 {
  position: fixed;
  top: 560px;
  right: 50px;
  transform: translateY(0px);
  width: 156px;
  height: auto;
  z-index: 9999;
}

.button-top3 img {
  width: 100%;
  height: auto;
  display: block;
}

/* ¸ð¹ÙÀÏ ´ëÀÀ */
@media (max-width: 780px) {
  .button-top {
    top: 290px;
    right: 5px;
    width: 140px;
  }

  .button-top2 {
    top: 390px;
    right: 5px;
    width: 140px;
  }

  .button-top3 {
    top: 490px;
    right: 5px;
    width: 140px;
  }
}

@media (max-width: 420px) {
  .button-top {
    top: 200px;
    right: 5px;
    width: 100px;
  }

  .button-top2 {
    top: 270px;
    right: 5px;
    width: 100px;
  }

  .button-top3 {
    top: 340px;
    right: 5px;
    width: 100px;
  }
}

.bgCon1 {
	position: relative;
    width: 100%;
    background: #FFFFFF no-repeat center top;
}
.bgCon1 > .widthAuto {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}
.bgCon1 > .widthAuto > img {
	display:block;	
    width: 100%;
}


.bgCon1_1 {
    width: 100%;	
    background: #ffffff no-repeat center top;
}
.bgCon1_1 > .widthAuto {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}
.bgCon1_1 > .widthAuto > img {
	display:block;	
    width: 100%;
	max-width: 2000px;
}


.bgCon2 {
	position: relative;
    background: #EFF3F8 no-repeat center top;
}
.bgCon2 > .widthAuto {
    width: 100%;
    max-width: 1120px;
    position: relative;
    margin: 0px auto;
}

.bgCon2 > .widthAuto > img {
	display:block;	
    width: 100%;
}

.bgCon3 {
    background: #EFF3F8 no-repeat center top;
}
.bgCon3 > .widthAuto {
    width: 100%;
    max-width: 1120px;
    position: relative;
    padding-bottom: 20px;
    margin: 0px auto;

}
.bgCon3 > .widthAuto > img {
	display:block;	
    width: 100%;
}


.bgCon4 {
    background: #000510 no-repeat center top;
}
.bgCon4 > .widthAuto {
    width: 100%;
    max-width: 1120px;
    position: relative;
    padding-bottom: 100px;
    margin: 0px auto;
}

.banner{
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1120px;
    background-size: cover;
    background-position: center;
    margin-bottom: 20px;
  }

  .banner img{
    width: 100%;
  }

  .button-container {
    position: absolute;
    margin: 0 auto;
    bottom: 7.5%;
    display: flex;
    left: 50%;
    transform: translateX(-48.5%);
  }


 
  @media (max-width: 780px) {
    .button-container {
      width: 40%;
      position: absolute;
      margin: 0 auto;
      bottom: 7%;
      display: flex;
      left: 50%;
      transform: translateX(-48.5%);
    }

  }

  @media (max-width: 420px) {
    .button-container {
      width: 40%;
      position: absolute;
      margin: 0 auto;
      bottom: 7%;
      display: flex;
      left: 50%;
      transform: translateX(-48.5%);
    }


  }
  
.bgCon5 {
    background: #504F4F no-repeat center top;
}

.bgCon5 > .widthAuto {
    width: 100%;
    max-width: 800px;
    position: relative;
    margin: 0px auto;
}

.bgCon5 > .widthAuto > img {
	display:block;	
    width: 100%;
}



.bgCon12 {
    background: #313131 no-repeat center top;
}
.bgCon12 > .widthAuto {
    width: 100%;
    max-width: 1120px;
    position: relative;
    padding-bottom: 20px;
    margin: 0px auto;

}
.bgCon12 > .widthAuto > img {
	display:block;	
    width: 100%;
}


/* swiper */
.swiper > ul {
    width: 100%;
}

.swiper > ul > li {
    /* height: 500px; */
}

.swiper .no01 {
    /* background: url('./KakaoTalk_Photo_2024-01-16-14-40-35\ 001.png') */
    /* no-repeat center bottom; */
    width: 100%;
}

.swiper-slide > img {
    width: 100%;
}
.swiper .no02 {
    /* background: url('./KakaoTalk_Photo_2024-01-16-14-40-35\ 002.png') */
    /* no-repeat center bottom; */
    width: 100%;
}
.swiper .no03 {
    /* background: url('./KakaoTalk_Photo_2024-01-16-14-40-35\ 003.png') */
    /* no-repeat center bottom; */
    width: 100%;
}

/* swipe button prev */
.swiper > .swiper-button-prev {
    color: black;
    position: absolute;
    top: 50%;
    left: 50px;
}
/* swipe button next */
.swiper > .swiper-button-next {
    color: black;
    position: absolute;
    top: 50%;
    right: 50px;
}


.btnStyleNormal {
	display: block; width: 100%; height: 100%;
	cursor: pointer;
	}








/* 1000ÇÈ¼¿ÀÌÈÄ ÆäÀÌÁö Å©±â º¯°æÀ¸·Î->ÇÊ¿ä¾øÀ½~ ÀÌ¹ÌÁö¿Í °°Àº ·¹º§¿¡ ÀÖÀ¸¸é Àß ¸ÔÀ½. ´Ü, ÀÌ¹ÌÁö Å©±â°¡ ¹Ù²ð¶§´Â ¼öÁ¤ ÇÊ¿äÇÔ */
/*
	.m01_10 {
		position: absolute;
		top: 81%;
		left: 73%;
		transform: translate(-50%, -50%);
		z-index: 10;
		width: 8%;
		height: 6%;
		border: solid 2px #000;
    }

  
@media (max-width: 1000px) {
	.m01_10 {
		position: absolute;	
		top: 81%;
		left: 90%;
		transform: translate(-50%, -50%);
		z-index: 10;
		width: 8%;
		height: 6%;
		border: solid 2px #000;
    }

  }
*/
	.m01_01 {
		position: absolute;
		top: 82%;
		left: 26%;
		transform: translate(-50%, -50%);
		z-index: 10;
		width: 4%;
		height: 6%;		
	}

@media (max-width: 1000px) {
	.m01_01 {
		position: absolute;
		top: 82%;
		left: 6%;
		transform: translate(-50%, -50%);
		z-index: 10;
		width: 6%;
		height: 6%;
    }

  }


	.m01_02 {
		position: absolute;
		top: 82%;
		left: 30%;
		transform: translate(-50%, -50%);
		z-index: 10;
		width: 4%;
		height: 6%;
	}

@media (max-width: 1000px) {
	.m01_02 {
		position: absolute;
		top: 82%;
		left: 13.5%;
		transform: translate(-50%, -50%);
		z-index: 10;
		width: 5%;
		height: 6%;	
    }

  }

  	.m01_03 {
		position: absolute;
		 top: 82%;
		 left: 34%;
		 transform: translate(-50%, -50%);
		 z-index: 10;
		 width: 3%;
		 height: 6%;			
	}

@media (max-width: 1000px) {
	.m01_03 {
		position: absolute;
		 top: 82%;
		 left: 21%;
		 transform: translate(-50%, -50%);
		 z-index: 10;
		 width: 5%;
		 height: 6%;			
    }

  }

  	.m01_04 {
		position: absolute;
		 top: 82%;
		 left: 37.5%;
		 transform: translate(-50%, -50%);
		 z-index: 10;
		 width: 3%;
		 height: 6%;
	}

@media (max-width: 1000px) {
	.m01_04 {
		position: absolute;
		 top: 82%;
		 left: 27.5%;
		 transform: translate(-50%, -50%);
		 z-index: 10;
		 width: 4%;
		 height: 6%;	
    }

  }

	.m01_05 {
		position: absolute;
		 top: 82%;
		 left: 42%;
		 transform: translate(-50%, -50%);
		 z-index: 10;
		 width: 4%;
		 height: 6%;	
	}

@media (max-width: 1000px) {
	.m01_05 {
		position: absolute;
		 top: 82%;
		 left: 36%;
		 transform: translate(-50%, -50%);
		 z-index: 10;
		 width: 8%;
		 height: 6%;	
    }

  }

	.m01_06 {
		position: absolute;
		 top: 82%;
		 left: 47%;
		 transform: translate(-50%, -50%);
		 z-index: 10;
		 width: 3%;
		 height: 6%;					
	}

@media (max-width: 1000px) {
	.m01_06 {
		position: absolute;
		 top: 82%;
		 left: 44.5%;
		 transform: translate(-50%, -50%);
		 z-index: 10;
		 width: 4%;
		 height: 6%;		
    }

  }

	.m01_07 {
		position: absolute;
		 top: 82%;
		 left: 52.5%;
		 transform: translate(-50%, -50%);
		 z-index: 10;
		 width: 6%;
		 height: 6%;
	}

@media (max-width: 1000px) {
	.m01_07 {
		position: absolute;
		 top: 82%;
		 left: 54%;
		 transform: translate(-50%, -50%);
		 z-index: 10;
		 width: 10%;
		 height: 6%;
    }

  }

	.m01_08 {
		position: absolute;
		 top: 82%;
		 left: 59.5%;
		 transform: translate(-50%, -50%);
		 z-index: 10;
		 width: 5%;
		 height: 6%;	
	}

@media (max-width: 1000px) {
	.m01_08 {
		position: absolute;
		 top: 82%;
		 left: 67%;
		 transform: translate(-50%, -50%);
		 z-index: 10;
		 width: 8%;
		 height: 6%;		
    }

  }

	.m01_09 {
		position: absolute;
		 top: 82%;
		 left: 65.5%;
		 transform: translate(-50%, -50%);
		 z-index: 10;
		 width: 5%;
		 height: 6%;	
	}

@media (max-width: 1000px) {
	.m01_09 {
		position: absolute;
		 top: 82%;
		 left: 77%;
		 transform: translate(-50%, -50%);
		 z-index: 10;
		 width: 8%;
		 height: 6%;															
		
    }

  }

	.m01_10 {
		position: absolute;
		top: 82%;
		left: 72.5%;
		transform: translate(-50%, -50%);
		z-index: 10;
		width: 7%;
		height: 6%;			
	}

@media (max-width: 1000px) {
	.m01_10 {
		position: absolute;
		top: 82%;
		left: 90.5%;
		transform: translate(-50%, -50%);
		z-index: 10;
		width: 12%;
		height: 6%;
    }

  }




/* ÅÇ±¸Á¶ ¹Ú½º */
.evtConExam {
	width: 100%;
	padding: 40px 0 40px 0;
	background-color: #F5F5F5;
}
.exam-wrap{
    display:flex;
    gap:20px;
	max-width: 1120px;
	margin: 0 auto;
	padding: 20px 0 0px 0;
	background-color: #F5F5F5;
}

.exam-box{	
    background:#fff;
    border-radius:6px;
    overflow:hidden;
    /*box-shadow:0 2px 4px rgba(0,0,0,0.1);*/
    /*min-width:200px;*/
	border: solid 1px #303247;
}

.exam-title{
    color:#fff;
    font-weight:bold;
    text-align:center;
    padding:12px 20px;
}

.exam-tabs{
    display:flex;    
    align-items:center;
	justify-content:center;  
    height:50px;
}

.exam-tabs button{
    background:none;
    border:none;
    flex:0 0 auto;
    padding:10px 16px;
    font-size:14px;
    cursor:pointer;
    border-radius:6px;
    position:relative;
}

@media (max-width: 768px){

    .exam-wrap{
        flex-direction:column;   /* ¼¼·Î Á¤·Ä */
        gap:10px;
        padding:15px;
    }

    .exam-box{
        width:100%;
    }

	.exam-tabs{
        flex-wrap:wrap;
        height:auto;
        padding:8px 0;
    }

	.exam-tabs button{
        padding:8px 12px;
        font-size:13px;
    }

}

/* | ±¸ºÐ¼± */
.exam-tabs button + button::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:12px;   /* ¡ç ¿©±â¼­ ³ôÀÌ Á¶Àý */
    background:#ccc;
}

/* hover È¿°ú */
.exam-tabs button:hover{
    background: #6A71C4;
	color: #fff;
}

/* ¼±ÅÃµÈ »óÅÂ */
.exam-tabs button.active{
    /*font-weight:600;
    color:#000;
	*/
	background: #6A71C4;
	color: #fff;
}


/* ÄÃ·¯ */
.green .exam-title{
    background:#1f9d77;
	text-align: center;
	width: 160px;
}

.blue .exam-title{
    background:#1e88c8;
	text-align: center;
	width: 470px;
}

.red .exam-title{
    background:#ff3b3b;
	text-align: center;
	width: 390px;
}


@media (max-width:768px){

    .green .exam-title,
    .blue .exam-title,
    .red .exam-title{
        width:100%;
    }

}
