@charset "utf-8";

.mall2 .mo {display:none}
/* 반응형 */
@media screen and (max-width:1300px) {
	#header .inner {max-width: 100%;}
	#wrap #header .inner{ width: 100%}
	#wrap .inner {width: 90%}
	#aside.on {width: 0; height: 0; overflow: hidden; opacity: 0; display: none;}
	section .title {width: 100%}
	section.location .inner,.form-box,footer .middle,.contact .btnBox {width: 95%}
	.form-box input[type=text], .form-box select {width: 100%}
	.form-box .veiwList li {width: auto;}
}
@media screen and (max-width:1024px) {
    /* #wrap.off */
    #wrap.off #contents .intro {height:100vh !important; min-height:100vh;}
    #wrap.off #contents .intro .scrollBtn {opacity: 1}
	/* #header */
	#header {height: 50px; line-height: 50px }
	#header:before {display: none;}
	#header.on:after {display: none}
	#header.on:before {display: none}
	#header.on .logo img:nth-child(1) {opacity: 1}
	#header.on .logo img:nth-child(2) {display: none}
	#header .logo {width: 22%; padding-left: 2.5%}
	#header .logo img{width: 100%}
	/* gnbBtn */
	#header .gnbBtn {opacity: 1;width: 40px; height: 50px; display: block; box-sizing: border-box; position: absolute; top: 0; right: 0; z-index: 100; background: none; border: none; z-index: 9999; cursor: pointer;}
	#header .gnbBtn .blind {display:block;opacity: 1; width: 28px; height:3px; position: absolute; background: #fff; left: 0;top: 16px; transition: 0.2s; border-radius: 10px}
	#header .gnbBtn .blind:nth-child(2) {top: 26px;width: 22px;}
	#header .gnbBtn .blind:nth-child(3) {top: 36px;}
	#header .gnbBtn.on .blind:nth-child(1){transform: rotate(45deg); transform-origin: center; width: 30px; top: 30px; background: #1a1a1a}
	#header .gnbBtn.on .blind:nth-child(3){transform: rotate(-45deg); transform-origin:center; width: 30px; top: 30px; background: #1a1a1a}
	#header .gnbBtn.on .blind:nth-child(2){opacity: 0; width:0}
	#header #gnb {display: none;}
    #header #mGnb {display: block;position: fixed; width: 0%; height: 100vh; background: #fff; right: -100%; top: 0; z-index: 100; transition: all 0.4s;opacity: 0;}
	#header #mGnb.on {width: 40%; right: 0; transition: all 0.5s; opacity: 1; border-left:  1px solid #fff; overflow: hidden;}
	/* #mGnb */
	body {overflow: auto;}
	body.on {overflow: hidden;}
	#mGnb > ul {border-top: 1px solid #e6e6e6; width: 100%; margin: 60px auto 0; }
	#mGnb > ul > li {float: none; margin: 0 auto; border-bottom: 1px solid #e6e6e6}
	#mGnb > ul > li > a {display: block; width: 100%; margin: auto; line-height: 55px; font-size: 16px; color: #000; position: relative;padding: 0 20px;    box-sizing: border-box;}
	#mGnb > ul > li > a:after {content: ''; width: 11px; height: 1px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: #ee413d}
	#mGnb > ul > li > a:before {content: ''; width: 1px; height: 10px; position: absolute; right: 25px; top: 50%; transform: translateY(-50%); background: #ee413d}
	#mGnb > ul > li > a.on:before {display: none}
	#mGnb > ul > li > .inner { width: 100%; padding-bottom: 13px; color: #666;background: #f1f1f1; padding-top: 15px;}
	#mGnb > ul > li > .inner li {line-height: 42px;padding: 0 20px;}
	#mGnb > ul > li > .inner li a {display: block;}
	#mGnb > ul > li > .inner {overflow: hidden;}
    /* section.renthana */
    section.renthana {padding: 60px 0}
    section.renthana:before {height:56%;bottom:30px}
    section.renthana .inner {display: none;}
    section.renthana .slide {display: block; width: 90%; margin: 0 auto}
    section.renthana .slide li img {width: 100%;}
    .slick-dots {display: flex; justify-content: center; position: absolute; bottom: -60px; left: 0; width: 100%}
    .slick-dots li { text-indent: -9999px;width: 10px; height: 10px; background: #f2f2f2; border-radius: 100%; margin: 0 5px}
    .slick-dots li.slick-active {background: #ef413d}
	section.service ul li .icon { width: 200px; height: 200px; line-height: 200px;}
	section.service ul li .icon img {width: 40%}
	section.service ul li:nth-child(2) .icon img {width: 35%}
	/* layer-popup */
	.layer-popup .inner {padding: 5%;height: 600px;}

    /* -------------서브------------- */
    #sub {padding: 60px 0}
    #subVisual {height: 400px}
    #subVisual .page {width: 95%}
    #sub .inner {width: 90%}
    #sub .about ul li {padding-bottom: 0; margin-bottom: 0}
    #sub .about ul li .inner > div{width: 100%; text-align: center}
    #sub .about ul li .inner > div img {width: 100%}
    #sub .about ul li:before {display: none}
    #sub .about ul li:after {content: ''; position: absolute; top: -5%;background: #f2f2f2; width: 45%; height: 60%; z-index: -1}
    #sub .about ul li:nth-child(1):after {height: 45%;}
    #sub .about ul li .inner .text {padding: 0}
    #sub .about ul li .inner .text p {margin: 10% 0}
    #sub .about ul li:nth-child(2) .inner {flex-direction: column-reverse; }
    #sub .about ul li .inner .text .logoImg img:nth-child(2) {display: block; margin-top: 10%}
    #sub .about ul li .inner .text .logoImg img:nth-child(1) {display: none}

	/* ci */
	#sub .ci .inner .txt img  {width: 100%}
	#sub .ci .inner .txt .color {width: 35%; text-align: center; }

	.mall .pc {display:none}
	.mall .mo {display:block;}

	.mall2 .pc {display:none}
	.mall2 .mo {display:block;}
	#sub .mall2 {margin-bottom: 50px}
	#sub .installList li {width: 48%; margin-right: 4%}
	#sub .installList li:nth-child(3n){margin-right: 4%}
	#sub .installList li:nth-child(2n){margin-right: 0}
	#sub .installList li .thumbnail .txt {font-size: 4.5vw; padding: 2px 0;}
}
@media screen and (max-width:1000px) {
	#contents .intro .slogan {width: 100%}
	#contents .intro .slogan h3 {  font-size: 40px;}
    section.contact,section.location{padding: 60px 0}
	section.service {padding: 60px 0 40px}
	section.service:before {display: none;}
	section.service ul {flex-wrap: wrap;}
	section.service ul li {width: 50%; margin-bottom: 20px}
	section.service ul li .icon {margin: 0 auto;}
    .form-box table .th {width: 130px;}
    .form-box table .th.b {padding-left: 22px}
    .form-box table .th span.b {left: 10px}
    .form-box input[type=text], .form-box select {padding-left: 10px; font-size: 14px}
    .form-box .veiwList {display: block;}
	.form-box .veiwList li {display: flex; justify-content: space-between;margin-bottom: 10px}
	.form-box .veiwList li:nth-child(2) {padding-left: 0}
	.form-box button.veiw {width: 65%; box-sizing: border-box; font-size: 17px; margin: 0}
    .filebox .upload-name {padding-left: 10px; font-size: 14px}
    .filebox label {font-size: 14px}
    textarea {padding-left: 10px; font-size: 14px}
	section.location .inner .map {height: 300px}
	footer .middle ul {width: 20%;}
	footer .middle ul img {width: 100%}
	footer .middle table td {padding: 2px 0;}

	/* rental */
	#sub .b2b br.pc {display: none}
	#sub .b2b {padding-bottom: 0}
	#sub .b2b::before {display: none;}
	#sub .b2b ul {padding: 0; margin-top: 30px}
	#sub .b2b ul li {width: 100%; text-align: left; margin-bottom: 15px}
	#sub .b2b ul li .txt {padding: 0; display: flex; justify-content: space-between; padding: 30px 50px}
	#sub .b2b ul li .txt .icon {position: static; transform: none; width: 22%}
	#sub .b2b ul li .txt .icon img {width: 100%}
	#sub .b2b ul li .txt .in {width: 68%; margin-top: 10px}
	#sub .b2b ul li .txt h3 {margin-bottom: 20px}
	#sub .b2b ul li .txt h3:after {left: 0; transform: none; bottom: -11px}
	#sub .b2b.b ul {margin-top: 0px}
	#sub .b2b.b ul li {width: 100%;}
	#sub .b2b.b ul li .txt {padding: 20px}
	#sub .b2b.b ul li .txt .icon {width: 26%}
	#sub .b2b.b ul li .txt .in {width: 67.5%;}
	#sub .b2b.b ul li .txt h3 {font-size: 16px}
	#sub .b2b.b ul li .txt p {font-size: 13px}
	#sub .b2b.b ul li .txt h5 {font-size: 16px; margin-top: 6px; line-height: 1.2}

	#sub .notice .viewBox table td.th {width: 30%}
	/* mall */
	.goods {flex-wrap: wrap;}
	.goods li {width: 48.5%; margin-bottom: 25px}
	.mall .call img {width: 100%;}
	.goodText h3 {font-size: 14px; height: 38px}
	.goodText span {font-size: 10px}
	.goodText span.line {font-size: 14px; margin: 5px 0 0}
	.goodText h4 {font-size: 14px}
	.goodText h4 b {font-size: 16px; margin-left: 3px}
}
@media screen and (max-width:720px) {
	#wrap {font-size: 16px}
	br.mo {display: block;}
	#contents .intro .slogan h2 {font-size: 20px}
	#contents .intro .slogan h3 {font-size: 30px}
	#contents .intro .scrollBtn {width: 50px; height: 50px;padding-top: 0;}
	#header #mGnb.on {width: 100%;}
	section .title p {font-size: 18px}
	.form-box {padding: 20px}
	.form-box table .th {width: 25%;padding-left: 10px}
	.form-box table td {width:75%;  float: left;display: block; padding: 4px 0; line-height: 50px}
	.form-box table .th span {top: 27px}
	.form-box table .th.b {padding-left: 12px}
	.form-box table .th.c {display: none;}
	.form-box table .th span.b {left: 0}
	.filebox .upload-name {width: 65%}
	.filebox label {width: 32%}
	.form-box .veiwBox {width: 100%}
	.form-box .veiwInner {line-height: 1.6}
	.check input[type=checkbox] + .tit::before {width: 42px;height: 42px;    top: 6px;background: url(../img/main/check_1.png) no-repeat center/41px;}
    .check input[type=checkbox] + .tit::before {background: url(../img/main/check_2.png) no-repeat center/41px;}
	.check input[type=checkbox] + .tit {padding-right: 55px;    font-size: 22px;}
	section.location .inner .list {display: block;}
	section.location .inner .list {margin-top: 60px}
	section.location .inner .list li {width: 100%; margin: 20px 0; font-size: 18px}
	section.location .inner .list li:before {display: none;}
	section.location .inner .list li h3 {font-size: 20px}
	footer .middle {display: flex;flex-direction: column-reverse; width: 100%; padding: 20px 0}
	footer .middle ul {padding: 0 5%; box-sizing: border-box;width: 100%; display: flex; justify-content: space-between;    border-bottom: 1px solid #e6e6e6; padding-bottom: 20px}
	footer .middle ul li {width: 30%}
	footer .middle table {width: 100%;padding: 0 5%; box-sizing: border-box;padding-top: 20px; font-size:14px}
	footer .bottom {padding: 15px 0; font-size:14px}
	/* layer-popup */
	.layer-popup .inner {height: 80vh; font-size:10px}
	.layer-popup .inner h5{  font-size: 12px;  }
	.layer-popup .inner .txt {  height: 89%;}
	.layer-popup .inner .close { top: -5px; right: 0;}
	.layer-popup .inner h2 { font-size: 16px; padding-bottom:8px;    border-bottom: 2px solid #000; margin-bottom: 10px;}
	/* 고객센터 팝업 */
	.layer-popup.notice .inner .close  {top: 20px;right: 10px}

	/* -------서브--------- */
	#sub .notice .top {flex-wrap: wrap;}
	#sub .notice .top li {width: 100%}
	#sub .notice .top input[type=text] {width: 100%}
	#sub .notice .top .btn {margin: 20px auto 0;height: 48px}
	#sub .notice .tableBox.c table td i {display: none}
	#sub .notice .tableBox.c table td:nth-child(1),#sub .notice .tableBox.c table td:nth-child(2) {display: none}
	#sub .notice .tableBox.c .label {padding: 5px 0px; width: 55px;}
	/* 문의하기 상세페이지 */
	#sub .notice .viewBox table td.th {width: 30%}

	/* ci */
	#sub .ci .inner br.pc {display: none}

	/* rental */
	#sub .b2b ul li .txt {padding: 30px}
	#sub .b2b ul li .txt .in {margin-top: 0}
	/* mall */
	.mall .call img {width: 180%; margin-left: -40%;}
}

@media screen and (max-width:530px) {
	#wrap {font-size: 14px;}
	#header .logo {width: 34%}
	#contents .intro .slogan {width:90%}
	#contents .intro .slogan h2 {font-size: 22px;margin-bottom:10px}
	#contents .intro .slogan h3 {font-size: 35px;line-height:1.2}
	#contents .intro .scrollBtn {width: 55px; height: 55px; padding-top: 1.2%;}
	section .title {background: url(../img/main/title_1.png) no-repeat center top 0/20px;    padding-top: 35px;}
	section .title h2 {font-size: 26px}
	section .title p {font-size: 14px;}
	.form-box {padding: 20px 15px;}
	section.service ul li .icon {width: 140px;height: 140px;line-height: 140px;}
	.form-box table .th {width: 28%;padding-left: 10px; font-size: 12px}
	.form-box table td {width:72%;}
	.form-box input[type=text], .form-box select {font-size: 13px;padding-left: 10px;}
	.filebox .upload-name{font-size: 13px;padding-left: 10px;}
	.filebox label {font-size: 13px}
	textarea{font-size: 13px;padding: 10px 20px; height: 120px;padding-left: 10px;}
	.form-box table .th span.c {top: 28px;}
	.form-box button.veiw {font-size: 13px; width: 70%;    padding: 0;}
	.form-box .veiwList li {line-height: 40px}
	.check {margin-left: 0; width: 30%;text-align: right;}
	.check input[type=checkbox] + .tit { padding-right: 40px; font-size: 15px;}
	.check input[type=checkbox] + .tit::before {width: 30px;height: 30px;background: url(../img/main/check_1.png) no-repeat center/30px;}
    .check input[type=checkbox]:checked + .tit::before{background: url(../img/main/check_2.png) no-repeat center/30px;}
	.contact .btn {font-size: 22px}
	section.location .inner .list p {    font-size: 16px;}
	footer .top ul {display: flex;  justify-content: center; font-size: 12px}
	footer .top ul li {margin: 0;display: block; margin: 0 3%}
	footer .top ul li:before {    right: -11px;}
	footer .middle table {font-size: 12px}
    footer .bottom {font-size:12px}

    /* -------------서브------------- */
    br.pc {display: none}
    #subVisual {height: 300px}
    #subVisual .tit {font-size: 30px}
    #subVisual .page li { margin: 0 4px;line-height: 19px;}
    #subVisual .page li a {font-size: 11px; display: block; height: 20px; line-height: 22px}
    #subVisual .page li img {height: 10px; vertical-align: middle}

	/* 고객센터 */
    #sub .notice .topMenu li a{font-size: 14px; line-height: 50px; }
    #sub .notice .tableBox table td.th{font-size: 13px; padding: 10px 0}
    #sub .notice .tableBox table td {padding: 10px 0; font-size: 13px}
    #sub .notice .tableBox table td:first-child {display: none}
    #sub .notice .tableBox table td:nth-child(2) {padding-left: 10px}
    #sub .notice .pagination {width: 90%; position: relative}
    #sub .notice .pagination li a {font-size: 13px; padding: 5px}
    .blind {display: none}

    /* 공지사항 상세페이지 */
    #sub .notice .tableBox.b table td:nth-child(1) {display: table-cell; text-align: center; padding-left: 0}
    #sub .notice .tableBox.b table tr:last-child td{width: 100%; text-align: left; padding: 30px 0}
    #sub .notice .btnBox button { font-size: 14px; width: 45%;  height: 48px;}

	/* 문의하기 상세페이지 */
	#sub .notice .viewBox table td {padding: 10px}
	#sub .notice .viewBox table td.th {width: 20%}
	#wrap .layer-popup.notice .inner {width: 80%; height: auto; padding: 35px 25px;}
	.layer-popup.notice .inner > img {width: 15%}
	.layer-popup.notice .inner h3 { padding-bottom: 20px; font-size: 22px; margin: 20px 0;}
	.layer-popup.notice .inner p {font-size: 14px}
	.layer-popup.notice .inner input[type=text], .layer-popup.notice .inner input[type=password] {height: 45px}
	.layer-popup.notice .inner button {height: 50px}

	/* about */
	#sub .about ul li .inner .text {font-size: 14px}

	/* ci */
	#sub .ci .inner .txt p {margin: 30px auto 0; font-size: 14px}

	/* rental */
	#sub .b2b ul li {padding: 0}
	#sub .b2b ul li .txt {padding: 30px 20px}
	#sub .b2b ul li .txt .icon {width: 30%}
	#sub .b2b ul li .txt .in {width: 60%}
	#sub .b2b ul li .txt h3 {font-size: 17px}
}

@media screen and (max-width:350px) {
	#wrap {font-size: 13px;}
	#contents .intro .slogan h2 {font-size: 20px;}
	#contents .intro .slogan h3 {font-size: 29px;}
	#contents .intro .slogan p {font-size: 14px}
	section .title h2 {font-size: 22px}
	section .title p {font-size: 13px}
	section.service ul li .icon { width: 120px; height: 120px; line-height: 120px;}
	section.service ul li h3 {font-size: 16px}
	.form-box table .th  {font-size: 12px;}
	.form-box input[type=text], .form-box select {font-size: 13px;}
	.filebox .upload-name{font-size: 11px;}
	.filebox label {font-size: 11px}
	textarea{font-size: 11px;}
	.form-box button.veiw {font-size: 10px; width: 65%;}
	.form-box .veiwList li {line-height: 32px;}
	.check input[type=checkbox] + .tit::before {top: 2px}
	.contact .btn {padding: 18px 0; width: 100%}
	section.location .inner .list li h3{font-size: 17px}
	section.location .inner .list p{font-size: 13px}
	footer .top ul {font-size: 10px}
	footer .middle {font-size: 10px;}
	footer .middle table .th {width: 44%;}
	footer .bottom {font-size: 10px}
	.layer-popup.notice .inner p {font-size: 13px}

	/* rental */
	#sub .b2b ul li .txt{padding:15px}
	#sub .b2b ul li .txt h3 {font-size: 16px}
	#sub .b2b ul li .txt .icon {width: 25%; margin-top: 10px}
	#sub .b2b ul li .txt .in {width: 69%}
}