@charset "utf-8";

#wrap {position:relative; padding-top:0}

.mainVisArea {position:relative; width:100%; height:auto; overflow:hidden; margin-top:120px; position:relative; z-index:0}

.mainVisArea .swiper-wrapper .swiper-slide {display:block; position:relative; width:100%; height:720px; background-position:50% 50%; background-repeat:no-repeat; display:flex; justify-content:center; align-items:center; animation: motion 15s linear 0s infinite alternate}
.mainVisArea .swiper-wrapper .swiper-slide .txtBox {position:absolute; top:180px; left:50%; font-size:50px; -ms-transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0); -moz-transform:translate(-50%, 0); -o-transform:translate(-50%, 0); transform:translate(-50%, 0); opacity:0; z-index:100}
.mainVisArea .swiper-wrapper .swiper-slide .bg {width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; object-fit:cover; object-position:0 50%; animation: motion 20s linear 0s alternate}

/*1번 슬라이드*/
.mainVisArea .swiper-wrapper .swiper-slide .text {z-index:10; transform:translateY(10%); opacity:0; transition:opacity 2s, transform 2s; transition-delay:0.6s; color:#fff; font-size:30px; font-weight:500; word-break:keep-all; text-align:center; line-height:1.5; text-shadow: 3px 4px 5px #333}
.mainVisArea .swiper-wrapper .swiper-slide .text .title {font-size:70px; line-height:1}
.mainVisArea .swiper-wrapper .swiper-slide .text strong {font-size:120px; font-weight:800; display:block; color:#2daae1}
.mainVisArea .swiper-wrapper .swiper-slide.swiper-slide-active .text {transform:translateY(0); opacity:1}

.mainVisArea .swiper-slide-active {transform:translate(0,0)!important}

@keyframes typing {
	
  0% {width:0%}
  100% {width:100%}
	
}

@keyframes motion {

	0% {background-position: -400px 50%}
	50%{background-position: -200px 50%}
	100% {background-position: 0 50%}

}
/*
.mainVisArea .swiper-pagination {display:inline-block; padding:15px 65px 15px 31px;  width:auto; height:11px; left:50%; bottom:50px; background:rgba(0,0,0,0.5); overflow:hidden; border-radius:20.5px; -ms-transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0); -moz-transform:translate(-50%, 0); -o-transform:translate(-50%, 0); transform:translate(-50%, 0);}
.mainVisArea .swiper-pagination .swiper-pagination-bullet {vertical-align:top; width:11px; height:11px; margin:0 0 0 10px; background:url("/images/main/imgRoll_indi.png") no-repeat 50% 50%;}
.mainVisArea .swiper-pagination .swiper-pagination-bullet:first-child {margin:0;}
.mainVisArea .swiper-pagination .swiper-pagination-bullet-active {background:url("/images/main/imgRoll_indi_on.png") no-repeat 50% 50%;}
.mainVisArea .swiper-pagination .playBtn {display:block; width:41px; height:41px; position:absolute; top:0; right:0; background:rgba(0,0,0,0.2) url("/images/main/play_bt.png") no-repeat 50% 50%; border-radius:20.5px;}.mainVisArea .swiper-pagination .playBtn.on {background:rgba(0,0,0,0.2) url("/images/main/play_bt_on.png") no-repeat 50% 50%;}
*/


.section2 {padding:70px 0; border-bottom:#808080 solid 1px}
.section3 {padding:70px 0}
.section4 {height:370px; padding:90px 0 70px 0; box-sizing:border-box; overflow:hidden; background-image:url('/images/main/main_bg2.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center; background-attachment:fixed}
.section5 {padding:70px 0}

.container {clear:both; max-width:1600px; margin:0 auto; font-size:0}

h2 {font-size:40px; font-weight:500; margin-bottom:50px}

.section2 h2 {text-align:center}

.product {display:flex; flex-wrap:wrap; margin-left:-30px; box-sizing:border-box}
.product a {width:calc(16.66% - 30px); margin-left:30px; box-sizing:border-box; position:relative; text-align:center}
.product a label {display:block; width:50px; height:50px; background:#244086; border-radius:50%; color:#fff; font-size:20px; font-weight:800; text-align:center; line-height:50px; position:absolute; left:0; top:0; z-index:1}
.product a .img {background:#f1f1f1; border-radius:30px; text-align:center; position:relative; height:240px; overflow:hidden}
.product a .img img {width:100%; height:100%; object-fit:cover; object-position:50% 50%; transition:scale 500ms}
.product a .title {font-size:23px; line-height:1.2; font-weight:500; margin:15px 0; text-align:center; box-sizing:border-box}
.product a span {background:#fff; border-radius:30px; border:#dbdbdb solid 1px; padding:5px 15px; font-size:16px; transition:all 0.3s}
.product a:nth-child(n+7) {margin-top:40px}

.product a .inquiry {background:#244086; margin-bottom:30px; border-radius:30px; text-align:center; position:relative; height:240px; padding-top:50px; box-sizing:border-box}
.product a .inquiry p {font-size:20px; color:#fff; width:100%; margin-bottom:30px}

.product a:hover .img img {scale:1.1}
.product a:hover span {background:#666; color:#fff}

.d_link {display:flex; flex-wrap:wrap; margin-left:-90px}
.d_link a {width:calc(33.33% - 90px); margin-left:90px; background:#244086; color:#fff; box-sizing:border-box; padding:40px; position:relative}
.d_link a:nth-child(2) {background:#5467db}
.d_link a:nth-child(3) {background:#3d91ee}
.d_link a h2 {font-size:30px; margin-bottom:90px}
.d_link a span {font-size:18px; border:#fff solid 1px; padding:15px 40px; display:inline-block}
.d_link a img {position:absolute; right:40px; bottom:40px}

.catalog {text-align:center; color:#fff; background:url('/images/main/catalog_ico.png') no-repeat right bottom; font-size:19px}
.catalog h2 {font-size:50px}
.catalog p {margin-bottom:30px}
.catalog a {display:inline-block; border:#fff solid 1px; padding:20px 30px; color:#fff}

.gallery {position:relative}
.gallery ul {display:flex; flex-wrap:wrap; margin-left:-20px}
.gallery li {width:calc(25% - 20px); margin-left:20px}
.gallery li:nth-child(n+5) {margin-top:30px}
.gallery li a {display:block; width:100%; height:100%}
.gallery a .img {height:280px; overflow:hidden}
.gallery a .img img {width:100%; height:100%; object-fit:cover; object-position:50% 50%}
.gallery a p {border:#dbdbdb solid 1px; padding:20px; font-size:20px}
.gallery .more_view {position:absolute; right:0; top:0}


@media all and (max-width:1400px){
	
	.container {padding:0 10px}
	
	.product a {width:calc(25% - 30px)}
	.product a:nth-child(n+5) {margin-top:40px}
	
}


@media all and (max-width:1200px){
		
	.mainVisArea {margin-top:80px}
	
	.d_link {margin-left:-30px}
	.d_link a {width:calc(33.33% - 30px); margin-left:30px}
	
	.gallery li {width:calc(33.33% - 20px)}
	.gallery li:nth-child(n+4) {margin-top:30px}

}


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

	.product a {width:calc(33.33% - 30px)}
	.product a:nth-child(n+4) {margin-top:40px}
	
	.d_link a {padding:30px 20px}
	.d_link a h2 {font-size:25px; margin-bottom:50px}
	.d_link a span {padding:15px 20px}
	.d_link a img {right:20px; bottom:30px}
	
}


@media all and (max-width:768px){
	
	.d_link {margin-left:0}
	.d_link a {width:100%; margin-left:0; padding:40px}
	.d_link a span {font-size:16px}
	.d_link a img {right:40px; bottom:40px}
	
	.gallery li {width:calc(50% - 20px)}
	.gallery li:nth-child(n+3) {margin-top:30px}
		
}

@media all and (max-width:640px){
	
	.mainVisArea .swiper-wrapper .swiper-slide {height:600px}
	.mainVisArea .swiper-wrapper .swiper-slide .text {font-size:20px; text-shadow: 3px 4px 5px #333}
	.mainVisArea .swiper-wrapper .swiper-slide .text .title {font-size:40px}
	.mainVisArea .swiper-wrapper .swiper-slide .text strong {font-size:80px}
	.mainVisArea .swiper-wrapper .swiper-slide .bg {object-fit:contain}
	
	.section2 {padding:40px 0}
	.section3 {padding:40px 0}
	.section4 {height:300px; padding:60px 0 60px 0} 
	
	h2 {font-size:25px; margin-bottom:30px}
	
	.product a {width:calc(50% - 30px)}
	.product a:nth-child(n+3) {margin-top:40px}
	.product a label {width:40px; height:40px; font-size:18px; line-height:40px}
	.product a .title {font-size:19px}
	.product a span {font-size:15px}
	
	.catalog {font-size:17px; background-size:50px}
	.catalog h2 {font-size:40px}
	.catalog p {margin-bottom:30px}
	.catalog a {padding:15px 20px}
	
	.gallery ul {margin-left:0}
	.gallery li {width:100%; margin-left:0}
	.gallery li:nth-child(n+2) {margin-top:30px}
	.gallery a p {font-size:18px}
	
}

@media all and (max-width:480px){

	.product a .img {height:200px}
	.product a .title {font-size:17px}
	.product a .inquiry {height:200px; padding-top:30px}
	.product a .inquiry p {font-size:18px; margin-bottom:20px}
	
}