@charset "utf-8";
/* CSS Document */

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* mainpop */
/* 팝업 1의 위치 지정 */
#popup1 {
    top:5%;
    left: 10%;
}

/* 팝업 2의 위치 지정 */
#popup2 {
    top:5%;
    left: 30%;
   
}

/* 팝업 3의 위치 지정 */
#popup3 {
    top:5%;
    left: 50%;
   
}
.pop_main_area{position: fixed;
    width: auto;background-color: #091c35; 
    z-index: 1000;
    display: none;
        }
.pop_main_area .popup-content-inner img {width: 100%; height: 100%; display: block; object-fit: contain;}
.pop_main_area .popup-content-inner p {display: block;font-size: 14px; color: #fff; text-align: right; padding: 10px;}
.pop_main_area .popup-content-inner p button {outline: none; border: 0; background-color: #fff; color: #091c35; padding: 0 10px;margin-left: 20px; cursor: pointer;}

#wrap { width:100%;min-height: 100%;margin:0 auto;}
.main_content {width: 1600px;margin: 0 auto;}  
.inner {width:1400px;margin:0 auto;}
h2 {display:block;width:100%; text-align:center; margin: 75px auto 0;}
h2 strong {font-weight: 500;}
h2 span {display:block; width:100%;}
h2 span.main_tit { font-size:70px; font-weight: 700; margin-bottom: 60px;}
h2 span.main_txt {font-size:45px; font-weight: 400; color: #053878; line-height: 1.5em;}
h2 span.main_txt02 {font-size:30px; font-weight: 400; color: #053878; line-height: 1.5em;}

/* 메인슬라이드 */
.main_slider {position: relative; width:100%;height:100%;top:0;overflow: hidden;}
header h1 {position: absolute;top:5%; left:10rem; display:block;width:130px; height: 130px; background-image: url("/images/common/wcpec_logo.png"); background-position: center center; background-repeat: no-repeat; background-size: contain;opacity: 0.7;z-index:50;}
header h1 a {width:100%; height: 100%; display:block;}
.main_slider .swiper-container {
  width: 100%;
  height: 100%;
}
ul.swiper-wrapper{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.swiper-slide {width: 100%;
    height: 635px;
      text-align: center;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center; 
}
.swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

.main_slider .swiper-button-next {position: absolute;width:40px; height: 60px; color: #fff;  background: rgba(0, 0, 0, .4);z-index:2;}
.main_slider .swiper-button-next:after {font-size:40px;}
.main_slider .swiper-button-prev {position: absolute;width:40px; height: 60px; color: #fff;  background: rgba(0, 0, 0, .4);z-index:2;}
.main_slider .swiper-button-prev:after {font-size:40px;}

/* 설명글 */
.slide_txtarea {position: absolute; display:block;top:35%; left:10rem;}
.slide_txtarea span {display:block; width:1000px;color: #fff; text-align: left; line-height:130%;overflow: hidden;}
.slide_txtarea .slide_tit {font-size:65px; font-weight: 700;}
.slide_txtarea .slide_txt {font-size:30px; }

.swiper-slide.swiper-slide-active .slide_tit {animation: maintxtani 1s;
    animation-delay: .4s;
    animation-fill-mode: forwards;
    transform: translateY(100px);
    opacity: 0;}
.swiper-slide.swiper-slide-active .slide_txt { animation: maintxtani 1s;
    animation-delay: .8s;
    animation-fill-mode: forwards;
    transform: translateY(100px);
    opacity: 0;}

@keyframes maintxtani {
            form { transform: translateY(100px); opacity: 0;}
              to { transform: translateY(0); opacity: 1;}
        }
@-webkit-keyframes maintxtani {
  form { transform: translateY(100px); opacity: 0;}
  to { transform: translateY(0); opacity: 1;}
}

/* 대전소개 */
ul.main_mid {width:100%; display:block; margin:50px auto 100px;}
ul.main_mid:after {content: " ";display: table; clear:both;}
ul.main_mid li {position: relative; float: left; width:450px; height: 619px; margin-right: 25px;cursor: pointer; overflow: hidden;}
ul.main_mid li img {max-width:100%; height:auto;}
ul.main_mid li:last-child {margin-right: 0px;}

ul.main_mid li .mid_area {position: absolute;bottom:80px; left:50px;z-index:20;}
.mid_area a {display:block; width:100%; height: 100%;}

.mid_area .txt_area {}
.mid_area .txt_area h3 {display:block;color: #fff; font-size:40px; font-weight: bold;}
.mid_area .txt_area span {display:block;color: #fff;font-size:24px; border-bottom:2px solid #fff; padding-bottom: 20px;}
.mid_area .txt_area .mid_btn {width:70px; height: 25px; text-align: center; background-color: #fff; font-size: 18px; line-height:18px; margin-top:20px;}

.mid_thumb {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
}

.effect-image {
	max-width: none;
	width: -webkit-calc(100% + 50px);
	width: calc(100% + 50px);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,30px,0);
	transform: translate3d(0,30px,0);
}

.effect-target {
	-webkit-transform: translate3d(0,50px,0);
	transform: translate3d(0,50px,0);
}

.effect-target {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}


.effect-move:hover .effect-image{
	opacity: 1;
}

.effect-move:hover .effect-target,
.effect-move:hover .effect-image {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/* 홍보영상*/
.video_bg {position: relative; display:block; width:100%; height: 975px; background-image: url("/images/main/promo_bg.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; padding-top:10px; }
.video_bg .video-wrap {
  position: relative; display:block; width:100%; height: 650px; 
}
.video-wrap video {
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    width: 100%; max-width:1000px;
   height: auto;
	
}
.video-wrap p {  display:block; position: absolute; left:200px;width:800px;color: #cdcdcd;  }
.video-wrap p:nth-of-type(1){top:630px;font-size:14px;}
.video-wrap p:nth-of-type(2){top:660px;font-size:12px;}

@media screen and (max-width: 1440px){

    /* 팝업 2의 위치 지정 */
    #popup2 {
        left: 37%;

    }

    /* 팝업 3의 위치 지정 */
    #popup3 {
        left: 64%;

    }
}

@media screen and (max-width: 1400px){
        .main_content {width: 1200px;}
        .inner {width:90%;}
    

}

@media screen and (max-width: 1200px){
        .main_content {width: 1100px;}
    h2 {margin: 70px auto 0;}
    h2 span.main_tit { font-size:55px; margin-bottom: 50px;}
    h2 span.main_txt {font-size:25px;}
     h2 span.main_txt02 {font-size:20px;}
    
    header h1 {width:80px; height: 80px;left:9rem;}
    /* 설명글 */
    .slide_txtarea { left:10rem;}
    .slide_txtarea .slide_tit {font-size:45px;}
    .slide_txtarea .slide_txt {font-size:25px;}
    
    /* 대전소개 */
    ul.main_mid {margin:30px auto 70px;}
    ul.main_mid li { width:30%; height: 481px;margin-right:5%;}
    .mid_area .txt_area h3 {font-size:30px;}
    .mid_area .txt_area span {font-size:20px;}
    .mid_area .txt_area .mid_btn {width:60px; height: 22px; font-size: 16px;}
    
    /* 홍보영상*/
.video_bg {height: 875px; }
.video_bg .video-wrap {top:5px;}
    .video-wrap p {   left:30px;}
.video-wrap p:nth-of-type(1){top:620px;}
.video-wrap p:nth-of-type(2){top:650px;}
   
}
@media screen and (max-width: 1024px) {
#popup1 {

    left:2%;
   
}
/* 팝업 2의 위치 지정 */
#popup2 {

    left:32%;
   
}
    #popup3 {

    left:62%;
   
}
    .pop_main_area .popup-content-inner p {width: 300px;}
    
        .main_content {width: 90%;}
    header h1{display: none;}
    h2 { margin:50px auto 0;}
    h2 span.main_tit { font-size:40px; margin-bottom: 30px;}
    h2 span.main_txt {font-size:20px;}
    h2 span.main_txt02 {font-size:16px;}
    
    /* 대전소개 */
    ul.main_mid {margin:15px auto 50px;}
    ul.main_mid li { width:30%; height: 100%; margin-right:45.22222px;}
    .mid_area .txt_area h3 {font-size:20px;}
    .mid_area .txt_area span {font-size:16px; padding-bottom: 10px;}
    .mid_area .txt_area .mid_btn {width:50px; height: 20px; font-size: 14px;margin-top:10px;}
    
    /* 홍보영상*/
.video_bg {height: 575px; }
.video_bg .video-wrap {top:5px;height:400px; }
    .video-wrap video {max-width:640px;}
    .video-wrap p {  left:135px;width:500px;}
.video-wrap p:nth-of-type(1){top:390px;}
.video-wrap p:nth-of-type(2){top:410px;}
}

@media (max-width: 768px) { 
        /* 팝업 1의 위치 지정 */
#popup1 {
    top:0%;
left: 50%;transform: translateX(-50%);
}

    /* 팝업 2의 위치 지정 */
#popup2 {
    top:26%;
    left: 50%;transform: translateX(-50%); z-index: 50;
   
}
     /* 팝업 3의 위치 지정 */
#popup3 {
    top:60%;
    left: 50%;transform: translateX(-50%);
   
}   
   
    .main_swiper {margin-top:45px;}
    .swiper-slide {height:550px;}
    /* 설명글 */
    .slide_txtarea {left:5rem;}
    .slide_txtarea span {width:600px;}
    .slide_txtarea .slide_tit {font-size:30px;}
    .slide_txtarea .slide_txt {font-size:18px;}
    
    h2 { margin:40px auto 0;}
    h2 span.main_tit { font-size:30px; margin-bottom: 20px;}
    h2 span.main_txt {font-size:18px;}
    h2 span.main_txt02 {font-size:14px;}
    /* 대전소개 */
    ul.main_mid {margin:10px auto 40px;}
    ul.main_mid li { width:30%; margin-right:5%;}
    ul.main_mid li .mid_area {left:20px;}
    
   .video-wrap p { left:20px;}
.video-wrap p:nth-of-type(1){font-size:12px;}
.video-wrap p:nth-of-type(2){font-size:10px;}

}

@media (max-width: 480px) {

   .swiper-slide {height:400px;}
    .main_slider .swiper-button-next {width:30px; height: 50px;top:60%;}
    .main_slider .swiper-button-next:after {font-size:20px;}
    .main_slider .swiper-button-prev {width:30px; height: 50px;top:60%;}
    .main_slider .swiper-button-prev:after {font-size:20px;}
    
    /* 설명글 */
    .slide_txtarea {left:4rem;top:25%; }
    .slide_txtarea span {width:260px;}
    .slide_txtarea .slide_tit {font-size:20px;}
    .slide_txtarea .slide_txt {font-size:16px;}
    
    h2 { margin:30px auto 0;}
    h2 span.main_tit { font-size:24px; margin-bottom: 10px;}
    h2 span.main_txt {font-size:16px;}
    
    /* 대전소개 */
    ul.main_mid {margin:0px auto 30px;}
    ul.main_mid li { width:100%; margin-right:0%;}
    ul.main_mid li .mid_area {bottom:150px;left:30px;}
    
    /* 홍보영상*/
.video_bg {height: 375px; }
.video_bg .video-wrap {top:5px;height:260px; }
    .video-wrap video {max-width:320px;}
    
    .video-wrap p {left:25px;width:300px; }
.video-wrap p:nth-of-type(1){top:230px; letter-spacing: -1px;}
.video-wrap p:nth-of-type(2){top:250px;}

}
@media (max-width: 375px) {
    .slide_txtarea .slide_tit {font-size:16px;}
    .slide_txtarea .slide_txt {font-size:14px;}
    .video-wrap p {left:10px;}
}