.headroom--top nav ul>li>a {color:#333; font-size:16px;}
.headroom--top nav ul>li:last-child button {filter:initial;}
.headroom--top nav ul>li:last-child button img {width:auto;}
.header nav ul>li:last-child button {filter:invert(1) opacity(.7)}
.headroom--top .logo {filter:invert(1) opacity(.7);}

footer .wid {max-width:1920px; padding:0 60px;}
footer .sns {right:60px;}


.portfolio {max-width:1920px; padding:0 60px 80px 60px; overflow: hidden}
.portfolio .top {padding:280px 0 200px 0;}
.portfolio .top:after {content:''; clear:both; display: table;}
.portfolio .top .count {float:left; font-size:60px; color:#333; font-family: "Frank Ruhl Libre", serif; font-style:italic;}
.portfolio .top .right {float:right; width:50%;}
.portfolio .top .right:after {content:''; clear:both; display: table;}
.portfolio .top .right h2 {font-size:60px; font-style:italic; font-family: "Frank Ruhl Libre", serif; font-weight:400; color:#333; text-transform: uppercase; float:left; margin-right:100px;}
.portfolio .top .right p {font-size:14px; color:#999; float:left; font-weight:500; margin-top:18px;}
.portfolio .top .right p span {display: inline-block; width:100%; margin-top:10px; color:#333; font-family: "Frank Ruhl Libre", serif;}

.portfolio .bt_box {border-top:1px solid #555;}
.portfolio .bt_box:after {content:''; clear:both; display: table;}
.portfolio .bt_box button {float:left; width:50%; position: relative; padding:20px 0; font-size:14px; color:#333; letter-spacing: 4px; font-weight:600; border:none; background:none;}
.portfolio .bt_box button:first-child:after {content:''; position: absolute; right:0; top:18px; height:20px; width:1px; background:#555;}
.portfolio .bt_box button.on {color:#857063;}

.portfolio .tab {margin:5px 0 20px 0; width:100%; text-align: center; }
.portfolio .tab button {width:35px; height:35px; border-radius:5px; background:none; border:none; transition: .3s;}
.portfolio .tab button img {opacity: .3; transition: .3s;}
.portfolio .tab button.on {background:#f1f1f1;}
.portfolio .tab button.on img {opacity: 1;}

.portfolio .list {margin-top:5px;}
.portfolio .list:after {content:''; clear:both; display: table;}
.portfolio .list li {float:left; width:calc((100% - 60px) / 4); margin:0 20px 45px 0; cursor: pointer; position: relative;}
.portfolio .list li:before {content:''; position: absolute; left:0; top:0; z-index: 0; width:100%; padding-top:56%; background:#2f2e2c;}
.portfolio .list li:nth-child(4n) {margin-right:0;}
.portfolio .list li:after p{content:''; clear:both; display: table;}
.portfolio .list li .img {width:100%; padding-top:56%; position: relative; z-index: 1; opacity: .5; transition: .3s;}
.portfolio .list li p {margin-top:15px; font-size:15px; color:#333; font-weight:600; padding-right:94px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height:18px;}
.portfolio .list li p span {display: inline; font-weight:300; color:#666; margin-left:10px; letter-spacing: .3px; display: none;}
.portfolio .list li b {position: absolute; right:0; bottom:0; font-weight:600; font-size:15px; color:#333;}

.portfolio .list li:hover .img {opacity: 1;}

.portfolio .list.view2 li {width:calc((100% - 20px) / 2);}
.portfolio .list.view2 li p span {display: inline-block;}
.portfolio .list.view2 li:nth-child(2n) {margin-right:0;}

.portfolio .more {font-size:13px; color:#333; border:none; border-bottom:1px solid #333; letter-spacing: 3px	; background:none; font-weight:600; padding-bottom:2px; display: block; margin:30px auto 0 auto;}




.portfolio .brend_box {margin-top:120px;}
.portfolio .brend_box h3 {font-size:14px; font-family: "Frank Ruhl Libre", serif; font-weight:500; color:#555; padding:15px 2px; margin:15px 0 20px 0; border-bottom:1px solid #555; border-top:1px solid #555;}
.portfolio .brend_box h2 {font-size:22px; color:#333; font-weight:500; margin-top:8px; }
.portfolio .brend_box .brswiper {mix-blend-mode: multiply;}
.portfolio .brend_box .brswiper .swiper-slide {aspect-ratio: 2 / 1; width:180px !important;}
.portfolio .brend_box .brswiper .swiper-slide img {width:100%; mix-blend-mode: multiply; transform: scale(0.95)}
.portfolio .brend_box .brswiper .swiper-wrapper {transition-timing-function: linear !important;}






.detail_pop {position: fixed; left:0; top:0; width:100%; height:100%; z-index: 100; background:rgba(0,0,0,.85); display: none;}
.detail_pop.on {display: block;}
.detail_pop .detail_close {position: fixed; right:20px ;top:20px; width:36px; height:36px; border:none; background:rgba(255,255,255,.13); border-radius:50%; transition: .3s; z-index: 1;}
.detail_pop .detail_close:hover {background:rgba(255,255,255,.22);}
.detail_pop .detail_close img {width:11px; opacity: .9;}

.detail_pop .contact_bt {position: absolute; right:0px; top:20px; width:145px; height:38px;border-radius:50px; font-size:14px; color:#ccc; background:rgb(6 6 6 / 72%); border:none; z-index: 1; padding-bottom:2px}

.detail_pop .prev_bt {position: fixed; left:20px; bottom:40px; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.13); border:none; transition: .3s;}
.detail_pop .prev_bt:hover {background:rgba(255,255,255,.22);}
.detail_pop .prev_bt img {width:9px; margin-right:1px; opacity: .9;}
.detail_pop .prev_bt span {position: absolute; left:0; width:100%; text-align: center; bottom:-21px; color:#aaa; font-size:12px; font-weight:300;}

.detail_pop .next_bt {position: fixed; right:20px; bottom:40px; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.13); border:none; transition: .3s;}
.detail_pop .next_bt:hover {background:rgba(255,255,255,.22);}
.detail_pop .next_bt img {width:9px; margin-left:2px; opacity: .9;}
.detail_pop .next_bt span {position: absolute; left:0; width:100%; text-align: center; bottom:-21px; color:#aaa; font-size:12px; font-weight:300;}

.detail_pop .view {position: absolute; left:50%; max-width:1300px; width:100%; top:0; height:100vh; transform: translate(-50%,0); overflow-y:scroll; padding-bottom:40px;}
.detail_pop .view::-webkit-scrollbar {display: none;}
.detail_pop .view .box {padding:15px 0; }
.detail_pop .view .box:after {content:''; clear:both; display: table;}
.detail_pop .view .box .img {float:left; width:48px; height:48px; background:#eee; border-radius:50%; background:url('../../img/profile_img1.jpg')no-repeat center; background-size:cover;}
.detail_pop .view .box p {float:left; width:calc(100% - 50px); padding-left:16px; font-weight:400; margin-top:5px; font-size:16px; color:#fff;}
.detail_pop .view .box p span {display: inline-block; width:100%; position: relative; top:-1px; font-size:13px; font-weight:300; color:#aaa}

.detail_pop .view .thum {width:100%; margin-bottom:15px;}
.detail_pop .view iframe {width:100%; aspect-ratio: 16 / 9; margin-bottom:15px;}

.detail_pop .view .img_box {column-count: 3;
  column-gap: 15px;}
.detail_pop .view .img_box img {width: 100%;
  display: block;
  margin-bottom: 15px;}
  .detail_pop .view .img_box iframe {width: 100%;
  display: block;
  margin-bottom: 15px;}




@media screen and (max-width:1440px) {
	.portfolio .top .right {width:78%;}

	.detail_pop .view .box {padding:15px 20px}
	.detail_pop .contact_bt {right:66px;}

	.portfolio .tab {display: block;}


	.portfolio .list li {width:calc((100% - 40px) / 3);}
	.portfolio .list li:nth-child(4n) {margin-right:20px;}
	.portfolio .list li:nth-child(3n) {margin-right:0;}

	.portfolio .list.view2 li:nth-child(3n) {margin-right:20px;}
	.portfolio .list.view2 li:nth-child(2n) {margin-right:0;}
}


@media screen and (max-width:1200px) {
	.portfolio {padding:0 25px 60px 25px; }
	.portfolio .top {padding:90px 0 90px 0;}
	.portfolio .top .count {font-size:40px;}
	.portfolio .top .right {width:68%;}
	.portfolio .top .right h2 {font-size:40px; margin-right:65px;}
	.portfolio .top .right p {margin-top:7px;}
	.portfolio .top .right p span {margin-top:5px;}

	footer .wid {padding:0 25px;}
	footer .sns {right:25px;}


	.portfolio .list li {width:calc((100% - 20px) / 2);}
	.portfolio .list li:nth-child(3n) {margin-right:20px;}
	.portfolio .list li:nth-child(2n) {margin-right:0;}
	.portfolio .list.view2 li {width:100%; margin:0 0 45px 0;}
}

@media screen and (max-width:1024px) {
	.portfolio .top {padding:85px 0 55px 0;}
	.portfolio .top .count{display: none;}
	.portfolio .top .right {width:100%;}
	.portfolio .bt_box button {padding:15px 0;}
	.portfolio .bt_box button:first-child:after {top:14px; height:18px;}

	.portfolio .list li .img {opacity: 1;}
	.portfolio .list li p {font-size:13px;}
	.portfolio .list li b {font-size:13px;}

	.detail_pop .view  {padding-bottom:0;}
	.detail_pop .next_bt, .detail_pop .prev_bt { background:rgb(6 6 6 / 72%);}
	.detail_pop .next_bt span, .detail_pop .prev_bt span {color:#222; font-weight:400;}


}

@media screen and (max-width:767px) {
	.portfolio .list li {width:100%; margin:0 0 40px 0;}
	.portfolio .list li p {margin-top:12px; padding-right:0;}
	.portfolio .list li p span {margin-left:10px;}
	.portfolio .list li b {right:initial; left:0; bottom:-18px;}

	.portfolio .top {padding:73px 0 30px 0}
	.portfolio .top .right h2 {font-size:35px;}
	.portfolio .top .right p {width:50%; font-size:13px; margin-top:11px;}
	.portfolio .top .right p span {margin-top:3px;}

	.portfolio .tab {display: none;}

	.portfolio .bt_box {margin-top:10px;}
	.portfolio .bt_box button {font-size:13px; letter-spacing: 3px; padding:12px 0;}
	.portfolio .bt_box button:first-child:after {top:10px; height:18px;}

	.portfolio .more {margin-top:15px;}

	.detail_pop .contact_bt {display: none;}

	.detail_pop .view .img_box {column-count: 2;}

	.portfolio .brend_box .brswiper .swiper-slide {width:90px !important;}
	.portfolio .brend_box .brswiper .swiper-slide img {transform: scale(1)}
	footer .sns {right:0px;}
}