@charset "utf-8";

#wrap{}

/* main_nav */
.main_nav {position:fixed;top:30%;left:10px;display:none;}

/* section */
 
section.last{margin-bottom:0;}
section .main_top p {font-size:1.5rem; line-height:1.3;  }

section h2.main_tit {display: block;font-size:4em;line-height: 1.2;margin-bottom: 25px;}

 
@media screen and (max-width:640px){
  	section h2.main_tit {font-size:2.5em; line-height: 1.1; margin-bottom:15px}
	section .main_top p {font-size:1.2rem;   }

 }

@keyframes fadeUp {
	0% {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}
	to {
		opacity: 1;
		transform: translateZ(0);
	}
}



/* main_visual */
.main_visual{margin:0 auto; padding: 0; position:Relative}
.main_visual{width:100%; height:100%;}

.mainVisual .swiper-slide{width:100%;height:800px; display:flex;align-items: center; position:relative; z-index: -2; }
.mainVisual .swiper-slide > .main_t {max-width:1300px; color:#005A7C; margin: 0 auto; margin-bottom:130px; width: 100%;}
.mainVisual .swiper-slide > .main_t > h3 {   font-weight:800; font-size:3.5vw; line-height:1.2; text-shadow:3px 3px 8px rgba(255,255,255,.3); animation: fadeUp 1s;word-break:keep-all; font-family: 'MaplestoryOTFBold';}
.mainVisual .swiper-slide > .main_t > h3 > b {font-family: 'MaplestoryOTFBold'; background:#005A7C; color:#FFF; padding: 0 5px;box-sizing:border-box; text-shadow:none}
.mainVisual .swiper-slide > .main_t > p {  text-shadow:1px 1px 5px rgba(255,255,255,.7);   margin-top:30px;font-size:1.8rem;line-height:1.3;color:#000; font-weight:600;}

.mainVisual .swiper-slide.slide01 {background: url('/common/img/main/main_vi_bg1.png') no-repeat; background-position: bottom; background-size:cover;}
.mainVisual .swiper-slide.slide02 {background: url('/common/img/main/main_vi_bg2.png') no-repeat; background-position: bottom; background-size:cover;}
 

.mainVisual .swiper-pagination {bottom: 80px !important;}
.mainVisual .swiper-pagination > span {width: 15px; height: 15px; background:#FFF; border: 2px solid #7EB6E2; box-sizing:border-box; opacity: 1;}
.mainVisual .swiper-pagination > span.swiper-pagination-bullet-active {background: #7EB6E2; border: 2px solid #FFF; box-sizing:border-box;}
.mainVisual .swiper-button-next,
.mainVisual .swiper-button-prev{display:none;}
.bottom_img {position:absolute;  z-index:99; left:0; bottom:0; width:100%}
.main_visual .bottom_img {bottom:-20px}

@media screen and (max-width:1300px){
  	.mainVisual .swiper-slide > .main_t{padding:0 4%; box-sizing:border-box; margin-bottom:20px}
.main_visual .bottom_img {bottom:-10px}


}
@media screen and (max-width:1024px){
 
	.mainVisual .swiper-slide > .main_t > h3 {font-size: 3em;}
	.mainVisual .swiper-slide > .main_t > p {width: 55%;  word-break: keep-all; font-size:1.3rem; line-height:1.3; font-weight:700}
}
@media screen and (max-width:640px){
	.mainVisual .swiper-slide {height:145vw; align-items: flex-start; justify-content: center; text-align: center;}
	.mainVisual .swiper-slide.slide01 {background: url('/common/img/main/mb_vi_img1.png') no-repeat; background-position: bottom; background-size:cover;}
	.mainVisual .swiper-slide.slide02 {background: url('/common/img/main/mb_vi_img2.png') no-repeat; background-position: bottom; background-size:cover;}


	.mainVisual .swiper-slide:after {height: 10%;}
	.mainVisual .swiper-slide > .main_t {margin:65px 0}
	.mainVisual .swiper-slide > .main_t > h3 {font-size:2.1em; margin-bottom:10px;}
	.mainVisual .swiper-slide > .main_t > p {width:100%; margin: 0 auto; font-size: 1.3rem;}
	.mainVisual .swiper-pagination{bottom: 40px !important;}
	.mainVisual .swiper-pagination > span {background:#7EB6E2; border: 2px solid #FFF;}
	.mainVisual .swiper-pagination > span.swiper-pagination-bullet-active {background: #FFF; border: 2px solid #7EB6E2; }

	.main_visual .bottom_img {bottom:-1px}


}

 

/* main_vision */

.main_vision {background:url('/common/img/main/mainVision01.png'); background-attachment:fixed; background-size: cover; background-position: center; position:relative; margin-top:110px}
.main_vision .top_img {position:absolute; transform: rotate(180deg); z-index:99; left:0; top:-1px; width:100%}
.main_vision > .inner{padding:220px 0 160px 0; box-sizing:border-box;}
.main_vision .main_top {text-align:center;}
.main_vision h2.main_tit{color:#FFF;}
.main_vision .main_top p {color:#FFF;}
.main_vision ul {justify-content: center; padding:0 8%; margin-top:40px; box-sizing:border-box; width:100%}
.main_vision ul > li {width: 33%; text-align:center; color:#FFF;}
.main_vision ul > li > div {width:100%;   height:10vw; display:flex; align-items:Center; justify-content:center }
.main_vision ul > li img {  max-width:100%}
.main_vision ul > li > p {width:80%; margin: 0 auto; color: #ffffff8a;   line-height: 1.4;}
.main_vision ul > li > p.tit {font-size: 1.6rem; margin-bottom: 10px; font-weight: 600; color: #FFF;}


@media screen and (max-width:640px){
		.main_vision {  background-attachment:local; background-size: cover; background-position: center; position:relative; margin-top:70px}

		.main_vision > .inner{padding: 130px 0 120px 0; }
		.main_vision ul {align-items: flex-start; margin-top:20px; }
		.main_vision ul > li {width:100%; margin-bottom:30px;}
		.main_vision ul > li > div {height:30vw }

		.main_vision ul > li > p {width:90%; margin: 0 auto; font-size: 0.95rem;}
		.main_vision ul {padding:0; gap:3%}
		.main_vision ul > li > p {width:100%}
		.main_vision ul > li > p.tit {font-size: 1.3rem; }


}
 

/******리뉴얼********/

.main_product {position:relative; padding-top:160px }
.main_product .bg {position:absolute; z-index:-9; left:50%; transform: translate(-50%, 0); top:20px; max-width:100%}
.main_product  .main_top {  text-align:center;}

.main_list {width:100%; display:flex; flex-wrap:wrap; gap:35px 2%;  margin-top:60px}
.main_list li {width:32%;   text-align:center}
.main_list li .img {width:100%; margin-bottom:20px; border-radius:50px;   padding-bottom:100%; background-size:cover !important; background-color:#fff; cursor:pointer} 
 
.call {margin-top:-1px; background-color:#fff; position:relative; z-index:99}
.call > .inner {padding:110px 0 120px 0; box-sizing:border-box; align-items:center}
.call > .inner div {margin-left:auto; }
.call > .inner div h4 {font-size:3em;  margin-bottom:20px; color:var(--main_c1)}
.call > .inner div p {font-size:1.2em;  line-height:1.6; color:#7b4331 }

 

@media screen and (max-width:640px){
		.main_product { padding-top:100px; margin-top:5px;  background:url('/common/img/main/main_bg.png') no-repeat center top; background-size:200%  }
		.main_product .bg {display:none}
		.main_list { justify-content:space-between; margin-top:30px; font-size:.95em}
		  .main_list li {width:31%; } 
		.main_list li .img {  border-radius:10px; margin-bottom:15px  }

		.call img {width:80%; max-width:400px;  margin:0 auto;}
		.call > .inner {padding:80px 0 100px 0;  }

		.call > .inner div {margin-top:40px; text-align:center; width:100%  }
		.call > .inner div h4 {font-size:2em;  }
		.call > .inner div p {font-size:1em;   }
		.call > .inner  a {margin:0 auto }
}