@charset "UTF-8"; /*변수*/ /*반응형 화면 크기*/ /*css 디폴트는 모바일이 기준*/ /*반응형, 브라우저 크기가 300px 이하일때*/ /*반응형, 브라우저 크기가 800px 이상일때*/ /*@media (min-width: $mobile ) and (max-width: $tablet){*/ /*반응형, 브라우저 크기가 1025px 이상일때*/ /*반응형, 브라우저 크기가 1204px 이상일때*/ /*넓이, 높이 자동 계산함수*/ /*변수파일 import*/ pre { font-family: "KiaSignature"; } .contentWarp { margin-top: 0; margin-bottom: 0; } .contentWarp .mypageWarp { width: 100%; display: block; } @media (min-width: 768px) { .contentWarp .mypageWarp { display: flex; max-width: 120rem; } } .contentWarp .mypageWarp .leftLnbWarp { width: 100%; padding-top: 5rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .leftLnbWarp { max-width: 20rem; padding-top: 10rem; padding-bottom: 15rem; padding-left: 2rem; } } @media (min-width: 1025px) { .contentWarp .mypageWarp .leftLnbWarp { min-width: 30rem; max-width: auto; } } @media (min-width: 1240px) { .contentWarp .mypageWarp .leftLnbWarp { padding-left: 0rem; } } .contentWarp .mypageWarp .leftLnbWarp .title { border-bottom: 1px solid #dedede; padding-bottom: 2.5rem; padding-left: 2rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .leftLnbWarp .title { padding-bottom: 0; border-bottom: 0; padding-left: 0rem; } } .contentWarp .mypageWarp .leftLnbWarp .title h1 { font-size: 3rem; font-weight: 600; } @media (min-width: 1025px) { .contentWarp .mypageWarp .leftLnbWarp .title h1 { font-size: 4.5rem; } } .contentWarp .mypageWarp .leftLnbWarp .title p { display: none; } @media (min-width: 768px) { .contentWarp .mypageWarp .leftLnbWarp .title p { display: flex; align-items: center; margin-top: 2rem; } } .contentWarp .mypageWarp .leftLnbWarp .title p::before { content: ""; width: 2rem; height: 2rem; display: block; background-image: url(/kr/assets/images/common/icon-user.svg); background-size: contain; background-repeat: no-repeat; } .contentWarp .mypageWarp .leftLnbWarp .title p span { margin-left: 0.8rem; } .contentWarp .mypageWarp .leftLnbWarp .couponArea { margin-top: 0; } @media (min-width: 768px) { .contentWarp .mypageWarp .leftLnbWarp .couponArea { margin-top: 2rem; } } .contentWarp .mypageWarp .leftLnbWarp .couponArea dl { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 2rem; background-color: #05141f; font-size: 1.4rem; font-weight: 400; color: #ffffff; } @media (min-width: 768px) { .contentWarp .mypageWarp .leftLnbWarp .couponArea dl { padding: 0.8rem; margin-right: 2rem; } } @media (min-width: 1025px) { .contentWarp .mypageWarp .leftLnbWarp .couponArea dl { margin-right: 3rem; } } .contentWarp .mypageWarp .leftLnbWarp .couponArea dl dt span { display: inline-block; } @media (min-width: 768px) { .contentWarp .mypageWarp .leftLnbWarp .couponArea dl dt span { display: none; } } @media (min-width: 1025px) { .contentWarp .mypageWarp .leftLnbWarp .couponArea dl dt span { display: inline-block; } } .contentWarp .mypageWarp .leftLnbWarp .couponArea .lnbCoupon { border-bottom: 1px solid #666666; margin-bottom: 0; } @media (min-width: 768px) { .contentWarp .mypageWarp .leftLnbWarp .couponArea .lnbCoupon { margin-bottom: 0.5rem; } } .contentWarp .mypageWarp .leftLnbWarp .lnbList { padding-top: 2rem; padding-bottom: 1.8rem; padding-left: 2rem; background-color: #f3f3f3; } .contentWarp .mypageWarp .leftLnbWarp .lnbList::before { content: ""; position: absolute; right: 0; top: 0; display: block; width: 5.1rem; height: 5.5rem; z-index: 2; background: linear-gradient(270deg, #f3f3f3 0%, rgba(243, 243, 243, 0) 100%); } @media (min-width: 768px) { .contentWarp .mypageWarp .leftLnbWarp .lnbList::before { content: none; } } @media (min-width: 768px) { .contentWarp .mypageWarp .leftLnbWarp .lnbList { margin-top: 6.5rem; padding-top: 0rem; padding-bottom: 0rem; padding-left: 0rem; background-color: #fff; } } .contentWarp .mypageWarp .leftLnbWarp .lnbList ul { display: flex; align-items: center; } @media (min-width: 768px) { .contentWarp .mypageWarp .leftLnbWarp .lnbList ul { display: block; } } .contentWarp .mypageWarp .leftLnbWarp .lnbList ul li { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .contentWarp .mypageWarp .leftLnbWarp .lnbList ul li:last-child { padding-right: 2rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .leftLnbWarp .lnbList ul li { width: 100%; } } .contentWarp .mypageWarp .leftLnbWarp .lnbList ul li a { font-size: 1.6rem; font-weight: 600; color: #9ea1a2; } @media (min-width: 768px) { .contentWarp .mypageWarp .leftLnbWarp .lnbList ul li a { font-size: 2rem; } } .contentWarp .mypageWarp .leftLnbWarp .lnbList ul li a:hover { color: #000; } .contentWarp .mypageWarp .leftLnbWarp .lnbList ul li .on { color: #000; } .contentWarp .mypageWarp .leftLnbWarp .lnbList ul li + li { margin-top: 0; margin-left: 2rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .leftLnbWarp .lnbList ul li + li { margin-top: 2.5rem; margin-left: 0; } } .contentWarp .mypageWarp .rightConWarp { width: 100%; padding-top: 4rem; padding-bottom: 9rem; padding-left: 2rem; padding-right: 2rem; border-left: 1px solid #dedede; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp { padding-top: 10rem; padding-bottom: 15rem; } } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp { padding-left: 7rem; } } @media (min-width: 1240px) { .contentWarp .mypageWarp .rightConWarp { padding-right: 0rem; } } .contentWarp .mypageWarp .rightConWarp .conTitle h2 { display: none; font-size: 3rem; font-weight: 600; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .conTitle h2 { display: block; } } .contentWarp .mypageWarp .rightConWarp .conTitle p { margin-top: 0rem; font-size: 1.4rem; line-height: 2.2rem; } .contentWarp .mypageWarp .rightConWarp .conTitle p br { display: none; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .conTitle p br { display: block; } } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .conTitle p { margin-top: 2rem; font-size: 1.6rem; line-height: 2.4rem; } } .contentWarp .mypageWarp .rightConWarp .conTitle > div { display: block; align-items: center; justify-content: space-between; margin-top: 1.6rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .conTitle > div { display: flex; } } .contentWarp .mypageWarp .rightConWarp .conTitle > div p { margin-top: 0rem; font-size: 1.4rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .conTitle > div p { font-size: 1.6rem; } } .contentWarp .mypageWarp .rightConWarp .conTitle > div .searchBoxWarp { margin-top: 1rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .conTitle > div .searchBoxWarp { margin-top: 0rem; } } .contentWarp .mypageWarp .rightConWarp .conTitle > div .searchBoxWarp .searchTextBox { border-left: 1px solid #dedede; } .contentWarp .mypageWarp .rightConWarp .conTitle.serviceOut h2 { display: block; font-size: 2rem; font-weight: 600; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .conTitle.serviceOut h2 { font-size: 3rem; } } .contentWarp .mypageWarp .rightConWarp .conTitle.serviceOut p { margin-top: 1.5rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .conTitle.serviceOut p { margin-top: 2rem; } } .contentWarp .mypageWarp .rightConWarp .tabWarp { margin-top: 0rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .tabWarp { margin-top: 4rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp { margin-top: 3rem; width: 100%; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div h3 { font-size: 1.8rem; font-weight: 600; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div h3 { font-size: 2rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp { margin-top: 2rem; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li { border: 1px solid #dedede; border-radius: 0.6rem; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem { display: flex; width: 100%; flex-wrap: wrap; flex-shrink: 2; align-items: center; padding: 2rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem { flex-wrap: nowrap; padding: 0; } } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem { justify-content: space-between; flex-wrap: nowrap; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo { display: flex; width: 100%; flex-wrap: wrap; align-items: center; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid #dedede; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo { padding-bottom: 0; margin-bottom: 0; border-bottom: none; flex-wrap: nowrap; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div { display: flex; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div > p { min-width: 7.5rem; height: 7.5rem; overflow: hidden; margin-left: 0rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div > p { min-width: 10rem; height: 10rem; margin-left: 0rem; } } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div > p { min-width: 14rem; height: 14rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div > p img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.6rem; aspect-ratio: 1/1; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div > p img { border-radius: 0; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div dl { margin-left: 1.5rem; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center; width: 100%; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div dl { max-width: 50%; margin-left: 2rem; } } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div dl { max-width: 50%; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div dl dt { font-weight: 600; font-size: 1.6rem; color: #000; line-height: 2rem; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div dl dt { font-size: 2rem; line-height: 2.6rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div dl dd { font-weight: 400; font-size: 1.4rem; line-height: 1.2; color: #676767; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div dl dd span { display: block; font-size: 1.4rem; color: #05141f; margin-bottom: 0.5rem; font-weight: 700; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div dl dt, .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div dl dd { width: 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div dl dt, .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div dl dd { -webkit-line-clamp: 2; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div dl dt + dd { margin-top: 1rem; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div dl dt + dd { margin-top: 1rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div dl dd + dd { margin-top: 1.5rem; font-size: 1.5rem; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div dl dd + dd { margin-top: 3rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo + ul { padding-right: 0; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo + ul { min-width: 28rem; padding-right: 2rem; } } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo + ul { min-width: 30rem; padding-right: 0; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo + ul li { font-size: 1.4rem; color: #000; font-weight: 400; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo + ul li + li { margin-top: 0.5rem; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo + ul.bu-type li { position: relative; font-size: 1.4rem; font-weight: 400; color: #676767; padding: 0 0 0 1rem; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo + ul.bu-type li::before { content: "∙"; position: absolute; top: 0; left: 0; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .components { background-color: #f3f3f3; padding: 3rem; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .components { padding: 2rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .components .componentsTitle { font-size: 1.6rem; font-weight: 600; color: #000000; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .components .componentsTitle { font-size: 1.4rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .components .componentsList { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin-top: 0.2rem; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .components .componentsList { display: block; margin-top: 0.8rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .components .componentsList .item { display: flex; justify-content: flex-start; align-items: center; width: 33.333%; text-align: center; margin-bottom: 1.5rem; padding-right: 1.5rem; } @media (max-width: 1024px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .components .componentsList .item { width: 100%; margin-right: 0; text-align: left; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .components .componentsList .item .itemImg { width: 4rem; height: 4rem; border-radius: 0.6rem; overflow: hidden; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .components .componentsList .item .itemImg img { width: 4rem; height: 4rem; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .components .componentsList .item .itemTitle { padding-left: 1.2rem; font-size: 1.4rem; font-weight: 600; line-height: 1.8rem; text-align: left; width: calc(100% - 4rem); } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .components .componentsList .item .itemTitle { margin-top: 0; padding-left: 0.7rem; font-weight: 400; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .thankInfo { padding: 1rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .thankInfo { padding: 2rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .thankInfo dt { display: flex; justify-content: center; font-weight: 600; font-size: 1.8rem; line-height: 2.4rem; text-align: center; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .thankInfo dt { font-size: 2rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .thankInfo dd { display: flex; justify-content: center; font-size: 1.4rem; margin-top: 1rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .thankInfo dd { font-size: 1.6rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul li + li { margin-top: 1rem; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.subScription .itemListWarp ul li .cartItem .cartItemInfo > div dl dt span { color: #f3c300; font-size: 1.4rem; display: block; margin-bottom: 1rem; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div + div { margin-top: 1.5rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div + div { margin-top: 4rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList { width: 100%; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul { width: 100%; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li { border: 1px solid #dedede; border-radius: 0.6rem; width: 100%; overflow: hidden; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .paySummary { padding: 2rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .paySummary { padding: 3rem; } } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .paySummary { flex-wrap: nowrap; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .paySummary dl { width: 100%; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .paySummary dl { width: 60%; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .paySummary dl dt { font-weight: 600; font-size: 1.6rem; line-height: 2.4rem; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .paySummary dl dt .badge { margin-right: 1rem; padding: 0.4rem 0.5rem 0.3rem 0.6rem; font-size: 1.2rem; font-weight: 600; color: #ffffff; background-color: #ff0000; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .paySummary dl dd { display: flex; justify-content: space-between; margin-top: 2rem; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .paySummary dl dd ul li { font-size: 1.4rem; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .paySummary dl dd ul li + li { margin-top: 1rem; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .paySummary div.totalPay { width: 100%; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #dedede; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .paySummary div.totalPay { width: 40%; margin-top: 0; padding-top: 0; border-top: 0; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .paySummary div.totalPay dl { display: flex; align-items: center; width: 100%; padding-top: 1rem; justify-content: space-between; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .paySummary div.totalPay dl { justify-content: space-between; padding-top: 0.5rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .paySummary div.totalPay dl dt { font-size: 1.6rem; font-weight: 400; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .paySummary div.totalPay dl dd { margin-top: 0; margin-left: 1rem; font-weight: 400; font-size: 1.6rem; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .paySummary div.totalPay dl dd.amount { font-weight: 600; font-size: 1.8rem; color: #000000; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .paySummary div.totalPay dl.totalInfo { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px dashed #dedede; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .paySummary div.totalPay dl.totalInfo dt { font-weight: 600; color: #000000; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .paySummary div.totalPay dl.totalInfo dd.amount { font-weight: 600; font-size: 1.8rem; color: #000000; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .openView { width: 100%; height: 5rem; align-items: center; justify-content: center; background-color: #f3f3f3; display: flex; border-top: 1px solid #dedede; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .openView span { color: #676767; font-size: 1.4rem; font-weight: 600; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .openView::after { content: ""; display: block; margin-left: 0.8rem; width: 1.2rem; height: 0.6rem; background-image: url(/kr/assets/images/common/icon-arrow_black.svg); background-repeat: no-repeat; background-size: contain; background-position: center right; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .openView.active::after { content: ""; transform: rotate(-180deg); background-position: center left; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .payAll { border-top: 1px solid #dedede; display: none; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .payAll .tableHead { width: 100%; display: none; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; border-bottom: 1px solid #aaa; padding-top: 2.5rem; padding-bottom: 2.5rem; padding-left: 3rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .payAll .tableHead { display: grid; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .payAll .tableHead p { font-size: 1.4rem; font-weight: 600; color: #676767; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .payAll ul li { border-bottom: 1px solid #dedede; padding-top: 2.5rem; padding-bottom: 2.5rem; padding-left: 2rem; padding-right: 2rem; display: block; align-items: center; grid-template-columns: 2fr 1fr 1fr 2fr; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .payAll ul li { display: grid; padding-left: 3rem; padding-right: 0rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .payAll ul li:last-child { border-bottom: 0; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .payAll ul li p { font-size: 1.4rem; margin-top: 1rem; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .payAll ul li p { margin-top: 0; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .payAll ul li p span { margin-right: 1rem; display: inline-block; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .payAll ul li p span { display: none; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .payAll ul li dl { width: 100%; border-bottom: 1px solid #aaa; margin-bottom: 1.5rem; padding-bottom: 1.5rem; justify-content: flex-start; padding-right: 1rem; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .payAll ul li dl { justify-content: flex-end; border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .payAll ul li dl dt { font-weight: 600; font-size: 1.4rem; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .payAll ul li dl dd { font-weight: 400; margin-top: 0.5rem; font-size: 1.4rem; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .payAll ul li div { display: flex; margin-top: 1rem; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .payAll ul li div { display: grid; margin-top: 0; grid-template-columns: 1fr 1fr; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .payAll ul li div p { font-size: 1.4rem; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .payAll ul li div p + p { border-left: 1px solid #dedede; padding-left: 1rem; margin-left: 1rem; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li .payAll ul li div p + p { padding-left: 0rem; margin-left: 0rem; border-left: none; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div.myPayList > ul > li + li { margin-top: 3rem; } .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 .infoWarp { display: none; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 .infoWarp { display: block; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList { border-top: 1px solid #999; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList { border-top: 0; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li { border-radius: 0; border: 0; border-bottom: 1px solid #dedede; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li { border: 1px solid #dedede; border-radius: 0.6rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary { position: relative; flex-wrap: nowrap; align-items: stretch; padding: 1.5rem 0; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary { flex-direction: column; align-items: flex-start; min-height: 16.2rem; padding: 3.2rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary > dl { display: flex; flex-direction: column; align-items: stretch; width: 60%; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary > dl { margin-top: 3.2rem; width: 100%; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary > dl dt { min-height: 3.08rem; padding-top: 0; font-size: 1.4rem; color: #000; line-height: 1.1; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary > dl dt { padding-top: 1.2rem; font-size: 2rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary > dl dd { position: static; font-size: 1.4rem; color: #676767; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary > dl dd { position: absolute; top: 0; right: 3.2rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary div.totalPay { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-around; padding-top: 0; margin-top: 0; border-top: 0; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary div.totalPay { display: flex; justify-content: space-between; flex-direction: row; width: 100%; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary div.totalPay dl { justify-content: flex-start; width: auto; padding-top: 0; } .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary div.totalPay dl dt { font-size: 1.4rem; font-weight: 400; color: #000; letter-spacing: -0.075em; } .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary div.totalPay dl dd { margin-top: 0; margin-left: 1rem; font-weight: 400; font-size: 1.4rem; } .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary div.totalPay dl dd.amount { font-weight: 600; font-size: 1.4rem; color: #000000; } .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary div.totalPay dl.status { position: static; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary div.totalPay dl.status { position: absolute; top: 3.2rem; left: 3.2rem; width: auto; padding-top: 0; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary div.totalPay dl.status dt { font-size: 1.4rem; font-weight: 600; color: #05141f; line-height: 1.2; } .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary div.totalPay dl.status dd { display: flex; align-items: center; margin-left: 0.7rem; font-size: 1.4rem; font-weight: 600; color: #05141f; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary div.totalPay dl.status dd { margin-left: 1rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary div.totalPay dl.status dd:before { content: ""; display: block; width: 1px; height: 1rem; margin-right: 0.6rem; background-color: #d9d9d9; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary div.totalPay dl.status dd:before { margin-right: 0.9rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary div.totalPay dl.totalInfo { flex-wrap: wrap; justify-content: flex-end; margin-top: 0; padding-top: 0; border-top: 0; } .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary div.totalPay dl.totalInfo dt { font-weight: 600; color: #000000; } .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary div.totalPay dl.totalInfo dd.amount { font-weight: 600; font-size: 1.4rem; color: #000000; } .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary div.totalPay dl.totalInfo dd.cost { display: flex; justify-content: flex-end; width: 100%; font-weight: 400; font-size: 1.4rem; color: #9ea1a2; text-align: right; text-decoration: line-through; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li .paySummary div.totalPay dl.totalInfo dd.cost { position: absolute; bottom: 1.3rem; } } .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li + li { margin-top: 0; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myItemWarp.type2 > div.myPayList > ul > li + li { margin-top: 1rem; } } .contentWarp .mypageWarp .rightConWarp .myItemViewWrap { margin-top: 3rem; } .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .borderView dl { display: flex; justify-content: flex-start; align-items: center; position: relative; padding: 2.2rem 0; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .borderView dl { display: block; padding: 2rem 0; } } .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .borderView dl .itemName { width: 15.5rem; font-size: 1.6rem; line-height: 2.4rem; color: #676767; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .borderView dl .itemName { font-size: 1.4rem; line-height: 2.2rem; } } .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .borderView dl .itemValue { display: flex; justify-content: flex-start; align-items: center; width: calc(100% - 15.5rem); font-size: 1.6rem; line-height: 2.4rem; color: #000000; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .borderView dl .itemValue { display: block; width: 100%; margin-top: 1rem; font-size: 1.4rem; line-height: 2.2rem; } } .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .borderView dl .itemValue::before { content: ""; display: block; position: absolute; top: 2.6rem; bottom: 2.6rem; left: 13.5rem; width: 0.1rem; height: auto; margin-right: 2rem; background-color: #dedede; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .borderView dl .itemValue::before { display: none; } } .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .borderView :not(:first-child) { border-top: 0; } .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .contentsWrap { margin-top: 0; } .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .contentsWrap .title { font-size: 1.6rem; font-weight: 600; line-height: 1.4rem; color: #000000; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .contentsWrap .title { line-height: 2.4rem; } } .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .contentsWrap .imgWrap { margin-top: 2rem; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .contentsWrap .imgWrap { margin-top: 1.5rem; } } .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .contentsWrap .imgWrap img { width: 100%; } .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .contentsWrap .contents + .title { margin-top: 2.2rem; } .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .contentsWrap .text { margin-top: 1rem; font-size: 1.4rem; font-weight: 400; line-height: 1.2; color: #aaaaaa; } .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .optionWrap { display: flex; flex-wrap: wrap; margin-top: 5rem; } .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .optionWrap .title { width: 100%; padding: 2.4rem 0; font-size: 1.6rem; font-weight: 600; color: #000; border-top: 1px solid #999; border-bottom: 1px solid #dedede; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .optionWrap .title { font-size: 1.4rem; } } .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .optionWrap .contents { flex: 1; padding: 2rem 0; font-size: 1.4rem; font-weight: 600; color: #000; border-bottom: 1px solid #dedede; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .optionWrap .contents { flex: none; width: 100%; } } .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .optionWrap .contents ul li + li { margin-top: 1rem; } .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .optionWrap .contents strong { display: block; margin-bottom: 1.5rem; color: #676767; } .contentWarp .mypageWarp .rightConWarp .myItemViewWrap .optionWrap .contents span { padding-left: 1rem; font-size: 1.2rem; color: #aaa; font-weight: 400; } .contentWarp .mypageWarp .rightConWarp .btnWarp { width: 100%; margin: 0 auto; margin-top: 4rem; } .contentWarp .mypageWarp .rightConWarp .btnWarp a::after, .contentWarp .mypageWarp .rightConWarp .btnWarp a::before { width: 3.2rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .btnWarp a::after, .contentWarp .mypageWarp .rightConWarp .btnWarp a::before { width: 3.2rem; } } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .btnWarp { width: 16rem; margin-top: 5rem; } } .contentWarp .mypageWarp .rightConWarp .btnWarp.btnWarpFull { width: 100%; margin-bottom: 3rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .btnWarp.btnWarpFull { width: 100%; } } .contentWarp .mypageWarp .rightConWarp .carswBtn { width: 100%; margin: 0 auto; margin-top: 5rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .carswBtn { width: 37rem; } } .contentWarp .mypageWarp .rightConWarp .carswBtn .towButton { display: flex; flex-wrap: wrap; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .carswBtn .towButton { flex-wrap: nowrap; } } .contentWarp .mypageWarp .rightConWarp .carswBtn .towButton a + a { margin-top: 1rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .carswBtn .towButton a + a { margin-left: 1rem; margin-top: 0; } } .contentWarp .mypageWarp .rightConWarp .itemCancel { border: 1px solid #dedede; border-radius: 0.6rem; padding: 2rem; text-align: center; margin-top: 1rem; display: block; align-items: center; justify-content: center; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .itemCancel { display: flex; } } .contentWarp .mypageWarp .rightConWarp .itemCancel p { font-size: 1.4rem; color: #676767; display: flex; text-align: center; justify-content: center; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .itemCancel p { font-size: 1.6rem; } } .contentWarp .mypageWarp .rightConWarp .itemCancel p + p { display: flex; align-items: center; margin-top: 1rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .itemCancel p + p { margin-top: 0; } } .contentWarp .mypageWarp .rightConWarp .itemCancel p + p::before { content: ""; width: 1px; height: 1.6rem; background-color: #dedede; display: none; margin-left: 1rem; margin-right: 1rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .itemCancel p + p::before { display: block; } } .contentWarp .mypageWarp .rightConWarp .infoRefundDefault { margin-top: 3rem; padding-bottom: 1rem; } .contentWarp .mypageWarp .rightConWarp .infoRefundDefault ul li { position: relative; font-size: 1.4rem; font-weight: 400; color: #676767; line-height: 2.2rem; padding: 0.5rem 0 0.5rem 1rem; } .contentWarp .mypageWarp .rightConWarp .infoRefundDefault ul li::before { content: "∙"; position: absolute; top: 0.6rem; left: 0; } .contentWarp .mypageWarp .rightConWarp .infoRefund { margin-top: 3rem; } .contentWarp .mypageWarp .rightConWarp .infoRefund .title { font-size: 1.8rem; font-weight: 600; color: #000000; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .infoRefund .title { font-size: 1.6rem; } } .contentWarp .mypageWarp .rightConWarp .infoRefund .title + .summary { margin-top: 1rem; font-size: 1.4rem; font-weight: 600; } .contentWarp .mypageWarp .rightConWarp .infoRefund .title + .summary + ul { margin-top: 0; } .contentWarp .mypageWarp .rightConWarp .infoRefund ul { margin-top: 1rem; } .contentWarp .mypageWarp .rightConWarp .infoRefund ul li { position: relative; font-size: 1.4rem; font-weight: 400; color: #676767; line-height: 2.2rem; padding: 0.125rem 0 0 1rem; } .contentWarp .mypageWarp .rightConWarp .infoRefund ul li::before { content: "∙"; position: absolute; top: 0; left: 0; } .contentWarp .mypageWarp .rightConWarp .infoRefund .serviceLinked { width: 100%; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .infoRefund .serviceLinked { width: 26rem; } } .contentWarp .mypageWarp .rightConWarp .infoRefund .desc { margin-top: 1rem; font-size: 1.4rem; font-weight: 400; color: #676767; line-height: 2.2rem; } .contentWarp .mypageWarp .rightConWarp .infoRefund .infoList { margin: 4rem 0 1rem; padding: 1.8rem 0; border-width: 1px 0 1px 0; border-style: solid; border-color: #dedede; } .contentWarp .mypageWarp .rightConWarp .infoRefundStep { margin-top: 3rem; } .contentWarp .mypageWarp .rightConWarp .infoRefundStep .title { font-size: 1.8rem; font-weight: 600; color: #000000; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .infoRefundStep .title { font-size: 1.6rem; } } .contentWarp .mypageWarp .rightConWarp .infoRefundStep ul { margin-top: 1rem; } .contentWarp .mypageWarp .rightConWarp .infoRefundStep ul li { position: relative; font-size: 1.4rem; font-weight: 400; color: #676767; line-height: 2.2rem; padding: 0.5rem 0 0.5rem 1rem; } .contentWarp .mypageWarp .rightConWarp .infoRefundCalc { margin-top: 3rem; } .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .title { font-size: 1.8rem; font-weight: 600; color: #000000; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .title { font-size: 1.6rem; } } .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .titleSec { margin-top: 3rem; font-size: 1.8rem; font-weight: 600; color: #000000; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .titleSec { font-size: 1.6rem; } } .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .info { margin-top: 1rem; font-size: 1.4rem; font-weight: 400; color: #676767; line-height: 2.2rem; } .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .completeForm { margin-top: 2rem; } .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .completeForm > div { border-top: 1px solid #999999; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .completeForm > div { border-top: 1px solid #dedede; } } .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .completeForm > div > dl { border-bottom: 1px solid #dedede; display: flex; flex-wrap: wrap; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .completeForm > div > dl { flex-wrap: nowrap; } } .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .completeForm > div > dl:last-child { border-bottom: 1px solid #999; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .completeForm > div > dl:last-child { border-bottom: 1px solid #dedede; } } .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .completeForm > div > dl > dt { padding-top: 1rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .completeForm > div > dl > dt { padding-top: 2.2rem; padding-bottom: 2.2rem; } } .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .completeForm > div > dl > dd { padding-top: 1rem; padding-bottom: 1rem; font-weight: 600; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .completeForm > div > dl > dd { padding-top: 2.2rem; padding-bottom: 2.2rem; font-weight: 400; } } .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .completeForm > div > dl > dt { width: 100%; font-size: 1.4rem; padding-left: 0rem; text-align: left; padding-bottom: 0; color: #676767; font-weight: 700; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .completeForm > div > dl > dt { position: relative; font-size: 1.6rem; padding-bottom: 2.2rem; min-width: 15.7rem; width: auto; } .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .completeForm > div > dl > dt::after { content: ""; position: absolute; top: 2.2rem; right: 0; width: 0.1rem; height: 1.6rem; background-color: #dedede; } } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .completeForm > div > dl > dt.calc::after { content: ""; height: 4.6rem; } } .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .completeForm > div > dl > dd { padding-left: 0; width: 100%; font-size: 1.4rem; color: #000; line-height: 2.2rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .infoRefundCalc .completeForm > div > dl > dd { padding-left: 2rem; font-size: 1.6rem; line-height: 2.4rem; } } .contentWarp .mypageWarp .rightConWarp .itemInfo { margin-top: 7rem; } .contentWarp .mypageWarp .rightConWarp .itemInfo h3 { font-size: 1.8rem; font-weight: 600; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .itemInfo h3 { font-size: 2rem; } } .contentWarp .mypageWarp .rightConWarp .itemInfo .editBox { margin-top: 2rem; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; padding: 2rem 0; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .itemInfo .editBox { border-top: none; border-bottom: none; padding: 1.5rem 0; } } .contentWarp .mypageWarp .rightConWarp .cancleInfo { margin-top: 4rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .cancleInfo { margin-top: 5rem; } } .contentWarp .mypageWarp .rightConWarp .cancleInfo dl dt { font-size: 1.6rem; font-weight: 600; line-height: 2.4rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .cancleInfo dl dt { font-size: 1.8rem; } } .contentWarp .mypageWarp .rightConWarp .cancleInfo dl dd { font-size: 1.4rem; margin-top: 1rem; line-height: 2.4rem; color: #000; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .cancleInfo dl dd { font-size: 1.4rem; } } .contentWarp .mypageWarp .rightConWarp .cancleInfo dl + dl { margin-top: 3rem; } .contentWarp .mypageWarp .rightConWarp .cancleInfo .cancleInfoCon { margin-top: 3rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .cancleInfo .cancleInfoCon { margin-top: 3rem; } } .contentWarp .mypageWarp .rightConWarp .cancleInfo .cancleInfoCon dd { color: #676767; font-size: 1.4rem; } .contentWarp .mypageWarp .rightConWarp .questions { margin-top: 2rem; } .contentWarp .mypageWarp .rightConWarp .questions ul li { border: 1px solid #dedede; border-radius: 0.6rem; padding: 2.5rem; } @media (max-width: 501px) { .contentWarp .mypageWarp .rightConWarp .questions ul li { padding: 2rem; } } .contentWarp .mypageWarp .rightConWarp .questions ul li:hover { border: 1px solid #000; } .contentWarp .mypageWarp .rightConWarp .questions ul li a > div { display: flex; align-items: center; gap: 0.8rem; } .contentWarp .mypageWarp .rightConWarp .questions ul li a > div .badge { display: inline-flex; flex: 0 0 auto; height: 2.5rem; width: 6.8rem; align-items: center; justify-content: center; border: 1px solid #dedede; font-size: 1.4rem; line-height: 1.4rem; font-weight: 600; color: #05141f; } .contentWarp .mypageWarp .rightConWarp .questions ul li a > div .badge.mr-12 { margin-right: 1.2rem; } .contentWarp .mypageWarp .rightConWarp .questions ul li a > div .badge.an { color: #9ea1a2; } .contentWarp .mypageWarp .rightConWarp .questions ul li a > div .badge.ay { color: #000000; } @media (max-width: 501px) { .contentWarp .mypageWarp .rightConWarp .questions ul li a > div .badge { width: 5.7rem; font-size: 1.1rem; } } .contentWarp .mypageWarp .rightConWarp .questions ul li a > div .inquiry-type { display: inline-block; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.4rem; font-weight: 400; line-height: 1.4rem; color: #9ea1a2; min-width: 6rem; } .contentWarp .mypageWarp .rightConWarp .questions ul li a > div .inquiry-prd { display: inline-block; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.4rem; font-weight: 400; line-height: 1.4rem; color: #9ea1a2; } .contentWarp .mypageWarp .rightConWarp .questions ul li a > div em { position: relative; color: #9ea1a2; font-weight: 400; font-size: 1.4rem; padding-left: 0.8rem; } .contentWarp .mypageWarp .rightConWarp .questions ul li a > div em:before { content: ""; display: inline-block; position: absolute; left: 0; border-left: 1px solid #9ea1a2; height: 14px; vertical-align: middle; } .contentWarp .mypageWarp .rightConWarp .questions ul li a > p { margin-top: 1rem; color: #000; font-weight: 600; font-size: 1.8rem; line-height: 2.4rem; } @media (max-width: 501px) { .contentWarp .mypageWarp .rightConWarp .questions ul li a > p { font-size: 1.6rem; } } .contentWarp .mypageWarp .rightConWarp .questions ul li + li { margin-top: 1rem; } .contentWarp .mypageWarp .rightConWarp .questionsView { margin-top: 3rem; border: 1px solid #dedede; border-radius: 0.6rem; padding: 2.5rem; } .contentWarp .mypageWarp .rightConWarp .questionsView .usrQuestions > div, .contentWarp .mypageWarp .rightConWarp .questionsView .adminAnswer > div { display: flex; align-items: center; gap: 0.8rem; } .contentWarp .mypageWarp .rightConWarp .questionsView .usrQuestions > div .badge, .contentWarp .mypageWarp .rightConWarp .questionsView .adminAnswer > div .badge { display: inline-flex; flex: 0 0 auto; height: 2.5rem; width: 6.8rem; align-items: center; justify-content: center; border: 1px solid #dedede; font-size: 1.4rem; line-height: 1.4rem; font-weight: 600; color: #05141f; } .contentWarp .mypageWarp .rightConWarp .questionsView .usrQuestions > div .badge.mr-12, .contentWarp .mypageWarp .rightConWarp .questionsView .adminAnswer > div .badge.mr-12 { margin-right: 1.2rem; } .contentWarp .mypageWarp .rightConWarp .questionsView .usrQuestions > div .badge.an, .contentWarp .mypageWarp .rightConWarp .questionsView .adminAnswer > div .badge.an { color: #9ea1a2; } .contentWarp .mypageWarp .rightConWarp .questionsView .usrQuestions > div .badge.ay, .contentWarp .mypageWarp .rightConWarp .questionsView .adminAnswer > div .badge.ay { color: #000000; } @media (max-width: 501px) { .contentWarp .mypageWarp .rightConWarp .questionsView .usrQuestions > div .badge, .contentWarp .mypageWarp .rightConWarp .questionsView .adminAnswer > div .badge { width: 5.7rem; font-size: 1.1rem; } } .contentWarp .mypageWarp .rightConWarp .questionsView .usrQuestions > div .inquiry-type, .contentWarp .mypageWarp .rightConWarp .questionsView .adminAnswer > div .inquiry-type { display: inline-block; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.4rem; font-weight: 400; line-height: 1.4rem; color: #9ea1a2; min-width: 6rem; } .contentWarp .mypageWarp .rightConWarp .questionsView .usrQuestions > div .inquiry-prd, .contentWarp .mypageWarp .rightConWarp .questionsView .adminAnswer > div .inquiry-prd { display: inline-block; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.4rem; font-weight: 400; line-height: 1.4rem; color: #9ea1a2; min-width: 10rem; } .contentWarp .mypageWarp .rightConWarp .questionsView .usrQuestions > div em, .contentWarp .mypageWarp .rightConWarp .questionsView .adminAnswer > div em { flex: 1 0 13.5rem; position: relative; color: #9ea1a2; font-weight: 400; font-size: 1.4rem; white-space: nowrap; } .contentWarp .mypageWarp .rightConWarp .questionsView .usrQuestions dl, .contentWarp .mypageWarp .rightConWarp .questionsView .adminAnswer dl { margin-top: 1rem; } .contentWarp .mypageWarp .rightConWarp .questionsView .usrQuestions dl dt, .contentWarp .mypageWarp .rightConWarp .questionsView .adminAnswer dl dt { font-size: 1.8rem; font-weight: 600; } .contentWarp .mypageWarp .rightConWarp .questionsView .usrQuestions dl dd, .contentWarp .mypageWarp .rightConWarp .questionsView .adminAnswer dl dd { margin-top: 2rem; font-size: 1.4rem; color: #676767; line-height: 2.4rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .questionsView .usrQuestions dl dd, .contentWarp .mypageWarp .rightConWarp .questionsView .adminAnswer dl dd { font-size: 1.6rem; } } .contentWarp .mypageWarp .rightConWarp .questionsView .usrQuestions > div em { padding-left: 0.8rem; } .contentWarp .mypageWarp .rightConWarp .questionsView .usrQuestions > div em:before { content: ""; display: inline-block; position: absolute; left: 0; border-left: 1px solid #9ea1a2; height: 14px; vertical-align: middle; } .contentWarp .mypageWarp .rightConWarp .questionsView .fileBox { margin-top: 2rem; background-color: #f3f3f3; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .questionsView .fileBox { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-top: 3rem; } } .contentWarp .mypageWarp .rightConWarp .questionsView .fileBox p { display: flex; color: #000; font-size: 1.6rem; } .contentWarp .mypageWarp .rightConWarp .questionsView .fileBox p::after { content: ""; width: 2rem; height: 2rem; display: block; background-image: url(/kr/assets/images/common/icon-file.svg); background-repeat: no-repeat; background-size: contain; margin-left: 1rem; } .contentWarp .mypageWarp .rightConWarp .questionsView .adminAnswer { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid #dedede; } .contentWarp .mypageWarp .rightConWarp .listbtnWarp { width: 100%; margin: 0 auto; margin-top: 6rem; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .listbtnWarp { width: 16rem; margin-top: 7rem; } } .contentWarp .mypageWarp .rightConWarp .listbtnWarp a::before, .contentWarp .mypageWarp .rightConWarp .listbtnWarp a::after { width: 3.2rem; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .listbtnWarp a::before, .contentWarp .mypageWarp .rightConWarp .listbtnWarp a::after { width: 3.2rem; } } .contentWarp .mypageWarp .rightConWarp .listbtnWarp .oneButton { width: 16rem; } @media (max-width: 501px) { .contentWarp .mypageWarp .rightConWarp .listbtnWarp .oneButton { width: 100%; } } .contentWarp .mypageWarp .rightConWarp .myAccount { margin-top: 4rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount { margin-top: 5rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .myinfomation { border: 1px solid #dedede; padding: 2.5rem; border-radius: 0.6rem; display: flex; justify-content: space-between; flex-wrap: wrap; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myAccount .myinfomation { flex-wrap: nowrap; } } .contentWarp .mypageWarp .rightConWarp .myAccount .myinfomation > div { width: 100%; } .contentWarp .mypageWarp .rightConWarp .myAccount .myinfomation > div p { display: flex; align-items: center; font-size: 1.4rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .myinfomation > div p { font-size: 1.6rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .myinfomation > div p strong { font-size: 1.8rem; font-weight: 600; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .myinfomation > div p strong { font-size: 2rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .myinfomation > div p span { font-size: 1.4rem; font-weight: 400; margin-left: 1rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .myinfomation > div p span { font-size: 1.6rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .myinfomation > div p:nth-child(2) { margin-top: 2rem; color: #676767; } .contentWarp .mypageWarp .rightConWarp .myAccount .myinfomation > div p:nth-child(3) { margin-top: 1rem; color: #676767; } .contentWarp .mypageWarp .rightConWarp .myAccount .myinfomation > div a { font-size: 1.4rem; color: #676767; display: flex; align-items: center; justify-content: space-between; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myAccount .myinfomation > div a { font-size: 1.6rem; width: 13.5rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .myinfomation > div a span { display: block; border-bottom: 1px solid #676767; } .contentWarp .mypageWarp .rightConWarp .myAccount .myinfomation > div a::after { content: ""; width: 1.6rem; height: 2.5rem; display: block; margin-left: 0.5rem; background: url(/kr/assets/images/common/icon-tbarrow.svg) center right no-repeat; background-size: 1.4rem; transform: rotate(-90deg); } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .myinfomation > div a::after { background-size: 1.6rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .myinfomation div + div { margin-top: 3rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myAccount .myinfomation div + div { width: 17rem; margin-top: 0; } } .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre { margin-top: 3rem; } .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre h3 strong, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre h3 strong { font-size: 1.8rem; font-weight: 600; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre h3 strong, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre h3 strong { font-size: 2rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre h3 p, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre h3 p { margin-top: 1.5rem; line-height: 2.2rem; font-size: 1.4rem; font-weight: 400; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre h3 p, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre h3 p { font-size: 1.6rem; line-height: 2.4rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre .unitCheck2, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre .unitCheck2 { margin-top: 0; padding: 3rem 0; border-top: 1px solid #dedede; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre .unitCheck2, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre .unitCheck2 { padding: 2.5rem 0 2rem 0; } } .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre .unitCheck2 .info, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre .unitCheck2 .info { margin-top: 0; padding-bottom: 2.4rem; font-size: 1.8rem; color: #000000; font-weight: 600; line-height: 2.6rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre .unitCheck2 .info, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre .unitCheck2 .info { font-size: 2rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre .unitCheck2 label, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre .unitCheck2 label { margin-top: 0; } .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre .unitCheck2 label:last-child, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre .unitCheck2 label:last-child { margin-top: 2rem; } .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre .marketingCheck, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre .marketingCheck { margin-top: 3rem; padding-bottom: 3rem; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre .marketingCheck, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre .marketingCheck { margin-top: 2rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre .marketingCheck span, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre .marketingCheck span { font-size: 1.6rem; font-weight: 400; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre .marketingCheck span, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre .marketingCheck span { font-size: 1.4rem; line-height: 2.4rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre .marketingCheck a, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre .marketingCheck a { font-size: 1.4rem; font-weight: 400; color: #676767; margin-left: 1rem; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre .marketingCheck a, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre .marketingCheck a { font-size: 1.4rem; margin-left: 0.5rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre .marketingCheck .btn-more, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre .marketingCheck .btn-more { font-size: 1.4rem; color: #676767; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre .marketingCheck .btn-more, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre .marketingCheck .btn-more { margin-top: 0.4rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre .marketingCheck .btn-more em, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre .marketingCheck .btn-more em { border: 0; } .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre .marketingCheck .btn-more:after, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre .marketingCheck .btn-more:after { width: 0.8rem; height: 1rem; margin-left: 0.5rem; } .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre div, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre div { margin-top: 3rem; } .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre div label, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre div label { display: flex; align-items: flex-start; cursor: pointer; } .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre div label input, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre div label input { min-width: 2rem; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre div label input, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre div label input { margin-top: 0.3rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre div label span, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre div label span { margin-left: 1rem; font-size: 1.4rem; line-height: 2rem; } .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre div label + label, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre div label + label { margin-top: 2.4rem; } .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre .table-wrap, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre .table-wrap { margin-top: 2.4rem; } .contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre .noticeTextUnderTable, .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre .noticeTextUnderTable { margin-top: 2.4rem; } .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre { margin-top: 4rem; } .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre div label { width: 100%; } @media (min-width: 1240px) { .contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre div label { align-items: center; } } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut { margin-top: 2rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut { margin-top: 0; } } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .editorBox { border: 1px solid #dedede; border-radius: 0.6rem; min-height: 28rem; padding: 2rem; } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut dl { margin-top: 2rem; display: flex; align-items: center; flex-wrap: wrap; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut dl { flex-wrap: nowrap; } } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut dl dt { width: 100%; font-size: 1.4rem; font-weight: 700; color: #676767; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut dl dt { width: 16rem; font-size: 1.6rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut dl dd { width: 100%; margin-top: 1rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut dl dd { margin-top: 0rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut dl dd input { width: 100%; border: 1px solid #dedede; height: 4.5rem; padding: 1.5rem; font-size: 1.4rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut dl dd input { font-size: 1.6rem; height: 5rem; padding: 1.5rem 1.7rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .noOutInfo dl { display: block; padding-top: 2rem; padding-bottom: 2rem; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .noOutInfo dl { display: flex; padding-top: 0rem; padding-bottom: 0rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .noOutInfo dl:first-child { border-top: 1px solid #999; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .noOutInfo dl:first-child { border-top: 1px solid #dedede; } } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .noOutInfo dl dt { width: 100%; font-size: 1.4rem; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .noOutInfo dl dt { width: 15.3rem; background-color: #f3f3f3; padding: 3rem 2rem; font-size: 1.6rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .noOutInfo dl dd { margin-top: 1.5rem; font-size: 1.4rem; line-height: 2.2rem; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .noOutInfo dl dd { padding-left: 3rem; margin-top: 0; font-size: 1.6rem; line-height: 2.4rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .noOutInfo dl + dl { margin-top: 0; border-bottom: 1px solid #999; border-top: 1px solid #dedede; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .noOutInfo dl + dl { border-bottom: 1px solid #dedede; } } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut h3 { font-size: 1.8rem; font-weight: 600; color: #000000; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut h3 { font-size: 2rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .radioArea { margin-top: 2.4rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .radioArea { margin-top: 3rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .radioArea .radioItem { display: block; margin-bottom: 2rem; } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .radioArea .radioItem [type=radio] { position: relative; top: -0.1rem; vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: max(1px, 0.1em) solid #05141f; border-radius: 50%; width: 1.5rem; height: 1.5rem; transition: border 0.3s ease-in-out; } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .radioArea .radioItem [type=radio]:checked::after { content: ""; position: absolute; top: 0.3rem; left: 0.3rem; width: 0.7rem; height: 0.7rem; background: #000000; border-radius: 100%; } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .radioArea .radioItem [type=radio]:disabled { background-color: #dedede; box-shadow: none; opacity: 0.7; cursor: not-allowed; } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .radioArea .radioItem [type=radio]:disabled + span { opacity: 0.5; cursor: not-allowed; } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .radioArea .radioItem span { position: relative; font-size: 1.4rem; font-weight: 400; padding-left: 0.5rem; color: #000000; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .radioArea .radioItem span { font-size: 1.6rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .radioArea .radioItem.none span::before { display: none; } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .otherReasons input { width: 100%; border: 1px solid #dedede; height: 4.5rem; padding: 1.5rem; font-size: 1.4rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .otherReasons input { font-size: 1.6rem; height: 5rem; padding: 1.5rem 1.7rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .outInfo { border: 1px solid #dedede; border-radius: 0.6rem; padding: 3rem 2rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .outInfo { padding: 4rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .outInfo p { text-align: center; } .contentWarp .mypageWarp .rightConWarp .myAccount .outInfo p strong { font-size: 1.8rem; font-weight: 600; line-height: 2.4rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .outInfo p strong { font-size: 2rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .outInfo p span { font-size: 1.4rem; font-weight: 400; line-height: 2.2rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount .outInfo p span { font-size: 1.6rem; line-height: 2.4rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount .outInfo p + p { margin-top: 2rem; } .contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation { padding: 0; border: 0; } .contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div p { display: flex; align-items: center; font-size: 1.4rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div p { font-size: 1.6rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div p strong { font-size: 1.8rem; font-weight: 600; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div p strong { font-size: 2.4rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div p span { font-size: 1.4rem; font-weight: 400; margin-left: 1rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div p span { font-size: 1.8rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div p:nth-child(2) { margin-top: 2rem; color: #676767; } .contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div p:nth-child(3) { margin-top: 1rem; color: #676767; } .contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div a { font-size: 1.4rem; color: #676767; display: flex; align-items: center; justify-content: space-between; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div a { font-size: 1.6rem; width: 13.5rem; } } .contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div a span { display: block; border-bottom: 1px solid #676767; } .contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div a::after { content: ""; width: 1.6rem; height: 2.5rem; display: block; margin-left: 0.5rem; background: url(/kr/assets/images/common/icon-tbarrow.svg) center right no-repeat; background-size: 1.4rem; transform: rotate(-90deg); } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div a::after { background-size: 1.6rem; } } .contentWarp .mypageWarp .rightConWarp .mypageLink { padding: 4rem 3rem 0 3rem; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .mypageLink { padding: 4rem 2.4rem 0 2.4rem; text-align: right; } } .contentWarp .mypageWarp .rightConWarp .mypageLink span { display: block; } .contentWarp .mypageWarp .rightConWarp .mypageLink span strong { font-size: 1.6rem; font-weight: 600; color: #000; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .mypageLink span strong { display: block; font-size: 1.4rem; text-align: left; } } .contentWarp .mypageWarp .rightConWarp .mypageLink span a { display: inline-flex; align-items: center; font-size: 1.6rem; font-weight: 400; color: #676767; border-bottom: 1px solid #676767; } @media (max-width: 768px) { .contentWarp .mypageWarp .rightConWarp .mypageLink span a { font-size: 1.4rem; margin-top: 1rem; } } .contentWarp .mypageWarp .rightConWarp .mypageLink span a::after { width: 0.8rem; height: 1rem; margin-left: 0.5rem; } .contentWarp .mypageWarp .rightConWarp .mypageLink span + span { margin-top: 2.4rem; } .contentWarp .mypageWarp .rightConWarp .memberOut { display: flex; align-items: center; justify-content: space-between; white-space: nowrap; width: 18.7rem; margin: 0 auto; margin-top: 6rem; font-size: 1.4rem; color: #676767; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .memberOut { font-size: 1.6rem; width: 21rem; } } .contentWarp .mypageWarp .rightConWarp .memberOut span { display: block; border-bottom: 1px solid #676767; } .contentWarp .mypageWarp .rightConWarp .memberOut::after { content: ""; width: 1.6rem; height: 2.5rem; display: block; margin-left: 0.5rem; background: url(../images/common/icon-tbarrow.svg) center right no-repeat; background-size: 1.4rem; transform: rotate(-90deg); } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .memberOut::after { font-size: 1.6rem; } } .contentWarp .mypageWarp .rightConWarp .inquiryBtn { padding-top: 5rem; width: 100%; margin: 0 auto; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .inquiryBtn { width: 16rem; } } .contentWarp .mypageWarp .rightConWarp .itemStreaming { margin-top: 2rem; } .contentWarp .mypageWarp .rightConWarp .itemStreaming > p { color: #000; font-size: 1.4rem; margin-top: 1rem; line-height: 2.2rem; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .itemStreaming > p { font-size: 1.6rem; line-height: 2.4rem; } } .contentWarp .mypageWarp .rightConWarp .itemStreaming > span { display: block; color: #676767; font-size: 1.4em; margin-top: 1.5rem; line-height: 2.2rem; } @media (min-width: 1025px) { .contentWarp .mypageWarp .rightConWarp .itemStreaming > span { font-size: 1.6rem; line-height: 2.4rem; } } .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li input[type=radio] { visibility: hidden; position: absolute; } .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li input[type=radio]:checked + label { background-color: #05141f; } .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li input[type=radio]:checked + label dt, .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li input[type=radio]:checked + label dd { color: #fff; } .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li input[type=radio]:checked + label dt p, .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li input[type=radio]:checked + label dt strong, .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li input[type=radio]:checked + label dd p, .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li input[type=radio]:checked + label dd strong { color: #fff; } .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li label { display: block; padding: 2.5rem; border: 1px solid #dedede; border-radius: 0.6rem; cursor: pointer; } .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li label dl dt { font-size: 1.8rem; font-weight: bold; } .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li label dl dd { margin-top: 1rem; } .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li label dl dd p { color: #676767; font-size: 1.6rem; line-height: 2.4rem; } .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li label dl dd strong { display: block; color: #676767; font-size: 1.6rem; line-height: 2.4rem; font-weight: bold; margin-top: 2rem; } .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li label dl dd:last-child { margin-top: 3rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li label dl dd:last-child { display: flex; justify-content: space-between; align-items: center; } } .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li label dl dd:last-child .fee { font-weight: bold; font-size: 2rem; display: flex; justify-content: flex-end; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li label dl dd:last-child .fee { display: block; } } .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li label dl dd:last-child .btnWarp { margin: initial; margin-top: 3rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li label dl dd:last-child .btnWarp { margin-top: 0; } } .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li label dl dd:last-child .btnWarp .oneButton a p { color: #676767 !important; } .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li label:hover { border: 1px solid #000; } .contentWarp .mypageWarp .rightConWarp .itemStreaming ul li + li { margin-top: 1rem; } .contentWarp .mypageWarp .rightConWarp .serviceLinkage { margin-bottom: 5rem; } @media (min-width: 768px) { .contentWarp .mypageWarp .rightConWarp .serviceLinkage { margin-bottom: 6rem; } } .productListWarp { margin-top: 2rem; } @media (min-width: 1025px) { .productListWarp { margin-top: 3rem; } } .productListWarp .productLis { margin-top: 1rem; } .productListWarp .productLis ul li { border: 1px solid #dedede; border-radius: 0.6rem; } .productListWarp .productLis ul li .cartItemWrap { display: flex; padding: 2rem; padding-left: 2rem; } @media (max-width: 501px) { .productListWarp .productLis ul li .cartItemWrap { flex-wrap: wrap; } } @media (max-width: 320px) { .productListWarp .productLis ul li .cartItemWrap { flex-wrap: wrap; } } @media (min-width: 768px) { .productListWarp .productLis ul li .cartItemWrap { flex-wrap: nowrap; justify-content: space-between; } } @media (min-width: 1025px) { .productListWarp .productLis ul li .cartItemWrap { padding: 0 3rem 0 0; display: flex; flex-wrap: nowrap; justify-content: space-between; } } .productListWarp .productLis ul li .cartItemWrap .cartItem { display: flex; width: 100%; flex-wrap: wrap; flex-shrink: 2; align-items: center; } @media (min-width: 768px) { .productListWarp .productLis ul li .cartItemWrap .cartItem { flex-wrap: nowrap; padding-right: 3rem; } } @media (min-width: 1025px) { .productListWarp .productLis ul li .cartItemWrap .cartItem { justify-content: space-between; padding-right: 5rem; flex-wrap: nowrap; } } .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo { display: flex; width: 100%; flex-wrap: wrap; align-items: center; } @media (min-width: 768px) { .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo { padding-bottom: 0; margin-bottom: 0; border-bottom: none; flex-wrap: nowrap; } } .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div { display: flex; } @media (min-width: 768px) { .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div { margin-top: 0; } } .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div > p { min-width: 7.5rem; height: 7.5rem; overflow: hidden; border-radius: 0.6rem; } @media (min-width: 768px) { .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div > p { min-width: 12rem; height: 12rem; } } @media (min-width: 1025px) { .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div > p { min-width: 18rem; height: 18rem; border-radius: 0; } } .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div > p img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; aspect-ratio: 1/1; } .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl { margin-left: 1.5rem; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center; width: 100%; } @media (min-width: 768px) { .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl { margin-left: 2rem; } } .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dt { font-weight: 600; font-size: 1.6rem; color: #000; line-height: 2rem; } @media (min-width: 1025px) { .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dt { font-size: 2rem; line-height: 2.6rem; } } .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dd { font-weight: 400; font-size: 1.4rem; line-height: 2rem; color: #676767; } @media (min-width: 1025px) { .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dd { line-height: 2.2rem; } } .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dt, .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dd { width: 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } @media (min-width: 1025px) { .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dt, .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dd { -webkit-line-clamp: 2; } } .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dt { margin-top: 1.2rem; } .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dt + dd { margin-top: 0.5rem; } @media (min-width: 1025px) { .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dt + dd { margin-top: 1rem; } } .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dd + dd { margin-top: 1.5rem; font-size: 1.4rem; } @media (min-width: 1025px) { .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dd + dd { margin-top: 2rem; } } @media (max-width: 501px) { .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl { width: 100%; } } @media (min-width: 768px) { .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl { min-width: 13rem; text-align: right; } } @media (min-width: 1025px) { .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl { min-width: 13rem; text-align: right; } } .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl dt { font-size: 1.4rem; } @media (min-width: 1025px) { .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl dt { font-size: 1.6rem; } } .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl dd { font-size: 2rem; font-weight: 600; margin-top: 1rem; } @media (min-width: 1025px) { .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl dd { font-size: 2.4rem; } } .productListWarp .productLis ul li .cartItemWrap .addBtnWarp { display: flex; flex-grow: 1; align-items: center; margin-top: 3rem; margin-left: 4rem; justify-content: flex-end; } @media (min-width: 501px) { .productListWarp .productLis ul li .cartItemWrap .addBtnWarp { margin-top: 0; } } @media (max-width: 501px) { .productListWarp .productLis ul li .cartItemWrap .addBtnWarp { width: 100%; margin-left: 0rem; } } @media (min-width: 768px) { .productListWarp .productLis ul li .cartItemWrap .addBtnWarp { flex-basis: 18rem; margin-left: 0rem; } } .productListWarp .productLis ul li .cartItemWrap .addBtnWarp .towButton { width: 100%; min-width: 18rem; } .productListWarp .productLis ul li .cartItemWrap .addBtnWarp .towButton button + button { margin-top: 1rem; } @media (min-width: 501px) { .productListWarp .productLis ul li .cartItemWrap .addBtnWarp .towButton { max-width: inherit; } } @media (min-width: 768px) { .productListWarp .productLis ul li .cartItemWrap .addBtnWarp .towButton { min-width: 15rem; max-width: 15rem; flex-direction: column; } } @media (min-width: 1025px) { .productListWarp .productLis ul li .cartItemWrap .addBtnWarp .towButton { min-width: 18rem; max-width: 18rem; } } @media (min-width: 768px) { .productListWarp .productLis ul li .cartItemWrap .addBtnWarp .towButton .rightBtn { margin-left: 0; } } .productListWarp .productLis ul li .components { background-color: #f3f3f3; padding: 3rem 3rem 3rem 6rem; } @media (max-width: 768px) { .productListWarp .productLis ul li .components { padding: 2rem; } } .productListWarp .productLis ul li .components .componentsTitle { font-size: 1.6rem; font-weight: 600; color: #000000; } @media (max-width: 768px) { .productListWarp .productLis ul li .components .componentsTitle { font-size: 1.4rem; } } .productListWarp .productLis ul li .components .componentsList { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; margin-top: 0.2rem; } @media (max-width: 768px) { .productListWarp .productLis ul li .components .componentsList { display: block; margin-top: 0.8rem; } } .productListWarp .productLis ul li .components .componentsList .item { width: 17rem; margin-top: 1.8rem; margin-right: 1.8rem; text-align: center; } @media (max-width: 1024px) { .productListWarp .productLis ul li .components .componentsList .item { width: 10rem; } } @media (max-width: 768px) { .productListWarp .productLis ul li .components .componentsList .item { display: flex; justify-content: flex-start; align-items: center; width: 100%; margin-top: 1.2rem; margin-right: 0; text-align: left; } } .productListWarp .productLis ul li .components .componentsList .item .itemImg { width: 17rem; height: 17rem; border-radius: 0.6rem; overflow: hidden; } @media (max-width: 1024px) { .productListWarp .productLis ul li .components .componentsList .item .itemImg { width: 10rem; height: 10rem; } } @media (max-width: 768px) { .productListWarp .productLis ul li .components .componentsList .item .itemImg { width: 4rem; height: 4rem; } } .productListWarp .productLis ul li .components .componentsList .item .itemImg img { width: 17rem; height: 17rem; } @media (max-width: 1024px) { .productListWarp .productLis ul li .components .componentsList .item .itemImg img { width: 10rem; height: 10rem; } } @media (max-width: 768px) { .productListWarp .productLis ul li .components .componentsList .item .itemImg img { width: 4rem; height: 4rem; } } .productListWarp .productLis ul li .components .componentsList .item .itemTitle { margin-top: 1.2rem; font-size: 1.4rem; font-weight: 600; line-height: 1.8rem; } @media (max-width: 768px) { .productListWarp .productLis ul li .components .componentsList .item .itemTitle { margin-top: 0; margin-left: 0.7rem; font-weight: 400; } } .productListWarp .productLis ul li .componentsPayment { background-color: #f3f3f3; padding: 3rem; } @media (max-width: 768px) { .productListWarp .productLis ul li .componentsPayment { padding: 2rem; } } .productListWarp .productLis ul li .componentsPayment .componentsTitle { font-size: 1.6rem; font-weight: 600; color: #000000; } @media (max-width: 768px) { .productListWarp .productLis ul li .componentsPayment .componentsTitle { font-size: 1.4rem; } } .productListWarp .productLis ul li .componentsPayment .componentsList { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin-top: 0.2rem; } @media (max-width: 768px) { .productListWarp .productLis ul li .componentsPayment .componentsList { display: block; margin-top: 0.8rem; } } .productListWarp .productLis ul li .componentsPayment .componentsList .item { display: flex; justify-content: flex-start; align-items: center; width: 33.333%; text-align: center; margin-bottom: 1.5rem; padding-right: 1.5rem; } @media (max-width: 1024px) { .productListWarp .productLis ul li .componentsPayment .componentsList .item { width: 100%; margin-right: 0; text-align: left; } } .productListWarp .productLis ul li .componentsPayment .componentsList .item .itemImg { width: 4rem; height: 4rem; border-radius: 0.6rem; overflow: hidden; } .productListWarp .productLis ul li .componentsPayment .componentsList .item .itemImg img { width: 4rem; height: 4rem; } .productListWarp .productLis ul li .componentsPayment .componentsList .item .itemTitle { padding-left: 1.2rem; font-size: 1.4rem; font-weight: 600; line-height: 1.8rem; text-align: left; width: calc(100% - 4rem); } @media (max-width: 768px) { .productListWarp .productLis ul li .componentsPayment .componentsList .item .itemTitle { margin-top: 0; padding-left: 0.7rem; font-weight: 400; } } .productListWarp .productLis ul li .componentsReview { border-top: 1px solid #dedede; padding: 3rem; } @media (max-width: 768px) { .productListWarp .productLis ul li .componentsReview { padding: 2rem; } } .productListWarp .productLis ul li .componentsReview .date { font-size: 1.4rem; color: #676767; } .productListWarp .productLis ul li .componentsReview .contents { margin-top: 1.5rem; font-size: 1.6rem; line-height: 2.4rem; color: #000000; } .productListWarp .productLis ul li + li { margin-top: 1rem; } .productListWarp .productLis ul .noPrice { padding: 2rem; text-align: center; } @media (min-width: 768px) { .productListWarp .productLis ul .noPrice { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; } } @media (min-width: 1025px) { .productListWarp .productLis ul .noPrice { padding-left: 3rem; min-height: 17rem; } } .productListWarp .productLis ul .noPrice > p { font-weight: 600; font-size: 1.8rem; color: #9ea1a2; } @media (min-width: 1025px) { .productListWarp .productLis ul .noPrice > p { font-size: 2.4rem; } } .productListWarp .productLis ul .noPrice .PriceGoList { display: flex; flex-wrap: wrap; width: 100%; margin: 0 auto; } @media (max-width: 768px) { .productListWarp .productLis ul .noPrice .PriceGoList { width: 18rem; } } @media (max-width: 501px) { .productListWarp .productLis ul .noPrice .PriceGoList { width: 100%; } } @media (min-width: 768px) { .productListWarp .productLis ul .noPrice .PriceGoList { flex-wrap: nowrap; margin: 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } @media (min-width: 1025px) { .productListWarp .productLis ul .noPrice .PriceGoList { flex-wrap: nowrap; margin: 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } .productListWarp .productLis ul .noPrice .PriceGoList > p { width: 100%; display: flex; align-items: center; font-size: 2.4rem; font-weight: 600; } .productListWarp .productLis ul .noPrice .PriceGoList .oneButton { margin-top: 3rem; } @media (min-width: 768px) { .productListWarp .productLis ul .noPrice .PriceGoList .oneButton { margin-top: 0; min-width: 15rem; margin-left: 5rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } @media (min-width: 1025px) { .productListWarp .productLis ul .noPrice .PriceGoList .oneButton { margin-top: 0; min-width: 18rem; margin-left: 5rem; } } @media (min-width: 768px) { .productListWarp .productLis ul .noPrice .PriceGoList .oneButton button::before, .productListWarp .productLis ul .noPrice .PriceGoList .oneButton button::after, .productListWarp .productLis ul .noPrice .PriceGoList .oneButton a::before, .productListWarp .productLis ul .noPrice .PriceGoList .oneButton a::after { width: 3.2rem; } } @media (min-width: 1025px) { .productListWarp .productLis ul .noPrice .PriceGoList .oneButton button::before, .productListWarp .productLis ul .noPrice .PriceGoList .oneButton button::after, .productListWarp .productLis ul .noPrice .PriceGoList .oneButton a::before, .productListWarp .productLis ul .noPrice .PriceGoList .oneButton a::after { width: 3.2rem; } } .myNotificationWrap { margin-top: 3rem; } .myNotificationWrap .borderTop { display: flex; justify-content: space-between; align-items: center; } @media (max-width: 768px) { .myNotificationWrap .borderTop { display: block; } } .myNotificationWrap .borderTop .infoWarp { font-size: 1.8rem; color: #000000; } @media (max-width: 820px) { .myNotificationWrap .borderTop .infoWarp { font-size: 1.6rem; } } .myNotificationWrap .borderTop .searchBoxWarp .searchTextBox { border-left: 1px solid #dedede; } @media (max-width: 768px) { .myNotificationWrap .borderTop .searchBoxWarp { margin-top: 1.5rem; } } .myNotificationWrap .borderList { margin-top: 2rem; } @media (max-width: 768px) { .myNotificationWrap .borderList { margin-top: 3rem; } } .myNotificationWrap .borderList .item { border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; } .myNotificationWrap .borderList .item a { display: block; padding: 2rem 0; } .myNotificationWrap .borderList .item a .itemTop .type { font-size: 1.4rem; font-weight: 600; color: #05141f; } .myNotificationWrap .borderList .item a .itemTop .date { font-size: 1.4rem; font-weight: 400; color: #9ea1a2; } .myNotificationWrap .borderList .item a .itemTitle { margin-top: 1.2rem; font-size: 1.8rem; font-weight: 600; line-height: 2.6rem; color: #000000; } @media (max-width: 768px) { .myNotificationWrap .borderList .item a .itemTitle { font-size: 1.6rem; line-height: 2.4rem; } } .myNotificationWrap .borderList :not(:first-child) { border-top: 0; } .myNotificationWrap .borderList .noItem { padding: 4.3rem 0; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; font-size: 1.8rem; font-weight: 600; color: #9ea1a2; } @media (max-width: 768px) { .myNotificationWrap .borderList .noItem { padding: 5.2rem 0; font-size: 1.6rem; } } .myNotificationViewWrap { margin-top: 3rem; } .myNotificationViewWrap .borderView dl { display: flex; justify-content: flex-start; align-items: center; padding: 2.2rem 0; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; } @media (max-width: 768px) { .myNotificationViewWrap .borderView dl { display: block; padding: 2rem 0; } } .myNotificationViewWrap .borderView dl .itemName { width: 15.5rem; font-size: 1.6rem; line-height: 2.4rem; color: #676767; } @media (max-width: 768px) { .myNotificationViewWrap .borderView dl .itemName { font-size: 1.4rem; line-height: 2.2rem; } } .myNotificationViewWrap .borderView dl .itemValue { display: flex; justify-content: flex-start; width: calc(100% - 15.5rem); font-size: 1.6rem; line-height: 2.4rem; color: #000000; } @media (max-width: 768px) { .myNotificationViewWrap .borderView dl .itemValue { display: block; width: 100%; margin-top: 1rem; font-size: 1.4rem; line-height: 2.2rem; } } .myNotificationViewWrap .borderView dl .itemValue::before { content: ""; display: block; width: 0.1rem; height: 1.5rem; margin-right: 2rem; background-color: #dedede; } @media (max-width: 768px) { .myNotificationViewWrap .borderView dl .itemValue::before { display: none; } } .myNotificationViewWrap .borderView :not(:first-child) { border-top: 0; } .myNotificationViewWrap .contentsWrap { margin-top: 4rem; } .myNotificationViewWrap .contentsWrap .title { font-size: 1.8rem; font-weight: 600; line-height: 2.6rem; color: #000000; } @media (max-width: 768px) { .myNotificationViewWrap .contentsWrap .title { font-size: 1.6rem; line-height: 2.4rem; } } .myNotificationViewWrap .contentsWrap .imgWrap { margin-top: 2rem; } @media (max-width: 768px) { .myNotificationViewWrap .contentsWrap .imgWrap { margin-top: 1.5rem; } } .myNotificationViewWrap .contentsWrap .imgWrap img { width: 100%; } .myNotificationViewWrap .contentsWrap .text { margin-top: 2rem; font-size: 1.6rem; font-weight: 400; line-height: 2.4rem; color: #000000; } @media (max-width: 768px) { .myNotificationViewWrap .contentsWrap .text { font-size: 1.4rem; line-height: 2.2rem; } } .mailBodyContents table { width: 100% !important; } .mailBodyContents table tr td + td + td { width: calc(100% - 138px) !important; } .mailBodyContents > table > tbody > tr > td { font-size: 1.8rem !important; } @media (max-width: 768px) { .mailBodyContents > table > tbody > tr > td { font-size: 1.6rem !important; } } .myCouponTop { display: flex; justify-content: space-between; align-items: center; margin-top: 5rem; } @media (max-width: 768px) { .myCouponTop { display: block; margin-top: 0rem; } } .myCouponTop .couponNumInput { width: calc(100% - 16rem); padding-right: 3rem; } @media (max-width: 768px) { .myCouponTop .couponNumInput { width: 100%; padding-right: 0; } } .myCouponTop .couponNumInput input { width: 100%; height: 5rem; padding: 0 2rem; border: 1px solid #dedede; font-size: 1.6rem; font-weight: 400; } @media (max-width: 768px) { .myCouponTop .couponNumInput input { height: 4.5rem; padding: 0 1.5rem; font-size: 1.4rem; } } @media (max-width: 768px) { .myCouponTop .couponBtn { margin-top: 2rem; } } .myCouponListWrap { margin-top: 4rem; } .myCouponListWrap .boardTop .infoWarp { font-size: 2rem; font-weight: 600; } @media (max-width: 768px) { .myCouponListWrap .boardTop .infoWarp { font-size: 1.8rem; } } .myCouponListWrap .boardList { margin-top: 3rem; } @media (max-width: 768px) { .myCouponListWrap .boardList { margin-top: 2rem; } } .myCouponListWrap .boardList .list .item { display: flex; justify-content: space-between; align-items: center; border: 1px solid #dedede; border-radius: 0.6rem; margin-bottom: 1rem; } @media (max-width: 900px) { .myCouponListWrap .boardList .list .item { display: block; } } .myCouponListWrap .boardList .list .item .itemTop { width: calc(100% - 16rem); padding: 3rem 2rem 3rem 3rem; border-right: 1px dashed #dedede; } @media (max-width: 900px) { .myCouponListWrap .boardList .list .item .itemTop { width: 100%; border-right: 0; border-bottom: 1px dashed #dedede; } } @media (max-width: 768px) { .myCouponListWrap .boardList .list .item .itemTop { padding: 2rem; } } .myCouponListWrap .boardList .list .item .itemTop .info .benefits { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; } @media (max-width: 768px) { .myCouponListWrap .boardList .list .item .itemTop .info .benefits { display: block; } } .myCouponListWrap .boardList .list .item .itemTop .info .benefits .benefitsItem { display: flex; justify-content: flex-start; align-items: center; } .myCouponListWrap .boardList .list .item .itemTop .info .benefits .benefitsItem .badge { display: flex; justify-content: center; align-items: center; padding: 0.5rem 0.8rem; font-size: 1.4rem; font-weight: 600; border: 1px solid #dedede; } @media (max-width: 768px) { .myCouponListWrap .boardList .list .item .itemTop .info .benefits .benefitsItem .badge { font-size: 1.1rem; } } .myCouponListWrap .boardList .list .item .itemTop .info .benefits .benefitsItem .value { padding-left: 1rem; font-size: 2.4rem; font-weight: 600; color: #000000; } @media (max-width: 768px) { .myCouponListWrap .boardList .list .item .itemTop .info .benefits .benefitsItem .value { font-size: 2rem; } } .myCouponListWrap .boardList .list .item .itemTop .info .benefits .benefitsItem .value .info { margin-top: 0.5rem; font-size: 1.6rem; font-weight: 400; color: #676767; line-height: 2.4rem; } .myCouponListWrap .boardList .list .item .itemTop .info .benefits .benefitsItem:first-child { margin-right: 2.5rem; } @media (max-width: 768px) { .myCouponListWrap .boardList .list .item .itemTop .info .benefits .benefitsItem:first-child { margin-bottom: 1.5rem; margin-right: 2.5rem; } } .myCouponListWrap .boardList .list .item .itemTop .info .cost { margin-top: 1.5rem; font-size: 1.6rem; font-weight: 600; } .myCouponListWrap .boardList .list .item .itemTop .info .title { margin-top: 2.5rem; font-size: 1.6rem; font-weight: 600; color: #676767; line-height: 2.4rem; } .myCouponListWrap .boardList .list .item .itemTop .target { margin-top: 1rem; } .myCouponListWrap .boardList .list .item .itemTop .target span { margin-right: 0.5rem; font-size: 1.6rem; font-weight: 400; color: #676767; line-height: 2.2rem; } .myCouponListWrap .boardList .list .item .itemBottom { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 16rem; } @media (max-width: 900px) { .myCouponListWrap .boardList .list .item .itemBottom { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; width: 100%; padding: 2rem; } } .myCouponListWrap .boardList .list .item .itemBottom .date { margin-top: 1rem; font-size: 1.4rem; color: #676767; } @media (max-width: 900px) { .myCouponListWrap .boardList .list .item .itemBottom .date { margin-top: 0.5rem; margin-left: 1rem; } } .myCouponListWrap .boardList .list .item .itemBottom .cost { width: auto; margin-top: 1.5rem; font-size: 1.6rem; font-weight: 400; } @media (max-width: 900px) { .myCouponListWrap .boardList .list .item .itemBottom .cost { display: block; width: 100%; } } .myCouponListWrap .boardList .list .noItem { display: flex; justify-content: center; align-items: center; width: 100%; height: 18rem; padding: 2rem; border: 1px solid #dedede; border-radius: 0.6rem; font-size: 2rem; font-weight: 600; color: #9ea1a2; text-align: center; } .myCouponListWrap .boardList .couponInfo { margin-top: 2rem; } .myCouponListWrap .boardList .couponInfo .title { font-size: 1.8rem; font-weight: 600; color: #000000; } @media (max-width: 768px) { .myCouponListWrap .boardList .couponInfo .title { font-size: 1.6rem; } } .myCouponListWrap .boardList .couponInfo ul { margin-top: 1rem; } .myCouponListWrap .boardList .couponInfo ul li { display: flex; align-items: center; margin-bottom: 0.5rem; font-size: 1.4rem; font-weight: 400; color: #676767; line-height: 2.2rem; } .myCouponListWrap .boardList .couponInfo ul li::before { content: "∙"; margin-right: 0.5rem; } .myCouponListWrap.couponNew { margin-top: 0; } @media (min-width: 768px) { .myCouponListWrap.couponNew { margin-top: 4rem; } } .myCouponListWrap.couponNew .boardList .list .item { align-items: normal; } .myCouponListWrap.couponNew .boardList .list .item .itemTop .info .benefits .benefitsItem { margin: 0; } .myCouponListWrap.couponNew .boardList .list .item .itemTop .info .benefits .benefitsItem .value { padding: 0; } .myCouponListWrap.couponNew .boardList .list .item .itemTop .target { margin-top: 2rem; } .myCouponListWrap.couponNew .boardList .list .item .itemTop .target p { padding-left: 7.8rem; text-indent: -7.8rem; font-size: 1.6rem; color: #676767; } .myCouponListWrap.couponNew .boardList .list .item .itemTop .target p + p { margin-top: 1rem; } .myCouponListWrap.couponNew .boardList .list .item .itemBottom { background-color: #f9f9f9; } .myCouponListWrap.couponNew .boardList .list .item .itemBottom .cost { display: flex; align-items: center; flex-direction: row; margin-top: 0; font-stretch: 1.4rem; color: #000; } @media (min-width: 768px) { .myCouponListWrap.couponNew .boardList .list .item .itemBottom .cost { justify-content: center; flex-direction: column; } } .myCouponListWrap.couponNew .boardList .list .item .itemBottom .cost::before { content: ""; display: block; width: 3.2rem; height: 3.2rem; margin-right: 1.2rem; background: url(../images/common/icon_coupon.png) no-repeat center/100% auto; } @media (min-width: 768px) { .myCouponListWrap.couponNew .boardList .list .item .itemBottom .cost::before { margin-right: 0; margin-bottom: 0.8rem; } } .myCouponListWrap.couponNew .boardList .list .item.coupon-expired, .myCouponListWrap.couponNew .boardList .list .item.coupon-used, .myCouponListWrap.couponNew .boardList .list .item.coupon-upcoming { background-color: #eee; } .myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemTop .info .benefits .benefitsItem .value, .myCouponListWrap.couponNew .boardList .list .item.coupon-used .itemTop .info .benefits .benefitsItem .value, .myCouponListWrap.couponNew .boardList .list .item.coupon-upcoming .itemTop .info .benefits .benefitsItem .value { display: flex; align-items: center; color: #9ea1a2; } .myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemTop .info .benefits .benefitsItem .value::after, .myCouponListWrap.couponNew .boardList .list .item.coupon-used .itemTop .info .benefits .benefitsItem .value::after, .myCouponListWrap.couponNew .boardList .list .item.coupon-upcoming .itemTop .info .benefits .benefitsItem .value::after { content: "만료"; display: flex; justify-content: center; align-items: center; min-width: 4.3rem; height: 2.6rem; padding: 0 0.8rem; margin-left: 0.8rem; font-size: 1.6rem; color: #9ea1a2; font-weight: 600; background-color: #fff; border: 1px solid #dedede; } @media (min-width: 768px) { .myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemTop .info .benefits .benefitsItem .value::after, .myCouponListWrap.couponNew .boardList .list .item.coupon-used .itemTop .info .benefits .benefitsItem .value::after, .myCouponListWrap.couponNew .boardList .list .item.coupon-upcoming .itemTop .info .benefits .benefitsItem .value::after { margin-left: 1.6rem; } } .myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemTop .target p, .myCouponListWrap.couponNew .boardList .list .item.coupon-used .itemTop .target p, .myCouponListWrap.couponNew .boardList .list .item.coupon-upcoming .itemTop .target p { color: #9ea1a2; } .myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemBottom, .myCouponListWrap.couponNew .boardList .list .item.coupon-used .itemBottom, .myCouponListWrap.couponNew .boardList .list .item.coupon-upcoming .itemBottom { background-color: #eee; } .myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemBottom .cost, .myCouponListWrap.couponNew .boardList .list .item.coupon-used .itemBottom .cost, .myCouponListWrap.couponNew .boardList .list .item.coupon-upcoming .itemBottom .cost { color: #9ea1a2; } .myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemBottom .cost::before, .myCouponListWrap.couponNew .boardList .list .item.coupon-used .itemBottom .cost::before, .myCouponListWrap.couponNew .boardList .list .item.coupon-upcoming .itemBottom .cost::before { background: url(../images/common/icon_coupon_expired.png) no-repeat center/100% auto; } .myCouponListWrap.couponNew .boardList .list .item.coupon-used .itemTop .info .benefits .benefitsItem .value::after { content: "사용완료"; } .myCouponListWrap.couponNew .boardList .list .item.coupon-upcoming .itemTop .info .benefits .benefitsItem .value::after { content: "예정"; } .myCouponListWrap.couponNew .boardList .couponInfo ul li { color: #676767; } .reviewWarp { margin-top: 0rem; margin-top: 5rem; } @media (min-width: 768px) { .reviewWarp { width: 100%; } } @media (max-width: 1200px) { .reviewWarp { border: none; margin-top: 5rem; padding-top: 0; } } .reviewWarp dl.important dt { display: flex; align-items: center; } .reviewWarp dl.important dt::after { content: ""; width: 0.5rem; height: 0.5rem; display: block; border-radius: 50%; margin-left: 0.4rem; background-color: #ea0029; margin-top: -0.7rem; } @media (min-width: 768px) { .reviewWarp dl.important dt::after { margin-left: 0.4rem; margin-top: -1rem; } } @media (min-width: 768px) { .reviewWarp dl { flex-wrap: nowrap; } } .reviewWarp dl dt { position: relative; width: 100%; font-size: 1.4rem; font-weight: 600; color: #676767; } @media (min-width: 768px) { .reviewWarp dl dt { max-width: 14rem; } } @media (min-width: 1025px) { .reviewWarp dl dt { font-size: 1.6rem; } } .reviewWarp dl dd { width: 100%; display: flex; margin-top: 1rem; } @media (min-width: 768px) { .reviewWarp dl dd { margin-top: 0; } } .reviewWarp dl dd input[type=text] { display: flex; width: 100%; align-items: center; padding-left: 1.7rem; border: 1px solid #dedede; height: 4.5rem; font-size: 1.4rem; color: #000; } @media (min-width: 1025px) { .reviewWarp dl dd input[type=text] { font-size: 1.6rem; height: 5rem; } } .reviewWarp dl dd > div { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } @media (min-width: 768px) { .reviewWarp dl dd > div { flex-wrap: nowrap; } } .reviewWarp dl dd > div input[type=text] { width: 33.3333333333%; font-size: 1.4rem; } @media (min-width: 1025px) { .reviewWarp dl dd > div input[type=text] { font-size: 1.6rem; } } .reviewWarp dl dd > div input[type=text] + input[type=text] { margin-left: 1rem; } .reviewWarp dl dd > div input[type=text] + select { width: 100%; margin-top: 1rem; } @media (min-width: 768px) { .reviewWarp dl dd > div input[type=text] + select { margin-top: 0; margin-left: 1rem; width: 33.3333333333%; } } .reviewWarp dl dd > div span { height: 5rem; display: flex; align-items: center; padding-left: 0.8rem; padding-right: 0.8rem; } .reviewWarp dl dd textarea { width: initial; border: 1px solid #dedede; outline: 0 none; border-radius: 0; padding: 1.5rem 1.7rem; font-size: 1.4rem; line-height: 2.2rem; } @media (min-width: 1025px) { .reviewWarp dl dd textarea { font-size: 1.6rem; line-height: 2.4rem; } } .reviewWarp dl dd.contentsWrap { margin-top: 1.5rem; flex-direction: column; } .reviewWarp dl dd.contentsWrap .wordCounter { justify-content: flex-end; margin-top: 1rem; font-size: 1.4rem; color: #676767; text-align: right; } .comp_mypage_user_guide { display: flex; justify-content: space-between; align-items: center; } @media (max-width: 768px) { .comp_mypage_user_guide { display: block; } } .comp_mypage_user_guide .content { width: calc(100% - 220px); padding-right: 6.4rem; } @media (max-width: 768px) { .comp_mypage_user_guide .content { width: 100%; padding-right: 0; } } .comp_mypage_user_guide .content .text { font-size: 1.6rem; font-weight: 400; line-height: 2.4rem; } @media (max-width: 768px) { .comp_mypage_user_guide .content .text { font-size: 1.4rem; line-height: 2.2rem; } } .comp_mypage_user_guide .content a { display: block; margin-top: 1.5rem; font-size: 1.4rem; font-weight: 400; color: #676767; } .comp_mypage_user_guide .image_area { width: 22rem; } @media (max-width: 768px) { .comp_mypage_user_guide .image_area { width: 100%; margin-top: 3rem; } } .comp_mypage_user_guide .image_area img { width: 100%; border-radius: 0.6rem; } .cancelPremiumPopup .popInner { padding: 3rem; } @media (min-width: 768px) { .cancelPremiumPopup .popInner { width: 56rem; } } .cancelPremiumPopup .content .alertMessage { display: block; margin-bottom: 3rem; font-size: 1.6rem; font-weight: 600; line-height: 2.2rem; text-align: center; } @media (min-width: 768px) { .cancelPremiumPopup .content .alertMessage { font-size: 2.4rem; line-height: 3.2rem; } } .cancelPremiumPopup .content .alertMessage em { display: block; margin-bottom: 3rem; font-size: 1.2rem; font-weight: 400; text-align: left; line-height: 1.6rem; } @media (min-width: 768px) { .cancelPremiumPopup .content .alertMessage em { font-size: 1.4rem; } } .cancelPremiumPopup .content .alertSubMessage > ul > li { font-size: 1.4rem; font-weight: 600; } .cancelPremiumPopup .content .alertSubMessage > ul > li .bu { display: block; padding-left: 1.2rem; text-indent: -1.2rem; } @media (min-width: 768px) { .cancelPremiumPopup .content .alertSubMessage > ul > li { font-size: 1.6rem; } } .cancelPremiumPopup .content .alertSubMessage > ul > li .red { display: inline-block; margin-top: 0.6rem; color: #ea0029; text-indent: 0; } .cancelPremiumPopup .content .alertSubMessage > ul > li em.red { font-weight: 400; } .cancelPremiumPopup .content .alertSubMessage > ul > li + li { margin-top: 1.2rem; } .cancelPremiumPopup .content .alertSubMessage > ul > li > ul { padding: 1.2rem 0 0; } .cancelPremiumPopup .content .alertSubMessage > ul > li > ul > li { color: #aaa; font-size: 1.2rem; font-weight: 400; line-height: 1.5; } @media (min-width: 768px) { .cancelPremiumPopup .content .alertSubMessage > ul > li > ul > li { font-size: 1.4rem; } } .cancelPremiumPopup .content .alertSubMessage > ul > li > ul > li strong { color: #000; font-weight: 400; } .cancelPremiumPopup .content .alertSubMessage > ul > li > ul > li > span { display: block; padding-left: 1.8rem; text-indent: 0; } @media (min-width: 768px) { .cancelPremiumPopup .content .alertSubMessage > ul > li > ul > li > span { padding-left: 2rem; } } .cancelPremiumPopup .content .alertSubMessage > ul > li > ul > li > span.bu { padding-left: 2.2rem; text-indent: -0.6rem; } .cancelPremiumPopup .content .alertSubMessage > ul > li > ul > li > span b { color: #000; font-weight: 400; } .cancelPremiumPopup .content .amount-box { margin-bottom: 3rem; } .cancelPremiumPopup .content .amount-box .totalRefund-detail { display: none; padding: 1.6rem; background-color: #f5f5f5; } .cancelPremiumPopup .content .amount-box .totalRefund-detail ul { padding: 0.5rem 0; } .cancelPremiumPopup .content .amount-box .totalRefund-detail ul li { color: #aaa; font-size: 1.2rem; font-weight: 400; padding-left: 1.2rem; text-indent: -1.2rem; line-height: 1.5; } @media (min-width: 768px) { .cancelPremiumPopup .content .amount-box .totalRefund-detail ul li { font-size: 1.4rem; } } .cancelPremiumPopup .content .amount-box .totalRefund-detail ul li + li { margin-top: 1.6rem; } .cancelPremiumPopup .content .amount-box .totalRefund-detail ul li span { display: block; padding: 0; } .cancelPremiumPopup .content .amount-box .totalRefund-detail ul li span b { color: #000; font-weight: 400; } .cancelPremiumPopup .content .amount-box .totalRefund-detail ul li span.bu { padding-left: 1.4rem; text-indent: -1.2rem; } @media (min-width: 768px) { .cancelPremiumPopup .content .amount-box .totalRefund-detail ul li span.bu { padding-left: 1.4rem; text-indent: -1.2rem; } } .cancelPremiumPopup .content .amount-box .totalRefund-detail ul li span .green { color: #5d7d2b; } .cancelPremiumPopup .content .amount-box .totalRefund-detail ul li span .red { color: #ea0029; } .cancelPremiumPopup .content .amount-box .totalRefund-detail ul li .total { padding: 1.6rem 0 0 1.2rem; font-size: 1.2rem; color: #000; } @media (min-width: 768px) { .cancelPremiumPopup .content .amount-box .totalRefund-detail ul li .total { font-size: 1.4rem; } } .cancelPremiumPopup .content .amount-box .totalRefund-detail ul li .total em { color: #5d7d2b; } .cancelPremiumPopup .content .amount-box .totalRefund-detail ul li .total.minus em { color: #ea0029; } .cancelPremiumPopup .content .amount-box .totalRefund-detail ul li .black { color: #000; } .cancelPremiumPopup .content .amount-box .totalRefund-detail ul li .black em { color: #aaa; } .cancelPremiumPopup .content .amount-box .btn-detail { display: flex; align-items: center; justify-content: center; justify-self: flex-end; position: relative; margin-top: 1.2rem; margin-left: auto; font-size: 1.4rem; color: #676767; font-weight: 400; cursor: pointer; } .cancelPremiumPopup .content .amount-box .btn-detail:after { content: ""; display: block; top: 0; right: -2rem; width: 1.4rem; height: 1.4rem; margin: 0 0 0 0.4rem; background: url("../images/common/icon-tbarrow.svg") no-repeat center/contain; transform: rotate(0); transition: all 0.1s ease; } .cancelPremiumPopup .content .amount-box .btn-detail em { border-bottom: 1px solid #676767; } .cancelPremiumPopup .content .amount-box .btn-detail.fold:after { transform: rotate(180deg); } .cancelPremiumPopup .content .totalRefund { margin: 2.8rem 0 0; background-color: #ececec; padding: 0 2rem; font-size: 1.6rem; font-weight: 400; color: #000; } @media (min-width: 768px) { .cancelPremiumPopup .content .totalRefund { display: flex; align-items: center; justify-content: center; height: 8rem; margin: 3rem 0 0; padding: 0; } } .cancelPremiumPopup .content .totalRefund > div { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; flex: 1; padding: 2rem 0; line-height: 1.5; text-indent: 0; } @media (min-width: 768px) { .cancelPremiumPopup .content .totalRefund > div { padding: 0 3rem; } } .cancelPremiumPopup .content .totalRefund > div .amount { display: block; width: 100%; padding-left: 1.8rem; font-weight: 600; color: #5d7d2b; } .cancelPremiumPopup .content .totalRefund > div b { display: flex; align-items: center; justify-content: flex-start; font-weight: 400; } .cancelPremiumPopup .content .totalRefund > div b:before { content: ""; display: block; width: 1.4rem; height: 1.4rem; margin: 0 0.4rem 0.2rem 0; background: url("../images/common/icon-plus-green.png") no-repeat center/contain; } .cancelPremiumPopup .content .totalRefund > div.minus { border-top: 1px solid #d9d9d9; } @media (min-width: 768px) { .cancelPremiumPopup .content .totalRefund > div.minus { border-top: 0; border-left: 1px solid #d9d9d9; } } .cancelPremiumPopup .content .totalRefund > div.minus b:before { background: url("../images/common/icon-minus-red.png") no-repeat center/contain; } .cancelPremiumPopup .content .totalRefund > div.minus .amount { color: #ea0029; } /*# sourceMappingURL=mypage.css.map */