@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:100%; max-width:1260px; padding-left:30px; padding-right:30px; margin:0 auto;}
.contain:after {content:""; display:block; clear:both;}

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

/* header */
#header {position:absolute; top:0; left:0; width:100%; padding:0 30px; border-bottom:1px solid rgba(255,255,255,.18); transition:.2s; z-index:100;}
#header .inner {position:relative; max-width:1680px; height:136px; margin:0 auto; z-index:2;}
#header.header-active {background:#002e62}

.header-fixed #header {position:fixed; background:#002e62; border-bottom:0;}

.sitelogo {position:absolute; top:50%; left:0; margin-top:-53px; z-index:2;}

#gnb > ul {display:flex; justify-content:center;}
#gnb > ul > li {position:relative; margin-left:60px;}
#gnb > ul > li:first-child {margin-left:0;}
#gnb > ul > li > a {position:relative; display:flex; align-items:center; justify-content:center; height:136px; color:#fff; font-size:21px; font-weight:500; line-height:1.3em; letter-spacing:0;}
#gnb > ul > li > a:after {content:""; position:absolute; bottom:-10px; left:50%; margin-left:-9px; width:18px; height:10px; background:url("../images/common/gnb_on.png") 50% 100% no-repeat; transition:.2s; opacity:0;}
#gnb > ul > li.active > a {padding-top:2em;}
#gnb > ul > li.active > a:after {bottom:0; opacity:1;}
#gnb .submenu {display:none; position:absolute; left:50%; transform:translateX(-30%)}
#gnb .submenu ul {display:flex;}
#gnb .submenu ul li {padding:0 17px;}
#gnb .submenu ul li a {display:block; color:#2c2c2c; font-size:17px; font-weight:400; line-height:60px; letter-spacing:0; white-space:nowrap;}
#gnb .submenu ul li a:hover {color:#6e2636; text-decoration:underline;}
#gnb > ul > li:first-child .submenu {left:-20px; transform:none;}

.submenu-bg {display:none; position:absolute; left:0; width:100%; height:0; background:#eee;}


/* for mobile */
.btn-m-menu {position:absolute; top:50%; right:0; margin-top:-16px; width:32px; height:32px; background:url("../images/common/menu.png") 50% 50% no-repeat;}

.mobile-navigation {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; overflow:auto; z-index:200;}
.mobile-navigation .wrap {display:flex; height:100%;}
.mobile-navigation .home {width:570px; padding:0 70px 0 120px; display:flex; align-items:center; background:#002e62 url("../images/common/allmenu_bg.png") 125px 50% no-repeat; color:#fff;}
.mobile-navigation .home p {margin-top:70px; font-size:32px; font-weight:500; line-height:1.438em; letter-spacing:-.03em;}
.mobile-navigation .nav-menu {flex:1 1 auto; min-width:0; width:1%; padding-right:120px;}
.mobile-navigation .nav-menu > ul {display:flex; height:100%;}
.mobile-navigation .nav-menu > ul > li {flex:1; padding:25% 40px 30px 59px; border-right:1px solid #dfdfdf;}
.mobile-navigation .nav-menu > ul > li > a {display:block; color:#2c2c2c; font-size:26px; font-weight:600; line-height:1.3em; letter-spacing:-.04em;}
.mobile-navigation .nav-menu > ul > li > a:after {content:""; display:block; margin:20px 0 34px; width:8px; height:8px; background:#6e2636; border-radius:100%;}
.mobile-navigation .submenu > ul > li {margin-bottom:27px;}
.mobile-navigation .submenu > ul > li:last-child {margin-bottom:0;}
.mobile-navigation .submenu > ul > li > a {display:block; color:#505050; font-size:18px; font-weight:400; line-height:1.3em; letter-spacing:-.04em;}
.mobile-navigation .submenu > ul > li > a:hover {color:#6e2636; font-weight:500; text-decoration:underline;}
.mobile-navigation .close {position:absolute; top:58px; right:140px; width:23px; height:23px; background:url("../images/common/close.png") 50% 50% no-repeat; z-index:50;}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:101;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {display:block;}

/* main */
.main-visual {position:relative; overflow:hidden;}
.main-visual .video {height:100vh; overflow:hidden;}
.main-visual .video video {position:absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
	    transform: translate(-50%, -50%);
	object-fit: cover;
}
.main-visual .video:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:#2b343d; opacity:.36;}
.main-visual .caption {position:absolute; top:50%; left:0; width:100%; padding:20px; color:#fff; text-align:center; z-index:40; transform:translateY(-50%);}
.main-visual .caption p {font-size:74px; font-weight:700; line-height:1.2em; transition:.7s .4s ease-in-out; opacity:0; transform:translateY(15px);}
.main-visual .slick-dots {display:flex; align-items:center; justify-content:center; margin-top:30px;}
.main-visual .slick-dots li {margin:0 15px;}
.main-visual .slick-dots li button {display:block; width:16px; height:16px; opacity:.52; background-color:transparent; border:4px solid #fff; border-radius:100%; overflow:hidden; text-indent:-999em; transition:.2s;}
.main-visual .slick-dots li.slick-active button {background:#003083; border-color:#003083; opacity:1; transform:scale(1.25);}
.main-visual .scroll-down {position:absolute; bottom:55px; left:50%; margin-left:-50px; width:100px; padding-top:61px; text-align:center; color:#fff; font-weight:300; font-size:13px; line-height:1em; letter-spacing:0; background:url("../images/main/scroll.png") 50% 0 no-repeat; animation:srollUpDown 1.0s linear infinite alternate; z-index:50;}

@keyframes srollUpDown{
	from{
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}to{
		-moz-transform: translateY(20px);
		-ms-transform: translateY(20px);
		-o-transform: translateY(20px);
		-webkit-transform: translateY(20px);
		transform:translateY(20px);
	}
}
@-webkit-keyframes srollUpDown{
	from{
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}to{
		-moz-transform: translateY(20px);
		-ms-transform: translateY(20px);
		-o-transform: translateY(20px);
		-webkit-transform: translateY(20px);
		transform:translateY(20px);
	}
}

.loaded .main-visual .caption p {transform:translateY(0); opacity:1;}

.main-curriculum {padding:110px 0; text-align:center; background:url("../images/main/emblem.png") 50% 33px no-repeat;}
.main-curriculum .head {margin-bottom:65px;}
.main-curriculum .head h2 {font-size:44px; line-height:1.3em; letter-spacing:-.04em; margin-bottom:55px; margin-top:-7px;}
.main-curriculum .head p {color:#222; font-size:24px; font-weight:300; line-height:1.75em; letter-spacing:-.04em;}
.main-curriculum .head p strong {font-weight:600;}
.main-curriculum .head .c1 {color:#002e62;}
.main-curriculum .head .c2 {color:#6e2636;}
.main-curriculum .cnt ul {display:flex; flex-wrap:wrap;}
.main-curriculum .cnt ul li {width:33.33333333%;}
.main-curriculum .cnt ul li a {display:block; position:relative; overflow:hidden;}
.main-curriculum .cnt ul li .txt-wrap {position:absolute; bottom:0; left:0; width:100%; color:#fff; transition:.2s;}
.main-curriculum .cnt ul li .txt-wrap.type1 {background:rgba(0,46,98,.9);}
.main-curriculum .cnt ul li .txt-wrap.type2 {background:rgba(110,38,54,.9);}
.main-curriculum .cnt ul li .tit {height:92px; display:flex; align-items:center; justify-content:center; padding:0 20px; font-size:22px; font-weight:500; line-height:1.3em; letter-spacing:-.04em;}
.main-curriculum .cnt ul li .txt {display:none;}
.main-curriculum .cnt ul li .bt {display:inline-block; margin-top:30px; width:150px; font-weight:500; line-height:40px; border:1px solid #fff;}
.main-curriculum .cnt ul li a:hover .txt-wrap {padding:48px 20px 35px 20px;}
/* .main-curriculum .cnt ul li a:hover .txt-wrap.type1 {background:rgba(0,46,98);}
.main-curriculum .cnt ul li a:hover .txt-wrap.type2 {background:rgba(110,38,54);} */
.main-curriculum .cnt ul li a:hover .tit {height:auto; padding:0; margin-bottom:15px; font-weight:700;}
.main-curriculum .cnt ul li a:hover .txt {display:block;}

.main-feature {display:flex; position:relative; padding-bottom:70px; color:#fff;}
.main-feature .back {position:absolute; top:60px; left:0; right:0; bottom:120px; background:#002e62; overflow:hidden;}
.main-feature .back:after {content:""; position:absolute; top:0; left:50%; bottom:-5px; right:-5%; background:url("../images/main/holistic2.png") 0 100% no-repeat;}
.main-feature .photo {position:relative; min-width:862px; width:50%;}
.main-feature .photo img {width:100%;}

.main-feature .item.type2 {width:862px !important; height:862px; position:relative; overflow:hidden; border-radius:100%;}
.main-feature .item.type2 img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}





.main-feature .slick-dots {position:absolute; left:120px; bottom:50px; display:flex; align-items:center; justify-content:center; width:302px; height:110px; background:#6e2636;}
.main-feature .slick-dots li {margin:0 15px;}
.main-feature .slick-dots li button {display:block; width:16px; height:16px; opacity:.23; background-color:transparent; border:4px solid #fff; border-radius:100%; overflow:hidden; text-indent:-999em; transition:.2s;}
.main-feature .slick-dots li.slick-active button {background:#fff; opacity:1; transform:scale(1.5);}
.main-feature .cnt {position:relative; width:50%; margin-top:60px; padding:110px;}
.main-feature .cnt h2 {font-size:44px; line-height:1.3em; letter-spacing:-.04em; margin-bottom:35px;}
.main-feature .cnt p {max-width:670px; font-size:20px; font-weight:300; line-height:1.8em; letter-spacing:-.04em;}
.main-feature .cnt .btn {display:flex; align-items:center; justify-content:center; margin-top:90px; width:180px; text-align:center; font-size:18px; font-weight:500; line-height:64px; background:#0054a6;}
.main-feature .cnt .btn:after {content:""; display:inline-block; margin:-.1em 0 0 16px; width:16px; height:16px; background:url("../images/main/plus.png") 50% 50% no-repeat; transition:.2s;}
.main-feature .cnt .btn:hover::after {transform:rotate(90deg)}

.main-value {padding:110px 0;}
.main-value .head {margin-bottom:50px; text-align:center;}
.main-value .head h2 {font-size:44px; line-height:1.3em; letter-spacing:-.04em; margin-top:-7px;}
.main-value .wrap .group {display:flex; background:#6e2636; color:#fff;}
.main-value .wrap .group .img {width:50%;}
.main-value .wrap .group .img img {width:100%;}
.main-value .wrap .group .cnt {width:50%; padding:100px;}
.main-value .wrap .group .cnt .in {position:relative; height:100%; padding-bottom:90px;}
.main-value .wrap .group .cnt h3 {font-size:34px; line-height:1.3em; letter-spacing:-.04em; margin-bottom:18px; margin-top:-7px;}
.main-value .wrap .group .cnt p {max-width:670px; font-size:20px; font-weight:300; line-height:1.8em; letter-spacing:-.04em;}
.main-value .wrap .group .cnt .btn {position:absolute; bottom:0; left:0; display:flex; align-items:center; justify-content:center; width:180px; text-align:center; font-size:18px; font-weight:500; line-height:64px; background:#ad2442;}
.main-value .wrap .group .cnt .btn:after {content:""; display:inline-block; margin:-.1em 0 0 16px; width:16px; height:16px; background:url("../images/main/plus.png") 50% 50% no-repeat; transition:.2s;}
.main-value .wrap .group .cnt .btn:hover::after {transform:rotate(90deg)}
.main-value .wrap .group:nth-child(even) {background:#002e62}
.main-value .wrap .group:nth-child(even) .img {order:2;}
.main-value .wrap .group:nth-child(even) .cnt {display:flex; justify-content:flex-end;}
.main-value .wrap .group:nth-child(even) .cnt .in {width:100%; max-width:640px;}
.main-value .wrap .group:nth-child(even) .cnt .btn {background:#0054a6;}

/* sub */
.sub-visual {display:flex; align-items:center; height:500px; text-align:center; color:#fff; background-color:#ccc; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; overflow:hidden;}
.sub-visual .inner {width:100%; padding:210px 0 0 0;}
.sub-visual h2 {font-size:74px; line-height:1.3em; 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/sv3.jpg");}
.sub-visual.bg4 {background-image:url("../images/common/sv4.jpg");}
.sub-visual.bg5 {background-image:url("../images/common/sv5.jpg");}

.lnb-wrap {text-align:center; background:#002e62;}	
.lnb {max-width:1200px; margin:0 auto; text-align:center;}
.lnb ul li {flex:1; background:url("../images/common/lnb_vline.png") 0 50% no-repeat;}
.lnb ul li:first-child {background:none;}
.lnb ul li a {display:flex; align-items:center; justify-content:center; height:44px; padding:0 15px; color:rgba(255,255,255,.5); font-size:18px; line-height:1.3em; letter-spacing:-.04em;}
.lnb ul li.active a {font-weight:600; background:#fff; color:#002e62;}
.lnb ul li.active a:before {content:""; position:absolute; bottom:0; left:50%; margin-left:-20px; width:40px; height:4px; background:#002e62;}
.lnb ul li.active + li:before {display:none;}

.sub-title {text-align:center; padding:75px 0;}
.sub-title h2 {font-size:38px; line-height:1.3em; letter-spacing:-.04em;}

.real-cont {min-height:300px; padding-bottom:100px;}

/* footer */
#footer {background:#002e62 url("../images/common/footer_bg.jpg") 50% 50% no-repeat; background-size:cover;}
#footer address {font-style:normal;}
#footer .contain {position:relative; max-width:1680px;}

.foot-sites {border-bottom:1px solid rgba(255,255,255,.14); padding:40px 0;}
.foot-sites ul {margin:0 -25px; display:flex; justify-content:space-between;}
.foot-sites ul li {padding:0 25px;}

.foot-info-wrap {display:flex; padding-top:40px; padding-bottom:40px;}
.foot-logo {width:207px;}

.foot-info {flex:1 1 auto; min-width:0; width:1%; color:#bac5da; font-size:15px; line-height:1.4em;}
.foot-info .comp-name {color:#fff; font-size:20px; font-weight:500; line-height:1.4em; letter-spacing:-.04em; margin-bottom:20px;}
.foot-info address span {display:inline-block; margin:0 32px 5px 0;}
.foot-info .copyright {font-size:13px; line-height:1.3em; letter-spacing:-.02em; margin-top:15px;}

.foot-links {margin-top:50px;}
.foot-links ul {display:flex;}
.foot-links ul li {margin-left:30px;}
.foot-links ul li a {display:block; color:#fff; font-size:14px; line-height:1.4em;}
.foot-links ul li a:before {content:""; display:inline-block; vertical-align:middle; margin:-.2em 4px 0 0; width:17px; height:17px; background:url("../images/common/icon_doc.png") 50% 50% no-repeat;}


.scroll-top {position:absolute; right:30px; top:-30px; width:80px; height:64px; z-index:55; color:#fff; font-size:12px; font-weight:700; line-height:1em; text-align:center; padding:20px 0; background:#ad2442;}
.scroll-top:before {content:""; display:block; width:0; height:0; margin:0 auto 7px; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid #fff;}