/* 공통 */
.mainTit {position: relative; margin: 0 0 20px 0; z-index: 10;}
.mainTit h2 {font-family: 'Nanumsquare'; font-size: 32px; font-weight: 600;  color: #fff;}
.mainTit a {display: block; position: absolute; top: 0; right: 0; box-sizing: border-box; width: 170px; height: 36px; line-height: 36px; font-family: 'Nanumsquare'; font-size: 17px; color:#333; border-bottom: 1px solid #7750ad; 
background:url(../images/main/txt_line.png) no-repeat 100% 100%; transition: 0.3s;}
.mainTit a:hover {width: 180px;}



#artrangCon1 {box-sizing: border-box; position:relative;}
#artrangCon1:before {display: block; position: absolute; top: 0; left: 0; bottom: 0; width: calc(50% - 375px); height: 100%; background-color: #2f043c; content: '';}
/*#artrangCon1 {box-sizing: border-box; position:relative; background-image: linear-gradient(to right, #4a474e 30%, #fff 30%);}*/
#artrangCon1:after {display: block; position:absolute; top: calc(50% + 120px); right: 60px; transform: translateY(-50%); width: calc(50% + 315px); height: 690px; background-color: #f9f9f9; z-index: -1; content:'';} 
#artrangCon1 .main_top {height: calc(100% - 150px);}

.mainSlide1 {position: absolute; top: 46%; transform: translateY(-50%); width: 100%; height: 690px; background:#FFFFFF;}
/*.mainSlide1 {position: relative; background-image: linear-gradient(to bottom, #fff 50px, #f9f9f9 50px); z-index: 2;}*/
.mainSlide1 .visual_img {height: 690px; vertical-align: top;}
.mainSlide1 .visual_img:after {content:''; clear:both; height:0; display:block; visibility:hidden;}
.mainSlide1 .visual_img .imgArea {position: absolute; width: 690px; box-shadow: 20px 20px 30px rgba(0,0,0,0.2); background-color: #fff;}
.mainSlide1 .visual_img .imgArea:before {display: block; padding-top: 100%; content: '';}
.mainSlide1 .visual_img .imgArea img {position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; height: 100%;}
.mainSlide1 .visual_img .txtArea {position: relative; margin: 0 0 0 auto; width: calc(100% - 690px); height: 690px;}
.mainSlide1 .visual_img .txtArea > div {position: absolute; top: 50%; transform: translateY(-50%); box-sizing: border-box; width: 100%; padding: 0 0 0 150px;}
.mainSlide1 .visual_img .txtArea .tit {display: block; margin: 0 0 20px 0; font-family: 'Nanumsquare'; font-size: 3.25rem; font-weight: 500; color: #333;}
.mainSlide1 .visual_img .txtArea .con {display: block; overflow: hidden; width: 100%; text-overflow: ellipsis; line-height: 1.7; height: 3.4em; font-size: 16px; color: #666; white-space: normal; text-align: left; word-wrap: break-word; 
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.mainSlide1 .visual_img .txtArea .moreBtn {display: block; margin: 50px 0 0 0; box-sizing: border-box; width: 170px; height: 36px; line-height: 36px; font-family: 'Nanumsquare'; font-size: 1.063rem; color:#333; border-bottom: 1px solid #7750ad; background:url(../images/main/txt_line.png) no-repeat 100% 100%; transition: 0.3s;}
.mainSlide1 .visual_img .txtArea .moreBtn:hover {width:180px;}
.mainSlide1 .slick-arrow {bottom: 100px; transform: none; width: 40px; height: 40px; border: 2px solid #eee; text-indent: -9999px; border-radius: 50%; background-repeat: no-repeat; background-position: center center;}
.mainSlide1 .slick-prev {left: 840px; background-image: url(../images/main/prev_arrow.png);}
.mainSlide1 .slick-next {left: 890px; background-image: url(../images/main/next_arrow.png);}

#artrangCon1 .numArea {position: absolute; bottom: 100px; right: 0; z-index: 2;}
#artrangCon1 .numArea > span {display: inline-block; font-family: 'Nanumsquare'; color: #333;}
#artrangCon1 .numArea .current_num {font-size: 2.5rem;}
#artrangCon1 .numArea .total {font-size: 1.25rem;}

/* 진행중인 공동구매 */
#artrangCon2 {position: relative; z-index:9;}
#artrangCon2:before {display: block; position: absolute; top: 0; left: 0; width: calc(50% - 135px); height: 50%; background-color: #2f043c; z-index: 2; content: '';} 
#artrangCon2 .mainSlide2 {position: relative; display: block; overflow: visible; overflow-x: hidden; box-sizing: border-box; margin: 0 0 0 auto; width: calc(((100% - 1410px) / 2) + 1410px); height: auto; 
	padding: 50px 0 100px; z-index: 9;}
.mainSlide2 .imgArea {position: relative; width: 100%;}
.mainSlide2 .imgArea:before {display: block; padding-top: 100%; content: '';}
.mainSlide2 .imgArea .mark {position:absolute; top:20px; left:20px; width:28px; height:27px; background:url(../images/main/star_off.png) no-repeat 0 0;}
.mainSlide2 .imgArea .mark.on {background:url(../images/main/star_on.png) no-repeat 0 0;}
.mainSlide2 .imgArea img {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;}
.mainSlide2 .txtArea {position: relative; box-sizing: border-box; margin: 0 auto; padding: 15px 20px; background-color: #fff;}
.mainSlide2 .txtArea .state {display:inline-block; width: 56px; height: 20px; line-height: 20px; text-align:center; border:1px solid #7fdddb; color:#7fdddb; font-size: 0.75rem; }
.mainSlide2 .txtArea .percent {position:absolute; right: 20px; top: 15px; font-size: 1rem; color:#666;}
.mainSlide2 .txtArea .percent .txt1 .mark_red {display: inline-block; margin: 0 0 0 5px; width: 12px; height: 12px; background-color: #e30834; border-radius: 50%; vertical-align: middle;}
.mainSlide2 .txtArea .percent .txt2 {display:none;}
.mainSlide2 .txtArea .tit {display: block; overflow: hidden; margin: 0 0 5px 0; padding-top: 10px 0; font-size: 1rem; color: #333; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; 
	border-bottom: 1px solid #ddd;}
.mainSlide2 .txtArea .price ul li {overflow: hidden;}
.mainSlide2 .txtArea .price ul li span {float: left; font-size: 0.875rem; color:#666;}
.mainSlide2 .txtArea .price ul li span em {color: #999;}
.mainSlide2 .txtArea .price ul li .r_txt {float: right;}
.mainSlide2 .swiper-slide {transition: all 0.3s ease-in-out;}
.mainSlide2 .swiper-slide-active {transform: scale(1.2); box-shadow: 20px 20px 30px rgba(119,119,119,0.3); z-index: 1;}

#artrangCon3 {position:relative; z-index:9;}
#artrangCon3:before {display: block; position: absolute; right: 0; top: 0; width: calc(50% - 135px); height: calc(100% - 80px); background-color: #2f043c; z-index: 3; content:'';} 
#artrangCon3:after {display: block; position: absolute; bottom: 0; left: 60px; width: calc(50% + 405px); height: calc(75% - 30px); background-color: #f9f9f9; z-index: 2; content:'';} 
#artrangCon3 .inner {padding: 0 240px 0 0;}
#artrangCon3 .mainTit {position: relative; margin: 0 0 30px 0; text-align: right;}
.mainSlide3 {position:relative; z-index:9; height: 570px;}
.mainSlide3 .slick-list {overflow: inherit;}
.mainSlide3 .slick-slide div {display: block; vertical-align: top;}
.mainSlide3 .txtArea {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 330px;}
.mainSlide3 .txtArea .tit {display: block; overflow: hidden; width: 100%; padding: 0 0 15px 0; font-family: 'Nanumsquare'; font-size: 1.625rem; color: #333; text-overflow: ellipsis; white-space: nowrap; 
word-break: break-all; border-bottom: 1px solid #3a2414;}
.mainSlide3 .txtArea .info {margin: 40px 0 0 0;}
.mainSlide3 .txtArea .info li {margin: 20px 0 0 0;}
.mainSlide3 .txtArea .info li:first-child {margin: 0;}
.mainSlide3 .txtArea .info li:after {display: block; clear: both; *zoom: 1; content: '';}
.mainSlide3 .txtArea .info li span {float: left; width: 120px; color: #666;}
.mainSlide3 .txtArea .info li span em {color: #999;}
.mainSlide3 .txtArea .info li p {float: left; width: calc(100% - 120px); color: #333; letter-spacing: -1px;}
.mainSlide3 .txtArea .moreBtn {display: block; margin: 100px 0 0 0; width: 170px; height: 36px; line-height: 36px; font-family: 'Nanumsquare'; font-size: 1.063rem; font-weight: 500; color:#333; border-bottom: 1px solid #7750ad; 
background:url(../images/main/txt_line.png) no-repeat 100% 100%; transition: 0.3s;}
.mainSlide3 .txtArea .moreBtn:hover {width: 180px;}
.mainSlide3 .imgArea {position: relative; box-sizing: border-box; width: 570px; margin: 0 0 0 auto; z-index: 2;}
.mainSlide3 .imgArea .img_box {position: relative; width: 570px; height: 570px;}
.mainSlide3 .imgArea .img_box img {width: 100%; height: 100%;background-position: center;background-size:cover}
.mainSlide3 .imgArea .img_box .fade_img {position: absolute; top: 50%; transform: translateY(-50%); right: -75px; width: 490px; height: 490px; background-color: #e5e5e7; opacity: 0.5; z-index: -1;}
.mainSlide3 .imgArea .label {position:absolute; left:-60px; top:40%; background:#7fdddb; width:120px; height:120px; text-align:center; color:#fff; font-size:14px; z-index: 1;}
.mainSlide3 .imgArea .label p {padding-top:20px; line-height:1.2; font-size: 1.25rem; color:#fff; font-family: 'Nanumsquare'; font-weight:300;}
.mainSlide3 .imgArea .label p span {font-size:46px; font-family: 'Nanumsquare'; font-weight:500;}
.mainSlide3 .imgArea .btn_drag {position:absolute; right: -120px; top: 50%; transform: translateY(-50%); box-sizing: border-box; width: 90px; height: 60px; border-top: 1px solid rgba(255,255,255,0.6); border-bottom: 1px solid rgba(255,255,255,0.6);}
.mainSlide3 .imgArea .btn_drag:before {display: block; position: absolute; top: -12px; right: 4px; transform: rotate(-45deg); width: 1px; height: 14px; background-color: rgba(255,255,255,0.6); content: '';}
.mainSlide3 .imgArea .btn_drag:after {display: block; position: absolute; bottom: -12px; left: 4px; transform: rotate(-45deg); width: 1px; height: 14px; background-color: rgba(255,255,255,0.6); content: '';}
.mainSlide3 .imgArea .btn_drag p {line-height: 58px; font-family: 'Noto Serif KR'; font-size: 0.875rem; font-weight: 400; color: #fff; text-align: center;}



#artrangCon4 {position: relative;}
#artrangCon4:before {display: block; position: absolute; top: 0; left: 60px; width: calc(50% + 405px); height: 260px; background-color: #f9f9f9; z-index: 2; content:'';}
#artrangCon4 .inner {height: 100%;}
#artrangCon4 .inner:before {z-index:2; position:absolute; left: 0; bottom: 0; background-color:#2f043c; width: 570px; height: 50%; content:''; display:block;} 
#artrangCon4 .inner > div {position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 1050px; z-index: 9;}
#artrangCon4 .mainTit h2 {color: #333;}
#artrangCon4 .artList {position: relative; z-index:9; }
#artrangCon4 .artList li {margin: 10px 0 0 0; height: 250px;}
#artrangCon4 .artList li:first-child {margin: 0;}
#artrangCon4 .artList li a {display: block; width: 100%; height: 100%;}
#artrangCon4 .artList li a:after {display: block; clear: both; *zoom: 1; content: '';}
#artrangCon4 .artList .imgArea {float: left; overflow: hidden; width: 330px; height: 100%;}
#artrangCon4 .artList .imgArea img {width: 100%; height:100%; -webkit-transition:opacity 0.5s, -webkit-transform 0.5s; transition:opacity 0.5s, transform 0.5s;-webkit-transform:scale(1); transform:scale(1)}
#artrangCon4 .artList .imgArea:hover img {transform:scale(1.15);}
#artrangCon4 .artList .txtArea {position: relative; float: left; box-sizing: border-box; width: calc(100% - 330px); height: 100%;}
#artrangCon4 .artList .txtArea > div {position: absolute; top: 50%; transform: translateY(-50%); left: 0; box-sizing: border-box; width: 100%; padding: 0 0 0 40px;}
#artrangCon4 .artList .txtArea .tit {display: block; overflow: hidden; width: 100%; font-size: 24px; color: #333; text-overflow: ellipsis; white-space: nowrap; word-break: break-all;}
#artrangCon4 .artList .txtArea .con {display: block; overflow: hidden; margin: 10px 0 25px; width: 100%; line-height: 1.7; max-height: 5.1em; color: #666; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
#artrangCon4 .artList .txtArea .day {color:#999;}


#artrangCon5 {position:relative;}
#artrangCon5:before {display: block; position: absolute; right: 0; bottom: 0; width: calc(50% + 225px); height: 100%; background-color: #f9f9f9; content: '';}
#artrangCon5 .noticeArea {position: relative; height: calc(100% - 81px);}
#artrangCon5 .noticeArea .inner {height: 100%}
#artrangCon5 .noticeArea .inner:before {z-index:2; position:absolute; left: 0; top: 0; background-color:#2f043c; width: 570px; height: calc(50% + 100px); content:''; display:block;} 
#artrangCon5 .noticeArea .inner ul {position: absolute; top: 50%; transform: translateY(-50%); z-index:9; padding: 0 0 0 120px;}
#artrangCon5 .noticeArea .inner ul li {width: 810px; height: 200px; box-shadow: 10px 12px 17px 0px #8a8a8a47; background-color: #fff; background-repeat: no-repeat; background-position: right bottom; transition: 0.5s ease-in-out;}
#artrangCon5 .noticeArea .inner ul li:nth-child(1) {margin: 0 0 17px 0; background-image: url(../images/main/notice_bg1.png);}
#artrangCon5 .noticeArea .inner ul li:nth-child(2) {margin: 0 0 0 120px; background-image: url(../images/main/notice_bg2.png);}
#artrangCon5 .noticeArea .inner ul li:hover {background-color: #ecebeb;}
#artrangCon5 .noticeArea .inner ul li a {display: block; box-sizing: border-box; width: 100%; height: 100%; padding: 45px 90px;}
#artrangCon5 .noticeArea .inner ul li .tit {display: block; margin: 0 0 15px 0; font-family: 'Nanumsquare'; font-size: 24px; color: #333;}
#artrangCon5 .noticeArea .inner ul li .con {color: #666;}

.footer_news {position: relative; width: 100%; height: 80px; border-top: 1px solid #ddd; background-color: #fff; text-align: left;}
.footer_news .inner:after {display: block; clear: both; *zoom: 1; content: '';}
.footer_news .slide_tit {float: left; width: 150px; height: 80px; line-height: 80px; font-family: 'Nanumsquare'; font-size: 24px; font-weight: 600; color: #333;}
.footer_news .noticeTxt {float: left; box-sizing: border-box; width: calc(100% - 150px); height: 80px; padding: 0 0 0 50px;}
.footer_news .noticeTxt .slick-slide > div {height: 80px; vertical-align: top;}
.footer_news .noticeTxt .con {position: relative; box-sizing: border-box; width: 100%; height: 80px; line-height: 80px; padding: 0 90px 0 0; vertical-align: top;}
.footer_news .noticeTxt .con:after {display: block; clear: both; *zoom: 1; content: '';}
.footer_news .noticeTxt .con .tit {float: left; display: block; overflow: hidden; width: calc(100% - 160px); height: 100%; color: #333; text-overflow: ellipsis; white-space: nowrap; word-break: break-all;}
.footer_news .noticeTxt .con .date {float: right; width: 140px; height: 100%; color:#999;}
.footer_news .noticeTxt .slick-arrow {right: 0; transform: none; box-sizing: border-box; width: 90px; height: 40px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; text-indent: -9999px; background-repeat: no-repeat; background-position: center center;}
.footer_news .noticeTxt .slick-prev {top: 0; border-bottom: 1px solid #ddd; background-image: url(../images/main/top_arrow.png);}
.footer_news .noticeTxt .slick-next {bottom: 0; background-image: url(../images/main/bottom_arrow.png);}



#fp-nav {position: fixed; top: 50%; left: 30px; z-index: 50;}
#fp-nav ul li {overflow: hidden; margin: 10px 0 0 0; width: 7px; height: 7px; border-radius: 50%;}
#fp-nav ul li:first-child {margin: 0;}
#fp-nav ul li a {display: block; width: 100%; height: 100%; background-color: #bbb;}
#fp-nav ul li a.active {background-color: #7755a8;}
#fp-nav ul li a span {display: none;}




@media screen and (min-width: 1471px) and (max-width: 1600px) {
    #fp-nav {left: 10px;}
    #fp-nav ul li {width: 5px; height: 5px;}
    
    .mainSlide1 {height: 630px;}
    .mainSlide1 .visual_img {height: 570px;}
    .mainSlide1 .visual_img .imgArea {width: 570px;}
    .mainSlide1 .visual_img .txtArea {width: calc(100% - 570px); height: 570px;}
    .mainSlide1 .visual_img .txtArea > div {padding: 0 50px;}
    .mainSlide1 .slick-prev {left: 620px;}
    .mainSlide1 .slick-next {left: 670px;}
    #artrangCon1 .numArea {right: 50px;}  

    #artrangCon2 .mainTit {margin-bottom:30px; padding-top:50px;}
    #artrangCon2 .mainTit a {right: 120px;}
    

    .mainSlide3 .txtArea {left: 90px;}

    #artrangCon4 {overflow: hidden;}
    #artrangCon4:before {left:0; width:20%; height:100%; top:150px;}
    #artrangCon4 .inner3 {width: 100%; padding: 0 30px; right: 0;}
    #artrangCon4 .mainTit h2 {margin-left:20px;}
    #artrangCon4 .inner > div {right: 90px; width: 980px;}

}

@media screen and (min-width: 1201px) and (max-width: 1470px) {
    #fp-nav {left: 10px;}
    #fp-nav ul li {width: 5px; height: 5px;}

    
    #artrangCon1:after {right: auto; left: 310px; width: calc(100% - 310px); height: 500px;}
    #artrangCon1:before {width: 310px;}
    .mainSlide1 {width: calc(100% - 120px); height: 560px;}
    .mainSlide1 .visual_img {height: 500px;}
    .mainSlide1 .visual_img .imgArea {width: 500px;}
    .mainSlide1 .visual_img .txtArea {width: calc(100% - 500px); height: 500px;}
    .mainSlide1 .visual_img .txtArea > div {padding: 0 50px;}
    .mainSlide1 .visual_img .txtArea .tit {font-size: 42px;}
    .mainSlide1 .slick-prev {left: 550px;}
    .mainSlide1 .slick-next {left: 600px;}
    #artrangCon1 .numArea {right: 80px;}

    
    #artrangCon2 .mainSlide2 {width: 100%; padding: 50px 30px 100px;}
    
    
    #artrangCon3:after {height: calc(75% - 60px);}
    #artrangCon3 .inner {max-width: 1170px; padding: 0 150px;}
    .mainSlide3 {box-sizing: border-box; height: 470px;}
    .mainSlide3 .imgArea {width: 470px; padding: 0;}
    .mainSlide3 .imgArea .label {left: -50px; width: 100px; height: 100px;}
    .mainSlide3 .imgArea .label p {line-height: 1;}
    .mainSlide3 .imgArea .img_box {width: 470px; height: 470px;}
    .mainSlide3 .imgArea .img_box .fade_img {right: -30px; width: 390px; height: 390px;}
    .mainSlide3 .imgArea .btn_drag {right: -75px; width: 70px; height: 50px;}
    .mainSlide3 .imgArea .btn_drag p {line-height: 48px;}
    .mainSlide3 .txtArea .moreBtn {margin: 50px 0 0 0;}

    #artrangCon4 {overflow: hidden;}
    #artrangCon4 .inner:before {left: 60px; width: 535px;}
    #artrangCon4 .inner > div {box-sizing: border-box; width: calc(100% - 420px); padding: 0 120px 0 0;}
    #artrangCon4 .artList li {height: 204px;}
    #artrangCon4 .artList .imgArea {width: 270px;}
    #artrangCon4 .artList .txtArea {width: calc(100% - 270px);}

    #artrangCon5:before {width: calc(50% + 125px);}
    #artrangCon5 .noticeArea .inner:before {left: 60px; width: 535px;}


}

/* tablet */
@media screen and (min-width:768px) and (max-width:1200px) {
    .mainTit h2 {font-size: 1.75rem;}

    #fp-nav {left: 15px;}
    #fp-nav ul li {width: 5px; height: 5px;}

    #artrangCon1:after {top: calc(50% + 60px); right: auto; left: 230px; width: calc(100% - 230px); height: 400px;}
    #artrangCon1:before {width: 230px;}
    #artrangCon1 .main_top {height: calc(100% - 60px);}
    .mainSlide1 {width: calc(100% - 60px); height: 460px;}
    .mainSlide1 .visual_img {height: 400px;}
    .mainSlide1 .visual_img .imgArea {width: 400px;}
    .mainSlide1 .visual_img .txtArea {width: calc(100% - 400px); height: 400px;}
    .mainSlide1 .visual_img .txtArea > div {padding: 0 0 0 30px;}
    .mainSlide1 .visual_img .txtArea .tit {font-size: 28px;}
    .mainSlide1 .slick-arrow {bottom: 60px;}
    .mainSlide1 .slick-prev {left: 430px;}
    .mainSlide1 .slick-next {left: 480px;}
    #artrangCon1 .numArea {bottom: 60px; right: 30px;}
    #artrangCon1 .numArea .current_num {font-size: 30px;}

   
    
	#artrangCon2:before {width: calc(50% - 60px);}
    #artrangCon2 .mainSlide2 {width: 100%; padding: 50px 30px 100px;}


    #artrangCon3:before {width: calc(50% - 90px);}
    #artrangCon3:after {left: 0; width: 100%;}
    #artrangCon3 .inner {padding: 0 30px;}
    #artrangCon3 .mainTit {padding: 0 40px 0 0;}
    .mainSlide3 {box-sizing: border-box; height: 370px; padding: 0 0 0 30px;}
    .mainSlide3 .imgArea {width: 405px; padding: 0;}
    .mainSlide3 .imgArea .label {left: -40px; width: 80px; height: 80px;}
    .mainSlide3 .imgArea .label p {padding: 15px 0 0 0; line-height: 1;}
    .mainSlide3 .imgArea .label p span {font-size: 30px;}
    .mainSlide3 .imgArea .img_box {width: 370px; height: 370px;}
    .mainSlide3 .imgArea .img_box .fade_img {right: -35px; width: 290px; height: 290px;}
    .mainSlide3 .imgArea .btn_drag {width: 70px; height: 50px;}
    .mainSlide3 .imgArea .btn_drag p {line-height: 48px;}
    .mainSlide3 .txtArea {box-sizing: border-box; width: calc(100% - 405px); padding: 0 30px 0 0;}
    .mainSlide3 .txtArea .tit {font-size: 20px;}
    .mainSlide3 .txtArea .info li span {width: 100px;}
    .mainSlide3 .txtArea .info li p {width: calc(100% - 100px);}
    .mainSlide3 .txtArea .moreBtn {margin: 30px 0 0 0;}

    #artrangCon4 {overflow: hidden;}
    #artrangCon4:before {left: 0; width: calc(50% - 100px);}
    #artrangCon4 .inner:before {display: none;}
    #artrangCon4 .inner > div {box-sizing: border-box; width: 100%; padding: 0 60px;}
    #artrangCon4 .artList li {height: 212px;}
    #artrangCon4 .artList .imgArea {width: 280px;}
    #artrangCon4 .artList .txtArea {width: calc(100% - 280px);}

    #artrangCon5:before {width: calc(50% + 60px);}
    #artrangCon5 .noticeArea .inner:before {left: 30px; width: calc(50% - 30px);}
    #artrangCon5 .noticeArea .inner ul {left: 0; box-sizing: border-box; max-width: 1050px; width: 100%; padding: 0 60px;}
    #artrangCon5 .noticeArea .inner ul li {width: 90%;}
    #artrangCon5 .noticeArea .inner ul li:nth-child(2) {margin: 0 0 0 10%;}
    #artrangCon5 .noticeArea .inner ul li a {padding: 45px 50px;}

}

/* mobile 가로, tablet */
@media screen and (min-width:481px) and (max-width:767px) {
    
    #fp-nav {display: none;}

    .mainTit h2 {font-size: 1.5rem;}
    .mainTit a {top: -10px; width: 130px; font-size: 0.875rem;}

    #artrangCon1 {background-image: linear-gradient(to bottom, #2f043c 50%, #f9f9f9 50%);}
    #artrangCon1:before {display: none;}
    #artrangCon1:after {display: none;}
    #artrangCon1 .main_top {height: 100%; padding: 50px 15px 0;}
    .mainSlide1 {position: static; top: auto; transform: none; max-width: 640px; height: auto; margin: 0 auto;}
    .mainSlide1 .visual_img {box-sizing: border-box; height: 100%; padding: 100px 30px 0;}
    .mainSlide1 .visual_img .imgArea {position: relative; width: 100%; box-shadow: 5px 5px 10px rgba(0,0,0,0.2);}
    .mainSlide1 .visual_img .txtArea {box-sizing: border-box; width: 100%; padding: 30px 20px; height: auto;}
    .mainSlide1 .visual_img .txtArea > div {position: static; top: auto; transform: none; padding: 0;}
    .mainSlide1 .visual_img .txtArea .tit {font-size: 1.333rem;}
    .mainSlide1 .visual_img .txtArea .con {margin: 10px 0; height: 3em; line-height: 1.5; font-size: 1rem; -webkit-line-clamp: 2;}
    .mainSlide1 .visual_img .txtArea .moreBtn {width: 130px; margin: 20px 0 0 0; font-size: 0.875rem;}
    .mainSlide1 .visual_img .txtArea .moreBtn:hover {width:140px;}
    .mainSlide1 .slick-prev, .mainSlide1 .slick-next {display:none !important;}
    .mainSlide1 .slick-dots {bottom: 10px; left: 0; height: 5px;}
    .mainSlide1 .slick-dots li {overflow: hidden; width: 5px; height: 5px; border-radius: 50%; vertical-align: top;}
    .mainSlide1 .slick-dots li button {padding: 0; width: 100%; height: 100%; background-color: #ddd;}
    .mainSlide1 .slick-dots li button:before {display: none;}
    .mainSlide1 .slick-dots li.slick-active button {background-color: #7750ad;}
    #artrangCon1 .numArea {display: none;}    

    #artrangCon2:before {display: none;}    
    #artrangCon2 .inner {padding: 50px 15px 0;}
    #artrangCon2 .mainTit h2 {color: #333;}
    #artrangCon2 .mainTit a {width: 130px;}  
    #artrangCon2 .mainSlide2 {width: 100%; margin: 0 auto; overflow: hidden; padding: 0 30px 35px;}
    .mainSlide2 .txtArea {width:100%;}
    .mainSlide2 .txtArea .percent .txt1 .mark_red {width: 8px; height: 8px;} 
    .mainSlide2 .txtArea .tit {display: block; overflow: hidden; font-size: 1.167rem; text-overflow: ellipsis; white-space: nowrap; word-break: break-all;}
    .mainSlide2 .txtArea .price ul li span {font-size: 1rem;}
    .mainSlide2 .swiper-slide-active {transform: none; box-shadow: 10px 10px 15px rgba(119,119,119,0.3);}


    /* 진행중인 경매 */
    #artrangCon3 {background-color: #f9f9f9;}
    #artrangCon3:before {display: none; width: 50%; height: 50%;}
    #artrangCon3:after {display: none;}
    #artrangCon3 .inner {padding: 50px 30px 0;}
    #artrangCon3 .mainTit {box-sizing: border-box; max-width: 640px; padding: 0 30px; margin: 0 auto 10px; text-align: left;}
    #artrangCon3 .mainTit h2 {color: #333;}
    .mainSlide3 {box-sizing: border-box; width: 100%; max-width: 640px; margin: 0 auto; height: auto; padding: 0 30px;}
    .mainSlide3 .imgArea {width: 100%;}
    .mainSlide3 .imgArea .label {left: auto; right: 0; top: 0; width: 100px; height: 100px; font-size: 0.875rem;}
    .mainSlide3 .imgArea .label p {padding: 10px 0 0 0; font-size: 0.875rem;}
    .mainSlide3 .imgArea .label p span {font-size: 1.5rem;}
    .mainSlide3 .imgArea .img_box {position: relative; overflow: hidden; width: 100%; height: auto;}
    .mainSlide3 .imgArea .img_box:before {display: block; padding-top: 100%; content: '';}
    .mainSlide3 .imgArea .img_box > img {position: absolute; top: 0; width: 100%; height: 100%;}
    .mainSlide3 .imgArea .img_box .fade_img {display: none;}
    .mainSlide3 .imgArea .btn_drag {display: none;}
    .mainSlide3 .txtArea {position: static; top: auto; left: auto; transform: none; width: 100%; margin: 10px 0 0 0;}
    .mainSlide3 .txtArea .tit {padding: 0 0 10px 0; font-size: 1.063rem;}
    .mainSlide3 .txtArea .info {margin: 5px 0 0 0;}
    .mainSlide3 .txtArea .info li {margin: 3px 0 0 0;}
    .mainSlide3 .txtArea .moreBtn {width: 130px; margin: 15px 0 0 0; font-size: 0.875rem;}

    /* 미술/전시 정보 */
    #artrangCon4:before {display: none;}
    #artrangCon4 .inner:before {display: none;}
    #artrangCon4 .inner > div {right: auto; left: auto; margin: 0 auto; width: calc(100% - 60px);}
    #artrangCon4 .artList li {height: 110px; margin: 20px 0 0 0;}
    #artrangCon4 .artList .imgArea {width: 146px;}
    #artrangCon4 .artList .txtArea {width: calc(100% - 146px);}
    #artrangCon4 .artList .txtArea > div {padding: 0 0 0 15px;}
    #artrangCon4 .artList .txtArea .tit {padding: 0 0 5px 0; font-size: 1rem;}
    #artrangCon4 .artList .txtArea .con {margin: 5px 0 10px; line-height: 1.6; max-height: 3.2em; font-size: 0.875rem; -webkit-line-clamp: 2;}
    #artrangCon4 .artList .txtArea .day {font-size: 0.875rem;}

    #artrangCon5:before {bottom: 0; width: 100%; height: 100%; background-image: linear-gradient(to bottom, #2f043c 50%, #f9f9f9 50%);}
    #artrangCon5 .noticeArea {height: calc(100% - 51px);}
    #artrangCon5 .noticeArea .inner:before {display: none;}
    #artrangCon5 .noticeArea .inner ul {box-sizing: border-box; width: calc(100% - 60px); padding: 0;}
    #artrangCon5 .noticeArea .inner ul li {width: 100%; height: auto; background-size: 50%;}
    #artrangCon5 .noticeArea .inner ul li:nth-child(2) {margin: 0;}
    #artrangCon5 .noticeArea .inner ul li a {padding: 20px 15px 50px;}
    #artrangCon5 .noticeArea .inner ul li .tit {margin: 0 0 10px 0; font-size: 1.143rem;}
    #artrangCon5 .noticeArea .inner ul li .con {width: 200px; font-size: 1rem;}
    
    .footer_news {height: 50px;}
    .footer_news .slide_tit {display: none;}
    .footer_news .noticeTxt {float: none; width: 100%; height: 50px; padding: 0;}
    .footer_news .noticeTxt .slick-slide > div {height: 50px;}
    .footer_news .noticeTxt .con {height: 50px; line-height: 50px; padding: 0 30px 0 0;}
    .footer_news .noticeTxt .con .tit {width: calc(100% - 90px); font-size: 0.875rem;}
    .footer_news .noticeTxt .con .date {width: 90px; font-size: 0.875rem; text-align: right;}
    .footer_news .noticeTxt .slick-arrow {right: -30px; width: 40px; height: 25px;}
}

/* mobile */
@media screen and (min-width:320px) and (max-width:480px) {
    #fp-nav {display: none;}

    .mainTit h2 {font-size: 1.5rem;}
    .mainTit a {width: 80px; height: 24px; line-height: 24px; font-size: 1rem;}
    .mainTit a:hover {width: 90px;}
    
    #artrangCon1 {background-image: linear-gradient(to bottom, #2f043c 50%, #f9f9f9 50%);}
    #artrangCon1:before {display: none;}
    #artrangCon1:after {display: none;}
    #artrangCon1 .main_top {height: 100%;}
    .mainSlide1 {left: 0; right: 0; box-sizing: border-box; height: auto; margin: 0 auto; padding: 0 15px;}
    .mainSlide1 .visual_img {box-sizing: border-box; height: 100%; padding: 30px 0 0;}
    .mainSlide1 .visual_img .imgArea {position: relative; width: 100%; box-shadow: 5px 5px 10px rgba(0,0,0,0.2);}
    .mainSlide1 .visual_img .txtArea {box-sizing: border-box; width: 100%; padding: 15px; height: auto;}
    .mainSlide1 .visual_img .txtArea > div {position: static; top: auto; transform: none; padding: 0;}
    .mainSlide1 .visual_img .txtArea .tit {font-size: 1.333rem;}
    .mainSlide1 .visual_img .txtArea .con {margin: 10px 0; height: 3em; line-height: 1.5; font-size: 1rem; -webkit-line-clamp: 2;}
    .mainSlide1 .slick-prev, .mainSlide1 .slick-next {display:none !important;}
    .mainSlide1 .visual_img .txtArea .moreBtn {width: 100%; margin: 20px 0 0 0; font-size: 12px; width:100px;}
    .mainSlide1 .visual_img .txtArea .moreBtn:hover {width:110px;}
    .mainSlide1 .slick-dots {bottom: -30px; left: 0; height: 5px;}
    .mainSlide1 .slick-dots li {overflow: hidden; width: 5px; height: 5px; border-radius: 50%; vertical-align: top;}
    .mainSlide1 .slick-dots li button {padding: 0; width: 100%; height: 100%; background-color: #ddd;}
    .mainSlide1 .slick-dots li button:before {display: none;}
    .mainSlide1 .slick-dots li.slick-active button {background-color: #7750ad;}
    #artrangCon1 .numArea {display: none;}    
    
    #artrangCon2:before {display: none;}    
    #artrangCon2 .inner {padding: 50px 15px 0;}
    #artrangCon2 .mainTit h2 {color: #333;}
    #artrangCon2 .mainTit a {width:100px;}  
    #artrangCon2 .mainSlide2 {width: 100%; margin: 0 auto; overflow: hidden; padding: 0 30px 35px;}
    .mainSlide2 .txtArea {width:100%; padding: 10px 15px 15px;}
    .mainSlide2 .txtArea .state {height: 18px; line-height: 18px; font-size: 0.8333rem;}
    .mainSlide2 .txtArea .percent {top: 10px; right: 15px;}
    .mainSlide2 .txtArea .percent .txt1 .mark_red {width: 5px; height: 5px;} 
    .mainSlide2 .txtArea .tit {padding: 5px 0; font-size: 1.167rem;}
    .mainSlide2 .txtArea .price ul li span {font-size: 1rem;}
    .mainSlide2 .swiper-slide-active {transform: none; box-shadow: 10px 10px 15px rgba(119,119,119,0.3);}

    
    /* 진행중인 경매 */
    #artrangCon3 {background-color: #f9f9f9;}
    #artrangCon3:before {display: none; width: 50%; height: 50%;}
    #artrangCon3:after {display: none;}
    #artrangCon3 .inner {padding: 50px 15px 0;}
    #artrangCon3 .mainTit {margin: 0 0 15px 0; text-align: left;}
    #artrangCon3 .mainTit h2 {color: #333;}
    .mainSlide3 {box-sizing: border-box; width: 100%; margin: 0 auto; height: auto;}
    .mainSlide3 .imgArea {width: 100%;}
    .mainSlide3 .imgArea .label {left: auto; right: 0; top: 0; width: 60px; height: 60px; font-size: 12px;}
    .mainSlide3 .imgArea .label p {padding: 10px 0 0 0; font-size: 12px;}
    .mainSlide3 .imgArea .label p span {font-size: 24px;}
    .mainSlide3 .imgArea .img_box {position: relative; overflow: hidden; width: 100%; height: auto;}
    .mainSlide3 .imgArea .img_box:before {display: block; padding-top: 100%; content: '';}
    .mainSlide3 .imgArea .img_box > img {position: absolute; top: 0; width: 100%; height: 100%;}
    .mainSlide3 .imgArea .img_box .fade_img {display: none;}
    .mainSlide3 .imgArea .btn_drag {display: none;}
    .mainSlide3 .txtArea {position: static; top: auto; transform: none; width: 100%; margin: 15px 0 0 0;}
    .mainSlide3 .txtArea .tit {padding: 0 0 10px 0; font-size: 14px;}
    .mainSlide3 .txtArea .info {margin: 10px 0 0 0;}
    .mainSlide3 .txtArea .info li {margin: 5px 0 0 0;}
    .mainSlide3 .txtArea .moreBtn {margin: 20px 0 0 0; width: 80px; height: 24px; line-height: 24px; font-size: 12px;}
    .mainSlide3 .txtArea .moreBtn:hover {width: 90px;}

    /* 미술/전시 정보 */
    #artrangCon4:before {display: none;}
    #artrangCon4 .inner:before {display: none;}
    #artrangCon4 .inner > div {top: calc(50% + 25px); right: auto; left: auto; margin: 0 auto; width: calc(100% - 30px);}
    #artrangCon4 .artList li {height: 110px;}
    #artrangCon4 .artList .imgArea {width: 146px;}
    #artrangCon4 .artList .txtArea {width: calc(100% - 146px);}
    #artrangCon4 .artList .txtArea > div {padding: 0 0 0 15px;}
    #artrangCon4 .artList .txtArea .tit {padding: 0 0 5px 0; font-size: 1.167rem;}
    #artrangCon4 .artList .txtArea .con {margin: 5px 0 10px; line-height: 1.6; max-height: 3.2em; -webkit-line-clamp: 2;}
    #artrangCon4 .artList .txtArea .day {font-size: 11px;}

    #artrangCon5:before {bottom: 0; height: 100%; background-image: linear-gradient(to bottom, #2f043c 50%, #f9f9f9 50%);}
    #artrangCon5 .noticeArea {height: calc(100% - 51px);}
    #artrangCon5 .noticeArea .inner:before {display: none;}
    #artrangCon5 .noticeArea .inner ul {box-sizing: border-box; width: calc(100% - 30px); padding: 0;}
    #artrangCon5 .noticeArea .inner ul li {width: 100%; height: auto; background-size: 50%;}
    #artrangCon5 .noticeArea .inner ul li:nth-child(2) {margin: 0;}
    #artrangCon5 .noticeArea .inner ul li a {padding: 20px 15px 50px;}
    #artrangCon5 .noticeArea .inner ul li .tit {margin: 0 0 10px 0; font-size: 1.143rem;}
    #artrangCon5 .noticeArea .inner ul li .con {width: 140px; font-size: 1rem;}
    

    .footer_news {height: 50px;}
    .footer_news .slide_tit {display: none;}
    .footer_news .noticeTxt {float: none; width: 100%; height: 50px; padding: 0;}
    .footer_news .noticeTxt .slick-slide > div {height: 50px;}
    .footer_news .noticeTxt .con {height: 50px; line-height: 50px; padding: 0;}
    .footer_news .noticeTxt .con .tit {width: calc(100% - 120px);}
    .footer_news .noticeTxt .con .date {width: 90px;}
    .footer_news .noticeTxt .slick-arrow {right: -15px; width: 40px; height: 25px;}
}