@charset "utf-8";

/* main_visual */
.main_visual{overflow:hidden;position: relative;width:100%;/* margin-top:-90px; */padding:0;background-color: #eee;}
.main_visual::after{clear: both;display: block;content: "";}
.main_visual ul li img{width:100%; height:auto;}
.main_visual .txt{position:absolute;left:50%;transform:translateX(-50%);top: 35%;color:#fff;text-align: center;z-index: 99;word-break: keep-all;width: 100%;}
.main_visual .txt img{width: 26%;text-align: center;}
.main_visual .txt .sb{font-size:4em;font-weight: 600;letter-spacing: -1px;word-break: keep-all;line-height: 1.2em;margin-bottom:10px;}
.main_visual .txt .ss{font-size:1.3em;font-weight: 100;letter-spacing: 2px;opacity:0.6;;word-break: keep-all;}
.main_visual .mouse{position:absolute; left:50%; transform:translateX(-50%);bottom:0;display:block; margin:35px auto;width: 34px;height: 50px;border:2px solid #fff;border-radius: 30px;text-align:center;z-index: 99;}
.main_visual .mouse p{position:absolute; left:50%; transform:translateX(-50%); top:-25px;text-transform: uppercase;font-size:13px;color:#fff;}
.main_visual .mouse span{display:block;width: 3px;height: 9px;  margin: 6px auto;  background: #f7428f;  border:1px solid transparent;  border-radius: 5px;  animation:scroll 1s infinite both;  }
@keyframes scroll{
    0%{
        opacity:1;
        transform:translateY(3px);
    }
    100%{
        opacity:0;
        transform:translateY(20px);
    }
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {left: 3%;background: url('/images/main/btn_prev.png') no-repeat;  }
.bx-wrapper .bx-next {right: 3%; background: url('/images/main/btn_next.png') no-repeat; }
.bx-wrapper .bx-controls-direction a{position: absolute;top: 42%;transform:translateY(-50%);outline: 0;width: 32px;height: 60px;text-indent: -9999px;z-index: 100;}

/* 공통 */
.container{width:1260px;margin:0 auto;position: relative;min-height: 60vh;}
.container:after{display: block; clear: both;content: "";}
.sec_tit{font-family: 'Montserrat';color: #000;font-size:45px;font-weight:700;text-transform: uppercase;letter-spacing: 2px;}
.sec_tit span{font-family: 'Noto Sans KR';color: #333;font-size: 17px;font-weight:400;letter-spacing:-.8px;margin-left: -4px;}
/* btn_more */
.btn_more{font-size:13px;color:#1e1e1e;width:170px;text-align:center;text-transform: uppercase;font-weight:500;position: relative;overflow: hidden;  cursor: pointer; }
.btn_more a {position: relative;transition: all .35s ease-Out;display: block;padding:13px 0;border: 1px solid #111;}
.btn_more:hover .sli {left: 0;}
.more_w{background:#fff;border:1px solid #1e1e1e;}
.more_w a{color:#1e1e1e;}
.more_w .sli{width: 100%; height: 100%;left: -200px; background: #1e1e1e;position: absolute;transition: all .35s ease-Out; bottom: 0; }
.more_w:hover a{color:#fff;}
.more_b{background:#1e1e1e;}
.more_b a{color:#fff;}
.more_b .sli{width: 100%;height: 100%;left: -200px;background: #fff;position: absolute;transition: all .35s ease-Out;bottom: 0;/* border:0; */}
.more_b:hover a{color:#1e1e1e;}
.btn_more_m{display: none;}

/* section01 */
.section01{overflow:hidden;padding: 6% 0 6%;background: #f8f8f8;}
.section01 .sec_tit{position:relative;}
.section01 .btn_more{position: absolute;top: 10px;right: 0;}
.notice ul{margin-top:35px;}
.notice ul li{display: inline-block;margin-left: 2%;width: calc((100% / 3)  - 1.7%);}
.notice ul li:nth-child(1){margin-left:0}
.notice ul li a{display:block;}
.notice ul li:first-child{margin-left:0;}
.notice ul li div.info{position:relative;background:#fff;padding: 15% 10% 10% 10%;border-bottom: 1px solid #ccc;box-sizing: content-box;}
.notice ul li div.info span{font-size: 15px;font-weight: 500;color: #ea0b55;}
.notice ul li div.info .tit{margin-top: 18px;font-size: 20px;font-weight: 500;letter-spacing: -.5px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap: break-word;line-height: 1.3em;height: 2.6em;color: #000;}
.notice ul li div.info .cnt {margin-top:15px;font-size: 16px;color: #555;letter-spacing: -.5px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-wrap: break-word;line-height: 1.5em;height: 4.5em;}
.notice ul li div.info .date{font-family: 'Montserrat';font-size:14px;color:#999;font-weight:500;letter-spacing: .5px;margin-top: 12%;}
.notice ul li div.info:hover {box-shadow: 5px 5px 10px 1px rgba(0,0,0,.05);transition: all 0.4s ease; border-bottom:0;}
.notice ul li div.info:hover span{color: #ea0b55;}

/* section02 */
.section02{overflow:hidden;background-image:url('/images/main/sec2_bg_img.jpg');background-repeat: no-repeat;background-attachment: fixed;background-size: cover;}
.update .gradient{position:relative; width: 53%;text-align: left; float:right; background-size: 400% 400%; animation: gradient 8s ease infinite;  }
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.update .gradient .update_box{background:#fff;padding: 15% 0 15% 7%;}
.update .gradient .update_box .sec_tit{}
.update .gradient .update_box ul{margin-top:40px;height: 27em;overflow: hidden;}
.update .gradient .update_box ul li{border-bottom:1px solid #eeeeee;}
.update .gradient .update_box ul li a{padding: 4% 0 4% 4%;display:block;}
.update .gradient .update_box ul li a:hover{background:#f6f6f6;transition: all 0.2s ease}
.update .gradient .update_box ul li a .date{font-family: 'Montserrat';color: #ea0b55;font-size: 14px;font-weight: 500;letter-spacing: 1px;margin-bottom: 10px;}
.update .gradient .update_box ul li a .tit{color: #000;font-size: 19px;letter-spacing: -0.5px;font-weight: 500;}
.update .btn_more{position:absolute;left:50%;transform:translateX(-50%);bottom: 4%;/}

/* section03 */
.section03{position:relative;overflow:hidden;padding: 8% 0 3%;background: #f3f1f1;}
.section03:before{position: absolute;content:"";top:0;left: 8%;background: #fff;width: 92%;height: 61px;z-index:0;}
.section03 .sec_tit{position:relative;}

.section03 .btn_more{position: absolute;top: 10px;right: 0;}
.news ul{margin-top:40px;z-index: 999;}
.news ul li{display:inline-block;margin-left: 35px;width: calc((100% / 3)  - 26px);overflow:hidden;}
.news ul li a{display:block;}
.news ul li:first-child{margin-left:0;vertical-align: top;}
.news ul li div.img_thumbnail{width:100%;position: relative;padding-top: 60%;overflow:hidden;background: #000;}
.news ul li div.img_thumbnail .img{position:relative;position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%);}
.news ul li div.img_thumbnail .img img{position: absolute; top: 0; left: 0; width:100%; max-width: 100%; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);transition:0.8s;}
.news ul li a:hover div.img_thumbnail .img img{transform: translate(-50%,-50%) scale(1.1)}
.news ul li div.info{padding: 21px 0;color: #000;}
.news ul li div.info .tit{font-size: 20px;font-weight:500;letter-spacing: -.5px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp: 1;-webkit-box-orient:vertical;word-wrap: break-word;line-height: 1.3em;height: 1.3em;}
.news ul li div.info .cnt {margin-top:15px;font-size:16px;font-weight:300;letter-spacing: -.5px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;word-wrap: break-word;line-height: 1.5em;height: 3em;}
.news ul li a:hover div.info .tit{text-decoration: underline;}

/* section04 */
.section04{position:relative;overflow:hidden;background:url('/images/main/sec4_bg.jpg') no-repeat center -90px;}
.section04 .innerbox{text-align: center;padding: 6% 0;}
.section04 .innerbox p{color:#fff;font-size: 35px;font-weight:500;letter-spacing: -1px;}
.section04 .innerbox p.pro{font-family: 'Montserrat';font-size:24px;font-weight:500;opacity: .5;margin-bottom: 36px;}
.section04 .innerbox a{color:#fff;background: #000;font-size: 16px;text-transform: uppercase;padding: 10px 32px;}
.section04 .innerbox a:hover{color:#ea0b55; background:#fff;transition: all .2s ease;}


@media (max-width:1554px){
    .container{padding:0 2%;width:100%;box-sizing: border-box;}
    .main_visual{/* height: 78vh; */}
    .main_visual .txt img{width: 39%;}
    .section01{padding: 5% 0 5%;width:100%;}
    .section01 .btn_more{right:2%;}
    .section02{padding: 2% 0;width:100%;}
    .section03{padding:2% 0;}
    .section03:before{content:none;}

}

/* tablet (768px) ~ 1023px */
@media (max-width:1024px){
    .container:after{content:"";clear: both;display: block;}
    .sec_tit{font-size:30px;}
    .main_visual .txt{top:38%;}
    .main_visual .txt .sb{font-size: 46px;}
    .main_visual .txt .ss{font-size: 18px;}
    .main_visual .mouse{bottom:-20px;}
    .bx-wrapper .bx-controls-direction a{top: 43%;}
    .section01 .sec_tit:after , .section03 .sec_tit:after{content:none;}
    .notice ul li div.info .tit{font-size:17px;}
    .notice ul li div.info .cnt{font-size:15px;line-height: 1.4em;height: 4.2em;}
    .update .gradient{height:100%;padding: 7px 0px;}
    .update .gradient:after{content:none;clear: both;display: block;}
    .update .gradient .update_box{padding: 0;height:auto;position: static;top:auto;left:auto;transform: none;margin:auto;box-sizing: border-box;background: #fff;padding: 20px;}
    .update .gradient .update_box ul li a .tit{font-size:17px;}
    .update .btn_more_m{top: 17px;right:20px;}
    .update .btn_more{left:auto;top: 26px;bottom:auto;right: 2%;transform: none;}
    .section04{padding:50px 0;height:auto;min-height:200px;}
    .section04 .innerbox{text-align: center;word-break: keep-all;}
    .section04 .innerbox p{line-height: 40px;}
    .update .gradient{width: 100%;opacity: .95;padding: 0;}
    .update .gradient:after{left:2%;top:4%; display: block; clear: both;}
    .update .gradient .update_box{padding: 4%;box-shadow: 5px 5px 10px 1px rgba(0,0,0,.05);}
    .update .gradient .update_box ul li a{padding:3%;}
    .update .gradient:after{width:45%;background-size:cover;}
    .update .gradient .update_box ul{ height: 21em; margin-top: 1%; }
    .section03{padding: 5% 0 3%;width:100%;}
    .section03 .btn_more{right:2%;top: -6px;}
    .section03:before{content:none;}

}

/* mobile ~ 767px */
@media (max-width: 767px){
    .main_visual{/* height: 52vh; */}
    .main_visual img{width: 200%;height:100%;}
    .main_visual .txt .sb{font-size: 2.5em;line-height: 1.3em;margin-bottom:5px;}
    .main_visual .txt .ss{font-size: 15px;font-weight: 100;}
    .main_visual .mouse{display: none;}
    .main_visual .txt img{width: 44%;}
    .bx-wrapper .bx-controls-direction a{display: none;}
    .section02{background-position: 15% center;}
    .sec_tit{font-size: 28px;font-weight:700;letter-spacing: 4px;}
    .sec_tit span{display: block;margin-left:0;margin-top: -3px;font-size: 16px;}
    .btn_more{display: none;}
    .btn_more_m{position:absolute;display:block;top:0;right:2%;width:32px;height:32px;background:#fff;border:1px solid #aaa;padding:2px;text-indent: -9999px;}
    .btn_more_m:after{position: absolute;content:"";top:50%;left:50%;transform:translate(-50%,-50%);background:url('/images/main/more.png') no-repeat center;width:30px;height:30px;}
    .notice ul{margin-top:20px;}
    .notice ul li{width:100%;margin:0;}
    .notice ul li div.info{padding: 20px 15px;border: 1px solid #ddd;margin-top: -1px;}
    .notice ul li:first-child div.info{margin-top:0;}
    .notice ul li div.info .tit{font-size: 17px;-webkit-line-clamp: 1;height:1.3em;}
    .notice ul li div.info .cnt{line-height:1.3em; height: 2.6em; color:#333; -webkit-line-clamp: 2;font-size: 14px;margin-top:10px;font-weight: 400;}
    .notice ul li div.info .date{font-size:13px;margin-top: 6px;}
    .update .gradient .update_box ul li a{padding-left:0}
    .update .gradient .update_box ul{margin-top:20px;height: 18em;}
    .update .gradient .update_box ul li a{padding: 15px 10px 15px;}
    .update .gradient .update_box ul li a .tit{display: inline-block; padding-left:20px; font-size:16px;}
    .update .gradient .update_box ul li a .date{display: inline-block;}
    .update .gradient .update_box ul li{border-bottom:1px solid #e6e6e6;}
    .news ul{margin-top:20px;}
    .news ul li:first-child{display: block}
    .news ul li{width:100%;margin:0;display: none;}
    .news ul li div.info{padding:10px 0 20px;}
    .news ul li div.info .tit{font-size: 17px;-webkit-line-clamp: 1;height:1.3em;}
    .news ul li div.info .cnt{line-height: 1.4em;height: 2.8em;-webkit-line-clamp: 2;font-size: 15px;margin-top:10px;}
    .section04{padding:12px 0;}
    .section04 .innerbox p{line-height: 31px;}
    .section04 .innerbox p{font-size: 23px;}
    .section04 .innerbox p.pro{font-size:22px;padding-top:5px;}
    .section03:before{background: #fff;}

}

@media (max-width:540px) {
    .main_visual{height: auto; }
    .main_visual .txt .sb{font-size: 1.5em;line-height: 1.3em;}
}
