@charset "utf-8";
/*
2024-04-04 (주)파이브센스_FIVESENSES.Corp.

본 라이브러리(라이브러리 소스코드)는 (주)파이브센스의 자산입니다.
무단으로 외부로 유출 및 일시 반출을 할 경우 손해배상 책임 및 민사/형사적 책임이 있습니다.
*/

.main_sbgb1 {position: relative; background-color: #f3f9f1; padding: 130px 0;}
.main_sbgb1 * {line-height: 1; }

/* 타이틀 */
.main_sbgb1 .content_top {display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px;}
.main_sbgb1 .main_cont_title{width: 100%;}
.main_sbgb1 .main_cont_title h2,
.main_sbgb1 .main_cont_title h2 p{font-size: 40px; color: #1b1b1b; font-weight: 700; text-align: center;font-family: "Montserrat", sans-serif !important; margin-bottom: 20px;}
.main_sbgb1 .main_cont_title h3 {font-size: 20px; color:#555; text-align: center; margin-bottom: 30px;}

/* 더보기 */
.main_sbgb1  .content_top .more_box{width: auto;}
.main_sbgb1  .content_top .more_box .more_a {position: relative;height: 40px; width: 145px; display: flex; align-items: center; gap: 0 54px;  padding: 0 20px; border: 1px solid #e1e1e1; border-radius: 20.5px;background-color: #fff; overflow: hidden; transition: transform 600ms ease;}
.main_sbgb1  .content_top .more_box .more_a::after {position: absolute; content:""; visibility: hidden; transition: all 600ms ease; width: 100%; top: 0; width: 100%; height: 100%;  border-radius: 20.5px; background-color: #8d70ed; left: -20px; transform: translateX(-100%); transition: all 600ms ease; }
.main_sbgb1  .content_top .more_box .more_a:hover::after,
.main_sbgb1  .content_top .more_box .more_a:focus::after
{transform: translateX(0);  background-color: #652df1; left: 0; visibility: inherit; }
.main_sbgb1 .content_top .more_box .more_a .title_more {font-size: 15px; color: #666666; z-index: 1; transition: color 600ms ease; margin-top: 3px;}
.main_sbgb1 .content_top .more_box .more_a .title_plus {position: absolute; transform: translateY(-50%); top: 50%; right: 18px; width: 11px; height: 10px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAbElEQVQYlbXQMQ7CMBBE0ecoEmVuaYncgC4tHa19gNTcBI6Sks40gKztXDDSNn9WX6tNrTXf1FrhwI4156zPZCCplBLZzxyLIfP0MbVuFpwDa1hmbDh1gg1P3IP4NeMW4AUPXOMZ6W+vG1p+A/ZBIiuP2ooGAAAAAElFTkSuQmCC') no-repeat center; transition: background 600ms ease;  transition-duration: 1s; z-index: 1;}
.main_sbgb1 .content_top .more_box .more_a:hover .title_more,
.main_sbgb1 .content_top .more_box .more_a:focus .title_more
{color: #fff;  position: relative;}
.main_sbgb1 .content_top .more_box .more_a:hover .title_plus,
.main_sbgb1 .content_top .more_box .more_a:focus .title_plus {background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAASElEQVQYlWP4//8/Axr+8P///2lYxBmYGEgAtFPM+P///w8MDAz8RKgVYGFgYGhgYGBgRxJsYGBguMDAwLABTfEPDB8PgdAAAL8yTGeCICX7AAAAAElFTkSuQmCC') no-repeat center;}


/* 컨텐츠 영역 */
.main_sbgb1 .swiper_a {height: 100%; display: block; border-radius: 17px; background-color: #f5f5f5; overflow: hidden; transition: background-color .5s ease-in-out; }
.main_sbgb1 .swiper_a .post_content {padding: 25px 30px; min-height: 168px;}
.main_sbgb1 .post_content .post_label {display: inline-block; height: 22px; line-height: 22px; font-size: 12px; font-weight: 700; color: #fff; padding: 0px 9px; background: #adadad; border-radius: 50px;}
.main_sbgb1 .post_content .post_label:empty {display: none;}
.main_sbgb1 .post_content .post_subject{line-height: 1.5; font-size: 16px; margin-top: 11px; font-weight: 500; color: #1b1b1b; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  }
.main_sbgb1 .post_content .post_date {display: inline-block; margin-top: 20px; font-size: 14px; color: #999999;}

.main_sbgb1 .img_wrap{overflow: hidden; border-radius: 17px;}
.main_sbgb1 .img_wrap .img_item{transition: all .5s ease-in-out;}

.main_sbgb1 .swiper_a:hover {background-color: #e8e8e8;}
.main_sbgb1 .swiper_a:hover .img_wrap .img_item{transform: scale(1.1);}



/* 스와이퍼 버튼 */
.main_sbgb1 .tap_content_box .swiper-button{top: 47%; width: 64px; opacity: .35; transition: all .5s; display: none;  transition: all .5s;}
.main_sbgb1 .tap_content_box .swiper-button img{border-radius: 50%; box-shadow: 3px 0 8px rgba(61,61,61,.15);}
.main_sbgb1 .tap_content_box .swiper-button.swiper-button-next{right: -18px;}
.main_sbgb1 .tap_content_box .swiper-button.swiper-button-prev{left: -18px;}
.main_sbgb1 .tap_content_box .swiper-button::after{display: none;}
.main_sbgb1 .tap_content_box:hover .swiper-button{display: block;}
.main_sbgb1 .tap_content_box:hover .swiper-button.swiper-button-disabled{opacity: 0;}

.main_sbgb1 .tap_content_box .swiper-button:hover{opacity: 1;}
.main_sbgb1 .tap_content_box .swiper-button.swiper-button-disabled:hover{opacity: 0;}


@media all and (max-width: 991px) {
    .main_sbgb1 .main_cont_title h2{font-size: 28px; width: auto; margin-bottom: 16px;}
	.main_sbgb1 .main_cont_title h3{font-size: 14px; margin-bottom: 0; line-height: 20px; text-wrap: balance; word-break: keep-all;}

    .main_sbgb1 .tap_content_box{margin-top: 18px;}

    .main_sbgb1 .post_subject{font-size: 13px;}

    .main_sbgb1 .more_box{margin-top: 25px;}
    .main_sbgb1 .more_box a{max-width: 182px; font-size: 12px; padding: 14px 0 12px; border: 1px solid #f1f1f1;}
    .main_sbgb1 .more_box a .arrow{width: 5px; height: 10px; top: .5px; background: url(/img/mmore_arrow.png) no-repeat center center / cover;}
    .main_sbgb1 .more_box a:hover .arrow{background: url(/img/mmore_arrow_on.png) no-repeat center center / cover;}
}


.board_wrap .youtube_content {float: left; border-radius: 20px;}
.board_wrap .youtube_content figure {position: relative; }
.board_wrap .youtube_content figure img {border-radius: 15px; width: 100%;}
.board_wrap .left_area {width: 61%; margin-right: 30px;}
.board_wrap .left_area figure img {width: 100%; border-radius: 15px;}
.board_wrap .left_area .text_area {margin-top: 30px;}
.board_wrap .left_area .text_area h2 {position: relative; font-size: 26px; font-weight: bold; margin-bottom: 30px; }
.board_wrap .left_area .text_area h2::before {content: ''; position: absolute; bottom: -15px; width: 100%; height: 1px; background: #e9e9e9;}
.board_wrap .left_area .text_area p {font-size: 14px; font-weight: 400; color: #666;}
.board_wrap .right_area {width: calc(100% - 61% - 30px);}
.board_wrap .right_area2 {margin-top: 28px;}
.board_wrap .youtube_content figure::before {visibility: hidden; opacity: 0; position: absolute;  content: ""; background-color: rgba(0, 0, 0, .4); width: 100%; height: 100%; z-index: 5; border-radius: 20px; transition: all 400ms; background-image: url(/img/play_btn.png); background-repeat: no-repeat; background-position: center center;}
.board_wrap .youtube_content figure::after {visibility: hidden; opacity: 0; position: absolute;  content: ""; background-image: url('/img/youtube_on.png'); cursor: pointer;
width: 63px; height: 63px; z-index: 6; transition: all 400ms; top:50%; left: 50%; transform: translate(-50%, -50%);}
.board_wrap .youtube_content figure a img {width: 100%;}
.board_wrap .youtube_content:hover figure::before,
.board_wrap .youtube_content:hover figure::after{visibility: visible; opacity: 1;}

/* 유튜브 모달 */
.yt_modal_wrap  {position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0,0,0,.4); z-index: 1;}
.yt_modal {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: 10px;}
.yt_modal .yt_modal_check button {text-align: center; padding: 25px 0;width: 100%; background: #fff; overflow: hidden; border: none; border-radius: 0 0 10px 10px; border-top: 1px solid #e3e3e3; font-size: 20px; font-weight: 400; color: #00a0e9; display: block;}

/* 16:9 비율 유지 */
.yt_modal {max-width: 920px;margin: 0 auto;width: 100%;border-radius: 20px;}
.yt_modal .youtube_ratio {height: 0;padding-top: 56.25%;position: relative;}
.yt_modal .youtube_ratio iframe {position: absolute;width: 100%;height: 100%;top: 0;left: 0;}

/* modal close */
.modal_close {position: absolute;top: -30px;right: -30px;width: 24px;height: 24px; z-index: 9;}
.modal_close span {position: absolute;display: block;width: 100%;height: 2px;background-color: #fff;top: 50%;cursor: pointer;}
.modal_close span:first-child {transform: translateY(-50%) rotate(45deg);}
.modal_close span:last-child {transform: translateY(-50%) rotate(-45deg);}

/* 모달 숨김 */
.yt_modal_wrap {visibility: hidden; opacity: 0; z-index: 1001;}

/* 모달 보임 */
.yt_modal_wrap.open {visibility: visible; opacity: 1;}

/* 모달 오픈 시 고정 */
html.fixed {
  position: fixed;
  overflow-y: scroll;
  width: 100%;
}

@media(max-width: 991px){
	.board_wrap .left_area {width: 100%;margin-right: 0;}
	.board_wrap .right_area {width: calc((100% - 10px) / 2);}
	.board_wrap .right_area1 {margin-right: 10px;}
	.yt_modal {max-width: 330px; width: 100%;}
	.modal_close {position: absolute;top: 20px;right: 20px;width: 16px;height: 16px;}
	.board_wrap .right_area2 {margin-top: 0;}
	.board_wrap .youtube_content figure::after {background-size: 100%; width: 30px; height: 30px;}

	.board_wrap .left_area .text_area {margin-top: 25px;}
	.board_wrap .left_area .text_area h2 {font-size: 17.5px;line-height: 1.2rem;margin-bottom: 30px;}
	.board_wrap .left_area .text_area p {font-size: 12px; margin-bottom: 25px;}
	.board_wrap .youtube_content,
	.board_wrap .youtube_content figure::before{border-radius: 10px; background-size: 30px;}
	.main_sbgb1 .content_top {margin-bottom: 25px;}
}