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

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

/* 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:var(--header-height); z-index:10; max-width: 1660px !important;} 
#header .sitelogo a {display:block;} 
#header .sitelogo a img {width:100%;} 

#gnb {text-align:center;} 
#gnb>ul {display:flex; justify-content:flex-end;} 
#gnb>ul>li {position:relative; padding:0 var(--padding-80-40);} 
#gnb>ul>li>a {position:relative; display:flex; align-items:center; flex-direction: column; justify-content:center; height:var(--header-height); color:#242424; font-size:var( --font-size-22-20); font-weight:600; letter-spacing:-.03em; line-height:1.3em; padding: 0 10px;} 
#gnb>ul>li.active>a {color: #1a50a2;} 
#gnb>ul>li>a:after {content:""; position:absolute; bottom:-1px; left:50%; width:0; height:4px; background:#1a50a2; transition:.2s;} 
#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:20px 5px;} 
#gnb .submenu>ul>li {padding:0 var(--padding-75-35);}
#gnb .submenu>ul>li>a {display:block; padding:5px 0; color:#454545; font-size:16px; line-height:1.33em;text-align:left;} 
#gnb .submenu>ul>li>a:hover {color:#1a50a2;} 
#gnb .submenu>ul>li.active>a {color:#1a50a2;} 
.submenu-bg {display:none; position:absolute; width:100%; left:0; background:#fff; border-top:1px solid #ddd; border-bottom:1px solid #eee;} 

/* for mobile */
.only-mobile {display:none;} 
.btn-m-menu {display: none;} 
.btn-menu {display:block;} 
.btn-menu img {width:100%; height:100%; object-fit: contain;} 
.mobile-navigation {position:fixed; top:0; right:0; padding:20px 0; width:400px; height:100%; overflow:auto; transition:.3s ease-in-out; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:202;} 
.mobile-navigation .home {display:block; margin-bottom:20px; padding-left:15px;} 
.mobile-navigation .home a {display:block;} 
.mobile-navigation .home img {height:25px;} 
.mobile-navigation .nav-menu>ul {margin-top:30px;} 
.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:#454545; font-size:18px; font-weight:500; 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:#003db8} 
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg); border-color:#003db8;} 
.mobile-navigation .nav-menu .submenu {display:none; margin:-1px 0 0 0; padding:0 15px 15px;} 
.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:#454545; font-size:16px; font-weight:400; line-height:1.3em;} 
.mobile-navigation .nav-menu .submenu>ul>li>a:after {display:block; content:""; position:absolute; top:14px; 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:#003db8} 
.mobile-navigation .nav-menu .submenu>ul>li>a:hover:after {background:#003db8} 
.mobile-navigation .close {position:absolute; top:20px; right:15px; width:24px; height:24px; text-indent:-9999em; overflow:hidden;} 
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:2px; background:#2c2c2c;} 
.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:201;} 

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 */
[data-aos=fade-up] {transform: translate3d(0,100px,0);} 
.main-visual {position: relative; height:calc(100vh - var(--header-height)); overflow: hidden; color: #fff; text-align: center;} 
.main-visual .item {position: relative; height:calc(100vh - var(--header-height)); overflow: hidden;} 
.main-visual .image {position: relative; height:calc(100vh - var(--header-height)); overflow: hidden; } 
.main-visual .image img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; -webkit-transform:scale(1.1); transform:scale(1.1); transition:5s;} 
.main-visual .caption {position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 100%; z-index: 40; text-align: center;} 
.main-visual .caption p {opacity: 0; transform: translateY(50px); transition: 1.4s; 
/* font-family: "waguri"; 
/*  font-family: 'WAGURITTF';
 /* letter-spacing: 0; line-height: 1.5em;   */
} 
.slick-slide .caption p > img {  margin: 0 auto;}

/* .main-visual .caption .t1 {font-size: var(--font-size-48-28); text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); color: #008aff; } 
.main-visual .caption .t2 {font-size: var(--font-size-46-26); text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);}  */

.main-visual .caption .t1 {margin-bottom:16px;}
.main-visual .slick-arrow {position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 69px; background: url("../images/main/slide-btn.png") no-repeat 50% 50%/contain; border: 0; opacity: .5; overflow: hidden; text-indent: -9999em; line-height: 0; font-size: 0; z-index: 50;} 
.main-visual .slick-arrow:hover {opacity: 1;} 
.main-visual .slick-prev {left: 8%;} 
.main-visual .slick-next {right: 8%; transform: rotate(180deg) translateY(50%);} 
.main-visual .slick-dots {position: absolute; bottom: var( --header-height); left: 0; width: 100%; text-align: center; line-height: 0; z-index: 50;} 
.main-visual .slick-dots li {display: inline-block; margin: 0 20px;} 
.main-visual .slick-dots li button {position: relative; display: block; width: 11px; height: 11px; background-color: #fff; border: 1px solid #fff; border-radius: 100%; overflow: hidden; text-indent: -9999em; transition: .2s;} 
.main-visual .slick-dots .slick-active button {border: 1px solid #008aff; background-color: #008aff;} 
/* .main-visual .active .image {transform: scale(1);}  */
.main-visual .active .image img {-webkit-transform:scale(1); transform:scale(1);}
.main-visual .active .caption p {opacity: 1; transform: translateY(0);} 
.main-visual .active .caption .t1 {transition-delay: .4s;} 
.main-visual .active .caption .t2 {transition-delay: .6s;} 

/* sub page */
.contain {max-width:1600px; margin:0 auto; padding-left:var(--container-space); padding-right:var(--container-space);} 
#contArea {max-width:1600px; padding-left:var(--container-space); padding-right:var(--container-space); margin:0 auto;} 
#contArea.wide {max-width:100% !important; padding-left:0; padding-right:0;} 

.real-cont {padding:0 0 var(--padding-180-80);} 

.sub-visual {position:relative; height:400px; z-index:10; overflow:hidden;} 
.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 {width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; color: #fff; text-align: center;     margin-top: -30px;} 
.sub-visual .tt-wrap .tit {font-family: "waguri"; font-size: var(--font-size-46-36); font-weight:normal; letter-spacing: 0; text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5); line-height:1em;} 

.path-wrap {position:relative; border-top:1px solid #ddd; z-index:50;} 
.path-wrap .wrap {max-width: 1400px; margin: -1px 0 auto 0; position: absolute; top: -80px; background: #fff; width: 100%; left: 50%; transform: translateX(-50%); border-bottom:1px solid #ddd;} 
.path-wrap .inner {display:flex;} 
.path-wrap .home a {display:block; width:110px; height:var(--lnb-height); background:url("../images/common/home.png") 50% 50% no-repeat; background-size:27px; text-indent:-999em; overflow:hidden; border-left:1px solid #ddd; border-right:1px solid #ddd;} 
.path-wrap .part {position:relative; min-width:430px; border-right:1px solid #ddd; z-index:50;} 
.path-wrap .part > a {display:flex; align-items:center; position:relative; height:var(--lnb-height); color:#333333; font-size:var(--font-size-20-18); font-weight:600; line-height:1.3em; padding:0 60px 0 24px; letter-spacing: -0.025em;} 
.path-wrap .part > a:after {content:""; position:absolute; top:50%; right:23px; margin-top:-7px; width:17px; height:10px; background:url("../images/common/path_down.svg") 50% 50% no-repeat;} 
.path-wrap .part ul {display:none; position:absolute; left:-1px; right:-1px; background:#fff; border:1px solid #ddd; z-index:50;} 
.path-wrap .part ul li {color:#333333; font-size:var(--font-size-20-18); border-bottom:1px solid #ddd; font-weight:500;} 
.path-wrap .part ul li:last-child {border-bottom:0;} 
.path-wrap .part ul li a {display: block; padding: 0 24px; line-height:var(--lnb-height) ;} 
.path-wrap .part ul li a:hover,
.path-wrap .part ul li.active a {color:#fff; background:#124194;} 

.sub-title {text-align: center; margin:var( --margin-80-40) 0 var(--margin-90-50);} 
.sub-title h1 {font-size: var(--font-size-36-26); color: #333333; line-height: 1em; letter-spacing: 0;} 

/* footer */
#footer {background-color: #f2f2f2; padding: var(--padding-40-20) 0; letter-spacing: 0;} 
#footer .contain {display: flex; position: relative; max-width: 1600px;} 
#footer .foot-logo {margin-right:var(--margin-50-30); margin-top: 3px;} 
#footer .foot-info {min-width: 0; width: 1%; flex: 1 1 auto; max-width: 900px;} 
#footer .foot-info address {font-style: normal; display: flex; margin: 0 -10px; flex-wrap: wrap;} 
#footer .foot-info address p {padding: 0 10px; font-size: var(--font-size-16-14); color: #686868; line-height: 1.5em;} 
#footer .foot-info .copy {font-size: var(--font-size-16-14); line-height: 1.5em;} 
#foote .foot-info .copy a {font-size: 12px; line-height: 2em;} 
#footer .foot-menu {position: absolute; top: 0; right: var(--container-space); display: flex; justify-content: flex-end;} 
#footer .foot-menu li:first-child {position:relative; padding-right:22px;} 
#footer .foot-menu li:first-child::before {content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 12px; background-color: #ddd; margin: 0 10px;} 
#footer .foot-menu li a {color: #333333; line-height: 2.25em; font-size: var(--font-size-16-14);}