/* 메인비주얼 */
.carousel-indicators {bottom:8%;}
.carousel-indicators li {width: 45px; height:5px; background:#000; opacity: 0.5; border-top:0; border-bottom:0;}
.carousel-indicators .active {background:#019ef4}
.carousel-control-prev-icon {background-image:url('../img/main_prev.png'); width:22px; height:40px;}
.carousel-control-next-icon {background-image:url('../img/main_next.png'); width:22px; height:40px;}

.slider-block{height:350px; display:inline-block;}
#carousel {height:100%; text-align: center;}
#carousel .carousel-inner{height:100%;}
.carousel-inner{text-align: center;}
#carousel .item{background-repeat:no-repeat;background-size:cover;background-position:center center;width:100%;height:100%;}

/* 통합검색 */
.allSearch {padding: 2.5rem 0; background: #e6eff3;}
.allSearch .content {max-width: 1230px; border:2px solid #019ef4; margin: 0 auto; text-align: center; position: relative; z-index: 2; border-radius: 5px; overflow: hidden;}
.allSearch .content .form-control {height: 50px; border-color: #ffffff; border-radius:0;font-size:20px ; text-align: center;}
.allSearch .content.form-control:focus {box-shadow: none;}
.allSearch .content .btn {min-height: 50px; border-radius:0; background: #019ef4; color: #fff; font-weight:400; padding:0 3rem; font-size:20px}



/* 제작아이템 목록 */
.itemProduct {width:100%; background:url('../img/bg_item.png') center top no-repeat; background-size: cover; padding-bottom:3.75rem;}
.mainItem{height: 100%; width: 100%; max-width:1230px; margin: 0 auto; position: relative;}
.mainItem h1{font-size: 1.65em; text-transform: uppercase; color: #222;  margin: auto; font-weight: 500; padding-top:3.75rem; letter-spacing: -1pt; text-align: center;}/*201008 변경 font-weight: 400,font-size: 24px*/
.mainItem h1::after {content: ''; width:1px; height:50px; background:#000; margin:0 auto; position: absolute; top:0; left:50%;}
.mainItem h1 b {font-weight: 500;}
.mainItem h2 {color:#888; font-size:16px; text-align:center; padding-bottom:20px}
/*.mainItem h3{margin-top: 30px; color: #222; font-size: 20px; line-height: 20px; text-transform: uppercase; margin-bottom: 20px;}*/
.mainItem h3{margin-top: 30px; color: #222; font-size: 20px; line-height: 20px; text-transform: uppercase; margin-bottom: 20px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

.mainItem .item { padding:5%; }
.mainItem .item a {border:1px solid #ddd; display: block; transition:.5s; background-color: #fff; }
.mainItem .item a:hover {border-color:#0095d7;  box-shadow: 0px 15px 35px 0 rgba(0, 149, 215, 0.1);}
.mainItem .item a .item_con {padding:20px}
.mainItem .item a .item_con li {display: inline-flex; color:#888;}
.mainItem .item a .item_con li.date {background:url('../img/icon_date.gif') left 4px no-repeat; padding-left:25px; padding-right:10px; }
.mainItem .item a .item_con li.view {background:url('../img/icon_view.gif') left 4px no-repeat; padding-left:25px;}

.mainItem .slick-slide img{width: 100%;}
.mainItem .slick-slider{position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y;
-webkit-tap-highlight-color: transparent;}
.mainItem .slick-list{ position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.mainItem .slick-list:focus{outline: none; }
.mainItem .slick-slider .slick-track, .mainItem .slick-slider .slick-list{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
.mainItem .slick-track{ position: relative; top: 0; left: 0; display: block;}
.mainItem .slick-track:before, .mainItem .slick-track:after{ display: table; content: '';}
.mainItem .slick-track:after{clear: both; }
.mainItem .slick-loading .slick-track{visibility: hidden;}
.mainItem .slick-slide{display: none; float: left; height: 100%; min-height: 1px;}
.mainItem .slick-slide img{ display: block;}
.mainItem .slick-slide.slick-loading img{ display: none;}
.mainItem .slick-slide.dragging img{pointer-events: none;}
.mainItem .slick-initialized .slick-slide{display: block;}
.mainItem .slick-loading .slick-slide{visibility: hidden;}
.mainItem .slick-vertical .slick-slide{display: block; height: auto; border: 1px solid transparent;}
.mainItem .slick-arrow.slick-hidden{display: none;}    
 
.mainItem .slick-prev, .mainItem .slick-next {width: 60px; height: 60px; opacity: 0.5; font-size: 0; position: absolute; color: #fff;  border: 0; background:rgba(0, 0, 0, 0.8); z-index: 1; top: 45%; cursor: pointer; transition:.3s}
.mainItem .slick-prev:hover, .mainItem .slick-next:hover {background:rgba(0, 0, 0, 0.9); }
 
.mainItem .slick-prev {left:12px;}
.mainItem .slick-next {right:12px;}


/* 퀵메뉴 */
.quickMenu {width:100%; background:url('../img/bg_quick.png') center top no-repeat; background-size: cover; padding:3.75rem 0;}
.quickMenu ul {width:100%; max-width:1230px; }
.quickMenu li {width:23.9%; margin-right:1%; margin-bottom:1%; background:rgba(255, 255, 255, 0.1); transition:all .5s ease-in; border:1px solid #fff; border-radius: 30px 0 0 0; display: inline-flex;  }
.quickMenu li:last-child {margin-right:0;}
.quickMenu li a {width:100%; text-align:center;  display: block; color:#fff; transition:1s; padding:30px 0; font-size:24px}
.quickMenu li:hover{border:transparent; background: rgb(115,197,182); background: linear-gradient(-135deg, rgba(115,197,182,1) 0%, rgba(4,151,214,1) 100%); }

.quickMenu li a span {padding-top:80px; display: block;}
.quickMenu li a span.quick_m01 {background:url('../img/quick_menu_01.png') center top no-repeat;}
.quickMenu li a span.quick_m02 {background:url('../img/quick_menu_02.png') center top no-repeat;}
.quickMenu li a span.quick_m03 {background:url('../img/quick_menu_03.png') center top no-repeat;}
.quickMenu li a span.quick_m04 {background:url('../img/quick_menu_04.png') center top no-repeat;}



/* 공지사항 & 패밀리 사이트 */
.noticeArea {padding-top:50px; background:#f5f5f5}
.noticeArea .nav-tabs {border:0; background:#fff; margin-bottom:20px; height:66px; padding:10px 0;}
/*.noticeArea .nav-tabs::before {content:''; width:2px; height:15px; background:#eeeeee; position:absolute; margin-left:100px; margin-top:15px}*/
.noticeArea .nav-tabs .nav-link {color:#999;  font-size:18px; border:0; letter-spacing: -1pt;}
.noticeArea .nav-tabs .nav-link:hover {border:0;  color:#be1824;}/*kys 200927*/
.noticeArea .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {border:0; color:#5e5a57;  font-weight: 500;}/*kys 200927*/
.noticeArea .nav-tabs p {width:64px; height:64px; line-height: 60px; float:right; right:15px; top:0; position:absolute; background:#be1824; text-align:center;}/*kys 200927*/

.noticeArea .tab-content ul {width:100%; margin-bottom:50px;}
.noticeArea .tab-content ul li a {position: relative;display:block; color: #333; line-height:40px;} 
.noticeArea .tab-content ul li a:hover {color:#019ef4}
.noticeArea .tab-content ul li a .title {width:80%; display: block;text-overflow:ellipsis;overflow: hidden;white-space: nowrap; line-height:40px; font-size:16px; font-weight: 400; padding-left:15px}
.noticeArea .tab-content ul li a .date {position: absolute;right: 0;top: 0; font-size:16px; color:#999;line-height: 40px;}

.noticeArea h4 {color:#0095d7; font-weight:500; font-size:20px; height:60px; line-height: 60px; border-bottom:2px solid #019ef4; margin-bottom:25px;}
.noticeArea .familySite li {width:48%; margin-bottom:2%; float:left; }
.noticeArea .familySite li:first-child,.noticeArea .familySite li:nth-child(3) {margin-right:2%}
.noticeArea .familySite li:last-child,.noticeArea .familySite li:nth-child(2) {width:50%; margin-right:0;}
.noticeArea .familySite li a {width:100%; color:#fff; font-size:18px; padding:20px 25px; display:block; letter-spacing:-1pt; background:url('../img/icon_main_link.png') 95% 25px no-repeat;}
.noticeArea .familySite li.green { background:#87bb1e;}
.noticeArea .familySite li.blue { background:#0095d7;}


/* NEWS */
.newsArea {width:100%; background:url('../img/bg_news.png') center top no-repeat; background-size: cover; padding:3rem 0 8rem 0;}
.newsArea h2 {text-align:center; color:#fff; font-size:30px; font-weight:bold;}

.newsArea .nav-tabs {border:0; background:transparent; margin:20px auto 30px auto; width:310px;}
.newsArea .nav-tabs .nav-link {color:#fff;  font-size:20px; border:0; letter-spacing: -1pt; margin:0 20px;}
.newsArea .nav-tabs .nav-link:hover {border-bottom:4px solid #fff;}
.newsArea .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {background:transparent; border-bottom:4px solid #fff;}

.newsArea .news-slider {position:relative; width: 100%; background-color: transparent;}
.newsArea .news-slider .slick-track { display: flex; align-items: center; flex-wrap: nowrap; height: 100%;}
.newsArea .news-slider .slick-slide {float: none; display: inline-block; vertical-align: middle; padding: 0; margin: 10px; background-color: white; transition: all 0.3s ease; height: auto; transform: scale( 0.9 );}
.newsArea .news-slider .slick-slide.slick-current, .newsArea .news-slider .slick-slide.slick-center {transform: scale( 1.0); padding: 0 0px; min-width:350px;}
.newsArea .news-slider .slick-slide.slick-center:hover {box-shadow: 20.7px 44.4px 40px 0 rgba(0, 48, 108, 0.5);}
.newsArea .news-slider .slick-slide img {width:100%;}
.newsArea .newsBox .news_con {padding:20px;}
.newsArea .newsBox .news_con h3 {font-size:18px; color:#333; padding-bottom:15px}
.newsArea .newsBox .news_con p {font-size:16px; color:#888;}

.newsArea .news-slider .slick-prev, .newsArea .news-slider .slick-next {border:1px solid #fff; z-index: 10; bottom: 0px; background-color: transparent; width: 60px; height: 60px; font-size: 0; position: absolute; color: #fff; z-index: 1; top: 110%; cursor: pointer;      transition: .3s}
.newsArea .news-slider .slick-prev:hover, .newsArea .news-slider .slick-next:hover {background:rgba(255, 255, 255, 0.2)}
.newsArea .news-slider .slick-prev {left: 50%; margin-left:-59px }
.newsArea .news-slider .slick-next {right: 50%; margin-right:-60px}
    
ul.img-list {display: table; padding: 3px 0 0 0; width: 100% }
ul.img-list li {list-style-type: none; display: table-cell; position: relative; overflow: hidden; float: left; width: 25%;}
ul.img-list li a {padding:5%}
ul.img-list li img {width: 100%;}
ul.img-list li span {position: absolute;top: 50%;left: 50%;background: rgba(0,0,0,0.7);width: 0;padding:0;text-align: center;line-height: 0;-webkit-transition: all 0.5s ease;-ms-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
ul.img-list li:hover span {top: 0;left: 0;width: 100%;padding: 50% 0;margin-left:5%}
ul.img-list li h2 {font-size: 14px;text-transform: uppercase;position: absolute;top: 999px;left: 0;padding: 40% 4%;text-align: center;width: 100%;-webkit-transition: all 0.5s ease;-ms-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
ul.img-list li:hover h2 {top: 0;}
ul.img-list li a {color: #fff;text-decoration: none;}


.btn_competition {width:150px; margin:20px auto}
.btn_competition a {display: block; border:1px solid #fff; color:#fff; border-radius: 50px; text-align:center; line-height:50px; height:50px; transition:.5s;} 
.btn_competition a:hover {background:rgba(255, 255, 255, 0.1)}




@media screen and (max-width:991px) {
      
      .allSearch {padding: 1rem 0; background: #e6eff3;}
      .allSearch .content .form-control, .allSearch .content .btn {font-size:16px}
      .allSearch .content .btn {padding:0 1rem;}
      .quickMenu {padding:1.5rem 0}
      .quickMenu li {width:45%;}
      .quickMenu li:first-child,.quickMenu li:nth-child(3)  {margin-right:5%; margin-bottom:4%}
      .quickMenu li a {font-size:16px; padding:15px 0;}      
      .noticeArea {padding-bottom:40px;}

      .mainItem h3 {font-size:16px}
}




@media screen and (max-width: 768px) {
      #header .toputil span {display: none;}

      .carousel-indicators li {width: 20px; height:3px;}
      .carousel-control-prev-icon, .carousel-control-next-icon {background-size:50%;}
      
      .mainItem .item a .item_con {padding:10px}
      .noticeArea .familySite li:last-child,.noticeArea .familySite li:nth-child(2) {width:50%; margin-right:0;}
      .noticeArea .familySite li a {font-size:14px; padding:15px 10px;letter-spacing:0; background:none}
      .newsArea {padding:2.5rem 0}
      .newsArea .news-slider .slick-slide.slick-current, .newsArea .news-slider .slick-slide.slick-center {transform: scale( 1.0); padding: 0 0px; min-width:250px;}

      ul.img-list li {padding:1%; list-style-type: none; display: table-cell; position: relative; overflow: hidden; float: left; width: 50%;}

}


/* 색상 반전 코드 */
html.invert {
      -webkit-filter: invert(); /* WebKit */
      /*filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='negative'><feColorMatrix values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/></filter></svg>#negative");*//* Firefox */
      filter: progid:DXImageTransform.Microsoft.BasicImage(invert=1);/* IE 6-7 */
      -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(invert=1)';/* IE 8 */
}
/*돋보기 css*/
.magnify_popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:100000;}
.magnify_area {position:absolute; top:0; left:0; display:none; z-index:10000;}
#magnify {display:none; background:#fff;}
.magnify_lense {position:absolute; width:180px; height:180px; /*border-radius:100%;*/ box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),  0 0 5px 7px rgba(0, 0, 0, 0.25),  inset 0 0 5px 1px rgba(0, 0, 0, 0.25); background-color:#fff; display:none;}


/* =-=-=-=-=-=-= 본문 바로가기 =-=-=-=-=-=-= */
.skip-menu a{
      z-index:999999999;
      position: absolute;
      background: rgba(0,0,0,0.7);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#90000000,endColorstr=#90000000);	/*IE8에서 반투명한 배경 적용*/
      width: 100%;
      height: 30px;
      text-align: center;
      color: #fff;
      line-height: 30px; /*text 세로 중앙 정렬*/
      top: -30px; /*우선 안보이게 감추기*/
      opacity: 0; /*우선 안보이게 감추기*/
}
/*.skip-menu a:focus {
  top:0;
  opacity:1;
}*/

/* 메인 롤링 배너 높이 맞추기 */
@media screen and (min-width:992px) and (max-width: 1400px)  {
      .mainVisual .ho-img-Sharpness {
            min-height: 368px;
      }
      .popup-zone .ho-img-Sharpness {
            max-height:  368px;
      }
}