@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 } 

html { overflow-y:scroll } 

/* header */
#wrapper { position: relative; overflow: hidden; } 
#container { padding: 100px 0; position: relative; } 
#main #container { padding: 0; } 

#header { position:fixed; left:0; top:0; width:100%; transition:.2s; z-index: 90; background-color: #fff; } 
#header .contain { height: 100px; display: flex; align-items: center; justify-content: space-between; max-width: 1460px; z-index: 2; } 
#header .sitelogo > a .logo { position: absolute; top: 20px; top: 50%; transform: translateY(-50%); z-index: 2; width: 170px; height: 60px; background: url(../images/common/sub-logo.svg) no-repeat center left/contain; } 
#header.header-fixed { position: fixed; } 

#main #header { background-color: transparent; } 
#main #header .sitelogo > a .logo { background: url(../images/common/logo.svg)no-repeat center left/contain; } 


#gnb>ul { display:flex; justify-content:flex-end; margin:0 -60px; } 
#gnb>ul>li { position: relative; text-align: center; padding: 0 60px; display: flex; align-items: center; } 
#gnb>ul>li>a { position:relative; color:#242424; font-size:18px; line-height:2em; fo nt-weight: 300; letter-spacing: -0.02em; } 
#gnb>ul>li:hover>a:after { content:""; width: 100%; height:1px; background-color:#000; position:absolute; left:50%; bottom:0; transform:translateX(-50%); } 

#main #gnb>ul>li>a { color: #fff; } 
#main #gnb>ul>li:hover>a { color:#c0c0c0; } 
#main #gnb>ul>li:hover>a:after { background-color:#c0c0c0; } 


/* footer */
#footer { bottom: 0; right: 0; position: absolute; width: 100%; z-index: 90; border-top: 1px solid #ddd; } 
#footer .contain { max-width: 1460px; display: flex; height: 100px; align-items: center; justify-content: end; } 
#footer .foot-info p { font-size: 12px; font-weight: 300; line-height: 1.083em; letter-spacing: 0; color: #454545; opacity: .7; } 
#footer .foot-info a:hover { text-decoration: underline; } 

#main #footer { border-top: none; } 
#main #footer .foot-info p { opacity: .7; color: #fff; } 
#main #footer .contain { align-items: initial; } 
#main #footer .foot-info { padding-top: 30px; } 
 
.scroll-top { font-size:0; border:none; width:50px; height:50px; background: url('../images/common/top.png')no-repeat 50% 50%/contain; position: absolute; right:30px; bottom: 130px; z-index:100; } 

#wrapper #main .scroll-top { display:none; } 
#wrapper #sub .about .scroll-top { display:none; } 

.contain { position:relative; max-width:1460px; padding-left:30px; padding-right:30px; margin:0 auto; } 
#contArea { max-width:1460px; padding-left:30px; padding-right:30px; margin:0 auto; } 
#contArea.wide { max-width:100%; padding-left:0; padding-right:0; } 

/* main */ 
.main-visual { position: relative; height: 100vh; color: #fff; overflow: hidden; } 
.main-visual .item { position: relative; overflow: hidden; height: 100vh; } 
.main-visual .item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: 5s; transform: scale(1.1); } 
.main-visual .caption { position: absolute; right: 260px; bottom: 100px; } 
.main-visual .caption .t1 { font-size: 20px; font-weight: 500; letter-spacing: -.02em; opacity: 0; transition: 1.4s; transform: translateY(30px); } 
.main-visual .slick-arrow { position: absolute; top: 50%; width: 30px; height: 55px; border: 0; font-size: 0; line-height: 0; text-indent: -9999em; overflow: hidden; background-color: transparent; background-position: 50% 50%; background-repeat: no-repeat; z-index: 50; background-size: contain; } 
.main-visual .slick-prev { left: 35px; background-image: url("../images/main/vis-prev.png"); } 
.main-visual .slick-next { right: 35px; background-image: url("../images/main/vis-next.png"); } 
.main-visual .active .item img { transform: scale(1); } 
.main-visual .active .caption .t1 { opacity: .7; transition-delay: .25s; transform: translateX(0); } 
.main-visual .contain { max-width:1460px; padding: 0; } 
.main-visual .slick-dots { display:flex; align-items:center; position: absolute; left:50%; transform:translateX(-50%); bottom: 150px; z-index:1; } 
.main-visual .slick-dots li { padding: 0 8px; } 
.main-visual .slick-dots li button { background: url(../images/main/btn-slide.png) no-repeat 50% 50%/contain; background-color:transparent; width: 34px; height: 33px; font-size:0; display:block; transition:.3s; border-radius:50%; border-color:transparent; } 
.main-visual .slick-dots li.slick-active button { background: url(../images/main/btn-slick-on.png) no-repeat 50% 50%/contain; width: 34px; height: 33px; } 

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

/* sub page */

#contArea.type2 {
    max-width: 1260px;
}
.real-cont { padding-top: 80px; } 

.root_daum_roughmap { width:100% !important; height:400px !important; } 
.root_daum_roughmap .wrap_map { height:400px !important; } 
.roughmap_lebel_text { line-height:0 !important; font-size:0 !important; } 

.pb150 { padding-bottom: 150px; } 
/* .pb250 { padding-bottom: 250px; }  */
.pb200 { padding-bottom: 200px; } 

/* for mobile */
.only-mobile { display:none; } 
.btn-m-menu { display:none; position:absolute; top:50%; margin-top:-11px; right:30px; width:30px; height:22px; text-align:center; text-indent:-9999em; z-index:99; transition:all 0.5s ease-in-out; } 
.btn-m-menu span { position:absolute; right:0; top:50%; margin-top:-1px; height:2px; width:23px; background:#242424; } 
.btn-m-menu span:before,
.btn-m-menu span:after { content:" "; position:absolute; right:0; width:30px; height:2px; background:#242424; transition-duration:0.3s, 0.3s; transition-delay:0.3s, 0s; } 
.btn-m-menu span:before { top:-10px; transition-property:top, transform; } 
.btn-m-menu span:after { bottom:-10px; transition-property:bottom, transform; } 
.mobile-navigation { position:fixed; top:0; right:0; padding:20px 0; width:400px; height:100%; overflow:auto; transition:.3s ease-in-out; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:202; } 
.mobile-navigation .home { margin-bottom:20px; padding-left:15px; } 
.mobile-navigation .home img { height:23px; } 
.mobile-navigation .nav-menu>ul { margin-top:30px; } 
.mobile-navigation .nav-menu>ul>li { border-bottom:1px solid #dfdfdf; } 
.mobile-navigation .nav-menu>ul>li>a { position:relative; padding:12px 15px; display:block; color:#454545; font-size:18px; 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 #2c2c2c; border-bottom:2px solid #2c2c2c; } 
.mobile-navigation .nav-menu>ul>li:first-child a:after { display: none; } 
.mobile-navigation .nav-menu>ul>li.active>a { color:#305e92 } 
.mobile-navigation .nav-menu>ul>li.active>a:after { transform:translateY(-35%) rotate(-135deg); border-color:#305e92; } 
.mobile-navigation .nav-menu .submenu { display:none; margin:-1px 0 0 0; padding:0 15px 15px; } 
.mobile-navigation .nav-menu .submenu>ul:after { content:""; display:block; clear:both; } 
.mobile-navigation .nav-menu .submenu>ul>li>a { display:block; position:relative; padding:5px 15px; color:#454545; font-size:16px; font-weight:400; line-height:1.3em; } 
.mobile-navigation .nav-menu .submenu>ul>li>a:after { display:block; content:""; position:absolute; top:14px; left:5px; width:4px; height:4px; background:#dfdfdf; border-radius:50%; transition:.3s ease-in-out; } 
.mobile-navigation .nav-menu .submenu>ul>li>a:hover { color:#305e92 } 
.mobile-navigation .nav-menu .submenu>ul>li>a:hover:after { background:#305e92 } 
.mobile-navigation .close { position:absolute; top:20px; right:15px; width:24px; height:24px; 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:#2c2c2c; } 
.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:0.6; z-index:201; } 

html.menu-opened { overflow:hidden; } 
html.menu-opened .mobile-navigation { -ms-transform:translateX(0); transform:translateX(0); } 
html.menu-opened .mobile-overlay { display:block; }