@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;}
.contain:after {content:""; display:block; clear:both;}

/* header */
#header {position:absolute; width:100%; z-index:100; background:rgba(255, 255, 255, 0.35);}
#header .contain {position:relative; height:100px;}
#header.header-hover {background:#fff;}
#header.header-hover #gnb > ul > li > a {color:#2c2c2c;} 
#header.header-hover #gnb > ul > li {color:##1ca1e4;}
#header.header-hover #gnb > ul {color:#1ca1e4; font-weight:500;}
#header.header-hover #gnb > ul > li:after {display:block; width:100%; content:""; border-bottom:2px solid #1ca1e4; transition:transform 250ms ease-in-out; transform:scaleX(0);}
#header.header-hover #gnb > ul > li:hover:after {transform: scaleX(1);}
#header.header-hover #gnb > ul.active {background:#fff; color:#2c2c2c;}

.sitelogo {position:absolute; top:50%; left:0; transform:translateY(-50%); z-index:5;}

#gnb {position:relative; height:100px; text-align:right;}
#gnb > ul {display:inline-block;}
#gnb > ul > li {float:left; position:relative; height:100px; z-index:1; padding:0 40px;}
#gnb > ul > li > a {font-family: 'NanumSquare', sans-serif;display:block; padding:0 10px; height:100px; position:relative; text-align:center; font-size:20px; line-height:100px; font-weight:700; color:#fff; letter-spacing:-0.04em; z-index:5;}
#gnb > ul > li:hover > a {color:#1ca1e4;}
#gnb > ul > li:hover li {color:#1ca1e4;}
#header.header-hover #gnb > ul > li.active > a, 
#header.header-hover #gnb > ul > li:hover > a {color:#1ca1e4;} 

#gnb .submenu {height:0; overflow:hidden; position:absolute; left:0; width:100%; text-align:center; z-index:15;}
#gnb .submenu > ul {position:relative; padding:15px 0;}
#gnb .submenu > ul > li {font-size:16px; line-height:26px;}
#gnb .submenu > ul > li > a {display:block; text-decoration:none; font-weight:400; padding:10px; color:#242424;}
#gnb .submenu > ul > li.active > a,
#gnb .submenu > ul > li:hover > a {color:#1ca1e4;}

.submenu-txt {display:none; position:absolute;  padding:5px;left:350px; top:125px; z-index:2; color:#fff; font-size:20px; font-weight:bold;}
.submenu-txt a { font-family:'NanumSquare', sans-serif; position:relative; display:inline-block; }
.submenu-txt a span {position:relative; display:block; width:100%; height:0; padding-bottom:100%; overflow:hidden;}

.submenu-bg {display:none; position:absolute; top:100px; left:0; width:100%; background-color:rgba(255,255,255,0.7);}

#sub #header {background-color:#fff; position:relative;}
#sub #header #gnb > ul > li > a {color:#242424; font-weight:700;}

 /* main */ 
.main-visual {position:relative; width:100%; min-width:1300px; line-height:0; overflow:hidden; z-index:1;}
.main-visual:before {content:""; position:absolute; top:0; left:0; width:100%; height:200px; background-image:linear-gradient(#000, transparent); opacity:.6; z-index:40;}
.main-visual .item {position:relative; width:100%; z-index:1;}
.main-visual .img {display:block; position:relative; height:980px; background-repeat:no-repeat; background-position:center center; -webkit-background-size:cover; background-size:cover; overflow:hidden;}
.main-visual .txt {position:absolute; top:50%; left:50%; width:1200px; margin-left:-600px; transform:translateY(-50%); text-align:center; z-index:10;}
.main-visual .txt h2 {font-family: 'NanumSquare', sans-serif; font-size:46px; line-height:60px; letter-spacing: 0; color:#fff; }
.main-visual .caption {position:absolute; top: 45%; left: 0; width: 100%; padding: 0 30px; text-align: center; z-index: 45; transform: translateY(-45%); color: #fff;}
.main-visual .caption .m-txt1 {font-size:18px; line-height:1.3em; letter-spacing:0.35em; font-weight:400; /* margin-bottom:15px; */}
.main-visual .caption .middle-txt {font-size:50px; line-height:1.400em; letter-spacing:-.03em; font-weight:600; padding-bottom:15px;}
.main-visual .caption span {font-family:'BMHANNAPro';font-size:36px; line-height:1.3em; letter-spacing:-.03em; font-weight:400; color:#7ec8ed; /* margin-bottom:23px; */}
.main-visual .caption .middle-txt:last-of-type {font-family:'BMHANNAPro';font-size:45px; line-height:1.556em; letter-spacing:-.03em; font-weight:400; /* margin-bottom:40px; */}
.main-visual .caption .m-txt1:last-of-type {font-size:20px; line-height:1.500em; letter-spacing:-.03em; font-weight:400; margin-bottom:45px;}

.main-visual .caption .btn {position:relative;}
.main-visual .caption .btn .icon {position:absolute; top:20px; padding-left:100px;}
.main-visual .caption .btn a {display:inline-block; font-size:18px; background:#1ca1e4; width:230px; height:60px; line-height:55px; text-align:left; padding: 0 55px; border: 1px solid #1ca1e4;}

.caption h4 {position:relative; left:-15px; top:66px; line-height:1.500em; font-size:20px; margin-bottom:50px; font-weight:400;}

.main-visual .slick-dots {position:absolute; bottom:40px; left:0; width:100%; text-align:center; z-index:1;}
.main-visual .slick-dots li {position:relative; display:inline-block; padding:0 15px; border:0; background:transparent;}
.main-visual .slick-dots li button {width:15px; height:15px; background:transparent; border:1px solid #a9b0b1; border-radius:50%; box-sizing:border-box; text-indent:-9999px;}
.main-visual .slick-dots li.slick-active button {background:#a9b0b1; width:15px; height:15px; border-radius:8px; border:1px solid #a9b0b1;}

/* sub */
.sub-visual {position:relative; display:table; table-layout:fixed; width:100%; min-width:1300px; height:300px; background-color:#fff; background-position:50% 50%; background-repeat:no-repeat;}
.sub-visual .cell {display:table-cell; vertical-align:middle; width:100%; height:100%;}
.sub-visual .in {text-align:center;}
.sub-visual h3 {font-family:'NanumSquare', sans-serif; position:relative; font-size:35px; line-height:1.4em; color:#fff; letter-spacing:-1px; margin-top:15px;}
.sub-visual p {font-size:18px; line-height:1.3em; color:#fff; letter-spacing:0.3em; font-weight:400;}
.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");}
.sub-visual.bg5 {background-image:url("../images/common/sv5.jpg");}



.lnb {position:relative; width:100%; min-width:1300px; text-align:center; z-index:1;}
.lnb:after {content:""; position:absolute; bottom:0; left:0; width:100%; height:1px; background:#ddd;}
.lnb .contain {padding:0; width:1200px;}
.lnb ul {position:relative; display:table; table-layout:fixed; width:100%; z-index:2;}
.lnb ul li {position:relative; color:#242424; display:table-cell; vertical-align:middle; max-width:50%; width:auto !important; background:#fff; z-index:1;}
.lnb ul li a {font-weight:bold; display:block; position:relative; width:100%; height:60px; color:#242424; font-family: 'NanumSquare', sans-serif; border:1px solid #ddd; border-right:0; font-size:18px; line-height:58px; z-index:1;}
.lnb ul li a:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; border-right:0;}
.lnb ul li:last-child a {border-right:1px solid #ddd;}
.lnb ul li.active {z-index:2;}
.lnb ul li.active + li a {border-left:0;}
.lnb ul li.active a {border-color:#2a3b5f; background:#2a3b5f; color:#fff;}

.performance-list {display:flex; justify-content:center; margin:0 -10px; margin-bottom:60px;}
.performance-list li {padding:0 10px;}
.performance-list li.active a {background-color:#1ca1e4; color:#fff;}
.performance-list li a {display:block; text-align:center; font-size:20px; font-weight:500; color:#1ca1e4; letter-spacing:-.03em; width:200px; height:60px; line-height:60px; border-radius:30px; border:1px solid #1ca1e4;}

#contArea {width:1200px; margin:0 auto;}
#contArea.wide {max-width:none;} 

.real-cont {padding-bottom:100px;}
.sub-title {text-align:center; padding:55px 0 60px;}
.sub-title h2 {font-size:30px; position:relative;padding-bottom:30px; font-weight:500;}
.sub-title h2:after {content:"";  position:absolute; bottom:-1px; left:50%; margin-left:-25px; width:50px; height:2px; background:#1ca1e4;}


/* footer */
#footer {padding-top:20px; position:relative; width:100%; min-width:1300px; background:#333333; line-height:28px;}
#footer .contain {position:relative; display:flex; color:#cccbcb; font-size:15px; letter-spacing:-.03em; line-height:1.600em; padding-bottom:20px;}
#footer address {font-style:normal; font-weight:300;}
.link-wrap {border-bottom:1px solid #666666;}
.foot-logo {position:absolute; top:50%; left:0; transform:translateY(-50%); z-index:5;}
.foot-info .foot-link {display:inline-block; font-weight:400;}
.foot-info {font-size:14px; color:#cccbcb; padding-top:20px;}
.foot-info div {width:1400px; border-bottom:1px solid #ccc; margin:0 auto;}
.foot-info .foot-link a {margin-right:20px; display:block; font-size:15px; color:#cccbcb;}
.foot-info span {position:relative;}
.foot-info .foot-after {padding-right:25px; font-size:15px; letter-spacing:-.03em; line-height:1.600em;}
/* .foot-info .foot-after:after {content:""; display:block; position:absolute; top:5px; right:0; width:1px; height:12px; background-color:#a3a6a9;} */ 
a.pop_privacy {padding-right:37px;}
.foot-link:after {content: ""; display:block; position:absolute; top:5px; left:125px; width:1px; height:12px; background-color:#a8a5a5; color:#e9e9e9;}
.go-top {position:absolute; right:0; bottom:30px;}

.quickmenu {position:absolute; z-index:1; right:60px;}
.quickmenu .menu {position:relative; color:#fff; text-align:center; border-radius:50%; width:130px; height:130px;}
.quickmenu .menu a {display:block; height:100%; padding-top:35px; padding-bottom:40px;}
.quickmenu .menu.m1 {border:1px solid #830769; background:#830769; margin-bottom:10px;}
.quickmenu .menu.m2 {border:1px solid #008e3b; background:#008e3b;}