@charset "UTF-8";

.main-content-wrap {
  position: relative;
  margin: 0;
  padding: 0;
}
.main-content-wrap .main-visual {
  position: relative;
  overflow: hidden;
  min-height: 350px;
}
/* .main-content-wrap .main-visual {aspect-ratio: 1920 / 550;} */
@media (min-width: 1280px){
  .main-content-wrap .main-visual {aspect-ratio: 1920 / 550;}
}
.main-content-wrap .main-visual .swiper-slide {
  position: relative;
  overflow: hidden;
  min-height: 370px;
}
.main-content-wrap .main-visual .img-wrap {
  position: relative;
  min-height: 370px;
  height: 100%;
}
.main-content-wrap .main-visual .img-wrap img {
  min-height: 370px;
}
.main-content-wrap .main-visual .img-wrap::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
}
.main-content-wrap .main-visual .text-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  -o-transform:translate(-50%,-50%);
}
.main-content-wrap .main-visual .text-wrap h2 {
  font-family: 'GangwonEduPowerExtraBoldA';
  font-size: var(--size80);
  line-height: 1.1;
  text-align: center;
  color: var(--white);
}
.main-content-wrap .main-visual .text-wrap h2 span {
  font-size: var(--size50);
}
.main-content-wrap .main-visual .text-wrap p {
  font-weight: 500;
  font-size: var(--size24);
  line-height: 1.375;
  color: var(--white);
  margin-top: 1.5625rem;
  text-align: center;
}

.main-content-wrap .main-visual .swiper-controls {display: flex; justify-content: center; align-items: center; z-index: 99; position: absolute; bottom: 30px; left: calc(50% + 532px); transform: translateX(-50%); width: 135px; height: 35px; border-radius: 35px; background-color: rgba(0, 0, 0, 0.3);}
.main-content-wrap .main-visual .swiper-button-play {margin: 0 8px; flex: none; width: 9px; height: 10px; background: url(../img/main/play.png) 50% 50% no-repeat; background-size: 100% auto; display: none;}
.main-content-wrap .main-visual .swiper-button-stop {margin: 0 8px; flex: none; width: 9px; height: 10px; background: url(../img/main/stop.png) 50% 50% no-repeat; background-size: auto 100%; display: block;}
.main-content-wrap .main-visual .swiper-prev,
.main-content-wrap .main-visual .swiper-next {flex: none; display: block; width: 7px; height: 12px;}
.main-content-wrap .main-visual .swiper-prev {background: url(../img/main/prev.png) 50% 50% no-repeat; background-size: 100% auto; }
.main-content-wrap .main-visual .swiper-next {background: url(../img/main/next.png) 50% 50% no-repeat; background-size: 100% auto; }
.main-content-wrap .main-visual .swiper-paging {font-family: 'Lato', sans-serif; flex: none; display: block; width: auto; margin: 0 0 0 22px; font-size: 15px; color: #fff; font-weight: 700;}
.main-content-wrap .main-visual .swiper-paging .swiper-pagination-total {font-weight: 400;}


.main-conetnt01 {
  background: #F6F6F6;
  padding: 3.125rem 0;
}
.main-conetnt01 ul {
  justify-content: center;
  align-items: flex-start;
  gap: 6.625rem;
}
.main-conetnt01 ul li {
  max-width: 100px;
}
.main-conetnt01 ul li a {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: center;
}
.main-conetnt01 ul li .icon-wrap {
  border: 3px solid #fff;
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  transition: all 0.3s;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}
.main-conetnt01 ul li .icon-wrap img {
  max-width: 80%;
}
.main-conetnt01 ul li p {
  font-weight: 500;
  font-size: var(--size17);
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  width: 100%;
  color: var(--black2);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  min-width: max-content; 
  margin-top: 1.25rem;
}
.main-conetnt01 ul li p span {
  font-size: var(--size16);
}
.main-conetnt01 ul li:hover .icon-wrap {
  border-color: var(--subColor);
}
.main-conetnt01 ul li:hover p {
  font-weight: 600;
  color: var(--mainColor);
}
.main-conetnt02 {
  padding: 6.25rem 0;
}
.main-conetnt02 .mcontent-title {
  font-weight: 700;
  font-size: var(--size38);
  line-height: 1;
  text-align: center;
  color: var(--black2);
  margin-bottom: 5rem;
}
.main-conetnt02 .inner {
  align-items: flex-start;
  gap: 5rem;
  justify-content: center;
}
.main-conetnt02 .title-wrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}
.main-conetnt02 .title-wrap > a {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
}
.main-conetnt02 .title-wrap > a::before {
  content: "";
  display: block;
  height: 100%;
  border: 1px solid #222222;
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
}
.main-conetnt02 .title-wrap > a::after {
  content: "";
  display: block;
  width: 100%;
  border: 1px solid #222222;
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
}
.main-conetnt02 .left-box {
  width: calc(52.34375% - 2.5rem);
} 
.main-conetnt02 .left-box .left-title {
  border-bottom: 1px solid var(--mainColor)
}
.main-conetnt02 .left-title ul {
  max-width: 565px;
  width: calc(100% - 4.0625rem);
  gap: 5px;
}
.main-conetnt02 .left-title ul li {
  width: calc(33.33334% - 3.333334px);
}
.main-conetnt02 .left-title ul li a,
.main-conetnt02 .left-title ul li button {
  width: 100%;
  font-weight: 500;
  font-size: var(--size20);
  line-height: 1;
  text-align: center;
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.625rem;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border: 1px solid #ddd;
  margin-bottom: -1px;
  border-bottom: 1px solid rgba(255,255,255,0);
}
.main-conetnt02 .left-title ul li.on a,
.main-conetnt02 .left-title ul li.on button {
  border: 2px solid var(--mainColor);
  border-bottom: 1px solid #fff;
  color: var(--mainColor);
  font-weight: 600;
}
.main-conetnt02 .board-wrap {
  margin-top: 1.875rem;
  position: relative;
  width: 100%;
}
.main-conetnt02 .board-box {
  width: 100%;
  display: none;
}
.main-conetnt02 .board-box.on {
  display: block;
}
.main-conetnt02 .board-top h3 {
  font-weight: 600;
  font-size: var(--size24);
  line-height: 1.416667;
  color: var(--black);
  /* 두 줄까지 보이도록 */
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* 최대 2줄 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  height: calc(1.416667 * var(--size24) * 2);
}
.main-conetnt02 .board-top p {
  margin-top: 6px;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.375;
  color: var(--textBlack02);
}
.main-conetnt02 .board-list {
  background: url(../img/main/mcontent02_line.png) no-repeat left top;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}
.main-conetnt02 .board-list li {}
.main-conetnt02 .board-list li a {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  font-weight: 400;
  color: var(--textBlack02);
  padding-left: 1.5625rem;
  position: relative;
}
.main-conetnt02 .board-list li a::before {
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--textBlack02);
  position: absolute;
  top: 50%;
  left: 11px;
  transform: translateY(-50%);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}
.main-conetnt02 .board-list li h3 {
  font-size: var(--size17);
  line-height: 2;
  width: calc(100% - 6.25rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main-conetnt02 .board-list li p {
  width: 6.25rem;
  font-size: var(--size16);
  line-height: 2.125;
  text-align: right;
}
.main-conetnt02 .right-box {
  padding-top: 0.5rem;
  width: calc(47.65625% - 2.5rem);
}
.main-conetnt02 .right-box .right-title h3 {
  font-weight: 600;
  font-size: var(--size24);
  line-height: 1.416667;
  color: var(--black);
}
.main-conetnt02 .cardNews-wrap {
  margin-top: 1.75rem;
  border: 1px solid #ddd;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  overflow: hidden;
}
.main-conetnt02 .cardNews-wrap a {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  gap: 1.875rem;
  width: 100%;
  padding: 2.5rem;
}
.main-conetnt02 .cardNews-wrap .img-wrap {
  width: 15.625rem;
}
.main-conetnt02 .cardNews-wrap .img-wrap img {}
.main-conetnt02 .cardNews-wrap .img-wrap .noImg {
  background: #DCEFE8;
  padding-bottom: 100%;
}
.main-conetnt02 .cardNews-wrap .text-wrap {
  width: calc(100% - 17.5rem);
  padding-top: 1.25rem;
}
.main-conetnt02 .cardNews-wrap .text-wrap h3 {
  font-weight: 600;
  font-size: var(--size18);
  line-height: 1.33334;
  color: var(--textBlack02);
}
.main-conetnt02 .cardNews-wrap .text-wrap p {
  margin-top: 1.875rem;
  font-weight: 400;
  font-size: var(--size16);
  line-height: 2;
  color: var(--textBlack02);
}