@charset "utf-8";


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

/* ******************** 공용 ******************** */
main .inner {max-width:1400px; margin:0 auto; padding:150px 0;}
main h3 {font-family:'NotoSansJP'; font-size:50px; font-weight:700; color:var(--navy);}

/**** 메인비주얼 ****/
main .visual {position:relative; height:calc(100vh - 100px);}
main .visual .movie {position:absolute; left:0; top:0; width:100%; height:100%; background:#000; overflow:hidden;}
main .visual .movie video {
	width:100%; height:100%; object-fit:cover;
	animation: movie ease 2s forwards;
}
main .visual .scroll {position:absolute; bottom:50px; left:50%; transform:translateX(-50%); display:flex; justify-content:center; z-index:1;}
main .visual .scroll img {animation: down 2s 5s infinite; opacity:0;}
main .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; color:#fff; z-index:1; padding:0 20px; word-break:break-all;}
main .visual .txt h2 {
	font-family:'NotoSansJP'; font-size:70px; font-weight:700; line-height:84px;
	opacity:0; animation: copytext ease 2s 1s forwards;
}
main .visual .txt span {
	font-family:'NotoSansJP'; font-size:35px; font-weight:700; line-height:1; margin-top:75px;
	opacity:0; animation: copytext ease 2s 3s forwards;
}
main .visual .txt p {
	font-family:'NotoSansJP'; font-size:20px; font-weight:400; line-height:27px; margin-top:20px;
	opacity:0; animation: copytext ease 2s 3.3s forwards;
}


@keyframes movie {
	from{transform:scale(1.2); opacity:.3; filter:blur(20px);}
	to{transform:scale(1); opacity:.7; filter:blur(0);}
}
@keyframes copytext {
	from{transform:translateY(50px); opacity:0; }
	to{transform:translateY(0) rotate(.03deg); opacity:1;}
}
@keyframes down {
	0% {transform:translateY(-30px); opacity:0;}
	50% {transform:translateY(0); opacity:1;}
	100% {transform:translateY(30px); opacity:0;}
}


/**** 제품정보 ****/
main .part2 {width:100%; background:url(../images/main/main_bg.webp)no-repeat center bottom/cover; background-attachment:fixed;}
main .part2 .inner {display:flex; flex-wrap:wrap; justify-content:space-between;}
main .part2 .head {display:flex;}
main .part2 h3 {color:#fff; padding-right:30px;}
main .part2 .slogan {display:block; position:relative; margin-top:20px; padding-top:5px; color:#fff; opacity:.7;}
main .part2 .slogan:before {display:block; content:''; position:absolute; top:-16px; left:0; width:50px; height:1px; background-color:#fff;}
main .part2 .btn-gallery {float:right; display:inline-block; color:#fff; font-weight:500; padding:20px 50px; line-height:1; border:1px solid rgba(255,255,255,0.3); transform:rotate(-0.03deg);}
main .part2 .btn-gallery:hover {color:#000; background-color:#fff;}
main .part2 .product-list {padding-top:95px;}
main .part2 .product-list ul {display:flex; gap:55px;}
main .part2 .product-list ul li {flex-basis:25%;}
main .part2 .product-list ul li a {}
main .part2 .product-list ul li a .img {aspect-ratio:1/1.3; display:flex; justify-content:center; align-items:center; background:#fff; transition:.3s ease;}
main .part2 .product-list ul li a .img img {max-width:100%; object-fit:contain;}
main .part2 .product-list ul li a .text {color:#fff; margin-top:30px; word-break:break-all;}
main .part2 .product-list ul li a .text dt {font-family:'NotoSansJP'; font-size:36px; font-weight:700; line-height:1; margin-top:5px; transition:.3s ease;}
main .part2 .product-list ul li a .text dd:nth-of-type(1) {font-family:'NotoSansJP'; font-size:14px; font-weight:700;}
main .part2 .product-list ul li a .text dd:nth-of-type(2) {font-family:'NotoSansJP'; font-size:16px; line-height:26px; margin-top:20px;}
main .part2 .product-list ul li a:hover .img {transform:scale(1.04); box-shadow:20px 20px 20px rgba(0,0,0,.5)}
main .part2 .product-list ul li a:hover .text dt {color:#30ffb1;}

/**** 퀵메뉴 ****/
main .part3 {}
main .part3 .tit {text-align:center; position:relative;}
main .part3 .tit h3 {justify-content:center; line-height:1.2;}
main .part3 .tit:before {display:block; content:''; position:absolute; top:80%; left:0; width:100%; height:1px; background-color:#dcdfee;}
main .part3 .tit h3>span {position:relative; background:#fff; display:inline-block;}
main .part3 .tit>p {margin-top:20px; position:relative; background:#fff; display:inline-block; padding:0 75px;}
main .part3 .menu {margin-top:100px; display:grid; grid-template-columns:31.9% 36.2% 31.9%;}
main .part3 .menu article {padding:0 3.7vw; border-right:1px solid #d9d9d9;}
main .part3 .menu article:nth-of-type(1) {padding-left:0;}
main .part3 .menu article:nth-of-type(2) {padding:0 3.5vw;}
main .part3 .menu article:nth-of-type(1) .m-tit {background-image:url(../images/main/m-icon01.png);}
main .part3 .menu article:nth-of-type(2) .m-tit {background-image:url(../images/main/m-icon02.png);}
main .part3 .menu article:nth-of-type(3) .m-tit {background-image:url(../images/main/m-icon03.png);}
main .part3 .menu article:nth-of-type(3) {padding-right:0; border-right:0;}
main .part3 .menu article .m-tit {background-position:right top; background-repeat:no-repeat; padding-right:55px;}
main .part3 .menu article .m-tit h4 {font-size:24px; font-weight:700; color:#000;}
main .part3 .menu article .m-tit p {line-height:25px; margin-top:15px; word-break:break-all;}
main .part3 .menu article .m-content {margin-top:45px; display:block;}
main .part3 .menu article:nth-of-type(1) ul li+li {margin-top:10px;}
main .part3 .menu article:nth-of-type(1) ul li a {background:#f2f4f8 url(../images/main/i-more.png)no-repeat right 22px center; border:1px solid #dee0ec; padding:16px 22px; line-height:1; transition:0.2s;}
main .part3 .menu article:nth-of-type(1) ul li a:hover {background:#fff url(../images/main/i-more.png)no-repeat right 15px center; border-color:var(--navy);}
main .part3 .menu article ul li a {display:block; color:var(--navy); font-weight:500; transform:rotate(-0.03deg); transition:0.2s;}
main .part3 .menu article ul li a span {font-size:10px; font-weight:700; color:#a5a9ca; vertical-align:middle; padding-right:10px;}
main .part3 .menu article:nth-of-type(2) a {font-size:14px; font-weight:500; line-height:1; background:url(../images/main/main_img.png)no-repeat center/cover; position:relative; height:110px;}
main .part3 .menu article:nth-of-type(2) a span {color:#fff; position:absolute; right:70px; top:45px;}
main .part3 .menu article:nth-of-type(2) a span:before {display:block; content:''; position:absolute; bottom:-8px; left:0; width:79px; height:10px; background:url(../images/main/arrow-right.webp)no-repeat center; transition:0.2s;}
main .part3 .menu article:nth-of-type(2) a:hover span:before {left:20px;}
main .part3 .menu article:nth-of-type(3) ul {display:grid; grid-template-columns:repeat(2, 1fr); gap:5px; padding-right:80px;}

/**** 공지사항 ****/
main .part4 {background-color:#f2f4f8;}
main .part4 .inner {padding:100px 0; display:flex; gap:3.7vw;}
main .part4 .tit.left {padding-left:20px; border-left:10px solid #0d0b07; flex-basis:26%;}
main .part4 .tit h3 {font-family:'NotoSansJP'; line-height:1.2;}
main .part4 .tit p {color:#000; opacity:0.5; margin-top:20px;}
main .part4 .list {display:flex; gap:3.7vw; flex-basis:72.3%;}
main .part4 .list a {display:block; flex-basis:33.33%;}
main .part4 .list a p {font-size:14px; font-weight:700; transform:rotate(-0.03deg);}
main .part4 .list a dl {}
main .part4 .list a dl dt {font-size:22px; color:#000; font-weight:700; line-height:31px; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; transform:rotate(-0.03deg);}
main .part4 .list a dl dd {-webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; margin-top:12px;}
main .part4 .list a span {display:block; font-size:14px; padding-top:21px;}


/* ********************************* 테블릿 : ~ 1024 ********************************* */
@media screen and (max-width:1024px), print{
main .inner {padding:80px 20px;}
main h3 {font-size:36px;}

/**** 메인비주얼 ****/
main .visual {height:70vh; padding:20px;}
main .visual .txt h2 {font-size:45px; line-height:1.3;}
main .visual .txt span {font-size:28px; margin-top:55px;}
main .visual .txt p {font-size:18px; line-height:1.4;}

/**** 제품정보 ****/
main .part2 h3 {padding-right:20px;}
main .part2 .product-list ul {display:grid; gap:40px; grid-template-columns:repeat(2, 1fr); text-align:center;}
main .part2 .product-list ul li a .text dt {font-size:28px;}

/**** 퀵메뉴 ****/
main .part3 .tit>p {padding:0 30px;}
main .part3 .menu {margin-top:50px;}
main .part3 .menu article {padding:2vw;}
main .part3 .menu article .m-tit {background-size:30px; padding-right:30px;}
main .part3 .menu article .m-tit h4 {font-size:21px;}
main .part3 .menu article:nth-of-type(2) {padding:2vw;}
main .part3 .menu article:nth-of-type(3) ul {gap:5px; padding-right:30px;}
main .part3 .menu article ul li a {font-size:15px;}

/**** 공지사항 ****/
main .part4 {}
main .part4 .inner {padding:80px 20px;}
main .part4 .tit.left {padding-left:10px; border-left:5px solid #0d0b07;}

}


/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {
	main .inner {padding:60px 20px;}
	main h3 {font-size:24px;}

	/**** 메인비주얼 ****/
	main .visual {height:60vh;}
	main .visual .txt h2 {font-size:36px;}
	main .visual .txt span {font-size:24px; margin-top:20px;}
	main .visual .txt p {font-size:16px;}
	main .visual .scroll {display:none;}

	/**** 제품정보 ****/
	main .part2 h3 {margin-top:10px;}
	main .part2 .slogan {display:none;}
	main .part2 .btn-gallery {padding:15px 30px;}
	main .part2 .product-list {padding-top:50px;}
	main .part2 .product-list ul {display:grid; gap:30px; text-align:center;}
	main .part2 .product-list ul li a .text dt {font-size:22px;}
	main .part2 .product-list ul li a .text dd:nth-of-type(2) {font-size:15px; line-height:1.5;}

	/**** 퀵메뉴 ****/
	main .part3 .menu {grid-template-columns:repeat(1,1fr); gap:40px;}
	main .part3 .menu article {padding:0; border-right:0;}
	main .part3 .menu article~article {border-top:1px solid #d9d9d9; padding-top:40px;}
	main .part3 .menu article .m-content {margin-top:30px;}
	main .part3 .menu article:nth-of-type(2) {padding:40px 0 0 0; border-right:0;}
	main .part3 .menu article:nth-of-type(3) ul {gap:10px; padding-right:0px;}
	
	/**** 공지사항 ****/
	main .part4 .inner {flex-direction:column; gap:50px; padding:60px 20px;}
	main .part4 .tit.left {display:none;}
	main .part4 .list {flex-direction:column; gap:30px;}
	main .part4 .list a dl dt {font-size:20px;}
	main .part4 .list a span {padding-top:15px;}

}