/*포트폴리오*/
/* 추가 */
#port_wrap { margin:120px 0 0; padding:0 0 150px; }
.con_inner { width:100%; max-width: 1620px; margin:0 auto; }
.big_title { font-family: 'Play', sans-serif; text-align: center; font-size: 54px; font-weight: 700; letter-spacing: -1.35px; color: #000; word-break: keep-all; margin:0 0 20px; }

.list_wrap { margin:0 0 50px; }
.list_wrap .top { display: flex; justify-content: space-between; }

/* 부트스트랩 */
.input-group { background: #f7f7f7; }
.form-group-lg .form-control { height: 70px; padding:10px 30px; background: #f7f7f7; border:0; border-radius: 0; box-shadow: none; }
.form-group-lg .form-control::placeholder { font-size: 15px; color:#b2b2b2; }
.btn-danger { border:0; background: #f7f7f7; border:0; border-radius: 0; background-color: #f7f7f7; color:#000; font-size:33px; }
.btn-danger:hover{ background-color:#333; color:#fff; }
.text-danger { color: #930009; }

/* 기존변형 */
.tags_area_wrap { margin:0 auto 20px; padding:20px 40px 0px 40px; text-align: center; border:1px solid #efefef; border-top:2px solid #000;}
.tags_area { display:inline-block; height:160px; overflow:hidden; column-count: 12;column-gap: 5px; text-align: left; transition: all 0.3s; -webkit-transition: all 0.3s}
/*.tags_area.active {height:500px; transition: all 0.3s; -webkit-transition: all 0.3s; overflow-x:auto; }*/
.tags_area.active {height:auto; transition: all 0.3s; -webkit-transition: all 0.3s; }
.tags_area p>a{color: #343434;font-size: 0.98em;line-height: 26px; font-weight: 300;}
.tags_area p>a.active{color: #e20612;font-size: 0.98em;line-height: 26px; text-decoration: underline; font-weight: 600;}
.tags_more2{background-color:#000; color:#fff; font-weight: 100;  border:1px solid #000; position:relative; z-index:10; bottom:-19px; margin:0 auto; display:inline-block; width: 40px; height: 40px; vertical-align: middle; line-height:40px; border-radius: 4px;}
/* .tags_more2:hover{ border:1px solid #4429E7;  } */
.tags_more2>span {}

.favorite_tags ul {text-align: center; margin:20px auto 25px; }
.favorite_tags ul>li {display:inline-block; line-height: 1; padding: 0 10px; border-right:1px solid #ddd;}
.favorite_tags ul>li:nth-last-child(1) { border-right:0px solid #ccc;}
.favorite_tags ul>li>a { font-size: 15px; letter-spacing: -0.38px; color:#0F192A; font-weight: 500;}
.favorite_tags ul>li>a.active {color:#e30613;}

.view_type { }
.view_type>.view_type_btn { }
.view_type>.view_type_btn>li { display: inline-block; }
.view_type>.view_type_btn>li a { display: block; width:90px; border:1px solid #ddd; font-size:14px; text-align: center; font-weight: 300; color: #999; }
.view_type>.view_type_btn>li a.active { color: #e20612; border:1px solid #e20612;}

.portfolio_cate { width: 100%; margin:0 auto 20px; }
.portfolio_cate_bt { display: flex; margin: 0 auto; }
.portfolio_cate_bt>a { display:block; width:calc((100%/7) - 6px); height: 55px; text-align: center; line-height: 55px; font-weight: 500; font-size: 16px; color:#000; border:1px solid #ddd; margin-right: 7px; }
.portfolio_cate_bt>a:hover { color:#e30613; }
.portfolio_cate_bt>a:last-child { margin-right: 0; }
.portfolio_cate_bt>a.active {background-color: #e30613; border-color:#e30613; color: rgba(255,255,255,1); }
.portfolio_cate_select { display: none; }
.portfolio_cate_select select { width:100%; height: 50px; border:1px solid #ddd; padding: 3px 12px; font-size: 15px; }
.portfolio_cate_select select:focus { outline: none; }

.portfolio_wrap { margin:0 auto;}
/*.portfolio_wrap li{ width:24%; text-align: center; display:inline-block; margin-bottom:60px; }*/
/*.portfolio_wrap li img{ border:1px solid #efefef; }*/
.grid_wrap { margin:30px auto 0; }
.grid_wrap .grid .grid-item { border:1px solid #ddd; margin:0 0 80px; }

.grid_wrap .grid-item .portfolio_info { text-align: center; margin:0 0 20px; }
.grid_wrap .grid-item .portfolio_info .info { padding-bottom: 15px; line-height: 1.1; }
.grid_wrap .grid-item .info .type { font-size: 14px; font-weight: 300; color:#666; letter-spacing: -0.35px; margin:8px 0 0; display: block; width:100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.grid_wrap .grid-item .info .name { font-size: 18px; font-weight: 500; color:#222; display: block; width:100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin:8px auto 0; }
.grid_wrap .grid-item .btn_wrap { display: flex; justify-content: center; }
.grid_wrap .grid-item .btn_wrap li + li { margin-left: 6px; }
.grid_wrap .grid-item .btn_wrap a { display: block; width: 92px; height: 34px; border: solid 1px #ddd; text-align: center; line-height: 32px; font-size: 14px; color: #000; transition: all .3s; background: #fff; }
.grid_wrap .grid-item .btn_wrap a:hover { background:#000; border-color: #000; color:#fff; }

/* .portfolio_hashtag{ margin:25px 0 0; max-height: 65px; overflow: hidden; } */
.portfolio_hashtag{ margin:40px 0 0; }
.portfolio_hashtag:after{display: block;content: "";clear: both;}
.portfolio_hashtag>a { float:left; display: inline-block; font-size: 11.5px; font-weight: 300;  letter-spacing: -0.29px; padding:0 8px; border: 1px solid #ddd; border-radius: 20px; color:#999; margin:0 8px 8px 0; transition: all 0.3s; white-space: nowrap; line-height: 30px; height: 30px; background: #fff;}
.portfolio_hashtag>a:hover{ background: #e20612; color: #fff; border-color:#e20612; text-decoration: none; }
.portfolio_hashtag>a.active{ background: #e20612; color: #fff; border-color:#e20612; text-decoration: none; }

button { background:none; padding:0; }

@media screen and (max-width: 1780px) {
    /* 공통 */
    .con_inner { max-width: 100%; padding: 0 80px; }

    /* mason */
}

@media screen and (max-width: 1550px) {
    .portfolio_cate_bt { position:relative; flex-wrap: wrap; border-top: 1px solid #ddd; border-left: 1px solid #ddd; }
    .portfolio_cate_bt>a { width: 25%; margin: 0; border:0; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;  line-height: 25px; font-size: 16px; display: flex; align-items: center; justify-content: center; word-break: keep-all;}
    .portfolio_cate_bt::before { content:""; position:absolute; right:0; bottom:0; width:25%; height: 1px; background:#ddd; }
    .portfolio_cate_bt::after { content:""; position:absolute; right:0; bottom:0; width:1px; height: 50%; background:#ddd; }
}

@media screen and (max-width: 1420px) {
    /* 공통 */
    .con_inner { max-width: 100%; padding: 0 60px; }
    .tags_area_wrap { padding: 40px 30px 0 30px; }
    .tags_area { column-count: 10; }

    /* mason */
}

@media screen and (max-width: 1100px) {
    /* 공통 */
    #port_wrap { margin: 130px 0 0; padding: 0 0 100px; }
    .con_inner { padding: 0 40px; }
    .big_title { font-size: 45px; }

    .form-group-lg .form-control { height: 60px; }
    .form-group-lg .btn-danger { font-size: 28px; }


    .tags_area { height: 130px; column-count: 7; }
    /* mason */
}

@media screen and (max-width: 767px) {
    /* 공통 */
    #port_wrap { margin: 100px 0 0; padding: 0 0 60px; }
    .con_inner { padding: 0 20px; }
    .big_title { font-size: 35px; margin: 0 0 30px; }

    .form-group-lg .form-control { height: 50px; padding: 10px 20px; font-size: 16px; }
    .form-group-lg .btn-danger { font-size: 25px; }
    .favorite_tags ul { margin: 20px auto; }
    .favorite_tags ul>li { margin: 8px 0; }

    .tags_area_wrap { padding: 10px 10px 0 10px; margin: 0 auto 25px; }
    .tags_area { width: 100%; height: 120px; column-count: 3; }
    .tags_area p>a { display: block; width: 100%; font-size: 14px; padding:5px 2px; overflow: hidden; text-overflow: ellipsis; }
    .portfolio_cate_bt::before { display: none; }
    .portfolio_cate_bt::after { display: none; }
    .portfolio_cate_bt { display: none; }
    /* .portfolio_cate_bt>a { width: 33.3%; font-size: 14px; height: 45px; }
    .portfolio_cate_bt>a:last-child { width:100%; } */
    .portfolio_cate_select { display: block; }

    .list_wrap .top { flex-wrap: wrap; }
    .list_wrap .top .col-xs-6 { width: 100%; }
    .list_wrap .top .col-xs-6:last-child { margin:10px 0 0; }

    /* mason */

}
/*포트폴리오 끝*/