@charset "utf-8"; /* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */
#wrapper { position:relative; overflow:hidden; } 
#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 } 

/* header */
#header { position:absolute; z-index:90; left:0; top:0; right:0; transition:.3s; } 
#header:hover { background-color: #fff; } 
#header .contain { height:100px; max-width:1820px; } 
#header .sitelogo { position:absolute; top:29px; left:30px; z-index:2 } 
#header .sitelogo a { display:block; } 
#header .sitelogo a img.on { display:none; } 
#header:hover .sitelogo a img.on { display:block; } 
#header:hover .sitelogo a img.off { display:none; } 
#header:hover #gnb>ul>li>a { color: #242424; } 
#header:hover .btn-m-menu span,
#header:hover .btn-m-menu span:before,
#header:hover .btn-m-menu span:after { background-color: #242424; } 

#gnb { padding-right:150px; } 
#gnb>ul { display:flex; justify-content:flex-end; margin:0 -45px; } 
#gnb>ul>li { position:relative; text-align:center; padding:0 40px; } 
#gnb>ul>li>a { position:relative; display:inline-block; color:#fff; font-size:20px; line-height:100px; font-weight:600; } 
#gnb>ul>li:hover>a:after { content:""; width:66px; height:2px; background-color:#002060; position:absolute; left:50%; bottom:0; transform:translateX(-50%); } 

#gnb .submenu { position:absolute; top:100px; left:0; width:100%; height:0; overflow:hidden; z-index:20; } 
#gnb .submenu ul { display:block; padding:25px 0 75px; } 
#gnb .submenu ul li { padding:0; text-align:center; margin-bottom:15px; } 
#gnb .submenu ul li:last-child { margin-bottom:0; } 
#gnb .submenu ul li a { display:inline-block; font-size:17px; line-height:1.647em; position:relative; } 
#gnb .submenu ul li a:after { content:''; width:0; height:1px; background-color: #002060; opacity:0; transition:.3s; position: absolute; left:50%; bottom:3px; } 
#gnb .submenu ul li a:hover { color:#002060; } 
#gnb .submenu ul li a:hover:after { width:100%; left:0; opacity:1; } 

.submenu-bg { background-color:#fff; border-top:1px solid #ddd; display:none; } 

#quick { position:fixed; right:20px; top:50%; transform:translateY(-50%); z-index:100; transition:.3s; } 
#quick .q-btn { display:block; width:40px; height:40px; border-radius:50%; background: #002060 url('../images/common/quick_arr1.png')no-repeat 50% 50%/10px; position: absolute; left:-50px; top:50%; transform:translateY(-50%); transition:.3s; display:none; } 
#quick .q-btn.active { background-image:url('../images/common/quick_arr2.png'); } 
#quick .quick { width:180px; } 
#quick .quick .box { display:flex; justify-content:center; align-items:center; color: #fff; font-size:15px; height:44px; background-color: #002060; } 

/* #quick .quick .box.kakao { border-radius:5px; background-color: #252525; margin-bottom:10px; } 
#quick .quick .box.kakao span { position:relative; padding-left:35px; } 
#quick .quick .box.kakao span:before { content:''; width:22px; height:20px; background:url('../images/common/ic_kakao.png')no-repeat 0% 50%/contain; position: absolute; left:0; top:6px; } */

#quick .quick .box.sns { border-radius:5px; background-color: #252525; margin-bottom:10px; 
    /* justify-content: flex-start; padding: 0 30px;  */
} 
#quick .quick .box.sns span { position:relative; padding-left:35px; } 
#quick .quick .box.sns span:before { content:''; width:22px; height:20px; position: absolute; left:0; top:6px; background-position: 0 50%; background-size: contain; background-repeat: no-repeat; } 

#quick .quick .box.sns span.online:before { background-image:url('../images/common/ico_online.png'); } 
#quick .quick .box.sns span.tel:before { background-image:url('../images/common/ico_tell.png'); } 

#quick .quick .box.sns span.kakao:before { background-image:url('../images/common/ic_kakao.png'); } 

#quick .quick .box-wrap { border-radius:5px; overflow:hidden; } 
#quick .quick .box-wrap .inner { border-left:1px solid #ddd; border-right:1px solid #ddd; } 
#quick .quick .box-wrap ul { padding:10px; background-color: #fff; } 
#quick .quick .box-wrap ul li { font-size:12px; line-height:1.2em; border-bottom:1px solid #ddd; margin-bottom:7px; padding-bottom:7px; } 
#quick .quick .box-wrap ul li:last-child { padding-bottom:0; margin-bottom:0; border-bottom:none; } 
#quick .quick .box-wrap ul li a .date { color: #878787; margin-bottom:5px; } 
#quick .quick .box-wrap ul li a .tt { color: #242424; display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width:100%; } 

#quick .sns-wrap {display: flex; justify-content: center;margin-top: 10px;}
#quick .sns-wrap a {display: block;}
#quick .sns-wrap a:first-child {margin-right: 10px;}

.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; overflow:hidden; } 
.main-visual .item { position:relative; height:100vh; background-repeat:no-repeat; background-size:cover; background-position:50% 50%; } 
.main-visual .slick-arrow { width:75px; height:75px; border-radius:50%; border:2px solid #fff; background-repeat:no-repeat; background-size:14px; background-position:50% 50%; position: absolute; top:50%; transform:translateY(-50%); z-index:2; transition:.3s; opacity:.5; font-size:0; background-color:transparent; } 
.main-visual .slick-arrow:hover { opacity:1; } 
.main-visual .slick-prev { background-image:url('../images/main/vis_prev.png'); left:80px; } 
.main-visual .slick-next { background-image:url('../images/main/vis_next.png'); right:80px; } 

.main-visual .tt-wrap { width:100%; padding:0 200px; text-align:center; color: #fff; z-index:1; position: absolute; left:0; top:50%; transform:translateY(-50%); } 
.main-visual .tt-wrap .tt { font-size:60px; font-weight:700; line-height:1.4em; margin-bottom:10px; } 
.main-visual .tt-wrap .eng { font-size:30px; line-height:1.4em; } 

.main-visual .scroll { position:absolute; bottom:60px; left:50%; transform:translateX(-50%); text-align:center; z-index:50; animation:move_up_down 2s linear infinite; } 
@keyframes move_up_down { 0%,100% { transform:translate(-50%, 0); } 
 50% { transform:translate(-50%, 15px); } 
 }
.section { padding:120px 0 110px; } 
.sec-tit { font-size:44px; color: #242424; line-height:1.2em; text-align:center; margin-bottom:20px; } 
.sec-tt { text-align:center; margin-bottom:55px; } 
.ex-list { display:flex; flex-wrap:wrap; margin:0 -20px -40px; } 
.ex-list li { width:50%; padding:0 20px; margin-bottom:40px; } 
.ex-list li a { display:block; border:1px solid #ddd; padding:40px; position:relative; } 
.ex-list li a:after { content:''; width:60px; height:60px; background:#cacaca url('../images/common/ex_arr.png')no-repeat 50% 50%/11px; position: absolute; right:0; bottom:0; transition:.3s; } 
.ex-list li a:hover:after { background-color:#002060; } 
.ex-list li a .head { display:flex; margin-bottom:20px; } 
.ex-list li a .head .img { max-width:140px; width:100%; margin-right:40px; } 
.ex-list li a .head .tit-wrap { min-width:0; width:1%; flex:1 1 auto; } 
.ex-list li a .head .tit-wrap .sub-tit { line-height:1.4em; margin-bottom:10px; } 
.ex-list li a .head .tit-wrap .tit { color: #242424; font-weight:700; font-size:36px; line-height:1.2em; margin-bottom:10px; display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width:100%; } 
.ex-list li a .head .tit-wrap .tags { display:flex; flex-wrap:wrap; margin-bottom:-3px; } 
.ex-list li a .head .tit-wrap .tags .tag { padding:2px 10px; border-radius:15px; background-color: #0066b3; color: #fff; line-height:1.4em; margin-right:10px; margin-bottom:3px; } 
.ex-list li a .head .tit-wrap .tags .tag:last-child { margin-right:0; } 
.ex-list li a .info dl { display:flex; margin-bottom:10px; } 
.ex-list li a .info dl:last-child { margin-bottom:0; } 
.ex-list li a .info dl dt { font-size:20px; color: #242424; font-weight:500; position:relative; padding-left:18px; min-width:180px; } 
.ex-list li a .info dl dt:before { content:''; width:6px; height:6px; border-radius:50%; background-color: #002060; position: absolute; left:0; top:12px; } 
.ex-list li a .info dl dd { min-width:0; width:1%; flex:1 1 auto; } 
.sec1 .btn-more { width:300px; height:64px; border:1px solid #6679a0; padding-left:24px; font-size:18px; color: #002060; display:flex; align-items:center; position:relative; margin:60px auto 0; } 
.sec1 .btn-more:after { content:''; width:7px; height:11px; background:url('../images/main/sec1_link.png')no-repeat 100% 50%/contain; position: absolute; right:24px; top:50%; transform:translateY(-50%); } 

.sec2 { background:url('../images/main/sec2_bg.jpg')no-repeat 50% 50%/cover; } 
.sec2 .sld { position:relative; } 
.sec2 .sld .slick-list { overflow:visible; } 
.sec2 .sld .items { margin:0 -50px; } 
.sec2 .sld .items .item { padding:0 50px; opacity:.5; transition:.3s; } 
.sec2 .sld .items .item .img { border-radius:12px 12px 0 0; overflow:hidden; } 
.sec2 .sld .items .item .tt-wrap { background-color: #fff; padding:35px 30px 0; min-height:180px; } 
.sec2 .sld .items .item .tt-wrap .tit { color: #242424; font-weight:700; font-size:24px; line-height:1.4em; margin-bottom:15px; } 
.sec2 .sld .items .item .tt-wrap .tt { color: #686868; } 
.sec2 .sld .items .item.slick-active { opacity:1; } 

.sec2 .sld .slick-arrow { font-size:0; border:none; background-color:transparent; position: absolute; top:50%; transform:translateY(-50%); z-index:1; width:80px; height:80px; border-radius:50%; background-color: #fff; transition:.3s; background-repeat:no-repeat; background-position:50% 50%; background-size:34px; } 
.sec2 .sld .slick-arrow:hover { background-color: #002060; } 
.sec2 .sld .slick-prev { background-image:url('../images/main/sec2_prev.png'); left:-90px; } 
.sec2 .sld .slick-next { background-image:url('../images/main/sec2_next.png'); right:-90px; } 
.sec2 .sld .slick-prev:hover { background-image:url('../images/main/sec2_prev_on.png'); } 
.sec2 .sld .slick-next:hover { background-image:url('../images/main/sec2_next_on.png'); } 

.sec3 ul { display:flex; margin:0 -20px; } 
.sec3 ul li { width:33.3333%; padding:60px 20px; text-align:center; border-right:1px solid #ddd; } 
.sec3 ul li:last-child { border-right:0; } 
.sec3 ul li a { display:inline-block; } 
.sec3 ul li .ic { width:100px; height:100px; background:#f8f8f8 url('../images/main/sec3_ic1.png')no-repeat 50% 50%/45px; border-radius:5px; margin:0 auto 40px; transition:.3s; } 
.sec3 ul li .tit { font-size:24px; color: #242424; line-height:1.4em; font-weight:600; } 
.sec3 ul li.type2 .ic { background-image:url('../images/main/sec3_ic2.png'); } 
.sec3 ul li.type3 .ic { background-image:url('../images/main/sec3_ic3.png'); } 
.sec3 ul li a:hover .ic { background-image:url('../images/main/sec3_ic1_on.png'); background-color: #0066b3; } 
.sec3 ul li.type2 a:hover .ic { background-image:url('../images/main/sec3_ic2_on.png'); } 
.sec3 ul li.type3 a:hover .ic { background-image:url('../images/main/sec3_ic3_on.png'); } 

.section.sec4 { padding-top:0; } 
.sec4 ul { display:flex; flex-wrap:wrap; margin:0 -10px -60px; } 
.sec4 ul li { width:20%; padding:0 10px; margin-bottom:60px; } 

.section.sec5 { padding-top:0; } 
.sec5 ul { display:flex; } 
.sec5 ul li { width:50%; display:flex; justify-content:space-between; flex-direction:column; align-items:flex-start; padding:45px 50px 60px; color: #fff; background-color: #002060; position:relative; } 
.sec5 ul li:after { content:''; width:60px; height:58px; background:url('../images/main/sec4_ic1.png')no-repeat 100% 50%/contain; position: absolute; right:50px; bottom:50px; } 
.sec5 ul li .wrap .tit { font-size:36px; font-weight:700; line-height:1.2em; margin-bottom:15px; } 
.sec5 ul li .wrap { margin-bottom:70px; } 
.sec5 ul li a { display:inline-block; position:relative; padding-right:36px; font-size:16px; } 
.sec5 ul li a:after { content:''; width:7px; height:11px; background:url('../images/main/link_arr_on.png')no-repeat 50% 50%/contain; position: absolute; right:0; top:10px; } 
.sec5 ul li a:before { content:''; width:100%; height:1px; background-color:rgba(255,255,255,.5); position: absolute; left:0; bottom:0; } 
.sec5 ul li.type2 { background-color: #f4f4f4; color: #454545; } 
.sec5 ul li.type2 .wrap .tit { color: #242424; } 
.sec5 ul li.type2 a:after { background-image:url('../images/main/link_arr.png'); } 
.sec5 ul li.type2 a:before { background-color: #a2a2a2; } 
.sec5 ul li.type2:after { background-image:url('../images/main/sec4_ic2.png'); } 

.inq-pop .fancybox-skin { border-radius:5px; overflow:hidden; } 
.inq-pop .pop_wrap { padding-bottom:60px; } 
.inq-pop h2 { background-color:#002060; text-align:center; font-size:20px; font-weight:500; height:64px; display:flex; align-items:center; justify-content:center; color: #fff; } 
.inq-pop .fancybox-close { top:17px; right:20px; width: 30px; height: 30px; background:url('../images/common/pop_close.png')no-repeat 50% 50%/contain; } 
.inq-pop .board-form table { border-top:0; } 
.inq-pop .buttons { margin:0; } 

.btn-pack.my-btn { width:180px; height:50px; display:flex; justify-content:center; align-items:center; color: #fff; font-weight:500; border-radius:5px; margin:0 auto !important; } 

/* sub page */
.sub-visual { position:relative; height:480px; z-index:10; overflow:hidden; } 
.sub-visual .tt-wrap { width:100%; position: absolute; top:50%; transform:translateY(-50%); z-index:1; text-align:center; } 
.sub-visual .tt-wrap .tit { text-align:center; color: #fff; font-size:48px; line-height:1.2em; font-weight:700; margin-bottom:20px; } 
.sub-visual .tt-wrap .path { display:flex; justify-content:center; align-items:center; } 
.sub-visual .tt-wrap .path p { padding:0 23px; position:relative; font-size:16px; color:rgba(255,255,255,.6); } 
.sub-visual .tt-wrap .path p:before { content:''; width:6px; height:11px; background:url('../images/common/path_arr.png')no-repeat 50% 50%/contain; position: absolute; left:-3px; top:10px; } 
.sub-visual .tt-wrap .path p:first-child:before { display:none; } 
.sub-visual .background { position:absolute; top:0; left:0; width:100%; height:100%; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; } 

#lnb { position:relative; margin-top:-64px; z-index:12; background-color:rgba(0,0,0,.6); } 
.lnb { max-width:1400px; width:100%; margin:0 auto; } 
.lnb ul { display:flex; } 
.lnb ul li { flex:1; width:auto; } 
.lnb ul li a { height:64px; display:flex; justify-content:center; align-items:center; color: #fff; font-weight:500; text-align:center; line-height:1.3em; } 
.lnb ul li.active a { background-color: #fff; color: #242424; } 

.sub-title { text-align:center; margin:90px 0 60px; } 
.sub-title h2 { color: #242424; font-size:40px; font-weight:700; line-height:1.2em; } 

.real-cont { padding:0 0 100px; } 
.real-cont.type2 { padding-bottom:0; } 

/* footer */
#footer { background-color: #1a1a1a; color: #fff; } 
#footer .foot-top { padding:20px 0; border-bottom:1px solid rgba(255,255,255,.3); } 
#footer .foot-top .foot-menu { display:flex; margin:0 -25px; } 
#footer .foot-top .foot-menu li { padding:0 25px; font-size:15px; } 
#footer .foot-btm { padding:35px 0 55px; } 
#footer .foot-btm .contain { display:flex; } 
#footer .foot-btm .foot-logo { min-width:195px; } 
#footer .foot-btm .foot-info { min-width:0; width:1%; flex:1 1 auto; max-width:610px; } 
#footer .foot-btm .foot-info address { font-style:normal; display:flex; flex-wrap:wrap; margin:0 -22px -7px; } 
#footer .foot-btm .foot-info address p { font-size:14px; line-height:1.4em; padding:0 22px; margin-bottom:7px; } 
#footer .foot-btm .foot-info .copy { font-size:14px; line-height:1.2em; margin-top:25px; color: #909090; } 
#footer .foot-btm .foot-info .copy span { margin-right:40px; } 
#footer .foot-btm .foot-info .copy a { display:inline-block; } 
#footer .foot-btm .scroll-top { position: absolute; right:40px; top:0; display:flex; justify-content:center; align-items:center; width:60px; height:60px; border:1px solid rgba(255,255,255,.3); } 
#footer .foot-btm .scroll-top span { font-size:14px; display:inline-block; color: #909090; line-height:1em; padding-top:16px; position:relative; } 
#footer .foot-btm .scroll-top span:before { content:''; width:16px; height:8px; background:url('../images/common/foot_top.png')no-repeat 50% 50%/contain; position: absolute; left:50%; top:0; transform:translateX(-50%); } 



/* for mobile */
.only-mobile { display:none; } 
.btn-m-menu { display:block; position:absolute; top:50%; margin-top:-11px; right:30px; width:27px; height:23px; 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:3px; width:27px; background:#fff; } 
.btn-m-menu span:before,
.btn-m-menu span:after { content:" "; position:absolute; right:0; width:27px; height:3px; background:#fff; 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:nth-child(2) a:after { display:none; } 
.mobile-navigation .nav-menu>ul>li.active>a { color:#002060 } 
.mobile-navigation .nav-menu>ul>li.active>a:after { transform:translateY(-35%) rotate(-135deg); border-color:#002060; } 
.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:#002060 } 
.mobile-navigation .nav-menu .submenu>ul>li>a:hover:after { background:#002060 } 
.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; }