/* include 공통 CSS */
.primary {color: var(--main-color);}
body:has(.main-visual) .sub-container {padding-top: 0;}
body:has(.main-visual) .header-fixed, body:has(.main-visual) .header-fixed__inner {background-color: transparent; }
body:has(.main-visual) .header-fixed {background:linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.7) 100%);}
body:has(.main-visual) .header-fixed__inner {background-color: transparent;}
body:has(.main-visual) .header-fixed {background-color: transparent;}
body:has(.main-visual) .header-home__logo {filter: brightness(0) invert(1);}
body:has(.main-visual) .header-navi .header-navi__btn {color: #fff;}
body:has(.main-visual) .header-ctrl__btn--icon {filter: brightness(0) invert(1);}
body:has(.main-visual) .hamburger__line {background-color: #fff;}


/* .basket {padding: 0 0 3.8462em;} */
.basket__inner {max-width: 912px; margin: 0 auto;}
.mypage-top {padding-top: 1.4286em;}
.mypage-tab {display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 10px; padding-top: 1.643em;}
.mypage-tab__link {display: block; padding: 9px; border-radius: 4px; border: 1px solid var(--main-black); font-size: 14px; font-weight: 500; text-align: center;}
.mypage-tab__link--active {background-color: var(--main-color); border-color: var(--main-color); color: #fff;}
@media (min-width:769px) {
	.mypage-top {padding-top: 1.5385em;}
	.mypage-tab {padding-top: 2.9375em; grid-template-columns: repeat(4, 1fr);}
}
.basket__table {margin-top: 1.76923em;}
.basket__int {padding-right: 0.625em; padding-bottom: 0.5em; display: flex; justify-content: space-between; align-items: center;}
.basket__tit {display: none; padding-bottom: 0.4em; font-size: 20px; font-weight: 700;}
.basket__delete {position: absolute; right: 0.5em; top: 1.0625em; z-index: 1;}
.basket__delete img {width: 1em;}
.basket__column {display: flex; align-items: center; width: 100%;}
.basket__column--header {border-radius: 4px; overflow: hidden;}
.basket__link {flex: 2; display: flex;}
.basket__cell {flex: 1;}
.basket__cell--image {}
.basket__cell--product {}
.basket__cell--count {}
.basket__cell--view {display: none;}
.basket__label {display: inline-block; cursor:pointer;}
.basket__frame {width: 80px; height: 100%; margin: 0 auto;}
.basket__frame img {object-fit: cover; width: 100%; height: 100%; mix-blend-mode: multiply;}
.basket__info {flex:1; display: flex; flex-direction:column-reverse}
.basket__code {font-size: 0.9375em; font-weight: 300;}
.basket__name {font-size: 1.0625em; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.basket__count {display: flex; justify-content: center; align-items: center; width: 100%; height: 1.8125em;}
.basket__btn {width: 1em; height: 100%;}
.basket__btn span {font-size: 1.25em;}
.basket__cnt {display: flex; justify-content: center; align-items: center; width: 25px; height: 100%; font-size: 1.25em; font-weight: 500; color: #222;}
.basket__ctrl {display: flex; justify-content: center; gap: 10px; margin: 1.7857em auto 0;}
.basket__field {flex:1; display: flex; justify-content: center; align-items: center; border-radius: 4px; font-size: 1.0625em; height: 2.8236em; font-weight: 500;}
.basket__field--add {border:1px solid var(--main-black)}
/* .basket__field--add:before {content:"+"; margin-right: 0.5em;} */
.basket__field--submit {background-color: var(--main-color); color: #fff;}
.basket__checkbox {position: relative; width: 0.9375em; height: 0.9375em; border:1px solid #000; background-color: #fff;}
.basket__checkbox:after {position: absolute; content:''; display: none; top: 0; left: 0; width: 100%; height: 100%; background: url('<?=GTI?>/img/chk_icon.png') no-repeat center / cover;}

.basket-sum {margin-top: 5px; background-color: var(--gray100); padding: 0.5em 0.75em;}
.basket-sum__text {display: flex; justify-content: flex-end; gap: 0.625em; font-size: 16px; font-weight: 500;}
.basket-sum__text .primary {font-weight: 600;}
@media(min-width:769px){
	/* .basket {padding: 3.8462em 0 5.4375em;} */
	.basket__int {padding-right: 1.5em; padding-bottom: 1.5em;}
	.basket__tit {display: block;}
	.basket__table {margin-top: 4em;}
	/* .basket__column--header:after {content:''; display: block; width: 16.875em; background-color: #000;} */
	.basket__link {flex: 1;}
	.basket__cell--chk {flex: none; width: 8.125em;}
	.basket__cell--view {display: flex; justify-content: center; align-items: center; width: 16.875em; text-align: center;}
	.basket__cell--view a {font-size: 1.0625em; font-weight: 500; opacity: 0.5;}
	.basket__cell--image {flex: none; width: 10em;}
	.basket__cell--count {flex: none; width: 10em;}
	.basket__checkbox {width: 1.6875em; height: 1.6875em;}
	.basket__frame {}
	.basket__info {flex-direction:row; justify-content: space-between; align-items: center;}
	.basket__code {font-size: 1.0625em;}
	.basket__series {width: 16em; text-align: center;}
	.basket__ctrl {gap:0.625em; margin-top: 4.25em;}
	.basket__field {font-size: 1.0625em; height: 2.58824em;}
}

.basket__column--header .basket__cell {display: flex; justify-content: center; align-items: center; height: 40px; color: #fff; background-color: var(--main-black);}
.basket__column--header .basket__series {display: none;}
.basket__column--header .basket__cell span {font-size: 1.0625em;}
@media(min-width:769px){
	.basket__column--header .basket__cell {}
	.basket__column--header .basket__series {display: block;}
}

.basket__list {margin-top: 0.25em;}
.basket__column--body {position: relative; height: 8.9286em; padding: 1.375em 0; border-bottom:1px solid var(--gray100);}
.basket__column--body:last-child {border-bottom: 0;}
.basket__column--body::after {opacity: 0; visibility: hidden; content: ''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 92%; background-color: #F8F8F9; border-radius: 4px; transition: .3s ease all; z-index: -1;}
.basket__column--body .basket__cell--chk {padding-top: 0.625em; text-align: center;}
.basket__column--body .basket__cell--product {padding:1.03125em 0; align-items: center;}
.basket__column--body .basket__cell--count {display: flex; align-items: center;}
.basket__column--body .basket__series {display: block;}
.basket__column--body .basket__series span {display: inline-block; font-size: 1.0625em; padding-bottom: 0.8em;}
@media (hover: hover) {
	.basket__column--body:hover::after {opacity: 1; visibility: visible;}
}
@media(min-width:769px){
	.basket__column--body {height: 7.5em;}
	.basket__column--body .basket__cell--chk {padding-top: 0; display: flex; justify-content: center; align-items: center;}
	.basket__column--body .basket__series span {padding-bottom: 0; font-size: 1.5625em;}
}

.basket__hidden:checked + .basket__checkbox:after {display: block;}
/************************* 공통 시작*************************/
.inner {width: 100%; max-width:1480px; margin: 0 auto; padding: 0 20px;}
.inner--912 {max-width: 944px;}
/************************* 공통 끝 *************************/
.main-int--center {text-align: center;}
.main-int--white {color: #fff;}
.main-int__tit {font-size: 1.4285em; font-weight: 700;}
.main-int__tit--medium {font-size: 2.1428em;}
.main-int__tit--small {font-size: 1.4285em;}
.main-int__desc {font-size: 1.2143em; font-weight: 500;}
.main-int__desc--thin {font-weight: 100;}
.main-int__desc--space {letter-spacing: 0.27em;}
@media(min-width:769px){
	.main-int__tit {font-size: 3.125em;}
	.main-int__tit--medium {font-size: 2.5em;}
	.main-int__tit--small {font-size: 1.875em;}
	.main-int__desc {font-size: 1.25em;}

	.main-int--visual .main-int__desc {font-size: 1.875em;}
	.main-int--visual .main-int__desc--space {letter-spacing: 0.23em;}
}
@media(min-width:1081px){
	.main-int__logo--show {width: 2em;}
}
/************************* header_inc 시작*************************/

/************************* header_inc 끝*************************/
.header-fixed {position: fixed; z-index: 100; inset:0; bottom:auto; background-color: #fff; font-size: var(--fz); transition: all 0.3s ease; }
.header-fixed__inner {position: relative; display: flex; justify-content: space-between; align-items: center; max-width:1872px; margin: 0 auto; padding: 0 16px; width: 100%; height: var(--header-height); transition: .3s ease background-color; z-index: 99;}

.hamburger__btn {display: flex; flex-direction: column; justify-content: center; align-items: center; gap:2px;}
.hamburger__line {width: 11px; height: 2px; background-color: #000;}
@media(min-width:769px){
	.hamburger {display: none;}
}
@media (max-width:768px) {
	.header-fixed__inner {padding: 0 25px;}
}

.header-home {position:absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); display: block;}
.header-home__logo {width: 106px;}
@media(min-width:769px){
	.header-home {position:static; transform:none;}
	.header-home__logo {width: 10.875em;}		
}


.header-navi {display: none; position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%);}
.header-navi__list {display: flex; gap: 1.4375em;}
.header-navi__btn {display: inline-block; padding: 0.2353em 1.4117em; border-radius: 4px; font-size: 1.0625em; font-weight: 500; text-align: center; transition: .3s ease all;}
@media (hover: hover) {
	.header-navi__btn:hover {background-color: var(--gray100);}
}
@media(min-width:769px){
	.header-navi {display: block;}
}

.header-ctrl {display: flex; gap: 0 0.85714em}
.header-ctrl__btn {position: relative; display: block; width: 16px; height: 16px; }
.header-ctrl__btn--icon {display: inline-block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center;}
.header-ctrl__btn--search {background-image: url('./img/icon_search.png');}
.header-ctrl__btn--cart {background-image: url('./img/icon_cart.png');}
.header-ctrl__btn--member {background-image: url('./img/icon_member.png');}
.header-ctrl__btn--logout {background-image: url('./img/icon_logout.png');}
.header-ctrl__cnt {position: absolute; z-index: 1; top: -1em; right: -1em; display: flex; justify-content: center; align-items: center; width: 1.6em; height: 1.6em; background-color: var(--main-color); font-size: 10px; border-radius:50%; color: #fff;}
@media(min-width:769px){
	.header-ctrl {gap: 0 2.0625em;}
	.header-ctrl__btn {width: 24px; height: 24px;}
	.header-ctrl__btn--cart {display: block; width: 24px; height: 24px;}
	.header-ctrl__cnt {top: -0.5em; right: -0.5em;}
}

.header-mega {position: absolute; top: 100%; left: 0; width: 100%; background-color: #fff; display: grid; grid-template-rows: 0fr; transition: all 0.2s ease; overflow: hidden;}
.header-mega[aria-hidden="false"] {grid-template-rows: 1fr; padding: 2.5em 0 5em;}
.header-mega__list {min-height: 0; display: flex; justify-content: center; text-align: center; gap: 5em; padding: 0 16px;}
.header-mega__cate {margin-bottom: 1em; font-size: 0.875em; font-weight: 500; color: var(--gray500);}
.header-navi__cate-btn {display: block; padding: 0.4285em 0; font-size: 0.875em; font-weight: 500;}
.header-navi__image {margin-bottom: 1.25em;}
.header-navi__image .header-navi__btn {margin-bottom: 3.25em;}

.header-mega--model {}
.header-mega--model .header-mega__list {gap: 0.25em;}
.header-mega--model .header-mega__item {max-width: 313px; width: 100%; transition: .3s ease all;}
.header-mega--model .header-mega__item:hover {max-width: 350px;}
.header-mega--model .header-navi__btn {width: 100%; padding: 1.875em 1em;}
.header-mega--model .header-navi__btn:hover {background-color: var(--gray100);}

.header-fixed.enter { background: none !important; background-color: #fff !important;}
/* .header-fixed.enter .header-fixed__inner {background-color: #fff !important;} */
.header-fixed.enter .header-navi__btn {color: var(--main-black) !important;}
.header-fixed.enter .header-home__logo {filter: brightness(1) invert(0) !important;}
.header-fixed.enter .hamburger__line {background-color: var(--main-black) !important;}
.header-fixed.enter .header-ctrl__btn--icon {filter: brightness(1) invert(0) !important;}
.header-fixed.on {background: none !important; background-color: #fff !important;}
.header-fixed.on .header-navi__btn {color: var(--main-black) !important;}
.header-fixed.on .header-home__logo {filter: brightness(1) invert(0) !important;}
.header-fixed.on .header-ctrl__btn--icon {filter: brightness(1) invert(0) !important;}
.header-fixed.on .hamburger__line {background-color: var(--main-black) !important;}



.sub-container {padding-top: var(--header-height); padding-bottom: 3.5714em;}
@media (min-width:769px) {
	.sub-container {padding-bottom: 5em;}
}

/************************* depth3 시작 *************************/
.depth3__list {display: flex; flex-flow: row wrap;}
.depth3__item {flex:1;}
.depth3__item:last-child {border:0;}
.depth3__btn {padding:1.5em 0.75em; width: 100%; height: 100%; display: flex; align-items: center;justify-content: center; border-bottom:2px solid var(--main-gray); transition:.15s ease all;}
.depth3__btn--crt {border-color:var(--main-color);}
@media(hover:hover){
	.depth3__btn:hover {border-color:var(--main-color);}
}
/************************* depth3 끝 *************************/


/************************* footer_inc 시작 *************************/
.footer {padding:2em 0; font-size: var(--fz); background-color: var(--main-black); color: #fff;} 
.footer__sec {display: flex; flex-wrap:wrap; justify-content: space-between; align-items: flex-start;}

.footer-home {display: inline-block; margin-top: 3.5385em;}
.footer-home__logo {width: 7.7143em;}
@media (min-width:769px) {
	.footer-home {margin-top: 0;}
	.footer-home__logo {width: 9.375em;}
}

.footer-info {margin-top: 1.6154em; width: 100%;}
.footer-info__item {margin-bottom: 0.25em; display: flex; flex-wrap:wrap; line-height: 1.5;}
.footer-info__item:last-child {margin-bottom: 0;}
.footer-info__info {display: inline-flex; align-items: center;}
.footer-info__info:after {margin:0 1em; content:''; display: inline-block; width: 1px; height: 0.8em; background-color: var(--main-gray); opacity: 0.75;}
.footer-info__info:last-child:after {display: none;}
.footer-info__cate {display: block; margin-right: 0.8em;}
.footer-info__desc {color: var(--main-gray);}
.footer-info__desc--link {transition:.15s ease all;}
.footer-info__desc--link,
.footer-info__desc--link:visited,
.footer-info__desc--link:link {color: var(--main-gray);}
@media (min-width:769px) {
	.footer-info {margin-top: 1.875em;}
}
@media(max-width:500px){
	.footer-info__item {margin-bottom: 0;}
}
@media(hover:hover){
	.footer-info__desc--link:hover {color: var(--main-color);}
}

.family {position: relative; z-index: 0;}
.family__btn {padding:0.5em 1em; display: inline-flex; justify-content:space-between; align-items:center; font-weight: 500; border:1px solid #fff; transition:.15s ease all;}
.family__btn,
.family__btn:visited,
.family__btn:link {color: inherit;}
.family__arrow {margin-left: 1em; transition:.15s ease all;}
.family__navi {position: absolute; top: 100%; left: 50%; transform:translateX(-50%); min-width: 100%; text-align: left; background-color: var(--main-black); height: 0; overflow: hidden; z-index: 1;}
.family__list {padding:1em 0; border:1px solid #fff; border-top:none;}
.family__link {padding:0.5em 0.25em; display: block; white-space: nowrap; text-align: center; transition:.15s ease all;}
.family__link,
.family__link:visited,
.family__link:link {color: inherit;}
@media(hover:hover){
	.family__btn:hover {background-color: var(--main-color);}
	.family__link:hover {color: var(--main-color);}
}

.family__btn.on {background-color: var(--main-color); color: #fff;}
.family__btn.on .family__arrow {transform:rotate(-180deg);}

.footer-navi__link {margin-right: 1em; font-weight: 500; transition:.15s ease all;}
.footer-navi__link,
.footer-navi__link:visited,
.footer-navi__link:link {color: inherit;}
.footer-navi__link:last-of-type {margin-right: 0;}
@media(hover:hover){
	.footer-navi__link:hover {color: var(--main-color);}
}

.footer-adm {display: flex; flex-flow: row wrap;}
.footer-adm__cprt {margin-right: 1em;}
.footer-adm__nav {display: flex;}
.footer-adm__link {margin-right: 1em; display: inline-block; transition:.15s ease all;}
.footer-adm__link,
.footer-adm__link:visited,
.footer-adm__link:link {color: var(--main-gray);}
.footer-adm__link:last-of-type {margin-right: 0;}
@media(max-width:500px){
	.footer-adm__nav {width: 100%;}
}
@media(hover:hover){
	.footer-adm__link:hover {color: var(--main-color);}
}

/************************* footer_inc 끝 *************************/


/************************* split-text *************************/
.split-text__word {font-size: inherit;}
.split-text__letter {display: inline-block; font-size: inherit;}
.split-text--no-delay .split-text__letter {transition-delay:0s !important; animation-delay:0s !important;}

.section-title {font-size: 30px; font-weight: 700; text-align: center;}
@media(min-width:769px){
	.section-title {font-size: 40px;}
}


.float-menu {position: fixed; right: 4%; bottom: 5em; width: 6.375em; z-index: 20; background-color: #f5f5f5; border-radius: 4px;}
.float-menu__list {display: none;}
.float-menu__item {}
.float-menu__link {display: flex; flex-direction:column; justify-content: center; align-items: center; padding: 2.194em 1em; font-size: 14px; font-weight: 600; text-align: center; border-bottom:1px solid #e8e8e8; color: var(--sub-black);}
.float-menu__icon {margin-bottom: 0.6em;}
.float-menu__link,
.float-menu__link:link,
.float-menu__link:visited {}

.float-menu__toggle {position: relative; aspect-ratio: 1/1; width: 100%; height: 100%; background-color: var(--main-color); border-radius: 5px; color: #fff; box-shadow: 0 0 4px 0 rgba(0,0,0,0.25);}
/* .float-menu__toggle::before {content: ''; display: block; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 11px; height: 6px; background: url('./img/float_arrow.png') no-repeat center / cover; filter: brightness(0) invert(1);} */
.float-menu__toggle img {width: 5em; vertical-align: middle; filter: brightness(0) invert(1); margin-bottom: 5px;}