/*공통*/
.main h2 { text-align: center; font-size: 3rem; }
.main h3 { text-align: center; color:#000; font-size: 4vw; font-weight: 400; letter-spacing:-1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow:ellipsis; white-space:break-word; overflow:hidden; } 
.main .title-type2 { display: flex; align-items: center; justify-content: space-between; } 
.main .sub-txt { font-size: 1.1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow:ellipsis; white-space:break-word; overflow:hidden; text-align: center; margin-top: 0.5rem; color: #959c9d;}


/*main-visual-area*/
/* .main-visual-area .bxslider-default { position: relative; } 
.main-visual-area .pager-slider-paging { height:50px; width: 100%; background: rgba(0,0,0,0.2); overflow-x: auto; white-space: nowrap; scrollbar-width: none; z-index: 0; } 
.main-visual-area .pager-slider-paging ul:before { background: transparent; } 
.main-visual-area .pager-slider-paging ul li:before { display: none; } 
.main-visual-area .pager-slider-paging ul { padding-left: 10%; } 
.main-visual-area .pager-slider-paging ul li { display: inline-block; width:25%; text-align: center; white-space: nowrap; } 
.main-visual-area .pager-slider-paging ul li a > span { text-overflow:ellipsis; white-space:break-word; overflow:hidden; } */

/*swiper*/
.main-visual-area { overflow: hidden; } 
.main-visual-area img { width: 100%; } 
.main-visual-area .swiper-wrapper { width: 100% !important; height: auto } 
.mySwiper2 .swiper-slide span { height: 40px; line-height: 40px; width: 100%; display: block; margin-top: -40px; padding-left:70px; background: rgba(0,0,0,.3); position: absolute; bottom: 0; } 
.mySwiper2 .swiper-slide a { color:#fff; } 
.main-visual-area .swiper-horizontal>.swiper-scrollbar { position: absolute; left:0; bottom: 40px; height: 3px; width: 100%; background: rgba(255,255,255,.3); } 
.main-visual-area .swiper-scrollbar-drag { background: #fff; } 
.mySwiper2 .pagination-wrap {width: 7.2rem; position: absolute; right: 5vw; top: 90vw; background: rgba(0, 0, 0, .3); padding: 1.5vw 3vw; border-radius: 2rem; z-index: 1; display: flex; justify-content: space-between; align-items: center;}
.mySwiper2 .swiper-pagination, .swiper-pagination-fraction {position: relative; display: inline-block; width: 60%; bottom: 0; color: rgba(255, 255, 255, .5); text-align: left; font-size: 1rem; letter-spacing: 0.2vw; }
.mySwiper2 .pagination-wrap .plus-btn {width: 1rem; height: 1rem; position: relative;}
.mySwiper2 .pagination-wrap .plus-btn::before {content: ''; display: block; width: 2px; height: 100%; background-color: #f8f8f8; position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
.mySwiper2 .pagination-wrap .plus-btn::after {content: ''; display: block; width: 2px; height: 100%; background-color: #f8f8f8; position: absolute; left: 50%; top: 0; transform: translateX(-50%) rotate(90deg);}
.mySwiper2 .swiper-pagination-current { color:#fff; font-weight: 600; } 
.mySwiper2 .swiper-pagination-total { color:rgba(255,255,255,.5) } 

/* 가이드 버튼 */
.guide_wrap { padding-bottom: 5vw; }
.guide_wrap ul { display: flex; justify-content: space-between; gap: 3vw; width: 90%; margin: 6vw auto 0; }
.guide_wrap ul li { width: 48%; }
.guide_wrap ul li a { display: block; width: 100%; }
.guide_wrap ul li a img { width: 100%; }

/*신간/추천 교재*/
.recommend-book-area { padding: 0 3vw 7vw; margin-top: 6vw; width: 100%; background: url('https://cdn.hackers.co.kr/hackersbook/img/main/m/new_book_bg.png') 0 0 no-repeat; background-size: 100%;}
.recommend-book-area .title.pt50 {padding-top: 0 !important; margin-bottom: 6vw;}
.recommend-book-area .filter-tab { margin:10px auto 25px; display: flex; justify-content: center; align-items: center; }
.recommend-book-area .filter-tab li { position: relative; width:20%; text-align: center; } 
.recommend-book-area .filter-tab li a { display: inline-block; color:#666; font-size: 4vw; } 
.recommend-book-area .filter-tab li.active a { position: relative; font-weight: bold; color: #39d6ba; } 
.recommend-book-area .filter-tab li:before { content: ''; width: 1px; height: 15px; position: absolute; top: 50%; transform: translateY(-50%); left: 0; background: #ccc; } 
.recommend-book-area .filter-tab li:first-child:before { display: none; } 
.recommend-book-area .filter-tab li.active a:after { content: ''; display: block; width: 100%; height: 4px; background: #39d6ba; border-radius: 6px; } 
.recommend-book-area .book-list { background: none; }
.recommend-book-area .book-list ul li img { box-shadow: 8px 5px 5px rgb(0 0 0 / 8%); } 
.recommend-book-area .book-list ul li .book-box dl { margin-top: 20px; text-align: center; padding:0 10px; } 
.recommend-book-area .book-list ul li .book-box dd { color:rgba(0,0,0,0.6) } 

.recommend-book-area .swiper_box { width: 60%; margin: 3.5vw auto; }
.recommend-book-area .bx-wrapper .bx-controls-direction a { background: none !important; top: 30%; }
.recommend-book-area .bx-wrapper .bx-controls-direction a::before { width: 6vw; height: 6vw; }
.recommend-book-area .bx-wrapper .bx-prev { left: -19vw; }
.recommend-book-area .bx-wrapper .bx-next { right: -14vw; }

.recommend-book-area .swiper_box li dl { margin-top: 4vw; }
.recommend-book-area .swiper_box li dl dt h3 { font-size: 1.5rem; }
.recommend-book-area .swiper_box li dl dt dd { margin-top: 1vw; }
.recommend-book-area .swiper_box li dl dt dd p { font-size: 3vw; color: #959c9d; }


/*event-banner*/
.event-banner-area .top-info { text-align: center; height: 35px; background: #b5b4cc; } 
.event-banner-area .top-info .txt_info { line-height: 35px; font-size: 13px; color: rgba(255,255,255,.4); letter-spacing: 10px; font-weight: bold; } 
.event-banner-area .top-info .txt_info em { color: #fff; font-weight: bold; } 
.event-banner-area .bx-wrapper .bx-controls-direction a { top: 100%; margin-top: 0; border-radius: 0; width: 36px; height: 35px; background: #acabc2; } 
.bx-wrapper .bx-controls-direction a.bx-prev:hover, .bx-wrapper .bx-controls-direction a.bx-next:hover { border:none; } 
.event-banner-area .bx-wrapper .bx-controls-direction a.bx-prev:before,
.event-banner-area .bx-wrapper .bx-controls-direction a.bx-next:before { padding: 4.2px; border: solid rgba(255,255,255,.5); border-width: 0px 3px 3px 0; margin-top: -6px; } 
.event-banner-area .bx-wrapper .bx-controls-direction a.bx-next:before { border-color: #fff; } 
.event-banner-area .bx-wrapper .bx-prev { left:0 } 
.event-banner-area .bx-wrapper .bx-next { right:0 } 

/*무료학습/커뮤니티*/
.free-commu-area { background-color: #f5f5f5; }
.free-commu-area .title { padding-top:11%; }
.free-commu-area .filter-tab { margin:4% auto; display: flex; justify-content: center; align-items: center; } 
.free-commu-area .filter-tab li { position: relative; width:20%; text-align: center; } 
.free-commu-area .filter-tab li a { display: inline-block; color:#666; font-size: 4vw; } 
.free-commu-area .filter-tab li.active a { position: relative; font-weight: bold; color: #39d6ba; } 
.free-commu-area .filter-tab li:before { content: ''; width: 1px; height: 14px; position: absolute; top: 50%; transform: translateY(-50%); left: 0; background: #ccc; } 
.free-commu-area .filter-tab li:first-child:before { display: none; } 
.free-commu-area .filter-tab li.active a:after { content: ''; display: block; width: 100%; height: 4px; background: #39d6ba; border-radius: 6px; } 
.free-commu-area .mySwiper4 { padding-bottom: 35px; } 
.free-commu-area .mySwiper5 { padding-bottom: 35px; } 
.free-commu-area .free-learning-cont {width: 97%; margin: 5vw auto !important; padding:0 3%;}

.free-commu-area .mySwiper3 .swiper-wrapper {height: 90vw;}
.free-commu-area .mySwiper3 .card-content { padding: 10px 5% 10px; letter-spacing: -.05em; height: 110px; box-sizing: border-box; } 
.free-commu-area .mySwiper4 .card-content { padding: 10px 5% 10px; letter-spacing: -.05em; height: 110px; box-sizing: border-box; } 
.free-commu-area .mySwiper5 .card-content { padding: 10px 5% 10px; letter-spacing: -.05em; height: 110px; box-sizing: border-box; } 
.free-commu-area h3 { text-align: left; font-weight: 600; font-size: 14px; margin-bottom: 5px; } 
.free-commu-area .sub-txt { color: #333; font-size: 13px; line-height: 1.5; } 
.free-commu-area .swiper-scrollbar-drag { background: #35d8bd; } 
.free-commu-area .mySwiper3 ul li { border-radius: 8px; background: #fff; overflow: hidden; }
.free-commu-area .mySwiper4 ul li { border-radius: 8px; background: #fff; box-shadow: 2px 5px 10px 0px rgb(0 0 0 / 12%); overflow: hidden; } 
.free-commu-area .mySwiper5 ul li { border-radius: 8px; background: #fff; box-shadow: 2px 5px 10px 0px rgb(0 0 0 / 12%); overflow: hidden; } 
.free-commu-area .mySwiper3 ul li img { width:100% } 
.free-commu-area .mySwiper4 ul li img { width:100% } 
.free-commu-area .mySwiper5 ul li img { width:100% } 
.free-learning-cont .learn-box .icon-navertv,.free-learning-cont .learn-box .icon-blog { align-items: center; display: flex; color: #000; padding: 0 5% 10px; } 
.free-learning-cont .learn-box [class^="icon-"] i { width: 25px; height: 25px; background: url(//gscdn.hackers.co.kr/hackersbook_m/common/ico_sns.png) no-repeat 0 0/200%; margin-right:5px; } 
.free-learning-cont .learn-box .icon-youtube i{width:60px; height:39px;background-position: -250px -158px;}
.free-learning-cont .learn-box .icon-blog i { background-position-x: 100%; } 
.free-commu-area .community-cont { display: flex; justify-content: center; width: 100%; padding: 0 2%; background: linear-gradient(to bottom, #f5f5f5 60%, #ffffff 40%); margin-top: 0 !important;}
.free-commu-area .community-cont figure { text-align: center; padding: 2% 0%; margin: 0; }
.free-commu-area .community-cont figure a {display: block; width: 100%; height: 100%;}
.free-commu-area .community-cont figure span { display: block; width: 100%; }
.free-commu-area .community-cont figure span > img { width: 100%; } 
.free-commu-area .community-cont figure figcaption { line-height: 1.3; font-size: 4.2vw; color: #666; letter-spacing: -.05em; } 
.free-commu-area .community-cont figure figcaption strong { display: block; line-height: 1.8; } 

.free-commu-area .pagination-wrap {width: 8rem;  background: rgba(26, 70, 103, .03); padding: 1.5vw 3vw; border-radius: 2rem; z-index: 1; display: flex; justify-content: space-between; align-items: center; margin: 4vw auto 0;}
.free-commu-area .swiper-pagination, .swiper-pagination-fraction {position: relative; display: inline-block; width: 78%; bottom: 0; color: rgba(255, 255, 255, .5); text-align: left; font-size: 1rem; letter-spacing: 0.2vw; }
.free-commu-area .swiper-pagination {color: #b4c2c5;}
.free-commu-area .swiper-pagination .swiper-pagination-current {color: #666;}
.free-commu-area .pause-btn {width: 1rem; height: 1rem; position: relative;}
.free-commu-area .pause-btn::before {content: ''; display: block; width: 3px; height: 100%; background-color: #666666; position: absolute; left: 0.5vw; top: 0;}
.free-commu-area .pause-btn::after {content: ''; display: block; width: 3px; height: 100%; background-color: #666666; position: absolute; right: 0; top: 0;}

.mySwiper6 {width: 60%; height: 100% !important;}
.mySwiper6 .swiper-wrapper { height: auto !important; } 
.mySwiper6 ul li a { display: inline-block; margin: 0 auto; text-align: center; width: 100%; } 
.mySwiper6 ul li a dl { width: 100%; margin-top: 7%; } 
.mySwiper6 ul li a dl dt,.mySwiper6 ul li a dl dd { width: 100%; display: inline-block; } 
.mySwiper6 ul li a dl dt h3 { font-weight: 700; margin-bottom: 3% !important; width: 90%; margin: 0 auto; -webkit-line-clamp: 3; } 
.mySwiper6 ul li a dl dd p { color: #999; letter-spacing: -0.04rem; width: 90%; margin: 0 auto; line-height: 1.3; } 
.recommend-book-area .mySwiper6 ul li img {box-shadow: 6px 8px 15px 0px rgb(0 0 0 / 20%); height: 55vw;} 
.swiper-box {position: relative; height: 101.5vw;}
.swiper-box .swiper-button-prev, .swiper-box .swiper-button-next {background: url('https://cdn.hackers.co.kr/hackersbook/img/main/m/prev.png') 0 0 no-repeat;
    background-size: 100% 100%; width: 5vw; height: 10vw; top: 30%; z-index: 9;}
.swiper-box .swiper-button-prev {left: 12vw;}
.swiper-box .swiper-button-next {right: 12vw; transform: rotate(180deg);}
.swiper-box .swiper-button-prev::after, .swiper-box .swiper-button-next::after {display: none;}
.swiper-box .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {opacity: 1 !important;}

.swiper-box .pagination-wrap {width: 8rem; position: absolute; left: 50%; bottom: 10vw; transform: translateX(-50%); background: rgba(26, 70, 103, .03); padding: 1.5vw 3vw; border-radius: 2rem; z-index: 1; display: flex; justify-content: space-between; align-items: center;}
.swiper-box .swiper-pagination, .swiper-pagination-fraction {position: relative; display: inline-block; width: 78%; bottom: 0; color: rgba(255, 255, 255, .5); text-align: left; font-size: 1rem; letter-spacing: 0.2vw; }
.swiper-box .swiper-pagination {color: #b4c2c5;}
.swiper-box .swiper-pagination .swiper-pagination-current {color: #666;}
.swiper-box .pause-btn {width: 1rem; height: 1rem; position: relative;}
.swiper-box .pause-btn::before {content: ''; display: block; width: 3px; height: 100%; background-color: #666666; position: absolute; left: 0.5vw; top: 0;}
.swiper-box .pause-btn::after {content: ''; display: block; width: 3px; height: 100%; background-color: #666666; position: absolute; right: 0; top: 0;}

.mySwiper7, .mySwiper8 {display: block !important;}
.mySwiper7 img, .mySwiper8 img {width: 100%;}
.mySwiper7 .txt_info, .mySwiper8 .txt_info {display: flex;justify-content: space-between;}
.swiper7-pagination{line-height: 35px;}
.mySwiper7 .swiper-button-prev, .mySwiper7 .swiper-button-next,
.mySwiper8 .swiper-button-prev, .mySwiper8 .swiper-button-next {
    position: relative;top: 0;width: 35px;height: 35px;color:#fff;margin-top: 0;text-align: center;left: auto;right: auto;
}
.mySwiper7 .swiper-button-prev::after, .mySwiper7 .swiper-button-next::after,
.mySwiper8 .swiper-button-prev::after, .mySwiper8 .swiper-button-next::after {
    font-size: 20px;
}

.recommend-area dl {margin-left: 6%; padding: 3rem 0; position: relative;}
.recommend-area dl:nth-of-type(1) {border-bottom: 2px solid #eee;}
.recommend-area dl::after {content: ''; display: block; width: 15vw; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    position: absolute; right: 0; top: 0; z-index: 3;}
.recommend-area dl dt {margin-bottom: 4%; display: flex; justify-content: space-between; align-items: center;}
.recommend-area dl dt h4 {font-size: 1.8rem;}
.recommend-area dl dt h4::before {content: '•'; font-size: 1.2rem; color: #39d6ba; margin-right: 1.5vw;}
.recommend-area dl dt .btn-area {width: 12vw; height: 5vw; display: flex; justify-content: space-between; align-items: center; margin-right: 4vw; position: relative;}
.recommend-area dl dt .btn-area::after {content: ''; display: block; width: 2px; height: 70%; background-color: #eee; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.recommend-area .swiper-button-prev, .recommend-area .swiper-button-next {background: url('https://cdn.hackers.co.kr/hackersbook/img/main/m/prev2.png') 0 0 no-repeat; background-size: 100% 100%; width: 2vw; height: 3vw; position: static; margin-top: 0; z-index: 8;}
.recommend-area .swiper-button-next {transform: rotate(180deg);}
.recommend-area .swiper-button-next:after, .swiper-button-prev:after {display: none;}
.recommend-area .swiper-box {height: auto;}
.recommend-area .swiper-box .swiper.book-list {background: none;}
.recommend-area .swiper-box ul li a span {display: block; width: 100%;height:180px;}
.recommend-area .swiper-box ul li a span img {width: 100%;height:100%;}
.recommend-area .swiper-box ul li a h3.name {font-size: 1.3rem; margin-top: 5%;-webkit-line-clamp:4}


/*서브메뉴*/
.sub-menu-area { background: url(//gscdn.hackers.co.kr/hackersbook_m/main/bg_submenu.jpg) no-repeat center/cover fixed } 
.sub-menu-area ul { overflow:hidden; width: 100%; margin: 0 auto; } 
.sub-menu-area ul li a { letter-spacing:-1px; display: block; } 
.sub-menu-area ul li a img { width: 100%; } 
.sub-menu-area ul li:after { content: ''; display: block; width: 87%; height: 1px; margin: 0 auto; border-bottom:1px solid rgba(255,255,255,0.3); } 

/*공지사항/자주묻는 질문*/
.notice-area { padding: 10% 6% 6%; }
.question-area { padding: 6% 6% 13% 6%; }
.notice-area h2 a,
.question-area h2 a { float: right; width: 3vw; height: 4vw; background: url('https://cdn.hackers.co.kr/hackersbook/img/main/m/more_btn.png') 0 0 no-repeat; background-size: 100% 100%; }
.notice-area .notice-cont ul li,
.question-area .question-cont ul li { padding:2% 0; border-bottom: 2px solid #e1e1e1; }
.notice-area .notice-cont ul li a,
.question-area .question-cont ul li a { display: flex; align-items: center; font-size: 1.5rem; }
.notice-area .notice-cont ul li a span,
.question-area .question-cont ul li a span { width:15%; color:#2bbea4; }
.notice-area .notice-cont ul li a p,
.question-area .question-cont ul li a p { width:85%; color:#666666; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 

/*밴드/총판 안내*/
.band-wrap { display: flex; padding: 0 3%; background: #fff; } 
.band-wrap a:first-child { width: 66%; margin-right: 5%; } 
.band-wrap a:last-child { width: 29%; } 
.band-wrap img { width: 100%; } 

@media all and (max-width:1024px) and (min-width:768px) {
    html { font-size: 16px; }
    .mySwiper2 .pagination-wrap, .swiper-box .pagination-wrap {width: 9.2rem;}

}
@media all and (max-width:750px) { html { font-size: 16px; }
 }
@media all and (max-width:580px) { html { font-size: 14px; }
 }
@media all and (max-width:450px) { html { font-size: 13px; }
.main h2 {font-size: 2.5rem;}
.mySwiper2 .pagination-wrap {top: 88vw; width: 20vw;}
.swiper-box .pagination-wrap {bottom: 7vw;}
.free-commu-area .pagination-wrap {width: 22vw;}
.notice-area .notice-cont ul li a, .question-area .question-cont ul li a {font-size: 1.3rem;}
 }
@media all and (max-width:380px) { html { font-size: 12px; }
.main h2 {font-size: 2.3rem;}
.mySwiper2 .pagination-wrap {width: 22vw;}
.main .sub-txt {font-size: 1rem;}
.mySwiper6 ul li a dl dt h3 {margin-bottom: 1% !important;}
.recommend-area dl dt h4 {font-size: 1.6rem;}
.recommend-area .swiper-button-prev, .recommend-area .swiper-button-next {width: 3vw; height: 4.5vw;}
.recommend-area dl dt .btn-area::after {height: 80%;}
.notice-area .notice-cont ul li a span, .question-area .question-cont ul li a span {width: 18%;}
 }