/* to embed a font */
@import url('/assets/css/font-6e18633d506ffcc4433b83b0c8399f3b.css');

/* 반응형 분기점 */
/* 1200px : header, footer */
/* 1024px : 전체 콘텐츠 */

:root {
    --black: #151717;
    --white: #ffffff;

    --green: #5AE660;
    --sky: #8DC6E8;

    --blue: #020246;
    --blue70: #52597E;
    --blue30: #B3B6C8;

    --gray900: #121212;
    --gray800: #424243;
    --gray700: #747479;
    --gray600: #A1A1A5;
    --gray500: #BDBEC0;
    --gray400: #D7D8DA;
    --gray300: #E3E5E9;
    --gray200: #F2F3F6;
    --gray100: #F9FAFC;
}

/* band */
.band ~ header {top: 6rem;}
.band ~ .container {margin-top: 17.6rem;}
.band ~ .container .main-wrap {height: calc(100vh - 6rem);}
.band ~ .container .main-wrap + .logo {top: 10rem;}
.band ~ .header-dim::after {top: 17.6rem;}
.band ~ .header-search {top: 17.6rem;}

.band {width: 100vw; height: 6rem; /*padding: 0 2rem;*/ position: fixed; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 100; display: flex; align-items: center; justify-content: center;}
.band img { height:100%; background-position: center; background-repeat: no-repeat; }
.band * {position: relative; z-index: 1;}
.band > button {width: fit-content; height: fit-content; border: 0; background-color: transparent; font-size: 1.4rem; font-weight: 500; color: var(--gray700); column-gap: .8rem; position: absolute; right: 4rem; bottom: 2rem;}


@media screen and (max-width: 1200px) {
    .band ~ .container {margin-top: 12rem;}
    .band ~ .container .main-wrap { margin-top: calc(-6rem - 3.6rem);}
    
    .band > button {right: 1.6rem;}
}
@media screen and (max-width: 1024px) {
    .band ~ header {top: 6rem;}
    .band ~ .container .main-wrap {grid-template-rows: calc(100vh - 6rem) auto; margin-top: calc(-6rem - 2.8rem); margin-bottom: -6rem; grid-template-rows: calc((100vh - 6rem) / 2) calc((100vh - 6rem) / 2) auto auto;}
    .band ~ .container .main-wrap + .logo {top: 8rem;}
    .band ~ .header-dim::after {top: 17.6rem;}
    .band ~ .header-search {top: 17.6rem;}

    .band {height: 6rem;}
    .band.launching {font-size: 1.4rem;}
    .band.launching::before {background-size: contain; background-position: center; background-image: url(/assets/img/band-bg01-mb-f447fa570688e0bbc60e944d6eb92968.svg);}
    
    .band > button p {display: none;}
}

/* header */
header {width: 100%; position: fixed; top: 0; left: 0; z-index: 100; background-color: var(--white);}

/* header band */
header .header-band {width: 100%; max-width: 134rem; height: 3.6rem; margin: 0 auto; display: flex; align-items: center; position: relative;}
header .header-band::before {content: ''; width: 100vw; height: 100%; background-color: var(--white); position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 0!important;}
header .header-band::after {content: ''; width: 100vw; height: 1px; background-color: var(--gray200); position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
header .header-band * {position: relative; z-index: 10;}
header .header-band > ul {width: fit-content; display: flex; align-items: center; column-gap: 1.6rem; margin-left: auto;}
header .header-band > ul > li > a {font-size: 1.4rem; color: var(--gray700);}
header .header-band > ul > li > button {width: fit-content; height: fit-content; font-size: 1.4rem; font-weight: 400; background-color: transparent; border: 0; color: var(--gray700); column-gap: .2rem;}

/* header wrap */
header .header-wrap {height: 8rem; width: 100%; max-width: 134rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}
header .header-wrap .logo {width: 19rem; height: 4rem; background-image: url(/assets/img/logo/img-logo-2f5dad5860d92a97a1815afe744f4118.svg); background-repeat: no-repeat; background-size: contain; background-position: center left; cursor: pointer;}

header .header-wrap .menu {display: flex; align-items: center; justify-content: center;}
header .header-wrap .menu > li {height: 8rem; padding: 0 1.8rem; position: relative; display: flex; align-items: center; justify-content: center;}
header .header-wrap .menu > li > a {font-size: 1.6rem; font-weight: 500; cursor: pointer;white-space: nowrap;}
header .header-wrap .menu > li > ul {position: absolute; top: 8rem; left: 1.8rem; height: 25.6rem; display: none; width: max-content; flex-flow: column; row-gap: 1.2rem; padding: 3.2rem 6rem; margin: 0 -6rem;}
header .header-wrap .menu > li > ul > li {position: relative; z-index: 110;}
header .header-wrap .menu > li > ul > li > a {font-size: 1.4rem; color: rgba(18,18,18,.7); display: block; width: 100%; padding: .4rem 0;}
header .header-wrap .menu > li > ul > li:hover > a, 
header .header-wrap .menu > li > ul > li.active > a {font-weight: 600; color: #4B8ECC;}

header .header-wrap .menu > li.active::after, 
header .header-wrap .menu > li:hover::after {content: ''; width: calc(100% - 3.2rem); height: 2px; background-color: var(--gray900); position: absolute; bottom: -1px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
header .header-wrap .menu > li:hover > a, 
header .header-wrap .menu > li.active > a {font-weight: 700;}

header .header-wrap .user {display: flex; align-items: center; justify-content: flex-end; column-gap: 2.4rem;}
header .header-wrap .user > li, 
header .header-wrap .user > li > a {font-size: 1.6rem; font-weight: 500;}
header .header-wrap .user > li .cart {position: relative;}
header .header-wrap .user > li .cart > span {position: absolute; top: 0; right: -.4rem; width: 1.2rem; height: 1.2rem; background-color: var(--blue70); border-radius: 100%; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 500; color: var(--white);}

/* header dim */
.header-dim::after {content: ''; visibility: hidden; z-index: -1; width: 100vw; height: 25.6rem; background-color: var(--white); border-top: 1px solid var(--gray300); display: block; position: fixed; top: 11.6rem; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
header.dim + .header-dim::after {visibility: visible; z-index: 99;}
header.dim + .header-dim::before {content: ''; width: 100vw; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; z-index: 98;}

/* haeder main */
header.main {background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 20%, rgba(0, 0, 0, 0.00) 100%); -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px);}
header.main .header-band::before {content: none;}
header.main .header-band::after {background-color: rgba(255,255,255,.2);}
header.main .header-band > ul > li > a {color: var(--gray600);}
header.main .header-band > ul > li > button {color: var(--gray600);}
header.main .header-band > ul > li > button .ic-language {background-image: url(/assets/img/ico/ic-language-gray600-ed018565c93de6cdda888a1066b5a3bc.svg);}

header.main .header-wrap .logo {background-image: url(/assets/img/logo/img-logo-wh-64ccb4c38b7fa58b4d2c665a204f821e.svg);}

header.main .header-wrap .menu > li > a {color: #ffffff;}
header.main .header-wrap .menu > li > ul > li > a {color: rgba(255,255,255,.5);}
header.main .header-wrap .menu > li > ul > li:hover > a, 
header.main .header-wrap > li > ul > li.active > a {color: #ffffff;}
header.main .header-wrap .menu > li.active::after, 
header.main .header-wrap .menu > li:hover::after {background-color: #ffffff;}

header.main .header-wrap .user > li, 
header.main .header-wrap .user > li > a {color: #ffffff;}
header.main .ic-search {background-image: url(/assets/img/ico/ic-search-wh-5784f5857fb1c54547289acfef0f6b73.svg);}
header.main .ic-cart {background-image: url(/assets/img/ico/ic-cart-wh-187f8103de2236bb83f8f228a7916c49.svg);}
header.main .ic-user {background-image: url(/assets/img/ico/ic-user-wh-e6d1075a8a1c8fec7d793dfa238096b0.svg);}

header.main.hover .header-band::before {content: ''; background: rgba(0, 0, 0, 0.50); -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px);}
header.main.hover .header-wrap {position: relative;}
header.main.hover .header-wrap::before {content: ''; width: 100vw; height: 100%;background-color: rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 0;}
header.main.hover .header-wrap > * {position: relative; z-index: 1;}
header.main.dim + .header-dim::after {border-top-color: #626262; background-color: rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px);}
header.main.dim + .header-dim::before {content: none;}

header .mobile-menu {display: none;}

@media screen and (max-width: 1200px) {
    header {height: 6rem; padding: 0 1.6rem; display: flex; align-items: center; justify-content: space-between;}

    header .header-band {display: none;}

    header .header-wrap {width: fit-content; height: fit-content; padding: 0; margin: 0;}
    header .header-wrap .logo {width: 11.4rem; height: 2.4rem; background-image: url(/assets/img/logo/img-logo-2f5dad5860d92a97a1815afe744f4118.svg);}
    
    header .header-wrap .menu {display: none;}
    header .header-wrap .user {display: none;} 

    header.main {background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;}
    header.main .header-wrap .logo {background-image: url(/assets/img/logo/img-logo-2f5dad5860d92a97a1815afe744f4118.svg);}
    header.main.hover .header-wrap::before {content: none;}

    .header-dim {display: none;}
    
    header .mobile-menu {display: flex; align-items: center; column-gap: .8rem;}
    header .mobile-menu .ic-search {width: 1.8rem; height: 1.8rem;}

    header .mobile-menu input[type="checkbox"] + label {position: relative; z-index: 120; width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; padding: .5rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer;}
    header .mobile-menu input[type="checkbox"] + label::before {content: none;}
    header .mobile-menu input[type="checkbox"] + label > span {display: block; width: 1.4rem; height: 1px; background-color: var(--black); transition: background-color .2s ease-out; position: absolute;}
    header .mobile-menu input[type="checkbox"] + label > span::before {content: ''; background-color: var(--black); display: block; width: 100%; height: 100%; transition: all .2s ease-out; position: absolute; top: -.5rem;}
    header .mobile-menu input[type="checkbox"] + label > span::after {content: ''; background-color: var(--black); display: block; width: 100%; height: 100%; transition: all .2s ease-out; position: absolute; bottom: -.5rem;}

    header .mobile-menu input[type="checkbox"]:checked + label > span {width: 1.6rem; background-color: transparent!important;}
    header .mobile-menu input[type="checkbox"]:checked + label > span::before {top: 0; transform: rotate(45deg);}
    header .mobile-menu input[type="checkbox"]:checked + label > span::after {top: 0; transform: rotate(-45deg);}

    header .mobile-menu .menu-wrap {padding-top: 6rem;position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
    header .mobile-menu .menu-wrap .background {width: 0; height: 0; border-radius: 100%; opacity: 1!important; background-color: rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); transition: all .8s cubic-bezier(0.2, 0.8, 0.4, 1); position: absolute!important; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -10;}
    header .mobile-menu .menu-wrap * {width: 0; height: 0; opacity: 0; z-index: -10; position: relative; transition: opacity .3s;}
    
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .lang {position: absolute; top: 2rem; left: 1.6rem; display: flex; align-items: center; column-gap: .6rem;}
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .lang > li {display: flex; align-items: center; column-gap: .6rem;}
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .lang > li:last-child::before {content: ''; width: 1px; height: 1rem; background-color: rgba(255,255,255,.5); display: block;}
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .lang > li > i {width: 2rem; height: 2rem; margin-right: -.2rem;}
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .lang > li > input[type="radio"] + label::before {content: none;}
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .lang > li > input[type="radio"] + label > p {font-size: 1.2rem; color: rgba(255,255,255,.5);}
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .lang > li > input[type="radio"]:checked + label > p {color: #ffffff;}

    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap {width: 100vw; height: 100vh; opacity: 1; z-index: 110;}
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .background {width: 500vw; height: 500vw; z-index: 1!important;}
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap * {position: relative; width: initial; height: initial; opacity: 1; z-index: 2;}

    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .info {height: 9.2rem; padding-bottom: 2.4rem; display: flex; flex-flow: column; row-gap: 1.6rem; align-items: center; justify-content: center;}
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .info > p {text-align: center; font-size: 2rem; color: #ffffff; position: relative; top: -.2rem;}
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .info > p > a {font-weight: 600; color: #ffffff; text-decoration: underline;}
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .info > p > span {font-weight: 600;}
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .info > button {width: 10rem; height: 3.2rem; font-size: 1.4rem; font-weight: 500; border-color: #ffffff; background-color: transparent; border-radius: 3rem;}
    
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .user {height: 5.8rem; border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); display: grid; grid-template-columns: repeat(2, 1fr);}
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .user::before {content: ''; width: 1px; height: 100%; display: block; background-color: rgba(255,255,255,.2); position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .user > li {display: flex; align-items: center; justify-content: center;}
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .user > li > a {display: flex; align-items: center; justify-content: center; column-gap: .8rem; font-size: 1.4rem; font-weight: 500; color: #ffffff;}
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .user > li > a > i {width: 2rem; height: 2rem;}
    
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .menu {display: flex; flex-flow: column; row-gap: 3.2rem; padding: 4rem 1.6rem; max-height: calc(100vh - 6rem - 9.2rem - 5.8rem); overflow-y: auto;}
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .menu > li > a {display: block; width: 100%; font-size: 1.8rem; font-weight: 500; color: #ffffff; background-image: url(/assets/img/ico/ic-arrow-down-16-689c37855f0bbdbd46b166e5d539331e.svg); background-repeat: no-repeat; background-size: 1.6rem; background-position: center right;}
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .menu > li > ul {display: none; flex-flow: column; row-gap: .8rem; margin-top: 1.6rem;}
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .menu > li > ul > li > a {font-size: 1.6rem; color: rgba(255,255,255,.7); display: block; padding: .4rem 0; width: 100%;}
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .menu > li > ul > li.active > a {color: #ffffff;}

    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .menu > li.active > a {font-weight: 600; background-image: url(/assets/img/ico/ic-arrow-up-16-91ace3f98ac34b0f305cb78c7f37fa78.svg);}
    header .mobile-menu input[type="checkbox"]:checked ~ .menu-wrap .menu > li.active > ul {display: flex;}

    /* header.main .mobile-menu input[type="checkbox"] + label > span {background-color: #ffffff;}
    header.main .mobile-menu input[type="checkbox"] + label > span::before {background-color: #ffffff;}
    header.main .mobile-menu input[type="checkbox"] + label > span::after {background-color: #ffffff;} */

    header .mobile-menu input[type="checkbox"]:checked + label > span::before {background-color: #ffffff;}
    header .mobile-menu input[type="checkbox"]:checked + label > span::after {background-color: #ffffff;}
}

/* header search */
.header-search {position: fixed; top: 11.6rem; left: 0; width: 100%; padding: 6rem 0 8rem; display: none; flex-flow: column; align-items: center; justify-content: center; row-gap: 1.2rem; background-color: var(--white); z-index: 98; border-top: 1px solid var(--gray600);}
.header-search.active {display: flex;}

.header-search .input {position: relative; width: 80rem; display: flex; align-items: center; justify-content: flex-end;}
.header-search .input input {width: 100%; height: 6.8rem; border-bottom: 1px solid var(--gray600); font-size: 2.8rem; font-weight: initial;}
.header-search .input button {width: fit-content; height: fit-content; padding: 0; border-radius: 0; background-color: transparent;}
.header-search .input button i {position: absolute; right: 0;}

header.main ~ .header-search {background-color: rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); border-top-color: rgba(255,255,255,.1);}
header.main ~ .header-search .input input {border-bottom-color: #ffffff; color: #ffffff;}
header.main ~ .header-search .input input::placeholder {color: var(--gray600);}
header.main ~ .header-search .input button i {background-image: url(/assets/img/ico/ic-search-wh-5784f5857fb1c54547289acfef0f6b73.svg);}

.header-search .history {display: flex; align-items: center; justify-content: space-between; width: 80rem;}
.header-search .history > ul {display: flex; align-items: center; column-gap: .8rem;}
.header-search .history > ul > li {width: fit-content; height: 2.8rem; padding: 0 1rem; border-radius: 3rem; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; column-gap: .4rem; cursor: pointer;  color: var(--blue70); border: 1px solid var(--gray300);}
.header-search .history > ul > li:hover {background-color: var(--blue70); color: #ffffff; border-color: var(--blue70);}
.header-search .history > ul > li:hover > i {background-image: url(/assets/img/ico/ic-delete-wh-4d124af0dae940e36582dcdb1fe82f6b.svg);}
.header-search .history > button {width: fit-content; height: fit-content; padding: 0; font-size: 1.2rem; font-weight: 500; color: var(--blue70); background-color: transparent;}

header.main ~ .header-search .history > ul > li {border-color: var(--gray700); color: var(--gray400);}
header.main ~ .header-search .history > ul > li > i {background-image: url(/assets/img/ico/ic-delete-wh-4d124af0dae940e36582dcdb1fe82f6b.svg);}
header.main ~ .header-search .history > ul > li:hover {background-color: #ffffff; border-color: #ffffff; color: var(--gray700);}
header.main ~ .header-search .history > ul > li:hover > i {background-image: url(/assets/img/ico/ic-delete-6c44690242ff676cf7716d17dea52385.svg);}
header.main ~ .header-search .history > button {color: var(--gray400);}

@media screen and (max-width: 1200px) {
    .header-search {top: 0; left: 0; width: 100vw; height: 100vh; padding: 1.8rem 1.6rem; justify-content: initial; row-gap: 0;background-color: rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); border-top: 0; z-index: 110;}
    .header-search .mobile {width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 4rem;}
    .header-search .mobile > img {height: 2.6rem;}

    .header-search .input {width: 100%;}
    .header-search .input input {height: 6rem; font-size: 2rem; border-bottom-color: #ffffff; color: #ffffff;}
    .header-search .input input::placeholder {color: var(--gray600);}
    .header-search .input button i {background-image: url(/assets/img/ico/ic-search-wh-5784f5857fb1c54547289acfef0f6b73.svg);}

    .header-search .history {width: 100%; margin-top: 2rem;}
    .header-search .history > ul > li {border-color: var(--gray700); color: var(--gray400);}
    .header-search .history > ul > li:nth-child(n+3) {display: none;}
    .header-search .history > ul > li > i {background-image: url(/assets/img/ico/ic-delete-wh-4d124af0dae940e36582dcdb1fe82f6b.svg);}
    .header-search .history > ul > li:hover {background-color: #ffffff; border-color: #ffffff; color: var(--gray700);}
    .header-search .history > ul > li:hover > i {background-image: url(/assets/img/ico/ic-delete-6c44690242ff676cf7716d17dea52385.svg);}
    .header-search .history > button {color: var(--gray400);}
}

/* footer */
footer .footer-wrap {width: 100%; max-width: 132rem; padding: 6rem 0; margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; position: relative; line-height: 100%;}
footer .footer-wrap::before {content: ''; width: 100vw; height: 1px; background-color: var(--gray300); position: absolute; top: 0;left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
footer .footer-wrap div { line-height: 100%; display: flex; flex-flow: column; align-items: flex-start; justify-content: space-between;}
footer .footer-wrap h2 {font-size: 1.6rem; color: var(--blue70); font-weight: 600; margin: 0;}
footer .footer-wrap {display: flex; align-items: flex-start;}
footer .footer-wrap > div {display: flex; flex-flow: column; row-gap: 3.2rem;}
footer .footer-wrap > div > ul {display: flex; flex-flow: column; row-gap: 1.8rem;}
footer .footer-wrap > div > ul > li > a {font-size: 1.4rem;}
footer .footer-wrap .sns {flex-flow: initial; column-gap: 1.2rem;}
footer .footer-wrap .sns > li {cursor: pointer;}
footer .footer-wrap .customer {display: flex; flex-flow: column;}
footer .footer-wrap .customer > p {font-size: 2.4rem; font-weight: 700; color: var(--gray900); margin: 0; padding: 0;}
footer .footer-wrap .customer > ul {display: flex; flex-flow: column; row-gap: 1.8rem; margin: 0; padding: 0;}
footer .footer-wrap .customer > ul > li {font-size: 1.4rem; font-weight: 500; color: var(--gray700); margin: 0; padding: 0;}

footer .footer-line {width: 100%; max-width: 100%; border-top: 1px solid #F2F3F6;}

footer .footer-info {width: 100%; max-width: 132rem; padding: 6rem 0; margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; line-height: 100%;}
footer .footer-info > div {display: flex; flex-flow: column; row-gap: 3.2rem;}
footer .footer-info > div .link {display: flex; align-items: center; grid-gap: 1.2rem 2rem;}
footer .footer-info > div .link > li > a {font-size: 1.6rem; font-weight: 500; color: var(--gray600); line-height: 100%;}
footer .footer-info > div .link > li > a:hover {color: #424243;}
footer .footer-info > div .link > li:nth-child(2) > a {font-weight: 600; color: #424243;}
footer .footer-info > div > div {font-size: 1.4rem; color: var(--gray600); font-weight: 400; line-height: 100%;}
footer .footer-info > div > div > h3 {font-size:1.4rem; font-weight: 700; display: inline-flex; line-height: 100%; margin: 0 0.5rem 1rem 0;}
footer .footer-info > div > div > span {font-size:1.4rem; font-weight: 400; display: inline-flex; line-height: 100%;}
footer .footer-info > .family-page > select {width: 28rem; border-bottom: 1px solid var(--black);}
footer .footer-info > .family-page {margin-top: -1.6rem;}
footer .family-page > select{font-size: 1.6rem; font-weight: 500; line-height: 100%; height: auto; color: var(--gray900); padding: 1.6rem 1.6rem 1.6rem 0;}

@media screen and (max-width: 1200px) {
    footer .footer-wrap {height: fit-content; padding: 4.8rem 1.6rem; flex-flow: column; row-gap: 2.8rem;}
    footer .footer-wrap h2 {font-size: 1.6rem;}
    footer .footer-wrap .menu {flex-flow: column; row-gap: 2.8rem;}
    footer .footer-wrap .menu > div {row-gap: 1.2rem;}
    footer .footer-wrap .menu > div > ul {display: none;}
    footer .footer-wrap .menu > div > ul > li > a {font-size: 1.4rem;}
    footer .footer-wrap .menu .sns {display: flex; flex-flow: initial; column-gap: 1.2rem;}
    footer .footer-wrap .menu .sns > li {cursor: pointer;}
    footer .footer-wrap .customer {row-gap: 2rem;}
    footer .footer-wrap .customer > p {font-size: 2rem;}
    
    footer .footer-info {height: fit-content; padding: 4.8rem 1.6rem; flex-flow: column-reverse; row-gap: 4.8rem;}
    footer .footer-info > div {row-gap: 2.8rem;}
    footer .footer-info > div .link {flex-wrap: wrap;}
    footer .footer-info > div .link > li > a {font-size: 1.4rem;}
    footer .footer-info > div > div {width: 100%; font-size: 1.2rem; word-break: keep-all;}
    footer .footer-info > div > div > br {display: none;}
    footer .footer-info > select {width: 100%;}
}

/* container */
.container {margin-top: 11.6rem; min-height: calc(100vh - 8rem - 3.6rem - 60.4rem); padding: 6rem 0 10rem;}
.contents {width: 100%; max-width: 132rem; padding: 0; margin: 0 auto;}

@media screen and (max-width: 1200px) {
    .container {margin-top: 6rem; min-height: calc(100vh - 6rem - 40.6rem); /*padding: 3.6rem 0 8rem;*/ padding: 0;}
}
@media screen and (max-width: 1024px) {
    .container {padding: 2.8rem 0 6rem;}
    .contents {padding: 0 1.6rem;}
}

/* 인트로 */
.main-wrap {display: grid; grid-template-columns: repeat(2, 1fr); margin-top: -17.6rem; margin-bottom: -10rem; height: 100vh;}
.main-wrap > li {display: flex; flex-flow: column; align-items: center; justify-content: center; position: relative; cursor: pointer; overflow: hidden;}
.main-wrap > li .img {width: 100%; height: 100%; transition: transform cubic-bezier(0.4,0,0.2,1) .5s; transform: scale(1.005); position: absolute; background-repeat: no-repeat; background-size: cover; background-position: center;}
.main-wrap > li .dim {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,.35); opacity: 0; transition: opacity .5s;}
.main-wrap > li > div {display: flex; flex-flow: column; align-items: center; justify-content: center; position: relative;}
.main-wrap > li > div > p {font-size: 3.6rem; font-weight: 600; color: #ffffff; margin: 0;}
.main-wrap > li > div > h2 {font-size: 5.6rem; font-weight: 600; color: #ffffff;}
.main-wrap > li > div > h3 {font-size: 4rem; font-weight: 600; color: #ffffff; margin-bottom: -.4rem;}
.main-wrap > li > div > span  {font-size: 1.6rem; font-weight: 500; color: rgba(255,255,255,.5);}
.main-wrap > li > div > a {font-size: 1.8rem; font-weight: 700; color: var(--green); display: flex; align-items: center; justify-content: center; column-gap: .6rem; position: absolute; bottom: -5.8rem; opacity: 0; transition: opacity .5s;}
.main-wrap > li .ic-arrow-right-60 {width: 4rem; height: 4rem; margin-top: 2.4rem;}

.main-wrap > li.news {grid-column: 1 / span 2; padding: 10rem 8rem; width: 100%; display: flex; flex-flow: column; align-items: flex-start; row-gap: 3.6rem;}
.main-wrap > li.news > h2 {font-size: 4.2rem; font-weight: 700;}

.main-wrap > li:hover > img {transform: scale(1.03);}
.main-wrap > li:hover .dim {opacity: 1;}
.main-wrap > li:hover > div > a {opacity: 1;}

.main-wrap + .logo {position: fixed; z-index: 99; top: 4rem; left: 6rem;}

@media screen and (max-width: 1200px) {
    .main-wrap {margin-top: -9.6rem;}
}
@media screen and (max-width: 1024px) {
    .main-wrap {grid-template-columns: repeat(1, 1fr); grid-template-rows: 50vh 50vh auto auto; margin-top: -8.8rem;}
    .main-wrap > li {padding: 4rem 1.6rem;}
    .main-wrap > li > div {}
    .main-wrap > li > div > p {font-size: 2rem;}
    .main-wrap > li > div > h2 {font-size: 3.2rem;}
    .main-wrap > li > div > h3 {font-size: 2.8rem;}
    .main-wrap > li > div > span  {font-size: 1.4rem;}
    .main-wrap > li > div > a {display: none;}
    .main-wrap > li .ic-arrow-right-60 {position: relative; right: initial; margin-top: 3.2rem; width: 4rem; height: 4rem;}

    .main-wrap > li.news {grid-column: 1 / span 1; padding: 8rem 1.6rem; row-gap: 2rem;}
    .main-wrap > li.news > h2 {font-size: 2.2rem;}

    .main-wrap + .logo {position: fixed; z-index: 99; top: 2rem; left: 1.6rem; height: 3.2rem;}
}

/* 메인 */
.main-prod-banner {display: flex; align-items: center; column-gap: 2rem;}
.main-prod-banner > li {width: 100%; height: 64rem; border-radius: 2rem; overflow: hidden; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center;}
.main-prod-banner > li::after {content: ''; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.25) 74.7%, rgba(0, 0, 0, 0.60) 100%); position: absolute; top: 0; left: 0;}
.main-prod-banner > li > img {width: 100%; height: 100%; transition: transform cubic-bezier(0.4,0,0.2,1) .5s; transform: scale(1.005); background: lightgray 50%; background-repeat: no-repeat; object-fit: cover}
.main-prod-banner > li > div {display: flex; flex-flow: column; color: #fff; position: absolute; bottom: 8rem; left: 4rem; z-index: 3; gap: 0.8rem;}
.main-prod-banner > li > div > h2 {font-size: 2.8rem; font-weight: 400; line-height: 120%;}
.main-prod-banner > li > div > p {font-size: 2.8rem; font-weight: 400; line-height: 120%; margin:0; font-family: 'Metropolis';}

.main-prod-banner > li:hover > img {transform: scale(1.03);}
.main-prod-logo-img {height: 5.3rem;}
.main-prod-logo-img img {height: 100%;}

.main-prod-sub-logo-img {height: 3.4rem;}
.main-prod-sub-logo-img img {max-width: 37rem;}

@media screen and (max-width: 1024px) {
    .main-prod-banner {flex-flow: column; row-gap: 1.2rem;}
    .main-prod-banner > li {height: 100%;}
    .main-prod-banner > li > div {bottom: 4rem; left: 2rem;}
    .main-prod-banner > li > div > h2 {font-size: 3.2rem; line-height: 1.2;}
    .main-prod-banner > li > div > p {font-size: 1.8rem;}

    .main-prod-logo-img {height: 2.65rem;}
    .main-prod-logo-img img {height: 100%;}

    .main-prod-sub-logo-img {height: 1.7rem;}
    .main-prod-sub-logo-img img {max-width: 18.5rem;}

}

.cont-box > img {width: 100%; border-radius: 2rem;}

.cont-box.banner {margin-top: 6rem;}

.main-prod-intro {display: flex; flex-flow: column; row-gap: 8rem;}
.main-prod-intro > li {display: flex; align-items: center; column-gap: 8rem;}
.main-prod-intro > li > img {width: 48rem; border-radius: 2rem;}
.main-prod-intro > li > div {flex: 1; display: flex; flex-flow: column;}
.main-prod-intro > li > div > h2 {font-size: 3.6rem; font-weight: 800; color: var(--blue);}
.main-prod-intro > li > div > p {font-size: 1.8rem; font-weight: 600; margin-top: 3.2rem; line-height: 1.6;}
.main-prod-intro > li > div > p + p {margin-top: 2rem;}
.main-prod-intro > li > div > button {margin-top: 6rem; width: fit-content; height: 4.8rem; background-color: transparent; border-color: var(--blue); color: var(--blue); font-size: 1.8rem; font-weight: 500; padding: 0 2rem; border-radius: 10rem;}
.main-prod-intro > li:nth-child(2) > div {align-items: flex-end;}
.main-prod-intro > li:nth-child(2) > div > p {text-align: right;}

@media screen and (max-width: 1024px) {
    .main-prod-intro {row-gap: 6rem;}
    .main-prod-intro > li {flex-flow: column; row-gap: 2.4rem; align-items: flex-start;}
    .main-prod-intro > li > img {width: 24rem;}
    .main-prod-intro > li > div {flex: initial;}
    .main-prod-intro > li > div > h2 {font-size: 2rem;}
    .main-prod-intro > li > div > p {font-size: 1.4rem; margin-top: 2.4rem;}
    .main-prod-intro > li > div > p + p {margin-top: 1.6rem;}
    .main-prod-intro > li > div > button {margin-top: 3.2rem; height: 2.8rem; font-size: 1.4rem; padding: 0 1.2rem;}
    .main-prod-intro > li:nth-child(2) {align-items: flex-end; flex-flow: column-reverse;}
    .main-prod-intro > li:nth-child(2) > div > p {text-align: right;}
}

.cont-box > iframe {width: 100%; height: 48vw; max-height: 70rem; border-radius: 2rem;}

@media screen and (max-width: 1024px) {
    .cont-box > iframe {height: 52vw; border-radius: 2rem;}
}

.cont-box.contents {position: relative; padding: 10rem 0;}
.cont-box.contents::before {content: ''; width: 100vw; height: 100%; background-color: var(--gray100); z-index: 1!important; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.cont-box.contents > * {position: relative; z-index: 2;}
.cont-box.contents > h2 {font-size: 4rem; font-weight: 700; margin-bottom: 4rem;}

.main-contents {display: flex; column-gap: 2.4rem;}
.main-contents .desc {display: flex; flex-flow: column; row-gap: 2rem; width: 41rem;}
.main-contents .desc > span {font-size: 1.6rem; font-weight: 600; color: var(--blue);}
.main-contents .desc > p {font-size: 2.4rem; font-weight: 500; line-height: 1.4; word-break: keep-all;}
.main-contents .desc > a {display: flex; align-items: center; column-gap: .4rem; font-size: 1.6rem; font-weight: 500; color: var(--gray700); margin-top: 2rem;}
.main-contents .cont {width: calc(((100vw - 100%) / 2) + (100% - 41rem - 2.4rem)); margin-right: calc((-100vw + 100%) / 2);}
.main-contents .cont .youtube-swiper.swiper {padding-right: 2.4rem;}
.main-contents .cont .youtube-swiper.swiper .swiper-slide {width: 41rem; height: 23rem; border-radius: 1.2rem; cursor: pointer; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center;}

@media screen and (max-width: 1024px) {
    .cont-box.contents {padding: 6rem 0;}
    .cont-box.contents > h2 {font-size: 2rem; margin-bottom: 1.6rem;}
    
    .main-contents {flex-flow: column; grid-gap: 2rem;}
    .main-contents .desc {row-gap: 1.2rem; width: 100%;}
    .main-contents .desc > span {font-size: 1.2rem;}
    .main-contents .desc > p {font-size: 1.6rem;}
    .main-contents .desc > a {font-size: 1.4rem; margin-top: 0;}
    .main-contents .cont {width: 100vw; margin: 0 -1.6rem;}
    .main-contents .cont .youtube-swiper.swiper {padding: 0 1.6rem;}
    .main-contents .cont .youtube-swiper.swiper .swiper-slide {width: 31rem; height: 17.4rem; border-radius: 1.2rem;}
}

.img-banner  {border-radius: .8rem;}
@media screen and (max-width: 1024px) {
    .img-banner  {border-radius: .4rem;}
}

.sns-channel {display: flex; flex-flow: column; row-gap: 4rem; align-items: center; justify-content: center;}
.sns-channel > h2 {font-size: 2.4rem; font-weight: 600; color: var(--blue70);}
.sns-channel > ul {display: flex; align-items: center; justify-content: center; column-gap: 2.4rem;}

@media screen and (max-width: 1024px) {
    .sns-channel {row-gap: 2rem;}
    .sns-channel > h2 {font-size: 1.6rem;}
    .sns-channel > ul {column-gap: 1.6rem;}
    .sns-channel > ul > li i {width: 4.8rem; height: 4.8rem;}
}

/* 로그인 */
.account-wrap {width: 100vw; min-height: 73.6rem; margin: -6rem 0 -10rem; padding: 6rem 0 10rem; display: flex; flex-flow: column; align-items: center; justify-content: center; position: relative; overflow: hidden; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.account-wrap::before {content: ''; width: 100%; height: 100%; background-image: url(/assets/img/info-bg-b6956b53d9536dc6690105558b59dd96.svg); background-repeat: no-repeat; background-size: cover; background-position: bottom center; position: absolute; top: 0; z-index: 1!important;}
.account-wrap > * {position: relative; z-index: 2;}

.account-wrap .cont-box {width: 50rem;}
.account-wrap .cont-box > button {width: 100%; margin-top: 4rem;}

.sns-link {display: flex; align-items: center; justify-content: center; grid-gap: 2rem 1.2rem; flex-wrap: wrap;}
.sns-link > li {cursor: pointer; display: flex; align-items: center; column-gap: 1.2rem;}
.sns-link > li:nth-child(1) {width: 100%;}
.sns-link > li h2 {width: 100%; position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: .8rem;}
.sns-link > li h2::before {content: ''; width: 100%; height: 1px; background-color: var(--gray300); position: absolute; z-index: 1;}
.sns-link > li h2 > p {font-size: 1.4rem; font-weight: 600; color: var(--blue70); background-color: var(--white); padding: 0 1.2rem; position: relative; z-index: 2;}

.login {display: flex; flex-flow: column; row-gap: 1.6rem; margin-top: 6rem;}
.login > li {display: flex; align-items: center; column-gap: 1.2rem;}
.login > li:nth-child(2), .login > li:nth-child(3) {border-bottom: 1px solid var(--gray700);}
.login > li h2 {width: 100%; position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: .8rem;}
.login > li h2::before {content: ''; width: 100%; height: 1px; background-color: var(--gray300); position: absolute; z-index: 1;}
.login > li h2 > p {font-size: 1.4rem; font-weight: 600; color: var(--blue70); background-color: var(--white); padding: 0 1.2rem; position: relative; z-index: 2;}
.login > li input {flex: 1;}
.login > li button {width: 100%; margin-top: 2rem;}
.login > li:last-child button {background-color: var(--white); border-color: var(--blue); color: var(--blue); margin-top: -.8rem;}
.login .option {margin-top: .4rem; display: flex; align-items: center; justify-content: space-between;}
.login .option input + label > p {color: var(--gray700);}
.login .option > ul {display: flex; align-items: center; column-gap: 1.6rem;}
.login .option > ul > li > a {font-size: 1.4rem; font-weight: 500; color: var(--gray700);}

.join-link {margin-top: 4rem; display: flex; align-items: center; column-gap: .8rem;}
.join-link > button {width: calc((100% - .8rem) / 2 ); height: 4.8rem; background-color: var(--white); border-color: var(--blue); color: var(--blue); font-size: 1.6rem; font-weight: 500;}

@media screen and (max-width: 1024px) {
    .account-wrap {width: 100%; min-height: auto; margin: 0; padding: 0; padding-top: 3.2rem;}
    .account-wrap::before {content: none;}
    
    .account-wrap .cont-box {width: 100%;}
    
    .join-link > button {height: 4rem; font-size: 1.4rem;}

    .login {display: flex; flex-flow: column; row-gap: 1.6rem;}
    .login > li {display: flex; align-items: center; column-gap: 1.2rem;}
    .login > li button {width: 100%; margin-top: 1.6rem;}
    .login .option {margin-top: 0;}
    
}

/* 회원가입 */
.account-wrap .info {display: flex; flex-flow: column; row-gap: 2.4rem;}
.account-wrap .info > li {display: flex; align-items: center; column-gap: 1.2rem; border-bottom: 1px solid var(--gray300); flex-wrap: wrap;}
.account-wrap .info > li > h2 {font-size: 1.4rem; font-weight: 400; width: 8.6rem;}
.account-wrap .info > li > *:not(h2) {flex: 1;}
.account-wrap .info .flex-input {margin-bottom: 0; height: 4.4rem; justify-content: flex-start;}
.account-wrap .info .guide {border-bottom: 0; margin-top: -1.2rem; font-size: 1.2rem; font-weight: 500; color: var(--blue70); line-height: 1.6; word-break: keep-all;}
.account-wrap .info .button {border-bottom: 0; margin-top: -.8rem;}
.account-wrap .info .button button {height: 4.8rem; border-color: var(--blue); color: var(--blue); background-color: var(--white); font-size: 1.6rem;}

.terms {margin-top: 4rem; display: flex; flex-flow: column; row-gap: 1.6rem;}
.terms .all {padding-bottom: 1.6rem; border-bottom: 1px solid var(--black);}
.terms > li {display: flex; align-items: center; justify-content: space-between;}
.terms > li > a {font-size: 1.4rem; font-weight: 500; color: var(--blue70); text-decoration: underline;}

@media screen and (max-width: 1024px) {
    .account-wrap .info {row-gap: 2rem;}
    .account-wrap .info > li {flex-flow: column; row-gap: .8rem; align-items: initial;}
    .account-wrap .info > li > h2 {font-size: 1.2rem; font-weight: 400; width: 100%;}
    .account-wrap .info > li > *:not(h2) {flex: initial;}
    .account-wrap .info .guide {margin-top: -1rem;}
    .account-wrap .info .button {border-bottom: 0; margin-top: -.8rem;}
    .account-wrap .info .button button {height: 4rem; font-size: 1.4rem;}
}

/* 아이디 찾기 */
.account-wrap .flex-input {margin-bottom: 2.4rem; justify-content: center;}

.account-link {margin-top: 2.4rem; display: flex; align-items: center; justify-content: center; column-gap: 1.6rem;}
.account-link > li {display: flex; align-items: center; column-gap: .4rem; font-size: 1.4rem; color: var(--gray700);}
.account-link > li > p + a {font-weight: 700; text-decoration: underline;}
.account-link > li > a {font-size: 1.4rem; font-weight: 500; color: var(--gray700);}

.id-list {width: 100%; padding: 2rem; margin-top: 2.4rem; border-radius: .4rem; background-color: var(--gray100); display: flex; flex-flow: column; row-gap: 1.2rem;}
.id-list > li {display: flex; align-items: center; justify-content: space-between; font-size: 1.4rem; font-weight: 500; color: var(--blue70);}
.id-list > li > p {font-weight: 600;}

@media screen and (max-width: 1024px) {
    .account-wrap .flex-input {margin-bottom: 2.4rem; justify-content: center;}
    
    .account-link {margin-top: 2.4rem; display: flex; align-items: center; justify-content: center; column-gap: 1.6rem;}
    .account-link > li {display: flex; align-items: center; column-gap: .4rem; font-size: 1.4rem; color: var(--gray700);}
    .account-link > li > p + a {font-weight: 700; text-decoration: underline;}
    .account-link > li > a {font-size: 1.4rem; font-weight: 500; color: var(--gray700);}
    
    .id-list {width: 100%; padding: 2rem; margin-top: 2.4rem; border-radius: .4rem; background-color: var(--gray100); display: flex; flex-flow: column; row-gap: 1.2rem;}
    .id-list > li {display: flex; align-items: center; justify-content: space-between; font-size: 1.4rem; font-weight: 500; color: var(--blue70);}
    .id-list > li > p {font-weight: 600;}
}


/* 비밀번호 찾기 */
.certify {border-color: var(--gray300); background-color: var(--white); color: var(--blue); height: fit-content; padding: 2rem; flex-flow: column; row-gap: .8rem;}
.certify + * {margin-top: 2.4rem;}

/* 검색 search */
.search-wrap {width: 80rem; margin: 0 auto; display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 1.2rem; background-color: var(--white); z-index: 98;}

.search-wrap .input {position: relative; width: 80rem; display: flex; align-items: center; justify-content: flex-end;}
.search-wrap .input input {width: 100%; height: 6.8rem; border-bottom: 1px solid var(--gray600); font-size: 2.8rem; font-weight: initial;}
.search-wrap .input button {width: fit-content; height: fit-content; padding: 0; border-radius: 0; background-color: transparent;}
.search-wrap .input button i {position: absolute; right: 0;}

.search-wrap .history {display: flex; align-items: center; justify-content: space-between; width: 80rem;}
.search-wrap .history > ul {display: flex; align-items: center; column-gap: .8rem;}
.search-wrap .history > ul > li {width: fit-content; height: 2.8rem; padding: 0 1rem; border-radius: 3rem; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; column-gap: .4rem; cursor: pointer;  color: var(--blue70); border: 1px solid var(--gray300);}
.search-wrap .history > ul > li:hover {background-color: var(--blue70); color: #ffffff; border-color: var(--blue70);}
.search-wrap .history > ul > li:hover > i {background-image: url(/assets/img/ico/ic-delete-wh-4d124af0dae940e36582dcdb1fe82f6b.svg);}
.search-wrap .history > button {width: fit-content; height: fit-content; padding: 0; font-size: 1.2rem; font-weight: 500; color: var(--blue70); background-color: transparent;}

.search-result {position: relative; margin-top: 6rem; margin-bottom: -10rem; padding: 6rem 0 8rem;}
.search-result::before {content: ''; width: 100vw; height: 100%; background-color: var(--gray100); position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 1!important;}
.search-result * {position: relative; z-index: 2;}

.search-result .sub-title > h2 {align-items: flex-start; column-gap: .8rem;}
.search-result .sub-title > h2 > span {font-size: 1.6rem;}

.search-result .prod-list > li .info > h2 {font-size: 2.4rem;}

@media screen and (max-width: 1024px) {
    .search-wrap {width: 100%; row-gap: 2rem;}
    
    .search-wrap .input {width: 100%;}
    .search-wrap .input input {height: 6rem; font-size: 2rem;}
    
    .search-wrap .history {width: 100%;}
    .search-wrap .history > ul > li:nth-child(n+4) {display: none;}
    .search-wrap .history > button {width: fit-content; height: fit-content; padding: 0; font-size: 1.2rem; font-weight: 500; color: var(--blue70); background-color: transparent;}
    
    .search-result {margin-top: 4rem; margin-bottom: -6rem; padding: 4rem 0 6rem;}
    
    .search-result .sub-title > h2 {flex-flow: initial;}
    .search-result .sub-title > h2 > span {font-size: 1.4rem;}
    
    .search-result .prod-list {display: grid; grid-template-columns: repeat(1, 1fr);}
    .search-result .prod-list > li .info > h2 {font-size: 1.6rem;}
}

/* 브랜드 */
/* .prod-info-img {margin: -6rem -2rem -10rem;}
.prod-info-img img {width: 100%;}

@media screen and (max-width: 768px) {
    .prod-info-img {margin: 0;}
} */
.brand-wrap {margin-top: -6rem; margin-bottom: -10rem;}
.brand-wrap .section {overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center bottom; z-index: 10; width: 100vw; height: calc(100vh - 11.6rem); position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}

.band ~ .container .brand-wrap .section {height: calc(100vh - 11.6rem - 6rem);}

@media screen and (max-width: 1200px) {
    .brand-wrap {margin-top: -3.6rem; margin-bottom: -8rem;}
    .brand-wrap .section {height: calc(100vh - 6rem);}

    .band ~ .container .brand-wrap .section {height: calc(100vh - 6rem - 6rem);}
}
@media screen and (max-width: 1024px) {
    .brand-wrap {margin-top: -2.8rem; margin-bottom: -6rem;}
}

.brand-wrap .part01 {background-image: url(/assets/img/brand/part01-bg-bee7a7d64c8a503de3483d6c43fb6ddd.png); position: fixed; top: 11.6rem; left: 0; -webkit-transform: initial; -moz-transform: initial; -ms-transform: initial; -o-transform: initial; transform: initial; z-index: 1;}
.brand-wrap .part01 .logo {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; opacity: 1;  animation: opacity01 .6s ease-in-out;}
.brand-wrap .part01 .left {position: absolute; left: 0; bottom: -5rem; width: 60vw; max-width: 118rem; animation: slideLeft01 1s ease-out; z-index: 2;}
.brand-wrap .part01 .right {position: absolute; right: 0; bottom: -5rem; width: 42vw; max-width: 82rem; animation: slideRight01 1s ease-out; z-index: 1;}
.brand-wrap .part01 .ic-scroll {display: none;}

.band ~ .container .brand-wrap .part01 {top: calc(11.6rem + 6rem);}

@keyframes slideLeft01 {0% { left: -10rem; } 100% { left: 0; }}
@keyframes slideRight01 {0% { right: -10rem; } 100% { right: 0; }}
@keyframes opacity01 {0% { opacity: 0; } 100% { opacity: 1; }}

@media screen and (max-width: 1200px) {
    .brand-wrap .part01 {top: 6rem;}

    .band ~ .container .brand-wrap .part01 {top: calc(6rem + 6rem);}
}
@media screen and (max-width: 1024px) {
    .brand-wrap .part01 {background-image: url(/assets/img/brand/part01-bg-bee7a7d64c8a503de3483d6c43fb6ddd.png); position: fixed; left: 0; -webkit-transform: initial; -moz-transform: initial; -ms-transform: initial; -o-transform: initial; transform: initial; z-index: 1;}
    .brand-wrap .part01 .logo {height: 4.8rem; top: 20rem; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
    .brand-wrap .part01 .left {left: -8rem; bottom: 0; width: 120vw; max-width: initial; animation: slideLeft01 1s ease-out;}
    .brand-wrap .part01 .right {right: -6rem; bottom: 20rem; width: 60vw; max-width: initial; animation: slideRight01 1s ease-out;}
    .brand-wrap .part01 .ic-scroll {display: block; position: fixed; bottom: 3.2rem; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 3;}

    @keyframes slideLeft01 {0% { left: -16rem; } 100% { left: -8rem; }}
    @keyframes slideRight01 {0% { right: -12rem; } 100% { right: -6rem; }}

    .band ~ .container .brand-wrap .part01 {height: calc(100vh - 6rem);}
}

/* 
.brand-wrap .part02 {background-image: url(/assets/img/brand/part02-bg-fcaa098610fccf478f49001b72eecd00.png); margin-top: 100vh; display: flex; align-items: center; justify-content: center; padding-right: 20rem;}
.brand-wrap .part02 > img {width: 40vw; max-width: 77rem; margin-right: -3vw;}
.brand-wrap .part02 > div {display: flex; flex-flow: column; row-gap: 4.8rem;}
.brand-wrap .part02 > div > h2 {font-size: 4rem; font-weight: 800; color: var(--blue); line-height: 1.4;}
.brand-wrap .part02 > div > div {display: flex; flex-flow: column; row-gap: 2.4rem;}
.brand-wrap .part02 > div > div > p {font-size: 1.8rem; font-weight: 500; line-height: 1.8;}
  
@media screen and (max-width: 1024px) {
    .brand-wrap .part02 {background-image: url(/assets/img/brand/part02-bg-mobile-6fd42ec1c5ea6d21d0d8616d23c263ae.png); padding-right: 0; flex-flow: column; padding: 6rem 0 10rem; align-items: initial;}
    .brand-wrap .part02 > img {height: auto; width: 100%; margin-right: 0;}
    .brand-wrap .part02 > div {padding: 0 3.2rem; row-gap: 3.2rem;}
    .brand-wrap .part02 > div > h2 {font-size: 3.2rem;}
    .brand-wrap .part02 > div > div {row-gap: 1.6rem;}
    .brand-wrap .part02 > div > div > p {font-size: 1.6rem; word-break: keep-all;}
    .brand-wrap .part02 > div > div > p > br:not(.block) {display: none;}
} */

.brand-wrap .part02 {background-image: url(/assets/img/brand/part02-bg-fcaa098610fccf478f49001b72eecd00.png); margin-top: calc(100vh - 11.6rem);}
.brand-wrap .part02 > div {display: flex; align-items: center; justify-content: center; padding-right: 10rem; column-gap: 10rem; height: 100%;}
.brand-wrap .part02 > div .img img {width: 40vw; max-width: 77rem; margin-right: -3vw;}
.brand-wrap .part02 > div .desc {display: flex; flex-flow: column; row-gap: 4.8rem;}
.brand-wrap .part02 > div .desc > h2 {font-size: 4rem; font-weight: 800; color: var(--blue); line-height: 1.4;}
.brand-wrap .part02 > div .desc > div {display: flex; flex-flow: column; row-gap: 2.4rem;}
.brand-wrap .part02 > div .desc > div > p {font-size: 1.8rem; font-weight: 500; line-height: 1.8;}

.band ~ .container .brand-wrap .part02 {margin-top: calc(100vh - 11.6rem - 6rem);}
  
@media screen and (max-width: 1200px) {
    .brand-wrap .part02 {margin-top: calc(100vh - 6rem);}

    .band ~ .container .brand-wrap .part02 {margin-top: calc(100vh - 6rem);}
}
@media screen and (max-width: 1024px) {
    .brand-wrap .part02 {background-image: url(/assets/img/brand/part02-bg-mobile-6fd42ec1c5ea6d21d0d8616d23c263ae.png); overflow-x: auto;}
    .brand-wrap .part02 > div {width: max-content; display: flex; align-items: center; justify-content: initial; padding-right: 0; column-gap: 0;}
    .brand-wrap .part02 > div .img {width: 100vw; display: flex; align-items: center; justify-content: center;}
    .brand-wrap .part02 > div .img img {height: initial; max-height: initial; width: 100%; margin: 0 auto;}
    .brand-wrap .part02 > div .desc {width: 100vw; padding: 0 1.6rem; row-gap: 3.2rem; align-items: center;}
    .brand-wrap .part02 > div .desc > h2 {font-size: 2.8rem; text-align: center;}
    .brand-wrap .part02 > div .desc > div {display: flex; flex-flow: column; row-gap: 1.6rem;}
    .brand-wrap .part02 > div .desc > div > p {font-size: 1.6rem; text-align: center;}
}

/*.brand-wrap .part03 {background-color: var(--gray300);}*/
.brand-wrap .part03 {background-color: var(--gray300); display: flex; align-items: center; width: 100vw; overflow-x: auto; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 1;}
/*.brand-wrap .part03 > ul {display: grid; grid-template-columns: repeat(3, 100vw); height: 100vh; overflow-y: auto;}*/
.brand-wrap .part03 > ul {display: flex; align-items: center;}
/*.brand-wrap .part03 > ul > li {display: flex; align-items: center; justify-content: center; padding: 0 2rem;}*/
.brand-wrap .part03 > ul > li {width: 100vw; flex: 0 0 100vw;}
.brand-wrap .part03 > ul > li img {width: 66vw; max-width: 128rem; margin: 0 auto;}

@media screen and (max-width: 1200px) {
    .band ~ .container .brand-wrap .part03 {height: calc(100vh - 6rem - 6rem);}
}
@media screen and (max-width: 1024px) {
    .brand-wrap .part03 > ul > li img {width: initial; height: calc(100vh - 6rem - 8rem);}
}

.brand-wrap .part04 {background-color: var(--white); overflow: initial; display: flex; justify-content: center; column-gap: 14rem; padding: 0 2rem; height: fit-content!important;}
.brand-wrap .part04 .img {width: 50rem; height: calc(100vh - 11.6rem); position: sticky; top: 11.6rem; display: flex; align-items: center; }
.brand-wrap .part04 .img::before {content: ''; width: 100%; height: 60rem; background-color: #F5F5F5; border-radius: .8rem; position: absolute; z-index: 1;}
.brand-wrap .part04 .img > div {width: 100%; max-width: 52rem; height: 60rem; background-color: #F5F5F5; border-radius: .8rem; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 2; opacity: 0; transition: opacity .6s, background-image .6s;}
.brand-wrap .part04 .img > div.active {opacity: 1;}
.brand-wrap .part04 .desc > ul > li {width: 50rem; height: calc(100vh - 11.6rem); display: flex; flex-flow: column; row-gap: 4.8rem; justify-content: center;}
.brand-wrap .part04 .desc > ul > li > img {display: none;}
.brand-wrap .part04 .desc > ul > li > h2 {font-size: 4rem; font-weight: 800; color: var(--blue); line-height: 1.4;}
.brand-wrap .part04 .desc > ul > li > p {font-size: 1.8rem; font-weight: 500; line-height: 1.8; word-break: keep-all;}

.band ~ .container .brand-wrap .part04 .img {top: calc(11.6rem + 6rem); height: calc(100vh - 11.6rem - 6rem);}
.band ~ .container .brand-wrap .part04 .desc > ul > li {height: calc(100vh - 11.6rem - 6rem);}

@media screen and (max-width: 1200px) {
    .brand-wrap .part04 {column-gap: 4rem; padding: 0 1.6rem; height: 100vh !important;}
    .brand-wrap .part04 .desc > ul > li {height: calc(100vh - 6rem);}

    .band ~ .container .brand-wrap .part04 .img {top: calc(6rem + 6rem);}
    .band ~ .container .brand-wrap .part04 .desc > ul > li {height: calc(100vh - 6rem - 6rem);}
}
@media screen and (max-width: 1024px) {
    .brand-wrap .part04 {justify-content: initial; flex-flow: column; row-gap: 4rem; padding: 4rem 1.6rem;}
    .brand-wrap .part04 .img {display: none; width: 100%;}
    /* .brand-wrap .part04 .img {width: 100%; height: fit-content; position: relative; top: initial;}
    .brand-wrap .part04 .img::before {width: 100%; height: 24rem; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
    .brand-wrap .part04 .img > div {width: 100%; height: 24rem; background-size: contain;} */
    .brand-wrap .part04 .desc {width: 100vw; height: 100%; overflow-y: auto; margin: 0 -1.6rem 0;}
    /*.brand-wrap .part04 .desc > ul {position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 100vw); overflow-y: auto;}*/
    .brand-wrap .part04 .desc > ul {position: relative; z-index: 1; display: flex;}
    /*.brand-wrap .part04 .desc > ul > li {width: 100%; height: fit-content; padding: 0 3.2rem 0; row-gap: 1.6rem;}*/
    .brand-wrap .part04 .desc > ul > li {width: 100vw; flex: 0 0 100vw; height: fit-content; padding: 0 3.2rem 0; row-gap: 2.4rem;}
    .brand-wrap .part04 .desc > ul > li > img {display: block;}
    .brand-wrap .part04 .desc > ul > li > h2 {font-size: 2.4rem; word-break: keep-all;}
    .brand-wrap .part04 .desc > ul > li > p {font-size: 1.6rem; margin-top: -1.2rem;}

    .band ~ .container .brand-wrap .part04 .img {top: initial;}
    .band ~ .container .brand-wrap .part04 .desc > ul > li {height: fit-content;}
}

.brand-wrap .part05 {background-color: #76F37C; overflow: initial; position: relative;}
.brand-wrap .part05 > video {width: 100%; height: 100%;}

.brand-wrap .part06 {background-color: var(--white); margin-top: 0; height: fit-content!important; padding: 10rem 2rem;}
.brand-wrap .part06 > div {width: 66vw; max-width: 100rem; margin: 0 auto; display: flex; flex-flow: column; row-gap: 6rem;}
.brand-wrap .part06 > div > div {display: flex; flex-flow: column; row-gap: 4rem; align-items: center;}
.brand-wrap .part06 > div > div > h2 {font-size: 4rem; font-weight: 800; color: var(--blue); line-height: 1.4; text-align: center;}
.brand-wrap .part06 > div > div > h2 .block {display: none;}
.brand-wrap .part06 > div > div > p {font-size: 1.8rem; font-weight: 500; line-height: 1.8; word-break: keep-all; text-align: center;}

@media screen and (max-width: 1024px) {
    .brand-wrap .part06 {padding: 3rem 1.6rem;}
    .brand-wrap .part06 > div {width: 100%; row-gap: 4rem;}
    .brand-wrap .part06 > div > div {row-gap: 4rem;}
    .brand-wrap .part06 > div > div > h2 {font-size: 3.2rem;}
    .brand-wrap .part06 > div > div > h2 .block {display: block;}
    .brand-wrap .part06 > div > div > p {font-size: 1.6rem;}
    .brand-wrap .part06 > div > div > p > br {display: none;}
}

.brand-wrap .part07 {background-color: var(--white); height: fit-content!important; padding: 10rem 2rem;}
.brand-wrap .part07 > div {width: 100%; max-width: 132rem; margin: 0 auto; display: flex; flex-flow: column; row-gap: 8rem; align-items: center;}
.brand-wrap .part07 > div > h2 {font-size: 4rem; font-weight: 800; color: var(--blue); line-height: 1.4;}
.brand-wrap .part07 > div > ul {position: relative; display: flex; flex-flow: column; row-gap: 10rem; width: fit-content; margin: 0 auto;}
.brand-wrap .part07 > div > ul::before {content: ''; width: .6rem; height: 100%; display: flex; position: absolute; top: 0; left: .8rem; background-color: var(--blue);}
.brand-wrap .part07 > div > ul > li {position: relative; display: flex; flex-flow: column; row-gap: 1.2rem; padding-left: 4.8rem;}
.brand-wrap .part07 > div > ul > li::before {content: ''; display: block; width: 2.2rem; height: 2.2rem; background-color: var(--green); border: .6rem solid var(--blue); border-radius: 100%; position: absolute; top: 0; left: 0;}
.brand-wrap .part07 > div > ul > li > h3 {font-size: 2.4rem; font-weight: 700; color: var(--gray800);}
.brand-wrap .part07 > div > ul > li > p {font-size: 2rem; font-weight: 500; color: var(--gray800); line-height: 1.6;}
.brand-wrap .part07 > div > ul > li > p > span {font-weight: initial;}
.brand-wrap .part07 > div > ul > li > img {margin-top: 2rem;}

@media screen and (max-width: 1024px) {
    .brand-wrap .part07 {padding: 3rem 1.6rem 6rem;}
    .brand-wrap .part07 > div {row-gap: 4rem;}
    .brand-wrap .part07 > div > h2 {font-size: 3.2rem;}
    .brand-wrap .part07 > div > ul {row-gap: 4rem; width: 100%;}
    .brand-wrap .part07 > div > ul::before {width: .4rem; left: 1rem;}
    .brand-wrap .part07 > div > ul > li {padding-left: 4rem; position: relative; display: flex; flex-flow: column; row-gap: 1.2rem;}
    .brand-wrap .part07 > div > ul > li::before {width: 1.8rem; height: 1.8rem; border-width: .4rem; left: .3rem;}
    .brand-wrap .part07 > div > ul > li > h3 {font-size: 1.8rem;}
    .brand-wrap .part07 > div > ul > li > p {font-size: 1.4rem; word-break: keep-all;}
    .brand-wrap .part07 > div > ul > li > img {margin-top: .8rem;}
}

.brand-wrap .part08 {background-color: var(--white); height: fit-content!important;}
.brand-wrap .part08 > ul {display: grid; grid-template-columns: repeat(2, 1fr);}
.brand-wrap .part08 > ul > li {padding: 0 2rem 4rem; cursor: pointer;}
.brand-wrap .part08 > ul > li:nth-child(1) {grid-column: 1 / span 2; padding: 0 8rem 10rem; cursor: initial;}
.brand-wrap .part08 > ul > li:nth-child(2) {background-color: var(--blue); padding-top: 6rem;}
.brand-wrap .part08 > ul > li:nth-child(3) {background-color: var(--green); padding-top: 6rem;}
.brand-wrap .part08 > ul > li > h2 {font-size: 4rem; font-weight: 800; color: var(--blue); margin-bottom: 4rem;}
.brand-wrap .part08 > ul > li > div {display: flex; flex-flow: column; row-gap: 1.6rem; align-items: center;}
.brand-wrap .part08 > ul > li > div > h3 {font-size: 4rem; font-weight: 800; color: #ffffff;}
.brand-wrap .part08 > ul > li > div > p {font-size: 1.6rem; font-weight: 500; color: rgba(255,255,255,.5);}
.brand-wrap .part08 > ul > li > i {width: 4rem; height: 4rem; margin: 2.4rem auto 0;}

@media screen and (max-width: 1024px) {
    .brand-wrap .part08 > ul {grid-template-columns: repeat(1, 1fr);}
    .brand-wrap .part08 > ul > li {padding: 4rem 1.6rem;}
    .brand-wrap .part08 > ul > li:nth-child(1) {grid-column: 1; padding: 0 1.6rem 6rem;}
    .brand-wrap .part08 > ul > li:nth-child(2),
    .brand-wrap .part08 > ul > li:nth-child(3) {padding-top: 4rem;}
    .brand-wrap .part08 > ul > li > h2 {font-size: 3.2rem; margin-bottom: 2rem;}
    .brand-wrap .part08 > ul > li > div > h3 {font-size: 3.2rem;}
    .brand-wrap .part08 > ul > li > div > p {font-size: 1.4rem;}
}

/* 로봇 */
.prod-wrap {margin-bottom: -10rem; margin-top: -6rem;}
.prod-wrap > section {height: calc(100vh - 11.6rem);}

@media screen and (max-width: 1200px) {
    .prod-wrap {margin-bottom: -8rem; margin-top: -3.6rem;}
}

.prod-wrap .section {overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center bottom; z-index: 10; width: 100vw; height: calc(100vh - 11.6rem); position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}

@media screen and (max-width: 1200px) {
    .prod-wrap .section {height: calc(100vh - 6rem);}
}

.prod-wrap .part01 {display: flex; align-items: center; justify-content: center; position: relative; padding: 0 2rem;}
.prod-wrap .part01 img {width: 100%; max-width: 128rem; margin: 0 auto;}
.prod-wrap .part01 .text {position: absolute;}

@media screen and (max-width: 1200px) {
    .prod-wrap .part01 {height: fit-content; padding: 8rem 1.6rem;}
    .prod-wrap .part01 .text {width: calc(100% - 3.2rem);}
}

.prod-wrap .part02 {background-image: url(/assets/img/product/wibs-img03-bg-ef44e14ac128e0a607ac8e76e142a9ed.png);}
.prod-wrap .part02 > div {display: flex; align-items: center; justify-content: center; padding-right: 10rem; column-gap: 10rem; height: 100%;}
.prod-wrap .part02 > div .img img {height: 36vw; max-height: 72.8rem;}
.prod-wrap .part02 > div .desc {display: flex; flex-flow: column; row-gap: 4.8rem;}
.prod-wrap .part02 > div .desc > h2 {font-size: 4rem; font-weight: 800; color: var(--blue); line-height: 1.4;}
.prod-wrap .part02 > div .desc > div {display: flex; flex-flow: column; row-gap: 2.4rem;}
.prod-wrap .part02 > div .desc > div > p {font-size: 1.8rem; font-weight: 500; line-height: 1.8;}

.prod-wrap.wim .part02 {background-image: url(/assets/img/product/wim-img03-bg-775351a9b64bb4996e7d2d82112243e9.png);}
  
@media screen and (max-width: 1024px) {
    .prod-wrap .part02 {background-image: url(/assets/img/product/wibs-img03-bg-mb-75579de556924146be8d549fe444b419.png); overflow-x: auto;}
    .prod-wrap .part02 > div {width: max-content; display: flex; align-items: center; justify-content: initial; padding-right: 0; column-gap: 0;}
    .prod-wrap .part02 > div .img {width: 100vw; display: flex; align-items: center; justify-content: center;}
    .prod-wrap .part02 > div .img img {height: initial; max-height: initial; width: 30rem; margin: 0 auto;}
    .prod-wrap .part02 > div .desc {width: 100vw; padding: 0 1.6rem; row-gap: 3.2rem; align-items: center;}
    .prod-wrap .part02 > div .desc > h2 {font-size: 2.8rem; text-align: center;}
    .prod-wrap .part02 > div .desc > div {display: flex; flex-flow: column; row-gap: 1.6rem;}
    .prod-wrap .part02 > div .desc > div > p {font-size: 1.6rem; text-align: center;}

    .prod-wrap.wim .part02 {background-image: url(/assets/img/product/wim-img03-bg-mb-ad4006b2f70aaf5cc45a283280b80f6d.png);}
}
  
/*.prod-wrap .part03 {background-color: var(--gray300);}*/
/*.prod-wrap .part03 > ul {display: grid; grid-template-columns: repeat(3, 100vw); height: 100vh; overflow-y: auto;}*/
/*.prod-wrap .part03 > ul > li {display: flex; align-items: center; justify-content: center; padding: 0 2rem;}*/
.prod-wrap .part03 {display: flex; align-items: center; width: 100vw; overflow-x: auto; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 1;}
.prod-wrap .part03 > ul {display: flex; align-items: center;}
.prod-wrap .part03 > ul > li {width: 100vw; flex: 0 0 100vw; padding: 0 2rem;}
.prod-wrap .part03 > ul > li.desktop {display: flex; align-items: center; justify-content: center;}
.prod-wrap .part03 > ul > li img {width: 66vw; max-width: 128rem; margin: 0 auto;}

.prod-wrap .part03 {height: fit-content; display: inline-table; align-items: initial; overflow-x: initial;}
.prod-wrap .part03 .img-wrap {padding: 8rem 0; display: flex; grid-gap: 2rem; flex-wrap: wrap; width: 100%; max-width: 128rem; margin: 0 auto; align-items: initial;}
.prod-wrap .part03 .img-wrap > li {width: calc((100% - 2rem) / 2); flex: initial; padding: 0;}
.prod-wrap .part03 .img-wrap > li > img {width: 100%;}
.prod-wrap .part03 .img-wrap > li:nth-child(2) {margin-top: 16rem;}
.prod-wrap .part03 .img-wrap > li:nth-child(3),
.prod-wrap .part03 .img-wrap > li:nth-child(5) {margin-top: -15rem;}

.prod-wrap .part03 > ul:not(.img-wrap) {display: none;}

@media screen and (max-width: 1024px) {
    .prod-wrap .part03 .img-wrap {display: none;}

    .prod-wrap .part03 {height: calc(100vh - 6rem); display: flex; align-items: center; width: 100vw; overflow-x: auto; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 1;}
    .prod-wrap .part03 > ul:not(.img-wrap) {display: flex; align-items: center;}
    .prod-wrap .part03 > ul:not(.img-wrap) > li {width: 100vw; flex: 0 0 100vw; padding: 0;}
    .prod-wrap .part03 > ul:not(.img-wrap) > li.desktop {display: flex; align-items: center; justify-content: center;}
    .prod-wrap .part03 > ul:not(.img-wrap) > li img {width: initial; max-width: initial; height: calc(100vh - 6rem - 8rem);}

    .prod-wrap .part03 > ul > li {padding: 0;}
    .prod-wrap .part03 > ul > li img {width: initial; max-width: initial; height: calc(100vh - 16rem);}
}

/*.prod-wrap .part04 {background-color: var(--gray300);}*/
.prod-wrap .part04 {background-color: var(--gray200); display: flex; align-items: center; width: 100vw; overflow-x: auto; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 1;}
/*.prod-wrap .part04 > ul {display: grid; grid-template-columns: repeat(3, 100vw); height: 100vh; overflow-y: auto;}*/
.prod-wrap .part04 > ul {display: flex; align-items: center;}
/*.prod-wrap .part04 > ul > li {display: flex; align-items: center; justify-content: center; padding: 0 2rem;}*/
.prod-wrap .part04 > ul > li {width: 100vw; flex: 0 0 100vw; display: flex; flex-flow: column; row-gap: 4rem; align-items: center; padding: 0 2rem;}
.prod-wrap .part04 > ul > li img {width: 100%; max-width: 100rem; margin: 0 auto;}
.prod-wrap .part04 > ul > li video {width: 100%; max-width: 100rem; margin: 0 auto; border-radius: 4rem;}
.prod-wrap .part04 > ul > li > p {font-size: 2.8rem; font-weight: 700; color: var(--blue); text-align: center; line-height: 1.6; display: flex; align-items: center; flex-flow: column; row-gap: .6rem;}
.prod-wrap .part04 > ul > li > p > br {display: none;}
.prod-wrap .part04 > ul > li > p > br.block {display: block;}
.prod-wrap .part04 > ul > li > p > span {font-size: 2rem; font-weight: 500; color: var(--blue);}

@media screen and (max-width: 1024px) {
    .prod-wrap .part04 > ul {height: calc(100vh - 6rem - 8rem);}
    .prod-wrap .part04 > ul > li {row-gap: 4rem; padding: 0 1.6rem;}
    .prod-wrap .part04 > ul > li img {max-width: 34rem;}
    .prod-wrap .part04 > ul > li video {max-width: 34rem; border-radius: 2rem;}
    .prod-wrap .part04 > ul > li > p {width: 100%; font-size: 1.6rem; word-break: keep-all; row-gap: .2rem; height: calc(100% - 6rem - 4rem); text-align: center;}
    .prod-wrap .part04 > ul > li > p > br {display: block;}
    .prod-wrap .part04 > ul > li > p > span {font-size: 1.4rem;}

    .prod-wrap .part04 > ul > li video + p {height: fit-content; width: 60%;}
}

.prod-wrap .part05 {display: flex; align-items: center; justify-content: center; flex-flow: column; row-gap: 6rem; position: relative; padding: 0 2rem;}
.prod-wrap .part05 > h2 {font-size: 3.2rem; font-weight: 800; color: var(--blue);}

.safer-swiper.swiper {width: 66vw; max-width: 128rem; margin: 0 auto; z-index: 1; overflow: hidden; border-radius: 4rem; position: relative;}
/* .safer-swiper.swiper::before {content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); position: absolute; z-index: 2; top: 0; left: 0;} */
.safer-swiper.swiper .swiper-wrapper {position: relative; z-index: 1;}
.safer-swiper.swiper .swiper-slide {display: flex; align-items: center; justify-content: center; overflow: hidden;}
.safer-swiper.swiper .swiper-slide img {width: 100%;}

@media screen and (max-width: 1024px) {
    .prod-wrap .part05 {height: fit-content; padding: 4rem 1.6rem; row-gap: 4rem;}
    .prod-wrap .part05 > h2 {font-size: 1.6rem;}
    
    .safer-swiper.swiper {width: 100%; border-radius: 2rem;} 
    .safer-swiper.swiper .swiper-slide {width: 100%; height: 28rem;}
    .safer-swiper.swiper .swiper-slide img {width: initial; height: 100%;}
}

.prod-wrap .part06 {height: fit-content; padding: 12rem 2rem; background-color: var(--gray200);}
.prod-wrap .part06 > div {width: 100%; max-width: 120rem; margin: 0 auto; padding: 8rem; display: flex; flex-flow: column; row-gap: 4rem; background-color: var(--white); border-radius: 4rem; background-image: url(/assets/img/product/wibs-img13-d133d2c25ac87aea06e1f5dd609a827d.png); background-repeat: no-repeat; background-size: auto 100%; background-position: top right 10rem;}
.prod-wrap .part06 > div > h2 {font-size: 5.2rem; font-weight: 900; color: var(--blue); line-height: 1.4;}
.prod-wrap .part06 > div > p {font-size: 2.4rem; font-weight: 500;}
.prod-wrap .part06 > div > button {width: 24rem; height: 6rem;}

.prod-wrap.wim .part06 {background-color: transparent;}
.prod-wrap.wim .part06 > div {background-image: url(/assets/img/product/wim-img13-da5e2bcddb3734a7007b064c9617bfe2.png); background-position: top right; background-color: var(--gray200);}

@media screen and (max-width: 1024px) {
    .prod-wrap .part06 {padding: 8rem 1.6rem;}
    .prod-wrap .part06 > div {padding: 4rem; row-gap: 2rem; border-radius: 2rem; background-size: auto 23rem; background-position: top right 0; background-image: url(/assets/img/product/wibs-img13-mb-201c951b2423389357089f181082abb9.png);}
    .prod-wrap .part06 > div > h2 {font-size: 2.4rem; width: 13.4rem; word-break: keep-all;}
    .prod-wrap .part06 > div > p {font-size: 1.6rem; width: 14.8rem; word-break: keep-all; line-height: 1.6;}
    .prod-wrap .part06 > div > button {width: 100%; height: 4.8rem;}

    .prod-wrap.wim .part06 > div {background-image: url(/assets/img/product/wim-img13-mb-df76a9f0ae3c56097b5d720e9e9b6d9f.png);}
}

.prod-wrap .part07 {background-color: var(--white); overflow: initial; height: fit-content; display: flex; justify-content: center; column-gap: 10rem;}
.prod-wrap .part07 .img {height: calc(100vh - 11.6rem); position: sticky; top: 11.6rem; display: flex; align-items: center;}
.prod-wrap .part07 .img img {height: 40vw; max-height: 60rem;}
.prod-wrap .part07 .desc > ul > li {width: 41.5rem; height: calc(100vh - 11.6rem); display: flex; flex-flow: column; row-gap: 4.8rem; justify-content: center; word-break: keep-all;}
.prod-wrap .part07 .desc > ul > li > img {display: none;}
.prod-wrap .part07 .desc > ul > li > span {font-size: 2.4rem; font-weight: 600; margin-bottom: -1.6rem; color: var(--blue); display: flex; align-items: center; column-gap: .4rem;}
.prod-wrap .part07 .desc > ul > li > h2 {font-size: 4rem; font-weight: 800; color: var(--blue); line-height: 1.4;}
.prod-wrap .part07 .desc > ul > li > p {font-size: 1.8rem; font-weight: 500; line-height: 1.8; word-break: keep-all;}

@media screen and (max-width: 1200px) {
    .prod-wrap .part07 .img {height: calc(100vh - 6rem); top: 6rem;}
    .prod-wrap .part07 .desc > ul > li {height: calc(100vh - 6rem);}
}
@media screen and (max-width: 1024px) {
    .prod-wrap .part07 {justify-content: initial; flex-flow: column; row-gap: 4rem; padding: 4rem 1.6rem; height: calc(100vh - 6rem);}
    .prod-wrap .part07 .img {display: none;}
    .prod-wrap .part07 .desc {width: 100vw; height: 100%; overflow: hidden; margin: 0 -1.6rem 0;}
    /*.prod-wrap .part07 .desc > ul {position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 100vw); overflow-y: auto;}*/
    .prod-wrap .part07 .desc > ul {position: relative; z-index: 1; display: flex;}
    .prod-wrap .part07 .desc > ul > li {width: 100%; height: initial; padding: 0 3.2rem 0; row-gap: 1.6rem; justify-content: flex-start;}
    .prod-wrap .part07 .desc > ul > li {width: 100vw; flex: 0 0 100vw; height: fit-content; padding: 0 3.2rem 0; row-gap: 2.4rem;}
    .prod-wrap .part07 .desc > ul > li > img {display: block; height: 24rem; margin: 0 auto;}
    .prod-wrap .part07 .desc > ul > li > span {font-size: 1.6rem; margin-bottom: -.8rem;}
    .prod-wrap .part07 .desc > ul > li > h2 {font-size: 2.4rem; word-break: keep-all;}
    .prod-wrap .part07 .desc > ul > li > p {font-size: 1.6rem; word-break: keep-all;}
}

/* 로봇 (레거시) */
.prod-list {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10rem 2rem;}
.prod-list > li {display: flex; flex-flow: column; row-gap: 2.4rem; cursor: pointer;}
.prod-list > li .img {overflow: hidden; background-color: var(--white);}
.prod-list > li .img img {width: 100%; transition: transform cubic-bezier(0.4,0,0.2,1) .5s; transform: scale(1.005);}
.prod-list > li .info > h2 {font-size: 3.2rem; font-weight: 600; line-height: 1.6; word-break: keep-all;}

.prod-list > li:hover .img img {transform: scale(1.03);}

@media screen and (max-width: 1024px) {
    .prod-list {grid-template-columns: repeat(1, 1fr); grid-gap: 4rem 2rem;}
    .prod-list > li {row-gap: 1.6rem;}
    .prod-list > li .img {width: 100vw; margin: 0 -1.6rem;}
    .prod-list > li .info > h2 {font-size: 1.8rem;}
}

/* 브랜드 > 지적재산권 */
.patent-img {display: flex; border: 1px solid var(--gray300);}
.patent-img img {width: calc(100% / 2);}
.patent-info {padding: 3.2rem 0; display: flex; flex-flow: column; row-gap: 2rem; border-bottom: 1px solid var(--black);}
.patent-info > h2 {font-size: 3.2rem; font-weight: 600;}
.patent-info > p {font-size: 2rem; font-weight: 500;}

@media screen and (max-width: 1024px) {
    .patent-img {flex-flow: column; width: 100vw; margin: 0 -1.6rem; border-left: 0; border-right: 0;}
    .patent-img img {width: 100%;}
    .patent-info {padding: 1.6rem 0; row-gap: 1.2rem;}
    .patent-info > h2 {font-size: 1.8rem;}
    .patent-info > p {font-size: 1.4rem;}
}

/* 로봇 > 상품 상세 > 상품 정보 */
.prod-detail-wrap {display: flex; column-gap: 4.8rem;}
.prod-detail-wrap.mobile {display: none;}
.prod-detail-wrap .prod-detail {width: calc((100% - 4.8rem) * 0.7); }
.prod-detail-wrap .prod-option {width: calc((100% - 4.8rem) * 0.3); min-width: 32rem; position: sticky; top: 11.6rem; height: fit-content; padding-top: 4rem;}

.prod-detail-wrap .prod-detail .prod-swiper-wrap {margin-bottom: 10rem;}
.prod-detail-wrap .prod-detail .prod-swiper img {width: 100%; border-radius: 1.2rem;}
.prod-detail-wrap .prod-detail .prod-swiper-list {width: fit-content; margin: 3.2rem auto 0;}
.prod-detail-wrap .prod-detail .prod-swiper-list .swiper-slide {width: 8rem; height: 8rem; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--gray300);}
.prod-detail-wrap .prod-detail .prod-swiper-list img {height: 100%;}
.prod-detail-wrap .prod-detail .prod-swiper-list .swiper-slide-thumb-active {border-color: var(--gray900);}

.prod-detail-wrap .prod-option .intro > div {display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.4rem;}
.prod-detail-wrap .prod-option .intro > div > span {font-size: 1.4rem; font-weight: 500;}
.prod-detail-wrap .prod-option .intro > h1 {font-size: 3.2rem; font-weight: 600; line-height: 1.3; width: 30rem; word-break: keep-all;}
.prod-detail-wrap .prod-option .intro > p {margin-top: 3.5rem; margin-bottom: 2.25rem; font-size: 2.4rem; font-weight: 700;}
.prod-detail-wrap .prod-option .intro .guide {background-color: var(--gray100); padding: 3rem 2rem; margin-top: 3.2rem; height: 7.6rem; text-align: center; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 600; color: var(--blue70);}

.prod-detail-wrap .prod-option .info {margin-top: 3.2rem; padding: 1.6rem 0; border-top: 1px solid var(--gray300); border-bottom: 1px solid var(--gray300); display: flex; flex-flow: column; row-gap: 1.2rem;}
.prod-detail-wrap .prod-option .info > li {display: flex; align-items: center; justify-content: space-between; border-bottom: 0; column-gap: 0;}
.prod-detail-wrap .prod-option .info > li > h2 {font-size: 1.4rem; font-weight: 500; width: fit-content;}
.prod-detail-wrap .prod-option .info > li > p {font-size: 1.4rem; font-weight: 500; flex: initial;}

.prod-detail-wrap .prod-option .option {display: flex; flex-flow: column; row-gap: 1rem; margin-top: 2rem;}
.prod-detail-wrap .prod-option .option > li {display: flex; justify-content: space-between; align-items: center; column-gap: 1rem;}
.prod-detail-wrap .prod-option .option > li > h2 {font-size: 1.4rem; font-weight: 500; width: 5rem;}
.prod-detail-wrap .prod-option .option > li > select {flex: 1; border: 1px solid var(--gray300); border-radius: .4rem; padding: 0 5.2rem 0 1.6rem; background-position: center right 1.6rem;}

.prod-detail-wrap .prod-option .option > li .color {display: flex; align-items: center; column-gap: .8rem;}
.prod-detail-wrap .prod-option .option > li .color li input[type="radio"] + label {width: 3.6rem; height: 3.6rem; display: block; border-radius: 100%; cursor: pointer;}
.prod-detail-wrap .prod-option .option > li .color li input[type="radio"] + label[for="yellow"] {background-color: #FFA11A;}
.prod-detail-wrap .prod-option .option > li .color li input[type="radio"] + label[for="blue"] {background-color: #006598;}
.prod-detail-wrap .prod-option .option > li .color li input[type="radio"] + label[for="black"] {background-color: #2F2F31;}
.prod-detail-wrap .prod-option .option > li .color li input[type="radio"] + label::before {content: none;}
.prod-detail-wrap .prod-option .option > li .color li input[type="radio"]:checked + label {background-image: url(/assets/img/ico/ic-color-chk-58b259a9d903a3ccb925b60161c27ffc.svg); background-repeat: no-repeat; background-size: 3.2rem; background-position: center;}

.prod-detail-wrap .prod-option .option .cart {background-color: var(--gray100); padding: 1.2rem; display: block;}
.prod-detail-wrap .prod-option .option .cart + .cart {margin-top: -.4rem;}

.prod-detail-wrap .prod-option .option .cart > ul {width: 100%; display: flex; flex-flow: column; row-gap: .4rem;}
.prod-detail-wrap .prod-option .option .cart > ul > li {display: flex; justify-content: space-between; align-items: center; column-gap: 1rem;}
.prod-detail-wrap .prod-option .option .cart > ul > li + li {color: var(--gray700);}
.prod-detail-wrap .prod-option .option .cart > ul > li > h2 {font-size: 1.4rem; font-weight: 500; display: flex; align-items: center; column-gap: .6rem;}
.prod-detail-wrap .prod-option .option .cart > ul > li > div {display: flex; align-items: center; column-gap: 1.2rem;}
.prod-detail-wrap .prod-option .option .cart > ul > li > div > button {width: fit-content; height: fit-content; padding: 0; background-color: transparent;}
.prod-detail-wrap .prod-option .option .cart > div { color: #747479; font-size: 1.3rem; font-weight: 500; }
.prod-detail-wrap .prod-option .option .cart > div > p {margin: 0; padding: 0;}

.prod-detail-wrap .prod-option .option .total {border-top: .2rem solid var(--gray900); padding-top: 0;}
.prod-detail-wrap .prod-option .option .total > h2 {font-size: 1.4rem; font-weight: 500;}
.prod-detail-wrap .prod-option .option .total > p {font-size: 2.4rem; font-weight: 700;}

.prod-detail-wrap .prod-option .button {margin-top: 2rem; display: flex; align-items: center; column-gap: 1rem;}
.prod-detail-wrap .prod-option .button button {width: calc((100% - .8rem) / 2);}
.prod-detail-wrap .prod-option .button button:nth-last-child(2) {border-color: var(--blue); background-color: var(--white); color: var(--blue);}

.prod-detail-wrap .prod-option .info .delivery-info { display: flex; align-items: flex-end; justify-content: center; text-align: right; flex-direction: column; }
.prod-detail-wrap .prod-option .info .delivery-info .title { font-size: 1.4rem; margin-top: 0; margin-bottom: 0; font-weight: 500; }
.prod-detail-wrap .prod-option .info .delivery-info .sub-title { font-size: 1.1rem; font-weight: 500; margin-top: 0.35rem; margin-bottom: 0; letter-spacing: -0.05rem; }

.prod-tab {display: flex; align-items: center; column-gap: 3.2rem; border-top: 1px solid var(--gray300); border-bottom: 1px solid var(--gray300); margin-bottom: 6rem; /*position: sticky;*/ top: 11.6rem; background-color: var(--white); z-index: 90;}
.prod-tab > li {height: 6rem; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 500; color: var(--gray500); cursor: pointer; position: relative;}
.prod-tab > li.active {font-weight: 600; color: var(--blue);}
.prod-tab > li.active::after {content: ''; width: 100%; height: .2rem; background-color: var(--blue); display: block; position: absolute; bottom: -1px; left: 0;}

.prod-cont {display: none;}
.prod-cont.active {display: block; }

.prod-cont img {width: 100%;}
.prod-cont video {width: calc(100% - 32rem); display: block; margin: 0 auto; border-radius: 1.2rem;}

.delivery-notice {display: flex;flex-direction: column;align-items: flex-start;align-content: flex-start;flex-wrap: wrap;margin:0;gap:5px;}
.delivery-notice p {font-size:13px;font-weight:600; margin: 0.25rem 0;}

.tmpPriceLayout {margin-top: 50px;}
.order-info {margin-top: 50px;}

@media screen and (max-width: 1200px) {
    .prod-tab {top: 5.9rem;}
}
@media screen and (max-width: 1024px) {
    .prod-detail-wrap {display: none;}
    .prod-detail-wrap.mobile {display: block; margin-top: -2.8rem;}
    .prod-detail-wrap.mobile .prod-cont .bottom-fix {position: sticky; left: 0; width: 100vw; padding: 1.2rem; bottom: 0; z-index: 99; margin: 2rem -1.6rem 0; background-color: var(--white);}

    .mobile-prod-swiper.swiper {width: 100vw; margin: 0 -1.6rem 1.6rem;}
    .mobile-prod-swiper.swiper img {width: 100%;}
    
    .mobile-prod-swiper-list.swiper {width: fit-content; margin: 0 auto;}
    .mobile-prod-swiper-list.swiper .swiper-slide {width: 4.2rem!important; height: 4.2rem; border: 1px solid var(--gray300); overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer;}
    .mobile-prod-swiper-list.swiper .swiper-slide img {height: 100%;}
    .mobile-prod-swiper-list.swiper .swiper-slide-thumb-active {border-color: var(--gray900);}

    .prod-info {margin-top: 3.2rem;}
    .prod-info .intro > div {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem;}
    .prod-info .intro > div > span {font-size: 1.2rem; font-weight: 500;}
    .prod-info .intro > div > i {width: 1.8rem; height: 1.8rem;}
    .prod-info .intro > h1 {font-size: 2rem; font-weight: 600; line-height: 1.3; width: 100%;}
    .prod-info .intro > p {margin-top: 2.4rem; font-size: 1.8rem; font-weight: 700;}
    .prod-info .intro .guide {background-color: var(--gray100); padding: 2.4rem 1.6rem; margin-top: 2.4rem; height: 6.2rem; text-align: center; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 600; color: var(--blue70);}

    .prod-info .info {width: 100vw; padding: 1.6rem; /*margin-top: 2.4rem;*/ margin-left: -1.6rem; border-top: 1px solid var(--gray300); display: flex; flex-flow: column; row-gap: 1.2rem;}
    .prod-info .info > li {display: flex; align-items: center; justify-content: space-between; border-bottom: 0; column-gap: 0;}
    .prod-info .info > li > h2 {font-size: 1.4rem; font-weight: 500; width: fit-content;}
    .prod-info .info > li > p {font-size: 1.4rem; font-weight: 500; flex: initial;}
        
    .prod-detail-wrap.mobile .prod-detail {width: 100%; height: fit-content;}
    .prod-detail-wrap.mobile .prod-tab {width: 100vw; margin: 0 -1.6rem; padding: 0 1.6rem; margin-bottom: 4rem;}
    .prod-detail-wrap.mobile .prod-tab > li {height: 4.8rem; font-size: 1.4rem;}

    .prod-detail-wrap.mobile .prod-option {position: relative; z-index: 110;}
    .prod-detail-wrap.mobile .prod-option .background {width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; z-index: 10!important;}
    .prod-detail-wrap.mobile .prod-option > div {background-color: var(--white); position: fixed; top: initial; left: 0; bottom: 0; padding: 2.4rem 1.6rem 3.4rem; width: 100vw; z-index: 110; display: flex; flex-flow: column; row-gap: 1.6rem;}
    .prod-detail-wrap.mobile .prod-option > div > h2 {font-size: 1.6rem; font-weight: 600;}
    .prod-detail-wrap.mobile .prod-option > div > ul {display: flex; flex-flow: column; row-gap: 1.2rem;}
    .prod-detail-wrap.mobile .prod-option > div > ul > li {display: flex; flex-flow: column; row-gap: .8rem;}
    .prod-detail-wrap.mobile .prod-option > div > ul > li > h3 {font-size: 1.4rem; font-weight: 500;}
    .prod-detail-wrap.mobile .prod-option > div > ul > li > select {width: 100%; border: 1px solid var(--gray300); border-radius: .4rem; padding: 0 5.2rem 0 1.6rem; background-position: center right 1.6rem;}
    
    .prod-detail-wrap.mobile .prod-option > div > ul .cart {padding: 1.6rem 1.6rem 0 1.6rem; background-color: var(--gray100);}
    .prod-detail-wrap.mobile .prod-option > div > ul .cart + .cart {margin-top: -.4rem;}
    .prod-detail-wrap.mobile .prod-option > div > ul .cart > ul {display: flex; flex-flow: column;}
    .prod-detail-wrap.mobile .prod-option > div > ul .cart > ul > li {display: flex; flex-flow: column;}
    .prod-detail-wrap.mobile .prod-option > div > ul .cart > ul > li > h2 {font-size: 1.4rem; font-weight: 600; display: flex; align-items: center; column-gap: .6rem;}
    .prod-detail-wrap.mobile .prod-option > div > ul .cart > ul > li > div {display: flex; align-items: center; justify-content: space-between;}
    .prod-detail-wrap.mobile .prod-option > div > ul .cart > ul > li > div > div {display: flex; align-items: center; column-gap: 1.6rem;}
    .prod-detail-wrap.mobile .prod-option > div > ul .cart > ul > li > div > div > p {font-size: 1.6rem; font-weight: 600; margin: 0;}
    .prod-detail-wrap.mobile .prod-option > div > ul .cart > ul > li > div > div > button {width: fit-content; height: fit-content; padding: 0; background-color: transparent;}

    .prod-detail-wrap.mobile .prod-option > div > ul .cart > ul > li > div > p {margin: 1rem 0; font-size: 1.3rem;}
    .prod-detail-wrap.mobile .prod-option > div > ul .cart > ul > li > .prod-count {display: flex; align-items: center; justify-content: end; column-gap: 1.6rem; margin-top: -10%; margin-bottom: 1.6rem;}

    .prod-detail-wrap.mobile .prod-option > div > ul .cart > ul > li + li > h2 {color: var(--gray700);}
    .prod-detail-wrap.mobile .prod-option > div > ul .cart > ul > li + li > div {padding-left: 2.6rem;}
    
    .prod-detail-wrap.mobile .prod-option > div > ul .total {border-top: .2rem solid var(--gray900); padding-top: 2rem; flex-flow: initial; justify-content: space-between;}
    .prod-detail-wrap.mobile .prod-option > div > ul .total > p {font-size: 1.8rem; font-weight: 700;}

    .prod-detail-wrap.mobile .prod-option > div .button {margin-top: 0; column-gap: .4rem;}
    .prod-detail-wrap.mobile .prod-option > div .button button {width: calc((100% - .4rem) / 2);}

    .prod-detail-wrap .prod-info .info .delivery-info { display: flex; align-items: flex-end; justify-content: center; text-align: right; flex-direction: column; }
    .prod-detail-wrap .prod-info .info .delivery-info .title { font-size: 1.4rem; margin-bottom: 0.25rem; font-weight: 500; }
    .prod-detail-wrap .prod-info .info .delivery-info .sub-title { font-size: 1.1rem; font-weight: 500; margin-top: 0.25rem; margin-bottom: 0; letter-spacing: -0.05rem; }
}

/* 로봇 > 상품 상세 > 상품 후기 */
.grade-wrap {display: flex; align-items: center; justify-content: space-between;}
.grade-wrap > div {display: flex; flex-flow: column; row-gap: .8rem;}
.grade-wrap > div .score {display: flex; align-items: center; column-gap: .8rem;}
.grade-wrap > div .score > li {font-size: 3.2rem; font-weight: 500; color: var(--gray500); display: flex; align-items: center; column-gap: .8rem;}
.grade-wrap > div .score > li:nth-child(1) {font-weight: 700; color: var(--gray900);}
.grade-wrap > div .score > li + li::before {content: '/';}
.grade {display: flex; align-items: center;}

.average {width: calc(100% - 20rem - 8rem); border: 1px solid var(--gray300); padding: 2.8rem; border-radius: .8rem; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); grid-gap: 1.6rem 4rem; grid-auto-flow: column;}
.average > li {display: flex; align-items: center; column-gap: 2rem;}
.average > li > h3 {font-size: 1.4rem; width: 2.4rem;}
.average > li > div {flex: 1; height: .8rem; border-radius: .8rem; background-color: var(--gray300); position: relative; display: flex; align-items: center;}
.average > li > div > span {display: block; height: .8rem; border-radius: .8rem; position: absolute; left: 0; background-color: #FFC633;}
.average > li > p {font-size: 1.4rem; width: 2.4rem; color: var(--gray700);}

.review-list {border-top: 1px solid var(--black);}
.review-list > li {border-bottom: 1px solid var(--gray300); padding: 2.4rem 0; display: flex; align-items: flex-start; column-gap: 2rem; cursor: pointer; background-image: url(/assets/img/ico/ic-arrow-down-20-fb8701a981f92718548b609f4e8f4c83.svg); background-repeat: no-repeat; background-size: 2rem; background-position: right top 7.2rem;}
.review-list > li > .img {width: 10rem; height: 10rem; border-radius: .2rem; background-color: var(--gray300); background-repeat: no-repeat; background-size: cover; background-position: center; position: relative;}
.review-list > li > .img > div {width: 2.4rem; height: 2.4rem; border-radius: .2rem; background-color: rgba(18,18,18,.4); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 600; color: #ffffff; position: absolute; bottom: 0; right: 0;}
.review-list > li .desc {width: calc(100% - 10rem - 2rem); position: relative;}
.review-list > li .desc > * + * {margin-top: 1.6rem;}
.review-list > li .desc .button {position: absolute; top: 0; right: 0;}
.review-list > li .desc .button .ic-more-24 {display: none;}
.review-list > li .desc .button > div {display: flex; align-items: center; column-gap: .4rem;}
.review-list > li .desc .button > div > button {width: fit-content; padding: 0 1rem; border-radius: .4rem; height: 2.8rem; font-size: 1.2rem; background-color: var(--white); border-color: var(--gray700); color: var(--gray700);}
.review-list > li .desc .grade i {width: 1.6rem; height: 1.6rem;}
.review-list > li .desc > h3 {font-size: 1.6rem; font-weight: 500;}
.review-list > li .desc > p {width: calc(100% - 3.6rem); font-size: 1.4rem; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.review-list > li .desc .img {display: none;}
.review-list > li .desc .info {display: flex; align-items: center; column-gap: .6rem;}
.review-list > li .desc .info > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.2rem; color: var(--gray700);}
.review-list > li .desc .info > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray300);}

.review-list > li.active .desc > p {overflow: initial; text-overflow: initial; white-space: initial;}
.review-list > li.active .desc .img {width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1.2rem;}
.review-list > li.active .desc .img > li {display: flex; align-items: center; justify-content: center;}
.review-list > li.active .desc .img > li img {width: 100%;}

@media screen and (max-width: 1024px) {
    .grade-wrap {flex-flow: column; row-gap: 2rem;}
    .grade-wrap > div {align-items: center;}
    .grade-wrap > div .score {column-gap: .6rem;}
    .grade-wrap > div .score > li {font-size: 2.4rem; column-gap: .6rem;}
    .grade-wrap > div .grade > li > i {width: 2.4rem; height: 2.4rem;}
    
    .average {width: 100%; padding: 2rem;  grid-gap: 1.2rem 2rem;}
    .average > li {column-gap: .4rem;}
    .average > li > h3 {font-size: 1.2rem; width: 1.8rem;}
    .average > li > div {border-radius: .2rem;}
    .average > li > div > span {border-radius: .2rem;}
    .average > li > p {font-size: 1.2rem; width: 2rem;}
    
    .review-list > li {padding: 2rem 0; column-gap: 1.2rem; background-image: none;}
    .review-list > li > .img {width: 8rem; height: 8rem;}
    .review-list > li > .img > div {width: 2rem; height: 2rem; font-size: 1.2rem;}
    .review-list > li .desc {width: calc(100% - 8rem - 1.2rem); display: flex; flex-flow: column;}
    .review-list > li .desc > * + * {margin-top: .8rem;}
    .review-list > li .desc .button {position: absolute; top: 0; right: 0;}
    .review-list > li .desc .button .ic-more-24 {display: block;}
    .review-list > li .desc .button > div {position: absolute; top: 2.2rem; right: 0; flex-flow: column; border: 1px solid var(--gray300); border-radius: .4rem; width: 7.2rem; background-color: var(--white); z-index: 10;}
    .review-list > li .desc .button > div > button {width: 100%; height: 3.8rem; font-size: 1.4rem; color: var(--gray700); border: 0; background-color: transparent; border-radius: 0;}
    .review-list > li .desc .button > div > button + button {border-top: 1px solid var(--gray300);}
    .review-list > li .desc > h3 {font-size: 1.4rem;}
    .review-list > li .desc > p {width: 100%; font-size: 1.2rem;}
    .review-list > li .desc .info {column-gap: .4rem;}
    .review-list > li .desc .info > li {column-gap: .4rem;}
    
    .review-list > li .desc .review-swiper.swiper {width: calc(100% + 1.6rem); margin-top: 2rem; margin-right: -1.6rem; padding-right: 1.6rem; order: 4; overflow: hidden;}
    .review-list > li .desc .review-swiper.swiper .swiper-slide {width: 16rem; height: 16rem;}
}
@media screen and (max-width: 768px) {
    .review-list > li.active .desc .img {grid-template-columns: repeat(2, 1fr); grid-gap: 1.2rem;}
}

.pop-review-swiper.swiper {width: calc(100% + 3.2rem); margin: 0 -1.6rem 2.4rem;}
.pop-review-swiper.swiper .swiper-wrapper {height: 60rem; align-items: center;}
.pop-review-swiper.swiper .swiper-slide {height: fit-content;}
.pop-review-swiper.swiper img {width: 100%;}

.pop-review-swiper.swiper .swiper-button-prev {width: fit-content; height: fit-content; left: 2.4rem;}
.pop-review-swiper.swiper .swiper-button-next {width: fit-content; height: fit-content; right: 2.4rem;}
.pop-review-swiper.swiper .swiper-button-prev::after,
.pop-review-swiper.swiper .swiper-button-next::after {content: none;}
.pop-review-swiper.swiper .swiper-button-prev::before {content: ''; width: 4.8rem; height: 4.8rem; background-image: url(/assets/img/ico/ic-arrow-left-40-adade7cf1af26dfeb842edea3e985bfa.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
.pop-review-swiper.swiper .swiper-button-next::before {content: ''; width: 4.8rem; height: 4.8rem; background-image: url(/assets/img/ico/ic-arrow-right-40-ae1b5f5df04c1b5d6c91d62890654ec2.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}

@media screen and (max-width: 1024px) {
    .pop-review-swiper.swiper .swiper-wrapper {height: 36rem;}

    .pop-review-swiper.swiper .swiper-button-prev {left: 1.6rem;}
    .pop-review-swiper.swiper .swiper-button-next {right: 1.6rem;}
    .pop-review-swiper.swiper .swiper-button-prev::before {width: 3.6rem; height: 3.6rem;}
    .pop-review-swiper.swiper .swiper-button-next::before {width: 3.6rem; height: 3.6rem;}
}

/* 로봇 > 상품 상세 > 상품 후기 > 상품 후기 작성 */
.review-write {width: 100%; border-top: 1px solid var(--black); padding-top: 1.6rem; display: flex; flex-flow: column; row-gap: 1.6rem;}
.review-write > * + * {border-top: 1px solid var(--gray300); padding-top: 1.6rem;}
.review-write > div {display: flex; row-gap: 1.6rem;}
.review-write > div > h3 {font-size: 1.8rem; font-weight: 600;}
.review-write .prod-grade {align-items: center; justify-content: space-between;}
.review-write .prod-grade i {width: 2.4rem; height: 2.4rem;}
.review-write .prod-review {flex-flow: column;}
.review-write .prod-img {flex-flow: column;}
.review-write .prod-img > ul {display: flex; flex-wrap: wrap; grid-gap: .8rem;}
.review-write .prod-img > ul > li {width: 10rem; height: 10rem; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.5);}
.review-write .prod-img > ul > li img {height: 100%;}
.review-write .prod-img > ul > li input[type="file"] + label {width: 100%; height: 100%; padding: 0; border-radius: 0; border: 0; background-color: transparent;}

@media screen and (max-width: 1024px) {
    .review-write > div > h3 {font-size: 1.6rem;}
}

/* 로봇 > 상품 상세 > 상품 후기 > 상품 문의하기 */
.qna-write {border-top: 1px solid var(--black); display: flex; flex-flow: column; row-gap: 1.2rem; padding-top: 1.6rem;}
.qna-write > li {display: flex; column-gap: 3.2rem; border-bottom: 1px solid var(--gray300);}
.qna-write > li > h3 {width: 8rem; height: 4.4rem; display: flex; align-items: center; font-size: 1.4rem; font-weight: 500;}
.qna-write > li > *:not(h3) {flex: 1;}
.qna-write > li > textarea {padding: 1.2rem 0;}
.qna-write > li .num-count {height: fit-content;}

@media screen and (max-width: 1024px) {
    .qna-write {row-gap: 1.6rem;}
    .qna-write > li {flex-flow: column; row-gap: .4rem; align-items: initial; padding-bottom: 0;}
    .qna-write > li > h3 {width:100%; height: fit-content; font-size: 1.2rem;}
    .qna-write > li > *:not(h3) {flex: initial;}
    .qna-write > li > textarea {padding: 0;}
    .qna-write > li .flex-input { margin: .8rem 0;}
    .qna-write > li .num-count {height: fit-content; margin: .8rem 0;}
}


/* 기획전 */
.event-list {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 4rem 2rem;}
.event-list > li {display: flex; flex-flow: column; row-gap: 2.4rem; cursor: pointer;}
.event-list > li .img {overflow: hidden; border-radius: .8rem;}
.event-list > li .img img {width: 100%; transition: transform cubic-bezier(0.4,0,0.2,1) .5s; transform: scale(1.005);}
.event-list > li .info {display: flex; flex-flow: column; row-gap: 1.6rem;}
.event-list > li .info > h2 {font-size: 3.2rem; font-weight: 600; line-height: 1.6; word-break: keep-all;}
.event-list > li .info > p {font-size: 2rem; font-weight: 500;}

.event-list > li:hover .img img {transform: scale(1.03);}

@media screen and (max-width: 1024px) {
    .event-list {grid-template-columns: repeat(1, 1fr); grid-gap: 4rem 2rem;}
    .event-list > li {row-gap: 1.6rem;}
    .event-list > li .img {width: 100vw; margin: 0 -1.6rem; border-radius: 0;}
    .event-list > li .info {row-gap: .8rem;}
    .event-list > li .info > h2 {font-size: 1.8rem;}
    .event-list > li .info > p {font-size: 1.4rem;}
}

/* 고객센터 */
.customer-guide {display: flex; flex-flow: column; row-gap: 4rem; align-items: center; margin-bottom: 8rem;}
.customer-guide > h2 {text-align: center; font-size: 4rem; font-weight: 500; line-height: 1.6;}
.customer-guide > h2 > span {font-weight: 700;}
.customer-guide > ul {width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; column-gap: 1.2rem;}
.customer-guide > ul > li {width: calc((100% - 1.2rem) / 2); height: 12rem; border-radius: 1.2rem; background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; flex-flow: column; row-gap: 1rem; padding: 3.2rem;}
.customer-guide > ul > li > p {font-size: 1.6rem; font-weight: 500;}
.customer-guide > ul > li > h3 {font-size: 2.4rem; font-weight: 700;}
.customer-guide > ul > li.wir {background-image: url(/assets/img/customer-wir-d43be70a12ea6fda1df4d6064f1b112b.svg);}
.customer-guide > ul > li.kakao {background-image: url(/assets/img/customer-kakao-dd86116de487af0d421c6985a09ae2dc.svg);}

@media screen and (max-width: 1024px) {
    .customer-guide {margin-bottom: 4rem;}
    .customer-guide > h2 {font-size: 2rem;}
    .customer-guide > ul {flex-flow: column; row-gap: 1.2rem;}
    .customer-guide > ul > li {width: 100%; height: 9rem; row-gap: .8rem; padding: 2.4rem; background-position: center right;}
    .customer-guide > ul > li > p {font-size: 1.2rem;}
    .customer-guide > ul > li > h3 {font-size: 2rem;}
}

/* 고객센터 > FAQ */
.board-table thead th {background-color: var(--gray100);}
.board-table tbody td {cursor: pointer;}
.board-table .answer {background-color: var(--gray100);}
.board-table .answer td {text-align: left;}
.board-table .answer td ul {display: flex; flex-flow: column; row-gap: 2rem;}
.board-table .answer td ul > li > h3 {font-size: 1.4rem; font-weight: 500; line-height: 1.6; word-break: keep-all;}
.board-table .answer td ul > li > h3::before {content: 'Q.'; width: 3rem; font-size: 1.4rem; font-weight: 500; line-height: 1.6; display: inline-block;}
.board-table .answer td ul > li > h3 + p {margin-left: 3rem; padding-left: 0;}
.board-table .answer td ul > li > h3 + p::before {content: none;}
.board-table .answer td ul > li > p {font-size: 1.4rem; color: var(--gray700); line-height: 1.6; word-break: keep-all; position: relative; padding-left: 3rem;}
.board-table .answer td ul > li > p::before {content: 'A.'; width: 3rem; font-size: 1.4rem; font-weight: 500; color: var(--gray900); line-height: 1.6; display: inline-block; position: absolute; left: 0;}
.board-table .label {margin: 0 auto;}

.board-title {text-align: left;}
.board-title * {vertical-align: middle; display: inline-block; margin-right: .4rem;}
.board-title * + * {margin-left: .4rem;}
.board-title .new {display: inline-flex; width: 1.8rem; height: 1.8rem; border-radius: .2rem; background-color: #CC0300; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 500; color: #ffffff;}

@media screen and (max-width: 1024px) {
    .board-table .answer td {padding: 1.4rem;}
    .board-table .answer td ul {row-gap: 1.2rem;}
    .board-table .answer td ul > li > h3::before {width: 2rem;}
    .board-table .answer td ul > li > h3 + p {margin-left: 2rem;}
    .board-table .answer td ul > li > p {padding-left: 2rem;}
    .board-table .answer td ul > li > p::before {width: 2rem;}
}

/* 고객센터 > 1:1 문의 */
* + .terms-wrap {margin-top: 3.2rem;}
.terms-wrap {display: flex; flex-flow: column; row-gap: 1.2rem;}
.terms-wrap > h3 {font-size: 1.6rem; font-weight: 600;}
.terms-wrap > div {width: 100%; padding: 1.6rem; background-color: var(--gray200); font-size: 1.4rem; line-height: 1.6; color: var(--gray700);}
.terms-wrap .terms {margin-top: 0;}

@media screen and (max-width: 1024px) {
    .terms-wrap > h3 {font-size: 1.4rem;}
    .terms-wrap > div {padding: 1.2rem;}
}

/* 고객센터 > 대량 구매 문의 */
.bulk-wrap {padding: 10rem; background-color: var(--gray100); border-radius: .8rem; display: flex; flex-flow: column; row-gap: 4rem; align-items: center; justify-content: center;}
.bulk-wrap > p {text-align: center; font-size: 3.2rem; font-weight: 500; line-height: 1.6;}

@media screen and (max-width: 1024px) {
    .bulk-wrap {padding: 3.6rem 2rem; row-gap: 1.2rem;}
    .bulk-wrap > p {font-size: 1.6rem;}
}

/* 고객센터 > 사용설명서 */
.down-list {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 4rem 2rem; align-items: center;}
.down-list > li {display: flex; flex-flow: column; row-gap: 2.4rem; cursor: pointer; height: 100%; justify-content: space-between; }
.down-list > li .img {overflow: hidden; border-radius: .8rem; position: relative; display: flex; align-items: center; justify-content: center;}
.down-list > li .img::before {content: ''; background-color: var(--black); opacity: 0; transition: opacity .3s; width: 100%; height: 100%; position: absolute;}
.down-list > li .img::after {content: ''; background-image: url(/assets/img/ico/ic-download-0adc4e8fcb6d51af0761f73a7b55c015.svg); background-repeat: no-repeat; background-size: cover; background-position: center; opacity: 0; transition: opacity .3s; width: 4.8rem; height: 4.8rem; position: absolute;}
.down-list > li .img img {width: 100%; height: 100%;}
.down-list > li .info {display: flex; flex-flow: column; row-gap: 1.2rem;}
.down-list > li .info > h2 {font-size: 2rem; font-weight: 600;}
.down-list > li .info > p {font-size: 1.6rem; font-weight: 500;}

.down-list > li:hover .img::before {opacity: .6;}
.down-list > li:hover .img::after {opacity: 1;}

.down-list.type02 {grid-template-columns: repeat(4, 1fr);}

@media screen and (max-width: 1024px) {
    .down-list {grid-template-columns: repeat(1, 1fr);}
    .down-list > li {row-gap: 1.6rem;}
    .down-list > li .img {width: 100vw; margin: 0 -1.6rem; border-radius: 0;}
    .down-list > li .img::after {width: 3.6rem; height: 3.6rem;}
    .down-list > li .info {row-gap: .8rem;}
    .down-list > li .info > h2 {font-size: 1.4rem;}

    .down-list.type02 {grid-template-columns: repeat(2, 1fr);}
    .down-list.type02 .img {width: 100%; margin: 0;}

}


.manual-cont iframe {width: 100%; height: 60rem;}

@media screen and (max-width: 1024px) {
    .manual-cont iframe {width: 100%; height: 52vw;}
}

/* 고객센터 > 공지사항 */
.notice-list {border-top: 1px solid var(--black);}
.notice-list > li {min-height: 8.4rem; padding: 1rem 0; display: flex; align-items: center; justify-content: space-between; column-gap: 10rem; cursor: pointer; border-bottom: 1px solid var(--gray300);}
.notice-list > li > h3 {font-size: 2rem; font-weight: 600; flex: 1; line-height: 1.6;}
.notice-list > li > p {text-align: right; font-size: 2rem; font-weight: 500; width: 12rem;}

@media screen and (max-width: 1024px) {
    .notice-list > li {min-height: fit-content; padding: 2rem 0; flex-flow: column; row-gap: .8rem; align-items: initial;}
    .notice-list > li > h3 {font-size: 1.4rem;}
    .notice-list > li > p {text-align: left; font-size: 1.2rem; width: 100%; color: var(--gray700);}
}

/* 고객센터 > 공지사항 > 상세 */
.board-detail {display: flex; flex-flow: column; row-gap: 3.2rem;}
.board-detail .board-tit {display: flex; flex-flow: column; row-gap: 1rem; padding-bottom: 3.2rem; border-bottom: 1px solid var(--black);}
.board-detail .board-tit > span {font-size: 1.6rem; font-weight: 500; color: var(--blue70);}
.board-detail .board-tit > div {display: flex; align-items: center; justify-content: space-between; column-gap: 10rem;}
.board-detail .board-tit > div > h2 {font-size: 3.2rem; font-weight: 600; line-height: 1.6; word-break: keep-all;}
.board-detail .board-tit > div > p {text-align: right; width: 30rem; font-size: 2rem; font-weight: 500; color: var(--gray700);}
.board-detail .board-cont {border-bottom: 1px solid var(--gray300); padding-bottom: 3.2rem; display: flex; flex-flow: column; row-gap: 2.4rem;}
.board-detail .board-cont p {font-size: 1.6rem; line-height: 2; word-break: keep-all;}
.board-detail .board-cont img {width: 100%!important;}
.board-detail .board-cont iframe {width: 100%; height: 48vw; max-height: 70rem;}
.board-detail .board-file {display: flex; align-items: center; column-gap: 4rem; justify-content: space-between; margin-top: -.4rem; padding-bottom: 2.4rem; border-bottom: 1px solid var(--gray300);}
.board-detail .board-file > h3 {font-size: 1.6rem; font-weight: 500; color: var(--gray700); display: flex; align-items: center; column-gap: .6rem;}
.board-detail .board-file > ul {display: flex; flex-wrap: wrap; align-items: center; grid-gap: 1rem 2rem;}
.board-detail .board-file > ul > li {font-size: 1.6rem; font-weight: 500; cursor: pointer;}
.board-detail .board-file > ul > li:hover {text-decoration: underline;}

@media screen and (max-width: 1024px) {
    .board-detail {row-gap: 2.4rem;}
    .board-detail .board-tit {row-gap: 1rem; padding-bottom: 2.4rem;}
    .board-detail .board-tit > span {font-size: 1.2rem;}
    .board-detail .board-tit > div {flex-flow: column; row-gap: 1.6rem; align-items: initial;}
    .board-detail .board-tit > div > h2 {font-size: 1.8rem;}
    .board-detail .board-tit > div > p {text-align: left; width: 100%; font-size: 1.2rem;}
    .board-detail .board-cont {padding-bottom: 0; row-gap: 1.6rem; border-bottom: 0;}
    .board-detail .board-cont p {font-size: 1.4rem; line-height: 1.8;}
    .board-detail .board-cont iframe {height: 52vw;}
    .board-detail .board-file {flex-flow: column; row-gap: 1.2rem; align-items: initial; border-bottom: 0; padding-bottom: 0;}
    .board-detail .board-file > h3 {font-size: 1.2rem; column-gap: .4rem;}
    .board-detail .board-file > ul {flex-flow: column; align-items: initial;}
    .board-detail .board-file > ul > li {font-size: 1.4rem;}
}

/* 고객센터 > contact us */
.map-wrap {display: flex; flex-flow: column; row-gap: 1.6rem;}
.map-wrap iframe {width: 100%; height: 50rem;}
.map-wrap > ul {border-radius: .8rem; background-color: var(--gray100); padding: 3.2rem 0; display: grid; grid-template-columns: repeat(2, 1fr);}
.map-wrap > ul > li {padding: 0 3.2rem; display: flex; flex-flow: column; row-gap: 2.4rem;}
.map-wrap > ul > li + li {border-left: 1px solid var(--gray300);}
.map-wrap > ul > li > div {display: flex; flex-flow: column; row-gap: .8rem;}
.map-wrap > ul > li > div > h3 {font-size: 1.8rem; font-weight: 600; color: var(--gray700);}
.map-wrap > ul > li > div > p {font-size: 2rem; font-weight: 500; line-height: 1.4; word-break: keep-all;}
.map-wrap > ul > li > div > div {margin-top: 1.6rem; display: flex; align-items: center; column-gap: .8rem; font-size: 2rem; font-weight: 500;}
.map-wrap > ul > li > div > div > span {display: flex; align-items: center; justify-content: center; height: 2.4rem; width: fit-content; padding: 0 .8rem; background-color: #A81E31; border-radius: 2rem; font-size: 1.2rem; font-weight: 500; color: var(--white);}

@media screen and (max-width: 1024px) {
    .map-wrap iframe {width: 100%; height: 96vw;}
    .map-wrap > ul {padding: 3.2rem 2rem; grid-template-columns: repeat(1, 1fr); row-gap: 3.2rem;}
    .map-wrap > ul > li {padding: 0; row-gap: 3.2rem;}
    .map-wrap > ul > li + li {border-top: 1px solid var(--gray300); border-left: 0; padding-top: 3.2rem;}
    .map-wrap > ul > li > div > h3 {font-size: 1.4rem;}
    .map-wrap > ul > li > div > p {font-size: 1.8rem;}
    .map-wrap > ul > li > div > div {font-size: 1.8rem;}
}

/* 정품인증 서비스 */
.genuine {width: 40rem; margin-top: 6rem; display: flex; align-items: center; column-gap: 1.2rem; justify-content: center; border-bottom: 1px solid var(--gray300);}
.genuine > h2 {font-size: 1.4rem; font-weight: 500;}
.genuine > input {flex: 1;}
.genuine > button {width: fit-content; height: 2.8rem; border-radius: .4rem; padding: 0 1rem; font-size: 1.2rem; font-weight: 500; color: var(--blue70); border-color: var(--blue70); background-color: var(--white);}

.genuine-guide {width: 40rem; min-height: 6rem; padding: 2rem 3.2rem; margin-top: 2rem; border-radius: .4rem; background-color: var(--gray100); display: flex; align-items: center; justify-content: center; text-align: center; flex-flow: column; row-gap: 1.2rem; font-size: 1.4rem; font-weight: 600; color: var(--blue70); line-height: 1.4;}
.genuine-guide button {width: fit-content; height: 2.8rem; border-radius: .4rem; padding: 0 1rem; font-size: 1.2rem; font-weight: 500;}

.pop .genuine-guide {width: 100%;}

@media screen and (max-width: 1024px) {
    .genuine {width: 100%; margin-top: 4rem; grid-gap: .8rem 1.2rem; flex-wrap: wrap;}
    .genuine > h2 {font-size: 1.2rem; width: 100%;}

    .genuine-guide {width: 100%; padding: 2rem; margin-top: 1.2rem; text-align: center; line-height: 1.6; word-break: keep-all;}
}

/* 트레이닝 센터 */
.training-box {padding-top: 8rem;}
.training-box .img {width: 100%; border-radius: 4rem; overflow: hidden; margin-bottom: 4rem;}
.training-box .img img {width: 100%;}
.training-box > div > h2 {font-size: 3.2rem; font-weight: 700; color: var(--blue); text-align: center; margin-bottom: 2.8rem;}
.training-box > div > p {text-align: center; font-size: 2.4rem; font-weight: 500; line-height: 1.8;}
.training-box > div > p.font-green {font-weight: 700;}
.training-box > div > p + p {margin-top: 2rem;}

.training-box .reserve-banner {width: 100%; border-radius: 4rem; padding: 0 6rem; height: 36rem; display: flex; flex-flow: column; justify-content: center; row-gap: 3.6rem; background-image: url(/assets/img/training/training-img25-49517a7d5347adc4ee55ebfce6e9e7bb.png); background-repeat: no-repeat; background-size: cover; background-position: center;}
.training-box .reserve-banner > p {font-size: 4rem; font-weight: 800; color: #fff; text-align: left; line-height: 1.4;}
.training-box .reserve-banner > button {width: 25rem;}

.training-char {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 10rem; align-items: center; padding-top: 8rem;}
.training-char .img {overflow: hidden; border-radius: 4rem;}
.training-char .img img {width: 100%; opacity: .5; transition: opacity .3s;}
.training-char .desc > span {font-size: 2.4rem; font-weight: 700; color: var(--blue); margin-bottom: 2rem; display: flex; align-items: center; column-gap: .6rem;}
.training-char .desc > span > span {width: 2.2rem; height: 2.2rem; background-color: var(--blue); border-radius: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; color: var(--white);}
.training-char .desc > h2 {font-size: 5.2rem; font-weight: 800; color: var(--blue); line-height: 1.2;}
.training-char .desc > p {font-size: 2.4rem; font-weight: 500; line-height: 1.8; margin-top: 4rem;}
.training-char .desc > div {margin-top: 8rem;}
.training-char .desc > div > span {display: block; font-size: 2.4rem; font-weight: 700; color: var(--blue);}
.training-char .desc > div > p {font-size: 2.4rem; font-weight: 500; color: var(--blue); line-height: 1.4; margin-top: 1rem; height: 6.8rem;}

.training-char > div:nth-child(1) > * {text-align: right; justify-content: flex-end;}
.training-char .swiper-slide-active img {opacity: 1;}

@media screen and (max-width: 1200px) {
    .training-char .desc > h2 {word-break: keep-all;}
    .training-char .desc > h2 > br {display: none;}
    .training-char .desc > p {word-break: keep-all;}
    .training-char .desc > p > br {display: none;}
}
@media screen and (max-width: 1024px) {
    .training-box {padding-top: 2rem;}
    .training-box .img {height: 60vw; border-radius: 2rem; display: flex; align-items: center; justify-content: center; margin-bottom: 3.2rem;}
    .training-box .img img {width: initial; height: 100%;}
    .training-box > div > h2 {font-size: 2rem; margin-bottom: 1.6rem;}
    .training-box > div > p {font-size: 1.6rem; text-align: center; word-break: keep-all;}
    .training-box > div > p + p {margin-top: 1.2rem;}
    .training-box > div > p > br {display: none;}
    .training-box > div .font700 > br {display: block;}
    
    .training-box .training-swiper02 .img {width: 100%; height: fit-content;}
    
    .training-box .reserve-banner {border-radius: 2rem; padding: 4rem 3.2rem; height: 85vw; justify-content: space-between;}
    .training-box .reserve-banner > p {font-size: 2.4rem;}
    .training-box .reserve-banner > p > br {display: block;}
    .training-box .reserve-banner > button {width: 100%;}
    
    .training-char {grid-template-columns: repeat(1, 1fr); row-gap: 3.2rem; padding-top: 2rem;}
    .training-char .img {border-radius: 2rem; order: 1;}
    .training-char .desc {order: 2;}
    .training-char .desc > span {font-size: 1.8rem; margin-bottom: 1.2rem;}
    .training-char .desc > span > span {width: 2rem; height: 2rem; font-size: 1.4rem;}
    .training-char .desc > h2 {font-size: 3.2rem; line-height: 1.4;}
    .training-char .desc > h2 > br {display: block;}
    .training-char .desc > p {font-size: 1.6rem; margin-top: 3.2rem;}
    .training-char .desc > div {margin-top: 3.2rem;}
    .training-char .desc > div > span {font-size: 1.6rem;}
    .training-char .desc > div > p {font-size: 1.6rem; margin-top: .8rem; height: 4.6rem;}
    
    .training-char > div:nth-child(1) > * {text-align: left; justify-content: flex-start;}
}

/* 트레이닝 센터 > 예약하기 */
.training-banner {width: 100vw; margin-top: -6rem; height: calc(100vh - 11.6rem); background-image: url(/assets/img/training/training-img01-115ce05d57c0807f74043d6639f4289f.png); background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.training-banner > div {width: 100%; max-width: 132rem; height: 100%; padding: 0 2rem 14rem; margin: 0 auto; display: flex; flex-flow: column; justify-content: flex-end; color: #ffffff;}
.training-banner > div > * {width: 56rem; margin-left: auto;}
.training-banner > div > span {font-size: 2.4rem; color: #fff; font-weight: 800;}
.training-banner > div > h1 {margin-top: 1.6rem; font-size: 5.6rem; font-weight: 800; color: #fff; line-height: 1.2;}
.training-banner > div > p {margin-top: 4rem; font-size: 2.4rem; font-weight: 500; color: #fff; line-height: 1.6;}

.training-desc {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; column-gap: 10rem;}
.training-desc > li {display: flex; flex-flow: column; row-gap: 0;}
.training-desc > li > img {width: 100%; border-radius: 4rem; object-fit: cover; height: 40rem;}
.training-desc > li > p {font-size: 2.4rem; font-weight: 500; line-height: 1.8;}
.training-desc > li > p.font-green {font-weight: 700;}

@media screen and (max-width: 1200px) {
    .training-banner {margin-top: -3.6rem; height: calc(100vh - 6rem);}
    .training-desc > li > p {word-break: keep-all;}
    .training-desc > li > p > br {display: none;}
}
@media screen and (max-width: 1024px) {
    .training-banner {margin-top: -2.8rem;;}
    .training-banner > div {padding: 0 1.6rem 8rem;}
    .training-banner > div > * {width: 100%;}
    .training-banner > div > span {font-size: 1.8rem;}
    .training-banner > div > h1 {margin-top: 1rem; font-size: 3.2rem;}
    .training-banner > div > p {margin-top: 3.6rem; font-size: 1.6rem; word-break: keep-all;}
    .training-banner > div > p > br.block {display: none;}

    .training-desc {grid-template-columns: repeat(1, 1fr); row-gap: 2rem;}
    .training-desc > li {row-gap: 0;}
    .training-desc > li > img {border-radius: 2rem; height: 20rem;}
    .training-desc > li > p {font-size: 1.6rem; line-height: 1.8; word-break: keep-all;}
}

.calendar-wrap {margin-bottom: 2rem;}

.calendar-nav {height: 6rem; display: flex; align-items: center; justify-content: center; background-color: var(--gray100);}
.calendar-nav > ul {display: flex; align-items: center; justify-content: center; column-gap: 3.2rem;}
.calendar-nav > ul > li > p {font-size: 2rem; font-weight: 600;}
.calendar-nav-btn {width: 3.2rem; height: 3.2rem; border-radius: 100%; background-repeat: no-repeat; background-size: contain; background-position: center; cursor: pointer;}
.calendar-nav-btn.prev {background-image: url(/assets/img/ico/calendar-nav-prev-8084d8679cd96621b111bfe5c3fabdce.svg);}
.calendar-nav-btn.next {background-image: url(/assets/img/ico/calendar-nav-next-60ca4e99ae360c8aea9211b7f374c420.svg);}

.calendar-wrap .week {display: grid; grid-template-columns: repeat(7, 1fr);}
.calendar-wrap .week > li {height: 4.8rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 600; border-bottom: .2rem solid var(--gray900);}

.calendar-wrap .day {display: grid; grid-template-columns: repeat(7,1fr);}
.calendar-wrap .day > li {height: 10rem; display: flex; flex-flow: column; align-items: center; row-gap: 1.6rem; padding: 1.6rem 0; border-bottom: 1px solid var(--gray200); cursor: pointer; background-color: #E5EBFF;}
.calendar-wrap .day > li:not(:nth-of-type(7n+1)) {border-left: 1px solid var(--gray200);}
.calendar-wrap .day > li > span {font-size: 1.4rem; font-weight: 600;}
.calendar-wrap .day > li > p {/*height: 2.8rem; padding: 0 1.2rem; border: 1px solid var(--gray700); border-radius: 2rem;*/ display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-top: 1rem; font-weight: 500; color: #52597E;}

.calendar-wrap .day > li.prev > span,
.calendar-wrap .day > li.next > span {color: var(--gray300);}
.calendar-wrap .day > li.disabled {background-color: #F8F9FB; cursor: default;}
.calendar-wrap .day > li.disabled > span {color: var(--gray500);}
.calendar-wrap .day > li.active {background-color: #52597E;}
.calendar-wrap .day > li.active > span {color: var(--white);}
.calendar-wrap .day > li.active > p {color: var(--white); border-color: var(--white);}

.reservation-option {background-color: var(--gray100); padding: 3.2rem 3.2rem 2.4rem; display: flex; flex-flow: column; row-gap: 3.2rem;}
.reservation-option > ul {display: flex; flex-flow: column; row-gap: 2.4rem;}
.reservation-option > ul > li {display: flex; align-items: center; column-gap: 2.4rem;}
.reservation-option > ul > li > h2 {min-width: 6rem; font-size: 1.6rem; font-weight: 500; color: var(--gray700);}
.reservation-option > ul > li > p {font-size: 2rem; font-weight: 600;}
.reservation-option > p {font-size: 1.6rem; font-weight: 500; line-height: 1.6; word-break: keep-all;}
.reservation-option > button {margin: 0 auto;}

.reservation-notice {display: block;}
.reservation-notice img {width:100%; height: 100%;}
.reservation-notice .mobile {display: none;}
.reservation-notice .pc {display: block; margin-bottom: 6rem;}
@media screen and (max-width: 1024px) {
    .reservation-notice .mobile { display: block; margin-bottom: 4rem;}
    .reservation-notice .pc { display: none;}
}

@media screen and (max-width: 1024px) {
    .calendar-wrap {margin-bottom: 0;}
    
    .calendar-wrap .week {width: 100vw; margin: 0 -1.6rem;}
    .calendar-wrap .week > li {height: 3.2rem; font-size: 1.2rem; border-bottom-width: 1px;}
    
    .calendar-wrap .day {width: 100vw; margin: 0 -1.6rem;}
    .calendar-wrap .day > li {height: 7rem; row-gap: 1.2rem; padding: .6rem 0;}
    .calendar-wrap .day > li > span {font-size: 1.2rem; font-weight: 600;}
    .calendar-wrap .day > li > p {padding: 0; font-size: 1.3rem;}
    .calendar-wrap .day > li > p > span {display: none;}
    
    .reservation-option {width: 100vw; margin: 2rem -1.6rem 0; padding: 2rem 1.6rem; row-gap: 2rem;}
    .reservation-option > ul {display: flex; flex-flow: column; row-gap: 2.4rem;}
    .reservation-option > ul > li {flex-flow: column; row-gap: .8rem; align-items: initial;}
    .reservation-option > ul > li > h2 {font-size: 1.2rem;}
    .reservation-option > ul > li > p {font-size: 1.6rem;}
    .reservation-option > p {font-size: 1.2rem;}
    .reservation-option > button {margin: 0 auto;}
}

/* 미디어 */
.media-wrap {width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 4.8rem 2.4rem;}
.media-wrap > li {display: flex; flex-flow: column; row-gap: 1rem; cursor: pointer;}
.media-wrap > li .img {height: 17rem; border-radius: 1.2rem; overflow: hidden; display: flex; align-items: center; justify-content: center; background-repeat: no-repeat; background-size: cover; background-position: center;}
.media-wrap > li .desc {display: flex; flex-flow: column; row-gap: 1rem;}
.media-wrap > li .desc > h3 {font-size: 1.6rem; line-height: 1.6; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.media-wrap > li .desc > ul {display: flex; align-items: center; column-gap: .6rem;}
.media-wrap > li .desc > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.4rem; color: var(--gray700);}
.media-wrap > li .desc > ul > li + li::before {content: ''; width: 1px; height: .6rem; background-color: var(--gray400);}

@media screen and (max-width: 1024px) {
    .media-wrap {grid-template-columns: repeat(2, 1fr); grid-gap: 2.8rem 1.4rem;}
    .media-wrap.video {grid-template-columns: repeat(1, 1fr);}
    .media-wrap.video > li .img {height: 52vw;}

    .media-wrap > li {row-gap: 1.2rem;}
    .media-wrap > li .img {height: 32vw; border-radius: 1.2rem;}
    .media-wrap > li .desc {row-gap: 1rem;}
    .media-wrap > li .desc > h3 {font-size: 1.6rem;}
    .media-wrap > li .desc > ul {column-gap: .4rem;}
    .media-wrap > li .desc > ul > li {column-gap: .4rem; font-size: 1.2rem;}
}

/* 장바구니 */
.prod-summary {display: flex; align-items: center; column-gap: 2rem;}
.prod-summary > img {width: 30%; max-width: 16rem;}
.prod-summary > div {display: flex; flex-flow: column; align-items: flex-start; row-gap: .8rem;}
.prod-summary > div > h3 {font-size: 1.4rem; font-weight: 600; line-height: 1.4; word-break: keep-all; text-align: left;}
.prod-summary > div > p {font-size: 1.2rem; font-weight: 500; color: var(--gray700); margin: 0;}
.prod-summary > div > span {font-size: 1.4rem; font-weight: 500;}
.prod-summary > div > button {width: fit-content; height: 2.8rem; border-radius: .4rem; padding: 0 1rem; font-size: 1.2rem; border-color: var(--blue70); color: var(--blue70); background-color: var(--white);}

@media screen and (max-width: 1024px) {
    .prod-summary {column-gap: 1.2rem;}
    .prod-summary > img {width: 30%; min-width: 13rem;}
    .prod-summary > div {row-gap: .6rem;}
}

.order-payment {display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--black); border-bottom: 1px solid var(--gray300);}
.order-payment > li {display: flex; flex-flow: column; align-items: center; justify-content: center; position: relative; padding: 3rem 0; row-gap: 1.5rem;}
.order-payment > li > h3 {font-size: 1.6rem; font-weight: 500;}
.order-payment > li > p {font-size: 2.4rem; font-weight: 700; padding: 0; margin: 0;}
.order-payment > li + li::before {content: '+'; text-align: center; font-size: 2.4rem; width: 2.4rem; position: absolute; left: -1.2rem;}
.order-payment > li:last-child:before {content: '=';}

.order-payment + p {margin-top: 1.6rem; font-size: 1.3rem; font-weight: 500; color: #FF3529; line-height: 1.6; word-break: keep-all;}

@media screen and (max-width: 1024px) {
    .order-payment > li {height: 9.2rem; row-gap: 1.6rem;}
    .order-payment > li > h3 {font-size: 1.2rem;}
    .order-payment > li > p {font-size: 1.4rem;}
    .order-payment > li + li::before {font-size: 1.4rem; width: 1.4rem; left: -.7rem;}
    
    .order-payment + p {margin-top: 1.6rem; font-size: 1.3rem; font-weight: 500; color: #FF3529; line-height: 1.6; word-break: keep-all;}
    
}

/* 장바구니 > 주문서 작성/결제 */
.order-info {display: flex; column-gap: 4.8rem;}
.order-info .order {width: calc((100% - 4.8rem) * 0.7);}
.order-info .payment {width: calc((100% - 4.8rem) * 0.3); height: fit-content; padding: 3.2rem 2.4rem; border-radius: .4rem; box-shadow: .2rem .2rem 2rem 0 rgba(0, 0, 0, 0.08); position: sticky; top: 13.6rem;}
.order-info .payment > h3 {font-size: 2rem; font-weight: 600;}
.order-info .payment .receipt {margin-top: 1rem; margin-bottom: 2rem; border-top: 1px solid var(--black); border-bottom: 1px solid var(--gray300); padding-top: 2.4rem; display: flex; flex-flow: column; row-gap: 1.6rem;}
.order-info .payment .receipt > li {display: flex; align-items: center; justify-content: space-between;}
.order-info .payment .receipt > li > h4 {font-size: 1.4rem; color: var(--gray700);}
.order-info .payment .receipt > li > p {font-size: 1.4rem; font-weight: 600; margin: 0}
.order-info .payment .receipt .total {border-top: 1px solid var(--gray300); padding: 2rem 0;}
.order-info .payment .receipt .total > p {font-size: 2.4rem; font-weight: 700;}
.order-info .payment input + label > p {color: var(--gray700); margin: 0;}
.order-info .payment button {width: 100%; margin-top: 2rem;}

@media screen and (max-width: 1024px) {
    .order-info {flex-flow: column; row-gap: 6rem;}
    .order-info .order {width: 100%;}
    .order-info .payment {width: 100%; height: fit-content; padding: 0; border-radius: 0; box-shadow: initial; position: relative; top: initial; /*border-top: 1px solid var(--black);*/ border: none;}
    .order-info .payment > h3 {/*padding-top: 2.4rem;*/}
    .order-info .payment .receipt {padding-top: 2rem; row-gap: 1.2rem; margin-bottom: 1.6rem; border-bottom-color: var(--black);}
    .order-info .payment .receipt .total {border-top: 1px solid var(--gray300); padding: 2rem 0; margin-top: 0;}
    .order-info .payment .receipt .total > p {font-size: 2rem;}
}

.payment-wrap {display: flex; flex-flow: column; row-gap: 1.2rem; border-top: 1px solid var(--black); padding-top: 1.2rem;}
.payment-wrap > li {display: flex; align-items: center; border-bottom: 1px solid var(--gray300); padding-bottom: 1.2rem;}
.payment-wrap > li > h3 {font-size: 1.4rem; font-weight: 500; width: 10rem; height: 4.4rem; display: flex; align-items: center;}
.payment-wrap > li > p {font-size: 1.4rem; font-weight: 500;}
.payment-wrap > li > *:not(h3) {flex: 1;}

.payment-wrap .total {background-color: var(--gray100); text-align: center; position: relative; padding-bottom: 0;}
.payment-wrap .total > p {display: flex; align-items: center; justify-content: center; column-gap: 1.2rem;}
.payment-wrap .total::after {content: ''; width: 100%; background-color: var(--gray100); height: 1px; display: block; position: absolute; left: 0; bottom: -1px; z-index: 2;}

.payment-wrap .payment-detail {background-color: var(--gray100); padding: 0 1.2rem; position: relative; margin-top: -1.2rem;}
.payment-wrap .payment-detail::before {content: ''; width: 100%; height: 1px; position: absolute; top: -1px; left: 0; background-color: var(--gray100);}
.payment-wrap .payment-detail * {width: 100%;}

@media screen and (max-width: 1024px) {
    .payment-wrap {row-gap: 3rem; /*padding-top: 2rem;*/}
    .payment-wrap > li {flex-flow: column; row-gap: .4rem; align-items: initial; padding-bottom: 0;}
    .payment-wrap > li > h3 {font-size: 1.2rem; width: 100%; height: fit-content;}
    .payment-wrap > li > p {/*height: 4.4rem;*/ display: flex; align-items: center;}
    .payment-wrap > li .flex-input {margin-top: .8rem; padding-bottom: 1.6rem;}
    .payment-wrap > li > *:not(h3) {flex: initial;}
    
    .payment-wrap .total {/*margin-top: -2rem;*/}
    
    .payment-wrap .payment-detail { position: relative; margin-top: -2rem;}
}

.benefit {display: flex; flex-flow: column; row-gap: .6rem;}
.benefit > li {display: flex; align-items: center; column-gap: .8rem; font-size: 1.4rem; font-weight: 500;}
.benefit > li::before {width: 2rem; height: 2rem; border-radius: .2rem; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.2rem; font-weight: 500; color: #ffffff;}
.benefit > li.discount::before {content: 'ㅡ'; background-color: #236CD9;}
.benefit > li.save::before {content: 'M'; background-color: #C8102E;}

.benefit-use {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 1.2rem;}
.benefit-use > li {display: flex; align-items: center; column-gap: 1.2rem; font-size: 1.4rem; font-weight: 500;}
.benefit-use > li input[type="text"] {flex: 1;}
.benefit-use > li button {width: fit-content; height: 2.8rem; border-radius: .4rem; padding: 0 1rem; font-size: 1.2rem; border-color: var(--blue70); color: var(--blue70); background-color: var(--white); margin-left: auto;}
.benefit-use > li + li::before {content: ''; width: 1px; height: 2rem; background-color: var(--gray300);}

@media screen and (max-width: 1024px) {
    .benefit-use {grid-template-columns: repeat(1, 1fr); row-gap: .8rem; position: relative;}
    .benefit-use::after {content: ''; width: 100%; background-color: var(--white); height: 1px; display: block; position: absolute; left: 0; bottom: -1px; z-index: 2;}
    .benefit-use input[type="text"] {border-bottom: 1px solid var(--gray300);}
    .benefit-use > li + li::before {content: none;}
}

.payment-way {width: 100%; background-color: var(--gray100); border-radius: .8rem; padding: 2.4rem; display: flex; flex-flow: column; row-gap: 1.2rem; margin-top: 4rem;}
.payment-way > li {display: flex; align-items: center; justify-content: space-between;}
.payment-way > li > h2 {font-size: 2rem; font-weight: 600; padding-bottom: 2rem; width: 100%; border-bottom: 1px solid var(--black); margin-bottom: .8rem;}
.payment-way > li > h3 {font-size: 1.4rem; color: var(--gray700);}
.payment-way > li > p {font-size: 1.6rem; font-weight: 600;}

.pop .payment-way {background-color: transparent; border-top: 1px solid var(--black); border-bottom: 1px solid var(--gray300); padding: 1.6rem 0; margin-top: 0; border-radius: 0;}

@media screen and (max-width: 1024px) {
    .payment-way {padding: 2rem; margin-top: 2rem;}
    .payment-way > li > h2 {font-size: 1.6rem;}
    .payment-way > li > h3 {font-size: 1.2rem;}
    .payment-way > li > p {font-size: 1.4rem;}
}

/* 마이페이지 */
.mypage-wrap {display: flex; column-gap: 4.8rem;}
.mypage-wrap .menu {width: 20rem; height: fit-content; display: flex; flex-flow: column; row-gap: 2.4rem;}
.mypage-wrap .menu h1 {font-size: 2.4rem; font-weight: 600;}
.mypage-wrap .menu div {display: flex; flex-flow: column; row-gap: 2rem;}
.mypage-wrap .menu div + div {border-top: 1px solid var(--gray300); padding-top: 2.4rem;}
.mypage-wrap .menu div > h3 {font-size: 1.6rem; font-weight: 600;}
.mypage-wrap .menu div > ul {display: flex; flex-flow: column; row-gap: 1.6rem;}
.mypage-wrap .menu div > ul > li > a {font-size: 1.4rem; font-weight: 500;}
.mypage-wrap .menu div > ul > li.active > a {font-weight: 600;}

.mypage-wrap .mypage {width: calc(100% - 20rem - 4.8rem);}

@media screen and (max-width: 1024px) {
    .mypage-wrap {flex-flow: column; row-gap: 4rem;}
    .mypage-wrap .menu {width: 100%; row-gap: 2rem;}
    .mypage-wrap .menu h1 {font-size: 2rem;}
    .mypage-wrap .menu div {row-gap: 2rem;}
    .mypage-wrap .menu div + div {padding-top: 2rem;}
    .mypage-wrap .menu div > h3 {font-size: 1.6rem; background-image: url(/assets/img/ico/ic-arrow-down-20-fb8701a981f92718548b609f4e8f4c83.svg); background-repeat: no-repeat; background-position: top -.2rem right; background-size: 2rem; cursor: pointer;}
    .mypage-wrap .menu div > ul {display: none;}

    .mypage-wrap .menu div.active > ul {display: flex; row-gap: .8rem;}
    .mypage-wrap .menu div.active > ul > li > a {font-size: 1.6rem; padding: .6rem 0; display: block; width: 100%; color: var(--gray700);}
    .mypage-wrap .menu div.active > ul > li.active > a {color: var(--black);}
    .mypage-wrap .menu div.active > h3 {background-image: url(/assets/img/ico/ic-arrow-up-20-79acf37aef71c59ed2ac02ed067ac285.svg);}
    
    .mypage-wrap .mypage {width: 100%;}
}

.my-summary {padding: 4.4rem; border-radius: .8rem; background-color: #dfeaf8; display: flex; justify-content: space-between; align-items: flex-start;}
.my-summary > div {display: flex; flex-flow: column; row-gap: 1.2rem;}
.my-summary > div > h2 {font-size: 3.2rem; color: var(--blue);}
.my-summary > div > h2 > span {font-weight: 700;}
.my-summary > div > p {font-size: 1.4rem; font-weight: 500; color: var(--blue);}
.my-summary > ul {display: grid; grid-template-columns: repeat(3, 1fr);}
.my-summary > ul > li {padding: 0 3.6rem 0 2.4rem; display: flex; flex-flow: column; justify-content: space-between; align-items: flex-start;}
.my-summary > ul > li + li {border-left: 1px solid #fff;}
.my-summary > ul > li:last-child {padding-right: 0;}
.my-summary > ul > li > h3 {font-size: 1.4rem; font-weight: 600; line-height: 1.2;}
.my-summary > ul > li > p {font-size: 3.2rem; font-weight: 700; margin-top: 6rem;  color: var(--blue);}

@media screen and (max-width: 1024px) {
    .my-summary {padding: 2.4rem 2rem; flex-flow: column; row-gap: 2.4rem;}
    .my-summary > div {row-gap: .8rem;}
    .my-summary > div > h2 {font-size: 2rem;}
    .my-summary > ul {width: 100%; border-top: 1px solid rgba(255,255,255,.2); padding-top: 2.4rem;}
    .my-summary > ul > li {padding: 0; padding-right: 2rem; display: flex; flex-flow: column; justify-content: space-between; align-items: flex-start;}
    .my-summary > ul > li + li {padding-left: 2rem;}
    .my-summary > ul > li > h3 {width: 100%; word-break: keep-all;}
    .my-summary > ul > li > p {font-size: 2.4rem; margin-top: 1.2rem; margin-left: auto;}
}

.order-history {display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--black);}
.order-history > div {padding: 2rem; display: flex; justify-content: space-between; border-bottom: 1px solid var(--gray300);}
.order-history > div:nth-child(1) {grid-column: 1 / span 3; flex-flow: column; row-gap: 2rem;}
.order-history > div:nth-of-type(n+3) {border-left: 1px solid var(--gray300);}
.order-history > div h3 {font-size: 1.4rem; font-weight: 500; color: var(--gray700);}
.order-history > div > p {font-size: 1.4rem; font-weight: 600; margin-left: auto;}
.order-history > div > ul {display: flex; align-items: center; justify-content: center;}
.order-history > div > ul > li {width: calc(100% / 6); display: flex; flex-flow: column; row-gap: 1.6rem; align-items: center; justify-content: center; position: relative;}
.order-history > div > ul > li > p {font-size: 3.2rem; font-weight: 700;}
.order-history > div > ul > li + li::before {content: ''; width: 2rem; height: 2rem; background-image: url(/assets/img/ico/ic-arrow-right-20-7461a2e569d540585a0bb83b185125b2.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; left: -1rem;}

@media screen and (max-width: 1024px) {
    .order-history {display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--black);}
    .order-history > div {padding: 2rem 1.2rem; row-gap: 1rem;}
    .order-history > div:nth-child(1) {grid-column: 1 / span 3; padding: 0;}
    .order-history > div > p {font-size: 1.6rem;}
    .order-history > div > ul {flex-wrap: wrap;}
    .order-history > div > ul > li {width: calc(100% / 3); height: 7.8rem; row-gap: .8rem;}
    .order-history > div > ul > li > p {font-size: 2.4rem;}
    .order-history > div > ul > li + li::before {width: 1.6rem; height: 1.6rem; left: -.8rem;}
    .order-history > div > ul > li:nth-child(4)::before {content: none;}
    
    .order-history-table ul:not(.num-count) {display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.4rem; border-bottom: 1px solid var(--gray300); margin-bottom: 1.4rem;}
    .order-history-table ul:not(.num-count) > li {font-size: 1.4rem; font-weight: 500; color: var(--gray700);}
    .order-history-table ul:not(.num-count) > li > p {color: var(--gray900);}
    .order-history-table .prod-summary + .prod-summary {margin-top: 1.4rem; border-top: 1px dashed var(--gray300); padding-top: 1.4rem;}
    .order-history-table .button {display: flex; align-items: center; grid-gap: .8rem; flex-wrap: wrap; justify-content: flex-end; margin-top: 1.4rem;}
    .order-history-table .button button {width: fit-content; height: 2.8rem; border-radius: .4rem; padding: 0 1rem; font-size: 1.2rem; border-color: var(--blue70); color: var(--blue70); background-color: var(--white);}
    .order-history-table .button  + .prod-summary {margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px dashed var(--gray300);}
    .order-history-table .num-count {margin: 0;}
}


.program-history {display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--black);}
.program-history > div {padding: 2rem; display: flex; justify-content: space-between; border-bottom: 1px solid var(--gray300);}
.program-history > div:nth-child(1) {grid-column: 1 / span 3; flex-flow: column; row-gap: 2rem;}
.program-history > div:nth-of-type(n+3) {border-left: 1px solid var(--gray300);}
.program-history > div h3 {font-size: 1.4rem; font-weight: 500; color: var(--gray700);}
.program-history > div > p {font-size: 1.4rem; font-weight: 600; margin-left: auto;}
.program-history > div > ul {display: flex; align-items: center; justify-content: center;}
.program-history > div > ul > li {width: calc(100% / 5); display: flex; flex-flow: column; row-gap: 1.6rem; align-items: center; justify-content: center; position: relative;}
.program-history > div > ul > li > p {font-size: 3.2rem; font-weight: 700;}
/*.program-history > div > ul > li + li::before {content: ''; width: 2rem; height: 2rem; background-image: url(/assets/img/ico/ic-arrow-right-20-7461a2e569d540585a0bb83b185125b2.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; left: -1rem;}*/
.program-history > div > ul > li + li::before {content: ''; width: 1px; height: 55px; position: absolute; left: -1rem; background-color: var(--gray300)}

@media screen and (max-width: 1024px) {
    .program-history {display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--black);}
    .program-history > div {padding: 2rem 1.2rem; row-gap: 1rem;}
    .program-history > div:nth-child(1) {grid-column: 1 / span 3; padding: 0;}
    .program-history > div > p {font-size: 1.6rem;}
    .program-history > div > ul {flex-wrap: wrap;}
    .program-history > div > ul > li {width: calc(100% / 3); height: 7.8rem; row-gap: .8rem;}
    .program-history > div > ul > li > p {font-size: 2.4rem;}
    .program-history > div > ul > li + li::before {width: 1.6rem; height: 1.6rem; left: -.8rem;}
    .program-history > div > ul > li:nth-child(4)::before {content: none;}

    .program-history-table ul:not(.num-count) {display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.4rem; border-bottom: 1px solid var(--gray300); margin-bottom: 1.4rem;}
    .program-history-table ul:not(.num-count) > li {font-size: 1.4rem; font-weight: 500; color: var(--gray700);}
    .program-history-table ul:not(.num-count) > li > p {color: var(--gray900);}
    .program-history-table .prod-summary + .prod-summary {margin-top: 1.4rem; border-top: 1px dashed var(--gray300); padding-top: 1.4rem;}
    .program-history-table .button {display: flex; align-items: center; grid-gap: .8rem; flex-wrap: wrap; justify-content: flex-end; margin-top: 1.4rem;}
    .program-history-table .button button {width: fit-content; height: 2.8rem; border-radius: .4rem; padding: 0 1rem; font-size: 1.2rem; border-color: var(--blue70); color: var(--blue70); background-color: var(--white);}
    .program-history-table .button  + .prod-summary {margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px dashed var(--gray300);}
    .program-history-table .num-count {margin: 0;}
}

.recent-wrap {border-top: 1px solid var(--black); }
.recent-wrap > li {padding: 1.4rem 0; border-bottom: 1px solid var(--gray300); cursor: pointer;}
.recent-wrap > li .prod-summary > img {max-width: 10rem;}

.recent-wrap .empty {height: 10rem; display: flex; align-items: center; justify-content: center;}
.recent-wrap .empty > p {font-size: 1.4rem; color: var(--gray600);}

@media screen and (max-width: 1024px) {
    .recent-wrap > li {padding: .8rem 0;}
    .recent-wrap > li .prod-summary > img {max-width: 8rem; min-width: initial;}
}


/* 마이페이지 > 주문 목록/배송 조회 */
.order-filter {background-color: var(--gray100); padding: 2rem; border-radius: .8rem; display: flex; flex-wrap: wrap; grid-gap: 2rem; align-items: center; margin-bottom: 3.2rem;}
.order-filter > li {display: flex; align-items: center; column-gap: 1.2rem;}
.order-filter > li:nth-child(2) {flex: 1;}
.order-filter > li:nth-child(2) > * {width: 100%;}
.order-filter > li > h3 {font-size: 1.4rem; font-weight: 600;}
.order-filter button {width: fit-content; min-width: 10rem; height: 4.4rem; background-color: var(--blue); color: #ffffff; font-size: 1.4rem;}

.order-table button {width: fit-content; height: 2.8rem; border-radius: .4rem; padding: 0 1rem; border-color: var(--blue70); background-color: var(--white); color: var(--blue70); font-size: 1.2rem; margin: 0 auto;}
.order-table * + button {margin: .6rem auto 0;}
.order-table .default {display: flex; align-items: center; justify-content: center; margin: .2rem auto 0; font-size: 1.1rem; width: fit-content; height: 1.8rem; padding: 0 .4rem; background-color: #daf1ff; color: var(--blue); border-radius: .2rem;}

@media screen and (max-width: 1024px) {
    .order-filter {flex-flow: column;}
    .order-filter > li {flex-flow: column; row-gap: 1.2rem; align-items: initial; width: 100%;}
    .order-filter > li:nth-child(2) {flex: initial;}
    .order-filter button {width: 100%;}
}

/* 마이페이지 > 주문 목록/배송 조회 */
.order-list {border-top: 1px solid var(--black);}
.order-list > li {border-bottom: 1px solid var(--gray300);}
.order-list > li button {width: fit-content; height: 2.8rem; border-radius: .4rem; padding: 0 1rem; border-color: var(--blue70); background-color: var(--white); color: var(--blue70); font-size: 1.2rem;}
.order-list > li .data {height: 4.6rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gray300);}
.order-list > li .data > ul {display: flex; align-items: center; column-gap: .6rem;}
.order-list > li .data > ul > li {font-size: 1.4rem; display: flex; align-items: center; column-gap: .6rem;}
.order-list > li .data > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray300);}
.order-list > li .data > div {display: flex; align-items: center; column-gap: .8rem;}
.order-list > li .data > div > button {border-color: var(--gray700); color: var(--gray700);}
.order-list > li .prod {padding: 1.6rem 0; display: flex; align-items: center; justify-content: space-between;}
.order-list > li .prod + .prod {border-top: 1px dashed var(--gray300);}

@media screen and (max-width: 1024px) {
    .order-list > li .data {height: fit-content; padding: 1.6rem 0; flex-flow: column; row-gap: 1.6rem; align-items: initial;}
    .order-list > li .data > div {grid-gap: .4rem; flex-wrap: wrap;}
    .order-list > li .prod {flex-flow: column; row-gap: 1.6rem;}
    .order-list > li .prod .button {margin-left: auto;}
}

/* 마이페이지 > 주문 목록/배송 조회 > 주문 취소 */
.cancle-wrap {display: flex; flex-flow: column; row-gap: 3.2rem;}
.cancle-wrap > li {display: flex; flex-flow: column; row-gap: 1.2rem;}
.cancle-wrap > li > h3 {font-size: 1.8rem; font-weight: 600;}
.cancle-wrap > li > textarea {border-bottom: 1px solid var(--gray300); min-height: 16rem;}
.cancle-wrap > li .account {display: grid; grid-template-columns: 1fr 1fr 3fr; column-gap: 1.4rem;}
.cancle-wrap > li .account > * {border-bottom: 1px solid var(--gray300);}
.cancle-wrap > li .receipt {display: flex; flex-flow: column; row-gap: 1.2rem; margin-top: .4rem;}
.cancle-wrap > li .receipt > li {display: flex; align-items: center; justify-content: space-between;}
.cancle-wrap > li .receipt > li > h4 {font-size: 1.4rem; font-weight: 500;}
.cancle-wrap > li .receipt > li > p {font-size: 1.4rem; font-weight: 500;}
.cancle-wrap > li .receipt > li.total {border-top: 1px solid var(--gray300); padding-top: 1.2rem;}
.cancle-wrap > li .receipt > li.total > h4 {font-size: 1.4rem; font-weight: 600; color: var(--blue70);}
.cancle-wrap > li .receipt > li.total > p {font-size: 1.6rem; font-weight: 700; color: var(--blue70);}
.cancle-wrap > li .receipt > li.detail {background-color: var(--gray100); height: 4.4rem; padding: 0 1.6rem;}
.cancle-wrap > li .receipt > li.detail > h4 {color: var(--gray700);}
.cancle-wrap > li .receipt > li.detail > p {color: var(--gray900); font-weight: 600;}
.cancle-wrap > li .receipt > li > span {font-size: 1.2rem; font-weight: 500; color: var(--gray700);}

@media screen and (max-width: 1024px) {
    .cancle-wrap .flex-radio-box {display: grid; grid-template-columns: repeat(2, 1fr);}
    .cancle-wrap .flex-radio-box input[type="radio"] + label {width: 100%;}
    .cancle-wrap > li > textarea {min-height: 8rem;}
    .cancle-wrap > li .account {display: flex; flex-wrap: wrap; grid-gap: .8rem 1.2rem;}
    .cancle-wrap > li .account > *:nth-child(1) {width: 100%;}
    .cancle-wrap > li .account > *:nth-child(2) {width: 10rem;}
    .cancle-wrap > li .account > *:nth-child(3) {flex: 1;}
}

/* 마이페이지 > 주문 목록/배송 조화 > 교환/반품 */
.qna-write.exchange {row-gap: 3.2rem;}
.qna-write.exchange > li {flex-flow: column;}
.qna-write.exchange > li > h3 {height: fit-content; width: 100%;}
.qna-write.exchange > li > *:not(h3) {flex: initial;}
.qna-write.exchange > li .flex-input {height: 4.4rem;}
.qna-write.exchange > li .flex-input.ver {height: fit-content; margin: 1.2rem 0;}

.qna-write.exchange > li.option {border-bottom: 0; display: flex; flex-flow: column;}
.qna-write.exchange > li.option > ul {display: flex; column-gap: 3.2rem; align-items: flex-end; border-bottom: 1px solid var(--gray300);}
.qna-write.exchange > li.option > ul > li {display: flex; flex-flow: column;}
.qna-write.exchange > li.option > ul > li:nth-child(1):nth-last-child(4),
.qna-write.exchange > li.option > ul > li:nth-child(1):nth-last-child(4) ~ li:nth-child(3) {width: calc((100% - 9.6rem - 2.4rem - 4.2rem) / 2);}
.qna-write.exchange > li.option > ul > li:nth-child(1):nth-last-child(3) {width: calc(100% - 6.4rem - 2.4rem - 4.2rem);}
.qna-write.exchange > li.option > ul > li > h3 {font-size: 1.4rem; font-weight: 500;}
.qna-write.exchange > li.option > ul > li > input {width: 2.4rem; text-align: center;}
.qna-write.exchange > li.option > ul > li > button {width: fit-content; height: 2.8rem; border-radius: .4rem; padding: 0 1rem; margin-bottom: .8rem; border-color: var(--blue70); background-color: var(--white); color: var(--blue70); font-size: 1.2rem;}
.qna-write.exchange > li.option > ul + ul > li > button {border-color: var(--gray600); color: var(--gray600);}

.qna-write.exchange .account {border: 0;}
.qna-write.exchange .account > div {display: grid; grid-template-columns: 1fr 1fr 3fr; grid-gap: .6rem 1.4rem;}
.qna-write.exchange .account > div > * {border-bottom: 1px solid var(--gray300);}

@media screen and (max-width: 1024px) {
    .qna-write.exchange {row-gap: 2rem;}
    .qna-write.exchange > li .flex-input {height: fit-content;}
    .qna-write.exchange > li .flex-input.ver {margin: .8rem 0;}
    
    .qna-write.exchange > li.option > ul {column-gap: 1.2rem;}
    .qna-write.exchange > li.option > ul > li {display: flex; flex-flow: column;}
    .qna-write.exchange > li.option > ul > li:nth-child(1):nth-last-child(4),
    .qna-write.exchange > li.option > ul > li:nth-child(1):nth-last-child(4) ~ li:nth-child(3) {width: calc((100% - 3.6rem - 2.4rem - 4.4rem) / 2);}
    .qna-write.exchange > li.option > ul > li:nth-child(1):nth-last-child(3) {width: calc(100% - 2.4rem - 2.4rem - 4.4rem);}
    .qna-write.exchange > li.option > ul > li > h3 {font-size: 1.2rem;}
    .qna-write.exchange > li.option > ul > li > select {background-size: 1.2rem;}

    .qna-write.exchange .account > div {display: flex; flex-wrap: wrap; grid-gap: .8rem 1.2rem;}
    .qna-write.exchange .account > div > *:nth-child(1) {width: 100%;}
    .qna-write.exchange .account > div > *:nth-child(2) {width: 10rem;}
    .qna-write.exchange .account > div > *:nth-child(3) {flex: 1;}
}

/* 마이페이지 > 찜리스트 */
.save-list {border-top: 1px solid var(--black);}
.save-list > li {padding: 1.6rem 0; display: flex; align-items: center; column-gap: 2rem; border-bottom: 1px solid var(--gray300);}
.save-list > li .desc {display: flex; flex-flow: column; row-gap: .8rem;}
.save-list > li .desc > span {font-size: 1.2rem; font-weight: 600; color: var(--gray700); display: flex; align-items: center; column-gap: .6rem;}
.save-list > li .desc > span .default {display: flex; align-items: center; justify-content: center; font-size: 1.1rem; width: fit-content; height: 1.8rem; padding: 0 .4rem; background-color: #daf1ff; color: var(--blue); border-radius: .2rem;}
.save-list > li .desc > p {font-size: 1.4rem; font-weight: 500; word-break: keep-all; line-height: 1.4;}
.save-list > li .desc > ul {display: flex; align-items: center; column-gap: .6rem;}
.save-list > li .desc > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.2rem; color: var(--gray700);}
.save-list > li .desc > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray300);}
.save-list > li .button {display: flex; flex-flow: column; row-gap: .4rem;}
.save-list > li .button button {width: 5.2rem; height: 2.8rem; font-size: 1.2rem;}
.save-list > li .button button + button {background-color: transparent; color: var(--blue); border-color: var(--blue);}

.save-list .empty {height: 10rem; display: flex; align-items: center; justify-content: center;}
.save-list .empty > p {font-size: 1.4rem; color: var(--gray600);}

/* 마이페이지 > 쿠폰 */
.coupon-list {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1.6rem;}
.coupon-list > li {border: 1px solid var(--gray300); border-radius: .4rem; padding: 1.6rem; display: flex; flex-flow: column; row-gap: 1.2rem;}
.coupon-list > li .info {display: flex; column-gap: 1.2rem; font-size: 1.6rem; font-weight: 600; color: var(--blue70); line-height: 1.6;}
.coupon-list > li .info.disabled {display: flex; column-gap: 1.2rem; font-size: 1.6rem; font-weight: 600; color: #BDBEC0; line-height: 1.6;}
.coupon-list > li .info > span {display: flex; align-items: center; justify-content: center; width: fit-content; height: 2.6rem; padding: 0 .6rem; border-radius: .2rem; background-color: var(--blue70); font-size: 1.4rem; font-weight: 500; color: #ffffff; white-space: nowrap;}
.coupon-list > li .info.disabled > span {display: flex; align-items: center; justify-content: center; width: fit-content; height: 2.6rem; padding: 0 .6rem; border-radius: .2rem; background-color:#BDBEC0 ; font-size: 1.4rem; font-weight: 500; color: #ffffff; white-space: nowrap;}
.coupon-list > li .desc {border-top: 1px dashed var(--gray300); padding-top: 1.6rem; display: flex; flex-flow: column; row-gap: 1rem;}
.coupon-list > li .desc > p {font-size: 1.4rem; font-weight: 500;}
.coupon-list > li .desc > div {display: flex; justify-content: flex-start; gap: 2px; font-size: 1.4rem; font-weight: 500;}
.coupon-list > li .desc > span {font-size: 1.2rem; color: var(--gray700);}
.coupon-list > li.end .info {color: var(--gray700);}
.coupon-list > li.end .info > span {background-color: var(--gray500);}

@media screen and (max-width: 1024px) {
    .coupon-list {grid-template-columns: repeat(1, 1fr); grid-gap: 1.2rem;}
}

/* 마이페이지 > 마일리지 */
.point-list {border-top: 1px solid var(--black);}
.point-list > li {border-bottom: 1px solid var(--gray300); padding: 2rem 0; display: flex; column-gap: 4rem;}
.point-list > li > p {width: 9rem; font-size: 1.6rem; font-weight: 600;}
.point-list > li .desc {flex: 1; display: flex; flex-flow: column; row-gap: 1rem;}
.point-list > li .desc > h3 {font-size: 1.6rem; font-weight: 600;}
.point-list > li .desc > ul {display: flex; align-items: center; column-gap: .6rem;}
.point-list > li .desc > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.2rem; color: var(--gray700);}
.point-list > li .desc > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray300);}
.point-list > li .point {display: flex; flex-flow: column; row-gap: 1rem; align-items: flex-end;}
.point-list > li .point > p {font-size: 1.6rem; font-weight: 600; color: var(--gray700);}
.point-list > li .point > span {font-size: 1.2rem; color: var(--gray700);}
.point-list > li > ul {display: none;}

.point-list > li.save .point > p {color: var(--blue);}

@media screen and (max-width: 1024px) {
    .point-list > li {grid-gap: 1rem .8rem; flex-wrap: wrap;}
    .point-list > li > p {width: 7.4rem; font-size: 1.4rem;}
    .point-list > li .desc > h3 {font-size: 1.4rem;}
    .point-list > li .desc > ul {display: none;}
    .point-list > li .point > p {font-size: 1.4rem;}
    .point-list > li .point > span {display: none;}
    
    .point-list > li > ul {display: flex; align-items: center; column-gap: .6rem; width: 100%;}
    .point-list > li > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.2rem; color: var(--gray700);}
    .point-list > li > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray300);}
}

/* 마이페이지 > 회원 정보 변경 */
.modify-wrap {width: 100%; padding: 4.8rem 0; border-radius: .8rem; background-color: var(--gray100); display: flex; flex-flow: column; row-gap: 4.8rem;}
.modify-wrap > p {width: 50rem; margin: 0 auto; font-size: 1.6rem; font-weight: 500; text-align: center;}
.modify-wrap > div > ul {width: 50rem; margin: 0 auto; display: flex; flex-flow: column; row-gap: 2.4rem;}
.modify-wrap > div > ul > li {display: flex; align-items: center; column-gap: 1.2rem; border-bottom: 1px solid var(--gray300); flex-wrap: wrap;}
.modify-wrap > div > ul > li > h3 {font-size: 1.4rem; font-weight: 400; width: 10rem;}
.modify-wrap > div > ul > li > *:not(h3) {flex: 1;}
.modify-wrap > div > ul > li .flex-input {height: 4.4rem;}

.modify-wrap > div > ul .button {border-bottom: 0; margin-top: -.8rem;}
.modify-wrap > div > ul .button button {height: 4.8rem; border-color: var(--blue); color: var(--blue); background-color: var(--white); font-size: 1.6rem;}
.modify-wrap > div > ul .certify {background-color: transparent;}
.modify-wrap > div > ul .certify > li > p {background-color: var(--gray100);}
.modify-wrap > div > ul .certify > li > button {background-color: transparent;}

.modify-wrap .sub-title {width: 50rem; margin: 0 auto 2.4rem;}

.modify-wrap > a {width: fit-content; margin: 0 auto; font-size: 1.6rem; font-weight: 600; color: var(--blue); text-decoration: underline;}

@media screen and (max-width: 1024px) {
    .modify-wrap {padding: 3.2rem 2rem 2rem; row-gap: 3.2rem;}
    .modify-wrap > p {width: 100%; line-height: 1.6; word-break: keep-all;}
    .modify-wrap > div > ul {width: 100%; row-gap: 2rem;}
    .modify-wrap > div > ul > li {flex-flow: column; row-gap: .4rem; align-items: initial;}
    .modify-wrap > div > ul > li > h3 {font-size: 1.2rem; width: 100%;}
    .modify-wrap > div > ul > li > *:not(h3) {flex: initial;}

    .modify-wrap > div > ul .button button {height: 4rem; font-size: 1.4rem;}

    .modify-wrap .sub-title {width: 100%; margin: 0 auto 2.4rem;}
}

.withdraw-link {display: block; margin: 3.6rem auto 0; text-align: center; font-size: 1.4rem; color: var(--gray700)!important; text-decoration: underline;}

/* 마이페이지 > 회원 정보 변경 > 회원 탈퇴 */
.withdraw-wrap {display: flex; flex-flow: column; row-gap: 1.2rem; border-top: 1px solid var(--black); padding-top: 1.6rem;}
.withdraw-wrap > li {display: flex; align-items: center; column-gap: 1.2rem; border-bottom: 1px solid var(--gray300); padding-bottom: 1.6rem;}
.withdraw-wrap > li > h3 {font-size: 1.4rem; font-weight: 400; width: 10rem;}
.withdraw-wrap > li > *:not(h3) {flex: 1;}
.withdraw-wrap > li > textarea {min-height: 8rem;}

@media screen and (max-width: 1024px) {
    .withdraw-wrap {row-gap: 1.6rem;}
    .withdraw-wrap > li {flex-flow: column; row-gap: .4rem; align-items: initial; padding-bottom: 0;}
    .withdraw-wrap > li > h3 {font-size: 1.2rem; width: 100%;}
    .withdraw-wrap > li > *:not(h3) {flex: initial;}
    .withdraw-wrap > li .flex-input {margin-top: .8rem; padding-bottom: 1.6rem;}
}

.withdraw-desc {display: flex; flex-flow: column; row-gap: 1.6rem;}
.withdraw-desc > p {font-size: 1.6rem; font-weight: 600; line-height: 1.6;}
.withdraw-desc > div {background-color: var(--gray100); padding: 2rem 2.4rem; border-radius: .8rem; position: relative;}
.withdraw-desc > div > ul {display: flex; flex-flow: column; row-gap: 1.2rem;}
.withdraw-desc > div > ul > li {font-size: 1.4rem; line-height: 1.6; display: flex; align-items: center; justify-content: space-between; padding-left: 1rem; text-indent: -1rem;}
.withdraw-desc > div > ul > li > button {width: fit-content; padding: 0 1rem; height: 2.8rem; border-radius: .4rem; font-size: 1.2rem; background-color: var(--white); border-color: var(--blue70); color: var(--blue70);}

.withdraw-pw {display: flex; flex-flow: column; background-color: var(--gray100); padding: 4rem 2.4rem; border-radius: .8rem;}
.withdraw-pw > p {font-size: 1.6rem; line-height: 1.6; text-align: center;}
.withdraw-pw .qna-write {border-top: 0; width: 100%; max-width: 50rem; margin: 0 auto;}
.withdraw-pw .qna-write .pw-guide {border-bottom: 0; justify-content: space-between;}
.withdraw-pw .qna-write .pw-guide > p {flex: initial; font-size: 1.4rem;}
.withdraw-pw .qna-write .pw-guide > a {flex: initial; font-size: 1.4rem; font-weight: 700; color: var(--gray700); text-decoration: underline;}

@media screen and (max-width: 1024px) {
    .withdraw-desc > div > ul > li {flex-flow: column; align-items: flex-start;}
    .withdraw-desc > div > ul > li > button {margin: 1.6rem auto 0;}

    .withdraw-pw {row-gap: .8rem; padding: 3.2rem 2.4rem;}
    .withdraw-pw > p {word-break: keep-all;}
    .withdraw-pw .qna-write .pw-guide {flex-flow: row;}
    
}

.pop .withdraw-desc {row-gap: 2rem;}
.pop .withdraw-desc > p {font-size: 1.4rem; font-weight: 500;}
.pop .withdraw-desc > div {border-radius: .4rem; padding: 1.6rem 2rem;}
.pop .withdraw-desc > div > h3 {font-size: 1.4rem; font-weight: 500; color: var(--gray700); line-height: 2;}
.pop .withdraw-desc > div > ul {row-gap: 0;}
.pop .withdraw-desc > div > ul > li {font-weight: 500; color: var(--gray700); line-height: 1.8;}

/* 마이페이지 > 배송지 관리 */
.address-wrap {border-top: 1px solid var(--black);}
.address-wrap > li {padding: 1.6rem 0; display: flex; align-items: center; justify-content: space-between; column-gap: 2rem; border-bottom: 1px solid var(--gray300);}
.address-wrap > li input[type="radio"] + label {align-items: center;}
.address-wrap > li .desc {display: flex; flex-flow: column; row-gap: .8rem;}
.address-wrap > li .desc > span {font-size: 1.2rem; font-weight: 600; color: var(--gray700); display: flex; align-items: center; column-gap: .6rem;}
.address-wrap > li .desc > span .default {display: flex; align-items: center; justify-content: center; font-size: 1.1rem; width: fit-content; height: 1.8rem; padding: 0 .4rem; background-color: #daf1ff; color: var(--blue); border-radius: .2rem;}
.address-wrap > li .desc > p {font-size: 1.4rem; font-weight: 500; word-break: keep-all; line-height: 1.4;}
.address-wrap > li .desc > ul {display: flex; align-items: center; column-gap: .6rem;}
.address-wrap > li .desc > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.2rem; color: var(--gray700);}
.address-wrap > li .desc > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray300);}
.address-wrap > li .button {display: flex; flex-flow: column; row-gap: .4rem;}
.address-wrap > li .button button {width: 5.2rem; height: 2.8rem; font-size: 1.2rem;}
.address-wrap > li .button button + button {background-color: transparent; color: var(--blue); border-color: var(--blue);}

.address-wrap .empty {height: 10rem; display: flex; align-items: center; justify-content: center;}
.address-wrap .empty > p {font-size: 1.4rem; color: var(--gray600);}

/* 마이페이지 > 나의 예약 내역 */
.reserve-wrap {border-top: 1px solid var(--black);}
.reserve-wrap > li {padding: 2rem 0; border-bottom: 1px solid var(--gray300); display: flex; align-items: center; justify-content: space-between;}
.reserve-wrap > li > ul {display: flex; flex-flow: column; row-gap: 1.2rem;}
.reserve-wrap > li > ul > li {display: flex; align-items: center;}
.reserve-wrap > li > ul > li > h3 {font-size: 1.6rem; font-weight: 500; color: var(--gray700); width: 8rem;}
.reserve-wrap > li > ul > li > p {font-size: 1.6rem; font-weight: 600;}
.reserve-wrap > li > button {width: fit-content; height: 2.8rem; border-radius: .4rem; padding: 0 1rem; font-size: 1.2rem;}
.reserve-wrap > li > button.line-blue:disabled {background-color: transparent!important;}

@media screen and (max-width: 1024px) {
    .reserve-wrap > li {padding: 1.6rem 0;}
    .reserve-wrap > li > ul {row-gap: .8rem;}
    .reserve-wrap > li > ul > li > h3 {font-size: 1.4rem; width: 6rem;}
    .reserve-wrap > li > ul > li > p {font-size: 1.4rem;}
}

/* 마이페이지 > 정품 인증 */
.genuine-wrap {border-top: 1px solid var(--black);}
.genuine-wrap > li {padding: 2rem 0; border-bottom: 1px solid var(--gray300); display: flex; column-gap: 4rem;}
.genuine-wrap > li > p {width: 9rem; font-size: 1.6rem; font-weight: 600;}
.genuine-wrap > li > div {display: flex; flex-flow: column; row-gap: 1.2rem;}
.genuine-wrap > li > div > h4 {font-size: 1.6rem; font-weight: 600;}
.genuine-wrap > li > div > ul {display: flex; align-items: center; column-gap: .6rem;}
.genuine-wrap > li > div > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.2rem; color: var(--gray700);}
.genuine-wrap > li > div > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray300);}

.genuine-wrap .empty {height: 10rem; display: flex; align-items: center; justify-content: center;}
.genuine-wrap .empty > p {width: 100%; text-align: center; font-size: 1.4rem; color: var(--gray600);}

@media screen and (max-width: 1024px) {
    .genuine-wrap > li {padding: 1.6rem 0; column-gap: 2rem;}
    .genuine-wrap > li > p {width: 7.2rem; font-size: 1.4rem;}
    .genuine-wrap > li > div {row-gap: 1rem;}
    .genuine-wrap > li > div > h4 {font-size: 1.4rem;}
}

/* 개인정보처리방침 전문 */
.terms-entire {border-top: 1px solid var(--black); padding-top: 3.2rem;}
.terms-entire > h2 {font-size: 2.2rem; font-weight: 600; line-height: 1.6; word-break: keep-all;}
.terms-entire > * + h2 {margin-top: 4.2rem; margin-bottom: 2.4rem;}
.terms-entire > h2 + h2 {margin-top: 2rem;}
.terms-entire > p {font-size: 1.8rem; line-height: 1.8; word-break: keep-all;}
.terms-entire > ul {display: flex; flex-flow: column; row-gap: 1.2rem; list-style: circle; margin-left: 3rem;}
.terms-entire > ul > li {font-size: 1.8rem; line-height: 1.8; word-break: keep-all;}
.terms-entire > ul > li > ul {list-style: disc; margin-left: 3rem; margin-top: .6rem;}
.terms-entire > ol {display: flex; flex-flow: column; row-gap: 1.2rem; list-style: decimal-leading-zero; margin-left: 3rem;}
.terms-entire > ol > li {font-size: 1.8rem; line-height: 1.8; word-break: keep-all; column-gap: .6rem;}
.terms-entire > ol > li > ol {list-style: decimal-leading-zero; margin-left: 3rem; margin-top: .6rem;}
.terms-entire > p + p, .terms-entire > p + ul, .terms-entire > p + ol,
.terms-entire > ul + p, .terms-entire > ul + ul, .terms-entire > ul + ol,
.terms-entire > ol + p, .terms-entire > ol + ul, .terms-entire > ol + ol {margin-top: 2rem;}

@media screen and (max-width: 1024px) {
    .terms-entire {padding-top: 2.4rem;}
    .terms-entire > h2 {font-size: 1.8rem;}
    .terms-entire > * + h2 {margin-top: 4rem; margin-bottom: 1.6rem;}
    .terms-entire > p {font-size: 1.4rem;}
    .terms-entire > ul > li {font-size: 1.4rem;}
    .terms-entire > p + p, .terms-entire > p + ul, .terms-entire > p + ol,
    .terms-entire > ul + p, .terms-entire > ul + ul, .terms-entire > ul + ol,
    .terms-entire > ol + p, .terms-entire > ol + ul, .terms-entire > ol + ol {margin-top: 1.65rem;}
}

.pop .terms-entire {border-top: 0; padding-top: 0; padding-bottom: 3.6rem;}
.pop .terms-entire > h2 {font-size: 1.8rem;}
.pop .terms-entire > * + h2 {margin-top: 3.6rem; margin-bottom: 1.2rem;}
.pop .terms-entire > h2 + h2 {margin-top: 1.6rem;}
.pop .terms-entire > p {font-size: 1.6rem; line-height: 1.6;}
.pop .terms-entire > ul {row-gap: .6rem;}
.pop .terms-entire > ul > li {font-size: 1.6rem; line-height: 1.6;}
.pop .terms-entire > ul > li > ul {margin-top: .4rem;}
.pop .terms-entire > ol {row-gap: .6rem;}
.pop .terms-entire > ol > li {font-size: 1.6rem; line-height: 1.6;}
.pop .terms-entire > ol > li > ol {margin-top: .4rem;}
.pop .terms-entire > p + p, .terms-entire > p + ul, .terms-entire > p + ol,
.pop .terms-entire > ul + p, .terms-entire > ul + ul, .terms-entire > ul + ol,
.pop .terms-entire > ol + p, .terms-entire > ol + ul, .terms-entire > ol + ol {margin-top: 1rem;}

@media screen and (max-width: 1024px) {
    .terms-entire {padding-top: 0; padding-bottom: 2.4rem;}
    .pop .terms-entire > h2 {font-size: 1.6rem;}
    .pop .terms-entire > * + h2 {margin-top: 3.2rem; margin-bottom: 1rem;}
    .pop .terms-entire > h2 + h2 {margin-top: 1.4rem;}
    .pop .terms-entire > p {font-size: 1.4rem;}
    .pop .terms-entire > ul {row-gap: .4rem;}
    .pop .terms-entire > ul > li {font-size: 1.4rem;}
    .pop .terms-entire > ol {row-gap: .4rem;}
    .pop .terms-entire > ol > li {font-size: 1.4rem;}
    .pop .terms-entire > p + p, .terms-entire > p + ul, .terms-entire > p + ol,
    .pop .terms-entire > ul + p, .terms-entire > ul + ul, .terms-entire > ul + ol,
    .pop .terms-entire > ol + p, .terms-entire > ol + ul, .terms-entire > ol + ol {margin-top: .6rem;}
}