@charset "UTF-8";

.extension_wrap {
    overflow: hidden;
    font-family: 'Nanum Square';
}

.extension_wrap .mid {
    width: 1100px;
    margin: 0 auto;
    position: relative;
}

.extension_wrap .mid img {}

.extension_wrap .top_area {
    padding: 160px 0;
    background: #310d74 url('/_skin/tpl_skin/basic_cosmetics/images/apply/extension/var1/top_bg.png') no-repeat center top;
}

.extension_wrap .top_area .num_title {
    text-align: center;
    font-size: 60px;
    line-height: 140%;
    min-width: 810px;
    width: fit-content;
    margin: 0 auto;
    padding: 0 30px;
    color: #fff;
    letter-spacing: -2px;
    margin: 0 auto 60px auto;
    border: 3px #fff solid;
    border-radius: 50px;
}

.extension_wrap .top_area img:first-of-type {
    margin: 0 auto 105px auto;
    display: block;
}

.extension_wrap .two-stage-area {
    padding: 150px 0;
}

.extension_wrap .two-stage-area .title-img {
    text-align: center;
}

.extension_wrap .two-stage-area .content-table {
    margin-top: 60px;
}

.extension_wrap .two-stage-area .content-table ul li {
    margin-top: 15px;
    border: 1px solid #c8c4de;
    box-sizing: border-box;
    border-radius: 20px;
    text-align: left;
    display: flex;
    overflow: hidden;
}

.extension_wrap .two-stage-area .content-table ul li div {
    padding: 55px 0 15px;
}

.extension_wrap .two-stage-area .content-table ul li div:nth-child(1) strong,
.extension_wrap .two-stage-area .content-table ul li div:nth-child(1) span,
.extension_wrap .two-stage-area .content-table ul li div:nth-child(1) i {
    display: block;
}

.extension_wrap .two-stage-area .content-table ul li div:nth-child(1) {
    background-color: #e6e3f4;
    padding-left: 60px;
    width: 56%;
}

.extension_wrap .two-stage-area .content-table ul li div:nth-child(1) strong {}

.extension_wrap .two-stage-area .content-table ul li div:nth-child(1) span {}

.extension_wrap .two-stage-area .content-table ul li div:nth-child(2) {
    margin: 0 auto;
    position: relative;
}

.extension_wrap .two-stage-area .content-table ul li div:nth-child(2) span {
    position: absolute;
    display: block;
    font-family: 'noto6';
    font-size: 22px;
    left: 140px;
    top: 45px;
}

.extension_wrap .two-stage-area .content-table ul li strong {
    font-size: 32px;
    line-height: 40px;
    font-family: 'noto6', "Malgun Gothic", "맑은 고딕";
    font-weight: 700;
    letter-spacing: -1.6px;
    margin: 20px 0;
}

.extension_wrap .two-stage-area .content-table ul li span {
    font-size: 18px;
    line-height: 24px;
    font-family: 'noto3', "Malgun Gothic", "맑은 고딕";
    letter-spacing: -1.6px;
}

.extension_wrap .recommend_box {
    padding: 160px 0 140px;
    background: #ffffff;
}

.extension_wrap .bar_txt {
    background: #342b56;
    padding: 60px 0 10px 0;

}

.teacher_box {
    background: url('/_skin/tpl_skin/basic_cosmetics/images/apply/extension/var1/con4_bg.png') center center;
}

.teacher_box .mid {
    padding: 160px 0;
    text-align: right;
}

.teacher_box .mid:before {
    content: "";
    position: absolute;
    left: -9%;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('/_skin/tpl_skin/basic_cosmetics/images/apply/extension/var1/teacher.png') no-repeat 0 70px;
}

.teacher_box .teacher_detail {
    position: relative;
}

.teacher_box .teacher_detail ul {
    margin: 20px 0 100px;
}

.teacher_box .teacher_detail ul li {
    font-size: 17px;
    position: relative;
    line-height: 30px;
    font-weight: 600;
}

.teacher_box .teacher_detail ul li:before {
    content: "-";
    display: inline-block;
    margin: 0 5px 0 0;
}

.teacher_box .teacher_detail .play_btn {
    position: relative;
    width: 834px;
    height: 476px;
    background: url('/_skin/tpl_skin/basic_cosmetics/images/apply/extension/var1/teacher_paly.png') no-repeat 35% top;
    box-shadow: 15px 18px 20px #bebec4;
}

.teacher_box .teacher_detail .play_btn a {
    display: block;
    width: 100%;
    height: 100%;
}

.feed_wrap {
    background: #383059;
    padding: 160px 0 155px;
    position: relative;
}

.feed_wrap .mid:after {
    content: "1";
    position: absolute;
    right: -265px;
    bottom: 5px;
    width: 890px;
    height: 820px;
    background: url('/_skin/tpl_skin/basic_cosmetics/images/apply/extension/var1/con6_teacher.png') no-repeat left top;
}

.feed_wrap .mid>img {
    margin: 0 0 60px;
}

.feed_wrap .feed_slide {
    height: auto;
    overflow: hidden;
}

.feed_wrap .tab_btn_wrap {
    height: 603px;
    box-sizing: border-box;
    width: 810px;
    margin: 0 0 70px;
    transition: 0.5 all;
}

.feed_wrap .tab_btn_wrap.tab_1 {
    background: url('/_skin/tpl_skin/basic_cosmetics/images/apply/extension/var1/con6_tab01.png') no-repeat left top;
}

.feed_wrap .tab_btn_wrap.tab_2 {
    background: url('/_skin/tpl_skin/basic_cosmetics/images/apply/extension/var1/con6_tab02.png') no-repeat left top;
}

.feed_wrap .tab_btn_wrap.tab_3 {
    background: url('/_skin/tpl_skin/basic_cosmetics/images/apply/extension/var1/con6_tab03.png') no-repeat left top;
}

.feed_wrap .tab_btn_wrap.tab_4 {
    background: url('/_skin/tpl_skin/basic_cosmetics/images/apply/extension/var1/con6_tab04.png') no-repeat left top;
}

.feed_wrap .tab_btn_wrap.tab_5 {
    background: url('/_skin/tpl_skin/basic_cosmetics/images/apply/extension/var1/con6_tab05.png') no-repeat left top;
}

.feed_wrap .btn_list {
    height: 100%;
    position: relative;
    box-sizing: border-box;
    padding: 40px 0 0 0;
}

.feed_wrap .btn_list span {
    width: 100px;
    border-radius: 0;
    display: block;
    height: 100px;
    width: 100%;
    font-siZe: 0;
    background: none;
    z-index: 4;
    position: relative;
    margin: 13px 0 0 0;
}

.feed_wrap .btn_list span:first-of-type {
    margin: 0;
}

.feed_wrap .feed_slide .swiper-wrapper {
    height: auto;
}

.feed_wrap .feed_slide .swiper-slide {
    box-sizing: border-box;
    background: #fff;
    min-height: 132px;
}

.feed_wrap .feed_slide .swiper-slide p {
    padding: 30px 30px 30px 145px;
    position: relative;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: 600;
    word-break: keep-all;
    line-height: 24px;
}

.feed_wrap .feed_slide .swiper-slide:nth-of-type(2) p,
.feed_wrap .feed_slide .swiper-slide:nth-of-type(5) p {
    padding: 41px 30px 41px 145px;
}

.feed_wrap .feed_slide .swiper-slide p:before {
    content: "A";
    width: 70px;
    height: 70px;
    position: absolute;
    left: 35px;
    top: 50%;
    margin: -35px 0 0 0;
    border-radius: 20px;
    text-trasform: uppercase;
    text-align: center;
    line-height: 70px;
    font-size: 60px;
    font-weight: 900;
    background: #b400ff;
    color: #fff;
}

.curri_wrap {
    background: #7c5ed8 url('/_skin/tpl_skin/basic_cosmetics/images/apply/extension/var1/con5_bg.png') no-repeat 63% top;
    position: relative;
    padding-top: 150px;
    height: 880px;
}

/* .curri_wrap:before{
    content: "";
    display:block;
    width:100%;
    height:870px;
    background: url('/_skin/tpl_skin/basic_cosmetics/images/apply/extension/var1/con5.png') no-repeat 63% center;
} */

.bookArea {
    padding: 160px 0 500px;
}

.bookArea .book_wrap {
    position: relative;
    padding: 0 0 250px;
}

.bookArea .book_wrap>img {
    margin: 0 0 95px;
}

.bookArea .book_wrap:before {
    content: "";
    width: 810px;
    position: absolute;
    height: 830px;
    top: 210px;
    left: -190px;
    background: url('/_skin/tpl_skin/basic_cosmetics/images/apply/extension/var1/book.png') no-repeat left top;
    z-index: 1;
}

.slide_wrap {
    padding: 0 0 0 430px;
    right: 10px;
    z-index: 3;
    width: 1250px;
    height: 750px;
}

.book_wrap .popupVideo {
    height: auto;
    z-index: 3;
    bottom: 110px;
    left: -25px;
}

.book_wrap .popupVideo a {
    display: block;
}

.slide_wrap .book_nav {
    width: 300px;
    left: 280px;
    position: absolute;
    text-align: center;
    z-index: 2
}

.slide_wrap .book_nav span {
    width: 25px;
    height: 25px;
}

.slide_wrap .book_nav span.swiper-pagination-bullet-active {
    width: 60px;
    border-radius: 50px;
    background: #ff3a42;
}



.bookreview_wrap {
    position: relative;
}

.bookArea .bookreview_slide {
    box-sizing: border-box;
    border-radius: 15px;
}

.bookArea .bookreview_slide .swiper-wrapper {
    height: auto;
}

.bookArea .bookreview_slide .swiper-slide .txt_wrap {
    padding: 40px 65px 40px 215px;
    box-sizing: border-box;
}

.bookArea .bookreview_slide .swiper-slide .txt_wrap.sl1 {
    background: #efefef url('/_skin/tpl_skin/basic_cosmetics/images/apply/extension/var1/hugi_icon_1.png') no-repeat 65px center;
    ;
}

.bookArea .bookreview_slide .swiper-slide .txt_wrap.sl2 {
    background: #efefef url('/_skin/tpl_skin/basic_cosmetics/images/apply/extension/var1/hugi_icon_2.png') no-repeat 65px center;
    ;
}

.bookArea .bookreview_slide .swiper-slide .txt_wrap.sl3 {
    background: #efefef url('/_skin/tpl_skin/basic_cosmetics/images/apply/extension/var1/hugi_icon_3.png') no-repeat 65px center;
    ;
}

.bookArea .bookreview_slide .swiper-slide .txt_wrap.sl4 {
    background: #efefef url('/_skin/tpl_skin/basic_cosmetics/images/apply/extension/var1/hugi_icon_1.png') no-repeat 65px center;
    ;
}

.bookArea .bookreview_slide .swiper-slide .txt_wrap h4 {
    font-size: 29px;
    font-weight: 900;
    letter-spacing: -2px;
}

.bookArea .bookreview_slide .swiper-slide .txt_wrap p {
    font-size: 20px;
    margin: 15px 0 20px;
    color: #7f7f7f;
    letter-spacing: 0;
    line-height: 30px;
}

.bookArea .bookreview_slide .swiper-slide .txt_wrap b {
    font-weight: 900;
    font-size: 18px;
    color: #424141;
}

.bookreview_wrap .btn_wrap {
    position: absolute;
    z-index: 4;
    cursor: pointer;
    width: 1340px;
    left: 50%;
    margin: 0 0 0 -670px;
    top: 80px
}

.bookreview_wrap .btn_wrap .btn_prev {
    background: url('/_skin/tpl_skin/basic_cosmetics/images/apply/extension/var1/arrow_l.png') no-repeat;
    left: 0;
    width: 100px;
    height: 100px;
}

.bookreview_wrap .btn_wrap .btn_next {
    background: url('/_skin/tpl_skin/basic_cosmetics/images/apply/extension/var1/arrow_r.png') no-repeat;
    width: 100px;
    height: 100px;
}

.benefit_wrap {
    background: #dbdbdb;
    padding: 0 0 150px;
}

.benefit_wrap .mid {
    position: :relative;
}

.benefit_wrap img {
    margin: -289px 0 0 0;
}

.benefit_wrap .btn-halbu {
    position: absolute;
    font-size: 0;
    width: 140px;
    height: 50px;
    right: 335px;
    bottom: 90px
}