@charset "utf-8";


header.mainHead {background-color: transparent;border-bottom:0;padding-top:10px}
header.mainHead.on,header.mainHead.scroll {background-color: #fff;padding-top:0}
header.mainHead h1 a {background-image:url(../images/img_logo_head_w.png)}
header.mainHead.on h1 a,header.mainHead.scroll h1 a {background-image:url(../images/img_logo_head.png)}
@media all and (min-width:769px)  {
    header.mainHead nav .menuList li > a {color:#fff}
    header.mainHead.on nav .menuList li > a,
    header.mainHead.scroll nav .menuList li > a {color:#333}    
    header.mainHead.on h1 img,header.mainHead.on h1 img {filter:none}
    header.mainHead .rightQuickBox a {color: #fff;border:1px solid rgba(255,255,255,.7)}
    header.mainHead.on .rightQuickBox a,header.mainHead.scroll .rightQuickBox a {color:#333;border-color:#999}
    header.mainHead .rightQuickBox img,header.mainHead .rightQuickBox img {filter:none}
    header.mainHead.on .rightQuickBox img,header.mainHead.scroll .rightQuickBox img {filter:invert(1);}
    header.mainHead.on .inHeadBox:after {animation: nav_hover_underline 1.5s ease-out 1}
}

.mainSlideSwiper {position: relative;width:100%}
.mainSlideSwiper .swiper-slide {background:repeat center top;background-size: contain;}
.mainSlideSwiper .swiper-slide span img {width:100%;min-height:500px;max-height:955px}
.mainSlideSwiper .swiper-slide a {position:absolute;z-index: 10;left:0;top: 27%;color:#fff;text-align: center;width:100%;height: 100%;font-size: 20px;display:flex;justify-content: center;font-family:'NanumSquareL';}
.mainSlideSwiper .swiper-slide a:after{content:'';width:100%;height: 100%;position:absolute;left:0;top:-27%}
.mainSlideSwiper .swiper-slide a h2 {font-size:60px;}
.mainSlideSwiper .swiper-slide a p {margin:30px 0;font-size:26px;line-height:40px;position:relative;}
.mainSlideSwiper .swiper-slide.swiper-slide-active span img {animation: img_scale 5s ease-out 1}
.mainSlideSwiper .swiper-slide.swiper-slide-active a p {animation: stxt_ani 2s ease-out 1}
.mainSlideSwiper .swiper-container-horizontal>.swiper-pagination-bullets {bottom:32px}
.mainSlideSwiper .swiper-button-prev {left: 1%;top: 42%;background: url(../images/btn_swiper_left.png) no-repeat 50% 50%;}
.mainSlideSwiper .swiper-button-next {right: 1%;top: 42%;background: url(../images/btn_swiper_right.png) no-repeat 50% 50%;}

.mainSlideSwiper .swiper-button-next, .mainSlideSwiper .swiper-button-prev {color:#fff;width:70px;height:80px;}
.mainSlideSwiper .swiper-button-next:after, .mainSlideSwiper .swiper-button-prev:after {display:none}
.mainSlideSwiper .swiper-button-next:hover, .mainSlideSwiper .swiper-button-prev:hover {color:rgba(255,255,255,1)}
.mainSlideSwiper .swiper-pagination-bullet {background-color:#fff;opacity:.5;width:13px;height:13px;margin:0 6px !important}
.mainSlideSwiper .swiper-pagination-bullet-active {opacity:1;}

.stitMain {font-size:36px;margin-bottom: 28px;color:#000;}

.businessCont {padding: 80px 20px 118px;max-width:1320px;width:100%;margin:0 auto;}
.businessCont ul {display:flex; justify-content: space-between;}
.businessCont ul li {}
.businessCont ul li a {display:block;position: relative;}
.businessCont ul li a i {position:absolute;right:4px;bottom:8px;width:51px;height:51px;z-index: 10;}
.businessCont ul li a i:before,.businessCont ul li a i:after {content: '';position: absolute;}
.businessCont ul li a i:before {height:36px;right:25px;bottom:7px;border-left:1px solid #fff;}
.businessCont ul li a i:after {width:36px;right:7px;top:25px;border-top:1px solid #fff;}
.businessCont ul li a > span {position: relative;display:inline-block;overflow: hidden;box-shadow: 2px 2px 3px rgba(0,0,0,0.4);}
.businessCont ul li a > span:before {content:'';position:absolute;left:0;top:0;width:100%;height:100%;background-color: rgba(0,0,0,0.4); z-index: 1;}
.businessCont ul li a img{ transition: all .4s ease-in-out; }
.businessCont ul li a:hover img { transform: scale(1.1); }
.businessCont ul li a p {position: absolute;left:0;top: 30px;width:100%;z-index: 10;color: #fff;font-size:28px;text-align: center;}
.businessCont ul li a strong {position:absolute;left:0;top:50%;width:100%;opacity:0;transition: all .4s ease-in-out;font-size:20px;font-weight: 100;transform:translateY(-50%);color:#fff;text-align: center;z-index: 1;}
.businessCont ul li a:hover strong {opacity: 1;}

.informationCont {padding: 71px 0 100px;background-color:#f5f5f5;}
.informationCont > div {display:flex;max-width:1320px;margin:0 auto;padding:0 20px;justify-content:space-between;}
.informationCont .noticeSect {width:61%}
.newsSwipeList {text-align: center;}
.newsSwipeList .swiper-slide .news_img {display:block;width:247px;height:184px;overflow:hidden}
.newsSwipeList .swiper-slide .news_img img{width:100%;transition: all .4s ease-in-out;height:100%}
/*.newsSwipeList .swiper-slide a:hover .news_img img {transform: scale(1.01);}*/
.newsSwipeList .swiper-slide a {display:block;}
.newsSwipeList .swiper-slide a .txtBox {text-align: left;padding-top: 11px;}
.newsSwipeList .swiper-slide a .txtBox p {color:#000;font-size:17px;display:-webkit-box;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;height: 44px;line-height: 24px;margin-bottom:12px;}

.newsSwipeList .swiper-slide a .txtBox span {color:#727171;font-size:11px}
.newsSwipeList .swiper-button-next {right:0}
.newsSwipeList .swiper-button-prev {left:0}
.newsSwipeList .swiper-button-next, .newsSwipeList .swiper-button-prev {top:39%;color:#fff;width:50px;height:50px;background-color: rgba(0,0,0,0.5);margin-top:12px}
.newsSwipeList .swiper-button-next:after, .newsSwipeList .swiper-button-prev:after {font-size:17px}
.newsSwipeList .swiper-pagination-bullet {background-color:#666;opacity:1;}
.newsSwipeList .swiper-pagination-bullet-active {background-color: #2196f3;opacity:1;}

.informationCont .publicSect {width:39%;margin-left:110px}
.informationCont .publicSect .iframeBox {position:relative;padding-top: 54%;}
.informationCont .publicSect .iframeBox iframe {position:absolute;left:0;top:0;width:100%;height:100%}
.informationCont .publicSect p {margin-top: 17px;font-size: 20px;color:#000;}

/********** 반응형 ***********/

@media all and (min-width:1915px)  {
    .mainSlideSwiper .swiper-slide span img {object-fit:cover}
}

@media all and (max-width:768px)  { /* 768 이하 */
    
    .stitMain {margin-bottom:20px;font-size:1.8rem}
    .newsSwipeList .swiper-slide .news_img {width:100%;height:auto;min-height:18vh;position:relative}
    .newsSwipeList .swiper-slide .news_img img {position:absolute;left:0;top:0;width:100%;height:100%}
    .mainSlideSwiper .swiper-slide a {top:0;padding-top:35%}
    .mainSlideSwiper .swiper-slide a:after {display: none;}
    .mainSlideSwiper .swiper-button-next,.mainSlideSwiper .swiper-button-prev {background-size: auto 26px;}
    .mainSlideSwiper .swiper-slide a h2 {font-size:2.3rem;letter-spacing: -0.15rem;}
    .mainSlideSwiper .swiper-slide a p {font-size:1.2rem;margin:10px 0; line-height: 1.8rem;letter-spacing: -0.1rem;}
    .mainSlideSwiper .swiper-pagination-bullet {width:8px;height:8px}
    .mainSlideSwiper .swiper-button-next {right: 5%;top: 37%;}
    .mainSlideSwiper .swiper-button-prev {left: 5%;top: 37%;}
    .mainSlideSwiper .swiper-button-next, .mainSlideSwiper .swiper-button-prev {width:20px;height:20px}
    .mainSlideSwiper .swiper-button-next:after, .mainSlideSwiper .swiper-button-prev:after {font-size:12px}
    .informationCont > div {display:block}
    .informationCont > div > div {width:100% !important}
    .businessCont {padding:40px 20px}
    .businessCont ul {flex-wrap:wrap;margin:0 -10px}
    .businessCont ul li {flex-basis: 50%;}
    .businessCont ul li+li+li {margin-top:20px}
    .businessCont ul li a {margin:0 10px;}
    .businessCont ul li a span {width:100%}
    .businessCont ul li a img {width:100%;}
    .businessCont ul li a p {font-size:1.5rem}
    .businessCont ul li a strong {opacity: 1;font-size:1.1rem;letter-spacing: -0.05em;}
    .businessCont ul li a i {display:none;}
    .informationCont {padding:40px 0 80px}
    .informationCont .publicSect {margin-left:0;margin-top:40px}
    .informationCont .publicSect p {font-size: 1.3rem}
    .newsSwipeList .swiper-slide a .txtBox p {font-size: 1.2rem;height: 39px;line-height: 19px;margin-bottom: 7px;}
    .newsSwipeList .swiper-button-next, .newsSwipeList .swiper-button-prev {width:25px;height:25px;}
    .newsSwipeList .swiper-button-next:after, .newsSwipeList .swiper-button-prev:after {font-size:12px}
}

@media all and (max-width:480px)  {
 
}

@keyframes img_scale {
    0% {transform: scale(1.1);} 100% {transform: scale(1)}
}
@keyframes stxt_ani {
    0% {opacity:0;bottom:-50px} 100% {opacity:1;bottom:0}
}
@keyframes nav_hover_underline {
    0% {opacity:0;} 100% {opacity:1;}
}