@charset "utf-8";
@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('https://webfontworld.github.io/SCoreDream/SCoreDream.css');

* { margin:0; padding:0;  }
body { font-family: Noto Sans KR; overflow-x: hidden; }
body::-webkit-scrollbar { width: 8px; }
body::-webkit-scrollbar-thumb { background-color: #bfbfbf; }
body::-webkit-scrollbar-track { background-color: #dcdcdc; }
li { list-style-type: none; }
a { text-decoration: none; }
img { border: 0; vertical-align: top; margin: 0; padding: 0; }

.wrap { background: url('../images/bodyBg.png') 0 0 repeat-x; }
.secImg { width: 100%; max-width: 1280px; }
.section2 { padding-top:12px; padding-left: 142px; padding-right: 142px; padding-bottom:77px; display:inline-block; }
.section2_1 { display:none; padding-top: 12px; padding-bottom:77px; }
.standard2022 { width: 100%; max-width: 996px; height: 40px; line-height: 40px; margin-top: 36px; float: left; background-color: #eff3ff; text-align: center; clear: both; font-size: 15px; letter-spacing: -0.75px; color: #707070; }
.arrowLeft { width: 52px; height: 301px; float: left; background: url('../images/arrow_left.png') 50% 50% no-repeat; }
.arrowRight { width: 52px; height: 301px; float: left; background: url('../images/arrow_right.png') 50% 50% no-repeat;}
.arrowDownLeft { width:100%; height:63px; clear: both; background: url('../images/arrow_down.png') 10% 50% no-repeat; }
.arrowDownRight { width:100%; height:63px; clear: both; background: url('../images/arrow_down.png') 90% 50% no-repeat; }

/* 오버 반전 효과 Class */
.hoverBg { width: 210px; height: 301px; border: 1px solid #f1f1f1; border-radius: 5px; box-sizing: border-box; position: relative; float:left; padding-top:20px; padding-left:29px; padding-right:20px; }
.hoverBg span { z-index: 100; position: relative; transition-duration: .6s; }
.hoverBg:hover span { color: #fff; }
.hoverBg p { z-index: 100; position: relative; transition-duration: .6s; }
.hoverBg:hover p { color: #fff; }
.hoverBg li { z-index: 100; position: relative; transition-duration: .6s; line-height: 1.46; }
.hoverBg:hover li { color: #fff; }
.hoverBg:hover li.green { color: #fff; }

.hoverBg .step { font-family: SCoreDream; font-size: 10px; font-weight: bold; color: #707070; margin-top: 19px; }
.hoverBg .title { font-family: Noto Sans KR; font-size: 15px; font-weight: bold; color: #707070; border-bottom:1px solid #e8e8e8; margin-top: 2px; padding-bottom:6.5px; }
.hoverBg .date { font-family: SCoreDream; font-size: 13px; font-weight: bold; color: #7891ea; background: url('../images/icon_calendar.png') 0 -1px no-repeat; padding-left: 22px; margin-top:11.5px; }
.hoverBg ul { margin-top:8.5px }
.hoverBg li { font-family: Noto Sans KR; font-size: 13px; color: #707070; letter-spacing: -0.9px; }
.hoverBg li.green { color: #2dc172; }

.hoverBg:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-radius:5px;
}

.hoverBg.hoverEnter:before {
  animation: hoverEnter .3s ease-out forwards; 
}

.hoverBg.hoverOut:before {
  animation: hoverOut .3s ease-out forwards;
}

@keyframes hoverEnter {
  from {
    background-color: #ffffff; 
    height: 0;
  }
  to {
    background-color: #7891ea; 
    height: 100%;
  }
}

@keyframes hoverOut {
  from {
    background-color: #7891ea; 
    height: 100%;
  }
  to {
    background-color: #ffffff; 
    height: 0;
  }
}

@media screen and (max-width:1290px ){
	.wrap { background: none; }
	
	.section2 { display:none; }
	.section2_1 { display:inline-block; padding-left:10%;  padding-right:10%; }
	.section2_1 .hoverBg { width:calc(91% / 4 ); margin-bottom:20px; margin-right: 3%; }
	.section2_1 .hoverBg:nth-child(4n) { margin-right: 0; }
	.section2_1 .standard2022 { margin-top: 26px; }
}

@media screen and (max-width:1156px ){
	.section2_1 .hoverBg { width:calc(94% / 3 ); height:312px !important; margin-bottom:20px; margin-right: 3%; }
	.section2_1 .hoverBg:nth-child(4n) {margin-right: 3%; }
	.section2_1 .hoverBg:nth-child(3n) { margin-right: 0; }
}

@media screen and (max-width:868px ){
	.section2_1 .hoverBg { width:calc(97% / 2 ); margin-bottom:20px; margin-right: 3%; }
	.section2_1 .hoverBg:nth-child(3n) {margin-right: 3%; }
	.section2_1 .hoverBg:nth-child(2n) { margin-right: 0; }
}
@media screen and (max-width:650px ){
	.section2_1 { padding-left:20px;  padding-right:20px; }
	.standard2022 { font-size: 65%; letter-spacing: -1.2px; }
	.secImg { width: 120%; max-width: 1280px; margin-left: -10%; }
}

@media screen and (max-width:500px ){
	.hoverBg { padding-left:10px; padding-right:10px; }
	.hoverBg .title { font-size: 13px; }
	.hoverBg .date { font-size: 12px; }
	.hoverBg li { font-size: 12px; letter-spacing:-1.6px;}
}