@charset "utf-8";
@font-face {
	font-family:'Jalnan';
	font-weight:100; 
	src: url('/humanframe/global/assets/css/font//JalnanOTF.otf') format('opentype'),
	url('/humanframe/global/assets/css/font/Jalnan.woff') format('woff'),
	url('/humanframe/global/assets/css/font/Jalnan.eot');
}
header{
    background-image: url(/humanframe/theme/busan22/assets/img/content/snsListNew/topBg.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    position: relative;
}
header::after{
    display: block;
    content:'';
    width:456px;
    height:298px;
    background-image:url(/humanframe/theme/busan22/assets/img/content/snsListNew/topBgItem.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom:0;
    right: 50%;
    transform: translateX(140%);
}
.logo_area{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;    
}
.headerSnsList{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}
.headerSnsList > li{
    display: block;
    width:43px;
    height:43px;
}
.headerSnsList > li > a{
    display:block;
    width:100%;
    height:100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    border-radius: 25px;
    background-color:#fff;
    transition: ease 0.2s;
}
.headerSnsList > li:nth-child(1) > a{
    background-image: url(/humanframe/theme/busan22/assets/img/content/snsListNew/topSnsLink01.png);
}
.headerSnsList > li:nth-child(2) > a{
    background-image: url(/humanframe/theme/busan22/assets/img/content/snsListNew/topSnsLink02.png);
}
.headerSnsList > li:nth-child(3) > a{
    background-image: url(/humanframe/theme/busan22/assets/img/content/snsListNew/topSnsLink03.png);
}
.headerSnsList > li:nth-child(4) > a{
    background-image: url(/humanframe/theme/busan22/assets/img/content/snsListNew/topSnsLink04.png);
}
.headerSnsList > li:nth-child(5) > a{
    background-image: url(/humanframe/theme/busan22/assets/img/content/snsListNew/topSnsLink05.png);
}
.headerSnsList > li:nth-child(6) > a{
    background-image: url(/humanframe/theme/busan22/assets/img/content/snsListNew/topSnsLink06.png);
}
.headerSnsList > li:nth-child(1):hover > a{
    background-image: url(/humanframe/theme/busan22/assets/img/content/snsListNew/topSnsLink01HV.png);
}
.headerSnsList > li:nth-child(2):hover > a{
    background-image: url(/humanframe/theme/busan22/assets/img/content/snsListNew/topSnsLink02HV.png);
    background-color:#435e99;
}
.headerSnsList > li:nth-child(3):hover > a{
    background-image: url(/humanframe/theme/busan22/assets/img/content/snsListNew/topSnsLink03HV.png);
    background-color: #d3161e;
}
.headerSnsList > li:nth-child(4):hover > a{
    background-image: url(/humanframe/theme/busan22/assets/img/content/snsListNew/topSnsLink04HV.png);
    background-color: #5db12a;
}
.headerSnsList > li:nth-child(5):hover > a{
    background-image: url(/humanframe/theme/busan22/assets/img/content/snsListNew/topSnsLink05HV.png);
    background-color:#fae101;
}
.headerSnsList > li:nth-child(6):hover > a{
    background-image: url(/humanframe/theme/busan22/assets/img/content/snsListNew/topSnsLink06HV.png);
    background-color:#010101;
}
.headerSnsList > li > a > p{
	overflow:hidden;
	border:0;
	width:1px;
	height:1px;
	clip:rect(1px, 1px, 1px, 1px);
	clip-path:inset(50%)
}
.header_text{
    padding: 0px 106px 194px;
    font-family: 'Jalnan';
    font-size: 6rem;
    line-height: 1em;
}
.header_text > p{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.header_text > p > span:nth-child(2){
    margin:0 14px 0 22px 
}
.filterWrap{
    display: block;
    width:100%;
    background-color: #332365;
    padding: 10px 0 0 0;
    margin-bottom:62px;

}
.filter_area{
    max-width: 1440px;
    align-items: flex-start;
    margin-bottom:0;
}
.filter_area > li{
    width:25%;
    max-width: inherit;
    position: relative;
    text-align: center;
}
.filter_area > li > input[type="radio"] + label{
    color:#fff;
    border:0;
    padding: 28px 0 38px;
    position: relative;
    padding-left:0;
}
.filter_area > li > input[type="radio"]#view_blog + label,
.filter_area > li > input[type="radio"]#view_ytb + label,
.filter_area > li > input[type="radio"]#view_bbb + label{
    border:0;
    background-image:none;
    padding-left:0;
}

.filter_area > li > input[type="radio"] + label > p{
    font-size: 2.4rem;
    line-height:1em;
    position: relative;
    display:inline;
}
.filter_area > li > input[type="radio"]#view_bbb + label > p::after,
.filter_area > li > input[type="radio"]#view_ytb + label > p::after,
.filter_area > li > input[type="radio"]#view_blog + label > p::after{
    display:block;
    content:'';
    width:31px;
    height:25px;
    background-image:url(/humanframe/theme/busan22/assets/img/content/snsListNew/snsTabMenuBl.png);
    background-size:100%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top:50%;
    left:-37px;
    transform: translate(0, -50%);
}

.filter_area > li > input[type="radio"]#view_bbb + label > p::after{
    width:47px;
    height:23px;
    background-image:url(/humanframe/theme/busan22/assets/img/content/snsListNew/snsTabMenuBb.png);
    left:-51px;
}
.filter_area > li > input[type="radio"]#view_ytb + label > p::after{
    width:30px;
    height:22px;
    background-image:url(/humanframe/theme/busan22/assets/img/content/snsListNew/snsTabMenuYt.png);
    left:-36px;
}
.filter_area > li > input[type="radio"]#view_bbb:checked + label,
.filter_area > li > input[type="radio"]#view_ytb:checked + label,
.filter_area > li > input[type="radio"]#view_blog:checked + label,
.filter_area > li > input[type="radio"]:checked + label{
    color: #222;
    background-color: inherit;
    /* background-image: url(/humanframe/theme/busan22/assets/img/content/snsListNew/filterOnBg.png);
    background-position: center bottom;
    background-size: 100% auto;
    background-repeat: no-repeat; */
    border-radius: 0;
    padding: 38px 89px 28px;
    width:calc(100% + 36px);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to right, transparent 0, transparent 88px, white 88px, white calc(100% - 89px), transparent calc(100% - 88px), transparent 100%);
}
.filter_area > li > input[type="radio"]#view_bbb:checked + label::after,
.filter_area > li > input[type="radio"]#view_ytb:checked + label::after,
.filter_area > li > input[type="radio"]#view_blog:checked + label::after,
.filter_area > li > input[type="radio"]:checked + label::after{
    display: block;
    content:'';
    width:89px;
    height:100%;
    background-image: url(/humanframe/theme/busan22/assets/img/content/snsListNew/filterOnBgslice.png);
    background-repeat: no-repeat;
    background-size:100% 100%;
    background-position: top left;
    position: absolute;
    top:0;
    left:0;
}
.filter_area > li > input[type="radio"]#view_bbb:checked + label::before,
.filter_area > li > input[type="radio"]#view_ytb:checked + label::before,
.filter_area > li > input[type="radio"]#view_blog:checked + label::before,
.filter_area > li > input[type="radio"]:checked + label:before{
    display: block;
    content:'';
    width:89px;
    height:100%;
    background-image: url(/humanframe/theme/busan22/assets/img/content/snsListNew/filterOnBgslice.png);
    background-repeat: no-repeat;
    background-size:100% 100%;
    background-position: top left;
    position: absolute;
    transform: scaleX(-1);
    top:0;
    right:0;
}

.filter_area > li > input[type="radio"]#view_blog:checked + label > p::after{
    background-image:url(/humanframe/theme/busan22/assets/img/content/snsListNew/snsTabMenuBlOn.png);
}
.filter_area > li > input[type="radio"]#view_bbb:checked + label > p::after{
    background-image:url(/humanframe/theme/busan22/assets/img/content/snsListNew/snsTabMenuBbOn.png);
}
.filter_area > li > input[type="radio"]#view_ytb:checked + label > p::after{
    background-image:url(/humanframe/theme/busan22/assets/img/content/snsListNew/snsTabMenuYtOn.png);
}
.colorWh{
    color:#fff !important;
}
.colorPk{
    color:#e6007e !important;
}
.colorPp{
    color:#332365 !important;
}

.board_item_bx > .thumb_b{
	display:block;
	width:100%;
    /*aspect-ratio: 330 / 232;
    aspect-ratio: 330 / 200;*/
    aspect-ratio: 16 / 9;
    overflow:hidden;
    margin-bottom:20px;
    position:relative;
}
.board_item_bx > .thumb_b > img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:top left;
    transform: scale(1);
    transition:0.4s ease-in;
}
.board_item_bx:hover .thumb_b > img{
    transform: scale(1.05);
    transition:0.4s ease-in;
}
.board_item_bx > div.thumb_b::after{
	display:block;
	content:'';
	width:56px;
	height:56px;
	position:absolute;
	top:0;
	right:0;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
}

.board_item_bx.bbb > div.thumb_b::after{
    background-image: url(/humanframe/theme/busan22/assets/img/content/snsListNew/icon_tag_bbb.png);
}


@media screen and (max-width: 1280px) {
    header {
        background-position: right -89px bottom;
    }
    header::after {
        width: 386px;
        height: 252px;
        background-position: center bottom;
        transform: translateX(120%);
    }
    .logo_area {
        padding:32px 32px 53px;
    }
    .header_text{
        padding:0 32px 104px;
    }
    .header_text > p{
        flex-wrap: wrap;
        width: 500px;
        gap: 16px 0;
    }
    .header_text > p > span:nth-child(2){
        margin-left:0;
    }
}
@media screen and (max-width: 1024px) {
    .filterWrap{
        padding-top:0;
    }
    
    .filter_area > li > input[type="radio"]#view_bbb:checked + label::after,
    .filter_area > li > input[type="radio"]#view_ytb:checked + label::after,
    .filter_area > li > input[type="radio"]#view_blog:checked + label::after,
    .filter_area > li > input[type="radio"]:checked + label::after,
    .filter_area > li > input[type="radio"]#view_bbb:checked + label::before,
    .filter_area > li > input[type="radio"]#view_ytb:checked + label::before,
    .filter_area > li > input[type="radio"]#view_blog:checked + label::before,
    .filter_area > li > input[type="radio"]:checked + label:before{
        display: none;
    }
    .filter_area > li > input[type="radio"]:checked + label,
    .filter_area > li > input[type="radio"] + label{
        padding-left:0;
    }
    .filter_area > li > input[type="radio"]#view_blog + label,
    .filter_area > li > input[type="radio"]#view_ytb + label,
    .filter_area > li > input[type="radio"]#view_bbb + label{
        padding-left:24px;
    }
    .filter_area > li > input[type="radio"]#view_bbb:checked + label, 
    .filter_area > li > input[type="radio"]#view_ytb:checked + label, 
    .filter_area > li > input[type="radio"]#view_blog:checked + label, 
    .filter_area > li > input[type="radio"]:checked + label{
        width:100%;
        position: static;
        transform: inherit;
        background:#fff;
        padding: 28px 0 38px 24px;
    }
    .filter_area > li{
        border-right:1px solid #716594;
    }
    .filter_area > li:last-child{
        border-right:0;
    }
        
}
@media screen and (max-width: 960px) {
    header::after {
        width: 306px;
        transform: translateX(130%);
    }
    .header_text{
        font-size: 4.5rem;
    }
    .header_text > p{
        width:380px;
    }
    .filter_area > li > input[type="radio"]#view_bbb:checked + label, 
    .filter_area > li > input[type="radio"]#view_ytb:checked + label, 
    .filter_area > li > input[type="radio"]#view_blog:checked + label, 
    .filter_area > li > input[type="radio"]:checked + label,
    .filter_area > li > input[type="radio"]#view_blog + label,
    .filter_area > li > input[type="radio"]#view_ytb + label,
    .filter_area > li > input[type="radio"]#view_bbb + label{
        padding: 18px 0 28px 24px;
    }
    .filter_area > li > input[type="radio"]:checked + label,
    .filter_area > li > input[type="radio"] + label{
        padding-left:0;
    }
}
@media screen and (max-width: 860px) {
    header::after {
        transform: translateX(110%);
    }
}
@media screen and (max-width: 768px) {
    .filterWrap {
        margin-bottom: 32px;
        overflow-x: auto;
        overflow: auto; 
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .filterWrap::-webkit-scrollbar {
        display: none;
      }
    /* .filter_area{
        min-width:600px;
    } */
    .filter_area > li > input[type="radio"] + label > p{
        font-size:1.6rem;
    }
    .filter_area > li > input[type="radio"]#view_bbb:checked + label, 
    .filter_area > li > input[type="radio"]#view_ytb:checked + label, 
    .filter_area > li > input[type="radio"]#view_blog:checked + label, 
    .filter_area > li > input[type="radio"]:checked + label,
    .filter_area > li > input[type="radio"]#view_blog + label,
    .filter_area > li > input[type="radio"]#view_ytb + label,
    .filter_area > li > input[type="radio"]#view_bbb + label{
        padding: 23px 0 23px;
    }
    .filter_area > li > input[type="radio"]#view_bbb + label > p::after,
    .filter_area > li > input[type="radio"]#view_ytb + label > p::after,
    .filter_area > li > input[type="radio"]#view_blog + label > p::after{
        display:none;
    }
}
@media screen and (max-width: 680px) {
    header::after {
        width: 226px;
        transform: translateX(110%);
    }
    .header_text {
        padding-bottom:160px;
    }
}
@media screen and (max-width: 580px) {
    header {
        background-position: right -79px bottom;
    }
    header::after {
        background-image:url(/humanframe/theme/busan22/assets/img/content/snsListNew/topBgItemM.png);
        transform: translate(0, -50%);
        right: 7.5862%;
        bottom: inherit;
        top: 40%;
        z-index: 1;
    }
    .headerSnsList{
        position: absolute;
        bottom: 48px;
    }
    .header_text{
        font-size: 3.6rem;
        padding: 10px 16px 110px;
        position: relative;
        z-index: 2;
    }
    .logo_area {
        padding: 24px 16px 20px;
    }
    .logo_area > a > img{
        width:100px;
    }
    .headerSnsList > li{
        width:33px;
        height:33px;
    }
    .header_text > p > span:first-child{
        display: block;
        width:100%;
    }
  
}
@media screen and (max-width: 480px) {
    .logo_area {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 20px 0;
    }
    header::after {
        right: -5%;
        top: 30%;
        background-size: 200px auto;
    }
    .header_text > p{
        gap:8px 0;
    }
}
@media screen and (max-width: 410px) {
    
    header::after{
        display: none;
    }
}