@charset "utf-8";
/* *******************************************************
 * filename : layout.css
 * description : 전체 레이아웃 CSS
 * date : 2020-06-08
******************************************************** */
/* ****************** LAYOUT ********************** */
.table-cell, .column{display:table-cell; width:100%; height:100%;vertical-align: middle;}
#wrap { overflow: hidden; width: 100%; min-width: 320px; position: relative; }
.area{ max-width:1200px; margin:0px auto; position:relative; box-sizing:border-box;}
.area2{ max-width:1350px; margin:0px auto; position:relative; box-sizing:border-box;}
.area-box{ max-width:1360px; margin:0px auto; position:relative; box-sizing:border-box;}
.justify-content-between {-ms-flex-pack: justify !important;justify-content: space-between !important;}
.font-lato{font-family: 'Lato', sans-serif;}
.fp-section {position: relative;-webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;}
.fp-section.fp-table, .fp-slide.fp-table {display: table;table-layout: fixed;width: 100%;}
.table{display:table; width:100%; height:100%;table-layout: fixed;}
.bbs-list-head, .table-list-head {display: table-header-group;}
.bbs-list-row{display:table-row; width:100%;}
.table-cell, .column{display:table-cell; width:100%; height:100%;vertical-align: middle;}
.m_only{display:none;}
.pc_only{ display:block;}
.down-btn {height:35px; line-height: 32px; vertical-align:middle;}
.cm-button-style04, .cm-button-style04 strong, .cm-button-style04 i {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;-ms-transition: all 0.3s;transition: all 0.3s;letter-spacing:0.5px; font-weight:normal;}
.cm-button-style04:before {display: block;position: absolute; left: -130%;bottom: 0;content: "";width: 120%; height: 150%; background: #fff; transform: skew(-20deg);-webkit-transition: all 0.5s; -moz-transition: all 0.5s;-o-transition: all 0.5s; -ms-transition: all 0.5s;transition: all 0.5s;}
.cm-button-style04 {position: relative;overflow: hidden;display:inline-block;border: 2px solid #0f529d;text-align: left;background-color:#0f529d; padding:0 65px 0 40px; text-align:center; color:#fff; }
.cm-button-style04 strong{position: relative; left: 0px; z-index: 1; display: block; color: #fff; font-size: 16px;font-weight: 400;}
.cm-button-style04 i {position: absolute;top: 0px;right:40px; line-height:35px;color: #fff; font-weight:600}
.cm-button-style04:hover strong{color:#0f529d;}
.cm-button-style04:hover i{color:#0f529d;}
.cm-button-style04:hover:before{left:-10%; opacity:1.0;filter:Alpha(opacity=100);}
/* ****************** 공통 button ********************** */
.more-btns a{overflow: hidden; position: relative;display: inline-block; width: 146px; height: 40px;border: 2px solid #0f529d; font-size: 18px;letter-spacing: -0.5px;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;-ms-transition: all 0.3s; transition: all 0.3s;font-size: 15px;font-weight: 600;letter-spacing: 0;box-sizing: border-box; color: #0f529d;}
.more-btns a strong{position:relative; z-index:1; left:10px; line-height:34px; color: #0f529d; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.more-btns a .arrow{position:absolute; top:50%; right:10px; height:12px; margin-top:-8px; font-size: 17px;}
.more-btns a:before{display:block; position:absolute; left:-130%; bottom:0; content:""; width:120%; height:150%; background:#0f529d;transform:skew(-20deg);-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s}
.more-btns a:hover strong{color:#fff; left:20px;}
.more-btns a:hover, .more-btns a:hover strong{ color:#fff}
.more-btns a:hover:before{left:-10%; opacity:1.0;filter:Alpha(opacity=100);}
/*white*/
.more-btns a.white:before{ background:#fff;}
.more-btns a.white:hover .arrow, .more-btns a.white:hover strong{ color:#0f529d!important}


@media all and (max-width:1600px){
/* ****************** HEADER ********************** */
.area-box{ padding:0 30px}
}

@media all and (max-width:1400px){
/* ****************** HEADER ********************** */	

/* -------- FOOTER -------- */
#footerBottom {padding: 55px 0;}
.footer-gnb ul li.tit{ font-size:16px; margin-bottom:30px}
.footer-gnb ul li {margin-top: 13px; font-size: 13px;}
.footer-address p{ font-size:14px}
.site-map-box a, .family-site-box .family-site-open-btn{text-indent: 15px; font-size: 13px;}
.footer-copyright{ font-size:13px}
}
@media all and (max-width:1200px){
/* ****************** HEADER ********************** */	
.area-box{padding:0 15px}
/* -------- FOOTER -------- */
#footerTop, #footerBottom{text-align:left;}
.footer-left-con{display: none;}
.footer-right-con{width: 100%; float: none; padding-left: 0; border-left: none;}
.box-group-con{margin: 25px -10px 0;}
/* Footer :: 오른쪽정보 :: 패밀리사이트 */
.family-site-box{max-width: 320px; margin: 0 10px;}
/* Footer :: 오른쪽정보 :: 사이트맵 */
.site-map-box{max-width: 320px; margin: 0 10px;}



}
@media all and (max-width:1120px){
/* ****************** 공통 button ********************** */
.more-btns a strong{left:5px;}
.more-btns a .arrow{position:absolute; top:50%; right:10px; height:12px; margin-top:-8px; font-size: 17px;}
.more-btns a:before{display:block; position:absolute; left:-130%; bottom:0; content:""; width:120%; height:150%; background:#0f529d;transform:skew(-20deg);-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s}
.more-btns a:hover strong{color:#fff; left:20px;}
.more-btns a:hover, .more-btns a:hover strong{ color:#fff}
.more-btns a:hover:before{left:-10%; opacity:1.0;filter:Alpha(opacity=100);}
}




/* ******************  Fade In 효과 ********************* */
/******** Animation *********/
@media all and (min-width:801px){
/* 서브 공통 :: 스크롤효과 */
.fade-in{opacity:0;filter:Alpha(opacity=0); }
.fade-in-left{opacity:0;filter:Alpha(opacity=0); -webkit-transform: translateX(-10%); -moz-transform: translateX(-10%); -ms-transform: translateX(-10%); -o-transform: translateX(-10%); transform: translateX(-10%);}
.fade-in-right{opacity:0;filter:Alpha(opacity=0); -webkit-transform: translateX(10%); -moz-transform: translateX(10%); -ms-transform: translateX(10%); -o-transform: translateX(10%); transform: translateX(10%);}
.fade-in-down{opacity:0;filter:Alpha(opacity=0); -webkit-transform: translateY(10%); -moz-transform: translateY(10%); -ms-transform: translateY(10%); -o-transform: translateY(10%); transform: translateY(20%);}
.fade-in-up{opacity:0;filter:Alpha(opacity=0); -webkit-transform: translateY(10%); -moz-transform: translateY(10%); -ms-transform: translateY(10%); -o-transform: translateY(10%); transform: translateY(-20%);}
.fade-in-up20{opacity:0;filter:Alpha(opacity=0); -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -ms-transform: translateY(20%); -o-transform: translateY(20%); transform: translateY(20%);}
.scroll-active-animate .fade-in{opacity:1.0;filter:Alpha(opacity=100);-webkit-transition: all 1.0s ease;transition: opacity 1.0s ease;}
.scroll-active-animate .fade-in-left{opacity:1.0;filter:Alpha(opacity=100);-webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px);-webkit-transition: all 1.0s ease;transition: opacity 1.0s ease, transform 1.0s ease;}
.scroll-active-animate .fade-in-right{opacity:1.0;filter:Alpha(opacity=100);-webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px);-webkit-transition: all 1.0s ease;transition: opacity 1.0s ease, transform 1.0s ease;}
.scroll-active-animate .fade-in-down{opacity:1.0;filter:Alpha(opacity=100);-webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px);-webkit-transition: all 1.0s ease;transition: opacity 1.0s ease, transform 1.0s ease;}
.scroll-active-animate .fade-in-up{opacity:1.0;filter:Alpha(opacity=100);-webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px);-webkit-transition: all 1.0s ease;transition: opacity 1.0s ease, transform 1.0s ease;}
.scroll-active-animate .fade-in-up20{opacity:1.0;filter:Alpha(opacity=100);-webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px);-webkit-transition: all 1.0s ease;transition: opacity 1.0s ease, transform 1.0s ease;}
.fade-in-02{-webkit-transition-delay:0.2s !important; transition-delay:0.2s !important }
.fade-in-03{-webkit-transition-delay:0.3s !important; transition-delay:0.3s !important }
.fade-in-04{-webkit-transition-delay:0.4s !important; transition-delay:0.4s !important }
.fade-in-05{-webkit-transition-delay:0.5s !important; transition-delay:0.5s !important }
.fade-in-06{-webkit-transition-delay:0.6s !important; transition-delay:0.6s !important }
.fade-in-07{-webkit-transition-delay:0.7s !important; transition-delay:0.7s !important }
.fade-in-08{-webkit-transition-delay:0.8s !important; transition-delay:0.8s !important }
.fade-in-09{-webkit-transition-delay:0.9s !important; transition-delay:0.9s !important }
.fade-in-10{-webkit-transition-delay:1s !important; transition-delay:1s !important }
/* (공지사항부분) */
.scale-large .notice-con-inner{transform-origin: left top;transition: transform .8s, opacity .6s;transition-timing-function: ease-in-out;transform: scale(0);}
.scroll-active-animate .scale-large .notice-con-inner{transform: scale(1);}
.scale-large:after {transform: scaleX(0);transform-origin: right 100%;transition: transform .6s ease-in-out;transition-delay: .5s;}
.scroll-active-animate .scale-large:after  {transform: scaleX(1);}


}