@charset "utf-8";

/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */

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

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

#wrapper {overflow:hidden;}

/* header */

#header {position:absolute; width:100%; z-index:100; background:rgba(0, 0, 0,0.5);}
#sub #header {border-bottom:1px solid rgba(255, 255, 255, 0.2);}
#header .contain {position:relative; max-width:1580px; display:flex; align-items:center; justify-content:space-between; height:90px; z-index:10;}

#header.header-hover {background:#fff;}
#header.header-hover .sitelogo a {background-image: url('../images/common/logo_w.png');}
#header.header-hover #gnb>ul>li>a {color:#333;}
#header.header-hover #gnb>ul>li:hover>a {color:#23398a;}
#header.header-hover #gnb>ul>li:hover>a:before {position:absolute; content:""; width:100px; height:3px; background:#23398a; left:50%; margin-left:-50px; bottom:-1.5px;}
#header.header-hover .main-link a {color:#0045ad;}
#header.header-hover .main-link a:before {background-image: url('../images/main/main-link_w.png');}
#header.header-hover .btn-m-menu span {background:#333;}
#header.header-hover .btn-m-menu span:before,
#header.header-hover .btn-m-menu span:after {background:#333;}


#gnb {text-align:center; flex:1 1 auto; min-width:0; width:1%;}
#gnb>ul {display:flex; justify-content:center;} 
#gnb>ul>li {position:relative; padding:0 50px;}
#gnb>ul>li>a {position:relative; display:flex; align-items:center; flex-direction: column; justify-content:center; height:90px; color:#fff; font-size:18px; font-weight:700; letter-spacing:0; line-height:1.3em;}
#gnb>ul>li.active>a:after {width:100%; left:0;}
#gnb .submenu {position:absolute; left:0; width:100%; height:0; overflow:hidden; text-align:center;}
#gnb .submenu>ul {padding:25px 5px;}
#gnb .submenu>ul>li>a {display:block; padding:7px 0; color:#555; font-size:16px; line-height:1.33em;}
#gnb .submenu>ul>li>a:hover {text-decoration:underline; color:#1c408e;} 


.main-link {position:absolute; top:50%; right:150px; margin-top:-10.5px;}
.main-link a {position:relative; font-size:18px; font-weight:700; color:#fff; letter-spacing:0; line-height:1.3em; padding-left:35px;}
.main-link a:before {position:absolute; content:""; top:50%; left:0; width:22px; height:19px; background:url('../images/main/main-link.png')50% 50% no-repeat; background-size:contain; margin-top:-9.5px;}

.sitelogo {position:absolute; top:50%; margin-top:-18.5px; left:30px; z-index:10}
.sitelogo a {display:block; width:273px; height:37px; overflow:hidden; text-indent:-9999em; background:url("../images/common/logo.png") 50% 50% no-repeat; background-size:contain;}

.submenu-bg {display:none; position:absolute; width:100%; left:0; background:#fff; border-top:1px solid #ddd; border-bottom:1px solid #eee;}

/* for mobile */ 

.btn-m-menu {position:absolute; top:50%; right:60px; width:36px; height:30px; margin-top:-17px; text-align:center; text-indent:-9999em; z-index:50;}
.btn-m-menu span {position:absolute; left:11px; right:0; top:17px; height:4px; background:#fff; border-radius:2px;}
.btn-m-menu span:before,
.btn-m-menu span:after {content:""; position:absolute; left:-5px; right:0; height:4px; border-radius:2px; background:#fff;}
.btn-m-menu span:before {top:-13px;}
.btn-m-menu span:after {bottom:-13px;}

.mobile-navigation {position:fixed; top:0; right:0; width:300px; bottom:0; transition:.2s ease-out; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:102;}
.mobile-navigation .inner {position:absolute; top:0; left:0; width:100%; height:100%; overflow:auto;}
.mobile-navigation .brand-image {border-bottom:1px solid #d6dfd1; background-color:#e9ede7; height:128px;}
.mobile-navigation .brand-image a {display:block; padding-top:40px; padding-left:40px;}
.mobile-navigation .nav-menu .depth3 {display:block; margin-left:23px; padding-bottom:18px;}
.mobile-navigation .nav-menu .depth3 ul li a {display:block; padding:4px 0; color:#fff; font-size:18px; font-weight:300; line-height:1.4em; letter-spacing:-.04em;}
.mobile-navigation .close {position:absolute; top:18px; right:22px; 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.8; z-index:101;}
.home {width:50%; padding:10px;}

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

nav.nav-menu {position:relative; border-top:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #dfdfdf;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:10px 18px; display:block; color:#333; font-size:17px; font-weight:500; line-height:1.3em;}
.mobile-navigation .nav-menu>ul>li.active {background:#f4f4f4}
.mobile-navigation .nav-menu>ul>li.active>a {color:#fff; background:#1161be;}
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg); border-color:#fff}
.mobile-navigation .nav-menu>ul>li.home>a {padding:19px 18px;} 
.mobile-navigation .nav-menu .submenu {display:none; margin:-1px 0 0 0; padding:10px 0;}
.mobile-navigation .nav-menu .submenu>ul>li>a {display:block; padding:5px 18px; color:#454545; font-size:15px; font-weight:400; line-height:1.4em;}
.mobile-navigation .nav-menu .submenu>ul>li>a:hover {color:#1161be;}
.mobile-navigation .close {position:absolute; top:10px; right:10px; width:24px; height:24px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:11px; left:0; width:100%; height:2px; background:#242424; border-radius:3px;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}
.mobile-navigation .nav-menu>ul>li>a:after {content:""; position:absolute; top:50%; right:20px; transform:translateY(-75%) rotate(45deg); width:12px; height:12px; border-right:2px solid #242424; border-bottom:2px solid #242424;}


/* main */

.main-visual {position:relative; width:100%; top:0; overflow:hidden; z-index:1; line-height:0;}
.main-visual .item {background-repeat:no-repeat; background-size:cover; background-position:50% 50%; position:relative;} 

.main-visual:before {content:""; position:absolute; top:0; left:0; width:100%; height:200px; background-image: linear-gradient(#000, transparent); opacity:.6; z-index:40;}
.main-visual .caption {position:absolute; top:50%; left:0; width:100%; padding:0 30px; z-index:45; transform:translateY(-50%); color:#fff; text-align:center;}
.main-visual .caption p {font-size:26px; font-weight:700; letter-spacing:0; line-height:1.3em;}
.main-visual .caption h2 {font-family: 'GongGothicBold'; font-size:80px; font-weight:700; letter-spacing:0; line-height:1.0em; margin-bottom:10px;}
.main-visual .contain {max-width:1620px;} 
.main-visual .item .img img {width:100%;}

@keyframes proBar{
    0%{width:0;}
    100%{width:270px;}
}

@keyframes m_proBar{
    0%{width:0;}
    100%{width:100px;}
}

.scroll {position:absolute; width:98px; bottom:55px; left:50%; margin-left:-49px; text-align:center; z-index:50; animation:move_up_down 2s linear infinite; cursor:pointer;}
@keyframes move_up_down {
  0%,100%{
    transform:translateY(15px);
  }
  50% {
    transform:translateY(0);
  }
} 

.visual-scroll {position:absolute; right:53%; bottom:0; margin-right:-26px; animation: bounce2 .9s linear infinite alternate; color:#fff; font-size:16px; letter-spacing:0.2em; z-index:5; }

.scroll {
	position:absolute; 
	bottom:0;   
	margin-right:-26px;
	right:50%;
	width:52px; 
	height:63px;
	text-align:center;
	background:url('/images/main/scroll_down.png') 50% 100% no-repeat;
	background-size:contain;
	z-index:10;
	-webkit-animation: bounce2 .9s linear infinite alternate;
    -moz-animation: bounce2 .9s linear infinite alternate;
    -o-animation: bounce2 .9s linear infinite alternate;
    -ms-animation: bounce2 .9s linear infinite alternate;
    animation: bounce2 .9s linear infinite alternate;
	 
}
@-moz-keyframes bounce2{from{bottom:40px;}to{bottom:50px;}}
@-webkit-keyframes bounce2{from{bottom:40px;}to{bottom:50px;}}
@-o-keyframes bounce2{from{bottom:40px;}to{bottom:50px;}}
@keyframes bounce2{from{bottom:40px;}to{bottom:50px;}} 

.main-visual .slick-dots {position:absolute; bottom:80px; left:0; width:100%; text-align:center; z-index:50; line-height:0;}
.main-visual .slick-dots li {position:relative; display:inline-block; padding:0 20px;}
.main-visual .slick-dots li button {position:relative; display:block; background:#fff; width:11px; height:11px; border:3px solid #fff; border-radius:100%; overflow:hidden; text-indent:-9999px;}
.main-visual .slick-dots li.slick-active button {border-color:transparent; background:#406dff; }
.main-visual .slick-dots li.slick-active:before {width:30px; height:30px; top:50%; margin-top:-15px; left:50%; margin-left:-15px; border-radius:100%; position:absolute; content:""; border:1px solid #406dff; }

 
.scroll {position:absolute; width:98px; bottom:55px; left:50%; margin-left:-49px; text-align:center; z-index:50; animation:move_up_down 2s linear infinite; cursor:pointer;}
@keyframes move_up_down {
  0%,100%{
    transform:translateY(15px);
  }
  50% {
    transform:translateY(0);
  }
}

.visual-scroll {position:absolute; right:50%; margin-right:-18.5px; animation:pulse 2s infinite; bottom:0; color:#fff; font-size:16px; letter-spacing:0.2em; z-index:5; }
.visual-scroll.left {right:auto; left:100px; bottom:200px;}
.visual-scroll.top {top:50%; bottom:auto;}

.scroll {
	position:absolute;  
	bottom:0;
	right:50%; 
	margin-right:-26px; 
	width:52px; 
	height:63px;
	text-align:center;
	background:url('/images/main/scroll_down.png') 50% 100% no-repeat;
	background-size:contain;
	z-index:10;
	-webkit-animation: bounce2 .9s linear infinite alternate;
    -moz-animation: bounce2 .9s linear infinite alternate;
    -o-animation: bounce2 .9s linear infinite alternate;
    -ms-animation: bounce2 .9s linear infinite alternate;
    animation: bounce2 .9s linear infinite alternate;
	 
}
.scroll.bg {background:url('/images/main/scroll_down2.png') 50% 100% no-repeat;}

@-moz-keyframes bounce2{from{bottom:80px;}to{bottom:90px;}}
@-webkit-keyframes bounce2{from{bottom:80px;}to{bottom:90px;}}
@-o-keyframes bounce2{from{bottom:80px;}to{bottom:90px;}}
@keyframes bounce2{from{bottom:80px;}to{bottom:90px;}}

.scroll.left {right:auto; left:100px; margin-left:0;}
 
.main-tit {text-align:center; margin-bottom:50px;}
.main-tit h3 {font-family: 'GongGothicBold'; font-size:60px; font-weight:700; color:#13235d; letter-spacing:0; line-height:1.3em; margin-bottom:15px;}
.main-tit p {font-size:18px; color:#555; letter-spacing:0; line-height:1.556em;} 

/* main-business */

.main-business {padding:130px 0 100px;}
.main-business .main-business-list {}
.main-business .main-business-list ul {display:flex; flex-wrap:wrap; margin:0 -15px; margin-bottom:-50px;}
.main-business .main-business-list ul li {width:25%; text-align:center; padding:0 15px; margin-bottom:50px;} 
.main-business .main-business-list ul li a {display:block;}
.main-business .main-business-list ul li a .tit {font-size:18px; font-weight:700; color:#333; letter-spacing:-.03em; line-height:1.556em; margin-top:15px;}


/* sub page */

.sub-visual {position:relative; text-align:center; height:400px; color:#fff; overflow:hidden; background:#333;}
.sub-visual .bg {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; transition:2s; opacity:0; transform:scale(1.1); background-repeat:no-repeat; background-position:50% 0; background-size:cover;}
.sub-visual .inner {position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%);}
.sub-visual h3 {font-family: 'GongGothicBold'; font-size:46px; font-weight:700; line-height:1.300em; letter-spacing:0; margin-top:100px;}   
.sub-visual p {font-size:18px; color:#fff; letter-spacing:0; line-height:1.3em; margin-bottom:15px;}
.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");}
.sub-visual .bg6 {background-image:url("../images/common/sv6.jpg");} 

.loaded .sub-visual .bg {transform:scale(1); opacity:1 ;}

#contArea {width:100%; max-width:1460px; margin:0 auto; padding-left:30px; padding-right:30px;}
#contArea.wide {max-width:none; padding-left:0; padding-right:0;}  
 
.real-cont {padding-bottom:100px;}
.real-cont.none {padding-bottom:0;}

.path {position:absolute; overflow:visible; bottom:-30px; right:0; text-align:right; display:flex; align-items:center; font-size:16px; color:#2c2c2c; font-weight:800; letter-spacing:-.04em; background:#fff; padding:10px; border-radius:30px; filter: drop-shadow(3px 0 13px rgba(0, 0, 0, 0.14)); min-width:250px;}
.path img {vertical-align:middle; margin:-.1em 10px 0 0;}
.path .arrow {display:inline-block; width:6px; height:10px; overflow:hidden; font-size:0; line-height:0; text-align:left; text-indent:-9999em; background:url("../images/common/path_arrow.png") 50% 50% no-repeat; background-size:contain; margin:0 18px;}
.path .page-name {color:#035baa;}

/* footer */
#footer {padding:35px 0; position:relative; width:100%; color:#fff; background:#090c23; font-weight:500; font-size:16px;}
#footer .contain {display:flex; justify-content:space-between; align-items:flex-end;}
#footer .foot-info {}
#footer .foot-info .company {font-size:20px; font-weight:700; letter-spacing:-.04em; color:#fff; line-height:1.6em; margin-bottom:10px;}
#footer .foot-info address {font-style:normal;}
#footer .foot-info span {position:relative; display:inline-block; padding-right:20px; letter-spacing:-.04em; font-size:16px; color:#ccc; line-height:1.50em;}
#footer .foot-info span.mgt {margin-top:5px; letter-spacing:-.04em;}
#footer .foot-info span.mgt a {font-size:12px; color:#3f3f3f; padding-left:7px;}
#footer .foot-info span.pd {font-weight:600;}
#footer .foot-info span.s-txt {color:#898989; font-size:13px;}
#footer .foot-info span.none:before {display:none;}
#footer .foot-info span.top {display:inline-block; margin-top:15px;}
#footer .f-ico {padding-right:5px; padding-top:5px;}
#footer .f-ico img {display:inline-block; padding-top:3px;}
#footer .foot-info .bar {margin:0 8px;}
#footer .foot-links .mgt {font-size:14px; color:rgba(255, 255, 255, 0.5); font-weight:400; margin-top:12px;}
#footer .foot-links ul {display:flex;}
#footer .foot-links ul li {position:relative; font-size:16px; color:#ccc; padding:0 10px; font-weight:400; letter-spacing:0;}
#footer .foot-links ul li:before {position:absolute; content:""; width:1px; height:12px; background:rgba(255, 255, 255, 0.5); top:50%; margin-top:-6px; right:0; border-radius:50%;} 
#footer .foot-links ul li:last-child:before {display:none;}
#footer .foot-link-wrap .img {text-align:right;}
#footer .copyright {font-size:12px; font-weight:300; letter-spacing:-.04em; padding-top:10px;}
.white {font-size:16px; color:#feffff; font-weight:700; letter-spacing:-.04em; line-height:1.875em; margin-bottom:10px; padding-top:10px;}
a.go-top {position:fixed; bottom:40px; right:20px; z-index:50;}
.foot-border {padding-bottom:20px; border-bottom:1px solid rgba(255, 255, 255, 0.3); margin-bottom:30px;}
.link-flex {display:flex;}
.link-flex .img {padding:0 15px;}
.foot-link-wrap {display:flex; order:2;}
.foot-wrap {background:#686868; color:#fff; padding:40px 0;}
.foot-wrap .foot-list-menu {display:flex; text-align:center;}
.foot-wrap .foot-list-menu .foot-list {position:relative; flex:1}
.foot-wrap .foot-list-menu .foot-list:before {position:absolute; content:""; width:1px; height:100%; background:rgba(255, 255, 255, 0.4); top:0; right:0;}
.foot-wrap .foot-list-menu .foot-list:first-child:after {position:absolute; content:""; width:1px; height:100%; background:rgba(255, 255, 255, 0.4); top:0; left:0;}
.foot-wrap .foot-list-menu .foot-list h3 {font-size:20px; font-weight:700; letter-spacing:-.03em; line-height:1.5em;}
.foot-wrap .foot-list-menu .foot-list ul li {margin-top:15px;}

.f-logo {margin-right:20px;}

.footer-flex {display:flex;}

.foot-lnb {width:50%; display:flex;}
.foot-lnb .foot-lnb-box {width:20%;}
.foot-lnb .foot-lnb-box p {font-size:16px; color:#fff; font-weight:700; letter-spacing:0; line-height:1.667em; margin-bottom:15px;}
.foot-lnb .foot-lnb-box ul {}
.foot-lnb .foot-lnb-box ul li {}
.foot-lnb .foot-lnb-box ul li a {font-size:16px; font-weight:400; color:#999; letter-spacing:0; margin-bottom:5px;}

.footer-box {padding-left:55px;}

/* lnb */ 

.lnb {position:relative; z-index:99; background:#13235d;}   
.lnb ul {display:flex; justify-content:center; max-width:1200px; margin:0 auto; border-radius:10px;}
.lnb ul li {width:auto; position:relative; text-align:center; line-height:1.4em; letter-spacing:-.04em;}
.lnb ul li a {font-size:20px; color:#fff; letter-spacing:0; margin:0 20px; font-weight:500; position:relative; display:flex; align-items:center; justify-content:center; height:70px;}
.lnb ul li.active a {color:#0c71b0;}
.lnb ul li.active a:before {position:absolute; content:""; width:100%; height:4px; bottom:0; left:0; background:#0c71b0;}