@charset "utf-8";

/*
 * File    : sub-pricing.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * PRICING
 * HOVER
 */



/* **************************************** *
 * PRICING
 * **************************************** */
/* PLAN */
.pricing-plan .article__section-title span:after { width: 56rem; aspect-ratio: 1 / 2.1071; background-image: url(../images/icon/icon-point-02.svg); transform: translate(24rem, 38rem); }
.pricing-plan .article__section-desc { margin-top: 20rem; }
.pricing-plan__slider { margin: 0 -10rem; }
.pricing-plan__item { position: relative; width: calc(33.33% - 20rem); margin: 0 10rem; padding: 59rem; height: 720rem; border: 1px solid var(--color-gray-400); border-radius: 16rem; }
.pricing-plan__head { margin-bottom: 60rem; }
.pricing-plan__title { display: flex; align-items: center; margin-bottom: 6rem; gap: 12rem; }
.pricing-plan__title > span { padding: 4rem 20rem; border-radius: 99rem; color: var(--color-white); background: linear-gradient(98deg, #00B4FF 1.72%, #0081FF 49.42%, #A600FF 97.11%); }
.pricing-plan__desc { color: var(--color-gray-600); }
.pricing-plan__account { display: flex; align-items: flex-end; gap: 8rem; margin-top: 20rem; }
.pricing-plan__account sub { position: relative; top: -4rem; }
.pricing-plan__list > li { position: relative; padding-left: 34rem; color: var(--color-gray-800); }
.pricing-plan__list > li + li { margin-top: 24rem; }
.pricing-plan__list .jt-icon { position: absolute; width: 24rem; left: 0; top: calc(var(--font-size-primary-09) * var(--font-lineheight-primary-09) / 2); transform: translate(0, -50%); }
.pricing-plan__list .jt-icon path { fill: currentColor; }

.pricing-plan__item.pricing-plan--active { padding: 57rem; border: 3rem solid transparent; background: url(../images/sub/pricing/pricing-plan-bg.webp) no-repeat center center / cover padding-box, linear-gradient(0deg, #55E451, #EEFF00) border-box; }
.pricing-plan__list > li.pricing-plan--active { color: var(--color-secondary); }

/* COMPARE */
.pricing-compare.article__section { background: var(--color-gray-200); overflow: visible; }
.pricing-compare .article__section-title span:before { width: 200rem; aspect-ratio: 1 / 0.6736; background-image: url(../images/icon/icon-point-13.svg); transform: translate(-21rem, -30rem); }
.pricing-compare__container { display: flex; gap: 20rem; padding-top: 20rem; }
.pricing-compare__sticky { position: relative; z-index: 2; }
.pricing-compare__slider { overflow: visible; }
.pricing-compare__slider .pricing-compare__item { margin-right: 20rem; }
.pricing-compare__slider .pricing-compare__item:last-child { margin-right: 0; }
.pricing-compare__item { width: 385rem; }
.pricing-compare__head { position: sticky; top: calc(var(--header-height) - var(--minimize-height) + 20rem); display: flex; align-items: center; padding: 0 32rem; height: 80rem; background: var(--color-gray-300); border-radius: 8rem; }
.pricing-compare__title { display: flex; align-items: center; gap: 12rem; }
.pricing-compare__title > span { color: var(--color-black); background: #FFE05B; padding: 4rem 12rem; border-radius: 99rem; }
.pricing-compare__list { margin-top: 10rem; background: var(--color-white); border-radius: 8rem; }
.pricing-compare__list > li { display: flex; align-items: center; gap: 10rem; height: 80rem; padding: 0 32rem; color: var(--color-gray-800); }
.pricing-compare__list > li + li { border-top: 1px solid var(--color-gray-300); }
.pricing-compare__list .jt-icon { width: 18rem; border-radius: 50%; background: var(--color-primary); }
.pricing-compare__list .jt-icon path { fill: var(--color-white); }
.pricing-compare__list span { flex: 1; }

.pricing-compare--basic .pricing-compare__head { background: #00B4FF; color: var(--color-white); }
.pricing-compare--premium .pricing-compare__head { background: var(--color-black); color: var(--color-white); }
.pricing-compare__list .pricing-compare--none .jt-icon { background: var(--color-gray-600); }



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

}