@charset "utf-8";

/* ※(Only)메인 페이지에 들어가는 디자인 작업 요망 -------------------------- */

.wrap {overflow: auto;}
.mainContainer {
	position: relative;
	overflow: hidden;
}
.mainContainer:before {content: ''; position: absolute; top: -139px; left: 85px; width: 338px; height: 403px; background-image: url('../images/main/main_bg.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; z-index: 0; animation: rotate_bg 25s linear infinite;}
.mainContainer:after {content: ''; position: absolute; top: 15px; right: 60px; width: 477px; height: 496px; background-image: url('../images/main/main_bg.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; z-index: 0; animation: rotate_bg_reverse 25s linear infinite;}
@keyframes rotate_bg {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate_bg_reverse {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

.main_visual_wrap {
	position: relative;
	display: flex;
	width: 100%;
	max-width: 1400px;
	margin: calc(var(--headerHeight) + 40px) auto 0;
	gap: 40px;
	z-index: 1;
}
/* 메인 비주얼 슬라이드 */
.visual_swiper {position:relative; min-width: 0; height:450px; flex: 1;}
.visual_swiper .swiper-wrapper {overflow:hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); border-radius:15px; isolation: isolate;}
.visual_swiper .swiper-wrapper .swiper-slide {height:100%; opacity: 0 !important; transition-property: opacity !important; pointer-events: none; transition: opacity 600ms ease-in-out !important; z-index: 0;}
.visual_swiper .swiper-wrapper .swiper-slide a {display:block; height:100%;}
.visual_swiper .swiper-wrapper .swiper-slide img {display: block; max-width: 100%; height: 450px;}
.visual_swiper .visual_controller {position:absolute;left:0;bottom:0;width:220px;background:#fff;display:flex;align-items:center;justify-content:center;gap:15px;color:#000;padding:21px 0;border-radius:0 30px 0 0;font-weight: 700;z-index:10;}
.visual_controller .swiper-pagination {position:static;width:auto;font-size:15px;letter-spacing:-0.05em;margin:0;}
.visual_controller :is(.swiper-button-prev, .swiper-button-next, .swiper-button-pause) {background:none;position:static;width:auto;height:20px;margin:0 2px;cursor:pointer;font-size:0;}
.visual_controller :is(.swiper-button-prev, .swiper-button-next, .swiper-button-pause):before {font-family:'tabler-icons';font-size:20px;display:inline-block;color:#000;}
.visual_controller .swiper-button-prev::before {content:'\ea60';}
.visual_controller .swiper-button-next::before {content:'\ea61';}
.visual_controller .swiper-button-pause::before {content:'\f690';}
.visual_controller .swiper-button-pause.active::before {content:'\f691';}
.visual_swiper .swiper-wrapper .swiper-slide-active {pointer-events: auto; opacity: 1 !important; z-index: 1;}
.swiper-button-prev:after, .swiper-button-next:after{display:none;}
.visual_controller .swiper-button-pause{display: flex;justify-content: center;align-items: center;font-size: 2rem;line-height: 1;}
.visual_controller .swiper-button-pause span{position: absolute;width: 1px;height: 1px;margin: -1px;overflow: hidden;clip-path: polygon(0 0, 0 0, 0 0);}
.visual_swiper .swiper-wrapper .swiper-slide a:focus-within:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border:2px dashed #000 !important;border-radius:1.2rem;box-sizing:border-box;}
/* 메인 비주얼 시설안내 */
.visual_link_wrap {display: flex; flex-direction: column; gap: 20px; padding: 25px 30px 30px; width: 380px; height: 450px; background: #ee5e2a url(../images/main/visual_link_list_icon.png) right 25px top 25px no-repeat; border-radius: 15px; flex-shrink: 0;}
.visual_link_wrap .visual_link_header dl {color: #fff;}
.visual_link_wrap .visual_link_header dl dt span{display: block; opacity: 0.64; font-size: 12px; margin-bottom: 8px;}
.visual_link_wrap .visual_link_header dl dt{font-family: 'SebangGothic', sans-serif; font-size: clamp(28px, 26.18px + 0.57vw, 33px); font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);}
.visual_link_wrap .visual_link_header dl dd {font-size: 16px; font-weight: 500; margin-top: 12px;}
.visual_link_wrap .visual_link_list ul{display: flex; flex-direction: column; gap: 8px;}
.visual_link_wrap .visual_link_list li{height: 50px;}
.visual_link_wrap .visual_link_list li a{position: relative; width: 100%; height: 100%; display: block; padding: 14px 0 14px 30px; background: #db4b17; border: 1px solid #ffb79d; border-radius: 50px; font-size: 16px; color: #fff;transition: background-color 0.4s ease;}
.visual_link_wrap .visual_link_list li a:after {content: '\ea1c'; position: absolute; top: 50%; transform: translateY(-50%);right: 20px; font-family: 'tabler-icons'; font-size: 20px;}
.visual_link_wrap .visual_link_list li a:is(:hover, :focus, :active) {background: #fff; color: #000; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);}
.visual_link_wrap .visual_link_list li a:is(:hover, :focus, :active):after {color: #5b59d7;}


/* 허브사업*/
.hub_support_wrap {position:relative; height: 535px; margin-top: 70px;}
.hub_support_wrap:before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 425px; background: #f1f6f8; z-index: 0;}
.hub_support_wrap h2 {font-family: 'SebangGothic', sans-serif; font-size: clamp(30px, 28.18px + 0.57vw, 35px); font-weight: 700; color: #162e57; margin-bottom: 40px;}
.hub_support_wrap h2 span {color: #1b9abf;}
.support_wrap {position:relative; display: flex; align-items: flex-start; gap: 70px; z-index: 1;}
.support_wrap .support_menu {position:relative; width: 100%; max-width:287px; padding: 30px 0; background: #1b9abf url(../images/main/gear_img.svg) 125% -43px no-repeat; background-size: 131px; border-radius: 15px; box-shadow: 5px 5px 5px rgba(105, 144, 156, 0.24); border: 1px solid #197894;}
.support_wrap .support_menu p {color: #fef995; font-weight: 600; font-size: 26px; padding: 0 0 35px 30px;}
.support_wrap .support_menu p span {display: block; color: #fff; font-size: 20px; font-weight: 300;}
.support_wrap .support_menu .custom_menu {display: flex; flex-direction: column; width: 100%; position: static !important; padding: 0 20px;}
.support_wrap .support_menu .custom_menu .swiper-pagination-bullet { text-align: left; background: none; width: 100% !important; height: auto !important; color: #fff; border-radius: 50px; margin: 0; padding: 15px 60px 15px 20px; font-size: 18px; opacity: 1; text-shadow: none;}
.support_wrap .support_menu .custom_menu .swiper-pagination-bullet-active{position:relative; color: #000; background: #fff; font-weight: bold; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5)!important;}
.support_wrap .support_menu .custom_menu .swiper-pagination-bullet-active:after {content: ''; position: absolute; top: 50%; left: calc(100% - 50px); width: 20px; height: 50px; transform: translateY(-50%); background: url(../images/main/circle-arrow-right.png) 50% 50% no-repeat;}
.support_wrap .support_swiper {flex: 1; width: 100%; margin-top: 50px;}
.support_wrap .support_swiper .swiper-slide {display: flex; align-items: flex-start; justify-content: space-between;}
.support_wrap .support_swiper .swiper-slide .support_text {height: 100%; min-height: 300px; display: flex; flex-direction: column;margin-top: 40px;  width: 60%;}
.support_wrap .support_swiper .swiper-slide .support_text strong {display: block; font-family: 'SebangGothic', sans-serif; font-size: clamp(30px, 28.18px + 0.57vw, 35px); font-weight: 700; margin-bottom: 15px;}
.support_wrap .support_swiper .swiper-slide .support_text span {display: block; font-size: 18px; font-weight: 400; margin-top: 25px; line-height: 140%;}
.support_wrap .support_swiper .swiper-slide .support_text span:first-of-type {margin-top: 0;}
.support_wrap .support_swiper .swiper-slide .support_text span.b_text {font-size: 20px; font-weight: 600;}
.support_wrap .support_swiper .swiper-slide .support_text a {position: relative; width: 258px; margin-top: auto; padding: 15px 50px 15px 35px; background: #fff; border-radius: 50px; font-size: 16px; font-weight: 600;transition: all 0.5s ease;}
.support_wrap .support_swiper .swiper-slide .support_text a:after {content: '\ea1c'; position: absolute; top: 50%; transform: translateY(-50%);right: 35px; font-family: 'tabler-icons'; font-size: 20px; transition: all 0.5s ease;}
.support_wrap .support_swiper .swiper-slide .support_text a:hover {box-shadow:1px 3px 8px 0 rgba(204,225,229,0.5);transition: all 0.5s ease;}
.support_wrap .support_swiper .swiper-slide .support_text a:hover:after {right: 20px;}
.support_wrap .support_swiper .swiper-slide .support_img {height: 380px;position: relative;width: 468px;  }
.support_wrap .support_swiper .swiper-slide .support_img img {display: block; width: auto;}


/* 허브소개 */
.hub_info_wrap {position:relative; margin: 115px 0 40px;}
.hub_info_wrap h2 {font-family: 'SebangGothic', sans-serif; font-size: clamp(30px, 28.18px + 0.57vw, 35px); font-weight: 700; color: #162e57; margin-bottom: 40px;}
.hub_info_wrap h2 span {color: #ff5736;}
.hub_info_wrap .info_list {display: flex; gap: 13px; padding-bottom: 5px;}
.hub_info_wrap .info_list li {width: 25%; height: 150px;}
.hub_info_wrap .info_list li:nth-child(1) {background: url(../images/main/info_img_01.png) right 15px top 15px no-repeat;}
.hub_info_wrap .info_list li:nth-child(2) {background: url(../images/main/info_img_03.png) right 15px top 15px no-repeat;}
.hub_info_wrap .info_list li:nth-child(3) {background: url(../images/main/info_img_02.png) right 15px top 15px no-repeat;}
.hub_info_wrap .info_list li:nth-child(4) {background: url(../images/main/info_img_04.png) right 15px top 15px no-repeat;}
.hub_info_wrap .info_list li a {display: block; width: 100%; height: 100%; padding: 35px 30px; border: 1px solid #d6d6d6; border-radius: 15px; transition: 0.4s ease;}
.hub_info_wrap .info_list li a:is(:hover, :focus, :active) {border-color: #ff5736;box-shadow: 2px 2px 8px rgba(70, 181, 255, 0.15);}
.hub_info_wrap .info_list li a:is(:hover, :focus, :active) strong {color: #b12e14;}
.hub_info_wrap .info_list li a strong {display: block; font-size: 25px; font-weight: 600; color: #383a44; margin-bottom: 15px; transition: 0.4s ease;}
.hub_info_wrap .info_list li a span {display: block; font-size: 16px; font-weight: 400; color: #474d65;}



/* 태블릿 (Tablet) ------------------------- */
/* 1400px 이하 ~ 768px 까지 */
@media (max-width: 1400px) {
	.inwrap {padding: 0 20px;}

	.main_visual_wrap {padding: 0 20px;}
}

/* 1200px 이하 */
@media screen and (max-width: 1200px) {
	.mainContainer:before {content: ''; position: absolute; top: -90px; left: 30px; width: 238px; height: 303px; background-image: url('../images/main/main_bg.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; z-index: 0; animation: rotate_bg 25s linear infinite;}
	.mainContainer:after {content: ''; position: absolute; top: 570px; right: 20px; width: 377px; height: 396px; background-image: url('../images/main/main_bg.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; z-index: 0; animation: rotate_bg_reverse 25s linear infinite;}

	.pc_br {display: none;}
	.main_visual_wrap {flex-direction: column; gap: 20px;}
	/* 메인 비주얼 슬라이드 */
	.visual_swiper {height: auto; aspect-ratio: 980 / 450;}
	.visual_swiper .swiper-wrapper .swiper-slide img {height: 100%;}
	.visual_swiper .visual_controller {width: auto; gap: 10px; padding: 15px 15px 15px 20px; border-radius: 0 15px 0 0;}

	/* 메인 비주얼 시설안내 */
	.visual_link_wrap {width: 100%; height: auto;}
	.visual_link_wrap .visual_link_list ul {flex-direction: row; flex-wrap: wrap;}
	.visual_link_wrap .visual_link_list ul li {width: calc(50% - 10px); flex-grow: 1;}

	/* 허브사업*/
	.hub_support_wrap {height: 515px;}
	.hub_support_wrap:before {height: 410px;}
	.hub_support_wrap h2 {margin-bottom: 20px;}
	.support_wrap {gap: 40px;}
	.support_wrap .support_menu {max-width: 260px;}
	.support_wrap .support_menu .custom_menu .swiper-pagination-bullet {padding: 15px 50px 15px 20px;}
	.support_wrap .support_menu .custom_menu .swiper-pagination-bullet-active:after {left: calc(100% - 35px);}
	.support_wrap .support_swiper .swiper-slide .support_text span {font-size: 16px;}
	.support_wrap .support_swiper .swiper-slide .support_text span.b_text {font-size: 18px;}
	.support_wrap .support_swiper .swiper-slide .support_text{width:100%}
	.support_wrap .support_swiper .swiper-slide .support_img {display: none;}

	/* 허브소개 */
	.hub_info_wrap {margin: 80px 0 0;}
	.hub_info_wrap h2 {margin-bottom: 20px;}
	.hub_info_wrap .info_list {flex-wrap: wrap;}
	.hub_info_wrap .info_list li {width: calc(50% - 10px);}
}



/* 모바일 (Mobile) -------------------------- */
/* -------------------- ~767 -------------------- */
@media (max-width: 767px) {
	.mainContainer:before, .mainContainer:after {display: none;}

	.main_visual_wrap {padding: 0; margin: var(--headerHeight) auto 0; gap: 0;}
	/* 메인 비주얼 슬라이드 */
	.visual_swiper .swiper-wrapper {border-radius: 0; overflow: unset; -webkit-mask-image: unset;}
	.support_wrap .support_swiper {margin: 45px 0 50px;}
	.support_wrap .support_swiper .swiper-slide .support_text a {width: 180px; padding: 15px 30px 15px 25px; margin-top: 30px;}
	.support_wrap .support_swiper .swiper-slide .support_text a:after {right: 25px;}
	.support_wrap .support_menu {position: absolute; bottom: -40px; max-width: 100%; height: auto; background: none; border: none; padding: 0; box-shadow: none;}
	.support_wrap .support_menu p {display: none;}
	.support_wrap .support_menu .custom_menu {flex-direction: row; justify-content: center; gap: 10px; padding: 0;}
	.support_wrap .support_menu .custom_menu .swiper-pagination-bullet {background: #f1f6f8; color: #1b9abf; font-size: 14px; font-weight: 800; padding: 0; width: auto!important; min-width: 30px!important; height: 30px!important; text-align: center; line-height: 30px; border-radius: 30px;}
	.support_wrap .support_menu .custom_menu .swiper-pagination-bullet-active {box-shadow: none; background: #1b9abf; color: #fff;}
	.support_wrap .support_menu .custom_menu .swiper-pagination-bullet-active:after {display: none;}
	.visual_swiper .visual_controller {left: unset; right: 0; padding: 10px 10px 10px 15px; border-radius: 15px 0 0 0;}
	.visual_controller .swiper-pagination {font-size: 13px;}
	.visual_swiper .visual_controller button:not(.swiper-pagination) {display: none;}
	/* 메인 비주얼 시설안내 */
	.visual_link_wrap {width: 100%; height: auto; padding: 30px 20px; border-radius: 0;}
	.visual_link_wrap .visual_link_header dl {padding: 0 20px;}
	.visual_link_wrap .visual_link_header dl dd {font-size: 15px;}
	.visual_link_wrap .visual_link_list ul {flex-direction: row; flex-wrap: wrap;}
	.visual_link_wrap .visual_link_list ul li {width: calc(50% - 10px); flex-grow: 1;}
	.visual_link_wrap .visual_link_list li a {padding: 15px; text-align: center; height: auto;}
	.visual_link_wrap .visual_link_list li a:after {display: none;}

	/* 허브사업*/
	.hub_support_wrap {height: auto;}
	.hub_support_wrap:before {height: calc(100% - 56px); background: #f1f6f8 url('../images/main/support_mb_bg.png') right -30px top -25px no-repeat;}
	.support_wrap {flex-direction: column-reverse; gap: 40px;}

	/* 허브소개 */
	.hub_info_wrap .info_list li {width: 100%;}
}