div.main_wrapper
{
	position: relative;
	top: 0;
	left: 0;
}

div.main_wrapper div#Content_01 h2
{
	display: inline-block;
	position: relative;
	height: 166px;
	background: #1485b9;
}

div.main_wrapper div#Content_02 h2
{
	display: inline-block;
	position: relative;
	height: 166px;
	background: #6ea032;
}

div.main_wrapper div#Content_01,
div.main_wrapper div#Content_02
{
	position: relative;
	top: 0;
	left: 0;
}

div.main_wrapper div#Content_01
{
	height: 195px;
	width: 900px;
	margin: 45px 0 0 0;
}

div.main_wrapper div#Content_01 dl.course_nav
{
	position: absolute;
	bottom: 29px;
	left: 124px;
}

div.main_wrapper div#Content_01 dl.course_nav dd
{
	float: left;
}

div.main_wrapper div#Content_01 div#Carousel_02,
div.main_wrapper div#Content_01 div#Carousel_02 div
{
	height: 195px;
	width: 696px;
}
div.main_wrapper div#Content_01 div#Carousel_02
{
	background: url(/ko/images/open_content/main_page/bg_content_01.jpg) 216px 0 no-repeat;
	background-color: #FFFFFF;
	position: absolute;
	top: 0;
	left: 204px;
	z-index: 2;
}

div.main_wrapper div#Content_01 div#Carousel_02 div
{
	/*background-color: #FFFFFF;*/
	position: relative;
	top: 0;
	left: 0;
}

div.main_wrapper div#Content_01 div#Carousel_02 h3
{
	position: absolute;
	top: 20px;
	left: 20px;
}

div.main_wrapper div#Content_01 div#Carousel_02 div p.video_link
{
	position: absolute;
	top: 108px;
	left: 25px;
}

div.main_wrapper div#Content_01 div#Carousel_02 div p.comment
{
	position: absolute;
	top: 85px;
	left: 20px;
}

div.main_wrapper div#Content_01 div#Carousel_02 div dl.course
{
	color: #80868B;
	width: 300px;
	position: absolute;
	top: 115px;
	left: 20px;
}

div.main_wrapper div#Content_01 div#Carousel_02 div dl.course dd
{
	line-height: 16px;
	font-size: 11px;
}

div.main_wrapper div#Content_01 div#Carousel_02 div dl.course dd span.course_start
{
	color: #1485B9;
}

div.main_wrapper div#Content_01 div#Carousel_02 div dl.course dd span.course_end
{
	color: #6EA032;
}

div.main_wrapper div#Content_01 div#Carousel_02 div dl.course_length
{
	background-color: #F2F5F7;
	height: 30px;
	width: 348px;
	position: absolute;
	bottom: 0;
	left: 0;
}

div.main_wrapper div#Content_01 div#Carousel_02 div dl.course_length dd
{
	color: #56585A;
	font-size: 16px;
	font-style: italic;
	font-family: Georgia;
	padding: 5px 0 0 20px;
}

div.main_wrapper div#Content_01 div#Carousel_02 div dl.course_length dd.detail_link
{
	position: absolute;
	right: 20px;
	bottom: 5px;
}

div.main_wrapper div#Content_01 div#Carousel_02 div dl.course_length dd.detail_link a
{
	color: #2E2C29;
	font-size: 13px;
	font-style: normal;
	font-family: 'Noto Sans KR', sans-serif;
	letter-spacing: -0.04em;
}

div.main_wrapper div#Content_01 div#Carousel_02 div dl.course_length dd.detail_link a:hover
{
	color: #1485B9;
}

div.main_wrapper div#Content_01 div#Carousel_02 div video,
div.main_wrapper div#Content_01 div#Carousel_02 div object
{
	position: absolute;
	top: 0;
	left: 348px;
	width: auto;
	height: 197px;
	background: #F7F5E8;
}

div.main_wrapper div#Content_02
{
	height: 1061px;
	margin: 45px 0 0 0;
}

div.main_wrapper div#Content_02 div#map
{
	position: absolute;
	left: 204px;
	top: 0;
}

div.main_wrapper div#Content_02 div#map div
{
	position: absolute;
	width: 258px;
}

div.main_wrapper div#Content_02 div#map div#Map_course_01
{
	top: 140px;
	left: 35px;
}

div.main_wrapper div#Content_02 div#map div#Map_course_02
{
	top: 443px;
	left: 60px;
}

div.main_wrapper div#Content_02 div#map div#Map_course_03
{
	top: 650px;
	right: 43px;
}

div.main_wrapper div#Content_02 div#map div#Map_course_04
{
	top: 860px;
	right: 55px;
}

div.main_wrapper div#Content_02 div#map div h3
{
	margin-bottom: 10px;
}

div.main_wrapper div#Content_02 div#map div#Map_course_03 h3,
div.main_wrapper div#Content_02 div#map div#Map_course_04 h3
{
	text-align: right;
}

div.main_wrapper div#Content_02 div#map div ul
{
	padding: 15px;

	display: none;
}

div.main_wrapper div#Content_02 div#map div#Map_course_01 ul
{
	border: 1px solid #C3161C;
	background-color: #FFF4F4;
}

div.main_wrapper div#Content_02 div#map div#Map_course_02 ul
{
	border: 1px solid #21468F;
	background-color: #EDF3FF;
}

div.main_wrapper div#Content_02 div#map div#Map_course_03 ul
{
	border: 1px solid #CC359A;
	background-color: #FFECF9;
}

div.main_wrapper div#Content_02 div#map div#Map_course_04 ul
{
	border: 1px solid #19ACC3;
	background-color: #EEFDFF;
}

div.main_wrapper div#Content_02 div#map div ul li
{
	line-height: 17px;
	font-size: 11px;
}

div.main_wrapper div#Content_02 div#map div ul li.course_distance
{
	padding-bottom: 9px;
}

div.main_wrapper div#Content_02 div#map div ul li span
{
	display: block;
	font-weight: bold;
}

div.main_wrapper div#Content_02 div#map div#Map_course_01 ul li span
{
	color: #C3161C;
}

div.main_wrapper div#Content_02 div#map div#Map_course_02 ul li span
{
	color: #21468F;
}

div.main_wrapper div#Content_02 div#map div#Map_course_03 ul li span
{
	color: #CC359A;
}

div.main_wrapper div#Content_02 div#map div#Map_course_04 ul li span
{
	color: #19ACC3;
}

div.main_wrapper div#Content_02 div.note
{
	position: absolute;
	right: 0;
	top :0;
	width: 348px;
	height: 1061px;
}


/* 2024.12.20 메인 팝업 추가 start */

/* animation */
@keyframes modalFadeIn {
  0% {
    left: 100%;
    opacity: 0;
  }
  10% {
    left: 0;
    opacity: 0;
  }
  100% {
    left: 0;
    opacity: 1;
  }
}
@keyframes modalFadeOut {
  0% {
    left: 0;
    opacity: 1;
  }
  90% {
    left: 0;
    opacity: 0;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    z-index: 0;
    visibility: hidden;
    display: none;
  }
}
@keyframes dropdownSlideUp {
  0% {
    transform: translate3d(calc(var(--center) * 1%), calc(var(--tailH) * 1px + 0%), 0) rotateX(0deg);
    opacity: 1;
    visibility: visible;
  }
  90% {
    transform: translate3d(calc(var(--center) * 1%), 25%, 0) rotateX(0deg);
    opacity: 0;
    visibility: visible;
  }
  100% {
    transform: translate3d(calc(var(--center) * 1%), 25%, 0) rotateX(0deg);
    opacity: 0;
    visibility: hidden;
    display: none;
  }
}
@keyframes dropdownSlideDown {
  0% {
    transform: translate3d(calc(var(--center) * 1%), 25%, 0) rotateX(0deg);
    opacity: 0;
    visibility: hidden;
    display: flex;
  }
  10% {
    transform: translate3d(calc(var(--center) * 1%), 25%, 0) rotateX(0deg);
    opacity: 1;
    visibility: visible;
  }
  100% {
    transform: translate3d(calc(var(--center) * 1%), calc(var(--tailH) * 1px + 0%), 0) rotateX(0deg);
    opacity: 1;
    visibility: visible;
  }
}
@keyframes dropdownFadeOff {
  0% {
    opacity: 1;
    visibility: visible;
  }
  90% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    display: none;
  }
}
@keyframes dropdownFadeOn {
  0% {
    opacity: 0;
    visibility: hidden;
    display: flex;
  }
  10% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes moveRightToLeft {
  0% {
    left: 1582px;
    opacity: 1;
  }
  10% {
    left: 0;
    opacity: 1;
  }
  98% {
    left: -1582px;
    opacity: 1;
  }
  99% {
    left: -1582px;
    opacity: 0;
  }
  100% {
    left: 1582px;
    opacity: 0;
  }
}
@keyframes moveBgX {
  0% {
    background-position-x: 1582px;
  }
  100% {
    background-position-x: 0;
  }
}
@keyframes moveUpDown {
  0% {
    margin-up: 0;
    margin-bottom: 0;
  }
  50% {
    margin-top: 10rem;
    margin-bottom: -10rem;
  }
  100% {
    margin-up: 0;
    margin-bottom: 0;
  }
}
@keyframes rotate360 {
  100% {
    transform: rotate(360deg);
  }
}
/* //animation */
/* 반응형 sample start */
/* 반응형 sample end */
/* 모달 공통 */
.modal {
  position: relative;
  background: #fff;
  z-index: 99;
}
.modal .btn-close {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
}
.modal .btn-close > img {
  width: 100%;
  height: 100%;
  max-width: 26px;
  aspect-ratio: 1/1;
}
@media only screen and (max-width: 767px) {
  .modal .btn-close > img {
    max-width: 20px;
  }
}
.modals-container {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
}
.modals-container > .modal-wrap {
  position: relative;
  left: unset;
  top: unset;
  right: unset;
  bottom: unset;
  display: none;
}
.modals-container > .modal-wrap.active {
  display: block;
}
.modal-wrap {
  position: fixed;
  left: 100%;
  top: 0;
  display: block;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  overflow-y: auto;
  background-color: #00000099;
  z-index: 10010;
  transition: all 0.3s;
}
.modal-wrap.active {
  left: 0;
  animation: modalFadeIn 0.3s ease both;
  -webkit-animation: modalFadeIn 0.3s ease both;
  -moz-animation: modalFadeIn 0.3s ease;
  animation-play-state: running;
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
}
.modal-wrap.close {
  animation: modalFadeOut 0.3s ease both;
  -webkit-animation: modalFadeOut 0.3s ease both;
  -moz-animation: modalFadeOut 0.3s ease;
  animation-play-state: running;
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
}
.modal-top {
  position: relative;
}
.modal-main {
  position: relative;
}
.modal-popup {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: transparent;
}
.modal-popup .btn-close {
  position: relative;
  right: unset;
  top: unset;
  width: 50px;
}
.modal-popup .btn-close > img {
  max-width: unset;
}
.modal-popup .btn-hide {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.modal-popup .btn-hide .icon {
  width: 22px;
  aspect-ratio: 1/1;
  border: 1px solid #fff;
  border-radius: 3px;
}
.modal-popup-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-popup-wrap .modal-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding-bottom: 30px;
}

.swiper-popup {
  width: 1230px;
}
.swiper-popup:has(.swiper-slide:nth-child(2):last-child) {
  width: 829px;
}
.swiper-popup:has(.swiper-slide:nth-child(1):last-child) {
  width: 414px;
}
.swiper-popup .swiper-slide {
  width: auto;
}
.swiper-popup-img {
  width: 400px;
  aspect-ratio: 400/555;
  overflow: auto;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
}
.swiper-popup-img::-webkit-scrollbar {
  display: none;
}
.swiper-popup-img > img {
  width: 100%;
}
.swiper-popup-btn::after {
  display: none;
}
.swiper-popup-btn.swiper-btn-prev {
  left: -60px;
}
.swiper-popup-btn.swiper-btn-next {
  right: -60px;
}

/* //모달 공통 */


/* 2024.12.20 메인 팝업 추가 end */