@charset "utf-8";
.mbr { display: none; }

/* #banner{ height:450px; } */
.scroll{ display:none; }
.banner-swiper .img1{background:url(../img/sub3/image1.jpg) no-repeat; background-size: cover; background-position: center;}
.banner-swiper .img2{background:url(../img/sub3/image2.jpg) no-repeat 50% 50%/cover;}
.banner-swiper .img3{background:url(../img/sub3/image3.jpg) no-repeat 50% 50%/cover;}
.banner-swiper .img4{background:url(../img/sub3/image4.jpg) no-repeat 50% 50%/cover;}
.banner-swiper .img5{background:url(../img/sub3/image5.jpg) no-repeat 50% 50%/cover;}
.banner-swiper .img6{background:url(../img/sub3/image6.jpg) no-repeat 50% 50%/cover;}
.banner-swiper .img7{background:url(../img/sub3/image7.jpg) no-repeat 50% 50%/cover;}
.banner-swiper .img8{background:url(../img/sub3/image8.jpg) no-repeat 50% 50%/cover;}

#intro{ height:auto; }
#intro .intro-in{ padding-bottom:0px; width:95.5%; margin:0 auto; }
#intro .intro-in .intro-right .right-img{ background:url(../img/sub3/image2.jpg) no-repeat; background-size:cover; height: auto; aspect-ratio: 4/3; }
#intro .intro-in .intro-left .intro-txt h1{ margin-bottom:30px; font-size: 36px; }
#intro .intro-in .intro-left .intro-txt p{ line-height:30px; }
#intro .intro-in .intro-left .intro-txt>:nth-child(4) { margin-top: 30px; font-weight: 600; }
#intro .intro-in .intro-left .intro-txt>:nth-child(4) span { color: blue; }

#intro.intro2 .intro-in .intro-right .right-img{ background:url(../img/sub3/image5.jpg) no-repeat; background-size:cover; }
#intro.intro3 .intro-in .intro-right .right-img{ background:url(../img/sub3/image6.jpg) no-repeat; background-size:cover;}
#intro.intro4 .intro-in .intro-right .right-img{ background:url(../img/sub3/image7.jpg) no-repeat; background-size:cover;}


/*외부전경*/
#view{ width:100%; height: auto; margin-top: 120px}
#view .view-in{ width:95%;  margin:0 auto; }
#view .view-in h3{ text-align:center; font-family:'Noto Sans KR', sans-serif; font-weight:400; font-size:12px; color: #707070; margin-bottom: 10px;}
#view .view-in h1{font-family:'Roboto', sans-serif; font-weight:500; font-size:60px; color:#000; text-align:center; }
#view .view-in .view-list{ width:100%; height:auto;}
#view .view-in .view-list .list1, #view .view-in .view-list .list2{ display:flex; justify-content:space-between; width:100%; height:600px; margin-top: 50px;}
#view .view-in .view-list .list1 .img1{ width:100%; height:100%; background:url(../img/sub3/image1.jpg) no-repeat center/cover; margin: 0px 10px 0 0;}
#view .view-in .view-list .list1 .img2{ width:100%; height:100%; background:url(../img/sub3/image2.jpg) no-repeat center/cover; margin: 0px 10px 0 10px;}
#view .view-in .view-list .list1 .img3{ width:100%; height:100%; background:url(../img/sub3/image3.jpg) no-repeat center/cover; margin: 0px 10px 0 10px;}

#view .view-in .view-list .list2 .img1{ width:100%; height:100%; background:url(../img/sub3/image4.jpg) no-repeat center/cover; margin: 0px 10px 0 0;}
#view .view-in .view-list .list2 .img2{ width:100%; height:100%; background:url(../img/sub3/image5.jpg) no-repeat center/cover; margin: 0px 10px 0 10px;}
#view .view-in .view-list .list2 .img3{ width:100%; height:100%; background:url(../img/sub3/image6.jpg) no-repeat center/cover; margin: 0px 10px 0 10px;}

/*design*/
#design{ height: 150px;}
#design .design-in{ width:100%; height:100%; text-align: center; margin-top:120px;}
#design .design-in h1{ font-family: 'Crimson Text', serif; font-weight:400; font-size: 36px; color: #717171; margin-bottom: 30px;}
#design .design-in p{ font-family:'Yantramanav', sans-serif; font-size:14px; font-weight:500; color: #717171; line-height: 24px; margin-bottom: 30px; color: #ccc; font-style: italic;}

/**********************************************반응형**********************************************************/

@media screen and (max-width: 1024px){
	#intro .intro-in .intro-left .intro-txt h1{ text-align:center; }
	#intro .intro-in .intro-left .intro-txt h3{ text-align:center; }
	#intro .intro-in .intro-left .intro-txt p{ text-align:center; margin-top:50px; }

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

	#intro .intro-in{ flex-direction:column; }
	#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-left .intro-txt{ margin-bottom:0; } */
	#intro .intro-in .intro-right .right-img{ display:block; }

	#intro .intro-in .intro-right{ display:block; }

	/*외부전경*/
	#view .view-in .view-list .list1 .img3{ display: none;}
	#view .view-in .view-list .list2 .img3{ display: none;}
	#view .view-in .view-list .list3 .img3{ display: none;}
	#view .view-in .view-list .list4 .img3{ display: none;}
	#view .view-in .view-list .list5 .img3{ display: none;}

	
}

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

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

	#intro .intro-in .intro-left .intro-txt { margin: 0 10px 40px; }
	#intro .intro-in .intro-left .intro-txt h1{ font-size:32px; }

	#intro .intro-in .intro-right{ display: none; }
	#design{display: none;}

	#intro .intro-in{ flex-direction:column; }
	#intro .intro-in .intro-left{ width:100%; }
	#intro .intro-in .intro-right{ width:100%; display: block; }
	#intro .intro-in .intro-left .left-img{ margin-left:0px; }
	#intro .intro-in .intro-right .right-img{ display:block; }

	#view .view-in .view-list{ margin-top:50px; }

	#view .view-in .view-list .list1{ flex-direction:column; height:1350px; margin: 10px auto;}
	#view .view-in .view-list .list2{ flex-direction:column; height:1350px; margin: 10px auto;}
	#view .view-in .view-list .list3{ flex-direction:column; height:900px; margin: 10px auto;}

	#view .view-in .view-list .list1 .img1{ width: 100%; height: 100%; margin: 0 auto 20px auto; background-size: cover;}
	#view .view-in .view-list .list1 .img2{ width: 100%; height: 100%; margin: 0 auto 20px auto; background-size: cover;}
	#view .view-in .view-list .list1 .img3{ display: block; width: 100%; margin: 0 auto 20px auto; background-size: cover;}

	#view .view-in .view-list .list2 .img1{ width: 100%; height: 100%; margin: 0 auto 20px auto;background-size: cover;}
	#view .view-in .view-list .list2 .img2{ width: 100%; height: 100%; margin: 0 auto 20px auto;background-size: cover;}
	#view .view-in .view-list .list2 .img3{ display: block; width: 100%; margin: 0 auto 20px auto; background-size: cover;}

	#view .view-in .view-list .list3 .img1{ width: 100%; height: 100%; margin: 0 auto 20px auto;background-size: cover;}
	#view .view-in .view-list .list3 .img2{ width: 100%; height: 100%; margin: 0 auto 20px auto;background-size: cover;}
	#view .view-in .view-list .list3 .img3{ display: none;}

	
}
@media screen and (max-width: 540px){
	.mbr { display: block; }

	#intro .intro-in .intro-left .intro-txt h1 { font-size: 26px; }
}