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

.only-desktop {display:block;}
.only-desktop-tablet {display:block;}
.only-tablet-mobile {display:none;}
.only-tablet {display:none;}
.only-mobile {display:none;}

#wrapper {background:url("../images/common/bg_top.png") 0 0 no-repeat;}

/* header */
#header {position:relative; padding:0 30px; border-bottom:1px solid #ddd; z-index:100;}
#header .inner {position:relative; max-width:1400px; height:98px; margin:0 auto; z-index:2;}

.sitelogo {position:absolute; top:50%; left:0; margin-top:-25px;}

#gnb {margin-left:220px;}
#gnb > ul {display:table; margin:0 auto;}
#gnb > ul > li {display:table-cell; padding:0 22px; vertical-align:top; position:relative;}
#gnb > ul > li:first-child {margin-left:0;}
#gnb > ul > li > a {display:block; font-family:"NanumSquare",sans-serif; color:#242424; font-size:19px; font-weight:700; line-height:98px; white-space:nowrap;}
#gnb > ul > li.active > a {color:#eda93c;}
#gnb .submenu {display:none; position:absolute; left:50%; width:150px; margin-left:-75px; background:#eda93c;}
#gnb .submenu ul {padding:10px 5px; text-align:center;}
#gnb .submenu ul li a {display:block; padding:4px 0; color:#fff; font-size:15px; font-weight:400; line-height:1.4em;}
#gnb .submenu ul li a:hover {text-decoration:underline;}

.util {position:absolute; top:50%; right:0; margin-top:-28px; text-align:center;}
.util ul li {float:left; margin-left:27px;}
.util ul li:first-child {margin-left:0;}
.util ul li a {display:block; color:#454545; font-size:14px; line-height:1.3em;}
.util ul li img {display:block; margin:0 auto 5px;}

#container {background:url("../images/common/bg_bottom.png") 100% 100% no-repeat;}

/* for mobile */
.btn-m-menu {display:none; position:absolute; top:50%; right:0; -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); transform:translateY(-50%); width:38px; height:38px; text-align:center; text-indent:-9999em; z-index:50; border-radius:100%;}
.btn-m-menu span {position:absolute; left:4px; right:4px; top:50%; margin-top:-1px; height:3px; background:#454545;}
.btn-m-menu span:before,
.btn-m-menu span:after {content:" "; position:absolute; left:0; right:0; height:3px;}
.btn-m-menu span:before {top:-10px; background:#454545;}
.btn-m-menu span:after {bottom:-10px; background:#454545;}

.mobile-navigation {display:none; position:fixed; top:0; right:0; width:280px; height:100%; background:#fff; overflow:auto; -ms-transform:translateX(100%); -webkit-transform:translateX(100%); transform:translateX(100%); transition:.2s; z-index:10001;}
.mobile-navigation .home {border-bottom:1px solid #ddd;}
.mobile-navigation .home a {display:block; padding:0 20px; font-size:18px; font-weight:700; line-height:60px; color:#454545;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li>a {display:block; position:relative; padding:13px 20px; color:#454545; font-size:17px; font-weight:500; line-height:1.3em;}
.mobile-navigation .nav-menu>ul>li>a:after {content:""; position:absolute; top:50%; right:20px; 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>a {color:#fff; background:#eda93c;}
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg); border-color:#fff;}
.mobile-navigation .nav-menu .submenu {display:none; padding:10px 20px; background:#fff;}
.mobile-navigation .nav-menu .submenu li a {display:block; padding:8px 0; color:#454545; font-size:15px; font-weight:400; line-height:1.3em;}
.mobile-navigation .nav-links {padding:15px 15px; text-align:center; border-bottom:1px solid #ddd;}
.mobile-navigation .nav-links ul {margin:0 -3px;}
.mobile-navigation .nav-links ul:after {content:""; display:block; clear:both;}
.mobile-navigation .nav-links ul li {float:left; width:50%; padding:0 3px;}
.mobile-navigation .nav-links a {display:block; width:100%; text-align:center; background:#666; color:#fff; font-size:14px; line-height:35px; border-radius:20px;}
.mobile-navigation .nav-links a img {vertical-align:middle; margin:-.2em 5px 0 0; width:20px;}
.mobile-navigation .close {position:absolute; top:16px; right:14px; width:26px; height:26px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:2px; background:#ddd;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; z-index:1000;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {transform:translateX(0); box-shadow:0 0 10px rgba(0,0,0,.3);}
html.menu-opened .mobile-overlay {display:block;}

/* main */
.main-contain {max-width:1460px; padding:30px; margin:0 auto;}

.main-home {display: flex; gap: 30px; position:relative; overflow:hidden; margin-bottom:30px;}
.main-home .slider {float:left; width:69%;}
.main-home .slider .desktop {display:block;}
.main-home .slider .mobile {display:none;}
.main-home .banner {float:left; text-align:right; padding-left:20px; width:31%;}
.main-home .items {max-width:960px; border-radius:10px; overflow:hidden;}
.main-home .slick-dots {position:absolute; bottom:30px; left:40px; right:40px; line-height:0; z-index:50;}
.main-home .slick-dots li {display:inline-block; vertical-align:top; margin:0 4px 0 0;}
.main-home .slick-dots li button {display:block; background:#949494; border:0; border-radius:100%; width:20px; height:20px; overflow:hidden; text-align:center; color:#fff; line-height:20px; font-size:13px; font-weight:400;}
.main-home .slick-dots li.slick-active button {color:#454545; background:#fff;}

.main-content .row {margin:0 -14px;}
.main-content .row:after {content:""; display:block; clear:both;}
.main-content .col {float:left; width:calc(100% / 6); padding:0 14px;}
.main-content .col-2 {width:43%;}

.m-post {padding:20px 29px; background:#fff; border-radius:10px; border:1px solid #ddd; box-shadow:4px 4px 0 rgba(0,0,0,.05);}
.slider + .m-post {flex: 1; overflow: hidden;}
.m-post .inner {position:relative;}
.m-post h2 {margin-bottom:10px; color:#242424; font-family:"NanumSquare",sans-serif; font-size:20px; line-height:1.3em; letter-spacing:-.03em;}
.m-post ul li {position:relative; padding:0 80px 0 10px; height:35px; line-height:35px; color:#454545; font-size:16px; letter-spacing:-.03em;}
.m-post ul li:before {content:""; position:absolute; top:15px; left:0; width:4px; height:4px; background:#454545; border-radius:100%;}
.m-post ul li a {display:inline-block; height:35px; max-width:calc(100% - 30px); vertical-align:top; overflow:hidden; white-space:nowrap; white-space:nowrap; text-overflow:ellipsis;}
.m-post ul li a:hover {text-decoration:underline;}
.m-post ul li img {vertical-align:middle;}
.m-post ul li span {position:absolute; top:0; right:0; color:#686868;}
.m-post .more {position:absolute; top:1px; right:0; overflow:hidden; text-indent:-999em; width:40px; height:25px; background:#eda93c url("../images/main/more.png") 50% 50% no-repeat; border-radius:20px;}

.m-link {display:block; height:230px; padding:26px 10px; text-align:center; background:#fff; border-radius:10px; border:1px solid #ddd; box-shadow:4px 4px 0 rgba(0,0,0,.05);}
.m-link h2 {margin:14px 0 25px; font-family:"NanumSquare",sans-serif; font-size:20px; line-height:1.3em; letter-spacing:-.03em; color:#242424;}
.m-link p {margin-bottom:10px; color:#686868; font-size:15px; line-height:1.3em; font-weight:300; letter-spacing:-.05em;}
.m-link .arrow {display:block; width:30px; height:30px; margin:0 auto; background:url("../images/main/arrow.png") 50% 50% no-repeat; border-radius:100%;}
.m-link.type1 .arrow {background-color:#eda93c;}
.m-link.type2 .arrow {background-color:#ff9d00;}
.m-link.type3 .arrow {background-color:#8cc77a;}
.m-link.type4 .arrow {background-color:#66cb47;}
.m-link.type5 .arrow {background-color:#7ac8e7;}
.m-link.type6 .arrow {background-color:#76dfe2;}


/* sub */
#contArea {max-width:1260px; padding-left:30px; padding-right:30px; margin:0 auto;}

.sub-title {padding:56px 0 0; text-align:center;}
.sub-title h2 {font-family:"NanumSquare",sans-serif; font-size:35px; color:#242424; line-height:1.3em; margin-bottom:26px;}
.sub-title h2:after {content:""; display:block; margin:20px auto 0; width:50px; height:3px; background:#2db0b8;}
.sub-title p {color:#686868; font-size:16px; line-height:1.5em;}

.lnb {text-align:center; margin-top:42px;}
.lnb ul {display:table; width:auto; margin:0 auto;}
.lnb ul li {display:table-cell; padding:0 5px; min-width:176px; width:auto; vertical-align:top; white-space:nowrap;}
.lnb ul li:first-child {border-left:0;}
.lnb ul li a {display:block; padding: 0 15px; color:#454545; font-family:"NanumSquare",sans-serif; font-size:20px; font-weight:700; line-height:48px; background:#fff; border:1px solid #ddd; border-radius:40px;}
.lnb ul li a:hover{background:#f8b62b; border-color:#f8b62b; color:#fff;}
.lnb ul li.active a {background:#f8b62b; border-color:#f8b62b; color:#fff;}

.real-cont {min-height:400px; padding-bottom:100px; padding-top:50px;}

/* footer */
#footer {padding:23px 30px; color:#686868; font-size:14px; font-weight:300; line-height:1.6em; border-top:1px solid #ddd;}
#footer address {font-style:normal;}
#footer .inner {max-width:1400px; margin:0 auto;}

.foot-links {margin-bottom:8px;}
.foot-links ul:after {content:""; display:block; clear:both;}
.foot-links ul li {float:left; margin-right:25px;}
.foot-links ul li:last-child {margin-right:0;}
.foot-links ul li a:hover {text-decoration:underline;}

.foot-info span {display:inline-block; margin-right:20px;}

.foot-sns {margin-top: 10px; display: none;}
.foot-sns ul {display: flex; gap: 20px; align-items: center; justify-content: center;}
.foot-sns img {height: 30px;}

#floatBanner {position: fixed; top: 50%; transform: translateY(-50%); right: 15px; z-index: 100; background: #fae7c9; border-radius: 10px;}
#floatBanner a {position: relative; display: block; padding: 20px; font-weight: 500; text-align: center; color: #242424;}
#floatBanner a:not(:first-child) {padding-top: 0;}
#floatBanner a:not(:last-child) {margin-bottom: 12px; padding-bottom: 12px;}
#floatBanner a:not(:last-child):after {content: ""; position: absolute; bottom: 0; left: 50%; margin-left: -24px; width: 48px; height: 1px; background: #f6d9ab;}
#floatBanner .tit {margin-top: 5px;}