@charset "utf-8";

.inner-l {width: calc(100% - 40px); max-width: 1520px; margin: 0 auto;}
.inner {width: calc(100% - 40px); max-width: 1040px; margin: 0 auto;}

.primary {color: var(--color-primary);}
.secondary {color: var(--color-secondary);}
.gray {color: var(--color-text-gray);}

.pd-160 {padding: 160px 0;}
.pd-140 {padding: 140px 0;}
.pd-120 {padding: 120px 0;}
.pd-100 {padding: 100px 0;}

.img-wrap img {width: 100%; height: 100%; object-fit: cover;}

.btn-area {display: flex; justify-content: center;}
.btn-default {width: 100%; height: 64px; border-radius: 10px; display: flex; align-items: center; justify-content: center; column-gap: 10px; font-size: 18px; font-weight: 600; color: #fff; background-color: var(--color-primary);}

.btn-default-r {width: 100%; max-width:240px; height: 58px; display: flex; align-items: center; justify-content: center; column-gap: 10px; font-size: 18px; font-weight: 600; color: #fff; background-color: var(--color-secondary); border-radius: 100px;}
.btn-default-r.bk {background-color: var(--color-text-main);}

.radio-item input[type="radio"] {display:none;}
.radio-item input[type="radio"] + label{position: relative; width: 100%; height: 54px; display: flex; justify-content: center; align-items: center; text-align: center; border: 1px solid var(--color-border); background-color: #fff; border-radius: 10px; cursor: pointer; transition: all 0.3s; color: var(--color-text-gray); font-size: 16px;}
.radio-item input[type="radio"] + label:hover,
.radio-item input[type="radio"]:checked + label {color:var(--color-secondary); border: 1px solid var(--color-secondary);}
.radio-item input[type="radio"] + label:hover svg path,
.radio-item input[type="radio"]:checked + label svg path {fill: var(--color-secondary);}

/* input layout */
.input-area {display: flex; flex-direction: column; row-gap: 20px;}
.input-area .input-item {width: 100%; display: flex;}
.input-area .input-item > span {width: 140px; display: block; font-size: 16px; font-weight: 500; margin-top: 16px;}
.input-area .input-item .input-item-area {width: calc(100% - 140px);}
.input-area .input-item .input-item-area {display: flex; column-gap: 10px;}
.input-area .radio-item {flex: 1;}

.phone-item {position: relative; display: flex !important; flex-direction: column; row-gap: 30px; padding: 16px; transition: all 0.3s; background: linear-gradient(to bottom, #F4F8FF, #FFFFFF); border-radius: 20px;}
.phone-item::before{content:'';position:absolute;inset:0;border:2px solid var(--color-secondary);border-radius:20px;opacity:0;transition:.3s;pointer-events:none;}
.phone-item:hover::before{opacity:1;}
.phone-item .phone-info .phone-title {font-size: 28px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-word;}
.phone-item .phone-info .phone-colors {display: flex; align-items: center; column-gap: 10px; margin-top: 14px; margin-bottom: 10px;}
.phone-item .phone-info .phone-colors .color-item {width: 16px; height: 16px; display: block; border-radius: 50%;}
.phone-item .phone-info .phone-colors .color-item:nth-of-type(1) {background-color: #F8F3EF;}
.phone-item .phone-info .phone-colors .color-item:nth-of-type(2) {background-color: #1B222A;}
.phone-item .phone-info .phone-colors .color-item:nth-of-type(3) {background-color: #266282;}
.phone-item .phone-info .phone-colors .color-item:nth-of-type(4) {background-color: #F8DBD5;}
.phone-item .phone-info .phone-colors .color-item:nth-of-type(5) {background-color: #3A4D39;}
.phone-item .phone-info .phone-tags {display: flex; align-items: center; column-gap: 25px;}
.phone-item .phone-info .phone-tags .phone-tag {position: relative; font-size: 12px; color: var(--color-text-gray); flex-shrink: 0;}
.phone-item .phone-info .phone-tags .phone-tag:not(:last-child)::after {position: absolute; width: 1px; height: 12px; top: 50%; right: -12px; transform: translateY(-50%); background-color: var(--color-border); display: block; content: '';}
.phone-item .phone-info .phone-benefit {display: flex; flex-direction: column; row-gap: 4px; margin-top: 20px; padding-bottom: 30px; border-bottom: 1px solid var(--color-border); margin-bottom: 20px;}
.phone-item .phone-info .phone-benefit li {display: flex; justify-content: space-between; column-gap: 10px;}
.phone-item .phone-info .phone-benefit li.total {color: var(--color-secondary);}
.phone-item .phone-info .phone-price {display: flex; justify-content: space-between; align-items: center;}
.phone-item .phone-info .phone-price .original-price {font-size: 14px; color: var(--color-text-gray); text-decoration: line-through;}
.phone-item .phone-info .phone-price .monthly-price {font-size: 28px; font-weight: 600; color: var(--color-primary);}

.swiper-btn .swiper-button-next,
.swiper-btn .swiper-button-prev {position: revert; width: 60px; height: 60px; color: transparent; background-color: var(--color-text-main); border-radius: 50%; margin-top: 0 !important;}
.swiper-btn .swiper-button-next svg,
.swiper-btn .swiper-button-prev svg {width: auto; height: auto;}




/* 반응형 */
@media screen and (max-width: 1520px) {

}
@media screen and (max-width: 1440px) {

}
@media screen and (max-width: 1280px) {

}
@media screen and (max-width: 1024px) {

}
@media screen and (max-width: 768px) {
    .pd-100 {padding: 80px 0;}
    
    .phone-item {width: 56vw !important;}
    .phone-item-box {margin-left: 20px;}
    .phone-item .phone-info .phone-tags {column-gap: 0;}
    .phone-item .phone-info .phone-tags .phone-tag {flex: 1; text-align: center; font-size: 1.8vw;}
    .phone-item .phone-info .phone-tags .phone-tag:not(:last-child)::after {display: none;}
    .phone-item .phone-info .phone-tags .phone-tag:not(:last-child) {border-right: 1px solid var(--color-border);}
    .swiper-btn .swiper-button-next,
    .swiper-btn .swiper-button-prev {width: 48px; height: 48px;}
    .swiper-btn .swiper-button-next svg,
    .swiper-btn .swiper-button-prev svg {width: 20px; height: 20px;}
}
@media screen and (max-width: 600px) {
    
}
@media screen and (max-width: 500px) {
    .inner-l ,
    .inner {width: calc(100% - 32px);}
    
    .pd-100 {padding: 60px 0;}
    
    .phone-item {width: 320px !important;}
    .phone-item-box {margin-left: 16px;}
    .phone-item .phone-info .phone-tags {column-gap: 21px;}
    .phone-item .phone-info .phone-tags .phone-tag {flex: auto; text-align: left; font-size: 12px;}
    .phone-item .phone-info .phone-tags .phone-tag:not(:last-child)::after {display: block; right: -10px;}
    .phone-item .phone-info .phone-tags .phone-tag:not(:last-child) {border-right: 0;}
    
    .swiper-btn .swiper-button-next,
    .swiper-btn .swiper-button-prev {width: 36px; height: 36px;}
    .swiper-btn .swiper-button-next svg,
    .swiper-btn .swiper-button-prev svg {width: 16px; height: 16px;}
}
@media screen and (max-width: 340px) {
    
}

/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/