﻿.invoiceTypeBox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* padding: 0 15px */
    padding: 0 40px;
}

.invoiceTypeBox .label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    color: #111;
    font-size: 17px;
    font-family: sans-serif;
    cursor: pointer
}

.invoiceTypeBox .input {
    background: #F5F5F5;
    height: 35px;
    padding: 5px 15px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0 0 0 8px;
    outline: none
}

.invoiceTypeBox .input:disabled {
    color: #666
}

/* .invoiceTypeBox .radio {
    position: relative;
    width: 15px;
    height: 0;
    transform: translateX(10px)
}

.invoiceTypeBox .radio~.title {
    margin: 0 0 0 10px
} */

.invoiceTypeBox .radio {
    position: relative;
    width: 0;
    height: 0;
    transform: translateX(0px);

    /* 20220103 */
    -webkit-appearance: none;
    border:none;
    background-color: transparent;
    margin-left: 10px;
    margin-right: 10px;
    padding: 0;
}

.invoiceTypeBox .radio~.title {
    /* margin: 0 0 0 10px */
}

.invoiceTypeBox .radio::before,
.invoiceTypeBox .radio::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    box-sizing: border-box;
    transform: translate3d(calc(-50% - 10px), -50%, 0)
}

.invoiceTypeBox .radio::before {
    background: #fff;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(0, 0, 0, 0.35)
}

.invoiceTypeBox .radio::after {
    background: #666;
    width: 0;
    height: 0;
    transition: 0.15s cubic-bezier(0.37, 0.99, 0.92, 0.96)
}

.invoiceTypeBox .radio:checked::after {
    width: 12px;
    height: 12px
}

.invoiceTypeBox small {
    color: #A41019
}

.invoiceTypeBox .title {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 17px
}

.invoiceTypeBox .labelComplex {
    display: flex;
    align-items: center
}

.invoiceTypeBox .labelComplex .label {
    margin: 0 20px 0 0
}

.invoiceTypeBox .invoice_type {
    font-size: 18px;
    cursor: pointer
}

.invoiceTypeBox .invoiceBox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 0;
    padding: 0 0 0 30px;
    box-sizing: border-box;
    overflow: hidden;
    transition: 0.25s cubic-bezier(0.37, 0.99, 0.92, 0.96)
}

.invoiceTypeBox .invoiceBox>* {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 35px;
    padding: 2px 0;
    margin: 0 0 10px 0
}

.invoiceTypeBox .invoiceBox.act {
    height: auto
}

.invoiceTypeBox .invoice_type {
    display: flex;
    align-items: center;
    height: 35px
}

@media (max-width: 700px) {
    .invoiceTypeBox .invoiceBox {
        background: rgba(200, 200, 200, 0.25);
        padding: 0;
        border-radius: 0
    }

    .invoiceTypeBox .invoiceBox .textInput {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        margin: 10px 0 0
    }

    .invoiceTypeBox .invoiceBox .textInput .title {
        font-size: 15px;
        font-weight: normal
    }

    .invoiceTypeBox .invoiceBox .textInput .input[type=text] {
        width: 100%;
        margin: 2px 0
    }

    .invoiceTypeBox .invoiceBox small {
        flex-wrap: wrap
    }

    .invoiceTypeBox .invoiceBox.act {
        padding: 5px;
        border-radius: 5px
    }

    .invoiceTypeBox .labelComplex {
        flex-direction: column;
        align-items: flex-start;
        width: 100%
    }

    .invoiceTypeBox .invoiceBox>* {
        height: auto
    }
}

.fh5co-indexMirror-coach-courseVideo-list .wrapper-1200 {
    position: relative
}

.swiper-container-fade .swiper-slide.swiper-slide-active .swiper-slide {
    pointer-events: auto
}

.swiper-arrow {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 30%;
    z-index: 1
}

.swiper-arrow.swiper-button-disabled {
    opacity: .5
}

.swiper-arrow.swiper-prev {
    background-image: url("../image/icon_arrow_r_double_prev.png");
    left: -50px
}

.swiper-arrow.swiper-next {
    background-image: url("../image/icon_arrow_r_double_next.png");
    right: -50px
}

@media (max-width: 1000px) {
    .swiper-arrow.swiper-prev {
        left: 25px !important
    }

    .swiper-arrow.swiper-next {
        right: 25px !important;
        left: auto !important
    }
}

@media (max-width: 700px) {
    .swiper-arrow {
        top: 40%
    }

    .swiper-arrow.swiper-prev,
    .swiper-arrow.swiper-next {
        transform: translate3d(0, -50%, 0)
    }
}

@media (max-width: 1000px) {
    .course_item_wrap {
        min-height: 50px
    }
}

.sex-wrap li .sexBox {
    padding: .2rem 2rem;
    border-radius: 6px;
    border: 1px solid #ccc;
    box-shadow: none;
    color: #B2B2B2;
    line-height: 2;
    cursor: pointer;
    transition: 0.15s cubic-bezier(0.37, 0.99, 0.92, 0.96)
}

.sex-wrap li .sexBox+.sexBox {
    margin-left: 10px
}

.sex-wrap li .sexBox.action {
    color: #A50C11;
    border-color: #A50C11
}

.scrollbarBox {
    display: none
}

.scrollbarBox.active {
    display: block
}

.class-plan-wrap {
    position: relative;
    overflow: hidden
}

.class-plan-wrap .swiper-container {
    transform-origin: 50% 50%;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    opacity: 1
}

.class-plan-wrap .swiper-container.old {
    transform: translate3d(0, 0, 0);
    transition: opacity 0.3s cubic-bezier(0.37, 0.99, 0.92, 0.96);
    opacity: 0
}

.class-plan-wrap .swiper-container.new {
    transform: translate3d(0, -100%, 0);
    opacity: 0
}

.class-plan-wrap .swiper-container.move {
    transition: opacity 0.3s cubic-bezier(0.3, 1, 0.94, 1.1);
    opacity: 1
}

@media (max-width: 640px) {
    .class-plan-wrap .swiper-container.old {
        transform: translate3d(100%, 0, 0);
        transition: 0.3s cubic-bezier(0.37, 0.99, 0.92, 0.96);
        opacity: 1
    }

    .class-plan-wrap .swiper-container.new {
        transform: translate3d(-100%, -100%, 0);
        opacity: 1
    }

    .class-plan-wrap .swiper-container.move {
        transform: translate3d(0, -100%, 0);
        transition: 0.3s cubic-bezier(0.37, 0.99, 0.92, 0.96)
    }
}