@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */

#skipToContent a {z-index:100000;position:absolute;overflow:hidden;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;}
#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;outline-color:#f37736;}
a:focus {outline:#f37736;}

.only-desktop-tablet {display:block;}
.only-desktop {display:block;}
.only-tablet,
.only-large-tablet,
.only-mobile {display:none;}

#main #container {overflow: hidden;}
.contain {max-width:1460px; padding-left:var(--container-space); padding-right:var(--container-space); margin:0 auto;}


/* header */
.top-banner {background: #f6f6f6;}
.top-banner .swiper {width: calc(100% - 60px); height: var(--top-banner-height); margin: 0;}
.top-banner-item {display: flex; align-items: center; gap: 30px; height: 100%;}
.top-banner-tit {display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--dark-color); font-size: var(--font-size-19);}
.top-banner-cnt {display: flex; flex: 1; font-size: var(--font-size-15); color: var(--gray-color);}
.top-banner-cnt:after {content: 'More'; display: flex; align-items: center; margin-left: 25px; padding: 1px 15px; border-radius: 15px; border: 1px solid #eee; font-size: var(--font-size-14); font-weight: 600; background: #fff; border: 1px solid #eee; line-height: 1.5em;}
.top-banner-cnt .txt { overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: keep-all;}
.top-banner-close {display: flex;}

#header {position:sticky; top:0; width:100%; margin-bottom: 10px; background:#fff; z-index:100; padding: var(--space-15) 0;}
.header-top .contain {position: relative;display: flex; justify-content: space-between; align-items: center; height: var(--header-top-height); z-index: 11;}
.header-cnt .contain {position:relative; display:flex; align-items:center; justify-content:space-between; max-width: 1460px; height:var(--header-cnt-height); z-index:10;}

.header-top img {filter: grayscale(1) brightness(1.2);}
.header-top a:hover img, .header-top .header-functions > ul > li:hover img {filter: grayscale(0) brightness(1);}

.header-shortcuts {display: flex;}
.header-shortcuts a {display: flex; align-items: center; font-size: var(--font-size-15); font-weight: 500;}
.header-shortcuts a:not(:last-child):after {content: ''; display: block; width: 2px; height: 13px; margin: 0 var(--space-20); background: #e7e7e7;}
.header-shortcuts .icon {margin-right: 5px;}

.header-functions > ul {display: flex; gap: 20px;}
.header-functions > ul > li {position: relative;}
.header-functions > ul > li > a {display: flex; padding: 10px 0;}
.header-func-submenu {display: none; position: absolute; left: 0; font-size: var(--font-size-15); font-weight: 700; color: var(--dark-color); line-height: 1.6em;}
.header-functions > ul > li:first-child .header-func-submenu {left: 50%; transform: translateX(-50%);}
.header-func-submenu ul {padding: 15px var(--space-20); background: #fff; border-radius: var(--radius-16); box-shadow: var(--box-shadow);}
.header-func-submenu a {display: block; padding: 5px 0;}
.header-shortcuts a:hover ,.header-func-submenu a:hover {color: var(--primary-color);}

#gnb {position: relative; text-align:center; flex:1 1 auto; min-width:0; width:1%;}
#gnb>ul {display:flex; justify-content:center;}
#gnb>ul>li {padding:0 30px;}
#gnb>ul>li>a {position:relative; display:flex; align-items:center; flex-direction: column; justify-content:center; height:var(--header-cnt-height); padding: 0 10px; color:var(--dark-color); font-size:var(--font-size-20); font-weight:700; letter-spacing:-.03em; line-height:1.3em;}
#gnb>ul>li>a:after {content:""; position:absolute; bottom:-1px; left:50%; width:0; height:4px; background:var(--primary-color); transition:.2s;}
#gnb>ul>li.active>a:after {width:100%; left:0;}
#gnb .submenu {display: none; position:absolute; overflow: hidden; left:clamp(10px, calc( 115 / var(--inner) * 100vw ), 115px); right: 0;  padding: var(--space-30) 0; text-align:left; display:none;}
#gnb .submenu .line {position: absolute; top: var(--space-30); bottom: var(--space-30); left: 0; right: 0; border-left: 1px solid #eee; pointer-events: none;}
#gnb .submenu .line:before,
#gnb .submenu .line:after,
#gnb .submenu .line span {content: ''; position: absolute; top: 0; bottom: 0; left: 25%; width: 1px; background: #eee;}
#gnb .submenu .line:after {left: 50%;}
#gnb .submenu .line span {left: 75%;}
#gnb .submenu>ul {display: flex; flex-wrap: wrap;}
#gnb .submenu>ul>li {width: 25%;}
#gnb .submenu>ul>li>a {display:block; padding:9px 30px; color:#676767; font-size:var(--font-size-17); line-height:1.7647em; font-weight: 700;}
#gnb .submenu>ul>li>a:hover,
#gnb .submenu>ul>li.active>a {color:var(--primary-color);}
.submenu-bg {display:none; position:absolute; width:100%; left:0; background:#fff; border-top:1px solid #ddd; border-bottom:1px solid #eee; overflow: hidden;}
.submenu-bg .inner {display: flex; align-items: flex-end;max-width: 1460px; margin: 0 auto; height: 100%;}
.btn-shortcut-dream {position: relative; z-index: 10; display: block; width: 256px; height: 158px; background: url('/images/common/btn-shortcut-dream.png') no-repeat center bottom / contain; overflow: hidden; text-indent: -9999em;}

.submenu-banner {position:absolute; top:0; right:0; max-width: 275px;  width: 100%; padding: calc(var(--space-30) + 9px) 0}
.submenu-banner a {display: block; width: 100%; padding-bottom: 109.0909%; overflow: hidden;}
.submenu-banner a img {position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.submenu-banner-func {position:relative; display:flex; align-items:center; gap:10px; width: fit-content; margin: 15px auto 0; padding: 9px 25px; background: var(--primary-color); border-radius: 36px; font-size: 12px; font-weight: 600; line-height: 1.5em; letter-spacing: .16em; color: #fff;}
.submenu-banner-arrow {position: unset; margin: 0; transform: none; display: block; width: 6px; min-width: 6px; height: 10px; background: url('/images/main/submenu-banner-arrow.png') no-repeat center center / contain; overflow: hidden; text-indent: -9999em;}
.submenu-banner-arrow.swiper-button-next {transform: scaleX(-1);}
.submenu-banner-pagination {position: unset;}

.btn-header-donate {display: block; background: var(--primary-color); padding: 12px 25px; margin-right: var(--space-30); border-radius: 8px; font-weight: 700; color: #fff;}

.global-wrap {display: flex; gap: 10px;}
.global-wrap a {display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 100%; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 12px; font-weight: 500;}
.global-wrap a.active {background: #fff; color: var(--primary-color);}

/* for mobile */
.btn-m-menu {display:block; position:relative; width:24px; height:18px;}
.btn-m-menu span {position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1px; background:var(--dark-color);}
.btn-m-menu span:before,
.btn-m-menu span:after {content:" "; position:absolute; right:0; height:3px; background:var(--dark-color); transition: .2s;}
.btn-m-menu span:before {top:-7px; width: 42%; background: var(--primary-color);}
.btn-m-menu span:after {bottom:-7px; width: 58.333%; }
.btn-m-menu:hover span:before, 
.btn-m-menu:hover span:after {width: 100%;}

.mobile-navigation {display:none; 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 {display:flex; align-items:center; height:var(--header-height); padding:0 20px; color:#242424; font-size:19px; font-weight:700; line-height:1.5em;}
.mobile-navigation .nav-menu>ul {border-top:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:10px 48px 10px 20px; display:block; color:#242424; font-size:19px; font-weight:700; line-height:1.5em;}
.mobile-navigation .nav-menu>ul>li>a:after {content:""; position:absolute; top:50%; right:20px; transform:translateY(-75%) rotate(45deg); width:11px; height:11px; border-right:2px solid #505050; border-bottom:2px solid #505050;}
.mobile-navigation .nav-menu>ul>li.active>a {color:#fff; background:var(--primary-color)}
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg); border-color:#fff;}
.mobile-navigation .nav-menu .submenu {display:none; background:#f8f8f8; color:#454545; font-size:16px; font-weight:400; line-height:1.5em;}
.mobile-navigation .nav-menu .submenu ul li {border-top:1px solid #e5e5e5;}
.mobile-navigation .nav-menu .submenu ul li a {display:block; padding:12px 20px;}
.mobile-navigation .nav-menu .submenu ul li a:hover {color:var(--primary-color);}
.mobile-navigation .close {position:absolute; top:0; right:15px; width:26px; height:var(--header-height); text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:50%; 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;}

/* for all menu */
.all-navigation {position:fixed; top:0; left:0; width:100%; height:calc(100vh - var(--top-banner-height)); margin-top: var(--top-banner-height); opacity: 0; transition:.2s linear; -ms-transform:translateY(-50%); transform:translateY(-50%); z-index:102; pointer-events: none; background: #fff;}
.all-navigation .all-navigation-inner {display: flex; position: relative; max-width: 1880px; margin: 0 auto; height: 100%;}
.all-navigation .all-navigation-banner {position:relative; display: flex; flex-direction: column; justify-content: flex-end; width: 24.2025%; z-index: 11; padding: var(--space-50) var(--space-40); background: var(--primary-color) url('/images/common/bg-allnav-banner.jpg') no-repeat top left / cover; color: #fff;}
.all-navigation .all-navigation-banner p {margin: var(--space-30) 0 var(--space-65); font-size: var(--font-size-38); font-weight: 800; line-height: 1.421em;}
.all-navigation .all-navigation-banner .global-wrap {display: flex; gap: 10px;}
.all-navigation .all-navigation-banner .global-wrap a {display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 100%; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 12px; font-weight: 500;}
.all-navigation .all-navigation-banner .global-wrap a.active {background: #fff; color: var(--primary-color);}
.all-navigation .close {position: absolute; right: var(--container-space); top: var(--container-space); width: 24px; height: 24px; background: url('/images/common/close.png') no-repeat center center / contain; overflow: hidden; text-indent: -9999em;}
.all-navigation .nav-menu {flex: 1; overflow: auto;}
.all-navigation .nav-menu>ul {display: grid; grid-template-rows:repeat(2,1fr); grid-template-columns: repeat(3, 1fr);}
.all-navigation .nav-menu>ul>li {padding: var(--space-45) var(--space-40); border-left: 1px solid #eee;}
.all-navigation .nav-menu>ul>li:nth-child(1) {grid-row-start: 1;grid-column-start: 1;grid-row-end: 3;grid-column-end: 2;}
.all-navigation .nav-menu>ul>li:nth-child(2) {grid-row-start: 1;grid-column-start: 2;grid-row-end: 2;grid-column-end: 3;}
.all-navigation .nav-menu>ul>li:nth-child(3) {grid-row-start: 1;grid-column-start: 3;grid-row-end: 2;grid-column-end: 4;}
.all-navigation .nav-menu>ul>li:nth-child(4) {grid-row-start: 2;grid-column-start: 2;grid-row-end: 3;grid-column-end: 3;}
.all-navigation .nav-menu>ul>li:nth-child(5) {grid-row-start: 2;grid-column-start: 3;grid-row-end: 3;grid-column-end: 4;}
.all-navigation .nav-menu>ul>li>a {display: block; margin-bottom: var(--space-40); font-size: var(--font-size-36); font-weight: 800; color: var(--dark-color);}
.all-navigation .nav-menu .submenu a {display: block; font-size: var(--font-size-17); line-height: 1.7647em; color: #676767;}
.all-navigation .nav-menu .submenu a:hover {color: var(--primary-color); font-weight: 600;}
.all-navigation .nav-menu .submenu li:not(:last-child) {margin-bottom: clamp(5px, calc(12 / var(--inner) * 100vw), 18px);}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}
html.menu-opened .all-navigation {-ms-transform:translateY(0); transform:translateY(0); pointer-events: auto; opacity: 1;}

/* main */
.main-shortcuts {position: fixed; transition:.2s; z-index: 100; bottom: var(--space-35); left: 50%; width: 560px; border-radius:var(--radius-24); background: #015a5a; transform: translateX(-50%); padding: 10px; font-size: var(--font-size-18); font-weight: 700;}
.main-shortcuts ul {display: flex;}
.main-shortcuts li {position: relative; flex: 1;}
.main-shortcuts li:not(:last-child):after {content: ''; position: absolute; top: 50%; height: 50%; right: 0; width: 1px; background: #fff; opacity: .12; transform: translateY(-50%);}
.main-shortcuts a {display: flex; align-items: center; justify-content: center; gap: 10px; padding: var(--space-20); border-radius: var(--radius-16); color: #fff;}
.main-shortcuts a:hover {background: #206e6e;}
.main-shortcuts .icon {opacity: .4;}
.main-shortcuts a:hover .icon {opacity: 1;}

.main-visual {position:relative; overflow:hidden;}
.main-visual .contain {position: relative;}
.main-visual .slick-list {margin: 0 calc(var(--space-25) * -1); overflow: visible;}
.main-visual .slick-slide {padding: 0 var(--space-25);}
.main-visual .item {position:relative; overflow:hidden;}
.main-visual .image {position:relative; width:100%; padding-bottom: 45.7143%; border-radius: var(--radius-16); overflow:hidden;}
.main-visual .image img,
.main-visual .image video,
.main-visual .image iframe {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 {display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; position:absolute; top: 0; left: 0; bottom: 0; right: 0; padding: var(--space-75) var(--space-80); color: #fff;}
.main-visual .type2 .caption {color: var(--dark-color);}
.main-visual .caption .txt {display: flex; flex-direction: column; justify-content: space-between; flex:1; height: 100%;}
.main-visual .caption p {transition:1.2s; transform:translate(50px,0); opacity:0;}
.main-visual .caption .txt1 {font-size:var(--font-size-20); font-weight:600;}
.main-visual .type2 .caption .txt1 {color: var(--primary-color);}
.main-visual .caption .txt2 {font-size:var(--font-size-48); font-weight:700; line-height:1.17em;}
.main-visual .caption .txt3 {font-size:var(--font-size-24); font-weight:500; line-height:1.416667em; margin-top:var(--space-30);}
.btn-detail, .sponsor-btns a {display: flex; align-items: center; justify-content: space-between; gap: 25px; width: 178px; height: 54px; padding: 15px 24px; background: #fff; border-radius: 30px; font-size: var(--font-size-16); font-weight: 700; line-height: 1.5em; color: var(--dark-color); transition: .2s;}
.btn-detail:after {content: ''; display: block; width: 6px; height: 10px; background: url('/images/main/visual-arrow.png') no-repeat center center / contain; filter: brightness(0);}
.btn-detail:hover, .sponsor-btns a:hover {background: var(--primary-color); color: #fff;}
.btn-detail:hover:after {filter: brightness(1);}
.sponsor-btns a:hover:after {filter: grayscale(1) brightness(0) invert(1)}
.main-visual .controls {position:absolute; top: var(--space-75); right: calc(var(--space-80) + var(--container-space)); display:flex; align-items:center; padding: 3px 10px; background: rgba(0,0,0,.5); color:rgba(255,255,255,.4); backdrop-filter: blur(5px); border-radius: 30px; z-index:40; font-size: 12px; font-weight: 600;}
.main-visual .controls .wrap {display: flex; align-items: center;}
.main-visual .pager {margin: 0 5px;}
.main-visual .pager .current {display:inline-block; width:.6em; color: #fff;}
.main-visual .pager .divider {margin: 0 5px;}
.main-visual .slide-btn {width:24px; height:24px; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat; border-radius:100%; border:0; overflow:hidden;}
.main-visual .slide-prev {background-image:url("/images/main/mv-prev.svg");}
.main-visual .slide-next {background-image:url("/images/main/mv-next.svg");}
.main-visual .slide-stop {background-image:url("/images/main/mv-stop.svg");}
.main-visual .slide-play {display:none; background-image:url("/images/main/mv-play.svg");}
.main-visual .active .caption p {transform:translate(0,0); opacity:1;}
.main-visual .active .caption .txt1 {transition-delay:.2s;}
.main-visual .active .caption .txt2 {transition-delay:.4s;}
.main-visual .active .caption .txt3 {transition-delay:.55s;}
.main-visual .scroll {position:absolute; bottom:80px; left:50%; width:20px; margin-left:-10px; animation:scrollDown .9s linear infinite alternate; z-index:40;}

.main-section {padding: var(--space-140) 0;}
.main-tit.flex-tit {display: flex; align-items: flex-end; gap:20px 40px; flex-wrap: wrap;}
.main-tit.flex-tit .wrap {display: flex; align-items: center; gap: 20px;}
.main-tit h2 {font-size: var(--font-size-48); font-weight: 800; color: var(--dark-color); line-height: 1.2em;}
.main-tit p {margin: var(--space-50) 0 var(--space-80); font-size: var(--font-size-20); line-height: 1.7em;}
.main-tit small {font-size: var(--font-size-16); font-weight: 700; color: #ccc;}
.btn-arrow {display: flex; align-items: center; gap: 12px;font-size: var(--font-size-16); font-weight: 700; color: var(--primary-color);}
.btn-arrow:after {content: '→'; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 100%; background: var(--primary-color); color: #fff; transition: .2s;}
.btn-arrow:hover:after {transform: translateX(10px)}

.main-story-head {display: flex; align-items: flex-start; justify-content: space-between; gap: 20px 30px; margin-bottom: var(--space-40);}
.main-story-menu ul {display: flex; gap: 20px; text-align: center;}
.main-story-menu a {display: block; font-size: var(--font-size-15); font-weight: 700; color: var(--dark-color); line-height: 1.6em;}
.main-story-menu .icon {position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 12px; border-radius: var(--radius-12); background: var(--secondary-color);}
.main-story-menu .icon:after {position: absolute; content:''; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--radius-12); border: 3px solid #a0e3e4; opacity: 0;}
.main-story-menu .active a {color: var(--primary-color);}
.main-story-menu .active .icon:after {opacity: 1;}
.main-story-gallery {position: relative; max-width: 610px; height: fit-content; flex:1;}
.main-story-arrows {position: absolute; right: 0; bottom: 0; display: flex; gap: 8px; background: #fff;}
.main-story-arrows .slick-arrow {position: relative; width: 50px; height: 50px; background: #f8f8f8; border-radius: 100%; border: 0; cursor: pointer;}
.main-story-arrows .slick-arrow:after {content: '→'; transition: .2s; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: var(--gray-color);}
.main-story-arrows .slick-arrow.slick-prev:after {transform: scaleX(-1)}
.main-story-arrows .slick-arrow:hover {background: var(--dark-color);}
.main-story-arrows .slick-arrow:hover:after {color: #fff;}
.main-story-img {position: relative; width: 100%; padding-bottom: 74.754%; margin-bottom: var(--space-40); border-radius: var(--radius-24); overflow: hidden;}
.main-story-img .img img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.main-story-img .tag {position: absolute; left: var(--space-30); top: var(--space-30); width: fit-content; padding: 7px 20px; border-radius: 8px; font-size: var(--font-size-16); line-height: 1.5em; font-weight: 600; color: var(--primary-color); background: var(--secondary-color);}
.main-story-gallery .tit {padding-right: 120px; font-size: var(--font-size-28); line-height: 1.7857em; font-weight: 800; color: var(--dark-color); overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: keep-all;}
#mainStoryLoad {position: relative; display: flex; justify-content: space-between; gap: 35px;}
#mainStoryLoad:before {position: absolute; top: -70px; left: -91px; content:''; width: 123px; height: 122px; background: url('/images/main/bg-story.png') no-repeat center center; background-size: contain;}
.main-story-list {width: 50%; padding-right: var(--space-45); border-top: 2px solid var(--dark-color); overflow-y: scroll;}
.main-story-list li {border-bottom: 1px solid #eee;}
.main-story-list::-webkit-scrollbar {width: 3px;}
.main-story-list::-webkit-scrollbar-thumb {width: 3px; background: #ccc; border-radius: 3px;}
.main-story-list a {display: flex; align-items: center; gap: var(--space-30); padding: var(--space-30) 0;}
.story-list-thumb {width: 24.54%;}
.story-list-thumb .img {position: relative; width: 100%; padding-bottom: 75%; border-radius: var(--radius-12); overflow: hidden;}
.story-list-thumb  img {position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.story-list-txt {flex: 1;}
.story-list-txt .tag {margin-bottom: 5px; font-size: var(--font-size-14); font-weight: 700; color: var(--primary-color);}
.story-list-txt .tag.type2, .campaign-list-txt .review-category.type2, .qna-category.type2 {color: #718096;}
.story-list-txt .tag span { margin-left: 5px;color: var(--gray-color);}
.story-list-txt .tit {font-size: var(--font-size-20); font-weight: 700; color: var(--dark-color); overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all;}

.main-sponsor {position: relative;}
.main-sponsor:before {position: absolute; z-index: -1; content: ''; left: 0; top: 0; width: 325px; height: 365px; background: url('/images/main/bg-sponsor.png') no-repeat right center; background-size: contain;}
.sponsor-btns {display: flex; gap: 10px; margin-top: var(--space-45);}
.sponsor-btns a {display: flex; align-items: center; justify-content: space-between; color: var(--primary-color);}
.sponsor-btns a:after {content: ''; display: block; width: 6px; height: 10px; background: url('/images/main/sponsor-arrow.png') no-repeat center center; background-size:contain;}
.main-sponsor-head {display: flex;}
.main-sponsor-kid {position: relative;width: 60.1429%;}
.main-sponsor-kid:before {content: ''; position: absolute; top: -64px; right: -114px; width: 179px; height: 261px; background: url('/images/main/bg-sponsor-txt.png') no-repeat center center; background-size: contain;}
.sponsor-kid { display: flex; gap: 35px;}
.sponsor-kid-thumb {position: relative; width: 33.73%; height: fit-content; border-radius: 100%; overflow: hidden;}
.sponsor-kid-thumb:before {display: block; content:''; width: 100%; padding-bottom: 100%;}
.sponsor-kid-thumb img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.sponsor-kid-txt {flex:1;}
.sponsor-kid-txt .nationality {margin-bottom: var(--space-15); font-size: var(--font-size-16); font-weight: 700; color: var(--primary-color);}
.sponsor-kid-txt .name {font-weight: 800; font-size: var(--font-size-36); color: var(--dark-color);}
.sponsor-kid-detail {position: relative; margin-top: var(--space-45); padding: var(--space-45) var(--space-65); padding-left: 0;}
.sponsor-kid-detail:after {content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: calc(125% + 35px); border-radius: var(--radius-24) var(--radius-24) var(--radius-24) var(--radius-120); background: var(--third-color); z-index:-1;}
.sponsor-list-thumb {max-width: 174px; margin: 0 auto var(--space-25); border-radius: 100%;}
.sponsor-list-thumb .img {position: relative; width: 100%; padding-bottom: 100%; border-radius: 100%; overflow: hidden;}
.sponsor-list-thumb img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.main-sponsor-list {position: relative;margin:clamp(30px, calc(90 / var(--inner) * 100vw), 90px) -55px 0; text-align: center; font-weight: 600; padding: 0 55px;}
.main-sponsor-list .swiper {position: unset;}
.main-sponsor-list .swiper-arrow {width: 13px; height: 22px; background: url('/images/main/sponsor-list-arrow.png') no-repeat center center; background-size: contain; overflow: hidden; text-indent: -99999em; opacity: .3;}
.main-sponsor-list .swiper-arrow:hover {opacity:1;}
.main-sponsor-list .swiper-arrow.swiper-button-next {transform: scaleX(-1);}
.swiper-slide-thumb-active .sponsor-list-thumb {box-shadow: var(--box-shadow)}
.swiper-slide-thumb-active .sponsor-list-thumb .img:after {position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; border: 4px solid var(--primary-color); border-radius: 100%;}
.main-sponsor-list .swiper-slide-thumb-active {color: var(--primary-color);}

.main-report {max-width: 1820px; margin: 0 auto; background: url('/images/main/bg-report.jpg') no-repeat right center; background-size: cover; border-radius: var(--radius-24); color: #fff;}
.main-report .main-tit h2 {color: #fff;}
.main-report .sponsor-btns a {color: var(--dark-color);}
.main-report .sponsor-btns a:after {filter: grayscale(1) brightness(0)}
.main-report .sponsor-btns a:hover {color: #fff; background: var(--primary-color);}
.main-report .sponsor-btns a:hover:after {filter: grayscale(1) brightness(10);}

.main-campaign {position: relative;}
.main-campaign:before{position: absolute; content: ''; top: 0; left: 29%; width: 361px; height: 244px; background: url('/images/main/bg-compaign.png') no-repeat center center; background-size: contain; z-index: -1;}
.main-campaign:after {position: absolute; content: ''; left: 0; right: 0; bottom: 0; height: 52%; background: #f8f8f8; border-radius: var(--radius-24); z-index: -1;}
.main-campaign-head {display: flex; justify-content: space-between; margin-bottom: var(--space-75);}
.main-campaign-menu ul, .main-news-menu ul {display: flex; gap: 10px;}
.main-campaign-menu a, .main-news-menu a {display: block; padding: 15px 30px; border-radius: 27px; border: 1px solid #eee; background: #fff; font-size: var(--font-size-16); line-height: 1.5em; font-weight: 700; color: var(--gray-color);}
.main-campaign-menu .active a, .main-news-menu .active a {background: var(--dark-color); border-color: var(--dark-color); color: #fff;}
#mainCampaignLoad {display: flex; align-items: flex-end; gap: clamp(35px, calc(100 / var(--inner) * 100vw), 100px)}
.campaign-large-gallery {position: relative; display: block; width: 50%; max-width: 690px;}
.campaign-large-gallery .d-day {position: absolute; z-index: 2; left: var(--space-30); top: var(--space-30); width: fit-content; padding: 7px 15px; border-radius: 8px; background: var(--secondary-color); font-size: var(--font-size-16); font-weight: 600; line-height: 1.5em; color: var(--primary-color);}
.campaign-large-gallery .d-day.type1, .main-story-img .tag.type1, .campaign-list-tag.type1 {background: #fff; border: 1px solid var(--primary-color);}
.campaign-large-gallery .d-day.type2, .main-story-img .tag.type2, .campaign-list-tag.type2 {background: #ebebeb; color: #718096; border: 1px solid #718096;}
.campaign-large-img, .campaign-thumb-img {display: block; position: relative; width: 100%; padding-bottom: 100%; border-radius: var(--radius-24); overflow: hidden;}
.campaign-large-img img, .campaign-thumb-img img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.campaign-thumb-img {position: relative; border-radius: var(--radius-16); cursor: pointer;}
.swiper-slide-thumb-active .campaign-thumb-img:after {position: absolute; content :''; top: 0; right: 0; bottom: 0; left: 0;border-radius: var(--radius-16); border: 3px solid var(--primary-color);}
.main-campaign-cnt {flex: 1; overflow: hidden;}
.main-campaign-tit .tag {margin-bottom: var(--space-25); font-size: var(--font-size-16); font-weight: 700; color: var(--primary-color);}
.main-campaign-tit .tit {height: 2.76em; font-size: var(--font-size-42); line-height: 1.38em; font-weight: 800; color: var(--dark-color); overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all;}
.main-campaign-txt {padding-top: var(--space-55); margin-top: var(--space-55); margin-bottom: var(--space-40);}
.main-campaign-txt h3 {margin-bottom: var(--space-25); font-size: var(--font-size-24); font-weight: 800; color: var(--primary-color); overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: keep-all;}
.main-campaign-txt p {height: 5em; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: keep-all;}
.campaign-thumb-gallery .swiper-pagination-progressbar {flex: 1;position: relative; height: 6px; margin-left: 10px; border-radius: 3px; background: #eee;}
.campaign-thumb-gallery .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #ccc; border-radius: 3px;}
.campaign-thumb-func {display: flex; align-items: center;margin-top: var(--space-40); gap: 10px;}

.main-donation {position: relative; padding-bottom: 0;}
.main-donation:after,
.main-news:after {content: ''; z-index: -1; position: absolute; top: var(--space-140); right: 0; width: 327px; height: 365px; background: url('/images/main/bg-donation.png') no-repeat center center; background-size: contain;}
.main-donation .main-tit {margin-bottom: var(--space-65);}
.main-donation-cnt {display: flex; height: 384px; gap: var(--space-80);}
.main-donation-list {width: 36.4286%; padding-right: var(--space-50); overflow-y: scroll;}
.main-donation-list li:not(:last-child) {margin-bottom: 10px;}
.main-donation-list a {position: relative; display: flex; align-items: center; gap: 15px; padding: var(--space-40); background: #fff; font-size: var(--font-size-22); font-weight: 700; color: var(--dark-color); border-radius: var(--radius-16); border: 1px solid #eee;}
.main-donation-list .active a:after {content: ''; position: absolute; pointer-events: none; top: 0; right: 0;bottom: 0; left: 0; border-radius: var(--radius-16); border: 4px solid var(--primary-color);}
.main-donation-info {position: relative; flex: 1; padding: var(--space-60) var(--space-70);}
.main-donation-info:before {position: absolute; top: -205px; right: 20px; content: ''; width: 136px; height: 281px; background: url('/images/main/donation-rabbit.png') no-repeat center center; background-size: contain;}
.main-donation-info .bg img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: var(--radius-24); object-fit: cover; object-position: center right;}
.main-donation-info .txt {position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 20px;}
.main-donation-info.type2 p,
.main-donation-info.type2 h3 {color: #fff;}
.main-donation-info h3 {font-size: var(--font-size-36); font-weight: 800; color: var(--dark-color);}
.main-donation-info p {margin-top: var(--space-30);}
.main-donation-info .btn-detail:hover {background: var(--primary-color); color: #fff;}
.main-donation-info .btn-detail:hover:after {filter: none;}

.main-store-head {display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: var(--space-70);}
.main-store-head .wrap {display: flex; flex-direction: column; align-items: flex-end;}
.main-store {position: relative;}
.main-store:before {content: ''; position: absolute; z-index: -1; left: 0; top: 50px; width: 325px; height: 365px; background: url('/images/main/bg-store.png') no-repeat center center; background-size: contain;}
.main-store .main-tit p {margin-bottom: 0;}
.btn-box {display: block; width: fit-content;padding: 13px 25px; background: var(--primary-color); border-radius: 8px; font-weight: 700; color: #fff; line-height: 1.5em;}
.main-store-cnt {display: flex; gap: var(--space-60);}
.main-store-shortcuts {display: flex;  justify-content: flex-end; gap: 27px; margin-top: var(--space-30); font-weight: 700; font-size: var(--font-size-16);}
.main-store-shortcuts a {display: flex; align-items: center; gap: 12px;}
.main-store-shortcuts .icon {display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: #f8f8f8; border-radius: 8px; transition: .2s;}
.main-store-shortcuts a:hover .icon {background: var(--dark-color);}
.main-store-shortcuts a:hover .icon img {filter: brightness(20);}
.main-store-items {position: relative; gap: var(--space-40); min-width: 1%; height: fit-content;}
.main-store-items:before {position: absolute; content: ''; top: -158px; right: var(--space-30);  width: 144px; height: 202px; background: url('/images/main/store-rabbit.png') no-repeat center center; background-size: contain;}
.main-store-item {display: flex; flex-direction: column;font-size: var(--font-size-16); line-height: 1.75em; text-align: right;}
.main-news-item:hover .tit {text-decoration: underline; text-underline-offset: 4px;}
.main-store-item .tag, .main-news-item .tag {width: fit-content; margin-left: auto; margin-bottom: var(--space-20); padding: 8px 20px; font-weight: 600; color: var(--primary-color); background: var(--secondary-color); border-radius: 8px;}
.main-store-item .tit, .main-news-item .tit {margin-bottom: var(--space-30); font-weight: 700; font-size: var(--font-size-24); color: var(--dark-color);}
.main-store-info {flex: 1; display: flex; flex-direction: column; margin-top: var(--space-40);}
.main-store-info .txt {flex: 1;}
.main-store-thumb, .main-news-thumb {position: relative; width: 100%; padding-bottom: 74.7728%; overflow: hidden; border-radius: var(--radius-24);}
.main-store-thumb img, .main-news-thumb img, .main-store-thumb video {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.main-store-list {width: 30%; overflow-y: scroll; padding-right: var(--space-50); border-top: 2px solid var(--dark-color); font-size: var(--font-size-14); line-height: 1.714em;}
.main-store-list::-webkit-scrollbar {width: 6px; background: #eee; border-radius: 3px;}
.main-store-list::-webkit-scrollbar-thumb {background: #ccc; border-radius: 3px;}
.main-store-list li:not(:last-child) {border-bottom: 1px solid #eee;}
.main-store-list li > a {display: block; padding-top: var(--space-40) ;}
.main-store-list li > a:hover .tit {text-decoration: underline; text-underline-offset: 4px;}
.main-store-list .tag {margin-bottom: var(--space-12); font-weight: 700; color: var(--primary-color);}
.main-store-list .tit {margin-bottom: var(--space-15); font-size: var(--font-size-20); font-weight: 700; color: var(--dark-color); line-height: 1.2em;}
.main-store-list .info {color: var(--gray-color);}
.main-store-list .main-store-shortcuts {justify-content: flex-start; margin-bottom: var(--space-40);}

.main-news {position: relative;}
.main-news-head {display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: var(--space-70);}
.main-news-items {display: flex; gap: var(--space-60) var(--space-40); flex-wrap: wrap;}
.main-news-item {flex: 1 1 auto; max-width: calc((100% - var(--space-40) * 2) / 3); text-align: right;}
.main-news-thumb {box-shadow: var(--box-shadow); margin-bottom: var(--space-40);}
.main-news-thumb:after {position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; border-radius:var(--radius-24); border: 1px solid #eee;}
.main-news-item .tit {overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: keep-all;}
.main-news-item .date {font-size: var(--font-size-15); color: var(--gray-color); line-height: 1.2em;}

.main-education {position: relative;}
.main-education:before {position: absolute; content: ''; z-index: -1; top: 0; left: 32%; width: 365px; height: 365px; background: url('/images/main/bg-education.png') no-repeat center center; background-size: contain;}
.main-education .main-tit {margin-bottom: var(--space-70);}
.main-education-cnt {position: relative; display: flex; gap: 10px;}
.main-education-cnt:before {content :''; position: absolute; bottom: 0; left: -200px; width: 140px; height: 242px; background: url('/images/main/education-rabbit.png') no-repeat center center; background-size: contain;}
.education-large-gallery {width: 77.1429%; height: fit-content;}
.education-large-item {position: relative; width: 100%; padding-bottom: 56.65%; overflow: hidden; border-radius: var(--radius-24); overflow: hidden;}
.education-large-item iframe, .education-large-item img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.education-playlist {min-width: 1%; padding-right: 25px; overflow-y: scroll;}
.education-playlist::-webkit-scrollbar {width: 6px; border-radius: 3px; background: #eee;}
.education-playlist::-webkit-scrollbar-thumb {background: #ccc; border-radius: 3px;}
.education-playlist li:not(:last-child) {margin-bottom: 10px;}
.education-playlist-item {display: block; position: relative; width: 100%; padding-bottom: 68.662%; border-radius: var(--radius-24); overflow: hidden;}
.active .education-playlist-item:after {position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--radius-24); border: 4px solid var(--primary-color);}
.education-playlist-item img {position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center center;}

/* sub */
.sub-visual {position:relative; z-index: 4; max-width: 1400px; margin: 0 auto; height:420px; margin-bottom: var(--space-140); background:#fff; color:#fff; border-radius: var(--radius-16);}
.sub-visual .bg,
.sub-visual .bg img,
.sub-visual .bg video,
.sub-visual .bg iframe {position:absolute; top:0; left:0; overflow:hidden; width:100% !important; height:100% !important;object-fit: cover; object-position: center center; transition:2s;  border-radius: var(--radius-16);}
.sub-visual > .inner {position:absolute; top:50%; left:0; width:100%; height: 100%; transform:translateY(-50%); padding: var(--space-80) 0 var(--space-40);}
.sub-visual .contain {position: relative; display: flex; flex-direction: column; justify-content: space-between; max-width: 1260px; height: 100%;}
.sub-visual h2 {font-size:var(--font-size-48); font-weight:700; line-height:1.3em; letter-spacing:-.03em;}
.sub-visual.none-lnb .inner {padding:0;}
.loaded .sub-visual .bg {transform:scale(1); opacity:1;}

.sv-cnt {display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: var(--space-20); border-top: 1px solid rgba(255, 255, 255, 0.16);}
.page-info {display: flex; align-items: center; color: rgba(255,255,255,.5); font-size: var(--font-size-16);}
.page-info .home a {display: block; width: 14px; height: 14px; overflow: hidden; text-indent: -99999em; background: url('/images/common/home.png') no-repeat center center; background-size: contain; opacity: .5;}
.page-info-title {display: flex; align-items: center;}
.page-info-title:before {content: ''; display: block; width: 6px; height: 10px; margin: 0 var(--space-15); background: url('/images/main/visual-arrow.png') no-repeat center center / contain; opacity: .5;}
.page-info-title:last-child {color: #fff;}

.lnb {max-width: 1400px; margin: 0 auto var(--space-80); padding: 10px; background: #f4f4f4; border-radius: 50px;}
.lnb ul {width: max-content; min-width: 100%;}
.lnb li {flex: 1;}
.lnb a {display: block; min-width: max-content; padding: var(--space-20) 15px; border-radius: 40px; font-size: var(--font-size-20); border: 1px solid transparent; line-height: 1.4em; font-weight: 600; text-align: center;}
.lnb a:hover {color: #a8a8a8;}
.lnb .active a {background: #fff; border: 1px solid var(--primary-color); color: var(--primary-color);}

.path-wrap {position:relative; z-index:50;}
.path-wrap .inner {display:flex; gap: 8px;}
.path-wrap .part {position:relative; min-width:260px; z-index:50;}
.path-wrap .part > a {display:flex; align-items:center; position:relative; height: var(--path-height); background: rgba(0,0,0,.5); border-radius: 28px; color:#fff; font-weight:600; line-height:1.3em; padding:0 50px 0 25px;}
.path-wrap .part > a:after {content:""; position:absolute; top:50%; right:20px; margin-top:-5px; width:6px; height:10px; background:url('/images/main/visual-arrow.png') no-repeat center center / contain; transform: rotate(90deg); opacity: .5;}
.path-wrap .part.active > a {background: var(--primary-color);}
.path-wrap .part.active > a:after {transform: rotate(-90deg);}
.path-wrap .part ul {display:none; position:absolute; left:-1px; right:-1px; padding: 15px 0; margin-top: 10px; background:#fff; border:1px solid #eee; border-radius: var(--radius-16); z-index:50; font-size: var(--font-size-16); line-height: 1.5em; font-weight: 600; color: var(--dark-color);}
.path-wrap .part ul a {display: flex; justify-content: space-between; align-items: center; padding: 9px 25px;}
.path-wrap .part ul .active a {color: var(--gray-color);}
.path-wrap .part ul .active a:after {content: ''; display: block; width: 10px; height: 8px; background: url('/images/common/path-chk.png') no-repeat center center / contain;}
.path-wrap .part ul a:hover {color: var(--primary-color);}

.sub-title {display: none;}

#contArea {max-width:1460px; padding-left:var(--container-space); padding-right:var(--container-space); margin:0 auto;}
#contArea.wide {max-width:100%; padding:0;}
#contArea.spacious {max-width:1880px; padding:0;}

.real-cont {padding-bottom:clamp(50px, calc( 180 / var(--inner) * 100vw ), 180px);}
.icon img {vertical-align: middle; margin-top: -.02em;}
.txt-center {text-align: center;}

.space-top {padding-top: var(--space-140);}
.space-bot {padding-bottom: var(--space-140);}
.margin-bot {margin-bottom: var(--space-140);}
.desc p:not(:last-child) {margin-bottom: 1em;}
.bg-gray {background: #f8f8f8;}

.flex-wrap {display: flex;}
.flex-center {display: flex; justify-content: center;}
.flex-between {display: flex; justify-content: space-between;}
.flex-around {display: flex; justify-content: space-around;}
.flex-mid {display: flex; align-items: center;}
.flex-bottom {display: flex; align-items: flex-end;}
.flex-column {display: flex; flex-direction: column;}
.flex1 {flex: 1;}

.fw400 {font-weight: 400;}
.fw500 {font-weight: 500;}
.fw600 {font-weight: 600;}
.fw700 {font-weight: 700;}
.fw800 {font-weight: 800;}

.primary-color {color: var(--primary-color) !important;}
.secondary-color {color: var(--secondary-color) !important;}
.dark-color {color: var(--dark-color) !important;}
.white-color {color: #fff !important;}
.gray-color {color: var(--gray-color);}

.mb15 {margin-bottom: var(--space-15);}
.mb20 {margin-bottom: var(--space-20);}
.mb25 {margin-bottom: var(--space-25);}
.mb30 {margin-bottom: var(--space-30);}
.mb35 {margin-bottom: var(--space-35);}
.mb40 {margin-bottom: var(--space-40);}
.mb50 {margin-bottom: var(--space-50);}
.mb55 {margin-bottom: var(--space-55);}
.mb60 {margin-bottom: var(--space-60);}
.mb70 {margin-bottom: var(--space-70);}
.mb80 {margin-bottom: var(--space-80);}
.mb90 {margin-bottom: var(--space-90);}
.mb100 {margin-bottom: var(--space-100);}

.fz15 {font-size: var(--font-size-15);}
.fz16 {font-size: var(--font-size-16); }
.fz18 {font-size: var(--font-size-18); }
.fz20 {font-size: var(--font-size-20); line-height: 1.7em;}
.fz24 {font-size: var(--font-size-24); line-height: 1.4167em;}
.fz28 {font-size: var(--font-size-28); line-height: 1.5em;}
.fz32 {font-size: var(--font-size-32); line-height: 1.625em;}

.overhidden {overflow: hidden;}

/* bot-partners */
.bot-partners {padding: var(--space-30) 0; border-top: 1px solid #eee; overflow: hidden;}
.bot-partners .slick-list {overflow: visible;}
.bot-partners ul {width: 200px;}
.bot-partners-item img {width: 100%;}

/* right-banner */
#rightBanner {position: fixed; right: 0; top: calc(var(--header-height) + 70px); border: 1px solid #eee; background: #fff; border-right: 0; border-radius: var(--radius-24) 0 0 var(--radius-24); z-index: 99; font-size: var(--font-size-15); line-height: 1.3333em; font-weight: 600; text-align: center; width: 100px;}
.right-banner-items {width: max-content;}
.right-banner-items:after {content: ''; display: block; width: 62.6%; height: 1px; background: #eee; margin: 0 auto;}
.right-banner-items a {position: relative; z-index: 1; text-align: center; display: block; padding: var(--space-25) var(--space-30); box-sizing: border-box;}
.right-banner-items a:before {position: absolute; z-index: -1; content: ''; top: 0; right: 0; bottom: 0; width: 0; border-radius: var(--radius-24) 0 0 var(--radius-24); background: var(--secondary-color); opacity: .1; pointer-events: none; transition: .3s;}
.right-banner-items a:hover:before {opacity: 1; width: calc(100% + 1px);}
.right-banner-items .txt {margin-top: 10px;}
.scroll-top {display: block; padding: var(--space-25) var(--space-30); font-weight: 700; color: var(--gray-color); transition: .3s;}
.scroll-top:hover {color: var(--primary-color);}

/* bot-newsletter */
.bot-newsletter {max-width: 1820px; padding: var(--space-50) 0; margin: 0 auto 10px; background: var(--primary-color); color: #fff; border-radius: var(--radius-24); font-size: var(--font-size-15);}
.bot-newsletter .contain {display: flex; gap: var(--space-50);}
.bot-newsletter .tit {color: #cbeaea; font-size: var(--font-size-32); font-weight: 800; line-height: 1.375em;}
.bot-newsletter form, .newsletter-item-cnt {flex: 1;}
.bot-newsletter-form {display: flex; gap: var(--space-30);}
.bot-newsletter-form .form-wrap {display: flex; gap: var(--space-25);}
.bot-newsletter-form .col {display: flex; flex-direction: column; justify-content: space-between; gap: 12px;}
.bot-newsletter-form .col:first-child {flex:1;}
.newsletter-input-item input {width: 100%; background: transparent; border: 0;}
.bot-newsletter-form .input-item {position: relative; display: flex; padding: 0 20px;}
.newsletter-interest-item:before {position: absolute; content: ''; left: 0; top: 50%; margin-top: -6px; width: 3px; height: 12px; border-radius: 2px; background: #fff; opacity: .2;}
.bot-newsletter-form .newsletter-input-item {align-items: center; height: 100%; padding-top: 9px; padding-bottom: 9px; background: #41c6c7; border-radius: 8px;}
.newsletter-item-tit {width: 100px;}
.newsletter-item-cnt .checkbox:not(:last-child) {margin-right: var(--space-25);}
.bot-newsletter-form .checkbox label:before {width: 20px; height: 20px; border-radius: 4px;}
.bot-newsletter-form .checkbox input:checked + label:before {background-color: var(--dark-color);}
.agree-cnt {display: flex; flex-direction: column; justify-content: space-between; gap: 12px; font-size: var(--font-size-14);}
.agree-cnt button {flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; box-shadow: var(--box-shadow); border: 0; border-radius: 8px; font-size: var(--font-size-16); font-weight: 700; color: var(--primary-color); line-height: 1.5em;}
.agree-cnt button:before {content :''; display: block; width: 16px; height: 16px; background: url('/images/common/icon-chk.png') no-repeat center center; background-size: contain;}
.agree-cnt a {color: #cbeaea;}
.agree-cnt .check {min-width: max-content;}

/* footer */
#footer {position: relative; max-width: 1820px; margin: 0 auto var(--space-50); padding: var(--space-55) 0; background:#015a5a; font-size: var(--font-size-15); line-height: 1.86667em; color: #e7e7e7; border-radius: var(--radius-24);}
#footer .contain > div {display: flex; justify-content: space-between; gap: 15px 35px;}
.sitename {font-size: var(--font-size-24); font-weight: 800; color: #fff;}
.f-top {margin-bottom: 20px;}
.f-mid {align-items: flex-end; margin-bottom: var(--space-45); color: #a4b9b9;}
.f-address span {font-style: normal;}
.f-address span:not(:last-child):after {content: '|'; margin: 0 10px; color: #357575;}
.f-terms a {display: block; font-size: var(--font-size-16); font-weight: 600;}
.f-terms a:not(:last-child) {margin-bottom: 6px;}
#footer .copyright {display: flex; flex-direction: row-reverse; gap: var(--space-30); font-weight: 700;}
#footer .copyright span {color: #066666;}
.f-shortcut, .f-sns {display: flex; gap: 10px;}
.f-bot a {display: flex; align-items: center; justify-content: center; gap:10px; padding: 6px 20px; background: #206e6e; border-radius: 20px; font-size: var(--font-size-14); font-weight: 700;}
.f-shortcut a:before {content: ''; display: block; width: 8px; height: 8px; border-radius: 100%; background: var(--primary-color);}
.f-sns a {display: flex; align-items: center; justify-content: center; gap: 10px;}
.f-sns a:hover {background: #066666;}
.f-sns a:hover img {filter: brightness(20);}

/* 뉴스레터 팝업 */
.form-wrap .row {display: flex; gap: 0 20px;}
.form-wrap .row>* {flex: 1;}
.jquery-modal.blocker {overflow-y: scroll;}
.news-letter-modal {position: relative; padding: var(--space-50);}
.news-letter-modal h2 {font-size: var(--font-size-32); font-weight: 800; line-height: 1.375em; padding-bottom: var(--space-30); margin-bottom: var(--space-45); border-bottom: 1px dotted #ddd; color: var(--dark-color);}
.news-letter-modal p {margin-bottom: var(--space-40); font-size: var(--font-size-20); line-height: 1.7em;}
.news-letter-modal .newsletter-item-tit {display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: var(--space-15); font-size: var(--font-size-20); font-weight: 600; color: var(--dark-color);}
.news-letter-modal .newsletter-item-tit:before{content: ''; display: block; width: 8px; height: 8px; border-radius: 100%; border-radius: 100%; background: var(--primary-color);}
.news-letter-modal .newsletter-item-tit.gray:before{background: var(--gray-color);}
.news-letter-modal .input-item {margin-bottom: var(--space-35);}
.news-letter-modal .newsletter-input-item .input {width: 100%; border: 1px solid #ddd; height: 60px; border-radius: 8px;}
.news-letter-modal .form-agree {margin: 0;}
.news-letter-modal .newsletter-item-cnt {font-size: var(--font-size-16);}
.news-letter-modal .agree-cnt {font-size: var(--font-size-18);}
.news-letter-modal .btn-pack.large {width: 224px; height: 60px;}
.news-letter-modal .newsletter-item-cnt .checkbox:not(:last-child) {width: auto;}
.news-letter-modal .form-agree .check {margin-top: var(--space-65);}
.news-letter-modal .form-agree .checkbox label:before {border-radius: 100%;}



/* 서브페이지 모바일 밀림 현상 수정 */
@media screen and (max-width: 1024px) {
    /* 1. 경로 영역(Breadcrumb) 고정 너비 해제 */
    .path-wrap .inner {
        flex-wrap: wrap; /* 모바일에서 공간 부족 시 줄바꿈 */
        gap: 5px;
    }
    .path-wrap .part {
        min-width: 0 !important; /* 고정 너비 강제 해제 */
        flex: 1; 
        width: auto;
    }
    .path-wrap .part > a {
        padding: 0 30px 0 15px; /* 패딩 축소 */
        font-size: 14px;
        height: 40px;
    }

    /* 2. LNB 메뉴가 화면을 뚫고 나가지 않게 설정 */
    .lnb {
        overflow-x: auto; /* 메뉴가 길면 가로 스크롤로 대응 */
        -webkit-overflow-scrolling: touch;
    }
    .lnb ul {
        width: auto; /* max-content 해제 */
        display: flex;
    }

    /* 3. 서브 비주얼 및 컨테이너 여백 최적화 */
    .sub-visual {
        width: 100%;
        margin-bottom: var(--space-50);
    }
    
    /* 전체 페이지 가로 넘침 방지 보호막 */
    html, body {
        overflow-x: hidden;
        width: 100%;
    }
}