@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 } 

/* header */
#header { position:relative; width:100%; background:#fff; border-bottom:1px solid #ddd; z-index:100; } 
#header .contain { position:relative; display:flex; align-items:center; justify-content:space-between; height:100px; z-index:10; } 

#gnb { text-align:center; flex:1 1 auto; min-width:0; width:1%; } 
#gnb>ul { display:flex; justify-content:flex-end; margin: 0 -55px; } 
#gnb>ul>li { position:relative; padding:0 55px; } 
#gnb>ul>li>a { position:relative; display:flex; align-items:center; flex-direction: column; justify-content:center; height:100px; color:#242424; letter-spacing:-.03em; line-height:1.5em; font-size: 20px; font-weight: 600; } 
#gnb .submenu { position:absolute; left:0; width:100%; height:0; overflow:hidden; text-align:center; } 
#gnb .submenu>ul { padding:16px 5px } 
#gnb .submenu>ul>li>a { display:block; color:#fff; font-size:16px; line-height: 2.625em; } 
#gnb .submenu>ul>li>a:hover { text-decoration:underline; } 

.submenu-bg { display:none; position:absolute; width:100%; left:0; background:#081330; opacity: .9; } 

.contain { position:relative; max-width:1260px; padding-left:30px; padding-right:30px; margin:0 auto; } 
#contArea { max-width:1260px; padding-left:30px; padding-right:30px; margin:0 auto; } 
#contArea.wide { max-width:100%; padding-left:0; padding-right:0; } 


/* main */
[data-aos=fade-up] { transform: translate3d(0,100px,0); } 

.main-visual { position:relative; height:820px; overflow:hidden; color:#fff; text-align:center; } 
.main-visual .item { position:relative; height:820px; overflow:hidden; } 
.main-visual .image { position:relative; height:820px; overflow:hidden; transition:5s; transform:scale(1.1); } 
.main-visual .image img { position:absolute; top:50%; left:0; 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-visual .caption { position:absolute; top:50%; transform:translateY(-50%); width:100%; z-index:40; } 
.main-visual .caption .t1 { font-size:45px; font-weight:700; line-height:1.2em; letter-spacing:-0.03em; opacity: 0; transform: translateY(50px); transition: 1.4s; text-shadow: 2px 3px 20px rgba(0, 0, 0, 0.5); } 
.main-visual .caption .text-hidden { position: relative; padding: 60px 50px; width: 44%; margin: 0 auto; } 
.main-visual .caption .text-hidden:before, 
.main-visual .caption .text-hidden:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 60px; border: 10px solid #eeeeee; opacity: 0; transform: translateY(50px); transition: 1.4s; } 
.main-visual .caption .text-hidden:before { top: 0; bottom: auto; border-bottom: none !important; } 
.main-visual .caption .text-hidden:after { top: auto; bottom: 0; border-top: none !important; } 
.main-visual .slick-arrow { position:absolute; top:50%; transform:translateY(-50%); width:34px; height:66px; background:url("../images/main/slide-btn.png") no-repeat 50% 50%/contain; border:0; overflow:hidden; text-indent:-9999em; line-height:0; font-size:0; z-index:50; } 
.main-visual .slick-arrow:hover { background:url("../images/main/slide-btn-on.png") no-repeat 50% 50%/contain; transform: rotate(180deg) translateY(50%); } 
.main-visual .slick-prev { left:50px; } 
.main-visual .slick-next { right:50px; transform: rotate(180deg) translateY(50%); } 
.main-visual .slick-next:hover { transform: rotate(0) translateY(-50%); } 
.main-visual .slick-dots { position:absolute; bottom:50px; left:0; width:100%; text-align:center; line-height:0; z-index:50; } 
.main-visual .slick-dots li { display:inline-block; margin: 0 7px; } 
.main-visual .slick-dots li button { position:relative; display:block; width:15px; height:15px; background:#fff; border: none; opacity: 1; border-radius:100%; overflow:hidden; text-indent:-9999em; transition:.2s; } 
.main-visual .slick-dots li button:before { content:""; position:absolute; top:50%; left:50%; margin:-4px 0 0 -4px; width:8px; height:8px; border-radius:100%; } 
.main-visual .slick-dots .slick-active button { background: #081330; } 
.main-visual .active .image { transform:scale(1); } 
.main-visual .active .caption p { opacity: 1; transform: translateY(0); transition-delay: .6s; } 
.main-visual .active .caption .text-hidden:before { opacity: .35; transform: translateY(0); transition-delay: .4s; } 
.main-visual .active .caption .text-hidden:after { transition-delay: .8s; opacity: .35; transform: translateY(0); } 

@media (max-width: 1920px){
 .main-visual,
.main-visual .item,
.main-visual .image { height:680px; } 
 }

 .section .group-flex { display: flex; justify-content: space-between; } 
.section { padding: 100px 0; } 
.section .m-head.type2 { margin-bottom: 28px; text-align: left; } 
.section .m-head.type2 h2 { font-size: 30px; } 
.section .m-head { margin-bottom: 50px; color: #242424; text-align: center; } 
.section .m-head p { font-family: 'Titillium Web'; line-height: 1.875em; } 
.section .m-head h2 { font-size: 40px; line-height: 1em; } 

.sec1 .notice-area { width: 59%; } 
.sec1 .notice-area .m-head.type2 { position: relative; } 
.sec1 .notice-area .m-head.type2 .more-notice { position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 21px; height: 21px; background-image: url(../images/main/more.png); background-position: 100%; background-size: contain; background-repeat: no-repeat; } 
.sec1 .notice-area .m-head.type2 .more-notice:hover { background-image: url(../images/main/more-on.png); } 
.sec1 .notice-list ul { border-top: 1px solid #454545; } 
.sec1 .notice-list ul li a { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #ddd; } 
.sec1 .notice-list ul li .date { padding: 0 20px; text-align: center; } 
.sec1 .notice-list ul li .date .day { font-size: 25px; font-weight: 600; color: #060a25; } 
.sec1 .notice-list ul li .date .month { font-size: 14px; color: #454545; line-height: 1.429em; } 
.sec1 .notice-list ul li .tit { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding: 0 10px; } 
.sec1 .insta-area { width: 39%; padding-left: 50px; } 
.sec1 .insta-area .slider { position:relative; margin: -20px; } 
.sec1 .insta-area .swiper-container { padding: 20px; } 
.sec1 .insta-area .swiper-container .thumb { position: relative; padding-bottom: 84%; } 
.sec1 .insta-area .swiper-container .thumb 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; box-shadow: 2px 3px 20px 0px rgba(0, 0, 0, 0.3); } 
.sec1 .insta-area .slider .link { display:block; } 
.sec1 .insta-area .slider .swiper-pagination-bullet { width: 13px; height: 13px; background: #ddd; margin: 0 5px; opacity: 1; border: 2px solid #fff; border-radius: 100%; } 
.sec1 .insta-area .slider .swiper-pagination-bullet-active { background: #177ab8; border: 4px solid #177ab8; } 
.sec1 .insta-area .swiper-pagination { top: -35px; right: 20px; margin: 0 -5px; } 

.sec2 { position: relative; overflow: hidden; } 
.sec2::before { content: "world"; position: absolute; top: -40px; left: 0; font-family: 'Titillium Web'; font-weight: 700; font-size: 190px; opacity: 0.07; text-transform: uppercase; color: #177ab8; line-height: 1em; letter-spacing: -0.03em; } 
.sec2::after { content: "academy"; position: absolute; bottom: -30px; right: 0; font-family: 'Titillium Web'; font-weight: 700; font-size: 190px; opacity: 0.07; text-transform: uppercase; color: #177ab8; line-height: 1em; letter-spacing: -0.03em; } 
.sec2.bg { background-color: #f8f8f8; } 
.sec2 .slider { position:relative; } 
.sec2 .slider .swiper-container { padding: 15px; margin:-15px; } 
.sec2 .slider .link { display:block; box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.3); } 
.sec2 .slider .link .thumb { position: relative; padding-bottom: 76%; } 
 .sec2 .slider .link .thumb 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; } 
.sec2 .slider .link .txt-wrap { padding: 20px 30px; background-color: #fff; } 
.sec2 .slider .link .txt-wrap .date { color: #d5d5d5; font-size: 15px; line-height: 2em; margin-bottom: 10px;transition: 0.3s; } 
.sec2 .slider .link .txt-wrap .tour { position: relative; } 
.sec2 .slider .link .txt-wrap .tour::after { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 20px; height: 20px; background: url(../images/main/more-guide.png) no-repeat 100%/contain; } 
.sec2 .slider .link .txt-wrap .tour .tit { color: #242424; font-size: 20px; line-height: 1.5em; transition: 0.3s;} 
.sec2 .slider .link .txt-wrap .tour .guide { font-size: 16px; line-height: 1.875em; transition: 0.3s; } 
.sec2 .slider .link .txt-wrap:hover { background-color: #060a25; color: #fff; } 
.sec2 .slider .link .txt-wrap:hover .tit { color: #fff; } 
.sec2 .slide-btn { position:absolute; top:50%; transform:translateY(-50%); border:0; width: 60px; height: 60px;; background:url("../images/main/guide-slide-btn.png") no-repeat 50% 50%/contain; margin-top: -60px; transition: 0.3s;} 
 .sec2 .slide-btn:hover { background:url("../images/main/guide-slide-btn-on.png") no-repeat 50% 50%/contain; transform: rotate(180deg) translateY(50%); } 
 .sec2 .slide-btn.prev { left:-110px; } 
 .sec2 .slide-btn.prev:hover { transform:translateY(-50%) scaleX(-1) } 
 .sec2 .slide-btn.next { right:-110px; transform:translateY(-50%) scaleX(-1) } 
 .sec2 .slide-btn.next:hover { transform: translateY(-50%); } 

 .btn-more { padding: 10px 5px; border: 1px solid #177ab8; width: 160px; margin: 50px auto 0; display: block; background: none; text-align: center; transition: .3s; background-color: transparent; color: #177ab8; letter-spacing: -0.02em; line-height: 1.875em; } 
.btn-more:hover { background-color: #177ab8; color: #fff; } 


.sec3 .apply-area { width: 46%; margin-right: 40px; } 
.sec3 .apply-area .necess { color: #fd8239; font-weight:600; } 
.sec3 .apply-area .con .wrap .row { margin-bottom:25px; } 
.sec3 .apply-area .con .wrap .row:last-child { margin-bottom:0; } 
.sec3 .apply-area .con .wrap label { font-size: 18px; line-height: 1em; font-weight:500; letter-spacing:-.03em; margin-bottom:13px; display:inline-block; } 
.sec3 .apply-area .con .wrap select { display: block; } 
.sec3 .apply-area .con .wrap select.input { padding-right: 30px; background: #fff url(/images/bbs/select.png) right 14px center no-repeat; } 
.sec3 .apply-area .check { margin-top: 20px; font-size: 15px; font-weight: 300; line-height: 1.333em; margin-bottom: 0 !important; } 
.sec3 .apply-area .btn-more { margin-top: 20px; margin-right: 0; width: 120px; height: 45px; padding: 5px; } 
.sec3 .apply-area .con .wrap #email.input { margin: 0; } 
.sec3 .map-area { width: 50%; } 
.root_daum_roughmap { width:100% !important; height:460px !important; } 
.root_daum_roughmap .wrap_map { height:460px !important; } 
.roughmap_lebel_text { line-height:0 !important; font-size:0 !important; } 
.sec3 .map-area .txt-wrap { padding: 20px 30px; background-color: #060a25; } 
.sec3 .map-area .txt-wrap p { position: relative; padding-left: 40px; font-size: 16px; line-height: 1.5em; color: #fff; letter-spacing: -0.02em; } 
.sec3 .map-area .txt-wrap p:first-child { margin-bottom: 14px; } 
.sec3 .map-area .txt-wrap p::before { content: ""; position: absolute; top: 0; left: 0; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; width: 24px; height: 24px; } 
.sec3 .map-area .txt-wrap .location::before { background-image: url(../images/main/ico-location.png); } 
.sec3 .map-area .txt-wrap .tel::before { background-image: url(../images/main/ico-tel.png); } 


/* sub page */
.sub-visual { position: relative; height: 400px; z-index: 10; margin-bottom: 30px; } 
.sub-visual .background { position:absolute; top:0; left:0; width:100%; height:100%; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; transform:scale(1.09); -ms-transform:scale(1.09); /* IE 9 */
 -moz-transform:scale(1.09); /* Firefox */
 -webkit-transform:scale(1.09); /* Safari and Chrome */
 -o-transform:scale(1.09); /* Opera */
transition: all 2s ease-out 0s; transition-delay: 0.1s; z-index:0; } 
.sub-visual.load .background { transform:scale(1); -ms-transform:scale(1); /* IE 9 */
 -moz-transform:scale(1); /* Firefox */
 -webkit-transform:scale(1); /* Safari and Chrome */
 -o-transform:scale(1); /* Opera */ } 
 .sub-visual .tt-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; z-index: 10; text-align: center; text-shadow: 2px 3px 20px rgba(0, 0, 0, .5); } 
 .sub-visual .tt-wrap .tit { font-size: 45px; margin-bottom: 8px; font-weight: 700; line-height: 1em; } 
 .sub-visual .tt-wrap .en { font-size: 18px; line-height: 2.111em; font-weight: 300; } 

 #lnb { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); max-width:1200px; width: 100%; box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.12); } 
.lnb { margin:0 auto; max-width:1200px; } 
.lnb .swiper-container { margin-bottom:-1px; padding-left:1px; } 
.lnb ul li { flex:1; width:auto; text-align:center; border-right: 1px solid #ddd; } 
.lnb ul li:last-child { border-right: none; } 
.lnb ul li a { display:flex; align-items:center; justify-content:center; width:100%; height:60px; padding:0 15px; font-size:18px; font-weight:500; line-height:1.2em; letter-spacing:-.03em; transition:none; background-color:#fff; } 
.lnb ul li.active a { background:#060a25; color: #fff; } 
.lnb ul li.active { border-right: none; border-left: 1px solid #4999ad; margin-left: -1px; } 

.real-cont { padding:0 0 160px; } 

.sub-title { color: #242424; } 
.sub-title h2 { font-size: 35px; line-height: 1.086em; padding:80px 0 50px; text-align: center; } 
.sub-title .border { position: relative; font-weight: 700; font-size: 22px; line-height: 1.455em; width: fit-content; margin: 0 auto; padding: 0 15px; text-align: center; } 
.sub-title .border.type2 { text-align: left; margin: 0; } 
.sub-title .border::before { content: ""; position: absolute; left: 0; bottom: -10px; width: 100%; height: 26px; background-color: rgba(23,122,184,0.05); } 

/* footer */
#footer { background-color: #020515; color: #fff; padding: 50px 0; } 
#footer .contain { display: flex; justify-content: space-between; } 
#footer .foot-info { width: 74%; } 
#footer .tit { font-size: 18px; font-weight: 600; margin-bottom:10px; } 
#footer .foot-map { display: flex; margin: 0 -25px; } 
#footer .foot-map li { padding:0 25px; } 
#footer .foot-map li a { position:relative; line-height: 2em; letter-spacing: -0.01em; } 
#footer .foot-map li a:after { content: ''; width: 0; height: 1px; background-color: #fff; position: absolute; left: 50%; bottom: -1px; transition: .3s; opacity: 0; } 
#footer .foot-map li a:hover:after { width: 100%; opacity: 1; left: 0; } 
#footer .foot-menu { display:flex; justify-content:flex-end; padding-top: 40px; } 
#footer .foot-menu li:first-child { margin-right: 50px; } 
#footer .foot-menu li a { position:relative; padding-left:20px; color:#b8b8b8; font-size: 15px; line-height: 2em; letter-spacing: -0.02em; } 
#footer .foot-menu li a:before { content:''; width:15px; height:15px; background:url('../images/common/pop-up.png')no-repeat 50% 50%/contain; position: absolute; left:0; top:2px; } 
#footer .btm { display: flex; padding-top: 50px; } 
#footer .btm .img { width: 117px; margin-right: 50px; } 
#footer .info { color: #b8b8b8; width: 720px; } 
#footer address { font-style:normal; flex-wrap: wrap; display: flex; margin: 0 -17px; } 
#footer address p { padding: 0 17px; font-size: 15px; letter-spacing: -0.02em; line-height: 1.875em; } 
#footer .info .copy { font-size: 14px; line-height: 2.143em; } 


/* for mobile */
.only-mobile { display:none; } 
.btn-m-menu { display:none; position:relative; width:26px; height:26px; } 
.btn-m-menu span { position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:#242424; } 
.btn-m-menu span:before,
.btn-m-menu span:after { content:" "; position:absolute; left:0; right:0; height:2px; background:#242424; } 
.btn-m-menu span:before { top:-9px; } 
.btn-m-menu span:after { bottom:-9px; } 

.mobile-navigation { display:none; position:fixed; top:0; right:0; width:300px; height:100%; overflow:auto; transition:.2s linear; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:102; } 
.mobile-navigation .home { display:flex; align-items:center; height:80px; padding:0 20px; color:#242424; font-size:19px; font-weight:700; line-height:1.5em; } 
.mobile-navigation .nav-menu>ul { border-top:1px solid #ddd; } 
.mobile-navigation .nav-menu>ul>li { border-bottom:1px solid #ddd; } 
.mobile-navigation .nav-menu>ul>li>a { position:relative; padding:10px 48px 10px 20px; display:block; color:#242424; font-size:19px; font-weight:700; line-height:1.5em; } 
.mobile-navigation .nav-menu>ul>li>a:after { content:""; position:absolute; top:50%; right:20px; transform:translateY(-75%) rotate(45deg); width:11px; height:11px; border-right:2px solid #505050; border-bottom:2px solid #505050; } 
.mobile-navigation .nav-menu>ul>li.active>a { color:#fff; background:#060a25 } 
.mobile-navigation .nav-menu>ul>li.active>a:after { transform:translateY(-35%) rotate(-135deg); border-color:#fff; } 
.mobile-navigation .nav-menu .submenu { display:none; background:#f8f8f8; color:#454545; font-size:16px; font-weight:400; line-height:1.5em; } 
.mobile-navigation .nav-menu .submenu ul li { border-top:1px solid #e5e5e5; } 
.mobile-navigation .nav-menu .submenu ul li a { display:block; padding:12px 20px; } 
.mobile-navigation .nav-menu .submenu ul li a:hover { color:#060a25; } 
.mobile-navigation .close { position:absolute; top:25px; right:15px; width:26px; height:26px; text-indent:-9999em; overflow:hidden; } 
.mobile-navigation .close:before,
.mobile-navigation .close:after { content:" "; position:absolute; top:12px; left:0; width:100%; height:3px; background:#242424; border-radius:3px; } 
.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:101; } 

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