@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 
body {overflow-x: hidden;}
#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 {display:block;}
.only-desktop-tablet {display:block;}
.only-tablet-mobile {display:none;}
.only-tablet {display:none;}
.only-mobile {display:none;}

#wrapper {position:relative;}

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

/* header */
#header {position:fixed; top: 0; left: 0; width:100%; height:var(--header-height); background:transparent; transition:.2s; z-index:100;}
#header .contain {display: flex; align-items: center; justify-content: space-between; position:relative; max-width:1884px; height:100%; z-index:10; }

.sitelogo a {display:block; width: 220px; height: 47px; background: url(../images/common/logo.png) no-repeat center / contain;}

#gnb {width: 60%; max-width: 1080px;}
#gnb > ul {display:flex; justify-content:center; width: 100%; text-align:center;}
#gnb > ul > li {position:relative; flex:1;}
#gnb > ul > li > a {display:flex; flex-direction:column; align-items:center; justify-content:center; position: relative; height:var(--header-height); transition: .3s;color:#FFF; font-size:var(--font-size-22); font-weight:600; line-height:1.63em; letter-spacing:-.02em; white-space:nowrap;}
#gnb > ul > li > a:after {content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:0; height:1px; background:var(--color-primary); transition: .3s;}
#gnb > ul > li.active > a:after {width:100%;}
#gnb > ul > li > a div {display:flex; flex-direction:column; align-items:center; justify-content:flex-start; overflow:hidden; height:1.5em; padding:0 4px;}
#gnb .submenu {position:absolute; left:0; width: 100%; height:0; border-right: 1px solid #eee; overflow:hidden; text-align:center; transition: .3s;}
#gnb > ul > li:first-child .submenu {border-left: 1px solid #eee;}
#gnb .submenu>ul {padding: var(--space-21) 0 var(--space-50);}
#gnb .submenu>ul>li>a {display:block; padding: 9px 0; font-size: var(--font-size-20); line-height:1.7em; white-space:nowrap; color: #505050; font-weight: 500;}
#gnb .submenu>ul>li>a:hover {color: var(--color-primary);}

.member-wrap {display:flex; align-items:center; font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em; color: rgba(255, 255, 255, 0.80);}
.member-wrap a {display: flex; align-items: center; position: relative;}
.member-wrap .log-in:after {content:""; display: inline-block; width:1px; height:20px; margin: 0 var(--space-20); background:rgba(255, 255, 255, 0.50); transition: .3s;}
#header.active .member-wrap {color:#505050;}
#header.active .member-wrap .log-in:after {background:#ddd;}

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

#header.active {background:#fff; border-bottom-color:#eee;}
#header.active .sitelogo a {background-image:url(../images/common/logo-active.png);}
#header.active #gnb > ul > li > a {color:var(--color-sub);}

/* member */
#sub:not(:has(.sub-visual)) #header {position: sticky; background:#fff;}
#sub:not(:has(.sub-visual)) #header #gnb > ul > li > a {color:var(--color-sub);} 
#sub:not(:has(.sub-visual)) .sitelogo a {background-image:url(../images/common/logo-active.png);}
#sub:not(:has(.sub-visual)) #header #gnb > ul > li > a {color:var(--color-sub);}
#sub:not(:has(.sub-visual)) #header .member-wrap {color:#505050;}
#sub:not(:has(.sub-visual)) #header .member-wrap .log-in:after {background:#ddd;}

/* for mobile */
.btn-m-menu {display:none; position:absolute; top:50%; right:var(--space-container); width:24px; height:24px; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
.btn-m-menu div {display:flex; flex-direction:column; justify-content:center; gap:7px; width:100%; height:100%;}
.btn-m-menu span {display:block; width:100%; height:2px; background:#fff;}
#header.active .btn-m-menu span {background:#242424;}

.mobile-navigation {display:block;position:fixed; top:0; right:0; width:300px; height:100%; overflow:auto; transition:.2s linear; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:102;}
.mobile-navigation .home {max-height:60px; padding: 19px 20px;}
.mobile-navigation .home a {display: block;  color: #2c2c2c; font-size:20px; font-weight: 700; line-height: 1.3em;}
.mobile-navigation .nav-menu>ul {border-top:1px solid #dfdfdf;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #dfdfdf;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; display:block; padding:13px 20px; color:#242424; font-size:18px; font-weight:700; line-height:1.3em;}
.mobile-navigation .nav-menu>ul>li>a div {display:flex; align-items:flex-end; gap:5px;}
.mobile-navigation .nav-menu>ul>li>a .en {order:2;  font-size:.8em; font-weight:500; line-height:1.3em; opacity:.4;}
.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 #454545; border-bottom:2px solid #454545;}
.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; background:var(--color-primary); padding: 10px 0;}
.mobile-navigation .nav-menu .submenu > ul > li > a {display:flex; align-items:flex-end; gap:5px; padding:8px 20px; color:#fff; font-size:16px; font-weight:500; line-height:1.3em;}
.mobile-navigation .nav-menu .submenu > ul > li > a .bar {display:none;}
.mobile-navigation .nav-menu .submenu > ul > li > a .en {order:2; font-size:.8em; line-height:1.3em; font-weight:400; opacity:.4;}
.mobile-navigation .close {position:absolute; top:15px; right:15px; 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:#242424; 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.6; z-index:101;}

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-visual */
.main-visual {position:relative; width:100%; height:100vh; }
.main-visual .contain {max-width: 1884px;}
.main-visual .items {position:relative; background:#000; overflow:hidden;}
.main-visual .item {position:relative; height:100vh; overflow:hidden;}
.main-visual .img {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; transition:5s linear; transform:scale(1.15);}
.main-visual .img 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 .caption {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height: 100%; z-index:40;}
.main-visual .caption .contain {height: 100%;}
.main-visual .caption .txt {display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: calc(var(--header-height) + var(--space-44)) 0 var(--space-80);}
.main-visual .caption h2,
.main-visual .caption p {transition:1.2s; transform:translate(0,50px); opacity:0;}
.main-visual .caption h2 {font-size:var(--font-size-60); font-weight:600; line-height:1.3em; color:#fff; letter-spacing: -.02em;}
.main-visual .caption p {width: 50%; margin-left: auto; padding-left: var(--space-40); font-size:var(--font-size-22); font-weight:500; line-height:1.636em; color:#fff; letter-spacing: -.02em;}

.main-visual .active .img {transform:scale(1);}
.main-visual .active .caption h2,
.main-visual .active .caption p{transform:translate(0,0); opacity:1;}
.main-visual .active .caption h2 {transition-delay:.3s;}
.main-visual .active .caption p {transition-delay:.5s;}

.main-visual .slick-dots {position:absolute; bottom:var(--space-80); left:50%; transform:translateX(-50%); width:100%; max-width: 1884px; padding:0 var(--space-container); margin:0 auto; text-align:left; line-height:0; z-index:50;}
.main-visual .slick-dots li {display:inline-block; margin:0 2px;}
.main-visual .slick-dots li button {position:relative; display:block; width:28px; height:28px; 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%; transform:translate(-50%,-50%); width:12px; height:12px; background:#ffffff50; border-radius:100%;}
.main-visual .slick-dots .slick-active button {background:#ffffff50;}
.main-visual .slick-dots .slick-active button:before {background:#fff}

.main-visual .item .video-js,
.main-visual .item video {position:absolute; top:0; left: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%);}
.vjs-has-started .vjs-control-bar {display:none !important; visibility:hidden !important;}

/* main section */
.com-btn {display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:var(--space-16) var(--space-28); border-radius:500px; background:#121212; color:#fff; font-size:var(--font-size-20); font-weight:600; line-height:1.7em; letter-spacing:-.02em; white-space:nowrap; transition:.3s;}
.com-btn:after {content:""; display:block; width:18px; height:18px; background:url("../images/main/plus.svg") no-repeat center / contain;}
.com-btn:hover {background:var(--color-primary);}

.main-section {position:relative;}
.main-section .contain {max-width: 1884px;}
.main-sec-tit {color:var(--color-sub); font-size:var(--font-size-48); font-weight:600; line-height:1.375em; letter-spacing:-.02em;}
.main-sec-tit .text-primary {color:var(--color-primary);}
.main-sec-head {display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:var(--space-60);}

.main-news {padding:var(--space-120) 0 var(--space-48); background:#fff;}
.main-news-head {display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:var(--space-60);}
.main-news-tab {display:flex; gap:var(--space-8); flex-wrap: wrap;}
.main-news-tab li button {display:flex; align-items:center; justify-content:center; padding:var(--space-12) var(--space-28); border:1px solid #eee; border-radius:var(--radius-8); background:#fff; color:#878787; font-size:var(--font-size-20); font-weight:600; line-height:1.7em; letter-spacing:-.02em; cursor:pointer; transition: .3s;}
.main-news-tab li button:hover {border-color: var(--color-sub); color: var(--color-sub);}
.main-news-tab li.active button {border-color:#121212; background:#121212; color:#fff;}
.main-news-body {display:flex; align-items: stretch; gap:var(--space-24);}
.main-news-feature {display:flex; flex-direction:column; justify-content:space-between; position:relative; flex: 0 1 50%; max-width: 900px; min-width:0; aspect-ratio: 9 / 5; padding:var(--space-40); border-radius:var(--radius-16); overflow:hidden; color:#fff;}
.main-news-feature:after {content:""; position:absolute; top:var(--space-40); right:var(--space-40); z-index:1; width:48px; height:48px; background:url("../images/main/icon-news-link.png") no-repeat center / contain;}
.main-news-feature-bg {position:absolute; inset:0; z-index:0;}
.main-news-feature-txt {display:flex; flex-direction:column; gap:var(--space-24); position:relative; z-index:1; margin-top:auto;}
.main-news-feature-txt .head {display:flex; flex-direction:column; gap:var(--space-10);}
.main-news-feature-txt .cate {display:block; color:rgba(255,255,255,.6); font-size:var(--font-size-18); font-weight:600; line-height:1.778em; letter-spacing:-.02em;}
.main-news-feature-txt .tit {display:block; color:#fff; font-size:var(--font-size-36); font-weight:600; line-height:1.389em; letter-spacing:-.02em;}
.main-news-feature-txt .desc {display:-webkit-box; overflow:hidden; color:#fff; font-size:var(--font-size-22); font-weight:400; line-height:1.636em; letter-spacing:-.02em; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;}
.main-news-list {display:flex; flex-wrap: wrap; gap:var(--space-16); flex:1; min-width:0;}
.main-news-list li {flex: 0 1 calc(50% - var(--space-16)/2); }
.main-news-list li a {display:flex; flex-direction:column; justify-content:space-between; height: 100%; padding:var(--space-28); border:1px solid #eee; border-radius:var(--radius-16); background:#fff; transition:.3s;}
.main-news-list li .meta {display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-12);}
.main-news-list li .date {color:#878787; font-size:var(--font-size-20); font-weight:400; line-height:1.7em; letter-spacing:-.02em;}
.main-news-list li .tag {display:inline-flex; align-items:center; justify-content:center; padding:var(--space-8) var(--space-16); border-radius:500px; background:#f3f8fb; color:var(--color-primary); font-size:var(--font-size-16); font-weight:500; line-height:1.5em; letter-spacing:-.02em; white-space:nowrap;}
.main-news-list li .tit { width: 81%; color:var(--color-sub); font-size:var(--font-size-24); font-weight:600; line-height:1.667em; letter-spacing:-.02em;}
.main-news-list li.active a {border-color:transparent; background:linear-gradient(135deg, #0066b3 14.62%, #009140 85.38%);}
.main-news-list li.active .date {color:rgba(255,255,255,.8);}
.main-news-list li.active .tag {background:rgba(255,255,255,.16); color:#fff; font-weight:600;}
.main-news-list li.active .tit {color:#fff;}

.main-gallery {padding:var(--space-120) 0 var(--space-48); background:#fff;}
.main-gallery-slider {display:flex; flex-direction:column; gap:var(--space-24);}
.main-gallery .gallery-swiper {width:100%; overflow:hidden;}
.main-gallery-item {display:block; position:relative; border-radius:var(--radius-16); overflow:hidden;}
.main-gallery-item .img {position: relative; overflow: hidden; padding-bottom: 67.6%;}
.main-gallery-item .img img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; 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-gallery-item .over {display:flex; align-items:center; justify-content:center; position:absolute; inset:0; padding:var(--space-24); background:rgba(0,0,0,.5); backdrop-filter:blur(12px); opacity:0; transition:.3s;}
.main-gallery-item .over .tit {color:#fff; font-size:var(--font-size-24); font-weight:600; line-height:1.667em; letter-spacing:-.02em; text-align:center;}
.main-gallery-item:hover .over {opacity:1;}
.main-gallery-ctrl {display:flex; align-items:center; gap:var(--space-28);}
.main-gallery-ctrl .btn-wrap {display:flex; gap:var(--space-8); flex-shrink:0;}
.main-gallery-ctrl .swiper-button-prev,
.main-gallery-ctrl .swiper-button-next {position:static; width:48px; height:48px; margin:0; border:1px solid #ddd; border-radius:500px; background:#fff url("../images/main/gallery-arrow.svg") no-repeat center; cursor:pointer; transition:.3s;}
.main-gallery-ctrl .swiper-button-next {transform: rotate(180deg);}
.main-gallery-ctrl .swiper-button-prev:hover,
.main-gallery-ctrl .swiper-button-next:hover {border-color:var(--color-primary); background-color:var(--color-primary); background-image: url(../images/main/gallery-arrow-active.svg);}
.main-gallery-ctrl .swiper-button-prev:after,
.main-gallery-ctrl .swiper-button-next:after {display:none;}
.main-gallery-ctrl .swiper-pagination {position:relative; flex:1; top:auto; bottom:auto; left:auto; width:auto;}
.main-gallery-ctrl .swiper-pagination-progressbar.swiper-pagination-horizontal {height:2px; border-radius:500px; background:#ddd; overflow:hidden;}
.main-gallery-ctrl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:var(--color-primary); border-radius:500px;}

.main-schedule {padding:var(--space-100) 0 var(--space-120); background:#fafafa;}
.main-schedule-inner {display:flex; align-items:stretch; gap:0;}
.main-schedule-aside {display:flex; flex-direction:column; justify-content:space-between; align-items: flex-start; width:34%; max-width:616px; padding-right:var(--space-40);}
.main-schedule-list-wrap {flex:1; min-width:0;}
.main-schedule .sch-filter {justify-content:flex-end; margin-bottom:var(--space-16);}

/* 학회 일정 목록 (메인·서브 공용) */
.sch-filter {display:flex; gap:var(--space-8);}
.sch-filter .select-box {position:relative; width:160px;}
.sch-filter .select-box:after {content:""; position:absolute; top:50%; right:24px; z-index:1; transform:translateY(-50%); width:18px; height:18px; background:url("../images/main/icon-select.svg") no-repeat center / contain; pointer-events:none;}
.sch-filter .select-box select {width:100%; height:auto; padding:var(--space-16) var(--space-48) var(--space-16) var(--space-24); border:1px solid #eee; border-radius:var(--radius-8); background:#fff; color:var(--color-sub); font-size:var(--font-size-20); font-weight:500; line-height:1.7em; letter-spacing:-.02em; appearance:none; -webkit-appearance:none;}
.sch-list {display:flex; flex-direction:column; gap:var(--space-16); margin:0; padding:0; list-style:none;}
.sch-list li a {display:flex; align-items:center; gap:var(--space-40); position:relative; padding:var(--space-24) calc(var(--space-40) + 48px + var(--space-40)) var(--space-24) var(--space-40); border:1px solid #eee; border-radius:var(--radius-16); background:#fff; transition:.3s;}
.sch-list li .date {display:flex; flex-direction:column; gap:6px; width:90px; flex-shrink:0;}
.sch-list li .date em {color:#a8a8a8; font-size:var(--font-size-20); font-style:normal; font-weight:500; line-height:1.7em; letter-spacing:-.02em;}
.sch-list li .date strong {color:var(--color-primary); font-size:var(--font-size-28); font-weight:600; line-height:1.5em; letter-spacing:-.02em;}
.sch-list li .cnt {display:flex; flex-direction:column; gap:10px; flex:1; min-width:0; padding-left:var(--space-40); border-left:1px solid #eee;}
.sch-list li .tit {overflow:hidden; color:var(--color-sub); font-size:var(--font-size-24); font-weight:600; line-height:1.667em; letter-spacing:-.02em; white-space:nowrap; text-overflow:ellipsis;}
.sch-list li .place {display:flex; align-items:center; gap:10px; color:#878787; font-size:var(--font-size-18); font-weight:400; line-height:1.778em; letter-spacing:-.02em;}
.sch-list li .place:before {content:""; display:block; width:24px; height:24px; flex-shrink:0; background:url("../images/main/place-icon.svg") no-repeat center / contain;}
.sch-list li a:after {content:""; position:absolute; top:50%; right:var(--space-40); width:48px; height:48px; background:url("../images/main/schedule-arrow.png") no-repeat center / contain; opacity:0; transform:translateY(-50%); transition:.3s;}
.sch-list li.active a {border-color:var(--color-primary);}
.sch-list li.active a:after {opacity:1;}

/* sub*/
.sub-visual {position:relative; width:100%; height:clamp(280px, calc(600 / var(--inner) * 100vw), 600px); color:#fff; background-color:#eee; z-index: 2;}
.sub-visual .bg {position:absolute; inset:0; width:100%; height:100%; background-position:50% 50%; background-size:cover; }
.sub-visual .cell {position:absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); width:100%;}
.sub-visual h2 { margin-bottom: var(--space-140); color: #fff; font-size:var(--font-size-56); line-height:1.25em; font-weight: 600; letter-spacing: -.02em;}
.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")}

.sub-visual .sv-box {margin-bottom: var(--space-40);}
.lnb-depth {margin-bottom: var(--space-20); align-items: center; gap: 8px; font-size: var(--font-size-16); font-weight: 500; line-height: 1.5em; color: rgba(255, 255, 255, 0.60);}
.lnb-depth .sv-home {flex-shrink: 0;}
.lnb-depth .arrow {width: 14px; height: 14px;}
.lnb-depth > a {display: flex; align-items: center;}
.lnb-depth .depth2 {color: rgba(255, 255, 255, 0.90);}

.path-wrap {z-index: 5; padding: 8px; border-radius: 500px; background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(12px);}
.path-wrap .wrap {max-width:1440px; margin:0 auto;}
.path-wrap .inner {display:flex; gap: 8px; justify-content: flex-end;}
.path-wrap .home a, .path-wrap .part > a {border-radius: 500px; overflow: hidden;}
.path-wrap .home {position: relative;}
.path-wrap .part {position:relative; min-width:280px; z-index:50;  transition: .2s;}
.path-wrap .part:last-child > a {color: #fff;}
.path-wrap .part > a {display:flex; align-items:center; position:relative; height:66px; font-size:var(--font-size-20); font-weight:600; line-height:1.7em; padding:0 var(--space-28) ;background: rgba(255, 255, 255, 0.20); color: #fff;}
.path-wrap .part2 > a {background: var(--color-primary);}
.path-wrap .part > a:after {content:""; position:absolute; top:50%; right:28px; transform:translateY(-50%); width:14px; height:14px; background:url("../images/common/path-down.svg") 50% 50% no-repeat; background-size: contain;}
.path-wrap .part.active > a:after {transform: translateY(-50%) rotate(180deg);}
.path-wrap .part ul {display:none; position:absolute; top: 75px; left:-1px; right:-1px; background: rgba(255, 255, 255, 0.90); backdrop-filter: blur(12px); border: 1px solid #eee; border-radius: var(--radius-8); overflow: hidden;}
.path-wrap .part ul li a {display:block; padding: 12px var(--space-24); white-space: nowrap; background: transparent;}
.path-wrap .part ul li a span {font-size: var(--font-size-18); color:#2c2c2c; line-height:1.666em; }
.path-wrap .part ul li:hover a, 
.path-wrap .part ul li.active a {background: #fff;}
.path-wrap .part ul li:hover a span,
.path-wrap .part ul li.active a span {background: linear-gradient(270deg, var(--color-primary) 0%, var(--color-sub) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;}

#contArea {max-width:1500px; padding:0 var(--space-container); margin:0 auto;}
#contArea.wide {max-width:100%; padding:0;}

.sub-title h2 {position: relative; padding-top: var(--space-120); padding-bottom: var(--space-80); font-size:var(--font-size-40); font-weight:600; color:#2c2c2c; line-height:1.35em; text-align: left;}
.sub-title.member h2 {font-size: var(--font-size-38); line-height: 1.36em; text-align: center;}

.real-cont {min-height:300px; padding-bottom: var(--space-120);}
.real-cont.pb0 {padding-bottom: 0;}

/* footer */
#footer {position:relative; padding:var(--space-48) 0; background:#121212;}
#footer .contain {max-width:1884px;}
#footer .ft-logo-wrap {width: 220px;}
.scroll-top {display: block; width: 52px; height: 52px; background:var(--color-primary) url(../images/common/scroll-top.svg) no-repeat center; border-radius: 100%;}
#footer .ft-cont2 {display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-24); flex-wrap: wrap;;}
#footer .ft-contact-info {gap:4px 0; align-items:flex-start; flex-wrap: wrap;}
#footer .ft-contact-info > dl {display:flex; align-items: flex-start; font-size:var(--font-size-18); line-height:1.777em; letter-spacing: -.02em;}
#footer .ft-contact-info > dl:after {content: ""; display:block; width: 1px; height: 16px; background: #505050; margin: 8px var(--space-24) 0;}
#footer .ft-contact-info > dl:last-child:after {display: none;}
#footer .ft-contact-info dt {color: #fff; margin-right: var(--space-12);}
#footer .ft-contact-info .address {color: #fff;}
#footer .ft-contact-info dd {color: #ccc;}
#footer .ft-cont3 {margin-top: var(--space-24); padding-top: var(--space-24); border-top: 1px solid #2c2c2c;}
#footer .copyright span {padding-right: var(--space-24); font-size:var(--font-size-16); line-height: 1.5em; color: #878787; letter-spacing: -.02em;}
#footer .copyright .designer {color: #2C2C2C;}
#footer .ft-privacy {gap: var(--space-24);}
#footer .ft-privacy a {color: #fff; font-size:var(--font-size-16); font-weight:400; line-height: 1.5em; letter-spacing: -.02em;}