@charset "UTF-8";

.contents {position: relative; padding-top: 200px; margin: 0 auto;}

.contents .title-area {width: 100%; margin: 0 auto; margin-bottom: 100px; text-align: center;}
.contents .title-area .tit {position: relative; font-weight: 800; font-size: 3.125rem; letter-spacing: -0.01em;}
.contents .title-area .tit::after {display: block; content: ''; width: 80px; height: 4px; background: #4e22b1; margin: 20px auto 50px;}
.contents .title-area .tit .fw-r {font-weight: 400;}
.contents .title-area .txt {font-weight: 300; font-size: 1.5rem; line-height: 1.667rem; color: var(--primary);}
.contents .title-area .txt .fw-m {font-weight: 500;}

.contents .info {font-size: 1.625rem; color: rgba(85,85,85,1);}
.contents .info .tit {font-weight: 700; margin-bottom: 1.875rem;}
.contents .info .txt {font-weight: 500; display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
.contents .info .txt + .txt {margin-top: 1.25rem;}
.contents .info .txt img,
.contents .info .txt svg {margin-right: 10px;}

.contents .info + .comment {margin-top: 100px;}
.contents .comment {font-weight: 700; font-size: 33px; line-height: 1.3; white-space: pre-line; text-align: center;}

.tgl::-moz-selection,
.tgl:after::-moz-selection,
.tgl:before::-moz-selection,
.tgl *::-moz-selection,
.tgl *:after::-moz-selection,
.tgl *:before::-moz-selection,
.tgl+.tgl-btn::-moz-selection {
    background: none;
}

.tgl::selection,
.tgl:after::selection,
.tgl:before::selection,
.tgl *::selection,
.tgl *:after::selection,
.tgl *:before::selection,
.tgl+.tgl-btn::selection {
    background: none;
}

.tgl+.tgl-btn {
    display: block;
    width: fit-content; /* 전체 가로사이즈 */
    height: 48px; /* 전체 세로사이즈 */
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #DFDFDF;
    border-radius: 24px;
    color: var(--primary);
    margin: 0 auto;
}

.tgl+.tgl-btn:after,
.tgl+.tgl-btn:before {
    display: inline-block; 
    content: ''; 
    font-weight: 400; 
    font-family: Pretendard, sans-serif; 
    color: var(--primary); 
    font-size: 1.250rem; 
    line-height: 44px; 
    padding-right: 32px;
    padding: 0 32px;
    height: 48px;
}

.tgl+.tgl-btn::before {content: '연간 결제 10% 할인';}
.tgl+.tgl-btn::after {content: '월별 결제';}

.tgl-ios+.tgl-btn {border-radius: 2rem; border: 1px solid #DFDFDF; display: -webkit-flex; display: flex; justify-content: start; align-items: center;}

.tgl-ios+.tgl-btn::before, 
.tgl-ios+.tgl-btn::after {
    border-radius: 2rem;
    transition: border 0.3s ease;
    font-weight: 400;
    font-size: 1.250rem;
    color: var(--primary);
    box-sizing: border-box;
}

.tgl-ios+.tgl-btn::before {border: 2px solid var(--highlight);}
.tgl-ios+.tgl-btn::after {border: 2px solid transparent;}
.tgl-ios:checked+.tgl-btn::before {border: 2px solid transparent;}
.tgl-ios:checked+.tgl-btn::after {border: 2px solid var(--highlight);}

input[type=checkbox].tgl-ios:checked + label::before,
input[type=checkbox].tgl-ios:checked + label::after {
    display: inline-block; 
    content: ''; 
    font-weight: 400; 
    font-size: 1.250rem;
    font-family: Pretendard, sans-serif; 
    color: var(--primary); 
    line-height: 44px; 
    padding-right: 32px;
    padding: 0 32px;
    height: 48px;
    box-sizing: border-box;
}
input[type=checkbox].tgl-ios:checked + label::before {content: '연간 결제 10% 할인';}
input[type=checkbox].tgl-ios:checked + label::after {content: '월별 결제';}

.overflow {overflow-x: auto;}

.price-table {display: flex; justify-content: center; align-items: start; flex-wrap: wrap; gap: 5.875rem; margin: 64px 0 40px;}
.price-table>li {width: 22.875rem; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.07); -webkit-flex-shrink: 0; flex-shrink: 0;}
.price-table .generic-content {overflow: hidden; position: relative; text-align: center;background-color: #fff; padding: 40px 30px 60px;}
.price-table .generic-content .generic-head-price .generic-head-content {margin-bottom: 72px;}
.price-table .generic-content .generic-head-price .generic-head-content .head-bg {position: absolute; top: 0; left: 0; width: 100%;}
.price-table .generic-content .generic-head-price .generic-head-content .head-bg::before {content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='367px' height='152px'%3E%3Cpath fill-rule='evenodd' fill='rgb(115, 95, 254)' d='M0.499,-0.001 L366.499,-0.001 L366.499,83.591 L0.499,151.138 L0.499,-0.001 Z'/%3E%3C/svg%3E"); display: block;}
.price-table .generic-content .generic-head-price .generic-head-content .head {position: relative; z-index: 1; text-align: left; color: #fff;}
.price-table .generic-content .generic-head-price .generic-head-content .head .tit {font-size: 2rem; font-weight: 700; line-height: 1; display: inline-block; margin-bottom: 18px;}
.price-table .generic-content .generic-head-price .generic-head-content .head .txt {font-size: 1.875rem; font-weight: 300; line-height: 1; letter-spacing: -0.2px;}

.price-table .generic-content .generic-head-price .generic-price-tag {background: #fff;}
.price-table .generic-content .generic-head-price .generic-price-tag .price {font-family: 'futura-pt', 'Pretendard'; font-size: 3.125rem; line-height: 1; text-align: right;}
.price-table .generic-content .generic-head-price .generic-price-tag .price .sign {font-weight: 400; letter-spacing: -0.2px; font-size: 0.5em;}
.price-table .generic-content .generic-head-price .generic-price-tag .price .won {font-weight: 700; vertical-align: middle; letter-spacing: -0.4px;}
.price-table .generic-content .generic-head-price .generic-price-tag .month {font-family: Pretendard, sans-serif; font-size: 0.6em; font-weight: 400; vertical-align: bottom;}

.price-table .generic-content .generic-feature-list>li {font-weight: 400; font-size: 1.5rem; padding-bottom: 22px; transition: all 0.3s ease-in-out 0s; text-align: left;}
.price-table .generic-content .generic-feature-list>li::before {display: inline-block; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='17px' height='13px'%3E%3Cpath fill-rule='evenodd' fill='rgb(34, 195, 255)' d='M16.087,1.646 L14.806,0.328 C14.755,0.270 14.675,0.241 14.602,0.241 L14.602,0.241 C14.522,0.241 14.449,0.270 14.398,0.328 L5.520,9.278 L2.289,6.044 C2.231,5.986 2.158,5.957 2.086,5.957 C2.012,5.957 1.940,5.986 1.881,6.044 L0.586,7.341 C0.470,7.458 0.470,7.640 0.586,7.756 L4.662,11.834 C4.923,12.097 5.244,12.249 5.513,12.249 C5.899,12.249 6.234,11.966 6.357,11.848 C6.357,11.848 6.357,11.848 6.364,11.848 L16.094,2.062 C16.196,1.938 16.196,1.755 16.087,1.646 Z'/%3E%3C/svg%3E"); margin-right: 10px;}
.price-table .generic-content .generic-feature-list>li:first-child {padding-top: 30px;}
.price-table .generic-content .generic-feature-list>li:last-child {padding-bottom: 0;}
.price-table .generic-content .generic-feature-list>li.line {border-top: 1px solid #DFDFDF; padding-top: 22px;}
.price-table .generic-content .generic-feature-list>li.empty::before {display: none;}

.price-table .generic-content .generic-price-btn {margin-top: 50px;}
.price-table .generic-content .generic-price-btn a {
    width: 240px;
    height: 54px;
    border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	-o-border-radius: 6px;
	-webkit-border-radius: 6px;
    display: inline-block;
    font-weight: 700;
    font-size: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    background: #735FFE;
    color: #fff;
}

/* 미디엄 */
.ribbon {display: block; width: 50px; height: 58px; background: #FE5F75; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%); color: #fff; font-size: 1.375rem; font-weight: 600; line-height: 1; text-align: center; padding: 14px 6px 0; position: absolute; top: 0; right: 20px;}
/* //미디엄 */

.price-table-year {display: none;}

.caution {width: calc(22.875rem*2 + 5.875rem); text-align: left; font-weight: 400; font-size: 1.375rem; color: rgba(255,29,60,1); margin: 0 auto;}
.caution.primary {font-weight: 700; color: var(--primary);}


hr {border: 0; border-bottom: 1px solid #DFDFDF; margin: 150px 0;}


.section2 {padding-top: 0; padding-bottom: 200px;}
.ul-prize {max-width: 990px; display: -webkit-flex; display: flex; justify-content: start; align-items: start; gap: 40px 27px; flex-wrap: wrap; margin: 0 auto;}
.ul-prize>li {width: 312px;}
.ul-prize>li img {width: 100%; height: 100%; object-fit: contain; display: block;}





@media screen and (max-width:1062px){
    .ul-prize {max-width: unset;}
    .ul-prize>li {width: calc((100% - 27px*2)/3);}
}

@media screen and (max-width:1024px){
    .contents {padding-top: 150px;}

    .contents .comment {font-size: 29px; white-space: normal;}

    .section2 {padding-top: 0; padding-bottom: 150px;}
    .section2 .title-area .tit {font-size: 2.929rem;}
}

@media screen and (max-width:768px){
    .caution {width: 100%;}

    hr {margin: 100px 0;}
}

@media screen and (max-width:480px){
    .contents {padding-top: 100px;}
    .contents .title-area {margin-bottom: 50px;}
    .contents .title-area .tit {font-size: 2.5rem;}

    .contents .info {font-size: 1.4rem;}
    .contents .info .txt img {width: 20px;}

    .contents .comment {font-size: 25px;}

    .tgl+.tgl-btn {font-size: 1rem;}
    .tgl+.tgl-btn:after, .tgl+.tgl-btn:before {padding: 0 16px;}

    input[type=checkbox].tgl-ios:checked+label::before,
    input[type=checkbox].tgl-ios:checked+label::after {
        padding: 0 16px;
    }
    
    .section2 {padding-top: 0; padding-bottom: 100px;}
    .ul-prize {gap: 32px 12px;}
    .ul-prize>li {width: calc((100% - 12px)/2);}
}