@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:100%; max-width:1460px; margin:0 auto; padding-left:30px; padding-right:30px;}
.contain:after {content:""; display:block; clear:both;}

.sub-cont {background-color:#f8f8f8;}
.sub-contain{*zoom:1; width:100%; max-width:1780px; margin:0 auto; padding-left:30px; padding-right:30px; display:flex; padding:105px 30px;}
.sub-contain:after {content:""; display:block; clear:both;}
.sub-contain #contArea {max-width:1200px; padding-top:0; background-color:#fff; padding:33px 40px;}

/* header */
#header {position:relative; width:100%; z-index:100; background-color:#fff;}
#header .contain {position:relative; height:100px; width:100%; max-width:1780px;}
#header .sitelogo {position:absolute; top:50%; margin-top:-32px; z-index:10; left:30px;}
#header .sitelogo a {display:block;}

#header .util {position:absolute; right:30px; top:0; margin:0 -18px;}
#header .util ul {display:flex;}
#header .util ul li {padding:0 18px; position:relative; line-height:100px;}
#header .util ul li a {display:block; color:#555; font-weight:500;} 

#gnb {position:relative;}
#gnb > ul {display:flex; justify-content:center; margin-left:280px;}
#gnb > ul > li {position:relative; z-index:1; padding:0 50px;}
#gnb > ul > li > a {display:block; position:relative; text-align:center; font-size:20px; line-height:100px; font-weight:500; color:#333; z-index:5;}
#gnb > ul > li:hover > a ,
#gnb > ul > li.active > a {color:#0075bc;}

#gnb .submenu {display:none; position:absolute; left:50%; margin-left:-120px; width:240px; text-align:center; background:#82d2fb; z-index:1; overflow:auto;}
#gnb .submenu ul {display:block; padding:23px 0;}
#gnb .submenu ul li {margin-bottom:20px;}
#gnb .submenu ul li:last-child {margin-bottom:0;}
#gnb .submenu ul li a {font-size:18px; font-weight:500; position:relative; text-decoration:none; line-height:1.7em; color:#fff;}
#gnb .submenu ul li.active a,
#gnb .submenu ul li:hover a {color:#3d5fc0;}

/* for mobile */
.btn-m-menu {display:none;position:absolute;top:0;right:10px;width:40px;height:100%;text-align:center;text-indent:-9999em;z-index:50;}
.btn-m-menu span {position:absolute; right:50%; top:50%; margin-right:-17px; width:34px; height:3px; background:#2c2c2c; border-radius:2px;}
.btn-m-menu span:before,
.btn-m-menu span:after {content:""; position:absolute; right:0; width:34px; height:3px; background:#2c2c2c; transition-duration:0.3s, 0.3s; transition-delay:0.3s, 0s; border-radius:2px;}
.btn-m-menu span:before {top:-8px; transition-property:top, transform;}
.btn-m-menu span:after {bottom:-8px; transition-property:bottom, transform;}

.mobile-navigation {display:none; position:fixed; top:80px; right:0; width:280px; height:100%; overflow:auto; transition:.3s ease-in-out; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:102;}
.mobile-navigation .jnb-logo {display:none; margin:25px 0; text-align:center;}
.mobile-navigation .jnb-logo a {display:block; margin:0 auto; width:123px; height:50px; background:url('../images/common/jnb_logo.png') 0 0 no-repeat; font-size:0; line-height:0; text-indent:-9999px;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #dfdfdf;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:10px 18px; display:block; color:#333; font-size:17px; font-weight:500; line-height:1.3em;}
.mobile-navigation .nav-menu>ul>li>a:after {content:""; position:absolute; top:50%; right:15px; transform:translateY(-75%) rotate(45deg); width:10px; height:10px; border-right:2px solid #454545; border-bottom:2px solid #454545;}
.mobile-navigation .nav-menu>ul>li.active {background:#f4f4f4}
.mobile-navigation .nav-menu>ul>li.active>a {color:#fff; background:#3d5fc0;}
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg); border-color:#fff}
.mobile-navigation .nav-menu>ul>li.home>a {padding:19px 18px;}
.mobile-navigation .nav-menu>ul>li.home>a:after {display:none;}
.mobile-navigation .nav-menu .submenu {display:none; margin:-1px 0 0 0; padding:10px 0;}
.mobile-navigation .nav-menu .submenu>ul>li>a {display:block; padding:5px 18px; color:#454545; font-size:15px; font-weight:400; line-height:1.4em;}
.mobile-navigation .nav-menu .submenu>ul>li>a:hover {color:#3d5fc0;}
.mobile-navigation .menu-close {position:absolute; top:15px; right:15px; width:30px; height:30px;overflow:hidden; text-indent:-999em;}
.mobile-navigation .menu-close:before, 
.mobile-navigation .menu-close:after {content:""; position:absolute; left:14px; height:30px; width:2px; background-color:#ddd;}
.mobile-navigation .menu-close:before {transform:rotate(45deg);}
.mobile-navigation .menu-close:after {transform:rotate(-45deg);}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:99;}

html.menu-opened #header {background:#fff;}
html.menu-opened #header:after {content:""; position:absolute; bottom:0; left:0; width:100%; height:1px; background:#ddd; z-index:1;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}
html.menu-opened .btn-m-menu span {background:none !important;}
html.menu-opened .btn-m-menu span:before,
html.menu-opened .btn-m-menu span:after {transition-delay:0s, 0.3s;}
html.menu-opened .btn-m-menu span:before {top:0; transform:rotate(45deg);}
html.menu-opened .btn-m-menu span:after {bottom:0; transform:rotate(-45deg);}

/* main */
.main-visual {position:relative; width:100%; line-height:0; overflow:hidden;}
.main-visual .img {background-image:url('../images/main/main_visualBg.jpg'); height:580px; background-repeat:no-repeat; background-position:center center; -webkit-background-size:cover; background-size:cover; overflow:hidden;}
.main-visual .slick-arrow {position:absolute; top:50%; width:26px; height:52px; margin-top:-26px; z-index:98; border:0; font-size:0; line-height:0; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat; background-size:contain;}
.main-visual .slick-prev {left:60px; background-image:url("/images/main/bt_prev.png");}
.main-visual .slick-next {right:60px; background-image:url("/images/main/bt_next.png");}

.img-txt {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.img-txt.v3 {bottom:0; top:auto; transform:translateX(-50%);}

.m-tit {font-size:22px; margin-bottom:15px; letter-spacing:-.03em; color:#242424; line-height:1.3em;}

.main-notice {padding:90px 0 104px; position:relative;}
.main-notice .contain {position:relative;}
.notice-list li a {display:block; border:1px solid #ddd; padding:22px 30px;}
.notice-list li .underbar {width:35px; height:3px; background-color:#3d5fc0; margin:15px 0;}

.notice-list li span {color:#686868;}

.main-gallery {position:relative; background-color:#f5f5f5; padding:87px 0;}
.main-gallery .contain {position:relative;}

.main-list {margin:0 -7px;}
.main-list li {padding:0 7px; width:25%;}
.main-list li p {height:8.125em; color:#555; margin-bottom:10px; line-height:1.625em; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; word-wrap:break-word; text-overflow:ellipsis; overflow:hidden;}
.main-list-tit {position:relative; font-size:18px; color:#454545; font-weight:700; line-height:1.556em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; text-overflow:ellipsis; overflow:hidden;}
.main-list .slick-arrow {position:absolute; top:50%; width:50px; height:50px; margin-top:-25px; z-index:98; border:0; font-size:0; line-height:0; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat; background-size:contain;}
.main-list .slick-prev {left:-83px; background-image:url("/images/main/noti_prev.png");}
.main-list .slick-next {right:-83px; background-image:url("/images/main/noti_next.png");}

.main-more {width:45px; height:25px; border:1px solid #ddd; position:absolute; right:30px; top:0; border-radius:20px;}
.main-more:before {position:absolute; content: ''; width:14px; height:14px; background-size:contain; background-repeat:no-repeat; background-image:url('../images/main/more_plus.png'); left:50%; top:50%; transform:translate(-50%,-50%); }
.main-more:hover {background-color:#3d5fc0; border-color:#3d5fc0;}
.main-more:hover:before {background-image:url('../images/main/more_plus_on.png');}

.main-gallery-list .thumb {position:relative; padding-bottom:66%; margin-bottom:12px; overflow:hidden;}
.main-gallery-list .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; 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-gallery-list p {height:3.25em !important; -webkit-line-clamp:2 !important;}

/* sub */
.sub-visual {position:relative; display:table; table-layout:fixed; width:100%; height:230px; background-position:50% 50%; background-repeat:no-repeat; margin-top:100px;}
.sub-visual .cell {width:100%; height:100%; vertical-align:middle; display:table-cell; text-align:center;}
.sub-visual h2 {font-weight:800; position:relative; font-size:32px; line-height:1.4em; color:#242424; letter-spacing:-.03em;}
.sub-visual.bg1 {background-image:url("../images/common/sv1.jpg");}
.sub-visual.bg2 {background-image:url("../images/common/sv2.jpg");}
.sub-visual.bg3 {background-image:url("../images/common/sv3.jpg");}
.sub-visual.bg4 {background-image:url("../images/common/sv4.jpg");}

#lnb {position:relative; padding-bottom:100px;}
#lnb.pad0 {padding-bottom:0;}
.lnb {position:relative; width:260px; overflow:hidden;}
.lnb h3 {font-size:24px; margin-bottom:10px; width:240px; height:130px; line-height:130px; color:#fff; display:block; text-align:center; background-color:#3d5fc0;}

.lnb > ul {width:240px;}
.lnb > ul > li {line-height:1.4em; position:relative; z-index:1;}
.lnb > ul > li > a {font-size:18px; line-height:60px; padding-left:20px; border-bottom:1px solid #ddd; font-weight:500; display:block; position:relative; color:#555; background-color:#f1f1f1; z-index:2;}
.lnb > ul > li:last-child a {border-bottom:0;}
.lnb > ul > li > a:after {position:absolute; content:''; width:8px; height:15px; right:20px; top:50%; margin-top:-7px; background-size:contain; background-repeat:no-repeat; background-image:url(../images/sub/lnbarrow.png);}
.lnb > ul > li.active {position:relative;}
.lnb > ul > li.active > a {background:#82d2fb; color:#fff;}
.lnb > ul > li.active a:after {background-image:url(../images/sub/lnbarrow_on.png);} 
.lnb > ul > li.active:before {opacity:1;}
.lnb > ul > li:hover > a {background:#82d2fb; color:#fff;}
.lnb > ul > li:hover > a:after {background-image:url(../images/sub/lnbarrow_on.png);} 

.lnb-depth {width:240px;}
.tabmenu.mobile {display:none;}

.m-lnb {display:none;}
.m-lnb ul.lnb-wrap {display:table; table-layout:unset; width:100%;}
.m-lnb ul.lnb-wrap > li {display:table-cell; vertical-align:middle; width:auto; max-width:50%; white-space:nowrap; word-break:break-all;}
.m-lnb ul.lnb-wrap > li > a {display:block; min-width:120px; padding:0 12px; font-size:16px; line-height:45px; border:1px solid #ddd; background:#fff; color:#555; text-align:center; border-right:0; white-space:nowrap; word-break:break-all;}
.m-lnb ul.lnb-wrap > li:last-child > a {border-right:1px solid #ddd;}
.m-lnb ul.lnb-wrap > li.active > a {background:#3d5fc0; border:1px solid #3d5fc0; color:#fff;}
.m-lnb ul.lnb-wrap > li.active + li > a {border-left:0;}

/* .l-menu-list {display:table; table-layout:unset; width:100%;}
.l-menu-list li {display:table-cell; vertical-align:middle; width:auto; max-width:50%; white-space:nowrap; word-break:break-all;}
.l-menu-list li a {display:block; min-width:132px; padding:0 12px; font-size:16px; line-height:45px; border:1px solid #ddd; background:#fff; color:#555; text-align:center; white-space:nowrap; word-break:break-all;} */

#contArea {width:100%; max-width:1200px;}
#contArea.wide {max-width:none;}

.sub-title {padding:0 0 30px;}
.sub-title h3 {font-size:30px; color:#454545; line-height:1.3em; letter-spacing:-.03em; position:relative; border-bottom:1px solid #ddd; padding-bottom:12px; margin-bottom:12px;}
.sub-title h3:after {position:absolute; content:''; width:142px; height:4px; background-color:#3d5fc0; bottom:-1px; right:0; }

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

/* footer */
#footer {background:#fff; font-size:15px;  letter-spacing:-.03em; line-height:1.733em; position:relative;}
#footer .contain {max-width:1460px;}

.link-wrap {border-bottom:1px solid #ddd;}
.foot-link {display:flex; padding:17px 0;}
.foot-link li {padding-left:24px; margin-right:40px; position:relative;}
.foot-link li:before {position:absolute; content:''; width:16px; height:15px; top:5px; left:0; background-repeat:no-repeat; background-image:url('../images/common/foot_bullet.png'); background-size:contain;}
.foot-link li a {display:block;}

.foot-logo-wrap {margin-bottom:14px;}
.foot-logo-wrap .foot-logo {display:inline-block;}
.foot-logo-wrap .foot-logo:first-child {margin-right:30px;}

.foot-info {padding:20px 0;}
.foot-info address {font-style:normal;}
.foot-info address span {padding-right:25px; color:#686868;}
.foot-info address span strong {color:#454545; font-weight:500;}

.bt-top {position:absolute; top:94px; right:45px;}