@charset "UTF-8";

.visual {position: relative; width: 100%; height: 500px; background: url("../img/ticket/visual.jpg") no-repeat center; background-size: cover; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
.visual .title {text-align: left; font-weight: 700; font-size: 2.5em; color: rgba(51,51,51,1);}


.contents {position: relative;}


.untactPrice {padding: 120px 0 140px;}

.caption {width: 36%; padding: 22px 50px;}
.caption span {font-weight: 800; font-size: 1.875em; color: var(--highlight);}
.caption small {font-size: 1em; margin-left: 6px;}

.ul-untactPrice_wrap {position: relative;}
.ul-untactPrice1 .th {width: 100%; height: 50px; background: #ECDCFF;}
.ul-untactPrice1 .th .flex-box {width: 36%; height: 100%; padding: 0 50px; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center;}
.ul-untactPrice1 .th .tutor {font-weight: 600; font-size: 1.063rem; color: var(--darkgray);}
.ul-untactPrice1 .th .classTime {
    width: auto; height: auto; padding: 0; padding-right: 23px; border: 0; 
    background-color: transparent; 
    background-image: url("../img/icon/select-down_s.png"), linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); 
    background-position: right center, center; 
    text-align: left; font-weight: 400; font-size: 1.063em; color: rgba(61,61,61,1);
}
.ul-untactPrice1 .td {width: 100%; height: 50px; font-weight: 300; font-size: 1.063em; color: rgba(61,61,61,1); border-bottom: 1px solid var(--border);}
.ul-untactPrice1 .td .flex-box {width: 36%; height: 100%; padding: 0 50px; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center;}

.ul-untactPrice2 {width: 64%; background: rgba(255, 255, 255, 0.5); position: absolute; bottom: 0; right: 0; display: -webkit-flex; display: flex; justify-content: start; align-items: start;}
.ul-untactPrice2 .box {width: calc((100% - 60px)/4); margin-right: 20px; border: 1px solid var(--border); border-top: 0; border-bottom: 0;}
.ul-untactPrice2 .box:last-child {margin-right: 0;}
.ul-untactPrice2 .ul-plan .planMonth {width: 100%; padding: 22px 50px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; text-align: center; font-weight: 600; font-size: 1.375em; color: rgba(61,61,61,1);}
.ul-plan .month1 {border-top: 6px solid var(--highlight);}
.ul-plan .month3 {border-top: 6px solid #864FFF;}
.ul-plan .month6 {border-top: 6px solid #A573FF;}
.ul-plan .month12 {border-top: 6px solid #b892ff;}
.ul-plan .th {width: 100%; height: 50px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.2px;}
.ul-plan .td {border-bottom: 1px solid var(--border);}
.ul-plan .td_price {width: 100%; height: 50px; font-weight: 400; font-size: 1.188em; color: rgba(61,61,61,1); position: relative;}
.ribbon_wrap {width: 50px; height: 50px; position: absolute; top: 0; right: 0; overflow: hidden;}
.ribbon_popular {
    width: 80px; height: 24px; background: #FE5F75; font-weight: 500; font-size: 16px; color: var(--white); text-align: center; position: relative; top: 4px; right: 6px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* .ul-plan .td .radio_area {position: relative; width: 100%; height: 100%; display: -webkit-flex; display: flex; justify-content: start; align-items: center;} */
.td_price .radio_area {width: 100%; height: 100%;}
.td_price input[type=radio] + label {margin-left: 0; width: 100%; height: 100%; padding: 0 20px; display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
.td_price input[type=radio] + label::before {left: 20px; width: 15px; height: 15px; border: 1px solid var(--border);}
.td_price input[type=radio] + label::after {left: 23px; width: 9px; height: 9px;}
.td_price input[type=radio]:checked + label {color: var(--highlight);}
.td_price input[type=radio]:checked + label::before {border-color: var(--highlight);}
.priceNum {font-family: futura-pt; font-size: 19px; font-weight: 700; letter-spacing: -0.2px; margin-left: 22px;}


.untactRegister {width: 100%; padding: 60px 0; background: linear-gradient(to right, #8417E8, #D019FF);}
.btn-register {width: 600px; height: 80px; padding: 10px 16px; border-radius: 999px; border: 3px solid var(--white); display: -webkit-flex; display: flex; justify-content: center; align-items: center; text-align: center; font-weight: 700; font-size: 2.250em; color: rgba(255,255,255,1); margin: 0 auto;}


.videoPrice {padding: 140px 0;}

.ul-videoPrice_wrap {position: relative;}
.ul-videoPrice1 .th {width: 100%; height: 50px; background: #ECDCFF;}
.ul-videoPrice1 .th .flex-box {width: 36%; height: 100%; padding: 0 50px; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center;}
.ul-videoPrice1 .th .txt {font-weight: 600; font-size: 1.063rem; color: var(--darkgray);}
.ul-videoPrice1 .td {width: 100%; height: 50px; font-weight: 300; font-size: 1.063em; color: var(--darkgray);}
.ul-videoPrice1 .td .flex-box {width: 36%; height: 100%; padding: 0 50px; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center;}

.ul-videoPrice2 {width: 64%; background: rgba(255, 255, 255, 0.5); position: absolute; bottom: 0; right: 0; display: -webkit-flex; display: flex; justify-content: start; align-items: start;}
.ul-videoPrice2 .box {width: calc((100% - 40px)/3); margin-right: 20px; border: 1px solid var(--border); border-top: 0; border-bottom: 0;}
.ul-videoPrice2 .box:last-child {margin-right: 0;}
.ul-videoPrice2 .ul-plan .planMonth {width: 100%; padding: 22px 30px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; text-align: center; font-weight: 500; font-size: 1.250em; color: rgba(61,61,61,1);}
.ribbon_recommend {
    width: 80px; height: 24px; background: #5F6FFE; font-weight: 500; font-size: 16px; color: var(--white); text-align: center; position: relative; top: 4px; right: 6px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.ul-videoPrice2 .radio_area {position: relative; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; margin: 0 auto;}

.videoRegister {width: 100%; padding: 60px 0; background: linear-gradient(to left, #8417E8, #D019FF);}


.info {padding: 80px 0 120px; background: #FAFAFA;}
.ul-info {margin-bottom: 50px;}
.ul-info:last-child {margin-bottom: 0;}
.ul-info .item {font-size: 1.125em; line-height: 1.88; display: -webkit-flex; display: flex; justify-content: start; align-items: start;}
.ul-info .item .dash::before {display: inline-block; content: '-'; margin-right: 6px;}
.ul-info .item a {display: inline-block; position: relative;}
.ul-info .item a::after {display: inline-block; content: ''; width: 100%; height: 1px; background: var(--primary); position: absolute; bottom: 2px; left: 0;}

.overflow-x {overflow-x: auto;}





@media screen and (max-width:1200px){
    .visual {padding: 0 50px; background: url("../img/ticket/visual_bg.jpg") no-repeat center; background-position: calc(100% + 300px) center;}

    .untactPrice {padding: 120px 50px 140px;}
    /* .untactPrice .price_wrap {width: 1200px;} */

    .caption {width: 30%; padding: 22px 30px;}

    .ul-untactPrice1 .th .flex-box {width: 30%; padding: 0 30px;}
    .ul-untactPrice1 .td .flex-box {width: 30%; padding: 0 30px;}
    .ul-untactPrice2 {width: 70%;}
    .ul-untactPrice2 .box {width: calc((100% - 30px)/4); margin-right: 10px;}

    .videoPrice {padding: 140px 50px;}

    .ul-videoPrice1 .th .flex-box {width: 30%; padding: 0 30px;}
    .ul-videoPrice1 .td .flex-box {width: 30%; padding: 0 30px;}
    .ul-videoPrice2 {width: 70%;}

    .info {padding: 80px 50px 120px;}
}

@media screen and (max-width:1024px){
    .td_price input[type=radio] + label {padding: 0 11px;}
    .td_price input[type=radio] + label::before {left: 11px;}
    .td_price input[type=radio] + label::after {left: 14px;}
}

@media screen and (min-width:993px){

}

@media screen and (max-width:992px){
    .untactPrice {padding: 100px 50px 120px;}
    .untactPrice .price_wrap {width: 892px;}

    .btn-register {height: auto;}

    .videoPrice {padding: 80px 50px;}
    .videoPrice .caption {width: 100%;}
    .ul-videoPrice_wrap {position: static;}
    /* .ul-videoPrice1 {display: none;} */
    .ul-videoPrice1 {margin-bottom: 20px;}
    .ul-videoPrice1 .td {display: none;}
    .ul-videoPrice1 .th .flex-box {width: 100%;}
    .ul-videoPrice2 {width: 100%; position: static;}
    .ul-videoPrice2 .ul-plan .planMonth {padding: 22px 16px; border-bottom: 1px solid var(--border);}
    .ul-videoPrice2 .ul-plan .th {display: none;}
}

@media screen and (max-width:768px){
    .visual {background-position: calc(100% + 400px) center;}

    .untactPrice {padding: 80px 50px 100px;}

    .untactRegister, .videoRegister {padding: 50px 0;}
    .btn-register {width: calc(100% - 100px);}
}

@media screen and (max-width:480px){
    .visual {height: 400px; padding: 0 16px; background-position: center;}

    .untactPrice {padding: 60px 16px 80px;}

    .caption {width: 26%; padding: 22px 20px;}

    .untactRegister {padding: 40px 0;}
    .btn-register {width: calc(100% - 32px);}

    .ul-untactPrice1 .th .flex-box {width: 26%; padding: 0 20px;}
    .ul-untactPrice1 .td .flex-box {width: 26%; padding: 0 20px;}
    .ul-untactPrice2 {width: 74%;}

    .videoPrice, .videoRegister {padding: 40px 16px;}
    .ul-videoPrice2 {flex-direction: column;}
    .ul-videoPrice2 .box {width: 100%; margin-right: 0; margin-bottom: 20px;}
    .ul-videoPrice2 .box:last-child {margin-bottom: 0;}

    .info {padding: 40px 16px 80px;}
}