@charset "UTF-8";
/* 공통 */
.w_fix {width: 1600px !important;margin:0 auto;}
body, html, a, li, ul, p, span, button, table, input, select, textarea, em, input, label,
* {font-family:'Pretendard', sans-serif;font-size: 16px;}
html,body {height: auto;}

::selection {background: #1428A0;color: #fff;}
#wrapper {overflow: hidden;}
@media screen and (max-width: 1600px) {
  .w_fix {width: 100% !important;padding: 0 1.5em;}
}
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 900px) {
}

/* 컨트롤러 : 공통 */
.slider-dots-box, {display: inline-block;}
.slider-dots {margin-right: .5em;}
.slider-dots li {display:none;font-size: .9rem;color: #000;font-weight: 500;}
.slider-dots li.slick-active{display:block;}

/* 공통 : menu */
#header {width: 100%;}
.lnb_wrap {height: 100px;display: flex;align-items: center;position: relative;}
.lnb_wrap .logo a {width: 100%;height: 100%;}
.lnb_wrap .logo img {/*max-width: 170px;*/max-height: 60px;height: auto;}
.menu {margin-left: 8em;display: flex;flex-direction: row;align-items: center;}
.menu:hover li a {opacity: 0.5;}
.menu:hover li:hover a {opacity: 1;}
.menu a {margin: 0 1.4em;color: #fff;font-size: 1.5rem;font-weight: 600;}
.head_right {position: absolute;top: 36px;right: 0;display: flex;align-items: center;}
.lang {display: flex;flex-direction: row;}
.lang li {margin: 0 .5em;}
.lang a {color: #fff;font-weight: 600;opacity: .6;font-size: 1.1rem;}
.lang .on a {opacity: 1;}

.m_menu_bt {color: #fff;cursor: pointer;font-size: 2.5rem;display: none;}
.menu.mo {position: fixed;z-index: 20;overflow: auto;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;width: 100%;height: 100%;z-index: 10;bottom: 0;top: 0;left: 0;display: flex;flex-direction: column;justify-content: center;display: none;margin-left: 0;}
.menu.mo li {margin-bottom: 2.2em;text-align: center;}
.menu.mo a {font-weight: 700;}
.menu.mo.active {display: flex;}
.menu.mo.active li {animation: fadein 2s ease-out;}
.mo_header_bg {display:none;background-color: #000;position: fixed;top: 0;left: 0;right: 0;bottom: 0;  width:100%;height:100%;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;z-index: 9;cursor:pointer;
background: #365991;animation: menu-animation 0.8s ease-out forwards;display: none;}
.close_sb {position:absolute;top:17px;right:15px;cursor:pointer;color: #fff;font-size: 2rem;display: none;z-index: 10;animation: fadein 1s ease-out;}
@keyframes menu-animation {
0% { opacity: 0; transform: scale(0.04) translateY(300%); }
40% { transform: scale(0.04) translateY(0); transition: ease-out; }
40% { transform: scale(0.04) translateY(0); }
60% { opacity: 1; transform: scale(0.02) translateY(0px); }
61% { transform: scale(0.04); }
99.9% { /*height: 0; padding-bottom: 100%;*/ border-radius: 100%; }
100% { transform: scale(2); height: 100%; padding-bottom: 0; border-radius: 0; }
}
/* 공통 : menu 서브 */
#header.sub {background-color: #1D1D1D;}
@media screen and (max-width: 1600px) {
}
@media screen and (max-width: 1200px) {
  .m_menu_bt {display: inline-block;}
  .menu {display: none;}

  .lang a {font-size: .95rem;}
  .head_right {margin-right: 1em;}
}
@media screen and (max-width: 900px) {
}

/* 공통 : footer */
.footer {padding: 2em 0 3em 0;width: 100%;background: #1D1D1D;}
.footer_wrap {display: flex;justify-content: space-between;align-items: center;}
.footer_sitemap {display: flex;flex-direction: row;justify-content:space-between;}
.footer_sitemap a {color: #8b8b8b;}
.footer_sitemap > li > a {color: #fff;font-weight: 500;font-size: 1.2em;margin-bottom: .5em;display: block;}
.footer_sitemap .b_sub li {margin-bottom: .5em;}
.footer_sitemap .b_sub li a:hover {color: #fff;}
.footer .addr {color: #bdbdbd;}
.footer_right {width: 50%;}
.footer_logo img {max-height: 50px;}
@media screen and (max-width: 1600px) {
}
@media screen and (max-width: 1200px) {
  .footer_right {display: none;}
  .pordoucts_head {display: block !important;}
}
@media screen and (max-width: 900px) {
  .footer_wrap {justify-content: center;text-align: center;}
  .footer_logo {display: none;}
}


@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadein2 {
    from {
        opacity: 0;
    }
    to {
        opacity: .6;
    }
}

/* main */
.main {background: url('../../images/template4/main/main_bg.png') no-repeat 0 0 / cover;}
.main_tit {max-width: 90%;color: #fff;font-size: 2.8rem;font-weight: 700;word-break: keep-all;}
@media screen and (max-width: 1600px) {
}
@media screen and (max-width: 1200px) {
  .main_tit {font-size: 2rem;}
}
@media screen and (max-width: 900px) {
}
/* products_list */
.products_list .slick-list {width: 1800px;margin: 0 auto;}
.products_list .slick-slide {width: 100%;height: 380px;margin-right: 2.5em;}
.products_list .slick-slide li {position: relative;width: 100%;height: 100%;}
.products_list .slick-slide li:hover::before {animation: fadein2 .5s;content: '';width: calc(100% - 10px);height: calc(100% - 10px);position: absolute;top: 0;left: 0;border: 5px solid #fff;z-index: 2;background: #000;opacity: .6;}
.products_list .slick-slide li:hover .txt {animation: fadein .5s;width: auto;max-width: 90%;bottom: auto;top: 50%;left: 50%;transform: translate(-50%, -50%);text-overflow: unset;white-space: normal;word-break: break-all;text-align: center;}
.products_list .slick-slide li a {display: block;width: 100%;height: 100%;}
.products_list .slick-slide .txt {padding: 0 1em;position: absolute;z-index: 2;bottom: 1em;left: 0;color: #fff;font-weight: 500;font-size: 1.4rem;display: block;width: 100%;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.products_list .slick-slide > div,
.products_list .slick-slide > div > li,
.products_list .slick-slide > div > li > a,
.products_list .slick-slide > div > li > a img {height: 100%;width: 100%;}
.products_list .slick-slide > div > li > a::after {content: '';display: block;width: 100%;height: 70px;position: absolute;bottom: 0;left: 0;background: linear-gradient( to bottom, #ffffff00, #000 );z-index: 1;}
.products_list .slick-slide li.none_img {background: #dfe5ef;}
.products_list .slick-slide li.none_img a {display: flex;flex-direction: column;align-items: center;justify-content: center;}
.products_list .slick-slide li.none_img .material-icons {color: #b3bccb;font-size: 3rem;}
.products_list .slick-slide li.none_img > a::after {display: none;}
.products_list .slick-slide li.none_img:hover::before {display: none;}
.products_list .slick-slide li.none_img .txt {position: static;color: #a7adb7;font-size: 1.1rem;text-align: center;}
.products_list .slick-slide li.none_img:hover .txt {transform: none;animation: none;}
.pordoucts_head {display: flex;align-items: center;justify-content: space-between;}
.products_control {margin-top: 1em;display: inline-block;}
.products_control > button:last-child {margin-left: 1em;}
.products_control .bt-next img,
.products_control .bt-prev img {width: 45px;opacity: .5;}
.products_control .bt-prev img {transform: scaleX(-1);}
.products_control .bt-next:hover img,
.products_control .bt-prev:hover img {opacity: 1;}
@media screen and (max-width: 1600px) {
  .products_list .slick-list {width: auto;}
}
@media screen and (max-width: 1200px) {
  .products_control  {display: block;}
}
@media screen and (max-width: 900px) {
  .slick-initialized .slick-slide {margin: 0;}
}

/* notice_wrap */
.notice_wrap {height: 76px;width: 100%;display: flex;justify-content: space-between;}
.notice_wrap .notice {padding: 0 1.5em;width: calc(100% - 400px);height: 100%;background: #0c0c0c;display: flex;align-items:center;position: relative;}
.notice_wrap .tit {color: #fff;font-weight: 600;font-size: 1.4rem;position: relative;}
.notice_wrap .notice .tit::after {content:'';width: 1px;height: 31px;background: #464646;position: absolute;top: 0;right: 0;}
.notice_wrap .notice .notice_control {position: absolute;top: 13px;right: 1.5em;display: flex;flex-direction: column;}
.notice_wrap .notice .notice_control i {color: #fff;opacity: .5;}
.notice_wrap .notice .notice_control button:hover i {opacity: 1;}
.notice_wrap .notice li {width: calc(100% - 100px) !important;height: 100%;}
.notice_wrap .notice li a {width: 100%;height: 100%;position: relative;display: block;}
.notice_wrap .notice li .txt {width: 85%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.notice_wrap .notice li .txt em {color: #fff;font-size: 1.1rem;}
.notice_wrap .notice li a:hover em {text-decoration: underline;}
.notice_wrap .notice li .txt i {margin-right: .4em;width: 19px;height: 19px;display: inline-block;vertical-align: text-bottom;}
.notice_wrap .notice li .txt i img {width: 100%;height: 100%;}
.notice_wrap .notice li .date {color: #8B8B8B;position: absolute;top: 0px;right: 0;}
.notice_wrap .slick-vertical .slick-slide {overflow: hidden;height: auto;width: 100% !important}
.notice_wrap .slick-slider {width: 100%;}

.notice_wrap .quick {height: 100%;display: flex;flex-direction: row;}
.notice_wrap .quick a {display: flex;height: 100%;width: 190px;color: #fff;align-items: center;justify-content: center;font-size: 1.2rem;}
.notice_wrap .quick a:first-child {background: #34496A;}
.notice_wrap .quick a:first-child:hover {background: #3b619d;}
.notice_wrap .quick a:last-child {background: #263247;}
.notice_wrap .quick a:last-child:hover {background: #3b619d}
.notice_wrap .quick a i {margin-right: .3em;}
@media screen and (max-width: 1600px) {
}
@media screen and (max-width: 1200px) {
  .notice_wrap {height: auto;flex-direction: column;}
  .notice_wrap > div {height: 76px !important;width: 100% !important;}
  .notice_wrap .quick a {width: 50%;}
  .notice_wrap .notice li .date {position: static;}
}
@media screen and (max-width: 900px) {
  .notice_wrap .notice li a {display: block;}
  .notice_wrap .tit {display: none;}
  .notice_wrap .notice li .txt {width: 100%;display: block;}
}

/* 서브페이지 : 공통 */
.container {min-height: 500px;padding: 2em 0;margin-bottom: 4em;}

/* 서브페이지 : 네비로케이션 */
.sub_nav {padding: 1em 0;border-bottom: 1px solid #ededed;}
.sub_nav > div {display: flex;align-items: center;justify-content: space-between;}
.sub_nav .title {color: #000;font-size: 2rem;font-weight: 800;}
.sub_nav .sub_location {display: flex;flex-direction: row;align-items: center;}
.sub_nav .sub_location li {color: #999;position: relative;padding-right: 2em;}
.sub_nav .sub_location li:last-child {color: #000;font-weight: 600;padding: 0;}
.sub_nav .sub_location li:last-child::before {display: none;}
.sub_nav .sub_location li::before {content: '';position: absolute;top: .2em;right: .5em;width: 15px;height: 20px;background: url('../../images/template4/content/arr_right.svg') no-repeat 50% 50% / cover;}
.sub_nav .sub_location .home span {font-size: 1.4rem;}