/* 요청으로 특별히 넣음 */
@font-face {
    font-family: 'SBAggroB';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 22-06-29::윤민아님 요청으로 넣음 */
/* 메인 슬라이드 나눔스퀘어 적용 */
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

/* ************ 메인페이지 스타일 ************ */

@media screen and (min-width:992px) {
	/* 메인-영상 */
	.main .movie_zone {z-index:-999; background-color: #fff; position: relative;}
	.main .mov100 {position:absolute; top:0; left:0; right:0; bottom:0; height:1200px;}
	.main .mov100 video {position: absolute; top: 0; left: 50%; height: 100%; transform: translateX(-50%);}
	
	
	/* 슬라이드 */
	.main .sliderV2 {width:100%; height:1050px;}
	.main .sliderV2 .sliderObj {height:100% !important;}
	.main .sliderV2 .sliderObj>li {transform:scale(1.1)}
	.main .sliderV2 .sliderObj>li:before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.2);}
	.main .sliderV2 .sliderObj>li>div {position:relative;}
	.main .sliderV2 .sliderObj>li.on {transform:scale(1)}
	.main .sliderV2 .sliderButton {display:none;}
	.main .sliderV2 .txt {
		position:absolute; top:320px; left:30%; transform:translateX(-50%);
		font-family:'SBAggroB'; text-align:left; color:#fff; font-size:22px; font-weight:400; text-shadow:5px 5px 5px rgba(0,0,0,.3);
	}
	.main .sliderV2 .txt h2 {font-size:52px; font-weight:700; line-height:1; margin-bottom:30px; letter-spacing:-1px;}
	
	.main .sliderV2.test .sliderObj>li:before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.3);}
	.main .sliderV2.test .txt {
	position:absolute; top:320px; left:30%; transform:translateX(-50%);
	text-align:left; font-family: 'Noto Sans KR', sans-serif; color:#fff; font-size:23px; text-shadow:1px 1px 5px rgba(0,0,0,.9);
	font-weight:300;}
	.main .sliderV2.test .txt h2 {font-size:53px; font-family: 'Noto Sans KR', sans-serif; font-weight: 100; line-height:1.3; margin-bottom:90px;}
	.main .sliderV2.test .txt h3 {font-size:36px; font-family: 'Noto Sans KR', sans-serif; font-weight: 100; line-height:1; margin-bottom:40px;}
	.main .sliderV2.test .txt.renew_240221 {top:45vh; left:15%; text-align:left; transform:translateX(0);}
	.main .sliderV2.test .txt.renew_240221 h2 {font-size:42px; line-height:1.4;}
	.main .sliderV2.test .txt.renew_240221 h2 span {display:block;font-size:32px; text-transform:uppercase; margin-bottom:10px;}
	
	
	/* 제품 */
	.main .product{padding:180px 0 0; background:url(../images/main/product_bg.jpg) no-repeat center; background-size:cover; text-align:center;}
    /* 그리드 전체 */
    .main .product .inner{display:grid; width:1400px; margin:0 auto; grid-template-columns:repeat(3, 1fr); grid-template-rows:400px 360px; gap:50px; padding-bottom:150px;
	 grid-template-areas:
     "c1 head c2"
     "c3  c4  c5";}
    /* 중앙 타이틀 */
    .main .product .head{grid-area:head; text-align:center; display:flex; flex-direction:column; justify-content:center;}
    .main .product .head .cate{font-size:20px; font-family: 'Noto Sans KR', sans-serif; letter-spacing:2px; margin-bottom:10px;}
    .main .product .head h2{font-size:70px; font-family: 'Noto Sans KR', sans-serif; line-height:1.1; font-weight:300; margin-bottom:16px;}
	.main .product .head span{font-size:20px; font-family: 'Noto Sans KR', sans-serif; color:#666;}
    /* 아이템 영역 */
    .main .product .item{display:contents;}
    .main .product .item li{border-radius:40px; overflow:hidden; position:relative; max-width:420px; width:100%;}
	/* 영역 지정 */
    .main .product .item .c1{grid-area:c1;}
    .main .product .item .c2{grid-area:c2;}
    .main .product .item .c3{grid-area:c3;}
    .main .product .item .c4{grid-area:c4;}
    .main .product .item .c5{grid-area:c5;}
    .main .product .item li a{display:block; width:100%; height:100%;}
	.main .product .item li img{width:100%; height:100%;  object-fit:cover; transition:.35s ease;}
	.main .product .item li:hover img{ transform:scale(1.05);}
    /* 카드 텍스트 */
    .main .product .item li p{position:absolute; font-family: 'Noto Sans KR', sans-serif; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; color:#fff; font-size:20px; font-weight:600; text-shadow:0 2px 10px rgba(0,0,0,.35);}
	.main .product .item li p span{display:block; font-family: 'Noto Sans KR', sans-serif; font-size:14px; font-weight:400; margin-top:4px;}
	
	
	
	/* 공정관리 */
	.main .process {width:100%; height:1200px; padding:130px 0; background:url(../images/main/process_bg_bass.jpg) no-repeat center; background-size:cover; text-align:center;}
	.main .process .head h2 {font-size:120px; font-family: 'Noto Sans KR', sans-serif; line-height:2.3; margin-bottom:20px; letter-spacing:0px; color:#fff; font-weight:15;}
	.main .process .head p {font-size:42px; font-family: 'Noto Sans KR', sans-serif; margin-bottom:70px; color:#fff; font-weight:300; margin-bottom:60px;}
	.main .process .item {width:1400px; margin:0 auto; text-align:center;}
	.main .process .item li {display:inline-block; width:350px; padding:0 10px; color:#fff; font-size:23px; font-weight:100;}
	.main .process .item li a {position:relative; display:block;}
	.main .process .item li a span {display:block; font-size:30px; font-weight: 100; line-height:1.3; margin-bottom:20px; color:#fff;}

	
	/* 이슈 */
	.main .issue.temp {display:flex; align-items:center; justify-content:space-between; background:url(../images/main/issue_bg_bass.jpg) no-repeat right top / cover; padding:120px 150px;}
	.main .issue .issueTxt {width:40%;color:#000;  text-align:left;}
	.main .issue .issueTxt .mainCopy {font-size:36px; line-height:1.4; font-weight:300; margin-bottom:20px;}
	.main .issue .issueTxt .btnSub {font-size:18px; line-height:1.6; color:#555; margin-top:100px;}
	.main .issue .issueTxt h2 {font-size:24px; letter-spacing:1px; margin-bottom:20px; font-weight:300;}
	.main .issue .issueTxt p {font-size:36px; line-height:1.4; font-weight:300; margin-bottom:20px}
	.main .issue .issueTxt span {font-size:36px; line-height:1.4; font-weight:600; margin-bottom:20px}
	
	/* 프로모션 영상만 보이기 */
    .main .issue .cont .info .infoTab,
    .main .issue .cont .info .btnWrap,
    .main .issue .cont .info .infoCon > li.mall {display: none;}

    /* movBox만 항상 보이게 */
    .main .issue .cont .info .infoCon {margin-top: 0; height: auto; position: static;}
    .main .issue .cont .info .infoCon > li.movBox {position: static; opacity: 1;transform: none;height: auto;}
	
	.main .issue .cont {width:60%; display:flex; justify-content:flex-end;}
	.main .issue .cont .info {width:100%; max-width:800px; padding:0; background:transparent;}
	.main .issue .cont .info .infoTab {display:flex;}
	.main .issue .cont .info .infoTab button {position:relative; background:#fff; border:0; line-height:1; padding:0; cursor:pointer; overflow:visible; font-size:32px; font-weight:400; color:#ddd;}
	.main .issue .cont .info .infoTab button:before {content:""; position:absolute; bottom:-7px; width:0; border-top:2px solid #000; transition:all .3s ease !important; -webkit-transition:all .3s ease !important; -moz-transition:all .3s ease !important;}
	.main .issue .cont .info .infoTab button.on {color:#000;}
	.main .issue .cont .info .infoTab button.on:before {width:100%;}
	.main .issue .cont .info .infoTab button+button {margin-left:25px;}
	.main .issue .cont .info .infoCon {margin-top:0px; position:static; height:auto;}
	.main .issue .cont .info .infoCon>li {position:static; height:auto; left:0; top:0; opacity:1; transform:none;}
	.main .issue .cont .info .infoCon>li.on {z-index:1; opacity:1; transform:scale(1);}
	.main .issue .cont .info .infoCon>li.mall {background-image:url(../images/main/issue_bg_cate1.jpg); background-position:right bottom; background-repeat:no-repeat;}
	.main .issue .cont .info .mov{width:100%; max-width:900px;  margin-left:auto;}
	.main .issue .cont .info .infoCon>li .mov iframe {border:0;}
	.main .issue .cont .info .infoCon>li .mov+p {padding-top:10px;}
	.main .issue .cont .info .infoCon p span {font-size:22px;}
	.main .issue .cont .info .infoCon a {display:inline-block; padding:10px 50px 10px 20px; border:1px solid #000; background:#000 url(/images/common/i-arrow_W.svg) no-repeat calc(100% - 20px) center / 15px; color:#fff; line-height:1; margin-top:15px; font-size:16px;}
	.main .issue .cont .info .infoCon a img {display:block; margin:10px 0 0 4px;}
	.main .issue .cont .info .infoCon a:hover {background:#fff url(/images/common/i-arrow_B.svg) no-repeat calc(100% - 20px) center / 15px; color:#000;}
	.main .issue .cont .info .btnWrap {position:absolute; display:flex; bottom:53px; left:60px; gap:10px;}
	.main .issue .cont .info .btnWrap button {position:relative; width:40px; height:30px; margin-top:-5px; cursor:pointer; overflow:visible; background:#fff; transition:all .3s ease !important; -webkit-transition:all .3s ease !important; -moz-transition:all .3s ease !important; opacity:0.2; z-index:2;}
	.main .issue .cont .info .btnWrap button:hover {opacity:1;}
	.main .issue .cont .info .btnWrap p {padding:0 10px;}
	.main .issue .cont .info .btnWrap button img {position:absolute; left:0; top:50%; transform:translateY(-50%);}
	.main .issue .cont .info .btnWrap button:hover img {left:-5px;}
	.main .issue .cont .info .btnWrap button.next {transform:rotate(180deg);}

	/* 공지 */
	.main .notice {width:1400px; margin:0 auto; padding:100px 0;}
	.main .notice .head {display:flex; align-items:flex-end;}
	.main .notice h3 {font-size:26px; color:#000; line-height:1;}
	.main .notice h3+p {margin-left:30px; color:#666; line-height:1; vertical-align:baseline;}
	.main .notice .list {clear:both; display:flex; margin-top:30px;}
	.main .notice .list li {width:calc((100% - 60px)/4);}
	.main .notice .list li+li {margin-left:20px;}
	.main .notice .list li:hover {}
	.main .notice .list li a {position:relative; display:block; height:100%; padding:35px 40px 70px; border:1px solid #e7e9ec;}
	
	/* 22-08-23 추가 */
	.main .notice .list li a i {display:inline-block; padding-left:3px; width:34px; height:27px; color:#fff; background: url(../images/common/i-new.png) no-repeat; background-size:100%; margin-bottom:4px;}
	
	.main .notice .list li a:hover {border-color:#000; box-shadow:10px 10px 10px rgba(0,0,0,.1);}
	.main .notice .list li a p {max-height:45px; overflow:hidden; word-break:break-all;}
	.main .notice .list li a span {position:absolute; left:40px; bottom:40px; line-height:1;}


	/* 하단 바로가기 */
	.main .quickCon {padding:100px 0 ; background:url(../images/main/quickWrap_bg5.jpg) no-repeat center bottom/cover;}
	.main .quickCon .inner {display:flex; justify-content:space-between; padding:0 110px; width:1400px; margin:0 auto;}
	.main .quickCon .inner>div {width:calc((100% - 60px)/4);}

	.main .quickCon .inner a {display:block; height:100%; padding-bottom:50px; background-color:#fff; box-shadow:10px 10px 10px rgba(0,0,0,.2);}
	.main .quickCon .inner a:hover {box-shadow:10px 10px 10px rgba(0,0,0,.5); background-color:#fff;}
	.main .quickCon .inner a dl+i {
		position:absolute; bottom:35px; right:60px; transform:rotate(180deg); opacity:0;
		transition:all .3s ease !important; -webkit-transition:all .3s ease !important; -moz-transition:all .3s ease !important;
	}
	.main .quickCon .inner a:hover dl+i {right:40px; opacity:1;}
	.main .quickCon .inner a {position:relative;}
	.main .quickCon .inner a>div {overflow:hidden;}
	.main .quickCon .inner a dl {margin-top:40px; padding:0 40px; overflow:hidden;}	
	.main .quickCon .inner a dt {font-size:20px; font-weight:600; line-height:1; margin-bottom:20px;}
	.main .quickCon .inner a dd {font-size:16px;}
	.main .quickCon .inner a .img {display:block; height:100%; position:relative;}
	.main .quickCon .inner a .img:after {
		content:""; position:absolute; left:0; bottom:-100px; width:calc(100% + 100px); height:100px; transform:rotate(-8deg); transform-origin:left top; background:#fff;
		transition:all .5s ease !important; -webkit-transition:all .5s ease !important; -moz-transition:all .5s ease !important;
	}
	.main .quickCon .inner a img {width:100%;}
	.main .quickCon .inner a:hover .img {transform:scale(1.05);}
	.main .quickCon .inner a:hover .img:after {transform:rotate(0);}
	.main .quickCon .inner a p {margin-top:40px; padding:0 40px; max-height:75px; overflow:hidden; font-size:16px;}
	.main .quickCon .inner a span {position:absolute; bottom:40px; left:40px; padding-left:35px;}
	.main .quickCon .inner a span i {position:absolute; left:0; top:-5px; display:block; width:30px; height:30px; border-radius:50%; background:#fff no-repeat center / 20px;}
	.main .quickCon .inner .blog a span i {background-image:url(../images/main/sns_blog.svg);}
	.main .quickCon .inner .insta a span i {background-image:url(../images/main/sns_insta.svg);}

}



/* ************************ 태블릿 (~991) ************************ */
@media screen and (max-width:991px) {
	/* 메인-영상 */
	.main .mov100 video {position: absolute; top: 0; left: 50%; height: 100%; transform: translateX(-50%);}

	
	/* 슬라이드 */
	.main .sliderV2 {width:100%; height:70vh; min-height:450px;}
	.main .sliderV2 .sliderObj {height:100% !important;}
	.main .sliderV2 .sliderObj>li {transform:scale(1.1)}
	.main .sliderV2 .sliderObj>li:before {z-index:10; content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.3);}
	.main .sliderV2 .sliderObj>li.on {transform:scale(1)}
	.main .sliderV2 .sliderButton {display:none;}
	.main .sliderV2 .txt {z-index:11; position:absolute; top:50%; left:50%; width:100%; padding:5vw; transform:translateX(-50%); text-align:center; color:#fff; font-size:16px; font-weight:500; line-height:1.3; text-shadow:5px 5px 5px rgba(0,0,0,.3); font-family: 'GmarketSans', sans-serif; font-weight : 200; }
	.main .sliderV2 .txt h2 {font-size:28px; font-weight:100; line-height:1; margin-bottom:30px; font-family: 'GmarketSans', sans-serif;}
	.main .sliderV2 .pageType1 {position:absolute; left:50%; width:100%; transform:translateX(-50%); bottom:30px; padding:0; text-align:center; }
	.main .sliderV2.test .txt.renew_240221 {}
	.main .sliderV2.test .txt.renew_240221 h2 {line-height:1.2;}
	.main .sliderV2.test .txt.renew_240221 h2 span {font-size:18px; display:block; text-transform:uppercase; margin-bottom:10px;}
	
	
	/* 제품 */
	.main .product {padding:150px 0; background:url(../images/main/product_bg.jpg) no-repeat center; background-size:cover; text-align:center;}
	.main .product .head h2 p {font-size:62px; line-height:1.2; margin-bottom:15px; letter-spacing:8px;}
	.main .product .head {margin-bottom:70px;}
	.main .product .item {width:1400px; margin:0 auto;}
	.main .product .item li {float:left; width:25%; padding:0 10px;}
	.main .product .item li a {position:relative; display:block; }
	.main .product .item li a:hover {transform:scale(1.05);}
	.main .product .item li a i {display:block;}
	.main .product .item li a span {display:block; width:100%; position:absolute; left:0; bottom:-10px; font-size:16px;}

	
	/* 공정관리 */
	.main .process {padding:50px 0; background:url(../images/main/process_bg_bass.jpg) no-repeat center; background-size:cover; text-align:center;}
	
	
	
	/* 이슈 */
	.main .issue {padding:50px 20px; text-align:center;}
	.main .issue .cont .info {position:relative;}
	.main .issue .cont .info .infoCon {position:relative;}
	.main .issue .cont .info .infoCon>li:first-child {padding-bottom:50px; background:#fff url(../images/main/simbol.svg) no-repeat center bottom / 50vw;}
	.main .issue .cont .info .infoCon>li .mov {width:calc(100% + 40px); transform:translateX(-20px);}
	.main .issue .cont .info .infoCon>li .mov iframe {}
	.main .issue .cont .info .infoCon>li .mov+p {padding-top:10px;}
	.main .issue .cont .info .infoCon p {line-height:1.3;}
	.main .issue .cont .info .infoCon p span {font-size:20px;}
	.main .issue .cont .info .infoCon a {display:inline-block; margin-top:30px; line-height:1; padding:20px 50px 20px 20px; border:1px solid #000; background:#000 url(/images/common/i-arrow_W.svg) no-repeat calc(100% - 20px) center / 15px; color:#fff;}
	
	
	/* 공지 */
	.main .notice {padding:50px 20px; border-top:1px solid #000;}
	.main .notice .head {}
	.main .notice h3 {font-size:24px; color:#000; line-height:1;}
	.main .notice h3+p {color:#666; line-height:1; margin-top:10px;}
	.main .notice .list {margin-top:20px;}
	.main .notice .list li {}
	.main .notice .list li+li {margin-top:-1px; border-top:0;}
	.main .notice .list li:hover {}
	.main .notice .list li a {display:block; height:100%; padding:20px; border:1px solid #e7e9ec;}
	.main .notice .list li a p {max-height:45px; overflow:hidden; word-break:break-all;}
	.main .notice .list li a span {display:block; margin-top:10px; line-height:1;}
	
	/* 22-08-23 추가 */
	.main .notice .list li a i {display:inline-block; padding-left:3px; width:34px; height:27px; color:#fff; background: url(../images/common/i-new.png) no-repeat; background-size:100%; margin-bottom:4px;}
	

	/* 하단 바로가기 */
	.main .quickCon {padding:20px; background:url(../images/main/quickWrap_bg4.jpg) no-repeat left bottom/cover;}
	.main .quickCon .inner {display:flex; flex-wrap:wrap;}
	.main .quickCon .inner>div {margin-top:10px; width:calc((100% - 10px)/2);}
	.main .quickCon .inner>div+div {margin-left:10px;}
	.main .quickCon .inner>div:nth-child(2n+1) {margin-left:0;}

	.main .quickCon .inner a {display:block; height:100%;	background-color:#fff; box-shadow:10px 10px 10px rgba(0,0,0,.2);}
	.main .quickCon .inner a:hover {box-shadow:10px 10px 10px rgba(0,0,0,.5); background-color:#fff;}
	.main .quickCon .inner a {position:relative;}
	.main .quickCon .inner a>div {overflow:hidden;}
	.main .quickCon .inner a dl {padding:20px; overflow:hidden;}
	.main .quickCon .inner a dl+i {display:none;}
	.main .quickCon .inner a dt {font-size:18px; font-weight:600; line-height:1; margin-bottom:20px;}
	.main .quickCon .inner a .img {display:block; height:100%; position:relative;}
	.main .quickCon .inner a .img img {width:100%;}
	.main .quickCon .inner a .img:after {
		content:""; position:absolute; left:0; bottom:-100px; width:calc(100% + 100px); height:100px; transform:rotate(-8deg); transform-origin:left top; background:#fff;
		transition:all .5s ease !important; -webkit-transition:all .5s ease !important; -moz-transition:all .5s ease !important;
		box-shadow:0 -5px 10px rgba(0,0,0,.2);
	}
	.main .quickCon .inner a:hover .img {transform:scale(1.05);}
	.main .quickCon .inner a p {padding:20px; max-height:65px; overflow:hidden;}
	.main .quickCon .inner a span {position:relative; margin:20px 0; display:block; padding-left:60px;}
	.main .quickCon .inner a span i {position:absolute; left:20px; top:-5px; display:block; width:30px; height:30px; border-radius:50%; background:#323c5b no-repeat center / 15px;}
	.main .quickCon .inner .blog a span i {background-image:url(../images/main/sns_blog.svg);}
	.main .quickCon .inner .insta a span i {background-image:url(../images/main/sns_insta.svg);}

}