@charset "utf-8";

/*************************************
*       Works
**************************************/

/* Sub Contents */
[data-wv-layout-element="weven-plugin"] .sub_works_category{overflow: hidden; margin-top: 39px; margin-bottom: 48px; text-align: center;transition: height 0.4s ease-in-out;height: 420px;}
[data-wv-layout-element="weven-plugin"] .sub_works_category.hide {height: 0px;}
[data-wv-layout-element="weven-plugin"] .sub_works_category > li{display: list-item; text-align: center; }
[data-wv-layout-element="weven-plugin"] .sub_works_category > li > a{padding: 18px 17px; color: #5d5d5d; font-weight: 500; display: inline-block; font-size: 20px; transition:all 0.5s;}
[data-wv-layout-element="weven-plugin"] .sub_works_category > li:hover > a,
[data-wv-layout-element="weven-plugin"] .sub_works_category > li.on > a {color: #fff;}

[data-wv-layout-element="weven-plugin"] .works_list{overflow: hidden; width: 346px; height: auto; margin: 0 auto; text-align: center; word-break: break-all; position: relative; margin-bottom: 29px;}
[data-wv-layout-element="weven-plugin"] .works_list .work_con{ transition:all 0.4s; width:100%; margin:0 auto; text-align:center; position:relative; height: 100%; overflow: hidden; }
[data-wv-layout-element="weven-plugin"] .works_list dl{ display: inline-block; margin: 0 0 30px; left:150%; transition:all 0.4s ease-out; -webkit-transition:all 0.4s ease-out; /*background-color: #000;*/}
[data-wv-layout-element="weven-plugin"] .works_list dl.transition_off{ transition:none; }

[data-wv-layout-element="weven-plugin"] .works_list dl > dt{font-size: 0;}
[data-wv-layout-element="weven-plugin"] .works_list dl > dt a{display: inline-block; width: 346px; height: 207px; overflow: hidden;}
[data-wv-layout-element="weven-plugin"] .works_list dl > dt a img{max-width: 346px;}
[data-wv-layout-element="weven-plugin"] .works_list dl > dd{background-color: #fff; height: 124px; /*padding-top: 25px*/; color: #595959; position: relative; overflow: hidden;}
[data-wv-layout-element="weven-plugin"] .works_list dl > dd .works_title{font-size: 15px; /*margin: 25px 0 11px 0;*/ color: #595959; position: absolute; z-index: 1; width: 100%; text-align: center; top: 25px; font-family: 'Noto Sans KR'; font-weight: 400; letter-spacing:-0.01em;}
[data-wv-layout-element="weven-plugin"] .works_list dl > dd .works_sub_title{font-size: 10px; color: #595959; position: absolute; z-index: 10; width: 100%; text-align: center; top: 52px;}
[data-wv-layout-element="weven-plugin"] .works_list dl > dd .over_arrow{position: relative; top: 84px; z-index: 2;}

[data-wv-layout-element="weven-plugin"] .pagination {display: none; transition:all 0.4s; margin: 0 auto;}
[data-wv-layout-element="weven-plugin"] .pagination > p{color: #5d5d5d; font-size: 10px; font-weight: 500; margin-bottom: 16px;}
[data-wv-layout-element="weven-plugin"] .pagination > p > span{color: #fff;}
[data-wv-layout-element="weven-plugin"] .pagination > .page_wrap{position: relative; width: 100%; height: 1px; padding: 3px 0px; overflow: hidden; background: url("../img/works_list_bg.jpg") repeat-x left center;}
[data-wv-layout-element="weven-plugin"] .pagination > .page_wrap > .bar {position: absolute; left: 0; top: 3px; width: 20%; height: 1px; background-color: #fff; float: left; overflow: hidden; transition: all 0.3s;}
[data-wv-layout-element="weven-plugin"] .pagination > .page_wrap > .bar span {display: none; line-height: 3px;}
[data-wv-layout-element="weven-plugin"] .pagination > .page_wrap > .bar.dragging {transition: none;}
[data-wv-layout-element="weven-plugin"] .pagination > .page_wrap > .bar.dragging {top: 0px; height: 7px; cursor: pointer;}
[data-wv-layout-element="weven-plugin"] .pagination > .page_wrap > .bar.dragging span.works_prev_btn {display: inline-block; float: left; margin: 2px 0 0 2px;}
[data-wv-layout-element="weven-plugin"] .pagination > .page_wrap > .bar.dragging span.works_next_btn {display: inline-block; float: right; margin: 2px 2px 0 0;}
[data-wv-layout-element="weven-plugin"] .pagination > .page_wrap:hover > .bar {top: 0px; height: 7px; cursor: pointer;}
[data-wv-layout-element="weven-plugin"] .pagination > .page_wrap:hover > .bar span.works_prev_btn {display: inline-block; float: left; margin: 2px 0 0 2px;}
[data-wv-layout-element="weven-plugin"] .pagination > .page_wrap:hover > .bar span.works_next_btn {display: inline-block; float: right; margin: 2px 2px 0 0;}

/* detail 팝업 */
[data-wv-layout-element="weven-plugin"] .works_popup_wrap {position: fixed; z-index: -1;top:0; left:0; display: none;}
[data-wv-layout-element="weven-plugin"] .works_popup_wrap.on { z-index: 101; display: block; }
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .popup_bg_con { position: fixed; z-index: 0; opacity: 0; width:100%;}
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .works_popup_con {position: relative; opacity:1; transition:all 0.4s 0s ; z-index: 10; max-width: 1117px; margin: 0 auto; float: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .works_popup_con.opacity_off {opacity:0 !important; }
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .works_description_wrap {background-color: #33241d;}
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .popup_detail_wrap {padding: 0 0 0 26px; overflow: hidden; color: #fff; font-size: 12px; line-height: 20px; overflow: hidden; }
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .popup_detail_wrap.bot_wrap { padding: 0 26px 0 26px; }
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .popup_head_btn_con {height: 75px; width:100%;}
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .btn_idx_con {height: 75px; z-index: 99; box-sizing: border-box;transition: background-color 0.3s;width:100%;background-color: rgba(0,0,0,0);}
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .btn_idx_con .collection_index_wrap_mobile { text-align: left; width:45%;float: left; display: table; height: 75px; box-sizing: border-box; }
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .btn_idx_con .web_popup_close_btn{ width: 21px; height: 21px; display: table-cell; vertical-align: middle; padding-left: 20px;}
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .btn_idx_con .web_popup_close_btn > a{ display: block; margin-bottom: 5px; width: 41px; text-align: right; border-left: 1px solid rgba(255,255,255, 0.3); padding: 1px 0; }
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .btn_idx_con .web_popup_btn_con { width:55%; overflow: hidden;float: right;}
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .btn_idx_con .web_popup_btn_con > a{ float: right; padding-left: 1px; }
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .web .btn_idx_con .web_popup_btn_con [class*="popup"]{ background-color: rgba(255, 255, 255, 0.1); }
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .web .btn_idx_con .web_popup_btn_con .popupCloseBtn:hover{ background-color: #000; }
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .web .btn_idx_con .web_popup_btn_con .popupNextBtn:hover{ background-color: #000; }
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .web .btn_idx_con .web_popup_btn_con .popupPrevBtn:hover{ background-color: #000; }

/* popup head effext */

/* detail 팝업 on */
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .works_popup_con.on { opacity: 1; margin-top: 0px; }
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .popup_detail_wrap .btn_idx_con.on {  top: 0; opacity: 1;transition:all 0.4s 0s ; }
/* detail 팝업 off */
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .works_popup_con.off { opacity: 0; padding-top: 70px; }
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .popup_detail_wrap .btn_idx_con.off {  top: 0px;   transition:all 0.4s 0s ; }
/*.works_popup_wrap .popup_bg_con.off { width:0; transition-delay: 0.4s; }*/

/* 팝업 스크롤바 */

/*scroll bar css*/
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .works_popup_con.web{
    scrollbar-base-color: #000;
    scrollbar-Face-Color: #3d3d3d;
    scrollbar-Highlight-Color: #000;
    scrollbar-arrow-color: #000;
}
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .works_popup_con.web::-webkit-scrollbar {width: 17px; border: 4px solid transparent; }
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .works_popup_con.web::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 5px; background: transparent}
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .works_popup_con.web::-webkit-scrollbar-track { background: transparent; -webkit-box-shadow: inset 0 0 4px transparent}
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .works_popup_con.web::-webkit-scrollbar-thumb { background: transparent; border:12px solid transparent; -webkit-box-shadow: inset 0 0 40px #fff;  }
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .detail_line {min-width: 80px;margin: 0  80% 0 27px ;clear: both; height: 1px; background: url("../img/popup_line.png") repeat-x left top;}
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .popup_detail_wrap .popup_title {font-size: 48px; font-weight: bold; line-height: 46px; color: #fff; margin-bottom: 27px;text-transform:uppercase; }
[data-wv-layout-element="weven-plugin"] .works_popup_wrap .popup_detail_wrap .popup_title > span {display: block;}


[data-wv-layout-element="weven-plugin"] .popup_out_bg_dim{position: fixed; z-index: 100; top: 0; left: 0; -ms-filter:alpha(opacity=80); transition: width 0.4s ease-in-out; transition-delay: 0.1s ;background-color: #000000; opacity: 0.8; width:0;}
[data-wv-layout-element="weven-plugin"] .popup_out_bg_dim.on{ width:100%; }



[data-wv-layout-element="weven-plugin"] .collection_index_wrap_mobile { font-size: 30px; font-weight: bold; line-height: 1em; color: #fff;}
[data-wv-layout-element="weven-plugin"] .collection_index_wrap_mobile .collection_copy {font-size: 12px;font-weight: normal; opacity: 0; -ms-filter:alpha(opacity=50); letter-spacing: 0.025em; display: table-cell; vertical-align: middle; line-height: 11px; transition: opacity .4s;}

[data-wv-layout-element="weven-plugin"] .popup_page_index { display: inline-block; vertical-align: top; line-height: 1em; font-size: 30px; display: table-cell ; vertical-align: middle; margin-top: 62px; padding-top: 10px;}


[data-wv-layout-element="weven-plugin"] .popup_body_content{ opacity:0; transition:opacity 0.4s 0.2s; }
[data-wv-layout-element="weven-plugin"] .work_list_con{ opacity:0; transition:opacity 0.4s 0.3s; }
[data-wv-layout-element="weven-plugin"] .description_area{ opacity:0; transition:opacity 0.4s 0.4s; }
[data-wv-layout-element="weven-plugin"] .works_period_text{ opacity:0; transition:opacity 0.4s 0.5s; }
[data-wv-layout-element="weven-plugin"] .popFofolImgCon img{ opacity:0; margin-top:50px; transition:all 0.4s 0.2s; }
[data-wv-layout-element="weven-plugin"] .motion_on{ opacity:1 !important; margin-top:0px !important; }


[data-wv-layout-element="weven-plugin"] .description_wrap {overflow: hidden; margin: 32px 0px 79px;}
[data-wv-layout-element="weven-plugin"] .description_wrap .work_area {width: 36.7%; float: left;}
[data-wv-layout-element="weven-plugin"] .description_wrap .work_area .work_list_con li {opacity: 0.5; -ms-filter:alpha(opacity=50);}
[data-wv-layout-element="weven-plugin"] .description_wrap .work_area .work_list_con li.title {opacity: 1; -ms-filter:alpha(opacity=100); margin-bottom: 16px;}
[data-wv-layout-element="weven-plugin"] .description_wrap .description_area {width: 63.3%; float: left;}
[data-wv-layout-element="weven-plugin"] .description_wrap .description_area .title {margin-bottom: 19px;}
[data-wv-layout-element="weven-plugin"] .description_wrap .description_area .text {font-size: 13px; font-family: "Noto Sans KR"; font-weight: 200; opacity: 0.5; -ms-filter:alpha(opacity=50);}
[data-wv-layout-element="weven-plugin"] .period_area {clear: both; margin-bottom: 24px;}
[data-wv-layout-element="weven-plugin"] .popup_page_index  *{ font-size: 20px;  }
[data-wv-layout-element="weven-plugin"] .popup_page_index  .slash{ padding:0 4px; }
[data-wv-layout-element="weven-plugin"] .popup_page_index .total_count{ opacity: 0.2; -ms-filter:alpha(opacity=20); }

/*popup scroll*/

@media all and (min-width: 320px) {

    [data-wv-layout-element="weven-plugin"] .sub_works_category{overflow: hidden; margin-top: 39px; margin-bottom: 43px; text-align: center;}
    [data-wv-layout-element="weven-plugin"] .description_wrap .work_area .work_list_con li { opacity:0.7; }
    [data-wv-layout-element="weven-plugin"] .description_wrap .description_area .text{ opacity:0.7; font-weight: 400; line-height:21px; margin-top: -5px;}
    [data-wv-layout-element="weven-plugin"] .description_wrap .description_area .text br { content: " "; display: none; }
    [data-wv-layout-element="weven-plugin"] .works_popup_wrap .popup_detail_wrap { padding-top : 20px; }
    [data-wv-layout-element="weven-plugin"] .works_popup_wrap .popup_detail_wrap .popup_title { font-size:40px; line-height:40px; }

}

@media all and (min-width: 768px) {
    [data-wv-layout-element="weven-plugin"] .description_wrap .description_area .text br { content: none; display: inline; }
    [data-wv-layout-element="weven-plugin"] .description_wrap .work_area .work_list_con li {font-weight: 300;}
    [data-wv-layout-element="weven-plugin"] .description_wrap .description_area .title {font-weight: 300;}
    [data-wv-layout-element="weven-plugin"] .collection_index_wrap_mobile .collection_copy {font-weight: 300;}

    /*[data-wv-layout-element="weven-plugin"] {padding-top: 252px;}*/
    [data-wv-layout-element="weven-plugin"] .sub_title .menu_name.about_us {font-size: 60px; padding-bottom: 19px;}
    [data-wv-layout-element="weven-plugin"] .sub_works_category {height: auto;}
    [data-wv-layout-element="weven-plugin"] .sub_works_category > li{display: inline-block; text-align: center;}
    [data-wv-layout-element="weven-plugin"] .sub_works_category > li > a{padding: 0px 17px; font-size: 16px;}
    [data-wv-layout-element="weven-plugin"] .works_list{width: 692px; text-align: center;}
    [data-wv-layout-element="weven-plugin"] .works_list dl{float: left; margin: 0 0 40px 0; height: auto;}

    [data-wv-layout-element="weven-plugin"] .description_wrap .work_area {width: 27.6%;}
    [data-wv-layout-element="weven-plugin"] .description_wrap .description_area {width: 72.4%;}
    [data-wv-layout-element="weven-plugin"] .works_popup_wrap .popup_detail_wrap {padding: 0 0 0 27px;}
    [data-wv-layout-element="weven-plugin"] .works_popup_wrap .popup_detail_wrap.bot_wrap {padding: 0 27px;}
    [data-wv-layout-element="weven-plugin"] .works_popup_wrap .detail_line {margin: 0px 80% 0 27px;}
    [data-wv-layout-element="weven-plugin"] .description_wrap {margin: 32px 0px 80px;}
    [data-wv-layout-element="weven-plugin"] .description_wrap .work_area .work_list_con li {font-size: 10px;}
    [data-wv-layout-element="weven-plugin"] .description_wrap .work_area .work_list_con li.title {font-size: 12px;}
    [data-wv-layout-element="weven-plugin"] .description_wrap .description_area .text { font-size: 11px; font-family: "NanumBarunGothic"; line-height:20px; font-weight: 300; letter-spacing: 0.04em; opacity: 0.6; }

    [data-wv-layout-element="weven-plugin"] .works_popup_wrap .popup_detail_wrap { padding-top : 0px; }
    [data-wv-layout-element="weven-plugin"] .works_popup_wrap .popup_detail_wrap .popup_title { font-size:48px; line-height:48px; }
    [data-wv-layout-element="weven-plugin"] .period_area {margin-bottom: 29px; font-weight: 300;}
}

@media all and (min-width: 1025px) {
    [data-wv-layout-element="weven-plugin"] .works_popup_wrap .popup_detail_wrap .btn_idx_con { padding-left: 70px; }
    [data-wv-layout-element="weven-plugin"]{/*display: table; position: absolute;*/ padding-top: 0;}

    [data-wv-layout-element="weven-plugin"] .works_list{width: 100%; height: 331px; text-align: center; height: 331px;}
    [data-wv-layout-element="weven-plugin"] .works_list dl{margin: 0; position: absolute;}
    [data-wv-layout-element="weven-plugin"] .sub_works_category{margin-top: 27px; margin-bottom: 32px;}
    [data-wv-layout-element="weven-plugin"] .sub_works_category > li > a{padding: 0 21px; font-size: 16px;}
    [data-wv-layout-element="weven-plugin"] .works_list{width: 100%;}
    [data-wv-layout-element="weven-plugin"] .pagination{width: 100%; display: block;}
    [data-wv-layout-element="weven-plugin"] .pagination > p{padding-left: 25px;}

    [data-wv-layout-element="weven-plugin"] .sub_title .menu_name{font-size: 60px; padding-bottom: 19px;}

    [data-wv-layout-element="weven-plugin"] .works_popup_wrap .popup_detail_wrap {padding: 0 0 0 70px;}
    [data-wv-layout-element="weven-plugin"] .works_popup_wrap .popup_detail_wrap.bot_wrap {padding: 0 0 0 70px;}
    [data-wv-layout-element="weven-plugin"] .works_popup_wrap .detail_line {margin: 0px 80% 0 70px;}
}

@media all and (min-width: 1280px) {
    /*[data-wv-layout-element="weven-plugin"] {padding-left: 66px;}*/
    [data-wv-layout-element="weven-plugin"] .sub_title .menu_name{font-size: 64px; padding-bottom: 26px;}
    [data-wv-layout-element="weven-plugin"] .sub_title .menu_name.about_us {font-size: 80px; padding-bottom: 26px;}
    /*[data-wv-layout-element="weven-plugin"] .works_list{width: 93.3117583603%;}*/
    [data-wv-layout-element="weven-plugin"] .pagination{width: 93.3117583603%;}
    [data-wv-layout-element="weven-plugin"] .pagination > p{padding-left: 0px;}
    [data-wv-layout-element="weven-plugin"] .sub_works_category > li > a {font-size: 12px;}

    [data-wv-layout-element="weven-plugin"] .sub_works_category{margin-top: 37px; margin-bottom: 46px;}
}

[data-wv-layout-element="weven-plugin"] .works_list dl dt{position: relative; }
[data-wv-layout-element="weven-plugin"] .works_list dl.yetNonPop dt:before{ content:"Ready";color:#bbb;  z-index: 21; height:20%; width:100%; position: absolute; top: 48%; left:0; font-size: 40px;} /*포폴 없는 박스 처리*/
[data-wv-layout-element="weven-plugin"] .works_list dl.yetNonPop dt:after{ content:"Ready"; color:#bbb; background-color: rgba(0,0,0, 0.7); width:100%; z-index: 20; position: absolute; top: 0%; left:0; } /*포폴 없는 박스 처리*/