@charset "utf-8";


/* ********************************* PC over : 1025 ~  ********************************* */

/* ******************** 공용 ******************** */
.main {}

/* 비쥬얼 */
.visual {height:calc(100dvh - 100px); text-align:center; color:#fff;  font-weight:700; position:relative;}
.visualWrap {padding:100px 0 0; display:flex; height:100%; align-items:center; justify-content:center; flex-direction:column; text-transform:uppercase; position:relative;}
.visual h2 {font-size:60px; line-height:1.3;}
.visual p {padding:30px 0 0; font-size:24px; transform:rotate(.03deg);}
.visual a {margin-top:12dvh;}
.visual a>* {}
.visual a i {display:inline-block; position:relative;}
.visual a i img {z-index:100; position:relative; transform:scale(.9); transition:all .3s ease;}
.visual a i:hover img {transform:scale(1);}
.visual a i:before, .visual a i:after {content:""; position:absolute; left:0; top:0; width:100%; height:100%;}
.visual a i:before {z-index:10; background:url(../images/main/btn_self1.webp) no-repeat center; animation:btnAni 1s infinite;}
.visual a i:after {z-index:1; background:url(../images/main/btn_self2.webp) no-repeat center; animation:btnAni2 1s infinite;}
.visual a span {display:block; margin-top:10px; font-size:20px; font-weight:600; line-height:1; transform:rotate(0.03deg);}
@keyframes btnAni {
	from{transform:scale(1.1); opacity:0;}
	50%{transform:scale(1); opacity:1;}
	to{transform:scale(1.1); opacity:0;}
}
@keyframes btnAni2 {
	from{transform:scale(1); filter:blur(20px) contrast(1.7); opacity:0;}
	50%{transform:scale(1.3); filter:blur(20px) contrast(1.7); opacity:1;}
	to{transform:scale(1); filter:blur(20px) contrast(1.7); opacity:0;}
}

.visual .video {position:absolute; left:0; top:-80px; width:100%; height:130%;}
.visual .video video {width:100%; height:100%; object-fit:cover;}
.visual .cover {position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.3;}
.visual .video iframe {width:100%; height:100%; object-fit:cover;}

/* 게시판 */
.board {padding:200px 0; position:relative; max-height:890px;}
.board .bg {display:flex; position:absolute; left:0; top:0; width:100%; height:100%;}
.board .bg span {width:50%; position:relative; overflow:hidden;}
.board .bg span:nth-child(1):before {
	content:""; position:absolute; left:0; bottom: 0; width:5dvw; height:13dvw;
  background:#fff; transform:skewY(27deg) translateY(50%);
}
.board .bg span img {width:100%; height:100%; object-fit:cover;}

.boardWrap {display:flex;}
.board-tit {width:520px;color:#fff; position:relative;}
.board-tit h3 {font-size:50px; font-weight:900; line-height:1.3;}
.board-tit ul {padding:40px 0 20px; width:260px; max-width:100%; }
.board-tit ul li {}
.board-tit ul li a {padding-left:25px; font-size:20px; font-weight:700; background:url(../images/main/i-arrow.png)0 50% no-repeat; line-height:60px; display:block; transition:.3s; white-space:nowrap;}
.board-tit ul li a:hover {padding-left:40px; background-position:10px 50%; letter-spacing:2px;}
.board-tit ul li+li {border-top:1px solid rgba(255,255,255,.3);}
.board-tit p {line-height:1.8;}
.board-slide {
	position:absolute; top:200px; left:calc(50% - 180px);
	width:calc(50% + 180px); height:691px;
}
.board-slide .swiper-wrapper {}
.board-slide .swiper-slide {}
.board-slide .swiper-button-prev,
.board-slide .swiper-button-next {width:90px; height:90px; top:auto; bottom:0; background:rgba(0,174,239,.3) center no-repeat; transition:background .3s;}
.board-slide .swiper-button-prev {background-image:url(../images/main/i-prev.png); left:90px;}
.board-slide .swiper-button-next {background-image:url(../images/main/i-next.png);right:auto; left:180px;}
.board-slide .swiper-button-prev:hover,
.board-slide .swiper-button-next:hover {background-color:rgba(0,174,239,1);}
.board-slide .swiper-slide a {display:block; box-shadow:0 0 20px rgba(0,0,0,.2);}
.board-slide .img {height:240px; overflow:hidden;}
.board-slide .img img {width:100%; height:100%; object-fit:cover; transition:transform .3s}
.board-slide .txt {padding:40px; background:#fff;}
.board-slide .txt .tit {font-size:20px; font-weight:700;text-overflow:ellipsis; overflow:hidden; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;transition:.3s;color:#000;}
.board-slide .txt .desc {margin:10px 0 30px; height:48px; text-overflow:ellipsis; overflow:hidden; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.board-slide .txt .data {display:flex; gap:15px; font-size:14px; font-weight:700;}
.board-slide .swiper-slide a:hover .txt .tit {color:var(--blue);}
.board-slide .swiper-slide a:hover .txt .desc {color:#000;}
.board-slide .swiper-slide a:hover .img img {transform:scale(1.05);}


/* 제품 */
.product {padding:150px 0; background:url(../images/main/bg-logo.svg)center /860px no-repeat;}
.product-txt {text-align:center;}
.product-txt h3 {padding:0 0 35px; font-size:60px; font-weight:900; color:#000;}
.product-txt p {}
.product-txt p b {padding:0 0 5px; font-size:24px; font-weight:900; display:block;}
.product-list {padding:100px 0 0; display:flex; gap:50px;}
.product-item {width:calc((100% - 100px)/3);}
.product-item .img {height:280px; border:1px solid var(--border3); display:block;background:#fff;}
.product-item .img img {width:100%; height:100%; object-fit:scale-down;}
.product-item .num {padding:55px 0 25px; font-size:14px; font-weight:700; color:#999; display:block;}
.product-item .num b {padding-left:20px; font-weight:900; color:#000;}
.product-item .tit {padding-left:22px; font-size:30px; font-weight:700; position:relative; line-height:1; color:#000; transition: color .3s;}
.product-item .tit:before {width:9px; height:26px; left:0; top:0; background:url(../images/common/i-sup.svg)center /100% no-repeat; position:absolute; display:block; content:'';}
.product-item .txt {margin:30px 0 40px; line-height:1.8; min-height:115px; text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical; overflow:hidden;}
.product-item a {padding-top:2px; padding-right:60px; font-size:14px; background:url(../images/main/productArrow.png)100% 0 no-repeat; display:inline-block; transition:padding .3s;}
.product-item a:hover {padding-right:110px; background-image:url(../images/main/productArrow-on.png)}
.product-item:hover .tit {color:var(--blue);}

/* 소개 */
.company {position:relative; padding:200px 0; background:url(../images/main/companyBg.jpg)center /cover no-repeat; color:#fff;}
.company:before {
	content:""; position:absolute; right:0; top: 0; width:5dvw; height:12dvw;
  background:#fff; transform:skewY(27deg) translateY(-50%);
}
.companyWrap {display:flex;}
.company-img {width:50%;}
.company-slide {width:80%; height:100%; margin-left:0;}
.company-slide .swiper-wrapper {}
.company-slide .swiper-slide {padding:30px; background:var(--blue); display:flex;}
.company-slide .txtWrap {width:calc(100% - 260px); padding:15px 40px 0 10px;}
.company-slide .txtWrap .tit {font-size:30px; font-weight:700;}
.company-slide .txtWrap .txt {opacity:.5; margin:25px 0;text-overflow:ellipsis; overflow:hidden; line-height:1.8;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}
.company-slide .txtWrap span {padding:10px 0 0; border-top:1px solid #fff; font-weight:700; font-size:14px; display:inline-block; position:relative; line-height:1.2; }
.company-slide .img {width:260px; background:#fff;}
.company-slide .img img {width:100%; height:100%; object-fit:scale-down;}
.company-slide .swiper-pagination {bottom:30px; width:calc(100% - 290px); padding-left:30px; padding-right:40px;display:inline-block;}
.company-slide .swiper-pagination-bullet {width:10px; height:10px; background:#fff;}

.company-txt {width:50%;}
.company-txt h3 {padding:0 0 30px; margin:0 0 25px; font-size:42px; position:relative; font-weight:700; line-height:1.2;}
.company-txt h3:after {width:64px; height:2px; left:0; bottom:0; background:#fff; content:''; display:block; position:absolute;}
.company-txt p {opacity:.7; line-height:1.8;}
.company-list {padding:60px 0 0; display:flex; gap:80px; text-align:center;}
.company-list li {width:calc((100% - 240px)/4);}
.company-list li a {font-size:18px; font-weight:700;}
.company-list li a span {display:block; padding:0 0 10px;}
.company-list li a span img {}






	/* ********************************* 테블릿 : ~ 1024 ********************************* */
	@media screen and (min-width:1025px), print{
		.main {min-width:1400px;}
	}


/* ********************************* 테블릿 : ~ 1024 ********************************* */
@media screen and (max-width:1024px), print{

	.visual {height:55dvw;}
	.visualWrap {padding:0;}
	.visual h2 {font-size:50px;}
	.visual p {padding:25px 0 0; font-size:22px;}
	.visual a {margin-top:40px;}
	.visual a span {font-size:18px;}
	.visual .video {top:-50px; height:120%;}

	.board {padding:0; max-height:100%;}
	.board .bg {flex-direction:column;}
	.board .bg span {width:100%;}
	.boardWrap {padding:0; display:block;}
	.board-tit {padding:100px 70px; width:100%; background:url(../images/main/boardBg01.jpg)center /cover no-repeat;}
	.board-tit h3 {font-size:40px;}
	.board-tit ul {display:flex; gap:30px; width:100%;}
	.board-tit ul li {width:calc((100% - 90px)/4);  border-bottom:1px solid rgba(255,255,255,.3);}
	.board-tit ul li+li {border-top:0;}
	.board-tit ul li a {font-size:18px;}
	.board-slide {padding:100px 70px; width:100%; position:static;background:url(../images/main/boardBg02.jpg)center /cover no-repeat; height:auto;}
	.board-slide .swiper-button-prev,
	.board-slide .swiper-button-next {width:80px; height:80px; background-size:50%;}
	.board-slide .swiper-button-prev {left:calc(50% - 80px);}
	.board-slide .swiper-button-next {left:50%; border-left:1px solid rgba(255,255,255,.3);}

	.product {padding:100px 0 30px; background-size:70%;}
	.product-txt {}
	.product-txt h3 {padding:0 0 30px; font-size:50px;}
	.product-txt p {font-size:17px;}
	.product-txt p b {font-size:22px;}
	.product-list {padding:70px ;flex-direction:column; gap:30px;}
	.product-item {width:100%;}
	.product-item .img {}
	.product-item .img img {}
	.product-item .num {padding:35px 0 20px;}
	.product-item .tit {font-size:27px;}
	.product-item .txt {min-height:auto; margin:20px 0 30px;}

	.company {padding:100px 70px;}
	.companyWrap {flex-direction:column; gap:50px;}
	.company-img {width:100%;}
	.company-slide {width:100%;}
	.company-slide .swiper-slide {height:400px;}
	.company-slide .txtWrap .tit {font-size:27px;}
	.company-slide .txtWrap .txt {margin:20px 0;}

	.company-txt {width:100%;}
	.company-txt {}
	.company-txt h3 {padding:0 0 25px; margin:0 0 20px;font-size:40px;}
	.company-list {padding:50px 0 0; gap:60px;}
	.company-list li {width:calc((100% - 180px)/4);}
	.company-list li a span img {margin:0 auto;}

}


/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {
	
	.visual {height:500px;}
	/* .visualWrap {padding:10dvh 30px 0;} */
	.visualWrap {padding:30px;}
	.visual h2 {font-size:36px;}
	.visual p {padding:16px 0 0; font-size:18px; font-weight:500;}
	.visual a .img {transform:translateY(20px);}
	.visual a .img img {width:150px;}
	.visual a span {font-size:16px;}

	.board-tit {padding:50px 30px;}
	.board-tit h3 {font-size:27px; font-weight:700;}
	.board-tit ul {padding:20px 0 16px; flex-direction:column; gap:0; width:200px; max-width:100%;}
	.board-tit ul li {width:100%;}
	.board-tit ul li a {font-size:16px; font-weight:500; line-height:50px;}
	.board-tit ul li a:hover {}

	.board-slide {padding:50px 30px 80px;}
	.board-slide .swiper-button-prev,
	.board-slide .swiper-button-next {width:60px; height:60px;}
	.board-slide .swiper-button-prev {left:calc(50% - 60px);}
	.board-slide .img {height:45vw;}
	.board-slide .txt {padding:30px;}
	.board-slide .txt .tit {font-size:18px;}
	.board-slide .txt .desc {margin:7px 0 20px;}

	.product {padding:50px 30px 0;}
	.product-txt {}
	.product-txt h3 {font-size:32px; padding:0 0 20px}
	.product-txt p {font-size:16px;}
	.product-txt p b {font-size:20px;}
	.product-list {padding:50px 0; }
	.product-item .img {height:50vw;}
	.product-item .num {padding:20px 0 10px;}
	.product-item .num b {padding-left:10px;}
	.product-item .tit {font-size:21px; padding-left:16px;}
	.product-item .tit:before {width:6px; height:20px;}
	.product-item .txt {margin:14px 0 20px;}

	.company {padding:50px 30px;}
	.companyWrap {gap:30px;}
	.company-slide .swiper-slide {padding:30px 30px 50px; display:block; height:auto; }
	.company-slide .swiper-pagination {width:100%; padding:0 !important; bottom:10px;}
	.company-slide .img {width:100%; height:70vw;}
	.company-slide .txtWrap {width:100%; padding:0 0 20px;}
	.company-slide .txtWrap .tit {font-size:22px; }
	.company-slide .txtWrap .txt {margin:10px 0 14px;}
	.company-txt {}
	.company-txt h3 {padding:0 0 16px; margin:0 0 10px; font-size:26px;}
	.company-txt h3:after {width:40px;}
	.company-list {padding:30px 0 0;gap:20px; flex-wrap:wrap;}
	.company-list li {width:calc((100% - 20px)/2);}
	.company-list li a {font-size:16px; font-weight:500;}
	.company-list li a span img {width:80px;}












}