@charset "utf-8";

/*
 * main.css
 * 메인영역 삽입 추가하시면됩니다. 아래 커스텀진행하세요.
 *
 * 1) main visual
 * 
 */
 
/* 1) main visual */
[data-mainVisual] {position:relative;}
[data-mainVisual] > .inr {height:750rem; }
[data-mainVisual] .visual-list{height:100%; border-radius: 20rem; overflow: hidden;}
/* text */
[data-visual="text"]{position:absolute; top:50%; left:50%; z-index:5; color:var(--white); transform:translate(-50%, -50%);}
[data-visual="text"] small {display: inline-flex; gap: 10rem; line-height: 1; font-size:16rem; font-weight: 400; background: #222; padding: 15rem 30rem; box-sizing: border-box; border-radius: 35rem; }
[data-visual="text"] h2 {font-size:45rem; font-weight:700; margin-top: 40rem;}
[data-visual="text"] p {font-size:18rem; line-height:1.5; margin-top:40rem;}
[data-visual="text"] :is(small, h2, p){opacity:0; transform:translateY(30rem); transition:1s ease 0s; transition-property:opacity, transform; word-break:keep-all;}
/* img */
[data-visual="img"]{overflow:hidden; display:block; height:100%;}
[data-visual="img"] img {object-fit:cover; width:100%; height:100%; transform:scale(1.1); transition:transform 7000ms linear;}

/* active motion */
[data-visual="img"].motion__in img{transform:scale(1);}
[data-visual="text"].motion__in :is(small, h2, p){opacity:1; transform:translateY(0rem);}
[data-visual="text"].motion__in small{transition-delay:0.15s;}
[data-visual="text"].motion__in h2{transition-delay:0.3s;}
[data-visual="text"].motion__in p{transition-delay:0.45s;}

/* control */
[data-mainVisual] .swiper-control {display: flex; justify-content: space-between; position:absolute; top:50%; left:50%; max-width:1670rem; width:100%; color:var(--white); transform:translate(-50%, -50%); z-index: 10;}
[data-mainVisual] button {--sizeWid:50rem; color: var(--white); opacity:0.6; display:flex; justify-content:center; align-items:center; width:var(--sizeWid); height:var(--sizeWid); background-color:transparent; transition:opacity 0.3s ease;}
[data-mainVisual] button[class*="swiper_"] span {font-size:0; }
[data-mainVisual] button[class*="swiper_"] i {font-size:60rem;}
[data-mainVisual] button:hover{opacity:1;}
[data-mainVisual] .swiper-page {--swiper-theme-color:#fff; --swiper-pagination-bullet-inactive-color:#eee; position:absolute; bottom:40rem; left:50%; z-index:10; transform:translateX(-50%); width:auto;}
[data-mainVisual] .swiper-pagination-bullet {margin: 0 5rem;}
[data-mainVisual] .swiper-pagination-bullet-active {width: 24rem; border-radius: 5rem;}

@media (max-width:1080px){
	[data-mainVisual] > .inr {max-height: 600rem;}
	[data-mainVisual] .swiper-control {display: none;}
	[data-visual="text"] h2 {font-size:40rem; margin-top:25rem;}
	[data-visual="text"] p {font-size:16rem; margin-top:25rem;}
}
@media (max-width:768px){
	[data-mainVisual] .swiper-page {bottom: 30rem;}
	[data-visual="text"] small {font-size: 15rem; gap:5rem;}
	[data-visual="text"] h2 {font-size:30rem; margin-top: 25rem;}
	[data-visual="text"] p {font-size:15rem; margin-top:25rem;}
}
@media (max-width:480px){
	[data-mainVisual] > .inr {max-height: 500rem;}
	[data-mainVisual] .visual-list {border-radius: 10rem;}
	[data-visual="text"] small {font-size: 14rem; font-weight: 300; padding: 8rem 14rem;}
	[data-visual="text"] h2 {font-size:25rem;}
	[data-visual="text"] p { margin-top:20rem;}
}

/* 공통 */
.emoji {display: inline-block; font-family: var(--font-emoji);}
.mainTit {margin-bottom: 50rem;}
.mainTit h2 {font-size: 32rem;line-height: 1.4; letter-spacing: -0.01em; font-family: var(--font-emoji);}
.mainTit .emoji {font-size: 30rem;}
.mainTit .more {display: flex; align-items: center; gap: 10rem; color: #888}
.mainTit .more i {font-size: 15rem;}
.tag.new {background: var(--point);}
.tag.coming {background: var(--second);}

/* 교육 둘러보기 */
[data-main="education"] {padding: 130rem 0;}
[data-main="education"] .mainTit {display: flex; justify-content: space-between; align-items: flex-end;}
[data-main="education"] .eduList {display: grid; grid-template-columns: repeat(3,1fr); gap: 50rem 32rem;}
[data-main="education"] .eduList li{border:1rem solid #e5e5e5; border-radius:8rem;}
[data-main="education"] .eduImg {display: block; width: 100%; position: relative; border-radius: 8rem; overflow: hidden;}
[data-main="education"] .eduImg .tag {position: absolute; top: 10rem; left: 10rem; display: block; padding: 10rem 10rem; box-sizing: border-box; border-radius: 3rem; background: var(--white); font-size: var(--font16); letter-spacing: -0.01em; font-weight: 500; border: none;z-index: 10; color: #0599d9;}
[data-main="education"] .eduImg .tag.end {background: #888; color: var(--white);}
[data-main="education"] .eduImg .img {display: block; aspect-ratio:50 / 32;}
[data-main="education"] .eduImg .img img {width: 100%; max-width: 100%; height:100%; object-fit:cover;}
[data-main="education"] .eduImg .eduBtn {display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); opacity: 0; visibility: hidden;}
[data-main="education"] .eduImg .eduBtn span {position: relative; display: flex; align-items: center; justify-content: center; width: 75rem; height: 75rem; border-radius: 50%; background: rgba(255, 255, 255, 0.3);}
[data-main="education"] .eduImg .eduBtn span::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60rem; height: 60rem; background: var(--second);border-radius: 50%; z-index: 5;}
[data-main="education"] .eduImg .eduBtn i { color: var(--white);  z-index: 20;}
[data-main="education"] .eduInfo {margin-top: 30rem; padding:40rem 30rem;}
[data-main="education"] .eduInfo dt {font-size: 20rem; font-weight:700; }
[data-main="education"] .eduInfo dd {font-size: 16rem; line-height: 1.6; color: ##5d5d5d; margin-top: 20rem; display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis;}
[data-main="education"] .eduTag {display: flex; flex-wrap: wrap; gap: 7rem; margin-top: 30rem;}
[data-main="education"] .eduTag span {padding: 10rem 12rem; box-sizing: border-box; border-radius: 2rem; background: #f1f2f4; color: #888; font-size: 14rem;}
@media (max-width:1080px){
	[data-main="education"] .eduInfo{padding:30rem 20rem;}
}

/* 교육 선택이유 */
[data-main="reason"] {padding: 130rem 0; background: #f1f2f4;}
[data-main="reason"] .mainTit h2 {text-align: center;}
[data-main="reason"] .reasonList .box {padding: 55rem 80rem; box-sizing: border-box; border-radius: 15rem; background: var(--white); display: flex; justify-content: space-between; align-items: center; box-shadow: 0 0 25rem rgba(0, 0, 0, 0.06);}
[data-main="reason"] .reasonList .box + .box {margin-top: 40rem;}
[data-main="reason"] .reasonList .img {width: 48%;}
[data-main="reason"] .reasonList .img img {width: 100%; max-width: 100%;}
[data-main="reason"] .reasonList .info {width: 50%;}
[data-main="reason"] .reasonList .info span {display: inline-block; padding: 12rem 18rem; box-sizing: border-box; border-radius: 5rem; background: #ecf4fc; font-size: 15rem; font-weight:600; font-family: var(--font-eng); color: var(--point);}
[data-main="reason"] .reasonList .info h3 {font-size: 30rem; margin: 30rem 0;}
[data-main="reason"] .reasonList .info p {font-size: 17rem; line-height: 1.6; color: #5d5d5d;}

/* 교육현장 둘러보기 */
[data-main="gallery"] {padding: 130rem 0;}
[data-main="gallery"] .mainTit {display: flex; justify-content: space-between; align-items: flex-end;}
[data-main="gallery"] .galleryList {display: grid; grid-template-columns: repeat(3,1fr); gap: 32rem;}
[data-main="gallery"] .galleryList .cont { display: block; width: 100%; height:100%; border-radius: 8rem; overflow: hidden; border: 1rem solid #e5e5e5;}
[data-main="gallery"] .galleryImg {position: relative; width: 100%; height: 270rem; overflow: hidden;}
[data-main="gallery"] .galleryImg img {width: 100%; height: 100%; object-fit: cover;}
[data-main="gallery"] .galleryImg .name {position: absolute;  font-size: 15rem; font-weight:500; padding: 12rem 16rem; border: none; top: 15rem; left: 15rem; border-radius: 35rem; background: var(--white); color: #0599d9; z-index: 10;}
[data-main="gallery"] .galleryInfo {padding: 40rem 30rem; box-sizing: border-box;}
[data-main="gallery"] .galleryImg .name.off {background: #222; color: var(--white);}
[data-main="gallery"] .galleryInfo dl {margin-bottom: 25rem;}
[data-main="gallery"] .galleryInfo dt {font-size: var(--font20); font-weight: 700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 350rem;}
[data-main="gallery"] .galleryInfo dd {line-height: 1.6; color: #5d5d5d; margin-top: 20rem;}
[data-main="gallery"] .galleryInfo .more {display: inline-flex; line-height: 1; align-items: center; justify-content: space-between; width: 125rem; font-size: 14rem; color: #888; padding: 15rem 15rem; box-sizing: border-box; border-radius: 3rem; background: #f1f2f4;}
[data-main="gallery"] .galleryInfo .more i {font-size: 12rem;}

/* 교육생 후기 */
[data-main="review"] {padding: 130rem 0; background: #f1f2f4;}
[data-main="review"] .mainTit h2 {text-align: center;}
[data-main="review"] .reviewBox {position: relative; padding-bottom: 40rem;}
[data-main="review"] .reviewList {}
[data-main="review"] .review-cont {display: block; padding: 50rem 40rem; box-sizing: border-box; background: var(--white); border-radius: 8rem;}
[data-main="review"] .review-cont .name {display: inline-block; font-size: 15rem; font-weight: 600; padding: 10rem 15rem; border-radius: 4rem; color: #8ec33c; background: #f0f7e7;}
[data-main="review"] .review-cont dt{font-size: 20rem; letter-spacing: 0.01em; font-weight: 700; margin-top: 25rem;}
[data-main="review"] .review-cont dd {color: #5d5d5d; margin-top: 20rem; line-height: 1.5;}
[data-main="review"] .review-control div {position: absolute; top: 45%; transform: translateY(-50%); width: 60rem; height: 60rem; border-radius: 50%; background: var(--white); display: flex; align-items: center;z-index: 20;  justify-content: center; cursor: pointer; box-shadow: 0 0 10rem rgba(0, 0, 0, 0.08);}
[data-main="review"] .review-control i {font-size: 15rem;}
[data-main="review"] .review-control div.prev {left:-80rem;}
[data-main="review"] .review-control div.next {right:-80rem;}
[data-main="review"] .review-progress {position: absolute; top: auto; bottom: 0; height: 2rem; background: rgba(0, 0, 0, 0.12);}
[data-main="review"] .swiper-pagination-progressbar-fill {background: var(--black);}

@media (hover: hover) {
	[data-main="education"] .eduImg:hover .eduBtn {visibility: visible; opacity: 1; transition: var(--trans-ani1)}
	[data-main="gallery"] .galleryImg:hover img {transform: scale(1.1); transition: var(--trans-ani2)}
	[data-main="review"] .review-cont:hover {box-shadow: 0 0 15rem rgba(0, 0, 0, 0.05); transition: .5s}
	
}
@media (max-width:1500px){
	[data-main="review"] .review-control div.prev {left:-30rem;}
	[data-main="review"] .review-control div.next {right:-30rem;}
}
@media (max-width:1080px){
	.mainTit h2 {font-size: 30rem;}
	.mainTit .emoji {font-size:25rem;}
	/* education */
	[data-main="education"] {padding: 100rem 0;}
	[data-main="education"] .eduList {gap:40rem 20rem;}
	/* reason */
	[data-main="reason"] {padding: 100rem 0;}
	[data-main="reason"] .reasonList .box {padding: 50rem;}
	[data-main="reason"] .reasonList .info span {padding: 10rem 12rem;}
	[data-main="reason"] .reasonList .info h3 {font-size: 25rem;}
	[data-main="reason"] .reasonList .info p {font-size: 16rem;}
	/* gallery */
	[data-main="gallery"] {padding: 100rem 0;}
	[data-main="gallery"] .galleryList {gap: 20rem;}
	[data-main="gallery"] .galleryInfo {padding: 30rem 20rem;}
	[data-main="gallery"] .galleryInfo dl {margin: 20rem 0;}
	[data-main="gallery"] .galleryInfo dt {max-width: 245rem;}
	/* review */
	[data-main="review"] {padding: 100rem 0;}
}

@media (max-width:767px){
	.mainTit {margin-bottom: 30rem;}
	.mainTit h2 {font-size: 25rem;}
	/* education */
	[data-main="education"] {padding: 70rem 0;}
	[data-main="education"] .eduList { grid-template-columns: repeat(2,1fr); gap: 40rem 20rem;}
	/* reason */
	[data-main="reason"] {padding: 80rem 0;}
	[data-main="reason"] .mainTit {margin-bottom: 50rem;}
	[data-main="reason"] .reasonList {display: grid; grid-template-columns: repeat(2,1fr); gap: 22rem;}
	[data-main="reason"] .reasonList .img {width: 100%;}
	[data-main="reason"] .reasonList .info {width: 100%;}
	[data-main="reason"] .reasonList .info span {font-size: 14rem;}
	[data-main="reason"] .reasonList .info h3 {font-size: 20rem; margin: 20rem 0 20rem;}
	[data-main="reason"] .reasonList .info p {font-size: 15rem;}
	[data-main="reason"] .reasonList .info p br {display: none;}
	[data-main="reason"] .reasonList .box {flex-direction: column-reverse; justify-content: flex-end; gap:35rem; padding:25rem 25rem 30rem 25rem; border-radius: 10rem;}
	[data-main="reason"] .reasonList .box + .box {margin-top: 0;}
	/* gallery */
	[data-main="gallery"] {padding: 70rem 0;}
	[data-main="gallery"] .galleryList {grid-template-columns: repeat(2,1fr);}
	[data-main="gallery"] .galleryList li:nth-child(n+3) {display: none;}
	[data-main="gallery"] .galleryInfo dt {max-width: 290rem;}
	[data-main="gallery"] .galleryImg {height: 250rem;}
	/* review */
	[data-main="review"] {padding: 80rem 0;}
	[data-main="review"] .review-cont {padding: 30rem;}
	[data-main="review"] .review-control div {width: 50rem; height: 50rem;}
	[data-main="review"] .review-control i {font-size: 12rem;}
	[data-main="review"] .reviewBox {padding-bottom: 25rem;}

}

@media (max-width:480px){
	.mainTit h2 {font-size: 20rem;}
	[data-main="education"] {padding: 55rem 0;}
	[data-main="education"] .mainTit{ flex-direction:column; gap: 20rem; align-items: center}
	[data-main="education"] .eduList { grid-template-columns: repeat(1,1fr); gap: 40rem;}
	[data-main="reason"] .reasonList {display: grid; grid-template-columns: repeat(1,1fr); gap: 20rem;}
	[data-main="reason"] .reasonList .box {gap:25rem; padding: 18rem 18rem 25rem 18rem;}
	[data-main="reason"] .reasonList .info h3 {font-size: 18rem;} 
	[data-main="gallery"] .mainTit {flex-direction:column; gap: 20rem; align-items: center;}
	[data-main="gallery"] .galleryList {grid-template-columns: repeat(1,1fr);}
	[data-main="gallery"] .galleryInfo .more {display: none;}
	[data-main="gallery"] .galleryImg {height: 230rem;}
	[data-main="review"] .review-cont dt {font-size: 18rem;}
	[data-main="review"] .review-control div {display: none;}
}