@charset "utf-8";

/* 메인페이지 스타일만 정의 */
.main {}


/* visual */
.visual {height:100vh; background:url(../images/main.jpg)center /cover no-repeat;}
.visual .swiper-container {height:100%;}
.visual .swiper-wrapper {}
.visual .swiper-slide {position:relative;}
.visual .txt {width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; position:absolute; left:0; top:0; background:rgba(0,0,0,.4); z-index:1;}
.visual h2 {font-size:100px; color:#fff; }
.visual p {padding:35px 0 0; font-size:18px; font-weight:500; color:#fff; transform:var(--textRotate);}
.visual video {width:100%; height:100%; object-fit:cover;}

.swiper-button-prev {left:100px; background-image:url(../images/main/visual-prev.png)}
.swiper-button-next {right:100px; background-image:url(../images/main/visual-next.png)}
.swiper-button-next, .swiper-button-prev {width:95px; height:35px; background-size:auto;}

.swiper-pagination {bottom:150px !important;}
.swiper-pagination-bullet {padding:15px 0; margin:0 35px !important; width:auto; height:auto; color:#fff; background:none; font-size:14px; font-weight:700; transform:var(--textRotate); border-bottom:2px solid transparent; border-radius:0; line-height:1; opacity:1;}
.swiper-pagination-bullet-active {border-color:#fff;}
.swiper-pagination-bullet+.swiper-pagination-bullet:before {width:6px; height:6px; background:#fff; position:absolute; left:-40px; top:18px; content:''; display:block; border-radius:50%;}

/* mid1 */
.mid1 h2 {text-align:center; color:var(--blue); text-shadow:0 0 5px rgba(0,0,0,0.5); font-weight:500; font-size:65px; font-family:var(--f_NEXON_V2); padding:50px 0;}
.mid1 h2 span {color:#666;}

/* work */
.work {}
.work-wrap {display:flex; align-items:center; height:1000px; color:#fff;}
.work-item {display:flex; align-items:center; justify-content:center; width:33.3333%; height:100%; text-align:center; position:relative; background:rgba(0,0,0,.5); transition:background .3s;}
.work-item:hover {background:rgba(0,0,0,.7);}
.work-item div {}
.work-item span {padding:0 0 30px; font-size:20px; font-weight:700; display:block; position:relative; transform:var(--textRotate);}
.work-item span:before {content:''; display:block; width:50px; height:2px; background:#fff; position:absolute; left:50%; bottom:0; transform:translateX(-50%);}
.work-item h3 {padding:30px 0; font-size:48px; font-family:var(--f_Cafe24); line-height:1.3; color:#fff; text-transform:uppercase;}
.work-item p {font-size:18px;font-weight:500; transform:var(--textRotate);}
.work-item a {width:243px; padding:0 40px; line-height:54px; border:3px solid var(--blue); border-radius:100px; background:rgba(0,0,0,.7) url(../images/main/work-arrow.png)calc(100% - 30px) 44% no-repeat; font-size:14px; font-weight:500; margin-top:200px; display:inline-block;  text-align:left;transform:var(--textRotate);}
.work-item a:hover {background-color:#000; background-position:calc(100% - 20px) 44%;}
.work-item img {width:100%; height:100%; object-fit:cover; position:absolute; left:0; top:0; z-index:-1;}

/* news */
.news {padding:120px 0;}
.news-wrap {}
.news-tit {padding-bottom:50px; position:relative; text-align:center; color:#000;}
.news-tit h3 {font-size:36px; font-family:var(--f_Cafe24); text-transform:uppercase;}
.news-tit ul {position:absolute; right:0; top:0; display:flex;}
.news-tit ul li {padding-left:18px; margin-left:18px; position:relative;}
.news-tit ul li a {border-bottom:2px solid transparent; font-weight:500; transform:var(--textRotate); display:block;}
.news-tit ul li.on a {color:var(--blue); border-color:var(--blue);}
.news-tit ul li+li:before {content:''; display:block; width:1px; height:12px; background:#dbdbdb; position:absolute; left:0; top:6px;}
.news-list {display:flex; gap:60px;}
.news-item {width:calc((100% - 180px)/4);}
.news-item * {transition:all .3s;}
.news-item a {display:block;}
.news-item h4 {min-height:68px; font-size:26px; font-weight:500; line-height:1.4; font-family:var(--f_NEXON_V2);transform:var(--textRotate);}
.news-item p {min-height:77px; margin:25px 0 35px; -webkit-line-clamp:3; transform:var(--textRotate);}
.news-item span {padding:35px 0 0; border-top:2px solid #000; font-size:14px; color:#999; display:block; transform:var(--textRotate);}
.news-item:hover h4 {color:var(--blue);}
.news-item:hover p {color:#000;}
.news-item:hover span {border-color:var(--blue);}




/* ************************ 태블릿 이하(~1024) ************************ */
@media screen and (max-width: 1024px) {
	
	/* visual */
	.visual {height:800px;}
	.visual .txt {}
	.visual h2 {font-size:80px;}
	.visual p {font-size:17px;}
	
	.swiper-button-next, .swiper-button-prev {display:none;}
	
	
	/* mid1 */
	.mid1 h2 { font-size:60px; padding:50px 0;}
	
	/* work */
	.work {}
	.work-wrap {flex-direction:column; height:auto;}
	.work-item {padding:60px 20px; width:100%;}
	.work-item a {width:230px; padding:0 35px; margin-top:60px;}
	.work-item span {padding:0 0 25px; font-size:18px;}
	.work-item h3 {padding:25px 0; font-size:40px;}
	.work-item p {font-size:17px;}
	
	
	
	/* news */
	.news {padding:10vw 20px;}
	.news-tit {padding-bottom:40px;}
	.news-tit h3 {font-size:30px;}
	.news-tit ul li a {}
	.news-list {gap:40px; flex-wrap:wrap;}
	.news-item {padding:40px; border:1px solid #e5e5e5; width:calc((100% - 40px)/2);}
	.news-item h4 {font-size:22px; min-height:62px;}
	.news-item p {margin:20px 0 30px;min-height:72px;}
	.news-item span {padding:30px 0 0;}
	
	
	
	
	
	
	
	
	
	
	
}



/* ************************ 모바일 이하(~767) ************************ */
@media screen and (max-width: 767px) {
	
	/* visual */
	.visual {height:700px;}
	.visual .txt { padding:0 20px;}
	.visual h2 {font-size:60px;}
	.visual p {font-size:16px;}
	
	.swiper-pagination-bullet {padding:10px 0; margin:0 20px !important; font-size:13px;}
	.swiper-pagination-bullet+.swiper-pagination-bullet:before {width:5px; height:5px; left:-23px; top:12px;}
	
	/* mid1 */
	.mid1 h2 { font-size:50px; padding:35px 0;}
	
	/* work */
	.work {}
	.work-wrap {}
	.work-item {padding:40px 20px;}
	.work-item a {width:200px; padding:0 30px; margin-top:40px; line-height:44px; border-width:2px;}
	.work-item span {padding:0 0 20px; font-size:17px;}
	.work-item h3 {padding:20px 0; font-size:27px;}
	.work-item p {font-size:16px; max-width:250px;}
	.work-item p br {display:none;}
	
	
	
	/* news */
	.news {padding:10vw 20px;}
	.news-tit {padding-bottom:30px;}
	.news-tit h3 {font-size:24px;}
	.news-tit ul {padding:14px 0 0; position:static; justify-content:center;}
	.news-tit ul li {padding:0 10px; margin:0;}
	.news-tit ul li a {font-size:14px; border-width:1px;}
	.news-list {gap:20px;}
	.news-item {padding:30px; width:100%;}
	.news-item h4 {font-size:19px; min-height:auto;}
	.news-item p {margin:14px 0 24px; min-height:auto;}
	.news-item span {padding:24px 0 0; border-width:1px;}
	
	
	
}

/* ************************ 모바일 이하(~480) ************************ */
@media screen and (max-width: 480px) {
	/* visual */
	.visual h2 {font-size:40px;}
	.visual p {font-size:15px;}
	
	/* mid1 */
	.mid1 h2 { font-size:40px; padding:30px 0;}
	
	
}