@charset "utf-8";

.use-contents {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: stretch;
}
.use-contents .left-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    flex: 1;
}
.use-contents .left-wrap .use-con {}
.use-contents .use-con {
    border-radius: 20px;
    /* background-color: var(--bg-gray); */
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    font-size: 18px;
    padding: 20px;
    height: 100%;
}
.use-contents .left-wrap .use-con p {}
.use-contents .right-wrap {
    flex: 1;
}
.use-contents .right-wrap .tit {
    font-size: 32px;
    font-weight: 700;
    /* color: var(--main-blue); */
    width: 70%;
    display: flex;
    align-items: center;
    gap: 16px;
}
.use-contents .right-wrap ul {}
.use-contents .right-wrap ul li {
    display: flex;
    align-items: center;
    column-gap: 8px;
    margin-bottom: 16px;
    word-break: keep-all;
}
.use-contents .right-wrap ul li:last-child {
    margin-bottom: 0;
}
.ex-use {
    background-color: var(--main-brown);
    position: relative;
    border-radius: 50px;
}
.ex-use::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #fff, var(--main-color));
    position: absolute;
    bottom: 0;
    z-index: -1;
}
.ex-use h5 {
    color: #fff;
}
.ex-use .tab-list li {
    color: var(--main-brown);
}
.ex-use .tab-list li.active {
	background-color: var(--main-color);
}
.con-wrap {
    /* display: grid;
    grid-template-columns: repeat(4, 1fr); */
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 40px;
}
#tabSwiperWrap .con-wrap.swiper .swiper-wrapper {
    display: contents; 
}
.tab-con {
    display: flex;
    flex-direction: column;
    width: calc((100% - 72px) / 4); 
    flex-shrink: 0;
    height: auto;
}
.tab-con .txt-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: 40px;
    position: relative;
    z-index: 1;
}
.tab-con .txt-wrap .tit {
    background-color: var(--main-color);
    padding: 16px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: var(--semibold);
    font-size: 18px;
    word-break: keep-all;
    border-radius: 10px 10px 0 0;
    flex: 1;
}
.tab-con .txt-wrap .tit::after {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    background-color: var(--main-color);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: -1;
}
.tab-con .txt-wrap ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
    background-color: #fff;
    border-radius: 0 0 10px 10px;
    flex: 1;
}
.tab-con .txt-wrap ul li {}
.tab-con .txt-wrap ul li::after {
    content: "\e90b";
    font-family: xeicon;
    padding: 0 4px;
}
.tab-con .txt-wrap ul li:last-child::after {
    display: none;
}


.license-buy {
    background-color: var(--main-color);
}
.license-buy .tab-list li {
    /* color: var(--main-brown); */
}
.license-buy .tab-list li.active {
	background-color: var(--main-blue);
    color: #fff;
}
.license-buy .tab-contents {
    margin-top: 50px;
}

.review-use {
    background: linear-gradient(to bottom, #0273FF, #013799);
}
.review-use .title-main {
    color: #fff;
}
.review-use .title-main h2 span {
    background-color: var(--main-brown);
}
.review-contents {}
.review-contents li {
    padding: 15px 20px;
    border-radius: 10px;
    background-color: var(--main-color);
    margin-bottom: 20px;
    max-width: 60%;
    box-shadow: var(--box-shadow);
}
.review-contents li .rev_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 4px;
}
.review-contents li .rev_top span {}
.review-contents li .rev_top .star {
    color: var(--main-blue);
}
.review-contents li .rev_btm {
    word-break: keep-all;
}
.review-contents li .rev_btm p {
    font-size: 18px;
    font-weight: var(--bold);
}
.review-contents li:nth-child(even) {
    background-color: #fff;
    margin-left: auto;
}
.review-contents li.l_center {margin-left: 10%;}
.review-contents li.r_center {margin-right: 10%;}

/**메인 FAQ**/
.main-faq-list_wrap {}
.faq-list {border-top: 2px solid var(--main-blue);}
.faq-list .faq-item {}
.faq-list .faq-item .q-tit {
    font-weight: var(--bold);
}
.faq-list .faq-item .question {
    padding: 20px;
    background-color: #fff;
    border-bottom: var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.faq-list .faq-item .question b {
    padding-right: 12px;
    color: var(--main-blue);
}
.faq-list .faq-item .answer {}
.faq-list .faq-item .answer_view {
    padding: 24px 20px;
    background-color: var(--bg-gray);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-weight: var(--regular);
    border-bottom: var(--border);
}
.faq-list .faq-item .question .arrow-icon {
    transition: transform 0.3s ease;
}
.faq-list .faq-item .question.active .arrow-icon {
    transform: rotate(180deg);
}


/**서브_이용권**/
.payment_sub .license-buy {background-color: #fff;}
.payment_sub .license-buy .tab-list {
    box-shadow: var(--box-shadow);
}