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

#wrapper{position:relative;overflow:hidden;padding-bottom:125px;}
#wrapper:after{content:'';width:100%;height:100vh;position: absolute;left:0;bottom:0;background:url('/images/common/pg-background.jpg')no-repeat 50% 100%/cover;z-index:-1;}

/* intro */
.intro{display:flex;align-items:center;position:relative;height:100vh;}
.intro:after{content:'';width:100%;height:100%;position: absolute;left:0;top:0;background-color:rgba(0,0,0,.5);}
.intro .bg video{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
.intro .contain{max-width:1350px;width:100%;z-index:1;}
.intro ul{display:flex;margin:0 -15px;}
.intro ul li{width:25%;padding:0 15px;}
.intro ul li .box{display:flex;justify-content:center;align-items:center;position:relative;border-radius:var(--bd15);min-height:340px;transition:.3s;}
.intro ul li .box:before{content:'';width:100%;height:100%;border:1px solid rgba(255,255,255,.5);position: absolute;left:0;top:0;border-radius:var(--bd15);transition:.3s;}
.intro ul li .box:after{content:'';width:100%;height:100%;border:3px solid var(--pri);position: absolute;left:0;top:0;border-radius:var(--bd15);transition:.3s;opacity:0;}
.intro ul li .box .inner{width:100%;padding:0 20px;text-align:center;}
.intro ul li .box .inner .logo{height:33px;background:url('/images_50th/common/intro-logo.png')no-repeat 50% 50%/contain;transition:.3s;margin-bottom:23px;}
.intro ul li .box .inner p{font-size:var(--fz28);font-weight:700;line-height:1.33em;color: #fff;transition:.3s;}
.intro ul li .box .arr{display:flex;justify-content:center;align-items:center;width:60px;height:60px;border-radius:50%;background-color:var(--pri);position: absolute;left:50%;transform:translateX(-50%);bottom:0;transition:.3s;opacity:0;z-index:1;}

.intro ul li .box:hover{background-color: #fff;}
.intro ul li .box:hover:after{opacity:1;}
.intro ul li .box:hover .inner .logo{background-image:url('/images_50th/common/intro-logo-on.png');}
.intro ul li .box:hover .inner p{color: #53585a;}
.intro ul li .box:hover .arr{bottom:-30px;opacity:1;}

/* header */
#header {position:relative;z-index:90;}
#header .contain{height:120px;max-width:1580px;}
#header .sitelogo {position:absolute; top:20px; left:30px; z-index:2}
#header .sitelogo a {display:block;}

#main .contain{max-width:1580px;}
.flex-page{display:flex;}
.flex-page .left-area{display:flex;flex-direction:column;justify-content:space-between;width:320px;}
.flex-page .right-area{min-width:0;width:1%;flex:1 1 auto;min-height:calc(100vh - 120px - 125px);}

/* 개별메뉴 세로 */
#gnb{position:relative;z-index:1;display:flex;padding-top:20px;}
#gnb>ul>li {position:relative;}
#gnb>ul>li>a {display:block;position:relative;padding:0 0 40px;font-size:20px;font-weight:600;color: var(--dark);line-height:1.4em;transition:.3s;}
/* #gnb>ul>li:first-child>a{padding-top:20px;} */
#gnb .submenu {display:none; position:absolute;top:-20px;right:-200px;width:180px;padding:25px 30px; background:var(--pri);border-radius:var(--bd24)}
#gnb .submenu:before{content:'';position: absolute;left:-10px;top:25px;width:10px;height:20px;background:url('/images/common/gnb-tail.png')no-repeat 100% 100%/contain;}
#gnb .submenu>ul>li{margin-bottom:10px;}
#gnb .submenu>ul>li:last-child{margin-bottom:0;}
#gnb .submenu>ul>li>a {position:relative;display:inline-block; color:#fff; font-size:16px; line-height:1.4em;font-weight:600;}
#gnb .submenu>ul>li>a:after{content:'';width:0;height:2px;background-color: #fff;position: absolute;left:50%;bottom:0;opacity:0;transition:.3s;}
#gnb .submenu>ul>li:hover>a:after{width:100%;left:0;opacity:1;}
#gnb .submenu>ul>li .depth2{margin-top:5px;}
#gnb .submenu>ul>li .depth2>ul>li>a{display:inline-block;color: #fdbc9e;transition:.3s;line-height:1.4em;font-weight:500;}
#gnb .submenu>ul>li .depth2>ul>li>a:hover{color: #fff;}

#gnb>ul>li:hover>a{color:var(--pri);}

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

/* main */ 
.main-visual {position:relative; overflow:hidden;height:100%;display:flex;align-items:center;}
.main-visual:after{content:'';width:348px;height:267px;background:url('/images/main/vis-logo.png')no-repeat 50% 50%/contain;position: absolute;left:50%;top:50%;margin-left:-174px;margin-top:-133px;display:none;}


.main-visual .wrap22 {position:relative; padding-bottom:56.25%; overflow:hidden;width:100%;border-radius:var(--bd24);}
.main-visual .wrap22 video,
.main-visual .wrap22 iframe {position:absolute; top:0; left:0; width:100%; height:100%;}

/* .main-visual  video{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
.main-visual  iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;} */

.main-visual .wrap{position:relative;padding-bottom:86%;height:0px;overflow:hidden;}


/* sub page */
.sub-title{margin:20px 0 55px;}
.sub-title h1{position:relative;padding-left:50px;font-size:35px;font-weight:700;color:var(--dark);line-height:1.2em;}
.sub-title h1:before{content:'';width:37px;height:32px;background:url('/images/common/title-bullet.png')no-repeat 0 50%/contain;position: absolute;left:0;top:.1em;}


/* .real-cont {padding:0 0 100px;} */

/* footer */
#footer {display:none;}
.footer{color: #fff;}
.footer .tit{margin-bottom:10px;font-weight:600;}
.footer .foot-info address {font-size:14px;line-height:1.43em;font-weight:200;font-style:normal;}
.footer .foot-info address .wrap{margin-top:3px;display:flex;}
.footer .foot-info address .wrap p{margin-right:12px;font-weight:500;}
.footer .foot-info address .wrap p:last-child{margin-right:0;}
.footer .foot-info .copy{margin-top:13px;font-size:10px;font-weight:200;letter-spacing:0;line-height:1.4em;}
.footer .foot-info .btn-link{display:flex;justify-content:center;align-items:center;margin-top:25px;width:178px;height:38px;border:1px solid rgba(255,255,255,.4);border-radius:var(--bd8);font-size:14px;font-weight:500;line-height:1.2em;transition:.3s;color: #fff;}
.footer .foot-info .btn-link:hover{background-color:var(--pri);border-color:var(--pri);color: #fff;}

.scroll-top{position: fixed;right:30px;bottom:30px;width:54px;height:54px;border-radius:50%;/* box-shadow:5px 5px 10px rgba(0,0,0,.3); */display:flex;justify-content:center;align-items:center;background-color: #242424;z-index:100;}
.scroll-top span{position:relative;padding-top:15px;font-size:12px;font-weight:700;letter-spacing:-.06em;line-height:1.2em;color: #fff;z-index:1;}
.scroll-top span:before{content:'';width:12px;height:8px;background:url('/images/common/top.png')no-repeat 50% 50%/contain;position: absolute;left:50%;margin-left:-6px;top:0;}


/* for mobile */
.only-mobile {display:none;}
.btn-m-menu {display:block; position:absolute; top:50%; margin-top:-11px; right:30px; width:30px; height:22px;  text-align:center; text-indent:-9999em; z-index:99; transition:all 0.5s ease-in-out;}
.btn-m-menu span {position:absolute; right:0; top:50%; margin-top:-1px; height:2px; width:23px;background:#242424;}
.btn-m-menu span:before,
.btn-m-menu span:after {content:" "; position:absolute; right:0; width:30px; height:2px; background:#242424; 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;}
.mobile-navigation {position:fixed; top:0; left:0; width:100%; min-height:100vh; overflow:auto; transition:.3s ease-in-out; background:url('/images/common/menu-bg.jpg')no-repeat 50% 50%/cover; z-index:202;z-index:-1;opacity:0;}
.mobile-navigation .nav-head .contain{display:flex;justify-content:space-between;align-items:center;max-width:1580px;width:100%;height:120px;}
.mobile-navigation .nav-head .close{display:block;width:28px;height:27px;background:url('/images/common/menu-close.png')no-repeat 100% 50%/contain;font-size:0;}
.mobile-navigation .menu-wrap{padding:80px 0;}
.mobile-navigation .menu-wrap .contain{max-width:1390px !important;}
.mobile-navigation .menu-wrap .nav-menu>ul{display:flex;justify-content:space-between;align-items:flex-start;margin:0 -20px;}
.mobile-navigation .menu-wrap .nav-menu>ul>li{padding:0 20px;}
.mobile-navigation .menu-wrap .nav-menu>ul>li>a{position:relative;display:inline-block;font-size:var(--fz40);font-weight:700;color: #fff;line-height:1.2em;}
.mobile-navigation .menu-wrap .nav-menu>ul>li>a:before{content:'';width:0;height:12px;border-radius:6px;background-color: #f6cb2d;position: absolute;left:50%;bottom:2px;opacity:0;transition:.3s;z-index:-1;}
.mobile-navigation .menu-wrap .nav-menu>ul>li>a:after{content:'';width:8px;height:8px;border-radius:50%;background-color: #f6cb2d;position: absolute;right:-13px;top:0;opacity:0;transition:.3s;}
.mobile-navigation .menu-wrap .nav-menu>ul>li:hover>a:before{width:100%;left:0;opacity:1;}
.mobile-navigation .menu-wrap .nav-menu>ul>li:hover>a:after{opacity:1;}
.mobile-navigation .menu-wrap .nav-menu>ul>li .submenu{margin-top:30px;}
.mobile-navigation .menu-wrap .nav-menu>ul>li .submenu>ul>li{margin-bottom:10px;}
.mobile-navigation .menu-wrap .nav-menu>ul>li .submenu>ul>li:last-child{margin-bottom:0;}
.mobile-navigation .menu-wrap .nav-menu>ul>li .submenu>ul>li>a{position:relative;display:inline-block;font-size:var(--fz22);color:rgba(255,255,255,.4);transition:.3s;line-height:1.3em;font-weight:500;}
.mobile-navigation .menu-wrap .nav-menu>ul>li .submenu>ul>li>a:after{content:'';width:0;height:2px;background-color: #fff;position: absolute;left:50%;bottom:0;opacity:0;transition:.3s;}
.mobile-navigation .menu-wrap .nav-menu>ul>li .submenu>ul>li:hover>a{color:#fff;}
.mobile-navigation .menu-wrap .nav-menu>ul>li .submenu>ul>li:hover>a:after{width:100%;left:0;opacity:1;}
.mobile-navigation .menu-wrap .nav-menu>ul>li .submenu>ul>li .depth2{margin-top:5px;}
.mobile-navigation .menu-wrap .nav-menu>ul>li .submenu>ul>li .depth2>ul>li{margin-bottom:5px;}
.mobile-navigation .menu-wrap .nav-menu>ul>li .submenu>ul>li .depth2>ul>li:last-child{margin-bottom:0;}
.mobile-navigation .menu-wrap .nav-menu>ul>li .submenu>ul>li .depth2>ul>li>a{position:relative;display:inline-block;line-height:1.3em;font-size:var(--fz18);color:rgba(255,255,255,.4);transition:.3s;font-weight:500;}
.mobile-navigation .menu-wrap .nav-menu>ul>li .submenu>ul>li .depth2>ul>li>a:hover{color: #fff;}

.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);  */opacity:1;z-index:999;}
html.menu-opened .mobile-overlay {display:block;}