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

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

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


/* header */
#header {position:absolute; width:100%; left:0; top:0; background:rgba(0,0,0,0.3); z-index:2; transition:all 0.2s ease;}
#header .contain {position:relative; height:95px; max-width:1780px;}
#header .sitelogo {position:absolute; top:50%;  margin-top:-34.5px;left:30px; z-index:10}
#header .sitelogo a {display:inline-block;}
#header.header-hover {background:#fff;}
#header.header-hover  #gnb > ul > li > a {color:#2c2c2c;}
#header.header-hover  #gnb > ul > li.active > a {color:#185d9e;}
#header.header-hover .util a {color:#2c2c2c; border:1px solid #2c2c2c;}
#header.header-hover .util a:after {background-image:url("../images/common/language_icon_b.png");}

#gnb {position:absolute; top:0; right:30px; left: 50%; transform: translateX(-50%); z-index:20;}
#gnb > ul {display:flex;justify-content: center;}
#gnb > ul > li {position:relative; width:180px; text-align:center;}
#gnb > ul > li > a {display:block; position:relative; color:#fff; font-size:19px; font-weight:400; line-height:95px; letter-spacing:-.04em; transition:all 0.2s ease;}
#gnb > ul > li > a:after  {content:""; position:absolute; width:0; height:3px; left:50%; margin-left:-10px; bottom:18px; background:#185d9e; transition: all 0.2s ease-in;}
#gnb > ul > li.hover a {color:#185d9e;}
#gnb > ul > li.hover a:after {width:20px;}
#gnb > ul > li.active a:after {width:20px;}

#gnb .submenu {height:0; position:absolute; left:0; width:100%; z-index:102; overflow:hidden;}
#gnb .submenu ul {padding:18px 0;}
#gnb .submenu ul li {padding:5px 0;}
#gnb .submenu ul li a {display:inline-block; vertical-align:middle; position:relative; padding:3px 0; color:#fff; font-size:16px; font-weight:300; line-height:1.4em; letter-spacing:-.03em;}
#gnb .submenu ul li a:after {content:""; position:absolute; bottom:0; left:0; width:0; height:1px; background:#fff; transition:.2s ease-in-out;}
#gnb .submenu ul li a:hover::after {width:100%;}

#header .submenu-bg {display:none; position:absolute; left:0; width:100%; background:rgba(24,93,158,0.9);}

.util {position:absolute; right:30px; top:50%; margin-top:-22.5px;}
.util a {display:block; position:relative; border-radius:30px; border:1px solid #fff; padding:14px 65px 14px 30px; font-family:'Montserrat'; font-weight:600; font-size:15px; color:#fff; letter-spacing:-0.04em; line-height:1em; transition:all 0.2s ease;}
.util a:after {content:""; position: absolute; width:18px; height:17px; background:url("../images/common/language_icon.png") no-repeat 50% 50%; right:30px; top:50%; margin-top:-8.5px; transition:all 0.2s ease;}


/* for mobile */
.btn-m-menu {display:none;position:absolute; top:50%; margin-top:-12px ; right:15px; width:20px;  right:0; width:30px; height:24px; text-align:center; text-indent:-9999em; z-index:92; transition: all 0.5s ease-in-out;}
.btn-m-menu span {position:absolute; left:0; top:13px; height:2px; width:22px;background:#fff;}
.btn-m-menu span:before,
.btn-m-menu span:after {content:" "; position:absolute; right:0; width:30px; height:2px; background:#fff; transition-duration:0.3s, 0.3s; transition-delay:0.3s, 0s;}
.btn-m-menu span:before {top:-10px; transition-property:top, transform;}
.btn-m-menu span:after {bottom:-10px; transition-property:bottom, transform;}

.home img {height:40px; width:auto;}

.nav-util{margin-top:20px; text-align:center;}
.nav-util a {position:relative; color:#2c2c2c; border:1px solid #2c2c2c; padding:14px 65px 14px 30px; border-radius:30px; font-family:'Montserrat'; font-weight:600; font-size:15px; letter-spacing:-0.04em; line-height:1em; }
.nav-util a:after {content:""; position:absolute; width:18px; height:17px; background:url("../images/common/language_icon_b.png") no-repeat 50% 50%; right:30px; top:50%; margin-top:-8.5px;}

.mobile-navigation {position:fixed; top:0; right:0; padding:20px 0; width:300px; height:100%; overflow:auto; transition:.3s ease-in-out; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:202;}
.mobile-navigation .home {margin-bottom:20px; padding-left:15px; font-size:20px; color:#2c2c2c; line-height:1.4em; font-weight:700;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #dfdfdf;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:12px 15px; display:block; color:#2c2c2c; font-size:18px; font-weight:700; line-height:1.3em;}
.mobile-navigation .nav-menu>ul>li>a:after {content:""; position:absolute; top:50%; right:15px; transform:translateY(-75%) rotate(45deg); width:10px; height:10px; border-right:2px solid #2c2c2c; border-bottom:2px solid #2c2c2c;}
.mobile-navigation .nav-menu>ul>li.active>a {color:#2c2c2c;}
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg); border-color:#185d9e;}
.mobile-navigation .nav-menu .submenu {display:none; margin:-1px 0 0 0; padding:0 15px 15px; background:#185d9e;}
.mobile-navigation .nav-menu .submenu>ul {padding-top:10px;}
.mobile-navigation .nav-menu .submenu>ul:after {content:"";display:block;clear:both;}
.mobile-navigation .nav-menu .submenu>ul>li>a {display:block; position:relative; padding:5px 15px; color:#fff; font-size:16px; font-weight:400; line-height:1.3em;}
.mobile-navigation .nav-menu .submenu>ul>li>a:after {content:"";position:absolute; top:12px; left:5px; width:4px; height:4px; background:#dfdfdf; border-radius:50%; transition:.3s ease-in-out;}
.mobile-navigation .nav-menu .submenu>ul>li>a:hover{color:#fff}
.mobile-navigation .nav-menu .submenu>ul>li>a:hover:after {background:#fff}
.mobile-navigation .close {position:absolute; top:20px; 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:#2c2c2c; 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:20;}

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



/* main */ 
#fp-nav {left:100px !important;}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, 
#fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span {width:20px !important; height:20px !important; background:#185d9e !important; border:0 !important; margin: -6px -5px 0 -6px !important;} 
#fp-nav ul li a span, 
.fp-slidesNav ul li a span {background:0 !important; border:2px solid rgba(255,255,255,0.5) !important;}

/* .section .vis {position:absolute; top:0; left:0; width:100%; height:100%; transform: scale3d(1.1, 1.1, 1.1); background-repeat:no-repeat; background-position:50% 50%; background-size:cover; animation: zoomInImage 10s ease;} */
.section {overflow:hidden;}
.section .vis {position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; -ms-transform:scale(1); -webkit-transform:scale(1); transform:scale(1); -webkit-transition:all 0.9s; -ms-transition:all 0.9s; transition:all 0.9s; -webkit-transition-timing-function:ease; transition-timing-function:ease; z-index:1;}

.section.active2 .vis {-ms-transform:scale(1.1) rotate(0.1deg); -webkit-transform:scale(1.1) rotate(0.1deg); transform:scale(1.1) rotate(0.1deg); -webkit-transition:all 10s; -ms-transition:all 10s; transition:all 10s; -webkit-transition-timing-function:ease; transition-timing-function:ease;}
.section.active2 .cnt p {opacity:1;top:0;}

.sec0.active .vis,
.sec1.active .vis,
.sec2.active .vis,
.sec3.active .vis {-ms-transform:scale(1.1) rotate(0.1deg); -webkit-transform:scale(1.1) rotate(0.1deg); transform:scale(1.1) rotate(0.1deg); -webkit-transition:all 10s; -ms-transition:all 10s; transition:all 10s; -webkit-transition-timing-function:ease; transition-timing-function:ease;}

.sec0.active .cnt p,
.sec1.active .cnt p,
.sec2.active .cnt p,
.sec3.active .cnt p {opacity:1;top:0;}

.sec2.active .more,
.sec3.active .more{opacity:1; top:0;}

.section .cnt {position:absolute; width:calc(100% - 60px); top:50%; left:50%; transform:translateY(-50%) translateX(-50%); text-align:center; z-index:3;}
.section .cnt p {position:relative; font-size:58px; font-weight:200; line-height:1.4em; color:#fff; text-shadow: 3px 0 2px rgba(0,0,0,0.2);  opacity:0; top:50px; transition: all 1s 1s ease;}
.section .cnt strong {font-weight:700;}

.sec3 .cnt {top: calc(50% - 100px);}
.section .more{position:relative; top:50px; margin-top:50px; opacity:0; transition:all 1s 1.3s ease-in-out;}
.section .more .btn {display:block; margin:0 auto; border:1px solid #fff; width:240px; background:0; font-size:18px; font-weight:500; color:#fff; line-height:1.4em; padding:17px 0; transition: all 0.2s ease;}
.section .more .btn:hover {background:#185d9e; border:1px solid #185d9e;}
.scroll {position:absolute; bottom:30px; left:50%; width:40px; text-align:center; margin-left:-20px; z-index:50; animation:move_up_down 2s linear infinite;}

@keyframes move_up_down {
  0%,100%{
    transform:translateY(0);
  }
  50% {
    transform:translateY(15px);
  }
}

/* sub page */
.sub-visual {position:relative; width:100%; height:600px; padding-top:100px; display:flex; align-items:center; overflow:hidden; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
.sub-visual .content {color:#fff; text-align:center; width:100%;}
.sub-visual .content h2 {font-size:58px;line-height:1em; font-weight:700; letter-spacing:-.40px; margin-bottom: 40px;}
.sub-visual .content p {font-size:16px; line-height:1.4em; letter-spacing:-0.04em;}

.sv1 {background-image:url("../images/common/sv1.jpg");}
.sv2 {background-image:url("../images/common/sv2.jpg");}
.sv3 {background-image:url("../images/common/sv3.jpg");}
.sv4 {background-image:url("../images/common/sv4.jpg");}

.sub-title {margin:110px 0 95px; text-align:center;}
.sub-title h2 {color:#2c2c2c; font-size:48px; line-height:1.6em; font-weight:500;letter-spacing:-.40px;}


#lnb {background:#0f4780; position:relative;}
.lnb {max-width:1200px; margin:0 auto;}
.lnb ul {display:flex;}
.lnb ul li {flex:1; position:relative; width:auto; text-align:center; letter-spacing:-.04em;}
.lnb ul li:first-child:after {display:none}
.lnb ul li a {display:flex; align-items:center; justify-content:center; height:60px; color:#fff; font-size:17px; line-height:1.4em; padding:0 20px; }
.lnb ul li a:hover {color:#fff;}
.lnb ul li.active a {color:#0f4780; background:#fff; font-weight:500; }

.real-cont {padding-bottom:120px;}
.real-cont.none {padding-bottom:0;}



/* footer */
#footer {position:absolute; width:100%; bottom:0; background:#2c2c2c; padding:48px 0; color:#ccc; font-size:14px; line-height:1.7em; z-index:4;}
#footer address {font-style:normal; font-weight:400; line-height:2.143em; margin-bottom:15px;}
#footer .bar {display:inline-block; width:1px; height:15px; background:#ccc; margin:0 10px; vertical-align: middle;}
#footer .emty {padding:0 17px;}
#footer .contain {position:relative; max-width:1260px;}

.f-info .tit {font-size:16px; font-weight:700; color:#fff; line-height:1.4em; margin-bottom:18px;}
.f-info .copy {font-size:12px; font-weight:200;}
.f-cnt {display:flex; justify-content: space-between;}
.f-right {display:flex; flex-direction: column; justify-content: space-between;}

.familysite-box {display:inline-block; min-width:180px; vertical-align:middle; position:relative; z-index:10;}
.familysite-box .familysite {position:relative;}
.familysite>a {display:block;text-decoration:none; padding-left: 15px; font-size:14px; line-height:38px; letter-spacing:-.03em; overflow:hidden; white-space:nowrap; cursor:pointer; color:#fff; background:#185d9e url("/images/common/select.png") right 20px center no-repeat;z-index:2;position:relative;}
.familysite ul {display:none;background:#fff;border:1px solid #ddd;border-top:0;position:absolute;left:0;width:100%;z-index:10px;overflow:hidden;max-height:120px;overflow:auto;}
.familysite ul li a {display:block;text-decoration:none;font-size:13px;line-height:30px;letter-spacing:-0.03em;color:#2c2c2c;padding:0 15px;}
.familysite ul li a:hover {background:#f2f2f2;}


.scroll-top {position:absolute; bottom:215px; right:100px; display:flex; background:#113965; width:108px; height:40px;padding:0 20px;}
.scroll-top .top {position:relative;  color:#fff; font-weight:700; font-size:16px; line-height:40px; }
.scroll-top .top:after {content:""; position: absolute; right:-35px; top:50%; margin-top:-4px; width:9px; height:8px; background:url("/images/common/scroll_top.png") no-repeat 50% 50%;}
.scroll-top.active {transition: all .3s ease;}