@charset "utf-8";

/* 
 * content CSS Document
 *
 */

/* form active */
.cus_design{max-width:400rem;}
.cus_design > ul > li{display:block; position:relative; margin:3rem 0px;}
.cus_design input[type="text"]{width:100%; height:45rem;}
.cus_design select{width:100%; height:45rem;}
.cus_design label{position:absolute; left:10px; top:50%; width:90%; box-sizing:border-box; padding:0 5rem; background:#fff; transform:translateY(-50%);}
.cus_design .in label{color:#1637a2;}
.cus_design .active label{top:10%; width:auto; font-size:11rem;}
.cus_design [data-form-design="select"] label{top:10%; width:auto; font-size:12rem; font-weight:500;}

/* 테이블 */
table.table{border-top:2rem solid #222;}
table.table thead th{background:#f9f9f9; border-right:1rem solid #eee; font-size:20rem; font-weight:600; border-color:#eee; color:#333;}
table.table tbody td{border-color:#eee; font-size:19rem; color:#555; font-weight:500;}
table.table th{padding:25rem 9rem;}
table.table td{padding:25rem 10rem;}

/* comm */
#container{position:relative;}
#content{position:relative; padding:140rem 0 100rem; min-height: 700rem;}
.quick-menu{opacity:1; visibility:visible;}

.wrap {padding: 0 30rem;}

.sub-tit{display:block; margin-bottom: 70rem; text-align:center;}
.sub-tit.ty2 {margin-bottom: 40rem;}
.sub-tit em{display:inline-block; margin:0 0 10rem; font-size:24rem; font-weight:600; background: #B744D3; background: linear-gradient(to right, #B744D3 0%, #598DFE 100%);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height:1em;}
.sub-tit h3{font-size:52rem; font-weight:bold; color:#333; line-height:1.4em; word-break:keep-all; font-family: 'Jalnan';}

@media (max-width:7680px){
	#content{padding:150rem 0 80rem; }
	.sub-tit em{margin:0 0 8rem; font-size:20rem; font-weight:bold;}
}
@media (max-width:1580px) {
    .sub-tit h3 {font-size: 40rem;}
}
@media (max-width:480px){
	#content{padding:80rem 0 50rem; }
    .wrap {padding: 0 20rem;}
    .sub-tit {margin-bottom: 40rem;}
	.sub-tit em{margin:0 0 5rem; font-size:15rem; font-weight:bold;}
	.sub-tit h3{font-size: 30rem;}
}



[data-width] {margin: 0 auto;}
[data-width="1680"] {max-width: 1680rem;}
[data-width="1300"] {max-width: 1300rem;}
[data-width="1230"] {max-width: 1230rem;}
[data-width="1080"] {max-width: 1080rem;}
[data-width="1042"] {max-width: 1042rem;}
[data-width="600"] {max-width: 600rem;}
[data-width="680"] {max-width: 680rem;}
[data-width="500"] {max-width: 500rem;}
/* 마이페이지 */
.mt-540 {position: relative; margin-top: -540rem;  z-index: 10;}
.my-page .wrap {height: 100%;}
.my-page__wrap {position: relative;}
.my-page__menu {position: sticky; top: 20rem; z-index: 1;}
.my-page__menu ul {width: 126rem; padding: 35rem 10rem; box-sizing: border-box; border: 1rem solid #f5f5f5; border-radius: 10rem; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
.my-page__menu ul li span {display: block; padding-top: 12rem; text-align: center; font-size: 18rem; font-weight: 500; color: #bababa;}
.my-page__menu ul li a {display: block; position: relative;}
.my-page__menu ul li a.on span {color: #111; font-weight: 600;}
.my-page__menu ul li:nth-child(n+2) {padding-top: 35rem;}
.my-page__menu ul li img {display: table; margin: 0 auto;}
.my-page__menu ul li:nth-child(1) img {height: 34rem;}
.my-page__menu ul li:nth-child(2) img {height: 32rem;}
.my-page__menu ul li:nth-child(3) img {height: 28rem;}
.my-page__menu ul li:nth-child(4) img {height: 33rem;}
.my-page__menu ul li:nth-child(5) img {height: 30rem;}
@media (max-width:1300px) {
    [data-width="1680"] .mt-540 {margin-top: 0;}
    [data-width="1680"] .my-page__menu {position: unset; margin-bottom: 100rem;}
    [data-width="1680"] .my-page__menu ul {display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; padding: 20rem;}
    [data-width="1680"] .my-page__menu ul li:nth-child(n+2) {padding-top: 0; border-left: 1rem dashed #ddd;}
}
@media (max-width:1024px) {
    [data-width="1230"] .mt-540,
    [data-width="1042"] .mt-540 {margin-top: 0;}
    [data-width="1230"] .my-page__menu,
    [data-width="1042"] .my-page__menu {position: unset; margin-bottom: 50rem;}
    [data-width="1230"] .my-page__menu ul,
    [data-width="1042"] .my-page__menu ul{display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; padding: 20rem;}
    [data-width="1230"] .my-page__menu ul li:nth-child(n+2),
    [data-width="1042"] .my-page__menu ul li:nth-child(n+2) {padding-top: 0; border-left: 1rem dashed #ddd}
    [data-width="680"],
    [data-width="600"] {max-width: 100%;}
}
@media (max-width:768px) {
    .my-page__menu ul li span {font-size: 16rem;}
    .my-page__menu ul li:nth-child(1) img {height: 30rem;}
    .my-page__menu ul li:nth-child(2) img {height: 28rem;}
    .my-page__menu ul li:nth-child(3) img {height: 24rem;}
    .my-page__menu ul li:nth-child(4) img {height: 29rem;}
    .my-page__menu ul li:nth-child(5) img {height: 26rem;}
}
@media (max-width:480px) {
    .my-page__menu ul {grid-template-columns: repeat(3, 1fr) !important;}
    .my-page__menu ul li:nth-child(n+2) {border-left: 0 !important;}
    .my-page__menu ul li:nth-child(n+4) {margin-top: 20rem;}
    [data-width="1680"] .my-page__menu {margin-bottom: 80rem;}
}

select {padding: 0 30rem; background: var(--color-white, #fff) url(../../images/board/select_arrow02.svg) no-repeat calc(100% - 30rem) 50%; background-size: 13rem 7rem;}
.form-colBox label {display: block; padding-bottom: 10rem; font-size: 20rem; font-weight: 500;}
.form-colBox:nth-child(n+2) {padding-top: 45rem;}
.form-colBox input[type="text"],
.form-colBox select {width: 100%; height: 65rem; border-radius: 6rem; font-size: 18rem; font-weight: 300; color: #aaa;}
.form-colBox em {display: block; padding-top: 10rem; font-size: 16rem; font-weight: 300; color: #666;}
.form-colBox em b {font-weight: 600;}
.info-txt.mt1 {margin-top: 23rem;}
.info-txt.mt2 {margin-top: 45rem;}
.info-txt div:nth-child(n+2) {padding-top: 28rem;}
.info-txt dt {padding-bottom: 10rem; font-size: 17rem; font-weight: 500; color: #111;}
.info-txt dd {position: relative; padding-left: 12rem; font-size: 16rem; font-weight: 300; color: #666;}
.info-txt dd:nth-of-type(n+2) {margin-top: 5rem;}
.info-txt dd::before {content: ''; position: absolute; top: 8rem; left: 0; width: 3rem; height: 3rem; background: #bbb; border-radius: 100%;}
@media (max-width:480px) {
    select {padding: 0 13rem;}
    .form-colBox label {font-size: 18rem;}
    .form-colBox input[type="text"],
    .form-colBox select {height: 55rem; font-size: 15rem;}
    .form-colBox:nth-child(n+2) {padding-top: 35rem;}
    .info-txt dt {font-size: 15rem;}
    .info-txt dd {font-size: 14rem;}
    .info-txt.mt2 {margin-top: 35rem;}
}

.list-box {margin-top: 55rem;}
.list-box.ty2 {margin-top: 0;}
.list-box__wrap {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30rem;}
.list-box__item {padding: 43rem 30rem; border: 1rem solid #e8e8e8; border-radius: 15rem; box-sizing: border-box; font-family: var(--font-kr);}
.list-box__item h4 {font-size: 22rem; font-weight: 500; line-height: 1.5;}
.list-box__link {display: block; position: relative; margin-top: 24rem; padding-left: 25rem; font-size: 18rem; font-weight: 300; color: #555;}
.list-box__link::before {content: ''; position: absolute; top: 3rem; left: 0; width: 16rem; height: 16rem; background: url('../images/content/ic-link-clip.svg') no-repeat;}
.list-box__process {display: flex; justify-content: space-between; align-items: center; margin-bottom: 45rem;}
.list-box__process .date {font-size: 14rem; font-weight: 400; color: #666;}
.list-box__total {display: flex; align-items: center; justify-content: space-between; padding-top: 40rem; margin-top: 40rem; border-top: 1rem solid #e8e8e8;}
.list-box__total .quantity {font-size: 14rem; font-weight: 500; color: #666;}
.list-box__total .amount {font-size: 22rem; font-weight: 600;}
.list-box.ty2 .list-box__process {margin-bottom: 30rem;}
.list-box.ty2 .list-box__item h4 {font-size: 25rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.list-box.ty2 .list-box__item > p {padding-top: 15rem; font-size: 17rem; font-weight: 400; color: #666; line-height: 1.5; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.list-box.ty2 .list-box__btm {display: flex; justify-content: space-between; align-items: center; margin-top: 52rem;}
.list-box.ty2 .list-box__moreBtn {position: relative; display: block; width: 60rem; height: 60rem; background: #f8f8f8; border-radius: 100%; transition: all .3s;}
.list-box.ty2 .list-box__moreBtn::before {content: ''; position: absolute; top: 50%; left: 50%; width: 20rem; height: 20rem; background: url('../images/content/ic-more.svg') no-repeat; transform: translate(-50%, -50%); transition: all .3s;}
.list-box.ty2 .list-box__moreBtn:hover {background: #146fee; transition: all .3s;}
.list-box.ty2 .list-box__moreBtn:hover::before {background: url('../images/content/ic-more-wt.svg') no-repeat; transition: all .3s;}
.process {display: flex; align-items: center; justify-content: center; width: 86rem; height: 30rem; border-radius: 3rem; font-size: 16rem; font-weight: 600; color: #fff;}
.process.ty1 {background: linear-gradient(to right, #B744D3 0%, #598DFE 100%);}
.process.ty2 {background: #146fee;}
.process.ty3 {background: #bbbbbb;}
.btn-inquire {width: 280rem; height: 65rem;}
@media (max-width:1680px) {
    .list-box {width: 88%; margin: 55rem auto 0;}
}
@media (max-width:1300px) {
    .list-box {width: 100%;}
    .list-box__item h4 br {display: none;}
}
@media (max-width:768px) {
    .list-box__wrap {grid-template-columns: repeat(1, 1fr)}
}
@media (max-width:480px) {
    .list-box {margin: 45rem auto 0;}
    .list-box__process {flex-direction: column-reverse; align-items: flex-start; margin-bottom: 30rem;}
    .list-box__process .date {padding-top: 10rem;}
    .list-box__item {padding: 30rem;}
    .list-box__item h4 {font-size: 18rem;}
    .list-box__link {margin-top: 18rem; font-size: 14rem;}
    .list-box__link::before {width: 15rem; height: 15rem;}
    .list-box__total {margin-top: 30rem; padding-top: 30rem;}
    .list-box__total .amount {font-size: 20rem;}
    .process {width: 75rem; height: 28rem; font-size: 14rem;}
    .list-box.ty2 .list-box__moreBtn {width: 50rem; height: 50rem;}
    .list-box.ty2 .list-box__moreBtn:hover {width: 14rem; height: 14rem;}
    .list-box.ty2 .list-box__item h4 {font-size: 22rem;}
    .list-box.ty2 .list-box__item > p {padding-top: 10rem; font-size: 16rem;}
}

/* 마이페이지 - 주문하기 */
.order-moneyBox {display: flex; justify-content: space-between; align-items: center; width: 100%; height: 138rem; padding: 0 40rem; background: #f6f3fd; border-radius: 10rem; box-sizing: border-box;}
.order-moneyBox__item {position: relative; padding-left: 80rem;}
.order-moneyBox__item::before {content: '₩'; position: absolute; top: 50%; left: 0; width: 60rem; height: 60rem; line-height: 60rem; background: linear-gradient(to right, #B744D3 0%, #598DFE 100%); border-radius: 100%; text-align: center; font-size: 24rem; font-weight: 600; color: #fff; transform: translateY(-50%);}
.order-moneyBox__item em {font-size: 17rem; font-weight: 500; color: #666;}
.order-moneyBox__item p {padding-top: 5rem; font-size: 24rem; font-weight: 700; font-family: 'GmarketSans'; color: #111;}
.order-moneyBox__item p span {display: inline-block; padding-left: 6rem; font-size: 18rem; font-weight: 500; font-family: var(--font-kr);}
.order-moneyBox__btn {display: flex; justify-content: center; align-items: center; width: 130rem; height: 49rem; border-radius: 5rem; background: #222; font-size: 16rem; color: #fff; font-family: 'GmarketSans';}
.order-form {margin-top: 47rem;}
.form-colBox__total {display: flex; align-items: center; justify-content: space-between; margin-top: 65rem; padding: 38rem 22rem; border-top: 1rem dashed #ddd; border-bottom: 1rem solid #ddd;}
.form-colBox__total span {font-size: 20rem; font-weight: 600;}
.form-colBox__total p {font-size: 26rem; font-weight: 600; color: #146fee; font-family: 'GmarketSans';}
@media (max-width:480px) {
    .order-moneyBox {flex-direction: column; align-items: flex-start; height: auto; padding: 38rem 20rem;}
    .order-moneyBox__item {padding-left: 60rem;}
    .order-moneyBox__item::before {width: 45rem; height: 45rem; line-height: 45rem; font-size: 20rem;}
    .order-moneyBox__item em {font-size: 15rem;}
    .order-moneyBox__item p {font-size: 22rem;}
    .order-moneyBox__btn {width: 100%; margin-top: 20rem;}
    .form-colBox__total {flex-direction: column; align-items: flex-start; padding: 24rem 15rem;}
    .form-colBox__total span {font-size: 17rem;}
    .form-colBox__total p {padding-top: 12rem; font-size: 22rem;}
    
}

/* 내 주문내역 */
.order-list__menu ul {display: flex; gap: 40rem; justify-content: center;}
.order-list__menu ul li {position: relative;}
.order-list__menu ul li a {display: block; font-size: 22rem; font-weight: 500; color: #c4c4c4;}
.order-list__menu ul li.active::before {content: ''; position: absolute; top: -16rem; left: 50%; width: 8rem; height: 8rem; border-radius: 100%; background: #d04ac9; transform: translateX(-50%);}
.order-list__menu ul li.active a {font-weight: 600; color: #333;}
@media (max-width:480px) {
    .order-list__menu ul {gap: 22rem;}
    .order-list__menu ul li a {font-size: 17rem;}
}

/* 충전하기 */
.charge-box {border-radius: 20rem; border: 1rem solid #e8e8e8; box-sizing: border-box;}
.charge-box__top {padding: 60rem 70rem 0;}
.charge-box__tit {font-size: 24rem; font-weight: 600; font-family: 'GmarketSans'; text-align: center;}
.charge-box__tit span {color: #146fee;}
.charge-box__tab {margin-top: 34rem;}
.charge-box__tab {display: flex; height: 65rem; border: 1rem solid #e8e8e8; border-radius: 6rem;}
.charge-box__tab li {width: 50%; text-align: center;} 
.charge-box__tab li a {display: flex; align-items: center; justify-content: center; height: 100%; font-size: 17rem; font-weight: 500; color: #999;}
.charge-box__tab li.active {height: 100%; border: 1rem solid #146fee; border-radius: 6rem;}
.charge-box__tab li.active a {color: #146fee;}
.charge-box__btm {margin-top: 62rem; padding: 62rem 70rem 100rem; border-top: 1rem solid #e8e8e8;}
.charge-box__txt strong {display: block; font-size: 22rem; font-weight: 600; text-align: center;}
.charge-box__txtBox {display: flex; justify-content: center; align-items: center; width: 100%; height: 68rem; margin-top: 28rem; border-radius: 6rem; background: #f8f8f8; font-size: 18rem;}
.charge-box__txtBox > span {color: #9c9c9c; font-weight: 500;}
.charge-box__txtBox p {position: relative; padding-left: 15rem; margin-left: 15rem; font-weight: 400;}
.charge-box__txtBox p::before {content: ''; position: absolute; top: 5rem; left: 0; width: 1rem; height: 15rem; background: #d8d8d8;}
.charge-box__select,
.charge-box__input{display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between;}
.charge-box__select{margin-top: 35rem; padding: 38rem 40rem; background: #f8f8f8; box-sizing: border-box; border-radius: 10rem;}
.charge-box__input{flex:0 1 100%; margin-top:5rem;}
.charge-box__select label,
.charge-box__input label{flex:auto; font-size: 20rem; font-weight: 600;}
.charge-box__select select,
.charge-box__input input{flex:none; width: 76%; height: 65rem; border-radius: 6rem; background-color: #fff; border: 1rem solid #e2e2e2;}
@media (max-width:620px) {
    .charge-box__top {padding: 60rem 35rem 0;}
    .charge-box__btm {padding: 50rem 35rem 80rem;}
}
@media (max-width:480px) {
    .charge-box__top {padding: 60rem 22rem 0;}
    .charge-box__tit {font-size: 22rem;}
    .charge-box__tab {height: 55rem;}
    .charge-box__btm {padding: 50rem 22rem 80rem; margin-top: 50rem;}
    .charge-box__txt strong {font-size: 20rem;}
    .charge-box__txtBox {flex-direction: column; align-items: unset; height: auto; margin-top: 22rem; padding: 30rem 15rem; box-sizing: border-box; text-align: center;}
    .charge-box__txtBox p {padding-left: 0; margin-left: 0; padding-top: 6rem; font-size: 16rem;}
    .charge-box__txtBox p::before {display: none;}
    .charge-box__txtBox p span {display: block;}
    .charge-box__select{flex-direction: column; padding: 38rem 20rem;}
	.charge-box__input{flex-direction: column; margin-top:20rem;}
    .charge-box__select select,
	.charge-box__input input{width: 100%; height: 55rem; margin-top: 15rem; font-size: 15rem;}
    .charge-box__select label, 
	.charge-box__input label{font-size: 18rem;}
}

/* 탭 */
.area-tab {width: 347rem; height: 70rem; border-radius: 100rem; background: #e7eaf5; padding: 8rem; margin: 0 auto; box-sizing: border-box;}
.area-tab ul {display: flex; height: 100%;}
.area-tab ul li {display: flex; align-items: center; justify-content: center; width: 50%;}
.area-tab ul li a {font-size: 22rem; font-weight: 600; color: #adb3c7;}
.area-tab ul li a.on {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #fff; border-radius: 100rem; color: #146fee;}

/* 서비스목록 */
.service-list__wrap {margin-top: 126rem;}
.service-list__box:nth-child(n+2) {margin-top: 68rem;}
.service-list__box-tit {margin-bottom: 28rem; font-size: 32rem; font-weight: 600; color: #222; font-family: 'GmarketSans';}
.service-list__box-cont {border-radius: 15rem; border: 2rem solid #eee;}
.service-list__box-cont li {display: flex; justify-content: space-between; align-items: center; padding: 20rem 27rem; font-family: var(--font-kr);}
.service-list__box-cont li:nth-child(n+2) {border-top: 1rem dashed #e7e7e7;}
.service-list__box-cont li p {position: relative; width: 85%; padding-left: 18rem; font-size: 22rem; font-weight: 400; color: #444; line-height: 1.3;}
.service-list__box-cont li p::before {content: ''; position: absolute; top: 12rem; left: 0; width: 4rem; height: 4rem; background: #222;}
.service-list__box-cont li span {display: flex; align-items: center; justify-content: center; width: 92rem; height: 40rem; border-radius: 6rem; background: #146fee; color: #fff; font-size: 18rem; font-weight: 400;}

@media (max-width:1024px) {
    .service-list__wrap {margin-top: 90rem;}
    .service-list__box-cont li p {width: 75%;}
}
@media (max-width:768px) {
    .service-list__box-cont li {flex-direction: column; align-items: start;}
    .service-list__box-cont li span {margin-top: 10rem;}
    .service-list__box-cont li p {width: 100%;}
}
@media (max-width:480px) {
    .area-tab {width: 100%; height: 60rem;}
    .area-tab ul li a,
    .area-tab ul li.active a {font-size: 18rem;}

    .service-list__wrap {margin-top: 50rem;}
    .service-list__box-tit {margin-bottom: 20rem; font-size: 24rem;}
    .service-list__box-cont li p {padding-left: 13rem; font-size: 17rem;}
    .service-list__box-cont li p::before {top: 8rem;}
    .service-list__box-cont li span {width: 100%; height: 30rem; font-size: 15rem;}
}