@charset "utf-8";

/* 색상 */
:root {
  --font01: #222;
  --font02: #4E4E4E;
  --font03: #7A7A7A;
  --primary: #3A86FF;
  --secondary: #8DC63F;
  --navy: #1B2A40;
  --red: #FF3E3E;
  --bg01: #F4F7FB;
  --bg02: #F5F7FB;
  --line: #E1E3E5;

}

/* 레이아웃 */
#wrapper {overflow: hidden;}
.container {position: relative; width: 100%; padding: 0 20px; margin: 0 auto;}
.header .container {max-width: 1340px;}
.footer .container {max-width: 1340px;}
.main .container {max-width: 1340px;}
.sub .container {max-width: 1340px;}
.login .container {max-width: 1340px;}
.join .container {max-width: 1340px;}

/* 헤더 */
.header {position: fixed; top: 0; left: 0; width: 100%; height: 130px; background: #fff; z-index: 100; transition: all 0.5s;}
.header.hide {transform: translateY(-100%);}
.header-util {margin-top: 20px;}
.header-util ul {display: flex; justify-content: flex-end; margin: 0 -16px;}
.header-util ul li {position: relative; padding: 0 16px;}
.header-util ul li:after {position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ''; width: 1px; height: 14px; background: #ddd;}
.header-util ul li:last-child:after {display: none;}
.header-util ul li img {margin-right: 4px;}
.header-util ul li span {font-size: 16px; font-weight: 600; line-height: normal; color: #7a7a7a;}

.header-main {position: relative; display: flex; justify-content: flex-end; align-items: center;}
.header-main .logo {position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.header-main .logo img {display: block; vertical-align: middle;}
.header-main .gnb {margin-right: 74px;}
.header-main .gnb > ul {display: flex;}
.header-main .gnb > ul > li {position: relative;}
.header-main .gnb > ul > li > a {display: inline-block; font-size: 18px; font-weight: 700; line-height: 86px; letter-spacing: -0.45px; color: #222; padding: 0 20px; transition: all 0.5s;}
.header-main .gnb > ul > li > a:hover {color: var(--primary);}
.header-main .gnb .sub-menu {display: none; position: absolute; top: 72px; left: 50%; transform: translateX(-50%); width: 140px; z-index: 20;}
.header-main .gnb .sub-menu > ul {padding: 16px 0 20px; border-radius: 14px; border: 1px solid #E0E5E9; background: #FFF; box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.03);}
.header-main .gnb .sub-menu > ul > li > a {display: block; font-size: 16px; font-weight: 500; line-height: normal; color: #7a7a7a; text-align: center; padding: 10px; transition: all 0.5s;}
.header-main .gnb .sub-menu > ul > li > a:hover {font-weight: 700; color: var(--primary);}

.header-main .menu-btn {position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.header-main .menu-btn button {position: relative; display: block; width: 22px; height: 16px; background: none; border: none; cursor: pointer; padding: 0;}
.header-main .menu-btn button span {display: block; width: 22px; height: 2px; background-color: #222; transition: all 0.3s ease;}    
.header-main .menu-btn button span:nth-of-type(1) {position: absolute; top: 0; left: 0;}
.header-main .menu-btn button span:nth-of-type(3) {position: absolute; bottom: 0; right: 0;}
.header-main .menu-btn button.opened span:nth-of-type(1) {transform: rotate(-45deg); top: 50%; margin-top: -1px;}
.header-main .menu-btn button.opened span:nth-of-type(2) {opacity: 0;}
.header-main .menu-btn button.opened span:nth-of-type(3) {transform: rotate(45deg); bottom: 50%; margin-bottom: -1px;}

.sitemap {display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; border-top: 1px solid #E1E3E5; padding: 50px 0 60px; z-index: 15;}
.header .sitemap .container {max-width: 1420px;}
.sitemap-mobile-utils {display: none; height: 100px; align-content: center; border-bottom: 1px solid var(--line);}
.sitemap-mobile-utils .header-util {margin-top: 0;}
.sitemap-mobile-utils .header-util ul li span {font-size: 18px; font-weight: 700; line-height: 1.5em; color: #787878;}
.sitemap-mobile-utils .header-util ul {justify-content: flex-start;}
.sitemap-mobile-utils .btn-menu-close {position: absolute; top: 50%; right: 20px; transform: translateY(-50%); display: block; width: 22px; height: 16px; background: none; border: none; cursor: pointer; padding: 0;}
.sitemap-mobile-utils .btn-menu-close span {display: block; width: 22px; height: 2px; background-color: #222; transition: all 0.3s ease;}    
.sitemap-mobile-utils .btn-menu-close span:nth-of-type(1) {position: absolute; transform: rotate(-45deg); top: 50%; left: 0; margin-top: -1px;}
.sitemap-mobile-utils .btn-menu-close span:nth-of-type(2) {opacity: 0;}
.sitemap-mobile-utils .btn-menu-close span:nth-of-type(3) {position: absolute; transform: rotate(45deg); bottom: 50%; right: 0; margin-bottom: -1px;}

.sitemap-menu {display: flex; gap: 24px;}
.sitemap-menu > li {flex: 1; text-align: center;}
.sitemap-menu > li > a {width: 100%; padding: 15px 5px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; font-weight: 700; line-height: normal; color: #222;}
.sitemap-sub-menu {margin-top: 20px;}
.sitemap-sub-menu > ul > li:not(:last-child) {margin-bottom: 20px;}
.sitemap-sub-menu > ul > li > a {font-size: 16px; font-weight: 500; line-height: normal; color: var(--font03);}
.sitemap-sub-menu > ul > li > a:hover {font-weight: 800; color: var(--primary);}
.sitemap-backdrop {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10;}

/* 푸터 */
.footer {background: var(--navy);}
.footer-terms {border-bottom: 1px solid #414866;}
.footer-terms ul {display: flex;}
.footer-terms ul li {border-left: 1px solid #414866;}
.footer-terms ul li:last-child {border-right: 1px solid #414866;}
.footer-terms ul li a {position: relative; display: flex; align-items: center;  width: 240px; height: 56px; font-size: 16px; font-weight: 500; line-height: 1.5em; color: rgba(255,255,255,0.5); padding: 0 20px; transition: all 0.5s;}
.footer-terms ul li a:hover {color: #fff;}
.footer-terms ul li a:after {position: absolute; top: 50%; right: 20px; transform: translateY(-50%); content: ''; width: 24px; height: 24px; background: url('../images/layout/icon-plus.png') no-repeat 50% 50%;}
.footer-info {padding: 55px 0 100px;}
.footer-info .wrap {display: flex; justify-content: space-between;}
.footer-info .logo {margin-bottom: 24px;}
.footer-info .info {display: flex; flex-wrap: wrap; margin: 0 -12px 4px;}
.footer-info .info li {position: relative; padding: 0 12px; font-size: 16px; font-weight: 500; line-height: 1.5em; color: #8C949D;}
.footer-info .info li:after {position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ''; width: 1px; height: 14px; background: #8C949D; opacity: 0.2;}
.footer-info .info li:last-child:after {display: none;}
.footer-info .info li a {display: inline-block;}
.footer-info .copyright {font-size: 16px; font-weight: 500; line-height: 1.5em; color: #8C949D;}
.footer-info .family-site {position: relative; margin-bottom: 26px;}
.footer-info .btn-family {position: relative; display: block; width: 200px; border-radius: 10px; border: 1px solid #414866; padding: 12px 20px; font-size: 15px; font-weight: 700; line-height: 1.5em; letter-spacing: -0.375px; color: #8D959F; text-align: left;}
.footer-info .btn-family:after {position: absolute; top: 50%; right: 20px; transform: translateY(-50%); content: ''; width: 24px; height: 24px; background: url('../images/layout/icon-slide-down.png') no-repeat 50% 50%; transition: all 0.5s;}
.footer-info .btn-family[aria-expanded="true"]::after {transform: translateY(-50%) rotate(180deg);}
.footer-info .family-list {position: absolute; top: calc(100% + 8px); left: 0; width: 100%; padding: 12px 20px; border-radius: 10px; border: 1px solid #414866; background: #1B2A40;}
.footer-info .family-list li:not(:last-child) {margin-bottom: 10px;}
.footer-info .family-list li a {font-size: 15px; font-weight: 700; line-height: 1.5em; letter-spacing: -0.375px; color: #8D959F; transition: all 0.5s;}
.footer-info .family-list li a:hover {color: #fff;}
.footer-info .sns-link {display: flex; justify-content: flex-end; gap: 14px;}
.footer-info .sns-link li a {transition: all 0.5s;}
.footer-info .sns-link li a:hover {transform: translateY(-5px);}

/* 팝업 */
#main-pop {position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1000;}
#main-pop h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}

.pop-cont {position: relative; width: 90vw; max-width: 400px; max-height: 90vh; margin-bottom: 17px; border-radius: 20px;}
.pop-swiper {border-radius: 20px; background: #fff; overflow: hidden;}
.pop-swiper img {display: block; width: 100%; height: auto;}
.pop-arrows > div {position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; background-repeat: no-repeat; background-position: center center; font-size: 0; background-color: transparent; border: 0; cursor: pointer; z-index: 10; transition: all 0.4s;}
.pop-arrows > div:hover {opacity: 0.7;}
.pop-arrows .pop-prev {left: -46px; background-image: url('../images/layout/icon-popup-prev.png');}
.pop-arrows .pop-next {right: -46px; background-image: url('../images/layout/icon-popup-next.png');}

.pop-btn {display: flex; justify-content: space-between;}
.pop-btn button {padding: 0 10px; font-size: 16px; font-weight: 700; line-height: 1.4em; color: #fff; border: 0; transition: all 0.4s;}
.pop-btn button:hover {opacity: 0.7;}

.popup-backdrop {position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 100;}