@charset "utf-8"; /* ******************* *
* FONTS
* ******************* */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); /* ******************* *
* GLOBAL
* ******************* */
:root {--maxWidth: 190rem;--maxWidth2: 150rem;--maxWidth3: 110rem;--inPd: 5rem;--font-Pretendard: "Pretendard", sans-serif;--color-main: #1226AA;--color-main-hover: #111;--color-page-title: #0C1659;--headerH: 120px;} 

@media (max-width: 1400px){
 :root { --inPd: 5rem; } 
 }
@media (max-width: 1024px){
 :root { --inPd: 3rem; --headerH: 110px; } 
 }
@media (max-width: 768px){
 :root { --inPd: 2.5rem; --headerH: 100px; } 
 }


html { font-size: 62.5%; } /* desktop: 1rem=10px */
body { color: #111; font-family: var(--font-Pretendard); font-size: max(1.80rem, 17px); /* letter-spacing: -0.038rem; */line-height: 1; word-break: keep-all; word-wrap: break-word; color:#000; touch-action: auto; overscroll-behavior: auto; text-size-adjust:100%; scroll-behavior: smooth; } 
html.lock,
body.lock { overflow: hidden; touch-action: none; overscroll-behavior: none; } 

.cinner { max-width: var(--maxWidth); padding: 0 var(--inPd); margin: 0 auto; } 
.line-br { display: block; } 

.btn__page-admin { padding: 6px 8px; background: #ef4343; color: #fff; font-size: 12px; font-weight: 500; line-height: 1; position: fixed; left: 20px; bottom: 20px; z-index: 999; } 
.btn__admin-util { display: inline-block; padding: 6px 8px; background: #ef4343; color: #fff; font-size: 12px; font-weight: 500; line-height: 1; } 

#container:not(.is_index) {margin-top: var(--headerH);padding-bottom: 15rem;} 
.page__contents { max-width: 152rem; position: relative; } 

@media (max-width: 1024px) { html { font-size: 56.25%; /* 1rem = 9px */ } 
 }
@media (max-width: 768px) { html { font-size: 50%; /* 1rem = 8px */ } 
 }

/* SCROLL BAR */
body::-webkit-scrollbar { width: 6px; } 
body::-webkit-scrollbar-thumb { background-color: var(--color-main); } 
body::-webkit-scrollbar-track { background-color: #f9f9f9; } 

html.lenis,
html.lenis body { height: auto; } 
.lenis.lenis-smooth { scroll-behavior: auto !important; } 
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } 
.lenis.lenis-stopped { overflow: hidden; } 


/* ******************* *
* POPUP
* ******************* */
#hd_pop { z-index:1000; position:relative; } 
#hd_pop h2 { position:absolute; font-size:0; line-height:0; overflow:hidden } 
.hd_pops { position:absolute; border:1px solid #e9e9e9; background:#fff; } 
.hd_pops img { max-width:100%; width: 100%; height: auto; } 
.hd_pops_con { } 
.hd_pops_footer { padding:0; background:#000; color:#fff; text-align:left; position:relative } 
.hd_pops_footer:after { display:block; visibility:hidden; clear:both; content:"" } 
.hd_pops_footer button { padding:10px; border:0; color:#fff; font-size: 14px; } 
.hd_pops_footer .hd_pops_reject { background:#000; text-align:left; font-size: 14px; } 
.hd_pops_footer .hd_pops_close { width: 58px; height: 100%; padding: 0; background:#393939; position:absolute; top:0; right:0 } 

@media all and (max-width: 1024px){
 #hd_pop { margin: 0 auto; } 
 .hd_pops { max-width: 500px; width: calc(100% - 60px); position: fixed; top: 50% !important; left:50% !important; transform: translate(-50%, -50%); } 
 .hd_pops_con { width: 100% !important; height: auto !important; } 
 .hd_pops_footer .hd_pops_reject { font-size: 10px; } 
 .hd_pops_footer .hd_pops_close { width: 45px; font-size: 10px; } 
 }



/* ******************* *
* HEADER
* ******************* */
#header { width: 100%; height: var(--headerH); background: transparent; position: fixed; top: 0; left: 0; right: 0; margin: auto; transform: translateY(0); z-index: 99; transition: transform .3s ease; } 
/* #header.hide { transform: translateY(-100%); } */
#header.shadow { position: fixed; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); } 
#header.fixed { background:#fff; transition: transform .5s ease; } 
#header.fixed .header__top-banner { height: 0; } 


.header__top-banner { display: none; justify-content: center; align-items: center; width: 100%; height: 30px; background: #111; color: #fff; font-size: max(1.3rem, 13px); text-align: center; transition: .35s; } 

.header__cont { padding: 2.0rem 0; height:100%} 
.header__cont .cinner { display: flex; justify-content: space-between; align-items: center; gap: 40px; position: relative; max-width: none; padding: 0 30px;  height:100%} 
.header__nav { display: flex; align-items: flex-end; gap: 35px; } 
/* .header__logo { flex-shrink: 0; }  */
.header__logo { position:absolute; left:50%; top:50%;transform: translate(-50%, -50%); } 

.main-nav__depth1 .mn-ul1 { display: flex; align-items: center; gap: 60px; } 
.main-nav__depth1 .mn-li1 { position: relative; } 
.main-nav__depth1 .mn-a1 { display: block; box-sizing: border-box; font-size: max(1.6rem, 16px); } 
.main-nav__depth1 .mn-s1 { display: block; width: 100%; height: 100%; padding: 6px 0; position: relative; } 
.main-nav__depth1 .mn-s1::after { content: ''; width: 0; height: 1px; background: #111; position: absolute; bottom: 0px; left: 0; transform: translateY(100%); opacity: 0; transition: width .5s ease; } 
.main-nav__depth1 .mn-a1:hover { color: var(--color-main-hover); } 
.main-nav__depth2 { min-width: 120px; padding: 8px; border: 1px solid #ddd; box-sizing: border-box; border-radius: 8px; background: #fff; position: absolute; top: calc(100% + 30px); left: 50%; transform: translateX(-50%); z-index: 99; opacity: 0; visibility: hidden; transition: .5s ease; } 
.main-nav__depth2 .mn-a2 { display: block; padding: 12px 16px; border-radius: 7px; box-sizing: border-box; color: #303030; font-size: max(1.5rem, 15px); text-align: center; transition: .35s ease; } 
.main-nav__depth2 .mn-a2:hover { background: #f7f7f7; color: var(--color-main); } 
.main-nav__depth1 .mn-li1:hover .mn-s1::after { width: 100%; opacity: 1; } 
.main-nav__depth1 .mn-li1:hover .main-nav__depth2 { top: calc(100% + 0px); opacity: 1; visibility: visible; } 
.header__member { position: absolute; top: 0; right: var(--inPd); } 
.header__member ul { display: flex; align-items: center; gap: 2.2rem; } 
.header__member ul li a { font-size: max(1.4rem, 12px); } 

.header__utility { display: flex; align-items: center; gap: 30px; } 
.header__utility .search__cont { flex: 1; width: 300px; height: 45px; border-radius: 22.5px; background: #F5F5F5; overflow: hidden; } 
.header__utility .search__cont #totalSch { width: 100%; height: 100%; } 
.header__utility .search__cont form { width: 100%; height: 100%; position: relative; } 
.header__utility .search__cont form > #sch_str { width: 100%; height: 100%; padding: 0 60px 0 20px; border: 0; background: transparent; color: #000; font-size: max(1.6rem, 16px); } 
.header__utility .search__cont form > #sch_submit { display: block; width: 20px; aspect-ratio: 1 / 1; border: 0; background: url(../img/common/ico-search.svg) center center / cover no-repeat; position: absolute; top: 50%; right: 30px; transform: translateY(-50%); } 
.header__utility .search__cont .btn-search_close { display: none; align-items: center; gap: 10px; border: 0; background: none; color: #111; font-family: var(--font-Inter); font-size: 16px; position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%); } 

.header__utility ul { flex-shrink: 0; display: flex; align-items: center; gap: 20px; } 
.header__utility ul a { color:#343232 } 
.header__utility ul li .msch__btn { display: none; border: 0; background: transparent; } 
.header__utility ul li .btn__cart { position: relative; } 
.header__utility ul li .btn__cart .count { display: flex; justify-content: center; align-items: center; width: 18px; aspect-ratio: 1 /1; border-radius: 50%; background: var(--color-main); color: #fff; font-size: 9px; position: absolute; top: 0; right: 0; transform: translate(50%, -50%); } 

.nav__btn a { display: flex; align-items: center; color:#343232; font-size: 2.2rem; } 
/* 
#header.sub-header {background: #161616;}
#header.sub-header .nav__btn a,
#header.sub-header .header__utility ul a {color: #fff;}
#header.sub-header .nav__btn a:before, 
#header.sub-header .nav__btn a:after,
#header.sub-header .nav__btn a i {background: #fff;}
 */


@media (max-width: 1400px){
	.header__utility { padding-bottom: 6px; } 
	.header__utility .search__cont { display: none; justify-content: center; align-items: center; width: 100%; height: 100%; border-radius: 0; background: rgba(255, 255, 255, .6); backdrop-filter: blur(10px); position: fixed; top: 0; left: 0; z-index: 999; opacity: 0; visibility: hidden; transition: .3s ease; } 
	.header__utility .search__cont.active { display: flex; opacity: 1; visibility: visible; } 
	.header__utility .search__cont #totalSch { max-width: 480px; width: 85%; height: 45px; } 
	.header__utility .search__cont form > #sch_str { border-bottom: 2px solid #000; } 
	.header__utility .search__cont .btn-search_close { display: flex; } 
	.header__utility .search__cont .btn-search_close::after { content: 'X'; } 
	.header__utility ul li .msch__btn { display: block; } 
 }
@media (max-width: 1200px){
	.header__cont .cinner { justify-content: center; } 
	#main-nav { display: none; } 
	.header__member { top: -5px; } 
	.header__utility { padding-bottom: 0; position: absolute; top: calc(50% - 9px); right: var(--inPd); } 
	.nav__btn { display: block; position: absolute; top: 50%; left: var(--inPd); transform: translateY(-50%); } 
 }
@media (max-width: 1024px){
	.header__logo img { max-width: 85%; margin: 0 auto; } 
	.header__member ul { gap: 12px; } 
	.header__utility ul { display:none } 
	.nav__btn a { position: relative; display: block; width: 30px; height: 25px; font-size: 0; } 
	.nav__btn a i { width: 100%; height: 2px; background: #000; display: block; position: absolute; top: 50%; transform: translateY(-50%); } 
	.nav__btn a:before,
	.nav__btn a:after { position:absolute; content:''; width:100%; height:2px; background:#000 } 
	.nav__btn a:before { left:0; top:0 } 
	.nav__btn a:after { left:0; bottom:0 } 
 }
@media (max-width: 640px){
	.header__logo img { max-width: 80%; } 
	.header__utility ul { gap: 15px; } 
	.header__utility ul li:has(.btn__wish),
	.header__member { display: none; } 
	.nav__btn a  {width:25px; height:20px}
 }



/* ******************* *
* SIDEBAR
* ******************* */
#sidebar { max-width: 400px; width: 100%; height: 100vh; box-sizing: border-box; background: #fff; position: fixed; top: 0; left: 0; transform: translateX(-100%); z-index: 9999; transition: .35s; visibility: hidden; opacity: 0; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); } 
#sidebar.active { transform: translateX(0); visibility: visible; opacity: 1; } 
.sidebar__gnb { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 24px 15px; box-sizing: border-box; border-bottom: 1px solid #ececec; } 
.sidebar__gnb .sidebar-btn_close { display: block; width: 24px; aspect-ratio: 4 / 3; border: 0; background: no-repeat; position: relative; } 
.sidebar__gnb .sidebar-btn_close::before,
.sidebar__gnb .sidebar-btn_close::after { content: ''; display: block; width: 100%; height: 2px; background: #000; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } 
.sidebar__gnb .sidebar-btn_close::before { transform: rotate(45deg); } 
.sidebar__gnb .sidebar-btn_close::after { transform: rotate(-45deg); } 
.sidebar__gnb .sidebar__cart { color: #303030; font-size: max(1.5rem, 15px); font-weight: 500; letter-spacing: .02em; } 
.sidebar__cont { max-height: 92%; max-height: calc(100vh - 68px); height: 100vh; box-sizing: border-box; overflow-y: scroll; } 
.sidebar__cont::-webkit-scrollbar { width: 4px; } 
.sidebar__cont::-webkit-scrollbar-thumb { background-color: #bfbfbf; border-radius: 2px; } 
.sidebar__cont::-webkit-scrollbar-track { background-color: transparent; } 
.sidebar__cont .sidebar__login { padding: 20px 15px; border-bottom: 1px solid #ececec; box-sizing: border-box; } 
.sidebar__cont .sidebar__login ul { display: flex; align-items: center; gap: 10px; } 
.sidebar__cont .sidebar__login ul li { width: calc(50% - 5px); } 
.sidebar__cont .sidebar__login ul li a { display: flex; justify-content: center; align-items: center; width: 100%; height: 45px; border: 1px solid #ddd; border-radius: 5px; font-size: max(1.5rem, 14px); } 
.sidebar__cont .sidebar__login ul li a.bg--color { border-color: var(--color-main); background: var(--color-main); color: #fff; } 
.sidebar__menu_depth1 a { transition: .35s; } 
.sidebar__menu_depth1 .mn-ul1 { display: flex; flex-direction: column; } 
.sidebar__menu_depth1 .mn-li1 { border-bottom: 1px solid #ececec; position: relative; } 
.sidebar__menu_depth1 .mn-li1.active .sidebar__menu_depth2 { margin-bottom: 15px; } 
.sidebar__menu_depth1 .mn-li1:has(.sidebar__menu_depth2) >.toggle-arrow { width: 18px; aspect-ratio: 1 / 1; position: absolute; top: 30px; right: 18px; transform: translateY(-50%); cursor: pointer; } 
.sidebar__menu_depth1 .mn-li1:has(.sidebar__menu_depth2) >.toggle-arrow::before,
.sidebar__menu_depth1 .mn-li1:has(.sidebar__menu_depth2) >.toggle-arrow::after { content: ''; width: 100%; height: 2px; background: #111; position: absolute; inset: 0; margin: auto; transition: transform 0.3s ease-in-out; } 
.sidebar__menu_depth1 .mn-li1:has(.sidebar__menu_depth2) >.toggle-arrow::after { transform: rotate(90deg); } 
.sidebar__menu_depth1 .mn-li1:has(.sidebar__menu_depth2).active > .toggle-arrow::after { transform: rotate(0); } 
.sidebar__menu_depth1 .mn-a1 { display: block; width: 100%; padding: 20px 45px 20px 18px; color: #262626; font-size: max(1.70rem, 17px); font-weight: 500; transition: .35s; } 
.sidebar__menu_depth1 .mn-a1:hover { color: var(--color-main); } 
.sidebar__menu_depth2 { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; padding: 0 15px; box-sizing: border-box; } 
.sidebar__menu_depth2 .mn-ul2 { display: flex; flex-direction: column; padding: 10px 15px; border-radius: 8px; box-sizing: border-box; background: #f7f7f7; } 
.sidebar__menu_depth2 .mn-li2 { position: relative; } 
.sidebar__menu_depth2 .mn-li2:last-child { border-bottom: 0; } 
.sidebar__menu_depth2 .mn-li2:has(.sidebar__menu_depth3) > .toggle-arrow { display: block; width: 12px; height: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff; position: absolute; top: 29px; right: 10px; transform: translateY(-50%) rotate(135deg); cursor: pointer; transition: transform 0.3s ease-in-out; } 
.sidebar__menu_depth2 .mn-li2:has(.sidebar__menu_depth3).active > .toggle-arrow { transform: rotate(-45deg); } 
.sidebar__menu_depth2 .mn-a2 { display: block; padding: 12px 0; color: #6f6f6f; font-size: max(1.6rem, 15px); transition: .35s ease; } 
.sidebar__menu_depth2 .mn-a2:hover { color: var(--color-main-hover); } 
.sidebar__utils { width: 100%; height: 50px; background: #f6f6f6; position: fixed; left: 0; right: 0; bottom: 0; margin: auto; } 
.sidebar__utils .list { display: flex; justify-content: center; align-items: center; gap: 15px; width: 100%; height: 100%; } 
.sidebar__utils .list li { position: relative; } 
.sidebar__utils .list li:not(:last-child) { padding-right: 15px; } 
.sidebar__utils .list li:not(:last-child)::after { content: ''; width: 1px; height: 10px; background: #D9D9D9; position: absolute; top: 0; right: 0; bottom: 0; margin: auto; } 
.sidebar__utils .list li a { color: #6a6a6a; font-size: max(1.40rem, 14px); transition: .35s ease; } 
.sidebar__utils .list li a:hover { color: #333; } 



/* ******************* *
* FOOTER
* ******************* */
#footer { padding: 0 0 4.5rem; background: var(--color-main); color: #fff; } 
#footer .cinner { padding:0; max-width: none; } 
.footer_top { border-bottom:1px solid #9A9A9A; width:100%; padding:2rem 3rem; display: flex; align-items: center; gap:1rem; } 
.footer_top a { color:#fff; font-size: 16px; border-right:1px solid #fff; padding-right:1rem } 
.footer_top a:last-child { border-right:0; } 
.footer_bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.0rem 3.0rem; padding:0 3rem; padding-top:4.5rem; align-items: center; } 
.footer__info_wrap { display: flex; flex-direction: column; gap:1rem; } 
.footer__cont .title { margin-bottom: 2.0rem; font-size: 1.6rem; font-weight: 700; } 
.footer__cont .desc { font-size: max(1.6rem, 16px); line-height:1; padding-right:1rem; border-right:1px solid #fff } 
.footer__cont .desc:nth-child(3n) { border-right:none; } 
.footer__cont .desc b { display: block; } 
.footer__cont--left .footer__info { display: flex; flex-wrap: wrap; gap: 1.0rem; line-height: 1.36; } 
.footer__cont--left .footer__info:not(:last-child) { margin-bottom: 3px; } 
.footer__copyright { width: 100%; color: #fff; font-size: max(1.8rem, 18px); margin-top:2rem } 


@media (max-width: 1400px){
 #footer .cinner { flex-direction: column; gap: 3.0rem; } 
 }
@media (max-width: 768px){
 .footer__cont--right { display: flex; align-items: center; justify-content: center; width: 100%; margin-top:50px } 
 }
 @media (max-width: 500px){
 .footer__cont--right { margin-top:20px } 
 .footer__cont .desc { font-size:12px; } 
 .footer__copyright,
 .footer_top a { font-size: 14px; } 
 }


/* ******************* *
* TOP BTN
* ******************* */
/* #top__btn { width: 60px; aspect-ratio: 1 / 1; border: 0; border-radius: 50%; background: var(--color-main); color: #fff; font-size:15px; text-align: center; box-shadow: 0 10px 20px 0 rgba(0, 5, 18, 0.10); position: fixed; right: 20px; bottom: -100%; transition: .5s; z-index: 20; } 
#top__btn:hover { background:var(--color-main-hover); padding-bottom: 15px; } 
#top__btn.over { opacity:1; bottom: 20px; } */
#top__btn {display: flex;flex-direction: column;justify-content: center;align-items: center;width: 6rem;aspect-ratio: 1 / 1;border: none;background: var(--color-main);color: #fff;font-size: max(1.5rem, 14px);text-align:center;position:fixed;right:20px;bottom:-100%;transition:.5s;z-index:9999;} 
#top__btn:before {content:'';width: 20%;aspect-ratio: 1 / 1;border-top: 3px solid #fff;border-left: 3px solid #fff;transform: rotate(45deg);} 
#top__btn.over { opacity:1; bottom: 20px; } 

/* ******************* *
* 페이징
* ******************* */
.pg_wrap { margin: 10rem 0 0; text-align:center } 
.pg { text-align:center } 
.pg_page, 
.pg_current,
.qa_page { display:inline-block; vertical-align:middle; } 
.pg a:focus,
.pg a:hover { text-decoration:none } 
.pg_page,
.qa_page { min-width: 30px; height: 30px; border: 0; background: transparent; color: #666; font-size: max(1.4rem, 14px); line-height:28px; } 
.pg_page:hover,
.qa_page:hover { background-color:#fafafa } 
.pg_start { text-indent:-999px; overflow:hidden; background: url(../img/btn_first.gif) no-repeat 50% 50%; padding:0; } 
.pg_prev { text-indent:-999px; overflow:hidden; background:url('../img/btn_prev.gif') no-repeat 50% 50%; padding:0; } 
.pg_end { text-indent:-999px; overflow:hidden; background:url('../img/btn_end.gif') no-repeat 50% 50%; padding:0; } 
.pg_next { text-indent:-999px; overflow:hidden; background:url('../img/btn_next.gif') no-repeat 50% 50%; padding:0; } 
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover { background-color:#fafafa } 

.pg_current { display:inline-block; min-width: 30px; height: 30px; border: 0; background: transparent; color: #000; font-size: max(1.5rem, 15px); font-weight: 700; line-height:30px; text-decoration: underline; text-underline-offset: 6px; } 



/* ******************* *
* SUB VISUAL
* ******************* */
.sub-visual {display: flex;flex-direction: column;align-items: center;height: 512px;margin-bottom: 7rem;position: relative;}
.sub-visual__img {background-size: cover;background-repeat: no-repeat;background-position: center;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 0;}
.sub-visual__img img {width: 100%;height: 100%;position: absolute;top: 0;left: 50%;transform: translateX(-50%);}
.sub-visual__cont {display: flex;align-items: center;justify-content: center;flex: 0 1 auto;width: 100%;height: 100%;color: #fff;line-height: 1.3;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 1;}
.sub-visual__cont .cinner {max-width: var(--maxWidth3);width: 100%;}
.sub-visual__cont .title {color: var(--color-page-title);font-size: 6.4rem;font-weight: 700;}
/* 애니메이션 */
@keyframes fadeUp {
    0% {opacity: 0;transform: translateY(30px);}
    100% {opacity: 1;transform: translateY(0);}
}
.sub-visual__cont .title{opacity: 0;transform: translateY(30px);}
.sub-visual__cont .title {animation: fadeUp 0.6s ease-out forwards;animation-delay: 0.3s;}

@media all and (max-width: 1024px){
	.sub-visual {height: 400px;}
	.sub-visual__cont .title {font-size: 5.50rem;}
}
@media all and (max-width: 768px){
	.sub-visual {height: 350px;}
}
@media all and (max-width: 640px){
	.sub-visual__cont .title {font-size: 5.0rem;}
}