@charset "utf-8";

/* multiArea */
.multiArea {position:relative; padding:33px 40px;}

.grid-wrap {display:flex; flex-wrap:wrap;}
.grid-wrap .grid-left {width:336px;}
.grid-wrap .grid-right {width:calc(100% - 400px); margin-left:64px;}

/* srchbox */
.srchbox-smp {position:relative; height:48px; margin-bottom:50px; border:1px solid #a1a8ae;}
.srchbox-smp input[type=text] {width:calc(100% - 48px); height:100%; padding:0 18px;}
.srchbox-smp button {width:48px; height:100%;}
.srchbox-smp button>img {vertical-align:middle;}

/* filter-sqr */
.filter-sqr {display:flex; align-items:center; margin-bottom:50px;}
.filter-sqr a {display:flex; align-items:center; justify-content:center; min-height:48px; padding:0 24px; text-align:center; color:#74849c; font-size:1.5rem; border:1px solid #d4d9de; border-radius:4px; transition:300ms;}
.filter-sqr a:not(:last-child){margin-right:10px;}
.filter-sqr a:hover {background-color:#f3f3f3;}
.filter-sqr a.current {color:#fff; background-color:#303a4a; border-color:#303a4a;}

/* category */
.category-ic-ar a {position:relative; display:block; padding:13px 0 13px 25px; color:#000; font-size:1.6rem; border-bottom:1px solid #e4eaef;}
.category-ic-ar a:hover {background-color:#f3f3f3; transition:all .4s;}
.category-ic-ar a > span {padding-left:8px; font-size:inherit; color:#4e9ca0; font-family: 'Arial, Helvetica, sans-serif'; letter-spacing:1;}
.category-ic-ar a {background:url('../images/sub/ico-folder-close.svg') no-repeat 0 15px/17px 17px;}
.category-ic-ar a.current {font-family:'ntsb'; background:url('../images/sub/ico-folder-open.svg') no-repeat 0 15px/17px 17px;}
.category-ic-ar a.current::before {content:''; position:absolute; top:21px; right:0; width:54px; height:7px; background:url('../images/common/ico-arr-curr.svg') no-repeat;}
.category-ic-ar .all::after {display:none;}

/* mt-tit-ico */
.mt-tit-ico {margin-bottom:20px; color:#000; font-size:2.2rem;}
.mt-tit-ico h4 {display:flex; align-items:flex-end; font-weight:normal;}
.mt-tit-ico h4 > img {width:32px; height:24px; margin-right:14px;}
.mt-tit-ico h4 > span {margin-left:10px; margin-bottom:2px; color:#4e9ca0; font-size:1.6rem;}

/* list-gallery-multi */
.list-gallery-multi  {overflow:hidden; display:flex; flex-wrap:wrap; margin-left:-20px; border-bottom:1px solid #ccc;}
.list-gallery-multi .wrap {width:100%; display:flex; flex-wrap:wrap;}
.list-gallery-multi .wrap ~ .viewerWrap {margin:0 0 20px 20px;}
.list-gallery-multi .items {position:relative; width:16.6%; margin-bottom:25px;}
.list-gallery-multi .items>a {display:block; margin-left:20px;}
.list-gallery-multi .items .thumb {position:relative; height:140px; margin-bottom:7px; overflow:hidden;}
.list-gallery-multi .items .thumb::after {content:''; z-index:3; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ededed;}
.list-gallery-multi .items .thumb > span {position:absolute; top:0; left:0; right:0; bottom:0; background-repeat:no-repeat; background-size:cover; background-position:center; transition:300ms;}
.list-gallery-multi .items .thumb.play::before {content:''; z-index:2; position:absolute; top:0; left:0; right:0; bottom:0; background:url('../images/common/btn-play.png') no-repeat center/56px;}
.list-gallery-multi .items>a:hover .thumb > span {transform:scale(1.1); transition:300ms;}
.list-gallery-multi .items .sbj {color:#333; font-size:1.4rem; line-height:1.4; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}
.list-gallery-multi .items>a.current .thumb::after {border:5px solid #000; background:rgba(0, 0, 0, .4) url('../images/sub/ico-th-check.png') no-repeat center;}
.list-gallery-multi .items>a.current .thumb>span {transform:none;}



@media (max-width: 1440px) {
	.list-gallery-multi .items {width:20%;}
}
@media (max-width: 1280px) {
	.multiArea {padding:33px 30px;}
	.grid-wrap .grid-left {width:286px}
	.grid-wrap .grid-right {width:calc(100% - 350px)}

	.list-gallery-multi .items {width:20%;}
}
@media (max-width: 1220px) {
	.list-gallery-multi .items {width:25%;}
}

@media (max-width: 1024px) {
	
	.multiArea {padding:6px 8px;}


	.grid-wrap {display:block;}
	.grid-wrap .grid-left,
	.grid-wrap .grid-right {width:100%; margin-left:0;}

	.filter-sqr a {width:25%; min-height:36px; padding:0 8px;}

	.srchbox-smp {height:42px; margin-bottom:7px;}
	.srchbox-smp input[type=text] {width:calc(100% - 42px);}
	.srchbox-smp button {width:42px;}
	
	.category-ic-ar {z-index:4; position:relative; margin-bottom:12px;}
	.category-ic-ar .all {position:relative;}
	.category-ic-ar .all::after {content:''; position:absolute; top:50%; right:0; display:block; width:25px; height:25px; transform:translateY(-50%); border:1px solid #a1a8ae; border-radius:4px; background:url('../images/sub/ico-arr-dw.svg') no-repeat center;}
	.category-ic-ar .all.active::after {background:url('../images/sub/ico-arr-up.svg') no-repeat center;}
	.category-ic-ar .list-ctg-menu {display:none; position:absolute; top:46px; left:0; right:0; bottom:0; height:100%; overflow-y:scroll; background-color:#fff;}
	.category-ic-ar a.current::before {display:none;}

	.filter-sqr {margin-bottom:8px;}

	.mt-tit-ico {display:none;}

	.list-gallery-multi {margin-left:-5px;}
	.list-gallery-multi .items>a {margin-left:5px;}
	.list-gallery-multi .items .thumb.play::before {background-size:32px;}
	.list-gallery-multi .wrap ~ .viewerWrap {margin:0 0 20px 5px;}
}
@media (max-width: 780px) {
	.list-gallery-multi .items {width:33.3%; margin-bottom:12px;}
}
@media (max-width: 450px) {
	.list-gallery-multi .items .thumb {height:72px;}
}