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

.contain {max-width:1520px; margin:0 auto; padding-left:var(--container-space); padding-right:var(--container-space); } 

/* header */
#wrapper {position:relative; padding-top:var(--header-height); transition:padding .4s;}
#header {position:fixed; top:0; left:0; z-index:100; display:flex; align-items:center; width:100%; height:var(--header-height); padding:0 var(--container-space); background:#fff; transition:.4s;} 

.sitelogo {line-height:0;}
.sitelogo img {height:clamp(24px, calc( 40 / var(--inner) * 100vw ), 40px);}

.top-search {position:relative; width:clamp(200px, calc( 400 / 1800 * 100vw ), 400px); margin-left:clamp(30px, calc(90 / 1800 * 100vw ), 90px);}
.top-search .input {display:block; width:100%; height:clamp(50px, calc(64 / var(--inner) * 100vw ), 64px); padding:0 65px 0 30px; border-radius:100px; border:1px solid #ddd; font-size:16px; font-weight:600; line-height:1.5em; outline:none; transition:.2s;}
.top-search .input:focus {border:1px solid var(--color-primary);}
.top-search .submit {line-height:0; background:none; border:0; position:absolute; top:50%; right:20px; -webkit-transform:translateY(-50%); transform:translateY(-50%);}

.m-btn-search {display:none;}

.top-links {margin-left:20px;}
.top-links ul {display:flex; align-items:center; gap:clamp(16px, calc(28 / var(--inner) * 100vw ), 28px);}
.top-links ul li a {display:flex; align-items:center; gap:5px; font-size:var(--font-size-15); font-weight:500; letter-spacing:-.03em; line-height:1.5em; color:#242424;}

#gnb {flex:1 1 auto; min-width:0; width:1%; text-align:center;} 
#gnb>ul {display:flex; justify-content:flex-end;} 
#gnb>ul>li {position:relative; padding:0 clamp(25px, calc(50 / 1800 * 100vw ), 50px);} 
#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-18); font-weight:600; letter-spacing:-.03em; line-height:1.2em;}
#gnb>ul>li>a:after {content:""; position:absolute; top:calc(50% + 26px); left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); width:10px; height:10px; border-radius:100%; background:var(--color-primary); opacity:0; transition:.2s;}
#gnb>ul>li.active>a:after {top:calc(50% + 20px); opacity:1;}
#gnb>ul>li.hover .submenu { pointer-events:auto; opacity:1; top:100%;}
#gnb .submenu {position:absolute; top:calc(100% - 10px); left:50%; padding:10px; width:100%; text-align:center; -webkit-transform:translateX(-50%); transform:translateX(-50%); pointer-events:none; opacity:0; transition:.2s;} 
#gnb .submenu>ul {position:relative;} 
#gnb .submenu>ul>li {position:absolute; padding:10px;}
#gnb .submenu>ul>li>a {display:flex; align-items:center; flex-direction:column; justify-content:center; gap:20px; width:180px; height:180px; padding:10px; background:#fff; box-shadow: 6px 6px 30px 0 rgba(0, 0, 0, 0.20); border-radius:20px; font-size:var(--font-size-16); font-weight:600; line-height:1.2em; color:#242424;} 
#gnb .submenu>ul>li>a:hover {transform:scale(0.95);}
#gnb .submenu>ul>li:nth-child(1) {top:46px; right:calc(50% + 100px);}
#gnb .submenu>ul>li:nth-child(2) {top:0; left:calc(50% - 100px);}
#gnb .submenu>ul>li:nth-child(3) {top:200px; left:calc(50% - 100px);}
#gnb .submenu>ul>li:nth-child(4) {top:46px; left:calc(50% + 100px);}
#gnb .submenu.st3>ul>li:nth-child(1) {top:0; left:calc(50% - 100px);}
#gnb .submenu.st4>ul>li:nth-child(3) {top:46px; left:calc(50% + 100px);}
#gnb .submenu.st4>ul>li:nth-child(4) {top:246px; right:calc(50% + 100px); left:auto;}
#gnb .submenu.st4>ul>li:nth-child(5) {top:200px; left:calc(50% - 100px);}

.scroll #wrapper {padding-top:var(--header-scroll-height);}
.scroll #header {height:var(--header-scroll-height); box-shadow:0 0 12px rgba(0, 0, 0, 0.1);}
.scroll #gnb>ul>li>a {height:var(--header-scroll-height);}
.scroll .top-search .input {height:clamp(44px, calc(56 / var(--inner) * 100vw ), 56px);}

/* for mobile */
.btn-m-menu {display:none; position:relative; width:24px; height:24px; margin-left:15px;} 
.btn-m-menu div {display:flex; flex-direction:column; justify-content:center; gap:7px; width:100%; height:100%;}
.btn-m-menu span {display:block; height:2px; width:100%; background:#242424;} 

.mobile-navigation {position:fixed; top:0; right:0; width:320px; 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; padding:20px;} 
.mobile-navigation .home a { display:block; } 
.mobile-navigation .home img {height: clamp(24px, calc(40 / var(--inner) * 100vw), 40px);} 
.mobile-navigation .links {padding:15px 20px; border-top:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf;}
.mobile-navigation .links ul {display:flex; flex-wrap:wrap; gap:25px;}
.mobile-navigation .links ul li a {display:flex; align-items:center; gap:5px; color:#505050; font-weight: 600;}
.mobile-navigation .nav-menu>ul>li { border-bottom:1px solid #dfdfdf; } 
.mobile-navigation .nav-menu>ul>li>a { position:relative; padding:12px 20px; display:block; color:#242424; 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: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; padding:5px 20px 20px;} 
.mobile-navigation .nav-menu .submenu>ul {display:grid; gap:6px;}
.mobile-navigation .nav-menu .submenu>ul>li>a {display:flex; align-items:center; gap:10px; padding:10px 20px; color:#454545; font-size:16px; font-weight:500; line-height:1.3em; border:1px solid #eee; border-radius:10px; box-shadow:0 0 6px rgba(0, 0, 0, 0.1);} 
.mobile-navigation .nav-menu .submenu>ul>li>a img {width:100%; max-width:24px;}
.mobile-navigation .nav-menu .submenu>ul>li>a span {}
.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 */
.main-visual,
.main-visual .item {position:relative; height:700px; overflow:hidden;}
.main-visual .item .video-js,
.main-visual .item video,
.main-visual .item img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.main-visual .item iframe {position:absolute; top:50%; left:50%; width:100vw; height:100vh; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.main-visual .arrows {position:absolute; bottom:30px; right:var(--container-space); z-index:30; display:flex; gap:10px;}
.main-visual .slick-arrow {display:flex; justify-content:center; align-items:center; width:56px; height:56px; background-color:transparent; border:1px solid rgba(255, 255, 255, 0.3); color:#fff; border-radius:100%; overflow:hidden; transition:.2s;}
.main-visual .slick-arrow:hover {background-color:var(--color-primary); border-color:var(--color-primary);}
.main-visual .slick-next svg {-webkit-transform:scaleX(-1); transform:scaleX(-1);}

@media (min-aspect-ratio: 16/9) {
	.main-visual .item iframe {height:56.25vw;}
}
@media (max-aspect-ratio: 16/9) {
	.main-visual .item iframe {width:177.78vh;}
}

.main-links {display:flex; margin-bottom:var(--space-160);}
.main-links .link-item {flex:1; display:flex; align-items:center; justify-content:space-between; gap:10px; height:160px; padding:var(--space-20) var(--space-50); background-position:50% 50%; background-repeat:no-repeat; background-size:cover; color:#fff; font-size:var(--font-size-24); font-weight:700; line-height:1.33em;}
.main-links .link-item:after {content:''; width:61px; height:8px; background:url('/images/main/arrow.svg') 100% 50% no-repeat; transition:.2s;}
.main-links .link-item.n1 {background-image:url('/images/main/bnr1.jpg')}
.main-links .link-item.n2 {background-image:url('/images/main/bnr2.jpg')}
.main-links .link-item.n3 {background-image:url('/images/main/bnr3.jpg')}
.main-links .link-item.n4 {background-image:url('/images/main/bnr4.jpg')}
.main-links .link-item:hover::after {transform:translateX(10px);}

.m-tit {margin-bottom:var(--space-50); font-size:var(--font-size-40); line-height:1.2em; letter-spacing:-.03em;}

.m-btn {position:absolute; top:-8px; right:0; display:inline-block; padding:18px 48px; text-align:center; border:1px solid #ddd; border-radius:100px; font-size:var(--font-size-18); font-weight: 500; line-height:1.5em;}
.m-btn:hover {color:#fff; background-color:var(--color-primary); border-color:var(--color-primary);}

.m-arrows {display:flex; gap:10px; margin-top:40px;}
.m-arrows .slide-btn {display:flex; justify-content:center; align-items:center; width:56px; height:56px; background-color:transparent; border:1px solid #ddd; color:#454545; border-radius:100%; overflow:hidden; transition:.2s;}
.m-arrows .slide-btn:hover {background-color:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.m-arrows .slide-btn.next svg {-webkit-transform:scaleX(-1); transform:scaleX(-1);}

.main-section {margin-bottom:var(--space-160);}
.main-section .wrap {position:relative;}

.main-edu .box {display:flex; box-shadow: 6px 6px 30px 0 rgba(0, 0, 0, 0.20); border-radius:20px;}
.main-edu .cal-area {width:calc(50% - 10px);}
.main-edu .list-area {flex:1 1 auto; min-width:0; width:1%; position:relative; border:1px solid #ddd; border-radius:20px;}
.main-edu .list-area .scrolled {overflow:auto; position:absolute; top:20px; right:20px; bottom:20px; left:20px; padding:0 40px;}
.main-edu .list-area .scrolled::-webkit-scrollbar {background:transparent; width:8px; height:8px;}
.main-edu .list-area .scrolled::-webkit-scrollbar-thumb {background:#e5e5e5; border-radius:8px;}
.main-edu .list-area ul li {padding:30px 0; border-bottom:1px solid #ddd;}
.main-edu .list-area ul li a {display:block;}
.main-edu .list-area ul li .date {margin-bottom:18px; color:#8f8f8f; font-size:var(--font-size-18); font-weight:500; line-height:1.3em; transition:.2s;}
.main-edu .list-area ul li .tit {margin-bottom:18px; max-height:1.4em; color:#242424; font-size:var(--font-size-20); font-weight:600; line-height:1.4em; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; transition:.2s;}
.main-edu .list-area ul li .state {display:inline-block; min-width:100px; padding:8px 20px; border-radius:100px; text-align:center; color:#454545; font-size:var(--font-size-15); font-weight:600; line-height:1.5em;}
.main-edu .list-area ul li .state.st1 {color:var(--color-primary); border:1px solid var(--color-primary);}
.main-edu .list-area ul li .state.st2 {color:#7e7e7e; border:1px solid #F4F4F4; background:#F4F4F4;}
.main-edu .list-area ul li a:hover .date {color:var(--color-primary);}
.main-edu .list-area ul li a:hover .tit {color:var(--color-primary);}

.main-calendar {padding:40px 40px 20px;}
.main-calendar .cal-head {position:relative; text-align:center; padding:20px 0; margin-bottom:30px;}
.main-calendar .cal-head .day {font-size:var(--font-size-26); font-weight:700; line-height:1em;}
.main-calendar .cal-head .btn {position:absolute; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
.main-calendar .cal-head .btn.prev {left:2%;}
.main-calendar .cal-head .btn.next {right:2%;}
.main-calendar .cal-table {margin:0 -2%;}
.main-calendar .cal-table table {width:100%; table-layout: fixed; border-collapse:collapse; border-spacing:0px; text-align:center;}
.main-calendar .cal-table table th {padding:0 2px; height:65px; vertical-align:top; color:#454545; font-size:var(--font-size-20); font-weight:500; line-height:1.3em;}
.main-calendar .cal-table table td {padding:0 2px; height:73px; vertical-align:top; color:#454545; font-size:var(--font-size-20); font-weight:700; line-height:1.3em; color:#bebebe;}
.main-calendar .cal-table .state {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; width:100%; max-width:68px; margin:0 auto; aspect-ratio:1/1; border-radius:100%;}
.main-calendar .cal-table .state:after {content:""; width:9px; height:9px; background:transparent; border-radius:100%;}
.main-calendar .cal-table .state.active {color:#242424;}
.main-calendar .cal-table .state.active:after {background:var(--color-primary);}
.main-calendar .cal-table .state.active:hover {background:#E4E8FF;}

.main-notice .link-item {display:block; padding:var(--space-50) var(--space-30); border:1px solid #ddd; border-radius:20px;}
.main-notice .link-item .cate {margin-bottom:var(--space-20); color:#8f8f8f; font-size:var(--font-size-18); font-weight:600; line-height:1.3em; transition:.2s;}
.main-notice .link-item .tit {margin-bottom:var(--space-70); height:calc(1.5em * 2); color:#242424; font-size:var(--font-size-20); font-weight:600; line-height:1.5em; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; transition:.2s; }
.main-notice .link-item .date {display:flex; align-items:center; gap:5px; font-size:var(--font-size-15); line-height:1.5em;}
.main-notice .link-item .date:before {content:''; margin-top:-.1em; width:12px; height:12px; background:url('/images/main/time.svg') 50% 50%/contain no-repeat;}
.main-notice .link-item:hover {border-color:var(--color-primary);}
.main-notice .link-item:hover .cate {color:var(--color-primary);}
.main-notice .link-item:hover .tit {color:var(--color-primary);}

.main-goods .link-item {display:block;}
.main-goods .link-item .thumb {margin-bottom:var(--space-30); aspect-ratio:335/480; border-radius:8px; background:#eee; overflow:hidden;}
.main-goods .link-item .thumb img {width:100%; height:100%; object-fit:contain; transition:.4s;}
.main-goods .link-item .tit {margin-bottom:var(--space-20); color:#242424; font-size:var(--font-size-22); font-weight:700; line-height:1.45em;}
.main-goods .link-item .price {color:var(--color-primary); font-size:var(--font-size-18); line-height:1.3em;}
.main-goods .link-item .price strong {font-weight: 600;}
.main-goods .link-item:hover .thumb img {transform:scale(1.1);}


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

.sub-heading {padding:var(--space-120) 0 var(--space-50);}

.page-depth {display:flex; align-items:center; flex-wrap:wrap; gap:5px 15px; margin-bottom:var(--space-40);}
.page-depth .home {width:16px; height:16px; background:url('/images/common/home.png') 50% 50%/contain no-repeat;}
.page-depth .dot {width:3px; height:3px; background:#b8b8b8; border-radius:100%;}
.page-depth .depth {color:#b8b8b8; font-size:var(--font-size-16); font-weight:600; line-height:1.3em;}
.page-depth .depth:last-child {color:var(--color-primary);}

.sub-title-wrap {display:flex; align-items:flex-end; justify-content:space-between; gap:20px;} 
.sub-title h1 {font-size:clamp(26px, calc(64 / var(--inner) * 100vw ), 64px); line-height:1.2em; color:#242424; letter-spacing:-.03em;} 
.sub-title.center {text-align:center; padding-top:var(--space-100);}

.lnb {margin-bottom:4px;}
.lnb ul {display:flex;}
.lnb ul li {flex:1; text-align:center; padding-left:10px;}
.lnb ul li a {display:flex; flex-direction:column; justify-content:center; align-items:center; min-width:140px; height:var(--lnb-height); padding:0 16px; background:#f4f4f4; border-radius:60px; color:#8f8f8f; font-size:var(--font-size-16); font-weight:600; line-height:1.2em; letter-spacing:-.03em;}
.lnb ul li.active a {color:#fff; background:var(--color-primary);}

.sub-visual {position:relative; height:340px; background:#eee; overflow:hidden;} 
.sub-visual .bg {position:absolute; inset:0; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; -webkit-transform:scale(1.1); transform:scale(1.1); transition:2s; opacity:0;}
.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.load .bg {-webkit-transform:scale(1); transform:scale(1); opacity:1;} 

.real-cont {padding:var(--space-100) 0 var(--space-140); min-height:300px;} 

/* quick */
.quick {position:fixed; top:50%; right:var(--space-40); width:100px; transform:translateY(-50%); text-align:center; z-index:90;}
.quick-links-wrap {background:#fff; border:1px solid #ddd; border-bottom:0; border-radius:8px 8px 0 0;}
.quick-title {position:relative; padding:var(--space-20) 0; color:var(--color-primary); font-weight:500; line-height:1.5em;}
.quick-title:after {content:''; position:absolute; bottom:0; left:50%; width:38px; height:1px; margin-left:-19px; background:#ddd;}
.quick-links {padding:20px 4px;}
.quick-links ul li a {display:block; padding:8px 0; font-size:13px; font-weight:500; line-height:1.5em;}
.quick-links ul li a:hover {color:var(--color-primary);}
.scroll-top {display:flex; justify-content:center; align-items:center; width:100%; height:32px; background:#0A1F8F; border-radius:0 0 8px 8px ;}

/* footer */
#footer {background:#111; padding:var(--space-80) var(--container-space) var(--space-60); color:#B7B7B7; line-height:1.5em;}
#footer address {font-style:normal;}
#footer a:hover {text-decoration:underline;}

.foot-logo {margin-bottom:var(--space-60);}

.foot-info-wrap {display:flex; justify-content:space-between; align-items:flex-end;}
.foot-info address span {display:inline-block; margin:0 24px 10px 0;}
.foot-info address .addr {color:#fff; font-weight:700;}
.foot-info .copy {display:flex; flex-wrap:wrap; gap:6px 24px; margin-top:20px; font-size:var(--font-size-15);}
.foot-links {display:flex; flex-wrap:wrap; gap:6px 18px; font-size:var(--font-size-15);}