@charset "utf-8";

/* 공통 레이아웃 스타일 */

/* 스킵 */
#u_skip{position:relative;width:100%;z-index:9999}
#u_skip a{position:absolute;top:-100px;left:0;display:block;margin:0;width:100%;padding:15px 0;text-align:center;background-color:var(--color-secondary);color:#fff;opacity:0;transition:.3s}
#u_skip a:hover,
#u_skip a:focus,
#u_skip a:active{top:0;opacity:1}
#wrap{width: 100%; height: 100%; position: relative; z-index: 1;}

/* ====공통헤더==== */
#header {width: 100%; height: 100px; position: fixed; padding: 0 20px; border-bottom: 1px solid var(--color-stroke); box-sizing: border-box; background: #fff; z-index: 99;}
#header .inner {display: flex; justify-content: space-between; align-items: center; position: relative; max-width: 1440px; height: 100%; margin: 0 auto;}

#header hgroup.h-logo {display: flex; gap: 0 1rem; height: 100%;}
#header .inner hgroup .h-logoImg a {display: block; width: 200px; height: 100%; text-indent: -9999em; background: url(../../images/h-logo.svg) no-repeat 50% / contain;}
#header .inner hgroup .h-logoTit {display: flex; align-items: center;}
#header .inner hgroup .h-logoTit a {font-size: 2rem; font-weight: 600; color: var(--font-black20);}

#header nav.pcMenu {height: 100%;}
#header .depth-01 {display: flex; height: 100%}
#header .depth-01 > li {position: relative; min-width: 170px;}
#header .depth-01 > li > a {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 24px; color: var(--font-black10); font-weight: 500; font-size: 2rem; box-sizing: border-box;}
#header .depth-01 > li::after {content: ''; position: absolute; bottom: 0; left: 25%; width: 50%; border-bottom: 3px solid var(--color-secondary);}
#header .depth-01 > li::after {transform: scaleX(0); transform-origin: center; transition: transform 0.2s ease;}
#header .depth-01 > li.active::after {transform: scaleX(1);}
#header .depth-01 > li.active .depth-02 {display: block;} /* 1차 메뉴가 활성화 되면 2차 메뉴가 보이도록 */
#header .depth-01 > li.active .depth-02 > li > a {color: var(--font-black10);}
#header .depth-02 {position: relative; z-index: 88;  margin-top: 20px; opacity: 0; transform: translateY(-10px); visibility: hidden; transition: opacity 0.3s ease, transform 0.3s ease;}
#header .depth-02.active {opacity: 1; transform: translateY(0); visibility: visible;}
#header .depth-02 > li > a {display: flex; justify-content: center; width: 100%; padding: 20px 0; color: var(--font-gray); font-size: 1.8rem;}
#header .depth-02 > li > a.active {font-weight: 600; color: var(--color-secondary) !important;}

#header button.logout {padding: 6px 8px; border-radius: 50px; font-size: 1.4rem; font-weight: 500; color: #fff; background: var(--color-primary);}
@media (max-width: 1200px) {
	#header button.logout {position: absolute; right: 60px; color: var(--font-gray); background: none;}
}
@media (max-width: 480px) {
	#header button.logout {position: absolute; right: 40px; color: var(--font-gray); background: none;}
}


#header .pcMenu-bg {position: absolute; top: 100px; left: 0; z-index: 77; width: 100%; height: 400px; background: #fff; box-shadow: 0px 4px 10px rgba(0,0,0,0.1);}
#header .pcMenu-bg {transition: transform 0.3s ease, opacity 0.3s ease; transform: translateY(-20px); opacity: 0; visibility: hidden;}
#header .pcMenu-bg.active {opacity: 1; transform: translateY(0); visibility: visible;}

/* 버거메뉴 버튼 */
#header .burger-wrap {display: none; position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}
#header .menu-btn {position: relative; display: block; width: 40px; height: 40px; border-radius: 100%; background: var(--font-black10); cursor: pointer;}
#header .menu-btn span,
#header .menu-btn span:before,
#header .menu-btn span:after {display: block; position: absolute; left: 0; width: 24px; height: 2px; background: #fff; border-radius: 4px; transition: 0.3s ease-in-out;}
#header .menu-btn span {top: 50%; left: 50%; transform: translate(-50%, -50%);}
#header .menu-btn span:before,
#header .menu-btn span:after {content: '';}
#header .menu-btn span:before {top: -6px;}
#header .menu-btn span:after {top: 6px;}

#header .menu-btn.is-open span {background: transparent; transition: 0.3s ease-in-out;}
#header .menu-btn.is-open span:before{top: 0; transform: rotate(45deg); transition: 0.3s ease-in-out;}
#header .menu-btn.is-open span:after{top: 0; transform: rotate(-45deg); transition: 0.3s ease-in-out;}


/* 모바일 메뉴 */
#mobileMenu-wrap {position: absolute; height: 100%; width: 100%; overflow: hidden; z-index: 10; visibility: hidden;}
#mobileMenu-wrap::before {display: block; content: ''; position: fixed; top: 0; left: 0;  width: 100%; height: 100%;  background: rgba(0, 0, 0, 0); transition: background 0.3s ease; pointer-events: none;}
#mobileMenu-wrap.is-open {visibility: visible;}
#mobileMenu-wrap.is-open::before {background: rgba(0, 0, 0, 0.7); pointer-events: auto;}
.mobileMenu {width: 320px; height: calc(100% - 100px); overflow-y: auto; background: #fff; position: fixed; top: 100px; right: -100%; transition: right 0.5s ease-in-out;}
.mobileMenu.is-open {right: 0;}
.mobileMenu a {position: relative; display: block; padding: 24px 40px; font-size: 1.8rem; font-weight: 500; color: var(--font-black20);}
.mobileMenu .depth-01 > li { height: 100%; border-bottom: 1px solid var(--color-stroke);}
.mobileMenu .depth-01 > li > a:after {display: block; content: ''; width: 24px; height: 24px; color: var(--font-black20); position: absolute; top: 50%; right: 40px; transform: translateY(-50%); background: url(../../images/menu-arrow.svg) no-repeat center;}
.mobileMenu .depth-01 > li > a:after {transform: translateY(-50%) rotate(0deg); transition: transform 0.5s ease;}
.mobileMenu .depth-01 > li.is-open > a:after {transform: translateY(-50%) rotate(-180deg);}
.mobileMenu .depth-02 {max-height: 0; overflow: hidden; transition: max-height 0.5s ease;}
.mobileMenu .depth-02 li {background: var(--color-gray10); border-top: 1px solid var(--color-stroke); }
.mobileMenu .depth-02 li a {font-size: 1.8rem; font-weight: 400;}

@media (min-width: 1200px) {
	#mobileMenu-wrap {display: none;}
}

@media (max-width: 1440px) {
	#header hgroup.h-logo {flex-direction: column; gap: 6px 0; justify-content: center; align-items: left; transition: 0.3s;}
	#header .h-logoImg {width: 160px; height: 32px; display: flex; transition: 0.3s ease;}
	#header .inner hgroup .h-logoTit a {font-size: 1.8rem; transition: 0.3s ease;}
}

@media (max-width: 1200px) {
	#header hgroup.h-logo {flex-direction: row; align-items: center; gap: 0 8px; transition: 0.3s ease;}
	#header nav.pcMenu {display: none; transition: 0.3s ease;}
	#header .burger-wrap {display: block;}
}

@media (max-width: 520px) {
	#header {height: 80px; transition: 0.3s ease;}
	#header .h-logoTit a {display: none;}
	.mobileMenu {height: calc(100% - 80px); top: 80px; transition: 0.3s ease;}
}

@media (max-width: 480px) {
	#header .menu-btn {width: 32px; height: 32px;}
	#header .menu-btn span,
	#header .menu-btn span:before,
	#header .menu-btn span:after {width: 16px;}
	.mobileMenu a {padding: 20px 32px;}
	.mobileMenu .depth-01 li a {font-size: 1.6rem;}
	.mobileMenu .depth-02 li a {font-size: 1.4rem;}
	.mobileMenu .depth-01 > li > a:after {right: 20px;}
}
/* 검색버튼을 눌러 검색영역을 활성화가 필요한 경우 등 */
#srch_total{}

/* 전체 넓이, aside를 갖는 형태등의 레이아웃 */
#container {position: relative; background: #fff;}
#s_container {position: relative; padding: 180px 0 100px 0; background: #fff;}
#s_container .content_wrap {width: 100%; max-width: 1200px;}
section {position: relative; z-index: 1;} 
.content_wrap {width: 100%; max-width: 1440px; padding: 0 20px; margin: 0 auto;}

@media (max-width: 1440px) {
	.content_wrap {width: 100%; padding: 0 20px;}
}

@media (max-width: 1200px) {
	#s_container .content_wrap {padding: 0 20px;}
}

@media (max-width: 768px) {
	#s_container {position: relative; padding: 140px 0 80px 0;}
}



/* 공통푸터 */
#footer{position: relative; bottom: 0; z-index: 1; width: 100%; height: auto; background: #333;}
#footer .inner {position: relative; width: 100%; max-width: 1440px; margin: 0 auto; padding: 6rem 2rem 8rem 2rem; display: flex; justify-content: space-between;}
#footer .inner .f_left {display: flex; flex-direction: column; gap: 3rem;}
#footer .foot-link a {color: var(--color-gray10); font-size: 1.6rem; font-weight: 300;}
#footer .foot-link a:not(:last-of-type)::after {display: inline-block; content: ''; width: 1px; height: 10px; margin: 0 12px; background: #fff;}
#footer .addr {display: flex; flex-direction: column; gap: 1rem;}
#footer .addr ul {display: flex;}
#footer .addr li {color: var(--color-gray10); font-weight: 300;}
#footer .addr li:not(:last-of-type)::after {display: inline-block; content: ''; width: 1px; height: 10px; margin: 0 12px; background: #fff;}
#footer .addr li em {font-weight: 500; margin-right: 0.4rem;}
#footer .addr .copyright {color: #909090; font-size: 1.4rem; font-weight: 300;}
#footer .admin {width: fit-content; padding: 8px 12px; color: #fff; background: #555; font-size: 1.5rem; font-weight: 300; border-radius: 4px;}
#footer .footer-logo {width: 200px; height: 33px; font-size: 0; background: url(../../images/f-logo.svg) no-repeat center;}

@media (max-width: 1440px) {
	#footer .inner {width: 100%; padding: 6rem 2rem 8rem 2rem;}
}

@media (max-width: 1024px) {
	#footer .inner {flex-wrap: wrap-reverse; flex-direction: column; gap: 4rem;}
	#footer .inner .f_right,
	#footer .inner .f_left {display: flex; justify-content: center; align-items: center;}
	#footer .inner .f_right {order: -1; justify-content: center;}
	#footer .inner .f_left .copyright {text-align: center;}
	#footer .addr {gap: 2rem;}
	#footer .addr ul {flex-direction: column; justify-content: center;}
	#footer .addr li {text-align: center; line-height: 1.6;}
	#footer .addr li:not(:last-of-type)::after {display: none;}
}

/* 
* 반응형 웹 브레이크 포인트 
* 프로젝트별 변경
* 참고) https://gs.statcounter.com/screen-resolution-stats/tablet/south-korea
*/

@media (max-width:1366px){
	/* 타블렛 가로, 노트북 평균 해상도 */
}

@media (max-width:1280px){
	/* 타블렛 가로 */
}

@media (max-width:1024px){
	/* 타블렛, 모바일 가로  */
}

@media (max-width:420px){
	/* 모바일 */
}

/* 모달창 */
.modal_wrap {display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 999;}
.modal_wrap::before {content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6);}
.modal {margin: 0 40px; border-radius: 8px; height: fit-content; overflow: hidden; background: #fff; z-index: 1000;}
.modal::before {content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6);}
.modal-table {max-height: 300px; display: block; width: 100%; border-collapse: collapse; position: relative; overflow: auto;}
.modal-table table {min-width: 600px;}
.modal-table table thead {display:table-header-group !important; table-layout: fixed;}
.modal-table table tbody {display:table-row-group !important;}
.modal-table label {display: block; width: 100%; height: 100%;}
.modal-table input.check-list {width: 20px; height: 20px;}
.modal .tit-area {width: 100%; height: 80px; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; border-bottom: 1px solid var(--color-stroke);}
.modal .tit-area strong.tit {font-size: 2.2rem; font-weight: 500; line-height: 1.3; word-break: keep-all;}
.modal .tit-area button.close-btn {width: 32px; height: 32px; background-color: #fff; border-radius: 2px; border: 1px solid var(--color-stroke);}
.modal .tit-area button.close-btn {background-image: url(../../images/sub/modal/popup-close.svg); background-repeat: no-repeat; background-position: center;}
.modal .modal-contents {width: 100%; padding: 40px 40px 60px 40px;}


.modal.discount-check {max-width: 1000px;}

@media (max-width: 768px) {
	.modal {margin: 0 20px;}
	.modal .tit-area {padding: 0 20px;}
	.modal .tit-area strong.tit {font-size: 1.8rem}
	.modal .modal-contents {padding: 30px 20px;}
}