@charset "utf-8";

/* 메인페이지 스타일만 정의 */
/* ******************** 데스크탑 (992~) ******************** */
@media screen and (min-width: 992px), print{
	.mobile {display:none !important;}
	
	.headerH {height:60px;}
	
	/* 카드 배경과 이미지 */
	.main .inner .redBg {background:#d32f27 !important;}
	.main .inner .blackBg {background:#000 !important;}
	.main .inner .blueBg {background:#122a7c !important;}
	.main .inner .yellowBg {background:#ffa502 !important;}
	.main .inner span.icon {
		display:block; width:80px; height:80px; border-radius:50%; margin:0 auto;
		background-color:#fff; background-position:center; background-repeat:no-repeat;
	}
	
	/* 배너 */
	.main .slider .slider-tit {
		z-index:5; position:absolute;
	}
	.main .slider .slider-tit {
		position:relative; width:1200px;
		margin:0 auto; text-align:center;
		padding-top:160px; padding-bottom:300px;
		font-family:"NanumSquare"; color:#fff;
	}
	.main .slider .slider-tit h2 {font-weight:700; font-size:60px;}
	.main .slider .slider-tit p {font-weight:400; font-size:24px; margin-top:30px;}
	
	/* 자판기 */
	.main .mainProduct {position:relative; width:1200px; margin:0 auto; margin-top:-180px; z-index:9;}
	.main .mainProduct .productWrap {position:relative; overflow:hidden; border-left:1px solid #e5e5e5; border-top:1px solid #e5e5e5;}
	/*
	.main .mainProduct .productWrap::before, .main .mainProduct .productWrap::after {content:''; display:block; position:absolute; background:#e5e5e5; top:0; left:0;}
	.main .mainProduct .productWrap::before {width:100%; height:1px;}
	.main .mainProduct .productWrap::after {width:1px; height:100%;}
	*/
	.main .mainProduct div a {position:relative; padding:40px 100px; float:left; width:33.3333%; background-color:#fff; border-right:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;}
	/*
	.main .mainProduct div a::before, .main .mainProduct div a::after {content:''; display:block; position:absolute; background:#e5e5e5; bottom:0; right:0;}
	.main .mainProduct div a::before {width:1px; height:100%;}
	.main .mainProduct div a::after {width:100%; height:1px;}
	*/
	.main .mainProduct div a:hover {box-shadow:0 0 10px rgba(0,0,0,.2) inset;}
	.main .mainProduct dl {text-align:center;}
	.main .mainProduct dt {font-size:24px; color:#000; letter-spacing:-3px; line-height:1; padding:20px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	.main .mainProduct dd:first-of-type {
		font-size:14px; color:#999; letter-spacing:-1px; line-height:1.4; margin-bottom:20px; 
		overflow:hidden; white-space:normal; text-overflow:ellipsis; word-wrap:break-word;
		display:-webkit-box;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
	}
	.main .mainProduct dd:last-of-type {height:260px !important;}
	.main .mainProduct dd p {}
	.main .mainProduct>a {display:block; width:100%;}
	.main .mainProduct>a img {width:100%;}
	
	/* Notice */
	.main .notice {width:1200px; margin:0 auto; padding:30px;}
	.main .notice>p {float:left; padding-right:40px; font-size:24px; font-weight:700; color:#000; font-family:NanumSquare;}
	.main .notice ul {}
	.main .notice ul li {font-size:18px; padding:35px 30px; left:100px !important;}
	.main .notice ul li a {width:80%; height:30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
	.main .notice .data {color:#999; font-size:14px; padding-left:30px;}
	.main .notice.slider .sliderObj li a {cursor:pointer !important;}
	
	/* 메뉴카드 */
	.menuCard {width:1200px; margin:0 auto; overflow:hidden;}
	.menuCard a {float:left; width:25%; text-align:center; padding:40px;}
	.menuCard a:hover {opacity:.8;}
	.menuCard a h3 {padding-bottom:10px; font-size:24px; color:#fff; line-height:1.8; letter-spacing:-1px; font-family:NanumSquare;}
	.menuCard a p {padding-top:10px; font-size:14px; color:#fff; opacity:.5; letter-spacing:-1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	.menuCard a.redBg span {background-image:url(../images/main/operation.png);}
	.menuCard a.blackBg span {background-image:url(../images/main/rental.png);}
	.menuCard a.blueBg span {background-image:url(../images/main/inquiry.png);}
	.menuCard a.yellowBg span {background-image:url(../images/main/about_us.png);}
	
	/* 설치사례 */
	.mainInstall {position:relative; background:url(../images/main/install_bg.jpg)center /cover no-repeat; padding:100px 0 80px;}
	.mainInstall .cover {position:absolute; top:0; right:0; bottom:0; left:0; background:#000; opacity:.7;}
	.mainInstall .installWrap {clear:both; position:relative; z-index:99; width:1200px; margin:0 auto; overflow:hidden;}
	.mainInstall .installWrap .installText {text-align:center;}
	.mainInstall .installWrap .installText h3 {font-size:48px; color:#fff; letter-spacing:-2px; font-family:NanumSquare; font-weight:500;}
	.mainInstall .installWrap .installText p {font-size:18px; color:#fff; letter-spacing:-1px; font-weight:300; line-height:auto; padding:40px 0;}
	/*.mainInstall .installWrap .rollBanner {clear:both; text-align:center; position:relative; width:1200px; margin:0 auto; overflow:hidden;}*/
	.mainInstall .installWrap ul {overflow:hidden; width:3000px;}
	.mainInstall .installWrap ul li {float:left; width:300px; padding:0 10px;}
	.mainInstall .installWrap ul li a {display:block; width:100%; height:100%;}
	.mainInstall .installWrap ul li a dt {background-size:cover !important;}
	/*.mainInstall .installWrap ul li a:hover dt {background-image:120% !important;}*/
	.mainInstall .installWrap ul li a dd {font-size:16px; letter-spacing:1px; background:#fff; padding:35px 30px;}
	.mainInstall .installWrap ul li a dd p {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	.mainInstall .installWrap ul li a dd p:first-child {color:#000; font-weight:400;}
	.mainInstall .installWrap ul li a dd p:last-child {color:#999;}
	.mainInstall .btnWrap {position:absolute; top:55%; left:50%; width:1330px; margin-left:-665px;}
	.mainInstall .btnWrap button {
		position:absolute; top:0; width:24px; height:47px; display:inlien-block; cursor:pointer;
		background-position:center; background-repeat:no-repeat; background-color:rgba(0,0,0,0); background-size:cover;
	}
	.mainInstall .btnWrap .prev {background-image:url(../images/main/prev.png); left:0;}
	.mainInstall .btnWrap .next {background-image:url(../images/main/next.png); right:0;}
	
	/* 안내카드 */
	.infoCard {width:1200px; margin:0 auto; overflow:hidden;}
	.infoCard ul {overflow:hidden;}
	.infoCard ul li {float:left; width:25%; padding:40px; text-align:center;}
	.infoCard li.redBg span {background-image:url(../images/main/call.png);} /* 위탁/렌탈 문의 */
	.infoCard li.blackBg span {background-image:url(../images/main/call.png);} /* 설치상담 */
	.infoCard li.yellowBg span {background-image:url(../images/main/time.png);} /* 영업시간 */
	.infoCard li.blueBg span.icon {width:220px; height:80px; border-radius:50px; background:#fff url(../images/main/ibk.jpg)center no-repeat; } /* IBK */
	.infoCard li>a {display:block; cursor:default;}
	.infoCard ul li h3 {font-size:24px; padding-top:25px; color:#fff; letter-spacing:-2px; line-height:1; font-weight:400;}
	.infoCard ul li p {padding-top:20px; font-size:33px; color:#fff; letter-spacing:-1px; font-family:NanumSquare; font-weight:900; line-height:1.8;}
	.infoCard ul li .twoTit div {display:inline-block; text-align:left;}
	.infoCard ul li .twoTit div+div {padding-left:10px;}
	.infoCard ul li .twoTit div p {font-size:16px; font-weight:300; font-family:NotoSansKR; line-height:1.4;}
	.infoCard ul li .twoTit div p:last-child {padding:0;}
	.infoCard ul li .twoTit div p span {padding-right:10px;}
	
	
	/* 기업 */
	.corperation {width:1200px; margin:0 auto; overflow:hidden;}
	.corperation ul {overflow:hidden;}
	.corperation ul li {float:left; width:16.6666%; text-align:center;}
	.corperation ul li a {display:block; width:70%; margin:0 auto;}
	
}




/* ************************ 태블릿 이하(~991) ************************ */
@media screen and (max-width: 991px) {
	.pc {display:none !important;}
	
	
	/* 카드 배경과 이미지 */
	.main .inner .redBg {background:#d32f27 !important;}
	.main .inner .blackBg {background:#000 !important;}
	.main .inner .blueBg {background:#122a7c !important;}
	.main .inner .yellowBg {background:#ffa502 !important;}
	.main .inner span.icon {
		display:block; width:80px; height:80px; border-radius:50%; margin:0 auto;
		background-color:#fff; background-position:center; background-repeat:no-repeat;
	}
	
	/* 배너 */
	.main .slider .slider-tit {
		z-index:5; position:absolute;
	}
	.main .slider .slider-tit {
		position:relative; width:100%;
		margin:0 auto; text-align:center;
		padding:80px 20px 120px;
		font-family:"NanumSquare"; color:#fff;
	}
	.main .slider .slider-tit h2 {font-weight:700  ; font-size:60px;}
	.main .slider .slider-tit p {font-weight:400; font-size:24px; margin-top:30px;}
	
	/* 자판기 */
	.main .mainProduct {position:relative; width:100%; background:#fff;}
	.main .mainProduct .productWrap {position:relative; overflow:hidden; border-left:1px solid #e5e5e5; border-top:1px solid #e5e5e5;}
	/*
	.main .mainProduct .productWrap::before, .main .mainProduct .productWrap::after {content:''; display:block; position:absolute; background:#e5e5e5; top:0; left:0;}
	.main .mainProduct .productWrap::before {width:100%; height:1px;}
	.main .mainProduct .productWrap::after {width:1px; height:100%;}
	*/
	.main .mainProduct div a {position:relative; padding:40px; float:left; width:50%; border-right:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;}
	.main .mainProduct div a:nth-of-type(even) {border-right:0;}
	/*
	.main .mainProduct div a::before, .main .mainProduct div a::after {content:''; display:block; position:absolute; background:#e5e5e5; bottom:0; right:0;}
	.main .mainProduct div a::before {width:1px; height:100%;}
	.main .mainProduct div a::after {width:100%; height:1px;}
	*/
	.main .mainProduct div a:hover {box-shadow:0 0 10px rgba(0,0,0,.2) inset;}
	.main .mainProduct dl {text-align:center;}
	.main .mainProduct dt {margin:0 auto; font-size:24px; color:#000; letter-spacing:-3px; line-height:1; padding-bottom:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	.main .mainProduct dd:first-of-type {
		margin:0 auto; font-size:14px; color:#999; letter-spacing:-1px; line-height:1.4; margin-bottom:20px;
		overflow:hidden; white-space:normal; text-overflow:ellipsis; word-wrap:break-word; max-height:50px;
		display:-webkit-box;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
	}
	.main .mainProduct dd:last-of-type {height:260px !important;}
	.main .mainProduct>a {display:block; width:100%;}
	.main .mainProduct>a img {width:100%;}
	
	/* Notice */
	.main .notice {width:100%; padding:30px;}
	.main .notice>p {float:left; padding-right:40px; font-size:24px; font-weight:700; color:#000; font-family:NanumSquare;}
	.main .notice ul li {font-size:18px; padding:35px 30px; left:100px !important;}
	.main .notice ul li a {width:70%; height:30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
	.main .notice .data {color:#999; font-size:14px; padding-left:30px;}
	
	/* 메뉴카드 */
	.menuCard {width:100%; overflow:hidden;}
	.menuCard a {float:left; width:50%; text-align:center; padding:40px;}
	.menuCard a:hover {opacity:.8;}
	.menuCard a h3 {padding-bottom:10px; font-size:24px; color:#fff; line-height:1.8; letter-spacing:-1px; font-family:NanumSquare;}
	.menuCard a p {padding-top:10px; font-size:14px; color:#fff; opacity:.5; letter-spacing:-1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	.menuCard a.redBg span {background-image:url(../images/main/operation.png);}
	.menuCard a.blackBg span {background-image:url(../images/main/rental.png);}
	.menuCard a.blueBg span {background-image:url(../images/main/inquiry.png);}
	.menuCard a.yellowBg span {background-image:url(../images/main/about_us.png);}
	
	/* 설치사례 */
	.mainInstall {position:relative; background:url(../images/main/install_bg.jpg)center /cover no-repeat; padding:40px 0 20px;}
	.mainInstall .cover {position:absolute; top:0; right:0; bottom:0; left:0; background:#000; opacity:.7;}
	.mainInstall .installWrap {position:relative; z-index:99; width:100%; overflow:hidden;}
	.mainInstall .installWrap .installText {text-align:center;}
	.mainInstall .installWrap .installText h3 {font-size:48px; color:#fff; letter-spacing:-2px; font-family:NanumSquare; font-weight:500;}
	.mainInstall .installWrap .installText p {font-size:18px; color:#fff; letter-spacing:-1px; font-weight:300; line-height:auto; padding:30px 0;}
	.mainInstall .installWrap ul {width:100%; overflow:hidden; margin:0 !important;}
	.mainInstall .installWrap ul li {float:left; width:50%; padding:0 10px 20px 10px;}
	.mainInstall .installWrap ul li a {width:100%; height:100%;}
	.mainInstall .installWrap ul li a dt {background-size:cover !important;}
	.mainInstall .installWrap ul li a:hover dt {background-image:120% !important;}
	.mainInstall .installWrap ul li a dd {font-size:16px; letter-spacing:1px; background:#fff; padding:35px 30px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	.mainInstall .installWrap ul li a dd p {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	.mainInstall .installWrap ul li a dd p:first-child {color:#000; font-weight:400;}
	.mainInstall .installWrap ul li a dd p:last-child {color:#999;}
	.mainInstall .btnWrap {display:none !important;}
	
	/* 안내카드 */
	.infoCard {width:100%; overflow:hidden;}
	.infoCard ul {overflow:hidden;}
	.infoCard ul li {float:left; width:50%; padding:20px; text-align:center;}
	.infoCard li.redBg span {background-image:url(../images/main/call.png);} /* 위탁/렌탈 문의 */
	.infoCard li.blackBg span {background-image:url(../images/main/call.png);} /* 설치상담 */
	.infoCard li.yellowBg span {background-image:url(../images/main/time.png);} /* 영업시간 */
	.infoCard li.blueBg span.icon {width:220px; height:80px; border-radius:50px; background:#fff url(../images/main/ibk.jpg)center no-repeat; } /* IBK */
	.infoCard ul li h3 {font-size:24px; padding-top:25px; color:#fff; letter-spacing:-2px; line-height:1; font-weight:400;}
	.infoCard ul li p {padding-top:20px; font-size:33px; color:#fff; letter-spacing:-1px; font-family:NanumSquare; font-weight:900; line-height:1.8;}
	.infoCard ul li .twoTit div {display:inline-block; text-align:left;}
	.infoCard ul li .twoTit div+div {padding-left:10px;}
	.infoCard ul li .twoTit div p {font-size:16px; font-weight:300; font-family:NotoSansKR; line-height:1.4;}
	.infoCard ul li .twoTit div p:last-child {padding:0;}
	.infoCard ul li .twoTit div p span {padding-right:10px;}
	
	/* 기업 */
	.corperation {width:100%; overflow:hidden; border-left:1px solid #e5e5e5; border-top:1px solid #e5e5e5;}
	.corperation ul {overflow:hidden;}
	.corperation ul li {float:left; width:33.3333%; text-align:center; border-right:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;}
	.corperation ul li a {display:block; width:70%; margin:0 auto;}
	
	
}





/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width:767px) {
	.pc {display:none !important;}
	
	/* 카드 배경과 이미지 */
	.main .inner .redBg {background:#d32f27 !important;}
	.main .inner .blackBg {background:#000 !important;}
	.main .inner .blueBg {background:#122a7c !important;}
	.main .inner .yellowBg {background:#ffa502 !important;}
	.main .inner span.icon {
		display:block; width:80px; height:80px; border-radius:50%; margin:0 auto;
		background-color:#fff; background-position:center; background-repeat:no-repeat;
	}
	
	/* 배너 */
	.main .slider .slider-tit {padding:40px 20px;}
	.main .slider .slider-tit h2 {font-size:32px;}
	.main .slider .slider-tit p {font-size:18px; margin-top:20px;}
	
	/* 자판기 */
	.main .mainProduct div a {padding:20px;}
	.main .mainProduct dt {padding:10px 0;}
	.main .mainProduct dd:first-of-type {margin-bottom:10px;}
	
	/* Notice */
	.main .notice {padding:10px;}
	.main .notice>p {font-size:21px; padding-right:20px;}
	.main .notice ul li {padding:15px 10px;}
	.main .notice ul li a {font-size:16px; width:60%;}
	
	/* 메뉴카드 */
	.menuCard a {width:100%; padding:20px;}

	/* 설치사례 */
	.mainInstall .installWrap .installText h3 {font-size:36px;}
	.mainInstall .installWrap .installText p {font-size:16px; padding:20px;}
	.mainInstall .installWrap .installText p br {display:none;}
	.mainInstall .installWrap ul {padding:0 5px;}
	.mainInstall .installWrap ul li {padding:0 5px 10px 5px;}
	.mainInstall .installWrap ul li a dt {background-size:cover !important;}
	.mainInstall .installWrap ul li a dd {padding:20px;}
	
	/* 안내카드 */
	.infoCard ul li {width:100%; padding:20px;}
	.infoCard ul li h3 {padding-top:15px;}
	.infoCard ul li p {padding-top:10px;}
	
	/* 기업 */
	.corperation ul li {width:50%;}
	.corperation ul li a {width:100%;}
	
}