@charset "utf-8";

/* Top Search */
.list-tsearch { border:1px solid #ddd; background:#fafafa; padding:20px 15px 3px; margin-bottom:15px; }

/* Category */
.list-category .tabs { margin-bottom:20px; }
.list-category .dropdown { margin-bottom:20px; }
.list-category .active a, .list-category .selected a { color:crimson; font-weight:bold !important; }

/* List */
.list-wrap { width:100%; }
.list-admin { text-align:center; margin:15px 0px; }
.list-btn .sort-drop { min-width:120px !important; left:auto !important; right:0px !important; }
.list-btn .sort-drop .sort a { color:crimson !important; font-weight:bold !important; }
.is-pc .ko .list-btn .sort-drop { font-size: 12px; }

/* Page */
.list-wrap .pagination a, .view-wrap .pagination a { color:#333 !important; }
.list-wrap .pagination .active a, .view-wrap .pagination .active a { color:#fff !important; background:#444 !important; border-color:#444 !important; }

/* View */
.view-wrap { width:100%; }
.view-wrap.view-modal { padding:5px; margin:0px; }
.view-btn { margin:0px 0px 30px; }
.view-btn i { margin-right:2px; }

/* Write */
.write-wrap { width:100%; overflow:hidden; }

@media all and (max-width:460px) {
	.responsive .view-btn i { margin-right:0px; }
}

/* 작성페이지 커스텀 */
p.write_p {font-size: 16px; font-weight: 700; color:#111;}
.main_text .fb_bdb {display: flex; flex-direction: column; gap: 15px 0; margin-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee;}

.view_text {display: flex; flex-direction: column; gap: 20px 0; padding-top: 20px; margin-bottom: 50px;}

.portfolio_text {display: flex;}
.portfolio_text label {width: 160px; font-size: 18px; color: #888;}
.portfolio_text .answer {width: calc(100% - 160px);}
.portfolio_text input[type='text'] {width: 100%; height: 50px; padding: 0 20px; border: 1px solid #dcdcdc; border-radius: 7px; font-size: 18px; line-height: 50px; color: #333;}

.portfolio_text textarea {width: 100%; height: 250px; padding: 20px; border: 1px solid #dcdcdc; border-radius: 7px; font-size: 18px; line-height: 1.4; color: #333;resize:none;}


.checkbox_port {gap: 0 15px; align-items: center;}
.portfolio_text.checkbox_port .answer {width: calc(100% - 175px);}

/* view페이지 */

.ask_btn {margin: 60px 0 80px; text-align: center;}
.ask_btn a {display: inline-block; width: 312px; line-height: 56px; border-radius: 50px; background: #111111; color:#fff; font-size: 17px;}

.view-btn_wrap {display: flex;  justify-content: space-between; padding-top: 35px; border-top:1px solid #999999;}
.view-btn_wrap .vb_l .new_list {display: flex; align-items: baseline; gap: 0 16px;}
.view-btn_wrap .vb_l .new_list span {font-family: "Pretendard",sans-serif !important; font-size:16px; font-weight: 500; color:#222222;}
.view-btn_wrap .vb_r {position: relative; display: flex; gap: 0 60px;}
.view-btn_wrap .vb_r::after {content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(calc(-50% + 0.5px)); width: 1px; height: 15px; background: #c9c9c9;}
.view-btn_wrap .vb_r .prev_next {font-size: 16px; color: #222;}

@media (max-width:991px) {
    .ask_btn {margin: clamp(40px,6.05vw,60px) 0 clamp(45px,8.07vw,80px);}
    .ask_btn a {width:248px;line-height:45px;font-size: clamp(14px,1.72vw,17px);}

    .view-btn_wrap {padding-top:clamp(25px,3.53vw,35px);}
    .view-btn_wrap .vb_l .new_list{gap: clamp(13px,1.61vw,16px);}
    .view-btn_wrap .vb_l .new_list img {height: 9px;}
    .view-btn_wrap .vb_l .new_list span {font-size: clamp(13px,1.61vw,16px);}

    .view-btn_wrap .vb_r {gap:0 clamp(50px,5.05vw,60px)}
    .view-btn_wrap .vb_r::after {top:0px;}
    .view-btn_wrap .vb_r .prev_next {font-size: clamp(13px,1.61vw,16px);}
}




.view_box .sc_topbanner img {width: 100%; object-fit: cover;}

/*게시판 타이틀*/
.port_title {margin-bottom: 70px;}
.port_title h3 {font-weight: 700; font-size: 30px; color: #222222;}

.thumb_img {border-radius: 8px; overflow: hidden;}

/* 썸네일 하단 타이틀 */
.pf_wrap {margin-top: 85px;}
.pf_wrap .pf_top {text-align: center; padding-bottom: 95px; border-bottom: 1px solid #e1e1e1;}
.pf_wrap .pf_top .pf-subtit {margin-bottom: 12px; font-size: 35px; font-weight: 600; line-height: 1.7; color: #222222;}
.pf_wrap .pf_top .pf-space {font-size: 18px; line-height: 1.5; color: #666666;}

/* 스타일링 관련 */
.pf_wrap .pf_mid {margin: 100px 0; display: flex; gap: 0 100px; align-items: flex-start;}

.pf_wrap .pf_mid .style_left {flex: 1;}
.pf_wrap .styling_info {padding-bottom: 95px; border-bottom: 1px solid #e1e1e1;}
.pf_wrap .styling_info .styling_tit {margin-bottom: 40px; font-weight: 700; font-size: 23px; color:#222222;}
.pf_wrap .styling_info .styling_con {font-size: 18px; line-height: 1.65; color:#666666;}

.pf_wrap .view_info {margin-top: 30px;}
.pf_wrap .view_info .view_info_li {display: flex; gap: 0 70px;}
.pf_wrap .view_info .view_info_li .info-list {width: 35px; font-weight: 500; font-size: 18px; color: #222222;}
.pf_wrap .view_info .view_info_li .info_wr {width: calc(100% - 105px); font-size: 18px; color: #666666;}


/* 스타일링 이미지 관련 */
.pf_wrap .pf_mid .style_right {max-width: 720px; width: 100%; border-radius: 10px; overflow: hidden;}

/* wr_content 부분 */
.pf_wrap .pf_bot img {width: 100%; object-fit: cover;}


@media (max-width:991px) {

    /*게시판 타이틀*/
    .port_title {margin-bottom: clamp(40px,7.06vw,70px);}
    .port_title h3 {font-weight: 700; font-size: clamp(20px,3.03vw,20px); color: #222222;}

    .thumb_img {border-radius: 4px;}

    /* 썸네일 하단 타이틀 */
    .pf_wrap {margin-top:clamp(50px,8.577194752774975vw,85px)}
    .pf_wrap .pf_top {padding-bottom: clamp(50px,9.58627648839556vw,95px);}
    .pf_wrap .pf_top .pf-subtit {font-size: clamp(18px,3.531786074672048vw,35px); line-height:1.4;}
    .pf_wrap .pf_top .pf-space {font-size: clamp(14px,2.791vw,18px);}

    /* 스타일링 관련 */
    .pf_wrap .pf_mid {flex-direction: column-reverse; gap: 40px 0; margin: clamp(50px,10.09vw,100px) 0;}
    .pf_wrap .pf_mid .style_left {flex: none; width: 100%;}
    .pf_wrap .styling_info {padding-bottom: clamp(45px,9.59vw,95px);}
    .pf_wrap .styling_info .styling_tit {margin-bottom: clamp(15px,4.04vw,40px); font-size: clamp(17px,2.32vw,23px);}
    .pf_wrap .styling_info .styling_con {font-size: clamp(14px,1.82vw,18px);}


    .pf_wrap .view_info {margin-top: clamp(20px,3.03vw,30px);}
    .pf_wrap .view_info .view_info_li {gap:0 25px;}
    .pf_wrap .view_info .view_info_li .info-list {width:32px;font-size: clamp(14px,1.816347124117053vw,18px); line-height:1.7;}
    .pf_wrap .view_info .view_info_li .info_wr {width:calc(100% - 55px); font-size: clamp(14px,1.816347124117053vw,18px); line-height:1.7;}


    
    /* 스타일링 이미지 관련 */
    .pf_wrap .pf_mid .style_right {max-width: none; border-radius: 5px;}

}

/* list */


.portfolio-row .img-wrap .img-item {border-radius: 8px;}
 
.portfolio-row .swiper-box {position: relative;}
.portfolio-row .portfolio_infos-l {margin-top: 36px;}
.portfolio-row .portfolio_infos-l .pf_info_lt {display:-webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical;  font-size: 23px; font-weight: 500; color: #222222;}
.portfolio-row .portfolio_infos-l .pf_info_ld {display:-webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical;margin-top: 16px; font-size: 18px; line-height: 1.1; color: #777777;}


.swiper-button-next:after, .swiper-button-prev:after {display: none;}

.portfolio_g .portfolio-row .swiper-button {display: block; width: 63px; height: 63px; border-radius: 50%; transition: all .3s; margin-top: 0; top:53.5%; transform: translateY(-50%); opacity: 0.8; box-shadow:0px 5px 10px 0px rgba(61, 61, 61, 0.15);}
.portfolio_g .portfolio-row .swiper-button:hover {opacity: 1;}
.portfolio_g .portfolio-row .swiper-button.swiper-button-next {right: 15px;}
.portfolio_g .portfolio-row .swiper-button.swiper-button-prev {left: 15px;}


@media (max-width:991px) {
    .portfolio-row .img-wrap .img-item {border-radius: 4px;}
    .portfolio-row .portfolio_infos-l {margin-top: clamp(25px,3.33vw,33px);}
    .portfolio-row .portfolio_infos-l .pf_info_lt{font-size: clamp(17px,2.32vw,23px);}
    .portfolio-row .portfolio_infos-l .pf_info_ld {font-size: clamp(16px,1.82vw,18px); margin-top: 15px;}

    .portfolio_g .portfolio-row .swiper-button {width: 28px; height: 28px;}
    .portfolio_g .portfolio-row .swiper-button img {width: 28px;}

    .portfolio_g .portfolio-row .swiper-button.swiper-button-prev {left: 5px;}
    .portfolio_g .portfolio-row .swiper-button.swiper-button-next {right: 5px;}

}