@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:1200px; margin:0 auto; position:relative; letter-spacing:-.04em;}
#main #container {padding:130px 0;}

/* header */
#header {position:absolute; top:0; left:0; width:100%; background:#fff; height:100px;  z-index:90; border-bottom:1px solid #ddd;}
#header .sitelogo {position:absolute; top:13px; left:15px; z-index:10; }

#gnb {letter-spacing:-.04em;}
#gnb>ul {display:flex; justify-content:flex-end;}
#gnb>ul>li {position:relative; text-align:center; padding:0 50px;}
#gnb>ul>li:last-child {padding-right:0; margin-right:0;}
#gnb>ul>li>a {display:block; color:#2c2c2c; font-size:20px; font-weight:500; line-height:100px; position:relative;}
#gnb>ul>li:hover>a,
#gnb>ul>li:focus>a {color:#d9ad3b;}
#gnb>ul>li:hover>a:after,
#gnb>ul>li:focus>a:after {content:""; width:40px; height:4px; background:#d9ad3b; position:absolute; bottom:0; left:50%; transform:translateX(-50%);}

#gnb .submenu {position:absolute; top:100px; left:0; width:100%; height:0; z-index:20; overflow:hidden;}
#gnb .submenu ul {display:block; padding:20px 0;} 
#gnb .submenu ul li {padding:10px 0; text-align:center;}
#gnb .submenu ul li a {display:block;}
#gnb .submenu {position:absolute; top:100px; left:0; width:100%; height:0; overflow:hidden; z-index:20;}
#gnb .submenu ul {display:block;padding:30px 0 40px;}
#gnb .submenu ul li {padding:0; text-align:center; font-size:16px; color:#2c2c2c; font-weight:300; margin-bottom:10px;}
#gnb .submenu ul li a {display:inline-block; line-height:30px; position:relative;}
#gnb .submenu ul li a:hover {color:#d9ad3b;}
#gnb .submenu ul li a:hover:after {content:""; width:100%; height:1px; background:#d9ad3b; position:absolute; left:0; bottom:0px;} 
#gnb>ul>li:last-child .submenu ul li {margin-left:50px;}

.submenu-bg {display:none; position:absolute; top:100px; left:0; width:100%; background:#fff; border-bottom:1px solid #ddd; z-index:10;}


/* main */ 

#container .main_wrap {}
.main-visual {}
.main-visual .item {width:790px; height:574px; position:relative;}
.main-visual .item .section-img {width:100%; height:100%; background-size:cover;}
.main-visual .item .txt {position:absolute;  left:50px; top:50px; color:#fff; letter-spacing:-.04em;}
.main-visual .item .txt h3 {font-weight:500; font-size:24px; line-height:1.4em; margin-bottom:24px;}
.main-visual .item .txt h2 {font-weight:700; font-size:48px; line-height:1.2em; margin-bottom:20px;}
.main-visual .item .txt p {font-weight:400; font-size:14px; letter-spacing:.64em; line-height:1.4em;}
.main-visual .items {position: relative;}
.main-visual .items .slick-arrow {position:absolute; bottom:133px; font-size:0; border:0;}
.main-visual .items .slick-prev {background:url("../images/bbs/slide_prev.png") no-repeat; width:16px; height:28px; left:50px; z-index:15;}
.main-visual .items .slick-next {background:url("../images/bbs/slide_next.png") no-repeat; width:16px; height:28px; left:126px; z-index:15;}
.main-visual .items .slick-dots {position:absolute; left:50px; bottom:50px; display:flex;}
.main-visual .items .slick-dots li button {width:60px; height:3px; background:rgba(255,255,255,0.56); border:0; font-size:0; margin-right:20px;}
.main-visual .items .slick-dots li.slick-active button {background:rgba(255,255,255,1);}


.section {width:380px; height:272px; position:relative; letter-spacing:-.04em; color:#fff; background-size:cover;}
.section h3 {font-size:26px; font-weight:700; position:absolute; top:40px; left:40px;}
.section a {font-size:16px; font-weight:400; padding-right:24px; position:absolute; bottom:40px; left:40px;}
.section a:after {content:""; position:absolute; top:6px; right:0; background:url("../images/bbs/shortcut.png") no-repeat; width:10px; height:18px;}

.section5 {display:flex; flex-direction:column; width:380px; float: right; margin-bottom:30px;}
.section5 .info {width:100%; height:202px; margin-bottom:10px; border:1px solid #ddd; padding:35px;}
.section5 .info h3 {float:left; margin-bottom:18px; font-weight:700; font-size:26px; line-height:1.4em; color:#2c2c2c;}
.section5 .info a {float:right; font-weight:400; font-size:12px; color:#878787;}
.section5 .info ul li {clear:both; margin-bottom:12px; font-size:14px; font-weight:400; color:#505050; line-height:1.4em; position:relative;}
.section5 .info ul li:last-child {margin-bottom:0;}
.section5 .info ul li span {position:absolute; right:0;}
.section5 .sitemap {height:60px; border:1px solid #ddd; padding:15px 40px;}
.section5 .sitemap select {width:100%; height:100%; border:1px solid #ddd; vertical-align:top; font-size:14px; line-height:1.6em; color:#878787; text-align-last:center; text-align:center; -ms-text-align-last:center; -moz-text-align-last:center;}

.main-visual {float: left; margin-bottom:30px;}
.section1 {float: right; margin-bottom:30px;}
.section2 {float: right;}
.section3 {clear: both; float: left; margin-right:30px;}
.section4 {float: left; }



/* sub page */

.sub-visual {position:relative; height:340px; z-index:10; letter-spacing:-.04em; margin-top:100px;}
.sub-visual .tit {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; z-index:11; color:#fff; font-size:42px; font-weight:700;}
.sub-visual .tit span {display:block; font-size:15px; font-weight:300; margin-top:28px;}
.sub-visual .background {position:absolute; top:0; left:0; background-size:cover; background-repeat:no-repeat; width:100%; height:100%;}

.lnb-path {position:relative; z-index:50; height:60px; letter-spacing:-.04em;}
.lnb-path:after {content:"";position:absolute; bottom:0; left:0; width:100%; height:1px; background:#ddd;}
.lnb-path .contain {max-width:1400px; padding:0;}
.lnb-path .home {float:left; position:relative; width:65px; height:60px; font-size:0; background:#fff url('../images/sub/home.png') 50% 50% no-repeat;}
.lnb-path .home:after {content:""; width:1px; height:22px; background:#ddd; position:absolute; top:19px; right:0;}
.lnb-path .home a {display:block; width:100%; height:100%;}
.lnb-path .submenu {float:left; min-width:252px; position:relative; z-index:50}
.lnb-path .submenu:after {content:""; position:absolute; top:24px; right:20px; width:0; height:0; border:solid #505050; border-width:0 2px 2px 0; display:inline-block; padding:3px; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
.lnb-path .submenu.active:after {top:26px; transform:rotate(-135deg); -webkit-transform:rotate(-135deg);}
.lnb-path .submenu > .tit {display:block; position:relative; color:#2c2c2c; font-size:18px; line-height:60px; font-weight:500; transition:none; padding-left:20px;}
.lnb-path .submenu > .tit:after {content:""; width:1px; height:22px; background:#ddd; position:absolute; top:19px; right:0;}
.lnb-path .submenu ul {display:none; position:absolute; top:60px; left:0; width:100%; background:#fff; z-index:51;}
.lnb-path .submenu ul li a {display:block; padding:15px 0 15px 20px; color:#2c2c2c; font-size:16px; line-height:20px; text-decoration:none; border:1px solid #ddd; border-top:0;}
.lnb-path .submenu ul li a:hover {background:#fafafa;}

.real-cont {margin:70px 0 140px; letter-spacing:-.04em;}
.sub-title {text-align:center; margin-top:80px;}
.sub-title h2 {font-size:36px; font-weight:700; color:#2c2c2c;}

/* footer */
#footer {background:#fafafa; line-height:1.6em; letter-spacing:-.03em; border-top:1px solid #ddd; clear: both;}
#footer address {font-style:normal;}

.foot-group {padding:30px 0; position:relative;}
.foot-group a {display:inline-block; margin-right:30px; padding-left:22px; position:relative; margin-bottom:26px; font-size:14px; color:#505050;}
.foot-group a::before {content:""; width:17px; height:17px; background:url("../images/common/footer_icon.png") no-repeat; position:absolute; top:5px; left:0;}
.foot-group a:last-child {margin-right:0;}

.foot-group .tit {font-size:16px; margin-bottom:20px; margin-bottom:10px; color:#505050;}
.foot-group span {margin:0 5px;}
.foot-group address {font-size:14px; color:#878787;}
.foot-group address p {margin-bottom:26px;}
.foot-group address p:last-child {margin-bottom:0;}
.foot-group .footer_logo {position:absolute; right:0; top:50%; transform:translateY(-50%);}