/*banner*/
#banner{ width:100%; height:90vh;}
#banner .banner-in{ width:100%; height:100%; position:relative; top:0; left:0; }
.swiper {
	width: 100%;
	height: 100%;
	z-index: 1;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;

	/* 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;
}
/* #banner .banner-in{ height: 100vh;} */
#banner .banner-in .banner-swiper{ width:100%; height: 100%; position: relative;}
.banner-swiper .img1{background:url(../img/main/image1.jpg) no-repeat 50% 0%/cover;}
.banner-swiper .img2{background:url(../img/main/image2.jpg) no-repeat 50% 50%/cover;}
.banner-swiper .img3{background:url(../img/main/image3.jpg) no-repeat 50% 50%/cover;}
.banner-swiper .img4{background:url(../img/main/image4.jpg) no-repeat 50% 50%/cover;}
.banner-swiper .img5{background:url(../img/main/image5.jpg) no-repeat 50% 50%/cover;}
.banner-swiper .img6{background:url(../img/main/image6.jpg) no-repeat 50% 50%/cover;}
.banner-swiper .img7{background:url(../img/main/image7.jpg) no-repeat 50% 50%/cover;}
.banner-swiper .img8{background:url(../img/main/image8.jpg) no-repeat 50% 50%/cover;}
.banner-swiper .img9{background:url(../img/main/image9.jpg) no-repeat 50% 50%/cover;}
.banner-swiper .img10{background:url(../img/main/image10.jpg) no-repeat 50% 0%/cover;}
.banner-swiper .img11{background:url(../img/main/image11.jpg) no-repeat 50% 0%/cover;}

#banner .banner-in .banner-txt{ position:absolute; top: 55%; left:50%; transform:translate(-50%, -50%); z-index:50; width: 80%;}
#banner .banner-in .banner-txt h3{ font-family: 'Paperlogy3'; font-size:16px; color:#fff; text-align: center; letter-spacing: 2px;}
#banner .banner-in .banner-txt h2{ font-family: 'Paperlogy5'; font-weight: 500; font-size:72px; color:#fff; text-align: center;margin-top: 30px;}

#banner .banner-in .banner-swiper .swiper-button-next{position:absolute; top: 58%; right:40px; transform:translate(-50%, -50%); z-index: 250; cursor: pointer;}
#banner .banner-in .banner-swiper .swiper-button-prev{position:absolute; top: 58%; left:40px; transform:translate(-50%, -50%); z-index: 250; cursor: pointer;}
.swiper-button-next:after, .swiper-button-prev:after{ color:#fff; }

/*scroll 유도*/
#banner .banner-in .scroll{ width:180px; height:100px; border-radius:200px 200px 0px 0px; background-color:#fff; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 100;}
#banner .banner-in .scroll a{ padding-top:60px; }
#banner .banner-in .scroll a span{ position:absolute; bottom:20px; left:50%; width: 30px; height: 50px; margin-left: -15px; border: 2px solid #000; border-radius: 50px; box-sizing: border-box;}
#banner .banner-in .scroll a span::before{ position: absolute; top: 10px; left: 50%; content:''; width:6px; height:6px; margin-left:-3px; background:#000; border-radius:100%; -webkit-animation: sdb 2s infinite; animation: sdb 2s infinite; box-sizing:border-box; }
@-webkit-keyframes sdb{
	0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/*intro*/
#intro{ width:100%; height: auto; margin-top: 120px;}
#intro .intro-in{ width:100%; display: flex; justify-content: space-around; padding-bottom:120px;}
#intro .intro-in .intro-left{ width:48%; display: flex; justify-content: space-between; flex-direction: column; }
#intro .intro-in .intro-left .intro-txt{ margin-bottom:80px; }
#intro .intro-in .intro-left .intro-txt h3{ font-family: 'Paperlogy3'; font-weight: 300; font-size:13px; color:#848484;  }
#intro .intro-in .intro-left .intro-txt h1{ font-family: 'Paperlogy5'; font-size:45px; color:#000; margin-top:10px; margin-bottom:30px; }
#intro .intro-in .intro-left .intro-txt p{ font-family: 'Paperlogy3'; font-size:14px; color:#707070; line-height: 1.5em;}
#intro .intro-in .intro-left .intro-txt .intro-btn{ width:180px; height:50px; background-color:#373737; margin-top: 40px;}
#intro .intro-in .intro-left .intro-txt .intro-btn a{ width:100%; height:100%; color:#fff; font-family:'Roboto', sans-serif; font-weight:400; font-size:16px; text-align: center;display: inline-block; margin: 0 auto; line-height: 50px;}
#intro .intro-in .intro-left .intro-txt .intro-btn a:hover{ width:100%; height:100%; color:#373737; border: 1px solid #373737; background-color: #fff;}
#intro .intro-in .intro-left .left-img{ width: 100%; height:520px; background:url(../img/main/image3.jpg) no-repeat center/cover; }
#intro .intro-in .intro-right{ width:48%; height: 100%;}
#intro .intro-in .intro-right .right-img{ width:100%; aspect-ratio: 1; float:left; background: url(../img/main/image1.jpg) no-repeat 100% 50%/cover;  }

/*tab list*/
/*tabmenu list*/
#tab-list{ margin-top:150px; height:auto; width: 100%;}
#tab-list .tab-in{ width:100%; height:100%; margin: 0 auto;}
#tab-list .tab-in .tabmenu{ margin: 0 auto;  height:100%; width: 100% !important;}
#tab-list .tab-in .tabmenu .list{ overflow:hidden; display: flex; justify-content: center; margin: 0 auto;}
#tab-list .tab-in .tabmenu .cont-area{ width:100%;  height: 100%;}
#tab-list .tab-in .tabmenu .cont-area .con{ display:none; width:100%; height:100%; }
#tab-list .tab-in .tabmenu .cont-area li.is-on{width: 100%;}
#tab-list .tab-in .tabmenu .cont-area li.is-on .con{ display:block;  }
#tab-list .tab-in .tabmenu .list  li{ margin: 0 30px; }
#tab-list .tab-in .tabmenu li a{  display: inline-block; font-family:'Roboto', sans-serif; font-size:14px; font-weight:500; color: #717171;}
#tab-list .tab-in .tabmenu li.is-on .btn{font-family:'Roboto', sans-serif; font-size:14px; font-weight:700; color: #000; border-bottom: 2px solid #000; padding-bottom: 5px;}
ul.list_con{ width: 100%; padding: 30px; margin: 40px -30px;}
ul.list_con li.list_img{ width: calc(33% - 60px); margin: 0px 30px; display: inline-block; position: relative; vertical-align: top;} /*수정*/
ul.list_con li.list_img.list1{ height: 460px;}
ul.list_con li.list_img.list2{ height: 500px;}
ul.list_con li.list_img.list3{ height: 540px;}
ul.list_con li.list_img a{display: block; width: 100%; height: 100%;}
ul.list_con li.list_img a .img_tit{ position:absolute; width:100%; background:#fff; position:absolute; padding: 20px 0 10px 20px; bottom:0; left:0; opacity: 0; transition: 0.5s all;}
ul.list_con li.list_img:hover .img_tit{opacity: 1; }
ul.list_con li.list_img a .img_tit h3{font-family: 'Paperlogy3'; font-weight: 300; font-size:14px; color: #808080;}
ul.list_con li.list_img a .img_tit h1{font-family: 'Paperlogy5'; font-size:28px; line-height: 1.5em; color: #000;}

ul.list_con li.list_img.list_img1{ background:url(https://pohangp.cdn1.cafe24.com/sub2/image1.jpg) 50% no-repeat; background-size: cover; }
ul.list_con li.list_img.list_img2{ background:url(http://pohangp.cdn1.cafe24.com/sub2/image2.jpg) 50% no-repeat; background-size: cover; }
ul.list_con li.list_img.list_img3{ background:url(http://pohangp.cdn1.cafe24.com/sub2/image5.jpg) 50% no-repeat; background-size: cover; }
ul.list_con li.list_img.list_img4{ background:url(http://pohangp.cdn1.cafe24.com/sub2/image6.jpg) 50% no-repeat; vertical-align: bottom;background-size: cover; margin: 0px 30px 60px;}
ul.list_con li.list_img.list_img5{ background:url(http://pohangp.cdn1.cafe24.com/sub2/image7.jpg) right no-repeat; background-size: cover; vertical-align: bottom; margin: 0px 30px 60px;}
ul.list_con li.list_img.list_img6{ background:url(../img/sub3/image1.jpg) 50% no-repeat; vertical-align: bottom;background-size: cover; margin: 0px 30px 60px; }
ul.list_con li.list_img.list_img7{ background:url(../img/sub3/image5.jpg) 50% no-repeat; vertical-align: bottom;background-size: cover; }
ul.list_con li.list_img.list_img8{ background:url(../img/sub3/image6.jpg) 50% no-repeat; vertical-align: bottom;background-size: cover; }
ul.list_con li.list_img.list_img9{ background:url(../img/sub3/image7.jpg) 50% no-repeat; vertical-align: bottom;background-size: cover; }
@media screen and (max-width: 1400px){
    ul.list_con{ width: 100%; padding: 20px; margin: 40px -20px;}
    ul.list_con li.list_img{ width: calc(33.3333% - 40px); margin: 0px 20px; display: inline-block; position: relative; vertical-align: top; }
    ul.list_con li.list_img.list1{ height: 360px;}
    ul.list_con li.list_img.list2{ height: 400px;}
    ul.list_con li.list_img.list3{ height: 440px;}
    ul.list_con li.list_img.list_img4{ margin: 0px 20px 40px;}
ul.list_con li.list_img.list_img5{ margin: 0px 20px 40px;}
ul.list_con li.list_img.list_img6{ margin: 0px 20px 40px;}
    ul.list_con li.list_img.list_img10{ margin: 0px 20px 40px;}
ul.list_con li.list_img.list_img11{ margin: 0px 20px 40px;}
ul.list_con li.list_img.list_img12{ margin: 0px 20px 40px;}
    ul.list_con li.list_img.list_img18{ margin: 40px 20px 0px;}
}

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

	#banner .banner-in .banner-txt h3{ font-size:12px; }
	#banner .banner-in .banner-txt h2{ font-size:60px; margin-top: 10px;}

	#intro{ height:1100px; }
	#intro .intro-in{ flex-direction:column; }
	#intro .intro-in .intro-left{ width:100%; }
  #intro .intro-in .intro-left .intro-txt { margin: 0 10px 80px; }
	#intro .intro-in .intro-right{ width:100%; }
	#intro .intro-in .intro-left .left-img{ margin-left:0px; }
	#intro .intro-in .intro-right .right-img{ display:none; }
    ul.list_con{ width: 100%; padding: 0;  margin: 40px 10px;}
    ul.list_con li.list_img{ width: calc(100% - 20px); margin: 20px 0 !important; display: inline-block; position: relative; vertical-align: top; height: 500px !important;}
ul.list_con li.list_img a .img_tit { opacity: 1; }

}

@media screen and (max-width: 780px){
	header .header-in .nav{ display:none; }

  #banner{ height:80vh; }

	#banner .banner-in .banner-txt h3{ font-size:12px; }
	#banner .banner-in .banner-txt h2{ font-size:24px; margin-top: 10px;}

  #banner .banner-in .banner-swiper .swiper-button-next{position:absolute; top: 58%; right:20px; transform:translate(0%, -50%); z-index: 250; cursor: pointer;}
#banner .banner-in .banner-swiper .swiper-button-prev{position:absolute; top: 58%; left:20px; transform:translate(0%, -50%); z-index: 250; cursor: pointer;}
.swiper-button-next:after, .swiper-button-prev:after{ color:#fff;}

#intro{ height:auto; }
#intro .intro-in{ flex-direction:column; padding-bottom: 0px;}
#intro .intro-in .intro-left .intro-txt h1{ font-size: 36px;}
#intro .intro-in .intro-left{ width:100%; }
#intro .intro-in .intro-right{ width:100%; }
#intro .intro-in .intro-left .left-img{ margin-left:0px; }
#intro .intro-in .intro-right .right-img{ display:none; }
ul.list_con li.list_img{ height: 400px !important;}
/* ul.list_con li.list_img a .img_tit { opacity: 1; } */

ul.list_con li.list_img a .img_tit h1{ font-size: 20px;}
ul.list_con li.list_img a .img_tit h3{ font-size: 12px;}
	
}

@media screen and (max-width: 540px){
  #banner .banner-in .banner-txt { width: 75%; }

	ul.list_con li.list_img{ height: 300px !important;}
}