/* to embed a font */
@import url('./font.css');

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

    --gray05: #24252A;
    --gray04: #747474;
    --gray03: #A4A4A4;
    --gray02: #E5E5E5;
    --gray01: #F9FAFB;

    --red: #F64141;
    --blue: #148EFF;
}

/* body */ 
body {overflow-x: hidden;}

/* header */
header {width: 100%; height: 8rem; background-color: var(--white); position: sticky; top: 0; z-index: 100;}
header .header {width: 100%; height: 100%; max-width: 112rem; padding: 0 2rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; position: relative;}
header .header img {height: 2.2rem;}
header .header > ul {display: flex; align-items: center; justify-content: flex-end; column-gap: 3rem; margin-right: -1rem;}
header .header > ul > li > a {font-size: 1.6rem; height: 8rem; padding: 0 1rem; display: flex; align-items: center; justify-content: center;}
header .header > ul > li:hover > a {font-weight: 700; color: var(--blue); position: relative;}
header .header > ul > li:hover > a::after {content: ''; width: calc(100% - 2rem); height: .3rem; 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%); background-color: var(--blue);}
header .header > ul > li.active > a {font-weight: 700; color: var(--blue); position: relative;}
header .header > ul > li.active > a::after {content: ''; width: calc(100% - 2rem); height: .3rem; 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%); background-color: var(--blue);}
header .header > ul > li > ul {display: none; width: calc(100% - 4rem); height: 12rem; align-items: center; justify-content: space-evenly; background-color: var(--white); border-radius: 2rem; position: absolute; top: 9rem; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 10;}
header .header > ul > li > ul::before {content: ''; width: 100%; height: 1rem; background-color: transparent; position: absolute; top: -1rem; left: 0;}
header .header > ul > li > ul > li > a {display: flex; flex-flow: column; row-gap: 1rem; align-items: center; width: 14rem;}
header .header > ul > li > ul > li > a > p {text-align: center; font-size: 1.6rem; font-weight: 700;}
header .header > ul > li:hover > ul,
header .header > ul > li > ul:hover {display: flex; z-index: 100;}
header .header .mobile {display: none;}

@media screen and (max-width: 768px) {
    header {height: 5.6rem;}
    header .header img {height: 1.8rem;}
    header .header > ul {display: none;}
    header .header .mobile {display: block;}
    header .header .mobile > button {width: fit-content; min-width: initial; height: fit-content; padding: 0; background-color: transparent;}
    header .header .mobile .menu-wrap {display: none; column-gap: 1rem; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,.8);}
    header .header .mobile .menu-wrap .menu {width: calc(100% - 4.8rem); max-width: 33rem; background-color: var(--white); padding: 1.9rem 2rem; display: flex; flex-flow: column; row-gap: 3rem;}
    header .header .mobile .menu-wrap .menu > img {height: 1.8rem;}
    header .header .mobile .menu-wrap .menu > ul {display: flex; flex-flow: column; row-gap: 3rem;}
    header .header .mobile .menu-wrap .menu > ul > li {width: 100%; font-size: 1.6rem; font-weight: 600; display: flex; flex-flow: column; row-gap: 2.4rem;}
    header .header .mobile .menu-wrap .menu > ul > li > a {width: 100%; height: 2.4rem; font-size: 1.6rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; font-size: 1.6rem;}
    header .header .mobile .menu-wrap .menu > ul > li > ul {display: flex; flex-flow: column; row-gap: 3rem;}
    header .header .mobile .menu-wrap .menu > ul > li > ul > li > a {width: 100%; padding-bottom: 1rem; border-bottom: 1px solid var(--gray02); font-weight: initial; display: flex; align-items: center; justify-content: space-between; font-size: 1.6rem;}
    header .header .mobile .menu-wrap > button {width: fit-content; min-width: initial; height: fit-content; padding: 0; margin-top: 1.6rem; background-color: transparent;}
}

/* footer */
footer {width: 100%; padding: 8rem 0; background-color: #000000;}
footer .footer {width: 100%; max-width: 112rem; padding: 0 2rem; margin: 0 auto; display: flex; flex-flow: column; row-gap: 2rem; position: relative;}
footer .footer > p {font-size: 1.6rem; font-weight: 700; color: #ffffff;}
footer .footer > span {font-size: 1.4rem; color: rgba(255,255,255,0.7); line-height: 1.6;}
footer .footer .terms {display: flex; align-items: center; column-gap: .6rem;}
footer .footer .terms > li {display: flex; align-items: center; column-gap: .6rem;}
footer .footer .terms > li + li::before {content: ''; width: 1px; height: 1.2rem; background-color: var(--gray04);}
footer .footer .terms > li > a {font-size: 1.4rem; font-weight: 500; color: #ffffff;}

@media screen and (max-width: 768px) {
    footer {padding: 4rem 0;}
    footer .footer > p {font-size: 1.4rem;}
    footer .footer > span {font-size: 1.2rem;}
    footer .footer .terms {flex-wrap: wrap;}
    footer .footer .terms > li > a {font-size: 1rem;}
}

/* main */
main {width: 100%; max-width: 112rem; padding: 0 2rem; margin: 0 auto;}

/* 메인 > 메인 배너 */
.main-banner {width: 100vw; padding: 18rem 0 22rem; background-color: var(--black); background-image: url(../img/main-bg.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%);}
.main-banner > div {width: 100%; max-width: 112rem; padding: 0 2rem; margin: 0 auto; display: flex; flex-flow: column; row-gap: 3rem;}
.main-banner > div > p {font-size: 5rem; line-height: 1.5; font-weight: 600; color: var(--white);}
.main-banner > div > span {font-size: 2.2rem; color: rgba(255,255,255,0.7); line-height: 1.6;}
.main-banner > div > button {min-width: 16rem;}

@media screen and (max-width: 768px) {
    .main-banner {padding: 18rem 0rem 6rem; background-image: url(../img/main-bg-mobile.png);}
    .main-banner > div {padding: 0 3rem; row-gap: 2rem;}
    .main-banner > div > p {font-size: 2.8rem; word-break: keep-all;}
    .main-banner > div > span {font-size: 1.2rem;}
    .main-banner > div > button {min-width: 13rem;}
}

/* 메인 > 올인원 솔루션 */
.all-in-one {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; grid-gap: 6.4rem;}
.all-in-one > li {display: flex; flex-flow: column; row-gap: 2rem; align-items: center;}
.all-in-one > li > div {width: 12rem; height: 12rem; border-radius: 100%; background-color: var(--gray01); display: flex; align-items: center; justify-content: center;}
.all-in-one > li > p {font-size: 2.2rem; font-weight: 500; text-align: center;}

@media screen and (max-width: 768px) {
    .all-in-one {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2rem;}
    .all-in-one > li {row-gap: 1.6rem;}
    .all-in-one > li > div {width: 8rem; height: 8rem;}
    .all-in-one > li > div > i {width: 4.5rem; height: 4.5rem;}
    .all-in-one > li > p {font-size: 1.4rem;}
}

/* 메인 > 결제 수단 */
.payment-way {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 4rem;}
.payment-way > li {border-radius: 2rem; background-color: var(--gray01);}
.payment-way > li:last-child {grid-column: 1 / span 2;}
.payment-way > li img {width: 100%;}

@media screen and (max-width: 768px) {
    .payment-way {grid-template-columns: repeat(1, 1fr); grid-gap: 2rem;}
    .payment-way > li {border-radius: 1rem; margin-right: 6rem;}
    .payment-way > li:nth-child(2) {margin-left: 6rem; margin-right: 0;}
    .payment-way > li:last-child {grid-column: 1; margin: 0;}
}

/* 메인 > 매출 현황 */
.sales-status {width: 100vw; display: flex; align-items: center; grid-gap: 3.2rem 8rem; flex-wrap: wrap; position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.sales-status > img {width: 62vw;}
.sales-status > img:nth-child(1):nth-last-child(1) {margin-left: auto;}
.sales-status > ul {display: flex; flex-flow: column; row-gap: 7rem;}
.sales-status > ul > li {display: flex; flex-flow: column; row-gap: 2.4rem;}
.sales-status > ul > li > p {font-size: 2.2rem; font-weight: 700; line-height: 1.6; color: var(--white);}

@media screen and (max-width: 1080px) {
    .sales-status > ul {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 5rem; margin: 0 auto;}
    .sales-status > ul > li {align-items: center; justify-content: center;}
    .sales-status > ul > li > p {text-align: center;}
}
@media screen and (max-width: 768px) {
    .sales-status > img {width: calc(100vw - 2rem);}
    .sales-status > img:nth-child(1):nth-last-child(1) {margin-left: auto;}
    .sales-status > ul {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 5rem; margin: 0 auto;}
    .sales-status > ul > li {align-items: center; justify-content: center; row-gap: 1.4rem;}
    .sales-status > ul > li > i {width: 2.5rem; height: 2.5rem;}
    .sales-status > ul > li > p {font-size: 1.4rem;}
}


/* 메인 > 멤버십 상품 */
.membership-img {width: 100%;}

/* 메인 > 페이퍼스토어 제품 */
.store-prod {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 2rem;}
.store-prod > li > a {height: 23rem; background-color: var(--gray01); border-radius: 2rem; display: flex; align-items: center; justify-content: center; flex-flow: column; row-gap: 1rem;}
.store-prod > li > a > i {width: 13rem; height: 13rem;}
.store-prod > li > a > p {font-size: 1.6rem; font-weight: 500; color: var(--blue); display: flex; align-items: center; justify-content: center; column-gap: .4rem;}

@media screen and (max-width: 768px) {
    .store-prod {grid-template-columns: repeat(2, 1fr); grid-gap: 1rem;}
    .store-prod > li > a {height: calc((100vw - 4rem - 1rem) / 2); border-radius: 1rem;}
    .store-prod > li > a > i {width: 8.5rem; height: 8.5rem;}
    .store-prod > li > a > p {font-size: 1.4rem;}
}

/* 메인 > 페이퍼스토어 다운로드 */
.store-skill {display: flex; grid-gap: 2rem; flex-wrap: wrap; align-items: center; justify-content: center;}
.store-skill > li {width: calc((100% - (2rem * 2)) / 3); height: 28rem; padding: 0 5rem; background-color: var(--gray05); border-radius: 2rem; display: flex; flex-flow: column; row-gap: 2.4rem; align-items: center; justify-content: center;}
.store-skill > li > p {font-size: 1.6rem; font-weight: 700; color: var(--white);}
.store-skill > li > span {text-align: center; font-size: 1.6rem; color: var(--gray03); line-height: 1.6; word-break: keep-all;}

@media screen and (max-width: 1080px) {
    .store-skill > li {padding: 0 4rem;}
    .store-skill > li > span {height: 10.4rem;}
}
@media screen and (max-width: 768px) {
    .store-skill {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem;}
    .store-skill > li {width: 100%; height: fit-content; padding: 2.4rem 1rem; border-radius: 1rem; row-gap: 1.4rem;}
    .store-skill > li:last-child {grid-column: 1 / span 2;}
    .store-skill > li > i {width: 3rem; height: 3rem;}
    .store-skill > li > p {font-size: 1.4rem;}
    .store-skill > li > span {font-size: 1.2rem; height: fit-content;}
}

.store-download {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; grid-gap: 1.6rem; margin-top: 6rem;}
.store-download button {background-color: var(--white); color: var(--black);}
.store-download button i {width: 3.2rem; height: 3.2rem;}

@media screen and (max-width: 768px) {
    .store-download {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; margin-top: 5rem;}
    .store-download button {height: 5.6rem; width: 100%; word-break: keep-all; padding: 0 1.6rem;}
    .store-download button > *:not(i) {flex: 1;}
    .store-download button i {width: 4rem; height: 4rem;}
}

/* 메인 > 인터넷 */
.internet-prod {width: fit-content; height: fit-content; padding: 3.2rem 12rem; margin: 0 auto; border-radius: 2rem; background-color: var(--gray01); display: flex; flex-flow: column; row-gap: 2rem; align-items: center;}
.internet-prod .logo-lg {height: 4rem;}
.internet-prod > p {font-size: 1.4rem;}
.internet-prod > img:not(.logo-lg) {height: 12.6rem; margin-top: .8rem;}

@media screen and (max-width: 768px) {
    .internet-prod {width: 100%; padding: 4rem 2rem; border-radius: 1rem;}
    .internet-prod .logo-lg {height: 3.2rem;}
    .internet-prod > p {font-size: 1.4rem;}
    .internet-prod > img:not(.logo-lg) {height: 10rem; margin-top: 0;}
}

/* 메인 > 의뢰하기 */
.consulting-wrap {position: relative; padding: 16rem 0; display: flex; grid-gap: 0 8rem; flex-wrap: wrap; margin-bottom: -16rem;}
.consulting-wrap > * {position: relative; z-index: 2;}
.consulting-wrap > div:not(.title) {flex: 1; min-width: 60rem;}
.consulting-wrap::before {content: ''; background-color: var(--gray01);  width: 100vw; height: 100%; 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%);}

@media screen and (max-width: 768px) {
    .consulting-wrap {padding: 5rem 0; grid-gap: 0; margin-bottom: -5rem;}
    .consulting-wrap .title {width: 100%; align-items: center;}
    .consulting-wrap > div:not(.title) {width: 100%; min-width: initial;}
    .consulting-wrap::before {content: ''; background-color: var(--gray01);  width: 100vw; height: 100%; 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%);}    
}

.consulting-input {display: flex; flex-flow: column; row-gap: 2rem;}
.consulting-input > li {display: flex; flex-flow: column; row-gap: .8rem;}
.consulting-input > li > p {font-size: 1.4rem; font-weight: 500;}

* + .terms-chk {margin-top: 1.6rem;}
.terms-chk {display: flex; flex-flow: column; row-gap: 1.2rem;}

/* 상담하기 */
.recommend-wrap {padding-top: 16rem; display: flex; grid-gap: 4rem 6rem;}
.recommend-wrap > div {flex: 1; display: flex; flex-flow: column; row-gap: 3rem;}
.recommend-wrap > div .desc {display: flex; flex-flow: column; row-gap: 2rem;}
.recommend-wrap > div .desc > span {font-size: 2.2rem; font-weight: 500;}
.recommend-wrap > div .desc > p {font-size: 5rem; line-height: 1.4; word-break: keep-all; font-weight: 700;}
.recommend-wrap > div > span {font-size: 2.2rem; line-height: 1.6; word-break: keep-all; color: var(--gray04);}
.recommend-wrap > div > span .font-blue {font-weight: 700;}
.recommend-wrap > div .btn-wrap {margin-top: 1rem;}
.recommend-wrap > img {width: 60rem;}

@media screen and (max-width: 1080px) {
    .recommend-wrap > img {width: 40rem;}
}
@media screen and (max-width: 768px) {
    .recommend-wrap {padding-top: 5rem; flex-flow: column; align-items: center;}
    .recommend-wrap > div {align-items: center; row-gap: 2rem;}
    .recommend-wrap > div .desc > span {display: none;}
    .recommend-wrap > div .desc > p {text-align: center; font-size: 2.4rem;}
    .recommend-wrap > div > span {font-size: 1.4rem;}
    .recommend-wrap > div .btn-wrap {width: 100%; margin-top: .4rem;}
    .recommend-wrap > img {width: 100%;}
}

/* 스토어 > 미니포스 */
.prod-intro {display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; column-gap: 8rem;}
.prod-intro > img {width: 100%;}
.prod-intro .desc {display: flex; flex-flow: column; row-gap: 2.4rem;}
.prod-intro .desc > p {font-size: 5.2rem; font-weight: 700; color: var(--white);}
.prod-intro .desc > span {font-size: 3.2rem; font-weight: 600; line-height: 1.6; color: var(--gray03); word-break: keep-all;}
.prod-intro .desc > ul {width: 100%; padding: 2rem; background-color: rgba(255,255,255,0.1); backdrop-filter: blur(2px); border-radius: 1.2rem; display: flex; flex-flow: column; row-gap: 1.6rem;}
.prod-intro .desc > ul > li {display: flex; align-items: center; justify-content: space-between;}
.prod-intro .desc > ul > li > p {font-size: 1.6rem; color: var(--gray03);}
.prod-intro .desc > ul > li > span {font-size: 1.6rem; color: var(--white);}
.prod-intro .desc > ul > li > span > span {font-size: 2rem;}
.prod-intro .desc > button {width: 100%;}

@media screen and (max-width: 1080px) {
    .prod-intro .desc > span > br {display: none;}
}
@media screen and (max-width: 768px) {
    .prod-intro {display: flex; flex-flow: column; row-gap: 4rem;}
    .prod-intro > img {width: clac(100% - 6rem);}
    .prod-intro .desc {row-gap: 4rem; align-items: center; width: 100%;}
    .prod-intro .desc > p {font-size: 2.8rem;}
    .prod-intro .desc > span {font-size: 1.6rem; text-align: center;}
    .prod-intro .desc > span > br {display: block;}
    .prod-intro .desc > ul > li > p {font-size: 1.4rem; text-align: center;}
    .prod-intro .desc > ul > li > span {font-size: 1.4rem; text-align: center;}
}

.prod-skill {display: flex; align-items: center; justify-content: center; position: relative;}
.prod-skill img {width: 56rem; position: absolute; z-index: 1;}
.prod-skill ul {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 12rem 42rem; position: relative; z-index: 2;}
.prod-skill ul > li {width: 18.4rem; margin: 0 auto; display: flex; flex-flow: column; align-items: center; row-gap: 1rem;}
.prod-skill ul > li:nth-child(3) {margin-right: 12rem;}
.prod-skill ul > li:nth-child(4) {margin-left: 12rem;}
.prod-skill ul > li > div {width: 12rem; height: 12rem; border-radius: 100%; background-color: var(--blue); display: flex; align-items: center; justify-content: center;}
.prod-skill ul > li > p {text-align: center; font-size: 2.2rem; font-weight: 500; line-height: 1.6;}

@media screen and (max-width: 1080px) {
    .prod-skill {flex-flow: column; row-gap: 4rem;}
    .prod-skill img {width: calc(100% - 6rem); position: relative;}
    .prod-skill ul {grid-template-columns: repeat(3, 1fr); grid-gap: 3rem; width: 100%;}
    .prod-skill ul > li {width: fit-content;}
    .prod-skill ul > li:nth-child(3) {margin: 0 auto;}
    .prod-skill ul > li:nth-child(4) {margin: 0 auto;}
    .prod-skill ul > li > p br.mobile {display: block;}
}
@media screen and (max-width: 768px) {
    .prod-skill ul > li > div {width: 8rem; height: 8rem;}
    .prod-skill ul > li > div > i {width: 3.6rem; height: 3.6rem;}
    .prod-skill ul > li > p {font-size: 1.4rem;}
}

.prod-interview-swiper.swiper .swiper-wrapper {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 6rem 4rem;}
.prod-interview-swiper.swiper .swiper-slide {border-radius: 2rem; overflow: hidden;}
.prod-interview-swiper.swiper .swiper-slide > img {width: 100%;}
.prod-interview-swiper.swiper .swiper-slide .desc {background-color: var(--white); padding: 4rem 2.4rem; display: flex; flex-flow: column; row-gap: 3.6rem; height: 100%;}
.prod-interview-swiper.swiper .swiper-slide .desc > div {display: flex; align-items: center; column-gap: .6rem;}
.prod-interview-swiper.swiper .swiper-slide .desc > div > p {font-size: 2rem; color: var(--gray04); word-break: keep-all;}
.prod-interview-swiper.swiper .swiper-slide .desc > p {font-size: 2.4rem; line-height: 1.6; font-weight: 600; word-break: keep-all;}

@media screen and (max-width: 1080px) {
    .prod-interview-swiper.swiper .swiper-slide .desc > p > br {display: none;}
}
@media screen and (max-width: 768px) {
    .prod-interview-swiper.swiper {margin: 0 -2rem; padding: 0 2rem;}
    .prod-interview-swiper.swiper .swiper-wrapper {display: flex; grid-template-columns: initial; column-gap: initial; align-items: initial;}
    .prod-interview-swiper.swiper .swiper-slide {width: 30rem; border-radius: 1rem;}
    .prod-interview-swiper.swiper .swiper-slide .desc {padding: 2.4rem 1.6rem; row-gap: 1rem;}
    .prod-interview-swiper.swiper .swiper-slide .desc > div > p {font-size: 1.4rem;}
    .prod-interview-swiper.swiper .swiper-slide .desc > p {font-size: 2rem; height: 9.6rem;}
    .prod-interview-swiper.swiper .swiper-slide .desc > p > br {display: block;}
}

.cont-box.screen {padding-left: 40rem;}
.cont-box.screen::before {background-color: #1A1F28!important; background-image: url(../img/store/screen-bg.png); background-repeat: no-repeat; background-size: auto 100%; background-position: left bottom;}
.prod-screen {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem;}
.prod-screen > li {border-radius: 1rem; background-color: rgba(255,255,255,0.1); display: flex; flex-flow: column; row-gap: 1rem; padding: 1rem 0; align-items: center;}
.prod-screen > li > p {font-size: 2rem; font-weight: 700; color: var(--white);}
.prod-screen > li > span {font-size: 1.2rem; color: rgba(255,255,255,0.7);}

@media screen and (max-width: 1080px) {
    .cont-box.screen {padding-left: 0; padding-bottom: 36rem;}
    .cont-box.screen::before {background-size: 100% auto; background-position: left bottom;}
    
    .cont-box.screen .title {align-items: center;}
    .cont-box.screen .title > p {text-align: center;}
    .cont-box.screen .title > span {text-align: center;}
    
    .prod-screen {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem;}
    .prod-screen > li {border-radius: 1rem; background-color: rgba(255,255,255,0.1); display: flex; flex-flow: column; row-gap: 1rem; padding: 1rem 0; align-items: center;}
    .prod-screen > li > p {font-size: 2rem; font-weight: 700; color: var(--white);}
    .prod-screen > li > span {font-size: 1.2rem; color: rgba(255,255,255,0.7);}
}
@media screen and (max-width: 768px) {
    .cont-box.screen::before {background-image: url(../img/store/screen-bg-mb.png); background-size: 37.5rem;}
    .cont-box.screen .title > span > br {display: none;}
}

.cont-box.cpu::before {background-image: url(../img/store/cpu-bg.png); background-repeat: no-repeat; background-size: auto 100%; background-position: center;}
.prod-cpu {display: flex; align-items: center; column-gap: 4rem;}
.prod-cpu > li {display: flex; flex-flow: column; row-gap: 1rem; align-items: center; width: fit-content; margin: 0 auto;}
.prod-cpu > li > div {width: 16rem; height: 16rem; background-repeat: no-repeat; mix-blend-mode: luminosity; background-size: contain; background-position: center;}
.prod-cpu > li > p {text-align: center; font-size: 2rem; color: rgba(255,255,255,0.7);}

@media screen and (max-width: 1080px) {
}
@media screen and (max-width: 768px) {
    .cont-box.cpu {padding-bottom: 36rem;}
    .cont-box.cpu::before {background-image: url(../img/store/cpu-bg-mb.png); background-size: 37.5rem; background-position: center bottom;}
    .cont-box.cpu .title > span > br {display: none;}

    .prod-cpu {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 2rem; align-items: center; justify-content: center;}
    .prod-cpu > li > div {width: 8rem; height: 8rem;}
    .prod-cpu > li > p {font-size: 1.4rem;}
}

.prod-info {display: flex; flex-flow: column; row-gap: 8rem;}
.prod-info > li {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 8rem; align-items: center;}
.prod-info > li > img {width: 100%; filter: drop-shadow(0 .8rem .8ren rgba(0, 0, 0, 0.15));}
.prod-info > li > div {display: flex; flex-flow: column; row-gap: 3rem;}
.prod-info > li > div > p {font-size: 4rem; font-weight: 700; line-height: 1.4; word-break: keep-all;}
.prod-info > li > div > span {font-size: 2.2rem; line-height: 1.6; font-weight: 500; color: var(--gray04); word-break: keep-all;}
.prod-info > li > div > ul {display: flex; align-items: center; column-gap: 2.4rem;}
.prod-info > li > div > ul > li {display: flex; flex-flow: column; row-gap: 1rem; align-items: center; justify-content: center; position: relative;}
.prod-info > li > div > ul > li + li {padding-left: 2.4rem;}
.prod-info > li > div > ul > li + li::before {content: ''; width: 1px; height: 3.8rem; background-color: var(--gray02); position: absolute; left: 0;}
.prod-info > li > div > ul > li > p {text-align: center; font-size: 2.8rem; font-weight: 700;}
.prod-info > li > div > ul > li > span {font-size: 1.4rem; font-weight: 500; color: var(--gray04)}

@media screen and (max-width: 1080px) {
    .prod-info > li > div > span > br {display: none;}
    .prod-info > li > div > ul {display: none;}
}
@media screen and (max-width: 768px) {
    .prod-info {row-gap: 6rem; margin: 0 -2rem;}
    .prod-info > li {display: flex; flex-flow: column; row-gap: 2.4rem; align-items: flex-start;}
    .prod-info > li:nth-child(2) {flex-flow: column-reverse; align-items: flex-end;}
    .prod-info > li > img {width: calc(100% - 7rem);}
    .prod-info > li > div {row-gap: 1.6rem; padding: 0 2rem; width: calc(100% - 7rem);}
    .prod-info > li > div > p {font-size: 2.4rem;}
    .prod-info > li > div > span {font-size: 1.4rem;}
    .prod-info > li > div > span > br {display: block;}
}

.cont-box.minipos {padding: 22rem 0; display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 8rem;}
.cont-box.minipos::before {background-color: #252525!important; background-image: url(../img/store/minipos-bg.png); background-repeat: no-repeat; background-size: auto 100%; background-position: center;} 
.cont-box.minipos .title {margin-bottom: 0;}
.cont-box.minipos > img {width: 100%;}

@media screen and (max-width: 1080px) {
    .cont-box.minipos .title > span > br {display: none;}
}
@media screen and (max-width: 768px) {
    .cont-box.minipos {padding: 5rem 0; display: flex; flex-flow: column; row-gap: 5rem;}
    .cont-box.minipos::before {background-color: #252525!important; background-image: initial;}
    .cont-box.minipos > img {width: calc(100% - 6rem); margin: 0 auto;}
}

.app-download {width: fit-content; margin: 0 auto; display: flex; align-items: center; column-gap: 2.4rem;}
.app-download > li > a {padding: 5rem 16rem; width: fit-content; display: flex; flex-flow: column; row-gap: 1.6rem; align-items: center; border-radius: 2rem; background-color: var(--white);}
.app-download > li > a > img {width: 11rem;}
.app-download > li > a > p {display: flex; align-items: center; column-gap: .4rem; font-size: 1.6rem; font-weight: 500; color: var(--blue);}

@media screen and (max-width: 1080px) {
    .app-download > li > a {padding: 5rem 8rem;}
}
@media screen and (max-width: 768px) {
    .app-download {flex-flow: column; row-gap: 2rem;}
    .app-download > li > a {padding: 0; background-color: transparent;}
    .app-download > li > a > img {width: 8rem;}
    .app-download > li > a > p {font-size: 1.4rem;}
}

/* 스토어 > 결제단말기 */
.payment-support {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; grid-gap: 6.4rem;}
.payment-support > li {display: flex; flex-flow: column; row-gap: 2rem; align-items: center;}
.payment-support > li > div {width: 12rem; height: 12rem; border-radius: 100%; background-color: var(--gray01); display: flex; align-items: center; justify-content: center;}
.payment-support > li > p {font-size: 2.2rem; font-weight: 500; text-align: center;}

@media screen and (max-width: 768px) {
    .payment-support {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2rem;}
    .payment-support > li {row-gap: 1.6rem;}
    .payment-support > li > div {width: 8rem; height: 8rem;}
    .payment-support > li > div > i {width: 4.5rem; height: 4.5rem;}
    .payment-support > li > p {font-size: 1.4rem;}
}

.cont-box.untact {display: flex; flex-flow: column; align-items: center; padding-bottom: 0;}
.cont-box.untact > img {width: 100vw;}

@media screen and (max-width: 1080px) {
    .untact > img.mobile {display: none;}
}
@media screen and (max-width: 768px) {
    .untact > img.mobile {display: block;}
}

/* 스토어 > 프린터 */
.cont-box.printer {display: flex; flex-flow: column; align-items: center;}
.cont-box.printer > img {width: 100vw; mix-blend-mode: multiply;}

@media screen and (max-width: 1080px) {
    .printer > img.mobile {display: none;}
}
@media screen and (max-width: 768px) {
    .printer > img.mobile {display: block;}
}