@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; } 
.only-desktop { display:block; } 
.only-tablet { display:none; } 
.only-mobile { display:none; } 

#wrapper { overflow:hidden; } 
/* header */
#header { position:absolute; z-index:90; left:0; top:0; width:100%; transition:0.2s all ease; border-bottom:1px solid rgba(255,255,255,0.4); } 
#header .contain { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--header-height); z-index: 10; } 
#sub #header .contain { max-width: 1600px; } 
.sitelogo a { display:block; width:62px; height:70px; background-repeat:no-repeat; background-color:transparent; background-position:50% 50%; background-size:contain; border:0; text-indent:-999em; overflow:hidden; background-image:url("../images/common/logo2.png") } 

#gnb { padding-right:var(--space-70); } 
#gnb > ul { position:relative; display:flex; justify-content:end; } 
#gnb > ul > li { position:relative; text-align:center; width:150px; } 
#gnb > ul > li > a { display:flex; font-size:var(--font-size-18); font-weight:600; height:var(--header-height); line-height:1.4em; letter-spacing:-0.03em; color:#fff; position:relative; align-items: center; justify-content: center; } 
#gnb > ul > li > a:before { content: ""; position: absolute; border-left: 15px solid var(--color-primary); border-top: 15px solid transparent; border-bottom: 15px solid transparent; left: 50%; margin-left: -6px; transform: rotate(-90deg); bottom: -8px; opacity: 0; transition: 0.2s all ease; } 
#gnb > ul > li.active > a:before { opacity:1; } 

#gnb .submenu { position:absolute; display:none; left:50%; min-width:170px; transform:translateX(-50%); top:var(--header-height); text-align:center; z-index:21; background:var(--color-primary); border-radius: 10px; } 
#gnb .submenu ul { position:relative; padding:var(--space-20) 0; } 
#gnb .submenu ul li { line-height:1em; padding:10px 0; } 
#gnb .submenu ul li:last-child { border-bottom:0; } 
#gnb .submenu ul li a { display:block; position:relative; font-weight:400; letter-spacing:-0.03em; color:#fff; line-height:1em; transition:0.2s all ease; } 
#gnb .submenu ul li:hover a { text-decoration:underline; font-weight:600; } 

#header.header-hover { background:#fff; } 
/* #header.header-hover .sitelogo a { background-image:url("../images/common/logo-on.png"); }  */
#header.header-hover #gnb > ul > li > a { color:#242424; } 
#header.header-hover .btn-all-menu span ,
#header.header-hover .btn-all-menu span:before,
#header.header-hover .btn-all-menu span:after { background:#242424; } 
#header.header-hover .btn-m-menu span ,
#header.header-hover .btn-m-menu span:before,
#header.header-hover .btn-m-menu span:after { background:#242424; } 

/* main */
[data-aos=fade-up] { transform: translate3d(0,100px,0); } 
.main-visual { position:relative; height:100vh; overflow:hidden; color:#fff; } 
.main-visual .item { position:relative; height:100vh; overflow:hidden; } 
.main-visual .image { position:relative; height:100vh; 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 .main-video { position:absolute; bottom:0; left:0; width:100%; height:100%; overflow:hidden; background-color: #000; } 
.main-video video { position: absolute; bottom: 0; left: 0; width: 100%; height: 116.6%; object-fit: cover; } 
.main-visual .caption { position:absolute; top:50%; transform:translateY(-50%); width:100%; z-index:40; } 
.main-visual .caption p { opacity:0; transform:translateY(50px); transition:1.4s; text-align: center; line-height:1.3em; } 
.main-visual .caption p.t1 { margin-bottom:var(--space-20); font-weight:800; font-size: var(--font-size-32); color: #8db7ff; } 
.main-visual .caption p.t2 { font-weight:800; font-size: var(--font-size-64); color: #fff; } 
.main-visual .slick-arrow { position:absolute; top:50%; transform:translateY(-50%); width:30px; height:59px; background:url("../images/main/slide_btn.svg") no-repeat center/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:var(--space-50); } 
.main-visual .slick-next { right:var(--space-50); transform: rotate(180deg) translateY(50%); } 
.main-visual .slick-dots { position:absolute; bottom:var(--space-90); left:0; width:100%; text-align:center; line-height:0; z-index:50; } 
.main-visual .slick-dots li { display:inline-block; margin:0 9px; } 
.main-visual .slick-dots li button { position:relative; display:block; width:38px; height:38px; opacity:.5; background:transparent; border:1px solid transparent; 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:-7px 0 0 -7px; width:13px; height:13px; background:#fff; border-radius:100%; } 
.main-visual .slick-dots .slick-active button { border:1px solid #fff; opacity:1; } 
.main-visual .active .image { 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; } 

.section { padding: var(--space-120) 0 var(--space-150); } 
.m-head { text-align:center; margin-bottom: var(--space-50); } 
.m-head h2 { font-size: var(--font-size-40); font-weight: 700; color: #242424; line-height: 1em; text-align: center; } 
.m-head p { margin-top:var(--space-20); } 

.link-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--space-40); } 
.link-list a { padding:var(--space-50); background: url(/images/main/curriculum-01.jpg) no-repeat center/cover; border-radius: var(--border-radius-25); } 
.link-list a.box2 { background-image: url(/images/main/curriculum-02.jpg); } 
.link-list a.box3 { background-image: url(/images/main/curriculum-03.jpg); } 
.link-list .txt-wrap { display:flex; flex-direction: column; justify-content: space-between; height: 100%; color: #fff; } 
.link-list h3 { font-size: var(--font-size-32); line-height: normal; margin-bottom: var(--space-16); } 
.link-list .txt-wrap p { font-size: var(--font-size-16); line-height: inherit; margin-bottom: var(--space-30); } 
.link-list .btn-link { margin:0 !important; } 
.link-list a:hover .btn-link { background-color: var(--color-primary); border-color: var(--color-primary); } 

.doc-guide .link-list { width:100%; max-width: 790px; margin:0 auto; padding-top:var(--space-70); grid-template-columns: repeat(2, 1fr); } 
.doc-guide .link-list a { padding:var(--space-50) var(--space-30); } 
.doc-guide .link-list a.box1 { background-image: url(/images/sub/curriculum-01.jpg); } 
.doc-guide .link-list a.box2 { background-image: url(/images/sub/curriculum-02.jpg); } 
.doc-guide .link-list a.box3 { background-image: url(/images/sub/curriculum-03.jpg); }
.doc-guide .link-list h3 { margin-bottom: var(--space-90); } 

/* 20250408 추가 */
.doc-guide.ty2 .link-list {max-width: unset; display:block;}
.doc-guide.ty2 .link-list .slick-list {margin:0 -20px;}
.doc-guide.ty2 .link-list .slick-slide {padding:0 20px;}
.doc-guide.ty2 .link-list a {padding:var(--space-50) var(--space-60); background: #000; background-repeat: no-repeat; background-size: cover;}
.doc-guide.ty2 .link-list h3 { margin-bottom: var(--space-16);}
.doc-guide.ty2 .link-list .txt-wrap p {text-align:unset; margin-bottom:var(--space-120);}
.doc-guide.ty2 .link-list a.box3 { background-image: url(/images/sub/curriculum-01.jpg); } 
.btn-link { display: flex; align-items: center; justify-content: space-between; width: clamp(118px, calc(158 / var(--inner)* 100vw), 158px); height: clamp(36px, calc(46 / var(--inner)* 100vw), 46px); border-radius: 50vh; padding: 0 16px; color: #fff; font-size: var(--font-size-15); line-height: 1em; border: 1px solid #fff; } 
.btn-link span { width: 6px; height: 12px; background: url(/images/main/arrow-wht.png) no-repeat center/contain } 

.btn-link.type2 { margin:var(--space-80) auto 0; padding: 0 20px; color: #aaa; font-weight:500; border: 1px solid #aaa; background-color: #fff; } 
.btn-link.type2 span { width: 7px; height: 13px; background: url(/images/main/arrow-grey.png) no-repeat center/contain } 
.btn-link.type2:hover { background-color: var(--color-primary); color: #fff; border-color: var(--color-primary); } 
.btn-link.type2:hover .arrow { background-image: url(/images/main/arrow-wht.png); } 

.icon-list2 { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-radius: var(--border-radius-25); } 
.icon-list2 > li { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 310px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center; background-color: #fff; padding: 0 10px; } 
.icon-list2 > li:first-child { border-top-left-radius: var(--border-radius-25); } 
.icon-list2 > li:nth-child(4) { border-top-right-radius: var(--border-radius-25); } 
.icon-list2 > li:nth-child(5) { border-bottom-left-radius: var(--border-radius-25); } 
.icon-list2 > li:nth-child(8) { border-bottom-right-radius: var(--border-radius-25); } 
.icon-list2 > li > h3 { margin-top:var(--space-20); font-size: var(--font-size-18); line-height: 1em; color: #11449b; } 
.icon-list2 > li > p { font-weight:500; margin-top:var(--space-10); } 
.icon-list2 > li .ico img { height:var(--space-80); } 

.section.banner { border-bottom:1px solid #ddd; } 
.section.banner .m-head { margin-bottom: 0; } 
.banner .m-head h2 { color:var(--color-primary); } 
.banner .bar { width: 2px; display: block; height: var(--space-40); background: var(--color-primary); margin: var(--space-20) auto; } 
.banner strong { font-size: var(--font-size-28); line-height: 1.29em; } 

/* sec3 */
.sec3 { background: url(/images/main/bg-sec3.jpg) no-repeat center/cover; } 
.one-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--space-40); } 
.one-list > li { display:flex; flex-direction: column; justify-content: center; align-items: center; width:320px; height:320px; border-radius: 100%; color: #fff; background-color: rgba(255,255,255,0.1); text-align:center; margin: 0 auto; } 
.one-list span { display: block; font-weight:500; line-height:1em; letter-spacing: -0.02em; } 
.one-list .tit { margin-top:10px; font-weight:600; font-size: var(--font-size-18); line-height:1.44em; letter-spacing: -0.02em; } 
.one-list .tx { margin-top:10px; } 

/* sec4 */
.space-slide { width: 100%; max-width: 800px; margin: 0 auto; } 
.space-slide .slider { position:relative; text-align:center; } 
.space-slide .swiper { overflow: visible; padding: 16px; margin: -16px; } 
.space-slide .swiper-slide a { transform: scale(0.8); } 
.space-slide .swiper-slide.swiper-slide-active a { transform: scale(1); } 
.space-slide .slider .item a { display:block; } 
.space-slide .slider .item .thumb { position:relative; overflow:hidden; padding-bottom:56.32%; border-radius: var(--border-radius-16); box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1); } 
.space-slide .slider .item .thumb 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; border-radius: var(--border-radius-16); box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1); } 
.space-slide .slide-arrow { position:absolute; top:50%; z-index:50; overflow:hidden; width:clamp(24px, calc( 44 / var(--inner) * 100vw ), 44px ); height:clamp(24px, calc( 44 / var(--inner) * 100vw ), 44px ); border-radius:100%; border:1px solid #fff; background-color:transparent; background-position:center; background-repeat:no-repeat; background-size:10px auto; font-size:0; line-height:0; text-indent:-9999em; transition:.2s; background-image:url("../images/main/slide_btn.svg"); } 
.space-slide .slide-arrow:hover { background-color: var(--color-primary); border-color: var(--color-primary); } 
.space-slide .slide-prev { left: -54%; } 
.space-slide .slide-next { right:-54%; transform: rotate(180deg); } 
.space-slide .txt-wrap { display:none; margin-top:var(--space-40); text-align: left; } 
.space-slide .tit { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; font-size: var(--font-size-20); color: var(--color-dark); } 
.space-slide .desc { margin-top:var(--space-10); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height:1.5em; color: #555555; } 
.space-slide .swiper-slide.swiper-slide-active a .txt-wrap { display:block; } 

/* sec5 */
.tab-slider .tab { margin-bottom:var(--space-60); } 
.tab-slider .tab ul { display:flex; justify-content:center; gap:var(--space-20); } 
.tab-slider .tab ul li a { display:flex; justify-content:center; align-items:center; width: clamp(91px, calc(161 / var(--inner)* 100vw), 161px); height: clamp(29px, calc(49 / var(--inner)* 100vw), 49px); border-radius:50vh; background:#fff; border: 1px solid var(--color-primary); color:var(--color-primary); text-align:center; font-size: var(--font-size-15); font-weight:500; } 
.tab-slider .tab ul li.active a { background:var(--color-primary); border-color: var(--color-primary); color: #fff; } 
.tab-slider .slider { position:relative; text-align:center; } 
.tab-slider .slider .item a { display:block; } 
.tab-slider .slider .item .thumb { position:relative; overflow:hidden; padding-bottom:68.81%; margin-bottom:10px; } 
.tab-slider .slider .item .thumb 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; } 
.tab-slider .slider .slide-arrow { position:absolute; top:50%; z-index:50; overflow:hidden; width: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px );; height: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px );; margin-top: -2%; border-radius:100%; border:1px solid #ddd; background-color: transparent; font-size:0; line-height:0; text-indent:-9999em; transition:.2s; background-repeat: no-repeat; background-position: center; background-size: 10px auto; } 
.tab-slider .slider .slide-arrow:hover { background-color:var(--color-primary); } 
.tab-slider .slider .slide-prev { left: -7%; background-image:url("../images/main/slide-grey.png"); transform: rotate(-180deg); } 
.tab-slider .slider .slide-next { right:-7%; background-image:url("../images/main/slide-grey.png"); } 
.tab-slider .slider .slide-prev:hover { background-image: url(/images/main/slide-wht.png); } 
.tab-slider .slider .slide-next:hover { background-image: url(/images/main/slide-wht.png); } 
.tab-slider .slider .tit { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:15px; font-weight:600; font-size: var(--font-size-20); color: var(--color-dark); line-height:1.5em; } 
.tab-slider .slider .date { color: #999999; margin-top:5px; } 

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

#sub #contArea,
#sub .contain { max-width: 1400px; } 

.sub-title { padding: var(--space-100) 0 var(--space-80); text-align:center; } 
.sub-title h1 { font-size:var(--font-size-40); line-height:1em; color:var(--color-dark); letter-spacing: -0.02em; } 

.real-cont { padding:0 0 var(--space-170); } 

.sub-visual { position:relative; height:500px; z-index:10; overflow:hidden;} 
.sub-visual.other {overflow:unset;}
.sub-visual.other .background-div {position:relative; height:100%; 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; } 
.sub-visual .tt-wrap .tit { font-size: var(--font-size-40); line-height: 1.2em; font-weight: 700; } 
.sub-title p { font-weight:800; font-size: var(--font-size-24); line-height: 1em; margin-top:var(--space-10); } 

.lnb-wrap { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; background-color: rgba(255,255,255,0.5); } 
.lnb { margin: 0 auto; max-width: 1200px; } 
.lnb ul li { flex: 1; width: auto; text-align: center; } 

.lnb ul li { width: auto; text-align: center; } 
.lnb ul li a { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: var(--lnb-height); padding: 0 15px; color: #454545; font-size: var(--font-size-18);font-weight: 600; line-height: 1.2em; letter-spacing: -.03em; transition: none; } 
.lnb ul li.active a {color: var(--color-primary); }

.lnb.other .swiper {overflow: unset;}
.lnb ul .single>a {position: relative;}
.lnb ul .single>a:before {content: ""; position: absolute; border-left: 15px solid var(--color-primary); border-top: 15px solid transparent; border-bottom: 15px solid transparent; left: 50%; margin-left: -6px;transform: rotate(-90deg); bottom: -8px; opacity: 0; transition: 0.2s all ease;}
.lnb ul .single:hover>a:before {opacity: 1;}
.lnb ul .single .single-menu {display:none; position: absolute; transform: translateX(-45%); min-width: 912px;  transition: 0.2s all ease;}
.lnb ul .single .single-menu ul {display:flex; background-color: #11449b; align-items: center; border-radius: 10px; padding: 0 25px;}
.lnb ul .single .single-menu ul li {flex: 1 0 auto;}
.lnb ul .single .single-menu ul li a {font-size: 16px; font-weight: 500; color: #fff; letter-spacing: -.03em; height: 55px;  display: inline-flex; align-items: center; justify-content: center;}
.lnb ul .single:hover .single-menu {display:block;}
/* .lnb ul .single.active .single-menu {display:block;}
.lnb ul .single.active a:before {opacity: 1;} */

/* footer */
#footer { background-color: #282828; padding: var(--padding-40) 0; letter-spacing: -0.02em; } 
#sub #footer .contain { max-width: 1600px; } 
#footer .foot-menu { padding:var(--space-30) 0; border-bottom: 1px solid rgba(255,255,255,0.3); } 
#footer .foot-menu .contain { display: flex; gap: var(--space-30); } 
#sub #footer .foot-menu .contain { max-width: 1600px; } 
#footer .foot-menu li a { color: #ababab; font-size: var(--font-size-14); font-weight:500; } 
#footer .flex-wrap { padding:var(--space-80) 0; } 
#footer .foot-logo { margin-right:var(--space-60); } 
#footer .foot-info { min-width: 0; width: 1%; flex: 1 1 auto; } 
#footer .foot-info address { font-style: normal; display: flex; flex-wrap: wrap; gap: 0 var(--space-30); max-width: 500px; } 
#footer .foot-info address p { font-weight:500; font-size: var(--font-size-15); color: #878787; line-height:1.87em; } 
#footer .foot-info .copy { font-weight:500; font-size: var(--font-size-13); line-height: 2em; color: #666666; margin-top: 10px; } 

.scroll-top { position: fixed; opacity: 0; bottom: var(--space-70); right: var(--container-space); text-align: right; pointer-events: none; z-index:100; } 
.scroll-top.active { opacity: 1; pointer-events: auto; } 

/* for mobile */
.only-mobile { display:none; } 
.btn-m-menu { display:block; position:absolute; top:50%; margin-top:-11px; right:var(--container-space); 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:#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; } 
.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:20px; } 
.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:var(--color-primary) } 
.mobile-navigation .nav-menu>ul>li.active>a:after { transform:translateY(-35%) rotate(-135deg); border-color:var(--color-primary); } 
.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:var(--color-primary) } 
.mobile-navigation .nav-menu .submenu>ul>li>a:hover:after { background:var(--color-primary) } 
.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; }