@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

#wrapper {position:relative; width:100%; 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;}

.contain {*zoom:1; width:100%; max-width:1460px; margin:0 auto; padding-left:30px; padding-right:30px;}
.contain:after {content:" "; display:block; clear:both;}

/* header */
#header {position:absolute; top:0; left:0; width:100%; z-index:1;}
#header .contain {position:relative; display:flex; max-width:1880px; justify-content:center;}
#header .sitelogo {position:absolute; top:50%; margin-top:-17px; left:30px; z-index:10;}
#header .sitelogo a {width:306px; height:25px; font-size:0; display:block; line-height:0; text-indent:-9999px; background-image:url('../images/common/logo.png'); background-repeat:no-repeat; background-size:contain;}

.language {position:absolute; top:50%; transform:translateY(-50%); right:95px; line-height:1.2em; font-family:'pretendard', sans-serif; letter-spacing:-.01em;}
.language a {font-size:15px; font-weight:500; color:#fff; line-height:1.2em; position:relative; transition:.3s;}
.language a:hover {color:#2b4198;}
.language a:after {position:absolute; content:''; height:2px; background:#2b4198; left:0; bottom:-5px; opacity:0; width:0; transition:.3s;}
.language a:hover:after {width:100%; opacity:1;}

#gnb > ul {margin-left: 200px; position:relative; display:flex;}
#gnb > ul > li {transition:all 0.1s ease-in-out; font-family:'pretendard', sans-serif; position: relative;}
#gnb > ul > li > a {font-size:22px; padding:0 60px; height:100px; color:#fff; letter-spacing:-.01em; text-align:center; display:flex; align-items:center; justify-content:center; position:relative;}

#gnb .submenu {display:none; position:absolute; top:100px; left:0; width:100%; z-index:102; text-align:left;}
#gnb .submenu > ul {width:20%; min-width:220px; padding:50px 0; background-color:#2b4198; transition:all 0.3s ease-in-out;}
#gnb .submenu > ul > li {margin-bottom:40px; position:relative;}
#gnb .submenu > ul > li:last-child {margin-bottom:0;}
#gnb .submenu > ul > li > a {font-size:17px; padding-left:30px; letter-spacing:-.01em; line-height:40px; display:block; position:relative; color:#fff; font-family:'Pretendard'; font-weight: 300;}
#gnb .submenu > ul > li.on > a {background-color:#5069c0;}
#gnb .submenu > ul > li.on ul {display:block;}
#gnb .submenu > ul > li.menu-pos ul {top: auto; bottom: -100px;}
#gnb .submenu > ul > li ul {position:absolute; top:5px; left:220px; width:100%; display:none;}
#gnb .submenu > ul > li ul li {font-size:17px; padding-left:40px; margin-bottom:15px; line-height:1.3em; letter-spacing:-.01em; font-family:'Pretendard';}
#gnb .submenu > ul > li ul li:last-child {margin-bottom:0;}
#gnb .submenu > ul > li ul li:hover a {color:#2b4198; text-decoration:underline;}

#gnb .submenu .slist-wrap {position: absolute; left: 220px; top: 0; display: flex;}
#gnb .submenu .slist-wrap ul {position: relative !important; top: auto !important; left: auto !important; min-width: 200px;}

#header.header-hover {background-color:#fff;}
#header.header-hover .sitelogo a {background-image:url('../images/common/logo_on.png');}
#header.header-hover #gnb > ul > li.active > a,
#header.header-hover #gnb > ul > li:hover > a {color:#0059aa;}
#header.header-hover #gnb > ul > li > a {color:#242424;}
#header.header-hover .language a {color:#242424; font-weight:700;}
#header.header-hover .hd_sitemap span {background-color:#242424;}
#header.header-hover .hd_sitemap span:first-child:after,
#header.header-hover .hd_sitemap span:last-child:after {color:#242424;}

.submenu-bg {display:none; position:absolute; top:100px; left:0; width:100%; background-color:rgba(255,255,255,.85); z-index:90;}
.submenu-bg .submenu-contain {max-width:1400px; margin:0 auto;}
.submenu-bg .cnt {padding:60px 0 0 100px;}
.submenu-bg .cnt h2 {font-size:40px; margin-bottom:7px; line-height:1.2em; letter-spacing:-.04em; color:#242424; font-weight: 400; position:relative; font-family:'pretendard', sans-serif;}
.submenu-bg .cnt p {font-size:20px; line-height:1.2em; font-weight:500; color:#454545;}


/* main */
#fp-nav {display:none;}

.main-visual {position:relative; width:100%; line-height:0; overflow:hidden;}
.main-visual .item {position:relative; width:100%; z-index:1;}
.main-visual .img {display:block; position:relative; height:100vh; background-repeat:no-repeat;background-position:center center;-webkit-background-size:cover; background-size:cover; overflow:hidden;}

.main-visual .slick-arrow {position:absolute; width:23px; height:42px; top:50%; transform:translateY(-50%); z-index:20; border:0; font-size:0; line-height:0; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat; background-size:100% 100%; background-size:contain;}
.main-visual .slick-prev {left:50px; background-image:url("../images/main/mv_prev.png");}
.main-visual .slick-next {right:50px; background-image:url("../images/main/mv_next.png");}

.main-visual .slick-dots {position:absolute; bottom:60px; left:0; width:100%; text-align:center; line-height:0;}
.main-visual .slick-dots li {padding:0 2px; position:relative; display:inline-block; border:0; background:transparent;}
.main-visual .slick-dots li button {position:relative; width:50px; height:3px; font-size:0; border:1px solid transparent; background:transparent; text-indent:-9999px;}
.main-visual .slick-dots li button:after {content:""; position:absolute; top:50%; left:50%; background-color:rgba(255,255,255,.5); transform:translate(-50%,-50%); width:50px; height:3px;}
.main-visual .slick-dots li.slick-active button {background:#fff;}
.main-visual .slick-dots li.slick-active button:after {display:none;}

.main-visual .mv-txt {position:absolute; width:100%; max-width:1500px; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff;}
.main-visual .mv-txt .contain {max-width:1510px;}
.main-visual .mv-txt h2 {font-size:80px; margin-bottom:20px; line-height:1em; letter-spacing:-.01em; font-family:'pretendard', sans-serif;}
.main-visual .mv-txt p {font-size:30px; letter-spacing:-.01em; line-height:1.3em; font-weight:700;}

.main-visual .item1 .mv-txt p,
.main-visual .item1 .mv-txt h2 {padding-left: 50%;}

.main-pad {padding:160px 0;}
.main-pad .contain.wid2 {max-width:1760px;}

.m-tit {margin-bottom:45px;}
.m-tit h2 {font-size:50px; margin-bottom: 5px; line-height:1em; font-family:'pretendard', sans-serif; letter-spacing:-.01em; color:#242424;}
.m-tit h2 strong {font-size: 60px; line-height:.7em; display: block;}
.m-tit p {font-size: 18px; color: #242424; line-height:1.7em;}

.main-sec2 .sec-img {margin-bottom: 50px; position: relative;}
.main-sec2 .sec-img .m-tit {position: absolute; top:-25px; left: 160px;}
.main-sec2 .sec-img .m-tit h2 {margin-bottom: 25px;}

.main-sec2 ul {display:flex; margin: 0 -20px; text-align: center;}
.main-sec2 ul li {padding: 0 20px; width: 33.333%;}
.main-sec2 ul li a {height: 300px; display:flex; justify-content: center; flex-direction: column; position: relative;}
.main-sec2 ul li a:after {position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; border:1px solid #ddd; transition: all 0.2s ease-in-out;}
.main-sec2 ul li a .icon {margin-bottom: 15px;}
.main-sec2 ul li a .cnt span {color: #b8b8b8; letter-spacing: -.01em; line-height:1.2em; display: block;}
.main-sec2 ul li a .cnt strong {font-size: 30px; margin:5px 0 12px; color: #242424; letter-spacing: -.01em; line-height:1em; display: block;}
.main-sec2 ul li a .cnt p {font-size: 17px; color: #686868; letter-spacing: -.01em; line-height:1.412em;}
.main-sec2 ul li:hover a:after {border:5px solid #2b4198; transition: all 0.2s ease-in-out;}

.main-sec3 {position: relative; border-top:1px solid #ddd;}
.main-sec3 .contain {max-width: 1460px;}
.main-sec3 .big-txt {font-size: 130px; position: absolute; top:105px; right:60px; font-family:'pretendard', sans-serif; color: #2b4198; opacity: .05; font-weight: 700; letter-spacing: -.05em; line-height:.8;}	
.main-sec3 ul {margin: 0 -19px; display:flex; color: #fff;}
.main-sec3 ul li {padding: 0 19px; width: 33.3333%;}
.main-sec3 ul li .img {overflow: hidden; position: relative;}
.main-sec3 ul li .img img {transition: all 0.4s ease-in-out;}
.main-sec3 ul li:hover .img img {transform:scale(1.09); transition: all 0.4s ease-in-out;}
.main-sec3 ul li .img:after {background-color: #2b4198; opacity:0; position: absolute; content: ''; top: 0; right: 0; left: 0; bottom: 0; transition: all 0.4s ease-in-out;}
.main-sec3 ul li:hover .img:after {opacity:.7; transition: all 0.4s ease-in-out;}
.main-sec3 ul li:first-child .img {border-top-left-radius:120px; overflow: hidden;}
.main-sec3 ul li:last-child .img {border-bottom-right-radius:120px; overflow: hidden;}
.main-sec3 ul li a {position: relative;}
.main-sec3 ul li a .txt {position: absolute; bottom:35px; left:40px; right: 30px;}
.main-sec3 ul li a .txt .tit {font-size: 30px; margin-bottom: 20px; font-weight: 700; letter-spacing: 0; line-height:1.2em; font-family:'pretendard', sans-serif;}
.main-sec3 ul li a .txt strong {font-size: 23px; margin-bottom: 5px; letter-spacing: -.02em; display: block; line-height:1.2em;}
.main-sec3 ul li a .txt p {font-size: 17px; letter-spacing: -.01em; line-height:1.2em; font-weight: 300;}
.main-sec3 ul li a .txt .icon {position: absolute; top:50%; transform:translateY(-50%); right: 0;}

.main-sec4 {background-color: #f1f1f1;}
.main-sec4 .contain.wid1 {max-width: 1690px; position: relative;}
.main-sec4 .m-tit,
.main-sec4 .items {padding: 0 105px;}
.main-sec4 .item {padding: 0 12px;}
.main-sec4 .item a {padding:30px 35px 85px; display:block; background-color: #fff; position: relative;}
.main-sec4 .item a .date {font-size: 17px; color: #a8a8a8; letter-spacing: -.03em; line-height:1.2em;}
.main-sec4 .item a .title {font-size: 22px; margin:20px 0 30px; font-weight: 600; color: #242424; letter-spacing: -.02em; max-height:2.72em; min-height:2.72em; line-height:1.36em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; text-overflow:ellipsis; overflow:hidden;}
.main-sec4 .item a .in {line-height:1.62em; max-height:4.86em; min-height:4.86em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; word-wrap:break-word; text-overflow:ellipsis; overflow:hidden; color: #686868;}
.main-sec4 .item a .more {position: absolute; bottom:30px; left:35px;}
.main-sec4 .item a .more span {border-bottom:1px solid #686868;}
.main-sec4 .item a:after {opacity: 0; position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; border:3px solid #2b4198; transition: all 0.2s ease-in-out;}
.main-sec4 .item:hover a:after {opacity: 1;}

.main-sec4 .sosik {font-size: 18px; position: absolute; top: 10px; right:150px; font-weight: 500; color: #686868; letter-spacing: -.01em;}

.main-sec4 .slick-arrow {position:absolute; width:80px; height:80px; top:50%; transform:translateY(-50%); z-index:20; border:0; font-size:0; line-height:0; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat; background-size:100% 100%; background-size:contain;}
.main-sec4 .slick-prev {left:0; background-image:url("../images/main/sec4_prev.png");}
.main-sec4 .slick-next {right:0; background-image:url("../images/main/sec4_next.png");}

.main-sec4 .wrap {margin-top:80px; display:flex; color: #fff;}
.main-sec4 .wrap .group {height: 270px; padding: 0 60px; width: 50%; display:flex; background-size:cover; background-repeat:no-repeat;}
.main-sec4 .wrap .group .title {font-size: 40px; margin-bottom: 10px; letter-spacing: -.01em; font-weight: 700; line-height:1em; font-family:'pretendard', sans-serif;}
.main-sec4 .wrap .group p {font-size: 18px; line-height:1.389em;}
.main-sec4 .wrap a.group {flex-direction: column; justify-content: center}
.main-sec4 .wrap div.group {align-items: center}
.main-sec4 .wrap .group .col {width: 50%;}
.main-sec4 .wrap .group .right {padding-left: 50px; flex:1;}
.main-sec4 .wrap .group .right ul li {padding-bottom: 12px; margin-bottom: 40px; border-bottom:1px solid #8d8d8d;}
.main-sec4 .wrap .group .right ul li:last-child {margin-bottom:0;}
.main-sec4 .wrap .group .right ul li a {font-size: 20px; display:flex;align-items: center; justify-content: space-between; font-weight: 600; letter-spacing: -.01em;}



@media(max-width: 1020px) {
	
	.main-pad {width:1000px;}
	
}