@charset "utf-8";

.l-wrap{overflow:hidden}

/*********************************************
* Header [s]
**********************************************/
.l-header{}

@media (min-width: 712px) {
}

@media (min-width: 1200px) {
}
/*********************************************
* Header [e]
**********************************************/


/*********************************************
* Container [s]
**********************************************/
.l-container{}

@media (min-width: 712px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 712px) and (max-width: 1199px) {
}
/*********************************************
* Container [e]
**********************************************/


/*********************************************
* Footer [s]
**********************************************/
.l-footer{display:block}

@media (min-width: 712px) {
}

@media (min-width: 1200px) {
}
/*********************************************
* Footer [e]
**********************************************/


/*********************************************
* 메인 [s]
**********************************************/

/* 메인 비주얼 [s] */
.l-content .l-section.full > .main-visual{max-width:100%}
.main-visual .swiper-wrapper{will-change:transform;transition-timing-function:ease !important}
.main-visual .swiper-slide{overflow:hidden;position:relative; background: #000;}
.main-visual .main-visual-tit{position:absolute;top:150px;right:20px;left:20px;z-index:10;font-size:30px;line-height:1.3;opacity:0;transform:translateX(70px);transition:opacity 1s, transform 1.2s; color: #fff; letter-spacing: -1.8px;}
.main-visual .main-visual-tit1{position:absolute;top:100px;right:20px;left:20px;z-index:10;font-size:20px;line-height:1.1;font-weight:300;opacity:0;transform:translateX(70px);transition:opacity 1s, transform 1.2s; color: #fff;}
.main-visual .main-visual-tit2{position:absolute;top:290px;right:20px;left:20px;z-index:10;font-size:16px;line-height:1.3;font-weight:300;opacity:0;transform:translateX(70px);transition:opacity 1s, transform 1.2s; color: #fff;}
.main-visual .main-visual-desc{margin-bottom:25px;line-height:1.5;word-break:keep-all;opacity:0;transform:translateX(70px);transition:opacity 1s, transform 1.2s;transition-delay:0.1s}
.main-visual .info{position:absolute;bottom:40px;z-index:10;padding:0 20px}
.main-visual .img img{width:100%;transform:perspective(500px) rotate(.001deg)}
.main-visual .btn-more{display:block;width:156px;height:52px;border:2px solid #fff;color:#fff;line-height:48px;text-align:center;opacity:0;transform:translateX(70px);transition:opacity 1s, transform 1.2s;transition-delay:0.2s}
.main-visual .btn-wrap{position:absolute;right:20px;bottom:130px;left:20px;height:36px}
.main-visual .pagination-wrap{position:absolute;top:50%;right:40px;left:40px;z-index:10;height:2px;margin-top:-1px;background-color:rgba(255, 255, 255, 0.4)}
.main-visual .pagination-wrap > .percent{position:absolute;top:0;right:0;left:0;z-index:10;height:2px;background-color:transparent}
.main-visual .move{display:flex;position:absolute;top:0;right:0;left:0;height:2px}
.main-visual .move .target{overflow:hidden;position:relative;flex:1;text-indent:-9999px}
.main-visual .move .target .target-percent{position:absolute;top:0;left:0;width:auto;height:2px;background:#0958ce}
/* .main-visual .move .target:nth-child(1){background:red}
.main-visual .move .target:nth-child(2){background:orange}
.main-visual .move .target:nth-child(3){background:yellow}
.main-visual .move .target:nth-child(4){background:green} */
.main-visual .swiper-button-prev,
.main-visual .swiper-button-next{top:0;width:25px;height:25px;margin:6px 0 0;border-style:solid;border-color:#fff;background-image:none;transform:rotate(-45deg);outline:none}
.main-visual .swiper-button-prev{border-width:3px 0 0 3px}
.main-visual .swiper-button-next{border-width:0 3px 3px 0}
.main-visual .new-product{display:none}

/* visual color */
.main-visual-tit.visual-c-white,
.main-visual-desc.visual-c-white{color:#fff}
.main-visual-tit.visual-c-black,
.main-visual-desc.visual-c-black{color:#000}
.main-visual .move .target .target-percent.visual-c-white{background:#fff}
.main-visual .move .target .target-percent.visual-c-black{background:#000}
.main-visual .move .target .target-percent.visual-c-yellow{background:#f4c61e}

/* active */
.main-visual .swiper-slide-active .main-visual-tit,
.main-visual .swiper-slide-active .main-visual-tit1,
.main-visual .swiper-slide-active .main-visual-tit2,
.main-visual .swiper-slide-active .main-visual-desc,
.main-visual .swiper-slide-active .btn-more{opacity:1;transform:translateX(0)}





@media (min-width: 712px) {
    /* .main-visual .swiper-slide{overflow:hidden} */
    .main-visual .visual-wrap{position:absolute;top:0;left:50%;width:100%;max-width:712px;height:100%;margin-left:-356px;padding:0 20px}
    .main-visual .main-visual-tit{top:160px;width:80%;font-size:40px;line-height:1.2;color: #fff;}
    .main-visual .main-visual-tit1{top:110px;width:55%;font-size:25px;line-height:1.2;color: #fff;}
    .main-visual .main-visual-tit2{top:360px;width:55%;font-size:20px;line-height:1.2;color: #fff;}
    .main-visual .main-visual-desc{margin-bottom:28px}
    .main-visual .info{bottom:60px;left:40%;padding-right:0}
    /* .main-visual .img{position:relative;left:50%;width:100%;min-width:1024px;max-width:inherit;transform:translateX(-50%)} */
    .main-visual .img{overflow:hidden}
    .main-visual .img img{position:relative;left:50%;width:100%;min-width:1024px;max-width:inherit;transform:translateX(-50%) rotate(.001deg) perspective(500px)}
    .main-visual .btn-wrap{top:85%;bottom:auto;left:50%;z-index:20;width:672px;transform:translateX(-50%)}
    .main-visual .pagination-wrap{right:60px;left:60px}
	
	.wspace{width: 100%; height: 100px;}
	
}

@media (min-width: 1200px) {
    .main-visual .visual-wrap{max-width:1280px;margin-left:-640px;padding:0 40px}
    .main-visual .main-visual-tit{top:180px;width:55%;font-size:45px;line-height:1.2;color: #fff; left:40px;}
    .main-visual .main-visual-tit1{top:130px;width:55%;font-size:25px;line-height:1.2;color: #fff;left:40px;}
    .main-visual .main-visual-tit2{top:380px;width:40%;font-size:18px;line-height:1.5;color: #fff;left:40px;}
    .main-visual .info{bottom:110px;left:50%;margin-right:110px;margin-left:107px;padding:0}
    .main-visual .img img{min-width:1920px}
    .main-visual .btn-wrap{width:1200px;margin-top:-10px}
    .main-visual .btn-more{width:190px}
    .main-visual .new-product{display:block;position:absolute;bottom:100px;left:40px;z-index:10;padding-right:74px;font-size:1.8rem;color:#fff;font-weight:900}
    .main-visual .new-product::before{content:"";position:absolute;top:19px;right:0;width:55px;height:1px;background-color:#fff}
	
	.wspace{width: 100%; height: 120px;}
	.header-util-link {display: none;}

}
/* 메인 비주얼 [e] */

/*사업설명*/
.main-business ul {padding-top: 40px;}
.main-business ul li{float: left; text-align: center; width: 50%; }
.main-business ul li:nth-child(3),.main-business ul li:nth-child(4){margin-top: 40px;}

.main-business ul li h3{font-size: 1.8rem; margin-top: 20px; margin-bottom: 10px;}
.main-business ul li p{font-size: 1.1rem;}

@media (min-width: 712px){
	.main-business ul {padding-top: 60px;}
	.main-business ul li{float: left; text-align: center; width: 25%; border-right: 1px solid #b2b2b2;}
	.main-business ul li:nth-child(2){border-right: 1px solid #b2b2b2;}
	.main-business ul li:nth-child(4){border:none;}
	.main-business ul li:nth-child(3),.main-business ul li:nth-child(4){margin-top: 0;}
	.main-business ul li h3{font-size: 1.9rem; margin-top: 20px; margin-bottom: 10px;}
	.main-business ul li p{font-size: 1.4rem;}
}

@media (min-width: 1200px) {
	.main-business ul {padding-top: 60px;}
}



/*오시는길*/
.main-location ul {padding-top: 40px; margin-bottom: 60px; position: relative;}
.main-location ul li{text-align: left; width: 100%;}
.main-location ul li iframe{height: 300px;}
.main-location ul li i{color: #00598c;}
.main-location ul li .icon{font-size: 1.8rem; margin-top: 40px; display: block; font-weight: bold;}
.main-location ul li .line{position: absolute; top: 530px; left: 0; width: 100%; height: 1px; background-color: #b2b2b2;}
.main-location ul li p{font-size: 1.5rem; margin-top: 10px;}

@media (min-width: 712px){
	.main-location ul {padding-top: 60px; margin-bottom: 60px; }
	.main-location ul li .icon{font-size: 1.9rem;}
	}

@media (min-width: 1200px) {
	.main-location ul {padding-top: 60px; margin-bottom: 100px;}
	.main-location ul li{float: left; text-align: left; width: 50%;}
	.main-location ul .li2{padding: 20px 60px;}
	.main-location ul li iframe{height: 350px;}
	.main-location ul li .icon2{margin-top: 30px;}
	.main-location ul li .line{display: none;}
	
	}




/*포폴*/
.main-pp-tit{text-align: center; display: inherit; padding-top: 60px; margin-bottom: 30px; font-size: 2.5rem;}
.main-pp-tit2{font-size: 1rem; display: block; font-weight: 500; color: #00598c;}

@media (min-width: 712px){
   .main-pp-tit{padding-top: 70px;}
	.main-pp-tit{font-size: 3.2rem;}
	.main-pp-tit2{font-size: 1.2rem;}
}

@media (min-width: 1200px) {
	.main-pp-tit{padding-top: 100px;}
}


/*온라인문의*/
.main-contact{position:relative}
.main-contact .inner{position:relative;margin:0 auto;padding:0 40px}
.main-contact::before{content:"";position:absolute;top:0;left:0;width:100%; height:117%;background:url(../img/section_3_bg.jpg) no-repeat center/cover;}
.main-contact .main-contact-tit{display:block;position:relative;z-index:10;padding-top:50px;font-size:2.5rem;color:#333;line-height:1.2; margin-bottom: 40px; text-align: center; color:#fff;}
.main-contact-tit2{font-size: 1rem; display: block; margin-top: 1rem; font-weight: 300;}
.main-contact ul {text-align: center; width: 100%; margin-left: auto; margin-right: auto;}
.main-contact ul li{float: left; text-align: left; width: 100%;}
.main-contact ul .li2{text-indent: -9999px; height: 0;}
.main-contact ul li textarea{width: 100%; height: 170px; background-color: rgba( 255, 255, 255, 0.2); margin-top: 16px; color: #fff; padding: 10px; box-sizing: border-box; border: none;}
.form-group {position: relative; display: block;margin-bottom: 30px; }
.form-group2{ position: relative;
  display: block;}
  .form-group2 span {
    font-size: 16px;
    color: #fff;
    position: absolute;
    top: 11px;
    transition: all .2s ease;
    transform-origin: 0 0;
    cursor: text; }

.button {
  border: none;
  width: 162px;
  height: 51px;
  border: 2px solid #fff;
  margin: auto;
  margin-top: 40px;
  margin-bottom: 70px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  color: #fff;
  text-align: center;
  line-height: 51px;
  text-transform: uppercase;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s; }
.agree{color: #fff;}
.agree a{border-bottom: 1px solid #fff;}


@media (min-width: 712px){
	.form-group {position: relative; display: block;margin-bottom: 48px; }
	.main-contact ul li{}
	.main-contact ul .li1{width: 45%;}
	.main-contact ul .li2{width: 10%;  height: 10%}
	.main-contact ul .li3{width: 45%;}
		.main-contact .main-contact-tit{padding-top:60px;margin-bottom: 40px; }
		.main-contact .main-contact-tit{font-size:3.2rem;}
	.main-contact-tit2{font-size: 1.2rem;}
	.button {
  margin-top: 40px;
  margin-bottom: 100px;
 }
	.main-contact ul li textarea{height: 260px;}
}

@media (min-width: 1200px) {
	.main-contact .main-contact-tit{padding-top:90px;}
}


:focus {
  outline: none; }

  .form-group span {
    font-size: 16px;
    color: #fff;
    position: absolute;
    top: 11px;
    transition: all .2s ease;
    transform-origin: 0 0;
    cursor: text; }
  .form-group span.border {
    height: 2px;
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    top: 41px;
    transform: scaleX(0);
    transition: all .15s ease;
    background: #fff; }

.form-control {
  color:#fff;
  border: none;
  border-bottom: 1px solid #fff;
  display: block;
  width: 100%;
  height: 43px;
  font-size: 16px;
  background: none;}
  .form-control:focus, .form-control:valid {
    border-bottom: 1px solid #fff; }
    .form-control:focus + span, .form-control:valid + span {
      transform: translateY(-22px) scale(0.8); }
      .form-control:focus + span + .border, .form-control:valid + span + .border {
        transform: scaleX(1); }

textarea.form-control {
  padding-top: 10px;
  padding-bottom: 10px; }
  .button i {
    margin-left: 10px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out; }
  .button:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0058ce;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out; }
  .button:hover {
    border-color: transparent; }
    .button:hover:before {
      -webkit-transform: scaleX(1);
      transform: scaleX(1); }
    .button:hover i {
      -webkit-transform: translateX(4px);
      transform: translateX(4px); }

@media (max-width: 767px) {
  h3 {
    font-size: 38px; }

  p {
    font-size: 14px;
    padding: 0; }

  .inner2 {
    padding: 27px 20px 37px;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none; }

  .wrapper {
    background: #0058ce;
    border: 10px solid #0fff; } }

/*# sourceMappingURL=style.css.map */




/*********************************************
* 메인 [e]
**********************************************/