@charset "utf-8";

/*mainBanner*/
@keyframes circle {
	0% { transform:translate(-50%,-50%) rotateY(0); }
	25% { transform:translate(-50%,-50%) rotateY(0); }
	50% { transform:translate(-50%,-50%) rotateY(180deg); }
	75% { transform:translate(-50%,-50%) rotateY(180deg); }
	100% { transform:translate(-50%,-50%) rotateY(360deg); }
}
#container{
	display: block; width:100%; overflow: hidden;
}
.section01 {
	background:none;
}
.section01 .section-inner {
	display:flex; flex-flow:row wrap; max-width:1920px; padding:0;
}
.main-visual {
	width:100%; max-height:100vh; position:relative; overflow:hidden;
}
.controls_bx {
	display:flex; flex-direction:row; justify-content:flex-end; align-items:center; position:absolute; bottom:40px; right:5%; z-index:8;  background: rgba(32, 49, 68, 0.6); padding: 6px 15px; border-radius: 50px; font-family: Arial;
}
.mainimg-slider .swiper-button-prev,
.mainimg-slider .swiper-button-next {
	position:static; margin:0; height:36px; width:36px; background:none; border:1px solid #fff; border-radius:18px; color:#fff; font-weight:700; font-size: 2rem; line-height:1; place-items: center; display:inline-grid; opacity: 1;
}
.mainimg-slider .swiper-button-next {
	margin:0 10px;
}
.mainimg-slider .swiper-button-prev > img {
	transform:rotate(180deg);
}
.mainimg-slider .swiper-button-prev > img,
.mainimg-slider .swiper-button-next > img {
	display:block; width:14px;
}
.mainimg-slider .swiper-pagenation {
    font-size: clamp(2rem, 2.35vw, 3rem); line-height:1em; width:auto; margin:0 10px 0 0; font-weight:700; color:#fff;
}
.mainimg-slider .swiper-pagenation > .current {
	padding-right:4px;
}
.mainimg-slider .swiper-pagenation > .all {
	padding-left:4px;
}
.btn_pause {
	width:36px; height:36px; border-radius:18px; border:1px solid #fff; background-color:transparent; cursor: pointer; color:#fff; display:inline-grid; place-items: center; font-size:2rem; line-height:1; background-image:url(/humanframe/theme/hahacampus/assets/img/main/ico_stop.png); background-repeat: no-repeat; background-size:auto; background-position:center; text-indent: -9999px;
}
.btn_pause.on {
	background-image:url(/humanframe/theme/hahacampus/assets/img/main/ico_play.png); 
}
/* .btn_pause.on {
	background:url(../img/main/btn_play.svg)no-repeat center center / 16px, #555;
} */
.mainimg-slider .swiper-slide {
	background-size:cover; height:auto;
}
.mainimg-slider .swiper-slide img{
	width:100%; height:100%; object-fit: cover; object-position: center;
}
.mainimg-slider .swiper-slide:nth-child(1) img{
	object-position: center top;
}
.mainimg-slider .swiper-slide:nth-child(2) img{
	object-position: center 70%;
}
.slideDot{
	display: flex; flex-direction: row; justify-content: flex-start; align-items:center; gap:6px; margin-right:10px;
}
.slideDot > .swiper-pagination-bullet{
	opacity: 1; width:18px; height:18px; border:2px solid rgba(255,255,255,0.92); background:rgba(255,255,255,0.2); box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.slideDot > .swiper-pagination-bullet-active{
	background:#fff; border-color::#fff;
}
/*mainBanner*/


/*Quick Section*/
.section.home-quick {
	margin:70px auto 90px; width:100%; max-width:1600px;
}
.quick-grid {
	display:flex; flex-direction:row; justify-content:flex-start; align-items:stretch; width:100%; flex-wrap:wrap; gap:28px 40px;
}

@keyframes fadeInUp {
	to { opacity:1; transform:translateY(0); }
}

.quick-tile {
	display:block; width:calc((100% - 80px) / 3); opacity:0; transform:translateY(30px); transition:opacity 0.5s ease, transform 0.5s ease;
}
.quick-grid .quick-tile:nth-child(1) { transition-delay:0.1s; }
.quick-grid .quick-tile:nth-child(2) { transition-delay:0.2s; }
.quick-grid .quick-tile:nth-child(3) { transition-delay:0.3s; }
.quick-grid .quick-tile:nth-child(4) { transition-delay:0.1s; }
.quick-grid .quick-tile:nth-child(5) { transition-delay:0.2s; }
.quick-grid .quick-tile:nth-child(6) { transition-delay:0.3s; }
.quick-tile.animated {
	opacity:1; transform:translateY(0);
}
.quick-tile > a {
	display:flex; flex-direction:column; justify-content:flex-start; gap:32px 0; height:100%; align-items:flex-start; width:100%; padding:45px 46px 48px 48px; background:#f6f5f5; border-radius:20px; position:relative; border:1px solid #f6f5f5; transition:0.2s;
}
.quick-tile > a::after {
	display:block; content:''; width:21px; height:21px; background-image:url(/humanframe/theme/hahacampus/assets/img/common/iconLink.png); background-size:100%; background-position:center; background-repeat:no-repeat; position:absolute; top:36px; right:35px;
}
.quick-tile-label {
	font-size:2.6rem; font-weight:600; line-height:1em; transition:0.2s;
}
.quick-tile-desc {
	color:#222; font-size:2rem; font-weight:500;
}
.quick-tile > a:hover {
	background:#fff; border:1px solid #e4007f; box-shadow:1px 1px 10px rgba(0,0,0,0.07); transition:0.2s;
}
.quick-tile > a:hover::after {
	background-image:url(/humanframe/theme/hahacampus/assets/img/common/iconLinkPk.png);
}
.quick-tile > a:hover .quick-tile-label {
	color:#df3c6e; transition:0.2s;
}
.notice-list > li {
	transition-delay:0.1s;
}

@media all and (max-width:1728px) {
	.section.home-quick {
		padding:0 64px;
	}
}
@media all and (max-width:1540px) {
	.mainimg-slider .swiper-slide{
		height:auto;
	}
}
@media all and (max-width:1280px) {
	.section.home-quick {
		padding:0 32px; margin:35px auto 45px;
	}
}
@media all and (max-width:1024px) {
	.quick-grid {
		gap:28px;
	}
	.quick-tile {
		width:calc((100% - 28px) / 2);
	}
	.quick-grid .quick-tile:nth-child(1) { transition-delay:0.1s; }
	.quick-grid .quick-tile:nth-child(2) { transition-delay:0.2s; }
	.quick-grid .quick-tile:nth-child(3) { transition-delay:0.1s; }
	.quick-grid .quick-tile:nth-child(4) { transition-delay:0.2s; }
	.quick-grid .quick-tile:nth-child(5) { transition-delay:0.1s; }
	.quick-grid .quick-tile:nth-child(6) { transition-delay:0.2s; }
	.quick-tile > a {
		padding:24px;
	}
	.quick-tile > a::after {
		top:24px; right:24px;
	}
}
@media all and (max-width:480px) {
	.section.home-quick {
		padding:0 15px; margin:30px auto 40px;
	}
	.quick-grid {
		gap:12px;
	}
	.quick-tile {
		width:100%;
	}
	.quick-grid .quick-tile:nth-child(1) { transition-delay:0.1s; }
	.quick-grid .quick-tile:nth-child(2) { transition-delay:0.1s; }
	.quick-grid .quick-tile:nth-child(3) { transition-delay:0.1s; }
	.quick-grid .quick-tile:nth-child(4) { transition-delay:0.1s; }
	.quick-grid .quick-tile:nth-child(5) { transition-delay:0.1s; }
	.quick-grid .quick-tile:nth-child(6) { transition-delay:0.1s; }
	.quick-tile > a {
		padding:24px 32px; gap:13px 0;
	}
	.quick-tile > a::after {
		width:17px; height:17px;
	}
}
/*Quick Section*/


/*Board Section*/
.section.home-bottom {
	margin:0 auto 90px; width:100%; max-width:1600px;
}
.container.bottom-split {
	display:flex; flex-direction:row; justify-content:flex-start; align-items:stretch; width:100%; gap:60px; flex-wrap:wrap;
}
.container.bottom-split > .home-panel {
	display:block; width:calc((100% - 60px) / 2);
}
.home-panel-head {
	display:flex; flex-direction:row; justify-content:space-between; align-items:flex-end; width:100%; margin-bottom:38px;
}
.home-panel-head > .section-title {
	font-size:4rem; line-height:1em; font-weight:600;
}
.home-panel-head > .home-panel-link {
	width:38px; height:38px; text-indent:-99999px; position:relative; transition:0.2s;
}
.home-panel-head > .home-panel-link::after,
.home-panel-head > .home-panel-link::before {
	display:block; content:''; width:100%; height:4px; background:#1d1d1d; position:absolute; top:50%; left:0; margin-top:-2px;
}
.home-panel-head > .home-panel-link::before {
	width:4px; height:100%; top:0; left:50%; margin-left:-2px; margin-top:0;
}
.home-panel-head > .home-panel-link:hover {
	transform:rotate(360deg); transition:0.2s;
}
.home-panel-head > .controls_bx{
	position:static; background:none; z-index: inherit;
}
.home-panel-head > .controls_bx > .swiper-button-prev,
.home-panel-head > .controls_bx > .swiper-button-next{
	position: static; background:none; margin:0; z-index: inherit; width:34px; height:34px; text-indent: -9999px; background-image: url(/humanframe/theme/hahacampus/assets/img/main/mainSlideBoContArrow.png); background-repeat: no-repeat; background-position: center; background-size: auto;
}
.home-panel-head > .controls_bx > .swiper-button-prev{
	transform: rotate(180deg);
}
.home-panel-head > .controls_bx > .btn_pause_sport,
.home-panel-head > .controls_bx > .btn_pause_edu{
	color:#222; border:0; width:34px; height:34px; text-indent: -9999px; background-image: url(/humanframe/theme/hahacampus/assets/img/main/mainSlideBoContStop.png); background-repeat: no-repeat; background-position: center; background-size: auto;
}
.home-panel-head > .controls_bx > .btn_pause_sport.on,
.home-panel-head > .controls_bx > .btn_pause_edu.on{
	background-image: url(/humanframe/theme/hahacampus/assets/img/main/mainSlideBoContPlay.png);
}
.gallery-preview-list {
	display:flex; flex-direction:row; justify-content:flex-start; align-items:stretch; width:100%; gap:40px 20px; overflow: hidden;
}
.gallery-preview-list > li {
	display:block; width:calc((100% - 10px) / 2);
}
.gallery-preview-list a {
	display:block; width:100%; border:1px solid #ccc; border-radius:20px; overflow:hidden; transition:0.2s;
}
.gallery-preview-list a:hover {
	border:1px solid #df3c6e; box-shadow:1px 1px 10px rgba(0,0,0,0.07); transition:0.2s;
}
.gallImgBx {
	display:block; width:100%; height:auto; aspect-ratio:369 / 289; min-height:289px;
}
.gallImgBx > img {
	display:block; width:100%; height:100%; object-fit: fill;
}
.gallInfoBx {
	display:block; width:100%; padding:25px 24px 32px;
}
.mainEduList .gallInfoBx,
.mainSportList .gallInfoBx{
	padding: 36px 24px 45px;
}
.gallInfoBx > .gallTitle {
	font-size:2.4rem; font-weight:600; margin-bottom:18px; line-height:1em;
}
.gallery-preview-list a:hover > .gallInfoBx > .gallTitle {
	color:#df3c6e; transition:0.2s;
}
.gallInfoBx > .gallDate {
	font-weight:500; color:#666; line-height:1em;
}
.notice-list {
	display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; width:100%; border-top:2px solid #000;
}
.notice-list > li {
	display:block; width:100%; border-bottom:1px solid #dbdbdb;
}
.notice-list > li > a {
	display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:8px; padding:36px 24px 40px 18px; transition:0.2s;
}
.notice-list > li > a > .noticeTitle {
	flex:1 1 0; font-size:2.4rem; font-weight:600; line-height:1em; transition:0.2s;
}
.notice-list > li > a > .noticeDate {
	font-weight:500; line-height:1em; color:#666;
}
.notice-list > li > a:hover {
	background:#f6f5f5; transition:0.2s;
}
.notice-list > li > a:hover > .noticeTitle {
	color:#df3c6e; transition:0.2s;
}
.gallery-preview-list > li,
.notice-list > li {
	opacity:0; transform:translateY(30px); transition:opacity 0.5s ease, transform 0.5s ease;
}
.gallery-preview-list > li.animated,
.notice-list > li.animated {
	opacity:1; transform:translateY(0);
}
.gallery-preview-list > li:nth-child(1) { transition-delay:0.1s; }
.gallery-preview-list > li:nth-child(2) { transition-delay:0.2s; }

/*하단 배너*/
.bannerSection{
	display:block; border-top:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb;
}
.bannerSection > .bannerSectionInner{
	display:block; width:100%; max-width:1600px; margin:0 auto;
}
.bannerSection > .bannerSectionInner > .bannerList{
	display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; width:100%;
}
.bannerSection > .bannerSectionInner > .bannerList > li{
	border-left:1px solid #dbdbdb;
}
.bannerSection > .bannerSectionInner > .bannerList > li:last-child{
	border-right:1px solid #dbdbdb;
}
.bannerSection > .bannerSectionInner > .bannerList > li > a{
	display:block; width:300px; height:80px; background-size: auto 45px; background-position: center; background-repeat: no-repeat;
}
.bannerSection > .bannerSectionInner > .bannerList > li:nth-child(1) > a{
	background-image: url(/humanframe/theme/hahacampus/assets/img/main/mainQuickBanner01.png);
}
.bannerSection > .bannerSectionInner > .bannerList > li:nth-child(2) > a{
	background-image: url(/humanframe/theme/hahacampus/assets/img/main/mainQuickBanner02.png);
}
.bannerSection > .bannerSectionInner > .bannerList > li:nth-child(3) > a{
	background-image: url(/humanframe/theme/hahacampus/assets/img/main/mainQuickBanner03.png);
}
/*하단 배너*/
@media all and (max-width:1728px) {
	.section.home-bottom {
		padding:0 64px;
	}
}
@media all and (max-width:1280px) {
	.section.home-bottom {
		padding:0 32px; margin:0 auto 45px;
	}
}
@media all and (max-width:1024px) {
	.home-panel-head > .home-panel-link {
		width:32px; height:32px;
	}
	.gallery-preview-list {
		gap:20px;
	}
	.gallery-preview-list > li {
		width:calc((100% - 20px) / 2);
	}
	.controls_bx{
		bottom:10px;
	}
}
@media all and (max-width:890px) {
	.container.bottom-split > .home-panel {
		width:100%;
	}
	.home-panel-head > .home-panel-link {
		width:27px; height:27px;
	}
	.home-panel-head {
		margin-bottom:22px;
	}
	.gallImgBx {
		aspect-ratio:237 / 158; min-height:158px;
	}
	.gallInfoBx {
		padding:20px 19px 22px;
	}
	.mainEduList .gallInfoBx,
	.mainSportList .gallInfoBx{
		padding:24px 19px 30px;
	}
	.gallInfoBx > .gallTitle {
		margin-bottom:9px;
	}
	.notice-list > li > a {
		padding:30px 18px 23px 10px;
	}
}
@media all and (max-width:480px) {
	.section.home-bottom {
		padding:0 15px; margin:0 auto 42px;
	}
}
/*Board Section*/


/*hover 삭제*/
@media all and (max-width:1024px) {
	.quick-tile > a:hover {
		background:#f6f5f5; border:1px solid #f6f5f5; box-shadow:none;
	}
	.quick-tile > a:hover::after {
		background-image:url(/humanframe/theme/hahacampus/assets/img/common/iconLink.png);
	}
	.quick-tile > a:hover .quick-tile-label {
		color:#121212;
	}
	.home-panel-head > .home-panel-link:hover {
		transform:rotate(0deg);
	}
	.gallery-preview-list > li > a:hover {
		border:1px solid #ccc; box-shadow:none;
	}
	.gallery-preview-list a:hover > .gallInfoBx > .gallTitle {
		color:#121212;
	}
	.notice-list > li > a:hover {
		background:transparent;
	}
	.notice-list > li > a:hover > .noticeTitle {
		color:#121212;
	}
}
/*hover 삭제*/


/*font-size*/
@media all and (max-width:1024px) {
	.quick-tile-label {
		font-size:2.4rem;
	}
	.gallInfoBx > .gallTitle,
	.notice-list > li > a > .noticeTitle {
		font-size:2.2rem;
	}
	.quick-tile-desc {
		font-size:1.8rem;
	}
	.home-panel-head > .section-title {
		font-size:3.8rem;
	}
}
@media all and (max-width:900px) {
	.bannerSection > .bannerSectionInner > .bannerList > li{
		display: block; width:33.3333%;
	}
	.bannerSection > .bannerSectionInner > .bannerList > li > a{
		width:100%;
	}
}
@media all and (max-width:768px) {
	.quick-tile-label {
		font-size:2.2rem;
	}
	.gallInfoBx > .gallTitle,
	.notice-list > li > a > .noticeTitle {
		font-size:1.8rem;
	}
	.quick-tile-desc {
		font-size:1.6rem;
	}
	.home-panel-head > .section-title {
		font-size:3rem;
	}
	.controls_bx{
		position:static; width:100%; border-radius: 0;
	}
	.home-panel-head > .controls_bx{
		width:auto;
	}
	.bannerSection > .bannerSectionInner > .bannerList > li > a{
		background-size:auto 30px;
	}
}
@media all and (max-width:480px) {
	.quick-tile-label {
		font-size:2rem;
	}
	.bannerSection > .bannerSectionInner > .bannerList{
		flex-direction: column
	}
	.bannerSection > .bannerSectionInner > .bannerList > li{
		width:100%; border-left:0; border-bottom:1px solid #dbdbdb;
	}
	.bannerSection > .bannerSectionInner > .bannerList > li:last-child{
		border-right:0; border-bottom:0;
	}
	.bannerSection > .bannerSectionInner > .bannerList > li > a{
		background-size:auto 25px; height:60px;
	}
}
@media all and (max-width:410px) {
	.bannerSection > .bannerSectionInner > .bannerList{
		flex-direction: column;
	}
	.bannerSection > .bannerSectionInner > .bannerList > li{
		width:100%;
	}
}
/*font-size*/


@media all and (max-width:768px) {
	.main_visual_item {
		position:absolute; width:55.078125%; max-width:423px; min-width:300px; bottom:90px; left:50%; transform:translate(-50%, 0);
	}
}
@media all and (max-width:480px) {
	/* .mainimg-slider .swiper-slide {
		height:100vh; max-height:470px;
	}
	.mainimg-slider .swiper-slide > img.main_visual_img {
		width:100%; height:100%; position:absolute; top:0; left:0; object-fit:cover; object-position:12% 0;
	}
	.mainimg-slider .swiper-slide > img.main_visual_img.leftmov {
		object-position:50% 0;
	}
	.mainimg-slider .swiper-slide > img.main_visual_img.mobile-480 {
		object-position:center;
	} */
	.mainimg-slider .swiper-slide > img.main_visual_img.mobile-480.mobileTxt {
		display:block; width:calc(100% - 48px); max-width:426px; position:absolute; bottom:50px; left:50%; transform:translateX(-50%) !important; object-fit:inherit; object-position:inherit; height:auto; top:inherit;
	}
	.mainimg-slider .swiper-slide > img.main_visual_item {
		object-fit:contain; height:auto; width:85%; min-width:inherit; bottom:100px;
	}
	.mainimg-slider .swiper-slide > img.main_visual_item.slide06 {
		bottom:inherit; top:120px;
	}
	.mainimg-slider .swiper-slide > img.main_visual_item.slide07 {
		width:auto; top:100px;
	}
	.mainimg-slider .swiper-slide > img.main_visual_item.slide08 {
		width:auto; top:100px;
	}
	.gallery-preview-list{
		flex-wrap: wrap;
	}
	.gallery-preview-list > li{
		width:100%;
	}
}
.scrollbar-hidden::-webkit-scrollbar {
	display:none;
}
.scrollbar-hidden {
	-ms-overflow-style:none; scrollbar-width:none;
}
.wow {
	visibility:hidden;
}
