@charset "utf-8";


/* =================================
*   메인화면 반응형
*   2021-01-15 작성
================================== */

/*
  ##Device = Low Resolution Tablets, Mobiles
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {

}

/*@media (max-width: 1023px){
  .main-visual {height: 1024px; }
}*/


/*
  ##Device = Laptops, Desktops common
  ##Screen = B/w 1024px to
*/
@media (min-width: 1024px) {

/* =======================================================
  비쥬얼 배너
========================================================*/
/*.main-visual {height: 370px; }


.mainvisual-wrapper {position: relative; min-width: 1200px; width: 100%; height: 370px; margin: 0 auto; }

.mainvisual-item {height: 370px; overflow: hidden;  }*/


/*.mainvisual-util {display: block; position: absolute; left: 50%; bottom: 20px; width: 1200px; margin-left: -550px; }
.mainvisual-util:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.mainvisual-util > div {float: right; width: 120px; height: 30px; border: 1px solid #eee;}
.mainvisual-util > div:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.mainvisual-util button {width: 30px; height: 30px; background-color: rgba(255, 255, 255, 0.4);  background-repeat: no-repeat; background-position: center; background-size: 8px 17px; }
.mainvisual-util button:hover {background-color: rgba(255, 255, 255, 0.8); }

.mainvisual-util .mainvisual-prev {float: left; background-image: url("/AppData/images/site/button/slick_left.png"); border-right: 1px solid #eee; }
.mainvisual-util .mainvisual-next {float: right; background-image: url("/AppData/images/site/button/slick_right.png"); border-left: 1px solid #eee; }

.mainvisual-util .mainvisual-paging {float: left; width: 60px; text-align: center; background-color: rgba(255, 255, 255, 0.6); }
.mainvisual-util .mainvisual-count li {display: none; font-size: 14px; font-weight: 300; color: #000; text-align: center; line-height: 30px; white-space: normal; }
.mainvisual-util .mainvisual-count .slick-active {display: inline-block; }
.mainvisual-util .mainvisual-count span { font-size: 14px; font-weight: 500; line-height: 30px; }*/




/* =======================================================
  필드 아이템
========================================================*/
.main-field-section {margin-top: 80px; padding: 0; }


/*.main-field-contents .title-area .btn-goto {margin-top: 10px; }*/

.main-field-contents .item-container {margin-bottom: 60px; }


/* =======================================================
  메인 공지사항 (사용안함)
========================================================*/
.main-notice {margin-bottom: 80px; padding: 40px 0;}

.main-notice .title-area {position: relative; margin-bottom: }
.main-notice .title-area .title {float: none; text-align: center; }
.main-notice .title-area .btn-goto {position: absolute; bottom: 0; right: 0; float: none; margin-left: 0; margin-top: 0; }


.main-notice-container:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.main-notice .nodata {height: 245px; padding-top: 110px; }

.main-notice .notice-item {float: left; width: 260px; height: 215px; padding: 30px 15px 30px; background-image: none; cursor: pointer;}
.main-notice .notice-item + .notice-item {margin: 0 0 0 20px; }

.main-notice .notice-item .date {margin-bottom: 10px; font-size: 14px; }
.main-notice .notice-item .title {margin-bottom: 30px; font-size: 16px; }
.main-notice .notice-item .text {display: block; height: 54px; font-size: 13px; line-height: 18px;  overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

.main-notice .notice-item:hover {box-shadow: 2px 2px 6px 3px rgba(5, 5, 5, 0.2); background-image: url("/AppData/images/site/pc/button/notice_hover.png"); background-repeat: no-repeat; background-position: right bottom; }





/* =======================================================
  메인 이벤트
========================================================*/

.main-event .title-area .btn-goto {position: absolute; bottom: 0; right: 10px; float: none; margin-left: 0; margin-top: 0; }

.main-event-list:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.main-event-list .nodata {float: none; width: 100%; max-width: 100%; cursor: default; }
.main-event-list .nodata p {padding: 50px 0; text-align: center; color: #666; font-size: 14px; }

.main-event-list .event-img img {width: 100%; height: 100%; display: block; }

.main-event-list .event-info {margin-top: 10px; padding: 0 5px; }

.main-event-list .goods-list > li:hover .title {text-decoration: underline; }

}


/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

.fm--main .container-inner {width: 100%; }



/* =======================================================
  메인 이벤트
========================================================*/
.main-event .title-area .btn-goto {position: absolute; bottom: 0; right: 10px; float: none; margin-left: 0; margin-top: 0; }


.main-event-list:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.main-event-list .nodata {float: none; width: 100%; cursor: default; }
.main-event-list .nodata p {padding: 60px 0; text-align: center; color: #666; font-size: 14px; }


.main-event-list .event-info {margin-top: 10px; padding: 0 5px; }
}



/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

/* =======================================================
  메인 이벤트
========================================================*/
.main-event .title-area .btn-goto {position: absolute; bottom: 0; right: 0; float: none; margin-left: 0; margin-top: 0; }


.main-event-list:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.main-event-list .nodata {float: none; width: 100%; cursor: default; }
.main-event-list .nodata p {padding: 60px 0; text-align: center; color: #666; font-size: 14px; }

.main-event-list .event-img img {width: 100%; height: 100%; display: block; }

.main-event-list .event-info {margin-top: 10px; padding: 0 5px; }


}



/*
  ##Device = Laptops, Desktops common (not IE)
  ##Screen = B/w 1024px to
*/
@media (min-width: 1024px) and (hover:hover) {

}


/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1024px to 1099px
*/

@media (min-width: 1024px) and (max-width: 1099px) and (hover:hover) {


.fm--main .container-inner {min-width: 1000px; max-width: 1099px; width: 100%; }


/* =======================================================
  비쥬얼 배너
========================================================*/
.mainvisual-wrapper {position: relative; min-width: 100%; max-width: 100%; width: 100%; margin: 0 auto; }
/*.mainvisual-util {display: block; position: absolute; left: 50%; bottom: 20px; width: 100%; transform: translateX(-50%); margin-left: 0;}*/

.main-field-section {margin-top: 80px; padding: 0 15px; box-sizing: border-box; }

.main-event-list {padding: 0 15px; }
.main-event-list:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.main-event-list .nodata {float: none; width: 100%; cursor: default; }
.main-event-list .nodata p {padding: 60px 0; text-align: center; color: #666; font-size: 14px; }

.main-event-list .event-img img {width: 100%; height: 100%; display: block; }

.main-event-list .event-info {margin-top: 10px; padding: 0 5px; }

}

/*
  ##Device = Desktops
  ##Screen = B/w 1200px to
*/
@media (min-width: 1200px) {

/* =======================================================
  비쥬얼 배너
========================================================*/
.mainvisual-wrapper {position: relative; min-width: 1200px; /*max-width: 1920px;*/ width: 100%; height: 100vh; margin: 0 auto; }
/*.mainvisual-util {display: block; position: absolute; left: 50%; bottom: 20px; width: 1200px; margin-left: -550px; }*/


}