@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 img { width: 134px; }
#header .inner .util { display: flex; align-items: center; justify-content: center; gap: 0 6px; }
#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; text-align: center; background-color: #343129; height: 293px; }
#footer::before { content: ''; position: absolute; top: 60px; left: 0; width: 100%; height: 1px; background-color: #999; }
#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: 140px; }
.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: #007cba; }
.visual-swiper .swiper-slide { text-align: center; border-radius: 10px; overflow: hidden; }
.visual-swiper .swiper-slide .txt { position: absolute; left: 50%; top: 0; transform: translateX(-50%); padding: 20px 24px; max-width: 328px; width: 100%; text-align: left; }
.visual-swiper .swiper-slide .txt strong { display: block; font-size: 18px; line-height: 24px; color: #002809; opacity: 0; transform: translateY(50px); transition: opacity .4s .5s, transform .4s .5s; } /* opacity: 0; transform: translateY(100px); transition: all .6s .3s; */
.visual-swiper .swiper-slide .txt p { margin-top: 4px; font-size: 12px; line-height: 18px; color: #78977F; opacity: 0; transform: translateY(50px); transition: opacity .4s .6s, transform .4s .6s; } /*  opacity: 0; transform: translateY(100px); transition: all .7s .3s; */
.visual-swiper .swiper-slide img { object-fit: cover; width: auto; 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); }

.visual-swiper .slide01 { background-color: #E3FAE8; }
.visual-swiper .slide02 { background-color: #82D4FD; }
.visual-swiper .slide02 .txt p { color: #085280; }

.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: space-between; align-items: flex-end; padding: 12px 14px; width: calc((100% - 20px) / 3); min-height: 102px; border-radius: 10px; overflow: hidden; background-color: #f7f7f7; border: 2px solid transparent; transition: border .4s; }
.con02 .box-wrap .box .txt { width: 100%; text-align: left; font-size: 14px; line-height: 18px; font-weight: 700; transition: color .2s; }
.con02 .box-wrap .box .icon { position: relative; width: 40px; }
.con02 .box-wrap .box .icon .pc { display: none; }
.con02 .box-wrap .box .icon .hover { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.2s; z-index: 1; }

.con03 .box01 { display: flex; align-items: center; margin-top: 20px; padding-left: 14px; padding-right: 10px; height: 56px; background-color: #0080C0; border-radius: 10px; }
.con03 .box01 strong { color: #fff; font-size: 14px; }
.con03 .box01 .txt { position: relative; margin-left: 10px; width: calc(100% - 83px); height: 36px; padding: 0 12px; 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: 110px; background-color: #FF8566; border-radius: 12px; overflow: hidden; }
.con03 .box02 .txt { position: absolute; left: 0; top: 0; padding: 20px 16px; max-width: 328px; 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: 20px 14px; height: 64px; border-radius: 12px; border: 1px solid #ddd; }
.con03 .cont .icon {  width: 24px; }
.con03 .cont p { margin-left: 10px; padding-right: 20px; font-size: 16px; }
.con03 .cont .arrow { position: absolute; top: 22px; right: 20px; width: 20px; }

.con03 .box03 { margin-top: 20px; background: url('./images/con03_bg01.png') center right/auto 100% no-repeat; }
.con03 .box04 { margin-top: 10px; background: url('./images/con03_bg02.png') center right/auto 100% no-repeat; }

.notice { margin-top: 30px; }
.notice .tit-area { position: relative; padding-right: 24px; padding-bottom: 9px; border-bottom: 1px solid #444; }
.notice .tit { display: block; font-size: 18px; line-height: 24px; }
.notice .arrow { position: absolute; right: 0; 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 { color: #999; width: 88px; }
.notice .box .txt { width: calc(100% - 88px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.con05 { margin-top: 40px; padding: 30px 16px; background-color: #0080C0; }
.con05 .inner { padding: 32px 30px 8px; border-radius: 10px; background-color: #fff; }
.con05 ul { display: flex; }
.con05 ul li { width: calc(100% / 3); text-align: center; }
.con05 ul li .icon { display: inline-block; width: 32px; }
.con05 ul li .txt { margin-top: 6px; font-size: 14px; line-height: 18px; }
.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 (480px < width < 768px) {
	.visual-swiper .swiper-slide .txt { top: 50%; transform: translate(-50%, -50%); padding: 40px; max-width: 468px; }
	.visual-swiper .swiper-slide { height: 200px; }
}

@media (width > 767px) {
	.visual-swiper { padding-bottom: 18px; }
	.visual-swiper .swiper-slide { height: 300px; border-radius: 16px; }
	.visual-swiper .swiper-slide .mo { display: none; }
	.visual-swiper .swiper-slide .pc { display: block; }
	.visual-swiper .swiper-slide .txt { position: absolute; top: 50%; left: 0; transform: translateY(-50%); padding-left: 80px; padding-right: 80px; 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 { height: 6px; }
	.visual-swiper .swiper-pagination-bullet { width: 6px; height: 6px; border-radius: 6px; }
	.visual-swiper .swiper-pagination-bullet-active { width: 60px; }

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

	.con02 .box-wrap .box { min-height: 108px; border-radius: 12px; }

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

	.con05 .inner { display: flex; align-items: center; margin: 0 auto; padding: 30px; 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 .inner,
	.con.inner { padding: 0 30px; }
	.con.inner { position: relative; margin: 0 auto; max-width: 1200px; }
	#header .inner { height: 80px; }
	#header .inner .logo img { width: 225px; }
	#header .inner .gnb { display: flex; justify-content: center; align-items: center; gap: 0 36px; }
	#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 .swiper-slide .txt { padding-left: 140px; }
	.visual-swiper [class^="swiper-button"] { display: block; margin-top: 0; transform: translateY(-50%); width: 60px; height: 60px; }
	.visual-swiper [class^="swiper-button"]::after { display: none; }
	.visual-swiper .swiper-button-prev { left: 18px; }
	.visual-swiper .swiper-button-next { right: 18px; }

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

	.con02 .box-wrap { gap: 20px; }
	.con02 .box-wrap .box { padding: 20px 22px; width: calc((100% - 40px) / 3); min-height: 171px; }
	.con02 .box-wrap .box .txt { font-size: 18px; line-height: 24px; }
	.con02 .box-wrap .box .icon { width: 72px; }
	.con02 .box-wrap .box .icon .pc { display: inline; }
	.con02 .box-wrap .box .icon .mo { display: none; }
	.con02 .box-wrap .box:hover { border-color: #0080C0; box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1) }
	.con02 .box-wrap .box:hover .txt { color: #0080C0; }
	.con02 .box-wrap .box:hover .hover { opacity: 1; }

	.con03 { display: flex; flex-direction: column; justify-content: space-between; }
	.con03 .box01 { padding-left: 28px; padding-right: 16px; height: 80px; border-radius: 12px; }
	.con03 .box01 strong { width: 144px; font-size: 18px; line-height: 48px; }
	.con03 .box01 .txt { margin-left: 20px; padding-left: 18px; height: 48px; line-height: 48px; font-size: 16px; }
	.con03 .box01 .txt .icon img { margin-top: 12px; }

	.con03 .box02 { height: 200px; }
	.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: 108px; }
	.con03 .cont .icon { width: 40px; }
	.con03 .cont p { font-size: 20px; }
	.con03 .cont .arrow { width: 32px; top: 50%; transform: translateY(-50%); }

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

	.con05 { margin-top: 80px; padding-top: 60px; padding-bottom: 60px; }
	.con05 .inner { min-height: 180px; }
	.con05 ul li .icon { width: 40px; }
	.con05 ul li .txt { margin-top: 12px; font-size: 16px; line-height: 24px; }
	.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 { 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; }
}