@charset "utf-8";

/**
* --------------------------------
* style CSS
* --------------------------------
*/

#wrap,
#container,
#contents { position: relative; width: 100%; }

#header .inner,
.con.inner { padding: 0 16px; margin: 0 auto; max-width: 1200px; }

img { max-width: 100%; }

#header .inner { display: flex; justify-content: space-between; height: 50px; }
#header .inner .logo { display: flex; align-items: center; justify-content: center; height: 100%; }
#header .inner .logo .pc { display: none; }
#header .inner .logo img { width: 134px; }
#header .inner .util { display: flex; align-items: center; justify-content: center; gap: 0 6px; height: 100%; }
#header .inner .util img { width: 30px; }
#header .inner .util .pc { display: none; }
#header .gnb { display: none; }
#header .gnb div { font-size: 16px; }

#footer { position: relative; margin-top: 40px; text-align: center; background-color: #0D111D; height: 293px; }
#footer::before { content: ''; position: absolute; top: 60px; left: 0; width: 100%; height: 1px; background-color: #3E4864; }
#footer .mo { width: 360px; }
#footer .pc { display: none; }

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, 
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 2px; }

.visual-swiper { position: relative; padding-bottom: 14px; }
.visual-swiper .swiper-slide { height: 160px; }
.visual-swiper [class^="swiper-button"] { display: none; }
.visual-swiper .swiper-pagination { bottom: 0; display: flex; justify-content: center; height: 4px; }
.visual-swiper .swiper-pagination-bullet { width: 4px; height: 4px; border-radius: 4px; transition: all .3s; background-color: #D9D9D9; opacity: 1; }
.visual-swiper .swiper-pagination-bullet-active { width: 40px; background-color: #2C65FD; }
.visual-swiper .swiper-slide { text-align: center; overflow: hidden; }
.visual-swiper .swiper-slide .txt { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; left: 50%; top: 0; transform: translateX(-50%); padding: 20px 24px; width: 100%; height: 100%; text-align: center; }
.visual-swiper .swiper-slide .txt strong { display: block; font-size: 18px; line-height: 24px; color: #fff; opacity: 0; transform: translateY(50px); transition: opacity .4s .5s, transform .4s .5s; } /* opacity: 0; transform: translateX(100px); transition: all .5s .4s; */
.visual-swiper .swiper-slide .txt p { margin-top: 4px; font-size: 12px; line-height: 18px; color: rgba(255, 255, 255, 0.8); opacity: 0; transform: translateY(50px); transition: opacity .4s .6s, transform .4s .6s; } /*  opacity: 0; transform: translateX(100px); transition: all .6s .4s; */
.visual-swiper .swiper-slide img { object-fit: cover; width: 100%; height: 100%; }
.visual-swiper .swiper-slide .pc { display: none; }
.visual-swiper .swiper-slide-active .txt strong { opacity: 1; transform: translateY(0); }
.visual-swiper .swiper-slide-active .txt p { opacity: 1; transform: translateY(0); }

.con02 { margin-top: 20px; }
.con02 .box-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.con02 .box-wrap .box { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; position: relative; width: calc((100% - 20px) / 3); min-height: 102px; border-radius: 24px; overflow: hidden; }
.con02 .box-wrap .box .txt { position: absolute; left: 0; top: 0; padding: 16px; width: 100%; text-align: left; font-size: 16px; line-height: 20px; font-weight: 700; z-index: 1; }
.con02 .box-wrap .box .icon { position: relative; width: 102px; transition: transform .5s; }
.con02 .box-wrap .box:hover .icon { transform-origin: center center; transform: scale(1.25); }

.con02 .box-wrap .box01 { background-color: #F0F4FF; } 
.con02 .box-wrap .box02 { background-color: #F0F4FF; } 
.con02 .box-wrap .box03 { background-color: #00B2FF; color: #fff; }
.con02 .box-wrap .box04 { background-color: #EEFAFF; }
.con02 .box-wrap .box05 { background-color: #EEFAFF; }
.con02 .box-wrap .box06 { background-color: #F0F4FF; }
.con02 .box-wrap .box07 { background-color: #00B2FF; color: #fff; }
.con02 .box-wrap .box08 { background-color: #E3F7FF; }
.con02 .box-wrap .box09 { background-color: #F0F4FF; }

.con03 .box01 { display: flex; align-items: center; margin-top: 30px; padding-right: 10px; height: 48px; border-radius: 24px; border: 1px solid #222; }
.con03 .box01 strong { padding-left: 20px; padding-right: 10px; width: 108px; font-size: 14px; }
.con03 .box01 .txt { position: relative; padding-right: 10px; width: calc(100% - 108px); height: 36px; font-size: 12px; line-height: 36px; color: #ccc; border-radius: 4px; background-color: #fff;  }
.con03 .box01 .txt input { width: 100%; height: 100%; border: 0; outline: 0; }
.con03 .box01 .txt input::placeholder { color: #999; }
.con03 .box01 .txt .icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 24px; }
.con03 .box01 .txt .icon img { margin-top: 6px; }

.con03 .box02 { position: relative; margin-top: 20px; height: 120px; border-radius: 24px; overflow: hidden; }
.con03 .box02 .txt { position: absolute; left: 0; top: 0; padding: 24px 16px; border-radius: 12px; }
.con03 .box02 .tit { display: block; font-size: 18px; line-height: 30px; color: #fff; }
.con03 .box02 p { font-size: 12px; line-height: 20px; color: rgba(255, 255, 255, 0.8); }
.con03 .box02 .pc { display: none; }
.con03 .box02 img { object-fit: cover; object-position: center; width: 100%; height: 100%; }

.con03 .cont { display: flex; align-items: center; position: relative; padding: 14px 20px; height: 64px; border-radius: 24px; border: 1px solid #8BABFF; }
.con03 .cont .icon { width: 24px; }
.con03 .cont p { margin-left: 10px; padding-right: 20px; font-size: 14px; font-weight: 700; }
.con03 .cont .arrow { position: absolute; top: 22px; right: 20px; width: 20px; }

.con03 .box03 { margin-top: 20px; }
.con03 .box04 { margin-top: 10px; }

.notice { margin-top: 30px; }
.notice .tit-area { position: relative; padding-right: 28px; padding-bottom: 9px; padding-left: 4px; border-bottom: 1px solid #444; }
.notice .tit { display: block; font-size: 18px; line-height: 24px; }
.notice .arrow { position: absolute; right: 4px; top: 0; width: 24px; }
.notice .box-wrap { margin-top: 10px; }
.notice .box { display: flex; align-items: center; }
.notice .box > div {  font-size: 14px; line-height: 40px; }
.notice .box .date { width: 88px; font-weight: 700; }
.notice .box .date.blue1 { color: #00B2FF; }
.notice .box .date.blue2 { color: #2C65FD; }
.notice .box .txt { width: calc(100% - 88px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.con05 { margin: 40px auto 0; padding: 30px 30px 8px; width: calc(100% - 32px); max-width: 1140px; background-color: #F7F7F7; border-radius: 24px; }
.con05 .inner { border-radius: 10px; }
.con05 ul { display: flex; }
.con05 ul li { width: calc(100% / 3); text-align: center; }
.con05 ul li .icon { display: inline-block; width: 24px; }
.con05 ul li .txt { padding: 6px 0; font-size: 14px; line-height: 18px; color: #666; }
.con05 .cs { margin-top: 24px; padding: 24px 0; text-align: center; border-top: 1px solid #ddd; }
.con05 .cs p { font-size: 14px; line-height: 20px; }
.con05 .cs strong { font-size: 18px; line-height: 32px; }

@media (width > 767px) {
	.con-wrap { display: flex; gap: 0 30px; }
	.con-wrap > div { width: calc(50% - 15px); }

	.con02 .box-wrap .box { min-height: 108px; border-radius: 36px; }
	.con02 .box-wrap .box .txt { padding: 20px; }
	.con02 .box-wrap .box .icon { width: 100%; }

	.notice-wrap { display: flex; gap: 0 30px; }
	.notice-wrap > div { width: calc(50% - 15px); }

	.con05 { padding-bottom: 30px; }
	.con05 .inner { display: flex; align-items: center; margin: 0 auto; max-width: 1020px; }
	.con05 ul { width: calc((100% / 3)*2); }
	.con05 .cs { margin-top: 0; padding: 0 52px; width: calc(100% / 3); text-align: left; border-top: 0; border-left: 1px solid #ddd; }
}

@media (width >= 1024px) {
	#header { position: absolute; left: 0; top: 0; width: 100%; z-index: 10; }
	#header .inner,
	.con.inner { padding: 0 30px; }
	.con.inner { position: relative; margin: 0 auto; max-width: 1200px; }
	#header .inner { height: 80px; }
	#header .inner .logo .mo { display: none; }
	#header .inner .logo .pc { display: inline; }
	#header .inner .logo img { width: 225px; }
	#header .inner .gnb-wrap { display: flex; align-items: center; }
	#header .inner .gnb { display: flex; justify-content: center; align-items: center; gap: 0 36px; padding-right: 36px; }
	#header .inner .gnb strong { color: #ffffff; }
	#header .inner .util { gap: 0 10px; }
	#header .inner .util img { width: 40px; }
	#header .inner .util .mo { display: none; }
	#header .inner .util .pc { display: block; }

	.visual-swiper { padding-bottom: 0; }
	.visual-swiper .swiper-slide { height: 360px; }
	.visual-swiper .swiper-slide .mo { display: none; }
	.visual-swiper .swiper-slide .pc { display: inline; }
	.visual-swiper [class^="swiper-button"] { display: block; margin-top: 0; top: auto; right: auto; bottom: 9px; transform: translateX(-50%); width: 60px; height: 60px; }
	.visual-swiper [class^="swiper-button"]::after { display: none; }
	.visual-swiper .swiper-button-prev { left: calc(50% - 48px); }
	.visual-swiper .swiper-button-next { left: calc(50% + 48px); }
	.visual-swiper .swiper-slide .txt { position: absolute; top: 50%; left: 0; transform: translateY(-50%); padding: 0 30px; max-width: none; width: 100%; }
	.visual-swiper .swiper-slide .txt strong { font-size: 32px; line-height: 48px; }
	.visual-swiper .swiper-slide .txt P { font-size: 18px; line-height: 26px; }
	.visual-swiper .swiper-pagination { bottom: 26px; align-items: center; height: auto; color: rgba(255, 255, 255, 0.3); }
	.visual-swiper [class^="swiper-pagination-"] { margin: 0 6px; min-width: 21px; font-size: 16px; line-height: 24px; }
	.visual-swiper .swiper-pagination-current { font-weight: 700; color: #fff; }

	.con02, 
	.con03 { margin-top: 60px; }
	.con03 .box01 { margin-top: 0; }

	.con02 .box-wrap { gap: 20px; }
	.con02 .box-wrap .box { width: calc((100% - 40px) / 3); min-height: 171px; border-radius: 36px; }
	.con02 .box-wrap .box .txt { padding: 30px 28px; font-size: 24px; line-height: 28px; }
	.con02 .box-wrap .box .icon { margin-right: -1px; margin-bottom: -1px; width: 100%; max-width: 171px; }

	.con03 { display: flex; flex-direction: column; justify-content: space-between; }
	.con03 .box01 { padding-right: 16px; height: 72px; border-radius: 36px; }
	.con03 .box01 strong { padding-left: 30px; padding-right: 28px; width: 152px; font-size: 18px; line-height: 48px; }
	.con03 .box01 .txt { width: calc(100% - 152px); height: 48px; line-height: 48px; font-size: 16px; }
	.con03 .box01 .txt .icon { width: 32px; }
	.con03 .box01 .txt .icon img { margin-top: 8px; }

	.con03 .box02 { height: 220px; border-radius: 36px; }
	.con03 .box02 .txt { top: 50%; transform: translateY(-50%); padding-left: 30px; }
	.con03 .box02 .mo { display: none; }
	.con03 .box02 .pc { display: block; }
	.con03 .box02 .tit { font-size: 24px; line-height: 32px; }
	.con03 .box02 p { margin-top: 8px; font-size: 16px; line-height: 24px; }

	.con03 .cont { padding: 30px; height: 100px; border-radius: 36px; }
	.con03 .cont .icon { width: 40px; }
	.con03 .cont p { font-size: 18px; }
	.con03 .cont .arrow { width: 32px; top: 50%; right: 40px; transform: translateY(-50%); }
	.con03 .box04 { margin-top: 20px; }

	.notice { margin-top: 60px; }
	.notice .tit-area { padding-left: 10px; padding-bottom: 16px; }
	.notice .tit { font-size: 20px; line-height: 24px; }
	.notice .arrow { right: 10px; }
	.notice .box > div { font-size: 16px; line-height: 48px; }
	.notice .box .date { width: 120px; }
	.notice .box .txt { width: calc(100% - 120px); }

	.con05 { margin-top: 60px; padding-top: 50px; padding-bottom: 50px; width: calc(100% - 60px); border-radius: 36px; }
	.con05 ul li .icon { width: 40px; }
	.con05 ul li .txt { padding: 12px 0 4px; font-size: 16px; line-height: 24px; color: #222; }
	.con05 ul li .txt .mo { display: none; }
	.con05 .cs { padding-top: 10px; padding-bottom: 10px; }
	.con05 .cs p { font-size: 18px; }
	.con05 .cs strong { display: block; margin-top: 8px; font-size: 24px; }

	#footer { margin-top: 60px; height: 202px; }
	#footer::before { display: none; }
	#footer .inner { margin: 0 auto; padding: 0 30px; max-width: 1200px; text-align: center; }
	#footer .mo { display: none; }
	#footer .pc { display: flex; justify-content: space-between; }
}