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

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

#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:1260px; margin:0 auto; padding:0 30px;}
.contain:after {content:""; display:block; clear:both;}

/* header */
#header {position:absolute; top:0; left:0; width:100%; background:transparent; z-index:101; background-color:rgba(0,0,0,.2);}
#header .contain {position:relative; max-width:1780px; height:90px; z-index:2;}
#header .sitelogo {position:absolute; display:inline; top:50%; left:80px; margin-top:-22px; z-index:10;}
#header .sitelogo a {display:block; width:216px; height:44px; font-size:0; line-height:0; text-indent:-9999px; background:url('../images/common/logo.png') 0 0 no-repeat; background-size:contain;}

#gnb {position:relative; height:90px; width:100%; z-index:2;}
#gnb > ul {margin-right:110px; display:flex; justify-content:flex-end;}
#gnb > ul > li {padding:0 40px; height:90px; z-index:1;}
#gnb > ul > li:last-child {padding-right:0;}
#gnb > ul > li > a {font-size:19px; line-height:90px; height:90px; display:block; position:relative; text-align:center; color:#fff; font-weight:500; z-index:5;}
#gnb > ul > li:hover > a {color:#0054a6;}

#gnb .submenu {display:none; position:absolute; z-index:1;}
#gnb .submenu ul {display:flex;}
#gnb .submenu ul li {font-size:17px;}
#gnb .submenu ul li a {display:block; text-decoration:none; color:#505050; font-weight:500; line-height:76px; padding:0 28px;}
#gnb .submenu ul li.active a,
#gnb .submenu ul li:hover a {color:#0054a6;}
#gnb > ul > li:hover > a:after {content:""; position:absolute; bottom:0; background:#003946; left:50%; width:40px; height:3px; transform:translateX(-50%); transform:translateX(-50%); z-index:-1;}

#header.header-hover {background-color:#fff; border-bottom:1px solid #dfdfdf;}
#header.header-hover .sitelogo a {background-image:url('../images/common/logo_on.png'); z-index:1;}
#header.header-hover #gnb > ul > li > a {color:#2c2c2c;}
#header.header-hover #gnb > ul > li.active > a,
#header.header-hover #gnb > ul > li:hover > a {color:#0054a6;}

#header.header-active {background-color:#fff; border-bottom:1px solid #dfdfdf;}
#header.header-active .sitelogo a {background-image:url('../images/common/logo_on.png'); z-index:1;}
#header.header-active #gnb > ul > li > a {color:#2c2c2c;}
#header.header-active #gnb > ul > li.active > a,
#header.header-active #gnb > ul > li:hover > a {color:#0054a6;}

.submenu-bg {display:none; position:absolute; top:90px; left:0; width:100%; z-index:2; background:#fff;}

#gnb > ul > li.m1 .submenu {margin-left:-10px;}
#gnb > ul > li.m2 .submenu {right:0; margin-right:20px;}
#gnb > ul > li.m3 .submenu {right:0; margin-right:70px;}
#gnb > ul > li.m4 .submenu {right:0;}

#header.header-hover .btn-m-menu span,
#header.header-hover .btn-m-menu span:before,
#header.header-hover .btn-m-menu span:after,
#header.header-active .btn-m-menu span,
#header.header-active .btn-m-menu span:before,
#header.header-active .btn-m-menu span:after {background-color:#2c2c2c;}

/* for mobile */
.btn-m-menu {display:block; position:absolute; top:0; right:70px; width:90px; height:100%; text-align:center; text-indent:-9999em; z-index:50;}
.btn-m-menu span {position:absolute; right:28px; top:44px; width:34px; height:3px; background:#fff; border-radius:2px;}
.btn-m-menu span:before,
.btn-m-menu span:after {content:" "; position:absolute; right:0; width:34px; height:3px; background:#fff; transition-duration:0.3s, 0.3s; transition-delay:0.3s, 0s; border-radius:2px;}
.btn-m-menu span:before {top:-8px; transition-property:top, transform;}
.btn-m-menu span:after {bottom:-8px; transition-property:bottom, transform;}

.mobile-navigation {display:block; position:fixed; top:0; right:0; width:100%; height:100%; background-color:rgba(0,0,0,.8); overflow:auto; transform:translateX(100%); transition:.3s; z-index:10001;}
.mobile-navigation .inner {display:flex; align-items:center;}
.mobile-navigation .inner-info {font-size:30px; font-weight:700; width:360px; height:100vh; padding-left:100px; padding-top:240px; color:rgba(255,255,255,.5);}
.mobile-navigation .nav-menu {flex:1;}
.mobile-navigation .nav-menu>ul {display:flex;}
.mobile-navigation .nav-menu>ul>li {padding-left:80px; padding-top:240px; width:25%; max-width:350px; height:100vh;}
.mobile-navigation .nav-menu>ul>li:hover > a {color:#fff;}
.mobile-navigation .nav-menu>ul>li>a {font-size:30px; display:inline-block; font-weight:700; color:rgba(255,255,255,.5); line-height:1.3em; margin-bottom:45px; position:relative;}
.mobile-navigation .nav-menu .submenu li {margin-bottom:40px;}
.mobile-navigation .nav-menu .submenu li:last-child {margin-bottom:0;}
.mobile-navigation .nav-menu .submenu li a {display:inline-block; font-size:18px; color:#505050;}
.mobile-navigation .nav-menu .submenu li ul {margin-top:15px;}
.mobile-navigation .nav-menu .submenu li ul li {padding-left:10px; margin-bottom:0;}
.mobile-navigation .nav-menu .submenu li ul li a {font-size:15px; line-height:28px;}
.mobile-navigation .nav-menu .submenu li:hover > a {color:#fff; position:relative;}
.mobile-navigation .nav-menu .submenu li:hover > a:after {position:absolute; content:''; width:100%; height:1px; bottom:-4px; left:0; background-color:#fff;}
.mobile-navigation .close {position:absolute; top:30px; right:100px; width:30px; height:30px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:14px; left:0; width:100%; height:2px; background:#fff;}
.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:.7; z-index:1000;}

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

/* main */
#fp-nav {display:block;}
.fp-tableCell {padding-top:90px;}

.main-intro .fp-tableCell {padding-top:0;}

#leftMenu {position:fixed; top:50%; transform:translateY(-50%); z-index:100; left:30px;}
#leftMenu li {position:relative;}
#leftMenu li a {display:block; width:30px; height:30px; border-radius:50%;}
#leftMenu li a:after {content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:6px; height:6px; background:rgba(255,255,255,.6); border-radius:50%;}
#leftMenu li a.active:after {background-color:#fff; width:8px; height:8px;}

.section {position:relative;}

.main-visual {width:100%; height:100vh; padding-top:90px; position:relative; line-height:0; overflow:hidden; background-size:cover; background-image:url('../images/main/mainvisualBg.jpg'); background-repeat:no-repeat;}
.main-visual .slick-track {z-index:1;}
.main-visual .item {display:block; position:relative; height:900px; background-repeat:no-repeat; background-position:center center; -webkit-background-size:cover; background-size:cover; overflow:hidden;}

.main-visual .thumb {display:flex; align-items:center; height:100vh; margin-top:-100px; width:100%; margin-left:19%; max-width:1460px;}
.main-visual .thumb .pro {order:2; margin:0 70px;}
.main-visual .thumb .pro8 {position:absolute; right:0;}
.main-visual .txt span {font-size:26px; line-height:1.2em; font-weight:600; letter-spacing:-.02em; color:#085597; font-family:'Montserrat', sans-serif;}
.main-visual .txt .tit {font-size:76px; margin:15px 0; line-height:1.2em; font-weight:700; color:#063e9c; letter-spacing:-.02em; font-family:'Montserrat', sans-serif;}
.main-visual .txt p {font-size:28px; line-height:1.429em; font-weight:300; color:#2c2c2c;}

.main-visual .slick-dots {position:absolute; bottom:20%; left:19%; width:100%; z-index:990;}
.main-visual .slick-dots li {position:relative; display:inline-block; padding:0 5px; border:0; background:transparent;}
.main-visual .slick-dots li button {position:relative; width:15px; height:15px; border-radius:50%; font-size:0; border:2px solid transparent; background:transparent; text-indent:-9999px;}
.main-visual .slick-dots li button:after {content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:14px; height:14px; border-radius:50%; background-color:#aaa;}
.main-visual .slick-dots li.slick-active button {border-radius:30px; background-color:#063e9c; width:35px;}
.main-visual .slick-dots li.slick-active button:after {display:none;}

.main-visual .slick-arrow {position:absolute; top:50%; width:36px; height:71px; margin-top:-70px; z-index:98; border:0; font-size:0; line-height:0; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat; background-size:100% 100%;}
.main-visual .slick-prev {left:100px; background-image:url("/images/main/bt_prev.png"); opacity:.5;}
.main-visual .slick-next {right:100px; background-image:url("/images/main/bt_next.png"); opacity:.5;}
.main-visual .slick-prev:hover {opacity:1;}
.main-visual .slick-next:hover {opacity:1;}

.main-visual .item .thumb {position:relative;}

.main-visual-item .pro .main-visual-con,
.main-visual-item .pro .main-visual-con,
.main-visual-item .pro .main-visual-con{
	opacity:0; 
}

.main-visual-item .txt,
.main-visual-item .txt,
.main-visual-item .txt{
	opacity:0; 
}


/* 메인 비주얼 :: active효과 */
.main-visual-item .pro.active-item,
.main-visual-item .pro.active-item,
.main-visual-item .pro.active-item{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.main-visual-item .pro.active-item {-webkit-animation-delay:0.3s; animation-delay:0.3s;}
.main-visual-item .pro.active-item {-webkit-animation-delay:0.9s; animation-delay:0.9s;}
.main-visual-item .pro.active-item {-webkit-animation-delay:1.5s; animation-delay:1.5s;}

.main-visual-item .txt.active-item,
.main-visual-item .txt.active-item,
.main-visual-item .txt.active-item{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.main-visual-item .txt.active-item {-webkit-animation-delay:0.1s; animation-delay:0.1s;}
.main-visual-item .txt.active-item {-webkit-animation-delay:0.5s; animation-delay:0.5s;}
.main-visual-item .txt.active-item {-webkit-animation-delay:1s; animation-delay:1s;}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateX(50px); 
		transform: translateX(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateX(0); 
		transform: translateX(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

.visual-scroll {position:absolute; bottom:55px; left:50%; margin-left:-37px; width:74px; height:72px; z-index:10; line-height:0; animation:pulse 2s infinite;}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } 
}

@keyframes pulse {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } 
}

.main-menu-wrap {height:calc(100vh - 130px); display:flex; flex-direction:column; justify-content:center;}
.main-menu {height:100vh; background-image:url('../images/main/menuBg.jpg'); background-size:cover; background-repeat:no-repeat; z-index:-100;}
.main-menu .top {margin-bottom:65px; text-align:center;}
.main-menu .top p {font-size:20px; line-height:1.5em; letter-spacing:-.04em; font-weight:300;}
.main-menu .top p span {color:#0054a6;}

.m-tit {font-size:48px; margin-bottom:25px; line-height:1.3em; color:#2c2c2c; text-align:center;}
.m-tit span {color:#00bbf2;}

.our-list {display:flex; width:100%; color:#fff; max-width:1920px; justify-content:center; align-items:center; margin:0 auto; color:#fff;}
.our-list li {width:20%; height:589px; position:relative; display:flex; flex-direction:column; justify-content:center;}
.our-list li:after {position:absolute; filter:grayscale(100%); z-index:-1; content:''; width:100%; height:589px; top:0; left:0; background-size:cover; background-repeat:no-repeat;}
.our-list li:nth-child(1):after {background-image:url('../images/main/menu1.jpg');}
.our-list li:nth-child(2):after {background-image:url('../images/main/menu2.jpg');}
.our-list li:nth-child(3):after {background-image:url('../images/main/menu3.jpg');}
.our-list li:nth-child(4):after {background-image:url('../images/main/menu4.jpg');}
.our-list li:nth-child(5):after {background-image:url('../images/main/menu5.jpg');}
.our-list li:hover:after {filter:none;}
.our-list li .tit {font-size:30px; font-weight:700; text-align:center; line-height:1.3em;}
.our-list li a {width:170px; transition:.3s ease-in-out; height:54px; line-height:54px; font-weight:500; text-align:center; display:none; margin:60px auto 0; background:linear-gradient(270deg, rgba(0,84,166,1) 0%, rgba(0,187,242,1) 55%);}
.our-list li:hover a {display:block; margin-top:30px;}

.certi-wrap {display:flex; max-width:1920px; width:100%; margin:0 auto; height:calc(100vh - 50px); vertical-align:middle; align-items:center;}
.certi-wrap .col {width:50%;}
.certi-wrap .top-title {margin-bottom:60px; display:flex; align-items:center;}
.certi-wrap .top-title .cnt {flex:1; padding-left:35px;}
.certi-wrap .top-title .cnt .tit {font-size:32px; margin-bottom:13px; font-weight:700; line-height:1.3em; color:#2c2c2c;}
.certi-wrap .top-title .cnt p {font-size:18px; line-height:1.556em;}
.certi-wrap .top-title .cnt p span {font-weight:500; color:#0054a6;}
.certi-wrap .col-l {padding-left:100px; padding-top:68px;}

.cer-list li {margin-bottom:30px; display:flex; align-items:center;}
.cer-list li .cnt {padding-left:40px;}
.cer-list li .cnt .tit {font-size:18px; font-weight:700; line-height:1.556em; color:#00bbf2;}
.cer-list li .cnt .in {color:#878787; font-weight:300;}
.cer-list li:last-child {margin-bottom:0;}

.main-banner-wrap {display:flex;}
.main-banner-wrap .col {padding:60px 0; height:300px; width:50%; background-size:cover; background-repeat:no-repeat; text-align:center; color:#fff;}
.main-banner-wrap .col-l {background-image:url('../images/main/mbnr1.jpg');}
.main-banner-wrap .col-r {background-image:url('../images/main/mbnr2.jpg');}
.main-banner-wrap .col .tit {font-size:34px; line-height:1.5em; font-weight:700;}
.main-banner-wrap .col .txt {margin:20px 0 25px;}
.main-banner-wrap .col a {width:170px; height:54px; line-height:52px; margin:0 auto; text-align:center; display:block; border:1px solid #fff;}
.main-banner-wrap .col a:hover {background:linear-gradient(270deg, rgba(0,84,166,1) 0%, rgba(0,187,242,1) 55%); border:none;}

.sec-footer .fp-tableCell {padding-top:0;}

/* sub page */
.sub-visual {position:relative; display:table; text-align:center; table-layout:fixed; color:#fff; width:100%; height:520px; background-color:#fff; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; z-index:1;}
.sub-visual .cell {display:table-cell; vertical-align:middle; width:100%; height:100%; padding-top:0;}
.sub-visual h3 {position:relative; font-size:48px; font-weight:800; line-height:1.4em; letter-spacing:-.04em; margin-bottom:15px;}
.sub-visual p {font-size:18px; font-weight:700; line-height:1.4em; letter-spacing:-.04em;}
.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/sv5.jpg");}
.sub-visual.bg4 {background-image:url("../images/common/sv4.jpg");}

.path-wrap {position:relative; z-index:50; color:#2c2c2c; font-weight:400; border:1px solid #dfdfdf;}
.path-wrap .inner {max-width:1200px; margin:0 auto;}
.path-wrap .inner:after {content:""; display:block; clear:both;}
.path-wrap .home {float:left; position:relative; border:1px solid #dfdfdf; border-bottom:0; border-top:0;}
.path-wrap .home a {display:block; width:60px; height:60px; background:url("../images/common/home.png")50% 50% no-repeat; text-indent:-999em; overflow:hidden;}
.path-wrap .part {float:left; position:relative; min-width:250px; z-index:52;}
.path-wrap .part:after {content:" "; position:absolute; top:0; right:0; width:1px; height:100%; background:rgba(255,255,255,0.3);}
.path-wrap .part > a {display:block; position:relative; height:60px; line-height:60px; padding:0 20px; border-right:1px solid #dfdfdf;}
.path-wrap .part > a:after {content:""; position:absolute; top:50%; margin-top:-13px; right:20px; width:26px; height:26px; background:url('../images/common/path_down.png')0 0 no-repeat;}
.path-wrap .part.active {z-index:53;}
.path-wrap .part.active > a:after {background-image:url('../images/common/path_up.png');}
.path-wrap .part ul {display:none; position:absolute; top:61px; left:-1px; right:0; background:#f4f4f4; border:1px solid #dfdfdf; border-top:0; z-index:53;}
.path-wrap .part ul li {color:#2c2c2c; font-size:16px; line-height:1.35em; border-top:1px solid #dfdfdf;}
.path-wrap .part ul li:first-child {border-top:0;}
.path-wrap .part ul li a {display:block; padding:16px 10px 16px 32px;}
.path-wrap .part ul li a:hover {text-decoration:underline; background:#fff;}

#contArea {width:100%; max-width:1260px; margin:0 auto; padding:0 30px;}
#contArea.wide {max-width:none; padding:0;}
.sub-title {text-align:center; padding:130px 0 60px;} 
.sub-title h2 {font-size:36px; color:#2c2c2c; line-height:1.5em; letter-spacing:-.04em; position:relative;}
.sub-title h2:before {width:28px; height:18px; left:50%; margin-left:-14px; top:-20px; position:absolute; content:''; background-image:url('../images/sub/subtit.png'); background-size:contain; background-repeat:no-repeat;}
.real-cont {min-height:200px; _height:350px; padding-bottom:120px;}
.real-cont.type2 {padding-bottom:0;} 

/* footer */
.sec-footer {position:relative;}
#footer {position:relative; width:100%; background:#2c2c2c; z-index:1; padding:40px 0; color:#ccc;}
#footer .contain {position:relative; max-width:1260px;}

.foot-tit {margin-bottom:10px; line-height:1.3em; color:#fff;}

.foot-info {display:flex; justify-content:space-between;align-items:center;}
.foot-info .copy {margin-top:22px; font-size:12px;}
.foot-info address {font-style:normal;}
.foot-info address span {font-size:14px; line-height:1.857em; position:relative; padding-right:25px;}
.foot-logo {order:2;}

.foot-link {position:absolute; top:0; right:0; display:flex;}
.foot-link li {font-size:14px; padding-left:30px; position:relative;}
.foot-link li img {margin:-.2em 5px 0 0; vertical-align:middle;}

.top-btn {position:absolute; right:100px; top:-100px; z-index:1;}

.f-desktop {display:block;}
.f-tablet {display:none;}
.f-mobile {display:none;}