@charset "utf-8";
/* Info
 ========================================================================== */
/**   * 1. Writer: Hyerin Lim. (Weaverloft Corp.)
    * 2. Production Date: 2025-07
    * 3. Client: Auoseed
 */

/*========== Header ==========*/
#header{position:fixed;left:0;top:0;z-index:1000;width:100%;height:80px; background-color: #fff;transition:all 0.4s;}
#header.nav-up{transform:translateY(-100%);}
#header .head{position: relative; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 0 30px; }
#header .head .logo a{display:block;width:160px;height:auto;}
#header .head .gnb {position: absolute; top: 0; left: 0; right: 0; width: fit-content; height: 100%; margin: 0 auto;}
#header .head .gnb ul{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center; gap: 0; height: 100%;}
#header .head .gnb ul > li{position: relative; width: 160px; height: 100%;}
#header .head .gnb ul li a{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 18px; font-weight: 600; color: var(--text-color-2); white-space: nowrap;}
#header .head .gnb ul li:hover > a{font-weight: 700; color: var(--point-color);}
#header .head .gnb .nav-back{ position: absolute; top: calc(100% + 6px); left: 0; right:0; display: inline-block; width: 100%; height: 150px; margin: 0 auto; border-radius: 10px; background-color: #fff; border: 1px solid var(--border-color-d);}
#header .head .gnb .sub-menu{margin-top: 6px; padding: 8px 6px;}
#header .head .gnb .sub-menu li:not(:last-child){margin-bottom: 8px;}
#header .head .gnb .sub-menu li a{ width: 100%; padding: 10px 6px; border-radius: 6px; font-size: 16px; font-weight: 500; color: var(--text-color-5); line-height: 1.2;}
#header .head .gnb .sub-menu li a:hover{background-color: var(--bg-color); font-weight: 500; color: var(--point-color);}
#header .head .gnb .nav-back, #header .head .gnb .sub-menu{ opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.25s ease;}
#header .head .gnb.on .nav-back, #header .head .gnb.on .sub-menu{ opacity: 1; visibility: visible; transform: translateY(0);}
#header .head .util {display: flex;flex-flow:row nowrap;align-items: stretch; gap: 4px;}
#header .head .util .mid-line {display: inline-block; align-self: center; width: 1px; height: 12px; margin: 0; background-color: #c3c3c8;}
#header .head .util .link{display: inline-block; align-self: center; padding: 0 8px; font-size: 16px; font-weight: 600; color: var(--text-color-8); white-space: nowrap; transition: color 0.3s;}
#header .head .util .link:hover{color: var(--text-color-2); transition: color 0.3s;}
#header .head .util .search-btn {display: flex;align-items: center;justify-content: center; gap: 4px; max-width: 175px; margin-left: 6px; padding: 10px 16px;border-radius: 25px; font-size: 16px; font-weight: 600;line-height: 1;cursor: pointer;}
#header .head .util .search-btn .icon{display: inline-block; width: 24px; height: auto; aspect-ratio: 1/1; background-image: url('../images/common/icon-search-w.svg'); background-size: 100% 100%;}

/*========== Footer ==========*/
#footer { min-height: 240px; padding: 22px 40px 40px; border-radius: 40px 40px 0 0; background-color: #292C2E; font-size: 14px; color: #A7A7A7; }
#footer .inner{max-width: 1520px; margin: 0 auto;}
#footer .notice-slider {display: flex; align-items: center; justify-content: space-between; flex-flow: row nowrap; gap: 10px; width: 100%; margin-bottom: 50px; padding: 12px 30px 12px 16px; background-color: rgba(255, 255, 255, 0.1); border-radius: 30px; color: #fff; }
#footer .notice-slider .badge { min-width: 70px; padding: 4px 8px; border-radius: 15px; background-color: #fff; color: var(--point-color); font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center;}
#footer .notice-slider .notice-wrap { overflow: hidden; height: 26px; flex: 1;}
#footer .notice-slider .notice-track{transition: transform 0.5s ease;}
#footer .notice-slider .notice-track li {height: 26px; line-height: 26px;}
#footer .notice-slider .notice-track li a{display: inline-block; max-width: calc(100% - 40px); font-size: 14px; font-weight: 500; color: #fff; line-height: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#footer .notice-slider .notice-track li.update::after {content: "";display: inline-block; width: 16px; height: 26px; margin-left: 4px; background: url("../images/common/icon-notice-new-red.svg") 50% 50% no-repeat; vertical-align: top;}
#footer .notice-slider .notice-nav {display: flex; flex-flow: row nowrap; align-items: center; gap: 4px;}
#footer .notice-slider .notice-nav .mid-line {display: inline-block; width: 1px; height: 14px;  background-color: #ddd;}
#footer .notice-slider .notice-nav button{display: inline-block; width: 20px; height: auto; aspect-ratio: 1/1; background-size: 100% 100%; background-position: center; font-size: 0;}
#footer .notice-slider .notice-nav button.prev { background-image: url('../images/common/icon-arrow-left-f.svg'); }
#footer .notice-slider .notice-nav button.next { background-image: url('../images/common/icon-arrow-right-f.svg'); }
#footer .notice-slider .notice-nav button:hover { filter: brightness(0.8); }
#footer .foot { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: 40px;}
#footer .foot .logo { height: 36px;}
#footer .foot .info ul { display: flex; flex-flow: row wrap; align-items: center; gap: 12px; margin-bottom: 10px;}
#footer .foot .info ul li{display: flex; flex-flow: row nowrap; align-items: center;}
#footer .foot .info ul li:not(:last-child)::after{content: ''; display: inline-block;  width: 1px; height: 14px; margin-left: 12px; background-color: #7F8082; vertical-align: middle;}
#footer .foot .info ul li span{display: inline-block; margin-right: 10px; font-weight: 600; white-space: nowrap;}
#footer .foot .util{display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end; margin-right: -6px;}
#footer .foot .util .link { padding: 8px 6px; font-size: 14px; color: #A7A7A7; font-weight: 500;}
#footer .foot .util .link:nth-child(1){color: #fff; font-weight: 700;}
#footer .foot .util .mid-line {display: inline-block; width: 1px; height: 14px; margin: 0 6px; background-color: #7F8082;}

/*========== Sub ==========*/
#sub{ min-width: 1600px; padding-top: 80px;}
#sub.rwd{min-width: auto;}
@media screen and (max-width: 1024px) {
    #sub.rwd{padding-top: 64px;}
}

/* ================== Sub Visual ================== */
#sub .sub-visual{width: calc(100% - 60px); margin: 0 auto; padding: 60px 30px; border-radius: 34px; background: var(--bg-color); background: linear-gradient(125deg,rgba(244, 245, 250, 1) 0%, rgba(232, 238, 255, 1) 40%, rgba(241, 251, 255, 1) 55%, rgba(248, 242, 255, 1) 90%);}
#sub .sub-visual .visual-tit{text-align: center;}
#sub .sub-visual:has(.input-box-wrap) .visual-tit{margin-bottom: 50px;}
#sub .sub-visual .visual-tit .page-tag{display: inline-block; min-width: 106px; vertical-align: top; color: var(--point-color); line-height: 41px; border:1px solid var(--point-color-2); border-radius:24px; padding: 0 26px; font-weight: 600; font-size: 16px;}
#sub .sub-visual .visual-tit h2{margin-top: 28px; font-weight: 700; font-size: 32px; color: var(--text-color-2); line-height: 1.40625; word-break: keep-all;}
#sub .sub-visual .input-box-wrap{max-width: 542px; margin: 0 auto;}
@media screen and (max-width: 1024px) {
    #sub.rwd .sub-visual{width: calc(100% - clamp(32px, 5.859vw, 60px)); padding: clamp(50px, 5.859vw, 60px) clamp(16px, 2.93vw, 30px); border-radius: clamp(16px, 3.32vw, 34px);}
    #sub.rwd .sub-visual .visual-tit .page-tag{padding: 0 clamp(16px, 2.539vw, 26px);}
    #sub.rwd .sub-visual .visual-tit h2{margin-top: clamp(14px, 2.734vw, 28px); font-size: clamp(24px, 3.125vw, 32px);}
}

/* ================== Responsive ================== */
.mo-only{display: none;}
@media screen and (max-width: 767px) {
    .mo-only{display: block;}
}
/* header */
@media screen and (max-width: 1480px) {
    #container:has(.rwd) #header .head .gnb{right: 14%;}
    #container:has(.rwd) #header .head .gnb ul > li{width: clamp(122px, 10.811vw, 160px);}
}
@media screen and (max-width: 1024px) {
    #container:has(.rwd) #header{ height: 64px;}
    #container:has(.rwd) #header .head{ padding: 0 9px 0 16px; }
    #container:has(.rwd) #header .head .logo a{width: 122px;}
    #container:has(.rwd) #header .head .gnb{display: none;}
    #container:has(.rwd) #header .head > .util{display: none;}
    #container:has(.rwd) #header .mo-only{display: flex;}
    #header .mobile .menu-btn { position: relative; z-index: 101; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: none; border: none; cursor: pointer;}
    #header .mobile .menu-btn .hamburger { position: relative; display: block; width: 18px; height: 14px;}
    #header .mobile .menu-btn .hamburger div { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; position: absolute; height: 2px; width: 100%; left: 0; transition: 0.3s ease;}
    #header .mobile .menu-btn .hamburger div span{ display: inline-block; width: 100%; height: 100%; background: var(--text-color-2); border-radius: 10px;
    vertical-align: top;}
    #header .mobile .menu-btn .hamburger div.one { top: 0;}
    #header .mobile .menu-btn .hamburger div.one span:nth-child(1) { width: 13px;}
    #header .mobile .menu-btn .hamburger div.one span:nth-child(2) { width: 4px;}
    #header .mobile .menu-btn .hamburger div.two { top: 50%; transform: translateY(-50%);}
    #header .mobile .menu-btn .hamburger div.three { bottom: 0;}
    #header .mobile .menu-btn .hamburger div.three span:nth-child(1) { width: 4px;}
    #header .mobile .menu-btn .hamburger div.three span:nth-child(2) { width: 13px;}
    #header .mobile .menu-btn.active .hamburger div.one { top: 50%; transform: translateY(-50%) rotate(45deg); width: 100%;}
    #header .mobile .menu-btn.active .hamburger div.two { opacity: 0;}
    #header .mobile .menu-btn.active .hamburger div.three { bottom: 50%; transform: translateY(50%) rotate(-45deg); width: 100%;}
    #header .mobile .menu-btn.active .hamburger div.one span, 
    #header .mobile .menu-btn.active .hamburger div.three span{width: 100%; border-radius: 10px;}
    #header .menu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 98;}
    #header .menu-overlay.active { opacity: 1; visibility: visible;}
    #header .mobile-nav { position: fixed; top: 4px; right: -268px; z-index: 99; display: flex; flex-direction: column; align-items: stretch; width: 264px; height: calc(100vh - 8px); height: calc(100dvh - 8px); padding: 10px 16px 16px; border-radius: 12px; background: #fff; transition: right 0.3s ease; }
    #header .mobile-nav.active { right: 4px;}
    #header .mobile-nav .util { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; margin-bottom: 20px; padding: 0 30px 6px 0; border-bottom: 1px solid  var(--bg-color-e5);}
    #header .mobile-nav:has(.member-box-area.on) .util { margin-bottom: 2px; border: none; }
    #header .mobile-nav .util .link-main { padding: 10px 0; font-size: 14px; font-weight: 700; color: var(--point-color); line-height: 1;}
    #header .mobile-nav .util .link-main span{ padding-left: 24px; background: url('../images/common/icon-arrow-left-405ccc.svg') left center / 20px no-repeat;}
    #header .mobile-nav .util .link{padding: 10px 0 10px 10px; font-size: 12px; font-weight: 600; color: var(--text-color-8);}
    #header .mobile-nav .menu-tit{ margin-bottom: 4px; padding: 15px 14px; font-size: 16px; font-weight: 600; color: var(--point-color); border-radius: 8px; background-color: var(--bg-color); line-height: 1;}
    #header .mobile-nav .menu-list a{display: block; padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--text-color-5); line-height: 1;}
    #header .mobile-nav .mo-info{ margin-top: auto; font-size: 12px; color: var(--text-color-8); text-align: center;}

    /* member-box-area */
    #header .mobile-nav .member-box-area {display: none; margin-bottom: 10px; padding:15px 8px; border: 1px solid  var(--bg-color-e5); border-radius: 6px;}
    #header .mobile-nav .member-box-area.on{display: block;}
    #header .mobile-nav .member-box-area:has(.member-box .subscribe-info) {padding:14px 8px 8px;}
    #header .mobile-nav .member-box-area .member-box {display: flex; flex-direction: column; gap: 14px; min-width: 198px; transition: width 3s;}
    #header .mobile-nav .member-box-area .member-box .profile {display: flex; align-items: center;justify-content: flex-start; }
    #header .mobile-nav .member-box-area .member-box .profile .profile-img{width: 36px;height: auto; aspect-ratio: 1/1; background-color: transparent;}
    #header .mobile-nav .member-box-area .member-box .profile .profile-img img {background-color: transparent;}
    #header .mobile-nav .member-box-area .member-box .profile-name {min-width: 62%; padding-left: 8px;}
    #header .mobile-nav .member-box-area .member-box .profile-name .name {font-size: 16px; font-weight: 600; color:var(--text-color-2); line-height: 1;}
    #header .mobile-nav .member-box-area .member-box .profile-name .team {margin-top: 5px; font-size: 13px; font-weight: 600; color:var(--point-color);line-height: 1;}
    #header .mobile-nav .member-box-area .member-box .profile .more-btn {width: 30px; height: 30px; background: url('../images/common/icon-dot-btn.svg') no-repeat 16px -5px; background-size:24px 24px; text-indent: -9999px;}
    #header .mobile-nav .member-box-area .subscribe-info {display: flex; flex-direction: column;padding: 19px 6px 19px 12px; gap: 10px;background: #F2F3FA;  border-radius: 6px;}
    #header .mobile-nav .member-box-area .subscribe-cont {display: flex; justify-content: space-between; align-items: center; border-radius: 6px; line-height: 1;}
    #header .mobile-nav .member-box-area .subscribe-cont.plan{justify-content: flex-start;}
    #header .mobile-nav .member-box-area .subscribe-cont .tit { min-width: 50px;font-size: 14px; font-weight: 500; color:var(--text-color-8);}
    #header .mobile-nav .member-box-area .subscribe-cont .desc {min-width: 72px; font-size: 14px; font-weight: 500; color:var(--text-color-2);}
    #header .mobile-nav .member-box-area .subscribe-cont.plan .desc {margin-left: 14px;}
    #header .mobile-nav .member-box-area .subscribe-cont .circle {display: block; min-width: 42px; padding: 2px 0; font-size: 12px; font-weight: 700; color:var(--point-color); background: #fff; border-radius: 10px; text-align: center;}
}
/* footer */
@media screen and (max-width: 1240px) {
    #footer .foot{flex-direction: column-reverse;}
    #footer .foot .info{width: 100%;}
    #footer .foot .util{ justify-content: flex-start; margin-right: 0; margin-left: -6px;}
}
@media screen and (max-width: 1024px) {
    #footer{padding: 22px clamp(16px, 3.906vw, 40px) 40px; border-radius: clamp(30px, 3.906vw, 40px) clamp(30px, 3.906vw, 40px) 0 0; }
    #footer .notice-slider{display: none;}
    #footer .foot{margin-top: clamp(20px, 2.93vw, 30px);}
}
@media screen and (max-width: 767px) {
    #footer .foot{gap: 30px;}
    #footer .foot .info{font-size: clamp(13px, 1.825vw, 14px);}
    #footer .foot .info ul{flex-flow: column wrap; align-items: flex-start; gap: 4px; margin-bottom: 20px;}
    #footer .foot .info ul li{align-items: flex-start;}
    #footer .foot .info ul li:not(:last-child)::after{display: none;}
    #footer .foot .util .link {font-size: clamp(13px, 1.825vw, 14px);}
    #footer .foot .util .mid-line{height: 11px; margin: 0 3px;}
}