@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

.contain {width:1400px; margin:0 auto;}
.contain:after {content:""; display:block; clear:both;}

/* header */
#header {position:relative; width:100%; height:180px; z-index:100; background:#fff;}
#header:after {content:""; position:absolute; bottom:0; left:0; width:100%; height:1px; background:#ddd; z-index:-1;}
#header .contain {position:relative;}

.global-wrap {position:relative; height:120px; box-shadow:0 3px 8px rgba(0,0,0,0.2);}
.global-wrap:after {content:""; position:absolute; bottom:0; left:0; width:100%; height:2px; background:#00a8e6;}
.global-wrap .contain {height:120px;}

.sitelogo {position:absolute; top:50%; left:0; transform:translateY(-50%); z-index:5;}
.util {position:absolute; top:30px; right:0;}
.util ul {display:flex;}
.util ul li {padding-left:40px;}
.util ul li a {display:block; font-size:14px; line-height:22px; color:#686868;}
.top-quick {position:absolute; bottom:0; right:0;}
.top-quick ul {display:flex;}
.top-quick ul li {margin-left:-1px;}
.top-quick ul li a {display:block; width:150px; height:38px; border:1px solid #ddd; border-bottom:0; border-radius:8px 8px 0 0; text-align:center; font-size:16px; line-height:37px; color:#242424; font-weight:500;}
.top-quick ul li:hover a {color:#00a8e6;}
.top-refer {position:absolute; bottom:8px; left:335px; font-size:16px; line-height:1.5em; color:#454545;}



.gnb-wrap {position:relative; height:60px;}
.gnb-wrap .contain {height:60px;}
#gnb {display:flex; justify-content:space-between;}
#gnb .tt {font-size:20px; line-height:60px; font-weight:700; color:#242424;}
#gnb > ul {display:inline-flex; margin:0 -10px;}
#gnb > ul > li {position:relative; padding:0 10px;}
#gnb > ul > li:after {content:""; position:absolute; top:50%; left:0; width:1px; height:14px; margin-top:-6px; background:#242424;}
#gnb > ul > li:first-child:after {display:none;}
#gnb > ul > li > a {display:block; position:relative; font-size:15px; font-weight:700; line-height:60px;  letter-spacing:-0.05em; color:#242424;}
#gnb > ul > li.active > a,
#gnb > ul > li:hover > a {color:#00a8e6;}



/* main */
#container {margin-top:30px;}
#container > .contain {display:flex;}
.left-menu {flex:1 1 290px; max-width:290px; margin-right:30px; padding-bottom:100px;}
.left-menu .event-btn {margin-bottom:10px;}
.left-menu .event-btn a {display:block; padding:8px 20px; background:#00a8e6; font-size:18px; line-height:20px; font-weight:500; color:#fff;}
.left-menu .event-btn a span {font-size:14px;}
.left-menu .bulk-pro-btn {margin-bottom:10px;}
.left-menu .bulk-pro-btn a {display:block; padding:8px; border:2px solid #808080;}
.left-menu .bulk-pro-btn a dl dt {font-size:18px; line-height:20px; font-weight:500; color:#454545;}
.left-menu .bulk-pro-btn a dl dd {font-size:14px; line-height:20px; font-weight:500; color:#454545;}
.left-menu .small-scale {border:2px solid #808080; padding:8px 18px; margin-bottom:10px;}
.left-menu .small-scale .title {padding-bottom:10px; margin-bottom:8px; border-bottom:1px solid #ddd;}
.left-menu .small-scale .title h2 {font-size:18px; line-height:20px; font-weight:500; color:#00a8e6;}
.left-menu .small-scale .title p {font-size:14px; line-height:20px; font-weight:500; color:#808080;}
.left-menu .small-scale .title p span {color:#454545;}
.left-menu .small-scale ul li {font-size:16px; line-height:30px; font-weight:500;}
.left-menu .small-scale ul li a {display:block; color:#454545;}
.left-menu .small-scale ul li a span {font-size:14px; color:#808080;}
.left-menu .small-scale ul li:hover a {color:#00a8e6;}
.left-menu .small-scale ul li:hover a span {color:#00a8e6;}
.left-menu .service-center {margin-bottom:10px; border-radius:8px; background:#e5f6fc; padding:25px 20px;}
.left-menu .service-center .title {margin-bottom:12px;}
.left-menu .service-center .title h2 {font-size:21px; line-height:1.3em; color:#454545;}
.left-menu .service-center .title p {font-size:14px; line-height:1.3em; color:#00a8e6; font-weight:500; margin-top:5px;}
.left-menu .service-center .tel {margin-bottom:12px; font-size:28px; line-height:1.3em; color:#1f5366; font-weight:700;}
.left-menu .service-center ul li {font-size:16px; line-height:24px; color:#454545;}
.left-menu .bank-cnt {margin-bottom:10px; border-radius:8px; background:#e5edef; padding:25px 20px;}
.left-menu .bank-cnt .title {margin-bottom:12px;}
.left-menu .bank-cnt .title h2 {font-size:21px; line-height:1.3em; color:#454545;}
.left-menu .bank-cnt .title p {font-size:14px; line-height:1.3em; color:#00a8e6; font-weight:500; margin-top:5px;}
.left-menu .bank-cnt .bank-logo {line-height:0; margin-bottom:3px;}
.left-menu .bank-cnt .num {margin-bottom:3px; font-size:28px; line-height:1.3em; color:#1f5366; font-weight:700;}
.left-menu .bank-cnt .name {font-size:16px; line-height:1.3em; color:#454545;}
.left-menu .reference {border:2px solid #808080; padding:18px;}
.left-menu .reference dl dt {margin-bottom:12px; font-size:24px; line-height:1em; font-weight:700; color:#242424;}
.left-menu .reference dl dt span {position:relative; z-index:1;}
.left-menu .reference dl dt span:after {content:""; position:absolute; bottom:5px; left:0; width:100%; height:10px; background:rgba(0,168,230,0.2); z-index:-1;}
.left-menu .reference dl dd {font-size:14px; line-height:26px; margin-bottom:10px; color:#242424;}
.left-menu .reference dl dd:last-child {margin-bottom:0;}
.left-menu .reference dl dd span {border-bottom:1px solid #242424; font-weight:500;}

.sub-cnt {flex:1 auto; width:1%;}

.main-visual {position:relative; width:100%; z-index:1; margin-bottom:45px;}
.main-visual a {display:block; line-height:0;}
.main-visual .img img {width:100%;}
.main-visual .slick-track {z-index:1;}
.main-visual .slick-arrow {position:absolute; top:50%; margin-top:-42px; width:47px; height:84px; z-index:20; border:0; font-size:0; line-height:0; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat; background-size:100% 100%;}
.main-visual .slick-prev {left:30px; background-image:url("../images/main/bt_prev.png");}
.main-visual .slick-next {right:30px; background-image:url("../images/main/bt_next.png");}

.main-event {margin-bottom:90px;}
.main-event .title {margin-bottom:20px;}
.main-event .title h2 {position:relative; display:inline-block; font-size:28px; line-height:1em; color:#242424; z-index:1;}
.main-event .title h2:after {content:""; position:absolute; bottom:5px; left:0; width:100%; height:10px; background:rgba(0,168,230,0.2); z-index:-1;}
.main-event .list ul {display:flex; flex-wrap:wrap; margin:0 -10px;}
.main-event .list ul li {width:25%; padding:0 10px; margin-bottom:35px; text-align:center;}
.main-event .list ul li a {display:block;}
.main-event .list ul li .thumb {position:relative; width:100%; height:0; padding-bottom:100%; margin-bottom:15px; overflow:hidden;}
.main-event .list ul li .thumb:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid #ddd;}
.main-event .list ul li .thumb img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.main-event .list ul li .tit {font-size:16px; line-height:1.4em; color:#454545;}
.main-event .more {text-align:center;}
.main-event .more a {display:inline-block; position:relative; padding-bottom:30px; font-size:16px; line-height:22px; font-weight:500; color:#454545;}
.main-event .more a:after {content:""; position:absolute; bottom:0; left:50%; margin-left:-11px; width:23px; height:12px; background:url('../images/main/more1.png') 0 0 no-repeat; background-size:100% 100%;}

/* sub */
.real-cont {min-height:350px; _height:350px; padding-bottom:100px;}

/* footer */
#footer {position:relative; width:100%; background:#333; padding:33px 0;}
#footer .contain {position:relative;}
#footer address {font-style:normal;}
#footer address span {position:relative; display:inline-block; padding-right:30px;}
#footer .foot-info {font-size:15px; line-height:28px; color:#ccc;}
#footer .foot-link {padding-bottom:15px; border-bottom:1px solid #ddd; margin-bottom:12px;}
#footer .foot-link ul {display:flex;}
#footer .foot-link ul li {margin-right:60px;}
#footer .foot-link ul li a {display:block;}